@coinbase/cds-web 0.0.0 → 8.13.2

package/esm/controls/CheckboxCell.js

@@ -0,0 +1,120 @@
+const _excluded = ["title", "description", "checked", "onChange", "disabled", "columnGap", "rowGap", "padding", "borderWidth", "borderRadius", "titleId", "descriptionId", "testID", "style", "value", "noScaleOnPress", "readOnly", "indeterminate", "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/Pressable';
+import { Text } from '../typography/Text';
+import { Checkbox } from './Checkbox';
+import { useSelectionCellControlHeight } from './useSelectionCellControlHeight';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const baseCss = "baseCss-b1n65grj";
+const CheckboxCellWithRef = /*#__PURE__*/forwardRef(function CheckboxCell(_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,
+      indeterminate,
+      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 checkboxContainerHeight = 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.checkboxContainer,
+      height: checkboxContainerHeight,
+      style: styles === null || styles === void 0 ? void 0 : styles.checkboxContainer,
+      children: /*#__PURE__*/_jsx(Checkbox, {
+        "aria-describedby": ariaDescribedBy,
+        "aria-labelledby": ariaLabelledBy,
+        checked: !!checked,
+        disabled: disabled,
+        indeterminate: indeterminate,
+        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 CheckboxCell = /*#__PURE__*/memo(CheckboxCellWithRef);
+CheckboxCell.displayName = 'CheckboxCell';
+import "./CheckboxCell.css";

package/esm/controls/CheckboxGroup.css

@@ -0,0 +1 @@
+@layer cds{.checkboxCss-cmjsxse{margin:0;padding:0;min-width:0;border-width:0;}}

package/esm/controls/CheckboxGroup.js

@@ -0,0 +1,112 @@
+const _excluded = ["children", "className", "label", "aria-labelledby", "selectedValues", "onChange", "name", "style", "testID", "role", "id"],
+  _excluded2 = ["value", "children", "id"];
+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, { Children, forwardRef, isValidElement, memo, useMemo } from 'react';
+import { isDevelopment } from '@coinbase/cds-utils';
+import { cx } from '../cx';
+import { Checkbox } from './Checkbox';
+import { ControlGroup } from './ControlGroup';
+import { jsx as _jsx } from "react/jsx-runtime";
+const checkboxCss = "checkboxCss-cmjsxse";
+
+/**
+ * @deprecated CheckboxGroup is deprecated. Use ControlGroup with role="group" instead.
+ *
+ * @example
+ * // Instead of:
+ * <CheckboxGroup selectedValues={new Set(['value1'])} onChange={onChange}>
+ *   <Checkbox value="value1">Option 1</Checkbox>
+ * </CheckboxGroup>
+ *
+ * // Use:
+ * <ControlGroup
+ *   role="group"
+ *   ControlComponent={Checkbox}
+ *   options={[{ value: 'value1', children: 'Option 1' }]}
+ *   value={['value1']}
+ *   onChange={onChange}xw
+ * />
+ */
+
+/**
+ * @deprecated CheckboxGroup is deprecated. Use ControlGroup with role="group" instead.
+ */
+
+// Follows behavior describe in https://www.w3.org/TR/wai-aria-practices/examples/checkbox/checkbox-2/checkbox-2.html
+const CheckboxGroupWithRef = /*#__PURE__*/forwardRef(function CheckboxGroupWithRef(_ref, ref) {
+  let {
+      children,
+      className,
+      label,
+      'aria-labelledby': ariaLabelledby,
+      selectedValues,
+      onChange,
+      name,
+      style,
+      testID,
+      role = 'group',
+      id
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  if (isDevelopment()) {
+    console.warn('CheckboxGroup is deprecated. Use ControlGroup with role="group" instead.');
+    if (!label && !ariaLabelledby) {
+      console.warn('Please specify an aria label for the checkbox group.');
+    }
+  }
+
+  // Convert children to ControlGroup options format
+  const controlGroupOptions = useMemo(() => {
+    return Children.map(children, child => {
+      if (! /*#__PURE__*/isValidElement(child) || child.type !== Checkbox) {
+        return null;
+      }
+      const _child$props = child.props,
+        {
+          value,
+          children: checkboxChildren,
+          id
+        } = _child$props,
+        childProps = _objectWithoutProperties(_child$props, _excluded2);
+      if (isDevelopment() && typeof value === 'undefined') {
+        console.error('Checkboxes inside CheckboxGroup should have values.');
+        return null;
+      }
+      const checkboxId = id !== null && id !== void 0 ? id : ['checkbox-group', name, value].join('-');
+      return _objectSpread({
+        value: value,
+        children: checkboxChildren,
+        id: checkboxId
+      }, childProps);
+    }).filter(Boolean);
+  }, [children, name]);
+
+  // Convert Set to Array for ControlGroup
+  const selectedValuesArray = Array.from(selectedValues);
+  return /*#__PURE__*/_jsx(ControlGroup, {
+    ref: ref,
+    ControlComponent: Checkbox,
+    "aria-labelledby": ariaLabelledby,
+    className: cx(checkboxCss, className),
+    gap: 0,
+    hidden: props.hidden,
+    id: id,
+    label: label,
+    name: name,
+    onChange: onChange,
+    options: controlGroupOptions || [],
+    role: role,
+    style: style,
+    tabIndex: props.tabIndex,
+    testID: testID,
+    value: selectedValuesArray
+  });
+});
+export const CheckboxGroup = /*#__PURE__*/memo(CheckboxGroupWithRef);
+import "./CheckboxGroup.css";

package/esm/controls/Control.css

@@ -0,0 +1,3 @@
+@layer cds{.pointerCss-p1pliz73:not(:disabled),.pointerCss-p1pliz73:not(:-moz-read-only){cursor:pointer;}.pointerCss-p1pliz73:not(:disabled),.pointerCss-p1pliz73:not(:read-only){cursor:pointer;}
+.inputBaseCss-i1hz3kk0{margin:0;opacity:0;position:absolute;width:100%;height:100%;z-index:1;}
+.interactableCss-i1h2gel3{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;position:relative;}@supports selector(:has(:focus-visible)){.interactableCss-i1h2gel3:has(:focus-visible){outline-style:solid;outline-width:2px;outline-color:var(--color-bgPrimary);outline-offset:1px;}}.interactableCss-i1h2gel3:active > input:first-of-type,.interactableCss-i1h2gel3:visited > input:first-of-type,.interactableCss-i1h2gel3:focus > input:first-of-type,.interactableCss-i1h2gel3:hover > input:first-of-type{opacity:0;}}

package/esm/controls/Control.js

@@ -0,0 +1,118 @@
+const _excluded = ["type", "checked", "disabled", "indeterminate", "readOnly", "required", "value", "children", "label", "aria-labelledby", "background", "borderColor", "borderRadius", "borderWidth", "color", "testID", "iconStyle", "labelStyle"];
+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, useRef } from 'react';
+import { useMergeRefs } from '@coinbase/cds-common/hooks/useMergeRefs';
+import { usePrefixedId } from '@coinbase/cds-common/hooks/usePrefixedId';
+import { zIndex } from '@coinbase/cds-common/tokens/zIndex';
+import { isDevelopment } from '@coinbase/cds-utils';
+import { cx } from '../cx';
+import { Box } from '../layout/Box';
+import { Interactable } from '../system/Interactable';
+import { Text } from '../typography/Text';
+import { isRtl } from '../utils/isRtl';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const pointerCss = "pointerCss-p1pliz73";
+const inputBaseCss = "inputBaseCss-i1hz3kk0";
+const interactableCss = "interactableCss-i1h2gel3";
+const ControlWithRef = /*#__PURE__*/forwardRef(function ControlWithRef(_ref, ref) {
+  var _htmlProps$id;
+  let {
+      type,
+      checked,
+      disabled,
+      indeterminate,
+      readOnly,
+      required,
+      value,
+      children,
+      label,
+      'aria-labelledby': ariaLabelledby,
+      background,
+      borderColor,
+      borderRadius,
+      borderWidth,
+      color = checked || indeterminate ? 'fg' : 'fgMuted',
+      testID,
+      iconStyle,
+      labelStyle
+    } = _ref,
+    htmlProps = _objectWithoutProperties(_ref, _excluded);
+  if (isDevelopment() && !children && !ariaLabelledby) {
+    console.warn("Please provide an aria label for the control component ".concat(value, " either through the children or aria-labelledby prop."));
+  }
+  // Setup a11y IDs
+  const [id1, id2] = usePrefixedId(['trigger', 'collapsible']);
+  const labelId = ariaLabelledby !== null && ariaLabelledby !== void 0 ? ariaLabelledby : id1;
+  const inputId = (_htmlProps$id = htmlProps.id) !== null && _htmlProps$id !== void 0 ? _htmlProps$id : id2;
+  const internalInputRef = useRef();
+  const inputRef = useMergeRefs(ref, internalInputRef);
+  const iconElement = useMemo(() => /*#__PURE__*/_jsxs(Interactable, {
+    transparentWhileInactive: true,
+    as: "div",
+    background: background,
+    borderColor: borderColor,
+    borderRadius: borderRadius,
+    borderWidth: borderWidth,
+    className: interactableCss,
+    disabled: disabled || readOnly,
+    style: iconStyle,
+    testID: testID ? "".concat(testID, "-parent") : undefined,
+    children: [/*#__PURE__*/_jsx("input", _objectSpread({
+      ref: inputRef,
+      "aria-checked": checked,
+      "aria-labelledby": labelId,
+      "aria-required": type !== 'checkbox' ? required : undefined,
+      checked: checked,
+      className: cx(inputBaseCss, pointerCss),
+      "data-testid": testID,
+      disabled: disabled,
+      id: inputId,
+      readOnly: readOnly,
+      required: required,
+      type: type,
+      value: value
+    }, htmlProps)), children]
+  }), [background, borderColor, borderRadius, borderWidth, checked, children, disabled, htmlProps, iconStyle, inputId, inputRef, labelId, readOnly, required, testID, type, value]);
+  const controlElement = useMemo(() => {
+    /**
+     * If the control has label, the label's lineHeight doesn't match the icon size. We need to
+     * wrap the icon with a container that match the lineHeight of the label typography and
+     * center the icon inside the wrapper so that the icon will be aligned properly with the
+     * first line of the label text.
+     */
+    if (!label) return iconElement;
+    return /*#__PURE__*/_jsx("label", {
+      className: pointerCss,
+      htmlFor: inputId,
+      style: labelStyle,
+      children: /*#__PURE__*/_jsxs(Box, {
+        alignItems: "flex-start",
+        flexDirection: isRtl() ? 'row-reverse' : 'row',
+        gap: 1,
+        children: [/*#__PURE__*/_jsx(Box, {
+          alignItems: "center",
+          height: "var(--lineHeight-body)",
+          role: "presentation",
+          children: iconElement
+        }), /*#__PURE__*/_jsx(Text, {
+          color: color,
+          disabled: disabled || readOnly,
+          font: "body",
+          id: labelId,
+          children: label
+        })]
+      })
+    });
+  }, [label, iconElement, inputId, labelStyle, color, disabled, readOnly, labelId]);
+
+  // If no label is provided, consumer should wrap the checkbox with <label> or provide a value for the aria-labelledby prop.
+  return controlElement;
+});
+export const Control = /*#__PURE__*/memo(ControlWithRef);
+import "./Control.css";

package/esm/controls/ControlGroup.css

@@ -0,0 +1 @@
+@layer cds{.containerCss-c1holtq6{border:none;margin:0;padding:0;min-width:0;}}

package/esm/controls/ControlGroup.js

@@ -0,0 +1,72 @@
+const _excluded = ["ControlComponent", "options", "label", "aria-labelledby", "onChange", "value", "direction", "testID", "gap", "name", "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, useId } from 'react';
+import { isDevelopment } from '@coinbase/cds-utils';
+import { cx } from '../cx';
+import { Box } from '../layout';
+import { Text } from '../typography';
+
+// Styles for container reset
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const containerCss = "containerCss-c1holtq6";
+const ControlGroupWithRef = /*#__PURE__*/forwardRef(function ControlGroup(_ref, ref) {
+  let {
+      ControlComponent: ControlComponent,
+      options,
+      label,
+      'aria-labelledby': ariaLabelledby,
+      onChange,
+      value,
+      direction = 'vertical',
+      testID,
+      gap = 2,
+      name,
+      role = 'group'
+    } = _ref,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  const generatedId = useId();
+  const labelId = "".concat(generatedId, "-label");
+  if (isDevelopment() && !label && !ariaLabelledby) {
+    console.warn('Please specify a label or aria-labelledby for the ControlGroup.');
+  }
+  const isMultiSelect = Array.isArray(value);
+  return /*#__PURE__*/_jsxs(Box, _objectSpread(_objectSpread({
+    ref: ref,
+    "aria-labelledby": ariaLabelledby || (label ? labelId : undefined),
+    className: cx(containerCss, restProps.className),
+    flexDirection: direction === 'horizontal' ? 'row' : 'column',
+    gap: gap,
+    role: role,
+    testID: testID
+  }, restProps), {}, {
+    children: [label && (typeof label === 'string' ? /*#__PURE__*/_jsx(Text, {
+      font: "headline",
+      id: labelId,
+      children: label
+    }) : label), options.map(optionProps => {
+      const optionValue = optionProps.value;
+      if (!optionValue) {
+        if (isDevelopment()) {
+          console.warn('Each option in ControlGroup must have a `value` prop.', optionProps);
+        }
+        return null;
+      }
+      const isChecked = isMultiSelect ? value.includes(optionValue) : value === optionValue;
+      return /*#__PURE__*/_jsx(ControlComponent, _objectSpread({
+        checked: isChecked,
+        name: name,
+        onChange: onChange,
+        testID: testID ? "".concat(testID, "-").concat(optionValue) : undefined,
+        value: optionValue
+      }, optionProps), optionValue);
+    })]
+  }));
+});
+export const ControlGroup = /*#__PURE__*/memo(ControlGroupWithRef);
+import "./ControlGroup.css";

package/esm/controls/HelperText.css

@@ -0,0 +1 @@
+@layer cds{.iconCss-i1ej5caw{display:inline-block;padding-inline-end:var(--space-0_5);}}

package/esm/controls/HelperText.js

@@ -0,0 +1,49 @@
+const _excluded = ["color", "id", "errorIconAccessibilityLabel", "errorIconTestID", "children", "dangerouslySetColor", "textAlign"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { memo } from 'react';
+import { Icon } from '../icons/Icon';
+import { Box } from '../layout/Box';
+import { Text } from '../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const iconCss = "iconCss-i1ej5caw";
+export const HelperText = /*#__PURE__*/memo(function HelperTex(_ref) {
+  let {
+      color,
+      id,
+      errorIconAccessibilityLabel,
+      errorIconTestID,
+      children,
+      dangerouslySetColor,
+      textAlign = 'start'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsxs(Text, _objectSpread(_objectSpread({
+    color: color,
+    dangerouslySetColor: dangerouslySetColor,
+    display: "block",
+    font: "label2",
+    id: id,
+    textAlign: textAlign
+  }, props), {}, {
+    children: [color === 'fgNegative' && /*#__PURE__*/_jsx(Box, {
+      as: "span",
+      className: iconCss,
+      children: /*#__PURE__*/_jsx(Icon, {
+        active: true,
+        accessibilityLabel: errorIconAccessibilityLabel,
+        color: "fgNegative",
+        dangerouslySetColor: dangerouslySetColor,
+        name: "info",
+        size: "xs",
+        testID: errorIconTestID
+      })
+    }), children]
+  }));
+});
+import "./HelperText.css";

package/esm/controls/InputIcon.js

@@ -0,0 +1,41 @@
+const _excluded = ["disableInheritFocusStyle", "testID", "color"];
+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, useContext } from 'react';
+import { Icon } from '../icons/Icon';
+import { Box } from '../layout/Box';
+import { TextInputFocusVariantContext } from './context';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const variantColorMap = {
+  primary: 'fgPrimary',
+  positive: 'fgPositive',
+  negative: 'fgNegative',
+  foreground: 'fg',
+  foregroundMuted: 'fgMuted',
+  secondary: 'bgSecondary'
+};
+export const InputIcon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      disableInheritFocusStyle = false,
+      testID,
+      color = 'fg'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const variant = useContext(TextInputFocusVariantContext);
+  const variantColor = variant ? variantColorMap[variant] : undefined;
+  return /*#__PURE__*/_jsx(Box, {
+    paddingX: 2,
+    testID: testID,
+    children: /*#__PURE__*/_jsx(Icon, _objectSpread(_objectSpread({
+      color: disableInheritFocusStyle ? color : variantColor !== null && variantColor !== void 0 ? variantColor : color,
+      size: "s"
+    }, props), {}, {
+      ref: ref
+    }))
+  });
+}));

package/esm/controls/InputIconButton.js

@@ -0,0 +1,41 @@
+const _excluded = ["disableInheritFocusStyle", "testID", "variant"];
+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, useContext } from 'react';
+import { IconButton } from '../buttons/IconButton';
+import { Box } from '../layout/Box';
+import { TextInputFocusVariantContext } from './context';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const variantTransformMap = {
+  positive: 'primary',
+  negative: 'primary',
+  foreground: 'primary',
+  primary: 'primary',
+  foregroundMuted: 'foregroundMuted',
+  secondary: 'secondary'
+};
+export const InputIconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function InputIconButton(_ref, ref) {
+  let {
+      disableInheritFocusStyle = false,
+      testID,
+      variant = 'primary'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const contextVariant = useContext(TextInputFocusVariantContext);
+  const transformedVariant = contextVariant ? variantTransformMap[contextVariant] : variant;
+  return /*#__PURE__*/_jsx(Box, {
+    paddingEnd: 0.5,
+    paddingStart: 1,
+    testID: testID,
+    children: /*#__PURE__*/_jsx(IconButton, _objectSpread({
+      ref: ref,
+      transparent: true,
+      variant: disableInheritFocusStyle ? variant : transformedVariant
+    }, props))
+  });
+}));

package/esm/controls/InputLabel.js

@@ -0,0 +1,26 @@
+const _excluded = ["color", "disabled"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { memo } from 'react';
+import { Text } from '../typography/Text';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const InputLabel = /*#__PURE__*/memo(function InputLabel(_ref) {
+  let {
+      color = 'fg',
+      disabled = false
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(Text, _objectSpread({
+    as: "label",
+    color: color,
+    disabled: disabled,
+    display: "block",
+    font: "label1",
+    paddingY: 0.5
+  }, props));
+});

package/esm/controls/InputStack.css

@@ -0,0 +1,3 @@
+@layer cds{.baseCss-b16zw4a5{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-width:0;-webkit-box-flex:2;-webkit-flex-grow:2;-ms-flex-positive:2;flex-grow:2;border-color:var(--border-color-unfocused);-webkit-transition:box-shadow 200ms ease-in-out;transition:box-shadow 200ms ease-in-out;overflow:hidden;}.baseCss-b16zw4a5:disabled,.baseCss-b16zw4a5[aria-disabled='true'],.baseCss-b16zw4a5:hover{border-color:var(--border-color-unfocused);opacity:1;}.baseCss-b16zw4a5:focus-within{border-color:var(--border-color-focused);box-shadow:0 0 0 var(--border-width-focused) var(--border-color-focused);}
+.inputAreaContainerCss-ipofex6{padding:1px;width:100%;}
+.persistedFocusCss-p6phjeo{border-color:var(--border-color-focused);box-shadow:0 0 0 var(--border-width-focused) var(--border-color-focused);}}