@symbo.ls/uikit 2.11.36 → 2.11.43

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, props5) => {
+          if (props5 === void 0 || props5 === 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)(props5)("string", "number")) {
+            delete obj[props5];
+          } else if ((0, import_types.isArray)(props5)) {
+            props5.forEach((prop) => delete obj[prop]);
           } else {
             throw new Error("Invalid input: props must be a string or an array of strings");
           }
@@ -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 = (props5, sequenceProps) => {
+      const { key, variable, value, scaling, index } = props5;
       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 = (props5, sequenceProps) => {
+      const { key, base, value, ratio, variable, index } = props5;
       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 props5 = {
           key: letterKey,
           variable,
           value,
@@ -1604,9 +1604,9 @@ var require_cjs = __commonJS({
           ratio,
           index: key
         };
-        setSequenceValue(props4, sequenceProps);
+        setSequenceValue(props5, sequenceProps);
         if (subSequence)
-          generateSubSequence(props4, sequenceProps);
+          generateSubSequence(props5, sequenceProps);
       }
       return sequenceProps;
     };
@@ -1688,14 +1688,14 @@ var require_cjs = __commonJS({
         CSS_VARS2[result.var] = result.value;
       }
     };
-    var applySequenceVars = (props4, mediaName, options = {}) => {
+    var applySequenceVars = (props5, 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 = props5.unit || UNIT2.default;
+      const { sequence, scales } = props5;
       for (const key in sequence) {
         const item = sequence[key];
-        const value = (props4.type === TIMING2.type ? sequence[key].val : scales[key]) + unit;
+        const value = (props5.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 = (props5) => {
       const CONFIG22 = getActiveConfig5();
       const { TYPOGRAPHY: TYPOGRAPHY2, MEDIA: MEDIA2 } = CONFIG22;
-      for (const prop in props4) {
-        const mediaProps = props4[prop];
+      for (const prop in props5) {
+        const mediaProps = props5[prop];
         if (prop.slice(0, 1) === "@") {
-          const { type, base, ratio, range, subSequence, h1Matches, unit } = props4;
+          const { type, base, ratio, range, subSequence, h1Matches, unit } = props5;
           (0, import_utils142.merge)(mediaProps, {
             type,
             base,
@@ -2214,20 +2214,20 @@ var require_cjs = __commonJS({
         }
       }
     };
-    var applyHeadings = (props4) => {
+    var applyHeadings = (props5) => {
       const CONFIG22 = getActiveConfig5();
-      if (props4.h1Matches) {
-        const unit = props4.unit;
-        const HEADINGS = findHeadings(props4);
-        const { templates } = props4;
+      if (props5.h1Matches) {
+        const unit = props5.unit;
+        const HEADINGS = findHeadings(props5);
+        const { templates } = props5;
         for (const k in HEADINGS) {
           const headerName = `h${parseInt(k) + 1}`;
           const headerStyle = templates[headerName];
           templates[headerName] = {
             fontSize: CONFIG22.useVariable ? `var(${HEADINGS[k].variable})` : `${HEADINGS[k].scaling}${unit}`,
             margin: headerStyle ? headerStyle.margin : 0,
-            lineHeight: headerStyle ? headerStyle.lineHeight : props4.lineHeight,
-            letterSpacing: headerStyle ? headerStyle.letterSpacing : props4.letterSpacing,
+            lineHeight: headerStyle ? headerStyle.lineHeight : props5.lineHeight,
+            letterSpacing: headerStyle ? headerStyle.letterSpacing : props5.letterSpacing,
             fontWeight: headerStyle ? headerStyle.fontWeight : 900 - k * 100
           };
         }
@@ -2322,11 +2322,11 @@ var require_cjs = __commonJS({
         sequence
       );
     };
-    var getSpacingBasedOnRatio13 = (props4, propertyName, val) => {
+    var getSpacingBasedOnRatio13 = (props5, propertyName, val) => {
       const CONFIG22 = getActiveConfig5();
       const { SPACING: SPACING2 } = CONFIG22;
-      const { spacingRatio, unit } = props4;
-      const value = val || props4[propertyName];
+      const { spacingRatio, unit } = props5;
+      const value = val || props5[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, props5, 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, props5) => {
       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(props5);
+      keys.map((key) => setValue(FACTORY_NAME, props5[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, props5) => {
+      if (props5 === void 0 || props5 === 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)(props5)("string", "number")) {
+        delete obj[props5];
+      } else if ((0, import_types.isArray)(props5)) {
+        props5.forEach((prop) => delete obj[prop]);
       } else {
         throw new Error("Invalid input: props must be a string or an array of strings");
       }
@@ -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, props5) => {
+          if (props5 === void 0 || props5 === 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)(props5)("string", "number")) {
+            delete obj[props5];
+          } else if ((0, import_types.isArray)(props5)) {
+            props5.forEach((prop) => delete obj[prop]);
           } else {
             throw new Error("Invalid input: props must be a string or an array of strings");
           }
@@ -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 = (props5, sequenceProps) => {
+      const { key, variable, value, scaling, index } = props5;
       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 = (props5, sequenceProps) => {
+      const { key, base, value, ratio, variable, index } = props5;
       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 props5 = {
           key: letterKey,
           variable,
           value,
@@ -6026,9 +6022,9 @@ var require_cjs9 = __commonJS({
           ratio,
           index: key
         };
-        setSequenceValue(props4, sequenceProps);
+        setSequenceValue(props5, sequenceProps);
         if (subSequence)
-          generateSubSequence(props4, sequenceProps);
+          generateSubSequence(props5, sequenceProps);
       }
       return sequenceProps;
     };
@@ -6110,14 +6106,14 @@ var require_cjs9 = __commonJS({
         CSS_VARS2[result.var] = result.value;
       }
     };
-    var applySequenceVars = (props4, mediaName, options = {}) => {
+    var applySequenceVars = (props5, 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 = props5.unit || UNIT2.default;
+      const { sequence, scales } = props5;
       for (const key in sequence) {
         const item = sequence[key];
-        const value = (props4.type === TIMING2.type ? sequence[key].val : scales[key]) + unit;
+        const value = (props5.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 = (props5) => {
       const CONFIG22 = getActiveConfig5();
       const { TYPOGRAPHY: TYPOGRAPHY2, MEDIA: MEDIA2 } = CONFIG22;
-      for (const prop in props4) {
-        const mediaProps = props4[prop];
+      for (const prop in props5) {
+        const mediaProps = props5[prop];
         if (prop.slice(0, 1) === "@") {
-          const { type, base, ratio, range, subSequence, h1Matches, unit } = props4;
+          const { type, base, ratio, range, subSequence, h1Matches, unit } = props5;
           (0, import_utils142.merge)(mediaProps, {
             type,
             base,
@@ -6636,20 +6632,20 @@ var require_cjs9 = __commonJS({
         }
       }
     };
-    var applyHeadings = (props4) => {
+    var applyHeadings = (props5) => {
       const CONFIG22 = getActiveConfig5();
-      if (props4.h1Matches) {
-        const unit = props4.unit;
-        const HEADINGS = findHeadings(props4);
-        const { templates } = props4;
+      if (props5.h1Matches) {
+        const unit = props5.unit;
+        const HEADINGS = findHeadings(props5);
+        const { templates } = props5;
         for (const k in HEADINGS) {
           const headerName = `h${parseInt(k) + 1}`;
           const headerStyle = templates[headerName];
           templates[headerName] = {
             fontSize: CONFIG22.useVariable ? `var(${HEADINGS[k].variable})` : `${HEADINGS[k].scaling}${unit}`,
             margin: headerStyle ? headerStyle.margin : 0,
-            lineHeight: headerStyle ? headerStyle.lineHeight : props4.lineHeight,
-            letterSpacing: headerStyle ? headerStyle.letterSpacing : props4.letterSpacing,
+            lineHeight: headerStyle ? headerStyle.lineHeight : props5.lineHeight,
+            letterSpacing: headerStyle ? headerStyle.letterSpacing : props5.letterSpacing,
             fontWeight: headerStyle ? headerStyle.fontWeight : 900 - k * 100
           };
         }
@@ -6744,11 +6740,11 @@ var require_cjs9 = __commonJS({
         sequence
       );
     };
-    var getSpacingBasedOnRatio13 = (props4, propertyName, val) => {
+    var getSpacingBasedOnRatio13 = (props5, propertyName, val) => {
       const CONFIG22 = getActiveConfig5();
       const { SPACING: SPACING2 } = CONFIG22;
-      const { spacingRatio, unit } = props4;
-      const value = val || props4[propertyName];
+      const { spacingRatio, unit } = props5;
+      const value = val || props5[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, props5, 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, props5) => {
       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(props5);
+      keys.map((key) => setValue(FACTORY_NAME, props5[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, props5) => {
+          if (props5 === void 0 || props5 === 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)(props5)("string", "number")) {
+            delete obj[props5];
+          } else if ((0, import_types.isArray)(props5)) {
+            props5.forEach((prop) => delete obj[prop]);
           } else {
             throw new Error("Invalid input: props must be a string or an array of strings");
           }
@@ -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 = (props5, sequenceProps) => {
+      const { key, variable, value, scaling, index } = props5;
       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 = (props5, sequenceProps) => {
+      const { key, base, value, ratio, variable, index } = props5;
       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 props5 = {
           key: letterKey,
           variable,
           value,
@@ -8798,9 +8801,9 @@ var require_cjs11 = __commonJS({
           ratio,
           index: key
         };
-        setSequenceValue(props4, sequenceProps);
+        setSequenceValue(props5, sequenceProps);
         if (subSequence)
-          generateSubSequence(props4, sequenceProps);
+          generateSubSequence(props5, sequenceProps);
       }
       return sequenceProps;
     };
@@ -8882,14 +8885,14 @@ var require_cjs11 = __commonJS({
         CSS_VARS2[result.var] = result.value;
       }
     };
-    var applySequenceVars = (props4, mediaName, options = {}) => {
+    var applySequenceVars = (props5, 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 = props5.unit || UNIT2.default;
+      const { sequence, scales } = props5;
       for (const key in sequence) {
         const item = sequence[key];
-        const value = (props4.type === TIMING2.type ? sequence[key].val : scales[key]) + unit;
+        const value = (props5.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 = (props5) => {
       const CONFIG22 = getActiveConfig5();
       const { TYPOGRAPHY: TYPOGRAPHY2, MEDIA: MEDIA2 } = CONFIG22;
-      for (const prop in props4) {
-        const mediaProps = props4[prop];
+      for (const prop in props5) {
+        const mediaProps = props5[prop];
         if (prop.slice(0, 1) === "@") {
-          const { type, base, ratio, range, subSequence, h1Matches, unit } = props4;
+          const { type, base, ratio, range, subSequence, h1Matches, unit } = props5;
           (0, import_utils142.merge)(mediaProps, {
             type,
             base,
@@ -9408,20 +9411,20 @@ var require_cjs11 = __commonJS({
         }
       }
     };
-    var applyHeadings = (props4) => {
+    var applyHeadings = (props5) => {
       const CONFIG22 = getActiveConfig5();
-      if (props4.h1Matches) {
-        const unit = props4.unit;
-        const HEADINGS = findHeadings(props4);
-        const { templates } = props4;
+      if (props5.h1Matches) {
+        const unit = props5.unit;
+        const HEADINGS = findHeadings(props5);
+        const { templates } = props5;
         for (const k in HEADINGS) {
           const headerName = `h${parseInt(k) + 1}`;
           const headerStyle = templates[headerName];
           templates[headerName] = {
             fontSize: CONFIG22.useVariable ? `var(${HEADINGS[k].variable})` : `${HEADINGS[k].scaling}${unit}`,
             margin: headerStyle ? headerStyle.margin : 0,
-            lineHeight: headerStyle ? headerStyle.lineHeight : props4.lineHeight,
-            letterSpacing: headerStyle ? headerStyle.letterSpacing : props4.letterSpacing,
+            lineHeight: headerStyle ? headerStyle.lineHeight : props5.lineHeight,
+            letterSpacing: headerStyle ? headerStyle.letterSpacing : props5.letterSpacing,
             fontWeight: headerStyle ? headerStyle.fontWeight : 900 - k * 100
           };
         }
@@ -9516,11 +9519,11 @@ var require_cjs11 = __commonJS({
         sequence
       );
     };
-    var getSpacingBasedOnRatio13 = (props4, propertyName, val) => {
+    var getSpacingBasedOnRatio13 = (props5, propertyName, val) => {
       const CONFIG22 = getActiveConfig5();
       const { SPACING: SPACING2 } = CONFIG22;
-      const { spacingRatio, unit } = props4;
-      const value = val || props4[propertyName];
+      const { spacingRatio, unit } = props5;
+      const value = val || props5[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, props5, 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, props5) => {
       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(props5);
+      keys.map((key) => setValue(FACTORY_NAME, props5[key], key));
       return CONFIG22[FACTORY_NAME];
     };
     var SET_OPTIONS = {};
@@ -9917,6 +9920,8 @@ __export(domql_exports, {
   Clickable: () => Clickable,
   Collection: () => Collection,
   DatePicker: () => DatePicker,
+  DatePickerTwoColumns: () => DatePickerTwoColumns,
+  DatePickerYears: () => DatePickerYears,
   Direction: () => Direction,
   DropdownList: () => DropdownList,
   DropdownParent: () => DropdownParent,
@@ -9991,143 +9996,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: props5 }) => props5.boxSizing ? { boxSizing: props5.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: props5 }) => props5.display && { display: props5.display },
+    hide: ({ props: props5 }) => props5.hide && { display: "none" },
+    width: ({ props: props5 }) => props5.width && (0, import_scratch.getSpacingBasedOnRatio)(props5, "width"),
+    height: ({ props: props5 }) => props5.height && (0, import_scratch.getSpacingBasedOnRatio)(props5, "height"),
+    boxSize: ({ props: props5 }) => {
+      if (typeof props5.boxSize !== "string")
         return;
-      const [height, width] = props4.boxSize.split(" ");
+      const [height, width] = props5.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: props5 }) => props5.maxWidth && (0, import_scratch.getSpacingBasedOnRatio)(props5, "maxWidth"),
+    minWidth: ({ props: props5 }) => props5.minWidth && (0, import_scratch.getSpacingBasedOnRatio)(props5, "minWidth"),
+    widthRange: ({ props: props5 }) => {
+      if (typeof props5.widthRange !== "string")
         return;
-      const [minWidth, maxWidth] = props4.widthRange.split(" ");
+      const [minWidth, maxWidth] = props5.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: props5 }) => props5.maxHeight && (0, import_scratch.getSpacingBasedOnRatio)(props5, "maxHeight"),
+    minHeight: ({ props: props5 }) => props5.minHeight && (0, import_scratch.getSpacingBasedOnRatio)(props5, "minHeight"),
+    heightRange: ({ props: props5 }) => {
+      if (typeof props5.heightRange !== "string")
         return;
-      const [minHeight, maxHeight] = props4.heightRange.split(" ");
+      const [minHeight, maxHeight] = props5.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: props5 }) => props5.direction && { direction: props5.direction },
+    aspectRatio: ({ props: props5 }) => props5.aspectRatio && { aspectRatio: props5.aspectRatio },
+    borderWidth: ({ props: props5 }) => props5.borderWidth ? (0, import_scratch.getSpacingBasedOnRatio)(props5, "borderWidth") : null,
+    padding: ({ props: props5 }) => props5.padding ? (0, import_scratch.getSpacingBasedOnRatio)(props5, "padding") : null,
+    paddingInline: ({ props: props5 }) => {
+      if (typeof props5.paddingInline !== "string")
         return;
-      const [paddingInlineStart, paddingInlineEnd] = props4.paddingInline.split(" ");
+      const [paddingInlineStart, paddingInlineEnd] = props5.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: props5 }) => {
+      if (typeof props5.paddingBlock !== "string")
         return;
-      const [paddingBlockStart, paddingBlockEnd] = props4.paddingBlock.split(" ");
+      const [paddingBlockStart, paddingBlockEnd] = props5.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: props5 }) => props5.paddingInlineStart ? (0, import_scratch.getSpacingBasedOnRatio)(props5, "paddingInlineStart") : null,
+    paddingInlineEnd: ({ props: props5 }) => props5.paddingInlineEnd ? (0, import_scratch.getSpacingBasedOnRatio)(props5, "paddingInlineEnd") : null,
+    paddingBlockStart: ({ props: props5 }) => props5.paddingBlockStart ? (0, import_scratch.getSpacingBasedOnRatio)(props5, "paddingBlockStart") : null,
+    paddingBlockEnd: ({ props: props5 }) => props5.paddingBlockEnd ? (0, import_scratch.getSpacingBasedOnRatio)(props5, "paddingBlockEnd") : null,
+    margin: ({ props: props5 }) => props5.margin ? (0, import_scratch.getSpacingBasedOnRatio)(props5, "margin") : null,
+    marginInline: ({ props: props5 }) => {
+      if (typeof props5.marginInline !== "string")
         return;
-      const [marginInlineStart, marginInlineEnd] = props4.marginInline.split(" ");
+      const [marginInlineStart, marginInlineEnd] = props5.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: props5 }) => {
+      if (typeof props5.marginBlock !== "string")
         return;
-      const [marginBlockStart, marginBlockEnd] = props4.marginBlock.split(" ");
+      const [marginBlockStart, marginBlockEnd] = props5.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: props5 }) => props5.marginInlineStart ? (0, import_scratch.getSpacingBasedOnRatio)(props5, "marginInlineStart") : null,
+    marginInlineEnd: ({ props: props5 }) => props5.marginInlineEnd ? (0, import_scratch.getSpacingBasedOnRatio)(props5, "marginInlineEnd") : null,
+    marginBlockStart: ({ props: props5 }) => props5.marginBlockStart ? (0, import_scratch.getSpacingBasedOnRatio)(props5, "marginBlockStart") : null,
+    marginBlockEnd: ({ props: props5 }) => props5.marginBlockEnd ? (0, import_scratch.getSpacingBasedOnRatio)(props5, "marginBlockEnd") : null,
+    gap: ({ props: props5 }) => props5.gap ? {
+      gap: (0, import_scratch.transfromGap)(props5.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: props5 }) => props5.gridArea && { gridArea: props5.gridArea },
+    flex: ({ props: props5 }) => props5.flex && { flex: props5.flex },
+    flexDirection: ({ props: props5 }) => props5.flexDirection && { flexDirection: props5.flexDirection },
+    alignItems: ({ props: props5 }) => props5.alignItems && { alignItems: props5.alignItems },
+    alignContent: ({ props: props5 }) => props5.alignContent && { alignContent: props5.alignContent },
+    justifyContent: ({ props: props5 }) => props5.justifyContent && { justifyContent: props5.justifyContent },
+    justifyItems: ({ props: props5 }) => props5.justifyItems && { justifyItems: props5.justifyItems },
+    alignSelf: ({ props: props5 }) => props5.alignSelf && { alignSelf: props5.alignSelf },
+    order: ({ props: props5 }) => props5.order && { order: props5.order },
+    flexWrap: ({ props: props5 }) => props5.flexWrap && {
       display: "flex",
-      flexFlow: props4.flexWrap
+      flexFlow: props5.flexWrap
     },
-    flexFlow: ({ props: props4 }) => props4.flexFlow && {
+    flexFlow: ({ props: props5 }) => props5.flexFlow && {
       display: "flex",
-      flexFlow: props4.flexFlow
+      flexFlow: props5.flexFlow
     },
-    flexAlign: ({ props: props4 }) => {
-      if (typeof props4.flexAlign !== "string")
+    flexAlign: ({ props: props5 }) => {
+      if (typeof props5.flexAlign !== "string")
         return;
-      const [alignItems, justifyContent] = props4.flexAlign.split(" ");
+      const [alignItems, justifyContent] = props5.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: props5 }) => props5.gridColumn && { gridColumn: props5.gridColumn },
+    gridColumnStart: ({ props: props5 }) => props5.columnStart ? {
+      gridColumnStart: props5.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: props5 }) => props5.gridRow && { gridRow: props5.gridRow },
+    gridRowStart: ({ props: props5 }) => props5.rowStart ? { gridRowStart: props5.rowStart } : null,
+    size: ({ props: props5 }) => {
+      if (typeof props5.heightRange !== "string")
         return;
-      const [minHeight, maxHeight] = props4.heightRange.split(" ");
+      const [minHeight, maxHeight] = props5.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: props5 }) => props5.columns && { columns: props5.columns },
+    columnGap: ({ props: props5 }) => props5.columnGap ? (0, import_scratch.getSpacingBasedOnRatio)(props5, "columnGap") : null,
+    columnSpan: ({ props: props5 }) => props5.columnSpan && { columns: props5.columnSpan },
+    columnFill: ({ props: props5 }) => props5.columnFill && { columns: props5.columnFill },
+    columnCount: ({ props: props5 }) => props5.columnCount && { columns: props5.columnCount }
   }
 };
 var Span = { tag: "span" };
@@ -10142,7 +10147,7 @@ var Direction = {
     direction: "ltr"
   },
   class: {
-    direction: ({ props: props4 }) => ({ direction: props4.direction })
+    direction: ({ props: props5 }) => ({ direction: props5.direction })
   }
 };
 
@@ -10152,12 +10157,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: props5 }) => props5.flow && { flexFlow: props5.flow },
+    wrap: ({ props: props5 }) => props5.wrap && { flexWrap: props5.wrap },
+    align: ({ props: props5 }) => {
+      if (typeof props5.align !== "string")
         return;
-      const [alignItems, justifyContent] = props4.align.split(" ");
+      const [alignItems, justifyContent] = props5.align.split(" ");
       return { alignItems, justifyContent };
     }
   }
@@ -10168,22 +10173,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: props5 }) => props5.area ? { gridArea: props5.area } : null,
+    template: ({ props: props5 }) => props5.template ? { gridTemplate: props5.template } : null,
+    templateAreas: ({ props: props5 }) => props5.templateAreas ? { gridTemplateAreas: props5.templateAreas } : null,
+    column: ({ props: props5 }) => props5.column ? { gridColumn: props5.column } : null,
+    columns: ({ props: props5 }) => props5.columns ? { gridTemplateColumns: props5.columns } : null,
+    templateColumns: ({ props: props5 }) => props5.templateColumns ? { gridTemplateColumns: props5.templateColumns } : null,
+    autoColumns: ({ props: props5 }) => props5.autoColumns ? { gridAutoColumns: props5.autoColumns } : null,
+    columnStart: ({ props: props5 }) => props5.columnStart ? { gridColumnStart: props5.columnStart } : null,
+    row: ({ props: props5 }) => props5.row ? { gridRow: props5.row } : null,
+    rows: ({ props: props5 }) => props5.rows ? { gridTemplateRows: props5.rows } : null,
+    templateRows: ({ props: props5 }) => props5.templateRows ? { gridTemplateRows: props5.templateRows } : null,
+    autoRows: ({ props: props5 }) => props5.autoRows ? { gridAutoRows: props5.autoRows } : null,
+    rowStart: ({ props: props5 }) => props5.rowStart ? { gridRowStart: props5.rowStart } : null,
+    autoFlow: ({ props: props5 }) => props5.autoFlow ? { gridAutoFlow: props5.autoFlow } : null,
+    columnGap: ({ props: props5 }) => props5.columnGap ? (0, import_scratch2.getSpacingBasedOnRatio)(props5, "columnGap") : null,
+    rowGap: ({ props: props5 }) => props5.rowGap ? (0, import_scratch2.getSpacingBasedOnRatio)(props5, "rowGap") : null
   }
 };
 
@@ -10196,9 +10201,9 @@ var Img = {
     title: ""
   },
   attr: {
-    src: ({ props: props4 }) => props4.src,
-    alt: ({ props: props4 }) => props4.alt,
-    title: ({ props: props4 }) => props4.title || props4.alt
+    src: ({ props: props5 }) => props5.src,
+    alt: ({ props: props5 }) => props5.alt,
+    title: ({ props: props5 }) => props5.title || props5.alt
   }
 };
 
@@ -10207,9 +10212,9 @@ var Form = {
   tag: "form",
   props: {},
   attr: {
-    action: ({ props: props4 }) => props4.action,
-    method: ({ props: props4 }) => props4.method,
-    enctype: ({ props: props4 }) => props4.enctype
+    action: ({ props: props5 }) => props5.action,
+    method: ({ props: props5 }) => props5.method,
+    enctype: ({ props: props5 }) => props5.enctype
   }
 };
 
@@ -10226,24 +10231,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: props5 }) => props5.transition && {
+      transition: (0, import_scratch3.splitTransition)(props5.transition)
     },
-    willChange: ({ props: props4 }) => props4.willChange && {
-      willChange: props4.willChange
+    willChange: ({ props: props5 }) => props5.willChange && {
+      willChange: props5.willChange
     },
-    transitionDuration: ({ props: props4 }) => props4.transitionDuration && {
-      transitionDuration: (0, import_scratch3.transformDuration)(props4.transitionDuration)
+    transitionDuration: ({ props: props5 }) => props5.transitionDuration && {
+      transitionDuration: (0, import_scratch3.transformDuration)(props5.transitionDuration)
     },
-    transitionDelay: ({ props: props4 }) => props4.transitionDelay && {
-      transitionDelay: (0, import_scratch3.transformDuration)(props4.transitionDelay)
+    transitionDelay: ({ props: props5 }) => props5.transitionDelay && {
+      transitionDelay: (0, import_scratch3.transformDuration)(props5.transitionDelay)
     },
-    transitionTimingFunction: ({ props: props4 }) => props4.transitionTimingFunction && {
-      transitionTimingFunction: (0, import_scratch3.getTimingFunction)(props4.transitionTimingFunction)
+    transitionTimingFunction: ({ props: props5 }) => props5.transitionTimingFunction && {
+      transitionTimingFunction: (0, import_scratch3.getTimingFunction)(props5.transitionTimingFunction)
     },
-    transitionProperty: ({ props: props4 }) => props4.transitionProperty && {
-      transitionProperty: props4.transitionProperty,
-      willChange: props4.transitionProperty
+    transitionProperty: ({ props: props5 }) => props5.transitionProperty && {
+      transitionProperty: props5.transitionProperty,
+      willChange: props5.transitionProperty
     }
   }
 };
@@ -10258,11 +10263,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: props5 }) => {
+  return (0, import_scratch4.getColor)(props5.shapeDirectionColor) || (0, import_scratch4.getColor)(props5.borderColor) || (0, import_scratch4.getColor)(props5.backgroundColor) || (0, import_scratch4.getColor)(props5.background);
 };
-var inheritTransition = ({ props: props4 }) => {
-  const exec5 = Timing.class.transition({ props: props4 });
+var inheritTransition = ({ props: props5 }) => {
+  const exec5 = Timing.class.transition({ props: props5 });
   return exec5 && exec5.transition;
 };
 var SHAPES = {
@@ -10272,16 +10277,16 @@ var SHAPES = {
   tv: {
     borderRadius: "1.15em/2.5em"
   },
-  tooltip: ({ props: props4 }) => ({
-    position: props4.position || "relative",
+  tooltip: ({ props: props5 }) => ({
+    position: props5.position || "relative",
     "&:before": {
       content: '""',
       display: "block",
       width: "0px",
       height: "0px",
       border: ".35em solid",
-      borderColor: getComputedBackgroundColor({ props: props4 }),
-      transition: inheritTransition({ props: props4 }),
+      borderColor: getComputedBackgroundColor({ props: props5 }),
+      transition: inheritTransition({ props: props5 }),
       transitionProperty: "border-color",
       position: "absolute",
       borderRadius: ".15em"
@@ -10317,13 +10322,13 @@ var SHAPES = {
       }
     }
   },
-  tag: ({ props: props4 }) => ({
+  tag: ({ props: props5 }) => ({
     position: "relative",
     "&:before": {
       content: '""',
       display: "block",
-      background: getComputedBackgroundColor({ props: props4 }),
-      transition: inheritTransition({ props: props4 }),
+      background: getComputedBackgroundColor({ props: props5 }),
+      transition: inheritTransition({ props: props5 }),
       transitionProperty: "background",
       borderRadius: ".25em",
       position: "absolute",
@@ -10364,7 +10369,7 @@ var SHAPES = {
       }
     }
   },
-  hexagon: ({ props: props4 }) => ({
+  hexagon: ({ props: props5 }) => ({
     position: "relative",
     "&:before, &:after": {
       content: '""',
@@ -10376,8 +10381,8 @@ var SHAPES = {
       top: "50%",
       transformOrigin: "50% 50%",
       height: "73%",
-      background: getComputedBackgroundColor({ props: props4 }),
-      transition: inheritTransition({ props: props4 }),
+      background: getComputedBackgroundColor({ props: props5 }),
+      transition: inheritTransition({ props: props5 }),
       transitionProperty: "background"
     },
     "&:before": {
@@ -10389,7 +10394,7 @@ var SHAPES = {
       transform: "translate3d(-50%, -50%, 1px) rotate(45deg)"
     }
   }),
-  chevron: ({ props: props4 }) => ({
+  chevron: ({ props: props5 }) => ({
     position: "relative",
     // overflow: 'hidden',
     "&:before, &:after": {
@@ -10400,14 +10405,14 @@ var SHAPES = {
       aspectRatio: "1/1",
       top: "50%",
       transformOrigin: "50% 50%",
-      transition: inheritTransition({ props: props4 }),
+      transition: inheritTransition({ props: props5 }),
       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: props5 })} 25%, transparent 25%), linear-gradient(315deg, ${getComputedBackgroundColor({ props: props5 })} 25%, transparent 25%)`
     },
     "&:after": {
-      background: getComputedBackgroundColor({ props: props4 }),
+      background: getComputedBackgroundColor({ props: props5 }),
       borderRadius: ".25em"
     }
   }),
@@ -10446,153 +10451,153 @@ var getSystemTheme = ({ context, state }) => {
 };
 var Theme = {
   class: {
-    depth: ({ props: props4 }) => props4.depth && depth[props4.depth],
+    depth: ({ props: props5 }) => props5.depth && depth[props5.depth],
     theme: (element) => {
-      const { props: props4 } = element;
+      const { props: props5 } = element;
       const globalTheme = getSystemTheme(element);
-      if (!props4.theme)
+      if (!props5.theme)
         return;
-      return (0, import_scratch5.getMediaTheme)(props4.theme, `@${props4.themeModifier || globalTheme}`);
+      return (0, import_scratch5.getMediaTheme)(props5.theme, `@${props5.themeModifier || globalTheme}`);
     },
     color: (element) => {
-      const { props: props4 } = element;
+      const { props: props5 } = element;
       const globalTheme = getSystemTheme(element);
-      if (!props4.color)
+      if (!props5.color)
         return;
       return {
-        color: (0, import_scratch5.getMediaColor)(props4.color, globalTheme)
+        color: (0, import_scratch5.getMediaColor)(props5.color, globalTheme)
       };
     },
     background: (element) => {
-      const { props: props4 } = element;
+      const { props: props5 } = element;
       const globalTheme = getSystemTheme(element);
-      if (!props4.background)
+      if (!props5.background)
         return;
       return {
-        background: (0, import_scratch5.getMediaColor)(props4.background, globalTheme)
+        background: (0, import_scratch5.getMediaColor)(props5.background, globalTheme)
       };
     },
     backgroundColor: (element) => {
-      const { props: props4 } = element;
+      const { props: props5 } = element;
       const globalTheme = getSystemTheme(element);
-      if (!props4.backgroundColor)
+      if (!props5.backgroundColor)
         return;
       return {
-        backgroundColor: (0, import_scratch5.getMediaColor)(props4.backgroundColor, globalTheme)
+        backgroundColor: (0, import_scratch5.getMediaColor)(props5.backgroundColor, globalTheme)
       };
     },
     backgroundImage: (element) => {
-      const { props: props4 } = element;
+      const { props: props5 } = element;
       const globalTheme = getSystemTheme(element);
-      if (!props4.backgroundImage)
+      if (!props5.backgroundImage)
         return;
       return {
-        backgroundImage: (0, import_scratch5.transformBackgroundImage)(props4.backgroundImage, globalTheme)
+        backgroundImage: (0, import_scratch5.transformBackgroundImage)(props5.backgroundImage, globalTheme)
       };
     },
-    backgroundSize: ({ props: props4 }) => props4.backgroundSize ? {
-      backgroundSize: props4.backgroundSize
+    backgroundSize: ({ props: props5 }) => props5.backgroundSize ? {
+      backgroundSize: props5.backgroundSize
     } : null,
-    backgroundPosition: ({ props: props4 }) => props4.backgroundPosition ? {
-      backgroundPosition: props4.backgroundPosition
+    backgroundPosition: ({ props: props5 }) => props5.backgroundPosition ? {
+      backgroundPosition: props5.backgroundPosition
     } : null,
-    textStroke: ({ props: props4 }) => props4.textStroke ? {
-      WebkitTextStroke: (0, import_scratch5.transformTextStroke)(props4.textStroke)
+    textStroke: ({ props: props5 }) => props5.textStroke ? {
+      WebkitTextStroke: (0, import_scratch5.transformTextStroke)(props5.textStroke)
     } : null,
-    outline: ({ props: props4 }) => props4.outline && {
-      outline: (0, import_scratch5.transformBorder)(props4.outline)
+    outline: ({ props: props5 }) => props5.outline && {
+      outline: (0, import_scratch5.transformBorder)(props5.outline)
     },
-    border: ({ props: props4 }) => props4.border && {
-      border: (0, import_scratch5.transformBorder)(props4.border)
+    border: ({ props: props5 }) => props5.border && {
+      border: (0, import_scratch5.transformBorder)(props5.border)
     },
-    borderColor: ({ props: props4 }) => props4.borderColor && {
-      borderColor: (0, import_scratch5.getMediaColor)(props4.borderColor)
+    borderColor: ({ props: props5 }) => props5.borderColor && {
+      borderColor: (0, import_scratch5.getMediaColor)(props5.borderColor)
     },
-    borderStyle: ({ props: props4 }) => props4.borderStyle && {
-      borderStyle: props4.borderStyle
+    borderStyle: ({ props: props5 }) => props5.borderStyle && {
+      borderStyle: props5.borderStyle
     },
-    borderLeft: ({ props: props4 }) => props4.borderLeft && {
-      borderLeft: (0, import_scratch5.transformBorder)(props4.borderLeft)
+    borderLeft: ({ props: props5 }) => props5.borderLeft && {
+      borderLeft: (0, import_scratch5.transformBorder)(props5.borderLeft)
     },
-    borderTop: ({ props: props4 }) => props4.borderTop && {
-      borderTop: (0, import_scratch5.transformBorder)(props4.borderTop)
+    borderTop: ({ props: props5 }) => props5.borderTop && {
+      borderTop: (0, import_scratch5.transformBorder)(props5.borderTop)
     },
-    borderRight: ({ props: props4 }) => props4.borderRight && {
-      borderRight: (0, import_scratch5.transformBorder)(props4.borderRight)
+    borderRight: ({ props: props5 }) => props5.borderRight && {
+      borderRight: (0, import_scratch5.transformBorder)(props5.borderRight)
     },
-    borderBottom: ({ props: props4 }) => props4.borderBottom && {
-      borderBottom: (0, import_scratch5.transformBorder)(props4.borderBottom)
+    borderBottom: ({ props: props5 }) => props5.borderBottom && {
+      borderBottom: (0, import_scratch5.transformBorder)(props5.borderBottom)
     },
-    boxShadow: ({ props: props4 }) => props4.boxShadow && {
-      boxShadow: (0, import_scratch5.transformShadow)(props4.boxShadow)
+    boxShadow: ({ props: props5 }) => props5.boxShadow && {
+      boxShadow: (0, import_scratch5.transformShadow)(props5.boxShadow)
     },
-    textShadow: ({ props: props4 }) => props4.textShadow && {
-      textShadow: (0, import_scratch5.transformShadow)(props4.textShadow)
+    textShadow: ({ props: props5 }) => props5.textShadow && {
+      textShadow: (0, import_scratch5.transformShadow)(props5.textShadow)
     },
-    opacity: ({ props: props4 }) => props4.opacity && {
-      opacity: props4.opacity
+    opacity: ({ props: props5 }) => props5.opacity && {
+      opacity: props5.opacity
     },
-    visibility: ({ props: props4 }) => props4.visibility && {
-      visibility: props4.visibility
+    visibility: ({ props: props5 }) => props5.visibility && {
+      visibility: props5.visibility
     },
-    columnRule: ({ props: props4 }) => props4.columnRule && {
-      columnRule: (0, import_scratch5.transformBorder)(props4.columnRule)
+    columnRule: ({ props: props5 }) => props5.columnRule && {
+      columnRule: (0, import_scratch5.transformBorder)(props5.columnRule)
     }
   }
 };
 
 // Atoms/Media.js
 var keySetters = {
-  "@": (key, props4, result, element, isSubtree) => applyMediaProps(
+  "@": (key, props5, result, element, isSubtree) => applyMediaProps(
     key,
-    props4,
+    props5,
     isSubtree ? result : result && result.media,
     element
   ),
-  ":": (key, props4, result, element, isSubtree) => applySelectorProps(
+  ":": (key, props5, result, element, isSubtree) => applySelectorProps(
     key,
-    props4,
+    props5,
     isSubtree ? result : result && result.selector,
     element
   ),
-  "[": (key, props4, result, element, isSubtree) => applySelectorProps(
+  "[": (key, props5, result, element, isSubtree) => applySelectorProps(
     key,
-    props4,
+    props5,
     isSubtree ? result : result && result.selector,
     element
   ),
-  "&": (key, props4, result, element, isSubtree) => applySelectorProps(
+  "&": (key, props5, result, element, isSubtree) => applySelectorProps(
     key,
-    props4,
+    props5,
     isSubtree ? result : result && result.selector,
     element
   ),
-  $: (key, props4, result, element, isSubtree) => applyCaseProps(
+  $: (key, props5, result, element, isSubtree) => applyCaseProps(
     key,
-    props4,
+    props5,
     isSubtree ? result : result && result.case,
     element
   ),
-  ".": (key, props4, result, element, isSubtree) => applyConditionalCaseProps(
+  ".": (key, props5, result, element, isSubtree) => applyConditionalCaseProps(
     key,
-    props4,
+    props5,
     isSubtree ? result : result && result.case,
     element
   ),
-  "!": (key, props4, result, element, isSubtree) => applyConditionalFalsyProps(
+  "!": (key, props5, result, element, isSubtree) => applyConditionalFalsyProps(
     key,
-    props4,
+    props5,
     isSubtree ? result : result && result.case,
     element
   )
 };
-var execClass = (key, props4, result, element) => {
+var execClass = (key, props5, result, element) => {
   const { class: className } = element;
   const classnameExec = className[key];
   if (typeof classnameExec !== "function")
     return;
   let classExec = classnameExec({
-    props: props4,
+    props: props5,
     context: element.context,
     state: element.state
   });
@@ -10604,27 +10609,27 @@ var execClass = (key, props4, result, element) => {
   }
   return classExec;
 };
-var convertPropsToClass = (props4, result, element) => {
+var convertPropsToClass = (props5, result, element) => {
   const propsClassObj = {};
-  for (const key in props4) {
+  for (const key in props5) {
     const setter = keySetters[key.slice(0, 1)];
     if (setter) {
-      setter(key, props4[key], propsClassObj, element, true);
+      setter(key, props5[key], propsClassObj, element, true);
       continue;
     } else {
-      execClass(key, props4, propsClassObj, element);
+      execClass(key, props5, propsClassObj, element);
     }
   }
   return propsClassObj;
 };
-var applyMediaProps = (key, props4, result, element) => {
+var applyMediaProps = (key, props5, 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(props5, result, element);
   const name = key.slice(1);
   const isTheme = ["dark", "light"].includes(name);
   const matchesGlobal = name === globalTheme;
@@ -10637,49 +10642,49 @@ var applyMediaProps = (key, props4, result, element) => {
   result[mediaKey] = generatedClass;
   return result[mediaKey];
 };
-var applySelectorProps = (key, props4, result, element) => {
+var applySelectorProps = (key, props5, result, element) => {
   const selectorKey = `&${key}`;
-  result[selectorKey] = convertPropsToClass(props4, result, element);
+  result[selectorKey] = convertPropsToClass(props5, result, element);
   return result[selectorKey];
 };
-var applyCaseProps = (key, props4, result, element) => {
+var applyCaseProps = (key, props5, result, element) => {
   const { CASES } = element.context && element.context.designSystem;
   const caseKey = key.slice(1);
   const isPropTrue = element.props[caseKey];
   if (!CASES[caseKey] && !isPropTrue)
     return;
-  return (0, import_utils.merge)(result, convertPropsToClass(props4, result, element));
+  return (0, import_utils.merge)(result, convertPropsToClass(props5, result, element));
 };
-var applyConditionalCaseProps = (key, props4, result, element) => {
+var applyConditionalCaseProps = (key, props5, 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(props5, result, element));
 };
-var applyConditionalFalsyProps = (key, props4, result, element) => {
+var applyConditionalFalsyProps = (key, props5, 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(props5, result, element));
 };
-var applyTrueProps = (props4, result, element) => (0, import_utils.merge)(result, convertPropsToClass(props4, result, element));
+var applyTrueProps = (props5, result, element) => (0, import_utils.merge)(result, convertPropsToClass(props5, result, element));
 var beforeClassAssign = (element, s) => {
-  const { props: props4, class: className } = element;
+  const { props: props5, class: className } = element;
   const CLASS_NAMES = {
     media: {},
     selector: {},
     case: {}
   };
-  for (const key in props4) {
+  for (const key in props5) {
     const setter = keySetters[key.slice(0, 1)];
     if (setter)
-      setter(key, props4[key], CLASS_NAMES, element);
+      setter(key, props5[key], CLASS_NAMES, element);
   }
   (0, import_utils.overwriteShallow)(className, CLASS_NAMES);
 };
 var initUpdate = (changes, element) => {
-  const { props: props4, context, class: className } = element;
+  const { props: props5, context, class: className } = element;
   if (!context)
     return;
   const globalTheme = context.designSystem.globalTheme;
@@ -10699,10 +10704,10 @@ var initUpdate = (changes, element) => {
       selector: {},
       case: {}
     };
-    for (const key in props4) {
+    for (const key in props5) {
       const setter = keySetters[key.slice(0, 1)];
       if (key === "theme") {
-        props4.update({
+        props5.update({
           themeModifier: globalTheme
         }, {
           preventRecursive: true,
@@ -10710,9 +10715,9 @@ var initUpdate = (changes, element) => {
           preventDefineUpdate: true
         });
       } else if (key === "true")
-        applyTrueProps(props4[key], CLASS_NAMES, element);
+        applyTrueProps(props5[key], CLASS_NAMES, element);
       if (setter)
-        setter(key, props4[key], CLASS_NAMES, element);
+        setter(key, props5[key], CLASS_NAMES, element);
     }
     if (Object.keys(CLASS_NAMES.media).length) {
       className.media = CLASS_NAMES.media;
@@ -10741,19 +10746,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: props5 }) => props5.src,
+    loading: ({ props: props5 }) => props5.loading,
+    allowfullscreen: ({ props: props5 }) => props5.allowfullscreen,
+    referrerpolicy: ({ props: props5 }) => props5.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: props5 }) => props5.userSelect && { userSelect: props5.userSelect },
+    pointerEvents: ({ props: props5 }) => props5.pointerEvents && { pointerEvents: props5.pointerEvents },
+    cursor: ({ props: props5 }) => props5.cursor && { cursor: props5.cursor }
   }
 };
 
@@ -10806,8 +10811,8 @@ var Focusable = {
     }
   },
   attr: {
-    placeholder: ({ props: props4 }) => props4.placeholder,
-    tabIndex: ({ props: props4 }) => props4.tabIndex
+    placeholder: ({ props: props5 }) => props5.placeholder,
+    tabIndex: ({ props: props5 }) => props5.tabIndex
   }
 };
 var FocusableComponent = {
@@ -10824,14 +10829,14 @@ var FocusableComponent = {
     style
   },
   attr: {
-    type: ({ props: props4 }) => props4.type
+    type: ({ props: props5 }) => props5.type
   }
 };
 
 // Atoms/Overflow.js
 var Overflow = {
   class: {
-    overflow: ({ props: props4 }) => props4.overflow && { overflow: props4.overflow }
+    overflow: ({ props: props5 }) => props5.overflow && { overflow: props5.overflow }
   }
 };
 
@@ -10907,17 +10912,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: props5 }) => props5.position && { position: props5.position },
+    inset: ({ props: props5 }) => {
+      const { inset } = props5;
       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: props5 }) => (0, import_scratch6.getSpacingByKey)(props5.left, "left"),
+    top: ({ props: props5 }) => (0, import_scratch6.getSpacingByKey)(props5.top, "top"),
+    right: ({ props: props5 }) => (0, import_scratch6.getSpacingByKey)(props5.right, "right"),
+    bottom: ({ props: props5 }) => (0, import_scratch6.getSpacingByKey)(props5.bottom, "bottom")
   }
 };
 
@@ -10928,30 +10933,30 @@ var Picture = {
     tag: "source",
     attr: {
       media: (element) => {
-        const { props: props4, key, context } = element;
+        const { props: props5, key, context } = element;
         const { MEDIA } = context.designSystem;
         const globalTheme = getSystemTheme(element);
-        const mediaName = (props4.media || key).slice(1);
+        const mediaName = (props5.media || key).slice(1);
         if (mediaName === globalTheme)
           return "(min-width: 0px)";
         else if (mediaName === "dark" || mediaName === "light")
           return "(max-width: 0px)";
         return MEDIA[mediaName];
       },
-      srcset: ({ props: props4 }) => props4.srcset
+      srcset: ({ props: props5 }) => props5.srcset
     }
   },
-  Img: ({ props: props4 }) => ({
+  Img: ({ props: props5 }) => ({
     width: "inherit",
     height: "inherit",
-    src: props4.src
+    src: props5.src
   })
 };
 
 // Atoms/Pseudo.js
 var Pseudo = {
   class: {
-    content: ({ props: props4 }) => props4.content && { content: props4.content }
+    content: ({ props: props5 }) => props5.content && { content: props5.content }
   }
 };
 
@@ -10965,25 +10970,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: props5, context, ...el }) => {
     const { designSystem, utils } = context;
     const SVG = designSystem && designSystem.SVG;
-    const useSvgSprite = props4.spriteId || context.designSystem && context.designSystem.useSvgSprite;
+    const useSvgSprite = props5.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 && props5.src)
+      return props5.src;
+    const spriteId = props5.spriteId;
     if (spriteId)
       return useSVGSymbol(spriteId);
-    const symbolId = Symbol.for(props4.src);
+    const symbolId = Symbol.for(props5.src);
     let SVGKey = SVG[symbolId];
     if (SVGKey && SVG[SVGKey])
       return useSVGSymbol(SVGKey);
     SVGKey = SVG[symbolId] = Math.random();
-    if (props4.src) {
+    if (props5.src) {
       init({
-        svg: { [SVGKey]: props4.src }
+        svg: { [SVGKey]: props5.src }
       }, {
         document: context.document,
         emotion: context.emotion
@@ -10996,60 +11001,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, props5, 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)(props5, 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: props5 }) => {
+      const { shape } = props5;
+      return (0, import_utils3.exec)(SHAPES[shape], { props: props5 });
     },
-    shapeDirection: ({ props: props4 }) => {
-      const { shape, shapeDirection } = props4;
+    shapeDirection: ({ props: props5 }) => {
+      const { shape, shapeDirection } = props5;
       if (!shape || !shapeDirection)
         return;
       const shapeDir = SHAPES[shape + "Direction"];
       return shape && shapeDir ? shapeDir[shapeDirection || "left"] : null;
     },
-    shapeDirectionColor: ({ props: props4 }) => {
-      const { background, backgroundColor } = props4;
+    shapeDirectionColor: ({ props: props5 }) => {
+      const { background, backgroundColor } = props5;
       const borderColor = {
         borderColor: (0, import_scratch7.getMediaColor)(background || backgroundColor)
       };
-      return props4.shapeDirection ? borderColor : null;
+      return props5.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: props5, key, ...el }) => transformBorderRadius(props5.round || props5.borderRadius, props5, "round"),
+    borderRadius: ({ props: props5, key, ...el }) => transformBorderRadius(props5.borderRadius || props5.round, props5, "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: props5, state }) => {
+    if (props5.text === true)
+      return state && state[key] || props5 && props5[key];
+    return props5.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: props5 }) => props5.fontSize ? (0, import_scratch8.getFontSizeByKey)(props5.fontSize) : null,
+    fontFamily: ({ props: props5 }) => props5.fontFamily && { fontFamily: (0, import_scratch8.getFontFamily)(props5.fontFamily) || props5.fontFamily },
+    lineHeight: ({ props: props5 }) => props5.lineHeight && { lineHeight: props5.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: props5 }) => props5.textDecoration && { textDecoration: props5.textDecoration },
+    textTransform: ({ props: props5 }) => props5.textTransform && { textTransform: props5.textTransform },
+    whiteSpace: ({ props: props5 }) => props5.whiteSpace && { whiteSpace: props5.whiteSpace },
+    letterSpacing: ({ props: props5 }) => props5.letterSpacing && { letterSpacing: props5.letterSpacing },
+    textAlign: ({ props: props5 }) => props5.textAlign && { textAlign: props5.textAlign },
+    fontWeight: ({ props: props5 }) => props5.fontWeight && {
+      fontWeight: props5.fontWeight,
+      fontVariationSettings: '"wght" ' + props5.fontWeight
     }
   }
 };
@@ -11083,15 +11088,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: props5 }) => props5.transform && { transform: props5.transform },
+    transformOrigin: ({ props: props5 }) => props5.transformOrigin && { transformOrigin: props5.transformOrigin }
   }
 };
 
 // Atoms/XYZ.js
 var XYZ = {
   class: {
-    zIndex: ({ props: props4 }) => props4.zIndex && { zIndex: props4.zIndex }
+    zIndex: ({ props: props5 }) => props5.zIndex && { zIndex: props5.zIndex }
   }
 };
 
@@ -11169,9 +11174,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 +11253,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, props5, children, length2) {
+  return { value, root, parent, type, props: props5, 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, props5) {
+  return assign(node("", null, null, "", null, null, 0), root, { length: -root.length }, props5);
 }
 function char() {
   return character;
@@ -11383,7 +11388,7 @@ function parse(value, root, parent, rule, rules, rulesets, pseudo, points, decla
   var ampersand = 1;
   var character2 = 0;
   var type = "";
-  var props4 = rules;
+  var props5 = rules;
   var children = rulesets;
   var reference = rule;
   var characters2 = type;
@@ -11437,17 +11442,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, props5 = [], children = [], length2), rulesets);
             if (character2 === 123)
               if (offset === 0)
-                parse(characters2, root, reference, reference, props4, rulesets, length2, points, children);
+                parse(characters2, root, reference, reference, props5, 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, props5 = [], length2), children), rules, children, length2, points, rule ? props5 : children);
                     break;
                   default:
                     parse(characters2, reference, reference, reference, [""], children, 0, points, children);
@@ -11483,15 +11488,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, props5, 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);
+        props5[k++] = z;
+  return node(value, root, parent, offset === 0 ? RULESET : type, props5, children, length2);
 }
 function comment(value, root, parent) {
   return node(value, root, parent, COMMENT, from(char()), substr(value, 2, -2), 0);
@@ -12468,26 +12473,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: props5 }) => props5.animationDuration && {
+      animationDuration: (0, import_scratch9.getTimingByKey)(props5.animationDuration).timing
     },
-    animationDelay: ({ props: props4 }) => props4.animationDelay && {
-      animationDelay: (0, import_scratch9.getTimingByKey)(props4.animationDelay).timing
+    animationDelay: ({ props: props5 }) => props5.animationDelay && {
+      animationDelay: (0, import_scratch9.getTimingByKey)(props5.animationDelay).timing
     },
-    animationTimingFunction: ({ props: props4 }) => props4.animationTimingFunction && {
-      animationTimingFunction: (0, import_scratch9.getTimingFunction)(props4.animationTimingFunction)
+    animationTimingFunction: ({ props: props5 }) => props5.animationTimingFunction && {
+      animationTimingFunction: (0, import_scratch9.getTimingFunction)(props5.animationTimingFunction)
     },
-    animationFillMode: ({ props: props4 }) => props4.animationFillMode && {
-      animationFillMode: props4.animationFillMode
+    animationFillMode: ({ props: props5 }) => props5.animationFillMode && {
+      animationFillMode: props5.animationFillMode
     },
-    animationPlayState: ({ props: props4 }) => props4.animationPlayState && {
-      animationPlayState: props4.animationPlayState
+    animationPlayState: ({ props: props5 }) => props5.animationPlayState && {
+      animationPlayState: props5.animationPlayState
     },
-    animationIterationCount: ({ props: props4 }) => props4.animationIterationCount && {
-      animationIterationCount: props4.animationIterationCount || 1
+    animationIterationCount: ({ props: props5 }) => props5.animationIterationCount && {
+      animationIterationCount: props5.animationIterationCount || 1
     },
-    animationDirection: ({ props: props4 }) => props4.animationDirection && {
-      animationDirection: props4.animationDirection
+    animationDirection: ({ props: props5 }) => props5.animationDirection && {
+      animationDirection: props5.animationDirection
     }
   }
 };
@@ -12495,7 +12500,7 @@ var Animation = {
 // Box/index.js
 var PropsCSS = {
   class: {
-    style: ({ props: props4 }) => props4 && props4.style
+    style: ({ props: props5 }) => props5 && props5.style
   }
 };
 var Box = {
@@ -12515,7 +12520,7 @@ var Box = {
     Animation
   ],
   attr: {
-    id: ({ props: props4 }) => props4.id
+    id: ({ props: props5 }) => props5.id
   }
 };
 
@@ -12530,7 +12535,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: props5 }) => props5.src || `https://avatars.dicebear.com/api/${props5.avatarType || "adventurer-neutral"}/${props5.key || key}.svg`
   }
 };
 var AvatarBundle = {
@@ -12550,15 +12555,15 @@ var AvatarBundle = {
 // Icon/index.js
 var Icon = {
   extend: Svg,
-  props: ({ key, props: props4, parent, context }) => {
+  props: ({ key, props: props5, 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 = props5.inheritedString || props5.name || props5.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 (props5.active) {
+      activeIconName = props5[".active"].name || props5[".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 +12582,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 || props5.src;
     return {
       width: "A",
       height: "A",
@@ -12602,9 +12607,9 @@ var IconText = {
   },
   Icon: {
     props: {},
-    if: ({ props: props4 }) => props4.name || props4.icon
+    if: ({ props: props5 }) => props5.name || props5.icon
   },
-  text: ({ props: props4 }) => props4.text
+  text: ({ props: props5 }) => props5.text
 };
 
 // Button/index.js
@@ -12625,7 +12630,7 @@ var Button = {
     round: "C2"
   },
   attr: {
-    type: ({ props: props4 }) => props4.type
+    type: ({ props: props5 }) => props5.type
   }
 };
 var SquareButton = {
@@ -12656,24 +12661,6 @@ 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
-    }
-  }
-};
-
 // Datepicker/node_modules/@symbo.ls/atoms/Block.js
 var import_scratch10 = __toESM(require_cjs9());
 
@@ -12683,12 +12670,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: props5 }) => props5.flow && { flexFlow: props5.flow },
+    wrap: ({ props: props5 }) => props5.wrap && { flexWrap: props5.wrap },
+    align: ({ props: props5 }) => {
+      if (typeof props5.align !== "string")
         return;
-      const [alignItems, justifyContent] = props4.align.split(" ");
+      const [alignItems, justifyContent] = props5.align.split(" ");
       return { alignItems, justifyContent };
     }
   }
@@ -12699,22 +12686,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: props5 }) => props5.area ? { gridArea: props5.area } : null,
+    template: ({ props: props5 }) => props5.template ? { gridTemplate: props5.template } : null,
+    templateAreas: ({ props: props5 }) => props5.templateAreas ? { gridTemplateAreas: props5.templateAreas } : null,
+    column: ({ props: props5 }) => props5.column ? { gridColumn: props5.column } : null,
+    columns: ({ props: props5 }) => props5.columns ? { gridTemplateColumns: props5.columns } : null,
+    templateColumns: ({ props: props5 }) => props5.templateColumns ? { gridTemplateColumns: props5.templateColumns } : null,
+    autoColumns: ({ props: props5 }) => props5.autoColumns ? { gridAutoColumns: props5.autoColumns } : null,
+    columnStart: ({ props: props5 }) => props5.columnStart ? { gridColumnStart: props5.columnStart } : null,
+    row: ({ props: props5 }) => props5.row ? { gridRow: props5.row } : null,
+    rows: ({ props: props5 }) => props5.rows ? { gridTemplateRows: props5.rows } : null,
+    templateRows: ({ props: props5 }) => props5.templateRows ? { gridTemplateRows: props5.templateRows } : null,
+    autoRows: ({ props: props5 }) => props5.autoRows ? { gridAutoRows: props5.autoRows } : null,
+    rowStart: ({ props: props5 }) => props5.rowStart ? { gridRowStart: props5.rowStart } : null,
+    autoFlow: ({ props: props5 }) => props5.autoFlow ? { gridAutoFlow: props5.autoFlow } : null,
+    columnGap: ({ props: props5 }) => props5.columnGap ? (0, import_scratch11.getSpacingBasedOnRatio)(props5, "columnGap") : null,
+    rowGap: ({ props: props5 }) => props5.rowGap ? (0, import_scratch11.getSpacingBasedOnRatio)(props5, "rowGap") : null
   }
 };
 
@@ -12770,141 +12757,369 @@ 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, rgba(20, 20, 22, 1) 0%, rgba(20, 20, 22, 0) 100%)",
+      zIndex: "10"
+    },
+    ":after": {
+      content: '""',
+      boxSize: "B 100%",
+      position: "absolute",
+      bottom: "0",
+      left: "0",
+      background: "linear-gradient(to top, rgba(20, 20, 22, 1) 0%, rgba(20, 20, 22, 0) 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: props5 } = el;
+          const { isActive } = props5;
+          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 months = {
   extend: Flex2,
   props: {
-    flex: 1,
-    gap: "X2",
-    flow: "column",
-    header: {
-      align: "center space-between"
-    }
-  },
-  header: {
-    extend: Flex2,
-    left: {
-      extend: SquareButton,
-      props: {
-        ...buttonProps,
-        round: "C",
-        icon: "arrowAngleLeft"
-      }
+    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, rgba(20, 20, 22, 1) 0%, rgba(20, 20, 22, 0) 100%)",
+      left: "0",
+      top: "0",
+      zIndex: "30",
+      pointerEvents: "none"
     },
-    month: {
-      tag: "span",
-      text: "December"
+    ":after": {
+      content: '""',
+      position: "absolute",
+      boxSize: "100% 100px",
+      background: "linear-gradient(to left, rgba(20, 20, 22, 1) 0%, rgba(20, 20, 22, 0) 100%)",
+      right: "0",
+      top: "0",
+      zIndex: "30",
+      pointerEvents: "none"
     },
-    right: {
-      extend: SquareButton,
-      props: {
-        ...buttonProps,
-        round: "C",
-        icon: "arrowAngleRight"
+    style: {
+      "> button": {
+        width: "16px",
+        height: "16px",
+        position: "absolute",
+        zIndex: "35",
+        background: "transparent",
+        color: "#0079FD",
+        ":first-child": { left: "18px" },
+        ":last-child": { right: "18px" }
       }
     }
   },
-  days: {
-    extend: Flex2,
+  leftButton: {
+    extend: Button,
+    props: { icon: "arrowLeft" }
+  },
+  Flex: {
     props: {
-      flow: "column",
-      gap: "X2"
+      flex: "1",
+      overflow: "auto hidden",
+      "::-webkit-scrollbar": { display: "none" }
     },
     childExtend: {
-      extend: Grid2,
-      props: {
-        columns: "repeat(7, 1fr)",
-        gap: "X2"
+      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: props5 } = el;
+        const { isActive } = props5;
+        if (isActive) {
+          window.requestAnimationFrame(() => {
+            el.parent.parent.node.scrollLeft = el.node.offsetLeft;
+          });
+        }
       }
     },
-    weekDays: {
-      childExtend: {
-        extend: Button,
-        props: {
-          ...buttonProps,
-          fontSize: "Z1",
-          padding: "X2"
+    $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 weekDays = {
+  extend: Grid2,
+  childExtend: {
+    tag: "span",
+    extend: Flex2
+  },
+  ...[
+    { text: "Mo" },
+    { text: "Tu" },
+    { text: "We" },
+    { text: "Th" },
+    { text: "Fr" },
+    { text: "Sa" },
+    { text: "Su" }
+  ]
+};
+var monthNumbers = {
+  extend: Grid2,
+  props: {
+    columns: "repeat(7, 32px)",
+    gap: "4px",
+    boxSizing: "content-box",
+    padding: `- ${12 / 16}em`
+  },
+  childExtend: {
+    extend: Button,
+    props: ({ state, key }) => ({
+      color: "white",
+      textAlign: "center",
+      background: "transparent",
+      fontSize: "Z1",
+      round: "100%",
+      height: "32px",
+      ":hover": { theme: "secondary" },
+      ":nth-child(7n-1)": { color: "rgba(255, 255, 255, .5)" },
+      ":nth-child(7n)": { color: "rgba(255, 255, 255, .5)" },
+      isActive: state.activeDay === parseInt(key) + 1,
+      ".isActive": { theme: "secondary" }
+    }),
+    on: {
+      click: (event, element, state) => {
+        state.update({ activeDay: element.text });
+        console.log(state.activeDay + "." + state.activeMonth + "." + state.activeYear);
+      }
+    }
+  },
+  $setCollection: (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 confirmButtons = {
+  extend: Flex2,
+  childExtend: Button,
+  ...[
+    {
+      text: "cancel",
+      on: {
+        click: (event, element, state) => {
         }
-      },
-      ...[
-        { 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"
-          }
-        })
-      },
-      ...new Array(31).fill(void 0).map((_, i) => ({ text: i + 1 }))
+    {
+      text: "ok"
+    }
+  ]
+};
+var monthNumbersContainer = {
+  props: {
+    maxWidth: `${272 / 16}em`,
+    position: "relative",
+    ":before": {
+      content: '""',
+      position: "absolute",
+      boxSize: "100% 12px",
+      background: "linear-gradient(to right, rgba(20, 20, 22, 1) 0%, rgba(20, 20, 22, 0) 100%)",
+      left: "0",
+      top: "0",
+      zIndex: "30"
+    },
+    ":after": {
+      content: '""',
+      position: "absolute",
+      boxSize: "100% 12px",
+      background: "linear-gradient(to left, rgba(20, 20, 22, 1) 0%, rgba(20, 20, 22, 0) 100%)",
+      right: "0",
+      top: "0",
+      zIndex: "30"
+    },
+    content: {
+      style: { overflowX: "auto" }
+    }
+  },
+  content: {
+    extend: Flex2,
+    childExtend: monthNumbers,
+    ...[{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]
+  }
+};
+var props = {
+  yearRange: [1993, 2023],
+  round: "Z2",
+  margin: "E",
+  overflow: "hidden",
+  maxHeight: "318px",
+  boxSize: "fit-content fit-content",
+  background: "#141416",
+  padding: "- Z - -",
+  style: {
+    button: {
+      padding: "0"
+    }
+  },
+  calendar: {
+    flow: "column",
+    padding: "20px - - -",
+    position: "relative",
+    weekDaysContainer: {
+      overflow: "hidden",
+      padding: "- - Z1 -",
+      boxSizing: "content-box",
+      maxWidth: `${272 / 16}em`,
+      childProps: {
+        maxWidth: "fit-content",
+        columns: "repeat(7, 32px)",
+        gap: "4px",
+        boxSizing: "content-box",
+        padding: `- ${12 / 16}em`,
+        childProps: {
+          fontSize: "Y1",
+          textTransform: "capitalize",
+          ":nth-child(7n-1)": { color: "rgba(255, 255, 255, .5)" },
+          ":nth-child(7n)": { color: "rgba(255, 255, 255, .5)" },
+          align: "center center"
+        }
+      }
+    },
+    confirmButtons: {
+      align: "center flex-end",
+      gap: "A1",
+      padding: "A A1 - -",
+      childProps: {
+        color: "#0079FD",
+        fontSize: "Y",
+        textTransform: "uppercase",
+        background: "transparent"
+      }
     }
   }
 };
 var DatePicker = {
-  style: style_default,
   extend: Flex2,
-  props: {
-    position: "relative",
-    theme: "quaternary",
-    transition: "A all",
-    round: "Z",
-    padding: "Z Z2 Z X2",
-    gap: "X2",
-    depth: 16,
-    minHeight: "0",
-    align: "stretch center"
+  state: {
+    activeYear: 1993,
+    activeMonth: 8,
+    activeDay: 14
   },
-  aside,
-  main
+  props,
+  DatePickerYears: {},
+  calendar: {
+    extend: Flex2,
+    months,
+    weekDaysContainer: {
+      extend: Flex2,
+      childExtend: weekDays,
+      ...[{}, {}]
+    },
+    monthNumbersContainer,
+    confirmButtons
+  }
+};
+var DatePickerTwoColumns = {
+  extend: DatePicker,
+  props: {
+    calendar: {
+      months: {
+        maxWidth: `${544 / 16}em`
+      },
+      weekDaysContainer: {
+        maxWidth: `${544 / 16}em`
+      },
+      monthNumbersContainer: {
+        maxWidth: `${544 / 16}em`
+      }
+    }
+  }
 };
 
 // Dropdown/index.js
@@ -12968,7 +13183,7 @@ var DropdownParent = {
 };
 
 // Form/FieldLabel.js
-var props = {
+var props2 = {
   flow: "column",
   gap: "Y2",
   childProps: { textTransform: "capitalize" },
@@ -12979,7 +13194,7 @@ var props = {
 };
 var FieldLabel = {
   extend: Flex,
-  props,
+  props: props2,
   caption: {
     tag: "span",
     text: "text"
@@ -13125,15 +13340,15 @@ var ToggleSwithWithLabel = {
 // node_modules/@symbo.ls/icon/index.js
 var Icon2 = {
   extend: Svg,
-  props: ({ key, props: props4, parent, context }) => {
+  props: ({ key, props: props5, 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 = props5.inheritedString || props5.name || props5.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 (props5.active) {
+      activeIconName = props5[".active"].name || props5[".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 +13367,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 || props5.src;
     return {
       width: "A",
       height: "A",
@@ -13170,15 +13385,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: props5 }) => props5.name || props5.icon
   },
-  text: ({ props: props4 }) => props4.text
+  text: ({ props: props5 }) => props5.text
 };
 
 // Link/index.js
@@ -13198,23 +13414,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: props5 }) => props5.target,
+    "aria-label": ({ props: props5 }) => props5.aria ? props5.aria.label : props5.text,
+    draggable: ({ props: props5 }) => props5.draggable
   }
 };
 var RouterLink = {
   on: {
     click: (event, el, s, ctx) => {
-      const { props: props4 } = el;
-      const { href } = props4;
+      const { props: props5 } = el;
+      const { href } = props5;
       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 = props5.routerOptions || routerOptions || {
         scrollToOptions: { behaviour: "instant" }
       };
       if (href && !linkIsExternal) {
@@ -13243,17 +13459,17 @@ var Input = {
     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
+    pattern: ({ props: props5 }) => props5.pattern,
+    minlength: ({ props: props5 }) => props5.minlength,
+    maxlength: ({ props: props5 }) => props5.maxlength,
+    name: ({ props: props5 }) => props5.name,
+    autocomplete: ({ props: props5 }) => props5.autocomplete,
+    placeholder: ({ props: props5 }) => props5.placeholder,
+    value: ({ props: props5, state }) => props5.value,
+    disabled: ({ props: props5 }) => props5.disabled || null,
+    readonly: ({ props: props5 }) => props5.readonly,
+    required: ({ props: props5 }) => props5.required,
+    type: ({ props: props5 }) => props5.type
   }
 };
 
@@ -13297,8 +13513,8 @@ var Focusable2 = {
     }
   },
   attr: {
-    placeholder: ({ props: props4 }) => props4.placeholder,
-    tabIndex: ({ props: props4 }) => props4.tabIndex
+    placeholder: ({ props: props5 }) => props5.placeholder,
+    tabIndex: ({ props: props5 }) => props5.tabIndex
   }
 };
 
@@ -13369,23 +13585,23 @@ var Video = {
   childExtend: {
     tag: "source",
     attr: {
-      src: ({ props: props4 }) => props4.src,
-      controls: ({ props: props4 }) => props4.controls
+      src: ({ props: props5 }) => props5.src,
+      controls: ({ props: props5 }) => props5.controls
     }
   },
   props: {
     controls: true
   },
   attr: {
-    autoplay: ({ props: props4 }) => props4.autoplay,
-    controls: ({ props: props4 }) => props4.controls
+    autoplay: ({ props: props5 }) => props5.autoplay,
+    controls: ({ props: props5 }) => props5.controls
   }
 };
 
 // Range/index.js
 var import_utils14 = __toESM(require_cjs5());
 var import_scratch28 = __toESM(require_cjs());
-var props2 = {
+var props3 = {
   appearance: "none",
   width: "100%",
   height: "2px",
@@ -13445,7 +13661,7 @@ var props2 = {
   }
 };
 var Range = {
-  props: props2,
+  props: props3,
   tag: "input",
   attr: { type: "range" }
 };
@@ -13497,7 +13713,7 @@ var RangeWithButtons = {
 };
 
 // Slider/style.js
-var style_default2 = {
+var style_default = {
   appearance: "none",
   width: "100%",
   height: "2px",
@@ -13540,7 +13756,7 @@ var import_utils15 = __toESM(require_cjs5());
   }
 });
 var RangeSlider = {
-  style: style_default2,
+  style: style_default,
   props: {
     theme: "sliderThumb"
   },
@@ -13562,8 +13778,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 props5 = input.props;
+        const value = (0, import_utils15.isFunction)(props5.value) ? props5.value() : props5.value;
         input.node.value = value;
       }
     }
@@ -13599,8 +13815,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 props5 = input.props;
+        const value = (0, import_utils15.isFunction)(props5.value) ? props5.value() : props5.value;
         input.node.value = value;
       }
     }
@@ -13616,12 +13832,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: props5 }) => props5.flow && { flexFlow: props5.flow },
+    wrap: ({ props: props5 }) => props5.wrap && { flexWrap: props5.wrap },
+    align: ({ props: props5 }) => {
+      if (typeof props5.align !== "string")
         return;
-      const [alignItems, justifyContent] = props4.align.split(" ");
+      const [alignItems, justifyContent] = props5.align.split(" ");
       return { alignItems, justifyContent };
     }
   }
@@ -13769,14 +13985,14 @@ var TooltipParent = {
 };
 
 // Textarea/index.js
-var props3 = {
+var props4 = {
   height: "E",
   lineHeight: 1.4,
   style: { resize: "none" }
 };
 var Textarea = {
   extend: [Input],
-  props: props3,
+  props: props4,
   tag: "textarea"
 };
 
@@ -13840,13 +14056,13 @@ var Select = {
       disabled: ""
     },
     attr: {
-      value: ({ props: props4 }) => props4.value,
-      selected: ({ props: props4 }) => props4.selected,
-      disabled: ({ props: props4 }) => props4.disabled
+      value: ({ props: props5 }) => props5.value,
+      selected: ({ props: props5 }) => props5.selected,
+      disabled: ({ props: props5 }) => props5.disabled
     }
   },
   attr: {
-    name: ({ props: props4 }) => props4.name,
-    disabled: ({ props: props4 }) => props4.disabled
+    name: ({ props: props5 }) => props5.name,
+    disabled: ({ props: props5 }) => props5.disabled
   }
 };