@wise/art 2.28.0 → 2.30.0

package/src/flags/AllFlagsAndSizes.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import flagRawMetaData from "wise-atoms/assets/flags/_metadata.json";
 
-import flagRawMetaData from '../../node_modules/wise-atoms/flags/.metadata.json';
 import { Flag } from './Flag';
 
 const meta: Meta<typeof Flag> = {
@@ -11,11 +11,60 @@ export default meta;
 
 type Story = StoryObj<typeof Flag>;
 
+interface GroupedFlag { name: string; countryCode?: string; currencyCodes: string[] }
+
+const groupByCountry = (
+  entries: [string, (typeof flagRawMetaData)[keyof typeof flagRawMetaData]][],
+): GroupedFlag[] => {
+  const countryMap = new Map<string, GroupedFlag>();
+  const standaloneFlags: GroupedFlag[] = [];
+
+  for (const [slug, data] of entries) {
+    const isDetailed = 'detailed' in data && data.detailed;
+    if (!isDetailed) {
+      const name = 'name' in data ? data.name : slug;
+      const iso2 = 'iso2' in data ? data.iso2 : undefined;
+      const currencyCode = 'currencyCode' in data ? data.currencyCode : undefined;
+
+      if (iso2) {
+        const existing = countryMap.get(iso2);
+        if (existing) {
+          if (currencyCode) existing.currencyCodes.push(currencyCode);
+        } else {
+          countryMap.set(iso2, {
+            name,
+            countryCode: iso2,
+            currencyCodes: currencyCode ? [currencyCode] : [],
+          });
+        }
+      } else {
+        const code = currencyCode ?? slug;
+        standaloneFlags.push({
+          name,
+          countryCode: code,
+          currencyCodes: currencyCode ? [currencyCode] : [],
+        });
+      }
+    }
+  }
+
+  return [...countryMap.values(), ...standaloneFlags];
+};
+
+const allEntries = Object.entries(flagRawMetaData);
+const allFlagsSorted = groupByCountry(allEntries).sort((a, b) =>
+  a.name.localeCompare(b.name),
+);
+
+const getFlagsByRegion = (region: string): GroupedFlag[] =>
+  groupByCountry(allEntries.filter(([, data]) => data.group === region));
+
 // Helper function to render all flags and sizes for a given region
-const AllFlagsAndSizes = (region: string) => {
-  const regionFlags = Object.entries(flagRawMetaData)
-    .filter(([r]) => r === region)
-    .flatMap(([, flags]) => flags);
+const AllFlagsAndSizes = (
+  region: string,
+  flagsOverride?: GroupedFlag[],
+) => {
+  const regionFlags = flagsOverride ?? getFlagsByRegion(region);
 
   return (
     <>
@@ -34,57 +83,63 @@ const AllFlagsAndSizes = (region: string) => {
       <div
         style={{
           display: 'grid',
-          gridTemplateColumns: 'repeat(auto-fill, minmax(350px, 1fr))',
+          gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
           gap: 'var(--padding-small)',
         }}
       >
         {regionFlags.map((flag) => {
-          const countryCode = flag.country[0]?.toUpperCase();
-          const currencyCode = flag.currency[0]?.toUpperCase();
-          const flagCode = countryCode ?? currencyCode;
-
-          // Covers cases where there's just a currency code and no country (e.g. Euro)
-          const flagName = countryCode
-            ? flag.country.at(-1)
-            : flag.currency?.at(-1);
+          const flagCode = flag.countryCode ?? flag.currencyCodes[0];
 
           return (
             <div
-              key={flagName}
+              key={flag.name}
               style={{
-                display: 'grid',
-                gridTemplateColumns: 'minmax(auto, 1fr) auto 1fr',
-                gap: 'var(--padding-small)',
+                display: 'flex',
+                flexDirection: 'column',
                 alignItems: 'center',
+                gap: 'var(--padding-small)',
+                padding: 'var(--padding-small)',
+                border: '1px solid var(--color-border-neutral)',
+                borderRadius: 'var(--radius-large)',
               }}
             >
               <div
                 style={{
                   display: 'flex',
-                  flexWrap: 'wrap',
+                  alignItems: 'center',
+                  gap: 'var(--padding-small)',
+                }}
+              >
+                <Flag code={flagCode} />
+                <Flag code={flagCode} intrinsicSize={150} />
+              </div>
+              <div
+                style={{
+                  display: 'flex',
                   flexDirection: 'column',
                   alignItems: 'flex-start',
-                  gap: 'var(--padding-small)',
                 }}
               >
-                {flagName}
+                <strong>{flag.name}</strong>
                 <span>
-                  {countryCode && (
+                  {flag.countryCode && (
                     <>
-                      Country: <code>{countryCode}</code>
-                    </>
-                  )}
-                  {currencyCode && countryCode && <br />}
-                  {currencyCode && (
-                    <>
-                      Currency: <code>{currencyCode}</code>
+                      Country: <code>{flag.countryCode}</code>
                     </>
                   )}
+                  {flag.currencyCodes.length > 0 && (
+                      <>
+                        <br />
+                        <span>
+                          {`${flag.currencyCodes.length === 1 ? 'Currency' : 'Currencies'}: `}
+                          {flag.currencyCodes.map((currencyCode) => (
+                            <code key={currencyCode}>{currencyCode}</code>
+                          ))}
+                        </span>
+                      </>
+                    )}
                 </span>
-                {currencyCode && <span />}
               </div>
-              <Flag code={flagCode} />
-              <Flag code={flagCode} intrinsicSize={150} />
             </div>
           );
         })}
@@ -94,6 +149,13 @@ const AllFlagsAndSizes = (region: string) => {
 };
 
 // Stories for each region
+export const World: Story = {
+  render: () => AllFlagsAndSizes('World', allFlagsSorted),
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+};
+
 export const Africa: Story = {
   render: () => AllFlagsAndSizes('Africa'),
 };
@@ -126,6 +188,6 @@ export const SouthAmerica: Story = {
   render: () => AllFlagsAndSizes('South America'),
 };
 
-export const Fallback: Story = {
-  render: () => AllFlagsAndSizes('Fallback'),
+export const Misc: Story = {
+  render: () => AllFlagsAndSizes('Misc'),
 };

package/src/illustrations/Illustration.stories.tsx

@@ -20,39 +20,42 @@ export const Basic: Story = {
   },
 };
 
-export const All = () => {
-  const assetNames = Object.values(Assets);
-  return (
-    <>
-      <span className="np-text-body-large-bold">
-        Total number of illustrations: {assetNames.length}
-      </span>
-      <div
-        style={{
-          display: "grid",
-          gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))",
-          gap: "var(--padding-small)",
-        }}
-      >
-        {Object.values(Assets).map((assetName) => (
-          <div
-            key={assetName}
-            style={{
-              display: "grid",
-              alignItems: "center",
-              justifyItems: "center",
-            }}
-          >
-            <Illustration
-              alt={assetName}
-              name={assetName as IllustrationNames}
-            />
-            <span>
-              <code>{assetName}</code>
-            </span>
-          </div>
-        ))}
-      </div>
-    </>
-  );
+export const All: Story = {
+  tags: ["autodocs"],
+  render: () => {
+    const assetNames = Object.values(Assets);
+    return (
+      <>
+        <span className="np-text-body-large-bold">
+          Total number of illustrations: {assetNames.length}
+        </span>
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))",
+            gap: "var(--padding-small)",
+          }}
+        >
+          {assetNames.map((assetName) => (
+            <div
+              key={assetName}
+              style={{
+                display: "grid",
+                alignItems: "center",
+                justifyItems: "center",
+              }}
+            >
+              <Illustration
+                alt={assetName}
+                name={assetName as IllustrationNames}
+              />
+              <span>
+                <code>{assetName}</code>
+              </span>
+            </div>
+          ))}
+        </div>
+      </>
+    );
+  },
 };

package/src/illustrations/metadata.ts

@@ -4,10 +4,298 @@
   * See: `scripts/generate-i10s-metadata.mjs`
   *
   */
-  
-  
+
+
   export enum Assets {
-    WALLET = 'wallet',TWO_INVITE_LETTERS_OPENED = 'two-invite-letters-opened',TOOL = 'tool',TARGET_PLATFORM = 'target-platform',STOPWATCH_PLATFORM = 'stopwatch-platform',SPEECH_BUBBLE = 'speech-bubble',SKIP_AUTHENTICATION = 'skip-authentication',SHOPPING_BAG = 'shopping-bag',SATELLITE_PLATFORM = 'satellite-platform',SAND_TIMER_BUSINESS = 'sand-timer-business',SAND_TIMER = 'sand-timer',REMINDER_LETTER = 'reminder-letter',RED_PACKET = 'red-packet',RECEIVE_BUSINESS = 'receive-business',RECEIVE = 'receive',QUESTION_MARK_BUSINESS = 'question-mark-business',QUESTION_MARK = 'question-mark',PUZZLE_PIECES_BUSINESS = 'puzzle-pieces-business',PUZZLE_PIECES = 'puzzle-pieces',PLANE_BUSINESS = 'plane-business',PLANE_2 = 'plane-2',PLANE = 'plane',PIE_CHART_BUSINESS = 'pie-chart-business',PIE_CHART = 'pie-chart',PHONES = 'phones',PERSONAL_CARD = 'personal-card',PERCENTAGE_BUSINESS = 'percentage-business',PERCENTAGE = 'percentage',PASSKEY = 'passkey',PALM_TREE = 'palm-tree',ONE_INVITE_LETTER_OPENED = 'one-invite-letter-opened',MULTI_CURRENCY_BUSINESS = 'multi-currency-business',MULTI_CURRENCY = 'multi-currency',MEGAPHONE = 'megaphone',MARBLE_CARD_FLAG_ONLY_BUSINESS = 'marble-card-flag-only-business',MARBLE_CARD_FLAG_ONLY = 'marble-card-flag-only',MARBLE_CARD_BUSINESS_FLAG_ONLY = 'marble-card-business-flag-only',MARBLE_CARD_BUSINESS = 'marble-card-business',MARBLE_CARD = 'marble-card',MARBLE_BUSINESS = 'marble-business',MARBLE = 'marble',MAP = 'map',MAGNIFYING_GLASS_BUSINESS = 'magnifying-glass-business',MAGNIFYING_GLASS = 'magnifying-glass',LOCK_PLATFORM = 'lock-platform',LOCK_BUSINESS = 'lock-business',LOCK = 'lock',LIGHT_BULB_BUSINESS = 'light-bulb-business',LIGHT_BULB = 'light-bulb',KEY_BUSINESS = 'key-business',KEY = 'key',JARS = 'jars',INVITE_LETTER = 'invite-letter',INTEREST = 'interest',INFINITE = 'infinite',ID_CARD = 'id-card',HOUSE = 'house',HEART_5 = 'heart-5',HEART_4 = 'heart-4',HEART_3 = 'heart-3',HEART_2 = 'heart-2',HEART = 'heart',HEADSET_BUSINESS = 'headset-business',HEADSET = 'headset',GRAPH_BUSINESS = 'graph-business',GRAPH = 'graph',GLOBE = 'globe',GIFT_BOX = 'gift-box',GET_PAID_WITH_CARD_BUSINESS = 'get-paid-with-card-business',GEAR_BUSINESS = 'gear-business',GEAR = 'gear',FLOWER = 'flower',FLAG = 'flag',EXCLAMATION_MARK_BUSINESS = 'exclamation-mark-business',EXCLAMATION_MARK = 'exclamation-mark',EMAIL_SUCCESS_BUSINESS = 'email-success-business',EMAIL_SUCCESS = 'email-success',EMAIL = 'email',ELECTRIC_PLUG = 'electric-plug',ECO_CARD = 'eco-card',DOOR = 'door',DOCUMENTS_FOLDER_BUSINESS = 'documents-folder-business',DOCUMENTS = 'documents',DIGITAL_CARD_BUSINESS = 'digital-card-business',DIGITAL_CARD_2 = 'digital-card-2',DIGITAL_CARD = 'digital-card',COOKIE = 'cookie',CONVERT_BUSINESS = 'convert-business',CONVERT = 'convert',CONSTRUCTION_FENCE = 'construction-fence',CONFETTI_BUSINESS = 'confetti-business',CONFETTI = 'confetti',COIN_PILE_UP_BUSINESS = 'coin-pile-up-business',COIN_PILE_UP = 'coin-pile-up',COIN_PILE_DOWN_BUSINESS = 'coin-pile-down-business',COIN_PILE_DOWN = 'coin-pile-down',CLOSED_WINDOW = 'closed-window',CHECK_MARK_BUSINESS = 'check-mark-business',CHECK_MARK = 'check-mark',CALENDAR_BUSINESS = 'calendar-business',CALENDAR = 'calendar',CALCULATOR_BUSINESS = 'calculator-business',BUSINESS_CARD_BUSINESS = 'business-card-business',BUSINESS_CARD = 'business-card',BRIEFCASE_BUSINESS = 'briefcase-business',BRIEFCASE = 'briefcase',BELL_BUSINESS = 'bell-business',BELL = 'bell',BATCH_PAYMENTS_BUSINESS = 'batch-payments-business',BACKPACK = 'backpack',APP_MARKETPLACE_BUSINESS = 'app-marketplace-business',API_INTEGRATIONS_BUSINESS = 'api-integrations-business'
+    API_INTEGRATIONS_BUSINESS = 'api-integrations-business',
+    APP_MARKETPLACE_BUSINESS = 'app-marketplace-business',
+    BACKPACK = 'backpack',
+    BATCH_PAYMENTS_BUSINESS = 'batch-payments-business',
+    BELL = 'bell',
+    BELL_BUSINESS = 'bell-business',
+    BRIEFCASE = 'briefcase',
+    BRIEFCASE_BUSINESS = 'briefcase-business',
+    BRIEFCASE_SCAM = 'briefcase-scam',
+    BUSINESS_CARD = 'business-card',
+    BUSINESS_CARD_BUSINESS = 'business-card-business',
+    CALCULATOR_BUSINESS = 'calculator-business',
+    CALENDAR = 'calendar',
+    CALENDAR_BUSINESS = 'calendar-business',
+    CARD = 'card',
+    CARD_BUSINESS = 'card-business',
+    CHECK_MARK = 'check-mark',
+    CHECK_MARK_BUSINESS = 'check-mark-business',
+    CLOSED_WINDOW = 'closed-window',
+    COIN_PILE_DOWN = 'coin-pile-down',
+    COIN_PILE_DOWN_BUSINESS = 'coin-pile-down-business',
+    COIN_PILE_UP = 'coin-pile-up',
+    COIN_PILE_UP_BUSINESS = 'coin-pile-up-business',
+    COMPLIANCE_PLATFORM = 'compliance-platform',
+    CONFETTI = 'confetti',
+    CONFETTI_BUSINESS = 'confetti-business',
+    CONSTRUCTION_FENCE = 'construction-fence',
+    CONTROLS_PLATFORM = 'controls-platform',
+    CONVERT = 'convert',
+    CONVERT_BUSINESS = 'convert-business',
+    COOKIE = 'cookie',
+    DIGITAL_CARD = 'digital-card',
+    DIGITAL_CARD_2 = 'digital-card-2',
+    DIGITAL_CARD_BUSINESS = 'digital-card-business',
+    DOCUMENTS = 'documents',
+    DOCUMENTS_FOLDER_BUSINESS = 'documents-folder-business',
+    DOCUMENTS_SCAM = 'documents-scam',
+    DOOR = 'door',
+    ECO_CARD = 'eco-card',
+    ELECTRIC_PLUG = 'electric-plug',
+    EMAIL = 'email',
+    EMAIL_SCAM = 'email-scam',
+    EMAIL_SUCCESS = 'email-success',
+    EMAIL_SUCCESS_BUSINESS = 'email-success-business',
+    EXCLAMATION_MARK = 'exclamation-mark',
+    EXCLAMATION_MARK_BUSINESS = 'exclamation-mark-business',
+    FLAG = 'flag',
+    FLOWER = 'flower',
+    GEAR = 'gear',
+    GEAR_BUSINESS = 'gear-business',
+    GEAR_PLATFORM = 'gear-platform',
+    GET_PAID_WITH_CARD_BUSINESS = 'get-paid-with-card-business',
+    GIFT_BOX = 'gift-box',
+    GLOBE = 'globe',
+    GRAPH = 'graph',
+    GRAPH_BUSINESS = 'graph-business',
+    HEADSET = 'headset',
+    HEADSET_BUSINESS = 'headset-business',
+    HEADSET_SCAM = 'headset-scam',
+    HEART = 'heart',
+    HEART_2 = 'heart-2',
+    HEART_3 = 'heart-3',
+    HEART_4 = 'heart-4',
+    HEART_5 = 'heart-5',
+    HOUSE = 'house',
+    HOUSE_SCAM = 'house-scam',
+    ID_CARD = 'id-card',
+    ID_CARD_SCAM = 'id-card-scam',
+    INFINITE = 'infinite',
+    INTEREST = 'interest',
+    INVITE_LETTER = 'invite-letter',
+    JARS = 'jars',
+    KEY = 'key',
+    KEY_BUSINESS = 'key-business',
+    LIGHT_BULB = 'light-bulb',
+    LIGHT_BULB_BUSINESS = 'light-bulb-business',
+    LOCK = 'lock',
+    LOCK_BUSINESS = 'lock-business',
+    LOCK_PLATFORM = 'lock-platform',
+    MAGNIFYING_GLASS = 'magnifying-glass',
+    MAGNIFYING_GLASS_BUSINESS = 'magnifying-glass-business',
+    MAP = 'map',
+    MAP_BUSINESS = 'map-business',
+    MARBLE = 'marble',
+    MARBLE_BUSINESS = 'marble-business',
+    MARBLE_CARD = 'marble-card',
+    MARBLE_CARD_BUSINESS = 'marble-card-business',
+    MARBLE_CARD_BUSINESS_FLAG_ONLY = 'marble-card-business-flag-only',
+    MARBLE_CARD_FLAG_ONLY = 'marble-card-flag-only',
+    MARBLE_CARD_FLAG_ONLY_BUSINESS = 'marble-card-flag-only-business',
+    MEGAPHONE = 'megaphone',
+    MEGAPHONE_BUSINESS = 'megaphone-business',
+    MEGAPHONE_SCAM = 'megaphone-scam',
+    MULTI_CURRENCY = 'multi-currency',
+    MULTI_CURRENCY_BUSINESS = 'multi-currency-business',
+    ONE_INVITE_LETTER_OPENED = 'one-invite-letter-opened',
+    PALM_TREE = 'palm-tree',
+    PASSKEY = 'passkey',
+    PERCENTAGE = 'percentage',
+    PERCENTAGE_BUSINESS = 'percentage-business',
+    PERSON_RED_BLUE_SCAM = 'person-red-blue-scam',
+    PERSON_RED_SCAM = 'person-red-scam',
+    PERSONAL_CARD = 'personal-card',
+    PHONES = 'phones',
+    PIE_CHART = 'pie-chart',
+    PIE_CHART_BUSINESS = 'pie-chart-business',
+    PLANE = 'plane',
+    PLANE_2 = 'plane-2',
+    PLANE_BUSINESS = 'plane-business',
+    PUZZLE_PIECES = 'puzzle-pieces',
+    PUZZLE_PIECES_BUSINESS = 'puzzle-pieces-business',
+    QUESTION_MARK = 'question-mark',
+    QUESTION_MARK_BUSINESS = 'question-mark-business',
+    QUESTION_MARK_SCAM = 'question-mark-scam',
+    RECEIVE = 'receive',
+    RECEIVE_BUSINESS = 'receive-business',
+    RECEIVE_SCAM = 'receive-scam',
+    RED_PACKET = 'red-packet',
+    REMINDER_LETTER = 'reminder-letter',
+    ROCKET_PLATFORM = 'rocket-platform',
+    SAND_TIMER = 'sand-timer',
+    SAND_TIMER_BUSINESS = 'sand-timer-business',
+    SATELLITE_PLATFORM = 'satellite-platform',
+    SHOPPING_BAG = 'shopping-bag',
+    SKIP_AUTHENTICATION = 'skip-authentication',
+    SKIP_AUTHENTICATION_SCAM = 'skip-authentication-scam',
+    SPEECH_BUBBLE = 'speech-bubble',
+    SPEECH_BUBBLE_SCAM = 'speech-bubble-scam',
+    STOPWATCH_PLATFORM = 'stopwatch-platform',
+    TARGET_PLATFORM = 'target-platform',
+    TOOL = 'tool',
+    TREASURY_PLATFORM = 'treasury-platform',
+    TWO_INVITE_LETTERS_OPENED = 'two-invite-letters-opened',
+    WALLET = 'wallet',
   }
-  
-  export type IllustrationNames = 'wallet' | 'two-invite-letters-opened' | 'tool' | 'target-platform' | 'stopwatch-platform' | 'speech-bubble' | 'skip-authentication' | 'shopping-bag' | 'satellite-platform' | 'sand-timer-business' | 'sand-timer' | 'reminder-letter' | 'red-packet' | 'receive-business' | 'receive' | 'question-mark-business' | 'question-mark' | 'puzzle-pieces-business' | 'puzzle-pieces' | 'plane-business' | 'plane-2' | 'plane' | 'pie-chart-business' | 'pie-chart' | 'phones' | 'personal-card' | 'percentage-business' | 'percentage' | 'passkey' | 'palm-tree' | 'one-invite-letter-opened' | 'multi-currency-business' | 'multi-currency' | 'megaphone' | 'marble-card-flag-only-business' | 'marble-card-flag-only' | 'marble-card-business-flag-only' | 'marble-card-business' | 'marble-card' | 'marble-business' | 'marble' | 'map' | 'magnifying-glass-business' | 'magnifying-glass' | 'lock-platform' | 'lock-business' | 'lock' | 'light-bulb-business' | 'light-bulb' | 'key-business' | 'key' | 'jars' | 'invite-letter' | 'interest' | 'infinite' | 'id-card' | 'house' | 'heart-5' | 'heart-4' | 'heart-3' | 'heart-2' | 'heart' | 'headset-business' | 'headset' | 'graph-business' | 'graph' | 'globe' | 'gift-box' | 'get-paid-with-card-business' | 'gear-business' | 'gear' | 'flower' | 'flag' | 'exclamation-mark-business' | 'exclamation-mark' | 'email-success-business' | 'email-success' | 'email' | 'electric-plug' | 'eco-card' | 'door' | 'documents-folder-business' | 'documents' | 'digital-card-business' | 'digital-card-2' | 'digital-card' | 'cookie' | 'convert-business' | 'convert' | 'construction-fence' | 'confetti-business' | 'confetti' | 'coin-pile-up-business' | 'coin-pile-up' | 'coin-pile-down-business' | 'coin-pile-down' | 'closed-window' | 'check-mark-business' | 'check-mark' | 'calendar-business' | 'calendar' | 'calculator-business' | 'business-card-business' | 'business-card' | 'briefcase-business' | 'briefcase' | 'bell-business' | 'bell' | 'batch-payments-business' | 'backpack' | 'app-marketplace-business' | 'api-integrations-business'
+
+  export const illustrationNames = [
+    'api-integrations-business',
+    'app-marketplace-business',
+    'backpack',
+    'batch-payments-business',
+    'bell',
+    'bell-business',
+    'briefcase',
+    'briefcase-business',
+    'briefcase-scam',
+    'business-card',
+    'business-card-business',
+    'calculator-business',
+    'calendar',
+    'calendar-business',
+    'card',
+    'card-business',
+    'check-mark',
+    'check-mark-business',
+    'closed-window',
+    'coin-pile-down',
+    'coin-pile-down-business',
+    'coin-pile-up',
+    'coin-pile-up-business',
+    'compliance-platform',
+    'confetti',
+    'confetti-business',
+    'construction-fence',
+    'controls-platform',
+    'convert',
+    'convert-business',
+    'cookie',
+    'digital-card',
+    'digital-card-2',
+    'digital-card-business',
+    'documents',
+    'documents-folder-business',
+    'documents-scam',
+    'door',
+    'eco-card',
+    'electric-plug',
+    'email',
+    'email-scam',
+    'email-success',
+    'email-success-business',
+    'exclamation-mark',
+    'exclamation-mark-business',
+    'flag',
+    'flower',
+    'gear',
+    'gear-business',
+    'gear-platform',
+    'get-paid-with-card-business',
+    'gift-box',
+    'globe',
+    'graph',
+    'graph-business',
+    'headset',
+    'headset-business',
+    'headset-scam',
+    'heart',
+    'heart-2',
+    'heart-3',
+    'heart-4',
+    'heart-5',
+    'house',
+    'house-scam',
+    'id-card',
+    'id-card-scam',
+    'infinite',
+    'interest',
+    'invite-letter',
+    'jars',
+    'key',
+    'key-business',
+    'light-bulb',
+    'light-bulb-business',
+    'lock',
+    'lock-business',
+    'lock-platform',
+    'magnifying-glass',
+    'magnifying-glass-business',
+    'map',
+    'map-business',
+    'marble',
+    'marble-business',
+    'marble-card',
+    'marble-card-business',
+    'marble-card-business-flag-only',
+    'marble-card-flag-only',
+    'marble-card-flag-only-business',
+    'megaphone',
+    'megaphone-business',
+    'megaphone-scam',
+    'multi-currency',
+    'multi-currency-business',
+    'one-invite-letter-opened',
+    'palm-tree',
+    'passkey',
+    'percentage',
+    'percentage-business',
+    'person-red-blue-scam',
+    'person-red-scam',
+    'personal-card',
+    'phones',
+    'pie-chart',
+    'pie-chart-business',
+    'plane',
+    'plane-2',
+    'plane-business',
+    'puzzle-pieces',
+    'puzzle-pieces-business',
+    'question-mark',
+    'question-mark-business',
+    'question-mark-scam',
+    'receive',
+    'receive-business',
+    'receive-scam',
+    'red-packet',
+    'reminder-letter',
+    'rocket-platform',
+    'sand-timer',
+    'sand-timer-business',
+    'satellite-platform',
+    'shopping-bag',
+    'skip-authentication',
+    'skip-authentication-scam',
+    'speech-bubble',
+    'speech-bubble-scam',
+    'stopwatch-platform',
+    'target-platform',
+    'tool',
+    'treasury-platform',
+    'two-invite-letters-opened',
+    'wallet',
+  ] as const;
+
+  export type IllustrationNames = typeof illustrationNames[number];
+
+  export const illustration3DNames = [
+    'check-mark',
+    'confetti',
+    'flower',
+    'globe',
+    'graph',
+    'interest',
+    'jars',
+    'lock',
+    'magnifying-glass',
+    'marble',
+    'marble-card',
+    'multi-currency',
+    'plane',
+  ] as const;
+
+  export type Illustration3DNames = typeof illustration3DNames[number];

package/src/illustrations3d/Illustration3D.stories.tsx

@@ -2,7 +2,7 @@
 import React, { useEffect } from 'react';
 
 import { Sizes } from '../common';
-import { Assets } from '../illustrations/metadata';
+import { Assets, illustration3DNames } from '../illustrations/metadata';
 
 import Illustration3D from './Illustration3D';
 
@@ -10,6 +10,39 @@ export default {
   title: '3D Illustrations',
 };
 
+export const All = () => {
+  return (
+    <>
+      <span className="np-text-body-large-bold">
+        Total number of 3D illustrations: {illustration3DNames.length}
+      </span>
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))',
+          gap: 'var(--padding-small)',
+        }}
+      >
+        {illustration3DNames.map((name) => (
+          <div
+            key={name}
+            style={{
+              display: 'grid',
+              alignItems: 'center',
+              justifyItems: 'center',
+            }}
+          >
+            <Illustration3D name={name} size={Sizes.SMALL} />
+            <span>
+              <code>{name}</code>
+            </span>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};
+
 export const Confetti = () => {
   return (
     <>

package/src/illustrations3d/Illustration3D.tsx

@@ -4,24 +4,11 @@ import { lazy, Suspense, useEffect, useState, LazyExoticComponent } from 'react'
 
 import { LargeSize, MediumSize, SmallSize, Sizes } from '../common';
 import Illustration, { Assets } from '../illustrations';
+import { type Illustration3DNames } from '../illustrations/metadata';
+export type { Illustration3DNames };
 
 import { useBattery, isConnectionSlow, isBatteryLow, isWebGL2Available } from './utils';
 
-export type Illustration3DNames =
-  | 'lock'
-  | 'globe'
-  | 'confetti'
-  | 'check-mark'
-  | 'flower'
-  | 'graph'
-  | 'jars'
-  | 'magnifying-glass'
-  | 'marble'
-  | 'marble-card'
-  | 'multi-currency'
-  | 'plane'
-  | 'interest';
-
 export type Props = {
   name: Illustration3DNames;
   size?: SmallSize | MediumSize | LargeSize;