@coinbase/cds-web 0.0.0 → 8.13.2

package/esm/overlays/FocusTrap.js

@@ -0,0 +1,201 @@
+import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import { FOCUSABLE_ELEMENTS } from '@coinbase/cds-common/tokens/overlays';
+import { debounce } from '@coinbase/cds-common/utils/debounce';
+import { getBrowserGlobals } from '../utils/browser';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+const DEBOUNCE_MS = 50;
+const NAVIGATION_KEYS = ['Tab', 'ArrowDown', 'ArrowUp', 'Home', 'End'];
+const ALPHABET_KEYS = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
+const FOCUSABLE_ELEMENTS_INCLUDING_TABINDEX = "".concat(FOCUSABLE_ELEMENTS, ", [tabindex]");
+export const FocusTrap = /*#__PURE__*/memo(function FocusTrap(_ref) {
+  var _previouslyFocusedEle, _getBrowserGlobals;
+  let {
+    children,
+    onEscPress,
+    disableTypeFocus,
+    disableFocusTrap,
+    disableAutoFocus,
+    respectNegativeTabIndex,
+    focusTabIndexElements,
+    autoFocusDelay,
+    restoreFocusOnUnmount
+  } = _ref;
+  const isFocused = useRef(false);
+  const childrenRef = useRef(null);
+  const previouslyFocusedElement = useRef(null);
+  (_previouslyFocusedEle = previouslyFocusedElement.current) !== null && _previouslyFocusedEle !== void 0 ? _previouslyFocusedEle : previouslyFocusedElement.current = (_getBrowserGlobals = getBrowserGlobals()) === null || _getBrowserGlobals === void 0 || (_getBrowserGlobals = _getBrowserGlobals.document) === null || _getBrowserGlobals === void 0 ? void 0 : _getBrowserGlobals.activeElement;
+
+  // Restore focus when the trap is unmounted
+  useEffect(() => {
+    return () => {
+      var _document;
+      if (restoreFocusOnUnmount && previouslyFocusedElement.current && previouslyFocusedElement.current !== ((_document = document) === null || _document === void 0 ? void 0 : _document.activeElement)) {
+        previouslyFocusedElement.current.focus();
+      }
+    };
+  }, [restoreFocusOnUnmount]);
+
+  /** START KEYSTROKE HISTORY
+   * Track keystrokes with a short memory */
+  const keystrokeHistory = useRef('');
+  const debouncedKeystrokeReset = useMemo(() => debounce(() => {
+    keystrokeHistory.current = '';
+  }, DEBOUNCE_MS), []);
+  const updateKeystrokeHistory = useCallback(key => {
+    // Update the keystroke history
+    keystrokeHistory.current = keystrokeHistory.current.concat(key);
+    debouncedKeystrokeReset();
+  }, [debouncedKeystrokeReset]);
+  /** END KEYSTROKE HISTORY */
+
+  // trap focus for accessibility
+  const handleKeyboardNavigation = useCallback((event, element) => {
+    var _getBrowserGlobals2;
+    const document = (_getBrowserGlobals2 = getBrowserGlobals()) === null || _getBrowserGlobals2 === void 0 ? void 0 : _getBrowserGlobals2.document;
+    const activeElement = document === null || document === void 0 ? void 0 : document.activeElement;
+    if (!element || !document) return;
+    let focusableElements = Array.from(element.querySelectorAll(focusTabIndexElements ? FOCUSABLE_ELEMENTS_INCLUDING_TABINDEX : FOCUSABLE_ELEMENTS));
+    if (respectNegativeTabIndex) {
+      focusableElements = focusableElements.filter(element => !((element === null || element === void 0 ? void 0 : element.tabIndex) < 0));
+    }
+    const menuItems = element.querySelectorAll('[role="menuitem"]');
+    const isMenuItem = activeElement && Array.from(menuItems).includes(activeElement);
+    if (focusableElements.length === 0) return;
+    const firstElement = focusableElements[0];
+    const lastElement = focusableElements[focusableElements.length - 1];
+    const activeElementIndex = activeElement ? focusableElements.indexOf(activeElement) : undefined;
+
+    // bring focus inside modal
+    if (!isFocused.current &&
+    // check if focus is inside modal
+    !focusableElements.includes(activeElement)) {
+      // don't focus if arrow keys are used, instead allow scroll via keyboard
+      if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+        return;
+      }
+      firstElement.focus();
+      isFocused.current = true;
+      event.preventDefault();
+    }
+    if (event.key === 'Tab') {
+      event.preventDefault();
+    }
+    if (isMenuItem && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
+      event.preventDefault();
+    }
+    const focusPrevElement = () => {
+      if (activeElementIndex) {
+        const previousElement = focusableElements[activeElementIndex - 1];
+        previousElement.focus();
+      }
+    };
+
+    // force active element to loop back to beginning of list
+    const handleLastElement = () => {
+      if (!event.shiftKey && event.key === 'Tab' || event.key === 'ArrowDown' && isMenuItem) {
+        firstElement.focus();
+        return;
+      }
+      if (event.key === 'ArrowUp' && isMenuItem || event.shiftKey && event.key === 'Tab') {
+        focusPrevElement();
+      }
+    };
+    const handleFirstElement = () => {
+      // force active element to loop back to end of list
+      if (event.shiftKey && event.key === 'Tab' || event.key === 'ArrowUp' && isMenuItem) {
+        lastElement.focus();
+        return;
+      }
+      if (event.key === 'ArrowDown' && isMenuItem || event.key === 'Tab') {
+        focusableElements[1].focus();
+      }
+    };
+    if (event.key === 'Home') {
+      event.preventDefault();
+      firstElement.focus();
+      return;
+    }
+    if (event.key === 'End') {
+      event.preventDefault();
+      lastElement.focus();
+      return;
+    }
+    if (!disableTypeFocus && isMenuItem && ALPHABET_KEYS.includes(event.key)) {
+      event.preventDefault();
+      const elementWithMatchingFirstLetter = focusableElements.find(el => {
+        var _el$textContent;
+        const textContentFirstLetter = (_el$textContent = el.textContent) === null || _el$textContent === void 0 || (_el$textContent = _el$textContent.at(0)) === null || _el$textContent === void 0 ? void 0 : _el$textContent.toLowerCase();
+        const eventKeyLowerCase = event.key.toLowerCase();
+        return textContentFirstLetter === eventKeyLowerCase;
+      });
+      if (elementWithMatchingFirstLetter) {
+        elementWithMatchingFirstLetter.focus();
+      }
+    }
+    if (activeElement === lastElement) {
+      handleLastElement();
+      return;
+    }
+    if (activeElement === firstElement) {
+      handleFirstElement();
+      return;
+    }
+    if ((event.key === 'ArrowDown' && isMenuItem || event.key === 'Tab') && activeElementIndex) {
+      const nextElement = focusableElements[activeElementIndex + 1];
+      nextElement.focus();
+    }
+    if ((event.key === 'ArrowUp' && isMenuItem || event.key === 'Tab' && event.shiftKey) && activeElementIndex) {
+      focusPrevElement();
+    }
+  }, [focusTabIndexElements, disableTypeFocus, respectNegativeTabIndex]);
+  const handleKeyDown = useCallback(event => {
+    // Update the keystroke history
+    updateKeystrokeHistory(event.key);
+    if (!disableFocusTrap && (NAVIGATION_KEYS.includes(event.key) || ALPHABET_KEYS.includes(event.key))) {
+      handleKeyboardNavigation(event, childrenRef.current);
+    }
+
+    // Swallow the event, in case someone is listening on the body.
+    event.stopPropagation();
+  }, [updateKeystrokeHistory, disableFocusTrap, handleKeyboardNavigation]);
+  const handleKeyUp = useCallback(event => {
+    if (event.key === 'Escape') {
+      void (onEscPress === null || onEscPress === void 0 ? void 0 : onEscPress());
+      isFocused.current = false;
+    }
+  }, [onEscPress]);
+  useEffect(() => {
+    var _getBrowserGlobals3, _getBrowserGlobals4;
+    (_getBrowserGlobals3 = getBrowserGlobals()) === null || _getBrowserGlobals3 === void 0 || _getBrowserGlobals3.window.addEventListener('keydown', handleKeyDown);
+    (_getBrowserGlobals4 = getBrowserGlobals()) === null || _getBrowserGlobals4 === void 0 || _getBrowserGlobals4.window.addEventListener('keyup', handleKeyUp);
+    return () => {
+      var _getBrowserGlobals5, _getBrowserGlobals6;
+      (_getBrowserGlobals5 = getBrowserGlobals()) === null || _getBrowserGlobals5 === void 0 || _getBrowserGlobals5.window.removeEventListener('keydown', handleKeyDown);
+      (_getBrowserGlobals6 = getBrowserGlobals()) === null || _getBrowserGlobals6 === void 0 || _getBrowserGlobals6.window.removeEventListener('keyup', handleKeyUp);
+    };
+  }, [handleKeyDown, handleKeyUp]);
+  useEffect(() => {
+    var _getBrowserGlobals7;
+    const document = (_getBrowserGlobals7 = getBrowserGlobals()) === null || _getBrowserGlobals7 === void 0 ? void 0 : _getBrowserGlobals7.document;
+    const elements = childrenRef.current;
+    if (!document || !elements || disableAutoFocus) {
+      return;
+    }
+    const focusableElements = elements.querySelectorAll(FOCUSABLE_ELEMENTS);
+    if (focusableElements !== null && focusableElements !== void 0 && focusableElements.length) {
+      const elementToAutoFocus = focusableElements[0];
+      if (typeof autoFocusDelay !== 'number') elementToAutoFocus.focus();else setTimeout(() => elementToAutoFocus.focus(), autoFocusDelay);
+    }
+  }, [disableAutoFocus, autoFocusDelay]);
+
+  // only works for single child
+  const onlyChild = React.Children.only(children);
+  if (!onlyChild) {
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: children
+    });
+  }
+  return /*#__PURE__*/React.cloneElement(children, {
+    ref: childrenRef
+  });
+});

package/esm/overlays/FullscreenAlert.css

@@ -0,0 +1,3 @@
+@layer cds{.centerContentCss-c1uepcpp{height:100%;-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;margin-inline-start:0px;}
+.actionsContainerCss-a13dr4a7{gap:var(--space-3);-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;width:100%;}@media only screen and (min-width:560px){.actionsContainerCss-a13dr4a7{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;width:auto;}}
+.primaryContentCss-p1scz3m2{height:100%;}@media only screen and (min-width:560px){.primaryContentCss-p1scz3m2{height:auto;}}}

package/esm/overlays/FullscreenAlert.js

@@ -0,0 +1,96 @@
+import { memo, useMemo } from 'react';
+import { Button } from '../buttons';
+import { useA11yLabels } from '../hooks/useA11yLabels';
+import { HeroSquare } from '../illustrations';
+import { Box } from '../layout/Box';
+import { VStack } from '../layout/VStack';
+import { breakpoints } from '../styles/media';
+import { Text } from '../typography/Text';
+import { FullscreenModal } from './modal/FullscreenModal';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const centerContentCss = "centerContentCss-c1uepcpp";
+const actionsContainerCss = "actionsContainerCss-a13dr4a7";
+const primaryContentCss = "primaryContentCss-p1scz3m2";
+export const FullscreenAlert = /*#__PURE__*/memo(function FullscreenAlert(_ref) {
+  let {
+    visible,
+    onRequestClose,
+    title,
+    body,
+    heroSquare,
+    preferredActionLabel,
+    onPreferredActionPress,
+    preferredActionVariant,
+    dismissActionLabel,
+    onDismissActionPress,
+    disablePortal,
+    accessibilityLabel,
+    accessibilityLabelledBy,
+    testID,
+    closeAccessibilityLabel
+  } = _ref;
+  const {
+    labelledBySource,
+    labelledBy,
+    label
+  } = useA11yLabels({
+    accessibilityLabelledBy,
+    accessibilityLabel
+  });
+  const primaryContent = useMemo(() => /*#__PURE__*/_jsxs(VStack, {
+    alignItems: "center",
+    height: "100%",
+    justifyContent: "space-between",
+    children: [/*#__PURE__*/_jsxs(VStack, {
+      alignItems: "center",
+      paddingBottom: 4,
+      children: [!!heroSquare && /*#__PURE__*/_jsx(HeroSquare, {
+        name: heroSquare
+      }), /*#__PURE__*/_jsx(Box, {
+        paddingBottom: 1,
+        paddingTop: 3,
+        children: /*#__PURE__*/_jsx(Text, {
+          as: "h3",
+          display: "block",
+          font: "title3",
+          id: labelledBySource,
+          textAlign: "center",
+          children: title
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        as: "p",
+        color: "fgMuted",
+        display: "block",
+        font: "body",
+        textAlign: "center",
+        children: body
+      })]
+    }), /*#__PURE__*/_jsxs(Box, {
+      className: actionsContainerCss,
+      children: [!!dismissActionLabel && /*#__PURE__*/_jsx(Button, {
+        onClick: onDismissActionPress,
+        variant: "secondary",
+        children: dismissActionLabel
+      }), /*#__PURE__*/_jsx(Button, {
+        onClick: onPreferredActionPress,
+        variant: preferredActionVariant,
+        children: preferredActionLabel
+      })]
+    })]
+  }), [body, dismissActionLabel, heroSquare, labelledBySource, onDismissActionPress, onPreferredActionPress, preferredActionLabel, preferredActionVariant, title]);
+  return /*#__PURE__*/_jsx(FullscreenModal, {
+    hideDivider: true,
+    accessibilityLabel: label,
+    accessibilityLabelledBy: labelledBy,
+    closeAccessibilityLabel: closeAccessibilityLabel,
+    contentContainerClassName: centerContentCss,
+    disablePortal: disablePortal,
+    onRequestClose: onRequestClose,
+    primaryContent: primaryContent,
+    primaryContentClassName: primaryContentCss,
+    role: "alertdialog",
+    testID: testID,
+    visible: visible
+  });
+});
+import "./FullscreenAlert.css";

package/esm/overlays/Portal.js

@@ -0,0 +1,24 @@
+import React, { memo } from 'react';
+import { createPortal } from 'react-dom';
+import { useTheme } from '../hooks/useTheme';
+import { ThemeProvider } from '../system/ThemeProvider';
+import { isSSR } from '../utils/browser';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+export const Portal = /*#__PURE__*/memo(function Portal(_ref) {
+  let {
+    disablePortal,
+    children,
+    containerId = ''
+  } = _ref;
+  const theme = useTheme();
+  if (disablePortal || isSSR() || !document.getElementById(containerId)) {
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: children
+    });
+  }
+  return /*#__PURE__*/createPortal(/*#__PURE__*/_jsx(ThemeProvider, {
+    activeColorScheme: theme.activeColorScheme,
+    theme: theme,
+    children: children
+  }), document.getElementById(containerId));
+});

package/esm/overlays/PortalProvider.js

@@ -0,0 +1,109 @@
+var _getBrowserGlobals;
+import React, { memo, useEffect, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { PortalContext } from '@coinbase/cds-common/overlays/PortalContext';
+import { ToastProvider } from '@coinbase/cds-common/overlays/ToastProvider';
+import { usePortal } from '@coinbase/cds-common/overlays/usePortal';
+import { usePortalState } from '@coinbase/cds-common/overlays/usePortalState';
+import { zIndex } from '@coinbase/cds-common/tokens/zIndex';
+import { IsoHexagonClipPath } from '../media/Hexagon';
+import { BrowserOnly } from '../system/BrowserOnly';
+import { getBrowserGlobals } from '../utils/browser';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export const portalRootId = 'portalRoot';
+export const modalContainerId = 'modalsContainer';
+export const alertContainerId = 'alertsContainer';
+export const toastContainerId = 'toastsContainer';
+export const tooltipContainerId = 'tooltipContainer';
+export const trayContainerId = 'trayContainer';
+const safeDocument = (_getBrowserGlobals = getBrowserGlobals()) === null || _getBrowserGlobals === void 0 ? void 0 : _getBrowserGlobals.document;
+export const PortalHost = /*#__PURE__*/memo(() => {
+  const portalRoot = useMemo(
+  // prevent duplicate portal root
+  () => safeDocument === null || safeDocument === void 0 ? void 0 : safeDocument.createElement('div'), []);
+  useEffect(() => {
+    const target = safeDocument === null || safeDocument === void 0 ? void 0 : safeDocument.body;
+
+    // prevent duplicate host
+    if (safeDocument !== null && safeDocument !== void 0 && safeDocument.getElementById(portalRootId) || !portalRoot) return undefined;
+    portalRoot.id = portalRootId;
+    portalRoot.style.zIndex = zIndex.portal.toString();
+    // enable stack order
+    portalRoot.style.position = 'relative';
+    // enable stack order on children
+    portalRoot.style.display = 'flex';
+
+    // Append element to dom
+    target === null || target === void 0 || target.appendChild(portalRoot);
+
+    // Avoid removing child from other provider
+    // This happens when multiple PortalProvider are defined
+    return () => {
+      // Remove element from dom
+      portalRoot.remove();
+    };
+  }, [portalRoot]);
+  if (!portalRoot) return null;
+  return /*#__PURE__*/createPortal(/*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("div", {
+      "data-testid": "portal-modal-container",
+      id: modalContainerId,
+      style: {
+        zIndex: zIndex.modal
+      }
+    }), /*#__PURE__*/_jsx("div", {
+      "data-testid": "portal-toast-container",
+      id: toastContainerId,
+      style: {
+        zIndex: zIndex.toast
+      }
+    }), /*#__PURE__*/_jsx("div", {
+      "data-testid": "portal-alert-container",
+      id: alertContainerId,
+      style: {
+        zIndex: zIndex.alert
+      }
+    }), /*#__PURE__*/_jsx("div", {
+      "data-testid": "portal-tooltip-container",
+      id: tooltipContainerId,
+      style: {
+        zIndex: zIndex.tooltip
+      }
+    }), /*#__PURE__*/_jsx("div", {
+      "data-testid": "portal-tray-container",
+      id: trayContainerId,
+      style: {
+        zIndex: zIndex.tray
+      }
+    })]
+  }), portalRoot);
+});
+export const PortalProvider = /*#__PURE__*/memo(_ref => {
+  let {
+    children,
+    toastBottomOffset = 0,
+    renderPortals = true
+  } = _ref;
+  const portalState = usePortalState();
+  return /*#__PURE__*/_jsx(PortalContext.Provider, {
+    value: portalState,
+    children: /*#__PURE__*/_jsxs(ToastProvider, {
+      toastBottomOffset: toastBottomOffset,
+      children: [renderPortals && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(BrowserOnly, {
+          children: /*#__PURE__*/_jsx(PortalHost, {})
+        }), portalState.nodes.map(node => node.element)]
+      }), children, /*#__PURE__*/_jsx(IsoHexagonClipPath, {})]
+    })
+  });
+});
+export const PortalNodes = () => {
+  const {
+    nodes
+  } = usePortal();
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(BrowserOnly, {
+      children: /*#__PURE__*/_jsx(PortalHost, {})
+    }), nodes.map(node => node.element)]
+  });
+};

package/esm/overlays/Toast.css

@@ -0,0 +1,2 @@
+@layer cds{.baseCss-b10fl3zt{position:fixed;left:0;width:100%;pointer-events:none;}
+.toastCss-tzee9px{pointer-events:all;}}

package/esm/overlays/Toast.js

@@ -0,0 +1,135 @@
+const _excluded = ["text", "action", "onWillHide", "onDidHide", "disablePortal", "hideCloseButton", "testID", "bottomOffset", "closeButtonAccessibilityProps", "variant"];
+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, useContext, useEffect, useImperativeHandle } from 'react';
+import { animateInBottomConfig, animateInOpacityConfig, animateOutBottomConfig, animateOutOpacityConfig } from '@coinbase/cds-common/animation/toast';
+import { ToastContext } from '@coinbase/cds-common/overlays/ToastProvider';
+import { m as motion, useAnimation } from 'framer-motion';
+import { Button } from '../buttons/Button';
+import { IconButton } from '../buttons/IconButton';
+import { Box } from '../layout/Box';
+import { HStack } from '../layout/HStack';
+import { ColorSurge } from '../motion/ColorSurge';
+import { useMotionProps } from '../motion/useMotionProps';
+import { Text } from '../typography/Text';
+import { Portal } from './Portal';
+import { toastContainerId } from './PortalProvider';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Note: ensure any updates here are reflected in the jsdoc above
+const closeButtonAccessibilityDefaults = {
+  accessibilityLabel: 'close'
+};
+const baseCss = "baseCss-b10fl3zt";
+const toastCss = "toastCss-tzee9px";
+export const toastTestId = 'cds-toast';
+export const Toast = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  var _action$testID;
+  let {
+      text,
+      action,
+      onWillHide,
+      onDidHide,
+      disablePortal = false,
+      hideCloseButton = false,
+      testID = toastTestId,
+      bottomOffset = 'var(--space-4)',
+      closeButtonAccessibilityProps = closeButtonAccessibilityDefaults,
+      variant
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const {
+    pauseTimer,
+    resumeTimer
+  } = useContext(ToastContext);
+  const animationControls = useAnimation();
+  const motionProps = useMotionProps({
+    enterConfigs: [animateInOpacityConfig, animateInBottomConfig],
+    exitConfigs: [animateOutOpacityConfig, animateOutBottomConfig],
+    animate: animationControls,
+    style: {
+      bottom: bottomOffset
+    }
+  });
+  useEffect(() => {
+    void animationControls.start('enter');
+  }, [animationControls]);
+  const handleClose = useCallback(async () => {
+    onWillHide === null || onWillHide === void 0 || onWillHide();
+    await animationControls.start('exit');
+    onDidHide === null || onDidHide === void 0 || onDidHide();
+    return true;
+  }, [onWillHide, onDidHide, animationControls]);
+  useImperativeHandle(ref, () => ({
+    hide: handleClose
+  }), [handleClose]);
+  const handleActionPress = useCallback(() => {
+    action === null || action === void 0 || action.onPress();
+    void handleClose();
+  }, [action, handleClose]);
+  return /*#__PURE__*/_jsx(Portal, {
+    containerId: toastContainerId,
+    disablePortal: disablePortal,
+    children: /*#__PURE__*/_jsx(motion.div, _objectSpread(_objectSpread({}, motionProps), {}, {
+      className: baseCss,
+      "data-testid": "".concat(testID, "-motion"),
+      children: /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
+        justifyContent: "center",
+        onMouseEnter: pauseTimer // persist toast when hovering
+        ,
+        onMouseLeave: resumeTimer,
+        padding: 2,
+        role: "alert",
+        testID: testID,
+        width: "100%"
+      }, props), {}, {
+        children: /*#__PURE__*/_jsxs(HStack, {
+          alignItems: "center",
+          background: "bgAlternate",
+          borderRadius: 200,
+          className: toastCss,
+          elevation: 2,
+          maxWidth: 550,
+          overflow: "hidden",
+          paddingEnd: 1,
+          paddingStart: 3,
+          paddingY: 1,
+          position: "relative",
+          children: [/*#__PURE__*/_jsx(Box, {
+            flexShrink: 1,
+            paddingEnd: 2,
+            paddingY: 1,
+            children: /*#__PURE__*/_jsx(Text, {
+              as: "p",
+              display: "block",
+              font: "headline",
+              tabIndex: 0,
+              children: text
+            })
+          }), /*#__PURE__*/_jsx(ColorSurge, {
+            background: variant
+          }), /*#__PURE__*/_jsxs(HStack, {
+            children: [!!action && /*#__PURE__*/_jsx(Button, {
+              compact: true,
+              transparent: true,
+              onClick: handleActionPress,
+              testID: (_action$testID = action.testID) !== null && _action$testID !== void 0 ? _action$testID : 'toast-action',
+              children: action.label
+            }), !hideCloseButton && /*#__PURE__*/_jsx(IconButton, _objectSpread({
+              transparent: true,
+              name: "close",
+              onClick: handleClose,
+              testID: "".concat(testID, "-close-button"),
+              variant: "foregroundMuted"
+            }, closeButtonAccessibilityProps))]
+          })]
+        })
+      }))
+    }))
+  });
+}));
+import "./Toast.css";

package/esm/overlays/__figma__/Alert.figma.js

@@ -0,0 +1,37 @@
+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 _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
+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 from 'react';
+import { figma } from '@figma/code-connect';
+import { Alert } from '../Alert';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(Alert, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=35-698&m=dev', {
+  imports: ["import { Alert } from '@coinbase/cds-web/overlays/Alert'"],
+  props: {
+    body: figma.string('body'),
+    title: figma.string('title'),
+    pictogram: figma.boolean('illustration', {
+      true: figma.instance('spotsquare'),
+      false: undefined
+    }),
+    dismissActionLabel: figma.enum('footer', {
+      'single action': '',
+      stacked: 'Button'
+    }),
+    preferredActionVariant: figma.enum('type', {
+      default: 'primary',
+      destructive: 'negative'
+    })
+  },
+  // @ts-expect-error pictogram mapping issue
+  example: _ref => {
+    let props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+    return /*#__PURE__*/_jsx(Alert, _objectSpread(_objectSpread({}, props), {}, {
+      preferredActionLabel: "Button"
+    }));
+  }
+});

package/esm/overlays/__figma__/Toast.figma.js

@@ -0,0 +1,51 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import React, { useCallback } from 'react';
+import { figma } from '@figma/code-connect';
+import { Button } from '../../buttons';
+import { PortalProvider } from '../PortalProvider';
+import { Toast } from '../Toast';
+import { useToast } from '../useToast';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(Toast, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=8500%3A674', {
+  imports: ["import { useToast } from '@coinbase/cds-web/overlays/useToast';"],
+  props: {
+    hideCloseButton: figma.boolean('close', {
+      true: undefined,
+      false: true
+    }),
+    content: figma.nestedProps('string.toast', {
+      string: figma.enum('Ready-made', {
+        Custom: figma.string('string'),
+        Transaction: figma.textContent('toast-label'),
+        'Copied to clipboard': figma.textContent('toast-label'),
+        Reward: figma.textContent('toast-label')
+      })
+    }),
+    action: figma.boolean('action', {
+      true: {
+        label: 'Button',
+        onPress: () => {}
+      },
+      false: undefined
+    })
+  },
+  example: () => {
+    const toast = useToast();
+    const handleShowToast = useCallback(() => {
+      toast.show('Toast content', {
+        action: {
+          label: 'Action',
+          onPress: () => {}
+        },
+        onWillHide: () => {},
+        onDidHide: () => {}
+      });
+    }, [toast]);
+    return /*#__PURE__*/_jsx(PortalProvider, {
+      children: /*#__PURE__*/_jsx(Button, {
+        onClick: handleShowToast,
+        children: "Show Toast"
+      })
+    });
+  }
+});