@symbo.ls/uikit 2.11.36 → 2.11.49

package/dist/index.cjs.js

@@ -465,8 +465,8 @@ var require_cjs = __commonJS({
         __export22(array_exports, {
           arrayContainsOtherArray: () => arrayContainsOtherArray,
           joinArrays: () => joinArrays,
-          mergeAndCloneIfArray: () => mergeAndCloneIfArray2,
-          mergeArray: () => mergeArray2,
+          mergeAndCloneIfArray: () => mergeAndCloneIfArray,
+          mergeArray: () => mergeArray,
           removeFromArray: () => removeFromArray,
           swapItemsInArray: () => swapItemsInArray
         });
@@ -497,11 +497,11 @@ var require_cjs = __commonJS({
         var joinArrays = (...arrays) => {
           return [].concat(...arrays);
         };
-        var mergeArray2 = (arr, excludeFrom = []) => {
+        var mergeArray = (arr, excludeFrom = []) => {
           return arr.reduce((a, c) => (0, import_object.deepMerge)(a, (0, import_object.deepClone)(c, excludeFrom), excludeFrom), {});
         };
-        var mergeAndCloneIfArray2 = (obj) => {
-          return (0, import_types.isArray)(obj) ? mergeArray2(obj) : (0, import_object.deepClone)(obj);
+        var mergeAndCloneIfArray = (obj) => {
+          return (0, import_types.isArray)(obj) ? mergeArray(obj) : (0, import_object.deepClone)(obj);
         };
       }
     });
@@ -542,7 +542,7 @@ var require_cjs = __commonJS({
           isEqualDeep: () => isEqualDeep,
           map: () => map,
           merge: () => merge52,
-          mergeArrayExclude: () => mergeArrayExclude2,
+          mergeArrayExclude: () => mergeArrayExclude,
           mergeIfExisted: () => mergeIfExisted,
           overwrite: () => overwrite,
           overwriteDeep: () => overwriteDeep,
@@ -564,32 +564,32 @@ var require_cjs = __commonJS({
           return param;
         };
         var map = (obj, extention, element) => {
-          for (const e2 in extention) {
-            obj[e2] = exec5(extention[e2], element);
+          for (const e in extention) {
+            obj[e] = exec5(extention[e], element);
           }
         };
         var merge52 = (element, obj, excludeFrom = []) => {
-          for (const e2 in obj) {
-            if (excludeFrom.includes(e2) || e2.includes("__"))
+          for (const e in obj) {
+            if (excludeFrom.includes(e) || e.includes("__"))
               continue;
-            const elementProp = element[e2];
-            const objProp = obj[e2];
+            const elementProp = element[e];
+            const objProp = obj[e];
             if (elementProp === void 0) {
-              element[e2] = objProp;
+              element[e] = objProp;
             }
           }
           return element;
         };
         var deepMerge3 = (element, extend, excludeFrom = []) => {
-          for (const e2 in extend) {
-            if (excludeFrom.includes(e2) || e2.includes("__"))
+          for (const e in extend) {
+            if (excludeFrom.includes(e) || e.includes("__"))
               continue;
-            const elementProp = element[e2];
-            const extendProp = extend[e2];
+            const elementProp = element[e];
+            const extendProp = extend[e];
             if ((0, import_types.isObjectLike)(elementProp) && (0, import_types.isObjectLike)(extendProp)) {
               deepMerge3(elementProp, extendProp);
             } else if (elementProp === void 0) {
-              element[e2] = extendProp;
+              element[e] = extendProp;
             }
           }
           return element;
@@ -613,7 +613,7 @@ var require_cjs = __commonJS({
               continue;
             let v = obj[k];
             if (k === "extend" && (0, import_types.isArray)(v)) {
-              v = mergeArrayExclude2(v, excludeFrom);
+              v = mergeArrayExclude(v, excludeFrom);
             }
             if ((0, import_types.isArray)(v)) {
               o[k] = v.map((x) => deepCloneExclude(x, excludeFrom));
@@ -624,7 +624,7 @@ var require_cjs = __commonJS({
           }
           return o;
         };
-        var mergeArrayExclude2 = (arr, excl = []) => {
+        var mergeArrayExclude = (arr, excl = []) => {
           return arr.reduce((acc, curr) => deepMerge3(acc, deepCloneExclude(curr, excl)), {});
         };
         var deepClone22 = (obj, excludeFrom = []) => {
@@ -703,8 +703,8 @@ var require_cjs = __commonJS({
                 try {
                   const evalProp = import_globals3.window.eval(`(${objProp})`);
                   stringified[prop] = evalProp;
-                } catch (e2) {
-                  if (e2)
+                } catch (e) {
+                  if (e)
                     stringified[prop] = objProp;
                 }
               } else {
@@ -718,8 +718,8 @@ var require_cjs = __commonJS({
                     try {
                       const evalProp = import_globals3.window.eval(`(${arrProp})`);
                       stringified[prop].push(evalProp);
-                    } catch (e2) {
-                      if (e2)
+                    } catch (e) {
+                      if (e)
                         stringified[prop].push(arrProp);
                     }
                   } else {
@@ -740,16 +740,16 @@ var require_cjs = __commonJS({
           return stringified;
         };
         var diffObjects = (original, objToDiff, cache) => {
-          for (const e2 in objToDiff) {
-            if (e2 === "ref")
+          for (const e in objToDiff) {
+            if (e === "ref")
               continue;
-            const originalProp = original[e2];
-            const objToDiffProp = objToDiff[e2];
+            const originalProp = original[e];
+            const objToDiffProp = objToDiff[e];
             if ((0, import_types.isObject)(originalProp) && (0, import_types.isObject)(objToDiffProp)) {
-              cache[e2] = {};
-              diff5(originalProp, objToDiffProp, cache[e2]);
+              cache[e] = {};
+              diff5(originalProp, objToDiffProp, cache[e]);
             } else if (objToDiffProp !== void 0) {
-              cache[e2] = objToDiffProp;
+              cache[e] = objToDiffProp;
             }
           }
           return cache;
@@ -783,36 +783,36 @@ var require_cjs = __commonJS({
         var overwrite = (element, params, excludeFrom = []) => {
           const { ref } = element;
           const changes = {};
-          for (const e2 in params) {
-            if (excludeFrom.includes(e2) || e2.includes("__"))
+          for (const e in params) {
+            if (excludeFrom.includes(e) || e.includes("__"))
               continue;
-            const elementProp = element[e2];
-            const paramsProp = params[e2];
+            const elementProp = element[e];
+            const paramsProp = params[e];
             if (paramsProp) {
-              ref.__cache[e2] = changes[e2] = elementProp;
-              ref[e2] = paramsProp;
+              ref.__cache[e] = changes[e] = elementProp;
+              ref[e] = paramsProp;
             }
           }
           return changes;
         };
         var overwriteShallow5 = (obj, params, excludeFrom = []) => {
-          for (const e2 in params) {
-            if (excludeFrom.includes(e2) || e2.includes("__"))
+          for (const e in params) {
+            if (excludeFrom.includes(e) || e.includes("__"))
               continue;
-            obj[e2] = params[e2];
+            obj[e] = params[e];
           }
           return obj;
         };
         var overwriteDeep = (obj, params, excludeFrom = []) => {
-          for (const e2 in params) {
-            if (excludeFrom.includes(e2) || e2.includes("__"))
+          for (const e in params) {
+            if (excludeFrom.includes(e) || e.includes("__"))
               continue;
-            const objProp = obj[e2];
-            const paramsProp = params[e2];
+            const objProp = obj[e];
+            const paramsProp = params[e];
             if ((0, import_types.isObjectLike)(objProp) && (0, import_types.isObjectLike)(paramsProp)) {
               overwriteDeep(objProp, paramsProp);
             } else if (paramsProp !== void 0) {
-              obj[e2] = paramsProp;
+              obj[e] = paramsProp;
             }
           }
           return obj;
@@ -851,13 +851,13 @@ var require_cjs = __commonJS({
           }
           return true;
         };
-        var removeFromObject = (obj, props4) => {
-          if (props4 === void 0 || props4 === null)
+        var removeFromObject = (obj, props7) => {
+          if (props7 === void 0 || props7 === null)
             return obj;
-          if ((0, import_types.is)(props4)("string", "number")) {
-            delete obj[props4];
-          } else if ((0, import_types.isArray)(props4)) {
-            props4.forEach((prop) => delete obj[prop]);
+          if ((0, import_types.is)(props7)("string", "number")) {
+            delete obj[props7];
+          } else if ((0, import_types.isArray)(props7)) {
+            props7.forEach((prop) => delete obj[prop]);
           } else {
             throw new Error("Invalid input: props must be a string or an array of strings");
           }
@@ -1540,8 +1540,8 @@ var require_cjs = __commonJS({
       18: "S",
       19: "T"
     };
-    var setSequenceValue = (props4, sequenceProps) => {
-      const { key, variable, value, scaling, index } = props4;
+    var setSequenceValue = (props7, sequenceProps) => {
+      const { key, variable, value, scaling, index } = props7;
       sequenceProps.sequence[key] = {
         key,
         decimal: ~~(value * 100) / 100,
@@ -1553,8 +1553,8 @@ var require_cjs = __commonJS({
       sequenceProps.scales[key] = scaling;
       sequenceProps.vars[variable] = scaling + sequenceProps.unit;
     };
-    var generateSubSequence = (props4, sequenceProps) => {
-      const { key, base, value, ratio, variable, index } = props4;
+    var generateSubSequence = (props7, sequenceProps) => {
+      const { key, base, value, ratio, variable, index } = props7;
       const next2 = value * ratio;
       const diff5 = next2 - value;
       const smallscale = diff5 / 1.618;
@@ -1595,7 +1595,7 @@ var require_cjs = __commonJS({
         const value = switchSequenceOnNegative(key, base, ratio);
         const scaling = ~~(value / base * 100) / 100;
         const variable = prefix2 + letterKey;
-        const props4 = {
+        const props7 = {
           key: letterKey,
           variable,
           value,
@@ -1604,9 +1604,9 @@ var require_cjs = __commonJS({
           ratio,
           index: key
         };
-        setSequenceValue(props4, sequenceProps);
+        setSequenceValue(props7, sequenceProps);
         if (subSequence)
-          generateSubSequence(props4, sequenceProps);
+          generateSubSequence(props7, sequenceProps);
       }
       return sequenceProps;
     };
@@ -1688,14 +1688,14 @@ var require_cjs = __commonJS({
         CSS_VARS2[result.var] = result.value;
       }
     };
-    var applySequenceVars = (props4, mediaName, options = {}) => {
+    var applySequenceVars = (props7, mediaName, options = {}) => {
       const CONFIG22 = getActiveConfig5();
       const { UNIT: UNIT2, MEDIA: MEDIA2, TIMING: TIMING2, CSS_VARS: CSS_VARS2 } = CONFIG22;
-      const unit = props4.unit || UNIT2.default;
-      const { sequence, scales } = props4;
+      const unit = props7.unit || UNIT2.default;
+      const { sequence, scales } = props7;
       for (const key in sequence) {
         const item = sequence[key];
-        const value = (props4.type === TIMING2.type ? sequence[key].val : scales[key]) + unit;
+        const value = (props7.type === TIMING2.type ? sequence[key].val : scales[key]) + unit;
         if (mediaName) {
           const query = MEDIA2[mediaName];
           if (!query) {
@@ -2184,13 +2184,13 @@ var require_cjs = __commonJS({
       return { var: CSSvar, value: str, arr: value, type };
     };
     var import_utils142 = __toESM2(require_cjs42(), 1);
-    var runThroughMedia = (props4) => {
+    var runThroughMedia = (props7) => {
       const CONFIG22 = getActiveConfig5();
       const { TYPOGRAPHY: TYPOGRAPHY2, MEDIA: MEDIA2 } = CONFIG22;
-      for (const prop in props4) {
-        const mediaProps = props4[prop];
+      for (const prop in props7) {
+        const mediaProps = props7[prop];
         if (prop.slice(0, 1) === "@") {
-          const { type, base, ratio, range, subSequence, h1Matches, unit } = props4;
+          const { type, base, ratio, range, subSequence, h1Matches, unit } = props7;
           (0, import_utils142.merge)(mediaProps, {
             type,
             base,
@@ -2214,20 +2214,20 @@ var require_cjs = __commonJS({
         }
       }
     };
-    var applyHeadings = (props4) => {
+    var applyHeadings = (props7) => {
       const CONFIG22 = getActiveConfig5();
-      if (props4.h1Matches) {
-        const unit = props4.unit;
-        const HEADINGS = findHeadings(props4);
-        const { templates } = props4;
+      if (props7.h1Matches) {
+        const unit = props7.unit;
+        const HEADINGS = findHeadings(props7);
+        const { templates } = props7;
         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 : props4.lineHeight,
-            letterSpacing: headerStyle ? headerStyle.letterSpacing : props4.letterSpacing,
+            lineHeight: headerStyle ? headerStyle.lineHeight : props7.lineHeight,
+            letterSpacing: headerStyle ? headerStyle.letterSpacing : props7.letterSpacing,
             fontWeight: headerStyle ? headerStyle.fontWeight : 900 - k * 100
           };
         }
@@ -2322,11 +2322,11 @@ var require_cjs = __commonJS({
         sequence
       );
     };
-    var getSpacingBasedOnRatio13 = (props4, propertyName, val) => {
+    var getSpacingBasedOnRatio13 = (props7, propertyName, val) => {
       const CONFIG22 = getActiveConfig5();
       const { SPACING: SPACING2 } = CONFIG22;
-      const { spacingRatio, unit } = props4;
-      const value = val || props4[propertyName];
+      const { spacingRatio, unit } = props7;
+      const value = val || props7[propertyName];
       if (spacingRatio) {
         let sequenceProps = SPACING2[spacingRatio];
         if (!sequenceProps) {
@@ -2601,7 +2601,7 @@ var require_cjs = __commonJS({
         return v;
       }).join(" ");
     };
-    var transformDuration5 = (duration, props4, propertyName) => {
+    var transformDuration5 = (duration, props7, propertyName) => {
       if (!(0, import_utils25.isString)(duration))
         return;
       return duration.split(",").map((v) => getTimingByKey5(v).timing || v).join(",");
@@ -2649,11 +2649,11 @@ var require_cjs = __commonJS({
       if (CONFIG22.verbose)
         console.warn("Can not find", factoryName, "method in scratch");
     };
-    var setEach = (factoryName, props4) => {
+    var setEach = (factoryName, props7) => {
       const CONFIG22 = getActiveConfig5();
       const FACTORY_NAME = factoryName.toUpperCase();
-      const keys = Object.keys(props4);
-      keys.map((key) => setValue(FACTORY_NAME, props4[key], key));
+      const keys = Object.keys(props7);
+      keys.map((key) => setValue(FACTORY_NAME, props7[key], key));
       return CONFIG22[FACTORY_NAME];
     };
     var SET_OPTIONS = {};
@@ -2958,13 +2958,13 @@ var require_cjs4 = __commonJS({
       document: () => document2,
       global: () => global,
       self: () => self,
-      window: () => window
+      window: () => window2
     });
     module2.exports = __toCommonJS2(globals_exports);
     var global = globalThis;
     var self = globalThis;
-    var window = globalThis;
-    var document2 = window.document;
+    var window2 = globalThis;
+    var document2 = window2.document;
   }
 });
 
@@ -3120,8 +3120,8 @@ var require_array = __commonJS({
     __export2(array_exports, {
       arrayContainsOtherArray: () => arrayContainsOtherArray,
       joinArrays: () => joinArrays,
-      mergeAndCloneIfArray: () => mergeAndCloneIfArray2,
-      mergeArray: () => mergeArray2,
+      mergeAndCloneIfArray: () => mergeAndCloneIfArray,
+      mergeArray: () => mergeArray,
       removeFromArray: () => removeFromArray,
       swapItemsInArray: () => swapItemsInArray
     });
@@ -3152,11 +3152,11 @@ var require_array = __commonJS({
     var joinArrays = (...arrays) => {
       return [].concat(...arrays);
     };
-    var mergeArray2 = (arr, excludeFrom = []) => {
+    var mergeArray = (arr, excludeFrom = []) => {
       return arr.reduce((a, c) => (0, import_object.deepMerge)(a, (0, import_object.deepClone)(c, excludeFrom), excludeFrom), {});
     };
-    var mergeAndCloneIfArray2 = (obj) => {
-      return (0, import_types.isArray)(obj) ? mergeArray2(obj) : (0, import_object.deepClone)(obj);
+    var mergeAndCloneIfArray = (obj) => {
+      return (0, import_types.isArray)(obj) ? mergeArray(obj) : (0, import_object.deepClone)(obj);
     };
   }
 });
@@ -3199,7 +3199,7 @@ var require_object = __commonJS({
       isEqualDeep: () => isEqualDeep,
       map: () => map,
       merge: () => merge6,
-      mergeArrayExclude: () => mergeArrayExclude2,
+      mergeArrayExclude: () => mergeArrayExclude,
       mergeIfExisted: () => mergeIfExisted,
       overwrite: () => overwrite,
       overwriteDeep: () => overwriteDeep,
@@ -3221,32 +3221,32 @@ var require_object = __commonJS({
       return param;
     };
     var map = (obj, extention, element) => {
-      for (const e2 in extention) {
-        obj[e2] = exec5(extention[e2], element);
+      for (const e in extention) {
+        obj[e] = exec5(extention[e], element);
       }
     };
     var merge6 = (element, obj, excludeFrom = []) => {
-      for (const e2 in obj) {
-        if (excludeFrom.includes(e2) || e2.includes("__"))
+      for (const e in obj) {
+        if (excludeFrom.includes(e) || e.includes("__"))
           continue;
-        const elementProp = element[e2];
-        const objProp = obj[e2];
+        const elementProp = element[e];
+        const objProp = obj[e];
         if (elementProp === void 0) {
-          element[e2] = objProp;
+          element[e] = objProp;
         }
       }
       return element;
     };
     var deepMerge = (element, extend, excludeFrom = []) => {
-      for (const e2 in extend) {
-        if (excludeFrom.includes(e2) || e2.includes("__"))
+      for (const e in extend) {
+        if (excludeFrom.includes(e) || e.includes("__"))
           continue;
-        const elementProp = element[e2];
-        const extendProp = extend[e2];
+        const elementProp = element[e];
+        const extendProp = extend[e];
         if ((0, import_types.isObjectLike)(elementProp) && (0, import_types.isObjectLike)(extendProp)) {
           deepMerge(elementProp, extendProp);
         } else if (elementProp === void 0) {
-          element[e2] = extendProp;
+          element[e] = extendProp;
         }
       }
       return element;
@@ -3270,7 +3270,7 @@ var require_object = __commonJS({
           continue;
         let v = obj[k];
         if (k === "extend" && (0, import_types.isArray)(v)) {
-          v = mergeArrayExclude2(v, excludeFrom);
+          v = mergeArrayExclude(v, excludeFrom);
         }
         if ((0, import_types.isArray)(v)) {
           o[k] = v.map((x) => deepCloneExclude(x, excludeFrom));
@@ -3281,7 +3281,7 @@ var require_object = __commonJS({
       }
       return o;
     };
-    var mergeArrayExclude2 = (arr, excl = []) => {
+    var mergeArrayExclude = (arr, excl = []) => {
       return arr.reduce((acc, curr) => deepMerge(acc, deepCloneExclude(curr, excl)), {});
     };
     var deepClone5 = (obj, excludeFrom = []) => {
@@ -3360,8 +3360,8 @@ var require_object = __commonJS({
             try {
               const evalProp = import_globals.window.eval(`(${objProp})`);
               stringified[prop] = evalProp;
-            } catch (e2) {
-              if (e2)
+            } catch (e) {
+              if (e)
                 stringified[prop] = objProp;
             }
           } else {
@@ -3375,8 +3375,8 @@ var require_object = __commonJS({
                 try {
                   const evalProp = import_globals.window.eval(`(${arrProp})`);
                   stringified[prop].push(evalProp);
-                } catch (e2) {
-                  if (e2)
+                } catch (e) {
+                  if (e)
                     stringified[prop].push(arrProp);
                 }
               } else {
@@ -3397,16 +3397,16 @@ var require_object = __commonJS({
       return stringified;
     };
     var diffObjects = (original, objToDiff, cache) => {
-      for (const e2 in objToDiff) {
-        if (e2 === "ref")
+      for (const e in objToDiff) {
+        if (e === "ref")
           continue;
-        const originalProp = original[e2];
-        const objToDiffProp = objToDiff[e2];
+        const originalProp = original[e];
+        const objToDiffProp = objToDiff[e];
         if ((0, import_types.isObject)(originalProp) && (0, import_types.isObject)(objToDiffProp)) {
-          cache[e2] = {};
-          diff5(originalProp, objToDiffProp, cache[e2]);
+          cache[e] = {};
+          diff5(originalProp, objToDiffProp, cache[e]);
         } else if (objToDiffProp !== void 0) {
-          cache[e2] = objToDiffProp;
+          cache[e] = objToDiffProp;
         }
       }
       return cache;
@@ -3440,36 +3440,36 @@ var require_object = __commonJS({
     var overwrite = (element, params, excludeFrom = []) => {
       const { ref } = element;
       const changes = {};
-      for (const e2 in params) {
-        if (excludeFrom.includes(e2) || e2.includes("__"))
+      for (const e in params) {
+        if (excludeFrom.includes(e) || e.includes("__"))
           continue;
-        const elementProp = element[e2];
-        const paramsProp = params[e2];
+        const elementProp = element[e];
+        const paramsProp = params[e];
         if (paramsProp) {
-          ref.__cache[e2] = changes[e2] = elementProp;
-          ref[e2] = paramsProp;
+          ref.__cache[e] = changes[e] = elementProp;
+          ref[e] = paramsProp;
         }
       }
       return changes;
     };
     var overwriteShallow5 = (obj, params, excludeFrom = []) => {
-      for (const e2 in params) {
-        if (excludeFrom.includes(e2) || e2.includes("__"))
+      for (const e in params) {
+        if (excludeFrom.includes(e) || e.includes("__"))
           continue;
-        obj[e2] = params[e2];
+        obj[e] = params[e];
       }
       return obj;
     };
     var overwriteDeep = (obj, params, excludeFrom = []) => {
-      for (const e2 in params) {
-        if (excludeFrom.includes(e2) || e2.includes("__"))
+      for (const e in params) {
+        if (excludeFrom.includes(e) || e.includes("__"))
           continue;
-        const objProp = obj[e2];
-        const paramsProp = params[e2];
+        const objProp = obj[e];
+        const paramsProp = params[e];
         if ((0, import_types.isObjectLike)(objProp) && (0, import_types.isObjectLike)(paramsProp)) {
           overwriteDeep(objProp, paramsProp);
         } else if (paramsProp !== void 0) {
-          obj[e2] = paramsProp;
+          obj[e] = paramsProp;
         }
       }
       return obj;
@@ -3508,13 +3508,13 @@ var require_object = __commonJS({
       }
       return true;
     };
-    var removeFromObject = (obj, props4) => {
-      if (props4 === void 0 || props4 === null)
+    var removeFromObject = (obj, props7) => {
+      if (props7 === void 0 || props7 === null)
         return obj;
-      if ((0, import_types.is)(props4)("string", "number")) {
-        delete obj[props4];
-      } else if ((0, import_types.isArray)(props4)) {
-        props4.forEach((prop) => delete obj[prop]);
+      if ((0, import_types.is)(props7)("string", "number")) {
+        delete obj[props7];
+      } else if ((0, import_types.isArray)(props7)) {
+        props7.forEach((prop) => delete obj[prop]);
       } else {
         throw new Error("Invalid input: props must be a string or an array of strings");
       }
@@ -4859,6 +4859,70 @@ var require_cjs9 = __commonJS({
         };
       }
     });
+    var require_array2 = __commonJS2({
+      "../../node_modules/@domql/utils/dist/cjs/array.js"(exports2, module22) {
+        "use strict";
+        var __defProp22 = Object.defineProperty;
+        var __getOwnPropDesc22 = Object.getOwnPropertyDescriptor;
+        var __getOwnPropNames22 = Object.getOwnPropertyNames;
+        var __hasOwnProp22 = Object.prototype.hasOwnProperty;
+        var __export22 = (target, all) => {
+          for (var name in all)
+            __defProp22(target, name, { get: all[name], enumerable: true });
+        };
+        var __copyProps22 = (to, from2, except, desc) => {
+          if (from2 && typeof from2 === "object" || typeof from2 === "function") {
+            for (let key of __getOwnPropNames22(from2))
+              if (!__hasOwnProp22.call(to, key) && key !== except)
+                __defProp22(to, key, { get: () => from2[key], enumerable: !(desc = __getOwnPropDesc22(from2, key)) || desc.enumerable });
+          }
+          return to;
+        };
+        var __toCommonJS22 = (mod) => __copyProps22(__defProp22({}, "__esModule", { value: true }), mod);
+        var array_exports = {};
+        __export22(array_exports, {
+          arrayContainsOtherArray: () => arrayContainsOtherArray,
+          joinArrays: () => joinArrays,
+          mergeAndCloneIfArray: () => mergeAndCloneIfArray,
+          mergeArray: () => mergeArray,
+          removeFromArray: () => removeFromArray,
+          swapItemsInArray: () => swapItemsInArray
+        });
+        module22.exports = __toCommonJS22(array_exports);
+        var import_object = require_object2();
+        var import_types = require_types2();
+        var arrayContainsOtherArray = (arr1, arr2) => {
+          return arr2.every((val) => arr1.includes(val));
+        };
+        var removeFromArray = (arr, index) => {
+          if ((0, import_types.isString)(index))
+            index = parseInt(index);
+          if ((0, import_types.isNumber)(index)) {
+            if (index < 0 || index >= arr.length || isNaN(index)) {
+              throw new Error("Invalid index");
+            }
+            arr.splice(index, 1);
+          } else if ((0, import_types.isArray)(index)) {
+            index.forEach((idx) => removeFromArray(arr, idx));
+          } else {
+            throw new Error("Invalid index");
+          }
+          return arr;
+        };
+        var swapItemsInArray = (arr, i, j) => {
+          [arr[i], arr[j]] = [arr[j], arr[i]];
+        };
+        var joinArrays = (...arrays) => {
+          return [].concat(...arrays);
+        };
+        var mergeArray = (arr, excludeFrom = []) => {
+          return arr.reduce((a, c) => (0, import_object.deepMerge)(a, (0, import_object.deepClone)(c, excludeFrom), excludeFrom), {});
+        };
+        var mergeAndCloneIfArray = (obj) => {
+          return (0, import_types.isArray)(obj) ? mergeArray(obj) : (0, import_object.deepClone)(obj);
+        };
+      }
+    });
     var require_object2 = __commonJS2({
       "../../node_modules/@domql/utils/dist/cjs/object.js"(exports2, module22) {
         "use strict";
@@ -4896,16 +4960,17 @@ var require_cjs9 = __commonJS({
           isEqualDeep: () => isEqualDeep,
           map: () => map,
           merge: () => merge52,
+          mergeArrayExclude: () => mergeArrayExclude,
           mergeIfExisted: () => mergeIfExisted,
           overwrite: () => overwrite,
           overwriteDeep: () => overwriteDeep,
-          overwriteObj: () => overwriteObj,
           overwriteShallow: () => overwriteShallow5,
           removeFromObject: () => removeFromObject
         });
         module22.exports = __toCommonJS22(object_exports);
         var import_globals3 = require_cjs12();
         var import_types = require_types2();
+        var import_array = require_array2();
         var exec5 = (param, element, state, context) => {
           if ((0, import_types.isFunction)(param)) {
             return param(
@@ -4917,30 +4982,32 @@ var require_cjs9 = __commonJS({
           return param;
         };
         var map = (obj, extention, element) => {
-          for (const e2 in extention) {
-            obj[e2] = exec5(extention[e2], element);
+          for (const e in extention) {
+            obj[e] = exec5(extention[e], element);
           }
         };
-        var merge52 = (element, obj) => {
-          for (const e2 in obj) {
-            const elementProp = element[e2];
-            const objProp = obj[e2];
+        var merge52 = (element, obj, excludeFrom = []) => {
+          for (const e in obj) {
+            if (excludeFrom.includes(e) || e.includes("__"))
+              continue;
+            const elementProp = element[e];
+            const objProp = obj[e];
             if (elementProp === void 0) {
-              element[e2] = objProp;
+              element[e] = objProp;
             }
           }
           return element;
         };
         var deepMerge3 = (element, extend, excludeFrom = []) => {
-          for (const e2 in extend) {
-            if (excludeFrom.includes(e2) || e2.includes("__"))
+          for (const e in extend) {
+            if (excludeFrom.includes(e) || e.includes("__"))
               continue;
-            const elementProp = element[e2];
-            const extendProp = extend[e2];
+            const elementProp = element[e];
+            const extendProp = extend[e];
             if ((0, import_types.isObjectLike)(elementProp) && (0, import_types.isObjectLike)(extendProp)) {
               deepMerge3(elementProp, extendProp);
             } else if (elementProp === void 0) {
-              element[e2] = extendProp;
+              element[e] = extendProp;
             }
           }
           return element;
@@ -4948,7 +5015,7 @@ var require_cjs9 = __commonJS({
         var clone = (obj, excludeFrom = []) => {
           const o = {};
           for (const prop in obj) {
-            if (excludeFrom.includes(e) || e.includes("__"))
+            if (excludeFrom.includes(prop) || prop.includes("__"))
               continue;
             o[prop] = obj[prop];
           }
@@ -4975,6 +5042,9 @@ var require_cjs9 = __commonJS({
           }
           return o;
         };
+        var mergeArrayExclude = (arr, excl = []) => {
+          return arr.reduce((acc, curr) => deepMerge3(acc, deepCloneExclude(curr, excl)), {});
+        };
         var deepClone22 = (obj, excludeFrom = []) => {
           const o = (0, import_types.isArray)(obj) ? [] : {};
           for (const prop in obj) {
@@ -4982,7 +5052,7 @@ var require_cjs9 = __commonJS({
               continue;
             let objProp = obj[prop];
             if (prop === "extend" && (0, import_types.isArray)(objProp)) {
-              objProp = mergeArray(objProp);
+              objProp = (0, import_array.mergeArray)(objProp);
             }
             if ((0, import_types.isObjectLike)(objProp)) {
               o[prop] = deepClone22(objProp, excludeFrom);
@@ -5051,8 +5121,8 @@ var require_cjs9 = __commonJS({
                 try {
                   const evalProp = import_globals3.window.eval(`(${objProp})`);
                   stringified[prop] = evalProp;
-                } catch (e2) {
-                  if (e2)
+                } catch (e) {
+                  if (e)
                     stringified[prop] = objProp;
                 }
               } else {
@@ -5066,8 +5136,8 @@ var require_cjs9 = __commonJS({
                     try {
                       const evalProp = import_globals3.window.eval(`(${arrProp})`);
                       stringified[prop].push(evalProp);
-                    } catch (e2) {
-                      if (e2)
+                    } catch (e) {
+                      if (e)
                         stringified[prop].push(arrProp);
                     }
                   } else {
@@ -5087,32 +5157,17 @@ var require_cjs9 = __commonJS({
           }
           return stringified;
         };
-        var overwrite = (element, params, excludeFrom = []) => {
-          const { ref } = element;
-          const changes = {};
-          for (const e2 in params) {
-            if (excludeFrom.includes(e2) || e2.includes("__"))
-              continue;
-            const elementProp = element[e2];
-            const paramsProp = params[e2];
-            if (paramsProp) {
-              ref.__cache[e2] = changes[e2] = elementProp;
-              ref[e2] = paramsProp;
-            }
-          }
-          return changes;
-        };
         var diffObjects = (original, objToDiff, cache) => {
-          for (const e2 in objToDiff) {
-            if (e2 === "ref")
+          for (const e in objToDiff) {
+            if (e === "ref")
               continue;
-            const originalProp = original[e2];
-            const objToDiffProp = objToDiff[e2];
+            const originalProp = original[e];
+            const objToDiffProp = objToDiff[e];
             if ((0, import_types.isObject)(originalProp) && (0, import_types.isObject)(objToDiffProp)) {
-              cache[e2] = {};
-              diff5(originalProp, objToDiffProp, cache[e2]);
+              cache[e] = {};
+              diff5(originalProp, objToDiffProp, cache[e]);
             } else if (objToDiffProp !== void 0) {
-              cache[e2] = objToDiffProp;
+              cache[e] = objToDiffProp;
             }
           }
           return cache;
@@ -5143,35 +5198,39 @@ var require_cjs9 = __commonJS({
           }
           return cache;
         };
-        var overwriteObj = (params, obj) => {
+        var overwrite = (element, params, excludeFrom = []) => {
+          const { ref } = element;
           const changes = {};
-          for (const e2 in params) {
-            const objProp = obj[e2];
-            const paramsProp = params[e2];
+          for (const e in params) {
+            if (excludeFrom.includes(e) || e.includes("__"))
+              continue;
+            const elementProp = element[e];
+            const paramsProp = params[e];
             if (paramsProp) {
-              obj[e2] = changes[e2] = objProp;
+              ref.__cache[e] = changes[e] = elementProp;
+              ref[e] = paramsProp;
             }
           }
           return changes;
         };
         var overwriteShallow5 = (obj, params, excludeFrom = []) => {
-          for (const e2 in params) {
-            if (excludeFrom.includes(e2) || e2.includes("__"))
+          for (const e in params) {
+            if (excludeFrom.includes(e) || e.includes("__"))
               continue;
-            obj[e2] = params[e2];
+            obj[e] = params[e];
           }
           return obj;
         };
-        var overwriteDeep = (params, obj, excludeFrom = []) => {
-          for (const e2 in params) {
-            if (excludeFrom.includes(e2) || e2.includes("__"))
+        var overwriteDeep = (obj, params, excludeFrom = []) => {
+          for (const e in params) {
+            if (excludeFrom.includes(e) || e.includes("__"))
               continue;
-            const objProp = obj[e2];
-            const paramsProp = params[e2];
+            const objProp = obj[e];
+            const paramsProp = params[e];
             if ((0, import_types.isObjectLike)(objProp) && (0, import_types.isObjectLike)(paramsProp)) {
-              overwriteDeep(paramsProp, objProp);
+              overwriteDeep(objProp, paramsProp);
             } else if (paramsProp !== void 0) {
-              obj[e2] = paramsProp;
+              obj[e] = paramsProp;
             }
           }
           return obj;
@@ -5182,7 +5241,7 @@ var require_cjs9 = __commonJS({
           return a || b;
         };
         var flattenRecursive = (param, prop, stack = []) => {
-          const objectized = mergeAndCloneIfArray(param);
+          const objectized = (0, import_array.mergeAndCloneIfArray)(param);
           stack.push(objectized);
           const extendOfExtend = objectized[prop];
           if (extendOfExtend)
@@ -5210,13 +5269,13 @@ var require_cjs9 = __commonJS({
           }
           return true;
         };
-        var removeFromObject = (obj, props4) => {
-          if (props4 === void 0 || props4 === null)
+        var removeFromObject = (obj, props7) => {
+          if (props7 === void 0 || props7 === null)
             return obj;
-          if ((0, import_types.is)(props4)("string", "number")) {
-            delete obj[props4];
-          } else if ((0, import_types.isArray)(props4)) {
-            props4.forEach((prop) => delete obj[prop]);
+          if ((0, import_types.is)(props7)("string", "number")) {
+            delete obj[props7];
+          } else if ((0, import_types.isArray)(props7)) {
+            props7.forEach((prop) => delete obj[prop]);
           } else {
             throw new Error("Invalid input: props must be a string or an array of strings");
           }
@@ -5274,70 +5333,6 @@ var require_cjs9 = __commonJS({
         };
       }
     });
-    var require_array2 = __commonJS2({
-      "../../node_modules/@domql/utils/dist/cjs/array.js"(exports2, module22) {
-        "use strict";
-        var __defProp22 = Object.defineProperty;
-        var __getOwnPropDesc22 = Object.getOwnPropertyDescriptor;
-        var __getOwnPropNames22 = Object.getOwnPropertyNames;
-        var __hasOwnProp22 = Object.prototype.hasOwnProperty;
-        var __export22 = (target, all) => {
-          for (var name in all)
-            __defProp22(target, name, { get: all[name], enumerable: true });
-        };
-        var __copyProps22 = (to, from2, except, desc) => {
-          if (from2 && typeof from2 === "object" || typeof from2 === "function") {
-            for (let key of __getOwnPropNames22(from2))
-              if (!__hasOwnProp22.call(to, key) && key !== except)
-                __defProp22(to, key, { get: () => from2[key], enumerable: !(desc = __getOwnPropDesc22(from2, key)) || desc.enumerable });
-          }
-          return to;
-        };
-        var __toCommonJS22 = (mod) => __copyProps22(__defProp22({}, "__esModule", { value: true }), mod);
-        var array_exports = {};
-        __export22(array_exports, {
-          arrayContainsOtherArray: () => arrayContainsOtherArray,
-          joinArrays: () => joinArrays,
-          mergeAndCloneIfArray: () => mergeAndCloneIfArray2,
-          mergeArray: () => mergeArray2,
-          removeFromArray: () => removeFromArray,
-          swapItemsInArray: () => swapItemsInArray
-        });
-        module22.exports = __toCommonJS22(array_exports);
-        var import_object = require_object2();
-        var import_types = require_types2();
-        var arrayContainsOtherArray = (arr1, arr2) => {
-          return arr2.every((val) => arr1.includes(val));
-        };
-        var removeFromArray = (arr, index) => {
-          if ((0, import_types.isString)(index))
-            index = parseInt(index);
-          if ((0, import_types.isNumber)(index)) {
-            if (index < 0 || index >= arr.length || isNaN(index)) {
-              throw new Error("Invalid index");
-            }
-            arr.splice(index, 1);
-          } else if ((0, import_types.isArray)(index)) {
-            index.forEach((idx) => removeFromArray(arr, idx));
-          } else {
-            throw new Error("Invalid index");
-          }
-          return arr;
-        };
-        var swapItemsInArray = (arr, i, j) => {
-          [arr[i], arr[j]] = [arr[j], arr[i]];
-        };
-        var joinArrays = (...arrays) => {
-          return [].concat(...arrays);
-        };
-        var mergeArray2 = (arr, excludeFrom = []) => {
-          return arr.reduce((a, c) => (0, import_object.deepMerge)(a, (0, import_object.deepClone)(c, excludeFrom), excludeFrom), {});
-        };
-        var mergeAndCloneIfArray2 = (obj) => {
-          return (0, import_types.isArray)(obj) ? mergeArray2(obj) : (0, import_object.deepClone)(obj);
-        };
-      }
-    });
     var require_log2 = __commonJS2({
       "../../node_modules/@domql/utils/dist/cjs/log.js"(exports2, module22) {
         "use strict";
@@ -5806,6 +5801,7 @@ var require_cjs9 = __commonJS({
       range: [-3, 12],
       h1Matches: 6,
       lineHeight: 1.5,
+      subSequence: true,
       unit: "em",
       templates: {},
       sequence: {},
@@ -5962,8 +5958,8 @@ var require_cjs9 = __commonJS({
       18: "S",
       19: "T"
     };
-    var setSequenceValue = (props4, sequenceProps) => {
-      const { key, variable, value, scaling, index } = props4;
+    var setSequenceValue = (props7, sequenceProps) => {
+      const { key, variable, value, scaling, index } = props7;
       sequenceProps.sequence[key] = {
         key,
         decimal: ~~(value * 100) / 100,
@@ -5975,8 +5971,8 @@ var require_cjs9 = __commonJS({
       sequenceProps.scales[key] = scaling;
       sequenceProps.vars[variable] = scaling + sequenceProps.unit;
     };
-    var generateSubSequence = (props4, sequenceProps) => {
-      const { key, base, value, ratio, variable, index } = props4;
+    var generateSubSequence = (props7, sequenceProps) => {
+      const { key, base, value, ratio, variable, index } = props7;
       const next2 = value * ratio;
       const diff5 = next2 - value;
       const smallscale = diff5 / 1.618;
@@ -6017,7 +6013,7 @@ var require_cjs9 = __commonJS({
         const value = switchSequenceOnNegative(key, base, ratio);
         const scaling = ~~(value / base * 100) / 100;
         const variable = prefix2 + letterKey;
-        const props4 = {
+        const props7 = {
           key: letterKey,
           variable,
           value,
@@ -6026,9 +6022,9 @@ var require_cjs9 = __commonJS({
           ratio,
           index: key
         };
-        setSequenceValue(props4, sequenceProps);
+        setSequenceValue(props7, sequenceProps);
         if (subSequence)
-          generateSubSequence(props4, sequenceProps);
+          generateSubSequence(props7, sequenceProps);
       }
       return sequenceProps;
     };
@@ -6110,14 +6106,14 @@ var require_cjs9 = __commonJS({
         CSS_VARS2[result.var] = result.value;
       }
     };
-    var applySequenceVars = (props4, mediaName, options = {}) => {
+    var applySequenceVars = (props7, mediaName, options = {}) => {
       const CONFIG22 = getActiveConfig5();
       const { UNIT: UNIT2, MEDIA: MEDIA2, TIMING: TIMING2, CSS_VARS: CSS_VARS2 } = CONFIG22;
-      const unit = props4.unit || UNIT2.default;
-      const { sequence, scales } = props4;
+      const unit = props7.unit || UNIT2.default;
+      const { sequence, scales } = props7;
       for (const key in sequence) {
         const item = sequence[key];
-        const value = (props4.type === TIMING2.type ? sequence[key].val : scales[key]) + unit;
+        const value = (props7.type === TIMING2.type ? sequence[key].val : scales[key]) + unit;
         if (mediaName) {
           const query = MEDIA2[mediaName];
           if (!query) {
@@ -6606,13 +6602,13 @@ var require_cjs9 = __commonJS({
       return { var: CSSvar, value: str, arr: value, type };
     };
     var import_utils142 = __toESM2(require_cjs42(), 1);
-    var runThroughMedia = (props4) => {
+    var runThroughMedia = (props7) => {
       const CONFIG22 = getActiveConfig5();
       const { TYPOGRAPHY: TYPOGRAPHY2, MEDIA: MEDIA2 } = CONFIG22;
-      for (const prop in props4) {
-        const mediaProps = props4[prop];
+      for (const prop in props7) {
+        const mediaProps = props7[prop];
         if (prop.slice(0, 1) === "@") {
-          const { type, base, ratio, range, subSequence, h1Matches, unit } = props4;
+          const { type, base, ratio, range, subSequence, h1Matches, unit } = props7;
           (0, import_utils142.merge)(mediaProps, {
             type,
             base,
@@ -6636,20 +6632,20 @@ var require_cjs9 = __commonJS({
         }
       }
     };
-    var applyHeadings = (props4) => {
+    var applyHeadings = (props7) => {
       const CONFIG22 = getActiveConfig5();
-      if (props4.h1Matches) {
-        const unit = props4.unit;
-        const HEADINGS = findHeadings(props4);
-        const { templates } = props4;
+      if (props7.h1Matches) {
+        const unit = props7.unit;
+        const HEADINGS = findHeadings(props7);
+        const { templates } = props7;
         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 : props4.lineHeight,
-            letterSpacing: headerStyle ? headerStyle.letterSpacing : props4.letterSpacing,
+            lineHeight: headerStyle ? headerStyle.lineHeight : props7.lineHeight,
+            letterSpacing: headerStyle ? headerStyle.letterSpacing : props7.letterSpacing,
             fontWeight: headerStyle ? headerStyle.fontWeight : 900 - k * 100
           };
         }
@@ -6744,11 +6740,11 @@ var require_cjs9 = __commonJS({
         sequence
       );
     };
-    var getSpacingBasedOnRatio13 = (props4, propertyName, val) => {
+    var getSpacingBasedOnRatio13 = (props7, propertyName, val) => {
       const CONFIG22 = getActiveConfig5();
       const { SPACING: SPACING2 } = CONFIG22;
-      const { spacingRatio, unit } = props4;
-      const value = val || props4[propertyName];
+      const { spacingRatio, unit } = props7;
+      const value = val || props7[propertyName];
       if (spacingRatio) {
         let sequenceProps = SPACING2[spacingRatio];
         if (!sequenceProps) {
@@ -7023,7 +7019,7 @@ var require_cjs9 = __commonJS({
         return v;
       }).join(" ");
     };
-    var transformDuration5 = (duration, props4, propertyName) => {
+    var transformDuration5 = (duration, props7, propertyName) => {
       if (!(0, import_utils25.isString)(duration))
         return;
       return duration.split(",").map((v) => getTimingByKey5(v).timing || v).join(",");
@@ -7071,11 +7067,11 @@ var require_cjs9 = __commonJS({
       if (CONFIG22.verbose)
         console.warn("Can not find", factoryName, "method in scratch");
     };
-    var setEach = (factoryName, props4) => {
+    var setEach = (factoryName, props7) => {
       const CONFIG22 = getActiveConfig5();
       const FACTORY_NAME = factoryName.toUpperCase();
-      const keys = Object.keys(props4);
-      keys.map((key) => setValue(FACTORY_NAME, props4[key], key));
+      const keys = Object.keys(props7);
+      keys.map((key) => setValue(FACTORY_NAME, props7[key], key));
       return CONFIG22[FACTORY_NAME];
     };
     var SET_OPTIONS = {};
@@ -7154,16 +7150,19 @@ var require_cjs10 = __commonJS({
       default: () => router_default,
       getActiveRoute: () => getActiveRoute,
       lastLevel: () => lastLevel,
+      lastPathname: () => lastPathname,
       router: () => router
     });
     module2.exports = __toCommonJS2(router_exports);
     var import_globals = require_cjs4();
     var import_utils20 = require_cjs5();
     var getActiveRoute = (route = import_globals.window.location.pathname, level) => `/${route.split("/")[level + 1]}`;
+    var lastPathname;
     var lastLevel = 0;
     var defaultOptions = {
       level: lastLevel,
       pushState: true,
+      initialRender: false,
       scrollToTop: true,
       scrollToNode: false,
       scrollNode: import_globals.document && import_globals.document.documentElement,
@@ -7178,34 +7177,42 @@ var require_cjs10 = __commonJS({
       (0, import_utils20.merge)(options, defaultOptions);
       lastLevel = options.lastLevel;
       const [pathname, hash2] = path.split("#");
+      const rootNode = element.node;
       const route = getActiveRoute(pathname, options.level);
       const content = element.routes[route] || element.routes["/*"];
-      if (!content)
-        return;
-      if (options.pushState)
-        import_globals.window.history.pushState(state, null, pathname + (hash2 ? `#${hash2}` : ""));
-      element.set({ tag: options.useFragment && "fragment", extend: content });
-      if (options.updateState) {
-        element.state.update({ route, hash: hash2 }, {
-          preventContentUpdate: !options.stateContentUpdate
-        });
-      }
-      const rootNode = element.node;
-      const scrollNode = options.scrollNode;
-      if (options.scrollToTop) {
-        scrollNode.scrollTo({
-          ...options.scrollToOptions || {},
-          top: 0,
-          left: 0
-        });
-      }
-      if (options.scrollToNode) {
-        content.content.node.scrollIntoView(
-          options.scrollToOptions
-        );
+      const scrollNode = options.scrollDocument ? import_globals.document.documentElement : rootNode;
+      const hashChanged = hash2 && hash2 !== import_globals.window.location.hash.slice(1);
+      const pathChanged = pathname !== lastPathname;
+      lastPathname = pathname;
+      if (content) {
+        if (options.pushState)
+          import_globals.window.history.pushState(state, null, route + (hash2 ? `#${hash2}` : ""));
+        if (pathChanged || !hashChanged) {
+          element.set({ tag: options.useFragment && "fragment", extend: content });
+          if (options.updateState) {
+            element.state.update({ route, hash: hash2 }, {
+              preventContentUpdate: !options.stateContentUpdate
+            });
+          }
+        }
+        if (options.scrollToTop) {
+          scrollNode.scrollTo({
+            ...options.scrollToOptions || {},
+            top: 0,
+            left: 0
+          });
+        }
+        if (options.scrollToNode) {
+          content.content.node.scrollTo({
+            ...options.scrollToOptions || {},
+            top: 0,
+            left: 0
+          });
+        }
       }
       if (hash2) {
         const activeNode = import_globals.document.getElementById(hash2);
+        console.log(hash2, activeNode);
         if (activeNode) {
           const top = activeNode.getBoundingClientRect().top + rootNode.scrollTop - options.scrollToOffset || 0;
           scrollNode.scrollTo({
@@ -7631,6 +7638,70 @@ var require_cjs11 = __commonJS({
         };
       }
     });
+    var require_array2 = __commonJS2({
+      "../../node_modules/@domql/utils/dist/cjs/array.js"(exports2, module22) {
+        "use strict";
+        var __defProp22 = Object.defineProperty;
+        var __getOwnPropDesc22 = Object.getOwnPropertyDescriptor;
+        var __getOwnPropNames22 = Object.getOwnPropertyNames;
+        var __hasOwnProp22 = Object.prototype.hasOwnProperty;
+        var __export22 = (target, all) => {
+          for (var name in all)
+            __defProp22(target, name, { get: all[name], enumerable: true });
+        };
+        var __copyProps22 = (to, from2, except, desc) => {
+          if (from2 && typeof from2 === "object" || typeof from2 === "function") {
+            for (let key of __getOwnPropNames22(from2))
+              if (!__hasOwnProp22.call(to, key) && key !== except)
+                __defProp22(to, key, { get: () => from2[key], enumerable: !(desc = __getOwnPropDesc22(from2, key)) || desc.enumerable });
+          }
+          return to;
+        };
+        var __toCommonJS22 = (mod) => __copyProps22(__defProp22({}, "__esModule", { value: true }), mod);
+        var array_exports = {};
+        __export22(array_exports, {
+          arrayContainsOtherArray: () => arrayContainsOtherArray,
+          joinArrays: () => joinArrays,
+          mergeAndCloneIfArray: () => mergeAndCloneIfArray,
+          mergeArray: () => mergeArray,
+          removeFromArray: () => removeFromArray,
+          swapItemsInArray: () => swapItemsInArray
+        });
+        module22.exports = __toCommonJS22(array_exports);
+        var import_object = require_object2();
+        var import_types = require_types2();
+        var arrayContainsOtherArray = (arr1, arr2) => {
+          return arr2.every((val) => arr1.includes(val));
+        };
+        var removeFromArray = (arr, index) => {
+          if ((0, import_types.isString)(index))
+            index = parseInt(index);
+          if ((0, import_types.isNumber)(index)) {
+            if (index < 0 || index >= arr.length || isNaN(index)) {
+              throw new Error("Invalid index");
+            }
+            arr.splice(index, 1);
+          } else if ((0, import_types.isArray)(index)) {
+            index.forEach((idx) => removeFromArray(arr, idx));
+          } else {
+            throw new Error("Invalid index");
+          }
+          return arr;
+        };
+        var swapItemsInArray = (arr, i, j) => {
+          [arr[i], arr[j]] = [arr[j], arr[i]];
+        };
+        var joinArrays = (...arrays) => {
+          return [].concat(...arrays);
+        };
+        var mergeArray = (arr, excludeFrom = []) => {
+          return arr.reduce((a, c) => (0, import_object.deepMerge)(a, (0, import_object.deepClone)(c, excludeFrom), excludeFrom), {});
+        };
+        var mergeAndCloneIfArray = (obj) => {
+          return (0, import_types.isArray)(obj) ? mergeArray(obj) : (0, import_object.deepClone)(obj);
+        };
+      }
+    });
     var require_object2 = __commonJS2({
       "../../node_modules/@domql/utils/dist/cjs/object.js"(exports2, module22) {
         "use strict";
@@ -7668,16 +7739,17 @@ var require_cjs11 = __commonJS({
           isEqualDeep: () => isEqualDeep,
           map: () => map,
           merge: () => merge52,
+          mergeArrayExclude: () => mergeArrayExclude,
           mergeIfExisted: () => mergeIfExisted,
           overwrite: () => overwrite,
           overwriteDeep: () => overwriteDeep,
-          overwriteObj: () => overwriteObj,
           overwriteShallow: () => overwriteShallow5,
           removeFromObject: () => removeFromObject
         });
         module22.exports = __toCommonJS22(object_exports);
         var import_globals3 = require_cjs12();
         var import_types = require_types2();
+        var import_array = require_array2();
         var exec5 = (param, element, state, context) => {
           if ((0, import_types.isFunction)(param)) {
             return param(
@@ -7689,30 +7761,32 @@ var require_cjs11 = __commonJS({
           return param;
         };
         var map = (obj, extention, element) => {
-          for (const e2 in extention) {
-            obj[e2] = exec5(extention[e2], element);
+          for (const e in extention) {
+            obj[e] = exec5(extention[e], element);
           }
         };
-        var merge52 = (element, obj) => {
-          for (const e2 in obj) {
-            const elementProp = element[e2];
-            const objProp = obj[e2];
+        var merge52 = (element, obj, excludeFrom = []) => {
+          for (const e in obj) {
+            if (excludeFrom.includes(e) || e.includes("__"))
+              continue;
+            const elementProp = element[e];
+            const objProp = obj[e];
             if (elementProp === void 0) {
-              element[e2] = objProp;
+              element[e] = objProp;
             }
           }
           return element;
         };
         var deepMerge3 = (element, extend, excludeFrom = []) => {
-          for (const e2 in extend) {
-            if (excludeFrom.includes(e2) || e2.includes("__"))
+          for (const e in extend) {
+            if (excludeFrom.includes(e) || e.includes("__"))
               continue;
-            const elementProp = element[e2];
-            const extendProp = extend[e2];
+            const elementProp = element[e];
+            const extendProp = extend[e];
             if ((0, import_types.isObjectLike)(elementProp) && (0, import_types.isObjectLike)(extendProp)) {
               deepMerge3(elementProp, extendProp);
             } else if (elementProp === void 0) {
-              element[e2] = extendProp;
+              element[e] = extendProp;
             }
           }
           return element;
@@ -7720,7 +7794,7 @@ var require_cjs11 = __commonJS({
         var clone = (obj, excludeFrom = []) => {
           const o = {};
           for (const prop in obj) {
-            if (excludeFrom.includes(e) || e.includes("__"))
+            if (excludeFrom.includes(prop) || prop.includes("__"))
               continue;
             o[prop] = obj[prop];
           }
@@ -7747,6 +7821,9 @@ var require_cjs11 = __commonJS({
           }
           return o;
         };
+        var mergeArrayExclude = (arr, excl = []) => {
+          return arr.reduce((acc, curr) => deepMerge3(acc, deepCloneExclude(curr, excl)), {});
+        };
         var deepClone22 = (obj, excludeFrom = []) => {
           const o = (0, import_types.isArray)(obj) ? [] : {};
           for (const prop in obj) {
@@ -7754,7 +7831,7 @@ var require_cjs11 = __commonJS({
               continue;
             let objProp = obj[prop];
             if (prop === "extend" && (0, import_types.isArray)(objProp)) {
-              objProp = mergeArray(objProp);
+              objProp = (0, import_array.mergeArray)(objProp);
             }
             if ((0, import_types.isObjectLike)(objProp)) {
               o[prop] = deepClone22(objProp, excludeFrom);
@@ -7823,8 +7900,8 @@ var require_cjs11 = __commonJS({
                 try {
                   const evalProp = import_globals3.window.eval(`(${objProp})`);
                   stringified[prop] = evalProp;
-                } catch (e2) {
-                  if (e2)
+                } catch (e) {
+                  if (e)
                     stringified[prop] = objProp;
                 }
               } else {
@@ -7838,8 +7915,8 @@ var require_cjs11 = __commonJS({
                     try {
                       const evalProp = import_globals3.window.eval(`(${arrProp})`);
                       stringified[prop].push(evalProp);
-                    } catch (e2) {
-                      if (e2)
+                    } catch (e) {
+                      if (e)
                         stringified[prop].push(arrProp);
                     }
                   } else {
@@ -7859,32 +7936,17 @@ var require_cjs11 = __commonJS({
           }
           return stringified;
         };
-        var overwrite = (element, params, excludeFrom = []) => {
-          const { ref } = element;
-          const changes = {};
-          for (const e2 in params) {
-            if (excludeFrom.includes(e2) || e2.includes("__"))
-              continue;
-            const elementProp = element[e2];
-            const paramsProp = params[e2];
-            if (paramsProp) {
-              ref.__cache[e2] = changes[e2] = elementProp;
-              ref[e2] = paramsProp;
-            }
-          }
-          return changes;
-        };
         var diffObjects = (original, objToDiff, cache) => {
-          for (const e2 in objToDiff) {
-            if (e2 === "ref")
+          for (const e in objToDiff) {
+            if (e === "ref")
               continue;
-            const originalProp = original[e2];
-            const objToDiffProp = objToDiff[e2];
+            const originalProp = original[e];
+            const objToDiffProp = objToDiff[e];
             if ((0, import_types.isObject)(originalProp) && (0, import_types.isObject)(objToDiffProp)) {
-              cache[e2] = {};
-              diff5(originalProp, objToDiffProp, cache[e2]);
+              cache[e] = {};
+              diff5(originalProp, objToDiffProp, cache[e]);
             } else if (objToDiffProp !== void 0) {
-              cache[e2] = objToDiffProp;
+              cache[e] = objToDiffProp;
             }
           }
           return cache;
@@ -7915,35 +7977,39 @@ var require_cjs11 = __commonJS({
           }
           return cache;
         };
-        var overwriteObj = (params, obj) => {
+        var overwrite = (element, params, excludeFrom = []) => {
+          const { ref } = element;
           const changes = {};
-          for (const e2 in params) {
-            const objProp = obj[e2];
-            const paramsProp = params[e2];
+          for (const e in params) {
+            if (excludeFrom.includes(e) || e.includes("__"))
+              continue;
+            const elementProp = element[e];
+            const paramsProp = params[e];
             if (paramsProp) {
-              obj[e2] = changes[e2] = objProp;
+              ref.__cache[e] = changes[e] = elementProp;
+              ref[e] = paramsProp;
             }
           }
           return changes;
         };
         var overwriteShallow5 = (obj, params, excludeFrom = []) => {
-          for (const e2 in params) {
-            if (excludeFrom.includes(e2) || e2.includes("__"))
+          for (const e in params) {
+            if (excludeFrom.includes(e) || e.includes("__"))
               continue;
-            obj[e2] = params[e2];
+            obj[e] = params[e];
           }
           return obj;
         };
-        var overwriteDeep = (params, obj, excludeFrom = []) => {
-          for (const e2 in params) {
-            if (excludeFrom.includes(e2) || e2.includes("__"))
+        var overwriteDeep = (obj, params, excludeFrom = []) => {
+          for (const e in params) {
+            if (excludeFrom.includes(e) || e.includes("__"))
               continue;
-            const objProp = obj[e2];
-            const paramsProp = params[e2];
+            const objProp = obj[e];
+            const paramsProp = params[e];
             if ((0, import_types.isObjectLike)(objProp) && (0, import_types.isObjectLike)(paramsProp)) {
-              overwriteDeep(paramsProp, objProp);
+              overwriteDeep(objProp, paramsProp);
             } else if (paramsProp !== void 0) {
-              obj[e2] = paramsProp;
+              obj[e] = paramsProp;
             }
           }
           return obj;
@@ -7954,7 +8020,7 @@ var require_cjs11 = __commonJS({
           return a || b;
         };
         var flattenRecursive = (param, prop, stack = []) => {
-          const objectized = mergeAndCloneIfArray(param);
+          const objectized = (0, import_array.mergeAndCloneIfArray)(param);
           stack.push(objectized);
           const extendOfExtend = objectized[prop];
           if (extendOfExtend)
@@ -7982,13 +8048,13 @@ var require_cjs11 = __commonJS({
           }
           return true;
         };
-        var removeFromObject = (obj, props4) => {
-          if (props4 === void 0 || props4 === null)
+        var removeFromObject = (obj, props7) => {
+          if (props7 === void 0 || props7 === null)
             return obj;
-          if ((0, import_types.is)(props4)("string", "number")) {
-            delete obj[props4];
-          } else if ((0, import_types.isArray)(props4)) {
-            props4.forEach((prop) => delete obj[prop]);
+          if ((0, import_types.is)(props7)("string", "number")) {
+            delete obj[props7];
+          } else if ((0, import_types.isArray)(props7)) {
+            props7.forEach((prop) => delete obj[prop]);
           } else {
             throw new Error("Invalid input: props must be a string or an array of strings");
           }
@@ -8046,70 +8112,6 @@ var require_cjs11 = __commonJS({
         };
       }
     });
-    var require_array2 = __commonJS2({
-      "../../node_modules/@domql/utils/dist/cjs/array.js"(exports2, module22) {
-        "use strict";
-        var __defProp22 = Object.defineProperty;
-        var __getOwnPropDesc22 = Object.getOwnPropertyDescriptor;
-        var __getOwnPropNames22 = Object.getOwnPropertyNames;
-        var __hasOwnProp22 = Object.prototype.hasOwnProperty;
-        var __export22 = (target, all) => {
-          for (var name in all)
-            __defProp22(target, name, { get: all[name], enumerable: true });
-        };
-        var __copyProps22 = (to, from2, except, desc) => {
-          if (from2 && typeof from2 === "object" || typeof from2 === "function") {
-            for (let key of __getOwnPropNames22(from2))
-              if (!__hasOwnProp22.call(to, key) && key !== except)
-                __defProp22(to, key, { get: () => from2[key], enumerable: !(desc = __getOwnPropDesc22(from2, key)) || desc.enumerable });
-          }
-          return to;
-        };
-        var __toCommonJS22 = (mod) => __copyProps22(__defProp22({}, "__esModule", { value: true }), mod);
-        var array_exports = {};
-        __export22(array_exports, {
-          arrayContainsOtherArray: () => arrayContainsOtherArray,
-          joinArrays: () => joinArrays,
-          mergeAndCloneIfArray: () => mergeAndCloneIfArray2,
-          mergeArray: () => mergeArray2,
-          removeFromArray: () => removeFromArray,
-          swapItemsInArray: () => swapItemsInArray
-        });
-        module22.exports = __toCommonJS22(array_exports);
-        var import_object = require_object2();
-        var import_types = require_types2();
-        var arrayContainsOtherArray = (arr1, arr2) => {
-          return arr2.every((val) => arr1.includes(val));
-        };
-        var removeFromArray = (arr, index) => {
-          if ((0, import_types.isString)(index))
-            index = parseInt(index);
-          if ((0, import_types.isNumber)(index)) {
-            if (index < 0 || index >= arr.length || isNaN(index)) {
-              throw new Error("Invalid index");
-            }
-            arr.splice(index, 1);
-          } else if ((0, import_types.isArray)(index)) {
-            index.forEach((idx) => removeFromArray(arr, idx));
-          } else {
-            throw new Error("Invalid index");
-          }
-          return arr;
-        };
-        var swapItemsInArray = (arr, i, j) => {
-          [arr[i], arr[j]] = [arr[j], arr[i]];
-        };
-        var joinArrays = (...arrays) => {
-          return [].concat(...arrays);
-        };
-        var mergeArray2 = (arr, excludeFrom = []) => {
-          return arr.reduce((a, c) => (0, import_object.deepMerge)(a, (0, import_object.deepClone)(c, excludeFrom), excludeFrom), {});
-        };
-        var mergeAndCloneIfArray2 = (obj) => {
-          return (0, import_types.isArray)(obj) ? mergeArray2(obj) : (0, import_object.deepClone)(obj);
-        };
-      }
-    });
     var require_log2 = __commonJS2({
       "../../node_modules/@domql/utils/dist/cjs/log.js"(exports2, module22) {
         "use strict";
@@ -8578,6 +8580,7 @@ var require_cjs11 = __commonJS({
       range: [-3, 12],
       h1Matches: 6,
       lineHeight: 1.5,
+      subSequence: true,
       unit: "em",
       templates: {},
       sequence: {},
@@ -8734,8 +8737,8 @@ var require_cjs11 = __commonJS({
       18: "S",
       19: "T"
     };
-    var setSequenceValue = (props4, sequenceProps) => {
-      const { key, variable, value, scaling, index } = props4;
+    var setSequenceValue = (props7, sequenceProps) => {
+      const { key, variable, value, scaling, index } = props7;
       sequenceProps.sequence[key] = {
         key,
         decimal: ~~(value * 100) / 100,
@@ -8747,8 +8750,8 @@ var require_cjs11 = __commonJS({
       sequenceProps.scales[key] = scaling;
       sequenceProps.vars[variable] = scaling + sequenceProps.unit;
     };
-    var generateSubSequence = (props4, sequenceProps) => {
-      const { key, base, value, ratio, variable, index } = props4;
+    var generateSubSequence = (props7, sequenceProps) => {
+      const { key, base, value, ratio, variable, index } = props7;
       const next2 = value * ratio;
       const diff5 = next2 - value;
       const smallscale = diff5 / 1.618;
@@ -8789,7 +8792,7 @@ var require_cjs11 = __commonJS({
         const value = switchSequenceOnNegative(key, base, ratio);
         const scaling = ~~(value / base * 100) / 100;
         const variable = prefix2 + letterKey;
-        const props4 = {
+        const props7 = {
           key: letterKey,
           variable,
           value,
@@ -8798,9 +8801,9 @@ var require_cjs11 = __commonJS({
           ratio,
           index: key
         };
-        setSequenceValue(props4, sequenceProps);
+        setSequenceValue(props7, sequenceProps);
         if (subSequence)
-          generateSubSequence(props4, sequenceProps);
+          generateSubSequence(props7, sequenceProps);
       }
       return sequenceProps;
     };
@@ -8882,14 +8885,14 @@ var require_cjs11 = __commonJS({
         CSS_VARS2[result.var] = result.value;
       }
     };
-    var applySequenceVars = (props4, mediaName, options = {}) => {
+    var applySequenceVars = (props7, mediaName, options = {}) => {
       const CONFIG22 = getActiveConfig5();
       const { UNIT: UNIT2, MEDIA: MEDIA2, TIMING: TIMING2, CSS_VARS: CSS_VARS2 } = CONFIG22;
-      const unit = props4.unit || UNIT2.default;
-      const { sequence, scales } = props4;
+      const unit = props7.unit || UNIT2.default;
+      const { sequence, scales } = props7;
       for (const key in sequence) {
         const item = sequence[key];
-        const value = (props4.type === TIMING2.type ? sequence[key].val : scales[key]) + unit;
+        const value = (props7.type === TIMING2.type ? sequence[key].val : scales[key]) + unit;
         if (mediaName) {
           const query = MEDIA2[mediaName];
           if (!query) {
@@ -9378,13 +9381,13 @@ var require_cjs11 = __commonJS({
       return { var: CSSvar, value: str, arr: value, type };
     };
     var import_utils142 = __toESM2(require_cjs42(), 1);
-    var runThroughMedia = (props4) => {
+    var runThroughMedia = (props7) => {
       const CONFIG22 = getActiveConfig5();
       const { TYPOGRAPHY: TYPOGRAPHY2, MEDIA: MEDIA2 } = CONFIG22;
-      for (const prop in props4) {
-        const mediaProps = props4[prop];
+      for (const prop in props7) {
+        const mediaProps = props7[prop];
         if (prop.slice(0, 1) === "@") {
-          const { type, base, ratio, range, subSequence, h1Matches, unit } = props4;
+          const { type, base, ratio, range, subSequence, h1Matches, unit } = props7;
           (0, import_utils142.merge)(mediaProps, {
             type,
             base,
@@ -9408,20 +9411,20 @@ var require_cjs11 = __commonJS({
         }
       }
     };
-    var applyHeadings = (props4) => {
+    var applyHeadings = (props7) => {
       const CONFIG22 = getActiveConfig5();
-      if (props4.h1Matches) {
-        const unit = props4.unit;
-        const HEADINGS = findHeadings(props4);
-        const { templates } = props4;
+      if (props7.h1Matches) {
+        const unit = props7.unit;
+        const HEADINGS = findHeadings(props7);
+        const { templates } = props7;
         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 : props4.lineHeight,
-            letterSpacing: headerStyle ? headerStyle.letterSpacing : props4.letterSpacing,
+            lineHeight: headerStyle ? headerStyle.lineHeight : props7.lineHeight,
+            letterSpacing: headerStyle ? headerStyle.letterSpacing : props7.letterSpacing,
             fontWeight: headerStyle ? headerStyle.fontWeight : 900 - k * 100
           };
         }
@@ -9516,11 +9519,11 @@ var require_cjs11 = __commonJS({
         sequence
       );
     };
-    var getSpacingBasedOnRatio13 = (props4, propertyName, val) => {
+    var getSpacingBasedOnRatio13 = (props7, propertyName, val) => {
       const CONFIG22 = getActiveConfig5();
       const { SPACING: SPACING2 } = CONFIG22;
-      const { spacingRatio, unit } = props4;
-      const value = val || props4[propertyName];
+      const { spacingRatio, unit } = props7;
+      const value = val || props7[propertyName];
       if (spacingRatio) {
         let sequenceProps = SPACING2[spacingRatio];
         if (!sequenceProps) {
@@ -9795,7 +9798,7 @@ var require_cjs11 = __commonJS({
         return v;
       }).join(" ");
     };
-    var transformDuration5 = (duration, props4, propertyName) => {
+    var transformDuration5 = (duration, props7, propertyName) => {
       if (!(0, import_utils25.isString)(duration))
         return;
       return duration.split(",").map((v) => getTimingByKey5(v).timing || v).join(",");
@@ -9843,11 +9846,11 @@ var require_cjs11 = __commonJS({
       if (CONFIG22.verbose)
         console.warn("Can not find", factoryName, "method in scratch");
     };
-    var setEach = (factoryName, props4) => {
+    var setEach = (factoryName, props7) => {
       const CONFIG22 = getActiveConfig5();
       const FACTORY_NAME = factoryName.toUpperCase();
-      const keys = Object.keys(props4);
-      keys.map((key) => setValue(FACTORY_NAME, props4[key], key));
+      const keys = Object.keys(props7);
+      keys.map((key) => setValue(FACTORY_NAME, props7[key], key));
       return CONFIG22[FACTORY_NAME];
     };
     var SET_OPTIONS = {};
@@ -9917,6 +9920,12 @@ __export(domql_exports, {
   Clickable: () => Clickable,
   Collection: () => Collection,
   DatePicker: () => DatePicker,
+  DatePickerGrid: () => DatePickerGrid,
+  DatePickerMonthsSlider: () => DatePickerMonthsSlider,
+  DatePickerTwoColumns: () => DatePickerTwoColumns,
+  DatePickerWeekDays: () => DatePickerWeekDays,
+  DatePickerYears: () => DatePickerYears,
+  DialogFooter: () => DialogFooter,
   Direction: () => Direction,
   DropdownList: () => DropdownList,
   DropdownParent: () => DropdownParent,
@@ -9973,6 +9982,7 @@ __export(domql_exports, {
   Text: () => Text,
   Textarea: () => Textarea,
   Theme: () => Theme,
+  TimePicker: () => TimePicker,
   Timing: () => Timing,
   ToggleSwitch: () => ToggleSwitch,
   ToggleSwithWithLabel: () => ToggleSwithWithLabel,
@@ -9991,143 +10001,143 @@ module.exports = __toCommonJS(domql_exports);
 var import_scratch = __toESM(require_cjs());
 var Block = {
   class: {
-    boxSizing: ({ props: props4 }) => props4.boxSizing ? { boxSizing: props4.boxSizing } : {
+    boxSizing: ({ props: props7 }) => props7.boxSizing ? { boxSizing: props7.boxSizing } : {
       boxSizing: "border-box"
     },
-    display: ({ props: props4 }) => props4.display && { display: props4.display },
-    hide: ({ props: props4 }) => props4.hide && { display: "none" },
-    width: ({ props: props4 }) => props4.width && (0, import_scratch.getSpacingBasedOnRatio)(props4, "width"),
-    height: ({ props: props4 }) => props4.height && (0, import_scratch.getSpacingBasedOnRatio)(props4, "height"),
-    boxSize: ({ props: props4 }) => {
-      if (typeof props4.boxSize !== "string")
+    display: ({ props: props7 }) => props7.display && { display: props7.display },
+    hide: ({ props: props7 }) => props7.hide && { display: "none" },
+    width: ({ props: props7 }) => props7.width && (0, import_scratch.getSpacingBasedOnRatio)(props7, "width"),
+    height: ({ props: props7 }) => props7.height && (0, import_scratch.getSpacingBasedOnRatio)(props7, "height"),
+    boxSize: ({ props: props7 }) => {
+      if (typeof props7.boxSize !== "string")
         return;
-      const [height, width] = props4.boxSize.split(" ");
+      const [height, width] = props7.boxSize.split(" ");
       return {
         ...(0, import_scratch.getSpacingByKey)(height, "height"),
         ...(0, import_scratch.getSpacingByKey)(width || height, "width")
       };
     },
-    maxWidth: ({ props: props4 }) => props4.maxWidth && (0, import_scratch.getSpacingBasedOnRatio)(props4, "maxWidth"),
-    minWidth: ({ props: props4 }) => props4.minWidth && (0, import_scratch.getSpacingBasedOnRatio)(props4, "minWidth"),
-    widthRange: ({ props: props4 }) => {
-      if (typeof props4.widthRange !== "string")
+    maxWidth: ({ props: props7 }) => props7.maxWidth && (0, import_scratch.getSpacingBasedOnRatio)(props7, "maxWidth"),
+    minWidth: ({ props: props7 }) => props7.minWidth && (0, import_scratch.getSpacingBasedOnRatio)(props7, "minWidth"),
+    widthRange: ({ props: props7 }) => {
+      if (typeof props7.widthRange !== "string")
         return;
-      const [minWidth, maxWidth] = props4.widthRange.split(" ");
+      const [minWidth, maxWidth] = props7.widthRange.split(" ");
       return {
         ...(0, import_scratch.getSpacingByKey)(minWidth, "minWidth"),
         ...(0, import_scratch.getSpacingByKey)(maxWidth || minWidth, "maxWidth")
       };
     },
-    maxHeight: ({ props: props4 }) => props4.maxHeight && (0, import_scratch.getSpacingBasedOnRatio)(props4, "maxHeight"),
-    minHeight: ({ props: props4 }) => props4.minHeight && (0, import_scratch.getSpacingBasedOnRatio)(props4, "minHeight"),
-    heightRange: ({ props: props4 }) => {
-      if (typeof props4.heightRange !== "string")
+    maxHeight: ({ props: props7 }) => props7.maxHeight && (0, import_scratch.getSpacingBasedOnRatio)(props7, "maxHeight"),
+    minHeight: ({ props: props7 }) => props7.minHeight && (0, import_scratch.getSpacingBasedOnRatio)(props7, "minHeight"),
+    heightRange: ({ props: props7 }) => {
+      if (typeof props7.heightRange !== "string")
         return;
-      const [minHeight, maxHeight] = props4.heightRange.split(" ");
+      const [minHeight, maxHeight] = props7.heightRange.split(" ");
       return {
         ...(0, import_scratch.getSpacingByKey)(minHeight, "minHeight"),
         ...(0, import_scratch.getSpacingByKey)(maxHeight || minHeight, "maxHeight")
       };
     },
-    direction: ({ props: props4 }) => props4.direction && { direction: props4.direction },
-    aspectRatio: ({ props: props4 }) => props4.aspectRatio && { aspectRatio: props4.aspectRatio },
-    borderWidth: ({ props: props4 }) => props4.borderWidth ? (0, import_scratch.getSpacingBasedOnRatio)(props4, "borderWidth") : null,
-    padding: ({ props: props4 }) => props4.padding ? (0, import_scratch.getSpacingBasedOnRatio)(props4, "padding") : null,
-    paddingInline: ({ props: props4 }) => {
-      if (typeof props4.paddingInline !== "string")
+    direction: ({ props: props7 }) => props7.direction && { direction: props7.direction },
+    aspectRatio: ({ props: props7 }) => props7.aspectRatio && { aspectRatio: props7.aspectRatio },
+    borderWidth: ({ props: props7 }) => props7.borderWidth ? (0, import_scratch.getSpacingBasedOnRatio)(props7, "borderWidth") : null,
+    padding: ({ props: props7 }) => props7.padding ? (0, import_scratch.getSpacingBasedOnRatio)(props7, "padding") : null,
+    paddingInline: ({ props: props7 }) => {
+      if (typeof props7.paddingInline !== "string")
         return;
-      const [paddingInlineStart, paddingInlineEnd] = props4.paddingInline.split(" ");
+      const [paddingInlineStart, paddingInlineEnd] = props7.paddingInline.split(" ");
       return {
         ...(0, import_scratch.getSpacingByKey)(paddingInlineStart, "paddingInlineStart"),
         ...(0, import_scratch.getSpacingByKey)(paddingInlineEnd || paddingInlineStart, "paddingInlineEnd")
       };
     },
-    paddingBlock: ({ props: props4 }) => {
-      if (typeof props4.paddingBlock !== "string")
+    paddingBlock: ({ props: props7 }) => {
+      if (typeof props7.paddingBlock !== "string")
         return;
-      const [paddingBlockStart, paddingBlockEnd] = props4.paddingBlock.split(" ");
+      const [paddingBlockStart, paddingBlockEnd] = props7.paddingBlock.split(" ");
       return {
         ...(0, import_scratch.getSpacingByKey)(paddingBlockStart, "paddingBlockStart"),
         ...(0, import_scratch.getSpacingByKey)(paddingBlockEnd || paddingBlockStart, "paddingBlockEnd")
       };
     },
-    paddingInlineStart: ({ props: props4 }) => props4.paddingInlineStart ? (0, import_scratch.getSpacingBasedOnRatio)(props4, "paddingInlineStart") : null,
-    paddingInlineEnd: ({ props: props4 }) => props4.paddingInlineEnd ? (0, import_scratch.getSpacingBasedOnRatio)(props4, "paddingInlineEnd") : null,
-    paddingBlockStart: ({ props: props4 }) => props4.paddingBlockStart ? (0, import_scratch.getSpacingBasedOnRatio)(props4, "paddingBlockStart") : null,
-    paddingBlockEnd: ({ props: props4 }) => props4.paddingBlockEnd ? (0, import_scratch.getSpacingBasedOnRatio)(props4, "paddingBlockEnd") : null,
-    margin: ({ props: props4 }) => props4.margin ? (0, import_scratch.getSpacingBasedOnRatio)(props4, "margin") : null,
-    marginInline: ({ props: props4 }) => {
-      if (typeof props4.marginInline !== "string")
+    paddingInlineStart: ({ props: props7 }) => props7.paddingInlineStart ? (0, import_scratch.getSpacingBasedOnRatio)(props7, "paddingInlineStart") : null,
+    paddingInlineEnd: ({ props: props7 }) => props7.paddingInlineEnd ? (0, import_scratch.getSpacingBasedOnRatio)(props7, "paddingInlineEnd") : null,
+    paddingBlockStart: ({ props: props7 }) => props7.paddingBlockStart ? (0, import_scratch.getSpacingBasedOnRatio)(props7, "paddingBlockStart") : null,
+    paddingBlockEnd: ({ props: props7 }) => props7.paddingBlockEnd ? (0, import_scratch.getSpacingBasedOnRatio)(props7, "paddingBlockEnd") : null,
+    margin: ({ props: props7 }) => props7.margin ? (0, import_scratch.getSpacingBasedOnRatio)(props7, "margin") : null,
+    marginInline: ({ props: props7 }) => {
+      if (typeof props7.marginInline !== "string")
         return;
-      const [marginInlineStart, marginInlineEnd] = props4.marginInline.split(" ");
+      const [marginInlineStart, marginInlineEnd] = props7.marginInline.split(" ");
       return {
         ...(0, import_scratch.getSpacingByKey)(marginInlineStart, "marginInlineStart"),
         ...(0, import_scratch.getSpacingByKey)(marginInlineEnd || marginInlineStart, "marginInlineEnd")
       };
     },
-    marginBlock: ({ props: props4 }) => {
-      if (typeof props4.marginBlock !== "string")
+    marginBlock: ({ props: props7 }) => {
+      if (typeof props7.marginBlock !== "string")
         return;
-      const [marginBlockStart, marginBlockEnd] = props4.marginBlock.split(" ");
+      const [marginBlockStart, marginBlockEnd] = props7.marginBlock.split(" ");
       return {
         ...(0, import_scratch.getSpacingByKey)(marginBlockStart, "marginBlockStart"),
         ...(0, import_scratch.getSpacingByKey)(marginBlockEnd || marginBlockStart, "marginBlockEnd")
       };
     },
-    marginInlineStart: ({ props: props4 }) => props4.marginInlineStart ? (0, import_scratch.getSpacingBasedOnRatio)(props4, "marginInlineStart") : null,
-    marginInlineEnd: ({ props: props4 }) => props4.marginInlineEnd ? (0, import_scratch.getSpacingBasedOnRatio)(props4, "marginInlineEnd") : null,
-    marginBlockStart: ({ props: props4 }) => props4.marginBlockStart ? (0, import_scratch.getSpacingBasedOnRatio)(props4, "marginBlockStart") : null,
-    marginBlockEnd: ({ props: props4 }) => props4.marginBlockEnd ? (0, import_scratch.getSpacingBasedOnRatio)(props4, "marginBlockEnd") : null,
-    gap: ({ props: props4 }) => props4.gap ? {
-      gap: (0, import_scratch.transfromGap)(props4.gap)
+    marginInlineStart: ({ props: props7 }) => props7.marginInlineStart ? (0, import_scratch.getSpacingBasedOnRatio)(props7, "marginInlineStart") : null,
+    marginInlineEnd: ({ props: props7 }) => props7.marginInlineEnd ? (0, import_scratch.getSpacingBasedOnRatio)(props7, "marginInlineEnd") : null,
+    marginBlockStart: ({ props: props7 }) => props7.marginBlockStart ? (0, import_scratch.getSpacingBasedOnRatio)(props7, "marginBlockStart") : null,
+    marginBlockEnd: ({ props: props7 }) => props7.marginBlockEnd ? (0, import_scratch.getSpacingBasedOnRatio)(props7, "marginBlockEnd") : null,
+    gap: ({ props: props7 }) => props7.gap ? {
+      gap: (0, import_scratch.transfromGap)(props7.gap)
     } : null,
-    gridArea: ({ props: props4 }) => props4.gridArea && { gridArea: props4.gridArea },
-    flex: ({ props: props4 }) => props4.flex && { flex: props4.flex },
-    flexDirection: ({ props: props4 }) => props4.flexDirection && { flexDirection: props4.flexDirection },
-    alignItems: ({ props: props4 }) => props4.alignItems && { alignItems: props4.alignItems },
-    alignContent: ({ props: props4 }) => props4.alignContent && { alignContent: props4.alignContent },
-    justifyContent: ({ props: props4 }) => props4.justifyContent && { justifyContent: props4.justifyContent },
-    justifyItems: ({ props: props4 }) => props4.justifyItems && { justifyItems: props4.justifyItems },
-    alignSelf: ({ props: props4 }) => props4.alignSelf && { alignSelf: props4.alignSelf },
-    order: ({ props: props4 }) => props4.order && { order: props4.order },
-    flexWrap: ({ props: props4 }) => props4.flexWrap && {
+    gridArea: ({ props: props7 }) => props7.gridArea && { gridArea: props7.gridArea },
+    flex: ({ props: props7 }) => props7.flex && { flex: props7.flex },
+    flexDirection: ({ props: props7 }) => props7.flexDirection && { flexDirection: props7.flexDirection },
+    alignItems: ({ props: props7 }) => props7.alignItems && { alignItems: props7.alignItems },
+    alignContent: ({ props: props7 }) => props7.alignContent && { alignContent: props7.alignContent },
+    justifyContent: ({ props: props7 }) => props7.justifyContent && { justifyContent: props7.justifyContent },
+    justifyItems: ({ props: props7 }) => props7.justifyItems && { justifyItems: props7.justifyItems },
+    alignSelf: ({ props: props7 }) => props7.alignSelf && { alignSelf: props7.alignSelf },
+    order: ({ props: props7 }) => props7.order && { order: props7.order },
+    flexWrap: ({ props: props7 }) => props7.flexWrap && {
       display: "flex",
-      flexFlow: props4.flexWrap
+      flexFlow: props7.flexWrap
     },
-    flexFlow: ({ props: props4 }) => props4.flexFlow && {
+    flexFlow: ({ props: props7 }) => props7.flexFlow && {
       display: "flex",
-      flexFlow: props4.flexFlow
+      flexFlow: props7.flexFlow
     },
-    flexAlign: ({ props: props4 }) => {
-      if (typeof props4.flexAlign !== "string")
+    flexAlign: ({ props: props7 }) => {
+      if (typeof props7.flexAlign !== "string")
         return;
-      const [alignItems, justifyContent] = props4.flexAlign.split(" ");
+      const [alignItems, justifyContent] = props7.flexAlign.split(" ");
       return {
         display: "flex",
         alignItems,
         justifyContent
       };
     },
-    gridColumn: ({ props: props4 }) => props4.gridColumn && { gridColumn: props4.gridColumn },
-    gridColumnStart: ({ props: props4 }) => props4.columnStart ? {
-      gridColumnStart: props4.columnStart
+    gridColumn: ({ props: props7 }) => props7.gridColumn && { gridColumn: props7.gridColumn },
+    gridColumnStart: ({ props: props7 }) => props7.columnStart ? {
+      gridColumnStart: props7.columnStart
     } : null,
-    gridRow: ({ props: props4 }) => props4.gridRow && { gridRow: props4.gridRow },
-    gridRowStart: ({ props: props4 }) => props4.rowStart ? { gridRowStart: props4.rowStart } : null,
-    size: ({ props: props4 }) => {
-      if (typeof props4.heightRange !== "string")
+    gridRow: ({ props: props7 }) => props7.gridRow && { gridRow: props7.gridRow },
+    gridRowStart: ({ props: props7 }) => props7.rowStart ? { gridRowStart: props7.rowStart } : null,
+    size: ({ props: props7 }) => {
+      if (typeof props7.heightRange !== "string")
         return;
-      const [minHeight, maxHeight] = props4.heightRange.split(" ");
+      const [minHeight, maxHeight] = props7.heightRange.split(" ");
       return {
         ...(0, import_scratch.getSpacingByKey)(minHeight, "minHeight"),
         ...(0, import_scratch.getSpacingByKey)(maxHeight || minHeight, "maxHeight")
       };
     },
-    columns: ({ props: props4 }) => props4.columns && { columns: props4.columns },
-    columnGap: ({ props: props4 }) => props4.columnGap ? (0, import_scratch.getSpacingBasedOnRatio)(props4, "columnGap") : null,
-    columnSpan: ({ props: props4 }) => props4.columnSpan && { columns: props4.columnSpan },
-    columnFill: ({ props: props4 }) => props4.columnFill && { columns: props4.columnFill },
-    columnCount: ({ props: props4 }) => props4.columnCount && { columns: props4.columnCount }
+    columns: ({ props: props7 }) => props7.columns && { columns: props7.columns },
+    columnGap: ({ props: props7 }) => props7.columnGap ? (0, import_scratch.getSpacingBasedOnRatio)(props7, "columnGap") : null,
+    columnSpan: ({ props: props7 }) => props7.columnSpan && { columns: props7.columnSpan },
+    columnFill: ({ props: props7 }) => props7.columnFill && { columns: props7.columnFill },
+    columnCount: ({ props: props7 }) => props7.columnCount && { columns: props7.columnCount }
   }
 };
 var Span = { tag: "span" };
@@ -10142,7 +10152,7 @@ var Direction = {
     direction: "ltr"
   },
   class: {
-    direction: ({ props: props4 }) => ({ direction: props4.direction })
+    direction: ({ props: props7 }) => ({ direction: props7.direction })
   }
 };
 
@@ -10152,12 +10162,12 @@ var Flex = {
     display: "flex"
   },
   class: {
-    flow: ({ props: props4 }) => props4.flow && { flexFlow: props4.flow },
-    wrap: ({ props: props4 }) => props4.wrap && { flexWrap: props4.wrap },
-    align: ({ props: props4 }) => {
-      if (typeof props4.align !== "string")
+    flow: ({ props: props7 }) => props7.flow && { flexFlow: props7.flow },
+    wrap: ({ props: props7 }) => props7.wrap && { flexWrap: props7.wrap },
+    align: ({ props: props7 }) => {
+      if (typeof props7.align !== "string")
         return;
-      const [alignItems, justifyContent] = props4.align.split(" ");
+      const [alignItems, justifyContent] = props7.align.split(" ");
       return { alignItems, justifyContent };
     }
   }
@@ -10168,22 +10178,22 @@ var import_scratch2 = __toESM(require_cjs());
 var Grid = {
   props: { display: "grid" },
   class: {
-    area: ({ props: props4 }) => props4.area ? { gridArea: props4.area } : null,
-    template: ({ props: props4 }) => props4.template ? { gridTemplate: props4.template } : null,
-    templateAreas: ({ props: props4 }) => props4.templateAreas ? { gridTemplateAreas: props4.templateAreas } : null,
-    column: ({ props: props4 }) => props4.column ? { gridColumn: props4.column } : null,
-    columns: ({ props: props4 }) => props4.columns ? { gridTemplateColumns: props4.columns } : null,
-    templateColumns: ({ props: props4 }) => props4.templateColumns ? { gridTemplateColumns: props4.templateColumns } : null,
-    autoColumns: ({ props: props4 }) => props4.autoColumns ? { gridAutoColumns: props4.autoColumns } : null,
-    columnStart: ({ props: props4 }) => props4.columnStart ? { gridColumnStart: props4.columnStart } : null,
-    row: ({ props: props4 }) => props4.row ? { gridRow: props4.row } : null,
-    rows: ({ props: props4 }) => props4.rows ? { gridTemplateRows: props4.rows } : null,
-    templateRows: ({ props: props4 }) => props4.templateRows ? { gridTemplateRows: props4.templateRows } : null,
-    autoRows: ({ props: props4 }) => props4.autoRows ? { gridAutoRows: props4.autoRows } : null,
-    rowStart: ({ props: props4 }) => props4.rowStart ? { gridRowStart: props4.rowStart } : null,
-    autoFlow: ({ props: props4 }) => props4.autoFlow ? { gridAutoFlow: props4.autoFlow } : null,
-    columnGap: ({ props: props4 }) => props4.columnGap ? (0, import_scratch2.getSpacingBasedOnRatio)(props4, "columnGap") : null,
-    rowGap: ({ props: props4 }) => props4.rowGap ? (0, import_scratch2.getSpacingBasedOnRatio)(props4, "rowGap") : null
+    area: ({ props: props7 }) => props7.area ? { gridArea: props7.area } : null,
+    template: ({ props: props7 }) => props7.template ? { gridTemplate: props7.template } : null,
+    templateAreas: ({ props: props7 }) => props7.templateAreas ? { gridTemplateAreas: props7.templateAreas } : null,
+    column: ({ props: props7 }) => props7.column ? { gridColumn: props7.column } : null,
+    columns: ({ props: props7 }) => props7.columns ? { gridTemplateColumns: props7.columns } : null,
+    templateColumns: ({ props: props7 }) => props7.templateColumns ? { gridTemplateColumns: props7.templateColumns } : null,
+    autoColumns: ({ props: props7 }) => props7.autoColumns ? { gridAutoColumns: props7.autoColumns } : null,
+    columnStart: ({ props: props7 }) => props7.columnStart ? { gridColumnStart: props7.columnStart } : null,
+    row: ({ props: props7 }) => props7.row ? { gridRow: props7.row } : null,
+    rows: ({ props: props7 }) => props7.rows ? { gridTemplateRows: props7.rows } : null,
+    templateRows: ({ props: props7 }) => props7.templateRows ? { gridTemplateRows: props7.templateRows } : null,
+    autoRows: ({ props: props7 }) => props7.autoRows ? { gridAutoRows: props7.autoRows } : null,
+    rowStart: ({ props: props7 }) => props7.rowStart ? { gridRowStart: props7.rowStart } : null,
+    autoFlow: ({ props: props7 }) => props7.autoFlow ? { gridAutoFlow: props7.autoFlow } : null,
+    columnGap: ({ props: props7 }) => props7.columnGap ? (0, import_scratch2.getSpacingBasedOnRatio)(props7, "columnGap") : null,
+    rowGap: ({ props: props7 }) => props7.rowGap ? (0, import_scratch2.getSpacingBasedOnRatio)(props7, "rowGap") : null
   }
 };
 
@@ -10196,9 +10206,9 @@ var Img = {
     title: ""
   },
   attr: {
-    src: ({ props: props4 }) => props4.src,
-    alt: ({ props: props4 }) => props4.alt,
-    title: ({ props: props4 }) => props4.title || props4.alt
+    src: ({ props: props7 }) => props7.src,
+    alt: ({ props: props7 }) => props7.alt,
+    title: ({ props: props7 }) => props7.title || props7.alt
   }
 };
 
@@ -10207,9 +10217,9 @@ var Form = {
   tag: "form",
   props: {},
   attr: {
-    action: ({ props: props4 }) => props4.action,
-    method: ({ props: props4 }) => props4.method,
-    enctype: ({ props: props4 }) => props4.enctype
+    action: ({ props: props7 }) => props7.action,
+    method: ({ props: props7 }) => props7.method,
+    enctype: ({ props: props7 }) => props7.enctype
   }
 };
 
@@ -10226,24 +10236,24 @@ var import_scratch4 = __toESM(require_cjs());
 var import_scratch3 = __toESM(require_cjs());
 var Timing = {
   class: {
-    transition: ({ props: props4 }) => props4.transition && {
-      transition: (0, import_scratch3.splitTransition)(props4.transition)
+    transition: ({ props: props7 }) => props7.transition && {
+      transition: (0, import_scratch3.splitTransition)(props7.transition)
     },
-    willChange: ({ props: props4 }) => props4.willChange && {
-      willChange: props4.willChange
+    willChange: ({ props: props7 }) => props7.willChange && {
+      willChange: props7.willChange
     },
-    transitionDuration: ({ props: props4 }) => props4.transitionDuration && {
-      transitionDuration: (0, import_scratch3.transformDuration)(props4.transitionDuration)
+    transitionDuration: ({ props: props7 }) => props7.transitionDuration && {
+      transitionDuration: (0, import_scratch3.transformDuration)(props7.transitionDuration)
     },
-    transitionDelay: ({ props: props4 }) => props4.transitionDelay && {
-      transitionDelay: (0, import_scratch3.transformDuration)(props4.transitionDelay)
+    transitionDelay: ({ props: props7 }) => props7.transitionDelay && {
+      transitionDelay: (0, import_scratch3.transformDuration)(props7.transitionDelay)
     },
-    transitionTimingFunction: ({ props: props4 }) => props4.transitionTimingFunction && {
-      transitionTimingFunction: (0, import_scratch3.getTimingFunction)(props4.transitionTimingFunction)
+    transitionTimingFunction: ({ props: props7 }) => props7.transitionTimingFunction && {
+      transitionTimingFunction: (0, import_scratch3.getTimingFunction)(props7.transitionTimingFunction)
     },
-    transitionProperty: ({ props: props4 }) => props4.transitionProperty && {
-      transitionProperty: props4.transitionProperty,
-      willChange: props4.transitionProperty
+    transitionProperty: ({ props: props7 }) => props7.transitionProperty && {
+      transitionProperty: props7.transitionProperty,
+      willChange: props7.transitionProperty
     }
   }
 };
@@ -10258,11 +10268,11 @@ var depth = {
   26: { boxShadow: `rgba(0,0,0,.10) 0 14${CONFIG.UNIT.default} 26${CONFIG.UNIT.default}` },
   42: { boxShadow: `rgba(0,0,0,.10) 0 20${CONFIG.UNIT.default} 42${CONFIG.UNIT.default}` }
 };
-var getComputedBackgroundColor = ({ props: props4 }) => {
-  return (0, import_scratch4.getColor)(props4.shapeDirectionColor) || (0, import_scratch4.getColor)(props4.borderColor) || (0, import_scratch4.getColor)(props4.backgroundColor) || (0, import_scratch4.getColor)(props4.background);
+var getComputedBackgroundColor = ({ props: props7 }) => {
+  return (0, import_scratch4.getColor)(props7.shapeDirectionColor) || (0, import_scratch4.getColor)(props7.borderColor) || (0, import_scratch4.getColor)(props7.backgroundColor) || (0, import_scratch4.getColor)(props7.background);
 };
-var inheritTransition = ({ props: props4 }) => {
-  const exec5 = Timing.class.transition({ props: props4 });
+var inheritTransition = ({ props: props7 }) => {
+  const exec5 = Timing.class.transition({ props: props7 });
   return exec5 && exec5.transition;
 };
 var SHAPES = {
@@ -10272,16 +10282,16 @@ var SHAPES = {
   tv: {
     borderRadius: "1.15em/2.5em"
   },
-  tooltip: ({ props: props4 }) => ({
-    position: props4.position || "relative",
+  tooltip: ({ props: props7 }) => ({
+    position: props7.position || "relative",
     "&:before": {
       content: '""',
       display: "block",
       width: "0px",
       height: "0px",
       border: ".35em solid",
-      borderColor: getComputedBackgroundColor({ props: props4 }),
-      transition: inheritTransition({ props: props4 }),
+      borderColor: getComputedBackgroundColor({ props: props7 }),
+      transition: inheritTransition({ props: props7 }),
       transitionProperty: "border-color",
       position: "absolute",
       borderRadius: ".15em"
@@ -10317,13 +10327,13 @@ var SHAPES = {
       }
     }
   },
-  tag: ({ props: props4 }) => ({
+  tag: ({ props: props7 }) => ({
     position: "relative",
     "&:before": {
       content: '""',
       display: "block",
-      background: getComputedBackgroundColor({ props: props4 }),
-      transition: inheritTransition({ props: props4 }),
+      background: getComputedBackgroundColor({ props: props7 }),
+      transition: inheritTransition({ props: props7 }),
       transitionProperty: "background",
       borderRadius: ".25em",
       position: "absolute",
@@ -10364,7 +10374,7 @@ var SHAPES = {
       }
     }
   },
-  hexagon: ({ props: props4 }) => ({
+  hexagon: ({ props: props7 }) => ({
     position: "relative",
     "&:before, &:after": {
       content: '""',
@@ -10376,8 +10386,8 @@ var SHAPES = {
       top: "50%",
       transformOrigin: "50% 50%",
       height: "73%",
-      background: getComputedBackgroundColor({ props: props4 }),
-      transition: inheritTransition({ props: props4 }),
+      background: getComputedBackgroundColor({ props: props7 }),
+      transition: inheritTransition({ props: props7 }),
       transitionProperty: "background"
     },
     "&:before": {
@@ -10389,7 +10399,7 @@ var SHAPES = {
       transform: "translate3d(-50%, -50%, 1px) rotate(45deg)"
     }
   }),
-  chevron: ({ props: props4 }) => ({
+  chevron: ({ props: props7 }) => ({
     position: "relative",
     // overflow: 'hidden',
     "&:before, &:after": {
@@ -10400,14 +10410,14 @@ var SHAPES = {
       aspectRatio: "1/1",
       top: "50%",
       transformOrigin: "50% 50%",
-      transition: inheritTransition({ props: props4 }),
+      transition: inheritTransition({ props: props7 }),
       transitionProperty: "background"
     },
     "&:before": {
-      background: `linear-gradient(225deg, ${getComputedBackgroundColor({ props: props4 })} 25%, transparent 25%), linear-gradient(315deg, ${getComputedBackgroundColor({ props: props4 })} 25%, transparent 25%)`
+      background: `linear-gradient(225deg, ${getComputedBackgroundColor({ props: props7 })} 25%, transparent 25%), linear-gradient(315deg, ${getComputedBackgroundColor({ props: props7 })} 25%, transparent 25%)`
     },
     "&:after": {
-      background: getComputedBackgroundColor({ props: props4 }),
+      background: getComputedBackgroundColor({ props: props7 }),
       borderRadius: ".25em"
     }
   }),
@@ -10446,153 +10456,153 @@ var getSystemTheme = ({ context, state }) => {
 };
 var Theme = {
   class: {
-    depth: ({ props: props4 }) => props4.depth && depth[props4.depth],
+    depth: ({ props: props7 }) => props7.depth && depth[props7.depth],
     theme: (element) => {
-      const { props: props4 } = element;
+      const { props: props7 } = element;
       const globalTheme = getSystemTheme(element);
-      if (!props4.theme)
+      if (!props7.theme)
         return;
-      return (0, import_scratch5.getMediaTheme)(props4.theme, `@${props4.themeModifier || globalTheme}`);
+      return (0, import_scratch5.getMediaTheme)(props7.theme, `@${props7.themeModifier || globalTheme}`);
     },
     color: (element) => {
-      const { props: props4 } = element;
+      const { props: props7 } = element;
       const globalTheme = getSystemTheme(element);
-      if (!props4.color)
+      if (!props7.color)
         return;
       return {
-        color: (0, import_scratch5.getMediaColor)(props4.color, globalTheme)
+        color: (0, import_scratch5.getMediaColor)(props7.color, globalTheme)
       };
     },
     background: (element) => {
-      const { props: props4 } = element;
+      const { props: props7 } = element;
       const globalTheme = getSystemTheme(element);
-      if (!props4.background)
+      if (!props7.background)
         return;
       return {
-        background: (0, import_scratch5.getMediaColor)(props4.background, globalTheme)
+        background: (0, import_scratch5.getMediaColor)(props7.background, globalTheme)
       };
     },
     backgroundColor: (element) => {
-      const { props: props4 } = element;
+      const { props: props7 } = element;
       const globalTheme = getSystemTheme(element);
-      if (!props4.backgroundColor)
+      if (!props7.backgroundColor)
         return;
       return {
-        backgroundColor: (0, import_scratch5.getMediaColor)(props4.backgroundColor, globalTheme)
+        backgroundColor: (0, import_scratch5.getMediaColor)(props7.backgroundColor, globalTheme)
       };
     },
     backgroundImage: (element) => {
-      const { props: props4 } = element;
+      const { props: props7 } = element;
       const globalTheme = getSystemTheme(element);
-      if (!props4.backgroundImage)
+      if (!props7.backgroundImage)
         return;
       return {
-        backgroundImage: (0, import_scratch5.transformBackgroundImage)(props4.backgroundImage, globalTheme)
+        backgroundImage: (0, import_scratch5.transformBackgroundImage)(props7.backgroundImage, globalTheme)
       };
     },
-    backgroundSize: ({ props: props4 }) => props4.backgroundSize ? {
-      backgroundSize: props4.backgroundSize
+    backgroundSize: ({ props: props7 }) => props7.backgroundSize ? {
+      backgroundSize: props7.backgroundSize
     } : null,
-    backgroundPosition: ({ props: props4 }) => props4.backgroundPosition ? {
-      backgroundPosition: props4.backgroundPosition
+    backgroundPosition: ({ props: props7 }) => props7.backgroundPosition ? {
+      backgroundPosition: props7.backgroundPosition
     } : null,
-    textStroke: ({ props: props4 }) => props4.textStroke ? {
-      WebkitTextStroke: (0, import_scratch5.transformTextStroke)(props4.textStroke)
+    textStroke: ({ props: props7 }) => props7.textStroke ? {
+      WebkitTextStroke: (0, import_scratch5.transformTextStroke)(props7.textStroke)
     } : null,
-    outline: ({ props: props4 }) => props4.outline && {
-      outline: (0, import_scratch5.transformBorder)(props4.outline)
+    outline: ({ props: props7 }) => props7.outline && {
+      outline: (0, import_scratch5.transformBorder)(props7.outline)
     },
-    border: ({ props: props4 }) => props4.border && {
-      border: (0, import_scratch5.transformBorder)(props4.border)
+    border: ({ props: props7 }) => props7.border && {
+      border: (0, import_scratch5.transformBorder)(props7.border)
     },
-    borderColor: ({ props: props4 }) => props4.borderColor && {
-      borderColor: (0, import_scratch5.getMediaColor)(props4.borderColor)
+    borderColor: ({ props: props7 }) => props7.borderColor && {
+      borderColor: (0, import_scratch5.getMediaColor)(props7.borderColor)
     },
-    borderStyle: ({ props: props4 }) => props4.borderStyle && {
-      borderStyle: props4.borderStyle
+    borderStyle: ({ props: props7 }) => props7.borderStyle && {
+      borderStyle: props7.borderStyle
     },
-    borderLeft: ({ props: props4 }) => props4.borderLeft && {
-      borderLeft: (0, import_scratch5.transformBorder)(props4.borderLeft)
+    borderLeft: ({ props: props7 }) => props7.borderLeft && {
+      borderLeft: (0, import_scratch5.transformBorder)(props7.borderLeft)
     },
-    borderTop: ({ props: props4 }) => props4.borderTop && {
-      borderTop: (0, import_scratch5.transformBorder)(props4.borderTop)
+    borderTop: ({ props: props7 }) => props7.borderTop && {
+      borderTop: (0, import_scratch5.transformBorder)(props7.borderTop)
     },
-    borderRight: ({ props: props4 }) => props4.borderRight && {
-      borderRight: (0, import_scratch5.transformBorder)(props4.borderRight)
+    borderRight: ({ props: props7 }) => props7.borderRight && {
+      borderRight: (0, import_scratch5.transformBorder)(props7.borderRight)
     },
-    borderBottom: ({ props: props4 }) => props4.borderBottom && {
-      borderBottom: (0, import_scratch5.transformBorder)(props4.borderBottom)
+    borderBottom: ({ props: props7 }) => props7.borderBottom && {
+      borderBottom: (0, import_scratch5.transformBorder)(props7.borderBottom)
     },
-    boxShadow: ({ props: props4 }) => props4.boxShadow && {
-      boxShadow: (0, import_scratch5.transformShadow)(props4.boxShadow)
+    boxShadow: ({ props: props7 }) => props7.boxShadow && {
+      boxShadow: (0, import_scratch5.transformShadow)(props7.boxShadow)
     },
-    textShadow: ({ props: props4 }) => props4.textShadow && {
-      textShadow: (0, import_scratch5.transformShadow)(props4.textShadow)
+    textShadow: ({ props: props7 }) => props7.textShadow && {
+      textShadow: (0, import_scratch5.transformShadow)(props7.textShadow)
     },
-    opacity: ({ props: props4 }) => props4.opacity && {
-      opacity: props4.opacity
+    opacity: ({ props: props7 }) => props7.opacity && {
+      opacity: props7.opacity
     },
-    visibility: ({ props: props4 }) => props4.visibility && {
-      visibility: props4.visibility
+    visibility: ({ props: props7 }) => props7.visibility && {
+      visibility: props7.visibility
     },
-    columnRule: ({ props: props4 }) => props4.columnRule && {
-      columnRule: (0, import_scratch5.transformBorder)(props4.columnRule)
+    columnRule: ({ props: props7 }) => props7.columnRule && {
+      columnRule: (0, import_scratch5.transformBorder)(props7.columnRule)
     }
   }
 };
 
 // Atoms/Media.js
 var keySetters = {
-  "@": (key, props4, result, element, isSubtree) => applyMediaProps(
+  "@": (key, props7, result, element, isSubtree) => applyMediaProps(
     key,
-    props4,
+    props7,
     isSubtree ? result : result && result.media,
     element
   ),
-  ":": (key, props4, result, element, isSubtree) => applySelectorProps(
+  ":": (key, props7, result, element, isSubtree) => applySelectorProps(
     key,
-    props4,
+    props7,
     isSubtree ? result : result && result.selector,
     element
   ),
-  "[": (key, props4, result, element, isSubtree) => applySelectorProps(
+  "[": (key, props7, result, element, isSubtree) => applySelectorProps(
     key,
-    props4,
+    props7,
     isSubtree ? result : result && result.selector,
     element
   ),
-  "&": (key, props4, result, element, isSubtree) => applySelectorProps(
+  "&": (key, props7, result, element, isSubtree) => applySelectorProps(
     key,
-    props4,
+    props7,
     isSubtree ? result : result && result.selector,
     element
   ),
-  $: (key, props4, result, element, isSubtree) => applyCaseProps(
+  $: (key, props7, result, element, isSubtree) => applyCaseProps(
     key,
-    props4,
+    props7,
     isSubtree ? result : result && result.case,
     element
   ),
-  ".": (key, props4, result, element, isSubtree) => applyConditionalCaseProps(
+  ".": (key, props7, result, element, isSubtree) => applyConditionalCaseProps(
     key,
-    props4,
+    props7,
     isSubtree ? result : result && result.case,
     element
   ),
-  "!": (key, props4, result, element, isSubtree) => applyConditionalFalsyProps(
+  "!": (key, props7, result, element, isSubtree) => applyConditionalFalsyProps(
     key,
-    props4,
+    props7,
     isSubtree ? result : result && result.case,
     element
   )
 };
-var execClass = (key, props4, result, element) => {
+var execClass = (key, props7, result, element) => {
   const { class: className } = element;
   const classnameExec = className[key];
   if (typeof classnameExec !== "function")
     return;
   let classExec = classnameExec({
-    props: props4,
+    props: props7,
     context: element.context,
     state: element.state
   });
@@ -10604,27 +10614,27 @@ var execClass = (key, props4, result, element) => {
   }
   return classExec;
 };
-var convertPropsToClass = (props4, result, element) => {
+var convertPropsToClass = (props7, result, element) => {
   const propsClassObj = {};
-  for (const key in props4) {
+  for (const key in props7) {
     const setter = keySetters[key.slice(0, 1)];
     if (setter) {
-      setter(key, props4[key], propsClassObj, element, true);
+      setter(key, props7[key], propsClassObj, element, true);
       continue;
     } else {
-      execClass(key, props4, propsClassObj, element);
+      execClass(key, props7, propsClassObj, element);
     }
   }
   return propsClassObj;
 };
-var applyMediaProps = (key, props4, result, element) => {
+var applyMediaProps = (key, props7, result, element) => {
   const { context } = element;
   if (!context.designSystem || !context.designSystem.MEDIA)
     return;
   const globalTheme = getSystemTheme(element);
   const { MEDIA } = context.designSystem;
   const mediaName = MEDIA[key.slice(1)];
-  const generatedClass = convertPropsToClass(props4, result, element);
+  const generatedClass = convertPropsToClass(props7, result, element);
   const name = key.slice(1);
   const isTheme = ["dark", "light"].includes(name);
   const matchesGlobal = name === globalTheme;
@@ -10637,49 +10647,49 @@ var applyMediaProps = (key, props4, result, element) => {
   result[mediaKey] = generatedClass;
   return result[mediaKey];
 };
-var applySelectorProps = (key, props4, result, element) => {
+var applySelectorProps = (key, props7, result, element) => {
   const selectorKey = `&${key}`;
-  result[selectorKey] = convertPropsToClass(props4, result, element);
+  result[selectorKey] = convertPropsToClass(props7, result, element);
   return result[selectorKey];
 };
-var applyCaseProps = (key, props4, result, element) => {
+var applyCaseProps = (key, props7, 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_utils.merge)(result, convertPropsToClass(props4, result, element));
+  return (0, import_utils.merge)(result, convertPropsToClass(props7, result, element));
 };
-var applyConditionalCaseProps = (key, props4, result, element) => {
+var applyConditionalCaseProps = (key, props7, result, element) => {
   const caseKey = key.slice(1);
   const isPropTrue = element.props[caseKey] || element.state[caseKey];
   if (!isPropTrue)
     return;
-  return (0, import_utils.merge)(result, convertPropsToClass(props4, result, element));
+  return (0, import_utils.merge)(result, convertPropsToClass(props7, result, element));
 };
-var applyConditionalFalsyProps = (key, props4, result, element) => {
+var applyConditionalFalsyProps = (key, props7, result, element) => {
   const caseKey = key.slice(1);
   const isPropTrue = element.props[caseKey] || element.state[caseKey] === true;
   if (!isPropTrue)
-    return (0, import_utils.merge)(result, convertPropsToClass(props4, result, element));
+    return (0, import_utils.merge)(result, convertPropsToClass(props7, result, element));
 };
-var applyTrueProps = (props4, result, element) => (0, import_utils.merge)(result, convertPropsToClass(props4, result, element));
+var applyTrueProps = (props7, result, element) => (0, import_utils.merge)(result, convertPropsToClass(props7, result, element));
 var beforeClassAssign = (element, s) => {
-  const { props: props4, class: className } = element;
+  const { props: props7, class: className } = element;
   const CLASS_NAMES = {
     media: {},
     selector: {},
     case: {}
   };
-  for (const key in props4) {
+  for (const key in props7) {
     const setter = keySetters[key.slice(0, 1)];
     if (setter)
-      setter(key, props4[key], CLASS_NAMES, element);
+      setter(key, props7[key], CLASS_NAMES, element);
   }
   (0, import_utils.overwriteShallow)(className, CLASS_NAMES);
 };
 var initUpdate = (changes, element) => {
-  const { props: props4, context, class: className } = element;
+  const { props: props7, context, class: className } = element;
   if (!context)
     return;
   const globalTheme = context.designSystem.globalTheme;
@@ -10699,10 +10709,10 @@ var initUpdate = (changes, element) => {
       selector: {},
       case: {}
     };
-    for (const key in props4) {
+    for (const key in props7) {
       const setter = keySetters[key.slice(0, 1)];
       if (key === "theme") {
-        props4.update({
+        props7.update({
           themeModifier: globalTheme
         }, {
           preventRecursive: true,
@@ -10710,9 +10720,9 @@ var initUpdate = (changes, element) => {
           preventDefineUpdate: true
         });
       } else if (key === "true")
-        applyTrueProps(props4[key], CLASS_NAMES, element);
+        applyTrueProps(props7[key], CLASS_NAMES, element);
       if (setter)
-        setter(key, props4[key], CLASS_NAMES, element);
+        setter(key, props7[key], CLASS_NAMES, element);
     }
     if (Object.keys(CLASS_NAMES.media).length) {
       className.media = CLASS_NAMES.media;
@@ -10741,19 +10751,19 @@ var Iframe = {
     minHeight: "H"
   },
   attr: {
-    src: ({ props: props4 }) => props4.src,
-    loading: ({ props: props4 }) => props4.loading,
-    allowfullscreen: ({ props: props4 }) => props4.allowfullscreen,
-    referrerpolicy: ({ props: props4 }) => props4.referrerpolicy
+    src: ({ props: props7 }) => props7.src,
+    loading: ({ props: props7 }) => props7.loading,
+    allowfullscreen: ({ props: props7 }) => props7.allowfullscreen,
+    referrerpolicy: ({ props: props7 }) => props7.referrerpolicy
   }
 };
 
 // Atoms/Interaction.js
 var Interaction = {
   class: {
-    userSelect: ({ props: props4 }) => props4.userSelect && { userSelect: props4.userSelect },
-    pointerEvents: ({ props: props4 }) => props4.pointerEvents && { pointerEvents: props4.pointerEvents },
-    cursor: ({ props: props4 }) => props4.cursor && { cursor: props4.cursor }
+    userSelect: ({ props: props7 }) => props7.userSelect && { userSelect: props7.userSelect },
+    pointerEvents: ({ props: props7 }) => props7.pointerEvents && { pointerEvents: props7.pointerEvents },
+    cursor: ({ props: props7 }) => props7.cursor && { cursor: props7.cursor }
   }
 };
 
@@ -10806,8 +10816,8 @@ var Focusable = {
     }
   },
   attr: {
-    placeholder: ({ props: props4 }) => props4.placeholder,
-    tabIndex: ({ props: props4 }) => props4.tabIndex
+    placeholder: ({ props: props7 }) => props7.placeholder,
+    tabIndex: ({ props: props7 }) => props7.tabIndex
   }
 };
 var FocusableComponent = {
@@ -10824,14 +10834,14 @@ var FocusableComponent = {
     style
   },
   attr: {
-    type: ({ props: props4 }) => props4.type
+    type: ({ props: props7 }) => props7.type
   }
 };
 
 // Atoms/Overflow.js
 var Overflow = {
   class: {
-    overflow: ({ props: props4 }) => props4.overflow && { overflow: props4.overflow }
+    overflow: ({ props: props7 }) => props7.overflow && { overflow: props7.overflow }
   }
 };
 
@@ -10907,17 +10917,17 @@ var import_scratch6 = __toESM(require_cjs());
 var Position = {
   props: {},
   class: {
-    position: ({ props: props4 }) => props4.position && { position: props4.position },
-    inset: ({ props: props4 }) => {
-      const { inset } = props4;
+    position: ({ props: props7 }) => props7.position && { position: props7.position },
+    inset: ({ props: props7 }) => {
+      const { inset } = props7;
       if (typeof inset !== "string")
         return;
       return { inset: inset.split(" ").map((v) => (0, import_scratch6.getSpacingByKey)(v, "k").k).join(" ") };
     },
-    left: ({ props: props4 }) => (0, import_scratch6.getSpacingByKey)(props4.left, "left"),
-    top: ({ props: props4 }) => (0, import_scratch6.getSpacingByKey)(props4.top, "top"),
-    right: ({ props: props4 }) => (0, import_scratch6.getSpacingByKey)(props4.right, "right"),
-    bottom: ({ props: props4 }) => (0, import_scratch6.getSpacingByKey)(props4.bottom, "bottom")
+    left: ({ props: props7 }) => (0, import_scratch6.getSpacingByKey)(props7.left, "left"),
+    top: ({ props: props7 }) => (0, import_scratch6.getSpacingByKey)(props7.top, "top"),
+    right: ({ props: props7 }) => (0, import_scratch6.getSpacingByKey)(props7.right, "right"),
+    bottom: ({ props: props7 }) => (0, import_scratch6.getSpacingByKey)(props7.bottom, "bottom")
   }
 };
 
@@ -10928,30 +10938,30 @@ var Picture = {
     tag: "source",
     attr: {
       media: (element) => {
-        const { props: props4, key, context } = element;
+        const { props: props7, key, context } = element;
         const { MEDIA } = context.designSystem;
         const globalTheme = getSystemTheme(element);
-        const mediaName = (props4.media || key).slice(1);
+        const mediaName = (props7.media || key).slice(1);
         if (mediaName === globalTheme)
           return "(min-width: 0px)";
         else if (mediaName === "dark" || mediaName === "light")
           return "(max-width: 0px)";
         return MEDIA[mediaName];
       },
-      srcset: ({ props: props4 }) => props4.srcset
+      srcset: ({ props: props7 }) => props7.srcset
     }
   },
-  Img: ({ props: props4 }) => ({
+  Img: ({ props: props7 }) => ({
     width: "inherit",
     height: "inherit",
-    src: props4.src
+    src: props7.src
   })
 };
 
 // Atoms/Pseudo.js
 var Pseudo = {
   class: {
-    content: ({ props: props4 }) => props4.content && { content: props4.content }
+    content: ({ props: props7 }) => props7.content && { content: props7.content }
   }
 };
 
@@ -10965,25 +10975,25 @@ var Svg = {
     xmlns: "http://www.w3.org/2000/svg",
     "xmlns:xlink": "http://www.w3.org/1999/xlink"
   },
-  html: ({ key, props: props4, context, ...el }) => {
+  html: ({ key, props: props7, context, ...el }) => {
     const { designSystem, utils } = context;
     const SVG = designSystem && designSystem.SVG;
-    const useSvgSprite = props4.spriteId || context.designSystem && context.designSystem.useSvgSprite;
+    const useSvgSprite = props7.spriteId || context.designSystem && context.designSystem.useSvgSprite;
     const useSVGSymbol = (icon) => `<use xlink:href="#${icon}" />`;
     const init = utils && utils.init;
-    if (!useSvgSprite && props4.src)
-      return props4.src;
-    const spriteId = props4.spriteId;
+    if (!useSvgSprite && props7.src)
+      return props7.src;
+    const spriteId = props7.spriteId;
     if (spriteId)
       return useSVGSymbol(spriteId);
-    const symbolId = Symbol.for(props4.src);
+    const symbolId = Symbol.for(props7.src);
     let SVGKey = SVG[symbolId];
     if (SVGKey && SVG[SVGKey])
       return useSVGSymbol(SVGKey);
     SVGKey = SVG[symbolId] = Math.random();
-    if (props4.src) {
+    if (props7.src) {
       init({
-        svg: { [SVGKey]: props4.src }
+        svg: { [SVGKey]: props7.src }
       }, {
         document: context.document,
         emotion: context.emotion
@@ -10996,60 +11006,60 @@ var Svg = {
 // Atoms/Shape/index.js
 var import_utils3 = __toESM(require_cjs5());
 var import_scratch7 = __toESM(require_cjs());
-var transformBorderRadius = (radius, props4, propertyName) => {
+var transformBorderRadius = (radius, props7, propertyName) => {
   if (!(0, import_utils3.isString)(radius))
     return;
   return {
-    borderRadius: radius.split(" ").map((v, k) => (0, import_scratch7.getSpacingBasedOnRatio)(props4, propertyName, v)[propertyName]).join(" ")
+    borderRadius: radius.split(" ").map((v, k) => (0, import_scratch7.getSpacingBasedOnRatio)(props7, propertyName, v)[propertyName]).join(" ")
   };
 };
 var Shape = {
   extend: Pseudo,
   class: {
-    shape: ({ props: props4 }) => {
-      const { shape } = props4;
-      return (0, import_utils3.exec)(SHAPES[shape], { props: props4 });
+    shape: ({ props: props7 }) => {
+      const { shape } = props7;
+      return (0, import_utils3.exec)(SHAPES[shape], { props: props7 });
     },
-    shapeDirection: ({ props: props4 }) => {
-      const { shape, shapeDirection } = props4;
+    shapeDirection: ({ props: props7 }) => {
+      const { shape, shapeDirection } = props7;
       if (!shape || !shapeDirection)
         return;
       const shapeDir = SHAPES[shape + "Direction"];
       return shape && shapeDir ? shapeDir[shapeDirection || "left"] : null;
     },
-    shapeDirectionColor: ({ props: props4 }) => {
-      const { background, backgroundColor } = props4;
+    shapeDirectionColor: ({ props: props7 }) => {
+      const { background, backgroundColor } = props7;
       const borderColor = {
         borderColor: (0, import_scratch7.getMediaColor)(background || backgroundColor)
       };
-      return props4.shapeDirection ? borderColor : null;
+      return props7.shapeDirection ? borderColor : null;
     },
-    round: ({ props: props4, key, ...el }) => transformBorderRadius(props4.round || props4.borderRadius, props4, "round"),
-    borderRadius: ({ props: props4, key, ...el }) => transformBorderRadius(props4.borderRadius || props4.round, props4, "borderRadius")
+    round: ({ props: props7, key, ...el }) => transformBorderRadius(props7.round || props7.borderRadius, props7, "round"),
+    borderRadius: ({ props: props7, key, ...el }) => transformBorderRadius(props7.borderRadius || props7.round, props7, "borderRadius")
   }
 };
 
 // Atoms/Text.js
 var import_scratch8 = __toESM(require_cjs());
 var Text = {
-  text: ({ key, props: props4, state }) => {
-    if (props4.text === true)
-      return state && state[key] || props4 && props4[key];
-    return props4.text;
+  text: ({ key, props: props7, state }) => {
+    if (props7.text === true)
+      return state && state[key] || props7 && props7[key];
+    return props7.text;
   },
   class: {
-    fontSize: ({ props: props4 }) => props4.fontSize ? (0, import_scratch8.getFontSizeByKey)(props4.fontSize) : null,
-    fontFamily: ({ props: props4 }) => props4.fontFamily && { fontFamily: (0, import_scratch8.getFontFamily)(props4.fontFamily) || props4.fontFamily },
-    lineHeight: ({ props: props4 }) => props4.lineHeight && { lineHeight: props4.lineHeight },
+    fontSize: ({ props: props7 }) => props7.fontSize ? (0, import_scratch8.getFontSizeByKey)(props7.fontSize) : null,
+    fontFamily: ({ props: props7 }) => props7.fontFamily && { fontFamily: (0, import_scratch8.getFontFamily)(props7.fontFamily) || props7.fontFamily },
+    lineHeight: ({ props: props7 }) => props7.lineHeight && { lineHeight: props7.lineHeight },
     // lineHeight: ({ props }) => props.lineHeight && getSpacingBasedOnRatio(props, 'lineHeight', null, ''),
-    textDecoration: ({ props: props4 }) => props4.textDecoration && { textDecoration: props4.textDecoration },
-    textTransform: ({ props: props4 }) => props4.textTransform && { textTransform: props4.textTransform },
-    whiteSpace: ({ props: props4 }) => props4.whiteSpace && { whiteSpace: props4.whiteSpace },
-    letterSpacing: ({ props: props4 }) => props4.letterSpacing && { letterSpacing: props4.letterSpacing },
-    textAlign: ({ props: props4 }) => props4.textAlign && { textAlign: props4.textAlign },
-    fontWeight: ({ props: props4 }) => props4.fontWeight && {
-      fontWeight: props4.fontWeight,
-      fontVariationSettings: '"wght" ' + props4.fontWeight
+    textDecoration: ({ props: props7 }) => props7.textDecoration && { textDecoration: props7.textDecoration },
+    textTransform: ({ props: props7 }) => props7.textTransform && { textTransform: props7.textTransform },
+    whiteSpace: ({ props: props7 }) => props7.whiteSpace && { whiteSpace: props7.whiteSpace },
+    letterSpacing: ({ props: props7 }) => props7.letterSpacing && { letterSpacing: props7.letterSpacing },
+    textAlign: ({ props: props7 }) => props7.textAlign && { textAlign: props7.textAlign },
+    fontWeight: ({ props: props7 }) => props7.fontWeight && {
+      fontWeight: props7.fontWeight,
+      fontVariationSettings: '"wght" ' + props7.fontWeight
     }
   }
 };
@@ -11083,15 +11093,15 @@ var Footnote = {
 // Atoms/Transform.js
 var Transform = {
   class: {
-    transform: ({ props: props4 }) => props4.transform && { transform: props4.transform },
-    transformOrigin: ({ props: props4 }) => props4.transformOrigin && { transformOrigin: props4.transformOrigin }
+    transform: ({ props: props7 }) => props7.transform && { transform: props7.transform },
+    transformOrigin: ({ props: props7 }) => props7.transformOrigin && { transformOrigin: props7.transformOrigin }
   }
 };
 
 // Atoms/XYZ.js
 var XYZ = {
   class: {
-    zIndex: ({ props: props4 }) => props4.zIndex && { zIndex: props4.zIndex }
+    zIndex: ({ props: props7 }) => props7.zIndex && { zIndex: props7.zIndex }
   }
 };
 
@@ -11169,9 +11179,9 @@ var StyleSheet = /* @__PURE__ */ function() {
       var sheet = sheetForTag(tag);
       try {
         sheet.insertRule(rule, sheet.cssRules.length);
-      } catch (e2) {
+      } catch (e) {
         if (!/:(-moz-placeholder|-moz-focus-inner|-moz-focusring|-ms-input-placeholder|-moz-read-write|-moz-read-only|-ms-clear|-ms-expand|-ms-reveal){/.test(rule)) {
-          console.error('There was a problem inserting the following rule: "' + rule + '"', e2);
+          console.error('There was a problem inserting the following rule: "' + rule + '"', e);
         }
       }
     } else {
@@ -11248,11 +11258,11 @@ var length = 0;
 var position = 0;
 var character = 0;
 var characters = "";
-function node(value, root, parent, type, props4, children, length2) {
-  return { value, root, parent, type, props: props4, children, line, column, length: length2, return: "" };
+function node(value, root, parent, type, props7, children, length2) {
+  return { value, root, parent, type, props: props7, children, line, column, length: length2, return: "" };
 }
-function copy(root, props4) {
-  return assign(node("", null, null, "", null, null, 0), root, { length: -root.length }, props4);
+function copy(root, props7) {
+  return assign(node("", null, null, "", null, null, 0), root, { length: -root.length }, props7);
 }
 function char() {
   return character;
@@ -11383,7 +11393,7 @@ function parse(value, root, parent, rule, rules, rulesets, pseudo, points, decla
   var ampersand = 1;
   var character2 = 0;
   var type = "";
-  var props4 = rules;
+  var props7 = rules;
   var children = rulesets;
   var reference = rule;
   var characters2 = type;
@@ -11437,17 +11447,17 @@ function parse(value, root, parent, rule, rules, rulesets, pseudo, points, decla
           case 59:
             characters2 += ";";
           default:
-            append(reference = ruleset(characters2, root, parent, index, offset, rules, points, type, props4 = [], children = [], length2), rulesets);
+            append(reference = ruleset(characters2, root, parent, index, offset, rules, points, type, props7 = [], children = [], length2), rulesets);
             if (character2 === 123)
               if (offset === 0)
-                parse(characters2, root, reference, reference, props4, rulesets, length2, points, children);
+                parse(characters2, root, reference, reference, props7, rulesets, length2, points, children);
               else
                 switch (atrule === 99 && charat(characters2, 3) === 110 ? 100 : atrule) {
                   case 100:
                   case 108:
                   case 109:
                   case 115:
-                    parse(value, reference, reference, rule && append(ruleset(value, reference, reference, 0, 0, rules, points, type, rules, props4 = [], length2), children), rules, children, length2, points, rule ? props4 : children);
+                    parse(value, reference, reference, rule && append(ruleset(value, reference, reference, 0, 0, rules, points, type, rules, props7 = [], length2), children), rules, children, length2, points, rule ? props7 : children);
                     break;
                   default:
                     parse(characters2, reference, reference, reference, [""], children, 0, points, children);
@@ -11483,15 +11493,15 @@ function parse(value, root, parent, rule, rules, rulesets, pseudo, points, decla
     }
   return rulesets;
 }
-function ruleset(value, root, parent, index, offset, rules, points, type, props4, children, length2) {
+function ruleset(value, root, parent, index, offset, rules, points, type, props7, children, length2) {
   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(value, post + 1, post = abs(j = points[i])), z = value; x < size; ++x)
       if (z = trim(j > 0 ? rule[x] + " " + y : replace(y, /&\f/g, rule[x])))
-        props4[k++] = z;
-  return node(value, root, parent, offset === 0 ? RULESET : type, props4, children, length2);
+        props7[k++] = z;
+  return node(value, root, parent, offset === 0 ? RULESET : type, props7, children, length2);
 }
 function comment(value, root, parent) {
   return node(value, root, parent, COMMENT, from(char()), substr(value, 2, -2), 0);
@@ -12468,26 +12478,26 @@ var Animation = {
     animationName: (el) => el.props.animationName && {
       animationName: applyAnimationProps(el.props.animationName, el)
     },
-    animationDuration: ({ props: props4 }) => props4.animationDuration && {
-      animationDuration: (0, import_scratch9.getTimingByKey)(props4.animationDuration).timing
+    animationDuration: ({ props: props7 }) => props7.animationDuration && {
+      animationDuration: (0, import_scratch9.getTimingByKey)(props7.animationDuration).timing
     },
-    animationDelay: ({ props: props4 }) => props4.animationDelay && {
-      animationDelay: (0, import_scratch9.getTimingByKey)(props4.animationDelay).timing
+    animationDelay: ({ props: props7 }) => props7.animationDelay && {
+      animationDelay: (0, import_scratch9.getTimingByKey)(props7.animationDelay).timing
     },
-    animationTimingFunction: ({ props: props4 }) => props4.animationTimingFunction && {
-      animationTimingFunction: (0, import_scratch9.getTimingFunction)(props4.animationTimingFunction)
+    animationTimingFunction: ({ props: props7 }) => props7.animationTimingFunction && {
+      animationTimingFunction: (0, import_scratch9.getTimingFunction)(props7.animationTimingFunction)
     },
-    animationFillMode: ({ props: props4 }) => props4.animationFillMode && {
-      animationFillMode: props4.animationFillMode
+    animationFillMode: ({ props: props7 }) => props7.animationFillMode && {
+      animationFillMode: props7.animationFillMode
     },
-    animationPlayState: ({ props: props4 }) => props4.animationPlayState && {
-      animationPlayState: props4.animationPlayState
+    animationPlayState: ({ props: props7 }) => props7.animationPlayState && {
+      animationPlayState: props7.animationPlayState
     },
-    animationIterationCount: ({ props: props4 }) => props4.animationIterationCount && {
-      animationIterationCount: props4.animationIterationCount || 1
+    animationIterationCount: ({ props: props7 }) => props7.animationIterationCount && {
+      animationIterationCount: props7.animationIterationCount || 1
     },
-    animationDirection: ({ props: props4 }) => props4.animationDirection && {
-      animationDirection: props4.animationDirection
+    animationDirection: ({ props: props7 }) => props7.animationDirection && {
+      animationDirection: props7.animationDirection
     }
   }
 };
@@ -12495,7 +12505,7 @@ var Animation = {
 // Box/index.js
 var PropsCSS = {
   class: {
-    style: ({ props: props4 }) => props4 && props4.style
+    style: ({ props: props7 }) => props7 && props7.style
   }
 };
 var Box = {
@@ -12515,7 +12525,7 @@ var Box = {
     Animation
   ],
   attr: {
-    id: ({ props: props4 }) => props4.id
+    id: ({ props: props7 }) => props7.id
   }
 };
 
@@ -12530,7 +12540,7 @@ var Avatar = {
     cursor: "pointer"
   },
   attr: {
-    src: ({ key, props: props4 }) => props4.src || `https://avatars.dicebear.com/api/${props4.avatarType || "adventurer-neutral"}/${props4.key || key}.svg`
+    src: ({ key, props: props7 }) => props7.src || `https://avatars.dicebear.com/api/${props7.avatarType || "adventurer-neutral"}/${props7.key || key}.svg`
   }
 };
 var AvatarBundle = {
@@ -12550,15 +12560,15 @@ var AvatarBundle = {
 // Icon/index.js
 var Icon = {
   extend: Svg,
-  props: ({ key, props: props4, parent, context }) => {
+  props: ({ key, props: props7, parent, context }) => {
     const { ICONS, useIconSprite, verbose } = context && context.designSystem;
     const { toCamelCase } = context && context.utils;
-    const iconName = props4.inheritedString || props4.name || props4.icon || key;
+    const iconName = props7.inheritedString || props7.name || props7.icon || key;
     const camelCase = toCamelCase(iconName);
     const isArray9 = camelCase.split(/([a-z])([A-Z])/g);
     let activeIconName;
-    if (props4.active) {
-      activeIconName = props4[".active"].name || props4[".active"].icon;
+    if (props7.active) {
+      activeIconName = props7[".active"].name || props7[".active"].icon;
     }
     if (parent && parent.props && parent.props.active && parent.props[".active"] && parent.props[".active"].icon) {
       activeIconName = parent.props[".active"].icon.name || parent.props[".active"].icon.icon || parent.props[".active"].icon;
@@ -12577,7 +12587,7 @@ var Icon = {
         console.warn("Can't find icon:", iconName, validIconName);
     }
     const iconFromLibrary = ICONS[validIconName];
-    const directSrc = parent && parent.props && parent.props.src || props4.src;
+    const directSrc = parent && parent.props && parent.props.src || props7.src;
     return {
       width: "A",
       height: "A",
@@ -12602,9 +12612,9 @@ var IconText = {
   },
   Icon: {
     props: {},
-    if: ({ props: props4 }) => props4.name || props4.icon
+    if: ({ props: props7 }) => props7.name || props7.icon
   },
-  text: ({ props: props4 }) => props4.text
+  text: ({ props: props7 }) => props7.text
 };
 
 // Button/index.js
@@ -12625,7 +12635,7 @@ var Button = {
     round: "C2"
   },
   attr: {
-    type: ({ props: props4 }) => props4.type
+    type: ({ props: props7 }) => props7.type
   }
 };
 var SquareButton = {
@@ -12656,21 +12666,38 @@ var ButtonSet = {
   childExtend: SquareButton
 };
 
-// Datepicker/style.js
-var style_default = {
-  main: {
-    "section > header span:nth-child(6)": {
-      opacity: 0.5
-    },
-    "section > header span:nth-child(7)": {
-      opacity: 0.5
-    },
-    "section > div button:nth-child(7n)": {
-      opacity: 0.5
-    },
-    "section > div button:nth-child(7n - 1)": {
-      opacity: 0.5
+// Dialog/index.js
+var DialogFooter = {
+  extend: Flex,
+  props: {
+    align: "center flex-end",
+    gap: "X2",
+    margin: "auto - -",
+    padding: "Y2 X2"
+  },
+  childExtend: {
+    extend: Button,
+    props: {
+      theme: "primary @dark .color-only",
+      fontSize: "Z1",
+      textTransform: "uppercase",
+      background: "transparent",
+      "&": {
+        padding: "Z A"
+      },
+      ":hover": {
+        background: "white .065"
+      },
+      ":active": {
+        background: "white .1"
+      }
     }
+  },
+  cancel: {
+    text: "cancel"
+  },
+  ok: {
+    text: "ok"
   }
 };
 
@@ -12683,12 +12710,12 @@ var Flex2 = {
     display: "flex"
   },
   class: {
-    flow: ({ props: props4 }) => props4.flow && { flexFlow: props4.flow },
-    wrap: ({ props: props4 }) => props4.wrap && { flexWrap: props4.wrap },
-    align: ({ props: props4 }) => {
-      if (typeof props4.align !== "string")
+    flow: ({ props: props7 }) => props7.flow && { flexFlow: props7.flow },
+    wrap: ({ props: props7 }) => props7.wrap && { flexWrap: props7.wrap },
+    align: ({ props: props7 }) => {
+      if (typeof props7.align !== "string")
         return;
-      const [alignItems, justifyContent] = props4.align.split(" ");
+      const [alignItems, justifyContent] = props7.align.split(" ");
       return { alignItems, justifyContent };
     }
   }
@@ -12699,22 +12726,22 @@ var import_scratch11 = __toESM(require_cjs9());
 var Grid2 = {
   props: { display: "grid" },
   class: {
-    area: ({ props: props4 }) => props4.area ? { gridArea: props4.area } : null,
-    template: ({ props: props4 }) => props4.template ? { gridTemplate: props4.template } : null,
-    templateAreas: ({ props: props4 }) => props4.templateAreas ? { gridTemplateAreas: props4.templateAreas } : null,
-    column: ({ props: props4 }) => props4.column ? { gridColumn: props4.column } : null,
-    columns: ({ props: props4 }) => props4.columns ? { gridTemplateColumns: props4.columns } : null,
-    templateColumns: ({ props: props4 }) => props4.templateColumns ? { gridTemplateColumns: props4.templateColumns } : null,
-    autoColumns: ({ props: props4 }) => props4.autoColumns ? { gridAutoColumns: props4.autoColumns } : null,
-    columnStart: ({ props: props4 }) => props4.columnStart ? { gridColumnStart: props4.columnStart } : null,
-    row: ({ props: props4 }) => props4.row ? { gridRow: props4.row } : null,
-    rows: ({ props: props4 }) => props4.rows ? { gridTemplateRows: props4.rows } : null,
-    templateRows: ({ props: props4 }) => props4.templateRows ? { gridTemplateRows: props4.templateRows } : null,
-    autoRows: ({ props: props4 }) => props4.autoRows ? { gridAutoRows: props4.autoRows } : null,
-    rowStart: ({ props: props4 }) => props4.rowStart ? { gridRowStart: props4.rowStart } : null,
-    autoFlow: ({ props: props4 }) => props4.autoFlow ? { gridAutoFlow: props4.autoFlow } : null,
-    columnGap: ({ props: props4 }) => props4.columnGap ? (0, import_scratch11.getSpacingBasedOnRatio)(props4, "columnGap") : null,
-    rowGap: ({ props: props4 }) => props4.rowGap ? (0, import_scratch11.getSpacingBasedOnRatio)(props4, "rowGap") : null
+    area: ({ props: props7 }) => props7.area ? { gridArea: props7.area } : null,
+    template: ({ props: props7 }) => props7.template ? { gridTemplate: props7.template } : null,
+    templateAreas: ({ props: props7 }) => props7.templateAreas ? { gridTemplateAreas: props7.templateAreas } : null,
+    column: ({ props: props7 }) => props7.column ? { gridColumn: props7.column } : null,
+    columns: ({ props: props7 }) => props7.columns ? { gridTemplateColumns: props7.columns } : null,
+    templateColumns: ({ props: props7 }) => props7.templateColumns ? { gridTemplateColumns: props7.templateColumns } : null,
+    autoColumns: ({ props: props7 }) => props7.autoColumns ? { gridAutoColumns: props7.autoColumns } : null,
+    columnStart: ({ props: props7 }) => props7.columnStart ? { gridColumnStart: props7.columnStart } : null,
+    row: ({ props: props7 }) => props7.row ? { gridRow: props7.row } : null,
+    rows: ({ props: props7 }) => props7.rows ? { gridTemplateRows: props7.rows } : null,
+    templateRows: ({ props: props7 }) => props7.templateRows ? { gridTemplateRows: props7.templateRows } : null,
+    autoRows: ({ props: props7 }) => props7.autoRows ? { gridAutoRows: props7.autoRows } : null,
+    rowStart: ({ props: props7 }) => props7.rowStart ? { gridRowStart: props7.rowStart } : null,
+    autoFlow: ({ props: props7 }) => props7.autoFlow ? { gridAutoFlow: props7.autoFlow } : null,
+    columnGap: ({ props: props7 }) => props7.columnGap ? (0, import_scratch11.getSpacingBasedOnRatio)(props7, "columnGap") : null,
+    rowGap: ({ props: props7 }) => props7.rowGap ? (0, import_scratch11.getSpacingBasedOnRatio)(props7, "rowGap") : null
   }
 };
 
@@ -12770,141 +12797,458 @@ var emotion2 = createEmotion4();
 var { keyframes: keyframes2 } = emotion2;
 
 // Datepicker/index.js
-var buttonProps = {
-  theme: "quaternary",
-  background: "transparent",
-  color: "--theme-quinary-dark-color",
-  ":hover": {
-    theme: "quinary .child"
-  }
-};
-var aside = {
+var DatePickerYears = {
+  tag: "aside",
   props: {
-    gap: "X2",
-    margin: "-Z - -Z -X2",
-    padding: "Z - Z X2",
-    minHeight: "100%",
-    height: "100%",
-    width: "--spacing-D"
+    overflow: "hidden",
+    position: "relative",
+    ":before": {
+      content: '""',
+      boxSize: "A1 100%",
+      position: "absolute",
+      top: "0",
+      left: "0",
+      background: "linear-gradient(to bottom, var(--theme-tertiary-dark-background) 0%, transparent 100%)",
+      zIndex: "10"
+    },
+    ":after": {
+      content: '""',
+      boxSize: "B 100%",
+      position: "absolute",
+      bottom: "0",
+      left: "0",
+      background: "linear-gradient(to top, var(--theme-tertiary-dark-background) 0%, transparent 100%)"
+    }
   },
-  cnt: {
-    extend: Flex2,
+  Flex: {
     props: {
       flow: "column",
-      overflow: "hidden auto",
-      boxSize: "100% --spacing-D",
-      top: "0",
-      position: "absolute",
+      gap: "B",
+      padding: "A Z A1 B1",
       maxHeight: "100%",
-      justifyContent: "flex-end"
+      overflow: "hidden auto",
+      "::-webkit-scrollbar": { display: "none" }
     },
     childExtend: {
       extend: Button,
-      props: {
-        ...buttonProps,
-        fontSize: "Z1"
-      },
-      text: ({ state }) => state.value
+      props: ({ state, text }) => ({
+        fontSize: "Y1",
+        color: "white",
+        opacity: ".4",
+        background: "transparent",
+        transition: "opacity .25s ease",
+        isActive: state.activeYear === text,
+        ".isActive": { opacity: "1" },
+        ":hover": { opacity: "1" }
+      }),
+      on: {
+        click: (event, element, state) => state.update({ activeYear: element.text }),
+        render: (el, state) => {
+          const { props: props7 } = el;
+          const { isActive } = props7;
+          if (isActive) {
+            window.requestAnimationFrame(() => {
+              el.parent.parent.node.scrollTop = el.node.offsetTop - 100;
+            });
+          }
+        }
+      }
+    },
+    $setCollection: ({ state, parent }) => {
+      const { yearRange } = parent.parent.props;
+      if (yearRange) {
+        const [start, end] = yearRange;
+        const yearsArray = new Array(end + 1 - start).fill(void 0).map((v, k) => {
+          return { text: start + k };
+        }).reverse();
+        return yearsArray;
+      }
+      return [
+        { text: "2023" },
+        { text: "2022" },
+        { text: "2021" },
+        { text: "2020" },
+        { text: "2019" },
+        { text: "2018" },
+        { text: "2017" },
+        { text: "2016" },
+        { text: "2015" },
+        { text: "2014" },
+        { text: "2013" },
+        { text: "2012" },
+        { text: "2012" },
+        { text: "2012" }
+      ];
     }
   }
 };
-var main = {
+var DatePickerMonthsSlider = {
   extend: Flex2,
   props: {
-    flex: 1,
-    gap: "X2",
-    flow: "column",
-    header: {
-      align: "center space-between"
+    position: "relative",
+    overflow: "hidden",
+    alignItems: "center",
+    padding: "- - B -",
+    maxWidth: `${272 / 16}em`,
+    boxSizing: "border-box",
+    ":before": {
+      content: '""',
+      position: "absolute",
+      boxSize: "100% 100px",
+      background: "linear-gradient(to right, var(--theme-tertiary-dark-background) 0%, transparent 100%)",
+      left: "0",
+      top: "0",
+      zIndex: "30",
+      pointerEvents: "none"
+    },
+    ":after": {
+      content: '""',
+      position: "absolute",
+      boxSize: "100% 100px",
+      background: "linear-gradient(to left, var(--theme-tertiary-dark-background) 0%, transparent 100%)",
+      right: "0",
+      top: "0",
+      zIndex: "30",
+      pointerEvents: "none"
+    },
+    style: {
+      "> button": {
+        width: "16px",
+        height: "16px",
+        position: "absolute",
+        zIndex: "35",
+        background: "transparent",
+        color: "#0079FD",
+        ":first-child": { left: "18px" },
+        ":last-child": { right: "18px" }
+      }
     }
   },
-  header: {
+  leftButton: {
+    extend: Button,
+    props: { icon: "arrowLeft" }
+  },
+  Flex: {
+    props: {
+      flex: "1",
+      overflow: "auto hidden",
+      "::-webkit-scrollbar": { display: "none" }
+    },
+    childExtend: {
+      tag: "h6",
+      props: ({ state, key }) => ({
+        fontSize: "Z1",
+        textAlign: "center",
+        boxSizing: "content-box",
+        minWidth: "272px",
+        isActive: state.activeMonth === parseInt(key),
+        ".isActive": { opacity: "1" }
+      }),
+      render: (el, state) => {
+        const { props: props7 } = el;
+        const { isActive } = props7;
+        if (isActive) {
+          window.requestAnimationFrame(() => {
+            el.parent.parent.node.scrollLeft = el.node.offsetLeft;
+          });
+        }
+      }
+    },
+    $setCollection: ({ state, parent }) => {
+      return [
+        { text: "January" },
+        { text: "February" },
+        { text: "March" },
+        { text: "April" },
+        { text: "May" },
+        { text: "June" },
+        { text: "July" },
+        { text: "August" },
+        { text: "September" },
+        { text: "October" },
+        { text: "November" },
+        { text: "December" }
+      ];
+    }
+  },
+  rightButton: { extend: Button, props: { icon: "arrowRight" } }
+};
+var DatePickerWeekDays = {
+  extend: Grid2,
+  props: {
+    overflow: "hidden",
+    padding: "- Z Z",
+    width: "100%",
+    columns: "repeat(7, 1fr)",
+    gap: "W2"
+  },
+  childExtend: {
+    tag: "span",
     extend: Flex2,
-    left: {
-      extend: SquareButton,
-      props: {
-        ...buttonProps,
-        round: "C",
-        icon: "arrowAngleLeft"
+    props: {
+      fontSize: "Y1",
+      textTransform: "capitalize",
+      align: "center center",
+      ":nth-child(7n-1), &:nth-child(7n)": { opacity: ".5" }
+    }
+  },
+  ...[
+    { text: "Mo" },
+    { text: "Tu" },
+    { text: "We" },
+    { text: "Th" },
+    { text: "Fr" },
+    { text: "Sa" },
+    { text: "Su" }
+  ]
+};
+var DatePickerGrid = {
+  extend: Grid2,
+  props: {
+    columns: "repeat(7, 1fr)",
+    minWidth: "100%",
+    gap: "W2",
+    padding: `- Z`
+  },
+  childExtend: {
+    extend: Button,
+    props: ({ state, key }) => ({
+      isActive: state.activeDay === parseInt(key) + 1,
+      textAlign: "center",
+      fontSize: "Z1",
+      round: "100%",
+      height: "B1",
+      aspectRatio: "1/1",
+      lineHeight: ".9",
+      background: "transparent",
+      theme: "secondary @dark .color",
+      ".isActive": { theme: "primary" },
+      "!isActive": {
+        ":hover": { theme: "secondary" },
+        ":nth-child(7n-1), &:nth-child(7n)": { opacity: ".5" }
       }
+    }),
+    on: {
+      click: (event, element, state) => {
+        state.update({ activeDay: element.text });
+        console.log(state.activeDay + "." + state.activeMonth + "." + state.activeYear);
+      }
+    }
+  },
+  $setPropsCollection: (el, s) => {
+    const daysInMonth = new Date(s.activeYear, s.activeMonth, 0).getDate();
+    const days = new Array(daysInMonth).fill(void 0).map((v, k) => ({ text: k + 1 }));
+    return days;
+  }
+};
+var monthNumbersContainer = {
+  props: {
+    maxWidth: `${272 / 16}em`,
+    position: "relative",
+    ":before": {
+      content: '""',
+      position: "absolute",
+      boxSize: "100% 12px",
+      background: "linear-gradient(to right, var(--theme-tertiary-dark-background) 0%, transparent 100%)",
+      left: "0",
+      top: "0",
+      zIndex: "30"
     },
-    month: {
-      tag: "span",
-      text: "December"
+    ":after": {
+      content: '""',
+      position: "absolute",
+      boxSize: "100% 12px",
+      background: "linear-gradient(to left, var(--theme-tertiary-dark-background) 0%, transparent 100%)",
+      right: "0",
+      top: "0",
+      zIndex: "30"
     },
-    right: {
-      extend: SquareButton,
-      props: {
-        ...buttonProps,
-        round: "C",
-        icon: "arrowAngleRight"
-      }
+    content: {
+      overflow: "auto hidden"
     }
   },
-  days: {
+  content: {
     extend: Flex2,
+    childExtend: DatePickerGrid,
+    ...[{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]
+  }
+};
+var props = {
+  yearRange: [1993, 2023],
+  theme: "tertiary",
+  round: "Z2",
+  margin: "E",
+  overflow: "hidden",
+  maxHeight: "318px",
+  boxSize: "fit-content fit-content",
+  padding: "- Z - -",
+  style: {
+    button: {
+      padding: "0"
+    }
+  }
+};
+var DatePicker = {
+  extend: Flex2,
+  state: {
+    activeYear: 1993,
+    activeMonth: 8,
+    activeDay: 14
+  },
+  props,
+  DatePickerYears: {},
+  Flex: {
     props: {
       flow: "column",
-      gap: "X2"
+      padding: "20px - - -",
+      position: "relative"
     },
-    childExtend: {
-      extend: Grid2,
-      props: {
-        columns: "repeat(7, 1fr)",
-        gap: "X2"
-      }
-    },
-    weekDays: {
-      childExtend: {
-        extend: Button,
-        props: {
-          ...buttonProps,
-          fontSize: "Z1",
-          padding: "X2"
-        }
+    DatePickerMonthsSlider: {},
+    DatePickerWeekDays: {},
+    monthNumbersContainer,
+    DialogFooter: {}
+  }
+};
+var DatePickerTwoColumns = {
+  extend: DatePicker,
+  props: {
+    calendar: {
+      months: {
+        maxWidth: `${544 / 16}em`
       },
-      ...[
-        { text: "Mo" },
-        { text: "Tu" },
-        { text: "We" },
-        { text: "Th" },
-        { text: "Fr" },
-        { text: "Sa" },
-        { text: "Su" }
-      ]
-    },
-    cnt: {
-      childExtend: {
-        extend: SquareButton,
-        props: ({ key, state }) => ({
-          ...buttonProps,
-          theme: "quaternary",
-          active: key === "18",
-          ".active": {
-            theme: "quinary"
-          }
-        })
+      weekDaysContainer: {
+        maxWidth: `${544 / 16}em`
       },
-      ...new Array(31).fill(void 0).map((_, i) => ({ text: i + 1 }))
+      monthNumbersContainer: {
+        maxWidth: `${544 / 16}em`
+      }
     }
   }
 };
-var DatePicker = {
-  style: style_default,
-  extend: Flex2,
+
+// Input/index.js
+var Input = {
+  extend: [Focusable],
+  tag: "input",
   props: {
-    position: "relative",
+    border: "none",
+    type: "input",
     theme: "quaternary",
-    transition: "A all",
+    fontSize: "A",
+    round: "C",
+    lineHeight: 1,
+    fontFamily: "smbls",
+    padding: "Z A"
+  },
+  attr: {
+    pattern: ({ props: props7 }) => props7.pattern,
+    minlength: ({ props: props7 }) => props7.minlength,
+    maxlength: ({ props: props7 }) => props7.maxlength,
+    name: ({ props: props7 }) => props7.name,
+    autocomplete: ({ props: props7 }) => props7.autocomplete,
+    placeholder: ({ props: props7 }) => props7.placeholder,
+    value: ({ props: props7, state }) => props7.value,
+    disabled: ({ props: props7 }) => props7.disabled || null,
+    readonly: ({ props: props7 }) => props7.readonly,
+    required: ({ props: props7 }) => props7.required,
+    type: ({ props: props7 }) => props7.type
+  }
+};
+
+// TimePicker/TimePickerItem.js
+var props2 = {
+  align: "center center",
+  flow: "column",
+  gap: "X",
+  style: {
+    "input[type=number]::-webkit-inner-spin-button": {
+      "-webkit-appearance": "none",
+      margin: 0
+    },
+    "input[type=number]::-webkit-outer-spin-button": {
+      "-webkit-appearance": "none",
+      margin: 0
+    },
+    "input[type=number]": { "-webkit-appearance": "textfield" },
+    "input:focus < button": { border: "3px solid red" },
+    "> button": {
+      padding: "0",
+      background: "transparent",
+      color: "white",
+      fontSize: `${12 / 16}em`,
+      display: "none"
+    }
+  },
+  input: {
+    boxSize: "C C",
     round: "Z",
-    padding: "Z Z2 Z X2",
-    gap: "X2",
-    depth: 16,
-    minHeight: "0",
-    align: "stretch center"
+    padding: "0",
+    align: "center center",
+    textAlign: "center",
+    color: "white",
+    background: "white .15"
+  }
+};
+var TimePickerItem = {
+  tag: "label",
+  extend: Flex,
+  props: props2,
+  upButton: { extend: Button, props: { icon: "plus" } },
+  input: { extend: [Input, Flex], attr: { type: "number", min: "1", max: "24", value: "1" } },
+  downButton: { extend: Button, props: { icon: "minus" } }
+};
+
+// TimePicker/index.js
+var props3 = {
+  flow: "column",
+  width: "fit-content",
+  background: "rgba(255, 255, 255, .15)",
+  padding: "A A B A",
+  round: "Z",
+  title: {
+    fontSize: "Z1",
+    textTransform: "capitalize",
+    padding: "- - B -"
   },
-  aside,
-  main
+  content: {
+    align: "center center",
+    gap: "A",
+    timePickers: {
+      align: "center center",
+      gap: "Y2"
+    }
+  },
+  footButtons: {
+    align: "center flex-end",
+    gap: "A1",
+    padding: "B1 - - -",
+    childProps: {
+      background: "transparent",
+      padding: "0",
+      color: "#0079FD"
+    }
+  }
+};
+var TimePicker = {
+  extend: Flex,
+  props: props3,
+  title: { text: "enter time" },
+  content: {
+    extend: Flex,
+    timePickers: {
+      tag: "label",
+      extend: Flex,
+      ...[
+        { extend: TimePickerItem },
+        ":",
+        { extend: TimePickerItem },
+        ":",
+        { extend: TimePickerItem }
+      ]
+    },
+    TimeSwitcher: {}
+  },
+  DialogFooter: {}
 };
 
 // Dropdown/index.js
@@ -12968,7 +13312,7 @@ var DropdownParent = {
 };
 
 // Form/FieldLabel.js
-var props = {
+var props4 = {
   flow: "column",
   gap: "Y2",
   childProps: { textTransform: "capitalize" },
@@ -12979,7 +13323,7 @@ var props = {
 };
 var FieldLabel = {
   extend: Flex,
-  props,
+  props: props4,
   caption: {
     tag: "span",
     text: "text"
@@ -13125,15 +13469,15 @@ var ToggleSwithWithLabel = {
 // node_modules/@symbo.ls/icon/index.js
 var Icon2 = {
   extend: Svg,
-  props: ({ key, props: props4, parent, context }) => {
+  props: ({ key, props: props7, parent, context }) => {
     const { ICONS, useIconSprite, verbose } = context && context.designSystem;
     const { toCamelCase } = context && context.utils;
-    const iconName = props4.inheritedString || props4.name || props4.icon || key;
+    const iconName = props7.inheritedString || props7.name || props7.icon || key;
     const camelCase = toCamelCase(iconName);
     const isArray9 = camelCase.split(/([a-z])([A-Z])/g);
     let activeIconName;
-    if (props4.active) {
-      activeIconName = props4[".active"].name || props4[".active"].icon;
+    if (props7.active) {
+      activeIconName = props7[".active"].name || props7[".active"].icon;
     }
     if (parent && parent.props && parent.props.active && parent.props[".active"] && parent.props[".active"].icon) {
       activeIconName = parent.props[".active"].icon.name || parent.props[".active"].icon.icon || parent.props[".active"].icon;
@@ -13152,7 +13496,7 @@ var Icon2 = {
         console.warn("Can't find icon:", iconName, validIconName);
     }
     const iconFromLibrary = ICONS[validIconName];
-    const directSrc = parent && parent.props && parent.props.src || props4.src;
+    const directSrc = parent && parent.props && parent.props.src || props7.src;
     return {
       width: "A",
       height: "A",
@@ -13170,15 +13514,16 @@ var IconText2 = {
     align: "center center",
     lineHeight: 1
   },
+  // TODO: remove this variant
   icon: {
     extend: Icon2,
     if: ({ parent }) => parent.props.icon
   },
   Icon: {
     props: {},
-    if: ({ props: props4 }) => props4.name || props4.icon
+    if: ({ props: props7 }) => props7.name || props7.icon
   },
-  text: ({ props: props4 }) => props4.text
+  text: ({ props: props7 }) => props7.text
 };
 
 // Link/index.js
@@ -13198,23 +13543,23 @@ var Link = {
       const { exec: exec5 } = ctx.utils;
       return exec5(el.props.href, el) || exec5(el.props, el).href;
     },
-    target: ({ props: props4 }) => props4.target,
-    "aria-label": ({ props: props4 }) => props4.aria ? props4.aria.label : props4.text,
-    draggable: ({ props: props4 }) => props4.draggable
+    target: ({ props: props7 }) => props7.target,
+    "aria-label": ({ props: props7 }) => props7.aria ? props7.aria.label : props7.text,
+    draggable: ({ props: props7 }) => props7.draggable
   }
 };
 var RouterLink = {
   on: {
     click: (event, el, s, ctx) => {
-      const { props: props4 } = el;
-      const { href } = props4;
+      const { props: props7 } = el;
+      const { href } = props7;
       if (!href)
         return;
       const { utils, routerOptions } = ctx;
       const { router } = utils;
       const root = el.__ref.__root;
       const linkIsExternal = href.includes("http://") || href.includes("https://") || href.includes("mailto:") || href.includes("tel:");
-      const options = props4.routerOptions || routerOptions || {
+      const options = props7.routerOptions || routerOptions || {
         scrollToOptions: { behaviour: "instant" }
       };
       if (href && !linkIsExternal) {
@@ -13228,35 +13573,6 @@ var RouteLink = {
   extend: [Link, RouterLink]
 };
 
-// Input/index.js
-var Input = {
-  extend: [Focusable],
-  tag: "input",
-  props: {
-    border: "none",
-    type: "input",
-    theme: "quaternary",
-    fontSize: "A",
-    round: "C",
-    lineHeight: 1,
-    fontFamily: "smbls",
-    padding: "Z A"
-  },
-  attr: {
-    pattern: ({ props: props4 }) => props4.pattern,
-    minlength: ({ props: props4 }) => props4.minlength,
-    maxlength: ({ props: props4 }) => props4.maxlength,
-    name: ({ props: props4 }) => props4.name,
-    autocomplete: ({ props: props4 }) => props4.autocomplete,
-    placeholder: ({ props: props4 }) => props4.placeholder,
-    value: ({ props: props4, state }) => props4.value,
-    disabled: ({ props: props4 }) => props4.disabled || null,
-    readonly: ({ props: props4 }) => props4.readonly,
-    required: ({ props: props4 }) => props4.required,
-    type: ({ props: props4 }) => props4.type
-  }
-};
-
 // Field/node_modules/@symbo.ls/atoms/Block.js
 var import_scratch19 = __toESM(require_cjs());
 
@@ -13297,8 +13613,8 @@ var Focusable2 = {
     }
   },
   attr: {
-    placeholder: ({ props: props4 }) => props4.placeholder,
-    tabIndex: ({ props: props4 }) => props4.tabIndex
+    placeholder: ({ props: props7 }) => props7.placeholder,
+    tabIndex: ({ props: props7 }) => props7.tabIndex
   }
 };
 
@@ -13369,23 +13685,23 @@ var Video = {
   childExtend: {
     tag: "source",
     attr: {
-      src: ({ props: props4 }) => props4.src,
-      controls: ({ props: props4 }) => props4.controls
+      src: ({ props: props7 }) => props7.src,
+      controls: ({ props: props7 }) => props7.controls
     }
   },
   props: {
     controls: true
   },
   attr: {
-    autoplay: ({ props: props4 }) => props4.autoplay,
-    controls: ({ props: props4 }) => props4.controls
+    autoplay: ({ props: props7 }) => props7.autoplay,
+    controls: ({ props: props7 }) => props7.controls
   }
 };
 
 // Range/index.js
 var import_utils14 = __toESM(require_cjs5());
 var import_scratch28 = __toESM(require_cjs());
-var props2 = {
+var props5 = {
   appearance: "none",
   width: "100%",
   height: "2px",
@@ -13445,7 +13761,7 @@ var props2 = {
   }
 };
 var Range = {
-  props: props2,
+  props: props5,
   tag: "input",
   attr: { type: "range" }
 };
@@ -13497,7 +13813,7 @@ var RangeWithButtons = {
 };
 
 // Slider/style.js
-var style_default2 = {
+var style_default = {
   appearance: "none",
   width: "100%",
   height: "2px",
@@ -13540,7 +13856,7 @@ var import_utils15 = __toESM(require_cjs5());
   }
 });
 var RangeSlider = {
-  style: style_default2,
+  style: style_default,
   props: {
     theme: "sliderThumb"
   },
@@ -13562,8 +13878,8 @@ var Slider = {
       click: (ev, el, s) => {
         el.props && (0, import_utils15.isFunction)(el.props.click) && el.props.click(ev, el, s);
         const input = el.parent.input;
-        const props4 = input.props;
-        const value = (0, import_utils15.isFunction)(props4.value) ? props4.value() : props4.value;
+        const props7 = input.props;
+        const value = (0, import_utils15.isFunction)(props7.value) ? props7.value() : props7.value;
         input.node.value = value;
       }
     }
@@ -13599,8 +13915,8 @@ var Slider = {
       click: (ev, el, s) => {
         el.props && (0, import_utils15.isFunction)(el.props.click) && el.props.click(ev, el, s);
         const input = el.parent.input;
-        const props4 = input.props;
-        const value = (0, import_utils15.isFunction)(props4.value) ? props4.value() : props4.value;
+        const props7 = input.props;
+        const value = (0, import_utils15.isFunction)(props7.value) ? props7.value() : props7.value;
         input.node.value = value;
       }
     }
@@ -13616,12 +13932,12 @@ var Flex3 = {
     display: "flex"
   },
   class: {
-    flow: ({ props: props4 }) => props4.flow && { flexFlow: props4.flow },
-    wrap: ({ props: props4 }) => props4.wrap && { flexWrap: props4.wrap },
-    align: ({ props: props4 }) => {
-      if (typeof props4.align !== "string")
+    flow: ({ props: props7 }) => props7.flow && { flexFlow: props7.flow },
+    wrap: ({ props: props7 }) => props7.wrap && { flexWrap: props7.wrap },
+    align: ({ props: props7 }) => {
+      if (typeof props7.align !== "string")
         return;
-      const [alignItems, justifyContent] = props4.align.split(" ");
+      const [alignItems, justifyContent] = props7.align.split(" ");
       return { alignItems, justifyContent };
     }
   }
@@ -13769,14 +14085,14 @@ var TooltipParent = {
 };
 
 // Textarea/index.js
-var props3 = {
+var props6 = {
   height: "E",
   lineHeight: 1.4,
   style: { resize: "none" }
 };
 var Textarea = {
   extend: [Input],
-  props: props3,
+  props: props6,
   tag: "textarea"
 };
 
@@ -13840,13 +14156,13 @@ var Select = {
       disabled: ""
     },
     attr: {
-      value: ({ props: props4 }) => props4.value,
-      selected: ({ props: props4 }) => props4.selected,
-      disabled: ({ props: props4 }) => props4.disabled
+      value: ({ props: props7 }) => props7.value,
+      selected: ({ props: props7 }) => props7.selected,
+      disabled: ({ props: props7 }) => props7.disabled
     }
   },
   attr: {
-    name: ({ props: props4 }) => props4.name,
-    disabled: ({ props: props4 }) => props4.disabled
+    name: ({ props: props7 }) => props7.name,
+    disabled: ({ props: props7 }) => props7.disabled
   }
 };