@symbo.ls/scratch 2.27.8 → 2.27.10

package/dist/cjs/factory.js

@@ -386,3 +386,4 @@ var setActiveConfig = (newConfig) => {
   FACTORY["1"] = deepMerge(newConfig, deepClone(cachedConfig));
   return newConfig;
 };
+// @preserve-env

package/dist/cjs/index.js

@@ -438,6 +438,11 @@ var isScalingUnit = (unit) => {
   return unit === "em" || unit === "rem" || unit === "vw" || unit === "vh" || unit === "vmax" || unit === "vmin";
 };
 
+// ../../../domql/packages/utils/dist/esm/env.js
+var NODE_ENV = "development";
+var isProduction = (env = NODE_ENV) => env === "production";
+var isNotProduction = (env = NODE_ENV) => !isProduction(env);
+
 // ../../../domql/packages/utils/dist/esm/globals.js
 var window2 = globalThis;
 var document2 = window2.document;
@@ -600,7 +605,6 @@ var overwriteDeep = (obj, params, opts = {}, visited = /* @__PURE__ */ new WeakM
 var isMobile = (() => typeof navigator === "undefined" ? false : /Mobi/.test(navigator.userAgent))();
 
 // src/utils/color.js
-var ENV = "development";
 var colorStringToRgbaArray = (color) => {
   if (color === "") return [0, 0, 0, 0];
   if (color.toLowerCase() === "transparent") return [0, 0, 0, 0];
@@ -671,10 +675,7 @@ var mixTwoRgb = (colorA, colorB, range = 0.5) => {
 };
 var changeLightness = (delta, hsl) => {
   const [hue, saturation, lightness] = hsl;
-  const newLightness = Math.max(
-    0,
-    Math.min(100, lightness + parseFloat(delta))
-  );
+  const newLightness = Math.max(0, Math.min(100, lightness + parseFloat(delta)));
   return [hue, saturation, newLightness];
 };
 var rgbToHSL = (r, g, b) => {
@@ -684,10 +685,7 @@ var rgbToHSL = (r, g, b) => {
   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 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;
@@ -705,23 +703,22 @@ 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
-    );
+    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 === "testing" || ENV === "development") console.warn(color + " color is not rgba");
+    if (isNotProduction()) console.warn(color + " color is not rgba");
     return;
   }
   arr[3] = opacity;
   return `rgba(${arr})`;
 };
 var getRgbTone = (rgb, tone) => {
-  if (isString(rgb) && rgb.includes("rgb")) rgb = colorStringToRgbaArray(rgb).join(", ");
+  if (isString(rgb) && rgb.includes("rgb"))
+    rgb = colorStringToRgbaArray(rgb).join(", ");
   if (isString(rgb)) rgb = rgb.split(",").map((v) => parseFloat(v.trim()));
   if (isNumber(tone)) tone += "";
   const toHex = rgbArrayToHex(rgb);
@@ -1331,8 +1328,7 @@ var applyMediaSequenceVars = (FACTORY2, media, options = {}) => {
 };
 
 // src/utils/sprite.js
-var ENV2 = "development";
-var isDev = ENV2 === "development" || ENV2 === "testing";
+var isDev = isNotProduction();
 var generateSprite = (icons) => {
   const CONFIG2 = getActiveConfig();
   let sprite = "";
@@ -1354,7 +1350,9 @@ var parseRootAttributes = (htmlString) => {
     return {};
   }
   const attrString = match[1];
-  const attrs = attrString.match(/(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gm);
+  const attrs = attrString.match(
+    /(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gm
+  );
   return attrs.reduce((acc, attr) => {
     const [key, value] = attr.split("=");
     acc[key] = value.replace(/['"]/g, "");
@@ -2421,3 +2419,4 @@ var set = (recivedConfig, options = SET_OPTIONS) => {
   applyReset();
   return CONFIG2;
 };
+// @preserve-env

package/dist/cjs/set.js

@@ -264,6 +264,11 @@ __export(set_exports, {
 });
 module.exports = __toCommonJS(set_exports);
 
+// ../../../domql/packages/utils/dist/esm/env.js
+var NODE_ENV = "development";
+var isProduction = (env = NODE_ENV) => env === "production";
+var isNotProduction = (env = NODE_ENV) => !isProduction(env);
+
 // ../../../domql/packages/utils/dist/esm/globals.js
 var window2 = globalThis;
 var document2 = window2.document;
@@ -705,10 +710,7 @@ var rgbToHSL = (r, g, b) => {
   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 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;
@@ -723,7 +725,8 @@ var getColorShade = (col, amt) => {
   return ((g | b << 8 | r << 16) + 16777216).toString(16).slice(1);
 };
 var getRgbTone = (rgb, tone) => {
-  if (isString(rgb) && rgb.includes("rgb")) rgb = colorStringToRgbaArray(rgb).join(", ");
+  if (isString(rgb) && rgb.includes("rgb"))
+    rgb = colorStringToRgbaArray(rgb).join(", ");
   if (isString(rgb)) rgb = rgb.split(",").map((v) => parseFloat(v.trim()));
   if (isNumber(tone)) tone += "";
   const toHex = rgbArrayToHex(rgb);
@@ -1030,8 +1033,7 @@ var applyMediaSequenceVars = (FACTORY2, media, options = {}) => {
 };
 
 // src/utils/sprite.js
-var ENV = "development";
-var isDev = ENV === "development" || ENV === "testing";
+var isDev = isNotProduction();
 var parseRootAttributes = (htmlString) => {
   const val = htmlString.default || htmlString;
   if (!isString(val)) {
@@ -1043,7 +1045,9 @@ var parseRootAttributes = (htmlString) => {
     return {};
   }
   const attrString = match[1];
-  const attrs = attrString.match(/(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gm);
+  const attrs = attrString.match(
+    /(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gm
+  );
   return attrs.reduce((acc, attr) => {
     const [key, value] = attr.split("=");
     acc[key] = value.replace(/['"]/g, "");
@@ -1796,3 +1800,4 @@ var set = (recivedConfig, options = SET_OPTIONS) => {
   applyReset();
   return CONFIG2;
 };
+// @preserve-env

package/dist/cjs/system/color.js

@@ -264,6 +264,11 @@ __export(color_exports, {
 });
 module.exports = __toCommonJS(color_exports);
 
+// ../../../domql/packages/utils/dist/esm/env.js
+var NODE_ENV = "development";
+var isProduction = (env = NODE_ENV) => env === "production";
+var isNotProduction = (env = NODE_ENV) => !isProduction(env);
+
 // ../../../domql/packages/utils/dist/esm/globals.js
 var window2 = globalThis;
 var document2 = window2.document;
@@ -658,10 +663,7 @@ var rgbToHSL = (r, g, b) => {
   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 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;
@@ -676,7 +678,8 @@ var getColorShade = (col, amt) => {
   return ((g | b << 8 | r << 16) + 16777216).toString(16).slice(1);
 };
 var getRgbTone = (rgb, tone) => {
-  if (isString(rgb) && rgb.includes("rgb")) rgb = colorStringToRgbaArray(rgb).join(", ");
+  if (isString(rgb) && rgb.includes("rgb"))
+    rgb = colorStringToRgbaArray(rgb).join(", ");
   if (isString(rgb)) rgb = rgb.split(",").map((v) => parseFloat(v.trim()));
   if (isNumber(tone)) tone += "";
   const toHex = rgbArrayToHex(rgb);
@@ -696,6 +699,9 @@ var getRgbTone = (rgb, tone) => {
 // src/utils/sequence.js
 var import_utils4 = __toESM(require_cjs(), 1);
 
+// src/utils/sprite.js
+var isDev = isNotProduction();
+
 // src/system/color.js
 var getColor = (value, key, config) => {
   const CONFIG2 = config || getActiveConfig();
@@ -822,3 +828,4 @@ var setGradient = (val, key, suffix) => {
     value: val.value || val
   };
 };
+// @preserve-env

package/dist/cjs/system/document.js

@@ -261,6 +261,11 @@ __export(document_exports, {
 });
 module.exports = __toCommonJS(document_exports);
 
+// ../../../domql/packages/utils/dist/esm/env.js
+var NODE_ENV = "development";
+var isProduction = (env = NODE_ENV) => env === "production";
+var isNotProduction = (env = NODE_ENV) => !isProduction(env);
+
 // ../../../domql/packages/utils/dist/esm/globals.js
 var window2 = globalThis;
 var document2 = window2.document;
@@ -620,6 +625,9 @@ var getDefaultOrFirstKey = (LIBRARY, key) => {
 // src/utils/sequence.js
 var import_utils4 = __toESM(require_cjs(), 1);
 
+// src/utils/sprite.js
+var isDev = isNotProduction();
+
 // src/system/document.js
 var applyDocument = () => {
   const CONFIG2 = getActiveConfig();
@@ -631,3 +639,4 @@ var applyDocument = () => {
     lineHeight: TYPOGRAPHY2.lineHeight
   });
 };
+// @preserve-env

package/dist/cjs/system/font.js

@@ -263,6 +263,11 @@ __export(font_exports, {
 });
 module.exports = __toCommonJS(font_exports);
 
+// ../../../domql/packages/utils/dist/esm/env.js
+var NODE_ENV = "development";
+var isProduction = (env = NODE_ENV) => env === "production";
+var isNotProduction = (env = NODE_ENV) => !isProduction(env);
+
 // ../../../domql/packages/utils/dist/esm/globals.js
 var window2 = globalThis;
 var document2 = window2.document;
@@ -632,6 +637,9 @@ var getFontFaceEach = (name, weights) => {
 // src/utils/sequence.js
 var import_utils4 = __toESM(require_cjs(), 1);
 
+// src/utils/sprite.js
+var isDev = isNotProduction();
+
 // src/system/font.js
 var setFont = (val, key) => {
   const CSSvar = `--font-${key}`;
@@ -654,3 +662,4 @@ var setFontFamily = (val, key) => {
   const str = `${value.join(", ")}, ${FONT_FAMILY_TYPES2[type]}`;
   return { var: CSSvar, value: str, arr: value, type };
 };
+// @preserve-env

package/dist/cjs/system/index.js

@@ -289,6 +289,11 @@ __export(system_exports, {
 });
 module.exports = __toCommonJS(system_exports);
 
+// ../../../domql/packages/utils/dist/esm/env.js
+var NODE_ENV = "development";
+var isProduction = (env = NODE_ENV) => env === "production";
+var isNotProduction = (env = NODE_ENV) => !isProduction(env);
+
 // ../../../domql/packages/utils/dist/esm/globals.js
 var window2 = globalThis;
 var document2 = window2.document;
@@ -724,10 +729,7 @@ var rgbToHSL = (r, g, b) => {
   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 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;
@@ -742,7 +744,8 @@ var getColorShade = (col, amt) => {
   return ((g | b << 8 | r << 16) + 16777216).toString(16).slice(1);
 };
 var getRgbTone = (rgb, tone) => {
-  if (isString(rgb) && rgb.includes("rgb")) rgb = colorStringToRgbaArray(rgb).join(", ");
+  if (isString(rgb) && rgb.includes("rgb"))
+    rgb = colorStringToRgbaArray(rgb).join(", ");
   if (isString(rgb)) rgb = rgb.split(",").map((v) => parseFloat(v.trim()));
   if (isNumber(tone)) tone += "";
   const toHex = rgbArrayToHex(rgb);
@@ -1049,8 +1052,7 @@ var applyMediaSequenceVars = (FACTORY2, media, options = {}) => {
 };
 
 // src/utils/sprite.js
-var ENV = "development";
-var isDev = ENV === "development" || ENV === "testing";
+var isDev = isNotProduction();
 var generateSprite = (icons) => {
   const CONFIG2 = getActiveConfig();
   let sprite = "";
@@ -1072,7 +1074,9 @@ var parseRootAttributes = (htmlString) => {
     return {};
   }
   const attrString = match[1];
-  const attrs = attrString.match(/(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gm);
+  const attrs = attrString.match(
+    /(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gm
+  );
   return attrs.reduce((acc, attr) => {
     const [key, value] = attr.split("=");
     acc[key] = value.replace(/['"]/g, "");
@@ -1875,3 +1879,4 @@ var applyReset = (reset = {}) => {
     });
   }
 };
+// @preserve-env

package/dist/cjs/system/reset.js

@@ -261,6 +261,11 @@ __export(reset_exports, {
 });
 module.exports = __toCommonJS(reset_exports);
 
+// ../../../domql/packages/utils/dist/esm/env.js
+var NODE_ENV = "development";
+var isProduction = (env = NODE_ENV) => env === "production";
+var isNotProduction = (env = NODE_ENV) => !isProduction(env);
+
 // ../../../domql/packages/utils/dist/esm/globals.js
 var window2 = globalThis;
 var document2 = window2.document;
@@ -636,6 +641,9 @@ var getActiveConfig = (def) => {
 // src/utils/sequence.js
 var import_utils4 = __toESM(require_cjs(), 1);
 
+// src/utils/sprite.js
+var isDev = isNotProduction();
+
 // src/system/theme.js
 var recursiveTheme = (val) => {
   const CONFIG2 = getActiveConfig();
@@ -743,3 +751,4 @@ var applyReset = (reset = {}) => {
     });
   }
 };
+// @preserve-env

package/dist/cjs/system/shadow.js

@@ -262,6 +262,11 @@ __export(shadow_exports, {
 });
 module.exports = __toCommonJS(shadow_exports);
 
+// ../../../domql/packages/utils/dist/esm/env.js
+var NODE_ENV = "development";
+var isProduction = (env = NODE_ENV) => env === "production";
+var isNotProduction = (env = NODE_ENV) => !isProduction(env);
+
 // ../../../domql/packages/utils/dist/esm/globals.js
 var window2 = globalThis;
 var document2 = window2.document;
@@ -661,10 +666,7 @@ var rgbToHSL = (r, g, b) => {
   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 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;
@@ -679,7 +681,8 @@ var getColorShade = (col, amt) => {
   return ((g | b << 8 | r << 16) + 16777216).toString(16).slice(1);
 };
 var getRgbTone = (rgb, tone) => {
-  if (isString(rgb) && rgb.includes("rgb")) rgb = colorStringToRgbaArray(rgb).join(", ");
+  if (isString(rgb) && rgb.includes("rgb"))
+    rgb = colorStringToRgbaArray(rgb).join(", ");
   if (isString(rgb)) rgb = rgb.split(",").map((v) => parseFloat(v.trim()));
   if (isNumber(tone)) tone += "";
   const toHex = rgbArrayToHex(rgb);
@@ -884,6 +887,9 @@ var getSequenceValuePropertyPair = (value, propertyName, sequenceProps) => {
   return { [propertyName]: getSequenceValue(value, sequenceProps) };
 };
 
+// src/utils/sprite.js
+var isDev = isNotProduction();
+
 // src/system/color.js
 var getColor = (value, key, config) => {
   const CONFIG2 = config || getActiveConfig();
@@ -1031,3 +1037,4 @@ var getShadow = (value, globalTheme) => {
   if (CONFIG2.verbose) console.warn("Can't find color", value);
   return value;
 };
+// @preserve-env

package/dist/cjs/system/spacing.js

@@ -264,6 +264,11 @@ __export(spacing_exports, {
 module.exports = __toCommonJS(spacing_exports);
 var import_utils7 = __toESM(require_cjs(), 1);
 
+// ../../../domql/packages/utils/dist/esm/env.js
+var NODE_ENV = "development";
+var isProduction = (env = NODE_ENV) => env === "production";
+var isNotProduction = (env = NODE_ENV) => !isProduction(env);
+
 // ../../../domql/packages/utils/dist/esm/globals.js
 var window2 = globalThis;
 var document2 = window2.document;
@@ -875,6 +880,9 @@ var applyMediaSequenceVars = (FACTORY2, media, options = {}) => {
   }
 };
 
+// src/utils/sprite.js
+var isDev = isNotProduction();
+
 // src/system/spacing.js
 var runThroughMedia = (FACTORY2) => {
   for (const prop in FACTORY2) {
@@ -982,3 +990,4 @@ var getSpacingBasedOnRatio = (props, propertyName, val) => {
   }
   return getSpacingByKey(value, propertyName);
 };
+// @preserve-env

package/dist/cjs/system/svg.js

@@ -264,6 +264,11 @@ __export(svg_exports, {
 });
 module.exports = __toCommonJS(svg_exports);
 
+// ../../../domql/packages/utils/dist/esm/env.js
+var NODE_ENV = "development";
+var isProduction = (env = NODE_ENV) => env === "production";
+var isNotProduction = (env = NODE_ENV) => !isProduction(env);
+
 // ../../../domql/packages/utils/dist/esm/globals.js
 var window2 = globalThis;
 var document2 = window2.document;
@@ -604,8 +609,7 @@ var getActiveConfig = (def) => {
 };
 
 // src/utils/sprite.js
-var ENV = "development";
-var isDev = ENV === "development" || ENV === "testing";
+var isDev = isNotProduction();
 var generateSprite = (icons) => {
   const CONFIG2 = getActiveConfig();
   let sprite = "";
@@ -627,7 +631,9 @@ var parseRootAttributes = (htmlString) => {
     return {};
   }
   const attrString = match[1];
-  const attrs = attrString.match(/(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gm);
+  const attrs = attrString.match(
+    /(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gm
+  );
   return attrs.reduce((acc, attr) => {
     const [key, value] = attr.split("=");
     acc[key] = value.replace(/['"]/g, "");
@@ -733,3 +739,4 @@ var appendSVG = (lib, options = DEF_OPTIONS) => {
     }
   }
 };
+// @preserve-env

package/dist/cjs/system/theme.js

@@ -264,6 +264,11 @@ __export(theme_exports, {
 });
 module.exports = __toCommonJS(theme_exports);
 
+// ../../../domql/packages/utils/dist/esm/env.js
+var NODE_ENV = "development";
+var isProduction = (env = NODE_ENV) => env === "production";
+var isNotProduction = (env = NODE_ENV) => !isProduction(env);
+
 // ../../../domql/packages/utils/dist/esm/globals.js
 var window2 = globalThis;
 var document2 = window2.document;
@@ -658,10 +663,7 @@ var rgbToHSL = (r, g, b) => {
   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 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;
@@ -676,7 +678,8 @@ var getColorShade = (col, amt) => {
   return ((g | b << 8 | r << 16) + 16777216).toString(16).slice(1);
 };
 var getRgbTone = (rgb, tone) => {
-  if (isString(rgb) && rgb.includes("rgb")) rgb = colorStringToRgbaArray(rgb).join(", ");
+  if (isString(rgb) && rgb.includes("rgb"))
+    rgb = colorStringToRgbaArray(rgb).join(", ");
   if (isString(rgb)) rgb = rgb.split(",").map((v) => parseFloat(v.trim()));
   if (isNumber(tone)) tone += "";
   const toHex = rgbArrayToHex(rgb);
@@ -696,6 +699,9 @@ var getRgbTone = (rgb, tone) => {
 // src/utils/sequence.js
 var import_utils4 = __toESM(require_cjs(), 1);
 
+// src/utils/sprite.js
+var isDev = isNotProduction();
+
 // src/system/color.js
 var getColor = (value, key, config) => {
   const CONFIG2 = config || getActiveConfig();
@@ -923,3 +929,4 @@ var getMediaTheme = (value, modifier) => {
   const resolvedTheme = recursiveTheme(themeValue);
   return resolvedTheme;
 };
+// @preserve-env

package/dist/cjs/system/timing.js

@@ -264,6 +264,11 @@ __export(timing_exports, {
 module.exports = __toCommonJS(timing_exports);
 var import_utils7 = __toESM(require_cjs(), 1);
 
+// ../../../domql/packages/utils/dist/esm/env.js
+var NODE_ENV = "development";
+var isProduction = (env = NODE_ENV) => env === "production";
+var isNotProduction = (env = NODE_ENV) => !isProduction(env);
+
 // ../../../domql/packages/utils/dist/esm/globals.js
 var window2 = globalThis;
 var document2 = window2.document;
@@ -837,6 +842,9 @@ var applySequenceVars = (FACTORY2, options = {}) => {
   }
 };
 
+// src/utils/sprite.js
+var isDev = isNotProduction();
+
 // src/system/timing.js
 var applyTimingSequence = () => {
   const CONFIG2 = getActiveConfig();
@@ -858,3 +866,4 @@ var getTimingByKey = (value, property = "timing") => {
     TIMING2
   );
 };
+// @preserve-env

package/dist/cjs/system/typography.js

@@ -264,6 +264,11 @@ __export(typography_exports, {
 });
 module.exports = __toCommonJS(typography_exports);
 
+// ../../../domql/packages/utils/dist/esm/env.js
+var NODE_ENV = "development";
+var isProduction = (env = NODE_ENV) => env === "production";
+var isNotProduction = (env = NODE_ENV) => !isProduction(env);
+
 // ../../../domql/packages/utils/dist/esm/globals.js
 var window2 = globalThis;
 var document2 = window2.document;
@@ -883,6 +888,9 @@ var applyMediaSequenceVars = (FACTORY2, media, options = {}) => {
   }
 };
 
+// src/utils/sprite.js
+var isDev = isNotProduction();
+
 // src/system/typography.js
 var runThroughMedia = (FACTORY2) => {
   const CONFIG2 = getActiveConfig();
@@ -955,3 +963,4 @@ var getFontSizeByKey = (value) => {
   const { TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG2;
   return getSequenceValuePropertyPair(value, "fontSize", TYPOGRAPHY2);
 };
+// @preserve-env

package/dist/cjs/transforms/index.js

@@ -272,6 +272,11 @@ __export(transforms_exports, {
 });
 module.exports = __toCommonJS(transforms_exports);
 
+// ../../../domql/packages/utils/dist/esm/env.js
+var NODE_ENV = "development";
+var isProduction = (env = NODE_ENV) => env === "production";
+var isNotProduction = (env = NODE_ENV) => !isProduction(env);
+
 // ../../../domql/packages/utils/dist/esm/globals.js
 var window2 = globalThis;
 var document2 = window2.document;
@@ -684,10 +689,7 @@ var rgbToHSL = (r, g, b) => {
   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 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;
@@ -702,7 +704,8 @@ var getColorShade = (col, amt) => {
   return ((g | b << 8 | r << 16) + 16777216).toString(16).slice(1);
 };
 var getRgbTone = (rgb, tone) => {
-  if (isString(rgb) && rgb.includes("rgb")) rgb = colorStringToRgbaArray(rgb).join(", ");
+  if (isString(rgb) && rgb.includes("rgb"))
+    rgb = colorStringToRgbaArray(rgb).join(", ");
   if (isString(rgb)) rgb = rgb.split(",").map((v) => parseFloat(v.trim()));
   if (isNumber(tone)) tone += "";
   const toHex = rgbArrayToHex(rgb);
@@ -951,6 +954,9 @@ var applySequenceVars = (FACTORY2, options = {}) => {
   }
 };
 
+// src/utils/sprite.js
+var isDev = isNotProduction();
+
 // src/system/color.js
 var getColor = (value, key, config) => {
   const CONFIG2 = config || getActiveConfig();
@@ -1252,3 +1258,4 @@ var transformSizeRatio = (propertyName, props) => {
     ratio: true
   });
 };
+// @preserve-env

package/dist/cjs/utils/color.js

@@ -38,6 +38,11 @@ __export(color_exports, {
 });
 module.exports = __toCommonJS(color_exports);
 
+// ../../../domql/packages/utils/dist/esm/env.js
+var NODE_ENV = "development";
+var isProduction = (env = NODE_ENV) => env === "production";
+var isNotProduction = (env = NODE_ENV) => !isProduction(env);
+
 // ../../../domql/packages/utils/dist/esm/globals.js
 var window2 = globalThis;
 var document2 = window2.document;
@@ -50,7 +55,6 @@ var isNumber = (arg) => typeof arg === "number";
 var isMobile = (() => typeof navigator === "undefined" ? false : /Mobi/.test(navigator.userAgent))();
 
 // src/utils/color.js
-var ENV = "development";
 var colorStringToRgbaArray = (color) => {
   if (color === "") return [0, 0, 0, 0];
   if (color.toLowerCase() === "transparent") return [0, 0, 0, 0];
@@ -121,10 +125,7 @@ var mixTwoRgb = (colorA, colorB, range = 0.5) => {
 };
 var changeLightness = (delta, hsl) => {
   const [hue, saturation, lightness] = hsl;
-  const newLightness = Math.max(
-    0,
-    Math.min(100, lightness + parseFloat(delta))
-  );
+  const newLightness = Math.max(0, Math.min(100, lightness + parseFloat(delta)));
   return [hue, saturation, newLightness];
 };
 var rgbToHSL = (r, g, b) => {
@@ -134,10 +135,7 @@ var rgbToHSL = (r, g, b) => {
   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 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;
@@ -155,23 +153,22 @@ 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
-    );
+    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 === "testing" || ENV === "development") console.warn(color + " color is not rgba");
+    if (isNotProduction()) console.warn(color + " color is not rgba");
     return;
   }
   arr[3] = opacity;
   return `rgba(${arr})`;
 };
 var getRgbTone = (rgb, tone) => {
-  if (isString(rgb) && rgb.includes("rgb")) rgb = colorStringToRgbaArray(rgb).join(", ");
+  if (isString(rgb) && rgb.includes("rgb"))
+    rgb = colorStringToRgbaArray(rgb).join(", ");
   if (isString(rgb)) rgb = rgb.split(",").map((v) => parseFloat(v.trim()));
   if (isNumber(tone)) tone += "";
   const toHex = rgbArrayToHex(rgb);
@@ -187,3 +184,4 @@ var getRgbTone = (rgb, tone) => {
     return newRgb;
   }
 };
+// @preserve-env

package/dist/cjs/utils/index.js

@@ -309,6 +309,11 @@ var isScalingUnit = (unit) => {
   return unit === "em" || unit === "rem" || unit === "vw" || unit === "vh" || unit === "vmax" || unit === "vmin";
 };
 
+// ../../../domql/packages/utils/dist/esm/env.js
+var NODE_ENV = "development";
+var isProduction = (env = NODE_ENV) => env === "production";
+var isNotProduction = (env = NODE_ENV) => !isProduction(env);
+
 // ../../../domql/packages/utils/dist/esm/globals.js
 var window2 = globalThis;
 var document2 = window2.document;
@@ -426,7 +431,6 @@ var deepClone = (obj, options = {}) => {
 var isMobile = (() => typeof navigator === "undefined" ? false : /Mobi/.test(navigator.userAgent))();
 
 // src/utils/color.js
-var ENV = "development";
 var colorStringToRgbaArray = (color) => {
   if (color === "") return [0, 0, 0, 0];
   if (color.toLowerCase() === "transparent") return [0, 0, 0, 0];
@@ -497,10 +501,7 @@ var mixTwoRgb = (colorA, colorB, range = 0.5) => {
 };
 var changeLightness = (delta, hsl) => {
   const [hue, saturation, lightness] = hsl;
-  const newLightness = Math.max(
-    0,
-    Math.min(100, lightness + parseFloat(delta))
-  );
+  const newLightness = Math.max(0, Math.min(100, lightness + parseFloat(delta)));
   return [hue, saturation, newLightness];
 };
 var rgbToHSL = (r, g, b) => {
@@ -510,10 +511,7 @@ var rgbToHSL = (r, g, b) => {
   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 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;
@@ -531,23 +529,22 @@ 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
-    );
+    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 === "testing" || ENV === "development") console.warn(color + " color is not rgba");
+    if (isNotProduction()) console.warn(color + " color is not rgba");
     return;
   }
   arr[3] = opacity;
   return `rgba(${arr})`;
 };
 var getRgbTone = (rgb, tone) => {
-  if (isString(rgb) && rgb.includes("rgb")) rgb = colorStringToRgbaArray(rgb).join(", ");
+  if (isString(rgb) && rgb.includes("rgb"))
+    rgb = colorStringToRgbaArray(rgb).join(", ");
   if (isString(rgb)) rgb = rgb.split(",").map((v) => parseFloat(v.trim()));
   if (isNumber(tone)) tone += "";
   const toHex = rgbArrayToHex(rgb);
@@ -1145,8 +1142,7 @@ var applyMediaSequenceVars = (FACTORY2, media, options = {}) => {
 };
 
 // src/utils/sprite.js
-var ENV2 = "development";
-var isDev = ENV2 === "development" || ENV2 === "testing";
+var isDev = isNotProduction();
 var generateSprite = (icons) => {
   const CONFIG2 = getActiveConfig();
   let sprite = "";
@@ -1168,7 +1164,9 @@ var parseRootAttributes = (htmlString) => {
     return {};
   }
   const attrString = match[1];
-  const attrs = attrString.match(/(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gm);
+  const attrs = attrString.match(
+    /(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gm
+  );
   return attrs.reduce((acc, attr) => {
     const [key, value] = attr.split("=");
     acc[key] = value.replace(/['"]/g, "");
@@ -1203,3 +1201,4 @@ var convertSvgToSymbol = (key, code) => {
   symbol = symbol.replace("</svg", "</symbol");
   return symbol;
 };
+// @preserve-env

package/dist/cjs/utils/sequence.js

@@ -851,3 +851,4 @@ var findHeadings = (propertyNames) => {
     return sequence[findLetter];
   });
 };
+// @preserve-env

package/dist/cjs/utils/sprite.js

@@ -25,6 +25,11 @@ __export(sprite_exports, {
 });
 module.exports = __toCommonJS(sprite_exports);
 
+// ../../../domql/packages/utils/dist/esm/env.js
+var NODE_ENV = "development";
+var isProduction = (env = NODE_ENV) => env === "production";
+var isNotProduction = (env = NODE_ENV) => !isProduction(env);
+
 // ../../../domql/packages/utils/dist/esm/globals.js
 var window2 = globalThis;
 var document2 = window2.document;
@@ -362,8 +367,7 @@ var getActiveConfig = (def) => {
 };
 
 // src/utils/sprite.js
-var ENV = "development";
-var isDev = ENV === "development" || ENV === "testing";
+var isDev = isNotProduction();
 var generateSprite = (icons) => {
   const CONFIG2 = getActiveConfig();
   let sprite = "";
@@ -385,7 +389,9 @@ var parseRootAttributes = (htmlString) => {
     return {};
   }
   const attrString = match[1];
-  const attrs = attrString.match(/(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gm);
+  const attrs = attrString.match(
+    /(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gm
+  );
   return attrs.reduce((acc, attr) => {
     const [key, value] = attr.split("=");
     acc[key] = value.replace(/['"]/g, "");
@@ -420,3 +426,4 @@ var convertSvgToSymbol = (key, code) => {
   symbol = symbol.replace("</svg", "</symbol");
   return symbol;
 };
+// @preserve-env

package/dist/cjs/utils/var.js

@@ -693,3 +693,4 @@ var applyMediaSequenceVars = (FACTORY2, media, options = {}) => {
     CSS_VARS2[item.variable + "_" + mediaName] = value;
   }
 };
+// @preserve-env

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/scratch",
   "description": "Φ / CSS framework and methodology.",
   "author": "symbo.ls",
-  "version": "2.27.8",
+  "version": "2.27.10",
   "files": [
     "src",
     "dist"
@@ -18,16 +18,16 @@
   "publishConfig": {},
   "scripts": {
     "copy:package:cjs": "cp ../../build/package-cjs.json dist/cjs/package.json",
-    "build:esm": "cross-env NODE_ENV=$NODE_ENV npx esbuild ./src/*.js ./src/**/*.js --target=es2017 --format=esm --outdir=dist/esm",
-    "build:cjs": "cross-env NODE_ENV=$NODE_ENV npx esbuild ./src/*.js ./src/**/*.js --target=node16 --format=cjs --outdir=dist/cjs --bundle",
-    "build:iife": "cross-env NODE_ENV=$NODE_ENV npx esbuild ./src/index.js --target=es2017 --format=iife --outdir=dist/iife --bundle --minify",
+    "build:esm": "npx cross-env NODE_ENV=$NODE_ENV npx esbuild ./src/*.js ./src/**/*.js --target=es2017 --format=esm --outdir=dist/esm",
+    "build:cjs": "npx cross-env NODE_ENV=$NODE_ENV npx esbuild ./src/*.js ./src/**/*.js --target=node16 --format=cjs --outdir=dist/cjs --bundle",
+    "build:iife": "npx cross-env NODE_ENV=$NODE_ENV npx esbuild ./src/index.js --target=es2017 --format=iife --outdir=dist/iife --bundle --minify",
     "build": "npm run build:cjs",
     "prepublish": "rimraf -I dist && npm run build && npm run copy:package:cjs"
   },
   "dependencies": {
-    "@domql/utils": "^2.27.8",
-    "@symbo.ls/utils": "^2.27.8",
+    "@domql/utils": "^2.27.10",
+    "@symbo.ls/utils": "^2.27.10",
     "color-contrast-checker": "^1.5.0"
   },
-  "gitHead": "e783fd54228d5c7aaab9d4b5624199a17a6c4713"
+  "gitHead": "668d24f518bdb163357897504c5912c085638d3e"
 }

package/src/utils/color.js

@@ -1,7 +1,12 @@
 'use strict'
 
-import { document, window, isString, isNumber } from '@domql/utils'
-const ENV = process.env.NODE_ENV
+import {
+  document,
+  window,
+  isString,
+  isNumber,
+  isNotProduction
+} from '@domql/utils'
 
 export const colorStringToRgbaArray = color => {
   if (color === '') return [0, 0, 0, 0]
@@ -10,11 +15,22 @@ export const colorStringToRgbaArray = color => {
   // convert #RGB and #RGBA to #RRGGBB and #RRGGBBAA
   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),
+      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]
+      color.length > 7 ? parseInt(color.substr(7, 2), 16) / 255 : 1
+    ]
   }
 
   // convert named colors
@@ -81,11 +97,7 @@ export const hexToRgba = (hex, alpha = 1) => {
 export const mixTwoRgb = (colorA, colorB, range = 0.5) => {
   const arr = []
   for (let i = 0; i < 3; i++) {
-    arr[i] = ~~(
-      colorA[i] + (
-        (colorB[i] - colorA[i]) * range
-      )
-    )
+    arr[i] = ~~(colorA[i] + (colorB[i] - colorA[i]) * range)
   }
   return `rgb(${arr})`
 }
@@ -93,25 +105,27 @@ export const mixTwoRgb = (colorA, colorB, range = 0.5) => {
 export const changeLightness = (delta, hsl) => {
   const [hue, saturation, lightness] = hsl
 
-  const newLightness = Math.max(
-    0,
-    Math.min(100, lightness + parseFloat(delta))
-  )
+  const newLightness = Math.max(0, Math.min(100, lightness + parseFloat(delta)))
 
   return [hue, saturation, newLightness]
 }
 
 export const 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)) //eslint-disable-line
+  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) //eslint-disable-line
   return [60 * (h < 0 ? h + 6 : h), f ? n / f : 0, (a + a - n) / 2]
 }
 
-export const hslToRgb = (h, s, l,
+export const 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 = (n, k = (n + h / 30) % 12) =>
+    l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)
 ) => [f(0), f(8), f(4)]
 
 export const getColorShade = (col, amt) => {
@@ -122,12 +136,12 @@ export const getColorShade = (col, amt) => {
   if (r > 255) r = 255
   else if (r < 0) r = 0
 
-  let b = ((num >> 8) & 0x00FF) + amt
+  let b = ((num >> 8) & 0x00ff) + amt
 
   if (b > 255) b = 255
   else if (b < 0) b = 0
 
-  let g = (num & 0x0000FF) + amt
+  let g = (num & 0x0000ff) + amt
 
   if (g > 255) g = 255
   else if (g < 0) g = 0
@@ -138,12 +152,8 @@ export const getColorShade = (col, amt) => {
 export const 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
-      ))
-    )
+    const round = i === 3 ? x => x : Math.round
+    arr[i] = round(colorA[i] + (colorB[i] - colorA[i]) * range)
   }
   return `rgba(${arr})`
 }
@@ -151,7 +161,7 @@ export const mixTwoRgba = (colorA, colorB, range = 0.5) => {
 export const opacify = (color, opacity) => {
   const arr = colorStringToRgbaArray(color)
   if (!arr) {
-    if (ENV === 'testing' || ENV === 'development') console.warn(color + ' color is not rgba')
+    if (isNotProduction()) console.warn(color + ' color is not rgba')
     return
   }
   arr[3] = opacity
@@ -159,7 +169,8 @@ export const opacify = (color, opacity) => {
 }
 
 export const getRgbTone = (rgb, tone) => {
-  if (isString(rgb) && rgb.includes('rgb')) rgb = colorStringToRgbaArray(rgb).join(', ')
+  if (isString(rgb) && rgb.includes('rgb'))
+    rgb = colorStringToRgbaArray(rgb).join(', ')
   if (isString(rgb)) rgb = rgb.split(',').map(v => parseFloat(v.trim()))
   if (isNumber(tone)) tone += ''
   const toHex = rgbArrayToHex(rgb)
@@ -172,7 +183,7 @@ export const getRgbTone = (rgb, tone) => {
     const [r, g, b] = rgb
     const hsl = rgbToHSL(r, g, b)
     const [h, s, l] = hsl // eslint-disable-line
-    const newRgb = hslToRgb(h, s, parseFloat(tone) / 100 * 255)
+    const newRgb = hslToRgb(h, s, (parseFloat(tone) / 100) * 255)
     return newRgb
   }
 }

package/src/utils/sprite.js

@@ -1,12 +1,11 @@
 'use strict'
 
-import { isArray, isString } from '@domql/utils'
+import { isArray, isNotProduction, isString } from '@domql/utils'
 import { getActiveConfig } from '../factory'
 
-const ENV = process.env.NODE_ENV || 'development'
-const isDev = ENV === 'development' || ENV === 'testing'
+const isDev = isNotProduction()
 
-export const generateSprite = (icons) => {
+export const generateSprite = icons => {
   const CONFIG = getActiveConfig()
 
   let sprite = ''
@@ -20,7 +19,7 @@ export const generateSprite = (icons) => {
   return sprite
 }
 
-const parseRootAttributes = (htmlString) => {
+const parseRootAttributes = htmlString => {
   const val = htmlString.default || htmlString
   if (!isString(val)) {
     if (isDev) console.warn('parseRootAttributes:', val, 'is not a string')
@@ -33,7 +32,9 @@ const parseRootAttributes = (htmlString) => {
   }
 
   const attrString = match[1]
-  const attrs = attrString.match(/(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gm)
+  const attrs = attrString.match(
+    /(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gm
+  )
   return attrs.reduce((acc, attr) => {
     const [key, value] = attr.split('=')
     acc[key] = value.replace(/['"]/g, '')
@@ -49,7 +50,9 @@ const replaceIdsAndUrls = (code, key) => {
   if (isArray(matches)) {
     matches.forEach(() => {
       const randomKey = Math.floor(Math.random() * 100000)
-      replacedCode = code.replace(idRegex, `id="${key}-${randomKey}"`).replace(urlRegex, `url(#${key}-${randomKey})`)
+      replacedCode = code
+        .replace(idRegex, `id="${key}-${randomKey}"`)
+        .replace(urlRegex, `url(#${key}-${randomKey})`)
     })
   }
   return replacedCode
@@ -64,7 +67,8 @@ export const convertSvgToSymbol = (key, code) => {
 
   const replacedCode = replaceIdsAndUrls(code, key)
 
-  let symbol = replacedCode.replace('<svg',
+  let symbol = replacedCode.replace(
+    '<svg',
     `<symbol id="${key}" xmlns="${xmlns}" viewBox="${viewBox}"`
   )