@symbo.ls/scratch 2.11.36 → 2.11.92

package/dist/cjs/system/index.js

@@ -282,13 +282,13 @@ var require_cjs3 = __commonJS({
       document: () => document4,
       global: () => global,
       self: () => self,
-      window: () => window3
+      window: () => window2
     });
     module2.exports = __toCommonJS2(globals_exports);
     var global = globalThis;
     var self = globalThis;
-    var window3 = globalThis;
-    var document4 = window3.document;
+    var window2 = globalThis;
+    var document4 = window2.document;
   }
 });
 
@@ -360,10 +360,10 @@ var require_types = __commonJS({
       isFunction: () => isFunction,
       isNot: () => isNot,
       isNull: () => isNull,
-      isNumber: () => isNumber,
+      isNumber: () => isNumber2,
       isObject: () => isObject7,
       isObjectLike: () => isObjectLike3,
-      isString: () => isString7,
+      isString: () => isString8,
       isUndefined: () => isUndefined,
       isValidHtmlTag: () => isValidHtmlTag
     });
@@ -376,8 +376,8 @@ var require_types = __commonJS({
         return false;
       return typeof arg === "object" && arg.constructor === Object;
     };
-    var isString7 = (arg) => typeof arg === "string";
-    var isNumber = (arg) => typeof arg === "number";
+    var isString8 = (arg) => typeof arg === "string";
+    var isNumber2 = (arg) => typeof arg === "number";
     var isFunction = (arg) => typeof arg === "function";
     var isBoolean = (arg) => arg === true || arg === false;
     var isNull = (arg) => arg === null;
@@ -388,7 +388,7 @@ var require_types = __commonJS({
       return typeof arg === "object";
     };
     var isDefined2 = (arg) => {
-      return isObject7(arg) || isObjectLike3(arg) || isString7(arg) || isNumber(arg) || isFunction(arg) || isArray6(arg) || isObjectLike3(arg) || isBoolean(arg) || isNull(arg);
+      return isObject7(arg) || isObjectLike3(arg) || isString8(arg) || isNumber2(arg) || isFunction(arg) || isArray6(arg) || isObjectLike3(arg) || isBoolean(arg) || isNull(arg);
     };
     var isUndefined = (arg) => {
       return arg === void 0;
@@ -397,8 +397,8 @@ var require_types = __commonJS({
       boolean: isBoolean,
       array: isArray6,
       object: isObject7,
-      string: isString7,
-      number: isNumber,
+      string: isString8,
+      number: isNumber2,
       null: isNull,
       function: isFunction,
       objectLike: isObjectLike3,
@@ -443,6 +443,9 @@ var require_array = __commonJS({
     var array_exports = {};
     __export2(array_exports, {
       arrayContainsOtherArray: () => arrayContainsOtherArray,
+      createNestedObject: () => createNestedObject,
+      cutArrayAfterValue: () => cutArrayAfterValue,
+      cutArrayBeforeValue: () => cutArrayBeforeValue,
       joinArrays: () => joinArrays,
       mergeAndCloneIfArray: () => mergeAndCloneIfArray,
       mergeArray: () => mergeArray,
@@ -482,6 +485,73 @@ var require_array = __commonJS({
     var mergeAndCloneIfArray = (obj) => {
       return (0, import_types.isArray)(obj) ? mergeArray(obj) : (0, import_object.deepClone)(obj);
     };
+    var cutArrayBeforeValue = (arr, value) => {
+      const index = arr.indexOf(value);
+      if (index !== -1) {
+        return arr.slice(0, index);
+      }
+      return arr;
+    };
+    var cutArrayAfterValue = (arr, value) => {
+      const index = arr.indexOf(value);
+      if (index !== -1) {
+        return arr.slice(index + 1);
+      }
+      return arr;
+    };
+    var createNestedObject = (arr, lastValue) => {
+      let nestedObject = {};
+      if (arr.length === 0) {
+        return lastValue;
+      }
+      arr.reduce((obj, value, index) => {
+        if (!obj[value]) {
+          obj[value] = {};
+        }
+        if (index === arr.length - 1 && lastValue) {
+          obj[value] = lastValue;
+        }
+        return obj[value];
+      }, nestedObject);
+      return nestedObject;
+    };
+  }
+});
+
+// ../../node_modules/@domql/utils/dist/cjs/string.js
+var require_string = __commonJS({
+  "../../node_modules/@domql/utils/dist/cjs/string.js"(exports, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty;
+    var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
+    var __getOwnPropNames2 = Object.getOwnPropertyNames;
+    var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+    var __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(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 (!__hasOwnProp2.call(to, key) && key !== except)
+            __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      }
+      return to;
+    };
+    var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
+    var string_exports = {};
+    __export2(string_exports, {
+      stringIncludesAny: () => stringIncludesAny
+    });
+    module2.exports = __toCommonJS2(string_exports);
+    var stringIncludesAny = (str, characters) => {
+      for (const char of characters) {
+        if (str.includes(char)) {
+          return true;
+        }
+      }
+      return false;
+    };
   }
 });
 
@@ -525,15 +595,18 @@ var require_object = __commonJS({
       merge: () => merge5,
       mergeArrayExclude: () => mergeArrayExclude,
       mergeIfExisted: () => mergeIfExisted,
+      objectToString: () => objectToString,
       overwrite: () => overwrite,
-      overwriteDeep: () => overwriteDeep,
+      overwriteDeep: () => overwriteDeep2,
       overwriteShallow: () => overwriteShallow,
-      removeFromObject: () => removeFromObject
+      removeFromObject: () => removeFromObject,
+      stringToObject: () => stringToObject
     });
     module2.exports = __toCommonJS2(object_exports);
     var import_globals3 = require_cjs3();
     var import_types = require_types();
     var import_array = require_array();
+    var import_string = require_string();
     var exec = (param, element, state, context) => {
       if ((0, import_types.isFunction)(param)) {
         return param(
@@ -551,7 +624,7 @@ var require_object = __commonJS({
     };
     var merge5 = (element, obj, excludeFrom = []) => {
       for (const e in obj) {
-        if (excludeFrom.includes(e) || e.includes("__"))
+        if (excludeFrom.includes(e) || e.startsWith("__"))
           continue;
         const elementProp = element[e];
         const objProp = obj[e];
@@ -563,7 +636,7 @@ var require_object = __commonJS({
     };
     var deepMerge3 = (element, extend, excludeFrom = []) => {
       for (const e in extend) {
-        if (excludeFrom.includes(e) || e.includes("__"))
+        if (excludeFrom.includes(e) || e.startsWith("__"))
           continue;
         const elementProp = element[e];
         const extendProp = extend[e];
@@ -578,7 +651,7 @@ var require_object = __commonJS({
     var clone = (obj, excludeFrom = []) => {
       const o = {};
       for (const prop in obj) {
-        if (excludeFrom.includes(prop) || prop.includes("__"))
+        if (excludeFrom.includes(prop) || prop.startsWith("__"))
           continue;
         o[prop] = obj[prop];
       }
@@ -590,7 +663,7 @@ var require_object = __commonJS({
       }
       const o = {};
       for (const k in obj) {
-        if (excludeFrom.includes(k) || k.includes("__"))
+        if (excludeFrom.includes(k) || k.startsWith("__"))
           continue;
         let v = obj[k];
         if (k === "extend" && (0, import_types.isArray)(v)) {
@@ -611,7 +684,7 @@ var require_object = __commonJS({
     var deepClone2 = (obj, excludeFrom = []) => {
       const o = (0, import_types.isArray)(obj) ? [] : {};
       for (const prop in obj) {
-        if (excludeFrom.includes(prop) || prop.includes("__"))
+        if (excludeFrom.includes(prop) || prop.startsWith("__"))
           continue;
         let objProp = obj[prop];
         if (prop === "extend" && (0, import_types.isArray)(objProp)) {
@@ -650,6 +723,40 @@ var require_object = __commonJS({
       }
       return stringified;
     };
+    var objectToString = (obj, indent = 0) => {
+      const spaces = "  ".repeat(indent);
+      let str = "{\n";
+      for (const [key, value] of Object.entries(obj)) {
+        const keyAllowdChars = (0, import_string.stringIncludesAny)(key, ["-", ":", "@", ".", "!"]);
+        const stringedKey = keyAllowdChars ? `'${key}'` : key;
+        str += `${spaces}  ${stringedKey}: `;
+        if ((0, import_types.isArray)(value)) {
+          str += "[\n";
+          for (const element of value) {
+            if ((0, import_types.isObject)(element) && element !== null) {
+              str += `${spaces}    ${objectToString(element, indent + 2)},
+`;
+            } else if ((0, import_types.isString)(element)) {
+              str += `${spaces}    '${element}',
+`;
+            } else {
+              str += `${spaces}    ${element},
+`;
+            }
+          }
+          str += `${spaces}  ]`;
+        } else if ((0, import_types.isObject)(value)) {
+          str += objectToString(value, indent + 1);
+        } else if ((0, import_types.isString)(value)) {
+          str += (0, import_string.stringIncludesAny)(value, ["\n", "'"]) ? `\`${value}\`` : `'${value}'`;
+        } else {
+          str += value;
+        }
+        str += ",\n";
+      }
+      str += `${spaces}}`;
+      return str;
+    };
     var detachFunctionsFromObject = (obj, detached = {}) => {
       for (const prop in obj) {
         const objProp = obj[prop];
@@ -720,6 +827,16 @@ var require_object = __commonJS({
       }
       return stringified;
     };
+    var stringToObject = (str) => {
+      let obj;
+      try {
+        obj = import_globals3.window.eval("(" + str + ")");
+      } catch (e) {
+        console.warn(e);
+      }
+      if (obj)
+        return obj;
+    };
     var diffObjects = (original, objToDiff, cache) => {
       for (const e in objToDiff) {
         if (e === "ref")
@@ -765,7 +882,7 @@ var require_object = __commonJS({
       const { ref } = element;
       const changes = {};
       for (const e in params) {
-        if (excludeFrom.includes(e) || e.includes("__"))
+        if (excludeFrom.includes(e) || e.startsWith("__"))
           continue;
         const elementProp = element[e];
         const paramsProp = params[e];
@@ -778,20 +895,20 @@ var require_object = __commonJS({
     };
     var overwriteShallow = (obj, params, excludeFrom = []) => {
       for (const e in params) {
-        if (excludeFrom.includes(e) || e.includes("__"))
+        if (excludeFrom.includes(e) || e.startsWith("__"))
           continue;
         obj[e] = params[e];
       }
       return obj;
     };
-    var overwriteDeep = (obj, params, excludeFrom = []) => {
+    var overwriteDeep2 = (obj, params, excludeFrom = []) => {
       for (const e in params) {
-        if (excludeFrom.includes(e) || e.includes("__"))
+        if (excludeFrom.includes(e) || e.startsWith("__"))
           continue;
         const objProp = obj[e];
         const paramsProp = params[e];
         if ((0, import_types.isObjectLike)(objProp) && (0, import_types.isObjectLike)(paramsProp)) {
-          overwriteDeep(objProp, paramsProp);
+          overwriteDeep2(objProp, paramsProp);
         } else if (paramsProp !== void 0) {
           obj[e] = paramsProp;
         }
@@ -967,6 +1084,7 @@ var require_cjs4 = __commonJS({
     __reExport(utils_exports, require_array(), module2.exports);
     __reExport(utils_exports, require_node(), module2.exports);
     __reExport(utils_exports, require_log(), module2.exports);
+    __reExport(utils_exports, require_string(), module2.exports);
   }
 });
 
@@ -1223,10 +1341,11 @@ var getActiveConfig = (def) => {
 };
 
 // src/system/color.js
-var import_utils8 = __toESM(require_cjs4(), 1);
+var import_utils9 = __toESM(require_cjs4(), 1);
 
 // src/utils/color.js
 var import_globals = __toESM(require_cjs3(), 1);
+var import_utils2 = __toESM(require_cjs4(), 1);
 var colorStringToRgbaArray = (color) => {
   if (color === "")
     return;
@@ -1299,7 +1418,25 @@ var getColorShade = (col, amt) => {
     g = 255;
   else if (g < 0)
     g = 0;
-  return (g | b << 8 | r << 16).toString(16);
+  return ((g | b << 8 | r << 16) + 16777216).toString(16).slice(1);
+};
+var getRgbTone = (rgb, tone) => {
+  if ((0, import_utils2.isString)(rgb))
+    rgb = rgb.split(", ").map((v) => parseFloat(v));
+  if ((0, import_utils2.isNumber)(tone))
+    tone += "";
+  const toHex = rgbArrayToHex(rgb);
+  const abs = tone.slice(0, 1);
+  if (abs === "-" || abs === "+") {
+    const colorShade = getColorShade(toHex, parseFloat(tone));
+    return hexToRgbArray(colorShade).join(", ");
+  } else {
+    const [r, g, b] = rgb;
+    const hsl = rgbToHSL(r, g, b);
+    const [h, s, l] = hsl;
+    const newRgb = hslToRgb(h, s, parseFloat(tone) / 100 * 255);
+    return newRgb;
+  }
 };
 
 // src/utils/font.js
@@ -1329,13 +1466,13 @@ var getFontFaceEach = (name, weights) => {
 };
 
 // src/utils/sequence.js
-var import_utils4 = __toESM(require_cjs4(), 1);
+var import_utils5 = __toESM(require_cjs4(), 1);
 
 // ../utils/src/index.js
-var import_utils3 = __toESM(require_cjs4());
+var import_utils4 = __toESM(require_cjs4());
 
 // ../utils/src/scaling.js
-var import_utils2 = __toESM(require_cjs4());
+var import_utils3 = __toESM(require_cjs4());
 
 // ../utils/src/index.js
 var toCamelCase = (str) => {
@@ -1343,13 +1480,13 @@ var toCamelCase = (str) => {
     return index === 0 ? word.toLowerCase() : word.toUpperCase();
   }).replaceAll(/\s+/g, "");
 };
-var toDashCase = (val) => val.replace(/[A-Z]/g, (match, offset) => (offset > 0 ? "-" : "") + match.toLowerCase()).replace(".", "-");
+var toDashCase = (val) => val.replace(/[^a-zA-Z0-9]/g, " ").trim().toLowerCase().replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
 var arrayzeValue = (val) => {
-  if ((0, import_utils3.isString)(val))
+  if ((0, import_utils4.isString)(val))
     return val.split(" ");
-  if ((0, import_utils3.isObject)(val))
+  if ((0, import_utils4.isObject)(val))
     return Object.keys(val).map((v) => val[v]);
-  if ((0, import_utils3.isArray)(val))
+  if ((0, import_utils4.isArray)(val))
     return val;
 };
 
@@ -1460,7 +1597,7 @@ var getSequenceValue = (value = "A", sequenceProps) => {
     unit = UNIT2.default,
     useVariable
   } = sequenceProps;
-  if ((0, import_utils4.isString)(value) && value.slice(0, 2) === "--")
+  if ((0, import_utils5.isString)(value) && value.slice(0, 2) === "--")
     return `var(${value})`;
   const prefix = `--${toDashCase(sequenceProps.type.replace(".", "-"))}-`;
   const startsWithDashOrLetterRegex = /^-?[a-zA-Z]/i;
@@ -1523,7 +1660,7 @@ var findHeadings = (propertyNames) => {
 };
 
 // src/utils/var.js
-var import_utils6 = __toESM(require_cjs4(), 1);
+var import_utils7 = __toESM(require_cjs4(), 1);
 var applySequenceVars = (props, mediaName, options = {}) => {
   const CONFIG2 = getActiveConfig();
   const { UNIT: UNIT2, MEDIA: MEDIA2, TIMING: TIMING2, CSS_VARS: CSS_VARS2 } = CONFIG2;
@@ -1555,7 +1692,7 @@ var applySequenceVars = (props, mediaName, options = {}) => {
 };
 
 // src/utils/sprite.js
-var import_utils7 = __toESM(require_cjs4(), 1);
+var import_utils8 = __toESM(require_cjs4(), 1);
 var generateSprite = (icons) => {
   const CONFIG2 = getActiveConfig();
   let sprite = "";
@@ -1569,7 +1706,7 @@ var generateSprite = (icons) => {
   return sprite;
 };
 var parseRootAttributes = (htmlString) => {
-  if (!(0, import_utils7.isString)(htmlString)) {
+  if (!(0, import_utils8.isString)(htmlString)) {
     return console.warn(`parseRootAttributes: ${htmlString} is not a string`);
   }
   const match = htmlString.match(/<svg\s+(.*?)>/);
@@ -1589,7 +1726,7 @@ var replaceIdsAndUrls = (code, key) => {
   const urlRegex = /url\(#([^)]*)\)/g;
   const matches = code.match(/id="([^"]*)"/g);
   let replacedCode = code;
-  if ((0, import_utils7.isArray)(matches)) {
+  if ((0, import_utils8.isArray)(matches)) {
     matches.forEach(() => {
       const randomKey = Math.floor(Math.random() * 1e5);
       replacedCode = code.replace(idRegex, `id="${key}-${randomKey}"`).replace(urlRegex, `url(#${key}-${randomKey})`);
@@ -1616,7 +1753,7 @@ var convertSvgToSymbol = (key, code) => {
 // src/system/color.js
 var getColor = (value, key, config) => {
   const CONFIG2 = config || getActiveConfig();
-  if (!(0, import_utils8.isString)(value)) {
+  if (!(0, import_utils9.isString)(value)) {
     if (CONFIG2.verbose)
       console.warn(value, "- type for color is not valid");
     return;
@@ -1625,7 +1762,7 @@ var getColor = (value, key, config) => {
     return `var(${value})`;
   if (key && value[key])
     value = value[key];
-  const [name, alpha, tone] = (0, import_utils8.isArray)(value) ? value : value.split(" ");
+  const [name, alpha, tone] = (0, import_utils9.isArray)(value) ? value : value.split(" ");
   const { COLOR: COLOR2, GRADIENT: GRADIENT2 } = CONFIG2;
   let val = COLOR2[name] || GRADIENT2[name];
   if (!val) {
@@ -1640,22 +1777,11 @@ var getColor = (value, key, config) => {
       console.warn(value, " - does not have ", key);
   }
   let rgb = val.rgb;
-  if (!rgb)
+  if (!rgb) {
     return CONFIG2.useVariable ? `var(${val.var})` : val.value;
+  }
   if (tone && !val[tone]) {
-    const toHex = rgbArrayToHex(rgb.split(", ").map((v) => parseFloat(v)));
-    const abs = tone.slice(0, 1);
-    if (abs === "-" || abs === "+") {
-      rgb = hexToRgbArray(
-        getColorShade(toHex, parseFloat(tone))
-      ).join(", ");
-    } else {
-      const [r, g, b] = [...rgb.split(", ").map((v) => parseInt(v))];
-      const hsl = rgbToHSL(r, g, b);
-      const [h, s, l] = hsl;
-      const newRgb = hslToRgb(h, s, parseFloat(tone) / 100 * 255);
-      rgb = newRgb;
-    }
+    rgb = getRgbTone(rgb, tone);
     val[tone] = { rgb, var: `${val.var}-${tone}` };
   }
   if (val[tone])
@@ -1668,17 +1794,17 @@ var getMediaColor = (value, globalTheme, config) => {
   const CONFIG2 = config || getActiveConfig();
   if (!globalTheme)
     globalTheme = CONFIG2.globalTheme;
-  if (!(0, import_utils8.isString)(value)) {
+  if (!(0, import_utils9.isString)(value)) {
     if (CONFIG2.verbose)
       console.warn(value, "- type for color is not valid");
     return;
   }
   if (value.slice(0, 2) === "--")
     return `var(${value})`;
-  const [name] = (0, import_utils8.isArray)(value) ? value : value.split(" ");
+  const [name] = (0, import_utils9.isArray)(value) ? value : value.split(" ");
   const { COLOR: COLOR2, GRADIENT: GRADIENT2 } = CONFIG2;
   const val = COLOR2[name] || GRADIENT2[name];
-  const isObj = (0, import_utils8.isObject)(val);
+  const isObj = (0, import_utils9.isObject)(val);
   if (isObj && val.value)
     return getColor(value, `@${globalTheme}`, config);
   else if (isObj) {
@@ -1701,15 +1827,15 @@ var getMediaColor = (value, globalTheme, config) => {
 };
 var setColor = (val, key, suffix) => {
   const CONFIG2 = getActiveConfig();
-  if ((0, import_utils8.isString)(val) && val.slice(0, 2) === "--")
+  if ((0, import_utils9.isString)(val) && val.slice(0, 2) === "--")
     val = getColor(val.slice(2));
-  if ((0, import_utils8.isArray)(val)) {
+  if ((0, import_utils9.isArray)(val)) {
     return {
       "@light": setColor(val[0], key, "light"),
       "@dark": setColor(val[1], key, "dark")
     };
   }
-  if ((0, import_utils8.isObject)(val)) {
+  if ((0, import_utils9.isObject)(val)) {
     const obj = {};
     for (const variant in val)
       obj[variant] = setColor(val[variant], key, variant.slice(0, 1) === "@" ? variant.slice(1) : variant);
@@ -1732,15 +1858,15 @@ var setColor = (val, key, suffix) => {
 };
 var setGradient = (val, key, suffix) => {
   const CONFIG2 = getActiveConfig();
-  if ((0, import_utils8.isString)(val) && val.slice(0, 2) === "--")
+  if ((0, import_utils9.isString)(val) && val.slice(0, 2) === "--")
     val = getColor(val.slice(2));
-  if ((0, import_utils8.isArray)(val)) {
+  if ((0, import_utils9.isArray)(val)) {
     return {
       "@light": setGradient(val[0], key, "light"),
       "@dark": setGradient(val[0], key, "dark")
     };
   }
-  if ((0, import_utils8.isObject)(val)) {
+  if ((0, import_utils9.isObject)(val)) {
     const obj = {};
     for (const variant in val)
       obj[variant] = setGradient(val[variant], key, variant.slice(0, 1) === "@" ? variant.slice(1) : variant);
@@ -1757,7 +1883,7 @@ var setGradient = (val, key, suffix) => {
 };
 
 // src/system/theme.js
-var import_utils10 = __toESM(require_cjs4(), 1);
+var import_utils11 = __toESM(require_cjs4(), 1);
 var setThemeValue = (theme) => {
   const value = {};
   const { state, media, helpers, ...rest } = theme;
@@ -1780,7 +1906,7 @@ var getTheme = (value, modifier) => {
   if (CONFIG2.useVariable)
     return getMediaTheme(value, modifier);
   const { THEME: THEME2 } = CONFIG2;
-  if ((0, import_utils10.isString)(value)) {
+  if ((0, import_utils11.isString)(value)) {
     const [theme, subtheme] = value.split(" ");
     const isOurTheme = THEME2[theme];
     if (isOurTheme) {
@@ -1789,7 +1915,7 @@ var getTheme = (value, modifier) => {
       value = [theme, subtheme || modifier];
     }
   }
-  if ((0, import_utils10.isObjectLike)(value) && value[1]) {
+  if ((0, import_utils11.isObjectLike)(value) && value[1]) {
     const themeName = value[0];
     const subThemeName = value[1];
     const { helpers, media, state } = THEME2[themeName];
@@ -1799,11 +1925,11 @@ var getTheme = (value, modifier) => {
       return getThemeValue(helpers[subThemeName]);
     if (state && state[subThemeName])
       return getThemeValue(state[subThemeName]);
-  } else if ((0, import_utils10.isObject)(value))
+  } else if ((0, import_utils11.isObject)(value))
     return setThemeValue(value);
 };
 var setInverseTheme = (theme, variant, value) => {
-  if ((0, import_utils10.isObject)(variant)) {
+  if ((0, import_utils11.isObject)(variant)) {
     theme.variants.inverse.value = setThemeValue(variant);
   } else if (variant === true) {
     const { color, background } = value;
@@ -1818,7 +1944,7 @@ var setInverseTheme = (theme, variant, value) => {
 var setPseudo = (theme, key, variant, themeValue) => {
   const result = getTheme(variant);
   themeValue[`&:${key}`] = result;
-  if ((0, import_utils10.isObject)(variant) && !variant.value)
+  if ((0, import_utils11.isObject)(variant) && !variant.value)
     variant.value = result;
 };
 var setSelectors = (theme, value) => {
@@ -1836,7 +1962,7 @@ var setSelectors = (theme, value) => {
 var setPrefersScheme = (theme, key, variant, themeValue) => {
   const result = getTheme(variant);
   themeValue[`@media (prefers-color-scheme: ${key})`] = result;
-  if ((0, import_utils10.isObject)(variant) && !variant.value)
+  if ((0, import_utils11.isObject)(variant) && !variant.value)
     variant.value = result;
 };
 var setMedia = (theme, value) => {
@@ -1862,7 +1988,7 @@ var setHelpers = (theme, value) => {
   const keys = Object.keys(helpers);
   keys.map((key) => {
     const helper = helpers[key];
-    if ((0, import_utils10.isString)(helper))
+    if ((0, import_utils11.isString)(helper))
       helpers[key] = CONFIG2.THEME[helper];
     else
       getThemeValue(helpers[key]);
@@ -1886,7 +2012,7 @@ var setMediaTheme = (val, key, suffix, prefers) => {
   const CONFIG2 = getActiveConfig();
   const { CSS_VARS: CSS_VARS2 } = CONFIG2;
   const theme = { value: val };
-  if ((0, import_utils10.isObjectLike)(val)) {
+  if ((0, import_utils11.isObjectLike)(val)) {
     for (const param in val) {
       const symb = param.slice(0, 1);
       const value = val[param];
@@ -1914,7 +2040,7 @@ var setMediaTheme = (val, key, suffix, prefers) => {
       };
     }
   }
-  if ((0, import_utils10.isString)(val) && val.slice(0, 2) === "--") {
+  if ((0, import_utils11.isString)(val) && val.slice(0, 2) === "--") {
     const { THEME: THEME2 } = CONFIG2;
     const value = THEME2[val.slice(2)];
     const getReferenced = getMediaTheme(value, prefers);
@@ -1927,7 +2053,7 @@ var recursiveTheme = (val) => {
   const obj = {};
   for (const param in val) {
     const symb = param.slice(0, 1);
-    if ((0, import_utils10.isObjectLike)(val[param])) {
+    if ((0, import_utils11.isObjectLike)(val[param])) {
       if (symb === "@") {
         const query = CONFIG2.MEDIA[param.slice(1)];
         const media = `@media screen and ${query}`;
@@ -1947,23 +2073,23 @@ var findModifierFromArray = (val, modifierArray) => {
   return val;
 };
 var findModifier = (val, modifier) => {
-  if ((0, import_utils10.isArray)(modifier))
+  if ((0, import_utils11.isArray)(modifier))
     return findModifierFromArray(val, modifier);
-  else if ((0, import_utils10.isString)(modifier) && val[modifier])
+  else if ((0, import_utils11.isString)(modifier) && val[modifier])
     return val[modifier];
   else
     return val;
 };
 var getMediaTheme = (val, mod) => {
   const CONFIG2 = getActiveConfig();
-  if ((0, import_utils10.isString)(val) && val.slice(0, 2) === "--")
+  if ((0, import_utils11.isString)(val) && val.slice(0, 2) === "--")
     val = getMediaTheme(val.slice(2));
-  if (!val || !(0, import_utils10.isString)(val)) {
+  if (!val || !(0, import_utils11.isString)(val)) {
     if (CONFIG2.verbose)
       console.warn(val, "- theme is not string");
     return;
   }
-  const [name, ...modifier] = (0, import_utils10.isArray)(val) ? val : val.split(" ");
+  const [name, ...modifier] = (0, import_utils11.isArray)(val) ? val : val.split(" ");
   let value = CONFIG2.THEME[name];
   if (value && (modifier || mod)) {
     value = findModifier(value, modifier.length ? modifier : mod);
@@ -1973,7 +2099,7 @@ var getMediaTheme = (val, mod) => {
 };
 
 // src/system/font.js
-var import_utils11 = __toESM(require_cjs4(), 1);
+var import_utils12 = __toESM(require_cjs4(), 1);
 var setFont = (val, key) => {
   const CSSvar = `--font-${key}`;
   const fontFace = val[0] ? getFontFaceEach(key, val) : setCustomFontMedia(key, val.url);
@@ -1990,7 +2116,7 @@ var setFontFamily = (val, key) => {
   let { value, type } = val;
   if (val.isDefault)
     FONT_FAMILY2.default = key;
-  if ((0, import_utils11.isObject)(value))
+  if ((0, import_utils12.isObject)(value))
     value = arrayzeValue(value);
   const CSSvar = `--font-family-${key}`;
   const str = `${value.join(", ")}, ${FONT_FAMILY_TYPES2[type]}`;
@@ -1998,7 +2124,7 @@ var setFontFamily = (val, key) => {
 };
 
 // src/system/typography.js
-var import_utils14 = __toESM(require_cjs4(), 1);
+var import_utils15 = __toESM(require_cjs4(), 1);
 var runThroughMedia = (props) => {
   const CONFIG2 = getActiveConfig();
   const { TYPOGRAPHY: TYPOGRAPHY2, MEDIA: MEDIA2 } = CONFIG2;
@@ -2006,7 +2132,7 @@ var runThroughMedia = (props) => {
     const mediaProps = props[prop];
     if (prop.slice(0, 1) === "@") {
       const { type, base, ratio, range, subSequence, h1Matches, unit } = props;
-      (0, import_utils14.merge)(mediaProps, {
+      (0, import_utils15.merge)(mediaProps, {
         type,
         base,
         ratio,
@@ -2067,13 +2193,13 @@ var getFontSizeByKey = (value) => {
 };
 
 // src/system/spacing.js
-var import_utils17 = __toESM(require_cjs4(), 1);
+var import_utils18 = __toESM(require_cjs4(), 1);
 var runThroughMedia2 = (sequenceProps) => {
   for (const prop in sequenceProps) {
     const mediaProps = sequenceProps[prop];
     if (prop.slice(0, 1) === "@") {
       const { type, base, ratio, range, subSequence, h1Matches, unit } = sequenceProps;
-      (0, import_utils17.merge)(mediaProps, {
+      (0, import_utils18.merge)(mediaProps, {
         type,
         base,
         ratio,
@@ -2112,7 +2238,7 @@ var getSpacingByKey = (value, propertyName = "padding", sequenceProps) => {
   const stack = arrayzeValue(value);
   if (!stack)
     return;
-  if ((0, import_utils17.isString)(value) && value.includes("calc")) {
+  if ((0, import_utils18.isString)(value) && value.includes("calc")) {
     return { [propertyName]: value };
   }
   if (stack.length > 1) {
@@ -2148,7 +2274,7 @@ var getSpacingBasedOnRatio = (props, propertyName, val) => {
     let sequenceProps = SPACING2[spacingRatio];
     if (!sequenceProps) {
       const { type, base, range, subSequence } = SPACING2;
-      sequenceProps = SPACING2[spacingRatio] = (0, import_utils17.merge)({
+      sequenceProps = SPACING2[spacingRatio] = (0, import_utils18.merge)({
         ratio: spacingRatio,
         type: type + "-" + spacingRatio,
         unit,
@@ -2193,11 +2319,11 @@ var getTimingByKey = (value, property = "timing") => {
 };
 
 // src/system/document.js
-var import_utils21 = __toESM(require_cjs4(), 1);
+var import_utils22 = __toESM(require_cjs4(), 1);
 var applyDocument = () => {
   const CONFIG2 = getActiveConfig();
   const { DOCUMENT: DOCUMENT2, FONT_FAMILY: FONT_FAMILY2, THEME: THEME2, TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG2;
-  return (0, import_utils21.merge)(DOCUMENT2, {
+  return (0, import_utils22.merge)(DOCUMENT2, {
     theme: THEME2.document,
     fontFamily: getDefaultOrFirstKey(FONT_FAMILY2),
     fontSize: TYPOGRAPHY2.base,
@@ -2281,7 +2407,7 @@ var appendSVG = (lib, options = DEF_OPTIONS) => {
 };
 
 // src/system/reset.js
-var import_utils24 = __toESM(require_cjs4(), 1);
+var import_utils25 = __toESM(require_cjs4(), 1);
 var applyReset = (reset = {}) => {
   const CONFIG2 = getActiveConfig();
   const { RESET: RESET2, TYPOGRAPHY: TYPOGRAPHY2, DOCUMENT: DOCUMENT2 } = CONFIG2;
@@ -2301,7 +2427,10 @@ var applyReset = (reset = {}) => {
       configReset.h6 = configTemplates.h6;
     }
     const { body, ...templates } = TYPOGRAPHY2.templates;
-    return (0, import_utils24.deepMerge)((0, import_utils24.merge)(RESET2, reset), {
+    const globalTheme = CONFIG2.useDocumentTheme ? getMediaTheme("document", `@${CONFIG2.globalTheme}`) : {};
+    if (RESET2.html)
+      (0, import_utils25.overwriteDeep)(RESET2.html, globalTheme);
+    return (0, import_utils25.deepMerge)((0, import_utils25.merge)(RESET2, reset), {
       html: {
         position: "absolute",
         // overflow: 'hidden',
@@ -2312,8 +2441,8 @@ var applyReset = (reset = {}) => {
         margin: "0",
         WebkitFontSmoothing: "subpixel-antialiased",
         scrollBehavior: "smooth",
+        ...globalTheme,
         fontSize: TYPOGRAPHY2.browserDefault + "px",
-        ...CONFIG2.useDocumentTheme ? getMediaTheme("document", `@${CONFIG2.globalTheme}`) : {},
         fontFamily: DOCUMENT2.fontFamily,
         lineHeight: DOCUMENT2.lineHeight
       },