@coinbase/cds-web 8.66.2 → 9.0.0-rc.1

package/dts/visualizations/ProgressBar.d.ts

@@ -47,52 +47,50 @@ export type ProgressBarProps = ProgressBaseProps & {
     progress?: string;
   };
 };
-export declare const ProgressBar: React.MemoExoticComponent<
-  React.ForwardRefExoticComponent<
-    SharedProps &
-      Pick<HintMotionBaseProps, 'disableAnimateOnMount'> &
-      Pick<SharedAccessibilityProps, 'accessibilityLabel'> & {
-        /** Number between 0-1 representing the progress percentage */
-        progress?: number;
-        /** Toggle used to change thickness of progress visualization
-         * @default normal
-         * */
-        weight?: Weight;
-        /**
-         * Toggle used to show a disabled progress visualization
-         */
-        disabled?: boolean;
-        /**
-         * Custom progress color.
-         * @default primary
-         */
-        color?: ThemeVars.Color;
-        /**
-         * Callback fired when the progress animation ends.
-         */
-        onAnimationEnd?: () => void;
-        /**
-         * Callback fired when the progress animation starts.
-         */
-        onAnimationStart?: () => void;
-      } & {
-        style?: React.CSSProperties;
-        className?: string;
-        /** Custom styles for individual elements of the ProgressBar component */
-        styles?: {
-          /** Root element */
-          root?: React.CSSProperties;
-          /** Progress fill element */
-          progress?: React.CSSProperties;
-        };
-        /** Custom class names for individual elements of the ProgressBar component */
-        classNames?: {
-          /** Root element */
-          root?: string;
-          /** Progress fill element */
-          progress?: string;
-        };
-      } & React.RefAttributes<HTMLDivElement>
-  >
+export declare const ProgressBar: React.NamedExoticComponent<
+  SharedProps &
+    Pick<HintMotionBaseProps, 'disableAnimateOnMount'> &
+    Pick<SharedAccessibilityProps, 'accessibilityLabel'> & {
+      /** Number between 0-1 representing the progress percentage */
+      progress?: number;
+      /** Toggle used to change thickness of progress visualization
+       * @default normal
+       * */
+      weight?: Weight;
+      /**
+       * Toggle used to show a disabled progress visualization
+       */
+      disabled?: boolean;
+      /**
+       * Custom progress color.
+       * @default primary
+       */
+      color?: ThemeVars.Color;
+      /**
+       * Callback fired when the progress animation ends.
+       */
+      onAnimationEnd?: () => void;
+      /**
+       * Callback fired when the progress animation starts.
+       */
+      onAnimationStart?: () => void;
+    } & {
+      style?: React.CSSProperties;
+      className?: string;
+      /** Custom styles for individual elements of the ProgressBar component */
+      styles?: {
+        /** Root element */
+        root?: React.CSSProperties;
+        /** Progress fill element */
+        progress?: React.CSSProperties;
+      };
+      /** Custom class names for individual elements of the ProgressBar component */
+      classNames?: {
+        /** Root element */
+        root?: string;
+        /** Progress fill element */
+        progress?: string;
+      };
+    } & React.RefAttributes<HTMLDivElement>
 >;
 //# sourceMappingURL=ProgressBar.d.ts.map

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;AACjE,OAAO,KAAK,EAAE,wBAAwB,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAQhG,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,CAAC,EAAE,MAAM,CAAC;IAClB;;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;eACnD,MAAM;IACjB;;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;yCAwFF,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;AAQhG,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,CAAC,EAAE,MAAM,CAAC;IAClB;;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;eACnD,MAAM;IACjB;;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;wCAwFF,CAAC"}

package/dts/visualizations/ProgressCircle.d.ts

@@ -7,7 +7,7 @@ export type ProgressCircleBaseProps = ProgressBaseProps & {
    */
   hideContent?: boolean;
   /**
-   * @deprecated Use hideContent instead. This will be removed in a future major release.
+   * @deprecated Use `hideContent` instead. This will be removed in a future major release.
    * @deprecationExpectedRemoval v8
    * Toggle used to hide the text rendered inside the circle.
    */
@@ -64,69 +64,67 @@ export type ProgressCircleContentProps = Pick<
    */
   color?: ThemeVars.Color;
 };
-export declare const ProgressCircle: React.MemoExoticComponent<
-  React.ForwardRefExoticComponent<
-    import('@coinbase/cds-common').SharedProps &
-      Pick<import('../motion/types').HintMotionBaseProps, 'disableAnimateOnMount'> &
-      Pick<import('@coinbase/cds-common').SharedAccessibilityProps, 'accessibilityLabel'> & {
-        progress?: number;
-        weight?: import('@coinbase/cds-common').Weight;
-        disabled?: boolean;
-        color?: ThemeVars.Color;
-        onAnimationEnd?: () => void;
-        onAnimationStart?: () => void;
-      } & {
-        /**
-         * Toggle used to hide the content node rendered inside the circle.
-         */
-        hideContent?: boolean;
-        /**
-         * @deprecated Use hideContent instead. This will be removed in a future major release.
-         * @deprecationExpectedRemoval v8
-         * Toggle used to hide the text rendered inside the circle.
-         */
-        hideText?: boolean;
-        /**
-         * Optional size in px for the visualization.
-         * This is useful if the visualization is used in an HStack.
-         * If this is omitted the visualization will fill the parent width or height.
-         * Since it's a circular visualization it will fill the smaller of the parent width or height
-         */
-        size?: number;
-        /**
-         * Optional component to override the default content rendered inside the circle.
-         */
-        contentNode?: React.ReactNode;
-        /**
-         * Toggle used to show an indeterminate progress circle.
-         */
-        indeterminate?: boolean;
-      } & {
-        style?: React.CSSProperties;
-        className?: string;
-        /** Custom styles for individual elements of the ProgressCircle component */
-        styles?: {
-          /** Root element */
-          root?: React.CSSProperties;
-          /** SVG element */
-          svg?: React.CSSProperties;
-          /** Background circle element */
-          circle?: React.CSSProperties;
-          /** Foreground progress circle element */
-          progress?: React.CSSProperties;
-        };
-        /** Custom class names for individual elements of the ProgressCircle component */
-        classNames?: {
-          /** Root element */
-          root?: string;
-          /** SVG element */
-          svg?: string;
-          /** Background circle element */
-          circle?: string;
-          /** Foreground progress circle element */
-          progress?: string;
-        };
-      } & React.RefAttributes<HTMLDivElement>
-  >
+export declare const ProgressCircle: React.NamedExoticComponent<
+  import('@coinbase/cds-common').SharedProps &
+    Pick<import('../motion/types').HintMotionBaseProps, 'disableAnimateOnMount'> &
+    Pick<import('@coinbase/cds-common').SharedAccessibilityProps, 'accessibilityLabel'> & {
+      progress?: number;
+      weight?: import('@coinbase/cds-common').Weight;
+      disabled?: boolean;
+      color?: ThemeVars.Color;
+      onAnimationEnd?: () => void;
+      onAnimationStart?: () => void;
+    } & {
+      /**
+       * Toggle used to hide the content node rendered inside the circle.
+       */
+      hideContent?: boolean;
+      /**
+       * @deprecated Use `hideContent` instead. This will be removed in a future major release.
+       * @deprecationExpectedRemoval v8
+       * Toggle used to hide the text rendered inside the circle.
+       */
+      hideText?: boolean;
+      /**
+       * Optional size in px for the visualization.
+       * This is useful if the visualization is used in an HStack.
+       * If this is omitted the visualization will fill the parent width or height.
+       * Since it's a circular visualization it will fill the smaller of the parent width or height
+       */
+      size?: number;
+      /**
+       * Optional component to override the default content rendered inside the circle.
+       */
+      contentNode?: React.ReactNode;
+      /**
+       * Toggle used to show an indeterminate progress circle.
+       */
+      indeterminate?: boolean;
+    } & {
+      style?: React.CSSProperties;
+      className?: string;
+      /** Custom styles for individual elements of the ProgressCircle component */
+      styles?: {
+        /** Root element */
+        root?: React.CSSProperties;
+        /** SVG element */
+        svg?: React.CSSProperties;
+        /** Background circle element */
+        circle?: React.CSSProperties;
+        /** Foreground progress circle element */
+        progress?: React.CSSProperties;
+      };
+      /** Custom class names for individual elements of the ProgressCircle component */
+      classNames?: {
+        /** Root element */
+        root?: string;
+        /** SVG element */
+        svg?: string;
+        /** Background circle element */
+        circle?: string;
+        /** Foreground progress circle element */
+        progress?: string;
+      };
+    } & React.RefAttributes<HTMLDivElement>
 >;
 //# sourceMappingURL=ProgressCircle.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressCircle.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressCircle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAatD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAavD,MAAM,MAAM,uBAAuB,GAAG,iBAAiB,GAAG;IACxD;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,GAAG;IAC1D,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4EAA4E;IAC5E,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,kBAAkB;QAClB,GAAG,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC1B,gCAAgC;QAChC,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC7B,yCAAyC;QACzC,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAChC,CAAC;IACF,iFAAiF;IACjF,UAAU,CAAC,EAAE;QACX,mBAAmB;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,kBAAkB;QAClB,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,gCAAgC;QAChC,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,yCAAyC;QACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAC3C,uBAAuB,EACvB,UAAU,GAAG,uBAAuB,GAAG,UAAU,CAClD,GAAG;IACF;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CACzB,CAAC;AA6EF,eAAO,MAAM,cAAc;;;;;;;;IA5IzB;;OAEG;kBACW,OAAO;IACrB;;;;OAIG;eACQ,OAAO;IAClB;;;;;OAKG;WACI,MAAM;IACb;;OAEG;kBACW,KAAK,CAAC,SAAS;IAC7B;;OAEG;oBACa,OAAO;;YAIf,KAAK,CAAC,aAAa;gBACf,MAAM;IAClB,4EAA4E;aACnE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,kBAAkB;QAClB,GAAG,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC1B,gCAAgC;QAChC,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC7B,yCAAyC;QACzC,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAChC;IACD,iFAAiF;iBACpE;QACX,mBAAmB;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,kBAAkB;QAClB,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,gCAAgC;QAChC,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,yCAAyC;QACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB;yCAgNF,CAAC"}
+{"version":3,"file":"ProgressCircle.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressCircle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAatD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAavD,MAAM,MAAM,uBAAuB,GAAG,iBAAiB,GAAG;IACxD;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,GAAG;IAC1D,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4EAA4E;IAC5E,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,kBAAkB;QAClB,GAAG,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC1B,gCAAgC;QAChC,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC7B,yCAAyC;QACzC,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAChC,CAAC;IACF,iFAAiF;IACjF,UAAU,CAAC,EAAE;QACX,mBAAmB;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,kBAAkB;QAClB,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,gCAAgC;QAChC,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,yCAAyC;QACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAC3C,uBAAuB,EACvB,UAAU,GAAG,uBAAuB,GAAG,UAAU,CAClD,GAAG;IACF;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CACzB,CAAC;AA6EF,eAAO,MAAM,cAAc;;;;;;;;IA5IzB;;OAEG;kBACW,OAAO;IACrB;;;;OAIG;eACQ,OAAO;IAClB;;;;;OAKG;WACI,MAAM;IACb;;OAEG;kBACW,KAAK,CAAC,SAAS;IAC7B;;OAEG;oBACa,OAAO;;YAIf,KAAK,CAAC,aAAa;gBACf,MAAM;IAClB,4EAA4E;aACnE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,kBAAkB;QAClB,GAAG,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC1B,gCAAgC;QAChC,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC7B,yCAAyC;QACzC,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAChC;IACD,iFAAiF;iBACpE;QACX,mBAAmB;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,kBAAkB;QAClB,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,gCAAgC;QAChC,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,yCAAyC;QACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB;wCAgNF,CAAC"}

package/dts/visualizations/VisualizationContainer.d.ts

@@ -1,14 +1,13 @@
 import React from 'react';
-import type { DimensionValue } from '@coinbase/cds-common/types';
 export type VisualizationContainerDimension = {
   width: number;
   height: number;
   circleSize: number;
 };
 export type VisualizationContainerBaseProps = {
-  width: DimensionValue;
-  height: DimensionValue;
-  minHeight?: DimensionValue;
+  width: React.CSSProperties['width'];
+  height: React.CSSProperties['height'];
+  minHeight?: React.CSSProperties['minHeight'];
   children: (dimensions: VisualizationContainerDimension) => React.ReactNode;
 };
 export type VisualizationContainerProps = VisualizationContainerBaseProps;

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

@@ -1 +1 @@
-{"version":3,"file":"VisualizationContainer.d.ts","sourceRoot":"","sources":["../../src/visualizations/VisualizationContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAMjE,MAAM,MAAM,+BAA+B,GAAG;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG;IAC5C,KAAK,EAAE,cAAc,CAAC;IACtB,MAAM,EAAE,cAAc,CAAC;IACvB,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,QAAQ,EAAE,CAAC,UAAU,EAAE,+BAA+B,KAAK,KAAK,CAAC,SAAS,CAAC;CAC5E,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG,+BAA+B,CAAC;AAK1E,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAgBxE,CAAC"}
+{"version":3,"file":"VisualizationContainer.d.ts","sourceRoot":"","sources":["../../src/visualizations/VisualizationContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAMpC,MAAM,MAAM,+BAA+B,GAAG;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG;IAC5C,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACpC,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACtC,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC7C,QAAQ,EAAE,CAAC,UAAU,EAAE,+BAA+B,KAAK,KAAK,CAAC,SAAS,CAAC;CAC5E,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG,+BAA+B,CAAC;AAK1E,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAgBxE,CAAC"}

package/dts/visualizations/chart/CartesianChart.d.ts

@@ -0,0 +1,104 @@
+import React from 'react';
+import { type BoxBaseProps, type BoxProps } from '../../layout';
+import { type ScrubberProviderProps } from './scrubber/ScrubberProvider';
+import {
+  type CartesianAxisConfigProps,
+  type CartesianChartLayout,
+  type ChartInset,
+  type LegendPosition,
+  type Series,
+} from './utils';
+export type CartesianChartBaseProps = BoxBaseProps &
+  Pick<ScrubberProviderProps, 'enableScrubbing' | 'onScrubberPositionChange'> & {
+    /**
+     * Configuration objects that define how to visualize the data.
+     * Each series contains its own data array.
+     */
+    series?: Array<Series>;
+    /**
+     * Chart layout - describes the direction bars/areas grow.
+     * - 'vertical' (default): Bars grow vertically. X is category axis, Y is value axis.
+     * - 'horizontal': Bars grow horizontally. Y is category axis, X is value axis.
+     * @default 'vertical'
+     */
+    layout?: CartesianChartLayout;
+    /**
+     * Whether to animate the chart.
+     * @default true
+     */
+    animate?: boolean;
+    /**
+     * Configuration for x-axis(es). Can be a single config or array of configs.
+     *
+     * @note Multiple x-axis configs are only supported when `layout="horizontal"`.
+     */
+    xAxis?: Partial<CartesianAxisConfigProps> | Partial<CartesianAxisConfigProps>[];
+    /**
+     * Configuration for y-axis(es). Can be a single config or array of configs.
+     *
+     * @note Multiple y-axis configs are only supported when `layout="vertical"`.
+     */
+    yAxis?: Partial<CartesianAxisConfigProps> | Partial<CartesianAxisConfigProps>[];
+    /**
+     * Inset around the entire chart (outside the axes).
+     */
+    inset?: number | Partial<ChartInset>;
+    /**
+     * Whether to show the legend or a custom legend element.
+     * - `true` renders the default Legend component
+     * - A React element renders that element as the legend
+     * - `false` or omitted hides the legend
+     */
+    legend?: boolean | React.ReactNode;
+    /**
+     * Position of the legend relative to the chart.
+     * @default 'bottom'
+     */
+    legendPosition?: LegendPosition;
+    /**
+     * Accessibility label for the legend group.
+     * @default 'Legend'
+     */
+    legendAccessibilityLabel?: string;
+  };
+export type CartesianChartProps = Omit<BoxProps<'div'>, 'title'> &
+  CartesianChartBaseProps & {
+    /**
+     * Custom class name for the root element.
+     */
+    className?: string;
+    /**
+     * Custom class names for the component.
+     */
+    classNames?: {
+      /**
+       * Custom class name for the root element.
+       */
+      root?: string;
+      /**
+       * Custom class name for the chart SVG element.
+       */
+      chart?: string;
+    };
+    /**
+     * Custom styles for the root element.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Custom styles for the component.
+     */
+    styles?: {
+      /**
+       * Custom styles for the root element.
+       */
+      root?: React.CSSProperties;
+      /**
+       * Custom styles for the chart SVG element.
+       */
+      chart?: React.CSSProperties;
+    };
+  };
+export declare const CartesianChart: React.NamedExoticComponent<
+  Omit<CartesianChartProps, 'ref'> & React.RefAttributes<SVGSVGElement>
+>;
+//# sourceMappingURL=CartesianChart.d.ts.map

package/dts/visualizations/chart/CartesianChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartesianChart.d.ts","sourceRoot":"","sources":["../../../src/visualizations/chart/CartesianChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAM9E,OAAO,EAAO,KAAK,YAAY,EAAE,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAErE,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAG3F,OAAO,EAEL,KAAK,wBAAwB,EAE7B,KAAK,oBAAoB,EACzB,KAAK,UAAU,EAWf,KAAK,cAAc,EACnB,KAAK,MAAM,EAEZ,MAAM,SAAS,CAAC;AAYjB,MAAM,MAAM,uBAAuB,GAAG,YAAY,GAChD,IAAI,CAAC,qBAAqB,EAAE,iBAAiB,GAAG,0BAA0B,CAAC,GAAG;IAC5E;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACvB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,GAAG,OAAO,CAAC,wBAAwB,CAAC,EAAE,CAAC;IAChF;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,GAAG,OAAO,CAAC,wBAAwB,CAAC,EAAE,CAAC;IAChF;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;IACrC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC,SAAS,CAAC;IACnC;;;OAGG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC;;;OAGG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAC;CACnC,CAAC;AAEJ,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,GAC9D,uBAAuB,GAAG;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE;QACX;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B;;WAEG;QACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC7B,CAAC;CACH,CAAC;AAEJ,eAAO,MAAM,cAAc,mGAmb1B,CAAC"}

package/dts/visualizations/chart/ChartProvider.d.ts

@@ -0,0 +1,9 @@
+import type { CartesianChartContextValue } from './utils/context';
+export declare const CartesianChartContext: import('react').Context<
+  CartesianChartContextValue | undefined
+>;
+export declare const useCartesianChartContext: () => CartesianChartContextValue;
+export declare const CartesianChartProvider: import('react').Provider<
+  CartesianChartContextValue | undefined
+>;
+//# sourceMappingURL=ChartProvider.d.ts.map

package/dts/visualizations/chart/ChartProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartProvider.d.ts","sourceRoot":"","sources":["../../../src/visualizations/chart/ChartProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,iBAAiB,CAAC;AAElE,eAAO,MAAM,qBAAqB,iEAEjC,CAAC;AAEF,eAAO,MAAM,wBAAwB,QAAO,0BAQ3C,CAAC;AAEF,eAAO,MAAM,sBAAsB,kEAAiC,CAAC"}

package/dts/visualizations/chart/Path.d.ts

@@ -0,0 +1,100 @@
+import type { SVGProps } from 'react';
+import type { Rect, SharedProps } from '@coinbase/cds-common/types';
+import { type Transition } from 'framer-motion';
+/**
+ * Duration in seconds for path enter transition.
+ * @deprecated Use `transitions.enter` on the Path component instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v4
+ */
+export declare const pathEnterTransitionDuration = 0.5;
+export type PathBaseProps = SharedProps & {
+  /**
+   * Whether to animate this path. Overrides the animate prop on the Chart component.
+   */
+  animate?: boolean;
+  /**
+   * Initial path for enter animation.
+   * When provided, the first animation will go from initialPath to d.
+   * If not provided, defaults to d (no path enter animation).
+   */
+  initialPath?: string;
+  /**
+   * Fill color for the path.
+   */
+  fill?: string;
+  /**
+   * Opacity for the path fill.
+   */
+  fillOpacity?: number;
+};
+export type PathProps = PathBaseProps &
+  Omit<
+    SVGProps<SVGPathElement>,
+    | 'onAnimationStart'
+    | 'onAnimationEnd'
+    | 'onAnimationIteration'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIterationCapture'
+    | 'onDrag'
+    | 'onDragEnd'
+    | 'onDragStart'
+    | 'onDragCapture'
+    | 'onDragEndCapture'
+    | 'onDragStartCapture'
+  > & {
+    /**
+     * Transition configuration for enter and update animations.
+     * @note Disable an animation by passing in null.
+     *
+     * @default transitions = {{
+     *   enter: { type: 'tween', duration: 0.5 },
+     *   enterOpacity: undefined,
+     *   update: { type: 'spring', stiffness: 900, damping: 120, mass: 4 }
+     * }}
+     *
+     * @example
+     * // Custom enter and update transitions
+     * transitions={{ enter: { type: 'tween', duration: 0.3 }, update: { type: 'spring', damping: 20 } }}
+     *
+     * @example
+     * // Disable enter animation
+     * transitions={{ enter: null }}
+     */
+    transitions?: {
+      /**
+       * Transition for the initial enter/reveal animation.
+       * Set to `null` to disable.
+       */
+      enter?: Transition | null;
+      /**
+       * Transition for the initial enter opacity animation.
+       * When provided, path opacity animates from 0 to 1.
+       * Set to `null` to disable.
+       */
+      enterOpacity?: Transition | null;
+      /**
+       * Transition for subsequent data update animations.
+       * Set to `null` to disable.
+       */
+      update?: Transition | null;
+    };
+    /**
+     * Transition for updates.
+     * @deprecated Use `transitions.update` instead. This will be removed in a future major release.
+     * @deprecationExpectedRemoval v4
+     */
+    transition?: Transition;
+    /**
+     * Offset added to the clip rect boundaries.
+     */
+    clipOffset?: number;
+    /**
+     * Custom clip path rect. If provided, this overrides the default chart rect for clipping.
+     * Pass null to disable clipping.
+     * @default drawingArea of chart + clipOffset
+     */
+    clipRect?: Rect | null;
+  };
+export declare const Path: import('react').NamedExoticComponent<PathProps>;
+//# sourceMappingURL=Path.d.ts.map

package/dts/visualizations/chart/Path.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Path.d.ts","sourceRoot":"","sources":["../../../src/visualizations/chart/Path.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AAM7D;;;;GAIG;AACH,eAAO,MAAM,2BAA2B,MAAM,CAAC;AAE/C,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG;IACxC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,aAAa,GACnC,IAAI,CACF,QAAQ,CAAC,cAAc,CAAC,EACtB,kBAAkB,GAClB,gBAAgB,GAChB,sBAAsB,GACtB,yBAAyB,GACzB,uBAAuB,GACvB,6BAA6B,GAC7B,QAAQ,GACR,WAAW,GACX,aAAa,GACb,eAAe,GACf,kBAAkB,GAClB,oBAAoB,CACvB,GAAG;IACF;;;;;;;;;;;;;;;;;OAiBG;IACH,WAAW,CAAC,EAAE;QACZ;;;WAGG;QACH,KAAK,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;QAC1B;;;;WAIG;QACH,YAAY,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;QACjC;;;WAGG;QACH,MAAM,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;KAC5B,CAAC;IACF;;;;OAIG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACxB,CAAC;AA2BJ,eAAO,MAAM,IAAI,iDAuGhB,CAAC"}

package/dts/visualizations/chart/PeriodSelector.d.ts

@@ -0,0 +1,73 @@
+import React from 'react';
+import type { Polymorphic } from '../../core/polymorphism';
+import { type SegmentedTabsProps, type TabsActiveIndicatorProps } from '../../tabs';
+import { type TextBaseProps } from '../../typography';
+export declare const PeriodSelectorActiveIndicator: React.MemoExoticComponent<
+  ({
+    activeTabRect,
+    background,
+    position,
+    borderRadius,
+    style,
+    ...props
+  }: TabsActiveIndicatorProps) => import('react/jsx-runtime').JSX.Element | null
+>;
+export declare const liveTabLabelDefaultElement = 'span';
+export type LiveTabLabelDefaultElement = typeof liveTabLabelDefaultElement;
+export type LiveTabLabelBaseProps = TextBaseProps & {
+  /**
+   * The label to display.
+   * @default 'LIVE'
+   */
+  label?: string;
+  /**
+   * Whether to hide the dot.
+   */
+  hideDot?: boolean;
+};
+export type LiveTabLabelProps<AsComponent extends React.ElementType> = Polymorphic.Props<
+  AsComponent,
+  LiveTabLabelBaseProps
+>;
+type LiveTabLabelComponent = (<AsComponent extends React.ElementType = LiveTabLabelDefaultElement>(
+  props: LiveTabLabelProps<AsComponent>,
+) => Polymorphic.ReactReturn) &
+  Polymorphic.ReactNamed;
+export declare const LiveTabLabel: LiveTabLabelComponent;
+export type PeriodSelectorProps = SegmentedTabsProps;
+/**
+ * PeriodSelector is a specialized version of SegmentedTabs optimized for chart period selection.
+ * It provides transparent background, primary wash active state, and full-width layout by default.
+ */
+export declare const PeriodSelector: React.NamedExoticComponent<
+  Partial<
+    Pick<
+      import('../../tabs').TabsBaseProps<string>,
+      'TabComponent' | 'TabsActiveIndicatorComponent'
+    >
+  > &
+    Omit<
+      import('../../tabs').TabsBaseProps<string>,
+      'styles' | 'classNames' | 'TabComponent' | 'TabsActiveIndicatorComponent'
+    > &
+    Partial<
+      Pick<import('../../tabs').TabsProps<string>, 'TabComponent' | 'TabsActiveIndicatorComponent'>
+    > &
+    Omit<
+      import('../../tabs').TabsProps<string>,
+      'styles' | 'classNames' | 'TabComponent' | 'TabsActiveIndicatorComponent'
+    > & {
+      styles?: {
+        root?: React.CSSProperties;
+        tab?: React.CSSProperties;
+        activeIndicator?: React.CSSProperties;
+      };
+      classNames?: {
+        root?: string;
+        tab?: string;
+        activeIndicator?: string;
+      };
+    } & React.RefAttributes<HTMLElement>
+>;
+export {};
+//# sourceMappingURL=PeriodSelector.d.ts.map

package/dts/visualizations/chart/PeriodSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PeriodSelector.d.ts","sourceRoot":"","sources":["../../../src/visualizations/chart/PeriodSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAIzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG3D,OAAO,EAEL,KAAK,kBAAkB,EAEvB,KAAK,wBAAwB,EAE9B,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAK5D,eAAO,MAAM,6BAA6B,qGAQrC,wBAAwB,oDA0B5B,CAAC;AAEF,eAAO,MAAM,0BAA0B,SAAS,CAAC;AAEjD,MAAM,MAAM,0BAA0B,GAAG,OAAO,0BAA0B,CAAC;AAE3E,MAAM,MAAM,qBAAqB,GAAG,aAAa,GAAG;IAClD;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,IAAI,WAAW,CAAC,KAAK,CACtF,WAAW,EACX,qBAAqB,CACtB,CAAC;AAYF,KAAK,qBAAqB,GAAG,CAAC,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,GAAG,0BAA0B,EAC/F,KAAK,EAAE,iBAAiB,CAAC,WAAW,CAAC,KAClC,WAAW,CAAC,WAAW,CAAC,GAC3B,WAAW,CAAC,UAAU,CAAC;AAEzB,eAAO,MAAM,YAAY,EAAE,qBAiC1B,CAAC;AASF,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,CAAC;AAErD;;;GAGG;AACH,eAAO,MAAM,cAAc;;YA1GvB,CADJ;WAG0B,CAAC;uBAEY,CAAC;;;YAOf,CAAC;WACb,CAAC;uBAGN,CAAP;;qCAmIA,CAAC"}