css-in-props 3.4.5 → 3.4.9

package/dist/cjs/props/font.js

@@ -0,0 +1,36 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var font_exports = {};
+__export(font_exports, {
+  FONT_PROPS: () => FONT_PROPS
+});
+module.exports = __toCommonJS(font_exports);
+var import_scratch = require("@symbo.ls/scratch");
+const FONT_PROPS = {
+  fontSize: (value) => {
+    return (0, import_scratch.getFontSizeByKey)(value) || value;
+  },
+  fontFamily: (value) => ({
+    fontFamily: (0, import_scratch.getFontFamily)(value) || value
+  }),
+  fontWeight: (value) => ({
+    fontWeight: value,
+    fontVariationSettings: '"wght" ' + value
+  })
+};

package/dist/cjs/props/grid.js

@@ -0,0 +1,39 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var grid_exports = {};
+__export(grid_exports, {
+  GRID_PROPS: () => GRID_PROPS
+});
+module.exports = __toCommonJS(grid_exports);
+const 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 })
+};

package/dist/cjs/props/index.js

@@ -0,0 +1,56 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var props_exports = {};
+__export(props_exports, {
+  CSS_PROPS_REGISTRY: () => CSS_PROPS_REGISTRY,
+  default: () => props_default
+});
+module.exports = __toCommonJS(props_exports);
+var import_animation = require("./animation");
+var import_block = require("./block");
+var import_font = require("./font");
+var import_misc = require("./misc");
+var import_position = require("./position");
+var import_theme = require("./theme");
+var import_timing = require("./timing");
+var import_flex = require("./flex");
+var import_grid = require("./grid");
+__reExport(props_exports, require("./animation"), module.exports);
+__reExport(props_exports, require("./block"), module.exports);
+__reExport(props_exports, require("./font"), module.exports);
+__reExport(props_exports, require("./misc"), module.exports);
+__reExport(props_exports, require("./position"), module.exports);
+__reExport(props_exports, require("./theme"), module.exports);
+__reExport(props_exports, require("./timing"), module.exports);
+__reExport(props_exports, require("./flex"), module.exports);
+__reExport(props_exports, require("./grid"), module.exports);
+const CSS_PROPS_REGISTRY = {
+  ...import_animation.ANIMATION_PROPS,
+  ...import_block.BLOCK_PROPS,
+  ...import_font.FONT_PROPS,
+  ...import_misc.MISC_PROPS,
+  ...import_misc.MISC_PROPS,
+  ...import_position.POSITION_PROPS,
+  ...import_theme.THEME_PROPS,
+  ...import_timing.TIMING_PROPS,
+  ...import_flex.FLEX_PROPS,
+  ...import_grid.GRID_PROPS
+};
+var props_default = CSS_PROPS_REGISTRY;

package/dist/cjs/props/misc.js

@@ -0,0 +1,35 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var misc_exports = {};
+__export(misc_exports, {
+  MISC_PROPS: () => MISC_PROPS
+});
+module.exports = __toCommonJS(misc_exports);
+const 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 };
+  }
+};

package/dist/cjs/props/position.js

@@ -0,0 +1,51 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var position_exports = {};
+__export(position_exports, {
+  POSITION_PROPS: () => POSITION_PROPS
+});
+module.exports = __toCommonJS(position_exports);
+var import_scratch = require("@symbo.ls/scratch");
+const 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_scratch.getSpacingByKey)(v, "k").k).join(" ") };
+  },
+  left: (val) => (0, import_scratch.getSpacingByKey)(val, "left"),
+  top: (val) => (0, import_scratch.getSpacingByKey)(val, "top"),
+  right: (val) => (0, import_scratch.getSpacingByKey)(val, "right"),
+  bottom: (val) => (0, import_scratch.getSpacingByKey)(val, "bottom"),
+  verticalInset: (val) => {
+    if (typeof val !== "string") return;
+    const vi = val.split(" ").map((v) => (0, import_scratch.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_scratch.getSpacingByKey)(v, "k").k);
+    return {
+      left: vi[0],
+      right: vi[1] || vi[0]
+    };
+  }
+};

package/dist/cjs/props/theme.js

@@ -0,0 +1,149 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var theme_exports = {};
+__export(theme_exports, {
+  THEME_PROPS: () => THEME_PROPS,
+  getSystemGlobalTheme: () => getSystemGlobalTheme
+});
+module.exports = __toCommonJS(theme_exports);
+var import_scratch = require("@symbo.ls/scratch");
+var import_utils = require("@domql/utils");
+const getSystemGlobalTheme = ({ context, state }) => {
+  const theme = state?.root?.globalTheme || context.designSystem?.globalTheme;
+  return theme === "auto" ? null : theme;
+};
+const 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_scratch.getMediaTheme)(themeAppliedInVal);
+    } else if (val.includes("@{globalTheme}")) val.replace("@{globalTheme}", globalThemeForced);
+    return (0, import_scratch.getMediaTheme)(val, `@${props.themeModifier || globalTheme}`);
+  },
+  color: (val, element) => {
+    const globalTheme = getSystemGlobalTheme(element);
+    if (!val) return;
+    return {
+      color: (0, import_scratch.getMediaColor)(val, globalTheme)
+    };
+  },
+  background: (val, element) => {
+    const globalTheme = getSystemGlobalTheme(element);
+    if (!val) return;
+    if ((0, import_utils.isString)(val) && val.includes("gradient")) {
+      return { background: (0, import_scratch.resolveColorsInGradient)(val, globalTheme) };
+    }
+    return {
+      background: (0, import_scratch.getMediaColor)(val, globalTheme)
+    };
+  },
+  backgroundColor: (val, element) => {
+    const globalTheme = getSystemGlobalTheme(element);
+    if (!val) return;
+    return {
+      backgroundColor: (0, import_scratch.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_scratch.transformBackgroundImage)(val, globalTheme)
+    };
+  },
+  textStroke: (val) => ({
+    WebkitTextStroke: (0, import_scratch.transformTextStroke)(val)
+  }),
+  outline: (val) => ({
+    outline: (0, import_scratch.transformBorder)(val)
+  }),
+  outlineOffset: (val, { props }) => (0, import_scratch.transformSizeRatio)("outlineOffset", val, props),
+  border: (val) => ({
+    border: (0, import_scratch.transformBorder)(val)
+  }),
+  borderColor: (val, element) => {
+    const globalTheme = getSystemGlobalTheme(element);
+    if (!val) return;
+    return {
+      borderColor: (0, import_scratch.getMediaColor)(val, globalTheme)
+    };
+  },
+  borderTopColor: (val, element) => {
+    const globalTheme = getSystemGlobalTheme(element);
+    if (!val) return;
+    return { borderTopColor: (0, import_scratch.getMediaColor)(val, globalTheme) };
+  },
+  borderBottomColor: (val, element) => {
+    const globalTheme = getSystemGlobalTheme(element);
+    if (!val) return;
+    return { borderBottomColor: (0, import_scratch.getMediaColor)(val, globalTheme) };
+  },
+  borderLeftColor: (val, element) => {
+    const globalTheme = getSystemGlobalTheme(element);
+    if (!val) return;
+    return { borderLeftColor: (0, import_scratch.getMediaColor)(val, globalTheme) };
+  },
+  borderRightColor: (val, element) => {
+    const globalTheme = getSystemGlobalTheme(element);
+    if (!val) return;
+    return { borderRightColor: (0, import_scratch.getMediaColor)(val, globalTheme) };
+  },
+  borderLeft: (val) => ({
+    borderLeft: (0, import_scratch.transformBorder)(val)
+  }),
+  borderTop: (val) => ({
+    borderTop: (0, import_scratch.transformBorder)(val)
+  }),
+  borderRight: (val) => ({
+    borderRight: (0, import_scratch.transformBorder)(val)
+  }),
+  borderBottom: (val) => ({
+    borderBottom: (0, import_scratch.transformBorder)(val)
+  }),
+  shadow: (val, element) => {
+    const globalTheme = getSystemGlobalTheme(element);
+    if (!val) return;
+    return {
+      boxShadow: (0, import_scratch.transformShadow)(val, globalTheme)
+    };
+  },
+  boxShadow: (val, element) => {
+    if (!(0, import_utils.isString)(val)) return;
+    const [value, hasImportant] = val.split("!importan");
+    const globalTheme = getSystemGlobalTheme(element);
+    const important = hasImportant ? " !important" : "";
+    return {
+      boxShadow: (0, import_scratch.transformBoxShadow)(value.trim(), globalTheme) + important
+    };
+  },
+  textShadow: (val, { context }) => ({
+    textShadow: (0, import_scratch.transformBoxShadow)(val, context.designSystem.globalTheme)
+  }),
+  columnRule: (val) => ({
+    columnRule: (0, import_scratch.transformBorder)(val)
+  })
+};

package/dist/cjs/props/timing.js

@@ -0,0 +1,42 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var timing_exports = {};
+__export(timing_exports, {
+  TIMING_PROPS: () => TIMING_PROPS
+});
+module.exports = __toCommonJS(timing_exports);
+var import_scratch = require("@symbo.ls/scratch");
+const TIMING_PROPS = {
+  transition: (val) => ({
+    transition: (0, import_scratch.splitTransition)(val)
+  }),
+  transitionDuration: (val) => ({
+    transitionDuration: (0, import_scratch.transformDuration)(val)
+  }),
+  transitionDelay: (val) => ({
+    transitionDelay: (0, import_scratch.transformDuration)(val)
+  }),
+  transitionTimingFunction: (val) => ({
+    transitionTimingFunction: (0, import_scratch.getTimingFunction)(val)
+  }),
+  transitionProperty: (val) => ({
+    transitionProperty: val,
+    willChange: val
+  })
+};

package/dist/cjs/transform/executors.js

@@ -0,0 +1,111 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var executors_exports = {};
+__export(executors_exports, {
+  exetuteClassPerComponent: () => exetuteClassPerComponent,
+  useCssInProps: () => useCssInProps,
+  usePropsAsCSS: () => usePropsAsCSS,
+  useSelectorsAsCSS: () => useSelectorsAsCSS
+});
+module.exports = __toCommonJS(executors_exports);
+var import_utils = require("@domql/utils");
+var import_props = require("../props");
+var import_defaults = require("../props/defaults");
+var import_transformers = require("./transformers");
+const isProd = (0, import_utils.isProduction)();
+const 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_utils.merge)(acc, CLASS[curr]), {});
+        obj.designSystemClass = result;
+      }
+    } else if (key === "true") {
+      const val = (0, import_utils.exec)(value, element);
+      (0, import_utils.merge)(obj, (0, import_transformers.applyTrueProps)(val, element));
+    } else if (element.classlist[key]) {
+      const originalFromClass = element.classlist[key];
+      const result = (0, import_utils.isFunction)(originalFromClass) ? originalFromClass(element, element.state, element.context) : originalFromClass;
+      if (result) setToObj(key, result);
+      if (!isProd && (0, import_utils.isObject)(obj[key])) obj[key].label = key;
+    } else if (import_props.CSS_PROPS_REGISTRY[key]) {
+      let val = (0, import_utils.exec)(value, element);
+      if ((0, import_utils.isArray)(val)) {
+        val = val.reduce((a, c) => (0, import_utils.merge)(a, c), {});
+      }
+      let result = import_props.CSS_PROPS_REGISTRY[key](val, element, element.state, element.context);
+      if ((0, import_utils.isArray)(result)) result = result.reduce((a, c) => (0, import_utils.merge)(a, c), {});
+      if (result) setToObj(key, result);
+      if (!isProd && (0, import_utils.isObject)(obj[key])) obj[key].label = key;
+    } else if (import_defaults.DEFAULT_CSS_PROPERTIES_LIST.has(key)) {
+      const result = (0, import_utils.exec)(value, element);
+      setToObj(key, { [key]: result });
+      if (!isProd && (0, import_utils.isObject)(obj[key])) obj[key].label = key;
+    } else {
+      rest[key] = value;
+    }
+  }
+  return [obj, rest];
+};
+const useSelectorsAsCSS = (sourceObj, element) => {
+  const obj = {};
+  for (const key in sourceObj) {
+    const selectroSetter = import_transformers.transformersByPrefix[key.slice(0, 1)];
+    if (selectroSetter) {
+      const result = selectroSetter(key, sourceObj[key], element);
+      if (result) (0, import_utils.overwriteDeep)(obj, result);
+    }
+  }
+  return obj;
+};
+const 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_utils.overwrite)(cssObj, selectorsObj);
+    cssObj._selectors = selectorsObj;
+  }
+  return cssObj;
+};
+const exetuteClassPerComponent = (component, element) => {
+  const classObj = {};
+  if (component.class) {
+    for (const classProp in component.class) {
+      classObj[classProp] = component.class[classProp](element);
+    }
+  }
+  return classObj;
+};

package/dist/cjs/transform/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var transform_exports = {};
+module.exports = __toCommonJS(transform_exports);
+__reExport(transform_exports, require("./executors"), module.exports);

package/dist/cjs/transform/transformers.js

@@ -0,0 +1,81 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var transformers_exports = {};
+__export(transformers_exports, {
+  applyTrueProps: () => applyTrueProps,
+  transformersByPrefix: () => transformersByPrefix
+});
+module.exports = __toCommonJS(transformers_exports);
+var import_executors = require("./executors");
+const applyMediaProps = (key, selectorProps, element) => {
+  const { context } = element;
+  if (!context.designSystem?.MEDIA) return;
+  const mediaValue = context.designSystem.MEDIA[key.slice(1)];
+  const generatedClass = (0, import_executors.useCssInProps)(selectorProps, element);
+  const mediaKey = mediaValue ? "@media " + (mediaValue === "print" ? mediaValue : `screen and ${mediaValue}`) : key;
+  return { [mediaKey]: generatedClass };
+};
+const applyAndProps = (key, selectorProps, element) => {
+  return { [key]: (0, import_executors.useCssInProps)(selectorProps, element) };
+};
+const applySelectorProps = (key, selectorProps, element) => {
+  const selectorKey = `&${key}`;
+  return { [selectorKey]: (0, import_executors.useCssInProps)(selectorProps, element) };
+};
+const 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 (0, import_executors.useCssInProps)(selectorProps, element);
+};
+const applyVariableProps = (key, selectorVal, element) => {
+  return { [key]: selectorVal };
+};
+const applyConditionalCaseProps = (key, selectorProps, element) => {
+  const caseKey = key.slice(1);
+  const isCaseTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey];
+  if (!isCaseTrue) return;
+  return (0, import_executors.useCssInProps)(selectorProps, element);
+};
+const applyConditionalFalsyProps = (key, selectorProps, element) => {
+  const caseKey = key.slice(1);
+  const isCaseTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey];
+  if (isCaseTrue) return;
+  return (0, import_executors.useCssInProps)(selectorProps, element);
+};
+const applyTrueProps = (selectorProps, element) => {
+  return (0, import_executors.useCssInProps)(selectorProps, element);
+};
+const transformersByPrefix = {
+  "@": applyMediaProps,
+  // Selector handlers
+  ":": applySelectorProps,
+  "[": applySelectorProps,
+  "*": applySelectorProps,
+  "+": applySelectorProps,
+  "~": applySelectorProps,
+  "&": applyAndProps,
+  ">": applyAndProps,
+  // Conditional and variable handlers
+  $: applyCaseProps,
+  "-": applyVariableProps,
+  ".": applyConditionalCaseProps,
+  "!": applyConditionalFalsyProps
+};