@coinbase/cds-web 0.0.0 → 8.13.2

package/esm/controls/TextInput.js

@@ -0,0 +1,206 @@
+const _excluded = ["label", "accessibilityLabel", "helperText", "variant", "testID", "testIDMap", "start", "end", "width", "disabled", "align", "compact", "suffix", "onFocus", "onBlur", "borderRadius", "height", "inputNode", "bordered", "enableColorSurge", "helperTextErrorIconAccessibilityLabel", "labelVariant"];
+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, { cloneElement, forwardRef, memo, useCallback, useMemo, useRef, useState } from 'react';
+import { useMergeRefs } from '@coinbase/cds-common/hooks/useMergeRefs';
+import { usePrefixedId } from '@coinbase/cds-common/hooks/usePrefixedId';
+import { cx } from '../cx';
+import { HStack } from '../layout/HStack';
+import { Text } from '../typography/Text';
+import { TextInputFocusVariantContext } from './context';
+import { HelperText } from './HelperText';
+import { InputLabel } from './InputLabel';
+import { InputStack } from './InputStack';
+import { NativeInput } from './NativeInput';
+
+/**
+ * In normal circumstances, padding horizontal should be 2 (16px).
+ * If compact is true, the padding top should be 1.
+ * If labelVariant is 'inside', the padding top should be 3.5 (28px).
+ * This gives the absolute positioning of the label space.
+ * The bottom will be 1 (8px) in this case to equal padding of inside label.
+ * If start exist, the padding between input area and icon should be 0.5 (4px).
+ */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const nativeInputContainerCss = "nativeInputContainerCss-nvfk24";
+const insideLabelCss = "insideLabelCss-i1dqgbcz";
+const insideLabelCssStartCss = "insideLabelCssStartCss-i1scwjk";
+const useInputVariant = (focused, variant) => {
+  return useMemo(() => focused && variant !== 'positive' && variant !== 'negative' ? 'primary' : variant, [focused, variant]);
+};
+const variantColorMap = {
+  primary: 'fgPrimary',
+  positive: 'fgPositive',
+  negative: 'fgNegative',
+  foreground: 'fg',
+  foregroundMuted: 'fgMuted',
+  secondary: 'fg'
+};
+export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function TextInput(_ref, ref) {
+  var _testIDMap$end, _testIDMap$helperText, _testIDMap$label, _testIDMap$start;
+  let {
+      label,
+      accessibilityLabel,
+      helperText = '',
+      variant = 'foregroundMuted',
+      testID,
+      testIDMap,
+      start,
+      end,
+      width = '100%',
+      disabled = false,
+      align = 'start',
+      compact = false,
+      suffix = '',
+      onFocus,
+      onBlur,
+      borderRadius = 200,
+      height,
+      inputNode,
+      bordered = true,
+      enableColorSurge = false,
+      helperTextErrorIconAccessibilityLabel = 'error',
+      labelVariant = 'outside'
+    } = _ref,
+    htmlInputElmProps = _objectWithoutProperties(_ref, _excluded);
+  const [focused, setFocused] = useState(false);
+  const focusedVariant = useInputVariant(focused, variant);
+  const internalRef = useRef();
+  const refs = useMergeRefs(ref, internalRef);
+
+  // Only generate a helperTextId if helperText is defined, otherwise
+  // set it to undefined
+  const shouldSetHelperTextId = useMemo(() => helperText !== '', [helperText]);
+  const shouldSetLabelId = label !== undefined;
+  const [helperTextId, labelId] = usePrefixedId(['cds-textinput-description', 'cds-textinput-label']);
+  const handleOnFocus = useCallback(e => {
+    setFocused(true);
+    onFocus === null || onFocus === void 0 || onFocus(e);
+  }, [onFocus]);
+  const handleOnBlur = useCallback(e => {
+    onBlur === null || onBlur === void 0 || onBlur(e);
+    setFocused(false);
+  }, [onBlur]);
+  const handleNodePress = useCallback(() => {
+    var _internalRef$current;
+    setFocused(true);
+    (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 || _internalRef$current.focus();
+  }, [setFocused, internalRef]);
+
+  // Define a distinct read-only style to differentiate it from the disabled style.
+  const inputBackground = useMemo(() => {
+    if (!disabled && htmlInputElmProps.readOnly) {
+      return 'bgSecondary';
+    }
+    return undefined;
+  }, [disabled, htmlInputElmProps.readOnly]);
+  const inputElement = useMemo(() => {
+    /** Ensures that the renderedInput has the blurring, focusing, disabled features */
+    if (inputNode) {
+      const clonedElm = /*#__PURE__*/cloneElement(inputNode, {
+        onFocus: handleOnFocus,
+        onBlur: handleOnBlur,
+        ref: refs,
+        'aria-describedby': shouldSetHelperTextId && helperTextId,
+        'aria-invalid': variant === 'negative',
+        id: shouldSetLabelId ? labelId : undefined,
+        disabled
+      });
+      return clonedElm;
+    }
+
+    // By default, it will use the NativeInput
+    return /*#__PURE__*/_jsx(NativeInput, _objectSpread({
+      ref: refs,
+      accessibilityHint: shouldSetHelperTextId ? helperTextId : undefined,
+      accessibilityLabel: accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : label,
+      align: align,
+      "aria-invalid": variant === 'negative',
+      compact: compact,
+      containerSpacing: nativeInputContainerCss,
+      "data-compact": compact,
+      "data-labelvariant": compact || !label ? 'outside' : labelVariant,
+      "data-start": !!start || compact,
+      disabled: disabled,
+      id: shouldSetLabelId ? labelId : undefined,
+      onBlur: handleOnBlur,
+      onFocus: handleOnFocus,
+      testID: testID
+    }, htmlInputElmProps));
+  }, [inputNode, refs, shouldSetHelperTextId, helperTextId, accessibilityLabel, label, align, variant, compact, labelVariant, start, disabled, shouldSetLabelId, labelId, handleOnBlur, handleOnFocus, testID, htmlInputElmProps]);
+  return /*#__PURE__*/_jsx(TextInputFocusVariantContext.Provider, {
+    value: focused ? focusedVariant : undefined,
+    children: /*#__PURE__*/_jsx(InputStack, {
+      borderRadius: borderRadius,
+      borderWidth: bordered ? 100 : 0
+      // If bordered is true, we want disableFocusedStyle = false
+      // If bordered is false, we want disableFocusedStyle = true
+      ,
+      disableFocusedStyle: !bordered,
+      disabled: disabled,
+      enableColorSurge: enableColorSurge,
+      endNode: (suffix !== '' || !!end) && /*#__PURE__*/_jsxs(HStack, {
+        alignItems: "center",
+        background: inputBackground,
+        gap: 2,
+        justifyContent: "center",
+        onClick: handleNodePress,
+        testID: (_testIDMap$end = testIDMap === null || testIDMap === void 0 ? void 0 : testIDMap.end) !== null && _testIDMap$end !== void 0 ? _testIDMap$end : '',
+        children: [suffix !== '' && /*#__PURE__*/_jsx(Text, {
+          as: "p",
+          color: "fgMuted",
+          display: "block",
+          font: "label1",
+          paddingEnd: 2,
+          children: suffix
+        }), !!end && /*#__PURE__*/_jsx(_Fragment, {
+          children: end
+        })]
+      }),
+      focused: focused,
+      height: height,
+      helperTextNode: !!helperText && (typeof helperText === 'string' ? /*#__PURE__*/_jsx(HelperText, {
+        accessibilityLabel: helperText,
+        color: variantColorMap[variant],
+        errorIconAccessibilityLabel: helperTextErrorIconAccessibilityLabel,
+        errorIconTestID: "".concat(testIDMap === null || testIDMap === void 0 ? void 0 : testIDMap.helperText, "-error-icon"),
+        id: shouldSetHelperTextId ? helperTextId : undefined,
+        testID: (_testIDMap$helperText = testIDMap === null || testIDMap === void 0 ? void 0 : testIDMap.helperText) !== null && _testIDMap$helperText !== void 0 ? _testIDMap$helperText : '',
+        textAlign: align,
+        children: helperText
+      }) : helperText),
+      inputNode: inputElement,
+      labelNode: !compact && !!label && /*#__PURE__*/_jsx(InputLabel, {
+        background: labelVariant === 'inside' ? inputBackground : undefined,
+        className: cx(labelVariant === 'inside' && insideLabelCss, labelVariant === 'inside' && !!start && insideLabelCssStartCss),
+        htmlFor: shouldSetLabelId ? labelId : undefined,
+        testID: (_testIDMap$label = testIDMap === null || testIDMap === void 0 ? void 0 : testIDMap.label) !== null && _testIDMap$label !== void 0 ? _testIDMap$label : '',
+        children: label
+      }),
+      labelVariant: labelVariant,
+      startNode: (compact || !!start) && /*#__PURE__*/_jsxs(HStack, {
+        alignItems: "center",
+        background: inputBackground,
+        gap: 2,
+        justifyContent: "center",
+        onClick: handleNodePress,
+        testID: (_testIDMap$start = testIDMap === null || testIDMap === void 0 ? void 0 : testIDMap.start) !== null && _testIDMap$start !== void 0 ? _testIDMap$start : '',
+        children: [compact && !!label && /*#__PURE__*/_jsx(InputLabel, {
+          htmlFor: shouldSetLabelId ? labelId : undefined,
+          paddingStart: 2,
+          children: label
+        }), !!start && /*#__PURE__*/_jsx(_Fragment, {
+          children: start
+        })]
+      }),
+      variant: variant,
+      width: width
+    })
+  });
+}));
+import "./TextInput.css";

package/esm/controls/__figma__/Checkbox.figma.js

@@ -0,0 +1,32 @@
+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 { Checkbox } from '../Checkbox';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(Checkbox, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=155-9873&m=dev', {
+  imports: ["import { Checkbox } from '@coinbase/cds-web/controls/Checkbox'"],
+  props: {
+    checked: figma.boolean('checked'),
+    disabled: figma.boolean('disabled'),
+    indeterminate: figma.boolean('indeterminate')
+    // state: figma.enum('state', {
+    //   active: 'active',
+    //   hover: 'hover',
+    //   pressed: 'pressed',
+    //   focus: 'focus',
+    // }),
+    // children: figma.string('label'), TODO: fix, Mele to deprecate string library},
+  },
+  example: _ref => {
+    let props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+    return /*#__PURE__*/_jsx(Checkbox, _objectSpread(_objectSpread({}, props), {}, {
+      children: "Checkbox label"
+    }));
+  }
+});

package/esm/controls/__figma__/CheckboxCell.figma.js

@@ -0,0 +1,43 @@
+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 { figma } from '@figma/code-connect';
+import { CheckboxCell } from '../CheckboxCell';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(CheckboxCell, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=54927-2772&t=pdfsCDffPYWTRujC-4', {
+  imports: ["import { CheckboxCell } from '@coinbase/cds-web/controls/CheckboxCell'"],
+  props: {
+    title: figma.string('title text'),
+    description: figma.boolean('description', {
+      true: figma.string('description text'),
+      false: undefined
+    })
+  },
+  example: _ref => {
+    let props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+    return /*#__PURE__*/_jsx(CheckboxCell, _objectSpread({}, props));
+  }
+});
+figma.connect(CheckboxCell, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=54927-2772&t=pdfsCDffPYWTRujC-4', {
+  imports: ["import { CheckboxCell } from '@coinbase/cds-web/controls/CheckboxCell'"],
+  variant: {
+    state: 'selected'
+  },
+  props: {
+    title: figma.string('title text'),
+    description: figma.boolean('description', {
+      true: figma.string('description text'),
+      false: undefined
+    })
+  },
+  example: _ref2 => {
+    let props = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
+    return /*#__PURE__*/_jsx(CheckboxCell, _objectSpread({
+      checked: true
+    }, props));
+  }
+});

package/esm/controls/__figma__/CheckboxGroup.figma.js

@@ -0,0 +1,27 @@
+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 { figma } from '@figma/code-connect';
+import { CheckboxGroup } from '../CheckboxGroup';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(CheckboxGroup, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=155%3A10032', {
+  imports: ["import { CheckboxGroup } from '@coinbase/cds-web/controls/CheckboxGroup';"],
+  props: {
+    children: figma.children('*')
+  },
+  example: _ref => {
+    let {
+        children
+      } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+    // @ts-expect-error: Checkbox expects multiple children but only 1 was provided
+    return /*#__PURE__*/_jsx(CheckboxGroup, _objectSpread(_objectSpread({}, props), {}, {
+      children: children
+    }));
+  }
+});

package/esm/controls/__figma__/NativeTextArea.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 { figma } from '@figma/code-connect';
+import { NativeTextArea } from '../NativeTextArea';
+import { TextInput } from '../TextInput';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(NativeTextArea, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=14089%3A46502', {
+  imports: ["import { TextInput } from '@coinbase/cds-web/controls/TextInput';", "import { NativeTextArea } from '@coinbase/cds-web/controls/NativeTextArea';"],
+  props: {
+    label: figma.boolean('show label', {
+      true: figma.string('↳ label string'),
+      false: undefined
+    }),
+    helperText: figma.boolean('show helper text', {
+      true: figma.string('↳ helper text'),
+      false: undefined
+    }),
+    disabled: figma.boolean('disabled'),
+    variant: figma.enum('state', {
+      positive: 'positive',
+      negative: 'negative'
+    })
+  },
+  example: props => /*#__PURE__*/_jsx(TextInput, _objectSpread({
+    inputNode: /*#__PURE__*/_jsx(NativeTextArea, {})
+  }, props))
+});

package/esm/controls/__figma__/RadioCell.figma.js

@@ -0,0 +1,43 @@
+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 { figma } from '@figma/code-connect';
+import { RadioCell } from '../RadioCell';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(RadioCell, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=54927-2624', {
+  imports: ["import { RadioCell } from '@coinbase/cds-web/controls/RadioCell'"],
+  props: {
+    title: figma.string('title text'),
+    description: figma.boolean('description', {
+      true: figma.string('description text'),
+      false: undefined
+    })
+  },
+  example: _ref => {
+    let props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+    return /*#__PURE__*/_jsx(RadioCell, _objectSpread({}, props));
+  }
+});
+figma.connect(RadioCell, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=54927-2624', {
+  imports: ["import { RadioCell } from '@coinbase/cds-web/controls/RadioCell'"],
+  variant: {
+    state: 'selected'
+  },
+  props: {
+    title: figma.string('title text'),
+    description: figma.boolean('description', {
+      true: figma.string('description text'),
+      false: undefined
+    })
+  },
+  example: _ref2 => {
+    let props = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
+    return /*#__PURE__*/_jsx(RadioCell, _objectSpread({
+      checked: true
+    }, props));
+  }
+});

package/esm/controls/__figma__/RadioGroup.figma.js

@@ -0,0 +1,47 @@
+import { useState } from 'react';
+import { figma } from '@figma/code-connect';
+import { ControlGroup } from '../ControlGroup';
+import { Radio } from '../Radio';
+import { RadioGroup } from '../RadioGroup';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(RadioGroup, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=355-14414&m=dev', {
+  imports: ["import { ControlGroup } from '@coinbase/cds-web/controls/ControlGroup';", "import { Radio } from '@coinbase/cds-web/controls/Radio';"],
+  props: {
+    options: figma.enum('quantity', {
+      '1': [{
+        value: '1',
+        children: 'Label'
+      }],
+      '2': [{
+        value: '2',
+        children: 'Label'
+      }],
+      '3': [{
+        value: '3',
+        children: 'Label'
+      }],
+      '4': [{
+        value: '4',
+        children: 'Label'
+      }],
+      '5': [{
+        value: '5',
+        children: 'Label'
+      }]
+    })
+  },
+  example: function Example(_ref) {
+    let {
+      options
+    } = _ref;
+    const [value, setValue] = useState('1');
+    const onChange = e => setValue(e.target.value);
+    return /*#__PURE__*/_jsx(ControlGroup, {
+      ControlComponent: Radio,
+      onChange: onChange,
+      options: options,
+      role: "radiogroup",
+      value: value
+    });
+  }
+});

package/esm/controls/__figma__/SearchInput.figma.js

@@ -0,0 +1,44 @@
+const _excluded = ["text"];
+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 { figma } from '@figma/code-connect';
+import { SearchInput } from '../SearchInput';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(SearchInput, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=67-767&m=dev', {
+  imports: ["import { SearchInput } from '@coinbase/cds-web/controls/SearchInput';"],
+  props: {
+    // state: figma.enum('state', {
+    //   active: 'active',
+    //   focus: 'focus',
+    //   typing: 'typing',
+    // }),
+    compact: figma.boolean('compact'),
+    disabled: figma.boolean('disabled'),
+    text: figma.nestedProps('string.search input', {
+      placeholder: figma.enum('Ready-made', {
+        Custom: figma.string('string'),
+        'Retail search': figma.textContent('search-input-label'),
+        'Retail send': figma.textContent('search-input-label'),
+        'Web3 search': figma.textContent('search-input-label'),
+        'Wallet search': figma.textContent('search-input-label'),
+        'Wallet send': figma.textContent('search-input-label')
+      })
+    })
+  },
+  example: _ref => {
+    let {
+        text
+      } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+    return /*#__PURE__*/_jsx(SearchInput, _objectSpread({
+      onChangeText: () => {},
+      placeholder: text.placeholder,
+      value: ""
+    }, props));
+  }
+});

package/esm/controls/__figma__/Select.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); }
+import { figma } from '@figma/code-connect';
+import { Select } from '../Select';
+import { SelectOption } from '../SelectOption';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(Select, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=247-13005&m=dev', {
+  imports: ["import { Select } from '@coinbase/cds-web/controls';", "import { SelectOption } from '@coinbase/cds-web/controls';"],
+  props: {
+    startNode: figma.boolean('show start', {
+      true: figma.instance('🔄 start'),
+      false: undefined
+    }),
+    label: figma.boolean('show label', {
+      true: 'Label',
+      false: undefined
+    }),
+    helperText: figma.boolean('show helper text', {
+      true: 'Assistive Message',
+      false: undefined
+    }),
+    variant: figma.enum('state', {
+      positive: 'positive',
+      negative: 'negative'
+    }),
+    placeholder: figma.string('inputText'),
+    disabled: figma.boolean('disabled'),
+    compact: figma.boolean('compact'),
+    value: figma.enum('state', {
+      selected: 'Option 1'
+    })
+  },
+  example: function () {
+    for (var _len = arguments.length, props = new Array(_len), _key = 0; _key < _len; _key++) {
+      props[_key] = arguments[_key];
+    }
+    return /*#__PURE__*/_jsx(Select, _objectSpread(_objectSpread({}, props), {}, {
+      children: /*#__PURE__*/_jsx(SelectOption, {
+        title: "Option 1",
+        value: "Option 1"
+      }, "Option 1")
+    }));
+  }
+});

package/esm/controls/__figma__/SelectOption.figma.js

@@ -0,0 +1,38 @@
+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 { SelectOption } from '../SelectOption';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(SelectOption, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=244-11050&m=dev', {
+  imports: ["import { SelectOption } from '@coinbase/cds-web/controls';"],
+  props: {
+    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.string('title string'),
+      false: undefined
+    }),
+    description: figma.boolean('show description', {
+      true: figma.string('description string'),
+      false: undefined
+    }),
+    detail: figma.boolean('show detail', {
+      true: 'Detail',
+      false: undefined
+    }),
+    accessory: figma.boolean('show accessory', {
+      true: figma.instance('accessory'),
+      false: undefined
+    })
+  },
+  example: props => /*#__PURE__*/_jsx(SelectOption, _objectSpread({
+    value: ""
+  }, props))
+});

package/esm/controls/__figma__/Switch.figma.js

@@ -0,0 +1,20 @@
+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 { Switch } from '../Switch';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(Switch, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=155%3A9924', {
+  imports: ["import { Switch } from '@coinbase/cds-web/controls/Switch';"],
+  props: {
+    children: figma.boolean('show label', {
+      true: figma.string('↳ label'),
+      false: undefined
+    }),
+    checked: figma.boolean('checked'),
+    disabled: figma.boolean('disabled')
+  },
+  example: props => /*#__PURE__*/_jsx(Switch, _objectSpread({}, props))
+});