@coinbase/cds-web 0.0.0 → 8.13.1

package/esm/overlays/modal/ModalWrapper.js

@@ -0,0 +1,77 @@
+const _excluded = ["alignItems", "aria-modal", "children", "visible", "disablePortal", "disableOverlayPress", "dangerouslyDisableResponsiveness", "height", "justifyContent", "position", "pin", "onOverlayPress", "onDidClose", "hideOverlay", "role", "width"];
+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, useEffect } from 'react';
+import { NewAnimatePresence } from '../../animation/NewAnimatePresence';
+import { cx } from '../../cx';
+import { useScrollBlocker } from '../../hooks/useScrollBlocker';
+import { Box } from '../../layout/Box';
+import { media } from '../../styles/media';
+import { Overlay } from '../overlay/Overlay';
+import { Portal } from '../Portal';
+import { modalContainerId } from '../PortalProvider';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const modalOverlayResponsiveCss = "modalOverlayResponsiveCss-msg6e82";
+export const ModalWrapper = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      alignItems = 'center',
+      'aria-modal': ariaModal,
+      children,
+      visible = false,
+      disablePortal = false,
+      disableOverlayPress = false,
+      dangerouslyDisableResponsiveness = false,
+      height = '100vh',
+      justifyContent = 'center',
+      position = 'fixed',
+      pin = 'all',
+      onOverlayPress,
+      onDidClose,
+      hideOverlay = false,
+      role = 'dialog',
+      width = '100vw'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const blockScroll = useScrollBlocker();
+
+  // prevent body scroll when modal is open
+  useEffect(() => {
+    blockScroll(visible);
+    return () => {
+      blockScroll(false);
+    };
+  }, [visible, blockScroll]);
+  return /*#__PURE__*/_jsx(NewAnimatePresence, {
+    onExitComplete: onDidClose,
+    children: !!visible && /*#__PURE__*/_jsx(Portal, {
+      containerId: modalContainerId,
+      disablePortal: disablePortal,
+      children: /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
+        ref: ref,
+        alignItems: alignItems,
+        "aria-modal": ariaModal !== null && ariaModal !== void 0 ? ariaModal : 'true',
+        height: height,
+        justifyContent: justifyContent,
+        pin: pin,
+        position: position,
+        role: role,
+        width: width
+      }, props), {}, {
+        children: /*#__PURE__*/_jsxs(_Fragment, {
+          children: [!hideOverlay && /*#__PURE__*/_jsx(Overlay, {
+            animated: true,
+            className: cx(!dangerouslyDisableResponsiveness && modalOverlayResponsiveCss),
+            onClick: !disableOverlayPress ? onOverlayPress : undefined,
+            testID: "modal-overlay"
+          }), children]
+        })
+      }))
+    })
+  });
+}));
+import "./ModalWrapper.css";

package/esm/overlays/modal/__figma__/FullscreenModal.figma.css

@@ -0,0 +1 @@
+.FullscreenModal-f10q9hg9{margin-inline-start:auto;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}

package/esm/overlays/modal/__figma__/FullscreenModal.figma.js

@@ -0,0 +1,104 @@
+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 { useCallback, useRef, useState } from 'react';
+import { figma } from '@figma/code-connect';
+import { Button } from '../../../buttons';
+import { FullscreenModal } from '../FullscreenModal';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+figma.connect(FullscreenModal, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=302%3A20262', {
+  imports: ["import { FullscreenModal } from '@coinbase/cds-web/overlays/Modal/FullscreenModal';"],
+  variant: {
+    layout: 'primary + secondary'
+  },
+  props: {
+    showSecondaryContentDivider: figma.boolean('show divider'),
+    secondaryContent: figma.instance('🔄 secondary content'),
+    primaryContent: figma.instance('🔄 primary content')
+  },
+  example: function Example(props) {
+    const [visible, setVisible] = useState(true);
+    const triggerRef = useRef(null);
+    const focusTrigger = useCallback(() => {
+      var _triggerRef$current;
+      (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.focus();
+    }, []);
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        ref: triggerRef,
+        onClick: () => setVisible(true),
+        children: "Open Modal"
+      }), /*#__PURE__*/_jsx(FullscreenModal, _objectSpread({
+        onDidClose: focusTrigger,
+        onRequestClose: () => setVisible(false),
+        title: "Modal title",
+        visible: visible
+      }, props))]
+    });
+  }
+});
+figma.connect(FullscreenModal, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=302%3A20262', {
+  imports: ["import { FullscreenModal } from '@coinbase/cds-web/overlays/Modal/FullscreenModal';"],
+  variant: {
+    layout: 'primary left aligned'
+  },
+  props: {
+    showSecondaryContentDivider: figma.boolean('show divider'),
+    primaryContent: figma.instance('🔄 primary content')
+  },
+  example: function Example(props) {
+    const [visible, setVisible] = useState(true);
+    const triggerRef = useRef(null);
+    const focusTrigger = useCallback(() => {
+      var _triggerRef$current2;
+      (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 || _triggerRef$current2.focus();
+    }, []);
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        ref: triggerRef,
+        onClick: () => setVisible(true),
+        children: "Open Modal"
+      }), /*#__PURE__*/_jsx(FullscreenModal, _objectSpread({
+        onDidClose: focusTrigger,
+        onRequestClose: () => setVisible(false),
+        title: "Modal title",
+        visible: visible
+      }, props))]
+    });
+  }
+});
+figma.connect(FullscreenModal, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=302%3A20262', {
+  imports: ["import { FullscreenModal } from '@coinbase/cds-web/overlays/Modal/FullscreenModal';"],
+  variant: {
+    layout: 'primary centered'
+  },
+  props: {
+    showSecondaryContentDivider: figma.boolean('show divider'),
+    secondaryContent: figma.instance('🔄 secondary content'),
+    primaryContent: figma.instance('🔄 primary content')
+  },
+  example: function Example(props) {
+    const [visible, setVisible] = useState(true);
+    const triggerRef = useRef(null);
+    const focusTrigger = useCallback(() => {
+      var _triggerRef$current3;
+      (_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 || _triggerRef$current3.focus();
+    }, []);
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        ref: triggerRef,
+        onClick: () => setVisible(true),
+        children: "Open Modal"
+      }), /*#__PURE__*/_jsx(FullscreenModal, _objectSpread({
+        contentContainerClassName: "FullscreenModal-f10q9hg9",
+        onDidClose: focusTrigger,
+        onRequestClose: () => setVisible(false),
+        title: "Modal title",
+        visible: visible
+      }, props))]
+    });
+  }
+});
+import "./FullscreenModal.figma.css";

package/esm/overlays/modal/__figma__/Modal.figma.js

@@ -0,0 +1,81 @@
+const _excluded = ["modalHeader", "modalFooter", "children"];
+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 { useCallback, useRef, useState } from 'react';
+import { figma } from '@figma/code-connect';
+import { Button } from '../../../buttons';
+import { Modal } from '../Modal';
+import { ModalBody } from '../ModalBody';
+import { ModalFooter } from '../ModalFooter';
+import { ModalHeader } from '../ModalHeader';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+figma.connect(Modal, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=68-1065&m=dev', {
+  imports: ["import { Modal } from '@coinbase/cds-web/overlays/Modal/Modal';", "import { ModalHeader } from '@coinbase/cds-web/overlays/Modal/ModalHeader';", "import { ModalFooter } from '@coinbase/cds-web/overlays/Modal/ModalFooter';", "import { ModalBody } from '@coinbase/cds-web/overlays/Modal/ModalBody';"],
+  props: {
+    modalHeader: figma.nestedProps('.Modal Header', {
+      // onBackButtonPress: figma.boolean('show back button', {
+      //   true: () => {},
+      //   false: undefined,
+      // }),
+      title: figma.boolean('show title', {
+        true: figma.string('title'),
+        false: undefined
+      })
+    }),
+    modalFooter: figma.nestedProps('.Modal Footer', {
+      secondaryAction: figma.boolean('show secondary', {
+        true: /*#__PURE__*/_jsx(Button, {
+          variant: "secondary",
+          children: "Button"
+        }),
+        false: undefined
+      })
+    }),
+    children: figma.instance('🔄 replace me'),
+    hideDividers: figma.enum('height defined by', {
+      content: true,
+      container: undefined
+    })
+  },
+  example: function Example(_ref) {
+    let {
+        modalHeader,
+        modalFooter,
+        children
+      } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+    const [visible, setVisible] = useState(true);
+    const triggerRef = useRef(null);
+    const focusTrigger = useCallback(() => {
+      var _triggerRef$current;
+      (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.focus();
+    }, []);
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        ref: triggerRef,
+        onClick: () => setVisible(true),
+        children: "Open Modal"
+      }), /*#__PURE__*/_jsxs(Modal, _objectSpread(_objectSpread({
+        onDidClose: focusTrigger,
+        onRequestClose: () => setVisible(false),
+        visible: visible
+      }, props), {}, {
+        children: [/*#__PURE__*/_jsx(ModalHeader, {
+          title: modalHeader.title
+        }), /*#__PURE__*/_jsx(ModalBody, {
+          children: children
+        }), /*#__PURE__*/_jsx(ModalFooter, {
+          primaryAction: /*#__PURE__*/_jsx(Button, {
+            children: "Button"
+          }),
+          secondaryAction: modalFooter.secondaryAction
+        })]
+      }))]
+    });
+  }
+});

package/esm/overlays/overlay/Overlay.js

@@ -0,0 +1,21 @@
+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 } from 'react';
+import { OverlayContentContext } from '@coinbase/cds-common/overlays/OverlayContentContext';
+import { OverlayContent } from './OverlayContent';
+import { jsx as _jsx } from "react/jsx-runtime";
+const overlayContentContextValue = {
+  isOverlay: true
+};
+export const Overlay = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((props, forwardedRef) => {
+  return /*#__PURE__*/_jsx(OverlayContentContext.Provider, {
+    value: overlayContentContextValue,
+    children: /*#__PURE__*/_jsx(OverlayContent, _objectSpread({
+      ref: forwardedRef
+    }, props))
+  });
+}));
+Overlay.displayName = 'Overlay';

package/esm/overlays/overlay/OverlayContent.js

@@ -0,0 +1,38 @@
+const _excluded = ["onClick", "animated"];
+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 } from 'react';
+import { animateInOpacityConfig, animateOutOpacityConfig } from '@coinbase/cds-common/animation/overlay';
+import { m as motion } from 'framer-motion';
+import { VStack } from '../../layout/VStack';
+import { useMotionProps } from '../../motion/useMotionProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const OverlayContent = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
+  let {
+      onClick,
+      animated = false
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const motionProps = useMotionProps({
+    enterConfigs: [animateInOpacityConfig],
+    exitConfigs: [animateOutOpacityConfig],
+    exit: 'exit'
+  });
+  const content = /*#__PURE__*/_jsx(VStack, _objectSpread(_objectSpread({
+    background: "bgOverlay",
+    onClick: onClick,
+    pin: "all"
+  }, props), {}, {
+    ref: forwardedRef
+  }));
+  return animated ? /*#__PURE__*/_jsx(motion.div, _objectSpread(_objectSpread({}, motionProps), {}, {
+    "data-testid": "".concat(props.testID, "-motion"),
+    children: content
+  })) : content;
+});
+OverlayContent.displayName = 'OverlayContent';

package/esm/overlays/popover/Popover.css

@@ -0,0 +1,2 @@
+.subjectCss-s1cgr9z4{background-color:transparent;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:default;}
+.blockCss-b13rnbro{width:100%;}

package/esm/overlays/popover/Popover.js

@@ -0,0 +1,147 @@
+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); }
+/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
+import React, { memo, useCallback, useMemo } from 'react';
+import { zIndex } from '@coinbase/cds-common/tokens/zIndex';
+import { NewAnimatePresence } from '../../animation/NewAnimatePresence';
+import { cx } from '../../cx';
+import { Box } from '../../layout/Box';
+import { InvertedThemeProvider } from '../../system/ThemeProvider';
+import { FocusTrap } from '../FocusTrap';
+import { Overlay } from '../overlay/Overlay';
+import { Portal } from '../Portal';
+import { tooltipContainerId } from '../PortalProvider';
+import { usePopper } from './usePopper';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const subjectCss = "subjectCss-s1cgr9z4";
+const defaultContentPosition = {
+  gap: 0,
+  skid: 0,
+  placement: 'bottom',
+  offsetGap: undefined,
+  strategy: undefined
+};
+const blockCss = "blockCss-b13rnbro";
+
+/**
+ * Popover is the internal recommended base component used for any overlay that is laid out with respect to a subject.
+ * It is purposely a flexible component and is reserved for CDS internal usage.
+ */
+export const Popover = /*#__PURE__*/memo(_ref => {
+  let {
+    content,
+    children,
+    disablePortal,
+    showOverlay = false,
+    onPressSubject,
+    onClose,
+    onMouseEnter,
+    onMouseLeave,
+    onFocus,
+    onBlur,
+    onMouseDown,
+    invertColorScheme,
+    visible,
+    accessibilityLabel = 'popoverMenu',
+    testID,
+    contentPosition = defaultContentPosition,
+    block = false,
+    disabled,
+    disableFocusTrap,
+    disableAutoFocus = false,
+    disableTypeFocus = false,
+    focusTabIndexElements,
+    respectNegativeTabIndex,
+    autoFocusDelay,
+    restoreFocusOnUnmount,
+    controlledElementAccessibilityProps
+  } = _ref;
+  const {
+    setSubject,
+    setPopper,
+    popperStyles,
+    popperAttributes
+  } = usePopper(contentPosition);
+
+  // We use this to infer that hover events are triggering the mounting/dismounting of the content
+  const hasHoverInteractions = !!onMouseEnter && !!onMouseLeave && !onPressSubject;
+  const shouldShowContent = visible && !disabled;
+  const handleClose = useCallback(async () => {
+    onClose === null || onClose === void 0 || onClose();
+    onBlur === null || onBlur === void 0 || onBlur();
+  }, [onBlur, onClose]);
+
+  // swallow click events inside the Popover content so the overlay doesn't consider it a blur event
+  const handleCaptureEvents = useCallback(event => {
+    event.stopPropagation();
+  }, []);
+  const memoizedContent = useMemo(() => /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+    ref: setPopper,
+    style: _objectSpread(_objectSpread({}, popperStyles.popper), {}, {
+      zIndex: zIndex.dropdown
+    })
+  }, popperAttributes.popper), {}, {
+    onClick: handleCaptureEvents,
+    children: /*#__PURE__*/_jsx(FocusTrap, {
+      autoFocusDelay: autoFocusDelay,
+      disableAutoFocus: disableAutoFocus,
+      disableFocusTrap: disableFocusTrap,
+      disableTypeFocus: disableTypeFocus,
+      focusTabIndexElements: focusTabIndexElements,
+      onEscPress: handleClose,
+      respectNegativeTabIndex: respectNegativeTabIndex,
+      restoreFocusOnUnmount: restoreFocusOnUnmount,
+      children: /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
+        background: "transparent",
+        "data-testid": testID
+      }, controlledElementAccessibilityProps), {}, {
+        children: content
+      }))
+    })
+  })), [setPopper, popperStyles.popper, popperAttributes.popper, handleCaptureEvents, handleClose, testID, content, controlledElementAccessibilityProps, disableFocusTrap, disableAutoFocus, disableTypeFocus, focusTabIndexElements, respectNegativeTabIndex, autoFocusDelay, restoreFocusOnUnmount]);
+  const renderContent = hasHoverInteractions ? memoizedContent : /*#__PURE__*/_jsx(Box, {
+    "aria-label": accessibilityLabel,
+    "aria-modal": "true",
+    onClick: handleClose,
+    pin: "all",
+    position: "fixed",
+    role: "dialog",
+    zIndex: zIndex.portal + zIndex.modal,
+    children: memoizedContent
+  });
+  const Wrapper = invertColorScheme ? InvertedThemeProvider : React.Fragment;
+  return /*#__PURE__*/_jsxs("div", {
+    className: block ? blockCss : undefined,
+    onMouseEnter: disabled ? undefined : onMouseEnter,
+    onMouseLeave: disabled ? undefined : onMouseLeave,
+    children: [/*#__PURE__*/_jsx("div", {
+      ref: setSubject,
+      className: cx(subjectCss, block && blockCss),
+      onBlur: onBlur,
+      onClick: disabled ? undefined : onPressSubject,
+      onFocus: disabled ? undefined : onFocus,
+      onMouseDown: disabled ? undefined : onMouseDown,
+      children: children
+    }), /*#__PURE__*/_jsx(NewAnimatePresence, {
+      children: shouldShowContent ? /*#__PURE__*/_jsx(Portal, {
+        containerId: tooltipContainerId,
+        disablePortal: disablePortal,
+        children: /*#__PURE__*/_jsx(Wrapper, {
+          children: showOverlay ? /*#__PURE__*/_jsxs(Box, {
+            pin: "all",
+            position: "fixed",
+            zIndex: zIndex.portal + zIndex.modal,
+            children: [/*#__PURE__*/_jsx(Overlay, {
+              animated: true,
+              onClick: handleClose
+            }), memoizedContent]
+          }) : renderContent
+        })
+      }) : undefined
+    })]
+  });
+});
+import "./Popover.css";

package/esm/overlays/popover/PopoverProps.js

@@ -0,0 +1 @@
+export {};

package/esm/overlays/popover/usePopper.js

@@ -0,0 +1,40 @@
+import { useMemo, useState } from 'react';
+import { usePopper as useExternalPopper } from 'react-popper';
+import { useTheme } from '../../hooks/useTheme';
+export const usePopper = _ref => {
+  let {
+    placement,
+    skid = 0,
+    gap = 0,
+    offsetGap,
+    strategy
+  } = _ref;
+  const [subject, setSubject] = useState(null);
+  const [popper, setPopper] = useState(null);
+  const theme = useTheme();
+  const computedSkid = theme.space[skid];
+  const computedGap = theme.space[gap];
+  const getOffsetGap = offsetGap && gap - offsetGap;
+  const popperOptions = useMemo(() => ({
+    placement,
+    strategy,
+    modifiers: [{
+      name: 'offset',
+      options: {
+        offset: [computedSkid, getOffsetGap !== null && getOffsetGap !== void 0 ? getOffsetGap : computedGap]
+      }
+    }]
+  }), [placement, strategy, computedSkid, getOffsetGap, computedGap]);
+  const {
+    styles: popperStyles,
+    attributes: popperAttributes
+  } = useExternalPopper(subject, popper, popperOptions);
+  return {
+    popper,
+    subject,
+    setSubject,
+    setPopper,
+    popperStyles,
+    popperAttributes
+  };
+};

package/esm/overlays/tooltip/Tooltip.js

@@ -0,0 +1,87 @@
+import React, { cloneElement, useCallback, useMemo, useRef } from 'react';
+import { Popover } from '../popover/Popover';
+import { TooltipContent } from './TooltipContent';
+import { useTooltipState } from './useTooltipState';
+import { jsx as _jsx } from "react/jsx-runtime";
+const preventMouseDown = event => {
+  event.preventDefault();
+  event.stopPropagation();
+};
+export const Tooltip = _ref => {
+  let {
+    children,
+    content,
+    elevation,
+    placement = 'top',
+    gap = 1,
+    disablePortal,
+    testID,
+    zIndex,
+    tooltipId: tooltipIdDefault,
+    visible,
+    invertColorScheme = true,
+    disableFocusTrap,
+    disableAutoFocus,
+    disableTypeFocus,
+    focusTabIndexElements,
+    respectNegativeTabIndex,
+    autoFocusDelay = 20
+  } = _ref;
+  const {
+    isOpen,
+    handleOnMouseEnter,
+    handleOnMouseLeave,
+    handleOnFocus,
+    handleOnBlur,
+    tooltipId
+  } = useTooltipState(tooltipIdDefault);
+  const tooltipContentRef = useRef(null);
+  const handleMouseEnter = useCallback(_ref2 => {
+    let {
+      target
+    } = _ref2;
+    const node = tooltipContentRef.current;
+
+    // to prevent flicker, don't open tooltip if enter event originates from tooltip content
+    if (target instanceof Node && (node === null || node === void 0 ? void 0 : node.parentNode) !== target && !(node !== null && node !== void 0 && node.contains(target))) {
+      handleOnMouseEnter();
+    }
+  }, [handleOnMouseEnter]);
+  const clonedChild = useMemo(() => {
+    return /*#__PURE__*/cloneElement(children, {
+      'aria-describedby': tooltipId
+    });
+  }, [children, tooltipId]);
+  const contentPosition = useMemo(() => ({
+    placement
+  }), [placement]);
+  const isVisible = useMemo(() => visible !== false && isOpen, [visible, isOpen]);
+  return /*#__PURE__*/_jsx(Popover, {
+    autoFocusDelay: autoFocusDelay,
+    content: /*#__PURE__*/_jsx(TooltipContent, {
+      ref: tooltipContentRef,
+      content: content,
+      elevation: elevation,
+      gap: gap,
+      placement: placement,
+      testID: testID,
+      tooltipId: tooltipId,
+      zIndex: zIndex
+    }),
+    contentPosition: contentPosition,
+    disableAutoFocus: disableAutoFocus,
+    disableFocusTrap: disableFocusTrap,
+    disablePortal: disablePortal,
+    disableTypeFocus: disableTypeFocus,
+    focusTabIndexElements: focusTabIndexElements,
+    invertColorScheme: invertColorScheme,
+    onBlur: handleOnBlur,
+    onFocus: handleOnFocus,
+    onMouseDown: preventMouseDown,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleOnMouseLeave,
+    respectNegativeTabIndex: respectNegativeTabIndex,
+    visible: isVisible,
+    children: clonedChild
+  });
+};

package/esm/overlays/tooltip/TooltipContent.css

@@ -0,0 +1 @@
+.textCss-t15dzixe{overflow-wrap:anywhere;}@supports not (overflow-wrap:anywhere){.textCss-t15dzixe{word-break:break-word;overflow-wrap:break-word;}}