@coinbase/cds-web 0.0.0 → 8.13.2

package/esm/buttons/IconButton.js

@@ -0,0 +1,94 @@
+const _excluded = ["as", "variant", "transparent", "compact", "background", "color", "borderColor", "borderRadius", "borderWidth", "alignItems", "justifyContent", "height", "width", "className", "name", "active", "flush", "loading", "accessibilityLabel", "accessibilityHint"];
+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 { transparentVariants, variants } from '@coinbase/cds-common/tokens/button';
+import { cx } from '../cx';
+import { useTheme } from '../hooks/useTheme';
+import { Icon } from '../icons/Icon';
+import { Spinner } from '../loaders/Spinner';
+import { Pressable } from '../system/Pressable';
+import { spinnerHeight } from './Button';
+import { jsx as _jsx } from "react/jsx-runtime";
+const baseSpinnerCss = "baseSpinnerCss-b1po8mo6";
+export const iconButtonDefaultElement = 'button';
+const flushSpaceCss = "flushSpaceCss-fqg7x6g";
+const flushStartCss = "flushStartCss-f18p387c";
+const flushEndCss = "flushEndCss-f10uyuq9";
+export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      as,
+      variant = 'secondary',
+      transparent,
+      compact = true,
+      background,
+      color,
+      borderColor,
+      borderRadius = 1000,
+      borderWidth = 100,
+      alignItems = 'center',
+      justifyContent = 'center',
+      // TO DO: fix this when removing interactableHeight
+      height = compact ? 40 : 56,
+      width = compact ? 40 : 56,
+      className,
+      name,
+      active,
+      flush,
+      loading,
+      accessibilityLabel,
+      accessibilityHint
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const Component = as !== null && as !== void 0 ? as : iconButtonDefaultElement;
+  const theme = useTheme();
+  const iconSize = compact ? 's' : 'm';
+  const iconSizeValue = theme.iconSize[iconSize];
+  const spinnerSizeStyles = useMemo(() => ({
+    width: iconSizeValue,
+    height: iconSizeValue
+  }), [iconSizeValue]);
+  const variantMap = transparent ? transparentVariants : variants;
+  const variantStyle = variantMap[variant];
+  const colorValue = color !== null && color !== void 0 ? color : variantStyle.color;
+  const backgroundValue = background !== null && background !== void 0 ? background : variantStyle.background;
+  const borderColorValue = borderColor !== null && borderColor !== void 0 ? borderColor : variantStyle.borderColor;
+  return /*#__PURE__*/_jsx(Pressable, _objectSpread(_objectSpread({
+    ref: ref,
+    accessibilityHint: accessibilityHint,
+    accessibilityLabel: loading ? "".concat(accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : '', ", loading") : accessibilityLabel,
+    alignItems: alignItems,
+    as: Component,
+    background: backgroundValue,
+    borderColor: borderColorValue,
+    borderRadius: borderRadius,
+    borderWidth: borderWidth,
+    className: cx(flush && flushSpaceCss, flush === 'start' && flushStartCss, flush === 'end' && flushEndCss, className),
+    color: colorValue,
+    height: height,
+    justifyContent: justifyContent,
+    loading: loading,
+    transparentWhileInactive: transparent,
+    width: width
+  }, props), {}, {
+    children: loading ? /*#__PURE__*/_jsx(Spinner, {
+      className: baseSpinnerCss,
+      color: "currentColor",
+      size: spinnerHeight,
+      style: spinnerSizeStyles,
+      testID: props.testID ? "".concat(props.testID, "-spinner") : undefined
+    }) : /*#__PURE__*/_jsx(Icon, {
+      active: active,
+      color: "currentColor",
+      name: name,
+      size: iconSize
+    })
+  }));
+}));
+IconButton.displayName = 'IconButton';
+import "./IconButton.css";

package/esm/buttons/IconCounterButton.js

@@ -0,0 +1,50 @@
+const _excluded = ["icon", "iconSize", "size", "active", "count", "color", "dangerouslySetColor", "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, memo } from 'react';
+import { formatCount } from '@coinbase/cds-common/utils/formatCount';
+import { Icon } from '../icons/Icon';
+import { HStack } from '../layout/HStack';
+import { Pressable } from '../system/Pressable';
+import { Text } from '../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const IconCounterButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function IconCounterButton(_ref, ref) {
+  let {
+      icon,
+      iconSize = 's',
+      size = iconSize,
+      active,
+      count = 0,
+      color = 'fg',
+      dangerouslySetColor,
+      background = 'transparent'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(Pressable, _objectSpread(_objectSpread({
+    ref: ref,
+    background: background
+  }, props), {}, {
+    children: /*#__PURE__*/_jsxs(HStack, {
+      alignItems: "center",
+      gap: 1,
+      children: [typeof icon === 'string' ? /*#__PURE__*/_jsx(Icon, {
+        active: active,
+        color: color,
+        dangerouslySetColor: dangerouslySetColor,
+        name: icon,
+        size: size
+      }) : icon, count > 0 ? /*#__PURE__*/_jsx(Text, {
+        mono: true,
+        as: "p",
+        display: "block",
+        font: "label1",
+        children: formatCount(count)
+      }) : null]
+    })
+  }));
+}));

package/esm/buttons/Tile.css

@@ -0,0 +1,2 @@
+@layer cds{.truncatedCss-te0139g{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.visibleCss-v1axtw2j{overflow:visible;white-space:normal;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow-wrap:anywhere;}}

package/esm/buttons/Tile.js

@@ -0,0 +1,56 @@
+import React, { memo, useCallback, useMemo, useState } from 'react';
+import { DotCount } from '../dots/DotCount';
+import { VStack } from '../layout/VStack';
+import { Text } from '../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const truncatedCss = "truncatedCss-te0139g";
+const visibleCss = "visibleCss-v1axtw2j";
+
+/**
+ * @danger this component is for internal use only
+ */
+export const Tile = /*#__PURE__*/memo(_ref => {
+  let {
+    title,
+    count,
+    showOverflow,
+    children
+  } = _ref;
+  const [shouldOverflow, setShouldOverflow] = useState(false);
+  const overflowTextStyles = (showOverflow !== null && showOverflow !== void 0 ? showOverflow : shouldOverflow) ? visibleCss : truncatedCss;
+  const handleShowOverflow = useCallback(() => {
+    if (showOverflow === undefined) setShouldOverflow(true);
+  }, [showOverflow]);
+  const handleHideOverflow = useCallback(() => {
+    if (showOverflow === undefined) setShouldOverflow(false);
+  }, [showOverflow]);
+
+  /* If count is provided, wrap the children in a DotCount */
+  const renderContent = useMemo(() => count ? /*#__PURE__*/_jsx(DotCount, {
+    count: count,
+    pin: "top-end",
+    children: children
+  }) : children, [children, count]);
+  return /*#__PURE__*/_jsxs(VStack, {
+    alignItems: "center",
+    gap: 1,
+    justifyContent: "center",
+    onMouseEnter: handleShowOverflow,
+    onMouseLeave: handleHideOverflow,
+    padding: 1,
+    width: "var(--controlSize-tileSize)",
+    children: [/*#__PURE__*/_jsx(VStack, {
+      alignItems: "center",
+      justifyContent: "center",
+      children: renderContent
+    }), /*#__PURE__*/_jsx(Text, {
+      as: "p",
+      className: overflowTextStyles,
+      display: "block",
+      font: "label2",
+      textAlign: "center",
+      children: title
+    })]
+  });
+});
+import "./Tile.css";

package/esm/buttons/TileButton.js

@@ -0,0 +1,58 @@
+const _excluded = ["as", "pictogram", "title", "count", "children", "showOverflow"];
+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 { gutter } from '@coinbase/cds-common/tokens/sizing';
+import { pictogramScaleMultiplier } from '@coinbase/cds-common/tokens/tile';
+import { isDevelopment } from '@coinbase/cds-utils';
+import { Pictogram } from '../illustrations/Pictogram';
+import { Pressable } from '../system/Pressable';
+import { Tile } from './Tile';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const tileButtonDefaultElement = 'button';
+export const TileButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      as,
+      pictogram,
+      title,
+      count,
+      children,
+      showOverflow
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const Component = as !== null && as !== void 0 ? as : tileButtonDefaultElement;
+  if (isDevelopment() && title.trim() === '') {
+    console.warn('Setting an empty title in TileButton violates accessibility and CDS usage guidelines.');
+  }
+  const content = useMemo(() => children || /*#__PURE__*/_jsx(Pictogram, {
+    name: pictogram,
+    scaleMultiplier: pictogramScaleMultiplier
+  }), [children, pictogram]);
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      height: 'var(--controlSize-tileSize)',
+      /* add gutter to account for the border added by Pressable */
+      width: "calc(var(--controlSize-tileSize) + ".concat(gutter, "px)")
+    },
+    children: /*#__PURE__*/_jsx(Pressable, _objectSpread(_objectSpread({
+      ref: ref,
+      noScaleOnPress: true,
+      transparentWhileInactive: true,
+      as: Component,
+      background: "bg",
+      borderRadius: 400
+    }, props), {}, {
+      children: /*#__PURE__*/_jsx(Tile, {
+        count: count,
+        showOverflow: showOverflow,
+        title: title,
+        children: content
+      })
+    }))
+  });
+}));

package/esm/buttons/__figma__/AvatarButton.figma.js

@@ -0,0 +1,30 @@
+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 { AvatarButton } from '../AvatarButton';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(AvatarButton, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=276-23400&m=dev', {
+  imports: ["import {AvatarButton} from '@coinbase/cds-web/buttons/AvatarButton';"],
+  props: {
+    //   state: figma.enum('state', {
+    //     active: 'active',
+    //     focus: 'focus',
+    //     hover: 'hover',
+    //     pressed: 'pressed',
+    //     selected: 'selected',
+    //   }),
+    selected: figma.enum('state', {
+      selected: true
+    }),
+    compact: figma.boolean('compact'),
+    loading: figma.boolean('disabled')
+  },
+  example: props => /*#__PURE__*/_jsx(AvatarButton, _objectSpread(_objectSpread({}, props), {}, {
+    accessibilityLabel: "Avatar button",
+    name: "A"
+  }))
+});

package/esm/buttons/__figma__/Button.figma.js

@@ -0,0 +1,63 @@
+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 _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { figma } from '@figma/code-connect';
+import { Button } from '../Button';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(Button, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=89-3096&m=dev', {
+  imports: ["import { Button } from '@coinbase/cds-web/buttons/Button';"],
+  props: {
+    variant: figma.enum('variant', {
+      primary: 'primary',
+      secondary: 'secondary',
+      negative: 'negative'
+    }),
+    transparent: figma.boolean('transparent'),
+    loading: figma.enum('state', {
+      loading: true,
+      default: false,
+      hover: false,
+      pressed: false,
+      disabled: false
+    }),
+    disabled: figma.enum('state', {
+      disabled: true,
+      default: false,
+      hover: false,
+      pressed: false,
+      loading: false
+    }),
+    compact: figma.boolean('compact'),
+    block: figma.enum('width', {
+      hug: false,
+      full: true,
+      flush: false
+    }),
+    startIcon: figma.enum('icon', {
+      leading: figma.instance('↳ icon'),
+      trailing: undefined,
+      none: undefined
+    }),
+    endIcon: figma.enum('icon', {
+      trailing: figma.instance('↳ icon'),
+      leading: undefined,
+      none: undefined
+    }),
+    flush: figma.enum('width', {
+      hug: undefined,
+      full: undefined,
+      flush: 'start'
+    })
+  },
+  example: _ref => {
+    let props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+    return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, props), {}, {
+      children: "Button"
+    }));
+  }
+});

package/esm/buttons/__figma__/ButtonGroup.figma.js

@@ -0,0 +1,54 @@
+const _excluded = ["children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React from 'react';
+import { figma } from '@figma/code-connect';
+import { Button } from '../Button';
+import { ButtonGroup } from '../ButtonGroup';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+figma.connect(ButtonGroup, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=283-19617&m=dev', {
+  imports: ["import {ButtonGroup} from '@coinbase/cds-web/buttons/ButtonGroup'"],
+  props: {
+    direction: figma.enum('orientation', {
+      stacked: 'vertical',
+      'side-by-side': 'horizontal'
+    }),
+    children: figma.enum('# of actions', {
+      '2': /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Button, {
+          variant: "primary",
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "secondary",
+          children: "Button"
+        })]
+      }),
+      '3': /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Button, {
+          variant: "primary",
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "secondary",
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "negative",
+          children: "Button"
+        })]
+      })
+    })
+  },
+  example: _ref => {
+    let {
+        children
+      } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+    return /*#__PURE__*/_jsx(ButtonGroup, _objectSpread(_objectSpread({}, props), {}, {
+      children: children
+    }));
+  }
+});

package/esm/buttons/__figma__/IconButton.figma.js

@@ -0,0 +1,35 @@
+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 _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { figma } from '@figma/code-connect';
+import { IconButton } from '../IconButton';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(IconButton, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=47-358&m=dev', {
+  imports: ["import {IconButton} from '@coinbase/cds-web/buttons/IconButton';"],
+  props: {
+    variant: figma.enum('variant', {
+      primary: 'primary',
+      secondary: 'secondary'
+    }),
+    disabled: figma.enum('state', {
+      disabled: true,
+      default: false,
+      hover: false,
+      pressed: false,
+      loading: false
+    }),
+    compact: figma.boolean('compact'),
+    transparent: figma.boolean('transparent')
+  },
+  example: _ref => {
+    let props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+    return /*#__PURE__*/_jsx(IconButton, _objectSpread({
+      name: "add"
+    }, props));
+  }
+});

package/esm/buttons/__figma__/TileButton.figma.js

@@ -0,0 +1,29 @@
+const _excluded = ["children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React from 'react';
+import { figma } from '@figma/code-connect';
+import { TileButton } from '../TileButton';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(TileButton, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=286%3A18370', {
+  imports: ["import { TileButton } from '@coinbase/cds-web/buttons/TileButton';"],
+  props: {
+    title: figma.string('product text'),
+    children: figma.instance('product logo'),
+    disabled: figma.boolean('disabled')
+  },
+  example: _ref => {
+    let {
+        children
+      } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+    return /*#__PURE__*/_jsx(TileButton, _objectSpread(_objectSpread({}, props), {}, {
+      children: children
+    }));
+  }
+});

package/esm/buttons/index.js

@@ -0,0 +1,6 @@
+export * from './AvatarButton';
+export * from './Button';
+export * from './ButtonGroup';
+export * from './IconButton';
+export * from './IconCounterButton';
+export * from './TileButton';

package/esm/cards/AnnouncementCard.js

@@ -0,0 +1,45 @@
+const _excluded = ["width", "title", "description", "testID", "accessibilityLabel", "accessibilityHint", "elevation", "borderRadius", "onClick"];
+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 } from 'react';
+import { Card } from './Card';
+import { CardBody } from './CardBody';
+import { jsx as _jsx } from "react/jsx-runtime";
+/** @deprecated will be removed in v7.0.0 use NudgeCard or UpsellCard instead */
+export const AnnouncementCard = /*#__PURE__*/memo(function AnnouncementCard(_ref) {
+  let {
+      width,
+      title,
+      description,
+      testID,
+      accessibilityLabel,
+      accessibilityHint,
+      elevation = 0,
+      borderRadius = 0,
+      onClick
+      // TODO this is only spread on the CardBody - are we sure that there are no CardBaseProps trapped in here that never make it to that element?
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const accessibilityLabelValue = typeof title === 'string' && accessibilityLabel === undefined ? title : accessibilityLabel;
+  const accessibilityHintValue = typeof description === 'string' && accessibilityHint === undefined ? description : accessibilityHint;
+  return /*#__PURE__*/_jsx(Card, {
+    accessibilityHint: accessibilityHintValue,
+    accessibilityLabel: accessibilityLabelValue,
+    borderRadius: borderRadius,
+    elevation: elevation,
+    flexShrink: 0,
+    onClick: onClick,
+    testID: testID,
+    width: width,
+    children: /*#__PURE__*/_jsx(CardBody, _objectSpread({
+      alignItems: "flex-start",
+      description: description,
+      title: title
+    }, props))
+  });
+});

package/esm/cards/Card.js

@@ -0,0 +1,97 @@
+const _excluded = ["children", "background", "size", "onClick", "onKeyDown", "onKeyUp", "href", "target", "pin", "width", "height", "accessibilityLabel", "accessibilityLabelledBy", "accessibilityHint", "testID", "borderRadius", "elevation", "noScaleOnPress"];
+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, useMemo } from 'react';
+import { cardSizes } from '@coinbase/cds-common/tokens/card';
+import { VStack } from '../layout/VStack';
+import { Pressable } from '../system/Pressable';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Card = /*#__PURE__*/memo(function Card(_ref) {
+  var _ref2;
+  let {
+      children,
+      background = 'bg',
+      size = 'large',
+      onClick,
+      onKeyDown,
+      onKeyUp,
+      href,
+      target,
+      pin,
+      width: widthProps,
+      height: heightProps,
+      accessibilityLabel,
+      accessibilityLabelledBy,
+      accessibilityHint,
+      testID,
+      borderRadius,
+      elevation,
+      noScaleOnPress
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const width = widthProps !== null && widthProps !== void 0 ? widthProps : cardSizes[size].width;
+  const height = heightProps !== null && heightProps !== void 0 ? heightProps : cardSizes[size].height;
+  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 content = useMemo(() => /*#__PURE__*/_jsx(VStack, _objectSpread(_objectSpread({
+    background: linkable ? undefined : background,
+    borderRadius: borderRadius,
+    elevation: linkable ? undefined : elevation,
+    height: linkable ? undefined : height,
+    overflow: "hidden",
+    pin: linkable ? undefined : pin,
+    testID: linkable ? undefined : testID,
+    width: linkable ? undefined : width
+  }, props), {}, {
+    children: children
+  })), [background, borderRadius, children, elevation, height, linkable, pin, props, testID, width]);
+  if (isAnchor) {
+    return /*#__PURE__*/_jsx(Pressable, {
+      accessibilityHint: accessibilityHint,
+      accessibilityLabel: accessibilityLabel,
+      accessibilityLabelledBy: accessibilityLabelledBy,
+      as: "a",
+      background: background,
+      borderRadius: borderRadius,
+      elevation: elevation,
+      height: height,
+      href: href,
+      noScaleOnPress: noScaleOnPress,
+      onClick: onClick,
+      onKeyDown: onKeyDown,
+      onKeyUp: onKeyUp,
+      pin: pin,
+      target: target,
+      testID: testID,
+      width: width,
+      children: content
+    });
+  }
+  if (isButton) {
+    return /*#__PURE__*/_jsx(Pressable, {
+      accessibilityHint: accessibilityHint,
+      accessibilityLabel: accessibilityLabel,
+      accessibilityLabelledBy: accessibilityLabelledBy,
+      background: background,
+      borderRadius: borderRadius,
+      elevation: elevation,
+      height: height,
+      noScaleOnPress: noScaleOnPress,
+      onClick: onClick,
+      onKeyDown: onKeyDown,
+      onKeyUp: onKeyUp,
+      pin: pin,
+      testID: testID,
+      width: width,
+      children: content
+    });
+  }
+  return content;
+});
+Card.displayName = 'Card';