@coinbase/cds-web 0.0.0 → 8.13.2

package/dts/overlays/popover/PopoverProps.d.ts

@@ -0,0 +1,83 @@
+import type React from 'react';
+import type { ThemeVars } from '@coinbase/cds-common/core/theme';
+import type { SharedAccessibilityProps } from '@coinbase/cds-common/types/SharedAccessibilityProps';
+import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
+import type { Placement, PositioningStrategy } from '@popperjs/core';
+import type { AccessibleControlledReturnType } from '../../hooks/useA11yControlledVisibility';
+import { type FocusTrapProps } from '../FocusTrap';
+export type PopoverContentPositionConfig = {
+  /**
+   * Custom placement config from Popper. See docs: https://popper.js.org/docs/v2/constructors/#placement
+   * @default bottom
+   */
+  placement?: Placement;
+  /** Offset content placement on the x axis */
+  skid?: ThemeVars.Space;
+  /** Offset content placement on the y axis */
+  gap?: ThemeVars.Space;
+  /** This should only be used if there is content within the subject that needs to be overlaid
+   * eg: helperText below a Select input
+   * This value will be subtracted from the gap
+   */
+  offsetGap?: number;
+  /**
+   * Custom strategy config from Popper. See docs: https://popper.js.org/docs/v2/constructors/#strategy
+   * @default absolute
+   */
+  strategy?: PositioningStrategy;
+};
+export type PopoverProps = {
+  content: React.ReactNode;
+  /** Subject of the Popover that when interacted with will toggle the visibility of the content */
+  children: React.ReactNode;
+  /**
+   * @danger This disables React portal integration. Use this with caution.
+   */
+  disablePortal?: boolean;
+  /**
+   * Display an overlay over all content below the Popover menu
+   * @default false
+   */
+  showOverlay?: boolean;
+  /** Callback that fires when the subject is pressed */
+  onPressSubject?: () => void;
+  /** Callback that is fired after the content animates out */
+  onClose?: () => void;
+  onMouseEnter?: (event: React.MouseEvent) => void;
+  onMouseLeave?: (event: React.MouseEvent) => void;
+  /** Callback fired when the subject is focused */
+  onFocus?: () => void;
+  /** Callback fired when the subject or content is blurred */
+  onBlur?: (event?: React.FocusEvent) => void;
+  /** Callback fired when a mouse down event is fired on the subject */
+  onMouseDown?: (event: React.MouseEvent) => void;
+  /** Invert the theme's activeColorScheme for this component */
+  invertColorScheme?: boolean;
+  /** Controls visibility of the Popover content */
+  visible: boolean;
+  /** Override content positioning defaults */
+  contentPosition?: PopoverContentPositionConfig;
+  /**
+   * Makes the Popover Subject fill the width of the parent container
+   * @default false
+   */
+  block?: boolean;
+  /**
+   * Prevents the Popover content from showing.
+   * You'll need to surface disabled state on the trigger manually.
+   */
+  disabled?: boolean;
+} & Pick<SharedAccessibilityProps, 'accessibilityLabel'> &
+  Pick<
+    FocusTrapProps,
+    | 'disableFocusTrap'
+    | 'disableAutoFocus'
+    | 'disableTypeFocus'
+    | 'respectNegativeTabIndex'
+    | 'focusTabIndexElements'
+    | 'autoFocusDelay'
+    | 'restoreFocusOnUnmount'
+  > &
+  SharedProps &
+  Partial<Pick<AccessibleControlledReturnType, 'controlledElementAccessibilityProps'>>;
+//# sourceMappingURL=PopoverProps.d.ts.map

package/dts/overlays/popover/PopoverProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverProps.d.ts","sourceRoot":"","sources":["../../../src/overlays/popover/PopoverProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,KAAK,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAErE,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,yCAAyC,CAAC;AAC9F,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,MAAM,MAAM,4BAA4B,GAAG;IACzC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACvB,6CAA6C;IAC7C,GAAG,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,mBAAmB,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,iGAAiG;IACjG,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sDAAsD;IACtD,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACjD,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACjD,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,qEAAqE;IACrE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAChD,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iDAAiD;IACjD,OAAO,EAAE,OAAO,CAAC;IACjB,4CAA4C;IAC5C,eAAe,CAAC,EAAE,4BAA4B,CAAC;IAC/C;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GACtD,IAAI,CACF,cAAc,EACZ,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,GAClB,yBAAyB,GACzB,uBAAuB,GACvB,gBAAgB,GAChB,uBAAuB,CAC1B,GACD,WAAW,GACX,OAAO,CAAC,IAAI,CAAC,8BAA8B,EAAE,qCAAqC,CAAC,CAAC,CAAC"}

package/dts/overlays/popover/usePopper.d.ts

@@ -0,0 +1,24 @@
+import type { PopoverContentPositionConfig } from './PopoverProps';
+export declare const usePopper: ({
+  placement,
+  skid,
+  gap,
+  offsetGap,
+  strategy,
+}: PopoverContentPositionConfig) => {
+  popper: HTMLDivElement | null;
+  subject: HTMLDivElement | null;
+  setSubject: import('react').Dispatch<import('react').SetStateAction<HTMLDivElement | null>>;
+  setPopper: import('react').Dispatch<import('react').SetStateAction<HTMLDivElement | null>>;
+  popperStyles: {
+    [key: string]: import('react').CSSProperties;
+  };
+  popperAttributes: {
+    [key: string]:
+      | {
+          [key: string]: string;
+        }
+      | undefined;
+  };
+};
+//# sourceMappingURL=usePopper.d.ts.map

package/dts/overlays/popover/usePopper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePopper.d.ts","sourceRoot":"","sources":["../../../src/overlays/popover/usePopper.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,gBAAgB,CAAC;AAEnE,eAAO,MAAM,SAAS,GAAI,gDAMvB,4BAA4B;;;;;;;;;;;;;CAsC9B,CAAC"}

package/dts/overlays/tooltip/Tooltip.d.ts

@@ -0,0 +1,21 @@
+import type { TooltipProps } from './TooltipProps';
+export declare const Tooltip: ({
+  children,
+  content,
+  elevation,
+  placement,
+  gap,
+  disablePortal,
+  testID,
+  zIndex,
+  tooltipId: tooltipIdDefault,
+  visible,
+  invertColorScheme,
+  disableFocusTrap,
+  disableAutoFocus,
+  disableTypeFocus,
+  focusTabIndexElements,
+  respectNegativeTabIndex,
+  autoFocusDelay,
+}: TooltipProps) => import('react/jsx-runtime').JSX.Element;
+//# sourceMappingURL=Tooltip.d.ts.map

package/dts/overlays/tooltip/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQnD,eAAO,MAAM,OAAO,GAAI,iQAkBrB,YAAY,4CAiEd,CAAC"}

package/dts/overlays/tooltip/TooltipContent.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export declare const TooltipContent: React.MemoExoticComponent<
+  React.ForwardRefExoticComponent<
+    {
+      gap: import('@coinbase/cds-common').ThemeVars.Space;
+      tooltipId?: string;
+    } & Pick<
+      import('./TooltipProps').TooltipBaseProps,
+      'elevation' | 'content' | 'testID' | 'zIndex' | 'placement'
+    > &
+      React.RefAttributes<HTMLDivElement>
+  >
+>;
+//# sourceMappingURL=TooltipContent.d.ts.map

package/dts/overlays/tooltip/TooltipContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipContent.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/TooltipContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAmCzD,eAAO,MAAM,cAAc;;;wJAgD1B,CAAC"}

package/dts/overlays/tooltip/TooltipProps.d.ts

@@ -0,0 +1,60 @@
+import type { ThemeVars } from '@coinbase/cds-common/core/theme';
+import type { BaseTooltipPlacement, ElevationProps, SharedProps } from '@coinbase/cds-common/types';
+import type { PositionStyles } from '@coinbase/cds-common/types/BoxBaseProps';
+import type { PopoverProps } from '../popover/PopoverProps';
+export type TooltipBaseProps = SharedProps &
+  ElevationProps &
+  Pick<
+    PopoverProps,
+    | 'disableFocusTrap'
+    | 'disableAutoFocus'
+    | 'disableTypeFocus'
+    | 'respectNegativeTabIndex'
+    | 'focusTabIndexElements'
+    | 'autoFocusDelay'
+  > & {
+    children: React.ReactElement;
+    /** The content to render within the tooltip. */
+    content: React.ReactNode;
+    /**
+     * This value corresponds to how big the gap between the subject and the tooltip is.
+     * We do not encourage usage of this prop. But it is enabled for special cases as an escape hatch.
+     * @default 1
+     */
+    gap?: ThemeVars.Space;
+    /**
+     * Control whether the tooltip is shown or hidden.
+     * @default true
+     */
+    visible?: boolean;
+    /** Invert the theme's activeColorScheme for this component
+     * @default true
+     */
+    invertColorScheme?: boolean;
+    /** Position of tooltip in relation to the subject. */
+    placement?: BaseTooltipPlacement;
+    /**
+     * @danger
+     * By setting this to true you are essentially opting out of CDS zIndex management. By default the subject is rendered in a portal. If set to true the subject will be rendered in the DOM hierarchy of the parent component.
+     * @default false
+     */
+    disablePortal?: boolean;
+    /**
+     * Typically only used when disablePortal is set to true to adjust zIndex of tooltip. When using portal this value should remain as default.
+     * @default 4
+     * */
+    zIndex?: PositionStyles['zIndex'];
+    /**
+     * A unique ID used to ensure tooltips are accessible
+     */
+    tooltipId?: string;
+  };
+export type TooltipProps = TooltipBaseProps;
+export type PopperTooltipProps = {
+  gap: ThemeVars.Space;
+  /**
+   * A unique ID used to ensure tooltips are accessible
+   */
+  tooltipId?: string;
+} & Pick<TooltipProps, 'content' | 'testID' | 'zIndex' | 'placement' | 'elevation'>;
+//# sourceMappingURL=TooltipProps.d.ts.map

package/dts/overlays/tooltip/TooltipProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipProps.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/TooltipProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,oBAAoB,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACpG,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAC;AAE9E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE5D,MAAM,MAAM,gBAAgB,GAAG,WAAW,GACxC,cAAc,GACd,IAAI,CACF,YAAY,EACV,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,GAClB,yBAAyB,GACzB,uBAAuB,GACvB,gBAAgB,CACnB,GAAG;IACF,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,gDAAgD;IAChD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,GAAG,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sDAAsD;IACtD,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;SAGK;IACL,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEJ,MAAM,MAAM,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,GAAG,EAAE,SAAS,CAAC,KAAK,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,WAAW,GAAG,WAAW,CAAC,CAAC"}

package/dts/overlays/tooltip/__figma__/Tooltip.figma.d.ts

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

package/dts/overlays/tooltip/__figma__/Tooltip.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.figma.d.ts","sourceRoot":"","sources":["../../../../src/overlays/tooltip/__figma__/Tooltip.figma.tsx"],"names":[],"mappings":""}

package/dts/overlays/tooltip/useTooltipState.d.ts

@@ -0,0 +1,9 @@
+export declare const useTooltipState: (id?: string) => {
+  isOpen: boolean;
+  tooltipId: string;
+  handleOnMouseEnter: () => void;
+  handleOnMouseLeave: () => void;
+  handleOnFocus: () => void;
+  handleOnBlur: () => void;
+};
+//# sourceMappingURL=useTooltipState.d.ts.map

package/dts/overlays/tooltip/useTooltipState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTooltipState.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/useTooltipState.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,GAAI,KAAK,MAAM;;;;;;;CAoC1C,CAAC"}

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

@@ -0,0 +1,145 @@
+import React from 'react';
+import type { SharedAccessibilityProps } from '@coinbase/cds-common';
+export type TrayRenderChildren = React.FC<{
+  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'];
+} & Pick<SharedAccessibilityProps, 'accessibilityLabel'>;
+export type TrayProps = TrayBaseProps;
+export type TrayRefProps = {
+  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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tray.d.ts","sourceRoot":"","sources":["../../../src/overlays/tray/Tray.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAiBrE,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,EAAE,CAAC;IAAE,WAAW,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC,CAAC;AAEvE,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,kBAAkB,CAAC;IAC/C,2EAA2E;IAC3E,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,2BAA2B;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qDAAqD;IACrD,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,GAAG,QAAQ,KAAK,IAAI,CAAC;IAC7D,kFAAkF;IAClF,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,QAAQ,GAAG,aAAa,CAAC,CAAC;IACzD,gDAAgD;IAChD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;OAGG;IACH,8BAA8B,CAAC,EAAE,MAAM,CAAC;IACxC,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;;OAKG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;;;OAMG;IACH,uBAAuB,CAAC,EAAE,wBAAwB,CAAC,oBAAoB,CAAC,CAAC;IACzE;;;;;;;OAOG;IACH,sBAAsB,CAAC,EAAE,wBAAwB,CAAC,mBAAmB,CAAC,CAAC;CACxE,GAAG,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,CAAC;AAuBzD,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC;AAGtC,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,IAAI;cA7FL,KAAK,CAAC,SAAS,GAAG,kBAAkB;IAC9C,2EAA2E;aAClE,KAAK,CAAC,SAAS;IACxB,2BAA2B;SACtB,MAAM;IACX,oEAAoE;aAC3D,MAAM,IAAI;IACnB,qDAAqD;cAC3C,MAAM,IAAI;IACpB,qDAAqD;qBACpC,MAAM,IAAI;IAC3B;;;;OAIG;yBACkB,CAAC,OAAO,EAAE,SAAS,GAAG,QAAQ,KAAK,IAAI;IAC5D,kFAAkF;qBACjE,OAAO;IACxB;;;OAGG;WACI,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,QAAQ,GAAG,aAAa,CAAC;IACxD,gDAAgD;YACxC,KAAK,CAAC,SAAS;IACvB;;;OAGG;qCAC8B,MAAM;IACvC,mCAAmC;aAC1B,MAAM;IACf;;;;OAIG;4BACqB,OAAO;IAC/B;;;;;OAKG;4BACqB,OAAO;IAC/B;;;;;;OAMG;8BACuB,wBAAwB,CAAC,oBAAoB,CAAC;IACxE;;;;;;;OAOG;6BACsB,wBAAwB,CAAC,mBAAmB,CAAC;8FAiNvE,CAAC"}

package/dts/overlays/useModal.d.ts

@@ -0,0 +1,6 @@
+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

package/dts/overlays/useModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useModal.d.ts","sourceRoot":"","sources":["../../src/overlays/useModal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAElE;;GAEG;AACH,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dts/overlays/usePortal.d.ts

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

package/dts/overlays/usePortal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePortal.d.ts","sourceRoot":"","sources":["../../src/overlays/usePortal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAEpE,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dts/overlays/useToast.d.ts

@@ -0,0 +1,9 @@
+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;
+};
+//# sourceMappingURL=useToast.d.ts.map

package/dts/overlays/useToast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToast.d.ts","sourceRoot":"","sources":["../../src/overlays/useToast.tsx"],"names":[],"mappings":"AACA,OAAO,EAAgB,KAAK,aAAa,EAAE,MAAM,6CAA6C,CAAC;AAQ/F,OAAO,EAAS,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AAErD,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC,GAAG,aAAa,CAAC;AAE5E,eAAO,MAAM,QAAQ;iBAIV,MAAM,YAAY,gBAAgB;;;CA8B5C,CAAC"}

package/dts/page/PageFooter.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { ThemeVars } from '@coinbase/cds-common/core/theme';
+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 & {
+    /**
+     * Required. Accepts a ReactNode. Intended for content on the right side of the footer, such as action buttons or icons. */
+    action: React.ReactNode;
+    /**
+     * 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

package/dts/page/PageFooter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageFooter.d.ts","sourceRoot":"","sources":["../../src/page/PageFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAE9E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAO,KAAK,iBAAiB,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAE9E,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAC3C,cAAc,GAAG;IACf;+HAC2H;IAC3H,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CAC9B,CAAC;AAEJ,eAAO,MAAM,kBAAkB,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC,UAAU,CAInE,CAAC;AAEX,eAAO,MAAM,wBAAwB,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC,gBAAgB,CAI/E,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,WAAW,CAAC,eAAe,CACvD,QAAQ,CAAC,iBAAiB,CAAC,EAC3B,mBAAmB,CACpB,CAAC;AACF,eAAO,MAAM,UAAU,gIA2BtB,CAAC"}

package/dts/page/PageHeader.d.ts

@@ -0,0 +1,81 @@
+import React from 'react';
+import type { ThemeVars } from '@coinbase/cds-common/core/theme';
+import type { PositionStyles, SharedProps } from '@coinbase/cds-common/types';
+import type { Polymorphic } from '../core/polymorphism';
+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 & {
+    /**
+     * 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.
+     */
+    start?: React.ReactNode;
+    /**
+     * Optional. Accepts a ReactNode. Intended for content on the right side of the header, such as action buttons or icons.
+     * In modal usage, elements like a close button should be included to facilitate modal dismissal.
+     */
+    end?: React.ReactNode;
+    /**
+     * Optional. Accepts a ReactNode. Intended for main title within the Page Header or for secondary content in the center of the header, like a navigation stepper or search bar.
+     */
+    title?: React.ReactNode;
+    /**
+     * Set the background color of the box.
+     */
+    background?: ThemeVars.Color;
+  };
+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 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;
+    };
+  }
+>;
+export declare const PageHeader: React.MemoExoticComponent<
+  React.ForwardRefExoticComponent<
+    Omit<PageHeaderProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >
+>;
+//# sourceMappingURL=PageHeader.d.ts.map

package/dts/page/PageHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../src/page/PageHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAG9E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGxD,OAAO,EAAQ,KAAK,kBAAkB,EAAE,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE/E,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAiB9E,eAAO,MAAM,2BAA2B,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC,cAAc,CAIhF,CAAC;AAEX,eAAO,MAAM,qBAAqB,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC,UAAU,CAItE,CAAC;AAEX,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAC3C,cAAc,GAAG;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;OAGG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CAC9B,CAAC;AAEJ,MAAM,MAAM,eAAe,GAAG,WAAW,CAAC,eAAe,CACvD,SAAS,CAAC,kBAAkB,CAAC,EAC7B,mBAAmB,GAAG;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC5B;;WAEG;QACH,GAAG,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC1B;;WAEG;QACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC5B;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC5B,CAAC;IACF;;OAEG;IACH,UAAU,CAAC,EAAE;QACX;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,KAAK,CAAC,EAAE,MAAM,CAAC;QACf;;WAEG;QACH,GAAG,CAAC,EAAE,MAAM,CAAC;QACb;;WAEG;QACH,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACH,CACF,CAAC;AAEF,eAAO,MAAM,UAAU,gIAyHtB,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageFooter.figma.d.ts","sourceRoot":"","sources":["../../../src/page/__figma__/PageFooter.figma.tsx"],"names":[],"mappings":""}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.figma.d.ts","sourceRoot":"","sources":["../../../src/page/__figma__/PageHeader.figma.tsx"],"names":[],"mappings":""}

package/dts/pagination/DefaultPaginationEllipsis.d.ts

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

package/dts/pagination/DefaultPaginationEllipsis.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultPaginationEllipsis.d.ts","sourceRoot":"","sources":["../../src/pagination/DefaultPaginationEllipsis.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAE5D,eAAO,MAAM,yBAAyB,GAAI,qBAA6B,uBAAuB,4CAI7F,CAAC"}

package/dts/pagination/DefaultPaginationNavigationButton.d.ts

@@ -0,0 +1,11 @@
+import type { PaginationNavigationButtonProps } from './Pagination';
+export declare const iconMap: {
+  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

package/dts/pagination/DefaultPaginationNavigationButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultPaginationNavigationButton.d.ts","sourceRoot":"","sources":["../../src/pagination/DefaultPaginationNavigationButton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,cAAc,CAAC;AAGpE,eAAO,MAAM,OAAO;;;;;CAK+D,CAAC;AAEpF,eAAO,MAAM,iCAAiC,+HAmB7C,CAAC"}

package/dts/pagination/DefaultPaginationNavigationTextButton.d.ts

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

package/dts/pagination/DefaultPaginationNavigationTextButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultPaginationNavigationTextButton.d.ts","sourceRoot":"","sources":["../../src/pagination/DefaultPaginationNavigationTextButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD,eAAO,MAAM,qCAAqC,yQAgCjD,CAAC"}

package/dts/pagination/DefaultPaginationPageButton.d.ts

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

package/dts/pagination/DefaultPaginationPageButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultPaginationPageButton.d.ts","sourceRoot":"","sources":["../../src/pagination/DefaultPaginationPageButton.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAC;AAQ9D,eAAO,MAAM,2BAA2B,yHAkCvC,CAAC"}