@symbo.ls/uikit 2.11.14 → 2.11.16

package/dist/index.cjs.js

@@ -30,9 +30,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// ../../packages/scratch/dist/cjs/index.js
+// node_modules/@symbo.ls/scratch/dist/cjs/index.js
 var require_cjs = __commonJS({
-  "../../packages/scratch/dist/cjs/index.js"(exports, module2) {
+  "node_modules/@symbo.ls/scratch/dist/cjs/index.js"(exports, module2) {
     "use strict";
     var __create2 = Object.create;
     var __defProp2 = Object.defineProperty;
@@ -64,7 +64,7 @@ var require_cjs = __commonJS({
       mod
     ));
     var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
-    var require_cjs11 = __commonJS2({
+    var require_cjs12 = __commonJS2({
       "../../node_modules/@domql/globals/dist/cjs/index.js"(exports2, module22) {
         "use strict";
         var __defProp22 = Object.defineProperty;
@@ -344,7 +344,7 @@ var require_cjs = __commonJS({
           isNode: () => isNode
         });
         module22.exports = __toCommonJS22(node_exports);
-        var import_globals3 = require_cjs11();
+        var import_globals3 = require_cjs12();
         var isNode = (obj) => {
           return (typeof Node === "object" ? obj instanceof import_globals3.window.Node : obj && typeof obj === "object" && typeof obj.nodeType === "number" && typeof obj.nodeName === "string") || false;
         };
@@ -478,15 +478,17 @@ var require_cjs = __commonJS({
           isEqualDeep: () => isEqualDeep,
           map: () => map,
           merge: () => merge52,
+          mergeAndCloneIfArray: () => mergeAndCloneIfArray2,
+          mergeArray: () => mergeArray2,
+          mergeArrayExclude: () => mergeArrayExclude2,
           mergeIfExisted: () => mergeIfExisted,
           overwrite: () => overwrite,
           overwriteDeep: () => overwriteDeep2,
           overwriteObj: () => overwriteObj,
-          overwriteShallow: () => overwriteShallow2,
           removeFromObject: () => removeFromObject2
         });
         module22.exports = __toCommonJS22(object_exports);
-        var import_globals3 = require_cjs11();
+        var import_globals3 = require_cjs12();
         var import_types = require_types2();
         var exec6 = (param, element, state, context) => {
           if ((0, import_types.isFunction)(param)) {
@@ -513,12 +515,12 @@ var require_cjs = __commonJS({
           }
           return element;
         };
-        var deepMerge3 = (element, extend, excludeFrom = []) => {
+        var deepMerge3 = (element, extend) => {
           for (const e2 in extend) {
-            if (excludeFrom.includes(e2) || e2.includes("__"))
-              continue;
             const elementProp = element[e2];
             const extendProp = extend[e2];
+            if (e2 === "parent" || e2 === "props")
+              continue;
             if ((0, import_types.isObjectLike)(elementProp) && (0, import_types.isObjectLike)(extendProp)) {
               deepMerge3(elementProp, extendProp);
             } else if (elementProp === void 0) {
@@ -527,47 +529,53 @@ var require_cjs = __commonJS({
           }
           return element;
         };
-        var clone = (obj, excludeFrom = []) => {
+        var clone = (obj) => {
           const o = {};
           for (const prop in obj) {
-            if (excludeFrom.includes(e) || e.includes("__"))
+            if (prop === "node")
               continue;
             o[prop] = obj[prop];
           }
           return o;
         };
-        var deepCloneExclude = (obj, excludeFrom = []) => {
+        var deepCloneExclude = (obj, exclude = []) => {
           if ((0, import_types.isArray)(obj)) {
-            return obj.map((x) => deepCloneExclude(x, excludeFrom));
+            return obj.map((x) => deepCloneExclude(x, exclude));
           }
           const o = {};
           for (const k in obj) {
-            if (excludeFrom.includes(k) || k.includes("__"))
+            if (exclude.indexOf(k) > -1)
               continue;
             let v = obj[k];
             if (k === "extend" && (0, import_types.isArray)(v)) {
-              v = mergeArrayExclude(v, excludeFrom);
+              v = mergeArrayExclude2(v, exclude);
             }
             if ((0, import_types.isArray)(v)) {
-              o[k] = v.map((x) => deepCloneExclude(x, excludeFrom));
+              o[k] = v.map((x) => deepCloneExclude(x, exclude));
             } else if ((0, import_types.isObject)(v)) {
-              o[k] = deepCloneExclude(v, excludeFrom);
+              o[k] = deepCloneExclude(v, exclude);
             } else
               o[k] = v;
           }
           return o;
         };
-        var deepClone22 = (obj, excludeFrom = []) => {
-          const o = (0, import_types.isArray)(obj) ? [] : {};
+        var mergeArrayExclude2 = (arr, excl = []) => {
+          return arr.reduce((acc, curr) => deepMerge3(acc, deepCloneExclude(curr, excl)), {});
+        };
+        var deepClone22 = (obj) => {
+          if ((0, import_types.isArray)(obj)) {
+            return obj.map(deepClone22);
+          }
+          const o = {};
           for (const prop in obj) {
-            if (excludeFrom.includes(prop) || prop.includes("__"))
-              continue;
             let objProp = obj[prop];
             if (prop === "extend" && (0, import_types.isArray)(objProp)) {
-              objProp = mergeArray(objProp);
+              objProp = mergeArray2(objProp);
             }
-            if ((0, import_types.isObjectLike)(objProp)) {
-              o[prop] = deepClone22(objProp, excludeFrom);
+            if ((0, import_types.isArray)(objProp)) {
+              o[prop] = objProp.map((v) => (0, import_types.isObject)(v) ? deepClone22(v) : v);
+            } else if ((0, import_types.isObject)(objProp)) {
+              o[prop] = deepClone22(objProp);
             } else
               o[prop] = objProp;
           }
@@ -669,11 +677,11 @@ var require_cjs = __commonJS({
           }
           return stringified;
         };
-        var overwrite = (element, params, excludeFrom = []) => {
+        var overwrite = (element, params, options) => {
           const { ref } = element;
           const changes = {};
           for (const e2 in params) {
-            if (excludeFrom.includes(e2) || e2.includes("__"))
+            if (e2 === "props")
               continue;
             const elementProp = element[e2];
             const paramsProp = params[e2];
@@ -736,18 +744,8 @@ var require_cjs = __commonJS({
           }
           return changes;
         };
-        var overwriteShallow2 = (obj, params, excludeFrom = []) => {
-          for (const e2 in params) {
-            if (excludeFrom.includes(e2) || e2.includes("__"))
-              continue;
-            obj[e2] = params[e2];
-          }
-          return obj;
-        };
-        var overwriteDeep2 = (params, obj, excludeFrom = []) => {
+        var overwriteDeep2 = (params, obj) => {
           for (const e2 in params) {
-            if (excludeFrom.includes(e2) || e2.includes("__"))
-              continue;
             const objProp = obj[e2];
             const paramsProp = params[e2];
             if ((0, import_types.isObjectLike)(objProp) && (0, import_types.isObjectLike)(paramsProp)) {
@@ -763,8 +761,14 @@ var require_cjs = __commonJS({
             return deepMerge3(a, b);
           return a || b;
         };
+        var mergeArray2 = (arr) => {
+          return arr.reduce((a, c) => deepMerge3(a, deepClone22(c)), {});
+        };
+        var mergeAndCloneIfArray2 = (obj) => {
+          return (0, import_types.isArray)(obj) ? mergeArray2(obj) : deepClone22(obj);
+        };
         var flattenRecursive = (param, prop, stack = []) => {
-          const objectized = mergeAndCloneIfArray(param);
+          const objectized = mergeAndCloneIfArray2(param);
           stack.push(objectized);
           const extendOfExtend = objectized[prop];
           if (extendOfExtend)
@@ -880,13 +884,10 @@ var require_cjs = __commonJS({
         __export22(array_exports, {
           arrayContainsOtherArray: () => arrayContainsOtherArray2,
           joinArrays: () => joinArrays,
-          mergeAndCloneIfArray: () => mergeAndCloneIfArray2,
-          mergeArray: () => mergeArray2,
           removeFromArray: () => removeFromArray2,
           swapItemsInArray: () => swapItemsInArray
         });
         module22.exports = __toCommonJS22(array_exports);
-        var import_object = require_object2();
         var import_types = require_types2();
         var arrayContainsOtherArray2 = (arr1, arr2) => {
           return arr2.every((val) => arr1.includes(val));
@@ -912,12 +913,6 @@ var require_cjs = __commonJS({
         var joinArrays = (...arrays) => {
           return [].concat(...arrays);
         };
-        var mergeArray2 = (arr, excludeFrom = []) => {
-          return arr.reduce((a, c) => (0, import_object.deepMerge)(a, (0, import_object.deepClone)(c, excludeFrom), excludeFrom), {});
-        };
-        var mergeAndCloneIfArray2 = (obj) => {
-          return (0, import_types.isArray)(obj) ? mergeArray2(obj) : (0, import_object.deepClone)(obj);
-        };
       }
     });
     var require_log2 = __commonJS2({
@@ -1133,7 +1128,7 @@ var require_cjs = __commonJS({
       setInCustomFontMedia: () => setInCustomFontMedia,
       setVariables: () => setVariables
     });
-    var import_globals = __toESM2(require_cjs11(), 1);
+    var import_globals = __toESM2(require_cjs12(), 1);
     var ENV = "development";
     var colorStringToRgbaArray = (color) => {
       if (color === "")
@@ -2375,7 +2370,7 @@ var require_cjs = __commonJS({
         lineHeight: TYPOGRAPHY2.lineHeight
       });
     };
-    var import_globals2 = __toESM2(require_cjs11(), 1);
+    var import_globals2 = __toESM2(require_cjs12(), 1);
     var DEF_OPTIONS = {
       document: import_globals2.document
     };
@@ -3884,7 +3879,7 @@ var require_cjs8 = __commonJS({
       mod
     ));
     var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
-    var require_cjs11 = __commonJS2({
+    var require_cjs12 = __commonJS2({
       "../../node_modules/@domql/globals/dist/cjs/index.js"(exports2, module22) {
         "use strict";
         var __defProp22 = Object.defineProperty;
@@ -4164,7 +4159,7 @@ var require_cjs8 = __commonJS({
           isNode: () => isNode
         });
         module22.exports = __toCommonJS22(node_exports);
-        var import_globals3 = require_cjs11();
+        var import_globals3 = require_cjs12();
         var isNode = (obj) => {
           return (typeof Node === "object" ? obj instanceof import_globals3.window.Node : obj && typeof obj === "object" && typeof obj.nodeType === "number" && typeof obj.nodeName === "string") || false;
         };
@@ -4308,7 +4303,7 @@ var require_cjs8 = __commonJS({
           removeFromObject: () => removeFromObject2
         });
         module22.exports = __toCommonJS22(object_exports);
-        var import_globals3 = require_cjs11();
+        var import_globals3 = require_cjs12();
         var import_types = require_types2();
         var exec6 = (param, element, state, context) => {
           if ((0, import_types.isFunction)(param)) {
@@ -4948,7 +4943,7 @@ var require_cjs8 = __commonJS({
       setInCustomFontMedia: () => setInCustomFontMedia,
       setVariables: () => setVariables
     });
-    var import_globals = __toESM2(require_cjs11(), 1);
+    var import_globals = __toESM2(require_cjs12(), 1);
     var ENV = "development";
     var colorStringToRgbaArray = (color) => {
       if (color === "")
@@ -6190,7 +6185,7 @@ var require_cjs8 = __commonJS({
         lineHeight: TYPOGRAPHY2.lineHeight
       });
     };
-    var import_globals2 = __toESM2(require_cjs11(), 1);
+    var import_globals2 = __toESM2(require_cjs12(), 1);
     var DEF_OPTIONS = {
       document: import_globals2.document
     };
@@ -6600,9 +6595,9 @@ var require_cjs9 = __commonJS({
   }
 });
 
-// Notification/node_modules/@symbo.ls/scratch/dist/cjs/index.js
+// ../../packages/scratch/dist/cjs/index.js
 var require_cjs10 = __commonJS({
-  "Notification/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;
@@ -6634,7 +6629,7 @@ var require_cjs10 = __commonJS({
       mod
     ));
     var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
-    var require_cjs11 = __commonJS2({
+    var require_cjs12 = __commonJS2({
       "../../node_modules/@domql/globals/dist/cjs/index.js"(exports2, module22) {
         "use strict";
         var __defProp22 = Object.defineProperty;
@@ -6914,7 +6909,7 @@ var require_cjs10 = __commonJS({
           isNode: () => isNode
         });
         module22.exports = __toCommonJS22(node_exports);
-        var import_globals3 = require_cjs11();
+        var import_globals3 = require_cjs12();
         var isNode = (obj) => {
           return (typeof Node === "object" ? obj instanceof import_globals3.window.Node : obj && typeof obj === "object" && typeof obj.nodeType === "number" && typeof obj.nodeName === "string") || false;
         };
@@ -7048,17 +7043,15 @@ var require_cjs10 = __commonJS({
           isEqualDeep: () => isEqualDeep,
           map: () => map,
           merge: () => merge52,
-          mergeAndCloneIfArray: () => mergeAndCloneIfArray2,
-          mergeArray: () => mergeArray2,
-          mergeArrayExclude: () => mergeArrayExclude2,
           mergeIfExisted: () => mergeIfExisted,
           overwrite: () => overwrite,
           overwriteDeep: () => overwriteDeep2,
           overwriteObj: () => overwriteObj,
+          overwriteShallow: () => overwriteShallow2,
           removeFromObject: () => removeFromObject2
         });
         module22.exports = __toCommonJS22(object_exports);
-        var import_globals3 = require_cjs11();
+        var import_globals3 = require_cjs12();
         var import_types = require_types2();
         var exec6 = (param, element, state, context) => {
           if ((0, import_types.isFunction)(param)) {
@@ -7085,12 +7078,12 @@ var require_cjs10 = __commonJS({
           }
           return element;
         };
-        var deepMerge3 = (element, extend) => {
+        var deepMerge3 = (element, extend, excludeFrom = []) => {
           for (const e2 in extend) {
+            if (excludeFrom.includes(e2) || e2.includes("__"))
+              continue;
             const elementProp = element[e2];
             const extendProp = extend[e2];
-            if (e2 === "parent" || e2 === "props")
-              continue;
             if ((0, import_types.isObjectLike)(elementProp) && (0, import_types.isObjectLike)(extendProp)) {
               deepMerge3(elementProp, extendProp);
             } else if (elementProp === void 0) {
@@ -7099,53 +7092,47 @@ var require_cjs10 = __commonJS({
           }
           return element;
         };
-        var clone = (obj) => {
+        var clone = (obj, excludeFrom = []) => {
           const o = {};
           for (const prop in obj) {
-            if (prop === "node")
+            if (excludeFrom.includes(e) || e.includes("__"))
               continue;
             o[prop] = obj[prop];
           }
           return o;
         };
-        var deepCloneExclude = (obj, exclude = []) => {
+        var deepCloneExclude = (obj, excludeFrom = []) => {
           if ((0, import_types.isArray)(obj)) {
-            return obj.map((x) => deepCloneExclude(x, exclude));
+            return obj.map((x) => deepCloneExclude(x, excludeFrom));
           }
           const o = {};
           for (const k in obj) {
-            if (exclude.indexOf(k) > -1)
+            if (excludeFrom.includes(k) || k.includes("__"))
               continue;
             let v = obj[k];
             if (k === "extend" && (0, import_types.isArray)(v)) {
-              v = mergeArrayExclude2(v, exclude);
+              v = mergeArrayExclude(v, excludeFrom);
             }
             if ((0, import_types.isArray)(v)) {
-              o[k] = v.map((x) => deepCloneExclude(x, exclude));
+              o[k] = v.map((x) => deepCloneExclude(x, excludeFrom));
             } else if ((0, import_types.isObject)(v)) {
-              o[k] = deepCloneExclude(v, exclude);
+              o[k] = deepCloneExclude(v, excludeFrom);
             } else
               o[k] = v;
           }
           return o;
         };
-        var mergeArrayExclude2 = (arr, excl = []) => {
-          return arr.reduce((acc, curr) => deepMerge3(acc, deepCloneExclude(curr, excl)), {});
-        };
-        var deepClone22 = (obj) => {
-          if ((0, import_types.isArray)(obj)) {
-            return obj.map(deepClone22);
-          }
-          const o = {};
+        var deepClone22 = (obj, excludeFrom = []) => {
+          const o = (0, import_types.isArray)(obj) ? [] : {};
           for (const prop in obj) {
+            if (excludeFrom.includes(prop) || prop.includes("__"))
+              continue;
             let objProp = obj[prop];
             if (prop === "extend" && (0, import_types.isArray)(objProp)) {
-              objProp = mergeArray2(objProp);
+              objProp = mergeArray(objProp);
             }
-            if ((0, import_types.isArray)(objProp)) {
-              o[prop] = objProp.map((v) => (0, import_types.isObject)(v) ? deepClone22(v) : v);
-            } else if ((0, import_types.isObject)(objProp)) {
-              o[prop] = deepClone22(objProp);
+            if ((0, import_types.isObjectLike)(objProp)) {
+              o[prop] = deepClone22(objProp, excludeFrom);
             } else
               o[prop] = objProp;
           }
@@ -7247,11 +7234,11 @@ var require_cjs10 = __commonJS({
           }
           return stringified;
         };
-        var overwrite = (element, params, options) => {
+        var overwrite = (element, params, excludeFrom = []) => {
           const { ref } = element;
           const changes = {};
           for (const e2 in params) {
-            if (e2 === "props")
+            if (excludeFrom.includes(e2) || e2.includes("__"))
               continue;
             const elementProp = element[e2];
             const paramsProp = params[e2];
@@ -7314,8 +7301,18 @@ var require_cjs10 = __commonJS({
           }
           return changes;
         };
-        var overwriteDeep2 = (params, obj) => {
+        var overwriteShallow2 = (obj, params, excludeFrom = []) => {
+          for (const e2 in params) {
+            if (excludeFrom.includes(e2) || e2.includes("__"))
+              continue;
+            obj[e2] = params[e2];
+          }
+          return obj;
+        };
+        var overwriteDeep2 = (params, obj, excludeFrom = []) => {
           for (const e2 in params) {
+            if (excludeFrom.includes(e2) || e2.includes("__"))
+              continue;
             const objProp = obj[e2];
             const paramsProp = params[e2];
             if ((0, import_types.isObjectLike)(objProp) && (0, import_types.isObjectLike)(paramsProp)) {
@@ -7331,14 +7328,8 @@ var require_cjs10 = __commonJS({
             return deepMerge3(a, b);
           return a || b;
         };
-        var mergeArray2 = (arr) => {
-          return arr.reduce((a, c) => deepMerge3(a, deepClone22(c)), {});
-        };
-        var mergeAndCloneIfArray2 = (obj) => {
-          return (0, import_types.isArray)(obj) ? mergeArray2(obj) : deepClone22(obj);
-        };
         var flattenRecursive = (param, prop, stack = []) => {
-          const objectized = mergeAndCloneIfArray2(param);
+          const objectized = mergeAndCloneIfArray(param);
           stack.push(objectized);
           const extendOfExtend = objectized[prop];
           if (extendOfExtend)
@@ -7454,10 +7445,13 @@ var require_cjs10 = __commonJS({
         __export22(array_exports, {
           arrayContainsOtherArray: () => arrayContainsOtherArray2,
           joinArrays: () => joinArrays,
+          mergeAndCloneIfArray: () => mergeAndCloneIfArray2,
+          mergeArray: () => mergeArray2,
           removeFromArray: () => removeFromArray2,
           swapItemsInArray: () => swapItemsInArray
         });
         module22.exports = __toCommonJS22(array_exports);
+        var import_object = require_object2();
         var import_types = require_types2();
         var arrayContainsOtherArray2 = (arr1, arr2) => {
           return arr2.every((val) => arr1.includes(val));
@@ -7483,6 +7477,12 @@ var require_cjs10 = __commonJS({
         var joinArrays = (...arrays) => {
           return [].concat(...arrays);
         };
+        var mergeArray2 = (arr, excludeFrom = []) => {
+          return arr.reduce((a, c) => (0, import_object.deepMerge)(a, (0, import_object.deepClone)(c, excludeFrom), excludeFrom), {});
+        };
+        var mergeAndCloneIfArray2 = (obj) => {
+          return (0, import_types.isArray)(obj) ? mergeArray2(obj) : (0, import_object.deepClone)(obj);
+        };
       }
     });
     var require_log2 = __commonJS2({
@@ -7698,7 +7698,7 @@ var require_cjs10 = __commonJS({
       setInCustomFontMedia: () => setInCustomFontMedia,
       setVariables: () => setVariables
     });
-    var import_globals = __toESM2(require_cjs11(), 1);
+    var import_globals = __toESM2(require_cjs12(), 1);
     var ENV = "development";
     var colorStringToRgbaArray = (color) => {
       if (color === "")
@@ -8360,8 +8360,8 @@ var require_cjs10 = __commonJS({
       setTheme: () => setTheme
     });
     var import_utils82 = __toESM2(require_cjs42(), 1);
-    var getColor5 = (value, key) => {
-      const CONFIG22 = getActiveConfig5();
+    var getColor5 = (value, key, config) => {
+      const CONFIG22 = config || getActiveConfig5();
       if (!(0, import_utils82.isString)(value)) {
         if (CONFIG22.verbose)
           console.warn(value, "- type for color is not valid");
@@ -8386,34 +8386,32 @@ var require_cjs10 = __commonJS({
           console.warn(value, " - does not have ", key);
       }
       let rgb = val.rgb;
-      if (rgb) {
-        if (tone) {
-          if (!val[tone]) {
-            const toHex = rgbArrayToHex(rgb.split(", ").map((v) => parseFloat(v)));
-            const abs2 = tone.slice(0, 1);
-            if (abs2 === "-" || abs2 === "+") {
-              rgb = hexToRgbArray(
-                getColorShade(toHex, parseFloat(tone))
-              ).join(", ");
-            } else {
-              const [r, g, b] = [...rgb.split(", ").map((v) => parseInt(v))];
-              const hsl = rgbToHSL(r, g, b);
-              const [h, s, l] = hsl;
-              const newRgb = hslToRgb(h, s, parseFloat(tone) / 100 * 255);
-              rgb = newRgb;
-            }
-            val[tone] = { rgb, var: `${val.var}-${tone}` };
-          } else
-            rgb = val[tone].rgb;
-        }
-        if (alpha)
-          return `rgba(${rgb}, ${alpha})`;
-        return CONFIG22.useVariable ? `var(${val.var})` : `rgb(${rgb})`;
-      } else
+      if (!rgb)
         return CONFIG22.useVariable ? `var(${val.var})` : val.value;
+      if (tone && !val[tone]) {
+        const toHex = rgbArrayToHex(rgb.split(", ").map((v) => parseFloat(v)));
+        const abs2 = tone.slice(0, 1);
+        if (abs2 === "-" || abs2 === "+") {
+          rgb = hexToRgbArray(
+            getColorShade(toHex, parseFloat(tone))
+          ).join(", ");
+        } else {
+          const [r, g, b] = [...rgb.split(", ").map((v) => parseInt(v))];
+          const hsl = rgbToHSL(r, g, b);
+          const [h, s, l] = hsl;
+          const newRgb = hslToRgb(h, s, parseFloat(tone) / 100 * 255);
+          rgb = newRgb;
+        }
+        val[tone] = { rgb, var: `${val.var}-${tone}` };
+      }
+      if (val[tone])
+        rgb = val[tone].rgb;
+      if (alpha)
+        return `rgba(${rgb}, ${alpha})`;
+      return CONFIG22.useVariable ? `var(${val.var})` : `rgb(${rgb})`;
     };
-    var getMediaColor9 = (value, globalTheme) => {
-      const CONFIG22 = getActiveConfig5();
+    var getMediaColor9 = (value, globalTheme, config) => {
+      const CONFIG22 = config || getActiveConfig5();
       if (!globalTheme)
         globalTheme = CONFIG22.globalTheme;
       if (!(0, import_utils82.isString)(value)) {
@@ -8428,16 +8426,16 @@ var require_cjs10 = __commonJS({
       const val = COLOR2[name] || GRADIENT2[name];
       const isObj = (0, import_utils82.isObject)(val);
       if (isObj && val.value)
-        return getColor5(value, `@${globalTheme}`);
+        return getColor5(value, `@${globalTheme}`, config);
       else if (isObj) {
         if (globalTheme)
-          return getColor5(value, `@${globalTheme}`);
+          return getColor5(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] = getColor5(value, mediaName);
+            obj[media] = getColor5(value, mediaName, config);
           }
           return obj;
         }
@@ -8940,7 +8938,7 @@ var require_cjs10 = __commonJS({
         lineHeight: TYPOGRAPHY2.lineHeight
       });
     };
-    var import_globals2 = __toESM2(require_cjs11(), 1);
+    var import_globals2 = __toESM2(require_cjs12(), 1);
     var DEF_OPTIONS = {
       document: import_globals2.document
     };
@@ -9038,7 +9036,7 @@ var require_cjs10 = __commonJS({
             top: "0",
             left: "0",
             margin: "0",
-            WebkitFontSmoothing: "antialiased",
+            WebkitFontSmoothing: "subpixel-antialiased",
             scrollBehavior: "smooth",
             fontSize: TYPOGRAPHY2.browserDefault + "px",
             ...CONFIG22.useDocumentTheme ? getMediaTheme5("document", `@${CONFIG22.globalTheme}`) : {},
@@ -9259,63 +9257,2722 @@ var require_cjs10 = __commonJS({
   }
 });
 
-// index.js
-var domql_exports = {};
-__export(domql_exports, {
-  Animation: () => Animation,
-  Avatar: () => Avatar,
-  AvatarBundle: () => AvatarBundle,
-  Block: () => Block,
-  Box: () => Box,
-  Button: () => Button,
-  ButtonSet: () => ButtonSet,
-  Caption: () => Caption,
-  CircleButton: () => CircleButton,
-  Clickable: () => Clickable,
-  Collection: () => Collection,
-  DatePicker: () => DatePicker,
-  Direction: () => Direction,
-  DropdownList: () => DropdownList,
-  DropdownParent: () => DropdownParent,
-  Field: () => Field,
-  Flex: () => Flex,
-  Focusable: () => Focusable,
-  FocusableComponent: () => FocusableComponent,
-  Form: () => Form,
-  Grid: () => Grid,
-  H1: () => H1,
-  H2: () => H2,
-  H3: () => H3,
-  H4: () => H4,
-  H5: () => H5,
-  H6: () => H6,
-  Hoverable: () => Hoverable,
-  Icon: () => Icon2,
-  IconText: () => IconText2,
-  Iframe: () => Iframe,
-  Img: () => Img,
-  Input: () => Input,
-  Interaction: () => Interaction,
-  Italic: () => Italic,
-  KangorooButton: () => KangorooButton,
-  Label: () => Label,
-  Link: () => Link,
-  List: () => List,
-  Media: () => Media,
-  Notification: () => Notification,
-  Overflow: () => Overflow,
-  P: () => P,
-  Picture: () => Picture,
-  Pills: () => Pills,
-  Position: () => Position,
-  Pseudo: () => Pseudo,
-  Range: () => Range,
-  RangeSlider: () => RangeSlider,
-  RangeWithButtons: () => RangeWithButtons,
-  RouteLink: () => RouteLink,
-  RouterLink: () => RouterLink,
-  Select: () => Select,
-  Shape: () => Shape,
+// Notification/node_modules/@symbo.ls/scratch/dist/cjs/index.js
+var require_cjs11 = __commonJS({
+  "Notification/node_modules/@symbo.ls/scratch/dist/cjs/index.js"(exports, module2) {
+    "use strict";
+    var __create2 = Object.create;
+    var __defProp2 = Object.defineProperty;
+    var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
+    var __getOwnPropNames2 = Object.getOwnPropertyNames;
+    var __getProtoOf2 = Object.getPrototypeOf;
+    var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+    var __commonJS2 = (cb, mod) => function __require() {
+      return mod || (0, cb[__getOwnPropNames2(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+    };
+    var __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: true });
+    };
+    var __copyProps2 = (to, from2, except, desc) => {
+      if (from2 && typeof from2 === "object" || typeof from2 === "function") {
+        for (let key of __getOwnPropNames2(from2))
+          if (!__hasOwnProp2.call(to, key) && key !== except)
+            __defProp2(to, key, { get: () => from2[key], enumerable: !(desc = __getOwnPropDesc2(from2, key)) || desc.enumerable });
+      }
+      return to;
+    };
+    var __toESM2 = (mod, isNodeMode, target) => (target = mod != null ? __create2(__getProtoOf2(mod)) : {}, __copyProps2(
+      // If the importer is in node compatibility mode or this is not an ESM
+      // file that has been converted to a CommonJS file using a Babel-
+      // compatible transform (i.e. "__esModule" has not been set), then set
+      // "default" to the CommonJS "module.exports" for node compatibility.
+      isNodeMode || !mod || !mod.__esModule ? __defProp2(target, "default", { value: mod, enumerable: true }) : target,
+      mod
+    ));
+    var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
+    var require_cjs12 = __commonJS2({
+      "../../node_modules/@domql/globals/dist/cjs/index.js"(exports2, module22) {
+        "use strict";
+        var __defProp22 = Object.defineProperty;
+        var __getOwnPropDesc22 = Object.getOwnPropertyDescriptor;
+        var __getOwnPropNames22 = Object.getOwnPropertyNames;
+        var __hasOwnProp22 = Object.prototype.hasOwnProperty;
+        var __export22 = (target, all) => {
+          for (var name in all)
+            __defProp22(target, name, { get: all[name], enumerable: true });
+        };
+        var __copyProps22 = (to, from2, except, desc) => {
+          if (from2 && typeof from2 === "object" || typeof from2 === "function") {
+            for (let key of __getOwnPropNames22(from2))
+              if (!__hasOwnProp22.call(to, key) && key !== except)
+                __defProp22(to, key, { get: () => from2[key], enumerable: !(desc = __getOwnPropDesc22(from2, key)) || desc.enumerable });
+          }
+          return to;
+        };
+        var __toCommonJS22 = (mod) => __copyProps22(__defProp22({}, "__esModule", { value: true }), mod);
+        var globals_exports = {};
+        __export22(globals_exports, {
+          document: () => document4,
+          global: () => global,
+          self: () => self,
+          window: () => window3
+        });
+        module22.exports = __toCommonJS22(globals_exports);
+        var global = globalThis;
+        var self = globalThis;
+        var window3 = globalThis;
+        var document4 = window3.document;
+      }
+    });
+    var require_cjs22 = __commonJS2({
+      "../../node_modules/@domql/key/dist/cjs/index.js"(exports2, module22) {
+        "use strict";
+        var __defProp22 = Object.defineProperty;
+        var __getOwnPropDesc22 = Object.getOwnPropertyDescriptor;
+        var __getOwnPropNames22 = Object.getOwnPropertyNames;
+        var __hasOwnProp22 = Object.prototype.hasOwnProperty;
+        var __export22 = (target, all) => {
+          for (var name in all)
+            __defProp22(target, name, { get: all[name], enumerable: true });
+        };
+        var __copyProps22 = (to, from2, except, desc) => {
+          if (from2 && typeof from2 === "object" || typeof from2 === "function") {
+            for (let key of __getOwnPropNames22(from2))
+              if (!__hasOwnProp22.call(to, key) && key !== except)
+                __defProp22(to, key, { get: () => from2[key], enumerable: !(desc = __getOwnPropDesc22(from2, key)) || desc.enumerable });
+          }
+          return to;
+        };
+        var __toCommonJS22 = (mod) => __copyProps22(__defProp22({}, "__esModule", { value: true }), mod);
+        var key_exports = {};
+        __export22(key_exports, {
+          createKey: () => createKey,
+          createSnapshotId: () => createSnapshotId
+        });
+        module22.exports = __toCommonJS22(key_exports);
+        var createKey = function() {
+          let index = 0;
+          function newId() {
+            index++;
+            return index;
+          }
+          return newId;
+        }();
+        var createSnapshotId = createKey;
+      }
+    });
+    var require_htmlTags2 = __commonJS2({
+      "../../node_modules/@domql/tags/dist/cjs/htmlTags.js"(exports2, module22) {
+        "use strict";
+        var __defProp22 = Object.defineProperty;
+        var __getOwnPropDesc22 = Object.getOwnPropertyDescriptor;
+        var __getOwnPropNames22 = Object.getOwnPropertyNames;
+        var __hasOwnProp22 = Object.prototype.hasOwnProperty;
+        var __export22 = (target, all) => {
+          for (var name in all)
+            __defProp22(target, name, { get: all[name], enumerable: true });
+        };
+        var __copyProps22 = (to, from2, except, desc) => {
+          if (from2 && typeof from2 === "object" || typeof from2 === "function") {
+            for (let key of __getOwnPropNames22(from2))
+              if (!__hasOwnProp22.call(to, key) && key !== except)
+                __defProp22(to, key, { get: () => from2[key], enumerable: !(desc = __getOwnPropDesc22(from2, key)) || desc.enumerable });
+          }
+          return to;
+        };
+        var __toCommonJS22 = (mod) => __copyProps22(__defProp22({}, "__esModule", { value: true }), mod);
+        var htmlTags_exports = {};
+        __export22(htmlTags_exports, {
+          HTML_TAGS: () => HTML_TAGS
+        });
+        module22.exports = __toCommonJS22(htmlTags_exports);
+        var HTML_TAGS = {
+          root: [
+            "body",
+            "html"
+          ],
+          head: [
+            "title",
+            "base",
+            "meta",
+            "style"
+          ],
+          body: [
+            "string",
+            "fragment",
+            "a",
+            "abbr",
+            "acronym",
+            "address",
+            "applet",
+            "area",
+            "article",
+            "aside",
+            "audio",
+            "b",
+            "basefont",
+            "bdi",
+            "bdo",
+            "big",
+            "blockquote",
+            "br",
+            "button",
+            "canvas",
+            "caption",
+            "center",
+            "cite",
+            "code",
+            "col",
+            "colgroup",
+            "data",
+            "datalist",
+            "dd",
+            "del",
+            "details",
+            "dfn",
+            "dialog",
+            "dir",
+            "div",
+            "dl",
+            "dt",
+            "em",
+            "embed",
+            "fieldset",
+            "figcaption",
+            "figure",
+            "font",
+            "footer",
+            "form",
+            "frame",
+            "frameset",
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "h5",
+            "h6",
+            "head",
+            "header",
+            "hr",
+            "i",
+            "iframe",
+            "img",
+            "input",
+            "ins",
+            "kbd",
+            "label",
+            "legend",
+            "li",
+            "link",
+            "main",
+            "map",
+            "mark",
+            "meter",
+            "nav",
+            "noframes",
+            "noscript",
+            "object",
+            "ol",
+            "optgroup",
+            "option",
+            "output",
+            "p",
+            "param",
+            "picture",
+            "pre",
+            "progress",
+            "q",
+            "rp",
+            "rt",
+            "ruby",
+            "s",
+            "samp",
+            "script",
+            "section",
+            "select",
+            "small",
+            "source",
+            "span",
+            "strike",
+            "strong",
+            "sub",
+            "summary",
+            "sup",
+            "table",
+            "tbody",
+            "td",
+            "template",
+            "textarea",
+            "tfoot",
+            "th",
+            "thead",
+            "time",
+            "tr",
+            "track",
+            "tt",
+            "u",
+            "ul",
+            "var",
+            "video",
+            "wbr",
+            // SVG
+            "svg",
+            "path"
+          ]
+        };
+      }
+    });
+    var require_cjs32 = __commonJS2({
+      "../../node_modules/@domql/tags/dist/cjs/index.js"(exports2, module22) {
+        "use strict";
+        var __defProp22 = Object.defineProperty;
+        var __getOwnPropDesc22 = Object.getOwnPropertyDescriptor;
+        var __getOwnPropNames22 = Object.getOwnPropertyNames;
+        var __hasOwnProp22 = Object.prototype.hasOwnProperty;
+        var __copyProps22 = (to, from2, except, desc) => {
+          if (from2 && typeof from2 === "object" || typeof from2 === "function") {
+            for (let key of __getOwnPropNames22(from2))
+              if (!__hasOwnProp22.call(to, key) && key !== except)
+                __defProp22(to, key, { get: () => from2[key], enumerable: !(desc = __getOwnPropDesc22(from2, key)) || desc.enumerable });
+          }
+          return to;
+        };
+        var __reExport = (target, mod, secondTarget) => (__copyProps22(target, mod, "default"), secondTarget && __copyProps22(secondTarget, mod, "default"));
+        var __toCommonJS22 = (mod) => __copyProps22(__defProp22({}, "__esModule", { value: true }), mod);
+        var tags_exports = {};
+        module22.exports = __toCommonJS22(tags_exports);
+        __reExport(tags_exports, require_htmlTags2(), module22.exports);
+      }
+    });
+    var require_node2 = __commonJS2({
+      "../../node_modules/@domql/utils/dist/cjs/node.js"(exports2, module22) {
+        "use strict";
+        var __defProp22 = Object.defineProperty;
+        var __getOwnPropDesc22 = Object.getOwnPropertyDescriptor;
+        var __getOwnPropNames22 = Object.getOwnPropertyNames;
+        var __hasOwnProp22 = Object.prototype.hasOwnProperty;
+        var __export22 = (target, all) => {
+          for (var name in all)
+            __defProp22(target, name, { get: all[name], enumerable: true });
+        };
+        var __copyProps22 = (to, from2, except, desc) => {
+          if (from2 && typeof from2 === "object" || typeof from2 === "function") {
+            for (let key of __getOwnPropNames22(from2))
+              if (!__hasOwnProp22.call(to, key) && key !== except)
+                __defProp22(to, key, { get: () => from2[key], enumerable: !(desc = __getOwnPropDesc22(from2, key)) || desc.enumerable });
+          }
+          return to;
+        };
+        var __toCommonJS22 = (mod) => __copyProps22(__defProp22({}, "__esModule", { value: true }), mod);
+        var node_exports = {};
+        __export22(node_exports, {
+          isHtmlElement: () => isHtmlElement,
+          isNode: () => isNode
+        });
+        module22.exports = __toCommonJS22(node_exports);
+        var import_globals3 = require_cjs12();
+        var isNode = (obj) => {
+          return (typeof Node === "object" ? obj instanceof import_globals3.window.Node : obj && typeof obj === "object" && typeof obj.nodeType === "number" && typeof obj.nodeName === "string") || false;
+        };
+        var isHtmlElement = (obj) => {
+          return (typeof HTMLElement === "object" ? obj instanceof import_globals3.window.HTMLElement : obj && typeof obj === "object" && obj !== null && obj.nodeType === 1 && typeof obj.nodeName === "string") || false;
+        };
+      }
+    });
+    var require_types2 = __commonJS2({
+      "../../node_modules/@domql/utils/dist/cjs/types.js"(exports2, module22) {
+        "use strict";
+        var __defProp22 = Object.defineProperty;
+        var __getOwnPropDesc22 = Object.getOwnPropertyDescriptor;
+        var __getOwnPropNames22 = Object.getOwnPropertyNames;
+        var __hasOwnProp22 = Object.prototype.hasOwnProperty;
+        var __export22 = (target, all) => {
+          for (var name in all)
+            __defProp22(target, name, { get: all[name], enumerable: true });
+        };
+        var __copyProps22 = (to, from2, except, desc) => {
+          if (from2 && typeof from2 === "object" || typeof from2 === "function") {
+            for (let key of __getOwnPropNames22(from2))
+              if (!__hasOwnProp22.call(to, key) && key !== except)
+                __defProp22(to, key, { get: () => from2[key], enumerable: !(desc = __getOwnPropDesc22(from2, key)) || desc.enumerable });
+          }
+          return to;
+        };
+        var __toCommonJS22 = (mod) => __copyProps22(__defProp22({}, "__esModule", { value: true }), mod);
+        var types_exports = {};
+        __export22(types_exports, {
+          TYPES: () => TYPES,
+          is: () => is2,
+          isArray: () => isArray52,
+          isBoolean: () => isBoolean,
+          isDefined: () => isDefined2,
+          isFunction: () => isFunction22,
+          isNot: () => isNot5,
+          isNull: () => isNull,
+          isNumber: () => isNumber,
+          isObject: () => isObject72,
+          isObjectLike: () => isObjectLike32,
+          isString: () => isString8,
+          isUndefined: () => isUndefined2,
+          isValidHtmlTag: () => isValidHtmlTag
+        });
+        module22.exports = __toCommonJS22(types_exports);
+        var import_tags = require_cjs32();
+        var import_node = require_node2();
+        var isValidHtmlTag = (arg) => import_tags.HTML_TAGS.body.includes(arg);
+        var isObject72 = (arg) => {
+          if (arg === null)
+            return false;
+          return typeof arg === "object" && arg.constructor === Object;
+        };
+        var isString8 = (arg) => typeof arg === "string";
+        var isNumber = (arg) => typeof arg === "number";
+        var isFunction22 = (arg) => typeof arg === "function";
+        var isBoolean = (arg) => arg === true || arg === false;
+        var isNull = (arg) => arg === null;
+        var isArray52 = (arg) => Array.isArray(arg);
+        var isObjectLike32 = (arg) => {
+          if (arg === null)
+            return false;
+          return typeof arg === "object";
+        };
+        var isDefined2 = (arg) => {
+          return isObject72(arg) || isObjectLike32(arg) || isString8(arg) || isNumber(arg) || isFunction22(arg) || isArray52(arg) || isObjectLike32(arg) || isBoolean(arg) || isNull(arg);
+        };
+        var isUndefined2 = (arg) => {
+          return arg === void 0;
+        };
+        var TYPES = {
+          boolean: isBoolean,
+          array: isArray52,
+          object: isObject72,
+          string: isString8,
+          number: isNumber,
+          null: isNull,
+          function: isFunction22,
+          objectLike: isObjectLike32,
+          node: import_node.isNode,
+          htmlElement: import_node.isHtmlElement,
+          defined: isDefined2
+        };
+        var is2 = (arg) => {
+          return (...args) => {
+            return args.map((val) => TYPES[val](arg)).filter((v) => v).length > 0;
+          };
+        };
+        var isNot5 = (arg) => {
+          return (...args) => {
+            return args.map((val) => TYPES[val](arg)).filter((v) => v).length === 0;
+          };
+        };
+      }
+    });
+    var require_object2 = __commonJS2({
+      "../../node_modules/@domql/utils/dist/cjs/object.js"(exports2, module22) {
+        "use strict";
+        var __defProp22 = Object.defineProperty;
+        var __getOwnPropDesc22 = Object.getOwnPropertyDescriptor;
+        var __getOwnPropNames22 = Object.getOwnPropertyNames;
+        var __hasOwnProp22 = Object.prototype.hasOwnProperty;
+        var __export22 = (target, all) => {
+          for (var name in all)
+            __defProp22(target, name, { get: all[name], enumerable: true });
+        };
+        var __copyProps22 = (to, from2, except, desc) => {
+          if (from2 && typeof from2 === "object" || typeof from2 === "function") {
+            for (let key of __getOwnPropNames22(from2))
+              if (!__hasOwnProp22.call(to, key) && key !== except)
+                __defProp22(to, key, { get: () => from2[key], enumerable: !(desc = __getOwnPropDesc22(from2, key)) || desc.enumerable });
+          }
+          return to;
+        };
+        var __toCommonJS22 = (mod) => __copyProps22(__defProp22({}, "__esModule", { value: true }), mod);
+        var object_exports = {};
+        __export22(object_exports, {
+          clone: () => clone,
+          deepClone: () => deepClone22,
+          deepCloneExclude: () => deepCloneExclude,
+          deepDestringify: () => deepDestringify,
+          deepMerge: () => deepMerge3,
+          deepStringify: () => deepStringify,
+          detachFunctionsFromObject: () => detachFunctionsFromObject,
+          diff: () => diff5,
+          diffArrays: () => diffArrays,
+          diffObjects: () => diffObjects,
+          exec: () => exec6,
+          flattenRecursive: () => flattenRecursive,
+          isEqualDeep: () => isEqualDeep,
+          map: () => map,
+          merge: () => merge52,
+          mergeAndCloneIfArray: () => mergeAndCloneIfArray2,
+          mergeArray: () => mergeArray2,
+          mergeArrayExclude: () => mergeArrayExclude2,
+          mergeIfExisted: () => mergeIfExisted,
+          overwrite: () => overwrite,
+          overwriteDeep: () => overwriteDeep2,
+          overwriteObj: () => overwriteObj,
+          removeFromObject: () => removeFromObject2
+        });
+        module22.exports = __toCommonJS22(object_exports);
+        var import_globals3 = require_cjs12();
+        var import_types = require_types2();
+        var exec6 = (param, element, state, context) => {
+          if ((0, import_types.isFunction)(param)) {
+            return param(
+              element,
+              state || element.state,
+              context || element.context
+            );
+          }
+          return param;
+        };
+        var map = (obj, extention, element) => {
+          for (const e2 in extention) {
+            obj[e2] = exec6(extention[e2], element);
+          }
+        };
+        var merge52 = (element, obj) => {
+          for (const e2 in obj) {
+            const elementProp = element[e2];
+            const objProp = obj[e2];
+            if (elementProp === void 0) {
+              element[e2] = objProp;
+            }
+          }
+          return element;
+        };
+        var deepMerge3 = (element, extend) => {
+          for (const e2 in extend) {
+            const elementProp = element[e2];
+            const extendProp = extend[e2];
+            if (e2 === "parent" || e2 === "props")
+              continue;
+            if ((0, import_types.isObjectLike)(elementProp) && (0, import_types.isObjectLike)(extendProp)) {
+              deepMerge3(elementProp, extendProp);
+            } else if (elementProp === void 0) {
+              element[e2] = extendProp;
+            }
+          }
+          return element;
+        };
+        var clone = (obj) => {
+          const o = {};
+          for (const prop in obj) {
+            if (prop === "node")
+              continue;
+            o[prop] = obj[prop];
+          }
+          return o;
+        };
+        var deepCloneExclude = (obj, exclude = []) => {
+          if ((0, import_types.isArray)(obj)) {
+            return obj.map((x) => deepCloneExclude(x, exclude));
+          }
+          const o = {};
+          for (const k in obj) {
+            if (exclude.indexOf(k) > -1)
+              continue;
+            let v = obj[k];
+            if (k === "extend" && (0, import_types.isArray)(v)) {
+              v = mergeArrayExclude2(v, exclude);
+            }
+            if ((0, import_types.isArray)(v)) {
+              o[k] = v.map((x) => deepCloneExclude(x, exclude));
+            } else if ((0, import_types.isObject)(v)) {
+              o[k] = deepCloneExclude(v, exclude);
+            } else
+              o[k] = v;
+          }
+          return o;
+        };
+        var mergeArrayExclude2 = (arr, excl = []) => {
+          return arr.reduce((acc, curr) => deepMerge3(acc, deepCloneExclude(curr, excl)), {});
+        };
+        var deepClone22 = (obj) => {
+          if ((0, import_types.isArray)(obj)) {
+            return obj.map(deepClone22);
+          }
+          const o = {};
+          for (const prop in obj) {
+            let objProp = obj[prop];
+            if (prop === "extend" && (0, import_types.isArray)(objProp)) {
+              objProp = mergeArray2(objProp);
+            }
+            if ((0, import_types.isArray)(objProp)) {
+              o[prop] = objProp.map((v) => (0, import_types.isObject)(v) ? deepClone22(v) : v);
+            } else if ((0, import_types.isObject)(objProp)) {
+              o[prop] = deepClone22(objProp);
+            } else
+              o[prop] = objProp;
+          }
+          return o;
+        };
+        var deepStringify = (obj, stringified = {}) => {
+          for (const prop in obj) {
+            const objProp = obj[prop];
+            if ((0, import_types.isFunction)(objProp)) {
+              stringified[prop] = objProp.toString();
+            } else if ((0, import_types.isObject)(objProp)) {
+              stringified[prop] = {};
+              deepStringify(objProp, stringified[prop]);
+            } else if ((0, import_types.isArray)(objProp)) {
+              stringified[prop] = [];
+              objProp.forEach((v, i) => {
+                if ((0, import_types.isObject)(v)) {
+                  stringified[prop][i] = {};
+                  deepStringify(v, stringified[prop][i]);
+                } else if ((0, import_types.isFunction)(v)) {
+                  stringified[prop][i] = v.toString();
+                } else {
+                  stringified[prop][i] = v;
+                }
+              });
+            } else {
+              stringified[prop] = objProp;
+            }
+          }
+          return stringified;
+        };
+        var detachFunctionsFromObject = (obj, detached = {}) => {
+          for (const prop in obj) {
+            const objProp = obj[prop];
+            if ((0, import_types.isFunction)(objProp))
+              continue;
+            else if ((0, import_types.isObject)(objProp)) {
+              detached[prop] = {};
+              deepStringify(objProp, detached[prop]);
+            } else if ((0, import_types.isArray)(objProp)) {
+              detached[prop] = [];
+              objProp.forEach((v, i) => {
+                if ((0, import_types.isFunction)(v))
+                  return;
+                if ((0, import_types.isObject)(v)) {
+                  detached[prop][i] = {};
+                  detachFunctionsFromObject(v, detached[prop][i]);
+                } else {
+                  detached[prop][i] = v;
+                }
+              });
+            } else {
+              detached[prop] = objProp;
+            }
+          }
+          return detached;
+        };
+        var deepDestringify = (obj, stringified = {}) => {
+          for (const prop in obj) {
+            const objProp = obj[prop];
+            if ((0, import_types.isString)(objProp)) {
+              if (objProp.includes("=>") || objProp.includes("function") || objProp.startsWith("(")) {
+                try {
+                  const evalProp = import_globals3.window.eval(`(${objProp})`);
+                  stringified[prop] = evalProp;
+                } catch (e2) {
+                  if (e2)
+                    stringified[prop] = objProp;
+                }
+              } else {
+                stringified[prop] = objProp;
+              }
+            } else if ((0, import_types.isArray)(objProp)) {
+              stringified[prop] = [];
+              objProp.forEach((arrProp) => {
+                if ((0, import_types.isString)(arrProp)) {
+                  if (arrProp.includes("=>") || arrProp.includes("function") || arrProp.startsWith("(")) {
+                    try {
+                      const evalProp = import_globals3.window.eval(`(${arrProp})`);
+                      stringified[prop].push(evalProp);
+                    } catch (e2) {
+                      if (e2)
+                        stringified[prop].push(arrProp);
+                    }
+                  } else {
+                    stringified[prop].push(arrProp);
+                  }
+                } else if ((0, import_types.isObject)(arrProp)) {
+                  stringified[prop].push(deepDestringify(arrProp));
+                } else {
+                  stringified[prop].push(arrProp);
+                }
+              });
+            } else if ((0, import_types.isObject)(objProp)) {
+              stringified[prop] = deepDestringify(objProp, stringified[prop]);
+            } else {
+              stringified[prop] = objProp;
+            }
+          }
+          return stringified;
+        };
+        var overwrite = (element, params, options) => {
+          const { ref } = element;
+          const changes = {};
+          for (const e2 in params) {
+            if (e2 === "props")
+              continue;
+            const elementProp = element[e2];
+            const paramsProp = params[e2];
+            if (paramsProp) {
+              ref.__cache[e2] = changes[e2] = elementProp;
+              ref[e2] = paramsProp;
+            }
+          }
+          return changes;
+        };
+        var diffObjects = (original, objToDiff, cache) => {
+          for (const e2 in objToDiff) {
+            if (e2 === "ref")
+              continue;
+            const originalProp = original[e2];
+            const objToDiffProp = objToDiff[e2];
+            if ((0, import_types.isObject)(originalProp) && (0, import_types.isObject)(objToDiffProp)) {
+              cache[e2] = {};
+              diff5(originalProp, objToDiffProp, cache[e2]);
+            } else if (objToDiffProp !== void 0) {
+              cache[e2] = objToDiffProp;
+            }
+          }
+          return cache;
+        };
+        var diffArrays = (original, objToDiff, cache) => {
+          if (original.length !== objToDiff.length) {
+            cache = objToDiff;
+          } else {
+            const diffArr = [];
+            for (let i = 0; i < original.length; i++) {
+              const diffObj = diff5(original[i], objToDiff[i]);
+              if (Object.keys(diffObj).length > 0) {
+                diffArr.push(diffObj);
+              }
+            }
+            if (diffArr.length > 0) {
+              cache = diffArr;
+            }
+          }
+          return cache;
+        };
+        var diff5 = (original, objToDiff, cache = {}) => {
+          if ((0, import_types.isArray)(original) && (0, import_types.isArray)(objToDiff)) {
+            cache = [];
+            diffArrays(original, objToDiff, cache);
+          } else {
+            diffObjects(original, objToDiff, cache);
+          }
+          return cache;
+        };
+        var overwriteObj = (params, obj) => {
+          const changes = {};
+          for (const e2 in params) {
+            const objProp = obj[e2];
+            const paramsProp = params[e2];
+            if (paramsProp) {
+              obj[e2] = changes[e2] = objProp;
+            }
+          }
+          return changes;
+        };
+        var overwriteDeep2 = (params, obj) => {
+          for (const e2 in params) {
+            const objProp = obj[e2];
+            const paramsProp = params[e2];
+            if ((0, import_types.isObjectLike)(objProp) && (0, import_types.isObjectLike)(paramsProp)) {
+              overwriteDeep2(paramsProp, objProp);
+            } else if (paramsProp !== void 0) {
+              obj[e2] = paramsProp;
+            }
+          }
+          return obj;
+        };
+        var mergeIfExisted = (a, b) => {
+          if ((0, import_types.isObjectLike)(a) && (0, import_types.isObjectLike)(b))
+            return deepMerge3(a, b);
+          return a || b;
+        };
+        var mergeArray2 = (arr) => {
+          return arr.reduce((a, c) => deepMerge3(a, deepClone22(c)), {});
+        };
+        var mergeAndCloneIfArray2 = (obj) => {
+          return (0, import_types.isArray)(obj) ? mergeArray2(obj) : deepClone22(obj);
+        };
+        var flattenRecursive = (param, prop, stack = []) => {
+          const objectized = mergeAndCloneIfArray2(param);
+          stack.push(objectized);
+          const extendOfExtend = objectized[prop];
+          if (extendOfExtend)
+            flattenRecursive(extendOfExtend, prop, stack);
+          delete objectized[prop];
+          return stack;
+        };
+        var isEqualDeep = (param, element) => {
+          if (param === element)
+            return true;
+          if (!param || !element)
+            return false;
+          for (const prop in param) {
+            const paramProp = param[prop];
+            const elementProp = element[prop];
+            if ((0, import_types.isObjectLike)(paramProp)) {
+              const isEqual = isEqualDeep(paramProp, elementProp);
+              if (!isEqual)
+                return false;
+            } else {
+              const isEqual = paramProp === elementProp;
+              if (!isEqual)
+                return false;
+            }
+          }
+          return true;
+        };
+        var removeFromObject2 = (obj, props3) => {
+          if (props3 === void 0 || props3 === null)
+            return obj;
+          if ((0, import_types.is)(props3)("string", "number")) {
+            delete obj[props3];
+          } else if ((0, import_types.isArray)(props3)) {
+            props3.forEach((prop) => delete obj[prop]);
+          } else {
+            throw new Error("Invalid input: props must be a string or an array of strings");
+          }
+          return obj;
+        };
+      }
+    });
+    var require_function2 = __commonJS2({
+      "../../node_modules/@domql/utils/dist/cjs/function.js"(exports2, module22) {
+        "use strict";
+        var __defProp22 = Object.defineProperty;
+        var __getOwnPropDesc22 = Object.getOwnPropertyDescriptor;
+        var __getOwnPropNames22 = Object.getOwnPropertyNames;
+        var __hasOwnProp22 = Object.prototype.hasOwnProperty;
+        var __export22 = (target, all) => {
+          for (var name in all)
+            __defProp22(target, name, { get: all[name], enumerable: true });
+        };
+        var __copyProps22 = (to, from2, except, desc) => {
+          if (from2 && typeof from2 === "object" || typeof from2 === "function") {
+            for (let key of __getOwnPropNames22(from2))
+              if (!__hasOwnProp22.call(to, key) && key !== except)
+                __defProp22(to, key, { get: () => from2[key], enumerable: !(desc = __getOwnPropDesc22(from2, key)) || desc.enumerable });
+          }
+          return to;
+        };
+        var __toCommonJS22 = (mod) => __copyProps22(__defProp22({}, "__esModule", { value: true }), mod);
+        var function_exports = {};
+        __export22(function_exports, {
+          debounce: () => debounce,
+          memoize: () => memoize2
+        });
+        module22.exports = __toCommonJS22(function_exports);
+        var debounce = (element, func, timeout = 300) => {
+          let timer;
+          return (...args) => {
+            clearTimeout(timer);
+            timer = setTimeout(() => {
+              func.apply(element, args);
+            }, timeout);
+          };
+        };
+        var memoize2 = (fn) => {
+          const cache = {};
+          return (...args) => {
+            const n = args[0];
+            if (n in cache) {
+              return cache[n];
+            } else {
+              const result = fn(n);
+              cache[n] = result;
+              return result;
+            }
+          };
+        };
+      }
+    });
+    var require_array2 = __commonJS2({
+      "../../node_modules/@domql/utils/dist/cjs/array.js"(exports2, module22) {
+        "use strict";
+        var __defProp22 = Object.defineProperty;
+        var __getOwnPropDesc22 = Object.getOwnPropertyDescriptor;
+        var __getOwnPropNames22 = Object.getOwnPropertyNames;
+        var __hasOwnProp22 = Object.prototype.hasOwnProperty;
+        var __export22 = (target, all) => {
+          for (var name in all)
+            __defProp22(target, name, { get: all[name], enumerable: true });
+        };
+        var __copyProps22 = (to, from2, except, desc) => {
+          if (from2 && typeof from2 === "object" || typeof from2 === "function") {
+            for (let key of __getOwnPropNames22(from2))
+              if (!__hasOwnProp22.call(to, key) && key !== except)
+                __defProp22(to, key, { get: () => from2[key], enumerable: !(desc = __getOwnPropDesc22(from2, key)) || desc.enumerable });
+          }
+          return to;
+        };
+        var __toCommonJS22 = (mod) => __copyProps22(__defProp22({}, "__esModule", { value: true }), mod);
+        var array_exports = {};
+        __export22(array_exports, {
+          arrayContainsOtherArray: () => arrayContainsOtherArray2,
+          joinArrays: () => joinArrays,
+          removeFromArray: () => removeFromArray2,
+          swapItemsInArray: () => swapItemsInArray
+        });
+        module22.exports = __toCommonJS22(array_exports);
+        var import_types = require_types2();
+        var arrayContainsOtherArray2 = (arr1, arr2) => {
+          return arr2.every((val) => arr1.includes(val));
+        };
+        var removeFromArray2 = (arr, index) => {
+          if ((0, import_types.isString)(index))
+            index = parseInt(index);
+          if ((0, import_types.isNumber)(index)) {
+            if (index < 0 || index >= arr.length || isNaN(index)) {
+              throw new Error("Invalid index");
+            }
+            arr.splice(index, 1);
+          } else if ((0, import_types.isArray)(index)) {
+            index.forEach((idx) => removeFromArray2(arr, idx));
+          } else {
+            throw new Error("Invalid index");
+          }
+          return arr;
+        };
+        var swapItemsInArray = (arr, i, j) => {
+          [arr[i], arr[j]] = [arr[j], arr[i]];
+        };
+        var joinArrays = (...arrays) => {
+          return [].concat(...arrays);
+        };
+      }
+    });
+    var require_log2 = __commonJS2({
+      "../../node_modules/@domql/utils/dist/cjs/log.js"(exports2, module22) {
+        "use strict";
+        var __defProp22 = Object.defineProperty;
+        var __getOwnPropDesc22 = Object.getOwnPropertyDescriptor;
+        var __getOwnPropNames22 = Object.getOwnPropertyNames;
+        var __hasOwnProp22 = Object.prototype.hasOwnProperty;
+        var __export22 = (target, all) => {
+          for (var name in all)
+            __defProp22(target, name, { get: all[name], enumerable: true });
+        };
+        var __copyProps22 = (to, from2, except, desc) => {
+          if (from2 && typeof from2 === "object" || typeof from2 === "function") {
+            for (let key of __getOwnPropNames22(from2))
+              if (!__hasOwnProp22.call(to, key) && key !== except)
+                __defProp22(to, key, { get: () => from2[key], enumerable: !(desc = __getOwnPropDesc22(from2, key)) || desc.enumerable });
+          }
+          return to;
+        };
+        var __toCommonJS22 = (mod) => __copyProps22(__defProp22({}, "__esModule", { value: true }), mod);
+        var log_exports = {};
+        __export22(log_exports, {
+          logGroupIf: () => logGroupIf,
+          logIf: () => logIf
+        });
+        module22.exports = __toCommonJS22(log_exports);
+        var logIf = (bool, ...arg) => {
+          if (bool)
+            arg.map((v) => console.log(v));
+        };
+        var logGroupIf = (bool, key, ...arg) => {
+          if (bool) {
+            console.group(key);
+            arg.map((v) => console.log(v));
+            console.groupEnd(key);
+          }
+        };
+      }
+    });
+    var require_cjs42 = __commonJS2({
+      "../../node_modules/@domql/utils/dist/cjs/index.js"(exports2, module22) {
+        "use strict";
+        var __defProp22 = Object.defineProperty;
+        var __getOwnPropDesc22 = Object.getOwnPropertyDescriptor;
+        var __getOwnPropNames22 = Object.getOwnPropertyNames;
+        var __hasOwnProp22 = Object.prototype.hasOwnProperty;
+        var __copyProps22 = (to, from2, except, desc) => {
+          if (from2 && typeof from2 === "object" || typeof from2 === "function") {
+            for (let key of __getOwnPropNames22(from2))
+              if (!__hasOwnProp22.call(to, key) && key !== except)
+                __defProp22(to, key, { get: () => from2[key], enumerable: !(desc = __getOwnPropDesc22(from2, key)) || desc.enumerable });
+          }
+          return to;
+        };
+        var __reExport = (target, mod, secondTarget) => (__copyProps22(target, mod, "default"), secondTarget && __copyProps22(secondTarget, mod, "default"));
+        var __toCommonJS22 = (mod) => __copyProps22(__defProp22({}, "__esModule", { value: true }), mod);
+        var utils_exports2 = {};
+        module22.exports = __toCommonJS22(utils_exports2);
+        __reExport(utils_exports2, require_cjs22(), module22.exports);
+        __reExport(utils_exports2, require_types2(), module22.exports);
+        __reExport(utils_exports2, require_object2(), module22.exports);
+        __reExport(utils_exports2, require_function2(), module22.exports);
+        __reExport(utils_exports2, require_array2(), module22.exports);
+        __reExport(utils_exports2, require_node2(), module22.exports);
+        __reExport(utils_exports2, require_log2(), module22.exports);
+      }
+    });
+    var src_exports = {};
+    __export2(src_exports, {
+      ANIMATION: () => ANIMATION,
+      BREAKPOINTS: () => BREAKPOINTS,
+      CASES: () => CASES,
+      COLOR: () => COLOR,
+      CONFIG: () => CONFIG5,
+      CSS_VARS: () => CSS_VARS,
+      DEVICES: () => DEVICES,
+      DOCUMENT: () => DOCUMENT,
+      FACTORY: () => FACTORY,
+      FONT: () => FONT,
+      FONT_FACE: () => FONT_FACE,
+      FONT_FAMILY: () => FONT_FAMILY,
+      FONT_FAMILY_TYPES: () => FONT_FAMILY_TYPES,
+      GRADIENT: () => GRADIENT,
+      ICONS: () => ICONS,
+      MEDIA: () => MEDIA,
+      RESET: () => RESET,
+      SEQUENCE: () => SEQUENCE,
+      SPACING: () => SPACING,
+      SVG: () => SVG,
+      SVG_DATA: () => SVG_DATA,
+      THEME: () => THEME,
+      TIMING: () => TIMING,
+      TYPOGRAPHY: () => TYPOGRAPHY,
+      UNIT: () => UNIT,
+      VALUE_TRANSFORMERS: () => VALUE_TRANSFORMERS,
+      activateConfig: () => activateConfig,
+      appendIconsSprite: () => appendIconsSprite,
+      appendSVGSprite: () => appendSVGSprite,
+      applyDocument: () => applyDocument,
+      applyHeadings: () => applyHeadings,
+      applyReset: () => applyReset,
+      applySequenceVars: () => applySequenceVars,
+      applySpacingSequence: () => applySpacingSequence,
+      applyTimingSequence: () => applyTimingSequence,
+      applyTypographySequence: () => applyTypographySequence,
+      changeLightness: () => changeLightness,
+      colorStringToRgbaArray: () => colorStringToRgbaArray,
+      convertSvgToSymbol: () => convertSvgToSymbol,
+      findHeadingLetter: () => findHeadingLetter,
+      findHeadings: () => findHeadings,
+      generateSequence: () => generateSequence,
+      generateSprite: () => generateSprite,
+      generateSubSequence: () => generateSubSequence,
+      getActiveConfig: () => getActiveConfig5,
+      getColor: () => getColor5,
+      getColorShade: () => getColorShade,
+      getDefaultOrFirstKey: () => getDefaultOrFirstKey,
+      getFontFace: () => getFontFace,
+      getFontFaceEach: () => getFontFaceEach,
+      getFontFaceEachString: () => getFontFaceEachString,
+      getFontFaceString: () => getFontFaceString,
+      getFontFamily: () => getFontFamily5,
+      getFontFormat: () => getFontFormat,
+      getFontSizeByKey: () => getFontSizeByKey5,
+      getMediaColor: () => getMediaColor9,
+      getMediaTheme: () => getMediaTheme5,
+      getSequenceValue: () => getSequenceValue,
+      getSequenceValuePropertyPair: () => getSequenceValuePropertyPair,
+      getSpacingBasedOnRatio: () => getSpacingBasedOnRatio13,
+      getSpacingByKey: () => getSpacingByKey9,
+      getTheme: () => getTheme5,
+      getTimingByKey: () => getTimingByKey5,
+      getTimingFunction: () => getTimingFunction9,
+      hexToRgb: () => hexToRgb,
+      hexToRgbArray: () => hexToRgbArray,
+      hexToRgba: () => hexToRgba,
+      hslToRgb: () => hslToRgb,
+      mixTwoColors: () => mixTwoColors,
+      mixTwoRgb: () => mixTwoRgb,
+      mixTwoRgba: () => mixTwoRgba,
+      numToLetterMap: () => numToLetterMap,
+      opacify: () => opacify3,
+      returnSubThemeOrDefault: () => returnSubThemeOrDefault,
+      rgbArrayToHex: () => rgbArrayToHex,
+      rgbToHSL: () => rgbToHSL,
+      rgbToHex: () => rgbToHex,
+      runThroughMedia: () => runThroughMedia,
+      scratchSystem: () => system_exports,
+      scratchUtils: () => utils_exports,
+      set: () => set2,
+      setActiveConfig: () => setActiveConfig,
+      setColor: () => setColor,
+      setCustomFont: () => setCustomFont,
+      setCustomFontMedia: () => setCustomFontMedia,
+      setEach: () => setEach,
+      setFont: () => setFont,
+      setFontFamily: () => setFontFamily,
+      setGradient: () => setGradient,
+      setIcon: () => setIcon,
+      setInCustomFontMedia: () => setInCustomFontMedia,
+      setMediaTheme: () => setMediaTheme,
+      setSVG: () => setSVG,
+      setTheme: () => setTheme,
+      setValue: () => setValue,
+      setVariables: () => setVariables,
+      splitTransition: () => splitTransition5,
+      transformBackgroundImage: () => transformBackgroundImage5,
+      transformBorder: () => transformBorder5,
+      transformDuration: () => transformDuration5,
+      transformShadow: () => transformShadow5,
+      transformTextStroke: () => transformTextStroke5,
+      transformTransition: () => transformTransition,
+      transfromGap: () => transfromGap5
+    });
+    module2.exports = __toCommonJS2(src_exports);
+    var utils_exports = {};
+    __export2(utils_exports, {
+      applySequenceVars: () => applySequenceVars,
+      changeLightness: () => changeLightness,
+      colorStringToRgbaArray: () => colorStringToRgbaArray,
+      convertSvgToSymbol: () => convertSvgToSymbol,
+      findHeadingLetter: () => findHeadingLetter,
+      findHeadings: () => findHeadings,
+      generateSequence: () => generateSequence,
+      generateSprite: () => generateSprite,
+      generateSubSequence: () => generateSubSequence,
+      getColorShade: () => getColorShade,
+      getDefaultOrFirstKey: () => getDefaultOrFirstKey,
+      getFontFace: () => getFontFace,
+      getFontFaceEach: () => getFontFaceEach,
+      getFontFaceEachString: () => getFontFaceEachString,
+      getFontFaceString: () => getFontFaceString,
+      getFontFormat: () => getFontFormat,
+      getSequenceValue: () => getSequenceValue,
+      getSequenceValuePropertyPair: () => getSequenceValuePropertyPair,
+      hexToRgb: () => hexToRgb,
+      hexToRgbArray: () => hexToRgbArray,
+      hexToRgba: () => hexToRgba,
+      hslToRgb: () => hslToRgb,
+      mixTwoColors: () => mixTwoColors,
+      mixTwoRgb: () => mixTwoRgb,
+      mixTwoRgba: () => mixTwoRgba,
+      numToLetterMap: () => numToLetterMap,
+      opacify: () => opacify3,
+      returnSubThemeOrDefault: () => returnSubThemeOrDefault,
+      rgbArrayToHex: () => rgbArrayToHex,
+      rgbToHSL: () => rgbToHSL,
+      rgbToHex: () => rgbToHex,
+      setCustomFont: () => setCustomFont,
+      setCustomFontMedia: () => setCustomFontMedia,
+      setInCustomFontMedia: () => setInCustomFontMedia,
+      setVariables: () => setVariables
+    });
+    var import_globals = __toESM2(require_cjs12(), 1);
+    var ENV = "development";
+    var colorStringToRgbaArray = (color) => {
+      if (color === "")
+        return;
+      if (color.toLowerCase() === "transparent")
+        return [0, 0, 0, 0];
+      if (color[0] === "#") {
+        if (color.length < 7) {
+          color = "#" + color[1] + color[1] + color[2] + color[2] + color[3] + color[3] + (color.length > 4 ? color[4] + color[4] : "");
+        }
+        return [
+          parseInt(color.substr(1, 2), 16),
+          parseInt(color.substr(3, 2), 16),
+          parseInt(color.substr(5, 2), 16),
+          color.length > 7 ? parseInt(color.substr(7, 2), 16) / 255 : 1
+        ];
+      }
+      if (color.indexOf("rgb") === -1) {
+        if (import_globals.document && import_globals.window) {
+          const elem = import_globals.document.body.appendChild(import_globals.document.createElement("fictum"));
+          const flag = "rgb(1, 2, 3)";
+          elem.style.color = flag;
+          if (elem.style.color !== flag)
+            return;
+          elem.style.color = color;
+          if (elem.style.color === flag || elem.style.color === "")
+            return;
+          color = import_globals.window.getComputedStyle(elem).color;
+          import_globals.document.body.removeChild(elem);
+        }
+      }
+      if (color.indexOf("rgb") === 0) {
+        if (color.indexOf("rgba") === -1)
+          color = `${color}, 1`;
+        return color.match(/[\.\d]+/g).map((a) => +a);
+      }
+      return [];
+    };
+    var mixTwoColors = (colorA, colorB, range = 0.5) => {
+      colorA = colorStringToRgbaArray(colorA);
+      colorB = colorStringToRgbaArray(colorB);
+      return mixTwoRgba(colorA, colorB, range);
+    };
+    var hexToRgb = (hex, alpha = 1) => {
+      const [r, g, b] = hex.match(/\w\w/g).map((x) => parseInt(x, 16));
+      return `rgb(${r},${g},${b})`;
+    };
+    var hexToRgbArray = (hex, alpha = 1) => {
+      const [r, g, b] = hex.match(/\w\w/g).map((x) => parseInt(x, 16));
+      return [r, g, b];
+    };
+    var rgbToHex = (r, g, b) => {
+      return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+    };
+    var rgbArrayToHex = ([r, g, b]) => {
+      return ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+    };
+    var hexToRgba = (hex, alpha = 1) => {
+      const [r, g, b] = hex.match(/\w\w/g).map((x) => parseInt(x, 16));
+      return `rgba(${r},${g},${b},${alpha})`;
+    };
+    var mixTwoRgb = (colorA, colorB, range = 0.5) => {
+      const arr = [];
+      for (let i = 0; i < 3; i++) {
+        arr[i] = ~~(colorA[i] + (colorB[i] - colorA[i]) * range);
+      }
+      return `rgb(${arr})`;
+    };
+    var changeLightness = (delta, hsl) => {
+      const [hue, saturation, lightness] = hsl;
+      const newLightness = Math.max(
+        0,
+        Math.min(100, lightness + parseFloat(delta))
+      );
+      return [hue, saturation, newLightness];
+    };
+    var rgbToHSL = (r, g, b) => {
+      const a = Math.max(r, g, b);
+      const n = a - Math.min(r, g, b);
+      const f = 1 - Math.abs(a + a - n - 1);
+      const h = n && (a == r ? (g - b) / n : a == g ? 2 + (b - r) / n : 4 + (r - g) / n);
+      return [60 * (h < 0 ? h + 6 : h), f ? n / f : 0, (a + a - n) / 2];
+    };
+    var hslToRgb = (h, s, l, a = s * Math.min(l, 1 - l), f = (n, k = (n + h / 30) % 12) => l - a * Math.max(
+      Math.min(k - 3, 9 - k, 1),
+      -1
+    )) => [f(0), f(8), f(4)];
+    var getColorShade = (col, amt) => {
+      const num = parseInt(col, 16);
+      let r = (num >> 16) + amt;
+      if (r > 255)
+        r = 255;
+      else if (r < 0)
+        r = 0;
+      let b = (num >> 8 & 255) + amt;
+      if (b > 255)
+        b = 255;
+      else if (b < 0)
+        b = 0;
+      let g = (num & 255) + amt;
+      if (g > 255)
+        g = 255;
+      else if (g < 0)
+        g = 0;
+      return (g | b << 8 | r << 16).toString(16);
+    };
+    var mixTwoRgba = (colorA, colorB, range = 0.5) => {
+      const arr = [];
+      for (let i = 0; i < 4; i++) {
+        const round = i === 3 ? (x) => x : Math.round;
+        arr[i] = round(
+          colorA[i] + (colorB[i] - colorA[i]) * range
+        );
+      }
+      return `rgba(${arr})`;
+    };
+    var opacify3 = (color, opacity) => {
+      const arr = colorStringToRgbaArray(color);
+      if (!arr) {
+        if (ENV === "test" || ENV === "development")
+          console.warn(color + "color is not rgba");
+        return;
+      }
+      arr[3] = opacity;
+      return `rgba(${arr})`;
+    };
+    var returnSubThemeOrDefault = (orig, theme) => {
+      if (!orig)
+        return;
+      if (orig.themes && orig.themes[theme])
+        return orig.themes[theme];
+      if (orig[theme])
+        return [orig, orig[theme]];
+      return orig;
+    };
+    var getDefaultOrFirstKey = (LIBRARY, key) => {
+      if (LIBRARY[key])
+        return LIBRARY[key].value;
+      if (LIBRARY.default)
+        return LIBRARY[LIBRARY.default].value;
+      const hasValue = Object.keys(LIBRARY)[0];
+      return hasValue && LIBRARY[hasValue] && LIBRARY[hasValue].value;
+    };
+    var getFontFormat = (url) => url.split(/[#?]/)[0].split(".").pop().trim();
+    var setInCustomFontMedia = (str) => `@font-face { ${str} }`;
+    var setCustomFont = (name, url, weight) => `
+  font-family: '${name}';
+  font-style: normal;
+  ${weight && `font-weight: ${weight};`}
+  src: url('${url}') format('${getFontFormat(url)}');`;
+    var setCustomFontMedia = (name, url, weight) => `@font-face {
+  ${setCustomFont(name, url, weight)}
+}`;
+    var getFontFaceEach = (name, weights) => {
+      const keys = Object.keys(weights);
+      return keys.map((key) => {
+        const { url, fontWeight } = weights[key];
+        return setCustomFont(name, url, fontWeight);
+      });
+    };
+    var getFontFace = (LIBRARY) => {
+      const keys = Object.keys(LIBRARY);
+      return keys.map((key) => getFontFaceEach(key, LIBRARY[key].value));
+    };
+    var getFontFaceEachString = (name, weights) => {
+      const isArr = weights[0];
+      if (isArr)
+        return getFontFaceEach(name, weights).map(setInCustomFontMedia);
+      return setCustomFontMedia(name, weights.url);
+    };
+    var getFontFaceString = (LIBRARY) => {
+      const keys = Object.keys(LIBRARY);
+      return keys.map((key) => getFontFaceEachString(key, LIBRARY[key].value));
+    };
+    var import_utils42 = __toESM2(require_cjs42(), 1);
+    var import_utils22 = __toESM2(require_cjs42());
+    var import_utils21 = __toESM2(require_cjs42());
+    var toCamelCase = (str) => {
+      return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function(word, index) {
+        return index === 0 ? word.toLowerCase() : word.toUpperCase();
+      }).replaceAll(/\s+/g, "");
+    };
+    var toDashCase = (val) => val.replace(/[A-Z]/g, (match2, offset) => (offset > 0 ? "-" : "") + match2.toLowerCase()).replace(".", "-");
+    var arrayzeValue = (val) => {
+      if ((0, import_utils22.isString)(val))
+        return val.split(" ");
+      if ((0, import_utils22.isObject)(val))
+        return Object.keys(val).map((v) => val[v]);
+      if ((0, import_utils22.isArray)(val))
+        return val;
+    };
+    var import_utils32 = __toESM2(require_cjs42(), 1);
+    var defaultConfig_exports = {};
+    __export2(defaultConfig_exports, {
+      ANIMATION: () => ANIMATION,
+      BREAKPOINTS: () => BREAKPOINTS,
+      CASES: () => CASES,
+      COLOR: () => COLOR,
+      DEVICES: () => DEVICES,
+      DOCUMENT: () => DOCUMENT,
+      FONT: () => FONT,
+      FONT_FACE: () => FONT_FACE,
+      FONT_FAMILY: () => FONT_FAMILY,
+      FONT_FAMILY_TYPES: () => FONT_FAMILY_TYPES,
+      GRADIENT: () => GRADIENT,
+      ICONS: () => ICONS,
+      MEDIA: () => MEDIA,
+      RESET: () => RESET,
+      SEQUENCE: () => SEQUENCE,
+      SPACING: () => SPACING,
+      SVG: () => SVG,
+      SVG_DATA: () => SVG_DATA,
+      THEME: () => THEME,
+      TIMING: () => TIMING,
+      TYPOGRAPHY: () => TYPOGRAPHY,
+      UNIT: () => UNIT
+    });
+    var SEQUENCE = {
+      "minor-second": 1.067,
+      "major-second": 1.125,
+      "minor-third": 1.2,
+      "major-third": 1.25,
+      "perfect-fourth": 1.333,
+      "augmented-fourth": 1.414,
+      "perfect-fifth": 1.5,
+      "minor-sixth": 1.6,
+      phi: 1.618,
+      // golden-ratio
+      "major-sixth": 1.667,
+      "square-root-3": 1.732,
+      // theodorus
+      "minor-seventh": 1.778,
+      "major-seventh": 1.875,
+      octave: 2,
+      "square-root-5": 2.23,
+      // pythagoras
+      "major-tenth": 2.5,
+      "major-eleventh": 2.667,
+      "major-twelfth": 3,
+      pi: 3.14,
+      // archimedes
+      "double-octave": 4
+    };
+    var UNIT = {
+      default: "em"
+    };
+    var defaultProps = {
+      browserDefault: 16,
+      base: 16,
+      type: "font-size",
+      ratio: SEQUENCE["minor-third"],
+      range: [-3, 12],
+      h1Matches: 6,
+      lineHeight: 1.5,
+      unit: "em",
+      templates: {},
+      sequence: {},
+      scales: {},
+      vars: {}
+    };
+    var TYPOGRAPHY = defaultProps;
+    var FONT = {};
+    var FONT_FAMILY = {};
+    var FONT_FAMILY_TYPES = {
+      "sans-serif": "Helvetica, Arial, sans-serif, --system-default",
+      serif: "Times New Roman, Georgia, serif, --system-default",
+      monospace: "Courier New, monospace, --system-default"
+    };
+    var FONT_FACE = {};
+    var MEDIA = {
+      tv: "(min-width: 2780px)",
+      screenL: "(max-width: 1920px)",
+      "screenL<": "(min-width: 1920px)",
+      screenM: "(max-width: 1680px)",
+      "screenM<": "(min-width: 1680px)",
+      screenS: "(max-width: 1440px)",
+      "screenS<": "(min-width: 1440px)",
+      tabletL: "(max-width: 1366px)",
+      "tabletL<": "(min-width: 1366px)",
+      tabletM: "(max-width: 1280px)",
+      "tabletM<": "(min-width: 1280px)",
+      tabletS: "(max-width: 1024px)",
+      "tabletS<": "(min-width: 1024px)",
+      mobileL: "(max-width: 768px)",
+      "mobileL<": "(min-width: 768px)",
+      mobileM: "(max-width: 560px)",
+      "mobileM<": "(min-width: 560px)",
+      mobileS: "(max-width: 480px)",
+      "mobileS<": "(min-width: 480px)",
+      mobileXS: "(max-width: 375px)",
+      "mobileXS<": "(min-width: 375px)",
+      light: "(prefers-color-scheme: light)",
+      dark: "(prefers-color-scheme: dark)",
+      print: "print"
+    };
+    var defaultProps2 = {
+      base: TYPOGRAPHY.base,
+      type: "spacing",
+      ratio: SEQUENCE.phi,
+      range: [-5, 15],
+      subSequence: true,
+      unit: "em",
+      sequence: {},
+      scales: {},
+      vars: {}
+    };
+    var SPACING = defaultProps2;
+    var COLOR = {};
+    var GRADIENT = {};
+    var THEME = {};
+    var ICONS = {};
+    var defaultProps3 = {
+      default: 150,
+      base: 150,
+      type: "timing",
+      ratio: SEQUENCE["perfect-fourth"],
+      range: [-3, 12],
+      unit: "ms",
+      sequence: {},
+      scales: {},
+      vars: {}
+    };
+    var TIMING = defaultProps3;
+    var DOCUMENT = {};
+    var BREAKPOINTS = {
+      screenL: 1920,
+      screenM: 1680,
+      screenS: 1440,
+      tabletL: 1366,
+      tabletM: 1280,
+      tabletS: 1024,
+      mobileL: 768,
+      mobileM: 560,
+      mobileS: 480,
+      mobileXS: 375
+    };
+    var DEVICES = {
+      screenL: [1920, 1024],
+      screenM: [1680, 1024],
+      screenS: [1440, 978],
+      tabletL: [1366, 926],
+      tabletM: [1280, 768],
+      tabletS: [1024, 768],
+      mobileL: [768, 375],
+      mobileM: [560, 768],
+      mobileS: [480, 768],
+      mobileXS: [375, 768]
+    };
+    var CASES = {};
+    var ANIMATION = {};
+    var SVG = {};
+    var SVG_DATA = {};
+    var RESET = {};
+    var CSS_VARS = {};
+    var CONFIG5 = {
+      verbose: false,
+      useVariable: true,
+      useReset: true,
+      CSS_VARS,
+      ...defaultConfig_exports
+    };
+    var cachedConfig = (0, import_utils32.deepClone)(CONFIG5);
+    var FACTORY = {
+      active: "0",
+      0: CONFIG5
+    };
+    var activateConfig = (def) => {
+      if ((0, import_utils32.isDefined)(def)) {
+        FACTORY.active = def;
+      }
+      return FACTORY[def || FACTORY.active];
+    };
+    var getActiveConfig5 = (def) => {
+      return FACTORY[def || FACTORY.active];
+    };
+    var setActiveConfig = (newConfig) => {
+      if (!(0, import_utils32.isObject)(newConfig))
+        return;
+      FACTORY.active = "1";
+      FACTORY["1"] = (0, import_utils32.deepMerge)(newConfig, (0, import_utils32.deepClone)(cachedConfig));
+      return newConfig;
+    };
+    var numToLetterMap = {
+      "-6": "U",
+      "-5": "V",
+      "-4": "W",
+      "-3": "X",
+      "-2": "Y",
+      "-1": "Z",
+      0: "A",
+      1: "B",
+      2: "C",
+      3: "D",
+      4: "E",
+      5: "F",
+      6: "G",
+      7: "H",
+      8: "I",
+      9: "J",
+      10: "K",
+      11: "L",
+      12: "M",
+      13: "N",
+      14: "O",
+      15: "P",
+      16: "Q",
+      17: "R",
+      18: "S",
+      19: "T"
+    };
+    var setSequenceValue = (props3, sequenceProps) => {
+      const { key, variable, value, scaling, index } = props3;
+      sequenceProps.sequence[key] = {
+        key,
+        decimal: ~~(value * 100) / 100,
+        val: ~~value,
+        scaling,
+        index,
+        variable
+      };
+      sequenceProps.scales[key] = scaling;
+      sequenceProps.vars[variable] = scaling + sequenceProps.unit;
+    };
+    var generateSubSequence = (props3, sequenceProps) => {
+      const { key, base, value, ratio, variable, index } = props3;
+      const next2 = value * ratio;
+      const diff5 = next2 - value;
+      const smallscale = diff5 / 1.618;
+      const valueRounded = ~~value;
+      const nextRounded = ~~next2;
+      const diffRounded = nextRounded - valueRounded;
+      let arr = [];
+      const first = next2 - smallscale;
+      const second = value + smallscale;
+      const middle = (first + second) / 2;
+      if (diffRounded > 16)
+        arr = [first, middle, second];
+      else
+        arr = [first, second];
+      arr.map((v, k) => {
+        const scaling = ~~(v / base * 1e3) / 1e3;
+        const newVar = variable + (k + 1);
+        const props22 = {
+          key: key + (k + 1),
+          variable: newVar,
+          value: v,
+          scaling,
+          index: index + (k + 1) / 10
+        };
+        return setSequenceValue(props22, sequenceProps);
+      });
+    };
+    var switchSequenceOnNegative = (key, base, ratio) => {
+      return base * Math.pow(ratio, key);
+    };
+    var generateSequence = (sequenceProps) => {
+      const { type, base, ratio, range, subSequence } = sequenceProps;
+      const n = Math.abs(range[0]) + Math.abs(range[1]);
+      const prefix2 = "--" + (type && type.replace(".", "-")) + "-";
+      for (let i = 0; i <= n; i++) {
+        const key = range[1] - i;
+        const letterKey = numToLetterMap[key];
+        const value = switchSequenceOnNegative(key, base, ratio);
+        const scaling = ~~(value / base * 100) / 100;
+        const variable = prefix2 + letterKey;
+        const props3 = {
+          key: letterKey,
+          variable,
+          value,
+          base,
+          scaling,
+          ratio,
+          index: key
+        };
+        setSequenceValue(props3, sequenceProps);
+        if (subSequence)
+          generateSubSequence(props3, sequenceProps);
+      }
+      return sequenceProps;
+    };
+    var getSequenceValue = (value = "A", sequenceProps) => {
+      const CONFIG22 = getActiveConfig5();
+      const { UNIT: UNIT2 } = CONFIG22;
+      const {
+        sequence,
+        unit = UNIT2.default,
+        useVariable
+      } = sequenceProps;
+      if ((0, import_utils42.isString)(value) && value.slice(0, 2) === "--")
+        return `var(${value})`;
+      const prefix2 = `--${toDashCase(sequenceProps.type.replace(".", "-"))}-`;
+      const startsWithDashOrLetterRegex = /^-?[a-zA-Z]/i;
+      const startsWithDashOrLetter = startsWithDashOrLetterRegex.test(value);
+      if (value === "none" || value === "auto" || value === "unset" || value === "inherit" || value === "fit-content" || value === "min-content" || value === "max-content" || value.includes("calc") || !startsWithDashOrLetter)
+        return value;
+      const letterVal = value.toUpperCase();
+      const isNegative = letterVal.slice(0, 1) === "-" ? "-" : "";
+      let absValue = isNegative ? letterVal.slice(1) : letterVal;
+      let mediaName = "";
+      if (absValue.includes("-")) {
+        mediaName = "-" + absValue.split("-")[1].toLowerCase();
+        absValue = absValue.split("-")[0];
+      }
+      const varValue = (v) => `var(${prefix2}${v}${mediaName})`;
+      if (absValue.includes("+")) {
+        const args = absValue.split("+");
+        const [first, second] = args;
+        const joint = `${varValue(first)} + ${varValue(second)}`;
+        return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
+      } else if (absValue.includes("-")) {
+        const args = absValue.split("-");
+        const [first, second] = args;
+        const joint = `${varValue(first)} - ${varValue(second)}`;
+        return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
+      }
+      if (!sequence[absValue] && absValue.length === 2) {
+        if (CONFIG22.verbose)
+          console.warn(absValue, "- value is not found because `subSequence` is set to false");
+        absValue = absValue.slice(0, 1);
+      }
+      if (useVariable || CONFIG22.useVariable) {
+        const varValue2 = `var(${prefix2}${absValue}${mediaName})`;
+        return isNegative ? `calc(${varValue2} * -1)` : varValue2;
+      }
+      const sequenceItem = sequence ? sequence[absValue] : null;
+      if (!sequenceItem)
+        return console.warn("can't find", sequence, absValue);
+      if (unit === "ms" || unit === "s") {
+        return isNegative + sequenceItem.val + unit;
+      }
+      return isNegative + sequenceItem.scaling + unit;
+    };
+    var getSequenceValuePropertyPair = (value, propertyName, sequenceProps) => {
+      if (typeof value !== "string") {
+        console.warn(propertyName, value, "is not a string");
+        return {};
+      }
+      if (value === "-" || value === "")
+        return {};
+      return { [propertyName]: getSequenceValue(value, sequenceProps) };
+    };
+    var findHeadingLetter = (h1Matches, index) => numToLetterMap[h1Matches - index];
+    var findHeadings = (propertyNames) => {
+      const { h1Matches, sequence } = propertyNames;
+      return new Array(6).fill(null).map((_, i) => {
+        const findLetter = findHeadingLetter(h1Matches, i);
+        return sequence[findLetter];
+      });
+    };
+    var import_utils62 = __toESM2(require_cjs42(), 1);
+    var setVariables = (result, key) => {
+      const CONFIG22 = getActiveConfig5();
+      const { CSS_VARS: CSS_VARS2 } = CONFIG22;
+      if ((0, import_utils62.isObjectLike)(result.value)) {
+      } else {
+        CSS_VARS2[result.var] = result.value;
+      }
+    };
+    var applySequenceVars = (props3, mediaName, options = {}) => {
+      const CONFIG22 = getActiveConfig5();
+      const { UNIT: UNIT2, MEDIA: MEDIA2, TIMING: TIMING2, CSS_VARS: CSS_VARS2 } = CONFIG22;
+      const unit = props3.unit || UNIT2.default;
+      const { sequence, scales } = props3;
+      for (const key in sequence) {
+        const item = sequence[key];
+        const value = (props3.type === TIMING2.type ? sequence[key].val : scales[key]) + unit;
+        if (mediaName) {
+          const query = MEDIA2[mediaName];
+          if (!query) {
+            if (CONFIG22.verbose)
+              console.warn("Can't find query ", query);
+          }
+          let underMediaQuery = CSS_VARS2[`@media ${query}`];
+          if (!underMediaQuery)
+            underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
+          underMediaQuery[item.variable] = `var(${item.variable + "-" + mediaName})`;
+          CSS_VARS2[item.variable + "-" + mediaName] = value;
+        } else {
+          if (options.useDefault === false) {
+            CSS_VARS2[item.variable] = value;
+          } else {
+            CSS_VARS2[item.variable + "-default"] = value;
+            CSS_VARS2[item.variable] = `var(${item.variable + "-default"})`;
+          }
+        }
+      }
+    };
+    var import_utils72 = __toESM2(require_cjs42(), 1);
+    var generateSprite = (icons) => {
+      const CONFIG22 = getActiveConfig5();
+      let sprite = "";
+      for (const key in icons) {
+        if (CONFIG22.__svg_cache[key])
+          continue;
+        else
+          CONFIG22.__svg_cache[key] = true;
+        sprite += icons[key];
+      }
+      return sprite;
+    };
+    var parseRootAttributes = (htmlString) => {
+      if (!(0, import_utils72.isString)(htmlString)) {
+        return console.warn(`parseRootAttributes: ${htmlString} is not a string`);
+      }
+      const match2 = htmlString.match(/<svg\s+(.*?)>/);
+      if (!match2 || !match2[1]) {
+        return {};
+      }
+      const attrString = match2[1];
+      const attrs = attrString.match(/(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gm);
+      return attrs.reduce((acc, attr) => {
+        const [key, value] = attr.split("=");
+        acc[key] = value.replace(/['"]/g, "");
+        return acc;
+      }, {});
+    };
+    var convertSvgToSymbol = (key, code) => {
+      const extractAttrs = parseRootAttributes(code);
+      const { width, height } = extractAttrs;
+      const viewBox = extractAttrs.viewBox || `0 0 ${width || 24} ${height || 24}`;
+      const xmlns = "http://www.w3.org/2000/svg";
+      let symbol = code.replace(
+        "<svg",
+        `<symbol id="${key}" xmlns="${xmlns}" viewBox="${viewBox}"`
+      );
+      symbol = symbol.replace(/width="[^"]*"/, "");
+      symbol = symbol.replace(/height="[^"]*"/, "");
+      symbol = symbol.replace("</svg", "</symbol");
+      return symbol;
+    };
+    var system_exports = {};
+    __export2(system_exports, {
+      appendIconsSprite: () => appendIconsSprite,
+      appendSVGSprite: () => appendSVGSprite,
+      applyDocument: () => applyDocument,
+      applyHeadings: () => applyHeadings,
+      applyReset: () => applyReset,
+      applySpacingSequence: () => applySpacingSequence,
+      applyTimingSequence: () => applyTimingSequence,
+      applyTypographySequence: () => applyTypographySequence,
+      getColor: () => getColor5,
+      getFontFamily: () => getFontFamily5,
+      getFontSizeByKey: () => getFontSizeByKey5,
+      getMediaColor: () => getMediaColor9,
+      getMediaTheme: () => getMediaTheme5,
+      getSpacingBasedOnRatio: () => getSpacingBasedOnRatio13,
+      getSpacingByKey: () => getSpacingByKey9,
+      getTheme: () => getTheme5,
+      getTimingByKey: () => getTimingByKey5,
+      getTimingFunction: () => getTimingFunction9,
+      runThroughMedia: () => runThroughMedia,
+      setColor: () => setColor,
+      setFont: () => setFont,
+      setFontFamily: () => setFontFamily,
+      setGradient: () => setGradient,
+      setIcon: () => setIcon,
+      setMediaTheme: () => setMediaTheme,
+      setSVG: () => setSVG,
+      setTheme: () => setTheme
+    });
+    var import_utils82 = __toESM2(require_cjs42(), 1);
+    var getColor5 = (value, key) => {
+      const CONFIG22 = getActiveConfig5();
+      if (!(0, import_utils82.isString)(value)) {
+        if (CONFIG22.verbose)
+          console.warn(value, "- type for color is not valid");
+        return;
+      }
+      if (value.slice(0, 2) === "--")
+        return `var(${value})`;
+      if (key && value[key])
+        value = value[key];
+      const [name, alpha, tone] = (0, import_utils82.isArray)(value) ? value : value.split(" ");
+      const { COLOR: COLOR2, GRADIENT: GRADIENT2 } = CONFIG22;
+      let val = COLOR2[name] || GRADIENT2[name];
+      if (!val) {
+        if (CONFIG22.verbose)
+          console.warn("Can't find color ", name);
+        return value;
+      }
+      if (key) {
+        if (val[key])
+          val = val[key];
+        else if (CONFIG22.verbose)
+          console.warn(value, " - does not have ", key);
+      }
+      let rgb = val.rgb;
+      if (rgb) {
+        if (tone) {
+          if (!val[tone]) {
+            const toHex = rgbArrayToHex(rgb.split(", ").map((v) => parseFloat(v)));
+            const abs2 = tone.slice(0, 1);
+            if (abs2 === "-" || abs2 === "+") {
+              rgb = hexToRgbArray(
+                getColorShade(toHex, parseFloat(tone))
+              ).join(", ");
+            } else {
+              const [r, g, b] = [...rgb.split(", ").map((v) => parseInt(v))];
+              const hsl = rgbToHSL(r, g, b);
+              const [h, s, l] = hsl;
+              const newRgb = hslToRgb(h, s, parseFloat(tone) / 100 * 255);
+              rgb = newRgb;
+            }
+            val[tone] = { rgb, var: `${val.var}-${tone}` };
+          } else
+            rgb = val[tone].rgb;
+        }
+        if (alpha)
+          return `rgba(${rgb}, ${alpha})`;
+        return CONFIG22.useVariable ? `var(${val.var})` : `rgb(${rgb})`;
+      } else
+        return CONFIG22.useVariable ? `var(${val.var})` : val.value;
+    };
+    var getMediaColor9 = (value, globalTheme) => {
+      const CONFIG22 = getActiveConfig5();
+      if (!globalTheme)
+        globalTheme = CONFIG22.globalTheme;
+      if (!(0, import_utils82.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_utils82.isArray)(value) ? value : value.split(" ");
+      const { COLOR: COLOR2, GRADIENT: GRADIENT2 } = CONFIG22;
+      const val = COLOR2[name] || GRADIENT2[name];
+      const isObj = (0, import_utils82.isObject)(val);
+      if (isObj && val.value)
+        return getColor5(value, `@${globalTheme}`);
+      else if (isObj) {
+        if (globalTheme)
+          return getColor5(value, `@${globalTheme}`);
+        else {
+          const obj = {};
+          for (const mediaName in val) {
+            const query = CONFIG22.MEDIA[mediaName.slice(1)];
+            const media = `@media screen and ${query}`;
+            obj[media] = getColor5(value, mediaName);
+          }
+          return obj;
+        }
+      } else {
+        if (CONFIG22.verbose)
+          console.warn("Can't find color", value);
+        return value;
+      }
+    };
+    var setColor = (val, key, suffix) => {
+      const CONFIG22 = getActiveConfig5();
+      if ((0, import_utils82.isString)(val) && val.slice(0, 2) === "--")
+        val = getColor5(val.slice(2));
+      if ((0, import_utils82.isArray)(val)) {
+        return {
+          "@light": setColor(val[0], key, "light"),
+          "@dark": setColor(val[1], key, "dark")
+        };
+      }
+      if ((0, import_utils82.isObject)(val)) {
+        const obj = {};
+        for (const variant in val)
+          obj[variant] = setColor(val[variant], key, variant.slice(0, 1) === "@" ? variant.slice(1) : variant);
+        return obj;
+      }
+      const CSSVar = `--color-${key}` + (suffix ? `-${suffix}` : "");
+      const [r, g, b, a = 1] = colorStringToRgbaArray(val.value || val);
+      const alpha = parseFloat(a.toFixed(2));
+      const rgb = `${r}, ${g}, ${b}`;
+      const value = `rgba(${rgb}, ${alpha})`;
+      if (CONFIG22.useVariable) {
+        CONFIG22.CSS_VARS[CSSVar] = value;
+      }
+      return {
+        var: CSSVar,
+        rgb,
+        alpha,
+        value
+      };
+    };
+    var setGradient = (val, key, suffix) => {
+      const CONFIG22 = getActiveConfig5();
+      if ((0, import_utils82.isString)(val) && val.slice(0, 2) === "--")
+        val = getColor5(val.slice(2));
+      if ((0, import_utils82.isArray)(val)) {
+        return {
+          "@light": setGradient(val[0], key, "light"),
+          "@dark": setGradient(val[0], key, "dark")
+        };
+      }
+      if ((0, import_utils82.isObject)(val)) {
+        const obj = {};
+        for (const variant in val)
+          obj[variant] = setGradient(val[variant], key, variant.slice(0, 1) === "@" ? variant.slice(1) : variant);
+        return obj;
+      }
+      const CSSVar = `--gradient-${key}` + (suffix ? `-${suffix}` : "");
+      if (CONFIG22.useVariable) {
+        CONFIG22.CSS_VARS[CSSVar] = val.value || val;
+      }
+      return {
+        var: CSSVar,
+        value: val.value || val
+      };
+    };
+    var import_utils102 = __toESM2(require_cjs42(), 1);
+    var setThemeValue = (theme) => {
+      const value = {};
+      const { state, media, helpers, ...rest } = theme;
+      const keys = Object.keys(rest);
+      keys.map((key) => {
+        const conditions = ["color", "Color", "background", "border"];
+        const isColor = conditions.some((k) => key.includes(k));
+        return value[key] = isColor ? getColor5(theme[key]) : theme[key];
+      });
+      return value;
+    };
+    var getThemeValue = (theme) => {
+      if (theme.value)
+        return theme.value;
+      theme.value = setThemeValue(theme);
+      return theme.value;
+    };
+    var getTheme5 = (value, modifier) => {
+      const CONFIG22 = getActiveConfig5();
+      if (CONFIG22.useVariable)
+        return getMediaTheme5(value, modifier);
+      const { THEME: THEME2 } = CONFIG22;
+      if ((0, import_utils102.isString)(value)) {
+        const [theme, subtheme] = value.split(" ");
+        const isOurTheme = THEME2[theme];
+        if (isOurTheme) {
+          if (!subtheme && !modifier)
+            return getThemeValue(isOurTheme);
+          value = [theme, subtheme || modifier];
+        }
+      }
+      if ((0, import_utils102.isObjectLike)(value) && value[1]) {
+        const themeName = value[0];
+        const subThemeName = value[1];
+        const { helpers, media, state } = THEME2[themeName];
+        if (media && media[subThemeName])
+          return getThemeValue(media[subThemeName]);
+        if (helpers && helpers[subThemeName])
+          return getThemeValue(helpers[subThemeName]);
+        if (state && state[subThemeName])
+          return getThemeValue(state[subThemeName]);
+      } else if ((0, import_utils102.isObject)(value))
+        return setThemeValue(value);
+    };
+    var setInverseTheme = (theme, variant, value) => {
+      if ((0, import_utils102.isObject)(variant)) {
+        theme.variants.inverse.value = setThemeValue(variant);
+      } else if (variant === true) {
+        const { color, background } = value;
+        theme.variants.inverse = {
+          value: {
+            color: background,
+            background: color
+          }
+        };
+      }
+    };
+    var setPseudo = (theme, key, variant, themeValue) => {
+      const result = getTheme5(variant);
+      themeValue[`&:${key}`] = result;
+      if ((0, import_utils102.isObject)(variant) && !variant.value)
+        variant.value = result;
+    };
+    var setSelectors = (theme, value) => {
+      const { state } = theme;
+      if (!state)
+        return;
+      const keys = Object.keys(state);
+      keys.map((key) => {
+        const variant = state[key];
+        setPseudo(theme, key, variant, value);
+        return theme;
+      });
+      return theme;
+    };
+    var setPrefersScheme = (theme, key, variant, themeValue) => {
+      const result = getTheme5(variant);
+      themeValue[`@media (prefers-color-scheme: ${key})`] = result;
+      if ((0, import_utils102.isObject)(variant) && !variant.value)
+        variant.value = result;
+    };
+    var setMedia = (theme, value) => {
+      const { media } = theme;
+      if (!media)
+        return;
+      const keys = Object.keys(media);
+      keys.map((key) => {
+        const variant = media[key];
+        if (key === "dark" || key === "light")
+          setPrefersScheme(theme, key, variant, value);
+        if (key === "inverse")
+          setInverseTheme(theme, variant, value);
+        return theme;
+      });
+      return theme;
+    };
+    var setHelpers = (theme, value) => {
+      const CONFIG22 = getActiveConfig5();
+      const { helpers } = theme;
+      if (!helpers)
+        return;
+      const keys = Object.keys(helpers);
+      keys.map((key) => {
+        const helper = helpers[key];
+        if ((0, import_utils102.isString)(helper))
+          helpers[key] = CONFIG22.THEME[helper];
+        else
+          getThemeValue(helpers[key]);
+        return theme;
+      });
+      return theme;
+    };
+    var setTheme = (val, key) => {
+      const CONFIG22 = getActiveConfig5();
+      if (CONFIG22.useVariable)
+        return setMediaTheme(val, key);
+      const { state, media, helpers } = val;
+      const value = setThemeValue(val, key);
+      const CSSvar = `--theme-${key}`;
+      setSelectors(val, value);
+      setMedia(val, value);
+      setHelpers(val, value);
+      return { var: CSSvar, value, state, media, helpers };
+    };
+    var setMediaTheme = (val, key, suffix, prefers) => {
+      const CONFIG22 = getActiveConfig5();
+      const { CSS_VARS: CSS_VARS2 } = CONFIG22;
+      const theme = { value: val };
+      if ((0, import_utils102.isObjectLike)(val)) {
+        for (const param in val) {
+          const symb = param.slice(0, 1);
+          const value = val[param];
+          if (symb === "@" || symb === ":" || symb === ".") {
+            const hasPrefers = symb === "@" && param;
+            theme[param] = setMediaTheme(value, key, param, prefers || hasPrefers);
+          } else {
+            const color = getColor5(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}`;
+            if (CONFIG22.useVariable) {
+              CSS_VARS2[CSSVar] = color;
+              theme[param] = `var(${CSSVar})`;
+            } else {
+              theme[param] = color;
+            }
+            theme[`.${param}`] = { [param]: theme[param] };
+          }
+        }
+        if (theme.background || theme.color || theme.backgroundColor) {
+          theme[".inversed"] = {
+            color: theme.background || theme.backgroundColor,
+            background: theme.color
+          };
+        }
+      }
+      if ((0, import_utils102.isString)(val) && val.slice(0, 2) === "--") {
+        const { THEME: THEME2 } = CONFIG22;
+        const value = THEME2[val.slice(2)];
+        const getReferenced = getMediaTheme5(value, prefers);
+        return getReferenced;
+      }
+      return theme;
+    };
+    var recursiveTheme = (val) => {
+      const CONFIG22 = getActiveConfig5();
+      const obj = {};
+      for (const param in val) {
+        const symb = param.slice(0, 1);
+        if ((0, import_utils102.isObjectLike)(val[param])) {
+          if (symb === "@") {
+            const query = CONFIG22.MEDIA[param.slice(1)];
+            const media = `@media screen and ${query}`;
+            obj[media] = recursiveTheme(val[param]);
+          } else if (symb === ":") {
+            obj[`&${param}`] = recursiveTheme(val[param]);
+          }
+        } else
+          obj[param] = val[param];
+      }
+      return obj;
+    };
+    var findModifierFromArray = (val, modifierArray) => {
+      const currentMod = modifierArray.shift();
+      if (val[currentMod])
+        return findModifierFromArray(val[currentMod], modifierArray);
+      return val;
+    };
+    var findModifier = (val, modifier) => {
+      if ((0, import_utils102.isArray)(modifier))
+        return findModifierFromArray(val, modifier);
+      else if ((0, import_utils102.isString)(modifier) && val[modifier])
+        return val[modifier];
+      else
+        return val;
+    };
+    var getMediaTheme5 = (val, mod) => {
+      const CONFIG22 = getActiveConfig5();
+      if ((0, import_utils102.isString)(val) && val.slice(0, 2) === "--")
+        val = getMediaTheme5(val.slice(2));
+      if (!val || !(0, import_utils102.isString)(val)) {
+        if (CONFIG22.verbose)
+          console.warn(val, "- theme is not string");
+        return;
+      }
+      const [name, ...modifier] = (0, import_utils102.isArray)(val) ? val : val.split(" ");
+      let value = CONFIG22.THEME[name];
+      if (value && (modifier || mod)) {
+        value = findModifier(value, modifier.length ? modifier : mod);
+      }
+      const r = recursiveTheme(value);
+      return r;
+    };
+    var import_utils112 = __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 getFontFamily5 = (key, factory) => {
+      const CONFIG22 = getActiveConfig5();
+      const { FONT_FAMILY: FONT_FAMILY2 } = CONFIG22;
+      return getDefaultOrFirstKey(factory || FONT_FAMILY2, key);
+    };
+    var setFontFamily = (val, key) => {
+      const CONFIG22 = getActiveConfig5();
+      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_utils112.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_utils142 = __toESM2(require_cjs42(), 1);
+    var runThroughMedia = (props3) => {
+      const CONFIG22 = getActiveConfig5();
+      const { TYPOGRAPHY: TYPOGRAPHY2, MEDIA: MEDIA2 } = CONFIG22;
+      for (const prop in props3) {
+        const mediaProps = props3[prop];
+        if (prop.slice(0, 1) === "@") {
+          const { type, base, ratio, range, subSequence, h1Matches, unit } = props3;
+          (0, import_utils142.merge)(mediaProps, {
+            type,
+            base,
+            ratio,
+            range,
+            subSequence,
+            h1Matches,
+            unit,
+            sequence: {},
+            scales: {},
+            templates: {},
+            vars: {}
+          });
+          generateSequence(mediaProps);
+          const mediaName = prop.slice(1);
+          applySequenceVars(mediaProps, mediaName);
+          const query = MEDIA2[mediaName];
+          TYPOGRAPHY2.templates[`@media screen and ${query}`] = {
+            fontSize: mediaProps.base / TYPOGRAPHY2.browserDefault + unit
+          };
+        }
+      }
+    };
+    var applyHeadings = (props3) => {
+      const CONFIG22 = getActiveConfig5();
+      if (props3.h1Matches) {
+        const unit = props3.unit;
+        const HEADINGS = findHeadings(props3);
+        const { templates } = props3;
+        for (const k in HEADINGS) {
+          const headerName = `h${parseInt(k) + 1}`;
+          const headerStyle = templates[headerName];
+          templates[headerName] = {
+            fontSize: CONFIG22.useVariable ? `var(${HEADINGS[k].variable})` : `${HEADINGS[k].scaling}${unit}`,
+            margin: headerStyle ? headerStyle.margin : 0,
+            lineHeight: headerStyle ? headerStyle.lineHeight : props3.lineHeight,
+            letterSpacing: headerStyle ? headerStyle.letterSpacing : props3.letterSpacing,
+            fontWeight: headerStyle ? headerStyle.fontWeight : 900 - k * 100
+          };
+        }
+      }
+    };
+    var applyTypographySequence = () => {
+      const CONFIG22 = getActiveConfig5();
+      const { TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG22;
+      generateSequence(TYPOGRAPHY2);
+      applyHeadings(TYPOGRAPHY2);
+      applySequenceVars(TYPOGRAPHY2);
+      runThroughMedia(TYPOGRAPHY2);
+    };
+    var getFontSizeByKey5 = (value) => {
+      const CONFIG22 = getActiveConfig5();
+      const { TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG22;
+      return getSequenceValuePropertyPair(
+        value,
+        "fontSize",
+        TYPOGRAPHY2
+      );
+    };
+    var import_utils172 = __toESM2(require_cjs42(), 1);
+    var runThroughMedia2 = (sequenceProps) => {
+      for (const prop in sequenceProps) {
+        const mediaProps = sequenceProps[prop];
+        if (prop.slice(0, 1) === "@") {
+          const { type, base, ratio, range, subSequence, h1Matches, unit } = sequenceProps;
+          (0, import_utils172.merge)(mediaProps, {
+            type,
+            base,
+            ratio,
+            range,
+            subSequence,
+            h1Matches,
+            unit,
+            sequence: {},
+            scales: {},
+            templates: {},
+            vars: {}
+          });
+          generateSequence(mediaProps);
+          const mediaName = prop.slice(1);
+          applySequenceVars(mediaProps, mediaName);
+        }
+      }
+    };
+    var applySpacingSequence = () => {
+      const CONFIG22 = getActiveConfig5();
+      const { SPACING: SPACING2 } = CONFIG22;
+      generateSequence(SPACING2);
+      applySequenceVars(SPACING2);
+      runThroughMedia2(SPACING2);
+    };
+    var getSequence = (sequenceProps) => {
+      const CONFIG22 = getActiveConfig5();
+      const { SPACING: SPACING2 } = CONFIG22;
+      if (!sequenceProps)
+        return SPACING2;
+      const hasGenerated = Object.keys(sequenceProps.sequence).length > 0;
+      return hasGenerated ? sequenceProps : generateSequence(sequenceProps);
+    };
+    var getSpacingByKey9 = (value, propertyName = "padding", sequenceProps) => {
+      const sequence = getSequence(sequenceProps);
+      const stack = arrayzeValue(value);
+      if (!stack)
+        return;
+      if ((0, import_utils172.isString)(value) && value.includes("calc")) {
+        return { [propertyName]: value };
+      }
+      if (stack.length > 1) {
+        let suffix = "";
+        if (propertyName === "borderWidth") {
+          propertyName = "border";
+          suffix = "Width";
+        }
+        const directions = {
+          2: ["Block", "Inline"],
+          3: ["BlockStart", "Inline", "BlockEnd"],
+          4: ["BlockStart", "InlineEnd", "BlockEnd", "InlineStart"]
+        };
+        const wrapSequenceValueByDirection = (direction, i) => getSequenceValuePropertyPair(
+          stack[i],
+          propertyName + direction + suffix,
+          sequence
+        );
+        return directions[stack.length].map((dir, key) => wrapSequenceValueByDirection(dir, key));
+      }
+      return getSequenceValuePropertyPair(
+        value,
+        propertyName,
+        sequence
+      );
+    };
+    var getSpacingBasedOnRatio13 = (props3, propertyName, val) => {
+      const CONFIG22 = getActiveConfig5();
+      const { SPACING: SPACING2 } = CONFIG22;
+      const { spacingRatio, unit } = props3;
+      const value = val || props3[propertyName];
+      if (spacingRatio) {
+        let sequenceProps = SPACING2[spacingRatio];
+        if (!sequenceProps) {
+          const { type, base, range, subSequence } = SPACING2;
+          sequenceProps = SPACING2[spacingRatio] = (0, import_utils172.merge)({
+            ratio: spacingRatio,
+            type: type + "-" + spacingRatio,
+            unit,
+            sequence: {},
+            scales: {},
+            templates: {},
+            vars: {}
+          }, {
+            base,
+            range,
+            subSequence,
+            ratio: SPACING2.ratio,
+            unit: SPACING2.unit
+          });
+        }
+        applySequenceVars(sequenceProps, null, { useDefault: false });
+        return getSpacingByKey9(value, propertyName, sequenceProps);
+      }
+      return getSpacingByKey9(value, propertyName);
+    };
+    var applyTimingSequence = () => {
+      const CONFIG22 = getActiveConfig5();
+      const { TIMING: TIMING2 } = CONFIG22;
+      generateSequence(TIMING2);
+      applySequenceVars(TIMING2);
+    };
+    var getTimingFunction9 = (value) => {
+      const CONFIG22 = getActiveConfig5();
+      const { TIMING: TIMING2 } = CONFIG22;
+      return TIMING2[value] || TIMING2[toCamelCase(value)] || value;
+    };
+    var getTimingByKey5 = (value, property = "timing") => {
+      const CONFIG22 = getActiveConfig5();
+      const { TIMING: TIMING2 } = CONFIG22;
+      return getSequenceValuePropertyPair(
+        value,
+        property,
+        TIMING2
+      );
+    };
+    var import_utils212 = __toESM2(require_cjs42(), 1);
+    var applyDocument = () => {
+      const CONFIG22 = getActiveConfig5();
+      const { DOCUMENT: DOCUMENT2, FONT_FAMILY: FONT_FAMILY2, THEME: THEME2, TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG22;
+      return (0, import_utils212.merge)(DOCUMENT2, {
+        theme: THEME2.document,
+        fontFamily: getDefaultOrFirstKey(FONT_FAMILY2),
+        fontSize: TYPOGRAPHY2.base,
+        lineHeight: TYPOGRAPHY2.lineHeight
+      });
+    };
+    var import_globals2 = __toESM2(require_cjs12(), 1);
+    var DEF_OPTIONS = {
+      document: import_globals2.document
+    };
+    var setSVG = (val, key) => {
+      const CONFIG22 = getActiveConfig5();
+      if (!val) {
+        if (CONFIG22.verbose)
+          console.warn("setSVG: val is not defined", key);
+        return;
+      }
+      if (CONFIG22.useSvgSprite) {
+        return convertSvgToSymbol(key, val);
+      }
+      return val;
+    };
+    var appendSVGSprite = (LIBRARY, options = DEF_OPTIONS) => {
+      const CONFIG22 = getActiveConfig5();
+      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 = getActiveConfig5();
+      if (CONFIG22.useIconSprite) {
+        return setSVG(val, key);
+      }
+      return val;
+    };
+    var appendIconsSprite = (LIBRARY, options = DEF_OPTIONS) => {
+      const CONFIG22 = getActiveConfig5();
+      const lib = Object.keys(LIBRARY).length ? {} : CONFIG22.ICONS;
+      for (const key in LIBRARY)
+        lib[key] = CONFIG22.ICONS[key];
+      appendSVG(lib, options);
+    };
+    var createSVGSpriteElement = (options = { isRoot: true }) => {
+      const svgElem = import_globals2.document.createElementNS("http://www.w3.org/2000/svg", "svg");
+      if (options.isRoot) {
+        svgElem.setAttribute("aria-hidden", "true");
+        svgElem.setAttribute("width", "0");
+        svgElem.setAttribute("height", "0");
+        svgElem.setAttribute("style", "position:absolute");
+        svgElem.setAttribute("id", "svgSprite");
+      }
+      return svgElem;
+    };
+    var appendSVG = (lib, options = DEF_OPTIONS) => {
+      const CONFIG22 = getActiveConfig5();
+      const doc = options.document || import_globals2.document;
+      if (!doc) {
+        if (CONFIG22.verbose) {
+          console.warn("To append SVG sprites it should be run in browser environment");
+        }
+        return generateSprite(lib);
+      }
+      const exists = doc.querySelector("#svgSprite");
+      const SVGsprite = generateSprite(lib);
+      if (exists) {
+        const tempSVG = createSVGSpriteElement({ isRoot: false });
+        tempSVG.innerHTML = SVGsprite;
+        exists.append(...tempSVG.children);
+      } else {
+        const svgSpriteDOM = createSVGSpriteElement();
+        svgSpriteDOM.innerHTML = SVGsprite;
+        doc.body.prepend(svgSpriteDOM);
+      }
+    };
+    var import_utils24 = __toESM2(require_cjs42(), 1);
+    var applyReset = (reset = {}) => {
+      const CONFIG22 = getActiveConfig5();
+      const { RESET: RESET2, TYPOGRAPHY: TYPOGRAPHY2, DOCUMENT: DOCUMENT2 } = CONFIG22;
+      if (RESET2) {
+        if (RESET2[":root"]) {
+          const configReset = RESET2;
+          const configTemplates = TYPOGRAPHY2.templates;
+          configReset.body = {
+            ...CONFIG22.useDocumentTheme ? getMediaTheme5("document", `@${CONFIG22.globalTheme}`) : {},
+            ...configTemplates.body
+          };
+          configReset.h1 = configTemplates.h1;
+          configReset.h2 = configTemplates.h2;
+          configReset.h3 = configTemplates.h3;
+          configReset.h4 = configTemplates.h4;
+          configReset.h5 = configTemplates.h5;
+          configReset.h6 = configTemplates.h6;
+        }
+        const { body, ...templates } = TYPOGRAPHY2.templates;
+        return (0, import_utils24.deepMerge)((0, import_utils24.merge)(RESET2, reset), {
+          html: {
+            position: "absolute",
+            // overflow: 'hidden',
+            width: "100%",
+            height: "100%",
+            top: "0",
+            left: "0",
+            margin: "0",
+            WebkitFontSmoothing: "antialiased",
+            scrollBehavior: "smooth",
+            fontSize: TYPOGRAPHY2.browserDefault + "px",
+            ...CONFIG22.useDocumentTheme ? getMediaTheme5("document", `@${CONFIG22.globalTheme}`) : {},
+            fontFamily: DOCUMENT2.fontFamily,
+            lineHeight: DOCUMENT2.lineHeight
+          },
+          body: {
+            boxSizing: "border-box",
+            height: "100%",
+            margin: 0,
+            fontFamily: DOCUMENT2.fontFamily,
+            fontSize: TYPOGRAPHY2.base / TYPOGRAPHY2.browserDefault + CONFIG22.UNIT.default,
+            ...templates,
+            ...body
+          },
+          // form elements
+          fieldset: {
+            border: 0,
+            padding: 0,
+            margin: 0
+          },
+          "select, input": {
+            fontFamily: DOCUMENT2.fontFamily
+          }
+        });
+      }
+    };
+    var import_utils25 = __toESM2(require_cjs42(), 1);
+    var isBorderStyle = (str) => [
+      "none",
+      "hidden",
+      "dotted",
+      "dashed",
+      "solid",
+      "double",
+      "groove",
+      "ridge",
+      "inset",
+      "outset",
+      "initial"
+    ].some((v) => str.includes(v));
+    var transformBorder5 = (border) => {
+      const arr = border.split(", ");
+      return arr.map((v) => {
+        v = v.trim();
+        if (v.slice(0, 2) === "--")
+          return `var(${v})`;
+        else if (isBorderStyle(v))
+          return v || "solid";
+        else if (v.slice(-2) === "px" || v.slice(-2) === "em")
+          return v;
+        else if (getColor5(v).length > 2)
+          return getColor5(v);
+        return getSpacingByKey9(v, "border").border;
+      }).join(" ");
+    };
+    var transformTextStroke5 = (stroke) => {
+      return stroke.split(", ").map((v) => {
+        if (v.slice(0, 2) === "--")
+          return `var(${v})`;
+        if (v.includes("px"))
+          return v;
+        else if (getColor5(v))
+          return getColor5(v);
+        return v;
+      }).join(" ");
+    };
+    var transformShadow5 = (shadows) => shadows.split("|").map((shadow) => {
+      return shadow.split(", ").map((v) => {
+        v = v.trim();
+        if (v.slice(0, 2) === "--")
+          return `var(${v})`;
+        if (getColor5(v).length > 2)
+          return getColor5(v);
+        if (v.includes("px") || v.slice(-2) === "em")
+          return v;
+        const arr = v.split(" ");
+        if (!arr.length)
+          return v;
+        return arr.map((v2) => getSpacingByKey9(v2, "shadow").shadow).join(" ");
+      }).join(" ");
+    }).join(",");
+    var transformBackgroundImage5 = (backgroundImage, globalTheme) => {
+      const CONFIG22 = getActiveConfig5();
+      return backgroundImage.split(", ").map((v) => {
+        if (v.slice(0, 2) === "--")
+          return `var(${v})`;
+        if (v.includes("url") || v.includes("gradient"))
+          return v;
+        else if (CONFIG22.GRADIENT[backgroundImage]) {
+          return {
+            backgroundImage: getMediaColor9(backgroundImage, globalTheme || CONFIG22.globalTheme)
+          };
+        } else if (v.includes("/") || v.includes("http"))
+          return `url(${v})`;
+        return v;
+      }).join(" ");
+    };
+    var transfromGap5 = (gap) => (0, import_utils25.isString)(gap) && gap.split(" ").map((v) => getSpacingByKey9(v, "gap").gap).join(" ");
+    var transformTransition = (transition) => {
+      const arr = transition.split(" ");
+      if (!arr.length)
+        return transition;
+      return arr.map((v) => {
+        if (v.slice(0, 2) === "--")
+          return `var(${v})`;
+        if (v.length < 3 || v.includes("ms")) {
+          const mapWithSequence = getTimingByKey5(v);
+          return mapWithSequence.timing || v;
+        }
+        if (getTimingFunction9(v))
+          return getTimingFunction9(v);
+        return v;
+      }).join(" ");
+    };
+    var transformDuration5 = (duration, props3, propertyName) => {
+      if (!(0, import_utils25.isString)(duration))
+        return;
+      return duration.split(",").map((v) => getTimingByKey5(v).timing || v).join(",");
+    };
+    var splitTransition5 = (transition) => {
+      const arr = transition.split(",");
+      if (!arr.length)
+        return;
+      return arr.map(transformTransition).join(",");
+    };
+    var import_utils26 = __toESM2(require_cjs42(), 1);
+    var setCases = (val, key) => {
+      if ((0, import_utils26.isFunction)(val))
+        return val();
+      return val;
+    };
+    var setSameValue = (val, key) => val;
+    var VALUE_TRANSFORMERS = {
+      color: setColor,
+      gradient: setGradient,
+      font: setFont,
+      font_family: setFontFamily,
+      theme: setTheme,
+      icons: setIcon,
+      svg: setSVG,
+      svg_data: setSameValue,
+      typography: setSameValue,
+      cases: setCases,
+      spacing: setSameValue,
+      media: setSameValue,
+      timing: setSameValue,
+      reset: setSameValue,
+      unit: setSameValue,
+      animation: setSameValue
+    };
+    var setValue = (FACTORY_NAME, value, key) => {
+      const CONFIG22 = getActiveConfig5();
+      const factoryName = FACTORY_NAME.toLowerCase();
+      const FACTORY2 = CONFIG22[FACTORY_NAME];
+      if (VALUE_TRANSFORMERS[factoryName]) {
+        const result = VALUE_TRANSFORMERS[factoryName](value, key);
+        FACTORY2[key] = result;
+        return FACTORY2;
+      }
+      if (CONFIG22.verbose)
+        console.warn("Can not find", factoryName, "method in scratch");
+    };
+    var setEach = (factoryName, props3) => {
+      const CONFIG22 = getActiveConfig5();
+      const FACTORY_NAME = factoryName.toUpperCase();
+      const keys = Object.keys(props3);
+      keys.map((key) => setValue(FACTORY_NAME, props3[key], key));
+      return CONFIG22[FACTORY_NAME];
+    };
+    var SET_OPTIONS = {};
+    var set2 = (recivedConfig, options = SET_OPTIONS) => {
+      let CONFIG22 = getActiveConfig5();
+      const {
+        version,
+        verbose,
+        useVariable,
+        useReset,
+        useSvgSprite,
+        useFontImport,
+        useIconSprite,
+        globalTheme,
+        useDocumentTheme,
+        ...config
+      } = recivedConfig;
+      if (options.newConfig) {
+        CONFIG22 = setActiveConfig(options.newConfig);
+      }
+      if (verbose !== void 0)
+        CONFIG22.verbose = verbose;
+      if (useVariable !== void 0)
+        CONFIG22.useVariable = useVariable;
+      if (useReset !== void 0)
+        CONFIG22.useReset = useReset;
+      if (useFontImport !== void 0)
+        CONFIG22.useFontImport = useFontImport;
+      if (useSvgSprite !== void 0)
+        CONFIG22.useSvgSprite = useSvgSprite;
+      if (useIconSprite !== void 0)
+        CONFIG22.useIconSprite = useIconSprite;
+      if (useDocumentTheme !== void 0)
+        CONFIG22.useDocumentTheme = useDocumentTheme;
+      if (globalTheme !== void 0)
+        CONFIG22.globalTheme = globalTheme;
+      if (CONFIG22.verbose)
+        console.log(CONFIG22);
+      if (!CONFIG22.__svg_cache)
+        CONFIG22.__svg_cache = {};
+      const keys = Object.keys(config);
+      keys.map((key) => setEach(key, config[key]));
+      applyTypographySequence();
+      applySpacingSequence();
+      applyTimingSequence();
+      applyDocument();
+      applyReset();
+      return CONFIG22;
+    };
+  }
+});
+
+// index.js
+var domql_exports = {};
+__export(domql_exports, {
+  Animation: () => Animation,
+  Avatar: () => Avatar,
+  AvatarBundle: () => AvatarBundle,
+  Block: () => Block,
+  Box: () => Box,
+  Button: () => Button,
+  ButtonSet: () => ButtonSet,
+  Caption: () => Caption,
+  CircleButton: () => CircleButton,
+  Clickable: () => Clickable,
+  Collection: () => Collection,
+  DatePicker: () => DatePicker,
+  Direction: () => Direction,
+  DropdownList: () => DropdownList,
+  DropdownParent: () => DropdownParent,
+  Field: () => Field,
+  Flex: () => Flex,
+  Focusable: () => Focusable,
+  FocusableComponent: () => FocusableComponent,
+  Form: () => Form,
+  Grid: () => Grid,
+  H1: () => H1,
+  H2: () => H2,
+  H3: () => H3,
+  H4: () => H4,
+  H5: () => H5,
+  H6: () => H6,
+  Hoverable: () => Hoverable,
+  Icon: () => Icon2,
+  IconText: () => IconText2,
+  Iframe: () => Iframe,
+  Img: () => Img,
+  Input: () => Input,
+  Interaction: () => Interaction,
+  Italic: () => Italic,
+  KangorooButton: () => KangorooButton,
+  Label: () => Label,
+  Link: () => Link,
+  List: () => List,
+  Media: () => Media,
+  Notification: () => Notification,
+  Overflow: () => Overflow,
+  P: () => P,
+  Picture: () => Picture,
+  Pills: () => Pills,
+  Position: () => Position,
+  Pseudo: () => Pseudo,
+  Range: () => Range,
+  RangeSlider: () => RangeSlider,
+  RangeWithButtons: () => RangeWithButtons,
+  RouteLink: () => RouteLink,
+  RouterLink: () => RouterLink,
+  Select: () => Select,
+  Shape: () => Shape,
   Slider: () => Slider,
   Span: () => Span,
   SquareButton: () => SquareButton,
@@ -9994,6 +12651,8 @@ var beforeClassAssign = (element, s) => {
 };
 var initUpdate = (changes, element) => {
   const { props: props3, context, class: className } = element;
+  if (!context)
+    return;
   const globalTheme = context.designSystem.globalTheme;
   const parentProps = element.parent.props;
   if (parentProps && parentProps.spacingRatio && parentProps.inheritSpacingRatio) {
@@ -11739,7 +14398,7 @@ var classnames = function classnames2(args) {
 };
 var emotion_css_create_instance_esm_default = createEmotion;
 
-// ../../packages/emotion/index.js
+// node_modules/@symbo.ls/emotion/index.js
 var createEmotion3 = (key = "smbls", container) => {
   const cleanKey = key.replaceAll(/\./g, "-");
   return emotion_css_create_instance_esm_default({ key: cleanKey, container });
@@ -11901,6 +14560,7 @@ var IconText = {
     if: ({ parent }) => parent.props.icon
   },
   Icon: {
+    props: {},
     if: ({ props: props3 }) => props3.name || props3.icon
   },
   text: ({ props: props3 }) => props3.text
@@ -12394,22 +15054,22 @@ var Input = {
 };
 
 // Field/node_modules/@symbo.ls/atoms/Block.js
-var import_scratch19 = __toESM(require_cjs());
+var import_scratch19 = __toESM(require_cjs10());
 
 // Field/node_modules/@symbo.ls/atoms/Grid.js
-var import_scratch20 = __toESM(require_cjs());
+var import_scratch20 = __toESM(require_cjs10());
 
 // Field/node_modules/@symbo.ls/atoms/Media.js
 var import_utils11 = __toESM(require_cjs5());
 
 // Field/node_modules/@symbo.ls/atoms/Theme.js
-var import_scratch23 = __toESM(require_cjs());
+var import_scratch23 = __toESM(require_cjs10());
 
 // Field/node_modules/@symbo.ls/atoms/Shape/style.js
-var import_scratch22 = __toESM(require_cjs());
+var import_scratch22 = __toESM(require_cjs10());
 
 // Field/node_modules/@symbo.ls/atoms/Timing.js
-var import_scratch21 = __toESM(require_cjs());
+var import_scratch21 = __toESM(require_cjs10());
 
 // Field/node_modules/@symbo.ls/atoms/Shape/style.js
 var CONFIG3 = (0, import_scratch22.getActiveConfig)();
@@ -12442,17 +15102,17 @@ var Focusable2 = {
 var import_utils12 = __toESM(require_cjs5());
 
 // Field/node_modules/@symbo.ls/atoms/Position.js
-var import_scratch24 = __toESM(require_cjs());
+var import_scratch24 = __toESM(require_cjs10());
 
 // Field/node_modules/@symbo.ls/atoms/Shape/index.js
 var import_utils13 = __toESM(require_cjs5());
-var import_scratch25 = __toESM(require_cjs());
+var import_scratch25 = __toESM(require_cjs10());
 
 // Field/node_modules/@symbo.ls/atoms/Text.js
-var import_scratch26 = __toESM(require_cjs());
+var import_scratch26 = __toESM(require_cjs10());
 
 // Field/node_modules/@symbo.ls/atoms/Animation.js
-var import_scratch27 = __toESM(require_cjs());
+var import_scratch27 = __toESM(require_cjs10());
 var import_utils14 = __toESM(require_cjs5());
 
 // Field/node_modules/@symbo.ls/emotion/index.js
@@ -12519,13 +15179,15 @@ var Video = {
 
 // Range/index.js
 var import_utils15 = __toESM(require_cjs5());
-var import_scratch28 = __toESM(require_cjs());
+var import_scratch28 = __toESM(require_cjs10());
 var props = {
   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"
   },
@@ -12649,7 +15311,7 @@ var style_default2 = {
 };
 
 // Slider/index.js
-var import_scratch29 = __toESM(require_cjs());
+var import_scratch29 = __toESM(require_cjs10());
 var import_utils16 = __toESM(require_cjs5());
 (0, import_scratch29.set)({
   theme: {
@@ -12741,7 +15403,7 @@ var Slider = {
 };
 
 // Notification/node_modules/@symbo.ls/atoms/Block.js
-var import_scratch30 = __toESM(require_cjs10());
+var import_scratch30 = __toESM(require_cjs11());
 
 // Notification/node_modules/@symbo.ls/atoms/Flex.js
 var Flex3 = {
@@ -12761,19 +15423,19 @@ var Flex3 = {
 };
 
 // Notification/node_modules/@symbo.ls/atoms/Grid.js
-var import_scratch31 = __toESM(require_cjs10());
+var import_scratch31 = __toESM(require_cjs11());
 
 // Notification/node_modules/@symbo.ls/atoms/Media.js
 var import_utils17 = __toESM(require_cjs5());
 
 // Notification/node_modules/@symbo.ls/atoms/Theme.js
-var import_scratch34 = __toESM(require_cjs10());
+var import_scratch34 = __toESM(require_cjs11());
 
 // Notification/node_modules/@symbo.ls/atoms/Shape/style.js
-var import_scratch33 = __toESM(require_cjs10());
+var import_scratch33 = __toESM(require_cjs11());
 
 // Notification/node_modules/@symbo.ls/atoms/Timing.js
-var import_scratch32 = __toESM(require_cjs10());
+var import_scratch32 = __toESM(require_cjs11());
 
 // Notification/node_modules/@symbo.ls/atoms/Shape/style.js
 var CONFIG4 = (0, import_scratch33.getActiveConfig)();
@@ -12790,17 +15452,17 @@ var depth4 = {
 var import_utils18 = __toESM(require_cjs5());
 
 // Notification/node_modules/@symbo.ls/atoms/Position.js
-var import_scratch35 = __toESM(require_cjs10());
+var import_scratch35 = __toESM(require_cjs11());
 
 // Notification/node_modules/@symbo.ls/atoms/Shape/index.js
 var import_utils19 = __toESM(require_cjs5());
-var import_scratch36 = __toESM(require_cjs10());
+var import_scratch36 = __toESM(require_cjs11());
 
 // Notification/node_modules/@symbo.ls/atoms/Text.js
-var import_scratch37 = __toESM(require_cjs10());
+var import_scratch37 = __toESM(require_cjs11());
 
 // Notification/node_modules/@symbo.ls/atoms/Animation.js
-var import_scratch38 = __toESM(require_cjs10());
+var import_scratch38 = __toESM(require_cjs11());
 var import_utils20 = __toESM(require_cjs5());
 
 // Notification/node_modules/@symbo.ls/emotion/index.js