@symbo.ls/scratch 2.10.266 → 2.10.272

package/dist/cjs/index.js

@@ -1652,11 +1652,15 @@ var applySequenceVars = (props, mediaName, options = {}) => {
 // src/utils/sprite.js
 var import_utils7 = __toESM(require_cjs3(), 1);
 var generateSprite = (icons) => {
-  let sprite = '<svg aria-hidden="true" width="0" height="0" style="position:absolute">';
+  const CONFIG2 = getActiveConfig();
+  let sprite = "";
   for (const key in icons) {
+    if (CONFIG2.__svg_cache[key])
+      continue;
+    else
+      CONFIG2.__svg_cache[key] = true;
     sprite += icons[key];
   }
-  sprite += "</svg>";
   return sprite;
 };
 var parseRootAttributes = (htmlString) => {
@@ -1684,8 +1688,8 @@ var convertSvgToSymbol = (key, code) => {
     "<svg",
     `<symbol id="${key}" xmlns="${xmlns}" viewBox="${viewBox}"`
   );
-  symbol = symbol.replace(/width="[^"]*/, "");
-  symbol = symbol.replace(/height="[^"]*/, "");
+  symbol = symbol.replace(/width="[^"]*"/, "");
+  symbol = symbol.replace(/height="[^"]*"/, "");
   symbol = symbol.replace("</svg", "</symbol");
   return symbol;
 };
@@ -2336,18 +2340,10 @@ var setSVG = (val, key) => {
 };
 var appendSVGSprite = (LIBRARY, options = DEF_OPTIONS) => {
   const CONFIG2 = getActiveConfig();
-  const doc = options.document || import_globals2.document;
   const lib = Object.keys(LIBRARY).length ? {} : CONFIG2.SVG;
   for (const key in LIBRARY)
     lib[key] = CONFIG2.SVG[key];
-  const SVGsprite = generateSprite(lib);
-  if (!doc) {
-    console.warn("To append SVG sprites it should be run in browser environment");
-    return SVGsprite;
-  }
-  const svgSpriteDOM = doc.createElement("template");
-  svgSpriteDOM.innerHTML = SVGsprite;
-  doc.body.appendChild(svgSpriteDOM.content);
+  appendSVG(lib, options);
 };
 var setIcon = (val, key) => {
   const CONFIG2 = getActiveConfig();
@@ -2358,18 +2354,42 @@ var setIcon = (val, key) => {
 };
 var appendIconsSprite = (LIBRARY, options = DEF_OPTIONS) => {
   const CONFIG2 = getActiveConfig();
-  const doc = options.document || import_globals2.document;
   const lib = Object.keys(LIBRARY).length ? {} : CONFIG2.ICONS;
   for (const key in LIBRARY)
     lib[key] = CONFIG2.ICONS[key];
-  const SVGsprite = generateSprite(lib);
+  appendSVG(lib, options);
+};
+var createSVGSpriteElement = (options = { isRoot: true }) => {
+  const svgElem = import_globals2.document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  if (options.isRoot) {
+    svgElem.setAttribute("aria-hidden", "true");
+    svgElem.setAttribute("width", "0");
+    svgElem.setAttribute("height", "0");
+    svgElem.setAttribute("style", "position:absolute");
+    svgElem.setAttribute("id", "svgSprite");
+  }
+  return svgElem;
+};
+var appendSVG = (lib, options = DEF_OPTIONS) => {
+  const CONFIG2 = getActiveConfig();
+  const doc = options.document || import_globals2.document;
   if (!doc) {
-    console.warn("To append SVG Icon sprites it should be run in browser environment");
-    return SVGsprite;
+    if (CONFIG2.verbose) {
+      console.warn("To append SVG sprites it should be run in browser environment");
+    }
+    return generateSprite(lib);
+  }
+  const exists = doc.querySelector("#svgSprite");
+  const SVGsprite = generateSprite(lib);
+  if (exists) {
+    const tempSVG = createSVGSpriteElement({ isRoot: false });
+    tempSVG.innerHTML = SVGsprite;
+    exists.append(...tempSVG.children);
+  } else {
+    const svgSpriteDOM = createSVGSpriteElement();
+    svgSpriteDOM.innerHTML = SVGsprite;
+    doc.body.prepend(svgSpriteDOM);
   }
-  const iconsSpriteDOM = doc.createElement("template");
-  iconsSpriteDOM.innerHTML = SVGsprite;
-  doc.body.appendChild(iconsSpriteDOM.content);
 };
 
 // src/system/reset.js
@@ -2613,6 +2633,8 @@ var set = (recivedConfig, options = SET_OPTIONS) => {
     CONFIG2.globalTheme = globalTheme;
   if (CONFIG2.verbose)
     console.log(CONFIG2);
+  if (!CONFIG2.__svg_cache)
+    CONFIG2.__svg_cache = {};
   const keys = Object.keys(config);
   keys.map((key) => setEach(key, config[key]));
   applyTypographySequence();

package/dist/cjs/set.js

@@ -1380,8 +1380,8 @@ var convertSvgToSymbol = (key, code) => {
     "<svg",
     `<symbol id="${key}" xmlns="${xmlns}" viewBox="${viewBox}"`
   );
-  symbol = symbol.replace(/width="[^"]*/, "");
-  symbol = symbol.replace(/height="[^"]*/, "");
+  symbol = symbol.replace(/width="[^"]*"/, "");
+  symbol = symbol.replace(/height="[^"]*"/, "");
   symbol = symbol.replace("</svg", "</symbol");
   return symbol;
 };
@@ -2009,6 +2009,8 @@ var set = (recivedConfig, options = SET_OPTIONS) => {
     CONFIG2.globalTheme = globalTheme;
   if (CONFIG2.verbose)
     console.log(CONFIG2);
+  if (!CONFIG2.__svg_cache)
+    CONFIG2.__svg_cache = {};
   const keys = Object.keys(config);
   keys.map((key) => setEach(key, config[key]));
   applyTypographySequence();

package/dist/cjs/system/index.js

@@ -1439,11 +1439,15 @@ var applySequenceVars = (props, mediaName, options = {}) => {
 // src/utils/sprite.js
 var import_utils7 = __toESM(require_cjs3(), 1);
 var generateSprite = (icons) => {
-  let sprite = '<svg aria-hidden="true" width="0" height="0" style="position:absolute">';
+  const CONFIG2 = getActiveConfig();
+  let sprite = "";
   for (const key in icons) {
+    if (CONFIG2.__svg_cache[key])
+      continue;
+    else
+      CONFIG2.__svg_cache[key] = true;
     sprite += icons[key];
   }
-  sprite += "</svg>";
   return sprite;
 };
 var parseRootAttributes = (htmlString) => {
@@ -1471,8 +1475,8 @@ var convertSvgToSymbol = (key, code) => {
     "<svg",
     `<symbol id="${key}" xmlns="${xmlns}" viewBox="${viewBox}"`
   );
-  symbol = symbol.replace(/width="[^"]*/, "");
-  symbol = symbol.replace(/height="[^"]*/, "");
+  symbol = symbol.replace(/width="[^"]*"/, "");
+  symbol = symbol.replace(/height="[^"]*"/, "");
   symbol = symbol.replace("</svg", "</symbol");
   return symbol;
 };
@@ -2090,18 +2094,10 @@ var setSVG = (val, key) => {
 };
 var appendSVGSprite = (LIBRARY, options = DEF_OPTIONS) => {
   const CONFIG2 = getActiveConfig();
-  const doc = options.document || import_globals2.document;
   const lib = Object.keys(LIBRARY).length ? {} : CONFIG2.SVG;
   for (const key in LIBRARY)
     lib[key] = CONFIG2.SVG[key];
-  const SVGsprite = generateSprite(lib);
-  if (!doc) {
-    console.warn("To append SVG sprites it should be run in browser environment");
-    return SVGsprite;
-  }
-  const svgSpriteDOM = doc.createElement("template");
-  svgSpriteDOM.innerHTML = SVGsprite;
-  doc.body.appendChild(svgSpriteDOM.content);
+  appendSVG(lib, options);
 };
 var setIcon = (val, key) => {
   const CONFIG2 = getActiveConfig();
@@ -2112,18 +2108,42 @@ var setIcon = (val, key) => {
 };
 var appendIconsSprite = (LIBRARY, options = DEF_OPTIONS) => {
   const CONFIG2 = getActiveConfig();
-  const doc = options.document || import_globals2.document;
   const lib = Object.keys(LIBRARY).length ? {} : CONFIG2.ICONS;
   for (const key in LIBRARY)
     lib[key] = CONFIG2.ICONS[key];
-  const SVGsprite = generateSprite(lib);
+  appendSVG(lib, options);
+};
+var createSVGSpriteElement = (options = { isRoot: true }) => {
+  const svgElem = import_globals2.document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  if (options.isRoot) {
+    svgElem.setAttribute("aria-hidden", "true");
+    svgElem.setAttribute("width", "0");
+    svgElem.setAttribute("height", "0");
+    svgElem.setAttribute("style", "position:absolute");
+    svgElem.setAttribute("id", "svgSprite");
+  }
+  return svgElem;
+};
+var appendSVG = (lib, options = DEF_OPTIONS) => {
+  const CONFIG2 = getActiveConfig();
+  const doc = options.document || import_globals2.document;
   if (!doc) {
-    console.warn("To append SVG Icon sprites it should be run in browser environment");
-    return SVGsprite;
+    if (CONFIG2.verbose) {
+      console.warn("To append SVG sprites it should be run in browser environment");
+    }
+    return generateSprite(lib);
+  }
+  const exists = doc.querySelector("#svgSprite");
+  const SVGsprite = generateSprite(lib);
+  if (exists) {
+    const tempSVG = createSVGSpriteElement({ isRoot: false });
+    tempSVG.innerHTML = SVGsprite;
+    exists.append(...tempSVG.children);
+  } else {
+    const svgSpriteDOM = createSVGSpriteElement();
+    svgSpriteDOM.innerHTML = SVGsprite;
+    doc.body.prepend(svgSpriteDOM);
   }
-  const iconsSpriteDOM = doc.createElement("template");
-  iconsSpriteDOM.innerHTML = SVGsprite;
-  doc.body.appendChild(iconsSpriteDOM.content);
 };
 
 // src/system/reset.js

package/dist/cjs/system/svg.js

@@ -1100,11 +1100,15 @@ var import_utils6 = __toESM(require_cjs3(), 1);
 // src/utils/sprite.js
 var import_utils7 = __toESM(require_cjs3(), 1);
 var generateSprite = (icons) => {
-  let sprite = '<svg aria-hidden="true" width="0" height="0" style="position:absolute">';
+  const CONFIG2 = getActiveConfig();
+  let sprite = "";
   for (const key in icons) {
+    if (CONFIG2.__svg_cache[key])
+      continue;
+    else
+      CONFIG2.__svg_cache[key] = true;
     sprite += icons[key];
   }
-  sprite += "</svg>";
   return sprite;
 };
 var parseRootAttributes = (htmlString) => {
@@ -1132,8 +1136,8 @@ var convertSvgToSymbol = (key, code) => {
     "<svg",
     `<symbol id="${key}" xmlns="${xmlns}" viewBox="${viewBox}"`
   );
-  symbol = symbol.replace(/width="[^"]*/, "");
-  symbol = symbol.replace(/height="[^"]*/, "");
+  symbol = symbol.replace(/width="[^"]*"/, "");
+  symbol = symbol.replace(/height="[^"]*"/, "");
   symbol = symbol.replace("</svg", "</symbol");
   return symbol;
 };
@@ -1156,18 +1160,10 @@ var setSVG = (val, key) => {
 };
 var appendSVGSprite = (LIBRARY, options = DEF_OPTIONS) => {
   const CONFIG2 = getActiveConfig();
-  const doc = options.document || import_globals2.document;
   const lib = Object.keys(LIBRARY).length ? {} : CONFIG2.SVG;
   for (const key in LIBRARY)
     lib[key] = CONFIG2.SVG[key];
-  const SVGsprite = generateSprite(lib);
-  if (!doc) {
-    console.warn("To append SVG sprites it should be run in browser environment");
-    return SVGsprite;
-  }
-  const svgSpriteDOM = doc.createElement("template");
-  svgSpriteDOM.innerHTML = SVGsprite;
-  doc.body.appendChild(svgSpriteDOM.content);
+  appendSVG(lib, options);
 };
 var setIcon = (val, key) => {
   const CONFIG2 = getActiveConfig();
@@ -1178,16 +1174,40 @@ var setIcon = (val, key) => {
 };
 var appendIconsSprite = (LIBRARY, options = DEF_OPTIONS) => {
   const CONFIG2 = getActiveConfig();
-  const doc = options.document || import_globals2.document;
   const lib = Object.keys(LIBRARY).length ? {} : CONFIG2.ICONS;
   for (const key in LIBRARY)
     lib[key] = CONFIG2.ICONS[key];
-  const SVGsprite = generateSprite(lib);
+  appendSVG(lib, options);
+};
+var createSVGSpriteElement = (options = { isRoot: true }) => {
+  const svgElem = import_globals2.document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  if (options.isRoot) {
+    svgElem.setAttribute("aria-hidden", "true");
+    svgElem.setAttribute("width", "0");
+    svgElem.setAttribute("height", "0");
+    svgElem.setAttribute("style", "position:absolute");
+    svgElem.setAttribute("id", "svgSprite");
+  }
+  return svgElem;
+};
+var appendSVG = (lib, options = DEF_OPTIONS) => {
+  const CONFIG2 = getActiveConfig();
+  const doc = options.document || import_globals2.document;
   if (!doc) {
-    console.warn("To append SVG Icon sprites it should be run in browser environment");
-    return SVGsprite;
+    if (CONFIG2.verbose) {
+      console.warn("To append SVG sprites it should be run in browser environment");
+    }
+    return generateSprite(lib);
+  }
+  const exists = doc.querySelector("#svgSprite");
+  const SVGsprite = generateSprite(lib);
+  if (exists) {
+    const tempSVG = createSVGSpriteElement({ isRoot: false });
+    tempSVG.innerHTML = SVGsprite;
+    exists.append(...tempSVG.children);
+  } else {
+    const svgSpriteDOM = createSVGSpriteElement();
+    svgSpriteDOM.innerHTML = SVGsprite;
+    doc.body.prepend(svgSpriteDOM);
   }
-  const iconsSpriteDOM = doc.createElement("template");
-  iconsSpriteDOM.innerHTML = SVGsprite;
-  doc.body.appendChild(iconsSpriteDOM.content);
 };

package/dist/cjs/utils/index.js

@@ -1517,11 +1517,15 @@ var applySequenceVars = (props, mediaName, options = {}) => {
 // src/utils/sprite.js
 var import_utils7 = __toESM(require_cjs3(), 1);
 var generateSprite = (icons) => {
-  let sprite = '<svg aria-hidden="true" width="0" height="0" style="position:absolute">';
+  const CONFIG2 = getActiveConfig();
+  let sprite = "";
   for (const key in icons) {
+    if (CONFIG2.__svg_cache[key])
+      continue;
+    else
+      CONFIG2.__svg_cache[key] = true;
     sprite += icons[key];
   }
-  sprite += "</svg>";
   return sprite;
 };
 var parseRootAttributes = (htmlString) => {
@@ -1549,8 +1553,8 @@ var convertSvgToSymbol = (key, code) => {
     "<svg",
     `<symbol id="${key}" xmlns="${xmlns}" viewBox="${viewBox}"`
   );
-  symbol = symbol.replace(/width="[^"]*/, "");
-  symbol = symbol.replace(/height="[^"]*/, "");
+  symbol = symbol.replace(/width="[^"]*"/, "");
+  symbol = symbol.replace(/height="[^"]*"/, "");
   symbol = symbol.replace("</svg", "</symbol");
   return symbol;
 };

package/dist/cjs/utils/sprite.js

@@ -280,14 +280,14 @@ var require_types = __commonJS({
       is: () => is,
       isArray: () => isArray,
       isBoolean: () => isBoolean,
-      isDefined: () => isDefined,
+      isDefined: () => isDefined2,
       isFunction: () => isFunction,
       isHtmlElement: () => isHtmlElement,
       isNode: () => isNode,
       isNot: () => isNot,
       isNull: () => isNull,
       isNumber: () => isNumber,
-      isObject: () => isObject,
+      isObject: () => isObject2,
       isObjectLike: () => isObjectLike,
       isString: () => isString2,
       isUndefined: () => isUndefined,
@@ -297,7 +297,7 @@ var require_types = __commonJS({
     var import_globals = require_cjs();
     var import_tags = require_cjs2();
     var isValidHtmlTag = (arg) => import_tags.HTML_TAGS.body.indexOf(arg);
-    var isObject = (arg) => {
+    var isObject2 = (arg) => {
       if (arg === null)
         return false;
       return typeof arg === "object" && arg.constructor === Object;
@@ -319,8 +319,8 @@ var require_types = __commonJS({
     var isHtmlElement = (obj) => {
       return typeof import_globals.window.HTMLElement === "object" ? obj instanceof import_globals.window.HTMLElement : obj && typeof obj === "object" && obj !== null && obj.nodeType === 1 && typeof obj.nodeName === "string";
     };
-    var isDefined = (arg) => {
-      return isObject(arg) || isObjectLike(arg) || isString2(arg) || isNumber(arg) || isFunction(arg) || isArray(arg) || isObjectLike(arg) || isBoolean(arg) || isNull(arg);
+    var isDefined2 = (arg) => {
+      return isObject2(arg) || isObjectLike(arg) || isString2(arg) || isNumber(arg) || isFunction(arg) || isArray(arg) || isObjectLike(arg) || isBoolean(arg) || isNull(arg);
     };
     var isUndefined = (arg) => {
       return arg === void 0;
@@ -328,7 +328,7 @@ var require_types = __commonJS({
     var TYPES = {
       boolean: isBoolean,
       array: isArray,
-      object: isObject,
+      object: isObject2,
       string: isString2,
       number: isNumber,
       null: isNull,
@@ -336,7 +336,7 @@ var require_types = __commonJS({
       objectLike: isObjectLike,
       node: isNode,
       htmlElement: isHtmlElement,
-      defined: isDefined
+      defined: isDefined2
     };
     var is = (arg) => {
       return (...args) => {
@@ -375,10 +375,10 @@ var require_object = __commonJS({
     var object_exports = {};
     __export2(object_exports, {
       clone: () => clone,
-      deepClone: () => deepClone,
+      deepClone: () => deepClone2,
       deepCloneExclude: () => deepCloneExclude,
       deepDestringify: () => deepDestringify,
-      deepMerge: () => deepMerge,
+      deepMerge: () => deepMerge2,
       deepStringify: () => deepStringify,
       detachFunctionsFromObject: () => detachFunctionsFromObject,
       diff: () => diff,
@@ -423,7 +423,7 @@ var require_object = __commonJS({
       }
       return element;
     };
-    var deepMerge = (element, extend) => {
+    var deepMerge2 = (element, extend) => {
       for (const e in extend) {
         const extendProp = extend[e];
         if (e === "parent" || e === "props")
@@ -431,7 +431,7 @@ var require_object = __commonJS({
         if (element[e] === void 0) {
           element[e] = extendProp;
         } else if ((0, import_types.isObjectLike)(element[e]) && (0, import_types.isObjectLike)(extendProp)) {
-          deepMerge(element[e], extendProp);
+          deepMerge2(element[e], extendProp);
         } else {
           element[e] = extendProp;
         }
@@ -469,11 +469,11 @@ var require_object = __commonJS({
       return o;
     };
     var mergeArrayExclude = (arr, excl = []) => {
-      return arr.reduce((acc, curr) => deepMerge(acc, deepCloneExclude(curr, excl)), {});
+      return arr.reduce((acc, curr) => deepMerge2(acc, deepCloneExclude(curr, excl)), {});
     };
-    var deepClone = (obj) => {
+    var deepClone2 = (obj) => {
       if ((0, import_types.isArray)(obj)) {
-        return obj.map(deepClone);
+        return obj.map(deepClone2);
       }
       const o = {};
       for (const prop in obj) {
@@ -482,9 +482,9 @@ var require_object = __commonJS({
           objProp = mergeArray(objProp);
         }
         if ((0, import_types.isArray)(objProp)) {
-          o[prop] = objProp.map((v) => (0, import_types.isObject)(v) ? deepClone(v) : v);
+          o[prop] = objProp.map((v) => (0, import_types.isObject)(v) ? deepClone2(v) : v);
         } else if ((0, import_types.isObject)(objProp)) {
-          o[prop] = deepClone(objProp);
+          o[prop] = deepClone2(objProp);
         } else
           o[prop] = objProp;
       }
@@ -642,14 +642,14 @@ var require_object = __commonJS({
     };
     var mergeIfExisted = (a, b) => {
       if ((0, import_types.isObjectLike)(a) && (0, import_types.isObjectLike)(b))
-        return deepMerge(a, b);
+        return deepMerge2(a, b);
       return a || b;
     };
     var mergeArray = (arr) => {
-      return arr.reduce((a, c) => deepMerge(a, deepClone(c)), {});
+      return arr.reduce((a, c) => deepMerge2(a, deepClone2(c)), {});
     };
     var mergeAndCloneIfArray = (obj) => {
-      return (0, import_types.isArray)(obj) ? mergeArray(obj) : deepClone(obj);
+      return (0, import_types.isArray)(obj) ? mergeArray(obj) : deepClone2(obj);
     };
     var flattenRecursive = (param, prop, stack = []) => {
       const objectized = mergeAndCloneIfArray(param);
@@ -860,17 +860,241 @@ __export(sprite_exports, {
   generateSprite: () => generateSprite
 });
 module.exports = __toCommonJS(sprite_exports);
+var import_utils2 = __toESM(require_cjs3(), 1);
+
+// src/factory.js
 var import_utils = __toESM(require_cjs3(), 1);
+
+// 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,
+  SVG: () => SVG,
+  SVG_DATA: () => SVG_DATA,
+  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",
+  templates: {},
+  sequence: {},
+  scales: {},
+  vars: {}
+};
+var TYPOGRAPHY = defaultProps;
+
+// src/defaultConfig/font.js
+var FONT = {};
+
+// src/defaultConfig/font-family.js
+var FONT_FAMILY = {};
+var FONT_FAMILY_TYPES = {
+  "sans-serif": "Helvetica, Arial, sans-serif, --system-default",
+  serif: "Times New Roman, Georgia, serif, --system-default",
+  monospace: "Courier New, monospace, --system-default"
+};
+var FONT_FACE = {};
+
+// src/defaultConfig/media.js
+var MEDIA = {
+  tv: "(min-width: 2780px)",
+  screenL: "(max-width: 1920px)",
+  "screenL<": "(min-width: 1920px)",
+  screenM: "(max-width: 1680px)",
+  "screenM<": "(min-width: 1680px)",
+  screenS: "(max-width: 1440px)",
+  "screenS<": "(min-width: 1440px)",
+  tabletL: "(max-width: 1366px)",
+  "tabletL<": "(min-width: 1366px)",
+  tabletM: "(max-width: 1280px)",
+  "tabletM<": "(min-width: 1280px)",
+  tabletS: "(max-width: 1024px)",
+  "tabletS<": "(min-width: 1024px)",
+  mobileL: "(max-width: 768px)",
+  "mobileL<": "(min-width: 768px)",
+  mobileM: "(max-width: 560px)",
+  "mobileM<": "(min-width: 560px)",
+  mobileS: "(max-width: 480px)",
+  "mobileS<": "(min-width: 480px)",
+  mobileXS: "(max-width: 375px)",
+  "mobileXS<": "(min-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/svg.js
+var SVG = {};
+var SVG_DATA = {};
+
+// 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 = (0, import_utils.deepClone)(CONFIG);
+var FACTORY = {
+  active: "0",
+  0: CONFIG
+};
+var getActiveConfig = (def) => {
+  return FACTORY[def || FACTORY.active];
+};
+
+// src/utils/sprite.js
 var generateSprite = (icons) => {
-  let sprite = '<svg aria-hidden="true" width="0" height="0" style="position:absolute">';
+  const CONFIG2 = getActiveConfig();
+  let sprite = "";
   for (const key in icons) {
+    if (CONFIG2.__svg_cache[key])
+      continue;
+    else
+      CONFIG2.__svg_cache[key] = true;
     sprite += icons[key];
   }
-  sprite += "</svg>";
   return sprite;
 };
 var parseRootAttributes = (htmlString) => {
-  if (!(0, import_utils.isString)(htmlString)) {
+  if (!(0, import_utils2.isString)(htmlString)) {
     return console.warn(`parseRootAttributes: ${htmlString} is not a string`);
   }
   const match = htmlString.match(/<svg\s+(.*?)>/);
@@ -894,8 +1118,8 @@ var convertSvgToSymbol = (key, code) => {
     "<svg",
     `<symbol id="${key}" xmlns="${xmlns}" viewBox="${viewBox}"`
   );
-  symbol = symbol.replace(/width="[^"]*/, "");
-  symbol = symbol.replace(/height="[^"]*/, "");
+  symbol = symbol.replace(/width="[^"]*"/, "");
+  symbol = symbol.replace(/height="[^"]*"/, "");
   symbol = symbol.replace("</svg", "</symbol");
   return symbol;
 };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/scratch",
   "description": "Φ / CSS framework and methodology.",
   "author": "symbo.ls",
-  "version": "2.10.266",
+  "version": "2.10.272",
   "files": [
     "src",
     "dist"
@@ -17,7 +17,7 @@
   "source": "src/index.js",
   "publishConfig": {},
   "scripts": {
-    "copy:package:cjs": "cp ../../.build/package-cjs.json dist/cjs/package.json",
+    "copy:package:cjs": "cp ../../build/package-cjs.json dist/cjs/package.json",
     "build:esm": "npx esbuild ./src/*.js ./src/**/*.js --target=es2020 --format=esm --outdir=dist/esm",
     "build:cjs": "npx esbuild ./src/*.js ./src/**/*.js --target=node16 --format=cjs --outdir=dist/cjs --bundle",
     "build:iife": "npx esbuild ./src/index.js --target=es2020 --format=iife --outdir=dist/iife --bundle --minify",
@@ -32,5 +32,5 @@
   "peerDependencies": {
     "@emotion/css": "^11.5.0"
   },
-  "gitHead": "e153db0a5e05e4655b5093d694b09fc1e8c4ec0b"
+  "gitHead": "297618a17a7a449fb3af9aca3b1e638769f888a7"
 }

package/src/set.js

@@ -107,6 +107,8 @@ export const set = (recivedConfig, options = SET_OPTIONS) => {
   if (globalTheme !== undefined) CONFIG.globalTheme = globalTheme
   if (CONFIG.verbose) console.log(CONFIG)
 
+  if (!CONFIG.__svg_cache) CONFIG.__svg_cache = {}
+
   const keys = Object.keys(config)
   keys.map(key => setEach(key, config[key]))
 

package/src/system/svg.js

@@ -21,20 +21,11 @@ export const setSVG = (val, key) => {
 
 export const appendSVGSprite = (LIBRARY, options = DEF_OPTIONS) => {
   const CONFIG = getActiveConfig()
-  const doc = options.document || document
 
   const lib = Object.keys(LIBRARY).length ? {} : CONFIG.SVG
   for (const key in LIBRARY) lib[key] = CONFIG.SVG[key]
 
-  const SVGsprite = generateSprite(lib)
-  if (!doc) {
-    console.warn('To append SVG sprites it should be run in browser environment')
-    return SVGsprite
-  }
-
-  const svgSpriteDOM = doc.createElement('template')
-  svgSpriteDOM.innerHTML = SVGsprite
-  doc.body.appendChild(svgSpriteDOM.content)
+  appendSVG(lib, options)
 }
 
 export const setIcon = (val, key) => {
@@ -46,18 +37,47 @@ export const setIcon = (val, key) => {
 
 export const appendIconsSprite = (LIBRARY, options = DEF_OPTIONS) => {
   const CONFIG = getActiveConfig()
-  const doc = options.document || document
 
   const lib = Object.keys(LIBRARY).length ? {} : CONFIG.ICONS
   for (const key in LIBRARY) lib[key] = CONFIG.ICONS[key]
 
-  const SVGsprite = generateSprite(lib)
+  appendSVG(lib, options)
+}
+
+const createSVGSpriteElement = (options = { isRoot: true }) => {
+  const svgElem = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+  if (options.isRoot) {
+    svgElem.setAttribute('aria-hidden', 'true')
+    svgElem.setAttribute('width', '0')
+    svgElem.setAttribute('height', '0')
+    svgElem.setAttribute('style', 'position:absolute')
+    svgElem.setAttribute('id', 'svgSprite')
+  }
+  return svgElem
+}
+
+const appendSVG = (lib, options = DEF_OPTIONS) => {
+  const CONFIG = getActiveConfig()
+  const doc = options.document || document
+
   if (!doc) {
-    console.warn('To append SVG Icon sprites it should be run in browser environment')
-    return SVGsprite
+    if (CONFIG.verbose) {
+      console.warn('To append SVG sprites it should be run in browser environment')
+    }
+    return generateSprite(lib)
   }
 
-  const iconsSpriteDOM = doc.createElement('template')
-  iconsSpriteDOM.innerHTML = SVGsprite
-  doc.body.appendChild(iconsSpriteDOM.content)
+  const exists = doc.querySelector('#svgSprite')
+  const SVGsprite = generateSprite(lib)
+
+  if (exists) {
+    const tempSVG = createSVGSpriteElement({ isRoot: false })
+    // const svgSpriteWithoutRoot = doc.createElement('template')
+    tempSVG.innerHTML = SVGsprite
+    exists.append(...tempSVG.children)
+  } else {
+    const svgSpriteDOM = createSVGSpriteElement()
+    svgSpriteDOM.innerHTML = SVGsprite
+    doc.body.prepend(svgSpriteDOM)
+  }
 }

package/src/utils/sprite.js

@@ -1,17 +1,19 @@
 'use strict'
 
 import { isString } from '@domql/utils'
+import { getActiveConfig } from '../factory'
 
 export const generateSprite = (icons) => {
-  let sprite =
-    '<svg aria-hidden="true" width="0" height="0" style="position:absolute">'
+  const CONFIG = getActiveConfig()
+
+  let sprite = ''
 
   for (const key in icons) {
+    if (CONFIG.__svg_cache[key]) continue
+    else CONFIG.__svg_cache[key] = true
     sprite += icons[key]
   }
 
-  sprite += '</svg>'
-
   return sprite
 }
 
@@ -44,8 +46,8 @@ export const convertSvgToSymbol = (key, code) => {
   let symbol = code.replace('<svg',
     `<symbol id="${key}" xmlns="${xmlns}" viewBox="${viewBox}"`
   )
-  symbol = symbol.replace(/width="[^"]*/, '')
-  symbol = symbol.replace(/height="[^"]*/, '')
+  symbol = symbol.replace(/width="[^"]*"/, '')
+  symbol = symbol.replace(/height="[^"]*"/, '')
   symbol = symbol.replace('</svg', '</symbol')
   return symbol
 }