@coinbase/cds-web 0.0.0 → 8.13.1

package/dts/dates/DatePicker.d.ts

@@ -0,0 +1,108 @@
+import React from 'react';
+import { type DateInputValidationError } from '@coinbase/cds-common/dates/DateInputValidationError';
+import { type PopoverProps } from '../overlays/popover/PopoverProps';
+import { type CalendarProps } from './Calendar';
+import { type DateInputProps } from './DateInput';
+export type DatePickerProps = {
+    /** 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. */
+    onChangeDate: (selectedDate: Date | null) => void;
+    /** Control the error value of the DatePicker. */
+    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.  */
+    onOpen?: () => void;
+    /** Callback function fired when the Calendar popover 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`. */
+    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`. */
+    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'
+     */
+    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' | 'className' | 'style'> & Pick<PopoverProps, 'showOverlay'>;
+export declare const DatePicker: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
+    /** 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. */
+    onChangeDate: (selectedDate: Date | null) => void;
+    /** Control the error value of the DatePicker. */
+    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.  */
+    onOpen?: () => void;
+    /** Callback function fired when the Calendar popover 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`. */
+    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`. */
+    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'
+     */
+    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, "style" | "className" | "previousArrowAccessibilityLabel" | "nextArrowAccessibilityLabel" | "seedDate" | "highlightedDates"> & Pick<PopoverProps, "showOverlay"> & React.RefAttributes<HTMLDivElement>>>;
+//# sourceMappingURL=DatePicker.d.ts.map

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

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

package/dts/dates/__figma__/DatePicker.figma.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.figma.d.ts","sourceRoot":"","sources":["../../../src/dates/__figma__/DatePicker.figma.tsx"],"names":[],"mappings":""}

package/dts/dates/__stories__/A11yTest.stories.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
+        selectedDate?: Date | null;
+        seedDate?: Date;
+        onPressDate?: (date: Date) => void;
+        disabled?: boolean;
+        hideControls?: boolean;
+        disabledDates?: (Date | [Date, Date])[];
+        highlightedDates?: (Date | [Date, Date])[];
+        minDate?: Date;
+        maxDate?: Date;
+        disabledDateError?: string;
+        nextArrowAccessibilityLabel?: string;
+        previousArrowAccessibilityLabel?: string;
+        className?: string;
+        style?: React.CSSProperties;
+    } & Omit<import("../../layout").VStackProps<"div">, "ref" | "children"> & React.RefAttributes<HTMLElement>>>;
+    parameters: {
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export default _default;
+export declare const A11yTest: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=A11yTest.stories.d.ts.map

package/dts/dates/__stories__/A11yTest.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"A11yTest.stories.d.ts","sourceRoot":"","sources":["../../../src/dates/__stories__/A11yTest.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYxC,wBAgBE;AAuCF,eAAO,MAAM,QAAQ,+CAkEpB,CAAC"}

package/dts/dates/__stories__/Calendar.stories.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
+        selectedDate?: Date | null;
+        seedDate?: Date;
+        onPressDate?: (date: Date) => void;
+        disabled?: boolean;
+        hideControls?: boolean;
+        disabledDates?: (Date | [Date, Date])[];
+        highlightedDates?: (Date | [Date, Date])[];
+        minDate?: Date;
+        maxDate?: Date;
+        disabledDateError?: string;
+        nextArrowAccessibilityLabel?: string;
+        previousArrowAccessibilityLabel?: string;
+        className?: string;
+        style?: React.CSSProperties;
+    } & Omit<import("../../layout").VStackProps<"div">, "ref" | "children"> & React.RefAttributes<HTMLElement>>>;
+};
+export default _default;
+export declare const Examples: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        a11y: {
+            disable: boolean;
+        };
+    };
+};
+export declare const Props: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        a11y: {
+            disable: boolean;
+        };
+    };
+};
+//# sourceMappingURL=Calendar.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.stories.d.ts","sourceRoot":"","sources":["../../../src/dates/__stories__/Calendar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;AAWxC,wBAGE;AAeF,eAAO,MAAM,QAAQ;;;;;;;CAkBpB,CAAC;AAIF,eAAO,MAAM,KAAK;;;;;;;CAyDjB,CAAC"}

package/dts/dates/__stories__/DateInput.stories.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
+        separator?: string;
+        className?: string;
+        style?: React.CSSProperties;
+    } & Omit<import("@coinbase/cds-common/dates/useDateInput").DateInputOptions, "intlDateFormat"> & Omit<import("../../controls").TextInputBaseProps, "defaultValue" | "value" | "inputNode"> & React.RefAttributes<HTMLInputElement>>>;
+};
+export default _default;
+export declare const Examples: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        a11y: {
+            disable: boolean;
+        };
+    };
+};
+export declare const Props: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        a11y: {
+            disable: boolean;
+        };
+    };
+};
+//# sourceMappingURL=DateInput.stories.d.ts.map

package/dts/dates/__stories__/DateInput.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput.stories.d.ts","sourceRoot":"","sources":["../../../src/dates/__stories__/DateInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;;;;;;;;;AAaxC,wBAGE;AAWF,eAAO,MAAM,QAAQ;;;;;;;CA4BpB,CAAC;AAIF,eAAO,MAAM,KAAK;;;;;;;CA6DjB,CAAC"}

package/dts/dates/__stories__/DatePicker.stories.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+import { DateInputValidationError } from '@coinbase/cds-common/dates/DateInputValidationError';
+declare const _default: {
+    title: string;
+    component: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
+        date: Date | null;
+        onChangeDate: (selectedDate: Date | null) => void;
+        error: DateInputValidationError | null;
+        onErrorDate: (error: DateInputValidationError | null) => void;
+        disabled?: boolean;
+        disabledDates?: (Date | [Date, Date])[];
+        minDate?: Date;
+        maxDate?: Date;
+        disabledDateError?: string;
+        defaultOpen?: boolean;
+        onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+        onOpen?: () => void;
+        onClose?: () => void;
+        onConfirm?: () => void;
+        onCancel?: () => void;
+        restoreFocusOnUnmount?: boolean;
+        calendarIconButtonAccessibilityLabel?: string;
+        calendarStyle?: React.CSSProperties;
+        calendarClassName?: string;
+        dateInputStyle?: React.CSSProperties;
+        dateInputClassName?: string;
+    } & Omit<import("../DateInput").DateInputProps, "style" | "className" | "separator" | "date" | "disabledDates" | "minDate" | "maxDate" | "disabledDateError" | "onChangeDate"> & Pick<import("../Calendar").CalendarProps, "style" | "className" | "previousArrowAccessibilityLabel" | "nextArrowAccessibilityLabel" | "seedDate" | "highlightedDates"> & Pick<import("../../overlays").PopoverProps, "showOverlay"> & React.RefAttributes<HTMLDivElement>>>;
+};
+export default _default;
+export declare const Examples: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        a11y: {
+            disable: boolean;
+        };
+    };
+};
+export declare const AccessibilityLabels: () => import("react/jsx-runtime").JSX.Element;
+export declare const MultiplePickers: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        a11y: {
+            disable: boolean;
+        };
+    };
+};
+export declare const CustomErrors: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        a11y: {
+            disable: boolean;
+        };
+    };
+};
+//# sourceMappingURL=DatePicker.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.stories.d.ts","sourceRoot":"","sources":["../../../src/dates/__stories__/DatePicker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;AAa/F,wBAGE;AAsBF,eAAO,MAAM,QAAQ;;;;;;;CA6BpB,CAAC;AAIF,eAAO,MAAM,mBAAmB,+CA0D/B,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;CA8C3B,CAAC;AAIF,eAAO,MAAM,YAAY;;;;;;;CAyGxB,CAAC"}

package/dts/dates/__stories__/Note.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const Note: ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Note.d.ts.map

package/dts/dates/__stories__/Note.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Note.d.ts","sourceRoot":"","sources":["../../../src/dates/__stories__/Note.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,eAAO,MAAM,IAAI,GAAI,cAAc;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,4CAS/D,CAAC"}

package/dts/defaultFontStyles.d.ts

@@ -0,0 +1,2 @@
+import './styles/defaultFont';
+//# sourceMappingURL=defaultFontStyles.d.ts.map

package/dts/defaultFontStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaultFontStyles.d.ts","sourceRoot":"","sources":["../src/defaultFontStyles.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAC"}

package/dts/dots/DotCount.d.ts

@@ -0,0 +1,70 @@
+import React from 'react';
+import type { DotCountPinPlacement, DotCountVariants, DotOverlap, SharedAccessibilityProps, SharedProps } from '@coinbase/cds-common/types';
+export type DotCountBaseProps = SharedProps & Pick<SharedAccessibilityProps, 'accessibilityLabel' | 'accessibilityLabelledBy' | 'accessibilityHint'> & {
+    /**
+     * The number value to be shown in the dot. If count is <= 0, dot will not show up.
+     *  */
+    count: number;
+    /**
+     * If a badge count is greater than max, it will truncate the numbers so its max+
+     * @default 99
+     *  */
+    max?: number;
+    /**
+     * Background color of dot
+     * @default negative
+     * */
+    variant?: DotCountVariants;
+    /** Position of dot relative to its parent */
+    pin?: DotCountPinPlacement;
+    /** Children of where the dot will anchor to */
+    children?: React.ReactNode;
+    /** Indicates what shape Dot is overlapping */
+    overlap?: DotOverlap;
+};
+export type DotCountProps = DotCountBaseProps & {
+    /**
+     * Custom class name for the root element.
+     */
+    className?: string;
+    /**
+     * Custom styles for the root element.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Custom class names for the component.
+     */
+    classNames?: {
+        /**
+         * Custom class name for the root element.
+         */
+        root?: string;
+        /**
+         * Custom class name for the container element.
+         */
+        container?: string;
+        /**
+         * Custom class name for the text element.
+         */
+        text?: string;
+    };
+    /**
+     * Custom styles for the component.
+     */
+    styles?: {
+        /**
+         * Custom styles for the root element.
+         */
+        root?: React.CSSProperties;
+        /**
+         * Custom styles for the container element.
+         */
+        container?: React.CSSProperties;
+        /**
+         * Custom styles for the text element.
+         */
+        text?: React.CSSProperties;
+    };
+};
+export declare const DotCount: React.MemoExoticComponent<({ children, pin, variant, count, max, testID, accessibilityLabel, overlap, className, classNames, style, styles, ...props }: DotCountProps) => import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=DotCount.d.ts.map

package/dts/dots/DotCount.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DotCount.d.ts","sourceRoot":"","sources":["../../src/dots/DotCount.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAS7C,OAAO,KAAK,EACV,oBAAoB,EACpB,gBAAgB,EAChB,UAAU,EACV,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAqCpC,MAAM,MAAM,iBAAiB,GAAG,WAAW,GACzC,IAAI,CACF,wBAAwB,EACxB,oBAAoB,GAAG,yBAAyB,GAAG,mBAAmB,CACvE,GAAG;IACF;;UAEM;IACN,KAAK,EAAE,MAAM,CAAC;IACd;;;UAGM;IACN,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;SAGK;IACL,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,6CAA6C;IAC7C,GAAG,CAAC,EAAE,oBAAoB,CAAC;IAC3B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,8CAA8C;IAC9C,OAAO,CAAC,EAAE,UAAU,CAAC;CACtB,CAAC;AAEJ,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAAG;IAC9C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,UAAU,CAAC,EAAE;QACX;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B;;WAEG;QACH,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAChC;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC5B,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,QAAQ,0JAehB,aAAa,6CA8DjB,CAAC"}

package/dts/dots/DotStatusColor.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { DotOverlap, DotSize, DotVariant, PinPlacement, SharedAccessibilityProps, SharedProps } from '@coinbase/cds-common/types';
+export type DotStatusColorBaseProps = SharedProps & Pick<SharedAccessibilityProps, 'accessibilityLabel' | 'accessibilityLabelledBy' | 'accessibilityHint'> & {
+    /** Position of dot relative to its parent */
+    pin?: PinPlacement;
+    /** Background color of dot */
+    variant: DotVariant;
+    /** Children of where the dot will anchor to */
+    children?: React.ReactNode;
+    /** Size of dot */
+    size?: DotSize;
+    /** Indicates what shape Dot is overlapping */
+    overlap?: DotOverlap;
+};
+export type DotStatusColorProps = DotStatusColorBaseProps;
+export declare const DotStatusColor: React.MemoExoticComponent<({ variant, pin, size, overlap, children, testID, accessibilityLabel, ...props }: DotStatusColorProps) => import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=DotStatusColor.d.ts.map

package/dts/dots/DotStatusColor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DotStatusColor.d.ts","sourceRoot":"","sources":["../../src/dots/DotStatusColor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAE7C,OAAO,KAAK,EACV,UAAU,EACV,OAAO,EACP,UAAU,EACV,YAAY,EACZ,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAsBpC,MAAM,MAAM,uBAAuB,GAAG,WAAW,GAC/C,IAAI,CACF,wBAAwB,EACxB,oBAAoB,GAAG,yBAAyB,GAAG,mBAAmB,CACvE,GAAG;IACF,6CAA6C;IAC7C,GAAG,CAAC,EAAE,YAAY,CAAC;IACnB,8BAA8B;IAC9B,OAAO,EAAE,UAAU,CAAC;IACpB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,kBAAkB;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,8CAA8C;IAC9C,OAAO,CAAC,EAAE,UAAU,CAAC;CACtB,CAAC;AAEJ,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,CAAC;AAE1D,eAAO,MAAM,cAAc,8GAUtB,mBAAmB,6CA+BvB,CAAC"}

package/dts/dots/DotSymbol.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import type { DotOverlap, DotSize, IconName, PinPlacement, SharedAccessibilityProps, SharedProps } from '@coinbase/cds-common/types';
+import { type IconProps } from '../icons/Icon';
+import { type BoxBaseProps } from '../layout/Box';
+export type DotSymbolBaseProps = SharedProps & Pick<SharedAccessibilityProps, 'accessibilityLabel' | 'accessibilityLabelledBy' | 'accessibilityHint'> & {
+    /** Icon name to add to the dot. */
+    iconName?: IconName;
+    /** Size of the dot */
+    size?: DotSize;
+    /** Whether the icon is active */
+    active?: boolean;
+    /** The color of the icon */
+    color?: IconProps['color'];
+    background?: BoxBaseProps['background'];
+    borderColor?: BoxBaseProps['borderColor'];
+    /** Position of the dot */
+    pin?: PinPlacement;
+    /** The element that the dot will anchor to */
+    children?: React.ReactNode;
+    /** Indicates what shape dot is overlapping */
+    overlap?: DotOverlap;
+    /** Add an arbitrary ReactNode to the dot instead of an icon. */
+    symbol?: React.ReactNode;
+    /** Image source path */
+    source?: string;
+    style?: React.CSSProperties;
+    className?: string;
+    iconStyle?: React.CSSProperties;
+    iconClassName?: string;
+    imageStyle?: React.CSSProperties;
+    imageClassName?: string;
+};
+export type DotSymbolProps = DotSymbolBaseProps;
+export declare const DotSymbol: React.MemoExoticComponent<({ children, symbol, pin, source, iconName, size, active, testID, overlap, color, background, borderColor, style, className, iconStyle, iconClassName, imageStyle, imageClassName, accessibilityLabel, ...props }: DotSymbolProps) => import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=DotSymbol.d.ts.map

package/dts/dots/DotSymbol.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DotSymbol.d.ts","sourceRoot":"","sources":["../../src/dots/DotSymbol.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EACV,UAAU,EACV,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAIpC,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AA0BvD,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAC1C,IAAI,CACF,wBAAwB,EACxB,oBAAoB,GAAG,yBAAyB,GAAG,mBAAmB,CACvE,GAAG;IACF,mCAAmC;IACnC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,sBAAsB;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC3B,UAAU,CAAC,EAAE,YAAY,CAAC,YAAY,CAAC,CAAC;IACxC,WAAW,CAAC,EAAE,YAAY,CAAC,aAAa,CAAC,CAAC;IAC1C,0BAA0B;IAC1B,GAAG,CAAC,EAAE,YAAY,CAAC;IACnB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,8CAA8C;IAC9C,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,gEAAgE;IAChE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,wBAAwB;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEJ,MAAM,MAAM,cAAc,GAAG,kBAAkB,CAAC;AAIhD,eAAO,MAAM,SAAS,+OAsBjB,cAAc,6CA6ClB,CAAC"}

package/dts/dots/__figma__/DotCount.figma.d.ts

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

package/dts/dots/__figma__/DotCount.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DotCount.figma.d.ts","sourceRoot":"","sources":["../../../src/dots/__figma__/DotCount.figma.tsx"],"names":[],"mappings":""}

package/dts/dots/__figma__/DotStatusColor.figma.d.ts

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

package/dts/dots/__figma__/DotStatusColor.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DotStatusColor.figma.d.ts","sourceRoot":"","sources":["../../../src/dots/__figma__/DotStatusColor.figma.tsx"],"names":[],"mappings":""}

package/dts/dots/__figma__/DotSymbol.figma.d.ts

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

package/dts/dots/__figma__/DotSymbol.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DotSymbol.figma.d.ts","sourceRoot":"","sources":["../../../src/dots/__figma__/DotSymbol.figma.tsx"],"names":[],"mappings":""}

package/dts/dots/__stories__/DotCount.stories.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: React.MemoExoticComponent<({ children, pin, variant, count, max, testID, accessibilityLabel, overlap, className, classNames, style, styles, ...props }: import("..").DotCountProps) => import("react/jsx-runtime").JSX.Element>;
+};
+export default _default;
+export declare const AllDotCount: () => import("react/jsx-runtime").JSX.Element;
+export declare const DotCountPressable: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DotCount.stories.d.ts.map

package/dts/dots/__stories__/DotCount.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DotCount.stories.d.ts","sourceRoot":"","sources":["../../../src/dots/__stories__/DotCount.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;;;;;AAWnD,wBAGE;AAsJF,eAAO,MAAM,WAAW,+CAYvB,CAAC;AAEF,eAAO,MAAM,iBAAiB,+CA0B7B,CAAC"}

package/dts/dots/__stories__/DotStatusColor.stories.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: React.MemoExoticComponent<({ variant, pin, size, overlap, children, testID, accessibilityLabel, ...props }: import("..").DotStatusColorProps) => import("react/jsx-runtime").JSX.Element>;
+};
+export default _default;
+export declare const AllDotStatusColor: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DotStatusColor.stories.d.ts.map

package/dts/dots/__stories__/DotStatusColor.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DotStatusColor.stories.d.ts","sourceRoot":"","sources":["../../../src/dots/__stories__/DotStatusColor.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;AAS1B,wBAGE;AAwFF,eAAO,MAAM,iBAAiB,+CAU7B,CAAC"}

package/dts/dots/__stories__/DotSymbol.stories.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: React.MemoExoticComponent<({ children, symbol, pin, source, iconName, size, active, testID, overlap, color, background, borderColor, style, className, iconStyle, iconClassName, imageStyle, imageClassName, accessibilityLabel, ...props }: import("..").DotSymbolProps) => import("react/jsx-runtime").JSX.Element>;
+};
+export default _default;
+export declare const AllDotSymbol: () => import("react/jsx-runtime").JSX.Element;
+export declare const CustomSymbol: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DotSymbol.stories.d.ts.map

package/dts/dots/__stories__/DotSymbol.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DotSymbol.stories.d.ts","sourceRoot":"","sources":["../../../src/dots/__stories__/DotSymbol.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;AAa1B,wBAGE;AAoJF,eAAO,MAAM,YAAY,+CAUxB,CAAC;AAEF,eAAO,MAAM,YAAY,+CAMxB,CAAC"}

package/dts/dots/__tests__/DotCount.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=DotCount.test.d.ts.map

package/dts/dots/__tests__/DotCount.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DotCount.test.d.ts","sourceRoot":"","sources":["../../../src/dots/__tests__/DotCount.test.tsx"],"names":[],"mappings":""}

package/dts/dots/__tests__/DotStatusColor.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=DotStatusColor.test.d.ts.map

package/dts/dots/__tests__/DotStatusColor.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DotStatusColor.test.d.ts","sourceRoot":"","sources":["../../../src/dots/__tests__/DotStatusColor.test.tsx"],"names":[],"mappings":""}

package/dts/dots/__tests__/DotSymbol.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=DotSymbol.test.d.ts.map

package/dts/dots/__tests__/DotSymbol.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DotSymbol.test.d.ts","sourceRoot":"","sources":["../../../src/dots/__tests__/DotSymbol.test.tsx"],"names":[],"mappings":""}

package/dts/dots/__tests__/getTransform.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=getTransform.test.d.ts.map

package/dts/dots/__tests__/getTransform.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getTransform.test.d.ts","sourceRoot":"","sources":["../../../src/dots/__tests__/getTransform.test.tsx"],"names":[],"mappings":""}

package/dts/dots/dotStyles.d.ts

@@ -0,0 +1,15 @@
+import type { DotOverlap } from '@coinbase/cds-common/types/DotBaseProps';
+import type { PinPlacement } from '@coinbase/cds-common/types/Placement';
+export declare const getTransform: (pin?: PinPlacement, overlap?: DotOverlap) => {
+    readonly position?: undefined;
+    readonly transform?: undefined;
+    readonly translateX?: undefined;
+    readonly translateY?: undefined;
+} | {
+    readonly [x: string]: 0 | "absolute" | `translate(${number}%, ${number}%)` | `${number}%`;
+    readonly position: "absolute";
+    readonly transform: `translate(${number}%, ${number}%)`;
+    readonly translateX: `${number}%`;
+    readonly translateY: `${number}%`;
+};
+//# sourceMappingURL=dotStyles.d.ts.map

package/dts/dots/dotStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dotStyles.d.ts","sourceRoot":"","sources":["../../src/dots/dotStyles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yCAAyC,CAAC;AAC1E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AAEzE,eAAO,MAAM,YAAY,GAAI,MAAM,YAAY,EAAE,UAAU,UAAU;;;;;;;;;;;CAiCpE,CAAC"}

package/dts/dots/index.d.ts

@@ -0,0 +1,4 @@
+export * from './DotCount';
+export * from './DotStatusColor';
+export * from './DotSymbol';
+//# sourceMappingURL=index.d.ts.map

package/dts/dots/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/dots/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC"}

package/dts/dropdown/Dropdown.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { DropdownRef } from './DropdownProps';
+export declare const DROPDOWN_MAX_HEIGHT = 300;
+export declare const Dropdown: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
+    enableMobileModal?: boolean;
+    disableCloseOnOptionChange?: boolean;
+    value?: string;
+    width?: React.CSSProperties["width"];
+    minWidth?: React.CSSProperties["minWidth"];
+    maxWidth?: React.CSSProperties["maxWidth"];
+    maxHeight?: React.CSSProperties["maxHeight"];
+    onOpenMenu?: () => void;
+    onCloseMenu?: () => void;
+    onBlur?: () => void;
+    disablePortal?: boolean;
+    onChange?: ((newValue: string) => void) | React.Dispatch<React.SetStateAction<string>>;
+    disabled?: boolean;
+    restoreFocusOnUnmount?: boolean;
+} & Pick<import("../overlays").PopoverProps, "children" | "content" | "block" | "disableTypeFocus" | "respectNegativeTabIndex" | "controlledElementAccessibilityProps" | "showOverlay" | "contentPosition"> & import("@coinbase/cds-common").SharedProps & Pick<import("@coinbase/cds-common").SharedAccessibilityProps, "accessibilityLabel" | "accessibilityLabelledBy" | "accessibilityHint"> & React.RefAttributes<DropdownRef>>>;
+//# sourceMappingURL=Dropdown.d.ts.map

package/dts/dropdown/Dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../src/dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAWf,OAAO,KAAK,EAAwC,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGzF,eAAO,MAAM,mBAAmB,MAAM,CAAC;AAoMvC,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;qaAsDpB,CAAC"}