@coinbase/cds-web 8.18.0 → 8.19.0

package/CHANGELOG.md

@@ -8,6 +8,17 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.19.0 (10/29/2025 PST)
+
+#### 🚀 Updates
+
+- Added MediaChip component. [[#125](https://github.com/coinbase/cds/pull/125)]
+- Simplified Chip construct. [[#125](https://github.com/coinbase/cds/pull/125)]
+
+#### 🐞 Fixes
+
+- Fixed TabbedChip auto-scrolling issue. [[#125](https://github.com/coinbase/cds/pull/125)]
+
 ## 8.18.0 (10/29/2025 PST)
 
 #### 🚀 Updates

package/dts/chips/Chip.d.ts

@@ -1,10 +1,12 @@
-import React from 'react';
 /**
  * This is a basic Chip component used to create all Chip components.
+ * When onClick is provided, the ref will be typed as HTMLButtonElement.
+ * When onClick is not provided, the ref will be typed as HTMLDivElement.
  */
-export declare const Chip: React.MemoExoticComponent<
-  React.ForwardRefExoticComponent<
-    Omit<import('./ChipProps').ChipBaseProps, 'ref'> & React.RefAttributes<HTMLButtonElement>
+export declare const Chip: import('react').MemoExoticComponent<
+  import('react').ForwardRefExoticComponent<
+    Omit<import('./ChipProps').ChipBaseProps, 'ref'> &
+      import('react').RefAttributes<HTMLButtonElement | HTMLDivElement>
   >
 >;
 //# sourceMappingURL=Chip.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../src/chips/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAsB1D;;GAEG;AACH,eAAO,MAAM,IAAI,uJAsEhB,CAAC"}
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../src/chips/Chip.tsx"],"names":[],"mappings":"AAkBA;;;;GAIG;AACH,eAAO,MAAM,IAAI,sMA2HhB,CAAC"}

package/dts/chips/ChipProps.d.ts

@@ -17,7 +17,7 @@ export type ChipBaseProps = SharedProps &
   > &
   Pick<SharedAccessibilityProps, 'accessibilityLabel'> & {
     /** ReactNode placed in the center of the Chip */
-    children: React.ReactNode;
+    children?: React.ReactNode;
     /** ReactNode placed before the value */
     start?: React.ReactNode;
     /** ReactNode placed after the value */
@@ -40,8 +40,21 @@ export type ChipBaseProps = SharedProps &
      * @default 1
      */
     numberOfLines?: number;
-    /** Apply styles to Chip content. */
+    /**
+     * @deprecated Use `styles.content` instead.
+     * Apply styles to Chip content.
+     */
     contentStyle?: React.CSSProperties;
+    /** Apply styles to the container and content. */
+    styles?: {
+      root?: React.CSSProperties;
+      content?: React.CSSProperties;
+    };
+    /** Class names for the components */
+    classNames?: {
+      root?: string;
+      content?: string;
+    };
   };
 export type ChipProps = ChipBaseProps;
 export type InputChipProps = {

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,CACb,GACD,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GAAG;IACrD,iDAAiD;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,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;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oCAAoC;IACpC,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACpC,CAAC;AAEJ,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC;AAEtC,MAAM,MAAM,cAAc,GAAG;IAC3B,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,IAAI,CAAC,SAAS,EAAE,KAAK,GAAG,UAAU,GAAG,UAAU,GAAG,gBAAgB,CAAC,CAAC"}
+{"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,CACb,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;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,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;IAC3B,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,IAAI,CAAC,SAAS,EAAE,KAAK,GAAG,UAAU,GAAG,UAAU,GAAG,gBAAgB,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"InputChip.d.ts","sourceRoot":"","sources":["../../src/chips/InputChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAKhD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,eAAO,MAAM,SAAS,kIA6BrB,CAAC"}
+{"version":3,"file":"InputChip.d.ts","sourceRoot":"","sources":["../../src/chips/InputChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAIhD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGlD,eAAO,MAAM,SAAS,kIA8BrB,CAAC"}

package/dts/chips/MediaChip.d.ts

@@ -0,0 +1,9 @@
+import type { ChipProps } from './ChipProps';
+export type MediaChipProps = ChipProps;
+export declare const MediaChip: import('react').MemoExoticComponent<
+  import('react').ForwardRefExoticComponent<
+    Omit<import('./ChipProps').ChipBaseProps, 'ref'> &
+      import('react').RefAttributes<HTMLButtonElement | HTMLDivElement>
+  >
+>;
+//# sourceMappingURL=MediaChip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MediaChip.d.ts","sourceRoot":"","sources":["../../src/chips/MediaChip.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE7C,MAAM,MAAM,cAAc,GAAG,SAAS,CAAC;AAEvC,eAAO,MAAM,SAAS,sMAqDrB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"SelectChip.d.ts","sourceRoot":"","sources":["../../src/chips/SelectChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAGvE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAKjD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE7C,eAAO,MAAM,2BAA2B,gBAAgB,CAAC;AAEzD,MAAM,MAAM,eAAe,GAAG;IAC5B,4EAA4E;IAC5E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,UAAU,GAAG,QAAQ,GAAG,gBAAgB,GAAG,SAAS,CAAC,GACpF,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,YAAY,GAAG,aAAa,GAAG,OAAO,CAAC,GAC1E,IAAI,CAAC,aAAa,EAAE,UAAU,GAAG,UAAU,CAAC,CAAC;AAE/C,eAAO,MAAM,UAAU,yHAoFtB,CAAC"}
+{"version":3,"file":"SelectChip.d.ts","sourceRoot":"","sources":["../../src/chips/SelectChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAGvE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAIjD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAG7C,eAAO,MAAM,2BAA2B,gBAAgB,CAAC;AAEzD,MAAM,MAAM,eAAe,GAAG;IAC5B,4EAA4E;IAC5E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,UAAU,GAAG,QAAQ,GAAG,gBAAgB,GAAG,SAAS,CAAC,GACpF,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,YAAY,GAAG,aAAa,GAAG,OAAO,CAAC,GAC1E,IAAI,CAAC,aAAa,EAAE,UAAU,GAAG,UAAU,CAAC,CAAC;AAE/C,eAAO,MAAM,UAAU,yHAoFtB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"TabbedChips.d.ts","sourceRoot":"","sources":["../../src/chips/TabbedChips.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmE,MAAM,OAAO,CAAC;AAMxF,OAAO,EAAE,KAAK,YAAY,EAAU,MAAM,WAAW,CAAC;AACtD,OAAO,EAAU,KAAK,sBAAsB,EAAQ,MAAM,SAAS,CAAC;AAmCpE,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,YAAY,GACxE,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC;AAE7C,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,oBAAoB,CAAC,CAAC,CAAC,CAAC;AAElF,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;AAwHxB,eAAO,MAAM,WAAW,EAA2B,aAAa,CAAC"}
+{"version":3,"file":"TabbedChips.d.ts","sourceRoot":"","sources":["../../src/chips/TabbedChips.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAMhF,OAAO,EAAE,KAAK,YAAY,EAAU,MAAM,WAAW,CAAC;AACtD,OAAO,EAAU,KAAK,sBAAsB,EAAQ,MAAM,SAAS,CAAC;AAiCpE,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,YAAY,GACxE,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC;AAE7C,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,oBAAoB,CAAC,CAAC,CAAC,CAAC;AAElF,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;AAkGxB,eAAO,MAAM,WAAW,EAA2B,aAAa,CAAC"}

package/dts/chips/index.d.ts

@@ -1,6 +1,7 @@
 export * from './Chip';
 export * from './ChipProps';
 export * from './InputChip';
+export * from './MediaChip';
 export * from './SelectChip';
 export * from './TabbedChips';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/chips/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/chips/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC"}

package/dts/hooks/useHorizontalScrollToTarget.d.ts

@@ -0,0 +1,28 @@
+export type UseHorizontalScrollToTargetOptions = {
+  scrollThrottleWaitTime?: number;
+  activeTarget?: HTMLElement | null;
+  scrollPadding?: number;
+  overflowThreshold?: number;
+};
+/**
+ * A hook for managing horizontal scrolling with overflow detection.
+ * Useful for horizontally scrollable content that needs to show overflow indicators.
+ * Optionally handles scrolling to an active target element.
+ *
+ * @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 overflowThreshold - Threshold for detecting if content is offscreen (default: 5px)
+ */
+export declare const useHorizontalScrollToTarget: ({
+  scrollThrottleWaitTime,
+  activeTarget,
+  scrollPadding,
+  overflowThreshold,
+}?: UseHorizontalScrollToTargetOptions) => {
+  scrollRef: import('react').RefObject<HTMLDivElement>;
+  isScrollContentOffscreenLeft: boolean;
+  isScrollContentOffscreenRight: boolean;
+  handleScroll: () => void;
+};
+//# sourceMappingURL=useHorizontalScrollToTarget.d.ts.map

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

@@ -0,0 +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"}

package/dts/tabs/Tabs.d.ts

@@ -29,6 +29,8 @@ export type TabsProps<T extends string = string> = {
   TabsActiveIndicatorComponent: TabsActiveIndicatorComponent;
   /** Background color passed to the TabsActiveIndicatorComponent. */
   activeBackground?: ThemeVars.Color;
+  /** Optional callback to receive the active tab element. */
+  onActiveTabElementChange?: (element: HTMLElement | null) => void;
 } & Omit<TabsOptions<T>, 'tabs'> &
   Omit<HStackProps<HStackDefaultElement>, 'onChange' | 'ref'>;
 type TabsFC = <T extends string = string>(

package/dts/tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAIjE,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,QAAQ,EAEd,MAAM,mCAAmC,CAAC;AAE3C,OAAO,EAAe,KAAK,IAAI,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAe,KAAK,WAAW,EAAmB,MAAM,eAAe,CAAC;AAE/E,OAAO,EAAO,KAAK,iBAAiB,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAU,KAAK,oBAAoB,EAAE,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAkBvF,eAAO,MAAM,oBAAoB;;;;;;CAMF,CAAC;AAEhC,MAAM,MAAM,wBAAwB,GAAG;IACrC,aAAa,EAAE,IAAI,CAAC;CACrB,GAAG,QAAQ,CAAC,iBAAiB,CAAC,GAC7B,WAAW,CAAC;AAEd,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;AAE5E,MAAM,MAAM,4BAA4B,GAAG,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAAC,CAAC;AAE9E,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IACjD,2FAA2F;IAC3F,IAAI,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG;QAAE,SAAS,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAA;KAAE,CAAC,EAAE,CAAC;IACxD,gDAAgD;IAChD,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAC9B,iEAAiE;IACjE,4BAA4B,EAAE,4BAA4B,CAAC;IAC3D,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CACpC,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,GAC9B,IAAI,CAAC,WAAW,CAAC,oBAAoB,CAAC,EAAE,UAAU,GAAG,KAAK,CAAC,CAAC;AAE9D,KAAK,MAAM,GAAG,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EACtC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;CAAE,KAC5D,KAAK,CAAC,YAAY,CAAC;AAoFxB,eAAO,MAAM,IAAI,EAAoB,MAAM,CAAC;AAE5C,eAAO,MAAM,mBAAmB,GAAI,uCAIjC,wBAAwB,mDAgB1B,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAIjE,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,QAAQ,EAEd,MAAM,mCAAmC,CAAC;AAE3C,OAAO,EAAe,KAAK,IAAI,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAe,KAAK,WAAW,EAAmB,MAAM,eAAe,CAAC;AAE/E,OAAO,EAAO,KAAK,iBAAiB,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAU,KAAK,oBAAoB,EAAE,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAkBvF,eAAO,MAAM,oBAAoB;;;;;;CAMF,CAAC;AAEhC,MAAM,MAAM,wBAAwB,GAAG;IACrC,aAAa,EAAE,IAAI,CAAC;CACrB,GAAG,QAAQ,CAAC,iBAAiB,CAAC,GAC7B,WAAW,CAAC;AAEd,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;AAE5E,MAAM,MAAM,4BAA4B,GAAG,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAAC,CAAC;AAE9E,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IACjD,2FAA2F;IAC3F,IAAI,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG;QAAE,SAAS,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAA;KAAE,CAAC,EAAE,CAAC;IACxD,gDAAgD;IAChD,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAC9B,iEAAiE;IACjE,4BAA4B,EAAE,4BAA4B,CAAC;IAC3D,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACnC,2DAA2D;IAC3D,wBAAwB,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CAClE,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,GAC9B,IAAI,CAAC,WAAW,CAAC,oBAAoB,CAAC,EAAE,UAAU,GAAG,KAAK,CAAC,CAAC;AAE9D,KAAK,MAAM,GAAG,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EACtC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;CAAE,KAC5D,KAAK,CAAC,YAAY,CAAC;AA0FxB,eAAO,MAAM,IAAI,EAAoB,MAAM,CAAC;AAE5C,eAAO,MAAM,mBAAmB,GAAI,uCAIjC,wBAAwB,mDAgB1B,CAAC"}

package/esm/chips/Chip.css

@@ -1,2 +1 @@
-@layer cds{.contentCss-chdcix9{-webkit-transition:background 150ms cubic-bezier(0.6,0,0.15,1);transition:background 150ms cubic-bezier(0.6,0,0.15,1);}
-.containerCss-c1792b5d{max-height:-webkit-fit-content;max-height:-moz-fit-content;max-height:fit-content;min-width:min(fit-content,200px);}}
+@layer cds{.transitionCss-thdcix9{-webkit-transition:background 150ms cubic-bezier(0.6,0,0.15,1);transition:background 150ms cubic-bezier(0.6,0,0.15,1);}}

package/esm/chips/Chip.js

@@ -1,4 +1,4 @@
-const _excluded = ["children", "start", "end", "maxWidth", "inverted", "compact", "numberOfLines", "onClick", "testID", "accessibilityLabel", "contentStyle", "borderRadius", "background"];
+const _excluded = ["as", "alignItems", "width", "height", "compact", "gap", "start", "end", "paddingX", "paddingY", "padding", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd", "justifyContent", "children", "maxWidth", "inverted", "numberOfLines", "testID", "contentStyle", "borderRadius", "background", "style", "className", "styles", "classNames", "font", "onClick"];
 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; }
@@ -6,74 +6,105 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 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; }
-import React, { forwardRef, Fragment, memo } from 'react';
+import { forwardRef, Fragment, memo, useMemo } from 'react';
 import { curves, durations } from '@coinbase/cds-common/motion/tokens';
 import { chipMaxWidth } from '@coinbase/cds-common/tokens/chip';
+import { cx } from '../cx';
 import { Box, HStack } from '../layout';
-import { Pressable } from '../system/Pressable';
-import { InvertedThemeProvider } from '../system/ThemeProvider';
+import { InvertedThemeProvider, Pressable } from '../system';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const contentCss = "contentCss-chdcix9";
-
-// styles that clamp the width and height of the Chip container
-const containerCss = "containerCss-c1792b5d";
+const transitionCss = "transitionCss-thdcix9";
 
 /**
  * This is a basic Chip component used to create all Chip components.
+ * When onClick is provided, the ref will be typed as HTMLButtonElement.
+ * When onClick is not provided, the ref will be typed as HTMLDivElement.
  */
 export const Chip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Chip(_ref, ref) {
   let {
-      children,
+      as,
+      alignItems = 'center',
+      width = 'fit-content',
+      height = 'fit-content',
+      compact,
+      gap = 1,
       start,
       end,
+      paddingX = compact ? 1.5 : 2,
+      paddingY = compact ? 0.5 : 1,
+      padding,
+      paddingTop,
+      paddingBottom,
+      paddingStart,
+      paddingEnd,
+      justifyContent,
+      children,
       maxWidth = chipMaxWidth,
       inverted,
-      compact,
       numberOfLines = 1,
-      onClick,
       testID,
-      accessibilityLabel,
       contentStyle,
       borderRadius = 700,
-      background = 'bgSecondary'
+      background = 'bgSecondary',
+      style,
+      className,
+      styles,
+      classNames,
+      font = compact ? 'label1' : 'headline',
+      onClick
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const WrapperComponent = inverted ? InvertedThemeProvider : Fragment;
-  const content = /*#__PURE__*/_jsxs(HStack, {
-    alignItems: "center",
-    background: onClick ? undefined : background,
-    borderRadius: borderRadius,
-    className: contentCss,
-    gap: 1,
-    maxWidth: maxWidth,
-    paddingX: compact ? 1 : 2,
-    paddingY: compact ? 0.5 : 1,
-    style: contentStyle,
-    testID: !onClick ? testID : undefined,
-    children: [start, typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
-      font: "headline",
-      numberOfLines: numberOfLines,
-      children: children
-    }) : children, end]
-  });
-
-  // The wrapping Box ensures that the layout is consistent since the child pressable and provider child elements conditionally render
-  return /*#__PURE__*/_jsx(Box, {
-    className: containerCss,
-    display: "block",
-    children: /*#__PURE__*/_jsx(WrapperComponent, {
-      children: onClick ? /*#__PURE__*/_jsx(Pressable, _objectSpread(_objectSpread({
-        ref: ref,
-        accessibilityLabel: accessibilityLabel,
-        background: background,
-        borderRadius: borderRadius,
-        onClick: onClick,
-        testID: testID
-      }, props), {}, {
-        children: content
-      })) : content
-    })
-  });
+  const containerProps = {
+    background,
+    borderRadius,
+    className: cx(transitionCss, className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
+    style: _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root),
+    testID,
+    width,
+    height,
+    maxWidth
+  };
+  const content = useMemo(() => {
+    return /*#__PURE__*/_jsxs(HStack, {
+      alignItems: alignItems,
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.content,
+      gap: gap,
+      justifyContent: justifyContent,
+      maxWidth: maxWidth,
+      padding: padding,
+      paddingBottom: paddingBottom,
+      paddingEnd: paddingEnd,
+      paddingStart: paddingStart,
+      paddingTop: paddingTop,
+      paddingX: paddingX,
+      paddingY: paddingY,
+      style: _objectSpread(_objectSpread({}, contentStyle), styles === null || styles === void 0 ? void 0 : styles.content),
+      children: [start, typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
+        flexShrink: 1,
+        font: font,
+        numberOfLines: numberOfLines,
+        children: children
+      }) : children ? /*#__PURE__*/_jsx(Box, {
+        flexShrink: 1,
+        children: children
+      }) : null, end]
+    });
+  }, [alignItems, classNames === null || classNames === void 0 ? void 0 : classNames.content, gap, justifyContent, maxWidth, padding, paddingBottom, paddingEnd, paddingStart, paddingTop, paddingX, paddingY, contentStyle, styles === null || styles === void 0 ? void 0 : styles.content, start, children, font, numberOfLines, end]);
+  return /*#__PURE__*/_jsx(WrapperComponent, _objectSpread(_objectSpread({}, inverted ? {
+    display: 'content'
+  } : {}), {}, {
+    children: onClick ? /*#__PURE__*/_jsx(Pressable, _objectSpread(_objectSpread(_objectSpread({
+      ref: ref,
+      onClick: onClick
+    }, containerProps), props), {}, {
+      children: content
+    })) : /*#__PURE__*/_jsx(HStack, _objectSpread(_objectSpread(_objectSpread({
+      ref: ref
+    }, containerProps), props), {}, {
+      children: content
+    }))
+  }));
 }));
 import "./Chip.css";

package/esm/chips/InputChip.js

@@ -8,7 +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, { forwardRef, memo } from 'react';
 import { Icon } from '../icons/Icon';
-import { Chip } from './Chip';
+import { MediaChip } from './MediaChip';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const InputChip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function InputChip(_ref, ref) {
   let {
@@ -17,14 +17,15 @@ export const InputChip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Inpu
       testID = 'input-chip'
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_jsx(Chip, _objectSpread(_objectSpread({
+  return /*#__PURE__*/_jsx(MediaChip, _objectSpread(_objectSpread({
     ref: ref,
     inverted: true,
     accessibilityLabel: accessibilityLabel,
     end: /*#__PURE__*/_jsx(Icon, {
+      active: true,
       color: "fg",
       name: "close",
-      size: "s",
+      size: "xs",
       testID: testID ? "".concat(testID, "-close-icon") : 'input-chip-close-icon'
     })
   }, props), {}, {

package/esm/chips/MediaChip.js

@@ -0,0 +1,53 @@
+const _excluded = ["start", "children", "end", "compact", "padding", "paddingX", "paddingY", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd"];
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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; }
+import { forwardRef, memo, useMemo } from 'react';
+import { getMediaChipSpacingProps } from '@coinbase/cds-common/chips/getMediaChipSpacingProps';
+import { Chip } from './Chip';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const MediaChip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function MediaChip(_ref, ref) {
+  let {
+      start,
+      children,
+      end,
+      compact,
+      padding,
+      paddingX,
+      paddingY,
+      paddingTop,
+      paddingBottom,
+      paddingStart,
+      paddingEnd
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const spacingProps = useMemo(() => {
+    const defaults = getMediaChipSpacingProps({
+      compact: !!compact,
+      start: !!start,
+      end: !!end,
+      children: !!children
+    });
+    return {
+      padding: padding !== null && padding !== void 0 ? padding : defaults.padding,
+      paddingX: paddingX !== null && paddingX !== void 0 ? paddingX : defaults.paddingX,
+      paddingY: paddingY !== null && paddingY !== void 0 ? paddingY : defaults.paddingY,
+      paddingTop: paddingTop !== null && paddingTop !== void 0 ? paddingTop : defaults.paddingTop,
+      paddingBottom: paddingBottom !== null && paddingBottom !== void 0 ? paddingBottom : defaults.paddingBottom,
+      paddingStart: paddingStart !== null && paddingStart !== void 0 ? paddingStart : defaults.paddingStart,
+      paddingEnd: paddingEnd !== null && paddingEnd !== void 0 ? paddingEnd : defaults.paddingEnd
+    };
+  }, [compact, start, end, children, padding, paddingX, paddingY, paddingTop, paddingBottom, paddingStart, paddingEnd]);
+  return /*#__PURE__*/_jsx(Chip, _objectSpread(_objectSpread(_objectSpread({
+    ref: ref,
+    compact: compact,
+    end: end,
+    start: start
+  }, spacingProps), props), {}, {
+    children: children
+  }));
+}));

package/esm/chips/SelectChip.js

@@ -11,7 +11,7 @@ import { useMergeRefs } from '@coinbase/cds-common/hooks/useMergeRefs';
 import { useRefocusTrigger } from '../controls/useRefocusTrigger';
 import { Dropdown } from '../dropdown';
 import { AnimatedCaret } from '../motion/AnimatedCaret';
-import { Chip } from './Chip';
+import { MediaChip } from './MediaChip';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const SELECT_CHIP_DEFAULT_TEST_ID = 'select-chip';
 export const SelectChip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function SelectChip(_ref, ref) {
@@ -76,13 +76,15 @@ export const SelectChip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Sel
     testID: "".concat(testID, "-dropdown"),
     value: value,
     width: width,
-    children: /*#__PURE__*/_jsx(Chip, _objectSpread(_objectSpread({
+    children: /*#__PURE__*/_jsx(MediaChip, _objectSpread(_objectSpread({
       ref: mergedRefs,
       noScaleOnPress: true,
       disabled: disabled,
       end: end !== null && end !== void 0 ? end : /*#__PURE__*/_jsx(AnimatedCaret, {
+        active: true,
         color: "fg",
-        rotate: isOpen ? 0 : 180
+        rotate: isOpen ? 0 : 180,
+        size: "xs"
       }),
       inverted: active,
       onClick: handleOpenMenu,

package/esm/chips/TabbedChips.js

@@ -7,14 +7,13 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 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; }
-import React, { forwardRef, memo, useCallback, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, memo, useCallback, useMemo, useState } from 'react';
 import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
-import { useDimensions } from '../hooks/useDimensions';
+import { useHorizontalScrollToTarget } from '../hooks/useHorizontalScrollToTarget';
 import { HStack } from '../layout';
 import { Paddle, Tabs } from '../tabs';
-import { Chip } from './Chip';
+import { MediaChip } from './MediaChip';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const scrollPadding = 5;
 const scrollContainerCss = "scrollContainerCss-s19l7spv";
 const TabComponent = _ref => {
   let {
@@ -28,7 +27,7 @@ const TabComponent = _ref => {
   } = useTabsContext();
   const isActive = useMemo(() => (activeTab === null || activeTab === void 0 ? void 0 : activeTab.id) === id, [activeTab, id]);
   const handleClick = useCallback(() => updateActiveTab(id), [id, updateActiveTab]);
-  return /*#__PURE__*/_jsx(Chip, _objectSpread(_objectSpread({
+  return /*#__PURE__*/_jsx(MediaChip, _objectSpread(_objectSpread({
     "aria-selected": isActive,
     inverted: isActive,
     onClick: handleClick,
@@ -42,7 +41,6 @@ const TabsActiveIndicatorComponent = () => {
   return null;
 };
 const TabbedChipsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function TabbedChips(_ref2, ref) {
-  var _scrollRef$current, _scrollRef$current2, _scrollRef$current3;
   let {
       tabs,
       value,
@@ -58,57 +56,38 @@ const TabbedChipsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function
       width = '100%'
     } = _ref2,
     props = _objectWithoutProperties(_ref2, _excluded2);
+  const [scrollTarget, setScrollTarget] = useState(null);
+  const {
+    scrollRef,
+    isScrollContentOffscreenLeft,
+    isScrollContentOffscreenRight,
+    handleScroll
+  } = useHorizontalScrollToTarget({
+    activeTarget: scrollTarget,
+    scrollPadding: 50
+  });
   const activeTab = useMemo(() => tabs.find(tab => tab.id === value), [tabs, value]);
-  const scrollRef = useRef(null);
-  const end = Number((_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollWidth) - Number((_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 ? void 0 : _scrollRef$current2.offsetWidth);
-  const canScrollRight = Number((_scrollRef$current3 = scrollRef.current) === null || _scrollRef$current3 === void 0 ? void 0 : _scrollRef$current3.scrollLeft) < end;
-  const [showLeftPaddle, setShowLeftPaddle] = useState(false);
-  const [showRightPaddle, setShowRightPaddle] = useState(canScrollRight);
   const handleChange = useCallback(tabValue => {
     if (tabValue) onChange === null || onChange === void 0 || onChange(tabValue.id);
   }, [onChange]);
-  const handleOnScroll = useCallback(() => {
-    var _scrollRef$current4;
-    const scrollDistance = Number((_scrollRef$current4 = scrollRef.current) === null || _scrollRef$current4 === void 0 ? void 0 : _scrollRef$current4.scrollLeft);
-    const endTrigger = end - scrollPadding;
-    const startTrigger = scrollPadding;
-
-    // Hide/show the left paddle
-    if (scrollDistance > startTrigger) setShowLeftPaddle(true);else if (scrollDistance <= startTrigger) setShowLeftPaddle(false);
-
-    // Hide/show the right paddle
-    if (scrollDistance < endTrigger) setShowRightPaddle(true);else if (scrollDistance >= endTrigger) setShowRightPaddle(false);
-  }, [end]);
-  if (canScrollRight && !showRightPaddle) {
-    var _scrollRef$current5;
-    const scrollLeft = Number((_scrollRef$current5 = scrollRef.current) === null || _scrollRef$current5 === void 0 ? void 0 : _scrollRef$current5.scrollLeft);
-    const endTrigger = end - scrollPadding;
-    if (scrollLeft < endTrigger) {
-      setShowRightPaddle(true);
-    }
-  }
-  const {
-    observe
-  } = useDimensions({
-    onResize: handleOnScroll
-  });
   const handleScrollLeft = useCallback(() => {
-    var _scrollRef$current6;
-    scrollRef === null || scrollRef === void 0 || (_scrollRef$current6 = scrollRef.current) === null || _scrollRef$current6 === void 0 || _scrollRef$current6.scrollTo({
+    var _scrollRef$current;
+    scrollRef === null || scrollRef === void 0 || (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 || _scrollRef$current.scrollTo({
       left: 0,
       behavior: 'smooth'
     });
   }, [scrollRef]);
   const handleScrollRight = useCallback(() => {
-    var _scrollRef$current7;
-    scrollRef === null || scrollRef === void 0 || (_scrollRef$current7 = scrollRef.current) === null || _scrollRef$current7 === void 0 || _scrollRef$current7.scrollTo({
-      left: end,
+    if (!scrollRef.current) return;
+    const maxScroll = scrollRef.current.scrollWidth - scrollRef.current.clientWidth;
+    scrollRef.current.scrollTo({
+      left: maxScroll,
       behavior: 'smooth'
     });
-  }, [end]);
+  }, [scrollRef]);
   return /*#__PURE__*/_jsxs(HStack, _objectSpread(_objectSpread({
-    ref: observe,
     alignItems: "center",
+    overflow: "hidden",
     position: "relative",
     testID: testID,
     width: width
@@ -119,15 +98,13 @@ const TabbedChipsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function
       direction: "left",
       onClick: handleScrollLeft,
       paddleStyle: paddleStyle,
-      show: showLeftPaddle,
+      show: isScrollContentOffscreenLeft,
       variant: "secondary"
     }), /*#__PURE__*/_jsx(HStack, {
       ref: scrollRef,
       alignItems: "center",
       className: scrollContainerCss,
-      onScroll: handleOnScroll
-      // TODO: this overflow styling is necessary for the Paddle feature but cuts off child Chips' focus ring
-      ,
+      onScroll: handleScroll,
       overflow: "auto",
       children: /*#__PURE__*/_jsx(Tabs, _objectSpread({
         ref: ref,
@@ -136,6 +113,7 @@ const TabbedChipsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function
         activeTab: activeTab || null,
         background: background,
         gap: gap,
+        onActiveTabElementChange: setScrollTarget,
         onChange: handleChange,
         role: role,
         tabs: tabs
@@ -146,7 +124,7 @@ const TabbedChipsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function
       direction: "right",
       onClick: handleScrollRight,
       paddleStyle: paddleStyle,
-      show: showRightPaddle,
+      show: isScrollContentOffscreenRight,
       variant: "secondary"
     })]
   }));

package/esm/chips/index.js

@@ -1,5 +1,6 @@
 export * from './Chip';
 export * from './ChipProps';
 export * from './InputChip';
+export * from './MediaChip';
 export * from './SelectChip';
 export * from './TabbedChips';

package/esm/hooks/useHorizontalScrollToTarget.js

@@ -0,0 +1,75 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import throttle from 'lodash/throttle';
+/**
+ * A hook for managing horizontal scrolling with overflow detection.
+ * Useful for horizontally scrollable content that needs to show overflow indicators.
+ * Optionally handles scrolling to an active target element.
+ *
+ * @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 overflowThreshold - Threshold for detecting if content is offscreen (default: 5px)
+ */
+export const useHorizontalScrollToTarget = function () {
+  let {
+    scrollThrottleWaitTime = 200,
+    activeTarget,
+    scrollPadding = 0,
+    overflowThreshold = 5
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const scrollRef = useRef(null);
+  const [isScrollContentOffscreenLeft, setIsScrollContentOffscreenLeft] = useState(false);
+  const [isScrollContentOffscreenRight, setIsScrollContentOffscreenRight] = useState(false);
+  const checkScrollOverflow = useCallback(() => {
+    if (!scrollRef.current) return;
+    const {
+      scrollLeft,
+      scrollWidth,
+      clientWidth
+    } = scrollRef.current;
+    const maxScroll = scrollWidth - clientWidth;
+    setIsScrollContentOffscreenLeft(scrollLeft > overflowThreshold);
+    setIsScrollContentOffscreenRight(scrollLeft < maxScroll - overflowThreshold);
+  }, [overflowThreshold]);
+  const throttledHandleScroll = useRef(throttle(checkScrollOverflow, scrollThrottleWaitTime)).current;
+  const handleScroll = useCallback(() => {
+    throttledHandleScroll();
+  }, [throttledHandleScroll]);
+
+  // Set up ResizeObserver and cleanup throttle on unmount
+  useEffect(() => {
+    throttledHandleScroll();
+    if (!scrollRef.current) return;
+    const resizeObserver = new ResizeObserver(throttledHandleScroll);
+    resizeObserver.observe(scrollRef.current);
+    return () => {
+      resizeObserver.disconnect();
+      throttledHandleScroll.cancel();
+    };
+  }, [throttledHandleScroll]);
+
+  // Scroll to active target when it changes
+  useEffect(() => {
+    if (!activeTarget || !scrollRef.current) return;
+    const container = scrollRef.current;
+    const targetX = activeTarget.offsetLeft;
+    const targetWidth = activeTarget.offsetWidth;
+    const scrollLeft = container.scrollLeft;
+    const containerWidth = container.clientWidth;
+    const isOffscreenLeft = targetX < scrollLeft + scrollPadding;
+    const isOffscreenRight = targetX + targetWidth > scrollLeft + containerWidth - scrollPadding;
+    if (isOffscreenLeft || isOffscreenRight) {
+      const scrollToX = isOffscreenLeft ? Math.max(0, targetX - scrollPadding) : targetX - scrollPadding;
+      container.scrollTo({
+        left: scrollToX,
+        behavior: 'smooth'
+      });
+    }
+  }, [activeTarget, scrollPadding]);
+  return {
+    scrollRef,
+    isScrollContentOffscreenLeft,
+    isScrollContentOffscreenRight,
+    handleScroll
+  };
+};

package/esm/tabs/Tabs.js

@@ -1,5 +1,5 @@
 const _excluded = ["id", "registerRef"],
-  _excluded2 = ["tabs", "TabComponent", "TabsActiveIndicatorComponent", "activeBackground", "activeTab", "disabled", "onChange", "role", "position", "width", "style"],
+  _excluded2 = ["tabs", "TabComponent", "TabsActiveIndicatorComponent", "activeBackground", "activeTab", "onActiveTabElementChange", "disabled", "onChange", "role", "position", "width", "style"],
   _excluded3 = ["id", "Component", "disabled"],
   _excluded4 = ["activeTabRect", "position"];
 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; }
@@ -47,6 +47,7 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) =>
       TabsActiveIndicatorComponent,
       activeBackground,
       activeTab,
+      onActiveTabElementChange,
       disabled,
       onChange,
       role = 'tablist',
@@ -55,19 +56,19 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) =>
       style
     } = _ref2,
     props = _objectWithoutProperties(_ref2, _excluded2);
-  const refMap = useRefMap();
   const api = useTabs({
     tabs,
     activeTab,
     disabled,
     onChange
   });
-  const activeTabRef = activeTab ? refMap.getRef(activeTab.id) : null;
   const [tabsContainerRef, tabsContainerRect] = useMeasure({
     debounce: 20
   });
   const mergedContainerRefs = useMergeRefs(ref, tabsContainerRef);
+  const refMap = useRefMap();
   const activeTabRect = useMemo(() => {
+    const activeTabRef = activeTab ? refMap.getRef(activeTab.id) : null;
     if (!activeTabRef || !tabsContainerRect.width) return defaultRect;
     return {
       x: activeTabRef.offsetLeft,
@@ -75,27 +76,16 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) =>
       width: activeTabRef.offsetWidth,
       height: activeTabRef.offsetHeight
     };
-  }, [activeTabRef, tabsContainerRect]);
-  const tabComponents = useMemo(() => tabs.map(_ref3 => {
-    let {
-        id,
-        Component: CustomTabComponent,
-        disabled: tabDisabled
-      } = _ref3,
-      props = _objectWithoutProperties(_ref3, _excluded3);
-    const RenderedTab = CustomTabComponent !== null && CustomTabComponent !== void 0 ? CustomTabComponent : TabComponent;
-    return /*#__PURE__*/_jsx(TabContainer, {
-      id: id,
-      registerRef: refMap.registerRef,
-      children: /*#__PURE__*/_jsx(RenderedTab, _objectSpread({
-        disabled: tabDisabled,
-        id: id
-      }, props))
-    }, id);
-  }), [tabs, TabComponent, refMap.registerRef]);
+  }, [activeTab, refMap, tabsContainerRect.width]);
   const containerStyle = useMemo(() => _objectSpread({
     opacity: disabled ? accessibleOpacityDisabled : 1
   }, style), [disabled, style]);
+  const registerRef = useCallback((tabId, ref) => {
+    refMap.registerRef(tabId, ref);
+    if ((activeTab === null || activeTab === void 0 ? void 0 : activeTab.id) === tabId) {
+      onActiveTabElementChange === null || onActiveTabElementChange === void 0 || onActiveTabElementChange(ref);
+    }
+  }, [activeTab, onActiveTabElementChange, refMap]);
   return /*#__PURE__*/_jsx(HStack, _objectSpread(_objectSpread({
     ref: mergedContainerRefs,
     position: position,
@@ -108,7 +98,23 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) =>
       children: [/*#__PURE__*/_jsx(TabsActiveIndicatorComponent, {
         activeTabRect: activeTabRect,
         background: activeBackground
-      }), tabComponents]
+      }), tabs.map(_ref3 => {
+        let {
+            id,
+            Component: CustomTabComponent,
+            disabled: tabDisabled
+          } = _ref3,
+          props = _objectWithoutProperties(_ref3, _excluded3);
+        const RenderedTab = CustomTabComponent !== null && CustomTabComponent !== void 0 ? CustomTabComponent : TabComponent;
+        return /*#__PURE__*/_jsx(TabContainer, {
+          id: id,
+          registerRef: registerRef,
+          children: /*#__PURE__*/_jsx(RenderedTab, _objectSpread({
+            disabled: tabDisabled,
+            id: id
+          }, props))
+        }, id);
+      })]
     })
   }));
 }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "8.18.0",
+  "version": "8.19.0",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -147,7 +147,7 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.18.0",
+    "@coinbase/cds-common": "^8.19.0",
     "@coinbase/cds-icons": "^5.5.0",
     "@coinbase/cds-illustrations": "^4.25.0",
     "@coinbase/cds-lottie-files": "^3.3.2",