@coinbase/cds-web 8.51.0 → 8.52.0

package/CHANGELOG.md

@@ -8,6 +8,15 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.52.0 (3/10/2026 PST)
+
+#### 🚀 Updates
+
+- A11y improvements to Fallback, Spinner, and LottieStatusAnimation. [[#388](https://github.com/coinbase/cds/pull/388)]
+- Simplify the ProgressBar component implementation. [[#388](https://github.com/coinbase/cds/pull/388)]
+- Use shapeBorderRadius tokens in RemoteImage/RemoteImageGroup. [[#388](https://github.com/coinbase/cds/pull/388)]
+- Removed useFallbackShape implementation from web and reuse the same hook defined in common. [[#388](https://github.com/coinbase/cds/pull/388)]
+
 ## 8.51.0 (3/9/2026 PST)
 
 #### 🚀 Updates

package/dts/animation/Lottie.d.ts

@@ -1,20 +1,11 @@
 import React from 'react';
 import type { LottiePlayer } from '@coinbase/cds-common/types/LottiePlayer';
 import type { LottieSource } from '@coinbase/cds-common/types/LottieSource';
+import type { LottieProps } from './types';
 export declare const Lottie: React.MemoExoticComponent<
   React.ForwardRefExoticComponent<
-    Omit<
-      import('../layout').BoxBaseProps,
-      'justifyContent' | 'alignContent' | 'flexDirection' | 'flexWrap'
-    > & {
-      autoplay?: boolean;
-      loop?: boolean;
-      onAnimationFinish?: () => void;
-      resizeMode?: 'cover' | 'contain' | 'center';
-      source: LottieSource<string>;
-      handlers?: import('./types').LottieEventHandlersMap;
-      filterSize?: import('lottie-web').SVGRendererConfig['filterSize'];
-    } & React.RefAttributes<LottiePlayer<LottieSource<any>>>
+    Omit<LottieProps<string, LottieSource<string>>, 'ref'> &
+      React.RefAttributes<LottiePlayer<LottieSource<any>>>
   >
 >;
 //# sourceMappingURL=Lottie.d.ts.map

package/dts/animation/Lottie.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Lottie.d.ts","sourceRoot":"","sources":["../../src/animation/Lottie.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6D,MAAM,OAAO,CAAC;AAElF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yCAAyC,CAAC;AAC5E,OAAO,KAAK,EAAsB,YAAY,EAAE,MAAM,yCAAyC,CAAC;AAsLhG,eAAO,MAAM,MAAM;;;;;;;;0DAyElB,CAAC"}
+{"version":3,"file":"Lottie.d.ts","sourceRoot":"","sources":["../../src/animation/Lottie.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6D,MAAM,OAAO,CAAC;AAElF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yCAAyC,CAAC;AAC5E,OAAO,KAAK,EAAsB,YAAY,EAAE,MAAM,yCAAyC,CAAC;AAMhG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAgL3C,eAAO,MAAM,MAAM,2KAyElB,CAAC"}

package/dts/animation/LottieStatusAnimation.d.ts

@@ -1,11 +1,31 @@
-import React from 'react';
-import type { LottieStatusAnimationProps } from '@coinbase/cds-common/types/LottieStatusAnimationProps';
-export declare const LottieStatusAnimation: React.MemoExoticComponent<
+import type { DimensionValue } from '@coinbase/cds-common/types/DimensionStyles';
+import type { SharedAccessibilityProps } from '@coinbase/cds-common/types/SharedAccessibilityProps';
+import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
+import type { LottieStatus } from 'packages/common/dts/types/LottieStatus';
+type LottieStatusAnimationBaseProps = {
+  status?: LottieStatus;
+  onFinish?: () => void;
+};
+type LottieStatusAnimationPropsWithWidth = {
+  width: DimensionValue;
+} & LottieStatusAnimationBaseProps;
+type LottieStatusAnimationPropsWithHeight = {
+  height: DimensionValue;
+} & LottieStatusAnimationBaseProps;
+export type LottieStatusAnimationProps = (
+  | LottieStatusAnimationPropsWithWidth
+  | LottieStatusAnimationPropsWithHeight
+) &
+  SharedProps &
+  SharedAccessibilityProps;
+export declare const LottieStatusAnimation: import('react').MemoExoticComponent<
   ({
     status,
     onFinish,
     testID,
+    accessibilityLabel,
     ...otherProps
   }: LottieStatusAnimationProps) => import('react/jsx-runtime').JSX.Element
 >;
+export {};
 //# sourceMappingURL=LottieStatusAnimation.d.ts.map

package/dts/animation/LottieStatusAnimation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LottieStatusAnimation.d.ts","sourceRoot":"","sources":["../../src/animation/LottieStatusAnimation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8C,MAAM,OAAO,CAAC;AAGnE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,uDAAuD,CAAC;AAQxG,eAAO,MAAM,qBAAqB,0EAC0B,0BAA0B,6CA2BrF,CAAC"}
+{"version":3,"file":"LottieStatusAnimation.d.ts","sourceRoot":"","sources":["../../src/animation/LottieStatusAnimation.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4CAA4C,CAAC;AAEjF,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAG1E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AAM3E,KAAK,8BAA8B,GAAG;IACpC,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,KAAK,mCAAmC,GAAG;IACzC,KAAK,EAAE,cAAc,CAAC;CACvB,GAAG,8BAA8B,CAAC;AAEnC,KAAK,oCAAoC,GAAG;IAC1C,MAAM,EAAE,cAAc,CAAC;CACxB,GAAG,8BAA8B,CAAC;AAEnC,MAAM,MAAM,0BAA0B,GAAG,CACrC,mCAAmC,GACnC,oCAAoC,CACvC,GACC,WAAW,GACX,wBAAwB,CAAC;AAC3B,eAAO,MAAM,qBAAqB,wGAO7B,0BAA0B,6CAmC9B,CAAC"}

package/dts/animation/types.d.ts

@@ -1,6 +1,6 @@
 import type { LottieSource } from '@coinbase/cds-common/types/LottieSource';
 import type { AnimationEventName, AnimationItem, SVGRendererConfig } from 'lottie-web';
-import type { BoxBaseProps } from '../layout';
+import type { BoxBaseProps, BoxDefaultElement, BoxProps } from '../layout';
 export type LottieEventHandlersMap = {
   [key in LottieListener['name']]?: LottieListener['handler'];
 };
@@ -15,12 +15,10 @@ export type LottieBaseProps<T extends string, Source extends LottieSource<T>> =
   /**
    * A boolean flag indicating whether or not the animation should start automatically when
    * mounted. This only affects the imperative API.
-   * @default false
    */
   autoplay?: boolean;
   /**
    * A boolean flag indicating whether or not the animation should loop.
-   * @default false
    */
   loop?: boolean;
   /**
@@ -50,6 +48,7 @@ export type LottieBaseProps<T extends string, Source extends LottieSource<T>> =
 export type LottieProps<T extends string, Source extends LottieSource<T>> = LottieBaseProps<
   T,
   Source
->;
+> &
+  BoxProps<BoxDefaultElement>;
 export type LottieAnimationRef = React.MutableRefObject<AnimationItem | undefined>;
 //# sourceMappingURL=types.d.ts.map

package/dts/animation/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/animation/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yCAAyC,CAAC;AAC5E,OAAO,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAEvF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAE9C,MAAM,MAAM,sBAAsB,GAAG;KAClC,GAAG,IAAI,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC;CAC5D,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,kBAAkB,CAAC;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,EAAE,MAAM,SAAS,YAAY,CAAC,CAAC,CAAC,IAAI,IAAI,CAClF,YAAY,EACZ,cAAc,GAAG,gBAAgB,GAAG,UAAU,GAAG,eAAe,CACjE,GAAG;IACF;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC5C;;;OAGG;IACH,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,sBAAsB,CAAC;IAClC;;;OAGG;IACH,UAAU,CAAC,EAAE,iBAAiB,CAAC,YAAY,CAAC,CAAC;CAC9C,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,MAAM,SAAS,YAAY,CAAC,CAAC,CAAC,IAAI,eAAe,CACzF,CAAC,EACD,MAAM,CACP,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,gBAAgB,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/animation/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yCAAyC,CAAC;AAC5E,OAAO,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAEvF,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAE3E,MAAM,MAAM,sBAAsB,GAAG;KAClC,GAAG,IAAI,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC;CAC5D,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,kBAAkB,CAAC;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,EAAE,MAAM,SAAS,YAAY,CAAC,CAAC,CAAC,IAAI,IAAI,CAClF,YAAY,EACZ,cAAc,GAAG,gBAAgB,GAAG,UAAU,GAAG,eAAe,CACjE,GAAG;IACF;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC5C;;;OAGG;IACH,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,sBAAsB,CAAC;IAClC;;;OAGG;IACH,UAAU,CAAC,EAAE,iBAAiB,CAAC,YAAY,CAAC,CAAC;CAC9C,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,MAAM,SAAS,YAAY,CAAC,CAAC,CAAC,IAAI,eAAe,CACzF,CAAC,EACD,MAAM,CACP,GACC,QAAQ,CAAC,iBAAiB,CAAC,CAAC;AAE9B,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,gBAAgB,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC"}

package/dts/cells/ContentCellFallback.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { FallbackRectWidthProps } from '@coinbase/cds-common/types';
+import type { SharedAccessibilityProps } from '@coinbase/cds-common/types/SharedAccessibilityProps';
 import { type CellAccessoryType } from './CellAccessory';
 import type { CellMediaType } from './CellMedia';
 import type { ContentCellBaseProps } from './ContentCell';
@@ -8,7 +9,8 @@ type ContentCellFallbackSpacingProps = Pick<
   'innerSpacing' | 'outerSpacing' | 'spacingVariant'
 >;
 export type ContentCellFallbackProps = FallbackRectWidthProps &
-  ContentCellFallbackSpacingProps & {
+  ContentCellFallbackSpacingProps &
+  Pick<SharedAccessibilityProps, 'accessibilityLabel'> & {
     /** Accessory to display at the end of the cell. */
     accessory?: CellAccessoryType;
     /** Custom accessory rendered at the end of the cell. Takes precedence over `accessory`. */

package/dts/cells/ContentCellFallback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentCellFallback.d.ts","sourceRoot":"","sources":["../../src/cells/ContentCellFallback.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAOzE,OAAO,EAAiB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAI1D,KAAK,+BAA+B,GAAG,IAAI,CACzC,oBAAoB,EACpB,cAAc,GAAG,cAAc,GAAG,gBAAgB,CACnD,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,sBAAsB,GAC3D,+BAA+B,GAAG;IAChC,mDAAmD;IACnD,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,2FAA2F;IAC3F,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,mCAAmC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAMJ,eAAO,MAAM,mBAAmB,sDA6F9B,CAAC"}
+{"version":3,"file":"ContentCellFallback.d.ts","sourceRoot":"","sources":["../../src/cells/ContentCellFallback.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACzE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AAQpG,OAAO,EAAiB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAgB1D,KAAK,+BAA+B,GAAG,IAAI,CACzC,oBAAoB,EACpB,cAAc,GAAG,cAAc,GAAG,gBAAgB,CACnD,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,sBAAsB,GAC3D,+BAA+B,GAC/B,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GAAG;IACrD,mDAAmD;IACnD,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,2FAA2F;IAC3F,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,mCAAmC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAMJ,eAAO,MAAM,mBAAmB,sDAmG9B,CAAC"}

package/dts/cells/ListCellFallback.d.ts

@@ -1,10 +1,12 @@
 import type { CSSProperties, ReactNode } from 'react';
 import type { FallbackRectWidthProps, SharedProps } from '@coinbase/cds-common/types';
+import type { SharedAccessibilityProps } from '@coinbase/cds-common/types/SharedAccessibilityProps';
 import { type CellAccessoryType } from './CellAccessory';
 import type { CellMediaType } from './CellMedia';
 import { type ListCellBaseProps } from './ListCell';
 export type ListCellFallbackBaseProps = SharedProps &
   FallbackRectWidthProps &
+  Pick<SharedAccessibilityProps, 'accessibilityLabel'> &
   Pick<ListCellBaseProps, 'innerSpacing' | 'outerSpacing' | 'spacingVariant'> & {
     /** Accessory to display at the end of the cell. */
     accessory?: CellAccessoryType;

package/dts/cells/ListCellFallback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListCellFallback.d.ts","sourceRoot":"","sources":["../../src/cells/ListCellFallback.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAE,sBAAsB,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAOtF,OAAO,EAAiB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAgD,KAAK,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAGlG,MAAM,MAAM,yBAAyB,GAAG,WAAW,GACjD,sBAAsB,GACtB,IAAI,CAAC,iBAAiB,EAAE,cAAc,GAAG,cAAc,GAAG,gBAAgB,CAAC,GAAG;IAC5E,mDAAmD;IACnD,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,2FAA2F;IAC3F,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,mCAAmC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mCAAmC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,iCAAiC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEJ,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,GAAG;IAC9D,0DAA0D;IAC1D,UAAU,CAAC,EAAE;QACX,uDAAuD;QACvD,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,yCAAyC;QACzC,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,4CAA4C;QAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,8CAA8C;QAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,2CAA2C;QAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,wCAAwC;QACxC,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,8CAA8C;QAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;IACF,qDAAqD;IACrD,MAAM,CAAC,EAAE;QACP,kEAAkE;QAClE,UAAU,CAAC,EAAE,aAAa,CAAC;QAC3B,4CAA4C;QAC5C,MAAM,CAAC,EAAE,aAAa,CAAC;QACvB,+CAA+C;QAC/C,SAAS,CAAC,EAAE,aAAa,CAAC;QAC1B,iDAAiD;QACjD,SAAS,CAAC,EAAE,aAAa,CAAC;QAC1B,8CAA8C;QAC9C,QAAQ,CAAC,EAAE,aAAa,CAAC;QACzB,2CAA2C;QAC3C,KAAK,CAAC,EAAE,aAAa,CAAC;QACtB,iDAAiD;QACjD,WAAW,CAAC,EAAE,aAAa,CAAC;KAC7B,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,gBAAgB,6DA6L3B,CAAC"}
+{"version":3,"file":"ListCellFallback.d.ts","sourceRoot":"","sources":["../../src/cells/ListCellFallback.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAE,sBAAsB,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACtF,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AAoBpG,OAAO,EAAiB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAgD,KAAK,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAGlG,MAAM,MAAM,yBAAyB,GAAG,WAAW,GACjD,sBAAsB,GACtB,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GACpD,IAAI,CAAC,iBAAiB,EAAE,cAAc,GAAG,cAAc,GAAG,gBAAgB,CAAC,GAAG;IAC5E,mDAAmD;IACnD,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,2FAA2F;IAC3F,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,mCAAmC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mCAAmC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,iCAAiC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEJ,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,GAAG;IAC9D,0DAA0D;IAC1D,UAAU,CAAC,EAAE;QACX,uDAAuD;QACvD,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,yCAAyC;QACzC,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,4CAA4C;QAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,8CAA8C;QAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,2CAA2C;QAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,wCAAwC;QACxC,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,8CAA8C;QAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;IACF,qDAAqD;IACrD,MAAM,CAAC,EAAE;QACP,kEAAkE;QAClE,UAAU,CAAC,EAAE,aAAa,CAAC;QAC3B,4CAA4C;QAC5C,MAAM,CAAC,EAAE,aAAa,CAAC;QACvB,+CAA+C;QAC/C,SAAS,CAAC,EAAE,aAAa,CAAC;QAC1B,iDAAiD;QACjD,SAAS,CAAC,EAAE,aAAa,CAAC;QAC1B,8CAA8C;QAC9C,QAAQ,CAAC,EAAE,aAAa,CAAC;QACzB,2CAA2C;QAC3C,KAAK,CAAC,EAAE,aAAa,CAAC;QACtB,iDAAiD;QACjD,WAAW,CAAC,EAAE,aAAa,CAAC;KAC7B,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,gBAAgB,6DAsM3B,CAAC"}

package/dts/cells/MediaFallback.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import { type SharedProps } from '@coinbase/cds-common/types/SharedProps';
+import { type fallbackDefaultElement, type FallbackProps } from '../layout/Fallback';
 import type { CellMediaType } from './CellMedia';
 export type MediaFallbackProps = {
   type: CellMediaType;
-} & SharedProps;
+} & Omit<FallbackProps<typeof fallbackDefaultElement>, 'width' | 'height' | 'shape'>;
 export declare const MediaFallback: React.NamedExoticComponent<MediaFallbackProps>;
 //# sourceMappingURL=MediaFallback.d.ts.map

package/dts/cells/MediaFallback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MediaFallback.d.ts","sourceRoot":"","sources":["../../src/cells/MediaFallback.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAI1E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,aAAa,CAAC;CACrB,GAAG,WAAW,CAAC;AAEhB,eAAO,MAAM,aAAa,gDAMxB,CAAC"}
+{"version":3,"file":"MediaFallback.d.ts","sourceRoot":"","sources":["../../src/cells/MediaFallback.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAGpC,OAAO,EAAY,KAAK,sBAAsB,EAAE,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAE/F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,aAAa,CAAC;CACrB,GAAG,IAAI,CAAC,aAAa,CAAC,OAAO,sBAAsB,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAC;AAErF,eAAO,MAAM,aAAa,gDASxB,CAAC"}

package/dts/layout/Fallback.d.ts

@@ -1,19 +1,11 @@
 import React from 'react';
+import {
+  useFallbackShape,
+  type UseFallbackShapeOptions,
+} from '@coinbase/cds-common/hooks/useFallbackShape';
 import type { Shape } from '@coinbase/cds-common/types';
 import type { Polymorphic } from '../core/polymorphism';
 import { type BoxBaseProps } from './Box';
-export type UseFallbackShapeOptions = {
-  disableRandomRectWidth?: boolean;
-  rectWidthVariant?: number;
-};
-export declare function useFallbackShape(
-  shape: Shape,
-  baseWidth: number | string,
-  options?: UseFallbackShapeOptions,
-): {
-  borderRadius: number;
-  width: string | number;
-};
 export declare const fallbackDefaultElement = 'div';
 export type FallbackDefaultElement = typeof fallbackDefaultElement;
 export type FallbackBaseProps = Polymorphic.ExtendableProps<
@@ -45,5 +37,5 @@ type FallbackComponent = (<AsComponent extends React.ElementType = FallbackDefau
 ) => Polymorphic.ReactReturn) &
   Polymorphic.ReactNamed;
 export declare const Fallback: FallbackComponent;
-export {};
+export { useFallbackShape, type UseFallbackShapeOptions };
 //# sourceMappingURL=Fallback.d.ts.map

package/dts/layout/Fallback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Fallback.d.ts","sourceRoot":"","sources":["../../src/layout/Fallback.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AAGxD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAI/C,MAAM,MAAM,uBAAuB,GAAG;IACpC,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,MAAM,GAAG,MAAM,EAC1B,OAAO,CAAC,EAAE,uBAAuB;;;EAkClC;AAmCD,eAAO,MAAM,sBAAsB,QAAQ,CAAC;AAE5C,MAAM,MAAM,sBAAsB,GAAG,OAAO,sBAAsB,CAAC;AAEnE,MAAM,MAAM,iBAAiB,GAAG,WAAW,CAAC,eAAe,CACzD,YAAY,EACZ;IACE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,uDAAuD;IACvD,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CACF,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,IAAI,WAAW,CAAC,KAAK,CAClF,WAAW,EACX,iBAAiB,CAClB,CAAC;AAEF,KAAK,iBAAiB,GAAG,CAAC,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,GAAG,sBAAsB,EACvF,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,KAC9B,WAAW,CAAC,WAAW,CAAC,GAC3B,WAAW,CAAC,UAAU,CAAC;AAEzB,eAAO,MAAM,QAAQ,EAAE,iBAoDtB,CAAC"}
+{"version":3,"file":"Fallback.d.ts","sourceRoot":"","sources":["../../src/layout/Fallback.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EACL,gBAAgB,EAChB,KAAK,uBAAuB,EAC7B,MAAM,6CAA6C,CAAC;AACrD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AAGxD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AA+C/C,eAAO,MAAM,sBAAsB,QAAQ,CAAC;AAE5C,MAAM,MAAM,sBAAsB,GAAG,OAAO,sBAAsB,CAAC;AAEnE,MAAM,MAAM,iBAAiB,GAAG,WAAW,CAAC,eAAe,CACzD,YAAY,EACZ;IACE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,uDAAuD;IACvD,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CACF,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,IAAI,WAAW,CAAC,KAAK,CAClF,WAAW,EACX,iBAAiB,CAClB,CAAC;AAEF,KAAK,iBAAiB,GAAG,CAAC,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,GAAG,sBAAsB,EACvF,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,KAC9B,WAAW,CAAC,WAAW,CAAC,GAC3B,WAAW,CAAC,UAAU,CAAC;AAEzB,eAAO,MAAM,QAAQ,EAAE,iBAqDtB,CAAC;AAIF,OAAO,EAAE,gBAAgB,EAAE,KAAK,uBAAuB,EAAE,CAAC"}

package/dts/media/RemoteImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RemoteImage.d.ts","sourceRoot":"","sources":["../../src/media/RemoteImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAK7C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uCAAuC,CAAC;AACxE,OAAO,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AAI3E,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAQnD,QAAA,MAAM,SAAS;;;CAOd,CAAC;AAsCF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC,GAAG;IACxE,yIAAyI;IACzI,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,OAAO,SAAS,CAAC;IACpC;;;SAGK;IACL,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;;;;SAKK;IACL,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,CAAC;AAEpD,eAAO,MAAM,WAAW,yJAenB,gBAAgB,6CA2CpB,CAAC"}
+{"version":3,"file":"RemoteImage.d.ts","sourceRoot":"","sources":["../../src/media/RemoteImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAM7C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uCAAuC,CAAC;AACxE,OAAO,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AAI3E,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAQnD,QAAA,MAAM,SAAS;;;CAOd,CAAC;AAsCF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC,GAAG;IACxE,yIAAyI;IACzI,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,OAAO,SAAS,CAAC;IACpC;;;SAGK;IACL,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;;;;SAKK;IACL,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,CAAC;AAEpD,eAAO,MAAM,WAAW,yJAenB,gBAAgB,6CA2CpB,CAAC"}

package/dts/media/RemoteImageGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RemoteImageGroup.d.ts","sourceRoot":"","sources":["../../src/media/RemoteImageGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AACjE,OAAO,KAAK,EACV,UAAU,EAGV,KAAK,EACL,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAKpC,OAAO,EAAO,KAAK,iBAAiB,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAK3E,MAAM,MAAM,yBAAyB,GAAG,WAAW,GACjD,wBAAwB,GACxB,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,aAAa,GAAG,aAAa,CAAC,GAAG;IACjE;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC3B;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,uBAAuB;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEJ,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,CAAC;AA4B9D,eAAO,MAAM,gBAAgB,GAAI,4EAS9B,qBAAqB,4CAwFvB,CAAC"}
+{"version":3,"file":"RemoteImageGroup.d.ts","sourceRoot":"","sources":["../../src/media/RemoteImageGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAEjE,OAAO,KAAK,EACV,UAAU,EAEV,KAAK,EACL,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAKpC,OAAO,EAAO,KAAK,iBAAiB,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAK3E,MAAM,MAAM,yBAAyB,GAAG,WAAW,GACjD,wBAAwB,GACxB,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,aAAa,GAAG,aAAa,CAAC,GAAG;IACjE;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC3B;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,uBAAuB;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEJ,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,CAAC;AA4B9D,eAAO,MAAM,gBAAgB,GAAI,4EAS9B,qBAAqB,4CAwFvB,CAAC"}

package/dts/tables/TableCellFallback.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import type { FallbackRectWidthProps } from '@coinbase/cds-common/types/FallbackBaseProps';
+import type { SharedAccessibilityProps } from '@coinbase/cds-common/types/SharedAccessibilityProps';
 import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
 import type { CellMediaType } from '../cells/CellMedia';
 import type { TableCellProps } from './TableCell';
@@ -14,8 +14,9 @@ export type TableCellFallbackProps = {
   end?: CellMediaType;
 } & SharedProps &
   FallbackRectWidthProps &
+  Pick<SharedAccessibilityProps, 'accessibilityLabel'> &
   Pick<TableCellProps, 'width' | 'outerSpacing' | 'innerSpacing' | 'as'>;
-export declare const TableCellFallback: React.MemoExoticComponent<
+export declare const TableCellFallback: import('react').MemoExoticComponent<
   ({
     title,
     start,
@@ -27,6 +28,7 @@ export declare const TableCellFallback: React.MemoExoticComponent<
     innerSpacing,
     disableRandomRectWidth,
     rectWidthVariant,
+    accessibilityLabel,
     ...props
   }: TableCellFallbackProps) => import('react/jsx-runtime').JSX.Element
 >;

package/dts/tables/TableCellFallback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableCellFallback.d.ts","sourceRoot":"","sources":["../../src/tables/TableCellFallback.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AAC3F,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAK1E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAKxD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,MAAM,MAAM,sBAAsB,GAAG;IACnC,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,0DAA0D;IAC1D,GAAG,CAAC,EAAE,aAAa,CAAC;CACrB,GAAG,WAAW,GACb,sBAAsB,GACtB,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,cAAc,GAAG,cAAc,GAAG,IAAI,CAAC,CAAC;AASzE,eAAO,MAAM,iBAAiB,0JAazB,sBAAsB,6CA8C1B,CAAC"}
+{"version":3,"file":"TableCellFallback.d.ts","sourceRoot":"","sources":["../../src/tables/TableCellFallback.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AAC3F,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAK1E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAKxD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAclD,MAAM,MAAM,sBAAsB,GAAG;IACnC,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,0DAA0D;IAC1D,GAAG,CAAC,EAAE,aAAa,CAAC;CACrB,GAAG,WAAW,GACb,sBAAsB,GACtB,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GACpD,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,cAAc,GAAG,cAAc,GAAG,IAAI,CAAC,CAAC;AASzE,eAAO,MAAM,iBAAiB,wLAczB,sBAAsB,6CAsD1B,CAAC"}

package/dts/visualizations/ProgressBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,KAAK,EAAE,wBAAwB,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAOhG,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAI3D,MAAM,MAAM,iBAAiB,GAAG,WAAW,GACzC,IAAI,CAAC,mBAAmB,EAAE,uBAAuB,CAAC,GAClD,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GAAG;IACrD,8DAA8D;IAC9D,QAAQ,EAAE,MAAM,CAAC;IACjB;;SAEK;IACL,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B,CAAC;AAEJ,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,GAAG;IACjD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,4BAA4B;QAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAChC,CAAC;IACF,8EAA8E;IAC9E,UAAU,CAAC,EAAE;QACX,mBAAmB;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,4BAA4B;QAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;CACH,CAAC;AAQF,eAAO,MAAM,WAAW;IAlDpB,8DAA8D;cACpD,MAAM;IAChB;;SAEK;aACI,MAAM;IACf;;OAEG;eACQ,OAAO;IAClB;;;OAGG;YACK,SAAS,CAAC,KAAK;IACvB;;OAEG;qBACc,MAAM,IAAI;IAC3B;;OAEG;uBACgB,MAAM,IAAI;;YAIvB,KAAK,CAAC,aAAa;gBACf,MAAM;IAClB,yEAAyE;aAChE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,4BAA4B;QAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAChC;IACD,8EAA8E;iBACjE;QACX,mBAAmB;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,4BAA4B;QAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB;yCA8FF,CAAC"}
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,wBAAwB,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAOhG,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAI3D,MAAM,MAAM,iBAAiB,GAAG,WAAW,GACzC,IAAI,CAAC,mBAAmB,EAAE,uBAAuB,CAAC,GAClD,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GAAG;IACrD,8DAA8D;IAC9D,QAAQ,EAAE,MAAM,CAAC;IACjB;;SAEK;IACL,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B,CAAC;AAEJ,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,GAAG;IACjD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,4BAA4B;QAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAChC,CAAC;IACF,8EAA8E;IAC9E,UAAU,CAAC,EAAE;QACX,mBAAmB;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,4BAA4B;QAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;CACH,CAAC;AAQF,eAAO,MAAM,WAAW;IAlDpB,8DAA8D;cACpD,MAAM;IAChB;;SAEK;aACI,MAAM;IACf;;OAEG;eACQ,OAAO;IAClB;;;OAGG;YACK,SAAS,CAAC,KAAK;IACvB;;OAEG;qBACc,MAAM,IAAI;IAC3B;;OAEG;uBACgB,MAAM,IAAI;;YAIvB,KAAK,CAAC,aAAa;gBACf,MAAM;IAClB,yEAAyE;aAChE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,4BAA4B;QAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAChC;IACD,8EAA8E;iBACjE;QACX,mBAAmB;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,4BAA4B;QAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB;yCA2FF,CAAC"}

package/esm/animation/Lottie.js

@@ -31,7 +31,7 @@ export const Lottie = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwarded
       resizeMode = 'contain',
       filterSize = defaultFilterSize
     } = _ref,
-    otherProps = _objectWithoutProperties(_ref, _excluded);
+    boxProps = _objectWithoutProperties(_ref, _excluded);
   const {
     containerRef,
     animationRef
@@ -77,7 +77,7 @@ export const Lottie = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwarded
     ref: containerRef,
     as: "div",
     className: lottieCss
-  }, otherProps));
+  }, boxProps));
 }));
 Lottie.displayName = 'Lottie';
 import "./Lottie.css";

package/esm/animation/LottieStatusAnimation.js

@@ -1,4 +1,4 @@
-const _excluded = ["status", "onFinish", "testID"];
+const _excluded = ["status", "onFinish", "testID", "accessibilityLabel"];
 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,7 +6,8 @@ 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, { memo, useCallback, useRef, useState } from 'react';
+import { memo, useCallback, useMemo, useRef, useState } from 'react';
+import { lottieStatusToAccessibilityLabel } from '@coinbase/cds-common/lottie/statusToAccessibilityLabel';
 import { useStatusAnimationPoller } from '@coinbase/cds-common/lottie/useStatusAnimationPoller';
 import { tradeStatus } from '@coinbase/cds-lottie-files/tradeStatus';
 import { Lottie } from './Lottie';
@@ -16,7 +17,8 @@ export const LottieStatusAnimation = /*#__PURE__*/memo(_ref => {
   let {
       status = 'loading',
       onFinish,
-      testID
+      testID,
+      accessibilityLabel
     } = _ref,
     otherProps = _objectWithoutProperties(_ref, _excluded);
   const [, forceUpdate] = useState(0);
@@ -32,9 +34,13 @@ export const LottieStatusAnimation = /*#__PURE__*/memo(_ref => {
       forceUpdate(prev => prev + 1);
     }
   }, []);
+  const label = useMemo(() => accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : lottieStatusToAccessibilityLabel[status], [accessibilityLabel, status]);
   return /*#__PURE__*/_jsx(Lottie, _objectSpread({
     ref: handleRef,
+    accessibilityLabel: label,
+    "aria-live": "polite",
     onAnimationFinish: handlePolling,
+    role: "status",
     source: tradeStatus,
     testID: testID
   }, otherProps));

package/esm/cells/ContentCellFallback.css

@@ -0,0 +1 @@
+@layer cds{.visuallyHiddenCss-vcqrmp1{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;-webkit-clip:rect(0,0,0,0);clip:rect(0,0,0,0);white-space:nowrap;border:0;}}

package/esm/cells/ContentCellFallback.js

@@ -8,6 +8,7 @@ import { CellAccessory } from './CellAccessory';
 import { condensedInnerSpacing, condensedOuterSpacing } from './ListCell';
 import { MediaFallback } from './MediaFallback';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const visuallyHiddenCss = "visuallyHiddenCss-vcqrmp1";
 const fullWidthStyle = {
   width: '100%',
   display: 'block'
@@ -29,7 +30,8 @@ export const ContentCellFallback = /*#__PURE__*/memo(function ContentCellFallbac
     rectWidthVariant,
     spacingVariant = 'normal',
     innerSpacing,
-    outerSpacing
+    outerSpacing,
+    accessibilityLabel = 'Loading'
   } = _ref;
   // We can't use ContentCell here as we need to account for percentage based widths.
   // Flexbox collides with percentages also, so we need to wrap in normal divs.
@@ -44,6 +46,7 @@ export const ContentCellFallback = /*#__PURE__*/memo(function ContentCellFallbac
     borderRadius: spacingVariant === 'condensed' ? 0 : undefined,
     innerSpacing: innerSpacing !== null && innerSpacing !== void 0 ? innerSpacing : spacingVariant === 'condensed' ? condensedInnerSpacing : undefined,
     media: media && /*#__PURE__*/_jsx(MediaFallback, {
+      "aria-hidden": true,
       type: media
     }),
     minHeight: minHeight,
@@ -59,12 +62,16 @@ export const ContentCellFallback = /*#__PURE__*/memo(function ContentCellFallbac
     children: /*#__PURE__*/_jsxs(Box, {
       paddingTop: spacingVariant === 'condensed' ? 0.5 : 0,
       style: fullWidthStyle,
-      children: [meta && /*#__PURE__*/_jsx("div", {
+      children: [accessibilityLabel && /*#__PURE__*/_jsx("span", {
+        className: visuallyHiddenCss,
+        children: accessibilityLabel
+      }), meta && /*#__PURE__*/_jsx("div", {
         style: floatStyle,
         children: /*#__PURE__*/_jsx(Box, {
           flexShrink: 0,
           justifyContent: "flex-end",
           children: /*#__PURE__*/_jsx(Fallback, {
+            "aria-hidden": true,
             percentage: true,
             disableRandomRectWidth: disableRandomRectWidth,
             height: 18,
@@ -73,12 +80,14 @@ export const ContentCellFallback = /*#__PURE__*/memo(function ContentCellFallbac
           })
         })
       }), title && /*#__PURE__*/_jsx(Fallback, {
+        "aria-hidden": true,
         percentage: true,
         disableRandomRectWidth: disableRandomRectWidth,
         height: 18,
         rectWidthVariant: getRectWidthVariant(rectWidthVariant, 1),
         width: 45
       }), subtitle && /*#__PURE__*/_jsx(Fallback, {
+        "aria-hidden": true,
         percentage: true,
         disableRandomRectWidth: disableRandomRectWidth,
         height: subtitleHeight,
@@ -86,6 +95,7 @@ export const ContentCellFallback = /*#__PURE__*/memo(function ContentCellFallbac
         rectWidthVariant: getRectWidthVariant(rectWidthVariant, 2),
         width: 35
       }), description && /*#__PURE__*/_jsx(Fallback, {
+        "aria-hidden": true,
         percentage: true,
         disableRandomRectWidth: disableRandomRectWidth,
         height: 24,
@@ -95,4 +105,5 @@ export const ContentCellFallback = /*#__PURE__*/memo(function ContentCellFallbac
       })]
     })
   });
-});
+});
+import "./ContentCellFallback.css";

package/esm/cells/ListCellFallback.css

@@ -0,0 +1 @@
+@layer cds{.visuallyHiddenCss-vzen5l{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;-webkit-clip:rect(0,0,0,0);clip:rect(0,0,0,0);white-space:nowrap;border:0;}}

package/esm/cells/ListCellFallback.js

@@ -1,4 +1,4 @@
-const _excluded = ["accessory", "accessoryNode", "classNames", "styles", "title", "description", "detail", "subdetail", "media", "disableRandomRectWidth", "rectWidthVariant", "helperText", "subtitle", "spacingVariant", "innerSpacing", "outerSpacing"];
+const _excluded = ["accessory", "accessoryNode", "classNames", "styles", "title", "description", "detail", "subdetail", "media", "disableRandomRectWidth", "rectWidthVariant", "helperText", "subtitle", "spacingVariant", "innerSpacing", "outerSpacing", "accessibilityLabel"];
 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; }
@@ -10,6 +10,7 @@ import { memo, useMemo } from 'react';
 import { getRectWidthVariant } from '@coinbase/cds-common/utils/getRectWidthVariant';
 import { VStack } from '../layout';
 import { Fallback } from '../layout/Fallback';
+const visuallyHiddenCss = "visuallyHiddenCss-vzen5l";
 import { Cell } from './Cell';
 import { CellAccessory } from './CellAccessory';
 import { condensedInnerSpacing, condensedOuterSpacing } from './ListCell';
@@ -32,7 +33,8 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_ref
       subtitle,
       spacingVariant,
       innerSpacing,
-      outerSpacing
+      outerSpacing,
+      accessibilityLabel = 'Loading'
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   // We cant use ListCell here as we need to account for percentage based widths.
@@ -43,6 +45,7 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_ref
       return null;
     }
     return /*#__PURE__*/_jsx(Fallback, {
+      "aria-hidden": true,
       percentage: true,
       className: classNames === null || classNames === void 0 ? void 0 : classNames.helperText,
       disableRandomRectWidth: disableRandomRectWidth,
@@ -65,6 +68,7 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_ref
       style: styles === null || styles === void 0 ? void 0 : styles.detail,
       testID: "list-cell-fallback-detail",
       children: [/*#__PURE__*/_jsx(Fallback, {
+        "aria-hidden": true,
         percentage: true,
         className: classNames === null || classNames === void 0 ? void 0 : classNames.detail,
         disableRandomRectWidth: disableRandomRectWidth,
@@ -73,6 +77,7 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_ref
         style: styles === null || styles === void 0 ? void 0 : styles.detail,
         width: 60
       }), /*#__PURE__*/_jsx(Fallback, {
+        "aria-hidden": true,
         percentage: true,
         className: classNames === null || classNames === void 0 ? void 0 : classNames.subdetail,
         disableRandomRectWidth: disableRandomRectWidth,
@@ -88,6 +93,7 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_ref
       return null;
     }
     return /*#__PURE__*/_jsx(Fallback, {
+      "aria-hidden": true,
       percentage: true,
       className: classNames === null || classNames === void 0 ? void 0 : classNames.title,
       disableRandomRectWidth: disableRandomRectWidth,
@@ -103,6 +109,7 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_ref
       return null;
     }
     return /*#__PURE__*/_jsx(Fallback, {
+      "aria-hidden": true,
       percentage: true,
       className: classNames === null || classNames === void 0 ? void 0 : classNames.subtitle,
       disableRandomRectWidth: disableRandomRectWidth,
@@ -118,6 +125,7 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_ref
       return null;
     }
     return /*#__PURE__*/_jsx(Fallback, {
+      "aria-hidden": true,
       percentage: true,
       className: classNames === null || classNames === void 0 ? void 0 : classNames.description,
       disableRandomRectWidth: disableRandomRectWidth,
@@ -133,11 +141,12 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_ref
       return undefined;
     }
     return /*#__PURE__*/_jsx(MediaFallback, {
+      "aria-hidden": true,
       testID: "list-cell-fallback-media",
       type: media
     });
   }, [media]);
-  return /*#__PURE__*/_jsx(Cell, _objectSpread(_objectSpread({
+  return /*#__PURE__*/_jsxs(Cell, _objectSpread(_objectSpread({
     accessory: accessory ? /*#__PURE__*/_jsx(CellAccessory, {
       type: accessory
     }) : undefined,
@@ -150,13 +159,18 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_ref
     innerSpacing: innerSpacing !== null && innerSpacing !== void 0 ? innerSpacing : spacingVariant === 'condensed' ? condensedInnerSpacing : undefined,
     media: mediaFallback,
     outerSpacing: outerSpacing !== null && outerSpacing !== void 0 ? outerSpacing : spacingVariant === 'condensed' ? condensedOuterSpacing : undefined,
+    position: "relative",
     styles: {
       accessory: styles === null || styles === void 0 ? void 0 : styles.accessory
     }
   }, props), {}, {
-    children: /*#__PURE__*/_jsxs(VStack, {
+    children: [accessibilityLabel && /*#__PURE__*/_jsx("span", {
+      className: visuallyHiddenCss,
+      children: accessibilityLabel
+    }), /*#__PURE__*/_jsxs(VStack, {
       gap: 0.5,
       children: [titleFallback, subtitleFallback, descriptionFallback]
-    })
+    })]
   }));
-});
+});
+import "./ListCellFallback.css";

package/esm/cells/MediaFallback.js

@@ -1,24 +1,30 @@
+const _excluded = ["type"];
+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 React, { memo } from 'react';
 import { imageSize, mediaSize } from '@coinbase/cds-common/tokens/cell';
 import { Fallback } from '../layout/Fallback';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const MediaFallback = /*#__PURE__*/memo(function MediaFallback(_ref) {
   let {
-    type,
-    testID
-  } = _ref;
+      type
+    } = _ref,
+    fallbackProps = _objectWithoutProperties(_ref, _excluded);
   if (type === 'image') {
-    return /*#__PURE__*/_jsx(Fallback, {
+    return /*#__PURE__*/_jsx(Fallback, _objectSpread(_objectSpread({}, fallbackProps), {}, {
       height: imageSize,
       shape: "squircle",
-      testID: testID,
       width: imageSize
-    });
+    }));
   }
-  return /*#__PURE__*/_jsx(Fallback, {
+  return /*#__PURE__*/_jsx(Fallback, _objectSpread(_objectSpread({}, fallbackProps), {}, {
     height: mediaSize,
     shape: "circle",
-    testID: testID,
     width: mediaSize
-  });
+  }));
 });

package/esm/layout/Fallback.css

@@ -1 +1,2 @@
-@layer cds{.fallbackCss-f1n296p1{display:inline-block;position:relative;overflow:hidden;-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:shimmer-fallbackCss-f1n296p1;animation-name:shimmer-fallbackCss-f1n296p1;-webkit-animation-timing-function:linear;animation-timing-function:linear;background-color:rgba(var(--gray60),0.05);background-repeat:no-repeat;background-image:linear-gradient( to right, rgb(var(--gray60),0.05) 0%, rgb(var(--gray60),0) 25%, rgb(var(--gray60),0.1) 50%, rgb(var(--gray60),0) 75%, rgb(var(--gray60),0.05) 100% );}@-webkit-keyframes shimmer-fallbackCss-f1n296p1{0%{background-position:-600px 0;}100%{background-position:600px 0;}}@keyframes shimmer-fallbackCss-f1n296p1{0%{background-position:-600px 0;}100%{background-position:600px 0;}}}
+@layer cds{.fallbackCss-f1n296p1{display:inline-block;position:relative;overflow:hidden;-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:shimmer-fallbackCss-f1n296p1;animation-name:shimmer-fallbackCss-f1n296p1;-webkit-animation-timing-function:linear;animation-timing-function:linear;background-color:rgba(var(--gray60),0.05);background-repeat:no-repeat;background-image:linear-gradient( to right, rgb(var(--gray60),0.05) 0%, rgb(var(--gray60),0) 25%, rgb(var(--gray60),0.1) 50%, rgb(var(--gray60),0) 75%, rgb(var(--gray60),0.05) 100% );}@-webkit-keyframes shimmer-fallbackCss-f1n296p1{0%{background-position:-600px 0;}100%{background-position:600px 0;}}@keyframes shimmer-fallbackCss-f1n296p1{0%{background-position:-600px 0;}100%{background-position:600px 0;}}
+.visuallyHiddenCss-v1e56i3u{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;-webkit-clip:rect(0,0,0,0);clip:rect(0,0,0,0);white-space:nowrap;border:0;}}

package/esm/layout/Fallback.js

@@ -1,4 +1,4 @@
-const _excluded = ["as", "height", "shape", "width", "percentage", "disableRandomRectWidth", "rectWidthVariant"];
+const _excluded = ["as", "height", "shape", "width", "percentage", "disableRandomRectWidth", "rectWidthVariant", "accessibilityLabel"];
 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; }
@@ -7,36 +7,11 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 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, useMemo } from 'react';
+import { useFallbackShape } from '@coinbase/cds-common/hooks/useFallbackShape';
 import { Box } from './Box';
-import { jsx as _jsx } from "react/jsx-runtime";
-const WIDTH_MODIFIERS = [0.5, 0, 0.6, 0.8, 0.1, 0.9, 0.4, 0.2, 0.7, 0.3];
-export function useFallbackShape(shape, baseWidth, options) {
-  const width = useMemo(() => {
-    // When rectangle, lets vary the width a bit so things are
-    // a little less... uniform. Variety is nice.
-    if (shape === 'rectangle' && typeof baseWidth === 'number' && (!(options !== null && options !== void 0 && options.disableRandomRectWidth) || (options === null || options === void 0 ? void 0 : options.rectWidthVariant) !== undefined)) {
-      const modifier = (options === null || options === void 0 ? void 0 : options.rectWidthVariant) !== undefined ? WIDTH_MODIFIERS[options.rectWidthVariant % WIDTH_MODIFIERS.length] : Math.random();
-      const quarter = Math.round(baseWidth / 4);
-      const min = Math.max(baseWidth - quarter, 1);
-      const max = baseWidth + quarter;
-      return Math.floor(modifier * (max - min + 1)) + min;
-    }
-
-    // All other shapes need a fixed aspect ratio
-    return baseWidth;
-  }, [baseWidth, options, shape]);
-  const borderRadius = useMemo(() => {
-    if (shape === 'circle' && Number.isInteger(width)) {
-      return Number(width) / 2;
-    }
-    return shape === 'squircle' ? 8 : 0;
-  }, [shape, width]);
-  return useMemo(() => ({
-    borderRadius,
-    width
-  }), [borderRadius, width]);
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const fallbackCss = "fallbackCss-f1n296p1";
+const visuallyHiddenCss = "visuallyHiddenCss-v1e56i3u";
 export const fallbackDefaultElement = 'div';
 export const Fallback = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
@@ -46,7 +21,8 @@ export const Fallback = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       width: baseWidth,
       percentage,
       disableRandomRectWidth,
-      rectWidthVariant
+      rectWidthVariant,
+      accessibilityLabel = 'Loading'
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const Component = as !== null && as !== void 0 ? as : fallbackDefaultElement;
@@ -65,19 +41,24 @@ export const Fallback = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
     height,
     borderRadius
   }), [percentage, width, backgroundSizeHeight, height, borderRadius]);
-  return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
+  return /*#__PURE__*/_jsxs(Box, _objectSpread(_objectSpread({
     ref: ref,
     as: Component,
     flexGrow: 0,
     flexShrink: 0,
+    position: "relative",
     width: percentage && typeof width === 'number' ? "".concat(Math.min(width, 100), "%") : width
   }, props), {}, {
-    children: /*#__PURE__*/_jsx(Box, {
+    children: [accessibilityLabel && /*#__PURE__*/_jsx("span", {
+      className: visuallyHiddenCss,
+      children: accessibilityLabel
+    }), /*#__PURE__*/_jsx(Box, {
+      "aria-hidden": "true",
       className: fallbackCss,
-      style: style,
-      children: "\xA0"
-    })
+      style: style
+    })]
   }));
 }));
 Fallback.displayName = 'Fallback';
+export { useFallbackShape };
 import "./Fallback.css";

package/esm/media/RemoteImage.css

@@ -3,8 +3,8 @@
 .contain-ct639h6{object-fit:contain;}
 .hexagonOverflowCss-h106avb5{overflow:visible;}
 .fallbackCss-fmd7ixe{background-repeat:no-repeat;background-size:cover;background-position:center;}.light .fallbackCss-fmd7ixe{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJ3aGl0ZSIvPgo8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IiM1QjYxNkUiLz4KPGNpcmNsZSBjeD0iMTYiIGN5PSIxNSIgcj0iMyIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iMTEiIHk9IjYiIHdpZHRoPSI1IiBoZWlnaHQ9IjUiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik01IDE1TDguNSA5TDEyIDE1SDVaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K);}.dark .fallbackCss-fmd7ixe{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJ3aGl0ZSIvPgo8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IiM4QTkxOUUiLz4KPGNpcmNsZSBjeD0iMTYiIGN5PSIxNSIgcj0iMyIgZmlsbD0iIzBBMEIwRCIvPgo8cmVjdCB4PSIxMSIgeT0iNiIgd2lkdGg9IjUiIGhlaWdodD0iNSIgZmlsbD0iIzBBMEIwRCIvPgo8cGF0aCBkPSJNNSAxNUw4LjUgOUwxMiAxNUg1WiIgZmlsbD0iIzBBMEIwRCIvPgo8L3N2Zz4K);}
-.circle-c1oh4yoq{border-radius:1e5px;}
+.circle-c1oh4yoq{border-radius:100000px;}
 .squircle-s1exwfs9{border-radius:8px;}
 .square-s117wpuw{border-radius:4px;}
-.rectangle-r18cj7oi{border-radius:0;}
-.hexagon-h4bc24o{border-radius:0;}}
+.rectangle-r18cj7oi{border-radius:0px;}
+.hexagon-h4bc24o{border-radius:0px;}}

package/esm/media/RemoteImage.js

@@ -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, { memo, useMemo } from 'react';
 import { remoteImageDarkFallbackSrc, remoteImageLightFallbackSrc } from '@coinbase/cds-common/media/remoteImageFallbackSrc';
+import { shapeBorderRadius } from '@coinbase/cds-common/tokens/borderRadius';
 import { cx } from '../cx';
 import { Box } from '../layout/Box';
 import { jsx as _jsx } from "react/jsx-runtime";

package/esm/media/RemoteImageGroup.css

@@ -1,7 +1,7 @@
 @layer cds{.circle-cat65m8{border-radius:100%;}
 .square-s4x9tgq{border-radius:4px;}
-.hexagon-h112niag{border-radius:0;}
+.hexagon-h112niag{border-radius:0px;}
 .squircle-s8clfq8{border-radius:8px;}
-.rectangle-ra2rof2{border-radius:0;}
+.rectangle-ra2rof2{border-radius:0px;}
 .isolateCss-i1shf7o1{isolation:isolate;}
 .excessContainerCss-e1lnj2ws{box-sizing:content-box;}}

package/esm/media/RemoteImageGroup.js

@@ -7,6 +7,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 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, { Children, isValidElement, useMemo } from 'react';
+import { shapeBorderRadius } from '@coinbase/cds-common/tokens/borderRadius';
 import { cx } from '../cx';
 import { useTheme } from '../hooks/useTheme';
 import { Box } from '../layout/Box';

package/esm/tables/TableCellFallback.css

@@ -1 +1,2 @@
-@layer cds{.tableCellCss-t1l01hi5{padding:0;margin:0;vertical-align:middle;border:none;}}
+@layer cds{.visuallyHiddenCss-v1l01hi5{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;-webkit-clip:rect(0,0,0,0);clip:rect(0,0,0,0);white-space:nowrap;border:0;}
+.tableCellCss-t189mbuy{padding:0;margin:0;vertical-align:middle;border:none;}}

package/esm/tables/TableCellFallback.js

@@ -1,4 +1,4 @@
-const _excluded = ["title", "start", "end", "subtitle", "testID", "as", "outerSpacing", "innerSpacing", "disableRandomRectWidth", "rectWidthVariant"];
+const _excluded = ["title", "start", "end", "subtitle", "testID", "as", "outerSpacing", "innerSpacing", "disableRandomRectWidth", "rectWidthVariant", "accessibilityLabel"];
 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,14 +6,15 @@ 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, { memo } from 'react';
+import { memo } from 'react';
 import { getRectWidthVariant } from '@coinbase/cds-common/utils/getRectWidthVariant';
 import { Cell } from '../cells/Cell';
 import { MediaFallback } from '../cells/MediaFallback';
 import { Fallback } from '../layout';
 import { useTableCellSpacing, useTableCellTag, useTableContext } from './hooks/useTable';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const tableCellCss = "tableCellCss-t1l01hi5";
+const visuallyHiddenCss = "visuallyHiddenCss-v1l01hi5";
+const tableCellCss = "tableCellCss-t189mbuy";
 export const TableCellFallback = /*#__PURE__*/memo(_ref => {
   let {
       title,
@@ -25,7 +26,8 @@ export const TableCellFallback = /*#__PURE__*/memo(_ref => {
       outerSpacing,
       innerSpacing,
       disableRandomRectWidth,
-      rectWidthVariant
+      rectWidthVariant,
+      accessibilityLabel = 'Loading Cell'
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const TableCellComponent = useTableCellTag(as);
@@ -46,17 +48,24 @@ export const TableCellFallback = /*#__PURE__*/memo(_ref => {
   }, props), {}, {
     children: /*#__PURE__*/_jsxs(Cell, {
       accessory: end && /*#__PURE__*/_jsx(MediaFallback, {
+        "aria-hidden": true,
         testID: "table-cell-fallback-accessory",
         type: end
       }),
       gap: cellGap,
       innerSpacing: cellInnerSpacing,
       media: start && /*#__PURE__*/_jsx(MediaFallback, {
+        "aria-hidden": true,
         testID: "table-cell-fallback-media",
         type: start
       }),
       outerSpacing: cellOuterSpacing,
-      children: [title && /*#__PURE__*/_jsx(Fallback, {
+      position: "relative",
+      children: [accessibilityLabel && /*#__PURE__*/_jsx("span", {
+        className: visuallyHiddenCss,
+        children: accessibilityLabel
+      }), title && /*#__PURE__*/_jsx(Fallback, {
+        "aria-hidden": true,
         percentage: true,
         disableRandomRectWidth: disableRandomRectWidth,
         height: 24,
@@ -64,6 +73,7 @@ export const TableCellFallback = /*#__PURE__*/memo(_ref => {
         testID: "table-cell-fallback-title",
         width: 45
       }), subtitle && /*#__PURE__*/_jsx(Fallback, {
+        "aria-hidden": true,
         percentage: true,
         disableRandomRectWidth: disableRandomRectWidth,
         height: 16,

package/esm/visualizations/ProgressBar.js

@@ -5,7 +5,6 @@ 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); }
 import React, { forwardRef, memo } from 'react';
 import { animateProgressBaseSpec } from '@coinbase/cds-common/animation/progress';
-import { usePreviousValues } from '@coinbase/cds-common/hooks/usePreviousValues';
 import { useProgressSize } from '@coinbase/cds-common/visualizations/useProgressSize';
 import { m as motion } from 'framer-motion';
 import { cx } from '../cx';
@@ -16,7 +15,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const MotionBox = motion(Box);
 const boxCss = "boxCss-bnvjmt8";
 export const ProgressBar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef) => {
-  var _getPreviousPercent;
   let {
     weight = 'normal',
     progress,
@@ -33,26 +31,22 @@ export const ProgressBar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forw
     onAnimationStart
   } = _ref;
   const height = useProgressSize(weight);
-  const {
-    getPreviousValue: getPreviousPercent,
-    addPreviousValue: addPreviousPercent
-  } = usePreviousValues([disableAnimateOnMount ? progress : 0]);
-  addPreviousPercent(progress);
-  const previousPercent = (_getPreviousPercent = getPreviousPercent()) !== null && _getPreviousPercent !== void 0 ? _getPreviousPercent : 0;
-  const translateXStart = isRtl() ? 100 - previousPercent * 100 : -100 + previousPercent * 100;
-  const translateXEnd = isRtl() ? 100 - progress * 100 : -100 + progress * 100;
+
+  // start position of the progress bar on mount
+  const initialTranslateX = isRtl() ? 100 : -100;
+  const translateX = isRtl() ? 100 - progress * 100 : -100 + progress * 100;
   const motionProps = useMotionProps({
     style: {
       originX: isRtl() ? 'right' : 'left'
     },
     animate: {
-      x: ["".concat(translateXStart, "%"), "".concat(translateXEnd, "%")],
+      x: "".concat(translateX, "%"),
       opacity: 1
     },
     transition: animateProgressBaseSpec,
-    initial: !progress ? false : {
-      x: "".concat(translateXStart, "%")
-    } // skip initial animation if no progress
+    initial: !progress || disableAnimateOnMount ? false : {
+      x: "".concat(initialTranslateX, "%")
+    } // skip initial animation if no progress or disableAnimateOnMount is true
   });
   return /*#__PURE__*/_jsx(HStack, {
     ref: forwardedRef,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "8.51.0",
+  "version": "8.52.0",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -207,7 +207,7 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.51.0",
+    "@coinbase/cds-common": "^8.52.0",
     "@coinbase/cds-icons": "^5.12.0",
     "@coinbase/cds-illustrations": "^4.32.0",
     "@coinbase/cds-lottie-files": "^3.3.4",