@coinbase/cds-web 0.0.0 → 8.13.2

package/esm/controls/InputStack.js

@@ -0,0 +1,137 @@
+const _excluded = ["width", "prependNode", "endNode", "appendNode", "startNode", "disabled", "inputNode", "helperTextNode", "borderWidth", "variant", "labelNode", "testID", "focused", "borderRadius", "height", "disableFocusedStyle", "enableColorSurge", "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, { forwardRef, memo, useMemo } from 'react';
+import { durations } from '@coinbase/cds-common/motion/tokens';
+import { inputStackGap } from '@coinbase/cds-common/tokens/input';
+import { accessibleOpacityDisabled } from '@coinbase/cds-common/tokens/interactable';
+import { cx } from '../cx';
+import { HStack } from '../layout/HStack';
+import { VStack } from '../layout/VStack';
+import { ColorSurge } from '../motion/ColorSurge';
+import { Interactable } from '../system/Interactable';
+import { InputLabel } from './InputLabel';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const baseCss = "baseCss-b16zw4a5";
+
+// Fixes a problem found in Accordion children element.
+// When `overflow: auto` is set the thickened border when focused is not accounted for
+// hence you see a cutoff.
+// Fix was to add this so there is always 2px outer layer space
+const inputAreaContainerCss = "inputAreaContainerCss-ipofex6";
+
+/** this should only be used as a last resort, when focus styles need to be persisted. eg: when a Select PopoverMenu is opened */
+const persistedFocusCss = "persistedFocusCss-p6phjeo";
+const variantColorMap = {
+  primary: 'bgPrimary',
+  positive: 'bgPositive',
+  negative: 'bgNegative',
+  foreground: 'bgInverse',
+  foregroundMuted: 'bgLineHeavy',
+  secondary: 'bgSecondary'
+};
+export const InputStack = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      width = '100%',
+      prependNode,
+      endNode,
+      appendNode,
+      startNode,
+      disabled = false,
+      inputNode,
+      helperTextNode,
+      borderWidth = 100,
+      variant = 'foregroundMuted',
+      labelNode,
+      testID = '',
+      focused = false,
+      borderRadius = 200,
+      height,
+      disableFocusedStyle = false,
+      enableColorSurge,
+      labelVariant = 'outside'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const focusedVariant = useMemo(() => focused && variant !== 'positive' && variant !== 'negative' ? 'primary' : variant, [focused, variant]);
+  const inputBorderRadius = useMemo(() => {
+    return _objectSpread(_objectSpread({}, prependNode ? {
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0
+    } : {}), appendNode ? {
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0
+    } : {});
+  }, [prependNode, appendNode]);
+  const borderColorFocused = useMemo(() => {
+    if (disableFocusedStyle) {
+      return 'transparent';
+    }
+    if (variant === 'positive' || variant === 'negative') {
+      return "var(--color-".concat(variantColorMap[variant], ")");
+    }
+
+    // all variants except for positive/negative receive the primary focus color
+    return 'var(--color-bgPrimary)';
+  }, [disableFocusedStyle, variant]);
+  const borderColorUnfocused = useMemo(() => {
+    if (variant === 'secondary') {
+      return 'transparent';
+    }
+    return "var(--color-".concat(variantColorMap[variant], ")");
+  }, [variant]);
+  const inputAreaStyles = useMemo(() => {
+    return _objectSpread({
+      '--border-color-unfocused': borderColorUnfocused,
+      '--border-color-focused': borderColorFocused,
+      '--border-width-focused': "var(--borderWidth-".concat(borderWidth, ")")
+    }, inputBorderRadius);
+  }, [borderColorUnfocused, borderColorFocused, borderWidth, inputBorderRadius]);
+  return /*#__PURE__*/_jsxs(VStack, _objectSpread(_objectSpread({
+    gap: inputStackGap,
+    opacity: disabled ? accessibleOpacityDisabled : 1,
+    testID: testID,
+    width: width
+  }, props), {}, {
+    children: [!!labelNode && labelVariant === 'outside' && (typeof labelNode === 'string' ? /*#__PURE__*/_jsx(InputLabel, {
+      children: labelNode
+    }) : labelNode), /*#__PURE__*/_jsxs(HStack, {
+      children: [!!prependNode && /*#__PURE__*/_jsx(_Fragment, {
+        children: prependNode
+      }), /*#__PURE__*/_jsx("div", {
+        className: inputAreaContainerCss,
+        children: /*#__PURE__*/_jsxs(Interactable, {
+          ref: ref,
+          as: "span",
+          background: variant === 'secondary' ? 'bgSecondary' : 'bg',
+          borderRadius: borderRadius,
+          borderWidth: borderWidth,
+          className: cx(baseCss, focused && persistedFocusCss),
+          disabled: disabled,
+          height: height,
+          style: inputAreaStyles,
+          testID: "input-interactable-area",
+          children: [!!focused && !!enableColorSurge && /*#__PURE__*/_jsx(ColorSurge, {
+            background: variantColorMap[focusedVariant]
+          }), !!startNode && /*#__PURE__*/_jsx(_Fragment, {
+            children: startNode
+          }), !!labelNode && labelVariant === 'inside' ? /*#__PURE__*/_jsxs(VStack, {
+            flexGrow: 1,
+            children: [labelNode, inputNode]
+          }) : inputNode, !!endNode && /*#__PURE__*/_jsx(_Fragment, {
+            children: endNode
+          })]
+        })
+      }), !!appendNode && /*#__PURE__*/_jsx(_Fragment, {
+        children: appendNode
+      })]
+    }), !!helperTextNode && /*#__PURE__*/_jsx(_Fragment, {
+      children: helperTextNode
+    })]
+  }));
+}));
+import "./InputStack.css";

package/esm/controls/NativeInput.css

@@ -0,0 +1,3 @@
+@layer cds{.baseCss-bgba8xt{font-size:var(--fontSize-body);line-height:var(--lineHeight-body);font-weight:var(--fontWeight-body);font-family:var(--fontFamily-body);min-width:0;-webkit-box-flex:2;-webkit-flex-grow:2;-ms-flex-positive:2;flex-grow:2;background-color:transparent;color:var(--color-fg);border-color:transparent;}.baseCss-bgba8xt::-webkit-outer-spin-button,.baseCss-bgba8xt::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}.baseCss-bgba8xt:focus{outline-style:none;box-shadow:none;border-color:transparent;}.baseCss-bgba8xt::-webkit-input-placeholder{color:var(--color-fgMuted);opacity:1;}.baseCss-bgba8xt::-moz-placeholder{color:var(--color-fgMuted);opacity:1;}.baseCss-bgba8xt:-ms-input-placeholder{color:var(--color-fgMuted);opacity:1;}.baseCss-bgba8xt::placeholder{color:var(--color-fgMuted);opacity:1;}.baseCss-bgba8xt[type='number']{-moz-appearance:textfield;}.baseCss-bgba8xt[readonly]:not(:disabled){background-color:var(--color-bgSecondary);}.baseCss-bgba8xt[type='search']::-ms-clear{display:none;width:0;height:0;}.baseCss-bgba8xt[type='search']::-ms-reveal{display:none;width:0;height:0;}.baseCss-bgba8xt[type='search']::-webkit-search-decoration,.baseCss-bgba8xt[type='search']::-webkit-search-cancel-button,.baseCss-bgba8xt[type='search']::-webkit-search-results-button,.baseCss-bgba8xt[type='search']::-webkit-search-results-decoration{display:none;}.baseCss-bgba8xt:-webkit-autofill,.baseCss-bgba8xt:-webkit-autofill:hover,.baseCss-bgba8xt:-webkit-autofill:focus,.baseCss-bgba8xt:-webkit-autofill:active{border-radius:var(--borderRadius-200);-webkit-text-fill-color:var(--color-fg);-webkit-transition:background-color 0s ease-in-out 5000s;transition:background-color 0s ease-in-out 5000s;}
+.originalContainerPaddingCss-o1mz6a5p{padding:var(--space-2);}
+.compactContainerPaddingCss-c1lt56dx{padding:var(--space-1);}}

package/esm/controls/NativeInput.js

@@ -0,0 +1,56 @@
+const _excluded = ["containerSpacing", "testID", "align", "onFocus", "onClick", "onBlur", "onKeyDown", "onChange", "accessibilityLabel", "accessibilityHint", "compact", "className", "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, useMemo } from 'react';
+import { cx } from '../cx';
+import { useTheme } from '../hooks/useTheme';
+import { jsx as _jsx } from "react/jsx-runtime";
+const baseCss = "baseCss-bgba8xt";
+const originalContainerPaddingCss = "originalContainerPaddingCss-o1mz6a5p";
+const compactContainerPaddingCss = "compactContainerPaddingCss-c1lt56dx";
+export const NativeInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function NativeInput(_ref, ref) {
+  let {
+      containerSpacing,
+      testID,
+      align = 'start',
+      onFocus,
+      onClick,
+      onBlur,
+      onKeyDown,
+      onChange,
+      accessibilityLabel,
+      accessibilityHint,
+      compact,
+      className,
+      style
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const {
+    activeColorScheme
+  } = useTheme();
+  const defaultContainerPadding = compact ? compactContainerPaddingCss : originalContainerPaddingCss;
+  const dynamicStyles = useMemo(() => _objectSpread({
+    textAlign: align,
+    colorScheme: activeColorScheme
+  }, style), [align, activeColorScheme, style]);
+  return /*#__PURE__*/_jsx("input", _objectSpread({
+    ref: ref,
+    "aria-describedby": accessibilityHint,
+    "aria-label": accessibilityLabel,
+    className: cx(baseCss, containerSpacing !== null && containerSpacing !== void 0 ? containerSpacing : defaultContainerPadding, className),
+    "data-testid": testID,
+    onBlur: onBlur,
+    onChange: onChange,
+    onClick: onClick,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown,
+    style: dynamicStyles,
+    tabIndex: 0
+  }, props));
+}));
+import "./NativeInput.css";

package/esm/controls/NativeTextArea.css

@@ -0,0 +1,2 @@
+@layer cds{.baseCss-b1d7nvbf{min-width:0;-webkit-box-flex:2;-webkit-flex-grow:2;-ms-flex-positive:2;flex-grow:2;background-color:transparent;color:var(--color-fg);}.baseCss-b1d7nvbf::-webkit-outer-spin-button,.baseCss-b1d7nvbf::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}.baseCss-b1d7nvbf:focus{outline-style:none;box-shadow:none;border-color:transparent;}.baseCss-b1d7nvbf::-webkit-input-placeholder{color:var(--color-fgMuted);opacity:1;}.baseCss-b1d7nvbf::-moz-placeholder{color:var(--color-fgMuted);opacity:1;}.baseCss-b1d7nvbf:-ms-input-placeholder{color:var(--color-fgMuted);opacity:1;}.baseCss-b1d7nvbf::placeholder{color:var(--color-fgMuted);opacity:1;}.baseCss-b1d7nvbf:-webkit-autofill{border-radius:var(--borderRadius-200);}
+.defaultContainerPaddingCss-dknhr24{padding:var(--space-2);}.defaultContainerPaddingCss-dknhr24[data-compact='true']{padding:var(--space-1);}}

package/esm/controls/NativeTextArea.js

@@ -0,0 +1,46 @@
+const _excluded = ["font", "testID", "onFocus", "onClick", "onBlur", "onKeyDown", "onChange", "accessibilityHint", "compact", "containerSpacing", "className"];
+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 { cx } from '../cx';
+import { Box } from '../layout/Box';
+import { jsx as _jsx } from "react/jsx-runtime";
+const baseCss = "baseCss-b1d7nvbf";
+const defaultContainerPaddingCss = "defaultContainerPaddingCss-dknhr24";
+export const NativeTextArea = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function NativeTextArea(_ref, ref) {
+  let {
+      font = 'body',
+      testID,
+      onFocus,
+      onClick,
+      onBlur,
+      onKeyDown,
+      onChange,
+      accessibilityHint,
+      compact,
+      containerSpacing,
+      className
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(Box, _objectSpread({
+    ref: ref,
+    "aria-describedby": accessibilityHint,
+    as: "textarea",
+    className: cx(baseCss, containerSpacing !== null && containerSpacing !== void 0 ? containerSpacing : defaultContainerPaddingCss, className),
+    "data-compact": compact,
+    "data-testid": testID,
+    font: font,
+    onBlur: onBlur,
+    onChange: onChange,
+    onClick: onClick,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown,
+    tabIndex: 0
+  }, props));
+}));
+import "./NativeTextArea.css";

package/esm/controls/Radio.css

@@ -0,0 +1 @@
+@layer cds{.baseCss-b1rohblb{position:relative;-webkit-appearance:radio;-moz-appearance:radio;appearance:radio;width:var(--controlSize-radioSize);height:var(--controlSize-radioSize);border-style:solid;border-width:var(--borderWidth-100);border-radius:var(--borderRadius-1000);-webkit-transition:border-color 0.2s linear;transition:border-color 0.2s linear;}.baseCss-b1rohblb:focus{outline:none;}.baseCss-b1rohblb:focus-visible{outline-style:solid;outline-width:2px;outline-color:var(--color-bgPrimary);outline-offset:2px;}}

package/esm/controls/Radio.js

@@ -0,0 +1,84 @@
+const _excluded = ["children", "controlColor", "checked", "background", "borderColor"];
+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 { checkboxOpacityEnterConfig, checkboxOpacityExitConfig, checkboxScaleEnterConfig, checkboxScaleExitConfig } from '@coinbase/cds-common/motion/checkbox';
+import { m as motion } from 'framer-motion';
+import { useTheme } from '../hooks/useTheme';
+import { Box } from '../layout';
+import { useMotionProps } from '../motion/useMotionProps';
+import { Control } from './Control';
+import { jsx as _jsx } from "react/jsx-runtime";
+const DotSvg = _ref => {
+  let {
+    color = 'black',
+    width = 20
+  } = _ref;
+  return /*#__PURE__*/_jsx("svg", {
+    fill: "none",
+    height: width,
+    viewBox: "0 0 ".concat(width, " ").concat(width),
+    width: width,
+    children: /*#__PURE__*/_jsx("circle", {
+      cx: "50%",
+      cy: "50%",
+      fill: color,
+      r: "calc(".concat(width, " / 3)")
+    })
+  });
+};
+const baseCss = "baseCss-b1rohblb";
+const RadioWithRef = /*#__PURE__*/forwardRef(function RadioWithRef(_ref2, ref) {
+  let {
+      children,
+      controlColor = 'bgPrimary',
+      checked = false,
+      background = 'bg',
+      borderColor = checked ? controlColor : 'bgLineHeavy'
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  const theme = useTheme();
+  const iconWidth = theme.controlSize.radioSize;
+  const innerContainerMotionProps = useMotionProps({
+    enterConfigs: [checkboxOpacityEnterConfig, checkboxScaleEnterConfig],
+    exitConfigs: [checkboxOpacityExitConfig, checkboxScaleExitConfig],
+    animate: checked ? 'enter' : 'exit'
+  });
+  return /*#__PURE__*/_jsx(Control, _objectSpread(_objectSpread({
+    ref: ref,
+    checked: checked,
+    label: children,
+    type: "radio"
+  }, props), {}, {
+    children: /*#__PURE__*/_jsx(Box, {
+      alignItems: "center",
+      background: background,
+      borderColor: borderColor,
+      className: baseCss,
+      "data-filled": checked,
+      flexShrink: 0,
+      justifyContent: "center",
+      role: "presentation",
+      children: /*#__PURE__*/_jsx(motion.div, _objectSpread(_objectSpread({}, innerContainerMotionProps), {}, {
+        children: checked &&
+        /*#__PURE__*/
+        // setting inner dot to match color of the radio outline
+        _jsx(Box, {
+          color: controlColor,
+          testID: "radio-icon",
+          children: /*#__PURE__*/_jsx(DotSvg, {
+            color: "currentColor",
+            width: iconWidth
+          })
+        })
+      }))
+    })
+  }));
+});
+export const Radio = /*#__PURE__*/memo(RadioWithRef);
+import "./Radio.css";

package/esm/controls/RadioCell.css

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

package/esm/controls/RadioCell.js

@@ -0,0 +1,118 @@
+const _excluded = ["title", "description", "checked", "onChange", "disabled", "columnGap", "rowGap", "padding", "borderWidth", "borderRadius", "titleId", "descriptionId", "testID", "style", "value", "noScaleOnPress", "readOnly", "className", "classNames", "styles"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { forwardRef, memo, useId, useMemo } from 'react';
+import { cx } from '../cx';
+import { Box, HStack, VStack } from '../layout';
+import { Pressable } from '../system';
+import { Text } from '../typography/Text';
+import { Radio } from './Radio';
+import { useSelectionCellControlHeight } from './useSelectionCellControlHeight';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const baseCss = "baseCss-b11e1r8n";
+const RadioCellWithRef = /*#__PURE__*/forwardRef(function RadioCell(_ref, ref) {
+  let {
+      title,
+      description,
+      checked,
+      onChange,
+      disabled,
+      columnGap = 2,
+      rowGap = 0,
+      padding = 2,
+      borderWidth = 100,
+      borderRadius = 200,
+      titleId: customTitleId,
+      descriptionId: customDescriptionId,
+      testID,
+      style,
+      value,
+      noScaleOnPress = true,
+      readOnly,
+      className,
+      classNames,
+      styles
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const generatedTitleId = useId();
+  const generatedDescriptionId = useId();
+  const titleId = customTitleId !== null && customTitleId !== void 0 ? customTitleId : generatedTitleId;
+  const descriptionId = customDescriptionId !== null && customDescriptionId !== void 0 ? customDescriptionId : generatedDescriptionId;
+  const pressableStyle = useMemo(() => {
+    return _objectSpread(_objectSpread({
+      '--border-color-unfocused': 'transparent',
+      '--border-color-focused': 'var(--color-bgPrimary)',
+      '--border-width-focused': "var(--borderWidth-".concat(borderWidth, ")")
+    }, style), styles === null || styles === void 0 ? void 0 : styles.root);
+  }, [borderWidth, style, styles === null || styles === void 0 ? void 0 : styles.root]);
+  const ariaLabelledBy = titleId;
+  const ariaDescribedBy = description ? descriptionId : undefined;
+  const radioContainerHeight = useSelectionCellControlHeight();
+  return /*#__PURE__*/_jsxs(Pressable, _objectSpread(_objectSpread({
+    ref: ref,
+    as: "label",
+    background: "bg",
+    borderColor: "bgLine",
+    borderRadius: borderRadius,
+    borderWidth: borderWidth,
+    className: cx(baseCss, className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
+    disabled: disabled || readOnly,
+    gap: columnGap,
+    noScaleOnPress: noScaleOnPress,
+    padding: padding,
+    style: pressableStyle,
+    testID: testID
+  }, props), {}, {
+    children: [/*#__PURE__*/_jsx(HStack, {
+      alignItems: "center",
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.radioContainer,
+      height: radioContainerHeight,
+      style: styles === null || styles === void 0 ? void 0 : styles.radioContainer,
+      children: /*#__PURE__*/_jsx(Radio, {
+        "aria-describedby": ariaDescribedBy,
+        "aria-labelledby": ariaLabelledBy,
+        checked: !!checked,
+        disabled: disabled,
+        onChange: onChange,
+        readOnly: readOnly,
+        value: value
+      })
+    }), /*#__PURE__*/_jsxs(VStack, {
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.contentContainer,
+      gap: rowGap,
+      style: styles === null || styles === void 0 ? void 0 : styles.contentContainer,
+      children: [typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.title,
+        font: "headline",
+        id: titleId,
+        style: styles === null || styles === void 0 ? void 0 : styles.title,
+        children: title
+      }) : /*#__PURE__*/_jsx(Box, {
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.title,
+        id: titleId,
+        style: styles === null || styles === void 0 ? void 0 : styles.title,
+        children: title
+      }), description && (typeof description === 'string' ? /*#__PURE__*/_jsx(Text, {
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.description,
+        color: "fgMuted",
+        font: "body",
+        id: descriptionId,
+        style: styles === null || styles === void 0 ? void 0 : styles.description,
+        children: description
+      }) : /*#__PURE__*/_jsx(Box, {
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.description,
+        id: descriptionId,
+        style: styles === null || styles === void 0 ? void 0 : styles.description,
+        children: description
+      }))]
+    })]
+  }));
+});
+export const RadioCell = /*#__PURE__*/memo(RadioCellWithRef);
+RadioCell.displayName = 'RadioCell';
+import "./RadioCell.css";

package/esm/controls/RadioGroup.js

@@ -0,0 +1,85 @@
+const _excluded = ["label", "value", "onChange", "options", "name", "testID", "controlColor", "role"];
+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 { isDevelopment } from '@coinbase/cds-utils';
+import { ControlGroup } from './ControlGroup';
+import { Radio } from './Radio';
+import { useHandleRadioSelect } from './useHandleRadioSelect';
+import { jsx as _jsx } from "react/jsx-runtime";
+export { Radio, useHandleRadioSelect };
+
+/**
+ * @deprecated RadioGroup is deprecated. Use ControlGroup with role="radiogroup" instead.
+ *
+ * @example
+ * // Instead of:
+ * <RadioGroup options={{ value1: 'Label 1' }} value={value} onChange={onChange} name="radio" />
+ *
+ * // Use:
+ * <ControlGroup
+ *   role="radiogroup"
+ *   ControlComponent={Radio}
+ *   options={[{ value: 'value1', children: 'Label 1' }]}
+ *   value={value}
+ *   onChange={(e) => onChange(e.target.value)}
+ *   name="radio"
+ * />
+ */
+
+/**
+ * @deprecated RadioGroup is deprecated. Use ControlGroup with role="radiogroup" instead.
+ */
+
+const RadioGroupWithRef = /*#__PURE__*/forwardRef(function RadioGroup(_ref, ref) {
+  let {
+      label,
+      value,
+      onChange,
+      options,
+      name,
+      testID,
+      controlColor = 'bgPrimary',
+      role = 'radiogroup'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  if (isDevelopment()) {
+    console.warn('RadioGroup is deprecated. Use ControlGroup with role="radiogroup" instead.');
+  }
+  const handleSelect = useHandleRadioSelect(onChange);
+
+  // Convert Record<T, string | React.ReactNode> to ControlGroup options format
+  const controlGroupOptions = Object.entries(options).map(_ref2 => {
+    let [optionValue, optionLabel] = _ref2;
+    return {
+      value: optionValue,
+      children: optionLabel,
+      id: "".concat(name, "-").concat(optionValue),
+      controlColor
+    };
+  });
+  if (isDevelopment()) {
+    console.warn('RadioGroup is deprecated. Use ControlGroup with role="radiogroup" instead.');
+  }
+  return /*#__PURE__*/_jsx(ControlGroup, _objectSpread({
+    ref: ref,
+    ControlComponent: Radio,
+    label: label,
+    name: name,
+    onChange: handleSelect,
+    options: controlGroupOptions,
+    role: role,
+    testID: testID,
+    value: value || ''
+  }, props));
+});
+
+/**
+ * @deprecated RadioGroup is deprecated. Use ControlGroup with role="radiogroup" instead.
+ */
+export const RadioGroup = /*#__PURE__*/memo(RadioGroupWithRef);

package/esm/controls/SearchInput.css

@@ -0,0 +1,2 @@
+@layer cds{.baseCss-b1xygpjx{height:56px;}
+.compactCss-cczlfjm{height:40px;}}

package/esm/controls/SearchInput.js

@@ -0,0 +1,90 @@
+const _excluded = ["onChange", "onClear", "onChangeText", "onSearch", "testID", "value", "compact", "hideStartIcon", "bordered", "hideEndIcon", "startIcon", "end", "startIconAccessibilityLabel", "clearIconAccessibilityLabel"];
+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 } from 'react';
+import { useMergeRefs } from '@coinbase/cds-common/hooks/useMergeRefs';
+import { cx } from '../cx';
+import { Box } from '../layout/Box';
+import { InputIcon } from './InputIcon';
+import { InputIconButton } from './InputIconButton';
+import { TextInput } from './TextInput';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const scales = {
+  regular: 56,
+  compact: 40
+};
+const baseCss = "baseCss-b1xygpjx";
+const compactCss = "compactCss-cczlfjm";
+export const SearchInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function SearchInput(_ref, ref) {
+  let {
+      onChange,
+      onClear,
+      onChangeText,
+      onSearch,
+      testID,
+      value,
+      compact,
+      hideStartIcon = false,
+      bordered = true,
+      hideEndIcon,
+      startIcon,
+      end,
+      startIconAccessibilityLabel = 'Back',
+      clearIconAccessibilityLabel = 'Clear search query'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const internalRef = useRef(null);
+  const refs = useMergeRefs(ref, internalRef);
+  const handleOnChange = useCallback(e => {
+    onChange === null || onChange === void 0 || onChange(e);
+    onChangeText === null || onChangeText === void 0 || onChangeText(e.target.value);
+  }, [onChange, onChangeText]);
+  const handleOnKeyUp = useCallback(event => {
+    if (event.key === 'Enter') {
+      var _value$toString;
+      onSearch === null || onSearch === void 0 || onSearch((_value$toString = value === null || value === void 0 ? void 0 : value.toString()) !== null && _value$toString !== void 0 ? _value$toString : '');
+    }
+  }, [onSearch, value]);
+  const handleOnClear = useCallback(e => {
+    var _internalRef$current;
+    onClear === null || onClear === void 0 || onClear(e);
+    (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 || _internalRef$current.focus();
+    onChangeText === null || onChangeText === void 0 || onChangeText('');
+    onSearch === null || onSearch === void 0 || onSearch('');
+  }, [onClear, onChangeText, onSearch]);
+  const determineStartIconAccessibilityLabel = useMemo(() => startIcon === 'backArrow' ? startIconAccessibilityLabel : undefined, [startIconAccessibilityLabel, startIcon]);
+  return /*#__PURE__*/_jsx(TextInput, _objectSpread({
+    ref: refs,
+    borderRadius: 1000,
+    bordered: bordered,
+    className: cx(baseCss, compact && compactCss),
+    end: end !== null && end !== void 0 ? end : !!value && !hideEndIcon && /*#__PURE__*/_jsx(Box, {
+      marginEnd: compact ? -0.5 : 0,
+      paddingEnd: compact ? 0 : 0.5,
+      children: /*#__PURE__*/_jsx(InputIconButton, {
+        accessibilityLabel: clearIconAccessibilityLabel,
+        name: "close",
+        onClick: handleOnClear,
+        testID: testID && "".concat(testID, "-close-iconbtn")
+      })
+    }),
+    onChange: handleOnChange,
+    onKeyUp: handleOnKeyUp,
+    role: "searchbox",
+    start: !hideStartIcon && /*#__PURE__*/_jsx(InputIcon, {
+      accessibilityLabel: determineStartIconAccessibilityLabel,
+      name: startIcon !== null && startIcon !== void 0 ? startIcon : 'search',
+      testID: testID && "".concat(testID, "-search-icon")
+    }),
+    testID: testID,
+    type: "search",
+    value: value,
+    variant: "secondary"
+  }, props));
+}));
+import "./SearchInput.css";