css-in-props 3.8.8 → 3.14.0

package/dist/iife/index.js

@@ -41,7 +41,8 @@ var CssInProps = (() => {
     applyTrueProps: () => applyTrueProps,
     exetuteClassPerComponent: () => exetuteClassPerComponent,
     getSystemGlobalTheme: () => getSystemGlobalTheme,
-    transformEmotion: () => transformEmotion,
+    setClassname: () => setClassname,
+    transformClassname: () => transformClassname,
     transformersByPrefix: () => transformersByPrefix,
     useCssInProps: () => useCssInProps,
     usePropsAsCSS: () => usePropsAsCSS,
@@ -49,27 +50,33 @@ var CssInProps = (() => {
   });
 
   // src/transform/executors.js
-  var import_utils6 = __require("@domql/utils");
+  var import_utils6 = __require("@symbo.ls/utils");
+  var import_scratch7 = __require("@symbo.ls/scratch");
 
   // src/props/animation.js
-  var import_utils = __require("@domql/utils");
-  var import_emotion = __require("@symbo.ls/emotion");
+  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 { 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);
+    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 } = el.context && el.context.designSystem || {};
+    const { animation: ANIMATION } = el.context && el.context.designSystem || {};
     const tokens = val.split(/\s+/);
     let name = null;
     const durations = [];
@@ -105,24 +112,24 @@ var CssInProps = (() => {
         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
+          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.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
+        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) => ({
@@ -152,17 +159,13 @@ var CssInProps = (() => {
   };
 
   // src/props/block.js
-  var import_utils2 = __require("@domql/utils");
+  var import_utils2 = __require("@symbo.ls/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),
+    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;
@@ -172,10 +175,10 @@ var CssInProps = (() => {
         ...(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),
+    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(" ");
@@ -184,8 +187,8 @@ var CssInProps = (() => {
         ...(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),
+    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(" ");
@@ -202,10 +205,10 @@ var CssInProps = (() => {
         ...(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),
+    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(" ");
@@ -222,9 +225,9 @@ var CssInProps = (() => {
         ...(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),
+    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(" ");
@@ -241,21 +244,15 @@ var CssInProps = (() => {
         ...(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),
+    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(" ");
@@ -264,35 +261,33 @@ var CssInProps = (() => {
         ...(0, import_scratch2.transformSize)("marginInlineEnd", marginInlineEnd || marginInlineStart)
       };
     },
-    marginBlock: (val, { props }) => {
-      if (!(0, import_utils2.isString)(props.marginBlock)) return;
-      const [marginBlockStart, marginBlockEnd] = props.marginBlock.split(" ");
+    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)
       };
     },
-    // Traditional directional margin
-    marginTop: (val, { props }) => (0, import_scratch2.transformSizeRatio)("marginBlockStart", val, props),
-    marginBottom: (val, { props }) => (0, import_scratch2.transformSizeRatio)("marginBlockEnd", val, props),
-    marginLeft: (val, { props }) => (0, import_scratch2.transformSizeRatio)("marginInlineStart", val, props),
-    marginRight: (val, { props }) => (0, import_scratch2.transformSizeRatio)("marginInlineEnd", val, props),
-    // Logical properties
-    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),
+    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, { props }) => (0, import_scratch2.getSpacingBasedOnRatio)(props, "columnGap", val),
-    rowGap: (val, { props }) => (0, import_scratch2.getSpacingBasedOnRatio)(props, "rowGap", val),
-    flexWrap: (val, { props }) => ({
+    columnGap: (val, el) => (0, import_scratch2.getSpacingBasedOnRatio)(el, "columnGap", val),
+    rowGap: (val, el) => (0, import_scratch2.getSpacingBasedOnRatio)(el, "rowGap", val),
+    flexWrap: (val) => ({
       display: "flex",
-      flexFlow: (val || "row").split(" ")[0] + " " + props.flexWrap
+      flexWrap: val
     }),
-    flexFlow: (val, { props }) => {
-      const { reverse } = props;
+    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";
@@ -311,8 +306,8 @@ var CssInProps = (() => {
         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")
+    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
@@ -338,10 +333,17 @@ var CssInProps = (() => {
     }),
     cursor: (value, el, s, ctx) => {
       if (!value) return;
-      const file = ctx.files && ctx.files[value];
-      if (file && file.content) value = `url(${file.content.src})`;
+      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
@@ -376,17 +378,16 @@ var CssInProps = (() => {
 
   // src/props/theme.js
   var import_scratch5 = __require("@symbo.ls/scratch");
-  var import_utils3 = __require("@domql/utils");
+  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) => {
-      const { props } = element;
       if (!val) return;
-      if (props.themeModifier) {
-        return (0, import_scratch5.getMediaTheme)(val, `@${props.themeModifier}`);
+      if (element.themeModifier) {
+        return (0, import_scratch5.getMediaTheme)(val, `@${element.themeModifier}`);
       }
       return (0, import_scratch5.getMediaTheme)(val);
     },
@@ -417,8 +418,12 @@ var CssInProps = (() => {
     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;
+      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)
       };
@@ -429,7 +434,7 @@ var CssInProps = (() => {
     outline: (val) => ({
       outline: (0, import_scratch5.transformBorder)(val)
     }),
-    outlineOffset: (val, { props }) => (0, import_scratch5.transformSizeRatio)("outlineOffset", val, props),
+    outlineOffset: (val, el) => (0, import_scratch5.transformSizeRatio)("outlineOffset", val, el),
     border: (val) => ({
       border: (0, import_scratch5.transformBorder)(val)
     }),
@@ -518,11 +523,10 @@ var CssInProps = (() => {
   };
 
   // src/props/flex.js
-  var import_utils4 = __require("@domql/utils");
+  var import_utils4 = __require("@symbo.ls/utils");
   var FLEX_PROPS = {
     flow: (value, el) => {
-      const { props } = el;
-      const { reverse } = props;
+      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";
@@ -532,10 +536,10 @@ var CssInProps = (() => {
         flexFlow: (direction || "") + (!direction.includes("-reverse") && reverse ? "-reverse" : "") + " " + (wrap || "")
       };
     },
-    wrap: (value, { props }) => {
+    wrap: (value, el) => {
       return { display: "flex", flexWrap: value };
     },
-    align: (value, { props }) => {
+    align: (value, el) => {
       const [alignItems, justifyContent] = value.split(" ");
       return { display: "flex", alignItems, justifyContent };
     }
@@ -565,7 +569,6 @@ var CssInProps = (() => {
     ...BLOCK_PROPS,
     ...FONT_PROPS,
     ...MISC_PROPS,
-    ...MISC_PROPS,
     ...POSITION_PROPS,
     ...THEME_PROPS,
     ...TIMING_PROPS,
@@ -894,30 +897,65 @@ var CssInProps = (() => {
   ]);
 
   // src/transform/transformers.js
-  var import_utils5 = __require("@domql/utils");
+  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 mediaValue = context.designSystem.media[key.slice(1)];
+    const schemeKey = key.slice(1);
+    const mediaValue = context.designSystem.media[schemeKey];
     const generatedClass = useCssInProps(selectorProps, element);
-    let mediaKey;
     if (!mediaValue) {
-      mediaKey = key;
-    } else if (mediaValue === "print") {
-      mediaKey = "@media print";
-    } else if (mediaValue[0] === "(") {
-      mediaKey = `@media screen and ${mediaValue}`;
-    } else {
-      mediaKey = `${mediaValue} &`;
+      return { [key]: generatedClass };
     }
-    return { [mediaKey]: 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}`;
-    return { [selectorKey]: useCssInProps(selectorProps, element) };
+    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];
@@ -929,7 +967,7 @@ var CssInProps = (() => {
     const caseKey = key.slice(1);
     let isCaseTrue = resolveCase(caseKey, element);
     if (isCaseTrue === void 0) {
-      isCaseTrue = !!element.props?.[caseKey];
+      isCaseTrue = !!element[caseKey];
     }
     if (!isCaseTrue) return;
     return useCssInProps(selectorProps, element);
@@ -939,20 +977,34 @@ var CssInProps = (() => {
   };
   var applyConditionalCaseProps = (key, selectorProps, element) => {
     const caseKey = key.slice(1);
-    let isCaseTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey];
+    let isCaseTrue = element[caseKey] === true || element.state?.[caseKey];
     if (!isCaseTrue) {
-      const caseResult = resolveCase(caseKey, element);
-      if (caseResult !== void 0) isCaseTrue = caseResult;
+      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.props[caseKey] === true || element.state[caseKey] || element[caseKey];
+    let isCaseTrue = element[caseKey] === true || element.state?.[caseKey];
     if (!isCaseTrue) {
-      const caseResult = resolveCase(caseKey, element);
-      if (caseResult !== void 0) isCaseTrue = caseResult;
+      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);
@@ -980,53 +1032,59 @@ var CssInProps = (() => {
   // src/transform/executors.js
   var isProd = (0, import_utils6.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_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), {});
+    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;
         }
-        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})`;
+        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;
         }
-        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)();
     }
-    return [obj, rest];
   };
   var useSelectorsAsCSS = (sourceObj, element) => {
     const obj = {};
@@ -1073,12 +1131,17 @@ var CssInProps = (() => {
     return classObj;
   };
 
-  // src/emotion.js
-  var import_utils7 = __require("@domql/utils");
-  var import_emotion2 = __require("@symbo.ls/emotion");
-  var { css } = import_emotion2.emotion;
-  var transformEmotion = (props, callback) => {
-    return (0, import_utils7.isFunction)(callback) ? callback(props) : css(props);
+  // 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);
 })();

package/index.js

@@ -0,0 +1 @@
+export * from './src/index.js'