npm - @symbo.ls/uikit - Versions diffs - 2.11.113 → 2.11.117 - Mend

@symbo.ls/uikit 2.11.113 → 2.11.117

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/index.cjs.js CHANGED Viewed

@@ -30,9 +30,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-// node_modules/@symbo.ls/scratch/dist/cjs/index.js
+// ../../packages/scratch/dist/cjs/index.js
 var require_cjs = __commonJS({
-  "node_modules/@symbo.ls/scratch/dist/cjs/index.js"(exports, module2) {
+  "../../packages/scratch/dist/cjs/index.js"(exports, module2) {
     "use strict";
     var __create2 = Object.create;
     var __defProp2 = Object.defineProperty;
@@ -381,7 +381,7 @@ var require_cjs = __commonJS({
           isBoolean: () => isBoolean,
           isDefined: () => isDefined2,
           isFunction: () => isFunction22,
-          isNot: () => isNot2,
+          isNot: () => isNot3,
           isNull: () => isNull,
           isNumber: () => isNumber2,
           isObject: () => isObject7,
@@ -434,7 +434,7 @@ var require_cjs = __commonJS({
             return args.map((val) => TYPES[val](arg)).filter((v) => v).length > 0;
           };
         };
-        var isNot2 = (arg) => {
+        var isNot3 = (arg) => {
           return (...args) => {
             return args.map((val) => TYPES[val](arg)).filter((v) => v).length === 0;
           };
@@ -560,6 +560,7 @@ var require_cjs = __commonJS({
         var __toCommonJS22 = (mod) => __copyProps22(__defProp22({}, "__esModule", { value: true }), mod);
         var string_exports = {};
         __export22(string_exports, {
+          replaceLiteralsWithObjectFields: () => replaceLiteralsWithObjectFields3,
           stringIncludesAny: () => stringIncludesAny
         });
         module22.exports = __toCommonJS22(string_exports);
@@ -571,6 +572,22 @@ var require_cjs = __commonJS({
           }
           return false;
         };
+        var replaceLiteralsWithObjectFields3 = (str, state) => {
+          return str.replace(/\{\{\s*((?:\.\.\/)+)?([^}\s]+)\s*\}\}/g, (_, parentPath, variable) => {
+            if (parentPath) {
+              const parentLevels = parentPath.split("../").filter(Boolean).length;
+              let parentState = state;
+              for (let i = 0; i < parentLevels; i++) {
+                parentState = parentState.parent;
+              }
+              const value = parentState[variable.trim()];
+              return value ? `${value}` : "";
+            } else {
+              const value = state[variable.trim()];
+              return value ? `${value}` : "";
+            }
+          });
+        };
       }
     });
     var require_object2 = __commonJS2({
@@ -596,16 +613,16 @@ var require_cjs = __commonJS({
         var object_exports = {};
         __export22(object_exports, {
           clone: () => clone,
-          deepClone: () => deepClone2,
+          deepClone: () => deepClone22,
           deepCloneExclude: () => deepCloneExclude,
           deepDestringify: () => deepDestringify,
           deepMerge: () => deepMerge3,
           deepStringify: () => deepStringify,
           detachFunctionsFromObject: () => detachFunctionsFromObject,
-          diff: () => diff2,
+          diff: () => diff3,
           diffArrays: () => diffArrays,
           diffObjects: () => diffObjects,
-          exec: () => exec2,
+          exec: () => exec3,
           flattenRecursive: () => flattenRecursive,
           isEqualDeep: () => isEqualDeep,
           map: () => map,
@@ -615,7 +632,7 @@ var require_cjs = __commonJS({
           objectToString: () => objectToString,
           overwrite: () => overwrite,
           overwriteDeep: () => overwriteDeep2,
-          overwriteShallow: () => overwriteShallow2,
+          overwriteShallow: () => overwriteShallow3,
           removeFromObject: () => removeFromObject,
           stringToObject: () => stringToObject
         });
@@ -624,7 +641,7 @@ var require_cjs = __commonJS({
         var import_types = require_types2();
         var import_array = require_array2();
         var import_string = require_string2();
-        var exec2 = (param, element, state, context) => {
+        var exec3 = (param, element, state, context) => {
           if ((0, import_types.isFunction)(param)) {
             return param(
               element,
@@ -636,7 +653,7 @@ var require_cjs = __commonJS({
         };
         var map = (obj, extention, element) => {
           for (const e in extention) {
-            obj[e] = exec2(extention[e], element);
+            obj[e] = exec3(extention[e], element);
           }
         };
         var merge5 = (element, obj, excludeFrom = []) => {
@@ -698,7 +715,7 @@ var require_cjs = __commonJS({
         var mergeArrayExclude = (arr, excl = []) => {
           return arr.reduce((acc, curr) => deepMerge3(acc, deepCloneExclude(curr, excl)), {});
         };
-        var deepClone2 = (obj, excludeFrom = []) => {
+        var deepClone22 = (obj, excludeFrom = []) => {
           const o = (0, import_types.isArray)(obj) ? [] : {};
           for (const prop in obj) {
             if (excludeFrom.includes(prop) || prop.startsWith("__"))
@@ -708,7 +725,7 @@ var require_cjs = __commonJS({
               objProp = (0, import_array.mergeArray)(objProp);
             }
             if ((0, import_types.isObjectLike)(objProp)) {
-              o[prop] = deepClone2(objProp, excludeFrom);
+              o[prop] = deepClone22(objProp, excludeFrom);
             } else
               o[prop] = objProp;
           }
@@ -862,7 +879,7 @@ var require_cjs = __commonJS({
             const objToDiffProp = objToDiff[e];
             if ((0, import_types.isObject)(originalProp) && (0, import_types.isObject)(objToDiffProp)) {
               cache[e] = {};
-              diff2(originalProp, objToDiffProp, cache[e]);
+              diff3(originalProp, objToDiffProp, cache[e]);
             } else if (objToDiffProp !== void 0) {
               cache[e] = objToDiffProp;
             }
@@ -875,7 +892,7 @@ var require_cjs = __commonJS({
           } else {
             const diffArr = [];
             for (let i = 0; i < original.length; i++) {
-              const diffObj = diff2(original[i], objToDiff[i]);
+              const diffObj = diff3(original[i], objToDiff[i]);
               if (Object.keys(diffObj).length > 0) {
                 diffArr.push(diffObj);
               }
@@ -886,7 +903,7 @@ var require_cjs = __commonJS({
           }
           return cache;
         };
-        var diff2 = (original, objToDiff, cache = {}) => {
+        var diff3 = (original, objToDiff, cache = {}) => {
           if ((0, import_types.isArray)(original) && (0, import_types.isArray)(objToDiff)) {
             cache = [];
             diffArrays(original, objToDiff, cache);
@@ -910,7 +927,7 @@ var require_cjs = __commonJS({
           }
           return changes;
         };
-        var overwriteShallow2 = (obj, params, excludeFrom = []) => {
+        var overwriteShallow3 = (obj, params, excludeFrom = []) => {
           for (const e in params) {
             if (excludeFrom.includes(e) || e.startsWith("__"))
               continue;
@@ -1104,7 +1121,7 @@ var require_cjs = __commonJS({
       BREAKPOINTS: () => BREAKPOINTS,
       CASES: () => CASES,
       COLOR: () => COLOR,
-      CONFIG: () => CONFIG2,
+      CONFIG: () => CONFIG3,
       CSS_VARS: () => CSS_VARS,
       DEVICES: () => DEVICES,
       DOCUMENT: () => DOCUMENT,
@@ -1144,27 +1161,27 @@ var require_cjs = __commonJS({
       generateSequence: () => generateSequence,
       generateSprite: () => generateSprite,
       generateSubSequence: () => generateSubSequence,
-      getActiveConfig: () => getActiveConfig2,
-      getColor: () => getColor2,
+      getActiveConfig: () => getActiveConfig3,
+      getColor: () => getColor3,
       getColorShade: () => getColorShade,
       getDefaultOrFirstKey: () => getDefaultOrFirstKey,
       getFontFace: () => getFontFace,
       getFontFaceEach: () => getFontFaceEach,
       getFontFaceEachString: () => getFontFaceEachString,
       getFontFaceString: () => getFontFaceString,
-      getFontFamily: () => getFontFamily2,
+      getFontFamily: () => getFontFamily3,
       getFontFormat: () => getFontFormat,
-      getFontSizeByKey: () => getFontSizeByKey2,
-      getMediaColor: () => getMediaColor3,
-      getMediaTheme: () => getMediaTheme2,
+      getFontSizeByKey: () => getFontSizeByKey3,
+      getMediaColor: () => getMediaColor5,
+      getMediaTheme: () => getMediaTheme3,
       getRgbTone: () => getRgbTone,
       getSequenceValue: () => getSequenceValue,
       getSequenceValuePropertyPair: () => getSequenceValuePropertyPair,
-      getSpacingBasedOnRatio: () => getSpacingBasedOnRatio4,
-      getSpacingByKey: () => getSpacingByKey3,
-      getTheme: () => getTheme2,
-      getTimingByKey: () => getTimingByKey2,
-      getTimingFunction: () => getTimingFunction3,
+      getSpacingBasedOnRatio: () => getSpacingBasedOnRatio7,
+      getSpacingByKey: () => getSpacingByKey5,
+      getTheme: () => getTheme3,
+      getTimingByKey: () => getTimingByKey3,
+      getTimingFunction: () => getTimingFunction5,
       hexToRgb: () => hexToRgb,
       hexToRgbArray: () => hexToRgbArray,
       hexToRgba: () => hexToRgba,
@@ -1197,14 +1214,14 @@ var require_cjs = __commonJS({
       setTheme: () => setTheme,
       setValue: () => setValue,
       setVariables: () => setVariables,
-      splitTransition: () => splitTransition2,
-      transformBackgroundImage: () => transformBackgroundImage2,
-      transformBorder: () => transformBorder2,
-      transformDuration: () => transformDuration2,
-      transformShadow: () => transformShadow2,
-      transformTextStroke: () => transformTextStroke2,
+      splitTransition: () => splitTransition3,
+      transformBackgroundImage: () => transformBackgroundImage3,
+      transformBorder: () => transformBorder3,
+      transformDuration: () => transformDuration3,
+      transformShadow: () => transformShadow3,
+      transformTextStroke: () => transformTextStroke3,
       transformTransition: () => transformTransition,
-      transfromGap: () => transfromGap2
+      transfromGap: () => transfromGap3
     });
     module2.exports = __toCommonJS2(src_exports);
     var utils_exports = {};
@@ -1247,7 +1264,7 @@ var require_cjs = __commonJS({
       setVariables: () => setVariables
     });
     var import_globals = __toESM2(require_cjs10(), 1);
-    var import_utils8 = __toESM2(require_cjs42(), 1);
+    var import_utils16 = __toESM2(require_cjs42(), 1);
     var ENV = "development";
     var colorStringToRgbaArray = (color) => {
       if (color === "")
@@ -1375,9 +1392,9 @@ var require_cjs = __commonJS({
       return `rgba(${arr})`;
     };
     var getRgbTone = (rgb, tone) => {
-      if ((0, import_utils8.isString)(rgb))
+      if ((0, import_utils16.isString)(rgb))
         rgb = rgb.split(", ").map((v) => parseFloat(v));
-      if ((0, import_utils8.isNumber)(tone))
+      if ((0, import_utils16.isNumber)(tone))
         tone += "";
       const toHex = rgbArrayToHex(rgb);
       const abs2 = tone.slice(0, 1);
@@ -1621,17 +1638,17 @@ var require_cjs = __commonJS({
     var SVG_DATA = {};
     var RESET = {};
     var CSS_VARS = {};
-    var CONFIG2 = {
+    var CONFIG3 = {
       verbose: false,
       useVariable: true,
       useReset: true,
       CSS_VARS,
       ...defaultConfig_exports
     };
-    var cachedConfig = (0, import_utils42.deepClone)(CONFIG2);
+    var cachedConfig = (0, import_utils42.deepClone)(CONFIG3);
     var FACTORY = {
       active: "0",
-      0: CONFIG2
+      0: CONFIG3
     };
     var activateConfig = (def) => {
       if ((0, import_utils42.isDefined)(def)) {
@@ -1639,7 +1656,7 @@ var require_cjs = __commonJS({
       }
       return FACTORY[def || FACTORY.active];
     };
-    var getActiveConfig2 = (def) => {
+    var getActiveConfig3 = (def) => {
       return FACTORY[def || FACTORY.active];
     };
     var setActiveConfig = (newConfig) => {
@@ -1693,8 +1710,8 @@ var require_cjs = __commonJS({
     var generateSubSequence = (props6, sequenceProps) => {
       const { key, base, value, ratio, variable, index } = props6;
       const next2 = value * ratio;
-      const diff2 = next2 - value;
-      const smallscale = diff2 / 1.618;
+      const diff3 = next2 - value;
+      const smallscale = diff3 / 1.618;
       const valueRounded = ~~value;
       const nextRounded = ~~next2;
       const diffRounded = nextRounded - valueRounded;
@@ -1748,7 +1765,7 @@ var require_cjs = __commonJS({
       return sequenceProps;
     };
     var getSequenceValue = (value = "A", sequenceProps) => {
-      const CONFIG22 = getActiveConfig2();
+      const CONFIG22 = getActiveConfig3();
       const { UNIT: UNIT2 } = CONFIG22;
       const {
         sequence,
@@ -1818,7 +1835,7 @@ var require_cjs = __commonJS({
     };
     var import_utils72 = __toESM2(require_cjs42(), 1);
     var setVariables = (result, key) => {
-      const CONFIG22 = getActiveConfig2();
+      const CONFIG22 = getActiveConfig3();
       const { CSS_VARS: CSS_VARS2 } = CONFIG22;
       if ((0, import_utils72.isObjectLike)(result.value)) {
       } else {
@@ -1826,7 +1843,7 @@ var require_cjs = __commonJS({
       }
     };
     var applySequenceVars = (props6, mediaName, options = {}) => {
-      const CONFIG22 = getActiveConfig2();
+      const CONFIG22 = getActiveConfig3();
       const { UNIT: UNIT2, MEDIA: MEDIA2, TIMING: TIMING2, CSS_VARS: CSS_VARS2 } = CONFIG22;
       const unit = props6.unit || UNIT2.default;
       const { sequence, scales } = props6;
@@ -1856,7 +1873,7 @@ var require_cjs = __commonJS({
     };
     var import_utils82 = __toESM2(require_cjs42(), 1);
     var generateSprite = (icons) => {
-      const CONFIG22 = getActiveConfig2();
+      const CONFIG22 = getActiveConfig3();
       let sprite = "";
       for (const key in icons) {
         if (CONFIG22.__svg_cache[key])
@@ -1921,16 +1938,16 @@ var require_cjs = __commonJS({
       applySpacingSequence: () => applySpacingSequence,
       applyTimingSequence: () => applyTimingSequence,
       applyTypographySequence: () => applyTypographySequence,
-      getColor: () => getColor2,
-      getFontFamily: () => getFontFamily2,
-      getFontSizeByKey: () => getFontSizeByKey2,
-      getMediaColor: () => getMediaColor3,
-      getMediaTheme: () => getMediaTheme2,
-      getSpacingBasedOnRatio: () => getSpacingBasedOnRatio4,
-      getSpacingByKey: () => getSpacingByKey3,
-      getTheme: () => getTheme2,
-      getTimingByKey: () => getTimingByKey2,
-      getTimingFunction: () => getTimingFunction3,
+      getColor: () => getColor3,
+      getFontFamily: () => getFontFamily3,
+      getFontSizeByKey: () => getFontSizeByKey3,
+      getMediaColor: () => getMediaColor5,
+      getMediaTheme: () => getMediaTheme3,
+      getSpacingBasedOnRatio: () => getSpacingBasedOnRatio7,
+      getSpacingByKey: () => getSpacingByKey5,
+      getTheme: () => getTheme3,
+      getTimingByKey: () => getTimingByKey3,
+      getTimingFunction: () => getTimingFunction5,
       runThroughMedia: () => runThroughMedia,
       setColor: () => setColor,
       setFont: () => setFont,
@@ -1941,10 +1958,10 @@ var require_cjs = __commonJS({
       setSVG: () => setSVG,
       setTheme: () => setTheme
     });
-    var import_utils9 = __toESM2(require_cjs42(), 1);
-    var getColor2 = (value, key, config) => {
-      const CONFIG22 = config || getActiveConfig2();
-      if (!(0, import_utils9.isString)(value)) {
+    var import_utils92 = __toESM2(require_cjs42(), 1);
+    var getColor3 = (value, key, config) => {
+      const CONFIG22 = config || getActiveConfig3();
+      if (!(0, import_utils92.isString)(value)) {
         if (CONFIG22.verbose)
           console.warn(value, "- type for color is not valid");
         return;
@@ -1953,7 +1970,7 @@ var require_cjs = __commonJS({
         return `var(${value})`;
       if (key && value[key])
         value = value[key];
-      const [name, alpha, tone] = (0, import_utils9.isArray)(value) ? value : value.split(" ");
+      const [name, alpha, tone] = (0, import_utils92.isArray)(value) ? value : value.split(" ");
       const { COLOR: COLOR2, GRADIENT: GRADIENT2 } = CONFIG22;
       let val = COLOR2[name] || GRADIENT2[name];
       if (!val) {
@@ -1981,32 +1998,32 @@ var require_cjs = __commonJS({
         return `rgba(${rgb}, ${alpha})`;
       return CONFIG22.useVariable ? `var(${val.var})` : `rgb(${rgb})`;
     };
-    var getMediaColor3 = (value, globalTheme, config) => {
-      const CONFIG22 = config || getActiveConfig2();
+    var getMediaColor5 = (value, globalTheme, config) => {
+      const CONFIG22 = config || getActiveConfig3();
       if (!globalTheme)
         globalTheme = CONFIG22.globalTheme;
-      if (!(0, import_utils9.isString)(value)) {
+      if (!(0, import_utils92.isString)(value)) {
         if (CONFIG22.verbose)
           console.warn(value, "- type for color is not valid");
         return;
       }
       if (value.slice(0, 2) === "--")
         return `var(${value})`;
-      const [name] = (0, import_utils9.isArray)(value) ? value : value.split(" ");
+      const [name] = (0, import_utils92.isArray)(value) ? value : value.split(" ");
       const { COLOR: COLOR2, GRADIENT: GRADIENT2 } = CONFIG22;
       const val = COLOR2[name] || GRADIENT2[name];
-      const isObj = (0, import_utils9.isObject)(val);
+      const isObj = (0, import_utils92.isObject)(val);
       if (isObj && val.value)
-        return getColor2(value, `@${globalTheme}`, config);
+        return getColor3(value, `@${globalTheme}`, config);
       else if (isObj) {
         if (globalTheme)
-          return getColor2(value, `@${globalTheme}`, config);
+          return getColor3(value, `@${globalTheme}`, config);
         else {
           const obj = {};
           for (const mediaName in val) {
             const query = CONFIG22.MEDIA[mediaName.slice(1)];
             const media = `@media screen and ${query}`;
-            obj[media] = getColor2(value, mediaName, config);
+            obj[media] = getColor3(value, mediaName, config);
           }
           return obj;
         }
@@ -2017,16 +2034,16 @@ var require_cjs = __commonJS({
       }
     };
     var setColor = (val, key, suffix) => {
-      const CONFIG22 = getActiveConfig2();
-      if ((0, import_utils9.isString)(val) && val.slice(0, 2) === "--")
-        val = getColor2(val.slice(2));
-      if ((0, import_utils9.isArray)(val)) {
+      const CONFIG22 = getActiveConfig3();
+      if ((0, import_utils92.isString)(val) && val.slice(0, 2) === "--")
+        val = getColor3(val.slice(2));
+      if ((0, import_utils92.isArray)(val)) {
         return {
           "@light": setColor(val[0], key, "light"),
           "@dark": setColor(val[1], key, "dark")
         };
       }
-      if ((0, import_utils9.isObject)(val)) {
+      if ((0, import_utils92.isObject)(val)) {
         const obj = {};
         for (const variant in val)
           obj[variant] = setColor(val[variant], key, variant.slice(0, 1) === "@" ? variant.slice(1) : variant);
@@ -2048,16 +2065,16 @@ var require_cjs = __commonJS({
       };
     };
     var setGradient = (val, key, suffix) => {
-      const CONFIG22 = getActiveConfig2();
-      if ((0, import_utils9.isString)(val) && val.slice(0, 2) === "--")
-        val = getColor2(val.slice(2));
-      if ((0, import_utils9.isArray)(val)) {
+      const CONFIG22 = getActiveConfig3();
+      if ((0, import_utils92.isString)(val) && val.slice(0, 2) === "--")
+        val = getColor3(val.slice(2));
+      if ((0, import_utils92.isArray)(val)) {
         return {
           "@light": setGradient(val[0], key, "light"),
           "@dark": setGradient(val[0], key, "dark")
         };
       }
-      if ((0, import_utils9.isObject)(val)) {
+      if ((0, import_utils92.isObject)(val)) {
         const obj = {};
         for (const variant in val)
           obj[variant] = setGradient(val[variant], key, variant.slice(0, 1) === "@" ? variant.slice(1) : variant);
@@ -2072,7 +2089,7 @@ var require_cjs = __commonJS({
         value: val.value || val
       };
     };
-    var import_utils11 = __toESM2(require_cjs42(), 1);
+    var import_utils112 = __toESM2(require_cjs42(), 1);
     var setThemeValue = (theme) => {
       const value = {};
       const { state, media, helpers, ...rest } = theme;
@@ -2080,7 +2097,7 @@ var require_cjs = __commonJS({
       keys.map((key) => {
         const conditions = ["color", "Color", "background", "border"];
         const isColor = conditions.some((k) => key.includes(k));
-        return value[key] = isColor ? getColor2(theme[key]) : theme[key];
+        return value[key] = isColor ? getColor3(theme[key]) : theme[key];
       });
       return value;
     };
@@ -2090,12 +2107,12 @@ var require_cjs = __commonJS({
       theme.value = setThemeValue(theme);
       return theme.value;
     };
-    var getTheme2 = (value, modifier) => {
-      const CONFIG22 = getActiveConfig2();
+    var getTheme3 = (value, modifier) => {
+      const CONFIG22 = getActiveConfig3();
       if (CONFIG22.useVariable)
-        return getMediaTheme2(value, modifier);
+        return getMediaTheme3(value, modifier);
       const { THEME: THEME2 } = CONFIG22;
-      if ((0, import_utils11.isString)(value)) {
+      if ((0, import_utils112.isString)(value)) {
         const [theme, subtheme] = value.split(" ");
         const isOurTheme = THEME2[theme];
         if (isOurTheme) {
@@ -2104,7 +2121,7 @@ var require_cjs = __commonJS({
           value = [theme, subtheme || modifier];
         }
       }
-      if ((0, import_utils11.isObjectLike)(value) && value[1]) {
+      if ((0, import_utils112.isObjectLike)(value) && value[1]) {
         const themeName = value[0];
         const subThemeName = value[1];
         const { helpers, media, state } = THEME2[themeName];
@@ -2114,11 +2131,11 @@ var require_cjs = __commonJS({
           return getThemeValue(helpers[subThemeName]);
         if (state && state[subThemeName])
           return getThemeValue(state[subThemeName]);
-      } else if ((0, import_utils11.isObject)(value))
+      } else if ((0, import_utils112.isObject)(value))
         return setThemeValue(value);
     };
     var setInverseTheme = (theme, variant, value) => {
-      if ((0, import_utils11.isObject)(variant)) {
+      if ((0, import_utils112.isObject)(variant)) {
         theme.variants.inverse.value = setThemeValue(variant);
       } else if (variant === true) {
         const { color, background } = value;
@@ -2131,9 +2148,9 @@ var require_cjs = __commonJS({
       }
     };
     var setPseudo = (theme, key, variant, themeValue) => {
-      const result = getTheme2(variant);
+      const result = getTheme3(variant);
       themeValue[`&:${key}`] = result;
-      if ((0, import_utils11.isObject)(variant) && !variant.value)
+      if ((0, import_utils112.isObject)(variant) && !variant.value)
         variant.value = result;
     };
     var setSelectors = (theme, value) => {
@@ -2149,9 +2166,9 @@ var require_cjs = __commonJS({
       return theme;
     };
     var setPrefersScheme = (theme, key, variant, themeValue) => {
-      const result = getTheme2(variant);
+      const result = getTheme3(variant);
       themeValue[`@media (prefers-color-scheme: ${key})`] = result;
-      if ((0, import_utils11.isObject)(variant) && !variant.value)
+      if ((0, import_utils112.isObject)(variant) && !variant.value)
         variant.value = result;
     };
     var setMedia = (theme, value) => {
@@ -2170,14 +2187,14 @@ var require_cjs = __commonJS({
       return theme;
     };
     var setHelpers = (theme, value) => {
-      const CONFIG22 = getActiveConfig2();
+      const CONFIG22 = getActiveConfig3();
       const { helpers } = theme;
       if (!helpers)
         return;
       const keys = Object.keys(helpers);
       keys.map((key) => {
         const helper = helpers[key];
-        if ((0, import_utils11.isString)(helper))
+        if ((0, import_utils112.isString)(helper))
           helpers[key] = CONFIG22.THEME[helper];
         else
           getThemeValue(helpers[key]);
@@ -2186,7 +2203,7 @@ var require_cjs = __commonJS({
       return theme;
     };
     var setTheme = (val, key) => {
-      const CONFIG22 = getActiveConfig2();
+      const CONFIG22 = getActiveConfig3();
       if (CONFIG22.useVariable)
         return setMediaTheme(val, key);
       const { state, media, helpers } = val;
@@ -2198,10 +2215,10 @@ var require_cjs = __commonJS({
       return { var: CSSvar, value, state, media, helpers };
     };
     var setMediaTheme = (val, key, suffix, prefers) => {
-      const CONFIG22 = getActiveConfig2();
+      const CONFIG22 = getActiveConfig3();
       const { CSS_VARS: CSS_VARS2 } = CONFIG22;
       const theme = { value: val };
-      if ((0, import_utils11.isObjectLike)(val)) {
+      if ((0, import_utils112.isObjectLike)(val)) {
         for (const param in val) {
           const symb = param.slice(0, 1);
           const value = val[param];
@@ -2209,7 +2226,7 @@ var require_cjs = __commonJS({
             const hasPrefers = symb === "@" && param;
             theme[param] = setMediaTheme(value, key, param, prefers || hasPrefers);
           } else {
-            const color = getColor2(value, prefers);
+            const color = getColor3(value, prefers);
             const metaSuffixes = [...new Set([prefers, suffix].filter((v) => v).map((v) => v.slice(1)))];
             const varmetaSuffixName = metaSuffixes.length ? "-" + metaSuffixes.join("-") : "";
             const CSSVar = `--theme-${key}${varmetaSuffixName}-${param}`;
@@ -2229,20 +2246,20 @@ var require_cjs = __commonJS({
           };
         }
       }
-      if ((0, import_utils11.isString)(val) && val.slice(0, 2) === "--") {
+      if ((0, import_utils112.isString)(val) && val.slice(0, 2) === "--") {
         const { THEME: THEME2 } = CONFIG22;
         const value = THEME2[val.slice(2)];
-        const getReferenced = getMediaTheme2(value, prefers);
+        const getReferenced = getMediaTheme3(value, prefers);
         return getReferenced;
       }
       return theme;
     };
     var recursiveTheme = (val) => {
-      const CONFIG22 = getActiveConfig2();
+      const CONFIG22 = getActiveConfig3();
       const obj = {};
       for (const param in val) {
         const symb = param.slice(0, 1);
-        if ((0, import_utils11.isObjectLike)(val[param])) {
+        if ((0, import_utils112.isObjectLike)(val[param])) {
           if (symb === "@") {
             const query = CONFIG22.MEDIA[param.slice(1)];
             const media = `@media screen and ${query}`;
@@ -2262,23 +2279,23 @@ var require_cjs = __commonJS({
       return val;
     };
     var findModifier = (val, modifier) => {
-      if ((0, import_utils11.isArray)(modifier))
+      if ((0, import_utils112.isArray)(modifier))
         return findModifierFromArray(val, modifier);
-      else if ((0, import_utils11.isString)(modifier) && val[modifier])
+      else if ((0, import_utils112.isString)(modifier) && val[modifier])
         return val[modifier];
       else
         return val;
     };
-    var getMediaTheme2 = (val, mod) => {
-      const CONFIG22 = getActiveConfig2();
-      if ((0, import_utils11.isString)(val) && val.slice(0, 2) === "--")
-        val = getMediaTheme2(val.slice(2));
-      if (!val || !(0, import_utils11.isString)(val)) {
+    var getMediaTheme3 = (val, mod) => {
+      const CONFIG22 = getActiveConfig3();
+      if ((0, import_utils112.isString)(val) && val.slice(0, 2) === "--")
+        val = getMediaTheme3(val.slice(2));
+      if (!val || !(0, import_utils112.isString)(val)) {
         if (CONFIG22.verbose)
           console.warn(val, "- theme is not string");
         return;
       }
-      const [name, ...modifier] = (0, import_utils11.isArray)(val) ? val : val.split(" ");
+      const [name, ...modifier] = (0, import_utils112.isArray)(val) ? val : val.split(" ");
       let value = CONFIG22.THEME[name];
       if (value && (modifier || mod)) {
         value = findModifier(value, modifier.length ? modifier : mod);
@@ -2286,38 +2303,38 @@ var require_cjs = __commonJS({
       const r = recursiveTheme(value);
       return r;
     };
-    var import_utils12 = __toESM2(require_cjs42(), 1);
+    var import_utils122 = __toESM2(require_cjs42(), 1);
     var setFont = (val, key) => {
       const CSSvar = `--font-${key}`;
       const fontFace = val[0] ? getFontFaceEach(key, val) : setCustomFontMedia(key, val.url);
       return { var: CSSvar, value: val, fontFace };
     };
-    var getFontFamily2 = (key, factory) => {
-      const CONFIG22 = getActiveConfig2();
+    var getFontFamily3 = (key, factory) => {
+      const CONFIG22 = getActiveConfig3();
       const { FONT_FAMILY: FONT_FAMILY2 } = CONFIG22;
       return getDefaultOrFirstKey(factory || FONT_FAMILY2, key);
     };
     var setFontFamily = (val, key) => {
-      const CONFIG22 = getActiveConfig2();
+      const CONFIG22 = getActiveConfig3();
       const { FONT_FAMILY: FONT_FAMILY2, FONT_FAMILY_TYPES: FONT_FAMILY_TYPES2 } = CONFIG22;
       let { value, type } = val;
       if (val.isDefault)
         FONT_FAMILY2.default = key;
-      if ((0, import_utils12.isObject)(value))
+      if ((0, import_utils122.isObject)(value))
         value = arrayzeValue(value);
       const CSSvar = `--font-family-${key}`;
       const str = `${value.join(", ")}, ${FONT_FAMILY_TYPES2[type]}`;
       return { var: CSSvar, value: str, arr: value, type };
     };
-    var import_utils15 = __toESM2(require_cjs42(), 1);
+    var import_utils152 = __toESM2(require_cjs42(), 1);
     var runThroughMedia = (props6) => {
-      const CONFIG22 = getActiveConfig2();
+      const CONFIG22 = getActiveConfig3();
       const { TYPOGRAPHY: TYPOGRAPHY2, MEDIA: MEDIA2 } = CONFIG22;
       for (const prop in props6) {
         const mediaProps = props6[prop];
         if (prop.slice(0, 1) === "@") {
           const { type, base, ratio, range, subSequence, h1Matches, unit } = props6;
-          (0, import_utils15.merge)(mediaProps, {
+          (0, import_utils152.merge)(mediaProps, {
             type,
             base,
             ratio,
@@ -2341,7 +2358,7 @@ var require_cjs = __commonJS({
       }
     };
     var applyHeadings = (props6) => {
-      const CONFIG22 = getActiveConfig2();
+      const CONFIG22 = getActiveConfig3();
       if (props6.h1Matches) {
         const unit = props6.unit;
         const HEADINGS = findHeadings(props6);
@@ -2360,15 +2377,15 @@ var require_cjs = __commonJS({
       }
     };
     var applyTypographySequence = () => {
-      const CONFIG22 = getActiveConfig2();
+      const CONFIG22 = getActiveConfig3();
       const { TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG22;
       generateSequence(TYPOGRAPHY2);
       applyHeadings(TYPOGRAPHY2);
       applySequenceVars(TYPOGRAPHY2);
       runThroughMedia(TYPOGRAPHY2);
     };
-    var getFontSizeByKey2 = (value) => {
-      const CONFIG22 = getActiveConfig2();
+    var getFontSizeByKey3 = (value) => {
+      const CONFIG22 = getActiveConfig3();
       const { TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG22;
       return getSequenceValuePropertyPair(
         value,
@@ -2402,21 +2419,21 @@ var require_cjs = __commonJS({
       }
     };
     var applySpacingSequence = () => {
-      const CONFIG22 = getActiveConfig2();
+      const CONFIG22 = getActiveConfig3();
       const { SPACING: SPACING2 } = CONFIG22;
       generateSequence(SPACING2);
       applySequenceVars(SPACING2);
       runThroughMedia2(SPACING2);
     };
     var getSequence = (sequenceProps) => {
-      const CONFIG22 = getActiveConfig2();
+      const CONFIG22 = getActiveConfig3();
       const { SPACING: SPACING2 } = CONFIG22;
       if (!sequenceProps)
         return SPACING2;
       const hasGenerated = Object.keys(sequenceProps.sequence).length > 0;
       return hasGenerated ? sequenceProps : generateSequence(sequenceProps);
     };
-    var getSpacingByKey3 = (value, propertyName = "padding", sequenceProps) => {
+    var getSpacingByKey5 = (value, propertyName = "padding", sequenceProps) => {
       const sequence = getSequence(sequenceProps);
       const stack = arrayzeValue(value);
       if (!stack)
@@ -2448,8 +2465,8 @@ var require_cjs = __commonJS({
         sequence
       );
     };
-    var getSpacingBasedOnRatio4 = (props6, propertyName, val) => {
-      const CONFIG22 = getActiveConfig2();
+    var getSpacingBasedOnRatio7 = (props6, propertyName, val) => {
+      const CONFIG22 = getActiveConfig3();
       const { SPACING: SPACING2 } = CONFIG22;
       const { spacingRatio, unit } = props6;
       const value = val || props6[propertyName];
@@ -2474,23 +2491,23 @@ var require_cjs = __commonJS({
           });
         }
         applySequenceVars(sequenceProps, null, { useDefault: false });
-        return getSpacingByKey3(value, propertyName, sequenceProps);
+        return getSpacingByKey5(value, propertyName, sequenceProps);
       }
-      return getSpacingByKey3(value, propertyName);
+      return getSpacingByKey5(value, propertyName);
     };
     var applyTimingSequence = () => {
-      const CONFIG22 = getActiveConfig2();
+      const CONFIG22 = getActiveConfig3();
       const { TIMING: TIMING2 } = CONFIG22;
       generateSequence(TIMING2);
       applySequenceVars(TIMING2);
     };
-    var getTimingFunction3 = (value) => {
-      const CONFIG22 = getActiveConfig2();
+    var getTimingFunction5 = (value) => {
+      const CONFIG22 = getActiveConfig3();
       const { TIMING: TIMING2 } = CONFIG22;
       return TIMING2[value] || TIMING2[toCamelCase(value)] || value;
     };
-    var getTimingByKey2 = (value, property = "timing") => {
-      const CONFIG22 = getActiveConfig2();
+    var getTimingByKey3 = (value, property = "timing") => {
+      const CONFIG22 = getActiveConfig3();
       const { TIMING: TIMING2 } = CONFIG22;
       return getSequenceValuePropertyPair(
         value,
@@ -2500,7 +2517,7 @@ var require_cjs = __commonJS({
     };
     var import_utils222 = __toESM2(require_cjs42(), 1);
     var applyDocument = () => {
-      const CONFIG22 = getActiveConfig2();
+      const CONFIG22 = getActiveConfig3();
       const { DOCUMENT: DOCUMENT2, FONT_FAMILY: FONT_FAMILY2, THEME: THEME2, TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG22;
       return (0, import_utils222.merge)(DOCUMENT2, {
         theme: THEME2.document,
@@ -2514,7 +2531,7 @@ var require_cjs = __commonJS({
       document: import_globals2.document
     };
     var setSVG = (val, key) => {
-      const CONFIG22 = getActiveConfig2();
+      const CONFIG22 = getActiveConfig3();
       if (!val) {
         if (CONFIG22.verbose)
           console.warn("setSVG: val is not defined", key);
@@ -2526,21 +2543,21 @@ var require_cjs = __commonJS({
       return val;
     };
     var appendSVGSprite = (LIBRARY, options = DEF_OPTIONS) => {
-      const CONFIG22 = getActiveConfig2();
+      const CONFIG22 = getActiveConfig3();
       const lib = Object.keys(LIBRARY).length ? {} : CONFIG22.SVG;
       for (const key in LIBRARY)
         lib[key] = CONFIG22.SVG[key];
       appendSVG(lib, options);
     };
     var setIcon = (val, key) => {
-      const CONFIG22 = getActiveConfig2();
+      const CONFIG22 = getActiveConfig3();
       if (CONFIG22.useIconSprite) {
         return setSVG(val, key);
       }
       return val;
     };
     var appendIconsSprite = (LIBRARY, options = DEF_OPTIONS) => {
-      const CONFIG22 = getActiveConfig2();
+      const CONFIG22 = getActiveConfig3();
       const lib = Object.keys(LIBRARY).length ? {} : CONFIG22.ICONS;
       for (const key in LIBRARY)
         lib[key] = CONFIG22.ICONS[key];
@@ -2560,7 +2577,7 @@ var require_cjs = __commonJS({
       return svgElem;
     };
     var appendSVG = (lib, options = DEF_OPTIONS) => {
-      const CONFIG22 = getActiveConfig2();
+      const CONFIG22 = getActiveConfig3();
       const doc = options.document || import_globals2.document;
       if (!doc || !doc.documentElement) {
         if (CONFIG22.verbose) {
@@ -2584,14 +2601,14 @@ var require_cjs = __commonJS({
     };
     var import_utils25 = __toESM2(require_cjs42(), 1);
     var applyReset = (reset = {}) => {
-      const CONFIG22 = getActiveConfig2();
+      const CONFIG22 = getActiveConfig3();
       const { RESET: RESET2, TYPOGRAPHY: TYPOGRAPHY2, DOCUMENT: DOCUMENT2 } = CONFIG22;
       if (RESET2) {
         if (RESET2[":root"]) {
           const configReset = RESET2;
           const configTemplates = TYPOGRAPHY2.templates;
           configReset.body = {
-            ...CONFIG22.useDocumentTheme ? getMediaTheme2("document", `@${CONFIG22.globalTheme}`) : {},
+            ...CONFIG22.useDocumentTheme ? getMediaTheme3("document", `@${CONFIG22.globalTheme}`) : {},
             ...configTemplates.body
           };
           configReset.h1 = configTemplates.h1;
@@ -2602,7 +2619,7 @@ var require_cjs = __commonJS({
           configReset.h6 = configTemplates.h6;
         }
         const { body, ...templates } = TYPOGRAPHY2.templates;
-        const globalTheme = CONFIG22.useDocumentTheme ? getMediaTheme2("document", `@${CONFIG22.globalTheme}`) : {};
+        const globalTheme = CONFIG22.useDocumentTheme ? getMediaTheme3("document", `@${CONFIG22.globalTheme}`) : {};
         if (RESET2.html)
           (0, import_utils25.overwriteDeep)(RESET2.html, globalTheme);
         return (0, import_utils25.deepMerge)((0, import_utils25.merge)(RESET2, reset), {
@@ -2656,7 +2673,7 @@ var require_cjs = __commonJS({
       "outset",
       "initial"
     ].some((v) => str.includes(v));
-    var transformBorder2 = (border) => {
+    var transformBorder3 = (border) => {
       const arr = border.split(", ");
       return arr.map((v) => {
         v = v.trim();
@@ -2666,39 +2683,39 @@ var require_cjs = __commonJS({
           return v || "solid";
         else if (v.slice(-2) === "px" || v.slice(-2) === "em")
           return v;
-        else if (getColor2(v).length > 2)
-          return getColor2(v);
-        return getSpacingByKey3(v, "border").border;
+        else if (getColor3(v).length > 2)
+          return getColor3(v);
+        return getSpacingByKey5(v, "border").border;
       }).join(" ");
     };
-    var transformTextStroke2 = (stroke) => {
+    var transformTextStroke3 = (stroke) => {
       return stroke.split(", ").map((v) => {
         if (v.slice(0, 2) === "--")
           return `var(${v})`;
         if (v.includes("px"))
           return v;
-        else if (getColor2(v))
-          return getColor2(v);
+        else if (getColor3(v))
+          return getColor3(v);
         return v;
       }).join(" ");
     };
-    var transformShadow2 = (shadows) => shadows.split("|").map((shadow) => {
+    var transformShadow3 = (shadows) => shadows.split("|").map((shadow) => {
       return shadow.split(", ").map((v) => {
         v = v.trim();
         if (v.slice(0, 2) === "--")
           return `var(${v})`;
-        if (getColor2(v).length > 2)
-          return getColor2(v);
+        if (getColor3(v).length > 2)
+          return getColor3(v);
         if (v.includes("px") || v.slice(-2) === "em")
           return v;
         const arr = v.split(" ");
         if (!arr.length)
           return v;
-        return arr.map((v2) => getSpacingByKey3(v2, "shadow").shadow).join(" ");
+        return arr.map((v2) => getSpacingByKey5(v2, "shadow").shadow).join(" ");
       }).join(" ");
     }).join(",");
-    var transformBackgroundImage2 = (backgroundImage, globalTheme) => {
-      const CONFIG22 = getActiveConfig2();
+    var transformBackgroundImage3 = (backgroundImage, globalTheme) => {
+      const CONFIG22 = getActiveConfig3();
       return backgroundImage.split(", ").map((v) => {
         if (v.slice(0, 2) === "--")
           return `var(${v})`;
@@ -2706,14 +2723,14 @@ var require_cjs = __commonJS({
           return v;
         else if (CONFIG22.GRADIENT[backgroundImage]) {
           return {
-            backgroundImage: getMediaColor3(backgroundImage, globalTheme || CONFIG22.globalTheme)
+            backgroundImage: getMediaColor5(backgroundImage, globalTheme || CONFIG22.globalTheme)
           };
         } else if (v.includes("/") || v.includes("http"))
           return `url(${v})`;
         return v;
       }).join(" ");
     };
-    var transfromGap2 = (gap) => (0, import_utils26.isString)(gap) && gap.split(" ").map((v) => getSpacingByKey3(v, "gap").gap).join(" ");
+    var transfromGap3 = (gap) => (0, import_utils26.isString)(gap) && gap.split(" ").map((v) => getSpacingByKey5(v, "gap").gap).join(" ");
     var transformTransition = (transition) => {
       const arr = transition.split(" ");
       if (!arr.length)
@@ -2722,20 +2739,20 @@ var require_cjs = __commonJS({
         if (v.slice(0, 2) === "--")
           return `var(${v})`;
         if (v.length < 3 || v.includes("ms")) {
-          const mapWithSequence = getTimingByKey2(v);
+          const mapWithSequence = getTimingByKey3(v);
           return mapWithSequence.timing || v;
         }
-        if (getTimingFunction3(v))
-          return getTimingFunction3(v);
+        if (getTimingFunction5(v))
+          return getTimingFunction5(v);
         return v;
       }).join(" ");
     };
-    var transformDuration2 = (duration, props6, propertyName) => {
+    var transformDuration3 = (duration, props6, propertyName) => {
       if (!(0, import_utils26.isString)(duration))
         return;
-      return duration.split(",").map((v) => getTimingByKey2(v).timing || v).join(",");
+      return duration.split(",").map((v) => getTimingByKey3(v).timing || v).join(",");
     };
-    var splitTransition2 = (transition) => {
+    var splitTransition3 = (transition) => {
       const arr = transition.split(",");
       if (!arr.length)
         return;
@@ -2767,7 +2784,7 @@ var require_cjs = __commonJS({
       animation: setSameValue
     };
     var setValue = (FACTORY_NAME, value, key) => {
-      const CONFIG22 = getActiveConfig2();
+      const CONFIG22 = getActiveConfig3();
       const factoryName = FACTORY_NAME.toLowerCase();
       const FACTORY2 = CONFIG22[FACTORY_NAME];
       if (VALUE_TRANSFORMERS[factoryName]) {
@@ -2779,7 +2796,7 @@ var require_cjs = __commonJS({
         console.warn("Can not find", factoryName, "method in scratch");
     };
     var setEach = (factoryName, props6) => {
-      const CONFIG22 = getActiveConfig2();
+      const CONFIG22 = getActiveConfig3();
       const FACTORY_NAME = factoryName.toUpperCase();
       const keys = Object.keys(props6);
       keys.map((key) => setValue(FACTORY_NAME, props6[key], key));
@@ -2787,7 +2804,7 @@ var require_cjs = __commonJS({
     };
     var SET_OPTIONS = {};
     var set2 = (recivedConfig, options = SET_OPTIONS) => {
-      let CONFIG22 = getActiveConfig2();
+      let CONFIG22 = getActiveConfig3();
       const {
         version,
         verbose,
@@ -3159,16 +3176,16 @@ var require_types = __commonJS({
     __export2(types_exports, {
       TYPES: () => TYPES,
       is: () => is,
-      isArray: () => isArray3,
+      isArray: () => isArray5,
       isBoolean: () => isBoolean,
       isDefined: () => isDefined,
       isFunction: () => isFunction3,
-      isNot: () => isNot2,
+      isNot: () => isNot3,
       isNull: () => isNull,
       isNumber: () => isNumber,
-      isObject: () => isObject3,
-      isObjectLike: () => isObjectLike2,
-      isString: () => isString3,
+      isObject: () => isObject5,
+      isObjectLike: () => isObjectLike3,
+      isString: () => isString8,
       isUndefined: () => isUndefined,
       isValidHtmlTag: () => isValidHtmlTag
     });
@@ -3176,37 +3193,37 @@ var require_types = __commonJS({
     var import_tags = require_cjs3();
     var import_node = require_node();
     var isValidHtmlTag = (arg) => import_tags.HTML_TAGS.body.includes(arg);
-    var isObject3 = (arg) => {
+    var isObject5 = (arg) => {
       if (arg === null)
         return false;
       return typeof arg === "object" && arg.constructor === Object;
     };
-    var isString3 = (arg) => typeof arg === "string";
+    var isString8 = (arg) => typeof arg === "string";
     var isNumber = (arg) => typeof arg === "number";
     var isFunction3 = (arg) => typeof arg === "function";
     var isBoolean = (arg) => arg === true || arg === false;
     var isNull = (arg) => arg === null;
-    var isArray3 = (arg) => Array.isArray(arg);
-    var isObjectLike2 = (arg) => {
+    var isArray5 = (arg) => Array.isArray(arg);
+    var isObjectLike3 = (arg) => {
       if (arg === null)
         return false;
       return typeof arg === "object";
     };
     var isDefined = (arg) => {
-      return isObject3(arg) || isObjectLike2(arg) || isString3(arg) || isNumber(arg) || isFunction3(arg) || isArray3(arg) || isObjectLike2(arg) || isBoolean(arg) || isNull(arg);
+      return isObject5(arg) || isObjectLike3(arg) || isString8(arg) || isNumber(arg) || isFunction3(arg) || isArray5(arg) || isObjectLike3(arg) || isBoolean(arg) || isNull(arg);
     };
     var isUndefined = (arg) => {
       return arg === void 0;
     };
     var TYPES = {
       boolean: isBoolean,
-      array: isArray3,
-      object: isObject3,
-      string: isString3,
+      array: isArray5,
+      object: isObject5,
+      string: isString8,
       number: isNumber,
       null: isNull,
       function: isFunction3,
-      objectLike: isObjectLike2,
+      objectLike: isObjectLike3,
       node: import_node.isNode,
       htmlElement: import_node.isHtmlElement,
       defined: isDefined
@@ -3216,7 +3233,7 @@ var require_types = __commonJS({
         return args.map((val) => TYPES[val](arg)).filter((v) => v).length > 0;
       };
     };
-    var isNot2 = (arg) => {
+    var isNot3 = (arg) => {
       return (...args) => {
         return args.map((val) => TYPES[val](arg)).filter((v) => v).length === 0;
       };
@@ -3346,6 +3363,7 @@ var require_string = __commonJS({
     var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
     var string_exports = {};
     __export2(string_exports, {
+      replaceLiteralsWithObjectFields: () => replaceLiteralsWithObjectFields3,
       stringIncludesAny: () => stringIncludesAny
     });
     module2.exports = __toCommonJS2(string_exports);
@@ -3357,6 +3375,22 @@ var require_string = __commonJS({
       }
       return false;
     };
+    var replaceLiteralsWithObjectFields3 = (str, state) => {
+      return str.replace(/\{\{\s*((?:\.\.\/)+)?([^}\s]+)\s*\}\}/g, (_, parentPath, variable) => {
+        if (parentPath) {
+          const parentLevels = parentPath.split("../").filter(Boolean).length;
+          let parentState = state;
+          for (let i = 0; i < parentLevels; i++) {
+            parentState = parentState.parent;
+          }
+          const value = parentState[variable.trim()];
+          return value ? `${value}` : "";
+        } else {
+          const value = state[variable.trim()];
+          return value ? `${value}` : "";
+        }
+      });
+    };
   }
 });
@@ -3384,26 +3418,26 @@ var require_object = __commonJS({
     var object_exports = {};
     __export2(object_exports, {
       clone: () => clone,
-      deepClone: () => deepClone2,
+      deepClone: () => deepClone3,
       deepCloneExclude: () => deepCloneExclude,
       deepDestringify: () => deepDestringify,
       deepMerge: () => deepMerge,
       deepStringify: () => deepStringify,
       detachFunctionsFromObject: () => detachFunctionsFromObject,
-      diff: () => diff2,
+      diff: () => diff3,
       diffArrays: () => diffArrays,
       diffObjects: () => diffObjects,
-      exec: () => exec2,
+      exec: () => exec3,
       flattenRecursive: () => flattenRecursive,
       isEqualDeep: () => isEqualDeep,
       map: () => map,
-      merge: () => merge3,
+      merge: () => merge5,
       mergeArrayExclude: () => mergeArrayExclude,
       mergeIfExisted: () => mergeIfExisted,
       objectToString: () => objectToString,
       overwrite: () => overwrite,
       overwriteDeep: () => overwriteDeep,
-      overwriteShallow: () => overwriteShallow2,
+      overwriteShallow: () => overwriteShallow3,
       removeFromObject: () => removeFromObject,
       stringToObject: () => stringToObject
     });
@@ -3412,7 +3446,7 @@ var require_object = __commonJS({
     var import_types = require_types();
     var import_array = require_array();
     var import_string = require_string();
-    var exec2 = (param, element, state, context) => {
+    var exec3 = (param, element, state, context) => {
       if ((0, import_types.isFunction)(param)) {
         return param(
           element,
@@ -3424,10 +3458,10 @@ var require_object = __commonJS({
     };
     var map = (obj, extention, element) => {
       for (const e in extention) {
-        obj[e] = exec2(extention[e], element);
+        obj[e] = exec3(extention[e], element);
       }
     };
-    var merge3 = (element, obj, excludeFrom = []) => {
+    var merge5 = (element, obj, excludeFrom = []) => {
       for (const e in obj) {
         if (excludeFrom.includes(e) || e.startsWith("__"))
           continue;
@@ -3486,7 +3520,7 @@ var require_object = __commonJS({
     var mergeArrayExclude = (arr, excl = []) => {
       return arr.reduce((acc, curr) => deepMerge(acc, deepCloneExclude(curr, excl)), {});
     };
-    var deepClone2 = (obj, excludeFrom = []) => {
+    var deepClone3 = (obj, excludeFrom = []) => {
       const o = (0, import_types.isArray)(obj) ? [] : {};
       for (const prop in obj) {
         if (excludeFrom.includes(prop) || prop.startsWith("__"))
@@ -3496,7 +3530,7 @@ var require_object = __commonJS({
           objProp = (0, import_array.mergeArray)(objProp);
         }
         if ((0, import_types.isObjectLike)(objProp)) {
-          o[prop] = deepClone2(objProp, excludeFrom);
+          o[prop] = deepClone3(objProp, excludeFrom);
         } else
           o[prop] = objProp;
       }
@@ -3650,7 +3684,7 @@ var require_object = __commonJS({
         const objToDiffProp = objToDiff[e];
         if ((0, import_types.isObject)(originalProp) && (0, import_types.isObject)(objToDiffProp)) {
           cache[e] = {};
-          diff2(originalProp, objToDiffProp, cache[e]);
+          diff3(originalProp, objToDiffProp, cache[e]);
         } else if (objToDiffProp !== void 0) {
           cache[e] = objToDiffProp;
         }
@@ -3663,7 +3697,7 @@ var require_object = __commonJS({
       } else {
         const diffArr = [];
         for (let i = 0; i < original.length; i++) {
-          const diffObj = diff2(original[i], objToDiff[i]);
+          const diffObj = diff3(original[i], objToDiff[i]);
           if (Object.keys(diffObj).length > 0) {
             diffArr.push(diffObj);
           }
@@ -3674,7 +3708,7 @@ var require_object = __commonJS({
       }
       return cache;
     };
-    var diff2 = (original, objToDiff, cache = {}) => {
+    var diff3 = (original, objToDiff, cache = {}) => {
       if ((0, import_types.isArray)(original) && (0, import_types.isArray)(objToDiff)) {
         cache = [];
         diffArrays(original, objToDiff, cache);
@@ -3698,7 +3732,7 @@ var require_object = __commonJS({
       }
       return changes;
     };
-    var overwriteShallow2 = (obj, params, excludeFrom = []) => {
+    var overwriteShallow3 = (obj, params, excludeFrom = []) => {
       for (const e in params) {
         if (excludeFrom.includes(e) || e.startsWith("__"))
           continue;
@@ -3972,12 +4006,12 @@ var require_on = __commonJS({
       triggerEventOnUpdate: () => triggerEventOnUpdate
     });
     module2.exports = __toCommonJS2(on_exports);
-    var import_utils8 = require_cjs5();
+    var import_utils16 = require_cjs5();
     var applyEvent = (param, element, state, context, options) => {
       return param(element, state || element.state, context || element.context, options);
     };
     var triggerEventOn = (param, element, options) => {
-      if (element.on && (0, import_utils8.isFunction)(element.on[param])) {
+      if (element.on && (0, import_utils16.isFunction)(element.on[param])) {
         const { state, context } = element;
         return applyEvent(element.on[param], element, state, context, options);
       }
@@ -3986,7 +4020,7 @@ var require_on = __commonJS({
       return param(updatedObj, element, state || element.state, context || element.context, options);
     };
     var triggerEventOnUpdate = (param, updatedObj, element, options) => {
-      if (element.on && (0, import_utils8.isFunction)(element.on[param])) {
+      if (element.on && (0, import_utils16.isFunction)(element.on[param])) {
         const { state, context } = element;
         return applyEventUpdate(element.on[param], updatedObj, element, state, context, options);
       }
@@ -3997,7 +4031,7 @@ var require_on = __commonJS({
         if (param === "init" || param === "beforeClassAssign" || param === "render" || param === "renderRouter" || param === "attachNode" || param === "stateInit" || param === "stateCreated" || param === "initStateUpdated" || param === "stateUpdated" || param === "initUpdate" || param === "update")
           continue;
         const appliedFunction = element.on[param];
-        if ((0, import_utils8.isFunction)(appliedFunction)) {
+        if ((0, import_utils16.isFunction)(appliedFunction)) {
           const { state, context } = element;
           node2.addEventListener(param, (event) => appliedFunction(event, element, state, context));
         }
@@ -4130,10 +4164,10 @@ var require_can = __commonJS({
     });
     module2.exports = __toCommonJS2(can_exports);
     var import_report = require_cjs6();
-    var import_utils8 = require_cjs5();
+    var import_utils16 = require_cjs5();
     var canRender = (element) => {
       const tag = element.tag || "div";
-      return (0, import_utils8.isValidHtmlTag)(tag) || (0, import_report.report)("HTMLInvalidTag");
+      return (0, import_utils16.isValidHtmlTag)(tag) || (0, import_report.report)("HTMLInvalidTag");
     };
   }
 });
@@ -4198,11 +4232,11 @@ var require_methods = __commonJS({
       toggle: () => toggle
     });
     module2.exports = __toCommonJS2(methods_exports);
-    var import_utils8 = require_cjs5();
+    var import_utils16 = require_cjs5();
     var import_ignore = require_ignore();
     var parse2 = function() {
       const state = this;
-      if ((0, import_utils8.isObject)(state)) {
+      if ((0, import_utils16.isObject)(state)) {
         const obj = {};
         for (const param in state) {
           if (!import_ignore.IGNORE_STATE_PARAMS.includes(param)) {
@@ -4210,7 +4244,7 @@ var require_methods = __commonJS({
           }
         }
         return obj;
-      } else if ((0, import_utils8.isArray)(state)) {
+      } else if ((0, import_utils16.isArray)(state)) {
         return state.filter((item) => !import_ignore.IGNORE_STATE_PARAMS.includes(item));
       }
     };
@@ -4230,7 +4264,7 @@ var require_methods = __commonJS({
       const state = this;
       const element = state.__element;
       const stateKey = element.__ref.__state;
-      if ((0, import_utils8.isString)(stateKey)) {
+      if ((0, import_utils16.isString)(stateKey)) {
         element.parent.state.remove(stateKey, { isHoisted: true, ...options });
         return element.state;
       }
@@ -4265,10 +4299,10 @@ var require_methods = __commonJS({
     };
     var add = function(value, options = {}) {
       const state = this;
-      if ((0, import_utils8.isArray)(state)) {
+      if ((0, import_utils16.isArray)(state)) {
         state.push(value);
         state.update(state.parse(), { overwrite: "replace", ...options });
-      } else if ((0, import_utils8.isObject)(state)) {
+      } else if ((0, import_utils16.isObject)(state)) {
         const key = Object.keys(state).length;
         state.update({ [key]: value }, options);
       }
@@ -4279,10 +4313,10 @@ var require_methods = __commonJS({
     };
     var remove = function(key, options = {}) {
       const state = this;
-      if ((0, import_utils8.isArray)(state))
-        (0, import_utils8.removeFromArray)(state, key);
-      if ((0, import_utils8.isObject)(state))
-        (0, import_utils8.removeFromObject)(state, key);
+      if ((0, import_utils16.isArray)(state))
+        (0, import_utils16.removeFromArray)(state, key);
+      if ((0, import_utils16.isObject)(state))
+        (0, import_utils16.removeFromObject)(state, key);
       return state.update(state.parse(), { replace: true, ...options });
     };
     var set2 = function(value, options = {}) {
@@ -4291,7 +4325,7 @@ var require_methods = __commonJS({
     };
     var apply = function(func, options = {}) {
       const state = this;
-      if ((0, import_utils8.isFunction)(func)) {
+      if ((0, import_utils16.isFunction)(func)) {
         func(state);
         return state.update(state, { replace: true, ...options });
       }
@@ -4326,12 +4360,12 @@ var require_inherit = __commonJS({
       createChangesByKey: () => createChangesByKey,
       createInheritedState: () => createInheritedState,
       findInheritedState: () => findInheritedState,
-      getChildStateInKey: () => getChildStateInKey2,
+      getChildStateInKey: () => getChildStateInKey3,
       getParentStateInKey: () => getParentStateInKey,
-      isState: () => isState2
+      isState: () => isState3
     });
     module2.exports = __toCommonJS2(inherit_exports);
-    var import_utils8 = require_cjs5();
+    var import_utils16 = require_cjs5();
     var import_ignore = require_ignore();
     var getParentStateInKey = (stateKey, parentState) => {
       if (!stateKey.includes("../"))
@@ -4345,7 +4379,7 @@ var require_inherit = __commonJS({
       }
       return parentState;
     };
-    var getChildStateInKey2 = (stateKey, parentState, options = {}) => {
+    var getChildStateInKey3 = (stateKey, parentState, options = {}) => {
       const arr = stateKey.split("/");
       const arrLength = arr.length - 1;
       for (let i = 0; i < arrLength; i++) {
@@ -4375,16 +4409,16 @@ var require_inherit = __commonJS({
       }
       if (!parentState)
         return;
-      return getChildStateInKey2(stateKey, parentState, options);
+      return getChildStateInKey3(stateKey, parentState, options);
     };
     var createInheritedState = (element, parent) => {
       const ref = element.__ref;
       const inheritedState = findInheritedState(element, parent);
       if (!inheritedState)
         return element.state;
-      if ((0, import_utils8.is)(inheritedState)("object", "array")) {
-        return (0, import_utils8.deepClone)(inheritedState, import_ignore.IGNORE_STATE_PARAMS);
-      } else if ((0, import_utils8.is)(inheritedState)("string", "number")) {
+      if ((0, import_utils16.is)(inheritedState)("object", "array")) {
+        return (0, import_utils16.deepClone)(inheritedState, import_ignore.IGNORE_STATE_PARAMS);
+      } else if ((0, import_utils16.is)(inheritedState)("string", "number")) {
         ref.__stateType = "string";
         return { value: inheritedState };
       }
@@ -4393,15 +4427,15 @@ var require_inherit = __commonJS({
     var checkIfInherits = (element) => {
       const ref = element.__ref;
       const stateKey = ref.__state;
-      if (!stateKey || (0, import_utils8.isNot)(stateKey)("number", "string"))
+      if (!stateKey || (0, import_utils16.isNot)(stateKey)("number", "string"))
         return false;
       return true;
     };
-    var isState2 = function(state) {
-      if (!(0, import_utils8.isObjectLike)(state))
+    var isState3 = function(state) {
+      if (!(0, import_utils16.isObjectLike)(state))
         return false;
       const keys = Object.keys(state);
-      return (0, import_utils8.arrayContainsOtherArray)(keys, ["update", "parse", "clean", "create", "parent", "rootUpdate"]);
+      return (0, import_utils16.arrayContainsOtherArray)(keys, ["update", "parse", "clean", "create", "parent", "rootUpdate"]);
     };
     var createChangesByKey = (path, value) => {
       if (!path) {
@@ -4448,7 +4482,7 @@ var require_updateState = __commonJS({
     var import_report = require_cjs6();
     var import_event = require_cjs7();
     var import_ignore = require_ignore();
-    var import_utils8 = require_cjs5();
+    var import_utils16 = require_cjs5();
     var import_inherit = require_inherit();
     var STATE_UPDATE_OPTIONS = {
       overwrite: true,
@@ -4462,7 +4496,7 @@ var require_updateState = __commonJS({
       const state = this;
       const element = state.__element;
       if (!options.updateByState)
-        (0, import_utils8.merge)(options, STATE_UPDATE_OPTIONS);
+        (0, import_utils16.merge)(options, STATE_UPDATE_OPTIONS);
       if (!state.__element)
         (0, import_report.report)("ElementOnStateIsNotDefined");
       if (options.preventInheritAtCurrentState === true) {
@@ -4492,10 +4526,10 @@ var require_updateState = __commonJS({
       const shallow = overwrite === "shallow";
       const merge22 = overwrite === "merge";
       if (merge22) {
-        (0, import_utils8.deepMerge)(state, obj, import_ignore.IGNORE_STATE_PARAMS);
+        (0, import_utils16.deepMerge)(state, obj, import_ignore.IGNORE_STATE_PARAMS);
         return;
       }
-      const overwriteFunc = shallow ? import_utils8.overwriteShallow : import_utils8.overwriteDeep;
+      const overwriteFunc = shallow ? import_utils16.overwriteShallow : import_utils16.overwriteDeep;
       overwriteFunc(state, obj, import_ignore.IGNORE_STATE_PARAMS);
     };
     var hoistStateUpdate = (state, obj, options) => {
@@ -4585,18 +4619,18 @@ var require_createState = __commonJS({
     });
     module2.exports = __toCommonJS2(createState_exports);
     var import_event = require_cjs7();
-    var import_utils8 = require_cjs5();
+    var import_utils16 = require_cjs5();
     var import_ignore = require_ignore();
     var import_methods = require_methods();
     var import_updateState = require_updateState();
     var import_inherit = require_inherit();
     var createState = function(element, parent, options) {
-      const skipApplyMethods = Boolean(options == null ? void 0 : options.skipApplyMethods);
+      const skipApplyMethods = Boolean(options && options.skipApplyMethods);
       const objectizeState = checkForTypes(element);
       if (objectizeState === false)
         return parent.state || {};
       else
-        element.state = (0, import_utils8.deepClone)(objectizeState, import_ignore.IGNORE_STATE_PARAMS);
+        element.state = (0, import_utils16.deepClone)(objectizeState, import_ignore.IGNORE_STATE_PARAMS);
       const whatInitReturns = (0, import_event.triggerEventOn)("stateInit", element, options);
       if (whatInitReturns === false)
         return element.state;
@@ -4608,10 +4642,11 @@ var require_createState = __commonJS({
       if (dependentState)
         element.state = dependentState;
       if (skipApplyMethods) {
-        if (element.parent && element.parent.state)
+        if (element.parent && element.parent.state) {
           element.state.parent = element.parent.state;
-        else
+        } else {
           element.state.parent = element.state;
+        }
         return element.state;
       }
       applyMethods(element);
@@ -4622,18 +4657,18 @@ var require_createState = __commonJS({
       const { __ref: ref } = state;
       if (!ref)
         return;
-      const dependentState = (0, import_utils8.deepClone)(ref, import_ignore.IGNORE_STATE_PARAMS);
+      const dependentState = (0, import_utils16.deepClone)(ref, import_ignore.IGNORE_STATE_PARAMS);
       const newDepends = { [element.key]: dependentState };
-      ref.__depends = (0, import_utils8.isObject)(ref.__depends) ? { ...ref.__depends, ...newDepends } : newDepends;
+      ref.__depends = (0, import_utils16.isObject)(ref.__depends) ? { ...ref.__depends, ...newDepends } : newDepends;
       return dependentState;
     };
     var checkForTypes = (element) => {
       const { state, __ref: ref } = element;
-      if ((0, import_utils8.isFunction)(state)) {
+      if ((0, import_utils16.isFunction)(state)) {
         ref.__state = state;
-        return (0, import_utils8.exec)(state, element);
+        return (0, import_utils16.exec)(state, element);
       }
-      if ((0, import_utils8.is)(state)("string", "number")) {
+      if ((0, import_utils16.is)(state)("string", "number")) {
         ref.__state = state;
         return {};
       }
@@ -4650,22 +4685,25 @@ var require_createState = __commonJS({
     var applyMethods = (element) => {
       const state = element.state;
       const ref = element.__ref;
-      state.clean = import_methods.clean;
-      state.parse = import_methods.parse;
-      state.destroy = import_methods.destroy;
-      state.update = import_updateState.updateState;
-      state.rootUpdate = import_methods.rootUpdate;
-      state.parentUpdate = import_methods.parentUpdate;
-      state.create = createState;
-      state.add = import_methods.add;
-      state.toggle = import_methods.toggle;
-      state.remove = import_methods.remove;
-      state.apply = import_methods.apply;
-      state.parent = element.parent.state;
-      state.set = import_methods.set;
-      state.__element = element;
-      state.__children = {};
-      state.__root = ref.__root ? ref.__root.state : state;
+      const proto = {
+        clean: import_methods.clean.bind(state),
+        parse: import_methods.parse.bind(state),
+        destroy: import_methods.destroy.bind(state),
+        update: import_updateState.updateState.bind(state),
+        rootUpdate: import_methods.rootUpdate.bind(state),
+        parentUpdate: import_methods.parentUpdate.bind(state),
+        create: createState.bind(state),
+        add: import_methods.add.bind(state),
+        toggle: import_methods.toggle.bind(state),
+        remove: import_methods.remove.bind(state),
+        apply: import_methods.apply.bind(state),
+        set: import_methods.set.bind(state),
+        parent: element.parent.state,
+        __element: element,
+        __children: {},
+        __root: ref.__root ? ref.__root.state : state
+      };
+      Object.setPrototypeOf(state, proto);
       if (state.parent)
         state.parent.__children[element.key] = state;
     };
@@ -4714,10 +4752,10 @@ var require_moment = __commonJS({
       function setHookCallback(callback) {
         hookCallback = callback;
       }
-      function isArray3(input) {
+      function isArray5(input) {
         return input instanceof Array || Object.prototype.toString.call(input) === "[object Array]";
       }
-      function isObject3(input) {
+      function isObject5(input) {
         return input != null && Object.prototype.toString.call(input) === "[object Object]";
       }
       function hasOwnProp(a, b) {
@@ -4965,7 +5003,7 @@ var require_moment = __commonJS({
         var res = extend({}, parentConfig), prop;
         for (prop in childConfig) {
           if (hasOwnProp(childConfig, prop)) {
-            if (isObject3(parentConfig[prop]) && isObject3(childConfig[prop])) {
+            if (isObject5(parentConfig[prop]) && isObject5(childConfig[prop])) {
               res[prop] = {};
               extend(res[prop], parentConfig[prop]);
               extend(res[prop], childConfig[prop]);
@@ -4977,7 +5015,7 @@ var require_moment = __commonJS({
           }
         }
         for (prop in parentConfig) {
-          if (hasOwnProp(parentConfig, prop) && !hasOwnProp(childConfig, prop) && isObject3(parentConfig[prop])) {
+          if (hasOwnProp(parentConfig, prop) && !hasOwnProp(childConfig, prop) && isObject5(parentConfig[prop])) {
             res[prop] = extend({}, res[prop]);
           }
         }
@@ -5141,8 +5179,8 @@ var require_moment = __commonJS({
         var output = this._relativeTime[string];
         return isFunction3(output) ? output(number, withoutSuffix, string, isFuture) : output.replace(/%d/i, number);
       }
-      function pastFuture(diff3, output) {
-        var format2 = this._relativeTime[diff3 > 0 ? "future" : "past"];
+      function pastFuture(diff4, output) {
+        var format2 = this._relativeTime[diff4 > 0 ? "future" : "past"];
         return isFunction3(format2) ? format2(output) : format2.replace(/%s/i, output);
       }
       var aliases = {};
@@ -5362,15 +5400,15 @@ var require_moment = __commonJS({
       ), defaultLocaleMonthsShort = "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"), MONTHS_IN_FORMAT = /D[oD]?(\[[^\[\]]*\]|\s)+MMMM?/, defaultMonthsShortRegex = matchWord, defaultMonthsRegex = matchWord;
       function localeMonths(m, format2) {
         if (!m) {
-          return isArray3(this._months) ? this._months : this._months["standalone"];
+          return isArray5(this._months) ? this._months : this._months["standalone"];
         }
-        return isArray3(this._months) ? this._months[m.month()] : this._months[(this._months.isFormat || MONTHS_IN_FORMAT).test(format2) ? "format" : "standalone"][m.month()];
+        return isArray5(this._months) ? this._months[m.month()] : this._months[(this._months.isFormat || MONTHS_IN_FORMAT).test(format2) ? "format" : "standalone"][m.month()];
       }
       function localeMonthsShort(m, format2) {
         if (!m) {
-          return isArray3(this._monthsShort) ? this._monthsShort : this._monthsShort["standalone"];
+          return isArray5(this._monthsShort) ? this._monthsShort : this._monthsShort["standalone"];
         }
-        return isArray3(this._monthsShort) ? this._monthsShort[m.month()] : this._monthsShort[MONTHS_IN_FORMAT.test(format2) ? "format" : "standalone"][m.month()];
+        return isArray5(this._monthsShort) ? this._monthsShort[m.month()] : this._monthsShort[MONTHS_IN_FORMAT.test(format2) ? "format" : "standalone"][m.month()];
       }
       function handleStrictParse(monthName, format2, strict) {
         var i, ii, mom, llc = monthName.toLocaleLowerCase();
@@ -5755,7 +5793,7 @@ var require_moment = __commonJS({
       }
       var defaultLocaleWeekdays = "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"), defaultLocaleWeekdaysShort = "Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"), defaultLocaleWeekdaysMin = "Su_Mo_Tu_We_Th_Fr_Sa".split("_"), defaultWeekdaysRegex = matchWord, defaultWeekdaysShortRegex = matchWord, defaultWeekdaysMinRegex = matchWord;
       function localeWeekdays(m, format2) {
-        var weekdays = isArray3(this._weekdays) ? this._weekdays : this._weekdays[m && m !== true && this._weekdays.isFormat.test(format2) ? "format" : "standalone"];
+        var weekdays = isArray5(this._weekdays) ? this._weekdays : this._weekdays[m && m !== true && this._weekdays.isFormat.test(format2) ? "format" : "standalone"];
         return m === true ? shiftWeekdays(weekdays, this._week.dow) : m ? weekdays[m.day()] : weekdays;
       }
       function localeWeekdaysShort(m) {
@@ -6257,7 +6295,7 @@ var require_moment = __commonJS({
         if (!key) {
           return globalLocale;
         }
-        if (!isArray3(key)) {
+        if (!isArray5(key)) {
           locale2 = loadLocale(key);
           if (locale2) {
             return locale2;
@@ -6735,7 +6773,7 @@ var require_moment = __commonJS({
           return new Moment(checkOverflow(input));
         } else if (isDate(input)) {
           config._d = input;
-        } else if (isArray3(format2)) {
+        } else if (isArray5(format2)) {
           configFromStringAndArray(config);
         } else if (format2) {
           configFromStringAndFormat(config);
@@ -6755,12 +6793,12 @@ var require_moment = __commonJS({
           config._d = new Date(input.valueOf());
         } else if (typeof input === "string") {
           configFromString(config);
-        } else if (isArray3(input)) {
+        } else if (isArray5(input)) {
           config._a = map(input.slice(0), function(obj) {
             return parseInt(obj, 10);
           });
           configFromArray(config);
-        } else if (isObject3(input)) {
+        } else if (isObject5(input)) {
           configFromObject(config);
         } else if (isNumber(input)) {
           config._d = new Date(input);
@@ -6778,7 +6816,7 @@ var require_moment = __commonJS({
           strict = locale2;
           locale2 = void 0;
         }
-        if (isObject3(input) && isObjectEmpty(input) || isArray3(input) && input.length === 0) {
+        if (isObject5(input) && isObjectEmpty(input) || isArray5(input) && input.length === 0) {
           input = void 0;
         }
         c._isAMomentObject = true;
@@ -6815,7 +6853,7 @@ var require_moment = __commonJS({
       );
       function pickBy(fn, moments) {
         var res, i;
-        if (moments.length === 1 && isArray3(moments[0])) {
+        if (moments.length === 1 && isArray5(moments[0])) {
           moments = moments[0];
         }
         if (!moments.length) {
@@ -6937,11 +6975,11 @@ var require_moment = __commonJS({
         return minutes2 === 0 ? 0 : parts[0] === "+" ? minutes2 : -minutes2;
       }
       function cloneWithOffset(input, model) {
-        var res, diff3;
+        var res, diff4;
         if (model._isUTC) {
           res = model.clone();
-          diff3 = (isMoment(input) || isDate(input) ? input.valueOf() : createLocal(input).valueOf()) - res.valueOf();
-          res._d.setTime(res._d.valueOf() + diff3);
+          diff4 = (isMoment(input) || isDate(input) ? input.valueOf() : createLocal(input).valueOf()) - res.valueOf();
+          res._d.setTime(res._d.valueOf() + diff4);
           hooks.updateOffset(res, false);
           return res;
         } else {
@@ -7190,14 +7228,14 @@ var require_moment = __commonJS({
         }
       }
       var add = createAdder(1, "add"), subtract = createAdder(-1, "subtract");
-      function isString3(input) {
+      function isString8(input) {
         return typeof input === "string" || input instanceof String;
       }
       function isMomentInput(input) {
-        return isMoment(input) || isDate(input) || isString3(input) || isNumber(input) || isNumberOrStringArray(input) || isMomentInputObject(input) || input === null || input === void 0;
+        return isMoment(input) || isDate(input) || isString8(input) || isNumber(input) || isNumberOrStringArray(input) || isMomentInputObject(input) || input === null || input === void 0;
       }
       function isMomentInputObject(input) {
-        var objectTest = isObject3(input) && !isObjectEmpty(input), propertyTest = false, properties = [
+        var objectTest = isObject5(input) && !isObjectEmpty(input), propertyTest = false, properties = [
           "years",
           "year",
           "y",
@@ -7230,16 +7268,16 @@ var require_moment = __commonJS({
         return objectTest && propertyTest;
       }
       function isNumberOrStringArray(input) {
-        var arrayTest = isArray3(input), dataTypeTest = false;
+        var arrayTest = isArray5(input), dataTypeTest = false;
         if (arrayTest) {
           dataTypeTest = input.filter(function(item) {
-            return !isNumber(item) && isString3(input);
+            return !isNumber(item) && isString8(input);
           }).length === 0;
         }
         return arrayTest && dataTypeTest;
       }
       function isCalendarSpec(input) {
-        var objectTest = isObject3(input) && !isObjectEmpty(input), propertyTest = false, properties = [
+        var objectTest = isObject5(input) && !isObjectEmpty(input), propertyTest = false, properties = [
           "sameDay",
           "nextDay",
           "lastDay",
@@ -7254,8 +7292,8 @@ var require_moment = __commonJS({
         return objectTest && propertyTest;
       }
       function getCalendarFormat(myMoment, now2) {
-        var diff3 = myMoment.diff(now2, "days", true);
-        return diff3 < -6 ? "sameElse" : diff3 < -1 ? "lastWeek" : diff3 < 0 ? "lastDay" : diff3 < 1 ? "sameDay" : diff3 < 2 ? "nextDay" : diff3 < 7 ? "nextWeek" : "sameElse";
+        var diff4 = myMoment.diff(now2, "days", true);
+        return diff4 < -6 ? "sameElse" : diff4 < -1 ? "lastWeek" : diff4 < 0 ? "lastDay" : diff4 < 1 ? "sameDay" : diff4 < 2 ? "nextDay" : diff4 < 7 ? "nextWeek" : "sameElse";
       }
       function calendar$1(time, formats) {
         if (arguments.length === 1) {
@@ -7329,7 +7367,7 @@ var require_moment = __commonJS({
       function isSameOrBefore(input, units) {
         return this.isSame(input, units) || this.isBefore(input, units);
       }
-      function diff2(input, units, asFloat) {
+      function diff3(input, units, asFloat) {
         var that, zoneDelta, output;
         if (!this.isValid()) {
           return NaN;
@@ -8061,7 +8099,7 @@ var require_moment = __commonJS({
       proto.add = add;
       proto.calendar = calendar$1;
       proto.clone = clone;
-      proto.diff = diff2;
+      proto.diff = diff3;
       proto.endOf = endOf;
       proto.format = format;
       proto.from = from2;
@@ -9027,6 +9065,7 @@ __export(domql_exports, {
   Footnote: () => Footnote,
   Form: () => Form,
   Grid: () => Grid,
+  Gutter: () => Gutter,
   H1: () => H1,
   H2: () => H2,
   H3: () => H3,
@@ -9036,8 +9075,8 @@ __export(domql_exports, {
   Headline: () => Headline,
   Hoverable: () => Hoverable,
   Hr: () => Hr,
-  Icon: () => Icon,
-  IconText: () => IconText,
+  Icon: () => Icon2,
+  IconText: () => IconText2,
   Iframe: () => Iframe,
   Img: () => Img,
   Input: () => Input2,
@@ -9100,7 +9139,7 @@ __export(domql_exports, {
 });
 module.exports = __toCommonJS(domql_exports);
-// node_modules/@symbo.ls/atoms/Block.js
+// Atoms/Block.js
 var import_scratch = __toESM(require_cjs());
 var Block = {
   class: {
@@ -9253,8 +9292,24 @@ var List = {
   tag: "ul",
   childExtend: { tag: "li" }
 };
+var Gutter = {
+  props: {
+    size: "C1"
+  },
+  class: {
+    size: ({ props: props6 }) => {
+      if (typeof props6.size !== "string")
+        return;
+      const [height, width] = props6.size.split(" ");
+      return {
+        ...(0, import_scratch.getSpacingByKey)(height, "height"),
+        ...(0, import_scratch.getSpacingByKey)(width || height, "width")
+      };
+    }
+  }
+};
-// node_modules/@symbo.ls/atoms/Direction.js
+// Atoms/Direction.js
 var Direction = {
   props: {
     direction: "ltr"
@@ -9264,7 +9319,7 @@ var Direction = {
   }
 };
-// node_modules/@symbo.ls/atoms/Flex.js
+// Atoms/Flex.js
 var Flex = {
   props: {
     display: "flex"
@@ -9281,7 +9336,7 @@ var Flex = {
   }
 };
-// node_modules/@symbo.ls/atoms/Grid.js
+// Atoms/Grid.js
 var import_scratch2 = __toESM(require_cjs());
 var Grid = {
   props: { display: "grid" },
@@ -9305,7 +9360,7 @@ var Grid = {
   }
 };
-// node_modules/@symbo.ls/atoms/Img.js
+// Atoms/Img.js
 var Img = {
   tag: "img",
   props: {
@@ -9320,7 +9375,7 @@ var Img = {
   }
 };
-// node_modules/@symbo.ls/atoms/Form.js
+// Atoms/Form.js
 var Form = {
   tag: "form",
   props: {},
@@ -9331,16 +9386,16 @@ var Form = {
   }
 };
-// node_modules/@symbo.ls/atoms/Media.js
+// Atoms/Media.js
 var import_utils = __toESM(require_cjs5());
-// node_modules/@symbo.ls/atoms/Theme.js
+// Atoms/Theme.js
 var import_scratch5 = __toESM(require_cjs());
-// node_modules/@symbo.ls/atoms/Shape/style.js
+// Atoms/Shape/style.js
 var import_scratch4 = __toESM(require_cjs());
-// node_modules/@symbo.ls/atoms/Timing.js
+// Atoms/Timing.js
 var import_scratch3 = __toESM(require_cjs());
 var Timing = {
   class: {
@@ -9366,7 +9421,7 @@ var Timing = {
   }
 };
-// node_modules/@symbo.ls/atoms/Shape/style.js
+// Atoms/Shape/style.js
 var CONFIG = (0, import_scratch4.getActiveConfig)();
 var depth = {
   4: { boxShadow: `rgba(0,0,0,.10) 0 2${CONFIG.UNIT.default} 4${CONFIG.UNIT.default}` },
@@ -9380,8 +9435,8 @@ var getComputedBackgroundColor = ({ props: props6 }) => {
   return (0, import_scratch4.getColor)(props6.shapeDirectionColor) || (0, import_scratch4.getColor)(props6.borderColor) || (0, import_scratch4.getColor)(props6.backgroundColor) || (0, import_scratch4.getColor)(props6.background);
 };
 var inheritTransition = ({ props: props6 }) => {
-  const exec2 = Timing.class.transition({ props: props6 });
-  return exec2 && exec2.transition;
+  const exec3 = Timing.class.transition({ props: props6 });
+  return exec3 && exec3.transition;
 };
 var SHAPES = {
   rectangle: {},
@@ -9557,7 +9612,7 @@ var SHAPES = {
   }
 };
-// node_modules/@symbo.ls/atoms/Theme.js
+// Atoms/Theme.js
 var getSystemTheme = ({ context, state }) => {
   const rootState = state && state.__root;
   return rootState ? rootState.globalTheme : context.designSystem && context.designSystem.globalTheme;
@@ -9662,7 +9717,7 @@ var Theme = {
   }
 };
-// node_modules/@symbo.ls/atoms/Media.js
+// Atoms/Media.js
 var keySetters = {
   "@": (key, props6, result, element, isSubtree) => applyMediaProps(
     key,
@@ -9816,7 +9871,7 @@ var beforeClassAssign = (element, s) => {
     if (setter)
       setter(key, props6[key], CLASS_NAMES, element);
   }
-  const parentProps = element.parent.props;
+  const parentProps = element.parent && element.parent.props;
   if (parentProps && parentProps.spacingRatio && parentProps.inheritSpacingRatio) {
     element.setProps({
       spacingRatio: parentProps.spacingRatio,
@@ -9840,7 +9895,7 @@ var Media = {
   on: { beforeClassAssign }
 };
-// node_modules/@symbo.ls/atoms/Iframe.js
+// Atoms/Iframe.js
 var Iframe = {
   tag: "iframe",
   props: {
@@ -9856,7 +9911,7 @@ var Iframe = {
   }
 };
-// node_modules/@symbo.ls/atoms/Interaction.js
+// Atoms/Interaction.js
 var Interaction = {
   class: {
     userSelect: ({ props: props6 }) => props6.userSelect && { userSelect: props6.userSelect },
@@ -9865,7 +9920,7 @@ var Interaction = {
   }
 };
-// node_modules/@symbo.ls/atoms/InteractiveComponent.js
+// Atoms/InteractiveComponent.js
 var style = {
   appearance: "none",
   border: "none",
@@ -9936,14 +9991,14 @@ var FocusableComponent = {
   }
 };
-// node_modules/@symbo.ls/atoms/Overflow.js
+// Atoms/Overflow.js
 var Overflow = {
   class: {
     overflow: ({ props: props6 }) => props6.overflow && { overflow: props6.overflow }
   }
 };
-// node_modules/@symbo.ls/atoms/Collection.js
+// Atoms/Collection.js
 var import_state = __toESM(require_cjs8());
 var import_utils2 = __toESM(require_cjs5());
 var Collection = {
@@ -10020,7 +10075,7 @@ var Collection = {
   }
 };
-// node_modules/@symbo.ls/atoms/Position.js
+// Atoms/Position.js
 var import_scratch6 = __toESM(require_cjs());
 var Position = {
   props: {},
@@ -10039,7 +10094,7 @@ var Position = {
   }
 };
-// node_modules/@symbo.ls/atoms/Picture.js
+// Atoms/Picture.js
 var Picture = {
   tag: "picture",
   childExtend: {
@@ -10066,14 +10121,14 @@ var Picture = {
   })
 };
-// node_modules/@symbo.ls/atoms/Pseudo.js
+// Atoms/Pseudo.js
 var Pseudo = {
   class: {
     content: ({ props: props6 }) => props6.content && { content: props6.content }
   }
 };
-// node_modules/@symbo.ls/atoms/Svg.js
+// Atoms/Svg.js
 var Svg = {
   tag: "svg",
   props: {
@@ -10111,7 +10166,7 @@ var Svg = {
   }
 };
-// node_modules/@symbo.ls/atoms/Shape/index.js
+// Atoms/Shape/index.js
 var import_utils3 = __toESM(require_cjs5());
 var import_scratch7 = __toESM(require_cjs());
 var transformBorderRadius = (radius, props6, propertyName) => {
@@ -10147,12 +10202,15 @@ var Shape = {
   }
 };
-// node_modules/@symbo.ls/atoms/Text.js
+// Atoms/Text.js
+var import_utils4 = __toESM(require_cjs5());
 var import_scratch8 = __toESM(require_cjs());
 var Text = {
   text: ({ key, props: props6, state }) => {
     if (props6.text === true)
       return state && state[key] || props6 && props6[key];
+    if ((0, import_utils4.isString)(props6.text) && props6.text.includes("{{"))
+      return (0, import_utils4.replaceLiteralsWithObjectFields)(props6.text, state);
     return props6.text;
   },
   class: {
@@ -10198,7 +10256,7 @@ var Footnote = {
   props: { fontSize: "Z" }
 };
-// node_modules/@symbo.ls/atoms/Transform.js
+// Atoms/Transform.js
 var Transform = {
   class: {
     transform: ({ props: props6 }) => props6.transform && { transform: props6.transform },
@@ -10206,16 +10264,16 @@ var Transform = {
   }
 };
-// node_modules/@symbo.ls/atoms/XYZ.js
+// Atoms/XYZ.js
 var XYZ = {
   class: {
     zIndex: ({ props: props6 }) => props6.zIndex && { zIndex: props6.zIndex }
   }
 };
-// node_modules/@symbo.ls/atoms/Animation.js
+// Atoms/Animation.js
 var import_scratch9 = __toESM(require_cjs());
-var import_utils5 = __toESM(require_cjs5());
+var import_utils6 = __toESM(require_cjs5());
 // ../../node_modules/@emotion/sheet/dist/emotion-sheet.browser.esm.js
 function sheetForTag(tag) {
@@ -11066,7 +11124,7 @@ var createCache = function createCache2(options) {
   return cache;
 };
-// node_modules/@emotion/hash/dist/emotion-hash.esm.js
+// ../../packages/emotion/node_modules/@emotion/hash/dist/emotion-hash.esm.js
 function murmur2(str) {
   var h = 0;
   var k, i = 0, len = str.length;
@@ -11096,7 +11154,7 @@ function murmur2(str) {
   return ((h ^ h >>> 15) >>> 0).toString(36);
 }
-// node_modules/@emotion/unitless/dist/emotion-unitless.esm.js
+// ../../packages/emotion/node_modules/@emotion/unitless/dist/emotion-unitless.esm.js
 var unitlessKeys = {
   animationIterationCount: 1,
   aspectRatio: 1,
@@ -11147,7 +11205,7 @@ var unitlessKeys = {
   strokeWidth: 1
 };
-// node_modules/@emotion/serialize/dist/emotion-serialize.browser.esm.js
+// ../../packages/emotion/node_modules/@emotion/serialize/dist/emotion-serialize.browser.esm.js
 var ILLEGAL_ESCAPE_SEQUENCE_ERROR = `You have illegal escape sequence in your template literal, most likely inside content's property value.
 Because you write your CSS inside a JavaScript string you actually have to do double escaping, so for example "content: '\\00d7';" should become "content: '\\\\00d7';".
 You can read more about this here:
@@ -11192,7 +11250,7 @@ if (true) {
   msPattern = /^-ms-/;
   hyphenPattern = /-(.)/g;
   hyphenatedCache = {};
-  processStyleValue = function processStyleValue3(key, value) {
+  processStyleValue = function processStyleValue5(key, value) {
     if (key === "content") {
       if (typeof value !== "string" || contentValues.indexOf(value) === -1 && !contentValuePattern.test(value) && (value.charAt(0) !== value.charAt(value.length - 1) || value.charAt(0) !== '"' && value.charAt(0) !== "'")) {
         throw new Error("You seem to be using a value for 'content' without quotes, try replacing it with `content: '\"" + value + "\"'`");
@@ -11400,7 +11458,7 @@ var serializeStyles = function serializeStyles2(args, registered, mergedProps) {
   };
 };
-// node_modules/@emotion/utils/dist/emotion-utils.browser.esm.js
+// ../../packages/emotion/node_modules/@emotion/utils/dist/emotion-utils.browser.esm.js
 var isBrowser = true;
 function getRegisteredStyles(registered, registeredStyles, classNames) {
   var rawClassName = "";
@@ -11442,7 +11500,7 @@ var insertStyles = function insertStyles2(cache, serialized, isStringTag) {
   }
 };
-// node_modules/@emotion/css/create-instance/dist/emotion-css-create-instance.esm.js
+// ../../packages/emotion/node_modules/@emotion/css/create-instance/dist/emotion-css-create-instance.esm.js
 function insertWithoutScoping(cache, serialized) {
   if (cache.inserted[serialized.name] === void 0) {
     return cache.insert("", serialized, cache.sheet, true);
@@ -11473,7 +11531,7 @@ var createEmotion = function createEmotion2(options) {
     insertStyles(cache, serialized, false);
     return cache.key + "-" + serialized.name;
   };
-  var keyframes2 = function keyframes3() {
+  var keyframes3 = function keyframes4() {
     for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
       args[_key2] = arguments[_key2];
     }
@@ -11502,7 +11560,7 @@ var createEmotion = function createEmotion2(options) {
     css,
     cx,
     injectGlobal,
-    keyframes: keyframes2,
+    keyframes: keyframes3,
     hydrate: function hydrate(ids) {
       ids.forEach(function(key) {
         cache.inserted[key] = true;
@@ -11556,17 +11614,17 @@ var classnames = function classnames2(args) {
   return cls;
 };
-// node_modules/@symbo.ls/emotion/index.js
+// ../../packages/emotion/index.js
 var createEmotion3 = (key = "smbls", container) => {
   const cleanKey = key.replaceAll(/\./g, "-");
   return createEmotion({ key: cleanKey, container });
 };
 var emotion = createEmotion3();
-// node_modules/@symbo.ls/atoms/Animation.js
+// Atoms/Animation.js
 var { keyframes } = emotion;
 var applyAnimationProps = (animation, element) => {
-  if ((0, import_utils5.isObject)(animation))
+  if ((0, import_utils6.isObject)(animation))
     return { animationName: keyframes(animation) };
   const { ANIMATION } = element.context && element.context.designSystem;
   const record = ANIMATION[animation];
@@ -11610,7 +11668,8 @@ var Animation = {
   }
 };
-// node_modules/@symbo.ls/box/index.js
+// Box/index.js
+var import_utils7 = __toESM(require_cjs5());
 var PropsCSS = {
   class: {
     style: ({ props: props6 }) => props6 && props6.style
@@ -11633,15 +11692,15 @@ var Box = {
     Animation
   ],
   attr: {
-    id: ({ props: props6 }) => props6.id,
-    contenteditable: ({ props: props6 }) => props6.contenteditable,
+    id: ({ props: props6 }) => (0, import_utils7.isString)(props6.id) && props6.id,
+    title: ({ props: props6 }) => (0, import_utils7.isString)(props6.title) && props6.title,
+    contentEditable: ({ props: props6 }) => props6.contentEditable || props6.contenteditable,
     dir: ({ props: props6 }) => props6.dir,
     draggable: ({ props: props6 }) => props6.draggable,
     hidden: ({ props: props6 }) => props6.hidden,
     lang: ({ props: props6 }) => props6.lang,
     spellcheck: ({ props: props6 }) => props6.spellcheck,
     tabindex: ({ props: props6 }) => props6.tabindex,
-    title: ({ props: props6 }) => props6.title,
     translate: ({ props: props6 }) => props6.translate
   }
 };
@@ -11651,7 +11710,7 @@ var Circle = {
   }
 };
-// node_modules/@symbo.ls/icon/index.js
+// Icon/index.js
 var Icon = {
   extend: Svg,
   props: ({ key, props: props6, parent, context }) => {
@@ -11659,7 +11718,7 @@ var Icon = {
     const { toCamelCase } = context && context.utils;
     const iconName = props6.inheritedString || props6.name || props6.icon || key;
     const camelCase = toCamelCase(iconName);
-    const isArray3 = camelCase.split(/([a-z])([A-Z])/g);
+    const isArray5 = camelCase.split(/([a-z])([A-Z])/g);
     let activeIconName;
     if (props6.active) {
       activeIconName = props6[".active"].name || props6[".active"].icon;
@@ -11672,10 +11731,10 @@ var Icon = {
       validIconName = activeIconName;
     if (ICONS[camelCase])
       validIconName = camelCase;
-    else if (ICONS[isArray3[0] + isArray3[1]])
-      validIconName = isArray3[0] + isArray3[1];
-    else if (ICONS[isArray3[0]])
-      validIconName = isArray3[0];
+    else if (ICONS[isArray5[0] + isArray5[1]])
+      validIconName = isArray5[0] + isArray5[1];
+    else if (ICONS[isArray5[0]])
+      validIconName = isArray5[0];
     else {
       if (verbose)
         console.warn("Can't find icon:", iconName, validIconName);
@@ -11716,22 +11775,8 @@ var IconText = {
     props: { flow: "column" }
   }
 };
-var FileIcon = {
-  extend: Flex,
-  props: {
-    theme: "tertiary",
-    boxSize: "C1",
-    align: "center center",
-    round: "Z"
-  },
-  Icon: {
-    fontSize: "B",
-    margin: "auto",
-    icon: "file"
-  }
-};
-// node_modules/@symbo.ls/button/index.js
+// Button/index.js
 var Button = {
   extend: [FocusableComponent, IconText],
   tag: "button",
@@ -11778,7 +11823,7 @@ var KangorooButton = {
   childExtend: IconText
 };
-// node_modules/@symbo.ls/avatar/index.js
+// Avatar/index.js
 var Avatar = {
   extend: Img,
   props: {
@@ -11846,7 +11891,7 @@ var AvatarChooser = {
   }
 };
-// node_modules/@symbo.ls/dialog/index.js
+// Dialog/index.js
 var Dialog = {
   props: {
     theme: "tertiary",
@@ -11895,7 +11940,7 @@ var DialogFooter = {
   }
 };
-// node_modules/@symbo.ls/datepicker/days.js
+// Datepicker/days.js
 var DatePickerDay = {
   extend: Button,
   state: true,
@@ -11939,7 +11984,7 @@ var DatePickerDay = {
   }
 };
-// node_modules/@symbo.ls/datepicker/weekdays.js
+// Datepicker/weekdays.js
 var DatePickerWeekDays = {
   extend: Grid,
   props: {
@@ -11975,7 +12020,7 @@ var DatePickerWeekDays = {
   ]
 };
-// node_modules/@symbo.ls/datepicker/months.js
+// Datepicker/months.js
 var DatePickerMonthsSlider = {
   extend: Flex,
   props: {
@@ -12119,7 +12164,7 @@ var DatePickerMonthsSlider = {
   }
 };
-// node_modules/@symbo.ls/datepicker/years.js
+// Datepicker/years.js
 var DatePickerYears = {
   tag: "aside",
   props: {
@@ -12198,7 +12243,7 @@ var DatePickerYears = {
   }
 };
-// node_modules/@symbo.ls/datepicker/grid.js
+// Datepicker/grid.js
 var import_headless_datepicker = __toESM(require_headless_datepicker());
 var calendar = new import_headless_datepicker.HeadlessDatepicker.Calendar({
   calendarMode: "exact"
@@ -12295,7 +12340,7 @@ var DatePickerGridContainer = {
   }
 };
-// node_modules/@symbo.ls/datepicker/index.js
+// Datepicker/index.js
 var DatePicker = {
   extend: [Dialog, Flex],
   state: ({ props: props6 }) => {
@@ -12352,7 +12397,7 @@ var DatePickerTwoColumns = {
   }
 };
-// node_modules/@symbo.ls/timepicker/TimePickerItem.js
+// TimePicker/TimePickerItem.js
 var props = {
   align: "center center",
   flow: "column",
@@ -12395,7 +12440,7 @@ var TimePickerItem = {
   Button_minus: { icon: "minus" }
 };
-// node_modules/@symbo.ls/timepicker/TimeSwitcher.js
+// TimePicker/TimeSwitcher.js
 var props2 = {
   boxSize: "C B2",
   flow: "column",
@@ -12431,7 +12476,7 @@ var TimeSwitcher = {
   pm: { text: "pm" }
 };
-// node_modules/@symbo.ls/timepicker/index.js
+// TimePicker/index.js
 var TimePicker = {
   extend: [Dialog, Flex],
   state: {
@@ -12497,7 +12542,7 @@ var TimePicker = {
   }
 };
-// node_modules/@symbo.ls/dropdown/index.js
+// Dropdown/index.js
 var DropdownList = {
   extend: Flex,
   props: {
@@ -12557,7 +12602,7 @@ var DropdownParent = {
   }
 };
-// node_modules/@symbo.ls/form/FieldLabel.js
+// Form/FieldLabel.js
 var props3 = {
   flow: "column",
   gap: "Y2",
@@ -12580,7 +12625,7 @@ var FieldLabel = {
   }
 };
-// node_modules/@symbo.ls/form/Checkbox.js
+// Form/Checkbox.js
 var Input = {
   props: {
     type: "checkbox",
@@ -12663,7 +12708,7 @@ var CheckBoxWithLabel = {
   FieldLabel
 };
-// node_modules/@symbo.ls/form/Radio.js
+// Form/Radio.js
 var Radio = {
   extend: Checkbox,
   Input: {
@@ -12695,7 +12740,7 @@ var RadioWithLabel = {
   FieldLabel
 };
-// node_modules/@symbo.ls/form/ToggleSwitch.js
+// Form/ToggleSwitch.js
 var ToggleSwitch = {
   extend: Checkbox,
   props: {
@@ -12738,7 +12783,87 @@ var ToggleSwithWithLabel = {
   FieldLabel: { padding: "Z - - -" }
 };
-// node_modules/@symbo.ls/link/index.js
+// node_modules/@symbo.ls/icon/index.js
+var Icon2 = {
+  extend: Svg,
+  props: ({ key, props: props6, parent, context }) => {
+    const { ICONS, useIconSprite, verbose } = context && context.designSystem;
+    const { toCamelCase } = context && context.utils;
+    const iconName = props6.inheritedString || props6.name || props6.icon || key;
+    const camelCase = toCamelCase(iconName);
+    const isArray5 = camelCase.split(/([a-z])([A-Z])/g);
+    let activeIconName;
+    if (props6.active) {
+      activeIconName = props6[".active"].name || props6[".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;
+    }
+    let validIconName;
+    if (ICONS[activeIconName])
+      validIconName = activeIconName;
+    if (ICONS[camelCase])
+      validIconName = camelCase;
+    else if (ICONS[isArray5[0] + isArray5[1]])
+      validIconName = isArray5[0] + isArray5[1];
+    else if (ICONS[isArray5[0]])
+      validIconName = isArray5[0];
+    else {
+      if (verbose)
+        console.warn("Can't find icon:", iconName, validIconName);
+    }
+    const iconFromLibrary = ICONS[validIconName];
+    const directSrc = parent && parent.props && parent.props.src || props6.src;
+    return {
+      width: "A",
+      height: "A",
+      display: "inline-block",
+      spriteId: useIconSprite && validIconName,
+      src: iconFromLibrary || directSrc || ICONS.noIcon,
+      style: { fill: "currentColor" }
+    };
+  },
+  attr: { viewBox: "0 0 24 24" }
+};
+var IconText2 = {
+  extend: Flex,
+  props: {
+    align: "center center",
+    lineHeight: 1
+  },
+  // TODO: remove this variant
+  icon: {
+    extend: Icon2,
+    if: ({ parent }) => parent.props.icon
+  },
+  Icon: {
+    props: {},
+    if: ({ props: props6 }) => props6.name || props6.icon
+  },
+  text: ({ props: props6 }) => props6.text,
+  ".reversed": {
+    props: { flow: "row-reverse" }
+  },
+  ".vertical": {
+    props: { flow: "column" }
+  }
+};
+var FileIcon = {
+  extend: Flex,
+  props: {
+    theme: "tertiary",
+    boxSize: "C1",
+    align: "center center",
+    round: "Z"
+  },
+  Icon: {
+    fontSize: "B",
+    margin: "auto",
+    icon: "file"
+  }
+};
+// Link/index.js
 var import_router = __toESM(require_cjs9());
 var Link = {
   extend: Focusable,
@@ -12752,8 +12877,8 @@ var Link = {
   },
   attr: {
     href: (el, s, ctx) => {
-      const { exec: exec2 } = ctx.utils;
-      return exec2(el.props.href, el) || exec2(el.props, el).href;
+      const { exec: exec3 } = ctx.utils;
+      return exec3(el.props.href, el) || exec3(el.props, el).href;
     },
     target: ({ props: props6 }) => props6.target,
     "aria-label": ({ props: props6 }) => props6.aria ? props6.aria.label : props6.text,
@@ -12785,7 +12910,8 @@ var RouteLink = {
   extend: [Link, RouterLink]
 };
-// node_modules/@symbo.ls/input/index.js
+// Input/index.js
+var import_utils8 = __toESM(require_cjs5());
 var Input2 = {
   extend: [Focusable],
   tag: "input",
@@ -12806,7 +12932,11 @@ var Input2 = {
     name: ({ props: props6 }) => props6.name,
     autocomplete: ({ props: props6 }) => props6.autocomplete,
     placeholder: ({ props: props6 }) => props6.placeholder,
-    value: ({ props: props6, state }) => props6.value,
+    value: ({ props: props6, state }) => {
+      if ((0, import_utils8.isString)(props6.value) && props6.value.includes("{{"))
+        return (0, import_utils8.replaceLiteralsWithObjectFields)(props6.value, state);
+      return props6.value;
+    },
     disabled: ({ props: props6 }) => props6.disabled || null,
     readonly: ({ props: props6 }) => props6.readonly,
     required: ({ props: props6 }) => props6.required,
@@ -12825,131 +12955,694 @@ var NumberInput = {
   }
 };
-// node_modules/@symbo.ls/field/index.js
-var Field = {
-  extend: [IconText],
-  props: ({ state, key }) => ({
-    value: state[key],
-    depth: 16,
-    placeholder: "",
-    padding: "A B",
-    round: "C",
-    type: "text",
-    position: "relative",
-    width: "G",
-    appearance: "none",
-    outline: 0,
-    border: "none",
-    cursor: "pointer",
-    fontFamily: "inherit",
-    boxSizing: "border-box",
-    input: {
-      width: "100%",
-      height: "100%",
-      border: "none"
-    },
-    svg: {
-      position: "absolute",
-      right: "A"
-    }
-  }),
-  input: { extend: [Focusable, Input2] }
+// Field/node_modules/@symbo.ls/atoms/Block.js
+var import_scratch10 = __toESM(require_cjs());
+// Field/node_modules/@symbo.ls/atoms/Grid.js
+var import_scratch11 = __toESM(require_cjs());
+// Field/node_modules/@symbo.ls/atoms/Media.js
+var import_utils9 = __toESM(require_cjs5());
+// Field/node_modules/@symbo.ls/atoms/Theme.js
+var import_scratch14 = __toESM(require_cjs());
+// Field/node_modules/@symbo.ls/atoms/Shape/style.js
+var import_scratch13 = __toESM(require_cjs());
+// Field/node_modules/@symbo.ls/atoms/Timing.js
+var import_scratch12 = __toESM(require_cjs());
+// Field/node_modules/@symbo.ls/atoms/Shape/style.js
+var CONFIG2 = (0, import_scratch13.getActiveConfig)();
+var depth2 = {
+  4: { boxShadow: `rgba(0,0,0,.10) 0 2${CONFIG2.UNIT.default} 4${CONFIG2.UNIT.default}` },
+  6: { boxShadow: `rgba(0,0,0,.10) 0 3${CONFIG2.UNIT.default} 6${CONFIG2.UNIT.default}` },
+  10: { boxShadow: `rgba(0,0,0,.10) 0 4${CONFIG2.UNIT.default} 10${CONFIG2.UNIT.default}` },
+  16: { boxShadow: `rgba(0,0,0,.10) 0 8${CONFIG2.UNIT.default} 16${CONFIG2.UNIT.default}` },
+  26: { boxShadow: `rgba(0,0,0,.10) 0 14${CONFIG2.UNIT.default} 26${CONFIG2.UNIT.default}` },
+  42: { boxShadow: `rgba(0,0,0,.10) 0 20${CONFIG2.UNIT.default} 42${CONFIG2.UNIT.default}` }
 };
-// node_modules/@symbo.ls/video/index.js
-var Video = {
-  tag: "video",
-  childExtend: {
-    tag: "source",
-    attr: {
-      src: ({ props: props6 }) => props6.src,
-      controls: ({ props: props6 }) => props6.controls
-    }
-  },
+// Field/node_modules/@symbo.ls/atoms/InteractiveComponent.js
+var Focusable2 = {
   props: {
-    controls: true
+    border: "none",
+    outline: "solid, 0, blue .3",
+    ":focus-visible": {
+      opacity: 1,
+      outline: "solid, X, blue .3"
+    }
   },
   attr: {
-    src: ({ props: props6 }) => props6.src,
-    autoplay: ({ props: props6 }) => props6.autoplay,
-    loop: ({ props: props6 }) => props6.loop,
-    poster: ({ props: props6 }) => props6.poster,
-    muted: ({ props: props6 }) => props6.muted,
-    preload: ({ props: props6 }) => props6.preload,
-    controls: ({ props: props6 }) => props6.controls
+    placeholder: ({ props: props6 }) => props6.placeholder,
+    tabIndex: ({ props: props6 }) => props6.tabIndex
   }
 };
-// node_modules/@symbo.ls/range/index.js
-var import_utils6 = __toESM(require_cjs5());
-var import_scratch10 = __toESM(require_cjs());
-var props4 = {
-  appearance: "none",
-  width: "100%",
-  height: "2px",
-  outline: "none",
-  flex: 1,
-  onInput: (ev, el, s) => s.update({ value: el.node.value }),
-  onChange: (ev, el, s) => s.update({ value: el.node.value }),
-  style: {
-    appearance: "none"
-  },
-  "::-webkit-slider-thumb": {
-    boxSizing: "content-box",
-    width: "8px",
-    height: "8px",
-    borderWidth: "2px",
-    borderStyle: "solid",
-    borderRadius: "100%",
-    opacity: ".8",
-    style: {
-      appearance: "none"
-    }
-  },
-  "::-webkit-slider-runnable-track": {},
-  "@dark": {
-    background: "white 0.2",
-    "::-webkit-slider-thumb": {
-      background: "#232526",
-      borderColor: (0, import_scratch10.opacify)("#454646", 0.75)
-    },
-    ":hover": {
-      "::-webkit-slider-thumb": {
-        borderColor: (0, import_scratch10.opacify)("#fff", 0.35)
-      }
-    },
-    ":focus": {
-      "::-webkit-slider-thumb": {
-        borderColor: "#3C6AC0"
-      }
-    }
-  },
-  "@light": {
-    background: "gray9",
-    "::-webkit-slider-thumb": {
-      background: "white",
-      borderColor: "gray9"
-    },
-    ":hover": {
-      "::-webkit-slider-thumb": {
-        borderColor: "gray7"
-      }
-    },
-    ":focus": {
-      "::-webkit-slider-thumb": {
-        borderColor: "blue"
-      }
-    }
+// Field/node_modules/@symbo.ls/atoms/Collection.js
+var import_state2 = __toESM(require_cjs8());
+var import_utils10 = __toESM(require_cjs5());
+// Field/node_modules/@symbo.ls/atoms/Position.js
+var import_scratch15 = __toESM(require_cjs());
+// Field/node_modules/@symbo.ls/atoms/Shape/index.js
+var import_utils11 = __toESM(require_cjs5());
+var import_scratch16 = __toESM(require_cjs());
+// Field/node_modules/@symbo.ls/atoms/Text.js
+var import_scratch17 = __toESM(require_cjs());
+// Field/node_modules/@symbo.ls/atoms/Animation.js
+var import_scratch18 = __toESM(require_cjs());
+var import_utils13 = __toESM(require_cjs5());
+// Field/node_modules/@emotion/hash/dist/emotion-hash.esm.js
+function murmur22(str) {
+  var h = 0;
+  var k, i = 0, len = str.length;
+  for (; len >= 4; ++i, len -= 4) {
+    k = str.charCodeAt(i) & 255 | (str.charCodeAt(++i) & 255) << 8 | (str.charCodeAt(++i) & 255) << 16 | (str.charCodeAt(++i) & 255) << 24;
+    k = /* Math.imul(k, m): */
+    (k & 65535) * 1540483477 + ((k >>> 16) * 59797 << 16);
+    k ^= /* k >>> r: */
+    k >>> 24;
+    h = /* Math.imul(k, m): */
+    (k & 65535) * 1540483477 + ((k >>> 16) * 59797 << 16) ^ /* Math.imul(h, m): */
+    (h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
   }
-};
-var Range = {
-  props: props4,
-  tag: "input",
-  attr: { type: "range" }
-};
-var listenProp = (el, prop, def) => {
+  switch (len) {
+    case 3:
+      h ^= (str.charCodeAt(i + 2) & 255) << 16;
+    case 2:
+      h ^= (str.charCodeAt(i + 1) & 255) << 8;
+    case 1:
+      h ^= str.charCodeAt(i) & 255;
+      h = /* Math.imul(h, m): */
+      (h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
+  }
+  h ^= h >>> 13;
+  h = /* Math.imul(h, m): */
+  (h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
+  return ((h ^ h >>> 15) >>> 0).toString(36);
+}
+// Field/node_modules/@emotion/unitless/dist/emotion-unitless.esm.js
+var unitlessKeys2 = {
+  animationIterationCount: 1,
+  aspectRatio: 1,
+  borderImageOutset: 1,
+  borderImageSlice: 1,
+  borderImageWidth: 1,
+  boxFlex: 1,
+  boxFlexGroup: 1,
+  boxOrdinalGroup: 1,
+  columnCount: 1,
+  columns: 1,
+  flex: 1,
+  flexGrow: 1,
+  flexPositive: 1,
+  flexShrink: 1,
+  flexNegative: 1,
+  flexOrder: 1,
+  gridRow: 1,
+  gridRowEnd: 1,
+  gridRowSpan: 1,
+  gridRowStart: 1,
+  gridColumn: 1,
+  gridColumnEnd: 1,
+  gridColumnSpan: 1,
+  gridColumnStart: 1,
+  msGridRow: 1,
+  msGridRowSpan: 1,
+  msGridColumn: 1,
+  msGridColumnSpan: 1,
+  fontWeight: 1,
+  lineHeight: 1,
+  opacity: 1,
+  order: 1,
+  orphans: 1,
+  tabSize: 1,
+  widows: 1,
+  zIndex: 1,
+  zoom: 1,
+  WebkitLineClamp: 1,
+  // SVG-related properties
+  fillOpacity: 1,
+  floodOpacity: 1,
+  stopOpacity: 1,
+  strokeDasharray: 1,
+  strokeDashoffset: 1,
+  strokeMiterlimit: 1,
+  strokeOpacity: 1,
+  strokeWidth: 1
+};
+// Field/node_modules/@emotion/serialize/dist/emotion-serialize.browser.esm.js
+var ILLEGAL_ESCAPE_SEQUENCE_ERROR2 = `You have illegal escape sequence in your template literal, most likely inside content's property value.
+Because you write your CSS inside a JavaScript string you actually have to do double escaping, so for example "content: '\\00d7';" should become "content: '\\\\00d7';".
+You can read more about this here:
+https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences`;
+var UNDEFINED_AS_OBJECT_KEY_ERROR2 = "You have passed in falsy value as style object's key (can happen when in example you pass unexported component as computed key).";
+var hyphenateRegex2 = /[A-Z]|^ms/g;
+var animationRegex2 = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
+var isCustomProperty3 = function isCustomProperty4(property) {
+  return property.charCodeAt(1) === 45;
+};
+var isProcessableValue3 = function isProcessableValue4(value) {
+  return value != null && typeof value !== "boolean";
+};
+var processStyleName2 = /* @__PURE__ */ memoize(function(styleName) {
+  return isCustomProperty3(styleName) ? styleName : styleName.replace(hyphenateRegex2, "-$&").toLowerCase();
+});
+var processStyleValue3 = function processStyleValue4(key, value) {
+  switch (key) {
+    case "animation":
+    case "animationName": {
+      if (typeof value === "string") {
+        return value.replace(animationRegex2, function(match2, p1, p2) {
+          cursor2 = {
+            name: p1,
+            styles: p2,
+            next: cursor2
+          };
+          return p1;
+        });
+      }
+    }
+  }
+  if (unitlessKeys2[key] !== 1 && !isCustomProperty3(key) && typeof value === "number" && value !== 0) {
+    return value + "px";
+  }
+  return value;
+};
+if (true) {
+  contentValuePattern = /(var|attr|counters?|url|element|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/;
+  contentValues = ["normal", "none", "initial", "inherit", "unset"];
+  oldProcessStyleValue = processStyleValue3;
+  msPattern = /^-ms-/;
+  hyphenPattern = /-(.)/g;
+  hyphenatedCache = {};
+  processStyleValue3 = function processStyleValue5(key, value) {
+    if (key === "content") {
+      if (typeof value !== "string" || contentValues.indexOf(value) === -1 && !contentValuePattern.test(value) && (value.charAt(0) !== value.charAt(value.length - 1) || value.charAt(0) !== '"' && value.charAt(0) !== "'")) {
+        throw new Error("You seem to be using a value for 'content' without quotes, try replacing it with `content: '\"" + value + "\"'`");
+      }
+    }
+    var processed = oldProcessStyleValue(key, value);
+    if (processed !== "" && !isCustomProperty3(key) && key.indexOf("-") !== -1 && hyphenatedCache[key] === void 0) {
+      hyphenatedCache[key] = true;
+      console.error("Using kebab-case for css properties in objects is not supported. Did you mean " + key.replace(msPattern, "ms-").replace(hyphenPattern, function(str, _char) {
+        return _char.toUpperCase();
+      }) + "?");
+    }
+    return processed;
+  };
+}
+var contentValuePattern;
+var contentValues;
+var oldProcessStyleValue;
+var msPattern;
+var hyphenPattern;
+var hyphenatedCache;
+var noComponentSelectorMessage2 = "Component selectors can only be used in conjunction with @emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware compiler transform.";
+function handleInterpolation2(mergedProps, registered, interpolation) {
+  if (interpolation == null) {
+    return "";
+  }
+  if (interpolation.__emotion_styles !== void 0) {
+    if (interpolation.toString() === "NO_COMPONENT_SELECTOR") {
+      throw new Error(noComponentSelectorMessage2);
+    }
+    return interpolation;
+  }
+  switch (typeof interpolation) {
+    case "boolean": {
+      return "";
+    }
+    case "object": {
+      if (interpolation.anim === 1) {
+        cursor2 = {
+          name: interpolation.name,
+          styles: interpolation.styles,
+          next: cursor2
+        };
+        return interpolation.name;
+      }
+      if (interpolation.styles !== void 0) {
+        var next2 = interpolation.next;
+        if (next2 !== void 0) {
+          while (next2 !== void 0) {
+            cursor2 = {
+              name: next2.name,
+              styles: next2.styles,
+              next: cursor2
+            };
+            next2 = next2.next;
+          }
+        }
+        var styles = interpolation.styles + ";";
+        if (interpolation.map !== void 0) {
+          styles += interpolation.map;
+        }
+        return styles;
+      }
+      return createStringFromObject2(mergedProps, registered, interpolation);
+    }
+    case "function": {
+      if (mergedProps !== void 0) {
+        var previousCursor = cursor2;
+        var result = interpolation(mergedProps);
+        cursor2 = previousCursor;
+        return handleInterpolation2(mergedProps, registered, result);
+      } else if (true) {
+        console.error("Functions that are interpolated in css calls will be stringified.\nIf you want to have a css call based on props, create a function that returns a css call like this\nlet dynamicStyle = (props) => css`color: ${props.color}`\nIt can be called directly with props or interpolated in a styled call like this\nlet SomeComponent = styled('div')`${dynamicStyle}`");
+      }
+      break;
+    }
+    case "string":
+      if (true) {
+        var matched = [];
+        var replaced = interpolation.replace(animationRegex2, function(match2, p1, p2) {
+          var fakeVarName = "animation" + matched.length;
+          matched.push("const " + fakeVarName + " = keyframes`" + p2.replace(/^@keyframes animation-\w+/, "") + "`");
+          return "${" + fakeVarName + "}";
+        });
+        if (matched.length) {
+          console.error("`keyframes` output got interpolated into plain string, please wrap it with `css`.\n\nInstead of doing this:\n\n" + [].concat(matched, ["`" + replaced + "`"]).join("\n") + "\n\nYou should wrap it with `css` like this:\n\n" + ("css`" + replaced + "`"));
+        }
+      }
+      break;
+  }
+  if (registered == null) {
+    return interpolation;
+  }
+  var cached = registered[interpolation];
+  return cached !== void 0 ? cached : interpolation;
+}
+function createStringFromObject2(mergedProps, registered, obj) {
+  var string = "";
+  if (Array.isArray(obj)) {
+    for (var i = 0; i < obj.length; i++) {
+      string += handleInterpolation2(mergedProps, registered, obj[i]) + ";";
+    }
+  } else {
+    for (var _key in obj) {
+      var value = obj[_key];
+      if (typeof value !== "object") {
+        if (registered != null && registered[value] !== void 0) {
+          string += _key + "{" + registered[value] + "}";
+        } else if (isProcessableValue3(value)) {
+          string += processStyleName2(_key) + ":" + processStyleValue3(_key, value) + ";";
+        }
+      } else {
+        if (_key === "NO_COMPONENT_SELECTOR" && true) {
+          throw new Error(noComponentSelectorMessage2);
+        }
+        if (Array.isArray(value) && typeof value[0] === "string" && (registered == null || registered[value[0]] === void 0)) {
+          for (var _i = 0; _i < value.length; _i++) {
+            if (isProcessableValue3(value[_i])) {
+              string += processStyleName2(_key) + ":" + processStyleValue3(_key, value[_i]) + ";";
+            }
+          }
+        } else {
+          var interpolated = handleInterpolation2(mergedProps, registered, value);
+          switch (_key) {
+            case "animation":
+            case "animationName": {
+              string += processStyleName2(_key) + ":" + interpolated + ";";
+              break;
+            }
+            default: {
+              if (_key === "undefined") {
+                console.error(UNDEFINED_AS_OBJECT_KEY_ERROR2);
+              }
+              string += _key + "{" + interpolated + "}";
+            }
+          }
+        }
+      }
+    }
+  }
+  return string;
+}
+var labelPattern2 = /label:\s*([^\s;\n{]+)\s*(;|$)/g;
+var sourceMapPattern2;
+if (true) {
+  sourceMapPattern2 = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//g;
+}
+var cursor2;
+var serializeStyles3 = function serializeStyles4(args, registered, mergedProps) {
+  if (args.length === 1 && typeof args[0] === "object" && args[0] !== null && args[0].styles !== void 0) {
+    return args[0];
+  }
+  var stringMode = true;
+  var styles = "";
+  cursor2 = void 0;
+  var strings = args[0];
+  if (strings == null || strings.raw === void 0) {
+    stringMode = false;
+    styles += handleInterpolation2(mergedProps, registered, strings);
+  } else {
+    if (strings[0] === void 0) {
+      console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR2);
+    }
+    styles += strings[0];
+  }
+  for (var i = 1; i < args.length; i++) {
+    styles += handleInterpolation2(mergedProps, registered, args[i]);
+    if (stringMode) {
+      if (strings[i] === void 0) {
+        console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR2);
+      }
+      styles += strings[i];
+    }
+  }
+  var sourceMap;
+  if (true) {
+    styles = styles.replace(sourceMapPattern2, function(match3) {
+      sourceMap = match3;
+      return "";
+    });
+  }
+  labelPattern2.lastIndex = 0;
+  var identifierName = "";
+  var match2;
+  while ((match2 = labelPattern2.exec(styles)) !== null) {
+    identifierName += "-" + // $FlowFixMe we know it's not null
+    match2[1];
+  }
+  var name = murmur22(styles) + identifierName;
+  if (true) {
+    return {
+      name,
+      styles,
+      map: sourceMap,
+      next: cursor2,
+      toString: function toString() {
+        return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
+      }
+    };
+  }
+  return {
+    name,
+    styles,
+    next: cursor2
+  };
+};
+// Field/node_modules/@emotion/utils/dist/emotion-utils.browser.esm.js
+var isBrowser2 = true;
+function getRegisteredStyles2(registered, registeredStyles, classNames) {
+  var rawClassName = "";
+  classNames.split(" ").forEach(function(className) {
+    if (registered[className] !== void 0) {
+      registeredStyles.push(registered[className] + ";");
+    } else {
+      rawClassName += className + " ";
+    }
+  });
+  return rawClassName;
+}
+var registerStyles3 = function registerStyles4(cache, serialized, isStringTag) {
+  var className = cache.key + "-" + serialized.name;
+  if (
+    // we only need to add the styles to the registered cache if the
+    // class name could be used further down
+    // the tree but if it's a string tag, we know it won't
+    // so we don't have to add it to registered cache.
+    // this improves memory usage since we can avoid storing the whole style string
+    (isStringTag === false || // we need to always store it if we're in compat mode and
+    // in node since emotion-server relies on whether a style is in
+    // the registered cache to know whether a style is global or not
+    // also, note that this check will be dead code eliminated in the browser
+    isBrowser2 === false) && cache.registered[className] === void 0
+  ) {
+    cache.registered[className] = serialized.styles;
+  }
+};
+var insertStyles3 = function insertStyles4(cache, serialized, isStringTag) {
+  registerStyles3(cache, serialized, isStringTag);
+  var className = cache.key + "-" + serialized.name;
+  if (cache.inserted[serialized.name] === void 0) {
+    var current = serialized;
+    do {
+      cache.insert(serialized === current ? "." + className : "", current, cache.sheet, true);
+      current = current.next;
+    } while (current !== void 0);
+  }
+};
+// Field/node_modules/@emotion/css/create-instance/dist/emotion-css-create-instance.esm.js
+function insertWithoutScoping2(cache, serialized) {
+  if (cache.inserted[serialized.name] === void 0) {
+    return cache.insert("", serialized, cache.sheet, true);
+  }
+}
+function merge4(registered, css, className) {
+  var registeredStyles = [];
+  var rawClassName = getRegisteredStyles2(registered, registeredStyles, className);
+  if (registeredStyles.length < 2) {
+    return className;
+  }
+  return rawClassName + css(registeredStyles);
+}
+var createEmotion4 = function createEmotion5(options) {
+  var cache = createCache(options);
+  cache.sheet.speedy = function(value) {
+    if (this.ctr !== 0) {
+      throw new Error("speedy must be changed before any rules are inserted");
+    }
+    this.isSpeedy = value;
+  };
+  cache.compat = true;
+  var css = function css2() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    var serialized = serializeStyles3(args, cache.registered, void 0);
+    insertStyles3(cache, serialized, false);
+    return cache.key + "-" + serialized.name;
+  };
+  var keyframes3 = function keyframes4() {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+    var serialized = serializeStyles3(args, cache.registered);
+    var animation = "animation-" + serialized.name;
+    insertWithoutScoping2(cache, {
+      name: serialized.name,
+      styles: "@keyframes " + animation + "{" + serialized.styles + "}"
+    });
+    return animation;
+  };
+  var injectGlobal = function injectGlobal2() {
+    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+      args[_key3] = arguments[_key3];
+    }
+    var serialized = serializeStyles3(args, cache.registered);
+    insertWithoutScoping2(cache, serialized);
+  };
+  var cx = function cx2() {
+    for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+      args[_key4] = arguments[_key4];
+    }
+    return merge4(cache.registered, css, classnames3(args));
+  };
+  return {
+    css,
+    cx,
+    injectGlobal,
+    keyframes: keyframes3,
+    hydrate: function hydrate(ids) {
+      ids.forEach(function(key) {
+        cache.inserted[key] = true;
+      });
+    },
+    flush: function flush() {
+      cache.registered = {};
+      cache.inserted = {};
+      cache.sheet.flush();
+    },
+    // $FlowFixMe
+    sheet: cache.sheet,
+    cache,
+    getRegisteredStyles: getRegisteredStyles2.bind(null, cache.registered),
+    merge: merge4.bind(null, cache.registered, css)
+  };
+};
+var classnames3 = function classnames4(args) {
+  var cls = "";
+  for (var i = 0; i < args.length; i++) {
+    var arg = args[i];
+    if (arg == null)
+      continue;
+    var toAdd = void 0;
+    switch (typeof arg) {
+      case "boolean":
+        break;
+      case "object": {
+        if (Array.isArray(arg)) {
+          toAdd = classnames4(arg);
+        } else {
+          toAdd = "";
+          for (var k in arg) {
+            if (arg[k] && k) {
+              toAdd && (toAdd += " ");
+              toAdd += k;
+            }
+          }
+        }
+        break;
+      }
+      default: {
+        toAdd = arg;
+      }
+    }
+    if (toAdd) {
+      cls && (cls += " ");
+      cls += toAdd;
+    }
+  }
+  return cls;
+};
+// Field/node_modules/@symbo.ls/emotion/index.js
+var createEmotion6 = (key = "smbls", container) => {
+  const cleanKey = key.replaceAll(/\./g, "-");
+  return createEmotion4({ key: cleanKey, container });
+};
+var emotion2 = createEmotion6();
+// Field/node_modules/@symbo.ls/atoms/Animation.js
+var { keyframes: keyframes2 } = emotion2;
+// Field/index.js
+var Field = {
+  extend: [IconText],
+  props: ({ state, key }) => ({
+    value: state[key],
+    depth: 16,
+    placeholder: "",
+    padding: "A B",
+    round: "C",
+    type: "text",
+    position: "relative",
+    width: "G",
+    appearance: "none",
+    outline: 0,
+    border: "none",
+    cursor: "pointer",
+    fontFamily: "inherit",
+    boxSizing: "border-box",
+    input: {
+      width: "100%",
+      height: "100%",
+      border: "none"
+    },
+    svg: {
+      position: "absolute",
+      right: "A"
+    }
+  }),
+  input: { extend: [Focusable2, Input2] }
+};
+// Video/index.js
+var Video = {
+  tag: "video",
+  childExtend: {
+    tag: "source",
+    attr: {
+      src: ({ props: props6 }) => props6.src,
+      controls: ({ props: props6 }) => props6.controls
+    }
+  },
+  props: {
+    controls: true
+  },
+  attr: {
+    src: ({ props: props6 }) => props6.src,
+    autoplay: ({ props: props6 }) => props6.autoplay,
+    loop: ({ props: props6 }) => props6.loop,
+    poster: ({ props: props6 }) => props6.poster,
+    muted: ({ props: props6 }) => props6.muted,
+    preload: ({ props: props6 }) => props6.preload,
+    controls: ({ props: props6 }) => props6.controls
+  }
+};
+// Range/index.js
+var import_utils14 = __toESM(require_cjs5());
+var import_scratch19 = __toESM(require_cjs());
+var props4 = {
+  appearance: "none",
+  width: "100%",
+  height: "2px",
+  outline: "none",
+  flex: 1,
+  onInput: (ev, el, s) => s.update({ value: el.node.value }),
+  onChange: (ev, el, s) => s.update({ value: el.node.value }),
+  style: {
+    appearance: "none"
+  },
+  "::-webkit-slider-thumb": {
+    boxSizing: "content-box",
+    width: "8px",
+    height: "8px",
+    borderWidth: "2px",
+    borderStyle: "solid",
+    borderRadius: "100%",
+    opacity: ".8",
+    style: {
+      appearance: "none"
+    }
+  },
+  "::-webkit-slider-runnable-track": {},
+  "@dark": {
+    background: "white 0.2",
+    "::-webkit-slider-thumb": {
+      background: "#232526",
+      borderColor: (0, import_scratch19.opacify)("#454646", 0.75)
+    },
+    ":hover": {
+      "::-webkit-slider-thumb": {
+        borderColor: (0, import_scratch19.opacify)("#fff", 0.35)
+      }
+    },
+    ":focus": {
+      "::-webkit-slider-thumb": {
+        borderColor: "#3C6AC0"
+      }
+    }
+  },
+  "@light": {
+    background: "gray9",
+    "::-webkit-slider-thumb": {
+      background: "white",
+      borderColor: "gray9"
+    },
+    ":hover": {
+      "::-webkit-slider-thumb": {
+        borderColor: "gray7"
+      }
+    },
+    ":focus": {
+      "::-webkit-slider-thumb": {
+        borderColor: "blue"
+      }
+    }
+  }
+};
+var Range = {
+  props: props4,
+  tag: "input",
+  attr: { type: "range" }
+};
+var listenProp = (el, prop, def) => {
   const val = el.props && el.props[prop];
-  const r = (0, import_utils6.isFunction)(val) ? val(el, el.state) : val !== void 0 ? val : def !== void 0 ? def : 50;
+  const r = (0, import_utils14.isFunction)(val) ? val(el, el.state) : val !== void 0 ? val : def !== void 0 ? def : 50;
   return r + "";
 };
 var RangeWithButtons = {
@@ -12958,7 +13651,7 @@ var RangeWithButtons = {
     props: { theme: "tertiary", icon: "minus" },
     on: {
       click: (ev, el, s) => {
-        el.props && (0, import_utils6.isFunction)(el.props.onClick) && el.props.onClick(ev, el, s);
+        el.props && (0, import_utils14.isFunction)(el.props.onClick) && el.props.onClick(ev, el, s);
       }
     }
   },
@@ -12979,8 +13672,8 @@ var RangeWithButtons = {
       step: (el, s) => listenProp(el, "step", 1)
     },
     on: {
-      input: (ev, el, s) => el.props && (0, import_utils6.isFunction)(el.props.onInput) && el.props.onInput(ev, el, s),
-      change: (ev, el, s) => el.props && (0, import_utils6.isFunction)(el.props.onChange) && el.props.onChange(ev, el, s)
+      input: (ev, el, s) => el.props && (0, import_utils14.isFunction)(el.props.onInput) && el.props.onInput(ev, el, s),
+      change: (ev, el, s) => el.props && (0, import_utils14.isFunction)(el.props.onChange) && el.props.onChange(ev, el, s)
     }
   },
   plus: {
@@ -12988,13 +13681,13 @@ var RangeWithButtons = {
     props: { theme: "tertiary", icon: "plus" },
     on: {
       click: (ev, el, s) => {
-        el.props && (0, import_utils6.isFunction)(el.props.onClick) && el.props.onClick(ev, el, s);
+        el.props && (0, import_utils14.isFunction)(el.props.onClick) && el.props.onClick(ev, el, s);
       }
     }
   }
 };
-// node_modules/@symbo.ls/slider/style.js
+// Slider/style.js
 var style_default = {
   appearance: "none",
   width: "100%",
@@ -13013,20 +13706,20 @@ var style_default = {
   }
 };
-// node_modules/@symbo.ls/slider/index.js
-var import_scratch11 = __toESM(require_cjs());
-var import_utils7 = __toESM(require_cjs5());
-(0, import_scratch11.set)({
+// Slider/index.js
+var import_scratch20 = __toESM(require_cjs());
+var import_utils15 = __toESM(require_cjs5());
+(0, import_scratch20.set)({
   theme: {
     sliderThumb: {
       background: "white 0.2",
       "&::-webkit-slider-thumb": {
         background: "#232526",
-        borderColor: (0, import_scratch11.opacify)("#454646", 0.75)
+        borderColor: (0, import_scratch20.opacify)("#454646", 0.75)
       },
       "&:hover": {
         "&::-webkit-slider-thumb": {
-          borderColor: (0, import_scratch11.opacify)("#fff", 0.35)
+          borderColor: (0, import_scratch20.opacify)("#fff", 0.35)
         }
       },
       "&:focus, &:active": {
@@ -13047,7 +13740,7 @@ var RangeSlider = {
 };
 var listenProp2 = (el, prop, def) => {
   const val = el && el.props && el.props[prop];
-  const r = ((0, import_utils7.isFunction)(val) ? val() : val) || (def !== void 0 ? def : 50);
+  const r = ((0, import_utils15.isFunction)(val) ? val() : val) || (def !== void 0 ? def : 50);
   return r;
 };
 var Slider = {
@@ -13058,10 +13751,10 @@ var Slider = {
     },
     on: {
       click: (ev, el, s) => {
-        el.props && (0, import_utils7.isFunction)(el.props.click) && el.props.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 props6 = input.props;
-        const value = (0, import_utils7.isFunction)(props6.value) ? props6.value() : props6.value;
+        const value = (0, import_utils15.isFunction)(props6.value) ? props6.value() : props6.value;
         input.node.value = value;
       }
     }
@@ -13084,8 +13777,8 @@ var Slider = {
       step: (el, s) => listenProp2(el, "step", 1)
     },
     on: {
-      input: (ev, el, s) => el.props && (0, import_utils7.isFunction)(el.props.input) && el.props.input(ev, el, s),
-      change: (ev, el, s) => el.props && (0, import_utils7.isFunction)(el.props.change) && el.props.change(ev, el, s)
+      input: (ev, el, s) => el.props && (0, import_utils15.isFunction)(el.props.input) && el.props.input(ev, el, s),
+      change: (ev, el, s) => el.props && (0, import_utils15.isFunction)(el.props.change) && el.props.change(ev, el, s)
     }
   },
   button1: {
@@ -13095,17 +13788,17 @@ var Slider = {
     },
     on: {
       click: (ev, el, s) => {
-        el.props && (0, import_utils7.isFunction)(el.props.click) && el.props.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 props6 = input.props;
-        const value = (0, import_utils7.isFunction)(props6.value) ? props6.value() : props6.value;
+        const value = (0, import_utils15.isFunction)(props6.value) ? props6.value() : props6.value;
         input.node.value = value;
       }
     }
   }
 };
-// node_modules/@symbo.ls/notification/index.js
+// Notification/index.js
 var Notification = {
   extend: Flex,
   props: {
@@ -13144,7 +13837,7 @@ var Notification = {
   }
 };
-// node_modules/@symbo.ls/tooltip/index.js
+// Tooltip/index.js
 var Tooltip = {
   extend: Flex,
   props: {
@@ -13192,7 +13885,7 @@ var TooltipParent = {
   }
 };
-// node_modules/@symbo.ls/textarea/index.js
+// Textarea/index.js
 var Textarea = {
   extend: [Input2],
   tag: "textarea",
@@ -13205,7 +13898,7 @@ var Textarea = {
   }
 };
-// node_modules/@symbo.ls/upload/UploadResult.js
+// Upload/UploadResult.js
 var Captions = {
   extend: Flex,
   props: {
@@ -13270,7 +13963,7 @@ var UploadResult = {
   }
 };
-// node_modules/@symbo.ls/upload/UploadLabel.js
+// Upload/UploadLabel.js
 var UploadLabel = {
   extend: [Focusable, Flex],
   tag: "label",
@@ -13315,7 +14008,7 @@ var UploadLabel = {
   }
 };
-// node_modules/@symbo.ls/upload/UploadModal.js
+// Upload/UploadModal.js
 var UploadModalFooter = {
   extend: Flex,
   props: {
@@ -13445,7 +14138,7 @@ var UploadModal = {
   UploadModalFooter: {}
 };
-// node_modules/@symbo.ls/upload/UploadProgress.js
+// Upload/UploadProgress.js
 var UploadProgress = {
   tag: "progress",
   props: {
@@ -13470,7 +14163,7 @@ var UploadProgress = {
   }
 };
-// node_modules/@symbo.ls/label/index.js
+// Label/index.js
 var Label = {
   extend: Button,
   props: {
@@ -13489,7 +14182,7 @@ var Label = {
   }
 };
-// node_modules/@symbo.ls/pills/index.js
+// Pills/index.js
 var Pills = {
   extend: Flex,
   props: {
@@ -13516,17 +14209,15 @@ var Pills = {
   $setCollection: ({ props: props6, state }) => new Array(props6.qty).fill({})
 };
-// node_modules/@symbo.ls/select/index.js
+// Select/index.js
 var Select = {
   extend: Focusable,
   tag: "select",
   props: {
     fontSize: "A",
-    style: {
-      border: "none",
-      boxSizing: "border-box",
-      cursor: "pointer"
-    }
+    border: "none",
+    boxSizing: "border-box",
+    cursor: "pointer"
   },
   childExtend: {
     tag: "option",
@@ -13547,7 +14238,7 @@ var Select = {
   }
 };
-// node_modules/@symbo.ls/tab/index.js
+// Tab/index.js
 var props5 = {
   gap: "Z",
   theme: "tertiary",
@@ -13578,7 +14269,7 @@ var Tab = {
   }
 };
-// node_modules/@symbo.ls/search/index.js
+// Search/index.js
 var Search = {
   extend: Flex,
   props: {