@symbo.ls/uikit 2.10.285 → 2.10.290

package/dist/index.cjs.js

@@ -873,7 +873,7 @@ var require_cjs = __commonJS({
       BREAKPOINTS: () => BREAKPOINTS,
       CASES: () => CASES,
       COLOR: () => COLOR,
-      CONFIG: () => CONFIG,
+      CONFIG: () => CONFIG2,
       CSS_VARS: () => CSS_VARS,
       DEVICES: () => DEVICES,
       DOCUMENT: () => DOCUMENT,
@@ -893,7 +893,7 @@ var require_cjs = __commonJS({
       THEME: () => THEME,
       TIMING: () => TIMING,
       TYPOGRAPHY: () => TYPOGRAPHY,
-      UNIT: () => UNIT5,
+      UNIT: () => UNIT4,
       VALUE_TRANSFORMERS: () => VALUE_TRANSFORMERS,
       activateConfig: () => activateConfig,
       appendIconsSprite: () => appendIconsSprite,
@@ -913,7 +913,7 @@ var require_cjs = __commonJS({
       generateSequence: () => generateSequence,
       generateSprite: () => generateSprite,
       generateSubSequence: () => generateSubSequence,
-      getActiveConfig: () => getActiveConfig,
+      getActiveConfig: () => getActiveConfig2,
       getColor: () => getColor5,
       getColorShade: () => getColorShade,
       getDefaultOrFirstKey: () => getDefaultOrFirstKey,
@@ -1229,7 +1229,7 @@ var require_cjs = __commonJS({
       THEME: () => THEME,
       TIMING: () => TIMING,
       TYPOGRAPHY: () => TYPOGRAPHY,
-      UNIT: () => UNIT5
+      UNIT: () => UNIT4
     });
     var SEQUENCE = {
       "minor-second": 1.067,
@@ -1257,7 +1257,7 @@ var require_cjs = __commonJS({
       // archimedes
       "double-octave": 4
     };
-    var UNIT5 = {
+    var UNIT4 = {
       default: "em"
     };
     var defaultProps = {
@@ -1368,17 +1368,17 @@ var require_cjs = __commonJS({
     var SVG_DATA = {};
     var RESET = {};
     var CSS_VARS = {};
-    var CONFIG = {
+    var CONFIG2 = {
       verbose: false,
       useVariable: true,
       useReset: true,
       CSS_VARS,
       ...defaultConfig_exports
     };
-    var cachedConfig = (0, import_utils32.deepClone)(CONFIG);
+    var cachedConfig = (0, import_utils32.deepClone)(CONFIG2);
     var FACTORY = {
       active: "0",
-      0: CONFIG
+      0: CONFIG2
     };
     var activateConfig = (def) => {
       if ((0, import_utils32.isDefined)(def)) {
@@ -1386,7 +1386,7 @@ var require_cjs = __commonJS({
       }
       return FACTORY[def || FACTORY.active];
     };
-    var getActiveConfig = (def) => {
+    var getActiveConfig2 = (def) => {
       return FACTORY[def || FACTORY.active];
     };
     var setActiveConfig = (newConfig) => {
@@ -1495,8 +1495,8 @@ var require_cjs = __commonJS({
       return sequenceProps;
     };
     var getSequenceValue = (value = "A", sequenceProps) => {
-      const CONFIG2 = getActiveConfig();
-      const { UNIT: UNIT22 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { UNIT: UNIT22 } = CONFIG22;
       const {
         sequence,
         unit = UNIT22.default,
@@ -1530,11 +1530,11 @@ var require_cjs = __commonJS({
         return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
       }
       if (!sequence[absValue] && absValue.length === 2) {
-        if (CONFIG2.verbose)
+        if (CONFIG22.verbose)
           console.warn(absValue, "- value is not found because `subSequence` is set to false");
         absValue = absValue.slice(0, 1);
       }
-      if (useVariable || CONFIG2.useVariable) {
+      if (useVariable || CONFIG22.useVariable) {
         const varValue2 = `var(${prefix2}${absValue}${mediaName})`;
         return isNegative ? `calc(${varValue2} * -1)` : varValue2;
       }
@@ -1565,16 +1565,16 @@ var require_cjs = __commonJS({
     };
     var import_utils62 = __toESM2(require_cjs32(), 1);
     var setVariables = (result, key) => {
-      const CONFIG2 = getActiveConfig();
-      const { CSS_VARS: CSS_VARS2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      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 CONFIG2 = getActiveConfig();
-      const { UNIT: UNIT22, MEDIA: MEDIA2, TIMING: TIMING2, CSS_VARS: CSS_VARS2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { UNIT: UNIT22, MEDIA: MEDIA2, TIMING: TIMING2, CSS_VARS: CSS_VARS2 } = CONFIG22;
       const unit = props3.unit || UNIT22.default;
       const { sequence, scales } = props3;
       for (const key in sequence) {
@@ -1583,7 +1583,7 @@ var require_cjs = __commonJS({
         if (mediaName) {
           const query = MEDIA2[mediaName];
           if (!query) {
-            if (CONFIG2.verbose)
+            if (CONFIG22.verbose)
               console.warn("Can't find query ", query);
           }
           let underMediaQuery = CSS_VARS2[`@media ${query}`];
@@ -1603,13 +1603,13 @@ var require_cjs = __commonJS({
     };
     var import_utils72 = __toESM2(require_cjs32(), 1);
     var generateSprite = (icons) => {
-      const CONFIG2 = getActiveConfig();
+      const CONFIG22 = getActiveConfig2();
       let sprite = "";
       for (const key in icons) {
-        if (CONFIG2.__svg_cache[key])
+        if (CONFIG22.__svg_cache[key])
           continue;
         else
-          CONFIG2.__svg_cache[key] = true;
+          CONFIG22.__svg_cache[key] = true;
         sprite += icons[key];
       }
       return sprite;
@@ -1676,9 +1676,9 @@ var require_cjs = __commonJS({
     });
     var import_utils82 = __toESM2(require_cjs32(), 1);
     var getColor5 = (value, key) => {
-      const CONFIG2 = getActiveConfig();
+      const CONFIG22 = getActiveConfig2();
       if (!(0, import_utils82.isString)(value)) {
-        if (CONFIG2.verbose)
+        if (CONFIG22.verbose)
           console.warn(value, "- type for color is not valid");
         return;
       }
@@ -1687,17 +1687,17 @@ var require_cjs = __commonJS({
       if (key && value[key])
         value = value[key];
       const [name, alpha, tone] = (0, import_utils82.isArray)(value) ? value : value.split(" ");
-      const { COLOR: COLOR2, GRADIENT: GRADIENT2 } = CONFIG2;
+      const { COLOR: COLOR2, GRADIENT: GRADIENT2 } = CONFIG22;
       let val = COLOR2[name] || GRADIENT2[name];
       if (!val) {
-        if (CONFIG2.verbose)
+        if (CONFIG22.verbose)
           console.warn("Can't find color ", name);
         return value;
       }
       if (key) {
         if (val[key])
           val = val[key];
-        else if (CONFIG2.verbose)
+        else if (CONFIG22.verbose)
           console.warn(value, " - does not have ", key);
       }
       let rgb = val.rgb;
@@ -1723,23 +1723,23 @@ var require_cjs = __commonJS({
         }
         if (alpha)
           return `rgba(${rgb}, ${alpha})`;
-        return CONFIG2.useVariable ? `var(${val.var})` : `rgb(${rgb})`;
+        return CONFIG22.useVariable ? `var(${val.var})` : `rgb(${rgb})`;
       } else
-        return CONFIG2.useVariable ? `var(${val.var})` : val.value;
+        return CONFIG22.useVariable ? `var(${val.var})` : val.value;
     };
     var getMediaColor9 = (value, globalTheme) => {
-      const CONFIG2 = getActiveConfig();
+      const CONFIG22 = getActiveConfig2();
       if (!globalTheme)
-        globalTheme = CONFIG2.globalTheme;
+        globalTheme = CONFIG22.globalTheme;
       if (!(0, import_utils82.isString)(value)) {
-        if (CONFIG2.verbose)
+        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 } = CONFIG2;
+      const { COLOR: COLOR2, GRADIENT: GRADIENT2 } = CONFIG22;
       const val = COLOR2[name] || GRADIENT2[name];
       const isObj = (0, import_utils82.isObject)(val);
       if (isObj && val.value)
@@ -1750,20 +1750,20 @@ var require_cjs = __commonJS({
         else {
           const obj = {};
           for (const mediaName in val) {
-            const query = CONFIG2.MEDIA[mediaName.slice(1)];
+            const query = CONFIG22.MEDIA[mediaName.slice(1)];
             const media = `@media screen and ${query}`;
             obj[media] = getColor5(value, mediaName);
           }
           return obj;
         }
       } else {
-        if (CONFIG2.verbose)
+        if (CONFIG22.verbose)
           console.warn("Can't find color", value);
         return value;
       }
     };
     var setColor = (val, key, suffix) => {
-      const CONFIG2 = getActiveConfig();
+      const CONFIG22 = getActiveConfig2();
       if ((0, import_utils82.isString)(val) && val.slice(0, 2) === "--")
         val = getColor5(val.slice(2));
       if ((0, import_utils82.isArray)(val)) {
@@ -1783,8 +1783,8 @@ var require_cjs = __commonJS({
       const alpha = parseFloat(a.toFixed(2));
       const rgb = `${r}, ${g}, ${b}`;
       const value = `rgba(${rgb}, ${alpha})`;
-      if (CONFIG2.useVariable) {
-        CONFIG2.CSS_VARS[CSSVar] = value;
+      if (CONFIG22.useVariable) {
+        CONFIG22.CSS_VARS[CSSVar] = value;
       }
       return {
         var: CSSVar,
@@ -1794,7 +1794,7 @@ var require_cjs = __commonJS({
       };
     };
     var setGradient = (val, key, suffix) => {
-      const CONFIG2 = getActiveConfig();
+      const CONFIG22 = getActiveConfig2();
       if ((0, import_utils82.isString)(val) && val.slice(0, 2) === "--")
         val = getColor5(val.slice(2));
       if ((0, import_utils82.isArray)(val)) {
@@ -1810,8 +1810,8 @@ var require_cjs = __commonJS({
         return obj;
       }
       const CSSVar = `--gradient-${key}` + (suffix ? `-${suffix}` : "");
-      if (CONFIG2.useVariable) {
-        CONFIG2.CSS_VARS[CSSVar] = val.value || val;
+      if (CONFIG22.useVariable) {
+        CONFIG22.CSS_VARS[CSSVar] = val.value || val;
       }
       return {
         var: CSSVar,
@@ -1837,10 +1837,10 @@ var require_cjs = __commonJS({
       return theme.value;
     };
     var getTheme5 = (value, modifier) => {
-      const CONFIG2 = getActiveConfig();
-      if (CONFIG2.useVariable)
+      const CONFIG22 = getActiveConfig2();
+      if (CONFIG22.useVariable)
         return getMediaTheme5(value, modifier);
-      const { THEME: THEME2 } = CONFIG2;
+      const { THEME: THEME2 } = CONFIG22;
       if ((0, import_utils102.isString)(value)) {
         const [theme, subtheme] = value.split(" ");
         const isOurTheme = THEME2[theme];
@@ -1916,7 +1916,7 @@ var require_cjs = __commonJS({
       return theme;
     };
     var setHelpers = (theme, value) => {
-      const CONFIG2 = getActiveConfig();
+      const CONFIG22 = getActiveConfig2();
       const { helpers } = theme;
       if (!helpers)
         return;
@@ -1924,7 +1924,7 @@ var require_cjs = __commonJS({
       keys.map((key) => {
         const helper = helpers[key];
         if ((0, import_utils102.isString)(helper))
-          helpers[key] = CONFIG2.THEME[helper];
+          helpers[key] = CONFIG22.THEME[helper];
         else
           getThemeValue(helpers[key]);
         return theme;
@@ -1932,8 +1932,8 @@ var require_cjs = __commonJS({
       return theme;
     };
     var setTheme = (val, key) => {
-      const CONFIG2 = getActiveConfig();
-      if (CONFIG2.useVariable)
+      const CONFIG22 = getActiveConfig2();
+      if (CONFIG22.useVariable)
         return setMediaTheme(val, key);
       const { state, media, helpers } = val;
       const value = setThemeValue(val, key);
@@ -1944,8 +1944,8 @@ var require_cjs = __commonJS({
       return { var: CSSvar, value, state, media, helpers };
     };
     var setMediaTheme = (val, key, suffix, prefers) => {
-      const CONFIG2 = getActiveConfig();
-      const { CSS_VARS: CSS_VARS2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { CSS_VARS: CSS_VARS2 } = CONFIG22;
       const theme = { value: val };
       if ((0, import_utils102.isObjectLike)(val)) {
         for (const param in val) {
@@ -1959,7 +1959,7 @@ var require_cjs = __commonJS({
             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 (CONFIG2.useVariable) {
+            if (CONFIG22.useVariable) {
               CSS_VARS2[CSSVar] = color;
               theme[param] = `var(${CSSVar})`;
             } else {
@@ -1976,7 +1976,7 @@ var require_cjs = __commonJS({
         }
       }
       if ((0, import_utils102.isString)(val) && val.slice(0, 2) === "--") {
-        const { THEME: THEME2 } = CONFIG2;
+        const { THEME: THEME2 } = CONFIG22;
         const value = THEME2[val.slice(2)];
         const getReferenced = getMediaTheme5(value, prefers);
         return getReferenced;
@@ -1984,13 +1984,13 @@ var require_cjs = __commonJS({
       return theme;
     };
     var recursiveTheme = (val) => {
-      const CONFIG2 = getActiveConfig();
+      const CONFIG22 = getActiveConfig2();
       const obj = {};
       for (const param in val) {
         const symb = param.slice(0, 1);
         if ((0, import_utils102.isObjectLike)(val[param])) {
           if (symb === "@") {
-            const query = CONFIG2.MEDIA[param.slice(1)];
+            const query = CONFIG22.MEDIA[param.slice(1)];
             const media = `@media screen and ${query}`;
             obj[media] = recursiveTheme(val[param]);
           } else if (symb === ":") {
@@ -2016,16 +2016,16 @@ var require_cjs = __commonJS({
         return val;
     };
     var getMediaTheme5 = (val, mod) => {
-      const CONFIG2 = getActiveConfig();
+      const CONFIG22 = getActiveConfig2();
       if ((0, import_utils102.isString)(val) && val.slice(0, 2) === "--")
         val = getMediaTheme5(val.slice(2));
       if (!val || !(0, import_utils102.isString)(val)) {
-        if (CONFIG2.verbose)
+        if (CONFIG22.verbose)
           console.warn(val, "- theme is not string");
         return;
       }
       const [name, ...modifier] = (0, import_utils102.isArray)(val) ? val : val.split(" ");
-      let value = CONFIG2.THEME[name];
+      let value = CONFIG22.THEME[name];
       if (value && (modifier || mod)) {
         value = findModifier(value, modifier.length ? modifier : mod);
       }
@@ -2039,13 +2039,13 @@ var require_cjs = __commonJS({
       return { var: CSSvar, value: val, fontFace };
     };
     var getFontFamily5 = (key, factory) => {
-      const CONFIG2 = getActiveConfig();
-      const { FONT_FAMILY: FONT_FAMILY2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { FONT_FAMILY: FONT_FAMILY2 } = CONFIG22;
       return getDefaultOrFirstKey(factory || FONT_FAMILY2, key);
     };
     var setFontFamily = (val, key) => {
-      const CONFIG2 = getActiveConfig();
-      const { FONT_FAMILY: FONT_FAMILY2, FONT_FAMILY_TYPES: FONT_FAMILY_TYPES2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { FONT_FAMILY: FONT_FAMILY2, FONT_FAMILY_TYPES: FONT_FAMILY_TYPES2 } = CONFIG22;
       let { value, type } = val;
       if (val.isDefault)
         FONT_FAMILY2.default = key;
@@ -2057,8 +2057,8 @@ var require_cjs = __commonJS({
     };
     var import_utils142 = __toESM2(require_cjs32(), 1);
     var runThroughMedia = (props3) => {
-      const CONFIG2 = getActiveConfig();
-      const { TYPOGRAPHY: TYPOGRAPHY2, MEDIA: MEDIA2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { TYPOGRAPHY: TYPOGRAPHY2, MEDIA: MEDIA2 } = CONFIG22;
       for (const prop in props3) {
         const mediaProps = props3[prop];
         if (prop.slice(0, 1) === "@") {
@@ -2087,7 +2087,7 @@ var require_cjs = __commonJS({
       }
     };
     var applyHeadings = (props3) => {
-      const CONFIG2 = getActiveConfig();
+      const CONFIG22 = getActiveConfig2();
       if (props3.h1Matches) {
         const unit = props3.unit;
         const HEADINGS = findHeadings(props3);
@@ -2096,7 +2096,7 @@ var require_cjs = __commonJS({
           const headerName = `h${parseInt(k) + 1}`;
           const headerStyle = templates[headerName];
           templates[headerName] = {
-            fontSize: CONFIG2.useVariable ? `var(${HEADINGS[k].variable})` : `${HEADINGS[k].scaling}${unit}`,
+            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,
@@ -2106,16 +2106,16 @@ var require_cjs = __commonJS({
       }
     };
     var applyTypographySequence = () => {
-      const CONFIG2 = getActiveConfig();
-      const { TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG22;
       generateSequence(TYPOGRAPHY2);
       applyHeadings(TYPOGRAPHY2);
       applySequenceVars(TYPOGRAPHY2);
       runThroughMedia(TYPOGRAPHY2);
     };
     var getFontSizeByKey5 = (value) => {
-      const CONFIG2 = getActiveConfig();
-      const { TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG22;
       return getSequenceValuePropertyPair(
         value,
         "fontSize",
@@ -2148,15 +2148,15 @@ var require_cjs = __commonJS({
       }
     };
     var applySpacingSequence = () => {
-      const CONFIG2 = getActiveConfig();
-      const { SPACING: SPACING2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { SPACING: SPACING2 } = CONFIG22;
       generateSequence(SPACING2);
       applySequenceVars(SPACING2);
       runThroughMedia2(SPACING2);
     };
     var getSequence = (sequenceProps) => {
-      const CONFIG2 = getActiveConfig();
-      const { SPACING: SPACING2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { SPACING: SPACING2 } = CONFIG22;
       if (!sequenceProps)
         return SPACING2;
       const hasGenerated = Object.keys(sequenceProps.sequence).length > 0;
@@ -2195,8 +2195,8 @@ var require_cjs = __commonJS({
       );
     };
     var getSpacingBasedOnRatio13 = (props3, propertyName, val) => {
-      const CONFIG2 = getActiveConfig();
-      const { SPACING: SPACING2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { SPACING: SPACING2 } = CONFIG22;
       const { spacingRatio, unit } = props3;
       const value = val || props3[propertyName];
       if (spacingRatio) {
@@ -2225,19 +2225,19 @@ var require_cjs = __commonJS({
       return getSpacingByKey9(value, propertyName);
     };
     var applyTimingSequence = () => {
-      const CONFIG2 = getActiveConfig();
-      const { TIMING: TIMING2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { TIMING: TIMING2 } = CONFIG22;
       generateSequence(TIMING2);
       applySequenceVars(TIMING2);
     };
     var getTimingFunction9 = (value) => {
-      const CONFIG2 = getActiveConfig();
-      const { TIMING: TIMING2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { TIMING: TIMING2 } = CONFIG22;
       return TIMING2[value] || TIMING2[toCamelCase(value)] || value;
     };
     var getTimingByKey5 = (value, property = "timing") => {
-      const CONFIG2 = getActiveConfig();
-      const { TIMING: TIMING2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { TIMING: TIMING2 } = CONFIG22;
       return getSequenceValuePropertyPair(
         value,
         property,
@@ -2246,8 +2246,8 @@ var require_cjs = __commonJS({
     };
     var import_utils21 = __toESM2(require_cjs32(), 1);
     var applyDocument = () => {
-      const CONFIG2 = getActiveConfig();
-      const { DOCUMENT: DOCUMENT2, FONT_FAMILY: FONT_FAMILY2, THEME: THEME2, TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { DOCUMENT: DOCUMENT2, FONT_FAMILY: FONT_FAMILY2, THEME: THEME2, TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG22;
       return (0, import_utils21.merge)(DOCUMENT2, {
         theme: THEME2.document,
         fontFamily: getDefaultOrFirstKey(FONT_FAMILY2),
@@ -2260,36 +2260,36 @@ var require_cjs = __commonJS({
       document: import_globals2.document
     };
     var setSVG = (val, key) => {
-      const CONFIG2 = getActiveConfig();
+      const CONFIG22 = getActiveConfig2();
       if (!val) {
-        if (CONFIG2.verbose)
+        if (CONFIG22.verbose)
           console.warn("setSVG: val is not defined", key);
         return;
       }
-      if (CONFIG2.useSvgSprite) {
+      if (CONFIG22.useSvgSprite) {
         return convertSvgToSymbol(key, val);
       }
       return val;
     };
     var appendSVGSprite = (LIBRARY, options = DEF_OPTIONS) => {
-      const CONFIG2 = getActiveConfig();
-      const lib = Object.keys(LIBRARY).length ? {} : CONFIG2.SVG;
+      const CONFIG22 = getActiveConfig2();
+      const lib = Object.keys(LIBRARY).length ? {} : CONFIG22.SVG;
       for (const key in LIBRARY)
-        lib[key] = CONFIG2.SVG[key];
+        lib[key] = CONFIG22.SVG[key];
       appendSVG(lib, options);
     };
     var setIcon = (val, key) => {
-      const CONFIG2 = getActiveConfig();
-      if (CONFIG2.useIconSprite) {
+      const CONFIG22 = getActiveConfig2();
+      if (CONFIG22.useIconSprite) {
         return setSVG(val, key);
       }
       return val;
     };
     var appendIconsSprite = (LIBRARY, options = DEF_OPTIONS) => {
-      const CONFIG2 = getActiveConfig();
-      const lib = Object.keys(LIBRARY).length ? {} : CONFIG2.ICONS;
+      const CONFIG22 = getActiveConfig2();
+      const lib = Object.keys(LIBRARY).length ? {} : CONFIG22.ICONS;
       for (const key in LIBRARY)
-        lib[key] = CONFIG2.ICONS[key];
+        lib[key] = CONFIG22.ICONS[key];
       appendSVG(lib, options);
     };
     var createSVGSpriteElement = (options = { isRoot: true }) => {
@@ -2304,10 +2304,10 @@ var require_cjs = __commonJS({
       return svgElem;
     };
     var appendSVG = (lib, options = DEF_OPTIONS) => {
-      const CONFIG2 = getActiveConfig();
+      const CONFIG22 = getActiveConfig2();
       const doc = options.document || import_globals2.document;
       if (!doc) {
-        if (CONFIG2.verbose) {
+        if (CONFIG22.verbose) {
           console.warn("To append SVG sprites it should be run in browser environment");
         }
         return generateSprite(lib);
@@ -2326,14 +2326,14 @@ var require_cjs = __commonJS({
     };
     var import_utils24 = __toESM2(require_cjs32(), 1);
     var applyReset = (reset = {}) => {
-      const CONFIG2 = getActiveConfig();
-      const { RESET: RESET2, TYPOGRAPHY: TYPOGRAPHY2, DOCUMENT: DOCUMENT2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { RESET: RESET2, TYPOGRAPHY: TYPOGRAPHY2, DOCUMENT: DOCUMENT2 } = CONFIG22;
       if (RESET2) {
         if (RESET2[":root"]) {
           const configReset = RESET2;
           const configTemplates = TYPOGRAPHY2.templates;
           configReset.body = {
-            ...CONFIG2.useDocumentTheme ? getMediaTheme5("document", `@${CONFIG2.globalTheme}`) : {},
+            ...CONFIG22.useDocumentTheme ? getMediaTheme5("document", `@${CONFIG22.globalTheme}`) : {},
             ...configTemplates.body
           };
           configReset.h1 = configTemplates.h1;
@@ -2356,7 +2356,7 @@ var require_cjs = __commonJS({
             WebkitFontSmoothing: "antialiased",
             scrollBehavior: "smooth",
             fontSize: TYPOGRAPHY2.browserDefault + "px",
-            ...CONFIG2.useDocumentTheme ? getMediaTheme5("document", `@${CONFIG2.globalTheme}`) : {},
+            ...CONFIG22.useDocumentTheme ? getMediaTheme5("document", `@${CONFIG22.globalTheme}`) : {},
             fontFamily: DOCUMENT2.fontFamily,
             lineHeight: DOCUMENT2.lineHeight
           },
@@ -2365,7 +2365,7 @@ var require_cjs = __commonJS({
             height: "100%",
             margin: 0,
             fontFamily: DOCUMENT2.fontFamily,
-            fontSize: TYPOGRAPHY2.base / TYPOGRAPHY2.browserDefault + CONFIG2.UNIT.default,
+            fontSize: TYPOGRAPHY2.base / TYPOGRAPHY2.browserDefault + CONFIG22.UNIT.default,
             ...templates,
             ...body
           },
@@ -2437,15 +2437,15 @@ var require_cjs = __commonJS({
       }).join(" ");
     }).join(",");
     var transformBackgroundImage5 = (backgroundImage, globalTheme) => {
-      const CONFIG2 = getActiveConfig();
+      const CONFIG22 = getActiveConfig2();
       return backgroundImage.split(", ").map((v) => {
         if (v.slice(0, 2) === "--")
           return `var(${v})`;
         if (v.includes("url") || v.includes("gradient"))
           return v;
-        else if (CONFIG2.GRADIENT[backgroundImage]) {
+        else if (CONFIG22.GRADIENT[backgroundImage]) {
           return {
-            backgroundImage: getMediaColor9(backgroundImage, globalTheme || CONFIG2.globalTheme)
+            backgroundImage: getMediaColor9(backgroundImage, globalTheme || CONFIG22.globalTheme)
           };
         } else if (v.includes("/") || v.includes("http"))
           return `url(${v})`;
@@ -2506,27 +2506,27 @@ var require_cjs = __commonJS({
       animation: setSameValue
     };
     var setValue = (FACTORY_NAME, value, key) => {
-      const CONFIG2 = getActiveConfig();
+      const CONFIG22 = getActiveConfig2();
       const factoryName = FACTORY_NAME.toLowerCase();
-      const FACTORY2 = CONFIG2[FACTORY_NAME];
+      const FACTORY2 = CONFIG22[FACTORY_NAME];
       if (VALUE_TRANSFORMERS[factoryName]) {
         const result = VALUE_TRANSFORMERS[factoryName](value, key);
         FACTORY2[key] = result;
         return FACTORY2;
       }
-      if (CONFIG2.verbose)
+      if (CONFIG22.verbose)
         console.warn("Can not find", factoryName, "method in scratch");
     };
     var setEach = (factoryName, props3) => {
-      const CONFIG2 = getActiveConfig();
+      const CONFIG22 = getActiveConfig2();
       const FACTORY_NAME = factoryName.toUpperCase();
       const keys = Object.keys(props3);
       keys.map((key) => setValue(FACTORY_NAME, props3[key], key));
-      return CONFIG2[FACTORY_NAME];
+      return CONFIG22[FACTORY_NAME];
     };
     var SET_OPTIONS = {};
     var set2 = (recivedConfig, options = SET_OPTIONS) => {
-      let CONFIG2 = getActiveConfig();
+      let CONFIG22 = getActiveConfig2();
       const {
         version,
         verbose,
@@ -2540,28 +2540,28 @@ var require_cjs = __commonJS({
         ...config
       } = recivedConfig;
       if (options.newConfig) {
-        CONFIG2 = setActiveConfig(options.newConfig);
+        CONFIG22 = setActiveConfig(options.newConfig);
       }
       if (verbose !== void 0)
-        CONFIG2.verbose = verbose;
+        CONFIG22.verbose = verbose;
       if (useVariable !== void 0)
-        CONFIG2.useVariable = useVariable;
+        CONFIG22.useVariable = useVariable;
       if (useReset !== void 0)
-        CONFIG2.useReset = useReset;
+        CONFIG22.useReset = useReset;
       if (useFontImport !== void 0)
-        CONFIG2.useFontImport = useFontImport;
+        CONFIG22.useFontImport = useFontImport;
       if (useSvgSprite !== void 0)
-        CONFIG2.useSvgSprite = useSvgSprite;
+        CONFIG22.useSvgSprite = useSvgSprite;
       if (useIconSprite !== void 0)
-        CONFIG2.useIconSprite = useIconSprite;
+        CONFIG22.useIconSprite = useIconSprite;
       if (useDocumentTheme !== void 0)
-        CONFIG2.useDocumentTheme = useDocumentTheme;
+        CONFIG22.useDocumentTheme = useDocumentTheme;
       if (globalTheme !== void 0)
-        CONFIG2.globalTheme = globalTheme;
-      if (CONFIG2.verbose)
-        console.log(CONFIG2);
-      if (!CONFIG2.__svg_cache)
-        CONFIG2.__svg_cache = {};
+        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();
@@ -2569,7 +2569,7 @@ var require_cjs = __commonJS({
       applyTimingSequence();
       applyDocument();
       applyReset();
-      return CONFIG2;
+      return CONFIG22;
     };
   }
 });
@@ -4240,7 +4240,7 @@ var require_cjs5 = __commonJS({
       BREAKPOINTS: () => BREAKPOINTS,
       CASES: () => CASES,
       COLOR: () => COLOR,
-      CONFIG: () => CONFIG,
+      CONFIG: () => CONFIG2,
       CSS_VARS: () => CSS_VARS,
       DEVICES: () => DEVICES,
       DOCUMENT: () => DOCUMENT,
@@ -4260,7 +4260,7 @@ var require_cjs5 = __commonJS({
       THEME: () => THEME,
       TIMING: () => TIMING,
       TYPOGRAPHY: () => TYPOGRAPHY,
-      UNIT: () => UNIT5,
+      UNIT: () => UNIT4,
       VALUE_TRANSFORMERS: () => VALUE_TRANSFORMERS,
       activateConfig: () => activateConfig,
       appendIconsSprite: () => appendIconsSprite,
@@ -4280,7 +4280,7 @@ var require_cjs5 = __commonJS({
       generateSequence: () => generateSequence,
       generateSprite: () => generateSprite,
       generateSubSequence: () => generateSubSequence,
-      getActiveConfig: () => getActiveConfig,
+      getActiveConfig: () => getActiveConfig2,
       getColor: () => getColor5,
       getColorShade: () => getColorShade,
       getDefaultOrFirstKey: () => getDefaultOrFirstKey,
@@ -4596,7 +4596,7 @@ var require_cjs5 = __commonJS({
       THEME: () => THEME,
       TIMING: () => TIMING,
       TYPOGRAPHY: () => TYPOGRAPHY,
-      UNIT: () => UNIT5
+      UNIT: () => UNIT4
     });
     var SEQUENCE = {
       "minor-second": 1.067,
@@ -4624,7 +4624,7 @@ var require_cjs5 = __commonJS({
       // archimedes
       "double-octave": 4
     };
-    var UNIT5 = {
+    var UNIT4 = {
       default: "em"
     };
     var defaultProps = {
@@ -4735,17 +4735,17 @@ var require_cjs5 = __commonJS({
     var SVG_DATA = {};
     var RESET = {};
     var CSS_VARS = {};
-    var CONFIG = {
+    var CONFIG2 = {
       verbose: false,
       useVariable: true,
       useReset: true,
       CSS_VARS,
       ...defaultConfig_exports
     };
-    var cachedConfig = (0, import_utils32.deepClone)(CONFIG);
+    var cachedConfig = (0, import_utils32.deepClone)(CONFIG2);
     var FACTORY = {
       active: "0",
-      0: CONFIG
+      0: CONFIG2
     };
     var activateConfig = (def) => {
       if ((0, import_utils32.isDefined)(def)) {
@@ -4753,7 +4753,7 @@ var require_cjs5 = __commonJS({
       }
       return FACTORY[def || FACTORY.active];
     };
-    var getActiveConfig = (def) => {
+    var getActiveConfig2 = (def) => {
       return FACTORY[def || FACTORY.active];
     };
     var setActiveConfig = (newConfig) => {
@@ -4862,8 +4862,8 @@ var require_cjs5 = __commonJS({
       return sequenceProps;
     };
     var getSequenceValue = (value = "A", sequenceProps) => {
-      const CONFIG2 = getActiveConfig();
-      const { UNIT: UNIT22 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { UNIT: UNIT22 } = CONFIG22;
       const {
         sequence,
         unit = UNIT22.default,
@@ -4897,11 +4897,11 @@ var require_cjs5 = __commonJS({
         return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
       }
       if (!sequence[absValue] && absValue.length === 2) {
-        if (CONFIG2.verbose)
+        if (CONFIG22.verbose)
           console.warn(absValue, "- value is not found because `subSequence` is set to false");
         absValue = absValue.slice(0, 1);
       }
-      if (useVariable || CONFIG2.useVariable) {
+      if (useVariable || CONFIG22.useVariable) {
         const varValue2 = `var(${prefix2}${absValue}${mediaName})`;
         return isNegative ? `calc(${varValue2} * -1)` : varValue2;
       }
@@ -4932,16 +4932,16 @@ var require_cjs5 = __commonJS({
     };
     var import_utils62 = __toESM2(require_cjs32(), 1);
     var setVariables = (result, key) => {
-      const CONFIG2 = getActiveConfig();
-      const { CSS_VARS: CSS_VARS2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      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 CONFIG2 = getActiveConfig();
-      const { UNIT: UNIT22, MEDIA: MEDIA2, TIMING: TIMING2, CSS_VARS: CSS_VARS2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { UNIT: UNIT22, MEDIA: MEDIA2, TIMING: TIMING2, CSS_VARS: CSS_VARS2 } = CONFIG22;
       const unit = props3.unit || UNIT22.default;
       const { sequence, scales } = props3;
       for (const key in sequence) {
@@ -4950,7 +4950,7 @@ var require_cjs5 = __commonJS({
         if (mediaName) {
           const query = MEDIA2[mediaName];
           if (!query) {
-            if (CONFIG2.verbose)
+            if (CONFIG22.verbose)
               console.warn("Can't find query ", query);
           }
           let underMediaQuery = CSS_VARS2[`@media ${query}`];
@@ -4970,13 +4970,13 @@ var require_cjs5 = __commonJS({
     };
     var import_utils72 = __toESM2(require_cjs32(), 1);
     var generateSprite = (icons) => {
-      const CONFIG2 = getActiveConfig();
+      const CONFIG22 = getActiveConfig2();
       let sprite = "";
       for (const key in icons) {
-        if (CONFIG2.__svg_cache[key])
+        if (CONFIG22.__svg_cache[key])
           continue;
         else
-          CONFIG2.__svg_cache[key] = true;
+          CONFIG22.__svg_cache[key] = true;
         sprite += icons[key];
       }
       return sprite;
@@ -5043,9 +5043,9 @@ var require_cjs5 = __commonJS({
     });
     var import_utils82 = __toESM2(require_cjs32(), 1);
     var getColor5 = (value, key) => {
-      const CONFIG2 = getActiveConfig();
+      const CONFIG22 = getActiveConfig2();
       if (!(0, import_utils82.isString)(value)) {
-        if (CONFIG2.verbose)
+        if (CONFIG22.verbose)
           console.warn(value, "- type for color is not valid");
         return;
       }
@@ -5054,17 +5054,17 @@ var require_cjs5 = __commonJS({
       if (key && value[key])
         value = value[key];
       const [name, alpha, tone] = (0, import_utils82.isArray)(value) ? value : value.split(" ");
-      const { COLOR: COLOR2, GRADIENT: GRADIENT2 } = CONFIG2;
+      const { COLOR: COLOR2, GRADIENT: GRADIENT2 } = CONFIG22;
       let val = COLOR2[name] || GRADIENT2[name];
       if (!val) {
-        if (CONFIG2.verbose)
+        if (CONFIG22.verbose)
           console.warn("Can't find color ", name);
         return value;
       }
       if (key) {
         if (val[key])
           val = val[key];
-        else if (CONFIG2.verbose)
+        else if (CONFIG22.verbose)
           console.warn(value, " - does not have ", key);
       }
       let rgb = val.rgb;
@@ -5090,23 +5090,23 @@ var require_cjs5 = __commonJS({
         }
         if (alpha)
           return `rgba(${rgb}, ${alpha})`;
-        return CONFIG2.useVariable ? `var(${val.var})` : `rgb(${rgb})`;
+        return CONFIG22.useVariable ? `var(${val.var})` : `rgb(${rgb})`;
       } else
-        return CONFIG2.useVariable ? `var(${val.var})` : val.value;
+        return CONFIG22.useVariable ? `var(${val.var})` : val.value;
     };
     var getMediaColor9 = (value, globalTheme) => {
-      const CONFIG2 = getActiveConfig();
+      const CONFIG22 = getActiveConfig2();
       if (!globalTheme)
-        globalTheme = CONFIG2.globalTheme;
+        globalTheme = CONFIG22.globalTheme;
       if (!(0, import_utils82.isString)(value)) {
-        if (CONFIG2.verbose)
+        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 } = CONFIG2;
+      const { COLOR: COLOR2, GRADIENT: GRADIENT2 } = CONFIG22;
       const val = COLOR2[name] || GRADIENT2[name];
       const isObj = (0, import_utils82.isObject)(val);
       if (isObj && val.value)
@@ -5117,20 +5117,20 @@ var require_cjs5 = __commonJS({
         else {
           const obj = {};
           for (const mediaName in val) {
-            const query = CONFIG2.MEDIA[mediaName.slice(1)];
+            const query = CONFIG22.MEDIA[mediaName.slice(1)];
             const media = `@media screen and ${query}`;
             obj[media] = getColor5(value, mediaName);
           }
           return obj;
         }
       } else {
-        if (CONFIG2.verbose)
+        if (CONFIG22.verbose)
           console.warn("Can't find color", value);
         return value;
       }
     };
     var setColor = (val, key, suffix) => {
-      const CONFIG2 = getActiveConfig();
+      const CONFIG22 = getActiveConfig2();
       if ((0, import_utils82.isString)(val) && val.slice(0, 2) === "--")
         val = getColor5(val.slice(2));
       if ((0, import_utils82.isArray)(val)) {
@@ -5150,8 +5150,8 @@ var require_cjs5 = __commonJS({
       const alpha = parseFloat(a.toFixed(2));
       const rgb = `${r}, ${g}, ${b}`;
       const value = `rgba(${rgb}, ${alpha})`;
-      if (CONFIG2.useVariable) {
-        CONFIG2.CSS_VARS[CSSVar] = value;
+      if (CONFIG22.useVariable) {
+        CONFIG22.CSS_VARS[CSSVar] = value;
       }
       return {
         var: CSSVar,
@@ -5161,7 +5161,7 @@ var require_cjs5 = __commonJS({
       };
     };
     var setGradient = (val, key, suffix) => {
-      const CONFIG2 = getActiveConfig();
+      const CONFIG22 = getActiveConfig2();
       if ((0, import_utils82.isString)(val) && val.slice(0, 2) === "--")
         val = getColor5(val.slice(2));
       if ((0, import_utils82.isArray)(val)) {
@@ -5177,8 +5177,8 @@ var require_cjs5 = __commonJS({
         return obj;
       }
       const CSSVar = `--gradient-${key}` + (suffix ? `-${suffix}` : "");
-      if (CONFIG2.useVariable) {
-        CONFIG2.CSS_VARS[CSSVar] = val.value || val;
+      if (CONFIG22.useVariable) {
+        CONFIG22.CSS_VARS[CSSVar] = val.value || val;
       }
       return {
         var: CSSVar,
@@ -5204,10 +5204,10 @@ var require_cjs5 = __commonJS({
       return theme.value;
     };
     var getTheme5 = (value, modifier) => {
-      const CONFIG2 = getActiveConfig();
-      if (CONFIG2.useVariable)
+      const CONFIG22 = getActiveConfig2();
+      if (CONFIG22.useVariable)
         return getMediaTheme5(value, modifier);
-      const { THEME: THEME2 } = CONFIG2;
+      const { THEME: THEME2 } = CONFIG22;
       if ((0, import_utils102.isString)(value)) {
         const [theme, subtheme] = value.split(" ");
         const isOurTheme = THEME2[theme];
@@ -5283,7 +5283,7 @@ var require_cjs5 = __commonJS({
       return theme;
     };
     var setHelpers = (theme, value) => {
-      const CONFIG2 = getActiveConfig();
+      const CONFIG22 = getActiveConfig2();
       const { helpers } = theme;
       if (!helpers)
         return;
@@ -5291,7 +5291,7 @@ var require_cjs5 = __commonJS({
       keys.map((key) => {
         const helper = helpers[key];
         if ((0, import_utils102.isString)(helper))
-          helpers[key] = CONFIG2.THEME[helper];
+          helpers[key] = CONFIG22.THEME[helper];
         else
           getThemeValue(helpers[key]);
         return theme;
@@ -5299,8 +5299,8 @@ var require_cjs5 = __commonJS({
       return theme;
     };
     var setTheme = (val, key) => {
-      const CONFIG2 = getActiveConfig();
-      if (CONFIG2.useVariable)
+      const CONFIG22 = getActiveConfig2();
+      if (CONFIG22.useVariable)
         return setMediaTheme(val, key);
       const { state, media, helpers } = val;
       const value = setThemeValue(val, key);
@@ -5311,8 +5311,8 @@ var require_cjs5 = __commonJS({
       return { var: CSSvar, value, state, media, helpers };
     };
     var setMediaTheme = (val, key, suffix, prefers) => {
-      const CONFIG2 = getActiveConfig();
-      const { CSS_VARS: CSS_VARS2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { CSS_VARS: CSS_VARS2 } = CONFIG22;
       const theme = { value: val };
       if ((0, import_utils102.isObjectLike)(val)) {
         for (const param in val) {
@@ -5326,7 +5326,7 @@ var require_cjs5 = __commonJS({
             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 (CONFIG2.useVariable) {
+            if (CONFIG22.useVariable) {
               CSS_VARS2[CSSVar] = color;
               theme[param] = `var(${CSSVar})`;
             } else {
@@ -5343,7 +5343,7 @@ var require_cjs5 = __commonJS({
         }
       }
       if ((0, import_utils102.isString)(val) && val.slice(0, 2) === "--") {
-        const { THEME: THEME2 } = CONFIG2;
+        const { THEME: THEME2 } = CONFIG22;
         const value = THEME2[val.slice(2)];
         const getReferenced = getMediaTheme5(value, prefers);
         return getReferenced;
@@ -5351,13 +5351,13 @@ var require_cjs5 = __commonJS({
       return theme;
     };
     var recursiveTheme = (val) => {
-      const CONFIG2 = getActiveConfig();
+      const CONFIG22 = getActiveConfig2();
       const obj = {};
       for (const param in val) {
         const symb = param.slice(0, 1);
         if ((0, import_utils102.isObjectLike)(val[param])) {
           if (symb === "@") {
-            const query = CONFIG2.MEDIA[param.slice(1)];
+            const query = CONFIG22.MEDIA[param.slice(1)];
             const media = `@media screen and ${query}`;
             obj[media] = recursiveTheme(val[param]);
           } else if (symb === ":") {
@@ -5383,16 +5383,16 @@ var require_cjs5 = __commonJS({
         return val;
     };
     var getMediaTheme5 = (val, mod) => {
-      const CONFIG2 = getActiveConfig();
+      const CONFIG22 = getActiveConfig2();
       if ((0, import_utils102.isString)(val) && val.slice(0, 2) === "--")
         val = getMediaTheme5(val.slice(2));
       if (!val || !(0, import_utils102.isString)(val)) {
-        if (CONFIG2.verbose)
+        if (CONFIG22.verbose)
           console.warn(val, "- theme is not string");
         return;
       }
       const [name, ...modifier] = (0, import_utils102.isArray)(val) ? val : val.split(" ");
-      let value = CONFIG2.THEME[name];
+      let value = CONFIG22.THEME[name];
       if (value && (modifier || mod)) {
         value = findModifier(value, modifier.length ? modifier : mod);
       }
@@ -5406,13 +5406,13 @@ var require_cjs5 = __commonJS({
       return { var: CSSvar, value: val, fontFace };
     };
     var getFontFamily5 = (key, factory) => {
-      const CONFIG2 = getActiveConfig();
-      const { FONT_FAMILY: FONT_FAMILY2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { FONT_FAMILY: FONT_FAMILY2 } = CONFIG22;
       return getDefaultOrFirstKey(factory || FONT_FAMILY2, key);
     };
     var setFontFamily = (val, key) => {
-      const CONFIG2 = getActiveConfig();
-      const { FONT_FAMILY: FONT_FAMILY2, FONT_FAMILY_TYPES: FONT_FAMILY_TYPES2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { FONT_FAMILY: FONT_FAMILY2, FONT_FAMILY_TYPES: FONT_FAMILY_TYPES2 } = CONFIG22;
       let { value, type } = val;
       if (val.isDefault)
         FONT_FAMILY2.default = key;
@@ -5424,8 +5424,8 @@ var require_cjs5 = __commonJS({
     };
     var import_utils142 = __toESM2(require_cjs32(), 1);
     var runThroughMedia = (props3) => {
-      const CONFIG2 = getActiveConfig();
-      const { TYPOGRAPHY: TYPOGRAPHY2, MEDIA: MEDIA2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { TYPOGRAPHY: TYPOGRAPHY2, MEDIA: MEDIA2 } = CONFIG22;
       for (const prop in props3) {
         const mediaProps = props3[prop];
         if (prop.slice(0, 1) === "@") {
@@ -5454,7 +5454,7 @@ var require_cjs5 = __commonJS({
       }
     };
     var applyHeadings = (props3) => {
-      const CONFIG2 = getActiveConfig();
+      const CONFIG22 = getActiveConfig2();
       if (props3.h1Matches) {
         const unit = props3.unit;
         const HEADINGS = findHeadings(props3);
@@ -5463,7 +5463,7 @@ var require_cjs5 = __commonJS({
           const headerName = `h${parseInt(k) + 1}`;
           const headerStyle = templates[headerName];
           templates[headerName] = {
-            fontSize: CONFIG2.useVariable ? `var(${HEADINGS[k].variable})` : `${HEADINGS[k].scaling}${unit}`,
+            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,
@@ -5473,16 +5473,16 @@ var require_cjs5 = __commonJS({
       }
     };
     var applyTypographySequence = () => {
-      const CONFIG2 = getActiveConfig();
-      const { TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG22;
       generateSequence(TYPOGRAPHY2);
       applyHeadings(TYPOGRAPHY2);
       applySequenceVars(TYPOGRAPHY2);
       runThroughMedia(TYPOGRAPHY2);
     };
     var getFontSizeByKey5 = (value) => {
-      const CONFIG2 = getActiveConfig();
-      const { TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG22;
       return getSequenceValuePropertyPair(
         value,
         "fontSize",
@@ -5515,15 +5515,15 @@ var require_cjs5 = __commonJS({
       }
     };
     var applySpacingSequence = () => {
-      const CONFIG2 = getActiveConfig();
-      const { SPACING: SPACING2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { SPACING: SPACING2 } = CONFIG22;
       generateSequence(SPACING2);
       applySequenceVars(SPACING2);
       runThroughMedia2(SPACING2);
     };
     var getSequence = (sequenceProps) => {
-      const CONFIG2 = getActiveConfig();
-      const { SPACING: SPACING2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { SPACING: SPACING2 } = CONFIG22;
       if (!sequenceProps)
         return SPACING2;
       const hasGenerated = Object.keys(sequenceProps.sequence).length > 0;
@@ -5562,8 +5562,8 @@ var require_cjs5 = __commonJS({
       );
     };
     var getSpacingBasedOnRatio13 = (props3, propertyName, val) => {
-      const CONFIG2 = getActiveConfig();
-      const { SPACING: SPACING2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { SPACING: SPACING2 } = CONFIG22;
       const { spacingRatio, unit } = props3;
       const value = val || props3[propertyName];
       if (spacingRatio) {
@@ -5592,19 +5592,19 @@ var require_cjs5 = __commonJS({
       return getSpacingByKey9(value, propertyName);
     };
     var applyTimingSequence = () => {
-      const CONFIG2 = getActiveConfig();
-      const { TIMING: TIMING2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { TIMING: TIMING2 } = CONFIG22;
       generateSequence(TIMING2);
       applySequenceVars(TIMING2);
     };
     var getTimingFunction9 = (value) => {
-      const CONFIG2 = getActiveConfig();
-      const { TIMING: TIMING2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { TIMING: TIMING2 } = CONFIG22;
       return TIMING2[value] || TIMING2[toCamelCase(value)] || value;
     };
     var getTimingByKey5 = (value, property = "timing") => {
-      const CONFIG2 = getActiveConfig();
-      const { TIMING: TIMING2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { TIMING: TIMING2 } = CONFIG22;
       return getSequenceValuePropertyPair(
         value,
         property,
@@ -5613,8 +5613,8 @@ var require_cjs5 = __commonJS({
     };
     var import_utils21 = __toESM2(require_cjs32(), 1);
     var applyDocument = () => {
-      const CONFIG2 = getActiveConfig();
-      const { DOCUMENT: DOCUMENT2, FONT_FAMILY: FONT_FAMILY2, THEME: THEME2, TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { DOCUMENT: DOCUMENT2, FONT_FAMILY: FONT_FAMILY2, THEME: THEME2, TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG22;
       return (0, import_utils21.merge)(DOCUMENT2, {
         theme: THEME2.document,
         fontFamily: getDefaultOrFirstKey(FONT_FAMILY2),
@@ -5627,36 +5627,36 @@ var require_cjs5 = __commonJS({
       document: import_globals2.document
     };
     var setSVG = (val, key) => {
-      const CONFIG2 = getActiveConfig();
+      const CONFIG22 = getActiveConfig2();
       if (!val) {
-        if (CONFIG2.verbose)
+        if (CONFIG22.verbose)
           console.warn("setSVG: val is not defined", key);
         return;
       }
-      if (CONFIG2.useSvgSprite) {
+      if (CONFIG22.useSvgSprite) {
         return convertSvgToSymbol(key, val);
       }
       return val;
     };
     var appendSVGSprite = (LIBRARY, options = DEF_OPTIONS) => {
-      const CONFIG2 = getActiveConfig();
-      const lib = Object.keys(LIBRARY).length ? {} : CONFIG2.SVG;
+      const CONFIG22 = getActiveConfig2();
+      const lib = Object.keys(LIBRARY).length ? {} : CONFIG22.SVG;
       for (const key in LIBRARY)
-        lib[key] = CONFIG2.SVG[key];
+        lib[key] = CONFIG22.SVG[key];
       appendSVG(lib, options);
     };
     var setIcon = (val, key) => {
-      const CONFIG2 = getActiveConfig();
-      if (CONFIG2.useIconSprite) {
+      const CONFIG22 = getActiveConfig2();
+      if (CONFIG22.useIconSprite) {
         return setSVG(val, key);
       }
       return val;
     };
     var appendIconsSprite = (LIBRARY, options = DEF_OPTIONS) => {
-      const CONFIG2 = getActiveConfig();
-      const lib = Object.keys(LIBRARY).length ? {} : CONFIG2.ICONS;
+      const CONFIG22 = getActiveConfig2();
+      const lib = Object.keys(LIBRARY).length ? {} : CONFIG22.ICONS;
       for (const key in LIBRARY)
-        lib[key] = CONFIG2.ICONS[key];
+        lib[key] = CONFIG22.ICONS[key];
       appendSVG(lib, options);
     };
     var createSVGSpriteElement = (options = { isRoot: true }) => {
@@ -5671,10 +5671,10 @@ var require_cjs5 = __commonJS({
       return svgElem;
     };
     var appendSVG = (lib, options = DEF_OPTIONS) => {
-      const CONFIG2 = getActiveConfig();
+      const CONFIG22 = getActiveConfig2();
       const doc = options.document || import_globals2.document;
       if (!doc) {
-        if (CONFIG2.verbose) {
+        if (CONFIG22.verbose) {
           console.warn("To append SVG sprites it should be run in browser environment");
         }
         return generateSprite(lib);
@@ -5693,14 +5693,14 @@ var require_cjs5 = __commonJS({
     };
     var import_utils24 = __toESM2(require_cjs32(), 1);
     var applyReset = (reset = {}) => {
-      const CONFIG2 = getActiveConfig();
-      const { RESET: RESET2, TYPOGRAPHY: TYPOGRAPHY2, DOCUMENT: DOCUMENT2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { RESET: RESET2, TYPOGRAPHY: TYPOGRAPHY2, DOCUMENT: DOCUMENT2 } = CONFIG22;
       if (RESET2) {
         if (RESET2[":root"]) {
           const configReset = RESET2;
           const configTemplates = TYPOGRAPHY2.templates;
           configReset.body = {
-            ...CONFIG2.useDocumentTheme ? getMediaTheme5("document", `@${CONFIG2.globalTheme}`) : {},
+            ...CONFIG22.useDocumentTheme ? getMediaTheme5("document", `@${CONFIG22.globalTheme}`) : {},
             ...configTemplates.body
           };
           configReset.h1 = configTemplates.h1;
@@ -5723,7 +5723,7 @@ var require_cjs5 = __commonJS({
             WebkitFontSmoothing: "antialiased",
             scrollBehavior: "smooth",
             fontSize: TYPOGRAPHY2.browserDefault + "px",
-            ...CONFIG2.useDocumentTheme ? getMediaTheme5("document", `@${CONFIG2.globalTheme}`) : {},
+            ...CONFIG22.useDocumentTheme ? getMediaTheme5("document", `@${CONFIG22.globalTheme}`) : {},
             fontFamily: DOCUMENT2.fontFamily,
             lineHeight: DOCUMENT2.lineHeight
           },
@@ -5732,7 +5732,7 @@ var require_cjs5 = __commonJS({
             height: "100%",
             margin: 0,
             fontFamily: DOCUMENT2.fontFamily,
-            fontSize: TYPOGRAPHY2.base / TYPOGRAPHY2.browserDefault + CONFIG2.UNIT.default,
+            fontSize: TYPOGRAPHY2.base / TYPOGRAPHY2.browserDefault + CONFIG22.UNIT.default,
             ...templates,
             ...body
           },
@@ -5804,15 +5804,15 @@ var require_cjs5 = __commonJS({
       }).join(" ");
     }).join(",");
     var transformBackgroundImage5 = (backgroundImage, globalTheme) => {
-      const CONFIG2 = getActiveConfig();
+      const CONFIG22 = getActiveConfig2();
       return backgroundImage.split(", ").map((v) => {
         if (v.slice(0, 2) === "--")
           return `var(${v})`;
         if (v.includes("url") || v.includes("gradient"))
           return v;
-        else if (CONFIG2.GRADIENT[backgroundImage]) {
+        else if (CONFIG22.GRADIENT[backgroundImage]) {
           return {
-            backgroundImage: getMediaColor9(backgroundImage, globalTheme || CONFIG2.globalTheme)
+            backgroundImage: getMediaColor9(backgroundImage, globalTheme || CONFIG22.globalTheme)
           };
         } else if (v.includes("/") || v.includes("http"))
           return `url(${v})`;
@@ -5873,27 +5873,27 @@ var require_cjs5 = __commonJS({
       animation: setSameValue
     };
     var setValue = (FACTORY_NAME, value, key) => {
-      const CONFIG2 = getActiveConfig();
+      const CONFIG22 = getActiveConfig2();
       const factoryName = FACTORY_NAME.toLowerCase();
-      const FACTORY2 = CONFIG2[FACTORY_NAME];
+      const FACTORY2 = CONFIG22[FACTORY_NAME];
       if (VALUE_TRANSFORMERS[factoryName]) {
         const result = VALUE_TRANSFORMERS[factoryName](value, key);
         FACTORY2[key] = result;
         return FACTORY2;
       }
-      if (CONFIG2.verbose)
+      if (CONFIG22.verbose)
         console.warn("Can not find", factoryName, "method in scratch");
     };
     var setEach = (factoryName, props3) => {
-      const CONFIG2 = getActiveConfig();
+      const CONFIG22 = getActiveConfig2();
       const FACTORY_NAME = factoryName.toUpperCase();
       const keys = Object.keys(props3);
       keys.map((key) => setValue(FACTORY_NAME, props3[key], key));
-      return CONFIG2[FACTORY_NAME];
+      return CONFIG22[FACTORY_NAME];
     };
     var SET_OPTIONS = {};
     var set2 = (recivedConfig, options = SET_OPTIONS) => {
-      let CONFIG2 = getActiveConfig();
+      let CONFIG22 = getActiveConfig2();
       const {
         version,
         verbose,
@@ -5907,28 +5907,28 @@ var require_cjs5 = __commonJS({
         ...config
       } = recivedConfig;
       if (options.newConfig) {
-        CONFIG2 = setActiveConfig(options.newConfig);
+        CONFIG22 = setActiveConfig(options.newConfig);
       }
       if (verbose !== void 0)
-        CONFIG2.verbose = verbose;
+        CONFIG22.verbose = verbose;
       if (useVariable !== void 0)
-        CONFIG2.useVariable = useVariable;
+        CONFIG22.useVariable = useVariable;
       if (useReset !== void 0)
-        CONFIG2.useReset = useReset;
+        CONFIG22.useReset = useReset;
       if (useFontImport !== void 0)
-        CONFIG2.useFontImport = useFontImport;
+        CONFIG22.useFontImport = useFontImport;
       if (useSvgSprite !== void 0)
-        CONFIG2.useSvgSprite = useSvgSprite;
+        CONFIG22.useSvgSprite = useSvgSprite;
       if (useIconSprite !== void 0)
-        CONFIG2.useIconSprite = useIconSprite;
+        CONFIG22.useIconSprite = useIconSprite;
       if (useDocumentTheme !== void 0)
-        CONFIG2.useDocumentTheme = useDocumentTheme;
+        CONFIG22.useDocumentTheme = useDocumentTheme;
       if (globalTheme !== void 0)
-        CONFIG2.globalTheme = globalTheme;
-      if (CONFIG2.verbose)
-        console.log(CONFIG2);
-      if (!CONFIG2.__svg_cache)
-        CONFIG2.__svg_cache = {};
+        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();
@@ -5936,7 +5936,7 @@ var require_cjs5 = __commonJS({
       applyTimingSequence();
       applyDocument();
       applyReset();
-      return CONFIG2;
+      return CONFIG22;
     };
   }
 });
@@ -5985,7 +5985,7 @@ var require_cjs6 = __commonJS({
       scrollToOffset: 0,
       scrollToOptions: { behavior: "smooth" }
     };
-    var router = (element, path, state = {}, options = defaultOptions) => {
+    var router = (path, element, state = {}, options = defaultOptions) => {
       (0, import_utils20.merge)(options, defaultOptions);
       lastLevel = options.lastLevel;
       const [pathname, hash2] = path.split("#");
@@ -6872,7 +6872,7 @@ var require_cjs7 = __commonJS({
       BREAKPOINTS: () => BREAKPOINTS,
       CASES: () => CASES,
       COLOR: () => COLOR,
-      CONFIG: () => CONFIG,
+      CONFIG: () => CONFIG2,
       CSS_VARS: () => CSS_VARS,
       DEVICES: () => DEVICES,
       DOCUMENT: () => DOCUMENT,
@@ -6892,7 +6892,7 @@ var require_cjs7 = __commonJS({
       THEME: () => THEME,
       TIMING: () => TIMING,
       TYPOGRAPHY: () => TYPOGRAPHY,
-      UNIT: () => UNIT5,
+      UNIT: () => UNIT4,
       VALUE_TRANSFORMERS: () => VALUE_TRANSFORMERS,
       activateConfig: () => activateConfig,
       appendIconsSprite: () => appendIconsSprite,
@@ -6912,7 +6912,7 @@ var require_cjs7 = __commonJS({
       generateSequence: () => generateSequence,
       generateSprite: () => generateSprite,
       generateSubSequence: () => generateSubSequence,
-      getActiveConfig: () => getActiveConfig,
+      getActiveConfig: () => getActiveConfig2,
       getColor: () => getColor5,
       getColorShade: () => getColorShade,
       getDefaultOrFirstKey: () => getDefaultOrFirstKey,
@@ -7228,7 +7228,7 @@ var require_cjs7 = __commonJS({
       THEME: () => THEME,
       TIMING: () => TIMING,
       TYPOGRAPHY: () => TYPOGRAPHY,
-      UNIT: () => UNIT5
+      UNIT: () => UNIT4
     });
     var SEQUENCE = {
       "minor-second": 1.067,
@@ -7256,7 +7256,7 @@ var require_cjs7 = __commonJS({
       // archimedes
       "double-octave": 4
     };
-    var UNIT5 = {
+    var UNIT4 = {
       default: "em"
     };
     var defaultProps = {
@@ -7367,17 +7367,17 @@ var require_cjs7 = __commonJS({
     var SVG_DATA = {};
     var RESET = {};
     var CSS_VARS = {};
-    var CONFIG = {
+    var CONFIG2 = {
       verbose: false,
       useVariable: true,
       useReset: true,
       CSS_VARS,
       ...defaultConfig_exports
     };
-    var cachedConfig = (0, import_utils32.deepClone)(CONFIG);
+    var cachedConfig = (0, import_utils32.deepClone)(CONFIG2);
     var FACTORY = {
       active: "0",
-      0: CONFIG
+      0: CONFIG2
     };
     var activateConfig = (def) => {
       if ((0, import_utils32.isDefined)(def)) {
@@ -7385,7 +7385,7 @@ var require_cjs7 = __commonJS({
       }
       return FACTORY[def || FACTORY.active];
     };
-    var getActiveConfig = (def) => {
+    var getActiveConfig2 = (def) => {
       return FACTORY[def || FACTORY.active];
     };
     var setActiveConfig = (newConfig) => {
@@ -7494,8 +7494,8 @@ var require_cjs7 = __commonJS({
       return sequenceProps;
     };
     var getSequenceValue = (value = "A", sequenceProps) => {
-      const CONFIG2 = getActiveConfig();
-      const { UNIT: UNIT22 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { UNIT: UNIT22 } = CONFIG22;
       const {
         sequence,
         unit = UNIT22.default,
@@ -7529,11 +7529,11 @@ var require_cjs7 = __commonJS({
         return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
       }
       if (!sequence[absValue] && absValue.length === 2) {
-        if (CONFIG2.verbose)
+        if (CONFIG22.verbose)
           console.warn(absValue, "- value is not found because `subSequence` is set to false");
         absValue = absValue.slice(0, 1);
       }
-      if (useVariable || CONFIG2.useVariable) {
+      if (useVariable || CONFIG22.useVariable) {
         const varValue2 = `var(${prefix2}${absValue}${mediaName})`;
         return isNegative ? `calc(${varValue2} * -1)` : varValue2;
       }
@@ -7564,16 +7564,16 @@ var require_cjs7 = __commonJS({
     };
     var import_utils62 = __toESM2(require_cjs32(), 1);
     var setVariables = (result, key) => {
-      const CONFIG2 = getActiveConfig();
-      const { CSS_VARS: CSS_VARS2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      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 CONFIG2 = getActiveConfig();
-      const { UNIT: UNIT22, MEDIA: MEDIA2, TIMING: TIMING2, CSS_VARS: CSS_VARS2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { UNIT: UNIT22, MEDIA: MEDIA2, TIMING: TIMING2, CSS_VARS: CSS_VARS2 } = CONFIG22;
       const unit = props3.unit || UNIT22.default;
       const { sequence, scales } = props3;
       for (const key in sequence) {
@@ -7582,7 +7582,7 @@ var require_cjs7 = __commonJS({
         if (mediaName) {
           const query = MEDIA2[mediaName];
           if (!query) {
-            if (CONFIG2.verbose)
+            if (CONFIG22.verbose)
               console.warn("Can't find query ", query);
           }
           let underMediaQuery = CSS_VARS2[`@media ${query}`];
@@ -7602,13 +7602,13 @@ var require_cjs7 = __commonJS({
     };
     var import_utils72 = __toESM2(require_cjs32(), 1);
     var generateSprite = (icons) => {
-      const CONFIG2 = getActiveConfig();
+      const CONFIG22 = getActiveConfig2();
       let sprite = "";
       for (const key in icons) {
-        if (CONFIG2.__svg_cache[key])
+        if (CONFIG22.__svg_cache[key])
           continue;
         else
-          CONFIG2.__svg_cache[key] = true;
+          CONFIG22.__svg_cache[key] = true;
         sprite += icons[key];
       }
       return sprite;
@@ -7675,9 +7675,9 @@ var require_cjs7 = __commonJS({
     });
     var import_utils82 = __toESM2(require_cjs32(), 1);
     var getColor5 = (value, key) => {
-      const CONFIG2 = getActiveConfig();
+      const CONFIG22 = getActiveConfig2();
       if (!(0, import_utils82.isString)(value)) {
-        if (CONFIG2.verbose)
+        if (CONFIG22.verbose)
           console.warn(value, "- type for color is not valid");
         return;
       }
@@ -7686,17 +7686,17 @@ var require_cjs7 = __commonJS({
       if (key && value[key])
         value = value[key];
       const [name, alpha, tone] = (0, import_utils82.isArray)(value) ? value : value.split(" ");
-      const { COLOR: COLOR2, GRADIENT: GRADIENT2 } = CONFIG2;
+      const { COLOR: COLOR2, GRADIENT: GRADIENT2 } = CONFIG22;
       let val = COLOR2[name] || GRADIENT2[name];
       if (!val) {
-        if (CONFIG2.verbose)
+        if (CONFIG22.verbose)
           console.warn("Can't find color ", name);
         return value;
       }
       if (key) {
         if (val[key])
           val = val[key];
-        else if (CONFIG2.verbose)
+        else if (CONFIG22.verbose)
           console.warn(value, " - does not have ", key);
       }
       let rgb = val.rgb;
@@ -7722,23 +7722,23 @@ var require_cjs7 = __commonJS({
         }
         if (alpha)
           return `rgba(${rgb}, ${alpha})`;
-        return CONFIG2.useVariable ? `var(${val.var})` : `rgb(${rgb})`;
+        return CONFIG22.useVariable ? `var(${val.var})` : `rgb(${rgb})`;
       } else
-        return CONFIG2.useVariable ? `var(${val.var})` : val.value;
+        return CONFIG22.useVariable ? `var(${val.var})` : val.value;
     };
     var getMediaColor9 = (value, globalTheme) => {
-      const CONFIG2 = getActiveConfig();
+      const CONFIG22 = getActiveConfig2();
       if (!globalTheme)
-        globalTheme = CONFIG2.globalTheme;
+        globalTheme = CONFIG22.globalTheme;
       if (!(0, import_utils82.isString)(value)) {
-        if (CONFIG2.verbose)
+        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 } = CONFIG2;
+      const { COLOR: COLOR2, GRADIENT: GRADIENT2 } = CONFIG22;
       const val = COLOR2[name] || GRADIENT2[name];
       const isObj = (0, import_utils82.isObject)(val);
       if (isObj && val.value)
@@ -7749,20 +7749,20 @@ var require_cjs7 = __commonJS({
         else {
           const obj = {};
           for (const mediaName in val) {
-            const query = CONFIG2.MEDIA[mediaName.slice(1)];
+            const query = CONFIG22.MEDIA[mediaName.slice(1)];
             const media = `@media screen and ${query}`;
             obj[media] = getColor5(value, mediaName);
           }
           return obj;
         }
       } else {
-        if (CONFIG2.verbose)
+        if (CONFIG22.verbose)
           console.warn("Can't find color", value);
         return value;
       }
     };
     var setColor = (val, key, suffix) => {
-      const CONFIG2 = getActiveConfig();
+      const CONFIG22 = getActiveConfig2();
       if ((0, import_utils82.isString)(val) && val.slice(0, 2) === "--")
         val = getColor5(val.slice(2));
       if ((0, import_utils82.isArray)(val)) {
@@ -7782,8 +7782,8 @@ var require_cjs7 = __commonJS({
       const alpha = parseFloat(a.toFixed(2));
       const rgb = `${r}, ${g}, ${b}`;
       const value = `rgba(${rgb}, ${alpha})`;
-      if (CONFIG2.useVariable) {
-        CONFIG2.CSS_VARS[CSSVar] = value;
+      if (CONFIG22.useVariable) {
+        CONFIG22.CSS_VARS[CSSVar] = value;
       }
       return {
         var: CSSVar,
@@ -7793,7 +7793,7 @@ var require_cjs7 = __commonJS({
       };
     };
     var setGradient = (val, key, suffix) => {
-      const CONFIG2 = getActiveConfig();
+      const CONFIG22 = getActiveConfig2();
       if ((0, import_utils82.isString)(val) && val.slice(0, 2) === "--")
         val = getColor5(val.slice(2));
       if ((0, import_utils82.isArray)(val)) {
@@ -7809,8 +7809,8 @@ var require_cjs7 = __commonJS({
         return obj;
       }
       const CSSVar = `--gradient-${key}` + (suffix ? `-${suffix}` : "");
-      if (CONFIG2.useVariable) {
-        CONFIG2.CSS_VARS[CSSVar] = val.value || val;
+      if (CONFIG22.useVariable) {
+        CONFIG22.CSS_VARS[CSSVar] = val.value || val;
       }
       return {
         var: CSSVar,
@@ -7836,10 +7836,10 @@ var require_cjs7 = __commonJS({
       return theme.value;
     };
     var getTheme5 = (value, modifier) => {
-      const CONFIG2 = getActiveConfig();
-      if (CONFIG2.useVariable)
+      const CONFIG22 = getActiveConfig2();
+      if (CONFIG22.useVariable)
         return getMediaTheme5(value, modifier);
-      const { THEME: THEME2 } = CONFIG2;
+      const { THEME: THEME2 } = CONFIG22;
       if ((0, import_utils102.isString)(value)) {
         const [theme, subtheme] = value.split(" ");
         const isOurTheme = THEME2[theme];
@@ -7915,7 +7915,7 @@ var require_cjs7 = __commonJS({
       return theme;
     };
     var setHelpers = (theme, value) => {
-      const CONFIG2 = getActiveConfig();
+      const CONFIG22 = getActiveConfig2();
       const { helpers } = theme;
       if (!helpers)
         return;
@@ -7923,7 +7923,7 @@ var require_cjs7 = __commonJS({
       keys.map((key) => {
         const helper = helpers[key];
         if ((0, import_utils102.isString)(helper))
-          helpers[key] = CONFIG2.THEME[helper];
+          helpers[key] = CONFIG22.THEME[helper];
         else
           getThemeValue(helpers[key]);
         return theme;
@@ -7931,8 +7931,8 @@ var require_cjs7 = __commonJS({
       return theme;
     };
     var setTheme = (val, key) => {
-      const CONFIG2 = getActiveConfig();
-      if (CONFIG2.useVariable)
+      const CONFIG22 = getActiveConfig2();
+      if (CONFIG22.useVariable)
         return setMediaTheme(val, key);
       const { state, media, helpers } = val;
       const value = setThemeValue(val, key);
@@ -7943,8 +7943,8 @@ var require_cjs7 = __commonJS({
       return { var: CSSvar, value, state, media, helpers };
     };
     var setMediaTheme = (val, key, suffix, prefers) => {
-      const CONFIG2 = getActiveConfig();
-      const { CSS_VARS: CSS_VARS2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { CSS_VARS: CSS_VARS2 } = CONFIG22;
       const theme = { value: val };
       if ((0, import_utils102.isObjectLike)(val)) {
         for (const param in val) {
@@ -7958,7 +7958,7 @@ var require_cjs7 = __commonJS({
             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 (CONFIG2.useVariable) {
+            if (CONFIG22.useVariable) {
               CSS_VARS2[CSSVar] = color;
               theme[param] = `var(${CSSVar})`;
             } else {
@@ -7975,7 +7975,7 @@ var require_cjs7 = __commonJS({
         }
       }
       if ((0, import_utils102.isString)(val) && val.slice(0, 2) === "--") {
-        const { THEME: THEME2 } = CONFIG2;
+        const { THEME: THEME2 } = CONFIG22;
         const value = THEME2[val.slice(2)];
         const getReferenced = getMediaTheme5(value, prefers);
         return getReferenced;
@@ -7983,13 +7983,13 @@ var require_cjs7 = __commonJS({
       return theme;
     };
     var recursiveTheme = (val) => {
-      const CONFIG2 = getActiveConfig();
+      const CONFIG22 = getActiveConfig2();
       const obj = {};
       for (const param in val) {
         const symb = param.slice(0, 1);
         if ((0, import_utils102.isObjectLike)(val[param])) {
           if (symb === "@") {
-            const query = CONFIG2.MEDIA[param.slice(1)];
+            const query = CONFIG22.MEDIA[param.slice(1)];
             const media = `@media screen and ${query}`;
             obj[media] = recursiveTheme(val[param]);
           } else if (symb === ":") {
@@ -8015,16 +8015,16 @@ var require_cjs7 = __commonJS({
         return val;
     };
     var getMediaTheme5 = (val, mod) => {
-      const CONFIG2 = getActiveConfig();
+      const CONFIG22 = getActiveConfig2();
       if ((0, import_utils102.isString)(val) && val.slice(0, 2) === "--")
         val = getMediaTheme5(val.slice(2));
       if (!val || !(0, import_utils102.isString)(val)) {
-        if (CONFIG2.verbose)
+        if (CONFIG22.verbose)
           console.warn(val, "- theme is not string");
         return;
       }
       const [name, ...modifier] = (0, import_utils102.isArray)(val) ? val : val.split(" ");
-      let value = CONFIG2.THEME[name];
+      let value = CONFIG22.THEME[name];
       if (value && (modifier || mod)) {
         value = findModifier(value, modifier.length ? modifier : mod);
       }
@@ -8038,13 +8038,13 @@ var require_cjs7 = __commonJS({
       return { var: CSSvar, value: val, fontFace };
     };
     var getFontFamily5 = (key, factory) => {
-      const CONFIG2 = getActiveConfig();
-      const { FONT_FAMILY: FONT_FAMILY2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { FONT_FAMILY: FONT_FAMILY2 } = CONFIG22;
       return getDefaultOrFirstKey(factory || FONT_FAMILY2, key);
     };
     var setFontFamily = (val, key) => {
-      const CONFIG2 = getActiveConfig();
-      const { FONT_FAMILY: FONT_FAMILY2, FONT_FAMILY_TYPES: FONT_FAMILY_TYPES2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { FONT_FAMILY: FONT_FAMILY2, FONT_FAMILY_TYPES: FONT_FAMILY_TYPES2 } = CONFIG22;
       let { value, type } = val;
       if (val.isDefault)
         FONT_FAMILY2.default = key;
@@ -8056,8 +8056,8 @@ var require_cjs7 = __commonJS({
     };
     var import_utils142 = __toESM2(require_cjs32(), 1);
     var runThroughMedia = (props3) => {
-      const CONFIG2 = getActiveConfig();
-      const { TYPOGRAPHY: TYPOGRAPHY2, MEDIA: MEDIA2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { TYPOGRAPHY: TYPOGRAPHY2, MEDIA: MEDIA2 } = CONFIG22;
       for (const prop in props3) {
         const mediaProps = props3[prop];
         if (prop.slice(0, 1) === "@") {
@@ -8086,7 +8086,7 @@ var require_cjs7 = __commonJS({
       }
     };
     var applyHeadings = (props3) => {
-      const CONFIG2 = getActiveConfig();
+      const CONFIG22 = getActiveConfig2();
       if (props3.h1Matches) {
         const unit = props3.unit;
         const HEADINGS = findHeadings(props3);
@@ -8095,7 +8095,7 @@ var require_cjs7 = __commonJS({
           const headerName = `h${parseInt(k) + 1}`;
           const headerStyle = templates[headerName];
           templates[headerName] = {
-            fontSize: CONFIG2.useVariable ? `var(${HEADINGS[k].variable})` : `${HEADINGS[k].scaling}${unit}`,
+            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,
@@ -8105,16 +8105,16 @@ var require_cjs7 = __commonJS({
       }
     };
     var applyTypographySequence = () => {
-      const CONFIG2 = getActiveConfig();
-      const { TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG22;
       generateSequence(TYPOGRAPHY2);
       applyHeadings(TYPOGRAPHY2);
       applySequenceVars(TYPOGRAPHY2);
       runThroughMedia(TYPOGRAPHY2);
     };
     var getFontSizeByKey5 = (value) => {
-      const CONFIG2 = getActiveConfig();
-      const { TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG22;
       return getSequenceValuePropertyPair(
         value,
         "fontSize",
@@ -8147,15 +8147,15 @@ var require_cjs7 = __commonJS({
       }
     };
     var applySpacingSequence = () => {
-      const CONFIG2 = getActiveConfig();
-      const { SPACING: SPACING2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { SPACING: SPACING2 } = CONFIG22;
       generateSequence(SPACING2);
       applySequenceVars(SPACING2);
       runThroughMedia2(SPACING2);
     };
     var getSequence = (sequenceProps) => {
-      const CONFIG2 = getActiveConfig();
-      const { SPACING: SPACING2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { SPACING: SPACING2 } = CONFIG22;
       if (!sequenceProps)
         return SPACING2;
       const hasGenerated = Object.keys(sequenceProps.sequence).length > 0;
@@ -8194,8 +8194,8 @@ var require_cjs7 = __commonJS({
       );
     };
     var getSpacingBasedOnRatio13 = (props3, propertyName, val) => {
-      const CONFIG2 = getActiveConfig();
-      const { SPACING: SPACING2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { SPACING: SPACING2 } = CONFIG22;
       const { spacingRatio, unit } = props3;
       const value = val || props3[propertyName];
       if (spacingRatio) {
@@ -8224,19 +8224,19 @@ var require_cjs7 = __commonJS({
       return getSpacingByKey9(value, propertyName);
     };
     var applyTimingSequence = () => {
-      const CONFIG2 = getActiveConfig();
-      const { TIMING: TIMING2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { TIMING: TIMING2 } = CONFIG22;
       generateSequence(TIMING2);
       applySequenceVars(TIMING2);
     };
     var getTimingFunction9 = (value) => {
-      const CONFIG2 = getActiveConfig();
-      const { TIMING: TIMING2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { TIMING: TIMING2 } = CONFIG22;
       return TIMING2[value] || TIMING2[toCamelCase(value)] || value;
     };
     var getTimingByKey5 = (value, property = "timing") => {
-      const CONFIG2 = getActiveConfig();
-      const { TIMING: TIMING2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { TIMING: TIMING2 } = CONFIG22;
       return getSequenceValuePropertyPair(
         value,
         property,
@@ -8245,8 +8245,8 @@ var require_cjs7 = __commonJS({
     };
     var import_utils21 = __toESM2(require_cjs32(), 1);
     var applyDocument = () => {
-      const CONFIG2 = getActiveConfig();
-      const { DOCUMENT: DOCUMENT2, FONT_FAMILY: FONT_FAMILY2, THEME: THEME2, TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { DOCUMENT: DOCUMENT2, FONT_FAMILY: FONT_FAMILY2, THEME: THEME2, TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG22;
       return (0, import_utils21.merge)(DOCUMENT2, {
         theme: THEME2.document,
         fontFamily: getDefaultOrFirstKey(FONT_FAMILY2),
@@ -8259,36 +8259,36 @@ var require_cjs7 = __commonJS({
       document: import_globals2.document
     };
     var setSVG = (val, key) => {
-      const CONFIG2 = getActiveConfig();
+      const CONFIG22 = getActiveConfig2();
       if (!val) {
-        if (CONFIG2.verbose)
+        if (CONFIG22.verbose)
           console.warn("setSVG: val is not defined", key);
         return;
       }
-      if (CONFIG2.useSvgSprite) {
+      if (CONFIG22.useSvgSprite) {
         return convertSvgToSymbol(key, val);
       }
       return val;
     };
     var appendSVGSprite = (LIBRARY, options = DEF_OPTIONS) => {
-      const CONFIG2 = getActiveConfig();
-      const lib = Object.keys(LIBRARY).length ? {} : CONFIG2.SVG;
+      const CONFIG22 = getActiveConfig2();
+      const lib = Object.keys(LIBRARY).length ? {} : CONFIG22.SVG;
       for (const key in LIBRARY)
-        lib[key] = CONFIG2.SVG[key];
+        lib[key] = CONFIG22.SVG[key];
       appendSVG(lib, options);
     };
     var setIcon = (val, key) => {
-      const CONFIG2 = getActiveConfig();
-      if (CONFIG2.useIconSprite) {
+      const CONFIG22 = getActiveConfig2();
+      if (CONFIG22.useIconSprite) {
         return setSVG(val, key);
       }
       return val;
     };
     var appendIconsSprite = (LIBRARY, options = DEF_OPTIONS) => {
-      const CONFIG2 = getActiveConfig();
-      const lib = Object.keys(LIBRARY).length ? {} : CONFIG2.ICONS;
+      const CONFIG22 = getActiveConfig2();
+      const lib = Object.keys(LIBRARY).length ? {} : CONFIG22.ICONS;
       for (const key in LIBRARY)
-        lib[key] = CONFIG2.ICONS[key];
+        lib[key] = CONFIG22.ICONS[key];
       appendSVG(lib, options);
     };
     var createSVGSpriteElement = (options = { isRoot: true }) => {
@@ -8303,10 +8303,10 @@ var require_cjs7 = __commonJS({
       return svgElem;
     };
     var appendSVG = (lib, options = DEF_OPTIONS) => {
-      const CONFIG2 = getActiveConfig();
+      const CONFIG22 = getActiveConfig2();
       const doc = options.document || import_globals2.document;
       if (!doc) {
-        if (CONFIG2.verbose) {
+        if (CONFIG22.verbose) {
           console.warn("To append SVG sprites it should be run in browser environment");
         }
         return generateSprite(lib);
@@ -8325,14 +8325,14 @@ var require_cjs7 = __commonJS({
     };
     var import_utils24 = __toESM2(require_cjs32(), 1);
     var applyReset = (reset = {}) => {
-      const CONFIG2 = getActiveConfig();
-      const { RESET: RESET2, TYPOGRAPHY: TYPOGRAPHY2, DOCUMENT: DOCUMENT2 } = CONFIG2;
+      const CONFIG22 = getActiveConfig2();
+      const { RESET: RESET2, TYPOGRAPHY: TYPOGRAPHY2, DOCUMENT: DOCUMENT2 } = CONFIG22;
       if (RESET2) {
         if (RESET2[":root"]) {
           const configReset = RESET2;
           const configTemplates = TYPOGRAPHY2.templates;
           configReset.body = {
-            ...CONFIG2.useDocumentTheme ? getMediaTheme5("document", `@${CONFIG2.globalTheme}`) : {},
+            ...CONFIG22.useDocumentTheme ? getMediaTheme5("document", `@${CONFIG22.globalTheme}`) : {},
             ...configTemplates.body
           };
           configReset.h1 = configTemplates.h1;
@@ -8355,7 +8355,7 @@ var require_cjs7 = __commonJS({
             WebkitFontSmoothing: "antialiased",
             scrollBehavior: "smooth",
             fontSize: TYPOGRAPHY2.browserDefault + "px",
-            ...CONFIG2.useDocumentTheme ? getMediaTheme5("document", `@${CONFIG2.globalTheme}`) : {},
+            ...CONFIG22.useDocumentTheme ? getMediaTheme5("document", `@${CONFIG22.globalTheme}`) : {},
             fontFamily: DOCUMENT2.fontFamily,
             lineHeight: DOCUMENT2.lineHeight
           },
@@ -8364,7 +8364,7 @@ var require_cjs7 = __commonJS({
             height: "100%",
             margin: 0,
             fontFamily: DOCUMENT2.fontFamily,
-            fontSize: TYPOGRAPHY2.base / TYPOGRAPHY2.browserDefault + CONFIG2.UNIT.default,
+            fontSize: TYPOGRAPHY2.base / TYPOGRAPHY2.browserDefault + CONFIG22.UNIT.default,
             ...templates,
             ...body
           },
@@ -8436,15 +8436,15 @@ var require_cjs7 = __commonJS({
       }).join(" ");
     }).join(",");
     var transformBackgroundImage5 = (backgroundImage, globalTheme) => {
-      const CONFIG2 = getActiveConfig();
+      const CONFIG22 = getActiveConfig2();
       return backgroundImage.split(", ").map((v) => {
         if (v.slice(0, 2) === "--")
           return `var(${v})`;
         if (v.includes("url") || v.includes("gradient"))
           return v;
-        else if (CONFIG2.GRADIENT[backgroundImage]) {
+        else if (CONFIG22.GRADIENT[backgroundImage]) {
           return {
-            backgroundImage: getMediaColor9(backgroundImage, globalTheme || CONFIG2.globalTheme)
+            backgroundImage: getMediaColor9(backgroundImage, globalTheme || CONFIG22.globalTheme)
           };
         } else if (v.includes("/") || v.includes("http"))
           return `url(${v})`;
@@ -8505,27 +8505,27 @@ var require_cjs7 = __commonJS({
       animation: setSameValue
     };
     var setValue = (FACTORY_NAME, value, key) => {
-      const CONFIG2 = getActiveConfig();
+      const CONFIG22 = getActiveConfig2();
       const factoryName = FACTORY_NAME.toLowerCase();
-      const FACTORY2 = CONFIG2[FACTORY_NAME];
+      const FACTORY2 = CONFIG22[FACTORY_NAME];
       if (VALUE_TRANSFORMERS[factoryName]) {
         const result = VALUE_TRANSFORMERS[factoryName](value, key);
         FACTORY2[key] = result;
         return FACTORY2;
       }
-      if (CONFIG2.verbose)
+      if (CONFIG22.verbose)
         console.warn("Can not find", factoryName, "method in scratch");
     };
     var setEach = (factoryName, props3) => {
-      const CONFIG2 = getActiveConfig();
+      const CONFIG22 = getActiveConfig2();
       const FACTORY_NAME = factoryName.toUpperCase();
       const keys = Object.keys(props3);
       keys.map((key) => setValue(FACTORY_NAME, props3[key], key));
-      return CONFIG2[FACTORY_NAME];
+      return CONFIG22[FACTORY_NAME];
     };
     var SET_OPTIONS = {};
     var set2 = (recivedConfig, options = SET_OPTIONS) => {
-      let CONFIG2 = getActiveConfig();
+      let CONFIG22 = getActiveConfig2();
       const {
         version,
         verbose,
@@ -8539,28 +8539,28 @@ var require_cjs7 = __commonJS({
         ...config
       } = recivedConfig;
       if (options.newConfig) {
-        CONFIG2 = setActiveConfig(options.newConfig);
+        CONFIG22 = setActiveConfig(options.newConfig);
       }
       if (verbose !== void 0)
-        CONFIG2.verbose = verbose;
+        CONFIG22.verbose = verbose;
       if (useVariable !== void 0)
-        CONFIG2.useVariable = useVariable;
+        CONFIG22.useVariable = useVariable;
       if (useReset !== void 0)
-        CONFIG2.useReset = useReset;
+        CONFIG22.useReset = useReset;
       if (useFontImport !== void 0)
-        CONFIG2.useFontImport = useFontImport;
+        CONFIG22.useFontImport = useFontImport;
       if (useSvgSprite !== void 0)
-        CONFIG2.useSvgSprite = useSvgSprite;
+        CONFIG22.useSvgSprite = useSvgSprite;
       if (useIconSprite !== void 0)
-        CONFIG2.useIconSprite = useIconSprite;
+        CONFIG22.useIconSprite = useIconSprite;
       if (useDocumentTheme !== void 0)
-        CONFIG2.useDocumentTheme = useDocumentTheme;
+        CONFIG22.useDocumentTheme = useDocumentTheme;
       if (globalTheme !== void 0)
-        CONFIG2.globalTheme = globalTheme;
-      if (CONFIG2.verbose)
-        console.log(CONFIG2);
-      if (!CONFIG2.__svg_cache)
-        CONFIG2.__svg_cache = {};
+        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();
@@ -8568,7 +8568,7 @@ var require_cjs7 = __commonJS({
       applyTimingSequence();
       applyDocument();
       applyReset();
-      return CONFIG2;
+      return CONFIG22;
     };
   }
 });
@@ -8912,13 +8912,14 @@ var Timing = {
 };
 
 // Atoms/Shape/style.js
+var CONFIG = (0, import_scratch4.getActiveConfig)();
 var depth = {
-  4: { boxShadow: `rgba(0,0,0,.10) 0 2${import_scratch4.UNIT.default} 4${import_scratch4.UNIT.default}` },
-  6: { boxShadow: `rgba(0,0,0,.10) 0 3${import_scratch4.UNIT.default} 6${import_scratch4.UNIT.default}` },
-  10: { boxShadow: `rgba(0,0,0,.10) 0 4${import_scratch4.UNIT.default} 10${import_scratch4.UNIT.default}` },
-  16: { boxShadow: `rgba(0,0,0,.10) 0 8${import_scratch4.UNIT.default} 16${import_scratch4.UNIT.default}` },
-  26: { boxShadow: `rgba(0,0,0,.10) 0 14${import_scratch4.UNIT.default} 26${import_scratch4.UNIT.default}` },
-  42: { boxShadow: `rgba(0,0,0,.10) 0 20${import_scratch4.UNIT.default} 42${import_scratch4.UNIT.default}` }
+  4: { boxShadow: `rgba(0,0,0,.10) 0 2${CONFIG.UNIT.default} 4${CONFIG.UNIT.default}` },
+  6: { boxShadow: `rgba(0,0,0,.10) 0 3${CONFIG.UNIT.default} 6${CONFIG.UNIT.default}` },
+  10: { boxShadow: `rgba(0,0,0,.10) 0 4${CONFIG.UNIT.default} 10${CONFIG.UNIT.default}` },
+  16: { boxShadow: `rgba(0,0,0,.10) 0 8${CONFIG.UNIT.default} 16${CONFIG.UNIT.default}` },
+  26: { boxShadow: `rgba(0,0,0,.10) 0 14${CONFIG.UNIT.default} 26${CONFIG.UNIT.default}` },
+  42: { boxShadow: `rgba(0,0,0,.10) 0 20${CONFIG.UNIT.default} 42${CONFIG.UNIT.default}` }
 };
 var getComputedBackgroundColor = ({ props: props3 }) => {
   return (0, import_scratch4.getColor)(props3.shapeDirectionColor) || (0, import_scratch4.getColor)(props3.borderColor) || (0, import_scratch4.getColor)(props3.backgroundColor) || (0, import_scratch4.getColor)(props3.background);
@@ -11358,9 +11359,10 @@ var import_scratch17 = __toESM(require_cjs5());
 var import_scratch18 = __toESM(require_cjs5());
 var import_utils9 = __toESM(require_cjs4());
 
-// ../../node_modules/@symbo.ls/create-emotion/index.js
+// Datepicker/node_modules/@symbo.ls/emotion/index.js
 var createEmotion4 = (key = "smbls", container) => {
-  return emotion_css_create_instance_esm_default({ key, container });
+  const cleanKey = key.replaceAll(/\./g, "-");
+  return emotion_css_create_instance_esm_default({ key: cleanKey, container });
 };
 var emotion2 = createEmotion4();
 
@@ -11752,7 +11754,16 @@ var import_scratch26 = __toESM(require_cjs());
 // Field/node_modules/@symbo.ls/atoms/Animation.js
 var import_scratch27 = __toESM(require_cjs());
 var import_utils13 = __toESM(require_cjs4());
-var { keyframes: keyframes3 } = emotion2;
+
+// Field/node_modules/@symbo.ls/emotion/index.js
+var createEmotion5 = (key = "smbls", container) => {
+  const cleanKey = key.replaceAll(/\./g, "-");
+  return emotion_css_create_instance_esm_default({ key: cleanKey, container });
+};
+var emotion3 = createEmotion5();
+
+// Field/node_modules/@symbo.ls/atoms/Animation.js
+var { keyframes: keyframes3 } = emotion3;
 
 // Field/index.js
 var Field = {
@@ -12090,7 +12101,16 @@ var import_scratch37 = __toESM(require_cjs7());
 // Notification/node_modules/@symbo.ls/atoms/Animation.js
 var import_scratch38 = __toESM(require_cjs7());
 var import_utils19 = __toESM(require_cjs4());
-var { keyframes: keyframes4 } = emotion2;
+
+// Notification/node_modules/@symbo.ls/emotion/index.js
+var createEmotion6 = (key = "smbls", container) => {
+  const cleanKey = key.replaceAll(/\./g, "-");
+  return emotion_css_create_instance_esm_default({ key: cleanKey, container });
+};
+var emotion4 = createEmotion6();
+
+// Notification/node_modules/@symbo.ls/atoms/Animation.js
+var { keyframes: keyframes4 } = emotion4;
 
 // Notification/index.js
 var Notification = {