@symbo.ls/scratch 3.2.3 → 3.2.8

package/dist/iife/index.js

@@ -0,0 +1,2580 @@
+"use strict";
+var SmblsScratch = (() => {
+  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/index.js
+  var index_exports = {};
+  __export(index_exports, {
+    ANIMATION: () => ANIMATION,
+    BREAKPOINTS: () => BREAKPOINTS,
+    CASES: () => CASES,
+    CLASS: () => CLASS,
+    COLOR: () => COLOR,
+    CONFIG: () => CONFIG,
+    CSS_NATIVE_COLOR_REGEX: () => CSS_NATIVE_COLOR_REGEX,
+    CSS_UNITS: () => CSS_UNITS,
+    CSS_VARS: () => CSS_VARS,
+    DEVICES: () => DEVICES,
+    DOCUMENT: () => DOCUMENT,
+    FACTORY: () => FACTORY,
+    FONT: () => FONT,
+    FONT_FACE: () => FONT_FACE,
+    FONT_FAMILY: () => FONT_FAMILY,
+    FONT_FAMILY_TYPES: () => FONT_FAMILY_TYPES,
+    GRADIENT: () => GRADIENT,
+    GRID: () => GRID,
+    ICONS: () => ICONS,
+    MEDIA: () => MEDIA,
+    RESET: () => RESET,
+    SEMANTIC_ICONS: () => SEMANTIC_ICONS,
+    SEQUENCE: () => SEQUENCE,
+    SHADOW: () => SHADOW,
+    SPACING: () => SPACING,
+    SVG: () => SVG,
+    SVG_DATA: () => SVG_DATA,
+    TEMPLATES: () => TEMPLATES,
+    THEME: () => THEME,
+    TIMING: () => TIMING,
+    TYPOGRAPHY: () => TYPOGRAPHY,
+    UNIT: () => UNIT,
+    VALUE_TRANSFORMERS: () => VALUE_TRANSFORMERS,
+    activateConfig: () => activateConfig,
+    appendSVGSprite: () => appendSVGSprite,
+    appendSvgIconsSprite: () => appendSvgIconsSprite,
+    applyDocument: () => applyDocument,
+    applyHeadings: () => applyHeadings,
+    applyMediaSequenceVars: () => applyMediaSequenceVars,
+    applyReset: () => applyReset,
+    applySequenceGlobalVars: () => applySequenceGlobalVars,
+    applySequenceVars: () => applySequenceVars,
+    applySpacingSequence: () => applySpacingSequence,
+    applyTimingSequence: () => applyTimingSequence,
+    applyTypographySequence: () => applyTypographySequence,
+    changeLightness: () => changeLightness,
+    checkIfBoxSize: () => checkIfBoxSize,
+    colorStringToRgbaArray: () => colorStringToRgbaArray,
+    convertSvgToSymbol: () => convertSvgToSymbol,
+    findHeadingLetter: () => findHeadingLetter,
+    findHeadings: () => findHeadings,
+    generateSequence: () => generateSequence,
+    generateSequencePosition: () => generateSequencePosition,
+    generateSprite: () => generateSprite,
+    generateSubSequence: () => generateSubSequence,
+    getActiveConfig: () => getActiveConfig,
+    getColor: () => getColor,
+    getColorShade: () => getColorShade,
+    getDefaultOrFirstKey: () => getDefaultOrFirstKey,
+    getFnPrefixAndValue: () => getFnPrefixAndValue,
+    getFontFace: () => getFontFace,
+    getFontFaceEach: () => getFontFaceEach,
+    getFontFaceEachString: () => getFontFaceEachString,
+    getFontFaceString: () => getFontFaceString,
+    getFontFamily: () => getFontFamily,
+    getFontFormat: () => getFontFormat,
+    getFontSizeByKey: () => getFontSizeByKey,
+    getMediaColor: () => getMediaColor,
+    getMediaTheme: () => getMediaTheme,
+    getRgbTone: () => getRgbTone,
+    getSequenceValue: () => getSequenceValue,
+    getSequenceValueBySymbols: () => getSequenceValueBySymbols,
+    getSequenceValuePropertyPair: () => getSequenceValuePropertyPair,
+    getShadow: () => getShadow,
+    getSpacingBasedOnRatio: () => getSpacingBasedOnRatio,
+    getSpacingByKey: () => getSpacingByKey,
+    getSubratio: () => getSubratio,
+    getSubratioDifference: () => getSubratioDifference,
+    getTheme: () => getTheme,
+    getTimingByKey: () => getTimingByKey,
+    getTimingFunction: () => getTimingFunction,
+    hexToRgb: () => hexToRgb,
+    hexToRgbArray: () => hexToRgbArray,
+    hexToRgba: () => hexToRgba,
+    hslToRgb: () => hslToRgb,
+    isCSSVar: () => isCSSVar,
+    isGoogleFontsUrl: () => isGoogleFontsUrl,
+    isResolvedColor: () => isResolvedColor,
+    isScalingUnit: () => isScalingUnit,
+    mixTwoColors: () => mixTwoColors,
+    mixTwoRgb: () => mixTwoRgb,
+    mixTwoRgba: () => mixTwoRgba,
+    numToLetterMap: () => numToLetterMap,
+    opacify: () => opacify,
+    parseColorToken: () => parseColorToken,
+    resolveColorsInGradient: () => resolveColorsInGradient,
+    returnSubThemeOrDefault: () => returnSubThemeOrDefault,
+    rgbArrayToHex: () => rgbArrayToHex,
+    rgbToHSL: () => rgbToHSL,
+    rgbToHex: () => rgbToHex,
+    runThroughMedia: () => runThroughMedia,
+    scratchSystem: () => system_exports,
+    scratchUtils: () => utils_exports,
+    set: () => set,
+    setActiveConfig: () => setActiveConfig,
+    setColor: () => setColor,
+    setCustomFont: () => setCustomFont,
+    setCustomFontMedia: () => setCustomFontMedia,
+    setEach: () => setEach,
+    setFont: () => setFont,
+    setFontFamily: () => setFontFamily,
+    setFontImport: () => setFontImport,
+    setGradient: () => setGradient,
+    setInCustomFontMedia: () => setInCustomFontMedia,
+    setMediaTheme: () => setMediaTheme,
+    setSVG: () => setSVG,
+    setScalingVar: () => setScalingVar,
+    setShadow: () => setShadow,
+    setSubScalingVar: () => setSubScalingVar,
+    setSvgIcon: () => setSvgIcon,
+    setTheme: () => setTheme,
+    setValue: () => setValue,
+    setVariables: () => setVariables,
+    splitSpacedValue: () => splitSpacedValue,
+    splitTopLevelCommas: () => splitTopLevelCommas,
+    splitTransition: () => splitTransition,
+    transformBackgroundImage: () => transformBackgroundImage,
+    transformBorder: () => transformBorder,
+    transformBorderRadius: () => transformBorderRadius,
+    transformBoxShadow: () => transformBoxShadow,
+    transformDuration: () => transformDuration,
+    transformShadow: () => transformShadow,
+    transformSize: () => transformSize,
+    transformSizeRatio: () => transformSizeRatio,
+    transformTextStroke: () => transformTextStroke,
+    transformTransition: () => transformTransition,
+    transfromGap: () => transfromGap
+  });
+
+  // src/utils/index.js
+  var utils_exports = {};
+  __export(utils_exports, {
+    CSS_NATIVE_COLOR_REGEX: () => CSS_NATIVE_COLOR_REGEX,
+    CSS_UNITS: () => CSS_UNITS,
+    applyMediaSequenceVars: () => applyMediaSequenceVars,
+    applySequenceGlobalVars: () => applySequenceGlobalVars,
+    applySequenceVars: () => applySequenceVars,
+    changeLightness: () => changeLightness,
+    colorStringToRgbaArray: () => colorStringToRgbaArray,
+    convertSvgToSymbol: () => convertSvgToSymbol,
+    findHeadingLetter: () => findHeadingLetter,
+    findHeadings: () => findHeadings,
+    generateSequence: () => generateSequence,
+    generateSequencePosition: () => generateSequencePosition,
+    generateSprite: () => generateSprite,
+    generateSubSequence: () => generateSubSequence,
+    getColorShade: () => getColorShade,
+    getDefaultOrFirstKey: () => getDefaultOrFirstKey,
+    getFnPrefixAndValue: () => getFnPrefixAndValue,
+    getFontFace: () => getFontFace,
+    getFontFaceEach: () => getFontFaceEach,
+    getFontFaceEachString: () => getFontFaceEachString,
+    getFontFaceString: () => getFontFaceString,
+    getFontFormat: () => getFontFormat,
+    getRgbTone: () => getRgbTone,
+    getSequenceValue: () => getSequenceValue,
+    getSequenceValueBySymbols: () => getSequenceValueBySymbols,
+    getSequenceValuePropertyPair: () => getSequenceValuePropertyPair,
+    getSubratio: () => getSubratio,
+    getSubratioDifference: () => getSubratioDifference,
+    hexToRgb: () => hexToRgb,
+    hexToRgbArray: () => hexToRgbArray,
+    hexToRgba: () => hexToRgba,
+    hslToRgb: () => hslToRgb,
+    isCSSVar: () => isCSSVar,
+    isGoogleFontsUrl: () => isGoogleFontsUrl,
+    isResolvedColor: () => isResolvedColor,
+    isScalingUnit: () => isScalingUnit,
+    mixTwoColors: () => mixTwoColors,
+    mixTwoRgb: () => mixTwoRgb,
+    mixTwoRgba: () => mixTwoRgba,
+    numToLetterMap: () => numToLetterMap,
+    opacify: () => opacify,
+    parseColorToken: () => parseColorToken,
+    returnSubThemeOrDefault: () => returnSubThemeOrDefault,
+    rgbArrayToHex: () => rgbArrayToHex,
+    rgbToHSL: () => rgbToHSL,
+    rgbToHex: () => rgbToHex,
+    setCustomFont: () => setCustomFont,
+    setCustomFontMedia: () => setCustomFontMedia,
+    setFontImport: () => setFontImport,
+    setInCustomFontMedia: () => setInCustomFontMedia,
+    setScalingVar: () => setScalingVar,
+    setSubScalingVar: () => setSubScalingVar,
+    setVariables: () => setVariables,
+    splitTopLevelCommas: () => splitTopLevelCommas
+  });
+
+  // src/utils/unit.js
+  var isScalingUnit = (unit) => {
+    return unit === "em" || unit === "rem" || unit === "vw" || unit === "vh" || unit === "vmax" || unit === "vmin";
+  };
+  var CSS_UNITS = [
+    // Absolute
+    "px",
+    "cm",
+    "mm",
+    "in",
+    "pt",
+    "pc",
+    // Font-relative
+    "em",
+    "rem",
+    "ex",
+    "cap",
+    "ch",
+    "ic",
+    "lh",
+    "rlh",
+    // Viewport-relative
+    "%",
+    "vw",
+    "vh",
+    "vmin",
+    "vmax",
+    "svw",
+    "svh",
+    "lvw",
+    "lvh",
+    "dvw",
+    "dvh",
+    // Container query units
+    "cqw",
+    "cqh",
+    "cqi",
+    "cqb",
+    "cqmin",
+    "cqmax",
+    // Angle
+    "deg",
+    "rad",
+    "grad",
+    "turn",
+    // Time
+    "s",
+    "ms",
+    // Resolution
+    "dpi",
+    "dpcm",
+    "dppx",
+    // Grid fractional
+    "fr",
+    "auto"
+  ];
+
+  // ../utils/dist/esm/globals.js
+  var window2 = globalThis;
+  var document2 = window2.document;
+
+  // ../utils/dist/esm/node.js
+  var isDOMNode = (obj) => {
+    return typeof window2 !== "undefined" && (obj instanceof window2.Node || obj instanceof window2.Window || obj === window2 || obj === document);
+  };
+
+  // ../utils/dist/esm/types.js
+  var isObject = (arg) => {
+    if (arg === null) return false;
+    return typeof arg === "object" && arg.constructor === Object;
+  };
+  var isString = (arg) => typeof arg === "string";
+  var isNumber = (arg) => typeof arg === "number";
+  var isFunction = (arg) => typeof arg === "function";
+  var isArray = (arg) => Array.isArray(arg);
+  var isObjectLike = (arg) => {
+    if (arg === null) return false;
+    return typeof arg === "object";
+  };
+  var isDefined = (arg) => arg !== void 0;
+
+  // ../utils/dist/esm/array.js
+  var unstackArrayOfObjects = (arr, exclude = []) => {
+    return arr.reduce(
+      (a, c) => deepMerge(a, deepClone(c, { exclude }), exclude),
+      {}
+    );
+  };
+
+  // ../utils/dist/esm/keys.js
+  var STATE_METHODS = /* @__PURE__ */ new Set([
+    "update",
+    "parse",
+    "clean",
+    "create",
+    "destroy",
+    "add",
+    "toggle",
+    "remove",
+    "apply",
+    "set",
+    "reset",
+    "replace",
+    "quietReplace",
+    "quietUpdate",
+    "applyReplace",
+    "applyFunction",
+    "keys",
+    "values",
+    "ref",
+    "rootUpdate",
+    "parentUpdate",
+    "parent",
+    "__element",
+    "__depends",
+    "__ref",
+    "__children",
+    "root",
+    "setByPath",
+    "setPathCollection",
+    "removeByPath",
+    "removePathCollection",
+    "getByPath"
+  ]);
+  var PROPS_METHODS = /* @__PURE__ */ new Set(["update", "__element"]);
+  var METHODS = /* @__PURE__ */ new Set([
+    "set",
+    "reset",
+    "update",
+    "remove",
+    "updateContent",
+    "removeContent",
+    "lookup",
+    "lookdown",
+    "lookdownAll",
+    "getRef",
+    "getPath",
+    "setNodeStyles",
+    "spotByPath",
+    "keys",
+    "parse",
+    "setProps",
+    "parseDeep",
+    "variables",
+    "if",
+    "log",
+    "verbose",
+    "warn",
+    "error",
+    "call",
+    "nextElement",
+    "previousElement",
+    "getRootState",
+    "getRoot",
+    "getRootData",
+    "getRootContext",
+    "getContext",
+    "getChildren"
+  ]);
+  var METHODS_EXL = /* @__PURE__ */ new Set([
+    "node",
+    "context",
+    "extends",
+    "__element",
+    "__ref",
+    ...METHODS,
+    ...STATE_METHODS,
+    ...PROPS_METHODS
+  ]);
+
+  // ../utils/dist/esm/object.js
+  var _startsWithDunder = (e) => e.charCodeAt(0) === 95 && e.charCodeAt(1) === 95;
+  var exec = (param, element, state, context) => {
+    if (isFunction(param)) {
+      if (!element) return;
+      const result = param.call(
+        element,
+        element,
+        state || element.state,
+        context || element.context
+      );
+      if (result && typeof result.then === "function") {
+        let resolved;
+        result.then((value) => {
+          resolved = value;
+        });
+        return resolved;
+      }
+      return result;
+    }
+    return param;
+  };
+  var merge = (element, obj, excludeFrom = []) => {
+    const useSet = excludeFrom instanceof Set;
+    for (const e in obj) {
+      if (!Object.prototype.hasOwnProperty.call(obj, e)) continue;
+      if (_startsWithDunder(e)) continue;
+      if (useSet ? excludeFrom.has(e) : excludeFrom.includes(e)) continue;
+      if (element[e] === void 0) {
+        element[e] = obj[e];
+      }
+    }
+    return element;
+  };
+  var deepMerge = (element, extend, excludeFrom = METHODS_EXL) => {
+    const useSet = excludeFrom instanceof Set;
+    for (const e in extend) {
+      if (!Object.prototype.hasOwnProperty.call(extend, e)) continue;
+      if (_startsWithDunder(e)) continue;
+      if (useSet ? excludeFrom.has(e) : excludeFrom.includes(e)) continue;
+      const elementProp = element[e];
+      const extendProp = extend[e];
+      if (isObjectLike(elementProp) && isObjectLike(extendProp)) {
+        deepMerge(elementProp, extendProp, excludeFrom);
+      } else if (elementProp === void 0) {
+        element[e] = extendProp;
+      }
+    }
+    return element;
+  };
+  var deepClone = (obj, options = {}) => {
+    const {
+      exclude = [],
+      cleanUndefined = false,
+      cleanNull = false,
+      window: targetWindow,
+      visited = /* @__PURE__ */ new WeakMap(),
+      handleExtends = false
+    } = options;
+    const contentWindow = targetWindow || window2 || globalThis;
+    if (!isObjectLike(obj) || isDOMNode(obj)) {
+      return obj;
+    }
+    if (visited.has(obj)) {
+      return visited.get(obj);
+    }
+    const isArr = isArray(obj);
+    const clone2 = isArr ? [] : {};
+    visited.set(obj, clone2);
+    const excludeSet = exclude instanceof Set ? exclude : exclude.length > 3 ? new Set(exclude) : null;
+    for (const key in obj) {
+      if (!Object.prototype.hasOwnProperty.call(obj, key)) continue;
+      if (_startsWithDunder(key) || key === "__proto__") continue;
+      if (excludeSet ? excludeSet.has(key) : exclude.includes(key)) continue;
+      const value = obj[key];
+      if (cleanUndefined && value === void 0) continue;
+      if (cleanNull && value === null) continue;
+      if (isDOMNode(value)) {
+        clone2[key] = value;
+        continue;
+      }
+      if (handleExtends && key === "extends" && isArray(value)) {
+        clone2[key] = unstackArrayOfObjects(value, exclude);
+        continue;
+      }
+      if (isFunction(value) && options.window) {
+        clone2[key] = contentWindow.eval("(" + value.toString() + ")");
+        continue;
+      }
+      if (isObjectLike(value)) {
+        clone2[key] = deepClone(value, {
+          ...options,
+          visited
+        });
+      } else {
+        clone2[key] = value;
+      }
+    }
+    return clone2;
+  };
+  var overwriteDeep = (obj, params, opts = {}, visited = /* @__PURE__ */ new WeakMap()) => {
+    if (!isObjectLike(obj) || !isObjectLike(params) || isDOMNode(obj) || isDOMNode(params)) {
+      return params;
+    }
+    if (visited.has(obj)) return visited.get(obj);
+    visited.set(obj, obj);
+    const excl = opts.exclude;
+    const exclSet = excl ? excl instanceof Set ? excl : new Set(excl) : null;
+    const forcedExclude = !opts.preventForce;
+    for (const e in params) {
+      if (!Object.prototype.hasOwnProperty.call(params, e)) continue;
+      if (exclSet && exclSet.has(e) || forcedExclude && _startsWithDunder(e)) continue;
+      const objProp = obj[e];
+      const paramsProp = params[e];
+      if (isDOMNode(paramsProp)) {
+        obj[e] = paramsProp;
+      } else if (isObjectLike(objProp) && isObjectLike(paramsProp)) {
+        obj[e] = overwriteDeep(objProp, paramsProp, opts, visited);
+      } else if (paramsProp !== void 0) {
+        obj[e] = paramsProp;
+      }
+    }
+    return obj;
+  };
+
+  // ../utils/dist/esm/env.js
+  var NODE_ENV = process.env.NODE_ENV;
+  var isProduction = (env = NODE_ENV) => env === "production";
+  var isNotProduction = (env = NODE_ENV) => !isProduction(env);
+
+  // src/utils/color.js
+  var colorStringToRgbaArray = (color) => {
+    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] : "");
+      }
+      return [
+        parseInt(color.substr(1, 2), 16),
+        parseInt(color.substr(3, 2), 16),
+        parseInt(color.substr(5, 2), 16),
+        color.length > 7 ? parseInt(color.substr(7, 2), 16) / 255 : 1
+      ];
+    }
+    if (color.indexOf("rgb") === -1) {
+      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) {
+          document2.body.removeChild(elem);
+          return;
+        }
+        elem.style.color = color;
+        if (elem.style.color === flag || elem.style.color === "") {
+          document2.body.removeChild(elem);
+          return [0, 0, 0, 0];
+        }
+        color = window2.getComputedStyle(elem).color;
+        document2.body.removeChild(elem);
+      }
+    }
+    if (color.indexOf("rgb") === 0) {
+      if (color.indexOf("rgba") === -1) color = `${color}, 1`;
+      return color.match(/[\.\d]+/g).map((a) => +a);
+    }
+    return [0, 0, 0, 0];
+  };
+  var mixTwoColors = (colorA, colorB, range = 0.5) => {
+    colorA = colorStringToRgbaArray(colorA);
+    colorB = colorStringToRgbaArray(colorB);
+    return mixTwoRgba(colorA, colorB, range);
+  };
+  var hexToRgb = (hex, alpha = 1) => {
+    const [r, g, b] = hex.match(/\w\w/g).map((x) => parseInt(x, 16));
+    return `rgb(${r},${g},${b})`;
+  };
+  var hexToRgbArray = (hex, alpha = 1) => {
+    const [r, g, b] = hex.match(/\w\w/g).map((x) => parseInt(x, 16));
+    return [r, g, b];
+  };
+  var rgbToHex = (r, g, b) => {
+    return "#" + (1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1);
+  };
+  var rgbArrayToHex = ([r, g, b]) => {
+    return ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+  };
+  var hexToRgba = (hex, alpha = 1) => {
+    const [r, g, b] = hex.match(/\w\w/g).map((x) => parseInt(x, 16));
+    return `rgba(${r},${g},${b},${alpha})`;
+  };
+  var mixTwoRgb = (colorA, colorB, range = 0.5) => {
+    const arr = [];
+    for (let i = 0; i < 3; i++) {
+      arr[i] = ~~(colorA[i] + (colorB[i] - colorA[i]) * range);
+    }
+    return `rgb(${arr})`;
+  };
+  var changeLightness = (delta, hsl) => {
+    const [hue, saturation, lightness] = hsl;
+    const newLightness = Math.max(0, Math.min(100, lightness + parseFloat(delta)));
+    return [hue, saturation, newLightness];
+  };
+  var rgbToHSL = (r, g, b) => {
+    const a = Math.max(r, g, b);
+    const n = a - Math.min(r, g, b);
+    const f = 1 - Math.abs(a + a - n - 1);
+    const h = n && (a == r ? (g - b) / n : a == g ? 2 + (b - r) / n : 4 + (r - g) / n);
+    return [60 * (h < 0 ? h + 6 : h), f ? n / f : 0, (a + a - n) / 2];
+  };
+  var hslToRgb = (h, s, l, a = s * Math.min(l, 1 - l), f = (n, k = (n + h / 30) % 12) => l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)) => [f(0), f(8), f(4)];
+  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;
+    let b = (num >> 8 & 255) + amt;
+    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;
+    return ((g | b << 8 | r << 16) + 16777216).toString(16).slice(1);
+  };
+  var mixTwoRgba = (colorA, colorB, range = 0.5) => {
+    const arr = [];
+    for (let i = 0; i < 4; i++) {
+      const round = i === 3 ? (x) => x : Math.round;
+      arr[i] = round(colorA[i] + (colorB[i] - colorA[i]) * range);
+    }
+    return `rgba(${arr})`;
+  };
+  var opacify = (color, opacity) => {
+    const arr = colorStringToRgbaArray(color);
+    if (!arr) {
+      if (isNotProduction()) console.warn(color + " color is not rgba");
+      return;
+    }
+    arr[3] = opacity;
+    return `rgba(${arr})`;
+  };
+  var isCSSVar = (v) => v.charCodeAt(0) === 45 && v.charCodeAt(1) === 45;
+  var CSS_NATIVE_COLOR_REGEX = /(?:rgba?\(|hsla?\(|#[0-9a-fA-F]{3,8}\b)/;
+  var COLOR_TOKEN_REGEX = /^([a-zA-Z]\w*)(?:\.(\d+))?(?:([+-]\d+|=\d+))?$/;
+  var parseColorToken = (value) => {
+    if (!isString(value)) return null;
+    if (CSS_NATIVE_COLOR_REGEX.test(value)) return { passthrough: value };
+    if (isCSSVar(value)) return { cssVar: value };
+    const match = value.match(COLOR_TOKEN_REGEX);
+    if (!match) return null;
+    const [, name, alphaDigits, rawTone] = match;
+    const alpha = alphaDigits !== void 0 ? `0.${alphaDigits}` : void 0;
+    const tone = rawTone && rawTone[0] === "=" ? rawTone.slice(1) : rawTone;
+    return { name, alpha, tone };
+  };
+  var isResolvedColor = (result) => {
+    return isString(result) && (result.includes("rgb") || result.includes("var(") || result.includes("#"));
+  };
+  var splitTopLevelCommas = (value) => {
+    const result = [];
+    let current = "";
+    let depth = 0;
+    for (const char of value) {
+      if (char === "(") depth += 1;
+      else if (char === ")" && depth > 0) depth -= 1;
+      if (char === "," && depth === 0) {
+        result.push(current);
+        current = "";
+        continue;
+      }
+      current += char;
+    }
+    if (current.length || !result.length) result.push(current);
+    return result;
+  };
+  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 += "";
+    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/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]];
+    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;
+    const hasValue = Object.keys(LIBRARY)[0];
+    return hasValue && LIBRARY[hasValue] && LIBRARY[hasValue].value;
+  };
+  var getFontFormat = (url) => {
+    const ext = url.split(/[#?]/)[0].split(".").pop().trim();
+    if (["woff2", "woff", "ttf", "otf", "eot"].includes(ext)) return ext;
+    return null;
+  };
+  var isGoogleFontsUrl = (url) => url && (url.includes("fonts.googleapis.com") || url.includes("fonts.gstatic.com"));
+  var setFontImport = (url) => `@import url('${url}');`;
+  var setInCustomFontMedia = (str) => `@font-face { ${str} }`;
+  var setCustomFont = (name, url, weight, options = {}) => {
+    const format = getFontFormat(url);
+    const formatStr = format ? ` format('${format}')` : "";
+    return `
+  font-family: '${name}';
+  font-style: normal;${weight ? `
+  font-weight: ${weight};` : ""}${options.fontStretch ? `
+  font-stretch: ${options.fontStretch};` : ""}${options.fontDisplay ? `
+  font-display: ${options.fontDisplay};` : ""}
+  src: url('${url}')${formatStr};`;
+  };
+  var setCustomFontMedia = (name, url, weight, options) => `@font-face {${setCustomFont(name, url, weight, options)}
+}`;
+  var getFontFaceEach = (name, weights) => {
+    const keys = Object.keys(weights);
+    return keys.map((key) => {
+      const { url, fontWeight } = weights[key];
+      return setCustomFont(name, url, fontWeight);
+    });
+  };
+  var getFontFace = (LIBRARY) => {
+    const keys = Object.keys(LIBRARY);
+    return keys.map((key) => getFontFaceEach(key, LIBRARY[key].value));
+  };
+  var getFontFaceEachString = (name, weights) => {
+    if (weights && weights.isVariable) {
+      if (isGoogleFontsUrl(weights.url)) {
+        return setFontImport(weights.url);
+      }
+      return setCustomFontMedia(name, weights.url, weights.fontWeight, {
+        fontStretch: weights.fontStretch,
+        fontDisplay: weights.fontDisplay || "swap"
+      });
+    }
+    const isArr = weights[0];
+    if (isArr) return getFontFaceEach(name, weights).map(setInCustomFontMedia);
+    return setCustomFontMedia(name, weights.url);
+  };
+  var getFontFaceString = (LIBRARY) => {
+    const keys = Object.keys(LIBRARY);
+    return keys.map((key) => getFontFaceEachString(key, LIBRARY[key].value));
+  };
+
+  // ../smbls-utils/dist/esm/index.js
+  var toCamelCase = (str) => {
+    return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function(word, index) {
+      return index === 0 ? word.toLowerCase() : word.toUpperCase();
+    }).replaceAll(/\s+/g, "");
+  };
+  var toDashCase = (val) => val.replace(/[^a-zA-Z0-9]/g, " ").trim().toLowerCase().replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
+  var arrayzeValue = (val) => {
+    if (isArray(val)) return val;
+    if (isString(val)) return val.split(" ");
+    if (isObject(val)) return Object.values(val);
+    if (isNumber(val)) return [val];
+  };
+
+  // src/defaultConfig/index.js
+  var defaultConfig_exports = {};
+  __export(defaultConfig_exports, {
+    ANIMATION: () => ANIMATION,
+    BREAKPOINTS: () => BREAKPOINTS,
+    CASES: () => CASES,
+    CLASS: () => CLASS,
+    COLOR: () => COLOR,
+    DEVICES: () => DEVICES,
+    DOCUMENT: () => DOCUMENT,
+    FONT: () => FONT,
+    FONT_FACE: () => FONT_FACE,
+    FONT_FAMILY: () => FONT_FAMILY,
+    FONT_FAMILY_TYPES: () => FONT_FAMILY_TYPES,
+    GRADIENT: () => GRADIENT,
+    GRID: () => GRID,
+    ICONS: () => ICONS,
+    MEDIA: () => MEDIA,
+    RESET: () => RESET,
+    SEMANTIC_ICONS: () => SEMANTIC_ICONS,
+    SEQUENCE: () => SEQUENCE,
+    SHADOW: () => SHADOW,
+    SPACING: () => SPACING,
+    SVG: () => SVG,
+    SVG_DATA: () => SVG_DATA,
+    TEMPLATES: () => TEMPLATES,
+    THEME: () => THEME,
+    TIMING: () => TIMING,
+    TYPOGRAPHY: () => TYPOGRAPHY,
+    UNIT: () => UNIT
+  });
+
+  // src/defaultConfig/sequence.js
+  var SEQUENCE = {
+    "minor-second": 1.067,
+    "major-second": 1.125,
+    "minor-third": 1.2,
+    "major-third": 1.25,
+    "perfect-fourth": 1.333,
+    "augmented-fourth": 1.414,
+    "perfect-fifth": 1.5,
+    "minor-sixth": 1.6,
+    phi: 1.618,
+    // golden-ratio
+    "major-sixth": 1.667,
+    "square-root-3": 1.732,
+    // theodorus
+    "minor-seventh": 1.778,
+    "major-seventh": 1.875,
+    octave: 2,
+    "square-root-5": 2.23,
+    // pythagoras
+    "major-tenth": 2.5,
+    "major-eleventh": 2.667,
+    "major-twelfth": 3,
+    pi: 3.14,
+    // archimedes
+    "double-octave": 4
+  };
+
+  // src/defaultConfig/unit.js
+  var UNIT = {
+    default: "em"
+  };
+
+  // src/defaultConfig/typography.js
+  var defaultProps = {
+    browserDefault: 16,
+    base: 16,
+    type: "font-size",
+    ratio: SEQUENCE["minor-third"],
+    range: [-3, 12],
+    h1Matches: 6,
+    lineHeight: 1.5,
+    subSequence: true,
+    mediaRegenerate: false,
+    unit: "em",
+    templates: {},
+    sequence: {},
+    scales: {},
+    vars: {}
+  };
+  var TYPOGRAPHY = defaultProps;
+
+  // src/defaultConfig/font.js
+  var FONT = {};
+
+  // src/defaultConfig/font-family.js
+  var FONT_FAMILY = {};
+  var FONT_FAMILY_TYPES = {
+    "sans-serif": "Helvetica, Arial, sans-serif, --system-default",
+    serif: "Times New Roman, Georgia, serif, --system-default",
+    monospace: "Courier New, monospace, --system-default"
+  };
+  var FONT_FACE = {};
+
+  // src/defaultConfig/media.js
+  var MEDIA = {
+    tv: "(min-width: 2780px)",
+    light: "(prefers-color-scheme: light)",
+    dark: "(prefers-color-scheme: dark)",
+    print: "print"
+  };
+
+  // src/defaultConfig/spacing.js
+  var defaultProps2 = {
+    base: TYPOGRAPHY.base,
+    type: "spacing",
+    ratio: SEQUENCE.phi,
+    range: [-5, 15],
+    subSequence: true,
+    mediaRegenerate: false,
+    unit: "em",
+    sequence: {},
+    scales: {},
+    vars: {}
+  };
+  var SPACING = defaultProps2;
+
+  // src/defaultConfig/color.js
+  var COLOR = {};
+  var GRADIENT = {};
+
+  // src/defaultConfig/theme.js
+  var THEME = {};
+
+  // src/defaultConfig/shadow.js
+  var SHADOW = {};
+
+  // src/defaultConfig/icons.js
+  var ICONS = {};
+  var SEMANTIC_ICONS = {};
+
+  // src/defaultConfig/timing.js
+  var defaultProps3 = {
+    default: 150,
+    base: 150,
+    type: "timing",
+    ratio: SEQUENCE["perfect-fourth"],
+    range: [-3, 12],
+    mediaRegenerate: false,
+    unit: "ms",
+    sequence: {},
+    scales: {},
+    vars: {}
+  };
+  var TIMING = defaultProps3;
+
+  // src/defaultConfig/document.js
+  var DOCUMENT = {};
+
+  // src/defaultConfig/responsive.js
+  var BREAKPOINTS = {
+    screenL: 1920,
+    screenM: 1680,
+    screenS: 1440,
+    tabletL: 1366,
+    tabletM: 1280,
+    tabletS: 1024,
+    mobileL: 768,
+    mobileM: 560,
+    mobileS: 480,
+    mobileXS: 375
+  };
+  var DEVICES = {
+    screenXXL: [2560, 1440],
+    screenXL: [2240, 1260],
+    screenL: [1920, 1024],
+    screenM: [1680, 1024],
+    screenS: [1440, 720],
+    tabletL: [1366, 926],
+    tabletM: [1280, 768],
+    tabletS: [1024, 768],
+    mobileL: [768, 375],
+    mobileM: [560, 768],
+    mobileS: [480, 768],
+    mobileXS: [375, 768]
+  };
+
+  // src/defaultConfig/cases.js
+  var CASES = {};
+
+  // src/defaultConfig/animation.js
+  var ANIMATION = {};
+
+  // src/defaultConfig/svg.js
+  var SVG = {};
+  var SVG_DATA = {};
+
+  // src/defaultConfig/templates.js
+  var TEMPLATES = {};
+
+  // src/defaultConfig/grid.js
+  var defaultProps4 = {};
+  var GRID = defaultProps4;
+
+  // src/defaultConfig/class.js
+  var defaultProps5 = {};
+  var CLASS = defaultProps5;
+
+  // src/defaultConfig/index.js
+  var RESET = {};
+
+  // src/factory.js
+  var CSS_VARS = {};
+  var CONFIG = {
+    verbose: false,
+    useVariable: true,
+    useReset: true,
+    CSS_VARS,
+    ...void 0 || defaultConfig_exports
+  };
+  var cachedConfig = deepClone(CONFIG);
+  var FACTORY = {
+    active: "0",
+    0: CONFIG
+  };
+  var activateConfig = (def) => {
+    if (isDefined(def)) {
+      FACTORY.active = def;
+    }
+    return FACTORY[def || FACTORY.active];
+  };
+  var getActiveConfig = (def) => {
+    return FACTORY[def || FACTORY.active] || CONFIG;
+  };
+  var setActiveConfig = (newConfig) => {
+    if (!isObject(newConfig)) return;
+    FACTORY.active = "1";
+    FACTORY["1"] = deepMerge(newConfig, deepClone(cachedConfig));
+    return newConfig;
+  };
+
+  // src/utils/sequence.js
+  var numToLetterMap = {
+    "-6": "U",
+    "-5": "V",
+    "-4": "W",
+    "-3": "X",
+    "-2": "Y",
+    "-1": "Z",
+    0: "A",
+    1: "B",
+    2: "C",
+    3: "D",
+    4: "E",
+    5: "F",
+    6: "G",
+    7: "H",
+    8: "I",
+    9: "J",
+    10: "K",
+    11: "L",
+    12: "M",
+    13: "N",
+    14: "O",
+    15: "P",
+    16: "Q",
+    17: "R",
+    18: "S",
+    19: "T"
+  };
+  var setSequenceValue = (props, sequenceProps) => {
+    const { key, variable, value, scaling, index, scalingVariable } = props;
+    sequenceProps.sequence[key] = {
+      key,
+      decimal: ~~(value * 100) / 100,
+      val: ~~value,
+      scaling,
+      index,
+      scalingVariable,
+      variable
+    };
+    sequenceProps.scales[key] = scaling;
+    sequenceProps.vars[variable] = scaling + sequenceProps.unit;
+  };
+  var getFnPrefixAndValue = (val) => {
+    if (!val.includes("(")) return val;
+    const prefix = val.split("(")[0];
+    const value = val.slice(val.indexOf("(") + 1, val.lastIndexOf(")"));
+    return [prefix, value];
+  };
+  var setScalingVar = (key, sequenceProps) => {
+    const { base, type, unit } = sequenceProps;
+    const defaultVal = (isScalingUnit(unit) ? 1 : base) + unit;
+    if (key === 0) return defaultVal;
+    const prefix = "--" + (type && type.replace(".", "-"));
+    const ratioVar = `${prefix}-ratio`;
+    if (key > 0) {
+      const prevLetterKey = numToLetterMap[key - 1];
+      return `calc(var(${prefix}-${prevLetterKey}) * var(${ratioVar}))`;
+    }
+    if (key < 0) {
+      const nextLetterKey = numToLetterMap[key + 1];
+      return `calc(var(${prefix}-${nextLetterKey}) / var(${ratioVar}))`;
+    }
+  };
+  var setSubScalingVar = (index, arr, variable, sequenceProps) => {
+    const { type } = sequenceProps;
+    const skipMiddle = index === 2 && arr.length === 2;
+    const indexMapWithLength = skipMiddle ? index + 1 : index;
+    const prefix = "--" + (type && type.replace(".", "-"));
+    const subRatioVarPrefix = `${prefix}-sub-ratio-`;
+    return `calc(var(${variable}) * var(${subRatioVarPrefix + indexMapWithLength}))`;
+  };
+  var getSubratioDifference = (base, ratio) => {
+    const diff = base * ratio - base;
+    const subRatio = diff / 1.618;
+    const first = base * ratio - subRatio;
+    const second = base + subRatio;
+    const middle = (first + second) / 2;
+    return [first, middle, second];
+  };
+  var getSubratio = (base, ratio) => {
+    return getSubratioDifference(base, ratio).map((v) => v / base);
+  };
+  var generateSubSequence = (props, sequenceProps) => {
+    const { key, base, value, ratio, variable, index } = props;
+    const next = value * ratio;
+    const diffRounded = ~~next - ~~value;
+    let arr;
+    const [first, middle, second] = getSubratioDifference(value, ratio);
+    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);
+      const newIndex = index + (k + 1) / 10;
+      const scalingVariable = setSubScalingVar(
+        k + 1,
+        arr,
+        variable,
+        sequenceProps
+      );
+      const props2 = {
+        key: key + (k + 1),
+        variable: newVar,
+        value: v,
+        scaling,
+        scalingVariable,
+        index: newIndex
+      };
+      setSequenceValue(props2, sequenceProps);
+    });
+  };
+  var switchSequenceOnNegative = (key, base, ratio) => {
+    return base * Math.pow(ratio, key);
+  };
+  var generateSequence = (sequenceProps) => {
+    const { type, base, ratio, range, subSequence } = sequenceProps;
+    const n = Math.abs(range[0]) + Math.abs(range[1]);
+    const prefix = "--" + (type && type.replace(".", "-")) + "-";
+    for (let i = 0; i <= n; i++) {
+      const key = range[1] - i;
+      const letterKey = numToLetterMap[key];
+      const value = switchSequenceOnNegative(key, base, ratio);
+      const scaling = ~~(value / base * 100) / 100;
+      const variable = prefix + letterKey;
+      const scalingVariable = setScalingVar(key, sequenceProps);
+      const props = {
+        key: letterKey,
+        variable,
+        value,
+        base,
+        scaling,
+        scalingVariable,
+        ratio,
+        index: key
+      };
+      setSequenceValue(props, sequenceProps);
+      if (subSequence) generateSubSequence(props, sequenceProps);
+    }
+    return sequenceProps;
+  };
+  var generateSequencePosition = (sequenceProps, position = 0) => {
+    const { type, base, ratio, subSequence } = sequenceProps;
+    const letterKey = isString(position) ? position : numToLetterMap[position];
+    const index = isString(position) ? Object.entries(numToLetterMap).find(
+      ([, value2]) => value2 === position
+    )?.[0] : position;
+    if (!letterKey) {
+      console.warn(`Position ${position} is out of range in numToLetterMap`);
+      return null;
+    }
+    const result = {
+      sequence: {},
+      scales: {},
+      vars: {},
+      ...sequenceProps
+    };
+    const value = base * Math.pow(ratio, index);
+    const scaling = ~~(value / base * 100) / 100;
+    const prefix = "--" + (type && type.replace(".", "-")) + "-";
+    const variable = prefix + letterKey;
+    const scalingVariable = setScalingVar(index, sequenceProps);
+    const props = {
+      key: letterKey,
+      variable,
+      value,
+      base,
+      scaling,
+      scalingVariable,
+      ratio,
+      index
+    };
+    setSequenceValue(props, result);
+    if (subSequence) {
+      generateSubSequence(props, result);
+    }
+    return result;
+  };
+  var getSequenceValue = (value = "A", sequenceProps) => {
+    const CONFIG2 = getActiveConfig();
+    const { UNIT: UNIT2 } = CONFIG2;
+    if (isString(value) && isCSSVar(value)) return `var(${value})`;
+    const { sequence, unit = UNIT2.default, useVariable } = sequenceProps;
+    const startsWithDashOrLetterRegex = /^-?[a-zA-Z]/i;
+    const startsWithDashOrLetter = startsWithDashOrLetterRegex.test(value);
+    const hasUnits = CSS_UNITS.some((unit2) => value.includes(unit2));
+    if (hasUnits || !startsWithDashOrLetter) return value;
+    const skipArr = [
+      "none",
+      "auto",
+      "max-content",
+      "min-content",
+      "fit-content",
+      "inherit",
+      "initial",
+      "unset",
+      "revert",
+      "revert-layer"
+    ];
+    if (skipArr.includes(value)) return value;
+    const prefix = `--${toDashCase(sequenceProps.type.replace(".", "-"))}-`;
+    const letterVal = value.toUpperCase();
+    const isNegative = letterVal.slice(0, 1) === "-" ? "-" : "";
+    let absValue = isNegative ? letterVal.slice(1) : letterVal;
+    let mediaName = "";
+    if (absValue.includes("_")) {
+      mediaName = "_" + absValue.split("_")[1].toLowerCase();
+      absValue = absValue.split("_")[0];
+    }
+    const varValue = (v) => startsWithDashOrLetterRegex.test(v) ? `var(${prefix}${v}${mediaName})` : v;
+    if (absValue.includes("+")) {
+      const [first, second] = absValue.split("+");
+      const joint = `${varValue(first)} + ${varValue(second)}`;
+      return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
+    } else if (absValue.includes("*")) {
+      const [first, second] = absValue.split("*");
+      const joint = `${varValue(first)} * ${varValue(second)}`;
+      return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
+    } else if (absValue.includes("-")) {
+      const [first, second] = absValue.split("-");
+      const joint = `${varValue(first)} - ${varValue(second)}`;
+      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"
+        );
+      absValue = absValue.slice(0, 1);
+    }
+    if (useVariable || CONFIG2.useVariable) {
+      const varValue2 = `var(${prefix}${absValue}${mediaName})`;
+      return isNegative ? `calc(${varValue2} * -1)` : varValue2;
+    }
+    const sequenceItem = sequence ? sequence[absValue] : null;
+    if (!sequenceItem) return console.warn("can't find", sequence, absValue);
+    if (unit === "ms" || unit === "s") {
+      return isNegative + sequenceItem.val + unit;
+    }
+    return isNegative + sequenceItem.scaling + unit;
+  };
+  var getSequenceValueBySymbols = (value, sequenceProps) => {
+    const mathArr = ["+", "-", "*", "/", ","].filter(
+      (v) => value.includes(v + " ")
+    );
+    if (!mathArr.length) return value;
+    return mathArr.map((symbol) => {
+      const valuesArr = value.split(symbol + " ").map((v) => v.trim());
+      const transformedValues = valuesArr.map((v) => {
+        return getSequenceValue(v, sequenceProps);
+      });
+      return transformedValues.join(" " + symbol + " ");
+    }).join("");
+  };
+  var getSequenceValuePropertyPair = (value, propertyName, sequenceProps, fnPrefix) => {
+    if (typeof value !== "string") {
+      const CONFIG2 = getActiveConfig();
+      if (CONFIG2.verbose) console.warn(propertyName, value, "is not a string");
+      return { [propertyName]: value };
+    }
+    if (value === "-" || value === "") return {};
+    if (!fnPrefix && value.includes("(")) {
+      const fnArr = getFnPrefixAndValue(value);
+      fnPrefix = fnArr[0];
+      value = fnArr[1];
+    }
+    const mathArr = ["+", "-", "*", "/", ","].filter(
+      (v) => value.includes(v + " ")
+    );
+    if (mathArr.length) {
+      value = getSequenceValueBySymbols(value, sequenceProps);
+    } else value = getSequenceValue(value, sequenceProps);
+    return { [propertyName]: fnPrefix ? `${fnPrefix}(${value})` : value };
+  };
+  var findHeadingLetter = (h1Matches, index) => numToLetterMap[h1Matches - index];
+  var findHeadings = (propertyNames) => {
+    const { h1Matches, sequence } = propertyNames;
+    return new Array(6).fill(null).map((_, i) => {
+      const findLetter = findHeadingLetter(h1Matches, i);
+      return sequence[findLetter];
+    });
+  };
+
+  // src/utils/var.js
+  var setVariables = (result, key) => {
+    const CONFIG2 = getActiveConfig();
+    const { CSS_VARS: CSS_VARS2 } = CONFIG2;
+    if (isObjectLike(result.value)) {
+    } else {
+      CSS_VARS2[result.var] = result.value;
+    }
+  };
+  var applySequenceGlobalVars = (vars, obj, options) => {
+    const CONFIG2 = getActiveConfig();
+    const { UNIT: UNIT2 } = CONFIG2;
+    const unit = obj.unit || UNIT2.default;
+    const { base, ratio, type } = obj;
+    const prefix = "--" + (type && type.replace(".", "-"));
+    vars[`${prefix}-base`] = base;
+    vars[`${prefix}-unit`] = unit;
+    const ratioVar = `${prefix}-ratio`;
+    vars[ratioVar] = ratio;
+    const [first, middle, second] = getSubratio(base, ratio);
+    vars[`${prefix}-sub-ratio-1`] = `calc(var(${prefix}-ratio) * ${first / ratio})`;
+    vars[`${prefix}-sub-ratio-2`] = `calc(var(${prefix}-ratio) * ${middle / ratio})`;
+    vars[`${prefix}-sub-ratio-3`] = `calc(var(${prefix}-ratio) * ${second / ratio})`;
+  };
+  var applySequenceVars = (FACTORY2, options = {}) => {
+    const CONFIG2 = getActiveConfig();
+    const { UNIT: UNIT2, TIMING: TIMING2, CSS_VARS: CSS_VARS2 } = CONFIG2;
+    const unit = FACTORY2.unit || UNIT2.default;
+    const { mediaRegenerate, sequence, scales } = FACTORY2;
+    if (!mediaRegenerate) {
+      applySequenceGlobalVars(CSS_VARS2, FACTORY2, options);
+    }
+    for (const key in sequence) {
+      const item = sequence[key];
+      const value = (FACTORY2.type === TIMING2.type ? sequence[key].val : scales[key]) + unit;
+      if (!mediaRegenerate) {
+        CSS_VARS2[item.variable + "_default"] = value;
+        CSS_VARS2[item.variable] = item.scalingVariable;
+        continue;
+      }
+      if (options.useDefault === false) {
+        CSS_VARS2[item.variable] = value;
+      } else {
+        CSS_VARS2[item.variable + "_default"] = value;
+        CSS_VARS2[item.variable] = `var(${item.variable + "_default"})`;
+      }
+    }
+  };
+  var applyMediaSequenceVars = (FACTORY2, media, options = {}) => {
+    const CONFIG2 = getActiveConfig();
+    const { UNIT: UNIT2, MEDIA: MEDIA2, CSS_VARS: CSS_VARS2 } = CONFIG2;
+    const mediaName = media.slice(1);
+    const unit = FACTORY2.unit || UNIT2.default;
+    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 (!mediaRegenerate) {
+      let 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);
+      let 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;
+    }
+  };
+
+  // src/utils/sprite.js
+  var isDev = isNotProduction();
+  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;
+      sprite += icons[key];
+    }
+    return sprite;
+  };
+  var parseRootAttributes = (htmlString) => {
+    const val = htmlString.default || htmlString;
+    if (!isString(val)) {
+      if (isDev) console.warn("parseRootAttributes:", val, "is not a string");
+      return;
+    }
+    const match = val.match(/<svg\s+(.*?)>/);
+    if (!match || !match[1]) {
+      return {};
+    }
+    const attrString = match[1];
+    const attrs = attrString.match(
+      /(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gm
+    );
+    return attrs.reduce((acc, attr) => {
+      const [key, value] = attr.split("=");
+      acc[key] = value.replace(/['"]/g, "");
+      return acc;
+    }, {});
+  };
+  var replaceIdsAndUrls = (code, key) => {
+    const idRegex = /id="([^"]*)"/;
+    const urlRegex = /url\(#([^)]*)\)/g;
+    const matches = code.match(/id="([^"]*)"/g);
+    let replacedCode = code;
+    if (isArray(matches)) {
+      matches.forEach(() => {
+        const randomKey = Math.floor(Math.random() * 1e5);
+        replacedCode = code.replace(idRegex, `id="${key}-${randomKey}"`).replace(urlRegex, `url(#${key}-${randomKey})`);
+      });
+    }
+    return replacedCode;
+  };
+  var convertSvgToSymbol = (key, code) => {
+    const extractAttrs = parseRootAttributes(code);
+    const { width, height } = extractAttrs;
+    const viewBox = extractAttrs.viewBox || `0 0 ${width || 24} ${height || 24}`;
+    const xmlns = "http://www.w3.org/2000/svg";
+    const replacedCode = replaceIdsAndUrls(code, key);
+    let symbol = replacedCode.replace(
+      "<svg",
+      `<symbol id="${key}" xmlns="${xmlns}" viewBox="${viewBox}"`
+    );
+    symbol = symbol.replace(/width="[^"]*"/, "");
+    symbol = symbol.replace(/height="[^"]*"/, "");
+    symbol = symbol.replace("</svg", "</symbol");
+    return symbol;
+  };
+
+  // src/system/index.js
+  var system_exports = {};
+  __export(system_exports, {
+    appendSVGSprite: () => appendSVGSprite,
+    appendSvgIconsSprite: () => appendSvgIconsSprite,
+    applyDocument: () => applyDocument,
+    applyHeadings: () => applyHeadings,
+    applyReset: () => applyReset,
+    applySpacingSequence: () => applySpacingSequence,
+    applyTimingSequence: () => applyTimingSequence,
+    applyTypographySequence: () => applyTypographySequence,
+    checkIfBoxSize: () => checkIfBoxSize,
+    getColor: () => getColor,
+    getFontFamily: () => getFontFamily,
+    getFontSizeByKey: () => getFontSizeByKey,
+    getMediaColor: () => getMediaColor,
+    getMediaTheme: () => getMediaTheme,
+    getShadow: () => getShadow,
+    getSpacingBasedOnRatio: () => getSpacingBasedOnRatio,
+    getSpacingByKey: () => getSpacingByKey,
+    getTheme: () => getTheme,
+    getTimingByKey: () => getTimingByKey,
+    getTimingFunction: () => getTimingFunction,
+    runThroughMedia: () => runThroughMedia,
+    setColor: () => setColor,
+    setFont: () => setFont,
+    setFontFamily: () => setFontFamily,
+    setGradient: () => setGradient,
+    setMediaTheme: () => setMediaTheme,
+    setSVG: () => setSVG,
+    setShadow: () => setShadow,
+    setSvgIcon: () => setSvgIcon,
+    setTheme: () => setTheme,
+    splitSpacedValue: () => splitSpacedValue
+  });
+
+  // src/system/color.js
+  var getColor = (value, key, config) => {
+    const CONFIG2 = config || getActiveConfig();
+    if (!isString(value)) {
+      if (CONFIG2.verbose) console.warn(value, "- type for color is not valid");
+      return;
+    }
+    if (isCSSVar(value)) return `var(${value})`;
+    if (key && value[key]) value = value[key];
+    let name, alpha, tone;
+    if (isArray(value)) {
+      [name, alpha, tone] = value;
+    } else {
+      const parsed = parseColorToken(value);
+      if (!parsed) return value;
+      if (parsed.passthrough) return parsed.passthrough;
+      if (parsed.cssVar) return `var(${parsed.cssVar})`;
+      name = parsed.name;
+      alpha = parsed.alpha;
+      tone = parsed.tone;
+    }
+    const { COLOR: COLOR2, GRADIENT: GRADIENT2 } = CONFIG2;
+    let val = COLOR2[name] || GRADIENT2[name];
+    if (!val) {
+      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);
+    }
+    let rgb = val.rgb;
+    if (!rgb) {
+      return CONFIG2.useVariable ? `var(${val.var})` : val.value;
+    }
+    if (tone && !val[tone]) {
+      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 (tone) return `rgba(${rgb}, 1)`;
+    return CONFIG2.useVariable ? `var(${val.var})` : `rgb(${rgb})`;
+  };
+  var getMediaColor = (value, globalTheme, config) => {
+    const CONFIG2 = config || getActiveConfig();
+    if (!globalTheme) globalTheme = CONFIG2.globalTheme === "auto" ? null : CONFIG2.globalTheme;
+    if (!isString(value)) {
+      if (CONFIG2.verbose) console.warn(value, "- type for color is not valid");
+      return;
+    }
+    if (isCSSVar(value)) return `var(${value})`;
+    let name;
+    if (isArray(value)) {
+      name = value[0];
+    } else {
+      const parsed = parseColorToken(value);
+      if (!parsed) return value;
+      if (parsed.passthrough) return parsed.passthrough;
+      if (parsed.cssVar) return `var(${parsed.cssVar})`;
+      name = parsed.name;
+    }
+    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);
+    else if (isObj) {
+      if (globalTheme) return getColor(value, `@${globalTheme}`, config);
+      else {
+        const obj = {};
+        for (const mediaName in val) {
+          const query = CONFIG2.MEDIA[mediaName.slice(1)];
+          const media = "@media " + (query === "print" ? `${query}` : `screen and ${query}`);
+          obj[media] = getColor(value, mediaName, config);
+        }
+        return obj;
+      }
+    } else {
+      if (CONFIG2.verbose) console.warn("Can't find color", value);
+      return value;
+    }
+  };
+  var setColor = (val, key, suffix) => {
+    const CONFIG2 = getActiveConfig();
+    if (isString(val) && isCSSVar(val)) {
+      const rawRef = val.slice(2);
+      val = getColor(rawRef);
+      if (!(val.includes("rgb") || val.includes("var") || val.includes("#"))) {
+        const parts = rawRef.split(" ");
+        const refColor = CONFIG2.COLOR[parts[0]];
+        if (refColor && refColor.value) {
+          if (parts[1] !== void 0) {
+            val = `rgba(${refColor.rgb}, ${parts[1]})`;
+          } else {
+            val = refColor.value;
+          }
+        } else {
+          if (CONFIG2.verbose) console.warn(val, "- referred but does not exist");
+          val = parts[0];
+        }
+      }
+    }
+    if (isArray(val)) {
+      return {
+        "@light": setColor(val[0], key, "light"),
+        "@dark": setColor(val[1], key, "dark")
+      };
+    }
+    if (isObject(val)) {
+      const obj = {};
+      for (const variant in val) {
+        obj[variant] = setColor(
+          val[variant],
+          key,
+          variant.slice(0, 1) === "@" ? variant.slice(1) : variant
+        );
+      }
+      return obj;
+    }
+    const CSSVar = `--color-${key}` + (suffix ? `-${suffix}` : "");
+    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})`;
+    if (CONFIG2.useVariable) {
+      CONFIG2.CSS_VARS[CSSVar] = value;
+    }
+    return {
+      var: CSSVar,
+      rgb,
+      alpha,
+      value
+    };
+  };
+  var setGradient = (val, key, suffix) => {
+    const CONFIG2 = getActiveConfig();
+    if (isString(val) && isCSSVar(val)) val = getColor(val.slice(2));
+    if (isArray(val)) {
+      return {
+        "@light": setGradient(val[0], key, "light"),
+        "@dark": setGradient(val[0], key, "dark")
+      };
+    }
+    if (isObject(val)) {
+      const obj = {};
+      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}` : "");
+    if (CONFIG2.useVariable) {
+      CONFIG2.CSS_VARS[CSSVar] = val.value || val;
+    }
+    return {
+      var: CSSVar,
+      value: val.value || val
+    };
+  };
+
+  // src/system/theme.js
+  var setThemeValue = (theme) => {
+    const value = {};
+    const { state, media, helpers, ...rest } = theme;
+    const keys = Object.keys(rest);
+    keys.map((key) => {
+      const conditions = ["color", "Color", "background", "border"];
+      const isColor = conditions.some((k) => key.includes(k));
+      return value[key] = isColor ? getColor(theme[key]) : theme[key];
+    });
+    return value;
+  };
+  var getThemeValue = (theme) => {
+    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);
+    const { THEME: THEME2 } = CONFIG2;
+    if (isString(value)) {
+      const [theme, subtheme] = value.split(" ");
+      const isOurTheme = THEME2[theme];
+      if (isOurTheme) {
+        if (!subtheme && !modifier) return getThemeValue(isOurTheme);
+        value = [theme, subtheme || modifier];
+      }
+    }
+    if (isObjectLike(value) && value[1]) {
+      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);
+  };
+  var setInverseTheme = (theme, variant, value) => {
+    if (isObject(variant)) {
+      theme.variants.inverse.value = setThemeValue(variant);
+    } else if (variant === true) {
+      const { color, background } = value;
+      theme.variants.inverse = {
+        value: {
+          color: background,
+          background: color
+        }
+      };
+    }
+  };
+  var setPseudo = (theme, key, variant, themeValue) => {
+    const result = getTheme(variant);
+    themeValue[`&:${key}`] = result;
+    if (isObject(variant) && !variant.value) variant.value = result;
+  };
+  var setSelectors = (theme, value) => {
+    const { state } = theme;
+    if (!state) return;
+    const keys = Object.keys(state);
+    keys.map((key) => {
+      const variant = state[key];
+      setPseudo(theme, key, variant, value);
+      return theme;
+    });
+    return theme;
+  };
+  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;
+  };
+  var setMedia = (theme, value) => {
+    const { media } = theme;
+    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);
+      return theme;
+    });
+    return theme;
+  };
+  var setHelpers = (theme, value) => {
+    const CONFIG2 = getActiveConfig();
+    const { helpers } = theme;
+    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]);
+      return theme;
+    });
+    return theme;
+  };
+  var setTheme = (val, key) => {
+    const CONFIG2 = getActiveConfig();
+    if (CONFIG2.useVariable) return setMediaTheme(val, key);
+    const { state, media, helpers } = val;
+    const value = setThemeValue(val, key);
+    const CSSvar = `--theme-${key}`;
+    setSelectors(val, value);
+    setMedia(val, value);
+    setHelpers(val, value);
+    return { var: CSSvar, value, state, media, helpers };
+  };
+  var setMediaTheme = (val, key, suffix, prefers) => {
+    const CONFIG2 = getActiveConfig();
+    const { CSS_VARS: CSS_VARS2 } = CONFIG2;
+    const theme = { value: val };
+    if (isObjectLike(val)) {
+      for (const param in val) {
+        const symb = param.slice(0, 1);
+        const value = val[param];
+        if (symb === "@" || symb === ":" || symb === ".") {
+          const hasPrefers = symb === "@" && param;
+          theme[param] = setMediaTheme(value, key, param, prefers || hasPrefers);
+        } else {
+          const color = getColor(value, prefers);
+          const metaSuffixes = [...new Set([prefers, suffix].filter((v) => v).map((v) => v.slice(1)))];
+          const varmetaSuffixName = metaSuffixes.length ? "-" + metaSuffixes.join("-") : "";
+          const CSSVar = `--theme-${key}${varmetaSuffixName}-${param}`;
+          if (CONFIG2.useVariable) {
+            CSS_VARS2[CSSVar] = color;
+            theme[param] = `var(${CSSVar})`;
+          } else {
+            theme[param] = color;
+          }
+          theme[`.${param}`] = { [param]: theme[param] };
+        }
+      }
+      if (theme.background || theme.color || theme.backgroundColor) {
+        theme[".inversed"] = {
+          color: theme.background || theme.backgroundColor,
+          background: theme.color
+        };
+      }
+    }
+    if (isString(val) && isCSSVar(val)) {
+      const { THEME: THEME2 } = CONFIG2;
+      const value = THEME2[val.slice(2)];
+      const getReferenced = getMediaTheme(value, prefers);
+      return getReferenced;
+    }
+    return theme;
+  };
+  var recursiveTheme = (val) => {
+    const CONFIG2 = getActiveConfig();
+    const obj = {};
+    for (const param in val) {
+      const symb = param.slice(0, 1);
+      if (isObjectLike(val[param])) {
+        if (symb === "@") {
+          const query = CONFIG2.MEDIA[param.slice(1)];
+          const media = "@media " + (query === "print" ? `${query}` : `screen and ${query}`);
+          obj[media] = recursiveTheme(val[param]);
+        } else if (symb === ":") {
+          obj[`&${param}`] = recursiveTheme(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);
+    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;
+  };
+  var getMediaTheme = (value, modifier) => {
+    const activeConfig = getActiveConfig();
+    if (isString(value) && isCSSVar(value)) {
+      value = getMediaTheme(value.slice(2));
+    }
+    if (!value || !isString(value)) {
+      if (activeConfig.verbose) {
+        console.warn(`${value} - Theme is not a string`);
+      }
+      return;
+    }
+    const [themeName, ...themeModifiers] = isArray(value) ? value : value.split(" ");
+    let themeValue = activeConfig.THEME[themeName];
+    if (themeValue && (themeModifiers || modifier)) {
+      themeValue = findModifier(themeValue, themeModifiers.length ? themeModifiers : modifier);
+    }
+    const resolvedTheme = recursiveTheme(themeValue);
+    return resolvedTheme;
+  };
+
+  // src/system/font.js
+  var setFont = (val, key) => {
+    const CSSvar = `--font-${key}`;
+    if (!val || isArray(val) && !val[0]) return;
+    let fontFace;
+    if (val.isVariable) {
+      if (isGoogleFontsUrl(val.url)) {
+        fontFace = setFontImport(val.url);
+      } else {
+        fontFace = setCustomFontMedia(key, val.url, val.fontWeight, {
+          fontStretch: val.fontStretch,
+          fontDisplay: val.fontDisplay || "swap"
+        });
+      }
+    } else if (val[0]) {
+      fontFace = getFontFaceEach(key, val);
+    } else {
+      fontFace = setCustomFontMedia(key, val.url);
+    }
+    return { var: CSSvar, value: val, fontFace };
+  };
+  var getFontFamily = (key, factory) => {
+    const CONFIG2 = getActiveConfig();
+    const { FONT_FAMILY: FONT_FAMILY2 } = CONFIG2;
+    return getDefaultOrFirstKey(factory || FONT_FAMILY2, key);
+  };
+  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 = arrayzeValue(value);
+    const CSSvar = `--font-family-${key}`;
+    const str = `${value.join(", ")}, ${FONT_FAMILY_TYPES2[type]}`;
+    return { var: CSSvar, value: str, arr: value, type };
+  };
+
+  // src/system/typography.js
+  var runThroughMedia = (FACTORY2) => {
+    const CONFIG2 = getActiveConfig();
+    const { TYPOGRAPHY: TYPOGRAPHY2, MEDIA: MEDIA2 } = CONFIG2;
+    for (const prop in FACTORY2) {
+      const isPropMedia = prop.slice(0, 1) === "@";
+      const mediaValue = FACTORY2[prop];
+      if (!isPropMedia) continue;
+      const { mediaRegenerate } = FACTORY2;
+      const mediaName = prop.slice(1);
+      const { type, base, ratio, range, subSequence, h1Matches, unit } = FACTORY2;
+      merge(mediaValue, {
+        type,
+        base,
+        ratio,
+        range,
+        subSequence,
+        h1Matches,
+        unit
+      });
+      const query = MEDIA2[mediaName];
+      const media = "@media " + (query === "print" ? `${query}` : `screen and ${query}`);
+      TYPOGRAPHY2.templates[media] = {
+        fontSize: mediaValue.base / TYPOGRAPHY2.browserDefault + unit
+      };
+      if (!mediaRegenerate) {
+        applyMediaSequenceVars(FACTORY2, prop);
+        continue;
+      }
+      merge(mediaValue, {
+        sequence: {},
+        scales: {},
+        templates: {},
+        vars: {}
+      });
+      generateSequence(mediaValue);
+      applyMediaSequenceVars(FACTORY2, prop);
+    }
+  };
+  var applyHeadings = (props) => {
+    const CONFIG2 = getActiveConfig();
+    if (props.h1Matches) {
+      const unit = props.unit;
+      const HEADINGS = findHeadings(props);
+      const { templates } = props;
+      for (const k in HEADINGS) {
+        const headerName = `h${parseInt(k) + 1}`;
+        const headerStyle = templates[headerName];
+        templates[headerName] = {
+          fontSize: CONFIG2.useVariable ? `var(${HEADINGS[k]?.variable})` : `${HEADINGS[k]?.scaling}${unit}`,
+          margin: headerStyle ? headerStyle.margin : 0,
+          lineHeight: headerStyle ? headerStyle.lineHeight : props.lineHeight,
+          letterSpacing: headerStyle ? headerStyle.letterSpacing : props.letterSpacing,
+          fontWeight: headerStyle ? headerStyle.fontWeight : 900 - k * 100
+        };
+      }
+    }
+  };
+  var applyTypographySequence = () => {
+    const CONFIG2 = getActiveConfig();
+    const { TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG2;
+    generateSequence(TYPOGRAPHY2);
+    applyHeadings(TYPOGRAPHY2);
+    applySequenceVars(TYPOGRAPHY2);
+    runThroughMedia(TYPOGRAPHY2);
+  };
+  var getFontSizeByKey = (value) => {
+    const CONFIG2 = getActiveConfig();
+    const { TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG2;
+    return getSequenceValuePropertyPair(value, "fontSize", TYPOGRAPHY2);
+  };
+
+  // src/system/spacing.js
+  var runThroughMedia2 = (FACTORY2) => {
+    for (const prop in FACTORY2) {
+      const mediaProps = FACTORY2[prop];
+      const isMediaName = prop.slice(0, 1) === "@";
+      if (!isMediaName) continue;
+      const { type, base, ratio, range, subSequence, h1Matches, unit } = FACTORY2;
+      merge(mediaProps, {
+        type,
+        base,
+        ratio,
+        range,
+        subSequence,
+        h1Matches,
+        unit,
+        sequence: {},
+        scales: {},
+        templates: {},
+        vars: {}
+      });
+      generateSequence(mediaProps);
+      applyMediaSequenceVars(FACTORY2, prop);
+    }
+  };
+  var checkIfBoxSize = (propertyName) => {
+    const prop = propertyName.toLowerCase();
+    const includesWidth = prop.includes("width") || prop.includes("height");
+    const includesBorder = prop.includes("border") || prop.includes("outline");
+    return includesWidth && !includesBorder;
+  };
+  var applySpacingSequence = () => {
+    const CONFIG2 = getActiveConfig();
+    const { SPACING: SPACING2 } = CONFIG2;
+    generateSequence(SPACING2);
+    applySequenceVars(SPACING2);
+    runThroughMedia2(SPACING2);
+  };
+  var getSequence = (sequenceProps) => {
+    const CONFIG2 = getActiveConfig();
+    const { SPACING: SPACING2 } = CONFIG2;
+    if (!sequenceProps || !sequenceProps.sequence) return SPACING2;
+    const hasGenerated = Object.keys(sequenceProps.sequence).length > 0;
+    return hasGenerated ? sequenceProps : generateSequence(sequenceProps);
+  };
+  var getSpacingByKey = (value, propertyName = "padding", sequenceProps, fnPrefix) => {
+    const sequence = getSequence(sequenceProps);
+    if (isString(value)) {
+      if (!fnPrefix && value.includes("(")) {
+        const fnArray = getFnPrefixAndValue(value);
+        fnPrefix = fnArray[0];
+        value = fnArray[1];
+      }
+    }
+    const stack = fnPrefix ? [value] : arrayzeValue(value);
+    if (!isArray(stack)) return;
+    if (stack.length > 1) {
+      let suffix = "";
+      if (propertyName === "borderWidth") {
+        propertyName = "border";
+        suffix = "Width";
+      }
+      const directions = {
+        2: ["Block", "Inline"],
+        3: ["BlockStart", "Inline", "BlockEnd"],
+        4: ["BlockStart", "InlineEnd", "BlockEnd", "InlineStart"]
+      };
+      const wrapSequenceValueByDirection = (direction, i) => getSequenceValuePropertyPair(
+        stack[i],
+        propertyName + direction + suffix,
+        sequence,
+        fnPrefix
+      );
+      return directions[stack.length].map(
+        (dir, key) => wrapSequenceValueByDirection(dir, key)
+      );
+    }
+    return getSequenceValuePropertyPair(value, propertyName, sequence, fnPrefix);
+  };
+  var getSpacingBasedOnRatio = (props, propertyName, val, fnPrefix) => {
+    const CONFIG2 = getActiveConfig();
+    const { SPACING: SPACING2 } = CONFIG2;
+    let value = val || props[propertyName];
+    if (!fnPrefix && isString(value) && value.includes("(")) {
+      const fnArr = getFnPrefixAndValue(value);
+      fnPrefix = fnArr[0];
+      value = fnArr[1];
+    }
+    if (props.spacingRatio) {
+      const sequenceProps = applyCustomSequence(props);
+      return getSpacingByKey(value, propertyName, sequenceProps, fnPrefix);
+    }
+    return getSpacingByKey(value, propertyName, SPACING2, fnPrefix);
+  };
+  var splitSpacedValue = (val) => {
+    const addDefault = (v) => {
+      const isSymbol = ["+", "-", "*", "/"].includes(v);
+      const hasUnits = CSS_UNITS.some((unit) => val.includes(unit));
+      if (isSymbol || hasUnits) return v;
+      const isSingleLetter = v.length < 3 && /[A-Z]/.test(v);
+      if (isSingleLetter) return v + "_default";
+      return v;
+    };
+    return val.split(",").map((v) => v.trim()).map(addDefault).join(",").split(" ").map(addDefault).join(" ");
+  };
+
+  // src/system/shadow.js
+  var setShadow = (value, key, suffix, prefers) => {
+    const CONFIG2 = getActiveConfig();
+    if (isArray(value)) {
+      return {
+        "@light": setShadow(value[0], key, "light"),
+        "@dark": setShadow(value[1], key, "dark")
+      };
+    }
+    if (isObject(value)) {
+      const obj = {};
+      for (const variant in value) {
+        obj[variant] = setShadow(
+          value[variant],
+          key,
+          variant.startsWith("@") ? variant.slice(1) : variant
+        );
+      }
+      return obj;
+    }
+    if (isString(value) && !CSS_NATIVE_COLOR_REGEX.test(value)) {
+      value = splitTopLevelCommas(value).map((shadow) => {
+        shadow = shadow.trim();
+        return shadow.split(/\s+/).map((v) => {
+          v = v.trim();
+          if (!v) return "";
+          if (v.startsWith("--")) return `var(${v})`;
+          const color = getColor(v);
+          if (isResolvedColor(color)) return color;
+          if (/^\d/.test(v) || v === "0" || v.includes("px") || v.slice(-2) === "em") return v;
+          if (v === "inset" || v === "none") return v;
+          const spacing = getSpacingByKey(v, "shadow");
+          if (spacing && spacing.shadow) return spacing.shadow;
+          return v;
+        }).join(" ");
+      }).join(", ");
+    }
+    const CSSVar = `--shadow-${key}` + (suffix ? `-${suffix}` : "");
+    if (CONFIG2.useVariable) {
+      CONFIG2.CSS_VARS[CSSVar] = value;
+    }
+    return {
+      var: CSSVar,
+      value
+    };
+  };
+  var getShadow = (value, globalTheme) => {
+    const CONFIG2 = getActiveConfig();
+    if (!globalTheme) globalTheme = CONFIG2.globalTheme;
+    if (!isString(value)) {
+      if (CONFIG2.verbose) console.warn(value, "- type for color is not valid");
+      return;
+    }
+    if (isCSSVar(value)) 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);
+      return value;
+    }
+    if (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) {
+      const obj = {};
+      for (const mediaName in val) {
+        const query = CONFIG2.MEDIA[mediaName.slice(1)];
+        const media = "@media " + (query === "print" ? `${query}` : `screen and ${query}`);
+        obj[media] = val.value;
+      }
+      return obj;
+    }
+    if (CONFIG2.verbose) console.warn("Can't find color", value);
+    return value;
+  };
+
+  // src/system/timing.js
+  var applyTimingSequence = () => {
+    const CONFIG2 = getActiveConfig();
+    const { TIMING: TIMING2 } = CONFIG2;
+    generateSequence(TIMING2);
+    applySequenceVars(TIMING2);
+  };
+  var getTimingFunction = (value) => {
+    const CONFIG2 = getActiveConfig();
+    const { TIMING: TIMING2 } = CONFIG2;
+    return TIMING2[value] || TIMING2[toCamelCase(value)] || value;
+  };
+  var getTimingByKey = (value, property = "timing") => {
+    const CONFIG2 = getActiveConfig();
+    const { TIMING: TIMING2 } = CONFIG2;
+    return getSequenceValuePropertyPair(
+      value,
+      property,
+      TIMING2
+    );
+  };
+
+  // src/system/document.js
+  var applyDocument = () => {
+    const CONFIG2 = getActiveConfig();
+    const { DOCUMENT: DOCUMENT2, FONT_FAMILY: FONT_FAMILY2, THEME: THEME2, TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG2;
+    return merge(DOCUMENT2, {
+      theme: THEME2.document,
+      fontFamily: getDefaultOrFirstKey(FONT_FAMILY2),
+      fontSize: TYPOGRAPHY2.base,
+      lineHeight: TYPOGRAPHY2.lineHeight
+    });
+  };
+
+  // src/system/svg.js
+  var DEF_OPTIONS = {
+    document: document2
+  };
+  var setSVG = (val, key) => {
+    const CONFIG2 = getActiveConfig();
+    if (!val) {
+      if (CONFIG2.verbose) console.warn("setSVG: val is not defined", key);
+      return;
+    }
+    if (CONFIG2.useSvgSprite) {
+      return convertSvgToSymbol(key, val);
+    }
+    return val;
+  };
+  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];
+    appendSVG(lib, options);
+  };
+  var setSvgIcon = (val, key) => {
+    const CONFIG2 = getActiveConfig();
+    if (CONFIG2.useIconSprite && !CONFIG2.SEMANTIC_ICONS?.[key]) {
+      return setSVG(val, key);
+    }
+    return val;
+  };
+  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];
+    appendSVG(lib, options);
+  };
+  var createSVGSpriteElement = (options = { isRoot: true }) => {
+    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");
+      svgElem.setAttribute("height", "0");
+      svgElem.setAttribute("style", "position:absolute");
+      svgElem.setAttribute("id", "svgSprite");
+    }
+    return svgElem;
+  };
+  var appendSVG = (lib, options = DEF_OPTIONS) => {
+    const CONFIG2 = getActiveConfig();
+    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");
+      }
+      return generateSprite(lib);
+    }
+    const exists = doc.querySelector("#svgSprite");
+    const SVGsprite = generateSprite(lib);
+    if (exists) {
+      const tempSVG = createSVGSpriteElement({ isRoot: false });
+      tempSVG.innerHTML = SVGsprite;
+      exists.append(...tempSVG.children);
+    } else {
+      const svgSpriteDOM = createSVGSpriteElement();
+      if (svgSpriteDOM && svgSpriteDOM.nodeType) {
+        svgSpriteDOM.innerHTML = SVGsprite;
+        doc.body.prepend(svgSpriteDOM);
+      }
+    }
+  };
+
+  // src/system/reset.js
+  var applyReset = (reset = {}) => {
+    const CONFIG2 = getActiveConfig();
+    const { RESET: RESET2, TYPOGRAPHY: TYPOGRAPHY2, DOCUMENT: DOCUMENT2 } = CONFIG2;
+    if (RESET2) {
+      if (RESET2[":root"]) {
+        const configReset = RESET2;
+        const configTemplates = TYPOGRAPHY2.templates;
+        configReset.body = {
+          ...CONFIG2.useDocumentTheme ? getMediaTheme("document", `@${CONFIG2.globalTheme}`) : {},
+          ...configTemplates.body
+        };
+        configReset.h1 = configTemplates.h1;
+        configReset.h2 = configTemplates.h2;
+        configReset.h3 = configTemplates.h3;
+        configReset.h4 = configTemplates.h4;
+        configReset.h5 = configTemplates.h5;
+        configReset.h6 = configTemplates.h6;
+      }
+      const { body, ...templates } = TYPOGRAPHY2.templates;
+      const globalTheme = CONFIG2.useDocumentTheme ? getMediaTheme("document", `@${CONFIG2.globalTheme}`) : {};
+      if (RESET2.html) overwriteDeep(RESET2.html, globalTheme);
+      return deepMerge(merge(RESET2, reset), {
+        html: {
+          position: "absolute",
+          // overflow: 'hidden',
+          width: "100%",
+          height: "100%",
+          top: "0",
+          left: "0",
+          margin: "0",
+          WebkitFontSmoothing: "subpixel-antialiased",
+          scrollBehavior: "smooth",
+          ...globalTheme,
+          fontSize: TYPOGRAPHY2.browserDefault + "px",
+          fontFamily: DOCUMENT2.fontFamily,
+          lineHeight: DOCUMENT2.lineHeight
+        },
+        body: {
+          boxSizing: "border-box",
+          height: "100%",
+          margin: 0,
+          fontFamily: DOCUMENT2.fontFamily,
+          fontSize: TYPOGRAPHY2.base / TYPOGRAPHY2.browserDefault + CONFIG2.UNIT.default,
+          ...templates,
+          ...body
+        },
+        a: {
+          color: "currentColor"
+        },
+        // form elements
+        fieldset: {
+          border: 0,
+          padding: 0,
+          margin: 0
+        },
+        "select, input": {
+          fontFamily: DOCUMENT2.fontFamily
+        }
+      });
+    }
+  };
+
+  // src/transforms/index.js
+  var BORDER_STYLES = /* @__PURE__ */ new Set([
+    "none",
+    "hidden",
+    "dotted",
+    "dashed",
+    "solid",
+    "double",
+    "groove",
+    "ridge",
+    "inset",
+    "outset",
+    "initial"
+  ]);
+  var GRADIENT_KEYWORDS = /* @__PURE__ */ new Set([
+    "to",
+    "top",
+    "bottom",
+    "left",
+    "right",
+    "center",
+    "at",
+    "circle",
+    "ellipse",
+    "closest-side",
+    "farthest-side",
+    "closest-corner",
+    "farthest-corner"
+  ]);
+  var isBorderStyle = (str) => BORDER_STYLES.has(str);
+  var transformBorder = (border) => {
+    const str = border + "";
+    if (CSS_NATIVE_COLOR_REGEX.test(str)) return str;
+    const trimmed = str.trim();
+    if (trimmed === "none" || trimmed === "0" || trimmed === "initial" || trimmed === "inherit" || trimmed === "unset") return str;
+    const tokens = str.split(/\s+/);
+    return tokens.map((v) => {
+      v = v.trim();
+      if (!v) return "";
+      if (isCSSVar(v)) return `var(${v})`;
+      if (isBorderStyle(v)) return v;
+      if (/^\d/.test(v) || v === "0") return v;
+      const color = getColor(v);
+      if (isResolvedColor(color)) return color;
+      const spacing = getSpacingByKey(v, "border");
+      if (spacing && spacing.border) return spacing.border;
+      return v;
+    }).join(" ");
+  };
+  var transformTextStroke = (stroke) => {
+    if (CSS_NATIVE_COLOR_REGEX.test(stroke)) return stroke;
+    return stroke.split(/\s+/).map((v) => {
+      v = v.trim();
+      if (!v) return "";
+      if (isCSSVar(v)) return `var(${v})`;
+      if (/^\d/.test(v) || v.includes("px") || v === "0") return v;
+      const color = getColor(v);
+      if (isResolvedColor(color)) return color;
+      return v;
+    }).join(" ");
+  };
+  var transformShadow = (sh, globalTheme) => getShadow(sh, globalTheme);
+  var transformBoxShadow = (shadows, globalTheme) => {
+    if (CSS_NATIVE_COLOR_REGEX.test(shadows)) return shadows;
+    return splitTopLevelCommas(shadows).map((shadow) => {
+      shadow = shadow.trim();
+      if (!shadow) return "";
+      return shadow.split(/\s+/).map((v) => {
+        v = v.trim();
+        if (!v) return "";
+        if (isCSSVar(v)) return `var(${v})`;
+        if (v === "inset" || v === "none") return v;
+        const color = getColor(v);
+        if (isResolvedColor(color)) {
+          const mediaColor = getMediaColor(v, globalTheme);
+          if (isObject(mediaColor))
+            return Object.values(mediaColor).filter(
+              (c) => c.includes(": " + globalTheme)
+            )[0];
+          return mediaColor;
+        }
+        if (/^\d/.test(v) || v === "0" || v.includes("px") || v.slice(-2) === "em") return v;
+        const spacing = getSpacingByKey(v, "shadow");
+        if (spacing && spacing.shadow) return spacing.shadow;
+        return v;
+      }).join(" ");
+    }).join(", ");
+  };
+  var resolveColorsInGradient = (gradient, globalTheme) => {
+    const parenStart = gradient.indexOf("(");
+    if (parenStart === -1) return gradient;
+    const prefix = gradient.slice(0, parenStart + 1);
+    const inner = gradient.slice(parenStart + 1, gradient.lastIndexOf(")"));
+    const suffix = ")";
+    const segments = splitTopLevelCommas(inner);
+    const resolved = segments.map((segment) => {
+      segment = segment.trim();
+      const tokens = segment.split(/\s+/);
+      return tokens.map((token) => {
+        if (!token) return token;
+        if (/^\d/.test(token) || token === "0") return token;
+        if (GRADIENT_KEYWORDS.has(token)) return token;
+        if (token === "transparent") return token;
+        if (CSS_NATIVE_COLOR_REGEX.test(token)) return token;
+        const color = getColor(token);
+        if (isResolvedColor(color)) return color;
+        return token;
+      }).join(" ");
+    });
+    return prefix + resolved.join(", ") + suffix;
+  };
+  var transformBackgroundImage = (backgroundImage, globalTheme) => {
+    const CONFIG2 = getActiveConfig();
+    return backgroundImage.split(", ").map((v) => {
+      if (isCSSVar(v)) return `var(${v})`;
+      if (v.includes("url")) return v;
+      if (v.includes("gradient")) return resolveColorsInGradient(v, globalTheme);
+      else if (CONFIG2.GRADIENT[backgroundImage]) {
+        return {
+          backgroundImage: getMediaColor(
+            backgroundImage,
+            globalTheme || CONFIG2.globalTheme
+          )
+        };
+      } else if (v.includes("/") || v.startsWith("http") || v.includes(".") && !parseColorToken(v))
+        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;
+    return arr.map((v) => {
+      if (isCSSVar(v)) return `var(${v})`;
+      if (v.length < 3 || v.includes("ms")) {
+        const mapWithSequence = getTimingByKey(v);
+        return mapWithSequence.timing || v;
+      }
+      if (getTimingFunction(v)) return getTimingFunction(v);
+      return v;
+    }).join(" ");
+  };
+  var transformDuration = (duration, props, propertyName) => {
+    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;
+    return arr.map(transformTransition).join(",");
+  };
+  function transformSize(propertyName, val, props = {}, opts = {}) {
+    let value = exec.call(this, val || props[propertyName]);
+    if (value === void 0 || value === null) return;
+    let fnPrefix;
+    if (isString(value)) {
+      if (value.includes("(")) {
+        const fnArr = getFnPrefixAndValue(value);
+        fnPrefix = fnArr[0];
+        value = fnArr[1];
+      }
+      const shouldScaleBoxSize = props.scaleBoxSize;
+      const isBoxSize = checkIfBoxSize(propertyName);
+      if (!shouldScaleBoxSize && isBoxSize) {
+        value = splitSpacedValue(value);
+      }
+    }
+    return opts.ratio ? getSpacingBasedOnRatio(props, propertyName, value, fnPrefix) : getSpacingByKey(value, propertyName, void 0, fnPrefix);
+  }
+  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();
+    return val;
+  };
+  var setSameValue = (val, key) => val;
+  var VALUE_TRANSFORMERS = {
+    color: setColor,
+    gradient: setGradient,
+    font: setFont,
+    font_family: setFontFamily,
+    theme: setTheme,
+    icons: setSvgIcon,
+    semantic_icons: setSameValue,
+    svg: setSVG,
+    svg_data: setSameValue,
+    typography: setSameValue,
+    cases: setCases,
+    shadow: setShadow,
+    spacing: setSameValue,
+    media: setSameValue,
+    grid: setSameValue,
+    class: setSameValue,
+    timing: setSameValue,
+    reset: setSameValue,
+    unit: setSameValue,
+    animation: setSameValue
+  };
+  var setValue = (FACTORY_NAME, value, key) => {
+    const CONFIG2 = getActiveConfig();
+    const factoryName = FACTORY_NAME.toLowerCase();
+    const FACTORY2 = CONFIG2[FACTORY_NAME];
+    if (VALUE_TRANSFORMERS[factoryName]) {
+      try {
+        const result = VALUE_TRANSFORMERS[factoryName](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("Can not find", factoryName, "method in scratch");
+  };
+  var setEach = (factoryName, props) => {
+    const CONFIG2 = getActiveConfig();
+    const FACTORY_NAME = factoryName.toUpperCase();
+    const keys = Object.keys(props);
+    keys.forEach((key) => {
+      try {
+        return setValue(FACTORY_NAME, props[key], key);
+      } catch (error) {
+        if (CONFIG2.verbose) console.warn("Error setting", FACTORY_NAME, "value", props[key], key, error);
+      }
+    });
+    return CONFIG2[FACTORY_NAME];
+  };
+  var SET_OPTIONS = {};
+  var set = (recivedConfig, options = SET_OPTIONS) => {
+    let CONFIG2 = getActiveConfig();
+    const {
+      version,
+      verbose,
+      useVariable,
+      useReset,
+      useSvgSprite,
+      useFontImport,
+      useIconSprite,
+      globalTheme,
+      useDocumentTheme,
+      useDefaultConfig,
+      SEMANTIC_ICONS: SEMANTIC_ICONS2,
+      ...config
+    } = recivedConfig;
+    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 = {};
+    const keys = Object.keys(config);
+    const keySet = new Set(keys);
+    keys.forEach((key) => {
+      const lower = key.toLowerCase();
+      if (lower !== key && keySet.has(lower)) {
+        deepMerge(config[lower], config[key]);
+      }
+    });
+    keys.map((key) => {
+      const lower = key.toLowerCase();
+      if (lower !== key && keySet.has(lower)) return;
+      return setEach(key, config[key]);
+    });
+    if (config.TYPOGRAPHY || config.typography) {
+      try {
+        applyTypographySequence();
+      } catch (e) {
+        if (CONFIG2.verbose) console.warn("Error applying typography sequence", e);
+      }
+    }
+    if (config.SPACING || config.spacing) {
+      try {
+        applySpacingSequence();
+      } catch (e) {
+        if (CONFIG2.verbose) console.warn("Error applying spacing sequence", e);
+      }
+    }
+    if (config.TIMING || config.timing) {
+      try {
+        applyTimingSequence();
+      } catch (e) {
+        if (CONFIG2.verbose) console.warn("Error applying timing sequence", e);
+      }
+    }
+    applyDocument();
+    applyReset();
+    return CONFIG2;
+  };
+  return __toCommonJS(index_exports);
+})();
+// @preserve-env