@backstage/core-components 0.7.2 → 0.7.3

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @backstage/core-components
 
+## 0.7.3
+
+### Patch Changes
+
+- c11a37710a: Added a warning variant to `DismissableBanner` component. If you are using a
+  custom theme, you will need to add the optional `palette.banner.warning` color,
+  otherwise this variant will fall back to the `palette.banner.error` color.
+- 5826c17b7d: Allow for `cellStyle` property on `TableColumn` to be a function as well as `React.CSSProperties` as per the Material UI Table component
+- e0861b92ff: Add new way to override color selection to progress bar/gauge components.
+
+  `Gauge`, `LinearGauge` and `GaugeCard` all accept a `getColor` prop,
+  which is a function of the type:
+
+  ```ts
+  export type GaugePropsGetColor = (args: {
+    palette: Palette;
+    value: number;
+    inverse?: boolean;
+    max?: number;
+  }) => string;
+  ```
+
+  Return a standard CSS color string (e.g. "red", "#f02020"), and the gauge will
+  be set to that color.
+
+  If the prop is omitted, the default implementation is unchanged from previous
+  versions.
+
+- 021986e8a3: fixed route resolving (issue #7741) when user cannot select a tab in any of the tabbed pages (like the Catalog page) if it shares the same initial letters as a preceding tab. (i.e. where tab with a path of /ci is followed by a path of /ci-2, user cannot select /ci-2 as /ci will always be selected first).
+- a39a2105ef: Add Theme Overrides for Sidebar
+- Updated dependencies
+  - @backstage/theme@0.2.13
+  - @backstage/core-plugin-api@0.1.13
+
 ## 0.7.2
 
 ### Patch Changes

package/dist/index.d.ts

@@ -9,6 +9,7 @@ import { TooltipProps } from '@material-ui/core/Tooltip';
 import { TextTruncateProps } from 'react-text-truncate';
 import { LinearProgressProps } from '@material-ui/core/LinearProgress';
 import { CardHeaderProps } from '@material-ui/core/CardHeader';
+import { BackstagePalette, BackstageTheme } from '@backstage/theme';
 import { TabProps as TabProps$1 } from '@material-ui/core/Tab';
 import { Column, MaterialTableProps } from '@material-table/core';
 import { SparklinesProps, SparklinesLineProps } from 'react-sparklines';
@@ -16,7 +17,6 @@ import { IconComponent, ApiRef, ProfileInfoApi, BackstageIdentityApi, SessionApi
 import * as _material_ui_styles from '@material-ui/styles';
 import * as _material_ui_core_styles from '@material-ui/core/styles';
 import { WithStyles, Theme } from '@material-ui/core/styles';
-import { BackstageTheme } from '@backstage/theme';
 import MaterialBreadcrumbs from '@material-ui/core/Breadcrumbs';
 import { Overrides } from '@material-ui/core/styles/overrides';
 import { StyleRules } from '@material-ui/core/styles/withStyles';
@@ -507,34 +507,34 @@ declare type DismissableBannerClassKey = 'root' | 'topPosition' | 'icon' | 'cont
  * @deprecated This type contained a typo, please use DismissableBannerClassKey instead
  */
 declare type DismissbleBannerClassKey = DismissableBannerClassKey;
-declare type Props$k = {
-    variant: 'info' | 'error';
+declare type Props$j = {
+    variant: 'info' | 'error' | 'warning';
     message: ReactNode;
     id: string;
     fixed?: boolean;
 };
 /** @public */
-declare const DismissableBanner: (props: Props$k) => JSX.Element;
+declare const DismissableBanner: (props: Props$j) => JSX.Element;
 
 /** @public */
 declare type EmptyStateClassKey = 'root' | 'action' | 'imageContainer';
-declare type Props$j = {
+declare type Props$i = {
     title: string;
     description?: string | JSX.Element;
     missing: 'field' | 'info' | 'content' | 'data';
     action?: JSX.Element;
 };
 /** @public */
-declare function EmptyState(props: Props$j): JSX.Element;
+declare function EmptyState(props: Props$i): JSX.Element;
 
 /** @public */
 declare type EmptyStateImageClassKey = 'generalImg';
 
-declare type Props$i = {
+declare type Props$h = {
     annotation: string;
 };
 declare type MissingAnnotationEmptyStateClassKey = 'code';
-declare function MissingAnnotationEmptyState(props: Props$i): JSX.Element;
+declare function MissingAnnotationEmptyState(props: Props$h): JSX.Element;
 
 /** @public */
 declare type ErrorPanelClassKey = 'text' | 'divider';
@@ -562,13 +562,13 @@ declare function ResponseErrorPanel(props: ErrorPanelProps): JSX.Element;
 
 /** @public */
 declare type FeatureCalloutCircleClassKey = '@keyframes pulsateSlightly' | '@keyframes pulsateAndFade' | 'featureWrapper' | 'backdrop' | 'dot' | 'pulseCircle' | 'text';
-declare type Props$h = {
+declare type Props$g = {
     featureId: string;
     title: string;
     description: string;
 };
 /** @public */
-declare function FeatureCalloutCircular(props: PropsWithChildren<Props$h>): JSX.Element;
+declare function FeatureCalloutCircular(props: PropsWithChildren<Props$g>): JSX.Element;
 
 declare type IconLinkVerticalProps = {
     color?: 'primary' | 'secondary';
@@ -584,13 +584,13 @@ declare type IconLinkVerticalClassKey = 'link' | 'disabled' | 'primary' | 'secon
 
 /** @public */
 declare type HeaderIconLinkRowClassKey = 'links';
-declare type Props$g = {
+declare type Props$f = {
     links: IconLinkVerticalProps[];
 };
 /** @public */
-declare function HeaderIconLinkRow(props: Props$g): JSX.Element;
+declare function HeaderIconLinkRow(props: Props$f): JSX.Element;
 
-declare type Props$f = {
+declare type Props$e = {
     scrollStep?: number;
     scrollSpeed?: number;
     minScrollDistance?: number;
@@ -598,17 +598,17 @@ declare type Props$f = {
 /** @public */
 declare type HorizontalScrollGridClassKey = 'root' | 'container' | 'fade' | 'fadeLeft' | 'fadeRight' | 'fadeHidden' | 'button' | 'buttonLeft' | 'buttonRight';
 /** @public */
-declare function HorizontalScrollGrid(props: PropsWithChildren<Props$f>): JSX.Element;
+declare function HorizontalScrollGrid(props: PropsWithChildren<Props$e>): JSX.Element;
 
-declare type Props$e = CSS.Properties & {
+declare type Props$d = CSS.Properties & {
     shorthand?: boolean;
     alpha?: boolean;
 };
 declare type LifecycleClassKey = 'alpha' | 'beta';
-declare function Lifecycle(props: Props$e): JSX.Element;
+declare function Lifecycle(props: Props$d): JSX.Element;
 
 declare type MarkdownContentClassKey = 'markdown';
-declare type Props$d = {
+declare type Props$c = {
     content: string;
     dialect?: 'gfm' | 'common-mark';
 };
@@ -618,14 +618,14 @@ declare type Props$d = {
  * Renders markdown with the default dialect [gfm - GitHub flavored Markdown](https://github.github.com/gfm/) to backstage theme styled HTML.
  * If you just want to render to plain [CommonMark](https://commonmark.org/), set the dialect to `'common-mark'`
  */
-declare function MarkdownContent(props: Props$d): JSX.Element;
+declare function MarkdownContent(props: Props$c): JSX.Element;
 
 declare type OAuthRequestDialogClassKey = 'dialog' | 'title' | 'contentList' | 'actionButtons';
 declare function OAuthRequestDialog(_props: {}): JSX.Element;
 
 declare type LoginRequestListItemClassKey = 'root';
 
-declare type Props$c = {
+declare type Props$b = {
     text: TextTruncateProps['text'];
     line?: TextTruncateProps['line'];
     element?: TextTruncateProps['element'];
@@ -633,7 +633,7 @@ declare type Props$c = {
     placement?: TooltipProps['placement'];
 };
 declare type OverflowTooltipClassKey = 'container';
-declare function OverflowTooltip(props: Props$c): JSX.Element;
+declare function OverflowTooltip(props: Props$b): JSX.Element;
 
 declare function Progress(props: PropsWithChildren<LinearProgressProps>): JSX.Element;
 
@@ -688,7 +688,7 @@ declare type InfoCardVariants = 'flex' | 'fullHeight' | 'gridItem';
  *
  * `<InfoCard variant="gridItem">...</InfoCard>`
  */
-declare type Props$b = {
+declare type Props$a = {
     title?: ReactNode;
     subheader?: ReactNode;
     divider?: boolean;
@@ -710,9 +710,32 @@ declare type Props$b = {
     titleTypographyProps?: object;
 };
 /** @public */
-declare function InfoCard(props: Props$b): JSX.Element;
+declare function InfoCard(props: Props$a): JSX.Element;
 
-declare type Props$a = {
+/** @public */
+declare type GaugeClassKey = 'root' | 'overlay' | 'circle' | 'colorUnknown';
+/** @public */
+declare type GaugeProps = {
+    value: number;
+    fractional?: boolean;
+    inverse?: boolean;
+    unit?: string;
+    max?: number;
+    getColor?: GaugePropsGetColor;
+};
+/** @public */
+declare type GaugePropsGetColorOptions = {
+    palette: BackstagePalette;
+    value: number;
+    inverse?: boolean;
+    max?: number;
+};
+/** @public */
+declare type GaugePropsGetColor = (args: GaugePropsGetColorOptions) => string;
+/** @public */
+declare function Gauge(props: GaugeProps): JSX.Element;
+
+declare type Props$9 = {
     title: string;
     subheader?: string;
     variant?: InfoCardVariants;
@@ -720,29 +743,19 @@ declare type Props$a = {
     progress: number;
     inverse?: boolean;
     deepLink?: BottomLinkProps;
+    getColor?: GaugePropsGetColor;
 };
 /** @public */
 declare type GaugeCardClassKey = 'root';
 /** @public */
-declare function GaugeCard(props: Props$a): JSX.Element;
-
-/** @public */
-declare type GaugeClassKey = 'root' | 'overlay' | 'circle' | 'colorUnknown';
-declare type Props$9 = {
-    value: number;
-    fractional?: boolean;
-    inverse?: boolean;
-    unit?: string;
-    max?: number;
-};
-/** @public */
-declare function Gauge(props: Props$9): JSX.Element;
+declare function GaugeCard(props: Props$9): JSX.Element;
 
 declare type Props$8 = {
     /**
      * Progress value between 0.0 - 1.0.
      */
     value: number;
+    getColor?: GaugePropsGetColor;
 };
 declare function LinearGauge(props: Props$8): JSX.Element | null;
 
@@ -1420,4 +1433,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, ActualButton as 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, 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, ActualLink as Link, LinkProps, LoginRequestListItemClassKey, MarkdownContent, MarkdownContentClassKey, MetadataTableCellClassKey, MetadataTableListClassKey, MetadataTableListItemClassKey, MetadataTableTitleCellClassKey, MicDropClassKey, MissingAnnotationEmptyState, MissingAnnotationEmptyStateClassKey, OAuthRequestDialog, OAuthRequestDialogClassKey, OpenedDropdownClassKey, OverflowTooltip, OverflowTooltipClassKey, Page, PageClassKey, PageWithHeader, Progress, ResponseErrorPanel, ResponseErrorPanelClassKey, RoutedTabs, SIDEBAR_INTRO_LOCAL_STORAGE, SelectComponent as Select, SelectClassKey, SelectInputBaseClassKey, Sidebar, SidebarClassKey, SidebarContext, SidebarContextType, SidebarDivider, SidebarIntro, SidebarIntroClassKey, SidebarItem, SidebarItemClassKey, SidebarPage, SidebarPageClassKey, SidebarPinStateContext, SidebarPinStateContextType, SidebarScrollWrapper, SidebarSearchField, SidebarSpace, SidebarSpacer, 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, WarningIcon, WarningPanel, WarningPanelClassKey, sidebarConfig, useQueryParamState, useSupportConfig };
+export { AlertDisplay, Avatar, AvatarClassKey, AvatarProps, BackstageContentClassKey, BackstageOverrides, BoldHeaderClassKey, BottomLink, BottomLinkClassKey, BottomLinkProps, Breadcrumbs, BreadcrumbsClickableTextClassKey, BreadcrumbsStyledBoxClassKey, BrokenImageIcon, ActualButton as 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, ActualLink as Link, LinkProps, LoginRequestListItemClassKey, MarkdownContent, MarkdownContentClassKey, MetadataTableCellClassKey, MetadataTableListClassKey, MetadataTableListItemClassKey, MetadataTableTitleCellClassKey, MicDropClassKey, MissingAnnotationEmptyState, MissingAnnotationEmptyStateClassKey, OAuthRequestDialog, OAuthRequestDialogClassKey, OpenedDropdownClassKey, OverflowTooltip, OverflowTooltipClassKey, Page, PageClassKey, PageWithHeader, Progress, ResponseErrorPanel, ResponseErrorPanelClassKey, RoutedTabs, SIDEBAR_INTRO_LOCAL_STORAGE, SelectComponent as Select, SelectClassKey, SelectInputBaseClassKey, Sidebar, SidebarClassKey, SidebarContext, SidebarContextType, SidebarDivider, SidebarIntro, SidebarIntroClassKey, SidebarItem, SidebarItemClassKey, SidebarPage, SidebarPageClassKey, SidebarPinStateContext, SidebarPinStateContextType, SidebarScrollWrapper, SidebarSearchField, SidebarSpace, SidebarSpacer, 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, WarningIcon, WarningPanel, WarningPanelClassKey, sidebarConfig, useQueryParamState, useSupportConfig };

package/dist/index.esm.js

@@ -711,43 +711,49 @@ function DependencyGraph(props) {
   }))));
 }
 
-const useStyles$H = makeStyles((theme) => ({
-  root: {
-    padding: theme.spacing(0),
-    marginBottom: theme.spacing(0),
-    marginTop: theme.spacing(0),
-    display: "flex",
-    flexFlow: "row nowrap"
-  },
-  topPosition: {
-    position: "relative",
-    marginBottom: theme.spacing(6),
-    marginTop: -theme.spacing(3),
-    zIndex: "unset"
-  },
-  icon: {
-    fontSize: 20
-  },
-  content: {
-    width: "100%",
-    maxWidth: "inherit",
-    flexWrap: "nowrap"
-  },
-  message: {
-    display: "flex",
-    alignItems: "center",
-    color: theme.palette.banner.text,
-    "& a": {
-      color: theme.palette.banner.link
+const useStyles$H = makeStyles((theme) => {
+  var _a;
+  return {
+    root: {
+      padding: theme.spacing(0),
+      marginBottom: theme.spacing(0),
+      marginTop: theme.spacing(0),
+      display: "flex",
+      flexFlow: "row nowrap"
+    },
+    topPosition: {
+      position: "relative",
+      marginBottom: theme.spacing(6),
+      marginTop: -theme.spacing(3),
+      zIndex: "unset"
+    },
+    icon: {
+      fontSize: 20
+    },
+    content: {
+      width: "100%",
+      maxWidth: "inherit",
+      flexWrap: "nowrap"
+    },
+    message: {
+      display: "flex",
+      alignItems: "center",
+      color: theme.palette.banner.text,
+      "& a": {
+        color: theme.palette.banner.link
+      }
+    },
+    info: {
+      backgroundColor: theme.palette.banner.info
+    },
+    error: {
+      backgroundColor: theme.palette.banner.error
+    },
+    warning: {
+      backgroundColor: (_a = theme.palette.banner.warning) != null ? _a : theme.palette.banner.error
     }
-  },
-  info: {
-    backgroundColor: theme.palette.banner.info
-  },
-  error: {
-    backgroundColor: theme.palette.banner.error
-  }
-}), {name: "BackstageDismissableBanner"});
+  };
+}, {name: "BackstageDismissableBanner"});
 const DismissableBanner = (props) => {
   var _a;
   const {variant, message, id, fixed = false} = props;
@@ -1988,17 +1994,22 @@ const useStyles$r = makeStyles((theme) => ({
   },
   colorUnknown: {}
 }), {name: "BackstageGauge"});
-const defaultProps = {
+const defaultGaugeProps = {
   fractional: true,
   inverse: false,
   unit: "%",
   max: 100
 };
-function getProgressColor(palette, value, inverse, max) {
+const getProgressColor = ({
+  palette,
+  value,
+  inverse,
+  max
+}) => {
   if (isNaN(value)) {
     return "#ddd";
   }
-  const actualMax = max ? max : defaultProps.max;
+  const actualMax = max ? max : defaultGaugeProps.max;
   const actualValue = inverse ? actualMax - value : value;
   if (actualValue < actualMax / 3) {
     return palette.status.error;
@@ -2006,12 +2017,13 @@ function getProgressColor(palette, value, inverse, max) {
     return palette.status.warning;
   }
   return palette.status.ok;
-}
+};
 function Gauge(props) {
+  const {getColor = getProgressColor} = props;
   const classes = useStyles$r(props);
-  const theme = useTheme();
+  const {palette} = useTheme();
   const {value, fractional, inverse, unit, max} = {
-    ...defaultProps,
+    ...defaultGaugeProps,
     ...props
   };
   const asPercentage = fractional ? Math.round(value * max) : value;
@@ -2023,7 +2035,7 @@ function Gauge(props) {
     percent: asPercentage,
     strokeWidth: 12,
     trailWidth: 12,
-    strokeColor: getProgressColor(theme.palette, asActual, inverse, max),
+    strokeColor: getColor({palette, value: asActual, inverse, max}),
     className: classes.circle
   }), /* @__PURE__ */ React.createElement("div", {
     className: classes.overlay
@@ -2038,7 +2050,12 @@ const useStyles$q = makeStyles({
 }, {name: "BackstageGaugeCard"});
 function GaugeCard(props) {
   const classes = useStyles$q(props);
-  const {title, subheader, progress, inverse, deepLink, variant} = props;
+  const {title, subheader, progress, inverse, deepLink, variant, getColor} = props;
+  const gaugeProps = {
+    inverse,
+    getColor,
+    value: progress
+  };
   return /* @__PURE__ */ React.createElement("div", {
     className: classes.root
   }, /* @__PURE__ */ React.createElement(InfoCard, {
@@ -2047,14 +2064,13 @@ function GaugeCard(props) {
     deepLink,
     variant
   }, /* @__PURE__ */ React.createElement(Gauge, {
-    value: progress,
-    inverse
+    ...gaugeProps
   })));
 }
 
 function LinearGauge(props) {
-  const {value} = props;
-  const theme = useTheme();
+  const {value, getColor = getProgressColor} = props;
+  const {palette} = useTheme();
   if (isNaN(value)) {
     return null;
   }
@@ -2062,7 +2078,12 @@ function LinearGauge(props) {
   if (percent > 100) {
     percent = 100;
   }
-  const strokeColor = getProgressColor(theme.palette, percent, false, 100);
+  const strokeColor = getColor({
+    palette,
+    value: percent,
+    inverse: false,
+    max: 100
+  });
   return /* @__PURE__ */ React.createElement(Tooltip, {
     title: `${percent}%`
   }, /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement(Line, {
@@ -2963,8 +2984,9 @@ function useSelectedSubRoute(subRoutes) {
     path: `${path}/*`,
     element: children
   }));
-  const element = (_a = useRoutes(routes)) != null ? _a : subRoutes[0].children;
-  const [matchedRoute] = (_b = matchRoutes(routes, `/${params["*"]}`)) != null ? _b : [];
+  const sortedRoutes = routes.sort((a, b) => b.path.replace(/\/\*$/, "").localeCompare(a.path.replace(/\/\*$/, "")));
+  const element = (_a = useRoutes(sortedRoutes)) != null ? _a : subRoutes[0].children;
+  const [matchedRoute] = (_b = matchRoutes(sortedRoutes, `/${params["*"]}`)) != null ? _b : [];
   const foundIndex = matchedRoute ? subRoutes.findIndex((t) => `${t.path}/*` === matchedRoute.route.path) : 0;
   return {
     index: foundIndex === -1 ? 0 : foundIndex,
@@ -3231,10 +3253,18 @@ const useTableStyles = makeStyles(() => ({
 function convertColumns(columns, theme) {
   return columns.map((column) => {
     const headerStyle = {};
-    const cellStyle = typeof column.cellStyle === "object" ? column.cellStyle : {};
+    let cellStyle = column.cellStyle || {};
     if (column.highlight) {
       headerStyle.color = theme.palette.textContrast;
-      cellStyle.fontWeight = theme.typography.fontWeightBold;
+      if (typeof cellStyle === "object") {
+        cellStyle.fontWeight = theme.typography.fontWeightBold;
+      } else {
+        const cellStyleFn = cellStyle;
+        cellStyle = (data, rowData, rowColumn) => {
+          const style = cellStyleFn(data, rowData, rowColumn);
+          return {...style, fontWeight: theme.typography.fontWeightBold};
+        };
+      }
     }
     return {
       ...column,
@@ -4603,17 +4633,17 @@ function SidebarSearchField(props) {
 }
 const SidebarSpace = styled("div")({
   flex: 1
-});
+}, {name: "BackstageSidebarSpace"});
 const SidebarSpacer = styled("div")({
   height: 8
-});
+}, {name: "BackstageSidebarSpacer"});
 const SidebarDivider = styled("hr")({
   height: 1,
   width: "100%",
   background: "#383838",
   border: "none",
   margin: "12px 0px"
-});
+}, {name: "BackstageSidebarDivider"});
 const styledScrollbar = (theme) => ({
   overflowY: "auto",
   "&::-webkit-scrollbar": {