@coinbase/cds-web 8.13.1 → 8.13.5

package/dts/overlays/tray/Tray.d.ts

@@ -1,140 +1,145 @@
 import React from 'react';
 import type { SharedAccessibilityProps } from '@coinbase/cds-common';
 export type TrayRenderChildren = React.FC<{
-    handleClose: () => void;
+  handleClose: () => void;
 }>;
 export type TrayBaseProps = {
-    children: React.ReactNode | TrayRenderChildren;
-    /** Optional footer content that will be fixed to the bottom of the tray */
-    footer?: React.ReactNode;
-    /** HTML ID for the tray */
-    id?: string;
-    /** Callback fired when the overlay is pressed, or swipe to close */
-    onBlur?: () => void;
-    /** Action that will happen when tray is dismissed */
-    onClose?: () => void;
-    /** Action that will happen when tray is dismissed */
-    onCloseComplete: () => void;
-    /**
-     * Optional callback that, if provided, will be triggered when the Tray is toggled open/ closed
-     * If used for analytics, context ('visible' | 'hidden') can be bundled with the event info to track whether the
-     * multiselect was toggled into or out of view
-     */
-    onVisibilityChange?: (context: 'visible' | 'hidden') => void;
-    /** Prevents a user from dismissing the tray by pressing the overlay or swiping */
-    preventDismiss?: boolean;
-    /**
-     * WAI-ARIA Roles
-     * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
-     */
-    role?: Extract<React.AriaRole, 'dialog' | 'alertdialog'>;
-    /** Text or ReactNode for optional Tray title */
-    title?: React.ReactNode;
-    /**
-     * Allow user of component to define maximum percentage of screen that can be taken up by the Drawer
-     * @example if you want a Drawer to take up 50% of the screen, you would pass a value of `"50%"`
-     */
-    verticalDrawerPercentageOfView?: string;
-    /** z-index for the tray overlay */
-    zIndex?: number;
-    /**
-     * Allow any element with `tabIndex` attribute to be focusable in FocusTrap, rather than only focusing specific interactive element types like button.
-     * This can be useful when having long content in a Modal.
-     * @default false
-     */
-    focusTabIndexElements?: boolean;
-    /**
-     * If `true`, the focus trap will restore focus to the previously focused element when it unmounts.
-     *
-     * WARNING: If you disable this, you need to ensure that focus is restored properly so it doesn't end up on the body
-     * @default true
-     */
-    restoreFocusOnUnmount?: boolean;
-    /**
-     * Sets an accessible label for the close button.
-     * On web, maps to `aria-label` and defines a string value that labels an interactive element.
-     * On mobile, VoiceOver will read this string when a user selects the associated element.
-     * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label
-     * @link https://reactnative.dev/docs/accessibility#accessibilitylabel
-     */
-    closeAccessibilityLabel?: SharedAccessibilityProps['accessibilityLabel'];
-    /**
-     * Sets an accessible hint or description for the close button.
-     * On web, maps to `aria-describedby` and lists the id(s) of the element(s) that describe the element on which the attribute is set.
-     * On mobile, a string that helps users understand what will happen when they perform an action on the accessibility element
-     * when that result is not clear from the accessibility label.
-     * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby
-     * @link https://reactnative.dev/docs/accessibility#accessibilityhint
-     */
-    closeAccessibilityHint?: SharedAccessibilityProps['accessibilityHint'];
+  children: React.ReactNode | TrayRenderChildren;
+  /** Optional footer content that will be fixed to the bottom of the tray */
+  footer?: React.ReactNode;
+  /** HTML ID for the tray */
+  id?: string;
+  /** Callback fired when the overlay is pressed, or swipe to close */
+  onBlur?: () => void;
+  /** Action that will happen when tray is dismissed */
+  onClose?: () => void;
+  /** Action that will happen when tray is dismissed */
+  onCloseComplete: () => void;
+  /**
+   * Optional callback that, if provided, will be triggered when the Tray is toggled open/ closed
+   * If used for analytics, context ('visible' | 'hidden') can be bundled with the event info to track whether the
+   * multiselect was toggled into or out of view
+   */
+  onVisibilityChange?: (context: 'visible' | 'hidden') => void;
+  /** Prevents a user from dismissing the tray by pressing the overlay or swiping */
+  preventDismiss?: boolean;
+  /**
+   * WAI-ARIA Roles
+   * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
+   */
+  role?: Extract<React.AriaRole, 'dialog' | 'alertdialog'>;
+  /** Text or ReactNode for optional Tray title */
+  title?: React.ReactNode;
+  /**
+   * Allow user of component to define maximum percentage of screen that can be taken up by the Drawer
+   * @example if you want a Drawer to take up 50% of the screen, you would pass a value of `"50%"`
+   */
+  verticalDrawerPercentageOfView?: string;
+  /** z-index for the tray overlay */
+  zIndex?: number;
+  /**
+   * Allow any element with `tabIndex` attribute to be focusable in FocusTrap, rather than only focusing specific interactive element types like button.
+   * This can be useful when having long content in a Modal.
+   * @default false
+   */
+  focusTabIndexElements?: boolean;
+  /**
+   * If `true`, the focus trap will restore focus to the previously focused element when it unmounts.
+   *
+   * WARNING: If you disable this, you need to ensure that focus is restored properly so it doesn't end up on the body
+   * @default true
+   */
+  restoreFocusOnUnmount?: boolean;
+  /**
+   * Sets an accessible label for the close button.
+   * On web, maps to `aria-label` and defines a string value that labels an interactive element.
+   * On mobile, VoiceOver will read this string when a user selects the associated element.
+   * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label
+   * @link https://reactnative.dev/docs/accessibility#accessibilitylabel
+   */
+  closeAccessibilityLabel?: SharedAccessibilityProps['accessibilityLabel'];
+  /**
+   * Sets an accessible hint or description for the close button.
+   * On web, maps to `aria-describedby` and lists the id(s) of the element(s) that describe the element on which the attribute is set.
+   * On mobile, a string that helps users understand what will happen when they perform an action on the accessibility element
+   * when that result is not clear from the accessibility label.
+   * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby
+   * @link https://reactnative.dev/docs/accessibility#accessibilityhint
+   */
+  closeAccessibilityHint?: SharedAccessibilityProps['accessibilityHint'];
 } & Pick<SharedAccessibilityProps, 'accessibilityLabel'>;
 export type TrayProps = TrayBaseProps;
 export type TrayRefProps = {
-    close: () => void;
+  close: () => void;
 };
-export declare const Tray: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
-    children: React.ReactNode | TrayRenderChildren;
-    /** Optional footer content that will be fixed to the bottom of the tray */
-    footer?: React.ReactNode;
-    /** HTML ID for the tray */
-    id?: string;
-    /** Callback fired when the overlay is pressed, or swipe to close */
-    onBlur?: () => void;
-    /** Action that will happen when tray is dismissed */
-    onClose?: () => void;
-    /** Action that will happen when tray is dismissed */
-    onCloseComplete: () => void;
-    /**
-     * Optional callback that, if provided, will be triggered when the Tray is toggled open/ closed
-     * If used for analytics, context ('visible' | 'hidden') can be bundled with the event info to track whether the
-     * multiselect was toggled into or out of view
-     */
-    onVisibilityChange?: (context: "visible" | "hidden") => void;
-    /** Prevents a user from dismissing the tray by pressing the overlay or swiping */
-    preventDismiss?: boolean;
-    /**
-     * WAI-ARIA Roles
-     * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
-     */
-    role?: Extract<React.AriaRole, "dialog" | "alertdialog">;
-    /** Text or ReactNode for optional Tray title */
-    title?: React.ReactNode;
-    /**
-     * Allow user of component to define maximum percentage of screen that can be taken up by the Drawer
-     * @example if you want a Drawer to take up 50% of the screen, you would pass a value of `"50%"`
-     */
-    verticalDrawerPercentageOfView?: string;
-    /** z-index for the tray overlay */
-    zIndex?: number;
-    /**
-     * Allow any element with `tabIndex` attribute to be focusable in FocusTrap, rather than only focusing specific interactive element types like button.
-     * This can be useful when having long content in a Modal.
-     * @default false
-     */
-    focusTabIndexElements?: boolean;
-    /**
-     * If `true`, the focus trap will restore focus to the previously focused element when it unmounts.
-     *
-     * WARNING: If you disable this, you need to ensure that focus is restored properly so it doesn't end up on the body
-     * @default true
-     */
-    restoreFocusOnUnmount?: boolean;
-    /**
-     * Sets an accessible label for the close button.
-     * On web, maps to `aria-label` and defines a string value that labels an interactive element.
-     * On mobile, VoiceOver will read this string when a user selects the associated element.
-     * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label
-     * @link https://reactnative.dev/docs/accessibility#accessibilitylabel
-     */
-    closeAccessibilityLabel?: SharedAccessibilityProps["accessibilityLabel"];
-    /**
-     * Sets an accessible hint or description for the close button.
-     * On web, maps to `aria-describedby` and lists the id(s) of the element(s) that describe the element on which the attribute is set.
-     * On mobile, a string that helps users understand what will happen when they perform an action on the accessibility element
-     * when that result is not clear from the accessibility label.
-     * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby
-     * @link https://reactnative.dev/docs/accessibility#accessibilityhint
-     */
-    closeAccessibilityHint?: SharedAccessibilityProps["accessibilityHint"];
-} & Pick<SharedAccessibilityProps, "accessibilityLabel"> & React.RefAttributes<TrayRefProps>>>;
-//# sourceMappingURL=Tray.d.ts.map
+export declare const Tray: React.MemoExoticComponent<
+  React.ForwardRefExoticComponent<
+    {
+      children: React.ReactNode | TrayRenderChildren;
+      /** Optional footer content that will be fixed to the bottom of the tray */
+      footer?: React.ReactNode;
+      /** HTML ID for the tray */
+      id?: string;
+      /** Callback fired when the overlay is pressed, or swipe to close */
+      onBlur?: () => void;
+      /** Action that will happen when tray is dismissed */
+      onClose?: () => void;
+      /** Action that will happen when tray is dismissed */
+      onCloseComplete: () => void;
+      /**
+       * Optional callback that, if provided, will be triggered when the Tray is toggled open/ closed
+       * If used for analytics, context ('visible' | 'hidden') can be bundled with the event info to track whether the
+       * multiselect was toggled into or out of view
+       */
+      onVisibilityChange?: (context: 'visible' | 'hidden') => void;
+      /** Prevents a user from dismissing the tray by pressing the overlay or swiping */
+      preventDismiss?: boolean;
+      /**
+       * WAI-ARIA Roles
+       * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
+       */
+      role?: Extract<React.AriaRole, 'dialog' | 'alertdialog'>;
+      /** Text or ReactNode for optional Tray title */
+      title?: React.ReactNode;
+      /**
+       * Allow user of component to define maximum percentage of screen that can be taken up by the Drawer
+       * @example if you want a Drawer to take up 50% of the screen, you would pass a value of `"50%"`
+       */
+      verticalDrawerPercentageOfView?: string;
+      /** z-index for the tray overlay */
+      zIndex?: number;
+      /**
+       * Allow any element with `tabIndex` attribute to be focusable in FocusTrap, rather than only focusing specific interactive element types like button.
+       * This can be useful when having long content in a Modal.
+       * @default false
+       */
+      focusTabIndexElements?: boolean;
+      /**
+       * If `true`, the focus trap will restore focus to the previously focused element when it unmounts.
+       *
+       * WARNING: If you disable this, you need to ensure that focus is restored properly so it doesn't end up on the body
+       * @default true
+       */
+      restoreFocusOnUnmount?: boolean;
+      /**
+       * Sets an accessible label for the close button.
+       * On web, maps to `aria-label` and defines a string value that labels an interactive element.
+       * On mobile, VoiceOver will read this string when a user selects the associated element.
+       * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label
+       * @link https://reactnative.dev/docs/accessibility#accessibilitylabel
+       */
+      closeAccessibilityLabel?: SharedAccessibilityProps['accessibilityLabel'];
+      /**
+       * Sets an accessible hint or description for the close button.
+       * On web, maps to `aria-describedby` and lists the id(s) of the element(s) that describe the element on which the attribute is set.
+       * On mobile, a string that helps users understand what will happen when they perform an action on the accessibility element
+       * when that result is not clear from the accessibility label.
+       * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby
+       * @link https://reactnative.dev/docs/accessibility#accessibilityhint
+       */
+      closeAccessibilityHint?: SharedAccessibilityProps['accessibilityHint'];
+    } & Pick<SharedAccessibilityProps, 'accessibilityLabel'> &
+      React.RefAttributes<TrayRefProps>
+  >
+>;
+//# sourceMappingURL=Tray.d.ts.map

package/dts/overlays/useModal.d.ts

@@ -3,4 +3,4 @@ import { useModal } from '@coinbase/cds-common/overlays/useModal';
  * @deprecated Use the visible and onRequestClose props as outlined in the docs here https://cds.coinbase.com/components/modal#get-started
  */
 export { useModal };
-//# sourceMappingURL=useModal.d.ts.map
+//# sourceMappingURL=useModal.d.ts.map

package/dts/overlays/usePortal.d.ts

@@ -1,3 +1,3 @@
 import { usePortal } from '@coinbase/cds-common/overlays/usePortal';
 export { usePortal };
-//# sourceMappingURL=usePortal.d.ts.map
+//# sourceMappingURL=usePortal.d.ts.map

package/dts/overlays/useToast.d.ts

@@ -2,8 +2,8 @@ import { type ToastDuration } from '@coinbase/cds-common/overlays/ToastProvider'
 import { type ToastBaseProps } from './Toast';
 export type ShowToastOptions = Omit<ToastBaseProps, 'text'> & ToastDuration;
 export declare const useToast: () => {
-    show: (text: string, options?: ShowToastOptions) => void;
-    hide: () => void;
-    clearQueue: () => void;
+  show: (text: string, options?: ShowToastOptions) => void;
+  hide: () => void;
+  clearQueue: () => void;
 };
-//# sourceMappingURL=useToast.d.ts.map
+//# sourceMappingURL=useToast.d.ts.map

package/dts/page/PageFooter.d.ts

@@ -4,7 +4,8 @@ import type { PositionStyles, SharedProps } from '@coinbase/cds-common/types';
 import type { Polymorphic } from '../core/polymorphism';
 import { type BoxDefaultElement, type BoxProps } from '../layout/Box';
 import type { ResponsiveProps, StaticStyleProps } from '../styles/styleProps';
-export type PageFooterBaseProps = SharedProps & PositionStyles & {
+export type PageFooterBaseProps = SharedProps &
+  PositionStyles & {
     /**
      * Required. Accepts a ReactNode. Intended for content on the right side of the footer, such as action buttons or icons. */
     action: React.ReactNode;
@@ -12,9 +13,16 @@ export type PageFooterBaseProps = SharedProps & PositionStyles & {
      * Set the background color of the box.
      */
     background?: ThemeVars.Color;
-};
+  };
 export declare const pageFooterPaddingX: ResponsiveProps<StaticStyleProps>['paddingX'];
 export declare const pageFooterJustifyContent: ResponsiveProps<StaticStyleProps>['justifyContent'];
-export type PageFooterProps = Polymorphic.ExtendableProps<BoxProps<BoxDefaultElement>, PageFooterBaseProps>;
-export declare const PageFooter: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<PageFooterProps, "ref"> & React.RefAttributes<HTMLDivElement>>>;
-//# sourceMappingURL=PageFooter.d.ts.map
+export type PageFooterProps = Polymorphic.ExtendableProps<
+  BoxProps<BoxDefaultElement>,
+  PageFooterBaseProps
+>;
+export declare const PageFooter: React.MemoExoticComponent<
+  React.ForwardRefExoticComponent<
+    Omit<PageFooterProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >
+>;
+//# sourceMappingURL=PageFooter.d.ts.map

package/dts/page/PageHeader.d.ts

@@ -6,7 +6,8 @@ import { type GridDefaultElement, type GridProps } from '../layout/Grid';
 import type { ResponsiveProps, StaticStyleProps } from '../styles/styleProps';
 export declare const pageHeaderStartPaddingStart: ResponsiveProps<StaticStyleProps>['paddingStart'];
 export declare const pageHeaderEndPaddingX: ResponsiveProps<StaticStyleProps>['paddingX'];
-export type PageHeaderBaseProps = SharedProps & PositionStyles & {
+export type PageHeaderBaseProps = SharedProps &
+  PositionStyles & {
     /**
      * Optional. Accepts a ReactNode. Used for placing primary content on the left side of the page header, such as a header title, logo, or icon button.
      */
@@ -24,50 +25,57 @@ export type PageHeaderBaseProps = SharedProps & PositionStyles & {
      * Set the background color of the box.
      */
     background?: ThemeVars.Color;
-};
-export type PageHeaderProps = Polymorphic.ExtendableProps<GridProps<GridDefaultElement>, PageHeaderBaseProps & {
+  };
+export type PageHeaderProps = Polymorphic.ExtendableProps<
+  GridProps<GridDefaultElement>,
+  PageHeaderBaseProps & {
     /**
      * Custom styles for the page header.
      */
     styles?: {
-        /**
-         * Custom styles for the start element.
-         */
-        start?: React.CSSProperties;
-        /**
-         * Custom styles for the end element.
-         */
-        end?: React.CSSProperties;
-        /**
-         * Custom styles for the title element.
-         */
-        title?: React.CSSProperties;
-        /**
-         * Custom styles for the root element.
-         */
-        root?: React.CSSProperties;
+      /**
+       * Custom styles for the start element.
+       */
+      start?: React.CSSProperties;
+      /**
+       * Custom styles for the end element.
+       */
+      end?: React.CSSProperties;
+      /**
+       * Custom styles for the title element.
+       */
+      title?: React.CSSProperties;
+      /**
+       * Custom styles for the root element.
+       */
+      root?: React.CSSProperties;
     };
     /**
      * Custom class names for the page header.
      */
     classNames?: {
-        /**
-         * Class name for the page header root.
-         */
-        root?: string;
-        /**
-         * Class name for the page header start element.
-         */
-        start?: string;
-        /**
-         * Class name for the page header end element.
-         */
-        end?: string;
-        /**
-         * Class name for the page header title element.
-         */
-        title?: string;
+      /**
+       * Class name for the page header root.
+       */
+      root?: string;
+      /**
+       * Class name for the page header start element.
+       */
+      start?: string;
+      /**
+       * Class name for the page header end element.
+       */
+      end?: string;
+      /**
+       * Class name for the page header title element.
+       */
+      title?: string;
     };
-}>;
-export declare const PageHeader: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<PageHeaderProps, "ref"> & React.RefAttributes<HTMLDivElement>>>;
-//# sourceMappingURL=PageHeader.d.ts.map
+  }
+>;
+export declare const PageHeader: React.MemoExoticComponent<
+  React.ForwardRefExoticComponent<
+    Omit<PageHeaderProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >
+>;
+//# sourceMappingURL=PageHeader.d.ts.map

package/dts/page/__figma__/PageFooter.figma.d.ts

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=PageFooter.figma.d.ts.map
+//# sourceMappingURL=PageFooter.figma.d.ts.map

package/dts/page/__figma__/PageHeader.figma.d.ts

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=PageHeader.figma.d.ts.map
+//# sourceMappingURL=PageHeader.figma.d.ts.map

package/dts/pagination/DefaultPaginationEllipsis.d.ts

@@ -1,3 +1,6 @@
 import type { PaginationEllipsisProps } from './Pagination';
-export declare const DefaultPaginationEllipsis: ({ content, testID }: PaginationEllipsisProps) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=DefaultPaginationEllipsis.d.ts.map
+export declare const DefaultPaginationEllipsis: ({
+  content,
+  testID,
+}: PaginationEllipsisProps) => import('react/jsx-runtime').JSX.Element;
+//# sourceMappingURL=DefaultPaginationEllipsis.d.ts.map

package/dts/pagination/DefaultPaginationNavigationButton.d.ts

@@ -1,9 +1,11 @@
 import type { PaginationNavigationButtonProps } from './Pagination';
 export declare const iconMap: {
-    readonly first: "arrowLeft";
-    readonly last: "arrowRight";
-    readonly next: "caretRight";
-    readonly previous: "caretLeft";
+  readonly first: 'arrowLeft';
+  readonly last: 'arrowRight';
+  readonly next: 'caretRight';
+  readonly previous: 'caretLeft';
 };
-export declare const DefaultPaginationNavigationButton: import("react").ForwardRefExoticComponent<PaginationNavigationButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
-//# sourceMappingURL=DefaultPaginationNavigationButton.d.ts.map
+export declare const DefaultPaginationNavigationButton: import('react').ForwardRefExoticComponent<
+  PaginationNavigationButtonProps & import('react').RefAttributes<HTMLButtonElement>
+>;
+//# sourceMappingURL=DefaultPaginationNavigationButton.d.ts.map

package/dts/pagination/DefaultPaginationNavigationTextButton.d.ts

@@ -1,4 +1,15 @@
 import React from 'react';
 import type { ButtonProps } from '../buttons/Button';
-export declare const DefaultPaginationNavigationTextButton: React.ForwardRefExoticComponent<Omit<ButtonProps<(<AsComponent extends React.ElementType = "button">(props: ButtonProps<AsComponent>) => import("..").Polymorphic.ReactReturn) & import("..").Polymorphic.ReactNamed>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-//# sourceMappingURL=DefaultPaginationNavigationTextButton.d.ts.map
+export declare const DefaultPaginationNavigationTextButton: React.ForwardRefExoticComponent<
+  Omit<
+    ButtonProps<
+      (<AsComponent extends React.ElementType = 'button'>(
+        props: ButtonProps<AsComponent>,
+      ) => import('..').Polymorphic.ReactReturn) &
+        import('..').Polymorphic.ReactNamed
+    >,
+    'ref'
+  > &
+    React.RefAttributes<HTMLButtonElement>
+>;
+//# sourceMappingURL=DefaultPaginationNavigationTextButton.d.ts.map

package/dts/pagination/DefaultPaginationPageButton.d.ts

@@ -1,3 +1,5 @@
 import type { PaginationPageButtonProps } from './Pagination';
-export declare const DefaultPaginationPageButton: import("react").ForwardRefExoticComponent<PaginationPageButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
-//# sourceMappingURL=DefaultPaginationPageButton.d.ts.map
+export declare const DefaultPaginationPageButton: import('react').ForwardRefExoticComponent<
+  PaginationPageButtonProps & import('react').RefAttributes<HTMLButtonElement>
+>;
+//# sourceMappingURL=DefaultPaginationPageButton.d.ts.map