@festo-ui/react 9.0.0-dev.711 → 9.0.0-dev.713

package/node/lib/forms/radio/RadioButton.js

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _RadioGroupContext = _interopRequireDefault(require("./RadioGroupContext.js"));
+var _useId = _interopRequireDefault(require("../../helper/useId.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function Radio(props) {
+  const {
+    id: idProps,
+    onChange,
+    value,
+    name,
+    defaultChecked: defaultCheckedProp,
+    checked,
+    labelPosition = "after",
+    large = false,
+    disabled = false,
+    required = false,
+    children,
+    className
+  } = props;
+  const {
+    disabled: groupDisabled,
+    labelPosition: groupLabelPosition,
+    large: groupLarge,
+    name: groupName,
+    value: groupValue,
+    required: groupRequired,
+    handleValueChange: onGroupValueChange,
+    isControlled
+  } = (0, _react.useContext)(_RadioGroupContext.default);
+  const innerLabelPosition = groupLabelPosition ?? labelPosition;
+  const classes = (0, _classnames.default)("fwe-radio", {
+    "fwe-radio-label-below": innerLabelPosition === "below"
+  }, {
+    "fwe-radio-label-before": innerLabelPosition === "before"
+  }, {
+    "fwe-radio-lg": large || groupLarge
+  }, className);
+  const controlledChecked = checked !== undefined || isControlled && groupValue !== undefined ? Boolean(checked || groupValue === value) : undefined;
+  const getDefaultChecked = () => {
+    if (controlledChecked !== undefined) {
+      return undefined;
+    }
+    if (defaultCheckedProp !== undefined) {
+      return defaultCheckedProp;
+    }
+    if (!isControlled && groupValue !== undefined) {
+      return groupValue === value;
+    }
+    return undefined;
+  };
+  const defaultChecked = getDefaultChecked();
+  function handleChange(event) {
+    const newValue = event.target.value;
+    if (newValue) {
+      onGroupValueChange?.(newValue);
+    }
+    onChange?.(newValue);
+  }
+  const id = (0, _useId.default)(idProps);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+    className: classes,
+    htmlFor: id,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fwe-radio-check",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+        defaultChecked: defaultChecked,
+        checked: controlledChecked,
+        type: "radio",
+        id: id,
+        name: groupName || name,
+        value: value,
+        onChange: handleChange,
+        disabled: disabled || groupDisabled,
+        required: required || groupRequired
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fwe-radio-checkmark"
+      }), " "]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fwe-radio-label-content",
+      children: children
+    })]
+  });
+}
+var _default = exports.default = Radio;

package/node/lib/forms/radio/RadioGroup.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _useControlled = _interopRequireDefault(require("../../helper/useControlled.js"));
+var _useId = _interopRequireDefault(require("../../helper/useId.js"));
+var _RadioGroupContext = _interopRequireDefault(require("./RadioGroupContext.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    className,
+    onValueChange,
+    value: controlledValue,
+    defaultValue,
+    name,
+    labelPosition,
+    large,
+    disabled,
+    required,
+    ...props
+  } = _ref;
+  const contextName = (0, _useId.default)(name);
+  const [value, setValue] = (0, _useControlled.default)({
+    controlled: controlledValue,
+    default: defaultValue
+  });
+  const handleValueChange = (0, _react.useCallback)(newValue => {
+    onValueChange?.(newValue);
+    setValue(newValue);
+  }, [onValueChange, setValue]);
+  const contextValue = (0, _react.useMemo)(() => ({
+    labelPosition,
+    large,
+    disabled,
+    required,
+    handleValueChange,
+    value,
+    isControlled: controlledValue !== undefined,
+    name: contextName
+  }), [controlledValue, handleValueChange, labelPosition, large, disabled, required, value, contextName]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroupContext.default.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: ref,
+      className: (0, _classnames.default)("fwe-radio-group", className),
+      role: "radiogroup",
+      ...props,
+      children: children
+    })
+  });
+});
+var _default = exports.default = RadioGroup;

package/node/lib/forms/radio/RadioGroupContext.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+const RadioGroupContext = /*#__PURE__*/(0, _react.createContext)({});
+var _default = exports.default = RadioGroupContext;

package/node/lib/forms/segment/Segment.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireDefault(require("react"));
+var _useControlled = _interopRequireDefault(require("../../helper/useControlled.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const defaultConfig = {
+  outline: true,
+  iconOnly: true
+};
+function Segment(props) {
+  const {
+    children,
+    legend,
+    config,
+    onChange,
+    className,
+    value: valueProps
+  } = props;
+  const innerConfig = {
+    ...defaultConfig,
+    ...config
+  };
+  let useIcon = false;
+  let useIconAndText = false;
+  let tmpValue = "";
+  _react.default.Children.forEach(children, (child, index) => {
+    if (! /*#__PURE__*/_react.default.isValidElement(child)) {
+      return null;
+    }
+    if (index === 0 && child.props.icon !== null) {
+      if (innerConfig.iconOnly) {
+        useIcon = true;
+      } else {
+        useIconAndText = true;
+      }
+    }
+    if (child.props.checked) {
+      tmpValue = child.props.value;
+    }
+    return null;
+  });
+  const [value, setValue] = (0, _useControlled.default)({
+    controlled: valueProps,
+    default: tmpValue
+  });
+  const handleChange = (event, _value) => {
+    if (onChange) {
+      onChange(event, _value);
+    }
+    setValue(_value);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("fieldset", {
+    className: (0, _classnames.default)("fwe-segment", {
+      "fwe-segment-outline": innerConfig.outline,
+      "fwe-segment-icon": useIcon,
+      "fwe-segment-icon-text": useIconAndText
+    }, className),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("legend", {
+      className: "fwe-sr-only fwe-d-inline-block",
+      children: legend
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fwe-segment-group",
+      children: _react.default.Children.map(children, child => {
+        if (! /*#__PURE__*/_react.default.isValidElement(child)) {
+          return null;
+        }
+        return /*#__PURE__*/_react.default.cloneElement(child, {
+          ...child.props,
+          onChange: handleChange,
+          iconOnly: innerConfig.iconOnly,
+          checked: child.props.value === value
+        });
+      })
+    })]
+  });
+}
+var _default = exports.default = Segment;

package/node/lib/forms/segment/segment-control/SegmentControl.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _IconWrapper = _interopRequireDefault(require("../../../components/icon-wrapper/IconWrapper.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function SegmentControl(props) {
+  const {
+    label,
+    checked,
+    disabled,
+    name,
+    value,
+    icon,
+    onChange,
+    id,
+    className,
+    iconOnly
+  } = props;
+  const componentId = (0, _react.useRef)(id ?? (Math.random() * Date.now()).toString().replace(".", "-"));
+  let viewMode = "text";
+  if (icon) {
+    viewMode = iconOnly ? "icon" : "icon-text";
+  }
+  const handleChange = event => {
+    if (onChange) {
+      onChange(event, value);
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+      className: "fwe-segment-input",
+      type: "radio",
+      id: componentId.current,
+      name: name,
+      value: value,
+      checked: checked,
+      disabled: disabled,
+      onChange: e => handleChange(e)
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+      className: (0, _classnames.default)("fwe-segment-label", className),
+      htmlFor: componentId.current,
+      children: [viewMode === "icon" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "fwe-sr-only",
+          children: label
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconWrapper.default, {
+          icon: icon
+        })]
+      }), viewMode === "text" && label, viewMode === "icon-text" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconWrapper.default, {
+          icon: icon
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "fwe-ml-xxs",
+          children: label
+        })]
+      })]
+    })]
+  });
+}
+var _default = exports.default = SegmentControl;

package/node/lib/forms/select/Select.js

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _useControlled = _interopRequireDefault(require("../../helper/useControlled.js"));
+var _index = require("./internal/index.js");
+var _useForkRef = _interopRequireDefault(require("../../helper/useForkRef.js"));
+var _utils = _interopRequireDefault(require("./internal/utils.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function SelectComponent(_ref, ref) {
+  let {
+    defaultValue = "",
+    open,
+    defaultOpen = false,
+    value: controlled,
+    label,
+    options,
+    onChange,
+    required = false,
+    config,
+    disabled,
+    name,
+    id,
+    children,
+    hint,
+    error,
+    onOpenChange,
+    renderLabelContent,
+    ...props
+  } = _ref;
+  const [value, setValue] = (0, _useControlled.default)({
+    controlled,
+    default: defaultValue,
+    onChange
+  });
+  const [focused, setFocused] = (0, _useControlled.default)({
+    controlled: open,
+    default: defaultOpen,
+    onChange: onOpenChange
+  });
+  const buttonEl = (0, _react.useRef)(null);
+  const usedOptions = options ?? (0, _utils.default)(children).childrenList.map(child => child.props.option);
+  const innerRef = (0, _react.useRef)(null);
+  const combinedRef = (0, _useForkRef.default)(ref, innerRef);
+  const multiple = Array.isArray(value);
+  const refocusButton = () => {
+    setFocused(false);
+    buttonEl?.current?.focus();
+  };
+  const handleOptionChange = newOption => {
+    let newValue = newOption.data;
+    if (value instanceof Array) {
+      newValue = value.includes(newValue) ? value.filter(item => item !== newValue) : [...value, newValue];
+    }
+    setValue(newValue);
+    if (!multiple) {
+      refocusButton();
+    }
+  };
+  const removeChip = chipLabel => {
+    const chipOption = usedOptions.find(option => option.label === chipLabel);
+    if (chipOption) {
+      handleOptionChange(chipOption);
+    }
+  };
+  const selectedLabel = multiple ? usedOptions.filter(option => value.includes(option.data))?.map(option => option.label) : usedOptions.find(option => option.data === value)?.label;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index.Wrapper, {
+    disabled: disabled,
+    ref: combinedRef,
+    ...props,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.HiddenInput, {
+      onChange: handleOptionChange,
+      options: usedOptions,
+      value: value
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.SelectButton, {
+      ref: buttonEl,
+      onToggle: () => setFocused(prev => !prev),
+      error: error,
+      disabled: disabled,
+      focused: focused,
+      required: required,
+      onChipClick: removeChip,
+      label: selectedLabel,
+      renderLabelContent: renderLabelContent
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.SelectLabel, {
+      hideLabel: config?.hideLabel,
+      label: label,
+      id: id
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fwe-select-underline"
+    }), hint && !error && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fwe-select-description",
+      children: hint
+    }), error && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fwe-select-invalid",
+      children: error
+    }), focused && /*#__PURE__*/_reactDom.default.createPortal(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.OptionsContainer, {
+      multiple: multiple,
+      ref: innerRef,
+      config: config,
+      onClose: refocusButton,
+      onOptionChange: handleOptionChange,
+      options: options,
+      label: selectedLabel,
+      children: children
+    }), document.body)]
+  });
+}
+const Select = /*#__PURE__*/(0, _react.forwardRef)(SelectComponent);
+var _default = exports.default = Select;

package/node/lib/forms/select/internal/HiddenInput.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = HiddenInput;
+var _jsxRuntime = require("react/jsx-runtime");
+function HiddenInput(_ref) {
+  let {
+    value,
+    onChange,
+    options
+  } = _ref;
+  function handleChange(event) {
+    const child = options.find(_ref2 => {
+      let {
+        data
+      } = _ref2;
+      return data === event.target.value;
+    });
+    if (child !== undefined) {
+      onChange(child);
+    }
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+    className: "fr-select-input",
+    "aria-hidden": true,
+    tabIndex: -1,
+    value: value,
+    onChange: handleChange
+  });
+}

package/node/lib/forms/select/internal/ListItem.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _SelectCheckbox = _interopRequireDefault(require("./SelectCheckbox.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ListItemComponent(_ref, ref) {
+  let {
+    children,
+    className,
+    empty,
+    options,
+    onClose,
+    onOptionChange,
+    index,
+    selectedLabel,
+    item,
+    withCheckbox,
+    onFocusChange,
+    ...restProps
+  } = _ref;
+  const isChild = /*#__PURE__*/_react.default.isValidElement(item);
+  const option = isChild ? item.props.option : item;
+  const propsWithoutOption = isChild ? {
+    ...item.props,
+    option: undefined
+  } : {};
+  const checked = Array.isArray(selectedLabel) ? selectedLabel.includes(option.label) : selectedLabel === option.label;
+  function handleKeyDown(e) {
+    const arrowKeys = ["ArrowDown", "ArrowUp"];
+    const validKeys = ["Enter", " "];
+    if (arrowKeys.concat(validKeys).includes(e.key)) {
+      e.preventDefault();
+    }
+    if (e.key === "ArrowDown") {
+      onFocusChange((index + 1) % options.length);
+    }
+    if (e.key === "ArrowUp") {
+      const nextIndex = (index - 1 + options.length) % options.length;
+      onFocusChange(nextIndex);
+    }
+    if (["Enter", " "].includes(e.key)) {
+      if (option.disabled) {
+        return;
+      }
+      onOptionChange(option);
+    }
+    if (e.key === "Escape") {
+      onClose();
+    }
+  }
+  function handleClick() {
+    if (option.disabled) {
+      return;
+    }
+    onOptionChange(option);
+  }
+  const itemRef = typeof ref !== "function" ? ref?.current?.[index] : undefined;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+    onClick: handleClick,
+    ref: itemRef,
+    role: "option",
+    onKeyDown: handleKeyDown,
+    "aria-selected": checked,
+    className: (0, _classnames.default)("fwe-select-option", {
+      "fwe-empty": !option.label
+    }, className),
+    tabIndex: 0,
+    ...restProps,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectCheckbox.default, {
+      disabled: option.disabled,
+      onClick: e => e.stopPropagation(),
+      checked: checked,
+      withCheckbox: withCheckbox,
+      children: isChild ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        ...propsWithoutOption
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "fwe-select-option-content",
+        "data-testid": "fwe-select-option-content",
+        children: option.label
+      })
+    })
+  });
+}
+const ListItem = /*#__PURE__*/(0, _react.forwardRef)(ListItemComponent);
+var _default = exports.default = ListItem;

package/node/lib/forms/select/internal/SelectButton.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _SelectButtonContent = _interopRequireDefault(require("./SelectButtonContent.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const SelectButton = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    onToggle,
+    disabled,
+    label,
+    focused,
+    required,
+    error,
+    onChipClick,
+    renderLabelContent
+  } = _ref;
+  const empty = label === undefined && !focused;
+  function handleKeyDown(e) {
+    if (disabled) {
+      return;
+    }
+    const validKeys = ["Enter", " ", "ArrowUp", "ArrowDown"];
+    if (validKeys.includes(e.key)) {
+      e.preventDefault();
+      onToggle();
+    }
+  }
+  function handleClick(e) {
+    if (disabled) {
+      return;
+    }
+    e.stopPropagation();
+    onToggle();
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    role: "button",
+    tabIndex: 0,
+    className: (0, _classnames.default)("fwe-select", {
+      "fwe-focus": focused,
+      "fwe-empty": empty,
+      "fwe-required": required,
+      "fwe-disabled": disabled,
+      "fwe-invalid": error
+    }),
+    onClick: handleClick,
+    ref: ref,
+    onKeyDown: handleKeyDown,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fwe-select-content",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectButtonContent.default, {
+        onClick: onChipClick,
+        label: label,
+        renderLabelContent: renderLabelContent
+      })
+    })
+  });
+});
+var _default = exports.default = SelectButton;

package/node/lib/forms/select/internal/SelectButtonContent.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SelectButtonContent;
+var _reactIcons = require("@festo-ui/react-icons");
+var _jsxRuntime = require("react/jsx-runtime");
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+
+function SelectButtonContent(_ref) {
+  let {
+    label,
+    renderLabelContent,
+    onClick
+  } = _ref;
+  const handleChipClick = chipLabel => e => {
+    e.stopPropagation();
+    onClick(chipLabel);
+  };
+  if (renderLabelContent) {
+    return renderLabelContent(label);
+  }
+  if (Array.isArray(label)) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fwe-chip-container",
+      children: label.map(v => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fwe-chip chip-text-truncate fwe-pr-4",
+        title: v,
+        children: [v, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "chip-removable",
+          onClick: handleChipClick(v),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcons.IconCloseSmall, {
+            size: 16
+          })
+        })]
+      }, v))
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: label
+  });
+}

package/node/lib/forms/select/internal/SelectCheckbox.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SelectCheckbox;
+var _Checkbox = _interopRequireDefault(require("../../checkbox/Checkbox.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function SelectCheckbox(_ref) {
+  let {
+    children,
+    withCheckbox,
+    ...props
+  } = _ref;
+  if (withCheckbox) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+      tabIndex: -1,
+      ...props,
+      children: children
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: children
+  });
+}