@comet/admin 8.17.1 → 9.0.0-beta.0

package/lib/common/toolbar/ToolbarBreadcrumbs.js

@@ -1,18 +1,4 @@
-"use strict";
-
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ToolbarBreadcrumbs = void 0;
-var _adminIcons = require("@comet/admin-icons");
-var _material = require("@mui/material");
-var _react = require("react");
-var _reactRouterDom = require("react-router-dom");
-var _createComponentSlot = require("../../helpers/createComponentSlot");
-var _Api = require("../../stack/Api");
-var _useObservedWidth = require("../../utils/useObservedWidth");
-var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12;
 var _excluded = ["iconMapping", "slotProps"];
 function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
@@ -29,9 +15,17 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-var ToolbarBreadcrumbs = exports.ToolbarBreadcrumbs = function ToolbarBreadcrumbs(inProps) {
+import { ChevronDown, ChevronRight, ChevronUp } from "@comet/admin-icons";
+import { ButtonBase, css, ListItemText, Menu, MenuItem, Typography, useThemeProps } from "@mui/material";
+import { Fragment, useRef, useState, createElement as _createElement } from "react";
+import { Link as RouterLink } from "react-router-dom";
+import { createComponentSlot } from "../../helpers/createComponentSlot";
+import { useStackApi } from "../../stack/Api";
+import { useObservedWidth } from "../../utils/useObservedWidth";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export var ToolbarBreadcrumbs = function ToolbarBreadcrumbs(inProps) {
   var _stackApi$breadCrumbs, _slotProps$mobileMenu, _slotProps$mobileMenu2, _slotProps$mobileMenu3, _slotProps$mobileMenu4, _slotProps$mobileMenu5;
-  var _useThemeProps = (0, _material.useThemeProps)({
+  var _useThemeProps = useThemeProps({
       props: inProps,
       name: "CometAdminToolbarBreadcrumbs"
     }),
@@ -40,38 +34,38 @@ var ToolbarBreadcrumbs = exports.ToolbarBreadcrumbs = function ToolbarBreadcrumb
     slotProps = _useThemeProps.slotProps,
     restProps = _objectWithoutProperties(_useThemeProps, _excluded);
   var _iconMapping$itemSepa = iconMapping.itemSeparator,
-    itemSeparatorIcon = _iconMapping$itemSepa === void 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_adminIcons.ChevronRight, {}) : _iconMapping$itemSepa,
+    itemSeparatorIcon = _iconMapping$itemSepa === void 0 ? /*#__PURE__*/_jsx(ChevronRight, {}) : _iconMapping$itemSepa,
     _iconMapping$openMobi = iconMapping.openMobileMenu,
-    openMobileMenuIcon = _iconMapping$openMobi === void 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_adminIcons.ChevronDown, {}) : _iconMapping$openMobi,
+    openMobileMenuIcon = _iconMapping$openMobi === void 0 ? /*#__PURE__*/_jsx(ChevronDown, {}) : _iconMapping$openMobi,
     _iconMapping$closeMob = iconMapping.closeMobileMenu,
-    closeMobileMenuIcon = _iconMapping$closeMob === void 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_adminIcons.ChevronUp, {}) : _iconMapping$closeMob;
-  var _useState = (0, _react.useState)(false),
+    closeMobileMenuIcon = _iconMapping$closeMob === void 0 ? /*#__PURE__*/_jsx(ChevronUp, {}) : _iconMapping$closeMob;
+  var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     showMobileMenu = _useState2[0],
     setShowMobileMenu = _useState2[1];
-  var rootRef = (0, _react.useRef)(null);
-  var stackApi = (0, _Api.useStackApi)();
+  var rootRef = useRef(null);
+  var stackApi = useStackApi();
   var breadcrumbs = (_stackApi$breadCrumbs = stackApi === null || stackApi === void 0 ? void 0 : stackApi.breadCrumbs) !== null && _stackApi$breadCrumbs !== void 0 ? _stackApi$breadCrumbs : [];
-  var menuWidth = (0, _useObservedWidth.useObservedWidth)(rootRef);
+  var menuWidth = useObservedWidth(rootRef);
   var toggleMobileMenu = function toggleMobileMenu() {
     setShowMobileMenu(function (val) {
       return !val;
     });
   };
-  var itemSeparator = /*#__PURE__*/(0, _jsxRuntime.jsx)(BreadcrumbsItemSeparator, {
+  var itemSeparator = /*#__PURE__*/_jsx(BreadcrumbsItemSeparator, {
     children: itemSeparatorIcon
   });
   var lastBreadcrumbTitle = breadcrumbs.length ? breadcrumbs[breadcrumbs.length - 1].title : null;
-  var currentBreadcrumbItem = /*#__PURE__*/(0, _jsxRuntime.jsx)(CurrentBreadcrumbsItem, _objectSpread(_objectSpread({
+  var currentBreadcrumbItem = /*#__PURE__*/_jsx(CurrentBreadcrumbsItem, _objectSpread(_objectSpread({
     variant: "body2"
   }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.currentBreadcrumbsItem), {}, {
     children: lastBreadcrumbTitle
   }));
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, _objectSpread(_objectSpread(_objectSpread({
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(Root, _objectSpread(_objectSpread(_objectSpread({
       ref: rootRef
     }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root), restProps), {}, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(BreadcrumbsList, _objectSpread(_objectSpread({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.breadcrumbsList), {}, {
+      children: [/*#__PURE__*/_jsx(BreadcrumbsList, _objectSpread(_objectSpread({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.breadcrumbsList), {}, {
         children: breadcrumbs.map(function (_ref, index) {
           var title = _ref.title,
             url = _ref.url;
@@ -80,36 +74,36 @@ var ToolbarBreadcrumbs = exports.ToolbarBreadcrumbs = function ToolbarBreadcrumb
             variant: "body2",
             title: typeof title === "string" ? title : undefined
           };
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
-            children: isCurrentPage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(CurrentBreadcrumbsItem, _objectSpread(_objectSpread(_objectSpread({}, commonItemProps), slotProps === null || slotProps === void 0 ? void 0 : slotProps.currentBreadcrumbsItem), {}, {
+          return /*#__PURE__*/_jsx(Fragment, {
+            children: isCurrentPage ? /*#__PURE__*/_jsx(CurrentBreadcrumbsItem, _objectSpread(_objectSpread(_objectSpread({}, commonItemProps), slotProps === null || slotProps === void 0 ? void 0 : slotProps.currentBreadcrumbsItem), {}, {
               children: title
-            })) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(BreadcrumbsItem, _objectSpread(_objectSpread(_objectSpread({}, commonItemProps), slotProps === null || slotProps === void 0 ? void 0 : slotProps.breadcrumbsItem), {}, {
+            })) : /*#__PURE__*/_jsxs(_Fragment, {
+              children: [/*#__PURE__*/_jsx(BreadcrumbsItem, _objectSpread(_objectSpread(_objectSpread({}, commonItemProps), slotProps === null || slotProps === void 0 ? void 0 : slotProps.breadcrumbsItem), {}, {
                 // @ts-expect-error The component prop does not work properly with MUIs `styled()`, see: https://mui.com/material-ui/guides/typescript/#complications-with-the-component-prop
-                component: _reactRouterDom.Link,
+                component: RouterLink,
                 to: url,
                 children: title
               })), itemSeparator]
             })
           }, index);
         })
-      })), breadcrumbs.length > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(MobileBreadcrumbsButton, _objectSpread(_objectSpread({
+      })), breadcrumbs.length > 1 ? /*#__PURE__*/_jsxs(MobileBreadcrumbsButton, _objectSpread(_objectSpread({
         disableRipple: true
       }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.mobileBreadcrumbsButton), {}, {
         onClick: toggleMobileMenu,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(BreadcrumbsEllipsisItem, _objectSpread(_objectSpread({
+        children: [/*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(BreadcrumbsEllipsisItem, _objectSpread(_objectSpread({
             variant: "body2"
           }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.breadcrumbsEllipsisItem), {}, {
             children: "\u2026"
           })), itemSeparator]
-        }), currentBreadcrumbItem, /*#__PURE__*/(0, _jsxRuntime.jsx)(MobileMenuIcon, _objectSpread(_objectSpread({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.mobileMenuIcon), {}, {
+        }), currentBreadcrumbItem, /*#__PURE__*/_jsx(MobileMenuIcon, _objectSpread(_objectSpread({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.mobileMenuIcon), {}, {
           children: showMobileMenu ? closeMobileMenuIcon : openMobileMenuIcon
         }))]
-      })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(MobileStandaloneCurrentBreadcrumbItem, _objectSpread(_objectSpread({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.mobileStandaloneCurrentBreadcrumbItem), {}, {
+      })) : /*#__PURE__*/_jsx(MobileStandaloneCurrentBreadcrumbItem, _objectSpread(_objectSpread({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.mobileStandaloneCurrentBreadcrumbItem), {}, {
         children: currentBreadcrumbItem
       }))]
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(MobileMenu, _objectSpread(_objectSpread({
+    })), /*#__PURE__*/_jsx(MobileMenu, _objectSpread(_objectSpread({
       open: showMobileMenu,
       anchorEl: rootRef.current,
       onClose: toggleMobileMenu
@@ -134,19 +128,19 @@ var ToolbarBreadcrumbs = exports.ToolbarBreadcrumbs = function ToolbarBreadcrumb
         var title = _ref2.title,
           url = _ref2.url;
         var isCurrentPage = nestingLevel === breadcrumbs.length - 1;
-        return /*#__PURE__*/(0, _react.createElement)(MobileMenuItem, _objectSpread(_objectSpread({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.mobileMenuItem), {}, {
+        return /*#__PURE__*/_createElement(MobileMenuItem, _objectSpread(_objectSpread({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.mobileMenuItem), {}, {
           key: nestingLevel,
           onClick: toggleMobileMenu,
           selected: isCurrentPage
           // @ts-expect-error The component prop does not work properly with MUIs `styled()`, see: https://mui.com/material-ui/guides/typescript/#complications-with-the-component-prop
           ,
-          component: _reactRouterDom.Link,
+          component: RouterLink,
           to: url
-        }), nestingLevel > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(MobileMenuItemNestingIndicator, _objectSpread(_objectSpread({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.mobileMenuItemNestingIndicator), {}, {
+        }), nestingLevel > 0 && /*#__PURE__*/_jsx(MobileMenuItemNestingIndicator, _objectSpread(_objectSpread({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.mobileMenuItemNestingIndicator), {}, {
           ownerState: {
             nestingLevel: nestingLevel
           }
-        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(MobileMenuItemText, _objectSpread(_objectSpread({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.mobileMenuItemText), {}, {
+        })), /*#__PURE__*/_jsx(MobileMenuItemText, _objectSpread(_objectSpread({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.mobileMenuItemText), {}, {
           primary: title,
           ownerState: {
             isCurrentPage: isCurrentPage
@@ -156,95 +150,95 @@ var ToolbarBreadcrumbs = exports.ToolbarBreadcrumbs = function ToolbarBreadcrumb
     }))]
   });
 };
-var Root = (0, _createComponentSlot.createComponentSlot)("div")({
+var Root = createComponentSlot("div")({
   componentName: "ToolbarBreadcrumbs",
   slotName: "root"
 })(function (_ref3) {
   var theme = _ref3.theme;
-  return (0, _material.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        display: flex;\n        align-items: center;\n        gap: ", ";\n    "])), theme.spacing(2));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        display: flex;\n        align-items: center;\n        gap: ", ";\n    "])), theme.spacing(2));
 });
-var BreadcrumbsList = (0, _createComponentSlot.createComponentSlot)("div")({
+var BreadcrumbsList = createComponentSlot("div")({
   componentName: "ToolbarBreadcrumbs",
   slotName: "breadcrumbsList"
 })(function (_ref4) {
   var theme = _ref4.theme;
-  return (0, _material.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        display: none;\n        align-items: center;\n        gap: ", ";\n        overflow: hidden;\n\n        ", " {\n            display: flex;\n        }\n    "])), theme.spacing(1), theme.breakpoints.up("md"));
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        display: none;\n        align-items: center;\n        gap: ", ";\n        overflow: hidden;\n\n        ", " {\n            display: flex;\n        }\n    "])), theme.spacing(1), theme.breakpoints.up("md"));
 });
-var MobileBreadcrumbsButton = (0, _createComponentSlot.createComponentSlot)(_material.ButtonBase)({
+var MobileBreadcrumbsButton = createComponentSlot(ButtonBase)({
   componentName: "ToolbarBreadcrumbs",
   slotName: "mobileBreadcrumbsButton"
 })(function (_ref5) {
   var theme = _ref5.theme;
-  return (0, _material.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        display: flex;\n        align-items: center;\n        gap: ", ";\n        flex-grow: 1;\n        overflow: hidden;\n        padding-top: ", ";\n        padding-bottom: ", ";\n\n        ", " {\n            display: none;\n        }\n    "])), theme.spacing(1), theme.spacing(2), theme.spacing(2), theme.breakpoints.up("md"));
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        display: flex;\n        align-items: center;\n        gap: ", ";\n        flex-grow: 1;\n        overflow: hidden;\n        padding-top: ", ";\n        padding-bottom: ", ";\n\n        ", " {\n            display: none;\n        }\n    "])), theme.spacing(1), theme.spacing(2), theme.spacing(2), theme.breakpoints.up("md"));
 });
-var MobileStandaloneCurrentBreadcrumbItem = (0, _createComponentSlot.createComponentSlot)("div")({
+var MobileStandaloneCurrentBreadcrumbItem = createComponentSlot("div")({
   componentName: "ToolbarBreadcrumbs",
   slotName: "mobileStandaloneCurrentBreadcrumbItem"
 })(function (_ref6) {
   var theme = _ref6.theme;
-  return (0, _material.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        ", " {\n            display: none;\n        }\n    "])), theme.breakpoints.up("md"));
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        ", " {\n            display: none;\n        }\n    "])), theme.breakpoints.up("md"));
 });
 var getCommonItemStyles = function getCommonItemStyles(theme) {
-  return (0, _material.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    color: ", ";\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n\n    ", " {\n        padding-top: ", ";\n        padding-bottom: ", ";\n    }\n"])), theme.palette.grey[900], theme.breakpoints.up("md"), theme.spacing(2), theme.spacing(2));
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    color: ", ";\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n\n    ", " {\n        padding-top: ", ";\n        padding-bottom: ", ";\n    }\n"])), theme.palette.grey[900], theme.breakpoints.up("md"), theme.spacing(2), theme.spacing(2));
 };
-var CurrentBreadcrumbsItem = (0, _createComponentSlot.createComponentSlot)(_material.Typography)({
+var CurrentBreadcrumbsItem = createComponentSlot(Typography)({
   componentName: "ToolbarBreadcrumbs",
   slotName: "currentBreadcrumbsItem"
 })(function (_ref7) {
   var theme = _ref7.theme;
-  return (0, _material.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        ", "\n        font-weight: 600;\n    "])), getCommonItemStyles(theme));
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        ", "\n        font-weight: 600;\n    "])), getCommonItemStyles(theme));
 });
-var BreadcrumbsItem = (0, _createComponentSlot.createComponentSlot)(_material.Typography)({
+var BreadcrumbsItem = createComponentSlot(Typography)({
   componentName: "ToolbarBreadcrumbs",
   slotName: "breadcrumbsItem"
 })(function (_ref8) {
   var theme = _ref8.theme;
-  return (0, _material.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        ", "\n\n        ", " {\n            display: block;\n        }\n    "])), getCommonItemStyles(theme), theme.breakpoints.up("md"));
+  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        ", "\n\n        ", " {\n            display: block;\n        }\n    "])), getCommonItemStyles(theme), theme.breakpoints.up("md"));
 });
-var BreadcrumbsItemSeparator = (0, _createComponentSlot.createComponentSlot)("div")({
+var BreadcrumbsItemSeparator = createComponentSlot("div")({
   componentName: "ToolbarBreadcrumbs",
   slotName: "breadcrumbsItemSeparator"
 })(function (_ref9) {
   var theme = _ref9.theme;
-  return (0, _material.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        line-height: 0;\n        display: none;\n\n        :nth-last-of-type(2) {\n            display: block;\n        }\n\n        ", " {\n            display: block;\n        }\n    "])), theme.breakpoints.up("md"));
+  return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        line-height: 0;\n        display: none;\n\n        :nth-last-of-type(2) {\n            display: block;\n        }\n\n        ", " {\n            display: block;\n        }\n    "])), theme.breakpoints.up("md"));
 });
-var BreadcrumbsEllipsisItem = (0, _createComponentSlot.createComponentSlot)(_material.Typography)({
+var BreadcrumbsEllipsisItem = createComponentSlot(Typography)({
   componentName: "ToolbarBreadcrumbs",
   slotName: "breadcrumbsEllipsisItem"
 })(function (_ref0) {
   var theme = _ref0.theme;
-  return (0, _material.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n        color: ", ";\n        text-decoration: underline;\n        padding: ", ";\n        margin-left: ", ";\n        margin-right: ", ";\n        cursor: pointer;\n\n        ", " {\n            display: none;\n        }\n    "])), theme.palette.grey[900], theme.spacing(1), theme.spacing(-1), theme.spacing(-1), theme.breakpoints.up("md"));
+  return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n        color: ", ";\n        text-decoration: underline;\n        padding: ", ";\n        margin-left: ", ";\n        margin-right: ", ";\n        cursor: pointer;\n\n        ", " {\n            display: none;\n        }\n    "])), theme.palette.grey[900], theme.spacing(1), theme.spacing(-1), theme.spacing(-1), theme.breakpoints.up("md"));
 });
-var MobileMenu = (0, _createComponentSlot.createComponentSlot)(_material.Menu)({
+var MobileMenu = createComponentSlot(Menu)({
   componentName: "ToolbarBreadcrumbs",
   slotName: "mobileMenu"
 })(function (_ref1) {
   var theme = _ref1.theme;
-  return (0, _material.css)(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["\n        .MuiPopover-paper {\n            min-width: 220px;\n        }\n\n        .MuiMenu-list {\n            padding-top: ", ";\n            padding-bottom: ", ";\n        }\n    "])), theme.spacing(3), theme.spacing(3));
+  return css(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["\n        .MuiPopover-paper {\n            min-width: 220px;\n        }\n\n        .MuiMenu-list {\n            padding-top: ", ";\n            padding-bottom: ", ";\n        }\n    "])), theme.spacing(3), theme.spacing(3));
 });
-var MobileMenuIcon = (0, _createComponentSlot.createComponentSlot)("div")({
+var MobileMenuIcon = createComponentSlot("div")({
   componentName: "ToolbarBreadcrumbs",
   slotName: "mobileMenuIcon"
-})((0, _material.css)(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["\n    margin-left: auto;\n    line-height: 0;\n"]))));
-var MobileMenuItem = (0, _createComponentSlot.createComponentSlot)(_material.MenuItem)({
+})(css(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["\n    margin-left: auto;\n    line-height: 0;\n"]))));
+var MobileMenuItem = createComponentSlot(MenuItem)({
   componentName: "ToolbarBreadcrumbs",
   slotName: "mobileMenuItem"
 })(function (_ref10) {
   var theme = _ref10.theme;
-  return (0, _material.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n        position: relative;\n        min-height: auto;\n        padding-left: ", ";\n        padding-right: ", ";\n        padding-top: 8px;\n        padding-bottom: 8px;\n\n        :hover,\n        &.Mui-selected,\n        &.Mui-focusVisible,\n        &.Mui-selected.Mui-focusVisible,\n        &.Mui-selected:hover {\n            background-color: ", ";\n        }\n    "])), theme.spacing(3), theme.spacing(3), theme.palette.grey[50]);
+  return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n        position: relative;\n        min-height: auto;\n        padding-left: ", ";\n        padding-right: ", ";\n        padding-top: 8px;\n        padding-bottom: 8px;\n\n        :hover,\n        &.Mui-selected,\n        &.Mui-focusVisible,\n        &.Mui-selected.Mui-focusVisible,\n        &.Mui-selected:hover {\n            background-color: ", ";\n        }\n    "])), theme.spacing(3), theme.spacing(3), theme.palette.grey[50]);
 });
-var MobileMenuItemText = (0, _createComponentSlot.createComponentSlot)(_material.ListItemText)({
+var MobileMenuItemText = createComponentSlot(ListItemText)({
   componentName: "ToolbarBreadcrumbs",
   slotName: "mobileMenuItemText"
 })(function (_ref11) {
   var ownerState = _ref11.ownerState;
-  return (0, _material.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n        .MuiListItemText-primary {\n            font-weight: ", ";\n            text-overflow: ellipsis;\n            overflow: hidden;\n        }\n    "])), ownerState.isCurrentPage ? 600 : 300);
+  return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n        .MuiListItemText-primary {\n            font-weight: ", ";\n            text-overflow: ellipsis;\n            overflow: hidden;\n        }\n    "])), ownerState.isCurrentPage ? 600 : 300);
 });
-var MobileMenuItemNestingIndicator = (0, _createComponentSlot.createComponentSlot)("div")({
+var MobileMenuItemNestingIndicator = createComponentSlot("div")({
   componentName: "ToolbarBreadcrumbs",
   slotName: "mobileMenuItemNestingIndicator"
 })(function (_ref12) {
   var theme = _ref12.theme,
     ownerState = _ref12.ownerState;
-  return (0, _material.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n        position: relative;\n        margin-left: ", "px;\n        width: 12px;\n        flex-shrink: 0;\n\n        :before {\n            content: \"\";\n            position: absolute;\n            top: -18px;\n            left: 0;\n            width: 5px;\n            height: 15px;\n            border-width: 0 0 1px 1px;\n            border-style: solid;\n            border-color: ", ";\n            box-sizing: border-box;\n        }\n    "])), 17 * ownerState.nestingLevel, theme.palette.grey[100]);
+  return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n        position: relative;\n        margin-left: ", "px;\n        width: 12px;\n        flex-shrink: 0;\n\n        :before {\n            content: \"\";\n            position: absolute;\n            top: -18px;\n            left: 0;\n            width: 5px;\n            height: 15px;\n            border-width: 0 0 1px 1px;\n            border-style: solid;\n            border-color: ", ";\n            box-sizing: border-box;\n        }\n    "])), 17 * ownerState.nestingLevel, theme.palette.grey[100]);
 });

package/lib/common/toolbar/actions/ToolbarActionButton.js

@@ -1,18 +1,6 @@
-"use strict";
-
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ToolbarActionButton = void 0;
-var _material = require("@mui/material");
-var _styles = require("@mui/material/styles");
-var _createComponentSlot = require("../../../helpers/createComponentSlot");
-var _useWindowSize = require("../../../helpers/useWindowSize");
-var _Tooltip = require("../../Tooltip");
-var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["children", "slotProps"];
-var _templateObject, _templateObject2, _templateObject3; // eslint-disable-next-line no-restricted-imports
+var _templateObject, _templateObject2, _templateObject3;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -21,11 +9,18 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-var StyledTooltip = (0, _createComponentSlot.createComponentSlot)(_Tooltip.Tooltip)({
+// eslint-disable-next-line no-restricted-imports
+import { Button, IconButton } from "@mui/material";
+import { css, useTheme, useThemeProps } from "@mui/material/styles";
+import { createComponentSlot } from "../../../helpers/createComponentSlot";
+import { useWindowSize } from "../../../helpers/useWindowSize";
+import { Tooltip } from "../../Tooltip";
+import { jsx as _jsx } from "react/jsx-runtime";
+var StyledTooltip = createComponentSlot(Tooltip)({
   componentName: "ToolbarActionButton",
   slotName: "tooltip"
 })();
-var StyledIconButton = (0, _createComponentSlot.createComponentSlot)(_material.IconButton)({
+var StyledIconButton = createComponentSlot(IconButton)({
   componentName: "ToolbarActionButton",
   slotName: "iconButton",
   classesResolver: function classesResolver(ownerState) {
@@ -34,9 +29,9 @@ var StyledIconButton = (0, _createComponentSlot.createComponentSlot)(_material.I
 })(function (_ref) {
   var theme = _ref.theme,
     ownerState = _ref.ownerState;
-  return (0, _styles.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        ", "\n        ", "\n    "])), ownerState.variant === "contained" && (0, _styles.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n            background: ", ";\n            color: ", ";\n            border-radius: 4px;\n            &:hover {\n                background: ", ";\n            }\n        "])), theme.palette.primary.main, theme.palette.primary.contrastText, theme.palette.primary.dark), ownerState.variant === "outlined" && (0, _styles.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            border-radius: 4px;\n            border-width: 1px;\n            border-style: solid;\n            border-color: ", ";\n            &:hover {\n                background-color: ", ";\n                border-color: ", ";\n            }\n        "])), theme.palette.grey[200], theme.palette.grey[50], theme.palette.grey[200]));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        ", "\n        ", "\n    "])), ownerState.variant === "contained" && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n            background: ", ";\n            color: ", ";\n            border-radius: 4px;\n            &:hover {\n                background: ", ";\n            }\n        "])), theme.palette.primary.main, theme.palette.primary.contrastText, theme.palette.primary.dark), ownerState.variant === "outlined" && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            border-radius: 4px;\n            border-width: 1px;\n            border-style: solid;\n            border-color: ", ";\n            &:hover {\n                background-color: ", ";\n                border-color: ", ";\n            }\n        "])), theme.palette.grey[200], theme.palette.grey[50], theme.palette.grey[200]));
 });
-var StyledButton = (0, _createComponentSlot.createComponentSlot)(_material.Button)({
+var StyledButton = createComponentSlot(Button)({
   componentName: "ToolbarActionButton",
   slotName: "button",
   classesResolver: function classesResolver(ownerState) {
@@ -47,9 +42,9 @@ var StyledButton = (0, _createComponentSlot.createComponentSlot)(_material.Butto
 /**
  * @deprecated Use `Button` from `@comet/admin` with the `responsive` prop instead.
  */
-var ToolbarActionButton = exports.ToolbarActionButton = function ToolbarActionButton(props) {
+export var ToolbarActionButton = function ToolbarActionButton(props) {
   var _restProps$startIcon, _restProps$variant;
-  var _useThemeProps = (0, _styles.useThemeProps)({
+  var _useThemeProps = useThemeProps({
       props: props,
       name: "CometAdminToolbarActionButton"
     }),
@@ -60,22 +55,22 @@ var ToolbarActionButton = exports.ToolbarActionButton = function ToolbarActionBu
   var iconButtonProps = slotProps.iconButton,
     tooltipProps = slotProps.tooltip,
     buttonProps = slotProps.button;
-  var windowSize = (0, _useWindowSize.useWindowSize)();
-  var theme = (0, _styles.useTheme)();
+  var windowSize = useWindowSize();
+  var theme = useTheme();
   var useIconButton = windowSize.width < theme.breakpoints.values.sm;
   var icon = (_restProps$startIcon = restProps.startIcon) !== null && _restProps$startIcon !== void 0 ? _restProps$startIcon : restProps.endIcon;
   var ownerState = {
     variant: (_restProps$variant = restProps.variant) !== null && _restProps$variant !== void 0 ? _restProps$variant : "text"
   };
-  return useIconButton && icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTooltip, _objectSpread(_objectSpread({
+  return useIconButton && icon ? /*#__PURE__*/_jsx(StyledTooltip, _objectSpread(_objectSpread({
     title: children
   }, tooltipProps), {}, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledIconButton, _objectSpread(_objectSpread(_objectSpread({
+    children: /*#__PURE__*/_jsx(StyledIconButton, _objectSpread(_objectSpread(_objectSpread({
       ownerState: ownerState
     }, restProps), iconButtonProps), {}, {
       children: icon
     }))
-  })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledButton, _objectSpread(_objectSpread(_objectSpread({
+  })) : /*#__PURE__*/_jsx(StyledButton, _objectSpread(_objectSpread(_objectSpread({
     ownerState: ownerState
   }, restProps), buttonProps), {}, {
     children: children

package/lib/common/toolbar/actions/ToolbarActions.js

@@ -1,13 +1,4 @@
-"use strict";
-
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ToolbarActions = void 0;
-var _styles = require("@mui/material/styles");
-var _createComponentSlot = require("../../../helpers/createComponentSlot");
-var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["children"];
 var _templateObject;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -18,21 +9,24 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-var Root = (0, _createComponentSlot.createComponentSlot)("div")({
+import { css, useThemeProps } from "@mui/material/styles";
+import { createComponentSlot } from "../../../helpers/createComponentSlot";
+import { jsx as _jsx } from "react/jsx-runtime";
+var Root = createComponentSlot("div")({
   componentName: "ToolbarActions",
   slotName: "root"
 })(function (_ref) {
   var theme = _ref.theme;
-  return (0, _styles.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        display: flex;\n        align-items: center;\n        gap: ", ";\n    "])), theme.spacing(2));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        display: flex;\n        align-items: center;\n        gap: ", ";\n    "])), theme.spacing(2));
 });
-var ToolbarActions = exports.ToolbarActions = function ToolbarActions(inProps) {
-  var _useThemeProps = (0, _styles.useThemeProps)({
+export var ToolbarActions = function ToolbarActions(inProps) {
+  var _useThemeProps = useThemeProps({
       props: inProps,
       name: "CometAdminToolbarActions"
     }),
     children = _useThemeProps.children,
     restProps = _objectWithoutProperties(_useThemeProps, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, _objectSpread(_objectSpread({}, restProps), {}, {
+  return /*#__PURE__*/_jsx(Root, _objectSpread(_objectSpread({}, restProps), {}, {
     children: children
   }));
 };

package/lib/common/toolbar/automatictitleitem/ToolbarAutomaticTitleItem.js

@@ -1,16 +1,4 @@
-"use strict";
-
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ToolbarAutomaticTitleItem = void 0;
-var _material = require("@mui/material");
-var _styles = require("@mui/material/styles");
-var _createComponentSlot = require("../../../helpers/createComponentSlot");
-var _Api = require("../../../stack/Api");
-var _ToolbarItem = require("../item/ToolbarItem");
-var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["typographyProps", "slotProps"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -19,12 +7,18 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-var Root = (0, _createComponentSlot.createComponentSlot)(_ToolbarItem.ToolbarItem)({
+import { Typography } from "@mui/material";
+import { useThemeProps } from "@mui/material/styles";
+import { createComponentSlot } from "../../../helpers/createComponentSlot";
+import { useStackApi } from "../../../stack/Api";
+import { ToolbarItem } from "../item/ToolbarItem";
+import { jsx as _jsx } from "react/jsx-runtime";
+var Root = createComponentSlot(ToolbarItem)({
   componentName: "ToolbarAutomaticTitleItem",
   slotName: "root"
 })();
-var ToolbarAutomaticTitleItem = exports.ToolbarAutomaticTitleItem = function ToolbarAutomaticTitleItem(inProps) {
-  var _useThemeProps = (0, _styles.useThemeProps)({
+export var ToolbarAutomaticTitleItem = function ToolbarAutomaticTitleItem(inProps) {
+  var _useThemeProps = useThemeProps({
       props: inProps,
       name: "CometAdminToolbarAutomaticTitleItem"
     }),
@@ -32,9 +26,9 @@ var ToolbarAutomaticTitleItem = exports.ToolbarAutomaticTitleItem = function Too
     typographyProps = _useThemeProps$typogr === void 0 ? {} : _useThemeProps$typogr,
     slotProps = _useThemeProps.slotProps,
     restProps = _objectWithoutProperties(_useThemeProps, _excluded);
-  var stackApi = (0, _Api.useStackApi)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, _objectSpread(_objectSpread(_objectSpread({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root), restProps), {}, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, _objectSpread(_objectSpread(_objectSpread({
+  var stackApi = useStackApi();
+  return /*#__PURE__*/_jsx(Root, _objectSpread(_objectSpread(_objectSpread({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root), restProps), {}, {
+    children: /*#__PURE__*/_jsx(Typography, _objectSpread(_objectSpread(_objectSpread({
       variant: "h5"
     }, typographyProps), slotProps === null || slotProps === void 0 ? void 0 : slotProps.typography), {}, {
       children: (stackApi === null || stackApi === void 0 ? void 0 : stackApi.breadCrumbs) != null && stackApi.breadCrumbs.length > 0 && stackApi.breadCrumbs[(stackApi === null || stackApi === void 0 ? void 0 : stackApi.breadCrumbs.length) - 1].title

package/lib/common/toolbar/backbutton/ToolbarBackButton.js

@@ -1,18 +1,4 @@
-"use strict";
-
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ToolbarBackButton = void 0;
-var _adminIcons = require("@comet/admin-icons");
-var _material = require("@mui/material");
-var _styles = require("@mui/material/styles");
-var _reactRouterDom = require("react-router-dom");
-var _createComponentSlot = require("../../../helpers/createComponentSlot");
-var _Api = require("../../../stack/Api");
-var _ToolbarItem = require("../item/ToolbarItem");
-var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["backIcon", "slotProps"];
 var _templateObject, _templateObject2, _templateObject3;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -23,43 +9,51 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-var Root = (0, _createComponentSlot.createComponentSlot)("div")({
+import { ArrowLeft } from "@comet/admin-icons";
+import { IconButton as MuiIconButton } from "@mui/material";
+import { css, useThemeProps } from "@mui/material/styles";
+import { Link } from "react-router-dom";
+import { createComponentSlot } from "../../../helpers/createComponentSlot";
+import { useStackApi } from "../../../stack/Api";
+import { ToolbarItem as CommonToolbarItem } from "../item/ToolbarItem";
+import { jsx as _jsx } from "react/jsx-runtime";
+var Root = createComponentSlot("div")({
   componentName: "ToolbarBackButton",
   slotName: "root"
-})((0, _styles.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    flex: 0;\n    display: flex;\n\n    .CometAdminToolbarItem-root {\n        padding: 0;\n    }\n"]))));
-var IconButton = (0, _createComponentSlot.createComponentSlot)(_material.IconButton)({
+})(css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    flex: 0;\n    display: flex;\n\n    .CometAdminToolbarItem-root {\n        padding: 0;\n    }\n"]))));
+var IconButton = createComponentSlot(MuiIconButton)({
   componentName: "ToolbarBackButton",
   slotName: "iconButton"
 })(function (_ref) {
   var theme = _ref.theme;
-  return (0, _styles.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        padding: ", ";\n        margin: auto;\n        height: fit-content;\n\n        ", " {\n            padding: ", ";\n        }\n    "])), theme.spacing(1), theme.breakpoints.up("sm"), theme.spacing(2));
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        padding: ", ";\n        margin: auto;\n        height: fit-content;\n\n        ", " {\n            padding: ", ";\n        }\n    "])), theme.spacing(1), theme.breakpoints.up("sm"), theme.spacing(2));
 });
-var ToolbarItem = (0, _createComponentSlot.createComponentSlot)(_ToolbarItem.ToolbarItem)({
+var ToolbarItem = createComponentSlot(CommonToolbarItem)({
   componentName: "ToolbarBackButton",
   slotName: "toolbarItem"
-})((0, _styles.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    flex: 0;\n    display: flex;\n    align-items: stretch;\n"]))));
-var ToolbarBackButton = exports.ToolbarBackButton = function ToolbarBackButton(inProps) {
-  var _useThemeProps = (0, _styles.useThemeProps)({
+})(css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    flex: 0;\n    display: flex;\n    align-items: stretch;\n"]))));
+export var ToolbarBackButton = function ToolbarBackButton(inProps) {
+  var _useThemeProps = useThemeProps({
       props: inProps,
       name: "CometAdminToolbarBackButton"
     }),
     _useThemeProps$backIc = _useThemeProps.backIcon,
-    backIcon = _useThemeProps$backIc === void 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_adminIcons.ArrowLeft, {
+    backIcon = _useThemeProps$backIc === void 0 ? /*#__PURE__*/_jsx(ArrowLeft, {
       sx: {
         fontSize: 24
       }
     }) : _useThemeProps$backIc,
     slotProps = _useThemeProps.slotProps,
     restProps = _objectWithoutProperties(_useThemeProps, _excluded);
-  var stackApi = (0, _Api.useStackApi)();
+  var stackApi = useStackApi();
   if (!stackApi || stackApi.breadCrumbs.length <= 1) {
     return null;
   }
   var backUrl = stackApi.breadCrumbs[stackApi.breadCrumbs.length - 2].url;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, _objectSpread(_objectSpread(_objectSpread({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root), restProps), {}, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ToolbarItem, _objectSpread(_objectSpread({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.toolbarItem), {}, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
-        component: _reactRouterDom.Link,
+  return /*#__PURE__*/_jsx(Root, _objectSpread(_objectSpread(_objectSpread({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root), restProps), {}, {
+    children: /*#__PURE__*/_jsx(ToolbarItem, _objectSpread(_objectSpread({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.toolbarItem), {}, {
+      children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+        component: Link,
         to: backUrl,
         size: "large"
       }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.iconButton), {}, {