@coinbase/cds-web 8.30.0 → 8.31.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dts/controls/InputStack.d.ts +5 -0
  3. package/dts/controls/InputStack.d.ts.map +1 -1
  4. package/dts/controls/TextInput.d.ts +2 -0
  5. package/dts/controls/TextInput.d.ts.map +1 -1
  6. package/dts/navigation/Sidebar.d.ts +42 -0
  7. package/dts/navigation/Sidebar.d.ts.map +1 -1
  8. package/esm/controls/InputStack.js +4 -3
  9. package/esm/controls/TextInput.js +8 -6
  10. package/esm/navigation/Sidebar.js +15 -3
  11. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
8
8
 
9
9
  <!-- template-start -->
10
10
 
11
+ ## 8.31.0 (12/12/2025 PST)
12
+
13
+ #### 🚀 Updates
14
+
15
+ - Add inputBackground prop to InputStack and TextInput.
16
+
17
+ ## 8.30.1 (12/12/2025 PST)
18
+
19
+ #### 🐞 Fixes
20
+
21
+ - Add classNames and styles to sidebar. [[#239](https://github.com/coinbase/cds/pull/239)]
22
+
11
23
  ## 8.30.0 (12/12/2025 PST)
12
24
 
13
25
  #### 🚀 Updates
package/dts/controls/InputStack.d.ts CHANGED
@@ -67,6 +67,11 @@ export type InputStackBaseProps = SharedProps &
67
67
  * @default 'outside'
68
68
  */
69
69
  labelVariant?: 'inside' | 'outside';
70
+ /**
71
+ * Background color of the input.
72
+ * @default 'bg'
73
+ */
74
+ inputBackground?: ThemeVars.Color;
70
75
  };
71
76
  export type InputStackProps = Omit<
72
77
  BoxProps<BoxDefaultElement>,
package/dts/controls/InputStack.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"InputStack.d.ts","sourceRoot":"","sources":["../../src/controls/InputStack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAIjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2CAA2C,CAAC;AAC9E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAI1E,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,iBAAiB,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAIzF,OAAO,EAAgB,KAAK,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAyDlF,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAC3C,IAAI,CAAC,qBAAqB,EAAE,aAAa,CAAC,GAAG;IAC3C;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;IACpC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;;SAGK;IACL,KAAK,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAC9B;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yEAAyE;IACzE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,uHAAuH;IACvH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,sEAAsE;IACtE,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,mHAAmH;IACnH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iCAAiC;IACjC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,iGAAiG;IACjG,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,qDAAqD;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,wEAAwE;IACxE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAC;IAC5C;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CACrC,CAAC;AAEJ,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,QAAQ,CAAC,iBAAiB,CAAC,EAC3B,OAAO,GAAG,QAAQ,GAAG,cAAc,CACpC,GACC,mBAAmB,CAAC;AAEtB,eAAO,MAAM,UAAU,6HAgItB,CAAC"}
1
+ {"version":3,"file":"InputStack.d.ts","sourceRoot":"","sources":["../../src/controls/InputStack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAIjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2CAA2C,CAAC;AAC9E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAI1E,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,iBAAiB,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAIzF,OAAO,EAAgB,KAAK,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAyDlF,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAC3C,IAAI,CAAC,qBAAqB,EAAE,aAAa,CAAC,GAAG;IAC3C;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;IACpC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;;SAGK;IACL,KAAK,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAC9B;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yEAAyE;IACzE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,uHAAuH;IACvH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,sEAAsE;IACtE,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,mHAAmH;IACnH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iCAAiC;IACjC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,iGAAiG;IACjG,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,qDAAqD;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,wEAAwE;IACxE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAC;IAC5C;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACpC;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CACnC,CAAC;AAEJ,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,QAAQ,CAAC,iBAAiB,CAAC,EAC3B,OAAO,GAAG,QAAQ,GAAG,cAAc,CACpC,GACC,mBAAmB,CAAC;AAEtB,eAAO,MAAM,UAAU,6HAiItB,CAAC"}
package/dts/controls/TextInput.d.ts CHANGED
@@ -70,6 +70,7 @@ export type TextInputBaseProps = {
70
70
  | 'borderRadius'
71
71
  | 'enableColorSurge'
72
72
  | 'labelVariant'
73
+ | 'inputBackground'
73
74
  > &
74
75
  Omit<React.InputHTMLAttributes<HTMLInputElement>, 'width' | 'className'>;
75
76
  export type TextInputProps = TextInputBaseProps;
@@ -141,6 +142,7 @@ export declare const TextInput: React.MemoExoticComponent<
141
142
  | 'variant'
142
143
  | 'enableColorSurge'
143
144
  | 'labelVariant'
145
+ | 'inputBackground'
144
146
  > &
145
147
  Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className' | 'width'> &
146
148
  React.RefAttributes<HTMLInputElement>
package/dts/controls/TextInput.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/controls/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAgB,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAChG,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAU/E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AA8CxD,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC;;;;;;;SAOK;IACL,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC/B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uHAAuH;IACvH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,mHAAmH;IACnH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF;;;OAGG;IACH,qCAAqC,CAAC,EAAE,MAAM,CAAC;IAC/C;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,GAAG,WAAW,GACb,IAAI,CACF,wBAAwB,EACxB,oBAAoB,GAAG,yBAAyB,GAAG,mBAAmB,CACvE,GACD,gBAAgB,GAChB,IAAI,CACF,mBAAmB,EACjB,QAAQ,GACR,SAAS,GACT,OAAO,GACP,UAAU,GACV,cAAc,GACd,kBAAkB,GAClB,cAAc,CACjB,GACD,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC,CAAC;AAE3E,MAAM,MAAM,cAAc,GAAG,kBAAkB,CAAC;AAkBhD,eAAO,MAAM,SAAS;IAtFpB;;OAEG;cACO,KAAK,CAAC,iBAAiB;IACjC;;;;;;;SAOK;gBACO,KAAK,CAAC,YAAY;IAC9B;;;OAGG;eACQ,OAAO;IAClB;;;OAGG;YACK,cAAc,CAAC,OAAO,CAAC;IAC/B;;OAEG;aACM,MAAM;IACf,uHAAuH;YAC/G,KAAK,CAAC,SAAS;IACvB,mHAAmH;UAC7G,KAAK,CAAC,SAAS;IACrB;;OAEG;gBACS;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB;IACD;;;OAGG;4CACqC,MAAM;IAC9C;;;OAGG;gBACS,KAAK,CAAC,SAAS;gYAsQ5B,CAAC"}
1
+ {"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/controls/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAgB,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAChG,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAU/E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AA8CxD,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC;;;;;;;SAOK;IACL,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC/B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uHAAuH;IACvH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,mHAAmH;IACnH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF;;;OAGG;IACH,qCAAqC,CAAC,EAAE,MAAM,CAAC;IAC/C;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,GAAG,WAAW,GACb,IAAI,CACF,wBAAwB,EACxB,oBAAoB,GAAG,yBAAyB,GAAG,mBAAmB,CACvE,GACD,gBAAgB,GAChB,IAAI,CACF,mBAAmB,EACjB,QAAQ,GACR,SAAS,GACT,OAAO,GACP,UAAU,GACV,cAAc,GACd,kBAAkB,GAClB,cAAc,GACd,iBAAiB,CACpB,GACD,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC,CAAC;AAE3E,MAAM,MAAM,cAAc,GAAG,kBAAkB,CAAC;AAkBhD,eAAO,MAAM,SAAS;IAvFpB;;OAEG;cACO,KAAK,CAAC,iBAAiB;IACjC;;;;;;;SAOK;gBACO,KAAK,CAAC,YAAY;IAC9B;;;OAGG;eACQ,OAAO;IAClB;;;OAGG;YACK,cAAc,CAAC,OAAO,CAAC;IAC/B;;OAEG;aACM,MAAM;IACf,uHAAuH;YAC/G,KAAK,CAAC,SAAS;IACvB,mHAAmH;UAC7G,KAAK,CAAC,SAAS;IACrB;;OAEG;gBACS;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB;IACD;;;OAGG;4CACqC,MAAM;IAC9C;;;OAGG;gBACS,KAAK,CAAC,SAAS;oZAyQ5B,CAAC"}
package/dts/navigation/Sidebar.d.ts CHANGED
@@ -30,6 +30,48 @@ export type SidebarBaseProps = BoxBaseProps & {
30
30
  */
31
31
  renderEnd?: (isCollapsed: boolean) => React.ReactNode;
32
32
  variant?: 'default' | 'condensed';
33
+ /**
34
+ * Custom class names for the sidebar components.
35
+ */
36
+ classNames?: {
37
+ /**
38
+ * Custom class name for the root sidebar container.
39
+ */
40
+ root?: string;
41
+ /**
42
+ * Custom class name for the logo container.
43
+ */
44
+ logo?: string;
45
+ /**
46
+ * Custom class name for the content container (children list).
47
+ */
48
+ content?: string;
49
+ /**
50
+ * Custom class name for the end container (renderEnd).
51
+ */
52
+ end?: string;
53
+ };
54
+ /**
55
+ * Custom styles for the sidebar components.
56
+ */
57
+ styles?: {
58
+ /**
59
+ * Custom style for the root sidebar container.
60
+ */
61
+ root?: React.CSSProperties;
62
+ /**
63
+ * Custom style for the logo container.
64
+ */
65
+ logo?: React.CSSProperties;
66
+ /**
67
+ * Custom style for the content container (children list).
68
+ */
69
+ content?: React.CSSProperties;
70
+ /**
71
+ * Custom style for the end container (renderEnd).
72
+ */
73
+ end?: React.CSSProperties;
74
+ };
33
75
  };
34
76
  export type SidebarProps = SidebarBaseProps & Omit<BoxProps<SidebarDefaultElement>, 'children'>;
35
77
  export declare const Sidebar: React.FC<SidebarProps>;
package/dts/navigation/Sidebar.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../src/navigation/Sidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAKvD,OAAO,EAAO,KAAK,YAAY,EAAE,KAAK,QAAQ,EAAU,MAAM,WAAW,CAAC;AAK1E,eAAO,MAAM,qBAAqB,QAAQ,CAAC;AAE3C,MAAM,MAAM,qBAAqB,GAAG,OAAO,qBAAqB,CAAC;AAgCjE,MAAM,MAAM,gBAAgB,GAAG,YAAY,GAAG;IAC5C;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,CAAC,CAAC,WAAW,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACxE;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IAC5B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,SAAS,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;IACtD,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,gBAAgB,GAAG,IAAI,CAAC,QAAQ,CAAC,qBAAqB,CAAC,EAAE,UAAU,CAAC,CAAC;AAEhG,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAoG1C,CAAC"}
1
+ {"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../src/navigation/Sidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAMvD,OAAO,EAAO,KAAK,YAAY,EAAE,KAAK,QAAQ,EAAU,MAAM,WAAW,CAAC;AAK1E,eAAO,MAAM,qBAAqB,QAAQ,CAAC;AAE3C,MAAM,MAAM,qBAAqB,GAAG,OAAO,qBAAqB,CAAC;AAgCjE,MAAM,MAAM,gBAAgB,GAAG,YAAY,GAAG;IAC5C;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,CAAC,CAAC,WAAW,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACxE;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IAC5B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,SAAS,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;IACtD,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAClC;;OAEG;IACH,UAAU,CAAC,EAAE;QACX;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB;;WAEG;QACH,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;IACF;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B;;WAEG;QACH,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC9B;;WAEG;QACH,GAAG,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC3B,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,gBAAgB,GAAG,IAAI,CAAC,QAAQ,CAAC,qBAAqB,CAAC,EAAE,UAAU,CAAC,CAAC;AAEhG,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAkH1C,CAAC"}
package/esm/controls/InputStack.js CHANGED
@@ -1,4 +1,4 @@
1
- const _excluded = ["width", "prependNode", "endNode", "appendNode", "startNode", "disabled", "inputNode", "helperTextNode", "borderWidth", "variant", "labelNode", "testID", "focused", "borderRadius", "height", "disableFocusedStyle", "enableColorSurge", "labelVariant", "blendStyles"];
1
+ const _excluded = ["width", "prependNode", "endNode", "appendNode", "startNode", "disabled", "inputNode", "helperTextNode", "borderWidth", "variant", "labelNode", "testID", "focused", "borderRadius", "height", "disableFocusedStyle", "enableColorSurge", "labelVariant", "blendStyles", "inputBackground"];
2
2
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
3
3
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
4
4
  function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -55,7 +55,8 @@ export const InputStack = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
55
55
  disableFocusedStyle = false,
56
56
  enableColorSurge,
57
57
  labelVariant = 'outside',
58
- blendStyles
58
+ blendStyles,
59
+ inputBackground = 'bg'
59
60
  } = _ref,
60
61
  props = _objectWithoutProperties(_ref, _excluded);
61
62
  const focusedVariant = useMemo(() => focused && variant !== 'positive' && variant !== 'negative' ? 'primary' : variant, [focused, variant]);
@@ -108,7 +109,7 @@ export const InputStack = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
108
109
  children: /*#__PURE__*/_jsxs(Interactable, {
109
110
  ref: ref,
110
111
  as: "span",
111
- background: variant === 'secondary' ? 'bgSecondary' : 'bg',
112
+ background: variant === 'secondary' ? 'bgSecondary' : inputBackground,
112
113
  blendStyles: blendStyles,
113
114
  borderRadius: borderRadius,
114
115
  borderWidth: borderWidth,
package/esm/controls/TextInput.js CHANGED
@@ -1,4 +1,4 @@
1
- const _excluded = ["label", "accessibilityLabel", "helperText", "variant", "testID", "testIDMap", "start", "end", "width", "disabled", "align", "compact", "suffix", "onFocus", "onBlur", "borderRadius", "height", "inputNode", "bordered", "enableColorSurge", "helperTextErrorIconAccessibilityLabel", "labelVariant", "labelNode"];
1
+ const _excluded = ["label", "accessibilityLabel", "helperText", "variant", "testID", "testIDMap", "start", "end", "width", "disabled", "align", "compact", "suffix", "onFocus", "onBlur", "borderRadius", "height", "inputNode", "bordered", "enableColorSurge", "helperTextErrorIconAccessibilityLabel", "labelVariant", "labelNode", "inputBackground"];
2
2
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
3
3
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
4
4
  function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -66,7 +66,8 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Text
66
66
  enableColorSurge = false,
67
67
  helperTextErrorIconAccessibilityLabel = 'error',
68
68
  labelVariant = 'outside',
69
- labelNode
69
+ labelNode,
70
+ inputBackground
70
71
  } = _ref,
71
72
  htmlInputElmProps = _objectWithoutProperties(_ref, _excluded);
72
73
  const [focused, setFocused] = useState(false);
@@ -94,7 +95,7 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Text
94
95
  }, [setFocused, internalRef]);
95
96
 
96
97
  // Define a distinct read-only style to differentiate it from the disabled style.
97
- const inputBackground = useMemo(() => {
98
+ const readOnlyInputBackground = useMemo(() => {
98
99
  if (!disabled && htmlInputElmProps.readOnly) {
99
100
  return 'bgSecondary';
100
101
  }
@@ -147,7 +148,7 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Text
147
148
  enableColorSurge: enableColorSurge,
148
149
  endNode: (suffix !== '' || !!end) && /*#__PURE__*/_jsxs(HStack, {
149
150
  alignItems: "center",
150
- background: inputBackground,
151
+ background: readOnlyInputBackground,
151
152
  gap: 2,
152
153
  justifyContent: "center",
153
154
  onClick: handleNodePress,
@@ -175,9 +176,10 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Text
175
176
  textAlign: align,
176
177
  children: helperText
177
178
  }) : helperText),
179
+ inputBackground: readOnlyInputBackground !== null && readOnlyInputBackground !== void 0 ? readOnlyInputBackground : inputBackground,
178
180
  inputNode: inputElement,
179
181
  labelNode: !compact && (labelNode ? labelNode : !!label && /*#__PURE__*/_jsx(InputLabel, {
180
- background: labelVariant === 'inside' ? inputBackground : undefined,
182
+ background: labelVariant === 'inside' ? readOnlyInputBackground : undefined,
181
183
  className: cx(labelVariant === 'inside' && insideLabelCss, labelVariant === 'inside' && !!start && insideLabelCssStartCss),
182
184
  htmlFor: shouldSetLabelId ? labelId : undefined,
183
185
  testID: (_testIDMap$label = testIDMap === null || testIDMap === void 0 ? void 0 : testIDMap.label) !== null && _testIDMap$label !== void 0 ? _testIDMap$label : '',
@@ -186,7 +188,7 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Text
186
188
  labelVariant: labelVariant,
187
189
  startNode: (compact || !!start) && /*#__PURE__*/_jsxs(HStack, {
188
190
  alignItems: "center",
189
- background: inputBackground,
191
+ background: readOnlyInputBackground,
190
192
  gap: 2,
191
193
  justifyContent: "center",
192
194
  onClick: handleNodePress,
package/esm/navigation/Sidebar.js CHANGED
@@ -1,4 +1,4 @@
1
- const _excluded = ["logo", "children", "collapsed", "autoCollapse", "testID", "renderEnd", "accessibilityLabel", "width", "variant"];
1
+ const _excluded = ["logo", "children", "collapsed", "autoCollapse", "testID", "renderEnd", "accessibilityLabel", "width", "variant", "className", "classNames", "style", "styles"];
2
2
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
3
3
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
4
4
  function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -8,6 +8,7 @@ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i
8
8
  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; }
9
9
  import React, { Children, memo, useMemo } from 'react';
10
10
  import { zIndex } from '@coinbase/cds-common/tokens/zIndex';
11
+ import { cx } from '../cx';
11
12
  import { useDimensions } from '../hooks/useDimensions';
12
13
  import { Box, VStack } from '../layout';
13
14
  import { breakpoints } from '../styles/media';
@@ -42,7 +43,11 @@ export const Sidebar = /*#__PURE__*/memo(_ref => {
42
43
  renderEnd,
43
44
  accessibilityLabel = 'Sidebar',
44
45
  width,
45
- variant = 'default'
46
+ variant = 'default',
47
+ className,
48
+ classNames,
49
+ style,
50
+ styles
46
51
  } = _ref,
47
52
  props = _objectWithoutProperties(_ref, _excluded);
48
53
  const {
@@ -83,6 +88,7 @@ export const Sidebar = /*#__PURE__*/memo(_ref => {
83
88
  as: sidebarDefaultElement,
84
89
  background: "bg",
85
90
  bottom: "0",
91
+ className: cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
86
92
  height: "100%",
87
93
  justifyContent: "space-between",
88
94
  left: "0",
@@ -90,6 +96,7 @@ export const Sidebar = /*#__PURE__*/memo(_ref => {
90
96
  paddingX: variant === 'default' ? 2 : 1.5,
91
97
  paddingY: 2,
92
98
  position: "sticky",
99
+ style: _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root),
93
100
  testID: testID,
94
101
  top: "0",
95
102
  width: width !== null && width !== void 0 ? width : computedWidth,
@@ -97,18 +104,23 @@ export const Sidebar = /*#__PURE__*/memo(_ref => {
97
104
  }, props), {}, {
98
105
  children: [/*#__PURE__*/_jsxs(VStack, {
99
106
  children: [logo && /*#__PURE__*/_jsx(VStack, _objectSpread(_objectSpread({}, logoContainerProps), {}, {
107
+ className: classNames === null || classNames === void 0 ? void 0 : classNames.logo,
108
+ style: styles === null || styles === void 0 ? void 0 : styles.logo,
100
109
  testID: "sidebar-logo",
101
110
  children: typeof logo === 'function' ? logo(!!computedCollapse) : logo
102
111
  })), /*#__PURE__*/_jsx(VStack, {
103
112
  as: "ul",
104
- className: ulCss,
113
+ className: cx(ulCss, classNames === null || classNames === void 0 ? void 0 : classNames.content),
105
114
  gap: 0.5,
106
115
  marginStart: variant === 'default' ? -0.5 : undefined,
116
+ style: styles === null || styles === void 0 ? void 0 : styles.content,
107
117
  children: liWrappedChildren
108
118
  })]
109
119
  }), !!renderEnd && /*#__PURE__*/_jsx(Box, {
110
120
  alignSelf: variant === 'default' ? 'flex-start' : 'center',
121
+ className: classNames === null || classNames === void 0 ? void 0 : classNames.end,
111
122
  paddingTop: 4,
123
+ style: styles === null || styles === void 0 ? void 0 : styles.end,
112
124
  testID: "sidebar-end",
113
125
  children: renderEnd(!!computedCollapse)
114
126
  })]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coinbase/cds-web",
3
- "version": "8.30.0",
3
+ "version": "8.31.0",
4
4
  "description": "Coinbase Design System - Web",
5
5
  "repository": {
6
6
  "type": "git",
@@ -147,7 +147,7 @@
147
147
  "react-dom": "^18.3.1"
148
148
  },
149
149
  "dependencies": {
150
- "@coinbase/cds-common": "^8.30.0",
150
+ "@coinbase/cds-common": "^8.31.0",
151
151
  "@coinbase/cds-icons": "^5.8.0",
152
152
  "@coinbase/cds-illustrations": "^4.29.0",
153
153
  "@coinbase/cds-lottie-files": "^3.3.3",