@coinbase/cds-web 8.53.0 → 8.54.0

package/CHANGELOG.md

@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.54.0 (3/18/2026 PST)
+
+#### 🚀 Updates
+
+- Add component styling, improve a11y for Calendar and DatePicker. [[#139](https://github.com/coinbase/cds/pull/139)]
+
+## 8.53.1 (3/17/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix: update RemoteImageGroup excess bg color. [[#512](https://github.com/coinbase/cds/pull/512)]
+
 ## 8.53.0 (3/16/2026 PST)
 
 #### 🚀 Updates

package/dts/dates/Calendar.d.ts

@@ -1,7 +1,12 @@
 import React from 'react';
 import type { Polymorphic } from '../core/polymorphism';
-import { type VStackDefaultElement, type VStackProps } from '../layout/VStack';
+import {
+  type VStackBaseProps,
+  type VStackDefaultElement,
+  type VStackProps,
+} from '../layout/VStack';
 import { type PressableBaseProps } from '../system/Pressable';
+import type { StylesAndClassNames } from '../types';
 export declare const calendarPressableDefaultElement = 'button';
 export type CalendarPressableDefaultElement = typeof calendarPressableDefaultElement;
 export type CalendarPressableBaseProps = PressableBaseProps;
@@ -26,8 +31,14 @@ export type CalendarDayProps = {
   isCurrentMonth?: boolean;
   /** Tooltip content shown when hovering or focusing a disabled Calendar Day. */
   disabledError?: string;
+  /** Accessibility hint announced for highlighted dates. */
+  highlightedDateAccessibilityHint?: string;
+  /** Custom class name for the date cell (CalendarPressable). */
+  className?: string;
+  /** Custom style for the date cell (CalendarPressable). */
+  style?: React.CSSProperties;
 };
-export type CalendarProps = {
+export type CalendarBaseProps = Omit<VStackBaseProps, 'children'> & {
   /** Currently selected Calendar date. Date used to generate the Calendar month. Will be rendered with active styles. */
   selectedDate?: Date | null;
   /** Date used to generate the Calendar month when there is no value for the `selectedDate` prop, defaults to today. */
@@ -61,12 +72,39 @@ export type CalendarProps = {
    * @default 'Go to previous month'
    */
   previousArrowAccessibilityLabel?: string;
-  className?: string;
-  style?: React.CSSProperties;
-} & Omit<VStackProps<VStackDefaultElement>, 'children' | 'ref'>;
+  /**
+   * Accessibility hint announced for highlighted dates. Applied to all highlighted dates.
+   * @default 'Highlighted'
+   */
+  highlightedDateAccessibilityHint?: string;
+};
+/**
+ * Static class names for Calendar component parts.
+ * Use these selectors to target specific elements with CSS.
+ */
+export declare const calendarClassNames: {
+  /** Root element */
+  readonly root: 'cds-Calendar';
+  /** Header section */
+  readonly header: 'cds-Calendar-header';
+  /** Month and year title text element */
+  readonly title: 'cds-Calendar-title';
+  /** Navigation controls element */
+  readonly navigation: 'cds-Calendar-navigation';
+  /** Main content area */
+  readonly content: 'cds-Calendar-content';
+  /** Individual date cell in a calendar grid */
+  readonly day: 'cds-Calendar-day';
+};
+export type CalendarProps = CalendarBaseProps &
+  StylesAndClassNames<typeof calendarClassNames> &
+  Omit<VStackProps<VStackDefaultElement>, 'children' | 'ref'> & {
+    className?: string;
+    style?: React.CSSProperties;
+  };
 export declare const Calendar: React.MemoExoticComponent<
   React.ForwardRefExoticComponent<
-    {
+    Omit<import('../layout').BoxBaseProps, 'children'> & {
       /** Currently selected Calendar date. Date used to generate the Calendar month. Will be rendered with active styles. */
       selectedDate?: Date | null;
       /** Date used to generate the Calendar month when there is no value for the `selectedDate` prop, defaults to today. */
@@ -100,10 +138,29 @@ export declare const Calendar: React.MemoExoticComponent<
        * @default 'Go to previous month'
        */
       previousArrowAccessibilityLabel?: string;
-      className?: string;
-      style?: React.CSSProperties;
-    } & Omit<VStackProps<'div'>, 'ref' | 'children'> &
-      React.RefAttributes<HTMLElement>
+      /**
+       * Accessibility hint announced for highlighted dates. Applied to all highlighted dates.
+       * @default 'Highlighted'
+       */
+      highlightedDateAccessibilityHint?: string;
+    } & StylesAndClassNames<{
+        /** Root element */
+        readonly root: 'cds-Calendar';
+        /** Header section */
+        readonly header: 'cds-Calendar-header';
+        /** Month and year title text element */
+        readonly title: 'cds-Calendar-title';
+        /** Navigation controls element */
+        readonly navigation: 'cds-Calendar-navigation';
+        /** Main content area */
+        readonly content: 'cds-Calendar-content';
+        /** Individual date cell in a calendar grid */
+        readonly day: 'cds-Calendar-day';
+      }> &
+      Omit<VStackProps<'div'>, 'ref' | 'children'> & {
+        className?: string;
+        style?: React.CSSProperties;
+      } & React.RefAttributes<HTMLElement>
   >
 >;
 //# sourceMappingURL=Calendar.d.ts.map

package/dts/dates/Calendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/dates/Calendar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/dates/Calendar.tsx"],"names":[],"mappings":"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"}

package/dts/dates/DatePicker.d.ts

@@ -1,8 +1,20 @@
-import { type DateInputValidationError } from '@coinbase/cds-common/dates/DateInputValidationError';
+import type { DateInputValidationError } from '@coinbase/cds-common/dates/DateInputValidationError';
 import { type PopoverProps } from '../overlays/popover/PopoverProps';
-import { type CalendarProps } from './Calendar';
+import { type CalendarBaseProps } from './Calendar';
 import { type DateInputProps } from './DateInput';
-export type DatePickerProps = {
+export type DatePickerBaseProps = Pick<
+  CalendarBaseProps,
+  | 'disabled'
+  | 'disabledDates'
+  | 'disabledDateError'
+  | 'highlightedDateAccessibilityHint'
+  | 'highlightedDates'
+  | 'maxDate'
+  | 'minDate'
+  | 'nextArrowAccessibilityLabel'
+  | 'previousArrowAccessibilityLabel'
+  | 'seedDate'
+> & {
   /** Control the date value of the DatePicker. */
   date: Date | null;
   /** Callback function fired when the date changes, e.g. when a valid date is selected or unselected. */
@@ -11,72 +23,111 @@ export type DatePickerProps = {
   error: DateInputValidationError | null;
   /** Callback function fired when validation finds an error, e.g. required input fields and impossible or disabled dates. Will always be called after `onChangeDate`. */
   onErrorDate: (error: DateInputValidationError | null) => void;
-  /** Disables user interaction. */
-  disabled?: boolean;
-  /** Array of disabled dates, and date tuples for date ranges. Make sure to set `disabledDateError` as well. A number is created for every individual date within a tuple range, so do not abuse this with massive ranges. */
-  disabledDates?: (Date | [Date, Date])[];
-  /** Minimum date allowed to be selected, inclusive. Dates before the `minDate` are disabled. All navigation to months before the `minDate` is disabled. */
-  minDate?: Date;
-  /** Maximum date allowed to be selected, inclusive. Dates after the `maxDate` are disabled. All navigation to months after the `maxDate` is disabled. */
-  maxDate?: Date;
-  /**
-   * Error text to display when a disabled date is selected with the DateInput, including dates before the `minDate` or after the `maxDate`. Also used as the tooltip content shown when hovering or focusing a disabled date on the Calendar.
-   * @default 'Date unavailable'
-   */
-  disabledDateError?: string;
-  /** Control the default open state of the Calendar popover. */
-  defaultOpen?: boolean;
-  /** Callback function fired when the DateInput text value changes. Prefer to use `onChangeDate` instead. Will always be called before `onChangeDate`. This prop should only be used for edge cases, such as custom error handling.  */
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  /** Callback function fired when the Calendar popover is opened.  */
+  /** Callback function fired when the picker is opened. */
   onOpen?: () => void;
-  /** Callback function fired when the Calendar popover is closed. Will always be called after `onCancel`, `onConfirm`, and `onChangeDate`.  */
+  /** Callback function fired when the picker is closed. Will always be called after `onCancel`, `onConfirm`, and `onChangeDate`. */
   onClose?: () => void;
-  /** Callback function fired when the user selects a date using the Calendar popover. Interacting with the DateInput does not fire this callback. Will always be called before `onClose`. */
+  /** Callback function fired when the user selects a date using the picker. Interacting with the DateInput does not fire this callback. Will always be called before `onClose`. */
   onConfirm?: () => void;
-  /** Callback function fired when the user closes the Calendar popover without selecting a date. Interacting with the DateInput does not fire this callback. Will always be called before `onClose`. */
+  /** Callback function fired when the user closes the picker without selecting a date. Interacting with the DateInput does not fire this callback. Will always be called before `onClose`. */
   onCancel?: () => void;
-  /**
-   * If `true`, the focus trap will restore focus to the previously focused element when it unmounts.
-   *
-   * WARNING: If you disable this, you need to ensure that focus is restored properly so it doesn't end up on the body
-   * @default true
-   */
-  restoreFocusOnUnmount?: boolean;
   /**
    * Accessibility label describing the calendar IconButton, which opens the calendar when pressed.
-   * @default 'Open calendar' / 'Close calendar'
+   * @deprecated Use openCalendarAccessibilityLabel/closeCalendarAccessibilityLabel instead
    */
   calendarIconButtonAccessibilityLabel?: string;
-  calendarStyle?: React.CSSProperties;
-  calendarClassName?: string;
-  dateInputStyle?: React.CSSProperties;
-  dateInputClassName?: string;
-} & Omit<
-  DateInputProps,
-  | 'date'
-  | 'separator'
-  | 'onChangeDate'
-  | 'disabledDates'
-  | 'minDate'
-  | 'maxDate'
-  | 'disabledDateError'
-  | 'className'
-  | 'style'
-> &
-  Pick<
-    CalendarProps,
-    | 'seedDate'
-    | 'highlightedDates'
-    | 'nextArrowAccessibilityLabel'
-    | 'previousArrowAccessibilityLabel'
+  /**
+   * Accessibility label for the calendar IconButton when the popover is closed (opens the calendar when pressed).
+   * @default 'Open calendar'
+   */
+  openCalendarAccessibilityLabel?: string;
+  /**
+   * Accessibility label for the calendar IconButton when the popover is open (closes the calendar when pressed).
+   * @default 'Close calendar'
+   */
+  closeCalendarAccessibilityLabel?: string;
+};
+export type DatePickerProps = DatePickerBaseProps &
+  Pick<PopoverProps, 'showOverlay'> &
+  Omit<
+    DateInputProps,
+    | 'date'
+    | 'separator'
+    | 'onChangeDate'
+    | 'disabledDates'
+    | 'minDate'
+    | 'maxDate'
+    | 'disabledDateError'
     | 'className'
     | 'style'
-  > &
-  Pick<PopoverProps, 'showOverlay'>;
+  > & {
+    /** Control the default open state of the Calendar popover. */
+    defaultOpen?: boolean;
+    /** Callback function fired when the DateInput text value changes. Prefer to use `onChangeDate` instead. Will always be called before `onChangeDate`. This prop should only be used for edge cases, such as custom error handling.  */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * If `true`, the focus trap will restore focus to the previously focused element when it unmounts.
+     *
+     * WARNING: If you disable this, you need to ensure that focus is restored properly so it doesn't end up on the body
+     * @default true
+     */
+    restoreFocusOnUnmount?: boolean;
+    /**
+     * Custom style to apply to the Calendar container.
+     * @deprecated Use `styles.calendar` instead.
+     */
+    calendarStyle?: React.CSSProperties;
+    /**
+     * Custom class name to apply to the Calendar container.
+     * @deprecated Use `classNames.calendar` instead.
+     */
+    calendarClassName?: string;
+    /**
+     * Custom style to apply to the DateInput.
+     * @deprecated Use `styles.dateInput` instead.
+     */
+    dateInputStyle?: React.CSSProperties;
+    /**
+     * Custom class name to apply to the DateInput.
+     * @deprecated Use `classNames.dateInput` instead.
+     */
+    dateInputClassName?: string;
+    /** Custom class names for the DateInput and Calendar subcomponents. */
+    classNames?: {
+      dateInput?: string;
+      calendar?: string;
+      calendarHeader?: string;
+      calendarTitle?: string;
+      calendarNavigation?: string;
+      calendarContent?: string;
+      calendarDay?: string;
+    };
+    /** Custom styles for the DateInput and Calendar subcomponents. */
+    styles?: {
+      dateInput?: React.CSSProperties;
+      calendar?: React.CSSProperties;
+      calendarHeader?: React.CSSProperties;
+      calendarTitle?: React.CSSProperties;
+      calendarNavigation?: React.CSSProperties;
+      calendarContent?: React.CSSProperties;
+      calendarDay?: React.CSSProperties;
+    };
+  };
 export declare const DatePicker: import('react').MemoExoticComponent<
   import('react').ForwardRefExoticComponent<
-    {
+    Pick<
+      CalendarBaseProps,
+      | 'disabled'
+      | 'previousArrowAccessibilityLabel'
+      | 'nextArrowAccessibilityLabel'
+      | 'highlightedDateAccessibilityHint'
+      | 'seedDate'
+      | 'disabledDates'
+      | 'highlightedDates'
+      | 'minDate'
+      | 'maxDate'
+      | 'disabledDateError'
+    > & {
       /** Control the date value of the DatePicker. */
       date: Date | null;
       /** Callback function fired when the date changes, e.g. when a valid date is selected or unselected. */
@@ -85,70 +136,94 @@ export declare const DatePicker: import('react').MemoExoticComponent<
       error: DateInputValidationError | null;
       /** Callback function fired when validation finds an error, e.g. required input fields and impossible or disabled dates. Will always be called after `onChangeDate`. */
       onErrorDate: (error: DateInputValidationError | null) => void;
-      /** Disables user interaction. */
-      disabled?: boolean;
-      /** Array of disabled dates, and date tuples for date ranges. Make sure to set `disabledDateError` as well. A number is created for every individual date within a tuple range, so do not abuse this with massive ranges. */
-      disabledDates?: (Date | [Date, Date])[];
-      /** Minimum date allowed to be selected, inclusive. Dates before the `minDate` are disabled. All navigation to months before the `minDate` is disabled. */
-      minDate?: Date;
-      /** Maximum date allowed to be selected, inclusive. Dates after the `maxDate` are disabled. All navigation to months after the `maxDate` is disabled. */
-      maxDate?: Date;
-      /**
-       * Error text to display when a disabled date is selected with the DateInput, including dates before the `minDate` or after the `maxDate`. Also used as the tooltip content shown when hovering or focusing a disabled date on the Calendar.
-       * @default 'Date unavailable'
-       */
-      disabledDateError?: string;
-      /** Control the default open state of the Calendar popover. */
-      defaultOpen?: boolean;
-      /** Callback function fired when the DateInput text value changes. Prefer to use `onChangeDate` instead. Will always be called before `onChangeDate`. This prop should only be used for edge cases, such as custom error handling.  */
-      onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-      /** Callback function fired when the Calendar popover is opened.  */
+      /** Callback function fired when the picker is opened. */
       onOpen?: () => void;
-      /** Callback function fired when the Calendar popover is closed. Will always be called after `onCancel`, `onConfirm`, and `onChangeDate`.  */
+      /** Callback function fired when the picker is closed. Will always be called after `onCancel`, `onConfirm`, and `onChangeDate`. */
       onClose?: () => void;
-      /** Callback function fired when the user selects a date using the Calendar popover. Interacting with the DateInput does not fire this callback. Will always be called before `onClose`. */
+      /** Callback function fired when the user selects a date using the picker. Interacting with the DateInput does not fire this callback. Will always be called before `onClose`. */
       onConfirm?: () => void;
-      /** Callback function fired when the user closes the Calendar popover without selecting a date. Interacting with the DateInput does not fire this callback. Will always be called before `onClose`. */
+      /** Callback function fired when the user closes the picker without selecting a date. Interacting with the DateInput does not fire this callback. Will always be called before `onClose`. */
       onCancel?: () => void;
-      /**
-       * If `true`, the focus trap will restore focus to the previously focused element when it unmounts.
-       *
-       * WARNING: If you disable this, you need to ensure that focus is restored properly so it doesn't end up on the body
-       * @default true
-       */
-      restoreFocusOnUnmount?: boolean;
       /**
        * Accessibility label describing the calendar IconButton, which opens the calendar when pressed.
-       * @default 'Open calendar' / 'Close calendar'
+       * @deprecated Use openCalendarAccessibilityLabel/closeCalendarAccessibilityLabel instead
        */
       calendarIconButtonAccessibilityLabel?: string;
-      calendarStyle?: React.CSSProperties;
-      calendarClassName?: string;
-      dateInputStyle?: React.CSSProperties;
-      dateInputClassName?: string;
-    } & Omit<
-      DateInputProps,
-      | 'style'
-      | 'className'
-      | 'separator'
-      | 'date'
-      | 'disabledDates'
-      | 'minDate'
-      | 'maxDate'
-      | 'disabledDateError'
-      | 'onChangeDate'
-    > &
-      Pick<
-        CalendarProps,
+      /**
+       * Accessibility label for the calendar IconButton when the popover is closed (opens the calendar when pressed).
+       * @default 'Open calendar'
+       */
+      openCalendarAccessibilityLabel?: string;
+      /**
+       * Accessibility label for the calendar IconButton when the popover is open (closes the calendar when pressed).
+       * @default 'Close calendar'
+       */
+      closeCalendarAccessibilityLabel?: string;
+    } & Pick<PopoverProps, 'showOverlay'> &
+      Omit<
+        DateInputProps,
         | 'style'
         | 'className'
-        | 'previousArrowAccessibilityLabel'
-        | 'nextArrowAccessibilityLabel'
-        | 'seedDate'
-        | 'highlightedDates'
-      > &
-      Pick<PopoverProps, 'showOverlay'> &
-      import('react').RefAttributes<HTMLDivElement>
+        | 'separator'
+        | 'date'
+        | 'disabledDates'
+        | 'minDate'
+        | 'maxDate'
+        | 'disabledDateError'
+        | 'onChangeDate'
+      > & {
+        /** Control the default open state of the Calendar popover. */
+        defaultOpen?: boolean;
+        /** Callback function fired when the DateInput text value changes. Prefer to use `onChangeDate` instead. Will always be called before `onChangeDate`. This prop should only be used for edge cases, such as custom error handling.  */
+        onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+        /**
+         * If `true`, the focus trap will restore focus to the previously focused element when it unmounts.
+         *
+         * WARNING: If you disable this, you need to ensure that focus is restored properly so it doesn't end up on the body
+         * @default true
+         */
+        restoreFocusOnUnmount?: boolean;
+        /**
+         * Custom style to apply to the Calendar container.
+         * @deprecated Use `styles.calendar` instead.
+         */
+        calendarStyle?: React.CSSProperties;
+        /**
+         * Custom class name to apply to the Calendar container.
+         * @deprecated Use `classNames.calendar` instead.
+         */
+        calendarClassName?: string;
+        /**
+         * Custom style to apply to the DateInput.
+         * @deprecated Use `styles.dateInput` instead.
+         */
+        dateInputStyle?: React.CSSProperties;
+        /**
+         * Custom class name to apply to the DateInput.
+         * @deprecated Use `classNames.dateInput` instead.
+         */
+        dateInputClassName?: string;
+        /** Custom class names for the DateInput and Calendar subcomponents. */
+        classNames?: {
+          dateInput?: string;
+          calendar?: string;
+          calendarHeader?: string;
+          calendarTitle?: string;
+          calendarNavigation?: string;
+          calendarContent?: string;
+          calendarDay?: string;
+        };
+        /** Custom styles for the DateInput and Calendar subcomponents. */
+        styles?: {
+          dateInput?: React.CSSProperties;
+          calendar?: React.CSSProperties;
+          calendarHeader?: React.CSSProperties;
+          calendarTitle?: React.CSSProperties;
+          calendarNavigation?: React.CSSProperties;
+          calendarContent?: React.CSSProperties;
+          calendarDay?: React.CSSProperties;
+        };
+      } & import('react').RefAttributes<HTMLDivElement>
   >
 >;
 //# sourceMappingURL=DatePicker.d.ts.map

package/dts/dates/DatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../src/dates/DatePicker.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../src/dates/DatePicker.tsx"],"names":[],"mappings":"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"}

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

@@ -51,6 +51,8 @@ export type TrayBaseProps = Pick<
   onClose?: () => void;
   /** Action that will happen when tray is dismissed */
   onCloseComplete: () => void;
+  /** Callback fired when the open animation completes. */
+  onOpenComplete?: () => void;
   /**
    * Optional callback that, if provided, will be triggered when the Tray is toggled open/ closed
    * If used for analytics, context ('visible' | 'hidden') can be bundled with the event info to track whether the
@@ -146,6 +148,8 @@ export declare const Tray: React.MemoExoticComponent<
       onClose?: () => void;
       /** Action that will happen when tray is dismissed */
       onCloseComplete: () => void;
+      /** Callback fired when the open animation completes. */
+      onOpenComplete?: () => void;
       /**
        * Optional callback that, if provided, will be triggered when the Tray is toggled open/ closed
        * If used for analytics, context ('visible' | 'hidden') can be bundled with the event info to track whether the

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

@@ -1 +1 @@
-{"version":3,"file":"Tray.d.ts","sourceRoot":"","sources":["../../../src/overlays/tray/Tray.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Tray.d.ts","sourceRoot":"","sources":["../../../src/overlays/tray/Tray.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,gBAAgB,EAAE,wBAAwB,EAAa,MAAM,sBAAsB,CAAC;AA2BlG,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAEvD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAkE9D;;;GAGG;AACH,eAAO,MAAM,cAAc;IACzB,6BAA6B;;IAE7B,+BAA+B;;IAE/B,yCAAyC;;IAEzC,6BAA6B;;IAE7B,yBAAyB;;IAEzB,2BAA2B;;IAE3B,iGAAiG;;IAEjG,iGAAiG;;IAEjG,2BAA2B;;CAEnB,CAAC;AAEX,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,EAAE,CAAC;IAAE,WAAW,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC,CAAC;AAEvE,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,cAAc,EACd,uBAAuB,GAAG,2BAA2B,CACtD,GAAG;IACF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,kBAAkB,CAAC;IAChD,gHAAgH;IAChH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,kBAAkB,CAAC;IAC9C,gHAAgH;IAChH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,kBAAkB,CAAC;IAC9C,2BAA2B;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,GAAG,CAAC,EAAE,gBAAgB,CAAC;IACvB,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qDAAqD;IACrD,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,wDAAwD;IACxD,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,GAAG,QAAQ,KAAK,IAAI,CAAC;IAC7D;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,QAAQ,GAAG,aAAa,CAAC,CAAC;IACzD,gDAAgD;IAChD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;;;OAKG;IACH,8BAA8B,CAAC,EAAE,MAAM,CAAC;IACxC,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;;;OAMG;IACH,uBAAuB,CAAC,EAAE,wBAAwB,CAAC,oBAAoB,CAAC,CAAC;IACzE;;;;;;;OAOG;IACH,sBAAsB,CAAC,EAAE,wBAAwB,CAAC,mBAAmB,CAAC,CAAC;IACvE;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,GAAG,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,GAAG,yBAAyB,CAAC,CAAC;AAErF,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG,mBAAmB,CAAC,OAAO,cAAc,CAAC,CAAC;AAGnF,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC;AAeF,eAAO,MAAM,IAAI;eA/GJ,KAAK,CAAC,SAAS,GAAG,kBAAkB;IAC/C,gHAAgH;aACvG,KAAK,CAAC,SAAS,GAAG,kBAAkB;IAC7C,gHAAgH;aACvG,KAAK,CAAC,SAAS,GAAG,kBAAkB;IAC7C,2BAA2B;SACtB,MAAM;IACX;;;OAGG;UACG,gBAAgB;IACtB,oEAAoE;aAC3D,MAAM,IAAI;IACnB,qDAAqD;cAC3C,MAAM,IAAI;IACpB,qDAAqD;qBACpC,MAAM,IAAI;IAC3B,wDAAwD;qBACvC,MAAM,IAAI;IAC3B;;;;OAIG;yBACkB,CAAC,OAAO,EAAE,SAAS,GAAG,QAAQ,KAAK,IAAI;IAC5D;;;OAGG;qBACc,OAAO;IACxB;;;OAGG;sBACe,OAAO;IACzB;;;OAGG;WACI,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,QAAQ,GAAG,aAAa,CAAC;IACxD,gDAAgD;YACxC,KAAK,CAAC,SAAS;IACvB;;;;;OAKG;qCAC8B,MAAM;IACvC,mCAAmC;aAC1B,MAAM;IACf;;;OAGG;mBACY,OAAO;IACtB;;;OAGG;4BACqB,OAAO;IAC/B;;;;;;OAMG;8BACuB,wBAAwB,CAAC,oBAAoB,CAAC;IACxE;;;;;;;OAOG;6BACsB,wBAAwB,CAAC,mBAAmB,CAAC;IACtE;;;;;;;;OAQG;oBACa,OAAO;;IAlHvB,6BAA6B;;IAE7B,+BAA+B;;IAE/B,yCAAyC;;IAEzC,6BAA6B;;IAE7B,yBAAyB;;IAEzB,2BAA2B;;IAE3B,iGAAiG;;IAEjG,iGAAiG;;IAEjG,2BAA2B;;wCAkf5B,CAAC"}

package/esm/dates/Calendar.js

@@ -1,5 +1,5 @@
 const _excluded = ["as", "className", "borderRadius", "width", "height", "background", "children"],
-  _excluded2 = ["selectedDate", "seedDate", "onPressDate", "disabled", "hideControls", "disabledDates", "highlightedDates", "minDate", "maxDate", "disabledDateError", "className", "style", "nextArrowAccessibilityLabel", "previousArrowAccessibilityLabel"];
+  _excluded2 = ["selectedDate", "seedDate", "onPressDate", "disabled", "hideControls", "disabledDates", "highlightedDates", "minDate", "maxDate", "disabledDateError", "className", "style", "classNames", "styles", "nextArrowAccessibilityLabel", "previousArrowAccessibilityLabel", "highlightedDateAccessibilityHint"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -23,6 +23,7 @@ import { Tooltip } from '../overlays/tooltip/Tooltip';
 import { Pressable } from '../system/Pressable';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CALENDAR_DAY_DIMENSION = 40;
 const pressableCss = "pressableCss-pb7kwm3";
 export const calendarPressableDefaultElement = 'button';
 const CalendarPressable = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
@@ -30,8 +31,8 @@ const CalendarPressable = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
       as,
       className,
       borderRadius = 1000,
-      width = 40,
-      height = 40,
+      width = CALENDAR_DAY_DIMENSION,
+      height = CALENDAR_DAY_DIMENSION,
       background = 'transparent',
       children
     } = _ref,
@@ -49,6 +50,24 @@ const CalendarPressable = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
     children: children
   }));
 }));
+/**
+ * Static class names for Calendar component parts.
+ * Use these selectors to target specific elements with CSS.
+ */
+export const calendarClassNames = {
+  /** Root element */
+  root: 'cds-Calendar',
+  /** Header section */
+  header: 'cds-Calendar-header',
+  /** Month and year title text element */
+  title: 'cds-Calendar-title',
+  /** Navigation controls element */
+  navigation: 'cds-Calendar-navigation',
+  /** Main content area */
+  content: 'cds-Calendar-content',
+  /** Individual date cell in a calendar grid */
+  day: 'cds-Calendar-day'
+};
 const getDayAccessibilityLabel = function (date) {
   let locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en-US';
   return "".concat(date.toLocaleDateString(locale, {
@@ -78,31 +97,38 @@ const CalendarDay = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
     isToday,
     isCurrentMonth,
     onClick,
-    disabledError = 'Date unavailable'
+    disabledError = 'Date unavailable',
+    highlightedDateAccessibilityHint,
+    className,
+    style
   } = _ref2;
   const {
     locale
   } = useLocale();
   const handleClick = useCallback(() => onClick === null || onClick === void 0 ? void 0 : onClick(date), [date, onClick]);
-  const accessibilityLabel = getDayAccessibilityLabel(date, locale);
+  const baseLabel = getDayAccessibilityLabel(date, locale);
   const calendarDayButton = useMemo(() => /*#__PURE__*/_jsx(CalendarPressable, {
     ref: ref,
     focusable: true,
-    accessibilityLabel: accessibilityLabel,
+    accessibilityHint: highlighted ? highlightedDateAccessibilityHint : undefined,
+    accessibilityLabel: baseLabel,
     "aria-current": isToday ? 'date' : undefined,
     "aria-pressed": active ? 'true' : undefined,
     background: active ? 'bgPrimary' : 'bg',
     borderColor: isToday ? 'bgPrimary' : undefined,
+    className: className,
     "data-calendar-date": getISOStringLocal(date),
+    "data-highlight": highlighted ? 'true' : undefined,
     disabled: disabled,
     onClick: disabled ? undefined : handleClick,
+    style: style,
     tabIndex: date.getDate() === 1 ? undefined : -1,
     children: /*#__PURE__*/_jsx(Text, {
       color: active ? 'fgInverse' : highlighted ? 'fgPrimary' : undefined,
       font: "body",
       children: date.getDate()
     })
-  }), [date, active, disabled, highlighted, isToday, accessibilityLabel, handleClick, ref]);
+  }), [date, active, disabled, highlighted, highlightedDateAccessibilityHint, isToday, baseLabel, handleClick, ref, className, style]);
   if (!isCurrentMonth) return /*#__PURE__*/_jsx("div", {});
   if (!disabled || disabled && !disabledError) return calendarDayButton;
   return /*#__PURE__*/_jsx(Tooltip, {
@@ -127,8 +153,11 @@ export const Calendar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3, ref) =
       disabledDateError = 'Date unavailable',
       className,
       style,
+      classNames,
+      styles,
       nextArrowAccessibilityLabel = 'Go to next month',
-      previousArrowAccessibilityLabel = 'Go to previous month'
+      previousArrowAccessibilityLabel = 'Go to previous month',
+      highlightedDateAccessibilityHint = 'Highlighted'
     } = _ref3,
     props = _objectWithoutProperties(_ref3, _excluded2);
   const calendarRef = useRef(null);
@@ -193,29 +222,35 @@ export const Calendar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3, ref) =
     ref: calendarRef,
     background: "bg",
     borderRadius: 400,
-    className: className,
+    className: cx(calendarClassNames.root, className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
     opacity: disabled ? accessibleOpacityDisabled : undefined,
     overflow: "auto",
     padding: 2,
-    style: style,
+    style: _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root),
     width: 360
   }, props), {}, {
     children: [/*#__PURE__*/_jsxs(HStack, {
       alignItems: "center",
+      className: cx(calendarClassNames.header, classNames === null || classNames === void 0 ? void 0 : classNames.header),
       justifyContent: "space-between",
       paddingBottom: 2,
       paddingX: 1.5,
+      style: styles === null || styles === void 0 ? void 0 : styles.header,
       children: [/*#__PURE__*/_jsx(Text, {
         as: "h3",
+        className: cx(calendarClassNames.title, classNames === null || classNames === void 0 ? void 0 : classNames.title),
         display: "block",
         font: "headline",
+        style: styles === null || styles === void 0 ? void 0 : styles.title,
         children: calendarSeedDate.toLocaleDateString('en-US', {
           month: 'long',
           year: 'numeric'
         })
       }), !hideControls && /*#__PURE__*/_jsxs(HStack, {
+        className: cx(calendarClassNames.navigation, classNames === null || classNames === void 0 ? void 0 : classNames.navigation),
         gap: 1,
         marginEnd: -1,
+        style: styles === null || styles === void 0 ? void 0 : styles.navigation,
         children: [/*#__PURE__*/_jsx(CalendarPressable, {
           accessibilityLabel: previousArrowAccessibilityLabel,
           background: "bg",
@@ -239,14 +274,16 @@ export const Calendar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3, ref) =
         })]
       })]
     }), /*#__PURE__*/_jsxs(Grid, {
+      className: cx(calendarClassNames.content, classNames === null || classNames === void 0 ? void 0 : classNames.content),
       gap: 1,
       justifyContent: "space-between",
-      templateColumns: "repeat(7, 40px)",
+      style: styles === null || styles === void 0 ? void 0 : styles.content,
+      templateColumns: "repeat(7, ".concat(CALENDAR_DAY_DIMENSION, "px)"),
       children: [daysOfWeek.map(day => /*#__PURE__*/_jsx(VStack, {
         alignItems: "center",
-        height: 40,
+        height: CALENDAR_DAY_DIMENSION,
         justifyContent: "center",
-        width: 40,
+        width: CALENDAR_DAY_DIMENSION,
         children: /*#__PURE__*/_jsx(Text, {
           font: "body",
           userSelect: "none",
@@ -256,13 +293,16 @@ export const Calendar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3, ref) =
         const time = date.getTime();
         return /*#__PURE__*/_jsx(CalendarDay, {
           active: time === selectedTime,
+          className: cx(calendarClassNames.day, classNames === null || classNames === void 0 ? void 0 : classNames.day),
           date: date,
           disabled: disabled || minTime && time < minTime || maxTime && time > maxTime || disabledTimes.includes(time),
           disabledError: disabledDateError,
           highlighted: highlightedTimes.includes(time),
+          highlightedDateAccessibilityHint: highlightedDateAccessibilityHint,
           isCurrentMonth: date.getMonth() === calendarSeedDate.getMonth(),
           isToday: time === today.getTime(),
-          onClick: onPressDate
+          onClick: onPressDate,
+          style: styles === null || styles === void 0 ? void 0 : styles.day
         }, time);
       })]
     })]

package/esm/dates/DatePicker.js

@@ -1,4 +1,4 @@
-const _excluded = ["date", "onChangeDate", "error", "onErrorDate", "required", "disabled", "seedDate", "disabledDates", "highlightedDates", "minDate", "maxDate", "requiredError", "invalidDateError", "disabledDateError", "label", "restoreFocusOnUnmount", "accessibilityLabel", "accessibilityLabelledBy", "calendarIconButtonAccessibilityLabel", "nextArrowAccessibilityLabel", "previousArrowAccessibilityLabel", "compact", "variant", "helperText", "showOverlay", "defaultOpen", "calendarStyle", "calendarClassName", "dateInputStyle", "dateInputClassName", "width", "onOpen", "onClose", "onConfirm", "onCancel", "onChange"];
+const _excluded = ["date", "onChangeDate", "error", "onErrorDate", "required", "disabled", "seedDate", "disabledDates", "highlightedDates", "highlightedDateAccessibilityHint", "minDate", "maxDate", "requiredError", "invalidDateError", "disabledDateError", "label", "restoreFocusOnUnmount", "accessibilityLabel", "accessibilityLabelledBy", "calendarIconButtonAccessibilityLabel", "openCalendarAccessibilityLabel", "closeCalendarAccessibilityLabel", "nextArrowAccessibilityLabel", "previousArrowAccessibilityLabel", "compact", "variant", "helperText", "showOverlay", "defaultOpen", "calendarStyle", "calendarClassName", "dateInputStyle", "dateInputClassName", "classNames", "styles", "width", "onOpen", "onClose", "onConfirm", "onCancel", "onChange"];
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -12,6 +12,7 @@ import { getISOStringLocal } from '@coinbase/cds-common/dates/getISOStringLocal'
 import { zIndex } from '@coinbase/cds-common/tokens/zIndex';
 import { m as motion } from 'framer-motion';
 import { InputIconButton } from '../controls/InputIconButton';
+import { cx } from '../cx';
 import { Box, VStack } from '../layout';
 import { getMotionProps } from '../motion/useMotionProps';
 import { Popover } from '../overlays/popover/Popover';
@@ -43,6 +44,7 @@ export const DatePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
       seedDate,
       disabledDates,
       highlightedDates,
+      highlightedDateAccessibilityHint,
       minDate,
       maxDate,
       requiredError = 'This field is required',
@@ -53,6 +55,8 @@ export const DatePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
       accessibilityLabel,
       accessibilityLabelledBy,
       calendarIconButtonAccessibilityLabel,
+      openCalendarAccessibilityLabel = 'Open calendar',
+      closeCalendarAccessibilityLabel = 'Close calendar',
       nextArrowAccessibilityLabel,
       previousArrowAccessibilityLabel,
       compact,
@@ -64,6 +68,8 @@ export const DatePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
       calendarClassName,
       dateInputStyle,
       dateInputClassName,
+      classNames,
+      styles,
       width = '100%',
       onOpen,
       onClose,
@@ -117,16 +123,16 @@ export const DatePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
     children: /*#__PURE__*/_jsx(InputIconButton, {
       disableInheritFocusStyle: true,
       transparent: true,
-      accessibilityLabel: calendarIconButtonAccessibilityLabel !== null && calendarIconButtonAccessibilityLabel !== void 0 ? calendarIconButtonAccessibilityLabel : showCalendar ? 'Close calendar' : 'Open calendar',
+      accessibilityLabel: calendarIconButtonAccessibilityLabel !== null && calendarIconButtonAccessibilityLabel !== void 0 ? calendarIconButtonAccessibilityLabel : showCalendar ? closeCalendarAccessibilityLabel : openCalendarAccessibilityLabel,
       name: "calendarEmpty",
       onClick: handleOpenCalendar,
       variant: "secondary"
     })
-  }), [handleOpenCalendar, showCalendar, calendarIconButtonAccessibilityLabel]);
+  }), [handleOpenCalendar, showCalendar, calendarIconButtonAccessibilityLabel, openCalendarAccessibilityLabel, closeCalendarAccessibilityLabel]);
   const dateInput = useMemo(() => /*#__PURE__*/_jsx(DateInput, _objectSpread(_objectSpread({}, props), {}, {
     accessibilityLabel: accessibilityLabel,
     accessibilityLabelledBy: accessibilityLabelledBy,
-    className: dateInputClassName,
+    className: cx(classNames === null || classNames === void 0 ? void 0 : classNames.dateInput, dateInputClassName),
     compact: compact,
     date: date,
     disabled: disabled,
@@ -144,9 +150,9 @@ export const DatePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
     onErrorDate: onErrorDate,
     required: required,
     requiredError: requiredError,
-    style: dateInputStyle,
+    style: _objectSpread(_objectSpread({}, dateInputStyle), styles === null || styles === void 0 ? void 0 : styles.dateInput),
     variant: variant
-  })), [date, onChangeDate, error, onErrorDate, required, compact, disabled, dateInputCalendarButton, requiredError, invalidDateError, disabledDates, minDate, maxDate, disabledDateError, onChange, label, accessibilityLabel, accessibilityLabelledBy, helperText, variant, dateInputClassName, dateInputStyle, props]);
+  })), [date, onChangeDate, error, onErrorDate, required, compact, disabled, dateInputCalendarButton, requiredError, invalidDateError, disabledDates, minDate, maxDate, disabledDateError, onChange, label, accessibilityLabel, accessibilityLabelledBy, helperText, variant, dateInputClassName, dateInputStyle, classNames, styles, props]);
   const calendar = useMemo(() => /*#__PURE__*/_jsx(MotionVStack, _objectSpread(_objectSpread({
     background: true,
     borderRadius: 400,
@@ -159,9 +165,18 @@ export const DatePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
     children: /*#__PURE__*/_jsx(Calendar, {
       ref: calendarRef,
       className: calendarClassName,
+      classNames: {
+        root: classNames === null || classNames === void 0 ? void 0 : classNames.calendar,
+        header: classNames === null || classNames === void 0 ? void 0 : classNames.calendarHeader,
+        title: classNames === null || classNames === void 0 ? void 0 : classNames.calendarTitle,
+        navigation: classNames === null || classNames === void 0 ? void 0 : classNames.calendarNavigation,
+        content: classNames === null || classNames === void 0 ? void 0 : classNames.calendarContent,
+        day: classNames === null || classNames === void 0 ? void 0 : classNames.calendarDay
+      },
       disabled: disabled,
       disabledDateError: disabledDateError,
       disabledDates: disabledDates,
+      highlightedDateAccessibilityHint: highlightedDateAccessibilityHint,
       highlightedDates: highlightedDates,
       maxDate: maxDate,
       minDate: minDate,
@@ -170,9 +185,17 @@ export const DatePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
       previousArrowAccessibilityLabel: previousArrowAccessibilityLabel,
       seedDate: seedDate,
       selectedDate: date,
-      style: calendarStyle
+      style: calendarStyle,
+      styles: {
+        root: styles === null || styles === void 0 ? void 0 : styles.calendar,
+        header: styles === null || styles === void 0 ? void 0 : styles.calendarHeader,
+        title: styles === null || styles === void 0 ? void 0 : styles.calendarTitle,
+        navigation: styles === null || styles === void 0 ? void 0 : styles.calendarNavigation,
+        content: styles === null || styles === void 0 ? void 0 : styles.calendarContent,
+        day: styles === null || styles === void 0 ? void 0 : styles.calendarDay
+      }
     })
-  })), [date, disabled, seedDate, disabledDates, highlightedDates, minDate, maxDate, disabledDateError, handleConfirmCalendarDate, calendarRef, calendarStyle, calendarClassName, nextArrowAccessibilityLabel, previousArrowAccessibilityLabel]);
+  })), [date, disabled, seedDate, disabledDates, highlightedDates, highlightedDateAccessibilityHint, minDate, maxDate, disabledDateError, handleConfirmCalendarDate, calendarRef, nextArrowAccessibilityLabel, previousArrowAccessibilityLabel, calendarClassName, calendarStyle, classNames, styles]);
   return /*#__PURE__*/_jsx(Box, {
     ref: ref,
     width: width,

package/esm/media/RemoteImageGroup.js

@@ -83,7 +83,7 @@ export const RemoteImageGroup = _ref => {
       }, index);
     }), excess > 0 && /*#__PURE__*/_jsx(Box, {
       alignItems: "center",
-      background: "bgOverlay",
+      background: "bgSecondary",
       borderColor: borderColor,
       borderWidth: borderWidth,
       className: cx(excessContainerCss, borderRadiusCss[shape]),

package/esm/overlays/tray/Tray.js

@@ -101,6 +101,7 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref
     onBlur,
     onClose,
     onCloseComplete,
+    onOpenComplete,
     preventDismiss,
     id,
     role = 'dialog',
@@ -128,6 +129,7 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref
     height: trayHeight
   } = useDimensions();
   const contentRef = useRef(null);
+  const hasCalledOnOpenComplete = useRef(false);
   const [scope, animate] = useAnimate();
   const dragControls = useDragControls();
   const isSideTray = pin === 'right' || pin === 'left';
@@ -205,6 +207,11 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref
       });
     }
   }, [trayHeight, handleSwipeClose, animate, scope]);
+  const handleOpenComplete = useCallback(() => {
+    if (hasCalledOnOpenComplete.current) return;
+    hasCalledOnOpenComplete.current = true;
+    onOpenComplete === null || onOpenComplete === void 0 || onOpenComplete();
+  }, [onOpenComplete]);
   const initialAnimationValue = useMemo(() => {
     if (reduceMotion) {
       return {
@@ -319,6 +326,7 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref
                 elevation: 2,
                 id: id,
                 initial: initialAnimationValue,
+                onAnimationComplete: handleOpenComplete,
                 onClick: e => e.stopPropagation(),
                 onDragEnd: !preventDismiss ? handleDragEnd : undefined,
                 pin: pin,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "8.53.0",
+  "version": "8.54.0",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -207,9 +207,9 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.53.0",
+    "@coinbase/cds-common": "^8.54.0",
     "@coinbase/cds-icons": "^5.13.0",
-    "@coinbase/cds-illustrations": "^4.33.0",
+    "@coinbase/cds-illustrations": "^4.34.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
     "@coinbase/cds-utils": "^2.3.5",
     "@floating-ui/react-dom": "^2.1.1",