@symbo.ls/uikit 2.11.215 → 2.11.217

package/dist/index.cjs.js

@@ -264,47 +264,47 @@ var require_cjs = __commonJS({
         __export22(types_exports, {
           TYPES: () => TYPES,
           is: () => is,
-          isArray: () => isArray6,
+          isArray: () => isArray7,
           isBoolean: () => isBoolean,
           isDefined: () => isDefined2,
           isFunction: () => isFunction22,
           isNot: () => isNot2,
           isNull: () => isNull,
           isNumber: () => isNumber2,
-          isObject: () => isObject7,
+          isObject: () => isObject8,
           isObjectLike: () => isObjectLike3,
-          isString: () => isString9,
+          isString: () => isString10,
           isUndefined: () => isUndefined2
         });
         module22.exports = __toCommonJS22(types_exports);
         var import_node = require_node2();
-        var isObject7 = (arg) => {
+        var isObject8 = (arg) => {
           if (arg === null)
             return false;
           return typeof arg === "object" && arg.constructor === Object;
         };
-        var isString9 = (arg) => typeof arg === "string";
+        var isString10 = (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;
-        var isArray6 = (arg) => Array.isArray(arg);
+        var isArray7 = (arg) => Array.isArray(arg);
         var isObjectLike3 = (arg) => {
           if (arg === null)
             return false;
           return typeof arg === "object";
         };
         var isDefined2 = (arg) => {
-          return isObject7(arg) || isObjectLike3(arg) || isString9(arg) || isNumber2(arg) || isFunction22(arg) || isArray6(arg) || isObjectLike3(arg) || isBoolean(arg) || isNull(arg);
+          return isObject8(arg) || isObjectLike3(arg) || isString10(arg) || isNumber2(arg) || isFunction22(arg) || isArray7(arg) || isObjectLike3(arg) || isBoolean(arg) || isNull(arg);
         };
         var isUndefined2 = (arg) => {
           return arg === void 0;
         };
         var TYPES = {
           boolean: isBoolean,
-          array: isArray6,
-          object: isObject7,
-          string: isString9,
+          array: isArray7,
+          object: isObject8,
+          string: isString10,
           number: isNumber2,
           null: isNull,
           function: isFunction22,
@@ -505,12 +505,12 @@ var require_cjs = __commonJS({
           clone: () => clone,
           deepClone: () => deepClone22,
           deepCloneExclude: () => deepCloneExclude,
-          deepContains: () => deepContains2,
+          deepContains: () => deepContains,
           deepDestringify: () => deepDestringify,
           deepMerge: () => deepMerge3,
           deepStringify: () => deepStringify,
           detachFunctionsFromObject: () => detachFunctionsFromObject,
-          diff: () => diff2,
+          diff: () => diff,
           diffArrays: () => diffArrays,
           diffObjects: () => diffObjects,
           exec: () => exec2,
@@ -777,7 +777,7 @@ var require_cjs = __commonJS({
             const objToDiffProp = objToDiff[e];
             if ((0, import_types.isObject)(originalProp) && (0, import_types.isObject)(objToDiffProp)) {
               cache[e] = {};
-              diff2(originalProp, objToDiffProp, cache[e]);
+              diff(originalProp, objToDiffProp, cache[e]);
             } else if (objToDiffProp !== void 0) {
               cache[e] = objToDiffProp;
             }
@@ -790,7 +790,7 @@ var require_cjs = __commonJS({
           } else {
             const diffArr = [];
             for (let i = 0; i < original.length; i++) {
-              const diffObj = diff2(original[i], objToDiff[i]);
+              const diffObj = diff(original[i], objToDiff[i]);
               if (Object.keys(diffObj).length > 0) {
                 diffArr.push(diffObj);
               }
@@ -801,7 +801,7 @@ var require_cjs = __commonJS({
           }
           return cache;
         };
-        var diff2 = (original, objToDiff, cache = {}) => {
+        var diff = (original, objToDiff, cache = {}) => {
           if ((0, import_types.isArray)(original) && (0, import_types.isArray)(objToDiff)) {
             cache = [];
             diffArrays(original, objToDiff, cache);
@@ -889,7 +889,7 @@ var require_cjs = __commonJS({
           }
           return true;
         };
-        var deepContains2 = (obj1, obj2) => {
+        var deepContains = (obj1, obj2) => {
           if (typeof obj1 !== typeof obj2) {
             return false;
           }
@@ -899,14 +899,14 @@ var require_cjs = __commonJS({
                 return false;
               }
               for (let i = 0; i < obj1.length; i++) {
-                if (!deepContains2(obj1[i], obj2[i])) {
+                if (!deepContains(obj1[i], obj2[i])) {
                   return false;
                 }
               }
             } else if ((0, import_types.isObjectLike)(obj1) && obj2 !== null) {
               for (const key in obj1) {
                 const hasOwnProperty = Object.prototype.hasOwnProperty.call(obj2, key);
-                if (!hasOwnProperty || !deepContains2(obj1[key], obj2[key])) {
+                if (!hasOwnProperty || !deepContains(obj1[key], obj2[key])) {
                   return false;
                 }
               }
@@ -1312,6 +1312,7 @@ var require_cjs = __commonJS({
       MEDIA: () => MEDIA,
       RESET: () => RESET,
       SEQUENCE: () => SEQUENCE,
+      SHADOW: () => SHADOW,
       SPACING: () => SPACING,
       SVG: () => SVG,
       SVG_DATA: () => SVG_DATA,
@@ -1355,6 +1356,7 @@ var require_cjs = __commonJS({
       getRgbTone: () => getRgbTone,
       getSequenceValue: () => getSequenceValue,
       getSequenceValuePropertyPair: () => getSequenceValuePropertyPair,
+      getShadow: () => getShadow,
       getSpacingBasedOnRatio: () => getSpacingBasedOnRatio4,
       getSpacingByKey: () => getSpacingByKey3,
       getTheme: () => getTheme,
@@ -1389,12 +1391,14 @@ var require_cjs = __commonJS({
       setInCustomFontMedia: () => setInCustomFontMedia,
       setMediaTheme: () => setMediaTheme,
       setSVG: () => setSVG,
+      setShadow: () => setShadow,
       setTheme: () => setTheme,
       setValue: () => setValue,
       setVariables: () => setVariables,
       splitTransition: () => splitTransition2,
       transformBackgroundImage: () => transformBackgroundImage2,
       transformBorder: () => transformBorder2,
+      transformBoxShadow: () => transformBoxShadow2,
       transformDuration: () => transformDuration2,
       transformShadow: () => transformShadow2,
       transformTextStroke: () => transformTextStroke2,
@@ -1670,6 +1674,7 @@ var require_cjs = __commonJS({
       MEDIA: () => MEDIA,
       RESET: () => RESET,
       SEQUENCE: () => SEQUENCE,
+      SHADOW: () => SHADOW,
       SPACING: () => SPACING,
       SVG: () => SVG,
       SVG_DATA: () => SVG_DATA,
@@ -1773,6 +1778,7 @@ var require_cjs = __commonJS({
     var COLOR = {};
     var GRADIENT = {};
     var THEME = {};
+    var SHADOW = {};
     var ICONS = {};
     var defaultProps3 = {
       default: 150,
@@ -1890,8 +1896,8 @@ var require_cjs = __commonJS({
     var generateSubSequence = (props4, sequenceProps) => {
       const { key, base, value, ratio, variable, index } = props4;
       const next2 = value * ratio;
-      const diff2 = next2 - value;
-      const smallscale = diff2 / 1.618;
+      const diff = next2 - value;
+      const smallscale = diff / 1.618;
       const valueRounded = ~~value;
       const nextRounded = ~~next2;
       const diffRounded = nextRounded - valueRounded;
@@ -2125,6 +2131,7 @@ var require_cjs = __commonJS({
       getFontSizeByKey: () => getFontSizeByKey2,
       getMediaColor: () => getMediaColor3,
       getMediaTheme: () => getMediaTheme2,
+      getShadow: () => getShadow,
       getSpacingBasedOnRatio: () => getSpacingBasedOnRatio4,
       getSpacingByKey: () => getSpacingByKey3,
       getTheme: () => getTheme,
@@ -2138,6 +2145,7 @@ var require_cjs = __commonJS({
       setIcon: () => setIcon,
       setMediaTheme: () => setMediaTheme,
       setSVG: () => setSVG,
+      setShadow: () => setShadow,
       setTheme: () => setTheme
     });
     var import_utils92 = __toESM2(require_cjs22(), 1);
@@ -2227,8 +2235,13 @@ var require_cjs = __commonJS({
       }
       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);
+        for (const variant in val) {
+          obj[variant] = setColor(
+            val[variant],
+            key,
+            variant.slice(0, 1) === "@" ? variant.slice(1) : variant
+          );
+        }
         return obj;
       }
       const CSSVar = `--color-${key}` + (suffix ? `-${suffix}` : "");
@@ -2677,6 +2690,91 @@ var require_cjs = __commonJS({
       }
       return getSpacingByKey3(value, propertyName);
     };
+    var import_utils20 = __toESM2(require_cjs22(), 1);
+    var setShadow = (value, key, suffix, prefers) => {
+      const CONFIG22 = getActiveConfig3();
+      if ((0, import_utils20.isArray)(value)) {
+        return {
+          "@light": setShadow(value[0], key, "light"),
+          "@dark": setShadow(value[1], key, "dark")
+        };
+      }
+      if ((0, import_utils20.isObject)(value)) {
+        const obj = {};
+        for (const variant in value) {
+          obj[variant] = setShadow(
+            value[variant],
+            key,
+            variant.startsWith("@") ? variant.slice(1) : variant
+          );
+        }
+        return obj;
+      }
+      if ((0, import_utils20.isString)(value) && value.includes(",")) {
+        value = value.split(",").map((v) => {
+          v = v.trim();
+          if (v.startsWith("--"))
+            return `var(${v})`;
+          if (getColor2(v).length > 2)
+            return getColor2(v);
+          if (v.includes("px") || v.slice(-2) === "em")
+            return v;
+          const arr = v.split(" ");
+          if (!arr.length)
+            return v;
+          return arr.map((v2) => getSpacingByKey3(v2, "shadow").shadow).join(" ");
+        }).join(" ");
+      }
+      const CSSVar = `--shadow-${key}` + (suffix ? `-${suffix}` : "");
+      if (CONFIG22.useVariable) {
+        CONFIG22.CSS_VARS[CSSVar] = value;
+      }
+      return {
+        var: CSSVar,
+        value
+      };
+    };
+    var getShadow = (value, globalTheme) => {
+      const CONFIG22 = getActiveConfig3();
+      if (!globalTheme)
+        globalTheme = CONFIG22.globalTheme;
+      if (!(0, import_utils20.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_utils20.isArray)(value) ? value : value.split(" ");
+      const { SHADOW: SHADOW2 } = CONFIG22;
+      const val = SHADOW2[name];
+      const isObj = (0, import_utils20.isObject)(val);
+      if (!val) {
+        if (CONFIG22.verbose)
+          console.warn("Can't find color ", name);
+        return value;
+      }
+      if (globalTheme) {
+        if (val[globalTheme])
+          return val[globalTheme].value;
+        else if (CONFIG22.verbose)
+          console.warn(value, " - does not have ", globalTheme);
+      }
+      if (isObj && val.value)
+        return val.value;
+      if (isObj) {
+        const obj = {};
+        for (const mediaName in val) {
+          const query = CONFIG22.MEDIA[mediaName.slice(1)];
+          const media = `@media screen and ${query}`;
+          obj[media] = val.value;
+        }
+        return obj;
+      }
+      if (CONFIG22.verbose)
+        console.warn("Can't find color", value);
+      return value;
+    };
     var applyTimingSequence = () => {
       const CONFIG22 = getActiveConfig3();
       const { TIMING: TIMING2 } = CONFIG22;
@@ -2697,11 +2795,11 @@ var require_cjs = __commonJS({
         TIMING2
       );
     };
-    var import_utils222 = __toESM2(require_cjs22(), 1);
+    var import_utils23 = __toESM2(require_cjs22(), 1);
     var applyDocument = () => {
       const CONFIG22 = getActiveConfig3();
       const { DOCUMENT: DOCUMENT2, FONT_FAMILY: FONT_FAMILY2, THEME: THEME2, TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG22;
-      return (0, import_utils222.merge)(DOCUMENT2, {
+      return (0, import_utils23.merge)(DOCUMENT2, {
         theme: THEME2.document,
         fontFamily: getDefaultOrFirstKey(FONT_FAMILY2),
         fontSize: TYPOGRAPHY2.base,
@@ -2781,7 +2879,7 @@ var require_cjs = __commonJS({
         }
       }
     };
-    var import_utils25 = __toESM2(require_cjs22(), 1);
+    var import_utils26 = __toESM2(require_cjs22(), 1);
     var applyReset = (reset = {}) => {
       const CONFIG22 = getActiveConfig3();
       const { RESET: RESET2, TYPOGRAPHY: TYPOGRAPHY2, DOCUMENT: DOCUMENT2 } = CONFIG22;
@@ -2803,8 +2901,8 @@ var require_cjs = __commonJS({
         const { body, ...templates } = TYPOGRAPHY2.templates;
         const globalTheme = CONFIG22.useDocumentTheme ? getMediaTheme2("document", `@${CONFIG22.globalTheme}`) : {};
         if (RESET2.html)
-          (0, import_utils25.overwriteDeep)(RESET2.html, globalTheme);
-        return (0, import_utils25.deepMerge)((0, import_utils25.merge)(RESET2, reset), {
+          (0, import_utils26.overwriteDeep)(RESET2.html, globalTheme);
+        return (0, import_utils26.deepMerge)((0, import_utils26.merge)(RESET2, reset), {
           html: {
             position: "absolute",
             // overflow: 'hidden',
@@ -2841,7 +2939,7 @@ var require_cjs = __commonJS({
         });
       }
     };
-    var import_utils26 = __toESM2(require_cjs22(), 1);
+    var import_utils27 = __toESM2(require_cjs22(), 1);
     var isBorderStyle = (str) => [
       "none",
       "hidden",
@@ -2881,21 +2979,10 @@ var require_cjs = __commonJS({
         return v;
       }).join(" ");
     };
-    var transformShadow2 = (shadows) => shadows.split("|").map((shadow) => {
-      return shadow.split(", ").map((v) => {
-        v = v.trim();
-        if (v.slice(0, 2) === "--")
-          return `var(${v})`;
-        if (getColor2(v).length > 2)
-          return getColor2(v);
-        if (v.includes("px") || v.slice(-2) === "em")
-          return v;
-        const arr = v.split(" ");
-        if (!arr.length)
-          return v;
-        return arr.map((v2) => getSpacingByKey3(v2, "shadow").shadow).join(" ");
-      }).join(" ");
-    }).join(",");
+    var transformShadow2 = (sh, globalTheme) => {
+      return sh.split(",").map((shadow) => getShadow(shadow, globalTheme)).join(",");
+    };
+    var transformBoxShadow2 = (sh, globalTheme) => getShadow(sh, globalTheme);
     var transformBackgroundImage2 = (backgroundImage, globalTheme) => {
       const CONFIG22 = getActiveConfig3();
       return backgroundImage.split(", ").map((v) => {
@@ -2912,7 +2999,7 @@ var require_cjs = __commonJS({
         return v;
       }).join(" ");
     };
-    var transfromGap2 = (gap) => (0, import_utils26.isString)(gap) && gap.split(" ").map((v) => getSpacingByKey3(v, "gap").gap).join(" ");
+    var transfromGap2 = (gap) => (0, import_utils27.isString)(gap) && gap.split(" ").map((v) => getSpacingByKey3(v, "gap").gap).join(" ");
     var transformTransition = (transition) => {
       const arr = transition.split(" ");
       if (!arr.length)
@@ -2930,7 +3017,7 @@ var require_cjs = __commonJS({
       }).join(" ");
     };
     var transformDuration2 = (duration, props4, propertyName) => {
-      if (!(0, import_utils26.isString)(duration))
+      if (!(0, import_utils27.isString)(duration))
         return;
       return duration.split(",").map((v) => getTimingByKey2(v).timing || v).join(",");
     };
@@ -2940,9 +3027,9 @@ var require_cjs = __commonJS({
         return;
       return arr.map(transformTransition).join(",");
     };
-    var import_utils27 = __toESM2(require_cjs22(), 1);
+    var import_utils28 = __toESM2(require_cjs22(), 1);
     var setCases = (val, key) => {
-      if ((0, import_utils27.isFunction)(val))
+      if ((0, import_utils28.isFunction)(val))
         return val();
       return val;
     };
@@ -2958,6 +3045,7 @@ var require_cjs = __commonJS({
       svg_data: setSameValue,
       typography: setSameValue,
       cases: setCases,
+      shadow: setShadow,
       spacing: setSameValue,
       media: setSameValue,
       timing: setSameValue,
@@ -3456,12 +3544,12 @@ var require_object = __commonJS({
       clone: () => clone,
       deepClone: () => deepClone3,
       deepCloneExclude: () => deepCloneExclude,
-      deepContains: () => deepContains2,
+      deepContains: () => deepContains,
       deepDestringify: () => deepDestringify,
       deepMerge: () => deepMerge2,
       deepStringify: () => deepStringify,
       detachFunctionsFromObject: () => detachFunctionsFromObject,
-      diff: () => diff2,
+      diff: () => diff,
       diffArrays: () => diffArrays,
       diffObjects: () => diffObjects,
       exec: () => exec2,
@@ -3728,7 +3816,7 @@ var require_object = __commonJS({
         const objToDiffProp = objToDiff[e];
         if ((0, import_types.isObject)(originalProp) && (0, import_types.isObject)(objToDiffProp)) {
           cache[e] = {};
-          diff2(originalProp, objToDiffProp, cache[e]);
+          diff(originalProp, objToDiffProp, cache[e]);
         } else if (objToDiffProp !== void 0) {
           cache[e] = objToDiffProp;
         }
@@ -3741,7 +3829,7 @@ var require_object = __commonJS({
       } else {
         const diffArr = [];
         for (let i = 0; i < original.length; i++) {
-          const diffObj = diff2(original[i], objToDiff[i]);
+          const diffObj = diff(original[i], objToDiff[i]);
           if (Object.keys(diffObj).length > 0) {
             diffArr.push(diffObj);
           }
@@ -3752,7 +3840,7 @@ var require_object = __commonJS({
       }
       return cache;
     };
-    var diff2 = (original, objToDiff, cache = {}) => {
+    var diff = (original, objToDiff, cache = {}) => {
       if ((0, import_types.isArray)(original) && (0, import_types.isArray)(objToDiff)) {
         cache = [];
         diffArrays(original, objToDiff, cache);
@@ -3840,7 +3928,7 @@ var require_object = __commonJS({
       }
       return true;
     };
-    var deepContains2 = (obj1, obj2) => {
+    var deepContains = (obj1, obj2) => {
       if (typeof obj1 !== typeof obj2) {
         return false;
       }
@@ -3850,14 +3938,14 @@ var require_object = __commonJS({
             return false;
           }
           for (let i = 0; i < obj1.length; i++) {
-            if (!deepContains2(obj1[i], obj2[i])) {
+            if (!deepContains(obj1[i], obj2[i])) {
               return false;
             }
           }
         } else if ((0, import_types.isObjectLike)(obj1) && obj2 !== null) {
           for (const key in obj1) {
             const hasOwnProperty = Object.prototype.hasOwnProperty.call(obj2, key);
-            if (!hasOwnProperty || !deepContains2(obj1[key], obj2[key])) {
+            if (!hasOwnProperty || !deepContains(obj1[key], obj2[key])) {
               return false;
             }
           }
@@ -5874,6 +5962,7 @@ var Theme = {
     getMediaColor: import_scratch5.getMediaColor,
     transformTextStroke: import_scratch5.transformTextStroke,
     transformShadow: import_scratch5.transformShadow,
+    transformBoxShadow: import_scratch5.transformBoxShadow,
     transformBorder: import_scratch5.transformBorder,
     transformBackgroundImage: import_scratch5.transformBackgroundImage
   },
@@ -5956,11 +6045,20 @@ var Theme = {
     borderBottom: ({ props: props4, deps }) => !(0, import_utils.isUndefined)(props4.borderBottom) && {
       borderBottom: deps.transformBorder(props4.borderBottom)
     },
+    shadow: (element) => {
+      const { props: props4, deps } = element;
+      const globalTheme = deps.getSystemTheme(element);
+      if (!props4.backgroundImage)
+        return;
+      return {
+        boxShadow: deps.transformShadow(props4.backgroundImage, globalTheme)
+      };
+    },
     boxShadow: ({ props: props4, deps }) => !(0, import_utils.isUndefined)(props4.boxShadow) && {
-      boxShadow: deps.transformShadow(props4.boxShadow)
+      boxShadow: deps.transformBoxShadow(props4.boxShadow)
     },
     textShadow: ({ props: props4, deps }) => !(0, import_utils.isUndefined)(props4.textShadow) && {
-      textShadow: deps.transformShadow(props4.textShadow)
+      textShadow: deps.transformBoxShadow(props4.textShadow)
     },
     backdropFilter: ({ props: props4, deps }) => !(0, import_utils.isUndefined)(props4.backdropFilter) && {
       backdropFilter: props4.backdropFilter
@@ -6317,12 +6415,18 @@ var Collection = {
         param = param.parse();
       if ((0, import_utils3.isNot)(param)("array", "object"))
         return;
-      if (el.key === "cnt") {
-        if (el.__ref.__stateCollectionCache) {
-          const d = (0, import_utils3.diff)(param, el.__ref.__stateCollectionCache);
+      const { __ref: ref } = el;
+      if (ref.__stateCollectionCache) {
+        const d = (0, import_utils3.deepDiff)(param, ref.__stateCollectionCache);
+        if (Object.keys(d).length) {
+          ref.__stateCollectionCache = (0, import_utils3.deepClone)(param);
+          delete ref.__noCollectionDifference;
         } else {
-          el.__ref.__stateCollectionCache = (0, import_utils3.deepClone)(param);
+          ref.__noCollectionDifference = true;
+          return;
         }
+      } else {
+        ref.__stateCollectionCache = (0, import_utils3.deepClone)(param);
       }
       const obj = {
         tag: "fragment",
@@ -6334,10 +6438,8 @@ var Collection = {
         const value = param[key];
         obj[key] = { state: (0, import_utils3.isObjectLike)(value) ? value : { value } };
       }
-      if (!(0, import_utils3.deepContains)(obj, el.content)) {
-        el.removeContent();
-        el.content = obj;
-      }
+      el.removeContent();
+      el.content = obj;
       return obj;
     },
     $setPropsCollection: (param, el, state) => {
@@ -6353,6 +6455,19 @@ var Collection = {
         param = param.parse();
       if ((0, import_utils3.isNot)(param)("array", "object"))
         return;
+      const { __ref: ref } = el;
+      if (ref.__propsCollectionCache) {
+        const d = (0, import_utils3.deepDiff)(param, ref.__propsCollectionCache);
+        if (Object.keys(d).length) {
+          ref.__propsCollectionCache = (0, import_utils3.deepClone)(param);
+          delete ref.__noCollectionDifference;
+        } else {
+          ref.__noCollectionDifference = true;
+          return;
+        }
+      } else {
+        ref.__propsCollectionCache = (0, import_utils3.deepClone)(param);
+      }
       const obj = {
         tag: "fragment",
         props: {
@@ -6363,10 +6478,8 @@ var Collection = {
         const value = param[key];
         obj[key] = { props: (0, import_utils3.isObjectLike)(value) ? value : { value } };
       }
-      if (!(0, import_utils3.deepContains)(obj, el.content)) {
-        el.removeContent();
-        el.content = obj;
-      }
+      el.removeContent();
+      el.content = obj;
       return obj;
     }
   }
@@ -8666,8 +8779,6 @@ var Textarea = {
     placeholder: "Leave us a message...",
     fontSize: "Z1",
     padding: "A",
-    background: "rgba(0, 0, 0, 0)",
-    border: "1px solid #3F3F43",
     color: "white",
     style: { resize: "none" }
   },