@wise/art 2.24.7 → 2.25.0

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-export { A as Assets, F as Flag, I as Illustration, a as Illustration3D, i as isIllustrationSupport3D } from './index-DragVnFs.esm.js';
+export { A as Assets, F as Flag, I as Illustration, a as Illustration3D, i as isIllustrationSupport3D } from './index-ApMK-TMV.esm.js';
 export { S as Sizes } from './common-DBpCdW70.esm.js';
 import 'clsx';
 import 'react';

package/dist/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-0zgfxQZX.js');
+var index = require('./index-CeTVmx_6.js');
 var common = require('./common-H4L6Hbbh.js');
 require('clsx');
 require('react');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/art",
-  "version": "2.24.7",
+  "version": "2.25.0",
   "license": "MIT",
   "description": "React library for art elements in UI",
   "homepage": "https://github.com/transferwise/web-art#readme",
@@ -21,65 +21,65 @@
     "!**/*.tsbuildinfo"
   ],
   "dependencies": {
-    "@babel/runtime": "^7.28.3",
+    "@babel/runtime": "^7.28.4",
     "@react-three/drei": "9.122.0",
     "@react-three/fiber": "8.18.0",
-    "@rive-app/react-webgl2": "^4.23.1",
+    "@rive-app/react-webgl2": "^4.25.0",
     "@types/three": "0.164.0",
     "clsx": "^2.1.1",
     "three": "0.164.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.3",
-    "@babel/plugin-transform-runtime": "^7.28.3",
-    "@babel/preset-env": "^7.28.3",
-    "@babel/preset-react": "^7.27.1",
-    "@babel/preset-typescript": "^7.27.1",
+    "@babel/core": "^7.28.5",
+    "@babel/plugin-transform-runtime": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
     "@csstools/postcss-minify": "^2.0.4",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-typescript": "^12.1.4",
-    "@storybook/react-vite": "^9.1.2",
-    "@testing-library/jest-dom": "^6.7.0",
-    "@testing-library/react": "^16.3.0",
-    "@transferwise/neptune-css": "^14.24.5",
-    "@tsconfig/recommended": "^1.0.10",
+    "@rollup/plugin-babel": "^6.1.0",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@storybook/react-vite": "^10.1.10",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.1",
+    "@transferwise/neptune-css": "^14.25.2",
+    "@tsconfig/recommended": "^1.0.13",
     "@types/babel__core": "^7.20.5",
     "@types/imagemin": "^9.0.1",
     "@types/imagemin-webp": "^7.0.3",
     "@types/jest": "^30.0.0",
-    "@types/jsdom": "^21.1.7",
+    "@types/jsdom": "^27.0.0",
     "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",
-    "@vitejs/plugin-react": "^4.6.0",
-    "@wise/eslint-config": "^13.1.0",
+    "@vitejs/plugin-react": "^5.1.2",
+    "@wise/eslint-config": "^13.3.0",
     "babel-plugin-optimize-clsx": "^2.6.2",
     "copyfiles": "^2.4.1",
-    "eslint": "^9.33.0",
-    "glob": "^11.0.3",
+    "eslint": "^9.39.2",
+    "glob": "^13.0.0",
     "gltf-pipeline": "^4.3.0",
     "imagemin": "^9.0.1",
     "imagemin-webp": "^8.0.0",
-    "jest": "^30.0.5",
-    "jest-environment-jsdom": "^30.0.5",
-    "jsdom": "~26.1.0",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
+    "jsdom": "^27.3.0",
     "postcss": "^8.5.6",
     "postcss-cli": "^11.0.1",
     "postcss-import": "^16.1.1",
-    "prettier": "^3.6.2",
+    "prettier": "^3.7.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "rollup": "^4.46.3",
-    "sharp": "^0.32.5",
-    "storybook": "^9.1.2",
-    "typescript": "^5.9.2",
-    "vite": "^7.1.2",
-    "wise-atoms": "git+https://github.com/transferwise/wise-atoms.git#84fc36d9f1b1a57a1bc98e547d2e226bb2ed2e55",
-    "@storybook/addon-docs": "^9.1.2",
-    "@changesets/cli": "^2.29.7",
-    "@changesets/changelog-github": "0.5.1"
+    "rollup": "^4.53.5",
+    "sharp": "^0.34.5",
+    "storybook": "^10.1.10",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.0",
+    "wise-atoms": "git+https://github.com/transferwise/wise-atoms.git#8afba508f461e91d458d4312600cb279b3f47086",
+    "@storybook/addon-docs": "^10.1.10",
+    "@changesets/cli": "^2.29.8",
+    "@changesets/changelog-github": "0.5.2"
   },
   "peerDependencies": {
-    "@transferwise/neptune-css": "^14.24.5",
+    "@transferwise/neptune-css": "^14.25.2",
     "react": ">=18",
     "react-dom": ">=18"
   },
@@ -112,7 +112,7 @@
     "test:watch": "jest --watch",
     "lint": "eslint 'src/**/*.{js,ts,tsx}' 'scripts/*.{mjs,js,ts,tsx}'",
     "lint-fix": "eslint 'src/**/*.{js,ts,tsx}' 'scripts/*.{mjs,js,ts,tsx}' --fix",
-    "build-docs": "storybook build -o docs && touch ./docs/.nojekyll",
+    "build-docs": "storybook build --stats-json -o docs && touch ./docs/.nojekyll",
     "build-styles": "postcss src/index.css -o dist/Illustration.css",
     "changeset": "changeset",
     "release": "changeset publish"

package/src/flags/AllFlagsAndSizes.stories.tsx

@@ -0,0 +1,131 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import flagRawMetaData from '../../node_modules/wise-atoms/flags/.metadata.json';
+import { Flag } from './Flag';
+
+const meta: Meta<typeof Flag> = {
+  component: Flag,
+  title: 'Flag/All Flags and Sizes',
+};
+export default meta;
+
+type Story = StoryObj<typeof Flag>;
+
+// 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);
+
+  return (
+    <>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          marginBottom: 'var(--padding-medium)',
+        }}
+      >
+        <span className="np-text-title-section">{region}</span>
+        <span className="np-text-body-large-bold">
+          Total number of flags in category: {regionFlags.length}
+        </span>
+      </div>
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fill, minmax(350px, 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);
+
+          return (
+            <div
+              key={flagName}
+              style={{
+                display: 'grid',
+                gridTemplateColumns: 'minmax(auto, 1fr) auto 1fr',
+                gap: 'var(--padding-small)',
+                alignItems: 'center',
+              }}
+            >
+              <div
+                style={{
+                  display: 'flex',
+                  flexWrap: 'wrap',
+                  flexDirection: 'column',
+                  alignItems: 'flex-start',
+                  gap: 'var(--padding-small)',
+                }}
+              >
+                {flagName}
+                <span>
+                  {countryCode && (
+                    <>
+                      Country: <code>{countryCode}</code>
+                    </>
+                  )}
+                  {currencyCode && countryCode && <br />}
+                  {currencyCode && (
+                    <>
+                      Currency: <code>{currencyCode}</code>
+                    </>
+                  )}
+                </span>
+                {currencyCode && <span />}
+              </div>
+              <Flag code={flagCode} />
+              <Flag code={flagCode} intrinsicSize={150} />
+            </div>
+          );
+        })}
+      </div>
+    </>
+  );
+};
+
+// Stories for each region
+export const Africa: Story = {
+  render: () => AllFlagsAndSizes('Africa'),
+};
+
+export const Antarctic: Story = {
+  render: () => AllFlagsAndSizes('Antarctic'),
+};
+
+export const Asia: Story = {
+  render: () => AllFlagsAndSizes('Asia'),
+};
+
+export const CentralAmerica: Story = {
+  render: () => AllFlagsAndSizes('Central America'),
+};
+
+export const Europe: Story = {
+  render: () => AllFlagsAndSizes('Europe'),
+};
+
+export const NorthAmerica: Story = {
+  render: () => AllFlagsAndSizes('North America'),
+};
+
+export const Oceania: Story = {
+  render: () => AllFlagsAndSizes('Oceania'),
+};
+
+export const SouthAmerica: Story = {
+  render: () => AllFlagsAndSizes('South America'),
+};
+
+export const Fallback: Story = {
+  render: () => AllFlagsAndSizes('Fallback'),
+};

package/src/flags/Flag.spec.tsx

@@ -1,31 +1,31 @@
-import "@testing-library/jest-dom";
+import '@testing-library/jest-dom';
 
-import { render, renderHook, screen, waitFor } from "@testing-library/react";
+import { render } from '@testing-library/react';
 
-import { Flag } from "./Flag";
+import { Flag } from './Flag';
 
-describe("Flag", () => {
-  it("use default image when < 150px", () => {
+describe('Flag', () => {
+  it('use default image when < 150px', () => {
     const { container } = render(<Flag code="es" />);
 
     // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-    const flag = container.querySelector("img");
-    expect(flag?.src.includes("detailed")).toBe(false);
+    const flag = container.querySelector('img');
+    expect(flag?.src.includes('detailed')).toBe(false);
   });
 
-  it("use detailed image when available and >= 150px", () => {
+  it('use detailed image when available and >= 150px', () => {
     const { container } = render(<Flag code="es" intrinsicSize={150} />);
 
     // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-    const flag = container.querySelector("img");
-    expect(flag?.src.includes("detailed")).toBe(true);
+    const flag = container.querySelector('img');
+    expect(flag?.src.includes('detailed')).toBe(true);
   });
 
-  it("don't use try to use detailed image if not available", () => {
+  it("don't try to use detailed image if not available", () => {
     const { container } = render(<Flag code="fr" />);
 
     // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-    const flag = container.querySelector("img");
-    expect(flag?.src.includes("detailed")).toBe(false);
+    const flag = container.querySelector('img');
+    expect(flag?.src.includes('detailed')).toBe(false);
   });
 });

package/src/flags/Flag.stories.tsx

@@ -1,11 +1,10 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import flagRawMetaData from "../../node_modules/wise-atoms/flags/.metadata.json";
-import { Flag } from "./Flag";
+import { Flag } from './Flag';
 
 const meta: Meta<typeof Flag> = {
   component: Flag,
-  title: "Flag",
+  title: 'Flag',
 };
 export default meta;
 
@@ -13,92 +12,9 @@ type Story = StoryObj<typeof Flag>;
 
 export const Basic: Story = {
   render: (args) => <Flag {...args} />,
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   args: {
-    code: "GBP",
+    code: 'GBP',
     intrinsicSize: 64,
   },
 };
-
-export const AllFlagsAndSizes = () => {
-  const regions = Object.entries(flagRawMetaData);
-
-  return (
-    <>
-      <span className="np-text-body-large-bold">
-        Total number of flags: {regions.flatMap(([_, flags]) => flags).length}
-      </span>
-      <div
-        style={{
-          display: "grid",
-          gap: "var(--padding-large)",
-          marginTop: "var(--padding-medium)",
-        }}
-      >
-        {regions.map(([region, flags]) => (
-          <div key={region}>
-            <span className="np-text-title-section">{region}</span>
-            <div
-              style={{
-                display: "grid",
-                gridTemplateColumns: "repeat(auto-fill, minmax(450px, 1fr))",
-                gap: "var(--padding-small)",
-              }}
-            >
-              {flags.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);
-
-                return (
-                  <div
-                    key={flagName}
-                    style={{
-                      display: "grid",
-                      gridTemplateColumns: "minmax(auto, 1fr) auto 1fr",
-                      gap: "var(--padding-small)",
-                      alignItems: "center",
-                    }}
-                  >
-                    <div
-                      style={{
-                        display: "flex",
-                        flexWrap: "wrap",
-                        flexDirection: "column",
-                        alignItems: "flex-start",
-                        gap: "var(--padding-small)",
-                      }}
-                    >
-                      {flagName}
-                      <span>
-                        {countryCode && (
-                          <>
-                            Country: <code>{countryCode}</code>
-                          </>
-                        )}
-                        {currencyCode && countryCode && <br />}
-                        {currencyCode && (
-                          <>
-                            Currency: <code>{currencyCode}</code>
-                          </>
-                        )}
-                      </span>
-                      {currencyCode && <span />}
-                    </div>
-                    <Flag code={flagCode} />
-                    <Flag code={flagCode} intrinsicSize={150} />
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-        ))}
-      </div>
-    </>
-  );
-};

package/src/flags/Flag.tsx

@@ -1,7 +1,7 @@
-import { clsx } from "clsx";
-import { useEffect, useState } from "react";
+import { clsx } from 'clsx';
+import { useEffect, useState } from 'react';
 
-import { DETAILED_FLAG_CODES } from "./metadata";
+import { DETAILED_FLAG_CODES } from './metadata';
 
 export interface FlagProps {
   /**
@@ -14,18 +14,18 @@ export interface FlagProps {
    */
   intrinsicSize?: number;
   className?: string;
-  loading?: "lazy" | "eager";
+  loading?: 'lazy' | 'eager';
 }
 
-const unknownFlagName = "wise";
+const unknownFlagName = 'wise';
 
 export const Flag = ({
   code,
   intrinsicSize = 64,
   className = undefined,
-  loading = "lazy",
+  loading = 'lazy',
 }: FlagProps) => {
-  const [fallback, setFallback] = useState<"simple" | "unknown" | null>(null);
+  const [fallback, setFallback] = useState<'simple' | 'unknown' | null>(null);
   useEffect(() => {
     setFallback(null);
   }, [code]);
@@ -33,21 +33,21 @@ export const Flag = ({
   const detailed = intrinsicSize >= 150;
   // Only get detailed svg if we know it exists, to avoid the performance hit of failing requests
   const name =
-    fallback !== "unknown"
+    fallback !== 'unknown'
       ? `${code.toLowerCase()}${
           fallback == null &&
           detailed &&
           DETAILED_FLAG_CODES.includes(code.toLowerCase())
-            ? "-detailed"
-            : ""
+            ? '-detailed'
+            : ''
         }`
       : unknownFlagName;
 
   return (
     <img
-      className={clsx("wds-flag", `wds-flag-${name}`, className)}
+      className={clsx('wds-flag', `wds-flag-${name}`, className)}
       src={
-        process.env.NODE_ENV === "web-art-dev"
+        process.env.NODE_ENV === 'web-art-dev'
           ? `${name}.svg`
           : `https://wise.com/web-art/assets/flags/${name}.svg`
       }
@@ -57,7 +57,7 @@ export const Flag = ({
       height={intrinsicSize}
       onError={() => {
         setFallback((prev) =>
-          prev == null && detailed ? "simple" : "unknown",
+          prev == null && detailed ? 'simple' : 'unknown',
         );
       }}
     />

package/src/illustrations/Illustration.stories.tsx

@@ -1,41 +1,58 @@
+import type { StoryObj } from "@storybook/react-vite";
 
-import type {StoryObj} from '@storybook/react-vite';
-import React from 'react';
-
-import Illustration, { type Props as IllustrationProps } from './Illustration';
-import { Assets, type IllustrationNames } from './metadata';
-
+import Illustration, { type Props as IllustrationProps } from "./Illustration";
+import { Assets, type IllustrationNames } from "./metadata";
 
 export default {
   component: Illustration,
-  title: 'Illustration',
+  title: "Illustration",
 };
 
 type Story = StoryObj<typeof Illustration>;
 
-export const Individual: Story = {
-  tags: ['autodocs'],
-  render: function Render (
-    { name = Assets.CHECK_MARK, ...props }: IllustrationProps
-  ) {
-      return (
-        <Illustration name={name} {...props} />
-      );
-  }
-}
+export const Basic: Story = {
+  tags: ["autodocs"],
+  render: function Render({
+    name = Assets.CHECK_MARK,
+    ...props
+  }: IllustrationProps) {
+    return <Illustration name={name} {...props} />;
+  },
+};
 
 export const All = () => {
   const assetNames = Object.values(Assets);
   return (
     <>
-      <div>Total number of illustrations: {assetNames.length}</div>
-      {Object.values(Assets).map((assetName) => (
-        <p key={assetName}>
-          Asset: <code>{assetName}</code>
-          <Illustration key={assetName} alt={assetName} name={assetName as IllustrationNames} />
-        </p>
-      ))}
+      <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>
     </>
   );
 };
-

package/src/illustrations/metadata.ts

@@ -7,7 +7,7 @@
   
   
   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 = 'sand-timer',REMINDER_LETTER = 'reminder-letter',RECEIVE = 'receive',QUESTION_MARK = 'question-mark',PUZZLE_PIECES = 'puzzle-pieces',PLANE_2 = 'plane-2',PLANE = 'plane',PIE_CHART = 'pie-chart',PHONES = 'phones',PERSONAL_CARD = 'personal-card',PERCENTAGE = 'percentage',PALM_TREE = 'palm-tree',ONE_INVITE_LETTER_OPENED = 'one-invite-letter-opened',MULTI_CURRENCY = 'multi-currency',MEGAPHONE = 'megaphone',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 = 'marble',MAP = 'map',MAGNIFYING_GLASS = 'magnifying-glass',LOCK_PLATFORM = 'lock-platform',LOCK = 'lock',LIGHT_BULB = 'light-bulb',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',GRAPH = 'graph',GLOBE = 'globe',GEAR = 'gear',FLOWER = 'flower',FLAG = 'flag',EXCLAMATION_MARK = 'exclamation-mark',EMAIL_SUCCESS = 'email-success',EMAIL = 'email',ELECTRIC_PLUG = 'electric-plug',ECO_CARD = 'eco-card',DOOR = 'door',DOCUMENTS = 'documents',DIGITAL_CARD_2 = 'digital-card-2',DIGITAL_CARD = 'digital-card',COOKIE = 'cookie',CONVERT = 'convert',CONSTRUCTION_FENCE = 'construction-fence',CONFETTI = 'confetti',COIN_PILE_UP = 'coin-pile-up',COIN_PILE_DOWN = 'coin-pile-down',CLOSED_WINDOW = 'closed-window',CHECK_MARK = 'check-mark',CALENDAR = 'calendar',BUSINESS_CARD = 'business-card',BRIEFCASE = 'briefcase',BELL = 'bell',BACKPACK = 'backpack'
+    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',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',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',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'
   }
   
-  export type IllustrationNames = 'wallet' | 'two-invite-letters-opened' | 'tool' | 'target-platform' | 'stopwatch-platform' | 'speech-bubble' | 'skip-authentication' | 'shopping-bag' | 'satellite-platform' | 'sand-timer' | 'reminder-letter' | 'receive' | 'question-mark' | 'puzzle-pieces' | 'plane-2' | 'plane' | 'pie-chart' | 'phones' | 'personal-card' | 'percentage' | 'palm-tree' | 'one-invite-letter-opened' | 'multi-currency' | 'megaphone' | 'marble-card-flag-only' | 'marble-card-business-flag-only' | 'marble-card-business' | 'marble-card' | 'marble' | 'map' | 'magnifying-glass' | 'lock-platform' | 'lock' | 'light-bulb' | 'key' | 'jars' | 'invite-letter' | 'interest' | 'infinite' | 'id-card' | 'house' | 'heart-5' | 'heart-4' | 'heart-3' | 'heart-2' | 'heart' | 'graph' | 'globe' | 'gear' | 'flower' | 'flag' | 'exclamation-mark' | 'email-success' | 'email' | 'electric-plug' | 'eco-card' | 'door' | 'documents' | 'digital-card-2' | 'digital-card' | 'cookie' | 'convert' | 'construction-fence' | 'confetti' | 'coin-pile-up' | 'coin-pile-down' | 'closed-window' | 'check-mark' | 'calendar' | 'business-card' | 'briefcase' | 'bell' | 'backpack'
+  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' | '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' | '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' | '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'