@teamsparta/stack-flex/dist/v2/FlexV2.style.js

stack flex

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/v2/FlexV2.style.ts
var FlexV2_style_exports = {};
__export(FlexV2_style_exports, {
  containerCss: () => containerCss,
  flexAlignItemsCss: () => flexAlignItemsCss,
  flexBackgroundCss: () => flexBackgroundCss,
  flexBorderCss: () => flexBorderCss,
  flexBorderRadiusCss: () => flexBorderRadiusCss,
  flexDirectionCss: () => flexDirectionCss,
  flexFlexCss: () => flexFlexCss,
  flexFullHeightCss: () => flexFullHeightCss,
  flexFullWidthCss: () => flexFullWidthCss,
  flexGapCss: () => flexGapCss,
  flexHeightCss: () => flexHeightCss,
  flexJustifyContentCss: () => flexJustifyContentCss,
  flexMaxHeightCss: () => flexMaxHeightCss,
  flexMaxWidthCss: () => flexMaxWidthCss,
  flexPaddingCss: () => flexPaddingCss,
  flexPositionCss: () => flexPositionCss,
  flexWidthCss: () => flexWidthCss,
  flexWrapCss: () => flexWrapCss
});
module.exports = __toCommonJS(FlexV2_style_exports);
var import_react2 = require("@emotion/react");

// src/v2/utils.ts
var import_react = require("@emotion/react");
var import_stack_utils = require("@teamsparta/stack-utils");
var createResponsiveCssFunction = (cssProperty, transformer) => {
  return (values) => {
    if (!values || values.length === 0)
      return [];
    return values.map(({ breakpoint, value }) => {
      if (value === void 0)
        return (0, import_react.css)();
      const transformedValue = transformer ? transformer(value) : value;
      if (transformedValue === void 0)
        return (0, import_react.css)();
      return (0, import_react.css)({
        [`@media screen and (min-width: ${breakpoint}px)`]: {
          [cssProperty]: transformedValue
        }
      });
    });
  };
};
var booleanToCssValue = (value, trueValue, falseValue) => value ? trueValue : falseValue;
var pixelValueTransformer = (value) => typeof value === "string" || typeof value === "number" ? (0, import_stack_utils.coerceCssPixelValue)(value) : void 0;
var stringValueTransformer = (value) => value;
var booleanToPixelTransformer = (trueValue, falseValue) => (value) => typeof value === "boolean" ? booleanToCssValue(value, trueValue, falseValue) : void 0;

// src/v2/FlexV2.style.ts
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 containerCss = (0, import_react2.css)({
  display: "flex"
});
var flexDirectionCss = createResponsiveCssFunction(
  "flexDirection",
  stringValueTransformer
);
var flexWrapCss = createResponsiveCssFunction(
  "flexWrap",
  stringValueTransformer
);
var flexJustifyContentCss = createResponsiveCssFunction(
  "justifyContent",
  (value) => value ? justifyContentMap[value] : void 0
);
var flexAlignItemsCss = createResponsiveCssFunction(
  "alignItems",
  (value) => value ? alignItemsMap[value] : void 0
);
var flexGapCss = createResponsiveCssFunction(
  "gap",
  pixelValueTransformer
);
var flexFullWidthCss = createResponsiveCssFunction(
  "width",
  booleanToPixelTransformer("100%", "auto")
);
var flexFullHeightCss = createResponsiveCssFunction(
  "height",
  booleanToPixelTransformer("100%", "auto")
);
var flexPaddingCss = createResponsiveCssFunction(
  "padding",
  pixelValueTransformer
);
var flexWidthCss = createResponsiveCssFunction(
  "width",
  pixelValueTransformer
);
var flexHeightCss = createResponsiveCssFunction(
  "height",
  pixelValueTransformer
);
var flexMaxWidthCss = createResponsiveCssFunction(
  "maxWidth",
  pixelValueTransformer
);
var flexMaxHeightCss = createResponsiveCssFunction(
  "maxHeight",
  pixelValueTransformer
);
var flexBorderRadiusCss = createResponsiveCssFunction(
  "borderRadius",
  pixelValueTransformer
);
var flexBackgroundCss = createResponsiveCssFunction(
  "background",
  stringValueTransformer
);
var flexPositionCss = createResponsiveCssFunction(
  "position",
  stringValueTransformer
);
var flexFlexCss = createResponsiveCssFunction(
  "flex",
  (value) => typeof value === "string" || typeof value === "number" ? String(value) : void 0
);
var flexBorderCss = createResponsiveCssFunction(
  "border",
  stringValueTransformer
);
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  containerCss,
  flexAlignItemsCss,
  flexBackgroundCss,
  flexBorderCss,
  flexBorderRadiusCss,
  flexDirectionCss,
  flexFlexCss,
  flexFullHeightCss,
  flexFullWidthCss,
  flexGapCss,
  flexHeightCss,
  flexJustifyContentCss,
  flexMaxHeightCss,
  flexMaxWidthCss,
  flexPaddingCss,
  flexPositionCss,
  flexWidthCss,
  flexWrapCss
});