@coinbase/cdp-react 0.0.98 → 0.0.99

package/dist/components/ui/SwitchTransition/index.d.ts

@@ -2,13 +2,26 @@ import { ElementType, HTMLAttributes, Key, ReactNode, Ref } from 'react';
 import { TransitionMapOptions, TransitionMapResult } from '../../../hooks/useTransitionMap';
 import { TransitionState } from '../../../utils/transition';
 export { type TransitionMapOptions, type TransitionMapResult, type TransitionState };
+/**
+ * TransitionRef type for the SwitchTransition component.
+ */
 export interface SwitchTransitionRef<T extends Key> {
+    /** The transition result. */
     transition: TransitionMapResult<T>;
 }
+/**
+ * Props for the SwitchTransition component.
+ *
+ * @template T - The type of the key for the transition.
+ */
 export interface SwitchTransitionProps<T extends Key> extends Omit<HTMLAttributes<HTMLElement>, "children" | "autoFocus">, TransitionMapOptions<T> {
+    /** Whether to animate the height of the component. */
     animateHeight?: boolean;
+    /** Whether to auto focus on transition change. If a string is provided, it will be used as the selector for the focusable element. */
     autoFocus?: boolean | string;
+    /** The component or element to render. */
     as?: ElementType;
+    /** The children to transition between. */
     children: (props: {
         "data-index": number;
         inert?: boolean;
@@ -19,9 +32,38 @@ export interface SwitchTransitionProps<T extends Key> extends Omit<HTMLAttribute
         "data-is-resolved": TransitionState["isResolved"] | undefined;
         "data-parent": string;
     }) => ReactNode;
+    /** The class name to apply to the component. */
     className?: string;
+    /** Item keys to transition between. */
     items: readonly T[] | T[];
+    /** The name of the transition. Use one of the defined values to use a pre-defined transition, or a custom string to use a custom transition. */
     transitionName: "fade" | "slide-left" | "slide-right" | string;
+    /** A ref to provide access to the transition result. */
     transitionRef?: Ref<SwitchTransitionRef<T>>;
 }
+/**
+ * A component that transitions between two children.
+ *
+ * @param {object} props - The props for the component.
+ * @param {TransitionMapOptions["allowMultiple"]} props.allowMultiple - Allow multiple items to be in the 'entered' state at the same time.
+ * @param {boolean} props.animateHeight - Whether to animate the height of the component.
+ * @param {boolean} props.autoFocus - Whether to auto focus the first focusable child on transition change.
+ * @param {ElementType} props.as - The component to render.
+ * @param {(props: { key: T } & Partial<TransitionState>) => ReactNode} props.children - A render function for each child. A child will be rednered for each item in the `items` prop, which will be passed to the render function as the `key` prop. The TransitionState (status, isMounted, isEnter, isResolved) will also be passed to the render function as data-attributes.
+ * @param {string} props.className - The class name to apply to the component.
+ * @param {T[]} props.items - Item keys to transition between.
+ * @param {TransitionMapOptions["enter"]} props.enter - Enable or disable enter phase transitions.
+ * @param {TransitionMapOptions["exit"]} props.exit - Enable or disable exit phase transition.
+ * @param {TransitionMapOptions["initialEntered"]} props.initialEntered - Beginning from 'entered' state.
+ * @param {TransitionMapOptions["mountOnEnter"]} props.mountOnEnter - State will be 'unmounted' until hit enter phase for the first time. It allows you to create lazily mounted component.
+ * @param {TransitionMapOptions["onStateChange"]} props.onStateChange - A callback function that is called when the state of the transition changes.
+ * @param {TransitionMapOptions["preEnter"]} props.preEnter - Add a 'preEnter' state immediately before 'entering', which is necessary to change DOM elements from unmounted or display: none with CSS transition (not necessary for CSS animation).
+ * @param {TransitionMapOptions["preExit"]} props.preExit - Add a 'preExit' state immediately before 'exiting'.
+ * @param {TransitionMapOptions["timeout"]} props.timeout - Set timeout in ms for transitions; you can set a single value or different values for enter and exit transitions.
+ * @param {TransitionMapOptions["unmountOnExit"]} props.unmountOnExit - State will become 'unmounted' after 'exiting' finishes. It allows you to transition component out of DOM.
+ * @param {"fade" | "slide-left" | "slide-right" | string} props.transitionName - The name of the transition. Use one of the defined values to use a pre-defined transition, or a custom string to use a custom transition.
+ * @param {Ref<TransitionMapResult<T>>} props.transitionRef - A ref to provide access to the transition result.
+ * @param {CSSProperties} props.style - Styles to apply to the component.
+ * @returns {JSX.Element} The component.
+ */
 export declare const SwitchTransition: <T extends Key>({ allowMultiple, animateHeight, autoFocus, initialEntered, as: Component, children, className, enter, exit, items, mountOnEnter, onStateChange, preEnter, preExit, style, timeout, transitionName, transitionRef, unmountOnExit, ...props }: SwitchTransitionProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/ToggleListItem/index.d.ts

@@ -1,15 +1,46 @@
 import { MouseEventHandler, ReactNode } from 'react';
+/**
+ * The props for the ToggleListItem component.
+ */
 interface ToggleListItemProps {
+    /** An icon to display */
     icon?: ReactNode;
+    /** A label for the item */
     label: ReactNode;
+    /** Whether the item is in the active/enabled state */
     isActive?: boolean;
+    /** Whether the action button is pending */
     isPending?: boolean;
+    /** Whether the action button is disabled */
     isDisabled?: boolean;
+    /** A function to call when the activate button is clicked */
     onActivate?: MouseEventHandler<HTMLButtonElement>;
+    /** A function to call when the deactivate button is clicked */
     onDeactivate?: MouseEventHandler<HTMLButtonElement>;
+    /** Accessibility label for the activate button. Defaults to "Activate {label}" */
     activateAriaLabel?: string;
+    /** Accessibility label for the deactivate button. Defaults to "Deactivate {label}" */
     deactivateAriaLabel?: string;
+    /** The size of the list item. Defaults to "md" */
     size?: "md" | "sm";
 }
+/**
+ * A component for displaying a list item with an activate/deactivate toggle button.
+ * Shows a plus icon when inactive, minus icon when active.
+ *
+ * @param {ToggleListItemProps} props - The props for the ToggleListItem component.
+ * @returns {JSX.Element} The ToggleListItem component.
+ *
+ * @example
+ * ```tsx
+ * <ToggleListItem
+ *   icon={<IconEmail />}
+ *   label="Email"
+ *   isActive={isLinked}
+ *   onActivate={handleLink}
+ *   onDeactivate={handleUnlink}
+ * />
+ * ```
+ */
 export declare const ToggleListItem: ({ icon, label, isActive, isPending, isDisabled, onActivate, onDeactivate, activateAriaLabel, deactivateAriaLabel, size, }: ToggleListItemProps) => import("react/jsx-runtime").JSX.Element;
 export type { ToggleListItemProps };

package/dist/components/ui/VisuallyHidden/index.d.ts

@@ -3,5 +3,23 @@ interface VisuallyHiddenProps {
     as?: ElementType;
     children?: ReactNode;
 }
+/**
+ * Visually hidden component.
+ * Used to expose content to screen readers only.
+ *
+ * @param {VisuallyHiddenProps} props - The props for the component.
+ * @param {ElementType} [props.as] - The component to render. Note it must not have a Fragment as the root element. Defaults to "span".
+ * @param {ReactNode} [props.children] - The children of the component.
+ * @returns {JSX.Element} A visually hidden component.
+ *
+ * @example
+ * ```tsx lines
+ * // provide screen-reader accessible text for an abbreviation
+ * <p>
+ *   <span aria-hidden="true">30s</span>
+ *   <VisuallyHidden>30 seconds</VisuallyHidden>
+ * </p>
+ * ```
+ */
 export declare const VisuallyHidden: ({ as: Component, children }: VisuallyHiddenProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/data/countries.d.ts

@@ -1,12 +1,27 @@
 import { CountryCallingCode, CountryCode as ICountryCode } from 'libphonenumber-js';
+/**
+ * Re-export the type for the country code.
+ */
 export type CountryCode = ICountryCode;
+/**
+ * A country option for the country code select list.
+ */
 export type CountryOption = {
     callingCode: CountryCallingCode;
     code: CountryCode;
     flag: string;
     name: string;
 };
+/**
+ * These contries are completely removed from the phone dropdown
+ */
 export declare const OFAC_BLOCKED_COUNTRIES: string[];
 export declare const DEFAULT_COUNTRY_CODE: CountryCode;
+/**
+ * Returns the country calling code for a given country code.
+ *
+ * @param countryCode - The country code to get the calling code for.
+ * @returns The country calling code for the given country code.
+ */
 export declare const nonThrowingGetCountryCallingCode: (countryCode: CountryCode) => CountryCallingCode | undefined;
 export declare const countries: CountryOption[];

package/dist/data/countryNames.d.ts

@@ -1 +1,5 @@
+/**
+ * This file was copied from @cbhq/two-factor-register (/data/countryNames.ts)
+ * and currently only contains the country name for the US
+ */
 export declare const countryNames: Record<string, string>;

package/dist/hooks/useKeyExportPostMessage.d.ts

@@ -1,18 +1,43 @@
 import { RefObject } from 'react';
 import { SecureIframeChainType, SecureIframeKeyExportIncomingMessage, SecureIframeStatus, IframeTheme } from '../types/secureIframe';
+/**
+ * The props for the useKeyExportPostMessage hook.
+ */
 export interface UseKeyExportPostMessageProps {
+    /** The address of the account to export. */
     address: string;
+    /** The type of account to export. */
     type: SecureIframeChainType;
+    /** The base path of the secure iframe. */
     basePath?: string;
+    /** The project ID. */
     projectId: string;
+    /** The label of the button. */
     label?: string;
+    /** The label to display on copy success. */
     copiedLabel?: string;
+    /** Whether to show an icon in the button. */
     icon: boolean;
+    /** The ref to the iframe. */
     iframeRef: RefObject<HTMLIFrameElement | null>;
+    /** The function to call when the status is updated. */
     onStatusUpdate?: (status: SecureIframeStatus, message?: string) => void;
+    /** The theme to use for the iframe. */
     theme?: IframeTheme;
 }
+/**
+ * Sends a message to the secure iframe.
+ *
+ * @param el - The iframe element to send the message to.
+ * @param message - The message to send to the iframe.
+ */
 export declare const sendKeyExportMessage: (el: HTMLIFrameElement | null, message: SecureIframeKeyExportIncomingMessage) => void;
+/**
+ * The hook to use the key export post message.
+ *
+ * @param {UseKeyExportPostMessageProps} props - The props for the useKeyExportPostMessage hook.
+ * @returns The iframe url and the onLoad function.
+ */
 export declare const useKeyExportPostMessage: ({ address, basePath, copiedLabel, icon, iframeRef, label, onStatusUpdate, projectId, theme, type, }: UseKeyExportPostMessageProps) => {
     iframeUrl: string;
     isPending: boolean;

package/dist/hooks/usePhoneNumberState.d.ts

@@ -1,15 +1,62 @@
 import { CountryCode } from 'libphonenumber-js';
 import { PhoneNumber } from '../utils/parseValuesFromPhoneNumber';
+/**
+ * Options for the usePhoneNumberState hook.
+ */
 export interface UsePhoneNumberStateOptions {
+    /** The initial E.164 phone number string. */
     phoneNumber?: string;
+    /** The initial country code. Defaults to "US". */
     countryCode?: CountryCode;
+    /** Callback when the E.164 phone number changes. */
     onPhoneNumberChange?: (e164: string) => void;
+    /** Callback when the country code changes. */
     onCountryCodeChange?: (countryCode: CountryCode) => void;
 }
+/**
+ * Return value from the usePhoneNumberState hook.
+ */
 export interface UsePhoneNumberStateResult {
+    /** The phone number object with value and e164 fields. */
     phoneNumberObject: PhoneNumber;
+    /** The current country code. */
     countryCode: CountryCode;
+    /** Handler for PhoneNumberInput/PhoneNumberForm onPhoneNumberChange prop. */
     handlePhoneNumberChange: (pn: PhoneNumber) => void;
+    /** Handler for PhoneNumberInput/PhoneNumberForm onCountryCodeChange prop. */
     handleCountryCodeChange: (countryCode: CountryCode) => void;
 }
+/**
+ * A hook for managing phone number state with conversion between E.164 string
+ * and PhoneNumber object formats.
+ *
+ * This hook handles the bidirectional sync between:
+ * - An E.164 formatted string (used for API calls)
+ * - A PhoneNumber object with value/e164 fields (used by PhoneNumberInput/PhoneNumberForm)
+ *
+ * @param options - Configuration options for the hook.
+ * @param options.phoneNumber - The initial phone number.
+ * @param options.countryCode - The initial country code. Defaults to "US".
+ * @param options.onPhoneNumberChange - Callback when the phone number changes.
+ * @param options.onCountryCodeChange - Callback when the country code changes.
+ * @returns Phone number state and handlers for use with PhoneNumberInput/PhoneNumberForm.
+ *
+ * @example
+ * ```tsx
+ * const { phoneNumberObject, countryCode, handlePhoneNumberChange, handleCountryCodeChange } =
+ *   usePhoneNumberState({
+ *     phoneNumber: state.phoneNumber,
+ *     onPhoneNumberChange: (e164) => dispatch({ type: "SET_PHONE_NUMBER", payload: { phoneNumber: e164 } }),
+ *   });
+ *
+ * <PhoneNumberForm
+ *   phoneNumber={phoneNumberObject}
+ *   countryCode={countryCode}
+ *   onPhoneNumberChange={handlePhoneNumberChange}
+ *   onCountryCodeChange={handleCountryCodeChange}
+ * />
+ * ```
+ *
+ * @group Hooks
+ */
 export declare const usePhoneNumberState: ({ phoneNumber, countryCode: initialCountryCode, onPhoneNumberChange, onCountryCodeChange, }?: UsePhoneNumberStateOptions) => UsePhoneNumberStateResult;

package/dist/hooks/usePhoneNumberValidators.d.ts

@@ -3,6 +3,14 @@ import { CountryCode } from '../data/countries';
 interface UsePhoneNumberValidatorsProps {
     countryCode?: CountryCode;
 }
+/**
+ * A hook that returns a set of phone number validation functions.
+ *
+ * @param {UsePhoneNumberValidatorsProps} props - The props for the hook.
+ * @param {UsePhoneNumberValidatorsProps["error"]} [props.error] - The error message or API error.
+ * @param {UsePhoneNumberValidatorsProps["countryCode"]} [props.countryCode] - The country code to use for validation. Defaults to "US".
+ * @returns {object} An object containing the validation functions.
+ */
 export declare const usePhoneNumberValidators: ({ countryCode }: UsePhoneNumberValidatorsProps) => {
     isInvalidCountry: (v: string) => boolean;
     isInvalidLength: (v: string) => boolean;

package/dist/hooks/useTimeout.d.ts

@@ -1,3 +1,21 @@
+/**
+ * A hook that returns a `schedule` function for delayed callbacks with automatic cleanup.
+ *
+ * Calling `schedule` cancels any previously pending timeout. The timeout is
+ * automatically cancelled when the component unmounts, preventing state updates
+ * on unmounted components.
+ *
+ * @returns An object with `schedule` and `cancel` functions.
+ *
+ * @example
+ * ```tsx
+ * const { schedule } = useTimeout();
+ *
+ * const handleSuccess = () => {
+ *   schedule(() => resetView(), 800);
+ * };
+ * ```
+ */
 export declare const useTimeout: () => {
     schedule: (callback: () => void, delay: number) => void;
     cancel: () => void;

package/dist/hooks/useTimer.d.ts

@@ -1,3 +1,9 @@
+/**
+ * A countdown timer hook.
+ * It uses timestamp comparisons to remain accurate despite browser throttling or event loop delays.
+ *
+ * @returns {object} An object containing the current time left, a function to start the timer, and a function to reset the timer.
+ */
 export declare const useTimer: () => {
     timeRemaining: number | null;
     start: (durationSeconds: number) => void;

package/dist/hooks/useTransitionMap.d.ts

@@ -1,4 +1,7 @@
 import { TransitionState } from '../utils/transition';
+/**
+ * The options for a transition.
+ */
 export interface TransitionOptions {
     initialEntered?: boolean;
     mountOnEnter?: boolean;
@@ -15,9 +18,15 @@ export interface TransitionOptions {
         current: TransitionState;
     }) => void;
 }
+/**
+ * The options for a transition item.
+ */
 export interface TransitionItemOptions {
     initialEntered?: boolean;
 }
+/**
+ * The options for a transition map.
+ */
 export interface TransitionMapOptions<K> extends Omit<TransitionOptions, "onStateChange"> {
     allowMultiple?: boolean;
     onStateChange?: (event: {
@@ -25,6 +34,9 @@ export interface TransitionMapOptions<K> extends Omit<TransitionOptions, "onStat
         current: TransitionState;
     }) => void;
 }
+/**
+ * The result of a transition map.
+ */
 export interface TransitionMapResult<K> {
     stateMap: ReadonlyMap<K, TransitionState>;
     toggle: (key: K, toEnter?: boolean) => void;
@@ -33,6 +45,16 @@ export interface TransitionMapResult<K> {
     setItem: (key: K, options?: TransitionItemOptions) => void;
     deleteItem: (key: K) => boolean;
 }
+/**
+ * The useTransitionMap hook is a hook that provides a transition state map.
+ *
+ * @param {TransitionMapOptions<K>} options - The options for the transition map.
+ * @returns {TransitionMapResult<K>} - The result of the transition map.
+ *
+ * @see {@link SwitchTransition}
+ *
+ * @group Hooks
+ */
 declare const useTransitionMap: <K>(options?: TransitionMapOptions<K>) => {
     stateMap: Map<K, Readonly<{
         _s: number;

package/dist/hooks/useVerifyMfaModal.d.ts

@@ -1,22 +1,100 @@
 import { ReactNode, RefObject } from 'react';
 import { VerifyMfaModalProps } from '../components/VerifyMfaModal';
+/**
+ * Options for the useVerifyMfaModal hook.
+ */
 export interface UseVerifyMfaModalOptions extends Pick<VerifyMfaModalProps, "onCancel" | "onError" | "onSuccess"> {
+    /**
+     * The delay in milliseconds before the modal is closed after successful verification.
+     * If `null`, the modal will not close automatically after success.
+     * If `0`, the modal closes immediately.
+     * Defaults to 500ms.
+     *
+     * @default 500
+     */
     closeOnSuccessDelay?: number | null;
 }
+/**
+ * Return value of the useVerifyMfaModal hook.
+ */
 export interface UseVerifyMfaModalReturn {
+    /** Opens the MFA verification modal. Returns true if opened, false if a modal is already open. */
     open: () => boolean;
+    /** Closes the MFA verification modal */
     close: () => void;
 }
 interface VerifyMfaModalContextValue {
+    /** Registers a modal instance with its options ref */
     register: (id: string, optionsRef: RefObject<UseVerifyMfaModalOptions>) => void;
+    /** Unregisters a modal instance */
     unregister: (id: string) => void;
+    /** Opens the modal for a specific instance. Returns true if opened, false if already open. */
     open: (id: string) => boolean;
+    /** Closes the currently open modal */
     close: () => void;
 }
 interface MfaVerificationProviderProps {
     children: ReactNode;
 }
+/**
+ * Provider component that manages MFA verification UI coordination.
+ *
+ * This provider:
+ * - Enables the `useVerifyMfaModal` hook for programmatic modal control
+ * - Registers a global MFA handler that respects the `mfa.disableAutoPrompt` config
+ * - Supports multiple CDPReactProvider instances on the same page
+ *
+ * This is automatically included in `CDPReactProvider`.
+ *
+ * @param {MfaVerificationProviderProps} props - The props for the MfaVerificationProvider component.
+ * @param {ReactNode} props.children - The children of the MfaVerificationProvider component.
+ * @returns {JSX.Element} The MfaVerificationProvider component.
+ * @internal
+ */
 export declare const VerifyMfaModalProvider: ({ children }: MfaVerificationProviderProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to imperatively control the MFA verification modal.
+ *
+ * This hook allows you to open and close the MFA verification modal programmatically,
+ * which is useful for integrating MFA verification into complex flows without using
+ * the `<VerifyMfaModal />` component pattern.
+ *
+ * @param {UseVerifyMfaModalOptions} options - The options for the hook including callbacks.
+ * @returns {UseVerifyMfaModalReturn} An object containing `open` and `close` functions.
+ *
+ * @group Hooks
+ *
+ * @example
+ * ```tsx lines
+ * function ProtectedAction() {
+ *   const { open } = useVerifyMfaModal({
+ *     onSuccess: () => performSensitiveAction(),
+ *     onError: (error) => console.error("MFA verification failed:", error),
+ *     onCancel: () => console.log("MFA verification cancelled"),
+ *   });
+ *
+ *   const handleClick = () => {
+ *     const opened = open(); // Returns false if modal is already open
+ *     if (!opened) {
+ *       console.log("MFA modal is already open");
+ *     }
+ *   };
+ *
+ *   return (
+ *     <button onClick={handleClick}>
+ *       Perform sensitive action
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
 export declare const useVerifyMfaModal: (options?: UseVerifyMfaModalOptions) => UseVerifyMfaModalReturn;
+/**
+ * Hook to access the MFA verification context for coordination.
+ * Used internally by MfaFlow to coordinate with the global modal.
+ *
+ * @returns The MFA verification context value with default values if not in a provider.
+ * @internal
+ */
 export declare const useMfaVerification: () => VerifyMfaModalContextValue;
 export {};

package/dist/icons/IconAppleLogo.d.ts

@@ -1,2 +1,24 @@
 import { SVGProps } from 'react';
+/**
+ * Apple logo icon component.
+ *
+ * @param {SVGProps<SVGSVGElement>} props - The props for the icon.
+ * @returns {JSX.Element} The Apple logo icon.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx
+ * // Icon is correctly hidden from screen readers
+ * <p>
+ *   <IconAppleLogo />
+ *   Apple
+ * </p>
+ *
+ * // Icon with screen-reader accessible label only
+ * <p>
+ *   <IconAppleLogo aria-label="Apple" />
+ * </p>
+ * ```
+ */
 export declare const IconAppleLogo: (props: Omit<SVGProps<SVGSVGElement>, "viewBox">) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/IconArrowLeft.d.ts

@@ -1,2 +1,24 @@
 import { SVGProps } from 'react';
+/**
+ * Arrow Left icon component.
+ *
+ * @param {SVGProps<SVGSVGElement>} props - The props for the icon.
+ * @returns {JSX.Element} The Arrow Left icon.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * // Icon is correctly hidden from screen readers
+ * <p>
+ *   <IconArrowLeft />
+ *   Back
+ * </p>
+ *
+ * // Icon with screen-reader accessible label only
+ * <p>
+ *   <IconArrowLeft aria-label="Back" />
+ * </p>
+ * ```
+ */
 export declare const IconArrowLeft: (props: Omit<SVGProps<SVGSVGElement>, "viewBox">) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/IconArrowsUpDown.d.ts

@@ -1,2 +1,24 @@
 import { SVGProps } from 'react';
+/**
+ * Arrows Up/Down icon component.
+ *
+ * @param {SVGProps<SVGSVGElement>} props - The props for the icon.
+ * @returns {JSX.Element} The Arrow Left icon.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * // Icon is correctly hidden from screen readers
+ * <p>
+ *   <IconArrowsUpDown />
+ *   Swap
+ * </p>
+ *
+ * // Icon with screen-reader accessible label only
+ * <p>
+ *   <IconArrowsUpDown aria-label="Swap" />
+ * </p>
+ * ```
+ */
 export declare const IconArrowsUpDown: (props: Omit<SVGProps<SVGSVGElement>, "viewBox">) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/IconCheck.d.ts

@@ -1,2 +1,24 @@
 import { SVGProps } from 'react';
+/**
+ * Check Circle icon component.
+ *
+ * @param {SVGProps<SVGSVGElement>} props - The props for the icon.
+ * @returns {JSX.Element} The Check Circle icon.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * // Icon is correctly from screen readers
+ * <p>
+ *   <IconCheck />
+ *   Success!
+ * </p>
+ *
+ * // Icon with screen-reader accessible label only
+ * <p>
+ *   <IconCheck aria-label="Success" />
+ * </p>
+ * ```
+ */
 export declare const IconCheck: (props: Omit<SVGProps<SVGSVGElement>, "viewBox">) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/IconCheckCircle.d.ts

@@ -1,2 +1,23 @@
 import { SVGProps } from 'react';
+/**
+ * Check Circle icon component.
+ *
+ * @param {SVGProps<SVGSVGElement>} props - The props for the icon.
+ * @returns {JSX.Element} The Check Circle icon.
+ *
+ * @group Components
+ * @example
+ * ```tsx lines
+ * // Icon is correctly from screen readers
+ * <p>
+ *   <IconCheckCircle />
+ *   Success!
+ * </p>
+ *
+ * // Icon with screen-reader accessible label only
+ * <p>
+ *   <IconCheckCircle aria-label="Success" />
+ * </p>
+ * ```
+ */
 export declare const IconCheckCircle: (props: Omit<SVGProps<SVGSVGElement>, "viewBox">) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/IconChevronDown.d.ts

@@ -1,2 +1,24 @@
 import { SVGProps } from 'react';
+/**
+ * Chevron down icon component.
+ *
+ * @param {SVGProps<SVGSVGElement>} props - The props for the icon.
+ * @returns {JSX.Element} The chevron down icon.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * // Icon is correctly hidden from screen readers
+ * <p>
+ *   <IconChevronDown />
+ *   Expand
+ * </p>
+ *
+ * // Icon with screen-reader accessible label only
+ * <p>
+ *   <IconChevronDown aria-label="Expand" />
+ * </p>
+ * ```
+ */
 export declare const IconChevronDown: (props: Omit<SVGProps<SVGSVGElement>, "viewBox">) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/IconCoinbaseMark.d.ts

@@ -1,2 +1,24 @@
 import { SVGProps } from 'react';
+/**
+ * Coinbase mark icon component.
+ *
+ * @param {SVGProps<SVGSVGElement>} props - The props for the icon.
+ * @returns {JSX.Element} The Coinbase mark icon.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx
+ * // Icon is correctly hidden from screen readers
+ * <p>
+ *   <IconCoinbaseMark />
+ *   Coinbase
+ * </p>
+ *
+ * // Icon with screen-reader accessible label only
+ * <p>
+ *   <IconCoinbaseMark aria-label="Coinbase" />
+ * </p>
+ * ```
+ */
 export declare const IconCoinbaseMark: (props: Omit<SVGProps<SVGSVGElement>, "viewBox">) => import("react/jsx-runtime").JSX.Element;