@symbo.ls/scratch 2.9.3 → 2.9.7-0

package/dist/index.js

@@ -0,0 +1,1548 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.js
+var src_exports = {};
+__export(src_exports, {
+  ANIMATION: () => ANIMATION,
+  BREAKPOINTS: () => BREAKPOINTS,
+  CASES: () => CASES,
+  COLOR: () => COLOR,
+  CONFIG: () => CONFIG,
+  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,
+  ICONS: () => ICONS,
+  MEDIA: () => MEDIA,
+  RESET: () => RESET,
+  SEQUENCE: () => SEQUENCE,
+  SETTERS: () => SETTERS,
+  SPACING: () => SPACING,
+  THEME: () => THEME,
+  TIMING: () => TIMING,
+  TYPOGRAPHY: () => TYPOGRAPHY,
+  UNIT: () => UNIT,
+  activateConfig: () => activateConfig,
+  applyDocument: () => applyDocument,
+  applyHeadings: () => applyHeadings,
+  applyReset: () => applyReset,
+  applySequenceVars: () => applySequenceVars,
+  applySpacingSequence: () => applySpacingSequence,
+  applyTimingSequence: () => applyTimingSequence,
+  applyTypographySequence: () => applyTypographySequence,
+  arrayze: () => arrayze,
+  changeLightness: () => changeLightness,
+  colorStringToRgbaArray: () => colorStringToRgbaArray,
+  deepMerge: () => deepMerge2,
+  findHeadingLetter: () => findHeadingLetter,
+  findHeadings: () => findHeadings,
+  generateSequence: () => generateSequence,
+  generateSubSequence: () => generateSubSequence,
+  getActiveConfig: () => getActiveConfig,
+  getColor: () => getColor,
+  getColorShade: () => getColorShade,
+  getDefaultOrFirstKey: () => getDefaultOrFirstKey,
+  getFontFace: () => getFontFace,
+  getFontFaceEach: () => getFontFaceEach,
+  getFontFaceEachString: () => getFontFaceEachString,
+  getFontFaceString: () => getFontFaceString,
+  getFontFamily: () => getFontFamily,
+  getFontFormat: () => getFontFormat,
+  getFontSizeByKey: () => getFontSizeByKey,
+  getMediaColor: () => getMediaColor,
+  getMediaTheme: () => getMediaTheme,
+  getSequenceValue: () => getSequenceValue,
+  getSequenceValuePropertyPair: () => getSequenceValuePropertyPair,
+  getSpacingBasedOnRatio: () => getSpacingBasedOnRatio,
+  getSpacingByKey: () => getSpacingByKey,
+  getTheme: () => getTheme,
+  getTimingByKey: () => getTimingByKey,
+  getTimingFunction: () => getTimingFunction,
+  hexToRgb: () => hexToRgb,
+  hexToRgbArray: () => hexToRgbArray,
+  hexToRgba: () => hexToRgba,
+  hslToRgb: () => hslToRgb,
+  isArray: () => isArray2,
+  isFunction: () => isFunction2,
+  isObject: () => isObject2,
+  isObjectLike: () => isObjectLike2,
+  isString: () => isString2,
+  merge: () => merge2,
+  mixTwoColors: () => mixTwoColors,
+  mixTwoRgb: () => mixTwoRgb,
+  mixTwoRgba: () => mixTwoRgba,
+  numToLetterMap: () => numToLetterMap,
+  opacify: () => opacify,
+  rgbArrayToHex: () => rgbArrayToHex,
+  rgbToHSL: () => rgbToHSL,
+  rgbToHex: () => rgbToHex,
+  runThroughMedia: () => runThroughMedia,
+  set: () => set,
+  setColor: () => setColor,
+  setCustomFont: () => setCustomFont,
+  setCustomFontMedia: () => setCustomFontMedia,
+  setEach: () => setEach,
+  setFont: () => setFont,
+  setFontFamily: () => setFontFamily,
+  setGradient: () => setGradient,
+  setInCustomFontMedia: () => setInCustomFontMedia,
+  setMediaTheme: () => setMediaTheme,
+  setTheme: () => setTheme,
+  setValue: () => setValue,
+  setVariables: () => setVariables
+});
+module.exports = __toCommonJS(src_exports);
+
+// ../../node_modules/@domql/globals/index.js
+var window2 = globalThis;
+var document2 = window2.document;
+
+// ../../node_modules/@domql/utils/types.js
+var isObject = (arg) => {
+  if (arg === null)
+    return false;
+  return typeof arg === "object" && arg.constructor === Object;
+};
+var isString = (arg) => typeof arg === "string";
+var isNumber = (arg) => typeof arg === "number";
+var isFunction = (arg) => typeof arg === "function";
+var isBoolean = (arg) => arg === true || arg === false;
+var isNull = (arg) => arg === null;
+var isArray = (arg) => Array.isArray(arg);
+var isObjectLike = (arg) => {
+  if (arg === null)
+    return false;
+  return typeof arg === "object";
+};
+var isDefined = (arg) => {
+  return isObject(arg) || isObjectLike(arg) || isString(arg) || isNumber(arg) || isFunction(arg) || isArray(arg) || isObjectLike(arg) || isBoolean(arg) || isNull(arg);
+};
+
+// ../../node_modules/@domql/utils/object.js
+var merge = (element, obj) => {
+  for (const e in obj) {
+    const elementProp = element[e];
+    const objProp = obj[e];
+    if (elementProp === void 0) {
+      element[e] = objProp;
+    }
+  }
+  return element;
+};
+var deepMerge = (element, extend) => {
+  for (const e in extend) {
+    const elementProp = element[e];
+    const extendProp = extend[e];
+    if (e === "parent" || e === "props")
+      continue;
+    if (elementProp === void 0) {
+      element[e] = extendProp;
+    } else if (isObjectLike(elementProp) && isObject(extendProp)) {
+      deepMerge(elementProp, extendProp);
+    }
+  }
+  return element;
+};
+var deepClone = (obj) => {
+  if (isArray(obj)) {
+    return obj.map(deepClone);
+  }
+  const o = {};
+  for (const prop in obj) {
+    let objProp = obj[prop];
+    if (prop === "extend" && isArray(objProp)) {
+      objProp = mergeArray(objProp);
+    }
+    if (isArray(objProp)) {
+      o[prop] = objProp.map(deepClone);
+    } else if (isObject(objProp)) {
+      o[prop] = deepClone(objProp);
+    } else
+      o[prop] = objProp;
+  }
+  return o;
+};
+var mergeArray = (arr) => {
+  return arr.reduce((a, c) => deepMerge(a, deepClone(c)), {});
+};
+
+// ../../node_modules/@domql/utils/node.js
+var createID = function* () {
+  let index = 1;
+  while (index < index + 1) {
+    yield index++;
+  }
+}();
+
+// src/defaultConfig/index.js
+var defaultConfig_exports = {};
+__export(defaultConfig_exports, {
+  ANIMATION: () => ANIMATION,
+  BREAKPOINTS: () => BREAKPOINTS,
+  CASES: () => CASES,
+  COLOR: () => COLOR,
+  DEVICES: () => DEVICES,
+  DOCUMENT: () => DOCUMENT,
+  FONT: () => FONT,
+  FONT_FACE: () => FONT_FACE,
+  FONT_FAMILY: () => FONT_FAMILY,
+  FONT_FAMILY_TYPES: () => FONT_FAMILY_TYPES,
+  GRADIENT: () => GRADIENT,
+  ICONS: () => ICONS,
+  MEDIA: () => MEDIA,
+  RESET: () => RESET,
+  SEQUENCE: () => SEQUENCE,
+  SPACING: () => SPACING,
+  THEME: () => THEME,
+  TIMING: () => TIMING,
+  TYPOGRAPHY: () => TYPOGRAPHY,
+  UNIT: () => UNIT
+});
+
+// src/defaultConfig/sequence.js
+var SEQUENCE = {
+  "minor-second": 1.067,
+  "major-second": 1.125,
+  "minor-third": 1.2,
+  "major-third": 1.25,
+  "perfect-fourth": 1.333,
+  "augmented-fourth": 1.414,
+  "perfect-fifth": 1.5,
+  "minor-sixth": 1.6,
+  phi: 1.618,
+  // golden-ratio
+  "major-sixth": 1.667,
+  "square-root-3": 1.732,
+  // theodorus
+  "minor-seventh": 1.778,
+  "major-seventh": 1.875,
+  octave: 2,
+  "square-root-5": 2.23,
+  // pythagoras
+  "major-tenth": 2.5,
+  "major-eleventh": 2.667,
+  "major-twelfth": 3,
+  pi: 3.14,
+  // archimedes
+  "double-octave": 4
+};
+
+// src/defaultConfig/unit.js
+var UNIT = {
+  default: "em"
+};
+
+// src/defaultConfig/typography.js
+var defaultProps = {
+  browserDefault: 16,
+  base: 16,
+  type: "font-size",
+  ratio: SEQUENCE["minor-third"],
+  range: [-3, 12],
+  h1Matches: 6,
+  lineHeight: 1.5,
+  unit: "em",
+  styles: {},
+  sequence: {},
+  scales: {},
+  vars: {}
+};
+var TYPOGRAPHY = defaultProps;
+
+// src/defaultConfig/font.js
+var FONT = {};
+
+// src/utils/object.js
+var isString2 = (arg) => typeof arg === "string";
+var isArray2 = (arg) => Array.isArray(arg);
+var isObject2 = (arg) => {
+  if (arg === null)
+    return false;
+  return typeof arg === "object" && arg.constructor === Object;
+};
+var isObjectLike2 = (arg) => {
+  if (arg === null)
+    return false;
+  return typeof arg === "object";
+};
+var merge2 = (obj, original) => {
+  for (const e in original) {
+    const objProp = obj[e];
+    const originalProp = original[e];
+    if (objProp === void 0) {
+      obj[e] = originalProp;
+    }
+  }
+  return obj;
+};
+var deepMerge2 = (obj, obj2) => {
+  for (const e in obj2) {
+    const objProp = obj[e];
+    const obj2Prop = obj2[e];
+    if (objProp === void 0) {
+      obj[e] = obj2Prop;
+    } else if (isObjectLike2(objProp) && isObject2(obj2Prop)) {
+      deepMerge2(objProp, obj2Prop);
+    }
+  }
+  return obj;
+};
+var arrayze = (val) => {
+  if (isString2(val))
+    return val.split(" ");
+  if (isObject2(val))
+    return Object.keys(val).map((v) => val[v]);
+  if (isArray2(val))
+    return val;
+};
+var isFunction2 = (arg) => typeof arg === "function";
+
+// src/utils/color.js
+var ENV = "development";
+var colorStringToRgbaArray = (color) => {
+  if (color === "")
+    return;
+  if (color.toLowerCase() === "transparent")
+    return [0, 0, 0, 0];
+  if (color[0] === "#") {
+    if (color.length < 7) {
+      color = "#" + color[1] + color[1] + color[2] + color[2] + color[3] + color[3] + (color.length > 4 ? color[4] + color[4] : "");
+    }
+    return [
+      parseInt(color.substr(1, 2), 16),
+      parseInt(color.substr(3, 2), 16),
+      parseInt(color.substr(5, 2), 16),
+      color.length > 7 ? parseInt(color.substr(7, 2), 16) / 255 : 1
+    ];
+  }
+  if (color.indexOf("rgb") === -1) {
+    const elem = document.body.appendChild(document.createElement("fictum"));
+    const flag = "rgb(1, 2, 3)";
+    elem.style.color = flag;
+    if (elem.style.color !== flag)
+      return;
+    elem.style.color = color;
+    if (elem.style.color === flag || elem.style.color === "")
+      return;
+    color = window.getComputedStyle(elem).color;
+    document.body.removeChild(elem);
+  }
+  if (color.indexOf("rgb") === 0) {
+    if (color.indexOf("rgba") === -1)
+      color = `${color}, 1`;
+    return color.match(/[\.\d]+/g).map((a) => +a);
+  }
+};
+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).toString(16);
+};
+var mixTwoRgba = (colorA, colorB, range = 0.5) => {
+  const arr = [];
+  for (let i = 0; i < 4; i++) {
+    const round = i === 3 ? (x) => x : Math.round;
+    arr[i] = round(
+      colorA[i] + (colorB[i] - colorA[i]) * range
+    );
+  }
+  return `rgba(${arr})`;
+};
+var opacify = (color, opacity) => {
+  const arr = colorStringToRgbaArray(color);
+  if (!arr) {
+    if (ENV === "test" || ENV === "development")
+      console.warn(color + "color is not rgba");
+    return;
+  }
+  arr[3] = opacity;
+  return `rgba(${arr})`;
+};
+
+// src/utils/font.js
+var getDefaultOrFirstKey = (LIBRARY, key) => {
+  if (LIBRARY[key])
+    return LIBRARY[key].value;
+  if (LIBRARY.default)
+    return LIBRARY[LIBRARY.default].value;
+  const hasValue = Object.keys(LIBRARY)[0];
+  return hasValue && LIBRARY[hasValue] && LIBRARY[hasValue].value;
+};
+var getFontFormat = (url) => url.split(/[#?]/)[0].split(".").pop().trim();
+var setInCustomFontMedia = (str) => `@font-face { ${str} }`;
+var setCustomFont = (name, url, weight) => `
+  font-family: '${name}';
+  font-style: normal;
+  ${weight && `font-weight: ${weight};`}
+  src: url('${url}') format('${getFontFormat(url)}');`;
+var setCustomFontMedia = (name, url, weight) => `@font-face {
+  ${setCustomFont(name, url, weight)}
+}`;
+var getFontFaceEach = (name, weights) => {
+  const keys = Object.keys(weights);
+  return keys.map((key) => {
+    const { url, fontWeight } = weights[key];
+    return setCustomFont(name, url, fontWeight);
+  });
+};
+var getFontFace = (LIBRARY) => {
+  const keys = Object.keys(LIBRARY);
+  return keys.map((key) => getFontFaceEach(key, LIBRARY[key].value));
+};
+var getFontFaceEachString = (name, weights) => {
+  const isArr = weights[0];
+  if (isArr)
+    return getFontFaceEach(name, weights).map(setInCustomFontMedia);
+  return setCustomFontMedia(name, weights.url);
+};
+var getFontFaceString = (LIBRARY) => {
+  const keys = Object.keys(LIBRARY);
+  return keys.map((key) => getFontFaceEachString(key, LIBRARY[key].value));
+};
+
+// ../../node_modules/@symbo.ls/utils/src/index.js
+var toCamelCase = (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-Z]/g, (match, offset) => (offset > 0 ? "-" : "") + match.toLowerCase()).replace(".", "-");
+
+// 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 } = props;
+  sequenceProps.sequence[key] = {
+    key,
+    decimal: ~~(value * 100) / 100,
+    val: ~~value,
+    scaling,
+    index,
+    variable
+  };
+  sequenceProps.scales[key] = scaling;
+  sequenceProps.vars[variable] = scaling + sequenceProps.unit;
+};
+var generateSubSequence = (props, sequenceProps) => {
+  const { key, base, value, ratio, variable, index } = props;
+  const next = value * ratio;
+  const diff = next - value;
+  const smallscale = diff / 1.618;
+  const valueRounded = ~~value;
+  const nextRounded = ~~next;
+  const diffRounded = nextRounded - valueRounded;
+  let arr = [];
+  const first = next - smallscale;
+  const second = value + smallscale;
+  const middle = (first + second) / 2;
+  if (diffRounded > 16)
+    arr = [first, middle, second];
+  else
+    arr = [first, second];
+  arr.map((v, k) => {
+    const scaling = ~~(v / base * 1e3) / 1e3;
+    const newVar = variable + (k + 1);
+    const props2 = {
+      key: key + (k + 1),
+      variable: newVar,
+      value: v,
+      scaling,
+      index: index + (k + 1) / 10
+    };
+    return 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 props = {
+      key: letterKey,
+      variable,
+      value,
+      base,
+      scaling,
+      ratio,
+      index: key
+    };
+    setSequenceValue(props, sequenceProps);
+    if (subSequence)
+      generateSubSequence(props, sequenceProps);
+  }
+  return sequenceProps;
+};
+var getSequenceValue = (value = "A", sequenceProps) => {
+  const CONFIG2 = getActiveConfig();
+  const { UNIT: UNIT2 } = CONFIG2;
+  const {
+    sequence,
+    unit = UNIT2.default,
+    useVariable
+  } = sequenceProps;
+  if (isString(value) && value.slice(0, 2) === "--")
+    return `var(${value})`;
+  const prefix = `--${toDashCase(sequenceProps.type.replace(".", "-"))}-`;
+  const startsWithDashOrLetterRegex = /^-?[a-zA-Z]/i;
+  const startsWithDashOrLetter = startsWithDashOrLetterRegex.test(value);
+  if (value === "none" || value === "auto" || value === "unset" || value === "inherit" || value === "fit-content" || value === "min-content" || value === "max-content" || value.includes("calc") || !startsWithDashOrLetter)
+    return value;
+  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) => `var(${prefix}${v}${mediaName})`;
+  if (absValue.includes("+")) {
+    const args = absValue.split("+");
+    const [first, second] = args;
+    const joint = `${varValue(first)} + ${varValue(second)}`;
+    return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
+  } else if (absValue.includes("-")) {
+    const args = absValue.split("-");
+    const [first, second] = args;
+    const joint = `${varValue(first)} - ${varValue(second)}`;
+    return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
+  }
+  if (!sequence[absValue] && absValue.length === 2) {
+    if (CONFIG2.verbose)
+      console.warn(absValue, "- value is not found because `subSequence` is set to false");
+    absValue = absValue.slice(0, 1);
+  }
+  if (useVariable || CONFIG2.useVariable) {
+    const varValue2 = `var(${prefix}${absValue}${mediaName})`;
+    return isNegative ? `calc(${varValue2} * -1)` : varValue2;
+  }
+  const sequenceItem = sequence ? sequence[absValue] : null;
+  if (!sequenceItem)
+    return console.warn("can't find", sequence, absValue);
+  if (unit === "ms" || unit === "s") {
+    return isNegative + sequenceItem.val + unit;
+  }
+  return isNegative + sequenceItem.scaling + unit;
+};
+var getSequenceValuePropertyPair = (value, propertyName, sequenceProps) => {
+  if (typeof value !== "string") {
+    console.warn(propertyName, value, "is not a string");
+    return {};
+  }
+  if (value === "-" || value === "")
+    return {};
+  return { [propertyName]: getSequenceValue(value, sequenceProps) };
+};
+var findHeadingLetter = (h1Matches, index) => numToLetterMap[h1Matches - index];
+var findHeadings = (propertyNames) => {
+  const { h1Matches, sequence } = propertyNames;
+  return new Array(6).fill(null).map((_, i) => {
+    const findLetter = findHeadingLetter(h1Matches, i);
+    return sequence[findLetter];
+  });
+};
+
+// src/utils/var.js
+var setVariables = (result, key) => {
+  const CONFIG2 = getActiveConfig();
+  const { CSS_VARS: CSS_VARS2 } = CONFIG2;
+  if (isObjectLike(result.value)) {
+  } else {
+    CSS_VARS2[result.var] = result.value;
+  }
+};
+var applySequenceVars = (props, mediaName, options = {}) => {
+  const CONFIG2 = getActiveConfig();
+  const { UNIT: UNIT2, MEDIA: MEDIA2, TIMING: TIMING2, CSS_VARS: CSS_VARS2 } = CONFIG2;
+  const unit = props.unit || UNIT2.default;
+  const { sequence, scales } = props;
+  for (const key in sequence) {
+    const item = sequence[key];
+    const value = (props.type === TIMING2.type ? sequence[key].val : scales[key]) + unit;
+    if (mediaName) {
+      const query = MEDIA2[mediaName];
+      if (!query) {
+        if (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;
+    } else {
+      if (options.useDefault === false) {
+        CSS_VARS2[item.variable] = value;
+      } else {
+        CSS_VARS2[item.variable + "-default"] = value;
+        CSS_VARS2[item.variable] = `var(${item.variable + "-default"})`;
+      }
+    }
+  }
+};
+
+// src/defaultConfig/font-family.js
+var FONT_FAMILY = {};
+var FONT_FAMILY_TYPES = {
+  serif: "Helvetica, Arial, sans-serif, --system-default",
+  "sans-serif": "Times New Roman, Georgia, serif, --system-default",
+  monospace: "Courier New, monospace, --system-default"
+};
+var FONT_FACE = getFontFace(FONT_FAMILY);
+
+// src/defaultConfig/media.js
+var MEDIA = {
+  tv: "(min-width: 2780px)",
+  screenL: "(max-width: 1920px)",
+  screenM: "(max-width: 1680px)",
+  screenS: "(max-width: 1440px)",
+  tabletL: "(max-width: 1366px)",
+  tabletM: "(max-width: 1280px)",
+  tabletS: "(max-width: 1024px)",
+  mobileL: "(max-width: 768px)",
+  mobileM: "(max-width: 560px)",
+  mobileS: "(max-width: 480px)",
+  mobileXS: "(max-width: 375px)",
+  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,
+  unit: "em",
+  sequence: {},
+  scales: {},
+  vars: {}
+};
+var SPACING = defaultProps2;
+
+// src/defaultConfig/color.js
+var COLOR = {};
+var GRADIENT = {};
+
+// src/defaultConfig/theme.js
+var THEME = {};
+
+// src/defaultConfig/icons.js
+var ICONS = {};
+
+// src/defaultConfig/timing.js
+var defaultProps3 = {
+  default: 150,
+  base: 150,
+  type: "timing",
+  ratio: SEQUENCE["perfect-fourth"],
+  range: [-3, 12],
+  unit: "ms",
+  sequence: {},
+  scales: {},
+  vars: {}
+};
+var TIMING = defaultProps3;
+
+// src/defaultConfig/document.js
+var DOCUMENT = {};
+
+// src/defaultConfig/responsive.js
+var BREAKPOINTS = {
+  screenL: 1920,
+  screenM: 1680,
+  screenS: 1440,
+  tabletL: 1366,
+  tabletM: 1280,
+  tabletS: 1024,
+  mobileL: 768,
+  mobileM: 560,
+  mobileS: 480,
+  mobileXS: 375
+};
+var DEVICES = {
+  screenL: [1920, 1024],
+  screenM: [1680, 1024],
+  screenS: [1440, 978],
+  tabletL: [1366, 926],
+  tabletM: [1280, 768],
+  tabletS: [1024, 768],
+  mobileL: [768, 375],
+  mobileM: [560, 768],
+  mobileS: [480, 768],
+  mobileXS: [375, 768]
+};
+
+// src/defaultConfig/cases.js
+var CASES = {};
+
+// src/defaultConfig/animation.js
+var ANIMATION = {};
+
+// src/defaultConfig/index.js
+var RESET = {};
+
+// src/factory.js
+var CSS_VARS = {};
+var CONFIG = {
+  verbose: false,
+  useVariable: true,
+  useReset: true,
+  CSS_VARS,
+  ...defaultConfig_exports
+};
+var cachedConfig = deepClone(CONFIG);
+var FACTORY = {
+  active: "0",
+  0: CONFIG
+};
+var activateConfig = (def) => {
+  if (isDefined(def)) {
+    FACTORY.active = def;
+  }
+  return FACTORY[def || FACTORY.active];
+};
+var getActiveConfig = (def) => {
+  if (isDefined(def) && !FACTORY[def]) {
+    FACTORY[def] = deepClone(cachedConfig);
+    return FACTORY[def];
+  }
+  return FACTORY[def || FACTORY.active];
+};
+
+// src/system/color.js
+var getColor = (value, key) => {
+  const CONFIG2 = getActiveConfig();
+  if (!isString(value)) {
+    if (CONFIG2.verbose)
+      console.warn(value, "- type for color is not valid");
+    return;
+  }
+  if (value.slice(0, 2) === "--")
+    return `var(${value})`;
+  if (key && value[key])
+    value = value[key];
+  const [name, alpha, tone] = isArray(value) ? value : value.split(" ");
+  const { COLOR: COLOR2, GRADIENT: GRADIENT2 } = CONFIG2;
+  let val = COLOR2[name] || GRADIENT2[name];
+  if (!val) {
+    if (CONFIG2.verbose)
+      console.warn("Can't find color ", name);
+    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) {
+    if (tone) {
+      if (!val[tone]) {
+        const toHex = rgbArrayToHex(rgb.split(", ").map((v) => parseFloat(v)));
+        if (tone.slice(0, 1) === "-" || tone.slice(0, 1) === "+") {
+          rgb = hexToRgbArray(getColorShade(toHex, parseFloat(tone))).join(", ");
+        } else {
+          const [r, g, b] = [...rgb.split(", ").map((v) => parseInt(v))];
+          const hsl = rgbToHSL(r, g, b);
+          const [h, s, l] = hsl;
+          const newRgb = hslToRgb(h, s, parseFloat(tone) / 100 * 255);
+          rgb = newRgb;
+        }
+        val[tone] = { rgb, var: `${val.var}-${tone}` };
+      } else
+        rgb = val[tone].rgb;
+    }
+    if (alpha)
+      return `rgba(${rgb}, ${alpha})`;
+    return CONFIG2.useVariable ? `var(${val.var})` : `rgb(${rgb})`;
+  } else
+    return CONFIG2.useVariable ? `var(${val.var})` : val.value;
+};
+var getMediaColor = (value, property, 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 (value.slice(0, 2) === "--")
+    return { [property]: `var(${value})` };
+  const [name] = isArray(value) ? value : value.split(" ");
+  const { COLOR: COLOR2, GRADIENT: GRADIENT2 } = CONFIG2;
+  const val = COLOR2[name] || GRADIENT2[name];
+  const isObj = isObject(val);
+  if (isObj && val.value)
+    return { [property]: getColor(value, globalTheme) };
+  else if (isObj) {
+    if (globalTheme)
+      return { [property]: getColor(value, `@${globalTheme}`) };
+    else {
+      const obj = {};
+      for (const mediaName in val) {
+        const query = CONFIG2.MEDIA[mediaName.slice(1)];
+        const media = `@media screen and ${query}`;
+        obj[media] = { [property]: getColor(value, mediaName) };
+      }
+      return obj;
+    }
+  } else {
+    if (CONFIG2.verbose)
+      console.warn("Can't find color", value);
+    return { [property]: value };
+  }
+};
+var setColor = (val, key, suffix) => {
+  const CONFIG2 = getActiveConfig();
+  if (isString(val) && val.slice(0, 2) === "--")
+    val = getColor(val.slice(2));
+  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 [r, g, b, a = 1] = colorStringToRgbaArray(val.value || val);
+  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) && val.slice(0, 2) === "--")
+    val = getColor(val.slice(2));
+  if (isArray(val)) {
+    return {
+      "@light": setGradient(val[0], key, "light"),
+      "@dark": setGradient(val[0], key, "dark")
+    };
+  }
+  if (isObject(val)) {
+    const obj = {};
+    for (const variant in val)
+      obj[variant] = setGradient(val[variant], key, variant.slice(0, 1) === "@" ? variant.slice(1) : variant);
+    return obj;
+  }
+  const CSSVar = `--gradient-${key}` + (suffix ? `-${suffix}` : "");
+  if (CONFIG2.useVariable) {
+    CONFIG2.CSS_VARS[CSSVar] = val.value || val;
+  }
+  return {
+    var: CSSVar,
+    value: val.value || val
+  };
+};
+
+// src/system/theme.js
+var setThemeValue = (theme) => {
+  const value = {};
+  const { state, media, helpers, ...rest } = theme;
+  const keys = Object.keys(rest);
+  keys.map((key) => {
+    const conditions = ["color", "Color", "background", "border"];
+    const isColor = conditions.some((k) => key.includes(k));
+    return value[key] = isColor ? getColor(theme[key]) : theme[key];
+  });
+  return value;
+};
+var getThemeValue = (theme) => {
+  if (theme.value)
+    return theme.value;
+  theme.value = setThemeValue(theme);
+  return theme.value;
+};
+var getTheme = (value, modifier) => {
+  const CONFIG2 = getActiveConfig();
+  if (CONFIG2.useVariable)
+    return getMediaTheme(value, modifier);
+  const { THEME: THEME2 } = CONFIG2;
+  if (isString(value)) {
+    const [theme, subtheme] = value.split(" ");
+    const isOurTheme = THEME2[theme];
+    if (isOurTheme) {
+      if (!subtheme && !modifier)
+        return getThemeValue(isOurTheme);
+      value = [theme, subtheme || modifier];
+    }
+  }
+  if (isObjectLike(value) && value[1]) {
+    const themeName = value[0];
+    const subThemeName = value[1];
+    const { helpers, media, state } = THEME2[themeName];
+    if (media && media[subThemeName])
+      return getThemeValue(media[subThemeName]);
+    if (helpers && helpers[subThemeName])
+      return getThemeValue(helpers[subThemeName]);
+    if (state && state[subThemeName])
+      return getThemeValue(state[subThemeName]);
+  } else if (isObject(value))
+    return setThemeValue(value);
+};
+var setInverseTheme = (theme, variant, value) => {
+  if (isObject(variant)) {
+    theme.variants.inverse.value = setThemeValue(variant);
+  } else if (variant === true) {
+    const { color, background } = value;
+    theme.variants.inverse = {
+      value: {
+        color: background,
+        background: color
+      }
+    };
+  }
+};
+var setPseudo = (theme, key, variant, themeValue) => {
+  const result = getTheme(variant);
+  themeValue[`&:${key}`] = result;
+  if (isObject(variant) && !variant.value)
+    variant.value = result;
+};
+var setSelectors = (theme, value) => {
+  const { state } = theme;
+  if (!state)
+    return;
+  const keys = Object.keys(state);
+  keys.map((key) => {
+    const variant = state[key];
+    setPseudo(theme, key, variant, value);
+    return theme;
+  });
+  return theme;
+};
+var setPrefersScheme = (theme, key, variant, themeValue) => {
+  const result = getTheme(variant);
+  themeValue[`@media (prefers-color-scheme: ${key})`] = result;
+  if (isObject(variant) && !variant.value)
+    variant.value = result;
+};
+var setMedia = (theme, value) => {
+  const { media } = theme;
+  if (!media)
+    return;
+  const keys = Object.keys(media);
+  keys.map((key) => {
+    const variant = media[key];
+    if (key === "dark" || key === "light")
+      setPrefersScheme(theme, key, variant, value);
+    if (key === "inverse")
+      setInverseTheme(theme, variant, value);
+    return theme;
+  });
+  return theme;
+};
+var setHelpers = (theme, value) => {
+  const CONFIG2 = getActiveConfig();
+  const { helpers } = theme;
+  if (!helpers)
+    return;
+  const keys = Object.keys(helpers);
+  keys.map((key) => {
+    const helper = helpers[key];
+    if (isString(helper))
+      helpers[key] = CONFIG2.THEME[helper];
+    else
+      getThemeValue(helpers[key]);
+    return theme;
+  });
+  return theme;
+};
+var setTheme = (val, key) => {
+  const CONFIG2 = getActiveConfig();
+  if (CONFIG2.useVariable)
+    return setMediaTheme(val, key);
+  const { state, media, helpers } = val;
+  const value = setThemeValue(val, key);
+  const CSSvar = `--theme-${key}`;
+  setSelectors(val, value);
+  setMedia(val, value);
+  setHelpers(val, value);
+  return { var: CSSvar, value, state, media, helpers };
+};
+var setMediaTheme = (val, key, suffix, prefers) => {
+  const CONFIG2 = getActiveConfig();
+  const { CSS_VARS: CSS_VARS2 } = CONFIG2;
+  const theme = { value: val };
+  if (isObjectLike(val)) {
+    for (const param in val) {
+      const symb = param.slice(0, 1);
+      const value = val[param];
+      if (symb === "@" || symb === ":" || symb === ".") {
+        const hasPrefers = symb === "@" && param;
+        theme[param] = setMediaTheme(value, key, param, prefers || hasPrefers);
+      } else {
+        const color = getColor(value, prefers);
+        const metaSuffixes = [...new Set([prefers, suffix].filter((v) => v).map((v) => v.slice(1)))];
+        const varmetaSuffixName = metaSuffixes.length ? "-" + metaSuffixes.join("-") : "";
+        const CSSVar = `--theme-${key}${varmetaSuffixName}-${param}`;
+        if (CONFIG2.useVariable) {
+          CSS_VARS2[CSSVar] = color;
+          theme[param] = `var(${CSSVar})`;
+        } else {
+          theme[param] = color;
+        }
+        theme[`.${param}`] = { [param]: theme[param] };
+      }
+    }
+    if (theme["background"] || theme["color"] || theme["backgroundColor"]) {
+      theme[".inversed"] = {
+        color: theme["background"] || theme["backgroundColor"],
+        background: theme["color"]
+      };
+    }
+  }
+  if (isString(val) && val.slice(0, 2) === "--") {
+    const { THEME: THEME2 } = CONFIG2;
+    const value = THEME2[val.slice(2)];
+    const getReferenced = getMediaTheme(value);
+    return getReferenced;
+  }
+  return theme;
+};
+var recursiveTheme = (val) => {
+  const CONFIG2 = getActiveConfig();
+  const obj = {};
+  for (const param in val) {
+    const symb = param.slice(0, 1);
+    if (isObjectLike(val[param])) {
+      if (symb === "@") {
+        const query = CONFIG2.MEDIA[param.slice(1)];
+        const media = `@media screen and ${query}`;
+        obj[media] = recursiveTheme(val[param]);
+      } else if (symb === ":") {
+        obj[`&${param}`] = recursiveTheme(val[param]);
+      }
+    } else
+      obj[param] = val[param];
+  }
+  return obj;
+};
+var findModifierFromArray = (val, modifierArray) => {
+  const currentMod = modifierArray.shift();
+  if (val[currentMod])
+    return findModifierFromArray(val[currentMod], modifierArray);
+  return val;
+};
+var findModifier = (val, modifier) => {
+  if (isArray(modifier))
+    return findModifierFromArray(val, modifier);
+  else if (isString(modifier) && val[modifier])
+    return val[modifier];
+  else
+    return val;
+};
+var getMediaTheme = (val, mod) => {
+  const CONFIG2 = getActiveConfig();
+  if (isString(val) && val.slice(0, 2) === "--")
+    val = getMediaTheme(val.slice(2));
+  if (!val || !isString(val)) {
+    if (CONFIG2.verbose)
+      console.warn(val, "- theme is not string");
+    return;
+  }
+  const [name, ...modifier] = isArray(val) ? val : val.split(" ");
+  let value = CONFIG2.THEME[name];
+  if (value && (modifier || mod)) {
+    value = findModifier(value, modifier.length ? modifier : mod);
+  }
+  const r = recursiveTheme(value);
+  return r;
+};
+
+// src/system/font.js
+var setFont = (val, key) => {
+  const CSSvar = `--font-${key}`;
+  const fontFace = val[0] ? getFontFaceEach(key, val) : setCustomFontMedia(key, val.url);
+  return { var: CSSvar, value: val, fontFace };
+};
+var getFontFamily = (key, factory) => {
+  const CONFIG2 = getActiveConfig();
+  const { FONT_FAMILY: FONT_FAMILY2 } = CONFIG2;
+  return getDefaultOrFirstKey(factory || FONT_FAMILY2, key);
+};
+var setFontFamily = (val, key) => {
+  const CONFIG2 = getActiveConfig();
+  const { FONT_FAMILY: FONT_FAMILY2, FONT_FAMILY_TYPES: FONT_FAMILY_TYPES2 } = CONFIG2;
+  let { value, type } = val;
+  if (val.isDefault)
+    FONT_FAMILY2.default = key;
+  if (isObject(value))
+    value = arrayze(value);
+  const CSSvar = `--font-family-${key}`;
+  const str = `${value.join(", ")}, ${FONT_FAMILY_TYPES2[type]}`;
+  return { var: CSSvar, value: str, arr: value, type };
+};
+
+// src/system/typography.js
+var runThroughMedia = (props) => {
+  const CONFIG2 = getActiveConfig();
+  const { TYPOGRAPHY: TYPOGRAPHY2, MEDIA: MEDIA2 } = CONFIG2;
+  for (const prop in props) {
+    const mediaProps = props[prop];
+    if (prop.slice(0, 1) === "@") {
+      const { type, base, ratio, range, subSequence, h1Matches, unit } = props;
+      merge2(mediaProps, {
+        type,
+        base,
+        ratio,
+        range,
+        subSequence,
+        h1Matches,
+        unit,
+        sequence: {},
+        scales: {},
+        styles: {},
+        vars: {}
+      });
+      generateSequence(mediaProps);
+      const mediaName = prop.slice(1);
+      applySequenceVars(mediaProps, mediaName);
+      const query = MEDIA2[mediaName];
+      TYPOGRAPHY2.styles[`@media screen and ${query}`] = {
+        fontSize: mediaProps.base / TYPOGRAPHY2.browserDefault + unit
+      };
+    }
+  }
+};
+var applyHeadings = (props) => {
+  const CONFIG2 = getActiveConfig();
+  if (props.h1Matches) {
+    const unit = props.unit;
+    const HEADINGS = findHeadings(props);
+    const { styles } = props;
+    for (const k in HEADINGS) {
+      const headerName = `h${parseInt(k) + 1}`;
+      const headerStyle = styles[headerName];
+      styles[headerName] = {
+        fontSize: CONFIG2.useVariable ? `var(${HEADINGS[k].variable})` : `${HEADINGS[k].scaling}${unit}`,
+        margin: headerStyle ? headerStyle.margin : 0,
+        lineHeight: headerStyle ? headerStyle.lineHeight : props.lineHeight,
+        letterSpacing: headerStyle ? headerStyle.letterSpacing : props.letterSpacing,
+        fontWeight: headerStyle ? headerStyle.fontWeight : 900 - k * 100
+      };
+    }
+  }
+};
+var applyTypographySequence = () => {
+  const CONFIG2 = getActiveConfig();
+  const { TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG2;
+  generateSequence(TYPOGRAPHY2);
+  applyHeadings(TYPOGRAPHY2);
+  applySequenceVars(TYPOGRAPHY2);
+  runThroughMedia(TYPOGRAPHY2);
+};
+var getFontSizeByKey = (value) => {
+  const CONFIG2 = getActiveConfig();
+  const { TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG2;
+  return getSequenceValuePropertyPair(
+    value,
+    "fontSize",
+    TYPOGRAPHY2
+  );
+};
+
+// src/system/spacing.js
+var runThroughMedia2 = (sequenceProps) => {
+  for (const prop in sequenceProps) {
+    const mediaProps = sequenceProps[prop];
+    if (prop.slice(0, 1) === "@") {
+      const { type, base, ratio, range, subSequence, h1Matches, unit } = sequenceProps;
+      merge2(mediaProps, {
+        type,
+        base,
+        ratio,
+        range,
+        subSequence,
+        h1Matches,
+        unit,
+        sequence: {},
+        scales: {},
+        styles: {},
+        vars: {}
+      });
+      generateSequence(mediaProps);
+      const mediaName = prop.slice(1);
+      applySequenceVars(mediaProps, mediaName);
+    }
+  }
+};
+var applySpacingSequence = () => {
+  const CONFIG2 = getActiveConfig();
+  const { SPACING: SPACING2 } = CONFIG2;
+  generateSequence(SPACING2);
+  applySequenceVars(SPACING2);
+  runThroughMedia2(SPACING2);
+};
+var getSequence = (sequenceProps) => {
+  const CONFIG2 = getActiveConfig();
+  const { SPACING: SPACING2 } = CONFIG2;
+  if (!sequenceProps)
+    return SPACING2;
+  const hasGenerated = Object.keys(sequenceProps.sequence).length > 0;
+  return hasGenerated ? sequenceProps : generateSequence(sequenceProps);
+};
+var getSpacingByKey = (value, propertyName = "padding", sequenceProps) => {
+  const sequence = getSequence(sequenceProps);
+  const stack = arrayze(value);
+  if (!stack)
+    return;
+  if (isString(value) && value.includes("calc")) {
+    return { [propertyName]: value };
+  }
+  if (stack.length > 1) {
+    let suffix = "";
+    if (propertyName === "borderWidth") {
+      propertyName = "border";
+      suffix = "Width";
+    }
+    const directions = {
+      2: ["Block", "Inline"],
+      3: ["BlockStart", "Inline", "BlockEnd"],
+      4: ["BlockStart", "InlineEnd", "BlockEnd", "InlineStart"]
+    };
+    const wrapSequenceValueByDirection = (direction, i) => getSequenceValuePropertyPair(
+      stack[i],
+      propertyName + direction + suffix,
+      sequence
+    );
+    return directions[stack.length].map((dir, key) => wrapSequenceValueByDirection(dir, key));
+  }
+  return getSequenceValuePropertyPair(
+    value,
+    propertyName,
+    sequence
+  );
+};
+var getSpacingBasedOnRatio = (props, propertyName, val) => {
+  const CONFIG2 = getActiveConfig();
+  const { SPACING: SPACING2 } = CONFIG2;
+  const { spacingRatio, unit } = props;
+  const value = val || props[propertyName];
+  if (spacingRatio) {
+    let sequenceProps = SPACING2[spacingRatio];
+    if (!sequenceProps) {
+      const { type, base, range, subSequence } = SPACING2;
+      sequenceProps = SPACING2[spacingRatio] = merge2({
+        ratio: spacingRatio,
+        type: type + "-" + spacingRatio,
+        unit,
+        sequence: {},
+        scales: {},
+        styles: {},
+        vars: {}
+      }, {
+        base,
+        range,
+        subSequence,
+        ratio: SPACING2.ratio,
+        unit: SPACING2.unit
+      });
+    }
+    applySequenceVars(sequenceProps, null, { useDefault: false });
+    return getSpacingByKey(value, propertyName, sequenceProps);
+  }
+  return getSpacingByKey(value, propertyName);
+};
+
+// src/system/timing.js
+var applyTimingSequence = () => {
+  const CONFIG2 = getActiveConfig();
+  const { TIMING: TIMING2 } = CONFIG2;
+  generateSequence(TIMING2);
+  applySequenceVars(TIMING2);
+};
+var getTimingFunction = (value) => {
+  const CONFIG2 = getActiveConfig();
+  const { TIMING: TIMING2 } = CONFIG2;
+  return TIMING2[value] || TIMING2[toCamelCase(value)] || value;
+};
+var getTimingByKey = (value, property = "timing") => {
+  const CONFIG2 = getActiveConfig();
+  const { TIMING: TIMING2 } = CONFIG2;
+  return getSequenceValuePropertyPair(
+    value,
+    property,
+    TIMING2
+  );
+};
+
+// src/system/document.js
+var applyDocument = () => {
+  const CONFIG2 = getActiveConfig();
+  const { DOCUMENT: DOCUMENT2, FONT_FAMILY: FONT_FAMILY2, THEME: THEME2, TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG2;
+  return merge2(DOCUMENT2, {
+    theme: THEME2.document,
+    fontFamily: getDefaultOrFirstKey(FONT_FAMILY2),
+    fontSize: TYPOGRAPHY2.base,
+    lineHeight: TYPOGRAPHY2.lineHeight
+  });
+};
+
+// src/system/reset.js
+var applyReset = (reset = {}) => {
+  const CONFIG2 = getActiveConfig();
+  const { CSS_VARS: CSS_VARS2, RESET: RESET2, TYPOGRAPHY: TYPOGRAPHY2, DOCUMENT: DOCUMENT2 } = CONFIG2;
+  if (RESET2) {
+    if (RESET2[":root"]) {
+      const configReset = RESET2;
+      const configStyles = TYPOGRAPHY2.styles;
+      configReset.body = {
+        ...getMediaTheme("document", `@${CONFIG2.globalTheme}`),
+        ...configStyles.body
+      };
+      configReset.h1 = configStyles.h1;
+      configReset.h2 = configStyles.h2;
+      configReset.h3 = configStyles.h3;
+      configReset.h4 = configStyles.h4;
+      configReset.h5 = configStyles.h5;
+      configReset.h6 = configStyles.h6;
+    }
+    const { body, ...styles } = TYPOGRAPHY2.styles;
+    return deepMerge(merge(RESET2, reset), {
+      html: {
+        position: "absolute",
+        overflow: "hidden",
+        width: "100%",
+        height: "100%",
+        top: "0",
+        left: "0",
+        margin: "0",
+        WebkitFontSmoothing: "antialiased",
+        transform: "translate3d(0, 0, 1px)",
+        scrollBehavior: "smooth",
+        fontSize: TYPOGRAPHY2.browserDefault + "px",
+        fontFamily: DOCUMENT2.fontFamily,
+        lineHeight: DOCUMENT2.lineHeight
+      },
+      body: {
+        boxSizing: "border-box",
+        height: "100%",
+        margin: 0,
+        fontFamily: DOCUMENT2.fontFamily,
+        fontSize: TYPOGRAPHY2.base / TYPOGRAPHY2.browserDefault + CONFIG2.UNIT.default,
+        ...getMediaTheme("document", `@${CONFIG2.globalTheme}`),
+        ...styles,
+        ...body
+      },
+      // form elements
+      fieldset: {
+        border: 0,
+        padding: 0,
+        margin: 0
+      },
+      "select, input": {
+        fontFamily: DOCUMENT2.fontFamily
+      }
+    });
+  }
+};
+
+// src/set.js
+var setCases = (val, key) => {
+  if (isFunction2(val))
+    return val();
+  return val;
+};
+var setSameValue = (val, key) => val;
+var SETTERS = {
+  color: setColor,
+  gradient: setGradient,
+  font: setFont,
+  font_family: setFontFamily,
+  theme: setTheme,
+  typography: setSameValue,
+  cases: setCases,
+  spacing: setSameValue,
+  media: setSameValue,
+  timing: setSameValue,
+  icons: setSameValue,
+  reset: setSameValue,
+  unit: setSameValue,
+  animation: setSameValue
+};
+var setValue = (FACTORY_NAME, value, key) => {
+  const CONFIG2 = getActiveConfig();
+  const factoryName = FACTORY_NAME.toLowerCase();
+  const FACTORY2 = CONFIG2[FACTORY_NAME];
+  if (SETTERS[factoryName]) {
+    const result = SETTERS[factoryName](value, key);
+    FACTORY2[key] = result;
+    return FACTORY2;
+  }
+  if (CONFIG2.verbose)
+    console.warn("Can not find", factoryName, "method in scratch");
+};
+var setEach = (factoryName, props) => {
+  const CONFIG2 = getActiveConfig();
+  const FACTORY_NAME = factoryName.toUpperCase();
+  const keys = Object.keys(props);
+  keys.map((key) => setValue(FACTORY_NAME, props[key], key));
+  return CONFIG2[FACTORY_NAME];
+};
+var SET_OPTIONS = {};
+var set = (recivedConfig, options = SET_OPTIONS) => {
+  let CONFIG2 = getActiveConfig();
+  const { version, verbose, useVariable, useReset, globalTheme, ...config } = recivedConfig;
+  if (options.newConfig) {
+    FACTORY["active"] = options.newConfig;
+    CONFIG2 = getActiveConfig(options.newConfig);
+  }
+  if (verbose !== void 0)
+    CONFIG2.verbose = verbose;
+  if (useVariable !== void 0)
+    CONFIG2.useVariable = useVariable;
+  if (useReset !== void 0)
+    CONFIG2.useReset = useReset;
+  if (globalTheme !== void 0)
+    CONFIG2.globalTheme = globalTheme;
+  if (CONFIG2.verbose)
+    console.log(CONFIG2);
+  const keys = Object.keys(config);
+  keys.map((key) => setEach(key, config[key]));
+  applyTypographySequence();
+  applySpacingSequence();
+  applyTimingSequence();
+  applyDocument();
+  applyReset();
+  return CONFIG2;
+};