@purpurds/illustrative-icon 6.8.3 → 6.9.0

package/dist/metadata.js

@@ -1,8 +1,8 @@
 module.exports = {
   "moduleName": "illustrative-icon",
   "exports": [
-    "IllustrativeBaseIconProps",
-    "IllustrativeIconProps",
-    "IllustrativeIcon"
+    "AnimatedIllustrativeBaseIconProps",
+    "AnimatedIllustrativeIconProps",
+    "AnimatedIllustrativeIcon"
   ]
 };

package/dist/static-illustrative-icon-CQBauYmB.mjs

@@ -0,0 +1,76 @@
+import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { g as f } from "./_commonjsHelpers-C6fGbg64.mjs";
+var u = { exports: {} };
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+var l;
+function v() {
+  return l || (l = 1, function(n) {
+    (function() {
+      var e = {}.hasOwnProperty;
+      function i() {
+        for (var t = "", r = 0; r < arguments.length; r++) {
+          var s = arguments[r];
+          s && (t = a(t, o.call(this, s)));
+        }
+        return t;
+      }
+      function o(t) {
+        if (typeof t == "string" || typeof t == "number")
+          return this && this[t] || t;
+        if (typeof t != "object")
+          return "";
+        if (Array.isArray(t))
+          return i.apply(this, t);
+        if (t.toString !== Object.prototype.toString && !t.toString.toString().includes("[native code]"))
+          return t.toString();
+        var r = "";
+        for (var s in t)
+          e.call(t, s) && t[s] && (r = a(r, this && this[s] || s));
+        return r;
+      }
+      function a(t, r) {
+        return r ? t ? t + " " + r : t + r : t;
+      }
+      n.exports ? (i.default = i, n.exports = i) : window.classNames = i;
+    })();
+  }(u)), u.exports;
+}
+var m = v();
+const d = /* @__PURE__ */ f(m), g = {
+  "purpur-illustrative-icon": "_purpur-illustrative-icon_64k5d_1"
+}, h = d.bind(g), S = "purpur-illustrative-icon", x = (n) => n.filter((e) => Object.keys(e).length >= 1).map((e) => `${e.name}="${e.value}"`).join(" "), b = ({ content: n = "", title: e } = {}) => {
+  const i = [
+    { name: "xmlns", value: "http://www.w3.org/2000/svg" },
+    { name: "fill", value: "none" },
+    { name: "viewBox", value: "0 0 64 64" },
+    e ? { name: "role", value: "img" } : { name: "aria-hidden", value: "true" }
+  ], o = e ? `<title>${e}</title>` : "";
+  return `<svg ${x(i)}>${o}${n}</svg>`;
+}, w = (n) => n.replace(/<(\/?)svg([^>]*)>/g, "").trim(), y = p(
+  ({ svg: n, allyTitle: e, className: i, ...o }, a) => {
+    const t = b({
+      content: w(n),
+      title: e
+    });
+    return /* @__PURE__ */ c(
+      "span",
+      {
+        "aria-label": e,
+        className: h(S, i),
+        dangerouslySetInnerHTML: { __html: t },
+        ref: a,
+        ...o
+      }
+    );
+  }
+);
+y.displayName = "StaticIllustrativeIcon";
+export {
+  y as S
+};
+//# sourceMappingURL=static-illustrative-icon-CQBauYmB.mjs.map

package/dist/static-illustrative-icon-CQBauYmB.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"static-illustrative-icon-CQBauYmB.mjs","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/bind.js","../src/static-illustrative-icon.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue.call(this, arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn this && this[arg] || arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(this, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, this && this[key] || key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import React, { type ForwardedRef, type HTMLAttributes, forwardRef } from \"react\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./illustrative-icon.module.scss\";\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-illustrative-icon\";\n\ntype CreateSvg = {\n  content?: string;\n  title?: string;\n  ariaHidden?: boolean;\n};\n\nexport type StaticIllustrativeBaseIconProps = HTMLAttributes<HTMLSpanElement> & {\n  [\"data-testid\"]?: string;\n  allyTitle?: string;\n};\n\nexport type StaticIllustrativeIconProps = {\n  svg: string;\n} & StaticIllustrativeBaseIconProps;\n\n// Create string from array of attributes\nconst getAttributesString = (attributeCollection: Record<string, unknown>[]) =>\n  attributeCollection\n    .filter((attr) => Object.keys(attr).length >= 1) // remove empty object\n    .map((item) => `${item.name}=\"${item.value}\"`)\n    .join(\" \");\n\nconst createSvg = ({ content = \"\", title }: CreateSvg = {}) => {\n  const attributeCollection = [\n    { name: \"xmlns\", value: \"http://www.w3.org/2000/svg\" },\n    { name: \"fill\", value: \"none\" },\n    { name: \"viewBox\", value: \"0 0 64 64\" },\n    title ? { name: \"role\", value: \"img\" } : { name: \"aria-hidden\", value: \"true\" },\n  ];\n\n  const titleElement = title ? `<title>${title}</title>` : \"\";\n  return `<svg ${getAttributesString(attributeCollection)}>${titleElement}${content}</svg>`;\n};\n\n// Remove svg tags\nconst getSvgContent = (svg: string): string => svg.replace(/<(\\/?)svg([^>]*)>/g, \"\").trim();\n\nexport const StaticIllustrativeIcon = forwardRef(\n  (\n    { svg, allyTitle, className, ...props }: StaticIllustrativeIconProps,\n    ref: ForwardedRef<HTMLDivElement>\n  ) => {\n    const svgString = createSvg({\n      content: getSvgContent(svg),\n      title: allyTitle,\n    });\n\n    return (\n      <span\n        aria-label={allyTitle}\n        className={cx(rootClassName, className)}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{ __html: svgString }}\n        ref={ref}\n        {...props}\n      />\n    );\n  }\n);\n\nStaticIllustrativeIcon.displayName = \"StaticIllustrativeIcon\";\n"],"names":["hasOwn","classNames","classes","i","arg","appendClass","parseValue","key","value","newClass","module","cx","c","styles","rootClassName","getAttributesString","attributeCollection","attr","item","createSvg","content","title","titleElement","getSvgContent","svg","StaticIllustrativeIcon","forwardRef","allyTitle","className","props","ref","svgString","jsx"],"mappings":";;;;;;;;;;;;AAOA,KAAC,WAAY;AAGZ,UAAIA,IAAS,CAAA,EAAG;AAEhB,eAASC,IAAc;AAGtB,iBAFIC,IAAU,IAELC,IAAI,GAAGA,IAAI,UAAU,QAAQA,KAAK;AAC1C,cAAIC,IAAM,UAAUD,CAAC;AACrB,UAAIC,MACHF,IAAUG,EAAYH,GAASI,EAAW,KAAK,MAAMF,CAAG,CAAC;AAAA,QAE7D;AAEE,eAAOF;AAAA,MACT;AAEC,eAASI,EAAYF,GAAK;AACzB,YAAI,OAAOA,KAAQ,YAAY,OAAOA,KAAQ;AAC7C,iBAAO,QAAQ,KAAKA,CAAG,KAAKA;AAG7B,YAAI,OAAOA,KAAQ;AAClB,iBAAO;AAGR,YAAI,MAAM,QAAQA,CAAG;AACpB,iBAAOH,EAAW,MAAM,MAAMG,CAAG;AAGlC,YAAIA,EAAI,aAAa,OAAO,UAAU,YAAY,CAACA,EAAI,SAAS,SAAQ,EAAG,SAAS,eAAe;AAClG,iBAAOA,EAAI,SAAU;AAGtB,YAAIF,IAAU;AAEd,iBAASK,KAAOH;AACf,UAAIJ,EAAO,KAAKI,GAAKG,CAAG,KAAKH,EAAIG,CAAG,MACnCL,IAAUG,EAAYH,GAAS,QAAQ,KAAKK,CAAG,KAAKA,CAAG;AAIzD,eAAOL;AAAA,MACT;AAEC,eAASG,EAAaG,GAAOC,GAAU;AACtC,eAAKA,IAIDD,IACIA,IAAQ,MAAMC,IAGfD,IAAQC,IAPPD;AAAA,MAQV;AAEC,MAAqCE,EAAO,WAC3CT,EAAW,UAAUA,GACrBS,YAAiBT,KAOjB,OAAO,aAAaA;AAAA,IAEtB;;;;;;GCvEMU,IAAKC,EAAE,KAAKC,CAAM,GAClBC,IAAgB,4BAkBhBC,IAAsB,CAACC,MAC3BA,EACG,OAAO,CAACC,MAAS,OAAO,KAAKA,CAAI,EAAE,UAAU,CAAC,EAC9C,IAAI,CAACC,MAAS,GAAGA,EAAK,IAAI,KAAKA,EAAK,KAAK,GAAG,EAC5C,KAAK,GAAG,GAEPC,IAAY,CAAC,EAAE,SAAAC,IAAU,IAAI,OAAAC,EAAM,IAAe,CAAA,MAAO;AAC7D,QAAML,IAAsB;AAAA,IAC1B,EAAE,MAAM,SAAS,OAAO,6BAA6B;AAAA,IACrD,EAAE,MAAM,QAAQ,OAAO,OAAO;AAAA,IAC9B,EAAE,MAAM,WAAW,OAAO,YAAY;AAAA,IACtCK,IAAQ,EAAE,MAAM,QAAQ,OAAO,MAAM,IAAI,EAAE,MAAM,eAAe,OAAO,OAAO;AAAA,EAChF,GAEMC,IAAeD,IAAQ,UAAUA,CAAK,aAAa;AACzD,SAAO,QAAQN,EAAoBC,CAAmB,CAAC,IAAIM,CAAY,GAAGF,CAAO;AACnF,GAGMG,IAAgB,CAACC,MAAwBA,EAAI,QAAQ,sBAAsB,EAAE,EAAE,KAAK,GAE7EC,IAAyBC;AAAA,EACpC,CACE,EAAE,KAAAF,GAAK,WAAAG,GAAW,WAAAC,GAAW,GAAGC,KAChCC,MACG;AACH,UAAMC,IAAYZ,EAAU;AAAA,MAC1B,SAASI,EAAcC,CAAG;AAAA,MAC1B,OAAOG;AAAA,IAAA,CACR;AAGC,WAAA,gBAAAK;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,cAAYL;AAAA,QACZ,WAAWhB,EAAGG,GAAec,CAAS;AAAA,QAEtC,yBAAyB,EAAE,QAAQG,EAAU;AAAA,QAC7C,KAAAD;AAAA,QACC,GAAGD;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAGN;AAEAJ,EAAuB,cAAc;","x_google_ignoreList":[0]}

package/dist/static-illustrative-icon-iifz8PfS.js

@@ -0,0 +1,6 @@
+"use strict";const p=require("react/jsx-runtime"),f=require("react"),v=require("./_commonjsHelpers-DwGv2jUC.js");var u={exports:{}};/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/var c;function m(){return c||(c=1,function(r){(function(){var e={}.hasOwnProperty;function s(){for(var t="",n=0;n<arguments.length;n++){var i=arguments[n];i&&(t=a(t,o.call(this,i)))}return t}function o(t){if(typeof t=="string"||typeof t=="number")return this&&this[t]||t;if(typeof t!="object")return"";if(Array.isArray(t))return s.apply(this,t);if(t.toString!==Object.prototype.toString&&!t.toString.toString().includes("[native code]"))return t.toString();var n="";for(var i in t)e.call(t,i)&&t[i]&&(n=a(n,this&&this[i]||i));return n}function a(t,n){return n?t?t+" "+n:t+n:t}r.exports?(s.default=s,r.exports=s):window.classNames=s})()}(u)),u.exports}var d=m();const h=v.getDefaultExportFromCjs(d),g={"purpur-illustrative-icon":"_purpur-illustrative-icon_64k5d_1"},S=h.bind(g),x="purpur-illustrative-icon",b=r=>r.filter(e=>Object.keys(e).length>=1).map(e=>`${e.name}="${e.value}"`).join(" "),j=({content:r="",title:e}={})=>{const s=[{name:"xmlns",value:"http://www.w3.org/2000/svg"},{name:"fill",value:"none"},{name:"viewBox",value:"0 0 64 64"},e?{name:"role",value:"img"}:{name:"aria-hidden",value:"true"}],o=e?`<title>${e}</title>`:"";return`<svg ${b(s)}>${o}${r}</svg>`},w=r=>r.replace(/<(\/?)svg([^>]*)>/g,"").trim(),l=f.forwardRef(({svg:r,allyTitle:e,className:s,...o},a)=>{const t=j({content:w(r),title:e});return p.jsx("span",{"aria-label":e,className:S(x,s),dangerouslySetInnerHTML:{__html:t},ref:a,...o})});l.displayName="StaticIllustrativeIcon";exports.StaticIllustrativeIcon=l;
+//# sourceMappingURL=static-illustrative-icon-iifz8PfS.js.map

package/dist/static-illustrative-icon-iifz8PfS.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"static-illustrative-icon-iifz8PfS.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/bind.js","../src/static-illustrative-icon.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue.call(this, arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn this && this[arg] || arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(this, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, this && this[key] || key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import React, { type ForwardedRef, type HTMLAttributes, forwardRef } from \"react\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./illustrative-icon.module.scss\";\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-illustrative-icon\";\n\ntype CreateSvg = {\n  content?: string;\n  title?: string;\n  ariaHidden?: boolean;\n};\n\nexport type StaticIllustrativeBaseIconProps = HTMLAttributes<HTMLSpanElement> & {\n  [\"data-testid\"]?: string;\n  allyTitle?: string;\n};\n\nexport type StaticIllustrativeIconProps = {\n  svg: string;\n} & StaticIllustrativeBaseIconProps;\n\n// Create string from array of attributes\nconst getAttributesString = (attributeCollection: Record<string, unknown>[]) =>\n  attributeCollection\n    .filter((attr) => Object.keys(attr).length >= 1) // remove empty object\n    .map((item) => `${item.name}=\"${item.value}\"`)\n    .join(\" \");\n\nconst createSvg = ({ content = \"\", title }: CreateSvg = {}) => {\n  const attributeCollection = [\n    { name: \"xmlns\", value: \"http://www.w3.org/2000/svg\" },\n    { name: \"fill\", value: \"none\" },\n    { name: \"viewBox\", value: \"0 0 64 64\" },\n    title ? { name: \"role\", value: \"img\" } : { name: \"aria-hidden\", value: \"true\" },\n  ];\n\n  const titleElement = title ? `<title>${title}</title>` : \"\";\n  return `<svg ${getAttributesString(attributeCollection)}>${titleElement}${content}</svg>`;\n};\n\n// Remove svg tags\nconst getSvgContent = (svg: string): string => svg.replace(/<(\\/?)svg([^>]*)>/g, \"\").trim();\n\nexport const StaticIllustrativeIcon = forwardRef(\n  (\n    { svg, allyTitle, className, ...props }: StaticIllustrativeIconProps,\n    ref: ForwardedRef<HTMLDivElement>\n  ) => {\n    const svgString = createSvg({\n      content: getSvgContent(svg),\n      title: allyTitle,\n    });\n\n    return (\n      <span\n        aria-label={allyTitle}\n        className={cx(rootClassName, className)}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{ __html: svgString }}\n        ref={ref}\n        {...props}\n      />\n    );\n  }\n);\n\nStaticIllustrativeIcon.displayName = \"StaticIllustrativeIcon\";\n"],"names":["hasOwn","classNames","classes","i","arg","appendClass","parseValue","key","value","newClass","module","cx","c","styles","rootClassName","getAttributesString","attributeCollection","attr","item","createSvg","content","title","titleElement","getSvgContent","svg","StaticIllustrativeIcon","forwardRef","allyTitle","className","props","ref","svgString","jsx"],"mappings":";;;;iDAOC,UAAY,CAGZ,IAAIA,EAAS,CAAA,EAAG,eAEhB,SAASC,GAAc,CAGtB,QAFIC,EAAU,GAELC,EAAI,EAAGA,EAAI,UAAU,OAAQA,IAAK,CAC1C,IAAIC,EAAM,UAAUD,CAAC,EACjBC,IACHF,EAAUG,EAAYH,EAASI,EAAW,KAAK,KAAMF,CAAG,CAAC,EAE7D,CAEE,OAAOF,CACT,CAEC,SAASI,EAAYF,EAAK,CACzB,GAAI,OAAOA,GAAQ,UAAY,OAAOA,GAAQ,SAC7C,OAAO,MAAQ,KAAKA,CAAG,GAAKA,EAG7B,GAAI,OAAOA,GAAQ,SAClB,MAAO,GAGR,GAAI,MAAM,QAAQA,CAAG,EACpB,OAAOH,EAAW,MAAM,KAAMG,CAAG,EAGlC,GAAIA,EAAI,WAAa,OAAO,UAAU,UAAY,CAACA,EAAI,SAAS,SAAQ,EAAG,SAAS,eAAe,EAClG,OAAOA,EAAI,SAAU,EAGtB,IAAIF,EAAU,GAEd,QAASK,KAAOH,EACXJ,EAAO,KAAKI,EAAKG,CAAG,GAAKH,EAAIG,CAAG,IACnCL,EAAUG,EAAYH,EAAS,MAAQ,KAAKK,CAAG,GAAKA,CAAG,GAIzD,OAAOL,CACT,CAEC,SAASG,EAAaG,EAAOC,EAAU,CACtC,OAAKA,EAIDD,EACIA,EAAQ,IAAMC,EAGfD,EAAQC,EAPPD,CAQV,CAEsCE,EAAO,SAC3CT,EAAW,QAAUA,EACrBS,UAAiBT,GAOjB,OAAO,WAAaA,CAEtB,sICvEMU,EAAKC,EAAE,KAAKC,CAAM,EAClBC,EAAgB,2BAkBhBC,EAAuBC,GAC3BA,EACG,OAAQC,GAAS,OAAO,KAAKA,CAAI,EAAE,QAAU,CAAC,EAC9C,IAAKC,GAAS,GAAGA,EAAK,IAAI,KAAKA,EAAK,KAAK,GAAG,EAC5C,KAAK,GAAG,EAEPC,EAAY,CAAC,CAAE,QAAAC,EAAU,GAAI,MAAAC,CAAM,EAAe,CAAA,IAAO,CAC7D,MAAML,EAAsB,CAC1B,CAAE,KAAM,QAAS,MAAO,4BAA6B,EACrD,CAAE,KAAM,OAAQ,MAAO,MAAO,EAC9B,CAAE,KAAM,UAAW,MAAO,WAAY,EACtCK,EAAQ,CAAE,KAAM,OAAQ,MAAO,KAAM,EAAI,CAAE,KAAM,cAAe,MAAO,MAAO,CAChF,EAEMC,EAAeD,EAAQ,UAAUA,CAAK,WAAa,GACzD,MAAO,QAAQN,EAAoBC,CAAmB,CAAC,IAAIM,CAAY,GAAGF,CAAO,QACnF,EAGMG,EAAiBC,GAAwBA,EAAI,QAAQ,qBAAsB,EAAE,EAAE,KAAK,EAE7EC,EAAyBC,EAAA,WACpC,CACE,CAAE,IAAAF,EAAK,UAAAG,EAAW,UAAAC,EAAW,GAAGC,GAChCC,IACG,CACH,MAAMC,EAAYZ,EAAU,CAC1B,QAASI,EAAcC,CAAG,EAC1B,MAAOG,CAAA,CACR,EAGC,OAAAK,EAAA,IAAC,OAAA,CACC,aAAYL,EACZ,UAAWhB,EAAGG,EAAec,CAAS,EAEtC,wBAAyB,CAAE,OAAQG,CAAU,EAC7C,IAAAD,EACC,GAAGD,CAAA,CACN,CAAA,CAGN,EAEAJ,EAAuB,YAAc","x_google_ignoreList":[0]}

package/dist/static-illustrative-icon.d.ts

@@ -0,0 +1,16 @@
+import { default as React, HTMLAttributes } from 'react';
+
+export type StaticIllustrativeBaseIconProps = HTMLAttributes<HTMLSpanElement> & {
+    ["data-testid"]?: string;
+    allyTitle?: string;
+};
+export type StaticIllustrativeIconProps = {
+    svg: string;
+} & StaticIllustrativeBaseIconProps;
+export declare const StaticIllustrativeIcon: React.ForwardRefExoticComponent<{
+    svg: string;
+} & React.HTMLAttributes<HTMLSpanElement> & {
+    "data-testid"?: string;
+    allyTitle?: string;
+} & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=static-illustrative-icon.d.ts.map

package/dist/static-illustrative-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"static-illustrative-icon.d.ts","sourceRoot":"","sources":["../src/static-illustrative-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAqB,KAAK,cAAc,EAAc,MAAM,OAAO,CAAC;AAclF,MAAM,MAAM,+BAA+B,GAAG,cAAc,CAAC,eAAe,CAAC,GAAG;IAC9E,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG;IACxC,GAAG,EAAE,MAAM,CAAC;CACb,GAAG,+BAA+B,CAAC;AAwBpC,eAAO,MAAM,sBAAsB;SAzB5B,MAAM;;oBALO,MAAM;gBACZ,MAAM;wCAkDnB,CAAC"}

package/dist/styles.css

@@ -0,0 +1 @@
+._purpur-illustrative-icon_64k5d_1,._purpur-illustrative-icon_64k5d_1 svg{display:block;width:100%;height:auto}

package/package.json

@@ -1,15 +1,10 @@
 {
   "name": "@purpurds/illustrative-icon",
-  "version": "6.8.3",
+  "version": "6.9.0",
   "license": "AGPL-3.0-only",
   "main": "./dist/illustrative-icon.cjs.js",
   "types": "./dist/illustrative-icon.d.ts",
   "exports": {
-    ".": {
-      "require": "./dist/illustrative-icon.cjs.js",
-      "types": "./dist/illustrative-icon.d.ts",
-      "default": "./dist/illustrative-icon.es.js"
-    },
     "./*": {
       "require": "./dist/components/*.cjs.js",
       "types": "./dist/components/*.d.ts",
@@ -18,11 +13,11 @@
     "./metadata": "./dist/metadata.js",
     "./components-metadata": "./dist/components-metadata.js"
   },
-  "source": "src/illustrative-icon.tsx",
+  "source": "src/animated-illustrative-icon.tsx",
   "dependencies": {
     "classnames": "~2.5.0",
     "lottie-web": "~5.12.2",
-    "@purpurds/tokens": "6.8.3"
+    "@purpurds/tokens": "6.9.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.10.0",
@@ -47,13 +42,14 @@
     "react-dom": "^19.0.0",
     "react": "^19.0.0",
     "storybook": "^8.6.4",
+    "svgo": "3.2.0",
     "tsx": "^4.19.3",
     "typescript": "^5.6.3",
+    "vite-plugin-static-copy": "~2.2.0",
     "vite": "^6.2.1",
-    "vitest": "^2.1.2",
-    "vitest-canvas-mock": "~0.3.3",
     "vitest-axe": "~0.1.0",
-    "vite-plugin-static-copy": "~2.2.0",
+    "vitest-canvas-mock": "~0.3.3",
+    "vitest": "^2.1.2",
     "@purpurds/component-rig": "1.0.0"
   },
   "peerDependencies": {
@@ -74,9 +70,10 @@
     "build:dev": "vite",
     "build": "tsx ./scripts/build.mts",
     "ci:build": "rushx build",
+    "generate:assets": "rm -rf src/assets/svgs && mkdir -p src/assets/svgs && tsx ./scripts/generate-assets.mts",
     "generate:components": "rm -rf src/components && mkdir -p src/components && tsx ./scripts/generate-components.mts",
     "generate:icon-imports": "tsx ./scripts/generate-icon-imports.mts",
-    "generate:all": "rushx generate:components && rushx generate:icon-imports",
+    "generate:all": "rushx generate:assets && rushx generate:components && rushx generate:icon-imports",
     "coverage": "vitest run --coverage",
     "lint:fix": "eslint . --fix",
     "lint": "lint-staged --no-stash 2>&1",

package/scripts/generate-assets.mts

@@ -0,0 +1,51 @@
+import fs from "fs";
+import path from "path";
+import { globbySync } from "globby";
+import { Config, optimize } from "svgo";
+import dedent from "dedent";
+import { camelCase } from "change-case";
+
+const svgoConfig: Config = {
+  plugins: [
+    { name: "removeDimensions" },
+    { name: "removeUselessDefs" },
+    { name: "convertShapeToPath" },
+    { name: "moveGroupAttrsToElems" },
+  ],
+};
+
+const srcDir = path.join(process.cwd(), "src");
+const svgsDir = path.join(srcDir, "svgs");
+const assetsDir = path.join(srcDir, "assets");
+
+globbySync(path.join(svgsDir, "*.svg")).forEach((file) => {
+  const basename = path.basename(file);
+  const { name: iconName } = path.parse(file);
+
+  const svgFileContent = optimize(fs.readFileSync(file, "utf-8"), svgoConfig).data;
+
+  fs.writeFileSync(path.join(assetsDir, "svgs", basename), svgFileContent);
+
+  if (fs.existsSync(path.join(assetsDir, `${iconName}.ts`))) {
+    console.log(`[${iconName}]: Skipping asset generation, already exists`);
+    return;
+  }
+
+  console.log(`[${iconName}]: Generating assets`);
+
+  const tsFileContent = dedent`    
+    export const ${camelCase(iconName, { mergeAmbiguousCharacters: true })} = {
+      svg: \`${svgFileContent}\`,
+    };\n`;
+
+  fs.writeFileSync(path.join(assetsDir, `${iconName}.ts`), tsFileContent);
+});
+
+globbySync(path.join(assetsDir, "*.ts")).forEach((file) => {
+  const { name: iconName } = path.parse(file);
+
+  if (!fs.existsSync(path.join(assetsDir, "svgs", `${iconName}.svg`))) {
+    console.log(`[${iconName}]: Removing TypeScript asset, svg does not exist`);
+    fs.rmSync(file);
+  }
+});

package/scripts/generate-components.mts

@@ -1,21 +1,49 @@
 import fs from "fs";
 import path from "path";
 import { globbySync } from "globby";
-import { pascalCase } from "change-case";
+import { camelCase, pascalCase } from "change-case";
 
 const srcDir = path.join(process.cwd(), "src");
 const assetsDir = path.join(srcDir, "assets");
 const componentsDir = path.join(srcDir, "components");
-const iconNames = globbySync(path.join(assetsDir, "**", "*.json")).map(
+const staticIconNames = globbySync(path.join(assetsDir, "**", "*.svg")).map(
+  (file) => path.parse(file).name
+);
+const animatedIconNames = globbySync(path.join(assetsDir, "**", "*.json")).map(
   (file) => path.parse(file).name
 );
 
 const warning = `/**
  * ⚠️ WARNING ⚠️
- * This file is automatically generated do not edit it manually",
+ * This file is automatically generated, do not edit it manually",
  */`;
 
-iconNames.forEach(async (file) => {
+staticIconNames.forEach(async (file) => {
+  const { name: iconName } = path.parse(file);
+  const assetName = camelCase(iconName, { mergeAmbiguousCharacters: true });
+  const componentName = `IllustrativeIcon${pascalCase(assetName, {
+    mergeAmbiguousCharacters: true,
+  })}`;
+  const iconComponentContent = `${warning}
+
+import React from "react";
+
+import { ${assetName} } from "../assets/${iconName}";
+import {
+  StaticIllustrativeBaseIconProps,
+  StaticIllustrativeIcon,
+} from "../static-illustrative-icon";
+
+export const ${componentName} = (props: StaticIllustrativeBaseIconProps) => (
+  <StaticIllustrativeIcon {...props} svg={${assetName}.svg} />
+);
+
+${componentName}.displayName = "${componentName}";\n`;
+
+  fs.writeFileSync(path.join(componentsDir, `${iconName}.tsx`), iconComponentContent, "utf-8");
+});
+
+animatedIconNames.forEach(async (file) => {
   const { name: assetName } = path.parse(file);
   const fileName = path.basename(file);
   const componentName = `IllustrativeIcon${pascalCase(assetName, {
@@ -25,11 +53,14 @@ iconNames.forEach(async (file) => {
 
 import React from "react";
 
-import animationData from "../assets/${fileName}.json";
-import { IllustrativeBaseIconProps, IllustrativeIcon } from "../illustrative-icon";
+import {
+  AnimatedIllustrativeBaseIconProps,
+  AnimatedIllustrativeIcon,
+} from "../animated-illustrative-icon";
+import animationData from "../assets/json/${fileName}.json";
 
-export const ${componentName} = (props: IllustrativeBaseIconProps) => (
-  <IllustrativeIcon {...props} json={animationData} />
+export const ${componentName} = (props: AnimatedIllustrativeBaseIconProps) => (
+  <AnimatedIllustrativeIcon {...props} json={animationData} />
 );
 
 ${componentName}.displayName = "${componentName}";\n`;
@@ -40,7 +71,8 @@ ${componentName}.displayName = "${componentName}";\n`;
 const metadataContent = `${warning}
 
 module.exports = [
-${iconNames
+${staticIconNames
+  .concat(animatedIconNames)
   .map((iconName) => {
     const componentName = `IllustrativeIcon${pascalCase(iconName, {
       mergeAmbiguousCharacters: true,

package/scripts/generate-icon-imports.mts

@@ -1,37 +1,45 @@
 import fs from "fs";
-import { globby } from "globby";
+import { globbySync } from "globby";
 import path from "path";
 import { pascalCase } from "change-case";
 import prettier from "prettier";
 
 const srcDir = path.join(process.cwd(), "src");
+const assetsDir = path.join(srcDir, "assets");
+const staticIconNames = globbySync(path.join(assetsDir, "**", "*.svg")).map(
+  (file) => path.parse(file).name
+);
+const animatedIconNames = globbySync(path.join(assetsDir, "**", "*.json")).map(
+  (file) => path.parse(file).name
+);
 
-const getIconNames = (files: string[]) =>
-  files.map((file) => path.parse(file).name).sort((a: string, b: string) => (a < b ? -1 : 1));
+const warning = `/**
+ * ⚠️ WARNING ⚠️
+ * This file is automatically generated, do not edit it manually",
+ */`;
 
-// create all-icon-components
-const componentDir = path.join(srcDir, "components");
-const allIconComponentsName = "all-illustrative-icon-components";
+const getComponentName = (iconName: string) =>
+  `IllustrativeIcon${pascalCase(iconName, {
+    mergeAmbiguousCharacters: true,
+  })}`;
 
-globby(path.join(componentDir, "**", "*.tsx")).then((files) => {
-  const allIconComponentFileLines: string[] = [
-    "/**",
-    " * ⚠️ WARNING ⚠️",
-    " * This file is automatically generated do not edit it manually",
-    " */",
-    "",
-  ];
+[
+  {
+    iconNames: staticIconNames,
+    fileName: "all-static-illustrative-icon-components",
+  },
+  {
+    iconNames: animatedIconNames,
+    fileName: "all-animated-illustrative-icon-components",
+  },
+].forEach(({ iconNames, fileName }) => {
+  const allIconComponentFileLines = iconNames
+    .map((iconName) => `export { ${getComponentName(iconName)} } from "./components/${iconName}";`)
+    .sort();
 
-  getIconNames(files).forEach((iconName) => {
-    const componentName = `IllustrativeIcon${pascalCase(iconName, {
-      mergeAmbiguousCharacters: true,
-    })}`;
-
-    allIconComponentFileLines.push(`export { ${componentName} } from "./components/${iconName}";`);
-  });
-
-  const out = prettier.format(allIconComponentFileLines.join("\n"), {
+  const out = prettier.format([warning].concat(allIconComponentFileLines).join("\n"), {
     parser: "babel",
   });
-  fs.writeFileSync(path.join(srcDir, `${allIconComponentsName}.ts`), out, "utf-8");
+
+  fs.writeFileSync(path.join(srcDir, `${fileName}.ts`), out, "utf-8");
 });

package/src/all-animated-illustrative-icon-components.ts

@@ -0,0 +1,40 @@
+/**
+ * ⚠️ WARNING ⚠️
+ * This file is automatically generated, do not edit it manually",
+ */
+export { IllustrativeIcon404ErrorDuocolor } from "./components/404-error-duocolor";
+export { IllustrativeIcon404ErrorOffblack } from "./components/404-error-offblack";
+export { IllustrativeIconCartCheckmarkDuocolor } from "./components/cart-checkmark-duocolor";
+export { IllustrativeIconCartCheckmarkOffblack } from "./components/cart-checkmark-offblack";
+export { IllustrativeIconCheckmarkDuocolor } from "./components/checkmark-duocolor";
+export { IllustrativeIconCheckmarkOffblack } from "./components/checkmark-offblack";
+export { IllustrativeIconDocumentCheckmarkDuocolor } from "./components/document-checkmark-duocolor";
+export { IllustrativeIconDocumentCheckmarkOffblack } from "./components/document-checkmark-offblack";
+export { IllustrativeIconGettingStartedDuocolor } from "./components/getting-started-duocolor";
+export { IllustrativeIconGettingStartedOffblack } from "./components/getting-started-offblack";
+export { IllustrativeIconHandHeartDuocolor } from "./components/hand-heart-duocolor";
+export { IllustrativeIconHandHeartOffblack } from "./components/hand-heart-offblack";
+export { IllustrativeIconIdErrorDuocolor } from "./components/id-error-duocolor";
+export { IllustrativeIconIdErrorOffblack } from "./components/id-error-offblack";
+export { IllustrativeIconSearchDuocolor } from "./components/search-duocolor";
+export { IllustrativeIconSearchFieldDuocolor } from "./components/search-field-duocolor";
+export { IllustrativeIconSearchFieldOffblack } from "./components/search-field-offblack";
+export { IllustrativeIconSearchOffblack } from "./components/search-offblack";
+export { IllustrativeIconSearchQuestionDuocolor } from "./components/search-question-duocolor";
+export { IllustrativeIconSearchQuestionOffblack } from "./components/search-question-offblack";
+export { IllustrativeIconSettingsTimeDuocolor } from "./components/settings-time-duocolor";
+export { IllustrativeIconSettingsTimeOffblack } from "./components/settings-time-offblack";
+export { IllustrativeIconSupportCheckmarkDuocolor } from "./components/support-checkmark-duocolor";
+export { IllustrativeIconSupportCheckmarkOffblack } from "./components/support-checkmark-offblack";
+export { IllustrativeIconTechnicalErrorDuocolor } from "./components/technical-error-duocolor";
+export { IllustrativeIconTechnicalErrorOffblack } from "./components/technical-error-offblack";
+export { IllustrativeIconUserCheckmarkDuocolor } from "./components/user-checkmark-duocolor";
+export { IllustrativeIconUserCheckmarkOffblack } from "./components/user-checkmark-offblack";
+export { IllustrativeIconUserErrorDuocolor } from "./components/user-error-duocolor";
+export { IllustrativeIconUserErrorOffblack } from "./components/user-error-offblack";
+export { IllustrativeIconUserLockDuocolor } from "./components/user-lock-duocolor";
+export { IllustrativeIconUserLockOffblack } from "./components/user-lock-offblack";
+export { IllustrativeIconUserPlusDuocolor } from "./components/user-plus-duocolor";
+export { IllustrativeIconUserPlusOffblack } from "./components/user-plus-offblack";
+export { IllustrativeIconUserSettingsDuocolor } from "./components/user-settings-duocolor";
+export { IllustrativeIconUserSettingsOffblack } from "./components/user-settings-offblack";