@wise/art 0.0.0-experimental-7f4f66a → 0.0.0-experimental-b088eec

package/dist/rive/RiveIllustration.d.ts

@@ -0,0 +1,13 @@
+import type { Illustration3DProps } from "../illustrations3d";
+export interface RiveProps {
+    src: string;
+    animationNames?: string | string[];
+}
+export type Props = {
+    name: 'document-scan';
+    size?: Illustration3DProps["size"];
+    className?: Illustration3DProps["className"];
+};
+declare const RiveIllustrationExperimental: ({ name, size: sizeProp, className }: Props) => import("react").JSX.Element;
+export default RiveIllustrationExperimental;
+//# sourceMappingURL=RiveIllustration.d.ts.map

package/dist/rive/RiveIllustration.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RiveIllustration.d.ts","sourceRoot":"","sources":["../../src/rive/RiveIllustration.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAE9D,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CACpC;AAYD,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,EAAE,eAAe,CAAC;IACtB,IAAI,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,mBAAmB,CAAC,WAAW,CAAC,CAAC;CAC9C,CAAC;AAEF,QAAA,MAAM,4BAA4B,GAAI,qCAAoD,KAAK,gCAuB9F,CAAC;AAEF,eAAe,4BAA4B,CAAC"}

package/dist/rive/index.d.ts

@@ -0,0 +1,3 @@
+export type { Props as RiveIllustrationExperimentalProps } from './RiveIllustration';
+export { default as RiveIllustrationExperimental } from './RiveIllustration';
+//# sourceMappingURL=index.d.ts.map

package/dist/rive/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/rive/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,KAAK,IAAI,iCAAiC,EAAE,MAAM,oBAAoB,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,4BAA4B,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/rive/index.esm.js

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

package/dist/rive/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.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,OAAO,CAAC;IAChCH,GAAG;AACHI,IAAAA,UAAU,EAAEH,cAAc;AAC1BI,IAAAA,QAAQ,EAAE;AACX,GAAA,CAAC;AAEF,EAAA,oBAAQC,GAAA,CAACJ,aAAa,EAAA,EAAA,CAAG;AAC3B,CAAC;AAQD,MAAMK,4BAA4B,GAAGA,CAAC;EAAEC,IAAI;AAAEC,EAAAA,IAAI,EAAEC,QAAQ,GAAGC,KAAK,CAACC,MAAM;AAAEC,EAAAA;AAAS,CAAS,KAAI;EACjG,MAAM,CAACJ,IAAI,EAAEK,OAAO,CAAC,GAAGC,QAAQ,CAAgBL,QAAQ,CAAC;AACzDM,EAAAA,SAAS,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,KAAK,CAACU,KAAK,CAAC;AACtB,IAAA;EACF,CAAC,EAAE,EAAE,CAAC;AACN,EAAA,oBACEf,GAAA,CAAA,KAAA,EAAA;IAAKO,SAAS,EAAES,IAAI,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,GAAA,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/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

@@ -1,6 +1,6 @@
 {
   "name": "@wise/art",
-  "version": "0.0.0-experimental-7f4f66a",
+  "version": "0.0.0-experimental-b088eec",
   "license": "MIT",
   "description": "React library for art elements in UI",
   "homepage": "https://github.com/transferwise/web-art#readme",
@@ -76,7 +76,7 @@
     "storybook": "^10.2.10",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
-    "wise-atoms": "git+https://github.com/transferwise/wise-atoms.git#3e078a112be8ca2b2fc736a95e607b8b41bae94f",
+    "wise-atoms": "git+https://github.com/transferwise/wise-atoms.git#0f3db58bbc3aef475d869f20f6a1a7e54b6decfb",
     "@storybook/addon-docs": "^10.2.10",
     "@changesets/cli": "^2.29.8",
     "@changesets/changelog-github": "0.5.2"
@@ -96,18 +96,16 @@
     "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-i10s": "copyfiles -u 4 node_modules/wise-atoms/assets/illustrations/**/*.webp s3-bucket/illustrations",
     "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",
+    "load-country-flags": "copyfiles -u 4 node_modules/wise-atoms/assets/flags/*.svg s3-bucket/flags && node ./scripts/generate-country-flags.mjs",
+    "load-currency-flags": "copyfiles -u 4 node_modules/wise-atoms/assets/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",
+    "build": "NODE_ENV=web-art-prod pnpm load-i10s && pnpm load-3d-i10s && pnpm generate-i10s-metadata && pnpm load-flags && pnpm generate-flags-metadata && pnpm bundle",
     "start": "storybook dev -p 3001",
     "dev": "NODE_ENV=web-art-dev pnpm start",
     "test": "jest",

package/src/flags/AllFlagsAndSizes.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import flagRawMetaData from "../../node_modules/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> = {
@@ -14,19 +14,22 @@ 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(([currentRegion]) => currentRegion === region)
-    .flatMap(([, flags]) => flags)
-    .reduce<{ country: string[]; currencies: string[][] }[]>((acc, flag) => {
-      const existing = acc.find(
-        (currentFlag) => currentFlag.country[0] && currentFlag.country[0] === flag.country[0],
-      );
-      if (existing) {
-        existing.currencies.push(flag.currency);
-      } else {
-        acc.push({ country: flag.country, currencies: [flag.currency] });
-      }
-      return acc;
-    }, []);
+    .filter(([, entry]) => entry.group === region)
+    .filter(([key]) => !key.endsWith('-detailed'))
+    .map(([key, entry]) => {
+      const name = key
+        .replace(/^[a-z0-9]+-/u, '')
+        .split('-')
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' ');
+
+      return {
+        key,
+        name,
+        iso2: 'iso2' in entry ? entry.iso2 : undefined,
+        currencyCode: 'currencyCode' in entry ? entry.currencyCode : undefined,
+      };
+    });
 
   return (
     <>
@@ -45,59 +48,56 @@ const AllFlagsAndSizes = (region: string) => {
       <div
         style={{
           display: 'grid',
-          gridTemplateColumns: 'repeat(auto-fill, minmax(350px, 1fr))',
-          gap: 'var(--size-24)',
+          gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
+          gap: 'var(--padding-small)',
         }}
       >
         {regionFlags.map((flag) => {
-          const countryCode = flag.country[0]?.toUpperCase();
-          const primaryCurrencyCode = flag.currencies[0]?.[0]?.toUpperCase();
-          const flagCode = countryCode ?? primaryCurrencyCode;
-          const currencyCodes = flag.currencies.map((currency) => currency[0]).filter(Boolean).map((code) => code.toUpperCase());
-
-          // Covers cases where there's just a currency code and no country (e.g. Euro)
-          const flagName = countryCode
-            ? flag.country.at(-1)
-            : flag.currencies[0]?.at(-1);
+          const flagCode = flag.iso2 ?? flag.currencyCode ?? flag.key;
 
           return (
             <div
-              key={flagName}
+              key={flag.key}
               style={{
-                display: 'grid',
-                gridTemplateColumns: 'auto auto minmax(auto, 1fr)',
-                gap: 'var(--size-12)',
+                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)',
               }}
             >
-              <Flag code={flagCode} intrinsicSize={150} />
-              <Flag code={flagCode} />
               <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',
                 }}
               >
-                <strong>{flagName}</strong>
+                <strong>{flag.name}</strong>
                 <span>
-                  {countryCode && (
+                  {flag.iso2 && (
+                    <>
+                      Country: <code>{flag.iso2}</code>
+                    </>
+                  )}
+                  {flag.currencyCode && (
                     <>
-                      Country: <code>{countryCode}</code>
+                      {flag.iso2 && <br />}
+                      Currency: <code>{flag.currencyCode}</code>
                     </>
                   )}
-                  {currencyCodes.length > 0 && (
-                      <>
-                        <br />
-                        <span>
-                          {`${currencyCodes.length === 1 ? 'Currency' : 'Currencies'}: `}
-                          {currencyCodes.map((currencyCode) => (
-                            <code key={currencyCode}>{currencyCode}</code>
-                          ))}
-                        </span>
-                      </>
-                    )}
                 </span>
               </div>
             </div>
@@ -108,7 +108,6 @@ const AllFlagsAndSizes = (region: string) => {
   );
 };
 
-// Stories for each region
 export const Africa: Story = {
   render: () => AllFlagsAndSizes('Africa'),
 };
@@ -141,6 +140,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>
+      </>
+    );
+  },
 };