@coinbase/cds-web 0.0.0 → 8.13.1

package/esm/overlays/tooltip/TooltipContent.js

@@ -0,0 +1,65 @@
+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, useMemo } from 'react';
+import { animateInOpacityConfig, animateOutOpacityConfig, getTranslateConfigByPlacement } from '@coinbase/cds-common/animation/tooltip';
+import { tooltipMaxWidth, tooltipPaddingX, tooltipPaddingY } from '@coinbase/cds-common/tokens/tooltip';
+import { zIndex as zIndexTokens } from '@coinbase/cds-common/tokens/zIndex';
+import { m as motion } from 'framer-motion';
+import { Box } from '../../layout/Box';
+import { useMotionProps } from '../../motion/useMotionProps';
+import { Text } from '../../typography/Text';
+import { jsx as _jsx } from "react/jsx-runtime";
+const textCss = "textCss-t15dzixe";
+export const TooltipContent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    content,
+    elevation,
+    gap,
+    testID,
+    zIndex,
+    tooltipId,
+    placement = 'top'
+  } = _ref;
+  const outerStyle = useMemo(() => ({
+    padding: "var(--space-".concat(gap, ")"),
+    zIndex: zIndex !== null && zIndex !== void 0 ? zIndex : zIndexTokens.tooltip
+  }), [gap, zIndex]);
+  const motionProps = useMotionProps({
+    style: outerStyle,
+    enterConfigs: [animateInOpacityConfig, getTranslateConfigByPlacement({
+      placement
+    })],
+    exitConfigs: [animateOutOpacityConfig, getTranslateConfigByPlacement({
+      placement,
+      isExiting: true
+    })],
+    exit: 'exit'
+  });
+  return /*#__PURE__*/_jsx(motion.div, _objectSpread(_objectSpread({}, motionProps), {}, {
+    "data-testid": "".concat(testID, "-motion"),
+    children: /*#__PURE__*/_jsx(Box, {
+      ref: ref,
+      background: "bg",
+      borderRadius: 200,
+      "data-testid": testID,
+      elevation: elevation,
+      maxWidth: tooltipMaxWidth,
+      paddingX: tooltipPaddingX,
+      paddingY: tooltipPaddingY,
+      children: typeof content === 'string' ? /*#__PURE__*/_jsx(Text, {
+        className: textCss,
+        color: "fg",
+        font: "label2",
+        id: tooltipId,
+        children: content
+      }) : /*#__PURE__*/_jsx("div", {
+        id: tooltipId,
+        children: content
+      })
+    })
+  }));
+}));
+import "./TooltipContent.css";

package/esm/overlays/tooltip/TooltipProps.js

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

package/esm/overlays/tooltip/__figma__/Tooltip.figma.js

@@ -0,0 +1,91 @@
+import { figma } from '@figma/code-connect';
+import { Button } from '../../../buttons';
+import { TextBody, TextHeadline } from '../../../typography';
+import { Tooltip } from '../Tooltip';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+figma.connect(Tooltip, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=715%3A14162', {
+  imports: ["import { Tooltip } from '@coinbase/cds-web/overlays';", "import { Button } from '@coinbase/cds-web/buttons/Button';"],
+  variant: {
+    type: 'body'
+  },
+  props: {
+    content: figma.nestedProps('string.tooltip', {
+      description: figma.enum('Ready-made', {
+        Custom: figma.string('description'),
+        Congestion: figma.textContent('body-option'),
+        'Crypto prices': figma.textContent('body-option'),
+        'Exchange rate': figma.textContent('body-option'),
+        'Gain/loss': figma.textContent('body-option'),
+        'Max slippage': figma.textContent('body-option'),
+        Network: figma.textContent('body-option'),
+        'Network fee': figma.textContent('body-option'),
+        'Trading activity': figma.textContent('body-option'),
+        'Transaction estimate': figma.textContent('body-option')
+      })
+    })
+  },
+  example: _ref => {
+    let {
+      content
+    } = _ref;
+    return /*#__PURE__*/_jsx(Tooltip, {
+      content: content.description,
+      children: /*#__PURE__*/_jsx(Button, {
+        children: "Default"
+      })
+    });
+  }
+});
+figma.connect(Tooltip, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=715%3A14162', {
+  imports: ["import { Tooltip } from '@coinbase/cds-web/overlays';", "import { Button } from '@coinbase/cds-web/buttons/Button';"],
+  variant: {
+    type: 'title + body'
+  },
+  props: {
+    content: figma.nestedProps('string.tooltip', {
+      title: figma.enum('Ready-made', {
+        Custom: figma.string('title'),
+        Congestion: figma.textContent('title-option'),
+        'Crypto prices': figma.textContent('title-option'),
+        'Exchange rate': figma.textContent('title-option'),
+        'Gain/loss': figma.textContent('title-option'),
+        'Max slippage': figma.textContent('title-option'),
+        Network: figma.textContent('title-option'),
+        'Network fee': figma.textContent('title-option'),
+        'Trading activity': figma.textContent('title-option'),
+        'Transaction estimate': figma.textContent('title-option')
+      }),
+      description: figma.enum('Ready-made', {
+        Custom: figma.string('description'),
+        Congestion: figma.textContent('body-option'),
+        'Crypto prices': figma.textContent('body-option'),
+        'Exchange rate': figma.textContent('body-option'),
+        'Gain/loss': figma.textContent('body-option'),
+        'Max slippage': figma.textContent('body-option'),
+        Network: figma.textContent('body-option'),
+        'Network fee': figma.textContent('body-option'),
+        'Trading activity': figma.textContent('body-option'),
+        'Transaction estimate': figma.textContent('body-option')
+      })
+    })
+  },
+  example: _ref2 => {
+    let {
+      content
+    } = _ref2;
+    return /*#__PURE__*/_jsx(Tooltip, {
+      content: /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(TextHeadline, {
+          as: "p",
+          children: content.title
+        }), /*#__PURE__*/_jsx(TextBody, {
+          as: "p",
+          children: content.description
+        })]
+      }),
+      children: /*#__PURE__*/_jsx(Button, {
+        children: "Default"
+      })
+    });
+  }
+});

package/esm/overlays/tooltip/useTooltipState.js

@@ -0,0 +1,27 @@
+import { useCallback, useMemo, useState } from 'react';
+import { usePrefixedId } from '@coinbase/cds-common/hooks/usePrefixedId';
+export const useTooltipState = id => {
+  const [isHovered, setIsHovered] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const tooltipId = usePrefixedId(id);
+  const handleOnMouseEnter = useCallback(() => setIsHovered(true), []);
+  const toggleOffIsHovered = useCallback(() => setIsHovered(false), []);
+  const handleOnFocus = useCallback(() => setIsFocused(true), []);
+  const toggleOffIsFocused = useCallback(() => setIsFocused(false), []);
+  const handleOnBlur = useCallback(() => {
+    toggleOffIsFocused();
+  }, [toggleOffIsFocused]);
+  const handleOnMouseLeave = useCallback(() => {
+    toggleOffIsHovered();
+  }, [toggleOffIsHovered]);
+  return useMemo(() => {
+    return {
+      isOpen: isHovered || isFocused,
+      tooltipId,
+      handleOnMouseEnter,
+      handleOnMouseLeave,
+      handleOnFocus,
+      handleOnBlur
+    };
+  }, [handleOnBlur, handleOnFocus, handleOnMouseEnter, handleOnMouseLeave, isFocused, isHovered, tooltipId]);
+};

package/esm/overlays/tray/Tray.js

@@ -0,0 +1,208 @@
+import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { OverlayContentContext } from '@coinbase/cds-common/overlays/OverlayContentContext';
+import { m, useAnimation } from 'framer-motion';
+import { IconButton } from '../../buttons';
+import { useScrollBlocker } from '../../hooks/useScrollBlocker';
+import { Box, HStack } from '../../layout';
+import { VStack } from '../../layout/VStack';
+import { Text } from '../../typography/Text';
+import { FocusTrap } from '../FocusTrap';
+import { Overlay } from '../overlay/Overlay';
+import { Portal } from '../Portal';
+import { trayContainerId } from '../PortalProvider';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Animation constants
+const ANIMATIONS = {
+  SLIDE_IN: {
+    y: 0,
+    transition: {
+      duration: 0.3
+    }
+  },
+  SLIDE_OUT: {
+    y: '100%',
+    transition: {
+      duration: 0.3
+    }
+  },
+  SNAP_BACK: {
+    y: 0,
+    transition: {
+      type: 'spring',
+      stiffness: 300,
+      damping: 30
+    }
+  }
+};
+
+// Extended props for web-specific functionality
+
+// Extended ref type for web implementation
+
+export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref, ref) {
+  let {
+    children,
+    title,
+    onVisibilityChange,
+    verticalDrawerPercentageOfView = '85%',
+    onBlur,
+    onClose,
+    onCloseComplete,
+    preventDismiss = false,
+    id,
+    role = 'dialog',
+    footer,
+    accessibilityLabel = 'Tray',
+    focusTabIndexElements = false,
+    restoreFocusOnUnmount = true,
+    closeAccessibilityLabel = 'Close',
+    closeAccessibilityHint
+  } = _ref;
+  const [isOpen, setIsOpen] = useState(true);
+  const trayRef = useRef(null);
+  const footerRef = useRef(null);
+  const controls = useAnimation();
+  const blockScroll = useScrollBlocker();
+
+  // prevent body scroll when modal is open
+  useEffect(() => {
+    blockScroll(isOpen);
+    return () => {
+      blockScroll(false);
+    };
+  }, [isOpen, blockScroll]);
+
+  // Setup initial animation
+  useEffect(() => {
+    controls.start(ANIMATIONS.SLIDE_IN);
+  }, [controls]);
+
+  // Unified dismissal function
+  const handleClose = useCallback(() => {
+    // Run the animation
+    controls.start(ANIMATIONS.SLIDE_OUT).then(() => {
+      // Then set state after animation completes
+      setIsOpen(false);
+      onClose === null || onClose === void 0 || onClose();
+      onCloseComplete === null || onCloseComplete === void 0 || onCloseComplete();
+    });
+  }, [onClose, onCloseComplete, controls]);
+  const handleOverlayPress = useCallback(() => {
+    if (!preventDismiss) {
+      onBlur === null || onBlur === void 0 || onBlur();
+      handleClose();
+    }
+  }, [handleClose, preventDismiss, onBlur]);
+
+  // Use imperative handle for cleaner ref implementation
+  useImperativeHandle(ref, () => ({
+    close: handleClose
+  }), [handleClose]);
+
+  // Handle visibility changes
+  useEffect(() => {
+    onVisibilityChange === null || onVisibilityChange === void 0 || onVisibilityChange('visible');
+    return () => {
+      onVisibilityChange === null || onVisibilityChange === void 0 || onVisibilityChange('hidden');
+    };
+  }, [onVisibilityChange]);
+  const overlayContentContextValue = {
+    isDrawer: true
+  };
+  if (!isOpen) return null;
+  return /*#__PURE__*/_jsx(OverlayContentContext.Provider, {
+    value: overlayContentContextValue,
+    children: /*#__PURE__*/_jsx(Portal, {
+      containerId: trayContainerId,
+      children: /*#__PURE__*/_jsxs(Box, {
+        height: "100vh",
+        pin: "all",
+        position: "fixed",
+        width: "100vw",
+        children: [/*#__PURE__*/_jsx(Overlay, {
+          onClick: handleOverlayPress,
+          testID: "tray-overlay"
+        }), /*#__PURE__*/_jsx(FocusTrap, {
+          focusTabIndexElements: focusTabIndexElements,
+          onEscPress: preventDismiss ? undefined : handleClose,
+          restoreFocusOnUnmount: restoreFocusOnUnmount,
+          children: /*#__PURE__*/_jsx(m.div, {
+            animate: controls,
+            initial: {
+              y: '100%'
+            },
+            style: {
+              width: '100%',
+              position: 'absolute',
+              bottom: 0,
+              left: 0,
+              right: 0,
+              zIndex: 1,
+              maxHeight: verticalDrawerPercentageOfView,
+              overflowY: 'auto'
+            },
+            tabIndex: 0,
+            children: /*#__PURE__*/_jsx(VStack, {
+              ref: trayRef,
+              accessibilityLabel: accessibilityLabel,
+              alignItems: "center",
+              "aria-modal": "true",
+              background: 'bg',
+              borderTopLeftRadius: 400,
+              borderTopRightRadius: 400,
+              "data-testid": "tray",
+              height: "100%",
+              id: id,
+              justifyContent: "center",
+              minHeight: 200,
+              onClick: e => e.stopPropagation(),
+              role: role,
+              children: /*#__PURE__*/_jsxs(VStack, {
+                maxWidth: "70em",
+                paddingX: 6,
+                width: "100%",
+                children: [/*#__PURE__*/_jsxs(HStack, {
+                  alignItems: "center",
+                  background: "bg",
+                  justifyContent: title ? 'space-between' : 'flex-end',
+                  paddingBottom: 1,
+                  paddingTop: 3,
+                  position: "sticky",
+                  top: 0,
+                  children: [title && (typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
+                    font: "title3",
+                    children: title
+                  }) : title), !preventDismiss && /*#__PURE__*/_jsx(IconButton, {
+                    transparent: true,
+                    accessibilityHint: closeAccessibilityHint,
+                    accessibilityLabel: closeAccessibilityLabel,
+                    name: "close",
+                    onClick: handleClose,
+                    testID: "tray-close-button"
+                  })]
+                }), /*#__PURE__*/_jsx(VStack, {
+                  minHeight: 0,
+                  paddingBottom: 2,
+                  paddingTop: 1,
+                  style: {
+                    overflowY: 'auto'
+                  },
+                  children: typeof children === 'function' ? children({
+                    handleClose
+                  }) : children
+                }), footer && /*#__PURE__*/_jsx(VStack, {
+                  ref: footerRef,
+                  background: "bg",
+                  style: {
+                    flexShrink: 0
+                  },
+                  children: footer
+                })]
+              })
+            })
+          })
+        })]
+      })
+    })
+  });
+}));

package/esm/overlays/useModal.js

@@ -0,0 +1,6 @@
+import { useModal } from '@coinbase/cds-common/overlays/useModal';
+
+/**
+ * @deprecated Use the visible and onRequestClose props as outlined in the docs here https://cds.coinbase.com/components/modal#get-started
+ */
+export { useModal };

package/esm/overlays/usePortal.js

@@ -0,0 +1,2 @@
+import { usePortal } from '@coinbase/cds-common/overlays/usePortal';
+export { usePortal };

package/esm/overlays/useToast.js

@@ -0,0 +1,44 @@
+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, { useCallback, useContext, useMemo } from 'react';
+import { ToastContext } from '@coinbase/cds-common/overlays/ToastProvider';
+import { charsThreshold, defaultDuration, perCharsDuration, withActionDuration } from '@coinbase/cds-common/tokens/toast';
+import { Toast } from './Toast';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const useToast = () => {
+  const {
+    addToast,
+    removeToast,
+    hideToast,
+    clearToastQueue
+  } = useContext(ToastContext);
+  const showToast = useCallback((text, options) => {
+    var _options$duration;
+    const onDidHide = () => {
+      var _options$onDidHide;
+      options === null || options === void 0 || (_options$onDidHide = options.onDidHide) === null || _options$onDidHide === void 0 || _options$onDidHide.call(options);
+      // unmount toast when using gesture or close button
+      removeToast();
+    };
+    const calculateDuration = () => {
+      let duration = defaultDuration;
+      if (options !== null && options !== void 0 && options.action) duration += withActionDuration;
+      // when more than 50 chars, add 0.3s per 10 chars
+      if (text.length > charsThreshold) duration += Math.round((text.length - charsThreshold) / 10 * perCharsDuration);
+      return duration;
+    };
+    addToast(/*#__PURE__*/_jsx(Toast, _objectSpread(_objectSpread({
+      text: text
+    }, options), {}, {
+      onDidHide: onDidHide
+    })), (_options$duration = options === null || options === void 0 ? void 0 : options.duration) !== null && _options$duration !== void 0 ? _options$duration : calculateDuration());
+  }, [addToast, removeToast]);
+  return useMemo(() => ({
+    show: showToast,
+    hide: hideToast,
+    clearQueue: clearToastQueue
+  }), [showToast, clearToastQueue, hideToast]);
+};

package/esm/page/PageFooter.js

@@ -0,0 +1,43 @@
+const _excluded = ["action", "height", "justifyContent", "paddingX", "paddingY", "role"];
+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 { pageFooterHeight } from '@coinbase/cds-common/tokens/page';
+import { Box } from '../layout/Box';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const pageFooterPaddingX = {
+  phone: 3,
+  tablet: 4,
+  desktop: 4
+};
+export const pageFooterJustifyContent = {
+  phone: 'center',
+  tablet: 'flex-end',
+  desktop: 'flex-end'
+};
+export const PageFooter = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function PageFooter(_ref, ref) {
+  let {
+      action,
+      height = pageFooterHeight,
+      justifyContent = pageFooterJustifyContent,
+      paddingX = pageFooterPaddingX,
+      paddingY = 1.5,
+      role = 'contentinfo'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
+    ref: ref,
+    height: height,
+    justifyContent: justifyContent,
+    paddingX: paddingX,
+    paddingY: paddingY,
+    role: role
+  }, props), {}, {
+    children: action
+  }));
+}));

package/esm/page/PageHeader.css

@@ -0,0 +1,2 @@
+@media only screen and (max-width:767px){.gridStylesMobileTitleCss-g11hn2ri{grid-column:1 / 4;grid-row:2;}}
+@media only screen and (max-width:767px){.gridStylesMobileEndCss-gzpz71h{grid-row:1;grid-column:3;}}

package/esm/page/PageHeader.js

@@ -0,0 +1,131 @@
+const _excluded = ["start", "end", "title", "overflow", "role", "templateColumns", "styles", "style", "classNames", "className"];
+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, useMemo } from 'react';
+import { pageHeaderHeight } from '@coinbase/cds-common/tokens/page';
+import { cx } from '../cx';
+import { Box } from '../layout/Box';
+import { Grid } from '../layout/Grid';
+import { media } from '../styles/media';
+import { Text } from '../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const gridStylesMobileTitleCss = "gridStylesMobileTitleCss-g11hn2ri";
+const gridStylesMobileEndCss = "gridStylesMobileEndCss-gzpz71h";
+export const pageHeaderStartPaddingStart = {
+  phone: 3,
+  tablet: 4,
+  desktop: 4
+};
+export const pageHeaderEndPaddingX = {
+  phone: 3,
+  tablet: 4,
+  desktop: 4
+};
+export const PageHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function PageHeader(_ref, ref) {
+  let {
+      start,
+      end,
+      title,
+      overflow = 'auto',
+      role = 'banner',
+      templateColumns = 'auto 1fr auto',
+      styles,
+      style,
+      classNames,
+      className
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const titleResponsivePaddingLeft = useMemo(() => ({
+    phone: start && !end ? 0 : 3,
+    tablet: start ? 0 : 4,
+    desktop: start ? 0 : 4
+  }), [start, end]);
+  return (
+    /*#__PURE__*/
+    /**
+     * We use CSS grid to move the `title` element to a second row when necessary. Large screen sizes will
+     * always use a single row. For smaller screen sizes, a single row is used when only two of `start`,
+     * `title`, and `end` props are provided - and a second row is used when all three are provided.
+     *
+     *  [Single row variations] - For larger screen sizes, and smaller screen sizes when only two of `start`,
+     *                            `title`, and `end` props are provided - everything stays on one row:
+     *
+     *  1. When `start` is present and `end` is absent, `title` is placed next to `start`.
+     *    +-------+-------------------------+
+     *    | Start | Title                   |
+     *    +-------+-------------------------+
+     *
+     *  2. When `end` is present and `start` is absent, title is placed next to `end`.
+     *    +----------------+----------------+
+     *    | Title          |            End |
+     *    +----------------+----------------+
+     *
+     *  3. When neither `start` nor `end` is present.
+     *    +---------------------------------+
+     *    | Title                           |
+     *    +---------------------------------+
+     *
+     *   4. Large screen sizes when `start`, `title`, and `end` are present.
+     *    +-------+-------------------+-----+
+     *    | Start | Title             | End |
+     *    +-------+-------------------+-----+
+     *
+     *  [Double row variation] - For smaller screen sizes - if `start`, `end`, and `title` are present, `title`
+     *                           moves to the second row:
+     *    +----------------+-----------------+
+     *    | Start          |             End |
+     *    +----------------+-----------------+
+     *    | Title                            |
+     *    +----------------------------------+
+     *
+     *
+     *
+     * */
+    _jsxs(Grid, _objectSpread(_objectSpread({
+      ref: ref,
+      className: cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
+      overflow: overflow,
+      role: role,
+      style: _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root),
+      templateColumns: templateColumns
+    }, props), {}, {
+      children: [!!start && /*#__PURE__*/_jsx(Box, {
+        alignItems: "center",
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.start,
+        height: pageHeaderHeight,
+        paddingEnd: 3,
+        paddingStart: pageHeaderStartPaddingStart,
+        style: styles === null || styles === void 0 ? void 0 : styles.start,
+        children: start
+      }), !!title && /*#__PURE__*/_jsx(Box, {
+        alignItems: "center",
+        className: cx(start && end ? gridStylesMobileTitleCss : undefined, classNames === null || classNames === void 0 ? void 0 : classNames.title),
+        justifyContent: "flex-start",
+        paddingStart: titleResponsivePaddingLeft,
+        style: styles === null || styles === void 0 ? void 0 : styles.title,
+        testID: "responsive-title-container",
+        children: typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
+          as: "h1",
+          display: "block",
+          font: "title1",
+          children: title
+        }) : title
+      }), !!end && /*#__PURE__*/_jsx(Box, {
+        alignItems: "center",
+        className: cx(gridStylesMobileEndCss, classNames === null || classNames === void 0 ? void 0 : classNames.end),
+        height: pageHeaderHeight,
+        justifyContent: "flex-end",
+        paddingX: pageHeaderEndPaddingX,
+        style: styles === null || styles === void 0 ? void 0 : styles.end,
+        testID: "responsive-end-container",
+        children: end
+      })]
+    }))
+  );
+}));
+import "./PageHeader.css";

package/esm/page/__figma__/PageFooter.figma.js

@@ -0,0 +1,17 @@
+import { figma } from '@figma/code-connect';
+import { PageFooter } from '../PageFooter';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(PageFooter, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=17685%3A3266', {
+  imports: ["import { PageFooter } from '@coinbase/cds-web/page/PageFooter';"],
+  props: {
+    action: figma.children('ButtonGroup')
+  },
+  example: _ref => {
+    let {
+      action
+    } = _ref;
+    return /*#__PURE__*/_jsx(PageFooter, {
+      action: action
+    });
+  }
+});