@coinbase/cds-web 8.29.0 → 8.30.1

package/CHANGELOG.md

@@ -8,6 +8,20 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.30.1 (12/12/2025 PST)
+
+#### 🐞 Fixes
+
+- Add classNames and styles to sidebar. [[#239](https://github.com/coinbase/cds/pull/239)]
+
+## 8.30.0 (12/12/2025 PST)
+
+#### 🚀 Updates
+
+- Add autoScrollOffset prop to TabbedChips alpha. [[#232](https://github.com/coinbase/cds/pull/232)]
+- Add maxWidth prop to SelectChip alpha [[#232](https://github.com/coinbase/cds/pull/232)] [DX-5072]
+- Add displayValue prop to SelectChip alpha [[#232](https://github.com/coinbase/cds/pull/232)]
+
 ## 8.29.0 (12/12/2025 PST)
 
 #### 🚀 Updates

package/dts/alpha/select-chip/SelectChip.d.ts

@@ -2,18 +2,24 @@ import React from 'react';
 import type { ChipBaseProps } from '../../chips';
 import { type SelectRef } from '../select/Select';
 import type { SelectProps, SelectType } from '../select/types';
-export type SelectChipBaseProps = Pick<ChipBaseProps, 'invertColorScheme' | 'numberOfLines'>;
-/**
- * Chip-styled Select control built on top of the Alpha Select.
- * Supports both single and multi selection via Select's `type` prop.
- */
+export type SelectChipBaseProps = Pick<
+  ChipBaseProps,
+  'invertColorScheme' | 'numberOfLines' | 'maxWidth'
+> & {
+  /**
+   * Override the displayed value in the chip control.
+   * Useful for avoiding truncation, especially in multi-select scenarios where multiple option labels might be too long to display.
+   * When provided, this value takes precedence over the default label generation.
+   */
+  displayValue?: React.ReactNode;
+};
 export type SelectChipProps<
   Type extends SelectType = 'single',
   SelectOptionValue extends string = string,
 > = SelectChipBaseProps &
   Omit<
     SelectProps<Type, SelectOptionValue>,
-    'SelectControlComponent' | 'helperText' | 'labelVariant' | 'variant'
+    'SelectControlComponent' | 'helperText' | 'labelVariant' | 'variant' | 'maxWidth'
   >;
 export declare const SelectChip: <
   Type extends SelectType = 'single',

package/dts/alpha/select-chip/SelectChip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectChip.d.ts","sourceRoot":"","sources":["../../../src/alpha/select-chip/SelectChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAU,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,KAAK,EAAsB,WAAW,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAInF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,aAAa,EAAE,mBAAmB,GAAG,eAAe,CAAC,CAAC;AAE7F;;;GAGG;AACH,MAAM,MAAM,eAAe,CACzB,IAAI,SAAS,UAAU,GAAG,QAAQ,EAClC,iBAAiB,SAAS,MAAM,GAAG,MAAM,IACvC,mBAAmB,GACrB,IAAI,CACF,WAAW,CAAC,IAAI,EAAE,iBAAiB,CAAC,EACpC,wBAAwB,GAAG,YAAY,GAAG,cAAc,GAAG,SAAS,CACrE,CAAC;AA6DJ,eAAO,MAAM,UAAU,EAA0B,CAC/C,IAAI,SAAS,UAAU,GAAG,QAAQ,EAClC,iBAAiB,SAAS,MAAM,GAAG,MAAM,EAEzC,KAAK,EAAE,eAAe,CAAC,IAAI,EAAE,iBAAiB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;CAAE,KAC7E,KAAK,CAAC,YAAY,CAAC"}
+{"version":3,"file":"SelectChip.d.ts","sourceRoot":"","sources":["../../../src/alpha/select-chip/SelectChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,OAAO,EAAU,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,KAAK,EAAsB,WAAW,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAInF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,aAAa,EACb,mBAAmB,GAAG,eAAe,GAAG,UAAU,CACnD,GAAG;IACF;;;;OAIG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,eAAe,CACzB,IAAI,SAAS,UAAU,GAAG,QAAQ,EAClC,iBAAiB,SAAS,MAAM,GAAG,MAAM,IACvC,mBAAmB,GACrB,IAAI,CACF,WAAW,CAAC,IAAI,EAAE,iBAAiB,CAAC,EACpC,wBAAwB,GAAG,YAAY,GAAG,cAAc,GAAG,SAAS,GAAG,UAAU,CAClF,CAAC;AAqFJ,eAAO,MAAM,UAAU,EAA0B,CAC/C,IAAI,SAAS,UAAU,GAAG,QAAQ,EAClC,iBAAiB,SAAS,MAAM,GAAG,MAAM,EAEzC,KAAK,EAAE,eAAe,CAAC,IAAI,EAAE,iBAAiB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;CAAE,KAC7E,KAAK,CAAC,YAAY,CAAC"}

package/dts/alpha/select-chip/SelectChipControl.d.ts

@@ -6,8 +6,9 @@ export declare const SelectChipControl: <
   SelectOptionValue extends string = string,
 >(
   props: SelectControlProps<Type, SelectOptionValue> &
-    Pick<ChipBaseProps, 'invertColorScheme' | 'compact' | 'numberOfLines'> & {
+    Pick<ChipBaseProps, 'invertColorScheme' | 'numberOfLines'> & {
       ref?: React.Ref<HTMLElement>;
+      displayValue?: React.ReactNode;
     },
 ) => React.ReactElement;
 //# sourceMappingURL=SelectChipControl.d.ts.map

package/dts/alpha/select-chip/SelectChipControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectChipControl.d.ts","sourceRoot":"","sources":["../../../src/alpha/select-chip/SelectChipControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,KAAK,aAAa,EAAa,MAAM,aAAa,CAAC;AAG5D,OAAO,EAEL,KAAK,kBAAkB,EAEvB,KAAK,UAAU,EAChB,MAAM,iBAAiB,CAAC;AA4JzB,eAAO,MAAM,iBAAiB,EAAiC,CAC7D,IAAI,SAAS,UAAU,EACvB,iBAAiB,SAAS,MAAM,GAAG,MAAM,EAEzC,KAAK,EAAE,kBAAkB,CAAC,IAAI,EAAE,iBAAiB,CAAC,GAChD,IAAI,CAAC,aAAa,EAAE,mBAAmB,GAAG,SAAS,GAAG,eAAe,CAAC,GAAG;IACvE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC9B,KACA,KAAK,CAAC,YAAY,CAAC"}
+{"version":3,"file":"SelectChipControl.d.ts","sourceRoot":"","sources":["../../../src/alpha/select-chip/SelectChipControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,KAAK,aAAa,EAAa,MAAM,aAAa,CAAC;AAG5D,OAAO,EAEL,KAAK,kBAAkB,EAEvB,KAAK,UAAU,EAChB,MAAM,iBAAiB,CAAC;AAiKzB,eAAO,MAAM,iBAAiB,EAAiC,CAC7D,IAAI,SAAS,UAAU,EACvB,iBAAiB,SAAS,MAAM,GAAG,MAAM,EAEzC,KAAK,EAAE,kBAAkB,CAAC,IAAI,EAAE,iBAAiB,CAAC,GAChD,IAAI,CAAC,aAAa,EAAE,mBAAmB,GAAG,eAAe,CAAC,GAAG;IAC3D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC,KACA,KAAK,CAAC,YAAY,CAAC"}

package/dts/alpha/tabbed-chips/TabbedChips.d.ts

@@ -24,6 +24,11 @@ export type TabbedChipsBaseProps<T extends string = string> = Omit<
    * @default false
    */
   compact?: boolean;
+  /**
+   * X position offset when auto-scrolling to active tab (to avoid active tab being covered by the paddle on the left side, default: 50px)
+   * @default 50
+   */
+  autoScrollOffset?: number;
 };
 export type TabbedChipsProps<T extends string = string> = TabbedChipsBaseProps<T> &
   SharedProps &

package/dts/alpha/tabbed-chips/TabbedChips.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabbedChips.d.ts","sourceRoot":"","sources":["../../../src/alpha/tabbed-chips/TabbedChips.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8E,MAAM,OAAO,CAAC;AACnG,OAAO,KAAK,EAAE,wBAAwB,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAE7F,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAGlE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAIvD,OAAO,EAAU,KAAK,oBAAoB,EAAE,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AACnF,OAAO,EAIL,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,YAAY,CAAC;AAmDpB,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,SAAS,CAAC,GAC9F,QAAQ,CAAC,CAAC,CAAC,GAAG;IACZ,SAAS,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;CACjE,CAAC;AAEJ,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CAChE,aAAa,CAAC,CAAC,CAAC,EACd,cAAc,GACd,8BAA8B,GAC9B,MAAM,GACN,0BAA0B,GAC1B,kBAAkB,CACrB,GAAG;IACF,YAAY,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5C,4BAA4B,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC;IAC5E,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,oBAAoB,CAAC,CAAC,CAAC,GAC/E,WAAW,GACX,wBAAwB,GAAG;IACzB,UAAU,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC7B,+BAA+B,CAAC,EAAE,MAAM,CAAC;IACzC,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC;;;OAGG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC,oBAAoB,CAAC,CAAC,KAAK,CAAC,CAAC;IAC/C;;;;OAIG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC,oBAAoB,CAAC,CAAC,OAAO,CAAC,CAAC;IACnD,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B;;WAEG;QACH,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QACtC;;WAEG;QACH,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC7B;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC5B,CAAC;IACF,UAAU,CAAC,EAAE;QACX;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;CACH,CAAC;AAEJ,KAAK,aAAa,GAAG,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAC7C,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;CAAE,KACnE,KAAK,CAAC,YAAY,CAAC;AAuGxB,eAAO,MAAM,WAAW,EAA2B,aAAa,CAAC"}
+{"version":3,"file":"TabbedChips.d.ts","sourceRoot":"","sources":["../../../src/alpha/tabbed-chips/TabbedChips.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8E,MAAM,OAAO,CAAC;AACnG,OAAO,KAAK,EAAE,wBAAwB,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAE7F,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAGlE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAIvD,OAAO,EAAU,KAAK,oBAAoB,EAAE,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AACnF,OAAO,EAIL,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,YAAY,CAAC;AAmDpB,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,SAAS,CAAC,GAC9F,QAAQ,CAAC,CAAC,CAAC,GAAG;IACZ,SAAS,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;CACjE,CAAC;AAEJ,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CAChE,aAAa,CAAC,CAAC,CAAC,EACd,cAAc,GACd,8BAA8B,GAC9B,MAAM,GACN,0BAA0B,GAC1B,kBAAkB,CACrB,GAAG;IACF,YAAY,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5C,4BAA4B,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC;IAC5E,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,oBAAoB,CAAC,CAAC,CAAC,GAC/E,WAAW,GACX,wBAAwB,GAAG;IACzB,UAAU,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC7B,+BAA+B,CAAC,EAAE,MAAM,CAAC;IACzC,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC;;;OAGG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC,oBAAoB,CAAC,CAAC,KAAK,CAAC,CAAC;IAC/C;;;;OAIG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC,oBAAoB,CAAC,CAAC,OAAO,CAAC,CAAC;IACnD,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B;;WAEG;QACH,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QACtC;;WAEG;QACH,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC7B;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC5B,CAAC;IACF,UAAU,CAAC,EAAE;QACX;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;CACH,CAAC;AAEJ,KAAK,aAAa,GAAG,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAC7C,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;CAAE,KACnE,KAAK,CAAC,YAAY,CAAC;AAwGxB,eAAO,MAAM,WAAW,EAA2B,aAAa,CAAC"}

package/dts/chips/ChipProps.d.ts

@@ -1,9 +1,9 @@
+import type { SharedAccessibilityProps, SharedProps } from '@coinbase/cds-common/types';
 import type {
-  DimensionValue,
-  SharedAccessibilityProps,
-  SharedProps,
-} from '@coinbase/cds-common/types';
-import type { PressableDefaultElement, PressableProps } from '../system/Pressable';
+  PressableBaseProps,
+  PressableDefaultElement,
+  PressableProps,
+} from '../system/Pressable';
 export type ChipBaseProps = SharedProps &
   Omit<
     PressableProps<PressableDefaultElement>,
@@ -27,7 +27,7 @@ export type ChipBaseProps = SharedProps &
      * If text content overflows, it will get truncated with an ellipsis.
      * @default 200
      */
-    maxWidth?: DimensionValue;
+    maxWidth?: PressableBaseProps['maxWidth'];
     /**
      * Invert the foreground and background colors to emphasize the Chip.
      * Depending on your theme, it may be dangerous to use this prop in conjunction with `transparentWhileInactive`.

package/dts/chips/ChipProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChipProps.d.ts","sourceRoot":"","sources":["../../src/chips/ChipProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,cAAc,EACd,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAEpC,OAAO,KAAK,EAAE,uBAAuB,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAEnF,MAAM,MAAM,aAAa,GAAG,WAAW,GACrC,IAAI,CACF,cAAc,CAAC,uBAAuB,CAAC,EACrC,UAAU,GACV,SAAS,GACT,OAAO,GACP,eAAe,GACf,mBAAmB,GACnB,yBAAyB,GACzB,UAAU,GACV,OAAO,CACV,GACD,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GAAG;IACrD,iDAAiD;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,wCAAwC;IACxC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,uCAAuC;IACvC,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,0CAA0C;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACnC,iDAAiD;IACjD,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC/B,CAAC;IACF,qCAAqC;IACrC,UAAU,CAAC,EAAE;QACX,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;CACH,CAAC;AAEJ,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC;AAEtC,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC"}
+{"version":3,"file":"ChipProps.d.ts","sourceRoot":"","sources":["../../src/chips/ChipProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAEpC,OAAO,KAAK,EACV,kBAAkB,EAClB,uBAAuB,EACvB,cAAc,EACf,MAAM,qBAAqB,CAAC;AAE7B,MAAM,MAAM,aAAa,GAAG,WAAW,GACrC,IAAI,CACF,cAAc,CAAC,uBAAuB,CAAC,EACrC,UAAU,GACV,SAAS,GACT,OAAO,GACP,eAAe,GACf,mBAAmB,GACnB,yBAAyB,GACzB,UAAU,GACV,OAAO,CACV,GACD,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GAAG;IACrD,iDAAiD;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,wCAAwC;IACxC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,uCAAuC;IACvC,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;IAC1C;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,0CAA0C;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACnC,iDAAiD;IACjD,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC/B,CAAC;IACF,qCAAqC;IACrC,UAAU,CAAC,EAAE;QACX,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;CACH,CAAC;AAEJ,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC;AAEtC,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC"}

package/dts/hooks/useHorizontalScrollToTarget.d.ts

@@ -1,7 +1,7 @@
 export type UseHorizontalScrollToTargetOptions = {
   scrollThrottleWaitTime?: number;
   activeTarget?: HTMLElement | null;
-  scrollPadding?: number;
+  autoScrollOffset?: number;
   overflowThreshold?: number;
 };
 /**
@@ -11,13 +11,13 @@ export type UseHorizontalScrollToTargetOptions = {
  *
  * @param scrollThrottleWaitTime - Throttle time for scroll events (default: 200ms)
  * @param activeTarget - The active element to scroll to when it's offscreen
- * @param scrollPadding - Padding to add when scrolling to position elements (useful for paddles/overlays, default: 0)
+ * @param autoScrollOffset - X position offset when auto-scrolling to active target
  * @param overflowThreshold - Threshold for detecting if content is offscreen (default: 5px)
  */
 export declare const useHorizontalScrollToTarget: ({
   scrollThrottleWaitTime,
   activeTarget,
-  scrollPadding,
+  autoScrollOffset,
   overflowThreshold,
 }?: UseHorizontalScrollToTargetOptions) => {
   scrollRef: import('react').RefObject<HTMLDivElement>;

package/dts/hooks/useHorizontalScrollToTarget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useHorizontalScrollToTarget.d.ts","sourceRoot":"","sources":["../../src/hooks/useHorizontalScrollToTarget.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,kCAAkC,GAAG;IAC/C,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,YAAY,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,2BAA2B,GAAI,8EAKzC,kCAAuC;;;;;CAkEzC,CAAC"}
+{"version":3,"file":"useHorizontalScrollToTarget.d.ts","sourceRoot":"","sources":["../../src/hooks/useHorizontalScrollToTarget.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,kCAAkC,GAAG;IAC/C,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,YAAY,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,2BAA2B,GAAI,iFAKzC,kCAAuC;;;;;CAkEzC,CAAC"}

package/dts/navigation/Sidebar.d.ts

@@ -30,6 +30,48 @@ export type SidebarBaseProps = BoxBaseProps & {
    */
   renderEnd?: (isCollapsed: boolean) => React.ReactNode;
   variant?: 'default' | 'condensed';
+  /**
+   * Custom class names for the sidebar components.
+   */
+  classNames?: {
+    /**
+     * Custom class name for the root sidebar container.
+     */
+    root?: string;
+    /**
+     * Custom class name for the logo container.
+     */
+    logo?: string;
+    /**
+     * Custom class name for the content container (children list).
+     */
+    content?: string;
+    /**
+     * Custom class name for the end container (renderEnd).
+     */
+    end?: string;
+  };
+  /**
+   * Custom styles for the sidebar components.
+   */
+  styles?: {
+    /**
+     * Custom style for the root sidebar container.
+     */
+    root?: React.CSSProperties;
+    /**
+     * Custom style for the logo container.
+     */
+    logo?: React.CSSProperties;
+    /**
+     * Custom style for the content container (children list).
+     */
+    content?: React.CSSProperties;
+    /**
+     * Custom style for the end container (renderEnd).
+     */
+    end?: React.CSSProperties;
+  };
 };
 export type SidebarProps = SidebarBaseProps & Omit<BoxProps<SidebarDefaultElement>, 'children'>;
 export declare const Sidebar: React.FC<SidebarProps>;

package/dts/navigation/Sidebar.d.ts.map

@@ -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"}
+{"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/alpha/select-chip/SelectChip.js

@@ -1,4 +1,4 @@
-const _excluded = ["invertColorScheme", "numberOfLines"];
+const _excluded = ["invertColorScheme", "numberOfLines", "maxWidth", "displayValue"];
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 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; }
 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; }
@@ -9,33 +9,48 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 import React, { forwardRef, memo, useMemo } from 'react';
 import { Select } from '../select/Select';
 import { SelectChipControl } from './SelectChipControl';
-
-/**
- * Chip-styled Select control built on top of the Alpha Select.
- * Supports both single and multi selection via Select's `type` prop.
- */
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Creates a wrapper component that injects invertColorScheme and numberOfLines
  * into SelectChipControl. This is needed because Select doesn't pass these props
  * to SelectControlComponent, but SelectChipControl requires them.
  */
-function createSelectChipControlWrapper(invertColorScheme, numberOfLines) {
+function createSelectChipControlWrapper(_ref) {
+  let {
+    invertColorScheme,
+    numberOfLines,
+    maxWidth,
+    displayValue
+  } = _ref;
   return /*#__PURE__*/memo(/*#__PURE__*/forwardRef((controlProps, controlRef) => {
     return /*#__PURE__*/_jsx(SelectChipControl, _objectSpread(_objectSpread({}, controlProps), {}, {
       ref: controlRef,
+      displayValue: displayValue,
       invertColorScheme: invertColorScheme,
+      maxWidth: maxWidth,
       numberOfLines: numberOfLines
     }));
   }));
 }
-const SelectChipComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+
+/**
+ * Chip-styled Select control built on top of the Alpha Select.
+ * Supports both single and multi selection via Select's `type` prop.
+ */
+const SelectChipComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
       invertColorScheme,
-      numberOfLines
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  const WrappedSelectChipControl = useMemo(() => createSelectChipControlWrapper(invertColorScheme, numberOfLines), [invertColorScheme, numberOfLines]);
+      numberOfLines,
+      maxWidth,
+      displayValue
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  const WrappedSelectChipControl = useMemo(() => createSelectChipControlWrapper({
+    invertColorScheme,
+    numberOfLines,
+    maxWidth,
+    displayValue
+  }), [displayValue, invertColorScheme, numberOfLines, maxWidth]);
   return /*#__PURE__*/_jsx(Select, _objectSpread({
     ref: ref,
     SelectControlComponent: WrappedSelectChipControl,

package/esm/alpha/select-chip/SelectChipControl.js

@@ -23,7 +23,9 @@ const SelectChipControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
     compact,
     invertColorScheme,
     numberOfLines,
-    disabled
+    disabled,
+    maxWidth,
+    displayValue
   } = _ref;
   const isMultiSelect = type === 'multi';
   const hasValue = value !== null && !(Array.isArray(value) && value.length === 0);
@@ -66,6 +68,7 @@ const SelectChipControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
   const labelContent = useMemo(() => {
     var _ref3, _ref6, _ref7, _ref8, _opt$label2;
     if (!hasValue) return (_ref3 = label !== null && label !== void 0 ? label : placeholder) !== null && _ref3 !== void 0 ? _ref3 : null;
+    if (displayValue) return displayValue;
     if (isMultiSelect) {
       const values = value;
       const visible = values.slice(0, maxSelectedOptionsToShow);
@@ -79,7 +82,7 @@ const SelectChipControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
     }
     const opt = optionsMap.get(value);
     return (_ref6 = (_ref7 = (_ref8 = (_opt$label2 = opt === null || opt === void 0 ? void 0 : opt.label) !== null && _opt$label2 !== void 0 ? _opt$label2 : opt === null || opt === void 0 ? void 0 : opt.description) !== null && _ref8 !== void 0 ? _ref8 : opt === null || opt === void 0 ? void 0 : opt.value) !== null && _ref7 !== void 0 ? _ref7 : placeholder) !== null && _ref6 !== void 0 ? _ref6 : null;
-  }, [hasValue, label, placeholder, isMultiSelect, optionsMap, value, maxSelectedOptionsToShow, hiddenSelectedOptionsLabel]);
+  }, [hasValue, label, placeholder, displayValue, isMultiSelect, optionsMap, value, maxSelectedOptionsToShow, hiddenSelectedOptionsLabel]);
   const endNode = useMemo(() => {
     return customEndNode !== null && customEndNode !== void 0 ? customEndNode : /*#__PURE__*/_jsx(AnimatedCaret, {
       active: true,
@@ -106,6 +109,7 @@ const SelectChipControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
     disabled: disabled,
     end: endNode,
     invertColorScheme: invertColorScheme,
+    maxWidth: maxWidth,
     numberOfLines: numberOfLines,
     onClick: () => setOpen(s => !s),
     start: startNode,

package/esm/alpha/tabbed-chips/TabbedChips.js

@@ -1,5 +1,5 @@
 const _excluded = ["label", "id"],
-  _excluded2 = ["tabs", "activeTab", "onChange", "TabComponent", "testID", "background", "gap", "previousArrowAccessibilityLabel", "nextArrowAccessibilityLabel", "width", "TabsActiveIndicatorComponent", "disabled", "compact", "styles", "classNames"];
+  _excluded2 = ["tabs", "activeTab", "onChange", "TabComponent", "testID", "background", "gap", "previousArrowAccessibilityLabel", "nextArrowAccessibilityLabel", "width", "TabsActiveIndicatorComponent", "disabled", "compact", "styles", "classNames", "autoScrollOffset"];
 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; }
 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; }
 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; }
@@ -69,7 +69,8 @@ const TabbedChipsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function
       disabled,
       compact,
       styles,
-      classNames
+      classNames,
+      autoScrollOffset = 50
     } = _ref2,
     accessibilityProps = _objectWithoutProperties(_ref2, _excluded2);
   const [scrollTarget, setScrollTarget] = useState(null);
@@ -80,7 +81,7 @@ const TabbedChipsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function
     handleScroll
   } = useHorizontalScrollToTarget({
     activeTarget: scrollTarget,
-    scrollPadding: 50
+    autoScrollOffset
   });
   const handleScrollLeft = useCallback(() => {
     var _scrollRef$current;

package/esm/chips/TabbedChips.js

@@ -73,7 +73,7 @@ const TabbedChipsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function
     handleScroll
   } = useHorizontalScrollToTarget({
     activeTarget: scrollTarget,
-    scrollPadding: 50
+    autoScrollOffset: 50
   });
   const activeTab = useMemo(() => tabs.find(tab => tab.id === value), [tabs, value]);
   const handleChange = useCallback(tabValue => {

package/esm/hooks/useHorizontalScrollToTarget.js

@@ -7,14 +7,14 @@ import throttle from 'lodash/throttle';
  *
  * @param scrollThrottleWaitTime - Throttle time for scroll events (default: 200ms)
  * @param activeTarget - The active element to scroll to when it's offscreen
- * @param scrollPadding - Padding to add when scrolling to position elements (useful for paddles/overlays, default: 0)
+ * @param autoScrollOffset - X position offset when auto-scrolling to active target
  * @param overflowThreshold - Threshold for detecting if content is offscreen (default: 5px)
  */
 export const useHorizontalScrollToTarget = function () {
   let {
     scrollThrottleWaitTime = 200,
     activeTarget,
-    scrollPadding = 0,
+    autoScrollOffset = 0,
     overflowThreshold = 5
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const scrollRef = useRef(null);
@@ -56,16 +56,16 @@ export const useHorizontalScrollToTarget = function () {
     const targetWidth = activeTarget.offsetWidth;
     const scrollLeft = container.scrollLeft;
     const containerWidth = container.clientWidth;
-    const isOffscreenLeft = targetX < scrollLeft + scrollPadding;
-    const isOffscreenRight = targetX + targetWidth > scrollLeft + containerWidth - scrollPadding;
+    const isOffscreenLeft = targetX < scrollLeft + autoScrollOffset;
+    const isOffscreenRight = targetX + targetWidth > scrollLeft + containerWidth - autoScrollOffset;
     if (isOffscreenLeft || isOffscreenRight) {
-      const scrollToX = isOffscreenLeft ? Math.max(0, targetX - scrollPadding) : targetX - scrollPadding;
+      const scrollToX = isOffscreenLeft ? Math.max(0, targetX - autoScrollOffset) : targetX - autoScrollOffset;
       container.scrollTo({
         left: scrollToX,
         behavior: 'smooth'
       });
     }
-  }, [activeTarget, scrollPadding]);
+  }, [activeTarget, autoScrollOffset]);
   return {
     scrollRef,
     isScrollContentOffscreenLeft,

package/esm/navigation/Sidebar.js

@@ -1,4 +1,4 @@
-const _excluded = ["logo", "children", "collapsed", "autoCollapse", "testID", "renderEnd", "accessibilityLabel", "width", "variant"];
+const _excluded = ["logo", "children", "collapsed", "autoCollapse", "testID", "renderEnd", "accessibilityLabel", "width", "variant", "className", "classNames", "style", "styles"];
 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; }
 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; }
 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
 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, { Children, memo, useMemo } from 'react';
 import { zIndex } from '@coinbase/cds-common/tokens/zIndex';
+import { cx } from '../cx';
 import { useDimensions } from '../hooks/useDimensions';
 import { Box, VStack } from '../layout';
 import { breakpoints } from '../styles/media';
@@ -42,7 +43,11 @@ export const Sidebar = /*#__PURE__*/memo(_ref => {
       renderEnd,
       accessibilityLabel = 'Sidebar',
       width,
-      variant = 'default'
+      variant = 'default',
+      className,
+      classNames,
+      style,
+      styles
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const {
@@ -83,6 +88,7 @@ export const Sidebar = /*#__PURE__*/memo(_ref => {
       as: sidebarDefaultElement,
       background: "bg",
       bottom: "0",
+      className: cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
       height: "100%",
       justifyContent: "space-between",
       left: "0",
@@ -90,6 +96,7 @@ export const Sidebar = /*#__PURE__*/memo(_ref => {
       paddingX: variant === 'default' ? 2 : 1.5,
       paddingY: 2,
       position: "sticky",
+      style: _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root),
       testID: testID,
       top: "0",
       width: width !== null && width !== void 0 ? width : computedWidth,
@@ -97,18 +104,23 @@ export const Sidebar = /*#__PURE__*/memo(_ref => {
     }, props), {}, {
       children: [/*#__PURE__*/_jsxs(VStack, {
         children: [logo && /*#__PURE__*/_jsx(VStack, _objectSpread(_objectSpread({}, logoContainerProps), {}, {
+          className: classNames === null || classNames === void 0 ? void 0 : classNames.logo,
+          style: styles === null || styles === void 0 ? void 0 : styles.logo,
           testID: "sidebar-logo",
           children: typeof logo === 'function' ? logo(!!computedCollapse) : logo
         })), /*#__PURE__*/_jsx(VStack, {
           as: "ul",
-          className: ulCss,
+          className: cx(ulCss, classNames === null || classNames === void 0 ? void 0 : classNames.content),
           gap: 0.5,
           marginStart: variant === 'default' ? -0.5 : undefined,
+          style: styles === null || styles === void 0 ? void 0 : styles.content,
           children: liWrappedChildren
         })]
       }), !!renderEnd && /*#__PURE__*/_jsx(Box, {
         alignSelf: variant === 'default' ? 'flex-start' : 'center',
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.end,
         paddingTop: 4,
+        style: styles === null || styles === void 0 ? void 0 : styles.end,
         testID: "sidebar-end",
         children: renderEnd(!!computedCollapse)
       })]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "8.29.0",
+  "version": "8.30.1",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -147,7 +147,7 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.29.0",
+    "@coinbase/cds-common": "^8.30.1",
     "@coinbase/cds-icons": "^5.8.0",
     "@coinbase/cds-illustrations": "^4.29.0",
     "@coinbase/cds-lottie-files": "^3.3.3",