@symbo.ls/scratch 2.11.522 → 3.0.1

package/dist/cjs/index.js

@@ -30,44 +30,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// ../../node_modules/@domql/globals/dist/cjs/index.js
-var require_cjs = __commonJS({
-  "../../node_modules/@domql/globals/dist/cjs/index.js"(exports, module2) {
-    "use strict";
-    var __defProp3 = Object.defineProperty;
-    var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
-    var __getOwnPropNames2 = Object.getOwnPropertyNames;
-    var __hasOwnProp3 = Object.prototype.hasOwnProperty;
-    var __export2 = (target, all) => {
-      for (var name in all)
-        __defProp3(target, name, { get: all[name], enumerable: true });
-    };
-    var __copyProps2 = (to, from, except, desc) => {
-      if (from && typeof from === "object" || typeof from === "function") {
-        for (let key of __getOwnPropNames2(from))
-          if (!__hasOwnProp3.call(to, key) && key !== except)
-            __defProp3(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
-      }
-      return to;
-    };
-    var __toCommonJS2 = (mod) => __copyProps2(__defProp3({}, "__esModule", { value: true }), mod);
-    var globals_exports = {};
-    __export2(globals_exports, {
-      document: () => document5,
-      global: () => global,
-      self: () => self,
-      window: () => window4
-    });
-    module2.exports = __toCommonJS2(globals_exports);
-    var global = globalThis;
-    var self = globalThis;
-    var window4 = globalThis;
-    var document5 = window4.document;
-  }
-});
-
 // ../utils/dist/cjs/index.js
-var require_cjs2 = __commonJS({
+var require_cjs = __commonJS({
   "../utils/dist/cjs/index.js"(exports, module2) {
     "use strict";
     var __defProp3 = Object.defineProperty;
@@ -87,8 +51,8 @@ var require_cjs2 = __commonJS({
       return to;
     };
     var __toCommonJS2 = (mod) => __copyProps2(__defProp3({}, "__esModule", { value: true }), mod);
-    var src_exports2 = {};
-    __export2(src_exports2, {
+    var index_exports2 = {};
+    __export2(index_exports2, {
       arrayzeValue: () => arrayzeValue3,
       copyJavaScriptToClipboard: () => copyJavaScriptToClipboard,
       copyStringToClipboard: () => copyStringToClipboard,
@@ -109,12 +73,11 @@ var require_cjs2 = __commonJS({
       toTitleCase: () => toTitleCase,
       toggleFullscreen: () => toggleFullscreen
     });
-    module2.exports = __toCommonJS2(src_exports2);
+    module2.exports = __toCommonJS2(index_exports2);
     var window22 = globalThis;
     var document22 = window22.document;
     var isObject2 = (arg) => {
-      if (arg === null)
-        return false;
+      if (arg === null) return false;
       return typeof arg === "object" && arg.constructor === Object;
     };
     var isString2 = (arg) => typeof arg === "string";
@@ -139,13 +102,11 @@ var require_cjs2 = __commonJS({
     };
     var findClosestNumberInFactory = (val, factory) => {
       val = parseFloat(val);
-      if (isObject2(factory))
-        factory = Object.values(factory);
+      if (isObject2(factory)) factory = Object.values(factory);
       return findClosestNumber(val, factory);
     };
     var formatDate = (timestamp) => {
-      if (!timestamp)
-        return "";
+      if (!timestamp) return "";
       const d = new Date(timestamp);
       const ye = new Intl.DateTimeFormat("en", { year: "numeric" }).format(d);
       const mo = new Intl.DateTimeFormat("en", { month: "short" }).format(d);
@@ -212,8 +173,7 @@ var require_cjs2 = __commonJS({
         scriptEle.type = type;
         scriptEle.text = xhr.responseText;
         doc.body.appendChild(scriptEle);
-        if (typeof fallback === "function")
-          fallback();
+        if (typeof fallback === "function") fallback();
       } else {
         throw new Error(`Failed to load the script ${FILE_URL}`);
       }
@@ -281,27 +241,22 @@ var require_cjs2 = __commonJS({
     );
     var toDashCase2 = (val) => val.replace(/[^a-zA-Z0-9]/g, " ").trim().toLowerCase().replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
     var toDescriptionCase = (str = "") => {
-      if (typeof str !== "string")
-        return;
+      if (typeof str !== "string") return;
       const result = str.replace(/([A-Z])/g, " $1");
       return result.charAt(0).toUpperCase() + result.slice(1);
     };
     var arrayzeValue3 = (val) => {
-      if (isArray2(val))
-        return val;
-      if (isString2(val))
-        return val.split(" ");
-      if (isObject2(val))
-        return Object.values(val);
-      if (isNumber2(val))
-        return [val];
+      if (isArray2(val)) return val;
+      if (isString2(val)) return val.split(" ");
+      if (isObject2(val)) return Object.values(val);
+      if (isNumber2(val)) return [val];
     };
   }
 });
 
 // src/index.js
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   ANIMATION: () => ANIMATION,
   BREAKPOINTS: () => BREAKPOINTS,
   CASES: () => CASES,
@@ -418,6 +373,7 @@ __export(src_exports, {
   splitTransition: () => splitTransition,
   transformBackgroundImage: () => transformBackgroundImage,
   transformBorder: () => transformBorder,
+  transformBorderRadius: () => transformBorderRadius,
   transformBoxShadow: () => transformBoxShadow,
   transformDuration: () => transformDuration,
   transformShadow: () => transformShadow,
@@ -427,7 +383,7 @@ __export(src_exports, {
   transformTransition: () => transformTransition,
   transfromGap: () => transfromGap
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/utils/index.js
 var utils_exports = {};
@@ -483,22 +439,18 @@ var isScalingUnit = (unit) => {
   return unit === "em" || unit === "rem" || unit === "vw" || unit === "vh" || unit === "vmax" || unit === "vmin";
 };
 
-// src/utils/color.js
-var import_globals4 = __toESM(require_cjs(), 1);
-
-// ../../node_modules/@domql/utils/dist/esm/globals.js
+// node_modules/@domql/utils/dist/esm/globals.js
 var window2 = globalThis;
 var document2 = window2.document;
 
-// ../../node_modules/@domql/utils/dist/esm/node.js
+// node_modules/@domql/utils/dist/esm/node.js
 var isDOMNode = (obj) => {
   return typeof window2 !== "undefined" && (obj instanceof window2.Node || obj instanceof window2.Window || obj === window2 || obj === document);
 };
 
-// ../../node_modules/@domql/utils/dist/esm/types.js
+// node_modules/@domql/utils/dist/esm/types.js
 var isObject = (arg) => {
-  if (arg === null)
-    return false;
+  if (arg === null) return false;
   return typeof arg === "object" && arg.constructor === Object;
 };
 var isString = (arg) => typeof arg === "string";
@@ -509,8 +461,7 @@ var isNull = (arg) => arg === null;
 var isArray = (arg) => Array.isArray(arg);
 var isDate = (d) => d instanceof Date;
 var isObjectLike = (arg) => {
-  if (arg === null)
-    return false;
+  if (arg === null) return false;
   return typeof arg === "object";
 };
 var isDefined = (arg) => {
@@ -520,12 +471,12 @@ var isUndefined = (arg) => {
   return arg === void 0;
 };
 
-// ../../node_modules/@domql/utils/dist/esm/array.js
+// node_modules/@domql/utils/dist/esm/array.js
 var mergeArray = (arr, exclude = []) => {
   return arr.reduce((a, c) => deepMerge(a, deepClone(c, { exclude }), exclude), {});
 };
 
-// ../../node_modules/@domql/utils/dist/esm/object.js
+// node_modules/@domql/utils/dist/esm/object.js
 var __defProp2 = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
@@ -548,8 +499,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var merge = (element, obj, excludeFrom = []) => {
   for (const e in obj) {
     const hasOwnProperty2 = Object.prototype.hasOwnProperty.call(obj, e);
-    if (!hasOwnProperty2 || excludeFrom.includes(e) || e.startsWith("__"))
-      continue;
+    if (!hasOwnProperty2 || excludeFrom.includes(e) || e.startsWith("__")) continue;
     const elementProp = element[e];
     const objProp = obj[e];
     if (elementProp === void 0) {
@@ -561,8 +511,7 @@ var merge = (element, obj, excludeFrom = []) => {
 var deepMerge = (element, extend, excludeFrom = []) => {
   for (const e in extend) {
     const hasOwnProperty2 = Object.prototype.hasOwnProperty.call(extend, e);
-    if (!hasOwnProperty2 || excludeFrom.includes(e) || e.startsWith("__"))
-      continue;
+    if (!hasOwnProperty2 || excludeFrom.includes(e) || e.startsWith("__")) continue;
     const elementProp = element[e];
     const extendProp = extend[e];
     if (isObjectLike(elementProp) && isObjectLike(extendProp)) {
@@ -591,13 +540,10 @@ var deepClone = (obj, options = {}) => {
   const clone2 = targetWindow ? isArray(obj) ? new targetWindow.Array() : new targetWindow.Object() : isArray(obj) ? [] : {};
   visited.set(obj, clone2);
   for (const key in obj) {
-    if (!Object.prototype.hasOwnProperty.call(obj, key))
-      continue;
-    if (exclude.includes(key) || key.startsWith("__") || key === "__proto__")
-      continue;
+    if (!Object.prototype.hasOwnProperty.call(obj, key)) continue;
+    if (exclude.includes(key) || key.startsWith("__") || key === "__proto__") continue;
     const value = obj[key];
-    if (cleanUndefined && isUndefined(value) || cleanNull && isNull(value))
-      continue;
+    if (cleanUndefined && isUndefined(value) || cleanNull && isNull(value)) continue;
     if (isDOMNode(value)) {
       clone2[key] = value;
       continue;
@@ -626,14 +572,11 @@ var overwriteDeep = (obj, params, opts = {}, visited = /* @__PURE__ */ new WeakM
   if (!isObjectLike(obj) || !isObjectLike(params) || isDOMNode(obj) || isDOMNode(params)) {
     return params;
   }
-  if (visited.has(obj))
-    return visited.get(obj);
+  if (visited.has(obj)) return visited.get(obj);
   visited.set(obj, obj);
   for (const e in params) {
-    if (!Object.hasOwnProperty.call(params, e))
-      continue;
-    if (excl.includes(e) || forcedExclude && e.startsWith("__"))
-      continue;
+    if (!Object.hasOwnProperty.call(params, e)) continue;
+    if (excl.includes(e) || forcedExclude && e.startsWith("__")) continue;
     const objProp = obj[e];
     const paramsProp = params[e];
     if (isDOMNode(paramsProp)) {
@@ -647,16 +590,14 @@ var overwriteDeep = (obj, params, opts = {}, visited = /* @__PURE__ */ new WeakM
   return obj;
 };
 
-// ../../node_modules/@domql/utils/dist/esm/cookie.js
+// node_modules/@domql/utils/dist/esm/cookie.js
 var isMobile = (() => typeof navigator === "undefined" ? false : /Mobi/.test(navigator.userAgent))();
 
 // src/utils/color.js
 var ENV = "development";
 var colorStringToRgbaArray = (color) => {
-  if (color === "")
-    return [0, 0, 0, 0];
-  if (color.toLowerCase() === "transparent")
-    return [0, 0, 0, 0];
+  if (color === "") return [0, 0, 0, 0];
+  if (color.toLowerCase() === "transparent") return [0, 0, 0, 0];
   if (color[0] === "#") {
     if (color.length < 7) {
       color = "#" + color[1] + color[1] + color[2] + color[2] + color[3] + color[3] + (color.length > 4 ? color[4] + color[4] : "");
@@ -669,26 +610,25 @@ var colorStringToRgbaArray = (color) => {
     ];
   }
   if (color.indexOf("rgb") === -1) {
-    if (import_globals4.document && import_globals4.window) {
-      const elem = import_globals4.document.body.appendChild(import_globals4.document.createElement("fictum"));
+    if (document2 && window2) {
+      const elem = document2.body.appendChild(document2.createElement("fictum"));
       const flag = "rgb(1, 2, 3)";
       elem.style.color = flag;
       if (elem.style.color !== flag) {
-        import_globals4.document.body.removeChild(elem);
+        document2.body.removeChild(elem);
         return;
       }
       elem.style.color = color;
       if (elem.style.color === flag || elem.style.color === "") {
-        import_globals4.document.body.removeChild(elem);
+        document2.body.removeChild(elem);
         return [0, 0, 0, 0];
       }
-      color = import_globals4.window.getComputedStyle(elem).color;
-      import_globals4.document.body.removeChild(elem);
+      color = window2.getComputedStyle(elem).color;
+      document2.body.removeChild(elem);
     }
   }
   if (color.indexOf("rgb") === 0) {
-    if (color.indexOf("rgba") === -1)
-      color = `${color}, 1`;
+    if (color.indexOf("rgba") === -1) color = `${color}, 1`;
     return color.match(/[\.\d]+/g).map((a) => +a);
   }
   return [0, 0, 0, 0];
@@ -745,20 +685,14 @@ var hslToRgb = (h, s, l, a = s * Math.min(l, 1 - l), f = (n, k = (n + h / 30) %
 var getColorShade = (col, amt) => {
   const num = parseInt(col, 16);
   let r = (num >> 16) + amt;
-  if (r > 255)
-    r = 255;
-  else if (r < 0)
-    r = 0;
+  if (r > 255) r = 255;
+  else if (r < 0) r = 0;
   let b = (num >> 8 & 255) + amt;
-  if (b > 255)
-    b = 255;
-  else if (b < 0)
-    b = 0;
+  if (b > 255) b = 255;
+  else if (b < 0) b = 0;
   let g = (num & 255) + amt;
-  if (g > 255)
-    g = 255;
-  else if (g < 0)
-    g = 0;
+  if (g > 255) g = 255;
+  else if (g < 0) g = 0;
   return ((g | b << 8 | r << 16) + 16777216).toString(16).slice(1);
 };
 var mixTwoRgba = (colorA, colorB, range = 0.5) => {
@@ -774,20 +708,16 @@ var mixTwoRgba = (colorA, colorB, range = 0.5) => {
 var opacify = (color, opacity) => {
   const arr = colorStringToRgbaArray(color);
   if (!arr) {
-    if (ENV === "test" || ENV === "development")
-      console.warn(color + " color is not rgba");
+    if (ENV === "test" || ENV === "development") console.warn(color + " color is not rgba");
     return;
   }
   arr[3] = opacity;
   return `rgba(${arr})`;
 };
 var getRgbTone = (rgb, tone) => {
-  if (isString(rgb) && rgb.includes("rgb"))
-    rgb = colorStringToRgbaArray(rgb).join(", ");
-  if (isString(rgb))
-    rgb = rgb.split(",").map((v) => parseFloat(v.trim()));
-  if (isNumber(tone))
-    tone += "";
+  if (isString(rgb) && rgb.includes("rgb")) rgb = colorStringToRgbaArray(rgb).join(", ");
+  if (isString(rgb)) rgb = rgb.split(",").map((v) => parseFloat(v.trim()));
+  if (isNumber(tone)) tone += "";
   const toHex = rgbArrayToHex(rgb);
   const abs = tone.slice(0, 1);
   if (abs === "-" || abs === "+") {
@@ -804,21 +734,16 @@ var getRgbTone = (rgb, tone) => {
 
 // src/utils/theme.js
 var returnSubThemeOrDefault = (orig, theme) => {
-  if (!orig)
-    return;
-  if (orig.themes && orig.themes[theme])
-    return orig.themes[theme];
-  if (orig[theme])
-    return [orig, orig[theme]];
+  if (!orig) return;
+  if (orig.themes && orig.themes[theme]) return orig.themes[theme];
+  if (orig[theme]) return [orig, orig[theme]];
   return orig;
 };
 
 // src/utils/font.js
 var getDefaultOrFirstKey = (LIBRARY, key) => {
-  if (LIBRARY[key])
-    return LIBRARY[key].value;
-  if (LIBRARY.default)
-    return LIBRARY[LIBRARY.default].value;
+  if (LIBRARY[key]) return LIBRARY[key].value;
+  if (LIBRARY.default) return LIBRARY[LIBRARY.default].value;
   const hasValue = Object.keys(LIBRARY)[0];
   return hasValue && LIBRARY[hasValue] && LIBRARY[hasValue].value;
 };
@@ -845,8 +770,7 @@ var getFontFace = (LIBRARY) => {
 };
 var getFontFaceEachString = (name, weights) => {
   const isArr = weights[0];
-  if (isArr)
-    return getFontFaceEach(name, weights).map(setInCustomFontMedia);
+  if (isArr) return getFontFaceEach(name, weights).map(setInCustomFontMedia);
   return setCustomFontMedia(name, weights.url);
 };
 var getFontFaceString = (LIBRARY) => {
@@ -855,7 +779,7 @@ var getFontFaceString = (LIBRARY) => {
 };
 
 // src/utils/sequence.js
-var import_utils4 = __toESM(require_cjs2(), 1);
+var import_utils4 = __toESM(require_cjs(), 1);
 
 // src/defaultConfig/index.js
 var defaultConfig_exports = {};
@@ -1084,8 +1008,7 @@ var getActiveConfig = (def) => {
   return FACTORY[def || FACTORY.active] || CONFIG;
 };
 var setActiveConfig = (newConfig) => {
-  if (!isObject(newConfig))
-    return;
+  if (!isObject(newConfig)) return;
   FACTORY.active = "1";
   FACTORY["1"] = deepMerge(newConfig, deepClone(cachedConfig));
   return newConfig;
@@ -1137,8 +1060,7 @@ var setSequenceValue = (props, sequenceProps) => {
 var setScalingVar = (key, sequenceProps) => {
   const { base, type, unit } = sequenceProps;
   const defaultVal = (isScalingUnit(unit) ? 1 : base) + unit;
-  if (key === 0)
-    return defaultVal;
+  if (key === 0) return defaultVal;
   const prefix = "--" + (type && type.replace(".", "-"));
   const ratioVar = `${prefix}-ratio`;
   if (key > 0) {
@@ -1175,10 +1097,8 @@ var generateSubSequence = (props, sequenceProps) => {
   const diffRounded = ~~next - ~~value;
   let arr;
   const [first, middle, second] = getSubratioDifference(value, ratio);
-  if (diffRounded > 16)
-    arr = [first, middle, second];
-  else
-    arr = [first, second];
+  if (diffRounded > 16) arr = [first, middle, second];
+  else arr = [first, second];
   arr.forEach((v, k) => {
     const scaling = ~~(v / base * 1e3) / 1e3;
     const newVar = variable + (k + 1);
@@ -1220,8 +1140,7 @@ var generateSequence = (sequenceProps) => {
       index: key
     };
     setSequenceValue(props, sequenceProps);
-    if (subSequence)
-      generateSubSequence(props, sequenceProps);
+    if (subSequence) generateSubSequence(props, sequenceProps);
   }
   return sequenceProps;
 };
@@ -1267,13 +1186,11 @@ var getSequenceValue = (value = "A", sequenceProps) => {
     unit = UNIT2.default,
     useVariable
   } = sequenceProps;
-  if (isString(value) && value.slice(0, 2) === "--")
-    return `var(${value})`;
+  if (isString(value) && value.slice(0, 2) === "--") return `var(${value})`;
   const prefix = `--${(0, import_utils4.toDashCase)(sequenceProps.type.replace(".", "-"))}-`;
   const startsWithDashOrLetterRegex = /^-?[a-zA-Z]/i;
   const startsWithDashOrLetter = startsWithDashOrLetterRegex.test(value);
-  if (value === "none" || value === "auto" || value === "unset" || value === "inherit" || value === "fit-content" || value === "min-content" || value === "max-content" || value.includes("calc") || value.includes("var") || !startsWithDashOrLetter)
-    return value;
+  if (value === "none" || value === "auto" || value === "unset" || value === "inherit" || value === "fit-content" || value === "min-content" || value === "max-content" || value.includes("calc") || value.includes("var") || !startsWithDashOrLetter) return value;
   const letterVal = value.toUpperCase();
   const isNegative = letterVal.slice(0, 1) === "-" ? "-" : "";
   let absValue = isNegative ? letterVal.slice(1) : letterVal;
@@ -1297,8 +1214,7 @@ var getSequenceValue = (value = "A", sequenceProps) => {
     return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
   }
   if (!sequence[absValue] && absValue.length === 2) {
-    if (CONFIG2.verbose)
-      console.warn(absValue, "- value is not found because `subSequence` is set to false");
+    if (CONFIG2.verbose) console.warn(absValue, "- value is not found because `subSequence` is set to false");
     absValue = absValue.slice(0, 1);
   }
   if (useVariable || CONFIG2.useVariable) {
@@ -1306,8 +1222,7 @@ var getSequenceValue = (value = "A", sequenceProps) => {
     return isNegative ? `calc(${varValue2} * -1)` : varValue2;
   }
   const sequenceItem = sequence ? sequence[absValue] : null;
-  if (!sequenceItem)
-    return console.warn("can't find", sequence, absValue);
+  if (!sequenceItem) return console.warn("can't find", sequence, absValue);
   if (unit === "ms" || unit === "s") {
     return isNegative + sequenceItem.val + unit;
   }
@@ -1316,12 +1231,10 @@ var getSequenceValue = (value = "A", sequenceProps) => {
 var getSequenceValuePropertyPair = (value, propertyName, sequenceProps) => {
   if (typeof value !== "string") {
     const CONFIG2 = getActiveConfig();
-    if (CONFIG2.verbose)
-      console.warn(propertyName, value, "is not a string");
+    if (CONFIG2.verbose) console.warn(propertyName, value, "is not a string");
     return { [propertyName]: value };
   }
-  if (value === "-" || value === "")
-    return {};
+  if (value === "-" || value === "") return {};
   return { [propertyName]: getSequenceValue(value, sequenceProps) };
 };
 var findHeadingLetter = (h1Matches, index) => numToLetterMap[h1Matches - index];
@@ -1389,23 +1302,19 @@ var applyMediaSequenceVars = (FACTORY2, media, options = {}) => {
   const { mediaRegenerate } = FACTORY2;
   const { sequence, scales } = FACTORY2[media];
   const query = MEDIA2[mediaName];
-  if (!query && CONFIG2.verbose)
-    console.warn("Can't find media query ", query);
+  if (!query && CONFIG2.verbose) console.warn("Can't find media query ", query);
   if (!mediaRegenerate) {
     let underMediaQuery = CSS_VARS2[`@media ${query}`];
-    if (!underMediaQuery)
-      underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
+    if (!underMediaQuery) underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
     applySequenceGlobalVars(underMediaQuery, FACTORY2[media], options);
     return;
   }
   for (const key in sequence) {
     const item = sequence[key];
     const value = (isScalingUnit(unit) ? scales[key] : sequence[key].val) + unit;
-    if (!query && CONFIG2.verbose)
-      console.warn("Can't find query ", query);
+    if (!query && CONFIG2.verbose) console.warn("Can't find query ", query);
     let underMediaQuery = CSS_VARS2[`@media ${query}`];
-    if (!underMediaQuery)
-      underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
+    if (!underMediaQuery) underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
     underMediaQuery[item.variable] = `var(${item.variable + "_" + mediaName})`;
     CSS_VARS2[item.variable + "_" + mediaName] = value;
   }
@@ -1416,10 +1325,8 @@ var generateSprite = (icons) => {
   const CONFIG2 = getActiveConfig();
   let sprite = "";
   for (const key in icons) {
-    if (CONFIG2.__svg_cache[key])
-      continue;
-    else
-      CONFIG2.__svg_cache[key] = true;
+    if (CONFIG2.__svg_cache[key]) continue;
+    else CONFIG2.__svg_cache[key] = true;
     sprite += icons[key];
   }
   return sprite;
@@ -1508,27 +1415,21 @@ __export(system_exports, {
 var getColor = (value, key, config) => {
   const CONFIG2 = config || getActiveConfig();
   if (!isString(value)) {
-    if (CONFIG2.verbose)
-      console.warn(value, "- type for color is not valid");
+    if (CONFIG2.verbose) console.warn(value, "- type for color is not valid");
     return;
   }
-  if (value.slice(0, 2) === "--")
-    return `var(${value})`;
-  if (key && value[key])
-    value = value[key];
+  if (value.slice(0, 2) === "--") return `var(${value})`;
+  if (key && value[key]) value = value[key];
   const [name, alpha, tone] = isArray(value) ? value : value.split(" ");
   const { COLOR: COLOR2, GRADIENT: GRADIENT2 } = CONFIG2;
   let val = COLOR2[name] || GRADIENT2[name];
   if (!val) {
-    if (CONFIG2.verbose)
-      console.warn("Can't find color ", name);
+    if (CONFIG2.verbose) console.warn("Can't find color ", name);
     return value;
   }
   if (key) {
-    if (val[key])
-      val = val[key];
-    else if (CONFIG2.verbose)
-      console.warn(value, " - does not have ", key);
+    if (val[key]) val = val[key];
+    else if (CONFIG2.verbose) console.warn(value, " - does not have ", key);
   }
   let rgb = val.rgb;
   if (!rgb) {
@@ -1538,32 +1439,25 @@ var getColor = (value, key, config) => {
     rgb = getRgbTone(rgb, tone);
     val[tone] = { rgb, var: `${val.var}-${tone}` };
   }
-  if (val[tone])
-    rgb = val[tone].rgb;
-  if (alpha)
-    return `rgba(${rgb}, ${alpha})`;
+  if (val[tone]) rgb = val[tone].rgb;
+  if (alpha) return `rgba(${rgb}, ${alpha})`;
   return CONFIG2.useVariable ? `var(${val.var})` : `rgb(${rgb})`;
 };
 var getMediaColor = (value, globalTheme, config) => {
   const CONFIG2 = config || getActiveConfig();
-  if (!globalTheme)
-    globalTheme = CONFIG2.globalTheme;
+  if (!globalTheme) globalTheme = CONFIG2.globalTheme;
   if (!isString(value)) {
-    if (CONFIG2.verbose)
-      console.warn(value, "- type for color is not valid");
+    if (CONFIG2.verbose) console.warn(value, "- type for color is not valid");
     return;
   }
-  if (value.slice(0, 2) === "--")
-    return `var(${value})`;
+  if (value.slice(0, 2) === "--") return `var(${value})`;
   const [name] = isArray(value) ? value : value.split(" ");
   const { COLOR: COLOR2, GRADIENT: GRADIENT2 } = CONFIG2;
   const val = COLOR2[name] || GRADIENT2[name];
   const isObj = isObject(val);
-  if (isObj && val.value)
-    return getColor(value, `@${globalTheme}`, config);
+  if (isObj && val.value) return getColor(value, `@${globalTheme}`, config);
   else if (isObj) {
-    if (globalTheme)
-      return getColor(value, `@${globalTheme}`, config);
+    if (globalTheme) return getColor(value, `@${globalTheme}`, config);
     else {
       const obj = {};
       for (const mediaName in val) {
@@ -1574,8 +1468,7 @@ var getMediaColor = (value, globalTheme, config) => {
       return obj;
     }
   } else {
-    if (CONFIG2.verbose)
-      console.warn("Can't find color", value);
+    if (CONFIG2.verbose) console.warn("Can't find color", value);
     return value;
   }
 };
@@ -1584,8 +1477,7 @@ var setColor = (val, key, suffix) => {
   if (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");
+      if (CONFIG2.verbose) console.warn(val, "- referred but does not exist");
       val = val.split(" ")[0];
     }
   }
@@ -1624,8 +1516,7 @@ var setColor = (val, key, suffix) => {
 };
 var setGradient = (val, key, suffix) => {
   const CONFIG2 = getActiveConfig();
-  if (isString(val) && val.slice(0, 2) === "--")
-    val = getColor(val.slice(2));
+  if (isString(val) && val.slice(0, 2) === "--") val = getColor(val.slice(2));
   if (isArray(val)) {
     return {
       "@light": setGradient(val[0], key, "light"),
@@ -1634,8 +1525,7 @@ var setGradient = (val, key, suffix) => {
   }
   if (isObject(val)) {
     const obj = {};
-    for (const variant in val)
-      obj[variant] = setGradient(val[variant], key, variant.slice(0, 1) === "@" ? variant.slice(1) : variant);
+    for (const variant in val) obj[variant] = setGradient(val[variant], key, variant.slice(0, 1) === "@" ? variant.slice(1) : variant);
     return obj;
   }
   const CSSVar = `--gradient-${key}` + (suffix ? `-${suffix}` : "");
@@ -1661,22 +1551,19 @@ var setThemeValue = (theme) => {
   return value;
 };
 var getThemeValue = (theme) => {
-  if (theme.value)
-    return theme.value;
+  if (theme.value) return theme.value;
   theme.value = setThemeValue(theme);
   return theme.value;
 };
 var getTheme = (value, modifier) => {
   const CONFIG2 = getActiveConfig();
-  if (CONFIG2.useVariable)
-    return getMediaTheme(value, modifier);
+  if (CONFIG2.useVariable) return getMediaTheme(value, modifier);
   const { THEME: THEME2 } = CONFIG2;
   if (isString(value)) {
     const [theme, subtheme] = value.split(" ");
     const isOurTheme = THEME2[theme];
     if (isOurTheme) {
-      if (!subtheme && !modifier)
-        return getThemeValue(isOurTheme);
+      if (!subtheme && !modifier) return getThemeValue(isOurTheme);
       value = [theme, subtheme || modifier];
     }
   }
@@ -1684,14 +1571,10 @@ var getTheme = (value, modifier) => {
     const themeName = value[0];
     const subThemeName = value[1];
     const { helpers, media, state } = THEME2[themeName];
-    if (media && media[subThemeName])
-      return getThemeValue(media[subThemeName]);
-    if (helpers && helpers[subThemeName])
-      return getThemeValue(helpers[subThemeName]);
-    if (state && state[subThemeName])
-      return getThemeValue(state[subThemeName]);
-  } else if (isObject(value))
-    return setThemeValue(value);
+    if (media && media[subThemeName]) return getThemeValue(media[subThemeName]);
+    if (helpers && helpers[subThemeName]) return getThemeValue(helpers[subThemeName]);
+    if (state && state[subThemeName]) return getThemeValue(state[subThemeName]);
+  } else if (isObject(value)) return setThemeValue(value);
 };
 var setInverseTheme = (theme, variant, value) => {
   if (isObject(variant)) {
@@ -1709,13 +1592,11 @@ var setInverseTheme = (theme, variant, value) => {
 var setPseudo = (theme, key, variant, themeValue) => {
   const result = getTheme(variant);
   themeValue[`&:${key}`] = result;
-  if (isObject(variant) && !variant.value)
-    variant.value = result;
+  if (isObject(variant) && !variant.value) variant.value = result;
 };
 var setSelectors = (theme, value) => {
   const { state } = theme;
-  if (!state)
-    return;
+  if (!state) return;
   const keys = Object.keys(state);
   keys.map((key) => {
     const variant = state[key];
@@ -1727,20 +1608,16 @@ var setSelectors = (theme, value) => {
 var setPrefersScheme = (theme, key, variant, themeValue) => {
   const result = getTheme(variant);
   themeValue[`@media (prefers-color-scheme: ${key})`] = result;
-  if (isObject(variant) && !variant.value)
-    variant.value = result;
+  if (isObject(variant) && !variant.value) variant.value = result;
 };
 var setMedia = (theme, value) => {
   const { media } = theme;
-  if (!media)
-    return;
+  if (!media) return;
   const keys = Object.keys(media);
   keys.map((key) => {
     const variant = media[key];
-    if (key === "dark" || key === "light")
-      setPrefersScheme(theme, key, variant, value);
-    if (key === "inverse")
-      setInverseTheme(theme, variant, value);
+    if (key === "dark" || key === "light") setPrefersScheme(theme, key, variant, value);
+    if (key === "inverse") setInverseTheme(theme, variant, value);
     return theme;
   });
   return theme;
@@ -1748,23 +1625,19 @@ var setMedia = (theme, value) => {
 var setHelpers = (theme, value) => {
   const CONFIG2 = getActiveConfig();
   const { helpers } = theme;
-  if (!helpers)
-    return;
+  if (!helpers) return;
   const keys = Object.keys(helpers);
   keys.map((key) => {
     const helper = helpers[key];
-    if (isString(helper))
-      helpers[key] = CONFIG2.THEME[helper];
-    else
-      getThemeValue(helpers[key]);
+    if (isString(helper)) helpers[key] = CONFIG2.THEME[helper];
+    else getThemeValue(helpers[key]);
     return theme;
   });
   return theme;
 };
 var setTheme = (val, key) => {
   const CONFIG2 = getActiveConfig();
-  if (CONFIG2.useVariable)
-    return setMediaTheme(val, key);
+  if (CONFIG2.useVariable) return setMediaTheme(val, key);
   const { state, media, helpers } = val;
   const value = setThemeValue(val, key);
   const CSSvar = `--theme-${key}`;
@@ -1826,24 +1699,19 @@ var recursiveTheme = (val) => {
       } else if (symb === ":") {
         obj[`&${param}`] = recursiveTheme(val[param]);
       }
-    } else
-      obj[param] = val[param];
+    } else obj[param] = val[param];
   }
   return obj;
 };
 var findModifierFromArray = (val, modifierArray) => {
   const currentMod = modifierArray.shift();
-  if (val[currentMod])
-    return findModifierFromArray(val[currentMod], modifierArray);
+  if (val[currentMod]) return findModifierFromArray(val[currentMod], modifierArray);
   return val;
 };
 var findModifier = (val, modifier) => {
-  if (isArray(modifier))
-    return findModifierFromArray(val, modifier);
-  else if (isString(modifier) && val[modifier])
-    return val[modifier];
-  else
-    return val;
+  if (isArray(modifier)) return findModifierFromArray(val, modifier);
+  else if (isString(modifier) && val[modifier]) return val[modifier];
+  else return val;
 };
 var getMediaTheme = (value, modifier) => {
   const activeConfig = getActiveConfig();
@@ -1866,11 +1734,10 @@ var getMediaTheme = (value, modifier) => {
 };
 
 // src/system/font.js
-var import_utils11 = __toESM(require_cjs2(), 1);
+var import_utils11 = __toESM(require_cjs(), 1);
 var setFont = (val, key) => {
   const CSSvar = `--font-${key}`;
-  if (!val || isArray(val) && !val[0])
-    return;
+  if (!val || isArray(val) && !val[0]) return;
   const fontFace = val[0] ? getFontFaceEach(key, val) : setCustomFontMedia(key, val.url);
   return { var: CSSvar, value: val, fontFace };
 };
@@ -1883,10 +1750,8 @@ var setFontFamily = (val, key) => {
   const CONFIG2 = getActiveConfig();
   const { FONT_FAMILY: FONT_FAMILY2, FONT_FAMILY_TYPES: FONT_FAMILY_TYPES2 } = CONFIG2;
   let { value, type } = val;
-  if (val.isDefault)
-    FONT_FAMILY2.default = key;
-  if (isObject(value))
-    value = (0, import_utils11.arrayzeValue)(value);
+  if (val.isDefault) FONT_FAMILY2.default = key;
+  if (isObject(value)) value = (0, import_utils11.arrayzeValue)(value);
   const CSSvar = `--font-family-${key}`;
   const str = `${value.join(", ")}, ${FONT_FAMILY_TYPES2[type]}`;
   return { var: CSSvar, value: str, arr: value, type };
@@ -1899,8 +1764,7 @@ var runThroughMedia = (FACTORY2) => {
   for (const prop in FACTORY2) {
     const isPropMedia = prop.slice(0, 1) === "@";
     const mediaValue = FACTORY2[prop];
-    if (!isPropMedia)
-      continue;
+    if (!isPropMedia) continue;
     const { mediaRegenerate } = FACTORY2;
     const mediaName = prop.slice(1);
     const {
@@ -1978,13 +1842,12 @@ var getFontSizeByKey = (value) => {
 };
 
 // src/system/spacing.js
-var import_utils15 = __toESM(require_cjs2(), 1);
+var import_utils15 = __toESM(require_cjs(), 1);
 var runThroughMedia2 = (FACTORY2) => {
   for (const prop in FACTORY2) {
     const mediaProps = FACTORY2[prop];
     const isMediaName = prop.slice(0, 1) === "@";
-    if (!isMediaName)
-      continue;
+    if (!isMediaName) continue;
     const {
       type,
       base,
@@ -2021,8 +1884,7 @@ var applySpacingSequence = () => {
 var getSequence = (sequenceProps) => {
   const CONFIG2 = getActiveConfig();
   const { SPACING: SPACING2 } = CONFIG2;
-  if (!sequenceProps)
-    return SPACING2;
+  if (!sequenceProps) return SPACING2;
   const hasGenerated = Object.keys(sequenceProps.sequence).length > 0;
   return hasGenerated ? sequenceProps : generateSequence(sequenceProps);
 };
@@ -2032,8 +1894,7 @@ var getSpacingByKey = (value, propertyName = "padding", sequenceProps) => {
     return { [propertyName]: value };
   }
   const stack = (0, import_utils15.arrayzeValue)(value);
-  if (!isArray(stack))
-    return;
+  if (!isArray(stack)) return;
   if (stack.length > 1) {
     let suffix = "";
     if (propertyName === "borderWidth") {
@@ -2112,15 +1973,11 @@ var setShadow = (value, key, suffix, prefers) => {
   if (isString(value) && value.includes(",")) {
     value = value.split(",").map((v) => {
       v = v.trim();
-      if (v.startsWith("--"))
-        return `var(${v})`;
-      if (getColor(v).length > 2)
-        return getColor(v);
-      if (v.includes("px") || v.slice(-2) === "em")
-        return v;
+      if (v.startsWith("--")) return `var(${v})`;
+      if (getColor(v).length > 2) return getColor(v);
+      if (v.includes("px") || v.slice(-2) === "em") return v;
       const arr = v.split(" ");
-      if (!arr.length)
-        return v;
+      if (!arr.length) return v;
       return arr.map((v2) => getSpacingByKey(v2, "shadow").shadow).join(" ");
     }).join(" ");
   }
@@ -2135,32 +1992,25 @@ var setShadow = (value, key, suffix, prefers) => {
 };
 var getShadow = (value, globalTheme) => {
   const CONFIG2 = getActiveConfig();
-  if (!globalTheme)
-    globalTheme = CONFIG2.globalTheme;
+  if (!globalTheme) globalTheme = CONFIG2.globalTheme;
   if (!isString(value)) {
-    if (CONFIG2.verbose)
-      console.warn(value, "- type for color is not valid");
+    if (CONFIG2.verbose) console.warn(value, "- type for color is not valid");
     return;
   }
-  if (value.slice(0, 2) === "--")
-    return `var(${value})`;
+  if (value.slice(0, 2) === "--") return `var(${value})`;
   const [name] = isArray(value) ? value : value.split(" ");
   const { SHADOW: SHADOW2 } = CONFIG2;
   const val = SHADOW2[name];
   const isObj = isObject(val);
   if (!val) {
-    if (CONFIG2.verbose)
-      console.warn("Can't find color ", name);
+    if (CONFIG2.verbose) console.warn("Can't find color ", name);
     return value;
   }
   if (globalTheme) {
-    if (val[globalTheme])
-      return val[globalTheme].value;
-    else if (CONFIG2.verbose)
-      console.warn(value, " - does not have ", globalTheme);
+    if (val[globalTheme]) return val[globalTheme].value;
+    else if (CONFIG2.verbose) console.warn(value, " - does not have ", globalTheme);
   }
-  if (isObj && val.value)
-    return val.value;
+  if (isObj && val.value) return val.value;
   if (isObj) {
     const obj = {};
     for (const mediaName in val) {
@@ -2170,13 +2020,12 @@ var getShadow = (value, globalTheme) => {
     }
     return obj;
   }
-  if (CONFIG2.verbose)
-    console.warn("Can't find color", value);
+  if (CONFIG2.verbose) console.warn("Can't find color", value);
   return value;
 };
 
 // src/system/timing.js
-var import_utils19 = __toESM(require_cjs2(), 1);
+var import_utils19 = __toESM(require_cjs(), 1);
 var applyTimingSequence = () => {
   const CONFIG2 = getActiveConfig();
   const { TIMING: TIMING2 } = CONFIG2;
@@ -2211,15 +2060,13 @@ var applyDocument = () => {
 };
 
 // src/system/svg.js
-var import_globals5 = __toESM(require_cjs(), 1);
 var DEF_OPTIONS = {
-  document: import_globals5.document
+  document: document2
 };
 var setSVG = (val, key) => {
   const CONFIG2 = getActiveConfig();
   if (!val) {
-    if (CONFIG2.verbose)
-      console.warn("setSVG: val is not defined", key);
+    if (CONFIG2.verbose) console.warn("setSVG: val is not defined", key);
     return;
   }
   if (CONFIG2.useSvgSprite) {
@@ -2230,8 +2077,7 @@ var setSVG = (val, key) => {
 var appendSVGSprite = (LIBRARY, options = DEF_OPTIONS) => {
   const CONFIG2 = getActiveConfig();
   const lib = Object.keys(LIBRARY).length ? {} : CONFIG2.SVG;
-  for (const key in LIBRARY)
-    lib[key] = CONFIG2.SVG[key];
+  for (const key in LIBRARY) lib[key] = CONFIG2.SVG[key];
   appendSVG(lib, options);
 };
 var setSvgIcon = (val, key) => {
@@ -2245,14 +2091,12 @@ var setSvgIcon = (val, key) => {
 var appendSvgIconsSprite = (LIBRARY, options = DEF_OPTIONS) => {
   const CONFIG2 = getActiveConfig();
   const lib = Object.keys(LIBRARY).length ? {} : CONFIG2.ICONS;
-  for (const key in LIBRARY)
-    lib[key] = CONFIG2.ICONS[key];
+  for (const key in LIBRARY) lib[key] = CONFIG2.ICONS[key];
   appendSVG(lib, options);
 };
 var createSVGSpriteElement = (options = { isRoot: true }) => {
-  if (!import_globals5.document || !import_globals5.document.createElementNS)
-    return;
-  const svgElem = import_globals5.document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  if (!document2 || !document2.createElementNS) return;
+  const svgElem = document2.createElementNS("http://www.w3.org/2000/svg", "svg");
   if (options.isRoot) {
     svgElem.setAttribute("aria-hidden", "true");
     svgElem.setAttribute("width", "0");
@@ -2264,7 +2108,7 @@ var createSVGSpriteElement = (options = { isRoot: true }) => {
 };
 var appendSVG = (lib, options = DEF_OPTIONS) => {
   const CONFIG2 = getActiveConfig();
-  const doc = options.document || import_globals5.document;
+  const doc = options.document || document2;
   if (!doc || !doc.documentElement) {
     if (CONFIG2.verbose) {
       console.warn("To append SVG sprites it should be run in browser environment");
@@ -2307,8 +2151,7 @@ var applyReset = (reset = {}) => {
     }
     const { body, ...templates } = TYPOGRAPHY2.templates;
     const globalTheme = CONFIG2.useDocumentTheme ? getMediaTheme("document", `@${CONFIG2.globalTheme}`) : {};
-    if (RESET2.html)
-      overwriteDeep(RESET2.html, globalTheme);
+    if (RESET2.html) overwriteDeep(RESET2.html, globalTheme);
     return deepMerge(merge(RESET2, reset), {
       html: {
         position: "absolute",
@@ -2365,25 +2208,18 @@ var transformBorder = (border) => {
   const arr = border.split(", ");
   return arr.map((v) => {
     v = v.trim();
-    if (v.slice(0, 2) === "--")
-      return `var(${v})`;
-    else if (isBorderStyle(v))
-      return v || "solid";
-    else if (v.slice(-2) === "px" || v.slice(-2) === "em")
-      return v;
-    else if (getColor(v).length > 2)
-      return getColor(v);
+    if (v.slice(0, 2) === "--") return `var(${v})`;
+    else if (isBorderStyle(v)) return v || "solid";
+    else if (v.slice(-2) === "px" || v.slice(-2) === "em") return v;
+    else if (getColor(v).length > 2) return getColor(v);
     return getSpacingByKey(v, "border").border;
   }).join(" ");
 };
 var transformTextStroke = (stroke) => {
   return stroke.split(", ").map((v) => {
-    if (v.slice(0, 2) === "--")
-      return `var(${v})`;
-    if (v.includes("px"))
-      return v;
-    else if (getColor(v))
-      return getColor(v);
+    if (v.slice(0, 2) === "--") return `var(${v})`;
+    if (v.includes("px")) return v;
+    else if (getColor(v)) return getColor(v);
     return v;
   }).join(" ");
 };
@@ -2391,64 +2227,52 @@ var transformShadow = (sh, globalTheme) => getShadow(sh, globalTheme);
 var transformBoxShadow = (shadows, globalTheme) => shadows.split("|").map((shadow) => {
   return shadow.split(",").map((v) => {
     v = v.trim();
-    if (v.slice(0, 2) === "--")
-      return `var(${v})`;
+    if (v.slice(0, 2) === "--") return `var(${v})`;
     if (getColor(v).length > 2) {
       const color = getMediaColor(v, globalTheme);
-      if (isObject(color))
-        return Object.values(color).filter((v2) => v2.includes(": " + globalTheme))[0];
+      if (isObject(color)) return Object.values(color).filter((v2) => v2.includes(": " + globalTheme))[0];
       return color;
     }
-    if (v.includes("px") || v.slice(-2) === "em")
-      return v;
+    if (v.includes("px") || v.slice(-2) === "em") return v;
     const arr = v.split(" ");
-    if (!arr.length)
-      return v;
+    if (!arr.length) return v;
     return arr.map((v2) => getSpacingByKey(v2, "shadow").shadow).join(" ");
   }).join(" ");
 }).join(",");
 var transformBackgroundImage = (backgroundImage, globalTheme) => {
   const CONFIG2 = getActiveConfig();
   return backgroundImage.split(", ").map((v) => {
-    if (v.slice(0, 2) === "--")
-      return `var(${v})`;
-    if (v.includes("url") || v.includes("gradient"))
-      return v;
+    if (v.slice(0, 2) === "--") return `var(${v})`;
+    if (v.includes("url") || v.includes("gradient")) return v;
     else if (CONFIG2.GRADIENT[backgroundImage]) {
       return {
         backgroundImage: getMediaColor(backgroundImage, globalTheme || CONFIG2.globalTheme)
       };
-    } else if (v.includes("/") || v.startsWith("http") || v.includes("."))
-      return `url(${v})`;
+    } else if (v.includes("/") || v.startsWith("http") || v.includes(".")) return `url(${v})`;
     return v;
   }).join(" ");
 };
 var transfromGap = (gap) => isString(gap) && gap.split(" ").map((v) => getSpacingByKey(v, "gap").gap).join(" ");
 var transformTransition = (transition) => {
   const arr = transition.split(" ");
-  if (!arr.length)
-    return transition;
+  if (!arr.length) return transition;
   return arr.map((v) => {
-    if (v.slice(0, 2) === "--")
-      return `var(${v})`;
+    if (v.slice(0, 2) === "--") return `var(${v})`;
     if (v.length < 3 || v.includes("ms")) {
       const mapWithSequence = getTimingByKey(v);
       return mapWithSequence.timing || v;
     }
-    if (getTimingFunction(v))
-      return getTimingFunction(v);
+    if (getTimingFunction(v)) return getTimingFunction(v);
     return v;
   }).join(" ");
 };
 var transformDuration = (duration, props, propertyName) => {
-  if (!isString(duration))
-    return;
+  if (!isString(duration)) return;
   return duration.split(",").map((v) => getTimingByKey(v).timing || v).join(",");
 };
 var splitTransition = (transition) => {
   const arr = transition.split(",");
-  if (!arr.length)
-    return;
+  if (!arr.length) return;
   return arr.map(transformTransition).join(",");
 };
 var checkIfBoxSize = (propertyName) => {
@@ -2457,16 +2281,14 @@ var checkIfBoxSize = (propertyName) => {
 };
 var transformSize = (propertyName, val, props = {}, opts = {}) => {
   let value = val || props[propertyName];
-  if (isUndefined(value) && isNull(value))
-    return;
+  if (isUndefined(value) && isNull(value)) return;
   const shouldScaleBoxSize = props.scaleBoxSize;
   const isBoxSize = checkIfBoxSize(propertyName);
   if (!shouldScaleBoxSize && isBoxSize && isString(value)) {
     value = value.split(" ").map((v) => {
       const isSingleLetter = v.length < 3 && /[A-Z]/.test(v);
       const hasUnits = ["%", "vw", "vh", "ch"].some((unit) => value.includes(unit));
-      if (isSingleLetter && !hasUnits)
-        return v + "_default";
+      if (isSingleLetter && !hasUnits) return v + "_default";
       return v;
     }).join(" ");
   }
@@ -2476,16 +2298,21 @@ var transformSize = (propertyName, val, props = {}, opts = {}) => {
     return getSpacingByKey(value, propertyName);
   }
 };
-var transformSizeRatio = (propertyName, props) => {
-  return transformSize(propertyName, null, props, {
+var transformSizeRatio = (propertyName, val = null, props) => {
+  return transformSize(propertyName, val, props, {
     ratio: true
   });
 };
+var transformBorderRadius = (radius, props, propertyName) => {
+  if (!isString(radius)) return;
+  return {
+    borderRadius: radius.split(" ").map((v, k) => getSpacingBasedOnRatio(props, propertyName, v)[propertyName]).join(" ")
+  };
+};
 
 // src/set.js
 var setCases = (val, key) => {
-  if (isFunction(val))
-    return val();
+  if (isFunction(val)) return val();
   return val;
 };
 var setSameValue = (val, key) => val;
@@ -2521,12 +2348,10 @@ var setValue = (FACTORY_NAME, value, key) => {
       FACTORY2[key] = result;
       return FACTORY2;
     } catch (error) {
-      if (CONFIG2.verbose)
-        console.warn("Error setting", factoryName, "value", value, key, error);
+      if (CONFIG2.verbose) console.warn("Error setting", factoryName, "value", value, key, error);
     }
   }
-  if (CONFIG2.verbose)
-    console.warn("Can not find", factoryName, "method in scratch");
+  if (CONFIG2.verbose) console.warn("Can not find", factoryName, "method in scratch");
 };
 var setEach = (factoryName, props) => {
   const CONFIG2 = getActiveConfig();
@@ -2555,38 +2380,23 @@ var set = (recivedConfig, options = SET_OPTIONS) => {
   if (options.newConfig) {
     CONFIG2 = setActiveConfig(options.newConfig);
   }
-  if (verbose !== void 0)
-    CONFIG2.verbose = verbose;
-  if (useVariable !== void 0)
-    CONFIG2.useVariable = useVariable;
-  if (useReset !== void 0)
-    CONFIG2.useReset = useReset;
-  if (useFontImport !== void 0)
-    CONFIG2.useFontImport = useFontImport;
-  if (useSvgSprite !== void 0)
-    CONFIG2.useSvgSprite = useSvgSprite;
-  if (useIconSprite !== void 0)
-    CONFIG2.useIconSprite = useIconSprite;
-  if (useDocumentTheme !== void 0)
-    CONFIG2.useDocumentTheme = useDocumentTheme;
-  if (globalTheme !== void 0)
-    CONFIG2.globalTheme = globalTheme;
-  if (useDefaultConfig !== void 0)
-    CONFIG2.useDefaultConfig = useDefaultConfig;
-  if (SEMANTIC_ICONS2 !== void 0)
-    CONFIG2.SEMANTIC_ICONS = SEMANTIC_ICONS2;
-  if (CONFIG2.verbose)
-    console.log(CONFIG2);
-  if (!CONFIG2.__svg_cache)
-    CONFIG2.__svg_cache = {};
+  if (verbose !== void 0) CONFIG2.verbose = verbose;
+  if (useVariable !== void 0) CONFIG2.useVariable = useVariable;
+  if (useReset !== void 0) CONFIG2.useReset = useReset;
+  if (useFontImport !== void 0) CONFIG2.useFontImport = useFontImport;
+  if (useSvgSprite !== void 0) CONFIG2.useSvgSprite = useSvgSprite;
+  if (useIconSprite !== void 0) CONFIG2.useIconSprite = useIconSprite;
+  if (useDocumentTheme !== void 0) CONFIG2.useDocumentTheme = useDocumentTheme;
+  if (globalTheme !== void 0) CONFIG2.globalTheme = globalTheme;
+  if (useDefaultConfig !== void 0) CONFIG2.useDefaultConfig = useDefaultConfig;
+  if (SEMANTIC_ICONS2 !== void 0) CONFIG2.SEMANTIC_ICONS = SEMANTIC_ICONS2;
+  if (CONFIG2.verbose) console.log(CONFIG2);
+  if (!CONFIG2.__svg_cache) CONFIG2.__svg_cache = {};
   const keys = Object.keys(config);
   keys.map((key) => setEach(key, config[key]));
-  if (config.TYPOGRAPHY)
-    applyTypographySequence();
-  if (config.SPACING)
-    applySpacingSequence();
-  if (config.TIMING)
-    applyTimingSequence();
+  if (config.TYPOGRAPHY) applyTypographySequence();
+  if (config.SPACING) applySpacingSequence();
+  if (config.TIMING) applyTimingSequence();
   applyDocument();
   applyReset();
   return CONFIG2;