@wise/art 2.24.6 → 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,7 +1,6 @@
 {
   "name": "@wise/art",
-  "version": "2.24.6",
-  "packageManager": "pnpm@10.14.0+sha512.ad27a79641b49c3e481a16a805baa71817a04bbe06a38d17e60e2eaee83f6a146c6a688125f5792e48dd5ba30e7da52a5cda4c3992b9ccf333f9ce223af84748",
+  "version": "2.25.0",
   "license": "MIT",
   "description": "React library for art elements in UI",
   "homepage": "https://github.com/transferwise/web-art#readme",
@@ -21,90 +20,66 @@
     "src/",
     "!**/*.tsbuildinfo"
   ],
-  "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",
-    "start": "storybook dev -p 3001",
-    "dev": "NODE_ENV=web-art-dev pnpm start",
-    "test": "jest && release-to-github-with-changelog-pre-release-checks",
-    "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-styles": "postcss src/index.css -o dist/Illustration.css"
-  },
   "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",
-    "release-to-github-with-changelog": "^1.2.4",
-    "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"
+    "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"
   },
@@ -114,5 +89,32 @@
   "resolutions": {
     "http-cache-semantics": "^4.1.1",
     "semver-regex": "^4.0.5"
+  },
+  "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",
+    "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/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>
     </>
   );
 };
-