@symbo.ls/uikit 2.11.91 → 2.11.94

package/dist/index.cjs.js

@@ -383,10 +383,10 @@ var require_cjs = __commonJS({
           isFunction: () => isFunction22,
           isNot: () => isNot4,
           isNull: () => isNull,
-          isNumber: () => isNumber,
+          isNumber: () => isNumber2,
           isObject: () => isObject7,
           isObjectLike: () => isObjectLike32,
-          isString: () => isString8,
+          isString: () => isString9,
           isUndefined: () => isUndefined,
           isValidHtmlTag: () => isValidHtmlTag
         });
@@ -399,8 +399,8 @@ var require_cjs = __commonJS({
             return false;
           return typeof arg === "object" && arg.constructor === Object;
         };
-        var isString8 = (arg) => typeof arg === "string";
-        var isNumber = (arg) => typeof arg === "number";
+        var isString9 = (arg) => typeof arg === "string";
+        var isNumber2 = (arg) => typeof arg === "number";
         var isFunction22 = (arg) => typeof arg === "function";
         var isBoolean = (arg) => arg === true || arg === false;
         var isNull = (arg) => arg === null;
@@ -411,7 +411,7 @@ var require_cjs = __commonJS({
           return typeof arg === "object";
         };
         var isDefined2 = (arg) => {
-          return isObject7(arg) || isObjectLike32(arg) || isString8(arg) || isNumber(arg) || isFunction22(arg) || isArray62(arg) || isObjectLike32(arg) || isBoolean(arg) || isNull(arg);
+          return isObject7(arg) || isObjectLike32(arg) || isString9(arg) || isNumber2(arg) || isFunction22(arg) || isArray62(arg) || isObjectLike32(arg) || isBoolean(arg) || isNull(arg);
         };
         var isUndefined = (arg) => {
           return arg === void 0;
@@ -420,8 +420,8 @@ var require_cjs = __commonJS({
           boolean: isBoolean,
           array: isArray62,
           object: isObject7,
-          string: isString8,
-          number: isNumber,
+          string: isString9,
+          number: isNumber2,
           null: isNull,
           function: isFunction22,
           objectLike: isObjectLike32,
@@ -1157,6 +1157,7 @@ var require_cjs = __commonJS({
       getFontSizeByKey: () => getFontSizeByKey4,
       getMediaColor: () => getMediaColor7,
       getMediaTheme: () => getMediaTheme4,
+      getRgbTone: () => getRgbTone,
       getSequenceValue: () => getSequenceValue,
       getSequenceValuePropertyPair: () => getSequenceValuePropertyPair,
       getSpacingBasedOnRatio: () => getSpacingBasedOnRatio10,
@@ -1224,6 +1225,7 @@ var require_cjs = __commonJS({
       getFontFaceEachString: () => getFontFaceEachString,
       getFontFaceString: () => getFontFaceString,
       getFontFormat: () => getFontFormat,
+      getRgbTone: () => getRgbTone,
       getSequenceValue: () => getSequenceValue,
       getSequenceValuePropertyPair: () => getSequenceValuePropertyPair,
       hexToRgb: () => hexToRgb,
@@ -1245,6 +1247,7 @@ var require_cjs = __commonJS({
       setVariables: () => setVariables
     });
     var import_globals = __toESM2(require_cjs11(), 1);
+    var import_utils16 = __toESM2(require_cjs42(), 1);
     var ENV = "development";
     var colorStringToRgbaArray = (color) => {
       if (color === "")
@@ -1297,7 +1300,7 @@ var require_cjs = __commonJS({
       return [r, g, b];
     };
     var rgbToHex = (r, g, b) => {
-      return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+      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);
@@ -1349,7 +1352,7 @@ var require_cjs = __commonJS({
         g = 255;
       else if (g < 0)
         g = 0;
-      return (g | b << 8 | r << 16).toString(16);
+      return ((g | b << 8 | r << 16) + 16777216).toString(16).slice(1);
     };
     var mixTwoRgba = (colorA, colorB, range = 0.5) => {
       const arr = [];
@@ -1371,6 +1374,24 @@ var require_cjs = __commonJS({
       arr[3] = opacity;
       return `rgba(${arr})`;
     };
+    var getRgbTone = (rgb, tone) => {
+      if ((0, import_utils16.isString)(rgb))
+        rgb = rgb.split(", ").map((v) => parseFloat(v));
+      if ((0, import_utils16.isNumber)(tone))
+        tone += "";
+      const toHex = rgbArrayToHex(rgb);
+      const abs2 = tone.slice(0, 1);
+      if (abs2 === "-" || abs2 === "+") {
+        const colorShade = getColorShade(toHex, parseFloat(tone));
+        return hexToRgbArray(colorShade).join(", ");
+      } else {
+        const [r, g, b] = rgb;
+        const hsl = rgbToHSL(r, g, b);
+        const [h, s, l] = hsl;
+        const newRgb = hslToRgb(h, s, parseFloat(tone) / 100 * 255);
+        return newRgb;
+      }
+    };
     var returnSubThemeOrDefault = (orig, theme) => {
       if (!orig)
         return;
@@ -1419,9 +1440,9 @@ var require_cjs = __commonJS({
       const keys = Object.keys(LIBRARY);
       return keys.map((key) => getFontFaceEachString(key, LIBRARY[key].value));
     };
-    var import_utils42 = __toESM2(require_cjs42(), 1);
+    var import_utils52 = __toESM2(require_cjs42(), 1);
+    var import_utils32 = __toESM2(require_cjs42());
     var import_utils22 = __toESM2(require_cjs42());
-    var import_utils16 = __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();
@@ -1429,14 +1450,14 @@ var require_cjs = __commonJS({
     };
     var toDashCase = (val) => val.replace(/[^a-zA-Z0-9]/g, " ").trim().toLowerCase().replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
     var arrayzeValue = (val) => {
-      if ((0, import_utils22.isString)(val))
+      if ((0, import_utils32.isString)(val))
         return val.split(" ");
-      if ((0, import_utils22.isObject)(val))
+      if ((0, import_utils32.isObject)(val))
         return Object.keys(val).map((v) => val[v]);
-      if ((0, import_utils22.isArray)(val))
+      if ((0, import_utils32.isArray)(val))
         return val;
     };
-    var import_utils32 = __toESM2(require_cjs42(), 1);
+    var import_utils42 = __toESM2(require_cjs42(), 1);
     var defaultConfig_exports = {};
     __export2(defaultConfig_exports, {
       ANIMATION: () => ANIMATION,
@@ -1607,13 +1628,13 @@ var require_cjs = __commonJS({
       CSS_VARS,
       ...defaultConfig_exports
     };
-    var cachedConfig = (0, import_utils32.deepClone)(CONFIG4);
+    var cachedConfig = (0, import_utils42.deepClone)(CONFIG4);
     var FACTORY = {
       active: "0",
       0: CONFIG4
     };
     var activateConfig = (def) => {
-      if ((0, import_utils32.isDefined)(def)) {
+      if ((0, import_utils42.isDefined)(def)) {
         FACTORY.active = def;
       }
       return FACTORY[def || FACTORY.active];
@@ -1622,10 +1643,10 @@ var require_cjs = __commonJS({
       return FACTORY[def || FACTORY.active];
     };
     var setActiveConfig = (newConfig) => {
-      if (!(0, import_utils32.isObject)(newConfig))
+      if (!(0, import_utils42.isObject)(newConfig))
         return;
       FACTORY.active = "1";
-      FACTORY["1"] = (0, import_utils32.deepMerge)(newConfig, (0, import_utils32.deepClone)(cachedConfig));
+      FACTORY["1"] = (0, import_utils42.deepMerge)(newConfig, (0, import_utils42.deepClone)(cachedConfig));
       return newConfig;
     };
     var numToLetterMap = {
@@ -1734,7 +1755,7 @@ var require_cjs = __commonJS({
         unit = UNIT2.default,
         useVariable
       } = sequenceProps;
-      if ((0, import_utils42.isString)(value) && value.slice(0, 2) === "--")
+      if ((0, import_utils52.isString)(value) && value.slice(0, 2) === "--")
         return `var(${value})`;
       const prefix2 = `--${toDashCase(sequenceProps.type.replace(".", "-"))}-`;
       const startsWithDashOrLetterRegex = /^-?[a-zA-Z]/i;
@@ -1795,11 +1816,11 @@ var require_cjs = __commonJS({
         return sequence[findLetter];
       });
     };
-    var import_utils62 = __toESM2(require_cjs42(), 1);
+    var import_utils72 = __toESM2(require_cjs42(), 1);
     var setVariables = (result, key) => {
       const CONFIG22 = getActiveConfig4();
       const { CSS_VARS: CSS_VARS2 } = CONFIG22;
-      if ((0, import_utils62.isObjectLike)(result.value)) {
+      if ((0, import_utils72.isObjectLike)(result.value)) {
       } else {
         CSS_VARS2[result.var] = result.value;
       }
@@ -1833,7 +1854,7 @@ var require_cjs = __commonJS({
         }
       }
     };
-    var import_utils72 = __toESM2(require_cjs42(), 1);
+    var import_utils82 = __toESM2(require_cjs42(), 1);
     var generateSprite = (icons) => {
       const CONFIG22 = getActiveConfig4();
       let sprite = "";
@@ -1847,7 +1868,7 @@ var require_cjs = __commonJS({
       return sprite;
     };
     var parseRootAttributes = (htmlString) => {
-      if (!(0, import_utils72.isString)(htmlString)) {
+      if (!(0, import_utils82.isString)(htmlString)) {
         return console.warn(`parseRootAttributes: ${htmlString} is not a string`);
       }
       const match2 = htmlString.match(/<svg\s+(.*?)>/);
@@ -1867,7 +1888,7 @@ var require_cjs = __commonJS({
       const urlRegex = /url\(#([^)]*)\)/g;
       const matches = code.match(/id="([^"]*)"/g);
       let replacedCode = code;
-      if ((0, import_utils72.isArray)(matches)) {
+      if ((0, import_utils82.isArray)(matches)) {
         matches.forEach(() => {
           const randomKey = Math.floor(Math.random() * 1e5);
           replacedCode = code.replace(idRegex, `id="${key}-${randomKey}"`).replace(urlRegex, `url(#${key}-${randomKey})`);
@@ -1920,10 +1941,10 @@ var require_cjs = __commonJS({
       setSVG: () => setSVG,
       setTheme: () => setTheme
     });
-    var import_utils82 = __toESM2(require_cjs42(), 1);
+    var import_utils92 = __toESM2(require_cjs42(), 1);
     var getColor4 = (value, key, config) => {
       const CONFIG22 = config || getActiveConfig4();
-      if (!(0, import_utils82.isString)(value)) {
+      if (!(0, import_utils92.isString)(value)) {
         if (CONFIG22.verbose)
           console.warn(value, "- type for color is not valid");
         return;
@@ -1932,7 +1953,7 @@ var require_cjs = __commonJS({
         return `var(${value})`;
       if (key && value[key])
         value = value[key];
-      const [name, alpha, tone] = (0, import_utils82.isArray)(value) ? value : value.split(" ");
+      const [name, alpha, tone] = (0, import_utils92.isArray)(value) ? value : value.split(" ");
       const { COLOR: COLOR2, GRADIENT: GRADIENT2 } = CONFIG22;
       let val = COLOR2[name] || GRADIENT2[name];
       if (!val) {
@@ -1947,22 +1968,11 @@ var require_cjs = __commonJS({
           console.warn(value, " - does not have ", key);
       }
       let rgb = val.rgb;
-      if (!rgb)
+      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;
-        }
+        rgb = getRgbTone(rgb, tone);
         val[tone] = { rgb, var: `${val.var}-${tone}` };
       }
       if (val[tone])
@@ -1975,17 +1985,17 @@ var require_cjs = __commonJS({
       const CONFIG22 = config || getActiveConfig4();
       if (!globalTheme)
         globalTheme = CONFIG22.globalTheme;
-      if (!(0, import_utils82.isString)(value)) {
+      if (!(0, import_utils92.isString)(value)) {
         if (CONFIG22.verbose)
           console.warn(value, "- type for color is not valid");
         return;
       }
       if (value.slice(0, 2) === "--")
         return `var(${value})`;
-      const [name] = (0, import_utils82.isArray)(value) ? value : value.split(" ");
+      const [name] = (0, import_utils92.isArray)(value) ? value : value.split(" ");
       const { COLOR: COLOR2, GRADIENT: GRADIENT2 } = CONFIG22;
       const val = COLOR2[name] || GRADIENT2[name];
-      const isObj = (0, import_utils82.isObject)(val);
+      const isObj = (0, import_utils92.isObject)(val);
       if (isObj && val.value)
         return getColor4(value, `@${globalTheme}`, config);
       else if (isObj) {
@@ -2008,15 +2018,15 @@ var require_cjs = __commonJS({
     };
     var setColor = (val, key, suffix) => {
       const CONFIG22 = getActiveConfig4();
-      if ((0, import_utils82.isString)(val) && val.slice(0, 2) === "--")
+      if ((0, import_utils92.isString)(val) && val.slice(0, 2) === "--")
         val = getColor4(val.slice(2));
-      if ((0, import_utils82.isArray)(val)) {
+      if ((0, import_utils92.isArray)(val)) {
         return {
           "@light": setColor(val[0], key, "light"),
           "@dark": setColor(val[1], key, "dark")
         };
       }
-      if ((0, import_utils82.isObject)(val)) {
+      if ((0, import_utils92.isObject)(val)) {
         const obj = {};
         for (const variant in val)
           obj[variant] = setColor(val[variant], key, variant.slice(0, 1) === "@" ? variant.slice(1) : variant);
@@ -2039,15 +2049,15 @@ var require_cjs = __commonJS({
     };
     var setGradient = (val, key, suffix) => {
       const CONFIG22 = getActiveConfig4();
-      if ((0, import_utils82.isString)(val) && val.slice(0, 2) === "--")
+      if ((0, import_utils92.isString)(val) && val.slice(0, 2) === "--")
         val = getColor4(val.slice(2));
-      if ((0, import_utils82.isArray)(val)) {
+      if ((0, import_utils92.isArray)(val)) {
         return {
           "@light": setGradient(val[0], key, "light"),
           "@dark": setGradient(val[0], key, "dark")
         };
       }
-      if ((0, import_utils82.isObject)(val)) {
+      if ((0, import_utils92.isObject)(val)) {
         const obj = {};
         for (const variant in val)
           obj[variant] = setGradient(val[variant], key, variant.slice(0, 1) === "@" ? variant.slice(1) : variant);
@@ -2062,7 +2072,7 @@ var require_cjs = __commonJS({
         value: val.value || val
       };
     };
-    var import_utils102 = __toESM2(require_cjs42(), 1);
+    var import_utils112 = __toESM2(require_cjs42(), 1);
     var setThemeValue = (theme) => {
       const value = {};
       const { state, media, helpers, ...rest } = theme;
@@ -2085,7 +2095,7 @@ var require_cjs = __commonJS({
       if (CONFIG22.useVariable)
         return getMediaTheme4(value, modifier);
       const { THEME: THEME2 } = CONFIG22;
-      if ((0, import_utils102.isString)(value)) {
+      if ((0, import_utils112.isString)(value)) {
         const [theme, subtheme] = value.split(" ");
         const isOurTheme = THEME2[theme];
         if (isOurTheme) {
@@ -2094,7 +2104,7 @@ var require_cjs = __commonJS({
           value = [theme, subtheme || modifier];
         }
       }
-      if ((0, import_utils102.isObjectLike)(value) && value[1]) {
+      if ((0, import_utils112.isObjectLike)(value) && value[1]) {
         const themeName = value[0];
         const subThemeName = value[1];
         const { helpers, media, state } = THEME2[themeName];
@@ -2104,11 +2114,11 @@ var require_cjs = __commonJS({
           return getThemeValue(helpers[subThemeName]);
         if (state && state[subThemeName])
           return getThemeValue(state[subThemeName]);
-      } else if ((0, import_utils102.isObject)(value))
+      } else if ((0, import_utils112.isObject)(value))
         return setThemeValue(value);
     };
     var setInverseTheme = (theme, variant, value) => {
-      if ((0, import_utils102.isObject)(variant)) {
+      if ((0, import_utils112.isObject)(variant)) {
         theme.variants.inverse.value = setThemeValue(variant);
       } else if (variant === true) {
         const { color, background } = value;
@@ -2123,7 +2133,7 @@ var require_cjs = __commonJS({
     var setPseudo = (theme, key, variant, themeValue) => {
       const result = getTheme4(variant);
       themeValue[`&:${key}`] = result;
-      if ((0, import_utils102.isObject)(variant) && !variant.value)
+      if ((0, import_utils112.isObject)(variant) && !variant.value)
         variant.value = result;
     };
     var setSelectors = (theme, value) => {
@@ -2141,7 +2151,7 @@ var require_cjs = __commonJS({
     var setPrefersScheme = (theme, key, variant, themeValue) => {
       const result = getTheme4(variant);
       themeValue[`@media (prefers-color-scheme: ${key})`] = result;
-      if ((0, import_utils102.isObject)(variant) && !variant.value)
+      if ((0, import_utils112.isObject)(variant) && !variant.value)
         variant.value = result;
     };
     var setMedia = (theme, value) => {
@@ -2167,7 +2177,7 @@ var require_cjs = __commonJS({
       const keys = Object.keys(helpers);
       keys.map((key) => {
         const helper = helpers[key];
-        if ((0, import_utils102.isString)(helper))
+        if ((0, import_utils112.isString)(helper))
           helpers[key] = CONFIG22.THEME[helper];
         else
           getThemeValue(helpers[key]);
@@ -2191,7 +2201,7 @@ var require_cjs = __commonJS({
       const CONFIG22 = getActiveConfig4();
       const { CSS_VARS: CSS_VARS2 } = CONFIG22;
       const theme = { value: val };
-      if ((0, import_utils102.isObjectLike)(val)) {
+      if ((0, import_utils112.isObjectLike)(val)) {
         for (const param in val) {
           const symb = param.slice(0, 1);
           const value = val[param];
@@ -2219,7 +2229,7 @@ var require_cjs = __commonJS({
           };
         }
       }
-      if ((0, import_utils102.isString)(val) && val.slice(0, 2) === "--") {
+      if ((0, import_utils112.isString)(val) && val.slice(0, 2) === "--") {
         const { THEME: THEME2 } = CONFIG22;
         const value = THEME2[val.slice(2)];
         const getReferenced = getMediaTheme4(value, prefers);
@@ -2232,7 +2242,7 @@ var require_cjs = __commonJS({
       const obj = {};
       for (const param in val) {
         const symb = param.slice(0, 1);
-        if ((0, import_utils102.isObjectLike)(val[param])) {
+        if ((0, import_utils112.isObjectLike)(val[param])) {
           if (symb === "@") {
             const query = CONFIG22.MEDIA[param.slice(1)];
             const media = `@media screen and ${query}`;
@@ -2252,23 +2262,23 @@ var require_cjs = __commonJS({
       return val;
     };
     var findModifier = (val, modifier) => {
-      if ((0, import_utils102.isArray)(modifier))
+      if ((0, import_utils112.isArray)(modifier))
         return findModifierFromArray(val, modifier);
-      else if ((0, import_utils102.isString)(modifier) && val[modifier])
+      else if ((0, import_utils112.isString)(modifier) && val[modifier])
         return val[modifier];
       else
         return val;
     };
     var getMediaTheme4 = (val, mod) => {
       const CONFIG22 = getActiveConfig4();
-      if ((0, import_utils102.isString)(val) && val.slice(0, 2) === "--")
+      if ((0, import_utils112.isString)(val) && val.slice(0, 2) === "--")
         val = getMediaTheme4(val.slice(2));
-      if (!val || !(0, import_utils102.isString)(val)) {
+      if (!val || !(0, import_utils112.isString)(val)) {
         if (CONFIG22.verbose)
           console.warn(val, "- theme is not string");
         return;
       }
-      const [name, ...modifier] = (0, import_utils102.isArray)(val) ? val : val.split(" ");
+      const [name, ...modifier] = (0, import_utils112.isArray)(val) ? val : val.split(" ");
       let value = CONFIG22.THEME[name];
       if (value && (modifier || mod)) {
         value = findModifier(value, modifier.length ? modifier : mod);
@@ -2276,7 +2286,7 @@ var require_cjs = __commonJS({
       const r = recursiveTheme(value);
       return r;
     };
-    var import_utils112 = __toESM2(require_cjs42(), 1);
+    var import_utils122 = __toESM2(require_cjs42(), 1);
     var setFont = (val, key) => {
       const CSSvar = `--font-${key}`;
       const fontFace = val[0] ? getFontFaceEach(key, val) : setCustomFontMedia(key, val.url);
@@ -2293,13 +2303,13 @@ var require_cjs = __commonJS({
       let { value, type } = val;
       if (val.isDefault)
         FONT_FAMILY2.default = key;
-      if ((0, import_utils112.isObject)(value))
+      if ((0, import_utils122.isObject)(value))
         value = arrayzeValue(value);
       const CSSvar = `--font-family-${key}`;
       const str = `${value.join(", ")}, ${FONT_FAMILY_TYPES2[type]}`;
       return { var: CSSvar, value: str, arr: value, type };
     };
-    var import_utils142 = __toESM2(require_cjs42(), 1);
+    var import_utils152 = __toESM2(require_cjs42(), 1);
     var runThroughMedia = (props7) => {
       const CONFIG22 = getActiveConfig4();
       const { TYPOGRAPHY: TYPOGRAPHY2, MEDIA: MEDIA2 } = CONFIG22;
@@ -2307,7 +2317,7 @@ var require_cjs = __commonJS({
         const mediaProps = props7[prop];
         if (prop.slice(0, 1) === "@") {
           const { type, base, ratio, range, subSequence, h1Matches, unit } = props7;
-          (0, import_utils142.merge)(mediaProps, {
+          (0, import_utils152.merge)(mediaProps, {
             type,
             base,
             ratio,
@@ -2366,13 +2376,13 @@ var require_cjs = __commonJS({
         TYPOGRAPHY2
       );
     };
-    var import_utils17 = __toESM2(require_cjs42(), 1);
+    var import_utils18 = __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_utils17.merge)(mediaProps, {
+          (0, import_utils18.merge)(mediaProps, {
             type,
             base,
             ratio,
@@ -2411,7 +2421,7 @@ var require_cjs = __commonJS({
       const stack = arrayzeValue(value);
       if (!stack)
         return;
-      if ((0, import_utils17.isString)(value) && value.includes("calc")) {
+      if ((0, import_utils18.isString)(value) && value.includes("calc")) {
         return { [propertyName]: value };
       }
       if (stack.length > 1) {
@@ -2447,7 +2457,7 @@ var require_cjs = __commonJS({
         let sequenceProps = SPACING2[spacingRatio];
         if (!sequenceProps) {
           const { type, base, range, subSequence } = SPACING2;
-          sequenceProps = SPACING2[spacingRatio] = (0, import_utils17.merge)({
+          sequenceProps = SPACING2[spacingRatio] = (0, import_utils18.merge)({
             ratio: spacingRatio,
             type: type + "-" + spacingRatio,
             unit,
@@ -2488,11 +2498,11 @@ var require_cjs = __commonJS({
         TIMING2
       );
     };
-    var import_utils21 = __toESM2(require_cjs42(), 1);
+    var import_utils222 = __toESM2(require_cjs42(), 1);
     var applyDocument = () => {
       const CONFIG22 = getActiveConfig4();
       const { DOCUMENT: DOCUMENT2, FONT_FAMILY: FONT_FAMILY2, THEME: THEME2, TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG22;
-      return (0, import_utils21.merge)(DOCUMENT2, {
+      return (0, import_utils222.merge)(DOCUMENT2, {
         theme: THEME2.document,
         fontFamily: getDefaultOrFirstKey(FONT_FAMILY2),
         fontSize: TYPOGRAPHY2.base,
@@ -2572,7 +2582,7 @@ var require_cjs = __commonJS({
         }
       }
     };
-    var import_utils24 = __toESM2(require_cjs42(), 1);
+    var import_utils25 = __toESM2(require_cjs42(), 1);
     var applyReset = (reset = {}) => {
       const CONFIG22 = getActiveConfig4();
       const { RESET: RESET2, TYPOGRAPHY: TYPOGRAPHY2, DOCUMENT: DOCUMENT2 } = CONFIG22;
@@ -2594,8 +2604,8 @@ var require_cjs = __commonJS({
         const { body, ...templates } = TYPOGRAPHY2.templates;
         const globalTheme = CONFIG22.useDocumentTheme ? getMediaTheme4("document", `@${CONFIG22.globalTheme}`) : {};
         if (RESET2.html)
-          (0, import_utils24.overwriteDeep)(RESET2.html, globalTheme);
-        return (0, import_utils24.deepMerge)((0, import_utils24.merge)(RESET2, reset), {
+          (0, import_utils25.overwriteDeep)(RESET2.html, globalTheme);
+        return (0, import_utils25.deepMerge)((0, import_utils25.merge)(RESET2, reset), {
           html: {
             position: "absolute",
             // overflow: 'hidden',
@@ -2632,7 +2642,7 @@ var require_cjs = __commonJS({
         });
       }
     };
-    var import_utils25 = __toESM2(require_cjs42(), 1);
+    var import_utils26 = __toESM2(require_cjs42(), 1);
     var isBorderStyle = (str) => [
       "none",
       "hidden",
@@ -2703,7 +2713,7 @@ var require_cjs = __commonJS({
         return v;
       }).join(" ");
     };
-    var transfromGap4 = (gap) => (0, import_utils25.isString)(gap) && gap.split(" ").map((v) => getSpacingByKey7(v, "gap").gap).join(" ");
+    var transfromGap4 = (gap) => (0, import_utils26.isString)(gap) && gap.split(" ").map((v) => getSpacingByKey7(v, "gap").gap).join(" ");
     var transformTransition = (transition) => {
       const arr = transition.split(" ");
       if (!arr.length)
@@ -2721,7 +2731,7 @@ var require_cjs = __commonJS({
       }).join(" ");
     };
     var transformDuration4 = (duration, props7, propertyName) => {
-      if (!(0, import_utils25.isString)(duration))
+      if (!(0, import_utils26.isString)(duration))
         return;
       return duration.split(",").map((v) => getTimingByKey4(v).timing || v).join(",");
     };
@@ -2731,9 +2741,9 @@ var require_cjs = __commonJS({
         return;
       return arr.map(transformTransition).join(",");
     };
-    var import_utils26 = __toESM2(require_cjs42(), 1);
+    var import_utils27 = __toESM2(require_cjs42(), 1);
     var setCases = (val, key) => {
-      if ((0, import_utils26.isFunction)(val))
+      if ((0, import_utils27.isFunction)(val))
         return val();
       return val;
     };
@@ -9030,13 +9040,13 @@ var require_cjs10 = __commonJS({
           document: () => document4,
           global: () => global,
           self: () => self,
-          window: () => window3
+          window: () => window2
         });
         module22.exports = __toCommonJS22(globals_exports);
         var global = globalThis;
         var self = globalThis;
-        var window3 = globalThis;
-        var document4 = window3.document;
+        var window2 = globalThis;
+        var document4 = window2.document;
       }
     });
     var require_cjs22 = __commonJS2({
@@ -9324,10 +9334,10 @@ var require_cjs10 = __commonJS({
           isFunction: () => isFunction22,
           isNot: () => isNot4,
           isNull: () => isNull,
-          isNumber: () => isNumber,
+          isNumber: () => isNumber2,
           isObject: () => isObject7,
           isObjectLike: () => isObjectLike32,
-          isString: () => isString8,
+          isString: () => isString9,
           isUndefined: () => isUndefined,
           isValidHtmlTag: () => isValidHtmlTag
         });
@@ -9340,8 +9350,8 @@ var require_cjs10 = __commonJS({
             return false;
           return typeof arg === "object" && arg.constructor === Object;
         };
-        var isString8 = (arg) => typeof arg === "string";
-        var isNumber = (arg) => typeof arg === "number";
+        var isString9 = (arg) => typeof arg === "string";
+        var isNumber2 = (arg) => typeof arg === "number";
         var isFunction22 = (arg) => typeof arg === "function";
         var isBoolean = (arg) => arg === true || arg === false;
         var isNull = (arg) => arg === null;
@@ -9352,7 +9362,7 @@ var require_cjs10 = __commonJS({
           return typeof arg === "object";
         };
         var isDefined2 = (arg) => {
-          return isObject7(arg) || isObjectLike32(arg) || isString8(arg) || isNumber(arg) || isFunction22(arg) || isArray62(arg) || isObjectLike32(arg) || isBoolean(arg) || isNull(arg);
+          return isObject7(arg) || isObjectLike32(arg) || isString9(arg) || isNumber2(arg) || isFunction22(arg) || isArray62(arg) || isObjectLike32(arg) || isBoolean(arg) || isNull(arg);
         };
         var isUndefined = (arg) => {
           return arg === void 0;
@@ -9361,8 +9371,8 @@ var require_cjs10 = __commonJS({
           boolean: isBoolean,
           array: isArray62,
           object: isObject7,
-          string: isString8,
-          number: isNumber,
+          string: isString9,
+          number: isNumber2,
           null: isNull,
           function: isFunction22,
           objectLike: isObjectLike32,
@@ -9405,6 +9415,9 @@ var require_cjs10 = __commonJS({
         var array_exports = {};
         __export22(array_exports, {
           arrayContainsOtherArray: () => arrayContainsOtherArray,
+          createNestedObject: () => createNestedObject,
+          cutArrayAfterValue: () => cutArrayAfterValue,
+          cutArrayBeforeValue: () => cutArrayBeforeValue,
           joinArrays: () => joinArrays,
           mergeAndCloneIfArray: () => mergeAndCloneIfArray,
           mergeArray: () => mergeArray,
@@ -9444,6 +9457,71 @@ var require_cjs10 = __commonJS({
         var mergeAndCloneIfArray = (obj) => {
           return (0, import_types.isArray)(obj) ? mergeArray(obj) : (0, import_object.deepClone)(obj);
         };
+        var cutArrayBeforeValue = (arr, value) => {
+          const index = arr.indexOf(value);
+          if (index !== -1) {
+            return arr.slice(0, index);
+          }
+          return arr;
+        };
+        var cutArrayAfterValue = (arr, value) => {
+          const index = arr.indexOf(value);
+          if (index !== -1) {
+            return arr.slice(index + 1);
+          }
+          return arr;
+        };
+        var createNestedObject = (arr, lastValue) => {
+          let nestedObject = {};
+          if (arr.length === 0) {
+            return lastValue;
+          }
+          arr.reduce((obj, value, index) => {
+            if (!obj[value]) {
+              obj[value] = {};
+            }
+            if (index === arr.length - 1 && lastValue) {
+              obj[value] = lastValue;
+            }
+            return obj[value];
+          }, nestedObject);
+          return nestedObject;
+        };
+      }
+    });
+    var require_string2 = __commonJS2({
+      "../../node_modules/@domql/utils/dist/cjs/string.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 string_exports = {};
+        __export22(string_exports, {
+          stringIncludesAny: () => stringIncludesAny
+        });
+        module22.exports = __toCommonJS22(string_exports);
+        var stringIncludesAny = (str, characters2) => {
+          for (const char2 of characters2) {
+            if (str.includes(char2)) {
+              return true;
+            }
+          }
+          return false;
+        };
       }
     });
     var require_object2 = __commonJS2({
@@ -9485,15 +9563,18 @@ var require_cjs10 = __commonJS({
           merge: () => merge5,
           mergeArrayExclude: () => mergeArrayExclude,
           mergeIfExisted: () => mergeIfExisted,
+          objectToString: () => objectToString,
           overwrite: () => overwrite,
           overwriteDeep: () => overwriteDeep2,
           overwriteShallow: () => overwriteShallow4,
-          removeFromObject: () => removeFromObject
+          removeFromObject: () => removeFromObject,
+          stringToObject: () => stringToObject
         });
         module22.exports = __toCommonJS22(object_exports);
         var import_globals3 = require_cjs11();
         var import_types = require_types2();
         var import_array = require_array2();
+        var import_string = require_string2();
         var exec4 = (param, element, state, context) => {
           if ((0, import_types.isFunction)(param)) {
             return param(
@@ -9511,7 +9592,7 @@ var require_cjs10 = __commonJS({
         };
         var merge5 = (element, obj, excludeFrom = []) => {
           for (const e in obj) {
-            if (excludeFrom.includes(e) || e.includes("__"))
+            if (excludeFrom.includes(e) || e.startsWith("__"))
               continue;
             const elementProp = element[e];
             const objProp = obj[e];
@@ -9523,7 +9604,7 @@ var require_cjs10 = __commonJS({
         };
         var deepMerge3 = (element, extend, excludeFrom = []) => {
           for (const e in extend) {
-            if (excludeFrom.includes(e) || e.includes("__"))
+            if (excludeFrom.includes(e) || e.startsWith("__"))
               continue;
             const elementProp = element[e];
             const extendProp = extend[e];
@@ -9538,7 +9619,7 @@ var require_cjs10 = __commonJS({
         var clone = (obj, excludeFrom = []) => {
           const o = {};
           for (const prop in obj) {
-            if (excludeFrom.includes(prop) || prop.includes("__"))
+            if (excludeFrom.includes(prop) || prop.startsWith("__"))
               continue;
             o[prop] = obj[prop];
           }
@@ -9550,7 +9631,7 @@ var require_cjs10 = __commonJS({
           }
           const o = {};
           for (const k in obj) {
-            if (excludeFrom.includes(k) || k.includes("__"))
+            if (excludeFrom.includes(k) || k.startsWith("__"))
               continue;
             let v = obj[k];
             if (k === "extend" && (0, import_types.isArray)(v)) {
@@ -9571,7 +9652,7 @@ var require_cjs10 = __commonJS({
         var deepClone22 = (obj, excludeFrom = []) => {
           const o = (0, import_types.isArray)(obj) ? [] : {};
           for (const prop in obj) {
-            if (excludeFrom.includes(prop) || prop.includes("__"))
+            if (excludeFrom.includes(prop) || prop.startsWith("__"))
               continue;
             let objProp = obj[prop];
             if (prop === "extend" && (0, import_types.isArray)(objProp)) {
@@ -9610,6 +9691,40 @@ var require_cjs10 = __commonJS({
           }
           return stringified;
         };
+        var objectToString = (obj, indent = 0) => {
+          const spaces = "  ".repeat(indent);
+          let str = "{\n";
+          for (const [key, value] of Object.entries(obj)) {
+            const keyAllowdChars = (0, import_string.stringIncludesAny)(key, ["-", ":", "@", ".", "!"]);
+            const stringedKey = keyAllowdChars ? `'${key}'` : key;
+            str += `${spaces}  ${stringedKey}: `;
+            if ((0, import_types.isArray)(value)) {
+              str += "[\n";
+              for (const element of value) {
+                if ((0, import_types.isObject)(element) && element !== null) {
+                  str += `${spaces}    ${objectToString(element, indent + 2)},
+`;
+                } else if ((0, import_types.isString)(element)) {
+                  str += `${spaces}    '${element}',
+`;
+                } else {
+                  str += `${spaces}    ${element},
+`;
+                }
+              }
+              str += `${spaces}  ]`;
+            } else if ((0, import_types.isObject)(value)) {
+              str += objectToString(value, indent + 1);
+            } else if ((0, import_types.isString)(value)) {
+              str += (0, import_string.stringIncludesAny)(value, ["\n", "'"]) ? `\`${value}\`` : `'${value}'`;
+            } else {
+              str += value;
+            }
+            str += ",\n";
+          }
+          str += `${spaces}}`;
+          return str;
+        };
         var detachFunctionsFromObject = (obj, detached = {}) => {
           for (const prop in obj) {
             const objProp = obj[prop];
@@ -9680,6 +9795,16 @@ var require_cjs10 = __commonJS({
           }
           return stringified;
         };
+        var stringToObject = (str) => {
+          let obj;
+          try {
+            obj = import_globals3.window.eval("(" + str + ")");
+          } catch (e) {
+            console.warn(e);
+          }
+          if (obj)
+            return obj;
+        };
         var diffObjects = (original, objToDiff, cache) => {
           for (const e in objToDiff) {
             if (e === "ref")
@@ -9725,7 +9850,7 @@ var require_cjs10 = __commonJS({
           const { ref } = element;
           const changes = {};
           for (const e in params) {
-            if (excludeFrom.includes(e) || e.includes("__"))
+            if (excludeFrom.includes(e) || e.startsWith("__"))
               continue;
             const elementProp = element[e];
             const paramsProp = params[e];
@@ -9738,7 +9863,7 @@ var require_cjs10 = __commonJS({
         };
         var overwriteShallow4 = (obj, params, excludeFrom = []) => {
           for (const e in params) {
-            if (excludeFrom.includes(e) || e.includes("__"))
+            if (excludeFrom.includes(e) || e.startsWith("__"))
               continue;
             obj[e] = params[e];
           }
@@ -9746,7 +9871,7 @@ var require_cjs10 = __commonJS({
         };
         var overwriteDeep2 = (obj, params, excludeFrom = []) => {
           for (const e in params) {
-            if (excludeFrom.includes(e) || e.includes("__"))
+            if (excludeFrom.includes(e) || e.startsWith("__"))
               continue;
             const objProp = obj[e];
             const paramsProp = params[e];
@@ -9921,6 +10046,7 @@ var require_cjs10 = __commonJS({
         __reExport(utils_exports2, require_array2(), module22.exports);
         __reExport(utils_exports2, require_node2(), module22.exports);
         __reExport(utils_exports2, require_log2(), module22.exports);
+        __reExport(utils_exports2, require_string2(), module22.exports);
       }
     });
     var src_exports = {};
@@ -9982,6 +10108,7 @@ var require_cjs10 = __commonJS({
       getFontSizeByKey: () => getFontSizeByKey4,
       getMediaColor: () => getMediaColor7,
       getMediaTheme: () => getMediaTheme4,
+      getRgbTone: () => getRgbTone,
       getSequenceValue: () => getSequenceValue,
       getSequenceValuePropertyPair: () => getSequenceValuePropertyPair,
       getSpacingBasedOnRatio: () => getSpacingBasedOnRatio10,
@@ -10049,6 +10176,7 @@ var require_cjs10 = __commonJS({
       getFontFaceEachString: () => getFontFaceEachString,
       getFontFaceString: () => getFontFaceString,
       getFontFormat: () => getFontFormat,
+      getRgbTone: () => getRgbTone,
       getSequenceValue: () => getSequenceValue,
       getSequenceValuePropertyPair: () => getSequenceValuePropertyPair,
       hexToRgb: () => hexToRgb,
@@ -10070,6 +10198,7 @@ var require_cjs10 = __commonJS({
       setVariables: () => setVariables
     });
     var import_globals = __toESM2(require_cjs11(), 1);
+    var import_utils16 = __toESM2(require_cjs42(), 1);
     var ENV = "development";
     var colorStringToRgbaArray = (color) => {
       if (color === "")
@@ -10122,7 +10251,7 @@ var require_cjs10 = __commonJS({
       return [r, g, b];
     };
     var rgbToHex = (r, g, b) => {
-      return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+      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);
@@ -10174,7 +10303,7 @@ var require_cjs10 = __commonJS({
         g = 255;
       else if (g < 0)
         g = 0;
-      return (g | b << 8 | r << 16).toString(16);
+      return ((g | b << 8 | r << 16) + 16777216).toString(16).slice(1);
     };
     var mixTwoRgba = (colorA, colorB, range = 0.5) => {
       const arr = [];
@@ -10196,6 +10325,24 @@ var require_cjs10 = __commonJS({
       arr[3] = opacity;
       return `rgba(${arr})`;
     };
+    var getRgbTone = (rgb, tone) => {
+      if ((0, import_utils16.isString)(rgb))
+        rgb = rgb.split(", ").map((v) => parseFloat(v));
+      if ((0, import_utils16.isNumber)(tone))
+        tone += "";
+      const toHex = rgbArrayToHex(rgb);
+      const abs2 = tone.slice(0, 1);
+      if (abs2 === "-" || abs2 === "+") {
+        const colorShade = getColorShade(toHex, parseFloat(tone));
+        return hexToRgbArray(colorShade).join(", ");
+      } else {
+        const [r, g, b] = rgb;
+        const hsl = rgbToHSL(r, g, b);
+        const [h, s, l] = hsl;
+        const newRgb = hslToRgb(h, s, parseFloat(tone) / 100 * 255);
+        return newRgb;
+      }
+    };
     var returnSubThemeOrDefault = (orig, theme) => {
       if (!orig)
         return;
@@ -10244,24 +10391,24 @@ var require_cjs10 = __commonJS({
       const keys = Object.keys(LIBRARY);
       return keys.map((key) => getFontFaceEachString(key, LIBRARY[key].value));
     };
-    var import_utils42 = __toESM2(require_cjs42(), 1);
+    var import_utils52 = __toESM2(require_cjs42(), 1);
+    var import_utils32 = __toESM2(require_cjs42());
     var import_utils22 = __toESM2(require_cjs42());
-    var import_utils16 = __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 toDashCase = (val) => val.replace(/[^a-zA-Z0-9]/g, " ").trim().toLowerCase().replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
     var arrayzeValue = (val) => {
-      if ((0, import_utils22.isString)(val))
+      if ((0, import_utils32.isString)(val))
         return val.split(" ");
-      if ((0, import_utils22.isObject)(val))
+      if ((0, import_utils32.isObject)(val))
         return Object.keys(val).map((v) => val[v]);
-      if ((0, import_utils22.isArray)(val))
+      if ((0, import_utils32.isArray)(val))
         return val;
     };
-    var import_utils32 = __toESM2(require_cjs42(), 1);
+    var import_utils42 = __toESM2(require_cjs42(), 1);
     var defaultConfig_exports = {};
     __export2(defaultConfig_exports, {
       ANIMATION: () => ANIMATION,
@@ -10432,13 +10579,13 @@ var require_cjs10 = __commonJS({
       CSS_VARS,
       ...defaultConfig_exports
     };
-    var cachedConfig = (0, import_utils32.deepClone)(CONFIG4);
+    var cachedConfig = (0, import_utils42.deepClone)(CONFIG4);
     var FACTORY = {
       active: "0",
       0: CONFIG4
     };
     var activateConfig = (def) => {
-      if ((0, import_utils32.isDefined)(def)) {
+      if ((0, import_utils42.isDefined)(def)) {
         FACTORY.active = def;
       }
       return FACTORY[def || FACTORY.active];
@@ -10447,10 +10594,10 @@ var require_cjs10 = __commonJS({
       return FACTORY[def || FACTORY.active];
     };
     var setActiveConfig = (newConfig) => {
-      if (!(0, import_utils32.isObject)(newConfig))
+      if (!(0, import_utils42.isObject)(newConfig))
         return;
       FACTORY.active = "1";
-      FACTORY["1"] = (0, import_utils32.deepMerge)(newConfig, (0, import_utils32.deepClone)(cachedConfig));
+      FACTORY["1"] = (0, import_utils42.deepMerge)(newConfig, (0, import_utils42.deepClone)(cachedConfig));
       return newConfig;
     };
     var numToLetterMap = {
@@ -10559,7 +10706,7 @@ var require_cjs10 = __commonJS({
         unit = UNIT2.default,
         useVariable
       } = sequenceProps;
-      if ((0, import_utils42.isString)(value) && value.slice(0, 2) === "--")
+      if ((0, import_utils52.isString)(value) && value.slice(0, 2) === "--")
         return `var(${value})`;
       const prefix2 = `--${toDashCase(sequenceProps.type.replace(".", "-"))}-`;
       const startsWithDashOrLetterRegex = /^-?[a-zA-Z]/i;
@@ -10620,11 +10767,11 @@ var require_cjs10 = __commonJS({
         return sequence[findLetter];
       });
     };
-    var import_utils62 = __toESM2(require_cjs42(), 1);
+    var import_utils72 = __toESM2(require_cjs42(), 1);
     var setVariables = (result, key) => {
       const CONFIG22 = getActiveConfig4();
       const { CSS_VARS: CSS_VARS2 } = CONFIG22;
-      if ((0, import_utils62.isObjectLike)(result.value)) {
+      if ((0, import_utils72.isObjectLike)(result.value)) {
       } else {
         CSS_VARS2[result.var] = result.value;
       }
@@ -10658,7 +10805,7 @@ var require_cjs10 = __commonJS({
         }
       }
     };
-    var import_utils72 = __toESM2(require_cjs42(), 1);
+    var import_utils82 = __toESM2(require_cjs42(), 1);
     var generateSprite = (icons) => {
       const CONFIG22 = getActiveConfig4();
       let sprite = "";
@@ -10672,7 +10819,7 @@ var require_cjs10 = __commonJS({
       return sprite;
     };
     var parseRootAttributes = (htmlString) => {
-      if (!(0, import_utils72.isString)(htmlString)) {
+      if (!(0, import_utils82.isString)(htmlString)) {
         return console.warn(`parseRootAttributes: ${htmlString} is not a string`);
       }
       const match2 = htmlString.match(/<svg\s+(.*?)>/);
@@ -10692,7 +10839,7 @@ var require_cjs10 = __commonJS({
       const urlRegex = /url\(#([^)]*)\)/g;
       const matches = code.match(/id="([^"]*)"/g);
       let replacedCode = code;
-      if ((0, import_utils72.isArray)(matches)) {
+      if ((0, import_utils82.isArray)(matches)) {
         matches.forEach(() => {
           const randomKey = Math.floor(Math.random() * 1e5);
           replacedCode = code.replace(idRegex, `id="${key}-${randomKey}"`).replace(urlRegex, `url(#${key}-${randomKey})`);
@@ -10745,10 +10892,10 @@ var require_cjs10 = __commonJS({
       setSVG: () => setSVG,
       setTheme: () => setTheme
     });
-    var import_utils82 = __toESM2(require_cjs42(), 1);
+    var import_utils92 = __toESM2(require_cjs42(), 1);
     var getColor4 = (value, key, config) => {
       const CONFIG22 = config || getActiveConfig4();
-      if (!(0, import_utils82.isString)(value)) {
+      if (!(0, import_utils92.isString)(value)) {
         if (CONFIG22.verbose)
           console.warn(value, "- type for color is not valid");
         return;
@@ -10757,7 +10904,7 @@ var require_cjs10 = __commonJS({
         return `var(${value})`;
       if (key && value[key])
         value = value[key];
-      const [name, alpha, tone] = (0, import_utils82.isArray)(value) ? value : value.split(" ");
+      const [name, alpha, tone] = (0, import_utils92.isArray)(value) ? value : value.split(" ");
       const { COLOR: COLOR2, GRADIENT: GRADIENT2 } = CONFIG22;
       let val = COLOR2[name] || GRADIENT2[name];
       if (!val) {
@@ -10772,22 +10919,11 @@ var require_cjs10 = __commonJS({
           console.warn(value, " - does not have ", key);
       }
       let rgb = val.rgb;
-      if (!rgb)
+      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;
-        }
+        rgb = getRgbTone(rgb, tone);
         val[tone] = { rgb, var: `${val.var}-${tone}` };
       }
       if (val[tone])
@@ -10800,17 +10936,17 @@ var require_cjs10 = __commonJS({
       const CONFIG22 = config || getActiveConfig4();
       if (!globalTheme)
         globalTheme = CONFIG22.globalTheme;
-      if (!(0, import_utils82.isString)(value)) {
+      if (!(0, import_utils92.isString)(value)) {
         if (CONFIG22.verbose)
           console.warn(value, "- type for color is not valid");
         return;
       }
       if (value.slice(0, 2) === "--")
         return `var(${value})`;
-      const [name] = (0, import_utils82.isArray)(value) ? value : value.split(" ");
+      const [name] = (0, import_utils92.isArray)(value) ? value : value.split(" ");
       const { COLOR: COLOR2, GRADIENT: GRADIENT2 } = CONFIG22;
       const val = COLOR2[name] || GRADIENT2[name];
-      const isObj = (0, import_utils82.isObject)(val);
+      const isObj = (0, import_utils92.isObject)(val);
       if (isObj && val.value)
         return getColor4(value, `@${globalTheme}`, config);
       else if (isObj) {
@@ -10833,15 +10969,15 @@ var require_cjs10 = __commonJS({
     };
     var setColor = (val, key, suffix) => {
       const CONFIG22 = getActiveConfig4();
-      if ((0, import_utils82.isString)(val) && val.slice(0, 2) === "--")
+      if ((0, import_utils92.isString)(val) && val.slice(0, 2) === "--")
         val = getColor4(val.slice(2));
-      if ((0, import_utils82.isArray)(val)) {
+      if ((0, import_utils92.isArray)(val)) {
         return {
           "@light": setColor(val[0], key, "light"),
           "@dark": setColor(val[1], key, "dark")
         };
       }
-      if ((0, import_utils82.isObject)(val)) {
+      if ((0, import_utils92.isObject)(val)) {
         const obj = {};
         for (const variant in val)
           obj[variant] = setColor(val[variant], key, variant.slice(0, 1) === "@" ? variant.slice(1) : variant);
@@ -10864,15 +11000,15 @@ var require_cjs10 = __commonJS({
     };
     var setGradient = (val, key, suffix) => {
       const CONFIG22 = getActiveConfig4();
-      if ((0, import_utils82.isString)(val) && val.slice(0, 2) === "--")
+      if ((0, import_utils92.isString)(val) && val.slice(0, 2) === "--")
         val = getColor4(val.slice(2));
-      if ((0, import_utils82.isArray)(val)) {
+      if ((0, import_utils92.isArray)(val)) {
         return {
           "@light": setGradient(val[0], key, "light"),
           "@dark": setGradient(val[0], key, "dark")
         };
       }
-      if ((0, import_utils82.isObject)(val)) {
+      if ((0, import_utils92.isObject)(val)) {
         const obj = {};
         for (const variant in val)
           obj[variant] = setGradient(val[variant], key, variant.slice(0, 1) === "@" ? variant.slice(1) : variant);
@@ -10887,7 +11023,7 @@ var require_cjs10 = __commonJS({
         value: val.value || val
       };
     };
-    var import_utils102 = __toESM2(require_cjs42(), 1);
+    var import_utils112 = __toESM2(require_cjs42(), 1);
     var setThemeValue = (theme) => {
       const value = {};
       const { state, media, helpers, ...rest } = theme;
@@ -10910,7 +11046,7 @@ var require_cjs10 = __commonJS({
       if (CONFIG22.useVariable)
         return getMediaTheme4(value, modifier);
       const { THEME: THEME2 } = CONFIG22;
-      if ((0, import_utils102.isString)(value)) {
+      if ((0, import_utils112.isString)(value)) {
         const [theme, subtheme] = value.split(" ");
         const isOurTheme = THEME2[theme];
         if (isOurTheme) {
@@ -10919,7 +11055,7 @@ var require_cjs10 = __commonJS({
           value = [theme, subtheme || modifier];
         }
       }
-      if ((0, import_utils102.isObjectLike)(value) && value[1]) {
+      if ((0, import_utils112.isObjectLike)(value) && value[1]) {
         const themeName = value[0];
         const subThemeName = value[1];
         const { helpers, media, state } = THEME2[themeName];
@@ -10929,11 +11065,11 @@ var require_cjs10 = __commonJS({
           return getThemeValue(helpers[subThemeName]);
         if (state && state[subThemeName])
           return getThemeValue(state[subThemeName]);
-      } else if ((0, import_utils102.isObject)(value))
+      } else if ((0, import_utils112.isObject)(value))
         return setThemeValue(value);
     };
     var setInverseTheme = (theme, variant, value) => {
-      if ((0, import_utils102.isObject)(variant)) {
+      if ((0, import_utils112.isObject)(variant)) {
         theme.variants.inverse.value = setThemeValue(variant);
       } else if (variant === true) {
         const { color, background } = value;
@@ -10948,7 +11084,7 @@ var require_cjs10 = __commonJS({
     var setPseudo = (theme, key, variant, themeValue) => {
       const result = getTheme4(variant);
       themeValue[`&:${key}`] = result;
-      if ((0, import_utils102.isObject)(variant) && !variant.value)
+      if ((0, import_utils112.isObject)(variant) && !variant.value)
         variant.value = result;
     };
     var setSelectors = (theme, value) => {
@@ -10966,7 +11102,7 @@ var require_cjs10 = __commonJS({
     var setPrefersScheme = (theme, key, variant, themeValue) => {
       const result = getTheme4(variant);
       themeValue[`@media (prefers-color-scheme: ${key})`] = result;
-      if ((0, import_utils102.isObject)(variant) && !variant.value)
+      if ((0, import_utils112.isObject)(variant) && !variant.value)
         variant.value = result;
     };
     var setMedia = (theme, value) => {
@@ -10992,7 +11128,7 @@ var require_cjs10 = __commonJS({
       const keys = Object.keys(helpers);
       keys.map((key) => {
         const helper = helpers[key];
-        if ((0, import_utils102.isString)(helper))
+        if ((0, import_utils112.isString)(helper))
           helpers[key] = CONFIG22.THEME[helper];
         else
           getThemeValue(helpers[key]);
@@ -11016,7 +11152,7 @@ var require_cjs10 = __commonJS({
       const CONFIG22 = getActiveConfig4();
       const { CSS_VARS: CSS_VARS2 } = CONFIG22;
       const theme = { value: val };
-      if ((0, import_utils102.isObjectLike)(val)) {
+      if ((0, import_utils112.isObjectLike)(val)) {
         for (const param in val) {
           const symb = param.slice(0, 1);
           const value = val[param];
@@ -11044,7 +11180,7 @@ var require_cjs10 = __commonJS({
           };
         }
       }
-      if ((0, import_utils102.isString)(val) && val.slice(0, 2) === "--") {
+      if ((0, import_utils112.isString)(val) && val.slice(0, 2) === "--") {
         const { THEME: THEME2 } = CONFIG22;
         const value = THEME2[val.slice(2)];
         const getReferenced = getMediaTheme4(value, prefers);
@@ -11057,7 +11193,7 @@ var require_cjs10 = __commonJS({
       const obj = {};
       for (const param in val) {
         const symb = param.slice(0, 1);
-        if ((0, import_utils102.isObjectLike)(val[param])) {
+        if ((0, import_utils112.isObjectLike)(val[param])) {
           if (symb === "@") {
             const query = CONFIG22.MEDIA[param.slice(1)];
             const media = `@media screen and ${query}`;
@@ -11077,23 +11213,23 @@ var require_cjs10 = __commonJS({
       return val;
     };
     var findModifier = (val, modifier) => {
-      if ((0, import_utils102.isArray)(modifier))
+      if ((0, import_utils112.isArray)(modifier))
         return findModifierFromArray(val, modifier);
-      else if ((0, import_utils102.isString)(modifier) && val[modifier])
+      else if ((0, import_utils112.isString)(modifier) && val[modifier])
         return val[modifier];
       else
         return val;
     };
     var getMediaTheme4 = (val, mod) => {
       const CONFIG22 = getActiveConfig4();
-      if ((0, import_utils102.isString)(val) && val.slice(0, 2) === "--")
+      if ((0, import_utils112.isString)(val) && val.slice(0, 2) === "--")
         val = getMediaTheme4(val.slice(2));
-      if (!val || !(0, import_utils102.isString)(val)) {
+      if (!val || !(0, import_utils112.isString)(val)) {
         if (CONFIG22.verbose)
           console.warn(val, "- theme is not string");
         return;
       }
-      const [name, ...modifier] = (0, import_utils102.isArray)(val) ? val : val.split(" ");
+      const [name, ...modifier] = (0, import_utils112.isArray)(val) ? val : val.split(" ");
       let value = CONFIG22.THEME[name];
       if (value && (modifier || mod)) {
         value = findModifier(value, modifier.length ? modifier : mod);
@@ -11101,7 +11237,7 @@ var require_cjs10 = __commonJS({
       const r = recursiveTheme(value);
       return r;
     };
-    var import_utils112 = __toESM2(require_cjs42(), 1);
+    var import_utils122 = __toESM2(require_cjs42(), 1);
     var setFont = (val, key) => {
       const CSSvar = `--font-${key}`;
       const fontFace = val[0] ? getFontFaceEach(key, val) : setCustomFontMedia(key, val.url);
@@ -11118,13 +11254,13 @@ var require_cjs10 = __commonJS({
       let { value, type } = val;
       if (val.isDefault)
         FONT_FAMILY2.default = key;
-      if ((0, import_utils112.isObject)(value))
+      if ((0, import_utils122.isObject)(value))
         value = arrayzeValue(value);
       const CSSvar = `--font-family-${key}`;
       const str = `${value.join(", ")}, ${FONT_FAMILY_TYPES2[type]}`;
       return { var: CSSvar, value: str, arr: value, type };
     };
-    var import_utils142 = __toESM2(require_cjs42(), 1);
+    var import_utils152 = __toESM2(require_cjs42(), 1);
     var runThroughMedia = (props7) => {
       const CONFIG22 = getActiveConfig4();
       const { TYPOGRAPHY: TYPOGRAPHY2, MEDIA: MEDIA2 } = CONFIG22;
@@ -11132,7 +11268,7 @@ var require_cjs10 = __commonJS({
         const mediaProps = props7[prop];
         if (prop.slice(0, 1) === "@") {
           const { type, base, ratio, range, subSequence, h1Matches, unit } = props7;
-          (0, import_utils142.merge)(mediaProps, {
+          (0, import_utils152.merge)(mediaProps, {
             type,
             base,
             ratio,
@@ -11191,13 +11327,13 @@ var require_cjs10 = __commonJS({
         TYPOGRAPHY2
       );
     };
-    var import_utils17 = __toESM2(require_cjs42(), 1);
+    var import_utils18 = __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_utils17.merge)(mediaProps, {
+          (0, import_utils18.merge)(mediaProps, {
             type,
             base,
             ratio,
@@ -11236,7 +11372,7 @@ var require_cjs10 = __commonJS({
       const stack = arrayzeValue(value);
       if (!stack)
         return;
-      if ((0, import_utils17.isString)(value) && value.includes("calc")) {
+      if ((0, import_utils18.isString)(value) && value.includes("calc")) {
         return { [propertyName]: value };
       }
       if (stack.length > 1) {
@@ -11272,7 +11408,7 @@ var require_cjs10 = __commonJS({
         let sequenceProps = SPACING2[spacingRatio];
         if (!sequenceProps) {
           const { type, base, range, subSequence } = SPACING2;
-          sequenceProps = SPACING2[spacingRatio] = (0, import_utils17.merge)({
+          sequenceProps = SPACING2[spacingRatio] = (0, import_utils18.merge)({
             ratio: spacingRatio,
             type: type + "-" + spacingRatio,
             unit,
@@ -11313,11 +11449,11 @@ var require_cjs10 = __commonJS({
         TIMING2
       );
     };
-    var import_utils21 = __toESM2(require_cjs42(), 1);
+    var import_utils222 = __toESM2(require_cjs42(), 1);
     var applyDocument = () => {
       const CONFIG22 = getActiveConfig4();
       const { DOCUMENT: DOCUMENT2, FONT_FAMILY: FONT_FAMILY2, THEME: THEME2, TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG22;
-      return (0, import_utils21.merge)(DOCUMENT2, {
+      return (0, import_utils222.merge)(DOCUMENT2, {
         theme: THEME2.document,
         fontFamily: getDefaultOrFirstKey(FONT_FAMILY2),
         fontSize: TYPOGRAPHY2.base,
@@ -11397,7 +11533,7 @@ var require_cjs10 = __commonJS({
         }
       }
     };
-    var import_utils24 = __toESM2(require_cjs42(), 1);
+    var import_utils25 = __toESM2(require_cjs42(), 1);
     var applyReset = (reset = {}) => {
       const CONFIG22 = getActiveConfig4();
       const { RESET: RESET2, TYPOGRAPHY: TYPOGRAPHY2, DOCUMENT: DOCUMENT2 } = CONFIG22;
@@ -11419,8 +11555,8 @@ var require_cjs10 = __commonJS({
         const { body, ...templates } = TYPOGRAPHY2.templates;
         const globalTheme = CONFIG22.useDocumentTheme ? getMediaTheme4("document", `@${CONFIG22.globalTheme}`) : {};
         if (RESET2.html)
-          (0, import_utils24.overwriteDeep)(RESET2.html, globalTheme);
-        return (0, import_utils24.deepMerge)((0, import_utils24.merge)(RESET2, reset), {
+          (0, import_utils25.overwriteDeep)(RESET2.html, globalTheme);
+        return (0, import_utils25.deepMerge)((0, import_utils25.merge)(RESET2, reset), {
           html: {
             position: "absolute",
             // overflow: 'hidden',
@@ -11457,7 +11593,7 @@ var require_cjs10 = __commonJS({
         });
       }
     };
-    var import_utils25 = __toESM2(require_cjs42(), 1);
+    var import_utils26 = __toESM2(require_cjs42(), 1);
     var isBorderStyle = (str) => [
       "none",
       "hidden",
@@ -11528,7 +11664,7 @@ var require_cjs10 = __commonJS({
         return v;
       }).join(" ");
     };
-    var transfromGap4 = (gap) => (0, import_utils25.isString)(gap) && gap.split(" ").map((v) => getSpacingByKey7(v, "gap").gap).join(" ");
+    var transfromGap4 = (gap) => (0, import_utils26.isString)(gap) && gap.split(" ").map((v) => getSpacingByKey7(v, "gap").gap).join(" ");
     var transformTransition = (transition) => {
       const arr = transition.split(" ");
       if (!arr.length)
@@ -11546,7 +11682,7 @@ var require_cjs10 = __commonJS({
       }).join(" ");
     };
     var transformDuration4 = (duration, props7, propertyName) => {
-      if (!(0, import_utils25.isString)(duration))
+      if (!(0, import_utils26.isString)(duration))
         return;
       return duration.split(",").map((v) => getTimingByKey4(v).timing || v).join(",");
     };
@@ -11556,9 +11692,9 @@ var require_cjs10 = __commonJS({
         return;
       return arr.map(transformTransition).join(",");
     };
-    var import_utils26 = __toESM2(require_cjs42(), 1);
+    var import_utils27 = __toESM2(require_cjs42(), 1);
     var setCases = (val, key) => {
-      if ((0, import_utils26.isFunction)(val))
+      if ((0, import_utils27.isFunction)(val))
         return val();
       return val;
     };
@@ -11659,6 +11795,7 @@ __export(domql_exports, {
   AvatarChooser: () => AvatarChooser,
   Block: () => Block,
   Box: () => Box,
+  Br: () => Br,
   Button: () => Button,
   ButtonSet: () => ButtonSet,
   Caption: () => Caption,
@@ -11697,6 +11834,7 @@ __export(domql_exports, {
   H6: () => H6,
   Headline: () => Headline,
   Hoverable: () => Hoverable,
+  Hr: () => Hr,
   Icon: () => Icon2,
   IconText: () => IconText2,
   Iframe: () => Iframe,
@@ -11755,6 +11893,7 @@ __export(domql_exports, {
   UploadResult: () => UploadResult,
   Video: () => Video,
   XYZ: () => XYZ,
+  calendar: () => calendar,
   getSystemTheme: () => getSystemTheme,
   keySetters: () => keySetters
 });
@@ -11903,6 +12042,11 @@ var Block = {
     columnCount: ({ props: props7 }) => props7.columnCount && { columns: props7.columnCount }
   }
 };
+var Hr = {
+  tag: "hr",
+  props: { margin: "C1 0" }
+};
+var Br = { tag: "br" };
 var Span = { tag: "span" };
 var List = {
   tag: "ul",
@@ -14537,12 +14681,17 @@ var DatePickerDay = {
   extend: Button,
   state: true,
   props: ({ state, key }) => {
-    const isSelected = state.parent.parent.activeDay === parseInt(key) + 1;
+    const rootState = state.parent.parent.parent;
+    const date = new Date(state._d);
+    const isSelected = rootState.activeDay === date.toString();
     const gridColumnStart = 7 - state.parent.weekItems.weeks[0].dates.length;
-    const isWeekend = state.moment.isoWeekday();
+    const { moment } = state;
+    moment._d = date;
+    const isWeekend = moment.day() === 0 || moment.day() === 6;
     return {
       isSelected,
       isWeekend,
+      date: date.toString(),
       textAlign: "center",
       fontSize: "Z1",
       round: "100%",
@@ -14564,10 +14713,9 @@ var DatePickerDay = {
   },
   on: {
     click: (event, element, state) => {
-      state.parent.parent.update({
-        active: state.parse()
+      state.parent.parent.parent.update({
+        activeDay: element.props.date
       });
-      console.log(state);
     }
   }
 };
@@ -14582,6 +14730,20 @@ var DatePickerGrid = {
   childExtend: DatePickerDay,
   $setStateCollection: (el, s) => {
     return s.days;
+  },
+  on: {
+    render: (el, state) => {
+      const { key } = el;
+      const isSelected = state.parent.parent.activeMonth === parseInt(key);
+      if (isSelected) {
+        window.requestAnimationFrame(() => {
+          el.parent.parent.node.scrollTo({
+            left: el.node.offsetLeft,
+            behavior: "smooth"
+          });
+        });
+      }
+    }
   }
 };
 
@@ -14715,12 +14877,27 @@ var DatePickerMonthsSlider = {
     }
   },
   Button_left: {
-    icon: "arrowLeft",
-    "@dark": {
-      theme: "primary @dark .color-only"
+    props: {
+      icon: "arrowLeft",
+      "@dark": {
+        theme: "primary @dark .color-only"
+      },
+      "@light": {
+        theme: "primary @light .color-only"
+      }
     },
-    "@light": {
-      theme: "primary @light .color-only"
+    on: {
+      click: (ev, el, s) => {
+        const { activeMonth, activeYear } = s;
+        if (activeMonth > 0)
+          s.update({ activeMonth: activeMonth - 1 });
+        else {
+          s.update({
+            activeYear: activeYear - 1,
+            activeMonth: 11
+          });
+        }
+      }
     }
   },
   Flex: {
@@ -14739,13 +14916,18 @@ var DatePickerMonthsSlider = {
         isSelected: state.activeMonth === parseInt(key),
         ".isSelected": { opacity: "1" }
       }),
-      render: (el, state) => {
-        const { props: props7 } = el;
-        const { isSelected } = props7;
-        if (isSelected) {
-          window.requestAnimationFrame(() => {
-            el.parent.parent.node.scrollLeft = el.node.offsetLeft;
-          });
+      on: {
+        update: (el, state) => {
+          const { props: props7 } = el;
+          const { isSelected } = props7;
+          if (isSelected) {
+            window.requestAnimationFrame(() => {
+              el.parent.parent.node.scrollTo({
+                left: el.node.offsetLeft,
+                behavior: "smooth"
+              });
+            });
+          }
         }
       }
     },
@@ -14767,12 +14949,27 @@ var DatePickerMonthsSlider = {
     }
   },
   Button_right: {
-    icon: "arrowRight",
-    "@dark": {
-      theme: "primary @dark .color-only"
+    props: {
+      icon: "arrowRight",
+      "@dark": {
+        theme: "primary @dark .color-only"
+      },
+      "@light": {
+        theme: "primary @light .color-only"
+      }
     },
-    "@light": {
-      theme: "primary @light .color-only"
+    on: {
+      click: (ev, el, s) => {
+        const { activeMonth, activeYear } = s;
+        if (activeMonth < 11)
+          s.update({ activeMonth: activeMonth + 1 });
+        else {
+          s.update({
+            activeYear: activeYear + 1,
+            activeMonth: 0
+          });
+        }
+      }
     }
   }
 };
@@ -14816,7 +15013,7 @@ var extractMonthDays = (data) => {
   const result = [];
   data.weeks.forEach((week) => {
     week.dates.forEach((date) => {
-      result.push(date);
+      result.push({ ...date, _d: date.moment._d.toString() });
     });
   });
   return result;
@@ -14876,6 +15073,8 @@ var DatePicker = {
     activeDay: 14
   },
   props: {
+    width: "fit-content",
+    margin: "0",
     maxHeight: "G+B2"
   },
   DatePickerYears: {