@symbo.ls/scratch 2.11.16 → 2.11.18

package/dist/cjs/index.js

@@ -354,7 +354,7 @@ var require_types = __commonJS({
     __export2(types_exports, {
       TYPES: () => TYPES,
       is: () => is,
-      isArray: () => isArray5,
+      isArray: () => isArray6,
       isBoolean: () => isBoolean,
       isDefined: () => isDefined2,
       isFunction: () => isFunction2,
@@ -381,21 +381,21 @@ var require_types = __commonJS({
     var isFunction2 = (arg) => typeof arg === "function";
     var isBoolean = (arg) => arg === true || arg === false;
     var isNull = (arg) => arg === null;
-    var isArray5 = (arg) => Array.isArray(arg);
+    var isArray6 = (arg) => Array.isArray(arg);
     var isObjectLike3 = (arg) => {
       if (arg === null)
         return false;
       return typeof arg === "object";
     };
     var isDefined2 = (arg) => {
-      return isObject7(arg) || isObjectLike3(arg) || isString8(arg) || isNumber(arg) || isFunction2(arg) || isArray5(arg) || isObjectLike3(arg) || isBoolean(arg) || isNull(arg);
+      return isObject7(arg) || isObjectLike3(arg) || isString8(arg) || isNumber(arg) || isFunction2(arg) || isArray6(arg) || isObjectLike3(arg) || isBoolean(arg) || isNull(arg);
     };
     var isUndefined = (arg) => {
       return arg === void 0;
     };
     var TYPES = {
       boolean: isBoolean,
-      array: isArray5,
+      array: isArray6,
       object: isObject7,
       string: isString8,
       number: isNumber,
@@ -1801,12 +1801,26 @@ var parseRootAttributes = (htmlString) => {
     return acc;
   }, {});
 };
+var replaceIdsAndUrls = (code, key) => {
+  const idRegex = /id="([^"]*)"/;
+  const urlRegex = /url\(#([^)]*)\)/g;
+  const matches = code.match(/id="([^"]*)"/g);
+  let replacedCode = code;
+  if ((0, import_utils7.isArray)(matches)) {
+    matches.forEach(() => {
+      const randomKey = Math.floor(Math.random() * 1e5);
+      replacedCode = code.replace(idRegex, `id="${key}-${randomKey}"`).replace(urlRegex, `url(#${key}-${randomKey})`);
+    });
+  }
+  return replacedCode;
+};
 var convertSvgToSymbol = (key, code) => {
   const extractAttrs = parseRootAttributes(code);
   const { width, height } = extractAttrs;
   const viewBox = extractAttrs.viewBox || `0 0 ${width || 24} ${height || 24}`;
   const xmlns = "http://www.w3.org/2000/svg";
-  let symbol = code.replace(
+  const replacedCode = replaceIdsAndUrls(code, key);
+  let symbol = replacedCode.replace(
     "<svg",
     `<symbol id="${key}" xmlns="${xmlns}" viewBox="${viewBox}"`
   );

package/dist/cjs/set.js

@@ -354,7 +354,7 @@ var require_types = __commonJS({
     __export2(types_exports, {
       TYPES: () => TYPES,
       is: () => is,
-      isArray: () => isArray5,
+      isArray: () => isArray6,
       isBoolean: () => isBoolean,
       isDefined: () => isDefined2,
       isFunction: () => isFunction2,
@@ -381,21 +381,21 @@ var require_types = __commonJS({
     var isFunction2 = (arg) => typeof arg === "function";
     var isBoolean = (arg) => arg === true || arg === false;
     var isNull = (arg) => arg === null;
-    var isArray5 = (arg) => Array.isArray(arg);
+    var isArray6 = (arg) => Array.isArray(arg);
     var isObjectLike3 = (arg) => {
       if (arg === null)
         return false;
       return typeof arg === "object";
     };
     var isDefined2 = (arg) => {
-      return isObject7(arg) || isObjectLike3(arg) || isString7(arg) || isNumber(arg) || isFunction2(arg) || isArray5(arg) || isObjectLike3(arg) || isBoolean(arg) || isNull(arg);
+      return isObject7(arg) || isObjectLike3(arg) || isString7(arg) || isNumber(arg) || isFunction2(arg) || isArray6(arg) || isObjectLike3(arg) || isBoolean(arg) || isNull(arg);
     };
     var isUndefined = (arg) => {
       return arg === void 0;
     };
     var TYPES = {
       boolean: isBoolean,
-      array: isArray5,
+      array: isArray6,
       object: isObject7,
       string: isString7,
       number: isNumber,
@@ -1493,12 +1493,26 @@ var parseRootAttributes = (htmlString) => {
     return acc;
   }, {});
 };
+var replaceIdsAndUrls = (code, key) => {
+  const idRegex = /id="([^"]*)"/;
+  const urlRegex = /url\(#([^)]*)\)/g;
+  const matches = code.match(/id="([^"]*)"/g);
+  let replacedCode = code;
+  if ((0, import_utils7.isArray)(matches)) {
+    matches.forEach(() => {
+      const randomKey = Math.floor(Math.random() * 1e5);
+      replacedCode = code.replace(idRegex, `id="${key}-${randomKey}"`).replace(urlRegex, `url(#${key}-${randomKey})`);
+    });
+  }
+  return replacedCode;
+};
 var convertSvgToSymbol = (key, code) => {
   const extractAttrs = parseRootAttributes(code);
   const { width, height } = extractAttrs;
   const viewBox = extractAttrs.viewBox || `0 0 ${width || 24} ${height || 24}`;
   const xmlns = "http://www.w3.org/2000/svg";
-  let symbol = code.replace(
+  const replacedCode = replaceIdsAndUrls(code, key);
+  let symbol = replacedCode.replace(
     "<svg",
     `<symbol id="${key}" xmlns="${xmlns}" viewBox="${viewBox}"`
   );

package/dist/cjs/system/color.js

@@ -354,7 +354,7 @@ var require_types = __commonJS({
     __export2(types_exports, {
       TYPES: () => TYPES,
       is: () => is,
-      isArray: () => isArray4,
+      isArray: () => isArray5,
       isBoolean: () => isBoolean,
       isDefined: () => isDefined2,
       isFunction: () => isFunction,
@@ -381,21 +381,21 @@ var require_types = __commonJS({
     var isFunction = (arg) => typeof arg === "function";
     var isBoolean = (arg) => arg === true || arg === false;
     var isNull = (arg) => arg === null;
-    var isArray4 = (arg) => Array.isArray(arg);
+    var isArray5 = (arg) => Array.isArray(arg);
     var isObjectLike2 = (arg) => {
       if (arg === null)
         return false;
       return typeof arg === "object";
     };
     var isDefined2 = (arg) => {
-      return isObject5(arg) || isObjectLike2(arg) || isString5(arg) || isNumber(arg) || isFunction(arg) || isArray4(arg) || isObjectLike2(arg) || isBoolean(arg) || isNull(arg);
+      return isObject5(arg) || isObjectLike2(arg) || isString5(arg) || isNumber(arg) || isFunction(arg) || isArray5(arg) || isObjectLike2(arg) || isBoolean(arg) || isNull(arg);
     };
     var isUndefined = (arg) => {
       return arg === void 0;
     };
     var TYPES = {
       boolean: isBoolean,
-      array: isArray4,
+      array: isArray5,
       object: isObject5,
       string: isString5,
       number: isNumber,

package/dist/cjs/system/document.js

@@ -354,7 +354,7 @@ var require_types = __commonJS({
     __export2(types_exports, {
       TYPES: () => TYPES,
       is: () => is,
-      isArray: () => isArray3,
+      isArray: () => isArray4,
       isBoolean: () => isBoolean,
       isDefined: () => isDefined2,
       isFunction: () => isFunction,
@@ -381,21 +381,21 @@ var require_types = __commonJS({
     var isFunction = (arg) => typeof arg === "function";
     var isBoolean = (arg) => arg === true || arg === false;
     var isNull = (arg) => arg === null;
-    var isArray3 = (arg) => Array.isArray(arg);
+    var isArray4 = (arg) => Array.isArray(arg);
     var isObjectLike2 = (arg) => {
       if (arg === null)
         return false;
       return typeof arg === "object";
     };
     var isDefined2 = (arg) => {
-      return isObject4(arg) || isObjectLike2(arg) || isString4(arg) || isNumber(arg) || isFunction(arg) || isArray3(arg) || isObjectLike2(arg) || isBoolean(arg) || isNull(arg);
+      return isObject4(arg) || isObjectLike2(arg) || isString4(arg) || isNumber(arg) || isFunction(arg) || isArray4(arg) || isObjectLike2(arg) || isBoolean(arg) || isNull(arg);
     };
     var isUndefined = (arg) => {
       return arg === void 0;
     };
     var TYPES = {
       boolean: isBoolean,
-      array: isArray3,
+      array: isArray4,
       object: isObject4,
       string: isString4,
       number: isNumber,

package/dist/cjs/system/font.js

@@ -354,7 +354,7 @@ var require_types = __commonJS({
     __export2(types_exports, {
       TYPES: () => TYPES,
       is: () => is,
-      isArray: () => isArray3,
+      isArray: () => isArray4,
       isBoolean: () => isBoolean,
       isDefined: () => isDefined2,
       isFunction: () => isFunction,
@@ -381,21 +381,21 @@ var require_types = __commonJS({
     var isFunction = (arg) => typeof arg === "function";
     var isBoolean = (arg) => arg === true || arg === false;
     var isNull = (arg) => arg === null;
-    var isArray3 = (arg) => Array.isArray(arg);
+    var isArray4 = (arg) => Array.isArray(arg);
     var isObjectLike2 = (arg) => {
       if (arg === null)
         return false;
       return typeof arg === "object";
     };
     var isDefined2 = (arg) => {
-      return isObject5(arg) || isObjectLike2(arg) || isString4(arg) || isNumber(arg) || isFunction(arg) || isArray3(arg) || isObjectLike2(arg) || isBoolean(arg) || isNull(arg);
+      return isObject5(arg) || isObjectLike2(arg) || isString4(arg) || isNumber(arg) || isFunction(arg) || isArray4(arg) || isObjectLike2(arg) || isBoolean(arg) || isNull(arg);
     };
     var isUndefined = (arg) => {
       return arg === void 0;
     };
     var TYPES = {
       boolean: isBoolean,
-      array: isArray3,
+      array: isArray4,
       object: isObject5,
       string: isString4,
       number: isNumber,

package/dist/cjs/system/index.js

@@ -354,7 +354,7 @@ var require_types = __commonJS({
     __export2(types_exports, {
       TYPES: () => TYPES,
       is: () => is,
-      isArray: () => isArray5,
+      isArray: () => isArray6,
       isBoolean: () => isBoolean,
       isDefined: () => isDefined2,
       isFunction: () => isFunction,
@@ -381,21 +381,21 @@ var require_types = __commonJS({
     var isFunction = (arg) => typeof arg === "function";
     var isBoolean = (arg) => arg === true || arg === false;
     var isNull = (arg) => arg === null;
-    var isArray5 = (arg) => Array.isArray(arg);
+    var isArray6 = (arg) => Array.isArray(arg);
     var isObjectLike3 = (arg) => {
       if (arg === null)
         return false;
       return typeof arg === "object";
     };
     var isDefined2 = (arg) => {
-      return isObject7(arg) || isObjectLike3(arg) || isString7(arg) || isNumber(arg) || isFunction(arg) || isArray5(arg) || isObjectLike3(arg) || isBoolean(arg) || isNull(arg);
+      return isObject7(arg) || isObjectLike3(arg) || isString7(arg) || isNumber(arg) || isFunction(arg) || isArray6(arg) || isObjectLike3(arg) || isBoolean(arg) || isNull(arg);
     };
     var isUndefined = (arg) => {
       return arg === void 0;
     };
     var TYPES = {
       boolean: isBoolean,
-      array: isArray5,
+      array: isArray6,
       object: isObject7,
       string: isString7,
       number: isNumber,
@@ -1588,12 +1588,26 @@ var parseRootAttributes = (htmlString) => {
     return acc;
   }, {});
 };
+var replaceIdsAndUrls = (code, key) => {
+  const idRegex = /id="([^"]*)"/;
+  const urlRegex = /url\(#([^)]*)\)/g;
+  const matches = code.match(/id="([^"]*)"/g);
+  let replacedCode = code;
+  if ((0, import_utils7.isArray)(matches)) {
+    matches.forEach(() => {
+      const randomKey = Math.floor(Math.random() * 1e5);
+      replacedCode = code.replace(idRegex, `id="${key}-${randomKey}"`).replace(urlRegex, `url(#${key}-${randomKey})`);
+    });
+  }
+  return replacedCode;
+};
 var convertSvgToSymbol = (key, code) => {
   const extractAttrs = parseRootAttributes(code);
   const { width, height } = extractAttrs;
   const viewBox = extractAttrs.viewBox || `0 0 ${width || 24} ${height || 24}`;
   const xmlns = "http://www.w3.org/2000/svg";
-  let symbol = code.replace(
+  const replacedCode = replaceIdsAndUrls(code, key);
+  let symbol = replacedCode.replace(
     "<svg",
     `<symbol id="${key}" xmlns="${xmlns}" viewBox="${viewBox}"`
   );

package/dist/cjs/system/reset.js

@@ -354,7 +354,7 @@ var require_types = __commonJS({
     __export2(types_exports, {
       TYPES: () => TYPES,
       is: () => is,
-      isArray: () => isArray5,
+      isArray: () => isArray6,
       isBoolean: () => isBoolean,
       isDefined: () => isDefined2,
       isFunction: () => isFunction,
@@ -381,21 +381,21 @@ var require_types = __commonJS({
     var isFunction = (arg) => typeof arg === "function";
     var isBoolean = (arg) => arg === true || arg === false;
     var isNull = (arg) => arg === null;
-    var isArray5 = (arg) => Array.isArray(arg);
+    var isArray6 = (arg) => Array.isArray(arg);
     var isObjectLike3 = (arg) => {
       if (arg === null)
         return false;
       return typeof arg === "object";
     };
     var isDefined2 = (arg) => {
-      return isObject7(arg) || isObjectLike3(arg) || isString7(arg) || isNumber(arg) || isFunction(arg) || isArray5(arg) || isObjectLike3(arg) || isBoolean(arg) || isNull(arg);
+      return isObject7(arg) || isObjectLike3(arg) || isString7(arg) || isNumber(arg) || isFunction(arg) || isArray6(arg) || isObjectLike3(arg) || isBoolean(arg) || isNull(arg);
     };
     var isUndefined = (arg) => {
       return arg === void 0;
     };
     var TYPES = {
       boolean: isBoolean,
-      array: isArray5,
+      array: isArray6,
       object: isObject7,
       string: isString7,
       number: isNumber,

package/dist/cjs/system/spacing.js

@@ -354,7 +354,7 @@ var require_types = __commonJS({
     __export2(types_exports, {
       TYPES: () => TYPES,
       is: () => is,
-      isArray: () => isArray3,
+      isArray: () => isArray4,
       isBoolean: () => isBoolean,
       isDefined: () => isDefined2,
       isFunction: () => isFunction,
@@ -381,21 +381,21 @@ var require_types = __commonJS({
     var isFunction = (arg) => typeof arg === "function";
     var isBoolean = (arg) => arg === true || arg === false;
     var isNull = (arg) => arg === null;
-    var isArray3 = (arg) => Array.isArray(arg);
+    var isArray4 = (arg) => Array.isArray(arg);
     var isObjectLike2 = (arg) => {
       if (arg === null)
         return false;
       return typeof arg === "object";
     };
     var isDefined2 = (arg) => {
-      return isObject4(arg) || isObjectLike2(arg) || isString5(arg) || isNumber(arg) || isFunction(arg) || isArray3(arg) || isObjectLike2(arg) || isBoolean(arg) || isNull(arg);
+      return isObject4(arg) || isObjectLike2(arg) || isString5(arg) || isNumber(arg) || isFunction(arg) || isArray4(arg) || isObjectLike2(arg) || isBoolean(arg) || isNull(arg);
     };
     var isUndefined = (arg) => {
       return arg === void 0;
     };
     var TYPES = {
       boolean: isBoolean,
-      array: isArray3,
+      array: isArray4,
       object: isObject4,
       string: isString5,
       number: isNumber,

package/dist/cjs/system/svg.js

@@ -354,7 +354,7 @@ var require_types = __commonJS({
     __export2(types_exports, {
       TYPES: () => TYPES,
       is: () => is,
-      isArray: () => isArray3,
+      isArray: () => isArray4,
       isBoolean: () => isBoolean,
       isDefined: () => isDefined2,
       isFunction: () => isFunction,
@@ -381,21 +381,21 @@ var require_types = __commonJS({
     var isFunction = (arg) => typeof arg === "function";
     var isBoolean = (arg) => arg === true || arg === false;
     var isNull = (arg) => arg === null;
-    var isArray3 = (arg) => Array.isArray(arg);
+    var isArray4 = (arg) => Array.isArray(arg);
     var isObjectLike2 = (arg) => {
       if (arg === null)
         return false;
       return typeof arg === "object";
     };
     var isDefined2 = (arg) => {
-      return isObject4(arg) || isObjectLike2(arg) || isString4(arg) || isNumber(arg) || isFunction(arg) || isArray3(arg) || isObjectLike2(arg) || isBoolean(arg) || isNull(arg);
+      return isObject4(arg) || isObjectLike2(arg) || isString4(arg) || isNumber(arg) || isFunction(arg) || isArray4(arg) || isObjectLike2(arg) || isBoolean(arg) || isNull(arg);
     };
     var isUndefined = (arg) => {
       return arg === void 0;
     };
     var TYPES = {
       boolean: isBoolean,
-      array: isArray3,
+      array: isArray4,
       object: isObject4,
       string: isString4,
       number: isNumber,
@@ -1249,12 +1249,26 @@ var parseRootAttributes = (htmlString) => {
     return acc;
   }, {});
 };
+var replaceIdsAndUrls = (code, key) => {
+  const idRegex = /id="([^"]*)"/;
+  const urlRegex = /url\(#([^)]*)\)/g;
+  const matches = code.match(/id="([^"]*)"/g);
+  let replacedCode = code;
+  if ((0, import_utils7.isArray)(matches)) {
+    matches.forEach(() => {
+      const randomKey = Math.floor(Math.random() * 1e5);
+      replacedCode = code.replace(idRegex, `id="${key}-${randomKey}"`).replace(urlRegex, `url(#${key}-${randomKey})`);
+    });
+  }
+  return replacedCode;
+};
 var convertSvgToSymbol = (key, code) => {
   const extractAttrs = parseRootAttributes(code);
   const { width, height } = extractAttrs;
   const viewBox = extractAttrs.viewBox || `0 0 ${width || 24} ${height || 24}`;
   const xmlns = "http://www.w3.org/2000/svg";
-  let symbol = code.replace(
+  const replacedCode = replaceIdsAndUrls(code, key);
+  let symbol = replacedCode.replace(
     "<svg",
     `<symbol id="${key}" xmlns="${xmlns}" viewBox="${viewBox}"`
   );

package/dist/cjs/system/theme.js

@@ -354,7 +354,7 @@ var require_types = __commonJS({
     __export2(types_exports, {
       TYPES: () => TYPES,
       is: () => is,
-      isArray: () => isArray5,
+      isArray: () => isArray6,
       isBoolean: () => isBoolean,
       isDefined: () => isDefined2,
       isFunction: () => isFunction,
@@ -381,21 +381,21 @@ var require_types = __commonJS({
     var isFunction = (arg) => typeof arg === "function";
     var isBoolean = (arg) => arg === true || arg === false;
     var isNull = (arg) => arg === null;
-    var isArray5 = (arg) => Array.isArray(arg);
+    var isArray6 = (arg) => Array.isArray(arg);
     var isObjectLike3 = (arg) => {
       if (arg === null)
         return false;
       return typeof arg === "object";
     };
     var isDefined2 = (arg) => {
-      return isObject6(arg) || isObjectLike3(arg) || isString6(arg) || isNumber(arg) || isFunction(arg) || isArray5(arg) || isObjectLike3(arg) || isBoolean(arg) || isNull(arg);
+      return isObject6(arg) || isObjectLike3(arg) || isString6(arg) || isNumber(arg) || isFunction(arg) || isArray6(arg) || isObjectLike3(arg) || isBoolean(arg) || isNull(arg);
     };
     var isUndefined = (arg) => {
       return arg === void 0;
     };
     var TYPES = {
       boolean: isBoolean,
-      array: isArray5,
+      array: isArray6,
       object: isObject6,
       string: isString6,
       number: isNumber,

package/dist/cjs/system/timing.js

@@ -354,7 +354,7 @@ var require_types = __commonJS({
     __export2(types_exports, {
       TYPES: () => TYPES,
       is: () => is,
-      isArray: () => isArray3,
+      isArray: () => isArray4,
       isBoolean: () => isBoolean,
       isDefined: () => isDefined2,
       isFunction: () => isFunction,
@@ -381,21 +381,21 @@ var require_types = __commonJS({
     var isFunction = (arg) => typeof arg === "function";
     var isBoolean = (arg) => arg === true || arg === false;
     var isNull = (arg) => arg === null;
-    var isArray3 = (arg) => Array.isArray(arg);
+    var isArray4 = (arg) => Array.isArray(arg);
     var isObjectLike2 = (arg) => {
       if (arg === null)
         return false;
       return typeof arg === "object";
     };
     var isDefined2 = (arg) => {
-      return isObject4(arg) || isObjectLike2(arg) || isString4(arg) || isNumber(arg) || isFunction(arg) || isArray3(arg) || isObjectLike2(arg) || isBoolean(arg) || isNull(arg);
+      return isObject4(arg) || isObjectLike2(arg) || isString4(arg) || isNumber(arg) || isFunction(arg) || isArray4(arg) || isObjectLike2(arg) || isBoolean(arg) || isNull(arg);
     };
     var isUndefined = (arg) => {
       return arg === void 0;
     };
     var TYPES = {
       boolean: isBoolean,
-      array: isArray3,
+      array: isArray4,
       object: isObject4,
       string: isString4,
       number: isNumber,

package/dist/cjs/system/typography.js

@@ -354,7 +354,7 @@ var require_types = __commonJS({
     __export2(types_exports, {
       TYPES: () => TYPES,
       is: () => is,
-      isArray: () => isArray3,
+      isArray: () => isArray4,
       isBoolean: () => isBoolean,
       isDefined: () => isDefined2,
       isFunction: () => isFunction,
@@ -381,21 +381,21 @@ var require_types = __commonJS({
     var isFunction = (arg) => typeof arg === "function";
     var isBoolean = (arg) => arg === true || arg === false;
     var isNull = (arg) => arg === null;
-    var isArray3 = (arg) => Array.isArray(arg);
+    var isArray4 = (arg) => Array.isArray(arg);
     var isObjectLike2 = (arg) => {
       if (arg === null)
         return false;
       return typeof arg === "object";
     };
     var isDefined2 = (arg) => {
-      return isObject4(arg) || isObjectLike2(arg) || isString4(arg) || isNumber(arg) || isFunction(arg) || isArray3(arg) || isObjectLike2(arg) || isBoolean(arg) || isNull(arg);
+      return isObject4(arg) || isObjectLike2(arg) || isString4(arg) || isNumber(arg) || isFunction(arg) || isArray4(arg) || isObjectLike2(arg) || isBoolean(arg) || isNull(arg);
     };
     var isUndefined = (arg) => {
       return arg === void 0;
     };
     var TYPES = {
       boolean: isBoolean,
-      array: isArray3,
+      array: isArray4,
       object: isObject4,
       string: isString4,
       number: isNumber,

package/dist/cjs/transforms/index.js

@@ -354,7 +354,7 @@ var require_types = __commonJS({
     __export2(types_exports, {
       TYPES: () => TYPES,
       is: () => is,
-      isArray: () => isArray5,
+      isArray: () => isArray6,
       isBoolean: () => isBoolean,
       isDefined: () => isDefined2,
       isFunction: () => isFunction,
@@ -381,21 +381,21 @@ var require_types = __commonJS({
     var isFunction = (arg) => typeof arg === "function";
     var isBoolean = (arg) => arg === true || arg === false;
     var isNull = (arg) => arg === null;
-    var isArray5 = (arg) => Array.isArray(arg);
+    var isArray6 = (arg) => Array.isArray(arg);
     var isObjectLike3 = (arg) => {
       if (arg === null)
         return false;
       return typeof arg === "object";
     };
     var isDefined2 = (arg) => {
-      return isObject7(arg) || isObjectLike3(arg) || isString8(arg) || isNumber(arg) || isFunction(arg) || isArray5(arg) || isObjectLike3(arg) || isBoolean(arg) || isNull(arg);
+      return isObject7(arg) || isObjectLike3(arg) || isString8(arg) || isNumber(arg) || isFunction(arg) || isArray6(arg) || isObjectLike3(arg) || isBoolean(arg) || isNull(arg);
     };
     var isUndefined = (arg) => {
       return arg === void 0;
     };
     var TYPES = {
       boolean: isBoolean,
-      array: isArray5,
+      array: isArray6,
       object: isObject7,
       string: isString8,
       number: isNumber,

package/dist/cjs/utils/index.js

@@ -354,7 +354,7 @@ var require_types = __commonJS({
     __export2(types_exports, {
       TYPES: () => TYPES,
       is: () => is,
-      isArray: () => isArray3,
+      isArray: () => isArray4,
       isBoolean: () => isBoolean,
       isDefined: () => isDefined2,
       isFunction: () => isFunction,
@@ -381,21 +381,21 @@ var require_types = __commonJS({
     var isFunction = (arg) => typeof arg === "function";
     var isBoolean = (arg) => arg === true || arg === false;
     var isNull = (arg) => arg === null;
-    var isArray3 = (arg) => Array.isArray(arg);
+    var isArray4 = (arg) => Array.isArray(arg);
     var isObjectLike2 = (arg) => {
       if (arg === null)
         return false;
       return typeof arg === "object";
     };
     var isDefined2 = (arg) => {
-      return isObject4(arg) || isObjectLike2(arg) || isString4(arg) || isNumber(arg) || isFunction(arg) || isArray3(arg) || isObjectLike2(arg) || isBoolean(arg) || isNull(arg);
+      return isObject4(arg) || isObjectLike2(arg) || isString4(arg) || isNumber(arg) || isFunction(arg) || isArray4(arg) || isObjectLike2(arg) || isBoolean(arg) || isNull(arg);
     };
     var isUndefined = (arg) => {
       return arg === void 0;
     };
     var TYPES = {
       boolean: isBoolean,
-      array: isArray3,
+      array: isArray4,
       object: isObject4,
       string: isString4,
       number: isNumber,
@@ -1666,12 +1666,26 @@ var parseRootAttributes = (htmlString) => {
     return acc;
   }, {});
 };
+var replaceIdsAndUrls = (code, key) => {
+  const idRegex = /id="([^"]*)"/;
+  const urlRegex = /url\(#([^)]*)\)/g;
+  const matches = code.match(/id="([^"]*)"/g);
+  let replacedCode = code;
+  if ((0, import_utils7.isArray)(matches)) {
+    matches.forEach(() => {
+      const randomKey = Math.floor(Math.random() * 1e5);
+      replacedCode = code.replace(idRegex, `id="${key}-${randomKey}"`).replace(urlRegex, `url(#${key}-${randomKey})`);
+    });
+  }
+  return replacedCode;
+};
 var convertSvgToSymbol = (key, code) => {
   const extractAttrs = parseRootAttributes(code);
   const { width, height } = extractAttrs;
   const viewBox = extractAttrs.viewBox || `0 0 ${width || 24} ${height || 24}`;
   const xmlns = "http://www.w3.org/2000/svg";
-  let symbol = code.replace(
+  const replacedCode = replaceIdsAndUrls(code, key);
+  let symbol = replacedCode.replace(
     "<svg",
     `<symbol id="${key}" xmlns="${xmlns}" viewBox="${viewBox}"`
   );

package/dist/cjs/utils/sprite.js

@@ -354,7 +354,7 @@ var require_types = __commonJS({
     __export2(types_exports, {
       TYPES: () => TYPES,
       is: () => is,
-      isArray: () => isArray,
+      isArray: () => isArray2,
       isBoolean: () => isBoolean,
       isDefined: () => isDefined2,
       isFunction: () => isFunction,
@@ -381,21 +381,21 @@ var require_types = __commonJS({
     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 isArray2 = (arg) => Array.isArray(arg);
     var isObjectLike = (arg) => {
       if (arg === null)
         return false;
       return typeof arg === "object";
     };
     var isDefined2 = (arg) => {
-      return isObject2(arg) || isObjectLike(arg) || isString2(arg) || isNumber(arg) || isFunction(arg) || isArray(arg) || isObjectLike(arg) || isBoolean(arg) || isNull(arg);
+      return isObject2(arg) || isObjectLike(arg) || isString2(arg) || isNumber(arg) || isFunction(arg) || isArray2(arg) || isObjectLike(arg) || isBoolean(arg) || isNull(arg);
     };
     var isUndefined = (arg) => {
       return arg === void 0;
     };
     var TYPES = {
       boolean: isBoolean,
-      array: isArray,
+      array: isArray2,
       object: isObject2,
       string: isString2,
       number: isNumber,
@@ -1231,12 +1231,26 @@ var parseRootAttributes = (htmlString) => {
     return acc;
   }, {});
 };
+var replaceIdsAndUrls = (code, key) => {
+  const idRegex = /id="([^"]*)"/;
+  const urlRegex = /url\(#([^)]*)\)/g;
+  const matches = code.match(/id="([^"]*)"/g);
+  let replacedCode = code;
+  if ((0, import_utils2.isArray)(matches)) {
+    matches.forEach(() => {
+      const randomKey = Math.floor(Math.random() * 1e5);
+      replacedCode = code.replace(idRegex, `id="${key}-${randomKey}"`).replace(urlRegex, `url(#${key}-${randomKey})`);
+    });
+  }
+  return replacedCode;
+};
 var convertSvgToSymbol = (key, code) => {
   const extractAttrs = parseRootAttributes(code);
   const { width, height } = extractAttrs;
   const viewBox = extractAttrs.viewBox || `0 0 ${width || 24} ${height || 24}`;
   const xmlns = "http://www.w3.org/2000/svg";
-  let symbol = code.replace(
+  const replacedCode = replaceIdsAndUrls(code, key);
+  let symbol = replacedCode.replace(
     "<svg",
     `<symbol id="${key}" xmlns="${xmlns}" viewBox="${viewBox}"`
   );

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/scratch",
   "description": "Φ / CSS framework and methodology.",
   "author": "symbo.ls",
-  "version": "2.11.16",
+  "version": "2.11.18",
   "files": [
     "src",
     "dist"
@@ -32,5 +32,5 @@
   "peerDependencies": {
     "@emotion/css": "^11.5.0"
   },
-  "gitHead": "9d17c62d340b3ed3ecfba460d9f5656b324a5bbb"
+  "gitHead": "09944e5ba459ced66abf1b396c5cdc95e5c3feb9"
 }

package/src/utils/sprite.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { isString } from '@domql/utils'
+import { isArray, isString } from '@domql/utils'
 import { getActiveConfig } from '../factory'
 
 export const generateSprite = (icons) => {
@@ -36,6 +36,20 @@ const parseRootAttributes = (htmlString) => {
   }, {})
 }
 
+const replaceIdsAndUrls = (code, key) => {
+  const idRegex = /id="([^"]*)"/
+  const urlRegex = /url\(#([^)]*)\)/g
+  const matches = code.match(/id="([^"]*)"/g)
+  let replacedCode = code
+  if (isArray(matches)) {
+    matches.forEach(() => {
+      const randomKey = Math.floor(Math.random() * 100000)
+      replacedCode = code.replace(idRegex, `id="${key}-${randomKey}"`).replace(urlRegex, `url(#${key}-${randomKey})`)
+    })
+  }
+  return replacedCode
+}
+
 export const convertSvgToSymbol = (key, code) => {
   const extractAttrs = parseRootAttributes(code)
   const { width, height } = extractAttrs
@@ -43,9 +57,12 @@ export const convertSvgToSymbol = (key, code) => {
   const viewBox = extractAttrs.viewBox || `0 0 ${width || 24} ${height || 24}`
   const xmlns = 'http://www.w3.org/2000/svg'
 
-  let symbol = code.replace('<svg',
+  const replacedCode = replaceIdsAndUrls(code, key)
+
+  let symbol = replacedCode.replace('<svg',
     `<symbol id="${key}" xmlns="${xmlns}" viewBox="${viewBox}"`
   )
+
   symbol = symbol.replace(/width="[^"]*"/, '')
   symbol = symbol.replace(/height="[^"]*"/, '')
   symbol = symbol.replace('</svg', '</symbol')