@rocket.chat/fuselage 0.32.0 → 0.32.2

package/dist/fuselage.development.js

@@ -1161,6 +1161,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -1212,7 +1223,7 @@ var getSelected = function (value, options) {
         : options === null || options === void 0 ? void 0 : options.filter(function (option) { return value.includes(option.value); });
 };
 function AutoComplete(_a) {
-    var value = _a.value, filter = _a.filter, setFilter = _a.setFilter, _b = _a.options, options = _b === void 0 ? [] : _b, renderItem = _a.renderItem, RenderSelected = _a.renderSelected, onChange = _a.onChange, renderEmpty = _a.renderEmpty, placeholder = _a.placeholder, error = _a.error, disabled = _a.disabled, multiple = _a.multiple;
+    var value = _a.value, filter = _a.filter, setFilter = _a.setFilter, _b = _a.options, options = _b === void 0 ? [] : _b, renderItem = _a.renderItem, RenderSelected = _a.renderSelected, onChange = _a.onChange, renderEmpty = _a.renderEmpty, placeholder = _a.placeholder, error = _a.error, disabled = _a.disabled, multiple = _a.multiple, props = __rest(_a, ["value", "filter", "setFilter", "options", "renderItem", "renderSelected", "onChange", "renderEmpty", "placeholder", "error", "disabled", "multiple"]);
     var ref = (0, react_1.useRef)();
     var _c = (0, fuselage_hooks_1.useResizeObserver)(), containerRef = _c.ref, borderBoxSize = _c.borderBoxSize;
     var _d = __read((0, react_1.useState)(function () { return getSelected(value, options) || []; }), 2), selected = _d[0], setSelected = _d[1];
@@ -1249,16 +1260,16 @@ function AutoComplete(_a) {
     var _e = __read((0, Options_1.useCursor)(value, memoizedOptions, handleSelect), 5), cursor = _e[0], handleKeyDown = _e[1], reset = _e[3], _f = __read(_e[4], 3), optionsAreVisible = _f[0], hide = _f[1], show = _f[2];
     (0, react_1.useEffect)(reset, [filter]);
     return (react_1.default.createElement(Box_1.default, { "rcx-autocomplete": true, ref: containerRef, onClick: (0, fuselage_hooks_1.useMutableCallback)(function () { return ref.current.focus(); }), flexGrow: 1, className: (0, react_1.useMemo)(function () { return [error && 'invalid', disabled && 'disabled']; }, [error, disabled]) },
-        react_1.default.createElement(Box_1.default, { display: 'flex', flexGrow: 1, alignItems: 'center', flexWrap: 'wrap', margin: 'neg-x4', role: 'listbox' },
+        react_1.default.createElement(Box_1.default, { display: 'flex', flexGrow: 1, alignItems: 'center', flexWrap: 'wrap', margin: 'neg-x4', role: 'group' },
             react_1.default.createElement(Margins_1.default, { all: 'x4' },
-                react_1.default.createElement(InputBox_1.InputBox.Input, { ref: ref, onChange: (0, fuselage_hooks_1.useMutableCallback)(function (e) {
+                react_1.default.createElement(InputBox_1.InputBox.Input, __assign({ ref: ref, onChange: (0, fuselage_hooks_1.useMutableCallback)(function (e) {
                         return setFilter(e.currentTarget.value);
                     }), onBlur: hide, onFocus: show, onKeyDown: handleKeyDown, placeholder: optionsAreVisible !== AnimatedVisibility_1.default.HIDDEN || !value
                         ? placeholder
-                        : undefined, order: 1, "rcx-input-box--undecorated": true, value: filter }),
-                selected &&
+                        : undefined, order: 1, "rcx-input-box--undecorated": true, value: filter }, props)),
+                (selected === null || selected === void 0 ? void 0 : selected.length) > 0 &&
                     selected.map(function (itemSelected) {
-                        return RenderSelected ? (react_1.default.createElement(RenderSelected, { key: itemSelected.value, selected: itemSelected, onRemove: handleRemove })) : (react_1.default.createElement(Chip_1.default, { role: 'option', key: itemSelected.value, value: itemSelected.value, label: itemSelected.label, children: itemSelected.label, onClick: handleRemove, selected: selected }));
+                        return RenderSelected ? (react_1.default.createElement(RenderSelected, { key: itemSelected.value, selected: itemSelected, onRemove: handleRemove })) : (react_1.default.createElement(Chip_1.default, { key: itemSelected.value, value: itemSelected.value, label: itemSelected.label, children: itemSelected.label, onClick: handleRemove, selected: selected }));
                     }))),
         react_1.default.createElement(Addon, { children: react_1.default.createElement(Icon_1.Icon, { name: optionsAreVisible === AnimatedVisibility_1.default.VISIBLE
                     ? 'cross'
@@ -2764,7 +2775,7 @@ var react_1 = __importStar(__webpack_require__(/*! react */ "react"));
 var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
 var Label_1 = __webpack_require__(/*! ../Label */ "./src/components/Label/index.tsx");
 exports.CheckBox = (0, react_1.forwardRef)(function CheckBox(_a, ref) {
-    var indeterminate = _a.indeterminate, onChange = _a.onChange, props = __rest(_a, ["indeterminate", "onChange"]);
+    var indeterminate = _a.indeterminate, onChange = _a.onChange, className = _a.className, props = __rest(_a, ["indeterminate", "onChange", "className"]);
     var innerRef = (0, react_1.useRef)(null);
     var mergedRef = (0, fuselage_hooks_1.useMergedRefs)(ref, innerRef);
     (0, react_1.useLayoutEffect)(function () {
@@ -2778,7 +2789,7 @@ exports.CheckBox = (0, react_1.forwardRef)(function CheckBox(_a, ref) {
         }
         onChange && onChange.call(innerRef.current, event);
     }, [innerRef, indeterminate, onChange]);
-    return (react_1.default.createElement(Box_1.default, { is: Label_1.Label, "rcx-check-box": true },
+    return (react_1.default.createElement(Box_1.default, { is: Label_1.Label, className: className, "rcx-check-box": true },
         react_1.default.createElement(Box_1.default, __assign({ is: 'input', type: 'checkbox', "rcx-check-box__input": true, ref: mergedRef, onChange: handleChange }, props)),
         react_1.default.createElement(Box_1.default, { is: 'i', "rcx-check-box__fake": true, "aria-hidden": 'true' })));
 });
@@ -11150,7 +11161,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.PaginatedMultiSelectFiltered = exports.PaginatedMultiSelect = void 0;
 var fuselage_hooks_1 = __webpack_require__(/*! @rocket.chat/fuselage-hooks */ "@rocket.chat/fuselage-hooks");
 var react_1 = __importStar(__webpack_require__(/*! react */ "react"));
 var prevent_1 = __webpack_require__(/*! ../../helpers/prevent */ "./src/helpers/prevent.ts");
@@ -11159,31 +11169,19 @@ var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/
 var Chip_1 = __importDefault(__webpack_require__(/*! ../Chip */ "./src/components/Chip/index.ts"));
 var Flex_1 = __importDefault(__webpack_require__(/*! ../Flex */ "./src/components/Flex/index.ts"));
 var Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
-var InputBox_1 = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
 var Margins_1 = __importDefault(__webpack_require__(/*! ../Margins */ "./src/components/Margins/index.ts"));
 var useVisible_1 = __webpack_require__(/*! ../Options/useVisible */ "./src/components/Options/useVisible.ts");
 var OptionsPaginated_1 = __webpack_require__(/*! ../OptionsPaginated */ "./src/components/OptionsPaginated/index.ts");
 var Position_1 = __importDefault(__webpack_require__(/*! ../Position */ "./src/components/Position/index.ts"));
 var SelectAddon_1 = __importDefault(__webpack_require__(/*! ../Select/SelectAddon */ "./src/components/Select/SelectAddon.tsx"));
 var SelectFocus_1 = __importDefault(__webpack_require__(/*! ../Select/SelectFocus */ "./src/components/Select/SelectFocus.tsx"));
-var SelectedOptions = (0, react_1.memo)(function (props) { return (react_1.default.createElement(Chip_1.default, __assign({ maxWidth: 'x150', withTruncatedText: true }, props))); });
 var PaginatedMultiSelect = function (_a) {
-    var withTitle = _a.withTitle, value = _a.value, filter = _a.filter, _b = _a.options, options = _b === void 0 ? [] : _b, error = _a.error, disabled = _a.disabled, _c = _a.anchor, Anchor = _c === void 0 ? SelectFocus_1.default : _c, _d = _a.onChange, onChange = _d === void 0 ? function () { } : _d, placeholder = _a.placeholder, _e = _a.renderOptions, _Options = _e === void 0 ? OptionsPaginated_1.OptionsPaginated : _e, endReached = _a.endReached, props = __rest(_a, ["withTitle", "value", "filter", "options", "error", "disabled", "anchor", "onChange", "placeholder", "renderOptions", "endReached"]);
+    var withTitle = _a.withTitle, value = _a.value, filter = _a.filter, _b = _a.options, options = _b === void 0 ? [] : _b, error = _a.error, disabled = _a.disabled, _c = _a.anchor, Anchor = _c === void 0 ? SelectFocus_1.default : _c, _d = _a.onChange, onChange = _d === void 0 ? function () { } : _d, placeholder = _a.placeholder, _e = _a.renderOptions, OptionsComponent = _e === void 0 ? OptionsPaginated_1.OptionsPaginated : _e, endReached = _a.endReached, props = __rest(_a, ["withTitle", "value", "filter", "options", "error", "disabled", "anchor", "onChange", "placeholder", "renderOptions", "endReached"]);
     var _f = __read((0, react_1.useState)(value || []), 2), internalValue = _f[0], setInternalValue = _f[1];
     var currentValue = value !== undefined ? value : internalValue;
     var selectedOptions = options.filter(function (option) {
         return currentValue.some(function (opt) { return opt.value === option.value; });
     });
-    var internalChanged = function (option) {
-        if (currentValue.some(function (opt) { return opt.value === option.value; })) {
-            var newValue_1 = currentValue.filter(function (opt) { return opt.value !== option.value; });
-            setInternalValue(newValue_1);
-            return onChange(newValue_1);
-        }
-        var newValue = __spreadArray(__spreadArray([], __read(currentValue), false), [option], false);
-        setInternalValue(newValue);
-        return onChange(newValue);
-    };
     var _g = __read((0, useVisible_1.useVisible)(), 3), visible = _g[0], hide = _g[1], show = _g[2];
     var ref = (0, react_1.useRef)(null);
     var _h = (0, fuselage_hooks_1.useResizeObserver)(), containerRef = _h.ref, borderBoxSize = _h.borderBoxSize;
@@ -11196,11 +11194,27 @@ var PaginatedMultiSelect = function (_a) {
             return show();
         }
     });
-    var handleMouseDown = (0, fuselage_hooks_1.useMutableCallback)(function (option) { return function (e) {
-        (0, prevent_1.prevent)(e);
-        internalChanged(option);
-        return false;
-    }; });
+    var addOption = function (value) {
+        var option = options.find(function (opt) { return opt.value === value; });
+        if (!option) {
+            return;
+        }
+        var newValue = __spreadArray(__spreadArray([], __read(currentValue), false), [option], false);
+        setInternalValue(newValue);
+        onChange(newValue);
+    };
+    var removeOption = function (value) {
+        var newValue = currentValue.filter(function (opt) { return opt.value !== value; });
+        setInternalValue(newValue);
+        onChange(newValue);
+    };
+    var toggleOption = function (value) {
+        if (currentValue.some(function (opt) { return opt.value === value; })) {
+            removeOption(value);
+            return;
+        }
+        addOption(value);
+    };
     return (react_1.default.createElement(Box_1.default, __assign({ is: 'div', "rcx-select": true, className: [error && 'invalid', disabled && 'disabled'], ref: containerRef, onClick: handleClick, disabled: disabled }, props),
         react_1.default.createElement(Flex_1.default.Item, { grow: 1 },
             react_1.default.createElement(Margins_1.default, { inline: 'x4' },
@@ -11209,9 +11223,13 @@ var PaginatedMultiSelect = function (_a) {
                         react_1.default.createElement(Box_1.default, { is: 'div', display: 'flex', alignItems: 'center', flexWrap: 'wrap', margin: '-x8', role: 'listbox' },
                             react_1.default.createElement(Margins_1.default, { all: 'x4' },
                                 react_1.default.createElement(Anchor, { disabled: disabled, ref: ref, "aria-haspopup": 'listbox', onClick: show, onBlur: hide, order: 1, "rcx-input-box--undecorated": true, children: placeholder !== null && placeholder !== void 0 ? placeholder : null }),
-                                selectedOptions.map(function (option, index) { return (react_1.default.createElement(SelectedOptions, __assign({}, (withTitle && {
-                                    title: option.label,
-                                }), { tabIndex: -1, role: 'option', key: index, onMouseDown: handleMouseDown(option), children: option.label }))); }))))))),
+                                selectedOptions.map(function (_a, index) {
+                                    var value = _a.value, label = _a.label;
+                                    return (react_1.default.createElement(Chip_1.default, { key: value !== null && value !== void 0 ? value : index, maxWidth: 'x150', withTruncatedText: true, title: withTitle ? label : undefined, tabIndex: -1, role: 'option', onClick: function (e) {
+                                            (0, prevent_1.prevent)(e);
+                                            removeOption(value);
+                                        } }, label));
+                                }))))))),
         react_1.default.createElement(Flex_1.default.Item, { grow: 0, shrink: 0 },
             react_1.default.createElement(Margins_1.default, { inline: 'x4' },
                 react_1.default.createElement(SelectAddon_1.default, { children: react_1.default.createElement(Icon_1.Icon, { name: visible === AnimatedVisibility_1.default.VISIBLE
@@ -11219,12 +11237,77 @@ var PaginatedMultiSelect = function (_a) {
                             : 'chevron-down', size: 'x20' }) }))),
         react_1.default.createElement(AnimatedVisibility_1.default, { visibility: visible },
             react_1.default.createElement(Position_1.default, { anchor: containerRef },
-                react_1.default.createElement(_Options, { withTitle: withTitle, width: borderBoxSize.inlineSize, onMouseDown: prevent_1.prevent, multiple: true, filter: filter, role: 'listbox', options: options, cursor: -1, endReached: endReached, onSelect: function (_a) {
-                        var _b = __read(_a, 2), value = _b[0], label = _b[1];
-                        return internalChanged({ value: value, label: label });
+                react_1.default.createElement(OptionsComponent, { width: borderBoxSize.inlineSize, onMouseDown: prevent_1.prevent, multiple: true, filter: filter, role: 'listbox', options: options, cursor: -1, endReached: endReached, onSelect: function (_a) {
+                        var _b = __read(_a, 1), value = _b[0];
+                        toggleOption(value);
                     } })))));
 };
-exports.PaginatedMultiSelect = PaginatedMultiSelect;
+exports["default"] = PaginatedMultiSelect;
+
+
+/***/ }),
+
+/***/ "./src/components/PaginatedSelect/PaginatedMultiSelectFiltered.tsx":
+/*!*************************************************************************!*\
+  !*** ./src/components/PaginatedSelect/PaginatedMultiSelectFiltered.tsx ***!
+  \*************************************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.PaginatedMultiSelectFiltered = void 0;
+var react_1 = __importStar(__webpack_require__(/*! react */ "react"));
+var Flex_1 = __importDefault(__webpack_require__(/*! ../Flex */ "./src/components/Flex/index.ts"));
+var InputBox_1 = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
+var PaginatedMultiSelect_1 = __importDefault(__webpack_require__(/*! ./PaginatedMultiSelect */ "./src/components/PaginatedSelect/PaginatedMultiSelect.tsx"));
 var PaginatedMultiSelectFiltered = function (_a) {
     var filter = _a.filter, setFilter = _a.setFilter, options = _a.options, placeholder = _a.placeholder, props = __rest(_a, ["filter", "setFilter", "options", "placeholder"]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -11235,7 +11318,7 @@ var PaginatedMultiSelectFiltered = function (_a) {
                     return setFilter === null || setFilter === void 0 ? void 0 : setFilter(e.currentTarget.value);
                 } }, props, { "rcx-input-box--undecorated": true }))));
     }), []);
-    return (react_1.default.createElement(exports.PaginatedMultiSelect, __assign({ filter: filter, options: options }, props, { anchor: anchor })));
+    return (react_1.default.createElement(PaginatedMultiSelect_1.default, __assign({ filter: filter, options: options }, props, { anchor: anchor })));
 };
 exports.PaginatedMultiSelectFiltered = PaginatedMultiSelectFiltered;
 
@@ -11315,9 +11398,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.PaginatedSelect = void 0;
-// @ts-nocheck
 var fuselage_hooks_1 = __webpack_require__(/*! @rocket.chat/fuselage-hooks */ "@rocket.chat/fuselage-hooks");
 var react_1 = __importStar(__webpack_require__(/*! react */ "react"));
+var prevent_1 = __webpack_require__(/*! ../../helpers/prevent */ "./src/helpers/prevent.ts");
 var AnimatedVisibility_1 = __importDefault(__webpack_require__(/*! ../AnimatedVisibility */ "./src/components/AnimatedVisibility/index.ts"));
 var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
 var Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
@@ -11328,21 +11411,6 @@ var PositionAnimated_1 = __importDefault(__webpack_require__(/*! ../PositionAnim
 var SelectAddon_1 = __importDefault(__webpack_require__(/*! ../Select/SelectAddon */ "./src/components/Select/SelectAddon.tsx"));
 var SelectFocus_1 = __importDefault(__webpack_require__(/*! ../Select/SelectFocus */ "./src/components/Select/SelectFocus.tsx"));
 var PaginatedSelectWrapper_1 = __importDefault(__webpack_require__(/*! ./PaginatedSelectWrapper */ "./src/components/PaginatedSelect/PaginatedSelectWrapper.tsx"));
-var prevent = function (e) {
-    e.preventDefault();
-    e.stopPropagation();
-    e.nativeEvent.stopImmediatePropagation();
-};
-var useDidUpdate = function (func) {
-    var didMount = (0, react_1.useRef)(false);
-    var fn = (0, fuselage_hooks_1.useMutableCallback)(func);
-    (0, react_1.useEffect)(function () {
-        if (didMount.current) {
-            fn();
-        }
-        didMount.current = true;
-    }, [fn]);
-};
 var PaginatedSelect = function (_a) {
     var value = _a.value, withTitle = _a.withTitle, filter = _a.filter, _setFilter = _a.setFilter, error = _a.error, disabled = _a.disabled, _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.anchor, Anchor = _c === void 0 ? SelectFocus_1.default : _c, _d = _a.onChange, onChange = _d === void 0 ? function () { } : _d, _e = _a.placeholder, placeholder = _e === void 0 ? '' : _e, _f = _a.renderOptions, _Options = _f === void 0 ? OptionsPaginated_1.OptionsPaginated : _f, endReached = _a.endReached, props = __rest(_a, ["value", "withTitle", "filter", "setFilter", "error", "disabled", "options", "anchor", "onChange", "placeholder", "renderOptions", "endReached"]);
     var _g = __read((0, react_1.useState)(value), 2), internalValue = _g[0], setInternalValue = _g[1];
@@ -11357,7 +11425,6 @@ var PaginatedSelect = function (_a) {
     });
     var ref = (0, react_1.useRef)(null);
     var _j = (0, fuselage_hooks_1.useResizeObserver)(), containerRef = _j.ref, borderBoxSize = _j.borderBoxSize;
-    useDidUpdate([filter, internalValue]);
     var valueLabel = option === null || option === void 0 ? void 0 : option.label;
     var visibleText = (filter === undefined || visible === AnimatedVisibility_1.default.HIDDEN) &&
         (valueLabel || placeholder || typeof placeholder === 'string');
@@ -11380,7 +11447,7 @@ var PaginatedSelect = function (_a) {
                             ? 'chevron-up'
                             : 'chevron-down', size: 'x20' })))),
         react_1.default.createElement(PositionAnimated_1.default, { visible: visible, anchor: containerRef },
-            react_1.default.createElement(_Options, __assign({}, (withTitle && { title: withTitle }), { width: borderBoxSize.inlineSize, role: 'listbox', filter: filter, options: options, onSelect: internalChangedByClick, endReached: endReached, onMouseDown: prevent })))));
+            react_1.default.createElement(_Options, __assign({}, (withTitle && { title: withTitle }), { width: borderBoxSize.inlineSize, role: 'listbox', filter: filter, options: options, onSelect: internalChangedByClick, endReached: endReached, onMouseDown: prevent_1.prevent })))));
 };
 exports.PaginatedSelect = PaginatedSelect;
 
@@ -11528,8 +11595,8 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.PaginatedMultiSelectFiltered = exports.PaginatedSelectFiltered = void 0;
 var PaginatedSelectFiltered_1 = __webpack_require__(/*! ./PaginatedSelectFiltered */ "./src/components/PaginatedSelect/PaginatedSelectFiltered.tsx");
 Object.defineProperty(exports, "PaginatedSelectFiltered", ({ enumerable: true, get: function () { return PaginatedSelectFiltered_1.PaginatedSelectFiltered; } }));
-var PaginatedMultiSelect_1 = __webpack_require__(/*! ./PaginatedMultiSelect */ "./src/components/PaginatedSelect/PaginatedMultiSelect.tsx");
-Object.defineProperty(exports, "PaginatedMultiSelectFiltered", ({ enumerable: true, get: function () { return PaginatedMultiSelect_1.PaginatedMultiSelectFiltered; } }));
+var PaginatedMultiSelectFiltered_1 = __webpack_require__(/*! ./PaginatedMultiSelectFiltered */ "./src/components/PaginatedSelect/PaginatedMultiSelectFiltered.tsx");
+Object.defineProperty(exports, "PaginatedMultiSelectFiltered", ({ enumerable: true, get: function () { return PaginatedMultiSelectFiltered_1.PaginatedMultiSelectFiltered; } }));
 
 
 /***/ }),
@@ -12111,9 +12178,9 @@ var react_1 = __importStar(__webpack_require__(/*! react */ "react"));
 var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
 var Label_1 = __webpack_require__(/*! ../Label */ "./src/components/Label/index.tsx");
 exports.RadioButton = (0, react_1.forwardRef)(function RadioButton(_a, ref) {
-    var autoComplete = _a.autoComplete, checked = _a.checked, defaultChecked = _a.defaultChecked, disabled = _a.disabled, form = _a.form, id = _a.id, name = _a.name, required = _a.required, tabIndex = _a.tabIndex, value = _a.value, qa = _a.qa, dataQa = _a["data-qa"], onChange = _a.onChange, onInput = _a.onInput, onInvalid = _a.onInvalid, props = __rest(_a, ["autoComplete", "checked", "defaultChecked", "disabled", "form", "id", "name", "required", "tabIndex", "value", "qa", 'data-qa', "onChange", "onInput", "onInvalid"]);
-    return (react_1.default.createElement(Box_1.default, __assign({ is: Label_1.Label, "rcx-radio-button": true }, props),
-        react_1.default.createElement(Box_1.default, { is: 'input', "rcx-radio-button__input": true, autoComplete: autoComplete, checked: checked, defaultChecked: defaultChecked, disabled: disabled, form: form, id: id, name: name, required: required, tabIndex: tabIndex, type: 'radio', value: value, "data-qa": dataQa || qa, ref: ref, onChange: onChange, onInput: onInput, onInvalid: onInvalid }),
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (react_1.default.createElement(Box_1.default, { is: Label_1.Label, className: className, "rcx-radio-button": true },
+        react_1.default.createElement(Box_1.default, __assign({ is: 'input', "rcx-radio-button__input": true, type: 'radio', ref: ref }, props)),
         react_1.default.createElement(Box_1.default, { is: 'i', "rcx-radio-button__fake": true, "aria-hidden": 'true' })));
 });
 
@@ -16196,6 +16263,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -16204,8 +16282,9 @@ exports.ToggleSwitch = void 0;
 var react_1 = __importStar(__webpack_require__(/*! react */ "react"));
 var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
 var Label_1 = __webpack_require__(/*! ../Label */ "./src/components/Label/index.tsx");
-exports.ToggleSwitch = (0, react_1.forwardRef)(function ToggleSwitch(props, ref) {
-    return (react_1.default.createElement(Box_1.default, { is: Label_1.Label, "rcx-toggle-switch": true },
+exports.ToggleSwitch = (0, react_1.forwardRef)(function ToggleSwitch(_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (react_1.default.createElement(Box_1.default, { is: Label_1.Label, className: className, "rcx-toggle-switch": true },
         react_1.default.createElement(Box_1.default, __assign({ is: 'input', ref: ref, "rcx-toggle-switch__input": true, type: 'checkbox' }, props)),
         react_1.default.createElement(Box_1.default, { is: 'i', "rcx-toggle-switch__fake": true, "aria-hidden": 'true' })));
 });