@purpurds/illustrative-icon 5.35.0 → 6.0.1

package/dist/metadata.js

@@ -1,42 +1,6 @@
 module.exports = {
   "moduleName": "illustrative-icon",
   "exports": [
-    "IllustrativeIcon404ErrorDuocolor",
-    "IllustrativeIcon404ErrorOffblack",
-    "IllustrativeIconCartCheckmarkDuocolor",
-    "IllustrativeIconCartCheckmarkOffblack",
-    "IllustrativeIconCheckmarkDuocolor",
-    "IllustrativeIconCheckmarkOffblack",
-    "IllustrativeIconDocumentCheckmarkDuocolor",
-    "IllustrativeIconDocumentCheckmarkOffblack",
-    "IllustrativeIconGettingStartedDuocolor",
-    "IllustrativeIconGettingStartedOffblack",
-    "IllustrativeIconHandHeartDuocolor",
-    "IllustrativeIconHandHeartOffblack",
-    "IllustrativeIconIdErrorDuocolor",
-    "IllustrativeIconIdErrorOffblack",
-    "IllustrativeIconSearchDuocolor",
-    "IllustrativeIconSearchFieldDuocolor",
-    "IllustrativeIconSearchFieldOffblack",
-    "IllustrativeIconSearchOffblack",
-    "IllustrativeIconSearchQuestionDuocolor",
-    "IllustrativeIconSearchQuestionOffblack",
-    "IllustrativeIconSettingsTimeDuocolor",
-    "IllustrativeIconSettingsTimeOffblack",
-    "IllustrativeIconSupportCheckmarkDuocolor",
-    "IllustrativeIconSupportCheckmarkOffblack",
-    "IllustrativeIconTechnicalErrorDuocolor",
-    "IllustrativeIconTechnicalErrorOffblack",
-    "IllustrativeIconUserCheckmarkDuocolor",
-    "IllustrativeIconUserCheckmarkOffblack",
-    "IllustrativeIconUserErrorDuocolor",
-    "IllustrativeIconUserErrorOffblack",
-    "IllustrativeIconUserLockDuocolor",
-    "IllustrativeIconUserLockOffblack",
-    "IllustrativeIconUserPlusDuocolor",
-    "IllustrativeIconUserPlusOffblack",
-    "IllustrativeIconUserSettingsDuocolor",
-    "IllustrativeIconUserSettingsOffblack",
     "IllustrativeBaseIconProps",
     "IllustrativeIconProps",
     "IllustrativeIcon"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/illustrative-icon",
-  "version": "5.35.0",
+  "version": "6.0.1",
   "license": "AGPL-3.0-only",
   "main": "./dist/illustrative-icon.cjs.js",
   "types": "./dist/illustrative-icon.d.ts",
@@ -9,13 +9,20 @@
       "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",
+      "default": "./dist/components/*.es.js"
+    },
+    "./metadata": "./dist/metadata.js",
+    "./components-metadata": "./dist/components-metadata.js"
   },
   "source": "src/illustrative-icon.tsx",
   "dependencies": {
     "classnames": "~2.5.0",
     "lottie-web": "~5.12.2",
-    "@purpurds/tokens": "5.35.0"
+    "@purpurds/tokens": "6.0.1"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.10.0",
@@ -29,7 +36,7 @@
     "@types/node": "20.12.12",
     "@types/react-dom": "^18.3.0",
     "@types/react": "^18.3.3",
-    "change-case": "~4.1.2",
+    "change-case": "~5.4.4",
     "dedent": "~1.5.1",
     "eslint-plugin-testing-library": "~6.2.0",
     "eslint": "^8.57.0",
@@ -46,6 +53,7 @@
     "vitest": "^2.1.2",
     "vitest-canvas-mock": "~0.3.3",
     "vitest-axe": "~0.1.0",
+    "vite-plugin-static-copy": "~2.2.0",
     "@purpurds/component-rig": "1.0.0"
   },
   "scripts": {

package/scripts/generate-components.mts

@@ -1,35 +1,54 @@
 import fs from "fs";
 import path from "path";
 import { globbySync } from "globby";
-import { camelCase, pascalCase } from "change-case";
-import dedent from "dedent";
+import { 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(
+  (file) => path.parse(file).name
+);
 
-globbySync(path.join(assetsDir, "**", "*.json")).forEach(async (file) => {
+const warning = `/**
+ * ⚠️ WARNING ⚠️
+ * This file is automatically generated do not edit it manually",
+ */`;
+
+iconNames.forEach(async (file) => {
   const { name: assetName } = path.parse(file);
   const fileName = path.basename(file);
+  const componentName = `IllustrativeIcon${pascalCase(assetName, {
+    mergeAmbiguousCharacters: true,
+  })}`;
+  const iconComponentContent = `${warning}
 
-  const iconComponentContent = dedent`
-  /**
-   * ⚠️ WARNING ⚠️
-   * This file is automatically generated do not edit it manually",
-   */
-
-  import React from "react";
+import React from "react";
 
-  import animationData from "../assets/${fileName}";
-  import { IllustrativeBaseIconProps, IllustrativeIcon } from "../illustrative-icon";
+import animationData from "../assets/${fileName}.json";
+import { IllustrativeBaseIconProps, IllustrativeIcon } from "../illustrative-icon";
 
-  export const IllustrativeIcon${pascalCase(assetName)} = (props: IllustrativeBaseIconProps) => (
-    <IllustrativeIcon {...props} json={animationData} />
-  );
+export const ${componentName} = (props: IllustrativeBaseIconProps) => (
+  <IllustrativeIcon {...props} json={animationData} />
+);
 
-  IllustrativeIcon${pascalCase(assetName)}.displayName = "IllustrativeIcon${pascalCase(
-    assetName
-  )}";`;
+${componentName}.displayName = "${componentName}";\n`;
 
   fs.writeFileSync(path.join(componentsDir, `${assetName}.tsx`), iconComponentContent, "utf-8");
 });
+
+const metadataContent = `${warning}
+
+module.exports = [
+${iconNames
+  .map((iconName) => {
+    const componentName = `IllustrativeIcon${pascalCase(iconName, {
+      mergeAmbiguousCharacters: true,
+    })}`;
+
+    return `  {\n    moduleName: "illustrative-icon/${iconName}",\n    exports: ["${componentName}"],\n  }`;
+  })
+  .join(",\n")},
+];\n`;
+
+fs.writeFileSync(path.join(componentsDir, `components-metadata.js`), metadataContent, "utf-8");

package/scripts/generate-icon-imports.mts

@@ -6,8 +6,8 @@ import prettier from "prettier";
 
 const srcDir = path.join(process.cwd(), "src");
 
-const getName = (file: string) => file.slice(file.lastIndexOf("/") + 1).replace("-", "");
-const sortIcons = (a: string, b: string) => (getName(a) < getName(b) ? -1 : 1);
+const getIconNames = (files: string[]) =>
+  files.map((file) => path.parse(file).name).sort((a: string, b: string) => (a < b ? -1 : 1));
 
 // create all-icon-components
 const componentDir = path.join(srcDir, "components");
@@ -22,16 +22,16 @@ globby(path.join(componentDir, "**", "*.tsx")).then((files) => {
     "",
   ];
 
-  files.sort(sortIcons).forEach((file) => {
-    const { name: iconName } = path.parse(file);
+  getIconNames(files).forEach((iconName) => {
+    const componentName = `IllustrativeIcon${pascalCase(iconName, {
+      mergeAmbiguousCharacters: true,
+    })}`;
 
-    allIconComponentFileLines.push(
-      `export { IllustrativeIcon${pascalCase(iconName)} } from "./components/${iconName}";`
-    );
+    allIconComponentFileLines.push(`export { ${componentName} } from "./components/${iconName}";`);
   });
 
   const out = prettier.format(allIconComponentFileLines.join("\n"), {
     parser: "babel",
   });
-  fs.writeFileSync(path.join(srcDir, `${allIconComponentsName}.tsx`), out, "utf-8");
+  fs.writeFileSync(path.join(srcDir, `${allIconComponentsName}.ts`), out, "utf-8");
 });

package/src/components/404-error-duocolor.tsx

@@ -12,4 +12,4 @@ export const IllustrativeIcon404ErrorDuocolor = (props: IllustrativeBaseIconProp
   <IllustrativeIcon {...props} json={animationData} />
 );
 
-IllustrativeIcon404ErrorDuocolor.displayName = "IllustrativeIcon404ErrorDuocolor";
+IllustrativeIcon404ErrorDuocolor.displayName = "IllustrativeIcon404ErrorDuocolor";

package/src/components/404-error-offblack.tsx

@@ -12,4 +12,4 @@ export const IllustrativeIcon404ErrorOffblack = (props: IllustrativeBaseIconProp
   <IllustrativeIcon {...props} json={animationData} />
 );
 
-IllustrativeIcon404ErrorOffblack.displayName = "IllustrativeIcon404ErrorOffblack";
+IllustrativeIcon404ErrorOffblack.displayName = "IllustrativeIcon404ErrorOffblack";

package/src/components/cart-checkmark-duocolor.tsx

@@ -12,4 +12,4 @@ export const IllustrativeIconCartCheckmarkDuocolor = (props: IllustrativeBaseIco
   <IllustrativeIcon {...props} json={animationData} />
 );
 
-IllustrativeIconCartCheckmarkDuocolor.displayName = "IllustrativeIconCartCheckmarkDuocolor";
+IllustrativeIconCartCheckmarkDuocolor.displayName = "IllustrativeIconCartCheckmarkDuocolor";

package/src/components/cart-checkmark-offblack.tsx

@@ -12,4 +12,4 @@ export const IllustrativeIconCartCheckmarkOffblack = (props: IllustrativeBaseIco
   <IllustrativeIcon {...props} json={animationData} />
 );
 
-IllustrativeIconCartCheckmarkOffblack.displayName = "IllustrativeIconCartCheckmarkOffblack";
+IllustrativeIconCartCheckmarkOffblack.displayName = "IllustrativeIconCartCheckmarkOffblack";

package/src/components/checkmark-duocolor.tsx

@@ -12,4 +12,4 @@ export const IllustrativeIconCheckmarkDuocolor = (props: IllustrativeBaseIconPro
   <IllustrativeIcon {...props} json={animationData} />
 );
 
-IllustrativeIconCheckmarkDuocolor.displayName = "IllustrativeIconCheckmarkDuocolor";
+IllustrativeIconCheckmarkDuocolor.displayName = "IllustrativeIconCheckmarkDuocolor";

package/src/components/checkmark-offblack.tsx

@@ -12,4 +12,4 @@ export const IllustrativeIconCheckmarkOffblack = (props: IllustrativeBaseIconPro
   <IllustrativeIcon {...props} json={animationData} />
 );
 
-IllustrativeIconCheckmarkOffblack.displayName = "IllustrativeIconCheckmarkOffblack";
+IllustrativeIconCheckmarkOffblack.displayName = "IllustrativeIconCheckmarkOffblack";

package/src/components/components-metadata.js

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

package/src/components/document-checkmark-duocolor.tsx

@@ -12,4 +12,4 @@ export const IllustrativeIconDocumentCheckmarkDuocolor = (props: IllustrativeBas
   <IllustrativeIcon {...props} json={animationData} />
 );
 
-IllustrativeIconDocumentCheckmarkDuocolor.displayName = "IllustrativeIconDocumentCheckmarkDuocolor";
+IllustrativeIconDocumentCheckmarkDuocolor.displayName = "IllustrativeIconDocumentCheckmarkDuocolor";

package/src/components/document-checkmark-offblack.tsx

@@ -12,4 +12,4 @@ export const IllustrativeIconDocumentCheckmarkOffblack = (props: IllustrativeBas
   <IllustrativeIcon {...props} json={animationData} />
 );
 
-IllustrativeIconDocumentCheckmarkOffblack.displayName = "IllustrativeIconDocumentCheckmarkOffblack";
+IllustrativeIconDocumentCheckmarkOffblack.displayName = "IllustrativeIconDocumentCheckmarkOffblack";

package/src/components/getting-started-duocolor.tsx

@@ -12,4 +12,4 @@ export const IllustrativeIconGettingStartedDuocolor = (props: IllustrativeBaseIc
   <IllustrativeIcon {...props} json={animationData} />
 );
 
-IllustrativeIconGettingStartedDuocolor.displayName = "IllustrativeIconGettingStartedDuocolor";
+IllustrativeIconGettingStartedDuocolor.displayName = "IllustrativeIconGettingStartedDuocolor";

package/src/components/getting-started-offblack.tsx

@@ -12,4 +12,4 @@ export const IllustrativeIconGettingStartedOffblack = (props: IllustrativeBaseIc
   <IllustrativeIcon {...props} json={animationData} />
 );
 
-IllustrativeIconGettingStartedOffblack.displayName = "IllustrativeIconGettingStartedOffblack";
+IllustrativeIconGettingStartedOffblack.displayName = "IllustrativeIconGettingStartedOffblack";

package/src/components/hand-heart-duocolor.tsx

@@ -12,4 +12,4 @@ export const IllustrativeIconHandHeartDuocolor = (props: IllustrativeBaseIconPro
   <IllustrativeIcon {...props} json={animationData} />
 );
 
-IllustrativeIconHandHeartDuocolor.displayName = "IllustrativeIconHandHeartDuocolor";
+IllustrativeIconHandHeartDuocolor.displayName = "IllustrativeIconHandHeartDuocolor";

package/src/components/hand-heart-offblack.tsx

@@ -12,4 +12,4 @@ export const IllustrativeIconHandHeartOffblack = (props: IllustrativeBaseIconPro
   <IllustrativeIcon {...props} json={animationData} />
 );
 
-IllustrativeIconHandHeartOffblack.displayName = "IllustrativeIconHandHeartOffblack";
+IllustrativeIconHandHeartOffblack.displayName = "IllustrativeIconHandHeartOffblack";

package/src/components/id-error-duocolor.tsx

@@ -12,4 +12,4 @@ export const IllustrativeIconIdErrorDuocolor = (props: IllustrativeBaseIconProps
   <IllustrativeIcon {...props} json={animationData} />
 );
 
-IllustrativeIconIdErrorDuocolor.displayName = "IllustrativeIconIdErrorDuocolor";
+IllustrativeIconIdErrorDuocolor.displayName = "IllustrativeIconIdErrorDuocolor";

package/src/components/id-error-offblack.tsx

@@ -12,4 +12,4 @@ export const IllustrativeIconIdErrorOffblack = (props: IllustrativeBaseIconProps
   <IllustrativeIcon {...props} json={animationData} />
 );
 
-IllustrativeIconIdErrorOffblack.displayName = "IllustrativeIconIdErrorOffblack";
+IllustrativeIconIdErrorOffblack.displayName = "IllustrativeIconIdErrorOffblack";

package/src/components/search-duocolor.tsx

@@ -12,4 +12,4 @@ export const IllustrativeIconSearchDuocolor = (props: IllustrativeBaseIconProps)
   <IllustrativeIcon {...props} json={animationData} />
 );
 
-IllustrativeIconSearchDuocolor.displayName = "IllustrativeIconSearchDuocolor";
+IllustrativeIconSearchDuocolor.displayName = "IllustrativeIconSearchDuocolor";

package/src/components/search-field-duocolor.tsx

@@ -12,4 +12,4 @@ export const IllustrativeIconSearchFieldDuocolor = (props: IllustrativeBaseIconP
   <IllustrativeIcon {...props} json={animationData} />
 );
 
-IllustrativeIconSearchFieldDuocolor.displayName = "IllustrativeIconSearchFieldDuocolor";
+IllustrativeIconSearchFieldDuocolor.displayName = "IllustrativeIconSearchFieldDuocolor";

package/src/components/search-field-offblack.tsx

@@ -12,4 +12,4 @@ export const IllustrativeIconSearchFieldOffblack = (props: IllustrativeBaseIconP
   <IllustrativeIcon {...props} json={animationData} />
 );
 
-IllustrativeIconSearchFieldOffblack.displayName = "IllustrativeIconSearchFieldOffblack";
+IllustrativeIconSearchFieldOffblack.displayName = "IllustrativeIconSearchFieldOffblack";

package/src/components/search-offblack.tsx

@@ -12,4 +12,4 @@ export const IllustrativeIconSearchOffblack = (props: IllustrativeBaseIconProps)
   <IllustrativeIcon {...props} json={animationData} />
 );
 
-IllustrativeIconSearchOffblack.displayName = "IllustrativeIconSearchOffblack";
+IllustrativeIconSearchOffblack.displayName = "IllustrativeIconSearchOffblack";

package/src/components/search-question-duocolor.tsx

@@ -12,4 +12,4 @@ export const IllustrativeIconSearchQuestionDuocolor = (props: IllustrativeBaseIc
   <IllustrativeIcon {...props} json={animationData} />
 );
 
-IllustrativeIconSearchQuestionDuocolor.displayName = "IllustrativeIconSearchQuestionDuocolor";
+IllustrativeIconSearchQuestionDuocolor.displayName = "IllustrativeIconSearchQuestionDuocolor";

package/src/components/search-question-offblack.tsx

@@ -12,4 +12,4 @@ export const IllustrativeIconSearchQuestionOffblack = (props: IllustrativeBaseIc
   <IllustrativeIcon {...props} json={animationData} />
 );
 
-IllustrativeIconSearchQuestionOffblack.displayName = "IllustrativeIconSearchQuestionOffblack";
+IllustrativeIconSearchQuestionOffblack.displayName = "IllustrativeIconSearchQuestionOffblack";

package/src/components/settings-time-duocolor.tsx

@@ -12,4 +12,4 @@ export const IllustrativeIconSettingsTimeDuocolor = (props: IllustrativeBaseIcon
   <IllustrativeIcon {...props} json={animationData} />
 );
 
-IllustrativeIconSettingsTimeDuocolor.displayName = "IllustrativeIconSettingsTimeDuocolor";
+IllustrativeIconSettingsTimeDuocolor.displayName = "IllustrativeIconSettingsTimeDuocolor";

package/src/components/settings-time-offblack.tsx

@@ -12,4 +12,4 @@ export const IllustrativeIconSettingsTimeOffblack = (props: IllustrativeBaseIcon
   <IllustrativeIcon {...props} json={animationData} />
 );
 
-IllustrativeIconSettingsTimeOffblack.displayName = "IllustrativeIconSettingsTimeOffblack";
+IllustrativeIconSettingsTimeOffblack.displayName = "IllustrativeIconSettingsTimeOffblack";

package/src/components/support-checkmark-duocolor.tsx

@@ -12,4 +12,4 @@ export const IllustrativeIconSupportCheckmarkDuocolor = (props: IllustrativeBase
   <IllustrativeIcon {...props} json={animationData} />
 );
 
-IllustrativeIconSupportCheckmarkDuocolor.displayName = "IllustrativeIconSupportCheckmarkDuocolor";
+IllustrativeIconSupportCheckmarkDuocolor.displayName = "IllustrativeIconSupportCheckmarkDuocolor";

package/src/components/support-checkmark-offblack.tsx

@@ -12,4 +12,4 @@ export const IllustrativeIconSupportCheckmarkOffblack = (props: IllustrativeBase
   <IllustrativeIcon {...props} json={animationData} />
 );
 
-IllustrativeIconSupportCheckmarkOffblack.displayName = "IllustrativeIconSupportCheckmarkOffblack";
+IllustrativeIconSupportCheckmarkOffblack.displayName = "IllustrativeIconSupportCheckmarkOffblack";

package/src/components/technical-error-duocolor.tsx

@@ -12,4 +12,4 @@ export const IllustrativeIconTechnicalErrorDuocolor = (props: IllustrativeBaseIc
   <IllustrativeIcon {...props} json={animationData} />
 );
 
-IllustrativeIconTechnicalErrorDuocolor.displayName = "IllustrativeIconTechnicalErrorDuocolor";
+IllustrativeIconTechnicalErrorDuocolor.displayName = "IllustrativeIconTechnicalErrorDuocolor";

package/src/components/technical-error-offblack.tsx

@@ -12,4 +12,4 @@ export const IllustrativeIconTechnicalErrorOffblack = (props: IllustrativeBaseIc
   <IllustrativeIcon {...props} json={animationData} />
 );
 
-IllustrativeIconTechnicalErrorOffblack.displayName = "IllustrativeIconTechnicalErrorOffblack";
+IllustrativeIconTechnicalErrorOffblack.displayName = "IllustrativeIconTechnicalErrorOffblack";

package/src/components/user-checkmark-duocolor.tsx

@@ -12,4 +12,4 @@ export const IllustrativeIconUserCheckmarkDuocolor = (props: IllustrativeBaseIco
   <IllustrativeIcon {...props} json={animationData} />
 );
 
-IllustrativeIconUserCheckmarkDuocolor.displayName = "IllustrativeIconUserCheckmarkDuocolor";
+IllustrativeIconUserCheckmarkDuocolor.displayName = "IllustrativeIconUserCheckmarkDuocolor";

package/src/components/user-checkmark-offblack.tsx

@@ -12,4 +12,4 @@ export const IllustrativeIconUserCheckmarkOffblack = (props: IllustrativeBaseIco
   <IllustrativeIcon {...props} json={animationData} />
 );
 
-IllustrativeIconUserCheckmarkOffblack.displayName = "IllustrativeIconUserCheckmarkOffblack";
+IllustrativeIconUserCheckmarkOffblack.displayName = "IllustrativeIconUserCheckmarkOffblack";

package/src/components/user-error-duocolor.tsx

@@ -12,4 +12,4 @@ export const IllustrativeIconUserErrorDuocolor = (props: IllustrativeBaseIconPro
   <IllustrativeIcon {...props} json={animationData} />
 );
 
-IllustrativeIconUserErrorDuocolor.displayName = "IllustrativeIconUserErrorDuocolor";
+IllustrativeIconUserErrorDuocolor.displayName = "IllustrativeIconUserErrorDuocolor";

package/src/components/user-error-offblack.tsx

@@ -12,4 +12,4 @@ export const IllustrativeIconUserErrorOffblack = (props: IllustrativeBaseIconPro
   <IllustrativeIcon {...props} json={animationData} />
 );
 
-IllustrativeIconUserErrorOffblack.displayName = "IllustrativeIconUserErrorOffblack";
+IllustrativeIconUserErrorOffblack.displayName = "IllustrativeIconUserErrorOffblack";

package/src/components/user-lock-duocolor.tsx

@@ -12,4 +12,4 @@ export const IllustrativeIconUserLockDuocolor = (props: IllustrativeBaseIconProp
   <IllustrativeIcon {...props} json={animationData} />
 );
 
-IllustrativeIconUserLockDuocolor.displayName = "IllustrativeIconUserLockDuocolor";
+IllustrativeIconUserLockDuocolor.displayName = "IllustrativeIconUserLockDuocolor";

package/src/components/user-lock-offblack.tsx

@@ -12,4 +12,4 @@ export const IllustrativeIconUserLockOffblack = (props: IllustrativeBaseIconProp
   <IllustrativeIcon {...props} json={animationData} />
 );
 
-IllustrativeIconUserLockOffblack.displayName = "IllustrativeIconUserLockOffblack";
+IllustrativeIconUserLockOffblack.displayName = "IllustrativeIconUserLockOffblack";

package/src/components/user-plus-duocolor.tsx

@@ -12,4 +12,4 @@ export const IllustrativeIconUserPlusDuocolor = (props: IllustrativeBaseIconProp
   <IllustrativeIcon {...props} json={animationData} />
 );
 
-IllustrativeIconUserPlusDuocolor.displayName = "IllustrativeIconUserPlusDuocolor";
+IllustrativeIconUserPlusDuocolor.displayName = "IllustrativeIconUserPlusDuocolor";

package/src/components/user-plus-offblack.tsx

@@ -12,4 +12,4 @@ export const IllustrativeIconUserPlusOffblack = (props: IllustrativeBaseIconProp
   <IllustrativeIcon {...props} json={animationData} />
 );
 
-IllustrativeIconUserPlusOffblack.displayName = "IllustrativeIconUserPlusOffblack";
+IllustrativeIconUserPlusOffblack.displayName = "IllustrativeIconUserPlusOffblack";

package/src/components/user-settings-duocolor.tsx

@@ -12,4 +12,4 @@ export const IllustrativeIconUserSettingsDuocolor = (props: IllustrativeBaseIcon
   <IllustrativeIcon {...props} json={animationData} />
 );
 
-IllustrativeIconUserSettingsDuocolor.displayName = "IllustrativeIconUserSettingsDuocolor";
+IllustrativeIconUserSettingsDuocolor.displayName = "IllustrativeIconUserSettingsDuocolor";

package/src/components/user-settings-offblack.tsx

@@ -12,4 +12,4 @@ export const IllustrativeIconUserSettingsOffblack = (props: IllustrativeBaseIcon
   <IllustrativeIcon {...props} json={animationData} />
 );
 
-IllustrativeIconUserSettingsOffblack.displayName = "IllustrativeIconUserSettingsOffblack";
+IllustrativeIconUserSettingsOffblack.displayName = "IllustrativeIconUserSettingsOffblack";

package/src/illustrative-icon.tsx

@@ -1,8 +1,6 @@
 import React, { ForwardedRef, forwardRef, useEffect, useRef, useState } from "react";
 import lottie, { AnimationItem } from "lottie-web/build/player/lottie_light";
 
-export * from "./all-illustrative-icon-components";
-
 export type IllustrativeBaseIconProps = {
   ["data-testid"]?: string;
   allyTitle?: string;