@rocket.chat/fuselage 0.53.6 → 0.54.0

package/dist/fuselage.development.js

@@ -2310,7 +2310,7 @@ var react_1 = __importDefault(__webpack_require__(/*! react */ "react"));
 var Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
 var BubbleButton = function (_a) {
     var secondary = _a.secondary, label = _a.label, onClick = _a.onClick, icon = _a.icon, props = __rest(_a, ["secondary", "label", "onClick", "icon"]);
-    return (react_1.default.createElement("button", __assign({ className: "rcx-bubble__button ".concat(secondary
+    return (react_1.default.createElement("button", __assign({ className: "rcx-box rcx-box--full rcx-bubble__button ".concat(secondary
             ? 'rcx-bubble__button--secondary'
             : 'rcx-bubble__button--primary'), onClick: onClick }, props),
         icon && react_1.default.createElement(Icon_1.Icon, { name: icon, size: 'x16' }),
@@ -5998,7 +5998,7 @@ var Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts"
 var Addon_1 = __webpack_require__(/*! ./Addon */ "./src/components/InputBox/Addon.tsx");
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 exports.InputBox = (0, react_1.forwardRef)(function InputBox(_a, ref) {
-    var className = _a.className, addon = _a.addon, error = _a.error, hidden = _a.hidden, invisible = _a.invisible, multiple = _a.multiple, placeholderVisible = _a.placeholderVisible, _b = _a.type, type = _b === void 0 ? 'text' : _b, onChange = _a.onChange, props = __rest(_a, ["className", "addon", "error", "hidden", "invisible", "multiple", "placeholderVisible", "type", "onChange"]);
+    var className = _a.className, addon = _a.addon, error = _a.error, hidden = _a.hidden, invisible = _a.invisible, multiple = _a.multiple, placeholderVisible = _a.placeholderVisible, _b = _a.type, type = _b === void 0 ? 'text' : _b, small = _a.small, onChange = _a.onChange, props = __rest(_a, ["className", "addon", "error", "hidden", "invisible", "multiple", "placeholderVisible", "type", "small", "onChange"]);
     var innerRef = (0, react_1.useRef)(null);
     var mergedRef = (0, fuselage_hooks_1.useMergedRefs)(ref, innerRef);
     (0, react_1.useLayoutEffect)(function () {
@@ -6029,14 +6029,14 @@ exports.InputBox = (0, react_1.forwardRef)(function InputBox(_a, ref) {
     if (!addon) {
         return (react_1.default.createElement(_1.Input, __assign({ is: (type === 'textarea' && 'textarea') ||
                 (type === 'select' && 'select') ||
-                'input', className: className, cols: (type === 'textarea' && 1) || (type === 'select' && 0) || 0, hidden: hidden, invisible: invisible, multiple: multiple, ref: mergedRef, htmlSize: (type === 'textarea' && undefined) || (type === 'select' && 1) || 1, type: type === 'textarea' || type === 'select' ? undefined : type, onChange: handleChange, "rcx-input-box--multiple": multiple, "rcx-input-box--placeholder-visible": placeholderVisible, "rcx-input-box--type": type }, props)));
+                'input', className: className, cols: (type === 'textarea' && 1) || (type === 'select' && 0) || 0, hidden: hidden, invisible: invisible, multiple: multiple, ref: mergedRef, htmlSize: (type === 'textarea' && undefined) || (type === 'select' && 1) || 1, type: type === 'textarea' || type === 'select' ? undefined : type, onChange: handleChange, "rcx-input-box--multiple": multiple, "rcx-input-box--placeholder-visible": placeholderVisible, "rcx-input-box--type": type, "rcx-input-box--small": small }, props)));
     }
     return (react_1.default.createElement(_1.Wrapper, { className: __spreadArray([
             props.disabled && 'disabled'
         ], __read((Array.isArray(className) ? className : [className])), false), hidden: hidden, invisible: invisible },
         react_1.default.createElement(_1.Input, __assign({ is: (type === 'textarea' && 'textarea') ||
                 (type === 'select' && 'select') ||
-                'input', className: className, cols: (type === 'textarea' && 1) || (type === 'select' && 0) || 0, multiple: multiple, ref: mergedRef, htmlSize: (type === 'textarea' && undefined) || (type === 'select' && 1) || 1, type: type === 'textarea' || type === 'select' ? undefined : type, onChange: handleChange, "rcx-input-box--multiple": multiple, "rcx-input-box--placeholder-visible": placeholderVisible, "rcx-input-box--type": type, "rcx-input-box--undecorated": true }, props)),
+                'input', className: className, cols: (type === 'textarea' && 1) || (type === 'select' && 0) || 0, multiple: multiple, ref: mergedRef, htmlSize: (type === 'textarea' && undefined) || (type === 'select' && 1) || 1, type: type === 'textarea' || type === 'select' ? undefined : type, onChange: handleChange, "rcx-input-box--multiple": multiple, "rcx-input-box--placeholder-visible": placeholderVisible, "rcx-input-box--type": type, "rcx-input-box--undecorated": true, "rcx-input-box--small": small }, props)),
         react_1.default.createElement(Addon_1.Addon, { children: addon })));
 });
 
@@ -14471,7 +14471,7 @@ var Listbox_1 = __webpack_require__(/*! ./Listbox */ "./src/components/Select/Li
 var react_stately_2 = __webpack_require__(/*! react-stately */ "react-stately");
 Object.defineProperty(exports, "Item", ({ enumerable: true, get: function () { return react_stately_2.Item; } }));
 exports.SelectAria = (0, react_1.forwardRef)(function SelectAria(_a, outerRef) {
-    var disabled = _a.disabled, error = _a.error, placeholder = _a.placeholder, value = _a.value, onChange = _a.onChange, props = __rest(_a, ["disabled", "error", "placeholder", "value", "onChange"]);
+    var disabled = _a.disabled, error = _a.error, placeholder = _a.placeholder, value = _a.value, onChange = _a.onChange, small = _a.small, props = __rest(_a, ["disabled", "error", "placeholder", "value", "onChange", "small"]);
     var state = (0, react_stately_1.useSelectState)(__assign({ isDisabled: disabled, selectedKey: value, onSelectionChange: onChange }, props));
     var _b = (0, fuselage_hooks_1.useResizeObserver)(), ref = _b.ref, borderBoxSize = _b.borderBoxSize;
     var _c = (0, react_aria_1.useSelect)(props, state, ref), triggerProps = _c.triggerProps, valueProps = _c.valueProps, menuProps = _c.menuProps;
@@ -14479,7 +14479,7 @@ exports.SelectAria = (0, react_1.forwardRef)(function SelectAria(_a, outerRef) {
     var _d = (0, react_aria_1.useFocusRing)(), focusProps = _d.focusProps, isFocusVisible = _d.isFocusVisible;
     var mergedRef = (0, fuselage_hooks_1.useMergedRefs)(outerRef, ref);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Box_1.default, __assign({ disabled: disabled, "rcx-select": true }, (0, react_aria_1.mergeProps)(buttonProps, focusProps), { is: 'button', display: 'flex', flexDirection: 'row', fontScale: 'p2', ref: mergedRef, justifyContent: 'space-between', className: [
+        react_1.default.createElement(Box_1.default, __assign({}, props, { disabled: disabled, "rcx-select": true }, (0, react_aria_1.mergeProps)(buttonProps, focusProps), { is: 'button', display: 'flex', flexDirection: 'row', fontScale: 'p2', ref: mergedRef, justifyContent: 'space-between', "rcx-input-box--small": small, className: [
                 error && 'invalid',
                 disabled && 'disabled',
                 (isFocusVisible || state.isOpen) && 'focus',
@@ -14487,7 +14487,7 @@ exports.SelectAria = (0, react_1.forwardRef)(function SelectAria(_a, outerRef) {
                 .filter(Boolean)
                 .join(' ') }),
             react_1.default.createElement(react_aria_1.HiddenSelect, { state: state, triggerRef: ref, label: props.label, name: props.name }),
-            react_1.default.createElement(Box_1.default, __assign({ is: 'span' }, valueProps, { color: state.selectedItem ? 'default' : 'hint' }), state.selectedItem ? state.selectedItem.rendered : placeholder),
+            react_1.default.createElement(Box_1.default, __assign({ is: 'span' }, valueProps, { color: state.selectedItem ? 'default' : 'hint' }, (small && { fontScale: 'c1' })), state.selectedItem ? state.selectedItem.rendered : placeholder),
             react_1.default.createElement(Icon_1.Icon, { color: 'default', name: state.isOpen ? 'chevron-up' : 'chevron-down', size: 'x20' })),
         state.isOpen && (react_1.default.createElement(Popover_1.Popover, { state: state, triggerRef: ref, placement: 'bottom', offset: 4, containerPadding: 8 },
             react_1.default.createElement(Options_1.OptionContainer, { style: {