@coinbase/cds-web 0.0.0 → 8.13.2

package/esm/overlays/index.js

@@ -0,0 +1,17 @@
+export * from './Alert';
+export * from './FullscreenAlert';
+export * from './modal/FullscreenModal';
+export * from './modal/FullscreenModalHeader';
+export * from './modal/FullscreenModalLayout';
+export * from './modal/Modal';
+export * from './modal/ModalBody';
+export * from './modal/ModalFooter';
+export * from './modal/ModalHeader';
+export * from './overlay/Overlay';
+export * from './popover/Popover';
+export * from './popover/PopoverProps';
+export * from './popover/usePopper';
+export * from './PortalProvider';
+export * from './Toast';
+export * from './tooltip/Tooltip';
+export * from './tray/Tray';

package/esm/overlays/modal/FullscreenModal.css

@@ -0,0 +1,5 @@
+@layer cds{.primaryContentContainerCss-p1negkxr{margin-bottom:var(--space-4);}@media only screen and (min-width:560px){.primaryContentContainerCss-p1negkxr{max-width:800px;width:100%;}}@media only screen and (min-width:768px){.primaryContentContainerCss-p1negkxr{padding:var(--space-4) 0;margin-inline-end:var(--space-4);margin-bottom:0;}}
+.secondaryContentContainerCss-sfkv6s4{width:100%;}@media only screen and (min-width:560px){.secondaryContentContainerCss-sfkv6s4{max-width:800px;}}@media only screen and (min-width:768px){.secondaryContentContainerCss-sfkv6s4{width:400px;padding:var(--space-4) 0 0 0;}}
+.secondaryContentDividerCss-s9mfox4{padding:var(--space-4) 0 0 0;border-top:1px solid var(--color-bgLine);}@media only screen and (min-width:768px){.secondaryContentDividerCss-s9mfox4{width:calc(400px + var(--space-4));padding:var(--space-4) 0 0 var(--space-4);border-top:0;border-left:1px solid var(--color-bgLine);}}
+.contentScrollContainerCss-cb0slex{overflow:auto;height:100%;}
+.contentCss-c18pcq89{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding:var(--space-4);min-height:100%;}@media only screen and (min-width:560px){.contentCss-c18pcq89{margin-inline-start:80px;}}@media only screen and (min-width:768px){.contentCss-c18pcq89{padding:0 var(--space-4);-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}}@media only screen and (min-width:1280px){.contentCss-c18pcq89{margin-inline-start:240px;}}}

package/esm/overlays/modal/FullscreenModal.js

@@ -0,0 +1,103 @@
+import React, { memo, useMemo } from 'react';
+import { cx } from '../../cx';
+import { useA11yLabels } from '../../hooks/useA11yLabels';
+import { VStack } from '../../layout';
+import { breakpoints } from '../../styles/media';
+import { FullscreenModalHeader } from './FullscreenModalHeader';
+import { FullscreenModalLayout } from './FullscreenModalLayout';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const contentMaxWidth = 800;
+const secondaryContentWidth = 400;
+const paddingStartSmall = 80;
+const paddingStartLarge = 240;
+const primaryContentContainerCss = "primaryContentContainerCss-p1negkxr";
+const secondaryContentContainerCss = "secondaryContentContainerCss-sfkv6s4";
+const secondaryContentDividerCss = "secondaryContentDividerCss-s9mfox4";
+const contentScrollContainerCss = "contentScrollContainerCss-cb0slex";
+const contentCss = "contentCss-c18pcq89";
+export const FullscreenModal = /*#__PURE__*/memo(function FullscreenModal(_ref) {
+  let {
+    focusTabIndexElements,
+    logo,
+    visible,
+    onRequestClose,
+    primaryContent,
+    primaryContentClassName,
+    secondaryContent,
+    secondaryContentClassName,
+    title,
+    testID,
+    zIndex,
+    disablePortal,
+    contentContainerClassName,
+    hideDivider,
+    showSecondaryContentDivider,
+    role,
+    onDidClose,
+    shouldCloseOnEscPress = true,
+    disableFocusTrap,
+    restoreFocusOnUnmount = true,
+    accessibilityLabelledBy,
+    accessibilityLabel,
+    closeAccessibilityLabel,
+    contentStyle
+  } = _ref;
+  const {
+    labelledBySource,
+    labelledBy,
+    label
+  } = useA11yLabels({
+    accessibilityLabelledBy,
+    accessibilityLabel
+  });
+  const content = useMemo(() =>
+  /*#__PURE__*/
+  // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+  _jsx("div", {
+    className: contentScrollContainerCss,
+    tabIndex: 0,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: cx(contentCss, contentContainerClassName),
+      style: contentStyle
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+      ,
+      tabIndex: 0,
+      children: [/*#__PURE__*/_jsx("div", {
+        className: cx(primaryContentContainerCss, primaryContentClassName),
+        children: primaryContent
+      }), !!secondaryContent && /*#__PURE__*/_jsx("div", {
+        className: cx(secondaryContentContainerCss, showSecondaryContentDivider && secondaryContentDividerCss, secondaryContentClassName),
+        children: secondaryContent
+      })]
+    })
+  }), [contentStyle, contentContainerClassName, primaryContent, primaryContentClassName, secondaryContent, secondaryContentClassName, showSecondaryContentDivider]);
+  return /*#__PURE__*/_jsx(FullscreenModalLayout, {
+    accessibilityLabel: label,
+    accessibilityLabelledBy: labelledBy,
+    disableFocusTrap: disableFocusTrap,
+    disablePortal: disablePortal,
+    focusTabIndexElements: focusTabIndexElements,
+    onDidClose: onDidClose,
+    onRequestClose: onRequestClose,
+    restoreFocusOnUnmount: restoreFocusOnUnmount,
+    role: role,
+    shouldCloseOnEscPress: shouldCloseOnEscPress,
+    testID: testID,
+    visible: visible,
+    zIndex: zIndex,
+    children: /*#__PURE__*/_jsxs(VStack, {
+      background: "bg",
+      height: "100%",
+      width: "100%",
+      children: [/*#__PURE__*/_jsx(FullscreenModalHeader, {
+        closeAccessibilityLabel: closeAccessibilityLabel,
+        hideDivider: hideDivider,
+        labelledBySource: labelledBySource,
+        logo: logo,
+        onRequestClose: onRequestClose,
+        title: title
+      }), content]
+    })
+  });
+});
+import "./FullscreenModal.css";

package/esm/overlays/modal/FullscreenModalHeader.css

@@ -0,0 +1,2 @@
+@layer cds{.headerLogoCss-h8v5jkx{display:none;}@media only screen and (min-width:560px){.headerLogoCss-h8v5jkx{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:80px;}}@media only screen and (min-width:768px){.headerLogoCss-h8v5jkx{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:80px;}}@media only screen and (min-width:1280px){.headerLogoCss-h8v5jkx{width:240px;}}
+.headerLogoInnerCss-hazb7kh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}@media only screen and (min-width:560px){.headerLogoInnerCss-hazb7kh{display:none;}}}

package/esm/overlays/modal/FullscreenModalHeader.js

@@ -0,0 +1,74 @@
+const _excluded = ["logo", "title", "onRequestClose", "hideDivider", "labelledBySource", "closeAccessibilityLabel", "alignItems", "borderedBottom", "paddingX", "paddingY"];
+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 } from 'react';
+import { IconButton } from '../../buttons';
+import { LogoMark } from '../../icons/LogoMark';
+import { Box, HStack } from '../../layout';
+import { breakpoints } from '../../styles/media';
+import { Text } from '../../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const paddingStartSmall = 80;
+const paddingStartLarge = 240;
+const headerLogoCss = "headerLogoCss-h8v5jkx";
+const headerLogoInnerCss = "headerLogoInnerCss-hazb7kh";
+export const FullscreenModalHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function FullscreenModalHeader(_ref, ref) {
+  let {
+      logo,
+      title,
+      onRequestClose,
+      hideDivider,
+      labelledBySource,
+      closeAccessibilityLabel,
+      alignItems = 'center',
+      borderedBottom = true,
+      paddingX = 4,
+      paddingY = 2
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const actualBorderedBottom = hideDivider === undefined ? borderedBottom : !hideDivider;
+  return /*#__PURE__*/_jsxs(HStack, _objectSpread(_objectSpread({
+    ref: ref,
+    alignItems: alignItems,
+    borderedBottom: actualBorderedBottom,
+    paddingX: paddingX,
+    paddingY: paddingY
+  }, props), {}, {
+    children: [/*#__PURE__*/_jsx(Box, {
+      className: headerLogoCss,
+      paddingEnd: 3,
+      children: logo !== null && logo !== void 0 ? logo : /*#__PURE__*/_jsx(LogoMark, {
+        size: 32
+      })
+    }), /*#__PURE__*/_jsxs(Box, {
+      flexGrow: 1,
+      children: [title ? /*#__PURE__*/_jsx(Text, {
+        as: "h1",
+        display: "block",
+        font: "title1",
+        id: labelledBySource,
+        children: title
+      }) : /*#__PURE__*/_jsx("div", {
+        className: headerLogoInnerCss,
+        children: logo !== null && logo !== void 0 ? logo : /*#__PURE__*/_jsx(LogoMark, {
+          size: 32
+        })
+      }), /*#__PURE__*/_jsx(Box, {
+        flexGrow: 1,
+        justifyContent: "flex-end",
+        children: /*#__PURE__*/_jsx(IconButton, {
+          transparent: true,
+          "aria-label": closeAccessibilityLabel,
+          name: "close",
+          onClick: onRequestClose
+        })
+      })]
+    })]
+  }));
+}));
+import "./FullscreenModalHeader.css";

package/esm/overlays/modal/FullscreenModalLayout.css

@@ -0,0 +1 @@
+@layer cds{.pinCss-p1w8ptug{position:absolute;top:0;bottom:0;left:0;right:0;}}

package/esm/overlays/modal/FullscreenModalLayout.js

@@ -0,0 +1,74 @@
+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 { animateInOpacityConfig, animateInOverlayOpacityConfig, animateInTranslateYConfig, animateOutOpacityConfig, animateOutOverlayOpacityConfig, animateOutTranslateYConfig } from '@coinbase/cds-common/animation/fullscreenModal';
+import { OverlayContentContext } from '@coinbase/cds-common/overlays/OverlayContentContext';
+import { m as motion } from 'framer-motion';
+import { useMotionProps } from '../../motion/useMotionProps';
+import { FocusTrap } from '../FocusTrap';
+import { Overlay } from '../overlay/Overlay';
+import { ModalWrapper } from './ModalWrapper';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const pinCss = "pinCss-p1w8ptug";
+const overlayContentContextValue = {
+  isModal: true
+};
+export const FullscreenModalLayout = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function FullscreenModalLayout(_ref, ref) {
+  let {
+    children,
+    focusTabIndexElements,
+    visible,
+    onRequestClose,
+    testID,
+    zIndex,
+    disablePortal,
+    role,
+    onDidClose,
+    shouldCloseOnEscPress = true,
+    disableFocusTrap,
+    restoreFocusOnUnmount = true,
+    accessibilityLabelledBy,
+    accessibilityLabel
+  } = _ref;
+  const overlayMotionProps = useMotionProps({
+    enterConfigs: [animateInOverlayOpacityConfig],
+    exitConfigs: [animateOutOverlayOpacityConfig],
+    exit: 'exit'
+  });
+  const dialogMotionProps = useMotionProps({
+    enterConfigs: [animateInOpacityConfig, animateInTranslateYConfig],
+    exitConfigs: [animateOutOpacityConfig, animateOutTranslateYConfig],
+    exit: 'exit'
+  });
+  return /*#__PURE__*/_jsx(OverlayContentContext.Provider, {
+    value: overlayContentContextValue,
+    children: /*#__PURE__*/_jsxs(ModalWrapper, {
+      ref: ref,
+      hideOverlay: true,
+      accessibilityLabel: accessibilityLabel,
+      accessibilityLabelledBy: accessibilityLabelledBy,
+      disablePortal: disablePortal,
+      onDidClose: onDidClose,
+      role: role,
+      testID: testID,
+      visible: visible,
+      zIndex: zIndex,
+      children: [/*#__PURE__*/_jsx(motion.div, _objectSpread(_objectSpread({}, overlayMotionProps), {}, {
+        children: /*#__PURE__*/_jsx(Overlay, {})
+      })), /*#__PURE__*/_jsx(motion.div, _objectSpread(_objectSpread({}, dialogMotionProps), {}, {
+        className: pinCss,
+        children: /*#__PURE__*/_jsx(FocusTrap, {
+          disableFocusTrap: disableFocusTrap,
+          focusTabIndexElements: focusTabIndexElements,
+          onEscPress: shouldCloseOnEscPress ? onRequestClose : undefined,
+          restoreFocusOnUnmount: restoreFocusOnUnmount,
+          children: children
+        })
+      }))]
+    })
+  });
+}));
+import "./FullscreenModalLayout.css";

package/esm/overlays/modal/Modal.css

@@ -0,0 +1,3 @@
+@layer cds{.baseCss-bp3ahp7{position:absolute;max-height:calc(100vh - var(--space-10) * 2);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;z-index:3;}@supports (height:100dvh){.baseCss-bp3ahp7{max-height:calc(100dvh - var(--space-10) * 2);}}
+@media (max-width:767px){.modalDialogResponsiveCss-msti16y{border-radius:var(--borderRadius-0);}}
+@media (min-width:768px) and (max-width:1279px){.modalResponsiveCss-ml7szrb{margin-inline-start:var(--space-3);margin-inline-end:var(--space-3);}}@media (max-width:767px){.modalResponsiveCss-ml7szrb{max-height:100vh;max-height:100dvh;top:0;bottom:0;right:0;left:0;margin-inline-start:0;margin-inline-end:0;}}}

package/esm/overlays/modal/Modal.js

@@ -0,0 +1,134 @@
+const _excluded = ["children", "visible", "onRequestClose", "disableOverlayPress", "disablePortal", "disableFocusTrap", "accessibilityLabelledBy", "accessibilityLabel", "focusTabIndexElements", "restoreFocusOnUnmount", "width", "dangerouslyDisableResponsiveness", "dangerouslySetPosition", "shouldCloseOnEscPress", "hideCloseButton", "hideDividers", "maxWidth"];
+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, useImperativeHandle, useMemo } from 'react';
+import { animateInOpacityConfig, animateInScaleConfig, animateOutOpacityConfig, animateOutScaleConfig } from '@coinbase/cds-common/animation/modal';
+import { ModalContext } from '@coinbase/cds-common/overlays/ModalContext';
+import { OverlayContentContext } from '@coinbase/cds-common/overlays/OverlayContentContext';
+import { zIndex } from '@coinbase/cds-common/tokens/zIndex';
+import { m as motion } from 'framer-motion';
+import { cx } from '../../cx';
+import { useA11yLabels } from '../../hooks/useA11yLabels';
+import { Box } from '../../layout';
+import { VStack } from '../../layout/VStack';
+import { useMotionProps } from '../../motion/useMotionProps';
+import { media } from '../../styles/media';
+import { FocusTrap } from '../FocusTrap';
+import { ModalWrapper } from './ModalWrapper';
+import { jsx as _jsx } from "react/jsx-runtime";
+const modalMaxWidth = 612;
+const defaultWidthStyle = {
+  tablet: 'auto',
+  desktop: modalMaxWidth
+};
+const defaultMaxWidthStyle = {
+  tablet: modalMaxWidth
+};
+const baseCss = "baseCss-bp3ahp7";
+const modalDialogResponsiveCss = "modalDialogResponsiveCss-msti16y";
+const modalResponsiveCss = "modalResponsiveCss-ml7szrb";
+const MotionBox = motion(Box);
+const overlayContentContextValue = {
+  isModal: true
+};
+export const Modal = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      children,
+      visible = false,
+      onRequestClose,
+      disableOverlayPress = false,
+      disablePortal = false,
+      disableFocusTrap,
+      accessibilityLabelledBy,
+      accessibilityLabel,
+      focusTabIndexElements = false,
+      restoreFocusOnUnmount = true,
+      width,
+      dangerouslyDisableResponsiveness = false,
+      dangerouslySetPosition,
+      shouldCloseOnEscPress = true,
+      hideCloseButton,
+      hideDividers,
+      maxWidth
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const defaultWidth = dangerouslyDisableResponsiveness ? modalMaxWidth : defaultWidthStyle;
+  const defaultMaxWidth = dangerouslyDisableResponsiveness ? undefined : defaultMaxWidthStyle;
+  const {
+    labelledBySource,
+    labelledBy,
+    label
+  } = useA11yLabels({
+    accessibilityLabelledBy,
+    accessibilityLabel
+  });
+  const motionProps = useMotionProps({
+    enterConfigs: [animateInOpacityConfig, animateInScaleConfig],
+    exitConfigs: [animateOutOpacityConfig, animateOutScaleConfig],
+    exit: 'exit'
+  });
+  const handleClose = useCallback(() => {
+    onRequestClose === null || onRequestClose === void 0 || onRequestClose();
+  }, [onRequestClose]);
+  useImperativeHandle(ref, () => ({
+    onRequestClose: handleClose
+  }), [handleClose]);
+  const modalData = useMemo(() => ({
+    visible,
+    onRequestClose: handleClose,
+    accessibilityLabelledBy: labelledBySource,
+    hideCloseButton,
+    hideDividers
+  }), [visible, handleClose, labelledBySource, hideCloseButton, hideDividers]);
+
+  // TODO: remove render props as we no longer need the method to close modal
+  const renderChildrenProps = useMemo(() => ({
+    closeModal: handleClose
+  }), [handleClose]);
+  const dialogStyles = useMemo(() => ({
+    position: dangerouslySetPosition
+  }), [dangerouslySetPosition]);
+  return /*#__PURE__*/_jsx(OverlayContentContext.Provider, {
+    value: overlayContentContextValue,
+    children: /*#__PURE__*/_jsx(ModalWrapper, _objectSpread(_objectSpread({
+      accessibilityLabel: label,
+      accessibilityLabelledBy: labelledBy,
+      dangerouslyDisableResponsiveness: dangerouslyDisableResponsiveness,
+      disableOverlayPress: disableOverlayPress,
+      disablePortal: disablePortal,
+      onOverlayPress: handleClose,
+      visible: visible
+    }, props), {}, {
+      children: /*#__PURE__*/_jsx(MotionBox, _objectSpread(_objectSpread({}, motionProps), {}, {
+        className: cx(baseCss, !dangerouslyDisableResponsiveness && modalResponsiveCss),
+        maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : defaultMaxWidth,
+        style: dialogStyles,
+        testID: "modal-dialog-motion",
+        width: width !== null && width !== void 0 ? width : defaultWidth,
+        children: /*#__PURE__*/_jsx(FocusTrap, {
+          disableFocusTrap: disableFocusTrap,
+          focusTabIndexElements: focusTabIndexElements,
+          onEscPress: shouldCloseOnEscPress ? handleClose : undefined,
+          restoreFocusOnUnmount: restoreFocusOnUnmount,
+          children: /*#__PURE__*/_jsx(VStack, {
+            borderRadius: 200,
+            className: cx(!dangerouslyDisableResponsiveness && modalDialogResponsiveCss),
+            elevation: 2,
+            overflow: "hidden",
+            width: "100%",
+            children: /*#__PURE__*/_jsx(ModalContext.Provider, {
+              value: modalData,
+              children: typeof children === 'function' ? children(renderChildrenProps) : children
+            })
+          })
+        })
+      }))
+    }))
+  });
+}));
+import "./Modal.css";

package/esm/overlays/modal/ModalBody.js

@@ -0,0 +1,38 @@
+const _excluded = ["children", "flexDirection", "flexGrow", "overflow", "paddingX", "tabIndex"];
+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 { useModalContext } from '@coinbase/cds-common/overlays/ModalContext';
+import { Box } from '../../layout/Box';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ModalBody = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      children,
+      flexDirection = 'column',
+      flexGrow = 1,
+      overflow = 'auto',
+      paddingX = 3,
+      tabIndex = 0
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const {
+    hideDividers
+  } = useModalContext();
+  return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
+    ref: ref,
+    flexDirection: flexDirection,
+    flexGrow: flexGrow,
+    overflow: overflow,
+    paddingX: paddingX,
+    paddingY: hideDividers ? 0 : 3 // remove vertical padding when dividers hidden
+    ,
+    tabIndex: tabIndex
+  }, props), {}, {
+    children: children
+  }));
+});

package/esm/overlays/modal/ModalFooter.css

@@ -0,0 +1 @@
+@layer cds{.baseCss-b12mhpgg{-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;}.baseCss-b12mhpgg > button,.baseCss-b12mhpgg a{-webkit-flex:none;-ms-flex:none;flex:none;}@media (min-width:560px){.baseCss-b12mhpgg{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}.baseCss-b12mhpgg > button,.baseCss-b12mhpgg a{-webkit-flex:1;-ms-flex:1;flex:1;}}@media (min-width:1024px){.baseCss-b12mhpgg{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}.baseCss-b12mhpgg > button,.baseCss-b12mhpgg a{-webkit-flex:initial;-ms-flex:initial;flex:initial;}}}

package/esm/overlays/modal/ModalFooter.js

@@ -0,0 +1,46 @@
+const _excluded = ["gap", "justifyContent", "paddingX", "paddingY", "width", "primaryAction", "secondaryAction"];
+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 from 'react';
+import { useModalContext } from '@coinbase/cds-common/overlays/ModalContext';
+import { Button } from '../../buttons/Button';
+import { HStack } from '../../layout/HStack';
+import { breakpoints } from '../../styles/media';
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const baseCss = "baseCss-b12mhpgg";
+export const ModalFooter = _ref => {
+  let {
+      gap = 2,
+      justifyContent = 'flex-end',
+      paddingX = 3,
+      paddingY = 2,
+      width = '100%',
+      primaryAction,
+      secondaryAction
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const {
+    hideDividers
+  } = useModalContext();
+  if (primaryAction.type !== Button || secondaryAction && primaryAction.type !== Button) {
+    console.error('Modal footer actions need to be CDS Button component');
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(HStack, _objectSpread(_objectSpread({
+    borderedTop: !hideDividers,
+    className: baseCss,
+    gap: gap,
+    justifyContent: justifyContent,
+    paddingX: paddingX,
+    paddingY: paddingY,
+    width: width
+  }, props), {}, {
+    children: [secondaryAction, primaryAction]
+  }));
+};
+import "./ModalFooter.css";

package/esm/overlays/modal/ModalHeader.js

@@ -0,0 +1,83 @@
+const _excluded = ["alignItems", "paddingX", "paddingY", "title", "onBackButtonClick", "backAccessibilityLabel", "backAccessibilityHint", "closeAccessibilityLabel", "closeAccessibilityHint"];
+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 from 'react';
+import { useModalContext } from '@coinbase/cds-common/overlays/ModalContext';
+import { interactableHeight } from '@coinbase/cds-common/tokens/interactableHeight';
+import { IconButton } from '../../buttons/IconButton';
+import { Box } from '../../layout/Box';
+import { HStack } from '../../layout/HStack';
+import { Text } from '../../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ModalHeader = _ref => {
+  let {
+      alignItems = 'center',
+      paddingX = 3,
+      paddingY = 2,
+      title,
+      onBackButtonClick,
+      backAccessibilityLabel,
+      backAccessibilityHint,
+      closeAccessibilityLabel,
+      closeAccessibilityHint
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const {
+    onRequestClose,
+    accessibilityLabelledBy,
+    hideCloseButton,
+    hideDividers
+  } = useModalContext();
+  if (!title && !onBackButtonClick && !onRequestClose) return null;
+
+  // use empty placeholder which has the same size as IconButton to maintain horizontal position
+  const emptyPlaceholder = /*#__PURE__*/_jsx(Box, {
+    height: interactableHeight.compact,
+    width: interactableHeight.compact
+  });
+  return /*#__PURE__*/_jsxs(HStack, _objectSpread(_objectSpread({
+    alignItems: alignItems,
+    borderedBottom: !hideDividers,
+    paddingX: paddingX,
+    paddingY: paddingY
+  }, props), {}, {
+    children: [onBackButtonClick ? /*#__PURE__*/_jsx(Box, {
+      children: /*#__PURE__*/_jsx(IconButton, {
+        transparent: true,
+        accessibilityHint: backAccessibilityHint,
+        accessibilityLabel: backAccessibilityLabel,
+        name: "backArrow",
+        onClick: onBackButtonClick,
+        testID: "modal-back-button"
+      })
+    }) : emptyPlaceholder, /*#__PURE__*/_jsx(Box, {
+      alignItems: "center",
+      flexGrow: 1,
+      justifyContent: "center",
+      paddingX: 2,
+      children: /*#__PURE__*/_jsx(Text, {
+        as: "h2",
+        display: "block",
+        font: "headline",
+        id: accessibilityLabelledBy,
+        textAlign: "center",
+        children: title
+      })
+    }), !hideCloseButton && /*#__PURE__*/_jsx(Box, {
+      justifyContent: "flex-end",
+      children: /*#__PURE__*/_jsx(IconButton, {
+        transparent: true,
+        accessibilityHint: closeAccessibilityHint,
+        accessibilityLabel: closeAccessibilityLabel,
+        name: "close",
+        onClick: onRequestClose,
+        testID: "modal-close-button"
+      })
+    })]
+  }));
+};

package/esm/overlays/modal/ModalWrapper.css

@@ -0,0 +1 @@
+@layer cds{@media (max-width:767px){.modalOverlayResponsiveCss-msg6e82{display:none;}}}