smbls 2.11.454 → 2.11.455

package/dist/cjs/index.js

@@ -1157,13 +1157,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");
       }
@@ -1677,7 +1677,9 @@ var require_component = __commonJS({
       applyKeyComponentAsExtend: () => applyKeyComponentAsExtend,
       checkIfKeyIsComponent: () => checkIfKeyIsComponent,
       checkIfKeyIsProperty: () => checkIfKeyIsProperty,
+      checkIfSugar: () => checkIfSugar,
       extendizeByKey: () => extendizeByKey,
+      getCapitalCaseKeys: () => getCapitalCaseKeys,
       getChildrenComponentsByKey: () => getChildrenComponentsByKey,
       getExtendsInElement: () => getExtendsInElement,
       hasVariantProp: () => hasVariantProp,
@@ -1711,12 +1713,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,
@@ -1724,15 +1727,17 @@ var require_component = __commonJS({
         $stateCollection,
         $propsCollection
       } = element;
-      const hasComponentAttrs = extend || childExtend || props2 || on2 || $collection || $stateCollection || $propsCollection;
-      if (hasComponentAttrs && (childProps || extendProps || children || childrenExtends)) {
-        parent.error("Sugar component includes params for builtin components", { verbose: true });
+      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 { tag, extend, childExtends } = element;
       const isSugar = checkIfSugar(element, parent, key);
       const extendFromKey = key.includes("+") ? key.split("+") : key.includes("_") ? [key.split("_")[0]] : key.includes(".") && !checkIfKeyIsComponent(key.split(".")[1]) ? [key.split(".")[0]] : [key];
       const isExtendKeyComponent = context && context.components[extendFromKey];
@@ -1744,8 +1749,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 {
@@ -1774,23 +1779,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, parent, key);
-          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
+          });
         }
       }
     };
@@ -1824,8 +1830,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) => {
@@ -3459,10 +3465,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];
@@ -3844,13 +3850,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");
           }
@@ -4096,9 +4102,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();
@@ -4132,6 +4140,27 @@ var require_cjs2 = __commonJS({
             return;
           import_utils27.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({
@@ -4331,7 +4360,9 @@ var require_cjs2 = __commonJS({
           applyKeyComponentAsExtend: () => applyKeyComponentAsExtend,
           checkIfKeyIsComponent: () => checkIfKeyIsComponent,
           checkIfKeyIsProperty: () => checkIfKeyIsProperty,
+          checkIfSugar: () => checkIfSugar,
           extendizeByKey: () => extendizeByKey,
+          getCapitalCaseKeys: () => getCapitalCaseKeys,
           getChildrenComponentsByKey: () => getChildrenComponentsByKey,
           getExtendsInElement: () => getExtendsInElement,
           hasVariantProp: () => hasVariantProp,
@@ -4365,12 +4396,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,
@@ -4378,16 +4410,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(".") && !checkIfKeyIsComponent(key.split(".")[1]) ? [key.split(".")[0]] : [key];
           const isExtendKeyComponent = context && context.components[extendFromKey];
           if (element === isExtendKeyComponent)
@@ -4398,8 +4432,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 {
@@ -4428,23 +4462,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
+              });
             }
           }
         };
@@ -4478,8 +4513,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) => {
@@ -5326,10 +5361,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];
@@ -5711,13 +5746,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");
               }
@@ -5963,9 +5998,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();
@@ -5999,6 +6036,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({
@@ -6198,7 +6256,9 @@ var require_cjs2 = __commonJS({
               applyKeyComponentAsExtend: () => applyKeyComponentAsExtend,
               checkIfKeyIsComponent: () => checkIfKeyIsComponent,
               checkIfKeyIsProperty: () => checkIfKeyIsProperty,
+              checkIfSugar: () => checkIfSugar,
               extendizeByKey: () => extendizeByKey,
+              getCapitalCaseKeys: () => getCapitalCaseKeys,
               getChildrenComponentsByKey: () => getChildrenComponentsByKey,
               getExtendsInElement: () => getExtendsInElement,
               hasVariantProp: () => hasVariantProp,
@@ -6232,12 +6292,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,
@@ -6245,16 +6306,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(".") && !checkIfKeyIsComponent(key.split(".")[1]) ? [key.split(".")[0]] : [key];
               const isExtendKeyComponent = context && context.components[extendFromKey];
               if (element === isExtendKeyComponent)
@@ -6265,8 +6328,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 {
@@ -6295,23 +6358,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
+                  });
                 }
               }
             };
@@ -6345,8 +6409,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) => {
@@ -7238,8 +7302,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,
@@ -7287,8 +7351,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;
@@ -7327,7 +7391,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,
@@ -7337,9 +7401,9 @@ var require_cjs2 = __commonJS({
           ratio,
           index: key
         };
-        setSequenceValue(props2, sequenceProps);
+        setSequenceValue(props5, sequenceProps);
         if (subSequence)
-          generateSubSequence(props2, sequenceProps);
+          generateSubSequence(props5, sequenceProps);
       }
       return sequenceProps;
     };
@@ -8015,20 +8079,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
           };
         }
@@ -8132,11 +8196,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) {
@@ -8506,7 +8570,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(",");
@@ -8521,11 +8585,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) => {
@@ -8537,13 +8601,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
       });
     };
@@ -8588,11 +8652,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 = {};
@@ -8802,11 +8866,11 @@ var init_Utility = __esm({
 });
 
 // ../../node_modules/stylis/src/Tokenizer.js
-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;
@@ -8949,7 +9013,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;
@@ -9003,17 +9067,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);
@@ -9049,15 +9113,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);
@@ -10045,18 +10109,174 @@ var init_init = __esm({
       const emotion2 = options.emotion || emotion;
       emotion2.injectGlobal({ ":root": config.CSS_VARS });
     };
-    setClass = (props2, options = UPDATE_OPTIONS) => {
+    setClass = (props5, options = UPDATE_OPTIONS) => {
     };
   }
 });
 
 // ../uikit/Atoms/Block.js
-var import_utils3, import_scratch2, Block, Hr, Br, Div, Span, Li, Ul, Ol, Gutter;
+var import_utils3, import_scratch2, props, Block, Hr, Br, Div, Span, Li, Ul, Ol, Gutter;
 var init_Block = __esm({
   "../uikit/Atoms/Block.js"() {
     "use strict";
     import_utils3 = __toESM(require_cjs());
     import_scratch2 = __toESM(require_cjs2());
+    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_scratch2.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
+        };
+      }
+    };
     Block = {
       deps: {
         getSpacingBasedOnRatio: import_scratch2.getSpacingBasedOnRatio,
@@ -10068,233 +10288,82 @@ var init_Block = __esm({
         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
+        ...props,
+        display: ({ props: props5, deps }) => !deps.isUndefined(props5.display) && {
+          display: props5.display
         },
-        show: (el, s, ctx) => !!(ctx.utils.exec(el.props.show, el, s) === false) && {
-          display: "none !important"
+        direction: ({ props: props5, deps }) => !deps.isUndefined(props5.direction) && {
+          direction: props5.direction
         },
-        hide: (el, s, ctx) => !!ctx.utils.exec(el.props.hide, el, s) && {
-          display: "none !important"
+        objectFit: ({ props: props5, deps }) => !deps.isUndefined(props5.objectFit) && {
+          objectFit: props5.objectFit
         },
-        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)
-          };
+        aspectRatio: ({ props: props5, deps }) => !deps.isUndefined(props5.aspectRatio) && {
+          aspectRatio: props5.aspectRatio
         },
-        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)
-          };
+        gridArea: ({ props: props5, deps }) => props5.gridArea && { gridArea: props5.gridArea },
+        float: ({ props: props5, deps }) => !deps.isUndefined(props5.float) && {
+          float: props5.float
         },
-        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)
-          };
+        flex: ({ props: props5, deps }) => !deps.isUndefined(props5.flex) && {
+          flex: props5.flex
         },
-        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)
-          };
+        flexDirection: ({ props: props5, deps }) => !deps.isUndefined(props5.flexDirection) && {
+          flexDirection: props5.flexDirection
         },
-        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)
-          };
+        alignItems: ({ props: props5, deps }) => !deps.isUndefined(props5.alignItems) && {
+          alignItems: props5.alignItems
         },
-        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)
-          };
+        alignContent: ({ props: props5, deps }) => !deps.isUndefined(props5.alignContent) && {
+          alignContent: props5.alignContent
         },
-        direction: ({ props: props2, deps }) => !deps.isUndefined(props2.direction) && {
-          direction: props2.direction
+        justifyContent: ({ props: props5, deps }) => !deps.isUndefined(props5.justifyContent) && {
+          justifyContent: props5.justifyContent
         },
-        objectFit: ({ props: props2, deps }) => !deps.isUndefined(props2.objectFit) && {
-          objectFit: props2.objectFit
+        justifyItems: ({ props: props5, deps }) => !deps.isUndefined(props5.justifyItems) && {
+          justifyItems: props5.justifyItems
         },
-        aspectRatio: ({ props: props2, deps }) => !deps.isUndefined(props2.aspectRatio) && {
-          aspectRatio: props2.aspectRatio
+        alignSelf: ({ props: props5, deps }) => !deps.isUndefined(props5.alignSelf) && {
+          alignSelf: props5.alignSelf
         },
-        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)
-          };
+        order: ({ props: props5, deps }) => !deps.isUndefined(props5.order) && {
+          order: props5.order
         },
-        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)
-          };
+        gridColumn: ({ props: props5, deps }) => !deps.isUndefined(props5.gridColumn) && {
+          gridColumn: props5.gridColumn
         },
-        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)
-          };
+        gridColumnStart: ({ props: props5, deps }) => !deps.isUndefined(props5.gridColumnStart) && {
+          gridColumnStart: props5.gridColumnStart
         },
-        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_scratch2.transfromGap)(props2.gap)
-        },
-        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: props2, deps }) => !deps.isUndefined(props2.flex) && {
-          flex: props2.flex
-        },
-        flexDirection: ({ props: props2, deps }) => !deps.isUndefined(props2.flexDirection) && {
-          flexDirection: props2.flexDirection
-        },
-        alignItems: ({ props: props2, deps }) => !deps.isUndefined(props2.alignItems) && {
-          alignItems: props2.alignItems
-        },
-        alignContent: ({ props: props2, deps }) => !deps.isUndefined(props2.alignContent) && {
-          alignContent: props2.alignContent
-        },
-        justifyContent: ({ props: props2, deps }) => !deps.isUndefined(props2.justifyContent) && {
-          justifyContent: props2.justifyContent
-        },
-        justifyItems: ({ props: props2, deps }) => !deps.isUndefined(props2.justifyItems) && {
-          justifyItems: props2.justifyItems
-        },
-        alignSelf: ({ props: props2, deps }) => !deps.isUndefined(props2.alignSelf) && {
-          alignSelf: props2.alignSelf
-        },
-        order: ({ props: props2, deps }) => !deps.isUndefined(props2.order) && {
-          order: props2.order
-        },
-        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 || "")
-          };
+        gridRow: ({ props: props5, deps }) => !deps.isUndefined(props5.gridRow) && {
+          gridRow: props5.gridRow
         },
-        flexAlign: ({ props: props2, deps }) => {
-          if (!deps.isString(props2.flexAlign))
-            return;
-          const [alignItems, justifyContent] = props2.flexAlign.split(" ");
-          return {
-            display: "flex",
-            alignItems,
-            justifyContent
-          };
+        gridRowStart: ({ props: props5, deps }) => !deps.isUndefined(props5.gridRowStart) && {
+          gridRowStart: props5.gridRowStart
         },
-        gridColumn: ({ props: props2, deps }) => !deps.isUndefined(props2.gridColumn) && {
-          gridColumn: props2.gridColumn
+        resize: ({ props: props5, deps }) => !deps.isUndefined(props5.resize) && {
+          resize: props5.resize
         },
-        gridColumnStart: ({ props: props2, deps }) => !deps.isUndefined(props2.gridColumnStart) && {
-          gridColumnStart: props2.gridColumnStart
+        verticalAlign: ({ props: props5, deps }) => !deps.isUndefined(props5.verticalAlign) && {
+          verticalAlign: props5.verticalAlign
         },
-        gridRow: ({ props: props2, deps }) => !deps.isUndefined(props2.gridRow) && {
-          gridRow: props2.gridRow
+        columns: ({ props: props5, deps }) => !deps.isUndefined(props5.columns) && {
+          columns: props5.columns
         },
-        gridRowStart: ({ props: props2, deps }) => !deps.isUndefined(props2.gridRowStart) && {
-          gridRowStart: props2.gridRowStart
+        columnRule: ({ props: props5, deps }) => !deps.isUndefined(props5.columnRule) && {
+          columnRule: props5.columnRule
         },
-        resize: ({ props: props2, deps }) => !deps.isUndefined(props2.resize) && {
-          resize: props2.resize
+        columnWidth: ({ props: props5, deps }) => !deps.isUndefined(props5.columnWidth) && {
+          columnWidth: props5.columnWidth
         },
-        verticalAlign: ({ props: props2, deps }) => !deps.isUndefined(props2.verticalAlign) && { verticalAlign: props2.verticalAlign },
-        columns: ({ props: props2, deps }) => !deps.isUndefined(props2.columns) && {
-          columns: props2.columns
+        columnSpan: ({ props: props5, deps }) => !deps.isUndefined(props5.columnSpan) && {
+          columnSpan: props5.columnSpan
         },
-        columnRule: ({ props: props2, deps }) => !deps.isUndefined(props2.columnRule) && {
-          columnRule: props2.columnRule
+        columnFill: ({ props: props5, deps }) => !deps.isUndefined(props5.columnFill) && {
+          columnFill: props5.columnFill
         },
-        columnWidth: ({ props: props2, deps }) => !deps.isUndefined(props2.columnWidth) && {
-          columnWidth: props2.columnWidth
-        },
-        columnSpan: ({ props: props2, deps }) => !deps.isUndefined(props2.columnSpan) && {
-          columnSpan: props2.columnSpan
-        },
-        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
         }
       }
     };
@@ -10315,20 +10384,8 @@ var init_Block = __esm({
       childExtend: { extend: "Li" }
     };
     Gutter = {
-      deps: { getSpacingByKey: import_scratch2.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)
-          };
-        }
       }
     };
   }
@@ -10344,7 +10401,7 @@ var init_Direction = __esm({
         direction: "ltr"
       },
       class: {
-        direction: ({ props: props2 }) => ({ direction: props2.direction })
+        direction: ({ props: props5 }) => ({ direction: props5.direction })
       }
     };
   }
@@ -10361,8 +10418,8 @@ var init_Flex = __esm({
         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(" ");
@@ -10374,11 +10431,11 @@ var init_Flex = __esm({
             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 };
         }
       }
@@ -10396,20 +10453,20 @@ var init_Grid = __esm({
       deps: { getSpacingBasedOnRatio: import_scratch3.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
       }
     };
   }
@@ -10424,9 +10481,9 @@ var init_Img = __esm({
       tag: "img",
       attr: {
         src: (el) => {
-          const { props: props2, context } = el;
+          const { props: props5, context } = el;
           const { exec: exec7, isString: isString12, replaceLiteralsWithObjectFields: replaceLiteralsWithObjectFields3 } = context.utils;
-          let src = (props2.preSrc || "") + exec7(props2.src, el);
+          let src = (props5.preSrc || "") + exec7(props5.src, el);
           if (isString12(src) && src.includes("{{")) {
             src = replaceLiteralsWithObjectFields3(src, el.state);
           }
@@ -10441,8 +10498,8 @@ var init_Img = __esm({
           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
       }
     };
   }
@@ -10456,9 +10513,9 @@ var init_Form = __esm({
     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
       }
     };
   }
@@ -10478,24 +10535,24 @@ var init_Timing = __esm({
         transformDuration: import_scratch4.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
         }
       }
     };
@@ -10518,11 +10575,11 @@ var init_style = __esm({
       26: { boxShadow: `rgba(0,0,0,.10) 0 14${CONFIG2.UNIT.default} 26${CONFIG2.UNIT.default}` },
       42: { boxShadow: `rgba(0,0,0,.10) 0 20${CONFIG2.UNIT.default} 42${CONFIG2.UNIT.default}` }
     };
-    getComputedBackgroundColor = ({ props: props2 }) => {
-      return (0, import_scratch5.getColor)(props2.shapeDirectionColor) || (0, import_scratch5.getColor)(props2.borderColor) || (0, import_scratch5.getColor)(props2.backgroundColor) || (0, import_scratch5.getColor)(props2.background);
+    getComputedBackgroundColor = ({ props: props5 }) => {
+      return (0, import_scratch5.getColor)(props5.shapeDirectionColor) || (0, import_scratch5.getColor)(props5.borderColor) || (0, import_scratch5.getColor)(props5.backgroundColor) || (0, import_scratch5.getColor)(props5.background);
     };
-    inheritTransition = ({ props: props2, deps }) => {
-      const exec7 = Timing.class.transition({ props: props2, deps });
+    inheritTransition = ({ props: props5, deps }) => {
+      const exec7 = Timing.class.transition({ props: props5, deps });
       return exec7 && exec7.transition;
     };
     SHAPES = {
@@ -10532,16 +10589,16 @@ var init_style = __esm({
       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"
@@ -10577,13 +10634,13 @@ var init_style = __esm({
           }
         }
       },
-      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",
@@ -10624,7 +10681,7 @@ var init_style = __esm({
           }
         }
       },
-      hexagon: ({ props: props2, deps }) => ({
+      hexagon: ({ props: props5, deps }) => ({
         position: "relative",
         "&:before, &:after": {
           content: '""',
@@ -10636,8 +10693,8 @@ var init_style = __esm({
           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": {
@@ -10649,7 +10706,7 @@ var init_style = __esm({
           transform: "translate3d(-50%, -50%, 1px) rotate(45deg)"
         }
       }),
-      chevron: ({ props: props2, deps }) => ({
+      chevron: ({ props: props5, deps }) => ({
         position: "relative",
         "&:before, &:after": {
           content: '""',
@@ -10659,14 +10716,14 @@ var init_style = __esm({
           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"
         }
       }),
@@ -10725,53 +10782,53 @@ var init_Theme = __esm({
         transformBackgroundImage: import_scratch6.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];
@@ -10781,98 +10838,98 @@ var init_Theme = __esm({
             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
         }
       }
     };
@@ -10887,86 +10944,86 @@ var init_Media = __esm({
     import_utils7 = __toESM(require_cjs());
     init_Theme();
     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
       )
     };
-    execClass = (key, props2, result, element) => {
+    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
@@ -10978,27 +11035,27 @@ var init_Media = __esm({
       }
       return classExec;
     };
-    convertPropsToClass = (props2, result, element) => {
+    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;
     };
-    applyMediaProps = (key, props2, result, element) => {
+    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;
@@ -11012,43 +11069,43 @@ var init_Media = __esm({
       result[mediaKey] = generatedClass;
       return result[mediaKey];
     };
-    applyAndProps = (key, props2, result, element) => {
-      result[key] = convertPropsToClass(props2, result, element);
+    applyAndProps = (key, props5, result, element) => {
+      result[key] = convertPropsToClass(props5, result, element);
       return result[key];
     };
-    applySelectorProps = (key, props2, result, element) => {
+    applySelectorProps = (key, props5, result, element) => {
       const selectorKey = `&${key}`;
-      result[selectorKey] = convertPropsToClass(props2, result, element);
+      result[selectorKey] = convertPropsToClass(props5, result, element);
       return result[selectorKey];
     };
-    applyCaseProps = (key, props2, result, element) => {
+    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));
     };
-    applyVariableProps = (key, props2, result, element) => {
-      result[key] = props2;
+    applyVariableProps = (key, props5, result, element) => {
+      result[key] = props5;
       return result;
     };
-    applyConditionalCaseProps = (key, props2, result, element) => {
+    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));
     };
-    applyConditionalFalsyProps = (key, props2, result, element) => {
+    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));
     };
-    applyTrueProps = (props2, result, element) => (0, import_utils7.merge)(result, convertPropsToClass(props2, result, element));
+    applyTrueProps = (props5, result, element) => (0, import_utils7.merge)(result, convertPropsToClass(props5, result, element));
     beforeClassAssign = (element, s) => {
-      const { props: props2, class: className, context } = element;
+      const { props: props5, class: className, context } = element;
       const CLASS_NAMES = {
         media: {},
         selector: {},
@@ -11058,11 +11115,11 @@ var init_Media = __esm({
       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,
@@ -11073,9 +11130,9 @@ var init_Media = __esm({
           }
         }
         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) {
@@ -11117,15 +11174,15 @@ var init_Iframe = __esm({
         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
       }
     };
   }
@@ -11138,8 +11195,8 @@ var init_Interaction = __esm({
     "use strict";
     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)
@@ -11207,8 +11264,8 @@ var init_InteractiveComponent = __esm({
         }
       },
       attr: {
-        placeholder: ({ props: props2 }) => props2.placeholder,
-        tabIndex: ({ props: props2 }) => props2.tabIndex
+        placeholder: ({ props: props5 }) => props5.placeholder,
+        tabIndex: ({ props: props5 }) => props5.tabIndex
       }
     };
     FocusableComponent = {
@@ -11225,7 +11282,7 @@ var init_InteractiveComponent = __esm({
         style
       },
       attr: {
-        type: ({ props: props2 }) => props2.type
+        type: ({ props: props5 }) => props5.type
       }
     };
   }
@@ -11238,18 +11295,18 @@ var init_Overflow = __esm({
     "use strict";
     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
         }
       }
     };
@@ -11367,9 +11424,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);
@@ -12097,8 +12154,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_utils25.isFunction)(state)) {
         ref.__state = state;
         return (0, import_utils25.exec)(state, element);
@@ -12208,12 +12265,12 @@ var init_Collection = __esm({
       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) => {
@@ -12221,7 +12278,7 @@ var init_Collection = __esm({
               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;
@@ -12379,21 +12436,21 @@ var init_Position = __esm({
     Position = {
       deps: { getSpacingByKey: import_scratch7.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);
@@ -12402,8 +12459,8 @@ var init_Position = __esm({
             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);
@@ -12430,24 +12487,24 @@ var init_Picture = __esm({
         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
       })
     };
   }
@@ -12460,7 +12517,7 @@ var init_Pseudo = __esm({
     "use strict";
     Pseudo = {
       class: {
-        content: ({ props: props2 }) => props2.content && { content: props2.content }
+        content: ({ props: props5 }) => props5.content && { content: props5.content }
       }
     };
   }
@@ -12478,28 +12535,30 @@ var init_Svg = __esm({
         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
@@ -12520,83 +12579,86 @@ var init_Shape = __esm({
     init_style();
     import_scratch8 = __toESM(require_cjs2());
     init_Pseudo();
-    transformBorderRadius = (radius, props2, propertyName) => {
+    transformBorderRadius = (radius, props5, propertyName) => {
       if (!(0, import_utils9.isString)(radius))
         return;
       return {
-        borderRadius: radius.split(" ").map((v, k) => (0, import_scratch8.getSpacingBasedOnRatio)(props2, propertyName, v)[propertyName]).join(" ")
+        borderRadius: radius.split(" ").map((v, k) => (0, import_scratch8.getSpacingBasedOnRatio)(props5, propertyName, v)[propertyName]).join(" ")
       };
     };
     Shape = {
       extend: Pseudo,
       deps: { exec: import_utils9.exec, getSpacingBasedOnRatio: import_scratch8.getSpacingBasedOnRatio, getMediaColor: import_scratch8.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, import_scratch9, Text, H1, H2, H3, H4, H5, H6, P, Caption, Strong, Underline, Italic, Title, Headline, Subhead, Footnote, B, I, Data;
+var import_utils10, import_scratch9, props2, Text, H1, H2, H3, H4, H5, H6, P, Caption, Strong, Underline, Italic, Title, Headline, Subhead, Footnote, B, I, Data;
 var init_Text = __esm({
   "../uikit/Atoms/Text.js"() {
     "use strict";
     import_utils10 = __toESM(require_cjs());
     import_scratch9 = __toESM(require_cjs2());
+    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
+      })
+    };
     Text = {
       deps: { exec: import_utils10.exec, getFontSizeByKey: import_scratch9.getFontSizeByKey, getFontFamily: import_scratch9.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
       }
     };
     H1 = { tag: "h1" };
@@ -12640,10 +12702,10 @@ var init_Transform = __esm({
     import_utils11 = __toESM(require_cjs());
     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 }
       }
     };
   }
@@ -12657,16 +12719,16 @@ var init_XYZ = __esm({
     import_utils12 = __toESM(require_cjs());
     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 }
       }
     };
   }
 });
 
 // ../uikit/Atoms/Animation.js
-var import_scratch10, import_utils13, applyAnimationProps, Animation;
+var import_scratch10, import_utils13, applyAnimationProps, props3, Animation;
 var init_Animation = __esm({
   "../uikit/Atoms/Animation.js"() {
     "use strict";
@@ -12682,41 +12744,44 @@ var init_Animation = __esm({
       const record = ANIMATION[animation];
       return keyframes(record);
     };
+    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)
+      }
+    };
     Animation = {
       deps: { isObject: import_utils13.isObject, getTimingByKey: import_scratch10.getTimingByKey, getTimingFunction: import_scratch10.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
         }
       }
     };
@@ -12815,41 +12880,40 @@ var import_utils14, PropsCSS, Box, Circle;
 var init_Box = __esm({
   "../uikit/Box/index.js"() {
     "use strict";
-    init_Atoms();
     import_utils14 = __toESM(require_cjs());
     PropsCSS = {
       class: {
-        style: ({ props: props2 }) => props2 && props2.style
+        style: ({ props: props5 }) => props5 && props5.style
       }
     };
     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
       }
     };
     Circle = {
@@ -12867,23 +12931,23 @@ var init_Icon = __esm({
     "use strict";
     import_utils15 = __toESM(require_cjs());
     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);
     };
     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;
     };
     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);
@@ -12893,7 +12957,7 @@ var init_Icon = __esm({
         if (semanticIcon)
           return semanticIcon;
         let activeIconName;
-        if (props2.isActive)
+        if (props5.isActive)
           activeIconName = inheritFromIsActive(el);
         const parentProps = parent.props;
         const parentPropsActive = parentProps[".isActive"];
@@ -12920,7 +12984,7 @@ var init_Icon = __esm({
             el.warn("Can't find icon:", iconName, iconInContext);
         }
         const iconFromLibrary = ICONS[iconInContext];
-        const directSrc = parent && parent.props && parent.props.src || props2.src;
+        const directSrc = parent && parent.props && parent.props.src || props5.src;
         return {
           width: "A",
           height: "A",
@@ -12936,21 +13000,26 @@ var init_Icon = __esm({
       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
     };
     FileIcon = {
       extend: "Flex",
@@ -13455,16 +13524,16 @@ var init_Link = __esm({
           }
           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
       }
     };
     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: isString12, replaceLiteralsWithObjectFields: replaceLiteralsWithObjectFields3, isDefined: isDefined2 } = ctx.utils;
           let href = exec7(h, el, s);
           if (isString12(href) && href.includes("{{")) {
@@ -13483,7 +13552,7 @@ var init_Link = __esm({
                 scrollToOptions: { behaviour: "instant" },
                 scrollToTop: isDefined2(scrollToTop) ? scrollToTop : true,
                 ...routerOptions,
-                ...props2.routerOptions
+                ...props5.routerOptions
               });
               event.preventDefault();
             } catch (e) {
@@ -13509,23 +13578,23 @@ var init_Video = __esm({
       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
       }
     };
   }
@@ -13581,25 +13650,25 @@ var init_Input = __esm({
         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,
+        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: props2, state, deps } = el;
+          const { props: props5, state, deps } = el;
           const { isString: isString12, exec: exec7, replaceLiteralsWithObjectFields: replaceLiteralsWithObjectFields3 } = deps;
-          const val = exec7(props2.value, el);
+          const val = exec7(props5.value, el);
           if (isString12(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
       }
     };
   }
@@ -13629,9 +13698,9 @@ var init_NumberInput = __esm({
         }
       },
       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
       }
     };
   }
@@ -13884,14 +13953,14 @@ var init_Select = __esm({
           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
       }
     };
   }
@@ -13964,20 +14033,12 @@ var init_Field = __esm({
         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 }) => ({
@@ -13986,6 +14047,12 @@ var init_Field = __esm({
           margin: "- Z1 - -C",
           position: "relative"
         })
+      },
+      Button: {
+        padding: "0",
+        background: "transparent",
+        margin: "- - - auto",
+        fontSize: "Z2"
       }
     };
     FieldTemplate = {
@@ -14187,7 +14254,7 @@ var init_Button = __esm({
         round: "C2"
       },
       attr: {
-        type: ({ props: props2 }) => props2.type
+        type: ({ props: props5 }) => props5.type
       }
     };
     SquareButton = {
@@ -14345,9 +14412,9 @@ var init_ProgressLine = __esm({
         }
       },
       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
       }
     };
     ProgressLineWithUnitValue = {
@@ -14399,9 +14466,9 @@ var init_ProgressCircle = __esm({
           }
         },
         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
         }
       }
     };
@@ -14458,13 +14525,13 @@ var init_Progress = __esm({
 });
 
 // ../uikit/Range/index.js
-var import_utils17, import_scratch11, props, returnPropertyValue, Range, RangeWithButtons;
+var import_utils17, import_scratch11, props4, returnPropertyValue, Range, RangeWithButtons;
 var init_Range = __esm({
   "../uikit/Range/index.js"() {
     "use strict";
     import_utils17 = __toESM(require_cjs());
     import_scratch11 = __toESM(require_cjs2());
-    props = {
+    props4 = {
       appearance: "none",
       width: "100%",
       height: "2px",
@@ -14529,7 +14596,7 @@ var init_Range = __esm({
       return r + "";
     };
     Range = {
-      props,
+      props: props4,
       tag: "input",
       attr: {
         type: "range",
@@ -14540,17 +14607,17 @@ var init_Range = __esm({
       },
       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) });
           }
@@ -14679,8 +14746,8 @@ var init_Slider = __esm({
           click: (ev, el, s) => {
             el.props && (0, import_utils18.isFunction)(el.props.click) && el.props.click(ev, el, s);
             const input = el.parent.input;
-            const 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;
           }
         }
@@ -14716,8 +14783,8 @@ var init_Slider = __esm({
           click: (ev, el, s) => {
             el.props && (0, import_utils18.isFunction)(el.props.click) && el.props.click(ev, el, s);
             const input = el.parent.input;
-            const 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;
           }
         }
@@ -14781,12 +14848,12 @@ var init_Avatar = __esm({
     "use strict";
     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"}`
       })
     };
   }
@@ -14836,7 +14903,7 @@ var init_AvatarBundle = __esm({
         }
       },
       childExtend: Avatar,
-      $propsCollection: ({ props: props2 }) => props2.options
+      $propsCollection: ({ props: props5 }) => props5.options
     };
   }
 });
@@ -14939,32 +15006,24 @@ var init_Notification = __esm({
         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 }
         }
       }
     };
@@ -15007,7 +15066,7 @@ var init_Tooltip = __esm({
       },
       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,
@@ -15016,7 +15075,7 @@ var init_Tooltip = __esm({
         })
       },
       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",
@@ -15029,13 +15088,13 @@ var init_Tooltip = __esm({
     };
     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)",
@@ -15044,7 +15103,7 @@ var init_Tooltip = __esm({
             opacity: 1,
             visibility: "visible"
           }
-        } : props2.shapeDirection === "right" ? {
+        } : props5.shapeDirection === "right" ? {
           transform: "translate3d(10%,-50%,0)",
           right: "112%",
           top: "50%",
@@ -15053,7 +15112,7 @@ var init_Tooltip = __esm({
             opacity: 1,
             visibility: "visible"
           }
-        } : props2.shapeDirection === "bottom" ? {
+        } : props5.shapeDirection === "bottom" ? {
           transform: "translate3d(-50%,-10%,0)",
           bottom: "112%",
           left: "50%",
@@ -15124,7 +15183,7 @@ var init_Pills = __esm({
           }
         }
       },
-      $propsCollection: ({ props: props2, state }) => new Array(props2.qty).fill({})
+      $propsCollection: ({ props: props5, state }) => new Array(props5.qty).fill({})
     };
   }
 });
@@ -15983,7 +16042,7 @@ var init_Dropdown = __esm({
         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)",
@@ -17519,10 +17578,10 @@ var require_cjs7 = __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];
@@ -17904,13 +17963,13 @@ var require_cjs7 = __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");
           }
@@ -18156,9 +18215,11 @@ var require_cjs7 = __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();
@@ -18192,6 +18253,27 @@ var require_cjs7 = __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);
+            }
+          }
+        }
       }
     });
     var require_tags3 = __commonJS2({
@@ -18391,7 +18473,9 @@ var require_cjs7 = __commonJS({
           applyKeyComponentAsExtend: () => applyKeyComponentAsExtend,
           checkIfKeyIsComponent: () => checkIfKeyIsComponent,
           checkIfKeyIsProperty: () => checkIfKeyIsProperty,
+          checkIfSugar: () => checkIfSugar,
           extendizeByKey: () => extendizeByKey,
+          getCapitalCaseKeys: () => getCapitalCaseKeys,
           getChildrenComponentsByKey: () => getChildrenComponentsByKey,
           getExtendsInElement: () => getExtendsInElement,
           hasVariantProp: () => hasVariantProp,
@@ -18425,12 +18509,13 @@ var require_cjs7 = __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,
@@ -18438,16 +18523,18 @@ var require_cjs7 = __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(".") && !checkIfKeyIsComponent(key.split(".")[1]) ? [key.split(".")[0]] : [key];
           const isExtendKeyComponent = context && context.components[extendFromKey];
           if (element === isExtendKeyComponent)
@@ -18458,8 +18545,8 @@ var require_cjs7 = __commonJS({
               tag,
               props: { ...element }
             });
-            if (childrenExtends)
-              newElem.childExtend = childrenExtends;
+            if (childExtends)
+              newElem.childExtend = childExtends;
             return newElem;
           } else if (!extend || extend === true) {
             return {
@@ -18488,23 +18575,24 @@ var require_cjs7 = __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
+              });
             }
           }
         };
@@ -18538,8 +18626,8 @@ var require_cjs7 = __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) => {
@@ -19296,7 +19384,7 @@ var require_define = __commonJS({
       defaultDefine: () => defaultDefine
     });
     module2.exports = __toCommonJS2(define_exports);
-    var import_atoms8 = (init_Atoms(), __toCommonJS(Atoms_exports));
+    var import_atoms7 = (init_Atoms(), __toCommonJS(Atoms_exports));
     var defaultDefine = {
       routes: (param) => param,
       // deps: (param, el) => param || el.parent.deps,
@@ -19313,10 +19401,10 @@ var require_define = __commonJS({
           set2();
         return obj;
       },
-      $collection: import_atoms8.Collection.define.$collection,
-      $setCollection: import_atoms8.Collection.define.$setCollection,
-      $stateCollection: import_atoms8.Collection.define.$stateCollection,
-      $propsCollection: import_atoms8.Collection.define.$propsCollection
+      $collection: import_atoms7.Collection.define.$collection,
+      $setCollection: import_atoms7.Collection.define.$setCollection,
+      $stateCollection: import_atoms7.Collection.define.$stateCollection,
+      $propsCollection: import_atoms7.Collection.define.$propsCollection
     };
   }
 });
@@ -19491,14 +19579,14 @@ var require_cache = __commonJS({
       }
     };
     var detectTag = (element) => {
-      let { tag, key, props: props2 } = element;
+      let { tag, key, props: props5 } = element;
       tag = (0, import_utils25.exec)(tag, element);
       if (tag === true)
         tag = key;
-      if ((0, import_utils25.isObject)(props2) && (0, import_utils25.isString)(props2.tag)) {
-        const tagExists = (0, import_utils25.isValidHtmlTag)(props2.tag);
+      if ((0, import_utils25.isObject)(props5) && (0, import_utils25.isString)(props5.tag)) {
+        const tagExists = (0, import_utils25.isValidHtmlTag)(props5.tag);
         if (tagExists)
-          return props2.tag;
+          return props5.tag;
       }
       if ((0, import_utils25.isString)(tag)) {
         if ((0, import_utils25.isValidHtmlTag)(tag))
@@ -19685,6 +19773,7 @@ var require_inherit2 = __commonJS({
       return propValue;
     };
     var inheritParentProps = (element, parent) => {
+      var _a;
       let propsStack = [];
       const parentProps = (0, import_utils25.exec)(parent, parent.state).props;
       const matchParent = parent.props && parentProps[element.key];
@@ -19702,7 +19791,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;
     };
@@ -19740,27 +19829,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_utils25.isObject)(props2))
-        propsStack.push(props2);
-      else if (props2 === "inherit" && parent.props)
+      if ((0, import_utils25.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_utils25.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;
@@ -19806,9 +19895,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);
     }
   }
 });
@@ -19958,6 +20047,8 @@ var require_object2 = __commonJS({
       "lookup",
       "lookdown",
       "lookdownAll",
+      "getRef",
+      "getPath",
       "setNodeStyles",
       "spotByPath",
       "keys",
@@ -20268,8 +20359,8 @@ var require_extend = __commonJS({
     var applyExtend = (element, parent, options = {}) => {
       if ((0, import_utils25.isFunction)(element))
         element = (0, import_utils25.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_utils26.fallbackStringExtend)(extend, context, options);
       const extendStack = (0, import_utils26.getExtendStack)(extend, context);
@@ -20278,9 +20369,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_utils26.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) {
@@ -20388,28 +20479,28 @@ var require_component2 = __commonJS({
       let variantElement = element[variant];
       if (!variantElement)
         return;
-      const props2 = (0, import_utils25.isObject)(variantProps) ? variantProps : {};
+      const props5 = (0, import_utils25.isObject)(variantProps) ? variantProps : {};
       if ((0, import_utils25.isString)(variantElement)) {
         variantElement = {
-          extend: [{ props: props2 }, variantElement]
+          extend: [{ props: props5 }, variantElement]
         };
       } else if (variantElement.extend) {
-        variantElement = (0, import_utils25.addAdditionalExtend)({ props: props2 }, variantElement);
+        variantElement = (0, import_utils25.addAdditionalExtend)({ props: props5 }, variantElement);
       }
       const extendedVariant = (0, import_extend.applyExtend)(variantElement, element.parent);
       const { parent, ...rest } = extendedVariant;
       return (0, import_utils25.overwriteDeep)(element, rest);
     };
     var applyVariant = (element) => {
-      const { props: props2 } = element;
+      const { props: props5 } = element;
       if (!(0, import_utils25.hasVariantProp)(element))
         return element;
-      const { variant } = props2;
+      const { variant } = props5;
       overwriteVariant(element, `.${variant}`);
       const elKeys = Object.keys(element).filter((key) => (0, import_utils25.isVariant)(key));
       elKeys.forEach((variant2) => {
         const slicedVariantElementKey = variant2.slice(1);
-        const variantElementProps = props2[slicedVariantElementKey];
+        const variantElementProps = props5[slicedVariantElementKey];
         if (variantElementProps)
           overwriteVariant(element, variant2, variantElementProps);
       });
@@ -20674,26 +20765,28 @@ var require_set = __commonJS({
       const content = (0, import_utils25.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_utils25.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) {
@@ -20701,8 +20794,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 = set2;
@@ -21131,6 +21222,8 @@ var require_registry = __commonJS({
       variables: {},
       lookup: {},
       lookdown: {},
+      getRef: {},
+      getPath: {},
       lookdownAll: {},
       setNodeStyles: {},
       spotByPath: {},
@@ -21265,6 +21358,8 @@ var require_methods2 = __commonJS({
       defineSetter: () => defineSetter,
       error: () => error,
       get: () => get,
+      getPath: () => getPath,
+      getRef: () => getRef,
       isMethod: () => isMethod,
       keys: () => keys,
       log: () => log,
@@ -21404,12 +21499,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, set2) => Object.defineProperty(element, key, { get: get2, set: set2 });
     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);
@@ -21434,8 +21535,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_utils25.isDefined)(val) && Object.hasOwnProperty.call(element, v))
           obj[v] = val;
       });
@@ -21465,9 +21566,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;
     }
@@ -21553,6 +21654,8 @@ var require_methods2 = __commonJS({
       "lookup",
       "lookdown",
       "lookdownAll",
+      "getRef",
+      "getPath",
       "setNodeStyles",
       "spotByPath",
       "keys",
@@ -21646,15 +21749,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_utils25.isFunction)(cachedExecProp)) {
-          props2[k] = (0, import_utils25.exec)(cachedExecProp, element);
-        } else if (isDefine && (0, import_utils25.isFunction)(props2[k])) {
-          ref.__execProps[k] = props2[k];
-          props2[k] = (0, import_utils25.exec)(props2[k], element);
+          props5[k] = (0, import_utils25.exec)(cachedExecProp, element);
+        } else if (isDefine && (0, import_utils25.isFunction)(props5[k])) {
+          ref.__execProps[k] = props5[k];
+          props5[k] = (0, import_utils25.exec)(props5[k], element);
         }
       }
     };
@@ -21783,12 +21886,12 @@ var require_propEvents = __commonJS({
     module2.exports = __toCommonJS2(propEvents_exports);
     var import_utils25 = 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_utils25.lowercaseFirstLetter)(v.split("on")[1]);
         const origEvent = on2[eventName];
-        const funcFromProps = props2[v];
+        const funcFromProps = props5[v];
         if ((0, import_utils25.isFunction)(origEvent)) {
           on2[eventName] = (...args) => {
             const originalEventRetunrs = origEvent(...args);
@@ -21992,9 +22095,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_utils25.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);
@@ -22233,6 +22336,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,
@@ -22549,6 +22654,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);
@@ -22577,13 +22683,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 {
@@ -23857,6 +23963,8 @@ var init_websocket = __esm({
       }
       doClose() {
         if (typeof this.ws !== "undefined") {
+          this.ws.onerror = () => {
+          };
           this.ws.close();
           this.ws = null;
         }
@@ -27759,13 +27867,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");
       }
@@ -28350,11 +28458,11 @@ var init_Utility2 = __esm({
 });
 
 // ../../../node_modules/stylis/src/Tokenizer.js
-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;
@@ -28497,7 +28605,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;
@@ -28551,17 +28659,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);
@@ -28597,15 +28705,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);