@coinbase/cds-web 8.13.1 → 8.13.5

package/dts/system/Interactable.d.ts

@@ -3,9 +3,11 @@ import type { ThemeVars } from '@coinbase/cds-common/core/theme';
 import type { Polymorphic } from '../core/polymorphism';
 import type { Theme } from '../core/theme';
 import { type BoxBaseProps } from '../layout/Box';
-export declare const interactableDefaultElement = "button";
+export declare const interactableDefaultElement = 'button';
 export type InteractableDefaultElement = typeof interactableDefaultElement;
-export type InteractableBaseProps = Polymorphic.ExtendableProps<BoxBaseProps, {
+export type InteractableBaseProps = Polymorphic.ExtendableProps<
+  BoxBaseProps,
+  {
     /** Apply class names to the outer container. */
     className?: string;
     /** Background color of the overlay (element being interacted with). */
@@ -52,47 +54,59 @@ export type InteractableBaseProps = Polymorphic.ExtendableProps<BoxBaseProps, {
      * ```
      */
     blendStyles?: {
-        background?: string;
-        pressedBackground?: string;
-        disabledBackground?: string;
-        hoveredBackground?: string;
-        borderColor?: string;
-        pressedBorderColor?: string;
-        disabledBorderColor?: string;
-        hoveredBorderColor?: string;
+      background?: string;
+      pressedBackground?: string;
+      disabledBackground?: string;
+      hoveredBackground?: string;
+      borderColor?: string;
+      pressedBorderColor?: string;
+      disabledBorderColor?: string;
+      hoveredBorderColor?: string;
     };
-}>;
-export type InteractableProps<AsComponent extends React.ElementType> = Polymorphic.Props<AsComponent, InteractableBaseProps>;
-type InteractableComponent = (<AsComponent extends React.ElementType = InteractableDefaultElement>(props: InteractableProps<AsComponent>) => Polymorphic.ReactReturn) & Polymorphic.ReactNamed;
+  }
+>;
+export type InteractableProps<AsComponent extends React.ElementType> = Polymorphic.Props<
+  AsComponent,
+  InteractableBaseProps
+>;
+type InteractableComponent = (<AsComponent extends React.ElementType = InteractableDefaultElement>(
+  props: InteractableProps<AsComponent>,
+) => Polymorphic.ReactReturn) &
+  Polymorphic.ReactNamed;
 export declare const Interactable: InteractableComponent;
-export declare const getInteractableStyles: ({ theme, background, borderColor, blendStyles, }: {
-    theme: Theme;
-    background?: ThemeVars.Color;
-    borderColor?: ThemeVars.Color;
-    blendStyles?: {
-        background?: string;
-        pressedBackground?: string;
-        disabledBackground?: string;
-        hoveredBackground?: string;
-        borderColor?: string;
-        pressedBorderColor?: string;
-        disabledBorderColor?: string;
-        hoveredBorderColor?: string;
-    };
+export declare const getInteractableStyles: ({
+  theme,
+  background,
+  borderColor,
+  blendStyles,
+}: {
+  theme: Theme;
+  background?: ThemeVars.Color;
+  borderColor?: ThemeVars.Color;
+  blendStyles?: {
+    background?: string;
+    pressedBackground?: string;
+    disabledBackground?: string;
+    hoveredBackground?: string;
+    borderColor?: string;
+    pressedBorderColor?: string;
+    disabledBorderColor?: string;
+    hoveredBorderColor?: string;
+  };
 }) => {
-    "--interactable-background": string;
-    "--interactable-border-color": string;
-    /**
-     * Apply an interactive background style. Blend the color with the background or backgroundInverse values
-     */
-    "--interactable-hovered-background": string;
-    "--interactable-hovered-border-color": string;
-    "--interactable-hovered-opacity": number;
-    "--interactable-pressed-background": string;
-    "--interactable-pressed-border-color": string;
-    "--interactable-pressed-opacity": number;
-    "--interactable-disabled-background": string;
-    "--interactable-disabled-border-color": string;
+  '--interactable-background': string;
+  '--interactable-border-color': string;
+  /**
+   * Apply an interactive background style. Blend the color with the background or backgroundInverse values
+   */
+  '--interactable-hovered-background': string;
+  '--interactable-hovered-border-color': string;
+  '--interactable-hovered-opacity': number;
+  '--interactable-pressed-background': string;
+  '--interactable-pressed-border-color': string;
+  '--interactable-pressed-opacity': number;
+  '--interactable-disabled-background': string;
+  '--interactable-disabled-border-color': string;
 };
 export {};
-//# sourceMappingURL=Interactable.d.ts.map
+//# sourceMappingURL=Interactable.d.ts.map

package/dts/system/MediaQueryProvider.d.ts

@@ -1,24 +1,24 @@
 import React from 'react';
 export type MediaSettings = {
-    width?: number;
-    height?: number;
-    fontSize?: number;
-    colorScheme?: 'light' | 'dark';
-    contrast?: 'more' | 'less';
+  width?: number;
+  height?: number;
+  fontSize?: number;
+  colorScheme?: 'light' | 'dark';
+  contrast?: 'more' | 'less';
 };
 export declare const cdsDefaultValues: {
-    width: 1280;
-    colorScheme: "light";
+  width: 1280;
+  colorScheme: 'light';
 };
 export type MediaQueryContextValue = {
-    subscribe: (query: string, callback: () => void) => () => void;
-    getSnapshot: (query: string) => boolean;
-    getServerSnapshot: (query: string) => boolean;
+  subscribe: (query: string, callback: () => void) => () => void;
+  getSnapshot: (query: string) => boolean;
+  getServerSnapshot: (query: string) => boolean;
 };
 export declare const MediaQueryContext: React.Context<MediaQueryContextValue | null>;
 export type MediaQueryProviderProps = {
-    children?: React.ReactNode;
-    defaultValues?: MediaSettings;
+  children?: React.ReactNode;
+  defaultValues?: MediaSettings;
 };
 /**
  * A context provider that manages media query subscriptions with server-side rendering support.
@@ -33,13 +33,14 @@ export type MediaQueryProviderProps = {
  * </MediaQueryProvider>
  * ```
  */
-export declare const MediaQueryProvider: ({ children, defaultValues, }: MediaQueryProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MediaQueryProvider: ({
+  children,
+  defaultValues,
+}: MediaQueryProviderProps) => import('react/jsx-runtime').JSX.Element;
 export declare const createMediaQueryStore: () => {
-    init: (options: {
-        defaultValues?: MediaSettings;
-    }) => void;
-    subscribe: (query: string, callback: () => void) => (() => void);
-    getSnapshot: (query: string) => boolean;
-    getServerSnapshot: (query: string) => boolean;
+  init: (options: { defaultValues?: MediaSettings }) => void;
+  subscribe: (query: string, callback: () => void) => () => void;
+  getSnapshot: (query: string) => boolean;
+  getServerSnapshot: (query: string) => boolean;
 };
-//# sourceMappingURL=MediaQueryProvider.d.ts.map
+//# sourceMappingURL=MediaQueryProvider.d.ts.map

package/dts/system/Pressable.d.ts

@@ -2,15 +2,24 @@ import React from 'react';
 import type { ComponentEventHandlerProps } from '@coinbase/cds-common/types/ComponentEventHandlerProps';
 import type { Polymorphic } from '../core/polymorphism';
 import { type InteractableBaseProps } from './Interactable';
-export declare const pressableDefaultElement = "button";
+export declare const pressableDefaultElement = 'button';
 export type PressableDefaultElement = typeof pressableDefaultElement;
-export type PressableBaseProps = Polymorphic.ExtendableProps<InteractableBaseProps, ComponentEventHandlerProps & {
+export type PressableBaseProps = Polymorphic.ExtendableProps<
+  InteractableBaseProps,
+  ComponentEventHandlerProps & {
     /** Dont scale element on press. */
     noScaleOnPress?: boolean;
     focusable?: boolean;
-}>;
-export type PressableProps<AsComponent extends React.ElementType> = Polymorphic.Props<AsComponent, PressableBaseProps>;
-type PressableComponent = (<AsComponent extends React.ElementType = PressableDefaultElement>(props: PressableProps<AsComponent>) => Polymorphic.ReactReturn) & Polymorphic.ReactNamed;
+  }
+>;
+export type PressableProps<AsComponent extends React.ElementType> = Polymorphic.Props<
+  AsComponent,
+  PressableBaseProps
+>;
+type PressableComponent = (<AsComponent extends React.ElementType = PressableDefaultElement>(
+  props: PressableProps<AsComponent>,
+) => Polymorphic.ReactReturn) &
+  Polymorphic.ReactNamed;
 export declare const Pressable: PressableComponent;
 export {};
-//# sourceMappingURL=Pressable.d.ts.map
+//# sourceMappingURL=Pressable.d.ts.map

package/dts/system/PressableOpacity.d.ts

@@ -1,14 +1,25 @@
 import React from 'react';
 import type { Polymorphic } from '../core/polymorphism';
 import { type PressableBaseProps } from './Pressable';
-export declare const pressableOpacityDefaultElement = "button";
+export declare const pressableOpacityDefaultElement = 'button';
 export type PressableOpacityDefaultElement = typeof pressableOpacityDefaultElement;
 /** @deprecated This component will be removed in a future version. Use `<Pressable background="transparent">` instead. */
-export type PressableOpacityBaseProps = Omit<PressableBaseProps, 'background' | 'borderColor' | 'borderRadius' | 'borderWidth' | 'transparentWhileInactive'>;
+export type PressableOpacityBaseProps = Omit<
+  PressableBaseProps,
+  'background' | 'borderColor' | 'borderRadius' | 'borderWidth' | 'transparentWhileInactive'
+>;
 /** @deprecated This component will be removed in a future version. Use `<Pressable background="transparent">` instead. */
-export type PressableOpacityProps<AsComponent extends React.ElementType> = Polymorphic.Props<AsComponent, PressableOpacityBaseProps>;
-type PressableOpacityComponent = (<AsComponent extends React.ElementType = PressableOpacityDefaultElement>(props: PressableOpacityProps<AsComponent>) => Polymorphic.ReactReturn) & Polymorphic.ReactNamed;
+export type PressableOpacityProps<AsComponent extends React.ElementType> = Polymorphic.Props<
+  AsComponent,
+  PressableOpacityBaseProps
+>;
+type PressableOpacityComponent = (<
+  AsComponent extends React.ElementType = PressableOpacityDefaultElement,
+>(
+  props: PressableOpacityProps<AsComponent>,
+) => Polymorphic.ReactReturn) &
+  Polymorphic.ReactNamed;
 /** @deprecated This component will be removed in a future version. Use `<Pressable background="transparent">` instead. */
 export declare const PressableOpacity: PressableOpacityComponent;
 export {};
-//# sourceMappingURL=PressableOpacity.d.ts.map
+//# sourceMappingURL=PressableOpacity.d.ts.map

package/dts/system/ThemeProvider.d.ts

@@ -3,27 +3,35 @@ import type { ColorScheme } from '@coinbase/cds-common/core/theme';
 import type { Theme, ThemeConfig, ThemeCSSVars } from '../core/theme';
 import { type FramerMotionProviderProps } from './FramerMotionProvider';
 declare module 'csstype' {
-    interface Properties extends Partial<ThemeCSSVars> {
-    }
+  interface Properties extends Partial<ThemeCSSVars> {}
 }
 export type ThemeContextValue = Theme;
 export declare const ThemeContext: React.Context<Theme | undefined>;
 type ThemeManagerProps = {
-    display?: React.CSSProperties['display'];
-    children?: React.ReactNode;
-    theme: Theme;
+  display?: React.CSSProperties['display'];
+  children?: React.ReactNode;
+  theme: Theme;
 };
 export declare const useThemeProviderStyles: (theme: Theme) => Record<string, unknown>;
-export type ThemeProviderProps = Pick<ThemeManagerProps, 'display'> & Pick<FramerMotionProviderProps, 'motionFeatures'> & {
+export type ThemeProviderProps = Pick<ThemeManagerProps, 'display'> &
+  Pick<FramerMotionProviderProps, 'motionFeatures'> & {
     theme: ThemeConfig;
     activeColorScheme: ColorScheme;
     children?: React.ReactNode;
-};
-export declare const ThemeProvider: ({ theme, activeColorScheme, children, display, motionFeatures, }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
+  };
+export declare const ThemeProvider: ({
+  theme,
+  activeColorScheme,
+  children,
+  display,
+  motionFeatures,
+}: ThemeProviderProps) => import('react/jsx-runtime').JSX.Element;
 export type InvertedThemeProviderProps = {
-    children?: React.ReactNode;
+  children?: React.ReactNode;
 };
 /** Falls back to the currently active colorScheme if the inverse colors are not defined in the theme.  */
-export declare const InvertedThemeProvider: ({ children }: InvertedThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InvertedThemeProvider: ({
+  children,
+}: InvertedThemeProviderProps) => import('react/jsx-runtime').JSX.Element;
 export {};
-//# sourceMappingURL=ThemeProvider.d.ts.map
+//# sourceMappingURL=ThemeProvider.d.ts.map

package/dts/system/index.d.ts

@@ -4,4 +4,4 @@ export * from './MediaQueryProvider';
 export * from './Pressable';
 export * from './PressableOpacity';
 export * from './ThemeProvider';
-//# sourceMappingURL=index.d.ts.map
+//# sourceMappingURL=index.d.ts.map

package/dts/system/interactableCSSProperties.d.ts

@@ -1,12 +1,12 @@
-export declare const interactableBorderRadius = "--interactable-border-radius";
-export declare const interactableBackground = "--interactable-background";
-export declare const interactableBorderColor = "--interactable-border-color";
-export declare const interactablePressedBackground = "--interactable-pressed-background";
-export declare const interactablePressedBorderColor = "--interactable-pressed-border-color";
-export declare const interactablePressedOpacity = "--interactable-pressed-opacity";
-export declare const interactableHoveredBackground = "--interactable-hovered-background";
-export declare const interactableHoveredBorderColor = "--interactable-hovered-border-color";
-export declare const interactableHoveredOpacity = "--interactable-hovered-opacity";
-export declare const interactableDisabledBackground = "--interactable-disabled-background";
-export declare const interactableDisabledBorderColor = "--interactable-disabled-border-color";
-//# sourceMappingURL=interactableCSSProperties.d.ts.map
+export declare const interactableBorderRadius = '--interactable-border-radius';
+export declare const interactableBackground = '--interactable-background';
+export declare const interactableBorderColor = '--interactable-border-color';
+export declare const interactablePressedBackground = '--interactable-pressed-background';
+export declare const interactablePressedBorderColor = '--interactable-pressed-border-color';
+export declare const interactablePressedOpacity = '--interactable-pressed-opacity';
+export declare const interactableHoveredBackground = '--interactable-hovered-background';
+export declare const interactableHoveredBorderColor = '--interactable-hovered-border-color';
+export declare const interactableHoveredOpacity = '--interactable-hovered-opacity';
+export declare const interactableDisabledBackground = '--interactable-disabled-background';
+export declare const interactableDisabledBorderColor = '--interactable-disabled-border-color';
+//# sourceMappingURL=interactableCSSProperties.d.ts.map

package/dts/system/reakit-utils.d.ts

@@ -3,16 +3,24 @@
  * - https://github.com/ariakit/ariakit/tree/reakit/packages/reakit-utils
  */
 export declare function isNativeClick(event: React.KeyboardEvent): boolean;
-export declare function handleButtonFocusOnSafariOrFirefoxOnMac(event: React.MouseEvent<HTMLElement>): void;
+export declare function handleButtonFocusOnSafariOrFirefoxOnMac(
+  event: React.MouseEvent<HTMLElement>,
+): void;
 export declare function isNativeTabbable(element: Element): boolean;
 export declare function supportsDisabledAttribute(element: Element): boolean;
 type GetTabIndexOptions = {
-    disabled?: boolean;
-    focusable?: boolean;
-    supportsDisabled: boolean;
-    nativeTabbable: boolean;
-    tabIndex?: number;
+  disabled?: boolean;
+  focusable?: boolean;
+  supportsDisabled: boolean;
+  nativeTabbable: boolean;
+  tabIndex?: number;
 };
-export declare function getTabIndex({ disabled, focusable, supportsDisabled, nativeTabbable, tabIndex, }: GetTabIndexOptions): number | undefined;
+export declare function getTabIndex({
+  disabled,
+  focusable,
+  supportsDisabled,
+  nativeTabbable,
+  tabIndex,
+}: GetTabIndexOptions): number | undefined;
 export {};
-//# sourceMappingURL=reakit-utils.d.ts.map
+//# sourceMappingURL=reakit-utils.d.ts.map

package/dts/tables/Table.d.ts

@@ -11,10 +11,12 @@ import type { CellSpacing } from '../cells/Cell';
 export type TableVariant = 'default' | 'graph' | 'ruled';
 export type TableLayout = 'auto' | 'fixed';
 export type TableCellSpacing = {
-    inner?: CellSpacing;
-    outer?: CellSpacing;
+  inner?: CellSpacing;
+  outer?: CellSpacing;
 };
-export type TableProps = SharedProps & Pick<SharedAccessibilityProps, 'accessibilityLabelledBy' | 'accessibilityLabel'> & Omit<React.HTMLAttributes<HTMLTableElement>, 'dangerouslySetInnerHTML'> & {
+export type TableProps = SharedProps &
+  Pick<SharedAccessibilityProps, 'accessibilityLabelledBy' | 'accessibilityLabel'> &
+  Omit<React.HTMLAttributes<HTMLTableElement>, 'dangerouslySetInnerHTML'> & {
     /**
      * The variant prop allows clients to use a
      * CDS approved style for their Table.
@@ -48,40 +50,46 @@ export type TableProps = SharedProps & Pick<SharedAccessibilityProps, 'accessibi
      * @danger This is an escape hatch. It is not intended to be used normally.
      */
     className?: string;
-};
-export declare const Table: React.MemoExoticComponent<React.ForwardRefExoticComponent<SharedProps & Pick<SharedAccessibilityProps, "accessibilityLabel" | "accessibilityLabelledBy"> & Omit<React.HTMLAttributes<HTMLTableElement>, "dangerouslySetInnerHTML"> & {
-    /**
-     * The variant prop allows clients to use a
-     * CDS approved style for their Table.
-     * @default undefined
-     */
-    variant?: TableVariant;
-    /**
-     * Children are required, and should always include a TableBody.
-     * TableHeader and TableFooter are both optional, and will magically
-     * flow into the correct place in the table (top/bottom)
-     */
-    children: React.ReactNode;
-    /**
-     * When set, a border will be applied around the entire table
-     */
-    bordered?: boolean;
-    /**
-     * Use tableLayout='fixed' if you need full control over cell width
-     * @default 'auto'
-     */
-    tableLayout?: TableLayout;
-    /** Provide custom cell spacing for all child TableCells */
-    cellSpacing?: TableCellSpacing;
-    /** Use compact cell spacing. If set, cellSpacing will override these defaults */
-    compact?: boolean;
-    /** Set a fixed height. */
-    height?: DimensionValue;
-    /** Set a maximum height. */
-    maxHeight?: DimensionValue;
-    /**
-     * @danger This is an escape hatch. It is not intended to be used normally.
-     */
-    className?: string;
-} & React.RefAttributes<HTMLTableElement>>>;
-//# sourceMappingURL=Table.d.ts.map
+  };
+export declare const Table: React.MemoExoticComponent<
+  React.ForwardRefExoticComponent<
+    SharedProps &
+      Pick<SharedAccessibilityProps, 'accessibilityLabel' | 'accessibilityLabelledBy'> &
+      Omit<React.HTMLAttributes<HTMLTableElement>, 'dangerouslySetInnerHTML'> & {
+        /**
+         * The variant prop allows clients to use a
+         * CDS approved style for their Table.
+         * @default undefined
+         */
+        variant?: TableVariant;
+        /**
+         * Children are required, and should always include a TableBody.
+         * TableHeader and TableFooter are both optional, and will magically
+         * flow into the correct place in the table (top/bottom)
+         */
+        children: React.ReactNode;
+        /**
+         * When set, a border will be applied around the entire table
+         */
+        bordered?: boolean;
+        /**
+         * Use tableLayout='fixed' if you need full control over cell width
+         * @default 'auto'
+         */
+        tableLayout?: TableLayout;
+        /** Provide custom cell spacing for all child TableCells */
+        cellSpacing?: TableCellSpacing;
+        /** Use compact cell spacing. If set, cellSpacing will override these defaults */
+        compact?: boolean;
+        /** Set a fixed height. */
+        height?: DimensionValue;
+        /** Set a maximum height. */
+        maxHeight?: DimensionValue;
+        /**
+         * @danger This is an escape hatch. It is not intended to be used normally.
+         */
+        className?: string;
+      } & React.RefAttributes<HTMLTableElement>
+  >
+>;
+//# sourceMappingURL=Table.d.ts.map

package/dts/tables/TableBody.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
 import { type TableSectionProps } from './TableSection';
 export type TableBodyProps = TableSectionProps;
-export declare const TableBody: React.MemoExoticComponent<({ children, testID, ...props }: TableBodyProps) => import("react/jsx-runtime").JSX.Element>;
-//# sourceMappingURL=TableBody.d.ts.map
+export declare const TableBody: React.MemoExoticComponent<
+  ({ children, testID, ...props }: TableBodyProps) => import('react/jsx-runtime').JSX.Element
+>;
+//# sourceMappingURL=TableBody.d.ts.map

package/dts/tables/TableCaption.d.ts

@@ -3,9 +3,31 @@ import type { SharedProps, TextAlignProps } from '@coinbase/cds-common';
 import type { ThemeVars } from '@coinbase/cds-common/core/theme';
 import type { TableCellProps } from './TableCell';
 type HTMLHeadingTags = 'h1' | 'h2' | 'h3' | 'h4';
-type HTMLNonHeadingTextTags = 'p' | 'strong' | 'span' | 'label' | 'time' | 'output' | 'code' | 'pre' | 's' | 'abbr' | 'q' | 'kbd' | 'del' | 'ins' | 'sup' | 'sub' | 'li' | 'dl' | 'dt' | 'dd' | 'div';
+type HTMLNonHeadingTextTags =
+  | 'p'
+  | 'strong'
+  | 'span'
+  | 'label'
+  | 'time'
+  | 'output'
+  | 'code'
+  | 'pre'
+  | 's'
+  | 'abbr'
+  | 'q'
+  | 'kbd'
+  | 'del'
+  | 'ins'
+  | 'sup'
+  | 'sub'
+  | 'li'
+  | 'dl'
+  | 'dt'
+  | 'dd'
+  | 'div';
 type HTMLTextTags = HTMLHeadingTags | HTMLNonHeadingTextTags;
-export type TableCaptionProps = SharedProps & Omit<React.HTMLAttributes<HTMLTableCaptionElement>, 'dangerouslySetInnerHTML'> & {
+export type TableCaptionProps = SharedProps &
+  Omit<React.HTMLAttributes<HTMLTableCaptionElement>, 'dangerouslySetInnerHTML'> & {
     /**
      * The children to render, either as a React element or a string.
      */
@@ -40,7 +62,20 @@ export type TableCaptionProps = SharedProps & Omit<React.HTMLAttributes<HTMLTabl
      * Overrides table cell spacing defaults.
      */
     innerSpacing?: TableCellProps['innerSpacing'];
-};
-export declare const TableCaption: React.MemoExoticComponent<({ children, as, align, color, backgroundColor, outerSpacing, innerSpacing, testID, style, ...props }: TableCaptionProps) => import("react/jsx-runtime").JSX.Element>;
+  };
+export declare const TableCaption: React.MemoExoticComponent<
+  ({
+    children,
+    as,
+    align,
+    color,
+    backgroundColor,
+    outerSpacing,
+    innerSpacing,
+    testID,
+    style,
+    ...props
+  }: TableCaptionProps) => import('react/jsx-runtime').JSX.Element
+>;
 export {};
-//# sourceMappingURL=TableCaption.d.ts.map
+//# sourceMappingURL=TableCaption.d.ts.map