@backstage/core-components 0.8.5 → 0.8.7

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @backstage/core-components
 
+## 0.8.7
+
+### Patch Changes
+
+- f7257dff6f: The `<Link />` component now accepts a `noTrack` prop, which prevents the `click` event from being captured by the Analytics API. This can be used if tracking is explicitly not warranted, or in order to use custom link tracking in specific situations.
+- 4c773ed25c: Change subtitle of Header style to use palette.bursts.fontColor
+- f465b63b7f: Fix an issue where changes related to the `MobileSidebar` prevented scrolling pages. Additionally improve the menu of the `MobileSidebar` to not overlay the `BottomNavigation`.
+- 064e750a50: Adding hover message to the Gauge and an info icon to the GaugeCard.
+- a681cb9c2f: Make linkTarget configurable for MarkdownContent component
+
+## 0.8.7-next.1
+
+### Patch Changes
+
+- f7257dff6f: The `<Link />` component now accepts a `noTrack` prop, which prevents the `click` event from being captured by the Analytics API. This can be used if tracking is explicitly not warranted, or in order to use custom link tracking in specific situations.
+
+## 0.8.7-next.0
+
+### Patch Changes
+
+- 4c773ed25c: Change subtitle of Header style to use palette.bursts.fontColor
+- f465b63b7f: Fix an issue where changes related to the `MobileSidebar` prevented scrolling pages. Additionally improve the menu of the `MobileSidebar` to not overlay the `BottomNavigation`.
+- a681cb9c2f: Make linkTarget configurable for MarkdownContent component
+
+## 0.8.6
+
+### Patch Changes
+
+- b97a2460d5: Remove the `ignoreChildEvent` utility from the sidebar component to avoid conflicts with popovers
+- bdc53553eb: chore(deps): bump `react-text-truncate` from 0.16.0 to 0.17.0
+- 05f0f44180: chore(deps): bump `remark-gfm` from 2.0.0 to 3.0.1
+- 15bac1d738: chore(deps): bump `react-markdown` from 7.1.2 to 8.0.0
+- 7346b5fb96: chore(deps): bump `rc-progress` from 3.1.4 to 3.2.4
+- 9abb28bb22: Fix issue where component types are not recognized causing the `MobileSidebar` to not render as intended.
+- 1787694435: Updates styling of Header component by removing flex wrap and add max width of characters for subtitle
+
 ## 0.8.5
 
 ### Patch Changes

package/dist/index.d.ts

@@ -5,6 +5,7 @@ import { ButtonProps as ButtonProps$1 } from '@material-ui/core/Button';
 import { LinkProps as LinkProps$1 } from '@material-ui/core/Link';
 import { LinkProps as LinkProps$2, NavLinkProps } from 'react-router-dom';
 import CSS from 'csstype';
+import { Options } from 'react-markdown';
 import { TooltipProps } from '@material-ui/core/Tooltip';
 import { TextTruncateProps } from 'react-text-truncate';
 import { LinearProgressProps } from '@material-ui/core/LinearProgress';
@@ -65,13 +66,14 @@ declare function Avatar(props: AvatarProps): JSX.Element;
 
 declare type LinkProps = LinkProps$1 & LinkProps$2 & {
     component?: ElementType<any>;
+    noTrack?: boolean;
 };
 /**
  * Thin wrapper on top of material-ui's Link component, which...
  * - Makes the Link use react-router
  * - Captures Link clicks as analytics events.
  */
-declare const ActualLink: React__default.ForwardRefExoticComponent<Pick<LinkProps, "replace" | "type" | "key" | "id" | "media" | "state" | "color" | "display" | "translate" | "hidden" | "dir" | "slot" | "style" | "title" | "target" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | "contentEditable" | "inputMode" | "tabIndex" | "underline" | "download" | "href" | "hrefLang" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "to" | "rel" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "ping" | "referrerPolicy" | "align" | "variant" | "component" | "classes" | "innerRef" | "noWrap" | "gutterBottom" | "paragraph" | "variantMapping" | "TypographyClasses"> & React__default.RefAttributes<any>>;
+declare const ActualLink: React__default.ForwardRefExoticComponent<Pick<LinkProps, "replace" | "type" | "key" | "id" | "media" | "state" | "color" | "display" | "translate" | "hidden" | "dir" | "slot" | "style" | "title" | "target" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | "contentEditable" | "inputMode" | "tabIndex" | "underline" | "download" | "href" | "hrefLang" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "to" | "rel" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "ping" | "referrerPolicy" | "align" | "variant" | "component" | "classes" | "innerRef" | "noWrap" | "gutterBottom" | "paragraph" | "variantMapping" | "noTrack" | "TypographyClasses"> & React__default.RefAttributes<any>>;
 
 /**
  * Properties for {@link Button}
@@ -669,6 +671,7 @@ declare type MarkdownContentClassKey = 'markdown';
 declare type Props$b = {
     content: string;
     dialect?: 'gfm' | 'common-mark';
+    linkTarget?: Options['linkTarget'];
 };
 /**
  * MarkdownContent
@@ -763,6 +766,7 @@ declare type Props$9 = {
     children?: ReactNode;
     headerStyle?: object;
     headerProps?: CardHeaderProps;
+    icon?: ReactNode;
     action?: ReactNode;
     actionsClassName?: string;
     actions?: ReactNode;
@@ -781,7 +785,7 @@ declare type Props$9 = {
 declare function InfoCard(props: Props$9): JSX.Element;
 
 /** @public */
-declare type GaugeClassKey = 'root' | 'overlay' | 'circle' | 'colorUnknown';
+declare type GaugeClassKey = 'root' | 'overlay' | 'description' | 'circle' | 'colorUnknown';
 /** @public */
 declare type GaugeProps = {
     value: number;
@@ -789,6 +793,7 @@ declare type GaugeProps = {
     inverse?: boolean;
     unit?: string;
     max?: number;
+    description?: ReactNode;
     getColor?: GaugePropsGetColor;
 };
 /** @public */
@@ -814,6 +819,8 @@ declare type Props$8 = {
     variant?: InfoCardVariants;
     /** Progress in % specified as decimal, e.g. "0.23" */
     progress: number;
+    description?: ReactNode;
+    icon?: ReactNode;
     inverse?: boolean;
     deepLink?: BottomLinkProps;
     getColor?: GaugePropsGetColor;
@@ -1332,8 +1339,9 @@ declare function ItemCardHeader(props: ItemCardHeaderProps): JSX.Element;
 declare type PageClassKey = 'root';
 declare type Props$3 = {
     themeId: string;
+    children?: React__default.ReactNode;
 };
-declare function Page(props: PropsWithChildren<Props$3>): JSX.Element;
+declare function Page(props: Props$3): JSX.Element;
 
 declare type PageWithHeaderProps = ComponentProps<typeof Header> & {
     themeId: string;

package/dist/index.esm.js

@@ -220,7 +220,7 @@ const getNodeText = (node) => {
   }
   return "";
 };
-const ActualLink = React.forwardRef(({ onClick, ...props }, ref) => {
+const ActualLink = React.forwardRef(({ onClick, noTrack, ...props }, ref) => {
   const analytics = useAnalytics();
   const to = String(props.to);
   const linkText = getNodeText(props.children) || to;
@@ -228,7 +228,9 @@ const ActualLink = React.forwardRef(({ onClick, ...props }, ref) => {
   const newWindow = external && !!/^https?:/.exec(to);
   const handleClick = (event) => {
     onClick == null ? void 0 : onClick(event);
-    analytics.captureEvent("click", linkText, { attributes: { to } });
+    if (!noTrack) {
+      analytics.captureEvent("click", linkText, { attributes: { to } });
+    }
   };
   return external ? /* @__PURE__ */ React.createElement(Link, {
     ref,
@@ -1673,13 +1675,14 @@ const components = {
   }
 };
 function MarkdownContent(props) {
-  const { content, dialect = "gfm" } = props;
+  const { content, dialect = "gfm", linkTarget } = props;
   const classes = useStyles$C();
   return /* @__PURE__ */ React.createElement(ReactMarkdown, {
     remarkPlugins: dialect === "gfm" ? [gfm] : [],
     className: classes.markdown,
     children: content,
-    components
+    components,
+    linkTarget
   });
 }
 
@@ -1897,7 +1900,10 @@ const useStyles$y = makeStyles((theme) => ({
   },
   headerAvatar: {},
   headerAction: {},
-  headerContent: {}
+  headerContent: {},
+  subheader: {
+    display: "flex"
+  }
 }), { name: "BackstageInfoCard" });
 const CardActionsTopRight = withStyles((theme) => ({
   root: {
@@ -1945,6 +1951,7 @@ function InfoCard(props) {
     children,
     headerStyle,
     headerProps,
+    icon,
     action,
     actionsClassName,
     actions,
@@ -1970,6 +1977,13 @@ function InfoCard(props) {
       };
     });
   }
+  const cardSubTitle = () => {
+    return /* @__PURE__ */ React.createElement("div", {
+      className: classes.headerSubheader
+    }, subheader && /* @__PURE__ */ React.createElement("div", {
+      className: classes.subheader
+    }, subheader), icon);
+  };
   const errProps = errorBoundaryProps || (slackChannel ? { slackChannel } : {});
   return /* @__PURE__ */ React.createElement(Card, {
     style: calculatedStyle,
@@ -1986,7 +2000,7 @@ function InfoCard(props) {
       content: classes.headerContent
     },
     title,
-    subheader,
+    subheader: cardSubTitle(),
     action,
     style: { ...headerStyle },
     titleTypographyProps,
@@ -2017,6 +2031,15 @@ const useStyles$x = makeStyles((theme) => ({
     fontWeight: "bold",
     color: theme.palette.textContrast
   },
+  description: {
+    fontSize: "100%",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    position: "absolute",
+    wordBreak: "break-all",
+    display: "inline-block"
+  },
   circle: {
     width: "80%",
     transform: "translate(10%, 0)"
@@ -2048,16 +2071,35 @@ const getProgressColor = ({
   return palette.status.ok;
 };
 function Gauge(props) {
+  const [hoverRef, setHoverRef] = useState(null);
   const { getColor = getProgressColor } = props;
   const classes = useStyles$x(props);
   const { palette } = useTheme();
-  const { value, fractional, inverse, unit, max } = {
+  const { value, fractional, inverse, unit, max, description } = {
     ...defaultGaugeProps,
     ...props
   };
   const asPercentage = fractional ? Math.round(value * max) : value;
   const asActual = max !== 100 ? Math.round(value) : asPercentage;
+  const [isHovering, setIsHovering] = useState(false);
+  useEffect(() => {
+    const node = hoverRef;
+    const handleMouseOver = () => setIsHovering(true);
+    const handleMouseOut = () => setIsHovering(false);
+    if (node && description) {
+      node.addEventListener("mouseenter", handleMouseOver);
+      node.addEventListener("mouseleave", handleMouseOut);
+      return () => {
+        node.removeEventListener("mouseenter", handleMouseOver);
+        node.removeEventListener("mouseleave", handleMouseOut);
+      };
+    }
+    return () => {
+      setIsHovering(false);
+    };
+  }, [description, hoverRef]);
   return /* @__PURE__ */ React.createElement("div", {
+    ref: setHoverRef,
     className: classes.root
   }, /* @__PURE__ */ React.createElement(Circle, {
     strokeLinecap: "butt",
@@ -2066,7 +2108,9 @@ function Gauge(props) {
     trailWidth: 12,
     strokeColor: getColor({ palette, value: asActual, inverse, max }),
     className: classes.circle
-  }), /* @__PURE__ */ React.createElement("div", {
+  }), description && isHovering ? /* @__PURE__ */ React.createElement("div", {
+    className: classes.description
+  }, description) : /* @__PURE__ */ React.createElement("div", {
     className: classes.overlay
   }, isNaN(value) ? "N/A" : `${asActual}${unit}`));
 }
@@ -2079,9 +2123,20 @@ const useStyles$w = makeStyles({
 }, { name: "BackstageGaugeCard" });
 function GaugeCard(props) {
   const classes = useStyles$w(props);
-  const { title, subheader, progress, inverse, deepLink, variant, getColor } = props;
+  const {
+    title,
+    subheader,
+    progress,
+    inverse,
+    deepLink,
+    description,
+    icon,
+    variant,
+    getColor
+  } = props;
   const gaugeProps = {
     inverse,
+    description,
     getColor,
     value: progress
   };
@@ -2091,7 +2146,8 @@ function GaugeCard(props) {
     title,
     subheader,
     deepLink,
-    variant
+    variant,
+    icon
   }, /* @__PURE__ */ React.createElement(Gauge, {
     ...gaugeProps
   })));
@@ -3115,9 +3171,13 @@ const useStyles$m = makeStyles((theme) => ({
   },
   overlayHeaderClose: {
     color: theme.palette.bursts.fontColor
+  },
+  marginMobileSidebar: {
+    marginBottom: `${sidebarConfig.mobileSidebarHeight}px`
   }
 }));
 const sortSidebarGroupsForPriority = (children) => orderBy(children, ({ props: { priority } }) => Number.isInteger(priority) ? priority : -1, "desc");
+const sidebarGroupType = React.createElement(SidebarGroup).type;
 const OverlayMenu = ({
   children,
   label = "Menu",
@@ -3129,7 +3189,13 @@ const OverlayMenu = ({
     anchor: "bottom",
     open,
     onClose,
-    classes: { paperAnchorBottom: classes.overlay }
+    ModalProps: {
+      BackdropProps: { classes: { root: classes.marginMobileSidebar } }
+    },
+    classes: {
+      root: classes.marginMobileSidebar,
+      paperAnchorBottom: classes.overlay
+    }
   }, /* @__PURE__ */ React.createElement(Box, {
     className: classes.overlayHeader
   }, /* @__PURE__ */ React.createElement(Typography, {
@@ -3152,7 +3218,7 @@ const MobileSidebar = (props) => {
   useEffect(() => {
     setSelectedMenuItemIndex(-1);
   }, [location.pathname]);
-  let sidebarGroups = useElementFilter(children, (elements) => elements.getElements().filter((child) => child.type === SidebarGroup));
+  let sidebarGroups = useElementFilter(children, (elements) => elements.getElements().filter((child) => child.type === sidebarGroupType));
   if (!children) {
     return null;
   } else if (!sidebarGroups.length) {
@@ -3290,11 +3356,11 @@ const DesktopSidebar = (props) => {
     onMouseEnter: disableExpandOnHover ? () => {
     } : handleOpen,
     onFocus: disableExpandOnHover ? () => {
-    } : ignoreChildEvent(handleOpen),
+    } : handleOpen,
     onMouseLeave: disableExpandOnHover ? () => {
     } : handleClose,
     onBlur: disableExpandOnHover ? () => {
-    } : ignoreChildEvent(handleClose)
+    } : handleClose
   }, /* @__PURE__ */ React.createElement("div", {
     className: classNames(classes.drawer, {
       [classes.drawerOpen]: isOpen
@@ -3322,14 +3388,6 @@ function A11ySkipSidebar() {
     className: classNames(classes.visuallyHidden)
   }, "Skip to content");
 }
-function ignoreChildEvent(handlerFn) {
-  return (event) => {
-    const currentTarget = event == null ? void 0 : event.currentTarget;
-    if (!(currentTarget == null ? void 0 : currentTarget.contains(event.relatedTarget))) {
-      handlerFn(event);
-    }
-  };
-}
 
 function isLocationMatch(currentLocation, toLocation) {
   const toDecodedSearch = new URLSearchParams(toLocation.search).toString();
@@ -3722,6 +3780,7 @@ const useLocationMatch = (submenu, location) => useElementFilter(submenu.props.c
 function isButtonItem(props) {
   return props.to === void 0;
 }
+const sidebarSubmenuType = React.createElement(SidebarSubmenu).type;
 const WorkaroundNavLink = React.forwardRef(function WorkaroundNavLinkWithRef({
   to,
   end,
@@ -3855,7 +3914,7 @@ const SidebarItemWithSubmenu = ({
   }, arrowIcon()), isHoveredOn && children));
 };
 const SidebarItem = forwardRef((props, ref) => {
-  const [submenu] = useElementFilter(props.children, (elements) => elements.getElements().filter((child) => child.type === SidebarSubmenu));
+  const [submenu] = useElementFilter(props.children, (elements) => elements.getElements().filter((child) => child.type === sidebarSubmenuType));
   if (submenu) {
     return /* @__PURE__ */ React.createElement(SidebarItemWithSubmenu, {
       ...props
@@ -5117,11 +5176,13 @@ const useStyles$5 = makeStyles((theme) => ({
     zIndex: 100,
     display: "flex",
     flexDirection: "row",
-    flexWrap: "wrap",
     alignItems: "center",
     backgroundImage: theme.page.backgroundImage,
     backgroundPosition: "center",
-    backgroundSize: "cover"
+    backgroundSize: "cover",
+    [theme.breakpoints.down("sm")]: {
+      flexWrap: "wrap"
+    }
   },
   leftItemsBox: {
     maxWidth: "100%",
@@ -5137,10 +5198,11 @@ const useStyles$5 = makeStyles((theme) => ({
     marginBottom: 0
   },
   subtitle: {
-    color: theme.palette.common.white,
+    color: theme.palette.bursts.fontColor,
     opacity: 0.8,
     display: "inline-block",
-    marginTop: theme.spacing(1)
+    marginTop: theme.spacing(1),
+    maxWidth: "75ch"
   },
   type: {
     textTransform: "uppercase",
@@ -5411,18 +5473,19 @@ function ItemCardGrid(props) {
 }
 
 const useStyles$1 = makeStyles(() => ({
-  root: {
+  root: ({ isMobile }) => ({
     display: "grid",
     gridTemplateAreas: "'pageHeader pageHeader pageHeader' 'pageSubheader pageSubheader pageSubheader' 'pageNav pageContent pageSidebar'",
     gridTemplateRows: "max-content auto 1fr",
     gridTemplateColumns: "auto 1fr auto",
-    height: "100%",
+    height: isMobile ? "100%" : "100vh",
     overflowY: "auto"
-  }
+  })
 }), { name: "BackstagePage" });
 function Page(props) {
   const { themeId, children } = props;
-  const classes = useStyles$1();
+  const { isMobile } = useContext(SidebarPinStateContext);
+  const classes = useStyles$1({ isMobile });
   return /* @__PURE__ */ React.createElement(ThemeProvider, {
     theme: (baseTheme) => ({
       ...baseTheme,