@symbo.ls/create 2.11.475 → 2.11.476

package/dist/cjs/bundle/index.js

@@ -304,6 +304,7 @@ var require_array = __commonJS({
       addItemAfterEveryElement: () => addItemAfterEveryElement,
       arrayContainsOtherArray: () => arrayContainsOtherArray,
       arraysEqual: () => arraysEqual,
+      checkIfStringIsInArray: () => checkIfStringIsInArray,
       cutArrayAfterValue: () => cutArrayAfterValue,
       cutArrayBeforeValue: () => cutArrayBeforeValue,
       filterArrays: () => filterArrays,
@@ -423,6 +424,11 @@ var require_array = __commonJS({
       const excludeSet = new Set(excludeArr);
       return sourceArr.filter((item) => !excludeSet.has(item));
     };
+    var checkIfStringIsInArray = (string, arr) => {
+      if (!string)
+        return;
+      return arr.filter((v) => string.includes(v)).length;
+    };
   }
 });
 
@@ -1133,13 +1139,13 @@ var require_object = __commonJS({
       }
       return true;
     };
-    var removeFromObject = (obj, props5) => {
-      if (props5 === void 0 || props5 === null)
+    var removeFromObject = (obj, props4) => {
+      if (props4 === void 0 || props4 === null)
         return obj;
-      if ((0, import_types.is)(props5)("string", "number")) {
-        delete obj[props5];
-      } else if ((0, import_types.isArray)(props5)) {
-        props5.forEach((prop) => delete obj[prop]);
+      if ((0, import_types.is)(props4)("string", "number")) {
+        delete obj[props4];
+      } else if ((0, import_types.isArray)(props4)) {
+        props4.forEach((prop) => delete obj[prop]);
       } else {
         throw new Error("Invalid input: props must be a string or an array of strings");
       }
@@ -1655,6 +1661,7 @@ var require_component = __commonJS({
       checkIfKeyIsProperty: () => checkIfKeyIsProperty,
       checkIfSugar: () => checkIfSugar,
       extendizeByKey: () => extendizeByKey,
+      extractComponentKeyFromKey: () => extractComponentKeyFromKey,
       getCapitalCaseKeys: () => getCapitalCaseKeys,
       getChildrenComponentsByKey: () => getChildrenComponentsByKey,
       getExtendsInElement: () => getExtendsInElement,
@@ -1692,7 +1699,7 @@ var require_component = __commonJS({
       var _a;
       const {
         extend,
-        props: props5,
+        props: props4,
         childExtend,
         extends: extendProps,
         childExtends,
@@ -1703,7 +1710,7 @@ var require_component = __commonJS({
         $stateCollection,
         $propsCollection
       } = element;
-      const hasComponentAttrs = extend || childExtend || props5 || on2 || $collection || $stateCollection || $propsCollection;
+      const hasComponentAttrs = extend || childExtend || props4 || on2 || $collection || $stateCollection || $propsCollection;
       if (hasComponentAttrs && (childProps || extendProps || children || childExtends)) {
         const logErr = (_a = parent || element) == null ? void 0 : _a.error;
         if (logErr)
@@ -1711,11 +1718,14 @@ var require_component = __commonJS({
       }
       return !hasComponentAttrs || childProps || extendProps || children || childExtends;
     };
+    var extractComponentKeyFromKey = (key) => {
+      return key.includes("+") ? key.split("+") : key.includes("_") ? [key.split("_")[0]] : key.includes(".") && !checkIfKeyIsComponent2(key.split(".")[1]) ? [key.split(".")[0]] : [key];
+    };
     var extendizeByKey = (element, parent, key) => {
       const { context } = parent;
       const { tag, extend, childExtends } = element;
       const isSugar = checkIfSugar(element, parent, key);
-      const extendFromKey = key.includes("+") ? key.split("+") : key.includes("_") ? [key.split("_")[0]] : key.includes(".") && !checkIfKeyIsComponent2(key.split(".")[1]) ? [key.split(".")[0]] : [key];
+      const extendFromKey = extractComponentKeyFromKey(key);
       const isExtendKeyComponent = context && context.components[extendFromKey];
       if (element === isExtendKeyComponent)
         return element;
@@ -1806,8 +1816,8 @@ var require_component = __commonJS({
       return firstCharKey === ".";
     };
     var hasVariantProp = (element) => {
-      const { props: props5 } = element;
-      if ((0, import__.isObject)(props5) && (0, import__.isString)(props5.variant))
+      const { props: props4 } = element;
+      if ((0, import__.isObject)(props4) && (0, import__.isString)(props4.variant))
         return true;
     };
     var getChildrenComponentsByKey = (key, el) => {
@@ -3053,13 +3063,13 @@ var require_cjs2 = __commonJS({
           }
           return true;
         };
-        var removeFromObject = (obj, props5) => {
-          if (props5 === void 0 || props5 === null)
+        var removeFromObject = (obj, props4) => {
+          if (props4 === void 0 || props4 === null)
             return obj;
-          if ((0, import_types.is)(props5)("string", "number")) {
-            delete obj[props5];
-          } else if ((0, import_types.isArray)(props5)) {
-            props5.forEach((prop) => delete obj[prop]);
+          if ((0, import_types.is)(props4)("string", "number")) {
+            delete obj[props4];
+          } else if ((0, import_types.isArray)(props4)) {
+            props4.forEach((prop) => delete obj[prop]);
           } else {
             throw new Error("Invalid input: props must be a string or an array of strings");
           }
@@ -3602,7 +3612,7 @@ var require_cjs2 = __commonJS({
           var _a;
           const {
             extend,
-            props: props5,
+            props: props4,
             childExtend,
             extends: extendProps,
             childExtends,
@@ -3613,7 +3623,7 @@ var require_cjs2 = __commonJS({
             $stateCollection,
             $propsCollection
           } = element;
-          const hasComponentAttrs = extend || childExtend || props5 || on2 || $collection || $stateCollection || $propsCollection;
+          const hasComponentAttrs = extend || childExtend || props4 || on2 || $collection || $stateCollection || $propsCollection;
           if (hasComponentAttrs && (childProps || extendProps || children || childExtends)) {
             const logErr = (_a = parent || element) == null ? void 0 : _a.error;
             if (logErr)
@@ -3716,8 +3726,8 @@ var require_cjs2 = __commonJS({
           return firstCharKey === ".";
         };
         var hasVariantProp = (element) => {
-          const { props: props5 } = element;
-          if ((0, import__.isObject)(props5) && (0, import__.isString)(props5.variant))
+          const { props: props4 } = element;
+          if ((0, import__.isObject)(props4) && (0, import__.isString)(props4.variant))
             return true;
         };
         var getChildrenComponentsByKey = (key, el) => {
@@ -4925,13 +4935,13 @@ var require_cjs2 = __commonJS({
               }
               return true;
             };
-            var removeFromObject = (obj, props5) => {
-              if (props5 === void 0 || props5 === null)
+            var removeFromObject = (obj, props4) => {
+              if (props4 === void 0 || props4 === null)
                 return obj;
-              if ((0, import_types.is)(props5)("string", "number")) {
-                delete obj[props5];
-              } else if ((0, import_types.isArray)(props5)) {
-                props5.forEach((prop) => delete obj[prop]);
+              if ((0, import_types.is)(props4)("string", "number")) {
+                delete obj[props4];
+              } else if ((0, import_types.isArray)(props4)) {
+                props4.forEach((prop) => delete obj[prop]);
               } else {
                 throw new Error("Invalid input: props must be a string or an array of strings");
               }
@@ -5474,7 +5484,7 @@ var require_cjs2 = __commonJS({
               var _a;
               const {
                 extend,
-                props: props5,
+                props: props4,
                 childExtend,
                 extends: extendProps,
                 childExtends,
@@ -5485,7 +5495,7 @@ var require_cjs2 = __commonJS({
                 $stateCollection,
                 $propsCollection
               } = element;
-              const hasComponentAttrs = extend || childExtend || props5 || on2 || $collection || $stateCollection || $propsCollection;
+              const hasComponentAttrs = extend || childExtend || props4 || on2 || $collection || $stateCollection || $propsCollection;
               if (hasComponentAttrs && (childProps || extendProps || children || childExtends)) {
                 const logErr = (_a = parent || element) == null ? void 0 : _a.error;
                 if (logErr)
@@ -5588,8 +5598,8 @@ var require_cjs2 = __commonJS({
               return firstCharKey === ".";
             };
             var hasVariantProp = (element) => {
-              const { props: props5 } = element;
-              if ((0, import__.isObject)(props5) && (0, import__.isString)(props5.variant))
+              const { props: props4 } = element;
+              if ((0, import__.isObject)(props4) && (0, import__.isString)(props4.variant))
                 return true;
             };
             var getChildrenComponentsByKey = (key, el) => {
@@ -6481,8 +6491,8 @@ var require_cjs2 = __commonJS({
       18: "S",
       19: "T"
     };
-    var setSequenceValue = (props5, sequenceProps) => {
-      const { key, variable, value: value2, scaling, index, scalingVariable } = props5;
+    var setSequenceValue = (props4, sequenceProps) => {
+      const { key, variable, value: value2, scaling, index, scalingVariable } = props4;
       sequenceProps.sequence[key] = {
         key,
         decimal: ~~(value2 * 100) / 100,
@@ -6530,8 +6540,8 @@ var require_cjs2 = __commonJS({
     var getSubratio = (base, ratio) => {
       return getSubratioDifference(base, ratio).map((v) => v / base);
     };
-    var generateSubSequence = (props5, sequenceProps) => {
-      const { key, base, value: value2, ratio, variable, index } = props5;
+    var generateSubSequence = (props4, sequenceProps) => {
+      const { key, base, value: value2, ratio, variable, index } = props4;
       const next3 = value2 * ratio;
       const diffRounded = ~~next3 - ~~value2;
       let arr;
@@ -6570,7 +6580,7 @@ var require_cjs2 = __commonJS({
         const scaling = ~~(value2 / base * 100) / 100;
         const variable = prefix3 + letterKey;
         const scalingVariable = setScalingVar(key, sequenceProps);
-        const props5 = {
+        const props4 = {
           key: letterKey,
           variable,
           value: value2,
@@ -6580,9 +6590,9 @@ var require_cjs2 = __commonJS({
           ratio,
           index: key
         };
-        setSequenceValue(props5, sequenceProps);
+        setSequenceValue(props4, sequenceProps);
         if (subSequence)
-          generateSubSequence(props5, sequenceProps);
+          generateSubSequence(props4, sequenceProps);
       }
       return sequenceProps;
     };
@@ -7259,20 +7269,20 @@ var require_cjs2 = __commonJS({
         applyMediaSequenceVars(FACTORY2, prop);
       }
     };
-    var applyHeadings = (props5) => {
+    var applyHeadings = (props4) => {
       const CONFIG22 = getActiveConfig3();
-      if (props5.h1Matches) {
-        const unit = props5.unit;
-        const HEADINGS = findHeadings(props5);
-        const { templates } = props5;
+      if (props4.h1Matches) {
+        const unit = props4.unit;
+        const HEADINGS = findHeadings(props4);
+        const { templates } = props4;
         for (const k in HEADINGS) {
           const headerName = `h${parseInt(k) + 1}`;
           const headerStyle = templates[headerName];
           templates[headerName] = {
             fontSize: CONFIG22.useVariable ? `var(${HEADINGS[k].variable})` : `${HEADINGS[k].scaling}${unit}`,
             margin: headerStyle ? headerStyle.margin : 0,
-            lineHeight: headerStyle ? headerStyle.lineHeight : props5.lineHeight,
-            letterSpacing: headerStyle ? headerStyle.letterSpacing : props5.letterSpacing,
+            lineHeight: headerStyle ? headerStyle.lineHeight : props4.lineHeight,
+            letterSpacing: headerStyle ? headerStyle.letterSpacing : props4.letterSpacing,
             fontWeight: headerStyle ? headerStyle.fontWeight : 900 - k * 100
           };
         }
@@ -7376,11 +7386,11 @@ var require_cjs2 = __commonJS({
         sequence
       );
     };
-    var getSpacingBasedOnRatio4 = (props5, propertyName, val) => {
+    var getSpacingBasedOnRatio4 = (props4, propertyName, val) => {
       const CONFIG22 = getActiveConfig3();
       const { SPACING: SPACING22 } = CONFIG22;
-      const { spacingRatio, unit } = props5;
-      const value2 = val || props5[propertyName];
+      const { spacingRatio, unit } = props4;
+      const value2 = val || props4[propertyName];
       if (spacingRatio) {
         let sequenceProps = SPACING22[spacingRatio];
         if (!sequenceProps) {
@@ -7750,7 +7760,7 @@ var require_cjs2 = __commonJS({
         return v;
       }).join(" ");
     };
-    var transformDuration2 = (duration, props5, propertyName) => {
+    var transformDuration2 = (duration, props4, propertyName) => {
       if (!(0, import_utils252.isString)(duration))
         return;
       return duration.split(",").map((v) => getTimingByKey2(v).timing || v).join(",");
@@ -7765,11 +7775,11 @@ var require_cjs2 = __commonJS({
       const prop = propertyName.toLowerCase();
       return (prop.includes("width") || prop.includes("height")) && !prop.includes("border");
     };
-    var transformSize2 = (propertyName, val, props5 = {}, opts = {}) => {
-      let value2 = val || props5[propertyName];
+    var transformSize2 = (propertyName, val, props4 = {}, opts = {}) => {
+      let value2 = val || props4[propertyName];
       if ((0, import_utils252.isUndefined)(value2) && (0, import_utils252.isNull)(value2))
         return;
-      const shouldScaleBoxSize = props5.scaleBoxSize;
+      const shouldScaleBoxSize = props4.scaleBoxSize;
       const isBoxSize = checkIfBoxSize(propertyName);
       if (!shouldScaleBoxSize && isBoxSize && (0, import_utils252.isString)(value2)) {
         value2 = value2.split(" ").map((v) => {
@@ -7781,13 +7791,13 @@ var require_cjs2 = __commonJS({
         }).join(" ");
       }
       if (opts.ratio) {
-        return getSpacingBasedOnRatio4(props5, propertyName, value2);
+        return getSpacingBasedOnRatio4(props4, propertyName, value2);
       } else {
         return getSpacingByKey3(value2, propertyName);
       }
     };
-    var transformSizeRatio2 = (propertyName, props5) => {
-      return transformSize2(propertyName, null, props5, {
+    var transformSizeRatio2 = (propertyName, props4) => {
+      return transformSize2(propertyName, null, props4, {
         ratio: true
       });
     };
@@ -7832,11 +7842,11 @@ var require_cjs2 = __commonJS({
       if (CONFIG22.verbose)
         console.warn("Can not find", factoryName, "method in scratch");
     };
-    var setEach = (factoryName, props5) => {
+    var setEach = (factoryName, props4) => {
       const CONFIG22 = getActiveConfig3();
       const FACTORY_NAME = factoryName.toUpperCase();
-      const keys = Object.keys(props5);
-      keys.map((key) => setValue(FACTORY_NAME, props5[key], key));
+      const keys = Object.keys(props4);
+      keys.map((key) => setValue(FACTORY_NAME, props4[key], key));
       return CONFIG22[FACTORY_NAME];
     };
     var SET_OPTIONS2 = {};
@@ -9016,13 +9026,13 @@ var require_cjs3 = __commonJS({
           }
           return true;
         };
-        var removeFromObject = (obj, props5) => {
-          if (props5 === void 0 || props5 === null)
+        var removeFromObject = (obj, props4) => {
+          if (props4 === void 0 || props4 === null)
             return obj;
-          if ((0, import_types.is)(props5)("string", "number")) {
-            delete obj[props5];
-          } else if ((0, import_types.isArray)(props5)) {
-            props5.forEach((prop) => delete obj[prop]);
+          if ((0, import_types.is)(props4)("string", "number")) {
+            delete obj[props4];
+          } else if ((0, import_types.isArray)(props4)) {
+            props4.forEach((prop) => delete obj[prop]);
           } else {
             throw new Error("Invalid input: props must be a string or an array of strings");
           }
@@ -9565,7 +9575,7 @@ var require_cjs3 = __commonJS({
           var _a;
           const {
             extend,
-            props: props5,
+            props: props4,
             childExtend,
             extends: extendProps,
             childExtends,
@@ -9576,7 +9586,7 @@ var require_cjs3 = __commonJS({
             $stateCollection,
             $propsCollection
           } = element;
-          const hasComponentAttrs = extend || childExtend || props5 || on2 || $collection || $stateCollection || $propsCollection;
+          const hasComponentAttrs = extend || childExtend || props4 || on2 || $collection || $stateCollection || $propsCollection;
           if (hasComponentAttrs && (childProps || extendProps || children || childExtends)) {
             const logErr = (_a = parent || element) == null ? void 0 : _a.error;
             if (logErr)
@@ -9679,8 +9689,8 @@ var require_cjs3 = __commonJS({
           return firstCharKey === ".";
         };
         var hasVariantProp = (element) => {
-          const { props: props5 } = element;
-          if ((0, import__.isObject)(props5) && (0, import__.isString)(props5.variant))
+          const { props: props4 } = element;
+          if ((0, import__.isObject)(props4) && (0, import__.isString)(props4.variant))
             return true;
         };
         var getChildrenComponentsByKey = (key, el) => {
@@ -10130,11 +10140,11 @@ var init_Utility = __esm({
 });
 
 // ../../node_modules/stylis/src/Tokenizer.js
-function node(value2, root, parent, type, props5, children, length3) {
-  return { value: value2, root, parent, type, props: props5, children, line, column, length: length3, return: "" };
+function node(value2, root, parent, type, props4, children, length3) {
+  return { value: value2, root, parent, type, props: props4, children, line, column, length: length3, return: "" };
 }
-function copy(root, props5) {
-  return assign(node("", null, null, "", null, null, 0), root, { length: -root.length }, props5);
+function copy(root, props4) {
+  return assign(node("", null, null, "", null, null, 0), root, { length: -root.length }, props4);
 }
 function char() {
   return character;
@@ -10277,7 +10287,7 @@ function parse(value2, root, parent, rule, rules, rulesets, pseudo, points, decl
   var ampersand = 1;
   var character3 = 0;
   var type = "";
-  var props5 = rules;
+  var props4 = rules;
   var children = rulesets;
   var reference = rule;
   var characters3 = type;
@@ -10331,17 +10341,17 @@ function parse(value2, root, parent, rule, rules, rulesets, pseudo, points, decl
           case 59:
             characters3 += ";";
           default:
-            append(reference = ruleset(characters3, root, parent, index, offset, rules, points, type, props5 = [], children = [], length3), rulesets);
+            append(reference = ruleset(characters3, root, parent, index, offset, rules, points, type, props4 = [], children = [], length3), rulesets);
             if (character3 === 123)
               if (offset === 0)
-                parse(characters3, root, reference, reference, props5, rulesets, length3, points, children);
+                parse(characters3, root, reference, reference, props4, rulesets, length3, points, children);
               else
                 switch (atrule === 99 && charat(characters3, 3) === 110 ? 100 : atrule) {
                   case 100:
                   case 108:
                   case 109:
                   case 115:
-                    parse(value2, reference, reference, rule && append(ruleset(value2, reference, reference, 0, 0, rules, points, type, rules, props5 = [], length3), children), rules, children, length3, points, rule ? props5 : children);
+                    parse(value2, reference, reference, rule && append(ruleset(value2, reference, reference, 0, 0, rules, points, type, rules, props4 = [], length3), children), rules, children, length3, points, rule ? props4 : children);
                     break;
                   default:
                     parse(characters3, reference, reference, reference, [""], children, 0, points, children);
@@ -10377,15 +10387,15 @@ function parse(value2, root, parent, rule, rules, rulesets, pseudo, points, decl
     }
   return rulesets;
 }
-function ruleset(value2, root, parent, index, offset, rules, points, type, props5, children, length3) {
+function ruleset(value2, root, parent, index, offset, rules, points, type, props4, children, length3) {
   var post = offset - 1;
   var rule = offset === 0 ? rules : [""];
   var size = sizeof(rule);
   for (var i = 0, j = 0, k = 0; i < index; ++i)
     for (var x = 0, y = substr(value2, post + 1, post = abs(j = points[i])), z = value2; x < size; ++x)
       if (z = trim(j > 0 ? rule[x] + " " + y : replace(y, /&\f/g, rule[x])))
-        props5[k++] = z;
-  return node(value2, root, parent, offset === 0 ? RULESET : type, props5, children, length3);
+        props4[k++] = z;
+  return node(value2, root, parent, offset === 0 ? RULESET : type, props4, children, length3);
 }
 function comment(value2, root, parent) {
   return node(value2, root, parent, COMMENT, from(char()), substr(value2, 2, -2), 0);
@@ -11367,7 +11377,7 @@ var init_init = __esm({
       const emotion2 = options.emotion || emotion;
       emotion2.injectGlobal({ ":root": config.CSS_VARS });
     };
-    setClass = (props5, options = UPDATE_OPTIONS) => {
+    setClass = (props4, options = UPDATE_OPTIONS) => {
     };
   }
 });
@@ -11522,9 +11532,9 @@ var require_on = __commonJS({
       }
     };
     var applyAnimationFrame = (element, options) => {
-      const { props: props5, on: on2, __ref: ref } = element;
+      const { props: props4, on: on2, __ref: ref } = element;
       const { frameListeners } = ref.root.data;
-      if (frameListeners && ((on2 == null ? void 0 : on2.frame) || (props5 == null ? void 0 : props5.onFrame))) {
+      if (frameListeners && ((on2 == null ? void 0 : on2.frame) || (props4 == null ? void 0 : props4.onFrame))) {
         const { registerFrameListener } = element.context.utils;
         if (registerFrameListener)
           registerFrameListener(element);
@@ -11841,132 +11851,132 @@ var init_Block = __esm({
       hide: (el, s, ctx) => !!ctx.utils.exec(el.props.hide, el, s) && {
         display: "none !important"
       },
-      height: ({ props: props5, deps }) => deps.transformSizeRatio("height", props5),
-      width: ({ props: props5, deps }) => deps.transformSizeRatio("width", props5),
-      boxSizing: ({ props: props5, deps }) => !deps.isUndefined(props5.boxSizing) ? { boxSizing: props5.boxSizing } : { boxSizing: "border-box" },
-      boxSize: ({ props: props5, deps }) => {
-        if (!deps.isString(props5.boxSize))
+      height: ({ props: props4, deps }) => deps.transformSizeRatio("height", props4),
+      width: ({ props: props4, deps }) => deps.transformSizeRatio("width", props4),
+      boxSizing: ({ props: props4, deps }) => !deps.isUndefined(props4.boxSizing) ? { boxSizing: props4.boxSizing } : { boxSizing: "border-box" },
+      boxSize: ({ props: props4, deps }) => {
+        if (!deps.isString(props4.boxSize))
           return;
-        const [height, width] = props5.boxSize.split(" ");
+        const [height, width] = props4.boxSize.split(" ");
         return {
           ...deps.transformSize("height", height),
           ...deps.transformSize("width", width || height)
         };
       },
-      inlineSize: ({ props: props5, deps }) => deps.transformSizeRatio("inlineSize", props5),
-      blockSize: ({ props: props5, deps }) => deps.transformSizeRatio("blockSize", props5),
-      minWidth: ({ props: props5, deps }) => deps.transformSizeRatio("minWidth", props5),
-      maxWidth: ({ props: props5, deps }) => deps.transformSizeRatio("maxWidth", props5),
-      widthRange: ({ props: props5, deps }) => {
-        if (!deps.isString(props5.widthRange))
+      inlineSize: ({ props: props4, deps }) => deps.transformSizeRatio("inlineSize", props4),
+      blockSize: ({ props: props4, deps }) => deps.transformSizeRatio("blockSize", props4),
+      minWidth: ({ props: props4, deps }) => deps.transformSizeRatio("minWidth", props4),
+      maxWidth: ({ props: props4, deps }) => deps.transformSizeRatio("maxWidth", props4),
+      widthRange: ({ props: props4, deps }) => {
+        if (!deps.isString(props4.widthRange))
           return;
-        const [minWidth, maxWidth] = props5.widthRange.split(" ");
+        const [minWidth, maxWidth] = props4.widthRange.split(" ");
         return {
           ...deps.transformSize("minWidth", minWidth),
           ...deps.transformSize("maxWidth", maxWidth || minWidth)
         };
       },
-      minHeight: ({ props: props5, deps }) => deps.transformSizeRatio("minHeight", props5),
-      maxHeight: ({ props: props5, deps }) => deps.transformSizeRatio("maxHeight", props5),
-      heightRange: ({ props: props5, deps }) => {
-        if (!deps.isString(props5.heightRange))
+      minHeight: ({ props: props4, deps }) => deps.transformSizeRatio("minHeight", props4),
+      maxHeight: ({ props: props4, deps }) => deps.transformSizeRatio("maxHeight", props4),
+      heightRange: ({ props: props4, deps }) => {
+        if (!deps.isString(props4.heightRange))
           return;
-        const [minHeight, maxHeight] = props5.heightRange.split(" ");
+        const [minHeight, maxHeight] = props4.heightRange.split(" ");
         return {
           ...deps.transformSize("minHeight", minHeight),
           ...deps.transformSize("maxHeight", maxHeight || minHeight)
         };
       },
-      size: ({ props: props5, deps }) => {
-        if (!deps.isString(props5.size))
+      size: ({ props: props4, deps }) => {
+        if (!deps.isString(props4.size))
           return;
-        const [inlineSize, blockSize] = props5.size.split(" ");
+        const [inlineSize, blockSize] = props4.size.split(" ");
         return {
           ...deps.transformSizeRatio("inlineSize", inlineSize),
           ...deps.transformSizeRatio("blockSize", blockSize || inlineSize)
         };
       },
-      minBlockSize: ({ props: props5, deps }) => deps.transformSizeRatio("minBlockSize", props5),
-      minInlineSize: ({ props: props5, deps }) => deps.transformSizeRatio("minInlineSize", props5),
-      maxBlockSize: ({ props: props5, deps }) => deps.transformSizeRatio("maxBlockSize", props5),
-      maxInlineSize: ({ props: props5, deps }) => deps.transformSizeRatio("maxInlineSize", props5),
-      minSize: ({ props: props5, deps }) => {
-        if (!deps.isString(props5.minSize))
+      minBlockSize: ({ props: props4, deps }) => deps.transformSizeRatio("minBlockSize", props4),
+      minInlineSize: ({ props: props4, deps }) => deps.transformSizeRatio("minInlineSize", props4),
+      maxBlockSize: ({ props: props4, deps }) => deps.transformSizeRatio("maxBlockSize", props4),
+      maxInlineSize: ({ props: props4, deps }) => deps.transformSizeRatio("maxInlineSize", props4),
+      minSize: ({ props: props4, deps }) => {
+        if (!deps.isString(props4.minSize))
           return;
-        const [minInlineSize, minBlockSize] = props5.minSize.split(" ");
+        const [minInlineSize, minBlockSize] = props4.minSize.split(" ");
         return {
           ...deps.transformSize("minInlineSize", minInlineSize),
           ...deps.transformSize("minBlockSize", minBlockSize || minInlineSize)
         };
       },
-      maxSize: ({ props: props5, deps }) => {
-        if (!deps.isString(props5.maxSize))
+      maxSize: ({ props: props4, deps }) => {
+        if (!deps.isString(props4.maxSize))
           return;
-        const [maxInlineSize, maxBlockSize] = props5.maxSize.split(" ");
+        const [maxInlineSize, maxBlockSize] = props4.maxSize.split(" ");
         return {
           ...deps.transformSize("maxInlineSize", maxInlineSize),
           ...deps.transformSize("maxBlockSize", maxBlockSize || maxInlineSize)
         };
       },
-      borderWidth: ({ props: props5, deps }) => deps.transformSizeRatio("borderWidth", props5),
-      padding: ({ props: props5, deps }) => deps.transformSizeRatio("padding", props5),
-      scrollPadding: ({ props: props5, deps }) => deps.transformSizeRatio("scrollPadding", props5),
-      paddingInline: ({ props: props5, deps }) => {
-        if (!deps.isString(props5.paddingInline))
+      borderWidth: ({ props: props4, deps }) => deps.transformSizeRatio("borderWidth", props4),
+      padding: ({ props: props4, deps }) => deps.transformSizeRatio("padding", props4),
+      scrollPadding: ({ props: props4, deps }) => deps.transformSizeRatio("scrollPadding", props4),
+      paddingInline: ({ props: props4, deps }) => {
+        if (!deps.isString(props4.paddingInline))
           return;
-        const [paddingInlineStart, paddingInlineEnd] = props5.paddingInline.split(" ");
+        const [paddingInlineStart, paddingInlineEnd] = props4.paddingInline.split(" ");
         return {
           ...deps.transformSize("paddingInlineStart", paddingInlineStart),
           ...deps.transformSize("paddingInlineEnd", paddingInlineEnd || paddingInlineStart)
         };
       },
-      paddingBlock: ({ props: props5, deps }) => {
-        if (!deps.isString(props5.paddingBlock))
+      paddingBlock: ({ props: props4, deps }) => {
+        if (!deps.isString(props4.paddingBlock))
           return;
-        const [paddingBlockStart, paddingBlockEnd] = props5.paddingBlock.split(" ");
+        const [paddingBlockStart, paddingBlockEnd] = props4.paddingBlock.split(" ");
         return {
           ...deps.transformSize("paddingBlockStart", paddingBlockStart),
           ...deps.transformSize("paddingBlockEnd", paddingBlockEnd || paddingBlockStart)
         };
       },
-      paddingInlineStart: ({ props: props5, deps }) => deps.transformSizeRatio("paddingInlineStart", props5),
-      paddingInlineEnd: ({ props: props5, deps }) => deps.transformSizeRatio("paddingInlineEnd", props5),
-      paddingBlockStart: ({ props: props5, deps }) => deps.transformSizeRatio("paddingBlockStart", props5),
-      paddingBlockEnd: ({ props: props5, deps }) => deps.transformSizeRatio("paddingBlockEnd", props5),
-      margin: ({ props: props5, deps }) => deps.transformSizeRatio("margin", props5),
-      marginInline: ({ props: props5, deps }) => {
-        if (!deps.isString(props5.marginInline))
+      paddingInlineStart: ({ props: props4, deps }) => deps.transformSizeRatio("paddingInlineStart", props4),
+      paddingInlineEnd: ({ props: props4, deps }) => deps.transformSizeRatio("paddingInlineEnd", props4),
+      paddingBlockStart: ({ props: props4, deps }) => deps.transformSizeRatio("paddingBlockStart", props4),
+      paddingBlockEnd: ({ props: props4, deps }) => deps.transformSizeRatio("paddingBlockEnd", props4),
+      margin: ({ props: props4, deps }) => deps.transformSizeRatio("margin", props4),
+      marginInline: ({ props: props4, deps }) => {
+        if (!deps.isString(props4.marginInline))
           return;
-        const [marginInlineStart, marginInlineEnd] = props5.marginInline.split(" ");
+        const [marginInlineStart, marginInlineEnd] = props4.marginInline.split(" ");
         return {
           ...deps.transformSize("marginInlineStart", marginInlineStart),
           ...deps.transformSize("marginInlineEnd", marginInlineEnd || marginInlineStart)
         };
       },
-      marginBlock: ({ props: props5, deps }) => {
-        if (!deps.isString(props5.marginBlock))
+      marginBlock: ({ props: props4, deps }) => {
+        if (!deps.isString(props4.marginBlock))
           return;
-        const [marginBlockStart, marginBlockEnd] = props5.marginBlock.split(" ");
+        const [marginBlockStart, marginBlockEnd] = props4.marginBlock.split(" ");
         return {
           ...deps.transformSize("marginBlockStart", marginBlockStart),
           ...deps.transformSize("marginBlockEnd", marginBlockEnd || marginBlockStart)
         };
       },
-      marginInlineStart: ({ props: props5, deps }) => deps.transformSizeRatio("marginInlineStart", props5),
-      marginInlineEnd: ({ props: props5, deps }) => deps.transformSizeRatio("marginInlineEnd", props5),
-      marginBlockStart: ({ props: props5, deps }) => deps.transformSizeRatio("marginBlockStart", props5),
-      marginBlockEnd: ({ props: props5, deps }) => deps.transformSizeRatio("marginBlockEnd", props5),
-      gap: ({ props: props5, deps }) => !deps.isUndefined(props5.gap) && {
-        gap: (0, import_scratch3.transfromGap)(props5.gap)
+      marginInlineStart: ({ props: props4, deps }) => deps.transformSizeRatio("marginInlineStart", props4),
+      marginInlineEnd: ({ props: props4, deps }) => deps.transformSizeRatio("marginInlineEnd", props4),
+      marginBlockStart: ({ props: props4, deps }) => deps.transformSizeRatio("marginBlockStart", props4),
+      marginBlockEnd: ({ props: props4, deps }) => deps.transformSizeRatio("marginBlockEnd", props4),
+      gap: ({ props: props4, deps }) => !deps.isUndefined(props4.gap) && {
+        gap: (0, import_scratch3.transfromGap)(props4.gap)
       },
-      columnGap: ({ props: props5, deps }) => !deps.isUndefined(props5.columnGap) ? deps.getSpacingBasedOnRatio(props5, "columnGap") : null,
-      rowGap: ({ props: props5, deps }) => !deps.isUndefined(props5.rowGap) ? deps.getSpacingBasedOnRatio(props5, "rowGap") : null,
-      flexWrap: ({ props: props5, deps }) => !deps.isUndefined(props5.flexWrap) && {
+      columnGap: ({ props: props4, deps }) => !deps.isUndefined(props4.columnGap) ? deps.getSpacingBasedOnRatio(props4, "columnGap") : null,
+      rowGap: ({ props: props4, deps }) => !deps.isUndefined(props4.rowGap) ? deps.getSpacingBasedOnRatio(props4, "rowGap") : null,
+      flexWrap: ({ props: props4, deps }) => !deps.isUndefined(props4.flexWrap) && {
         display: "flex",
-        flexFlow: (props5.flexFlow || "row").split(" ")[0] + " " + props5.flexWrap
+        flexFlow: (props4.flexFlow || "row").split(" ")[0] + " " + props4.flexWrap
       },
-      flexFlow: ({ props: props5, deps }) => {
-        const { flexFlow, reverse } = props5;
+      flexFlow: ({ props: props4, deps }) => {
+        const { flexFlow, reverse } = props4;
         if (!deps.isString(flexFlow))
           return;
         let [direction, wrap] = (flexFlow || "row").split(" ");
@@ -11979,10 +11989,10 @@ var init_Block = __esm({
           flexFlow: (direction || "") + (!direction.includes("-reverse") && reverse ? "-reverse" : "") + " " + (wrap || "")
         };
       },
-      flexAlign: ({ props: props5, deps }) => {
-        if (!deps.isString(props5.flexAlign))
+      flexAlign: ({ props: props4, deps }) => {
+        if (!deps.isString(props4.flexAlign))
           return;
-        const [alignItems, justifyContent] = props5.flexAlign.split(" ");
+        const [alignItems, justifyContent] = props4.flexAlign.split(" ");
         return {
           display: "flex",
           alignItems,
@@ -12002,81 +12012,81 @@ var init_Block = __esm({
       },
       class: {
         ...props,
-        display: ({ props: props5, deps }) => !deps.isUndefined(props5.display) && {
-          display: props5.display
+        display: ({ props: props4, deps }) => !deps.isUndefined(props4.display) && {
+          display: props4.display
         },
-        direction: ({ props: props5, deps }) => !deps.isUndefined(props5.direction) && {
-          direction: props5.direction
+        direction: ({ props: props4, deps }) => !deps.isUndefined(props4.direction) && {
+          direction: props4.direction
         },
-        objectFit: ({ props: props5, deps }) => !deps.isUndefined(props5.objectFit) && {
-          objectFit: props5.objectFit
+        objectFit: ({ props: props4, deps }) => !deps.isUndefined(props4.objectFit) && {
+          objectFit: props4.objectFit
         },
-        aspectRatio: ({ props: props5, deps }) => !deps.isUndefined(props5.aspectRatio) && {
-          aspectRatio: props5.aspectRatio
+        aspectRatio: ({ props: props4, deps }) => !deps.isUndefined(props4.aspectRatio) && {
+          aspectRatio: props4.aspectRatio
         },
-        gridArea: ({ props: props5, deps }) => props5.gridArea && { gridArea: props5.gridArea },
-        float: ({ props: props5, deps }) => !deps.isUndefined(props5.float) && {
-          float: props5.float
+        gridArea: ({ props: props4, deps }) => props4.gridArea && { gridArea: props4.gridArea },
+        float: ({ props: props4, deps }) => !deps.isUndefined(props4.float) && {
+          float: props4.float
         },
-        flex: ({ props: props5, deps }) => !deps.isUndefined(props5.flex) && {
-          flex: props5.flex
+        flex: ({ props: props4, deps }) => !deps.isUndefined(props4.flex) && {
+          flex: props4.flex
         },
-        flexDirection: ({ props: props5, deps }) => !deps.isUndefined(props5.flexDirection) && {
-          flexDirection: props5.flexDirection
+        flexDirection: ({ props: props4, deps }) => !deps.isUndefined(props4.flexDirection) && {
+          flexDirection: props4.flexDirection
         },
-        alignItems: ({ props: props5, deps }) => !deps.isUndefined(props5.alignItems) && {
-          alignItems: props5.alignItems
+        alignItems: ({ props: props4, deps }) => !deps.isUndefined(props4.alignItems) && {
+          alignItems: props4.alignItems
         },
-        alignContent: ({ props: props5, deps }) => !deps.isUndefined(props5.alignContent) && {
-          alignContent: props5.alignContent
+        alignContent: ({ props: props4, deps }) => !deps.isUndefined(props4.alignContent) && {
+          alignContent: props4.alignContent
         },
-        justifyContent: ({ props: props5, deps }) => !deps.isUndefined(props5.justifyContent) && {
-          justifyContent: props5.justifyContent
+        justifyContent: ({ props: props4, deps }) => !deps.isUndefined(props4.justifyContent) && {
+          justifyContent: props4.justifyContent
         },
-        justifyItems: ({ props: props5, deps }) => !deps.isUndefined(props5.justifyItems) && {
-          justifyItems: props5.justifyItems
+        justifyItems: ({ props: props4, deps }) => !deps.isUndefined(props4.justifyItems) && {
+          justifyItems: props4.justifyItems
         },
-        alignSelf: ({ props: props5, deps }) => !deps.isUndefined(props5.alignSelf) && {
-          alignSelf: props5.alignSelf
+        alignSelf: ({ props: props4, deps }) => !deps.isUndefined(props4.alignSelf) && {
+          alignSelf: props4.alignSelf
         },
-        order: ({ props: props5, deps }) => !deps.isUndefined(props5.order) && {
-          order: props5.order
+        order: ({ props: props4, deps }) => !deps.isUndefined(props4.order) && {
+          order: props4.order
         },
-        gridColumn: ({ props: props5, deps }) => !deps.isUndefined(props5.gridColumn) && {
-          gridColumn: props5.gridColumn
+        gridColumn: ({ props: props4, deps }) => !deps.isUndefined(props4.gridColumn) && {
+          gridColumn: props4.gridColumn
         },
-        gridColumnStart: ({ props: props5, deps }) => !deps.isUndefined(props5.gridColumnStart) && {
-          gridColumnStart: props5.gridColumnStart
+        gridColumnStart: ({ props: props4, deps }) => !deps.isUndefined(props4.gridColumnStart) && {
+          gridColumnStart: props4.gridColumnStart
         },
-        gridRow: ({ props: props5, deps }) => !deps.isUndefined(props5.gridRow) && {
-          gridRow: props5.gridRow
+        gridRow: ({ props: props4, deps }) => !deps.isUndefined(props4.gridRow) && {
+          gridRow: props4.gridRow
         },
-        gridRowStart: ({ props: props5, deps }) => !deps.isUndefined(props5.gridRowStart) && {
-          gridRowStart: props5.gridRowStart
+        gridRowStart: ({ props: props4, deps }) => !deps.isUndefined(props4.gridRowStart) && {
+          gridRowStart: props4.gridRowStart
         },
-        resize: ({ props: props5, deps }) => !deps.isUndefined(props5.resize) && {
-          resize: props5.resize
+        resize: ({ props: props4, deps }) => !deps.isUndefined(props4.resize) && {
+          resize: props4.resize
         },
-        verticalAlign: ({ props: props5, deps }) => !deps.isUndefined(props5.verticalAlign) && {
-          verticalAlign: props5.verticalAlign
+        verticalAlign: ({ props: props4, deps }) => !deps.isUndefined(props4.verticalAlign) && {
+          verticalAlign: props4.verticalAlign
         },
-        columns: ({ props: props5, deps }) => !deps.isUndefined(props5.columns) && {
-          columns: props5.columns
+        columns: ({ props: props4, deps }) => !deps.isUndefined(props4.columns) && {
+          columns: props4.columns
         },
-        columnRule: ({ props: props5, deps }) => !deps.isUndefined(props5.columnRule) && {
-          columnRule: props5.columnRule
+        columnRule: ({ props: props4, deps }) => !deps.isUndefined(props4.columnRule) && {
+          columnRule: props4.columnRule
         },
-        columnWidth: ({ props: props5, deps }) => !deps.isUndefined(props5.columnWidth) && {
-          columnWidth: props5.columnWidth
+        columnWidth: ({ props: props4, deps }) => !deps.isUndefined(props4.columnWidth) && {
+          columnWidth: props4.columnWidth
         },
-        columnSpan: ({ props: props5, deps }) => !deps.isUndefined(props5.columnSpan) && {
-          columnSpan: props5.columnSpan
+        columnSpan: ({ props: props4, deps }) => !deps.isUndefined(props4.columnSpan) && {
+          columnSpan: props4.columnSpan
         },
-        columnFill: ({ props: props5, deps }) => !deps.isUndefined(props5.columnFill) && {
-          columnFill: props5.columnFill
+        columnFill: ({ props: props4, deps }) => !deps.isUndefined(props4.columnFill) && {
+          columnFill: props4.columnFill
         },
-        columnCount: ({ props: props5, deps }) => !deps.isUndefined(props5.columnCount) && {
-          columnCount: props5.columnCount
+        columnCount: ({ props: props4, deps }) => !deps.isUndefined(props4.columnCount) && {
+          columnCount: props4.columnCount
         }
       }
     };
@@ -12114,7 +12124,7 @@ var init_Direction = __esm({
         direction: "ltr"
       },
       class: {
-        direction: ({ props: props5 }) => ({ direction: props5.direction })
+        direction: ({ props: props4 }) => ({ direction: props4.direction })
       }
     };
   }
@@ -12131,8 +12141,8 @@ var init_Flex = __esm({
         display: "flex"
       },
       class: {
-        flow: ({ props: props5 }) => {
-          const { flow, reverse } = props5;
+        flow: ({ props: props4 }) => {
+          const { flow, reverse } = props4;
           if (!(0, import_utils4.isString)(flow))
             return;
           let [direction, wrap] = (flow || "row").split(" ");
@@ -12144,11 +12154,11 @@ var init_Flex = __esm({
             flexFlow: (direction || "") + (!direction.includes("-reverse") && reverse ? "-reverse" : "") + " " + (wrap || "")
           };
         },
-        wrap: ({ props: props5 }) => props5.wrap && { flexWrap: props5.wrap },
-        align: ({ props: props5 }) => {
-          if (!(0, import_utils4.isString)(props5.align))
+        wrap: ({ props: props4 }) => props4.wrap && { flexWrap: props4.wrap },
+        align: ({ props: props4 }) => {
+          if (!(0, import_utils4.isString)(props4.align))
             return;
-          const [alignItems, justifyContent] = props5.align.split(" ");
+          const [alignItems, justifyContent] = props4.align.split(" ");
           return { alignItems, justifyContent };
         }
       }
@@ -12166,20 +12176,20 @@ var init_Grid = __esm({
       deps: { getSpacingBasedOnRatio: import_scratch4.getSpacingBasedOnRatio },
       props: { display: "grid" },
       class: {
-        area: ({ props: props5 }) => props5.area ? { gridArea: props5.area } : null,
-        template: ({ props: props5 }) => props5.template ? { gridTemplate: props5.template } : null,
-        templateAreas: ({ props: props5 }) => props5.templateAreas ? { gridTemplateAreas: props5.templateAreas } : null,
-        column: ({ props: props5 }) => props5.column ? { gridColumn: props5.column } : null,
-        columns: ({ props: props5 }) => props5.columns ? { gridTemplateColumns: props5.columns } : null,
-        templateColumns: ({ props: props5 }) => props5.templateColumns ? { gridTemplateColumns: props5.templateColumns } : null,
-        autoColumns: ({ props: props5 }) => props5.autoColumns ? { gridAutoColumns: props5.autoColumns } : null,
-        columnStart: ({ props: props5 }) => props5.columnStart ? { gridColumnStart: props5.columnStart } : null,
-        row: ({ props: props5 }) => props5.row ? { gridRow: props5.row } : null,
-        rows: ({ props: props5 }) => props5.rows ? { gridTemplateRows: props5.rows } : null,
-        templateRows: ({ props: props5 }) => props5.templateRows ? { gridTemplateRows: props5.templateRows } : null,
-        autoRows: ({ props: props5 }) => props5.autoRows ? { gridAutoRows: props5.autoRows } : null,
-        rowStart: ({ props: props5 }) => props5.rowStart ? { gridRowStart: props5.rowStart } : null,
-        autoFlow: ({ props: props5 }) => props5.autoFlow ? { gridAutoFlow: props5.autoFlow } : null
+        area: ({ props: props4 }) => props4.area ? { gridArea: props4.area } : null,
+        template: ({ props: props4 }) => props4.template ? { gridTemplate: props4.template } : null,
+        templateAreas: ({ props: props4 }) => props4.templateAreas ? { gridTemplateAreas: props4.templateAreas } : null,
+        column: ({ props: props4 }) => props4.column ? { gridColumn: props4.column } : null,
+        columns: ({ props: props4 }) => props4.columns ? { gridTemplateColumns: props4.columns } : null,
+        templateColumns: ({ props: props4 }) => props4.templateColumns ? { gridTemplateColumns: props4.templateColumns } : null,
+        autoColumns: ({ props: props4 }) => props4.autoColumns ? { gridAutoColumns: props4.autoColumns } : null,
+        columnStart: ({ props: props4 }) => props4.columnStart ? { gridColumnStart: props4.columnStart } : null,
+        row: ({ props: props4 }) => props4.row ? { gridRow: props4.row } : null,
+        rows: ({ props: props4 }) => props4.rows ? { gridTemplateRows: props4.rows } : null,
+        templateRows: ({ props: props4 }) => props4.templateRows ? { gridTemplateRows: props4.templateRows } : null,
+        autoRows: ({ props: props4 }) => props4.autoRows ? { gridAutoRows: props4.autoRows } : null,
+        rowStart: ({ props: props4 }) => props4.rowStart ? { gridRowStart: props4.rowStart } : null,
+        autoFlow: ({ props: props4 }) => props4.autoFlow ? { gridAutoFlow: props4.autoFlow } : null
       }
     };
   }
@@ -12194,9 +12204,9 @@ var init_Img = __esm({
       tag: "img",
       attr: {
         src: (el) => {
-          const { props: props5, context } = el;
+          const { props: props4, context } = el;
           const { exec: exec7, isString: isString12, replaceLiteralsWithObjectFields: replaceLiteralsWithObjectFields3 } = context.utils;
-          let src = (props5.preSrc || "") + exec7(props5.src, el);
+          let src = (props4.preSrc || "") + exec7(props4.src, el);
           if (isString12(src) && src.includes("{{")) {
             src = replaceLiteralsWithObjectFields3(src, el.state);
           }
@@ -12211,8 +12221,8 @@ var init_Img = __esm({
           if (file)
             return file.content && file.content.src;
         },
-        alt: ({ props: props5 }) => props5.alt,
-        title: ({ props: props5 }) => props5.title || props5.alt
+        alt: ({ props: props4 }) => props4.alt,
+        title: ({ props: props4 }) => props4.title || props4.alt
       }
     };
   }
@@ -12226,9 +12236,9 @@ var init_Form = __esm({
     Form = {
       tag: "form",
       attr: {
-        action: ({ props: props5 }) => props5.action,
-        method: ({ props: props5 }) => props5.method,
-        enctype: ({ props: props5 }) => props5.enctype
+        action: ({ props: props4 }) => props4.action,
+        method: ({ props: props4 }) => props4.method,
+        enctype: ({ props: props4 }) => props4.enctype
       }
     };
   }
@@ -12248,24 +12258,24 @@ var init_Timing = __esm({
         transformDuration: import_scratch5.transformDuration
       },
       class: {
-        transition: ({ props: props5, deps }) => !(0, import_utils5.isUndefined)(props5.transition) && {
-          transition: deps.splitTransition(props5.transition)
+        transition: ({ props: props4, deps }) => !(0, import_utils5.isUndefined)(props4.transition) && {
+          transition: deps.splitTransition(props4.transition)
         },
-        willChange: ({ props: props5 }) => !(0, import_utils5.isUndefined)(props5.willChange) && {
-          willChange: props5.willChange
+        willChange: ({ props: props4 }) => !(0, import_utils5.isUndefined)(props4.willChange) && {
+          willChange: props4.willChange
         },
-        transitionDuration: ({ props: props5, deps }) => !(0, import_utils5.isUndefined)(props5.transitionDuration) && {
-          transitionDuration: deps.transformDuration(props5.transitionDuration)
+        transitionDuration: ({ props: props4, deps }) => !(0, import_utils5.isUndefined)(props4.transitionDuration) && {
+          transitionDuration: deps.transformDuration(props4.transitionDuration)
         },
-        transitionDelay: ({ props: props5, deps }) => !(0, import_utils5.isUndefined)(props5.transitionDelay) && {
-          transitionDelay: deps.transformDuration(props5.transitionDelay)
+        transitionDelay: ({ props: props4, deps }) => !(0, import_utils5.isUndefined)(props4.transitionDelay) && {
+          transitionDelay: deps.transformDuration(props4.transitionDelay)
         },
-        transitionTimingFunction: ({ props: props5, deps }) => !(0, import_utils5.isUndefined)(props5.transitionTimingFunction) && {
-          transitionTimingFunction: deps.getTimingFunction(props5.transitionTimingFunction)
+        transitionTimingFunction: ({ props: props4, deps }) => !(0, import_utils5.isUndefined)(props4.transitionTimingFunction) && {
+          transitionTimingFunction: deps.getTimingFunction(props4.transitionTimingFunction)
         },
-        transitionProperty: ({ props: props5 }) => !(0, import_utils5.isUndefined)(props5.transitionProperty) && {
-          transitionProperty: props5.transitionProperty,
-          willChange: props5.transitionProperty
+        transitionProperty: ({ props: props4 }) => !(0, import_utils5.isUndefined)(props4.transitionProperty) && {
+          transitionProperty: props4.transitionProperty,
+          willChange: props4.transitionProperty
         }
       }
     };
@@ -12288,11 +12298,11 @@ var init_style = __esm({
       26: { boxShadow: `rgba(0,0,0,.10) 0 14${CONFIG2.UNIT.default} 26${CONFIG2.UNIT.default}` },
       42: { boxShadow: `rgba(0,0,0,.10) 0 20${CONFIG2.UNIT.default} 42${CONFIG2.UNIT.default}` }
     };
-    getComputedBackgroundColor = ({ props: props5 }) => {
-      return (0, import_scratch6.getColor)(props5.shapeDirectionColor) || (0, import_scratch6.getColor)(props5.borderColor) || (0, import_scratch6.getColor)(props5.backgroundColor) || (0, import_scratch6.getColor)(props5.background);
+    getComputedBackgroundColor = ({ props: props4 }) => {
+      return (0, import_scratch6.getColor)(props4.shapeDirectionColor) || (0, import_scratch6.getColor)(props4.borderColor) || (0, import_scratch6.getColor)(props4.backgroundColor) || (0, import_scratch6.getColor)(props4.background);
     };
-    inheritTransition = ({ props: props5, deps }) => {
-      const exec7 = Timing.class.transition({ props: props5, deps });
+    inheritTransition = ({ props: props4, deps }) => {
+      const exec7 = Timing.class.transition({ props: props4, deps });
       return exec7 && exec7.transition;
     };
     SHAPES = {
@@ -12302,16 +12312,16 @@ var init_style = __esm({
       tv: {
         borderRadius: "1.15em/2.5em"
       },
-      tooltip: ({ props: props5, deps }) => ({
-        position: props5.position || "relative",
+      tooltip: ({ props: props4, deps }) => ({
+        position: props4.position || "relative",
         "&:before": {
           content: '""',
           display: "block",
           width: "0px",
           height: "0px",
           border: ".35em solid",
-          borderColor: getComputedBackgroundColor({ props: props5, deps }),
-          transition: inheritTransition({ props: props5, deps }),
+          borderColor: getComputedBackgroundColor({ props: props4, deps }),
+          transition: inheritTransition({ props: props4, deps }),
           transitionProperty: "border-color",
           position: "absolute",
           borderRadius: ".15em"
@@ -12347,13 +12357,13 @@ var init_style = __esm({
           }
         }
       },
-      tag: ({ props: props5, deps }) => ({
+      tag: ({ props: props4, deps }) => ({
         position: "relative",
         "&:before": {
           content: '""',
           display: "block",
-          background: getComputedBackgroundColor({ props: props5, deps }),
-          transition: inheritTransition({ props: props5, deps }),
+          background: getComputedBackgroundColor({ props: props4, deps }),
+          transition: inheritTransition({ props: props4, deps }),
           transitionProperty: "background",
           borderRadius: ".25em",
           position: "absolute",
@@ -12394,7 +12404,7 @@ var init_style = __esm({
           }
         }
       },
-      hexagon: ({ props: props5, deps }) => ({
+      hexagon: ({ props: props4, deps }) => ({
         position: "relative",
         "&:before, &:after": {
           content: '""',
@@ -12406,8 +12416,8 @@ var init_style = __esm({
           top: "50%",
           transformOrigin: "50% 50%",
           height: "73%",
-          background: getComputedBackgroundColor({ props: props5, deps }),
-          transition: inheritTransition({ props: props5, deps }),
+          background: getComputedBackgroundColor({ props: props4, deps }),
+          transition: inheritTransition({ props: props4, deps }),
           transitionProperty: "background"
         },
         "&:before": {
@@ -12419,7 +12429,7 @@ var init_style = __esm({
           transform: "translate3d(-50%, -50%, 1px) rotate(45deg)"
         }
       }),
-      chevron: ({ props: props5, deps }) => ({
+      chevron: ({ props: props4, deps }) => ({
         position: "relative",
         "&:before, &:after": {
           content: '""',
@@ -12429,14 +12439,14 @@ var init_style = __esm({
           aspectRatio: "1/1",
           top: "50%",
           transformOrigin: "50% 50%",
-          transition: inheritTransition({ props: props5, deps }),
+          transition: inheritTransition({ props: props4, deps }),
           transitionProperty: "background"
         },
         "&:before": {
-          background: `linear-gradient(225deg, ${getComputedBackgroundColor({ props: props5, deps })} 25%, transparent 25%), linear-gradient(315deg, ${getComputedBackgroundColor({ props: props5, deps })} 25%, transparent 25%)`
+          background: `linear-gradient(225deg, ${getComputedBackgroundColor({ props: props4, deps })} 25%, transparent 25%), linear-gradient(315deg, ${getComputedBackgroundColor({ props: props4, deps })} 25%, transparent 25%)`
         },
         "&:after": {
-          background: getComputedBackgroundColor({ props: props5, deps }),
+          background: getComputedBackgroundColor({ props: props4, deps }),
           borderRadius: ".25em"
         }
       }),
@@ -12495,53 +12505,53 @@ var init_Theme = __esm({
         transformBackgroundImage: import_scratch7.transformBackgroundImage
       },
       class: {
-        depth: ({ props: props5, deps }) => !(0, import_utils6.isUndefined)(props5.depth) && deps.depth[props5.depth],
+        depth: ({ props: props4, deps }) => !(0, import_utils6.isUndefined)(props4.depth) && deps.depth[props4.depth],
         theme: (element) => {
-          const { props: props5, deps } = element;
+          const { props: props4, deps } = element;
           const globalTheme = deps.getSystemGlobalTheme(element);
-          if (!props5.theme)
+          if (!props4.theme)
             return;
-          const hasSubtheme = props5.theme.includes(" ") && !props5.theme.includes("@");
-          const globalThemeForced = `@${props5.themeModifier || globalTheme}`;
+          const hasSubtheme = props4.theme.includes(" ") && !props4.theme.includes("@");
+          const globalThemeForced = `@${props4.themeModifier || globalTheme}`;
           if (hasSubtheme) {
-            const themeAppliedInVal = props5.theme.split(" ");
+            const themeAppliedInVal = props4.theme.split(" ");
             themeAppliedInVal.splice(1, 0, globalThemeForced);
             return deps.getMediaTheme(themeAppliedInVal);
-          } else if (props5.theme.includes("@{globalTheme}"))
-            props5.theme.replace("@{globalTheme}", globalThemeForced);
-          return deps.getMediaTheme(props5.theme, `@${props5.themeModifier || globalTheme}`);
+          } else if (props4.theme.includes("@{globalTheme}"))
+            props4.theme.replace("@{globalTheme}", globalThemeForced);
+          return deps.getMediaTheme(props4.theme, `@${props4.themeModifier || globalTheme}`);
         },
         color: (element) => {
-          const { props: props5, deps } = element;
+          const { props: props4, deps } = element;
           const globalTheme = deps.getSystemGlobalTheme(element);
-          if (!props5.color)
+          if (!props4.color)
             return;
           return {
-            color: deps.getMediaColor(props5.color, globalTheme)
+            color: deps.getMediaColor(props4.color, globalTheme)
           };
         },
         background: (element) => {
-          const { props: props5, deps } = element;
+          const { props: props4, deps } = element;
           const globalTheme = deps.getSystemGlobalTheme(element);
-          if (!props5.background)
+          if (!props4.background)
             return;
           return {
-            background: deps.getMediaColor(props5.background, globalTheme)
+            background: deps.getMediaColor(props4.background, globalTheme)
           };
         },
         backgroundColor: (element) => {
-          const { props: props5, deps } = element;
+          const { props: props4, deps } = element;
           const globalTheme = deps.getSystemGlobalTheme(element);
-          if (!props5.backgroundColor)
+          if (!props4.backgroundColor)
             return;
           return {
-            backgroundColor: deps.getMediaColor(props5.backgroundColor, globalTheme)
+            backgroundColor: deps.getMediaColor(props4.backgroundColor, globalTheme)
           };
         },
         backgroundImage: (element, s, context) => {
-          const { props: props5, deps } = element;
+          const { props: props4, deps } = element;
           const globalTheme = deps.getSystemGlobalTheme(element);
-          let val = props5.backgroundImage;
+          let val = props4.backgroundImage;
           if (!val)
             return;
           const file = context.files && context.files[val];
@@ -12551,98 +12561,98 @@ var init_Theme = __esm({
             backgroundImage: deps.transformBackgroundImage(val, globalTheme)
           };
         },
-        backgroundSize: ({ props: props5 }) => !(0, import_utils6.isUndefined)(props5.backgroundSize) ? {
-          backgroundSize: props5.backgroundSize
+        backgroundSize: ({ props: props4 }) => !(0, import_utils6.isUndefined)(props4.backgroundSize) ? {
+          backgroundSize: props4.backgroundSize
         } : null,
-        backgroundPosition: ({ props: props5 }) => !(0, import_utils6.isUndefined)(props5.backgroundPosition) ? {
-          backgroundPosition: props5.backgroundPosition
+        backgroundPosition: ({ props: props4 }) => !(0, import_utils6.isUndefined)(props4.backgroundPosition) ? {
+          backgroundPosition: props4.backgroundPosition
         } : null,
-        backgroundRepeat: ({ props: props5 }) => !(0, import_utils6.isUndefined)(props5.backgroundRepeat) ? {
-          backgroundRepeat: props5.backgroundRepeat
+        backgroundRepeat: ({ props: props4 }) => !(0, import_utils6.isUndefined)(props4.backgroundRepeat) ? {
+          backgroundRepeat: props4.backgroundRepeat
         } : null,
-        textStroke: ({ props: props5, deps }) => !(0, import_utils6.isUndefined)(props5.textStroke) ? {
-          WebkitTextStroke: deps.transformTextStroke(props5.textStroke)
+        textStroke: ({ props: props4, deps }) => !(0, import_utils6.isUndefined)(props4.textStroke) ? {
+          WebkitTextStroke: deps.transformTextStroke(props4.textStroke)
         } : null,
-        outline: ({ props: props5, deps }) => !(0, import_utils6.isUndefined)(props5.outline) && {
-          outline: deps.transformBorder(props5.outline)
+        outline: ({ props: props4, deps }) => !(0, import_utils6.isUndefined)(props4.outline) && {
+          outline: deps.transformBorder(props4.outline)
         },
-        outlineOffset: ({ props: props5, deps }) => deps.transformSizeRatio("outlineOffset", props5),
-        border: ({ props: props5, deps }) => !(0, import_utils6.isUndefined)(props5.border) && {
-          border: deps.transformBorder(props5.border)
+        outlineOffset: ({ props: props4, deps }) => deps.transformSizeRatio("outlineOffset", props4),
+        border: ({ props: props4, deps }) => !(0, import_utils6.isUndefined)(props4.border) && {
+          border: deps.transformBorder(props4.border)
         },
         borderColor: (element) => {
-          const { props: props5, deps } = element;
+          const { props: props4, deps } = element;
           const globalTheme = deps.getSystemGlobalTheme(element);
-          if (!props5.borderColor)
+          if (!props4.borderColor)
             return;
           return {
-            borderColor: deps.getMediaColor(props5.borderColor, globalTheme)
+            borderColor: deps.getMediaColor(props4.borderColor, globalTheme)
           };
         },
-        borderStyle: ({ props: props5 }) => !(0, import_utils6.isUndefined)(props5.borderStyle) && {
-          borderStyle: props5.borderStyle
+        borderStyle: ({ props: props4 }) => !(0, import_utils6.isUndefined)(props4.borderStyle) && {
+          borderStyle: props4.borderStyle
         },
-        borderLeft: ({ props: props5, deps }) => !(0, import_utils6.isUndefined)(props5.borderLeft) && {
-          borderLeft: deps.transformBorder(props5.borderLeft)
+        borderLeft: ({ props: props4, deps }) => !(0, import_utils6.isUndefined)(props4.borderLeft) && {
+          borderLeft: deps.transformBorder(props4.borderLeft)
         },
-        borderTop: ({ props: props5, deps }) => !(0, import_utils6.isUndefined)(props5.borderTop) && {
-          borderTop: deps.transformBorder(props5.borderTop)
+        borderTop: ({ props: props4, deps }) => !(0, import_utils6.isUndefined)(props4.borderTop) && {
+          borderTop: deps.transformBorder(props4.borderTop)
         },
-        borderRight: ({ props: props5, deps }) => !(0, import_utils6.isUndefined)(props5.borderRight) && {
-          borderRight: deps.transformBorder(props5.borderRight)
+        borderRight: ({ props: props4, deps }) => !(0, import_utils6.isUndefined)(props4.borderRight) && {
+          borderRight: deps.transformBorder(props4.borderRight)
         },
-        borderBottom: ({ props: props5, deps }) => !(0, import_utils6.isUndefined)(props5.borderBottom) && {
-          borderBottom: deps.transformBorder(props5.borderBottom)
+        borderBottom: ({ props: props4, deps }) => !(0, import_utils6.isUndefined)(props4.borderBottom) && {
+          borderBottom: deps.transformBorder(props4.borderBottom)
         },
         shadow: (element) => {
-          const { props: props5, deps } = element;
+          const { props: props4, deps } = element;
           const globalTheme = deps.getSystemGlobalTheme(element);
-          if (!props5.backgroundImage)
+          if (!props4.backgroundImage)
             return;
           return {
-            boxShadow: deps.transformShadow(props5.shadow, globalTheme)
+            boxShadow: deps.transformShadow(props4.shadow, globalTheme)
           };
         },
         // boxShadow: ({ props, deps }) => isString(props.boxShadow) && ({
         //   boxShadow: deps.transformBoxShadow(props.boxShadow)
         // }),
         boxShadow: (element, state, context) => {
-          const { props: props5, deps } = element;
-          if (!(0, import_utils6.isString)(props5.boxShadow))
+          const { props: props4, deps } = element;
+          if (!(0, import_utils6.isString)(props4.boxShadow))
             return;
-          const [val, hasImportant] = props5.boxShadow.split("!importan");
+          const [val, hasImportant] = props4.boxShadow.split("!importan");
           const globalTheme = getSystemGlobalTheme(element);
           const important = hasImportant ? " !important" : "";
           return {
             boxShadow: deps.transformBoxShadow(val.trim(), globalTheme) + important
           };
         },
-        textShadow: ({ props: props5, deps, context }) => !(0, import_utils6.isUndefined)(props5.textShadow) && {
-          textShadow: deps.transformBoxShadow(props5.textShadow, context.designSystem.globalTheme)
+        textShadow: ({ props: props4, deps, context }) => !(0, import_utils6.isUndefined)(props4.textShadow) && {
+          textShadow: deps.transformBoxShadow(props4.textShadow, context.designSystem.globalTheme)
         },
-        backdropFilter: ({ props: props5, deps }) => !(0, import_utils6.isUndefined)(props5.backdropFilter) && {
-          backdropFilter: props5.backdropFilter
+        backdropFilter: ({ props: props4, deps }) => !(0, import_utils6.isUndefined)(props4.backdropFilter) && {
+          backdropFilter: props4.backdropFilter
         },
-        caretColor: ({ props: props5 }) => !(0, import_utils6.isUndefined)(props5.caretColor) && {
-          caretColor: props5.caretColor
+        caretColor: ({ props: props4 }) => !(0, import_utils6.isUndefined)(props4.caretColor) && {
+          caretColor: props4.caretColor
         },
-        opacity: ({ props: props5 }) => !(0, import_utils6.isUndefined)(props5.opacity) && {
-          opacity: props5.opacity
+        opacity: ({ props: props4 }) => !(0, import_utils6.isUndefined)(props4.opacity) && {
+          opacity: props4.opacity
         },
-        visibility: ({ props: props5 }) => !(0, import_utils6.isUndefined)(props5.visibility) && {
-          visibility: props5.visibility
+        visibility: ({ props: props4 }) => !(0, import_utils6.isUndefined)(props4.visibility) && {
+          visibility: props4.visibility
         },
-        columnRule: ({ props: props5, deps }) => !(0, import_utils6.isUndefined)(props5.columnRule) && {
-          columnRule: deps.transformBorder(props5.columnRule)
+        columnRule: ({ props: props4, deps }) => !(0, import_utils6.isUndefined)(props4.columnRule) && {
+          columnRule: deps.transformBorder(props4.columnRule)
         },
-        filter: ({ props: props5, deps }) => !(0, import_utils6.isUndefined)(props5.filter) && {
-          filter: props5.filter
+        filter: ({ props: props4, deps }) => !(0, import_utils6.isUndefined)(props4.filter) && {
+          filter: props4.filter
         },
-        mixBlendMode: ({ props: props5, deps }) => !(0, import_utils6.isUndefined)(props5.mixBlendMode) && {
-          mixBlendMode: props5.mixBlendMode
+        mixBlendMode: ({ props: props4, deps }) => !(0, import_utils6.isUndefined)(props4.mixBlendMode) && {
+          mixBlendMode: props4.mixBlendMode
         },
-        appearance: ({ props: props5 }) => !(0, import_utils6.isUndefined)(props5.appearance) && {
-          appearance: props5.appearance
+        appearance: ({ props: props4 }) => !(0, import_utils6.isUndefined)(props4.appearance) && {
+          appearance: props4.appearance
         }
       }
     };
@@ -12657,86 +12667,86 @@ var init_Media = __esm({
     import_utils7 = __toESM(require_cjs());
     init_Theme();
     keySetters = {
-      "@": (key, props5, result, element, isSubtree) => applyMediaProps(
+      "@": (key, props4, result, element, isSubtree) => applyMediaProps(
         key,
-        props5,
+        props4,
         isSubtree ? result : result && result.media,
         element
       ),
-      ":": (key, props5, result, element, isSubtree) => applySelectorProps(
+      ":": (key, props4, result, element, isSubtree) => applySelectorProps(
         key,
-        props5,
+        props4,
         isSubtree ? result : result && result.selector,
         element
       ),
-      "[": (key, props5, result, element, isSubtree) => applySelectorProps(
+      "[": (key, props4, result, element, isSubtree) => applySelectorProps(
         key,
-        props5,
+        props4,
         isSubtree ? result : result && result.selector,
         element
       ),
-      "*": (key, props5, result, element, isSubtree) => applySelectorProps(
+      "*": (key, props4, result, element, isSubtree) => applySelectorProps(
         key,
-        props5,
+        props4,
         isSubtree ? result : result && result.selector,
         element
       ),
-      "+": (key, props5, result, element, isSubtree) => applySelectorProps(
+      "+": (key, props4, result, element, isSubtree) => applySelectorProps(
         key,
-        props5,
+        props4,
         isSubtree ? result : result && result.selector,
         element
       ),
-      "~": (key, props5, result, element, isSubtree) => applySelectorProps(
+      "~": (key, props4, result, element, isSubtree) => applySelectorProps(
         key,
-        props5,
+        props4,
         isSubtree ? result : result && result.selector,
         element
       ),
-      "&": (key, props5, result, element, isSubtree) => applyAndProps(
+      "&": (key, props4, result, element, isSubtree) => applyAndProps(
         key,
-        props5,
+        props4,
         isSubtree ? result : result && result.selector,
         element
       ),
-      ">": (key, props5, result, element, isSubtree) => applyAndProps(
+      ">": (key, props4, result, element, isSubtree) => applyAndProps(
         key,
-        props5,
+        props4,
         isSubtree ? result : result && result.selector,
         element
       ),
-      $: (key, props5, result, element, isSubtree) => applyCaseProps(
+      $: (key, props4, result, element, isSubtree) => applyCaseProps(
         key,
-        props5,
+        props4,
         isSubtree ? result : result && result.case,
         element
       ),
-      "-": (key, props5, result, element, isSubtree) => applyVariableProps(
+      "-": (key, props4, result, element, isSubtree) => applyVariableProps(
         key,
-        props5,
+        props4,
         isSubtree ? result : result && result.variable,
         element
       ),
-      ".": (key, props5, result, element, isSubtree) => applyConditionalCaseProps(
+      ".": (key, props4, result, element, isSubtree) => applyConditionalCaseProps(
         key,
-        props5,
+        props4,
         isSubtree ? result : result && result.case,
         element
       ),
-      "!": (key, props5, result, element, isSubtree) => applyConditionalFalsyProps(
+      "!": (key, props4, result, element, isSubtree) => applyConditionalFalsyProps(
         key,
-        props5,
+        props4,
         isSubtree ? result : result && result.case,
         element
       )
     };
-    execClass = (key, props5, result, element) => {
+    execClass = (key, props4, result, element) => {
       const { class: className } = element;
       const classnameExec = className[key];
       if (typeof classnameExec !== "function")
         return;
       let classExec = classnameExec({
-        props: props5,
+        props: props4,
         context: element.context,
         state: element.state,
         deps: element.deps
@@ -12748,27 +12758,27 @@ var init_Media = __esm({
       }
       return classExec;
     };
-    convertPropsToClass = (props5, result, element) => {
+    convertPropsToClass = (props4, result, element) => {
       const propsClassObj = {};
-      for (const key in props5) {
+      for (const key in props4) {
         const setter = keySetters[key.slice(0, 1)];
         if (setter) {
-          setter(key, props5[key], propsClassObj, element, true);
+          setter(key, props4[key], propsClassObj, element, true);
           continue;
         } else {
-          execClass(key, props5, propsClassObj, element);
+          execClass(key, props4, propsClassObj, element);
         }
       }
       return propsClassObj;
     };
-    applyMediaProps = (key, props5, result, element) => {
+    applyMediaProps = (key, props4, result, element) => {
       const { context } = element;
       if (!context.designSystem || !context.designSystem.MEDIA)
         return;
       const globalTheme = getSystemGlobalTheme(element);
       const { MEDIA: MEDIA2 } = context.designSystem;
       const mediaValue = MEDIA2[key.slice(1)];
-      const generatedClass = convertPropsToClass(props5, result, element);
+      const generatedClass = convertPropsToClass(props4, result, element);
       const name = key.slice(1);
       const isTheme = ["dark", "light"].includes(name);
       const matchesGlobal = name === globalTheme;
@@ -12782,43 +12792,43 @@ var init_Media = __esm({
       result[mediaKey] = generatedClass;
       return result[mediaKey];
     };
-    applyAndProps = (key, props5, result, element) => {
-      result[key] = convertPropsToClass(props5, result, element);
+    applyAndProps = (key, props4, result, element) => {
+      result[key] = convertPropsToClass(props4, result, element);
       return result[key];
     };
-    applySelectorProps = (key, props5, result, element) => {
+    applySelectorProps = (key, props4, result, element) => {
       const selectorKey = `&${key}`;
-      result[selectorKey] = convertPropsToClass(props5, result, element);
+      result[selectorKey] = convertPropsToClass(props4, result, element);
       return result[selectorKey];
     };
-    applyCaseProps = (key, props5, result, element) => {
+    applyCaseProps = (key, props4, result, element) => {
       const { CASES } = element.context && element.context.designSystem;
       const caseKey = key.slice(1);
       const isPropTrue = element.props[caseKey];
       if (!CASES[caseKey] && !isPropTrue)
         return;
-      return (0, import_utils7.merge)(result, convertPropsToClass(props5, result, element));
+      return (0, import_utils7.merge)(result, convertPropsToClass(props4, result, element));
     };
-    applyVariableProps = (key, props5, result, element) => {
-      result[key] = props5;
+    applyVariableProps = (key, props4, result, element) => {
+      result[key] = props4;
       return result;
     };
-    applyConditionalCaseProps = (key, props5, result, element) => {
+    applyConditionalCaseProps = (key, props4, result, element) => {
       const caseKey = key.slice(1);
       const isPropTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey];
       if (!isPropTrue)
         return;
-      return (0, import_utils7.overwriteDeep)(result, convertPropsToClass(props5, result, element));
+      return (0, import_utils7.overwriteDeep)(result, convertPropsToClass(props4, result, element));
     };
-    applyConditionalFalsyProps = (key, props5, result, element) => {
+    applyConditionalFalsyProps = (key, props4, result, element) => {
       const caseKey = key.slice(1);
       const isPropTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey];
       if (!isPropTrue)
-        return (0, import_utils7.overwriteDeep)(result, convertPropsToClass(props5, result, element));
+        return (0, import_utils7.overwriteDeep)(result, convertPropsToClass(props4, result, element));
     };
-    applyTrueProps = (props5, result, element) => (0, import_utils7.merge)(result, convertPropsToClass(props5, result, element));
+    applyTrueProps = (props4, result, element) => (0, import_utils7.merge)(result, convertPropsToClass(props4, result, element));
     beforeClassAssign = (element, s) => {
-      const { props: props5, class: className, context } = element;
+      const { props: props4, class: className, context } = element;
       const CLASS_NAMES = {
         media: {},
         selector: {},
@@ -12828,11 +12838,11 @@ var init_Media = __esm({
       if (!context)
         return;
       const globalTheme = context.designSystem.globalTheme;
-      for (const key in props5) {
+      for (const key in props4) {
         const setter = keySetters[key.slice(0, 1)];
         if (globalTheme) {
-          if (key === "theme" && !props5.themeModifier) {
-            props5.update({
+          if (key === "theme" && !props4.themeModifier) {
+            props4.update({
               themeModifier: globalTheme
             }, {
               preventListeners: true,
@@ -12843,9 +12853,9 @@ var init_Media = __esm({
           }
         }
         if (setter)
-          setter(key, props5[key], CLASS_NAMES, element);
+          setter(key, props4[key], CLASS_NAMES, element);
         else if (key === "true")
-          applyTrueProps(props5[key], CLASS_NAMES, element);
+          applyTrueProps(props4[key], CLASS_NAMES, element);
       }
       const parentProps = element.parent && element.parent.props;
       if (parentProps && parentProps.spacingRatio && parentProps.inheritSpacingRatio) {
@@ -12887,15 +12897,15 @@ var init_Iframe = __esm({
         minHeight: "H"
       },
       attr: {
-        src: ({ props: props5 }) => props5.src,
-        srcdoc: ({ props: props5 }) => props5.srcdoc,
-        sandbox: ({ props: props5 }) => props5.sandbox,
-        seamless: ({ props: props5 }) => props5.seamless,
-        loading: ({ props: props5 }) => props5.loading,
-        allowfullscreen: ({ props: props5 }) => props5.allowfullscreen,
-        frameborder: ({ props: props5 }) => props5.frameborder,
-        allow: ({ props: props5 }) => props5.allow,
-        referrerpolicy: ({ props: props5 }) => props5.referrerpolicy
+        src: ({ props: props4 }) => props4.src,
+        srcdoc: ({ props: props4 }) => props4.srcdoc,
+        sandbox: ({ props: props4 }) => props4.sandbox,
+        seamless: ({ props: props4 }) => props4.seamless,
+        loading: ({ props: props4 }) => props4.loading,
+        allowfullscreen: ({ props: props4 }) => props4.allowfullscreen,
+        frameborder: ({ props: props4 }) => props4.frameborder,
+        allow: ({ props: props4 }) => props4.allow,
+        referrerpolicy: ({ props: props4 }) => props4.referrerpolicy
       }
     };
   }
@@ -12908,8 +12918,8 @@ var init_Interaction = __esm({
     "use strict";
     Interaction = {
       class: {
-        userSelect: ({ props: props5 }) => props5.userSelect && { userSelect: props5.userSelect },
-        pointerEvents: ({ props: props5 }) => props5.pointerEvents && { pointerEvents: props5.pointerEvents },
+        userSelect: ({ props: props4 }) => props4.userSelect && { userSelect: props4.userSelect },
+        pointerEvents: ({ props: props4 }) => props4.pointerEvents && { pointerEvents: props4.pointerEvents },
         cursor: (el, s, ctx) => {
           let val = el.props.cursor;
           if (!val)
@@ -12977,8 +12987,8 @@ var init_InteractiveComponent = __esm({
         }
       },
       attr: {
-        placeholder: ({ props: props5 }) => props5.placeholder,
-        tabIndex: ({ props: props5 }) => props5.tabIndex
+        placeholder: ({ props: props4 }) => props4.placeholder,
+        tabIndex: ({ props: props4 }) => props4.tabIndex
       }
     };
     FocusableComponent = {
@@ -12995,7 +13005,7 @@ var init_InteractiveComponent = __esm({
         style
       },
       attr: {
-        type: ({ props: props5 }) => props5.type
+        type: ({ props: props4 }) => props4.type
       }
     };
   }
@@ -13008,18 +13018,18 @@ var init_Overflow = __esm({
     "use strict";
     Overflow = {
       class: {
-        overflow: ({ props: props5, deps }) => !deps.isUndefined(props5.overflow) && {
-          overflow: props5.overflow,
+        overflow: ({ props: props4, deps }) => !deps.isUndefined(props4.overflow) && {
+          overflow: props4.overflow,
           scrollBehavior: "smooth"
         },
-        overflowX: ({ props: props5, deps }) => !deps.isUndefined(props5.overflowX) && {
-          overflowX: props5.overflowX
+        overflowX: ({ props: props4, deps }) => !deps.isUndefined(props4.overflowX) && {
+          overflowX: props4.overflowX
         },
-        overflowY: ({ props: props5, deps }) => !deps.isUndefined(props5.overflowY) && {
-          overflowY: props5.overflowY
+        overflowY: ({ props: props4, deps }) => !deps.isUndefined(props4.overflowY) && {
+          overflowY: props4.overflowY
         },
-        overscrollBehavior: ({ props: props5, deps }) => !deps.isUndefined(props5.overscrollBehavior) && {
-          overscrollBehavior: props5.overscrollBehavior
+        overscrollBehavior: ({ props: props4, deps }) => !deps.isUndefined(props4.overscrollBehavior) && {
+          overscrollBehavior: props4.overscrollBehavior
         }
       }
     };
@@ -13632,8 +13642,8 @@ var require_create = __commonJS({
       return dependentState;
     };
     var checkForTypes = (element) => {
-      const { state: orig, props: props5, __ref: ref } = element;
-      const state = (props5 == null ? void 0 : props5.state) || orig;
+      const { state: orig, props: props4, __ref: ref } = element;
+      const state = (props4 == null ? void 0 : props4.state) || orig;
       if ((0, import_utils30.isFunction)(state)) {
         ref.__state = state;
         return (0, import_utils30.exec)(state, element);
@@ -13932,21 +13942,21 @@ var init_Position = __esm({
     Position = {
       deps: { getSpacingByKey: import_scratch8.getSpacingByKey },
       class: {
-        position: ({ props: props5 }) => props5.position && { position: props5.position },
-        inset: ({ props: props5, deps, context }) => {
-          const { inset } = props5;
+        position: ({ props: props4 }) => props4.position && { position: props4.position },
+        inset: ({ props: props4, deps, context }) => {
+          const { inset } = props4;
           if (context.utils.isNumber(inset))
             return { inset };
           if (!context.utils.isString(inset))
             return;
           return { inset: inset.split(" ").map((v) => deps.getSpacingByKey(v, "k").k).join(" ") };
         },
-        left: ({ props: props5, deps }) => deps.getSpacingByKey(props5.left, "left"),
-        top: ({ props: props5, deps }) => deps.getSpacingByKey(props5.top, "top"),
-        right: ({ props: props5, deps }) => deps.getSpacingByKey(props5.right, "right"),
-        bottom: ({ props: props5, deps }) => deps.getSpacingByKey(props5.bottom, "bottom"),
-        verticalInset: ({ props: props5, deps }) => {
-          const { verticalInset } = props5;
+        left: ({ props: props4, deps }) => deps.getSpacingByKey(props4.left, "left"),
+        top: ({ props: props4, deps }) => deps.getSpacingByKey(props4.top, "top"),
+        right: ({ props: props4, deps }) => deps.getSpacingByKey(props4.right, "right"),
+        bottom: ({ props: props4, deps }) => deps.getSpacingByKey(props4.bottom, "bottom"),
+        verticalInset: ({ props: props4, deps }) => {
+          const { verticalInset } = props4;
           if (typeof verticalInset !== "string")
             return;
           const vi = verticalInset.split(" ").map((v) => deps.getSpacingByKey(v, "k").k);
@@ -13955,8 +13965,8 @@ var init_Position = __esm({
             bottom: vi[1] || vi[0]
           };
         },
-        horizontalInset: ({ props: props5, deps }) => {
-          const { horizontalInset } = props5;
+        horizontalInset: ({ props: props4, deps }) => {
+          const { horizontalInset } = props4;
           if (typeof horizontalInset !== "string")
             return;
           const vi = horizontalInset.split(" ").map((v) => deps.getSpacingByKey(v, "k").k);
@@ -13983,24 +13993,24 @@ var init_Picture = __esm({
         tag: "source",
         attr: {
           media: (element) => {
-            const { props: props5, key, context, deps } = element;
+            const { props: props4, key, context, deps } = element;
             const { MEDIA: MEDIA2 } = context.designSystem;
             const globalTheme = deps.getSystemGlobalTheme(element);
-            const mediaName = (props5.media || key).slice(1);
+            const mediaName = (props4.media || key).slice(1);
             if (mediaName === globalTheme)
               return "(min-width: 0px)";
             else if (mediaName === "dark" || mediaName === "light")
               return "(max-width: 0px)";
             return MEDIA2[mediaName];
           },
-          srcset: ({ props: props5 }) => props5.srcset
+          srcset: ({ props: props4 }) => props4.srcset
         }
       },
-      Img: ({ props: props5 }) => ({
+      Img: ({ props: props4 }) => ({
         width: "inherit",
         ignoreChildExtend: true,
         height: "inherit",
-        src: props5.src
+        src: props4.src
       })
     };
   }
@@ -14013,7 +14023,7 @@ var init_Pseudo = __esm({
     "use strict";
     Pseudo = {
       class: {
-        content: ({ props: props5 }) => props5.content && { content: props5.content }
+        content: ({ props: props4 }) => props4.content && { content: props4.content }
       }
     };
   }
@@ -14032,19 +14042,19 @@ var init_Svg = __esm({
         "xmlns:xlink": "http://www.w3.org/1999/xlink"
       },
       html: (el) => {
-        const { props: props5, context } = el;
-        if (props5.semantic_symbols)
+        const { props: props4, context } = el;
+        if (props4.semantic_symbols)
           return;
-        if (props5.html)
-          return el.call("exec", props5.html, el);
+        if (props4.html)
+          return el.call("exec", props4.html, el);
         const { designSystem, utils: utils2 } = context;
         const SVG = designSystem && designSystem.SVG;
-        const useSvgSprite = props5.spriteId || context.designSystem && context.designSystem.useSvgSprite;
-        const src = el.call("exec", props5.src, el);
+        const useSvgSprite = props4.spriteId || context.designSystem && context.designSystem.useSvgSprite;
+        const src = el.call("exec", props4.src, el);
         if (!useSvgSprite && src)
           return src;
         const useSVGSymbol = (icon) => `<use xlink:href="#${icon}" />`;
-        const spriteId = props5.spriteId;
+        const spriteId = props4.spriteId;
         if (spriteId)
           return useSVGSymbol(spriteId);
         const symbolId = Symbol.for(src);
@@ -14075,37 +14085,37 @@ var init_Shape = __esm({
     init_style();
     import_scratch9 = __toESM(require_cjs2());
     init_Pseudo();
-    transformBorderRadius = (radius, props5, propertyName) => {
+    transformBorderRadius = (radius, props4, propertyName) => {
       if (!(0, import_utils9.isString)(radius))
         return;
       return {
-        borderRadius: radius.split(" ").map((v, k) => (0, import_scratch9.getSpacingBasedOnRatio)(props5, propertyName, v)[propertyName]).join(" ")
+        borderRadius: radius.split(" ").map((v, k) => (0, import_scratch9.getSpacingBasedOnRatio)(props4, propertyName, v)[propertyName]).join(" ")
       };
     };
     Shape = {
       extend: Pseudo,
       deps: { exec: import_utils9.exec, getSpacingBasedOnRatio: import_scratch9.getSpacingBasedOnRatio, getMediaColor: import_scratch9.getMediaColor, transformBorderRadius },
       class: {
-        shape: ({ props: props5, deps }) => {
-          const { shape } = props5;
-          return deps.exec(SHAPES[shape], { props: props5, deps });
+        shape: ({ props: props4, deps }) => {
+          const { shape } = props4;
+          return deps.exec(SHAPES[shape], { props: props4, deps });
         },
-        shapeDirection: ({ props: props5 }) => {
-          const { shape, shapeDirection } = props5;
+        shapeDirection: ({ props: props4 }) => {
+          const { shape, shapeDirection } = props4;
           if (!shape || !shapeDirection)
             return;
           const shapeDir = SHAPES[shape + "Direction"];
           return shape && shapeDir ? shapeDir[shapeDirection || "left"] : null;
         },
-        shapeDirectionColor: ({ props: props5, deps }) => {
-          const { background, backgroundColor } = props5;
+        shapeDirectionColor: ({ props: props4, deps }) => {
+          const { background, backgroundColor } = props4;
           const borderColor = {
             borderColor: deps.getMediaColor(background || backgroundColor)
           };
-          return props5.shapeDirection ? borderColor : null;
+          return props4.shapeDirection ? borderColor : null;
         },
-        round: ({ props: props5, key, deps, ...el }) => deps.transformBorderRadius(props5.round || props5.borderRadius, props5, "round"),
-        borderRadius: ({ props: props5, key, deps, ...el }) => deps.transformBorderRadius(props5.borderRadius || props5.round, props5, "borderRadius")
+        round: ({ props: props4, key, deps, ...el }) => deps.transformBorderRadius(props4.round || props4.borderRadius, props4, "round"),
+        borderRadius: ({ props: props4, key, deps, ...el }) => deps.transformBorderRadius(props4.borderRadius || props4.round, props4, "borderRadius")
       }
     };
   }
@@ -14120,40 +14130,40 @@ var init_Text = __esm({
     import_scratch10 = __toESM(require_cjs2());
     props2 = {
       fontSize: (el) => {
-        const { props: props5, deps } = el;
-        return props5.fontSize ? deps.getFontSizeByKey(props5.fontSize) : null;
+        const { props: props4, deps } = el;
+        return props4.fontSize ? deps.getFontSizeByKey(props4.fontSize) : null;
       },
-      fontFamily: ({ props: props5, deps }) => ({
-        fontFamily: deps.getFontFamily(props5.fontFamily) || props5.fontFamily
+      fontFamily: ({ props: props4, deps }) => ({
+        fontFamily: deps.getFontFamily(props4.fontFamily) || props4.fontFamily
       }),
-      fontWeight: ({ props: props5 }) => ({
-        fontWeight: props5.fontWeight,
-        fontVariationSettings: '"wght" ' + props5.fontWeight
+      fontWeight: ({ props: props4 }) => ({
+        fontWeight: props4.fontWeight,
+        fontVariationSettings: '"wght" ' + props4.fontWeight
       })
     };
     Text = {
       deps: { exec: import_utils10.exec, getFontSizeByKey: import_scratch10.getFontSizeByKey, getFontFamily: import_scratch10.getFontFamily },
       text: (el) => {
-        const { key, props: props5, state, deps } = el;
-        if (props5.text === true)
-          return state && state[key] || props5 && props5[key];
-        return deps.exec(props5.text, el);
+        const { key, props: props4, state, deps } = el;
+        if (props4.text === true)
+          return state && state[key] || props4 && props4[key];
+        return deps.exec(props4.text, el);
       },
       class: {
-        font: ({ props: props5 }) => !(0, import_utils10.isUndefined)(props5.font) && { font: props5.font },
-        lineHeight: ({ props: props5 }) => !(0, import_utils10.isUndefined)(props5.lineHeight) && { lineHeight: props5.lineHeight },
+        font: ({ props: props4 }) => !(0, import_utils10.isUndefined)(props4.font) && { font: props4.font },
+        lineHeight: ({ props: props4 }) => !(0, import_utils10.isUndefined)(props4.lineHeight) && { lineHeight: props4.lineHeight },
         // lineHeight: ({ props }) => !isUndefined(props.lineHeight) && getSpacingBasedOnRatio(props, 'lineHeight', null, ''),
-        textDecoration: ({ props: props5 }) => !(0, import_utils10.isUndefined)(props5.textDecoration) && { textDecoration: props5.textDecoration },
-        textTransform: ({ props: props5 }) => !(0, import_utils10.isUndefined)(props5.textTransform) && { textTransform: props5.textTransform },
-        wordBreak: ({ props: props5 }) => !(0, import_utils10.isUndefined)(props5.wordBreak) && { wordBreak: props5.wordBreak },
-        whiteSpace: ({ props: props5 }) => !(0, import_utils10.isUndefined)(props5.whiteSpace) && { whiteSpace: props5.whiteSpace },
-        wordWrap: ({ props: props5 }) => !(0, import_utils10.isUndefined)(props5.wordWrap) && { wordWrap: props5.wordWrap },
-        letterSpacing: ({ props: props5 }) => !(0, import_utils10.isUndefined)(props5.letterSpacing) && { letterSpacing: props5.letterSpacing },
-        textOverflow: ({ props: props5 }) => !(0, import_utils10.isUndefined)(props5.textOverflow) && { textOverflow: props5.textOverflow },
-        textAlign: ({ props: props5 }) => !(0, import_utils10.isUndefined)(props5.textAlign) && { textAlign: props5.textAlign },
-        writingMode: ({ props: props5 }) => !(0, import_utils10.isUndefined)(props5.writingMode) && { writingMode: props5.writingMode },
-        textOrientation: ({ props: props5 }) => !(0, import_utils10.isUndefined)(props5.textOrientation) && { textOrientation: props5.textOrientation },
-        textIndent: ({ props: props5 }) => !(0, import_utils10.isUndefined)(props5.textIndent) && { textIndent: props5.textIndent },
+        textDecoration: ({ props: props4 }) => !(0, import_utils10.isUndefined)(props4.textDecoration) && { textDecoration: props4.textDecoration },
+        textTransform: ({ props: props4 }) => !(0, import_utils10.isUndefined)(props4.textTransform) && { textTransform: props4.textTransform },
+        wordBreak: ({ props: props4 }) => !(0, import_utils10.isUndefined)(props4.wordBreak) && { wordBreak: props4.wordBreak },
+        whiteSpace: ({ props: props4 }) => !(0, import_utils10.isUndefined)(props4.whiteSpace) && { whiteSpace: props4.whiteSpace },
+        wordWrap: ({ props: props4 }) => !(0, import_utils10.isUndefined)(props4.wordWrap) && { wordWrap: props4.wordWrap },
+        letterSpacing: ({ props: props4 }) => !(0, import_utils10.isUndefined)(props4.letterSpacing) && { letterSpacing: props4.letterSpacing },
+        textOverflow: ({ props: props4 }) => !(0, import_utils10.isUndefined)(props4.textOverflow) && { textOverflow: props4.textOverflow },
+        textAlign: ({ props: props4 }) => !(0, import_utils10.isUndefined)(props4.textAlign) && { textAlign: props4.textAlign },
+        writingMode: ({ props: props4 }) => !(0, import_utils10.isUndefined)(props4.writingMode) && { writingMode: props4.writingMode },
+        textOrientation: ({ props: props4 }) => !(0, import_utils10.isUndefined)(props4.textOrientation) && { textOrientation: props4.textOrientation },
+        textIndent: ({ props: props4 }) => !(0, import_utils10.isUndefined)(props4.textIndent) && { textIndent: props4.textIndent },
         ...props2
       }
     };
@@ -14198,10 +14208,10 @@ var init_Transform = __esm({
     import_utils11 = __toESM(require_cjs());
     Transform = {
       class: {
-        zoom: ({ props: props5 }) => !(0, import_utils11.isUndefined)(props5.zoom) && { zoom: props5.zoom },
-        transform: ({ props: props5 }) => !(0, import_utils11.isUndefined)(props5.transform) && { transform: props5.transform },
-        transformOrigin: ({ props: props5 }) => !(0, import_utils11.isUndefined)(props5.transformOrigin) && { transformOrigin: props5.transformOrigin },
-        backfaceVisibility: ({ props: props5 }) => !(0, import_utils11.isUndefined)(props5.backfaceVisibility) && { backfaceVisibility: props5.backfaceVisibility }
+        zoom: ({ props: props4 }) => !(0, import_utils11.isUndefined)(props4.zoom) && { zoom: props4.zoom },
+        transform: ({ props: props4 }) => !(0, import_utils11.isUndefined)(props4.transform) && { transform: props4.transform },
+        transformOrigin: ({ props: props4 }) => !(0, import_utils11.isUndefined)(props4.transformOrigin) && { transformOrigin: props4.transformOrigin },
+        backfaceVisibility: ({ props: props4 }) => !(0, import_utils11.isUndefined)(props4.backfaceVisibility) && { backfaceVisibility: props4.backfaceVisibility }
       }
     };
   }
@@ -14215,9 +14225,9 @@ var init_XYZ = __esm({
     import_utils12 = __toESM(require_cjs());
     XYZ = {
       class: {
-        zIndex: ({ props: props5 }) => !(0, import_utils12.isUndefined)(props5.zIndex) && { zIndex: props5.zIndex },
-        perspective: ({ props: props5 }) => !(0, import_utils12.isUndefined)(props5.perspective) && { perspective: props5.perspective },
-        perspectiveOrigin: ({ props: props5 }) => !(0, import_utils12.isUndefined)(props5.perspectiveOrigin) && { perspectiveOrigin: props5.perspectiveOrigin }
+        zIndex: ({ props: props4 }) => !(0, import_utils12.isUndefined)(props4.zIndex) && { zIndex: props4.zIndex },
+        perspective: ({ props: props4 }) => !(0, import_utils12.isUndefined)(props4.perspective) && { perspective: props4.perspective },
+        perspectiveOrigin: ({ props: props4 }) => !(0, import_utils12.isUndefined)(props4.perspectiveOrigin) && { perspectiveOrigin: props4.perspectiveOrigin }
       }
     };
   }
@@ -14253,31 +14263,31 @@ var init_Animation = __esm({
       animationName: (el) => el.props.animationName && {
         animationName: el.deps.applyAnimationProps(el.props.animationName, el)
       },
-      animationDuration: ({ props: props5, deps }) => props5.animationDuration && {
-        animationDuration: deps.getTimingByKey(props5.animationDuration).timing
+      animationDuration: ({ props: props4, deps }) => props4.animationDuration && {
+        animationDuration: deps.getTimingByKey(props4.animationDuration).timing
       },
-      animationDelay: ({ props: props5, deps }) => props5.animationDelay && {
-        animationDelay: deps.getTimingByKey(props5.animationDelay).timing
+      animationDelay: ({ props: props4, deps }) => props4.animationDelay && {
+        animationDelay: deps.getTimingByKey(props4.animationDelay).timing
       },
-      animationTimingFunction: ({ props: props5, deps }) => props5.animationTimingFunction && {
-        animationTimingFunction: deps.getTimingFunction(props5.animationTimingFunction)
+      animationTimingFunction: ({ props: props4, deps }) => props4.animationTimingFunction && {
+        animationTimingFunction: deps.getTimingFunction(props4.animationTimingFunction)
       }
     };
     Animation = {
       deps: { isObject: import_utils13.isObject, getTimingByKey: import_scratch11.getTimingByKey, getTimingFunction: import_scratch11.getTimingFunction, applyAnimationProps },
       class: {
         ...props3,
-        animationFillMode: ({ props: props5 }) => props5.animationFillMode && {
-          animationFillMode: props5.animationFillMode
+        animationFillMode: ({ props: props4 }) => props4.animationFillMode && {
+          animationFillMode: props4.animationFillMode
         },
-        animationPlayState: ({ props: props5 }) => props5.animationPlayState && {
-          animationPlayState: props5.animationPlayState
+        animationPlayState: ({ props: props4 }) => props4.animationPlayState && {
+          animationPlayState: props4.animationPlayState
         },
-        animationIterationCount: ({ props: props5 }) => props5.animationIterationCount && {
-          animationIterationCount: props5.animationIterationCount || 1
+        animationIterationCount: ({ props: props4 }) => props4.animationIterationCount && {
+          animationIterationCount: props4.animationIterationCount || 1
         },
-        animationDirection: ({ props: props5 }) => props5.animationDirection && {
-          animationDirection: props5.animationDirection
+        animationDirection: ({ props: props4 }) => props4.animationDirection && {
+          animationDirection: props4.animationDirection
         }
       }
     };
@@ -14322,7 +14332,7 @@ var init_Box = __esm({
     import_utils14 = __toESM(require_cjs());
     PropsCSS = {
       class: {
-        style: ({ props: props5 }) => props5 && props5.style
+        style: ({ props: props4 }) => props4 && props4.style
       }
     };
     Box = {
@@ -14343,16 +14353,16 @@ var init_Box = __esm({
       ],
       deps: { isString: import_utils14.isString, isUndefined: import_utils14.isUndefined },
       attr: {
-        id: ({ props: props5, deps }) => deps.isString(props5.id) && props5.id,
-        title: ({ props: props5, deps }) => deps.isString(props5.title) && props5.title,
-        contentEditable: ({ props: props5 }) => props5.contentEditable || props5.contenteditable,
-        dir: ({ props: props5 }) => props5.dir,
-        draggable: ({ props: props5 }) => props5.draggable,
-        hidden: ({ props: props5 }) => props5.hidden,
-        lang: ({ props: props5 }) => props5.lang,
-        spellcheck: ({ props: props5 }) => props5.spellcheck,
-        tabindex: ({ props: props5 }) => props5.tabindex,
-        translate: ({ props: props5 }) => props5.translate
+        id: ({ props: props4, deps }) => deps.isString(props4.id) && props4.id,
+        title: ({ props: props4, deps }) => deps.isString(props4.title) && props4.title,
+        contentEditable: ({ props: props4 }) => props4.contentEditable || props4.contenteditable,
+        dir: ({ props: props4 }) => props4.dir,
+        draggable: ({ props: props4 }) => props4.draggable,
+        hidden: ({ props: props4 }) => props4.hidden,
+        lang: ({ props: props4 }) => props4.lang,
+        spellcheck: ({ props: props4 }) => props4.spellcheck,
+        tabindex: ({ props: props4 }) => props4.tabindex,
+        translate: ({ props: props4 }) => props4.translate
       }
     };
     Circle = {
@@ -14370,13 +14380,13 @@ var init_Icon = __esm({
     "use strict";
     import_utils15 = __toESM(require_cjs());
     inheritFromIsActive = (el) => {
-      const { props: props5 } = el;
-      const propsActive = props5[".isActive"];
+      const { props: props4 } = el;
+      const propsActive = props4[".isActive"];
       return el.call("exec", propsActive.name || propsActive.icon);
     };
     getIconName = (el, s) => {
-      const { key, props: props5 } = el;
-      let icon = el.call("exec", props5.name || props5.icon || key, el);
+      const { key, props: props4 } = el;
+      let icon = el.call("exec", props4.name || props4.icon || key, el);
       if ((0, import_utils15.isString)(icon) && icon.includes("{{")) {
         icon = el.call("replaceLiteralsWithObjectFields", icon, s);
       }
@@ -14386,7 +14396,7 @@ var init_Icon = __esm({
       extend: "Svg",
       deps: { isString: import_utils15.isString, replaceLiteralsWithObjectFields: import_utils15.replaceLiteralsWithObjectFields },
       props: (el, s, ctx) => {
-        const { props: props5, parent, deps } = el;
+        const { props: props4, parent, deps } = el;
         const { ICONS, useIconSprite, verbose } = ctx && ctx.designSystem;
         const { toCamelCase } = ctx && ctx.utils;
         const iconName = getIconName(el, s);
@@ -14396,7 +14406,7 @@ var init_Icon = __esm({
         if (semanticIcon)
           return semanticIcon;
         let activeIconName;
-        if (props5.isActive)
+        if (props4.isActive)
           activeIconName = inheritFromIsActive(el);
         const parentProps = parent.props;
         const parentPropsActive = parentProps[".isActive"];
@@ -14423,7 +14433,7 @@ var init_Icon = __esm({
             el.warn("Can't find icon:", iconName, iconInContext);
         }
         const iconFromLibrary = ICONS[iconInContext];
-        const directSrc = parent && parent.props && parent.props.src || props5.src;
+        const directSrc = parent && parent.props && parent.props.src || props4.src;
         return {
           width: "A",
           height: "A",
@@ -14449,16 +14459,16 @@ var init_Icon = __esm({
       },
       Icon: {
         if: (el) => {
-          const { parent, props: props5 } = el;
+          const { parent, props: props4 } = el;
           return el.call(
             "exec",
-            parent.props.icon || parent.props.Icon || props5.name || props5.icon || props5.sfSymbols || parent.props.sfSymbols,
+            parent.props.icon || parent.props.Icon || props4.name || props4.icon || props4.sfSymbols || parent.props.sfSymbols,
             el
           );
         },
         icon: (el) => el.call("exec", el.parent.props.icon, el.parent)
       },
-      text: ({ props: props5 }) => props5.text
+      text: ({ props: props4 }) => props4.text
     };
     FileIcon = {
       extend: "Flex",
@@ -14840,16 +14850,16 @@ var init_Link = __esm({
           }
           return href;
         },
-        target: ({ props: props5 }) => props5.target,
-        "aria-label": ({ props: props5 }) => props5.aria ? props5.aria.label : props5.text,
-        draggable: ({ props: props5 }) => props5.draggable
+        target: ({ props: props4 }) => props4.target,
+        "aria-label": ({ props: props4 }) => props4.aria ? props4.aria.label : props4.text,
+        draggable: ({ props: props4 }) => props4.draggable
       }
     };
     RouterLink = {
       on: {
         click: (event, el, s) => {
-          const { props: props5, context: ctx } = el;
-          const { href: h, scrollToTop, stopPropagation } = props5;
+          const { props: props4, context: ctx } = el;
+          const { href: h, scrollToTop, stopPropagation } = props4;
           const { exec: exec7, isString: isString12, replaceLiteralsWithObjectFields: replaceLiteralsWithObjectFields3, isDefined: isDefined2 } = ctx.utils;
           let href = exec7(h, el, s);
           if (isString12(href) && href.includes("{{")) {
@@ -14859,16 +14869,16 @@ var init_Link = __esm({
             event.stopPropagation();
           if (!href)
             return;
-          const { utils: utils2, snippets, routerOptions } = ctx;
+          const { utils: utils2, snippets, functions, routerOptions } = ctx;
           const root = el.__ref.root;
           const linkIsExternal = href.includes("http://") || href.includes("https://") || href.includes("mailto:") || href.includes("tel:");
           if (href && !linkIsExternal) {
             try {
-              (snippets.router || utils2.router || import_router.router)(href, root, {}, {
+              (functions.router || snippets.router || utils2.router || import_router.router)(href, root, {}, {
                 scrollToOptions: { behaviour: "instant" },
                 scrollToTop: isDefined2(scrollToTop) ? scrollToTop : true,
                 ...routerOptions,
-                ...props5.routerOptions
+                ...props4.routerOptions
               });
               event.preventDefault();
             } catch (e) {
@@ -14894,23 +14904,23 @@ var init_Video = __esm({
       childExtend: {
         tag: "source",
         attr: {
-          src: ({ props: props5 }) => props5.src,
-          type: ({ props: props5 }) => props5.type,
-          controls: ({ props: props5 }) => props5.controls
+          src: ({ props: props4 }) => props4.src,
+          type: ({ props: props4 }) => props4.type,
+          controls: ({ props: props4 }) => props4.controls
         }
       },
       props: {
         controls: true
       },
       attr: {
-        src: ({ props: props5 }) => props5.src,
-        playsinline: ({ props: props5 }) => props5.playsinline,
-        autoplay: ({ props: props5 }) => props5.autoplay,
-        loop: ({ props: props5 }) => props5.loop,
-        poster: ({ props: props5 }) => props5.poster,
-        muted: ({ props: props5 }) => props5.muted,
-        preload: ({ props: props5 }) => props5.preload,
-        controls: ({ props: props5 }) => props5.controls
+        src: ({ props: props4 }) => props4.src,
+        playsinline: ({ props: props4 }) => props4.playsinline,
+        autoplay: ({ props: props4 }) => props4.autoplay,
+        loop: ({ props: props4 }) => props4.loop,
+        poster: ({ props: props4 }) => props4.poster,
+        muted: ({ props: props4 }) => props4.muted,
+        preload: ({ props: props4 }) => props4.preload,
+        controls: ({ props: props4 }) => props4.controls
       }
     };
   }
@@ -14966,26 +14976,26 @@ var init_Input = __esm({
         padding: "Z2 B"
       },
       attr: {
-        pattern: ({ props: props5 }) => props5.pattern,
-        minLength: ({ props: props5 }) => props5.minlength,
-        maxLength: ({ props: props5 }) => props5.maxlength,
-        name: ({ props: props5 }) => props5.name,
-        autocomplete: ({ props: props5 }) => props5.autocomplete,
-        placeholder: ({ props: props5 }) => props5.placeholder,
+        pattern: ({ props: props4 }) => props4.pattern,
+        minLength: ({ props: props4 }) => props4.minlength,
+        maxLength: ({ props: props4 }) => props4.maxlength,
+        name: ({ props: props4 }) => props4.name,
+        autocomplete: ({ props: props4 }) => props4.autocomplete,
+        placeholder: ({ props: props4 }) => props4.placeholder,
         value: (el, s) => {
-          const { props: props5, state, deps } = el;
+          const { props: props4, state, deps } = el;
           const { isString: isString12, exec: exec7, replaceLiteralsWithObjectFields: replaceLiteralsWithObjectFields3 } = deps;
-          const val = exec7(props5.value, el);
+          const val = exec7(props4.value, el);
           if (isString12(val) && val.includes("{{")) {
             return replaceLiteralsWithObjectFields3(val, state);
           }
           return val;
         },
         checked: (el) => el.call("exec", el.props.checked, el),
-        disabled: ({ props: props5 }) => props5.disabled || null,
-        readonly: ({ props: props5 }) => props5.readonly,
-        required: ({ props: props5 }) => props5.required,
-        type: ({ props: props5 }) => props5.type
+        disabled: ({ props: props4 }) => props4.disabled || null,
+        readonly: ({ props: props4 }) => props4.readonly,
+        required: ({ props: props4 }) => props4.required,
+        type: ({ props: props4 }) => props4.type
       }
     };
   }
@@ -15015,9 +15025,9 @@ var init_NumberInput = __esm({
         }
       },
       attr: {
-        step: ({ props: props5 }) => props5.step,
-        min: ({ props: props5 }) => props5.min,
-        max: ({ props: props5 }) => props5.max
+        step: ({ props: props4 }) => props4.step,
+        min: ({ props: props4 }) => props4.min,
+        max: ({ props: props4 }) => props4.max
       }
     };
   }
@@ -15251,9 +15261,8 @@ var Select;
 var init_Select = __esm({
   "../uikit/Select/index.js"() {
     "use strict";
-    init_Atoms();
     Select = {
-      extend: Focusable,
+      extend: "Focusable",
       tag: "select",
       props: {
         fontSize: "A",
@@ -15270,14 +15279,14 @@ var init_Select = __esm({
           disabled: ""
         },
         attr: {
-          value: ({ props: props5 }) => props5.value,
-          selected: ({ props: props5 }) => props5.selected,
-          disabled: ({ props: props5 }) => props5.disabled
+          value: ({ props: props4 }) => props4.value,
+          selected: ({ props: props4 }) => props4.selected,
+          disabled: ({ props: props4 }) => props4.disabled
         }
       },
       attr: {
-        name: ({ props: props5 }) => props5.name,
-        disabled: ({ props: props5 }) => props5.disabled
+        name: ({ props: props4 }) => props4.name,
+        disabled: ({ props: props4 }) => props4.disabled
       }
     };
   }
@@ -15571,7 +15580,7 @@ var init_Button = __esm({
         round: "C2"
       },
       attr: {
-        type: ({ props: props5 }) => props5.type
+        type: ({ props: props4 }) => props4.type
       }
     };
     SquareButton = {
@@ -15729,9 +15738,9 @@ var init_ProgressLine = __esm({
         }
       },
       attr: {
-        max: ({ props: props5 }) => props5.max,
-        progress: ({ props: props5 }) => props5.progress,
-        value: ({ props: props5 }) => props5.value
+        max: ({ props: props4 }) => props4.max,
+        progress: ({ props: props4 }) => props4.progress,
+        value: ({ props: props4 }) => props4.value
       }
     };
     ProgressLineWithUnitValue = {
@@ -15783,9 +15792,9 @@ var init_ProgressCircle = __esm({
           }
         },
         attr: {
-          max: ({ props: props5 }) => props5.max,
-          progress: ({ props: props5 }) => props5.progress,
-          value: ({ props: props5 }) => props5.value
+          max: ({ props: props4 }) => props4.max,
+          progress: ({ props: props4 }) => props4.progress,
+          value: ({ props: props4 }) => props4.value
         }
       }
     };
@@ -15842,78 +15851,88 @@ var init_Progress = __esm({
 });
 
 // ../uikit/Range/index.js
-var import_utils17, import_scratch12, props4, returnPropertyValue, Range, RangeWithButtons;
+var import_utils17, import_scratch12, returnPropertyValue, Range, RangeWithButtons;
 var init_Range = __esm({
   "../uikit/Range/index.js"() {
     "use strict";
     import_utils17 = __toESM(require_cjs());
     import_scratch12 = __toESM(require_cjs2());
-    props4 = {
-      appearance: "none",
-      width: "100%",
-      height: "2px",
-      outline: "none",
-      flex: 1,
-      onInput: (ev, el, s) => s.update({ value: el.node.value }),
-      onChange: (ev, el, s) => s.update({ value: el.node.value }),
-      style: {
-        appearance: "none"
-      },
-      "::-webkit-slider-thumb": {
-        boxSizing: "content-box",
-        width: "8px",
-        height: "8px",
-        borderWidth: "2px",
-        borderStyle: "solid",
-        borderRadius: "100%",
-        opacity: ".8",
-        style: {
-          appearance: "none"
-        }
-      },
-      "::-webkit-slider-runnable-track": {},
-      "@dark": {
-        background: "white 0.2",
-        "::-webkit-slider-thumb": {
-          background: "#232526",
-          borderColor: (0, import_scratch12.opacify)("#454646", 0.75)
-        },
-        ":hover": {
-          "::-webkit-slider-thumb": {
-            borderColor: (0, import_scratch12.opacify)("#fff", 0.35)
+    returnPropertyValue = (el, property, def) => {
+      const val = el.props && el.props[property];
+      const r = (0, import_utils17.isFunction)(val) ? val(el, el.state) : val !== void 0 ? val : def !== void 0 ? def : 0;
+      return r + "";
+    };
+    Range = {
+      props: {
+        appearance: "none",
+        width: "100%",
+        height: "2px",
+        outline: "none",
+        flex: 1,
+        onInput: (ev, el, s) => {
+          const props4 = el.props;
+          if ((0, import_utils17.isFunction)(props4.onInput)) {
+            props4.onInput(ev, el, s);
+          } else {
+            s.update({ value: parseFloat(el.node.value) });
           }
         },
-        ":focus": {
-          "::-webkit-slider-thumb": {
-            borderColor: "#3C6AC0"
+        onChange: (ev, el, s) => {
+          const props4 = el.props;
+          if ((0, import_utils17.isFunction)(props4.onChange)) {
+            props4.onChange(ev, el, s);
+          } else {
+            s.update({ value: parseFloat(el.node.value) });
           }
-        }
-      },
-      "@light": {
-        background: "gray9",
+        },
         "::-webkit-slider-thumb": {
-          background: "white",
-          borderColor: "gray9"
+          boxSizing: "content-box",
+          width: "8px",
+          height: "8px",
+          borderWidth: "2px",
+          borderStyle: "solid",
+          borderRadius: "100%",
+          opacity: ".8",
+          style: {
+            appearance: "none"
+          }
         },
-        ":hover": {
+        "::-webkit-slider-runnable-track": {},
+        "@dark": {
+          background: "white 0.2",
           "::-webkit-slider-thumb": {
-            borderColor: "gray7"
+            background: "#232526",
+            borderColor: (0, import_scratch12.opacify)("#454646", 0.75)
+          },
+          ":hover": {
+            "::-webkit-slider-thumb": {
+              borderColor: (0, import_scratch12.opacify)("#fff", 0.35)
+            }
+          },
+          ":focus": {
+            "::-webkit-slider-thumb": {
+              borderColor: "#3C6AC0"
+            }
           }
         },
-        ":focus": {
+        "@light": {
+          background: "gray9",
           "::-webkit-slider-thumb": {
-            borderColor: "blue"
+            background: "white",
+            borderColor: "gray9"
+          },
+          ":hover": {
+            "::-webkit-slider-thumb": {
+              borderColor: "gray7"
+            }
+          },
+          ":focus": {
+            "::-webkit-slider-thumb": {
+              borderColor: "blue"
+            }
           }
         }
-      }
-    };
-    returnPropertyValue = (el, property, def) => {
-      const val = el.props && el.props[property];
-      const r = (0, import_utils17.isFunction)(val) ? val(el, el.state) : val !== void 0 ? val : def !== void 0 ? def : 0;
-      return r + "";
-    };
-    Range = {
-      props: props4,
+      },
       tag: "input",
       attr: {
         type: "range",
@@ -15921,96 +15940,71 @@ var init_Range = __esm({
         min: (el, s) => returnPropertyValue(el, "min", 0),
         max: (el, s) => returnPropertyValue(el, "max", 100),
         step: (el, s) => returnPropertyValue(el, "step", 1)
-      },
-      on: {
-        input: (ev, el, s) => {
-          const props5 = el.props;
-          if ((0, import_utils17.isFunction)(props5.onInput)) {
-            props5.onInput(ev, el, s);
-          } else {
-            s.update({ value: parseFloat(el.node.value) });
-          }
-        },
-        change: (ev, el, s) => {
-          const props5 = el.props;
-          if ((0, import_utils17.isFunction)(props5.onChange)) {
-            props5.onChange(ev, el, s);
-          } else {
-            s.update({ value: parseFloat(el.node.value) });
-          }
-        }
       }
     };
     RangeWithButtons = {
-      minus: {
-        extend: "SquareButton",
-        props: { theme: "field", icon: "minus" },
-        on: {
-          click: (ev, el, s) => {
-            const parentProps = el.parent.props;
-            if ((0, import_utils17.isFunction)(parentProps.onDecrease)) {
-              parentProps.onDecrease(ev, el.parent, s);
-            } else {
-              const value2 = parseFloat(s.value);
-              const min = returnPropertyValue(el.parent, "min", 1);
-              const step = returnPropertyValue(el.parent, "step", 1);
-              if (value2 > min) {
-                s.update({ value: value2 - step });
-              }
+      SquareButton_minus: {
+        icon: "minus",
+        theme: "field",
+        onClick: (ev, el, s) => {
+          const parentProps = el.parent.props;
+          if ((0, import_utils17.isFunction)(parentProps.onDecrease)) {
+            parentProps.onDecrease(ev, el.parent, s);
+          } else {
+            const value2 = parseFloat(s.value);
+            const min = returnPropertyValue(el.parent, "min", 1);
+            const step = returnPropertyValue(el.parent, "step", 1);
+            if (value2 > min) {
+              s.update({ value: value2 - step });
             }
           }
         }
       },
-      value: {
-        props: { width: "4ch" },
+      Value: {
         tag: "span",
+        width: "4ch",
         text: ({ state, parent }) => {
           const unit = returnPropertyValue(parent, "unit", "");
           return "" + (state.value || state.defaultValue || 0) + unit;
         }
       },
-      input: {
-        extend: Range,
+      Range: {
         attr: {
           value: (el, s) => parseFloat(s.value || s.defaultValue),
           min: (el, s) => returnPropertyValue(el.parent, "min", 0),
           max: (el, s) => returnPropertyValue(el.parent, "max", 100),
           step: (el, s) => returnPropertyValue(el.parent, "step", 1)
         },
-        on: {
-          input: (ev, el, s) => {
-            const parentProps = el.parent.props;
-            if ((0, import_utils17.isFunction)(parentProps.onInput)) {
-              parentProps.onInput(ev, el, s);
-            } else {
-              s.update({ value: parseFloat(el.node.value) });
-            }
-          },
-          change: (ev, el, s) => {
-            const parentProps = el.parent.props;
-            if ((0, import_utils17.isFunction)(parentProps.onChange)) {
-              parentProps.onChange(ev, el, s);
-            } else {
-              s.update({ value: parseFloat(el.node.value) });
-            }
+        onInput: (ev, el, s) => {
+          const parentProps = el.parent.props;
+          if ((0, import_utils17.isFunction)(parentProps.onInput)) {
+            parentProps.onInput(ev, el, s);
+          } else {
+            s.update({ value: parseFloat(el.node.value) });
+          }
+        },
+        onChange: (ev, el, s) => {
+          const parentProps = el.parent.props;
+          if ((0, import_utils17.isFunction)(parentProps.onChange)) {
+            parentProps.onChange(ev, el, s);
+          } else {
+            s.update({ value: parseFloat(el.node.value) });
           }
         }
       },
-      plus: {
-        extend: "SquareButton",
-        props: { theme: "field", icon: "plus" },
-        on: {
-          click: (ev, el, s) => {
-            const parentProps = el.parent.props;
-            if ((0, import_utils17.isFunction)(parentProps.onIncrease)) {
-              parentProps.onIncrease(ev, el.parent, s);
-            } else {
-              const value2 = parseFloat(s.value);
-              const max = returnPropertyValue(el.parent, "max", 1);
-              const step = returnPropertyValue(el.parent, "step", 1);
-              if (value2 < max) {
-                s.update({ value: value2 + step });
-              }
+      SquareButton_plus: {
+        theme: "field",
+        icon: "plus",
+        onClick: (ev, el, s) => {
+          const parentProps = el.parent.props;
+          if ((0, import_utils17.isFunction)(parentProps.onIncrease)) {
+            parentProps.onIncrease(ev, el.parent, s);
+          } else {
+            const value2 = parseFloat(s.value);
+            const max = returnPropertyValue(el.parent, "max", 1);
+            const step = returnPropertyValue(el.parent, "step", 1);
+            if (value2 < max) {
+              s.update({ value: value2 + step });
             }
           }
         }
@@ -16063,8 +16057,8 @@ var init_Slider = __esm({
           click: (ev, el, s) => {
             el.props && (0, import_utils18.isFunction)(el.props.click) && el.props.click(ev, el, s);
             const input = el.parent.input;
-            const props5 = input.props;
-            const value2 = (0, import_utils18.isFunction)(props5.value) ? props5.value() : props5.value;
+            const props4 = input.props;
+            const value2 = (0, import_utils18.isFunction)(props4.value) ? props4.value() : props4.value;
             input.node.value = value2;
           }
         }
@@ -16100,8 +16094,8 @@ var init_Slider = __esm({
           click: (ev, el, s) => {
             el.props && (0, import_utils18.isFunction)(el.props.click) && el.props.click(ev, el, s);
             const input = el.parent.input;
-            const props5 = input.props;
-            const value2 = (0, import_utils18.isFunction)(props5.value) ? props5.value() : props5.value;
+            const props4 = input.props;
+            const value2 = (0, import_utils18.isFunction)(props4.value) ? props4.value() : props4.value;
             input.node.value = value2;
           }
         }
@@ -16165,13 +16159,13 @@ var init_Avatar = __esm({
     "use strict";
     Avatar = {
       extend: "Img",
-      props: ({ key, props: props5 }) => ({
+      props: {
         display: "block",
         avatarType: "adventurer-neutral",
         borderRadius: "100%",
         boxSize: "C+X C+X",
-        src: `https://api.dicebear.com/7.x/${props5.avatarType || "initials"}/svg?seed=${props5.key || key || "no-avatar"}`
-      })
+        src: (el) => `https://api.dicebear.com/7.x/${el.props.avatarType || "initials"}/svg?seed=${el.props.key || el.key || "no-avatar"}`
+      }
     };
   }
 });
@@ -16220,7 +16214,7 @@ var init_AvatarBundle = __esm({
         }
       },
       childExtend: Avatar,
-      $propsCollection: ({ props: props5 }) => props5.options
+      $propsCollection: ({ props: props4 }) => props4.options
     };
   }
 });
@@ -16383,14 +16377,14 @@ var init_Tooltip = __esm({
       },
       attr: { tooltip: true },
       Title: {
-        if: ({ parent, props: props5 }) => (0, import_utils19.isDefined)(parent.props.title) || props5.text,
+        if: ({ parent, props: props4 }) => (0, import_utils19.isDefined)(parent.props.title) || props4.text,
         width: "fit-content",
         fontWeight: 500,
         color: "gray12",
         text: ({ parent }) => parent.props.title
       },
       P: {
-        if: ({ parent, props: props5 }) => (0, import_utils19.isDefined)(parent.props.description) || props5.text,
+        if: ({ parent, props: props4 }) => (0, import_utils19.isDefined)(parent.props.description) || props4.text,
         width: "fit-content",
         fontSize: "Z2",
         margin: "0",
@@ -16401,13 +16395,13 @@ var init_Tooltip = __esm({
     };
     TooltipHidden = {
       extend: "Tooltip",
-      props: ({ props: props5 }) => ({
+      props: ({ props: props4 }) => ({
         position: "absolute",
         pointerEvents: "none",
         opacity: "0",
         visibility: "hidden",
         transition: "C defaultBezier opacity, C defaultBezier visibility, B defaultBezier transform",
-        ...props5.shapeDirection === "top" ? {
+        ...props4.shapeDirection === "top" ? {
           top: "112%",
           left: "50%",
           transform: "translate3d(-50%,10%,0)",
@@ -16416,7 +16410,7 @@ var init_Tooltip = __esm({
             opacity: 1,
             visibility: "visible"
           }
-        } : props5.shapeDirection === "right" ? {
+        } : props4.shapeDirection === "right" ? {
           transform: "translate3d(10%,-50%,0)",
           right: "112%",
           top: "50%",
@@ -16425,7 +16419,7 @@ var init_Tooltip = __esm({
             opacity: 1,
             visibility: "visible"
           }
-        } : props5.shapeDirection === "bottom" ? {
+        } : props4.shapeDirection === "bottom" ? {
           transform: "translate3d(-50%,-10%,0)",
           bottom: "112%",
           left: "50%",
@@ -16496,7 +16490,7 @@ var init_Pills = __esm({
           }
         }
       },
-      $propsCollection: ({ props: props5, state }) => new Array(props5.qty).fill({})
+      $propsCollection: ({ props: props4, state }) => new Array(props4.qty).fill({})
     };
   }
 });
@@ -17355,7 +17349,7 @@ var init_Dropdown = __esm({
         style: { listStyleType: "none" },
         transition: "B defaultBezier",
         transitionProperty: "transform, opacity, visibility",
-        children: ({ props: props5 }) => props5.options || [],
+        children: ({ props: props4 }) => props4.options || [],
         childrenAs: "props",
         ".hidden": {
           transform: "translate3d(0,10%,0)",
@@ -17462,6 +17456,7 @@ var init_UploadImage = __esm({
         opacity: ".22",
         margin: "0",
         Span: {
+          order: -1,
           text: "Drag and drop your font file",
           display: "block"
         }
@@ -18388,14 +18383,14 @@ var require_cache = __commonJS({
       }
     };
     var detectTag = (element) => {
-      let { tag, key, props: props5 } = element;
+      let { tag, key, props: props4 } = element;
       tag = (0, import_utils30.exec)(tag, element);
       if (tag === true)
         tag = key;
-      if ((0, import_utils30.isObject)(props5) && (0, import_utils30.isString)(props5.tag)) {
-        const tagExists = (0, import_utils30.isValidHtmlTag)(props5.tag);
+      if ((0, import_utils30.isObject)(props4) && (0, import_utils30.isString)(props4.tag)) {
+        const tagExists = (0, import_utils30.isValidHtmlTag)(props4.tag);
         if (tagExists)
-          return props5.tag;
+          return props4.tag;
       }
       if ((0, import_utils30.isString)(tag)) {
         if ((0, import_utils30.isValidHtmlTag)(tag))
@@ -18638,27 +18633,27 @@ var require_create3 = __commonJS({
     var import_ignore = require_ignore2();
     var import_inherit = require_inherit2();
     var createPropsStack = (element, parent) => {
-      const { props: props5, __ref: ref } = element;
+      const { props: props4, __ref: ref } = element;
       const propsStack = ref.__props = (0, import_inherit.inheritParentProps)(element, parent);
-      if ((0, import_utils30.isObject)(props5))
-        propsStack.push(props5);
-      else if (props5 === "inherit" && parent.props)
+      if ((0, import_utils30.isObject)(props4))
+        propsStack.push(props4);
+      else if (props4 === "inherit" && parent.props)
         propsStack.push(parent.props);
-      else if (props5)
-        propsStack.push(props5);
+      else if (props4)
+        propsStack.push(props4);
       if ((0, import_utils30.isArray)(ref.__extend)) {
         ref.__extend.forEach((extend) => {
-          if (extend.props && extend.props !== props5)
+          if (extend.props && extend.props !== props4)
             propsStack.push(extend.props);
         });
       }
       ref.__props = propsStack;
       return propsStack;
     };
-    var syncProps = (props5, element, opts) => {
+    var syncProps = (props4, element, opts) => {
       element.props = {};
       const mergedProps = {};
-      props5.forEach((v) => {
+      props4.forEach((v) => {
         if (import_ignore.IGNORE_PROPS_PARAMS.includes(v))
           return;
         let execProps;
@@ -18704,9 +18699,9 @@ var require_create3 = __commonJS({
       Object.setPrototypeOf(element.props, methods);
       return element;
     };
-    function update(props5, options) {
+    function update(props4, options) {
       const element = this.__element;
-      element.update({ props: props5 }, options);
+      element.update({ props: props4 }, options);
     }
   }
 });
@@ -19142,8 +19137,8 @@ var require_extend = __commonJS({
     var applyExtend = (element, parent, options = {}) => {
       if ((0, import_utils30.isFunction)(element))
         element = (0, import_utils30.exec)(element, parent);
-      const { props: props5, __ref } = element;
-      let extend = (props5 == null ? void 0 : props5.extends) || element.extends || element.extend;
+      const { props: props4, __ref } = element;
+      let extend = (props4 == null ? void 0 : props4.extends) || element.extends || element.extend;
       const context = element.context || parent.context;
       extend = (0, import_utils210.fallbackStringExtend)(extend, context, options);
       const extendStack = (0, import_utils210.getExtendStack)(extend, context);
@@ -19152,9 +19147,9 @@ var require_extend = __commonJS({
       let childExtendStack = [];
       if (parent) {
         element.parent = parent;
-        if (!options.ignoreChildExtend && !(props5 && props5.ignoreChildExtend)) {
+        if (!options.ignoreChildExtend && !(props4 && props4.ignoreChildExtend)) {
           childExtendStack = (0, import_utils210.getExtendStack)(parent.childExtend, context);
-          const ignoreChildExtendRecursive = props5 && props5.ignoreChildExtendRecursive;
+          const ignoreChildExtendRecursive = props4 && props4.ignoreChildExtendRecursive;
           if (parent.childExtendRecursive && !ignoreChildExtendRecursive) {
             const canExtendRecursive = element.key !== "__text";
             if (canExtendRecursive) {
@@ -19262,28 +19257,28 @@ var require_component2 = __commonJS({
       let variantElement = element[variant];
       if (!variantElement)
         return;
-      const props5 = (0, import_utils30.isObject)(variantProps) ? variantProps : {};
+      const props4 = (0, import_utils30.isObject)(variantProps) ? variantProps : {};
       if ((0, import_utils30.isString)(variantElement)) {
         variantElement = {
-          extend: [{ props: props5 }, variantElement]
+          extend: [{ props: props4 }, variantElement]
         };
       } else if (variantElement.extend) {
-        variantElement = (0, import_utils30.addAdditionalExtend)({ props: props5 }, variantElement);
+        variantElement = (0, import_utils30.addAdditionalExtend)({ props: props4 }, variantElement);
       }
       const extendedVariant = (0, import_extend.applyExtend)(variantElement, element.parent);
       const { parent, ...rest } = extendedVariant;
       return (0, import_utils30.overwriteDeep)(element, rest);
     };
     var applyVariant = (element) => {
-      const { props: props5 } = element;
+      const { props: props4 } = element;
       if (!(0, import_utils30.hasVariantProp)(element))
         return element;
-      const { variant } = props5;
+      const { variant } = props4;
       overwriteVariant(element, `.${variant}`);
       const elKeys = Object.keys(element).filter((key) => (0, import_utils30.isVariant)(key));
       elKeys.forEach((variant2) => {
         const slicedVariantElementKey = variant2.slice(1);
-        const variantElementProps = props5[slicedVariantElementKey];
+        const variantElementProps = props4[slicedVariantElementKey];
         if (variantElementProps)
           overwriteVariant(element, variant2, variantElementProps);
       });
@@ -19349,13 +19344,13 @@ var require_attr = __commonJS({
     var import_report = require_cjs5();
     var import_utils210 = require_utils();
     function attr(params, element, node3) {
-      const { __ref: ref, props: props5 } = element;
+      const { __ref: ref, props: props4 } = element;
       const { __attr } = ref;
       if ((0, import_utils30.isNot)("object"))
         (0, import_report.report)("HTMLInvalidAttr", params);
       if (params) {
-        if (props5.attr)
-          (0, import_utils210.deepMerge)(params, props5.attr);
+        if (props4.attr)
+          (0, import_utils210.deepMerge)(params, props4.attr);
         for (const attr2 in params) {
           const val = (0, import_utils30.exec)(params[attr2], element);
           if (val !== false && !(0, import_utils30.isUndefined)(val) && !(0, import_utils30.isNull)(val) && node3.setAttribute)
@@ -19561,12 +19556,12 @@ var require_set = __commonJS({
         return;
       }
       if (params) {
-        const { childExtend, childProps, props: props5 } = params;
+        const { childExtend, childProps, props: props4 } = params;
         if (!childExtend && element.childExtend)
           params.childExtend = element.childExtend;
         if (!childProps && element.childProps)
           params.childProps = element.childProps;
-        if (!(props5 == null ? void 0 : props5.childProps) && ((_a = element.props) == null ? void 0 : _a.childProps)) {
+        if (!(props4 == null ? void 0 : props4.childProps) && ((_a = element.props) == null ? void 0 : _a.childProps)) {
           params.props.childProps = element.props.childProps;
         }
         if (lazyLoad) {
@@ -20307,8 +20302,8 @@ var require_methods2 = __commonJS({
             return;
           obj[v] = JSON.parse(JSON.stringify(val || {}));
         } else if (v === "props") {
-          const { __element, update, ...props5 } = element[v];
-          obj[v] = props5;
+          const { __element, update, ...props4 } = element[v];
+          obj[v] = props4;
         } else if ((0, import_utils30.isDefined)(val) && Object.hasOwnProperty.call(element, v))
           obj[v] = val;
       });
@@ -20521,15 +20516,15 @@ var require_iterate = __commonJS({
     };
     var throughExecProps = (element) => {
       const { __ref: ref } = element;
-      const { props: props5 } = element;
-      for (const k in props5) {
+      const { props: props4 } = element;
+      for (const k in props4) {
         const isDefine = k.startsWith("is") || k.startsWith("has") || k.startsWith("use");
         const cachedExecProp = ref.__execProps[k];
         if ((0, import_utils30.isFunction)(cachedExecProp)) {
-          props5[k] = (0, import_utils30.exec)(cachedExecProp, element);
-        } else if (isDefine && (0, import_utils30.isFunction)(props5[k])) {
-          ref.__execProps[k] = props5[k];
-          props5[k] = (0, import_utils30.exec)(props5[k], element);
+          props4[k] = (0, import_utils30.exec)(cachedExecProp, element);
+        } else if (isDefine && (0, import_utils30.isFunction)(props4[k])) {
+          ref.__execProps[k] = props4[k];
+          props4[k] = (0, import_utils30.exec)(props4[k], element);
         }
       }
     };
@@ -20658,12 +20653,12 @@ var require_propEvents = __commonJS({
     module2.exports = __toCommonJS2(propEvents_exports);
     var import_utils30 = require_cjs();
     var propagateEventsFromProps = (element) => {
-      const { props: props5, on: on2 } = element;
-      const eventKeysFromProps = Object.keys(props5).filter((key) => key.startsWith("on"));
+      const { props: props4, on: on2 } = element;
+      const eventKeysFromProps = Object.keys(props4).filter((key) => key.startsWith("on"));
       eventKeysFromProps.forEach((v) => {
         const eventName = (0, import_utils30.lowercaseFirstLetter)(v.split("on")[1]);
         const origEvent = on2[eventName];
-        const funcFromProps = props5[v];
+        const funcFromProps = props4[v];
         if ((0, import_utils30.isFunction)(origEvent)) {
           on2[eventName] = (...args) => {
             const originalEventRetunrs = origEvent(...args);
@@ -20858,9 +20853,9 @@ var require_update2 = __commonJS({
       if (ref.__if && !options.preventPropsUpdate) {
         const hasParentProps = parent.props && (parent.props[key] || parent.props.childProps);
         const hasFunctionInProps = ref.__props.filter((v) => (0, import_utils30.isFunction)(v));
-        const props5 = params.props || hasParentProps || hasFunctionInProps.length;
-        if (props5)
-          (0, import_props.updateProps)(props5, element, parent);
+        const props4 = params.props || hasParentProps || hasFunctionInProps.length;
+        if (props4)
+          (0, import_props.updateProps)(props4, element, parent);
       }
       if (!options.preventBeforeUpdateListener && !options.preventListeners) {
         const beforeUpdateReturns = (0, import_event.triggerEventOnUpdate)("beforeUpdate", params, element, options);
@@ -21437,13 +21432,13 @@ var require_create4 = __commonJS({
     };
     var checkIfMedia = (key) => key.slice(0, 1) === "@";
     var applyMediaProps2 = (element, parent, key) => {
-      const { props: props5 } = element;
-      if (props5) {
-        props5.display = "none";
-        if (props5[key])
-          props5[key].display = props5.display;
+      const { props: props4 } = element;
+      if (props4) {
+        props4.display = "none";
+        if (props4[key])
+          props4[key].display = props4.display;
         else
-          props5[key] = { display: props5.display || "block" };
+          props4[key] = { display: props4.display || "block" };
         return element;
       } else {
         return {
@@ -25665,7 +25660,7 @@ var require_cjs14 = __commonJS({
           const obj = JSON.parse(data);
           if (!(obj == null ? void 0 : obj.DATA))
             return;
-          const { state, designSystem, pages, components, snippets } = obj.DATA;
+          const { state, designSystem, pages, components, snippets, functions } = obj.DATA;
           const { utils: utils2 } = ctx;
           if (pages) {
             (0, import_utils30.overwriteShallow)(ctx.pages, pages);
@@ -25673,6 +25668,9 @@ var require_cjs14 = __commonJS({
           if (components) {
             (0, import_utils30.overwriteShallow)(ctx.components, components);
           }
+          if (functions) {
+            (0, import_utils30.overwriteShallow)(ctx.functions, functions);
+          }
           if (snippets) {
             (0, import_utils30.overwriteShallow)(ctx.snippets, snippets);
           }
@@ -25680,10 +25678,10 @@ var require_cjs14 = __commonJS({
             const route = state.route;
             if (route)
               (utils2.router || import_router5.router)(route.replace("/state", "") || "/", el, {});
-            else if (!(snippets && components && pages))
+            else if (!(snippets && functions && components && pages))
               s.update(state);
           }
-          if (snippets || components || pages) {
+          if (snippets || functions || components || pages) {
             const { pathname, search, hash: hash3 } = ctx.window.location;
             (utils2.router || import_router5.router)(pathname + search + hash3, el, {});
           }
@@ -26839,13 +26837,13 @@ var require_object3 = __commonJS({
       }
       return true;
     };
-    var removeFromObject = (obj, props5) => {
-      if (props5 === void 0 || props5 === null)
+    var removeFromObject = (obj, props4) => {
+      if (props4 === void 0 || props4 === null)
         return obj;
-      if ((0, import_types.is)(props5)("string", "number")) {
-        delete obj[props5];
-      } else if ((0, import_types.isArray)(props5)) {
-        props5.forEach((prop) => delete obj[prop]);
+      if ((0, import_types.is)(props4)("string", "number")) {
+        delete obj[props4];
+      } else if ((0, import_types.isArray)(props4)) {
+        props4.forEach((prop) => delete obj[prop]);
       } else {
         throw new Error("Invalid input: props must be a string or an array of strings");
       }
@@ -27398,7 +27396,7 @@ var require_component3 = __commonJS({
       var _a;
       const {
         extend,
-        props: props5,
+        props: props4,
         childExtend,
         extends: extendProps,
         childExtends,
@@ -27409,7 +27407,7 @@ var require_component3 = __commonJS({
         $stateCollection,
         $propsCollection
       } = element;
-      const hasComponentAttrs = extend || childExtend || props5 || on2 || $collection || $stateCollection || $propsCollection;
+      const hasComponentAttrs = extend || childExtend || props4 || on2 || $collection || $stateCollection || $propsCollection;
       if (hasComponentAttrs && (childProps || extendProps || children || childExtends)) {
         const logErr = (_a = parent || element) == null ? void 0 : _a.error;
         if (logErr)
@@ -27512,8 +27510,8 @@ var require_component3 = __commonJS({
       return firstCharKey === ".";
     };
     var hasVariantProp = (element) => {
-      const { props: props5 } = element;
-      if ((0, import__.isObject)(props5) && (0, import__.isString)(props5.variant))
+      const { props: props4 } = element;
+      if ((0, import__.isObject)(props4) && (0, import__.isString)(props4.variant))
         return true;
     };
     var getChildrenComponentsByKey = (key, el) => {
@@ -27910,7 +27908,7 @@ var initRouter = (element, context) => {
   else
     (0, import_utils20.merge)(context.router || {}, DEFAULT_ROUTING_OPTIONS);
   const routerOptions = context.router;
-  const router = context.snippets && context.snippets.router ? context.snippets.router : import_router2.router;
+  const router = context.utils && context.utils.router ? context.utils.router : import_router2.router;
   const onRouterRenderDefault = (el, s) => {
     const { pathname, search, hash: hash3 } = import_utils20.window.location;
     const url2 = pathname + search + hash3;
@@ -27938,7 +27936,7 @@ var popStateRouter = (element, context) => {
   const routerOptions = context.router || DEFAULT_ROUTING_OPTIONS;
   if (!routerOptions.popState)
     return;
-  const router = context.snippets && context.snippets.router ? context.snippets.router : import_router2.router;
+  const router = context.utils && context.utils.router ? context.utils.router : import_router2.router;
   import_utils20.window.onpopstate = (e) => {
     const { pathname, search, hash: hash3 } = import_utils20.window.location;
     const url2 = pathname + search + hash3;
@@ -28262,11 +28260,11 @@ var length2 = 0;
 var position2 = 0;
 var character2 = 0;
 var characters2 = "";
-function node2(value2, root, parent, type, props5, children, length3) {
-  return { value: value2, root, parent, type, props: props5, children, line: line2, column: column2, length: length3, return: "" };
+function node2(value2, root, parent, type, props4, children, length3) {
+  return { value: value2, root, parent, type, props: props4, children, line: line2, column: column2, length: length3, return: "" };
 }
-function copy2(root, props5) {
-  return assign2(node2("", null, null, "", null, null, 0), root, { length: -root.length }, props5);
+function copy2(root, props4) {
+  return assign2(node2("", null, null, "", null, null, 0), root, { length: -root.length }, props4);
 }
 function char2() {
   return character2;
@@ -28397,7 +28395,7 @@ function parse3(value2, root, parent, rule, rules, rulesets, pseudo, points, dec
   var ampersand = 1;
   var character3 = 0;
   var type = "";
-  var props5 = rules;
+  var props4 = rules;
   var children = rulesets;
   var reference = rule;
   var characters3 = type;
@@ -28451,17 +28449,17 @@ function parse3(value2, root, parent, rule, rules, rulesets, pseudo, points, dec
           case 59:
             characters3 += ";";
           default:
-            append2(reference = ruleset2(characters3, root, parent, index, offset, rules, points, type, props5 = [], children = [], length3), rulesets);
+            append2(reference = ruleset2(characters3, root, parent, index, offset, rules, points, type, props4 = [], children = [], length3), rulesets);
             if (character3 === 123)
               if (offset === 0)
-                parse3(characters3, root, reference, reference, props5, rulesets, length3, points, children);
+                parse3(characters3, root, reference, reference, props4, rulesets, length3, points, children);
               else
                 switch (atrule === 99 && charat2(characters3, 3) === 110 ? 100 : atrule) {
                   case 100:
                   case 108:
                   case 109:
                   case 115:
-                    parse3(value2, reference, reference, rule && append2(ruleset2(value2, reference, reference, 0, 0, rules, points, type, rules, props5 = [], length3), children), rules, children, length3, points, rule ? props5 : children);
+                    parse3(value2, reference, reference, rule && append2(ruleset2(value2, reference, reference, 0, 0, rules, points, type, rules, props4 = [], length3), children), rules, children, length3, points, rule ? props4 : children);
                     break;
                   default:
                     parse3(characters3, reference, reference, reference, [""], children, 0, points, children);
@@ -28497,15 +28495,15 @@ function parse3(value2, root, parent, rule, rules, rulesets, pseudo, points, dec
     }
   return rulesets;
 }
-function ruleset2(value2, root, parent, index, offset, rules, points, type, props5, children, length3) {
+function ruleset2(value2, root, parent, index, offset, rules, points, type, props4, children, length3) {
   var post = offset - 1;
   var rule = offset === 0 ? rules : [""];
   var size = sizeof2(rule);
   for (var i = 0, j = 0, k = 0; i < index; ++i)
     for (var x = 0, y = substr2(value2, post + 1, post = abs2(j = points[i])), z = value2; x < size; ++x)
       if (z = trim2(j > 0 ? rule[x] + " " + y : replace2(y, /&\f/g, rule[x])))
-        props5[k++] = z;
-  return node2(value2, root, parent, offset === 0 ? RULESET2 : type, props5, children, length3);
+        props4[k++] = z;
+  return node2(value2, root, parent, offset === 0 ? RULESET2 : type, props4, children, length3);
 }
 function comment2(value2, root, parent) {
   return node2(value2, root, parent, COMMENT2, from2(char2()), substr2(value2, 2, -2), 0);
@@ -29956,7 +29954,7 @@ var prepareComponents = (context) => {
   return context.components ? { ...UIkitWithPrefix(), ...context.components } : UIkitWithPrefix();
 };
 var prepareUtils = (context) => {
-  return { ...utilImports_exports, ...import_scratch2.scratchUtils, ...context.snippets || context.utils || context.functions || {} };
+  return { ...utilImports_exports, ...import_scratch2.scratchUtils, ...context.utils, ...context.snippets, ...context.functions };
 };
 var prepareMethods = (context) => {
   return {
@@ -29965,7 +29963,7 @@ var prepareMethods = (context) => {
     requireOnDemand: context.utils.requireOnDemand,
     call: function(fnKey, ...args) {
       var _a;
-      return (_a = context.utils[fnKey] || context.methods[fnKey]) == null ? void 0 : _a.call(this, ...args);
+      return (_a = context.utils[fnKey] || context.functions[fnKey] || context.methods[fnKey] || context.snippets[fnKey]) == null ? void 0 : _a.call(this, ...args);
     }
   };
 };
@@ -30088,9 +30086,8 @@ var initAnimationFrame = () => {
 };
 
 // src/createDomql.js
-var SYMBOLS_KEY = process.env.SYMBOLS_KEY;
 var prepareContext = (app, context = {}) => {
-  const key = context.key = context.key || SYMBOLS_KEY || ((0, import_utils28.isString)(app) ? app : "smblsapp");
+  const key = context.key = context.key || ((0, import_utils28.isString)(app) ? app : "smblsapp");
   context.define = context.define || defaultDefine;
   context.window = prepareWindow(context);
   const [scratcDesignSystem, emotion2, registry] = prepareDesignSystem(key, context);
@@ -30102,7 +30099,6 @@ var prepareContext = (app, context = {}) => {
   context.pages = preparePages(app, context);
   context.components = prepareComponents(context);
   context.utils = prepareUtils(context);
-  context.snippets = context.utils;
   context.dependencies = prepareDependencies(context);
   context.methods = prepareMethods(context);
   context.routerOptions = initRouter(app, context);
@@ -30131,8 +30127,8 @@ var createDomqlElement = (app, ctx) => {
   app.data = app.data || {};
   app.data.frameListeners = initAnimationFrame();
   prepareRequire({
-    functions: ctx.snippets,
-    utils: ctx.snippets,
+    functions: ctx.functions,
+    utils: ctx.utils,
     snippets: ctx.snippets,
     ...ctx.files
   }, ctx);
@@ -30149,7 +30145,6 @@ var createDomqlElement = (app, ctx) => {
 };
 
 // src/index.js
-var SYMBOLS_KEY2 = process.env.SYMBOLS_KEY;
 var mergeWithLocalFile2 = (options, optionsExternalFile) => (0, import_utils29.deepMerge)(
   options,
   (0, import_utils29.isObject)(optionsExternalFile) ? optionsExternalFile : dynamic_default || {}
@@ -30165,13 +30160,13 @@ var create = (App, options = options_default, optionsExternalFile) => {
 var createAsync = (App, options = options_default, optionsExternalFile) => {
   const domqlApp = create(App, options, optionsExternalFile);
   const redefinedOptions = { ...options_default, ...mergeWithLocalFile2(options, optionsExternalFile) };
-  const key = redefinedOptions.key || SYMBOLS_KEY2;
+  const key = redefinedOptions.key;
   fetchAsync(domqlApp, key, { utils: utilImports_exports, ...redefinedOptions });
   return domqlApp;
 };
 var createSync = async (App, options = options_default, optionsExternalFile) => {
   const redefinedOptions = { ...options_default, ...mergeWithLocalFile2(options, optionsExternalFile) };
-  const key = options.key || SYMBOLS_KEY2;
+  const key = options.key;
   await fetchSync(key, redefinedOptions);
   const domqlApp = createDomqlElement(App, redefinedOptions);
   if (redefinedOptions.on && redefinedOptions.on.create)