css-in-props 3.14.0 → 3.14.3

package/dist/iife/index.js

@@ -1,1147 +0,0 @@
-"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,
-    applyTrueProps: () => applyTrueProps,
-    exetuteClassPerComponent: () => exetuteClassPerComponent,
-    getSystemGlobalTheme: () => getSystemGlobalTheme,
-    setClassname: () => setClassname,
-    transformClassname: () => transformClassname,
-    transformersByPrefix: () => transformersByPrefix,
-    useCssInProps: () => useCssInProps,
-    usePropsAsCSS: () => usePropsAsCSS,
-    useSelectorsAsCSS: () => useSelectorsAsCSS
-  });
-
-  // src/transform/executors.js
-  var import_utils6 = __require("@symbo.ls/utils");
-  var import_scratch7 = __require("@symbo.ls/scratch");
-
-  // src/props/animation.js
-  var import_utils = __require("@symbo.ls/utils");
-  var import_css = __require("@symbo.ls/css");
-  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 _animCounter = 0;
-  var applyAnimationProps = (animation, element) => {
-    const { animation: ANIMATION } = element.context && element.context.designSystem || {};
-    if ((0, import_utils.isObject)(animation)) {
-      const name = `smbls-anim-${_animCounter++}`;
-      return { animationName: (0, import_css.keyframes)(name, animation) };
-    }
-    const record = ANIMATION && ANIMATION[animation];
-    if ((0, import_utils.isObject)(record)) {
-      return (0, import_css.keyframes)(animation, record);
-    }
-    return animation;
-  };
-  var parseAnimationShorthand = (val, el) => {
-    const { animation: 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.animationDuration || "A").timing,
-          animationDelay: parsed.durations[1] || (0, import_scratch.getTimingByKey)(el.animationDelay || "0s").timing,
-          animationTimingFunction: parsed.timingFunction || (0, import_scratch.getTimingFunction)(el.animationTimingFunction || "ease"),
-          animationFillMode: parsed.fillMode || el.animationFillMode || "both",
-          animationIterationCount: parsed.iterationCount != null ? parsed.iterationCount : el.animationIterationCount || 1,
-          animationPlayState: parsed.playState || el.animationPlayState,
-          animationDirection: parsed.direction || el.animationDirection
-        };
-      }
-      return {
-        animationName: applyAnimationProps(val, el),
-        animationDuration: (0, import_scratch.getTimingByKey)(el.animationDuration || "A").timing,
-        animationDelay: (0, import_scratch.getTimingByKey)(el.animationDelay || "0s").timing,
-        animationTimingFunction: (0, import_scratch.getTimingFunction)(el.animationTimingFunction || "ease"),
-        animationFillMode: el.animationFillMode || "both",
-        animationIterationCount: el.animationIterationCount || 1,
-        animationPlayState: el.animationPlayState,
-        animationDirection: el.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("@symbo.ls/utils");
-  var import_scratch2 = __require("@symbo.ls/scratch");
-  var BLOCK_PROPS = {
-    show: (val) => !val ? { display: "none !important" } : void 0,
-    hide: (val) => val ? { display: "none !important" } : void 0,
-    height: (val, el) => (0, import_scratch2.transformSizeRatio)("height", val, el),
-    width: (val, el) => (0, import_scratch2.transformSizeRatio)("width", val, el),
-    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, el) => (0, import_scratch2.transformSizeRatio)("inlineSize", val, el),
-    blockSize: (val, el) => (0, import_scratch2.transformSizeRatio)("blockSize", val, el),
-    minWidth: (val, el) => (0, import_scratch2.transformSizeRatio)("minWidth", val, el),
-    maxWidth: (val, el) => (0, import_scratch2.transformSizeRatio)("maxWidth", val, el),
-    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, el) => (0, import_scratch2.transformSizeRatio)("minHeight", val, el),
-    maxHeight: (val, el) => (0, import_scratch2.transformSizeRatio)("maxHeight", val, el),
-    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, el) => (0, import_scratch2.transformSizeRatio)("minBlockSize", val, el),
-    minInlineSize: (val, el) => (0, import_scratch2.transformSizeRatio)("minInlineSize", val, el),
-    maxBlockSize: (val, el) => (0, import_scratch2.transformSizeRatio)("maxBlockSize", val, el),
-    maxInlineSize: (val, el) => (0, import_scratch2.transformSizeRatio)("maxInlineSize", val, el),
-    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, el) => (0, import_scratch2.transformSizeRatio)("borderWidth", val, el),
-    padding: (val, el) => (0, import_scratch2.transformSizeRatio)("padding", val, el),
-    scrollPadding: (val, el) => (0, import_scratch2.transformSizeRatio)("scrollPadding", val, el),
-    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)
-      };
-    },
-    paddingTop: (val, el) => (0, import_scratch2.transformSizeRatio)("paddingBlockStart", val, el),
-    paddingBottom: (val, el) => (0, import_scratch2.transformSizeRatio)("paddingBlockEnd", val, el),
-    paddingLeft: (val, el) => (0, import_scratch2.transformSizeRatio)("paddingInlineStart", val, el),
-    paddingRight: (val, el) => (0, import_scratch2.transformSizeRatio)("paddingInlineEnd", val, el),
-    paddingBlockStart: (val, el) => (0, import_scratch2.transformSizeRatio)("paddingBlockStart", val, el),
-    paddingBlockEnd: (val, el) => (0, import_scratch2.transformSizeRatio)("paddingBlockEnd", val, el),
-    paddingInlineStart: (val, el) => (0, import_scratch2.transformSizeRatio)("paddingInlineStart", val, el),
-    paddingInlineEnd: (val, el) => (0, import_scratch2.transformSizeRatio)("paddingInlineEnd", val, el),
-    margin: (val, el) => (0, import_scratch2.transformSizeRatio)("margin", val, el),
-    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, el) => {
-      if (!(0, import_utils2.isString)(el.marginBlock)) return;
-      const [marginBlockStart, marginBlockEnd] = el.marginBlock.split(" ");
-      return {
-        ...(0, import_scratch2.transformSize)("marginBlockStart", marginBlockStart),
-        ...(0, import_scratch2.transformSize)("marginBlockEnd", marginBlockEnd || marginBlockStart)
-      };
-    },
-    marginTop: (val, el) => (0, import_scratch2.transformSizeRatio)("marginBlockStart", val, el),
-    marginBottom: (val, el) => (0, import_scratch2.transformSizeRatio)("marginBlockEnd", val, el),
-    marginLeft: (val, el) => (0, import_scratch2.transformSizeRatio)("marginInlineStart", val, el),
-    marginRight: (val, el) => (0, import_scratch2.transformSizeRatio)("marginInlineEnd", val, el),
-    marginInlineStart: (val, el) => (0, import_scratch2.transformSizeRatio)("marginInlineStart", val, el),
-    marginInlineEnd: (val, el) => (0, import_scratch2.transformSizeRatio)("marginInlineEnd", val, el),
-    marginBlockStart: (val, el) => (0, import_scratch2.transformSizeRatio)("marginBlockStart", val, el),
-    marginBlockEnd: (val, el) => (0, import_scratch2.transformSizeRatio)("marginBlockEnd", val, el),
-    gap: (val) => ({
-      gap: (0, import_scratch2.transfromGap)(val)
-    }),
-    columnGap: (val, el) => (0, import_scratch2.getSpacingBasedOnRatio)(el, "columnGap", val),
-    rowGap: (val, el) => (0, import_scratch2.getSpacingBasedOnRatio)(el, "rowGap", val),
-    flexWrap: (val) => ({
-      display: "flex",
-      flexWrap: val
-    }),
-    flexFlow: (val, el) => {
-      const reverse = el.reverse;
-      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, el) => (0, import_scratch2.transformBorderRadius)(val ?? el.borderRadius, el, "round"),
-    borderRadius: (val, el) => (0, import_scratch2.transformBorderRadius)(val ?? el.round, el, "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 asset = ctx.assets && ctx.assets[value];
-      if (asset && asset.content) value = `url(${asset.content.src})`;
-      else {
-        const file = ctx.files && ctx.files[value];
-        if (file && file.content) value = `url(${file.content.src})`;
-      }
-      return { cursor: value };
-    },
-    opacity: (value) => value != null ? { opacity: String(value) } : void 0,
-    visibility: (value) => value != null ? { visibility: value } : void 0,
-    pointerEvents: (value) => value != null ? { pointerEvents: value } : void 0
-  };
-
-  // 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("@symbo.ls/utils");
-  var getSystemGlobalTheme = ({ context, state }) => {
-    const theme = state?.root?.globalTheme || context.designSystem?.globalTheme;
-    return theme === "auto" ? null : theme;
-  };
-  var THEME_PROPS = {
-    theme: (val, element) => {
-      if (!val) return;
-      if (element.themeModifier) {
-        return (0, import_scratch5.getMediaTheme)(val, `@${element.themeModifier}`);
-      }
-      return (0, import_scratch5.getMediaTheme)(val);
-    },
-    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 asset = ctx.assets && ctx.assets[val];
-      if (asset && asset.content) val = asset.content.src;
-      else {
-        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, el) => (0, import_scratch5.transformSizeRatio)("outlineOffset", val, el),
-    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("@symbo.ls/utils");
-  var FLEX_PROPS = {
-    flow: (value, el) => {
-      const reverse = el.reverse;
-      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, el) => {
-      return { display: "flex", flexWrap: value };
-    },
-    align: (value, el) => {
-      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,
-    ...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 import_utils5 = __require("@symbo.ls/utils");
-  var DATA_THEME_RE = /^\[data-theme=(?:"([^"]+)"|'([^']+)')\]$/;
-  var applyMediaProps = (key, selectorProps, element) => {
-    const { context } = element;
-    if (!context.designSystem?.media) return;
-    const schemeKey = key.slice(1);
-    const mediaValue = context.designSystem.media[schemeKey];
-    const generatedClass = useCssInProps(selectorProps, element);
-    if (!mediaValue) {
-      return { [key]: generatedClass };
-    }
-    if (mediaValue === "print") {
-      return { "@media print": generatedClass };
-    }
-    if (mediaValue[0] === "(") {
-      return { [`@media screen and ${mediaValue}`]: generatedClass };
-    }
-    const match = mediaValue.match(DATA_THEME_RE);
-    const scheme = match ? match[1] || match[2] : schemeKey;
-    const result = { [`${mediaValue} &`]: generatedClass };
-    if (scheme === "dark" || scheme === "light") {
-      const scopeSelector = context.designSystem?.scopeSelector || ":root";
-      const guard = scopeSelector === ":root" ? ":root:not([data-theme])" : `${scopeSelector}:not([data-theme])`;
-      result[`@media (prefers-color-scheme: ${scheme})`] = {
-        [`${guard} &`]: generatedClass
-      };
-    }
-    return result;
-  };
-  var applyAndProps = (key, selectorProps, element) => {
-    return { [key]: useCssInProps(selectorProps, element) };
-  };
-  var applySelectorProps = (key, selectorProps, element) => {
-    const selectorKey = `&${key}`;
-    const resolved = useCssInProps(selectorProps, element);
-    if (key.includes(",") && resolved) {
-      const flat = {};
-      const nested = {};
-      for (const k in resolved) {
-        if (typeof resolved[k] === "object" && resolved[k] !== null) {
-          nested[k] = resolved[k];
-        } else {
-          flat[k] = resolved[k];
-        }
-      }
-      if (Object.keys(nested).length) {
-        const parts = selectorKey.split(",").map((p) => p.trim());
-        const result = {};
-        if (Object.keys(flat).length) {
-          result[selectorKey] = flat;
-        }
-        for (const nestedKey in nested) {
-          const distributed = parts.map((p) => `${p} ${nestedKey}`).join(", ");
-          result[distributed] = nested[nestedKey];
-        }
-        return result;
-      }
-    }
-    return { [selectorKey]: resolved };
-  };
-  var resolveCase = (caseKey, element) => {
-    const caseFn = element.context?.cases?.[caseKey];
-    if (caseFn === void 0) return void 0;
-    if ((0, import_utils5.isFunction)(caseFn)) return caseFn.call(element, element);
-    return !!caseFn;
-  };
-  var applyCaseProps = (key, selectorProps, element) => {
-    const caseKey = key.slice(1);
-    let isCaseTrue = resolveCase(caseKey, element);
-    if (isCaseTrue === void 0) {
-      isCaseTrue = !!element[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);
-    let isCaseTrue = element[caseKey] === true || element.state?.[caseKey];
-    if (!isCaseTrue) {
-      if (typeof element[caseKey] === "function") {
-        try {
-          isCaseTrue = element[caseKey](element, element.state, element.context);
-        } catch (e) {
-        }
-      } else {
-        const caseResult = resolveCase(caseKey, element);
-        if (caseResult !== void 0) isCaseTrue = caseResult;
-      }
-    }
-    if (!isCaseTrue) return;
-    return useCssInProps(selectorProps, element);
-  };
-  var applyConditionalFalsyProps = (key, selectorProps, element) => {
-    const caseKey = key.slice(1);
-    let isCaseTrue = element[caseKey] === true || element.state?.[caseKey];
-    if (!isCaseTrue) {
-      if (typeof element[caseKey] === "function") {
-        try {
-          isCaseTrue = element[caseKey](element, element.state, element.context);
-        } catch (e) {
-        }
-      } else {
-        const caseResult = resolveCase(caseKey, element);
-        if (caseResult !== void 0) isCaseTrue = caseResult;
-      }
-    }
-    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_utils6.isProduction)();
-  var usePropsAsCSS = (sourceObj, element, opts) => {
-    const ds = element?.context?.designSystem;
-    if (ds) (0, import_scratch7.pushConfig)(ds);
-    try {
-      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_utils6.merge)(acc, CLASS[curr]), {});
-            obj.designSystemClass = result;
-          }
-        } else if (key === "true") {
-          const val = (0, import_utils6.exec)(value, element);
-          (0, import_utils6.merge)(obj, applyTrueProps(val, element));
-        } else if (element.classlist[key]) {
-          const originalFromClass = element.classlist[key];
-          const result = (0, import_utils6.isFunction)(originalFromClass) ? originalFromClass(element, element.state, element.context) : originalFromClass;
-          if (result) setToObj(key, result);
-          if (!isProd && (0, import_utils6.isObject)(obj[key])) obj[key].label = key;
-        } else if (CSS_PROPS_REGISTRY[key]) {
-          let val = (0, import_utils6.exec)(value, element);
-          if ((0, import_utils6.isArray)(val)) {
-            val = val.reduce((a, c) => (0, import_utils6.merge)(a, c), {});
-          }
-          let result = CSS_PROPS_REGISTRY[key](val, element, element.state, element.context);
-          if ((0, import_utils6.isArray)(result)) result = result.reduce((a, c) => (0, import_utils6.merge)(a, c), {});
-          if (result) setToObj(key, result);
-          if (!isProd && (0, import_utils6.isObject)(obj[key])) obj[key].label = key;
-        } else if (DEFAULT_CSS_PROPERTIES_LIST.has(key)) {
-          let result = (0, import_utils6.exec)(value, element);
-          if (typeof result === "string" && result.charCodeAt(0) === 45 && result.charCodeAt(1) === 45) {
-            result = `var(${result})`;
-          }
-          setToObj(key, { [key]: result });
-          if (!isProd && (0, import_utils6.isObject)(obj[key])) obj[key].label = key;
-        } else {
-          rest[key] = value;
-        }
-      }
-      return [obj, rest];
-    } finally {
-      if (ds) (0, import_scratch7.popConfig)();
-    }
-  };
-  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) {
-          for (const k in result) {
-            if (Object.prototype.hasOwnProperty.call(result, k)) {
-              if (obj[k] && typeof obj[k] === "object" && typeof result[k] === "object") {
-                (0, import_utils6.overwriteDeep)(obj[k], result[k]);
-              } else {
-                obj[k] = result[k];
-              }
-            }
-          }
-        }
-      }
-    }
-    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_utils6.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/set.js
-  var import_utils7 = __require("@symbo.ls/utils");
-  var import_css2 = __require("@symbo.ls/css");
-  var transformClassname = (element) => {
-    if (!(0, import_utils7.isObject)(element)) return;
-    return useCssInProps(element, element);
-  };
-  var setClassname = (props, cssEngine) => {
-    const transform = transformClassname(props);
-    if (typeof cssEngine === "function") return cssEngine(transform);
-    return (0, import_css2.css)(transform);
-  };
-  return __toCommonJS(index_exports);
-})();