@coinbase/cds-web 0.0.0 → 8.13.2

package/esm/chips/TabbedChips.js

@@ -0,0 +1,156 @@
+const _excluded = ["label", "id"],
+  _excluded2 = ["tabs", "value", "onChange", "Component", "paddleStyle", "testID", "background", "gap", "role", "previousArrowAccessibilityLabel", "nextArrowAccessibilityLabel", "width"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { forwardRef, memo, useCallback, useMemo, useRef, useState } from 'react';
+import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
+import { useDimensions } from '../hooks/useDimensions';
+import { HStack } from '../layout';
+import { Paddle, Tabs } from '../tabs';
+import { Chip } from './Chip';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const scrollPadding = 5;
+const scrollContainerCss = "scrollContainerCss-s19l7spv";
+const TabComponent = _ref => {
+  let {
+      label = '',
+      id
+    } = _ref,
+    tabProps = _objectWithoutProperties(_ref, _excluded);
+  const {
+    activeTab,
+    updateActiveTab
+  } = useTabsContext();
+  const isActive = useMemo(() => (activeTab === null || activeTab === void 0 ? void 0 : activeTab.id) === id, [activeTab, id]);
+  const handleClick = useCallback(() => updateActiveTab(id), [id, updateActiveTab]);
+  return /*#__PURE__*/_jsx(Chip, _objectSpread(_objectSpread({
+    "aria-selected": isActive,
+    inverted: isActive,
+    onClick: handleClick,
+    role: "tab",
+    width: "max-content"
+  }, tabProps), {}, {
+    children: label
+  }));
+};
+const TabsActiveIndicatorComponent = () => {
+  return null;
+};
+const TabbedChipsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function TabbedChips(_ref2, ref) {
+  var _scrollRef$current, _scrollRef$current2, _scrollRef$current3;
+  let {
+      tabs,
+      value,
+      onChange,
+      Component = TabComponent,
+      paddleStyle,
+      testID,
+      background = 'bg',
+      gap = 1,
+      role,
+      previousArrowAccessibilityLabel = 'Previous',
+      nextArrowAccessibilityLabel = 'Next',
+      width = '100%'
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  const activeTab = useMemo(() => tabs.find(tab => tab.id === value), [tabs, value]);
+  const scrollRef = useRef(null);
+  const end = Number((_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollWidth) - Number((_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 ? void 0 : _scrollRef$current2.offsetWidth);
+  const canScrollRight = Number((_scrollRef$current3 = scrollRef.current) === null || _scrollRef$current3 === void 0 ? void 0 : _scrollRef$current3.scrollLeft) < end;
+  const [showLeftPaddle, setShowLeftPaddle] = useState(false);
+  const [showRightPaddle, setShowRightPaddle] = useState(canScrollRight);
+  const handleChange = useCallback(tabValue => {
+    if (tabValue) onChange === null || onChange === void 0 || onChange(tabValue.id);
+  }, [onChange]);
+  const handleOnScroll = useCallback(() => {
+    var _scrollRef$current4;
+    const scrollDistance = Number((_scrollRef$current4 = scrollRef.current) === null || _scrollRef$current4 === void 0 ? void 0 : _scrollRef$current4.scrollLeft);
+    const endTrigger = end - scrollPadding;
+    const startTrigger = scrollPadding;
+
+    // Hide/show the left paddle
+    if (scrollDistance > startTrigger) setShowLeftPaddle(true);else if (scrollDistance <= startTrigger) setShowLeftPaddle(false);
+
+    // Hide/show the right paddle
+    if (scrollDistance < endTrigger) setShowRightPaddle(true);else if (scrollDistance >= endTrigger) setShowRightPaddle(false);
+  }, [end]);
+  if (canScrollRight && !showRightPaddle) {
+    var _scrollRef$current5;
+    const scrollLeft = Number((_scrollRef$current5 = scrollRef.current) === null || _scrollRef$current5 === void 0 ? void 0 : _scrollRef$current5.scrollLeft);
+    const endTrigger = end - scrollPadding;
+    if (scrollLeft < endTrigger) {
+      setShowRightPaddle(true);
+    }
+  }
+  const {
+    observe
+  } = useDimensions({
+    onResize: handleOnScroll
+  });
+  const handleScrollLeft = useCallback(() => {
+    var _scrollRef$current6;
+    scrollRef === null || scrollRef === void 0 || (_scrollRef$current6 = scrollRef.current) === null || _scrollRef$current6 === void 0 || _scrollRef$current6.scrollTo({
+      left: 0,
+      behavior: 'smooth'
+    });
+  }, [scrollRef]);
+  const handleScrollRight = useCallback(() => {
+    var _scrollRef$current7;
+    scrollRef === null || scrollRef === void 0 || (_scrollRef$current7 = scrollRef.current) === null || _scrollRef$current7 === void 0 || _scrollRef$current7.scrollTo({
+      left: end,
+      behavior: 'smooth'
+    });
+  }, [end]);
+  return /*#__PURE__*/_jsxs(HStack, _objectSpread(_objectSpread({
+    ref: observe,
+    alignItems: "center",
+    position: "relative",
+    testID: testID,
+    width: width
+  }, props), {}, {
+    children: [/*#__PURE__*/_jsx(Paddle, {
+      accessibilityLabel: previousArrowAccessibilityLabel,
+      background: background,
+      direction: "left",
+      onClick: handleScrollLeft,
+      paddleStyle: paddleStyle,
+      show: showLeftPaddle,
+      variant: "secondary"
+    }), /*#__PURE__*/_jsx(HStack, {
+      ref: scrollRef,
+      alignItems: "center",
+      className: scrollContainerCss,
+      onScroll: handleOnScroll
+      // TODO: this overflow styling is necessary for the Paddle feature but cuts off child Chips' focus ring
+      ,
+      overflow: "auto",
+      children: /*#__PURE__*/_jsx(Tabs, _objectSpread({
+        ref: ref,
+        TabComponent: Component,
+        TabsActiveIndicatorComponent: TabsActiveIndicatorComponent,
+        activeTab: activeTab || null,
+        background: background,
+        gap: gap,
+        onChange: handleChange,
+        role: role,
+        tabs: tabs
+      }, props))
+    }), /*#__PURE__*/_jsx(Paddle, {
+      accessibilityLabel: nextArrowAccessibilityLabel,
+      background: background,
+      direction: "right",
+      onClick: handleScrollRight,
+      paddleStyle: paddleStyle,
+      show: showRightPaddle,
+      variant: "secondary"
+    })]
+  }));
+}));
+TabbedChipsComponent.displayName = 'TabbedChips';
+export const TabbedChips = TabbedChipsComponent;
+import "./TabbedChips.css";

package/esm/chips/__figma__/InputChip.figma.js

@@ -0,0 +1,29 @@
+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 { figma } from '@figma/code-connect';
+import { InputChip } from '../InputChip';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(InputChip, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=10177-5161&m=dev', {
+  imports: ["import { InputChip } from '@coinbase/cds-web/chips/InputChip'"],
+  props: {
+    value: figma.string('value'),
+    start: figma.boolean('show start', {
+      true: figma.instance('start'),
+      false: undefined
+    }),
+    // state: figma.enum('state', {
+    //   default: 'default',
+    //   focused: 'focused',
+    //   hovered: 'hovered',
+    //   pressed: 'pressed',
+    // }),
+    disabled: figma.boolean('disabled'),
+    compact: figma.boolean('compact')
+  },
+  example: props => /*#__PURE__*/_jsx(InputChip, _objectSpread({
+    onClick: () => {}
+  }, props))
+});

package/esm/chips/__figma__/SelectChip.figma.js

@@ -0,0 +1,47 @@
+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); }
+/* eslint-disable react-hooks/rules-of-hooks */
+import React, { useState } from 'react';
+import { figma } from '@figma/code-connect';
+import { SelectOption } from '../../controls';
+import { VStack } from '../../layout';
+import { SelectChip } from '../SelectChip';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(SelectChip, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=10177-5222&m=dev', {
+  imports: ["import { SelectChip } from '@coinbase/cds-web/chips'"],
+  props: {
+    // state: figma.enum('state', {
+    //   default: 'default',
+    //   hovered: 'hovered',
+    //   pressed: 'pressed',
+    //   focused: 'focused',
+    //   open: 'open',
+    // }),
+    disabled: figma.boolean('disabled'),
+    active: figma.boolean('active'),
+    compact: figma.boolean('compact'),
+    start: figma.boolean('show start', {
+      true: figma.instance('start'),
+      false: undefined
+    }),
+    end: figma.instance('end')
+  },
+  example: props => {
+    const options = ['USD', 'CAD', 'GBP', 'JPY'];
+    const [value, setValue] = useState(options[0]);
+    const content = /*#__PURE__*/_jsx(VStack, {
+      children: options.map(option => /*#__PURE__*/_jsx(SelectOption, {
+        title: option,
+        value: option
+      }, option))
+    });
+    return /*#__PURE__*/_jsx(SelectChip, _objectSpread(_objectSpread({}, props), {}, {
+      content: content,
+      onChange: setValue,
+      value: value
+    }));
+  }
+});

package/esm/chips/__figma__/TabbedChips.figma.js

@@ -0,0 +1,55 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import React, { useState } from 'react';
+import { figma } from '@figma/code-connect';
+import { TabbedChips } from '../TabbedChips';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(TabbedChips, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=10188%3A4476', {
+  imports: ["import { TabbedChips } from '@coinbase/cds-web/chips/TabbedChips';"],
+  props: {
+    overflow: figma.boolean('overflowing'),
+    platform: figma.enum('platform', {
+      mobile: 'mobile',
+      desktop: 'desktop'
+    }),
+    compact: figma.boolean('compact')
+  },
+  example: () => {
+    const tabs = [{
+      id: '0',
+      label: '0'
+    }, {
+      id: '1',
+      label: '1'
+    }, {
+      id: '2',
+      label: '2'
+    }, {
+      id: '3',
+      label: '3'
+    }, {
+      id: '4',
+      label: '4'
+    }, {
+      id: '5',
+      label: '5'
+    }, {
+      id: '6',
+      label: '6'
+    }, {
+      id: '7',
+      label: '7'
+    }, {
+      id: '8',
+      label: '8'
+    }, {
+      id: '9',
+      label: '9'
+    }];
+    const [value, setValue] = useState(tabs[0].id);
+    return /*#__PURE__*/_jsx(TabbedChips, {
+      onChange: setValue,
+      tabs: tabs,
+      value: value
+    });
+  }
+});

package/esm/chips/index.js

@@ -0,0 +1,5 @@
+export * from './Chip';
+export * from './ChipProps';
+export * from './InputChip';
+export * from './SelectChip';
+export * from './TabbedChips';

package/esm/coachmark/Coachmark.js

@@ -0,0 +1,73 @@
+const _excluded = ["title", "content", "checkbox", "media", "onClose", "action", "width", "closeButtonAccessibilityLabel", "testID"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { forwardRef, memo } from 'react';
+import { IconButton } from '../buttons/IconButton';
+import { Box, HStack, VStack } from '../layout';
+import { InvertedThemeProvider } from '../system';
+import { Text } from '../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Coachmark = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      title,
+      content,
+      checkbox,
+      media,
+      onClose,
+      action,
+      width,
+      closeButtonAccessibilityLabel,
+      testID
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(InvertedThemeProvider, {
+    children: /*#__PURE__*/_jsxs(VStack, _objectSpread(_objectSpread({}, props), {}, {
+      ref: ref,
+      borderRadius: 400,
+      maxWidth: 400,
+      overflow: "hidden",
+      position: "relative",
+      testID: testID,
+      width: width,
+      children: [media, !!onClose && /*#__PURE__*/_jsx(Box, {
+        alignSelf: "flex-start",
+        padding: 1,
+        pin: "right",
+        children: /*#__PURE__*/_jsx(IconButton, {
+          accessibilityLabel: closeButtonAccessibilityLabel,
+          name: "close",
+          onClick: onClose
+        })
+      }), /*#__PURE__*/_jsx(VStack, {
+        background: "bg",
+        padding: 2,
+        children: /*#__PURE__*/_jsxs(VStack, {
+          gap: 2,
+          children: [/*#__PURE__*/_jsxs(VStack, {
+            gap: 0.5,
+            children: [typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
+              as: "h2",
+              display: "block",
+              font: "headline",
+              children: title
+            }) : title, typeof content === 'string' ? /*#__PURE__*/_jsx(Text, {
+              as: "p",
+              display: "block",
+              font: "body",
+              children: content
+            }) : content]
+          }), /*#__PURE__*/_jsxs(HStack, {
+            alignItems: "center",
+            justifyContent: checkbox ? 'space-between' : 'flex-end',
+            children: [checkbox, action]
+          })]
+        })
+      })]
+    }))
+  });
+}));

package/esm/coachmark/__figma__/Coachmark.figma.js

@@ -0,0 +1,49 @@
+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 '../../buttons';
+import { Checkbox } from '../../controls';
+import { Coachmark } from '../Coachmark';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(Coachmark, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=24997-8568', {
+  imports: ["import { Coachmark } from '@coinbase/cds-web/tour/Coachmark';"],
+  props: {
+    // onClose: figma.boolean('dismissable', {
+    //   true: () => {},
+    //   false: undefined,
+    // }),
+    media: figma.boolean('show media', {
+      true: /*#__PURE__*/_jsx("img", {
+        alt: "",
+        src: ""
+      }),
+      false: undefined
+    }),
+    action: figma.boolean('action bar', {
+      true: /*#__PURE__*/_jsx(Button, {
+        compact: true,
+        variant: "secondary",
+        children: "Button"
+      }),
+      false: undefined
+    })
+  },
+  example: _ref => {
+    let props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+    return /*#__PURE__*/_jsx(Coachmark, _objectSpread({
+      checkbox: /*#__PURE__*/_jsx(Checkbox, {
+        checked: false,
+        onChange: () => {},
+        children: "Checkbox label"
+      }),
+      content: "Add up to 3 lines of body copy. Deliver your message with clarity and impact",
+      title: "Headline"
+    }, props));
+  }
+});

package/esm/collapsible/Collapsible.js

@@ -0,0 +1,99 @@
+const _excluded = ["style"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { forwardRef, memo, useCallback, useMemo, useState } from 'react';
+import { m as motion } from 'framer-motion';
+import { Box } from '../layout/Box';
+import { useCollapsibleMotionProps } from './useCollapsibleMotionProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Collapsible = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef) => {
+  let {
+    children,
+    collapsed = true,
+    maxHeight,
+    maxWidth,
+    accessibilityLabelledBy,
+    direction = 'vertical',
+    testID,
+    id,
+    role = 'region',
+    dangerouslyDisableOverflowHidden = false,
+    // Spacing
+    padding,
+    paddingBottom,
+    paddingEnd,
+    paddingX,
+    paddingStart,
+    paddingTop,
+    paddingY
+  } = _ref;
+  const _useCollapsibleMotion = useCollapsibleMotionProps({
+      collapsed,
+      direction,
+      dangerouslyDisableOverflowHidden
+    }),
+    {
+      style: motionStyle
+    } = _useCollapsibleMotion,
+    motionProps = _objectWithoutProperties(_useCollapsibleMotion, _excluded);
+  const sizeProps = useMemo(() => {
+    return direction === 'horizontal' ? {
+      maxWidth,
+      // prevent horizontal scrollbar when animating
+      display: 'inline-flex'
+    } : {
+      maxHeight
+    };
+  }, [direction, maxWidth, maxHeight]);
+
+  // visibility is used to prevent child content from being focusable when collapsed
+  const [visibility, setVisibility] = useState(collapsed ? 'hidden' : 'visible');
+  // update the visibility to "visible" when the content is expanding
+  if (!collapsed && visibility !== 'visible') {
+    setVisibility('visible');
+  }
+
+  // when the animation completes, set the visibility to "hidden" if the content should be collapsed
+  // this is to prevent children of the Collapsible element from being focusable in this state
+  const handleAnimationComplete = useCallback(() => {
+    if (collapsed) {
+      setVisibility('hidden');
+    }
+  }, [collapsed]);
+
+  // merge visible style with the computed framer-motion styles
+  const style = useMemo(() => {
+    return _objectSpread(_objectSpread({}, motionStyle), {}, {
+      visibility
+    });
+  }, [visibility, motionStyle]);
+  return /*#__PURE__*/_jsx(motion.div, _objectSpread(_objectSpread({}, motionProps), {}, {
+    ref: forwardedRef,
+    "aria-labelledby": accessibilityLabelledBy,
+    "data-testid": testID,
+    id: id,
+    onAnimationComplete: handleAnimationComplete,
+    role: role,
+    style: style,
+    children: /*#__PURE__*/_jsx(Box, {
+      display: "block",
+      paddingTop: paddingTop,
+      children: /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
+        overflow: maxWidth || maxHeight ? 'auto' : undefined
+      }, sizeProps), {}, {
+        padding: padding,
+        paddingBottom: paddingBottom,
+        paddingEnd: paddingEnd,
+        paddingStart: paddingStart,
+        paddingX: paddingX,
+        paddingY: paddingY,
+        children: children
+      }))
+    })
+  }));
+}));

package/esm/collapsible/index.js

@@ -0,0 +1 @@
+export * from './Collapsible';

package/esm/collapsible/useCollapsibleMotionProps.js

@@ -0,0 +1,34 @@
+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 { useMemo } from 'react';
+import { animateInMaxSizeConfig, animateInOpacityConfig, animateOutMaxSizeConfig, animateOutOpacityConfig } from '@coinbase/cds-common/animation/collapsible';
+import { useMotionProps } from '../motion/useMotionProps';
+export const useCollapsibleMotionProps = _ref => {
+  let {
+    collapsed,
+    direction = 'vertical',
+    dangerouslyDisableOverflowHidden
+  } = _ref;
+  const defaultStyle = useMemo(() => {
+    // overflow: hidden is needed for enter animation to have correct masking effect as the element height grows
+    // the consumer must dangerously opt-out of this behavior
+    return dangerouslyDisableOverflowHidden ? {} : {
+      overflow: 'hidden'
+    };
+  }, [dangerouslyDisableOverflowHidden]);
+  return useMotionProps({
+    enterConfigs: [animateInOpacityConfig[direction], _objectSpread(_objectSpread({}, animateInMaxSizeConfig[direction]), {}, {
+      toValue: 'auto'
+    })],
+    exitConfigs: {
+      tokens: [animateOutOpacityConfig[direction], animateOutMaxSizeConfig[direction]]
+    },
+    style: defaultStyle,
+    // prevent animation on mount
+    initial: false,
+    animate: collapsed ? 'exit' : 'enter'
+  });
+};

package/esm/controls/Checkbox.css

@@ -0,0 +1 @@
+@layer cds{.checkboxCss-c198zdvk{position:relative;width:var(--controlSize-checkboxSize);height:var(--controlSize-checkboxSize);border-style:solid;-webkit-transition: border-color, background-color 0.1s linear;transition: border-color, background-color 0.1s linear;}.checkboxCss-c198zdvk:focus{outline:none;}.checkboxCss-c198zdvk:focus-visible{outline-style:solid;outline-width:2px;outline-color:var(--color-bgPrimary);outline-offset:2px;}}

package/esm/controls/Checkbox.js

@@ -0,0 +1,84 @@
+const _excluded = ["children", "checked", "indeterminate", "controlColor", "background", "borderColor", "borderRadius", "borderWidth"];
+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 { checkboxOpacityEnterConfig, checkboxOpacityExitConfig, checkboxScaleEnterConfig, checkboxScaleExitConfig } from '@coinbase/cds-common/motion/checkbox';
+import { m as motion } from 'framer-motion';
+import { useTheme } from '../hooks/useTheme';
+import { Icon } from '../icons/Icon';
+import { Box } from '../layout';
+import { useMotionProps } from '../motion/useMotionProps';
+import { Control } from './Control';
+import { jsx as _jsx } from "react/jsx-runtime";
+const checkboxCss = "checkboxCss-c198zdvk";
+const CheckboxWithRef = /*#__PURE__*/forwardRef(function CheckboxWithRef(_ref, ref) {
+  let {
+      children,
+      checked,
+      indeterminate,
+      controlColor = 'fgInverse',
+      background = checked || indeterminate ? 'bgPrimary' : 'bg',
+      borderColor = checked || indeterminate ? 'bgPrimary' : 'bgLineHeavy',
+      borderRadius,
+      borderWidth = 100
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const filled = checked || indeterminate;
+  const theme = useTheme();
+  const checkboxSize = theme.controlSize.checkboxSize;
+  const iconPadding = checkboxSize / 5;
+  const iconSize = checkboxSize - iconPadding;
+  const innerContainerMotionProps = useMotionProps({
+    enterConfigs: [checkboxOpacityEnterConfig, checkboxScaleEnterConfig],
+    exitConfigs: [checkboxOpacityExitConfig, checkboxScaleExitConfig],
+    animate: filled ? 'enter' : 'exit'
+  });
+  const iconStyle = useMemo(() => ({
+    icon: {
+      width: iconSize,
+      height: iconSize,
+      fontSize: iconSize,
+      opacity: filled ? 1 : 0
+    }
+  }), [iconSize, filled]);
+  return /*#__PURE__*/_jsx(Control, _objectSpread(_objectSpread({
+    ref: ref,
+    "aria-label": props.accessibilityLabel,
+    borderRadius: borderRadius,
+    borderWidth: borderWidth,
+    checked: checked,
+    label: children,
+    type: "checkbox"
+  }, props), {}, {
+    children: /*#__PURE__*/_jsx(Box, {
+      alignItems: "center",
+      background: background,
+      borderColor: borderColor,
+      borderRadius: borderRadius,
+      borderWidth: borderWidth,
+      className: checkboxCss,
+      "data-filled": filled,
+      flexShrink: 0,
+      justifyContent: "center",
+      role: "presentation",
+      testID: "checkbox-outer",
+      children: /*#__PURE__*/_jsx(motion.div, _objectSpread(_objectSpread({}, innerContainerMotionProps), {}, {
+        "data-testid": "checkbox-inner",
+        children: /*#__PURE__*/_jsx(Icon, {
+          color: controlColor,
+          name: checked ? 'checkmark' : 'minus',
+          size: "s",
+          styles: iconStyle,
+          testID: "checkbox-icon"
+        })
+      }))
+    }, theme.activeColorScheme)
+  }));
+});
+export const Checkbox = /*#__PURE__*/memo(CheckboxWithRef);
+import "./Checkbox.css";

package/esm/controls/CheckboxCell.css

@@ -0,0 +1 @@
+@layer cds{.baseCss-b1n65grj:focus-within{border-color:var(--border-color-focused);box-shadow:0 0 0 var(--border-width-focused) var(--border-color-focused);}}