@backstage/core-components 0.9.3-next.0 → 0.9.3-next.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @backstage/core-components
 
+## 0.9.3-next.1
+
+### Patch Changes
+
+- 25b8e8d5b5: Add BackstageTab to overridableComponents so can override styles in a theme
+- a13604b8f7: Adding a name to the core-components Tab styles so can customise in the theme settings
+- 72f3dfd05a: Updated ProxiedSignInPageProps docs
+- 7741e47eae: `<Sidebar />` now accepts additional props `sidebarOptions` and `submenuOptions` to allow further customization
+
 ## 0.9.3-next.0
 
 ### Patch Changes

package/dist/index.d.ts

@@ -1036,6 +1036,9 @@ interface TabsProps {
 declare type TabsClassKey = 'root' | 'styledTabs' | 'appbar';
 declare function Tabs(props: TabsProps): JSX.Element;
 
+/** @public */
+declare type TabClassKey = 'root' | 'selected';
+
 declare type TabBarClassKey = 'indicator' | 'flexContainer' | 'root';
 
 declare type TabIconClassKey = 'root';
@@ -1362,7 +1365,7 @@ declare function PageWithHeader(props: PropsWithChildren<PageWithHeaderProps>):
  */
 declare type ProxiedSignInPageProps = SignInPageProps & {
     /**
-     * The provider to use, e.g. "gcp-iap" or "aws-alb". This must correspond to
+     * The provider to use, e.g. "gcp-iap" or "awsalb". This must correspond to
      * a properly configured auth provider ID in the auth backend.
      */
     provider: string;
@@ -1384,12 +1387,52 @@ declare type ProxiedSignInPageProps = SignInPageProps & {
  */
 declare const ProxiedSignInPage: (props: ProxiedSignInPageProps) => JSX.Element | null;
 
+/** @public **/
+declare type SidebarOptions = {
+    drawerWidthClosed?: number;
+    drawerWidthOpen?: number;
+};
+/** @public **/
+declare type SubmenuOptions = {
+    drawerWidthClosed?: number;
+    drawerWidthOpen?: number;
+};
+declare const sidebarConfig: {
+    drawerWidthClosed: number;
+    drawerWidthOpen: number;
+    defaultOpenDelayMs: number;
+    defaultCloseDelayMs: number;
+    defaultFadeDuration: number;
+    logoHeight: number;
+    iconContainerWidth: number;
+    iconSize: number;
+    iconPadding: number;
+    selectedIndicatorWidth: number;
+    userBadgePadding: number;
+    userBadgeDiameter: number;
+    mobileSidebarHeight: number;
+};
+declare const SIDEBAR_INTRO_LOCAL_STORAGE = "@backstage/core/sidebar-intro-dismissed";
+/**
+ * Types for the `SidebarContext`
+ */
+declare type SidebarContextType = {
+    isOpen: boolean;
+    setOpen: (open: boolean) => void;
+};
+/**
+ * Context whether the `Sidebar` is open
+ */
+declare const SidebarContext: React.Context<SidebarContextType>;
+
 /** @public */
 declare type SidebarClassKey = 'drawer' | 'drawerOpen';
 /** @public */
 declare type SidebarProps = {
     openDelayMs?: number;
     closeDelayMs?: number;
+    sidebarOptions?: SidebarOptions;
+    submenuOptions?: SubmenuOptions;
     disableExpandOnHover?: boolean;
     children?: React__default.ReactNode;
 };
@@ -1627,34 +1670,6 @@ declare type IntroCardProps = {
 declare function IntroCard(props: IntroCardProps): JSX.Element;
 declare function SidebarIntro(_props: {}): JSX.Element | null;
 
-declare const sidebarConfig: {
-    drawerWidthClosed: number;
-    drawerWidthOpen: number;
-    defaultOpenDelayMs: number;
-    defaultCloseDelayMs: number;
-    defaultFadeDuration: number;
-    logoHeight: number;
-    iconContainerWidth: number;
-    iconSize: number;
-    iconPadding: number;
-    selectedIndicatorWidth: number;
-    userBadgePadding: number;
-    userBadgeDiameter: number;
-    mobileSidebarHeight: number;
-};
-declare const SIDEBAR_INTRO_LOCAL_STORAGE = "@backstage/core/sidebar-intro-dismissed";
-/**
- * Types for the `SidebarContext`
- */
-declare type SidebarContextType = {
-    isOpen: boolean;
-    setOpen: (open: boolean) => void;
-};
-/**
- * Context whether the `Sidebar` is open
- */
-declare const SidebarContext: React.Context<SidebarContextType>;
-
 declare type SignInProviderConfig = {
     id: string;
     title: string;
@@ -1841,6 +1856,7 @@ declare type BackstageComponentsNameToClassKey = {
     BackstageTabBar: TabBarClassKey;
     BackstageTabIcon: TabIconClassKey;
     BackstageTabs: TabsClassKey;
+    BackstageTab: TabClassKey;
     BackstageWarningPanel: WarningPanelClassKey;
     BackstageBottomLink: BottomLinkClassKey;
     BackstageBreadcrumbsClickableText: BreadcrumbsClickableTextClassKey;
@@ -1875,4 +1891,4 @@ declare type BackstageOverrides = Overrides & {
     [Name in keyof BackstageComponentsNameToClassKey]?: Partial<StyleRules<BackstageComponentsNameToClassKey[Name]>>;
 };
 
-export { AlertDisplay, Avatar, AvatarClassKey, AvatarProps, BackstageContentClassKey, BackstageOverrides, BoldHeaderClassKey, BottomLink, BottomLinkClassKey, BottomLinkProps, Breadcrumbs, BreadcrumbsClickableTextClassKey, BreadcrumbsStyledBoxClassKey, BrokenImageIcon, Button, ButtonProps, CardActionsTopRightClassKey, CardTab, CardTabClassKey, CatalogIcon, ChatIcon, ClosedDropdownClassKey, CodeSnippet, CodeSnippetProps, Content, ContentHeader, ContentHeaderClassKey, CopyTextButton, CopyTextButtonProps, CreateButton, CreateButtonProps, CustomProviderClassKey, DashboardIcon, DependencyGraph, DependencyGraphDefaultLabelClassKey, DependencyGraphDefaultNodeClassKey, DependencyGraphEdgeClassKey, DependencyGraphNodeClassKey, DependencyGraphProps, types_d as DependencyGraphTypes, DismissableBanner, DismissableBannerClassKey, DismissbleBannerClassKey, DocsIcon, EmailIcon, EmptyState, EmptyStateClassKey, EmptyStateImageClassKey, ErrorBoundary, ErrorBoundaryProps, ErrorPage, ErrorPageClassKey, ErrorPanel, ErrorPanelClassKey, ErrorPanelProps, FeatureCalloutCircleClassKey, FeatureCalloutCircular, FiltersContainerClassKey, Gauge, GaugeCard, GaugeCardClassKey, GaugeClassKey, GaugeProps, GaugePropsGetColor, GaugePropsGetColorOptions, GitHubIcon, GroupIcon, Header, HeaderClassKey, HeaderIconLinkRow, HeaderIconLinkRowClassKey, HeaderLabel, HeaderLabelClassKey, HeaderTabs, HeaderTabsClassKey, HelpIcon, HomepageTimer, HorizontalScrollGrid, HorizontalScrollGridClassKey, IconLinkVerticalClassKey, IconLinkVerticalProps, InfoCard, InfoCardClassKey, InfoCardVariants, IntroCard, ItemCard, ItemCardGrid, ItemCardGridClassKey, ItemCardGridProps, ItemCardHeader, ItemCardHeaderClassKey, ItemCardHeaderProps, Lifecycle, LifecycleClassKey, LinearGauge, Link, LinkProps, LogViewer, LogViewerClassKey, LogViewerProps, LoginRequestListItemClassKey, MarkdownContent, MarkdownContentClassKey, MetadataTableCellClassKey, MetadataTableListClassKey, MetadataTableListItemClassKey, MetadataTableTitleCellClassKey, MicDropClassKey, MissingAnnotationEmptyState, MissingAnnotationEmptyStateClassKey, MobileSidebar, MobileSidebarProps, OAuthRequestDialog, OAuthRequestDialogClassKey, OpenedDropdownClassKey, OverflowTooltip, OverflowTooltipClassKey, Page, PageClassKey, PageWithHeader, Progress, ProxiedSignInPage, ProxiedSignInPageProps, ResponseErrorPanel, ResponseErrorPanelClassKey, RoutedTabs, SIDEBAR_INTRO_LOCAL_STORAGE, SelectComponent as Select, SelectClassKey, SelectInputBaseClassKey, SelectItem, SelectedItems, Sidebar, SidebarClassKey, SidebarContext, SidebarContextType, SidebarDivider, SidebarDividerClassKey, SidebarExpandButton, SidebarGroup, SidebarGroupProps, SidebarIntro, SidebarIntroClassKey, SidebarItem, SidebarItemClassKey, SidebarPage, SidebarPageClassKey, SidebarPageProps, SidebarPinStateContext, SidebarPinStateContextType, SidebarProps, SidebarScrollWrapper, SidebarSearchField, SidebarSpace, SidebarSpaceClassKey, SidebarSpacer, SidebarSpacerClassKey, SidebarSubmenu, SidebarSubmenuItem, SidebarSubmenuItemDropdownItem, SidebarSubmenuItemProps, SidebarSubmenuProps, SignInPage, SignInPageClassKey, SignInProviderConfig, SimpleStepper, SimpleStepperFooterClassKey, SimpleStepperStep, SimpleStepperStepClassKey, StatusAborted, StatusClassKey, StatusError, StatusOK, StatusPending, StatusRunning, StatusWarning, StructuredMetadataTable, StructuredMetadataTableListClassKey, StructuredMetadataTableNestedListClassKey, SubvalueCell, SubvalueCellClassKey, SupportButton, SupportButtonClassKey, SupportConfig, SupportItem, SupportItemLink, Tab, TabBarClassKey, TabIconClassKey, TabbedCard, TabbedCardClassKey, TabbedLayout, Table, TableClassKey, TableColumn, TableFilter, TableFiltersClassKey, TableHeaderClassKey, TableProps, TableState, TableToolbarClassKey, Tabs, TabsClassKey, TrendLine, UserIcon, UserIdentity, WarningIcon, WarningPanel, WarningPanelClassKey, sidebarConfig, useContent, useQueryParamState, useSupportConfig };
+export { AlertDisplay, Avatar, AvatarClassKey, AvatarProps, BackstageContentClassKey, BackstageOverrides, BoldHeaderClassKey, BottomLink, BottomLinkClassKey, BottomLinkProps, Breadcrumbs, BreadcrumbsClickableTextClassKey, BreadcrumbsStyledBoxClassKey, BrokenImageIcon, Button, ButtonProps, CardActionsTopRightClassKey, CardTab, CardTabClassKey, CatalogIcon, ChatIcon, ClosedDropdownClassKey, CodeSnippet, CodeSnippetProps, Content, ContentHeader, ContentHeaderClassKey, CopyTextButton, CopyTextButtonProps, CreateButton, CreateButtonProps, CustomProviderClassKey, DashboardIcon, DependencyGraph, DependencyGraphDefaultLabelClassKey, DependencyGraphDefaultNodeClassKey, DependencyGraphEdgeClassKey, DependencyGraphNodeClassKey, DependencyGraphProps, types_d as DependencyGraphTypes, DismissableBanner, DismissableBannerClassKey, DismissbleBannerClassKey, DocsIcon, EmailIcon, EmptyState, EmptyStateClassKey, EmptyStateImageClassKey, ErrorBoundary, ErrorBoundaryProps, ErrorPage, ErrorPageClassKey, ErrorPanel, ErrorPanelClassKey, ErrorPanelProps, FeatureCalloutCircleClassKey, FeatureCalloutCircular, FiltersContainerClassKey, Gauge, GaugeCard, GaugeCardClassKey, GaugeClassKey, GaugeProps, GaugePropsGetColor, GaugePropsGetColorOptions, GitHubIcon, GroupIcon, Header, HeaderClassKey, HeaderIconLinkRow, HeaderIconLinkRowClassKey, HeaderLabel, HeaderLabelClassKey, HeaderTabs, HeaderTabsClassKey, HelpIcon, HomepageTimer, HorizontalScrollGrid, HorizontalScrollGridClassKey, IconLinkVerticalClassKey, IconLinkVerticalProps, InfoCard, InfoCardClassKey, InfoCardVariants, IntroCard, ItemCard, ItemCardGrid, ItemCardGridClassKey, ItemCardGridProps, ItemCardHeader, ItemCardHeaderClassKey, ItemCardHeaderProps, Lifecycle, LifecycleClassKey, LinearGauge, Link, LinkProps, LogViewer, LogViewerClassKey, LogViewerProps, LoginRequestListItemClassKey, MarkdownContent, MarkdownContentClassKey, MetadataTableCellClassKey, MetadataTableListClassKey, MetadataTableListItemClassKey, MetadataTableTitleCellClassKey, MicDropClassKey, MissingAnnotationEmptyState, MissingAnnotationEmptyStateClassKey, MobileSidebar, MobileSidebarProps, OAuthRequestDialog, OAuthRequestDialogClassKey, OpenedDropdownClassKey, OverflowTooltip, OverflowTooltipClassKey, Page, PageClassKey, PageWithHeader, Progress, ProxiedSignInPage, ProxiedSignInPageProps, ResponseErrorPanel, ResponseErrorPanelClassKey, RoutedTabs, SIDEBAR_INTRO_LOCAL_STORAGE, SelectComponent as Select, SelectClassKey, SelectInputBaseClassKey, SelectItem, SelectedItems, Sidebar, SidebarClassKey, SidebarContext, SidebarContextType, SidebarDivider, SidebarDividerClassKey, SidebarExpandButton, SidebarGroup, SidebarGroupProps, SidebarIntro, SidebarIntroClassKey, SidebarItem, SidebarItemClassKey, SidebarOptions, SidebarPage, SidebarPageClassKey, SidebarPageProps, SidebarPinStateContext, SidebarPinStateContextType, SidebarProps, SidebarScrollWrapper, SidebarSearchField, SidebarSpace, SidebarSpaceClassKey, SidebarSpacer, SidebarSpacerClassKey, SidebarSubmenu, SidebarSubmenuItem, SidebarSubmenuItemDropdownItem, SidebarSubmenuItemProps, SidebarSubmenuProps, SignInPage, SignInPageClassKey, SignInProviderConfig, SimpleStepper, SimpleStepperFooterClassKey, SimpleStepperStep, SimpleStepperStepClassKey, StatusAborted, StatusClassKey, StatusError, StatusOK, StatusPending, StatusRunning, StatusWarning, StructuredMetadataTable, StructuredMetadataTableListClassKey, StructuredMetadataTableNestedListClassKey, SubmenuOptions, SubvalueCell, SubvalueCellClassKey, SupportButton, SupportButtonClassKey, SupportConfig, SupportItem, SupportItemLink, Tab, TabBarClassKey, TabClassKey, TabIconClassKey, TabbedCard, TabbedCardClassKey, TabbedLayout, Table, TableClassKey, TableColumn, TableFilter, TableFiltersClassKey, TableHeaderClassKey, TableProps, TableState, TableToolbarClassKey, Tabs, TabsClassKey, TrendLine, UserIcon, UserIdentity, WarningIcon, WarningPanel, WarningPanelClassKey, sidebarConfig, useContent, useQueryParamState, useSupportConfig };

package/dist/index.esm.js

@@ -2992,17 +2992,32 @@ const sidebarConfig = {
   userBadgeDiameter: drawerWidthClosed - userBadgePadding * 2,
   mobileSidebarHeight: 56
 };
+const makeSidebarConfig = (customSidebarConfig) => ({
+  ...sidebarConfig,
+  ...customSidebarConfig,
+  iconContainerWidth: sidebarConfig.drawerWidthClosed,
+  iconSize: sidebarConfig.drawerWidthClosed - sidebarConfig.iconPadding * 2,
+  userBadgeDiameter: sidebarConfig.drawerWidthClosed - sidebarConfig.userBadgePadding * 2
+});
 const submenuConfig = {
   drawerWidthClosed: 0,
   drawerWidthOpen: 202,
   defaultOpenDelayMs: sidebarConfig.defaultOpenDelayMs + 200
 };
+const makeSidebarSubmenuConfig = (customSubmenuConfig) => ({
+  ...submenuConfig,
+  ...customSubmenuConfig
+});
 const SIDEBAR_INTRO_LOCAL_STORAGE = "@backstage/core/sidebar-intro-dismissed";
 const SidebarContext = createContext({
   isOpen: false,
   setOpen: () => {
   }
 });
+const SidebarConfigContext = createContext({
+  sidebarConfig,
+  submenuConfig
+});
 const SidebarItemWithSubmenuContext = createContext({
   isHoveredOn: false,
   setIsHoveredOn: () => {
@@ -3025,17 +3040,17 @@ const LocalStorage = {
 };
 
 const useStyles$o = makeStyles((theme) => ({
-  root: {
+  root: (props) => ({
     width: "100%",
     transition: "padding-left 0.1s ease-out",
     isolation: "isolate",
     [theme.breakpoints.up("sm")]: {
-      paddingLeft: ({ isPinned }) => isPinned ? sidebarConfig.drawerWidthOpen : sidebarConfig.drawerWidthClosed
+      paddingLeft: () => props.isPinned ? props.sidebarConfig.drawerWidthOpen : props.sidebarConfig.drawerWidthClosed
     },
     [theme.breakpoints.down("xs")]: {
-      paddingBottom: sidebarConfig.mobileSidebarHeight
+      paddingBottom: props.sidebarConfig.mobileSidebarHeight
     }
-  },
+  }),
   content: {
     zIndex: 0,
     isolation: "isolate",
@@ -3057,6 +3072,7 @@ const PageContext = createContext({
 });
 function SidebarPage(props) {
   const [isPinned, setIsPinned] = useState(() => LocalStorage.getSidebarPinState());
+  const { sidebarConfig } = useContext(SidebarConfigContext);
   const contentRef = useRef(null);
   const pageContext = useMemo(() => ({
     content: {
@@ -3068,7 +3084,7 @@ function SidebarPage(props) {
   }, [isPinned]);
   const isMobile = useMediaQuery((theme) => theme.breakpoints.down("xs"), { noSsr: true });
   const toggleSidebarPinState = () => setIsPinned(!isPinned);
-  const classes = useStyles$o({ isPinned });
+  const classes = useStyles$o({ isPinned, sidebarConfig });
   return /* @__PURE__ */ React.createElement(SidebarPinStateContext.Provider, {
     value: {
       isPinned,
@@ -3096,18 +3112,19 @@ const useStyles$n = makeStyles((theme) => ({
     margin: theme.spacing(0, 2),
     color: theme.palette.navigation.color
   },
-  selected: {
+  selected: (props) => ({
     color: `${theme.palette.navigation.selectedColor}!important`,
-    borderTop: `solid ${sidebarConfig.selectedIndicatorWidth}px ${theme.palette.navigation.indicator}`,
+    borderTop: `solid ${props.sidebarConfig.selectedIndicatorWidth}px ${theme.palette.navigation.indicator}`,
     marginTop: "-1px"
-  },
+  }),
   label: {
     display: "none"
   }
 }));
 const MobileSidebarGroup = (props) => {
   const { to, label, icon, value } = props;
-  const classes = useStyles$n();
+  const { sidebarConfig } = useContext(SidebarConfigContext);
+  const classes = useStyles$n({ sidebarConfig });
   const location = useLocation();
   const { selectedMenuItemIndex, setSelectedMenuItemIndex } = useContext(MobileSidebarContext);
   const onChange = (_, value2) => {
@@ -3151,14 +3168,14 @@ const useStyles$m = makeStyles((theme) => ({
     zIndex: theme.zIndex.snackbar,
     borderTop: "1px solid #383838"
   },
-  overlay: {
+  overlay: (props) => ({
     background: theme.palette.navigation.background,
     width: "100%",
-    bottom: `${sidebarConfig.mobileSidebarHeight}px`,
-    height: `calc(100% - ${sidebarConfig.mobileSidebarHeight}px)`,
+    bottom: `${props.sidebarConfig.mobileSidebarHeight}px`,
+    height: `calc(100% - ${props.sidebarConfig.mobileSidebarHeight}px)`,
     flex: "0 1 auto",
     overflow: "auto"
-  },
+  }),
   overlayHeader: {
     display: "flex",
     color: theme.palette.bursts.fontColor,
@@ -3169,9 +3186,9 @@ const useStyles$m = makeStyles((theme) => ({
   overlayHeaderClose: {
     color: theme.palette.bursts.fontColor
   },
-  marginMobileSidebar: {
-    marginBottom: `${sidebarConfig.mobileSidebarHeight}px`
-  }
+  marginMobileSidebar: (props) => ({
+    marginBottom: `${props.sidebarConfig.mobileSidebarHeight}px`
+  })
 }));
 const sortSidebarGroupsForPriority = (children) => orderBy(children, ({ props: { priority } }) => Number.isInteger(priority) ? priority : -1, "desc");
 const sidebarGroupType = React.createElement(SidebarGroup).type;
@@ -3181,7 +3198,8 @@ const OverlayMenu = ({
   open,
   onClose
 }) => {
-  const classes = useStyles$m();
+  const { sidebarConfig } = useContext(SidebarConfigContext);
+  const classes = useStyles$m({ sidebarConfig });
   return /* @__PURE__ */ React.createElement(Drawer, {
     anchor: "bottom",
     open,
@@ -3208,8 +3226,9 @@ const MobileSidebarContext = createContext({
   }
 });
 const MobileSidebar = (props) => {
+  const { sidebarConfig } = useContext(SidebarConfigContext);
   const { children } = props;
-  const classes = useStyles$m();
+  const classes = useStyles$m({ sidebarConfig });
   const location = useLocation$1();
   const [selectedMenuItemIndex, setSelectedMenuItemIndex] = useState(-1);
   useEffect(() => {
@@ -3243,7 +3262,7 @@ const MobileSidebar = (props) => {
 };
 
 const useStyles$l = makeStyles((theme) => ({
-  drawer: {
+  drawer: (props) => ({
     display: "flex",
     flexFlow: "column nowrap",
     alignItems: "flex-start",
@@ -3256,7 +3275,7 @@ const useStyles$l = makeStyles((theme) => ({
     overflowX: "hidden",
     msOverflowStyle: "none",
     scrollbarWidth: "none",
-    width: sidebarConfig.drawerWidthClosed,
+    width: props.sidebarConfig.drawerWidthClosed,
     transition: theme.transitions.create("width", {
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.shortest
@@ -3267,14 +3286,14 @@ const useStyles$l = makeStyles((theme) => ({
     "&::-webkit-scrollbar": {
       display: "none"
     }
-  },
-  drawerOpen: {
-    width: sidebarConfig.drawerWidthOpen,
+  }),
+  drawerOpen: (props) => ({
+    width: props.sidebarConfig.drawerWidthOpen,
     transition: theme.transitions.create("width", {
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.shorter
     })
-  },
+  }),
   visuallyHidden: {
     top: 0,
     position: "absolute",
@@ -3286,13 +3305,14 @@ const useStyles$l = makeStyles((theme) => ({
   }
 }), { name: "BackstageSidebar" });
 const DesktopSidebar = (props) => {
+  const { sidebarConfig } = useContext(SidebarConfigContext);
   const {
     openDelayMs = sidebarConfig.defaultOpenDelayMs,
     closeDelayMs = sidebarConfig.defaultCloseDelayMs,
     disableExpandOnHover,
     children
   } = props;
-  const classes = useStyles$l();
+  const classes = useStyles$l({ sidebarConfig });
   const isSmallScreen = useMediaQuery((theme) => theme.breakpoints.down("md"), { noSsr: true });
   const [state, setState] = useState(0 /* Closed */);
   const hoverTimerRef = useRef();
@@ -3343,10 +3363,7 @@ const DesktopSidebar = (props) => {
   return /* @__PURE__ */ React.createElement("div", {
     style: {}
   }, /* @__PURE__ */ React.createElement(A11ySkipSidebar, null), /* @__PURE__ */ React.createElement(SidebarContext.Provider, {
-    value: {
-      isOpen,
-      setOpen
-    }
+    value: { isOpen, setOpen }
   }, /* @__PURE__ */ React.createElement("div", {
     className: classes.root,
     "data-testid": "sidebar-root",
@@ -3365,17 +3382,23 @@ const DesktopSidebar = (props) => {
   }, children))));
 };
 const Sidebar = (props) => {
-  const { children, openDelayMs, closeDelayMs, disableExpandOnHover } = props;
+  var _a, _b;
+  const sidebarConfig = makeSidebarConfig((_a = props.sidebarOptions) != null ? _a : {});
+  const submenuConfig = makeSidebarSubmenuConfig((_b = props.submenuOptions) != null ? _b : {});
+  const { children, disableExpandOnHover, openDelayMs, closeDelayMs } = props;
   const { isMobile } = useContext(SidebarPinStateContext);
-  return isMobile ? /* @__PURE__ */ React.createElement(MobileSidebar, null, children) : /* @__PURE__ */ React.createElement(DesktopSidebar, {
+  return isMobile ? /* @__PURE__ */ React.createElement(MobileSidebar, null, children) : /* @__PURE__ */ React.createElement(SidebarConfigContext.Provider, {
+    value: { sidebarConfig, submenuConfig }
+  }, /* @__PURE__ */ React.createElement(DesktopSidebar, {
     openDelayMs,
     closeDelayMs,
     disableExpandOnHover
-  }, children);
+  }, children));
 };
 function A11ySkipSidebar() {
+  const { sidebarConfig } = useContext(SidebarConfigContext);
   const { focusContent, contentRef } = useContent();
-  const classes = useStyles$l();
+  const classes = useStyles$l({ sidebarConfig });
   if (!(contentRef == null ? void 0 : contentRef.current)) {
     return null;
   }
@@ -3512,16 +3535,16 @@ const SidebarSubmenuItem = (props) => {
   }, title)));
 };
 
-const useStyles$j = (props) => makeStyles((theme) => {
-  var _a, _b;
-  return {
-    root: {
-      zIndex: 1e3,
-      position: "relative",
-      overflow: "visible",
-      width: theme.spacing(7) + 1
-    },
-    drawer: {
+const useStyles$j = makeStyles((theme) => ({
+  root: {
+    zIndex: 1e3,
+    position: "relative",
+    overflow: "visible",
+    width: theme.spacing(7) + 1
+  },
+  drawer: (props) => {
+    var _a, _b;
+    return {
       display: "flex",
       flexFlow: "column nowrap",
       alignItems: "flex-start",
@@ -3541,40 +3564,41 @@ const useStyles$j = (props) => makeStyles((theme) => {
       msOverflowStyle: "none",
       scrollbarWidth: "none",
       cursor: "default",
-      width: submenuConfig.drawerWidthClosed,
-      transitionDelay: `${submenuConfig.defaultOpenDelayMs}ms`,
+      width: props.submenuConfig.drawerWidthClosed,
+      transitionDelay: `${props.submenuConfig.defaultOpenDelayMs}ms`,
       "& > *": {
         flexShrink: 0
       },
       "&::-webkit-scrollbar": {
         display: "none"
       }
-    },
-    drawerOpen: {
-      width: submenuConfig.drawerWidthOpen,
-      [theme.breakpoints.down("xs")]: {
-        width: "100%",
-        position: "relative",
-        paddingLeft: theme.spacing(3),
-        left: 0,
-        top: 0
-      }
-    },
-    title: {
-      fontSize: 24,
-      fontWeight: 500,
-      color: "#FFF",
-      padding: 20,
-      [theme.breakpoints.down("xs")]: {
-        display: "none"
-      }
+    };
+  },
+  drawerOpen: (props) => ({
+    width: props.submenuConfig.drawerWidthOpen,
+    [theme.breakpoints.down("xs")]: {
+      width: "100%",
+      position: "relative",
+      paddingLeft: theme.spacing(3),
+      left: 0,
+      top: 0
     }
-  };
-}, { name: "BackstageSidebarSubmenu" });
+  }),
+  title: {
+    fontSize: 24,
+    fontWeight: 500,
+    color: "#FFF",
+    padding: 20,
+    [theme.breakpoints.down("xs")]: {
+      display: "none"
+    }
+  }
+}), { name: "BackstageSidebarSubmenu" });
 const SidebarSubmenu = (props) => {
   const { isOpen } = useContext(SidebarContext);
+  const { sidebarConfig, submenuConfig } = useContext(SidebarConfigContext);
   const left = isOpen ? sidebarConfig.drawerWidthOpen : sidebarConfig.drawerWidthClosed;
-  const classes = useStyles$j({ left })();
+  const classes = useStyles$j({ left, submenuConfig });
   const { isHoveredOn } = useContext(SidebarItemWithSubmenuContext);
   const [isSubmenuOpen, setIsSubmenuOpen] = useState(false);
   useEffect(() => {
@@ -3640,12 +3664,6 @@ const DoubleArrowRight = () => {
 
 const useStyles$g = makeStyles((theme) => {
   var _a, _b, _c, _d;
-  const {
-    selectedIndicatorWidth,
-    drawerWidthClosed,
-    drawerWidthOpen,
-    iconContainerWidth
-  } = sidebarConfig;
   return {
     root: {
       color: theme.palette.navigation.color,
@@ -3664,15 +3682,15 @@ const useStyles$g = makeStyles((theme) => {
       textAlign: "inherit",
       font: "inherit"
     },
-    closed: {
-      width: drawerWidthClosed,
+    closed: (props) => ({
+      width: props.sidebarConfig.drawerWidthClosed,
       justifyContent: "center"
-    },
-    open: {
+    }),
+    open: (props) => ({
       [theme.breakpoints.up("sm")]: {
-        width: drawerWidthOpen
+        width: props.sidebarConfig.drawerWidthOpen
       }
-    },
+    }),
     highlightable: {
       "&:hover": {
         background: (_b = (_a = theme.palette.navigation.navItem) == null ? void 0 : _a.hoverBackground) != null ? _b : "#404040"
@@ -3690,15 +3708,15 @@ const useStyles$g = makeStyles((theme) => {
       overflow: "hidden",
       "text-overflow": "ellipsis"
     },
-    iconContainer: {
+    iconContainer: (props) => ({
       boxSizing: "border-box",
       height: "100%",
-      width: iconContainerWidth,
+      width: props.sidebarConfig.iconContainerWidth,
       marginRight: -theme.spacing(2),
       display: "flex",
       alignItems: "center",
       justifyContent: "center"
-    },
+    }),
     searchRoot: {
       marginBottom: 12
     },
@@ -3710,9 +3728,9 @@ const useStyles$g = makeStyles((theme) => {
     searchFieldHTMLInput: {
       padding: theme.spacing(2, 0, 2)
     },
-    searchContainer: {
-      width: drawerWidthOpen - iconContainerWidth
-    },
+    searchContainer: (props) => ({
+      width: props.sidebarConfig.drawerWidthOpen - props.sidebarConfig.iconContainerWidth
+    }),
     secondaryAction: {
       width: theme.spacing(6),
       textAlign: "center",
@@ -3738,21 +3756,21 @@ const useStyles$g = makeStyles((theme) => {
       position: "absolute",
       right: 10
     },
-    selected: {
+    selected: (props) => ({
       "&$root": {
-        borderLeft: `solid ${selectedIndicatorWidth}px ${theme.palette.navigation.indicator}`,
+        borderLeft: `solid ${props.sidebarConfig.selectedIndicatorWidth}px ${theme.palette.navigation.indicator}`,
         color: theme.palette.navigation.selectedColor
       },
       "&$closed": {
-        width: drawerWidthClosed
+        width: props.sidebarConfig.drawerWidthClosed
       },
       "& $closedItemIcon": {
-        paddingRight: selectedIndicatorWidth
+        paddingRight: props.sidebarConfig.selectedIndicatorWidth
       },
       "& $iconContainer": {
-        marginLeft: -selectedIndicatorWidth
+        marginLeft: -props.sidebarConfig.selectedIndicatorWidth
       }
-    }
+    })
   };
 }, { name: "BackstageSidebarItem" });
 const useLocationMatch = (submenu, location) => useElementFilter(submenu.props.children, (elements) => {
@@ -3821,7 +3839,8 @@ const SidebarItemBase = forwardRef((props, ref) => {
     className,
     ...navLinkProps
   } = props;
-  const classes = useStyles$g();
+  const { sidebarConfig } = useContext(SidebarConfigContext);
+  const classes = useStyles$g({ sidebarConfig });
   const { isOpen } = useContext(SidebarContext);
   const itemIcon = /* @__PURE__ */ React.createElement(Badge, {
     color: "secondary",
@@ -3866,7 +3885,8 @@ const SidebarItemWithSubmenu = ({
   children,
   ...props
 }) => {
-  const classes = useStyles$g();
+  const { sidebarConfig } = useContext(SidebarConfigContext);
+  const classes = useStyles$g({ sidebarConfig });
   const [isHoveredOn, setIsHoveredOn] = useState(false);
   const location = useLocation();
   const isActive = useLocationMatch(children, location);
@@ -3921,8 +3941,9 @@ const SidebarItem = forwardRef((props, ref) => {
   });
 });
 function SidebarSearchField(props) {
+  const { sidebarConfig } = useContext(SidebarConfigContext);
   const [input, setInput] = useState("");
-  const classes = useStyles$g();
+  const classes = useStyles$g({ sidebarConfig });
   const Icon = props.icon ? props.icon : SearchIcon;
   const search = () => {
     props.onSearch(input);
@@ -4006,7 +4027,8 @@ const SidebarScrollWrapper = styled("div")(({ theme }) => {
   };
 });
 const SidebarExpandButton = () => {
-  const classes = useStyles$g();
+  const { sidebarConfig } = useContext(SidebarConfigContext);
+  const classes = useStyles$g({ sidebarConfig });
   const { isOpen, setOpen } = useContext(SidebarContext);
   const isSmallScreen = useMediaQuery((theme) => theme.breakpoints.down("md"), { noSsr: true });
   if (isSmallScreen) {
@@ -4026,15 +4048,15 @@ const SidebarExpandButton = () => {
 };
 
 const useStyles$f = makeStyles((theme) => ({
-  introCard: {
+  introCard: (props) => ({
     color: "#b5b5b5",
     fontSize: 12,
-    width: sidebarConfig.drawerWidthOpen,
+    width: props.sidebarConfig.drawerWidthOpen,
     marginTop: 18,
     marginBottom: 12,
-    paddingLeft: sidebarConfig.iconPadding,
-    paddingRight: sidebarConfig.iconPadding
-  },
+    paddingLeft: props.sidebarConfig.iconPadding,
+    paddingRight: props.sidebarConfig.iconPadding
+  }),
   introDismiss: {
     display: "flex",
     justifyContent: "flex-end",
@@ -4067,7 +4089,8 @@ const useStyles$f = makeStyles((theme) => ({
   }
 }), { name: "BackstageSidebarIntro" });
 function IntroCard(props) {
-  const classes = useStyles$f();
+  const { sidebarConfig } = useContext(SidebarConfigContext);
+  const classes = useStyles$f({ sidebarConfig });
   const { text, onClose } = props;
   const handleClose = () => onClose();
   return /* @__PURE__ */ React.createElement("div", {
@@ -4814,12 +4837,12 @@ const useStyles$b = makeStyles((theme) => ({
       color: theme.palette.textSubtle
     }
   }
-}));
+}), { name: "BackstageTab" });
 const StyledTab = (props) => {
   const classes = useStyles$b(props);
   const { isFirstNav, isFirstIndex, ...rest } = props;
   return /* @__PURE__ */ React.createElement(Tab, {
-    className: classes.root,
+    classes,
     disableRipple: true,
     ...rest
   });