@coinbase/cds-web 0.0.0 → 8.13.1

package/esm/carousel/DefaultCarouselNavigation.js

@@ -0,0 +1,60 @@
+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, { memo } from 'react';
+import { IconButton } from '../buttons/IconButton';
+import { cx } from '../cx';
+import { HStack } from '../layout/HStack';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const navigationCss = "navigationCss-n15h1fxo";
+export const DefaultCarouselNavigation = /*#__PURE__*/memo(function DefaultCarouselNavigation(_ref) {
+  var _testIDMap$previousBu, _testIDMap$nextButton;
+  let {
+    onGoPrevious,
+    onGoNext,
+    disableGoPrevious,
+    disableGoNext,
+    nextPageAccessibilityLabel = 'Next page',
+    previousPageAccessibilityLabel = 'Previous page',
+    previousIcon = 'caretLeft',
+    nextIcon = 'caretRight',
+    variant = 'secondary',
+    compact,
+    className,
+    classNames,
+    style,
+    styles,
+    testIDMap,
+    hideUnlessFocused
+  } = _ref;
+  return /*#__PURE__*/_jsxs(HStack, {
+    className: cx(navigationCss, className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
+    "data-hiddenunlessfocused": hideUnlessFocused,
+    gap: 1,
+    style: _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root),
+    children: [/*#__PURE__*/_jsx(IconButton, {
+      accessibilityLabel: previousPageAccessibilityLabel,
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.previousButton,
+      compact: compact,
+      disabled: disableGoPrevious,
+      name: previousIcon,
+      onClick: onGoPrevious,
+      style: styles === null || styles === void 0 ? void 0 : styles.previousButton,
+      testID: (_testIDMap$previousBu = testIDMap === null || testIDMap === void 0 ? void 0 : testIDMap.previousButton) !== null && _testIDMap$previousBu !== void 0 ? _testIDMap$previousBu : 'carousel-previous-button',
+      variant: variant
+    }), /*#__PURE__*/_jsx(IconButton, {
+      accessibilityLabel: nextPageAccessibilityLabel,
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.nextButton,
+      compact: compact,
+      disabled: disableGoNext,
+      name: nextIcon,
+      onClick: onGoNext,
+      style: styles === null || styles === void 0 ? void 0 : styles.nextButton,
+      testID: (_testIDMap$nextButton = testIDMap === null || testIDMap === void 0 ? void 0 : testIDMap.nextButton) !== null && _testIDMap$nextButton !== void 0 ? _testIDMap$nextButton : 'carousel-next-button',
+      variant: variant
+    })]
+  });
+});
+import "./DefaultCarouselNavigation.css";

package/esm/carousel/DefaultCarouselPagination.css

@@ -0,0 +1,2 @@
+.defaultPaginationCss-dyqwmgi{padding:var(--space-0_5) 0;}
+.dotCss-dea8kmz{width:var(--space-3);height:var(--space-0_5);border-radius:var(--borderRadius-100);}

package/esm/carousel/DefaultCarouselPagination.js

@@ -0,0 +1,119 @@
+const _excluded = ["id", "isActive"];
+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, { memo, useCallback } from 'react';
+import { useRefMap } from '@coinbase/cds-common/hooks/useRefMap';
+import { RefMapContext, useRefMapContext } from '@coinbase/cds-common/system/RefMapContext';
+import { cx } from '../cx';
+import { HStack } from '../layout/HStack';
+import { Pressable } from '../system/Pressable';
+import { jsx as _jsx } from "react/jsx-runtime";
+const defaultPaginationCss = "defaultPaginationCss-dyqwmgi";
+const dotCss = "dotCss-dea8kmz";
+const PaginationDot = /*#__PURE__*/memo(function PressableWithRef(_ref) {
+  let {
+      id,
+      isActive
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const {
+    registerRef
+  } = useRefMapContext();
+  const refCallback = useCallback(ref => registerRef(id, ref), [registerRef, id]);
+  return /*#__PURE__*/_jsx(Pressable, _objectSpread({
+    ref: refCallback,
+    background: isActive ? 'bgPrimary' : 'bgLine',
+    borderColor: "transparent",
+    "data-active": isActive,
+    tabIndex: isActive ? undefined : -1
+  }, props));
+});
+export const DefaultCarouselPagination = /*#__PURE__*/memo(function DefaultCarouselPagination(_ref2) {
+  let {
+    totalPages,
+    activePageIndex,
+    onClickPage,
+    paginationAccessibilityLabel = 'Go to page',
+    className,
+    classNames,
+    style,
+    styles,
+    testID = 'carousel-pagination'
+  } = _ref2;
+  const paginationRefMap = useRefMap();
+  const getPaginationKeyDownHandler = useCallback(pageIndex => {
+    const lastIndex = totalPages - 1;
+    const nextIndex = pageIndex < lastIndex ? pageIndex + 1 : 0;
+    const prevIndex = pageIndex !== 0 ? pageIndex - 1 : lastIndex;
+    return function handleKeyDown(e) {
+      var _paginationRefMap$get, _paginationRefMap$get2;
+      switch (e.key) {
+        case 'ArrowRight':
+          e.preventDefault();
+          (_paginationRefMap$get = paginationRefMap.getRef("".concat(testID, "-").concat(nextIndex))) === null || _paginationRefMap$get === void 0 || _paginationRefMap$get.focus();
+          break;
+        case 'ArrowLeft':
+          e.preventDefault();
+          (_paginationRefMap$get2 = paginationRefMap.getRef("".concat(testID, "-").concat(prevIndex))) === null || _paginationRefMap$get2 === void 0 || _paginationRefMap$get2.focus();
+          break;
+        case 'Home':
+          {
+            var _paginationRefMap$get3;
+            e.preventDefault();
+            (_paginationRefMap$get3 = paginationRefMap.getRef("".concat(testID, "-0"))) === null || _paginationRefMap$get3 === void 0 || _paginationRefMap$get3.focus();
+            break;
+          }
+        case 'End':
+          {
+            var _paginationRefMap$get4;
+            e.preventDefault();
+            (_paginationRefMap$get4 = paginationRefMap.getRef("".concat(testID, "-").concat(lastIndex))) === null || _paginationRefMap$get4 === void 0 || _paginationRefMap$get4.focus();
+            break;
+          }
+        case ' ':
+        case 'Enter':
+          e.preventDefault();
+          onClickPage === null || onClickPage === void 0 || onClickPage(pageIndex);
+          break;
+        default:
+          break;
+      }
+    };
+  }, [paginationRefMap, testID, totalPages, onClickPage]);
+  return /*#__PURE__*/_jsx(RefMapContext.Provider, {
+    value: paginationRefMap,
+    children: /*#__PURE__*/_jsx(HStack, {
+      className: cx(defaultPaginationCss, className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
+      gap: 0.5,
+      justifyContent: "center",
+      style: _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root),
+      children: totalPages > 0 ? Array.from({
+        length: totalPages
+      }, (_, index) => /*#__PURE__*/_jsx(PaginationDot, {
+        accessibilityLabel: typeof paginationAccessibilityLabel === 'function' ? paginationAccessibilityLabel(index) : "".concat(paginationAccessibilityLabel, " ").concat(index + 1),
+        className: cx(dotCss, classNames === null || classNames === void 0 ? void 0 : classNames.dot),
+        id: "".concat(testID, "-").concat(index),
+        isActive: index === activePageIndex,
+        onClick: () => onClickPage === null || onClickPage === void 0 ? void 0 : onClickPage(index),
+        onKeyDown: getPaginationKeyDownHandler(index),
+        style: styles === null || styles === void 0 ? void 0 : styles.dot,
+        testID: "".concat(testID, "-").concat(index)
+      }, index)) : /*#__PURE__*/_jsx(Pressable, {
+        disabled: true,
+        "aria-hidden": "true",
+        background: "bgLine",
+        borderColor: "transparent",
+        className: cx(dotCss, classNames === null || classNames === void 0 ? void 0 : classNames.dot),
+        style: _objectSpread({
+          opacity: 0
+        }, styles === null || styles === void 0 ? void 0 : styles.dot)
+      })
+    })
+  });
+});
+import "./DefaultCarouselPagination.css";

package/esm/carousel/index.js

@@ -0,0 +1,4 @@
+export * from './Carousel';
+export * from './CarouselItem';
+export * from './DefaultCarouselNavigation';
+export * from './DefaultCarouselPagination';

package/esm/cells/Cell.css

@@ -0,0 +1,4 @@
+.pressCss-p17awri1{border-style:hidden;padding:0;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;}
+.insetFocusRingCss-i1n4pqsb{position:relative;}.insetFocusRingCss-i1n4pqsb:focus{outline:none;}.insetFocusRingCss-i1n4pqsb:focus-visible{outline-style:solid;outline-width:2px;outline-color:var(--color-bgPrimary);outline-offset:0;}
+.baseCss-b1bbnpmz{display:block;}
+.truncationCss-tdaia71{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}

package/esm/cells/Cell.js

@@ -0,0 +1,201 @@
+const _excluded = ["as", "accessory", "alignItems", "borderRadius", "children", "className", "contentClassName", "detail", "detailWidth", "disabled", "gap", "columnGap", "rowGap", "intermediary", "media", "minHeight", "maxHeight", "onClick", "onKeyDown", "onKeyUp", "priority", "selected", "testID", "target", "href", "tabIndex", "shouldOverflow", "accessibilityLabel", "accessibilityLabelledBy", "accessibilityHint", "innerSpacing", "outerSpacing", "bottomContent"],
+  _excluded2 = ["marginX"];
+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 { hasCellPriority } from '@coinbase/cds-common/utils/cell';
+import { cx } from '../cx';
+import { useCellSpacing } from '../hooks/useCellSpacing';
+import { Box } from '../layout/Box';
+import { HStack } from '../layout/HStack';
+import { VStack } from '../layout/VStack';
+import { Pressable } from '../system/Pressable';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const pressCss = "pressCss-p17awri1";
+const insetFocusRingCss = "insetFocusRingCss-i1n4pqsb";
+const baseCss = "baseCss-b1bbnpmz";
+
+// Display and min-width are necessary for truncation to work:
+// https://css-tricks.com/flexbox-truncated-text/
+const truncationCss = "truncationCss-tdaia71";
+export const cellDefaultElement = 'div';
+export const Cell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  var _ref2;
+  let {
+      as,
+      accessory,
+      alignItems = 'center',
+      borderRadius = 200,
+      children,
+      className,
+      contentClassName,
+      detail,
+      detailWidth,
+      disabled,
+      gap = 2,
+      columnGap,
+      rowGap = 1,
+      intermediary,
+      media,
+      minHeight,
+      maxHeight,
+      onClick,
+      onKeyDown,
+      onKeyUp,
+      priority,
+      selected,
+      testID,
+      target,
+      href,
+      tabIndex,
+      /**
+       * For TableCell, we don't want to apply an
+       * overflow class unless we've defined overflow
+       * as either `'truncate' | 'clip'`.
+       *
+       * */
+      shouldOverflow,
+      accessibilityLabel,
+      accessibilityLabelledBy,
+      accessibilityHint,
+      innerSpacing: innerSpacingProp,
+      outerSpacing: outerSpacingProp,
+      bottomContent: bottom
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const Component = as !== null && as !== void 0 ? as : cellDefaultElement;
+  const {
+    inner: innerSpacing,
+    outer: outerSpacing
+  } = useCellSpacing({
+    innerSpacing: innerSpacingProp,
+    outerSpacing: outerSpacingProp
+  });
+  const {
+      marginX: innerSpacingMarginX
+    } = innerSpacing,
+    innerSpacingWithoutMarginX = _objectWithoutProperties(innerSpacing, _excluded2);
+  const isAnchor = Boolean(href);
+  const isButton = Boolean((_ref2 = onClick !== null && onClick !== void 0 ? onClick : onKeyDown) !== null && _ref2 !== void 0 ? _ref2 : onKeyUp);
+  const linkable = isAnchor || isButton;
+  const contentTruncationStyle = cx(baseCss, !shouldOverflow && truncationCss);
+  const content = useMemo(() => {
+    // props for the entire inner container that wraps the top content
+    // (media, children, intermediary, detail, accessory) and the bottom content
+    const innerContainerProps = _objectSpread(_objectSpread({
+      borderRadius,
+      className: contentClassName,
+      testID
+    }, selected ? {
+      background: 'bgAlternate'
+    } : {}), linkable ? innerSpacingWithoutMarginX : innerSpacing);
+
+    // props for the container of the top content only(media, children, intermediary, detail, accessory)
+    const topContentContainerProps = {
+      alignItems: alignItems,
+      flexGrow: 1,
+      gap: columnGap || gap,
+      width: '100%'
+    };
+
+    // content that is displayed horizontally above the bottom content
+    const topContent = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [media && /*#__PURE__*/_jsx(Box, {
+        flexGrow: 0,
+        flexShrink: 0,
+        children: media
+      }), /*#__PURE__*/_jsx(Box, {
+        className: contentTruncationStyle,
+        flexGrow: 1,
+        flexShrink: hasCellPriority('start', priority) ? 0 : 1,
+        justifyContent: "flex-start",
+        children: children
+      }), !!intermediary && /*#__PURE__*/_jsx(Box, {
+        className: contentTruncationStyle,
+        flexGrow: 0,
+        flexShrink: hasCellPriority('middle', priority) ? 0 : 1,
+        justifyContent: "center",
+        children: intermediary
+      }), !!detail && /*#__PURE__*/_jsx(Box, {
+        alignItems: "flex-end",
+        className: contentTruncationStyle,
+        flexDirection: "column",
+        flexGrow: detailWidth ? undefined : 1,
+        flexShrink: detailWidth ? undefined : hasCellPriority('end', priority) ? 0 : 1,
+        justifyContent: "flex-end",
+        width: detailWidth,
+        children: detail
+      }), !!accessory && /*#__PURE__*/_jsx(Box, {
+        flexGrow: 0,
+        flexShrink: 0,
+        children: accessory
+      })]
+    });
+    if (!bottom) {
+      return /*#__PURE__*/_jsx(HStack, _objectSpread(_objectSpread(_objectSpread({}, topContentContainerProps), innerContainerProps), {}, {
+        children: topContent
+      }));
+    }
+    return /*#__PURE__*/_jsxs(VStack, _objectSpread(_objectSpread({
+      alignItems: "stretch",
+      flexGrow: 1,
+      gap: rowGap,
+      width: "100%"
+    }, innerContainerProps), {}, {
+      children: [/*#__PURE__*/_jsx(HStack, _objectSpread(_objectSpread({}, topContentContainerProps), {}, {
+        children: topContent
+      })), /*#__PURE__*/_jsx(Box, {
+        children: bottom
+      })]
+    }));
+  }, [borderRadius, contentClassName, testID, selected, linkable, innerSpacingWithoutMarginX, innerSpacing, alignItems, columnGap, gap, media, contentTruncationStyle, priority, children, intermediary, detail, detailWidth, accessory, bottom, rowGap]);
+  const wrappedContent = useMemo(() => {
+    const pressableSharedProps = {
+      noScaleOnPress: true,
+      transparentWhileInactive: true,
+      accessibilityHint,
+      accessibilityLabel,
+      accessibilityLabelledBy,
+      background: 'bg',
+      borderRadius,
+      className: cx(pressCss, insetFocusRingCss),
+      disabled,
+      marginX: innerSpacingMarginX,
+      onClick,
+      onKeyDown,
+      onKeyUp,
+      tabIndex,
+      testID: testID && "".concat(testID, "-cell-pressable")
+    };
+    if (isAnchor) return /*#__PURE__*/_jsx(Pressable, _objectSpread(_objectSpread({
+      as: "a",
+      href: href,
+      target: target
+    }, pressableSharedProps), {}, {
+      children: content
+    }));
+    if (isButton) return /*#__PURE__*/_jsx(Pressable, _objectSpread(_objectSpread({
+      as: "button"
+    }, pressableSharedProps), {}, {
+      children: content
+    }));
+    return content;
+  }, [isButton, accessibilityHint, accessibilityLabel, accessibilityLabelledBy, borderRadius, disabled, innerSpacingMarginX, onClick, onKeyDown, onKeyUp, tabIndex, testID, content, isAnchor, href, target]);
+  return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread(_objectSpread({
+    ref: ref,
+    alignItems: "stretch",
+    as: Component,
+    className: className,
+    maxHeight: maxHeight,
+    minHeight: minHeight,
+    width: "100%"
+  }, outerSpacing), props), {}, {
+    children: wrappedContent
+  }));
+}));
+import "./Cell.css";

package/esm/cells/CellAccessory.js

@@ -0,0 +1,50 @@
+const _excluded = ["type"];
+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 { Icon } from '../icons/Icon';
+import { Box } from '../layout/Box';
+import { isRtl } from '../utils/isRtl';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const cellAccessoryTestId = 'accessory';
+export const CellAccessory = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function CellAccessory(_ref, ref) {
+  let {
+      type
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  let icon;
+  if (type === 'more') {
+    icon = /*#__PURE__*/_jsx(Icon, {
+      color: "fgMuted",
+      name: "more",
+      size: "s"
+    });
+  }
+  if (type === 'arrow') {
+    icon = /*#__PURE__*/_jsx(Icon, {
+      color: "fgMuted",
+      name: isRtl() ? 'caretLeft' : 'caretRight',
+      size: "s"
+    });
+  }
+  if (type === 'selected') {
+    icon = /*#__PURE__*/_jsx(Icon, {
+      color: "fgPrimary",
+      name: "checkmark",
+      size: "s"
+    });
+  }
+  if (!icon) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    testID: cellAccessoryTestId,
+    children: icon
+  }));
+}));

package/esm/cells/CellDetail.js

@@ -0,0 +1,34 @@
+import React, { memo } from 'react';
+import { Text } from '../typography/Text';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const variantColorMap = {
+  foregroundMuted: 'fgMuted',
+  negative: 'fgNegative',
+  positive: 'fgPositive',
+  warning: 'fgWarning'
+};
+export const CellDetail = /*#__PURE__*/memo(function CellDetail(_ref) {
+  let {
+    detail,
+    subdetail,
+    variant = 'foregroundMuted'
+  } = _ref;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [!!detail && /*#__PURE__*/_jsx(Text, {
+      as: "div",
+      display: "block",
+      font: "body",
+      overflow: "truncate",
+      textAlign: "end",
+      children: detail
+    }), !!subdetail && /*#__PURE__*/_jsx(Text, {
+      as: "div",
+      color: variantColorMap[variant],
+      display: "block",
+      font: "body",
+      overflow: "truncate",
+      textAlign: "end",
+      children: subdetail
+    })]
+  });
+});

package/esm/cells/CellHelperText.js

@@ -0,0 +1,40 @@
+const _excluded = ["children", "variant", "as", "font"];
+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 { forwardRef, memo } from 'react';
+import { cellHelperTextVariants } from '@coinbase/cds-common/tokens/cell';
+import { Icon } from '../icons/Icon';
+import { Text } from '../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const CellHelperText = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      children,
+      variant = 'information',
+      as = 'span',
+      font = 'body'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const {
+    color,
+    iconName
+  } = cellHelperTextVariants[variant];
+  return /*#__PURE__*/_jsxs(Text, _objectSpread(_objectSpread({
+    as: as,
+    color: color,
+    font: font
+  }, props), {}, {
+    children: [/*#__PURE__*/_jsx(Icon, {
+      active: true,
+      "aria-hidden": "true",
+      color: "currentColor",
+      display: "inline-block",
+      name: iconName,
+      size: "xs"
+    }), ' ', children]
+  }));
+}));

package/esm/cells/CellMedia.js

@@ -0,0 +1,54 @@
+import React, { cloneElement, memo } from 'react';
+import { imageSize, mediaSize, pictogramScaleMultiplier } from '@coinbase/cds-common/tokens/cell';
+import { Icon } from '../icons/Icon';
+import { Box } from '../layout/Box';
+import { RemoteImage } from '../media/RemoteImage';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const CellMedia = /*#__PURE__*/memo(function CellMedia(props) {
+  let size = mediaSize;
+  let content = null;
+  if (props.type === 'icon') {
+    var _props$color;
+    content = /*#__PURE__*/_jsx(Icon, {
+      accessibilityLabel: props.accessibilityLabel,
+      active: props.active,
+      color: (_props$color = props.color) !== null && _props$color !== void 0 ? _props$color : 'fg',
+      name: props.name,
+      size: "s"
+    });
+  }
+  if (props.type === 'asset' || props.type === 'avatar' || props.type === 'image') {
+    const isImage = props.type === 'image';
+    if (isImage) {
+      size = imageSize;
+    }
+    content = /*#__PURE__*/_jsx(Box, {
+      alt: props.accessibilityLabel,
+      as: RemoteImage,
+      height: size,
+      shape: isImage ? 'squircle' : 'circle',
+      source: String(props.source),
+      width: size
+    });
+  }
+  if (props.type === 'pictogram') {
+    var _props$accessibilityL;
+    size = imageSize;
+    content = /*#__PURE__*/cloneElement(props.illustration, {
+      dimension: '48x48',
+      scaleMultiplier: pictogramScaleMultiplier,
+      alt: (_props$accessibilityL = props.accessibilityLabel) !== null && _props$accessibilityL !== void 0 ? _props$accessibilityL : props.illustration.props.alt
+    });
+  }
+  if (!content) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(Box, {
+    alignItems: "center",
+    height: size,
+    justifyContent: "center",
+    testID: props.testID,
+    width: size,
+    children: content
+  });
+});

package/esm/cells/ContentCell.css

@@ -0,0 +1,2 @@
+.overflowCss-o1npfhjk{overflow:auto;text-overflow:unset;white-space:normal;}
+.truncationCss-t1vpzve9{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}