css-in-props 3.2.3 → 3.2.8

package/dist/iife/index.js

@@ -0,0 +1,1042 @@
+"use strict";
+var CssInProps = (() => {
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+    get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+  }) : x)(function(x) {
+    if (typeof require !== "undefined") return require.apply(this, arguments);
+    throw Error('Dynamic require of "' + x + '" is not supported');
+  });
+  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/index.js
+  var index_exports = {};
+  __export(index_exports, {
+    ANIMATION_PROPS: () => ANIMATION_PROPS,
+    BLOCK_PROPS: () => BLOCK_PROPS,
+    CSS_PROPS_REGISTRY: () => CSS_PROPS_REGISTRY,
+    DEFAULT_CSS_PROPERTIES_LIST: () => DEFAULT_CSS_PROPERTIES_LIST,
+    FLEX_PROPS: () => FLEX_PROPS,
+    FONT_PROPS: () => FONT_PROPS,
+    GRID_PROPS: () => GRID_PROPS,
+    MISC_PROPS: () => MISC_PROPS,
+    POSITION_PROPS: () => POSITION_PROPS,
+    THEME_PROPS: () => THEME_PROPS,
+    TIMING_PROPS: () => TIMING_PROPS,
+    exetuteClassPerComponent: () => exetuteClassPerComponent,
+    getSystemGlobalTheme: () => getSystemGlobalTheme,
+    transformEmotion: () => transformEmotion,
+    useCssInProps: () => useCssInProps,
+    usePropsAsCSS: () => usePropsAsCSS,
+    useSelectorsAsCSS: () => useSelectorsAsCSS
+  });
+
+  // src/transform/executors.js
+  var import_utils5 = __require("@domql/utils");
+
+  // src/props/animation.js
+  var import_utils = __require("@domql/utils");
+  var import_emotion = __require("@symbo.ls/emotion");
+  var import_scratch = __require("@symbo.ls/scratch");
+  var TIMING_FUNCTIONS = ["ease", "linear", "ease-in", "ease-out", "ease-in-out", "step-start", "step-end"];
+  var FILL_MODES = ["none", "forwards", "backwards", "both"];
+  var DIRECTIONS = ["normal", "reverse", "alternate", "alternate-reverse"];
+  var PLAY_STATES = ["running", "paused"];
+  var isDuration = (v) => /^[\d.]+m?s$/.test(v);
+  var applyAnimationProps = (animation, element) => {
+    const { emotion: ctxEmotion } = element.context;
+    const { keyframes } = ctxEmotion || import_emotion.emotion;
+    if ((0, import_utils.isObject)(animation)) return { animationName: keyframes(animation) };
+    const { ANIMATION } = element.context && element.context.designSystem;
+    const record = ANIMATION[animation];
+    return keyframes(record);
+  };
+  var parseAnimationShorthand = (val, el) => {
+    const { ANIMATION } = el.context && el.context.designSystem || {};
+    const tokens = val.split(/\s+/);
+    let name = null;
+    const durations = [];
+    let timingFunction = null;
+    let iterationCount = null;
+    let direction = null;
+    let fillMode = null;
+    let playState = null;
+    for (const token of tokens) {
+      if (ANIMATION && ANIMATION[token]) {
+        name = token;
+      } else if (isDuration(token)) {
+        durations.push(token);
+      } else if (TIMING_FUNCTIONS.includes(token) || token.startsWith("cubic-bezier") || token.startsWith("steps(")) {
+        timingFunction = token;
+      } else if (token === "infinite" || /^\d+$/.test(token)) {
+        iterationCount = token === "infinite" ? token : Number(token);
+      } else if (DIRECTIONS.includes(token)) {
+        direction = token;
+      } else if (FILL_MODES.includes(token)) {
+        fillMode = token;
+      } else if (PLAY_STATES.includes(token)) {
+        playState = token;
+      } else if (!name) {
+        name = token;
+      }
+    }
+    return { name, durations, timingFunction, iterationCount, direction, fillMode, playState };
+  };
+  var ANIMATION_PROPS = {
+    animation: (val, el) => {
+      if ((0, import_utils.isString)(val) && val.includes(" ")) {
+        const parsed = parseAnimationShorthand(val, el);
+        return {
+          animationName: applyAnimationProps(parsed.name || val, el),
+          animationDuration: parsed.durations[0] || (0, import_scratch.getTimingByKey)(el.props.animationDuration || "A").timing,
+          animationDelay: parsed.durations[1] || (0, import_scratch.getTimingByKey)(el.props.animationDelay || "0s").timing,
+          animationTimingFunction: parsed.timingFunction || (0, import_scratch.getTimingFunction)(el.props.animationTimingFunction || "ease"),
+          animationFillMode: parsed.fillMode || el.props.animationFillMode || "both",
+          animationIterationCount: parsed.iterationCount != null ? parsed.iterationCount : el.props.animationIterationCount || 1,
+          animationPlayState: parsed.playState || el.props.animationPlayState,
+          animationDirection: parsed.direction || el.props.animationDirection
+        };
+      }
+      return {
+        animationName: applyAnimationProps(val, el),
+        animationDuration: (0, import_scratch.getTimingByKey)(el.props.animationDuration || "A").timing,
+        animationDelay: (0, import_scratch.getTimingByKey)(el.props.animationDelay || "0s").timing,
+        animationTimingFunction: (0, import_scratch.getTimingFunction)(el.props.animationTimingFunction || "ease"),
+        animationFillMode: el.props.animationFillMode || "both",
+        animationIterationCount: el.props.animationIterationCount || 1,
+        animationPlayState: el.props.animationPlayState,
+        animationDirection: el.props.animationDirection
+      };
+    },
+    animationName: (val, el) => ({
+      animationName: applyAnimationProps(val, el)
+    }),
+    animationDuration: (val) => ({
+      animationDuration: (0, import_scratch.getTimingByKey)(val).timing
+    }),
+    animationDelay: (val) => ({
+      animationDelay: (0, import_scratch.getTimingByKey)(val).timing
+    }),
+    animationTimingFunction: (val) => ({
+      animationTimingFunction: (0, import_scratch.getTimingFunction)(val)
+    }),
+    animationIterationCount: (val) => ({
+      animationIterationCount: val
+    }),
+    animationFillMode: (val) => ({
+      animationFillMode: val
+    }),
+    animationPlayState: (val) => ({
+      animationPlayState: val
+    }),
+    animationDirection: (val) => ({
+      animationDirection: val
+    })
+  };
+
+  // src/props/block.js
+  var import_utils2 = __require("@domql/utils");
+  var import_scratch2 = __require("@symbo.ls/scratch");
+  var BLOCK_PROPS = {
+    show: (val, el, s, ctx) => !!(ctx.utils.exec(val, el, s) === false) && {
+      display: "none !important"
+    },
+    hide: (val, el, s, ctx) => !!ctx.utils.exec(val, el, s) && {
+      display: "none !important"
+    },
+    height: (val, { props }) => (0, import_scratch2.transformSizeRatio)("height", val, props),
+    width: (val, { props }) => (0, import_scratch2.transformSizeRatio)("width", val, props),
+    boxSizing: (val) => !(0, import_utils2.isUndefined)(val) ? { boxSizing: val } : { boxSizing: "border-box" },
+    boxSize: (val) => {
+      if (!(0, import_utils2.isString)(val)) return;
+      const [height, width] = val.split(" ");
+      return {
+        ...(0, import_scratch2.transformSize)("height", height),
+        ...(0, import_scratch2.transformSize)("width", width || height)
+      };
+    },
+    inlineSize: (val, { props }) => (0, import_scratch2.transformSizeRatio)("inlineSize", val, props),
+    blockSize: (val, { props }) => (0, import_scratch2.transformSizeRatio)("blockSize", val, props),
+    minWidth: (val, { props }) => (0, import_scratch2.transformSizeRatio)("minWidth", val, props),
+    maxWidth: (val, { props }) => (0, import_scratch2.transformSizeRatio)("maxWidth", val, props),
+    widthRange: (val) => {
+      if (!(0, import_utils2.isString)(val)) return;
+      const [minWidth, maxWidth] = val.split(" ");
+      return {
+        ...(0, import_scratch2.transformSize)("minWidth", minWidth),
+        ...(0, import_scratch2.transformSize)("maxWidth", maxWidth || minWidth)
+      };
+    },
+    minHeight: (val, { props }) => (0, import_scratch2.transformSizeRatio)("minHeight", val, props),
+    maxHeight: (val, { props }) => (0, import_scratch2.transformSizeRatio)("maxHeight", val, props),
+    heightRange: (val) => {
+      if (!(0, import_utils2.isString)(val)) return;
+      const [minHeight, maxHeight] = val.split(" ");
+      return {
+        ...(0, import_scratch2.transformSize)("minHeight", minHeight),
+        ...(0, import_scratch2.transformSize)("maxHeight", maxHeight || minHeight)
+      };
+    },
+    size: (val) => {
+      if (!(0, import_utils2.isString)(val)) return;
+      const [inlineSize, blockSize] = val.split(" ");
+      return {
+        ...(0, import_scratch2.transformSizeRatio)("inlineSize", inlineSize),
+        ...(0, import_scratch2.transformSizeRatio)("blockSize", blockSize || inlineSize)
+      };
+    },
+    minBlockSize: (val, { props }) => (0, import_scratch2.transformSizeRatio)("minBlockSize", val, props),
+    minInlineSize: (val, { props }) => (0, import_scratch2.transformSizeRatio)("minInlineSize", val, props),
+    maxBlockSize: (val, { props }) => (0, import_scratch2.transformSizeRatio)("maxBlockSize", val, props),
+    maxInlineSize: (val, { props }) => (0, import_scratch2.transformSizeRatio)("maxInlineSize", val, props),
+    minSize: (val) => {
+      if (!(0, import_utils2.isString)(val)) return;
+      const [minInlineSize, minBlockSize] = val.split(" ");
+      return {
+        ...(0, import_scratch2.transformSize)("minInlineSize", minInlineSize),
+        ...(0, import_scratch2.transformSize)("minBlockSize", minBlockSize || minInlineSize)
+      };
+    },
+    maxSize: (val) => {
+      if (!(0, import_utils2.isString)(val)) return;
+      const [maxInlineSize, maxBlockSize] = val.split(" ");
+      return {
+        ...(0, import_scratch2.transformSize)("maxInlineSize", maxInlineSize),
+        ...(0, import_scratch2.transformSize)("maxBlockSize", maxBlockSize || maxInlineSize)
+      };
+    },
+    borderWidth: (val, { props }) => (0, import_scratch2.transformSizeRatio)("borderWidth", val, props),
+    padding: (val, { props }) => (0, import_scratch2.transformSizeRatio)("padding", val, props),
+    scrollPadding: (val, { props }) => (0, import_scratch2.transformSizeRatio)("scrollPadding", val, props),
+    paddingInline: (val) => {
+      if (!(0, import_utils2.isString)(val)) return;
+      const [paddingInlineStart, paddingInlineEnd] = val.split(" ");
+      return {
+        ...(0, import_scratch2.transformSize)("paddingInlineStart", paddingInlineStart),
+        ...(0, import_scratch2.transformSize)("paddingInlineEnd", paddingInlineEnd || paddingInlineStart)
+      };
+    },
+    paddingBlock: (val) => {
+      if (!(0, import_utils2.isString)(val)) return;
+      const [paddingBlockStart, paddingBlockEnd] = val.split(" ");
+      return {
+        ...(0, import_scratch2.transformSize)("paddingBlockStart", paddingBlockStart),
+        ...(0, import_scratch2.transformSize)("paddingBlockEnd", paddingBlockEnd || paddingBlockStart)
+      };
+    },
+    // Traditional directional padding
+    paddingTop: (val, { props }) => (0, import_scratch2.transformSizeRatio)("paddingBlockStart", val, props),
+    paddingBottom: (val, { props }) => (0, import_scratch2.transformSizeRatio)("paddingBlockEnd", val, props),
+    paddingLeft: (val, { props }) => (0, import_scratch2.transformSizeRatio)("paddingInlineStart", val, props),
+    paddingRight: (val, { props }) => (0, import_scratch2.transformSizeRatio)("paddingInlineEnd", val, props),
+    // Logical properties (for reference)
+    paddingBlockStart: (val, { props }) => (0, import_scratch2.transformSizeRatio)("paddingBlockStart", val, props),
+    // maps to top
+    paddingBlockEnd: (val, { props }) => (0, import_scratch2.transformSizeRatio)("paddingBlockEnd", val, props),
+    // maps to bottom
+    paddingInlineStart: (val, { props }) => (0, import_scratch2.transformSizeRatio)("paddingInlineStart", val, props),
+    // maps to left
+    paddingInlineEnd: (val, { props }) => (0, import_scratch2.transformSizeRatio)("paddingInlineEnd", val, props),
+    // maps to right
+    margin: (val, { props }) => (0, import_scratch2.transformSizeRatio)("margin", val, props),
+    marginInline: (val) => {
+      if (!(0, import_utils2.isString)(val)) return;
+      const [marginInlineStart, marginInlineEnd] = val.split(" ");
+      return {
+        ...(0, import_scratch2.transformSize)("marginInlineStart", marginInlineStart),
+        ...(0, import_scratch2.transformSize)("marginInlineEnd", marginInlineEnd || marginInlineStart)
+      };
+    },
+    marginBlock: (val, { props }) => {
+      if (!(0, import_utils2.isString)(props.marginBlock)) return;
+      const [marginBlockStart, marginBlockEnd] = props.marginBlock.split(" ");
+      return {
+        ...(0, import_scratch2.transformSize)("marginBlockStart", marginBlockStart),
+        ...(0, import_scratch2.transformSize)("marginBlockEnd", marginBlockEnd || marginBlockStart)
+      };
+    },
+    marginInlineStart: (val, { props }) => (0, import_scratch2.transformSizeRatio)("marginInlineStart", val, props),
+    marginInlineEnd: (val, { props }) => (0, import_scratch2.transformSizeRatio)("marginInlineEnd", val, props),
+    marginBlockStart: (val, { props }) => (0, import_scratch2.transformSizeRatio)("marginBlockStart", val, props),
+    marginBlockEnd: (val, { props }) => (0, import_scratch2.transformSizeRatio)("marginBlockEnd", val, props),
+    gap: (val) => ({
+      gap: (0, import_scratch2.transfromGap)(val)
+    }),
+    columnGap: (val, { props }) => (0, import_scratch2.getSpacingBasedOnRatio)(props, "columnGap", val),
+    rowGap: (val, { props }) => (0, import_scratch2.getSpacingBasedOnRatio)(props, "rowGap", val),
+    flexWrap: (val, { props }) => ({
+      display: "flex",
+      flexFlow: (val || "row").split(" ")[0] + " " + props.flexWrap
+    }),
+    flexFlow: (val, { props }) => {
+      const { reverse } = props;
+      if (!(0, import_utils2.isString)(val)) return;
+      let [direction, wrap] = (val || "row").split(" ");
+      if (val.startsWith("x") || val === "row") direction = "row";
+      if (val.startsWith("y") || val === "column") direction = "column";
+      return {
+        display: "flex",
+        flexFlow: (direction || "") + (!direction.includes("-reverse") && reverse ? "-reverse" : "") + " " + (wrap || "")
+      };
+    },
+    flexAlign: (val) => {
+      if (!(0, import_utils2.isString)(val)) return;
+      const [alignItems, justifyContent] = val.split(" ");
+      return {
+        display: "flex",
+        alignItems,
+        justifyContent
+      };
+    },
+    round: (val, { props }) => (0, import_scratch2.transformBorderRadius)(val || props.borderRadius, props, "round"),
+    borderRadius: (val, { props }) => (0, import_scratch2.transformBorderRadius)(val || props.round, props, "borderRadius")
+  };
+
+  // src/props/font.js
+  var import_scratch3 = __require("@symbo.ls/scratch");
+  var FONT_PROPS = {
+    fontSize: (value) => {
+      return (0, import_scratch3.getFontSizeByKey)(value) || value;
+    },
+    fontFamily: (value) => ({
+      fontFamily: (0, import_scratch3.getFontFamily)(value) || value
+    }),
+    fontWeight: (value) => ({
+      fontWeight: value,
+      fontVariationSettings: '"wght" ' + value
+    })
+  };
+
+  // src/props/misc.js
+  var MISC_PROPS = {
+    overflow: (value) => ({
+      overflow: value,
+      scrollBehavior: "smooth"
+    }),
+    cursor: (value, el, s, ctx) => {
+      if (!value) return;
+      const file = ctx.files && ctx.files[value];
+      if (file && file.content) value = `url(${file.content.src})`;
+      return { cursor: value };
+    }
+  };
+
+  // src/props/position.js
+  var import_scratch4 = __require("@symbo.ls/scratch");
+  var POSITION_PROPS = {
+    inset: (val, el) => {
+      if (el.call("isNumber", val)) return { inset: val };
+      if (!el.call("isString", val)) return;
+      return { inset: val.split(" ").map((v) => (0, import_scratch4.getSpacingByKey)(v, "k").k).join(" ") };
+    },
+    left: (val) => (0, import_scratch4.getSpacingByKey)(val, "left"),
+    top: (val) => (0, import_scratch4.getSpacingByKey)(val, "top"),
+    right: (val) => (0, import_scratch4.getSpacingByKey)(val, "right"),
+    bottom: (val) => (0, import_scratch4.getSpacingByKey)(val, "bottom"),
+    verticalInset: (val) => {
+      if (typeof val !== "string") return;
+      const vi = val.split(" ").map((v) => (0, import_scratch4.getSpacingByKey)(v, "k").k);
+      return {
+        top: vi[0],
+        bottom: vi[1] || vi[0]
+      };
+    },
+    horizontalInset: (val) => {
+      if (typeof val !== "string") return;
+      const vi = val.split(" ").map((v) => (0, import_scratch4.getSpacingByKey)(v, "k").k);
+      return {
+        left: vi[0],
+        right: vi[1] || vi[0]
+      };
+    }
+  };
+
+  // src/props/theme.js
+  var import_scratch5 = __require("@symbo.ls/scratch");
+  var import_utils3 = __require("@domql/utils");
+  var getSystemGlobalTheme = ({ context, state }) => {
+    const theme = state?.root?.globalTheme || context.designSystem?.globalTheme;
+    return theme === "auto" ? null : theme;
+  };
+  var THEME_PROPS = {
+    theme: (val, element) => {
+      const { props } = element;
+      const globalTheme = getSystemGlobalTheme(element);
+      if (!val) return;
+      const hasSubtheme = val.includes(" ") && !val.includes("@");
+      const globalThemeForced = `@${props.themeModifier || globalTheme}`;
+      if (hasSubtheme) {
+        const themeAppliedInVal = val.split(" ");
+        themeAppliedInVal.splice(1, 0, globalThemeForced);
+        return (0, import_scratch5.getMediaTheme)(themeAppliedInVal);
+      } else if (val.includes("@{globalTheme}")) val.replace("@{globalTheme}", globalThemeForced);
+      return (0, import_scratch5.getMediaTheme)(val, `@${props.themeModifier || globalTheme}`);
+    },
+    color: (val, element) => {
+      const globalTheme = getSystemGlobalTheme(element);
+      if (!val) return;
+      return {
+        color: (0, import_scratch5.getMediaColor)(val, globalTheme)
+      };
+    },
+    background: (val, element) => {
+      const globalTheme = getSystemGlobalTheme(element);
+      if (!val) return;
+      if ((0, import_utils3.isString)(val) && val.includes("gradient")) {
+        return { background: (0, import_scratch5.resolveColorsInGradient)(val, globalTheme) };
+      }
+      return {
+        background: (0, import_scratch5.getMediaColor)(val, globalTheme)
+      };
+    },
+    backgroundColor: (val, element) => {
+      const globalTheme = getSystemGlobalTheme(element);
+      if (!val) return;
+      return {
+        backgroundColor: (0, import_scratch5.getMediaColor)(val, globalTheme)
+      };
+    },
+    backgroundImage: (val, element, s, ctx) => {
+      const globalTheme = getSystemGlobalTheme(element);
+      if (!val) return;
+      const file = ctx.files && ctx.files[val];
+      if (file && file.content) val = file.content.src;
+      return {
+        backgroundImage: (0, import_scratch5.transformBackgroundImage)(val, globalTheme)
+      };
+    },
+    textStroke: (val) => ({
+      WebkitTextStroke: (0, import_scratch5.transformTextStroke)(val)
+    }),
+    outline: (val) => ({
+      outline: (0, import_scratch5.transformBorder)(val)
+    }),
+    outlineOffset: (val, { props }) => (0, import_scratch5.transformSizeRatio)("outlineOffset", val, props),
+    border: (val) => ({
+      border: (0, import_scratch5.transformBorder)(val)
+    }),
+    borderColor: (val, element) => {
+      const globalTheme = getSystemGlobalTheme(element);
+      if (!val) return;
+      return {
+        borderColor: (0, import_scratch5.getMediaColor)(val, globalTheme)
+      };
+    },
+    borderTopColor: (val, element) => {
+      const globalTheme = getSystemGlobalTheme(element);
+      if (!val) return;
+      return { borderTopColor: (0, import_scratch5.getMediaColor)(val, globalTheme) };
+    },
+    borderBottomColor: (val, element) => {
+      const globalTheme = getSystemGlobalTheme(element);
+      if (!val) return;
+      return { borderBottomColor: (0, import_scratch5.getMediaColor)(val, globalTheme) };
+    },
+    borderLeftColor: (val, element) => {
+      const globalTheme = getSystemGlobalTheme(element);
+      if (!val) return;
+      return { borderLeftColor: (0, import_scratch5.getMediaColor)(val, globalTheme) };
+    },
+    borderRightColor: (val, element) => {
+      const globalTheme = getSystemGlobalTheme(element);
+      if (!val) return;
+      return { borderRightColor: (0, import_scratch5.getMediaColor)(val, globalTheme) };
+    },
+    borderLeft: (val) => ({
+      borderLeft: (0, import_scratch5.transformBorder)(val)
+    }),
+    borderTop: (val) => ({
+      borderTop: (0, import_scratch5.transformBorder)(val)
+    }),
+    borderRight: (val) => ({
+      borderRight: (0, import_scratch5.transformBorder)(val)
+    }),
+    borderBottom: (val) => ({
+      borderBottom: (0, import_scratch5.transformBorder)(val)
+    }),
+    shadow: (val, element) => {
+      const globalTheme = getSystemGlobalTheme(element);
+      if (!val) return;
+      return {
+        boxShadow: (0, import_scratch5.transformShadow)(val, globalTheme)
+      };
+    },
+    boxShadow: (val, element) => {
+      if (!(0, import_utils3.isString)(val)) return;
+      const [value, hasImportant] = val.split("!importan");
+      const globalTheme = getSystemGlobalTheme(element);
+      const important = hasImportant ? " !important" : "";
+      return {
+        boxShadow: (0, import_scratch5.transformBoxShadow)(value.trim(), globalTheme) + important
+      };
+    },
+    textShadow: (val, { context }) => ({
+      textShadow: (0, import_scratch5.transformBoxShadow)(val, context.designSystem.globalTheme)
+    }),
+    columnRule: (val) => ({
+      columnRule: (0, import_scratch5.transformBorder)(val)
+    })
+  };
+
+  // src/props/timing.js
+  var import_scratch6 = __require("@symbo.ls/scratch");
+  var TIMING_PROPS = {
+    transition: (val) => ({
+      transition: (0, import_scratch6.splitTransition)(val)
+    }),
+    transitionDuration: (val) => ({
+      transitionDuration: (0, import_scratch6.transformDuration)(val)
+    }),
+    transitionDelay: (val) => ({
+      transitionDelay: (0, import_scratch6.transformDuration)(val)
+    }),
+    transitionTimingFunction: (val) => ({
+      transitionTimingFunction: (0, import_scratch6.getTimingFunction)(val)
+    }),
+    transitionProperty: (val) => ({
+      transitionProperty: val,
+      willChange: val
+    })
+  };
+
+  // src/props/flex.js
+  var import_utils4 = __require("@domql/utils");
+  var FLEX_PROPS = {
+    flow: (value, el) => {
+      const { props } = el;
+      const { reverse } = props;
+      if (!(0, import_utils4.isString)(value)) return;
+      let [direction, wrap] = (value || "row").split(" ");
+      if (value.startsWith("x") || value === "row") direction = "row";
+      if (value.startsWith("y") || value === "column") direction = "column";
+      return {
+        display: "flex",
+        flexFlow: (direction || "") + (!direction.includes("-reverse") && reverse ? "-reverse" : "") + " " + (wrap || "")
+      };
+    },
+    wrap: (value, { props }) => {
+      return { display: "flex", flexWrap: value };
+    },
+    align: (value, { props }) => {
+      const [alignItems, justifyContent] = value.split(" ");
+      return { display: "flex", alignItems, justifyContent };
+    }
+  };
+
+  // src/props/grid.js
+  var GRID_PROPS = {
+    area: (value) => ({ gridArea: value }),
+    template: (value) => ({ gridTemplate: value }),
+    templateAreas: (value) => ({ gridTemplateAreas: value }),
+    column: (value) => ({ gridColumn: value }),
+    columns: (value) => ({ gridTemplateColumns: value }),
+    templateColumns: (value) => ({ gridTemplateColumns: value }),
+    autoColumns: (value) => ({ gridAutoColumns: value }),
+    columnStart: (value) => ({ gridColumnStart: value }),
+    row: (value) => ({ gridRow: value }),
+    rows: (value) => ({ gridTemplateRows: value }),
+    templateRows: (value) => ({ gridTemplateRows: value }),
+    autoRows: (value) => ({ gridAutoRows: value }),
+    rowStart: (value) => ({ gridRowStart: value }),
+    autoFlow: (value) => ({ gridAutoFlow: value })
+  };
+
+  // src/props/index.js
+  var CSS_PROPS_REGISTRY = {
+    ...ANIMATION_PROPS,
+    ...BLOCK_PROPS,
+    ...FONT_PROPS,
+    ...MISC_PROPS,
+    ...MISC_PROPS,
+    ...POSITION_PROPS,
+    ...THEME_PROPS,
+    ...TIMING_PROPS,
+    ...FLEX_PROPS,
+    ...GRID_PROPS
+  };
+
+  // src/props/defaults.js
+  var DEFAULT_CSS_PROPERTIES_LIST = /* @__PURE__ */ new Set([
+    "accentColor",
+    "alignContent",
+    "alignItems",
+    "alignSelf",
+    "alignmentBaseline",
+    "all",
+    "animation",
+    "animationDelay",
+    "animationDirection",
+    "animationDuration",
+    "animationFillMode",
+    "animationIterationCount",
+    "animationName",
+    "animationPlayState",
+    "animationTimingFunction",
+    "appearance",
+    "aspectRatio",
+    "backdropFilter",
+    "backfaceVisibility",
+    "background",
+    "backgroundAttachment",
+    "backgroundBlendMode",
+    "backgroundClip",
+    "backgroundColor",
+    "backgroundImage",
+    "backgroundOrigin",
+    "backgroundPosition",
+    "backgroundPositionX",
+    "backgroundPositionY",
+    "backgroundRepeat",
+    "backgroundRepeatX",
+    "backgroundRepeatY",
+    "backgroundSize",
+    "baselineShift",
+    "blockSize",
+    "border",
+    "borderBlock",
+    "borderBlockColor",
+    "borderBlockEnd",
+    "borderBlockEndColor",
+    "borderBlockEndStyle",
+    "borderBlockEndWidth",
+    "borderBlockStart",
+    "borderBlockStartColor",
+    "borderBlockStartStyle",
+    "borderBlockStartWidth",
+    "borderBlockStyle",
+    "borderBlockWidth",
+    "borderBottom",
+    "borderBottomColor",
+    "borderBottomLeftRadius",
+    "borderBottomRightRadius",
+    "borderBottomStyle",
+    "borderBottomWidth",
+    "borderCollapse",
+    "borderColor",
+    "borderImage",
+    "borderImageOutset",
+    "borderImageRepeat",
+    "borderImageSlice",
+    "borderImageSource",
+    "borderImageWidth",
+    "borderLeft",
+    "borderLeftColor",
+    "borderLeftStyle",
+    "borderLeftWidth",
+    "borderRadius",
+    "borderRight",
+    "borderRightColor",
+    "borderRightStyle",
+    "borderRightWidth",
+    "borderSpacing",
+    "borderStyle",
+    "borderTop",
+    "borderTopColor",
+    "borderTopLeftRadius",
+    "borderTopRightRadius",
+    "borderTopStyle",
+    "borderTopWidth",
+    "borderWidth",
+    "bottom",
+    "boxDecorationBreak",
+    "boxShadow",
+    "boxSizing",
+    "breakAfter",
+    "breakBefore",
+    "breakInside",
+    "captionSide",
+    "caretColor",
+    "clear",
+    "clip",
+    "clipPath",
+    "color",
+    "colorAdjust",
+    "colorInterpolation",
+    "colorInterpolationFilters",
+    "colorRendering",
+    "columnCount",
+    "columnFill",
+    "columnGap",
+    "columnRule",
+    "columnRuleColor",
+    "columnRuleStyle",
+    "columnRuleWidth",
+    "columnSpan",
+    "columnWidth",
+    "columns",
+    "contain",
+    "content",
+    "counterIncrement",
+    "counterReset",
+    "cursor",
+    "direction",
+    "display",
+    "emptyCells",
+    "filter",
+    "flex",
+    "flexBasis",
+    "flexDirection",
+    "flexFlow",
+    "flexGrow",
+    "flexShrink",
+    "flexWrap",
+    "float",
+    "font",
+    "fontFamily",
+    "fontFeatureSettings",
+    "fontKerning",
+    "fontLanguageOverride",
+    "fontSize",
+    "fontSizeAdjust",
+    "fontStretch",
+    "fontStyle",
+    "fontVariant",
+    "fontVariantAlternates",
+    "fontVariantCaps",
+    "fontVariantEastAsian",
+    "fontVariantNumeric",
+    "fontVariantPosition",
+    "fontWeight",
+    "fontVariationSettings",
+    "fontSynthesis",
+    "forcedColorAdjust",
+    "gap",
+    "grid",
+    "gridArea",
+    "gridAutoColumns",
+    "gridAutoFlow",
+    "gridAutoRows",
+    "gridColumn",
+    "gridColumnEnd",
+    "gridColumnGap",
+    "gridColumnStart",
+    "gridGap",
+    "gridRow",
+    "gridRowEnd",
+    "gridRowGap",
+    "gridRowStart",
+    "gridTemplate",
+    "gridTemplateAreas",
+    "gridTemplateColumns",
+    "gridTemplateRows",
+    "height",
+    "hyphens",
+    "imageOrientation",
+    "imageRendering",
+    "imeMode",
+    "inset",
+    "insetBlock",
+    "insetBlockEnd",
+    "insetBlockStart",
+    "insetInline",
+    "insetInlineEnd",
+    "insetInlineStart",
+    "initialLetter",
+    "isolation",
+    "justifyContent",
+    "justifyItems",
+    "justifySelf",
+    "left",
+    "letterSpacing",
+    "lineBreak",
+    "lineClamp",
+    "lineHeight",
+    "listStyle",
+    "listStyleImage",
+    "listStylePosition",
+    "listStyleType",
+    "margin",
+    "marginBottom",
+    "marginLeft",
+    "marginRight",
+    "marginTop",
+    "marginBlock",
+    "marginBlockEnd",
+    "marginBlockStart",
+    "marginInline",
+    "marginInlineEnd",
+    "marginInlineStart",
+    "mask",
+    "maskBorder",
+    "maskBorderImage",
+    "maskBorderOutset",
+    "maskBorderRepeat",
+    "maskBorderSlice",
+    "maskBorderSource",
+    "maskBorderWidth",
+    "maskClip",
+    "maskComposite",
+    "maskImage",
+    "maskOrigin",
+    "maskPosition",
+    "maskRepeat",
+    "maskSize",
+    "maskType",
+    "maxBlockSize",
+    "maxHeight",
+    "maxInlineSize",
+    "maxWidth",
+    "minBlockSize",
+    "minHeight",
+    "minInlineSize",
+    "minWidth",
+    "mixBlendMode",
+    "objectFit",
+    "objectPosition",
+    "objectViewBox",
+    "offset",
+    "offsetDistance",
+    "offsetPath",
+    "offsetRotate",
+    "opacity",
+    "order",
+    "orientation",
+    "outline",
+    "outlineColor",
+    "outlineOffset",
+    "outlineStyle",
+    "outlineWidth",
+    "overflow",
+    "overflowAnchor",
+    "overflowClip",
+    "overflowScrolling",
+    "overflowWrap",
+    "overflowX",
+    "overflowY",
+    "padding",
+    "paddingBottom",
+    "paddingLeft",
+    "paddingRight",
+    "paddingTop",
+    "pageBreakAfter",
+    "pageBreakBefore",
+    "pageBreakInside",
+    "paintOrder",
+    "perspective",
+    "perspectiveOrigin",
+    "placeContent",
+    "placeItems",
+    "placeSelf",
+    "pointerEvents",
+    "position",
+    "resize",
+    "right",
+    "rotate",
+    "rowGap",
+    "scrollBehavior",
+    "scrollPadding",
+    "scrollSnapAlign",
+    "scrollSnapType",
+    "scrollbarColor",
+    "scrollbarWidth",
+    "shapeImageThreshold",
+    "shapeMargin",
+    "shapeOutside",
+    "tabSize",
+    "tableLayout",
+    "textAlign",
+    "textAlignLast",
+    "textDecoration",
+    "textDecorationColor",
+    "textDecorationLine",
+    "textDecorationSkipInk",
+    "textDecorationStyle",
+    "textDecorationThickness",
+    "textIndent",
+    "textOverflow",
+    "textShadow",
+    "textTransform",
+    "textUnderlineOffset",
+    "top",
+    "transform",
+    "transformOrigin",
+    "transformStyle",
+    "transition",
+    "transitionDelay",
+    "transitionDuration",
+    "transitionProperty",
+    "transitionTimingFunction",
+    "translate",
+    "translateX",
+    "translateY",
+    "translateZ",
+    "unicodeBidi",
+    "userSelect",
+    "verticalAlign",
+    "visibility",
+    "whiteSpace",
+    "widows",
+    "width",
+    "willChange",
+    "wordBreak",
+    "wordSpacing",
+    "wordWrap",
+    "writingMode",
+    "zIndex"
+  ]);
+
+  // src/transform/transformers.js
+  var applyMediaProps = (key, selectorProps, element) => {
+    const { context } = element;
+    if (!context.designSystem?.MEDIA) return;
+    const mediaValue = context.designSystem.MEDIA[key.slice(1)];
+    const generatedClass = useCssInProps(selectorProps, element);
+    const mediaKey = mediaValue ? "@media " + (mediaValue === "print" ? mediaValue : `screen and ${mediaValue}`) : key;
+    return { [mediaKey]: generatedClass };
+  };
+  var applyAndProps = (key, selectorProps, element) => {
+    return { [key]: useCssInProps(selectorProps, element) };
+  };
+  var applySelectorProps = (key, selectorProps, element) => {
+    const selectorKey = `&${key}`;
+    return { [selectorKey]: useCssInProps(selectorProps, element) };
+  };
+  var applyCaseProps = (key, selectorProps, element) => {
+    const { CASES } = element.context?.designSystem || {};
+    const caseKey = key.slice(1);
+    const isCaseTrue = !CASES?.[caseKey] && !element.props[caseKey];
+    if (!isCaseTrue) return;
+    return useCssInProps(selectorProps, element);
+  };
+  var applyVariableProps = (key, selectorVal, element) => {
+    return { [key]: selectorVal };
+  };
+  var applyConditionalCaseProps = (key, selectorProps, element) => {
+    const caseKey = key.slice(1);
+    const isCaseTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey];
+    if (!isCaseTrue) return;
+    return useCssInProps(selectorProps, element);
+  };
+  var applyConditionalFalsyProps = (key, selectorProps, element) => {
+    const caseKey = key.slice(1);
+    const isCaseTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey];
+    if (isCaseTrue) return;
+    return useCssInProps(selectorProps, element);
+  };
+  var applyTrueProps = (selectorProps, element) => {
+    return useCssInProps(selectorProps, element);
+  };
+  var transformersByPrefix = {
+    "@": applyMediaProps,
+    // Selector handlers
+    ":": applySelectorProps,
+    "[": applySelectorProps,
+    "*": applySelectorProps,
+    "+": applySelectorProps,
+    "~": applySelectorProps,
+    "&": applyAndProps,
+    ">": applyAndProps,
+    // Conditional and variable handlers
+    $: applyCaseProps,
+    "-": applyVariableProps,
+    ".": applyConditionalCaseProps,
+    "!": applyConditionalFalsyProps
+  };
+
+  // src/transform/executors.js
+  var isProd = (0, import_utils5.isProduction)();
+  var usePropsAsCSS = (sourceObj, element, opts) => {
+    let obj = {};
+    const rest = {};
+    const setToObj = (key, val) => {
+      if (opts.unpack) {
+        obj = { ...obj, ...val };
+        return;
+      }
+      obj[key] = val;
+    };
+    for (const key in sourceObj) {
+      const value = sourceObj[key];
+      if (key === "class" && element.call("isString", sourceObj.class)) {
+        const val = value.split(" ");
+        if (val.length) {
+          const CLASS = element.context.designSystem.CLASS;
+          const result = val.reduce((acc, curr) => (0, import_utils5.merge)(acc, CLASS[curr]), {});
+          obj.designSystemClass = result;
+        }
+      } else if (key === "true") {
+        const val = (0, import_utils5.exec)(value, element);
+        (0, import_utils5.merge)(obj, applyTrueProps(val, element));
+      } else if (element.classlist[key]) {
+        const originalFromClass = element.classlist[key];
+        const result = (0, import_utils5.isFunction)(originalFromClass) ? originalFromClass(element, element.state, element.context) : originalFromClass;
+        if (result) setToObj(key, result);
+        if (!isProd && (0, import_utils5.isObject)(obj[key])) obj[key].label = key;
+      } else if (CSS_PROPS_REGISTRY[key]) {
+        let val = (0, import_utils5.exec)(value, element);
+        if ((0, import_utils5.isArray)(val)) {
+          val = val.reduce((a, c) => (0, import_utils5.merge)(a, c), {});
+        }
+        let result = CSS_PROPS_REGISTRY[key](val, element, element.state, element.context);
+        if ((0, import_utils5.isArray)(result)) result = result.reduce((a, c) => (0, import_utils5.merge)(a, c), {});
+        if (result) setToObj(key, result);
+        if (!isProd && (0, import_utils5.isObject)(obj[key])) obj[key].label = key;
+      } else if (DEFAULT_CSS_PROPERTIES_LIST.has(key)) {
+        const result = (0, import_utils5.exec)(value, element);
+        setToObj(key, { [key]: result });
+        if (!isProd && (0, import_utils5.isObject)(obj[key])) obj[key].label = key;
+      } else {
+        rest[key] = value;
+      }
+    }
+    return [obj, rest];
+  };
+  var useSelectorsAsCSS = (sourceObj, element) => {
+    const obj = {};
+    for (const key in sourceObj) {
+      const selectroSetter = transformersByPrefix[key.slice(0, 1)];
+      if (selectroSetter) {
+        const result = selectroSetter(key, sourceObj[key], element);
+        if (result) (0, import_utils5.overwriteDeep)(obj, result);
+      }
+    }
+    return obj;
+  };
+  var useCssInProps = (selectorProps, element, opts = { unpack: true }) => {
+    const [cssObj, restProps] = usePropsAsCSS(selectorProps, element, opts);
+    const selectorsObj = useSelectorsAsCSS(restProps, element);
+    let hasSelectors = false;
+    for (const _k in selectorsObj) {
+      hasSelectors = true;
+      break;
+    }
+    if (hasSelectors) {
+      if (opts.unpack) return (0, import_utils5.overwrite)(cssObj, selectorsObj);
+      cssObj._selectors = selectorsObj;
+    }
+    return cssObj;
+  };
+  var exetuteClassPerComponent = (component, element) => {
+    const classObj = {};
+    if (component.class) {
+      for (const classProp in component.class) {
+        classObj[classProp] = component.class[classProp](element);
+      }
+    }
+    return classObj;
+  };
+
+  // src/emotion.js
+  var import_utils6 = __require("@domql/utils");
+  var import_emotion2 = __require("@symbo.ls/emotion");
+  var { css } = import_emotion2.emotion;
+  var transformEmotion = (props, callback) => {
+    return (0, import_utils6.isFunction)(callback) ? callback(props) : css(props);
+  };
+  return __toCommonJS(index_exports);
+})();