@symbo.ls/scratch 3.8.9 → 3.14.1

package/dist/iife/index.js

@@ -1,3204 +0,0 @@
-"use strict";
-var SmblsScratch = (() => {
-  var __defProp = Object.defineProperty;
-  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-  var __getOwnPropNames = Object.getOwnPropertyNames;
-  var __hasOwnProp = Object.prototype.hasOwnProperty;
-  var __esm = (fn, res) => function __init() {
-    return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
-  };
-  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);
-
-  // ../utils/dist/esm/globals.js
-  var window2, document2;
-  var init_globals = __esm({
-    "../utils/dist/esm/globals.js"() {
-      window2 = globalThis;
-      document2 = window2.document;
-    }
-  });
-
-  // ../utils/dist/esm/node.js
-  var isDOMNode;
-  var init_node = __esm({
-    "../utils/dist/esm/node.js"() {
-      init_globals();
-      isDOMNode = (obj) => {
-        return typeof window2 !== "undefined" && (window2.Node && obj instanceof window2.Node || window2.Window && obj instanceof window2.Window || obj === window2 || obj === document);
-      };
-    }
-  });
-
-  // ../utils/dist/esm/types.js
-  var isObject, isString, isNumber, isFunction, isArray, isObjectLike, isDefined;
-  var init_types = __esm({
-    "../utils/dist/esm/types.js"() {
-      isObject = (arg) => {
-        if (arg === null) return false;
-        return typeof arg === "object" && arg.constructor === Object;
-      };
-      isString = (arg) => typeof arg === "string";
-      isNumber = (arg) => typeof arg === "number";
-      isFunction = (arg) => typeof arg === "function";
-      isArray = (arg) => Array.isArray(arg);
-      isObjectLike = (arg) => {
-        if (arg === null) return false;
-        return typeof arg === "object";
-      };
-      isDefined = (arg) => arg !== void 0;
-    }
-  });
-
-  // ../utils/dist/esm/array.js
-  var unstackArrayOfObjects;
-  var init_array = __esm({
-    "../utils/dist/esm/array.js"() {
-      init_object();
-      unstackArrayOfObjects = (arr, exclude = []) => {
-        return arr.reduce(
-          (a, c) => deepMerge(a, deepClone(c, { exclude }), exclude),
-          {}
-        );
-      };
-    }
-  });
-
-  // ../utils/dist/esm/string.js
-  var init_string = __esm({
-    "../utils/dist/esm/string.js"() {
-    }
-  });
-
-  // ../utils/dist/esm/keys.js
-  var STATE_METHODS, PROPS_METHODS, METHODS, METHODS_EXL;
-  var init_keys = __esm({
-    "../utils/dist/esm/keys.js"() {
-      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"
-      ]);
-      PROPS_METHODS = /* @__PURE__ */ new Set(["update", "__element"]);
-      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",
-        "getQuery",
-        "getDB",
-        "getChildren"
-      ]);
-      METHODS_EXL = /* @__PURE__ */ new Set([
-        "node",
-        "context",
-        "extends",
-        "__element",
-        "__ref",
-        ...METHODS,
-        ...STATE_METHODS,
-        ...PROPS_METHODS
-      ]);
-    }
-  });
-
-  // ../utils/dist/esm/object.js
-  var _startsWithDunder, exec, merge, deepMerge, deepClone, overwriteDeep;
-  var init_object = __esm({
-    "../utils/dist/esm/object.js"() {
-      init_globals();
-      init_types();
-      init_array();
-      init_node();
-      init_keys();
-      _startsWithDunder = (e) => e.charCodeAt(0) === 95 && e.charCodeAt(1) === 95;
-      exec = (param, element, state, context) => {
-        if (isFunction(param)) {
-          if (!element) return;
-          if (typeof param.call !== "function") return param;
-          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;
-        }
-        if (param != null && element?.context?.plugins && (isArray(param) || isObject(param) && !isDOMNode(param))) {
-          const plugins = element.context.plugins;
-          for (const plugin of plugins) {
-            if (plugin.resolveHandler) {
-              const resolved = plugin.resolveHandler(param, element);
-              if (typeof resolved === "function") {
-                return exec(resolved, element, state, context);
-              }
-            }
-          }
-        }
-        return param;
-      };
-      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;
-      };
-      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;
-      };
-      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;
-      };
-      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/key.js
-  var init_key = __esm({
-    "../utils/dist/esm/key.js"() {
-    }
-  });
-
-  // ../utils/dist/esm/env.js
-  var NODE_ENV, isProduction, isNotProduction;
-  var init_env = __esm({
-    "../utils/dist/esm/env.js"() {
-      NODE_ENV = process.env.NODE_ENV;
-      isProduction = (env = NODE_ENV) => env === "production";
-      isNotProduction = (env = NODE_ENV) => !isProduction(env);
-    }
-  });
-
-  // ../utils/dist/esm/function.js
-  var init_function = __esm({
-    "../utils/dist/esm/function.js"() {
-    }
-  });
-
-  // ../utils/dist/esm/if.js
-  var init_if = __esm({
-    "../utils/dist/esm/if.js"() {
-    }
-  });
-
-  // ../utils/dist/esm/log.js
-  var init_log = __esm({
-    "../utils/dist/esm/log.js"() {
-    }
-  });
-
-  // ../utils/dist/esm/cookie.js
-  var isMobile;
-  var init_cookie = __esm({
-    "../utils/dist/esm/cookie.js"() {
-      isMobile = (() => typeof navigator === "undefined" ? false : /Mobi/.test(navigator.userAgent))();
-    }
-  });
-
-  // ../utils/dist/esm/tags.js
-  var init_tags = __esm({
-    "../utils/dist/esm/tags.js"() {
-    }
-  });
-
-  // ../utils/dist/esm/extends.js
-  var init_extends = __esm({
-    "../utils/dist/esm/extends.js"() {
-    }
-  });
-
-  // ../utils/dist/esm/component.js
-  var init_component = __esm({
-    "../utils/dist/esm/component.js"() {
-    }
-  });
-
-  // ../utils/dist/esm/props.js
-  var init_props = __esm({
-    "../utils/dist/esm/props.js"() {
-    }
-  });
-
-  // ../utils/dist/esm/element.js
-  var init_element = __esm({
-    "../utils/dist/esm/element.js"() {
-    }
-  });
-
-  // ../utils/dist/esm/state.js
-  var init_state = __esm({
-    "../utils/dist/esm/state.js"() {
-    }
-  });
-
-  // ../utils/dist/esm/scope.js
-  var init_scope = __esm({
-    "../utils/dist/esm/scope.js"() {
-    }
-  });
-
-  // ../utils/dist/esm/triggerEvent.js
-  var init_triggerEvent = __esm({
-    "../utils/dist/esm/triggerEvent.js"() {
-    }
-  });
-
-  // ../utils/dist/esm/cache.js
-  var init_cache = __esm({
-    "../utils/dist/esm/cache.js"() {
-    }
-  });
-
-  // ../utils/dist/esm/methods.js
-  var init_methods = __esm({
-    "../utils/dist/esm/methods.js"() {
-    }
-  });
-
-  // ../utils/dist/esm/update.js
-  var init_update = __esm({
-    "../utils/dist/esm/update.js"() {
-    }
-  });
-
-  // ../utils/dist/esm/index.js
-  var init_esm = __esm({
-    "../utils/dist/esm/index.js"() {
-      init_key();
-      init_env();
-      init_types();
-      init_object();
-      init_function();
-      init_array();
-      init_node();
-      init_if();
-      init_log();
-      init_string();
-      init_globals();
-      init_cookie();
-      init_tags();
-      init_component();
-      init_props();
-      init_extends();
-      init_element();
-      init_state();
-      init_keys();
-      init_scope();
-      init_methods();
-      init_cache();
-      init_update();
-      init_triggerEvent();
-    }
-  });
-
-  // src/index.js
-  var index_exports = {};
-  __export(index_exports, {
-    CLASS: () => CLASS,
-    CONFIG: () => CONFIG,
-    CSS_MEDIA_VARS: () => CSS_MEDIA_VARS,
-    CSS_NATIVE_COLOR_REGEX: () => CSS_NATIVE_COLOR_REGEX,
-    CSS_UNITS: () => CSS_UNITS,
-    CSS_VARS: () => CSS_VARS,
-    FACTORY: () => FACTORY,
-    VALUE_TRANSFORMERS: () => VALUE_TRANSFORMERS,
-    activateConfig: () => activateConfig,
-    animation: () => animation,
-    appendSVGSprite: () => appendSVGSprite,
-    appendSvgIconsSprite: () => appendSvgIconsSprite,
-    applyDocument: () => applyDocument,
-    applyHeadings: () => applyHeadings,
-    applyMediaSequenceVars: () => applyMediaSequenceVars,
-    applyReset: () => applyReset,
-    applySequenceGlobalVars: () => applySequenceGlobalVars,
-    applySequenceVars: () => applySequenceVars,
-    applySpacingSequence: () => applySpacingSequence,
-    applyTimingSequence: () => applyTimingSequence,
-    applyTypographySequence: () => applyTypographySequence,
-    breakpoints: () => breakpoints,
-    changeGlobalTheme: () => changeGlobalTheme,
-    changeLightness: () => changeLightness,
-    checkIfBoxSize: () => checkIfBoxSize,
-    color: () => color,
-    colorStringToRgbaArray: () => colorStringToRgbaArray,
-    convertSvgToSymbol: () => convertSvgToSymbol,
-    devices: () => devices,
-    document: () => document3,
-    findHeadingLetter: () => findHeadingLetter,
-    findHeadings: () => findHeadings,
-    font: () => font,
-    font_face: () => font_face,
-    font_family: () => font_family,
-    font_family_types: () => font_family_types,
-    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,
-    gradient: () => gradient,
-    grid: () => grid,
-    hexToRgb: () => hexToRgb,
-    hexToRgbArray: () => hexToRgbArray,
-    hexToRgba: () => hexToRgba,
-    hslToRgb: () => hslToRgb,
-    icons: () => icons,
-    isCSSVar: () => isCSSVar,
-    isGoogleFontsUrl: () => isGoogleFontsUrl,
-    isResolvedColor: () => isResolvedColor,
-    isScalingUnit: () => isScalingUnit,
-    media: () => media,
-    mixTwoColors: () => mixTwoColors,
-    mixTwoRgb: () => mixTwoRgb,
-    mixTwoRgba: () => mixTwoRgba,
-    numToLetterMap: () => numToLetterMap,
-    opacify: () => opacify,
-    parseColorToken: () => parseColorToken,
-    reset: () => reset,
-    resolveColorsInGradient: () => resolveColorsInGradient,
-    resolveFileUrl: () => resolveFileUrl,
-    returnSubThemeOrDefault: () => returnSubThemeOrDefault,
-    rgbArrayToHex: () => rgbArrayToHex,
-    rgbToHSL: () => rgbToHSL,
-    rgbToHex: () => rgbToHex,
-    runThroughMedia: () => runThroughMedia,
-    scratchSystem: () => system_exports,
-    scratchUtils: () => utils_exports,
-    semantic_icons: () => semantic_icons,
-    sequence: () => sequence,
-    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,
-    shadow: () => shadow,
-    spacing: () => spacing,
-    splitSpacedValue: () => splitSpacedValue,
-    splitTopLevelCommas: () => splitTopLevelCommas,
-    splitTransition: () => splitTransition,
-    svg: () => svg,
-    svg_data: () => svg_data,
-    templates: () => templates,
-    theme: () => theme,
-    timing: () => timing,
-    transformBackgroundImage: () => transformBackgroundImage,
-    transformBorder: () => transformBorder,
-    transformBorderRadius: () => transformBorderRadius,
-    transformBoxShadow: () => transformBoxShadow,
-    transformDuration: () => transformDuration,
-    transformShadow: () => transformShadow,
-    transformSize: () => transformSize,
-    transformSizeRatio: () => transformSizeRatio,
-    transformTextStroke: () => transformTextStroke,
-    transformTransition: () => transformTransition,
-    transfromGap: () => transfromGap,
-    typography: () => typography,
-    unit: () => unit,
-    vars: () => vars
-  });
-
-  // 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,
-    resolveFileUrl: () => resolveFileUrl,
-    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 = (unit2) => {
-    return unit2 === "em" || unit2 === "rem" || unit2 === "vw" || unit2 === "vh" || unit2 === "vmax" || unit2 === "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"
-  ];
-
-  // src/utils/color.js
-  init_esm();
-  var colorStringToRgbaArray = (color2) => {
-    if (color2 === "") return [0, 0, 0, 0];
-    if (color2.toLowerCase() === "transparent") return [0, 0, 0, 0];
-    if (color2[0] === "#") {
-      if (color2.length < 7) {
-        color2 = "#" + color2[1] + color2[1] + color2[2] + color2[2] + color2[3] + color2[3] + (color2.length > 4 ? color2[4] + color2[4] : "");
-      }
-      return [
-        parseInt(color2.substr(1, 2), 16),
-        parseInt(color2.substr(3, 2), 16),
-        parseInt(color2.substr(5, 2), 16),
-        color2.length > 7 ? parseInt(color2.substr(7, 2), 16) / 255 : 1
-      ];
-    }
-    if (color2.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 = color2;
-        if (elem.style.color === flag || elem.style.color === "") {
-          document2.body.removeChild(elem);
-          return [0, 0, 0, 0];
-        }
-        color2 = window2.getComputedStyle(elem).color;
-        document2.body.removeChild(elem);
-      }
-    }
-    if (color2.indexOf("rgb") === 0) {
-      if (color2.indexOf("rgba") === -1) color2 = `${color2}, 1`;
-      return color2.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 = (color2, opacity) => {
-    const arr = colorStringToRgbaArray(color2);
-    if (!arr) {
-      if (isNotProduction()) console.warn(color2 + " 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, theme2) => {
-    if (!orig) return;
-    if (orig.themes && orig.themes[theme2]) return orig.themes[theme2];
-    if (orig[theme2]) return [orig, orig[theme2]];
-    return orig;
-  };
-
-  // src/utils/font.js
-  var resolveFileUrl = (url, files) => {
-    if (!url || !files) return null;
-    try {
-      new URL(url);
-      return null;
-    } catch (e) {
-    }
-    const file = files[url];
-    if (file) return file.content && file.content.src;
-    return null;
-  };
-  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 urls = Array.isArray(url) ? url : [url];
-    const srcList = urls.map((u) => {
-      const format = getFontFormat(u);
-      const formatStr = format ? ` format('${format}')` : "";
-      return `url('${u}')${formatStr}`;
-    }).join(",\n       ");
-    return `
-  font-family: '${name}';
-  font-style: ${options.fontStyle || "normal"};${weight ? `
-  font-weight: ${weight};` : ""}${options.fontStretch ? `
-  font-stretch: ${options.fontStretch};` : ""}${options.fontDisplay ? `
-  font-display: ${options.fontDisplay};` : ""}
-  src: ${srcList};`;
-  };
-  var setCustomFontMedia = (name, url, weight, options) => `@font-face {${setCustomFont(name, url, weight, options)}
-}`;
-  var getFontFaceEach = (name, weights, files) => {
-    const keys = Object.keys(weights);
-    return keys.map((key) => {
-      const { url, fontWeight, fontStyle, fontDisplay, fontStretch } = weights[key];
-      const resolvedUrl = Array.isArray(url) ? url.map((u) => resolveFileUrl(u, files) || u) : resolveFileUrl(url, files) || url;
-      return setCustomFont(name, resolvedUrl, fontWeight, { fontStyle, fontDisplay, fontStretch });
-    });
-  };
-  var getFontFace = (LIBRARY) => {
-    const keys = Object.keys(LIBRARY);
-    return keys.map((key) => getFontFaceEach(key, LIBRARY[key].value));
-  };
-  var getFontFaceEachString = (name, weights, files) => {
-    if (weights && weights.isVariable) {
-      const url2 = resolveFileUrl(weights.url, files) || weights.url;
-      if (isGoogleFontsUrl(url2)) {
-        return setFontImport(url2);
-      }
-      return setCustomFontMedia(name, url2, weights.fontWeight, {
-        fontStretch: weights.fontStretch,
-        fontDisplay: weights.fontDisplay || "swap"
-      });
-    }
-    const isArr = weights[0];
-    if (isArr) return getFontFaceEach(name, weights, files).map(setInCustomFontMedia);
-    const url = Array.isArray(weights.url) ? weights.url.map((u) => resolveFileUrl(u, files) || u) : resolveFileUrl(weights.url, files) || weights.url;
-    return setCustomFontMedia(name, url, weights.fontWeight, {
-      fontStyle: weights.fontStyle,
-      fontDisplay: weights.fontDisplay,
-      fontStretch: weights.fontStretch
-    });
-  };
-  var getFontFaceString = (LIBRARY, files) => {
-    const keys = Object.keys(LIBRARY);
-    return keys.map((key) => getFontFaceEachString(key, LIBRARY[key].value, files));
-  };
-
-  // src/utils/sequence.js
-  init_esm();
-
-  // ../smbls-utils/dist/esm/index.js
-  init_esm();
-  var toCamelCase = (str) => {
-    if (typeof str !== "string") str = String(str || "");
-    return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function(word, index) {
-      return index === 0 ? word.toLowerCase() : word.toUpperCase();
-    }).replace(/\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/factory.js
-  init_esm();
-
-  // src/defaultConfig/index.js
-  var defaultConfig_exports = {};
-  __export(defaultConfig_exports, {
-    CLASS: () => CLASS,
-    animation: () => animation,
-    breakpoints: () => breakpoints,
-    color: () => color,
-    devices: () => devices,
-    document: () => document3,
-    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,
-    vars: () => vars
-  });
-
-  // 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 document3 = {};
-
-  // 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/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 = {};
-  var vars = {};
-
-  // src/factory.js
-  var CSS_VARS = {};
-  var CSS_MEDIA_VARS = {};
-  var _CONF = defaultConfig_exports;
-  var _confLower = {};
-  var toCamel = (s) => s.replace(/_([a-z])/g, (_, c) => c.toUpperCase());
-  var toUpper = (s) => s.replace(/([A-Z])/g, "_$1").toUpperCase();
-  for (const key in _CONF) {
-    const lower = key.toLowerCase();
-    _confLower[lower] = _CONF[key];
-    const camel = toCamel(lower);
-    if (camel !== lower) _confLower[camel] = _CONF[key];
-    if (lower !== key) _confLower[key] = _CONF[key];
-    const upper = toUpper(key);
-    if (upper !== key) _confLower[upper] = _CONF[key];
-  }
-  var CONFIG = {
-    verbose: false,
-    useVariable: true,
-    useReset: true,
-    globalTheme: "auto",
-    CSS_VARS,
-    CSS_MEDIA_VARS,
-    ..._confLower
-  };
-  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: unit2 } = sequenceProps;
-    const defaultVal = (isScalingUnit(unit2) ? 1 : base) + unit2;
-    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: UNIT } = CONFIG2;
-    if (isString(value) && isCSSVar(value)) return `var(${value})`;
-    const { sequence: sequence2, unit: unit2 = UNIT.default, useVariable } = sequenceProps;
-    const startsWithDashOrLetterRegex = /^-?[a-zA-Z]/i;
-    const startsWithDashOrLetter = startsWithDashOrLetterRegex.test(value);
-    const hasUnits = CSS_UNITS.some((unit3) => value.includes(unit3));
-    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 (!sequence2[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 = sequence2 ? sequence2[absValue] : null;
-    if (!sequenceItem) return console.warn("can't find", sequence2, absValue);
-    if (unit2 === "ms" || unit2 === "s") {
-      return isNegative + sequenceItem.val + unit2;
-    }
-    return isNegative + sequenceItem.scaling + unit2;
-  };
-  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: sequence2 } = propertyNames;
-    return new Array(6).fill(null).map((_, i) => {
-      const findLetter = findHeadingLetter(h1Matches, i);
-      return sequence2[findLetter];
-    });
-  };
-
-  // src/utils/var.js
-  init_esm();
-  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 = (vars2, obj, options) => {
-    const CONFIG2 = getActiveConfig();
-    const { unit: UNIT } = CONFIG2;
-    const unit2 = obj.unit || UNIT.default;
-    const { base, ratio, type } = obj;
-    const prefix = "--" + (type && type.replace(".", "-"));
-    vars2[`${prefix}-base`] = base;
-    vars2[`${prefix}-unit`] = unit2;
-    const ratioVar = `${prefix}-ratio`;
-    vars2[ratioVar] = ratio;
-    const [first, middle, second] = getSubratio(base, ratio);
-    vars2[`${prefix}-sub-ratio-1`] = `calc(var(${prefix}-ratio) * ${first / ratio})`;
-    vars2[`${prefix}-sub-ratio-2`] = `calc(var(${prefix}-ratio) * ${middle / ratio})`;
-    vars2[`${prefix}-sub-ratio-3`] = `calc(var(${prefix}-ratio) * ${second / ratio})`;
-  };
-  var applySequenceVars = (FACTORY2, options = {}) => {
-    const CONFIG2 = getActiveConfig();
-    const { unit: UNIT, timing: TIMING, CSS_VARS: CSS_VARS2 } = CONFIG2;
-    const unit2 = FACTORY2.unit || UNIT.default;
-    const { mediaRegenerate, sequence: sequence2, scales } = FACTORY2;
-    if (!mediaRegenerate) {
-      applySequenceGlobalVars(CSS_VARS2, FACTORY2, options);
-    }
-    for (const key in sequence2) {
-      const item = sequence2[key];
-      const value = (FACTORY2.type === TIMING.type ? sequence2[key].val : scales[key]) + unit2;
-      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, media2, options = {}) => {
-    const CONFIG2 = getActiveConfig();
-    const { unit: UNIT, media: MEDIA, CSS_VARS: CSS_VARS2 } = CONFIG2;
-    const mediaName = media2.slice(1);
-    const unit2 = FACTORY2.unit || UNIT.default;
-    const { mediaRegenerate } = FACTORY2;
-    const { sequence: sequence2, scales } = FACTORY2[media2];
-    const query = MEDIA[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[media2], options);
-      return;
-    }
-    for (const key in sequence2) {
-      const item = sequence2[key];
-      const value = (isScalingUnit(unit2) ? scales[key] : sequence2[key].val) + unit2;
-      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
-  init_esm();
-  var isDev = isNotProduction();
-  var generateSprite = (icons2) => {
-    const CONFIG2 = getActiveConfig();
-    let sprite = "";
-    for (const key in icons2) {
-      if (CONFIG2.__svg_cache[key]) continue;
-      else CONFIG2.__svg_cache[key] = true;
-      sprite += icons2[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
-  init_esm();
-  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) {
-        const { color: COLOR2, gradient: GRADIENT2 } = CONFIG2;
-        const directVal = GRADIENT2[value] || COLOR2[value];
-        if (directVal) return CONFIG2.useVariable ? `var(${directVal.var})` : directVal.value;
-        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: COLOR, gradient: GRADIENT } = CONFIG2;
-    let val = COLOR[name] || GRADIENT[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: COLOR, gradient: GRADIENT } = CONFIG2;
-    const val = COLOR[name] || GRADIENT[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 media2 = "@media " + (query === "print" ? `${query}` : `screen and ${query}`);
-          obj[media2] = 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) {
-          let rgb2 = refColor.rgb;
-          const alpha2 = parts[1] !== void 0 ? parts[1] : "1";
-          const tone = parts[2];
-          if (tone) {
-            rgb2 = getRgbTone(rgb2, tone);
-          }
-          val = `rgba(${rgb2}, ${alpha2})`;
-        } else {
-          const tone = parts[2];
-          const alpha2 = parts[1] !== void 0 ? parts[1] : "1";
-          if (tone) {
-            try {
-              const rgb2 = colorStringToRgbaArray(parts[0]);
-              if (rgb2 && rgb2.length >= 3) {
-                const tonedRgb = getRgbTone(rgb2.slice(0, 3).join(", "), tone);
-                val = `rgba(${tonedRgb}, ${alpha2})`;
-              } else {
-                val = parts[0];
-              }
-            } catch (e) {
-              val = parts[0];
-            }
-          } else {
-            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
-  init_esm();
-  var CSS_NAMED_COLORS = /* @__PURE__ */ new Set([
-    "black",
-    "white",
-    "red",
-    "green",
-    "blue",
-    "yellow",
-    "orange",
-    "purple",
-    "pink",
-    "brown",
-    "gray",
-    "grey",
-    "cyan",
-    "magenta",
-    "lime",
-    "olive",
-    "navy",
-    "teal",
-    "aqua",
-    "maroon",
-    "silver",
-    "fuchsia",
-    "transparent",
-    "currentColor",
-    "currentcolor",
-    "inherit",
-    "initial",
-    "unset",
-    "none",
-    "aliceblue",
-    "antiquewhite",
-    "aquamarine",
-    "azure",
-    "beige",
-    "bisque",
-    "blanchedalmond",
-    "blueviolet",
-    "burlywood",
-    "cadetblue",
-    "chartreuse",
-    "chocolate",
-    "coral",
-    "cornflowerblue",
-    "cornsilk",
-    "crimson",
-    "darkblue",
-    "darkcyan",
-    "darkgoldenrod",
-    "darkgray",
-    "darkgreen",
-    "darkgrey",
-    "darkkhaki",
-    "darkmagenta",
-    "darkolivegreen",
-    "darkorange",
-    "darkorchid",
-    "darkred",
-    "darksalmon",
-    "darkseagreen",
-    "darkslateblue",
-    "darkslategray",
-    "darkslategrey",
-    "darkturquoise",
-    "darkviolet",
-    "deeppink",
-    "deepskyblue",
-    "dimgray",
-    "dimgrey",
-    "dodgerblue",
-    "firebrick",
-    "floralwhite",
-    "forestgreen",
-    "gainsboro",
-    "ghostwhite",
-    "gold",
-    "goldenrod",
-    "greenyellow",
-    "honeydew",
-    "hotpink",
-    "indianred",
-    "indigo",
-    "ivory",
-    "khaki",
-    "lavender",
-    "lavenderblush",
-    "lawngreen",
-    "lemonchiffon",
-    "lightblue",
-    "lightcoral",
-    "lightcyan",
-    "lightgoldenrodyellow",
-    "lightgray",
-    "lightgreen",
-    "lightgrey",
-    "lightpink",
-    "lightsalmon",
-    "lightseagreen",
-    "lightskyblue",
-    "lightslategray",
-    "lightslategrey",
-    "lightsteelblue",
-    "lightyellow",
-    "limegreen",
-    "linen",
-    "mediumaquamarine",
-    "mediumblue",
-    "mediumorchid",
-    "mediumpurple",
-    "mediumseagreen",
-    "mediumslateblue",
-    "mediumspringgreen",
-    "mediumturquoise",
-    "mediumvioletred",
-    "midnightblue",
-    "mintcream",
-    "mistyrose",
-    "moccasin",
-    "navajowhite",
-    "oldlace",
-    "olivedrab",
-    "orangered",
-    "orchid",
-    "palegoldenrod",
-    "palegreen",
-    "paleturquoise",
-    "palevioletred",
-    "papayawhip",
-    "peachpuff",
-    "peru",
-    "plum",
-    "powderblue",
-    "rosybrown",
-    "royalblue",
-    "saddlebrown",
-    "salmon",
-    "sandybrown",
-    "seagreen",
-    "seashell",
-    "sienna",
-    "skyblue",
-    "slateblue",
-    "slategray",
-    "slategrey",
-    "snow",
-    "springgreen",
-    "steelblue",
-    "tan",
-    "thistle",
-    "tomato",
-    "turquoise",
-    "violet",
-    "wheat",
-    "whitesmoke",
-    "yellowgreen",
-    "rebeccapurple"
-  ]);
-  var setThemeValue = (theme2) => {
-    const value = {};
-    const { state, media: media2, helpers, ...rest } = theme2;
-    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(theme2[key]) : theme2[key];
-    });
-    return value;
-  };
-  var getThemeValue = (theme2) => {
-    if (theme2.value) return theme2.value;
-    theme2.value = setThemeValue(theme2);
-    return theme2.value;
-  };
-  var getTheme = (value, modifier) => {
-    const CONFIG2 = getActiveConfig();
-    if (CONFIG2.useVariable) return getMediaTheme(value, modifier);
-    const THEME = CONFIG2.theme;
-    if (isString(value)) {
-      const [theme2, subtheme] = value.split(" ");
-      const isOurTheme = THEME[theme2];
-      if (isOurTheme) {
-        if (!subtheme && !modifier) return getThemeValue(isOurTheme);
-        value = [theme2, subtheme || modifier];
-      }
-    }
-    if (isObjectLike(value) && value[1]) {
-      const themeName = value[0];
-      const subThemeName = value[1];
-      const { helpers, media: media2, state } = THEME[themeName];
-      if (media2 && media2[subThemeName]) return getThemeValue(media2[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 = (theme2, variant, value) => {
-    if (isObject(variant)) {
-      theme2.variants.inverse.value = setThemeValue(variant);
-    } else if (variant === true) {
-      const { color: color2, background } = value;
-      theme2.variants.inverse = {
-        value: {
-          color: background,
-          background: color2
-        }
-      };
-    }
-  };
-  var setPseudo = (theme2, key, variant, themeValue) => {
-    const result = getTheme(variant);
-    themeValue[`&:${key}`] = result;
-    if (isObject(variant) && !variant.value) variant.value = result;
-  };
-  var setSelectors = (theme2, value) => {
-    const { state } = theme2;
-    if (!state) return;
-    const keys = Object.keys(state);
-    keys.map((key) => {
-      const variant = state[key];
-      setPseudo(theme2, key, variant, value);
-      return theme2;
-    });
-    return theme2;
-  };
-  var setPrefersScheme = (theme2, key, variant, themeValue) => {
-    const result = getTheme(variant);
-    themeValue[`@media (prefers-color-scheme: ${key})`] = result;
-    if (isObject(variant) && !variant.value) variant.value = result;
-  };
-  var setMedia = (theme2, value) => {
-    const { media: media2 } = theme2;
-    if (!media2) return;
-    const keys = Object.keys(media2);
-    keys.map((key) => {
-      const variant = media2[key];
-      if (key === "dark" || key === "light") setPrefersScheme(theme2, key, variant, value);
-      if (key === "inverse") setInverseTheme(theme2, variant, value);
-      return theme2;
-    });
-    return theme2;
-  };
-  var setHelpers = (theme2, value) => {
-    const CONFIG2 = getActiveConfig();
-    const { helpers } = theme2;
-    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 theme2;
-    });
-    return theme2;
-  };
-  var setTheme = (val, key) => {
-    const CONFIG2 = getActiveConfig();
-    if (CONFIG2.useVariable) return setMediaTheme(val, key);
-    const { state, media: media2, 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: media2, helpers };
-  };
-  var generateAutoVars = (schemes, varPrefix, CONFIG2) => {
-    const { CSS_VARS: CSS_VARS2 } = CONFIG2;
-    if (!CONFIG2.CSS_MEDIA_VARS) CONFIG2.CSS_MEDIA_VARS = {};
-    const MEDIA_VARS = CONFIG2.CSS_MEDIA_VARS;
-    const globalTheme = CONFIG2.globalTheme !== void 0 ? CONFIG2.globalTheme : "auto";
-    const result = {};
-    const allKeys = /* @__PURE__ */ new Set();
-    for (const scheme in schemes) {
-      if (schemes[scheme]) for (const k of Object.keys(schemes[scheme])) allKeys.add(k);
-    }
-    const brokenSchemes = /* @__PURE__ */ new Set();
-    if (globalTheme === "auto") {
-      for (const param of allKeys) {
-        const symb = param.slice(0, 1);
-        if (symb === "@" || symb === "." || symb === ":") continue;
-        for (const scheme in schemes) {
-          if (brokenSchemes.has(scheme)) continue;
-          const val = schemes[scheme]?.[param];
-          if (val === void 0) continue;
-          const color2 = getColor(val, `@${scheme}`);
-          if (color2 === void 0) continue;
-          if (isString(color2) && /^[a-z][a-zA-Z]+$/.test(color2) && !CSS_NAMED_COLORS.has(color2)) {
-            brokenSchemes.add(scheme);
-          }
-        }
-      }
-    }
-    for (const param of allKeys) {
-      const symb = param.slice(0, 1);
-      const hasObject = Object.values(schemes).some((s) => isObjectLike(s?.[param]));
-      if (symb === "." && hasObject) {
-        const helperName = param.slice(1);
-        const subSchemes = {};
-        for (const scheme in schemes) {
-          if (isObjectLike(schemes[scheme]?.[param])) subSchemes[scheme] = schemes[scheme][param];
-        }
-        result[param] = generateAutoVars(subSchemes, `${varPrefix}-${helperName}`, CONFIG2);
-      } else if (symb === ":" && hasObject) {
-        const pseudoName = param.replace(/^:+/, "");
-        const subSchemes = {};
-        for (const scheme in schemes) {
-          if (isObjectLike(schemes[scheme]?.[param])) subSchemes[scheme] = schemes[scheme][param];
-        }
-        result[param] = generateAutoVars(subSchemes, `${varPrefix}-${pseudoName}`, CONFIG2);
-      } else if (symb !== "@" && symb !== "." && symb !== ":") {
-        const autoVar = `--theme-${varPrefix}-${param}`;
-        if (globalTheme === "auto") {
-          let fallbackColor;
-          for (const scheme in schemes) {
-            if (brokenSchemes.has(scheme)) continue;
-            const val = schemes[scheme]?.[param];
-            if (val === void 0) continue;
-            const color2 = getColor(val, `@${scheme}`);
-            if (color2 === void 0) continue;
-            if (scheme === "light" || fallbackColor === void 0) {
-              fallbackColor = color2;
-            }
-            const selector = `[data-theme="${scheme}"]`;
-            if (!MEDIA_VARS[selector]) MEDIA_VARS[selector] = {};
-            MEDIA_VARS[selector][autoVar] = color2;
-            if (scheme === "dark" || scheme === "light") {
-              const mq = `@media (prefers-color-scheme: ${scheme})`;
-              if (!MEDIA_VARS[mq]) MEDIA_VARS[mq] = {};
-              MEDIA_VARS[mq][autoVar] = color2;
-            }
-          }
-          if (fallbackColor !== void 0) {
-            CSS_VARS2[autoVar] = fallbackColor;
-          }
-        } else {
-          const forced = String(globalTheme).replace(/^'|'$/g, "");
-          const source = schemes[forced]?.[param];
-          if (source !== void 0) {
-            const color2 = getColor(source, `@${forced}`);
-            if (color2 !== void 0) CSS_VARS2[autoVar] = color2;
-          }
-        }
-        result[param] = `var(${autoVar})`;
-        result[`.${param}`] = { [param]: result[param] };
-      }
-    }
-    if (result.background || result.color || result.backgroundColor) {
-      result[".inversed"] = {
-        color: result.background || result.backgroundColor,
-        background: result.color
-      };
-    }
-    return result;
-  };
-  var setMediaTheme = (val, key, suffix, prefers) => {
-    const CONFIG2 = getActiveConfig();
-    const { CSS_VARS: CSS_VARS2 } = CONFIG2;
-    const theme2 = { value: val };
-    const isTopLevel = !suffix && !prefers;
-    if (isObjectLike(val)) {
-      if (isTopLevel && CONFIG2.useVariable) {
-        const schemes = {};
-        for (const param in val) {
-          if (param.startsWith("@") && isObjectLike(val[param])) {
-            schemes[param.slice(1)] = val[param];
-          }
-        }
-        if (Object.keys(schemes).length) {
-          const autoResult = generateAutoVars(schemes, key, CONFIG2);
-          Object.assign(theme2, autoResult);
-        }
-      }
-      for (const param in val) {
-        const symb = param.slice(0, 1);
-        const value = val[param];
-        if (symb === "@" || symb === ":" || symb === ".") {
-          const hasPrefers = symb === "@" && param;
-          theme2[param] = setMediaTheme(value, key, param, prefers || hasPrefers);
-        } else if (!isTopLevel) {
-          const color2 = 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) {
-            if (CONFIG2.useThemeSuffixedVars) CSS_VARS2[CSSVar] = color2;
-            theme2[param] = `var(${CSSVar})`;
-          } else {
-            theme2[param] = color2;
-          }
-          theme2[`.${param}`] = { [param]: theme2[param] };
-        }
-      }
-      if (!theme2[".inversed"] && (theme2.background || theme2.color || theme2.backgroundColor)) {
-        theme2[".inversed"] = {
-          color: theme2.background || theme2.backgroundColor,
-          background: theme2.color
-        };
-      }
-    }
-    if (isString(val) && isCSSVar(val)) {
-      const THEME = CONFIG2.theme;
-      const value = THEME[val.slice(2)];
-      const getReferenced = getMediaTheme(value, prefers);
-      return getReferenced;
-    }
-    return theme2;
-  };
-  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 === "@") {
-          continue;
-        } else if (symb === ":") {
-          obj[`&${param}`] = 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.length) {
-      themeValue = findModifier(themeValue, themeModifiers);
-    } else if (themeValue && modifier) {
-      themeValue = findModifier(themeValue, modifier);
-    }
-    const resolvedTheme = recursiveTheme(themeValue);
-    return resolvedTheme;
-  };
-
-  // src/system/font.js
-  init_esm();
-  var setFont = (val, key) => {
-    const CONFIG2 = getActiveConfig();
-    const CSSvar = `--font-${key}`;
-    if (!val || isArray(val) && !val[0]) return;
-    let fontFace;
-    if (val.isVariable) {
-      const url = resolveFileUrl(val.url, CONFIG2.files) || val.url;
-      if (isGoogleFontsUrl(url)) {
-        fontFace = setFontImport(url);
-      } else {
-        fontFace = setCustomFontMedia(key, url, val.fontWeight, {
-          fontStretch: val.fontStretch,
-          fontDisplay: val.fontDisplay || "swap"
-        });
-      }
-    } else if (val[0]) {
-      fontFace = getFontFaceEach(key, val, CONFIG2.files);
-    } else {
-      const url = Array.isArray(val.url) ? val.url.map((u) => resolveFileUrl(u, CONFIG2.files) || u) : resolveFileUrl(val.url, CONFIG2.files) || val.url;
-      fontFace = setCustomFontMedia(key, url, val.fontWeight, {
-        fontStyle: val.fontStyle,
-        fontDisplay: val.fontDisplay,
-        fontStretch: val.fontStretch
-      });
-    }
-    return { var: CSSvar, value: val, fontFace };
-  };
-  var getFontFamily = (key, factory) => {
-    const CONFIG2 = getActiveConfig();
-    const { font_family: FONT_FAMILY } = CONFIG2;
-    return getDefaultOrFirstKey(factory || FONT_FAMILY, key);
-  };
-  var setFontFamily = (val, key) => {
-    const CONFIG2 = getActiveConfig();
-    const { font_family: FONT_FAMILY, font_family_types: FONT_FAMILY_TYPES } = CONFIG2;
-    let { value, type } = val;
-    if (val.isDefault) FONT_FAMILY.default = key;
-    if (isObject(value)) value = arrayzeValue(value);
-    const CSSvar = `--font-family-${key}`;
-    const str = `${value.join(", ")}, ${FONT_FAMILY_TYPES[type]}`;
-    return { var: CSSvar, value: str, arr: value, type };
-  };
-
-  // src/system/typography.js
-  init_esm();
-  var runThroughMedia = (FACTORY2) => {
-    const CONFIG2 = getActiveConfig();
-    const { typography: TYPOGRAPHY, media: MEDIA } = 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: unit2 } = FACTORY2;
-      merge(mediaValue, {
-        type,
-        base,
-        ratio,
-        range,
-        subSequence,
-        h1Matches,
-        unit: unit2
-      });
-      const query = MEDIA[mediaName];
-      const media2 = "@media " + (query === "print" ? `${query}` : `screen and ${query}`);
-      TYPOGRAPHY.templates[media2] = {
-        fontSize: mediaValue.base / TYPOGRAPHY.browserDefault + unit2
-      };
-      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 unit2 = props.unit;
-      const HEADINGS = findHeadings(props);
-      const { templates: templates2 } = props;
-      for (const k in HEADINGS) {
-        const headerName = `h${parseInt(k) + 1}`;
-        const headerStyle = templates2[headerName];
-        templates2[headerName] = {
-          fontSize: CONFIG2.useVariable ? `var(${HEADINGS[k]?.variable})` : `${HEADINGS[k]?.scaling}${unit2}`,
-          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: TYPOGRAPHY } = CONFIG2;
-    generateSequence(TYPOGRAPHY);
-    applyHeadings(TYPOGRAPHY);
-    applySequenceVars(TYPOGRAPHY);
-    runThroughMedia(TYPOGRAPHY);
-  };
-  var getFontSizeByKey = (value) => {
-    const CONFIG2 = getActiveConfig();
-    const { typography: TYPOGRAPHY } = CONFIG2;
-    return getSequenceValuePropertyPair(value, "fontSize", TYPOGRAPHY);
-  };
-
-  // src/system/spacing.js
-  init_esm();
-  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: unit2 } = FACTORY2;
-      merge(mediaProps, {
-        type,
-        base,
-        ratio,
-        range,
-        subSequence,
-        h1Matches,
-        unit: unit2,
-        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: SPACING } = CONFIG2;
-    generateSequence(SPACING);
-    applySequenceVars(SPACING);
-    runThroughMedia2(SPACING);
-  };
-  var getSequence = (sequenceProps) => {
-    const CONFIG2 = getActiveConfig();
-    const { spacing: SPACING } = CONFIG2;
-    if (!sequenceProps || !sequenceProps.sequence) return SPACING;
-    const hasGenerated = Object.keys(sequenceProps.sequence).length > 0;
-    return hasGenerated ? sequenceProps : generateSequence(sequenceProps);
-  };
-  var getSpacingByKey = (value, propertyName = "padding", sequenceProps, fnPrefix) => {
-    const sequence2 = 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,
-        sequence2,
-        fnPrefix
-      );
-      return directions[stack.length].map(
-        (dir, key) => wrapSequenceValueByDirection(dir, key)
-      );
-    }
-    return getSequenceValuePropertyPair(value, propertyName, sequence2, fnPrefix);
-  };
-  var getSpacingBasedOnRatio = (props, propertyName, val, fnPrefix) => {
-    const CONFIG2 = getActiveConfig();
-    const { spacing: SPACING } = 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, SPACING, fnPrefix);
-  };
-  var splitSpacedValue = (val) => {
-    const addDefault = (v) => {
-      const isSymbol = ["+", "-", "*", "/"].includes(v);
-      const hasUnits = CSS_UNITS.some((unit2) => val.includes(unit2));
-      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
-  init_esm();
-  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((shadow2) => {
-        shadow2 = shadow2.trim();
-        return shadow2.split(/\s+/).map((v) => {
-          v = v.trim();
-          if (!v) return "";
-          if (v.startsWith("--")) return `var(${v})`;
-          const color2 = getColor(v);
-          if (isResolvedColor(color2)) return color2;
-          if (/^\d/.test(v) || v === "0" || v.includes("px") || v.slice(-2) === "em") return v;
-          if (v === "inset" || v === "none") return v;
-          const spacing2 = getSpacingByKey(v, "shadow");
-          if (spacing2 && spacing2.shadow) return spacing2.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 = CONFIG2.shadow;
-    const val = SHADOW[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 media2 = "@media " + (query === "print" ? `${query}` : `screen and ${query}`);
-        obj[media2] = 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: TIMING } = CONFIG2;
-    generateSequence(TIMING);
-    applySequenceVars(TIMING);
-  };
-  var getTimingFunction = (value) => {
-    const CONFIG2 = getActiveConfig();
-    const { timing: TIMING } = CONFIG2;
-    return TIMING[value] || TIMING[toCamelCase(value)] || value;
-  };
-  var getTimingByKey = (value, property = "timing") => {
-    const CONFIG2 = getActiveConfig();
-    const { timing: TIMING } = CONFIG2;
-    return getSequenceValuePropertyPair(
-      value,
-      property,
-      TIMING
-    );
-  };
-
-  // src/system/document.js
-  init_esm();
-  var applyDocument = () => {
-    const CONFIG2 = getActiveConfig();
-    const { document: DOCUMENT, font_family: FONT_FAMILY, theme: THEME, typography: TYPOGRAPHY } = CONFIG2;
-    return merge(DOCUMENT, {
-      theme: THEME.document,
-      fontFamily: getDefaultOrFirstKey(FONT_FAMILY),
-      fontSize: TYPOGRAPHY.base,
-      lineHeight: TYPOGRAPHY.lineHeight
-    });
-  };
-
-  // src/system/svg.js
-  init_esm();
-  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] = LIBRARY[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] = LIBRARY[key];
-    appendSVG(lib, options);
-  };
-  var createSVGSpriteElement = (doc, options = { isRoot: true }) => {
-    if (!doc || !doc.createElementNS) return;
-    const svgElem = doc.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);
-    const spriteHtml = `<svg aria-hidden="true" width="0" height="0" style="position:absolute" id="svgSprite">${SVGsprite}</svg>`;
-    if (exists) {
-      if (doc.body.insertAdjacentHTML) {
-        exists.insertAdjacentHTML("beforeend", SVGsprite);
-      } else {
-        const tempSVG = createSVGSpriteElement(doc, { isRoot: false });
-        tempSVG.innerHTML = SVGsprite;
-        exists.append(...tempSVG.children);
-      }
-    } else {
-      if (doc.body.insertAdjacentHTML) {
-        doc.body.insertAdjacentHTML("afterbegin", spriteHtml);
-      } else {
-        const svgSpriteDOM = createSVGSpriteElement(doc);
-        if (svgSpriteDOM && svgSpriteDOM.nodeType) {
-          svgSpriteDOM.innerHTML = SVGsprite;
-          doc.body.prepend(svgSpriteDOM);
-        }
-      }
-    }
-  };
-
-  // src/system/reset.js
-  init_esm();
-  var applyReset = (reset2 = {}) => {
-    const CONFIG2 = getActiveConfig();
-    const { reset: RESET, typography: TYPOGRAPHY, document: DOCUMENT } = CONFIG2;
-    if (RESET) {
-      if (RESET[":root"]) {
-        const configReset = RESET;
-        const configTemplates = TYPOGRAPHY.templates;
-        configReset.body = {
-          ...CONFIG2.useDocumentTheme ? getMediaTheme("document") : {},
-          ...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, ...templates2 } = TYPOGRAPHY.templates;
-      const globalTheme = CONFIG2.useDocumentTheme ? getMediaTheme("document") : {};
-      if (RESET.html) overwriteDeep(RESET.html, globalTheme);
-      return deepMerge(merge(RESET, reset2), {
-        html: {
-          position: "absolute",
-          // overflow: 'hidden',
-          width: "100%",
-          height: "100%",
-          top: "0",
-          left: "0",
-          margin: "0",
-          WebkitFontSmoothing: "subpixel-antialiased",
-          scrollBehavior: "smooth",
-          ...globalTheme,
-          fontSize: TYPOGRAPHY.browserDefault + "px",
-          fontFamily: DOCUMENT.fontFamily,
-          lineHeight: DOCUMENT.lineHeight
-        },
-        body: {
-          boxSizing: "border-box",
-          height: "100%",
-          margin: 0,
-          fontFamily: DOCUMENT.fontFamily,
-          fontSize: TYPOGRAPHY.base / TYPOGRAPHY.browserDefault + CONFIG2.unit.default,
-          ...templates2,
-          ...body
-        },
-        a: {
-          color: "currentColor"
-        },
-        // form elements
-        fieldset: {
-          border: 0,
-          padding: 0,
-          margin: 0
-        },
-        "select, input": {
-          fontFamily: DOCUMENT.fontFamily
-        }
-      });
-    }
-  };
-
-  // src/transforms/index.js
-  init_esm();
-  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 color2 = getColor(v);
-      if (isResolvedColor(color2)) return color2;
-      const spacing2 = getSpacingByKey(v, "border");
-      if (spacing2 && spacing2.border) return spacing2.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 color2 = getColor(v);
-      if (isResolvedColor(color2)) return color2;
-      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((shadow2) => {
-      shadow2 = shadow2.trim();
-      if (!shadow2) return "";
-      return shadow2.split(/\s+/).map((v) => {
-        v = v.trim();
-        if (!v) return "";
-        if (isCSSVar(v)) return `var(${v})`;
-        if (v === "inset" || v === "none") return v;
-        const color2 = getColor(v);
-        if (isResolvedColor(color2)) {
-          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 spacing2 = getSpacingByKey(v, "shadow");
-        if (spacing2 && spacing2.shadow) return spacing2.shadow;
-        return v;
-      }).join(" ");
-    }).join(", ");
-  };
-  var resolveColorsInGradient = (gradient2, globalTheme) => {
-    const parenStart = gradient2.indexOf("(");
-    if (parenStart === -1) return gradient2;
-    const prefix = gradient2.slice(0, parenStart + 1);
-    const inner = gradient2.slice(parenStart + 1, gradient2.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 color2 = getColor(token);
-        if (isResolvedColor(color2)) return color2;
-        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 && !opts.ratio) {
-        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
-  init_esm();
-  var setVars = (val, key) => {
-    const CONFIG2 = getActiveConfig();
-    const { CSS_VARS: CSS_VARS2 } = CONFIG2;
-    const varName = key.startsWith("--") ? key : `--${key}`;
-    CSS_VARS2[varName] = val;
-    return val;
-  };
-  var asIs = (val) => val;
-  var VALUE_TRANSFORMERS = {
-    color: setColor,
-    gradient: setGradient,
-    font: setFont,
-    font_family: setFontFamily,
-    fontfamily: setFontFamily,
-    theme: setTheme,
-    icons: setSvgIcon,
-    semantic_icons: asIs,
-    semanticicons: asIs,
-    svg: setSVG,
-    svg_data: asIs,
-    typography: asIs,
-    shadow: setShadow,
-    spacing: asIs,
-    media: asIs,
-    grid: asIs,
-    class: asIs,
-    timing: asIs,
-    reset: asIs,
-    unit: asIs,
-    animation: asIs,
-    vars: setVars
-  };
-  var setValue = (factoryName, value, key) => {
-    const CONFIG2 = getActiveConfig();
-    const lowerName = factoryName.toLowerCase();
-    const FACTORY2 = CONFIG2[lowerName] || CONFIG2[factoryName];
-    if (VALUE_TRANSFORMERS[lowerName]) {
-      try {
-        const result = VALUE_TRANSFORMERS[lowerName](value, key);
-        FACTORY2[key] = result;
-        return FACTORY2;
-      } catch (error) {
-        if (CONFIG2.verbose)
-          console.warn("Error setting", lowerName, "value", value, key, error);
-      }
-    }
-    if (CONFIG2.verbose)
-      console.warn("Can not find", lowerName, "method in scratch");
-  };
-  var setEach = (factoryName, props) => {
-    const CONFIG2 = getActiveConfig();
-    const lowerName = factoryName.toLowerCase();
-    const keys = Object.keys(props);
-    keys.forEach((key) => {
-      try {
-        return setValue(lowerName, props[key], key);
-      } catch (error) {
-        if (CONFIG2.verbose)
-          console.warn(
-            "Error setting",
-            lowerName,
-            "value",
-            props[key],
-            key,
-            error
-          );
-      }
-    });
-    return CONFIG2[lowerName] || CONFIG2[factoryName];
-  };
-  var changeGlobalTheme = (newTheme) => {
-    const CONFIG2 = getActiveConfig();
-    CONFIG2.globalTheme = newTheme;
-    if (typeof document !== "undefined" && newTheme && newTheme !== "auto") {
-      document.documentElement.setAttribute("data-theme", newTheme);
-    }
-    for (const key in CONFIG2.CSS_VARS) {
-      if (key.startsWith("--theme-")) delete CONFIG2.CSS_VARS[key];
-    }
-    for (const key in CONFIG2.CSS_MEDIA_VARS) {
-      delete CONFIG2.CSS_MEDIA_VARS[key];
-    }
-    const source = CONFIG2._originalTheme || CONFIG2.theme;
-    if (source) {
-      const fresh = JSON.parse(JSON.stringify(source));
-      CONFIG2.theme = fresh;
-      setEach("theme", fresh);
-    }
-    if (typeof document !== "undefined" && CONFIG2.CSS_VARS) {
-      const sheets = document.styleSheets;
-      for (let i = 0; i < sheets.length; i++) {
-        try {
-          const rules = sheets[i].cssRules;
-          for (let j = 0; j < rules.length; j++) {
-            if (rules[j].selectorText === ":root") {
-              for (const key in CONFIG2.CSS_VARS) {
-                rules[j].style.setProperty(key, CONFIG2.CSS_VARS[key]);
-              }
-              return CONFIG2;
-            }
-          }
-        } catch (e) {
-        }
-      }
-    }
-    return CONFIG2;
-  };
-  var SET_OPTIONS = {};
-  var set = (recivedConfig, options = SET_OPTIONS) => {
-    let CONFIG2 = getActiveConfig();
-    const {
-      version,
-      verbose,
-      useVariable,
-      useReset,
-      useSvgSprite,
-      useFontImport,
-      useIconSprite,
-      globalTheme,
-      useDocumentTheme,
-      useDefaultConfig,
-      semanticIcons,
-      SEMANTIC_ICONS,
-      // deprecated
-      semantic_icons: semantic_icons2,
-      files,
-      ...config
-    } = recivedConfig;
-    if (options.newConfig) {
-      CONFIG2 = setActiveConfig(options.newConfig);
-    }
-    if (files !== void 0) CONFIG2.files = files;
-    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 (recivedConfig.useThemeSuffixedVars !== void 0)
-      CONFIG2.useThemeSuffixedVars = recivedConfig.useThemeSuffixedVars;
-    if (useDefaultConfig !== void 0) CONFIG2.useDefaultConfig = useDefaultConfig;
-    const _semanticIcons = semanticIcons || SEMANTIC_ICONS || semantic_icons2;
-    if (_semanticIcons !== void 0) {
-      CONFIG2.semantic_icons = _semanticIcons;
-      CONFIG2.semanticIcons = CONFIG2.semantic_icons;
-      CONFIG2.SEMANTIC_ICONS = CONFIG2.semantic_icons;
-    }
-    if (CONFIG2.verbose) console.log(CONFIG2);
-    if (typeof document !== "undefined" && CONFIG2.globalTheme && CONFIG2.globalTheme !== "auto") {
-      document.documentElement.setAttribute("data-theme", CONFIG2.globalTheme);
-    }
-    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]);
-      }
-    });
-    if (config.theme && !CONFIG2._originalTheme) {
-      CONFIG2._originalTheme = JSON.parse(JSON.stringify(config.theme));
-    }
-    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