@coinbase/cds-web 0.0.0 → 8.13.1

package/esm/cells/ContentCell.js

@@ -0,0 +1,111 @@
+const _excluded = ["as", "accessory", "title", "description", "disabled", "media", "meta", "selected", "subtitle", "detailWidth", "priority", "innerSpacing", "outerSpacing", "alignItems"];
+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 { isProduction } from '@coinbase/cds-utils';
+import { Box } from '../layout/Box';
+import { HStack } from '../layout/HStack';
+import { VStack } from '../layout/VStack';
+import { Text } from '../typography/Text';
+import { Cell } from './Cell';
+import { CellAccessory } from './CellAccessory';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const overflowCss = "overflowCss-o1npfhjk";
+const truncationCss = "truncationCss-t1vpzve9";
+export const contentCellDefaultElement = 'div';
+export const ContentCell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      as,
+      accessory,
+      title,
+      description,
+      disabled,
+      media,
+      meta,
+      selected,
+      subtitle,
+      detailWidth,
+      priority,
+      innerSpacing,
+      outerSpacing,
+      alignItems = 'flex-start'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const Component = as !== null && as !== void 0 ? as : contentCellDefaultElement;
+  if (!isProduction()) {
+    if (meta && !title && !subtitle) {
+      console.error('ContentCell: Cannot use `meta` without a `title` or `subtitle`.');
+    }
+  }
+  const accessoryType = selected ? 'selected' : accessory;
+  const hasTitles = Boolean(title !== null && title !== void 0 ? title : subtitle);
+  return /*#__PURE__*/_jsxs(Cell, _objectSpread(_objectSpread({
+    ref: ref,
+    accessory: accessoryType && /*#__PURE__*/_jsx(CellAccessory, {
+      paddingTop: 0.5,
+      type: accessoryType
+    }),
+    alignItems: alignItems,
+    as: Component,
+    detailWidth: detailWidth,
+    disabled: disabled,
+    innerSpacing: innerSpacing,
+    media: media,
+    outerSpacing: outerSpacing,
+    priority: priority,
+    selected: selected
+  }, props), {}, {
+    children: [hasTitles && /*#__PURE__*/_jsxs(HStack, {
+      alignItems: "flex-start",
+      justifyContent: "space-between",
+      children: [/*#__PURE__*/_jsxs(VStack, {
+        className: truncationCss,
+        flexGrow: 1,
+        flexShrink: 1,
+        children: [!!title && /*#__PURE__*/_jsx(Text, {
+          as: "div",
+          display: "block",
+          font: "headline",
+          overflow: "truncate",
+          children: title
+        }), !!subtitle && /*#__PURE__*/_jsx(Text, {
+          as: "div",
+          display: "block",
+          font: "label2",
+          overflow: "truncate",
+          paddingBottom: description ? 0.5 : 0,
+          paddingTop: title ? 0.5 : 0,
+          children: subtitle
+        })]
+      }), !!meta && /*#__PURE__*/_jsx(Box, {
+        className: truncationCss,
+        flexGrow: 0,
+        flexShrink: 0,
+        justifyContent: "flex-end",
+        paddingStart: 2,
+        paddingTop: 0.5,
+        children: /*#__PURE__*/_jsx(Text, {
+          color: "fgMuted",
+          font: "label2",
+          overflow: "truncate",
+          children: meta
+        })
+      })]
+    }), !!description && /*#__PURE__*/_jsx("div", {
+      className: overflowCss,
+      children: /*#__PURE__*/_jsx(Text, {
+        as: "div",
+        color: "fgMuted",
+        display: "block",
+        font: "body",
+        children: description
+      })
+    })]
+  }));
+}));
+import "./ContentCell.css";

package/esm/cells/ContentCellFallback.js

@@ -0,0 +1,69 @@
+import React, { memo } from 'react';
+import { getRectWidthVariant } from '@coinbase/cds-common/utils/getRectWidthVariant';
+import { Box } from '../layout/Box';
+import { Fallback } from '../layout/Fallback';
+import { Cell } from './Cell';
+import { MediaFallback } from './MediaFallback';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const fullWidthStyle = {
+  width: '100%'
+};
+const floatStyle = {
+  float: 'right',
+  width: '30%'
+};
+export const ContentCellFallback = /*#__PURE__*/memo(function ContentCellFallback(_ref) {
+  let {
+    title,
+    description,
+    media,
+    meta,
+    subtitle,
+    disableRandomRectWidth,
+    rectWidthVariant
+  } = _ref;
+  // We can't use ContentCell here as we need to account for percentage based widths.
+  // Flexbox collides with percentages also, so we need to wrap in normal divs.
+  return /*#__PURE__*/_jsx(Cell, {
+    media: media && /*#__PURE__*/_jsx(MediaFallback, {
+      type: media
+    }),
+    children: /*#__PURE__*/_jsxs("div", {
+      style: fullWidthStyle,
+      children: [meta && /*#__PURE__*/_jsx("div", {
+        style: floatStyle,
+        children: /*#__PURE__*/_jsx(Box, {
+          flexShrink: 0,
+          justifyContent: "flex-end",
+          children: /*#__PURE__*/_jsx(Fallback, {
+            percentage: true,
+            disableRandomRectWidth: disableRandomRectWidth,
+            height: 18,
+            rectWidthVariant: getRectWidthVariant(rectWidthVariant, 0),
+            width: 50
+          })
+        })
+      }), title && /*#__PURE__*/_jsx(Fallback, {
+        percentage: true,
+        disableRandomRectWidth: disableRandomRectWidth,
+        height: 18,
+        rectWidthVariant: getRectWidthVariant(rectWidthVariant, 1),
+        width: 45
+      }), subtitle && /*#__PURE__*/_jsx(Fallback, {
+        percentage: true,
+        disableRandomRectWidth: disableRandomRectWidth,
+        height: 16,
+        paddingTop: 0.5,
+        rectWidthVariant: getRectWidthVariant(rectWidthVariant, 2),
+        width: 35
+      }), description && /*#__PURE__*/_jsx(Fallback, {
+        percentage: true,
+        disableRandomRectWidth: disableRandomRectWidth,
+        height: 24,
+        paddingTop: 0.5,
+        rectWidthVariant: getRectWidthVariant(rectWidthVariant, 3),
+        width: 65
+      })]
+    })
+  });
+});

package/esm/cells/ListCell.css

@@ -0,0 +1 @@
+.overflowCss-onthvgs{overflow:auto;text-overflow:unset;white-space:normal;}

package/esm/cells/ListCell.js

@@ -0,0 +1,102 @@
+const _excluded = ["as", "accessory", "action", "compact", "title", "description", "detail", "disabled", "disableMultilineTitle", "disableSelectionAccessory", "helperText", "media", "multiline", "selected", "subdetail", "variant", "intermediary", "priority", "innerSpacing", "outerSpacing", "detailWidth"];
+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 { compactListHeight, listHeight } from '@coinbase/cds-common/tokens/cell';
+import { Box } from '../layout/Box';
+import { VStack } from '../layout/VStack';
+import { Text } from '../typography/Text';
+import { Cell } from './Cell';
+import { CellAccessory } from './CellAccessory';
+import { CellDetail } from './CellDetail';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const overflowCss = "overflowCss-onthvgs";
+export const listCellDefaultElement = 'div';
+export const ListCell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      as,
+      accessory,
+      action,
+      compact,
+      title,
+      description,
+      detail,
+      disabled,
+      disableMultilineTitle = false,
+      disableSelectionAccessory,
+      helperText,
+      media,
+      multiline,
+      selected,
+      subdetail,
+      variant,
+      intermediary,
+      priority,
+      innerSpacing,
+      outerSpacing,
+      detailWidth
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const Component = as !== null && as !== void 0 ? as : listCellDefaultElement;
+  const minHeight = compact ? compactListHeight : listHeight;
+  const accessoryType = selected && !disableSelectionAccessory ? 'selected' : accessory;
+  const end = useMemo(() => {
+    if (action) {
+      return /*#__PURE__*/_jsx(Box, {
+        justifyContent: "flex-end",
+        children: action
+      });
+    }
+    if (detail || subdetail) {
+      return /*#__PURE__*/_jsx(CellDetail, {
+        detail: detail,
+        subdetail: subdetail,
+        variant: variant
+      });
+    }
+    return undefined;
+  }, [action, detail, subdetail, variant]);
+  return /*#__PURE__*/_jsx(Cell, _objectSpread(_objectSpread({
+    ref: ref,
+    accessory: accessoryType && /*#__PURE__*/_jsx(CellAccessory, {
+      type: accessoryType
+    }),
+    as: Component,
+    bottomContent: helperText,
+    detail: end,
+    detailWidth: detailWidth,
+    disabled: disabled,
+    innerSpacing: innerSpacing,
+    intermediary: intermediary,
+    media: media,
+    minHeight: minHeight,
+    outerSpacing: outerSpacing,
+    priority: priority,
+    selected: selected
+  }, props), {}, {
+    children: /*#__PURE__*/_jsxs(VStack, {
+      children: [!!title && /*#__PURE__*/_jsx(Text, {
+        as: "div",
+        display: "block",
+        font: "headline",
+        numberOfLines: description || disableMultilineTitle ? 1 : 2,
+        overflow: "wrap",
+        children: title
+      }), !!description && /*#__PURE__*/_jsx(Text, {
+        as: "div",
+        className: multiline ? overflowCss : undefined,
+        color: "fgMuted",
+        display: "block",
+        font: "body",
+        overflow: multiline ? undefined : 'truncate',
+        children: description
+      })]
+    })
+  }));
+}));
+import "./ListCell.css";

package/esm/cells/ListCellFallback.js

@@ -0,0 +1,127 @@
+const _excluded = ["classNames", "styles", "title", "description", "detail", "subdetail", "media", "disableRandomRectWidth", "rectWidthVariant", "helperText"];
+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 { memo, useMemo } from 'react';
+import { getRectWidthVariant } from '@coinbase/cds-common/utils/getRectWidthVariant';
+import { VStack } from '../layout';
+import { Fallback } from '../layout/Fallback';
+import { Cell } from './Cell';
+import { MediaFallback } from './MediaFallback';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_ref) {
+  let {
+      classNames,
+      styles,
+      title,
+      description,
+      detail,
+      subdetail,
+      media,
+      disableRandomRectWidth,
+      rectWidthVariant,
+      helperText
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  // We cant use ListCell here as we need to account for percentage based widths.
+  // Flexbox collides with percentages also, so we need to wrap in normal divs.
+
+  const bottomContentFallback = useMemo(() => {
+    if (!helperText) {
+      return null;
+    }
+    return /*#__PURE__*/_jsx(Fallback, {
+      percentage: true,
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.helperText,
+      disableRandomRectWidth: disableRandomRectWidth,
+      height: 22,
+      rectWidthVariant: getRectWidthVariant(rectWidthVariant, 4),
+      style: styles === null || styles === void 0 ? void 0 : styles.helperText,
+      testID: "list-cell-fallback-helper-text",
+      width: 85
+    });
+  }, [classNames === null || classNames === void 0 ? void 0 : classNames.helperText, disableRandomRectWidth, helperText, rectWidthVariant, styles === null || styles === void 0 ? void 0 : styles.helperText]);
+  const detailFallback = useMemo(() => {
+    if (!detail && !subdetail) {
+      return null;
+    }
+    return /*#__PURE__*/_jsxs(VStack, {
+      alignItems: "flex-end",
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.detail,
+      flexShrink: 0,
+      gap: 0.5,
+      style: styles === null || styles === void 0 ? void 0 : styles.detail,
+      testID: "list-cell-fallback-detail",
+      children: [/*#__PURE__*/_jsx(Fallback, {
+        percentage: true,
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.detail,
+        disableRandomRectWidth: disableRandomRectWidth,
+        height: 22,
+        rectWidthVariant: getRectWidthVariant(rectWidthVariant, 0),
+        style: styles === null || styles === void 0 ? void 0 : styles.detail,
+        width: 60
+      }), /*#__PURE__*/_jsx(Fallback, {
+        percentage: true,
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.subdetail,
+        disableRandomRectWidth: disableRandomRectWidth,
+        height: 22,
+        rectWidthVariant: getRectWidthVariant(rectWidthVariant, 1),
+        style: styles === null || styles === void 0 ? void 0 : styles.subdetail,
+        width: 50
+      })]
+    });
+  }, [detail, subdetail, classNames === null || classNames === void 0 ? void 0 : classNames.detail, classNames === null || classNames === void 0 ? void 0 : classNames.subdetail, styles === null || styles === void 0 ? void 0 : styles.detail, styles === null || styles === void 0 ? void 0 : styles.subdetail, disableRandomRectWidth, rectWidthVariant]);
+  const titleFallback = useMemo(() => {
+    if (!title) {
+      return null;
+    }
+    return /*#__PURE__*/_jsx(Fallback, {
+      percentage: true,
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.title,
+      disableRandomRectWidth: disableRandomRectWidth,
+      height: 22,
+      rectWidthVariant: getRectWidthVariant(rectWidthVariant, 2),
+      style: styles === null || styles === void 0 ? void 0 : styles.title,
+      testID: "list-cell-fallback-title",
+      width: 65
+    });
+  }, [classNames === null || classNames === void 0 ? void 0 : classNames.title, disableRandomRectWidth, rectWidthVariant, styles === null || styles === void 0 ? void 0 : styles.title, title]);
+  const descriptionFallback = useMemo(() => {
+    if (!description) {
+      return null;
+    }
+    return /*#__PURE__*/_jsx(Fallback, {
+      percentage: true,
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.description,
+      disableRandomRectWidth: disableRandomRectWidth,
+      height: 22,
+      rectWidthVariant: getRectWidthVariant(rectWidthVariant, 3),
+      style: styles === null || styles === void 0 ? void 0 : styles.description,
+      testID: "list-cell-fallback-description",
+      width: 85
+    });
+  }, [classNames === null || classNames === void 0 ? void 0 : classNames.description, disableRandomRectWidth, rectWidthVariant, styles === null || styles === void 0 ? void 0 : styles.description, description]);
+  const mediaFallback = useMemo(() => {
+    if (!media) {
+      return undefined;
+    }
+    return /*#__PURE__*/_jsx(MediaFallback, {
+      testID: "list-cell-fallback-media",
+      type: media
+    });
+  }, [media]);
+  return /*#__PURE__*/_jsx(Cell, _objectSpread(_objectSpread({
+    bottomContent: bottomContentFallback,
+    detail: detailFallback,
+    media: mediaFallback
+  }, props), {}, {
+    children: /*#__PURE__*/_jsxs(VStack, {
+      gap: 0.5,
+      children: [titleFallback, descriptionFallback]
+    })
+  }));
+});

package/esm/cells/MediaFallback.js

@@ -0,0 +1,24 @@
+import React, { memo } from 'react';
+import { imageSize, mediaSize } from '@coinbase/cds-common/tokens/cell';
+import { Fallback } from '../layout/Fallback';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const MediaFallback = /*#__PURE__*/memo(function MediaFallback(_ref) {
+  let {
+    type,
+    testID
+  } = _ref;
+  if (type === 'image') {
+    return /*#__PURE__*/_jsx(Fallback, {
+      height: imageSize,
+      shape: "squircle",
+      testID: testID,
+      width: imageSize
+    });
+  }
+  return /*#__PURE__*/_jsx(Fallback, {
+    height: mediaSize,
+    shape: "circle",
+    testID: testID,
+    width: mediaSize
+  });
+});

package/esm/cells/__figma__/ContentCell.figma.js

@@ -0,0 +1,40 @@
+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 from 'react';
+import { figma } from '@figma/code-connect';
+import { ContentCell } from '../ContentCell';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(ContentCell, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=237-16238&m=dev', {
+  imports: ["import { ContentCell } from '@coinbase/cds-web/cells/ContentCell';"],
+  props: {
+    selected: figma.enum('state', {
+      selected: true
+    }),
+    disabled: figma.boolean('disabled'),
+    title: figma.boolean('title', {
+      true: figma.string('title string'),
+      false: undefined
+    }),
+    subtitle: figma.boolean('show subtitle', {
+      true: figma.string('subtitle string'),
+      false: undefined
+    }),
+    media: figma.instance('🔄 start'),
+    meta: figma.boolean('show meta', {
+      true: figma.string('meta string'),
+      false: undefined
+    }),
+    description: figma.boolean('show description', {
+      true: figma.string('description string'),
+      false: undefined
+    }),
+    accessory: figma.boolean('show accessory', {
+      true: 'arrow',
+      false: undefined
+    })
+  },
+  example: props => /*#__PURE__*/_jsx(ContentCell, _objectSpread({}, props))
+});

package/esm/cells/__figma__/ListCell.figma.js

@@ -0,0 +1,79 @@
+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 from 'react';
+import { figma } from '@figma/code-connect';
+import { ListCell } from '../ListCell';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(ListCell, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=236-27897&m=dev', {
+  imports: ["import { ListCell } from '@coinbase/cds-web/cells/ListCell';"],
+  props: {
+    selected: figma.enum('state', {
+      selected: true
+    }),
+    disabled: figma.boolean('disabled'),
+    compact: figma.boolean('compact'),
+    media: figma.boolean('show media', {
+      true: figma.instance('media'),
+      false: undefined
+    }),
+    title: figma.boolean('show title', {
+      true: figma.textContent('Title'),
+      false: undefined
+    }),
+    description: figma.boolean('show description', {
+      true: figma.textContent('Description'),
+      false: undefined
+    }),
+    action: figma.boolean('show end', {
+      true: figma.instance('end'),
+      false: undefined
+    }),
+    accessory: figma.boolean('show accessory', {
+      true: 'more',
+      false: undefined
+    })
+  },
+  example: props => /*#__PURE__*/_jsx(ListCell, _objectSpread({}, props))
+});
+figma.connect(ListCell, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=236-28162&m=dev', {
+  imports: ["import { ListCell } from '@coinbase/cds-web/cells/ListCell';"],
+  props: {
+    selected: figma.enum('state', {
+      selected: true
+    }),
+    disabled: figma.boolean('disabled'),
+    compact: figma.boolean('compact'),
+    media: figma.boolean('show media', {
+      true: figma.instance('media'),
+      false: undefined
+    }),
+    title: figma.boolean('show title', {
+      true: figma.textContent('Title'),
+      false: undefined
+    }),
+    description: figma.boolean('show description', {
+      true: figma.textContent('Description'),
+      false: undefined
+    }),
+    intermediary: figma.boolean('show sparkline', {
+      true: figma.children('Sparkline'),
+      false: undefined
+    }),
+    detail: figma.boolean('show detail', {
+      true: figma.string('detail string'),
+      false: undefined
+    }),
+    subdetail: figma.boolean('show subDetail', {
+      true: figma.string('subDetail string'),
+      false: undefined
+    }),
+    accessory: figma.boolean('show accessory', {
+      true: 'more',
+      false: undefined
+    })
+  },
+  example: props => /*#__PURE__*/_jsx(ListCell, _objectSpread({}, props))
+});

package/esm/cells/index.js

@@ -0,0 +1,6 @@
+export * from './CellHelperText';
+export * from './CellMedia';
+export * from './ContentCell';
+export * from './ContentCellFallback';
+export * from './ListCell';
+export * from './ListCellFallback';

package/esm/chips/Chip.css

@@ -0,0 +1,2 @@
+.contentCss-chdcix9{-webkit-transition:background 150ms cubic-bezier(0.6,0,0.15,1);transition:background 150ms cubic-bezier(0.6,0,0.15,1);}
+.containerCss-c1792b5d{max-height:-webkit-fit-content;max-height:-moz-fit-content;max-height:fit-content;min-width:min(fit-content,200px);}

package/esm/chips/Chip.js

@@ -0,0 +1,79 @@
+const _excluded = ["children", "start", "end", "maxWidth", "inverted", "compact", "numberOfLines", "onClick", "testID", "accessibilityLabel", "contentStyle", "borderRadius", "background"];
+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, Fragment, memo } from 'react';
+import { curves, durations } from '@coinbase/cds-common/motion/tokens';
+import { chipMaxWidth } from '@coinbase/cds-common/tokens/chip';
+import { Box, HStack } from '../layout';
+import { Pressable } from '../system/Pressable';
+import { InvertedThemeProvider } from '../system/ThemeProvider';
+import { Text } from '../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const contentCss = "contentCss-chdcix9";
+
+// styles that clamp the width and height of the Chip container
+const containerCss = "containerCss-c1792b5d";
+
+/**
+ * This is a basic Chip component used to create all Chip components.
+ */
+export const Chip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Chip(_ref, ref) {
+  let {
+      children,
+      start,
+      end,
+      maxWidth = chipMaxWidth,
+      inverted,
+      compact,
+      numberOfLines = 1,
+      onClick,
+      testID,
+      accessibilityLabel,
+      contentStyle,
+      borderRadius = 700,
+      background = 'bgSecondary'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const WrapperComponent = inverted ? InvertedThemeProvider : Fragment;
+  const content = /*#__PURE__*/_jsxs(HStack, {
+    alignItems: "center",
+    background: onClick ? undefined : background,
+    borderRadius: borderRadius,
+    className: contentCss,
+    gap: 1,
+    maxWidth: maxWidth,
+    paddingX: compact ? 1 : 2,
+    paddingY: compact ? 0.5 : 1,
+    style: contentStyle,
+    testID: !onClick ? testID : undefined,
+    children: [start, typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
+      font: "headline",
+      numberOfLines: numberOfLines,
+      children: children
+    }) : children, end]
+  });
+
+  // The wrapping Box ensures that the layout is consistent since the child pressable and provider child elements conditionally render
+  return /*#__PURE__*/_jsx(Box, {
+    className: containerCss,
+    display: "block",
+    children: /*#__PURE__*/_jsx(WrapperComponent, {
+      children: onClick ? /*#__PURE__*/_jsx(Pressable, _objectSpread(_objectSpread({
+        ref: ref,
+        accessibilityLabel: accessibilityLabel,
+        background: background,
+        borderRadius: borderRadius,
+        onClick: onClick,
+        testID: testID
+      }, props), {}, {
+        children: content
+      })) : content
+    })
+  });
+}));
+import "./Chip.css";

package/esm/chips/ChipProps.js

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