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

stack flex

var __defProp = Object.defineProperty;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __objRest = (source, exclude) => {
  var target = {};
  for (var prop in source)
    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
      target[prop] = source[prop];
  if (source != null && __getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(source)) {
      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
        target[prop] = source[prop];
    }
  return target;
};

// src/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"
};
var alignItemsMap = {
  start: "flex-start",
  end: "flex-end",
  center: "center",
  baseline: "baseline",
  stretch: "stretch"
};
var FlexBase = styled.div`
  display: flex;
  ${({ $direction: direction }) => {
  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 }) => {
  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 }) => {
  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 }) => {
  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 }) => {
  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 == null ? void 0 : 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 == null ? void 0 : 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 }) => {
  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 {
  __spreadValues,
  __objRest,
  FlexBase
};