@coinbase/cds-mobile 9.0.0-rc.2 → 9.0.0-rc.3

package/dts/themes/coinbaseTheme.d.ts

@@ -312,7 +312,7 @@ export declare const coinbaseTheme: {
     readonly bgNegativeWash: 'rgb(255,245,246)';
     readonly bgPositive: 'rgb(9,133,81)';
     readonly bgPositiveWash: 'rgb(245,255,251)';
-    readonly bgWarning: 'rgb(237,112,47)';
+    readonly bgWarning: 'rgb(207,71,14)';
     readonly bgWarningWash: 'rgb(255,250,245)';
     readonly currentColor: 'currentColor';
     readonly bgLine: 'rgba(91,97,110,0.2)';
@@ -357,7 +357,7 @@ export declare const coinbaseTheme: {
     readonly bgNegativeWash: 'rgb(51,0,4)';
     readonly bgPositive: 'rgb(39,173,117)';
     readonly bgPositiveWash: 'rgb(0,31,18)';
-    readonly bgWarning: 'rgb(199,158,0)';
+    readonly bgWarning: 'rgb(240,120,54)';
     readonly bgWarningWash: 'rgb(51,13,0)';
     readonly currentColor: 'currentColor';
     readonly bgLine: 'rgba(138,145,158,0.2)';
@@ -551,5 +551,37 @@ export declare const coinbaseTheme: {
       readonly shadowRadius: 24;
     };
   };
+  readonly lightIllustrationColor: {
+    readonly primary: 'rgb(0,82,255)';
+    readonly black: 'rgb(10,11,13)';
+    readonly white: 'rgb(255,255,255)';
+    readonly gray: 'rgb(206,210,219)';
+    readonly gray2: 'rgb(10, 11, 15)';
+    readonly gray3: 'rgb(206, 210, 220)';
+    readonly positive: 'rgb(60,194,138)';
+    readonly negative: 'rgb(225,57,71)';
+    readonly accent1: 'rgb(255, 210, 0)';
+    readonly accent2: 'rgb(93,226,248)';
+    readonly accent3: 'rgb(237,112,47)';
+    readonly accent4: 'rgb(115,162,255)';
+    readonly invert: 'rgb(10, 11, 14)';
+    readonly invert2: 'rgb(255, 255, 254)';
+  };
+  readonly darkIllustrationColor: {
+    readonly primary: 'rgb(87,139,250)';
+    readonly black: 'rgb(10,11,13)';
+    readonly white: 'rgb(255,255,255)';
+    readonly gray: 'rgb(70,75,85)';
+    readonly gray2: 'rgb(70,75,85)';
+    readonly gray3: 'rgb(255,255,255)';
+    readonly positive: 'rgb(68,194,141)';
+    readonly negative: 'rgb(240,97,109)';
+    readonly accent1: 'rgb(236, 208, 105)';
+    readonly accent2: 'rgb(69,217,245)';
+    readonly accent3: 'rgb(240,120,54)';
+    readonly accent4: 'rgb(132,170,253)';
+    readonly invert: 'rgb(255,255,255)';
+    readonly invert2: 'rgb(114,120,134)';
+  };
 };
 //# sourceMappingURL=coinbaseTheme.d.ts.map

package/dts/themes/coinbaseTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"coinbaseTheme.d.ts","sourceRoot":"","sources":["../../src/themes/coinbaseTheme.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,aAAa,CAAC;AAsS1C,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8QM,CAAC"}
+{"version":3,"file":"coinbaseTheme.d.ts","sourceRoot":"","sources":["../../src/themes/coinbaseTheme.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,aAAa,CAAC;AAsS1C,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8SM,CAAC"}

package/dts/themes/defaultHighContrastTheme.d.ts

@@ -551,5 +551,37 @@ export declare const defaultHighContrastTheme: {
       readonly shadowRadius: 24;
     };
   };
+  readonly lightIllustrationColor: {
+    readonly primary: 'rgb(0,82,255)';
+    readonly black: 'rgb(10,11,13)';
+    readonly white: 'rgb(255,255,255)';
+    readonly gray: 'rgb(206,210,219)';
+    readonly gray2: 'rgb(10, 11, 15)';
+    readonly gray3: 'rgb(206, 210, 220)';
+    readonly positive: 'rgb(60,194,138)';
+    readonly negative: 'rgb(225,57,71)';
+    readonly accent1: 'rgb(255, 210, 0)';
+    readonly accent2: 'rgb(93,226,248)';
+    readonly accent3: 'rgb(237,112,47)';
+    readonly accent4: 'rgb(115,162,255)';
+    readonly invert: 'rgb(10, 11, 14)';
+    readonly invert2: 'rgb(255, 255, 254)';
+  };
+  readonly darkIllustrationColor: {
+    readonly primary: 'rgb(87,139,250)';
+    readonly black: 'rgb(10,11,13)';
+    readonly white: 'rgb(255,255,255)';
+    readonly gray: 'rgb(70,75,85)';
+    readonly gray2: 'rgb(70,75,85)';
+    readonly gray3: 'rgb(255,255,255)';
+    readonly positive: 'rgb(68,194,141)';
+    readonly negative: 'rgb(240,97,109)';
+    readonly accent1: 'rgb(236, 208, 105)';
+    readonly accent2: 'rgb(69,217,245)';
+    readonly accent3: 'rgb(240,120,54)';
+    readonly accent4: 'rgb(143,178,255)';
+    readonly invert: 'rgb(255,255,255)';
+    readonly invert2: 'rgb(114,120,134)';
+  };
 };
 //# sourceMappingURL=defaultHighContrastTheme.d.ts.map

package/dts/themes/defaultHighContrastTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defaultHighContrastTheme.d.ts","sourceRoot":"","sources":["../../src/themes/defaultHighContrastTheme.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,0BAA0B,8BAA8B,CAAC;AAsStE,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8QL,CAAC"}
+{"version":3,"file":"defaultHighContrastTheme.d.ts","sourceRoot":"","sources":["../../src/themes/defaultHighContrastTheme.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,0BAA0B,8BAA8B,CAAC;AAsStE,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8SL,CAAC"}

package/dts/themes/defaultTheme.d.ts

@@ -312,7 +312,7 @@ export declare const defaultTheme: {
     readonly bgNegativeWash: 'rgb(255,245,246)';
     readonly bgPositive: 'rgb(9,133,81)';
     readonly bgPositiveWash: 'rgb(245,255,251)';
-    readonly bgWarning: 'rgb(237,112,47)';
+    readonly bgWarning: 'rgb(207,71,14)';
     readonly bgWarningWash: 'rgb(255,250,245)';
     readonly currentColor: 'currentColor';
     readonly bgLine: 'rgba(91,97,110,0.2)';
@@ -357,7 +357,7 @@ export declare const defaultTheme: {
     readonly bgNegativeWash: 'rgb(51,0,4)';
     readonly bgPositive: 'rgb(39,173,117)';
     readonly bgPositiveWash: 'rgb(0,31,18)';
-    readonly bgWarning: 'rgb(199,158,0)';
+    readonly bgWarning: 'rgb(240,120,54)';
     readonly bgWarningWash: 'rgb(51,13,0)';
     readonly currentColor: 'currentColor';
     readonly bgLine: 'rgba(138,145,158,0.2)';
@@ -381,6 +381,38 @@ export declare const defaultTheme: {
     readonly accentBoldGray: 'rgb(193,198,207)';
     readonly transparent: 'rgba(10,11,13,0)';
   };
+  readonly lightIllustrationColor: {
+    readonly primary: 'rgb(0,82,255)';
+    readonly black: 'rgb(10,11,13)';
+    readonly white: 'rgb(255,255,255)';
+    readonly gray: 'rgb(206,210,219)';
+    readonly gray2: 'rgb(10, 11, 15)';
+    readonly gray3: 'rgb(206, 210, 220)';
+    readonly positive: 'rgb(60,194,138)';
+    readonly negative: 'rgb(225,57,71)';
+    readonly accent1: 'rgb(255, 210, 0)';
+    readonly accent2: 'rgb(93,226,248)';
+    readonly accent3: 'rgb(237,112,47)';
+    readonly accent4: 'rgb(115,162,255)';
+    readonly invert: 'rgb(10, 11, 14)';
+    readonly invert2: 'rgb(255, 255, 254)';
+  };
+  readonly darkIllustrationColor: {
+    readonly primary: 'rgb(87,139,250)';
+    readonly black: 'rgb(10,11,13)';
+    readonly white: 'rgb(255,255,255)';
+    readonly gray: 'rgb(70,75,85)';
+    readonly gray2: 'rgb(70,75,85)';
+    readonly gray3: 'rgb(255,255,255)';
+    readonly positive: 'rgb(68,194,141)';
+    readonly negative: 'rgb(240,97,109)';
+    readonly accent1: 'rgb(236, 208, 105)';
+    readonly accent2: 'rgb(69,217,245)';
+    readonly accent3: 'rgb(240,120,54)';
+    readonly accent4: 'rgb(132,170,253)';
+    readonly invert: 'rgb(255,255,255)';
+    readonly invert2: 'rgb(114,120,134)';
+  };
   readonly space: {
     readonly '0': 0;
     readonly '0.25': 2;

package/dts/themes/defaultTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../src/themes/defaultTheme.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,gBAAgB,CAAC;AAsS5C,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8QO,CAAC"}
+{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../src/themes/defaultTheme.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,gBAAgB,CAAC;AAsS5C,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8SO,CAAC"}

package/dts/utils/convertThemedSvgToHex.d.ts

@@ -0,0 +1,6 @@
+import type { ThemeVars } from '@coinbase/cds-common/core/theme';
+export declare const convertThemedSvgToHex: (
+  xml: string,
+  illustrationPalette: { [key in ThemeVars.IllustrationColor]: string },
+) => string;
+//# sourceMappingURL=convertThemedSvgToHex.d.ts.map

package/dts/utils/convertThemedSvgToHex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"convertThemedSvgToHex.d.ts","sourceRoot":"","sources":["../../src/utils/convertThemedSvgToHex.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,eAAO,MAAM,qBAAqB,GAChC,KAAK,MAAM,EACX,qBAAqB,GAAG,GAAG,IAAI,SAAS,CAAC,iBAAiB,GAAG,MAAM,GAAE,WAStE,CAAC"}

package/dts/utils/testHelpers.d.ts

@@ -333,7 +333,7 @@ export declare const theme: {
     readonly bgNegativeWash: 'rgb(255,245,246)';
     readonly bgPositive: 'rgb(9,133,81)';
     readonly bgPositiveWash: 'rgb(245,255,251)';
-    readonly bgWarning: 'rgb(237,112,47)';
+    readonly bgWarning: 'rgb(207,71,14)';
     readonly bgWarningWash: 'rgb(255,250,245)';
     readonly currentColor: 'currentColor';
     readonly bgLine: 'rgba(91,97,110,0.2)';
@@ -378,7 +378,7 @@ export declare const theme: {
     readonly bgNegativeWash: 'rgb(51,0,4)';
     readonly bgPositive: 'rgb(39,173,117)';
     readonly bgPositiveWash: 'rgb(0,31,18)';
-    readonly bgWarning: 'rgb(199,158,0)';
+    readonly bgWarning: 'rgb(240,120,54)';
     readonly bgWarningWash: 'rgb(51,13,0)';
     readonly currentColor: 'currentColor';
     readonly bgLine: 'rgba(138,145,158,0.2)';
@@ -402,6 +402,38 @@ export declare const theme: {
     readonly accentBoldGray: 'rgb(193,198,207)';
     readonly transparent: 'rgba(10,11,13,0)';
   };
+  readonly lightIllustrationColor: {
+    readonly primary: 'rgb(0,82,255)';
+    readonly black: 'rgb(10,11,13)';
+    readonly white: 'rgb(255,255,255)';
+    readonly gray: 'rgb(206,210,219)';
+    readonly gray2: 'rgb(10, 11, 15)';
+    readonly gray3: 'rgb(206, 210, 220)';
+    readonly positive: 'rgb(60,194,138)';
+    readonly negative: 'rgb(225,57,71)';
+    readonly accent1: 'rgb(255, 210, 0)';
+    readonly accent2: 'rgb(93,226,248)';
+    readonly accent3: 'rgb(237,112,47)';
+    readonly accent4: 'rgb(115,162,255)';
+    readonly invert: 'rgb(10, 11, 14)';
+    readonly invert2: 'rgb(255, 255, 254)';
+  };
+  readonly darkIllustrationColor: {
+    readonly primary: 'rgb(87,139,250)';
+    readonly black: 'rgb(10,11,13)';
+    readonly white: 'rgb(255,255,255)';
+    readonly gray: 'rgb(70,75,85)';
+    readonly gray2: 'rgb(70,75,85)';
+    readonly gray3: 'rgb(255,255,255)';
+    readonly positive: 'rgb(68,194,141)';
+    readonly negative: 'rgb(240,97,109)';
+    readonly accent1: 'rgb(236, 208, 105)';
+    readonly accent2: 'rgb(69,217,245)';
+    readonly accent3: 'rgb(240,120,54)';
+    readonly accent4: 'rgb(132,170,253)';
+    readonly invert: 'rgb(255,255,255)';
+    readonly invert2: 'rgb(114,120,134)';
+  };
   readonly space: {
     readonly '0': 0;
     readonly '0.25': 2;

package/dts/utils/testHelpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"testHelpers.d.ts","sourceRoot":"","sources":["../../src/utils/testHelpers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAEnE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAIjD,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;CAG7B,CAAC;AAEF,KAAK,yBAAyB,GAAG;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,iBAAiB,CAAC,EAAE,WAAW,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAe,CAAC;AAElC,eAAO,MAAM,oBAAoB,GAAI,yCAIlC,yBAAyB,4CAM3B,CAAC;AAEF,wBAAgB,YAAY,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAK3E;AAED,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,OAAO,EACb,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,OAAO,GACrD,OAAO,CAkBT"}
+{"version":3,"file":"testHelpers.d.ts","sourceRoot":"","sources":["../../src/utils/testHelpers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAEnE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAIjD,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;CAG7B,CAAC;AAEF,KAAK,yBAAyB,GAAG;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,iBAAiB,CAAC,EAAE,WAAW,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAe,CAAC;AAElC,eAAO,MAAM,oBAAoB,GAAI,yCAIlC,yBAAyB,4CAM3B,CAAC;AAEF,wBAAgB,YAAY,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAK3E;AAED,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,OAAO,EACb,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,OAAO,GACrD,OAAO,CAkBT"}

package/dts/visualizations/chart/PeriodSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PeriodSelector.d.ts","sourceRoot":"","sources":["../../../src/visualizations/chart/PeriodSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EAAc,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIhE,OAAO,EAEL,KAAK,kBAAkB,EAEvB,KAAK,wBAAwB,EAC9B,MAAM,YAAY,CAAC;AAGpB,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAG5D,eAAO,MAAM,6BAA6B,GAAI,wDAK3C,wBAAwB,wDAmD1B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,aAAa,GAAG;IAClD;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,CAAC;AAStD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;IAxBvB;;;OAGG;YACK,MAAM;IACd;;OAEG;cACO,OAAO;IACjB;;OAEG;YACK,GAAG;8BAyCZ,CAAC;AASF,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,CAAC;AAErD;;;GAGG;AACH,eAAO,MAAM,cAAc;;YAjHK,CAAC;WACH,CAAC;uBAG5B,CAAC;;6BAuIH,CAAC"}
+{"version":3,"file":"PeriodSelector.d.ts","sourceRoot":"","sources":["../../../src/visualizations/chart/PeriodSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EAAc,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIhE,OAAO,EAEL,KAAK,kBAAkB,EAEvB,KAAK,wBAAwB,EAC9B,MAAM,YAAY,CAAC;AAGpB,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAG5D,eAAO,MAAM,6BAA6B,GAAI,wDAK3C,wBAAwB,wDAmD1B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,aAAa,GAAG;IAClD;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,CAAC;AAStD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;IAxBvB;;;OAGG;YACK,MAAM;IACd;;OAEG;cACO,OAAO;IACjB;;OAEG;YACK,GAAG;8BAyCZ,CAAC;AAQF,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,CAAC;AAErD;;;GAGG;AACH,eAAO,MAAM,cAAc;;YAhHK,CAAC;WACH,CAAC;uBAG5B,CAAC;;6BAwIH,CAAC"}

package/esm/buttons/IconButton.js

@@ -1,4 +1,4 @@
-const _excluded = ["name", "active", "variant", "transparent", "compact", "background", "color", "borderColor", "iconSize", "borderWidth", "borderRadius", "feedback", "flush", "padding", "loading", "progressCircleSize", "accessibilityHint", "accessibilityLabel"];
+const _excluded = ["name", "active", "variant", "transparent", "compact", "background", "color", "borderColor", "iconSize", "borderWidth", "borderRadius", "feedback", "flush", "padding", "loading", "progressCircleSize", "style", "styles", "accessibilityHint", "accessibilityLabel"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import { forwardRef, memo } from 'react';
@@ -29,6 +29,7 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
       padding = compact ? 1.5 : 2,
       loading,
       progressCircleSize,
+      styles,
       accessibilityHint,
       accessibilityLabel
     } = mergedProps,
@@ -58,12 +59,14 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
     marginEnd: flush === 'end' ? flushMargin : undefined,
     marginStart: flush === 'start' ? flushMargin : undefined,
     padding: padding,
+    style: styles == null ? void 0 : styles.root,
     transparentWhileInactive: transparent
   }, props, {
     children: loading ? /*#__PURE__*/_jsx(ProgressCircle, {
       indeterminate: true,
       color: colorValue,
       size: progressCircleSize != null ? progressCircleSize : iconSizeValue,
+      style: styles == null ? void 0 : styles.progressCircle,
       testID: props.testID ? props.testID + "-progress-circle" : undefined,
       weight: "thin"
     }) :
@@ -73,7 +76,10 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
       active: active,
       color: colorValue,
       name: name,
-      size: iconSize
+      size: iconSize,
+      styles: {
+        icon: styles == null ? void 0 : styles.icon
+      }
     })
   }));
 }));

package/esm/buttons/__stories__/IconButton.stories.js

@@ -177,6 +177,71 @@ const IconButtonScreen = () => {
           })]
         })
       })
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "Icon Glyph Styles",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        children: [/*#__PURE__*/_jsxs(Box, {
+          alignItems: "center",
+          flexDirection: "row",
+          gap: 2,
+          children: [/*#__PURE__*/_jsx(IconButton, {
+            accessibilityLabel: "Custom color via styles.icon",
+            name: iconName,
+            styles: {
+              icon: {
+                color: 'dodgerblue'
+              }
+            }
+          }), /*#__PURE__*/_jsx(Text, {
+            font: "body",
+            children: "Custom color via styles.icon"
+          })]
+        }), /*#__PURE__*/_jsxs(Box, {
+          alignItems: "center",
+          flexDirection: "row",
+          gap: 2,
+          children: [/*#__PURE__*/_jsx(IconButton, {
+            accessibilityLabel: "Rotated icon via styles.icon",
+            name: iconName,
+            styles: {
+              icon: {
+                transform: [{
+                  rotate: '45deg'
+                }]
+              }
+            }
+          }), /*#__PURE__*/_jsx(Text, {
+            font: "body",
+            children: "Rotated icon via styles.icon"
+          })]
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "Progress Circle Styles",
+      children: /*#__PURE__*/_jsx(VStack, {
+        gap: 2,
+        children: /*#__PURE__*/_jsxs(Box, {
+          alignItems: "center",
+          flexDirection: "row",
+          gap: 2,
+          children: [/*#__PURE__*/_jsx(IconButton, {
+            loading: true,
+            accessibilityLabel: "Reduced opacity progress circle",
+            name: iconName,
+            styles: {
+              progressCircle: {
+                opacity: 0.3
+              }
+            }
+          }), /*#__PURE__*/_jsx(Text, {
+            font: "body",
+            children: "Reduced opacity"
+          })]
+        })
+      })
     }), /*#__PURE__*/_jsx(Example, {
       inline: true,
       title: "Loading",

package/esm/controls/InputLabel.js

@@ -1,4 +1,4 @@
-const _excluded = ["color"];
+const _excluded = ["color", "font"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { memo } from 'react';
@@ -6,12 +6,13 @@ import { Text } from '../typography/Text';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const InputLabel = /*#__PURE__*/memo(function InputLabel(_ref) {
   let {
-      color
+      color = 'fg',
+      font = 'label1'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   return /*#__PURE__*/_jsx(Text, _extends({
     color: color,
-    font: "label1",
+    font: font,
     paddingY: 0.5
   }, props));
 });

package/esm/controls/TextInput.js

@@ -1,4 +1,4 @@
-const _excluded = ["label", "helperText", "variant", "testID", "testIDMap", "start", "end", "width", "disabled", "align", "font", "compact", "suffix", "accessibilityLabel", "borderRadius", "enableColorSurge", "helperTextErrorIconAccessibilityLabel", "bordered", "focusedBorderWidth", "labelVariant", "labelNode", "inputBackground"];
+const _excluded = ["label", "labelFont", "labelColor", "helperText", "variant", "testID", "testIDMap", "start", "end", "width", "disabled", "align", "font", "compact", "suffix", "accessibilityLabel", "borderRadius", "enableColorSurge", "helperTextErrorIconAccessibilityLabel", "bordered", "focusedBorderWidth", "labelVariant", "labelNode", "inputBackground"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { cloneElement, forwardRef, isValidElement, memo, useCallback, useMemo, useRef, useState } from 'react';
@@ -31,6 +31,8 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref)
   const mergedProps = useComponentConfig('TextInput', _props);
   const {
       label,
+      labelFont = 'label1',
+      labelColor = 'fg',
       helperText = '',
       variant = 'foregroundMuted',
       testID,
@@ -177,6 +179,8 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref)
         background: readOnlyInputBackground
       }, {
         children: labelNode ? labelNode : /*#__PURE__*/_jsx(InputLabel, _extends({
+          color: labelColor,
+          font: labelFont,
           testID: (_testIDMap$label = testIDMap == null ? void 0 : testIDMap.label) != null ? _testIDMap$label : ''
         }, labelVariant === 'inside' && {
           paddingTop: 0,
@@ -203,6 +207,8 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref)
         children: /*#__PURE__*/_jsxs(HStack, {
           paddingStart: compact && hasLabel ? 2 : undefined,
           children: [compact && (labelNode ? labelNode : !!label && /*#__PURE__*/_jsx(InputLabel, {
+            color: labelColor,
+            font: labelFont,
             children: label
           })), !!start && /*#__PURE__*/_jsx(TextInputFocusVariantContext.Provider, {
             value: focusedVariant,

package/esm/illustrations/__stories__/ThemedIllustrations.stories.js

@@ -0,0 +1,214 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import { useCallback, useState } from 'react';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { useTheme } from '../../hooks/useTheme';
+import { HStack, VStack } from '../../layout';
+import { ThemeProvider } from '../../system/ThemeProvider';
+import { SegmentedTabs } from '../../tabs/SegmentedTabs';
+import { defaultTheme } from '../../themes/defaultTheme';
+import { Text } from '../../typography/Text';
+import { HeroSquare } from '../HeroSquare';
+import { Pictogram } from '../Pictogram';
+import { SpotIcon } from '../SpotIcon';
+import { SpotRectangle } from '../SpotRectangle';
+import { SpotSquare } from '../SpotSquare';
+import { ILLUSTRATION_THEME_TABS, ILLUSTRATION_THEMES } from './illustrationThemes';
+
+// ─── Illustration samples ────────────────────────────────────────────────────
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const HERO_SQUARE_SAMPLES = ['accessToAdvancedCharts', 'accountUnderReview', 'add2Fa', 'addBankAccount', 'addCreditCard'];
+const SPOT_SQUARE_SAMPLES = ['accessToAdvancedCharts', 'addCard', 'addEth', 'addMultipleCrypto', 'addPasswordProtection'];
+const PICTOGRAM_SAMPLES = ['accountsNavigation', 'accreditedInvestor', 'add', 'addCard', 'addPayment'];
+const SPOT_ICON_SAMPLES = ['advancedTradeProduct', 'arrowsUpDown', 'assetEmptyStateAa', 'assetEmptyStateAb', 'assetEmptyStateAc'];
+const SPOT_RECTANGLE_SAMPLES = ['accessToAdvancedCharts', 'addBank', 'addPhoneNumber', 'advancedTradeCharts', 'advancedTrading'];
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+const resolveTheme = key => key === 'default' ? defaultTheme : _extends({}, defaultTheme, ILLUSTRATION_THEMES[key]);
+
+// ─── Story ───────────────────────────────────────────────────────────────────
+
+const ThemedIllustrationsStory = () => {
+  var _activeTab$id;
+  const {
+    activeColorScheme
+  } = useTheme();
+  const [activeTab, setActiveTab] = useState(ILLUSTRATION_THEME_TABS[0]);
+  const handleChange = useCallback(tab => setActiveTab(tab), []);
+  const themeKey = (_activeTab$id = activeTab == null ? void 0 : activeTab.id) != null ? _activeTab$id : 'default';
+  const theme = resolveTheme(themeKey);
+  const garishTheme = resolveTheme('garish');
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "Side-by-side comparison",
+      children: /*#__PURE__*/_jsxs(HStack, {
+        gap: 4,
+        children: [/*#__PURE__*/_jsx(ThemeProvider, {
+          activeColorScheme: activeColorScheme,
+          theme: defaultTheme,
+          children: /*#__PURE__*/_jsxs(VStack, {
+            alignItems: "center",
+            gap: 2,
+            padding: 2,
+            style: {
+              flex: 1
+            },
+            children: [/*#__PURE__*/_jsx(Text, {
+              font: "label2",
+              children: "Default"
+            }), /*#__PURE__*/_jsx(HeroSquare, {
+              applyTheme: true,
+              name: "accessToAdvancedCharts",
+              scaleMultiplier: 0.35
+            }), /*#__PURE__*/_jsx(SpotSquare, {
+              applyTheme: true,
+              name: "accessToAdvancedCharts"
+            }), /*#__PURE__*/_jsx(Pictogram, {
+              applyTheme: true,
+              name: "add"
+            }), /*#__PURE__*/_jsx(SpotIcon, {
+              applyTheme: true,
+              name: "advancedTradeProduct"
+            })]
+          })
+        }), /*#__PURE__*/_jsx(ThemeProvider, {
+          activeColorScheme: activeColorScheme,
+          theme: garishTheme,
+          children: /*#__PURE__*/_jsxs(VStack, {
+            alignItems: "center",
+            gap: 2,
+            padding: 2,
+            style: {
+              flex: 1
+            },
+            children: [/*#__PURE__*/_jsx(Text, {
+              font: "label2",
+              children: "Garish"
+            }), /*#__PURE__*/_jsx(HeroSquare, {
+              applyTheme: true,
+              name: "accessToAdvancedCharts",
+              scaleMultiplier: 0.35
+            }), /*#__PURE__*/_jsx(SpotSquare, {
+              applyTheme: true,
+              name: "accessToAdvancedCharts"
+            }), /*#__PURE__*/_jsx(Pictogram, {
+              applyTheme: true,
+              name: "add"
+            }), /*#__PURE__*/_jsx(SpotIcon, {
+              applyTheme: true,
+              name: "advancedTradeProduct"
+            })]
+          })
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Theme",
+      children: /*#__PURE__*/_jsx(SegmentedTabs, {
+        accessibilityLabel: "Select illustration theme",
+        activeTab: activeTab,
+        onChange: handleChange,
+        tabs: ILLUSTRATION_THEME_TABS
+      })
+    }), /*#__PURE__*/_jsxs(ThemeProvider, {
+      activeColorScheme: activeColorScheme,
+      theme: theme,
+      children: [/*#__PURE__*/_jsx(Example, {
+        title: "HeroSquare",
+        children: /*#__PURE__*/_jsx(HStack, {
+          flexWrap: "wrap",
+          gap: 2,
+          children: HERO_SQUARE_SAMPLES.map(name => /*#__PURE__*/_jsxs(VStack, {
+            alignItems: "center",
+            gap: 0,
+            children: [/*#__PURE__*/_jsx(HeroSquare, {
+              applyTheme: true,
+              name: name,
+              scaleMultiplier: 0.3
+            }), /*#__PURE__*/_jsx(Text, {
+              color: "fgMuted",
+              font: "legal",
+              numberOfLines: 1,
+              children: name
+            })]
+          }, name))
+        })
+      }), /*#__PURE__*/_jsx(Example, {
+        title: "SpotSquare",
+        children: /*#__PURE__*/_jsx(HStack, {
+          flexWrap: "wrap",
+          gap: 2,
+          children: SPOT_SQUARE_SAMPLES.map(name => /*#__PURE__*/_jsxs(VStack, {
+            alignItems: "center",
+            gap: 0,
+            children: [/*#__PURE__*/_jsx(SpotSquare, {
+              applyTheme: true,
+              name: name
+            }), /*#__PURE__*/_jsx(Text, {
+              color: "fgMuted",
+              font: "legal",
+              numberOfLines: 1,
+              children: name
+            })]
+          }, name))
+        })
+      }), /*#__PURE__*/_jsx(Example, {
+        title: "Pictogram",
+        children: /*#__PURE__*/_jsx(HStack, {
+          flexWrap: "wrap",
+          gap: 2,
+          children: PICTOGRAM_SAMPLES.map(name => /*#__PURE__*/_jsxs(VStack, {
+            alignItems: "center",
+            gap: 0,
+            children: [/*#__PURE__*/_jsx(Pictogram, {
+              applyTheme: true,
+              name: name
+            }), /*#__PURE__*/_jsx(Text, {
+              color: "fgMuted",
+              font: "legal",
+              numberOfLines: 1,
+              children: name
+            })]
+          }, name))
+        })
+      }), /*#__PURE__*/_jsx(Example, {
+        title: "SpotIcon",
+        children: /*#__PURE__*/_jsx(HStack, {
+          flexWrap: "wrap",
+          gap: 2,
+          children: SPOT_ICON_SAMPLES.map(name => /*#__PURE__*/_jsxs(VStack, {
+            alignItems: "center",
+            gap: 0,
+            children: [/*#__PURE__*/_jsx(SpotIcon, {
+              applyTheme: true,
+              name: name
+            }), /*#__PURE__*/_jsx(Text, {
+              color: "fgMuted",
+              font: "legal",
+              numberOfLines: 1,
+              children: name
+            })]
+          }, name))
+        })
+      }), /*#__PURE__*/_jsx(Example, {
+        title: "SpotRectangle",
+        children: /*#__PURE__*/_jsx(VStack, {
+          gap: 2,
+          children: SPOT_RECTANGLE_SAMPLES.map(name => /*#__PURE__*/_jsxs(VStack, {
+            gap: 0,
+            children: [/*#__PURE__*/_jsx(SpotRectangle, {
+              applyTheme: true,
+              name: name,
+              scaleMultiplier: 0.5
+            }), /*#__PURE__*/_jsx(Text, {
+              color: "fgMuted",
+              font: "legal",
+              numberOfLines: 1,
+              children: name
+            })]
+          }, name))
+        })
+      })]
+    })]
+  });
+};
+export default ThemedIllustrationsStory;