@symbo.ls/uikit 2.11.91 → 2.11.92

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;
     };
@@ -11755,6 +11765,7 @@ __export(domql_exports, {
   UploadResult: () => UploadResult,
   Video: () => Video,
   XYZ: () => XYZ,
+  calendar: () => calendar,
   getSystemTheme: () => getSystemTheme,
   keySetters: () => keySetters
 });
@@ -14537,12 +14548,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 +14580,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 +14597,17 @@ 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.node.scrollIntoView();
+        });
+      }
+    }
   }
 };
 
@@ -14715,12 +14741,26 @@ 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 +14779,15 @@ 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.scrollLeft = el.node.offsetLeft;
+            });
+          }
         }
       }
     },
@@ -14767,12 +14809,26 @@ 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 +14872,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;