@rocket.chat/fuselage 0.54.3 → 0.55.0

package/dist/fuselage.development.js

@@ -4186,7 +4186,7 @@ var react_1 = __importStar(__webpack_require__(/*! react */ "react"));
 var __1 = __webpack_require__(/*! .. */ "./src/components/index.ts");
 var ContextualbarFooter = (0, react_1.forwardRef)(function ContextualbarFooter(_a, ref) {
     var children = _a.children, props = __rest(_a, ["children"]);
-    return (react_1.default.createElement(__1.Box, __assign({ ref: ref, p: 24 }, props), children));
+    return (react_1.default.createElement(__1.Box, __assign({ ref: ref, pi: 16, pb: 20 }, props), children));
 });
 exports["default"] = (0, react_1.memo)(ContextualbarFooter);
 
@@ -4200,6 +4200,10 @@ exports["default"] = (0, react_1.memo)(ContextualbarFooter);
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -4249,16 +4253,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
+var css_in_js_1 = __webpack_require__(/*! @rocket.chat/css-in-js */ "@rocket.chat/css-in-js");
 var react_1 = __importStar(__webpack_require__(/*! react */ "react"));
 var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
-var Margins_1 = __importDefault(__webpack_require__(/*! ../Margins */ "./src/components/Margins/index.ts"));
 var ContextualbarHeader = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
-    return (react_1.default.createElement(Box_1.default, __assign({ display: 'flex', alignItems: 'center', height: 'x56', pi: 24, borderBlockEndWidth: 'default', borderBlockColor: 'extra-light', flexShrink: 0 }, props),
-        react_1.default.createElement(Box_1.default, { marginInline: 'neg-x4', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexGrow: 1, height: '100%', overflow: 'hidden' },
-            react_1.default.createElement(Margins_1.default, { inline: 'x4' }, children))));
+    return (react_1.default.createElement(Box_1.default, __assign({ display: 'flex', alignItems: 'center', height: 'x44', pi: 16, borderBlockEndWidth: 'default', borderBlockColor: 'extra-light', flexShrink: 0 }, props),
+        react_1.default.createElement(Box_1.default, { display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexGrow: 1, height: '100%', overflow: 'hidden', className: (0, css_in_js_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        gap: 8px;\n      "], ["\n        gap: 8px;\n      "]))) }, children)));
 };
 exports["default"] = (0, react_1.memo)(ContextualbarHeader);
+var templateObject_1;
 
 
 /***/ }),
@@ -4307,10 +4311,62 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 var react_1 = __importStar(__webpack_require__(/*! react */ "react"));
 var __1 = __webpack_require__(/*! .. */ "./src/components/index.ts");
-var ContextualbarIcon = function (props) { return react_1.default.createElement(__1.Icon, __assign({}, props, { pi: 2, size: 'x24' })); };
+var ContextualbarIcon = function (props) { return react_1.default.createElement(__1.Icon, __assign({}, props, { pi: 2, size: 'x20' })); };
 exports["default"] = (0, react_1.memo)(ContextualbarIcon);
 
 
+/***/ }),
+
+/***/ "./src/components/Contextualbar/ContextualbarSection.tsx":
+/*!***************************************************************!*\
+  !*** ./src/components/Contextualbar/ContextualbarSection.tsx ***!
+  \***************************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+var react_1 = __importStar(__webpack_require__(/*! react */ "react"));
+var __1 = __webpack_require__(/*! .. */ "./src/components/index.ts");
+var ContextualbarSection = (0, react_1.forwardRef)(function ContextualbarSection(props, ref) {
+    return (react_1.default.createElement(__1.Box, __assign({ ref: ref, "rcx-vertical-bar__section": true, p: 16, display: 'flex', alignItems: 'center', flexGrow: 1, borderBlockEndWidth: 'default', borderBlockColor: 'extra-light' }, props)));
+});
+exports["default"] = (0, react_1.memo)(ContextualbarSection);
+
+
 /***/ }),
 
 /***/ "./src/components/Contextualbar/ContextualbarSkeleton.tsx":
@@ -4415,7 +4471,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 var react_1 = __importStar(__webpack_require__(/*! react */ "react"));
 var __1 = __webpack_require__(/*! .. */ "./src/components/index.ts");
-var ContextualbarTitle = function (props) { return (react_1.default.createElement(__1.Box, __assign({ flexShrink: 1, flexGrow: 1, fontScale: 'h4', withTruncatedText: true }, props))); };
+var ContextualbarTitle = function (props) { return (react_1.default.createElement(__1.Box, __assign({ flexShrink: 1, flexGrow: 1, fontScale: 'h5', withTruncatedText: true }, props))); };
 exports["default"] = (0, react_1.memo)(ContextualbarTitle);
 
 
@@ -4432,7 +4488,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.ContextualbarTitle = exports.ContextualbarSkeleton = exports.ContextualbarIcon = exports.ContextualbarHeader = exports.ContextualbarFooter = exports.ContextualbarEmptyContent = exports.ContextualbarContent = exports.ContextualbarButton = exports.ContextualbarActions = exports.ContextualbarAction = exports.Contextualbar = void 0;
+exports.ContextualbarSection = exports.ContextualbarTitle = exports.ContextualbarSkeleton = exports.ContextualbarIcon = exports.ContextualbarHeader = exports.ContextualbarFooter = exports.ContextualbarEmptyContent = exports.ContextualbarContent = exports.ContextualbarButton = exports.ContextualbarActions = exports.ContextualbarAction = exports.Contextualbar = void 0;
 var Contextualbar_1 = __importDefault(__webpack_require__(/*! ./Contextualbar */ "./src/components/Contextualbar/Contextualbar.tsx"));
 exports.Contextualbar = Contextualbar_1.default;
 var ContextualbarAction_1 = __importDefault(__webpack_require__(/*! ./ContextualbarAction */ "./src/components/Contextualbar/ContextualbarAction.tsx"));
@@ -4451,6 +4507,8 @@ var ContextualbarHeader_1 = __importDefault(__webpack_require__(/*! ./Contextual
 exports.ContextualbarHeader = ContextualbarHeader_1.default;
 var ContextualbarIcon_1 = __importDefault(__webpack_require__(/*! ./ContextualbarIcon */ "./src/components/Contextualbar/ContextualbarIcon.tsx"));
 exports.ContextualbarIcon = ContextualbarIcon_1.default;
+var ContextualbarSection_1 = __importDefault(__webpack_require__(/*! ./ContextualbarSection */ "./src/components/Contextualbar/ContextualbarSection.tsx"));
+exports.ContextualbarSection = ContextualbarSection_1.default;
 var ContextualbarSkeleton_1 = __importDefault(__webpack_require__(/*! ./ContextualbarSkeleton */ "./src/components/Contextualbar/ContextualbarSkeleton.tsx"));
 exports.ContextualbarSkeleton = ContextualbarSkeleton_1.default;
 var ContextualbarTitle_1 = __importDefault(__webpack_require__(/*! ./ContextualbarTitle */ "./src/components/Contextualbar/ContextualbarTitle.tsx"));
@@ -11040,6 +11098,244 @@ var MultiSelectFiltered_1 = __webpack_require__(/*! ./MultiSelectFiltered */ "./
 Object.defineProperty(exports, "MultiSelectFiltered", ({ enumerable: true, get: function () { return MultiSelectFiltered_1.MultiSelectFiltered; } }));
 
 
+/***/ }),
+
+/***/ "./src/components/NavBar/NavBar.tsx":
+/*!******************************************!*\
+  !*** ./src/components/NavBar/NavBar.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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.NavBar = void 0;
+var react_1 = __importDefault(__webpack_require__(/*! react */ "react"));
+var NavBar = function (props) { return (react_1.default.createElement("nav", __assign({ className: 'rcx-navbar' }, props))); };
+exports.NavBar = NavBar;
+
+
+/***/ }),
+
+/***/ "./src/components/NavBar/NavBarDivider.tsx":
+/*!*************************************************!*\
+  !*** ./src/components/NavBar/NavBarDivider.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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.NavBarDivider = void 0;
+var react_1 = __importDefault(__webpack_require__(/*! react */ "react"));
+var Divider_1 = __webpack_require__(/*! ../Divider */ "./src/components/Divider/index.tsx");
+var NavBarDivider = function (props) { return (react_1.default.createElement(Divider_1.Divider, __assign({ "rcx-navbar-divider": true, vertical: true }, props))); };
+exports.NavBarDivider = NavBarDivider;
+
+
+/***/ }),
+
+/***/ "./src/components/NavBar/NavBarGroup.tsx":
+/*!***********************************************!*\
+  !*** ./src/components/NavBar/NavBarGroup.tsx ***!
+  \***********************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.NavBarGroup = void 0;
+var react_1 = __importStar(__webpack_require__(/*! react */ "react"));
+var ButtonGroup_1 = __webpack_require__(/*! ../ButtonGroup */ "./src/components/ButtonGroup/index.ts");
+exports.NavBarGroup = (0, react_1.forwardRef)(function (props, ref) { return (react_1.default.createElement(ButtonGroup_1.ButtonGroup, __assign({ className: 'rcx-navbar-group', ref: ref }, props))); });
+
+
+/***/ }),
+
+/***/ "./src/components/NavBar/NavBarItem.tsx":
+/*!**********************************************!*\
+  !*** ./src/components/NavBar/NavBarItem.tsx ***!
+  \**********************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.NavBarItem = void 0;
+var react_1 = __importStar(__webpack_require__(/*! react */ "react"));
+var appendClassName_1 = __webpack_require__(/*! ../../helpers/appendClassName */ "./src/helpers/appendClassName.ts");
+var patchChildren_1 = __webpack_require__(/*! ../../helpers/patchChildren */ "./src/helpers/patchChildren.ts");
+var Button_1 = __webpack_require__(/*! ../Button */ "./src/components/Button/index.ts");
+exports.NavBarItem = (0, react_1.forwardRef)(function NavBarItem(_a, ref) {
+    var children = _a.children, icon = _a.icon, props = __rest(_a, ["children", "icon"]);
+    return (react_1.default.createElement(react_1.default.Fragment, null, icon ? (react_1.default.createElement(Button_1.IconButton, __assign({ ref: ref, "rcx-navbar-item": true, icon: icon, small: true }, props))) : ((0, patchChildren_1.patchChildren)(children, function (childProps) { return (__assign({ className: (0, appendClassName_1.appendClassName)(childProps.className, 'rcx-navbar-item'), ref: ref }, props)); }))));
+});
+
+
+/***/ }),
+
+/***/ "./src/components/NavBar/NavBarSection.tsx":
+/*!*************************************************!*\
+  !*** ./src/components/NavBar/NavBarSection.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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.NavBarSection = void 0;
+var react_1 = __importDefault(__webpack_require__(/*! react */ "react"));
+var NavBarSection = function (props) { return (react_1.default.createElement("span", __assign({ className: 'rcx-navbar-section' }, props))); };
+exports.NavBarSection = NavBarSection;
+
+
+/***/ }),
+
+/***/ "./src/components/NavBar/index.ts":
+/*!****************************************!*\
+  !*** ./src/components/NavBar/index.ts ***!
+  \****************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+__exportStar(__webpack_require__(/*! ./NavBar */ "./src/components/NavBar/NavBar.tsx"), exports);
+__exportStar(__webpack_require__(/*! ./NavBarGroup */ "./src/components/NavBar/NavBarGroup.tsx"), exports);
+__exportStar(__webpack_require__(/*! ./NavBarItem */ "./src/components/NavBar/NavBarItem.tsx"), exports);
+__exportStar(__webpack_require__(/*! ./NavBarDivider */ "./src/components/NavBar/NavBarDivider.tsx"), exports);
+__exportStar(__webpack_require__(/*! ./NavBarSection */ "./src/components/NavBar/NavBarSection.tsx"), exports);
+
+
 /***/ }),
 
 /***/ "./src/components/NumberInput/NumberInput.tsx":
@@ -18522,6 +18818,7 @@ var Modal_1 = __webpack_require__(/*! ./Modal */ "./src/components/Modal/index.t
 Object.defineProperty(exports, "Modal", ({ enumerable: true, get: function () { return __importDefault(Modal_1).default; } }));
 __exportStar(__webpack_require__(/*! ./Modal */ "./src/components/Modal/index.ts"), exports);
 __exportStar(__webpack_require__(/*! ./MultiSelect */ "./src/components/MultiSelect/index.ts"), exports);
+__exportStar(__webpack_require__(/*! ./NavBar */ "./src/components/NavBar/index.ts"), exports);
 __exportStar(__webpack_require__(/*! ./NumberInput */ "./src/components/NumberInput/index.tsx"), exports);
 var Options_1 = __webpack_require__(/*! ./Options */ "./src/components/Options/index.ts");
 Object.defineProperty(exports, "Options", ({ enumerable: true, get: function () { return __importDefault(Options_1).default; } }));