@coinbase/cds-mobile 0.0.0 → 8.13.2

package/esm/dates/DateInput.js

@@ -0,0 +1,107 @@
+const _excluded = ["date", "onChangeDate", "error", "onErrorDate", "required", "separator", "minDate", "maxDate", "requiredError", "invalidDateError", "disabledDateError", "start", "end", "placeholder", "helperText", "variant", "onBlur", "onChange", "onEndEditing", "testIDMap", "style"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+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 = '/',
+      minDate,
+      maxDate,
+      requiredError,
+      invalidDateError,
+      disabledDateError,
+      start,
+      end,
+      placeholder,
+      helperText,
+      variant,
+      onBlur,
+      onChange,
+      onEndEditing,
+      testIDMap,
+      style
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_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,
+    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(event);
+    if (!required || !hasTyped.current) return;
+    const error = validateDateInput(inputValue);
+    if (error) onErrorDate(error);
+  }, [onBlur, required, validateDateInput, inputValue, onErrorDate]);
+  const handleEndEditing = useCallback(event => {
+    onEndEditing == null || onEndEditing(event);
+    if (!required || !hasTyped.current) return;
+    const error = validateDateInput(inputValue);
+    if (error) onErrorDate(error);
+  }, [onEndEditing, required, validateDateInput, inputValue, onErrorDate]);
+  const handleChange = useCallback(event => {
+    hasTyped.current = true;
+    onChange == null || onChange(event);
+    onChangeDateInput(event.nativeEvent.text);
+  }, [onChange, onChangeDateInput]);
+  return /*#__PURE__*/_jsx(VStack, {
+    minWidth: 164,
+    style: style,
+    width: "100%",
+    children: /*#__PURE__*/_jsx(TextInput, _extends({
+      ref: ref
+    }, props, {
+      end: end,
+      helperText: helperText || (error == null ? void 0 : error.message) || intlDateFormat.dateStringFormat,
+      keyboardType: "number-pad",
+      onBlur: handleBlur,
+      onChange: handleChange,
+      onEndEditing: handleEndEditing,
+      placeholder: placeholder || defaultPlaceholder,
+      returnKeyType: "done",
+      start: start,
+      testIDMap: testIDMap,
+      value: inputValue,
+      variant: variant || (error ? 'negative' : undefined)
+    }))
+  });
+}));

package/esm/dates/DatePicker.js

@@ -0,0 +1,119 @@
+const _excluded = ["date", "onChangeDate", "error", "onErrorDate", "required", "disabled", "seedDate", "minDate", "maxDate", "requiredError", "invalidDateError", "disabledDateError", "label", "accessibilityLabel", "accessibilityLabelledBy", "calendarIconButtonAccessibilityLabel", "dateInputStyle", "compact", "variant", "helperText", "onOpen", "onClose", "onConfirm", "onCancel", "onChange"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+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, useState } from 'react';
+import { View } from 'react-native';
+import NativeDatePicker from 'react-native-date-picker';
+import { InputIconButton } from '../controls/InputIconButton';
+import { VStack } from '../layout/VStack';
+import { DateInput } from './DateInput';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const DatePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      date,
+      onChangeDate,
+      error,
+      onErrorDate,
+      required,
+      disabled,
+      seedDate,
+      minDate,
+      maxDate,
+      requiredError = 'This field is required',
+      invalidDateError = 'Please enter a valid date',
+      disabledDateError = 'Date unavailable',
+      label,
+      accessibilityLabel,
+      accessibilityLabelledBy,
+      calendarIconButtonAccessibilityLabel,
+      dateInputStyle,
+      compact,
+      variant,
+      helperText,
+      onOpen,
+      onClose,
+      onConfirm,
+      onCancel,
+      onChange
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const [showNativePicker, setShowNativePicker] = useState(false);
+  const dateInputRef = useRef(null);
+  const today = useMemo(() => new Date(), []);
+
+  /**
+   * Be careful to preserve the correct event orders
+   *   1. Selecting a date with the native picker:                onOpen -> onConfirm -> onChangeDate -> onErrorDate -> onClose
+   *   2. Closing the native picker 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 handleOpenNativePicker = useCallback(() => {
+    onOpen == null || onOpen();
+    setShowNativePicker(true);
+  }, [onOpen]);
+  const handleCloseNativePicker = useCallback(() => {
+    onClose == null || onClose();
+    setShowNativePicker(false);
+  }, [onClose]);
+  const handleConfirmNativePicker = useCallback(date => {
+    var _dateInputRef$current;
+    onConfirm == null || onConfirm();
+    onChangeDate(date);
+    if (error && error.type !== 'custom') onErrorDate(null);
+    handleCloseNativePicker();
+    (_dateInputRef$current = dateInputRef.current) == null || _dateInputRef$current.focus();
+  }, [onChangeDate, onConfirm, error, onErrorDate, handleCloseNativePicker]);
+  const handleCancelNativePicker = useCallback(() => {
+    onCancel == null || onCancel();
+    handleCloseNativePicker();
+  }, [onCancel, handleCloseNativePicker]);
+  const dateInputCalendarButton = useMemo(() => /*#__PURE__*/_jsx(VStack, {
+    paddingEnd: 0.5,
+    children: /*#__PURE__*/_jsx(InputIconButton, {
+      disableInheritFocusStyle: true,
+      transparent: true,
+      accessibilityLabel: calendarIconButtonAccessibilityLabel != null ? calendarIconButtonAccessibilityLabel : showNativePicker ? 'Close calendar' : 'Open calendar',
+      name: "calendarEmpty",
+      onPress: handleOpenNativePicker,
+      variant: "secondary"
+    })
+  }), [handleOpenNativePicker, showNativePicker, calendarIconButtonAccessibilityLabel]);
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    children: [/*#__PURE__*/_jsx(DateInput, _extends({
+      ref: dateInputRef
+    }, props, {
+      accessibilityLabel: accessibilityLabel,
+      accessibilityLabelledBy: accessibilityLabelledBy,
+      compact: compact,
+      date: date,
+      disabled: disabled,
+      disabledDateError: disabledDateError,
+      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
+    })), showNativePicker && /*#__PURE__*/_jsx(NativeDatePicker, {
+      modal: true,
+      date: date || seedDate || today,
+      maximumDate: maxDate,
+      minimumDate: minDate,
+      mode: "date",
+      onCancel: handleCancelNativePicker,
+      onConfirm: handleConfirmNativePicker,
+      open: showNativePicker
+    })]
+  });
+}));

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

@@ -0,0 +1,43 @@
+const _excluded = ["helperText"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+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; }
+/* eslint-disable react-hooks/rules-of-hooks */
+
+import React, { 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-mobile/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: _ref => {
+    let {
+        helperText
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_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, _extends({
+      date: date,
+      error: error,
+      helperText: helperText.string,
+      onChangeDate: handleChangeDate,
+      onErrorDate: handleErrorDate
+    }, props));
+  }
+});

package/esm/dates/__stories__/DateInput.stories.js

@@ -0,0 +1,68 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useState } from 'react';
+import { LocaleProvider } from '@coinbase/cds-common/system/LocaleProvider';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { Icon } from '../../icons';
+import { Group } from '../../layout/Group';
+import { ThemeProvider } from '../../system/ThemeProvider';
+import { defaultTheme } from '../../themes/defaultTheme';
+import { DateInput } from '../DateInput';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const today = new Date(new Date(2024, 7, 18).setHours(0, 0, 0, 0));
+const oneDayAgo = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 1);
+const sharedProps = {
+  invalidDateError: 'Please enter a valid date',
+  disabledDateError: 'Date unavailable',
+  requiredError: 'This field is required'
+};
+export const Examples = () => {
+  const [date, setDate] = useState(today);
+  const [error, setError] = useState(null);
+  const props = {
+    date,
+    onChangeDate: setDate,
+    error,
+    onErrorDate: setError
+  };
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsx(Example, {
+      children: /*#__PURE__*/_jsxs(Group, {
+        gap: 8,
+        paddingEnd: 8,
+        children: [/*#__PURE__*/_jsx(DateInput, _extends({}, sharedProps, props)), /*#__PURE__*/_jsx(LocaleProvider, {
+          locale: "ES-es",
+          children: /*#__PURE__*/_jsx(DateInput, _extends({}, sharedProps, props))
+        }), /*#__PURE__*/_jsx(ThemeProvider, {
+          activeColorScheme: "dark",
+          theme: defaultTheme,
+          children: /*#__PURE__*/_jsx(DateInput, _extends({}, sharedProps, props))
+        }), /*#__PURE__*/_jsx(DateInput, _extends({
+          compact: true
+        }, sharedProps, props)), /*#__PURE__*/_jsx(DateInput, _extends({}, sharedProps, props, {
+          maxDate: today,
+          minDate: oneDayAgo
+        })), /*#__PURE__*/_jsx(DateInput, _extends({}, sharedProps, props, {
+          separator: "-"
+        })), /*#__PURE__*/_jsx(DateInput, _extends({}, sharedProps, props, {
+          end: /*#__PURE__*/_jsx(Icon, {
+            active: true,
+            name: "camera",
+            padding: 2,
+            size: "m"
+          }),
+          placeholder: "Hello world",
+          start: /*#__PURE__*/_jsx(Icon, {
+            name: "blockchain",
+            padding: 2,
+            size: "m"
+          })
+        })), /*#__PURE__*/_jsx(DateInput, _extends({
+          disabled: true
+        }, sharedProps, props)), /*#__PURE__*/_jsx(DateInput, _extends({
+          required: true
+        }, sharedProps, props))]
+      })
+    })
+  });
+};
+export default Examples;

package/esm/dates/__stories__/DatePicker.stories.js

@@ -0,0 +1,34 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useState } from 'react';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { DatePicker } from '../DatePicker';
+import { jsx as _jsx } from "react/jsx-runtime";
+const today = new Date(new Date(2024, 7, 18).setHours(0, 0, 0, 0));
+const nextMonth15th = new Date(today.getFullYear(), today.getMonth() + 1, 15);
+const lastMonth15th = new Date(today.getFullYear(), today.getMonth() - 1, 15);
+const exampleProps = {
+  maxDate: nextMonth15th,
+  minDate: lastMonth15th,
+  invalidDateError: 'Please enter a valid date',
+  disabledDateError: 'Date unavailable',
+  requiredError: 'This field is required'
+};
+export const FullExample = () => {
+  const [date, setDate] = useState(null);
+  const [error, setError] = useState(null);
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsx(Example, {
+      children: /*#__PURE__*/_jsx(DatePicker, _extends({
+        required: true
+      }, exampleProps, {
+        calendarIconButtonAccessibilityLabel: "Birthdate calendar",
+        date: date,
+        error: error,
+        label: "Birthdate",
+        onChangeDate: setDate,
+        onErrorDate: setError
+      }))
+    })
+  });
+};
+export default FullExample;

package/esm/dots/DotCount.js

@@ -0,0 +1,140 @@
+const _excluded = ["children", "pin", "variant", "count", "max", "overlap", "style", "styles"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+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, useEffect, useMemo, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import Animated, { runOnJS, useAnimatedReaction, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
+import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
+import { dotOpacityEnterConfig, dotOpacityExitConfig, dotScaleEnterConfig, dotScaleExitConfig } from '@coinbase/cds-common/motion/dot';
+import { dotCountSize } from '@coinbase/cds-common/tokens/dot';
+import { useDotPinStyles } from '../hooks/useDotPinStyles';
+import { useTheme } from '../hooks/useTheme';
+import { convertMotionConfigs } from '../motion/convertMotionConfig';
+import { withMotionTiming } from '../motion/withMotionTiming';
+import { Text } from '../typography/Text';
+import { getTransform } from './dotStyles';
+import { useDotsLayout } from './useDotsLayout';
+
+// If a badge count is greater than max (optional, defaults at 99), it should
+// truncate the numbers so its x+.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const MAX_OVERFLOW_COUNT = 99;
+export const parseDotCountMaxOverflow = function (count, max) {
+  if (max === void 0) {
+    max = MAX_OVERFLOW_COUNT;
+  }
+  return count <= max ? count : max + "+";
+};
+const [opacityEnter, opacityExit, scaleEnter, scaleExit] = convertMotionConfigs([dotOpacityEnterConfig, dotOpacityExitConfig, dotScaleEnterConfig, dotScaleExitConfig]);
+const dotTextPaddingHorizontal = 6;
+const variantColorMap = {
+  negative: 'bgNegative'
+};
+export const DotCount = /*#__PURE__*/memo(_ref => {
+  let {
+      children,
+      pin,
+      variant = 'negative',
+      count,
+      max,
+      overlap,
+      style,
+      styles
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const theme = useTheme();
+  const [childrenSize, onChildrenLayout] = useDotsLayout();
+  const transforms = useDotPinStyles(childrenSize, {
+    width: dotCountSize + dotTextPaddingHorizontal,
+    height: dotCountSize
+  }, overlap);
+  const opacityAnimatedValue = useSharedValue(opacityEnter.fromValue);
+  const scaleAnimatedValue = useSharedValue(scaleEnter.fromValue);
+  const [shouldUnmount, setShouldUnmount] = useState(count === 0);
+  const [countInternal, setCountInternal] = useState(count);
+  const prevCount = usePreviousValue(count);
+  const pinStyles = useMemo(() => {
+    if (pin && transforms !== null) {
+      const [vertical, horizontal] = pin.split('-');
+      return getTransform(transforms[horizontal], transforms[vertical]);
+    }
+    return {};
+  }, [pin, transforms]);
+  const containerStyles = useMemo(() => {
+    return [styleSheet.container, {
+      borderColor: theme.color.bgSecondary,
+      backgroundColor: theme.color[variantColorMap[variant]]
+    }];
+  }, [theme.color, variant]);
+
+  // avoid displaying 0 during animations and preserve exit animation
+  useEffect(() => {
+    if (count !== 0) {
+      setCountInternal(count);
+    }
+  }, [count]);
+  useAnimatedReaction(() => count, result => {
+    // play enter animation
+    if ((prevCount === 0 || prevCount === undefined) && result > 0) {
+      runOnJS(setShouldUnmount)(false);
+      opacityAnimatedValue.value = withMotionTiming(opacityEnter);
+      scaleAnimatedValue.value = withMotionTiming(scaleEnter);
+    }
+
+    // play exit animation
+    if (prevCount && prevCount > 0 && result === 0) {
+      opacityAnimatedValue.value = withMotionTiming(opacityExit, () => {
+        runOnJS(setShouldUnmount)(true);
+      });
+      scaleAnimatedValue.value = withMotionTiming(scaleExit);
+    }
+  }, [count, childrenSize]);
+  const animatedStyles = useAnimatedStyle(() => {
+    return {
+      opacity: Number(opacityAnimatedValue.value),
+      transform: [{
+        scale: Number(scaleAnimatedValue.value)
+      }]
+    };
+  });
+  const dotCountContainerStyle = useMemo(() => [containerStyles, animatedStyles, styles == null ? void 0 : styles.container], [containerStyles, animatedStyles, styles == null ? void 0 : styles.container]);
+  const textStyles = useMemo(() => [{
+    paddingHorizontal: dotTextPaddingHorizontal
+  }, styles == null ? void 0 : styles.text], [styles == null ? void 0 : styles.text]);
+  const rootStyles = useMemo(() => [style, styles == null ? void 0 : styles.root], [styles == null ? void 0 : styles.root, style]);
+
+  // only check childrenSize when children is defined
+  const shouldShow = children !== undefined ? childrenSize !== null : true;
+  return /*#__PURE__*/_jsxs(View, _extends({
+    style: rootStyles
+  }, props, {
+    children: [/*#__PURE__*/_jsx(View, {
+      onLayout: onChildrenLayout,
+      testID: props.testID + "-children",
+      children: children
+    }), !shouldUnmount && shouldShow && /*#__PURE__*/_jsx(View, {
+      style: pinStyles,
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        style: dotCountContainerStyle,
+        testID: "dotcount-container",
+        children: /*#__PURE__*/_jsx(Text, {
+          color: "fgInverse",
+          font: "caption",
+          style: textStyles,
+          children: parseDotCountMaxOverflow(countInternal, max)
+        })
+      })
+    })]
+  }));
+});
+const styleSheet = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    display: 'flex',
+    borderWidth: 1,
+    minWidth: dotCountSize,
+    height: dotCountSize,
+    borderRadius: 16
+  }
+});

package/esm/dots/DotStatusColor.js

@@ -0,0 +1,61 @@
+const _excluded = ["variant", "pin", "size", "children", "overlap"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+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 { View } from 'react-native';
+import { useDotPinStyles } from '../hooks/useDotPinStyles';
+import { useTheme } from '../hooks/useTheme';
+import { getTransform } from './dotStyles';
+import { useDotsLayout } from './useDotsLayout';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const variantColorMap = {
+  primary: 'bgPrimary',
+  foregroundMuted: 'fgMuted',
+  positive: 'bgPositive',
+  warning: 'bgWarning',
+  negative: 'bgNegative'
+};
+export const DotStatusColor = /*#__PURE__*/memo(_ref => {
+  let {
+      variant,
+      pin,
+      size = 's',
+      children,
+      overlap
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const theme = useTheme();
+  const iconSize = theme.iconSize[size];
+  const [childrenSize, onLayout] = useDotsLayout();
+  const transforms = useDotPinStyles(childrenSize, iconSize, overlap);
+  const pinStyles = useMemo(() => {
+    if (pin && transforms !== null) {
+      const [vertical, horizontal] = pin.split('-');
+      return getTransform(transforms[horizontal], transforms[vertical]);
+    }
+    return {};
+  }, [pin, transforms]);
+  const dotContentStyles = useMemo(() => {
+    return _extends({
+      borderRadius: theme.borderRadius[1000],
+      width: iconSize,
+      height: iconSize,
+      backgroundColor: theme.color[variantColorMap[variant]],
+      alignItems: 'center',
+      justifyContent: 'center'
+    }, pinStyles);
+  }, [iconSize, theme.color, theme.borderRadius, pinStyles, variant]);
+
+  // only check childrenSize when children is defined
+  const shouldShow = children !== undefined ? childrenSize !== null : true;
+  return /*#__PURE__*/_jsxs(View, _extends({}, props, {
+    children: [/*#__PURE__*/_jsx(View, {
+      onLayout: onLayout,
+      testID: props.testID + "-children",
+      children: children
+    }), shouldShow && /*#__PURE__*/_jsx(View, {
+      style: dotContentStyles,
+      testID: "dotstatuscolor-inner-container"
+    })]
+  }));
+});

package/esm/dots/DotSymbol.js

@@ -0,0 +1,101 @@
+const _excluded = ["children", "symbol", "pin", "source", "overlap", "iconName", "size", "active", "color", "background", "borderColor", "style", "iconStyle", "imageStyle"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+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 { View } from 'react-native';
+import { useDotPinStyles } from '../hooks/useDotPinStyles';
+import { useTheme } from '../hooks/useTheme';
+import { Icon } from '../icons/Icon';
+import { Box } from '../layout/Box';
+import { RemoteImage } from '../media/RemoteImage';
+import { getTransform } from './dotStyles';
+import { useDotsLayout } from './useDotsLayout';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const DotSymbol = /*#__PURE__*/memo(_ref => {
+  let {
+      children,
+      symbol,
+      pin,
+      source,
+      overlap,
+      iconName,
+      size = 's',
+      active,
+      color = 'fgInverse',
+      background = 'bgPrimary',
+      borderColor = 'bgSecondary',
+      style,
+      iconStyle,
+      imageStyle
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const theme = useTheme();
+  const iconSize = theme.iconSize[size];
+  const [childrenSize, onChildrenLayout] = useDotsLayout();
+  const dotIsIcon = iconName !== undefined;
+  const transforms = useDotPinStyles(childrenSize, dotIsIcon ?
+  // iconSize + border + spacing
+  iconSize + 4 + 4 : iconSize, overlap);
+  const pinStyles = useMemo(() => {
+    if (pin && transforms !== null) {
+      const [vertical, horizontal] = pin.split('-');
+      return getTransform(transforms[horizontal], transforms[vertical]);
+    }
+    return {};
+  }, [pin, transforms]);
+
+  // TODO: These should be tokens, i don't know what the name
+  // of the token will be called though. No design direction yet
+  const imageBorderStyle = useMemo(() => {
+    return {
+      borderColor: theme.color[borderColor],
+      borderWidth: 1
+    };
+  }, [theme.color, borderColor]);
+
+  // TODO: These should be tokens, i don't know what the name
+  // of the token will be called though. No design direction yet
+  const iconBorderStyle = useMemo(() => {
+    return {
+      borderWidth: 2
+    };
+  }, []);
+
+  // only check childrenSize when children is defined
+  const shouldShow = children !== undefined ? childrenSize !== null : true;
+  return /*#__PURE__*/_jsxs(View, _extends({}, props, {
+    style: style,
+    children: [/*#__PURE__*/_jsx(View, {
+      onLayout: onChildrenLayout,
+      testID: props.testID + "-children",
+      children: children
+    }), shouldShow && /*#__PURE__*/_jsxs(View, {
+      style: pinStyles,
+      testID: "dotsymbol-inner-container",
+      children: [source !== undefined && /*#__PURE__*/_jsx(RemoteImage, {
+        darkModeEnhancementsApplied: true,
+        height: iconSize,
+        resizeMode: "cover",
+        shape: "circle",
+        source: typeof source === 'string' ? {
+          uri: source
+        } : source,
+        style: [imageBorderStyle, imageStyle],
+        testID: "dotsymbol-remote-image",
+        width: iconSize
+      }), iconName !== undefined && /*#__PURE__*/_jsx(Box, {
+        background: background,
+        borderColor: borderColor,
+        borderRadius: 1000,
+        padding: 0.5,
+        style: [iconBorderStyle, iconStyle],
+        children: /*#__PURE__*/_jsx(Icon, {
+          active: active,
+          color: color,
+          name: iconName,
+          size: size
+        })
+      }), symbol]
+    })]
+  }));
+});