@coinbase/cds-common 8.13.1 → 8.13.2

package/dts/tokens/tags.d.ts

@@ -3,10 +3,16 @@ import type { TagColorScheme, TagIntent } from '../types/TagBaseProps';
 export declare const tagHorizontalSpacing: Record<TagIntent, ThemeVars.Space>;
 export declare const tagFontMap: Record<TagIntent, ThemeVars.FontFamily>;
 export declare const tagBorderRadiusMap: Record<TagIntent, ThemeVars.BorderRadius>;
-type TagColorMap = Record<TagIntent, Record<TagColorScheme, {
-    background: ThemeVars.SpectrumColor;
-    foreground: ThemeVars.SpectrumColor;
-}>>;
+type TagColorMap = Record<
+  TagIntent,
+  Record<
+    TagColorScheme,
+    {
+      background: ThemeVars.SpectrumColor;
+      foreground: ThemeVars.SpectrumColor;
+    }
+  >
+>;
 export declare const tagColorMap: TagColorMap;
 export {};
-//# sourceMappingURL=tags.d.ts.map
+//# sourceMappingURL=tags.d.ts.map

package/dts/tokens/tile.d.ts

@@ -1,4 +1,4 @@
 export declare const pictogramSize = 48;
 export declare const pictogramWrapperSize = 62;
 export declare const pictogramScaleMultiplier = 0.8;
-//# sourceMappingURL=tile.d.ts.map
+//# sourceMappingURL=tile.d.ts.map

package/dts/tokens/toast.d.ts

@@ -2,4 +2,4 @@ export declare const defaultDuration = 5000;
 export declare const withActionDuration = 2000;
 export declare const perCharsDuration = 300;
 export declare const charsThreshold = 50;
-//# sourceMappingURL=toast.d.ts.map
+//# sourceMappingURL=toast.d.ts.map

package/dts/tokens/tooltip.d.ts

@@ -1,4 +1,4 @@
 export declare const tooltipMaxWidth = 260;
 export declare const tooltipPaddingX = 2;
 export declare const tooltipPaddingY = 1;
-//# sourceMappingURL=tooltip.d.ts.map
+//# sourceMappingURL=tooltip.d.ts.map

package/dts/tokens/zIndex.d.ts

@@ -1,14 +1,14 @@
 export declare const zIndex: {
-    readonly interactable: 1;
-    readonly navigation: 2;
-    readonly portal: 100001;
-    readonly popoverMenu: 2;
-    readonly modal: 3;
-    readonly dropdown: 4;
-    readonly tooltip: 5;
-    readonly toast: 6;
-    readonly alert: 7;
-    readonly tray: 4;
-    readonly max: 2147483647;
+  readonly interactable: 1;
+  readonly navigation: 2;
+  readonly portal: 100001;
+  readonly popoverMenu: 2;
+  readonly modal: 3;
+  readonly dropdown: 4;
+  readonly tooltip: 5;
+  readonly toast: 6;
+  readonly alert: 7;
+  readonly tray: 4;
+  readonly max: 2147483647;
 };
-//# sourceMappingURL=zIndex.d.ts.map
+//# sourceMappingURL=zIndex.d.ts.map

package/dts/tour/TourContext.d.ts

@@ -3,4 +3,4 @@ import type { TourApi } from './useTour';
 export type TourContextValue<T extends string = string> = TourApi<T>;
 export declare const TourContext: Context<TourContextValue<string> | undefined>;
 export declare const useTourContext: <T extends string = string>() => TourContextValue<T>;
-//# sourceMappingURL=TourContext.d.ts.map
+//# sourceMappingURL=TourContext.d.ts.map

package/dts/tour/useTour.d.ts

@@ -1,98 +1,104 @@
 import type React from 'react';
 import { type Coords, type Placement } from '@floating-ui/react-dom';
 export type TourStepArrowComponentProps = {
-    arrow?: Partial<Coords> & {
-        centerOffset: number;
-        alignmentOffset?: number;
-    };
-    placement: Placement;
-    style?: Record<string, string | number>;
+  arrow?: Partial<Coords> & {
+    centerOffset: number;
+    alignmentOffset?: number;
+  };
+  placement: Placement;
+  style?: Record<string, string | number>;
 };
 /**
  * The TourStepArrowComponent must forwardRef onto the underlying element for `@floating-ui` to correctly position the element.
  */
-export type TourStepArrowComponent = React.ForwardRefExoticComponent<TourStepArrowComponentProps & {
+export type TourStepArrowComponent = React.ForwardRefExoticComponent<
+  TourStepArrowComponentProps & {
     ref?: React.Ref<any>;
-}>;
+  }
+>;
 export type TourStepComponent = React.FC<Omit<TourStepValue, 'Component'>>;
 /**
  * Web only.
  */
 export type TourScrollOptions = {
-    behavior?: ScrollBehavior;
-    marginX?: number;
-    marginY?: number;
+  behavior?: ScrollBehavior;
+  marginX?: number;
+  marginY?: number;
 };
 export type TourStepValue<T extends string = string> = {
-    /**
-     * The tour step id.
-     */
-    id: T;
-    /**
-     * The Component to render for this tour step.
-     */
-    Component: TourStepComponent;
-    /**
-     * The TourStepArrowComponent to render for this tour step.
-     */
-    ArrowComponent?: TourStepArrowComponent;
-    /**
-     * Disabling the tour step causes it to be skipped when calling `goNextTourStep()` or `goPreviousTourStep()`.
-     */
-    disabled?: boolean;
-    /**
-     * Hides the overlay when the tour is active.
-     */
-    hideOverlay?: boolean;
-    /**
-     * Callback function fired as this step becomes active. This step's `onActive` will fire simultaneously with the previously active step's `onInactive`.
-     */
-    onActive?: () => void | Promise<void>;
-    /**
-     * Callback function fired right before this step becomes active. This step's `onBeforeActive` will fire simultaneously with the previously active step's `onBeforeInactive`.
-     */
-    onBeforeActive?: () => void | Promise<void>;
-    /**
-     * Callback function fired as this step becomes inactive. This step's `onInactive` will fire simultaneously with the new active step's `onActive`.
-     */
-    onInactive?: () => void | Promise<void>;
-    /**
-     * Callback function fired right before this step becomes inactive. This step's `onBeforeInactive` will fire simultaneously with the new active step's `onBeforeActive`.
-     */
-    onBeforeInactive?: () => void | Promise<void>;
-    /**
-     * Padding to add around the edges of the TourMask's content mask.
-     */
-    tourMaskPadding?: string | number;
-    /**
-     * Corner radius for the TourMask's content mask. Uses SVG rect element's `rx` and `ry` attributes https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/rx.
-     */
-    tourMaskBorderRadius?: string | number;
-    /**
-     * Add styles to the TourStepArrowComponent for this tour step.
-     */
-    arrowStyle?: Record<string, string | number>;
-    /**
-     * Web only. Disables automatically scrolling to this TourStep when it becomes active.
-     */
-    disableAutoScroll?: boolean;
-    /**
-     * Web only. Controls the scrolling behavior and margins when calling element.scrollTo() to scroll to an active TourStep target.
-     */
-    scrollOptions?: TourScrollOptions;
+  /**
+   * The tour step id.
+   */
+  id: T;
+  /**
+   * The Component to render for this tour step.
+   */
+  Component: TourStepComponent;
+  /**
+   * The TourStepArrowComponent to render for this tour step.
+   */
+  ArrowComponent?: TourStepArrowComponent;
+  /**
+   * Disabling the tour step causes it to be skipped when calling `goNextTourStep()` or `goPreviousTourStep()`.
+   */
+  disabled?: boolean;
+  /**
+   * Hides the overlay when the tour is active.
+   */
+  hideOverlay?: boolean;
+  /**
+   * Callback function fired as this step becomes active. This step's `onActive` will fire simultaneously with the previously active step's `onInactive`.
+   */
+  onActive?: () => void | Promise<void>;
+  /**
+   * Callback function fired right before this step becomes active. This step's `onBeforeActive` will fire simultaneously with the previously active step's `onBeforeInactive`.
+   */
+  onBeforeActive?: () => void | Promise<void>;
+  /**
+   * Callback function fired as this step becomes inactive. This step's `onInactive` will fire simultaneously with the new active step's `onActive`.
+   */
+  onInactive?: () => void | Promise<void>;
+  /**
+   * Callback function fired right before this step becomes inactive. This step's `onBeforeInactive` will fire simultaneously with the new active step's `onBeforeActive`.
+   */
+  onBeforeInactive?: () => void | Promise<void>;
+  /**
+   * Padding to add around the edges of the TourMask's content mask.
+   */
+  tourMaskPadding?: string | number;
+  /**
+   * Corner radius for the TourMask's content mask. Uses SVG rect element's `rx` and `ry` attributes https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/rx.
+   */
+  tourMaskBorderRadius?: string | number;
+  /**
+   * Add styles to the TourStepArrowComponent for this tour step.
+   */
+  arrowStyle?: Record<string, string | number>;
+  /**
+   * Web only. Disables automatically scrolling to this TourStep when it becomes active.
+   */
+  disableAutoScroll?: boolean;
+  /**
+   * Web only. Controls the scrolling behavior and margins when calling element.scrollTo() to scroll to an active TourStep target.
+   */
+  scrollOptions?: TourScrollOptions;
 };
 export type TourOptions<T extends string = string> = {
-    steps: TourStepValue<T>[];
-    activeTourStep: TourStepValue<T> | null;
-    onChange: (tourStep: TourStepValue<T> | null) => void;
+  steps: TourStepValue<T>[];
+  activeTourStep: TourStepValue<T> | null;
+  onChange: (tourStep: TourStepValue<T> | null) => void;
 };
 export type TourApi<T extends string = string> = Omit<TourOptions<T>, 'onChange'> & {
-    setActiveTourStep: (tourStepId: T | null) => void;
-    startTour: (tourStepId?: T) => void;
-    stopTour: () => void;
-    goNextTourStep: () => void;
-    goPreviousTourStep: () => void;
+  setActiveTourStep: (tourStepId: T | null) => void;
+  startTour: (tourStepId?: T) => void;
+  stopTour: () => void;
+  goNextTourStep: () => void;
+  goPreviousTourStep: () => void;
 };
 /** A controlled hook for managing tour state, such as the currently active tour step. */
-export declare const useTour: <T extends string = string>({ steps, activeTourStep, onChange, }: TourOptions<T>) => TourApi<T>;
-//# sourceMappingURL=useTour.d.ts.map
+export declare const useTour: <T extends string = string>({
+  steps,
+  activeTourStep,
+  onChange,
+}: TourOptions<T>) => TourApi<T>;
+//# sourceMappingURL=useTour.d.ts.map

package/dts/types/AvatarBaseProps.d.ts

@@ -3,4 +3,4 @@ import type { Shape } from './Shape';
 export type AvatarShape = Extract<Shape, 'circle' | 'square' | 'hexagon'>;
 export type AvatarFallback = 'image' | 'text';
 export type AvatarFallbackColor = ThemeVars.SpectrumHue;
-//# sourceMappingURL=AvatarBaseProps.d.ts.map
+//# sourceMappingURL=AvatarBaseProps.d.ts.map

package/dts/types/AvatarSize.d.ts

@@ -1,2 +1,2 @@
 export type AvatarSize = 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';
-//# sourceMappingURL=AvatarSize.d.ts.map
+//# sourceMappingURL=AvatarSize.d.ts.map

package/dts/types/BannerBaseProps.d.ts

@@ -1,3 +1,3 @@
 export type BannerVariant = 'warning' | 'promotional' | 'informational' | 'error';
 export type BannerStyleVariant = 'inline' | 'global' | 'contextual';
-//# sourceMappingURL=BannerBaseProps.d.ts.map
+//# sourceMappingURL=BannerBaseProps.d.ts.map

package/dts/types/BoxBaseProps.d.ts

@@ -4,59 +4,72 @@ export type FlexAxisValue = 'flex-start' | 'flex-end' | 'center';
 export type FlexAlignCommon = FlexAxisValue | 'stretch';
 export type FlexSpaceCommon = 'space-between' | 'space-around';
 export type FlexShrink = {
-    flexShrink?: number;
+  flexShrink?: number;
 };
 export type FlexGrow = {
-    flexGrow?: number;
+  flexGrow?: number;
 };
 export type FlexStyles = {
-    /**
-     * Set the distribution of space between and around content items along the cross-axis.
-     * @default flex-start
-     */
-    alignContent?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around' | 'space-evenly';
-    /**
-     * Set the alignment of all direct children on the cross-axis.
-     * @default stretch
-     */
-    alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
-    /**
-     * Override the parent's defined item alignment for this element alone.
-     * @default auto
-     */
-    alignSelf?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'auto' | 'baseline';
-    /** Sets the initial main flex size. */
-    flexBasis?: number | string;
-    /** Order children on the main-axis in this direction. */
-    flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
-    /** Set the grow factor of this flex item. */
-    flexGrow?: number;
-    /** Set the shrink factor of this flex item. */
-    flexShrink?: number;
-    /**
-     * How should children wrap when overflowing.
-     * @default nowrap
-     */
-    flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
-    /**
-     * Set the distribution of space between and around content items along the main-axis.
-     * @default flex-start
-     */
-    justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+  /**
+   * Set the distribution of space between and around content items along the cross-axis.
+   * @default flex-start
+   */
+  alignContent?:
+    | 'flex-start'
+    | 'flex-end'
+    | 'center'
+    | 'stretch'
+    | 'space-between'
+    | 'space-around'
+    | 'space-evenly';
+  /**
+   * Set the alignment of all direct children on the cross-axis.
+   * @default stretch
+   */
+  alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+  /**
+   * Override the parent's defined item alignment for this element alone.
+   * @default auto
+   */
+  alignSelf?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'auto' | 'baseline';
+  /** Sets the initial main flex size. */
+  flexBasis?: number | string;
+  /** Order children on the main-axis in this direction. */
+  flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+  /** Set the grow factor of this flex item. */
+  flexGrow?: number;
+  /** Set the shrink factor of this flex item. */
+  flexShrink?: number;
+  /**
+   * How should children wrap when overflowing.
+   * @default nowrap
+   */
+  flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
+  /**
+   * Set the distribution of space between and around content items along the main-axis.
+   * @default flex-start
+   */
+  justifyContent?:
+    | 'flex-start'
+    | 'flex-end'
+    | 'center'
+    | 'space-between'
+    | 'space-around'
+    | 'space-evenly';
 };
 export type PinningDirection = 'top' | 'bottom' | 'left' | 'right' | 'all';
 export type PositionStyles = {
-    /** Position the box to the bottom edge. */
-    bottom?: DimensionValue;
-    /** Position the box to the left edge. */
-    left?: DimensionValue;
-    /** How to position the box within its parent. */
-    position?: Position;
-    /** Position the box to the right edge. */
-    right?: DimensionValue;
-    /** Position the box to the top edge. */
-    top?: DimensionValue;
-    /** Adjust the z-index positioning layer. */
-    zIndex?: number;
+  /** Position the box to the bottom edge. */
+  bottom?: DimensionValue;
+  /** Position the box to the left edge. */
+  left?: DimensionValue;
+  /** How to position the box within its parent. */
+  position?: Position;
+  /** Position the box to the right edge. */
+  right?: DimensionValue;
+  /** Position the box to the top edge. */
+  top?: DimensionValue;
+  /** Adjust the z-index positioning layer. */
+  zIndex?: number;
 };
-//# sourceMappingURL=BoxBaseProps.d.ts.map
+//# sourceMappingURL=BoxBaseProps.d.ts.map

package/dts/types/ButtonBaseProps.d.ts

@@ -1,2 +1,8 @@
-export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'positive' | 'negative' | 'foregroundMuted';
-//# sourceMappingURL=ButtonBaseProps.d.ts.map
+export type ButtonVariant =
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'positive'
+  | 'negative'
+  | 'foregroundMuted';
+//# sourceMappingURL=ButtonBaseProps.d.ts.map

package/dts/types/CardHeaderProps.d.ts

@@ -1,12 +1,12 @@
 import type { SharedProps } from './SharedProps';
 export type CardHeaderProps = {
-    /** Absolute or Relative path to Avatar */
-    avatar?: string;
-    /** Meta Data Text to be displayed in TextLegal */
-    metaData?: string;
-    /** Text to be displayed in TextCaption */
-    description?: string;
-    /** IconButton ReactNode */
-    action?: React.ReactNode;
+  /** Absolute or Relative path to Avatar */
+  avatar?: string;
+  /** Meta Data Text to be displayed in TextLegal */
+  metaData?: string;
+  /** Text to be displayed in TextCaption */
+  description?: string;
+  /** IconButton ReactNode */
+  action?: React.ReactNode;
 } & SharedProps;
-//# sourceMappingURL=CardHeaderProps.d.ts.map
+//# sourceMappingURL=CardHeaderProps.d.ts.map

package/dts/types/CardMediaProps.d.ts

@@ -2,26 +2,32 @@ import type { PictogramName, SpotSquareName } from '@coinbase/cds-illustrations'
 import type { CardRemoteImageDimensionValue } from './CardRemoteImageProps';
 import type { AspectRatio } from './Shape';
 export type CardMediaPlacement = 'start' | 'above' | 'end';
-export type CardMediaImageSizeObject = {
-    width: CardRemoteImageDimensionValue;
-    height: CardRemoteImageDimensionValue;
-} | {
-    width: CardRemoteImageDimensionValue;
-    aspectRatio: AspectRatio;
-};
+export type CardMediaImageSizeObject =
+  | {
+      width: CardRemoteImageDimensionValue;
+      height: CardRemoteImageDimensionValue;
+    }
+  | {
+      width: CardRemoteImageDimensionValue;
+      aspectRatio: AspectRatio;
+    };
 export type CardMediaProps = {
-    /** Informs how to auto-magically size the media. */
-    placement: CardMediaPlacement;
-    testID?: string;
-    alt?: string;
-} & ({
-    type: 'image';
-    src: string;
-} | {
-    type: 'spotSquare';
-    name: SpotSquareName;
-} | {
-    type: 'pictogram';
-    name: PictogramName;
-});
-//# sourceMappingURL=CardMediaProps.d.ts.map
+  /** Informs how to auto-magically size the media. */
+  placement: CardMediaPlacement;
+  testID?: string;
+  alt?: string;
+} & (
+  | {
+      type: 'image';
+      src: string;
+    }
+  | {
+      type: 'spotSquare';
+      name: SpotSquareName;
+    }
+  | {
+      type: 'pictogram';
+      name: PictogramName;
+    }
+);
+//# sourceMappingURL=CardMediaProps.d.ts.map

package/dts/types/CardRemoteImageProps.d.ts

@@ -2,17 +2,21 @@ import type { AspectRatio } from './Shape';
 import type { SharedProps } from './SharedProps';
 export type CardRemoteImageDimensionValue = number | `${number}%`;
 export type CardRemoteImageProps = {
-    /** The url to the image asset */
-    src: string;
-    width?: CardRemoteImageDimensionValue;
-    height?: CardRemoteImageDimensionValue;
-    aspectRatio?: AspectRatio;
-    alt?: string;
-} & SharedProps & ({
-    width: CardRemoteImageDimensionValue;
-    aspectRatio: AspectRatio;
-} | {
-    width: CardRemoteImageDimensionValue;
-    height: CardRemoteImageDimensionValue;
-});
-//# sourceMappingURL=CardRemoteImageProps.d.ts.map
+  /** The url to the image asset */
+  src: string;
+  width?: CardRemoteImageDimensionValue;
+  height?: CardRemoteImageDimensionValue;
+  aspectRatio?: AspectRatio;
+  alt?: string;
+} & SharedProps &
+  (
+    | {
+        width: CardRemoteImageDimensionValue;
+        aspectRatio: AspectRatio;
+      }
+    | {
+        width: CardRemoteImageDimensionValue;
+        height: CardRemoteImageDimensionValue;
+      }
+  );
+//# sourceMappingURL=CardRemoteImageProps.d.ts.map

package/dts/types/CdsPlatform.d.ts

@@ -1,2 +1,2 @@
 export type CdsPlatform = 'mobile' | 'web';
-//# sourceMappingURL=CdsPlatform.d.ts.map
+//# sourceMappingURL=CdsPlatform.d.ts.map

package/dts/types/CellBaseProps.d.ts

@@ -2,7 +2,7 @@ import type { cellPriorities } from '../tokens/cell';
 import type { MarginProps, PaddingProps } from '../types';
 export type CellPriority = (typeof cellPriorities)[number];
 export type CellSpacingConfig = {
-    innerSpacing?: PaddingProps & MarginProps;
-    outerSpacing?: PaddingProps & MarginProps;
+  innerSpacing?: PaddingProps & MarginProps;
+  outerSpacing?: PaddingProps & MarginProps;
 };
-//# sourceMappingURL=CellBaseProps.d.ts.map
+//# sourceMappingURL=CellBaseProps.d.ts.map

package/dts/types/Chart.d.ts

@@ -1,27 +1,29 @@
 import type { ScaleTime } from 'd3-scale';
 export type ChartDataPoint = {
-    value: number;
-    date: Date;
-    x?: number;
-    y?: number;
+  value: number;
+  date: Date;
+  x?: number;
+  y?: number;
 };
 export type ChartData = ChartDataPoint[];
 export type ChartTimeseries = {
-    points: ChartData;
-    id: string;
-    strokeColor: string;
+  points: ChartData;
+  id: string;
+  strokeColor: string;
 };
 export type ChartFormatDate<Period extends string> = (value: Date, period: Period) => string;
 export type ChartFormatAmount = (value: string | number) => string;
 export type ChartScrubParams<T> = {
-    point: ChartDataPoint;
-    period: T;
+  point: ChartDataPoint;
+  period: T;
 };
 export type ChartXFunction = ScaleTime<number, number>;
-export type ChartGetMarker = (xPos: number) => {
-    value: number;
-    date: Date;
-    x: number;
-    y: number;
-} | undefined;
-//# sourceMappingURL=Chart.d.ts.map
+export type ChartGetMarker = (xPos: number) =>
+  | {
+      value: number;
+      date: Date;
+      x: number;
+      y: number;
+    }
+  | undefined;
+//# sourceMappingURL=Chart.d.ts.map

package/dts/types/CollapsibleBaseProps.d.ts

@@ -1,2 +1,2 @@
 export type CollapsibleDirection = 'vertical' | 'horizontal';
-//# sourceMappingURL=CollapsibleBaseProps.d.ts.map
+//# sourceMappingURL=CollapsibleBaseProps.d.ts.map

package/dts/types/Color.d.ts

@@ -1,6 +1,6 @@
 export type GradientArray = {
-    offset: string;
-    color: string;
+  offset: string;
+  color: string;
 }[];
 export type A11yColorUsage = 'largeText' | 'normalText' | 'graphic';
-//# sourceMappingURL=Color.d.ts.map
+//# sourceMappingURL=Color.d.ts.map

package/dts/types/ComponentEventHandlerProps.d.ts

@@ -1,6 +1,6 @@
 import type { EventHandlerCustomConfig } from '../system/EventHandlerProvider';
 export type ComponentEventHandlerProps = {
-    eventConfig?: EventHandlerCustomConfig;
-    analyticsId?: string;
+  eventConfig?: EventHandlerCustomConfig;
+  analyticsId?: string;
 };
-//# sourceMappingURL=ComponentEventHandlerProps.d.ts.map
+//# sourceMappingURL=ComponentEventHandlerProps.d.ts.map