@symbo.ls/create 2.11.453 → 2.11.455

package/dist/cjs/bundle/index.js

@@ -769,10 +769,10 @@ var require_object = __commonJS({
       return o;
     };
     var deepStringify = (obj, stringified = {}) => {
-      var _a;
+      var _a, _b;
       if (obj.node || obj.__ref || obj.parent || obj.__element || obj.parse) {
-        console.warn("Trying to clone element or state at", obj);
-        obj = (_a = obj.parse) == null ? void 0 : _a.call(obj);
+        (obj.__element || ((_a = obj.parent) == null ? void 0 : _a.__element)).warn("Trying to clone element or state at", obj);
+        obj = (_b = obj.parse) == null ? void 0 : _b.call(obj);
       }
       for (const prop in obj) {
         const objProp = obj[prop];
@@ -1154,13 +1154,13 @@ var require_object = __commonJS({
       }
       return true;
     };
-    var removeFromObject = (obj, props2) => {
-      if (props2 === void 0 || props2 === null)
+    var removeFromObject = (obj, props5) => {
+      if (props5 === void 0 || props5 === null)
         return obj;
-      if ((0, import_types.is)(props2)("string", "number")) {
-        delete obj[props2];
-      } else if ((0, import_types.isArray)(props2)) {
-        props2.forEach((prop) => delete obj[prop]);
+      if ((0, import_types.is)(props5)("string", "number")) {
+        delete obj[props5];
+      } else if ((0, import_types.isArray)(props5)) {
+        props5.forEach((prop) => delete obj[prop]);
       } else {
         throw new Error("Invalid input: props must be a string or an array of strings");
       }
@@ -1412,9 +1412,11 @@ var require_cookie = __commonJS({
     var cookie_exports = {};
     __export2(cookie_exports, {
       getCookie: () => getCookie,
+      getLocalStorage: () => getLocalStorage,
       isMobile: () => isMobile,
       removeCookie: () => removeCookie,
-      setCookie: () => setCookie
+      setCookie: () => setCookie,
+      setLocalStorage: () => setLocalStorage
     });
     module2.exports = __toCommonJS2(cookie_exports);
     var import_types = require_types();
@@ -1448,6 +1450,27 @@ var require_cookie = __commonJS({
         return;
       import_utils32.document.cookie = cname + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
     };
+    function getLocalStorage(key) {
+      let savedJSON;
+      if (window.localStorage) {
+        try {
+          savedJSON = JSON.parse(window.localStorage.getItem(key));
+        } catch (e) {
+        }
+      }
+      if (typeof savedJSON !== "undefined") {
+        return savedJSON;
+      }
+    }
+    function setLocalStorage(key, data) {
+      if (data && window.localStorage) {
+        if (typeof data === "object") {
+          window.localStorage.setItem(key, JSON.stringify(data));
+        } else {
+          window.localStorage.setItem(key, data);
+        }
+      }
+    }
   }
 });
 
@@ -1651,7 +1674,9 @@ var require_component = __commonJS({
       applyKeyComponentAsExtend: () => applyKeyComponentAsExtend,
       checkIfKeyIsComponent: () => checkIfKeyIsComponent2,
       checkIfKeyIsProperty: () => checkIfKeyIsProperty,
+      checkIfSugar: () => checkIfSugar,
       extendizeByKey: () => extendizeByKey,
+      getCapitalCaseKeys: () => getCapitalCaseKeys,
       getChildrenComponentsByKey: () => getChildrenComponentsByKey,
       getExtendsInElement: () => getExtendsInElement,
       hasVariantProp: () => hasVariantProp,
@@ -1685,12 +1710,13 @@ var require_component = __commonJS({
       return { ...element, extend };
     };
     var checkIfSugar = (element, parent, key) => {
+      var _a;
       const {
         extend,
-        props: props2,
+        props: props5,
         childExtend,
         extends: extendProps,
-        childrenExtends,
+        childExtends,
         childProps,
         children,
         on: on2,
@@ -1698,16 +1724,18 @@ var require_component = __commonJS({
         $stateCollection,
         $propsCollection
       } = element;
-      const hasComponentAttrs = extend || childExtend || props2 || on2 || $collection || $stateCollection || $propsCollection;
-      if (hasComponentAttrs && (childProps || extendProps || children || childrenExtends)) {
-        element.error("Sugar component includes params for builtin components");
+      const hasComponentAttrs = extend || childExtend || props5 || on2 || $collection || $stateCollection || $propsCollection;
+      if (hasComponentAttrs && (childProps || extendProps || children || childExtends)) {
+        const logErr = (_a = parent || element) == null ? void 0 : _a.error;
+        if (logErr)
+          logErr("Sugar component includes params for builtin components", { verbose: true });
       }
-      return !hasComponentAttrs || childProps || extendProps || children || childrenExtends;
+      return !hasComponentAttrs || childProps || extendProps || children || childExtends;
     };
     var extendizeByKey = (element, parent, key) => {
       const { context } = parent;
-      const { tag, extend, childrenExtends } = element;
-      const isSugar = checkIfSugar(element);
+      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 isExtendKeyComponent = context && context.components[extendFromKey];
       if (element === isExtendKeyComponent)
@@ -1718,8 +1746,8 @@ var require_component = __commonJS({
           tag,
           props: { ...element }
         });
-        if (childrenExtends)
-          newElem.childExtend = childrenExtends;
+        if (childExtends)
+          newElem.childExtend = childExtends;
         return newElem;
       } else if (!extend || extend === true) {
         return {
@@ -1748,23 +1776,24 @@ var require_component = __commonJS({
         const childKey = childElems[i];
         const childElem = element[childKey];
         const newChild = element.props[childKey];
+        const assignChild = (val) => {
+          element[childKey] = val;
+          delete element.props[childKey];
+        };
         if (newChild == null ? void 0 : newChild.ignoreExtend)
           continue;
-        if (!childElem)
-          element[childKey] = (0, import__.deepCloneWithExtend)(newChild);
+        if (newChild === null)
+          assignChild(null);
+        else if (!childElem)
+          assignChild((0, import__.deepCloneWithExtend)(newChild));
         else {
-          const isSugar = checkIfSugar(childElem);
-          if (!isSugar)
+          const isSugarChildElem = checkIfSugar(childElem, parent, key);
+          if (isSugarChildElem)
             continue;
-          const inheritedChildElem = element[childKey].props;
-          if ((0, import__.isObjectLike)(newChild)) {
-            (0, import__.overwriteDeep)(inheritedChildElem, newChild);
-          } else if ((0, import__.isFunction)(newChild)) {
-            element[childKey] = {
-              extend: element[childKey],
-              props: newChild
-            };
-          }
+          assignChild({
+            extend: element[childKey],
+            props: newChild
+          });
         }
       }
     };
@@ -1798,8 +1827,8 @@ var require_component = __commonJS({
       return firstCharKey === ".";
     };
     var hasVariantProp = (element) => {
-      const { props: props2 } = element;
-      if ((0, import__.isObject)(props2) && (0, import__.isString)(props2.variant))
+      const { props: props5 } = element;
+      if ((0, import__.isObject)(props5) && (0, import__.isString)(props5.variant))
         return true;
     };
     var getChildrenComponentsByKey = (key, el) => {
@@ -2684,10 +2713,10 @@ var require_cjs2 = __commonJS({
           return o;
         };
         var deepStringify = (obj, stringified = {}) => {
-          var _a;
+          var _a, _b;
           if (obj.node || obj.__ref || obj.parent || obj.__element || obj.parse) {
-            console.warn("Trying to clone element or state at", obj);
-            obj = (_a = obj.parse) == null ? void 0 : _a.call(obj);
+            (obj.__element || ((_a = obj.parent) == null ? void 0 : _a.__element)).warn("Trying to clone element or state at", obj);
+            obj = (_b = obj.parse) == null ? void 0 : _b.call(obj);
           }
           for (const prop in obj) {
             const objProp = obj[prop];
@@ -3069,13 +3098,13 @@ var require_cjs2 = __commonJS({
           }
           return true;
         };
-        var removeFromObject = (obj, props2) => {
-          if (props2 === void 0 || props2 === null)
+        var removeFromObject = (obj, props5) => {
+          if (props5 === void 0 || props5 === null)
             return obj;
-          if ((0, import_types.is)(props2)("string", "number")) {
-            delete obj[props2];
-          } else if ((0, import_types.isArray)(props2)) {
-            props2.forEach((prop) => delete obj[prop]);
+          if ((0, import_types.is)(props5)("string", "number")) {
+            delete obj[props5];
+          } else if ((0, import_types.isArray)(props5)) {
+            props5.forEach((prop) => delete obj[prop]);
           } else {
             throw new Error("Invalid input: props must be a string or an array of strings");
           }
@@ -3321,9 +3350,11 @@ var require_cjs2 = __commonJS({
         var cookie_exports = {};
         __export22(cookie_exports, {
           getCookie: () => getCookie,
+          getLocalStorage: () => getLocalStorage,
           isMobile: () => isMobile,
           removeCookie: () => removeCookie,
-          setCookie: () => setCookie
+          setCookie: () => setCookie,
+          setLocalStorage: () => setLocalStorage
         });
         module22.exports = __toCommonJS22(cookie_exports);
         var import_types = require_types3();
@@ -3357,6 +3388,27 @@ var require_cjs2 = __commonJS({
             return;
           import_utils272.document.cookie = cname + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
         };
+        function getLocalStorage(key) {
+          let savedJSON;
+          if (window.localStorage) {
+            try {
+              savedJSON = JSON.parse(window.localStorage.getItem(key));
+            } catch (e) {
+            }
+          }
+          if (typeof savedJSON !== "undefined") {
+            return savedJSON;
+          }
+        }
+        function setLocalStorage(key, data) {
+          if (data && window.localStorage) {
+            if (typeof data === "object") {
+              window.localStorage.setItem(key, JSON.stringify(data));
+            } else {
+              window.localStorage.setItem(key, data);
+            }
+          }
+        }
       }
     });
     var require_tags3 = __commonJS2({
@@ -3556,7 +3608,9 @@ var require_cjs2 = __commonJS({
           applyKeyComponentAsExtend: () => applyKeyComponentAsExtend,
           checkIfKeyIsComponent: () => checkIfKeyIsComponent2,
           checkIfKeyIsProperty: () => checkIfKeyIsProperty,
+          checkIfSugar: () => checkIfSugar,
           extendizeByKey: () => extendizeByKey,
+          getCapitalCaseKeys: () => getCapitalCaseKeys,
           getChildrenComponentsByKey: () => getChildrenComponentsByKey,
           getExtendsInElement: () => getExtendsInElement,
           hasVariantProp: () => hasVariantProp,
@@ -3590,12 +3644,13 @@ var require_cjs2 = __commonJS({
           return { ...element, extend };
         };
         var checkIfSugar = (element, parent, key) => {
+          var _a;
           const {
             extend,
-            props: props2,
+            props: props5,
             childExtend,
             extends: extendProps,
-            childrenExtends,
+            childExtends,
             childProps,
             children,
             on: on2,
@@ -3603,16 +3658,18 @@ var require_cjs2 = __commonJS({
             $stateCollection,
             $propsCollection
           } = element;
-          const hasComponentAttrs = extend || childExtend || props2 || on2 || $collection || $stateCollection || $propsCollection;
-          if (hasComponentAttrs && (childProps || extendProps || children || childrenExtends)) {
-            element.error("Sugar component includes params for builtin components");
+          const hasComponentAttrs = extend || childExtend || props5 || on2 || $collection || $stateCollection || $propsCollection;
+          if (hasComponentAttrs && (childProps || extendProps || children || childExtends)) {
+            const logErr = (_a = parent || element) == null ? void 0 : _a.error;
+            if (logErr)
+              logErr("Sugar component includes params for builtin components", { verbose: true });
           }
-          return !hasComponentAttrs || childProps || extendProps || children || childrenExtends;
+          return !hasComponentAttrs || childProps || extendProps || children || childExtends;
         };
         var extendizeByKey = (element, parent, key) => {
           const { context } = parent;
-          const { tag, extend, childrenExtends } = element;
-          const isSugar = checkIfSugar(element);
+          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 isExtendKeyComponent = context && context.components[extendFromKey];
           if (element === isExtendKeyComponent)
@@ -3623,8 +3680,8 @@ var require_cjs2 = __commonJS({
               tag,
               props: { ...element }
             });
-            if (childrenExtends)
-              newElem.childExtend = childrenExtends;
+            if (childExtends)
+              newElem.childExtend = childExtends;
             return newElem;
           } else if (!extend || extend === true) {
             return {
@@ -3653,23 +3710,24 @@ var require_cjs2 = __commonJS({
             const childKey = childElems[i];
             const childElem = element[childKey];
             const newChild = element.props[childKey];
+            const assignChild = (val) => {
+              element[childKey] = val;
+              delete element.props[childKey];
+            };
             if (newChild == null ? void 0 : newChild.ignoreExtend)
               continue;
-            if (!childElem)
-              element[childKey] = (0, import__.deepCloneWithExtend)(newChild);
+            if (newChild === null)
+              assignChild(null);
+            else if (!childElem)
+              assignChild((0, import__.deepCloneWithExtend)(newChild));
             else {
-              const isSugar = checkIfSugar(childElem);
-              if (!isSugar)
+              const isSugarChildElem = checkIfSugar(childElem, parent, key);
+              if (isSugarChildElem)
                 continue;
-              const inheritedChildElem = element[childKey].props;
-              if ((0, import__.isObjectLike)(newChild)) {
-                (0, import__.overwriteDeep)(inheritedChildElem, newChild);
-              } else if ((0, import__.isFunction)(newChild)) {
-                element[childKey] = {
-                  extend: element[childKey],
-                  props: newChild
-                };
-              }
+              assignChild({
+                extend: element[childKey],
+                props: newChild
+              });
             }
           }
         };
@@ -3703,8 +3761,8 @@ var require_cjs2 = __commonJS({
           return firstCharKey === ".";
         };
         var hasVariantProp = (element) => {
-          const { props: props2 } = element;
-          if ((0, import__.isObject)(props2) && (0, import__.isString)(props2.variant))
+          const { props: props5 } = element;
+          if ((0, import__.isObject)(props5) && (0, import__.isString)(props5.variant))
             return true;
         };
         var getChildrenComponentsByKey = (key, el) => {
@@ -4551,10 +4609,10 @@ var require_cjs2 = __commonJS({
               return o;
             };
             var deepStringify = (obj, stringified = {}) => {
-              var _a;
+              var _a, _b;
               if (obj.node || obj.__ref || obj.parent || obj.__element || obj.parse) {
-                console.warn("Trying to clone element or state at", obj);
-                obj = (_a = obj.parse) == null ? void 0 : _a.call(obj);
+                (obj.__element || ((_a = obj.parent) == null ? void 0 : _a.__element)).warn("Trying to clone element or state at", obj);
+                obj = (_b = obj.parse) == null ? void 0 : _b.call(obj);
               }
               for (const prop in obj) {
                 const objProp = obj[prop];
@@ -4936,13 +4994,13 @@ var require_cjs2 = __commonJS({
               }
               return true;
             };
-            var removeFromObject = (obj, props2) => {
-              if (props2 === void 0 || props2 === null)
+            var removeFromObject = (obj, props5) => {
+              if (props5 === void 0 || props5 === null)
                 return obj;
-              if ((0, import_types.is)(props2)("string", "number")) {
-                delete obj[props2];
-              } else if ((0, import_types.isArray)(props2)) {
-                props2.forEach((prop) => delete obj[prop]);
+              if ((0, import_types.is)(props5)("string", "number")) {
+                delete obj[props5];
+              } else if ((0, import_types.isArray)(props5)) {
+                props5.forEach((prop) => delete obj[prop]);
               } else {
                 throw new Error("Invalid input: props must be a string or an array of strings");
               }
@@ -5188,9 +5246,11 @@ var require_cjs2 = __commonJS({
             var cookie_exports = {};
             __export222(cookie_exports, {
               getCookie: () => getCookie,
+              getLocalStorage: () => getLocalStorage,
               isMobile: () => isMobile,
               removeCookie: () => removeCookie,
-              setCookie: () => setCookie
+              setCookie: () => setCookie,
+              setLocalStorage: () => setLocalStorage
             });
             module222.exports = __toCommonJS222(cookie_exports);
             var import_types = require_types22();
@@ -5224,6 +5284,27 @@ var require_cjs2 = __commonJS({
                 return;
               import_utils322.document.cookie = cname + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
             };
+            function getLocalStorage(key) {
+              let savedJSON;
+              if (window.localStorage) {
+                try {
+                  savedJSON = JSON.parse(window.localStorage.getItem(key));
+                } catch (e) {
+                }
+              }
+              if (typeof savedJSON !== "undefined") {
+                return savedJSON;
+              }
+            }
+            function setLocalStorage(key, data) {
+              if (data && window.localStorage) {
+                if (typeof data === "object") {
+                  window.localStorage.setItem(key, JSON.stringify(data));
+                } else {
+                  window.localStorage.setItem(key, data);
+                }
+              }
+            }
           }
         });
         var require_tags22 = __commonJS22({
@@ -5423,7 +5504,9 @@ var require_cjs2 = __commonJS({
               applyKeyComponentAsExtend: () => applyKeyComponentAsExtend,
               checkIfKeyIsComponent: () => checkIfKeyIsComponent2,
               checkIfKeyIsProperty: () => checkIfKeyIsProperty,
+              checkIfSugar: () => checkIfSugar,
               extendizeByKey: () => extendizeByKey,
+              getCapitalCaseKeys: () => getCapitalCaseKeys,
               getChildrenComponentsByKey: () => getChildrenComponentsByKey,
               getExtendsInElement: () => getExtendsInElement,
               hasVariantProp: () => hasVariantProp,
@@ -5457,12 +5540,13 @@ var require_cjs2 = __commonJS({
               return { ...element, extend };
             };
             var checkIfSugar = (element, parent, key) => {
+              var _a;
               const {
                 extend,
-                props: props2,
+                props: props5,
                 childExtend,
                 extends: extendProps,
-                childrenExtends,
+                childExtends,
                 childProps,
                 children,
                 on: on2,
@@ -5470,16 +5554,18 @@ var require_cjs2 = __commonJS({
                 $stateCollection,
                 $propsCollection
               } = element;
-              const hasComponentAttrs = extend || childExtend || props2 || on2 || $collection || $stateCollection || $propsCollection;
-              if (hasComponentAttrs && (childProps || extendProps || children || childrenExtends)) {
-                element.error("Sugar component includes params for builtin components");
+              const hasComponentAttrs = extend || childExtend || props5 || on2 || $collection || $stateCollection || $propsCollection;
+              if (hasComponentAttrs && (childProps || extendProps || children || childExtends)) {
+                const logErr = (_a = parent || element) == null ? void 0 : _a.error;
+                if (logErr)
+                  logErr("Sugar component includes params for builtin components", { verbose: true });
               }
-              return !hasComponentAttrs || childProps || extendProps || children || childrenExtends;
+              return !hasComponentAttrs || childProps || extendProps || children || childExtends;
             };
             var extendizeByKey = (element, parent, key) => {
               const { context } = parent;
-              const { tag, extend, childrenExtends } = element;
-              const isSugar = checkIfSugar(element);
+              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 isExtendKeyComponent = context && context.components[extendFromKey];
               if (element === isExtendKeyComponent)
@@ -5490,8 +5576,8 @@ var require_cjs2 = __commonJS({
                   tag,
                   props: { ...element }
                 });
-                if (childrenExtends)
-                  newElem.childExtend = childrenExtends;
+                if (childExtends)
+                  newElem.childExtend = childExtends;
                 return newElem;
               } else if (!extend || extend === true) {
                 return {
@@ -5520,23 +5606,24 @@ var require_cjs2 = __commonJS({
                 const childKey = childElems[i];
                 const childElem = element[childKey];
                 const newChild = element.props[childKey];
+                const assignChild = (val) => {
+                  element[childKey] = val;
+                  delete element.props[childKey];
+                };
                 if (newChild == null ? void 0 : newChild.ignoreExtend)
                   continue;
-                if (!childElem)
-                  element[childKey] = (0, import__.deepCloneWithExtend)(newChild);
+                if (newChild === null)
+                  assignChild(null);
+                else if (!childElem)
+                  assignChild((0, import__.deepCloneWithExtend)(newChild));
                 else {
-                  const isSugar = checkIfSugar(childElem);
-                  if (!isSugar)
+                  const isSugarChildElem = checkIfSugar(childElem, parent, key);
+                  if (isSugarChildElem)
                     continue;
-                  const inheritedChildElem = element[childKey].props;
-                  if ((0, import__.isObjectLike)(newChild)) {
-                    (0, import__.overwriteDeep)(inheritedChildElem, newChild);
-                  } else if ((0, import__.isFunction)(newChild)) {
-                    element[childKey] = {
-                      extend: element[childKey],
-                      props: newChild
-                    };
-                  }
+                  assignChild({
+                    extend: element[childKey],
+                    props: newChild
+                  });
                 }
               }
             };
@@ -5570,8 +5657,8 @@ var require_cjs2 = __commonJS({
               return firstCharKey === ".";
             };
             var hasVariantProp = (element) => {
-              const { props: props2 } = element;
-              if ((0, import__.isObject)(props2) && (0, import__.isString)(props2.variant))
+              const { props: props5 } = element;
+              if ((0, import__.isObject)(props5) && (0, import__.isString)(props5.variant))
                 return true;
             };
             var getChildrenComponentsByKey = (key, el) => {
@@ -6463,8 +6550,8 @@ var require_cjs2 = __commonJS({
       18: "S",
       19: "T"
     };
-    var setSequenceValue = (props2, sequenceProps) => {
-      const { key, variable, value: value2, scaling, index, scalingVariable } = props2;
+    var setSequenceValue = (props5, sequenceProps) => {
+      const { key, variable, value: value2, scaling, index, scalingVariable } = props5;
       sequenceProps.sequence[key] = {
         key,
         decimal: ~~(value2 * 100) / 100,
@@ -6512,8 +6599,8 @@ var require_cjs2 = __commonJS({
     var getSubratio = (base, ratio) => {
       return getSubratioDifference(base, ratio).map((v) => v / base);
     };
-    var generateSubSequence = (props2, sequenceProps) => {
-      const { key, base, value: value2, ratio, variable, index } = props2;
+    var generateSubSequence = (props5, sequenceProps) => {
+      const { key, base, value: value2, ratio, variable, index } = props5;
       const next3 = value2 * ratio;
       const diffRounded = ~~next3 - ~~value2;
       let arr;
@@ -6552,7 +6639,7 @@ var require_cjs2 = __commonJS({
         const scaling = ~~(value2 / base * 100) / 100;
         const variable = prefix3 + letterKey;
         const scalingVariable = setScalingVar(key, sequenceProps);
-        const props2 = {
+        const props5 = {
           key: letterKey,
           variable,
           value: value2,
@@ -6562,9 +6649,9 @@ var require_cjs2 = __commonJS({
           ratio,
           index: key
         };
-        setSequenceValue(props2, sequenceProps);
+        setSequenceValue(props5, sequenceProps);
         if (subSequence)
-          generateSubSequence(props2, sequenceProps);
+          generateSubSequence(props5, sequenceProps);
       }
       return sequenceProps;
     };
@@ -7240,20 +7327,20 @@ var require_cjs2 = __commonJS({
         applyMediaSequenceVars(FACTORY2, prop);
       }
     };
-    var applyHeadings = (props2) => {
+    var applyHeadings = (props5) => {
       const CONFIG22 = getActiveConfig3();
-      if (props2.h1Matches) {
-        const unit = props2.unit;
-        const HEADINGS = findHeadings(props2);
-        const { templates } = props2;
+      if (props5.h1Matches) {
+        const unit = props5.unit;
+        const HEADINGS = findHeadings(props5);
+        const { templates } = props5;
         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 : props2.lineHeight,
-            letterSpacing: headerStyle ? headerStyle.letterSpacing : props2.letterSpacing,
+            lineHeight: headerStyle ? headerStyle.lineHeight : props5.lineHeight,
+            letterSpacing: headerStyle ? headerStyle.letterSpacing : props5.letterSpacing,
             fontWeight: headerStyle ? headerStyle.fontWeight : 900 - k * 100
           };
         }
@@ -7357,11 +7444,11 @@ var require_cjs2 = __commonJS({
         sequence
       );
     };
-    var getSpacingBasedOnRatio4 = (props2, propertyName, val) => {
+    var getSpacingBasedOnRatio4 = (props5, propertyName, val) => {
       const CONFIG22 = getActiveConfig3();
       const { SPACING: SPACING22 } = CONFIG22;
-      const { spacingRatio, unit } = props2;
-      const value2 = val || props2[propertyName];
+      const { spacingRatio, unit } = props5;
+      const value2 = val || props5[propertyName];
       if (spacingRatio) {
         let sequenceProps = SPACING22[spacingRatio];
         if (!sequenceProps) {
@@ -7731,7 +7818,7 @@ var require_cjs2 = __commonJS({
         return v;
       }).join(" ");
     };
-    var transformDuration2 = (duration, props2, propertyName) => {
+    var transformDuration2 = (duration, props5, propertyName) => {
       if (!(0, import_utils252.isString)(duration))
         return;
       return duration.split(",").map((v) => getTimingByKey2(v).timing || v).join(",");
@@ -7746,11 +7833,11 @@ var require_cjs2 = __commonJS({
       const prop = propertyName.toLowerCase();
       return (prop.includes("width") || prop.includes("height")) && !prop.includes("border");
     };
-    var transformSize2 = (propertyName, val, props2 = {}, opts = {}) => {
-      let value2 = val || props2[propertyName];
+    var transformSize2 = (propertyName, val, props5 = {}, opts = {}) => {
+      let value2 = val || props5[propertyName];
       if ((0, import_utils252.isUndefined)(value2) && (0, import_utils252.isNull)(value2))
         return;
-      const shouldScaleBoxSize = props2.scaleBoxSize;
+      const shouldScaleBoxSize = props5.scaleBoxSize;
       const isBoxSize = checkIfBoxSize(propertyName);
       if (!shouldScaleBoxSize && isBoxSize && (0, import_utils252.isString)(value2)) {
         value2 = value2.split(" ").map((v) => {
@@ -7762,13 +7849,13 @@ var require_cjs2 = __commonJS({
         }).join(" ");
       }
       if (opts.ratio) {
-        return getSpacingBasedOnRatio4(props2, propertyName, value2);
+        return getSpacingBasedOnRatio4(props5, propertyName, value2);
       } else {
         return getSpacingByKey3(value2, propertyName);
       }
     };
-    var transformSizeRatio2 = (propertyName, props2) => {
-      return transformSize2(propertyName, null, props2, {
+    var transformSizeRatio2 = (propertyName, props5) => {
+      return transformSize2(propertyName, null, props5, {
         ratio: true
       });
     };
@@ -7813,11 +7900,11 @@ var require_cjs2 = __commonJS({
       if (CONFIG22.verbose)
         console.warn("Can not find", factoryName, "method in scratch");
     };
-    var setEach = (factoryName, props2) => {
+    var setEach = (factoryName, props5) => {
       const CONFIG22 = getActiveConfig3();
       const FACTORY_NAME = factoryName.toUpperCase();
-      const keys = Object.keys(props2);
-      keys.map((key) => setValue(FACTORY_NAME, props2[key], key));
+      const keys = Object.keys(props5);
+      keys.map((key) => setValue(FACTORY_NAME, props5[key], key));
       return CONFIG22[FACTORY_NAME];
     };
     var SET_OPTIONS2 = {};
@@ -8636,10 +8723,10 @@ var require_cjs3 = __commonJS({
           return o;
         };
         var deepStringify = (obj, stringified = {}) => {
-          var _a;
+          var _a, _b;
           if (obj.node || obj.__ref || obj.parent || obj.__element || obj.parse) {
-            console.warn("Trying to clone element or state at", obj);
-            obj = (_a = obj.parse) == null ? void 0 : _a.call(obj);
+            (obj.__element || ((_a = obj.parent) == null ? void 0 : _a.__element)).warn("Trying to clone element or state at", obj);
+            obj = (_b = obj.parse) == null ? void 0 : _b.call(obj);
           }
           for (const prop in obj) {
             const objProp = obj[prop];
@@ -9021,13 +9108,13 @@ var require_cjs3 = __commonJS({
           }
           return true;
         };
-        var removeFromObject = (obj, props2) => {
-          if (props2 === void 0 || props2 === null)
+        var removeFromObject = (obj, props5) => {
+          if (props5 === void 0 || props5 === null)
             return obj;
-          if ((0, import_types.is)(props2)("string", "number")) {
-            delete obj[props2];
-          } else if ((0, import_types.isArray)(props2)) {
-            props2.forEach((prop) => delete obj[prop]);
+          if ((0, import_types.is)(props5)("string", "number")) {
+            delete obj[props5];
+          } else if ((0, import_types.isArray)(props5)) {
+            props5.forEach((prop) => delete obj[prop]);
           } else {
             throw new Error("Invalid input: props must be a string or an array of strings");
           }
@@ -9273,9 +9360,11 @@ var require_cjs3 = __commonJS({
         var cookie_exports = {};
         __export22(cookie_exports, {
           getCookie: () => getCookie,
+          getLocalStorage: () => getLocalStorage,
           isMobile: () => isMobile,
           removeCookie: () => removeCookie,
-          setCookie: () => setCookie
+          setCookie: () => setCookie,
+          setLocalStorage: () => setLocalStorage
         });
         module22.exports = __toCommonJS22(cookie_exports);
         var import_types = require_types3();
@@ -9309,6 +9398,27 @@ var require_cjs3 = __commonJS({
             return;
           import_utils33.document.cookie = cname + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
         };
+        function getLocalStorage(key) {
+          let savedJSON;
+          if (window.localStorage) {
+            try {
+              savedJSON = JSON.parse(window.localStorage.getItem(key));
+            } catch (e) {
+            }
+          }
+          if (typeof savedJSON !== "undefined") {
+            return savedJSON;
+          }
+        }
+        function setLocalStorage(key, data) {
+          if (data && window.localStorage) {
+            if (typeof data === "object") {
+              window.localStorage.setItem(key, JSON.stringify(data));
+            } else {
+              window.localStorage.setItem(key, data);
+            }
+          }
+        }
       }
     });
     var require_tags3 = __commonJS2({
@@ -9508,7 +9618,9 @@ var require_cjs3 = __commonJS({
           applyKeyComponentAsExtend: () => applyKeyComponentAsExtend,
           checkIfKeyIsComponent: () => checkIfKeyIsComponent2,
           checkIfKeyIsProperty: () => checkIfKeyIsProperty,
+          checkIfSugar: () => checkIfSugar,
           extendizeByKey: () => extendizeByKey,
+          getCapitalCaseKeys: () => getCapitalCaseKeys,
           getChildrenComponentsByKey: () => getChildrenComponentsByKey,
           getExtendsInElement: () => getExtendsInElement,
           hasVariantProp: () => hasVariantProp,
@@ -9542,12 +9654,13 @@ var require_cjs3 = __commonJS({
           return { ...element, extend };
         };
         var checkIfSugar = (element, parent, key) => {
+          var _a;
           const {
             extend,
-            props: props2,
+            props: props5,
             childExtend,
             extends: extendProps,
-            childrenExtends,
+            childExtends,
             childProps,
             children,
             on: on2,
@@ -9555,16 +9668,18 @@ var require_cjs3 = __commonJS({
             $stateCollection,
             $propsCollection
           } = element;
-          const hasComponentAttrs = extend || childExtend || props2 || on2 || $collection || $stateCollection || $propsCollection;
-          if (hasComponentAttrs && (childProps || extendProps || children || childrenExtends)) {
-            element.error("Sugar component includes params for builtin components");
+          const hasComponentAttrs = extend || childExtend || props5 || on2 || $collection || $stateCollection || $propsCollection;
+          if (hasComponentAttrs && (childProps || extendProps || children || childExtends)) {
+            const logErr = (_a = parent || element) == null ? void 0 : _a.error;
+            if (logErr)
+              logErr("Sugar component includes params for builtin components", { verbose: true });
           }
-          return !hasComponentAttrs || childProps || extendProps || children || childrenExtends;
+          return !hasComponentAttrs || childProps || extendProps || children || childExtends;
         };
         var extendizeByKey = (element, parent, key) => {
           const { context } = parent;
-          const { tag, extend, childrenExtends } = element;
-          const isSugar = checkIfSugar(element);
+          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 isExtendKeyComponent = context && context.components[extendFromKey];
           if (element === isExtendKeyComponent)
@@ -9575,8 +9690,8 @@ var require_cjs3 = __commonJS({
               tag,
               props: { ...element }
             });
-            if (childrenExtends)
-              newElem.childExtend = childrenExtends;
+            if (childExtends)
+              newElem.childExtend = childExtends;
             return newElem;
           } else if (!extend || extend === true) {
             return {
@@ -9605,23 +9720,24 @@ var require_cjs3 = __commonJS({
             const childKey = childElems[i];
             const childElem = element[childKey];
             const newChild = element.props[childKey];
+            const assignChild = (val) => {
+              element[childKey] = val;
+              delete element.props[childKey];
+            };
             if (newChild == null ? void 0 : newChild.ignoreExtend)
               continue;
-            if (!childElem)
-              element[childKey] = (0, import__.deepCloneWithExtend)(newChild);
+            if (newChild === null)
+              assignChild(null);
+            else if (!childElem)
+              assignChild((0, import__.deepCloneWithExtend)(newChild));
             else {
-              const isSugar = checkIfSugar(childElem);
-              if (!isSugar)
+              const isSugarChildElem = checkIfSugar(childElem, parent, key);
+              if (isSugarChildElem)
                 continue;
-              const inheritedChildElem = element[childKey].props;
-              if ((0, import__.isObjectLike)(newChild)) {
-                (0, import__.overwriteDeep)(inheritedChildElem, newChild);
-              } else if ((0, import__.isFunction)(newChild)) {
-                element[childKey] = {
-                  extend: element[childKey],
-                  props: newChild
-                };
-              }
+              assignChild({
+                extend: element[childKey],
+                props: newChild
+              });
             }
           }
         };
@@ -9655,8 +9771,8 @@ var require_cjs3 = __commonJS({
           return firstCharKey === ".";
         };
         var hasVariantProp = (element) => {
-          const { props: props2 } = element;
-          if ((0, import__.isObject)(props2) && (0, import__.isString)(props2.variant))
+          const { props: props5 } = element;
+          if ((0, import__.isObject)(props5) && (0, import__.isString)(props5.variant))
             return true;
         };
         var getChildrenComponentsByKey = (key, el) => {
@@ -10108,9 +10224,9 @@ var require_on = __commonJS({
       }
     };
     var applyAnimationFrame = (element, options) => {
-      const { props: props2, on: on2, __ref: ref } = element;
+      const { props: props5, on: on2, __ref: ref } = element;
       const { frameListeners } = ref.root.data;
-      if (frameListeners && ((on2 == null ? void 0 : on2.frame) || (props2 == null ? void 0 : props2.onFrame))) {
+      if (frameListeners && ((on2 == null ? void 0 : on2.frame) || (props5 == null ? void 0 : props5.onFrame))) {
         const { registerFrameListener } = element.context.utils;
         if (registerFrameListener)
           registerFrameListener(element);
@@ -11019,8 +11135,8 @@ var require_create = __commonJS({
       return dependentState;
     };
     var checkForTypes = (element) => {
-      const { state: orig, props: props2, __ref: ref } = element;
-      const state = (props2 == null ? void 0 : props2.state) || orig;
+      const { state: orig, props: props5, __ref: ref } = element;
+      const state = (props5 == null ? void 0 : props5.state) || orig;
       if ((0, import_utils32.isFunction)(state)) {
         ref.__state = state;
         return (0, import_utils32.exec)(state, element);
@@ -11379,14 +11495,14 @@ var require_cache = __commonJS({
       }
     };
     var detectTag = (element) => {
-      let { tag, key, props: props2 } = element;
+      let { tag, key, props: props5 } = element;
       tag = (0, import_utils32.exec)(tag, element);
       if (tag === true)
         tag = key;
-      if ((0, import_utils32.isObject)(props2) && (0, import_utils32.isString)(props2.tag)) {
-        const tagExists = (0, import_utils32.isValidHtmlTag)(props2.tag);
+      if ((0, import_utils32.isObject)(props5) && (0, import_utils32.isString)(props5.tag)) {
+        const tagExists = (0, import_utils32.isValidHtmlTag)(props5.tag);
         if (tagExists)
-          return props2.tag;
+          return props5.tag;
       }
       if ((0, import_utils32.isString)(tag)) {
         if ((0, import_utils32.isValidHtmlTag)(tag))
@@ -11573,6 +11689,7 @@ var require_inherit2 = __commonJS({
       return propValue;
     };
     var inheritParentProps = (element, parent) => {
+      var _a;
       let propsStack = [];
       const parentProps = (0, import_utils32.exec)(parent, parent.state).props;
       const matchParent = parent.props && parentProps[element.key];
@@ -11590,7 +11707,7 @@ var require_inherit2 = __commonJS({
           propsStack.push(objectizeStringProperty(matchParent));
         }
       }
-      if (matchParentChildProps)
+      if (matchParentChildProps && !((_a = element == null ? void 0 : element.props) == null ? void 0 : _a.ignoreChildProps))
         propsStack.push(matchParentChildProps);
       return propsStack;
     };
@@ -11628,27 +11745,27 @@ var require_create3 = __commonJS({
     var import_ignore = require_ignore2();
     var import_inherit = require_inherit2();
     var createPropsStack = (element, parent) => {
-      const { props: props2, __ref: ref } = element;
+      const { props: props5, __ref: ref } = element;
       const propsStack = ref.__props = (0, import_inherit.inheritParentProps)(element, parent);
-      if ((0, import_utils32.isObject)(props2))
-        propsStack.push(props2);
-      else if (props2 === "inherit" && parent.props)
+      if ((0, import_utils32.isObject)(props5))
+        propsStack.push(props5);
+      else if (props5 === "inherit" && parent.props)
         propsStack.push(parent.props);
-      else if (props2)
-        propsStack.push(props2);
+      else if (props5)
+        propsStack.push(props5);
       if ((0, import_utils32.isArray)(ref.__extend)) {
         ref.__extend.forEach((extend) => {
-          if (extend.props && extend.props !== props2)
+          if (extend.props && extend.props !== props5)
             propsStack.push(extend.props);
         });
       }
       ref.__props = propsStack;
       return propsStack;
     };
-    var syncProps = (props2, element, opts) => {
+    var syncProps = (props5, element, opts) => {
       element.props = {};
       const mergedProps = {};
-      props2.forEach((v) => {
+      props5.forEach((v) => {
         if (import_ignore.IGNORE_PROPS_PARAMS.includes(v))
           return;
         let execProps;
@@ -11694,9 +11811,9 @@ var require_create3 = __commonJS({
       Object.setPrototypeOf(element.props, methods);
       return element;
     };
-    function update(props2, options) {
+    function update(props5, options) {
       const element = this.__element;
-      element.update({ props: props2 }, options);
+      element.update({ props: props5 }, options);
     }
   }
 });
@@ -11846,6 +11963,8 @@ var require_object2 = __commonJS({
       "lookup",
       "lookdown",
       "lookdownAll",
+      "getRef",
+      "getPath",
       "setNodeStyles",
       "spotByPath",
       "keys",
@@ -12156,8 +12275,8 @@ var require_extend = __commonJS({
     var applyExtend = (element, parent, options = {}) => {
       if ((0, import_utils32.isFunction)(element))
         element = (0, import_utils32.exec)(element, parent);
-      const { props: props2, __ref } = element;
-      let extend = (props2 == null ? void 0 : props2.extends) || element.extend;
+      const { props: props5, __ref } = element;
+      let extend = (props5 == null ? void 0 : props5.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);
@@ -12166,9 +12285,9 @@ var require_extend = __commonJS({
       let childExtendStack = [];
       if (parent) {
         element.parent = parent;
-        if (!options.ignoreChildExtend && !(props2 && props2.ignoreChildExtend)) {
+        if (!options.ignoreChildExtend && !(props5 && props5.ignoreChildExtend)) {
           childExtendStack = (0, import_utils210.getExtendStack)(parent.childExtend, context);
-          const ignoreChildExtendRecursive = props2 && props2.ignoreChildExtendRecursive;
+          const ignoreChildExtendRecursive = props5 && props5.ignoreChildExtendRecursive;
           if (parent.childExtendRecursive && !ignoreChildExtendRecursive) {
             const canExtendRecursive = element.key !== "__text";
             if (canExtendRecursive) {
@@ -12276,28 +12395,28 @@ var require_component2 = __commonJS({
       let variantElement = element[variant];
       if (!variantElement)
         return;
-      const props2 = (0, import_utils32.isObject)(variantProps) ? variantProps : {};
+      const props5 = (0, import_utils32.isObject)(variantProps) ? variantProps : {};
       if ((0, import_utils32.isString)(variantElement)) {
         variantElement = {
-          extend: [{ props: props2 }, variantElement]
+          extend: [{ props: props5 }, variantElement]
         };
       } else if (variantElement.extend) {
-        variantElement = (0, import_utils32.addAdditionalExtend)({ props: props2 }, variantElement);
+        variantElement = (0, import_utils32.addAdditionalExtend)({ props: props5 }, variantElement);
       }
       const extendedVariant = (0, import_extend.applyExtend)(variantElement, element.parent);
       const { parent, ...rest } = extendedVariant;
       return (0, import_utils32.overwriteDeep)(element, rest);
     };
     var applyVariant = (element) => {
-      const { props: props2 } = element;
+      const { props: props5 } = element;
       if (!(0, import_utils32.hasVariantProp)(element))
         return element;
-      const { variant } = props2;
+      const { variant } = props5;
       overwriteVariant(element, `.${variant}`);
       const elKeys = Object.keys(element).filter((key) => (0, import_utils32.isVariant)(key));
       elKeys.forEach((variant2) => {
         const slicedVariantElementKey = variant2.slice(1);
-        const variantElementProps = props2[slicedVariantElementKey];
+        const variantElementProps = props5[slicedVariantElementKey];
         if (variantElementProps)
           overwriteVariant(element, variant2, variantElementProps);
       });
@@ -12562,26 +12681,28 @@ var require_set = __commonJS({
       const content = (0, import_utils32.setContentKey)(element, options);
       const __contentRef = content && content.__ref;
       const lazyLoad = element.props && element.props.lazyLoad;
-      if (!options.preventBeforeUpdateListener && !options.preventListeners) {
-        const beforeUpdateReturns = (0, import_event.triggerEventOnUpdate)("beforeUpdate", params, element, options);
-        if (beforeUpdateReturns === false)
-          return element;
-      }
       const hasCollection = element.$collection || element.$stateCollection || element.$propsCollection;
       if (options.preventContentUpdate === true && !hasCollection)
         return;
       if (ref.__noCollectionDifference || __contentRef && __contentRef.__cached && (0, import_utils32.deepContains)(params, content)) {
+        if (!options.preventBeforeUpdateListener && !options.preventListeners) {
+          const beforeUpdateReturns = (0, import_event.triggerEventOnUpdate)("beforeUpdate", params, element, options);
+          if (beforeUpdateReturns === false)
+            return element;
+        }
         if (content == null ? void 0 : content.update)
           content.update();
+        if (!options.preventUpdateListener)
+          (0, import_event.triggerEventOn)("update", element, options);
         return;
       }
       if (params) {
-        const { childExtend, childProps, props: props2 } = params;
+        const { childExtend, childProps, props: props5 } = params;
         if (!childExtend && element.childExtend)
           params.childExtend = element.childExtend;
         if (!childProps && element.childProps)
           params.childProps = element.childProps;
-        if (!(props2 == null ? void 0 : props2.childProps) && ((_a = element.props) == null ? void 0 : _a.childProps)) {
+        if (!(props5 == null ? void 0 : props5.childProps) && ((_a = element.props) == null ? void 0 : _a.childProps)) {
           params.props.childProps = element.props.childProps;
         }
         if (lazyLoad) {
@@ -12589,8 +12710,6 @@ var require_set = __commonJS({
         } else
           resetElement(params, element, options);
       }
-      if (!options.preventUpdateListener)
-        (0, import_event.triggerEventOn)("update", element, options);
       return element;
     };
     var set_default = set3;
@@ -13019,6 +13138,8 @@ var require_registry = __commonJS({
       variables: {},
       lookup: {},
       lookdown: {},
+      getRef: {},
+      getPath: {},
       lookdownAll: {},
       setNodeStyles: {},
       spotByPath: {},
@@ -13153,6 +13274,8 @@ var require_methods2 = __commonJS({
       defineSetter: () => defineSetter,
       error: () => error,
       get: () => get,
+      getPath: () => getPath,
+      getRef: () => getRef,
       isMethod: () => isMethod,
       keys: () => keys,
       log: () => log,
@@ -13292,12 +13415,18 @@ var require_methods2 = __commonJS({
       element.update({ props: param }, options);
       return element;
     }
+    function getRef() {
+      return this.__ref;
+    }
+    function getPath() {
+      return this.getRef().path;
+    }
     var defineSetter = (element, key, get2, set3) => Object.defineProperty(element, key, { get: get2, set: set3 });
     function keys() {
       const element = this;
       const keys2 = [];
       for (const param in element) {
-        if (import_mixins.registry[param] && !import_mixins.parseFilters.elementKeys.includes(param) || Object.hasOwnProperty.call(element, param)) {
+        if (import_mixins.registry[param] && !import_mixins.parseFilters.elementKeys.includes(param) || !Object.hasOwnProperty.call(element, param)) {
           continue;
         }
         keys2.push(param);
@@ -13322,8 +13451,8 @@ var require_methods2 = __commonJS({
             return;
           obj[v] = JSON.parse(JSON.stringify(val || {}));
         } else if (v === "props") {
-          const { __element, update, ...props2 } = element[v];
-          obj[v] = props2;
+          const { __element, update, ...props5 } = element[v];
+          obj[v] = props5;
         } else if ((0, import_utils32.isDefined)(val) && Object.hasOwnProperty.call(element, v))
           obj[v] = val;
       });
@@ -13353,9 +13482,9 @@ var require_methods2 = __commonJS({
       } else {
         console.log(ref.path);
         const keys2 = element.keys();
-        keys2.forEach((v) => console.log(`%c${v}:
-`, "font-weight: bold", element[v]));
+        keys2.forEach((v) => console.log(`%c${v}:`, "font-weight: bold", element[v]));
       }
+      console.log(element);
       console.groupEnd(element.key);
       return element;
     }
@@ -13370,11 +13499,13 @@ var require_methods2 = __commonJS({
       }
     }
     function error(...params) {
-      var _a;
+      var _a, _b;
       if (ENV3 === "test" || ENV3 === "development") {
         if ((_a = params[params.length - 1]) == null ? void 0 : _a.debugger)
           debugger;
         console.error(...params);
+        if ((_b = params[params.length - 1]) == null ? void 0 : _b.verbose)
+          this.verbose();
       }
     }
     function nextElement() {
@@ -13439,6 +13570,8 @@ var require_methods2 = __commonJS({
       "lookup",
       "lookdown",
       "lookdownAll",
+      "getRef",
+      "getPath",
       "setNodeStyles",
       "spotByPath",
       "keys",
@@ -13532,15 +13665,15 @@ var require_iterate = __commonJS({
     };
     var throughExecProps = (element) => {
       const { __ref: ref } = element;
-      const { props: props2 } = element;
-      for (const k in props2) {
+      const { props: props5 } = element;
+      for (const k in props5) {
         const isDefine = k.startsWith("is") || k.startsWith("has") || k.startsWith("use");
         const cachedExecProp = ref.__execProps[k];
         if ((0, import_utils32.isFunction)(cachedExecProp)) {
-          props2[k] = (0, import_utils32.exec)(cachedExecProp, element);
-        } else if (isDefine && (0, import_utils32.isFunction)(props2[k])) {
-          ref.__execProps[k] = props2[k];
-          props2[k] = (0, import_utils32.exec)(props2[k], element);
+          props5[k] = (0, import_utils32.exec)(cachedExecProp, element);
+        } else if (isDefine && (0, import_utils32.isFunction)(props5[k])) {
+          ref.__execProps[k] = props5[k];
+          props5[k] = (0, import_utils32.exec)(props5[k], element);
         }
       }
     };
@@ -13669,12 +13802,12 @@ var require_propEvents = __commonJS({
     module2.exports = __toCommonJS2(propEvents_exports);
     var import_utils32 = require_cjs();
     var propagateEventsFromProps = (element) => {
-      const { props: props2, on: on2 } = element;
-      const eventKeysFromProps = Object.keys(props2).filter((key) => key.startsWith("on"));
+      const { props: props5, on: on2 } = element;
+      const eventKeysFromProps = Object.keys(props5).filter((key) => key.startsWith("on"));
       eventKeysFromProps.forEach((v) => {
         const eventName = (0, import_utils32.lowercaseFirstLetter)(v.split("on")[1]);
         const origEvent = on2[eventName];
-        const funcFromProps = props2[v];
+        const funcFromProps = props5[v];
         if ((0, import_utils32.isFunction)(origEvent)) {
           on2[eventName] = (...args) => {
             const originalEventRetunrs = origEvent(...args);
@@ -13878,9 +14011,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_utils32.isFunction)(v));
-        const props2 = params.props || hasParentProps || hasFunctionInProps.length;
-        if (props2)
-          (0, import_props.updateProps)(props2, element, parent);
+        const props5 = params.props || hasParentProps || hasFunctionInProps.length;
+        if (props5)
+          (0, import_props.updateProps)(props5, element, parent);
       }
       if (!options.preventBeforeUpdateListener && !options.preventListeners) {
         const beforeUpdateReturns = (0, import_event.triggerEventOnUpdate)("beforeUpdate", params, element, options);
@@ -14119,6 +14252,8 @@ var require_set2 = __commonJS({
         lookup: import__.lookup,
         lookdown: import__.lookdown,
         lookdownAll: import__.lookdownAll,
+        getRef: import__.getRef,
+        getPath: import__.getPath,
         setNodeStyles: import__.setNodeStyles,
         spotByPath: import__.spotByPath,
         parse: import__.parse,
@@ -14435,6 +14570,7 @@ var require_create4 = __commonJS({
         if (!element.props)
           element.props = {};
         (0, import_component.applyVariant)(element, parent);
+        addElementIntoParentChildren(element, parent);
       }
       if (element.tag !== "string" && element.tag !== "fragment") {
         (0, import_iterate.throughInitialDefine)(element);
@@ -14463,13 +14599,13 @@ var require_create4 = __commonJS({
     };
     var checkIfMedia = (key) => key.slice(0, 1) === "@";
     var applyMediaProps2 = (element, parent, key) => {
-      const { props: props2 } = element;
-      if (props2) {
-        props2.display = "none";
-        if (props2[key])
-          props2[key].display = props2.display;
+      const { props: props5 } = element;
+      if (props5) {
+        props5.display = "none";
+        if (props5[key])
+          props5[key].display = props5.display;
         else
-          props2[key] = { display: props2.display || "block" };
+          props5[key] = { display: props5.display || "block" };
         return element;
       } else {
         return {
@@ -15555,13 +15691,13 @@ var require_object3 = __commonJS({
       }
       return true;
     };
-    var removeFromObject = (obj, props2) => {
-      if (props2 === void 0 || props2 === null)
+    var removeFromObject = (obj, props5) => {
+      if (props5 === void 0 || props5 === null)
         return obj;
-      if ((0, import_types.is)(props2)("string", "number")) {
-        delete obj[props2];
-      } else if ((0, import_types.isArray)(props2)) {
-        props2.forEach((prop) => delete obj[prop]);
+      if ((0, import_types.is)(props5)("string", "number")) {
+        delete obj[props5];
+      } else if ((0, import_types.isArray)(props5)) {
+        props5.forEach((prop) => delete obj[prop]);
       } else {
         throw new Error("Invalid input: props must be a string or an array of strings");
       }
@@ -16336,11 +16472,11 @@ var length = 0;
 var position = 0;
 var character = 0;
 var characters = "";
-function node(value2, root, parent, type, props2, children, length3) {
-  return { value: value2, root, parent, type, props: props2, children, line, column, length: length3, return: "" };
+function node(value2, root, parent, type, props5, children, length3) {
+  return { value: value2, root, parent, type, props: props5, children, line, column, length: length3, return: "" };
 }
-function copy(root, props2) {
-  return assign(node("", null, null, "", null, null, 0), root, { length: -root.length }, props2);
+function copy(root, props5) {
+  return assign(node("", null, null, "", null, null, 0), root, { length: -root.length }, props5);
 }
 function char() {
   return character;
@@ -16471,7 +16607,7 @@ function parse(value2, root, parent, rule, rules, rulesets, pseudo, points, decl
   var ampersand = 1;
   var character3 = 0;
   var type = "";
-  var props2 = rules;
+  var props5 = rules;
   var children = rulesets;
   var reference = rule;
   var characters3 = type;
@@ -16525,17 +16661,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, props2 = [], children = [], length3), rulesets);
+            append(reference = ruleset(characters3, root, parent, index, offset, rules, points, type, props5 = [], children = [], length3), rulesets);
             if (character3 === 123)
               if (offset === 0)
-                parse(characters3, root, reference, reference, props2, rulesets, length3, points, children);
+                parse(characters3, root, reference, reference, props5, 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, props2 = [], length3), children), rules, children, length3, points, rule ? props2 : children);
+                    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);
                     break;
                   default:
                     parse(characters3, reference, reference, reference, [""], children, 0, points, children);
@@ -16571,15 +16707,15 @@ function parse(value2, root, parent, rule, rules, rulesets, pseudo, points, decl
     }
   return rulesets;
 }
-function ruleset(value2, root, parent, index, offset, rules, points, type, props2, children, length3) {
+function ruleset(value2, root, parent, index, offset, rules, points, type, props5, 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])))
-        props2[k++] = z;
-  return node(value2, root, parent, offset === 0 ? RULESET : type, props2, children, length3);
+        props5[k++] = z;
+  return node(value2, root, parent, offset === 0 ? RULESET : type, props5, children, length3);
 }
 function comment(value2, root, parent) {
   return node(value2, root, parent, COMMENT, from(char()), substr(value2, 2, -2), 0);
@@ -17641,6 +17777,162 @@ __export(uikit_exports, {
 // ../uikit/Atoms/Block.js
 var import_utils3 = __toESM(require_cjs());
 var import_scratch3 = __toESM(require_cjs2());
+var props = {
+  show: (el, s, ctx) => !!(ctx.utils.exec(el.props.show, el, s) === false) && {
+    display: "none !important"
+  },
+  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))
+      return;
+    const [height, width] = props5.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))
+      return;
+    const [minWidth, maxWidth] = props5.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))
+      return;
+    const [minHeight, maxHeight] = props5.heightRange.split(" ");
+    return {
+      ...deps.transformSize("minHeight", minHeight),
+      ...deps.transformSize("maxHeight", maxHeight || minHeight)
+    };
+  },
+  size: ({ props: props5, deps }) => {
+    if (!deps.isString(props5.size))
+      return;
+    const [inlineSize, blockSize] = props5.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))
+      return;
+    const [minInlineSize, minBlockSize] = props5.minSize.split(" ");
+    return {
+      ...deps.transformSize("minInlineSize", minInlineSize),
+      ...deps.transformSize("minBlockSize", minBlockSize || minInlineSize)
+    };
+  },
+  maxSize: ({ props: props5, deps }) => {
+    if (!deps.isString(props5.maxSize))
+      return;
+    const [maxInlineSize, maxBlockSize] = props5.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))
+      return;
+    const [paddingInlineStart, paddingInlineEnd] = props5.paddingInline.split(" ");
+    return {
+      ...deps.transformSize("paddingInlineStart", paddingInlineStart),
+      ...deps.transformSize("paddingInlineEnd", paddingInlineEnd || paddingInlineStart)
+    };
+  },
+  paddingBlock: ({ props: props5, deps }) => {
+    if (!deps.isString(props5.paddingBlock))
+      return;
+    const [paddingBlockStart, paddingBlockEnd] = props5.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))
+      return;
+    const [marginInlineStart, marginInlineEnd] = props5.marginInline.split(" ");
+    return {
+      ...deps.transformSize("marginInlineStart", marginInlineStart),
+      ...deps.transformSize("marginInlineEnd", marginInlineEnd || marginInlineStart)
+    };
+  },
+  marginBlock: ({ props: props5, deps }) => {
+    if (!deps.isString(props5.marginBlock))
+      return;
+    const [marginBlockStart, marginBlockEnd] = props5.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)
+  },
+  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) && {
+    display: "flex",
+    flexFlow: (props5.flexFlow || "row").split(" ")[0] + " " + props5.flexWrap
+  },
+  flexFlow: ({ props: props5, deps }) => {
+    const { flexFlow, reverse } = props5;
+    if (!deps.isString(flexFlow))
+      return;
+    let [direction, wrap] = (flexFlow || "row").split(" ");
+    if (flexFlow.startsWith("x") || flexFlow === "row")
+      direction = "row";
+    if (flexFlow.startsWith("y") || flexFlow === "column")
+      direction = "column";
+    return {
+      display: "flex",
+      flexFlow: (direction || "") + (!direction.includes("-reverse") && reverse ? "-reverse" : "") + " " + (wrap || "")
+    };
+  },
+  flexAlign: ({ props: props5, deps }) => {
+    if (!deps.isString(props5.flexAlign))
+      return;
+    const [alignItems, justifyContent] = props5.flexAlign.split(" ");
+    return {
+      display: "flex",
+      alignItems,
+      justifyContent
+    };
+  }
+};
 var Block = {
   deps: {
     getSpacingBasedOnRatio: import_scratch3.getSpacingBasedOnRatio,
@@ -17652,233 +17944,82 @@ var Block = {
     isString: import_utils3.isString
   },
   class: {
-    boxSizing: ({ props: props2, deps }) => !deps.isUndefined(props2.boxSizing) ? { boxSizing: props2.boxSizing } : { boxSizing: "border-box" },
-    display: ({ props: props2, deps }) => !deps.isUndefined(props2.display) && {
-      display: props2.display
-    },
-    show: (el, s, ctx) => !!(ctx.utils.exec(el.props.show, el, s) === false) && {
-      display: "none !important"
-    },
-    hide: (el, s, ctx) => !!ctx.utils.exec(el.props.hide, el, s) && {
-      display: "none !important"
-    },
-    height: ({ props: props2, deps }) => deps.transformSizeRatio("height", props2),
-    width: ({ props: props2, deps }) => deps.transformSizeRatio("width", props2),
-    boxSize: ({ props: props2, deps }) => {
-      if (!deps.isString(props2.boxSize))
-        return;
-      const [height, width] = props2.boxSize.split(" ");
-      return {
-        ...deps.transformSize("height", height),
-        ...deps.transformSize("width", width || height)
-      };
-    },
-    inlineSize: ({ props: props2, deps }) => deps.transformSizeRatio("inlineSize", props2),
-    blockSize: ({ props: props2, deps }) => deps.transformSizeRatio("blockSize", props2),
-    minWidth: ({ props: props2, deps }) => deps.transformSizeRatio("minWidth", props2),
-    maxWidth: ({ props: props2, deps }) => deps.transformSizeRatio("maxWidth", props2),
-    widthRange: ({ props: props2, deps }) => {
-      if (!deps.isString(props2.widthRange))
-        return;
-      const [minWidth, maxWidth] = props2.widthRange.split(" ");
-      return {
-        ...deps.transformSize("minWidth", minWidth),
-        ...deps.transformSize("maxWidth", maxWidth || minWidth)
-      };
-    },
-    minHeight: ({ props: props2, deps }) => deps.transformSizeRatio("minHeight", props2),
-    maxHeight: ({ props: props2, deps }) => deps.transformSizeRatio("maxHeight", props2),
-    heightRange: ({ props: props2, deps }) => {
-      if (!deps.isString(props2.heightRange))
-        return;
-      const [minHeight, maxHeight] = props2.heightRange.split(" ");
-      return {
-        ...deps.transformSize("minHeight", minHeight),
-        ...deps.transformSize("maxHeight", maxHeight || minHeight)
-      };
-    },
-    size: ({ props: props2, deps }) => {
-      if (!deps.isString(props2.size))
-        return;
-      const [inlineSize, blockSize] = props2.size.split(" ");
-      return {
-        ...deps.transformSizeRatio("inlineSize", inlineSize),
-        ...deps.transformSizeRatio("blockSize", blockSize || inlineSize)
-      };
-    },
-    minBlockSize: ({ props: props2, deps }) => deps.transformSizeRatio("minBlockSize", props2),
-    minInlineSize: ({ props: props2, deps }) => deps.transformSizeRatio("minInlineSize", props2),
-    maxBlockSize: ({ props: props2, deps }) => deps.transformSizeRatio("maxBlockSize", props2),
-    maxInlineSize: ({ props: props2, deps }) => deps.transformSizeRatio("maxInlineSize", props2),
-    minSize: ({ props: props2, deps }) => {
-      if (!deps.isString(props2.minSize))
-        return;
-      const [minInlineSize, minBlockSize] = props2.minSize.split(" ");
-      return {
-        ...deps.transformSize("minInlineSize", minInlineSize),
-        ...deps.transformSize("minBlockSize", minBlockSize || minInlineSize)
-      };
-    },
-    maxSize: ({ props: props2, deps }) => {
-      if (!deps.isString(props2.maxSize))
-        return;
-      const [maxInlineSize, maxBlockSize] = props2.maxSize.split(" ");
-      return {
-        ...deps.transformSize("maxInlineSize", maxInlineSize),
-        ...deps.transformSize("maxBlockSize", maxBlockSize || maxInlineSize)
-      };
+    ...props,
+    display: ({ props: props5, deps }) => !deps.isUndefined(props5.display) && {
+      display: props5.display
     },
-    direction: ({ props: props2, deps }) => !deps.isUndefined(props2.direction) && {
-      direction: props2.direction
+    direction: ({ props: props5, deps }) => !deps.isUndefined(props5.direction) && {
+      direction: props5.direction
     },
-    objectFit: ({ props: props2, deps }) => !deps.isUndefined(props2.objectFit) && {
-      objectFit: props2.objectFit
+    objectFit: ({ props: props5, deps }) => !deps.isUndefined(props5.objectFit) && {
+      objectFit: props5.objectFit
     },
-    aspectRatio: ({ props: props2, deps }) => !deps.isUndefined(props2.aspectRatio) && {
-      aspectRatio: props2.aspectRatio
+    aspectRatio: ({ props: props5, deps }) => !deps.isUndefined(props5.aspectRatio) && {
+      aspectRatio: props5.aspectRatio
     },
-    borderWidth: ({ props: props2, deps }) => deps.transformSizeRatio("borderWidth", props2),
-    padding: ({ props: props2, deps }) => deps.transformSizeRatio("padding", props2),
-    scrollPadding: ({ props: props2, deps }) => deps.transformSizeRatio("scrollPadding", props2),
-    paddingInline: ({ props: props2, deps }) => {
-      if (!deps.isString(props2.paddingInline))
-        return;
-      const [paddingInlineStart, paddingInlineEnd] = props2.paddingInline.split(" ");
-      return {
-        ...deps.transformSize("paddingInlineStart", paddingInlineStart),
-        ...deps.transformSize("paddingInlineEnd", paddingInlineEnd || paddingInlineStart)
-      };
-    },
-    paddingBlock: ({ props: props2, deps }) => {
-      if (!deps.isString(props2.paddingBlock))
-        return;
-      const [paddingBlockStart, paddingBlockEnd] = props2.paddingBlock.split(" ");
-      return {
-        ...deps.transformSize("paddingBlockStart", paddingBlockStart),
-        ...deps.transformSize("paddingBlockEnd", paddingBlockEnd || paddingBlockStart)
-      };
-    },
-    paddingInlineStart: ({ props: props2, deps }) => deps.transformSizeRatio("paddingInlineStart", props2),
-    paddingInlineEnd: ({ props: props2, deps }) => deps.transformSizeRatio("paddingInlineEnd", props2),
-    paddingBlockStart: ({ props: props2, deps }) => deps.transformSizeRatio("paddingBlockStart", props2),
-    paddingBlockEnd: ({ props: props2, deps }) => deps.transformSizeRatio("paddingBlockEnd", props2),
-    margin: ({ props: props2, deps }) => deps.transformSizeRatio("margin", props2),
-    marginInline: ({ props: props2, deps }) => {
-      if (!deps.isString(props2.marginInline))
-        return;
-      const [marginInlineStart, marginInlineEnd] = props2.marginInline.split(" ");
-      return {
-        ...deps.transformSize("marginInlineStart", marginInlineStart),
-        ...deps.transformSize("marginInlineEnd", marginInlineEnd || marginInlineStart)
-      };
-    },
-    marginBlock: ({ props: props2, deps }) => {
-      if (!deps.isString(props2.marginBlock))
-        return;
-      const [marginBlockStart, marginBlockEnd] = props2.marginBlock.split(" ");
-      return {
-        ...deps.transformSize("marginBlockStart", marginBlockStart),
-        ...deps.transformSize("marginBlockEnd", marginBlockEnd || marginBlockStart)
-      };
-    },
-    marginInlineStart: ({ props: props2, deps }) => deps.transformSizeRatio("marginInlineStart", props2),
-    marginInlineEnd: ({ props: props2, deps }) => deps.transformSizeRatio("marginInlineEnd", props2),
-    marginBlockStart: ({ props: props2, deps }) => deps.transformSizeRatio("marginBlockStart", props2),
-    marginBlockEnd: ({ props: props2, deps }) => deps.transformSizeRatio("marginBlockEnd", props2),
-    gap: ({ props: props2, deps }) => !deps.isUndefined(props2.gap) && {
-      gap: (0, import_scratch3.transfromGap)(props2.gap)
+    gridArea: ({ props: props5, deps }) => props5.gridArea && { gridArea: props5.gridArea },
+    float: ({ props: props5, deps }) => !deps.isUndefined(props5.float) && {
+      float: props5.float
     },
-    columnGap: ({ props: props2, deps }) => props2.columnGap ? deps.getSpacingBasedOnRatio(props2, "columnGap") : null,
-    rowGap: ({ props: props2, deps }) => props2.rowGap ? deps.getSpacingBasedOnRatio(props2, "rowGap") : null,
-    gridArea: ({ props: props2, deps }) => props2.gridArea && { gridArea: props2.gridArea },
-    float: ({ props: props2, deps }) => !deps.isUndefined(props2.float) && {
-      float: props2.float
+    flex: ({ props: props5, deps }) => !deps.isUndefined(props5.flex) && {
+      flex: props5.flex
     },
-    flex: ({ props: props2, deps }) => !deps.isUndefined(props2.flex) && {
-      flex: props2.flex
+    flexDirection: ({ props: props5, deps }) => !deps.isUndefined(props5.flexDirection) && {
+      flexDirection: props5.flexDirection
     },
-    flexDirection: ({ props: props2, deps }) => !deps.isUndefined(props2.flexDirection) && {
-      flexDirection: props2.flexDirection
+    alignItems: ({ props: props5, deps }) => !deps.isUndefined(props5.alignItems) && {
+      alignItems: props5.alignItems
     },
-    alignItems: ({ props: props2, deps }) => !deps.isUndefined(props2.alignItems) && {
-      alignItems: props2.alignItems
+    alignContent: ({ props: props5, deps }) => !deps.isUndefined(props5.alignContent) && {
+      alignContent: props5.alignContent
     },
-    alignContent: ({ props: props2, deps }) => !deps.isUndefined(props2.alignContent) && {
-      alignContent: props2.alignContent
+    justifyContent: ({ props: props5, deps }) => !deps.isUndefined(props5.justifyContent) && {
+      justifyContent: props5.justifyContent
     },
-    justifyContent: ({ props: props2, deps }) => !deps.isUndefined(props2.justifyContent) && {
-      justifyContent: props2.justifyContent
+    justifyItems: ({ props: props5, deps }) => !deps.isUndefined(props5.justifyItems) && {
+      justifyItems: props5.justifyItems
     },
-    justifyItems: ({ props: props2, deps }) => !deps.isUndefined(props2.justifyItems) && {
-      justifyItems: props2.justifyItems
+    alignSelf: ({ props: props5, deps }) => !deps.isUndefined(props5.alignSelf) && {
+      alignSelf: props5.alignSelf
     },
-    alignSelf: ({ props: props2, deps }) => !deps.isUndefined(props2.alignSelf) && {
-      alignSelf: props2.alignSelf
+    order: ({ props: props5, deps }) => !deps.isUndefined(props5.order) && {
+      order: props5.order
     },
-    order: ({ props: props2, deps }) => !deps.isUndefined(props2.order) && {
-      order: props2.order
+    gridColumn: ({ props: props5, deps }) => !deps.isUndefined(props5.gridColumn) && {
+      gridColumn: props5.gridColumn
     },
-    flexWrap: ({ props: props2, deps }) => !deps.isUndefined(props2.flexWrap) && {
-      display: "flex",
-      flexFlow: (props2.flexFlow || "row").split(" ")[0] + " " + props2.flexWrap
-    },
-    flexFlow: ({ props: props2, deps }) => {
-      const { flexFlow, reverse } = props2;
-      if (!deps.isString(flexFlow))
-        return;
-      let [direction, wrap] = (flexFlow || "row").split(" ");
-      if (flexFlow.startsWith("x") || flexFlow === "row")
-        direction = "row";
-      if (flexFlow.startsWith("y") || flexFlow === "column")
-        direction = "column";
-      return {
-        display: "flex",
-        flexFlow: (direction || "") + (!direction.includes("-reverse") && reverse ? "-reverse" : "") + " " + (wrap || "")
-      };
+    gridColumnStart: ({ props: props5, deps }) => !deps.isUndefined(props5.gridColumnStart) && {
+      gridColumnStart: props5.gridColumnStart
     },
-    flexAlign: ({ props: props2, deps }) => {
-      if (!deps.isString(props2.flexAlign))
-        return;
-      const [alignItems, justifyContent] = props2.flexAlign.split(" ");
-      return {
-        display: "flex",
-        alignItems,
-        justifyContent
-      };
-    },
-    gridColumn: ({ props: props2, deps }) => !deps.isUndefined(props2.gridColumn) && {
-      gridColumn: props2.gridColumn
+    gridRow: ({ props: props5, deps }) => !deps.isUndefined(props5.gridRow) && {
+      gridRow: props5.gridRow
     },
-    gridColumnStart: ({ props: props2, deps }) => !deps.isUndefined(props2.gridColumnStart) && {
-      gridColumnStart: props2.gridColumnStart
+    gridRowStart: ({ props: props5, deps }) => !deps.isUndefined(props5.gridRowStart) && {
+      gridRowStart: props5.gridRowStart
     },
-    gridRow: ({ props: props2, deps }) => !deps.isUndefined(props2.gridRow) && {
-      gridRow: props2.gridRow
+    resize: ({ props: props5, deps }) => !deps.isUndefined(props5.resize) && {
+      resize: props5.resize
     },
-    gridRowStart: ({ props: props2, deps }) => !deps.isUndefined(props2.gridRowStart) && {
-      gridRowStart: props2.gridRowStart
+    verticalAlign: ({ props: props5, deps }) => !deps.isUndefined(props5.verticalAlign) && {
+      verticalAlign: props5.verticalAlign
     },
-    resize: ({ props: props2, deps }) => !deps.isUndefined(props2.resize) && {
-      resize: props2.resize
+    columns: ({ props: props5, deps }) => !deps.isUndefined(props5.columns) && {
+      columns: props5.columns
     },
-    verticalAlign: ({ props: props2, deps }) => !deps.isUndefined(props2.verticalAlign) && { verticalAlign: props2.verticalAlign },
-    columns: ({ props: props2, deps }) => !deps.isUndefined(props2.columns) && {
-      columns: props2.columns
+    columnRule: ({ props: props5, deps }) => !deps.isUndefined(props5.columnRule) && {
+      columnRule: props5.columnRule
     },
-    columnRule: ({ props: props2, deps }) => !deps.isUndefined(props2.columnRule) && {
-      columnRule: props2.columnRule
+    columnWidth: ({ props: props5, deps }) => !deps.isUndefined(props5.columnWidth) && {
+      columnWidth: props5.columnWidth
     },
-    columnWidth: ({ props: props2, deps }) => !deps.isUndefined(props2.columnWidth) && {
-      columnWidth: props2.columnWidth
+    columnSpan: ({ props: props5, deps }) => !deps.isUndefined(props5.columnSpan) && {
+      columnSpan: props5.columnSpan
     },
-    columnSpan: ({ props: props2, deps }) => !deps.isUndefined(props2.columnSpan) && {
-      columnSpan: props2.columnSpan
+    columnFill: ({ props: props5, deps }) => !deps.isUndefined(props5.columnFill) && {
+      columnFill: props5.columnFill
     },
-    columnFill: ({ props: props2, deps }) => !deps.isUndefined(props2.columnFill) && {
-      columnFill: props2.columnFill
-    },
-    columnCount: ({ props: props2, deps }) => !deps.isUndefined(props2.columnCount) && {
-      columnCount: props2.columnCount
+    columnCount: ({ props: props5, deps }) => !deps.isUndefined(props5.columnCount) && {
+      columnCount: props5.columnCount
     }
   }
 };
@@ -17899,20 +18040,8 @@ var Ol = {
   childExtend: { extend: "Li" }
 };
 var Gutter = {
-  deps: { getSpacingByKey: import_scratch3.getSpacingByKey },
   props: {
     size: "C1"
-  },
-  class: {
-    size: ({ props: props2, deps }) => {
-      if (!deps.isString(props2.size))
-        return;
-      const [height, width] = props2.size.split(" ");
-      return {
-        ...deps.getSpacingByKey("height", height),
-        ...deps.getSpacingByKey("width", width || height)
-      };
-    }
   }
 };
 
@@ -17922,7 +18051,7 @@ var Direction = {
     direction: "ltr"
   },
   class: {
-    direction: ({ props: props2 }) => ({ direction: props2.direction })
+    direction: ({ props: props5 }) => ({ direction: props5.direction })
   }
 };
 
@@ -17933,8 +18062,8 @@ var Flex = {
     display: "flex"
   },
   class: {
-    flow: ({ props: props2 }) => {
-      const { flow, reverse } = props2;
+    flow: ({ props: props5 }) => {
+      const { flow, reverse } = props5;
       if (!(0, import_utils4.isString)(flow))
         return;
       let [direction, wrap] = (flow || "row").split(" ");
@@ -17946,11 +18075,11 @@ var Flex = {
         flexFlow: (direction || "") + (!direction.includes("-reverse") && reverse ? "-reverse" : "") + " " + (wrap || "")
       };
     },
-    wrap: ({ props: props2 }) => props2.wrap && { flexWrap: props2.wrap },
-    align: ({ props: props2 }) => {
-      if (!(0, import_utils4.isString)(props2.align))
+    wrap: ({ props: props5 }) => props5.wrap && { flexWrap: props5.wrap },
+    align: ({ props: props5 }) => {
+      if (!(0, import_utils4.isString)(props5.align))
         return;
-      const [alignItems, justifyContent] = props2.align.split(" ");
+      const [alignItems, justifyContent] = props5.align.split(" ");
       return { alignItems, justifyContent };
     }
   }
@@ -17962,20 +18091,20 @@ var Grid = {
   deps: { getSpacingBasedOnRatio: import_scratch4.getSpacingBasedOnRatio },
   props: { display: "grid" },
   class: {
-    area: ({ props: props2 }) => props2.area ? { gridArea: props2.area } : null,
-    template: ({ props: props2 }) => props2.template ? { gridTemplate: props2.template } : null,
-    templateAreas: ({ props: props2 }) => props2.templateAreas ? { gridTemplateAreas: props2.templateAreas } : null,
-    column: ({ props: props2 }) => props2.column ? { gridColumn: props2.column } : null,
-    columns: ({ props: props2 }) => props2.columns ? { gridTemplateColumns: props2.columns } : null,
-    templateColumns: ({ props: props2 }) => props2.templateColumns ? { gridTemplateColumns: props2.templateColumns } : null,
-    autoColumns: ({ props: props2 }) => props2.autoColumns ? { gridAutoColumns: props2.autoColumns } : null,
-    columnStart: ({ props: props2 }) => props2.columnStart ? { gridColumnStart: props2.columnStart } : null,
-    row: ({ props: props2 }) => props2.row ? { gridRow: props2.row } : null,
-    rows: ({ props: props2 }) => props2.rows ? { gridTemplateRows: props2.rows } : null,
-    templateRows: ({ props: props2 }) => props2.templateRows ? { gridTemplateRows: props2.templateRows } : null,
-    autoRows: ({ props: props2 }) => props2.autoRows ? { gridAutoRows: props2.autoRows } : null,
-    rowStart: ({ props: props2 }) => props2.rowStart ? { gridRowStart: props2.rowStart } : null,
-    autoFlow: ({ props: props2 }) => props2.autoFlow ? { gridAutoFlow: props2.autoFlow } : null
+    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
   }
 };
 
@@ -17984,9 +18113,9 @@ var Img = {
   tag: "img",
   attr: {
     src: (el) => {
-      const { props: props2, context } = el;
+      const { props: props5, context } = el;
       const { exec: exec7, isString: isString13, replaceLiteralsWithObjectFields: replaceLiteralsWithObjectFields3 } = context.utils;
-      let src = (props2.preSrc || "") + exec7(props2.src, el);
+      let src = (props5.preSrc || "") + exec7(props5.src, el);
       if (isString13(src) && src.includes("{{")) {
         src = replaceLiteralsWithObjectFields3(src, el.state);
       }
@@ -18001,8 +18130,8 @@ var Img = {
       if (file)
         return file.content && file.content.src;
     },
-    alt: ({ props: props2 }) => props2.alt,
-    title: ({ props: props2 }) => props2.title || props2.alt
+    alt: ({ props: props5 }) => props5.alt,
+    title: ({ props: props5 }) => props5.title || props5.alt
   }
 };
 
@@ -18010,9 +18139,9 @@ var Img = {
 var Form = {
   tag: "form",
   attr: {
-    action: ({ props: props2 }) => props2.action,
-    method: ({ props: props2 }) => props2.method,
-    enctype: ({ props: props2 }) => props2.enctype
+    action: ({ props: props5 }) => props5.action,
+    method: ({ props: props5 }) => props5.method,
+    enctype: ({ props: props5 }) => props5.enctype
   }
 };
 
@@ -18035,24 +18164,24 @@ var Timing = {
     transformDuration: import_scratch5.transformDuration
   },
   class: {
-    transition: ({ props: props2, deps }) => !(0, import_utils5.isUndefined)(props2.transition) && {
-      transition: deps.splitTransition(props2.transition)
+    transition: ({ props: props5, deps }) => !(0, import_utils5.isUndefined)(props5.transition) && {
+      transition: deps.splitTransition(props5.transition)
     },
-    willChange: ({ props: props2 }) => !(0, import_utils5.isUndefined)(props2.willChange) && {
-      willChange: props2.willChange
+    willChange: ({ props: props5 }) => !(0, import_utils5.isUndefined)(props5.willChange) && {
+      willChange: props5.willChange
     },
-    transitionDuration: ({ props: props2, deps }) => !(0, import_utils5.isUndefined)(props2.transitionDuration) && {
-      transitionDuration: deps.transformDuration(props2.transitionDuration)
+    transitionDuration: ({ props: props5, deps }) => !(0, import_utils5.isUndefined)(props5.transitionDuration) && {
+      transitionDuration: deps.transformDuration(props5.transitionDuration)
     },
-    transitionDelay: ({ props: props2, deps }) => !(0, import_utils5.isUndefined)(props2.transitionDelay) && {
-      transitionDelay: deps.transformDuration(props2.transitionDelay)
+    transitionDelay: ({ props: props5, deps }) => !(0, import_utils5.isUndefined)(props5.transitionDelay) && {
+      transitionDelay: deps.transformDuration(props5.transitionDelay)
     },
-    transitionTimingFunction: ({ props: props2, deps }) => !(0, import_utils5.isUndefined)(props2.transitionTimingFunction) && {
-      transitionTimingFunction: deps.getTimingFunction(props2.transitionTimingFunction)
+    transitionTimingFunction: ({ props: props5, deps }) => !(0, import_utils5.isUndefined)(props5.transitionTimingFunction) && {
+      transitionTimingFunction: deps.getTimingFunction(props5.transitionTimingFunction)
     },
-    transitionProperty: ({ props: props2 }) => !(0, import_utils5.isUndefined)(props2.transitionProperty) && {
-      transitionProperty: props2.transitionProperty,
-      willChange: props2.transitionProperty
+    transitionProperty: ({ props: props5 }) => !(0, import_utils5.isUndefined)(props5.transitionProperty) && {
+      transitionProperty: props5.transitionProperty,
+      willChange: props5.transitionProperty
     }
   }
 };
@@ -18067,11 +18196,11 @@ var depth = {
   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}` }
 };
-var getComputedBackgroundColor = ({ props: props2 }) => {
-  return (0, import_scratch6.getColor)(props2.shapeDirectionColor) || (0, import_scratch6.getColor)(props2.borderColor) || (0, import_scratch6.getColor)(props2.backgroundColor) || (0, import_scratch6.getColor)(props2.background);
+var 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);
 };
-var inheritTransition = ({ props: props2, deps }) => {
-  const exec7 = Timing.class.transition({ props: props2, deps });
+var inheritTransition = ({ props: props5, deps }) => {
+  const exec7 = Timing.class.transition({ props: props5, deps });
   return exec7 && exec7.transition;
 };
 var SHAPES = {
@@ -18081,16 +18210,16 @@ var SHAPES = {
   tv: {
     borderRadius: "1.15em/2.5em"
   },
-  tooltip: ({ props: props2, deps }) => ({
-    position: props2.position || "relative",
+  tooltip: ({ props: props5, deps }) => ({
+    position: props5.position || "relative",
     "&:before": {
       content: '""',
       display: "block",
       width: "0px",
       height: "0px",
       border: ".35em solid",
-      borderColor: getComputedBackgroundColor({ props: props2, deps }),
-      transition: inheritTransition({ props: props2, deps }),
+      borderColor: getComputedBackgroundColor({ props: props5, deps }),
+      transition: inheritTransition({ props: props5, deps }),
       transitionProperty: "border-color",
       position: "absolute",
       borderRadius: ".15em"
@@ -18126,13 +18255,13 @@ var SHAPES = {
       }
     }
   },
-  tag: ({ props: props2, deps }) => ({
+  tag: ({ props: props5, deps }) => ({
     position: "relative",
     "&:before": {
       content: '""',
       display: "block",
-      background: getComputedBackgroundColor({ props: props2, deps }),
-      transition: inheritTransition({ props: props2, deps }),
+      background: getComputedBackgroundColor({ props: props5, deps }),
+      transition: inheritTransition({ props: props5, deps }),
       transitionProperty: "background",
       borderRadius: ".25em",
       position: "absolute",
@@ -18173,7 +18302,7 @@ var SHAPES = {
       }
     }
   },
-  hexagon: ({ props: props2, deps }) => ({
+  hexagon: ({ props: props5, deps }) => ({
     position: "relative",
     "&:before, &:after": {
       content: '""',
@@ -18185,8 +18314,8 @@ var SHAPES = {
       top: "50%",
       transformOrigin: "50% 50%",
       height: "73%",
-      background: getComputedBackgroundColor({ props: props2, deps }),
-      transition: inheritTransition({ props: props2, deps }),
+      background: getComputedBackgroundColor({ props: props5, deps }),
+      transition: inheritTransition({ props: props5, deps }),
       transitionProperty: "background"
     },
     "&:before": {
@@ -18198,7 +18327,7 @@ var SHAPES = {
       transform: "translate3d(-50%, -50%, 1px) rotate(45deg)"
     }
   }),
-  chevron: ({ props: props2, deps }) => ({
+  chevron: ({ props: props5, deps }) => ({
     position: "relative",
     "&:before, &:after": {
       content: '""',
@@ -18208,14 +18337,14 @@ var SHAPES = {
       aspectRatio: "1/1",
       top: "50%",
       transformOrigin: "50% 50%",
-      transition: inheritTransition({ props: props2, deps }),
+      transition: inheritTransition({ props: props5, deps }),
       transitionProperty: "background"
     },
     "&:before": {
-      background: `linear-gradient(225deg, ${getComputedBackgroundColor({ props: props2, deps })} 25%, transparent 25%), linear-gradient(315deg, ${getComputedBackgroundColor({ props: props2, deps })} 25%, transparent 25%)`
+      background: `linear-gradient(225deg, ${getComputedBackgroundColor({ props: props5, deps })} 25%, transparent 25%), linear-gradient(315deg, ${getComputedBackgroundColor({ props: props5, deps })} 25%, transparent 25%)`
     },
     "&:after": {
-      background: getComputedBackgroundColor({ props: props2, deps }),
+      background: getComputedBackgroundColor({ props: props5, deps }),
       borderRadius: ".25em"
     }
   }),
@@ -18266,53 +18395,53 @@ var Theme = {
     transformBackgroundImage: import_scratch7.transformBackgroundImage
   },
   class: {
-    depth: ({ props: props2, deps }) => !(0, import_utils6.isUndefined)(props2.depth) && deps.depth[props2.depth],
+    depth: ({ props: props5, deps }) => !(0, import_utils6.isUndefined)(props5.depth) && deps.depth[props5.depth],
     theme: (element) => {
-      const { props: props2, deps } = element;
+      const { props: props5, deps } = element;
       const globalTheme = deps.getSystemGlobalTheme(element);
-      if (!props2.theme)
+      if (!props5.theme)
         return;
-      const hasSubtheme = props2.theme.includes(" ") && !props2.theme.includes("@");
-      const globalThemeForced = `@${props2.themeModifier || globalTheme}`;
+      const hasSubtheme = props5.theme.includes(" ") && !props5.theme.includes("@");
+      const globalThemeForced = `@${props5.themeModifier || globalTheme}`;
       if (hasSubtheme) {
-        const themeAppliedInVal = props2.theme.split(" ");
+        const themeAppliedInVal = props5.theme.split(" ");
         themeAppliedInVal.splice(1, 0, globalThemeForced);
         return deps.getMediaTheme(themeAppliedInVal);
-      } else if (props2.theme.includes("@{globalTheme}"))
-        props2.theme.replace("@{globalTheme}", globalThemeForced);
-      return deps.getMediaTheme(props2.theme, `@${props2.themeModifier || globalTheme}`);
+      } else if (props5.theme.includes("@{globalTheme}"))
+        props5.theme.replace("@{globalTheme}", globalThemeForced);
+      return deps.getMediaTheme(props5.theme, `@${props5.themeModifier || globalTheme}`);
     },
     color: (element) => {
-      const { props: props2, deps } = element;
+      const { props: props5, deps } = element;
       const globalTheme = deps.getSystemGlobalTheme(element);
-      if (!props2.color)
+      if (!props5.color)
         return;
       return {
-        color: deps.getMediaColor(props2.color, globalTheme)
+        color: deps.getMediaColor(props5.color, globalTheme)
       };
     },
     background: (element) => {
-      const { props: props2, deps } = element;
+      const { props: props5, deps } = element;
       const globalTheme = deps.getSystemGlobalTheme(element);
-      if (!props2.background)
+      if (!props5.background)
         return;
       return {
-        background: deps.getMediaColor(props2.background, globalTheme)
+        background: deps.getMediaColor(props5.background, globalTheme)
       };
     },
     backgroundColor: (element) => {
-      const { props: props2, deps } = element;
+      const { props: props5, deps } = element;
       const globalTheme = deps.getSystemGlobalTheme(element);
-      if (!props2.backgroundColor)
+      if (!props5.backgroundColor)
         return;
       return {
-        backgroundColor: deps.getMediaColor(props2.backgroundColor, globalTheme)
+        backgroundColor: deps.getMediaColor(props5.backgroundColor, globalTheme)
       };
     },
     backgroundImage: (element, s, context) => {
-      const { props: props2, deps } = element;
+      const { props: props5, deps } = element;
       const globalTheme = deps.getSystemGlobalTheme(element);
-      let val = props2.backgroundImage;
+      let val = props5.backgroundImage;
       if (!val)
         return;
       const file = context.files && context.files[val];
@@ -18322,184 +18451,184 @@ var Theme = {
         backgroundImage: deps.transformBackgroundImage(val, globalTheme)
       };
     },
-    backgroundSize: ({ props: props2 }) => !(0, import_utils6.isUndefined)(props2.backgroundSize) ? {
-      backgroundSize: props2.backgroundSize
+    backgroundSize: ({ props: props5 }) => !(0, import_utils6.isUndefined)(props5.backgroundSize) ? {
+      backgroundSize: props5.backgroundSize
     } : null,
-    backgroundPosition: ({ props: props2 }) => !(0, import_utils6.isUndefined)(props2.backgroundPosition) ? {
-      backgroundPosition: props2.backgroundPosition
+    backgroundPosition: ({ props: props5 }) => !(0, import_utils6.isUndefined)(props5.backgroundPosition) ? {
+      backgroundPosition: props5.backgroundPosition
     } : null,
-    backgroundRepeat: ({ props: props2 }) => !(0, import_utils6.isUndefined)(props2.backgroundRepeat) ? {
-      backgroundRepeat: props2.backgroundRepeat
+    backgroundRepeat: ({ props: props5 }) => !(0, import_utils6.isUndefined)(props5.backgroundRepeat) ? {
+      backgroundRepeat: props5.backgroundRepeat
     } : null,
-    textStroke: ({ props: props2, deps }) => !(0, import_utils6.isUndefined)(props2.textStroke) ? {
-      WebkitTextStroke: deps.transformTextStroke(props2.textStroke)
+    textStroke: ({ props: props5, deps }) => !(0, import_utils6.isUndefined)(props5.textStroke) ? {
+      WebkitTextStroke: deps.transformTextStroke(props5.textStroke)
     } : null,
-    outline: ({ props: props2, deps }) => !(0, import_utils6.isUndefined)(props2.outline) && {
-      outline: deps.transformBorder(props2.outline)
+    outline: ({ props: props5, deps }) => !(0, import_utils6.isUndefined)(props5.outline) && {
+      outline: deps.transformBorder(props5.outline)
     },
-    outlineOffset: ({ props: props2, deps }) => deps.transformSizeRatio("outlineOffset", props2),
-    border: ({ props: props2, deps }) => !(0, import_utils6.isUndefined)(props2.border) && {
-      border: deps.transformBorder(props2.border)
+    outlineOffset: ({ props: props5, deps }) => deps.transformSizeRatio("outlineOffset", props5),
+    border: ({ props: props5, deps }) => !(0, import_utils6.isUndefined)(props5.border) && {
+      border: deps.transformBorder(props5.border)
     },
     borderColor: (element) => {
-      const { props: props2, deps } = element;
+      const { props: props5, deps } = element;
       const globalTheme = deps.getSystemGlobalTheme(element);
-      if (!props2.borderColor)
+      if (!props5.borderColor)
         return;
       return {
-        borderColor: deps.getMediaColor(props2.borderColor, globalTheme)
+        borderColor: deps.getMediaColor(props5.borderColor, globalTheme)
       };
     },
-    borderStyle: ({ props: props2 }) => !(0, import_utils6.isUndefined)(props2.borderStyle) && {
-      borderStyle: props2.borderStyle
+    borderStyle: ({ props: props5 }) => !(0, import_utils6.isUndefined)(props5.borderStyle) && {
+      borderStyle: props5.borderStyle
     },
-    borderLeft: ({ props: props2, deps }) => !(0, import_utils6.isUndefined)(props2.borderLeft) && {
-      borderLeft: deps.transformBorder(props2.borderLeft)
+    borderLeft: ({ props: props5, deps }) => !(0, import_utils6.isUndefined)(props5.borderLeft) && {
+      borderLeft: deps.transformBorder(props5.borderLeft)
     },
-    borderTop: ({ props: props2, deps }) => !(0, import_utils6.isUndefined)(props2.borderTop) && {
-      borderTop: deps.transformBorder(props2.borderTop)
+    borderTop: ({ props: props5, deps }) => !(0, import_utils6.isUndefined)(props5.borderTop) && {
+      borderTop: deps.transformBorder(props5.borderTop)
     },
-    borderRight: ({ props: props2, deps }) => !(0, import_utils6.isUndefined)(props2.borderRight) && {
-      borderRight: deps.transformBorder(props2.borderRight)
+    borderRight: ({ props: props5, deps }) => !(0, import_utils6.isUndefined)(props5.borderRight) && {
+      borderRight: deps.transformBorder(props5.borderRight)
     },
-    borderBottom: ({ props: props2, deps }) => !(0, import_utils6.isUndefined)(props2.borderBottom) && {
-      borderBottom: deps.transformBorder(props2.borderBottom)
+    borderBottom: ({ props: props5, deps }) => !(0, import_utils6.isUndefined)(props5.borderBottom) && {
+      borderBottom: deps.transformBorder(props5.borderBottom)
     },
     shadow: (element) => {
-      const { props: props2, deps } = element;
+      const { props: props5, deps } = element;
       const globalTheme = deps.getSystemGlobalTheme(element);
-      if (!props2.backgroundImage)
+      if (!props5.backgroundImage)
         return;
       return {
-        boxShadow: deps.transformShadow(props2.shadow, globalTheme)
+        boxShadow: deps.transformShadow(props5.shadow, globalTheme)
       };
     },
     // boxShadow: ({ props, deps }) => isString(props.boxShadow) && ({
     //   boxShadow: deps.transformBoxShadow(props.boxShadow)
     // }),
     boxShadow: (element, state, context) => {
-      const { props: props2, deps } = element;
-      if (!(0, import_utils6.isString)(props2.boxShadow))
+      const { props: props5, deps } = element;
+      if (!(0, import_utils6.isString)(props5.boxShadow))
         return;
-      const [val, hasImportant] = props2.boxShadow.split("!importan");
+      const [val, hasImportant] = props5.boxShadow.split("!importan");
       const globalTheme = getSystemGlobalTheme(element);
       const important = hasImportant ? " !important" : "";
       return {
         boxShadow: deps.transformBoxShadow(val.trim(), globalTheme) + important
       };
     },
-    textShadow: ({ props: props2, deps, context }) => !(0, import_utils6.isUndefined)(props2.textShadow) && {
-      textShadow: deps.transformBoxShadow(props2.textShadow, context.designSystem.globalTheme)
+    textShadow: ({ props: props5, deps, context }) => !(0, import_utils6.isUndefined)(props5.textShadow) && {
+      textShadow: deps.transformBoxShadow(props5.textShadow, context.designSystem.globalTheme)
     },
-    backdropFilter: ({ props: props2, deps }) => !(0, import_utils6.isUndefined)(props2.backdropFilter) && {
-      backdropFilter: props2.backdropFilter
+    backdropFilter: ({ props: props5, deps }) => !(0, import_utils6.isUndefined)(props5.backdropFilter) && {
+      backdropFilter: props5.backdropFilter
     },
-    caretColor: ({ props: props2 }) => !(0, import_utils6.isUndefined)(props2.caretColor) && {
-      caretColor: props2.caretColor
+    caretColor: ({ props: props5 }) => !(0, import_utils6.isUndefined)(props5.caretColor) && {
+      caretColor: props5.caretColor
     },
-    opacity: ({ props: props2 }) => !(0, import_utils6.isUndefined)(props2.opacity) && {
-      opacity: props2.opacity
+    opacity: ({ props: props5 }) => !(0, import_utils6.isUndefined)(props5.opacity) && {
+      opacity: props5.opacity
     },
-    visibility: ({ props: props2 }) => !(0, import_utils6.isUndefined)(props2.visibility) && {
-      visibility: props2.visibility
+    visibility: ({ props: props5 }) => !(0, import_utils6.isUndefined)(props5.visibility) && {
+      visibility: props5.visibility
     },
-    columnRule: ({ props: props2, deps }) => !(0, import_utils6.isUndefined)(props2.columnRule) && {
-      columnRule: deps.transformBorder(props2.columnRule)
+    columnRule: ({ props: props5, deps }) => !(0, import_utils6.isUndefined)(props5.columnRule) && {
+      columnRule: deps.transformBorder(props5.columnRule)
     },
-    filter: ({ props: props2, deps }) => !(0, import_utils6.isUndefined)(props2.filter) && {
-      filter: props2.filter
+    filter: ({ props: props5, deps }) => !(0, import_utils6.isUndefined)(props5.filter) && {
+      filter: props5.filter
     },
-    mixBlendMode: ({ props: props2, deps }) => !(0, import_utils6.isUndefined)(props2.mixBlendMode) && {
-      mixBlendMode: props2.mixBlendMode
+    mixBlendMode: ({ props: props5, deps }) => !(0, import_utils6.isUndefined)(props5.mixBlendMode) && {
+      mixBlendMode: props5.mixBlendMode
     },
-    appearance: ({ props: props2 }) => !(0, import_utils6.isUndefined)(props2.appearance) && {
-      appearance: props2.appearance
+    appearance: ({ props: props5 }) => !(0, import_utils6.isUndefined)(props5.appearance) && {
+      appearance: props5.appearance
     }
   }
 };
 
 // ../uikit/Atoms/Media.js
 var keySetters = {
-  "@": (key, props2, result, element, isSubtree) => applyMediaProps(
+  "@": (key, props5, result, element, isSubtree) => applyMediaProps(
     key,
-    props2,
+    props5,
     isSubtree ? result : result && result.media,
     element
   ),
-  ":": (key, props2, result, element, isSubtree) => applySelectorProps(
+  ":": (key, props5, result, element, isSubtree) => applySelectorProps(
     key,
-    props2,
+    props5,
     isSubtree ? result : result && result.selector,
     element
   ),
-  "[": (key, props2, result, element, isSubtree) => applySelectorProps(
+  "[": (key, props5, result, element, isSubtree) => applySelectorProps(
     key,
-    props2,
+    props5,
     isSubtree ? result : result && result.selector,
     element
   ),
-  "*": (key, props2, result, element, isSubtree) => applySelectorProps(
+  "*": (key, props5, result, element, isSubtree) => applySelectorProps(
     key,
-    props2,
+    props5,
     isSubtree ? result : result && result.selector,
     element
   ),
-  "+": (key, props2, result, element, isSubtree) => applySelectorProps(
+  "+": (key, props5, result, element, isSubtree) => applySelectorProps(
     key,
-    props2,
+    props5,
     isSubtree ? result : result && result.selector,
     element
   ),
-  "~": (key, props2, result, element, isSubtree) => applySelectorProps(
+  "~": (key, props5, result, element, isSubtree) => applySelectorProps(
     key,
-    props2,
+    props5,
     isSubtree ? result : result && result.selector,
     element
   ),
-  "&": (key, props2, result, element, isSubtree) => applyAndProps(
+  "&": (key, props5, result, element, isSubtree) => applyAndProps(
     key,
-    props2,
+    props5,
     isSubtree ? result : result && result.selector,
     element
   ),
-  ">": (key, props2, result, element, isSubtree) => applyAndProps(
+  ">": (key, props5, result, element, isSubtree) => applyAndProps(
     key,
-    props2,
+    props5,
     isSubtree ? result : result && result.selector,
     element
   ),
-  $: (key, props2, result, element, isSubtree) => applyCaseProps(
+  $: (key, props5, result, element, isSubtree) => applyCaseProps(
     key,
-    props2,
+    props5,
     isSubtree ? result : result && result.case,
     element
   ),
-  "-": (key, props2, result, element, isSubtree) => applyVariableProps(
+  "-": (key, props5, result, element, isSubtree) => applyVariableProps(
     key,
-    props2,
+    props5,
     isSubtree ? result : result && result.variable,
     element
   ),
-  ".": (key, props2, result, element, isSubtree) => applyConditionalCaseProps(
+  ".": (key, props5, result, element, isSubtree) => applyConditionalCaseProps(
     key,
-    props2,
+    props5,
     isSubtree ? result : result && result.case,
     element
   ),
-  "!": (key, props2, result, element, isSubtree) => applyConditionalFalsyProps(
+  "!": (key, props5, result, element, isSubtree) => applyConditionalFalsyProps(
     key,
-    props2,
+    props5,
     isSubtree ? result : result && result.case,
     element
   )
 };
-var execClass = (key, props2, result, element) => {
+var execClass = (key, props5, result, element) => {
   const { class: className } = element;
   const classnameExec = className[key];
   if (typeof classnameExec !== "function")
     return;
   let classExec = classnameExec({
-    props: props2,
+    props: props5,
     context: element.context,
     state: element.state,
     deps: element.deps
@@ -18511,27 +18640,27 @@ var execClass = (key, props2, result, element) => {
   }
   return classExec;
 };
-var convertPropsToClass = (props2, result, element) => {
+var convertPropsToClass = (props5, result, element) => {
   const propsClassObj = {};
-  for (const key in props2) {
+  for (const key in props5) {
     const setter = keySetters[key.slice(0, 1)];
     if (setter) {
-      setter(key, props2[key], propsClassObj, element, true);
+      setter(key, props5[key], propsClassObj, element, true);
       continue;
     } else {
-      execClass(key, props2, propsClassObj, element);
+      execClass(key, props5, propsClassObj, element);
     }
   }
   return propsClassObj;
 };
-var applyMediaProps = (key, props2, result, element) => {
+var applyMediaProps = (key, props5, 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(props2, result, element);
+  const generatedClass = convertPropsToClass(props5, result, element);
   const name = key.slice(1);
   const isTheme = ["dark", "light"].includes(name);
   const matchesGlobal = name === globalTheme;
@@ -18545,43 +18674,43 @@ var applyMediaProps = (key, props2, result, element) => {
   result[mediaKey] = generatedClass;
   return result[mediaKey];
 };
-var applyAndProps = (key, props2, result, element) => {
-  result[key] = convertPropsToClass(props2, result, element);
+var applyAndProps = (key, props5, result, element) => {
+  result[key] = convertPropsToClass(props5, result, element);
   return result[key];
 };
-var applySelectorProps = (key, props2, result, element) => {
+var applySelectorProps = (key, props5, result, element) => {
   const selectorKey = `&${key}`;
-  result[selectorKey] = convertPropsToClass(props2, result, element);
+  result[selectorKey] = convertPropsToClass(props5, result, element);
   return result[selectorKey];
 };
-var applyCaseProps = (key, props2, result, element) => {
+var applyCaseProps = (key, props5, 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(props2, result, element));
+  return (0, import_utils7.merge)(result, convertPropsToClass(props5, result, element));
 };
-var applyVariableProps = (key, props2, result, element) => {
-  result[key] = props2;
+var applyVariableProps = (key, props5, result, element) => {
+  result[key] = props5;
   return result;
 };
-var applyConditionalCaseProps = (key, props2, result, element) => {
+var applyConditionalCaseProps = (key, props5, 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(props2, result, element));
+  return (0, import_utils7.overwriteDeep)(result, convertPropsToClass(props5, result, element));
 };
-var applyConditionalFalsyProps = (key, props2, result, element) => {
+var applyConditionalFalsyProps = (key, props5, 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(props2, result, element));
+    return (0, import_utils7.overwriteDeep)(result, convertPropsToClass(props5, result, element));
 };
-var applyTrueProps = (props2, result, element) => (0, import_utils7.merge)(result, convertPropsToClass(props2, result, element));
+var applyTrueProps = (props5, result, element) => (0, import_utils7.merge)(result, convertPropsToClass(props5, result, element));
 var beforeClassAssign = (element, s) => {
-  const { props: props2, class: className, context } = element;
+  const { props: props5, class: className, context } = element;
   const CLASS_NAMES = {
     media: {},
     selector: {},
@@ -18591,11 +18720,11 @@ var beforeClassAssign = (element, s) => {
   if (!context)
     return;
   const globalTheme = context.designSystem.globalTheme;
-  for (const key in props2) {
+  for (const key in props5) {
     const setter = keySetters[key.slice(0, 1)];
     if (globalTheme) {
-      if (key === "theme" && !props2.themeModifier) {
-        props2.update({
+      if (key === "theme" && !props5.themeModifier) {
+        props5.update({
           themeModifier: globalTheme
         }, {
           preventListeners: true,
@@ -18606,9 +18735,9 @@ var beforeClassAssign = (element, s) => {
       }
     }
     if (setter)
-      setter(key, props2[key], CLASS_NAMES, element);
+      setter(key, props5[key], CLASS_NAMES, element);
     else if (key === "true")
-      applyTrueProps(props2[key], CLASS_NAMES, element);
+      applyTrueProps(props5[key], CLASS_NAMES, element);
   }
   const parentProps = element.parent && element.parent.props;
   if (parentProps && parentProps.spacingRatio && parentProps.inheritSpacingRatio) {
@@ -18644,23 +18773,23 @@ var Iframe = {
     minHeight: "H"
   },
   attr: {
-    src: ({ props: props2 }) => props2.src,
-    srcdoc: ({ props: props2 }) => props2.srcdoc,
-    sandbox: ({ props: props2 }) => props2.sandbox,
-    seamless: ({ props: props2 }) => props2.seamless,
-    loading: ({ props: props2 }) => props2.loading,
-    allowfullscreen: ({ props: props2 }) => props2.allowfullscreen,
-    frameborder: ({ props: props2 }) => props2.frameborder,
-    allow: ({ props: props2 }) => props2.allow,
-    referrerpolicy: ({ props: props2 }) => props2.referrerpolicy
+    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
   }
 };
 
 // ../uikit/Atoms/Interaction.js
 var Interaction = {
   class: {
-    userSelect: ({ props: props2 }) => props2.userSelect && { userSelect: props2.userSelect },
-    pointerEvents: ({ props: props2 }) => props2.pointerEvents && { pointerEvents: props2.pointerEvents },
+    userSelect: ({ props: props5 }) => props5.userSelect && { userSelect: props5.userSelect },
+    pointerEvents: ({ props: props5 }) => props5.pointerEvents && { pointerEvents: props5.pointerEvents },
     cursor: (el, s, ctx) => {
       let val = el.props.cursor;
       if (!val)
@@ -18722,8 +18851,8 @@ var Focusable = {
     }
   },
   attr: {
-    placeholder: ({ props: props2 }) => props2.placeholder,
-    tabIndex: ({ props: props2 }) => props2.tabIndex
+    placeholder: ({ props: props5 }) => props5.placeholder,
+    tabIndex: ({ props: props5 }) => props5.tabIndex
   }
 };
 var FocusableComponent = {
@@ -18740,25 +18869,25 @@ var FocusableComponent = {
     style
   },
   attr: {
-    type: ({ props: props2 }) => props2.type
+    type: ({ props: props5 }) => props5.type
   }
 };
 
 // ../uikit/Atoms/Overflow.js
 var Overflow = {
   class: {
-    overflow: ({ props: props2, deps }) => !deps.isUndefined(props2.overflow) && {
-      overflow: props2.overflow,
+    overflow: ({ props: props5, deps }) => !deps.isUndefined(props5.overflow) && {
+      overflow: props5.overflow,
       scrollBehavior: "smooth"
     },
-    overflowX: ({ props: props2, deps }) => !deps.isUndefined(props2.overflowX) && {
-      overflowX: props2.overflowX
+    overflowX: ({ props: props5, deps }) => !deps.isUndefined(props5.overflowX) && {
+      overflowX: props5.overflowX
     },
-    overflowY: ({ props: props2, deps }) => !deps.isUndefined(props2.overflowY) && {
-      overflowY: props2.overflowY
+    overflowY: ({ props: props5, deps }) => !deps.isUndefined(props5.overflowY) && {
+      overflowY: props5.overflowY
     },
-    overscrollBehavior: ({ props: props2, deps }) => !deps.isUndefined(props2.overscrollBehavior) && {
-      overscrollBehavior: props2.overscrollBehavior
+    overscrollBehavior: ({ props: props5, deps }) => !deps.isUndefined(props5.overscrollBehavior) && {
+      overscrollBehavior: props5.overscrollBehavior
     }
   }
 };
@@ -18770,12 +18899,12 @@ var Collection = {
   define: {
     $collection: (param, el, state) => {
       const { __ref: ref } = el;
-      const { children, childrenAs, childrenExtends } = el.props || {};
+      const { children, childrenAs, childExtends } = el.props || {};
       const childrenExec = children && (0, import_utils8.exec)(children, el, state);
       if ((0, import_utils8.isArray)(childrenExec)) {
         param = (0, import_utils8.deepCloneWithExtend)(childrenExec);
         if (childrenAs)
-          param = param.map((v) => ({ extend: childrenExtends, [childrenAs]: v }));
+          param = param.map((v) => ({ extend: childExtends, [childrenAs]: v }));
       } else if ((0, import_utils8.isObject)(childrenExec)) {
         param = (0, import_utils8.deepCloneWithExtend)(childrenExec);
         param = Object.keys(param).map((v) => {
@@ -18783,7 +18912,7 @@ var Collection = {
           return (0, import_utils8.addAdditionalExtend)(v, val);
         });
         if (childrenAs)
-          param = param.map((v) => ({ extend: childrenExtends, [childrenAs]: v }));
+          param = param.map((v) => ({ extend: childExtends, [childrenAs]: v }));
       }
       if (!param)
         return;
@@ -18935,21 +19064,21 @@ var import_scratch8 = __toESM(require_cjs2());
 var Position = {
   deps: { getSpacingByKey: import_scratch8.getSpacingByKey },
   class: {
-    position: ({ props: props2 }) => props2.position && { position: props2.position },
-    inset: ({ props: props2, deps, context }) => {
-      const { inset } = props2;
+    position: ({ props: props5 }) => props5.position && { position: props5.position },
+    inset: ({ props: props5, deps, context }) => {
+      const { inset } = props5;
       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: props2, deps }) => deps.getSpacingByKey(props2.left, "left"),
-    top: ({ props: props2, deps }) => deps.getSpacingByKey(props2.top, "top"),
-    right: ({ props: props2, deps }) => deps.getSpacingByKey(props2.right, "right"),
-    bottom: ({ props: props2, deps }) => deps.getSpacingByKey(props2.bottom, "bottom"),
-    verticalInset: ({ props: props2, deps }) => {
-      const { verticalInset } = props2;
+    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;
       if (typeof verticalInset !== "string")
         return;
       const vi = verticalInset.split(" ").map((v) => deps.getSpacingByKey(v, "k").k);
@@ -18958,8 +19087,8 @@ var Position = {
         bottom: vi[1] || vi[0]
       };
     },
-    horizontalInset: ({ props: props2, deps }) => {
-      const { horizontalInset } = props2;
+    horizontalInset: ({ props: props5, deps }) => {
+      const { horizontalInset } = props5;
       if (typeof horizontalInset !== "string")
         return;
       const vi = horizontalInset.split(" ").map((v) => deps.getSpacingByKey(v, "k").k);
@@ -18979,31 +19108,31 @@ var Picture = {
     tag: "source",
     attr: {
       media: (element) => {
-        const { props: props2, key, context, deps } = element;
+        const { props: props5, key, context, deps } = element;
         const { MEDIA: MEDIA2 } = context.designSystem;
         const globalTheme = deps.getSystemGlobalTheme(element);
-        const mediaName = (props2.media || key).slice(1);
+        const mediaName = (props5.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: props2 }) => props2.srcset
+      srcset: ({ props: props5 }) => props5.srcset
     }
   },
-  Img: ({ props: props2 }) => ({
+  Img: ({ props: props5 }) => ({
     width: "inherit",
     ignoreChildExtend: true,
     height: "inherit",
-    src: props2.src
+    src: props5.src
   })
 };
 
 // ../uikit/Atoms/Pseudo.js
 var Pseudo = {
   class: {
-    content: ({ props: props2 }) => props2.content && { content: props2.content }
+    content: ({ props: props5 }) => props5.content && { content: props5.content }
   }
 };
 
@@ -19015,28 +19144,30 @@ var Svg = {
     xmlns: "http://www.w3.org/2000/svg",
     "xmlns:xlink": "http://www.w3.org/1999/xlink"
   },
-  html: ({ key, props: props2, context, ...el }) => {
-    if (props2.semantic_symbols)
+  html: (el) => {
+    const { props: props5, context } = el;
+    if (props5.semantic_symbols)
       return;
+    if (props5.html)
+      return el.call("exec", props5.html, el);
     const { designSystem, utils: utils2 } = context;
     const SVG = designSystem && designSystem.SVG;
-    const useSvgSprite = props2.spriteId || context.designSystem && context.designSystem.useSvgSprite;
-    if (props2.html)
-      return props2.html;
-    if (!useSvgSprite && props2.src)
-      return props2.src;
+    const useSvgSprite = props5.spriteId || context.designSystem && context.designSystem.useSvgSprite;
+    const src = el.call("exec", props5.src, el);
+    if (!useSvgSprite && src)
+      return src;
     const useSVGSymbol = (icon) => `<use xlink:href="#${icon}" />`;
-    const spriteId = props2.spriteId;
+    const spriteId = props5.spriteId;
     if (spriteId)
       return useSVGSymbol(spriteId);
-    const symbolId = Symbol.for(props2.src);
+    const symbolId = Symbol.for(src);
     let SVGKey = SVG[symbolId];
     if (SVGKey && SVG[SVGKey])
       return useSVGSymbol(SVGKey);
     SVGKey = SVG[symbolId] = Math.random();
-    if (props2.src) {
+    if (src) {
       utils2.init({
-        svg: { [SVGKey]: props2.src }
+        svg: { [SVGKey]: src }
       }, {
         document: context.document,
         emotion: context.emotion
@@ -19049,77 +19180,80 @@ var Svg = {
 // ../uikit/Atoms/Shape/index.js
 var import_utils9 = __toESM(require_cjs());
 var import_scratch9 = __toESM(require_cjs2());
-var transformBorderRadius = (radius, props2, propertyName) => {
+var transformBorderRadius = (radius, props5, propertyName) => {
   if (!(0, import_utils9.isString)(radius))
     return;
   return {
-    borderRadius: radius.split(" ").map((v, k) => (0, import_scratch9.getSpacingBasedOnRatio)(props2, propertyName, v)[propertyName]).join(" ")
+    borderRadius: radius.split(" ").map((v, k) => (0, import_scratch9.getSpacingBasedOnRatio)(props5, propertyName, v)[propertyName]).join(" ")
   };
 };
 var Shape = {
   extend: Pseudo,
   deps: { exec: import_utils9.exec, getSpacingBasedOnRatio: import_scratch9.getSpacingBasedOnRatio, getMediaColor: import_scratch9.getMediaColor, transformBorderRadius },
   class: {
-    shape: ({ props: props2, deps }) => {
-      const { shape } = props2;
-      return deps.exec(SHAPES[shape], { props: props2, deps });
+    shape: ({ props: props5, deps }) => {
+      const { shape } = props5;
+      return deps.exec(SHAPES[shape], { props: props5, deps });
     },
-    shapeDirection: ({ props: props2 }) => {
-      const { shape, shapeDirection } = props2;
+    shapeDirection: ({ props: props5 }) => {
+      const { shape, shapeDirection } = props5;
       if (!shape || !shapeDirection)
         return;
       const shapeDir = SHAPES[shape + "Direction"];
       return shape && shapeDir ? shapeDir[shapeDirection || "left"] : null;
     },
-    shapeDirectionColor: ({ props: props2, deps }) => {
-      const { background, backgroundColor } = props2;
+    shapeDirectionColor: ({ props: props5, deps }) => {
+      const { background, backgroundColor } = props5;
       const borderColor = {
         borderColor: deps.getMediaColor(background || backgroundColor)
       };
-      return props2.shapeDirection ? borderColor : null;
+      return props5.shapeDirection ? borderColor : null;
     },
-    round: ({ props: props2, key, deps, ...el }) => deps.transformBorderRadius(props2.round || props2.borderRadius, props2, "round"),
-    borderRadius: ({ props: props2, key, deps, ...el }) => deps.transformBorderRadius(props2.borderRadius || props2.round, props2, "borderRadius")
+    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")
   }
 };
 
 // ../uikit/Atoms/Text.js
 var import_utils10 = __toESM(require_cjs());
 var import_scratch10 = __toESM(require_cjs2());
+var props2 = {
+  fontSize: (el) => {
+    const { props: props5, deps } = el;
+    return props5.fontSize ? deps.getFontSizeByKey(props5.fontSize) : null;
+  },
+  fontFamily: ({ props: props5, deps }) => ({
+    fontFamily: deps.getFontFamily(props5.fontFamily) || props5.fontFamily
+  }),
+  fontWeight: ({ props: props5 }) => ({
+    fontWeight: props5.fontWeight,
+    fontVariationSettings: '"wght" ' + props5.fontWeight
+  })
+};
 var Text = {
   deps: { exec: import_utils10.exec, getFontSizeByKey: import_scratch10.getFontSizeByKey, getFontFamily: import_scratch10.getFontFamily },
   text: (el) => {
-    const { key, props: props2, state, deps } = el;
-    if (props2.text === true)
-      return state && state[key] || props2 && props2[key];
-    return deps.exec(props2.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);
   },
   class: {
-    fontSize: (el) => {
-      const { props: props2, deps } = el;
-      return props2.fontSize ? deps.getFontSizeByKey(props2.fontSize) : null;
-    },
-    font: ({ props: props2 }) => !(0, import_utils10.isUndefined)(props2.font) && { font: props2.font },
-    fontFamily: ({ props: props2, deps }) => !(0, import_utils10.isUndefined)(props2.fontFamily) && {
-      fontFamily: deps.getFontFamily(props2.fontFamily) || props2.fontFamily
-    },
-    lineHeight: ({ props: props2 }) => !(0, import_utils10.isUndefined)(props2.lineHeight) && { lineHeight: props2.lineHeight },
+    font: ({ props: props5 }) => !(0, import_utils10.isUndefined)(props5.font) && { font: props5.font },
+    lineHeight: ({ props: props5 }) => !(0, import_utils10.isUndefined)(props5.lineHeight) && { lineHeight: props5.lineHeight },
     // lineHeight: ({ props }) => !isUndefined(props.lineHeight) && getSpacingBasedOnRatio(props, 'lineHeight', null, ''),
-    textDecoration: ({ props: props2 }) => !(0, import_utils10.isUndefined)(props2.textDecoration) && { textDecoration: props2.textDecoration },
-    textTransform: ({ props: props2 }) => !(0, import_utils10.isUndefined)(props2.textTransform) && { textTransform: props2.textTransform },
-    wordBreak: ({ props: props2 }) => !(0, import_utils10.isUndefined)(props2.wordBreak) && { wordBreak: props2.wordBreak },
-    whiteSpace: ({ props: props2 }) => !(0, import_utils10.isUndefined)(props2.whiteSpace) && { whiteSpace: props2.whiteSpace },
-    wordWrap: ({ props: props2 }) => !(0, import_utils10.isUndefined)(props2.wordWrap) && { wordWrap: props2.wordWrap },
-    letterSpacing: ({ props: props2 }) => !(0, import_utils10.isUndefined)(props2.letterSpacing) && { letterSpacing: props2.letterSpacing },
-    textOverflow: ({ props: props2 }) => !(0, import_utils10.isUndefined)(props2.textOverflow) && { textOverflow: props2.textOverflow },
-    textAlign: ({ props: props2 }) => !(0, import_utils10.isUndefined)(props2.textAlign) && { textAlign: props2.textAlign },
-    writingMode: ({ props: props2 }) => !(0, import_utils10.isUndefined)(props2.writingMode) && { writingMode: props2.writingMode },
-    textOrientation: ({ props: props2 }) => !(0, import_utils10.isUndefined)(props2.textOrientation) && { textOrientation: props2.textOrientation },
-    textIndent: ({ props: props2 }) => !(0, import_utils10.isUndefined)(props2.textIndent) && { textIndent: props2.textIndent },
-    fontWeight: ({ props: props2 }) => !(0, import_utils10.isUndefined)(props2.fontWeight) && {
-      fontWeight: props2.fontWeight,
-      fontVariationSettings: '"wght" ' + props2.fontWeight
-    }
+    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 },
+    ...props2
   }
 };
 var H1 = { tag: "h1" };
@@ -19157,10 +19291,10 @@ var Data = { tag: "data" };
 var import_utils11 = __toESM(require_cjs());
 var Transform = {
   class: {
-    zoom: ({ props: props2 }) => !(0, import_utils11.isUndefined)(props2.zoom) && { zoom: props2.zoom },
-    transform: ({ props: props2 }) => !(0, import_utils11.isUndefined)(props2.transform) && { transform: props2.transform },
-    transformOrigin: ({ props: props2 }) => !(0, import_utils11.isUndefined)(props2.transformOrigin) && { transformOrigin: props2.transformOrigin },
-    backfaceVisibility: ({ props: props2 }) => !(0, import_utils11.isUndefined)(props2.backfaceVisibility) && { backfaceVisibility: props2.backfaceVisibility }
+    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 }
   }
 };
 
@@ -19168,9 +19302,9 @@ var Transform = {
 var import_utils12 = __toESM(require_cjs());
 var XYZ = {
   class: {
-    zIndex: ({ props: props2 }) => !(0, import_utils12.isUndefined)(props2.zIndex) && { zIndex: props2.zIndex },
-    perspective: ({ props: props2 }) => !(0, import_utils12.isUndefined)(props2.perspective) && { perspective: props2.perspective },
-    perspectiveOrigin: ({ props: props2 }) => !(0, import_utils12.isUndefined)(props2.perspectiveOrigin) && { perspectiveOrigin: props2.perspectiveOrigin }
+    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 }
   }
 };
 
@@ -19186,41 +19320,44 @@ var applyAnimationProps = (animation, element) => {
   const record = ANIMATION[animation];
   return keyframes(record);
 };
+var props3 = {
+  animation: (el) => el.props.animation && {
+    animationName: el.deps.applyAnimationProps(el.props.animation, el),
+    animationDuration: el.deps.getTimingByKey(el.props.animationDuration || "A").timing,
+    animationDelay: el.deps.getTimingByKey(el.props.animationDelay || "0s").timing,
+    animationTimingFunction: el.deps.getTimingFunction(el.props.animationTimingFunction || "ease"),
+    animationFillMode: el.props.animationFillMode || "both",
+    animationPlayState: el.props.animationPlayState,
+    animationDirection: el.props.animationDirection
+  },
+  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
+  },
+  animationDelay: ({ props: props5, deps }) => props5.animationDelay && {
+    animationDelay: deps.getTimingByKey(props5.animationDelay).timing
+  },
+  animationTimingFunction: ({ props: props5, deps }) => props5.animationTimingFunction && {
+    animationTimingFunction: deps.getTimingFunction(props5.animationTimingFunction)
+  }
+};
 var Animation = {
   deps: { isObject: import_utils13.isObject, getTimingByKey: import_scratch11.getTimingByKey, getTimingFunction: import_scratch11.getTimingFunction, applyAnimationProps },
   class: {
-    animation: (el) => el.props.animation && {
-      animationName: el.deps.applyAnimationProps(el.props.animation, el),
-      animationDuration: el.deps.getTimingByKey(el.props.animationDuration || "A").timing,
-      animationDelay: el.deps.getTimingByKey(el.props.animationDelay || "0s").timing,
-      animationTimingFunction: el.deps.getTimingFunction(el.props.animationTimingFunction || "ease"),
-      animationFillMode: el.props.animationFillMode || "both",
-      animationPlayState: el.props.animationPlayState,
-      animationDirection: el.props.animationDirection
+    ...props3,
+    animationFillMode: ({ props: props5 }) => props5.animationFillMode && {
+      animationFillMode: props5.animationFillMode
     },
-    animationName: (el) => el.props.animationName && {
-      animationName: el.deps.applyAnimationProps(el.props.animationName, el)
+    animationPlayState: ({ props: props5 }) => props5.animationPlayState && {
+      animationPlayState: props5.animationPlayState
     },
-    animationDuration: ({ props: props2, deps }) => props2.animationDuration && {
-      animationDuration: deps.getTimingByKey(props2.animationDuration).timing
+    animationIterationCount: ({ props: props5 }) => props5.animationIterationCount && {
+      animationIterationCount: props5.animationIterationCount || 1
     },
-    animationDelay: ({ props: props2, deps }) => props2.animationDelay && {
-      animationDelay: deps.getTimingByKey(props2.animationDelay).timing
-    },
-    animationTimingFunction: ({ props: props2, deps }) => props2.animationTimingFunction && {
-      animationTimingFunction: deps.getTimingFunction(props2.animationTimingFunction)
-    },
-    animationFillMode: ({ props: props2 }) => props2.animationFillMode && {
-      animationFillMode: props2.animationFillMode
-    },
-    animationPlayState: ({ props: props2 }) => props2.animationPlayState && {
-      animationPlayState: props2.animationPlayState
-    },
-    animationIterationCount: ({ props: props2 }) => props2.animationIterationCount && {
-      animationIterationCount: props2.animationIterationCount || 1
-    },
-    animationDirection: ({ props: props2 }) => props2.animationDirection && {
-      animationDirection: props2.animationDirection
+    animationDirection: ({ props: props5 }) => props5.animationDirection && {
+      animationDirection: props5.animationDirection
     }
   }
 };
@@ -19229,37 +19366,37 @@ var Animation = {
 var import_utils14 = __toESM(require_cjs());
 var PropsCSS = {
   class: {
-    style: ({ props: props2 }) => props2 && props2.style
+    style: ({ props: props5 }) => props5 && props5.style
   }
 };
 var Box = {
   extend: [
     PropsCSS,
-    Shape,
-    Position,
-    Theme,
-    Block,
-    Text,
-    Overflow,
-    Timing,
-    Transform,
-    Media,
-    Interaction,
-    XYZ,
-    Animation
+    "Shape",
+    "Position",
+    "Theme",
+    "Block",
+    "Text",
+    "Overflow",
+    "Timing",
+    "Transform",
+    "Media",
+    "Interaction",
+    "XYZ",
+    "Animation"
   ],
   deps: { isString: import_utils14.isString, isUndefined: import_utils14.isUndefined },
   attr: {
-    id: ({ props: props2, deps }) => deps.isString(props2.id) && props2.id,
-    title: ({ props: props2, deps }) => deps.isString(props2.title) && props2.title,
-    contentEditable: ({ props: props2 }) => props2.contentEditable || props2.contenteditable,
-    dir: ({ props: props2 }) => props2.dir,
-    draggable: ({ props: props2 }) => props2.draggable,
-    hidden: ({ props: props2 }) => props2.hidden,
-    lang: ({ props: props2 }) => props2.lang,
-    spellcheck: ({ props: props2 }) => props2.spellcheck,
-    tabindex: ({ props: props2 }) => props2.tabindex,
-    translate: ({ props: props2 }) => props2.translate
+    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
   }
 };
 var Circle = {
@@ -19271,23 +19408,23 @@ var Circle = {
 // ../uikit/Icon/index.js
 var import_utils15 = __toESM(require_cjs());
 var inheritFromIsActive = (el) => {
-  const { props: props2 } = el;
-  const propsActive = props2[".isActive"];
+  const { props: props5 } = el;
+  const propsActive = props5[".isActive"];
   return el.call("exec", propsActive.name || propsActive.icon);
 };
 var getIconName = (el, s) => {
-  const { key, props: props2, deps } = el;
-  let iconName = el.call("exec", props2.name || props2.icon || key, el);
-  if ((0, import_utils15.isString)(iconName) && iconName.includes("{{")) {
-    iconName = deps.replaceLiteralsWithObjectFields(iconName, s);
+  const { key, props: props5 } = el;
+  let icon = el.call("exec", props5.name || props5.icon || key, el);
+  if ((0, import_utils15.isString)(icon) && icon.includes("{{")) {
+    icon = el.call("replaceLiteralsWithObjectFields", icon, s);
   }
-  return deps.isString(iconName) ? iconName : key;
+  return el.call("isString", icon) ? icon : key;
 };
 var Icon = {
   extend: "Svg",
   deps: { isString: import_utils15.isString, replaceLiteralsWithObjectFields: import_utils15.replaceLiteralsWithObjectFields },
   props: (el, s, ctx) => {
-    const { props: props2, parent, deps } = el;
+    const { props: props5, parent, deps } = el;
     const { ICONS, useIconSprite, verbose } = ctx && ctx.designSystem;
     const { toCamelCase } = ctx && ctx.utils;
     const iconName = getIconName(el, s);
@@ -19297,7 +19434,7 @@ var Icon = {
     if (semanticIcon)
       return semanticIcon;
     let activeIconName;
-    if (props2.isActive)
+    if (props5.isActive)
       activeIconName = inheritFromIsActive(el);
     const parentProps = parent.props;
     const parentPropsActive = parentProps[".isActive"];
@@ -19324,7 +19461,7 @@ var Icon = {
         el.warn("Can't find icon:", iconName, iconInContext);
     }
     const iconFromLibrary = ICONS[iconInContext];
-    const directSrc = parent && parent.props && parent.props.src || props2.src;
+    const directSrc = parent && parent.props && parent.props.src || props5.src;
     return {
       width: "A",
       height: "A",
@@ -19340,21 +19477,26 @@ var IconText = {
   extend: "Flex",
   props: {
     align: "center center",
-    lineHeight: 1
-  },
-  Icon: {
-    props: (el) => ({ icon: el.call("exec", el.parent.props.icon, el.parent) }),
-    if: ({ parent, props: props2 }) => {
-      return parent.props.icon || parent.props.Icon || props2.name || props2.icon || props2.sfSymbols || parent.props.sfSymbols;
+    lineHeight: 1,
+    ".reversed": {
+      flow: "row-reverse"
+    },
+    ".vertical": {
+      flow: "column"
     }
   },
-  text: ({ props: props2 }) => props2.text,
-  ".reversed": {
-    props: { flow: "row-reverse" }
+  Icon: {
+    if: (el) => {
+      const { parent, props: props5 } = el;
+      return el.call(
+        "exec",
+        parent.props.icon || parent.props.Icon || props5.name || props5.icon || props5.sfSymbols || parent.props.sfSymbols,
+        el
+      );
+    },
+    icon: (el) => el.call("exec", el.parent.props.icon, el.parent)
   },
-  ".vertical": {
-    props: { flow: "column" }
-  }
+  text: ({ props: props5 }) => props5.text
 };
 var FileIcon = {
   extend: "Flex",
@@ -19675,16 +19817,16 @@ var Link = {
       }
       return href;
     },
-    target: ({ props: props2 }) => props2.target,
-    "aria-label": ({ props: props2 }) => props2.aria ? props2.aria.label : props2.text,
-    draggable: ({ props: props2 }) => props2.draggable
+    target: ({ props: props5 }) => props5.target,
+    "aria-label": ({ props: props5 }) => props5.aria ? props5.aria.label : props5.text,
+    draggable: ({ props: props5 }) => props5.draggable
   }
 };
 var RouterLink = {
   on: {
     click: (event, el, s) => {
-      const { props: props2, context: ctx } = el;
-      const { href: h, scrollToTop, stopPropagation } = props2;
+      const { props: props5, context: ctx } = el;
+      const { href: h, scrollToTop, stopPropagation } = props5;
       const { exec: exec7, isString: isString13, replaceLiteralsWithObjectFields: replaceLiteralsWithObjectFields3, isDefined: isDefined2 } = ctx.utils;
       let href = exec7(h, el, s);
       if (isString13(href) && href.includes("{{")) {
@@ -19703,7 +19845,7 @@ var RouterLink = {
             scrollToOptions: { behaviour: "instant" },
             scrollToTop: isDefined2(scrollToTop) ? scrollToTop : true,
             ...routerOptions,
-            ...props2.routerOptions
+            ...props5.routerOptions
           });
           event.preventDefault();
         } catch (e) {
@@ -19723,23 +19865,23 @@ var Video = {
   childExtend: {
     tag: "source",
     attr: {
-      src: ({ props: props2 }) => props2.src,
-      type: ({ props: props2 }) => props2.type,
-      controls: ({ props: props2 }) => props2.controls
+      src: ({ props: props5 }) => props5.src,
+      type: ({ props: props5 }) => props5.type,
+      controls: ({ props: props5 }) => props5.controls
     }
   },
   props: {
     controls: true
   },
   attr: {
-    src: ({ props: props2 }) => props2.src,
-    playsinline: ({ props: props2 }) => props2.playsinline,
-    autoplay: ({ props: props2 }) => props2.autoplay,
-    loop: ({ props: props2 }) => props2.loop,
-    poster: ({ props: props2 }) => props2.poster,
-    muted: ({ props: props2 }) => props2.muted,
-    preload: ({ props: props2 }) => props2.preload,
-    controls: ({ props: props2 }) => props2.controls
+    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
   }
 };
 
@@ -19783,23 +19925,25 @@ var Input = {
     padding: "Z2 B"
   },
   attr: {
-    pattern: ({ props: props2 }) => props2.pattern,
-    minLength: ({ props: props2 }) => props2.minlength,
-    maxLength: ({ props: props2 }) => props2.maxlength,
-    name: ({ props: props2 }) => props2.name,
-    autocomplete: ({ props: props2 }) => props2.autocomplete,
-    placeholder: ({ props: props2 }) => props2.placeholder,
-    value: ({ props: props2, state, deps }) => {
-      const { isString: isString13, replaceLiteralsWithObjectFields: replaceLiteralsWithObjectFields3 } = deps;
-      if (isString13(props2.value) && props2.value.includes("{{")) {
-        return replaceLiteralsWithObjectFields3(props2.value, state);
-      }
-      return props2.value;
+    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,
+    value: (el, s) => {
+      const { props: props5, state, deps } = el;
+      const { isString: isString13, exec: exec7, replaceLiteralsWithObjectFields: replaceLiteralsWithObjectFields3 } = deps;
+      const val = exec7(props5.value, el);
+      if (isString13(val) && val.includes("{{")) {
+        return replaceLiteralsWithObjectFields3(val, state);
+      }
+      return val;
     },
-    disabled: ({ props: props2 }) => props2.disabled || null,
-    readonly: ({ props: props2 }) => props2.readonly,
-    required: ({ props: props2 }) => props2.required,
-    type: ({ props: props2 }) => props2.type
+    disabled: ({ props: props5 }) => props5.disabled || null,
+    readonly: ({ props: props5 }) => props5.readonly,
+    required: ({ props: props5 }) => props5.required,
+    type: ({ props: props5 }) => props5.type
   }
 };
 
@@ -19822,9 +19966,9 @@ var NumberInput = {
     }
   },
   attr: {
-    step: ({ props: props2 }) => props2.step,
-    min: ({ props: props2 }) => props2.min,
-    max: ({ props: props2 }) => props2.max
+    step: ({ props: props5 }) => props5.step,
+    min: ({ props: props5 }) => props5.min,
+    max: ({ props: props5 }) => props5.max
   }
 };
 
@@ -20029,14 +20173,14 @@ var Select = {
       disabled: ""
     },
     attr: {
-      value: ({ props: props2 }) => props2.value,
-      selected: ({ props: props2 }) => props2.selected,
-      disabled: ({ props: props2 }) => props2.disabled
+      value: ({ props: props5 }) => props5.value,
+      selected: ({ props: props5 }) => props5.selected,
+      disabled: ({ props: props5 }) => props5.disabled
     }
   },
   attr: {
-    name: ({ props: props2 }) => props2.name,
-    disabled: ({ props: props2 }) => props2.disabled
+    name: ({ props: props5 }) => props5.name,
+    disabled: ({ props: props5 }) => props5.disabled
   }
 };
 
@@ -20097,20 +20241,12 @@ var Field = {
     align: "center flex-start",
     gap: "Y",
     boxSizing: "border-box",
-    position: "relative",
-    Input: {
-      padding: "Z2 B2 Z2 B",
-      flex: "1"
-    },
-    Button: {
-      padding: "0",
-      background: "transparent",
-      margin: "- - - auto",
-      fontSize: "Z2"
-    }
+    position: "relative"
   },
   Input: {
-    placeholder: "Placeholder"
+    placeholder: "Placeholder",
+    padding: "Z2 B2 Z2 B",
+    flex: "1"
   },
   Icon: {
     props: ({ parent }) => ({
@@ -20119,6 +20255,12 @@ var Field = {
       margin: "- Z1 - -C",
       position: "relative"
     })
+  },
+  Button: {
+    padding: "0",
+    background: "transparent",
+    margin: "- - - auto",
+    fontSize: "Z2"
   }
 };
 var FieldTemplate = {
@@ -20291,7 +20433,7 @@ var Button = {
     round: "C2"
   },
   attr: {
-    type: ({ props: props2 }) => props2.type
+    type: ({ props: props5 }) => props5.type
   }
 };
 var SquareButton = {
@@ -20443,9 +20585,9 @@ var ProgressLine = {
     }
   },
   attr: {
-    max: ({ props: props2 }) => props2.max,
-    progress: ({ props: props2 }) => props2.progress,
-    value: ({ props: props2 }) => props2.value
+    max: ({ props: props5 }) => props5.max,
+    progress: ({ props: props5 }) => props5.progress,
+    value: ({ props: props5 }) => props5.value
   }
 };
 var ProgressLineWithUnitValue = {
@@ -20491,9 +20633,9 @@ var ProgressCircle = {
       }
     },
     attr: {
-      max: ({ props: props2 }) => props2.max,
-      progress: ({ props: props2 }) => props2.progress,
-      value: ({ props: props2 }) => props2.value
+      max: ({ props: props5 }) => props5.max,
+      progress: ({ props: props5 }) => props5.progress,
+      value: ({ props: props5 }) => props5.value
     }
   }
 };
@@ -20541,7 +20683,7 @@ var ProgressCircleWithSideUnitValue = {
 // ../uikit/Range/index.js
 var import_utils17 = __toESM(require_cjs());
 var import_scratch12 = __toESM(require_cjs2());
-var props = {
+var props4 = {
   appearance: "none",
   width: "100%",
   height: "2px",
@@ -20606,7 +20748,7 @@ var returnPropertyValue = (el, property, def) => {
   return r + "";
 };
 var Range = {
-  props,
+  props: props4,
   tag: "input",
   attr: {
     type: "range",
@@ -20617,17 +20759,17 @@ var Range = {
   },
   on: {
     input: (ev, el, s) => {
-      const props2 = el.props;
-      if ((0, import_utils17.isFunction)(props2.onInput)) {
-        props2.onInput(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 props2 = el.props;
-      if ((0, import_utils17.isFunction)(props2.onChange)) {
-        props2.onChange(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) });
       }
@@ -20749,8 +20891,8 @@ var Slider = {
       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 props2 = input.props;
-        const value2 = (0, import_utils18.isFunction)(props2.value) ? props2.value() : props2.value;
+        const props5 = input.props;
+        const value2 = (0, import_utils18.isFunction)(props5.value) ? props5.value() : props5.value;
         input.node.value = value2;
       }
     }
@@ -20786,8 +20928,8 @@ var Slider = {
       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 props2 = input.props;
-        const value2 = (0, import_utils18.isFunction)(props2.value) ? props2.value() : props2.value;
+        const props5 = input.props;
+        const value2 = (0, import_utils18.isFunction)(props5.value) ? props5.value() : props5.value;
         input.node.value = value2;
       }
     }
@@ -20839,12 +20981,12 @@ var CardLabel = {
 // ../uikit/Avatar/Avatar.js
 var Avatar = {
   extend: "Img",
-  props: ({ key, props: props2 }) => ({
+  props: ({ key, props: props5 }) => ({
     display: "block",
     avatarType: "adventurer-neutral",
     borderRadius: "100%",
     boxSize: "C+X C+X",
-    src: `https://api.dicebear.com/7.x/${props2.avatarType || "initials"}/svg?seed=${props2.key || key || "no-avatar"}`
+    src: `https://api.dicebear.com/7.x/${props5.avatarType || "initials"}/svg?seed=${props5.key || key || "no-avatar"}`
   })
 };
 
@@ -20881,7 +21023,7 @@ var AvatarBundle = {
     }
   },
   childExtend: Avatar,
-  $propsCollection: ({ props: props2 }) => props2.options
+  $propsCollection: ({ props: props5 }) => props5.options
 };
 
 // ../uikit/Avatar/AvatarChooser.js
@@ -20961,32 +21103,24 @@ var Notification = {
     align: "flex-start center"
   },
   IconText: {
-    props: {
-      icon: "info outline"
-    }
+    icon: "info outline"
   },
   Flex: {
-    props: {
-      flow: "column",
-      align: "flex-start",
-      gap: "X2"
-    },
+    flow: "column",
+    align: "flex-start",
+    gap: "X2",
     Title: {
       tag: "h6",
-      props: {
-        margin: "0",
-        fontWeight: "600",
-        lineHeight: "1em",
-        text: "Notification"
-      }
+      margin: "0",
+      fontWeight: "600",
+      lineHeight: "1em",
+      text: "Notification"
     },
     P: {
-      props: {
-        ":empty": { hide: true },
-        fontSize: "Z",
-        margin: "0",
-        text: "is not always a distraction"
-      }
+      fontSize: "Z",
+      margin: "0",
+      text: "is not always a distraction",
+      ":empty": { hide: true }
     }
   }
 };
@@ -21023,7 +21157,7 @@ var Tooltip = {
   },
   attr: { tooltip: true },
   Title: {
-    if: ({ parent, props: props2 }) => (0, import_utils19.isDefined)(parent.props.title) || props2.text,
+    if: ({ parent, props: props5 }) => (0, import_utils19.isDefined)(parent.props.title) || props5.text,
     props: ({ parent }) => ({
       width: "fit-content",
       fontWeight: 500,
@@ -21032,7 +21166,7 @@ var Tooltip = {
     })
   },
   P: {
-    if: ({ parent, props: props2 }) => (0, import_utils19.isDefined)(parent.props.description) || props2.text,
+    if: ({ parent, props: props5 }) => (0, import_utils19.isDefined)(parent.props.description) || props5.text,
     props: ({ parent }) => ({
       width: "fit-content",
       fontSize: "Z2",
@@ -21045,13 +21179,13 @@ var Tooltip = {
 };
 var TooltipHidden = {
   extend: "Tooltip",
-  props: ({ props: props2 }) => ({
+  props: ({ props: props5 }) => ({
     position: "absolute",
     pointerEvents: "none",
     opacity: "0",
     visibility: "hidden",
     transition: "C defaultBezier opacity, C defaultBezier visibility, B defaultBezier transform",
-    ...props2.shapeDirection === "top" ? {
+    ...props5.shapeDirection === "top" ? {
       top: "112%",
       left: "50%",
       transform: "translate3d(-50%,10%,0)",
@@ -21060,7 +21194,7 @@ var TooltipHidden = {
         opacity: 1,
         visibility: "visible"
       }
-    } : props2.shapeDirection === "right" ? {
+    } : props5.shapeDirection === "right" ? {
       transform: "translate3d(10%,-50%,0)",
       right: "112%",
       top: "50%",
@@ -21069,7 +21203,7 @@ var TooltipHidden = {
         opacity: 1,
         visibility: "visible"
       }
-    } : props2.shapeDirection === "bottom" ? {
+    } : props5.shapeDirection === "bottom" ? {
       transform: "translate3d(-50%,-10%,0)",
       bottom: "112%",
       left: "50%",
@@ -21134,7 +21268,7 @@ var Pills = {
       }
     }
   },
-  $propsCollection: ({ props: props2, state }) => new Array(props2.qty).fill({})
+  $propsCollection: ({ props: props5, state }) => new Array(props5.qty).fill({})
 };
 
 // ../uikit/Tab/index.js
@@ -21873,7 +22007,7 @@ var DropdownList = {
     style: { listStyleType: "none" },
     transition: "B defaultBezier",
     transitionProperty: "transform, opacity, visibility",
-    children: ({ props: props2 }) => props2.options || [],
+    children: ({ props: props5 }) => props5.options || [],
     childrenAs: "props",
     ".hidden": {
       transform: "translate3d(0,10%,0)",
@@ -23567,6 +23701,8 @@ var BaseWS = class extends Transport {
   }
   doClose() {
     if (typeof this.ws !== "undefined") {
+      this.ws.onerror = () => {
+      };
       this.ws.close();
       this.ws = null;
     }
@@ -26537,11 +26673,11 @@ var length2 = 0;
 var position2 = 0;
 var character2 = 0;
 var characters2 = "";
-function node2(value2, root, parent, type, props2, children, length3) {
-  return { value: value2, root, parent, type, props: props2, children, line: line2, column: column2, length: length3, return: "" };
+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 copy2(root, props2) {
-  return assign2(node2("", null, null, "", null, null, 0), root, { length: -root.length }, props2);
+function copy2(root, props5) {
+  return assign2(node2("", null, null, "", null, null, 0), root, { length: -root.length }, props5);
 }
 function char2() {
   return character2;
@@ -26672,7 +26808,7 @@ function parse3(value2, root, parent, rule, rules, rulesets, pseudo, points, dec
   var ampersand = 1;
   var character3 = 0;
   var type = "";
-  var props2 = rules;
+  var props5 = rules;
   var children = rulesets;
   var reference = rule;
   var characters3 = type;
@@ -26726,17 +26862,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, props2 = [], children = [], length3), rulesets);
+            append2(reference = ruleset2(characters3, root, parent, index, offset, rules, points, type, props5 = [], children = [], length3), rulesets);
             if (character3 === 123)
               if (offset === 0)
-                parse3(characters3, root, reference, reference, props2, rulesets, length3, points, children);
+                parse3(characters3, root, reference, reference, props5, 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, props2 = [], length3), children), rules, children, length3, points, rule ? props2 : children);
+                    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);
                     break;
                   default:
                     parse3(characters3, reference, reference, reference, [""], children, 0, points, children);
@@ -26772,15 +26908,15 @@ function parse3(value2, root, parent, rule, rules, rulesets, pseudo, points, dec
     }
   return rulesets;
 }
-function ruleset2(value2, root, parent, index, offset, rules, points, type, props2, children, length3) {
+function ruleset2(value2, root, parent, index, offset, rules, points, type, props5, 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])))
-        props2[k++] = z;
-  return node2(value2, root, parent, offset === 0 ? RULESET2 : type, props2, children, length3);
+        props5[k++] = z;
+  return node2(value2, root, parent, offset === 0 ? RULESET2 : type, props5, children, length3);
 }
 function comment2(value2, root, parent) {
   return node2(value2, root, parent, COMMENT2, from2(char2()), substr2(value2, 2, -2), 0);