@rocket.chat/fuselage 0.60.0 → 0.60.2

package/dist/fuselage.development.js

@@ -2219,6 +2219,17 @@ exports["default"] = Object.assign(AnimatedVisibility_1.default, {
 /***/ (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 __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -2284,11 +2295,8 @@ var getDurationForInfinityDurationAudioFile = function (src, callback) {
         audioElement.remove();
     });
 };
-/**
- * A Fuselage’s custom AudioPlayer.
- */
 exports.AudioPlayer = (0, react_1.forwardRef)(function (_a, ref) {
-    var src = _a.src, _b = _a.type, type = _b === void 0 ? 'audio/mpeg' : _b, _c = _a.maxPlaybackSpeed, maxPlaybackSpeed = _c === void 0 ? 2 : _c, _d = _a.minPlaybackSpeed, minPlaybackSpeed = _d === void 0 ? 0.5 : _d, _e = _a.playbackSpeedStep, playbackSpeedStep = _e === void 0 ? 0.25 : _e, _f = _a.download, download = _f === void 0 ? false : _f, _g = _a.playLabel, playLabel = _g === void 0 ? 'Play' : _g, _h = _a.pauseLabel, pauseLabel = _h === void 0 ? 'Pause' : _h, _j = _a.audioPlaybackRangeLabel, audioPlaybackRangeLabel = _j === void 0 ? 'Audio Playback Range' : _j, _k = _a.changePlaybackSpeedLabel, changePlaybackSpeedLabel = _k === void 0 ? 'Change Playback Speed' : _k, _l = _a.downloadAudioFileLabel, downloadAudioFileLabel = _l === void 0 ? 'Download Audio File' : _l;
+    var src = _a.src, _b = _a.type, type = _b === void 0 ? 'audio/mpeg' : _b, _c = _a.maxPlaybackSpeed, maxPlaybackSpeed = _c === void 0 ? 2 : _c, _d = _a.minPlaybackSpeed, minPlaybackSpeed = _d === void 0 ? 0.5 : _d, _e = _a.playbackSpeedStep, playbackSpeedStep = _e === void 0 ? 0.25 : _e, _f = _a.download, download = _f === void 0 ? false : _f, _g = _a.playLabel, playLabel = _g === void 0 ? 'Play' : _g, _h = _a.pauseLabel, pauseLabel = _h === void 0 ? 'Pause' : _h, _j = _a.audioPlaybackRangeLabel, audioPlaybackRangeLabel = _j === void 0 ? 'Audio Playback Range' : _j, _k = _a.changePlaybackSpeedLabel, changePlaybackSpeedLabel = _k === void 0 ? 'Change Playback Speed' : _k, _l = _a.downloadAudioFileLabel, downloadAudioFileLabel = _l === void 0 ? 'Download Audio File' : _l, trackProps = _a.trackProps;
     var audioRef = (0, react_1.useRef)(null);
     var refs = (0, fuselage_hooks_1.useMergedRefs)(ref, audioRef);
     var _m = __read((0, react_1.useState)(false), 2), isPlaying = _m[0], setIsPlaying = _m[1];
@@ -2332,7 +2340,7 @@ exports.AudioPlayer = (0, react_1.forwardRef)(function (_a, ref) {
                         e.preventDefault();
                         forceDownload(src);
                     }
-                } })), (0, jsx_runtime_1.jsx)("audio", { style: { display: 'none' }, onTimeUpdate: function (e) {
+                } })), (0, jsx_runtime_1.jsxs)("audio", { style: { display: 'none' }, onTimeUpdate: function (e) {
                     setCurrentTime(e.target.currentTime);
                 }, onLoadedMetadata: function (e) {
                     var duration = e.target.duration;
@@ -2346,7 +2354,7 @@ exports.AudioPlayer = (0, react_1.forwardRef)(function (_a, ref) {
                     setIsPlaying(true);
                 }, onPause: function () {
                     setIsPlaying(false);
-                }, controls: true, children: (0, jsx_runtime_1.jsx)("source", { src: src, type: type }) })] }));
+                }, controls: true, children: [(0, jsx_runtime_1.jsx)("source", { src: src, type: type }), (0, jsx_runtime_1.jsx)("track", __assign({ kind: 'captions' }, trackProps))] })] }));
 });
 
 
@@ -2579,7 +2587,7 @@ var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_mod
 var AvatarContainer_1 = __webpack_require__(/*! ./AvatarContainer */ "./src/components/Avatar/AvatarContainer.tsx");
 var AvatarStack_1 = __webpack_require__(/*! ./AvatarStack */ "./src/components/Avatar/AvatarStack.tsx");
 var Avatar = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? 'x36' : _b, _c = _a.rounded, rounded = _c === void 0 ? false : _c, _d = _a.objectFit, objectFit = _d === void 0 ? false : _d, url = _a.url, className = _a.className, props = __rest(_a, ["size", "rounded", "objectFit", "url", "className"]);
+    var _b = _a.size, size = _b === void 0 ? 'x36' : _b, _c = _a.rounded, rounded = _c === void 0 ? false : _c, _d = _a.objectFit, objectFit = _d === void 0 ? false : _d, url = _a.url, className = _a.className, alt = _a.alt, props = __rest(_a, ["size", "rounded", "objectFit", "url", "className", "alt"]);
     var innerClass = [
         'rcx-avatar__element',
         objectFit && 'rcx-avatar__element--object-fit',
@@ -2588,7 +2596,7 @@ var Avatar = function (_a) {
     ]
         .filter(Boolean)
         .join(' ');
-    return ((0, jsx_runtime_1.jsx)(AvatarContainer_1.AvatarContainer, { size: size, className: className, children: (0, jsx_runtime_1.jsx)("img", __assign({ src: "".concat(url), className: "".concat(innerClass) }, props)) }));
+    return ((0, jsx_runtime_1.jsx)(AvatarContainer_1.AvatarContainer, { size: size, className: className, children: (0, jsx_runtime_1.jsx)("img", __assign({ src: url, className: innerClass, alt: alt || '' }, props)) }));
 };
 exports.Avatar = Avatar;
 /**
@@ -2857,7 +2865,9 @@ var Banner = function (_a) {
             onClose();
         }
     }, [onClose]);
-    return ((0, jsx_runtime_1.jsxs)("section", __assign({ className: (0, composeClassNames_1.composeClassNames)('rcx-banner')((_b = {}, _b[variant] = true, _b.inline = inline, _b.actionable = actionable, _b), className), ref: ref, role: 'banner', onClick: handleBannerClick }, props, { children: [icon && isIconVisible && ((0, jsx_runtime_1.jsx)("div", { className: (0, composeClassNames_1.composeClassNames)("rcx-banner__icon rcx-banner__icon--".concat(variant))({
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, composeClassNames_1.composeClassNames)('rcx-banner')((_b = {}, _b[variant] = true, _b.inline = inline, _b.actionable = actionable, _b), className), ref: ref, role: onAction ? 'button' : 'banner', tabIndex: onAction ? 0 : -1, onKeyDown: function (e) {
+            return e.code === 'Enter' || (e.code === 'Space' && handleBannerClick());
+        }, onClick: handleBannerClick }, props, { children: [icon && isIconVisible && ((0, jsx_runtime_1.jsx)("div", { className: (0, composeClassNames_1.composeClassNames)("rcx-banner__icon rcx-banner__icon--".concat(variant))({
                     inline: inline,
                 }), children: icon })), (0, jsx_runtime_1.jsxs)("div", { className: (0, composeClassNames_1.composeClassNames)('rcx-banner__content')({ inline: inline }), children: [title && ((0, jsx_runtime_1.jsx)("h6", { className: (0, composeClassNames_1.composeClassNames)('rcx-banner__title')({ inline: inline }), children: title })), children, link && ((0, jsx_runtime_1.jsx)("a", { href: link, target: linkTarget, className: (0, composeClassNames_1.composeClassNames)('rcx-banner__link')((_c = {}, _c[variant] = true, _c)), children: linkText }))] }), closeable && ((0, jsx_runtime_1.jsx)("div", { className: (0, composeClassNames_1.composeClassNames)('rcx-banner__close-button')({ inline: inline }), children: (0, jsx_runtime_1.jsx)(Button_1.IconButton, { small: true, onClick: handleCloseButtonClick, icon: 'cross' }) }))] })));
 };
@@ -4404,13 +4414,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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 __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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)
@@ -7513,13 +7533,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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 __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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)
@@ -8286,7 +8316,7 @@ MenuSection.getCollectionNode = function getCollectionNode(props) {
                                         return [4 /*yield*/, {
                                                 type: 'item',
                                                 value: item,
-                                                renderer: children,
+                                                element: children(item),
                                             }];
                                     case 3:
                                         _b.sent();
@@ -8311,7 +8341,7 @@ MenuSection.getCollectionNode = function getCollectionNode(props) {
                                         react_1.Children.forEach(children, function (child) {
                                             items_2.push({
                                                 type: 'item',
-                                                element: child,
+                                                element: child !== null && child !== void 0 ? child : undefined,
                                             });
                                         });
                                         return [5 /*yield**/, __values(items_2)];
@@ -8995,8 +9025,11 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.MessageGenericPreviewTitle = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var MessageGenericPreviewTitle = function (_a) {
-    var externalUrl = _a.externalUrl, props = __rest(_a, ["externalUrl"]);
-    return externalUrl ? ((0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)("a", __assign({ className: 'rcx-message-generic-preview__title rcx-message-generic-preview__title-link', href: externalUrl, target: '_blank' }, props)) })) : ((0, jsx_runtime_1.jsx)("span", __assign({ className: 'rcx-message-generic-preview__title' }, props)));
+    var externalUrl = _a.externalUrl, children = _a.children, props = __rest(_a, ["externalUrl", "children"]);
+    if (externalUrl) {
+        return ((0, jsx_runtime_1.jsx)("a", __assign({ className: 'rcx-message-generic-preview__title rcx-message-generic-preview__title-link', href: externalUrl, target: '_blank' }, props, { children: children })));
+    }
+    return (0, jsx_runtime_1.jsx)("span", __assign({ className: 'rcx-message-generic-preview__title' }, props));
 };
 exports.MessageGenericPreviewTitle = MessageGenericPreviewTitle;
 
@@ -9517,13 +9550,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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 __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.MessageMetricsReply = exports.MessageMetricsFollowing = exports.MessageMetricsItemLabel = exports.MessageMetricsItemIcon = exports.MessageMetricsItem = exports.MessageMetricsItemAvatarRowContent = exports.MessageMetricsItemAvatarRow = exports.MessageMetrics = void 0;
 var MessageMetrics_1 = __webpack_require__(/*! ./MessageMetrics */ "./src/components/Message/MessageMetrics/MessageMetrics.tsx");
@@ -12368,6 +12411,17 @@ exports["default"] = OptionHeader;
 /***/ (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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -12375,10 +12429,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
 var OptionColumn_1 = __importDefault(__webpack_require__(/*! ./OptionColumn */ "./src/components/Option/OptionColumn.tsx"));
-var OptionIcon = function (_a) {
-    var name = _a.name;
-    return ((0, jsx_runtime_1.jsx)(OptionColumn_1.default, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 'x20', "rcx-option__icon": true, name: name }) }));
-};
+var OptionIcon = function (props) { return ((0, jsx_runtime_1.jsx)(OptionColumn_1.default, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({ size: 'x20', "rcx-option__icon": true }, props)) })); };
 exports["default"] = OptionIcon;
 
 
@@ -12590,13 +12641,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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 __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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)
@@ -13309,7 +13370,7 @@ var PaginatedSelect = function (_a) {
     var internalChangedByClick = (0, fuselage_hooks_1.useEffectEvent)(function (_a) {
         var _b = __read(_a, 1), value = _b[0];
         setInternalValue(value);
-        onChange(value);
+        onChange(value); // FIXME
         hide();
     });
     var ref = (0, react_1.useRef)(null);
@@ -14895,24 +14956,18 @@ var Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts"
 var Options_1 = __webpack_require__(/*! ../Options */ "./src/components/Options/index.ts");
 var Popover_1 = __webpack_require__(/*! ../Popover */ "./src/components/Popover/index.ts");
 var Listbox_1 = __webpack_require__(/*! ./Listbox */ "./src/components/Select/Listbox.tsx");
+var SelectTrigger_1 = __webpack_require__(/*! ./SelectTrigger */ "./src/components/Select/SelectTrigger.tsx");
 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 error = _a.error, placeholder = _a.placeholder, value = _a.value, onChange = _a.onChange, small = _a.small, isDisabledProps = _a.isDisabled, disabled = _a.disabled, props = __rest(_a, ["error", "placeholder", "value", "onChange", "small", "isDisabled", "disabled"]);
+    var error = _a.error, placeholder = _a.placeholder, value = _a.value, onChange = _a.onChange, small = _a.small, isDisabledProps = _a.isDisabled, disabled = _a.disabled, id = _a.id, props = __rest(_a, ["error", "placeholder", "value", "onChange", "small", "isDisabled", "disabled", "id"]);
     var isDisabled = isDisabledProps || disabled;
     var state = (0, react_stately_1.useSelectState)(__assign({ isDisabled: isDisabled, selectedKey: value, onSelectionChange: onChange }, props));
     var _b = (0, fuselage_hooks_1.useResizeObserver)(), ref = _b.ref, borderBoxSize = _b.borderBoxSize;
+    var mergedRef = (0, fuselage_hooks_1.useMergedRefs)(outerRef, ref);
     var _c = (0, react_aria_1.useSelect)(__assign({ isDisabled: isDisabled }, props), state, ref), triggerProps = _c.triggerProps, valueProps = _c.valueProps, menuProps = _c.menuProps;
-    var buttonProps = (0, react_aria_1.useButton)(triggerProps, ref).buttonProps;
     var _d = (0, react_aria_1.useFocusRing)(), focusProps = _d.focusProps, isFocusVisible = _d.isFocusVisible;
-    var mergedRef = (0, fuselage_hooks_1.useMergedRefs)(outerRef, ref);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Box_1.default, __assign({}, props, { disabled: isDisabled, "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',
-                    isDisabled && 'disabled',
-                    (isFocusVisible || state.isOpen) && 'focus',
-                ]
-                    .filter(Boolean)
-                    .join(' '), 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.default, __assign({ is: 'span' }, valueProps, { color: state.selectedItem ? 'default' : 'hint' }, (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, __assign({}, (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.default, __assign({ 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 === null || borderBoxSize === void 0 ? void 0 : borderBoxSize.inlineSize,
                     }, children: (0, jsx_runtime_1.jsx)(Listbox_1.ListBox, __assign({}, menuProps, { state: state })) }) }))] }));
 });
@@ -15145,7 +15200,7 @@ exports.SelectLegacy = (0, react_1.forwardRef)(function (_a, ref) {
     var internalChangedByKeyboard = (0, fuselage_hooks_1.useEffectEvent)(function (_a) {
         var _b = __read(_a, 1), value = _b[0];
         setInternalValue(value);
-        onChange(value);
+        onChange(value); // FIXME
     });
     var option = options.find(function (option) { return getValue(option) === internalValue; });
     var index = options.indexOf(option);
@@ -15170,7 +15225,7 @@ exports.SelectLegacy = (0, react_1.forwardRef)(function (_a, ref) {
     var internalChangedByClick = (0, fuselage_hooks_1.useEffectEvent)(function (_a) {
         var _b = __read(_a, 1), value = _b[0];
         setInternalValue(value);
-        onChange(value);
+        onChange(value); // FIXME
         removeFocusClass();
         hide();
     });
@@ -15214,6 +15269,59 @@ exports.SelectLegacy = (0, react_1.forwardRef)(function (_a, ref) {
 });
 
 
+/***/ }),
+
+/***/ "./src/components/Select/SelectTrigger.tsx":
+/*!*************************************************!*\
+  !*** ./src/components/Select/SelectTrigger.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 __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.SelectTrigger = void 0;
+var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
+var react_1 = __webpack_require__(/*! react */ "react");
+var react_aria_1 = __webpack_require__(/*! react-aria */ "react-aria");
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
+exports.SelectTrigger = (0, react_1.forwardRef)(function (_a, ref) {
+    var small = _a.small, error = _a.error, isDisabled = _a.isDisabled, focus = _a.focus, id = _a.id, props = __rest(_a, ["small", "error", "isDisabled", "focus", "id"]);
+    var buttonProps = (0, react_aria_1.useButton)(props, ref).buttonProps;
+    return ((0, jsx_runtime_1.jsx)(Box_1.default, __assign({}, buttonProps, { id: id, "rcx-select": true, ref: ref, is: 'button', display: 'flex', flexDirection: 'row', fontScale: 'p2', justifyContent: 'space-between', "rcx-input-box--small": small, className: [
+            error && 'invalid',
+            isDisabled && 'disabled',
+            focus && 'focus',
+        ]
+            .filter(Boolean)
+            .join(' '), children: props.children })));
+});
+
+
 /***/ }),
 
 /***/ "./src/components/Select/index.ts":
@@ -15544,12 +15652,12 @@ var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_mod
 var Button_1 = __webpack_require__(/*! ../Button */ "./src/components/Button/index.ts");
 var SidebarBanner = function (_a) {
     var text = _a.text, description = _a.description, onClick = _a.onClick, _b = _a.variant, variant = _b === void 0 ? 'default' : _b, addon = _a.addon, onClose = _a.onClose, children = _a.children;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "rcx-box rcx-box--full rcx-sidebar-banner rcx-sidebar-banner--".concat(variant), children: [(0, jsx_runtime_1.jsxs)("div", { children: [text && (0, jsx_runtime_1.jsx)("div", { className: 'rcx-sidebar-banner--text', children: text }), description && ((0, jsx_runtime_1.jsx)("div", { className: [
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "rcx-box rcx-box--full rcx-sidebar-banner rcx-sidebar-banner--".concat(variant), children: [(0, jsx_runtime_1.jsxs)("div", { children: [text && (0, jsx_runtime_1.jsx)("div", { className: 'rcx-sidebar-banner--text', children: text }), description && ((0, jsx_runtime_1.jsx)("div", { role: onClick ? 'link' : undefined, tabIndex: 0, className: [
                             'rcx-sidebar-banner--description',
                             onClick && 'rcx-sidebar-banner--description--clickable',
                         ]
                             .filter(Boolean)
-                            .join(' '), onClick: onClick, children: description })), children] }), (0, jsx_runtime_1.jsxs)("div", { className: 'rcx-sidebar-banner__actions', children: [addon, onClose && (0, jsx_runtime_1.jsx)(Button_1.IconButton, { onClick: onClose, tiny: true, icon: 'cross' })] })] }));
+                            .join(' '), onClick: onClick, onKeyDown: function (e) { return e.key === 'Enter' && (onClick === null || onClick === void 0 ? void 0 : onClick()); }, children: description })), children] }), (0, jsx_runtime_1.jsxs)("div", { className: 'rcx-sidebar-banner__actions', children: [addon, onClose && (0, jsx_runtime_1.jsx)(Button_1.IconButton, { onClick: onClose, tiny: true, icon: 'cross' })] })] }));
 };
 exports.SidebarBanner = SidebarBanner;
 
@@ -16300,7 +16408,7 @@ var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_mod
 var Button_1 = __webpack_require__(/*! ../Button */ "./src/components/Button/index.ts");
 var SidebarBanner = function (_a) {
     var title = _a.title, linkText = _a.linkText, linkProps = _a.linkProps, _b = _a.variant, variant = _b === void 0 ? 'default' : _b, addon = _a.addon, onClose = _a.onClose, children = _a.children, props = __rest(_a, ["title", "linkText", "linkProps", "variant", "addon", "onClose", "children"]);
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "rcx-box rcx-box--full rcx-sidebar-v2-banner rcx-sidebar-v2-banner--".concat(variant) }, props, { children: [(0, jsx_runtime_1.jsxs)("div", { className: 'rcx-box rcx-box--full rcx-sidebar-v2-banner__content', children: [title && ((0, jsx_runtime_1.jsx)("h5", { className: 'rcx-box rcx-box--full rcx-sidebar-v2-banner__title', children: title })), linkText && ((0, jsx_runtime_1.jsx)("a", __assign({ className: 'rcx-box rcx-box--full rcx-sidebar-v2-banner__link', tabIndex: 0 }, linkProps, { children: linkText }))), children] }), (0, jsx_runtime_1.jsxs)("div", { className: 'rcx-box rcx-box--full rcx-sidebar-v2-banner__addon', children: [addon, onClose && (0, jsx_runtime_1.jsx)(Button_1.IconButton, { onClick: onClose, tiny: true, icon: 'cross' })] })] })));
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "rcx-box rcx-box--full rcx-sidebar-v2-banner rcx-sidebar-v2-banner--".concat(variant) }, props, { children: [(0, jsx_runtime_1.jsxs)("div", { className: 'rcx-box rcx-box--full rcx-sidebar-v2-banner__content', children: [title && ((0, jsx_runtime_1.jsx)("h5", { className: 'rcx-box rcx-box--full rcx-sidebar-v2-banner__title', children: title })), linkText && ((0, jsx_runtime_1.jsx)("a", __assign({ className: 'rcx-box rcx-box--full rcx-sidebar-v2-banner__link' }, linkProps, { children: linkText }))), children] }), (0, jsx_runtime_1.jsxs)("div", { className: 'rcx-box rcx-box--full rcx-sidebar-v2-banner__addon', children: [addon, onClose && (0, jsx_runtime_1.jsx)(Button_1.IconButton, { onClick: onClose, tiny: true, icon: 'cross' })] })] })));
 };
 exports.SidebarBanner = SidebarBanner;
 
@@ -17220,14 +17328,14 @@ var patchChildren_1 = __webpack_require__(/*! ../../helpers/patchChildren */ "./
 var Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
 var SidebarLink = function (_a) {
     var selected = _a.selected, icon = _a.icon, badge = _a.badge, menu = _a.menu, props = __rest(_a, ["selected", "icon", "badge", "menu"]);
-    return ((0, jsx_runtime_1.jsxs)("a", __assign({ className: [
+    return ((0, jsx_runtime_1.jsxs)("a", __assign({ role: 'link', tabIndex: 0, className: [
             'rcx-box rcx-box--full',
             'rcx-sidebar-v2-link',
             'rcx-sidebar-v2-item',
             selected && 'rcx-sidebar-v2-item--selected',
         ]
             .filter(Boolean)
-            .join(' '), onClick: function (e) { return e.stopPropagation(); } }, props, { children: [icon && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: icon, size: 'x20', className: 'rcx-sidebar-v2-item__icon' })), (0, jsx_runtime_1.jsx)("span", { className: 'rcx-box rcx-box--full rcx-sidebar-v2-item__title', children: props.children }), badge, menu &&
+            .join(' '), onClick: function (e) { return e.stopPropagation(); }, onKeyDown: function (e) { return e.code === 'Enter' && e.stopPropagation(); } }, props, { children: [icon && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: icon, size: 'x20', className: 'rcx-sidebar-v2-item__icon' })), (0, jsx_runtime_1.jsx)("span", { className: 'rcx-box rcx-box--full rcx-sidebar-v2-item__title', children: props.children }), badge, menu &&
                 (0, patchChildren_1.patchChildren)((0, jsx_runtime_1.jsx)("span", { className: 'rcx-box rcx-box--full rcx-sidebar-v2-item__menu-wrapper', children: menu }), function (childProps) { return ({
                     className: (0, appendClassName_1.appendClassName)(childProps.className, 'rcx-box rcx-box--full rcx-sidebar-v2-item__menu rcx-box--animated'),
                 }); })] })));