@rocket.chat/fuselage 0.33.0 → 0.35.0

package/dist/fuselage.development.js

@@ -401,169 +401,154 @@ var __setThrowErrorOnInvalidToken__ = function (value) {
 };
 exports.__setThrowErrorOnInvalidToken__ = __setThrowErrorOnInvalidToken__;
 exports.neutral = {
-    n100: new Var('neutral-100', colors_json_1.default.n100),
-    n200: new Var('neutral-200', colors_json_1.default.n200),
-    n250: new Var('neutral-250', colors_json_1.default.n250),
-    n300: new Var('neutral-300', colors_json_1.default.n300),
-    n400: new Var('neutral-400', colors_json_1.default.n400),
-    n450: new Var('neutral-450', colors_json_1.default.n450),
-    n500: new Var('neutral-500', colors_json_1.default.n500),
-    n600: new Var('neutral-600', colors_json_1.default.n600),
-    n700: new Var('neutral-700', colors_json_1.default.n700),
-    n800: new Var('neutral-800', colors_json_1.default.n800),
-    n850: new Var('neutral-850', colors_json_1.default.n850),
-    n900: new Var('neutral-900', colors_json_1.default.n900),
-};
-var primary = {
-    p100: new Var('primary-100', colors_json_1.default.p100),
-    p200: new Var('primary-200', colors_json_1.default.p200),
-    p300: new Var('primary-300', colors_json_1.default.p300),
-    p400: new Var('primary-400', colors_json_1.default.p400),
-    p500: new Var('primary-500', colors_json_1.default.p500),
-    p550: new Var('primary-550', colors_json_1.default.p550),
-    p600: new Var('primary-600', colors_json_1.default.p600),
-    p700: new Var('primary-700', colors_json_1.default.p700),
-    p800: new Var('primary-800', colors_json_1.default.p800),
-    p900: new Var('primary-900', colors_json_1.default.p900),
-};
-var info = {
-    i100: new Var('info-100', colors_json_1.default.i100),
-    i200: new Var('info-200', colors_json_1.default.i200),
-    i300: new Var('info-300', colors_json_1.default.i300),
-    i400: new Var('info-400', colors_json_1.default.i400),
-    i500: new Var('info-500', colors_json_1.default.i500),
-    i600: new Var('info-600', colors_json_1.default.i600),
-    i700: new Var('info-700', colors_json_1.default.i700),
-    i800: new Var('info-800', colors_json_1.default.i800),
-    i900: new Var('info-900', colors_json_1.default.i900),
-};
-var success = {
-    s100: new Var('success-100', colors_json_1.default.s100),
-    s200: new Var('success-200', colors_json_1.default.s200),
-    s300: new Var('success-300', colors_json_1.default.s300),
-    s400: new Var('success-400', colors_json_1.default.s400),
-    s500: new Var('success-500', colors_json_1.default.s500),
-    s600: new Var('success-600', colors_json_1.default.s600),
-    s700: new Var('success-700', colors_json_1.default.s700),
-    s800: new Var('success-800', colors_json_1.default.s800),
-    s900: new Var('success-900', colors_json_1.default.s900),
-};
-var warning = {
-    w100: new Var('warning-100', colors_json_1.default.w100),
-    w150: new Var('warning-150', colors_json_1.default.w150),
-    w200: new Var('warning-200', colors_json_1.default.w200),
-    w300: new Var('warning-300', colors_json_1.default.w300),
-    w400: new Var('warning-400', colors_json_1.default.w400),
-    w500: new Var('warning-500', colors_json_1.default.w500),
-    w600: new Var('warning-600', colors_json_1.default.w600),
-    w700: new Var('warning-700', colors_json_1.default.w700),
-    w800: new Var('warning-800', colors_json_1.default.w800),
-    w900: new Var('warning-900', colors_json_1.default.w900),
-};
-var danger = {
-    d100: new Var('danger-100', colors_json_1.default.d100),
-    d200: new Var('danger-200', colors_json_1.default.d200),
-    d300: new Var('danger-300', colors_json_1.default.d300),
-    d400: new Var('danger-400', colors_json_1.default.d400),
-    d500: new Var('danger-500', colors_json_1.default.d500),
-    d550: new Var('danger-550', colors_json_1.default.d550),
-    d600: new Var('danger-600', colors_json_1.default.d600),
-    d700: new Var('danger-700', colors_json_1.default.d700),
-    d800: new Var('danger-800', colors_json_1.default.d800),
-    d900: new Var('danger-900', colors_json_1.default.d900),
-};
-var service1 = {
-    100: new Var('service-1-100', colors_json_1.default['s1-100']),
-    200: new Var('service-1-200', colors_json_1.default['s1-200']),
-    300: new Var('service-1-300', colors_json_1.default['s1-300']),
-    400: new Var('service-1-400', colors_json_1.default['s1-400']),
-    500: new Var('service-1-500', colors_json_1.default['s1-500']),
-    600: new Var('service-1-600', colors_json_1.default['s1-600']),
-    700: new Var('service-1-700', colors_json_1.default['s1-700']),
-    800: new Var('service-1-800', colors_json_1.default['s1-800']),
-    900: new Var('service-1-900', colors_json_1.default['s1-900']),
-};
-var service2 = {
-    100: new Var('service-2-100', colors_json_1.default['s2-100']),
-    200: new Var('service-2-200', colors_json_1.default['s2-200']),
-    300: new Var('service-2-300', colors_json_1.default['s2-300']),
-    400: new Var('service-2-400', colors_json_1.default['s2-400']),
-    500: new Var('service-2-500', colors_json_1.default['s2-500']),
-    600: new Var('service-2-600', colors_json_1.default['s2-600']),
-    700: new Var('service-2-700', colors_json_1.default['s2-700']),
-    800: new Var('service-2-800', colors_json_1.default['s2-800']),
-    900: new Var('service-2-900', colors_json_1.default['s2-900']),
+    100: new Var('neutral-100', colors_json_1.default.n100),
+    200: new Var('neutral-200', colors_json_1.default.n200),
+    250: new Var('neutral-250', colors_json_1.default.n250),
+    300: new Var('neutral-300', colors_json_1.default.n300),
+    400: new Var('neutral-400', colors_json_1.default.n400),
+    450: new Var('neutral-450', colors_json_1.default.n450),
+    500: new Var('neutral-500', colors_json_1.default.n500),
+    600: new Var('neutral-600', colors_json_1.default.n600),
+    700: new Var('neutral-700', colors_json_1.default.n700),
+    800: new Var('neutral-800', colors_json_1.default.n800),
+    900: new Var('neutral-900', colors_json_1.default.n900),
+};
+var blue = {
+    100: new Var('primary-100', colors_json_1.default.b100),
+    200: new Var('primary-200', colors_json_1.default.b200),
+    300: new Var('primary-300', colors_json_1.default.b300),
+    400: new Var('primary-400', colors_json_1.default.b400),
+    500: new Var('primary-500', colors_json_1.default.b500),
+    600: new Var('primary-600', colors_json_1.default.b600),
+    700: new Var('primary-700', colors_json_1.default.b700),
+    800: new Var('primary-800', colors_json_1.default.b800),
+    900: new Var('primary-900', colors_json_1.default.b900),
+};
+var green = {
+    100: new Var('success-100', colors_json_1.default.g100),
+    200: new Var('success-200', colors_json_1.default.g200),
+    300: new Var('success-300', colors_json_1.default.g300),
+    400: new Var('success-400', colors_json_1.default.g400),
+    500: new Var('success-500', colors_json_1.default.g500),
+    600: new Var('success-600', colors_json_1.default.g600),
+    700: new Var('success-700', colors_json_1.default.g700),
+    800: new Var('success-800', colors_json_1.default.g800),
+    900: new Var('success-900', colors_json_1.default.g900),
+};
+var yellow = {
+    100: new Var('warning-100', colors_json_1.default.y100),
+    200: new Var('warning-200', colors_json_1.default.y200),
+    300: new Var('warning-300', colors_json_1.default.y300),
+    400: new Var('warning-400', colors_json_1.default.y400),
+    500: new Var('warning-500', colors_json_1.default.y500),
+    600: new Var('warning-600', colors_json_1.default.y600),
+    700: new Var('warning-700', colors_json_1.default.y700),
+    800: new Var('warning-800', colors_json_1.default.y800),
+    900: new Var('warning-900', colors_json_1.default.y900),
+};
+var red = {
+    100: new Var('danger-100', colors_json_1.default.r100),
+    200: new Var('danger-200', colors_json_1.default.r200),
+    300: new Var('danger-300', colors_json_1.default.r300),
+    400: new Var('danger-400', colors_json_1.default.r400),
+    500: new Var('danger-500', colors_json_1.default.r500),
+    600: new Var('danger-600', colors_json_1.default.r600),
+    700: new Var('danger-700', colors_json_1.default.r700),
+    800: new Var('danger-800', colors_json_1.default.r800),
+    900: new Var('danger-900', colors_json_1.default.r900),
+};
+var orange = {
+    100: new Var('service-1-100', colors_json_1.default.o100),
+    200: new Var('service-1-200', colors_json_1.default.o200),
+    300: new Var('service-1-300', colors_json_1.default.o300),
+    400: new Var('service-1-400', colors_json_1.default.o400),
+    500: new Var('service-1-500', colors_json_1.default.o500),
+    600: new Var('service-1-600', colors_json_1.default.o600),
+    700: new Var('service-1-700', colors_json_1.default.o700),
+    800: new Var('service-1-800', colors_json_1.default.o800),
+    900: new Var('service-1-900', colors_json_1.default.o900),
+};
+var purple = {
+    100: new Var('service-2-100', colors_json_1.default.p100),
+    200: new Var('service-2-200', colors_json_1.default.p200),
+    300: new Var('service-2-300', colors_json_1.default.p300),
+    400: new Var('service-2-400', colors_json_1.default.p400),
+    500: new Var('service-2-500', colors_json_1.default.p500),
+    600: new Var('service-2-600', colors_json_1.default.p600),
+    700: new Var('service-2-700', colors_json_1.default.p700),
+    800: new Var('service-2-800', colors_json_1.default.p800),
+    900: new Var('service-2-900', colors_json_1.default.p900),
 };
 exports.surfaceColors = {
     'surface-light': white.theme('surface-light'),
-    'surface-tint': exports.neutral.n100.theme('surface-tint'),
+    'surface-tint': exports.neutral[100].theme('surface-tint'),
     'surface-room': white.theme('surface-room'),
-    'surface-neutral': exports.neutral.n400.theme('surface-neutral'),
-    'surface-disabled': exports.neutral.n100.theme('surface-disabled'),
-    'surface-hover': exports.neutral.n200.theme('surface-hover'),
-    'surface-selected': exports.neutral.n450.theme('surface-selected'),
-    'surface-dark': exports.neutral.n800.theme('surface-dark'),
-    'surface-featured': service2['700'].theme('surface-featured'),
-    'surface-featured-hover': service2['800'].theme('surface-featured-hover'),
-    'surface-overlay': exports.neutral.n850.theme('surface-overlay'),
+    'surface-neutral': exports.neutral[400].theme('surface-neutral'),
+    'surface-disabled': exports.neutral[100].theme('surface-disabled'),
+    'surface-hover': exports.neutral[200].theme('surface-hover'),
+    'surface-selected': exports.neutral[450].theme('surface-selected'),
+    'surface-dark': exports.neutral[800].theme('surface-dark'),
+    'surface-featured': purple['700'].theme('surface-featured'),
+    'surface-featured-hover': purple['800'].theme('surface-featured-hover'),
+    'surface-overlay': exports.neutral[800].theme('surface-overlay'),
     'surface-transparent': 'transparent',
 };
 exports.strokeColors = {
-    'stroke-extra-light': exports.neutral.n250.theme('stroke-extra-light'),
-    'stroke-light': exports.neutral.n500.theme('stroke-light'),
-    'stroke-medium': exports.neutral.n600.theme('stroke-medium'),
-    'stroke-dark': exports.neutral.n700.theme('stroke-dark'),
-    'stroke-extra-dark': exports.neutral.n800.theme('stroke-extra-dark'),
-    'stroke-extra-light-highlight': primary.p200.theme('stroke-extra-light-highlight'),
-    'stroke-highlight': primary.p500.theme('stroke-highlight'),
-    'stroke-extra-light-error': danger.d200.theme('stroke-extra-light-error'),
-    'stroke-error': danger.d500.theme('stroke-error'),
+    'stroke-extra-light': exports.neutral[250].theme('stroke-extra-light'),
+    'stroke-light': exports.neutral[500].theme('stroke-light'),
+    'stroke-medium': exports.neutral[600].theme('stroke-medium'),
+    'stroke-dark': exports.neutral[700].theme('stroke-dark'),
+    'stroke-extra-dark': exports.neutral[800].theme('stroke-extra-dark'),
+    'stroke-extra-light-highlight': blue[200].theme('stroke-extra-light-highlight'),
+    'stroke-highlight': blue[500].theme('stroke-highlight'),
+    'stroke-extra-light-error': red[200].theme('stroke-extra-light-error'),
+    'stroke-error': red[500].theme('stroke-error'),
 };
 exports.textIconColors = {
     'font-white': white.theme('font-white'),
-    'font-disabled': exports.neutral.n500.theme('font-disabled'),
-    'font-annotation': exports.neutral.n600.theme('font-annotation'),
-    'font-hint': exports.neutral.n700.theme('font-hint'),
-    'font-secondary-info': exports.neutral.n700.theme('font-secondary-info'),
-    'font-default': exports.neutral.n800.theme('font-default'),
-    'font-titles-labels': exports.neutral.n900.theme('font-titles-labels'),
-    'font-info': primary.p600.theme('font-info'),
-    'font-danger': danger.d600.theme('font-danger'),
-    'font-pure-black': exports.neutral.n800.theme('font-pure-black'),
+    'font-disabled': exports.neutral[500].theme('font-disabled'),
+    'font-annotation': exports.neutral[600].theme('font-annotation'),
+    'font-hint': exports.neutral[700].theme('font-hint'),
+    'font-secondary-info': exports.neutral[700].theme('font-secondary-info'),
+    'font-default': exports.neutral[800].theme('font-default'),
+    'font-titles-labels': exports.neutral[900].theme('font-titles-labels'),
+    'font-info': blue[600].theme('font-info'),
+    'font-danger': red[600].theme('font-danger'),
+    'font-pure-black': exports.neutral[800].theme('font-pure-black'),
     'font-pure-white': white.theme('font-pure-white'),
 };
 exports.statusBackgroundColors = {
-    'status-background-info': info.i200.theme('status-background-info'),
-    'status-background-success': success.s200.theme('status-background-success'),
-    'status-background-danger': danger.d200.theme('status-background-danger'),
-    'status-background-warning': warning.w200.theme('status-background-warning'),
-    'status-background-warning-2': warning.w150.theme('status-background-warning-2'),
-    'status-background-service-1': service1['200'].theme('status-background-service-1'),
-    'status-background-service-2': service2['200'].theme('status-background-service-2'),
+    'status-background-info': blue[200].theme('status-background-info'),
+    'status-background-success': green[200].theme('status-background-success'),
+    'status-background-danger': red[200].theme('status-background-danger'),
+    'status-background-warning': yellow[200].theme('status-background-warning'),
+    'status-background-warning-2': yellow[100].theme('status-background-warning-2'),
+    'status-background-service-1': orange[200].theme('status-background-service-1'),
+    'status-background-service-2': purple[200].theme('status-background-service-2'),
 };
 exports.statusColors = {
-    'status-font-on-info': info.i600.theme('status-font-on-info'),
-    'status-font-on-success': success.s800.theme('status-font-on-success'),
-    'status-font-on-warning': warning.w800.theme('status-font-on-warning'),
-    'status-font-on-warning-2': exports.neutral.n800.theme('status-font-on-warning-2'),
-    'status-font-on-danger': danger.d800.theme('status-font-on-danger'),
-    'status-font-on-service-1': service1[800].theme('status-font-on-service-1'),
-    'status-font-on-service-2': service2[600].theme('status-font-on-service-2'),
+    'status-font-on-info': blue[600].theme('status-font-on-info'),
+    'status-font-on-success': green[800].theme('status-font-on-success'),
+    'status-font-on-warning': yellow[800].theme('status-font-on-warning'),
+    'status-font-on-warning-2': exports.neutral[800].theme('status-font-on-warning-2'),
+    'status-font-on-danger': red[800].theme('status-font-on-danger'),
+    'status-font-on-service-1': orange[800].theme('status-font-on-service-1'),
+    'status-font-on-service-2': purple[600].theme('status-font-on-service-2'),
 };
 exports.badgeBackgroundColors = {
-    'badge-background-level-0': exports.neutral.n400.theme('badge-background-level-0'),
-    'badge-background-level-1': exports.neutral.n600.theme('badge-background-level-1'),
-    'badge-background-level-2': primary.p550.theme('badge-background-level-2'),
-    'badge-background-level-3': service1[500].theme('badge-background-level-3'),
-    'badge-background-level-4': danger.d550.theme('badge-background-level-4'),
+    'badge-background-level-0': exports.neutral[400].theme('badge-background-level-0'),
+    'badge-background-level-1': exports.neutral[600].theme('badge-background-level-1'),
+    'badge-background-level-2': blue[500].theme('badge-background-level-2'),
+    'badge-background-level-3': orange[500].theme('badge-background-level-3'),
+    'badge-background-level-4': red[500].theme('badge-background-level-4'),
 };
 exports.shadowColors = {
     'shadow-elevation-border': exports.strokeColors['stroke-extra-light'].theme('shadow-elevation-border'),
     'shadow-elevation-1': new Var('shadow-elevation-1', (0, getPaletteColor_1.getPaletteColor)('neutral', 800, 0.1)[1]),
     'shadow-elevation-2x': new Var('shadow-elevation-2x', (0, getPaletteColor_1.getPaletteColor)('neutral', 800, 0.08)[1]),
     'shadow-elevation-2y': new Var('shadow-elevation-2y', (0, getPaletteColor_1.getPaletteColor)('neutral', 800, 0.12)[1]),
-    'shadow-highlight': primary.p200.theme('shadow-highlight'),
-    'shadow-danger': danger.d100.theme('shadow-danger'),
+    'shadow-highlight': blue[200].theme('shadow-highlight'),
+    'shadow-danger': red[100].theme('shadow-danger'),
 };
 var isSurfaceColor = function (color) {
     return typeof color === 'string' && color in exports.surfaceColors;
@@ -2669,17 +2654,21 @@ var react_1 = __importDefault(__webpack_require__(/*! react */ "react"));
 var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
 var Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
 var Callout = function (_a) {
-    var type = _a.type, title = _a.title, children = _a.children, icon = _a.icon, props = __rest(_a, ["type", "title", "children", "icon"]);
+    var type = _a.type, title = _a.title, children = _a.children, icon = _a.icon, className = _a.className, props = __rest(_a, ["type", "title", "children", "icon", "className"]);
     var defaultIcon = (type === 'info' && 'info-circled') ||
         (type === 'success' && 'checkmark-circled') ||
         (type === 'warning' && 'warning') ||
         (type === 'danger' && 'ban') ||
         'info-circled';
-    return (react_1.default.createElement(Box_1.default, __assign({ is: 'section', "rcx-callout": true, "rcx-callout--type": type }, props),
-        react_1.default.createElement(Icon_1.Icon, { name: icon || defaultIcon, size: 'x20' }),
+    return (react_1.default.createElement(Box_1.default, __assign({ is: 'section', className: [
+            "rcx-callout ".concat(type && "rcx-callout--".concat(type), " ").concat(className || ''),
+        ]
+            .filter(Boolean)
+            .join(' ') }, props),
+        react_1.default.createElement(Icon_1.Icon, { className: 'rcx-callout__icon', name: icon || defaultIcon, size: 'x20' }),
         react_1.default.createElement(Box_1.default, { "rcx-callout__wrapper": true },
-            title && (react_1.default.createElement(Box_1.default, { is: 'h1', "rcx-callout__title": true }, title)),
-            children && react_1.default.createElement(Box_1.default, { "rcx-callout__children": true }, children))));
+            title && react_1.default.createElement(Box_1.default, { "rcx-callout__title": true }, title),
+            children && react_1.default.createElement(Box_1.default, { "rcx-callout__content": true }, children))));
 };
 exports.Callout = Callout;
 
@@ -3189,7 +3178,7 @@ var react_1 = __importStar(__webpack_require__(/*! react */ "react"));
 var __1 = __webpack_require__(/*! .. */ "./src/components/index.ts");
 var ContextualbarAction = function (_a) {
     var name = _a.name, props = __rest(_a, ["name"]);
-    return (react_1.default.createElement(__1.IconButton, __assign({ flexShrink: 0, icon: name }, props, { tiny: true })));
+    return (react_1.default.createElement(__1.IconButton, __assign({}, props, { small: true, flexShrink: 0, icon: name })));
 };
 exports["default"] = (0, react_1.memo)(ContextualbarAction);
 
@@ -11170,21 +11159,22 @@ var Chip_1 = __importDefault(__webpack_require__(/*! ../Chip */ "./src/component
 var Flex_1 = __importDefault(__webpack_require__(/*! ../Flex */ "./src/components/Flex/index.ts"));
 var Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
 var Margins_1 = __importDefault(__webpack_require__(/*! ../Margins */ "./src/components/Margins/index.ts"));
+var Option_1 = __importDefault(__webpack_require__(/*! ../Option */ "./src/components/Option/index.tsx"));
 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 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, 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 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, _f = _a.renderItem, renderItem = _f === void 0 ? Option_1.default : _f, endReached = _a.endReached, props = __rest(_a, ["withTitle", "value", "filter", "options", "error", "disabled", "anchor", "onChange", "placeholder", "renderOptions", "renderItem", "endReached"]);
+    var _g = __read((0, react_1.useState)(value || []), 2), internalValue = _g[0], setInternalValue = _g[1];
     var currentValue = value !== undefined ? value : internalValue;
     var selectedOptions = options.filter(function (option) {
         return currentValue.some(function (opt) { return opt.value === option.value; });
     });
-    var _g = __read((0, useVisible_1.useVisible)(), 3), visible = _g[0], hide = _g[1], show = _g[2];
+    var _h = __read((0, useVisible_1.useVisible)(), 3), visible = _h[0], hide = _h[1], show = _h[2];
     var ref = (0, react_1.useRef)(null);
-    var _h = (0, fuselage_hooks_1.useResizeObserver)(), containerRef = _h.ref, borderBoxSize = _h.borderBoxSize;
+    var _j = (0, fuselage_hooks_1.useResizeObserver)(), containerRef = _j.ref, borderBoxSize = _j.borderBoxSize;
     var handleClick = (0, fuselage_hooks_1.useMutableCallback)(function () {
         if (visible === AnimatedVisibility_1.default.VISIBLE) {
             return hide();
@@ -11237,7 +11227,7 @@ 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(OptionsComponent, { width: borderBoxSize.inlineSize, onMouseDown: prevent_1.prevent, multiple: true, filter: filter, role: 'listbox', options: options, cursor: -1, endReached: endReached, onSelect: function (_a) {
+                react_1.default.createElement(OptionsComponent, { width: borderBoxSize.inlineSize, onMouseDown: prevent_1.prevent, multiple: true, filter: filter, role: 'listbox', options: options, cursor: -1, endReached: endReached, renderItem: renderItem, onSelect: function (_a) {
                         var _b = __read(_a, 1), value = _b[0];
                         toggleOption(value);
                     } })))));
@@ -13556,7 +13546,7 @@ exports.SidebarBanner = void 0;
 var react_1 = __importDefault(__webpack_require__(/*! react */ "react"));
 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, onClose = _a.onClose, children = _a.children;
+    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 (react_1.default.createElement("div", { className: "rcx-box rcx-box--full rcx-sidebar-banner rcx-sidebar-banner--".concat(variant) },
         react_1.default.createElement("div", null,
             text && react_1.default.createElement("div", { className: 'rcx-sidebar-banner--text' }, text),
@@ -13567,7 +13557,9 @@ var SidebarBanner = function (_a) {
                     .filter(Boolean)
                     .join(' '), onClick: onClick }, description)),
             children),
-        onClose && react_1.default.createElement(Button_1.IconButton, { onClick: onClose, tiny: true, icon: 'cross' })));
+        react_1.default.createElement("div", { className: 'rcx-sidebar-banner__actions' },
+            addon,
+            onClose && react_1.default.createElement(Button_1.IconButton, { onClick: onClose, tiny: true, icon: 'cross' }))));
 };
 exports.SidebarBanner = SidebarBanner;
 
@@ -15649,19 +15641,21 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.Tag = void 0;
 var react_1 = __importDefault(__webpack_require__(/*! react */ "react"));
 var prependClassName_1 = __webpack_require__(/*! ../../helpers/prependClassName */ "./src/helpers/prependClassName.ts");
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box/Box */ "./src/components/Box/Box.tsx"));
 var Tag = function (_a) {
-    var large = _a.large, medium = _a.medium, className = _a.className, disabled = _a.disabled, onClick = _a.onClick, variant = _a.variant, children = _a.children, icon = _a.icon, props = __rest(_a, ["large", "medium", "className", "disabled", "onClick", "variant", "children", "icon"]);
+    var large = _a.large, medium = _a.medium, className = _a.className, disabled = _a.disabled, onClick = _a.onClick, variant = _a.variant, children = _a.children, icon = _a.icon, href = _a.href, props = __rest(_a, ["large", "medium", "className", "disabled", "onClick", "variant", "children", "icon", "href"]);
     var modifiers = [
         variant,
         medium && 'medium',
         large && 'large',
         disabled && 'disabled',
         onClick && 'clickable',
+        href && 'clickable',
     ]
         .filter(Boolean)
         .map(function (modifier) { return "rcx-tag--".concat(modifier); })
         .join(' ');
-    return (react_1.default.createElement("span", __assign({ className: (0, prependClassName_1.prependClassName)(className, "rcx-tag ".concat(modifiers)), onClick: onClick }, props),
+    return (react_1.default.createElement(Box_1.default, __assign({ is: href ? 'a' : 'span', className: (0, prependClassName_1.prependClassName)(className, "rcx-tag ".concat(modifiers)), onClick: onClick, href: href }, props),
         icon,
         react_1.default.createElement("span", { className: 'rcx-tag__inner' }, children)));
 };
@@ -16658,11 +16652,12 @@ var isPaletteColorRef = function (ref) {
 };
 var mapTypeToPrefix = {
     neutral: 'n',
-    primary: 'b',
-    info: 'b',
-    success: 'g',
-    warning: 'y',
-    danger: 'r',
+    blue: 'b',
+    green: 'g',
+    yellow: 'y',
+    red: 'r',
+    orange: 'o',
+    purple: 'p',
 };
 var getPaletteColor = function (type, grade, alpha) {
     var ref = "".concat(mapTypeToPrefix[type]).concat(grade);
@@ -17243,7 +17238,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.fontScale = exports.fontFamily = exports.padding = exports.margin = exports.inset = exports.size = exports.color = exports.fontColor = exports.backgroundColor = exports.strokeColor = exports.borderRadius = exports.borderWidth = void 0;
-var colors_json_1 = __importDefault(__webpack_require__(/*! @rocket.chat/fuselage-tokens/colors.json */ "../fuselage-tokens/colors.json"));
 var typography_json_1 = __importDefault(__webpack_require__(/*! @rocket.chat/fuselage-tokens/typography.json */ "../fuselage-tokens/typography.json"));
 var memo_1 = __webpack_require__(/*! @rocket.chat/memo */ "@rocket.chat/memo");
 var invariant_1 = __importDefault(__webpack_require__(/*! invariant */ "../../node_modules/invariant/browser.js"));
@@ -17291,11 +17285,12 @@ exports.borderRadius = measure(function (value) {
 });
 var mapTypeToPrefix = {
     neutral: 'n',
-    primary: 'b',
-    info: 'b',
-    success: 'g',
-    warning: 'y',
-    danger: 'r',
+    blue: 'b',
+    green: 'g',
+    yellow: 'y',
+    red: 'r',
+    orange: 'o',
+    purple: 'p',
 };
 var isPaletteColorType = function (type) {
     return typeof type === 'string' && type in mapTypeToPrefix;
@@ -17310,29 +17305,7 @@ var isPaletteColorAlpha = function (alpha) {
     return alpha === undefined ||
         (typeof alpha === 'number' && alpha >= 0 && alpha <= 1);
 };
-var foregroundColors = {
-    'default': colors_json_1.default.n800,
-    'info': colors_json_1.default.n700,
-    'hint': colors_json_1.default.n600,
-    'disabled': colors_json_1.default.n400,
-    'alternative': 'white',
-    'primary': colors_json_1.default.p500,
-    'success': colors_json_1.default.s500,
-    'danger': colors_json_1.default.d500,
-    'warning': colors_json_1.default.w700,
-    'link': colors_json_1.default.p500,
-    'visited-link': colors_json_1.default['s2-500'],
-    'active-link': colors_json_1.default.d500,
-};
-var isForegroundColorRef = function (ref) {
-    return typeof ref === 'string' && ref in foregroundColors;
-};
-var getForegroundColor = function (type) {
-    (0, invariant_1.default)(isForegroundColorRef(type), 'invalid foreground color');
-    var color = foregroundColors[type];
-    return ["--rcx-color-foreground-".concat(type), color];
-};
-var paletteColorRegex = /^(neutral|primary|info|success|warning|danger)-(\d+)(-(\d+))?$/;
+var paletteColorRegex = /^(neutral|blue|green|yellow|red|orange|purple)-(\d+)(-(\d+))?$/;
 exports.strokeColor = (0, memo_1.memoize)(function (value) {
     var colorName = "stroke-".concat(value);
     if ((0, Theme_1.isStrokeColor)(colorName)) {
@@ -17399,35 +17372,28 @@ exports.color = (0, memo_1.memoize)(function (value) {
         return Theme_1.surfaceColors['surface-light'].toString();
     }
     if (value === 'surface-tint') {
-        return (0, toCSSValue_1.toCSSColorValue)(value, Theme_1.neutral.n100);
+        return (0, toCSSValue_1.toCSSColorValue)(value, Theme_1.neutral[100]);
     }
     if (value === 'secondary-info') {
-        return (0, toCSSValue_1.toCSSColorValue)(value, Theme_1.neutral.n700);
+        return (0, toCSSValue_1.toCSSColorValue)(value, Theme_1.neutral[700]);
     }
     if (value === 'surface-neutral') {
-        return (0, toCSSValue_1.toCSSColorValue)(value, Theme_1.neutral.n400);
-    }
-    if (isForegroundColorRef(value)) {
-        var _a = __read(getForegroundColor(value), 2), customProperty = _a[0], color_1 = _a[1];
-        if (customProperty) {
-            return (0, toCSSValue_1.toCSSValue)(customProperty, color_1);
-        }
-        return color_1;
+        return (0, toCSSValue_1.toCSSColorValue)(value, Theme_1.neutral[400]);
     }
     var paletteMatches = paletteColorRegex.exec(String(value));
     if (typeof (paletteMatches === null || paletteMatches === void 0 ? void 0 : paletteMatches.length) === 'number' &&
         (paletteMatches === null || paletteMatches === void 0 ? void 0 : paletteMatches.length) >= 5) {
-        var _b = __read(paletteMatches, 5), type = _b[1], gradeString = _b[2], alphaString = _b[4];
+        var _a = __read(paletteMatches, 5), type = _a[1], gradeString = _a[2], alphaString = _a[4];
         var grade = parseInt(gradeString, 10);
         var alpha = alphaString !== undefined ? parseInt(alphaString, 10) / 100 : undefined;
         (0, invariant_1.default)(isPaletteColorType(type), 'invalid color type');
         (0, invariant_1.default)(isPaletteColorGrade(grade), 'invalid color grade');
         (0, invariant_1.default)(isPaletteColorAlpha(alpha), 'invalid color alpha');
-        var _c = __read((0, getPaletteColor_1.getPaletteColor)(type, grade, alpha), 2), customProperty = _c[0], color_2 = _c[1];
+        var _b = __read((0, getPaletteColor_1.getPaletteColor)(type, grade, alpha), 2), customProperty = _b[0], color_1 = _b[1];
         if (customProperty) {
-            return (0, toCSSValue_1.toCSSValue)(customProperty, color_2);
+            return (0, toCSSValue_1.toCSSValue)(customProperty, color_1);
         }
-        return color_2;
+        return color_1;
     }
     return value;
 });
@@ -17601,7 +17567,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_react__;
   \**************************************/
 /***/ (function(module) {
 
-module.exports = JSON.parse('{"d100":"#FFE9EC","d200":"#FFC1C9","d300":"#F98F9D","d400":"#F5495F","d500":"#EC0D2A","d550":"#F5455C","d600":"#D40C26","d650":"#DA1F37","d700":"#BB0B21","d800":"#9B1325","d900":"#8B0719","i100":"#E8F2FF","i200":"#D1EBFE","i300":"#76B7FC","i400":"#549DF9","i500":"#156FF5","i600":"#095AD2","i700":"#10529E","i800":"#01336B","i900":"#012247","n100":"#f7f8fa","n200":"#f2f3f5","n250":"#EBECEF","n300":"#eeeff1","n400":"#e4e7ea","n450":"#d7dbe0","n500":"#cbced1","n600":"#9ea2a8","n700":"#6c727a","n800":"#2f343d","n850":"#2f343d80","n900":"#1f2329","p100":"#E8F2FF","p200":"#D1EBFE","p300":"#76B7FC","p400":"#549DF9","p500":"#156FF5","p550":"#1D74F5","p600":"#095AD2","p700":"#10529E","p800":"#01336B","p900":"#012247","s100":"#E5FBF4","s200":"#C0F6E4","s300":"#96F0D2","s400":"#6CE9C0","s500":"#2DE0A5","s600":"#1ECB92","s650":"#158D65","s700":"#19AC7C","s800":"#148660","s900":"#106D4F","s1000":"#0D5940","s1-100":"#FDE8D7","s1-200":"#FAD1B0","s1-300":"#F7B27B","s1-400":"#F59B53","s1-500":"#F38C39","s1-600":"#E26D0E","s1-700":"#BD5A0B","s1-800":"#974809","s1-900":"#713607","s2-100":"#F9EFFC","s2-200":"#EDD0F7","s2-300":"#DCA0EF","s2-400":"#CA71E7","s2-500":"#9F22C7","s2-600":"#7F1B9F","s2-700":"#5F1477","s2-800":"#4A105D","s2-900":"#350B42","w100":"#FFF6D6","w150":"#FFF8E0","w200":"#FFECAD","w300":"#FFE383","w400":"#FFD95A","w500":"#FFD031","w600":"#F3BE08","w650":"#AC892F","w700":"#DFAC00","w800":"#B68D00","w900":"#8E6300","white":"#ffffff","b100":"#e8f2ff","b200":"#d1ebfe","b300":"#76b7fc","b400":"#549df9","b500":"#1d74f5","b600":"#095ad2","b700":"#10529e","b800":"#01336b","b900":"#012247","g100":"#e5fbf4","g200":"#c0f6e4","g300":"#96f0d2","g400":"#6ce9c0","g500":"#2de0a5","g600":"#1ecb92","g700":"#19ac7c","g800":"#158d65","g900":"#106d4f","r100":"#fddade","r200":"#fbb5be","r300":"#f98f9d","r400":"#f76a7d","r500":"#f5455c","r600":"#db0c27","r700":"#b30a20","r800":"#8b0719","r900":"#630512","y100":"#fff6d6","y200":"#ffecad","y300":"#ffe383","y400":"#ffd95a","y500":"#ffd031","y600":"#f3be08","y700":"#dfac00","y800":"#b68d00","y900":"#8e6d00","o100":"#fde8d7","o200":"#fad1b0","o300":"#f7b27b","o400":"#f59b53","o500":"#f38c39","o600":"#e26d0e","o700":"#bd5a0b","o800":"#974809","o900":"#713607"}');
+module.exports = JSON.parse('{"white":"#FFFFFF","n100":"#F7F8FA","n200":"#F2F3F5","n250":"#EBECEF","n300":"#EEEFF1","n400":"#E4E7EA","n450":"#D7DBE0","n500":"#CBCED1","n600":"#9EA2A8","n700":"#6C737A","n800":"#2F343D","n900":"#1F2329","r100":"#FFE9EC","r200":"#FFC1C9","r300":"#F98F9D","r400":"#F5455C","r500":"#EC0D2A","r600":"#D40C26","r700":"#BB0B21","r800":"#9B1325","r900":"#8B0719","r1000":"#6B0513","o100":"#FDE8D7","o200":"#FAD1B0","o300":"#F7B27B","o400":"#F59B53","o500":"#F38C39","o600":"#E26D0E","o700":"#BD5A0B","o800":"#974809","o900":"#713607","o1000":"#5B2C06","p100":"#F9EFFC","p200":"#EDD0F7","p300":"#DCA0EF","p400":"#CA71E7","p500":"#9F22C7","p600":"#7F1B9F","p700":"#5F1477","p800":"#4A105D","p900":"#350B42","y100":"#FFF8E0","y200":"#FFECAD","y300":"#FFE383","y400":"#FFD95A","y500":"#FFD031","y600":"#F3BE08","y700":"#DFAC00","y800":"#AC892F","y900":"#8E6300","y1000":"#573D00","g100":"#E5FBF4","g200":"#C0F6E4","g300":"#96F0D2","g400":"#6CE9C0","g500":"#2DE0A5","g600":"#1ECB92","g700":"#19AC7C","g800":"#148660","g900":"#106D4F","g1000":"#0D5940","b100":"#E8F2FF","b200":"#D1EBFE","b300":"#76B7FC","b400":"#549DF9","b500":"#156FF5","b600":"#095AD2","b700":"#10529E","b800":"#01336B","b900":"#012247"}');
 
 /***/ }),