@coinbase/cds-web 0.0.0 → 8.13.2

package/esm/dates/DateInput.js

@@ -0,0 +1,108 @@
+const _excluded = ["date", "onChangeDate", "error", "onErrorDate", "required", "separator", "disabledDates", "minDate", "maxDate", "requiredError", "invalidDateError", "disabledDateError", "start", "end", "placeholder", "helperText", "variant", "className", "style", "onClick", "onChange", "onBlur", "testIDMap"];
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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; }
+import React, { forwardRef, memo, useCallback, useMemo, useRef } from 'react';
+import { IntlDateFormat } from '@coinbase/cds-common/dates/IntlDateFormat';
+import { useDateInput } from '@coinbase/cds-common/dates/useDateInput';
+import { useLocale } from '@coinbase/cds-common/system/LocaleProvider';
+import { TextInput } from '../controls/TextInput';
+import { VStack } from '../layout/VStack';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const DateInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      date,
+      onChangeDate,
+      error,
+      onErrorDate,
+      required,
+      separator = '/',
+      disabledDates,
+      minDate,
+      maxDate,
+      requiredError,
+      invalidDateError,
+      disabledDateError,
+      start,
+      end,
+      placeholder,
+      helperText,
+      variant,
+      className,
+      style,
+      onClick,
+      onChange,
+      onBlur,
+      testIDMap
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const hasTyped = useRef(Boolean(date));
+  const {
+    locale
+  } = useLocale();
+  const intlDateFormat = useMemo(() => new IntlDateFormat({
+    locale,
+    separator
+  }), [locale, separator]);
+  const {
+    inputValue,
+    onChangeDateInput,
+    validateDateInput,
+    placeholder: defaultPlaceholder
+  } = useDateInput({
+    date,
+    onChangeDate,
+    error,
+    onErrorDate,
+    intlDateFormat,
+    required,
+    disabledDates,
+    minDate,
+    maxDate,
+    requiredError,
+    invalidDateError,
+    disabledDateError
+  });
+
+  /**
+   * Be careful to preserve the correct event orders
+   *   1. Typing a date in a blank DateInput:                     onChange -> onChange -> ... -> onChangeDate -> onErrorDate
+   *   2. Typing a date in a DateInput that already had a date:   onChange -> onChangeDate -> onChange -> onChange -> ... -> onChangeDate -> onErrorDate
+   */
+
+  const handleBlur = useCallback(event => {
+    onBlur === null || onBlur === void 0 || onBlur(event);
+    if (!required || !hasTyped.current) return;
+    const error = validateDateInput(event.target.value);
+    if (error) onErrorDate(error);
+  }, [onBlur, required, validateDateInput, onErrorDate]);
+  const handleChange = useCallback(event => {
+    hasTyped.current = true;
+    onChange === null || onChange === void 0 || onChange(event);
+    onChangeDateInput(event.target.value);
+  }, [onChange, onChangeDateInput]);
+  return /*#__PURE__*/_jsx(VStack, {
+    className: className,
+    minWidth: 164,
+    style: style,
+    width: "100%",
+    children: /*#__PURE__*/_jsx(TextInput, _objectSpread(_objectSpread({
+      ref: ref
+    }, props), {}, {
+      end: end,
+      helperText: helperText || (error === null || error === void 0 ? void 0 : error.message) || intlDateFormat.dateStringFormat,
+      onBlur: handleBlur,
+      onChange: handleChange,
+      onClick: onClick,
+      placeholder: placeholder || defaultPlaceholder,
+      start: start,
+      testIDMap: testIDMap,
+      value: inputValue,
+      variant: variant || (error ? 'negative' : undefined)
+    }))
+  });
+}));

package/esm/dates/DatePicker.js

@@ -0,0 +1,188 @@
+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", "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; }
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { forwardRef, memo, useCallback, useMemo, useRef, useState } from 'react';
+import { animateDropdownOpacityInConfig, animateDropdownOpacityOutConfig, animateDropdownTransformInConfig, animateDropdownTransformOutConfig } from '@coinbase/cds-common/animation/dropdown';
+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 { VStack } from '../layout/VStack';
+import { getMotionProps } from '../motion/useMotionProps';
+import { Popover } from '../overlays/popover/Popover';
+import { Calendar } from './Calendar';
+import { DateInput } from './DateInput';
+import { jsx as _jsx } from "react/jsx-runtime";
+const MotionVStack = motion(VStack);
+const calendarAnimation = getMotionProps({
+  enterConfigs: [animateDropdownOpacityInConfig, _objectSpread(_objectSpread({}, animateDropdownTransformInConfig), {}, {
+    property: 'y'
+  })],
+  exitConfigs: [animateDropdownOpacityOutConfig, _objectSpread(_objectSpread({}, animateDropdownTransformOutConfig), {}, {
+    property: 'y'
+  })],
+  exit: 'exit'
+});
+const calendarPopoverPosition = {
+  placement: 'bottom-start',
+  offsetGap: 16
+};
+export const DatePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      date,
+      onChangeDate,
+      error,
+      onErrorDate,
+      required,
+      disabled,
+      seedDate,
+      disabledDates,
+      highlightedDates,
+      minDate,
+      maxDate,
+      requiredError = 'This field is required',
+      invalidDateError = 'Please enter a valid date',
+      disabledDateError = 'Date unavailable',
+      label,
+      restoreFocusOnUnmount = true,
+      accessibilityLabel,
+      accessibilityLabelledBy,
+      calendarIconButtonAccessibilityLabel,
+      nextArrowAccessibilityLabel,
+      previousArrowAccessibilityLabel,
+      compact,
+      variant,
+      helperText,
+      showOverlay,
+      defaultOpen = false,
+      calendarStyle,
+      calendarClassName,
+      dateInputStyle,
+      dateInputClassName,
+      onOpen,
+      onClose,
+      onConfirm,
+      onCancel,
+      onChange
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const [showCalendar, setShowCalendar] = useState(defaultOpen);
+  const calendarRef = useRef(null);
+
+  /**
+   * Be careful to preserve the correct event orders
+   *   1. Selecting a date with the Calendar:                     onOpen -> onConfirm -> onChangeDate -> onErrorDate -> onClose
+   *   2. Closing the Calendar without selecting a date:          onOpen -> onCancel -> onClose
+   *   3. Typing a date in a blank DateInput:                     onChange -> onChange -> ... -> onChangeDate -> onErrorDate
+   *   4. Typing a date in a DateInput that already had a date:   onChange -> onChangeDate -> onChange -> onChange -> ... -> onChangeDate -> onErrorDate
+   */
+
+  const handleOpenCalendar = useCallback(event => {
+    event.stopPropagation(); // Prevents DateInput's IconButton click event from propagating to the DateInput's TextInput
+    onOpen === null || onOpen === void 0 || onOpen();
+    setShowCalendar(true);
+    // Handle setting focus after opening the Calendar Popover - defaults to selectedDate, then seedDate, then today, then first of month
+    setTimeout(() => {
+      var _calendarRef$current, _calendarRef$current2;
+      const dateString = getISOStringLocal(date || seedDate || new Date());
+      const element = (_calendarRef$current = calendarRef.current) === null || _calendarRef$current === void 0 ? void 0 : _calendarRef$current.querySelector("[data-calendar-date=\"".concat(dateString, "\"]"));
+      if (element) element.focus();else (_calendarRef$current2 = calendarRef.current) === null || _calendarRef$current2 === void 0 || (_calendarRef$current2 = _calendarRef$current2.querySelector('[data-calendar-date]')) === null || _calendarRef$current2 === void 0 || _calendarRef$current2.focus();
+    }, 10);
+  }, [date, seedDate, onOpen]);
+  const handleCloseCalendar = useCallback(() => {
+    onClose === null || onClose === void 0 || onClose();
+    setShowCalendar(false);
+  }, [onClose]);
+  const handleCancelCalendar = useCallback(() => {
+    onCancel === null || onCancel === void 0 || onCancel();
+    handleCloseCalendar();
+  }, [onCancel, handleCloseCalendar]);
+  const handleConfirmCalendarDate = useCallback(date => {
+    onConfirm === null || onConfirm === void 0 || onConfirm();
+    onChangeDate(date);
+    if (error && error.type !== 'custom') onErrorDate(null);
+    // Wait to close the calendar for a bit, so we can see the selected date change
+    setTimeout(() => {
+      handleCloseCalendar();
+    }, 10);
+  }, [onConfirm, onChangeDate, error, onErrorDate, handleCloseCalendar]);
+  const dateInputCalendarButton = useMemo(() => /*#__PURE__*/_jsx(VStack, {
+    paddingEnd: 0.5,
+    children: /*#__PURE__*/_jsx(InputIconButton, {
+      disableInheritFocusStyle: true,
+      transparent: true,
+      accessibilityLabel: calendarIconButtonAccessibilityLabel !== null && calendarIconButtonAccessibilityLabel !== void 0 ? calendarIconButtonAccessibilityLabel : showCalendar ? 'Close calendar' : 'Open calendar',
+      name: "calendarEmpty",
+      onClick: handleOpenCalendar,
+      variant: "secondary"
+    })
+  }), [handleOpenCalendar, showCalendar, calendarIconButtonAccessibilityLabel]);
+  const dateInput = useMemo(() => /*#__PURE__*/_jsx(DateInput, _objectSpread(_objectSpread({}, props), {}, {
+    accessibilityLabel: accessibilityLabel,
+    accessibilityLabelledBy: accessibilityLabelledBy,
+    className: dateInputClassName,
+    compact: compact,
+    date: date,
+    disabled: disabled,
+    disabledDateError: disabledDateError,
+    disabledDates: disabledDates,
+    end: dateInputCalendarButton,
+    error: error,
+    helperText: helperText,
+    invalidDateError: invalidDateError,
+    label: label,
+    maxDate: maxDate,
+    minDate: minDate,
+    onChange: onChange,
+    onChangeDate: onChangeDate,
+    onErrorDate: onErrorDate,
+    required: required,
+    requiredError: requiredError,
+    style: dateInputStyle,
+    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]);
+  const calendar = useMemo(() => /*#__PURE__*/_jsx(MotionVStack, _objectSpread(_objectSpread({
+    background: true,
+    borderRadius: 400,
+    elevation: 2,
+    overflow: "auto",
+    role: "menu",
+    tabIndex: 0,
+    zIndex: zIndex.dropdown
+  }, calendarAnimation), {}, {
+    children: /*#__PURE__*/_jsx(Calendar, {
+      ref: calendarRef,
+      className: calendarClassName,
+      disabled: disabled,
+      disabledDateError: disabledDateError,
+      disabledDates: disabledDates,
+      highlightedDates: highlightedDates,
+      maxDate: maxDate,
+      minDate: minDate,
+      nextArrowAccessibilityLabel: nextArrowAccessibilityLabel,
+      onPressDate: handleConfirmCalendarDate,
+      previousArrowAccessibilityLabel: previousArrowAccessibilityLabel,
+      seedDate: seedDate,
+      selectedDate: date,
+      style: calendarStyle
+    })
+  })), [date, disabled, seedDate, disabledDates, highlightedDates, minDate, maxDate, disabledDateError, handleConfirmCalendarDate, calendarRef, calendarStyle, calendarClassName, nextArrowAccessibilityLabel, previousArrowAccessibilityLabel]);
+  return /*#__PURE__*/_jsx("div", {
+    ref: ref,
+    children: /*#__PURE__*/_jsx(Popover, {
+      respectNegativeTabIndex: true,
+      content: calendar,
+      contentPosition: calendarPopoverPosition,
+      onClose: handleCancelCalendar,
+      restoreFocusOnUnmount: restoreFocusOnUnmount,
+      showOverlay: showOverlay,
+      visible: showCalendar,
+      children: dateInput
+    })
+  });
+}));

package/esm/dates/__figma__/DatePicker.figma.js

@@ -0,0 +1,46 @@
+const _excluded = ["helperText"];
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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; }
+import { useState } from 'react';
+import { figma } from '@figma/code-connect';
+import { DatePicker } from '../DatePicker';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(DatePicker, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=14743-53206&m=dev', {
+  imports: ["import { DatePicker } from '@coinbase/cds-web/dates/DatePicker';"],
+  props: {
+    disabled: figma.boolean('disabled'),
+    compact: figma.boolean('compact'),
+    label: figma.string('label'),
+    helperText: figma.nestedProps('.assistive text', {
+      string: figma.textContent('Assistive text')
+    })
+  },
+  example: function Example(_ref) {
+    let {
+        helperText
+      } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+    const [date, setDate] = useState(null);
+    const [error, setError] = useState(null);
+    // @ts-expect-error not typed
+    const handleChangeDate = date => {
+      setDate(date);
+    };
+    // @ts-expect-error not typed
+    const handleErrorDate = error => {
+      setError(error);
+    };
+    return /*#__PURE__*/_jsx(DatePicker, _objectSpread({
+      date: date,
+      error: error,
+      helperText: helperText.string,
+      onChangeDate: handleChangeDate,
+      onErrorDate: handleErrorDate
+    }, props));
+  }
+});

package/esm/defaultFontStyles.js

@@ -0,0 +1 @@
+import './styles/defaultFont';

package/esm/dots/DotCount.css

@@ -0,0 +1,2 @@
+@layer cds{.baseCss-b1qqkfau{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;position:relative;}
+.dotCountContentCss-dqpqhs5{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border-width:1px;min-width:24px;height:24px;border-radius:16px;padding-top:3px;padding-bottom:3px;padding-inline-start:6px;padding-inline-end:6px;}}

package/esm/dots/DotCount.js

@@ -0,0 +1,84 @@
+const _excluded = ["children", "pin", "variant", "count", "max", "testID", "accessibilityLabel", "overlap", "className", "classNames", "style", "styles"];
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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; }
+import React, { memo, useMemo } from 'react';
+import { dotOpacityEnterConfig, dotOpacityExitConfig, dotScaleEnterConfig, dotScaleExitConfig } from '@coinbase/cds-common/motion/dot';
+import { dotCountSize } from '@coinbase/cds-common/tokens/dot';
+import { parseDotCountMaxOverflow } from '@coinbase/cds-common/utils/parseDotCountMaxOverflow';
+import { m as motion } from 'framer-motion';
+import { NewAnimatePresence } from '../animation/NewAnimatePresence';
+import { cx } from '../cx';
+import { useTheme } from '../hooks/useTheme';
+import { useMotionProps } from '../motion/useMotionProps';
+import { Text } from '../typography/Text';
+import { getTransform } from './dotStyles';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const baseCss = "baseCss-b1qqkfau";
+const dotCountContentCss = "dotCountContentCss-dqpqhs5";
+const variantColorMap = {
+  negative: 'fgNegative'
+};
+export const DotCount = /*#__PURE__*/memo(_ref => {
+  let {
+      children,
+      pin,
+      variant = 'negative',
+      count,
+      max,
+      testID,
+      accessibilityLabel,
+      overlap,
+      className,
+      classNames,
+      style,
+      styles
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const {
+    color
+  } = useTheme();
+  const pinStyles = getTransform(pin, overlap);
+  const containerStyles = useMemo(() => {
+    const variantColor = variantColorMap[variant];
+    return _objectSpread(_objectSpread({
+      backgroundColor: color[variantColor],
+      borderColor: color.bgSecondary
+    }, pinStyles), styles === null || styles === void 0 ? void 0 : styles.container);
+  }, [color, pinStyles, styles === null || styles === void 0 ? void 0 : styles.container, variant]);
+  const motionProps = useMotionProps({
+    enterConfigs: [dotOpacityEnterConfig, dotScaleEnterConfig],
+    exitConfigs: [dotOpacityExitConfig, dotScaleExitConfig],
+    exit: 'exit'
+  });
+  const rootStyles = useMemo(() => _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root), [styles === null || styles === void 0 ? void 0 : styles.root, style]);
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    "aria-label": accessibilityLabel,
+    className: cx(baseCss, className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
+    "data-testid": testID,
+    style: rootStyles
+  }, props), {}, {
+    children: [children, /*#__PURE__*/_jsx(NewAnimatePresence, {
+      children: count > 0 && /*#__PURE__*/_jsx(motion.div, _objectSpread(_objectSpread({}, motionProps), {}, {
+        className: cx(dotCountContentCss, classNames === null || classNames === void 0 ? void 0 : classNames.container),
+        "data-testid": "dotcount-container",
+        style: containerStyles,
+        children: /*#__PURE__*/_jsx(Text, {
+          as: "p",
+          className: classNames === null || classNames === void 0 ? void 0 : classNames.text,
+          color: "fgInverse",
+          display: "block",
+          font: "caption",
+          style: styles === null || styles === void 0 ? void 0 : styles.text,
+          textAlign: "center",
+          children: parseDotCountMaxOverflow(count, max)
+        })
+      }))
+    })]
+  }));
+});
+import "./DotCount.css";

package/esm/dots/DotStatusColor.css

@@ -0,0 +1 @@
+@layer cds{.baseCss-bai08ur{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;position:relative;}}

package/esm/dots/DotStatusColor.js

@@ -0,0 +1,60 @@
+const _excluded = ["variant", "pin", "size", "overlap", "children", "testID", "accessibilityLabel"];
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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; }
+import React, { memo, useMemo } from 'react';
+import { useTheme } from '../hooks/useTheme';
+import { handlePreventPropagation } from '../utils/eventHandlers';
+import { getTransform } from './dotStyles';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const baseCss = "baseCss-bai08ur";
+const variantColorMap = {
+  primary: 'fgPrimary',
+  positive: 'fgPositive',
+  negative: 'fgNegative',
+  foregroundMuted: 'fgMuted',
+  warning: 'fgWarning'
+};
+export const DotStatusColor = /*#__PURE__*/memo(_ref => {
+  let {
+      variant,
+      pin,
+      size = 's',
+      overlap,
+      children,
+      testID,
+      accessibilityLabel
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const {
+    color
+  } = useTheme();
+  const pinStyles = getTransform(pin, overlap);
+  const styles = useMemo(() => {
+    const variantColor = variantColorMap[variant];
+    return _objectSpread({
+      borderRadius: 'var(--borderRadius-1000)',
+      width: "var(--iconSize-".concat(size, ")"),
+      height: "var(--iconSize-".concat(size, ")"),
+      backgroundColor: color[variantColor],
+      alignItems: 'center',
+      justifyContent: 'center'
+    }, pinStyles);
+  }, [color, pinStyles, size, variant]);
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    "aria-label": accessibilityLabel,
+    className: baseCss,
+    "data-testid": testID
+  }, props), {}, {
+    children: [children, /*#__PURE__*/_jsx("div", {
+      "data-testid": "dotstatuscolor-inner-container",
+      onClick: handlePreventPropagation,
+      style: styles
+    })]
+  }));
+});
+import "./DotStatusColor.css";

package/esm/dots/DotSymbol.css

@@ -0,0 +1,3 @@
+@layer cds{.remoteImageCss-r1kn5cfm{border-color:var(--color-bgSecondary);border-width:1px;}
+.iconContainerCss-i1ydqo2q{border-width:2px;}
+.baseCss-b1pmh90n{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;position:relative;}}

package/esm/dots/DotSymbol.js

@@ -0,0 +1,86 @@
+const _excluded = ["children", "symbol", "pin", "source", "iconName", "size", "active", "testID", "overlap", "color", "background", "borderColor", "style", "className", "iconStyle", "iconClassName", "imageStyle", "imageClassName", "accessibilityLabel"];
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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; }
+import React, { memo } from 'react';
+import { cx } from '../cx';
+import { Icon } from '../icons/Icon';
+import { Box } from '../layout/Box';
+import { RemoteImage } from '../media/RemoteImage';
+import { handlePreventPropagation } from '../utils/eventHandlers';
+import { getTransform } from './dotStyles';
+
+// These widths sizes are using px not
+// spacing because it shouldn't change with density.
+// And spacing doesn't support such small pixel size
+// either
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const remoteImageCss = "remoteImageCss-r1kn5cfm";
+
+// Not using spacing, same as above reasoning
+const iconContainerCss = "iconContainerCss-i1ydqo2q";
+const baseCss = "baseCss-b1pmh90n";
+const aspectRatio = [1, 1];
+export const DotSymbol = /*#__PURE__*/memo(_ref => {
+  let {
+      children,
+      symbol,
+      pin,
+      source,
+      iconName,
+      size = 's',
+      active,
+      testID,
+      overlap,
+      color = 'fgInverse',
+      background = 'fgPrimary',
+      borderColor = 'bgSecondary',
+      style,
+      className,
+      iconStyle,
+      iconClassName,
+      imageStyle,
+      imageClassName,
+      accessibilityLabel
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const pinStyles = getTransform(pin, overlap);
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    "aria-label": accessibilityLabel,
+    className: cx(baseCss, className),
+    "data-testid": testID
+  }, props), {}, {
+    style: style,
+    children: [children, /*#__PURE__*/_jsxs("div", {
+      "data-testid": "dotsymbol-inner-container",
+      onClick: handlePreventPropagation,
+      style: pinStyles,
+      children: [source && /*#__PURE__*/_jsx(RemoteImage, {
+        aspectRatio: aspectRatio,
+        className: cx(remoteImageCss, imageClassName),
+        shape: "circle",
+        source: source,
+        style: imageStyle,
+        width: "var(--iconSize-".concat(size, ")")
+      }), iconName && /*#__PURE__*/_jsx(Box, {
+        background: background,
+        borderColor: borderColor,
+        borderRadius: 1000,
+        className: cx(iconContainerCss, iconClassName),
+        padding: 0.5,
+        style: iconStyle,
+        children: /*#__PURE__*/_jsx(Icon, {
+          active: active,
+          color: color,
+          name: iconName,
+          size: size
+        })
+      }), symbol]
+    })]
+  }));
+});
+import "./DotSymbol.css";

package/esm/dots/__figma__/DotCount.figma.js

@@ -0,0 +1,19 @@
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { figma } from '@figma/code-connect';
+import { DotCount } from '../DotCount';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(DotCount, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=155%3A11976', {
+  imports: ["import { DotCount } from '@coinbase/cds-web/dots/DotCount';"],
+  props: {
+    count: figma.enum('type', {
+      'single digit': 1,
+      '2 digits': 12,
+      '3+ digits': 123
+    })
+  },
+  example: props => /*#__PURE__*/_jsx(DotCount, _objectSpread({}, props))
+});

package/esm/dots/__figma__/DotStatusColor.figma.js

@@ -0,0 +1,27 @@
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from 'react';
+import { figma } from '@figma/code-connect';
+import { DotStatusColor } from '../DotStatusColor';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(DotStatusColor, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=155%3A11983', {
+  imports: ["import { DotStatusColor } from '@coinbase/cds-web/dots/DotStatusColor';"],
+  props: {
+    variant: figma.enum('variant', {
+      positive: 'positive',
+      negative: 'negative',
+      primary: 'primary',
+      foregroundMuted: 'foregroundMuted'
+    }),
+    size: figma.enum('size', {
+      l: 'l',
+      m: 'm',
+      s: 's',
+      xs: 'xs'
+    })
+  },
+  example: props => /*#__PURE__*/_jsx(DotStatusColor, _objectSpread({}, props))
+});