@symbo.ls/scratch 2.11.315 → 2.11.337

package/dist/cjs/defaultConfig/class.js

@@ -0,0 +1,27 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/defaultConfig/class.js
+var class_exports = {};
+__export(class_exports, {
+  CLASS: () => CLASS
+});
+module.exports = __toCommonJS(class_exports);
+var defaultProps = {};
+var CLASS = defaultProps;

package/dist/cjs/defaultConfig/grid.js

@@ -0,0 +1,27 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/defaultConfig/grid.js
+var grid_exports = {};
+__export(grid_exports, {
+  GRID: () => GRID
+});
+module.exports = __toCommonJS(grid_exports);
+var defaultProps = {};
+var GRID = defaultProps;

package/dist/cjs/defaultConfig/index.js

@@ -31,6 +31,7 @@ __export(defaultConfig_exports, {
   FONT_FAMILY: () => FONT_FAMILY,
   FONT_FAMILY_TYPES: () => FONT_FAMILY_TYPES,
   GRADIENT: () => GRADIENT,
+  GRID: () => GRID,
   ICONS: () => ICONS,
   MEDIA: () => MEDIA,
   RESET: () => RESET,
@@ -204,5 +205,9 @@ var SVG_DATA = {};
 // src/defaultConfig/templates.js
 var TEMPLATES = {};
 
+// src/defaultConfig/grid.js
+var defaultProps4 = {};
+var GRID = defaultProps4;
+
 // src/defaultConfig/index.js
 var RESET = {};

package/dist/cjs/factory.js

@@ -346,6 +346,8 @@ var require_array = __commonJS({
       return arr;
     };
     var cutArrayAfterValue = (arr, value) => {
+      if (!(0, import_types.isArray)(arr))
+        return;
       const index = arr.indexOf(value);
       if (index !== -1) {
         return arr.slice(index + 1);
@@ -424,13 +426,16 @@ var require_string = __commonJS({
       const pattern = new RegExp(`[${characters.join("\\")}]`, "g");
       return str.replace(pattern, "");
     };
-    var brackRegex = /\{\{\s*((?:\.\.\/)+)?([^}\s]+)\s*\}\}/g;
-    var replaceLiteralsWithObjectFields = (str, state) => {
-      if (!str.includes("{{"))
+    var brackRegex = {
+      2: /\{\{\s*((?:\.\.\/)+)?([^}\s]+)\s*\}\}/g,
+      3: /\{\{\s*((?:\.\.\.\/)+)?([^}\s]+)\s*\}\}/g
+    };
+    var replaceLiteralsWithObjectFields = (str, state, opts = {}) => {
+      if (!str.includes(opts.bracketsLength === 3 ? "{{{" : "{{"))
         return str;
-      return str.replace(brackRegex, (_, parentPath, variable) => {
+      return str.replace(brackRegex[opts.bracketsLength || 2], (_, parentPath, variable) => {
         if (parentPath) {
-          const parentLevels = parentPath.match(/\.\.\//g).length;
+          const parentLevels = parentPath.match(opts.bracketsLength === 3 ? /\.\.\.\//g : /\.\.\//g).length;
           let parentState = state;
           for (let i = 0; i < parentLevels; i++) {
             parentState = parentState.parent;
@@ -477,8 +482,9 @@ var require_object = __commonJS({
     __export2(object_exports, {
       clone: () => clone,
       deepClone: () => deepClone2,
+      deepCloneEntrance: () => deepCloneEntrance,
       deepCloneExclude: () => deepCloneExclude,
-      deepCloneWithExtnd: () => deepCloneWithExtnd,
+      deepCloneWithExtend: () => deepCloneWithExtend,
       deepContains: () => deepContains,
       deepDestringify: () => deepDestringify,
       deepDiff: () => deepDiff,
@@ -609,18 +615,24 @@ var require_object = __commonJS({
       }
       return o;
     };
-    var deepCloneWithExtnd = (obj, excludeFrom = [], cleanUndefined = false) => {
+    var deepCloneEntrance = (...params) => {
+      let extended;
+      try {
+        extended = deepCloneWithExtend(...params);
+      } catch {
+        console.log("HERE", extended);
+      }
+      return extended;
+    };
+    var deepCloneWithExtend = (obj, excludeFrom = ["node"], options = {}) => {
       const o = (0, import_types.isArray)(obj) ? [] : {};
       for (const prop in obj) {
-        if (prop === "__proto__")
-          continue;
-        if (excludeFrom.includes(prop) || prop.startsWith("__"))
-          continue;
+        const hasOwnProperty2 = Object.prototype.hasOwnProperty.call(obj, prop);
         const objProp = obj[prop];
-        if (cleanUndefined && (0, import_types.isUndefined)(objProp))
+        if (!hasOwnProperty2 || excludeFrom.includes(prop) || prop.startsWith("__") || options.cleanUndefined && (0, import_types.isUndefined)(objProp) || options.cleanNull && (0, import_types.isNull)(objProp))
           continue;
         if ((0, import_types.isObjectLike)(objProp)) {
-          o[prop] = deepCloneWithExtnd(objProp, excludeFrom, cleanUndefined);
+          o[prop] = deepCloneWithExtend(objProp, excludeFrom, options);
         } else
           o[prop] = objProp;
       }
@@ -1364,6 +1376,7 @@ __export(defaultConfig_exports, {
   FONT_FAMILY: () => FONT_FAMILY,
   FONT_FAMILY_TYPES: () => FONT_FAMILY_TYPES,
   GRADIENT: () => GRADIENT,
+  GRID: () => GRID,
   ICONS: () => ICONS,
   MEDIA: () => MEDIA,
   RESET: () => RESET,
@@ -1536,6 +1549,10 @@ var SVG_DATA = {};
 // src/defaultConfig/templates.js
 var TEMPLATES = {};
 
+// src/defaultConfig/grid.js
+var defaultProps4 = {};
+var GRID = defaultProps4;
+
 // src/defaultConfig/index.js
 var RESET = {};
 

package/dist/cjs/index.js

@@ -382,6 +382,8 @@ var require_array = __commonJS({
       return arr;
     };
     var cutArrayAfterValue = (arr, value) => {
+      if (!(0, import_types.isArray)(arr))
+        return;
       const index = arr.indexOf(value);
       if (index !== -1) {
         return arr.slice(index + 1);
@@ -460,13 +462,16 @@ var require_string = __commonJS({
       const pattern = new RegExp(`[${characters.join("\\")}]`, "g");
       return str.replace(pattern, "");
     };
-    var brackRegex = /\{\{\s*((?:\.\.\/)+)?([^}\s]+)\s*\}\}/g;
-    var replaceLiteralsWithObjectFields = (str, state) => {
-      if (!str.includes("{{"))
+    var brackRegex = {
+      2: /\{\{\s*((?:\.\.\/)+)?([^}\s]+)\s*\}\}/g,
+      3: /\{\{\s*((?:\.\.\.\/)+)?([^}\s]+)\s*\}\}/g
+    };
+    var replaceLiteralsWithObjectFields = (str, state, opts = {}) => {
+      if (!str.includes(opts.bracketsLength === 3 ? "{{{" : "{{"))
         return str;
-      return str.replace(brackRegex, (_, parentPath, variable) => {
+      return str.replace(brackRegex[opts.bracketsLength || 2], (_, parentPath, variable) => {
         if (parentPath) {
-          const parentLevels = parentPath.match(/\.\.\//g).length;
+          const parentLevels = parentPath.match(opts.bracketsLength === 3 ? /\.\.\.\//g : /\.\.\//g).length;
           let parentState = state;
           for (let i = 0; i < parentLevels; i++) {
             parentState = parentState.parent;
@@ -513,8 +518,9 @@ var require_object = __commonJS({
     __export2(object_exports, {
       clone: () => clone,
       deepClone: () => deepClone2,
+      deepCloneEntrance: () => deepCloneEntrance,
       deepCloneExclude: () => deepCloneExclude,
-      deepCloneWithExtnd: () => deepCloneWithExtnd,
+      deepCloneWithExtend: () => deepCloneWithExtend,
       deepContains: () => deepContains,
       deepDestringify: () => deepDestringify,
       deepDiff: () => deepDiff,
@@ -645,18 +651,24 @@ var require_object = __commonJS({
       }
       return o;
     };
-    var deepCloneWithExtnd = (obj, excludeFrom = [], cleanUndefined = false) => {
+    var deepCloneEntrance = (...params) => {
+      let extended;
+      try {
+        extended = deepCloneWithExtend(...params);
+      } catch {
+        console.log("HERE", extended);
+      }
+      return extended;
+    };
+    var deepCloneWithExtend = (obj, excludeFrom = ["node"], options = {}) => {
       const o = (0, import_types.isArray)(obj) ? [] : {};
       for (const prop in obj) {
-        if (prop === "__proto__")
-          continue;
-        if (excludeFrom.includes(prop) || prop.startsWith("__"))
-          continue;
+        const hasOwnProperty2 = Object.prototype.hasOwnProperty.call(obj, prop);
         const objProp = obj[prop];
-        if (cleanUndefined && (0, import_types.isUndefined)(objProp))
+        if (!hasOwnProperty2 || excludeFrom.includes(prop) || prop.startsWith("__") || options.cleanUndefined && (0, import_types.isUndefined)(objProp) || options.cleanNull && (0, import_types.isNull)(objProp))
           continue;
         if ((0, import_types.isObjectLike)(objProp)) {
-          o[prop] = deepCloneWithExtnd(objProp, excludeFrom, cleanUndefined);
+          o[prop] = deepCloneWithExtend(objProp, excludeFrom, options);
         } else
           o[prop] = objProp;
       }
@@ -1390,6 +1402,7 @@ __export(src_exports, {
   FONT_FAMILY: () => FONT_FAMILY,
   FONT_FAMILY_TYPES: () => FONT_FAMILY_TYPES,
   GRADIENT: () => GRADIENT,
+  GRID: () => GRID,
   ICONS: () => ICONS,
   MEDIA: () => MEDIA,
   RESET: () => RESET,
@@ -1558,7 +1571,7 @@ var import_utils = __toESM(require_cjs2(), 1);
 var ENV = "development";
 var colorStringToRgbaArray = (color) => {
   if (color === "")
-    return;
+    return [0, 0, 0, 0];
   if (color.toLowerCase() === "transparent")
     return [0, 0, 0, 0];
   if (color[0] === "#") {
@@ -1581,7 +1594,7 @@ var colorStringToRgbaArray = (color) => {
         return;
       elem.style.color = color;
       if (elem.style.color === flag || elem.style.color === "")
-        return;
+        return [0, 0, 0, 0];
       color = import_globals.window.getComputedStyle(elem).color;
       import_globals.document.body.removeChild(elem);
     }
@@ -1591,7 +1604,7 @@ var colorStringToRgbaArray = (color) => {
       color = `${color}, 1`;
     return color.match(/[\.\d]+/g).map((a) => +a);
   }
-  return [];
+  return [0, 0, 0, 0];
 };
 var mixTwoColors = (colorA, colorB, range = 0.5) => {
   colorA = colorStringToRgbaArray(colorA);
@@ -1798,6 +1811,7 @@ __export(defaultConfig_exports, {
   FONT_FAMILY: () => FONT_FAMILY,
   FONT_FAMILY_TYPES: () => FONT_FAMILY_TYPES,
   GRADIENT: () => GRADIENT,
+  GRID: () => GRID,
   ICONS: () => ICONS,
   MEDIA: () => MEDIA,
   RESET: () => RESET,
@@ -1970,6 +1984,10 @@ var SVG_DATA = {};
 // src/defaultConfig/templates.js
 var TEMPLATES = {};
 
+// src/defaultConfig/grid.js
+var defaultProps4 = {};
+var GRID = defaultProps4;
+
 // src/defaultConfig/index.js
 var RESET = {};
 
@@ -2460,8 +2478,14 @@ var getMediaColor = (value, globalTheme, config) => {
 };
 var setColor = (val, key, suffix) => {
   const CONFIG2 = getActiveConfig();
-  if ((0, import_utils9.isString)(val) && val.slice(0, 2) === "--")
+  if ((0, import_utils9.isString)(val) && val.slice(0, 2) === "--") {
     val = getColor(val.slice(2));
+    if (!(val.includes("rgb") || val.includes("var") || val.includes("#"))) {
+      if (CONFIG2.verbose)
+        console.warn(val, "- referred but does not exist");
+      val = val.split(" ")[0];
+    }
+  }
   if ((0, import_utils9.isArray)(val)) {
     return {
       "@light": setColor(val[0], key, "light"),
@@ -2480,7 +2504,8 @@ var setColor = (val, key, suffix) => {
     return obj;
   }
   const CSSVar = `--color-${key}` + (suffix ? `-${suffix}` : "");
-  const [r, g, b, a = 1] = colorStringToRgbaArray(val.value || val);
+  const colorArr = colorStringToRgbaArray(val.value || val);
+  const [r, g, b, a = 1] = colorArr;
   const alpha = parseFloat(a.toFixed(2));
   const rgb = `${r}, ${g}, ${b}`;
   const value = `rgba(${rgb}, ${alpha})`;
@@ -3375,6 +3400,8 @@ var VALUE_TRANSFORMERS = {
   shadow: setShadow,
   spacing: setSameValue,
   media: setSameValue,
+  grid: setSameValue,
+  class: setSameValue,
   timing: setSameValue,
   reset: setSameValue,
   unit: setSameValue,

package/dist/cjs/set.js

@@ -346,6 +346,8 @@ var require_array = __commonJS({
       return arr;
     };
     var cutArrayAfterValue = (arr, value) => {
+      if (!(0, import_types.isArray)(arr))
+        return;
       const index = arr.indexOf(value);
       if (index !== -1) {
         return arr.slice(index + 1);
@@ -424,13 +426,16 @@ var require_string = __commonJS({
       const pattern = new RegExp(`[${characters.join("\\")}]`, "g");
       return str.replace(pattern, "");
     };
-    var brackRegex = /\{\{\s*((?:\.\.\/)+)?([^}\s]+)\s*\}\}/g;
-    var replaceLiteralsWithObjectFields = (str, state) => {
-      if (!str.includes("{{"))
+    var brackRegex = {
+      2: /\{\{\s*((?:\.\.\/)+)?([^}\s]+)\s*\}\}/g,
+      3: /\{\{\s*((?:\.\.\.\/)+)?([^}\s]+)\s*\}\}/g
+    };
+    var replaceLiteralsWithObjectFields = (str, state, opts = {}) => {
+      if (!str.includes(opts.bracketsLength === 3 ? "{{{" : "{{"))
         return str;
-      return str.replace(brackRegex, (_, parentPath, variable) => {
+      return str.replace(brackRegex[opts.bracketsLength || 2], (_, parentPath, variable) => {
         if (parentPath) {
-          const parentLevels = parentPath.match(/\.\.\//g).length;
+          const parentLevels = parentPath.match(opts.bracketsLength === 3 ? /\.\.\.\//g : /\.\.\//g).length;
           let parentState = state;
           for (let i = 0; i < parentLevels; i++) {
             parentState = parentState.parent;
@@ -477,8 +482,9 @@ var require_object = __commonJS({
     __export2(object_exports, {
       clone: () => clone,
       deepClone: () => deepClone2,
+      deepCloneEntrance: () => deepCloneEntrance,
       deepCloneExclude: () => deepCloneExclude,
-      deepCloneWithExtnd: () => deepCloneWithExtnd,
+      deepCloneWithExtend: () => deepCloneWithExtend,
       deepContains: () => deepContains,
       deepDestringify: () => deepDestringify,
       deepDiff: () => deepDiff,
@@ -609,18 +615,24 @@ var require_object = __commonJS({
       }
       return o;
     };
-    var deepCloneWithExtnd = (obj, excludeFrom = [], cleanUndefined = false) => {
+    var deepCloneEntrance = (...params) => {
+      let extended;
+      try {
+        extended = deepCloneWithExtend(...params);
+      } catch {
+        console.log("HERE", extended);
+      }
+      return extended;
+    };
+    var deepCloneWithExtend = (obj, excludeFrom = ["node"], options = {}) => {
       const o = (0, import_types.isArray)(obj) ? [] : {};
       for (const prop in obj) {
-        if (prop === "__proto__")
-          continue;
-        if (excludeFrom.includes(prop) || prop.startsWith("__"))
-          continue;
+        const hasOwnProperty2 = Object.prototype.hasOwnProperty.call(obj, prop);
         const objProp = obj[prop];
-        if (cleanUndefined && (0, import_types.isUndefined)(objProp))
+        if (!hasOwnProperty2 || excludeFrom.includes(prop) || prop.startsWith("__") || options.cleanUndefined && (0, import_types.isUndefined)(objProp) || options.cleanNull && (0, import_types.isNull)(objProp))
           continue;
         if ((0, import_types.isObjectLike)(objProp)) {
-          o[prop] = deepCloneWithExtnd(objProp, excludeFrom, cleanUndefined);
+          o[prop] = deepCloneWithExtend(objProp, excludeFrom, options);
         } else
           o[prop] = objProp;
       }
@@ -1400,6 +1412,7 @@ __export(defaultConfig_exports, {
   FONT_FAMILY: () => FONT_FAMILY,
   FONT_FAMILY_TYPES: () => FONT_FAMILY_TYPES,
   GRADIENT: () => GRADIENT,
+  GRID: () => GRID,
   ICONS: () => ICONS,
   MEDIA: () => MEDIA,
   RESET: () => RESET,
@@ -1572,6 +1585,10 @@ var SVG_DATA = {};
 // src/defaultConfig/templates.js
 var TEMPLATES = {};
 
+// src/defaultConfig/grid.js
+var defaultProps4 = {};
+var GRID = defaultProps4;
+
 // src/defaultConfig/index.js
 var RESET = {};
 
@@ -1613,7 +1630,7 @@ var import_globals = __toESM(require_cjs2(), 1);
 var import_utils2 = __toESM(require_cjs(), 1);
 var colorStringToRgbaArray = (color) => {
   if (color === "")
-    return;
+    return [0, 0, 0, 0];
   if (color.toLowerCase() === "transparent")
     return [0, 0, 0, 0];
   if (color[0] === "#") {
@@ -1636,7 +1653,7 @@ var colorStringToRgbaArray = (color) => {
         return;
       elem.style.color = color;
       if (elem.style.color === flag || elem.style.color === "")
-        return;
+        return [0, 0, 0, 0];
       color = import_globals.window.getComputedStyle(elem).color;
       import_globals.document.body.removeChild(elem);
     }
@@ -1646,7 +1663,7 @@ var colorStringToRgbaArray = (color) => {
       color = `${color}, 1`;
     return color.match(/[\.\d]+/g).map((a) => +a);
   }
-  return [];
+  return [0, 0, 0, 0];
 };
 var hexToRgbArray = (hex, alpha = 1) => {
   const [r, g, b] = hex.match(/\w\w/g).map((x) => parseInt(x, 16));
@@ -2120,8 +2137,14 @@ var getColor = (value, key, config) => {
 };
 var setColor = (val, key, suffix) => {
   const CONFIG2 = getActiveConfig();
-  if ((0, import_utils9.isString)(val) && val.slice(0, 2) === "--")
+  if ((0, import_utils9.isString)(val) && val.slice(0, 2) === "--") {
     val = getColor(val.slice(2));
+    if (!(val.includes("rgb") || val.includes("var") || val.includes("#"))) {
+      if (CONFIG2.verbose)
+        console.warn(val, "- referred but does not exist");
+      val = val.split(" ")[0];
+    }
+  }
   if ((0, import_utils9.isArray)(val)) {
     return {
       "@light": setColor(val[0], key, "light"),
@@ -2140,7 +2163,8 @@ var setColor = (val, key, suffix) => {
     return obj;
   }
   const CSSVar = `--color-${key}` + (suffix ? `-${suffix}` : "");
-  const [r, g, b, a = 1] = colorStringToRgbaArray(val.value || val);
+  const colorArr = colorStringToRgbaArray(val.value || val);
+  const [r, g, b, a = 1] = colorArr;
   const alpha = parseFloat(a.toFixed(2));
   const rgb = `${r}, ${g}, ${b}`;
   const value = `rgba(${rgb}, ${alpha})`;
@@ -2751,6 +2775,8 @@ var VALUE_TRANSFORMERS = {
   shadow: setShadow,
   spacing: setSameValue,
   media: setSameValue,
+  grid: setSameValue,
+  class: setSameValue,
   timing: setSameValue,
   reset: setSameValue,
   unit: setSameValue,

package/dist/cjs/system/color.js

@@ -346,6 +346,8 @@ var require_array = __commonJS({
       return arr;
     };
     var cutArrayAfterValue = (arr, value) => {
+      if (!(0, import_types.isArray)(arr))
+        return;
       const index = arr.indexOf(value);
       if (index !== -1) {
         return arr.slice(index + 1);
@@ -424,13 +426,16 @@ var require_string = __commonJS({
       const pattern = new RegExp(`[${characters.join("\\")}]`, "g");
       return str.replace(pattern, "");
     };
-    var brackRegex = /\{\{\s*((?:\.\.\/)+)?([^}\s]+)\s*\}\}/g;
-    var replaceLiteralsWithObjectFields = (str, state) => {
-      if (!str.includes("{{"))
+    var brackRegex = {
+      2: /\{\{\s*((?:\.\.\/)+)?([^}\s]+)\s*\}\}/g,
+      3: /\{\{\s*((?:\.\.\.\/)+)?([^}\s]+)\s*\}\}/g
+    };
+    var replaceLiteralsWithObjectFields = (str, state, opts = {}) => {
+      if (!str.includes(opts.bracketsLength === 3 ? "{{{" : "{{"))
         return str;
-      return str.replace(brackRegex, (_, parentPath, variable) => {
+      return str.replace(brackRegex[opts.bracketsLength || 2], (_, parentPath, variable) => {
         if (parentPath) {
-          const parentLevels = parentPath.match(/\.\.\//g).length;
+          const parentLevels = parentPath.match(opts.bracketsLength === 3 ? /\.\.\.\//g : /\.\.\//g).length;
           let parentState = state;
           for (let i = 0; i < parentLevels; i++) {
             parentState = parentState.parent;
@@ -477,8 +482,9 @@ var require_object = __commonJS({
     __export2(object_exports, {
       clone: () => clone,
       deepClone: () => deepClone2,
+      deepCloneEntrance: () => deepCloneEntrance,
       deepCloneExclude: () => deepCloneExclude,
-      deepCloneWithExtnd: () => deepCloneWithExtnd,
+      deepCloneWithExtend: () => deepCloneWithExtend,
       deepContains: () => deepContains,
       deepDestringify: () => deepDestringify,
       deepDiff: () => deepDiff,
@@ -609,18 +615,24 @@ var require_object = __commonJS({
       }
       return o;
     };
-    var deepCloneWithExtnd = (obj, excludeFrom = [], cleanUndefined = false) => {
+    var deepCloneEntrance = (...params) => {
+      let extended;
+      try {
+        extended = deepCloneWithExtend(...params);
+      } catch {
+        console.log("HERE", extended);
+      }
+      return extended;
+    };
+    var deepCloneWithExtend = (obj, excludeFrom = ["node"], options = {}) => {
       const o = (0, import_types.isArray)(obj) ? [] : {};
       for (const prop in obj) {
-        if (prop === "__proto__")
-          continue;
-        if (excludeFrom.includes(prop) || prop.startsWith("__"))
-          continue;
+        const hasOwnProperty2 = Object.prototype.hasOwnProperty.call(obj, prop);
         const objProp = obj[prop];
-        if (cleanUndefined && (0, import_types.isUndefined)(objProp))
+        if (!hasOwnProperty2 || excludeFrom.includes(prop) || prop.startsWith("__") || options.cleanUndefined && (0, import_types.isUndefined)(objProp) || options.cleanNull && (0, import_types.isNull)(objProp))
           continue;
         if ((0, import_types.isObjectLike)(objProp)) {
-          o[prop] = deepCloneWithExtnd(objProp, excludeFrom, cleanUndefined);
+          o[prop] = deepCloneWithExtend(objProp, excludeFrom, options);
         } else
           o[prop] = objProp;
       }
@@ -1401,6 +1413,7 @@ __export(defaultConfig_exports, {
   FONT_FAMILY: () => FONT_FAMILY,
   FONT_FAMILY_TYPES: () => FONT_FAMILY_TYPES,
   GRADIENT: () => GRADIENT,
+  GRID: () => GRID,
   ICONS: () => ICONS,
   MEDIA: () => MEDIA,
   RESET: () => RESET,
@@ -1573,6 +1586,10 @@ var SVG_DATA = {};
 // src/defaultConfig/templates.js
 var TEMPLATES = {};
 
+// src/defaultConfig/grid.js
+var defaultProps4 = {};
+var GRID = defaultProps4;
+
 // src/defaultConfig/index.js
 var RESET = {};
 
@@ -1599,7 +1616,7 @@ var import_globals = __toESM(require_cjs2(), 1);
 var import_utils2 = __toESM(require_cjs(), 1);
 var colorStringToRgbaArray = (color) => {
   if (color === "")
-    return;
+    return [0, 0, 0, 0];
   if (color.toLowerCase() === "transparent")
     return [0, 0, 0, 0];
   if (color[0] === "#") {
@@ -1622,7 +1639,7 @@ var colorStringToRgbaArray = (color) => {
         return;
       elem.style.color = color;
       if (elem.style.color === flag || elem.style.color === "")
-        return;
+        return [0, 0, 0, 0];
       color = import_globals.window.getComputedStyle(elem).color;
       import_globals.document.body.removeChild(elem);
     }
@@ -1632,7 +1649,7 @@ var colorStringToRgbaArray = (color) => {
       color = `${color}, 1`;
     return color.match(/[\.\d]+/g).map((a) => +a);
   }
-  return [];
+  return [0, 0, 0, 0];
 };
 var hexToRgbArray = (hex, alpha = 1) => {
   const [r, g, b] = hex.match(/\w\w/g).map((x) => parseInt(x, 16));
@@ -1784,8 +1801,14 @@ var getMediaColor = (value, globalTheme, config) => {
 };
 var setColor = (val, key, suffix) => {
   const CONFIG2 = getActiveConfig();
-  if ((0, import_utils9.isString)(val) && val.slice(0, 2) === "--")
+  if ((0, import_utils9.isString)(val) && val.slice(0, 2) === "--") {
     val = getColor(val.slice(2));
+    if (!(val.includes("rgb") || val.includes("var") || val.includes("#"))) {
+      if (CONFIG2.verbose)
+        console.warn(val, "- referred but does not exist");
+      val = val.split(" ")[0];
+    }
+  }
   if ((0, import_utils9.isArray)(val)) {
     return {
       "@light": setColor(val[0], key, "light"),
@@ -1804,7 +1827,8 @@ var setColor = (val, key, suffix) => {
     return obj;
   }
   const CSSVar = `--color-${key}` + (suffix ? `-${suffix}` : "");
-  const [r, g, b, a = 1] = colorStringToRgbaArray(val.value || val);
+  const colorArr = colorStringToRgbaArray(val.value || val);
+  const [r, g, b, a = 1] = colorArr;
   const alpha = parseFloat(a.toFixed(2));
   const rgb = `${r}, ${g}, ${b}`;
   const value = `rgba(${rgb}, ${alpha})`;