@rocket.chat/fuselage 0.75.0 → 0.77.0

package/dist/fuselage.development.js

@@ -745,12 +745,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const AvatarContainer_1 = __importDefault(__webpack_require__(/*! ./AvatarContainer */ "./src/components/Avatar/AvatarContainer.tsx"));
-const Avatar = ({ size = 'x36', rounded = false, objectFit = false, url, className, alt, ...props }) => {
+const Avatar = ({ size = 'x36', rounded = false, objectFit, url, className, alt, ...props }) => {
     const innerClass = [
         'rcx-avatar__element',
-        objectFit && 'rcx-avatar__element--object-fit',
         size && `rcx-avatar__element--${size}`,
         rounded && 'rcx-avatar__element--rounded',
+        objectFit && `rcx-avatar__element--object-fit-${objectFit}`,
     ]
         .filter(Boolean)
         .join(' ');
@@ -1188,6 +1188,7 @@ exports.propDefs = {
     overflow: stringProp,
     overflowX: stringProp,
     overflowY: stringProp,
+    objectFit: stringProp,
     position: stringProp,
     zIndex: numberOrStringProp,
     inset: insetProp,
@@ -3058,7 +3059,7 @@ const WithErrorWrapper_1 = __importDefault(__webpack_require__(/*! ../../helpers
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
 const Field_1 = __webpack_require__(/*! ./Field */ "./src/components/Field/Field.tsx");
 const FieldLink = (props) => {
-    const component = (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'a', target: '_blank', "rcx-field__link": true, ...props });
+    const component = (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'a', "rcx-field__link": true, ...props });
     if (true) {
         return ((0, jsx_runtime_1.jsx)(WithErrorWrapper_1.default, { context: Field_1.FieldContext, parentComponent: 'Field', componentName: FieldLink.name, children: component }));
     }
@@ -5923,7 +5924,9 @@ const MultiSelect = (0, react_1.forwardRef)(({ value, filter, setFilter, options
         innerRef.current?.focus();
         return show();
     });
-    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { is: 'div', "rcx-select": true, className: [error && 'invalid', disabled && 'disabled'], ref: containerRef, onClick: handleClick, disabled: disabled, ...props, children: [(0, jsx_runtime_1.jsx)(Flex_1.FlexItem, { grow: 1, children: (0, jsx_runtime_1.jsx)(Margins_1.Margins, { inline: 'x4', children: (0, jsx_runtime_1.jsx)(Flex_1.FlexContainer, { children: (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'div', children: (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'div', display: 'flex', alignItems: 'center', flexWrap: 'wrap', margin: '-x8', children: (0, jsx_runtime_1.jsxs)(Margins_1.Margins, { all: 'x4', children: [renderAnchor({
+    const listboxId = props.id ? `${props.id}-listbox` : undefined;
+    const { id, name, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, ...containerProps } = props;
+    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { is: 'div', "rcx-select": true, className: [error && 'invalid', disabled && 'disabled'], ref: containerRef, onClick: handleClick, disabled: disabled, ...containerProps, children: [(0, jsx_runtime_1.jsx)(Flex_1.FlexItem, { grow: 1, children: (0, jsx_runtime_1.jsx)(Margins_1.Margins, { inline: 'x4', children: (0, jsx_runtime_1.jsx)(Flex_1.FlexContainer, { children: (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'div', children: (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'div', display: 'flex', alignItems: 'center', flexWrap: 'wrap', margin: '-x8', children: (0, jsx_runtime_1.jsxs)(Margins_1.Margins, { all: 'x4', children: [renderAnchor({
                                             'ref': anchorRef,
                                             'children': internalValue.length === 0 ? placeholder : null,
                                             'disabled': disabled ?? false,
@@ -5931,8 +5934,17 @@ const MultiSelect = (0, react_1.forwardRef)(({ value, filter, setFilter, options
                                             'onBlur': hide,
                                             'onKeyDown': handleKeyDown,
                                             'onKeyUp': handleKeyUp,
+                                            'role': 'combobox',
                                             'aria-expanded': visible === AnimatedVisibility_1.AnimatedVisibility.VISIBLE,
-                                            'aria-labelledby': props['aria-labelledby'],
+                                            'aria-haspopup': 'listbox',
+                                            'aria-controls': listboxId,
+                                            id,
+                                            name,
+                                            'aria-label': ariaLabel,
+                                            'aria-labelledby': ariaLabelledBy,
+                                            'aria-describedby': ariaDescribedBy,
+                                            'aria-invalid': ariaInvalid,
+                                            'aria-required': ariaRequired,
                                         }), internalValue.map((value) => {
                                             const currentOption = options.find(([val]) => val === value);
                                             return RenderSelected ? ((0, jsx_runtime_1.jsx)(RenderSelected, { value: value, label: getLabel(currentOption), onMouseDown: (e) => {
@@ -5946,7 +5958,7 @@ const MultiSelect = (0, react_1.forwardRef)(({ value, filter, setFilter, options
                                                 }, children: getLabel(currentOption) }, String(value)));
                                         })] }) }) }) }) }) }), (0, jsx_runtime_1.jsx)(Flex_1.FlexItem, { grow: 0, shrink: 0, children: (0, jsx_runtime_1.jsx)(Margins_1.Margins, { inline: 'x4', children: (0, jsx_runtime_1.jsx)(SelectAddon_1.default, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: visible === AnimatedVisibility_1.AnimatedVisibility.VISIBLE
                                 ? 'chevron-up'
-                                : addonIcon || 'chevron-down', size: 'x20' }) }) }) }), (0, jsx_runtime_1.jsx)(AnimatedVisibility_1.AnimatedVisibility, { visibility: visible, children: (0, jsx_runtime_1.jsx)(Position_1.Position, { anchor: containerRef, children: (0, jsx_runtime_1.jsx)(_Options, { width: borderBoxSize.inlineSize, onMouseDown: prevent_1.prevent, multiple: true, filter: filter, renderItem: renderItem || Option_1.CheckOption, role: 'listbox', options: filteredOptions, onSelect: internalChanged, cursor: cursor, customEmpty: customEmpty }) }) })] }));
+                                : addonIcon || 'chevron-down', size: 'x20' }) }) }) }), (0, jsx_runtime_1.jsx)(AnimatedVisibility_1.AnimatedVisibility, { visibility: visible, children: (0, jsx_runtime_1.jsx)(Position_1.Position, { anchor: containerRef, children: (0, jsx_runtime_1.jsx)(_Options, { width: borderBoxSize.inlineSize, onMouseDown: prevent_1.prevent, multiple: true, filter: filter, renderItem: renderItem || Option_1.CheckOption, id: listboxId, options: filteredOptions, onSelect: internalChanged, cursor: cursor, customEmpty: customEmpty }) }) })] }));
 });
 exports["default"] = MultiSelect;
 
@@ -5967,8 +5979,8 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const react_1 = __webpack_require__(/*! react */ "react");
 const SelectFocus_1 = __importDefault(__webpack_require__(/*! ../Select/SelectFocus */ "./src/components/Select/SelectFocus.tsx"));
-const MultiSelectAnchor = (0, react_1.forwardRef)(function MultiSelectAnchor(props, ref) {
-    return ((0, jsx_runtime_1.jsx)(SelectFocus_1.default, { "rcx-input-box--undecorated": true, ref: ref, "aria-haspopup": 'listbox', order: 1, ...props }));
+const MultiSelectAnchor = (0, react_1.forwardRef)(function MultiSelectAnchor({ children, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsx)(SelectFocus_1.default, { "rcx-input-box--undecorated": true, ref: ref, order: 1, ...props, children: children }));
 });
 exports["default"] = MultiSelectAnchor;
 
@@ -5990,10 +6002,10 @@ const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-ru
 const react_1 = __webpack_require__(/*! react */ "react");
 const MultiSelect_1 = __importDefault(__webpack_require__(/*! ./MultiSelect */ "./src/components/MultiSelect/MultiSelect.tsx"));
 const MultiSelectFilteredAnchor_1 = __importDefault(__webpack_require__(/*! ./MultiSelectFilteredAnchor */ "./src/components/MultiSelect/MultiSelectFilteredAnchor.tsx"));
-const MultiSelectFiltered = ({ options, placeholder, filter: propFilter, setFilter: propSetFilter, ...props }) => {
+const MultiSelectFiltered = (0, react_1.forwardRef)(({ options, placeholder, filter: propFilter, setFilter: propSetFilter, ...props }, ref) => {
     const [filter, setFilter] = (0, react_1.useState)('');
-    return ((0, jsx_runtime_1.jsx)(MultiSelect_1.default, { ...props, filter: propFilter || filter, setFilter: propSetFilter || setFilter, options: options, anchor: (params) => ((0, jsx_runtime_1.jsx)(MultiSelectFilteredAnchor_1.default, { placeholder: placeholder, filter: propFilter || filter, onChangeFilter: propSetFilter || setFilter, ...params })) }));
-};
+    return ((0, jsx_runtime_1.jsx)(MultiSelect_1.default, { ...props, ref: ref, filter: propFilter || filter, setFilter: propSetFilter || setFilter, options: options, anchor: (params) => ((0, jsx_runtime_1.jsx)(MultiSelectFilteredAnchor_1.default, { placeholder: placeholder, filter: propFilter || filter, onChangeFilter: propSetFilter || setFilter, ...params })) }));
+});
 exports["default"] = MultiSelectFiltered;
 
 
@@ -6012,7 +6024,7 @@ const react_1 = __webpack_require__(/*! react */ "react");
 const Flex_1 = __webpack_require__(/*! ../Flex */ "./src/components/Flex/index.ts");
 const InputBox_1 = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
 const MultiSelectFilteredAnchor = (0, react_1.forwardRef)(function MultiSelectFilteredAnchor({ children: _children, filter, onChangeFilter, placeholder, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsx)(Flex_1.FlexItem, { grow: 1, children: (0, jsx_runtime_1.jsx)(InputBox_1.Input, { ref: ref, placeholder: placeholder, value: filter, onInput: (e) => onChangeFilter(e.currentTarget.value), ...props, "rcx-input-box--undecorated": true, "aria-haspopup": 'listbox', order: 1 }) }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.FlexItem, { grow: 1, children: (0, jsx_runtime_1.jsx)(InputBox_1.Input, { ref: ref, placeholder: placeholder, value: filter, onInput: (e) => onChangeFilter(e.currentTarget.value), ...props, "rcx-input-box--undecorated": true, order: 1 }) }));
 });
 exports["default"] = MultiSelectFilteredAnchor;
 
@@ -6570,7 +6582,7 @@ const Option_1 = __webpack_require__(/*! ../Option */ "./src/components/Option/i
 const Scrollable_1 = __webpack_require__(/*! ../Scrollable */ "./src/components/Scrollable/index.ts");
 const Tile_1 = __webpack_require__(/*! ../Tile */ "./src/components/Tile/index.ts");
 const OptionsEmpty_1 = __importDefault(__webpack_require__(/*! ./OptionsEmpty */ "./src/components/Options/OptionsEmpty.tsx"));
-const Options = (0, react_1.forwardRef)(function Options({ maxHeight = 'x144', multiple, renderEmpty: EmptyComponent = OptionsEmpty_1.default, options, cursor, renderItem: OptionComponent = Option_1.Option, onSelect, customEmpty, ...props }, ref) {
+const Options = (0, react_1.forwardRef)(function Options({ maxHeight = 'x144', multiple, renderEmpty: EmptyComponent = OptionsEmpty_1.default, options, cursor, renderItem: OptionComponent = Option_1.Option, onSelect, customEmpty, id, ...props }, ref) {
     const liRef = (0, react_1.useRef)(null);
     (0, react_1.useLayoutEffect)(() => {
         if (!liRef.current) {
@@ -6604,7 +6616,7 @@ const Options = (0, react_1.forwardRef)(function Options({ maxHeight = 'x144', m
                     }, value: value, selected: selected || (multiple !== true && undefined), disabled: disabled, focus: cursor === i || undefined }, value));
         }
     }), [options, multiple, cursor, onSelect, OptionComponent]);
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-options": true, ...props, ref: ref, children: (0, jsx_runtime_1.jsx)(Tile_1.Tile, { padding: 0, paddingBlock: 'x12', paddingInline: 0, elevation: '2', children: (0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, { vertical: true, smooth: true, children: (0, jsx_runtime_1.jsxs)(Tile_1.Tile, { ref: liRef, elevation: '0', padding: 'none', maxHeight: maxHeight, onMouseDown: prevent_1.prevent, onClick: prevent_1.prevent, is: 'ol', "aria-multiselectable": multiple || true, role: 'listbox', "aria-activedescendant": options?.[cursor]?.[0]
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-options": true, ...props, ref: ref, children: (0, jsx_runtime_1.jsx)(Tile_1.Tile, { padding: 0, paddingBlock: 'x12', paddingInline: 0, elevation: '2', children: (0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, { vertical: true, smooth: true, children: (0, jsx_runtime_1.jsxs)(Tile_1.Tile, { ref: liRef, elevation: '0', padding: 'none', maxHeight: maxHeight, onMouseDown: prevent_1.prevent, onClick: prevent_1.prevent, is: 'ol', "aria-multiselectable": multiple || true, role: 'listbox', id: id, "aria-activedescendant": options?.[cursor]?.[0]
                         ? String(options?.[cursor]?.[0])
                         : undefined, children: [!options.length && (0, jsx_runtime_1.jsx)(EmptyComponent, { customEmpty: customEmpty }), optionsMemoized] }) }) }) }));
 });
@@ -7112,12 +7124,13 @@ Object.defineProperty(exports, "PaginatedMultiSelectFiltered", ({ enumerable: tr
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const react_1 = __webpack_require__(/*! react */ "react");
-const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
 const Chevron_1 = __webpack_require__(/*! ../Chevron */ "./src/components/Chevron/index.ts");
 const defaultItemsPerPageLabel = () => 'Items per page:';
 const defaultShowingResultsLabel = ({ count, current, itemsPerPage, }) => `Showing results ${current + 1} - ${Math.min(current + itemsPerPage, count)} of ${count}`;
 const itemsPerPageOptions = [25, 50, 100];
 const Pagination = ({ count, current = 0, itemsPerPage = 25, itemsPerPageLabel = defaultItemsPerPageLabel, showingResultsLabel = defaultShowingResultsLabel, onSetItemsPerPage, onSetCurrent, divider, ...props }) => {
+    const paginationResultLabelId = (0, react_1.useId)();
+    const itemsPerPageLabelId = (0, react_1.useId)();
     const hasItemsPerPageSelection = itemsPerPageOptions.length > 1;
     const currentPage = Math.floor(current / itemsPerPage);
     const pages = Math.ceil(count / itemsPerPage);
@@ -7148,7 +7161,12 @@ const Pagination = ({ count, current = 0, itemsPerPage = 25, itemsPerPageLabel =
     const handleSetPageLinkClick = (page) => () => {
         onSetCurrent?.(page * itemsPerPage);
     };
-    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { is: 'nav', "rcx-pagination": true, "rcx-pagination--divider": divider, ...props, children: [hasItemsPerPageSelection && ((0, jsx_runtime_1.jsxs)(Box_1.Box, { "rcx-pagination__left": true, children: [(0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'span', "rcx-pagination__label": true, children: itemsPerPageLabel(renderingContext) }), (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'ol', "rcx-pagination__list": true, children: itemsPerPageOptions.map((itemsPerPageOption) => ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'li', "rcx-pagination__list-item": true, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'button', "rcx-pagination__link": true, tabIndex: itemsPerPage === itemsPerPageOption ? -1 : 0, disabled: itemsPerPage === itemsPerPageOption, onClick: handleSetItemsPerPageLinkClick(itemsPerPageOption), children: itemsPerPageOption }) }, itemsPerPageOption))) })] })), (0, jsx_runtime_1.jsxs)(Box_1.Box, { "rcx-pagination__right": true, children: [(0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'span', "rcx-pagination__label": true, children: showingResultsLabel(renderingContext) }), (0, jsx_runtime_1.jsxs)(Box_1.Box, { is: 'ol', "rcx-pagination__list": true, children: [(0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'li', "rcx-pagination__list-item": true, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'button', "rcx-pagination__back": true, disabled: currentPage === 0, onClick: handleSetPageLinkClick(currentPage - 1), children: (0, jsx_runtime_1.jsx)(Chevron_1.Chevron, { left: true, size: 'x16' }) }) }), displayedPages.map((page, i) => ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'li', "rcx-pagination__list-item": true, children: page === '⋯' ? ('⋯') : ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'button', "rcx-pagination__link": true, disabled: currentPage === page, onClick: handleSetPageLinkClick(page), children: page + 1 })) }, i))), (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'li', "rcx-pagination__list-item": true, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'button', "rcx-pagination__forward": true, disabled: currentPage === pages - 1, onClick: handleSetPageLinkClick(currentPage + 1), children: (0, jsx_runtime_1.jsx)(Chevron_1.Chevron, { right: true, size: 'x16' }) }) })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("nav", { className: [
+            'rcx-box rcx-box--full rcx-pagination',
+            divider && 'rcx-pagination--divider',
+        ]
+            .filter(Boolean)
+            .join(' '), "aria-label": 'Pagination Navigation', ...props, children: [hasItemsPerPageSelection && ((0, jsx_runtime_1.jsxs)("div", { className: 'rcx-pagination__left', children: [(0, jsx_runtime_1.jsx)("span", { className: 'rcx-pagination__label', id: itemsPerPageLabelId, children: itemsPerPageLabel(renderingContext) }), (0, jsx_runtime_1.jsx)("ol", { className: 'rcx-box rcx-box--full rcx-pagination__list', "aria-labelledby": itemsPerPageLabelId, children: itemsPerPageOptions.map((itemsPerPageOption) => ((0, jsx_runtime_1.jsx)("li", { className: 'rcx-pagination__list-item', children: (0, jsx_runtime_1.jsx)("button", { className: 'rcx-box rcx-box--full rcx-pagination__link', tabIndex: itemsPerPage === itemsPerPageOption ? -1 : 0, disabled: itemsPerPage === itemsPerPageOption, "aria-label": `Show ${itemsPerPageOption} items per page`, onClick: handleSetItemsPerPageLinkClick(itemsPerPageOption), children: itemsPerPageOption }) }, itemsPerPageOption))) })] })), (0, jsx_runtime_1.jsxs)("div", { className: 'rcx-pagination__right', children: [(0, jsx_runtime_1.jsx)("span", { className: 'rcx-pagination__label', id: paginationResultLabelId, children: showingResultsLabel(renderingContext) }), (0, jsx_runtime_1.jsxs)("ol", { className: 'rcx-box rcx-box--full rcx-pagination__list', "aria-labelledby": paginationResultLabelId, children: [(0, jsx_runtime_1.jsx)("li", { className: 'rcx-pagination__list-item', children: (0, jsx_runtime_1.jsx)("button", { className: 'rcx-box rcx-box--full rcx-pagination__back', disabled: currentPage === 0, "aria-label": 'Previous page', onClick: handleSetPageLinkClick(currentPage - 1), children: (0, jsx_runtime_1.jsx)(Chevron_1.Chevron, { left: true, size: 'x16' }) }) }), displayedPages.map((page, i) => ((0, jsx_runtime_1.jsx)("li", { className: 'rcx-pagination__list-item', children: page === '⋯' ? ('⋯') : ((0, jsx_runtime_1.jsx)("button", { className: 'rcx-box rcx-box--full rcx-pagination__link', disabled: currentPage === page, "aria-label": `Page ${Number(page) + 1}`, onClick: handleSetPageLinkClick(Number(page)), children: Number(page) + 1 })) }, i))), (0, jsx_runtime_1.jsx)("li", { className: 'rcx-pagination__list-item', children: (0, jsx_runtime_1.jsx)("button", { className: 'rcx-box rcx-box--full rcx-pagination__forward', disabled: currentPage === pages - 1, "aria-label": 'Next page', onClick: handleSetPageLinkClick(currentPage + 1), children: (0, jsx_runtime_1.jsx)(Chevron_1.Chevron, { right: true, size: 'x16' }) }) })] })] })] }));
 };
 exports["default"] = Pagination;
 
@@ -8204,7 +8222,7 @@ exports.SelectAria = (0, react_1.forwardRef)(function SelectAria({ error, placeh
     const mergedRef = (0, fuselage_hooks_1.useMergedRefs)(outerRef, ref);
     const { triggerProps, valueProps, menuProps } = (0, react_aria_1.useSelect)({ isDisabled, ...props }, state, ref);
     const { focusProps, isFocusVisible } = (0, react_aria_1.useFocusRing)();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(SelectTrigger_1.SelectTrigger, { ...(0, react_aria_1.mergeProps)(focusProps, triggerProps), ref: mergedRef, small: small, focus: isFocusVisible || state.isOpen, error: error, id: id, children: [(0, jsx_runtime_1.jsx)(react_aria_1.HiddenSelect, { state: state, triggerRef: ref, label: props.label, name: props.name, isDisabled: isDisabled }), (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'span', color: state.selectedItem ? 'default' : 'hint', ...valueProps, ...(small && { fontScale: 'c1' }), children: state.selectedItem ? state.selectedItem.rendered : placeholder }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { color: 'default', name: state.isOpen ? 'chevron-up' : 'chevron-down', size: 'x20' })] }), state.isOpen && ((0, jsx_runtime_1.jsx)(Popover_1.Popover, { state: state, triggerRef: ref, placement: 'bottom', offset: 4, containerPadding: 8, children: (0, jsx_runtime_1.jsx)(Options_1.OptionContainer, { style: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_aria_1.HiddenSelect, { state: state, triggerRef: ref, label: props.label, name: props.name, isDisabled: isDisabled }), (0, jsx_runtime_1.jsxs)(SelectTrigger_1.SelectTrigger, { ...(0, react_aria_1.mergeProps)(focusProps, triggerProps), ref: mergedRef, small: small, focus: isFocusVisible || state.isOpen, error: error, id: id, children: [(0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'span', color: state.selectedItem ? 'default' : 'hint', ...valueProps, ...(small && { fontScale: 'c1' }), children: state.selectedItem ? state.selectedItem.rendered : placeholder }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { color: 'default', name: state.isOpen ? 'chevron-up' : 'chevron-down', size: 'x20' })] }), state.isOpen && ((0, jsx_runtime_1.jsx)(Popover_1.Popover, { state: state, triggerRef: ref, placement: 'bottom', offset: 4, containerPadding: 8, children: (0, jsx_runtime_1.jsx)(Options_1.OptionContainer, { style: {
                         width: borderBoxSize?.inlineSize,
                     }, children: (0, jsx_runtime_1.jsx)(Listbox_1.ListBox, { ...menuProps, state: state }) }) }))] }));
 });