@symbo.ls/uikit 2.11.43 → 2.11.49

package/dist/index.cjs.js

@@ -851,13 +851,13 @@ var require_cjs = __commonJS({
           }
           return true;
         };
-        var removeFromObject = (obj, props5) => {
-          if (props5 === void 0 || props5 === null)
+        var removeFromObject = (obj, props7) => {
+          if (props7 === void 0 || props7 === null)
             return obj;
-          if ((0, import_types.is)(props5)("string", "number")) {
-            delete obj[props5];
-          } else if ((0, import_types.isArray)(props5)) {
-            props5.forEach((prop) => delete obj[prop]);
+          if ((0, import_types.is)(props7)("string", "number")) {
+            delete obj[props7];
+          } else if ((0, import_types.isArray)(props7)) {
+            props7.forEach((prop) => delete obj[prop]);
           } else {
             throw new Error("Invalid input: props must be a string or an array of strings");
           }
@@ -1540,8 +1540,8 @@ var require_cjs = __commonJS({
       18: "S",
       19: "T"
     };
-    var setSequenceValue = (props5, sequenceProps) => {
-      const { key, variable, value, scaling, index } = props5;
+    var setSequenceValue = (props7, sequenceProps) => {
+      const { key, variable, value, scaling, index } = props7;
       sequenceProps.sequence[key] = {
         key,
         decimal: ~~(value * 100) / 100,
@@ -1553,8 +1553,8 @@ var require_cjs = __commonJS({
       sequenceProps.scales[key] = scaling;
       sequenceProps.vars[variable] = scaling + sequenceProps.unit;
     };
-    var generateSubSequence = (props5, sequenceProps) => {
-      const { key, base, value, ratio, variable, index } = props5;
+    var generateSubSequence = (props7, sequenceProps) => {
+      const { key, base, value, ratio, variable, index } = props7;
       const next2 = value * ratio;
       const diff5 = next2 - value;
       const smallscale = diff5 / 1.618;
@@ -1595,7 +1595,7 @@ var require_cjs = __commonJS({
         const value = switchSequenceOnNegative(key, base, ratio);
         const scaling = ~~(value / base * 100) / 100;
         const variable = prefix2 + letterKey;
-        const props5 = {
+        const props7 = {
           key: letterKey,
           variable,
           value,
@@ -1604,9 +1604,9 @@ var require_cjs = __commonJS({
           ratio,
           index: key
         };
-        setSequenceValue(props5, sequenceProps);
+        setSequenceValue(props7, sequenceProps);
         if (subSequence)
-          generateSubSequence(props5, sequenceProps);
+          generateSubSequence(props7, sequenceProps);
       }
       return sequenceProps;
     };
@@ -1688,14 +1688,14 @@ var require_cjs = __commonJS({
         CSS_VARS2[result.var] = result.value;
       }
     };
-    var applySequenceVars = (props5, mediaName, options = {}) => {
+    var applySequenceVars = (props7, mediaName, options = {}) => {
       const CONFIG22 = getActiveConfig5();
       const { UNIT: UNIT2, MEDIA: MEDIA2, TIMING: TIMING2, CSS_VARS: CSS_VARS2 } = CONFIG22;
-      const unit = props5.unit || UNIT2.default;
-      const { sequence, scales } = props5;
+      const unit = props7.unit || UNIT2.default;
+      const { sequence, scales } = props7;
       for (const key in sequence) {
         const item = sequence[key];
-        const value = (props5.type === TIMING2.type ? sequence[key].val : scales[key]) + unit;
+        const value = (props7.type === TIMING2.type ? sequence[key].val : scales[key]) + unit;
         if (mediaName) {
           const query = MEDIA2[mediaName];
           if (!query) {
@@ -2184,13 +2184,13 @@ var require_cjs = __commonJS({
       return { var: CSSvar, value: str, arr: value, type };
     };
     var import_utils142 = __toESM2(require_cjs42(), 1);
-    var runThroughMedia = (props5) => {
+    var runThroughMedia = (props7) => {
       const CONFIG22 = getActiveConfig5();
       const { TYPOGRAPHY: TYPOGRAPHY2, MEDIA: MEDIA2 } = CONFIG22;
-      for (const prop in props5) {
-        const mediaProps = props5[prop];
+      for (const prop in props7) {
+        const mediaProps = props7[prop];
         if (prop.slice(0, 1) === "@") {
-          const { type, base, ratio, range, subSequence, h1Matches, unit } = props5;
+          const { type, base, ratio, range, subSequence, h1Matches, unit } = props7;
           (0, import_utils142.merge)(mediaProps, {
             type,
             base,
@@ -2214,20 +2214,20 @@ var require_cjs = __commonJS({
         }
       }
     };
-    var applyHeadings = (props5) => {
+    var applyHeadings = (props7) => {
       const CONFIG22 = getActiveConfig5();
-      if (props5.h1Matches) {
-        const unit = props5.unit;
-        const HEADINGS = findHeadings(props5);
-        const { templates } = props5;
+      if (props7.h1Matches) {
+        const unit = props7.unit;
+        const HEADINGS = findHeadings(props7);
+        const { templates } = props7;
         for (const k in HEADINGS) {
           const headerName = `h${parseInt(k) + 1}`;
           const headerStyle = templates[headerName];
           templates[headerName] = {
             fontSize: CONFIG22.useVariable ? `var(${HEADINGS[k].variable})` : `${HEADINGS[k].scaling}${unit}`,
             margin: headerStyle ? headerStyle.margin : 0,
-            lineHeight: headerStyle ? headerStyle.lineHeight : props5.lineHeight,
-            letterSpacing: headerStyle ? headerStyle.letterSpacing : props5.letterSpacing,
+            lineHeight: headerStyle ? headerStyle.lineHeight : props7.lineHeight,
+            letterSpacing: headerStyle ? headerStyle.letterSpacing : props7.letterSpacing,
             fontWeight: headerStyle ? headerStyle.fontWeight : 900 - k * 100
           };
         }
@@ -2322,11 +2322,11 @@ var require_cjs = __commonJS({
         sequence
       );
     };
-    var getSpacingBasedOnRatio13 = (props5, propertyName, val) => {
+    var getSpacingBasedOnRatio13 = (props7, propertyName, val) => {
       const CONFIG22 = getActiveConfig5();
       const { SPACING: SPACING2 } = CONFIG22;
-      const { spacingRatio, unit } = props5;
-      const value = val || props5[propertyName];
+      const { spacingRatio, unit } = props7;
+      const value = val || props7[propertyName];
       if (spacingRatio) {
         let sequenceProps = SPACING2[spacingRatio];
         if (!sequenceProps) {
@@ -2601,7 +2601,7 @@ var require_cjs = __commonJS({
         return v;
       }).join(" ");
     };
-    var transformDuration5 = (duration, props5, propertyName) => {
+    var transformDuration5 = (duration, props7, propertyName) => {
       if (!(0, import_utils25.isString)(duration))
         return;
       return duration.split(",").map((v) => getTimingByKey5(v).timing || v).join(",");
@@ -2649,11 +2649,11 @@ var require_cjs = __commonJS({
       if (CONFIG22.verbose)
         console.warn("Can not find", factoryName, "method in scratch");
     };
-    var setEach = (factoryName, props5) => {
+    var setEach = (factoryName, props7) => {
       const CONFIG22 = getActiveConfig5();
       const FACTORY_NAME = factoryName.toUpperCase();
-      const keys = Object.keys(props5);
-      keys.map((key) => setValue(FACTORY_NAME, props5[key], key));
+      const keys = Object.keys(props7);
+      keys.map((key) => setValue(FACTORY_NAME, props7[key], key));
       return CONFIG22[FACTORY_NAME];
     };
     var SET_OPTIONS = {};
@@ -3508,13 +3508,13 @@ var require_object = __commonJS({
       }
       return true;
     };
-    var removeFromObject = (obj, props5) => {
-      if (props5 === void 0 || props5 === null)
+    var removeFromObject = (obj, props7) => {
+      if (props7 === void 0 || props7 === null)
         return obj;
-      if ((0, import_types.is)(props5)("string", "number")) {
-        delete obj[props5];
-      } else if ((0, import_types.isArray)(props5)) {
-        props5.forEach((prop) => delete obj[prop]);
+      if ((0, import_types.is)(props7)("string", "number")) {
+        delete obj[props7];
+      } else if ((0, import_types.isArray)(props7)) {
+        props7.forEach((prop) => delete obj[prop]);
       } else {
         throw new Error("Invalid input: props must be a string or an array of strings");
       }
@@ -5269,13 +5269,13 @@ var require_cjs9 = __commonJS({
           }
           return true;
         };
-        var removeFromObject = (obj, props5) => {
-          if (props5 === void 0 || props5 === null)
+        var removeFromObject = (obj, props7) => {
+          if (props7 === void 0 || props7 === null)
             return obj;
-          if ((0, import_types.is)(props5)("string", "number")) {
-            delete obj[props5];
-          } else if ((0, import_types.isArray)(props5)) {
-            props5.forEach((prop) => delete obj[prop]);
+          if ((0, import_types.is)(props7)("string", "number")) {
+            delete obj[props7];
+          } else if ((0, import_types.isArray)(props7)) {
+            props7.forEach((prop) => delete obj[prop]);
           } else {
             throw new Error("Invalid input: props must be a string or an array of strings");
           }
@@ -5958,8 +5958,8 @@ var require_cjs9 = __commonJS({
       18: "S",
       19: "T"
     };
-    var setSequenceValue = (props5, sequenceProps) => {
-      const { key, variable, value, scaling, index } = props5;
+    var setSequenceValue = (props7, sequenceProps) => {
+      const { key, variable, value, scaling, index } = props7;
       sequenceProps.sequence[key] = {
         key,
         decimal: ~~(value * 100) / 100,
@@ -5971,8 +5971,8 @@ var require_cjs9 = __commonJS({
       sequenceProps.scales[key] = scaling;
       sequenceProps.vars[variable] = scaling + sequenceProps.unit;
     };
-    var generateSubSequence = (props5, sequenceProps) => {
-      const { key, base, value, ratio, variable, index } = props5;
+    var generateSubSequence = (props7, sequenceProps) => {
+      const { key, base, value, ratio, variable, index } = props7;
       const next2 = value * ratio;
       const diff5 = next2 - value;
       const smallscale = diff5 / 1.618;
@@ -6013,7 +6013,7 @@ var require_cjs9 = __commonJS({
         const value = switchSequenceOnNegative(key, base, ratio);
         const scaling = ~~(value / base * 100) / 100;
         const variable = prefix2 + letterKey;
-        const props5 = {
+        const props7 = {
           key: letterKey,
           variable,
           value,
@@ -6022,9 +6022,9 @@ var require_cjs9 = __commonJS({
           ratio,
           index: key
         };
-        setSequenceValue(props5, sequenceProps);
+        setSequenceValue(props7, sequenceProps);
         if (subSequence)
-          generateSubSequence(props5, sequenceProps);
+          generateSubSequence(props7, sequenceProps);
       }
       return sequenceProps;
     };
@@ -6106,14 +6106,14 @@ var require_cjs9 = __commonJS({
         CSS_VARS2[result.var] = result.value;
       }
     };
-    var applySequenceVars = (props5, mediaName, options = {}) => {
+    var applySequenceVars = (props7, mediaName, options = {}) => {
       const CONFIG22 = getActiveConfig5();
       const { UNIT: UNIT2, MEDIA: MEDIA2, TIMING: TIMING2, CSS_VARS: CSS_VARS2 } = CONFIG22;
-      const unit = props5.unit || UNIT2.default;
-      const { sequence, scales } = props5;
+      const unit = props7.unit || UNIT2.default;
+      const { sequence, scales } = props7;
       for (const key in sequence) {
         const item = sequence[key];
-        const value = (props5.type === TIMING2.type ? sequence[key].val : scales[key]) + unit;
+        const value = (props7.type === TIMING2.type ? sequence[key].val : scales[key]) + unit;
         if (mediaName) {
           const query = MEDIA2[mediaName];
           if (!query) {
@@ -6602,13 +6602,13 @@ var require_cjs9 = __commonJS({
       return { var: CSSvar, value: str, arr: value, type };
     };
     var import_utils142 = __toESM2(require_cjs42(), 1);
-    var runThroughMedia = (props5) => {
+    var runThroughMedia = (props7) => {
       const CONFIG22 = getActiveConfig5();
       const { TYPOGRAPHY: TYPOGRAPHY2, MEDIA: MEDIA2 } = CONFIG22;
-      for (const prop in props5) {
-        const mediaProps = props5[prop];
+      for (const prop in props7) {
+        const mediaProps = props7[prop];
         if (prop.slice(0, 1) === "@") {
-          const { type, base, ratio, range, subSequence, h1Matches, unit } = props5;
+          const { type, base, ratio, range, subSequence, h1Matches, unit } = props7;
           (0, import_utils142.merge)(mediaProps, {
             type,
             base,
@@ -6632,20 +6632,20 @@ var require_cjs9 = __commonJS({
         }
       }
     };
-    var applyHeadings = (props5) => {
+    var applyHeadings = (props7) => {
       const CONFIG22 = getActiveConfig5();
-      if (props5.h1Matches) {
-        const unit = props5.unit;
-        const HEADINGS = findHeadings(props5);
-        const { templates } = props5;
+      if (props7.h1Matches) {
+        const unit = props7.unit;
+        const HEADINGS = findHeadings(props7);
+        const { templates } = props7;
         for (const k in HEADINGS) {
           const headerName = `h${parseInt(k) + 1}`;
           const headerStyle = templates[headerName];
           templates[headerName] = {
             fontSize: CONFIG22.useVariable ? `var(${HEADINGS[k].variable})` : `${HEADINGS[k].scaling}${unit}`,
             margin: headerStyle ? headerStyle.margin : 0,
-            lineHeight: headerStyle ? headerStyle.lineHeight : props5.lineHeight,
-            letterSpacing: headerStyle ? headerStyle.letterSpacing : props5.letterSpacing,
+            lineHeight: headerStyle ? headerStyle.lineHeight : props7.lineHeight,
+            letterSpacing: headerStyle ? headerStyle.letterSpacing : props7.letterSpacing,
             fontWeight: headerStyle ? headerStyle.fontWeight : 900 - k * 100
           };
         }
@@ -6740,11 +6740,11 @@ var require_cjs9 = __commonJS({
         sequence
       );
     };
-    var getSpacingBasedOnRatio13 = (props5, propertyName, val) => {
+    var getSpacingBasedOnRatio13 = (props7, propertyName, val) => {
       const CONFIG22 = getActiveConfig5();
       const { SPACING: SPACING2 } = CONFIG22;
-      const { spacingRatio, unit } = props5;
-      const value = val || props5[propertyName];
+      const { spacingRatio, unit } = props7;
+      const value = val || props7[propertyName];
       if (spacingRatio) {
         let sequenceProps = SPACING2[spacingRatio];
         if (!sequenceProps) {
@@ -7019,7 +7019,7 @@ var require_cjs9 = __commonJS({
         return v;
       }).join(" ");
     };
-    var transformDuration5 = (duration, props5, propertyName) => {
+    var transformDuration5 = (duration, props7, propertyName) => {
       if (!(0, import_utils25.isString)(duration))
         return;
       return duration.split(",").map((v) => getTimingByKey5(v).timing || v).join(",");
@@ -7067,11 +7067,11 @@ var require_cjs9 = __commonJS({
       if (CONFIG22.verbose)
         console.warn("Can not find", factoryName, "method in scratch");
     };
-    var setEach = (factoryName, props5) => {
+    var setEach = (factoryName, props7) => {
       const CONFIG22 = getActiveConfig5();
       const FACTORY_NAME = factoryName.toUpperCase();
-      const keys = Object.keys(props5);
-      keys.map((key) => setValue(FACTORY_NAME, props5[key], key));
+      const keys = Object.keys(props7);
+      keys.map((key) => setValue(FACTORY_NAME, props7[key], key));
       return CONFIG22[FACTORY_NAME];
     };
     var SET_OPTIONS = {};
@@ -8048,13 +8048,13 @@ var require_cjs11 = __commonJS({
           }
           return true;
         };
-        var removeFromObject = (obj, props5) => {
-          if (props5 === void 0 || props5 === null)
+        var removeFromObject = (obj, props7) => {
+          if (props7 === void 0 || props7 === null)
             return obj;
-          if ((0, import_types.is)(props5)("string", "number")) {
-            delete obj[props5];
-          } else if ((0, import_types.isArray)(props5)) {
-            props5.forEach((prop) => delete obj[prop]);
+          if ((0, import_types.is)(props7)("string", "number")) {
+            delete obj[props7];
+          } else if ((0, import_types.isArray)(props7)) {
+            props7.forEach((prop) => delete obj[prop]);
           } else {
             throw new Error("Invalid input: props must be a string or an array of strings");
           }
@@ -8737,8 +8737,8 @@ var require_cjs11 = __commonJS({
       18: "S",
       19: "T"
     };
-    var setSequenceValue = (props5, sequenceProps) => {
-      const { key, variable, value, scaling, index } = props5;
+    var setSequenceValue = (props7, sequenceProps) => {
+      const { key, variable, value, scaling, index } = props7;
       sequenceProps.sequence[key] = {
         key,
         decimal: ~~(value * 100) / 100,
@@ -8750,8 +8750,8 @@ var require_cjs11 = __commonJS({
       sequenceProps.scales[key] = scaling;
       sequenceProps.vars[variable] = scaling + sequenceProps.unit;
     };
-    var generateSubSequence = (props5, sequenceProps) => {
-      const { key, base, value, ratio, variable, index } = props5;
+    var generateSubSequence = (props7, sequenceProps) => {
+      const { key, base, value, ratio, variable, index } = props7;
       const next2 = value * ratio;
       const diff5 = next2 - value;
       const smallscale = diff5 / 1.618;
@@ -8792,7 +8792,7 @@ var require_cjs11 = __commonJS({
         const value = switchSequenceOnNegative(key, base, ratio);
         const scaling = ~~(value / base * 100) / 100;
         const variable = prefix2 + letterKey;
-        const props5 = {
+        const props7 = {
           key: letterKey,
           variable,
           value,
@@ -8801,9 +8801,9 @@ var require_cjs11 = __commonJS({
           ratio,
           index: key
         };
-        setSequenceValue(props5, sequenceProps);
+        setSequenceValue(props7, sequenceProps);
         if (subSequence)
-          generateSubSequence(props5, sequenceProps);
+          generateSubSequence(props7, sequenceProps);
       }
       return sequenceProps;
     };
@@ -8885,14 +8885,14 @@ var require_cjs11 = __commonJS({
         CSS_VARS2[result.var] = result.value;
       }
     };
-    var applySequenceVars = (props5, mediaName, options = {}) => {
+    var applySequenceVars = (props7, mediaName, options = {}) => {
       const CONFIG22 = getActiveConfig5();
       const { UNIT: UNIT2, MEDIA: MEDIA2, TIMING: TIMING2, CSS_VARS: CSS_VARS2 } = CONFIG22;
-      const unit = props5.unit || UNIT2.default;
-      const { sequence, scales } = props5;
+      const unit = props7.unit || UNIT2.default;
+      const { sequence, scales } = props7;
       for (const key in sequence) {
         const item = sequence[key];
-        const value = (props5.type === TIMING2.type ? sequence[key].val : scales[key]) + unit;
+        const value = (props7.type === TIMING2.type ? sequence[key].val : scales[key]) + unit;
         if (mediaName) {
           const query = MEDIA2[mediaName];
           if (!query) {
@@ -9381,13 +9381,13 @@ var require_cjs11 = __commonJS({
       return { var: CSSvar, value: str, arr: value, type };
     };
     var import_utils142 = __toESM2(require_cjs42(), 1);
-    var runThroughMedia = (props5) => {
+    var runThroughMedia = (props7) => {
       const CONFIG22 = getActiveConfig5();
       const { TYPOGRAPHY: TYPOGRAPHY2, MEDIA: MEDIA2 } = CONFIG22;
-      for (const prop in props5) {
-        const mediaProps = props5[prop];
+      for (const prop in props7) {
+        const mediaProps = props7[prop];
         if (prop.slice(0, 1) === "@") {
-          const { type, base, ratio, range, subSequence, h1Matches, unit } = props5;
+          const { type, base, ratio, range, subSequence, h1Matches, unit } = props7;
           (0, import_utils142.merge)(mediaProps, {
             type,
             base,
@@ -9411,20 +9411,20 @@ var require_cjs11 = __commonJS({
         }
       }
     };
-    var applyHeadings = (props5) => {
+    var applyHeadings = (props7) => {
       const CONFIG22 = getActiveConfig5();
-      if (props5.h1Matches) {
-        const unit = props5.unit;
-        const HEADINGS = findHeadings(props5);
-        const { templates } = props5;
+      if (props7.h1Matches) {
+        const unit = props7.unit;
+        const HEADINGS = findHeadings(props7);
+        const { templates } = props7;
         for (const k in HEADINGS) {
           const headerName = `h${parseInt(k) + 1}`;
           const headerStyle = templates[headerName];
           templates[headerName] = {
             fontSize: CONFIG22.useVariable ? `var(${HEADINGS[k].variable})` : `${HEADINGS[k].scaling}${unit}`,
             margin: headerStyle ? headerStyle.margin : 0,
-            lineHeight: headerStyle ? headerStyle.lineHeight : props5.lineHeight,
-            letterSpacing: headerStyle ? headerStyle.letterSpacing : props5.letterSpacing,
+            lineHeight: headerStyle ? headerStyle.lineHeight : props7.lineHeight,
+            letterSpacing: headerStyle ? headerStyle.letterSpacing : props7.letterSpacing,
             fontWeight: headerStyle ? headerStyle.fontWeight : 900 - k * 100
           };
         }
@@ -9519,11 +9519,11 @@ var require_cjs11 = __commonJS({
         sequence
       );
     };
-    var getSpacingBasedOnRatio13 = (props5, propertyName, val) => {
+    var getSpacingBasedOnRatio13 = (props7, propertyName, val) => {
       const CONFIG22 = getActiveConfig5();
       const { SPACING: SPACING2 } = CONFIG22;
-      const { spacingRatio, unit } = props5;
-      const value = val || props5[propertyName];
+      const { spacingRatio, unit } = props7;
+      const value = val || props7[propertyName];
       if (spacingRatio) {
         let sequenceProps = SPACING2[spacingRatio];
         if (!sequenceProps) {
@@ -9798,7 +9798,7 @@ var require_cjs11 = __commonJS({
         return v;
       }).join(" ");
     };
-    var transformDuration5 = (duration, props5, propertyName) => {
+    var transformDuration5 = (duration, props7, propertyName) => {
       if (!(0, import_utils25.isString)(duration))
         return;
       return duration.split(",").map((v) => getTimingByKey5(v).timing || v).join(",");
@@ -9846,11 +9846,11 @@ var require_cjs11 = __commonJS({
       if (CONFIG22.verbose)
         console.warn("Can not find", factoryName, "method in scratch");
     };
-    var setEach = (factoryName, props5) => {
+    var setEach = (factoryName, props7) => {
       const CONFIG22 = getActiveConfig5();
       const FACTORY_NAME = factoryName.toUpperCase();
-      const keys = Object.keys(props5);
-      keys.map((key) => setValue(FACTORY_NAME, props5[key], key));
+      const keys = Object.keys(props7);
+      keys.map((key) => setValue(FACTORY_NAME, props7[key], key));
       return CONFIG22[FACTORY_NAME];
     };
     var SET_OPTIONS = {};
@@ -9920,8 +9920,12 @@ __export(domql_exports, {
   Clickable: () => Clickable,
   Collection: () => Collection,
   DatePicker: () => DatePicker,
+  DatePickerGrid: () => DatePickerGrid,
+  DatePickerMonthsSlider: () => DatePickerMonthsSlider,
   DatePickerTwoColumns: () => DatePickerTwoColumns,
+  DatePickerWeekDays: () => DatePickerWeekDays,
   DatePickerYears: () => DatePickerYears,
+  DialogFooter: () => DialogFooter,
   Direction: () => Direction,
   DropdownList: () => DropdownList,
   DropdownParent: () => DropdownParent,
@@ -9978,6 +9982,7 @@ __export(domql_exports, {
   Text: () => Text,
   Textarea: () => Textarea,
   Theme: () => Theme,
+  TimePicker: () => TimePicker,
   Timing: () => Timing,
   ToggleSwitch: () => ToggleSwitch,
   ToggleSwithWithLabel: () => ToggleSwithWithLabel,
@@ -9996,143 +10001,143 @@ module.exports = __toCommonJS(domql_exports);
 var import_scratch = __toESM(require_cjs());
 var Block = {
   class: {
-    boxSizing: ({ props: props5 }) => props5.boxSizing ? { boxSizing: props5.boxSizing } : {
+    boxSizing: ({ props: props7 }) => props7.boxSizing ? { boxSizing: props7.boxSizing } : {
       boxSizing: "border-box"
     },
-    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")
+    display: ({ props: props7 }) => props7.display && { display: props7.display },
+    hide: ({ props: props7 }) => props7.hide && { display: "none" },
+    width: ({ props: props7 }) => props7.width && (0, import_scratch.getSpacingBasedOnRatio)(props7, "width"),
+    height: ({ props: props7 }) => props7.height && (0, import_scratch.getSpacingBasedOnRatio)(props7, "height"),
+    boxSize: ({ props: props7 }) => {
+      if (typeof props7.boxSize !== "string")
         return;
-      const [height, width] = props5.boxSize.split(" ");
+      const [height, width] = props7.boxSize.split(" ");
       return {
         ...(0, import_scratch.getSpacingByKey)(height, "height"),
         ...(0, import_scratch.getSpacingByKey)(width || height, "width")
       };
     },
-    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")
+    maxWidth: ({ props: props7 }) => props7.maxWidth && (0, import_scratch.getSpacingBasedOnRatio)(props7, "maxWidth"),
+    minWidth: ({ props: props7 }) => props7.minWidth && (0, import_scratch.getSpacingBasedOnRatio)(props7, "minWidth"),
+    widthRange: ({ props: props7 }) => {
+      if (typeof props7.widthRange !== "string")
         return;
-      const [minWidth, maxWidth] = props5.widthRange.split(" ");
+      const [minWidth, maxWidth] = props7.widthRange.split(" ");
       return {
         ...(0, import_scratch.getSpacingByKey)(minWidth, "minWidth"),
         ...(0, import_scratch.getSpacingByKey)(maxWidth || minWidth, "maxWidth")
       };
     },
-    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")
+    maxHeight: ({ props: props7 }) => props7.maxHeight && (0, import_scratch.getSpacingBasedOnRatio)(props7, "maxHeight"),
+    minHeight: ({ props: props7 }) => props7.minHeight && (0, import_scratch.getSpacingBasedOnRatio)(props7, "minHeight"),
+    heightRange: ({ props: props7 }) => {
+      if (typeof props7.heightRange !== "string")
         return;
-      const [minHeight, maxHeight] = props5.heightRange.split(" ");
+      const [minHeight, maxHeight] = props7.heightRange.split(" ");
       return {
         ...(0, import_scratch.getSpacingByKey)(minHeight, "minHeight"),
         ...(0, import_scratch.getSpacingByKey)(maxHeight || minHeight, "maxHeight")
       };
     },
-    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")
+    direction: ({ props: props7 }) => props7.direction && { direction: props7.direction },
+    aspectRatio: ({ props: props7 }) => props7.aspectRatio && { aspectRatio: props7.aspectRatio },
+    borderWidth: ({ props: props7 }) => props7.borderWidth ? (0, import_scratch.getSpacingBasedOnRatio)(props7, "borderWidth") : null,
+    padding: ({ props: props7 }) => props7.padding ? (0, import_scratch.getSpacingBasedOnRatio)(props7, "padding") : null,
+    paddingInline: ({ props: props7 }) => {
+      if (typeof props7.paddingInline !== "string")
         return;
-      const [paddingInlineStart, paddingInlineEnd] = props5.paddingInline.split(" ");
+      const [paddingInlineStart, paddingInlineEnd] = props7.paddingInline.split(" ");
       return {
         ...(0, import_scratch.getSpacingByKey)(paddingInlineStart, "paddingInlineStart"),
         ...(0, import_scratch.getSpacingByKey)(paddingInlineEnd || paddingInlineStart, "paddingInlineEnd")
       };
     },
-    paddingBlock: ({ props: props5 }) => {
-      if (typeof props5.paddingBlock !== "string")
+    paddingBlock: ({ props: props7 }) => {
+      if (typeof props7.paddingBlock !== "string")
         return;
-      const [paddingBlockStart, paddingBlockEnd] = props5.paddingBlock.split(" ");
+      const [paddingBlockStart, paddingBlockEnd] = props7.paddingBlock.split(" ");
       return {
         ...(0, import_scratch.getSpacingByKey)(paddingBlockStart, "paddingBlockStart"),
         ...(0, import_scratch.getSpacingByKey)(paddingBlockEnd || paddingBlockStart, "paddingBlockEnd")
       };
     },
-    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")
+    paddingInlineStart: ({ props: props7 }) => props7.paddingInlineStart ? (0, import_scratch.getSpacingBasedOnRatio)(props7, "paddingInlineStart") : null,
+    paddingInlineEnd: ({ props: props7 }) => props7.paddingInlineEnd ? (0, import_scratch.getSpacingBasedOnRatio)(props7, "paddingInlineEnd") : null,
+    paddingBlockStart: ({ props: props7 }) => props7.paddingBlockStart ? (0, import_scratch.getSpacingBasedOnRatio)(props7, "paddingBlockStart") : null,
+    paddingBlockEnd: ({ props: props7 }) => props7.paddingBlockEnd ? (0, import_scratch.getSpacingBasedOnRatio)(props7, "paddingBlockEnd") : null,
+    margin: ({ props: props7 }) => props7.margin ? (0, import_scratch.getSpacingBasedOnRatio)(props7, "margin") : null,
+    marginInline: ({ props: props7 }) => {
+      if (typeof props7.marginInline !== "string")
         return;
-      const [marginInlineStart, marginInlineEnd] = props5.marginInline.split(" ");
+      const [marginInlineStart, marginInlineEnd] = props7.marginInline.split(" ");
       return {
         ...(0, import_scratch.getSpacingByKey)(marginInlineStart, "marginInlineStart"),
         ...(0, import_scratch.getSpacingByKey)(marginInlineEnd || marginInlineStart, "marginInlineEnd")
       };
     },
-    marginBlock: ({ props: props5 }) => {
-      if (typeof props5.marginBlock !== "string")
+    marginBlock: ({ props: props7 }) => {
+      if (typeof props7.marginBlock !== "string")
         return;
-      const [marginBlockStart, marginBlockEnd] = props5.marginBlock.split(" ");
+      const [marginBlockStart, marginBlockEnd] = props7.marginBlock.split(" ");
       return {
         ...(0, import_scratch.getSpacingByKey)(marginBlockStart, "marginBlockStart"),
         ...(0, import_scratch.getSpacingByKey)(marginBlockEnd || marginBlockStart, "marginBlockEnd")
       };
     },
-    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)
+    marginInlineStart: ({ props: props7 }) => props7.marginInlineStart ? (0, import_scratch.getSpacingBasedOnRatio)(props7, "marginInlineStart") : null,
+    marginInlineEnd: ({ props: props7 }) => props7.marginInlineEnd ? (0, import_scratch.getSpacingBasedOnRatio)(props7, "marginInlineEnd") : null,
+    marginBlockStart: ({ props: props7 }) => props7.marginBlockStart ? (0, import_scratch.getSpacingBasedOnRatio)(props7, "marginBlockStart") : null,
+    marginBlockEnd: ({ props: props7 }) => props7.marginBlockEnd ? (0, import_scratch.getSpacingBasedOnRatio)(props7, "marginBlockEnd") : null,
+    gap: ({ props: props7 }) => props7.gap ? {
+      gap: (0, import_scratch.transfromGap)(props7.gap)
     } : null,
-    gridArea: ({ props: 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 && {
+    gridArea: ({ props: props7 }) => props7.gridArea && { gridArea: props7.gridArea },
+    flex: ({ props: props7 }) => props7.flex && { flex: props7.flex },
+    flexDirection: ({ props: props7 }) => props7.flexDirection && { flexDirection: props7.flexDirection },
+    alignItems: ({ props: props7 }) => props7.alignItems && { alignItems: props7.alignItems },
+    alignContent: ({ props: props7 }) => props7.alignContent && { alignContent: props7.alignContent },
+    justifyContent: ({ props: props7 }) => props7.justifyContent && { justifyContent: props7.justifyContent },
+    justifyItems: ({ props: props7 }) => props7.justifyItems && { justifyItems: props7.justifyItems },
+    alignSelf: ({ props: props7 }) => props7.alignSelf && { alignSelf: props7.alignSelf },
+    order: ({ props: props7 }) => props7.order && { order: props7.order },
+    flexWrap: ({ props: props7 }) => props7.flexWrap && {
       display: "flex",
-      flexFlow: props5.flexWrap
+      flexFlow: props7.flexWrap
     },
-    flexFlow: ({ props: props5 }) => props5.flexFlow && {
+    flexFlow: ({ props: props7 }) => props7.flexFlow && {
       display: "flex",
-      flexFlow: props5.flexFlow
+      flexFlow: props7.flexFlow
     },
-    flexAlign: ({ props: props5 }) => {
-      if (typeof props5.flexAlign !== "string")
+    flexAlign: ({ props: props7 }) => {
+      if (typeof props7.flexAlign !== "string")
         return;
-      const [alignItems, justifyContent] = props5.flexAlign.split(" ");
+      const [alignItems, justifyContent] = props7.flexAlign.split(" ");
       return {
         display: "flex",
         alignItems,
         justifyContent
       };
     },
-    gridColumn: ({ props: props5 }) => props5.gridColumn && { gridColumn: props5.gridColumn },
-    gridColumnStart: ({ props: props5 }) => props5.columnStart ? {
-      gridColumnStart: props5.columnStart
+    gridColumn: ({ props: props7 }) => props7.gridColumn && { gridColumn: props7.gridColumn },
+    gridColumnStart: ({ props: props7 }) => props7.columnStart ? {
+      gridColumnStart: props7.columnStart
     } : null,
-    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")
+    gridRow: ({ props: props7 }) => props7.gridRow && { gridRow: props7.gridRow },
+    gridRowStart: ({ props: props7 }) => props7.rowStart ? { gridRowStart: props7.rowStart } : null,
+    size: ({ props: props7 }) => {
+      if (typeof props7.heightRange !== "string")
         return;
-      const [minHeight, maxHeight] = props5.heightRange.split(" ");
+      const [minHeight, maxHeight] = props7.heightRange.split(" ");
       return {
         ...(0, import_scratch.getSpacingByKey)(minHeight, "minHeight"),
         ...(0, import_scratch.getSpacingByKey)(maxHeight || minHeight, "maxHeight")
       };
     },
-    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 }
+    columns: ({ props: props7 }) => props7.columns && { columns: props7.columns },
+    columnGap: ({ props: props7 }) => props7.columnGap ? (0, import_scratch.getSpacingBasedOnRatio)(props7, "columnGap") : null,
+    columnSpan: ({ props: props7 }) => props7.columnSpan && { columns: props7.columnSpan },
+    columnFill: ({ props: props7 }) => props7.columnFill && { columns: props7.columnFill },
+    columnCount: ({ props: props7 }) => props7.columnCount && { columns: props7.columnCount }
   }
 };
 var Span = { tag: "span" };
@@ -10147,7 +10152,7 @@ var Direction = {
     direction: "ltr"
   },
   class: {
-    direction: ({ props: props5 }) => ({ direction: props5.direction })
+    direction: ({ props: props7 }) => ({ direction: props7.direction })
   }
 };
 
@@ -10157,12 +10162,12 @@ var Flex = {
     display: "flex"
   },
   class: {
-    flow: ({ props: props5 }) => props5.flow && { flexFlow: props5.flow },
-    wrap: ({ props: props5 }) => props5.wrap && { flexWrap: props5.wrap },
-    align: ({ props: props5 }) => {
-      if (typeof props5.align !== "string")
+    flow: ({ props: props7 }) => props7.flow && { flexFlow: props7.flow },
+    wrap: ({ props: props7 }) => props7.wrap && { flexWrap: props7.wrap },
+    align: ({ props: props7 }) => {
+      if (typeof props7.align !== "string")
         return;
-      const [alignItems, justifyContent] = props5.align.split(" ");
+      const [alignItems, justifyContent] = props7.align.split(" ");
       return { alignItems, justifyContent };
     }
   }
@@ -10173,22 +10178,22 @@ var import_scratch2 = __toESM(require_cjs());
 var Grid = {
   props: { display: "grid" },
   class: {
-    area: ({ props: props5 }) => props5.area ? { gridArea: props5.area } : null,
-    template: ({ props: props5 }) => props5.template ? { gridTemplate: props5.template } : null,
-    templateAreas: ({ props: props5 }) => props5.templateAreas ? { gridTemplateAreas: props5.templateAreas } : null,
-    column: ({ props: props5 }) => props5.column ? { gridColumn: props5.column } : null,
-    columns: ({ props: props5 }) => props5.columns ? { gridTemplateColumns: props5.columns } : null,
-    templateColumns: ({ props: props5 }) => props5.templateColumns ? { gridTemplateColumns: props5.templateColumns } : null,
-    autoColumns: ({ props: props5 }) => props5.autoColumns ? { gridAutoColumns: props5.autoColumns } : null,
-    columnStart: ({ props: props5 }) => props5.columnStart ? { gridColumnStart: props5.columnStart } : null,
-    row: ({ props: props5 }) => props5.row ? { gridRow: props5.row } : null,
-    rows: ({ props: props5 }) => props5.rows ? { gridTemplateRows: props5.rows } : null,
-    templateRows: ({ props: props5 }) => props5.templateRows ? { gridTemplateRows: props5.templateRows } : null,
-    autoRows: ({ props: props5 }) => props5.autoRows ? { gridAutoRows: props5.autoRows } : null,
-    rowStart: ({ props: props5 }) => props5.rowStart ? { gridRowStart: props5.rowStart } : null,
-    autoFlow: ({ props: props5 }) => props5.autoFlow ? { gridAutoFlow: props5.autoFlow } : null,
-    columnGap: ({ props: props5 }) => props5.columnGap ? (0, import_scratch2.getSpacingBasedOnRatio)(props5, "columnGap") : null,
-    rowGap: ({ props: props5 }) => props5.rowGap ? (0, import_scratch2.getSpacingBasedOnRatio)(props5, "rowGap") : null
+    area: ({ props: props7 }) => props7.area ? { gridArea: props7.area } : null,
+    template: ({ props: props7 }) => props7.template ? { gridTemplate: props7.template } : null,
+    templateAreas: ({ props: props7 }) => props7.templateAreas ? { gridTemplateAreas: props7.templateAreas } : null,
+    column: ({ props: props7 }) => props7.column ? { gridColumn: props7.column } : null,
+    columns: ({ props: props7 }) => props7.columns ? { gridTemplateColumns: props7.columns } : null,
+    templateColumns: ({ props: props7 }) => props7.templateColumns ? { gridTemplateColumns: props7.templateColumns } : null,
+    autoColumns: ({ props: props7 }) => props7.autoColumns ? { gridAutoColumns: props7.autoColumns } : null,
+    columnStart: ({ props: props7 }) => props7.columnStart ? { gridColumnStart: props7.columnStart } : null,
+    row: ({ props: props7 }) => props7.row ? { gridRow: props7.row } : null,
+    rows: ({ props: props7 }) => props7.rows ? { gridTemplateRows: props7.rows } : null,
+    templateRows: ({ props: props7 }) => props7.templateRows ? { gridTemplateRows: props7.templateRows } : null,
+    autoRows: ({ props: props7 }) => props7.autoRows ? { gridAutoRows: props7.autoRows } : null,
+    rowStart: ({ props: props7 }) => props7.rowStart ? { gridRowStart: props7.rowStart } : null,
+    autoFlow: ({ props: props7 }) => props7.autoFlow ? { gridAutoFlow: props7.autoFlow } : null,
+    columnGap: ({ props: props7 }) => props7.columnGap ? (0, import_scratch2.getSpacingBasedOnRatio)(props7, "columnGap") : null,
+    rowGap: ({ props: props7 }) => props7.rowGap ? (0, import_scratch2.getSpacingBasedOnRatio)(props7, "rowGap") : null
   }
 };
 
@@ -10201,9 +10206,9 @@ var Img = {
     title: ""
   },
   attr: {
-    src: ({ props: props5 }) => props5.src,
-    alt: ({ props: props5 }) => props5.alt,
-    title: ({ props: props5 }) => props5.title || props5.alt
+    src: ({ props: props7 }) => props7.src,
+    alt: ({ props: props7 }) => props7.alt,
+    title: ({ props: props7 }) => props7.title || props7.alt
   }
 };
 
@@ -10212,9 +10217,9 @@ var Form = {
   tag: "form",
   props: {},
   attr: {
-    action: ({ props: props5 }) => props5.action,
-    method: ({ props: props5 }) => props5.method,
-    enctype: ({ props: props5 }) => props5.enctype
+    action: ({ props: props7 }) => props7.action,
+    method: ({ props: props7 }) => props7.method,
+    enctype: ({ props: props7 }) => props7.enctype
   }
 };
 
@@ -10231,24 +10236,24 @@ var import_scratch4 = __toESM(require_cjs());
 var import_scratch3 = __toESM(require_cjs());
 var Timing = {
   class: {
-    transition: ({ props: props5 }) => props5.transition && {
-      transition: (0, import_scratch3.splitTransition)(props5.transition)
+    transition: ({ props: props7 }) => props7.transition && {
+      transition: (0, import_scratch3.splitTransition)(props7.transition)
     },
-    willChange: ({ props: props5 }) => props5.willChange && {
-      willChange: props5.willChange
+    willChange: ({ props: props7 }) => props7.willChange && {
+      willChange: props7.willChange
     },
-    transitionDuration: ({ props: props5 }) => props5.transitionDuration && {
-      transitionDuration: (0, import_scratch3.transformDuration)(props5.transitionDuration)
+    transitionDuration: ({ props: props7 }) => props7.transitionDuration && {
+      transitionDuration: (0, import_scratch3.transformDuration)(props7.transitionDuration)
     },
-    transitionDelay: ({ props: props5 }) => props5.transitionDelay && {
-      transitionDelay: (0, import_scratch3.transformDuration)(props5.transitionDelay)
+    transitionDelay: ({ props: props7 }) => props7.transitionDelay && {
+      transitionDelay: (0, import_scratch3.transformDuration)(props7.transitionDelay)
     },
-    transitionTimingFunction: ({ props: props5 }) => props5.transitionTimingFunction && {
-      transitionTimingFunction: (0, import_scratch3.getTimingFunction)(props5.transitionTimingFunction)
+    transitionTimingFunction: ({ props: props7 }) => props7.transitionTimingFunction && {
+      transitionTimingFunction: (0, import_scratch3.getTimingFunction)(props7.transitionTimingFunction)
     },
-    transitionProperty: ({ props: props5 }) => props5.transitionProperty && {
-      transitionProperty: props5.transitionProperty,
-      willChange: props5.transitionProperty
+    transitionProperty: ({ props: props7 }) => props7.transitionProperty && {
+      transitionProperty: props7.transitionProperty,
+      willChange: props7.transitionProperty
     }
   }
 };
@@ -10263,11 +10268,11 @@ var depth = {
   26: { boxShadow: `rgba(0,0,0,.10) 0 14${CONFIG.UNIT.default} 26${CONFIG.UNIT.default}` },
   42: { boxShadow: `rgba(0,0,0,.10) 0 20${CONFIG.UNIT.default} 42${CONFIG.UNIT.default}` }
 };
-var getComputedBackgroundColor = ({ props: 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 getComputedBackgroundColor = ({ props: props7 }) => {
+  return (0, import_scratch4.getColor)(props7.shapeDirectionColor) || (0, import_scratch4.getColor)(props7.borderColor) || (0, import_scratch4.getColor)(props7.backgroundColor) || (0, import_scratch4.getColor)(props7.background);
 };
-var inheritTransition = ({ props: props5 }) => {
-  const exec5 = Timing.class.transition({ props: props5 });
+var inheritTransition = ({ props: props7 }) => {
+  const exec5 = Timing.class.transition({ props: props7 });
   return exec5 && exec5.transition;
 };
 var SHAPES = {
@@ -10277,16 +10282,16 @@ var SHAPES = {
   tv: {
     borderRadius: "1.15em/2.5em"
   },
-  tooltip: ({ props: props5 }) => ({
-    position: props5.position || "relative",
+  tooltip: ({ props: props7 }) => ({
+    position: props7.position || "relative",
     "&:before": {
       content: '""',
       display: "block",
       width: "0px",
       height: "0px",
       border: ".35em solid",
-      borderColor: getComputedBackgroundColor({ props: props5 }),
-      transition: inheritTransition({ props: props5 }),
+      borderColor: getComputedBackgroundColor({ props: props7 }),
+      transition: inheritTransition({ props: props7 }),
       transitionProperty: "border-color",
       position: "absolute",
       borderRadius: ".15em"
@@ -10322,13 +10327,13 @@ var SHAPES = {
       }
     }
   },
-  tag: ({ props: props5 }) => ({
+  tag: ({ props: props7 }) => ({
     position: "relative",
     "&:before": {
       content: '""',
       display: "block",
-      background: getComputedBackgroundColor({ props: props5 }),
-      transition: inheritTransition({ props: props5 }),
+      background: getComputedBackgroundColor({ props: props7 }),
+      transition: inheritTransition({ props: props7 }),
       transitionProperty: "background",
       borderRadius: ".25em",
       position: "absolute",
@@ -10369,7 +10374,7 @@ var SHAPES = {
       }
     }
   },
-  hexagon: ({ props: props5 }) => ({
+  hexagon: ({ props: props7 }) => ({
     position: "relative",
     "&:before, &:after": {
       content: '""',
@@ -10381,8 +10386,8 @@ var SHAPES = {
       top: "50%",
       transformOrigin: "50% 50%",
       height: "73%",
-      background: getComputedBackgroundColor({ props: props5 }),
-      transition: inheritTransition({ props: props5 }),
+      background: getComputedBackgroundColor({ props: props7 }),
+      transition: inheritTransition({ props: props7 }),
       transitionProperty: "background"
     },
     "&:before": {
@@ -10394,7 +10399,7 @@ var SHAPES = {
       transform: "translate3d(-50%, -50%, 1px) rotate(45deg)"
     }
   }),
-  chevron: ({ props: props5 }) => ({
+  chevron: ({ props: props7 }) => ({
     position: "relative",
     // overflow: 'hidden',
     "&:before, &:after": {
@@ -10405,14 +10410,14 @@ var SHAPES = {
       aspectRatio: "1/1",
       top: "50%",
       transformOrigin: "50% 50%",
-      transition: inheritTransition({ props: props5 }),
+      transition: inheritTransition({ props: props7 }),
       transitionProperty: "background"
     },
     "&:before": {
-      background: `linear-gradient(225deg, ${getComputedBackgroundColor({ props: props5 })} 25%, transparent 25%), linear-gradient(315deg, ${getComputedBackgroundColor({ props: props5 })} 25%, transparent 25%)`
+      background: `linear-gradient(225deg, ${getComputedBackgroundColor({ props: props7 })} 25%, transparent 25%), linear-gradient(315deg, ${getComputedBackgroundColor({ props: props7 })} 25%, transparent 25%)`
     },
     "&:after": {
-      background: getComputedBackgroundColor({ props: props5 }),
+      background: getComputedBackgroundColor({ props: props7 }),
       borderRadius: ".25em"
     }
   }),
@@ -10451,153 +10456,153 @@ var getSystemTheme = ({ context, state }) => {
 };
 var Theme = {
   class: {
-    depth: ({ props: props5 }) => props5.depth && depth[props5.depth],
+    depth: ({ props: props7 }) => props7.depth && depth[props7.depth],
     theme: (element) => {
-      const { props: props5 } = element;
+      const { props: props7 } = element;
       const globalTheme = getSystemTheme(element);
-      if (!props5.theme)
+      if (!props7.theme)
         return;
-      return (0, import_scratch5.getMediaTheme)(props5.theme, `@${props5.themeModifier || globalTheme}`);
+      return (0, import_scratch5.getMediaTheme)(props7.theme, `@${props7.themeModifier || globalTheme}`);
     },
     color: (element) => {
-      const { props: props5 } = element;
+      const { props: props7 } = element;
       const globalTheme = getSystemTheme(element);
-      if (!props5.color)
+      if (!props7.color)
         return;
       return {
-        color: (0, import_scratch5.getMediaColor)(props5.color, globalTheme)
+        color: (0, import_scratch5.getMediaColor)(props7.color, globalTheme)
       };
     },
     background: (element) => {
-      const { props: props5 } = element;
+      const { props: props7 } = element;
       const globalTheme = getSystemTheme(element);
-      if (!props5.background)
+      if (!props7.background)
         return;
       return {
-        background: (0, import_scratch5.getMediaColor)(props5.background, globalTheme)
+        background: (0, import_scratch5.getMediaColor)(props7.background, globalTheme)
       };
     },
     backgroundColor: (element) => {
-      const { props: props5 } = element;
+      const { props: props7 } = element;
       const globalTheme = getSystemTheme(element);
-      if (!props5.backgroundColor)
+      if (!props7.backgroundColor)
         return;
       return {
-        backgroundColor: (0, import_scratch5.getMediaColor)(props5.backgroundColor, globalTheme)
+        backgroundColor: (0, import_scratch5.getMediaColor)(props7.backgroundColor, globalTheme)
       };
     },
     backgroundImage: (element) => {
-      const { props: props5 } = element;
+      const { props: props7 } = element;
       const globalTheme = getSystemTheme(element);
-      if (!props5.backgroundImage)
+      if (!props7.backgroundImage)
         return;
       return {
-        backgroundImage: (0, import_scratch5.transformBackgroundImage)(props5.backgroundImage, globalTheme)
+        backgroundImage: (0, import_scratch5.transformBackgroundImage)(props7.backgroundImage, globalTheme)
       };
     },
-    backgroundSize: ({ props: props5 }) => props5.backgroundSize ? {
-      backgroundSize: props5.backgroundSize
+    backgroundSize: ({ props: props7 }) => props7.backgroundSize ? {
+      backgroundSize: props7.backgroundSize
     } : null,
-    backgroundPosition: ({ props: props5 }) => props5.backgroundPosition ? {
-      backgroundPosition: props5.backgroundPosition
+    backgroundPosition: ({ props: props7 }) => props7.backgroundPosition ? {
+      backgroundPosition: props7.backgroundPosition
     } : null,
-    textStroke: ({ props: props5 }) => props5.textStroke ? {
-      WebkitTextStroke: (0, import_scratch5.transformTextStroke)(props5.textStroke)
+    textStroke: ({ props: props7 }) => props7.textStroke ? {
+      WebkitTextStroke: (0, import_scratch5.transformTextStroke)(props7.textStroke)
     } : null,
-    outline: ({ props: props5 }) => props5.outline && {
-      outline: (0, import_scratch5.transformBorder)(props5.outline)
+    outline: ({ props: props7 }) => props7.outline && {
+      outline: (0, import_scratch5.transformBorder)(props7.outline)
     },
-    border: ({ props: props5 }) => props5.border && {
-      border: (0, import_scratch5.transformBorder)(props5.border)
+    border: ({ props: props7 }) => props7.border && {
+      border: (0, import_scratch5.transformBorder)(props7.border)
     },
-    borderColor: ({ props: props5 }) => props5.borderColor && {
-      borderColor: (0, import_scratch5.getMediaColor)(props5.borderColor)
+    borderColor: ({ props: props7 }) => props7.borderColor && {
+      borderColor: (0, import_scratch5.getMediaColor)(props7.borderColor)
     },
-    borderStyle: ({ props: props5 }) => props5.borderStyle && {
-      borderStyle: props5.borderStyle
+    borderStyle: ({ props: props7 }) => props7.borderStyle && {
+      borderStyle: props7.borderStyle
     },
-    borderLeft: ({ props: props5 }) => props5.borderLeft && {
-      borderLeft: (0, import_scratch5.transformBorder)(props5.borderLeft)
+    borderLeft: ({ props: props7 }) => props7.borderLeft && {
+      borderLeft: (0, import_scratch5.transformBorder)(props7.borderLeft)
     },
-    borderTop: ({ props: props5 }) => props5.borderTop && {
-      borderTop: (0, import_scratch5.transformBorder)(props5.borderTop)
+    borderTop: ({ props: props7 }) => props7.borderTop && {
+      borderTop: (0, import_scratch5.transformBorder)(props7.borderTop)
     },
-    borderRight: ({ props: props5 }) => props5.borderRight && {
-      borderRight: (0, import_scratch5.transformBorder)(props5.borderRight)
+    borderRight: ({ props: props7 }) => props7.borderRight && {
+      borderRight: (0, import_scratch5.transformBorder)(props7.borderRight)
     },
-    borderBottom: ({ props: props5 }) => props5.borderBottom && {
-      borderBottom: (0, import_scratch5.transformBorder)(props5.borderBottom)
+    borderBottom: ({ props: props7 }) => props7.borderBottom && {
+      borderBottom: (0, import_scratch5.transformBorder)(props7.borderBottom)
     },
-    boxShadow: ({ props: props5 }) => props5.boxShadow && {
-      boxShadow: (0, import_scratch5.transformShadow)(props5.boxShadow)
+    boxShadow: ({ props: props7 }) => props7.boxShadow && {
+      boxShadow: (0, import_scratch5.transformShadow)(props7.boxShadow)
     },
-    textShadow: ({ props: props5 }) => props5.textShadow && {
-      textShadow: (0, import_scratch5.transformShadow)(props5.textShadow)
+    textShadow: ({ props: props7 }) => props7.textShadow && {
+      textShadow: (0, import_scratch5.transformShadow)(props7.textShadow)
     },
-    opacity: ({ props: props5 }) => props5.opacity && {
-      opacity: props5.opacity
+    opacity: ({ props: props7 }) => props7.opacity && {
+      opacity: props7.opacity
     },
-    visibility: ({ props: props5 }) => props5.visibility && {
-      visibility: props5.visibility
+    visibility: ({ props: props7 }) => props7.visibility && {
+      visibility: props7.visibility
     },
-    columnRule: ({ props: props5 }) => props5.columnRule && {
-      columnRule: (0, import_scratch5.transformBorder)(props5.columnRule)
+    columnRule: ({ props: props7 }) => props7.columnRule && {
+      columnRule: (0, import_scratch5.transformBorder)(props7.columnRule)
     }
   }
 };
 
 // Atoms/Media.js
 var keySetters = {
-  "@": (key, props5, result, element, isSubtree) => applyMediaProps(
+  "@": (key, props7, result, element, isSubtree) => applyMediaProps(
     key,
-    props5,
+    props7,
     isSubtree ? result : result && result.media,
     element
   ),
-  ":": (key, props5, result, element, isSubtree) => applySelectorProps(
+  ":": (key, props7, result, element, isSubtree) => applySelectorProps(
     key,
-    props5,
+    props7,
     isSubtree ? result : result && result.selector,
     element
   ),
-  "[": (key, props5, result, element, isSubtree) => applySelectorProps(
+  "[": (key, props7, result, element, isSubtree) => applySelectorProps(
     key,
-    props5,
+    props7,
     isSubtree ? result : result && result.selector,
     element
   ),
-  "&": (key, props5, result, element, isSubtree) => applySelectorProps(
+  "&": (key, props7, result, element, isSubtree) => applySelectorProps(
     key,
-    props5,
+    props7,
     isSubtree ? result : result && result.selector,
     element
   ),
-  $: (key, props5, result, element, isSubtree) => applyCaseProps(
+  $: (key, props7, result, element, isSubtree) => applyCaseProps(
     key,
-    props5,
+    props7,
     isSubtree ? result : result && result.case,
     element
   ),
-  ".": (key, props5, result, element, isSubtree) => applyConditionalCaseProps(
+  ".": (key, props7, result, element, isSubtree) => applyConditionalCaseProps(
     key,
-    props5,
+    props7,
     isSubtree ? result : result && result.case,
     element
   ),
-  "!": (key, props5, result, element, isSubtree) => applyConditionalFalsyProps(
+  "!": (key, props7, result, element, isSubtree) => applyConditionalFalsyProps(
     key,
-    props5,
+    props7,
     isSubtree ? result : result && result.case,
     element
   )
 };
-var execClass = (key, props5, result, element) => {
+var execClass = (key, props7, result, element) => {
   const { class: className } = element;
   const classnameExec = className[key];
   if (typeof classnameExec !== "function")
     return;
   let classExec = classnameExec({
-    props: props5,
+    props: props7,
     context: element.context,
     state: element.state
   });
@@ -10609,27 +10614,27 @@ var execClass = (key, props5, result, element) => {
   }
   return classExec;
 };
-var convertPropsToClass = (props5, result, element) => {
+var convertPropsToClass = (props7, result, element) => {
   const propsClassObj = {};
-  for (const key in props5) {
+  for (const key in props7) {
     const setter = keySetters[key.slice(0, 1)];
     if (setter) {
-      setter(key, props5[key], propsClassObj, element, true);
+      setter(key, props7[key], propsClassObj, element, true);
       continue;
     } else {
-      execClass(key, props5, propsClassObj, element);
+      execClass(key, props7, propsClassObj, element);
     }
   }
   return propsClassObj;
 };
-var applyMediaProps = (key, props5, result, element) => {
+var applyMediaProps = (key, props7, result, element) => {
   const { context } = element;
   if (!context.designSystem || !context.designSystem.MEDIA)
     return;
   const globalTheme = getSystemTheme(element);
   const { MEDIA } = context.designSystem;
   const mediaName = MEDIA[key.slice(1)];
-  const generatedClass = convertPropsToClass(props5, result, element);
+  const generatedClass = convertPropsToClass(props7, result, element);
   const name = key.slice(1);
   const isTheme = ["dark", "light"].includes(name);
   const matchesGlobal = name === globalTheme;
@@ -10642,49 +10647,49 @@ var applyMediaProps = (key, props5, result, element) => {
   result[mediaKey] = generatedClass;
   return result[mediaKey];
 };
-var applySelectorProps = (key, props5, result, element) => {
+var applySelectorProps = (key, props7, result, element) => {
   const selectorKey = `&${key}`;
-  result[selectorKey] = convertPropsToClass(props5, result, element);
+  result[selectorKey] = convertPropsToClass(props7, result, element);
   return result[selectorKey];
 };
-var applyCaseProps = (key, props5, result, element) => {
+var applyCaseProps = (key, props7, result, element) => {
   const { CASES } = element.context && element.context.designSystem;
   const caseKey = key.slice(1);
   const isPropTrue = element.props[caseKey];
   if (!CASES[caseKey] && !isPropTrue)
     return;
-  return (0, import_utils.merge)(result, convertPropsToClass(props5, result, element));
+  return (0, import_utils.merge)(result, convertPropsToClass(props7, result, element));
 };
-var applyConditionalCaseProps = (key, props5, result, element) => {
+var applyConditionalCaseProps = (key, props7, result, element) => {
   const caseKey = key.slice(1);
   const isPropTrue = element.props[caseKey] || element.state[caseKey];
   if (!isPropTrue)
     return;
-  return (0, import_utils.merge)(result, convertPropsToClass(props5, result, element));
+  return (0, import_utils.merge)(result, convertPropsToClass(props7, result, element));
 };
-var applyConditionalFalsyProps = (key, props5, result, element) => {
+var applyConditionalFalsyProps = (key, props7, result, element) => {
   const caseKey = key.slice(1);
   const isPropTrue = element.props[caseKey] || element.state[caseKey] === true;
   if (!isPropTrue)
-    return (0, import_utils.merge)(result, convertPropsToClass(props5, result, element));
+    return (0, import_utils.merge)(result, convertPropsToClass(props7, result, element));
 };
-var applyTrueProps = (props5, result, element) => (0, import_utils.merge)(result, convertPropsToClass(props5, result, element));
+var applyTrueProps = (props7, result, element) => (0, import_utils.merge)(result, convertPropsToClass(props7, result, element));
 var beforeClassAssign = (element, s) => {
-  const { props: props5, class: className } = element;
+  const { props: props7, class: className } = element;
   const CLASS_NAMES = {
     media: {},
     selector: {},
     case: {}
   };
-  for (const key in props5) {
+  for (const key in props7) {
     const setter = keySetters[key.slice(0, 1)];
     if (setter)
-      setter(key, props5[key], CLASS_NAMES, element);
+      setter(key, props7[key], CLASS_NAMES, element);
   }
   (0, import_utils.overwriteShallow)(className, CLASS_NAMES);
 };
 var initUpdate = (changes, element) => {
-  const { props: props5, context, class: className } = element;
+  const { props: props7, context, class: className } = element;
   if (!context)
     return;
   const globalTheme = context.designSystem.globalTheme;
@@ -10704,10 +10709,10 @@ var initUpdate = (changes, element) => {
       selector: {},
       case: {}
     };
-    for (const key in props5) {
+    for (const key in props7) {
       const setter = keySetters[key.slice(0, 1)];
       if (key === "theme") {
-        props5.update({
+        props7.update({
           themeModifier: globalTheme
         }, {
           preventRecursive: true,
@@ -10715,9 +10720,9 @@ var initUpdate = (changes, element) => {
           preventDefineUpdate: true
         });
       } else if (key === "true")
-        applyTrueProps(props5[key], CLASS_NAMES, element);
+        applyTrueProps(props7[key], CLASS_NAMES, element);
       if (setter)
-        setter(key, props5[key], CLASS_NAMES, element);
+        setter(key, props7[key], CLASS_NAMES, element);
     }
     if (Object.keys(CLASS_NAMES.media).length) {
       className.media = CLASS_NAMES.media;
@@ -10746,19 +10751,19 @@ var Iframe = {
     minHeight: "H"
   },
   attr: {
-    src: ({ props: props5 }) => props5.src,
-    loading: ({ props: props5 }) => props5.loading,
-    allowfullscreen: ({ props: props5 }) => props5.allowfullscreen,
-    referrerpolicy: ({ props: props5 }) => props5.referrerpolicy
+    src: ({ props: props7 }) => props7.src,
+    loading: ({ props: props7 }) => props7.loading,
+    allowfullscreen: ({ props: props7 }) => props7.allowfullscreen,
+    referrerpolicy: ({ props: props7 }) => props7.referrerpolicy
   }
 };
 
 // Atoms/Interaction.js
 var Interaction = {
   class: {
-    userSelect: ({ props: props5 }) => props5.userSelect && { userSelect: props5.userSelect },
-    pointerEvents: ({ props: props5 }) => props5.pointerEvents && { pointerEvents: props5.pointerEvents },
-    cursor: ({ props: props5 }) => props5.cursor && { cursor: props5.cursor }
+    userSelect: ({ props: props7 }) => props7.userSelect && { userSelect: props7.userSelect },
+    pointerEvents: ({ props: props7 }) => props7.pointerEvents && { pointerEvents: props7.pointerEvents },
+    cursor: ({ props: props7 }) => props7.cursor && { cursor: props7.cursor }
   }
 };
 
@@ -10811,8 +10816,8 @@ var Focusable = {
     }
   },
   attr: {
-    placeholder: ({ props: props5 }) => props5.placeholder,
-    tabIndex: ({ props: props5 }) => props5.tabIndex
+    placeholder: ({ props: props7 }) => props7.placeholder,
+    tabIndex: ({ props: props7 }) => props7.tabIndex
   }
 };
 var FocusableComponent = {
@@ -10829,14 +10834,14 @@ var FocusableComponent = {
     style
   },
   attr: {
-    type: ({ props: props5 }) => props5.type
+    type: ({ props: props7 }) => props7.type
   }
 };
 
 // Atoms/Overflow.js
 var Overflow = {
   class: {
-    overflow: ({ props: props5 }) => props5.overflow && { overflow: props5.overflow }
+    overflow: ({ props: props7 }) => props7.overflow && { overflow: props7.overflow }
   }
 };
 
@@ -10912,17 +10917,17 @@ var import_scratch6 = __toESM(require_cjs());
 var Position = {
   props: {},
   class: {
-    position: ({ props: props5 }) => props5.position && { position: props5.position },
-    inset: ({ props: props5 }) => {
-      const { inset } = props5;
+    position: ({ props: props7 }) => props7.position && { position: props7.position },
+    inset: ({ props: props7 }) => {
+      const { inset } = props7;
       if (typeof inset !== "string")
         return;
       return { inset: inset.split(" ").map((v) => (0, import_scratch6.getSpacingByKey)(v, "k").k).join(" ") };
     },
-    left: ({ props: 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")
+    left: ({ props: props7 }) => (0, import_scratch6.getSpacingByKey)(props7.left, "left"),
+    top: ({ props: props7 }) => (0, import_scratch6.getSpacingByKey)(props7.top, "top"),
+    right: ({ props: props7 }) => (0, import_scratch6.getSpacingByKey)(props7.right, "right"),
+    bottom: ({ props: props7 }) => (0, import_scratch6.getSpacingByKey)(props7.bottom, "bottom")
   }
 };
 
@@ -10933,30 +10938,30 @@ var Picture = {
     tag: "source",
     attr: {
       media: (element) => {
-        const { props: props5, key, context } = element;
+        const { props: props7, key, context } = element;
         const { MEDIA } = context.designSystem;
         const globalTheme = getSystemTheme(element);
-        const mediaName = (props5.media || key).slice(1);
+        const mediaName = (props7.media || key).slice(1);
         if (mediaName === globalTheme)
           return "(min-width: 0px)";
         else if (mediaName === "dark" || mediaName === "light")
           return "(max-width: 0px)";
         return MEDIA[mediaName];
       },
-      srcset: ({ props: props5 }) => props5.srcset
+      srcset: ({ props: props7 }) => props7.srcset
     }
   },
-  Img: ({ props: props5 }) => ({
+  Img: ({ props: props7 }) => ({
     width: "inherit",
     height: "inherit",
-    src: props5.src
+    src: props7.src
   })
 };
 
 // Atoms/Pseudo.js
 var Pseudo = {
   class: {
-    content: ({ props: props5 }) => props5.content && { content: props5.content }
+    content: ({ props: props7 }) => props7.content && { content: props7.content }
   }
 };
 
@@ -10970,25 +10975,25 @@ var Svg = {
     xmlns: "http://www.w3.org/2000/svg",
     "xmlns:xlink": "http://www.w3.org/1999/xlink"
   },
-  html: ({ key, props: props5, context, ...el }) => {
+  html: ({ key, props: props7, context, ...el }) => {
     const { designSystem, utils } = context;
     const SVG = designSystem && designSystem.SVG;
-    const useSvgSprite = props5.spriteId || context.designSystem && context.designSystem.useSvgSprite;
+    const useSvgSprite = props7.spriteId || context.designSystem && context.designSystem.useSvgSprite;
     const useSVGSymbol = (icon) => `<use xlink:href="#${icon}" />`;
     const init = utils && utils.init;
-    if (!useSvgSprite && props5.src)
-      return props5.src;
-    const spriteId = props5.spriteId;
+    if (!useSvgSprite && props7.src)
+      return props7.src;
+    const spriteId = props7.spriteId;
     if (spriteId)
       return useSVGSymbol(spriteId);
-    const symbolId = Symbol.for(props5.src);
+    const symbolId = Symbol.for(props7.src);
     let SVGKey = SVG[symbolId];
     if (SVGKey && SVG[SVGKey])
       return useSVGSymbol(SVGKey);
     SVGKey = SVG[symbolId] = Math.random();
-    if (props5.src) {
+    if (props7.src) {
       init({
-        svg: { [SVGKey]: props5.src }
+        svg: { [SVGKey]: props7.src }
       }, {
         document: context.document,
         emotion: context.emotion
@@ -11001,60 +11006,60 @@ var Svg = {
 // Atoms/Shape/index.js
 var import_utils3 = __toESM(require_cjs5());
 var import_scratch7 = __toESM(require_cjs());
-var transformBorderRadius = (radius, props5, propertyName) => {
+var transformBorderRadius = (radius, props7, propertyName) => {
   if (!(0, import_utils3.isString)(radius))
     return;
   return {
-    borderRadius: radius.split(" ").map((v, k) => (0, import_scratch7.getSpacingBasedOnRatio)(props5, propertyName, v)[propertyName]).join(" ")
+    borderRadius: radius.split(" ").map((v, k) => (0, import_scratch7.getSpacingBasedOnRatio)(props7, propertyName, v)[propertyName]).join(" ")
   };
 };
 var Shape = {
   extend: Pseudo,
   class: {
-    shape: ({ props: props5 }) => {
-      const { shape } = props5;
-      return (0, import_utils3.exec)(SHAPES[shape], { props: props5 });
+    shape: ({ props: props7 }) => {
+      const { shape } = props7;
+      return (0, import_utils3.exec)(SHAPES[shape], { props: props7 });
     },
-    shapeDirection: ({ props: props5 }) => {
-      const { shape, shapeDirection } = props5;
+    shapeDirection: ({ props: props7 }) => {
+      const { shape, shapeDirection } = props7;
       if (!shape || !shapeDirection)
         return;
       const shapeDir = SHAPES[shape + "Direction"];
       return shape && shapeDir ? shapeDir[shapeDirection || "left"] : null;
     },
-    shapeDirectionColor: ({ props: props5 }) => {
-      const { background, backgroundColor } = props5;
+    shapeDirectionColor: ({ props: props7 }) => {
+      const { background, backgroundColor } = props7;
       const borderColor = {
         borderColor: (0, import_scratch7.getMediaColor)(background || backgroundColor)
       };
-      return props5.shapeDirection ? borderColor : null;
+      return props7.shapeDirection ? borderColor : null;
     },
-    round: ({ props: props5, key, ...el }) => transformBorderRadius(props5.round || props5.borderRadius, props5, "round"),
-    borderRadius: ({ props: props5, key, ...el }) => transformBorderRadius(props5.borderRadius || props5.round, props5, "borderRadius")
+    round: ({ props: props7, key, ...el }) => transformBorderRadius(props7.round || props7.borderRadius, props7, "round"),
+    borderRadius: ({ props: props7, key, ...el }) => transformBorderRadius(props7.borderRadius || props7.round, props7, "borderRadius")
   }
 };
 
 // Atoms/Text.js
 var import_scratch8 = __toESM(require_cjs());
 var Text = {
-  text: ({ key, props: props5, state }) => {
-    if (props5.text === true)
-      return state && state[key] || props5 && props5[key];
-    return props5.text;
+  text: ({ key, props: props7, state }) => {
+    if (props7.text === true)
+      return state && state[key] || props7 && props7[key];
+    return props7.text;
   },
   class: {
-    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 },
+    fontSize: ({ props: props7 }) => props7.fontSize ? (0, import_scratch8.getFontSizeByKey)(props7.fontSize) : null,
+    fontFamily: ({ props: props7 }) => props7.fontFamily && { fontFamily: (0, import_scratch8.getFontFamily)(props7.fontFamily) || props7.fontFamily },
+    lineHeight: ({ props: props7 }) => props7.lineHeight && { lineHeight: props7.lineHeight },
     // lineHeight: ({ props }) => props.lineHeight && getSpacingBasedOnRatio(props, 'lineHeight', null, ''),
-    textDecoration: ({ props: 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
+    textDecoration: ({ props: props7 }) => props7.textDecoration && { textDecoration: props7.textDecoration },
+    textTransform: ({ props: props7 }) => props7.textTransform && { textTransform: props7.textTransform },
+    whiteSpace: ({ props: props7 }) => props7.whiteSpace && { whiteSpace: props7.whiteSpace },
+    letterSpacing: ({ props: props7 }) => props7.letterSpacing && { letterSpacing: props7.letterSpacing },
+    textAlign: ({ props: props7 }) => props7.textAlign && { textAlign: props7.textAlign },
+    fontWeight: ({ props: props7 }) => props7.fontWeight && {
+      fontWeight: props7.fontWeight,
+      fontVariationSettings: '"wght" ' + props7.fontWeight
     }
   }
 };
@@ -11088,15 +11093,15 @@ var Footnote = {
 // Atoms/Transform.js
 var Transform = {
   class: {
-    transform: ({ props: props5 }) => props5.transform && { transform: props5.transform },
-    transformOrigin: ({ props: props5 }) => props5.transformOrigin && { transformOrigin: props5.transformOrigin }
+    transform: ({ props: props7 }) => props7.transform && { transform: props7.transform },
+    transformOrigin: ({ props: props7 }) => props7.transformOrigin && { transformOrigin: props7.transformOrigin }
   }
 };
 
 // Atoms/XYZ.js
 var XYZ = {
   class: {
-    zIndex: ({ props: props5 }) => props5.zIndex && { zIndex: props5.zIndex }
+    zIndex: ({ props: props7 }) => props7.zIndex && { zIndex: props7.zIndex }
   }
 };
 
@@ -11253,11 +11258,11 @@ var length = 0;
 var position = 0;
 var character = 0;
 var characters = "";
-function node(value, root, parent, type, props5, children, length2) {
-  return { value, root, parent, type, props: props5, children, line, column, length: length2, return: "" };
+function node(value, root, parent, type, props7, children, length2) {
+  return { value, root, parent, type, props: props7, children, line, column, length: length2, return: "" };
 }
-function copy(root, props5) {
-  return assign(node("", null, null, "", null, null, 0), root, { length: -root.length }, props5);
+function copy(root, props7) {
+  return assign(node("", null, null, "", null, null, 0), root, { length: -root.length }, props7);
 }
 function char() {
   return character;
@@ -11388,7 +11393,7 @@ function parse(value, root, parent, rule, rules, rulesets, pseudo, points, decla
   var ampersand = 1;
   var character2 = 0;
   var type = "";
-  var props5 = rules;
+  var props7 = rules;
   var children = rulesets;
   var reference = rule;
   var characters2 = type;
@@ -11442,17 +11447,17 @@ function parse(value, root, parent, rule, rules, rulesets, pseudo, points, decla
           case 59:
             characters2 += ";";
           default:
-            append(reference = ruleset(characters2, root, parent, index, offset, rules, points, type, props5 = [], children = [], length2), rulesets);
+            append(reference = ruleset(characters2, root, parent, index, offset, rules, points, type, props7 = [], children = [], length2), rulesets);
             if (character2 === 123)
               if (offset === 0)
-                parse(characters2, root, reference, reference, props5, rulesets, length2, points, children);
+                parse(characters2, root, reference, reference, props7, rulesets, length2, points, children);
               else
                 switch (atrule === 99 && charat(characters2, 3) === 110 ? 100 : atrule) {
                   case 100:
                   case 108:
                   case 109:
                   case 115:
-                    parse(value, reference, reference, rule && append(ruleset(value, reference, reference, 0, 0, rules, points, type, rules, props5 = [], length2), children), rules, children, length2, points, rule ? props5 : children);
+                    parse(value, reference, reference, rule && append(ruleset(value, reference, reference, 0, 0, rules, points, type, rules, props7 = [], length2), children), rules, children, length2, points, rule ? props7 : children);
                     break;
                   default:
                     parse(characters2, reference, reference, reference, [""], children, 0, points, children);
@@ -11488,15 +11493,15 @@ function parse(value, root, parent, rule, rules, rulesets, pseudo, points, decla
     }
   return rulesets;
 }
-function ruleset(value, root, parent, index, offset, rules, points, type, props5, children, length2) {
+function ruleset(value, root, parent, index, offset, rules, points, type, props7, children, length2) {
   var post = offset - 1;
   var rule = offset === 0 ? rules : [""];
   var size = sizeof(rule);
   for (var i = 0, j = 0, k = 0; i < index; ++i)
     for (var x = 0, y = substr(value, post + 1, post = abs(j = points[i])), z = value; x < size; ++x)
       if (z = trim(j > 0 ? rule[x] + " " + y : replace(y, /&\f/g, rule[x])))
-        props5[k++] = z;
-  return node(value, root, parent, offset === 0 ? RULESET : type, props5, children, length2);
+        props7[k++] = z;
+  return node(value, root, parent, offset === 0 ? RULESET : type, props7, children, length2);
 }
 function comment(value, root, parent) {
   return node(value, root, parent, COMMENT, from(char()), substr(value, 2, -2), 0);
@@ -12473,26 +12478,26 @@ var Animation = {
     animationName: (el) => el.props.animationName && {
       animationName: applyAnimationProps(el.props.animationName, el)
     },
-    animationDuration: ({ props: props5 }) => props5.animationDuration && {
-      animationDuration: (0, import_scratch9.getTimingByKey)(props5.animationDuration).timing
+    animationDuration: ({ props: props7 }) => props7.animationDuration && {
+      animationDuration: (0, import_scratch9.getTimingByKey)(props7.animationDuration).timing
     },
-    animationDelay: ({ props: props5 }) => props5.animationDelay && {
-      animationDelay: (0, import_scratch9.getTimingByKey)(props5.animationDelay).timing
+    animationDelay: ({ props: props7 }) => props7.animationDelay && {
+      animationDelay: (0, import_scratch9.getTimingByKey)(props7.animationDelay).timing
     },
-    animationTimingFunction: ({ props: props5 }) => props5.animationTimingFunction && {
-      animationTimingFunction: (0, import_scratch9.getTimingFunction)(props5.animationTimingFunction)
+    animationTimingFunction: ({ props: props7 }) => props7.animationTimingFunction && {
+      animationTimingFunction: (0, import_scratch9.getTimingFunction)(props7.animationTimingFunction)
     },
-    animationFillMode: ({ props: props5 }) => props5.animationFillMode && {
-      animationFillMode: props5.animationFillMode
+    animationFillMode: ({ props: props7 }) => props7.animationFillMode && {
+      animationFillMode: props7.animationFillMode
     },
-    animationPlayState: ({ props: props5 }) => props5.animationPlayState && {
-      animationPlayState: props5.animationPlayState
+    animationPlayState: ({ props: props7 }) => props7.animationPlayState && {
+      animationPlayState: props7.animationPlayState
     },
-    animationIterationCount: ({ props: props5 }) => props5.animationIterationCount && {
-      animationIterationCount: props5.animationIterationCount || 1
+    animationIterationCount: ({ props: props7 }) => props7.animationIterationCount && {
+      animationIterationCount: props7.animationIterationCount || 1
     },
-    animationDirection: ({ props: props5 }) => props5.animationDirection && {
-      animationDirection: props5.animationDirection
+    animationDirection: ({ props: props7 }) => props7.animationDirection && {
+      animationDirection: props7.animationDirection
     }
   }
 };
@@ -12500,7 +12505,7 @@ var Animation = {
 // Box/index.js
 var PropsCSS = {
   class: {
-    style: ({ props: props5 }) => props5 && props5.style
+    style: ({ props: props7 }) => props7 && props7.style
   }
 };
 var Box = {
@@ -12520,7 +12525,7 @@ var Box = {
     Animation
   ],
   attr: {
-    id: ({ props: props5 }) => props5.id
+    id: ({ props: props7 }) => props7.id
   }
 };
 
@@ -12535,7 +12540,7 @@ var Avatar = {
     cursor: "pointer"
   },
   attr: {
-    src: ({ key, props: props5 }) => props5.src || `https://avatars.dicebear.com/api/${props5.avatarType || "adventurer-neutral"}/${props5.key || key}.svg`
+    src: ({ key, props: props7 }) => props7.src || `https://avatars.dicebear.com/api/${props7.avatarType || "adventurer-neutral"}/${props7.key || key}.svg`
   }
 };
 var AvatarBundle = {
@@ -12555,15 +12560,15 @@ var AvatarBundle = {
 // Icon/index.js
 var Icon = {
   extend: Svg,
-  props: ({ key, props: props5, parent, context }) => {
+  props: ({ key, props: props7, parent, context }) => {
     const { ICONS, useIconSprite, verbose } = context && context.designSystem;
     const { toCamelCase } = context && context.utils;
-    const iconName = props5.inheritedString || props5.name || props5.icon || key;
+    const iconName = props7.inheritedString || props7.name || props7.icon || key;
     const camelCase = toCamelCase(iconName);
     const isArray9 = camelCase.split(/([a-z])([A-Z])/g);
     let activeIconName;
-    if (props5.active) {
-      activeIconName = props5[".active"].name || props5[".active"].icon;
+    if (props7.active) {
+      activeIconName = props7[".active"].name || props7[".active"].icon;
     }
     if (parent && parent.props && parent.props.active && parent.props[".active"] && parent.props[".active"].icon) {
       activeIconName = parent.props[".active"].icon.name || parent.props[".active"].icon.icon || parent.props[".active"].icon;
@@ -12582,7 +12587,7 @@ var Icon = {
         console.warn("Can't find icon:", iconName, validIconName);
     }
     const iconFromLibrary = ICONS[validIconName];
-    const directSrc = parent && parent.props && parent.props.src || props5.src;
+    const directSrc = parent && parent.props && parent.props.src || props7.src;
     return {
       width: "A",
       height: "A",
@@ -12607,9 +12612,9 @@ var IconText = {
   },
   Icon: {
     props: {},
-    if: ({ props: props5 }) => props5.name || props5.icon
+    if: ({ props: props7 }) => props7.name || props7.icon
   },
-  text: ({ props: props5 }) => props5.text
+  text: ({ props: props7 }) => props7.text
 };
 
 // Button/index.js
@@ -12630,7 +12635,7 @@ var Button = {
     round: "C2"
   },
   attr: {
-    type: ({ props: props5 }) => props5.type
+    type: ({ props: props7 }) => props7.type
   }
 };
 var SquareButton = {
@@ -12661,6 +12666,41 @@ var ButtonSet = {
   childExtend: SquareButton
 };
 
+// Dialog/index.js
+var DialogFooter = {
+  extend: Flex,
+  props: {
+    align: "center flex-end",
+    gap: "X2",
+    margin: "auto - -",
+    padding: "Y2 X2"
+  },
+  childExtend: {
+    extend: Button,
+    props: {
+      theme: "primary @dark .color-only",
+      fontSize: "Z1",
+      textTransform: "uppercase",
+      background: "transparent",
+      "&": {
+        padding: "Z A"
+      },
+      ":hover": {
+        background: "white .065"
+      },
+      ":active": {
+        background: "white .1"
+      }
+    }
+  },
+  cancel: {
+    text: "cancel"
+  },
+  ok: {
+    text: "ok"
+  }
+};
+
 // Datepicker/node_modules/@symbo.ls/atoms/Block.js
 var import_scratch10 = __toESM(require_cjs9());
 
@@ -12670,12 +12710,12 @@ var Flex2 = {
     display: "flex"
   },
   class: {
-    flow: ({ props: props5 }) => props5.flow && { flexFlow: props5.flow },
-    wrap: ({ props: props5 }) => props5.wrap && { flexWrap: props5.wrap },
-    align: ({ props: props5 }) => {
-      if (typeof props5.align !== "string")
+    flow: ({ props: props7 }) => props7.flow && { flexFlow: props7.flow },
+    wrap: ({ props: props7 }) => props7.wrap && { flexWrap: props7.wrap },
+    align: ({ props: props7 }) => {
+      if (typeof props7.align !== "string")
         return;
-      const [alignItems, justifyContent] = props5.align.split(" ");
+      const [alignItems, justifyContent] = props7.align.split(" ");
       return { alignItems, justifyContent };
     }
   }
@@ -12686,22 +12726,22 @@ var import_scratch11 = __toESM(require_cjs9());
 var Grid2 = {
   props: { display: "grid" },
   class: {
-    area: ({ props: props5 }) => props5.area ? { gridArea: props5.area } : null,
-    template: ({ props: props5 }) => props5.template ? { gridTemplate: props5.template } : null,
-    templateAreas: ({ props: props5 }) => props5.templateAreas ? { gridTemplateAreas: props5.templateAreas } : null,
-    column: ({ props: props5 }) => props5.column ? { gridColumn: props5.column } : null,
-    columns: ({ props: props5 }) => props5.columns ? { gridTemplateColumns: props5.columns } : null,
-    templateColumns: ({ props: props5 }) => props5.templateColumns ? { gridTemplateColumns: props5.templateColumns } : null,
-    autoColumns: ({ props: props5 }) => props5.autoColumns ? { gridAutoColumns: props5.autoColumns } : null,
-    columnStart: ({ props: props5 }) => props5.columnStart ? { gridColumnStart: props5.columnStart } : null,
-    row: ({ props: props5 }) => props5.row ? { gridRow: props5.row } : null,
-    rows: ({ props: props5 }) => props5.rows ? { gridTemplateRows: props5.rows } : null,
-    templateRows: ({ props: props5 }) => props5.templateRows ? { gridTemplateRows: props5.templateRows } : null,
-    autoRows: ({ props: props5 }) => props5.autoRows ? { gridAutoRows: props5.autoRows } : null,
-    rowStart: ({ props: props5 }) => props5.rowStart ? { gridRowStart: props5.rowStart } : null,
-    autoFlow: ({ props: props5 }) => props5.autoFlow ? { gridAutoFlow: props5.autoFlow } : null,
-    columnGap: ({ props: props5 }) => props5.columnGap ? (0, import_scratch11.getSpacingBasedOnRatio)(props5, "columnGap") : null,
-    rowGap: ({ props: props5 }) => props5.rowGap ? (0, import_scratch11.getSpacingBasedOnRatio)(props5, "rowGap") : null
+    area: ({ props: props7 }) => props7.area ? { gridArea: props7.area } : null,
+    template: ({ props: props7 }) => props7.template ? { gridTemplate: props7.template } : null,
+    templateAreas: ({ props: props7 }) => props7.templateAreas ? { gridTemplateAreas: props7.templateAreas } : null,
+    column: ({ props: props7 }) => props7.column ? { gridColumn: props7.column } : null,
+    columns: ({ props: props7 }) => props7.columns ? { gridTemplateColumns: props7.columns } : null,
+    templateColumns: ({ props: props7 }) => props7.templateColumns ? { gridTemplateColumns: props7.templateColumns } : null,
+    autoColumns: ({ props: props7 }) => props7.autoColumns ? { gridAutoColumns: props7.autoColumns } : null,
+    columnStart: ({ props: props7 }) => props7.columnStart ? { gridColumnStart: props7.columnStart } : null,
+    row: ({ props: props7 }) => props7.row ? { gridRow: props7.row } : null,
+    rows: ({ props: props7 }) => props7.rows ? { gridTemplateRows: props7.rows } : null,
+    templateRows: ({ props: props7 }) => props7.templateRows ? { gridTemplateRows: props7.templateRows } : null,
+    autoRows: ({ props: props7 }) => props7.autoRows ? { gridAutoRows: props7.autoRows } : null,
+    rowStart: ({ props: props7 }) => props7.rowStart ? { gridRowStart: props7.rowStart } : null,
+    autoFlow: ({ props: props7 }) => props7.autoFlow ? { gridAutoFlow: props7.autoFlow } : null,
+    columnGap: ({ props: props7 }) => props7.columnGap ? (0, import_scratch11.getSpacingBasedOnRatio)(props7, "columnGap") : null,
+    rowGap: ({ props: props7 }) => props7.rowGap ? (0, import_scratch11.getSpacingBasedOnRatio)(props7, "rowGap") : null
   }
 };
 
@@ -12768,7 +12808,7 @@ var DatePickerYears = {
       position: "absolute",
       top: "0",
       left: "0",
-      background: "linear-gradient(to bottom, rgba(20, 20, 22, 1) 0%, rgba(20, 20, 22, 0) 100%)",
+      background: "linear-gradient(to bottom, var(--theme-tertiary-dark-background) 0%, transparent 100%)",
       zIndex: "10"
     },
     ":after": {
@@ -12777,7 +12817,7 @@ var DatePickerYears = {
       position: "absolute",
       bottom: "0",
       left: "0",
-      background: "linear-gradient(to top, rgba(20, 20, 22, 1) 0%, rgba(20, 20, 22, 0) 100%)"
+      background: "linear-gradient(to top, var(--theme-tertiary-dark-background) 0%, transparent 100%)"
     }
   },
   Flex: {
@@ -12804,8 +12844,8 @@ var DatePickerYears = {
       on: {
         click: (event, element, state) => state.update({ activeYear: element.text }),
         render: (el, state) => {
-          const { props: props5 } = el;
-          const { isActive } = props5;
+          const { props: props7 } = el;
+          const { isActive } = props7;
           if (isActive) {
             window.requestAnimationFrame(() => {
               el.parent.parent.node.scrollTop = el.node.offsetTop - 100;
@@ -12842,7 +12882,7 @@ var DatePickerYears = {
     }
   }
 };
-var months = {
+var DatePickerMonthsSlider = {
   extend: Flex2,
   props: {
     position: "relative",
@@ -12855,7 +12895,7 @@ var months = {
       content: '""',
       position: "absolute",
       boxSize: "100% 100px",
-      background: "linear-gradient(to right, rgba(20, 20, 22, 1) 0%, rgba(20, 20, 22, 0) 100%)",
+      background: "linear-gradient(to right, var(--theme-tertiary-dark-background) 0%, transparent 100%)",
       left: "0",
       top: "0",
       zIndex: "30",
@@ -12865,7 +12905,7 @@ var months = {
       content: '""',
       position: "absolute",
       boxSize: "100% 100px",
-      background: "linear-gradient(to left, rgba(20, 20, 22, 1) 0%, rgba(20, 20, 22, 0) 100%)",
+      background: "linear-gradient(to left, var(--theme-tertiary-dark-background) 0%, transparent 100%)",
       right: "0",
       top: "0",
       zIndex: "30",
@@ -12905,8 +12945,8 @@ var months = {
         ".isActive": { opacity: "1" }
       }),
       render: (el, state) => {
-        const { props: props5 } = el;
-        const { isActive } = props5;
+        const { props: props7 } = el;
+        const { isActive } = props7;
         if (isActive) {
           window.requestAnimationFrame(() => {
             el.parent.parent.node.scrollLeft = el.node.offsetLeft;
@@ -12933,11 +12973,24 @@ var months = {
   },
   rightButton: { extend: Button, props: { icon: "arrowRight" } }
 };
-var weekDays = {
+var DatePickerWeekDays = {
   extend: Grid2,
+  props: {
+    overflow: "hidden",
+    padding: "- Z Z",
+    width: "100%",
+    columns: "repeat(7, 1fr)",
+    gap: "W2"
+  },
   childExtend: {
     tag: "span",
-    extend: Flex2
+    extend: Flex2,
+    props: {
+      fontSize: "Y1",
+      textTransform: "capitalize",
+      align: "center center",
+      ":nth-child(7n-1), &:nth-child(7n)": { opacity: ".5" }
+    }
   },
   ...[
     { text: "Mo" },
@@ -12949,28 +13002,31 @@ var weekDays = {
     { text: "Su" }
   ]
 };
-var monthNumbers = {
+var DatePickerGrid = {
   extend: Grid2,
   props: {
-    columns: "repeat(7, 32px)",
-    gap: "4px",
-    boxSizing: "content-box",
-    padding: `- ${12 / 16}em`
+    columns: "repeat(7, 1fr)",
+    minWidth: "100%",
+    gap: "W2",
+    padding: `- Z`
   },
   childExtend: {
     extend: Button,
     props: ({ state, key }) => ({
-      color: "white",
+      isActive: state.activeDay === parseInt(key) + 1,
       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" }
+      height: "B1",
+      aspectRatio: "1/1",
+      lineHeight: ".9",
+      background: "transparent",
+      theme: "secondary @dark .color",
+      ".isActive": { theme: "primary" },
+      "!isActive": {
+        ":hover": { theme: "secondary" },
+        ":nth-child(7n-1), &:nth-child(7n)": { opacity: ".5" }
+      }
     }),
     on: {
       click: (event, element, state) => {
@@ -12979,28 +13035,12 @@ var monthNumbers = {
       }
     }
   },
-  $setCollection: (el, s) => {
+  $setPropsCollection: (el, s) => {
     const daysInMonth = new Date(s.activeYear, s.activeMonth, 0).getDate();
     const days = new Array(daysInMonth).fill(void 0).map((v, k) => ({ text: k + 1 }));
     return days;
   }
 };
-var confirmButtons = {
-  extend: Flex2,
-  childExtend: Button,
-  ...[
-    {
-      text: "cancel",
-      on: {
-        click: (event, element, state) => {
-        }
-      }
-    },
-    {
-      text: "ok"
-    }
-  ]
-};
 var monthNumbersContainer = {
   props: {
     maxWidth: `${272 / 16}em`,
@@ -13009,7 +13049,7 @@ var monthNumbersContainer = {
       content: '""',
       position: "absolute",
       boxSize: "100% 12px",
-      background: "linear-gradient(to right, rgba(20, 20, 22, 1) 0%, rgba(20, 20, 22, 0) 100%)",
+      background: "linear-gradient(to right, var(--theme-tertiary-dark-background) 0%, transparent 100%)",
       left: "0",
       top: "0",
       zIndex: "30"
@@ -13018,70 +13058,34 @@ var monthNumbersContainer = {
       content: '""',
       position: "absolute",
       boxSize: "100% 12px",
-      background: "linear-gradient(to left, rgba(20, 20, 22, 1) 0%, rgba(20, 20, 22, 0) 100%)",
+      background: "linear-gradient(to left, var(--theme-tertiary-dark-background) 0%, transparent 100%)",
       right: "0",
       top: "0",
       zIndex: "30"
     },
     content: {
-      style: { overflowX: "auto" }
+      overflow: "auto hidden"
     }
   },
   content: {
     extend: Flex2,
-    childExtend: monthNumbers,
+    childExtend: DatePickerGrid,
     ...[{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]
   }
 };
 var props = {
   yearRange: [1993, 2023],
+  theme: "tertiary",
   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 = {
@@ -13093,16 +13097,16 @@ var DatePicker = {
   },
   props,
   DatePickerYears: {},
-  calendar: {
-    extend: Flex2,
-    months,
-    weekDaysContainer: {
-      extend: Flex2,
-      childExtend: weekDays,
-      ...[{}, {}]
+  Flex: {
+    props: {
+      flow: "column",
+      padding: "20px - - -",
+      position: "relative"
     },
+    DatePickerMonthsSlider: {},
+    DatePickerWeekDays: {},
     monthNumbersContainer,
-    confirmButtons
+    DialogFooter: {}
   }
 };
 var DatePickerTwoColumns = {
@@ -13122,6 +13126,131 @@ var DatePickerTwoColumns = {
   }
 };
 
+// Input/index.js
+var Input = {
+  extend: [Focusable],
+  tag: "input",
+  props: {
+    border: "none",
+    type: "input",
+    theme: "quaternary",
+    fontSize: "A",
+    round: "C",
+    lineHeight: 1,
+    fontFamily: "smbls",
+    padding: "Z A"
+  },
+  attr: {
+    pattern: ({ props: props7 }) => props7.pattern,
+    minlength: ({ props: props7 }) => props7.minlength,
+    maxlength: ({ props: props7 }) => props7.maxlength,
+    name: ({ props: props7 }) => props7.name,
+    autocomplete: ({ props: props7 }) => props7.autocomplete,
+    placeholder: ({ props: props7 }) => props7.placeholder,
+    value: ({ props: props7, state }) => props7.value,
+    disabled: ({ props: props7 }) => props7.disabled || null,
+    readonly: ({ props: props7 }) => props7.readonly,
+    required: ({ props: props7 }) => props7.required,
+    type: ({ props: props7 }) => props7.type
+  }
+};
+
+// TimePicker/TimePickerItem.js
+var props2 = {
+  align: "center center",
+  flow: "column",
+  gap: "X",
+  style: {
+    "input[type=number]::-webkit-inner-spin-button": {
+      "-webkit-appearance": "none",
+      margin: 0
+    },
+    "input[type=number]::-webkit-outer-spin-button": {
+      "-webkit-appearance": "none",
+      margin: 0
+    },
+    "input[type=number]": { "-webkit-appearance": "textfield" },
+    "input:focus < button": { border: "3px solid red" },
+    "> button": {
+      padding: "0",
+      background: "transparent",
+      color: "white",
+      fontSize: `${12 / 16}em`,
+      display: "none"
+    }
+  },
+  input: {
+    boxSize: "C C",
+    round: "Z",
+    padding: "0",
+    align: "center center",
+    textAlign: "center",
+    color: "white",
+    background: "white .15"
+  }
+};
+var TimePickerItem = {
+  tag: "label",
+  extend: Flex,
+  props: props2,
+  upButton: { extend: Button, props: { icon: "plus" } },
+  input: { extend: [Input, Flex], attr: { type: "number", min: "1", max: "24", value: "1" } },
+  downButton: { extend: Button, props: { icon: "minus" } }
+};
+
+// TimePicker/index.js
+var props3 = {
+  flow: "column",
+  width: "fit-content",
+  background: "rgba(255, 255, 255, .15)",
+  padding: "A A B A",
+  round: "Z",
+  title: {
+    fontSize: "Z1",
+    textTransform: "capitalize",
+    padding: "- - B -"
+  },
+  content: {
+    align: "center center",
+    gap: "A",
+    timePickers: {
+      align: "center center",
+      gap: "Y2"
+    }
+  },
+  footButtons: {
+    align: "center flex-end",
+    gap: "A1",
+    padding: "B1 - - -",
+    childProps: {
+      background: "transparent",
+      padding: "0",
+      color: "#0079FD"
+    }
+  }
+};
+var TimePicker = {
+  extend: Flex,
+  props: props3,
+  title: { text: "enter time" },
+  content: {
+    extend: Flex,
+    timePickers: {
+      tag: "label",
+      extend: Flex,
+      ...[
+        { extend: TimePickerItem },
+        ":",
+        { extend: TimePickerItem },
+        ":",
+        { extend: TimePickerItem }
+      ]
+    },
+    TimeSwitcher: {}
+  },
+  DialogFooter: {}
+};
+
 // Dropdown/index.js
 var DropdownList = {
   extend: Flex,
@@ -13183,7 +13312,7 @@ var DropdownParent = {
 };
 
 // Form/FieldLabel.js
-var props2 = {
+var props4 = {
   flow: "column",
   gap: "Y2",
   childProps: { textTransform: "capitalize" },
@@ -13194,7 +13323,7 @@ var props2 = {
 };
 var FieldLabel = {
   extend: Flex,
-  props: props2,
+  props: props4,
   caption: {
     tag: "span",
     text: "text"
@@ -13340,15 +13469,15 @@ var ToggleSwithWithLabel = {
 // node_modules/@symbo.ls/icon/index.js
 var Icon2 = {
   extend: Svg,
-  props: ({ key, props: props5, parent, context }) => {
+  props: ({ key, props: props7, parent, context }) => {
     const { ICONS, useIconSprite, verbose } = context && context.designSystem;
     const { toCamelCase } = context && context.utils;
-    const iconName = props5.inheritedString || props5.name || props5.icon || key;
+    const iconName = props7.inheritedString || props7.name || props7.icon || key;
     const camelCase = toCamelCase(iconName);
     const isArray9 = camelCase.split(/([a-z])([A-Z])/g);
     let activeIconName;
-    if (props5.active) {
-      activeIconName = props5[".active"].name || props5[".active"].icon;
+    if (props7.active) {
+      activeIconName = props7[".active"].name || props7[".active"].icon;
     }
     if (parent && parent.props && parent.props.active && parent.props[".active"] && parent.props[".active"].icon) {
       activeIconName = parent.props[".active"].icon.name || parent.props[".active"].icon.icon || parent.props[".active"].icon;
@@ -13367,7 +13496,7 @@ var Icon2 = {
         console.warn("Can't find icon:", iconName, validIconName);
     }
     const iconFromLibrary = ICONS[validIconName];
-    const directSrc = parent && parent.props && parent.props.src || props5.src;
+    const directSrc = parent && parent.props && parent.props.src || props7.src;
     return {
       width: "A",
       height: "A",
@@ -13392,9 +13521,9 @@ var IconText2 = {
   },
   Icon: {
     props: {},
-    if: ({ props: props5 }) => props5.name || props5.icon
+    if: ({ props: props7 }) => props7.name || props7.icon
   },
-  text: ({ props: props5 }) => props5.text
+  text: ({ props: props7 }) => props7.text
 };
 
 // Link/index.js
@@ -13414,23 +13543,23 @@ var Link = {
       const { exec: exec5 } = ctx.utils;
       return exec5(el.props.href, el) || exec5(el.props, el).href;
     },
-    target: ({ props: props5 }) => props5.target,
-    "aria-label": ({ props: props5 }) => props5.aria ? props5.aria.label : props5.text,
-    draggable: ({ props: props5 }) => props5.draggable
+    target: ({ props: props7 }) => props7.target,
+    "aria-label": ({ props: props7 }) => props7.aria ? props7.aria.label : props7.text,
+    draggable: ({ props: props7 }) => props7.draggable
   }
 };
 var RouterLink = {
   on: {
     click: (event, el, s, ctx) => {
-      const { props: props5 } = el;
-      const { href } = props5;
+      const { props: props7 } = el;
+      const { href } = props7;
       if (!href)
         return;
       const { utils, routerOptions } = ctx;
       const { router } = utils;
       const root = el.__ref.__root;
       const linkIsExternal = href.includes("http://") || href.includes("https://") || href.includes("mailto:") || href.includes("tel:");
-      const options = props5.routerOptions || routerOptions || {
+      const options = props7.routerOptions || routerOptions || {
         scrollToOptions: { behaviour: "instant" }
       };
       if (href && !linkIsExternal) {
@@ -13444,35 +13573,6 @@ var RouteLink = {
   extend: [Link, RouterLink]
 };
 
-// Input/index.js
-var Input = {
-  extend: [Focusable],
-  tag: "input",
-  props: {
-    border: "none",
-    type: "input",
-    theme: "quaternary",
-    fontSize: "A",
-    round: "C",
-    lineHeight: 1,
-    fontFamily: "smbls",
-    padding: "Z A"
-  },
-  attr: {
-    pattern: ({ props: 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
-  }
-};
-
 // Field/node_modules/@symbo.ls/atoms/Block.js
 var import_scratch19 = __toESM(require_cjs());
 
@@ -13513,8 +13613,8 @@ var Focusable2 = {
     }
   },
   attr: {
-    placeholder: ({ props: props5 }) => props5.placeholder,
-    tabIndex: ({ props: props5 }) => props5.tabIndex
+    placeholder: ({ props: props7 }) => props7.placeholder,
+    tabIndex: ({ props: props7 }) => props7.tabIndex
   }
 };
 
@@ -13585,23 +13685,23 @@ var Video = {
   childExtend: {
     tag: "source",
     attr: {
-      src: ({ props: props5 }) => props5.src,
-      controls: ({ props: props5 }) => props5.controls
+      src: ({ props: props7 }) => props7.src,
+      controls: ({ props: props7 }) => props7.controls
     }
   },
   props: {
     controls: true
   },
   attr: {
-    autoplay: ({ props: props5 }) => props5.autoplay,
-    controls: ({ props: props5 }) => props5.controls
+    autoplay: ({ props: props7 }) => props7.autoplay,
+    controls: ({ props: props7 }) => props7.controls
   }
 };
 
 // Range/index.js
 var import_utils14 = __toESM(require_cjs5());
 var import_scratch28 = __toESM(require_cjs());
-var props3 = {
+var props5 = {
   appearance: "none",
   width: "100%",
   height: "2px",
@@ -13661,7 +13761,7 @@ var props3 = {
   }
 };
 var Range = {
-  props: props3,
+  props: props5,
   tag: "input",
   attr: { type: "range" }
 };
@@ -13778,8 +13878,8 @@ var Slider = {
       click: (ev, el, s) => {
         el.props && (0, import_utils15.isFunction)(el.props.click) && el.props.click(ev, el, s);
         const input = el.parent.input;
-        const props5 = input.props;
-        const value = (0, import_utils15.isFunction)(props5.value) ? props5.value() : props5.value;
+        const props7 = input.props;
+        const value = (0, import_utils15.isFunction)(props7.value) ? props7.value() : props7.value;
         input.node.value = value;
       }
     }
@@ -13815,8 +13915,8 @@ var Slider = {
       click: (ev, el, s) => {
         el.props && (0, import_utils15.isFunction)(el.props.click) && el.props.click(ev, el, s);
         const input = el.parent.input;
-        const props5 = input.props;
-        const value = (0, import_utils15.isFunction)(props5.value) ? props5.value() : props5.value;
+        const props7 = input.props;
+        const value = (0, import_utils15.isFunction)(props7.value) ? props7.value() : props7.value;
         input.node.value = value;
       }
     }
@@ -13832,12 +13932,12 @@ var Flex3 = {
     display: "flex"
   },
   class: {
-    flow: ({ props: props5 }) => props5.flow && { flexFlow: props5.flow },
-    wrap: ({ props: props5 }) => props5.wrap && { flexWrap: props5.wrap },
-    align: ({ props: props5 }) => {
-      if (typeof props5.align !== "string")
+    flow: ({ props: props7 }) => props7.flow && { flexFlow: props7.flow },
+    wrap: ({ props: props7 }) => props7.wrap && { flexWrap: props7.wrap },
+    align: ({ props: props7 }) => {
+      if (typeof props7.align !== "string")
         return;
-      const [alignItems, justifyContent] = props5.align.split(" ");
+      const [alignItems, justifyContent] = props7.align.split(" ");
       return { alignItems, justifyContent };
     }
   }
@@ -13985,14 +14085,14 @@ var TooltipParent = {
 };
 
 // Textarea/index.js
-var props4 = {
+var props6 = {
   height: "E",
   lineHeight: 1.4,
   style: { resize: "none" }
 };
 var Textarea = {
   extend: [Input],
-  props: props4,
+  props: props6,
   tag: "textarea"
 };
 
@@ -14056,13 +14156,13 @@ var Select = {
       disabled: ""
     },
     attr: {
-      value: ({ props: props5 }) => props5.value,
-      selected: ({ props: props5 }) => props5.selected,
-      disabled: ({ props: props5 }) => props5.disabled
+      value: ({ props: props7 }) => props7.value,
+      selected: ({ props: props7 }) => props7.selected,
+      disabled: ({ props: props7 }) => props7.disabled
     }
   },
   attr: {
-    name: ({ props: props5 }) => props5.name,
-    disabled: ({ props: props5 }) => props5.disabled
+    name: ({ props: props7 }) => props7.name,
+    disabled: ({ props: props7 }) => props7.disabled
   }
 };