@teamsparta/stack-flex/dist/chunk-Z5LQVS5E.mjs

stack flex

// src/v1/Flex.style.ts
import styled from "@emotion/styled";
var justifyContentMap = {
  start: "flex-start",
  end: "flex-end",
  center: "center",
  between: "space-between",
  around: "space-around",
  evenly: "space-evenly",
  normal: "normal"
};
var alignItemsMap = {
  start: "flex-start",
  end: "flex-end",
  center: "center",
  baseline: "baseline",
  stretch: "stretch",
  normal: "normal"
};
var FlexBase = styled.div`
  display: flex;
  ${({ $direction: direction }) => {
  if (!direction)
    return;
  return direction.map(({ breakpoint, value }) => {
    if (breakpoint === 0)
      return `flex-direction: ${value};`;
    return `
        @media screen and (min-width: ${breakpoint}px) {
          flex-direction: ${value};
        }
      `;
  });
}};
  ${({ $wrap: wrap }) => {
  if (!wrap)
    return;
  return wrap.map(({ breakpoint, value }) => {
    if (breakpoint === 0)
      return `flex-wrap: ${value};`;
    return `
        @media screen and (min-width: ${breakpoint}px) {
          flex-wrap: ${value};
        }
      `;
  });
}};
  ${({ $justify: justify }) => {
  if (!justify)
    return;
  return justify.map(({ breakpoint, value }) => {
    if (breakpoint === 0)
      return `justify-content: ${justifyContentMap[value]};`;
    return `
        @media screen and (min-width: ${breakpoint}px) {
          justify-content: ${justifyContentMap[value]};
        }
      `;
  });
}};
  ${({ $align: align }) => {
  if (!align)
    return;
  return align.map(({ breakpoint, value }) => {
    if (breakpoint === 0)
      return `align-items: ${alignItemsMap[value]};`;
    return `
        @media screen and (min-width: ${breakpoint}px) {
          align-items: ${alignItemsMap[value]};
        }
      `;
  });
}};
  ${({ $gap: gap }) => {
  if (!gap)
    return;
  return gap.map(({ breakpoint, value }) => {
    if (breakpoint === 0)
      return `gap: ${typeof value === "number" ? `${value}px` : value};`;
    return `
        @media screen and (min-width: ${breakpoint}px) {
          gap: ${typeof value === "number" ? `${value}px` : value};
        }
      `;
  });
}};
  ${({ $fullHeight: fullHeight }) => {
  if (!fullHeight)
    return;
  return fullHeight.map(({ breakpoint, value }) => {
    if (breakpoint === 0)
      return `height: ${value ? "100%" : "auto"};`;
    return `
        @media screen and (min-width: ${breakpoint}px) {
          height: ${value ? "100%" : "auto"};
        }
      `;
  });
}};
  ${({ $fullWidth: fullWidth }) => {
  if (!fullWidth)
    return;
  return fullWidth.map(({ breakpoint, value }) => {
    if (breakpoint === 0)
      return `width: ${value ? "100%" : "auto"};`;
    return `
        @media screen and (min-width: ${breakpoint}px) {
          width: ${value ? "100%" : "auto"};
        }
      `;
  });
}};
  ${({ $padding: padding }) => {
  if (!padding)
    return;
  return padding.map(({ breakpoint, value }) => {
    if (breakpoint === 0)
      return `padding: ${typeof value === "number" ? `${value}px` : value};`;
    return `
        @media screen and (min-width: ${breakpoint}px) {
          padding: ${typeof value === "number" ? `${value}px` : value};
        }
      `;
  });
}};
  ${({ $width: width }) => {
  if (!width)
    return;
  return width.map(({ breakpoint, value }) => {
    if (breakpoint === 0)
      return `width: ${typeof value === "number" ? `${value}px` : value};`;
    return `
        @media screen and (min-width: ${breakpoint}px) {
          width: ${typeof value === "number" ? `${value}px` : value};
        }
      `;
  });
}};
  ${({ $height: height }) => {
  if (!height)
    return;
  return height.map(({ breakpoint, value }) => {
    if (breakpoint === 0)
      return `height: ${typeof value === "number" ? `${value}px` : value};`;
    return `
        @media screen and (min-width: ${breakpoint}px) {
          height: ${typeof value === "number" ? `${value}px` : value};
        }
      `;
  });
}};
  ${({ $maxWidth: maxWidth }) => {
  if (!maxWidth)
    return;
  return maxWidth.map(({ breakpoint, value }) => {
    if (breakpoint === 0)
      return `max-width: ${typeof value === "number" ? `${value}px` : value};`;
    return `
        @media screen and (min-width: ${breakpoint}px) {
          max-width: ${typeof value === "number" ? `${value}px` : value};
        }
      `;
  });
}};
  ${({ $maxHeight: maxHeight }) => {
  if (!maxHeight)
    return;
  return maxHeight.map(({ breakpoint, value }) => {
    if (breakpoint === 0)
      return `max-height: ${typeof value === "number" ? `${value}px` : value};`;
    return `
        @media screen and (min-width: ${breakpoint}px) {
          max-height: ${typeof value === "number" ? `${value}px` : value};
        }
      `;
  });
}};
  ${({ $borderRadius: borderRadius }) => {
  if (!borderRadius)
    return;
  return borderRadius.map(({ breakpoint, value }) => {
    if (breakpoint === 0)
      return `border-radius: ${typeof value === "number" ? `${value}px` : value};`;
    return `
        @media screen and (min-width: ${breakpoint}px) {
          border-radius: ${typeof value === "number" ? `${value}px` : value};
        }
      `;
  });
}};
  ${({ $background: background }) => {
  if (!background)
    return;
  return background.map(({ breakpoint, value }) => {
    if (breakpoint === 0)
      return `background: ${value};`;
    return `
        @media screen and (min-width: ${breakpoint}px) {
          background: ${value};
        }
      `;
  });
}};
  ${({ $position: position }) => {
  if (!position)
    return;
  return position.map(({ breakpoint, value }) => {
    if (breakpoint === 0)
      return `position: ${value};`;
    return `
        @media screen and (min-width: ${breakpoint}px) {
          position: ${value};
        }
      `;
  });
}};
  ${({ $flex: flex }) => {
  if (!flex)
    return;
  return flex.map(({ breakpoint, value }) => {
    if (breakpoint === 0)
      return `flex: ${value};`;
    return `
        @media screen and (min-width: ${breakpoint}px) {
          flex: ${value};
        }
      `;
  });
}};
  ${({ $border: border }) => {
  if (!border)
    return;
  return border.map(({ breakpoint, value }) => {
    if (breakpoint === 0)
      return `border: ${value};`;
    return `
        @media screen and (min-width: ${breakpoint}px) {
          border: ${value};
        }
      `;
  });
}};
`;

export {
  FlexBase
};