@coinbase/cds-web 9.28.0 → 9.29.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## 9.29.0 (2026-10-02)
+
+### 🚀 Features
+
+- Feat: lazy-load framer-motion's `domAnimation` features in `ThemeProvider`, keeping them out of the initial bundle. Pass `motionFeatures={domAnimation}` to load them eagerly.
+- Feat: lazy-load the illustration `svgEsmMap` modules, keeping them out of the initial bundle. Themed illustrations (`applyTheme`) now fetch one extra chunk before rendering.
+
 ## 9.28.0 (2026-09-18)
 
 ### 🚀 Features

package/dts/illustrations/HeroSquare.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HeroSquare.d.ts","sourceRoot":"","sources":["../../src/illustrations/HeroSquare.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC1B,KAAK,yBAAyB,EAC/B,MAAM,sBAAsB,CAAC;AAE9B,MAAM,MAAM,mBAAmB,GAAG,qBAAqB,CAAC,YAAY,CAAC,GACnE,qBAAqB,GAAG;IACtB;;;SAGK;IACL,SAAS,CAAC,EAAE,yBAAyB,CAAC,YAAY,CAAC,CAAC;CACrD,CAAC;AAEJ,MAAM,MAAM,eAAe,GAAG,mBAAmB,CAAC;AAElD,eAAO,MAAM,UAAU,kHAItB,CAAC;AAEF,YAAY,EAAE,cAAc,EAAE,MAAM,2EAA2E,CAAC"}
+{"version":3,"file":"HeroSquare.d.ts","sourceRoot":"","sources":["../../src/illustrations/HeroSquare.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC1B,KAAK,yBAAyB,EAC/B,MAAM,sBAAsB,CAAC;AAE9B,MAAM,MAAM,mBAAmB,GAAG,qBAAqB,CAAC,YAAY,CAAC,GACnE,qBAAqB,GAAG;IACtB;;;SAGK;IACL,SAAS,CAAC,EAAE,yBAAyB,CAAC,YAAY,CAAC,CAAC;CACrD,CAAC;AAEJ,MAAM,MAAM,eAAe,GAAG,mBAAmB,CAAC;AAUlD,eAAO,MAAM,UAAU,kHAItB,CAAC;AAEF,YAAY,EAAE,cAAc,EAAE,MAAM,2EAA2E,CAAC"}

package/dts/illustrations/Pictogram.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pictogram.d.ts","sourceRoot":"","sources":["../../src/illustrations/Pictogram.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC1B,KAAK,yBAAyB,EAC/B,MAAM,sBAAsB,CAAC;AAE9B,eAAO,MAAM,SAAS,iHAA2E,CAAC;AAElG,MAAM,MAAM,kBAAkB,GAAG,qBAAqB,CAAC,WAAW,CAAC,GACjE,qBAAqB,GAAG;IACtB;;SAEK;IACL,SAAS,CAAC,EAAE,yBAAyB,CAAC,WAAW,CAAC,CAAC;CACpD,CAAC;AAEJ,MAAM,MAAM,cAAc,GAAG,kBAAkB,CAAC;AAChD,YAAY,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC"}
+{"version":3,"file":"Pictogram.d.ts","sourceRoot":"","sources":["../../src/illustrations/Pictogram.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC1B,KAAK,yBAAyB,EAC/B,MAAM,sBAAsB,CAAC;AAU9B,eAAO,MAAM,SAAS,iHAIrB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,qBAAqB,CAAC,WAAW,CAAC,GACjE,qBAAqB,GAAG;IACtB;;SAEK;IACL,SAAS,CAAC,EAAE,yBAAyB,CAAC,WAAW,CAAC,CAAC;CACpD,CAAC;AAEJ,MAAM,MAAM,cAAc,GAAG,kBAAkB,CAAC;AAChD,YAAY,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC"}

package/dts/illustrations/SpotIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpotIcon.d.ts","sourceRoot":"","sources":["../../src/illustrations/SpotIcon.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC1B,KAAK,yBAAyB,EAC/B,MAAM,sBAAsB,CAAC;AAE9B,eAAO,MAAM,QAAQ,gHAAwE,CAAC;AAE9F,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,CAAC,UAAU,CAAC,GAC/D,qBAAqB,GAAG;IACtB;;SAEK;IACL,SAAS,CAAC,EAAE,yBAAyB,CAAC,YAAY,CAAC,CAAC;CACrD,CAAC;AACJ,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC;AAC9C,YAAY,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC"}
+{"version":3,"file":"SpotIcon.d.ts","sourceRoot":"","sources":["../../src/illustrations/SpotIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC1B,KAAK,yBAAyB,EAC/B,MAAM,sBAAsB,CAAC;AAU9B,eAAO,MAAM,QAAQ,gHAA4E,CAAC;AAElG,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,CAAC,UAAU,CAAC,GAC/D,qBAAqB,GAAG;IACtB;;SAEK;IACL,SAAS,CAAC,EAAE,yBAAyB,CAAC,YAAY,CAAC,CAAC;CACrD,CAAC;AACJ,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC;AAC9C,YAAY,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC"}

package/dts/illustrations/SpotRectangle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpotRectangle.d.ts","sourceRoot":"","sources":["../../src/illustrations/SpotRectangle.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC1B,KAAK,yBAAyB,EAC/B,MAAM,sBAAsB,CAAC;AAE9B,MAAM,MAAM,sBAAsB,GAAG,qBAAqB,CAAC,eAAe,CAAC,GACzE,qBAAqB,GAAG;IACtB;;;SAGK;IACL,SAAS,CAAC,EAAE,yBAAyB,CAAC,eAAe,CAAC,CAAC;CACxD,CAAC;AAEJ,MAAM,MAAM,kBAAkB,GAAG,sBAAsB,CAAC;AAExD,eAAO,MAAM,aAAa,qHAIzB,CAAC;AAEF,YAAY,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC"}
+{"version":3,"file":"SpotRectangle.d.ts","sourceRoot":"","sources":["../../src/illustrations/SpotRectangle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC1B,KAAK,yBAAyB,EAC/B,MAAM,sBAAsB,CAAC;AAE9B,MAAM,MAAM,sBAAsB,GAAG,qBAAqB,CAAC,eAAe,CAAC,GACzE,qBAAqB,GAAG;IACtB;;;SAGK;IACL,SAAS,CAAC,EAAE,yBAAyB,CAAC,eAAe,CAAC,CAAC;CACxD,CAAC;AAEJ,MAAM,MAAM,kBAAkB,GAAG,sBAAsB,CAAC;AAUxD,eAAO,MAAM,aAAa,qHAIzB,CAAC;AAEF,YAAY,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC"}

package/dts/illustrations/SpotSquare.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpotSquare.d.ts","sourceRoot":"","sources":["../../src/illustrations/SpotSquare.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC1B,KAAK,yBAAyB,EAC/B,MAAM,sBAAsB,CAAC;AAE9B,eAAO,MAAM,UAAU,kHAItB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,qBAAqB,CAAC,YAAY,CAAC,GACnE,qBAAqB,GAAG;IACtB;;SAEK;IACL,SAAS,CAAC,EAAE,yBAAyB,CAAC,YAAY,CAAC,CAAC;CACrD,CAAC;AAEJ,MAAM,MAAM,eAAe,GAAG,mBAAmB,CAAC;AAClD,YAAY,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC"}
+{"version":3,"file":"SpotSquare.d.ts","sourceRoot":"","sources":["../../src/illustrations/SpotSquare.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC1B,KAAK,yBAAyB,EAC/B,MAAM,sBAAsB,CAAC;AAU9B,eAAO,MAAM,UAAU,kHAItB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,qBAAqB,CAAC,YAAY,CAAC,GACnE,qBAAqB,GAAG;IACtB;;SAEK;IACL,SAAS,CAAC,EAAE,yBAAyB,CAAC,YAAY,CAAC,CAAC;CACrD,CAAC;AAEJ,MAAM,MAAM,eAAe,GAAG,mBAAmB,CAAC;AAClD,YAAY,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC"}

package/dts/illustrations/createIllustration.d.ts

@@ -67,6 +67,16 @@ type SvgEsmConfigShape<Variant extends IllustrationVariant> = Partial<
     }
   >
 >;
+/**
+ * A loader for a variant's full svgEsmMap module, or an already-resolved map (for callers that
+ * still import it eagerly). Accepting a loader lets `createIllustration` defer the entire
+ * per-name map — not just the SVG bodies it points to — out of the static import graph of every
+ * consumer, since the map is only ever read inside a post-mount `useEffect` when `applyTheme` is
+ * set.
+ */
+type SvgEsmConfigSource<Variant extends IllustrationVariant> =
+  | SvgEsmConfigShape<Variant>
+  | (() => Promise<SvgEsmConfigShape<Variant>>);
 export type IllustrationA11yProps = {
   /** Alt tag to apply to the img
    * @default "" will identify the image as decorative
@@ -78,7 +88,7 @@ export type IllustrationBasePropsWithA11y<Type extends IllustrationVariant> =
 export declare function createIllustration<Variant extends IllustrationVariant>(
   variant: Variant,
   versionMap: IllustrationVersionMapShape<Variant>,
-  svgEsmConfig?: SvgEsmConfigShape<Variant>,
+  svgEsmConfig?: SvgEsmConfigSource<Variant>,
 ): React.NamedExoticComponent<IllustrationBasePropsWithA11y<Variant>>;
 export {};
 //# sourceMappingURL=createIllustration.d.ts.map

package/dts/illustrations/createIllustration.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createIllustration.d.ts","sourceRoot":"","sources":["../../src/illustrations/createIllustration.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8CAA8C,CAAC;AACxF,OAAO,KAAK,EACV,mBAAmB,EACnB,kBAAkB,EAClB,iBAAiB,EACjB,sBAAsB,EACtB,mBAAmB,EACpB,MAAM,8CAA8C,CAAC;AACtD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAI1E,OAAO,KAAK,EACV,cAAc,EACd,aAAa,EACb,YAAY,EACZ,iBAAiB,EACjB,cAAc,EACf,MAAM,6BAA6B,CAAC;AAarC,MAAM,MAAM,oBAAoB,GAAG;IACjC,UAAU,EAAE,cAAc,CAAC;IAC3B,aAAa,EAAE,iBAAiB,CAAC;IACjC,SAAS,EAAE,aAAa,CAAC;IACzB,UAAU,EAAE,cAAc,CAAC;IAC3B,QAAQ,EAAE,YAAY,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,UAAU,EAAE,mBAAmB,CAAC;IAChC,UAAU,EAAE,mBAAmB,CAAC;IAChC,aAAa,EAAE,sBAAsB,CAAC;IACtC,SAAS,EAAE,kBAAkB,CAAC;IAC9B,QAAQ,EAAE,iBAAiB,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,MAAM,oBAAoB,IAAI,WAAW,GAAG;IACtF,+CAA+C;IAC/C,IAAI,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC;IAC9B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC,CAAC,CAAC,CAAC;IACzC,iEAAiE;IACjE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;SAIK;IACL,QAAQ,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC,YAAY,CAAC;IACrC,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,KAAK,2BAA2B,CAAC,OAAO,SAAS,mBAAmB,IAAI,MAAM,CAC5E,oBAAoB,CAAC,OAAO,CAAC,EAC7B,MAAM,CACP,CAAC;AAEF;;;GAGG;AACH,KAAK,iBAAiB,CAAC,OAAO,SAAS,mBAAmB,IAAI,OAAO,CACnE,MAAM,CAAC,oBAAoB,CAAC,OAAO,CAAC,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,CAAA;CAAE,CAAC,CAC7E,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,6BAA6B,CAAC,IAAI,SAAS,mBAAmB,IACxE,qBAAqB,CAAC,IAAI,CAAC,GAAG,qBAAqB,CAAC;AAEtD,wBAAgB,kBAAkB,CAAC,OAAO,SAAS,mBAAmB,EACpE,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,2BAA2B,CAAC,OAAO,CAAC,EAChD,YAAY,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,sEAyF1C"}
+{"version":3,"file":"createIllustration.d.ts","sourceRoot":"","sources":["../../src/illustrations/createIllustration.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8CAA8C,CAAC;AACxF,OAAO,KAAK,EACV,mBAAmB,EACnB,kBAAkB,EAClB,iBAAiB,EACjB,sBAAsB,EACtB,mBAAmB,EACpB,MAAM,8CAA8C,CAAC;AACtD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAI1E,OAAO,KAAK,EACV,cAAc,EACd,aAAa,EACb,YAAY,EACZ,iBAAiB,EACjB,cAAc,EACf,MAAM,6BAA6B,CAAC;AAarC,MAAM,MAAM,oBAAoB,GAAG;IACjC,UAAU,EAAE,cAAc,CAAC;IAC3B,aAAa,EAAE,iBAAiB,CAAC;IACjC,SAAS,EAAE,aAAa,CAAC;IACzB,UAAU,EAAE,cAAc,CAAC;IAC3B,QAAQ,EAAE,YAAY,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,UAAU,EAAE,mBAAmB,CAAC;IAChC,UAAU,EAAE,mBAAmB,CAAC;IAChC,aAAa,EAAE,sBAAsB,CAAC;IACtC,SAAS,EAAE,kBAAkB,CAAC;IAC9B,QAAQ,EAAE,iBAAiB,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,MAAM,oBAAoB,IAAI,WAAW,GAAG;IACtF,+CAA+C;IAC/C,IAAI,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC;IAC9B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC,CAAC,CAAC,CAAC;IACzC,iEAAiE;IACjE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;SAIK;IACL,QAAQ,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC,YAAY,CAAC;IACrC,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,KAAK,2BAA2B,CAAC,OAAO,SAAS,mBAAmB,IAAI,MAAM,CAC5E,oBAAoB,CAAC,OAAO,CAAC,EAC7B,MAAM,CACP,CAAC;AAEF;;;GAGG;AACH,KAAK,iBAAiB,CAAC,OAAO,SAAS,mBAAmB,IAAI,OAAO,CACnE,MAAM,CAAC,oBAAoB,CAAC,OAAO,CAAC,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,CAAA;CAAE,CAAC,CAC7E,CAAC;AAEF;;;;;;GAMG;AACH,KAAK,kBAAkB,CAAC,OAAO,SAAS,mBAAmB,IACvD,iBAAiB,CAAC,OAAO,CAAC,GAC1B,CAAC,MAAM,OAAO,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;AAEhD,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,6BAA6B,CAAC,IAAI,SAAS,mBAAmB,IACxE,qBAAqB,CAAC,IAAI,CAAC,GAAG,qBAAqB,CAAC;AAEtD,wBAAgB,kBAAkB,CAAC,OAAO,SAAS,mBAAmB,EACpE,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,2BAA2B,CAAC,OAAO,CAAC,EAChD,YAAY,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,sEAkG3C"}

package/dts/system/FramerMotionProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FramerMotionProvider.d.ts","sourceRoot":"","sources":["../../src/system/FramerMotionProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAA4B,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC;AAEzE,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG;IACpE,cAAc,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,+BAGlC,yBAAyB,4CAM3B,CAAC"}
+{"version":3,"file":"FramerMotionProvider.d.ts","sourceRoot":"","sources":["../../src/system/FramerMotionProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC;AAE3D,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG;IACpE,cAAc,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;CACxC,CAAC;AAUF,eAAO,MAAM,oBAAoB,GAAI,+BAGlC,yBAAyB,4CAM3B,CAAC"}

package/esm/illustrations/HeroSquare.js

@@ -1,4 +1,7 @@
-import heroSquareSvgEsmMap from '@coinbase/cds-illustrations/__generated__/heroSquare/data/svgEsmMap';
 import heroSquareVersionMap from '@coinbase/cds-illustrations/__generated__/heroSquare/data/versionMap';
 import { createIllustration } from './createIllustration';
-export const HeroSquare = createIllustration('heroSquare', heroSquareVersionMap, heroSquareSvgEsmMap);
+// Loaded lazily — only fetched once a HeroSquare with applyTheme actually mounts — so the
+// generated per-name svgEsmMap never lands in the static import graph of consumers that don't
+// use theming.
+const loadHeroSquareSvgEsmMap = () => import('@coinbase/cds-illustrations/__generated__/heroSquare/data/svgEsmMap').then(mod => mod.default);
+export const HeroSquare = createIllustration('heroSquare', heroSquareVersionMap, loadHeroSquareSvgEsmMap);

package/esm/illustrations/Pictogram.js

@@ -1,4 +1,8 @@
-import pictogramSvgEsmMap from '@coinbase/cds-illustrations/__generated__/pictogram/data/svgEsmMap';
 import pictogramVersionMap from '@coinbase/cds-illustrations/__generated__/pictogram/data/versionMap';
 import { createIllustration } from './createIllustration';
-export const Pictogram = createIllustration('pictogram', pictogramVersionMap, pictogramSvgEsmMap);
+
+// Loaded lazily — only fetched once a Pictogram with applyTheme actually mounts — so the
+// generated per-name svgEsmMap never lands in the static import graph of consumers that don't
+// use theming.
+const loadPictogramSvgEsmMap = () => import('@coinbase/cds-illustrations/__generated__/pictogram/data/svgEsmMap').then(mod => mod.default);
+export const Pictogram = createIllustration('pictogram', pictogramVersionMap, loadPictogramSvgEsmMap);

package/esm/illustrations/SpotIcon.js

@@ -1,4 +1,8 @@
-import spotIconSvgEsmMap from '@coinbase/cds-illustrations/__generated__/spotIcon/data/svgEsmMap';
 import spotIconVersionMap from '@coinbase/cds-illustrations/__generated__/spotIcon/data/versionMap';
 import { createIllustration } from './createIllustration';
-export const SpotIcon = createIllustration('spotIcon', spotIconVersionMap, spotIconSvgEsmMap);
+
+// Loaded lazily — only fetched once a SpotIcon with applyTheme actually mounts — so the
+// generated per-name svgEsmMap never lands in the static import graph of consumers that don't
+// use theming.
+const loadSpotIconSvgEsmMap = () => import('@coinbase/cds-illustrations/__generated__/spotIcon/data/svgEsmMap').then(mod => mod.default);
+export const SpotIcon = createIllustration('spotIcon', spotIconVersionMap, loadSpotIconSvgEsmMap);

package/esm/illustrations/SpotRectangle.js

@@ -1,4 +1,7 @@
-import spotRectangleSvgEsmMap from '@coinbase/cds-illustrations/__generated__/spotRectangle/data/svgEsmMap';
 import spotRectangleVersionMap from '@coinbase/cds-illustrations/__generated__/spotRectangle/data/versionMap';
 import { createIllustration } from './createIllustration';
-export const SpotRectangle = createIllustration('spotRectangle', spotRectangleVersionMap, spotRectangleSvgEsmMap);
+// Loaded lazily — only fetched once a SpotRectangle with applyTheme actually mounts — so the
+// generated per-name svgEsmMap never lands in the static import graph of consumers that don't
+// use theming.
+const loadSpotRectangleSvgEsmMap = () => import('@coinbase/cds-illustrations/__generated__/spotRectangle/data/svgEsmMap').then(mod => mod.default);
+export const SpotRectangle = createIllustration('spotRectangle', spotRectangleVersionMap, loadSpotRectangleSvgEsmMap);

package/esm/illustrations/SpotSquare.js

@@ -1,4 +1,8 @@
-import spotSquareSvgEsmMap from '@coinbase/cds-illustrations/__generated__/spotSquare/data/svgEsmMap';
 import spotSquareVersionMap from '@coinbase/cds-illustrations/__generated__/spotSquare/data/versionMap';
 import { createIllustration } from './createIllustration';
-export const SpotSquare = createIllustration('spotSquare', spotSquareVersionMap, spotSquareSvgEsmMap);
+
+// Loaded lazily — only fetched once a SpotSquare with applyTheme actually mounts — so the
+// generated per-name svgEsmMap never lands in the static import graph of consumers that don't
+// use theming.
+const loadSpotSquareSvgEsmMap = () => import('@coinbase/cds-illustrations/__generated__/spotSquare/data/svgEsmMap').then(mod => mod.default);
+export const SpotSquare = createIllustration('spotSquare', spotSquareVersionMap, loadSpotSquareSvgEsmMap);

package/esm/illustrations/createIllustration.js

@@ -13,6 +13,14 @@ const STATIC_ASSETS_CDN = 'https://static-assets.coinbase.com/ui-infra/illustrat
  * any bundler (Vite, webpack, esbuild) can code-split without CORS or bare-specifier issues.
  */
 
+/**
+ * A loader for a variant's full svgEsmMap module, or an already-resolved map (for callers that
+ * still import it eagerly). Accepting a loader lets `createIllustration` defer the entire
+ * per-name map — not just the SVG bodies it points to — out of the static import graph of every
+ * consumer, since the map is only ever read inside a post-mount `useEffect` when `applyTheme` is
+ * set.
+ */
+
 export function createIllustration(variant, versionMap, svgEsmConfig) {
   const defaultSize = getDefaultSizeObjectForIllustration(variant);
   const Illustration = /*#__PURE__*/memo(function Illustration(_ref) {
@@ -34,12 +42,18 @@ export function createIllustration(variant, versionMap, svgEsmConfig) {
     // null = not yet loaded (or load failed), string = loaded inline SVG
     const [svgMarkup, setSvgMarkup] = useState(null);
     useEffect(() => {
-      var _svgEsmConfig$name;
       let cancelled = false;
-      const themeableLoader = svgEsmConfig === null || svgEsmConfig === void 0 || (_svgEsmConfig$name = svgEsmConfig[name]) === null || _svgEsmConfig$name === void 0 ? void 0 : _svgEsmConfig$name.themeable;
-      if (applyTheme && themeableLoader) {
-        themeableLoader().then(svg => {
-          if (!cancelled) setSvgMarkup(svg);
+      if (applyTheme && svgEsmConfig) {
+        // svgEsmConfig may be the resolved map, or a loader for it — resolve either shape to the
+        // map before looking up this illustration's themeable loader.
+        const resolvedConfig = typeof svgEsmConfig === 'function' ? svgEsmConfig() : Promise.resolve(svgEsmConfig);
+        resolvedConfig.then(config => {
+          var _config$name;
+          if (cancelled) return undefined;
+          const themeableLoader = (_config$name = config[name]) === null || _config$name === void 0 ? void 0 : _config$name.themeable;
+          return themeableLoader === null || themeableLoader === void 0 ? void 0 : themeableLoader();
+        }).then(svg => {
+          if (!cancelled && svg) setSvgMarkup(svg);
         }).catch(err => {
           if (isDevelopment()) {
             console.error("Failed to load themeable illustration ".concat(name, ":"), err);

package/esm/system/FramerMotionProvider.js

@@ -1,10 +1,17 @@
 import React from 'react';
-import { domAnimation, LazyMotion } from 'framer-motion';
+import { LazyMotion } from 'framer-motion';
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Loads the `domAnimation` feature bundle asynchronously via `LazyMotion`'s loader form
+ * (https://motion.dev/docs/react-reduce-bundle-size), instead of statically importing it.
+ * This keeps framer-motion's animation features out of the static import graph of every
+ * ThemeProvider consumer, since ThemeProvider always mounts FramerMotionProvider.
+ */
+const loadDomAnimationFeatures = () => import('framer-motion').then(mod => mod.domAnimation);
 export const FramerMotionProvider = _ref => {
   let {
     children,
-    motionFeatures = domAnimation
+    motionFeatures = loadDomAnimationFeatures
   } = _ref;
   return /*#__PURE__*/_jsx(LazyMotion, {
     strict: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "9.28.0",
+  "version": "9.29.0",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -227,9 +227,9 @@
     "react-dom": "^18.0.0 || ~19.1.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^9.28.0",
-    "@coinbase/cds-icons": "^5.25.0",
-    "@coinbase/cds-illustrations": "^4.48.1",
+    "@coinbase/cds-common": "^9.29.0",
+    "@coinbase/cds-icons": "^5.26.0",
+    "@coinbase/cds-illustrations": "^4.49.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
     "@coinbase/cds-utils": "^2.3.5",
     "@floating-ui/react-dom": "^2.1.1",