@coinbase/cds-web 8.13.1 → 8.13.5

package/dts/hooks/useCheckboxGroupState.d.ts

@@ -1,9 +1,9 @@
 import type { GroupToggleState } from '@coinbase/cds-common/hooks/useGroupToggler';
 export type CheckboxGroupStateProps<T extends string> = {
-    select: React.ChangeEventHandler<HTMLInputElement>;
-    unselect: React.ChangeEventHandler<HTMLInputElement>;
-    toggle: React.ChangeEventHandler<HTMLInputElement>;
-    isAllSelected: GroupToggleState<T>['isAllSelected'];
+  select: React.ChangeEventHandler<HTMLInputElement>;
+  unselect: React.ChangeEventHandler<HTMLInputElement>;
+  toggle: React.ChangeEventHandler<HTMLInputElement>;
+  isAllSelected: GroupToggleState<T>['isAllSelected'];
 };
 /**
  *
@@ -20,5 +20,8 @@ export type CheckboxGroupStateProps<T extends string> = {
     }
   ]
  */
-export declare const useCheckboxGroupState: <T extends string>(values: T[], initialState?: T[]) => [Set<T>, CheckboxGroupStateProps<T>];
-//# sourceMappingURL=useCheckboxGroupState.d.ts.map
+export declare const useCheckboxGroupState: <T extends string>(
+  values: T[],
+  initialState?: T[],
+) => [Set<T>, CheckboxGroupStateProps<T>];
+//# sourceMappingURL=useCheckboxGroupState.d.ts.map

package/dts/hooks/useDimensions.d.ts

@@ -1,38 +1,40 @@
 import type { RefObject } from 'react';
-export declare const observerErr = "\uD83D\uDCA1 react-cool-dimensions: the browser doesn't support Resize Observer, please use polyfill: https://github.com/wellyshen/react-cool-dimensions#resizeobserver-polyfill";
-export declare const borderBoxWarn = "\uD83D\uDCA1 react-cool-dimensions: the browser doesn't support border-box size, fallback to content-box size. Please see: https://github.com/wellyshen/react-cool-dimensions#border-box-size-measurement";
+export declare const observerErr =
+  "\uD83D\uDCA1 react-cool-dimensions: the browser doesn't support Resize Observer, please use polyfill: https://github.com/wellyshen/react-cool-dimensions#resizeobserver-polyfill";
+export declare const borderBoxWarn =
+  "\uD83D\uDCA1 react-cool-dimensions: the browser doesn't support border-box size, fallback to content-box size. Please see: https://github.com/wellyshen/react-cool-dimensions#border-box-size-measurement";
 type State = {
-    currentBreakpoint: string;
-    width: number;
-    height: number;
-    x: number;
-    y: number;
-    entry?: ResizeObserverEntry;
+  currentBreakpoint: string;
+  width: number;
+  height: number;
+  x: number;
+  y: number;
+  entry?: ResizeObserverEntry;
 };
 export type Event<T> = {
-    entry: ResizeObserverEntry;
-    observe: (element: T | null) => void;
-    unobserve: () => void;
+  entry: ResizeObserverEntry;
+  observe: (element: T | null) => void;
+  unobserve: () => void;
 } & State;
 type OnResize<T> = {
-    (event: Event<T>): void;
+  (event: Event<T>): void;
 };
 type ShouldUpdate = {
-    (state: State): boolean;
+  (state: State): boolean;
 };
 type Breakpoints = Record<string, number>;
 export type Options<T> = {
-    ref?: RefObject<T> | null;
-    useBorderBoxSize?: boolean;
-    breakpoints?: Breakpoints;
-    updateOnBreakpointChange?: boolean;
-    shouldUpdate?: ShouldUpdate;
-    onResize?: OnResize<T>;
-    polyfill?: any;
+  ref?: RefObject<T> | null;
+  useBorderBoxSize?: boolean;
+  breakpoints?: Breakpoints;
+  updateOnBreakpointChange?: boolean;
+  shouldUpdate?: ShouldUpdate;
+  onResize?: OnResize<T>;
+  polyfill?: any;
 };
 type Return<T> = {
-    ref: RefObject<T>;
-    entry?: ResizeObserverEntry;
+  ref: RefObject<T>;
+  entry?: ResizeObserverEntry;
 } & Omit<Event<T>, 'entry'>;
 /**
  *
@@ -58,6 +60,14 @@ type Return<T> = {
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
   SOFTWARE.
  */
-export declare const useDimensions: <T extends HTMLElement>({ ref: refOpt, useBorderBoxSize, breakpoints, updateOnBreakpointChange, shouldUpdate, onResize, polyfill, }?: Options<T>) => Return<T>;
+export declare const useDimensions: <T extends HTMLElement>({
+  ref: refOpt,
+  useBorderBoxSize,
+  breakpoints,
+  updateOnBreakpointChange,
+  shouldUpdate,
+  onResize,
+  polyfill,
+}?: Options<T>) => Return<T>;
 export {};
-//# sourceMappingURL=useDimensions.d.ts.map
+//# sourceMappingURL=useDimensions.d.ts.map

package/dts/hooks/useEventHandler.d.ts

@@ -4,4 +4,4 @@
  * This allows consumers to pull directly from cds-web.
  */
 export { useEventHandler } from '@coinbase/cds-common/hooks/useEventHandler';
-//# sourceMappingURL=useEventHandler.d.ts.map
+//# sourceMappingURL=useEventHandler.d.ts.map

package/dts/hooks/useHasMounted.d.ts

@@ -1,2 +1,2 @@
 export declare const useHasMounted: () => boolean;
-//# sourceMappingURL=useHasMounted.d.ts.map
+//# sourceMappingURL=useHasMounted.d.ts.map

package/dts/hooks/useIsBrowser.d.ts

@@ -1,3 +1,3 @@
 /** Checks to see that there is a window and the DOM has mounted */
 export declare const useIsBrowser: () => boolean;
-//# sourceMappingURL=useIsBrowser.d.ts.map
+//# sourceMappingURL=useIsBrowser.d.ts.map

package/dts/hooks/useIsoEffect.d.ts

@@ -1,3 +1,3 @@
 import { useEffect } from 'react';
 export declare const useIsoEffect: typeof useEffect;
-//# sourceMappingURL=useIsoEffect.d.ts.map
+//# sourceMappingURL=useIsoEffect.d.ts.map

package/dts/hooks/useMediaQuery.d.ts

@@ -1,2 +1,2 @@
 export declare const useMediaQuery: (query: string) => boolean;
-//# sourceMappingURL=useMediaQuery.d.ts.map
+//# sourceMappingURL=useMediaQuery.d.ts.map

package/dts/hooks/useScrollBlocker.d.ts

@@ -1,2 +1,2 @@
 export declare const useScrollBlocker: () => (shouldBlock: boolean) => void;
-//# sourceMappingURL=useScrollBlocker.d.ts.map
+//# sourceMappingURL=useScrollBlocker.d.ts.map

package/dts/hooks/useTheme.d.ts

@@ -1,4 +1,4 @@
 import type { Theme } from '../core/theme';
 /** Returns the currently active Theme, determined by the ThemeProvider's `activeColorScheme`. */
 export declare const useTheme: () => Theme;
-//# sourceMappingURL=useTheme.d.ts.map
+//# sourceMappingURL=useTheme.d.ts.map

package/dts/hooks/useThemeContext.d.ts

@@ -5,4 +5,4 @@ import { type ThemeContextValue } from '../system/ThemeProvider';
  * If you instead need to fetch the ThemeContextValue without throwing an error when the context is undefined, you can use `useContext(ThemeContext)` instead.
  */
 export declare const useThemeContext: () => ThemeContextValue;
-//# sourceMappingURL=useThemeContext.d.ts.map
+//# sourceMappingURL=useThemeContext.d.ts.map

package/dts/icons/Icon.d.ts

@@ -2,7 +2,17 @@ import React from 'react';
 import type { IconName, SharedProps } from '@coinbase/cds-common/types';
 import type { IconSize, IconSourcePixelSize } from '@coinbase/cds-common/types/IconSize';
 import { type BoxBaseProps, type BoxDefaultElement, type BoxProps } from '../layout/Box';
-export type IconBaseProps = SharedProps & Pick<BoxBaseProps, 'padding' | 'paddingX' | 'paddingY' | 'paddingTop' | 'paddingEnd' | 'paddingBottom' | 'paddingStart'> & {
+export type IconBaseProps = SharedProps &
+  Pick<
+    BoxBaseProps,
+    | 'padding'
+    | 'paddingX'
+    | 'paddingY'
+    | 'paddingTop'
+    | 'paddingEnd'
+    | 'paddingBottom'
+    | 'paddingStart'
+  > & {
     /**
      * Size for a given icon.
      * @default m
@@ -22,22 +32,25 @@ export type IconBaseProps = SharedProps & Pick<BoxBaseProps, 'padding' | 'paddin
     active?: boolean;
     /** @danger This is a migration escape hatch. It is not intended to be used normally. */
     dangerouslySetColor?: string;
-};
-export type IconProps = IconBaseProps & BoxProps<BoxDefaultElement> & {
+  };
+export type IconProps = IconBaseProps &
+  BoxProps<BoxDefaultElement> & {
     styles?: {
-        /** TO DO: Document this prop */
-        root?: React.CSSProperties;
-        /** TO DO: Document this prop */
-        icon?: React.CSSProperties;
+      /** TO DO: Document this prop */
+      root?: React.CSSProperties;
+      /** TO DO: Document this prop */
+      icon?: React.CSSProperties;
     };
     classNames?: {
-        /** TO DO: Document this prop */
-        root?: string;
-        /** TO DO: Document this prop */
-        icon?: string;
+      /** TO DO: Document this prop */
+      root?: string;
+      /** TO DO: Document this prop */
+      icon?: string;
     };
-};
+  };
 declare const getIconSourceSize: (iconSize: number) => IconSourcePixelSize;
-export declare const Icon: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<IconProps, "ref"> & React.RefAttributes<HTMLElement>>>;
+export declare const Icon: React.MemoExoticComponent<
+  React.ForwardRefExoticComponent<Omit<IconProps, 'ref'> & React.RefAttributes<HTMLElement>>
+>;
 export { getIconSourceSize };
-//# sourceMappingURL=Icon.d.ts.map
+//# sourceMappingURL=Icon.d.ts.map

package/dts/icons/LogoMark.d.ts

@@ -1,4 +1,9 @@
 import React from 'react';
 import type { LogoMarkParams } from '@coinbase/cds-common/hooks/useLogo';
-export declare const LogoMark: React.MemoExoticComponent<({ size, foreground }: Omit<LogoMarkParams, "colorScheme">) => import("react/jsx-runtime").JSX.Element>;
-//# sourceMappingURL=LogoMark.d.ts.map
+export declare const LogoMark: React.MemoExoticComponent<
+  ({
+    size,
+    foreground,
+  }: Omit<LogoMarkParams, 'colorScheme'>) => import('react/jsx-runtime').JSX.Element
+>;
+//# sourceMappingURL=LogoMark.d.ts.map

package/dts/icons/LogoWordmark.d.ts

@@ -1,4 +1,8 @@
 import React from 'react';
 import type { LogoWordmarkParams } from '@coinbase/cds-common/hooks/useLogo';
-export declare const LogoWordmark: React.MemoExoticComponent<({ foreground }: Omit<LogoWordmarkParams, "colorScheme">) => import("react/jsx-runtime").JSX.Element>;
-//# sourceMappingURL=LogoWordmark.d.ts.map
+export declare const LogoWordmark: React.MemoExoticComponent<
+  ({
+    foreground,
+  }: Omit<LogoWordmarkParams, 'colorScheme'>) => import('react/jsx-runtime').JSX.Element
+>;
+//# sourceMappingURL=LogoWordmark.d.ts.map

package/dts/icons/SubBrandLogoMark.d.ts

@@ -1,4 +1,9 @@
 import React from 'react';
 import type { SubBrandLogoMarkParams } from '@coinbase/cds-common/hooks/useSubBrandLogo';
-export declare const SubBrandLogoMark: React.MemoExoticComponent<({ type, foreground }: Omit<SubBrandLogoMarkParams, "colorScheme">) => import("react/jsx-runtime").JSX.Element>;
-//# sourceMappingURL=SubBrandLogoMark.d.ts.map
+export declare const SubBrandLogoMark: React.MemoExoticComponent<
+  ({
+    type,
+    foreground,
+  }: Omit<SubBrandLogoMarkParams, 'colorScheme'>) => import('react/jsx-runtime').JSX.Element
+>;
+//# sourceMappingURL=SubBrandLogoMark.d.ts.map

package/dts/icons/SubBrandLogoWordmark.d.ts

@@ -1,4 +1,8 @@
 import React from 'react';
 import type { SubBrandLogoWordmarkParams } from '@coinbase/cds-common/hooks/useSubBrandLogo';
-export declare const SubBrandLogoWordmark: React.MemoExoticComponent<(props: Omit<SubBrandLogoWordmarkParams, "colorScheme">) => import("react/jsx-runtime").JSX.Element>;
-//# sourceMappingURL=SubBrandLogoWordmark.d.ts.map
+export declare const SubBrandLogoWordmark: React.MemoExoticComponent<
+  (
+    props: Omit<SubBrandLogoWordmarkParams, 'colorScheme'>,
+  ) => import('react/jsx-runtime').JSX.Element
+>;
+//# sourceMappingURL=SubBrandLogoWordmark.d.ts.map

package/dts/icons/__figma__/Icon.figma.d.ts

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

package/dts/icons/__figma__/LogoMark.figma.d.ts

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

package/dts/icons/__figma__/LogoWordmark.figma.d.ts

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

package/dts/icons/__figma__/SubBrandLogoMark.figma.d.ts

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

package/dts/icons/__figma__/SubBrandLogoWordmark.figma.d.ts

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

package/dts/icons/index.d.ts

@@ -3,4 +3,4 @@ export * from './LogoMark';
 export * from './LogoWordmark';
 export * from './SubBrandLogoMark';
 export * from './SubBrandLogoWordmark';
-//# sourceMappingURL=index.d.ts.map
+//# sourceMappingURL=index.d.ts.map

package/dts/illustrations/HeroSquare.d.ts

@@ -1,12 +1,19 @@
-import { type IllustrationA11yProps, type IllustrationBaseProps, type IllustrationDimensionsMap } from './createIllustration';
-export type HeroSquareBaseProps = IllustrationBaseProps<'heroSquare'> & IllustrationA11yProps & {
+import {
+  type IllustrationA11yProps,
+  type IllustrationBaseProps,
+  type IllustrationDimensionsMap,
+} from './createIllustration';
+export type HeroSquareBaseProps = IllustrationBaseProps<'heroSquare'> &
+  IllustrationA11yProps & {
     /**
      * HeroSquare dimensions.
      * @default  240x240
      * */
     dimension?: IllustrationDimensionsMap['heroSquare'];
-};
+  };
 export type HeroSquareProps = HeroSquareBaseProps;
-export declare const HeroSquare: import("react").NamedExoticComponent<import("./createIllustration").IllustrationBasePropsWithA11y<"heroSquare">>;
+export declare const HeroSquare: import('react').NamedExoticComponent<
+  import('./createIllustration').IllustrationBasePropsWithA11y<'heroSquare'>
+>;
 export type { HeroSquareName } from '@coinbase/cds-illustrations/__generated__/heroSquare/types/HeroSquareName';
-//# sourceMappingURL=HeroSquare.d.ts.map
+//# sourceMappingURL=HeroSquare.d.ts.map

package/dts/illustrations/Pictogram.d.ts

@@ -1,11 +1,18 @@
-import { type IllustrationA11yProps, type IllustrationBaseProps, type IllustrationDimensionsMap } from './createIllustration';
-export declare const Pictogram: import("react").NamedExoticComponent<import("./createIllustration").IllustrationBasePropsWithA11y<"pictogram">>;
-export type PictogramBaseProps = IllustrationBaseProps<'pictogram'> & IllustrationA11yProps & {
+import {
+  type IllustrationA11yProps,
+  type IllustrationBaseProps,
+  type IllustrationDimensionsMap,
+} from './createIllustration';
+export declare const Pictogram: import('react').NamedExoticComponent<
+  import('./createIllustration').IllustrationBasePropsWithA11y<'pictogram'>
+>;
+export type PictogramBaseProps = IllustrationBaseProps<'pictogram'> &
+  IllustrationA11yProps & {
     /**
      * @default 48x48
      * */
     dimension?: IllustrationDimensionsMap['pictogram'];
-};
+  };
 export type PictogramProps = PictogramBaseProps;
 export type { PictogramName } from '@coinbase/cds-illustrations';
-//# sourceMappingURL=Pictogram.d.ts.map
+//# sourceMappingURL=Pictogram.d.ts.map

package/dts/illustrations/SpotIcon.d.ts

@@ -1,11 +1,18 @@
-import { type IllustrationA11yProps, type IllustrationBaseProps, type IllustrationDimensionsMap } from './createIllustration';
-export declare const SpotIcon: import("react").NamedExoticComponent<import("./createIllustration").IllustrationBasePropsWithA11y<"spotIcon">>;
-export type SpotIconBaseProps = IllustrationBaseProps<'spotIcon'> & IllustrationA11yProps & {
+import {
+  type IllustrationA11yProps,
+  type IllustrationBaseProps,
+  type IllustrationDimensionsMap,
+} from './createIllustration';
+export declare const SpotIcon: import('react').NamedExoticComponent<
+  import('./createIllustration').IllustrationBasePropsWithA11y<'spotIcon'>
+>;
+export type SpotIconBaseProps = IllustrationBaseProps<'spotIcon'> &
+  IllustrationA11yProps & {
     /**
      * @default 32x32
      * */
     dimension?: IllustrationDimensionsMap['spotSquare'];
-};
+  };
 export type SpotIconProps = SpotIconBaseProps;
 export type { SpotIconName } from '@coinbase/cds-illustrations';
-//# sourceMappingURL=SpotIcon.d.ts.map
+//# sourceMappingURL=SpotIcon.d.ts.map

package/dts/illustrations/SpotRectangle.d.ts

@@ -1,12 +1,19 @@
-import { type IllustrationA11yProps, type IllustrationBaseProps, type IllustrationDimensionsMap } from './createIllustration';
-export type SpotRectangleBaseProps = IllustrationBaseProps<'spotRectangle'> & IllustrationA11yProps & {
+import {
+  type IllustrationA11yProps,
+  type IllustrationBaseProps,
+  type IllustrationDimensionsMap,
+} from './createIllustration';
+export type SpotRectangleBaseProps = IllustrationBaseProps<'spotRectangle'> &
+  IllustrationA11yProps & {
     /**
      * SpotRectangle dimensions
      * @default 240x120
      * */
     dimension?: IllustrationDimensionsMap['spotRectangle'];
-};
+  };
 export type SpotRectangleProps = SpotRectangleBaseProps;
-export declare const SpotRectangle: import("react").NamedExoticComponent<import("./createIllustration").IllustrationBasePropsWithA11y<"spotRectangle">>;
+export declare const SpotRectangle: import('react').NamedExoticComponent<
+  import('./createIllustration').IllustrationBasePropsWithA11y<'spotRectangle'>
+>;
 export type { SpotRectangleName } from '@coinbase/cds-illustrations';
-//# sourceMappingURL=SpotRectangle.d.ts.map
+//# sourceMappingURL=SpotRectangle.d.ts.map

package/dts/illustrations/SpotSquare.d.ts

@@ -1,11 +1,18 @@
-import { type IllustrationA11yProps, type IllustrationBaseProps, type IllustrationDimensionsMap } from './createIllustration';
-export declare const SpotSquare: import("react").NamedExoticComponent<import("./createIllustration").IllustrationBasePropsWithA11y<"spotSquare">>;
-export type SpotSquareBaseProps = IllustrationBaseProps<'spotSquare'> & IllustrationA11yProps & {
+import {
+  type IllustrationA11yProps,
+  type IllustrationBaseProps,
+  type IllustrationDimensionsMap,
+} from './createIllustration';
+export declare const SpotSquare: import('react').NamedExoticComponent<
+  import('./createIllustration').IllustrationBasePropsWithA11y<'spotSquare'>
+>;
+export type SpotSquareBaseProps = IllustrationBaseProps<'spotSquare'> &
+  IllustrationA11yProps & {
     /**
      * @default 96x96
      * */
     dimension?: IllustrationDimensionsMap['spotSquare'];
-};
+  };
 export type SpotSquareProps = SpotSquareBaseProps;
 export type { SpotSquareName } from '@coinbase/cds-illustrations';
-//# sourceMappingURL=SpotSquare.d.ts.map
+//# sourceMappingURL=SpotSquare.d.ts.map

package/dts/illustrations/__figma__/HeroSquare.figma.d.ts

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

package/dts/illustrations/__figma__/Pictogram.figma.d.ts

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

package/dts/illustrations/__figma__/SpotIcon.figma.d.ts

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

package/dts/illustrations/__figma__/SpotRectangle.figma.d.ts

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

package/dts/illustrations/__figma__/SpotSquare.figma.d.ts

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

package/dts/illustrations/createIllustration.d.ts

@@ -1,49 +1,68 @@
 import React from 'react';
 import type { IllustrationVariant } from '@coinbase/cds-common/types/IllustrationNames';
-import type { HeroSquareDimension, PictogramDimension, SpotIconDimension, SpotRectangleDimension, SpotSquareDimension } from '@coinbase/cds-common/types/IllustrationProps';
+import type {
+  HeroSquareDimension,
+  PictogramDimension,
+  SpotIconDimension,
+  SpotRectangleDimension,
+  SpotSquareDimension,
+} from '@coinbase/cds-common/types/IllustrationProps';
 import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
-import type { HeroSquareName, PictogramName, SpotIconName, SpotRectangleName, SpotSquareName } from '@coinbase/cds-illustrations';
+import type {
+  HeroSquareName,
+  PictogramName,
+  SpotIconName,
+  SpotRectangleName,
+  SpotSquareName,
+} from '@coinbase/cds-illustrations';
 export type IllustrationNamesMap = {
-    heroSquare: HeroSquareName;
-    spotRectangle: SpotRectangleName;
-    pictogram: PictogramName;
-    spotSquare: SpotSquareName;
-    spotIcon: SpotIconName;
+  heroSquare: HeroSquareName;
+  spotRectangle: SpotRectangleName;
+  pictogram: PictogramName;
+  spotSquare: SpotSquareName;
+  spotIcon: SpotIconName;
 };
 export type IllustrationDimensionsMap = {
-    heroSquare: HeroSquareDimension;
-    spotSquare: SpotSquareDimension;
-    spotRectangle: SpotRectangleDimension;
-    pictogram: PictogramDimension;
-    spotIcon: SpotIconDimension;
+  heroSquare: HeroSquareDimension;
+  spotSquare: SpotSquareDimension;
+  spotRectangle: SpotRectangleDimension;
+  pictogram: PictogramDimension;
+  spotIcon: SpotIconDimension;
 };
 export type IllustrationBaseProps<T extends keyof IllustrationNamesMap> = SharedProps & {
-    /** Name of illustration as defined in Figma */
-    name: IllustrationNamesMap[T];
-    /**
-     * HeroSquare Default:  240x240
-     * SpotSquare Default: 96x96
-     * Pictogram Default: 48x48
-     * SpotRectangle Default: 240x120
-     *
-     */
-    dimension?: IllustrationDimensionsMap[T];
-    /** Multiply the width & height while maintaining aspect ratio */
-    scaleMultiplier?: number;
-    /**
-     * Fallback element to render if unable to find an illustration with the matching name
-     * @default null
-     * */
-    fallback?: null | React.ReactElement;
+  /** Name of illustration as defined in Figma */
+  name: IllustrationNamesMap[T];
+  /**
+   * HeroSquare Default:  240x240
+   * SpotSquare Default: 96x96
+   * Pictogram Default: 48x48
+   * SpotRectangle Default: 240x120
+   *
+   */
+  dimension?: IllustrationDimensionsMap[T];
+  /** Multiply the width & height while maintaining aspect ratio */
+  scaleMultiplier?: number;
+  /**
+   * Fallback element to render if unable to find an illustration with the matching name
+   * @default null
+   * */
+  fallback?: null | React.ReactElement;
 };
-type IllustrationConfigShape<Variant extends IllustrationVariant> = Record<IllustrationNamesMap[Variant], number>;
+type IllustrationConfigShape<Variant extends IllustrationVariant> = Record<
+  IllustrationNamesMap[Variant],
+  number
+>;
 export type IllustrationA11yProps = {
-    /** Alt tag to apply to the img
-     * @default "" will identify the image as decorative
-     */
-    alt?: string;
+  /** Alt tag to apply to the img
+   * @default "" will identify the image as decorative
+   */
+  alt?: string;
 };
-export type IllustrationBasePropsWithA11y<Type extends IllustrationVariant> = IllustrationBaseProps<Type> & IllustrationA11yProps;
-export declare function createIllustration<Variant extends IllustrationVariant>(variant: Variant, config: IllustrationConfigShape<Variant>): React.NamedExoticComponent<IllustrationBasePropsWithA11y<Variant>>;
+export type IllustrationBasePropsWithA11y<Type extends IllustrationVariant> =
+  IllustrationBaseProps<Type> & IllustrationA11yProps;
+export declare function createIllustration<Variant extends IllustrationVariant>(
+  variant: Variant,
+  config: IllustrationConfigShape<Variant>,
+): React.NamedExoticComponent<IllustrationBasePropsWithA11y<Variant>>;
 export {};
-//# sourceMappingURL=createIllustration.d.ts.map
+//# sourceMappingURL=createIllustration.d.ts.map

package/dts/illustrations/index.d.ts

@@ -3,4 +3,4 @@ export * from './Pictogram';
 export * from './SpotIcon';
 export * from './SpotRectangle';
 export * from './SpotSquare';
-//# sourceMappingURL=index.d.ts.map
+//# sourceMappingURL=index.d.ts.map

package/dts/index.d.ts

@@ -4,4 +4,4 @@ export * from './core/theme';
 export * from './cx';
 export * from './hooks/useTheme';
 export * from './system/ThemeProvider';
-//# sourceMappingURL=index.d.ts.map
+//# sourceMappingURL=index.d.ts.map

package/dts/layout/Box.d.ts

@@ -5,9 +5,14 @@ import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
 import type { Polymorphic } from '../core/polymorphism';
 import type { fontFamily } from '../styles/responsive/base';
 import { type ResponsiveProp, type StyleProps } from '../styles/styleProps';
-export declare const boxDefaultElement = "div";
+export declare const boxDefaultElement = 'div';
 export type BoxDefaultElement = typeof boxDefaultElement;
-export type BoxBaseProps = StyleProps & SharedProps & Pick<SharedAccessibilityProps, 'accessibilityLabel' | 'accessibilityLabelledBy' | 'accessibilityHint'> & {
+export type BoxBaseProps = StyleProps &
+  SharedProps &
+  Pick<
+    SharedAccessibilityProps,
+    'accessibilityLabel' | 'accessibilityLabelledBy' | 'accessibilityHint'
+  > & {
     style?: React.CSSProperties;
     font?: ResponsiveProp<keyof typeof fontFamily>;
     /** Direction in which to absolutely pin the box. */
@@ -28,9 +33,15 @@ export type BoxBaseProps = StyleProps & SharedProps & Pick<SharedAccessibilityPr
     borderedVertical?: boolean;
     /** @danger This is a migration escape hatch. It is not intended to be used normally. */
     dangerouslySetBackground?: string;
-};
-export type BoxProps<AsComponent extends React.ElementType> = Polymorphic.Props<AsComponent, BoxBaseProps>;
-type BoxComponent = (<AsComponent extends React.ElementType = BoxDefaultElement>(props: BoxProps<AsComponent>) => Polymorphic.ReactReturn) & Polymorphic.ReactNamed;
+  };
+export type BoxProps<AsComponent extends React.ElementType> = Polymorphic.Props<
+  AsComponent,
+  BoxBaseProps
+>;
+type BoxComponent = (<AsComponent extends React.ElementType = BoxDefaultElement>(
+  props: BoxProps<AsComponent>,
+) => Polymorphic.ReactReturn) &
+  Polymorphic.ReactNamed;
 export declare const Box: BoxComponent;
 /**
  * @example
@@ -50,6 +61,9 @@ export declare const Box: BoxComponent;
  * }
  * ```
  */
-export type PolymorphicBoxProps<AsComponent extends React.ElementType, OverrideProps> = Polymorphic.Props<AsComponent, Polymorphic.ExtendableProps<BoxBaseProps, OverrideProps>>;
+export type PolymorphicBoxProps<
+  AsComponent extends React.ElementType,
+  OverrideProps,
+> = Polymorphic.Props<AsComponent, Polymorphic.ExtendableProps<BoxBaseProps, OverrideProps>>;
 export {};
-//# sourceMappingURL=Box.d.ts.map
+//# sourceMappingURL=Box.d.ts.map