@wise/art 0.0.0-experimental-1d6d788

package/dist/rive/index.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var reactWebgl2 = require('@rive-app/react-webgl2');
+var clsx = require('clsx');
+var react = require('react');
+var common = require('../common-H4L6Hbbh.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+const Rive = ({
+  src,
+  animationNames
+}) => {
+  const {
+    RiveComponent
+  } = reactWebgl2.useRive({
+    src,
+    animations: animationNames,
+    autoplay: true
+  });
+  return /*#__PURE__*/jsxRuntime.jsx(RiveComponent, {});
+};
+const RiveIllustrationExperimental = ({
+  name,
+  size: sizeProp = common.Sizes.MEDIUM,
+  className
+}) => {
+  const [size, setSize] = react.useState(sizeProp);
+  react.useEffect(() => {
+    const isMobile = (typeof window !== "undefined" && window?.matchMedia('(max-width: 575px)')?.matches) ?? false;
+    if (isMobile) {
+      setSize(common.Sizes.SMALL);
+    }
+  }, []);
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: clsx__default.default(`wds-illustration-rive wds-illustration-rive-${name} wds-illustration-rive-${size}`, className),
+    children: (() => {
+      if (name === 'document-scan') {
+        return /*#__PURE__*/jsxRuntime.jsx(Rive, {
+          src: "https://wise.com/web-art/assets/illustrations3d/rive/doc-scan.riv",
+          animationNames: ["Scan Line Appearing", "Scan Line Moving"]
+        });
+      }
+      return null;
+    })()
+  });
+};
+
+exports.RiveIllustrationExperimental = RiveIllustrationExperimental;
+//# sourceMappingURL=index.js.map

package/dist/rive/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/rive/RiveIllustration.tsx"],"sourcesContent":["import { useRive } from \"@rive-app/react-webgl2\";\nimport clsx from \"clsx\";\nimport { useEffect, useState } from \"react\";\n\nimport { Sizes } from \"../common\";\nimport type { Illustration3DProps } from \"../illustrations3d\";\n\nexport interface RiveProps {\n  src: string;\n  animationNames?: string | string[];\n}\n\nconst Rive = ({ src, animationNames }: RiveProps) => {\n  const { RiveComponent } = useRive({\n    src,\n    animations: animationNames,\n    autoplay: true,\n  });\n\n  return (<RiveComponent />);\n};\n\nexport type Props = {\n  name: 'document-scan';\n  size?: Illustration3DProps[\"size\"];\n  className?: Illustration3DProps[\"className\"];\n};\n\nconst RiveIllustrationExperimental = ({ name, size: sizeProp = Sizes.MEDIUM, className }: Props) => {\n  const [size, setSize] = useState<Props['size']>(sizeProp);\n  useEffect(() => {\n    const isMobile: boolean =\n      (typeof window !== \"undefined\" && window?.matchMedia('(max-width: 575px)')?.matches) ?? false;\n    if (isMobile) {\n      setSize(Sizes.SMALL);\n    }\n  }, []);\n  return (\n    <div className={clsx('wds-illustration-rive', `wds-illustration-rive-${name}`, `wds-illustration-rive-${size}`, className)}>\n      {(() => {\n        if (name === 'document-scan') {\n          return (\n            <Rive\n              src=\"https://wise.com/web-art/assets/illustrations3d/rive/doc-scan.riv\"\n              animationNames={[\"Scan Line Appearing\", \"Scan Line Moving\"]}\n            />);\n        }\n        return null;\n      })()}\n    </div>\n  );\n};\n\nexport default RiveIllustrationExperimental;\n"],"names":["Rive","src","animationNames","RiveComponent","useRive","animations","autoplay","_jsx","RiveIllustrationExperimental","name","size","sizeProp","Sizes","MEDIUM","className","setSize","useState","useEffect","isMobile","window","matchMedia","matches","SMALL","clsx","children"],"mappings":";;;;;;;;;;;;AAYA,MAAMA,IAAI,GAAGA,CAAC;EAAEC,GAAG;AAAEC,EAAAA;AAAc,CAAa,KAAI;EAClD,MAAM;AAAEC,IAAAA;GAAe,GAAGC,mBAAO,CAAC;IAChCH,GAAG;AACHI,IAAAA,UAAU,EAAEH,cAAc;AAC1BI,IAAAA,QAAQ,EAAE;AACX,GAAA,CAAC;AAEF,EAAA,oBAAQC,cAAA,CAACJ,aAAa,EAAA,EAAA,CAAG;AAC3B,CAAC;AAQD,MAAMK,4BAA4B,GAAGA,CAAC;EAAEC,IAAI;AAAEC,EAAAA,IAAI,EAAEC,QAAQ,GAAGC,YAAK,CAACC,MAAM;AAAEC,EAAAA;AAAS,CAAS,KAAI;EACjG,MAAM,CAACJ,IAAI,EAAEK,OAAO,CAAC,GAAGC,cAAQ,CAAgBL,QAAQ,CAAC;AACzDM,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,MAAMC,QAAQ,GACZ,CAAC,OAAOC,MAAM,KAAK,WAAW,IAAIA,MAAM,EAAEC,UAAU,CAAC,oBAAoB,CAAC,EAAEC,OAAO,KAAK,KAAK;AAC/F,IAAA,IAAIH,QAAQ,EAAE;AACZH,MAAAA,OAAO,CAACH,YAAK,CAACU,KAAK,CAAC;AACtB,IAAA;EACF,CAAC,EAAE,EAAE,CAAC;AACN,EAAA,oBACEf,cAAA,CAAA,KAAA,EAAA;IAAKO,SAAS,EAAES,qBAAI,CAAA,CAAA,4CAAA,EAAmDd,IAAI,0BAA6BC,IAAI,CAAA,CAAA,EAAII,SAAS,CAAE;IAAAU,QAAA,EACxH,CAAC,MAAK;MACL,IAAIf,IAAI,KAAK,eAAe,EAAE;QAC5B,oBACEF,cAAA,CAACP,IAAI,EAAA;AACHC,UAAAA,GAAG,EAAC,mEAAmE;AACvEC,UAAAA,cAAc,EAAE,CAAC,qBAAqB,EAAE,kBAAkB;AAAE,SAAA,CAC5D;AACN,MAAA;AACA,MAAA,OAAO,IAAI;AACb,IAAA,CAAC;AAAG,GACD,CAAC;AAEV;;;;"}

package/package.json

@@ -0,0 +1,125 @@
+{
+  "name": "@wise/art",
+  "version": "0.0.0-experimental-1d6d788",
+  "license": "MIT",
+  "description": "React library for art elements in UI",
+  "homepage": "https://github.com/transferwise/web-art#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/transferwise/web-art.git"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "author": "Wise Payments Ltd.",
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.esm.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/",
+    "src/",
+    "!**/*.tsbuildinfo"
+  ],
+  "dependencies": {
+    "@babel/runtime": "^7.28.4",
+    "@react-three/drei": "9.122.0",
+    "@react-three/fiber": "8.18.0",
+    "@rive-app/react-webgl2": "^4.25.1",
+    "@types/three": "0.164.0",
+    "clsx": "^2.1.1",
+    "three": "0.164.0"
+  },
+  "devDependencies": {
+    "@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.5",
+    "@rollup/plugin-babel": "^6.1.0",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@storybook/react-vite": "^10.1.11",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.1",
+    "@transferwise/neptune-css": "^14.26.0",
+    "@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": "^27.0.0",
+    "@types/react": "^18.3.23",
+    "@types/react-dom": "^18.3.7",
+    "@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.39.2",
+    "glob": "^13.0.0",
+    "gltf-pipeline": "^4.3.0",
+    "imagemin": "^9.0.1",
+    "imagemin-webp": "^8.0.0",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
+    "jsdom": "^27.4.0",
+    "postcss": "^8.5.6",
+    "postcss-cli": "^11.0.1",
+    "postcss-import": "^16.1.1",
+    "prettier": "^3.7.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rollup": "^4.54.0",
+    "sharp": "^0.34.5",
+    "storybook": "^10.1.11",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.0",
+    "wise-atoms": "git+https://github.com/transferwise/wise-atoms.git#8afba508f461e91d458d4312600cb279b3f47086",
+    "@storybook/addon-docs": "^10.1.11",
+    "@changesets/cli": "^2.29.8",
+    "@changesets/changelog-github": "0.5.2"
+  },
+  "peerDependencies": {
+    "@transferwise/neptune-css": "^14.25.2",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "resolutions": {
+    "http-cache-semantics": "^4.1.1",
+    "semver-regex": "^4.0.5"
+  },
+  "engines": {
+    "node": "^24"
+  },
+  "scripts": {
+    "setup": "pnpm install && pnpm build",
+    "load-3d-i10s": "rm -rf s3-bucket/illustrations3d/ && node ./scripts/load-3d-i10s.mjs && pnpm load-riv",
+    "load-riv": "copyfiles -u 1 assets/*.riv s3-bucket/illustrations3d/rive",
+    "load-i10s": "copyfiles -u 3 node_modules/wise-atoms/illustrations/**/*.png temp",
+    "load-flags": "rm -rf s3-bucket/flags/* && pnpm load-country-flags && pnpm load-currency-flags && pnpm transform-flags && pnpm convert-flags-svg-to-png",
+    "load-country-flags": "copyfiles -u 3 node_modules/wise-atoms/flags/*.svg s3-bucket/flags && node ./scripts/generate-country-flags.mjs",
+    "load-currency-flags": "copyfiles -u 3 node_modules/wise-atoms/flags/.metadata.json s3-bucket/flags && node ./scripts/generate-currency-flags.mjs",
+    "transform-flags": "node ./scripts/transform-flags.mjs",
+    "convert-flags-svg-to-png": "node ./scripts/convert-flags-svg-to-png.mjs",
+    "convert-i10s-png-to-webp": "rm -rf s3-bucket/illustrations/ && copyfiles --f node_modules/wise-atoms/illustrations/**/*.png s3-bucket/illustrations && node ./scripts/convert-png-to-webp.mjs",
+    "generate-i10s-metadata": "node ./scripts/generate-i10s-metadata.mjs && eslint 'src/illustrations/metadata.ts' --fix",
+    "generate-flags-metadata": "node ./scripts/generate-flags-metadata.mjs && eslint 'src/flags/metadata.ts' --fix",
+    "bundle": "rm -rf dist && rollup --config --sourcemap && pnpm build-styles",
+    "cleanup": "rm -rf temp",
+    "build": "NODE_ENV=web-art-prod pnpm load-i10s && pnpm load-3d-i10s && pnpm convert-i10s-png-to-webp && pnpm generate-i10s-metadata && pnpm load-flags && pnpm generate-flags-metadata && pnpm bundle && pnpm cleanup",
+    "build:experimental": "NODE_ENV=web-art-prod pnpm generate-i10s-metadata && pnpm generate-flags-metadata && pnpm bundle && pnpm cleanup",
+    "start": "storybook dev -p 3001",
+    "dev": "NODE_ENV=web-art-dev pnpm start",
+    "test": "jest",
+    "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 --stats-json -o docs && touch ./docs/.nojekyll",
+    "build-styles": "postcss src/index.css -o dist/Illustration.css",
+    "changeset": "changeset",
+    "release": "changeset publish"
+  }
+}

package/src/common.ts

@@ -0,0 +1,17 @@
+export enum Sizes {
+  SMALL = 'small',
+  MEDIUM = 'medium',
+  LARGE = 'large',
+}
+
+export const ImageSizes = {
+  [Sizes.SMALL]: 200,
+  [Sizes.MEDIUM]: 300,
+  [Sizes.LARGE]: 500,
+};
+
+export type LargeSize = 'large';
+export type MediumSize = 'medium';
+export type SmallSize = 'small';
+
+export type Descriptors = '1x' | '1.5x' | '2x' | '3x' | '4x';

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.css

@@ -0,0 +1,4 @@
+.wds-flag {
+  box-shadow: 0 0 0 1px var(--color-border-neutral);
+  border-radius: var(--radius-full);
+}

package/src/flags/Flag.spec.tsx

@@ -0,0 +1,31 @@
+import '@testing-library/jest-dom';
+
+import { render } from '@testing-library/react';
+
+import { Flag } from './Flag';
+
+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);
+  });
+
+  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);
+  });
+
+  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);
+  });
+});

package/src/flags/Flag.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Flag } from './Flag';
+
+const meta: Meta<typeof Flag> = {
+  component: Flag,
+  title: 'Flag',
+};
+export default meta;
+
+type Story = StoryObj<typeof Flag>;
+
+export const Basic: Story = {
+  render: (args) => <Flag {...args} />,
+  tags: ['autodocs'],
+  args: {
+    code: 'GBP',
+    intrinsicSize: 64,
+  },
+};

package/src/flags/Flag.tsx

@@ -0,0 +1,65 @@
+import { clsx } from 'clsx';
+import { useEffect, useState } from 'react';
+
+import { DETAILED_FLAG_CODES } from './metadata';
+
+export interface FlagProps {
+  /**
+   * Two-letter country code (ISO 3166-1 alpha-2) or three-letter currency code (ISO 4217).
+   */
+  code: string;
+
+  /**
+   * Width and height to reserve for the underlying image, in pixels. A detailed variant is shown from 150px and above.
+   */
+  intrinsicSize?: number;
+  className?: string;
+  loading?: 'lazy' | 'eager';
+}
+
+const unknownFlagName = 'wise';
+
+export const Flag = ({
+  code,
+  intrinsicSize = 64,
+  className = undefined,
+  loading = 'lazy',
+}: FlagProps) => {
+  const [fallback, setFallback] = useState<'simple' | 'unknown' | null>(null);
+  useEffect(() => {
+    setFallback(null);
+  }, [code]);
+
+  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'
+      ? `${code.toLowerCase()}${
+          fallback == null &&
+          detailed &&
+          DETAILED_FLAG_CODES.includes(code.toLowerCase())
+            ? '-detailed'
+            : ''
+        }`
+      : unknownFlagName;
+
+  return (
+    <img
+      className={clsx('wds-flag', `wds-flag-${name}`, className)}
+      src={
+        process.env.NODE_ENV === 'web-art-dev'
+          ? `${name}.svg`
+          : `https://wise.com/web-art/assets/flags/${name}.svg`
+      }
+      loading={loading}
+      alt=""
+      width={intrinsicSize}
+      height={intrinsicSize}
+      onError={() => {
+        setFallback((prev) =>
+          prev == null && detailed ? 'simple' : 'unknown',
+        );
+      }}
+    />
+  );
+};

package/src/flags/index.ts

@@ -0,0 +1,2 @@
+export { Flag } from './Flag';
+export type { FlagProps } from './Flag';

package/src/flags/metadata.ts

@@ -0,0 +1,9 @@
+/*
+  *
+  * DON'T MODIFY THIS FILE IT'S AUTO GENERATED
+  * See: `scripts/generate-flags-metadata.mjs`
+  *
+  */
+
+
+  export const DETAILED_FLAG_CODES = ['zm', 'va', 'uy', 'us', 'ug', 'tw', 'tv', 'tm', 'sv', 'sm', 'si', 'sg', 'py', 'pt', 'ph', 'pe', 'pa', 'om', 'nz', 'np', 'ni', 'mz', 'my', 'mx', 'mt', 'mh', 'md', 'ls', 'lk', 'li', 'ki', 'ke', 'je', 'in', 'im', 'hr', 'hn', 'hm', 'hk', 'gt', 'gi', 'gg', 'fj', 'eur', 'es', 'eg', 'do', 'cn', 'by', 'br', 'bn', 'bf', 'ba', 'az', 'au', 'ar', 'an', 'am', 'al', 'ad'];

package/src/illustrations/Illustration.css

@@ -0,0 +1,27 @@
+/* Prevent image overflow viewport or container element */
+img.wds-illustration {
+  max-width: 100%;
+}
+
+.wds-illustration-padding {
+  padding: 24px;
+}
+
+.wds-illustration-3d {
+  display: inline-flex;
+}
+
+.wds-illustration-3d-small {
+  width: 200px;
+  height: 200px;
+}
+
+.wds-illustration-3d-medium {
+  width: 300px;
+  height: 300px;
+}
+
+.wds-illustration-3d-large {
+  width: 500px;
+  height: 500px;
+}

package/src/illustrations/Illustration.spec.tsx

@@ -0,0 +1,20 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import Illustration from './Illustration';
+import { Assets } from './metadata';
+
+describe('Illustration', () => {
+  it('should create empty alt att', () => {
+    render(<Illustration name={Assets.CHECK_MARK} />);
+
+    expect(screen.getByRole('presentation')).toHaveAttribute('alt', '');
+  });
+
+  it('should create alt with custom text', () => {
+    const customAltText = 'Image of slick check mark';
+    render(<Illustration alt={customAltText} name={Assets.CHECK_MARK} />);
+
+    expect(screen.getByRole('img')).toHaveAttribute('alt', customAltText);
+  });
+});

package/src/illustrations/Illustration.stories.tsx

@@ -0,0 +1,58 @@
+import type { StoryObj } from "@storybook/react-vite";
+
+import Illustration, { type Props as IllustrationProps } from "./Illustration";
+import { Assets, type IllustrationNames } from "./metadata";
+
+export default {
+  component: Illustration,
+  title: "Illustration",
+};
+
+type Story = StoryObj<typeof Illustration>;
+
+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 (
+    <>
+      <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/Illustration.tsx

@@ -0,0 +1,95 @@
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+
+import {
+  type LargeSize,
+  type MediumSize,
+  type SmallSize,
+  type Descriptors,
+  Sizes,
+} from './../common';
+import type { IllustrationNames } from './metadata';
+
+// Picking only a few props from Image element to avoid breaking change
+// as in future underlying element might change
+type ImgProps = Pick<React.ImgHTMLAttributes<HTMLImageElement>, 'id' | 'className'>;
+
+export type IllustrationSizes = LargeSize | MediumSize | SmallSize;
+
+export type Props = {
+  name: IllustrationNames;
+  alt?: string;
+  size?: IllustrationSizes;
+  loading?: 'eager' | 'lazy';
+  disablePadding?: boolean;
+} & ImgProps;
+
+const imageSizes = {
+  [Sizes.SMALL]: 200,
+  [Sizes.MEDIUM]: 300,
+  [Sizes.LARGE]: 500,
+};
+
+const Illustration = forwardRef<HTMLImageElement, Props>(
+  (
+    {
+      id,
+      name,
+      alt = '',
+      loading = 'eager',
+      className,
+      size = Sizes.MEDIUM,
+      disablePadding = false,
+    }: Props,
+    ref,
+  ) => {
+    const { SMALL, MEDIUM } = Sizes;
+
+    return name ? (
+      <picture>
+        {size === Sizes.LARGE || size === Sizes.MEDIUM ? (
+          <>
+            <source
+              width={imageSizes[SMALL]}
+              height={imageSizes[SMALL]}
+              media="(max-width: 575px)"
+              srcSet={`${defineSrc(name, SMALL, '1x')}, ${defineSrc(name, SMALL, '2x')} 2x`}
+            />
+            {size !== Sizes.MEDIUM ? (
+              <source
+                width={imageSizes[MEDIUM]}
+                height={imageSizes[MEDIUM]}
+                media="(max-width: 992px)"
+                srcSet={`${defineSrc(name, MEDIUM, '1x')}, ${defineSrc(name, MEDIUM, '2x')} 2x`}
+              />
+            ) : null}
+          </>
+        ) : null}
+
+        <img
+          id={id}
+          ref={ref}
+          alt={alt}
+          data-testid={`wds-${name}-illustration`}
+          className={clsx(
+            'wds-illustration',
+            `wds-illustration-${name}`,
+            { 'wds-illustration-padding': !disablePadding },
+            className,
+          )}
+          loading={loading}
+          src={defineSrc(name, size, '1x')}
+          srcSet={`${defineSrc(name, size, '2x')} 2x`}
+          width={imageSizes[size]}
+          height={imageSizes[size]}
+        />
+      </picture>
+    ) : null;
+  },
+);
+
+function defineSrc(illustration: string, size: IllustrationSizes, descriptor: Descriptors) {
+  return `https://wise.com/web-art/assets/illustrations/${illustration}-${size}@${descriptor}.webp`;
+}
+
+export default Illustration;