@symbo.ls/scratch 3.6.8 → 3.7.0

package/dist/iife/index.js

@@ -445,41 +445,16 @@ var SmblsScratch = (() => {
   // src/index.js
   var index_exports = {};
   __export(index_exports, {
-    ANIMATION: () => ANIMATION,
-    BREAKPOINTS: () => BREAKPOINTS,
-    CASES: () => CASES,
     CLASS: () => CLASS,
-    COLOR: () => COLOR,
     CONFIG: () => CONFIG,
     CSS_MEDIA_VARS: () => CSS_MEDIA_VARS,
     CSS_NATIVE_COLOR_REGEX: () => CSS_NATIVE_COLOR_REGEX,
     CSS_UNITS: () => CSS_UNITS,
     CSS_VARS: () => CSS_VARS,
-    DEVICES: () => DEVICES,
-    DOCUMENT: () => DOCUMENT,
     FACTORY: () => FACTORY,
-    FONT: () => FONT,
-    FONT_FACE: () => FONT_FACE,
-    FONT_FAMILY: () => FONT_FAMILY,
-    FONT_FAMILY_TYPES: () => FONT_FAMILY_TYPES,
-    GRADIENT: () => GRADIENT,
-    GRID: () => GRID,
-    ICONS: () => ICONS,
-    MEDIA: () => MEDIA,
-    RESET: () => RESET,
-    SEMANTIC_ICONS: () => SEMANTIC_ICONS,
-    SEQUENCE: () => SEQUENCE,
-    SHADOW: () => SHADOW,
-    SPACING: () => SPACING,
-    SVG: () => SVG,
-    SVG_DATA: () => SVG_DATA,
-    TEMPLATES: () => TEMPLATES,
-    THEME: () => THEME,
-    TIMING: () => TIMING,
-    TYPOGRAPHY: () => TYPOGRAPHY,
-    UNIT: () => UNIT,
     VALUE_TRANSFORMERS: () => VALUE_TRANSFORMERS,
     activateConfig: () => activateConfig,
+    animation: () => animation,
     appendSVGSprite: () => appendSVGSprite,
     appendSvgIconsSprite: () => appendSvgIconsSprite,
     applyDocument: () => applyDocument,
@@ -491,12 +466,21 @@ var SmblsScratch = (() => {
     applySpacingSequence: () => applySpacingSequence,
     applyTimingSequence: () => applyTimingSequence,
     applyTypographySequence: () => applyTypographySequence,
+    breakpoints: () => breakpoints,
+    cases: () => cases,
     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,
@@ -527,20 +511,25 @@ var SmblsScratch = (() => {
     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,
@@ -550,6 +539,8 @@ var SmblsScratch = (() => {
     runThroughMedia: () => runThroughMedia,
     scratchSystem: () => system_exports,
     scratchUtils: () => utils_exports,
+    semantic_icons: () => semantic_icons,
+    sequence: () => sequence,
     set: () => set,
     setActiveConfig: () => setActiveConfig,
     setColor: () => setColor,
@@ -570,9 +561,16 @@ var SmblsScratch = (() => {
     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,
@@ -583,7 +581,9 @@ var SmblsScratch = (() => {
     transformSizeRatio: () => transformSizeRatio,
     transformTextStroke: () => transformTextStroke,
     transformTransition: () => transformTransition,
-    transfromGap: () => transfromGap
+    transfromGap: () => transfromGap,
+    typography: () => typography,
+    unit: () => unit
   });
 
   // src/utils/index.js
@@ -647,8 +647,8 @@ var SmblsScratch = (() => {
   });
 
   // src/utils/unit.js
-  var isScalingUnit = (unit) => {
-    return unit === "em" || unit === "rem" || unit === "vw" || unit === "vh" || unit === "vmax" || unit === "vmin";
+  var isScalingUnit = (unit2) => {
+    return unit2 === "em" || unit2 === "rem" || unit2 === "vw" || unit2 === "vh" || unit2 === "vmax" || unit2 === "vmin";
   };
   var CSS_UNITS = [
     // Absolute
@@ -705,21 +705,21 @@ var SmblsScratch = (() => {
 
   // src/utils/color.js
   init_esm();
-  var colorStringToRgbaArray = (color) => {
-    if (color === "") return [0, 0, 0, 0];
-    if (color.toLowerCase() === "transparent") return [0, 0, 0, 0];
-    if (color[0] === "#") {
-      if (color.length < 7) {
-        color = "#" + color[1] + color[1] + color[2] + color[2] + color[3] + color[3] + (color.length > 4 ? color[4] + color[4] : "");
+  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(color.substr(1, 2), 16),
-        parseInt(color.substr(3, 2), 16),
-        parseInt(color.substr(5, 2), 16),
-        color.length > 7 ? parseInt(color.substr(7, 2), 16) / 255 : 1
+        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 (color.indexOf("rgb") === -1) {
+    if (color2.indexOf("rgb") === -1) {
       if (document2 && window2) {
         const elem = document2.body.appendChild(document2.createElement("fictum"));
         const flag = "rgb(1, 2, 3)";
@@ -728,18 +728,18 @@ var SmblsScratch = (() => {
           document2.body.removeChild(elem);
           return;
         }
-        elem.style.color = color;
+        elem.style.color = color2;
         if (elem.style.color === flag || elem.style.color === "") {
           document2.body.removeChild(elem);
           return [0, 0, 0, 0];
         }
-        color = window2.getComputedStyle(elem).color;
+        color2 = window2.getComputedStyle(elem).color;
         document2.body.removeChild(elem);
       }
     }
-    if (color.indexOf("rgb") === 0) {
-      if (color.indexOf("rgba") === -1) color = `${color}, 1`;
-      return color.match(/[\.\d]+/g).map((a) => +a);
+    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];
   };
@@ -807,10 +807,10 @@ var SmblsScratch = (() => {
     }
     return `rgba(${arr})`;
   };
-  var opacify = (color, opacity) => {
-    const arr = colorStringToRgbaArray(color);
+  var opacify = (color2, opacity) => {
+    const arr = colorStringToRgbaArray(color2);
     if (!arr) {
-      if (isNotProduction()) console.warn(color + " color is not rgba");
+      if (isNotProduction()) console.warn(color2 + " color is not rgba");
       return;
     }
     arr[3] = opacity;
@@ -870,10 +870,10 @@ var SmblsScratch = (() => {
   };
 
   // src/utils/theme.js
-  var returnSubThemeOrDefault = (orig, theme) => {
+  var returnSubThemeOrDefault = (orig, theme2) => {
     if (!orig) return;
-    if (orig.themes && orig.themes[theme]) return orig.themes[theme];
-    if (orig[theme]) return [orig, orig[theme]];
+    if (orig.themes && orig.themes[theme2]) return orig.themes[theme2];
+    if (orig[theme2]) return [orig, orig[theme2]];
     return orig;
   };
 
@@ -973,37 +973,37 @@ var SmblsScratch = (() => {
   // src/defaultConfig/index.js
   var defaultConfig_exports = {};
   __export(defaultConfig_exports, {
-    ANIMATION: () => ANIMATION,
-    BREAKPOINTS: () => BREAKPOINTS,
-    CASES: () => CASES,
     CLASS: () => CLASS,
-    COLOR: () => COLOR,
-    DEVICES: () => DEVICES,
-    DOCUMENT: () => DOCUMENT,
-    FONT: () => FONT,
-    FONT_FACE: () => FONT_FACE,
-    FONT_FAMILY: () => FONT_FAMILY,
-    FONT_FAMILY_TYPES: () => FONT_FAMILY_TYPES,
-    GRADIENT: () => GRADIENT,
-    GRID: () => GRID,
-    ICONS: () => ICONS,
-    MEDIA: () => MEDIA,
-    RESET: () => RESET,
-    SEMANTIC_ICONS: () => SEMANTIC_ICONS,
-    SEQUENCE: () => SEQUENCE,
-    SHADOW: () => SHADOW,
-    SPACING: () => SPACING,
-    SVG: () => SVG,
-    SVG_DATA: () => SVG_DATA,
-    TEMPLATES: () => TEMPLATES,
-    THEME: () => THEME,
-    TIMING: () => TIMING,
-    TYPOGRAPHY: () => TYPOGRAPHY,
-    UNIT: () => UNIT
+    animation: () => animation,
+    breakpoints: () => breakpoints,
+    cases: () => cases,
+    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
   });
 
   // src/defaultConfig/sequence.js
-  var SEQUENCE = {
+  var sequence = {
     "minor-second": 1.067,
     "major-second": 1.125,
     "minor-third": 1.2,
@@ -1031,7 +1031,7 @@ var SmblsScratch = (() => {
   };
 
   // src/defaultConfig/unit.js
-  var UNIT = {
+  var unit = {
     default: "em"
   };
 
@@ -1040,7 +1040,7 @@ var SmblsScratch = (() => {
     browserDefault: 16,
     base: 16,
     type: "font-size",
-    ratio: SEQUENCE["minor-third"],
+    ratio: sequence["minor-third"],
     range: [-3, 12],
     h1Matches: 6,
     lineHeight: 1.5,
@@ -1052,22 +1052,22 @@ var SmblsScratch = (() => {
     scales: {},
     vars: {}
   };
-  var TYPOGRAPHY = defaultProps;
+  var typography = defaultProps;
 
   // src/defaultConfig/font.js
-  var FONT = {};
+  var font = {};
 
   // src/defaultConfig/font-family.js
-  var FONT_FAMILY = {};
-  var FONT_FAMILY_TYPES = {
+  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 = {};
+  var font_face = {};
 
   // src/defaultConfig/media.js
-  var MEDIA = {
+  var media = {
     tv: "(min-width: 2780px)",
     light: "(prefers-color-scheme: light)",
     dark: "(prefers-color-scheme: dark)",
@@ -1076,9 +1076,9 @@ var SmblsScratch = (() => {
 
   // src/defaultConfig/spacing.js
   var defaultProps2 = {
-    base: TYPOGRAPHY.base,
+    base: typography.base,
     type: "spacing",
-    ratio: SEQUENCE.phi,
+    ratio: sequence.phi,
     range: [-5, 15],
     subSequence: true,
     mediaRegenerate: false,
@@ -1087,28 +1087,28 @@ var SmblsScratch = (() => {
     scales: {},
     vars: {}
   };
-  var SPACING = defaultProps2;
+  var spacing = defaultProps2;
 
   // src/defaultConfig/color.js
-  var COLOR = {};
-  var GRADIENT = {};
+  var color = {};
+  var gradient = {};
 
   // src/defaultConfig/theme.js
-  var THEME = {};
+  var theme = {};
 
   // src/defaultConfig/shadow.js
-  var SHADOW = {};
+  var shadow = {};
 
   // src/defaultConfig/icons.js
-  var ICONS = {};
-  var SEMANTIC_ICONS = {};
+  var icons = {};
+  var semantic_icons = {};
 
   // src/defaultConfig/timing.js
   var defaultProps3 = {
     default: 150,
     base: 150,
     type: "timing",
-    ratio: SEQUENCE["perfect-fourth"],
+    ratio: sequence["perfect-fourth"],
     range: [-3, 12],
     mediaRegenerate: false,
     unit: "ms",
@@ -1116,13 +1116,13 @@ var SmblsScratch = (() => {
     scales: {},
     vars: {}
   };
-  var TIMING = defaultProps3;
+  var timing = defaultProps3;
 
   // src/defaultConfig/document.js
-  var DOCUMENT = {};
+  var document3 = {};
 
   // src/defaultConfig/responsive.js
-  var BREAKPOINTS = {
+  var breakpoints = {
     screenL: 1920,
     screenM: 1680,
     screenS: 1440,
@@ -1134,7 +1134,7 @@ var SmblsScratch = (() => {
     mobileS: 480,
     mobileXS: 375
   };
-  var DEVICES = {
+  var devices = {
     screenXXL: [2560, 1440],
     screenXL: [2240, 1260],
     screenL: [1920, 1024],
@@ -1150,38 +1150,44 @@ var SmblsScratch = (() => {
   };
 
   // src/defaultConfig/cases.js
-  var CASES = {};
+  var cases = {};
 
   // src/defaultConfig/animation.js
-  var ANIMATION = {};
+  var animation = {};
 
   // src/defaultConfig/svg.js
-  var SVG = {};
-  var SVG_DATA = {};
+  var svg = {};
+  var svg_data = {};
 
   // src/defaultConfig/templates.js
-  var TEMPLATES = {};
+  var templates = {};
 
   // src/defaultConfig/grid.js
   var defaultProps4 = {};
-  var GRID = defaultProps4;
+  var grid = defaultProps4;
 
   // src/defaultConfig/class.js
   var defaultProps5 = {};
   var CLASS = defaultProps5;
 
   // src/defaultConfig/index.js
-  var RESET = {};
+  var reset = {};
 
   // 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,
@@ -1263,8 +1269,8 @@ var SmblsScratch = (() => {
     return [prefix, value];
   };
   var setScalingVar = (key, sequenceProps) => {
-    const { base, type, unit } = sequenceProps;
-    const defaultVal = (isScalingUnit(unit) ? 1 : base) + unit;
+    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`;
@@ -1393,12 +1399,12 @@ var SmblsScratch = (() => {
   };
   var getSequenceValue = (value = "A", sequenceProps) => {
     const CONFIG2 = getActiveConfig();
-    const { UNIT: UNIT2 } = CONFIG2;
+    const { unit: UNIT } = CONFIG2;
     if (isString(value) && isCSSVar(value)) return `var(${value})`;
-    const { sequence, unit = UNIT2.default, useVariable } = sequenceProps;
+    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((unit2) => value.includes(unit2));
+    const hasUnits = CSS_UNITS.some((unit3) => value.includes(unit3));
     if (hasUnits || !startsWithDashOrLetter) return value;
     const skipArr = [
       "none",
@@ -1436,7 +1442,7 @@ var SmblsScratch = (() => {
       const joint = `${varValue(first)} - ${varValue(second)}`;
       return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
     }
-    if (!sequence[absValue] && absValue.length === 2) {
+    if (!sequence2[absValue] && absValue.length === 2) {
       if (CONFIG2.verbose)
         console.warn(
           absValue,
@@ -1448,12 +1454,12 @@ var SmblsScratch = (() => {
       const varValue2 = `var(${prefix}${absValue}${mediaName})`;
       return isNegative ? `calc(${varValue2} * -1)` : varValue2;
     }
-    const sequenceItem = sequence ? sequence[absValue] : null;
-    if (!sequenceItem) return console.warn("can't find", sequence, absValue);
-    if (unit === "ms" || unit === "s") {
-      return isNegative + sequenceItem.val + unit;
+    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 + unit;
+    return isNegative + sequenceItem.scaling + unit2;
   };
   var getSequenceValueBySymbols = (value, sequenceProps) => {
     const mathArr = ["+", "-", "*", "/", ","].filter(
@@ -1490,10 +1496,10 @@ var SmblsScratch = (() => {
   };
   var findHeadingLetter = (h1Matches, index) => numToLetterMap[h1Matches - index];
   var findHeadings = (propertyNames) => {
-    const { h1Matches, sequence } = propertyNames;
+    const { h1Matches, sequence: sequence2 } = propertyNames;
     return new Array(6).fill(null).map((_, i) => {
       const findLetter = findHeadingLetter(h1Matches, i);
-      return sequence[findLetter];
+      return sequence2[findLetter];
     });
   };
 
@@ -1509,12 +1515,12 @@ var SmblsScratch = (() => {
   };
   var applySequenceGlobalVars = (vars, obj, options) => {
     const CONFIG2 = getActiveConfig();
-    const { UNIT: UNIT2 } = CONFIG2;
-    const unit = obj.unit || UNIT2.default;
+    const { unit: UNIT } = CONFIG2;
+    const unit2 = obj.unit || UNIT.default;
     const { base, ratio, type } = obj;
     const prefix = "--" + (type && type.replace(".", "-"));
     vars[`${prefix}-base`] = base;
-    vars[`${prefix}-unit`] = unit;
+    vars[`${prefix}-unit`] = unit2;
     const ratioVar = `${prefix}-ratio`;
     vars[ratioVar] = ratio;
     const [first, middle, second] = getSubratio(base, ratio);
@@ -1524,15 +1530,15 @@ var SmblsScratch = (() => {
   };
   var applySequenceVars = (FACTORY2, options = {}) => {
     const CONFIG2 = getActiveConfig();
-    const { UNIT: UNIT2, TIMING: TIMING2, CSS_VARS: CSS_VARS2 } = CONFIG2;
-    const unit = FACTORY2.unit || UNIT2.default;
-    const { mediaRegenerate, sequence, scales } = FACTORY2;
+    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 sequence) {
-      const item = sequence[key];
-      const value = (FACTORY2.type === TIMING2.type ? sequence[key].val : scales[key]) + unit;
+    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;
@@ -1546,24 +1552,24 @@ var SmblsScratch = (() => {
       }
     }
   };
-  var applyMediaSequenceVars = (FACTORY2, media, options = {}) => {
+  var applyMediaSequenceVars = (FACTORY2, media2, options = {}) => {
     const CONFIG2 = getActiveConfig();
-    const { UNIT: UNIT2, MEDIA: MEDIA2, CSS_VARS: CSS_VARS2 } = CONFIG2;
-    const mediaName = media.slice(1);
-    const unit = FACTORY2.unit || UNIT2.default;
+    const { 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, scales } = FACTORY2[media];
-    const query = MEDIA2[mediaName];
+    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[media], options);
+      applySequenceGlobalVars(underMediaQuery, FACTORY2[media2], options);
       return;
     }
-    for (const key in sequence) {
-      const item = sequence[key];
-      const value = (isScalingUnit(unit) ? scales[key] : sequence[key].val) + unit;
+    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}`] = {};
@@ -1575,13 +1581,13 @@ var SmblsScratch = (() => {
   // src/utils/sprite.js
   init_esm();
   var isDev = isNotProduction();
-  var generateSprite = (icons) => {
+  var generateSprite = (icons2) => {
     const CONFIG2 = getActiveConfig();
     let sprite = "";
-    for (const key in icons) {
+    for (const key in icons2) {
       if (CONFIG2.__svg_cache[key]) continue;
       else CONFIG2.__svg_cache[key] = true;
-      sprite += icons[key];
+      sprite += icons2[key];
     }
     return sprite;
   };
@@ -1692,8 +1698,8 @@ var SmblsScratch = (() => {
       alpha = parsed.alpha;
       tone = parsed.tone;
     }
-    const { COLOR: COLOR2, GRADIENT: GRADIENT2 } = CONFIG2;
-    let val = COLOR2[name] || GRADIENT2[name];
+    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;
@@ -1733,8 +1739,8 @@ var SmblsScratch = (() => {
       if (parsed.cssVar) return `var(${parsed.cssVar})`;
       name = parsed.name;
     }
-    const { COLOR: COLOR2, GRADIENT: GRADIENT2 } = CONFIG2;
-    const val = COLOR2[name] || GRADIENT2[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) {
@@ -1742,9 +1748,9 @@ var SmblsScratch = (() => {
       else {
         const obj = {};
         for (const mediaName in val) {
-          const query = CONFIG2.MEDIA[mediaName.slice(1)];
-          const media = "@media " + (query === "print" ? `${query}` : `screen and ${query}`);
-          obj[media] = getColor(value, mediaName, config);
+          const query = CONFIG2.media[mediaName.slice(1)];
+          const media2 = "@media " + (query === "print" ? `${query}` : `screen and ${query}`);
+          obj[media2] = getColor(value, mediaName, config);
         }
         return obj;
       }
@@ -1760,7 +1766,7 @@ var SmblsScratch = (() => {
       val = getColor(rawRef);
       if (!(val.includes("rgb") || val.includes("var") || val.includes("#"))) {
         const parts = rawRef.split(" ");
-        const refColor = CONFIG2.COLOR[parts[0]];
+        const refColor = CONFIG2.color[parts[0]];
         if (refColor && refColor.value) {
           let rgb2 = refColor.rgb;
           const alpha2 = parts[1] !== void 0 ? parts[1] : "1";
@@ -1849,112 +1855,112 @@ var SmblsScratch = (() => {
 
   // src/system/theme.js
   init_esm();
-  var setThemeValue = (theme) => {
+  var setThemeValue = (theme2) => {
     const value = {};
-    const { state, media, helpers, ...rest } = theme;
+    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(theme[key]) : theme[key];
+      return value[key] = isColor ? getColor(theme2[key]) : theme2[key];
     });
     return value;
   };
-  var getThemeValue = (theme) => {
-    if (theme.value) return theme.value;
-    theme.value = setThemeValue(theme);
-    return theme.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: THEME2 } = CONFIG2;
+    const THEME = CONFIG2.theme;
     if (isString(value)) {
-      const [theme, subtheme] = value.split(" ");
-      const isOurTheme = THEME2[theme];
+      const [theme2, subtheme] = value.split(" ");
+      const isOurTheme = THEME[theme2];
       if (isOurTheme) {
         if (!subtheme && !modifier) return getThemeValue(isOurTheme);
-        value = [theme, subtheme || modifier];
+        value = [theme2, subtheme || modifier];
       }
     }
     if (isObjectLike(value) && value[1]) {
       const themeName = value[0];
       const subThemeName = value[1];
-      const { helpers, media, state } = THEME2[themeName];
-      if (media && media[subThemeName]) return getThemeValue(media[subThemeName]);
+      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 = (theme, variant, value) => {
+  var setInverseTheme = (theme2, variant, value) => {
     if (isObject(variant)) {
-      theme.variants.inverse.value = setThemeValue(variant);
+      theme2.variants.inverse.value = setThemeValue(variant);
     } else if (variant === true) {
-      const { color, background } = value;
-      theme.variants.inverse = {
+      const { color: color2, background } = value;
+      theme2.variants.inverse = {
         value: {
           color: background,
-          background: color
+          background: color2
         }
       };
     }
   };
-  var setPseudo = (theme, key, variant, themeValue) => {
+  var setPseudo = (theme2, key, variant, themeValue) => {
     const result = getTheme(variant);
     themeValue[`&:${key}`] = result;
     if (isObject(variant) && !variant.value) variant.value = result;
   };
-  var setSelectors = (theme, value) => {
-    const { state } = theme;
+  var setSelectors = (theme2, value) => {
+    const { state } = theme2;
     if (!state) return;
     const keys = Object.keys(state);
     keys.map((key) => {
       const variant = state[key];
-      setPseudo(theme, key, variant, value);
-      return theme;
+      setPseudo(theme2, key, variant, value);
+      return theme2;
     });
-    return theme;
+    return theme2;
   };
-  var setPrefersScheme = (theme, key, variant, themeValue) => {
+  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 = (theme, value) => {
-    const { media } = theme;
-    if (!media) return;
-    const keys = Object.keys(media);
+  var setMedia = (theme2, value) => {
+    const { media: media2 } = theme2;
+    if (!media2) return;
+    const keys = Object.keys(media2);
     keys.map((key) => {
-      const variant = media[key];
-      if (key === "dark" || key === "light") setPrefersScheme(theme, key, variant, value);
-      if (key === "inverse") setInverseTheme(theme, variant, value);
-      return theme;
+      const variant = media2[key];
+      if (key === "dark" || key === "light") setPrefersScheme(theme2, key, variant, value);
+      if (key === "inverse") setInverseTheme(theme2, variant, value);
+      return theme2;
     });
-    return theme;
+    return theme2;
   };
-  var setHelpers = (theme, value) => {
+  var setHelpers = (theme2, value) => {
     const CONFIG2 = getActiveConfig();
-    const { helpers } = theme;
+    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];
+      if (isString(helper)) helpers[key] = CONFIG2.theme[helper];
       else getThemeValue(helpers[key]);
-      return theme;
+      return theme2;
     });
-    return theme;
+    return theme2;
   };
   var setTheme = (val, key) => {
     const CONFIG2 = getActiveConfig();
     if (CONFIG2.useVariable) return setMediaTheme(val, key);
-    const { state, media, helpers } = val;
+    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, helpers };
+    return { var: CSSvar, value, state, media: media2, helpers };
   };
   var generateAutoVars = (schemes, varPrefix, CONFIG2) => {
     const { CSS_VARS: CSS_VARS2 } = CONFIG2;
@@ -1989,23 +1995,23 @@ var SmblsScratch = (() => {
           for (const scheme in schemes) {
             const val = schemes[scheme]?.[param];
             if (val === void 0) continue;
-            const color = getColor(val, `@${scheme}`);
-            if (color === void 0) continue;
+            const color2 = getColor(val, `@${scheme}`);
+            if (color2 === void 0) continue;
             const selector = `[data-theme="${scheme}"]`;
             if (!MEDIA_VARS[selector]) MEDIA_VARS[selector] = {};
-            MEDIA_VARS[selector][autoVar] = color;
+            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] = color;
+              MEDIA_VARS[mq][autoVar] = color2;
             }
           }
         } else {
           const forced = String(globalTheme).replace(/^'|'$/g, "");
           const source = schemes[forced]?.[param];
           if (source !== void 0) {
-            const color = getColor(source, `@${forced}`);
-            if (color !== void 0) CSS_VARS2[autoVar] = color;
+            const color2 = getColor(source, `@${forced}`);
+            if (color2 !== void 0) CSS_VARS2[autoVar] = color2;
           }
         }
         result[param] = `var(${autoVar})`;
@@ -2023,7 +2029,7 @@ var SmblsScratch = (() => {
   var setMediaTheme = (val, key, suffix, prefers) => {
     const CONFIG2 = getActiveConfig();
     const { CSS_VARS: CSS_VARS2 } = CONFIG2;
-    const theme = { value: val };
+    const theme2 = { value: val };
     const isTopLevel = !suffix && !prefers;
     if (isObjectLike(val)) {
       if (isTopLevel && CONFIG2.useVariable) {
@@ -2035,7 +2041,7 @@ var SmblsScratch = (() => {
         }
         if (Object.keys(schemes).length) {
           const autoResult = generateAutoVars(schemes, key, CONFIG2);
-          Object.assign(theme, autoResult);
+          Object.assign(theme2, autoResult);
         }
       }
       for (const param in val) {
@@ -2043,35 +2049,35 @@ var SmblsScratch = (() => {
         const value = val[param];
         if (symb === "@" || symb === ":" || symb === ".") {
           const hasPrefers = symb === "@" && param;
-          theme[param] = setMediaTheme(value, key, param, prefers || hasPrefers);
+          theme2[param] = setMediaTheme(value, key, param, prefers || hasPrefers);
         } else if (!isTopLevel) {
-          const color = getColor(value, prefers);
+          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] = color;
-            theme[param] = `var(${CSSVar})`;
+            if (CONFIG2.useThemeSuffixedVars) CSS_VARS2[CSSVar] = color2;
+            theme2[param] = `var(${CSSVar})`;
           } else {
-            theme[param] = color;
+            theme2[param] = color2;
           }
-          theme[`.${param}`] = { [param]: theme[param] };
+          theme2[`.${param}`] = { [param]: theme2[param] };
         }
       }
-      if (!theme[".inversed"] && (theme.background || theme.color || theme.backgroundColor)) {
-        theme[".inversed"] = {
-          color: theme.background || theme.backgroundColor,
-          background: theme.color
+      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: THEME2 } = CONFIG2;
-      const value = THEME2[val.slice(2)];
+      const THEME = CONFIG2.theme;
+      const value = THEME[val.slice(2)];
       const getReferenced = getMediaTheme(value, prefers);
       return getReferenced;
     }
-    return theme;
+    return theme2;
   };
   var recursiveTheme = (val) => {
     const CONFIG2 = getActiveConfig();
@@ -2110,7 +2116,7 @@ var SmblsScratch = (() => {
       return;
     }
     const [themeName, ...themeModifiers] = isArray(value) ? value : value.split(" ");
-    let themeValue = activeConfig.THEME[themeName];
+    let themeValue = activeConfig.theme[themeName];
     if (themeValue && themeModifiers.length) {
       themeValue = findModifier(themeValue, themeModifiers);
     } else if (themeValue && modifier) {
@@ -2147,17 +2153,17 @@ var SmblsScratch = (() => {
   };
   var getFontFamily = (key, factory) => {
     const CONFIG2 = getActiveConfig();
-    const { FONT_FAMILY: FONT_FAMILY2 } = CONFIG2;
-    return getDefaultOrFirstKey(factory || FONT_FAMILY2, key);
+    const { font_family: FONT_FAMILY } = CONFIG2;
+    return getDefaultOrFirstKey(factory || FONT_FAMILY, key);
   };
   var setFontFamily = (val, key) => {
     const CONFIG2 = getActiveConfig();
-    const { FONT_FAMILY: FONT_FAMILY2, FONT_FAMILY_TYPES: FONT_FAMILY_TYPES2 } = CONFIG2;
+    const { font_family: FONT_FAMILY, font_family_types: FONT_FAMILY_TYPES } = CONFIG2;
     let { value, type } = val;
-    if (val.isDefault) FONT_FAMILY2.default = key;
+    if (val.isDefault) FONT_FAMILY.default = key;
     if (isObject(value)) value = arrayzeValue(value);
     const CSSvar = `--font-family-${key}`;
-    const str = `${value.join(", ")}, ${FONT_FAMILY_TYPES2[type]}`;
+    const str = `${value.join(", ")}, ${FONT_FAMILY_TYPES[type]}`;
     return { var: CSSvar, value: str, arr: value, type };
   };
 
@@ -2165,14 +2171,14 @@ var SmblsScratch = (() => {
   init_esm();
   var runThroughMedia = (FACTORY2) => {
     const CONFIG2 = getActiveConfig();
-    const { TYPOGRAPHY: TYPOGRAPHY2, MEDIA: MEDIA2 } = CONFIG2;
+    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 } = FACTORY2;
+      const { type, base, ratio, range, subSequence, h1Matches, unit: unit2 } = FACTORY2;
       merge(mediaValue, {
         type,
         base,
@@ -2180,12 +2186,12 @@ var SmblsScratch = (() => {
         range,
         subSequence,
         h1Matches,
-        unit
+        unit: unit2
       });
-      const query = MEDIA2[mediaName];
-      const media = "@media " + (query === "print" ? `${query}` : `screen and ${query}`);
-      TYPOGRAPHY2.templates[media] = {
-        fontSize: mediaValue.base / TYPOGRAPHY2.browserDefault + unit
+      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);
@@ -2204,14 +2210,14 @@ var SmblsScratch = (() => {
   var applyHeadings = (props) => {
     const CONFIG2 = getActiveConfig();
     if (props.h1Matches) {
-      const unit = props.unit;
+      const unit2 = props.unit;
       const HEADINGS = findHeadings(props);
-      const { templates } = props;
+      const { templates: templates2 } = props;
       for (const k in HEADINGS) {
         const headerName = `h${parseInt(k) + 1}`;
-        const headerStyle = templates[headerName];
-        templates[headerName] = {
-          fontSize: CONFIG2.useVariable ? `var(${HEADINGS[k]?.variable})` : `${HEADINGS[k]?.scaling}${unit}`,
+        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,
@@ -2222,16 +2228,16 @@ var SmblsScratch = (() => {
   };
   var applyTypographySequence = () => {
     const CONFIG2 = getActiveConfig();
-    const { TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG2;
-    generateSequence(TYPOGRAPHY2);
-    applyHeadings(TYPOGRAPHY2);
-    applySequenceVars(TYPOGRAPHY2);
-    runThroughMedia(TYPOGRAPHY2);
+    const { typography: TYPOGRAPHY } = CONFIG2;
+    generateSequence(TYPOGRAPHY);
+    applyHeadings(TYPOGRAPHY);
+    applySequenceVars(TYPOGRAPHY);
+    runThroughMedia(TYPOGRAPHY);
   };
   var getFontSizeByKey = (value) => {
     const CONFIG2 = getActiveConfig();
-    const { TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG2;
-    return getSequenceValuePropertyPair(value, "fontSize", TYPOGRAPHY2);
+    const { typography: TYPOGRAPHY } = CONFIG2;
+    return getSequenceValuePropertyPair(value, "fontSize", TYPOGRAPHY);
   };
 
   // src/system/spacing.js
@@ -2241,7 +2247,7 @@ var SmblsScratch = (() => {
       const mediaProps = FACTORY2[prop];
       const isMediaName = prop.slice(0, 1) === "@";
       if (!isMediaName) continue;
-      const { type, base, ratio, range, subSequence, h1Matches, unit } = FACTORY2;
+      const { type, base, ratio, range, subSequence, h1Matches, unit: unit2 } = FACTORY2;
       merge(mediaProps, {
         type,
         base,
@@ -2249,7 +2255,7 @@ var SmblsScratch = (() => {
         range,
         subSequence,
         h1Matches,
-        unit,
+        unit: unit2,
         sequence: {},
         scales: {},
         templates: {},
@@ -2267,20 +2273,20 @@ var SmblsScratch = (() => {
   };
   var applySpacingSequence = () => {
     const CONFIG2 = getActiveConfig();
-    const { SPACING: SPACING2 } = CONFIG2;
-    generateSequence(SPACING2);
-    applySequenceVars(SPACING2);
-    runThroughMedia2(SPACING2);
+    const { spacing: SPACING } = CONFIG2;
+    generateSequence(SPACING);
+    applySequenceVars(SPACING);
+    runThroughMedia2(SPACING);
   };
   var getSequence = (sequenceProps) => {
     const CONFIG2 = getActiveConfig();
-    const { SPACING: SPACING2 } = CONFIG2;
-    if (!sequenceProps || !sequenceProps.sequence) return SPACING2;
+    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 sequence = getSequence(sequenceProps);
+    const sequence2 = getSequence(sequenceProps);
     if (isString(value)) {
       if (!fnPrefix && value.includes("(")) {
         const fnArray = getFnPrefixAndValue(value);
@@ -2304,18 +2310,18 @@ var SmblsScratch = (() => {
       const wrapSequenceValueByDirection = (direction, i) => getSequenceValuePropertyPair(
         stack[i],
         propertyName + direction + suffix,
-        sequence,
+        sequence2,
         fnPrefix
       );
       return directions[stack.length].map(
         (dir, key) => wrapSequenceValueByDirection(dir, key)
       );
     }
-    return getSequenceValuePropertyPair(value, propertyName, sequence, fnPrefix);
+    return getSequenceValuePropertyPair(value, propertyName, sequence2, fnPrefix);
   };
   var getSpacingBasedOnRatio = (props, propertyName, val, fnPrefix) => {
     const CONFIG2 = getActiveConfig();
-    const { SPACING: SPACING2 } = CONFIG2;
+    const { spacing: SPACING } = CONFIG2;
     let value = val || props[propertyName];
     if (!fnPrefix && isString(value) && value.includes("(")) {
       const fnArr = getFnPrefixAndValue(value);
@@ -2326,12 +2332,12 @@ var SmblsScratch = (() => {
       const sequenceProps = applyCustomSequence(props);
       return getSpacingByKey(value, propertyName, sequenceProps, fnPrefix);
     }
-    return getSpacingByKey(value, propertyName, SPACING2, fnPrefix);
+    return getSpacingByKey(value, propertyName, SPACING, fnPrefix);
   };
   var splitSpacedValue = (val) => {
     const addDefault = (v) => {
       const isSymbol = ["+", "-", "*", "/"].includes(v);
-      const hasUnits = CSS_UNITS.some((unit) => val.includes(unit));
+      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";
@@ -2362,18 +2368,18 @@ var SmblsScratch = (() => {
       return obj;
     }
     if (isString(value) && !CSS_NATIVE_COLOR_REGEX.test(value)) {
-      value = splitTopLevelCommas(value).map((shadow) => {
-        shadow = shadow.trim();
-        return shadow.split(/\s+/).map((v) => {
+      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 color = getColor(v);
-          if (isResolvedColor(color)) return color;
+          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 spacing = getSpacingByKey(v, "shadow");
-          if (spacing && spacing.shadow) return spacing.shadow;
+          const spacing2 = getSpacingByKey(v, "shadow");
+          if (spacing2 && spacing2.shadow) return spacing2.shadow;
           return v;
         }).join(" ");
       }).join(", ");
@@ -2396,8 +2402,8 @@ var SmblsScratch = (() => {
     }
     if (isCSSVar(value)) return `var(${value})`;
     const [name] = isArray(value) ? value : value.split(" ");
-    const { SHADOW: SHADOW2 } = CONFIG2;
-    const val = SHADOW2[name];
+    const SHADOW = CONFIG2.shadow;
+    const val = SHADOW[name];
     const isObj = isObject(val);
     if (!val) {
       if (CONFIG2.verbose) console.warn("Can't find color ", name);
@@ -2411,9 +2417,9 @@ var SmblsScratch = (() => {
     if (isObj) {
       const obj = {};
       for (const mediaName in val) {
-        const query = CONFIG2.MEDIA[mediaName.slice(1)];
-        const media = "@media " + (query === "print" ? `${query}` : `screen and ${query}`);
-        obj[media] = val.value;
+        const query = CONFIG2.media[mediaName.slice(1)];
+        const media2 = "@media " + (query === "print" ? `${query}` : `screen and ${query}`);
+        obj[media2] = val.value;
       }
       return obj;
     }
@@ -2424,22 +2430,22 @@ var SmblsScratch = (() => {
   // src/system/timing.js
   var applyTimingSequence = () => {
     const CONFIG2 = getActiveConfig();
-    const { TIMING: TIMING2 } = CONFIG2;
-    generateSequence(TIMING2);
-    applySequenceVars(TIMING2);
+    const { timing: TIMING } = CONFIG2;
+    generateSequence(TIMING);
+    applySequenceVars(TIMING);
   };
   var getTimingFunction = (value) => {
     const CONFIG2 = getActiveConfig();
-    const { TIMING: TIMING2 } = CONFIG2;
-    return TIMING2[value] || TIMING2[toCamelCase(value)] || value;
+    const { timing: TIMING } = CONFIG2;
+    return TIMING[value] || TIMING[toCamelCase(value)] || value;
   };
   var getTimingByKey = (value, property = "timing") => {
     const CONFIG2 = getActiveConfig();
-    const { TIMING: TIMING2 } = CONFIG2;
+    const { timing: TIMING } = CONFIG2;
     return getSequenceValuePropertyPair(
       value,
       property,
-      TIMING2
+      TIMING
     );
   };
 
@@ -2447,12 +2453,12 @@ var SmblsScratch = (() => {
   init_esm();
   var applyDocument = () => {
     const CONFIG2 = getActiveConfig();
-    const { DOCUMENT: DOCUMENT2, FONT_FAMILY: FONT_FAMILY2, THEME: THEME2, TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG2;
-    return merge(DOCUMENT2, {
-      theme: THEME2.document,
-      fontFamily: getDefaultOrFirstKey(FONT_FAMILY2),
-      fontSize: TYPOGRAPHY2.base,
-      lineHeight: TYPOGRAPHY2.lineHeight
+    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
     });
   };
 
@@ -2474,21 +2480,21 @@ var SmblsScratch = (() => {
   };
   var appendSVGSprite = (LIBRARY, options = DEF_OPTIONS) => {
     const CONFIG2 = getActiveConfig();
-    const lib = Object.keys(LIBRARY).length ? {} : CONFIG2.SVG;
-    for (const key in LIBRARY) lib[key] = CONFIG2.SVG[key];
+    const lib = Object.keys(LIBRARY).length ? {} : CONFIG2.svg;
+    for (const key in LIBRARY) lib[key] = CONFIG2.svg[key];
     appendSVG(lib, options);
   };
   var setSvgIcon = (val, key) => {
     const CONFIG2 = getActiveConfig();
-    if (CONFIG2.useIconSprite && !CONFIG2.SEMANTIC_ICONS?.[key]) {
+    if (CONFIG2.useIconSprite && !CONFIG2.semantic_icons?.[key]) {
       return setSVG(val, key);
     }
     return val;
   };
   var appendSvgIconsSprite = (LIBRARY, options = DEF_OPTIONS) => {
     const CONFIG2 = getActiveConfig();
-    const lib = Object.keys(LIBRARY).length ? {} : CONFIG2.ICONS;
-    for (const key in LIBRARY) lib[key] = CONFIG2.ICONS[key];
+    const lib = Object.keys(LIBRARY).length ? {} : CONFIG2.icons;
+    for (const key in LIBRARY) lib[key] = CONFIG2.icons[key];
     appendSVG(lib, options);
   };
   var createSVGSpriteElement = (options = { isRoot: true }) => {
@@ -2529,13 +2535,13 @@ var SmblsScratch = (() => {
 
   // src/system/reset.js
   init_esm();
-  var applyReset = (reset = {}) => {
+  var applyReset = (reset2 = {}) => {
     const CONFIG2 = getActiveConfig();
-    const { RESET: RESET2, TYPOGRAPHY: TYPOGRAPHY2, DOCUMENT: DOCUMENT2 } = CONFIG2;
-    if (RESET2) {
-      if (RESET2[":root"]) {
-        const configReset = RESET2;
-        const configTemplates = TYPOGRAPHY2.templates;
+    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
@@ -2547,10 +2553,10 @@ var SmblsScratch = (() => {
         configReset.h5 = configTemplates.h5;
         configReset.h6 = configTemplates.h6;
       }
-      const { body, ...templates } = TYPOGRAPHY2.templates;
+      const { body, ...templates2 } = TYPOGRAPHY.templates;
       const globalTheme = CONFIG2.useDocumentTheme ? getMediaTheme("document") : {};
-      if (RESET2.html) overwriteDeep(RESET2.html, globalTheme);
-      return deepMerge(merge(RESET2, reset), {
+      if (RESET.html) overwriteDeep(RESET.html, globalTheme);
+      return deepMerge(merge(RESET, reset2), {
         html: {
           position: "absolute",
           // overflow: 'hidden',
@@ -2562,17 +2568,17 @@ var SmblsScratch = (() => {
           WebkitFontSmoothing: "subpixel-antialiased",
           scrollBehavior: "smooth",
           ...globalTheme,
-          fontSize: TYPOGRAPHY2.browserDefault + "px",
-          fontFamily: DOCUMENT2.fontFamily,
-          lineHeight: DOCUMENT2.lineHeight
+          fontSize: TYPOGRAPHY.browserDefault + "px",
+          fontFamily: DOCUMENT.fontFamily,
+          lineHeight: DOCUMENT.lineHeight
         },
         body: {
           boxSizing: "border-box",
           height: "100%",
           margin: 0,
-          fontFamily: DOCUMENT2.fontFamily,
-          fontSize: TYPOGRAPHY2.base / TYPOGRAPHY2.browserDefault + CONFIG2.UNIT.default,
-          ...templates,
+          fontFamily: DOCUMENT.fontFamily,
+          fontSize: TYPOGRAPHY.base / TYPOGRAPHY.browserDefault + CONFIG2.unit.default,
+          ...templates2,
           ...body
         },
         a: {
@@ -2585,7 +2591,7 @@ var SmblsScratch = (() => {
           margin: 0
         },
         "select, input": {
-          fontFamily: DOCUMENT2.fontFamily
+          fontFamily: DOCUMENT.fontFamily
         }
       });
     }
@@ -2634,10 +2640,10 @@ var SmblsScratch = (() => {
       if (isCSSVar(v)) return `var(${v})`;
       if (isBorderStyle(v)) return v;
       if (/^\d/.test(v) || v === "0") return v;
-      const color = getColor(v);
-      if (isResolvedColor(color)) return color;
-      const spacing = getSpacingByKey(v, "border");
-      if (spacing && spacing.border) return spacing.border;
+      const color2 = getColor(v);
+      if (isResolvedColor(color2)) return color2;
+      const spacing2 = getSpacingByKey(v, "border");
+      if (spacing2 && spacing2.border) return spacing2.border;
       return v;
     }).join(" ");
   };
@@ -2648,24 +2654,24 @@ var SmblsScratch = (() => {
       if (!v) return "";
       if (isCSSVar(v)) return `var(${v})`;
       if (/^\d/.test(v) || v.includes("px") || v === "0") return v;
-      const color = getColor(v);
-      if (isResolvedColor(color)) return color;
+      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((shadow) => {
-      shadow = shadow.trim();
-      if (!shadow) return "";
-      return shadow.split(/\s+/).map((v) => {
+    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 color = getColor(v);
-        if (isResolvedColor(color)) {
+        const color2 = getColor(v);
+        if (isResolvedColor(color2)) {
           const mediaColor = getMediaColor(v, globalTheme);
           if (isObject(mediaColor))
             return Object.values(mediaColor).filter(
@@ -2674,17 +2680,17 @@ var SmblsScratch = (() => {
           return mediaColor;
         }
         if (/^\d/.test(v) || v === "0" || v.includes("px") || v.slice(-2) === "em") return v;
-        const spacing = getSpacingByKey(v, "shadow");
-        if (spacing && spacing.shadow) return spacing.shadow;
+        const spacing2 = getSpacingByKey(v, "shadow");
+        if (spacing2 && spacing2.shadow) return spacing2.shadow;
         return v;
       }).join(" ");
     }).join(", ");
   };
-  var resolveColorsInGradient = (gradient, globalTheme) => {
-    const parenStart = gradient.indexOf("(");
-    if (parenStart === -1) return gradient;
-    const prefix = gradient.slice(0, parenStart + 1);
-    const inner = gradient.slice(parenStart + 1, gradient.lastIndexOf(")"));
+  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) => {
@@ -2696,8 +2702,8 @@ var SmblsScratch = (() => {
         if (GRADIENT_KEYWORDS.has(token)) return token;
         if (token === "transparent") return token;
         if (CSS_NATIVE_COLOR_REGEX.test(token)) return token;
-        const color = getColor(token);
-        if (isResolvedColor(color)) return color;
+        const color2 = getColor(token);
+        if (isResolvedColor(color2)) return color2;
         return token;
       }).join(" ");
     });
@@ -2709,7 +2715,7 @@ var SmblsScratch = (() => {
       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]) {
+      else if (CONFIG2.gradient[backgroundImage]) {
         return {
           backgroundImage: getMediaColor(
             backgroundImage,
@@ -2786,9 +2792,11 @@ var SmblsScratch = (() => {
     gradient: setGradient,
     font: setFont,
     font_family: setFontFamily,
+    fontfamily: setFontFamily,
     theme: setTheme,
     icons: setSvgIcon,
     semantic_icons: setSameValue,
+    semanticicons: setSameValue,
     svg: setSVG,
     svg_data: setSameValue,
     typography: setSameValue,
@@ -2845,8 +2853,9 @@ var SmblsScratch = (() => {
       globalTheme,
       useDocumentTheme,
       useDefaultConfig,
-      SEMANTIC_ICONS: SEMANTIC_ICONS2,
-      semantic_icons,
+      semanticIcons,
+      SEMANTIC_ICONS,
+      semantic_icons: semantic_icons2,
       files,
       ...config
     } = recivedConfig;
@@ -2864,9 +2873,10 @@ var SmblsScratch = (() => {
     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 = SEMANTIC_ICONS2 || semantic_icons;
+    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);
@@ -2884,21 +2894,21 @@ var SmblsScratch = (() => {
       if (lower !== key && keySet.has(lower)) return;
       return setEach(key, config[key]);
     });
-    if (config.TYPOGRAPHY || config.typography) {
+    if (config.typography || config.TYPOGRAPHY) {
       try {
         applyTypographySequence();
       } catch (e) {
         if (CONFIG2.verbose) console.warn("Error applying typography sequence", e);
       }
     }
-    if (config.SPACING || config.spacing) {
+    if (config.spacing || config.SPACING) {
       try {
         applySpacingSequence();
       } catch (e) {
         if (CONFIG2.verbose) console.warn("Error applying spacing sequence", e);
       }
     }
-    if (config.TIMING || config.timing) {
+    if (config.timing || config.TIMING) {
       try {
         applyTimingSequence();
       } catch (e) {