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

package/dts/themes/coinbaseDenseTheme.d.ts

@@ -430,7 +430,7 @@ export declare const coinbaseDenseTheme: {
     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)';
@@ -475,7 +475,7 @@ export declare const coinbaseDenseTheme: {
     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)';
@@ -555,5 +555,37 @@ export declare const coinbaseDenseTheme: {
       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=coinbaseDenseTheme.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"coinbaseDenseTheme.d.ts","sourceRoot":"","sources":["../../src/themes/coinbaseDenseTheme.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,oBAAoB,mBAAmB,CAAC;AAErD;;;GAGG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqHC,CAAC"}
+{"version":3,"file":"coinbaseDenseTheme.d.ts","sourceRoot":"","sources":["../../src/themes/coinbaseDenseTheme.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,oBAAoB,mBAAmB,CAAC;AAErD;;;GAGG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqHC,CAAC"}

package/dts/themes/coinbaseHighContrastTheme.d.ts

@@ -551,5 +551,37 @@ export declare const coinbaseHighContrastTheme: {
       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=coinbaseHighContrastTheme.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"coinbaseHighContrastTheme.d.ts","sourceRoot":"","sources":["../../src/themes/coinbaseHighContrastTheme.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,2BAA2B,2BAA2B,CAAC;AAsSpE,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8QN,CAAC"}
+{"version":3,"file":"coinbaseHighContrastTheme.d.ts","sourceRoot":"","sources":["../../src/themes/coinbaseHighContrastTheme.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,2BAA2B,2BAA2B,CAAC;AAsSpE,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8SN,CAAC"}

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/dts/visualizations/chart/gradient/Gradient.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Gradient.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/gradient/Gradient.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAyD,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAClG,OAAO,EAIL,KAAK,kBAAkB,EACxB,MAAM,mBAAmB,CAAC;AAE3B,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,kBAAkB,CAAC;IAC7B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAAG;IAC9C;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ,qDA6IpB,CAAC"}
+{"version":3,"file":"Gradient.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/gradient/Gradient.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAyD,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAClG,OAAO,EAIL,KAAK,kBAAkB,EACxB,MAAM,mBAAmB,CAAC;AAE3B,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,kBAAkB,CAAC;IAC7B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAAG;IAC9C;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ,qDAyJpB,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", "alignSelf", "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';
@@ -15,6 +15,8 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
       name,
       active,
       variant = 'secondary',
+      alignSelf = 'flex-start',
+      // prevents stretching when placed in a flex container
       transparent,
       compact = true,
       background,
@@ -29,6 +31,7 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
       padding = compact ? 1.5 : 2,
       loading,
       progressCircleSize,
+      styles,
       accessibilityHint,
       accessibilityLabel
     } = mergedProps,
@@ -46,7 +49,7 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
     accessibilityHint: accessibilityHint,
     accessibilityLabel: loading ? (accessibilityLabel != null ? accessibilityLabel : '') + ", loading" : accessibilityLabel,
     alignItems: "center",
-    alignSelf: "flex-start",
+    alignSelf: alignSelf,
     background: backgroundValue,
     borderColor: borderColorValue,
     borderRadius: borderRadius,
@@ -58,12 +61,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 +78,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/NativeInput.js

@@ -1,4 +1,4 @@
-const _excluded = ["containerSpacing", "testID", "align", "disabled", "textAlign", "font", "accessibilityLabel", "compact", "style"];
+const _excluded = ["containerSpacing", "testID", "align", "disabled", "textAlign", "font", "accessibilityLabel", "compact", "selectionColor", "style"];
 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, { forwardRef, memo, useMemo } from 'react';
@@ -16,6 +16,7 @@ export const NativeInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
       font = 'body',
       accessibilityLabel,
       compact,
+      selectionColor = 'fgPrimary',
       style
     } = _ref,
     editableInputAddonProps = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -57,6 +58,7 @@ export const NativeInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
     editable: !disabled,
     keyboardAppearance: theme.activeColorScheme,
     placeholderTextColor: theme.color.fgMuted,
+    selectionColor: theme.color[selectionColor],
     style: inputRootStyles,
     testID: testID,
     textAlign: textAlign !== 'unset' ? textAlign : undefined

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';
@@ -27,10 +27,12 @@ const variantColorMap = {
   secondary: 'bgSecondary'
 };
 export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
-  var _testIDMap$end, _testIDMap$helperText, _testIDMap$label;
+  var _testIDMap$end, _testIDMap$helperText, _testIDMap$label, _testIDMap$label2;
   const mergedProps = useComponentConfig('TextInput', _props);
   const {
       label,
+      labelFont = 'label1',
+      labelColor = 'fg',
       helperText = '',
       variant = 'foregroundMuted',
       testID,
@@ -164,27 +166,33 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref)
       containerSpacing: containerSpacing,
       disabled: disabled,
       font: font,
+      selectionColor: variantColorMap[focusedVariant],
       testID: testID
     }, editableInputAddonProps)),
     labelNode: !compact && (labelNode && labelVariant !== 'inside' ? labelNode : hasLabel && /*#__PURE__*/_jsx(Pressable, {
       accessibilityRole: "button",
       disabled: disabled,
       onPress: handleNodePress,
-      children: /*#__PURE__*/_jsx(Box, _extends({}, labelVariant === 'inside' && {
-        paddingTop: 1,
+      children: labelVariant === 'inside' && labelNode ? /*#__PURE__*/_jsx(Box, {
+        background: readOnlyInputBackground,
+        paddingEnd: 2,
         paddingStart: start ? 0.5 : 2,
+        children: labelNode
+      }) : labelVariant === 'inside' ? /*#__PURE__*/_jsx(InputLabel, {
+        background: readOnlyInputBackground,
+        color: labelColor,
+        font: labelFont,
         paddingEnd: 2,
-        background: readOnlyInputBackground
-      }, {
-        children: labelNode ? labelNode : /*#__PURE__*/_jsx(InputLabel, _extends({
-          testID: (_testIDMap$label = testIDMap == null ? void 0 : testIDMap.label) != null ? _testIDMap$label : ''
-        }, labelVariant === 'inside' && {
-          paddingTop: 0,
-          paddingBottom: 0
-        }, {
-          children: label
-        }))
-      }))
+        paddingStart: start ? 0.5 : 2,
+        paddingY: 0,
+        testID: (_testIDMap$label = testIDMap == null ? void 0 : testIDMap.label) != null ? _testIDMap$label : '',
+        children: label
+      }) : /*#__PURE__*/_jsx(InputLabel, {
+        color: labelColor,
+        font: labelFont,
+        testID: (_testIDMap$label2 = testIDMap == null ? void 0 : testIDMap.label) != null ? _testIDMap$label2 : '',
+        children: label
+      })
     })),
     labelVariant: labelVariant,
     startNode: (compact && hasLabel || !!start) && /*#__PURE__*/_jsx(Box, {
@@ -203,6 +211,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,