@dt-dds/react-sidebar 1.0.0-beta.1

package/dist/index.mjs

@@ -0,0 +1,1528 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/Sidebar.tsx
+import {
+  useMemo as useMemo5,
+  useCallback as useCallback4,
+  useState as useState5,
+  useEffect as useEffect4,
+  useRef as useRef3
+} from "react";
+import { useTheme as useTheme2 } from "@emotion/react";
+import { useMedia } from "@dt-dds/react-core";
+
+// src/components/SidebarBackdrop/SidebarBackdrop.tsx
+import { useCallback } from "react";
+
+// src/components/SidebarBackdrop/SidebarBackdrop.styled.ts
+import styled from "@emotion/styled";
+import { BACKDROP_Z_INDEX } from "@dt-dds/react-core";
+import { hexToRgba } from "@dt-dds/themes";
+var SidebarBackdropStyled = styled.div`
+  ${({ theme, isOpen }) => {
+  if (!isOpen) {
+    return "display: none;";
+  }
+  return `
+      position: fixed;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background: ${hexToRgba(theme.palette.surface.dark, 0.2)};
+      z-index: ${BACKDROP_Z_INDEX};
+      overflow: hidden;
+    `;
+}}
+`;
+
+// src/components/SidebarBackdrop/SidebarBackdrop.tsx
+import { jsx } from "react/jsx-runtime";
+var SidebarBackdrop = ({
+  isOpen,
+  onBackdropClick,
+  children,
+  dataTestId
+}) => {
+  const handleBackdropClick = useCallback(
+    (event) => {
+      if (event.target === event.currentTarget && onBackdropClick) {
+        onBackdropClick();
+      }
+    },
+    [onBackdropClick]
+  );
+  if (!isOpen) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    SidebarBackdropStyled,
+    {
+      "data-testid": dataTestId != null ? dataTestId : "sidebar-backdrop",
+      isOpen,
+      onClick: handleBackdropClick,
+      children
+    }
+  );
+};
+SidebarBackdrop.displayName = "Sidebar.Backdrop";
+
+// src/components/SidebarDivider/SidebarDivider.tsx
+import {
+  withResponsive
+} from "@dt-dds/react-core";
+
+// src/components/SidebarDivider/SidebarDivider.styled.ts
+import styled2 from "@emotion/styled";
+var SidebarDividerStyled = styled2.hr`
+  ${({ theme }) => `
+    height: 1px;
+    margin: ${theme.spacing.spacing_0};
+    border: none;
+    background-color: ${theme.palette.border.default};
+  `}
+`;
+
+// src/components/SidebarDivider/SidebarDivider.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var SidebarDividerBase = (_a) => {
+  var _b = _a, {
+    dataTestId,
+    style
+  } = _b, rest = __objRest(_b, [
+    "dataTestId",
+    "style"
+  ]);
+  return /* @__PURE__ */ jsx2(
+    SidebarDividerStyled,
+    __spreadValues({
+      "data-testid": dataTestId != null ? dataTestId : "sidebar-divider",
+      style
+    }, rest)
+  );
+};
+SidebarDividerBase.displayName = "Sidebar.Divider";
+var SidebarDivider = withResponsive(SidebarDividerBase);
+
+// src/components/SidebarSection/SidebarSection.tsx
+import { useMemo } from "react";
+import { useTheme } from "@emotion/react";
+import { Typography as Typography2 } from "@dt-dds/react-typography";
+
+// src/components/SidebarSection/SidebarSectionRoot.styled.ts
+import styled3 from "@emotion/styled";
+
+// src/constants/index.ts
+var SIDEBAR_WIDTH = 250;
+var SIDEBAR_WIDTH_MAX_TEXT_LENGTH = 170;
+var SIDEBAR_WIDTH_MINI = 70;
+var SIDEBAR_HEADER_HEIGHT = 64;
+var SIDEBAR_HEADER_HEIGHT_MOBILE = 72;
+var SIDEBAR_DEFAULT_OFFSET_TOP = 0;
+var SIDEBAR_DEFAULT_OFFSET_POSITION = 0;
+var SIDEBAR_DEFAULT_PLACEMENT = "left";
+var SIDEBAR_MOBILE_PLACEMENT = "right";
+var SIDEBAR_BACKDROP_SHOW_DELAY = 50;
+var SIDEBAR_BACKDROP_HIDE_DELAY = 200;
+var SIDEBAR_DEFAULT_TRANSITION = "all 0.2s ease-in-out";
+
+// src/components/SidebarSection/SidebarSectionRoot.styled.ts
+var SidebarSectionRoot = styled3.section`
+  ${({ theme, variant, isSidebarCollapsed, firstItemHasIcon }) => {
+  const shouldHide = isSidebarCollapsed && !firstItemHasIcon;
+  return `
+      display: ${shouldHide ? "none" : "flex"};
+      flex-direction: column;
+      margin: 0;
+      padding: ${theme.spacing.spacing_50} ${theme.spacing.spacing_0};
+      
+      ul {
+        display: flex;
+        flex-direction: column;
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+      }
+
+      ${variant === "header" && `
+        height: ${SIDEBAR_HEADER_HEIGHT}px;
+        justify-content: center;
+        overflow: hidden;
+
+        @media (min-width: ${theme.breakpoints.mq3}px) {
+          height: ${SIDEBAR_HEADER_HEIGHT_MOBILE}px;
+        }
+      `}
+    `;
+}}
+`;
+
+// src/context/SidebarContext.tsx
+import { createContext, useContext } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var SidebarContext = createContext(null);
+var SidebarContextProvider = ({
+  value,
+  children
+}) => {
+  return /* @__PURE__ */ jsx3(SidebarContext.Provider, { value, children });
+};
+var useSidebarContext = () => {
+  const context = useContext(SidebarContext);
+  if (!context) {
+    throw new Error("Sidebar compound components must be used within Sidebar");
+  }
+  return context;
+};
+
+// src/context/SectionContext.tsx
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var SectionContext = createContext2(null);
+var useSectionContext = () => {
+  var _a;
+  const context = useContext2(SectionContext);
+  return (_a = context == null ? void 0 : context.variant) != null ? _a : "default";
+};
+
+// src/context/SubListContext.tsx
+import { createContext as createContext3, useContext as useContext3 } from "react";
+var SubListContext = createContext3(null);
+var useSubListContext = () => {
+  var _a;
+  const context = useContext3(SubListContext);
+  return (_a = context == null ? void 0 : context.isNested) != null ? _a : false;
+};
+
+// src/utils/sidebarUtils.ts
+import {
+  Children,
+  isValidElement,
+  Fragment
+} from "react";
+var calculateSidebarWidth = (isMobile, isExpanded) => {
+  if (isMobile || isExpanded) {
+    return SIDEBAR_WIDTH;
+  }
+  return SIDEBAR_WIDTH_MINI;
+};
+var calculateSidebarPosition = (isMobile, isExpanded) => {
+  if (isMobile) {
+    return isExpanded ? SIDEBAR_DEFAULT_OFFSET_POSITION : -SIDEBAR_WIDTH;
+  }
+  return SIDEBAR_DEFAULT_OFFSET_POSITION;
+};
+var isSidebarItemElement = (child) => {
+  if (!isValidElement(child)) return false;
+  const componentType = child.type;
+  if ((componentType == null ? void 0 : componentType.displayName) === "SidebarItem") return true;
+  if (typeof child.type === "function" && child.type.name === "SidebarItem")
+    return true;
+  return false;
+};
+var isSidebarSubList = (child) => {
+  if (!isValidElement(child)) return false;
+  const componentType = child.type;
+  if ((componentType == null ? void 0 : componentType.displayName) === "SidebarSubList") return true;
+  if (typeof child.type === "function" && child.type.name === "SidebarSubList")
+    return true;
+  return false;
+};
+var findDirectSidebarItems = (node) => {
+  var _a, _b;
+  const items = [];
+  if (!isValidElement(node)) return items;
+  if (isSidebarItemElement(node)) {
+    items.push(node);
+    return items;
+  }
+  if (node.type === Fragment && ((_a = node.props) == null ? void 0 : _a.children)) {
+    const fragmentChildren = Children.toArray(node.props.children);
+    fragmentChildren.forEach((child) => {
+      if (isValidElement(child) && isSidebarItemElement(child)) {
+        items.push(child);
+      }
+    });
+    return items;
+  }
+  if ((_b = node.props) == null ? void 0 : _b.children) {
+    const children = Children.toArray(node.props.children);
+    children.forEach((child) => {
+      if (isValidElement(child) && isSidebarItemElement(child)) {
+        items.push(child);
+      }
+    });
+  }
+  return items;
+};
+var isIconElement = (child) => {
+  if (!isValidElement(child)) return false;
+  const componentType = child.type;
+  if ((componentType == null ? void 0 : componentType.displayName) === "Icon" || (componentType == null ? void 0 : componentType.displayName) === "IconButton" || (componentType == null ? void 0 : componentType.displayName) === "SidebarToggle")
+    return true;
+  if (typeof child.type === "function" && (child.type.name === "Icon" || child.type.name === "IconButton" || child.type.name === "SidebarToggle"))
+    return true;
+  if (typeof child.type === "string" && child.type === "i") return true;
+  return false;
+};
+var isSidebarToggleElement = (child) => {
+  if (!isValidElement(child)) return false;
+  const componentType = child.type;
+  if ((componentType == null ? void 0 : componentType.displayName) === "SidebarToggle") return true;
+  if (typeof child.type === "function" && child.type.name === "SidebarToggle")
+    return true;
+  return false;
+};
+var extractIconsFromNode = (node, icons = []) => {
+  var _a, _b;
+  if (!isValidElement(node)) return icons;
+  if (isIconElement(node)) {
+    icons.push(node);
+    return icons;
+  }
+  if (isSidebarSubList(node)) return icons;
+  if (isSidebarItemElement(node)) return icons;
+  if (node.type === Fragment && ((_a = node.props) == null ? void 0 : _a.children)) {
+    const fragmentChildren = Children.toArray(node.props.children);
+    fragmentChildren.forEach((child) => extractIconsFromNode(child, icons));
+    return icons;
+  }
+  const nodeChildren = (_b = node.props) == null ? void 0 : _b.children;
+  if (nodeChildren !== void 0 && nodeChildren !== null) {
+    const nestedChildren = Children.toArray(nodeChildren);
+    nestedChildren.forEach((child) => extractIconsFromNode(child, icons));
+  }
+  return icons;
+};
+var extractIconsFromChildren = (children) => {
+  const icons = [];
+  const childrenArray = Children.toArray(children);
+  childrenArray.forEach((child) => {
+    extractIconsFromNode(child, icons);
+  });
+  return icons;
+};
+var hasIconInChildren = (children) => {
+  return extractIconsFromChildren(children).length > 0;
+};
+var hasFirstItemIcon = (children) => {
+  const childrenArray = Children.toArray(children);
+  return childrenArray.some((child) => {
+    const directItems = findDirectSidebarItems(child);
+    return directItems.some((item) => {
+      if (isValidElement(item)) {
+        const itemChildren = item.props.children || [];
+        return hasIconInChildren(itemChildren);
+      }
+      return false;
+    });
+  });
+};
+
+// src/utils/urlUtils.ts
+var getCurrentPath = () => {
+  if (typeof window === "undefined") return "";
+  return window.location.pathname;
+};
+var getHrefPath = (href) => {
+  try {
+    return new URL(
+      href,
+      typeof window !== "undefined" ? window.location.origin : "http://localhost"
+    ).pathname;
+  } catch (e) {
+    return href.startsWith("/") ? href : `/${href}`;
+  }
+};
+var isCurrentUrl = (href, currentPath) => {
+  if (!href) return false;
+  const pathToCompare = currentPath != null ? currentPath : getCurrentPath();
+  const hrefPath = getHrefPath(href);
+  return hrefPath ? pathToCompare === hrefPath : false;
+};
+
+// src/utils/sidebarItemUtils.ts
+import { Children as Children2, Fragment as Fragment2, isValidElement as isValidElement2 } from "react";
+var isLinkElement = (child) => {
+  if (!isValidElement2(child)) return false;
+  return child.type === "a" || "href" in (child.props || {});
+};
+var findSubListInChildren = (node) => {
+  if (!isValidElement2(node)) return false;
+  if (isSidebarSubList(node)) return true;
+  if (node.type === Fragment2 && node.props.children) {
+    return Children2.toArray(node.props.children).some(findSubListInChildren);
+  }
+  return false;
+};
+var flattenChildren = (children) => {
+  return Children2.toArray(children).flatMap((child) => {
+    if (isValidElement2(child) && child.type === Fragment2 && child.props.children) {
+      return flattenChildren(child.props.children);
+    }
+    return [child];
+  });
+};
+var partitionChildren = (children) => {
+  const allChildren = flattenChildren(children);
+  return allChildren.reduce(
+    (acc, child) => {
+      if (findSubListInChildren(child)) {
+        acc.subList.push(child);
+      } else {
+        acc.otherChildren.push(child);
+      }
+      return acc;
+    },
+    { subList: [], otherChildren: [] }
+  );
+};
+var containsActiveSidebarItem = (node, currentPath, isCurrentUrl2) => {
+  var _a;
+  if (!isValidElement2(node)) return false;
+  if (isSidebarItemElement(node)) {
+    return isCurrentUrl2(node.props.href, currentPath);
+  }
+  if (!((_a = node.props) == null ? void 0 : _a.children)) return false;
+  return Children2.toArray(node.props.children).some(
+    (childNode) => containsActiveSidebarItem(childNode, currentPath, isCurrentUrl2)
+  );
+};
+var isLinkTarget = (target) => {
+  if (!(target instanceof HTMLElement)) return false;
+  return !!target.closest("a");
+};
+
+// src/utils/sidebarItemRenderers.tsx
+import { Children as Children4, cloneElement, isValidElement as isValidElement4 } from "react";
+
+// src/utils/sidebarItemContent.tsx
+import { Children as Children3, isValidElement as isValidElement3 } from "react";
+import { Tooltip } from "@dt-dds/react-tooltip";
+
+// src/components/SidebarItem/SidebarItem.styled.ts
+import styled4 from "@emotion/styled";
+import { Typography } from "@dt-dds/react-typography";
+var SidebarItemStyled = styled4.li`
+  margin: 0;
+  padding: 0;
+  list-style: none;
+`;
+var SidebarItemHeaderStyled = styled4.div`
+  ${({
+  theme,
+  isActive,
+  isSidebarCollapsed,
+  isInteractive = true,
+  isNested = false,
+  sectionVariant
+}) => {
+  const padding = isNested ? `${theme.spacing.spacing_30} ${theme.spacing.spacing_80}` : `${theme.spacing.spacing_30} ${theme.spacing.spacing_60}`;
+  const paddingRight = `${isSidebarCollapsed ? "auto" : theme.spacing.spacing_30}`;
+  const justifyContent = `${isSidebarCollapsed ? "center" : "space-between"}`;
+  return `
+      cursor: ${isInteractive ? "pointer" : "default"};
+      display: flex;
+      align-items: center;
+      padding: ${padding};
+      padding-right: ${paddingRight};
+      color: ${isActive ? theme.palette.accent.default : theme.palette.content.default};
+      justify-content: ${justifyContent};
+
+      &[role="button"] {
+        justify-content: ${justifyContent};
+      }
+
+      ${sectionVariant === "default" && `
+        transition: ${SIDEBAR_DEFAULT_TRANSITION};
+
+        &:hover,
+        &:focus-visible,
+        &:active {
+          background-color: ${theme.palette.accent.light};
+        }
+      `}
+    `;
+}}
+`;
+var SidebarItemBodyStyled = styled4.div`
+  ${({ isExpanded, isSidebarJustExpanded }) => {
+  const shouldDelay = isSidebarJustExpanded && isExpanded;
+  return `
+      display: grid;
+      grid-template-rows: ${isExpanded ? "1fr" : "0fr"};
+      transition: ${SIDEBAR_DEFAULT_TRANSITION};
+      overflow: hidden;
+
+      & > * {
+        min-height: 0;
+        opacity: ${shouldDelay ? "0" : isExpanded ? "1" : "0"};
+        visibility: ${shouldDelay ? "hidden" : isExpanded ? "visible" : "hidden"};
+        ${shouldDelay ? `
+          transition: none;
+          animation: fadeInDelayed 0s ease-in-out 0s forwards;
+          @keyframes fadeInDelayed {
+            from {
+              opacity: 0;
+              visibility: hidden;
+            }
+            to {
+              opacity: 1;
+              visibility: visible;
+            }
+          }
+        ` : `
+          transition: ${SIDEBAR_DEFAULT_TRANSITION};
+        `}
+      }
+    `;
+}}
+`;
+var defaultSidebarItemLinkStyles = ({
+  theme,
+  isActive,
+  isSidebarCollapsed,
+  sectionVariant
+}) => `
+  display: flex;
+  align-items: center;
+  width: ${isSidebarCollapsed ? "auto" : "100%"};
+  gap: ${theme.spacing.spacing_40};
+  color: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  transition: ${SIDEBAR_DEFAULT_TRANSITION};
+
+  ${sectionVariant === "header" ? `
+        justify-content: space-between;
+        flex-direction: row-reverse;
+
+        &:has(> :only-child:not(button)) {
+          flex-direction: row;
+        }
+
+        svg,
+        img {
+          max-height: 24px;
+          width: auto;
+        }
+      ` : ""}
+  ${isSidebarCollapsed ? `
+        justify-content: center;
+        padding: ${theme.spacing.spacing_10};
+      ` : ""}
+
+  > i:first-of-type {
+    opacity: 1;
+    visibility: visible;
+    color: ${isActive ? theme.palette.accent.default : theme.palette.content.dark};
+
+    transition: ${SIDEBAR_DEFAULT_TRANSITION};
+  }
+
+  &:hover,
+  &:focus-visible,
+  &:active,
+  &:hover > i:first-of-type {
+    color: ${theme.palette.accent.default};
+  }
+`;
+var SidebarItemLinkStyled = styled4(Typography)`
+  ${({
+  theme,
+  isActive,
+  isSidebarCollapsed,
+  isDynamicLink,
+  isNested,
+  sectionVariant
+}) => isDynamicLink ? `
+      > a,
+      > *[href] {
+        ${defaultSidebarItemLinkStyles({
+  theme,
+  isActive,
+  isSidebarCollapsed,
+  isNested,
+  sectionVariant
+})}
+      }
+    ` : defaultSidebarItemLinkStyles({
+  theme,
+  isActive,
+  isSidebarCollapsed,
+  isNested,
+  sectionVariant
+})}
+`;
+var SidebarItemTextContent = styled4.span`
+  ${({ isSidebarCollapsed }) => `
+    max-width: ${SIDEBAR_WIDTH_MAX_TEXT_LENGTH}px;
+    opacity: ${isSidebarCollapsed ? "0" : "1"};
+    visibility: ${isSidebarCollapsed ? "hidden" : "visible"};
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  `}
+`;
+
+// src/utils/sidebarItemContent.tsx
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+var extractTextContent = (children) => {
+  const directString = children.find(
+    (child) => typeof child === "string"
+  );
+  if (directString) {
+    return directString;
+  }
+  for (const child of children) {
+    if (isSidebarToggleElement(child)) return "Expand sidebar";
+    if (isValidElement3(child) && child.props.children) {
+      const nestedChildren = Children3.toArray(child.props.children);
+      const nestedString = nestedChildren.find(
+        (nested) => typeof nested === "string"
+      );
+      if (nestedString) {
+        return nestedString;
+      }
+    }
+  }
+  return void 0;
+};
+var partitionIconAndContent = (children) => {
+  const childrenArray = Children3.toArray(children);
+  const firstIconIndex = childrenArray.findIndex(isIconElement);
+  if (firstIconIndex === -1) {
+    return { firstIcon: null, textContent: childrenArray };
+  }
+  const firstIcon = childrenArray[firstIconIndex];
+  const textContent = [
+    ...childrenArray.slice(0, firstIconIndex),
+    ...childrenArray.slice(firstIconIndex + 1)
+  ];
+  return { firstIcon, textContent };
+};
+var wrapTextContent = (textContent, isSidebarCollapsed) => textContent.length > 0 ? /* @__PURE__ */ jsx4(SidebarItemTextContent, { isSidebarCollapsed, children: textContent }) : null;
+var wrapWithTooltip = (content, tooltipText) => tooltipText ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+  content,
+  /* @__PURE__ */ jsx4(Tooltip.Content, { background: "full", direction: "right", children: tooltipText })
+] }) : content;
+var createLinkWrapperProps = (isActive, isSidebarCollapsed, isNested, sectionVariant) => ({
+  isActive,
+  isSidebarCollapsed,
+  isNested,
+  sectionVariant
+});
+var createLinkStyledProps = (href, isActive, isSidebarCollapsed, isNested, sectionVariant) => __spreadValues({
+  href,
+  isActive,
+  isSidebarCollapsed,
+  isNested,
+  sectionVariant
+}, href && isActive && { "aria-current": "page" });
+
+// src/utils/sidebarItemRenderers.tsx
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var renderCollapsed = (content, href, isActive, isSidebarCollapsed, isNested, sectionVariant) => {
+  const childrenArray = Children4.toArray(content);
+  const hasLinkChild = childrenArray.some(isLinkElement);
+  if (hasLinkChild) {
+    const linkElement = childrenArray.find(isLinkElement);
+    if (!linkElement || !isValidElement4(linkElement)) {
+      return null;
+    }
+    const linkChildren = linkElement.props.children;
+    if (linkChildren === void 0 || linkChildren === null) {
+      return null;
+    }
+    const iconOnlyContent2 = extractIconsFromChildren(linkChildren);
+    if (iconOnlyContent2.length === 0) {
+      return null;
+    }
+    const clonedLink = cloneElement(
+      linkElement,
+      isActive ? { "aria-current": "page" } : {},
+      iconOnlyContent2
+    );
+    const tooltipText2 = extractTextContent(Children4.toArray(linkChildren));
+    const color2 = isActive ? "accent.default" : "content.dark";
+    const fontStyles2 = isActive && !isNested ? "bodyLgBold" : "bodyLgRegular";
+    const wrappedLink = /* @__PURE__ */ jsx5(
+      SidebarItemLinkStyled,
+      __spreadProps(__spreadValues({
+        color: color2,
+        element: "span",
+        fontStyles: fontStyles2,
+        isDynamicLink: true
+      }, createLinkWrapperProps(
+        isActive,
+        isSidebarCollapsed,
+        isNested,
+        sectionVariant
+      )), {
+        children: clonedLink
+      })
+    );
+    return wrapWithTooltip(wrappedLink, tooltipText2);
+  }
+  const iconOnlyContent = childrenArray.filter(isIconElement);
+  if (iconOnlyContent.length === 0) {
+    return null;
+  }
+  const tooltipText = extractTextContent(childrenArray);
+  const element = href ? "a" : "span";
+  const color = isActive ? "accent.default" : "content.dark";
+  const fontStyles = isActive && !isNested ? "bodyLgBold" : "bodyLgRegular";
+  const styledLink = /* @__PURE__ */ jsx5(
+    SidebarItemLinkStyled,
+    __spreadProps(__spreadValues({
+      color,
+      element,
+      fontStyles,
+      isDynamicLink: false
+    }, createLinkStyledProps(
+      href,
+      isActive,
+      isSidebarCollapsed,
+      isNested,
+      sectionVariant
+    )), {
+      children: iconOnlyContent
+    })
+  );
+  return wrapWithTooltip(styledLink, tooltipText);
+};
+var renderExpanded = (content, href, isActive, isSidebarCollapsed, isNested, sectionVariant) => {
+  const childrenArray = Children4.toArray(content);
+  const hasLinkChild = childrenArray.some(isLinkElement);
+  const color = isActive ? "accent.default" : "content.dark";
+  const footerFontStyles = sectionVariant === "footer" ? "bodyLgBold" : "bodyLgRegular";
+  const fontStyles = isActive && !isNested ? "bodyLgBold" : footerFontStyles;
+  if (hasLinkChild) {
+    const linkElement = childrenArray.find(isLinkElement);
+    if (!linkElement || !isValidElement4(linkElement)) {
+      const { firstIcon: firstIcon3, textContent: textContent3 } = partitionIconAndContent(content);
+      const wrappedTextContent3 = wrapTextContent(
+        textContent3,
+        isSidebarCollapsed
+      );
+      const element2 = href ? "a" : "span";
+      return /* @__PURE__ */ jsxs2(
+        SidebarItemLinkStyled,
+        __spreadProps(__spreadValues({
+          color,
+          element: element2,
+          fontStyles,
+          isDynamicLink: false
+        }, createLinkStyledProps(
+          href,
+          isActive,
+          isSidebarCollapsed,
+          isNested,
+          sectionVariant
+        )), {
+          children: [
+            firstIcon3,
+            wrappedTextContent3
+          ]
+        })
+      );
+    }
+    const nonLinkChildren = childrenArray.filter(
+      (child) => !isLinkElement(child)
+    );
+    const linkChildren = Children4.toArray(linkElement.props.children);
+    const { firstIcon: firstIcon2, textContent: textContent2 } = partitionIconAndContent(linkChildren);
+    const wrappedTextContent2 = wrapTextContent(textContent2, isSidebarCollapsed);
+    const structuredLinkChildren = /* @__PURE__ */ jsxs2(Fragment3, { children: [
+      firstIcon2,
+      wrappedTextContent2
+    ] });
+    const clonedLink = cloneElement(
+      linkElement,
+      isActive ? { "aria-current": "page" } : {},
+      structuredLinkChildren
+    );
+    return /* @__PURE__ */ jsxs2(
+      SidebarItemLinkStyled,
+      __spreadProps(__spreadValues({
+        color,
+        element: "span",
+        fontStyles,
+        isDynamicLink: true
+      }, createLinkWrapperProps(
+        isActive,
+        isSidebarCollapsed,
+        isNested,
+        sectionVariant
+      )), {
+        children: [
+          clonedLink,
+          nonLinkChildren
+        ]
+      })
+    );
+  }
+  const { firstIcon, textContent } = partitionIconAndContent(content);
+  const wrappedTextContent = wrapTextContent(textContent, isSidebarCollapsed);
+  const element = href ? "a" : "span";
+  return /* @__PURE__ */ jsxs2(
+    SidebarItemLinkStyled,
+    __spreadProps(__spreadValues({
+      color,
+      element,
+      fontStyles,
+      isDynamicLink: false
+    }, createLinkStyledProps(
+      href,
+      isActive,
+      isSidebarCollapsed,
+      isNested,
+      sectionVariant
+    )), {
+      children: [
+        firstIcon,
+        wrappedTextContent
+      ]
+    })
+  );
+};
+var renderContent = (content, href, isActive, isSidebarCollapsed, isNested, sectionVariant) => {
+  if (isSidebarCollapsed) {
+    return renderCollapsed(
+      content,
+      href,
+      isActive,
+      isSidebarCollapsed,
+      isNested,
+      sectionVariant
+    );
+  }
+  return renderExpanded(
+    content,
+    href,
+    isActive,
+    isSidebarCollapsed,
+    isNested,
+    sectionVariant
+  );
+};
+
+// src/components/SidebarSection/SidebarSection.tsx
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var SidebarSection = (_a) => {
+  var _b = _a, {
+    title,
+    children,
+    dataTestId,
+    style
+  } = _b, rest = __objRest(_b, [
+    "title",
+    "children",
+    "dataTestId",
+    "style"
+  ]);
+  const theme = useTheme();
+  const { isExpanded, isMobile } = useSidebarContext();
+  const isSidebarCollapsed = !isMobile && !isExpanded;
+  const shouldShowTitle = title && !isSidebarCollapsed;
+  const firstItemHasIcon = useMemo(
+    () => hasFirstItemIcon(children),
+    [children]
+  );
+  return /* @__PURE__ */ jsx6(SectionContext.Provider, { value: { variant: "default" }, children: /* @__PURE__ */ jsxs3(
+    SidebarSectionRoot,
+    __spreadProps(__spreadValues({
+      as: "nav",
+      "data-testid": dataTestId != null ? dataTestId : "sidebar-section",
+      firstItemHasIcon,
+      isSidebarCollapsed,
+      style,
+      variant: "default"
+    }, rest), {
+      children: [
+        shouldShowTitle ? /* @__PURE__ */ jsx6(
+          Typography2,
+          {
+            color: "content.dark",
+            element: "h2",
+            fontStyles: "bodySmBold",
+            style: {
+              padding: `${theme.spacing.spacing_50} ${theme.spacing.spacing_60}`,
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textTransform: "uppercase"
+            },
+            children: title
+          }
+        ) : null,
+        /* @__PURE__ */ jsx6("ul", { children })
+      ]
+    })
+  ) });
+};
+SidebarSection.displayName = "Sidebar.Section";
+
+// src/components/SidebarSection/SidebarHeader.tsx
+import { useMemo as useMemo2 } from "react";
+import {
+  withResponsive as withResponsive2
+} from "@dt-dds/react-core";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var SidebarHeaderBase = (_a) => {
+  var _b = _a, {
+    children,
+    dataTestId,
+    style
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "dataTestId",
+    "style"
+  ]);
+  const { isExpanded, isMobile } = useSidebarContext();
+  const isSidebarCollapsed = !isMobile && !isExpanded;
+  const firstItemHasIcon = useMemo2(
+    () => hasFirstItemIcon(children),
+    [children]
+  );
+  return /* @__PURE__ */ jsx7(SectionContext.Provider, { value: { variant: "header" }, children: /* @__PURE__ */ jsx7(
+    SidebarSectionRoot,
+    __spreadProps(__spreadValues({
+      as: "header",
+      "data-testid": dataTestId != null ? dataTestId : "sidebar-header",
+      firstItemHasIcon,
+      isSidebarCollapsed,
+      style,
+      variant: "header"
+    }, rest), {
+      children: /* @__PURE__ */ jsx7("ul", { children })
+    })
+  ) });
+};
+SidebarHeaderBase.displayName = "Sidebar.Header";
+var SidebarHeader = withResponsive2(SidebarHeaderBase);
+
+// src/components/SidebarSection/SidebarFooter.tsx
+import { useMemo as useMemo3 } from "react";
+import {
+  withResponsive as withResponsive3
+} from "@dt-dds/react-core";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var SidebarFooterBase = (_a) => {
+  var _b = _a, {
+    children,
+    dataTestId,
+    style
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "dataTestId",
+    "style"
+  ]);
+  const { isExpanded, isMobile } = useSidebarContext();
+  const isSidebarCollapsed = !isMobile && !isExpanded;
+  const firstItemHasIcon = useMemo3(
+    () => hasFirstItemIcon(children),
+    [children]
+  );
+  return /* @__PURE__ */ jsx8(SectionContext.Provider, { value: { variant: "footer" }, children: /* @__PURE__ */ jsx8(
+    SidebarSectionRoot,
+    __spreadProps(__spreadValues({
+      as: "footer",
+      "data-testid": dataTestId != null ? dataTestId : "sidebar-footer",
+      firstItemHasIcon,
+      isSidebarCollapsed,
+      style,
+      variant: "footer"
+    }, rest), {
+      children: /* @__PURE__ */ jsx8("ul", { children })
+    })
+  ) });
+};
+SidebarFooterBase.displayName = "Sidebar.Footer";
+var SidebarFooter = withResponsive3(SidebarFooterBase);
+
+// src/components/SidebarItem/SidebarItem.tsx
+import {
+  useState as useState4,
+  useMemo as useMemo4,
+  useId,
+  useEffect as useEffect3,
+  useRef as useRef2
+} from "react";
+import { Icon } from "@dt-dds/react-icon";
+import { IconButton } from "@dt-dds/react-icon-button";
+
+// src/hooks/useSidebar.tsx
+import { useState, useCallback as useCallback2 } from "react";
+var useSidebar = (options = {}) => {
+  const { isExpanded: initialExpanded = false } = options;
+  const [isExpanded, setIsExpanded] = useState(initialExpanded);
+  const toggleSidebar = useCallback2(() => {
+    setIsExpanded((prev) => !prev);
+  }, []);
+  return {
+    isExpanded,
+    setIsExpanded,
+    toggleSidebar
+  };
+};
+
+// src/hooks/useLocationPath.ts
+import { useEffect, useState as useState2 } from "react";
+var useLocationPath = () => {
+  const [path, setPath] = useState2(() => getCurrentPath());
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const handleLocationChange = () => {
+      setPath(getCurrentPath());
+    };
+    window.addEventListener("popstate", handleLocationChange);
+    window.addEventListener("hashchange", handleLocationChange);
+    return () => {
+      window.removeEventListener("popstate", handleLocationChange);
+      window.removeEventListener("hashchange", handleLocationChange);
+    };
+  }, []);
+  return path;
+};
+
+// src/hooks/useDisclosureState.ts
+import { useCallback as useCallback3, useEffect as useEffect2, useRef, useState as useState3 } from "react";
+var shouldTriggerAutoExpand = (isControlled, shouldAutoExpand, autoExpandKey, lastKey) => !isControlled && shouldAutoExpand && !!autoExpandKey && lastKey !== autoExpandKey;
+var useDisclosureState = ({
+  controlledExpanded,
+  defaultExpanded,
+  onToggle,
+  shouldAutoExpand,
+  autoExpandKey
+}) => {
+  const isControlled = controlledExpanded !== void 0;
+  const [internalExpanded, setInternalExpanded] = useState3(
+    () => defaultExpanded
+  );
+  const lastAutoExpandKey = useRef(
+    shouldAutoExpand ? autoExpandKey : null
+  );
+  useEffect2(() => {
+    const shouldTrigger = shouldTriggerAutoExpand(
+      isControlled,
+      shouldAutoExpand,
+      autoExpandKey,
+      lastAutoExpandKey.current
+    );
+    if (!shouldAutoExpand) {
+      lastAutoExpandKey.current = null;
+      return;
+    }
+    if (shouldTrigger) {
+      setInternalExpanded(true);
+      lastAutoExpandKey.current = autoExpandKey;
+    }
+  }, [autoExpandKey, isControlled, shouldAutoExpand]);
+  const expanded = isControlled ? controlledExpanded : internalExpanded;
+  const toggle = useCallback3(() => {
+    const next = !expanded;
+    if (!isControlled) {
+      setInternalExpanded(next);
+    }
+    onToggle == null ? void 0 : onToggle(next);
+  }, [expanded, isControlled, onToggle]);
+  return {
+    expanded: !!expanded,
+    toggle
+  };
+};
+
+// src/components/SidebarItem/SidebarItem.tsx
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+var SidebarItem = (_a) => {
+  var _b = _a, {
+    href,
+    defaultExpanded = false,
+    expanded: controlledExpanded,
+    onToggle,
+    children,
+    dataTestId,
+    style
+  } = _b, rest = __objRest(_b, [
+    "href",
+    "defaultExpanded",
+    "expanded",
+    "onToggle",
+    "children",
+    "dataTestId",
+    "style"
+  ]);
+  const { isExpanded: isSidebarExpanded, isMobile } = useSidebarContext();
+  const sectionVariant = useSectionContext();
+  const isNested = useSubListContext();
+  const collapseToIcons = !isMobile && !isSidebarExpanded;
+  const [isSidebarJustExpanded, setIsSidebarJustExpanded] = useState4(false);
+  const prevCollapseToIcons = useRef2(collapseToIcons);
+  useEffect3(() => {
+    if (prevCollapseToIcons.current && !collapseToIcons) {
+      setIsSidebarJustExpanded(true);
+      const timeout = setTimeout(() => {
+        setIsSidebarJustExpanded(false);
+      }, 1e3);
+      return () => clearTimeout(timeout);
+    }
+    prevCollapseToIcons.current = collapseToIcons;
+  }, [collapseToIcons]);
+  const { subList, otherChildren } = useMemo4(
+    () => partitionChildren(children),
+    [children]
+  );
+  const currentPath = useLocationPath();
+  const isActive = useMemo4(
+    () => isCurrentUrl(href, currentPath),
+    [href, currentPath]
+  );
+  const hasActiveDescendant = useMemo4(() => {
+    if (!subList.length) return false;
+    return subList.some(
+      (node) => containsActiveSidebarItem(node, currentPath, isCurrentUrl)
+    );
+  }, [subList, currentPath]);
+  const shouldAutoExpand = isActive && subList.length > 0 || hasActiveDescendant;
+  const autoExpandKey = shouldAutoExpand ? [href != null ? href : "", currentPath, String(hasActiveDescendant)].join("|") : null;
+  const { expanded, toggle } = useDisclosureState({
+    controlledExpanded,
+    defaultExpanded: defaultExpanded || shouldAutoExpand,
+    onToggle,
+    shouldAutoExpand,
+    autoExpandKey
+  });
+  const submenuId = useId();
+  const headerId = useId();
+  const showDisclosure = subList.length > 0 && !collapseToIcons;
+  const handleKeyDown = (event) => {
+    if (isLinkTarget(event.target)) {
+      return;
+    }
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      toggle();
+    }
+  };
+  const handleHeaderClick = (event) => {
+    if (isLinkTarget(event.target)) {
+      return;
+    }
+    toggle();
+  };
+  const handleToggleButtonClick = (event) => {
+    event.stopPropagation();
+    toggle();
+  };
+  const handleToggleButtonKeyDown = (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      event.stopPropagation();
+      toggle();
+    }
+  };
+  if (subList.length > 0) {
+    const toggleIconCode = expanded ? "keyboard_arrow_up" : "keyboard_arrow_down";
+    const headerContent2 = renderContent(
+      otherChildren,
+      href,
+      isActive,
+      collapseToIcons,
+      isNested,
+      sectionVariant
+    );
+    if (collapseToIcons && !headerContent2) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs4(
+      SidebarItemStyled,
+      __spreadProps(__spreadValues({
+        as: "li",
+        "data-testid": dataTestId != null ? dataTestId : "sidebar-item",
+        style
+      }, rest), {
+        children: [
+          /* @__PURE__ */ jsxs4(
+            SidebarItemHeaderStyled,
+            {
+              "aria-controls": showDisclosure ? submenuId : void 0,
+              "aria-expanded": showDisclosure ? expanded : void 0,
+              id: `header-${headerId}`,
+              isActive,
+              isInteractive: showDisclosure,
+              isNested,
+              isSidebarCollapsed: collapseToIcons,
+              onClick: showDisclosure ? handleHeaderClick : void 0,
+              onKeyDown: showDisclosure ? handleKeyDown : void 0,
+              role: showDisclosure ? "button" : void 0,
+              sectionVariant,
+              tabIndex: showDisclosure ? 0 : void 0,
+              children: [
+                headerContent2,
+                showDisclosure ? /* @__PURE__ */ jsx9(
+                  IconButton,
+                  {
+                    "aria-controls": submenuId,
+                    "aria-expanded": expanded,
+                    "aria-label": expanded ? "Collapse submenu" : "Expand submenu",
+                    onClick: handleToggleButtonClick,
+                    onKeyDown: handleToggleButtonKeyDown,
+                    style: {
+                      display: "flex",
+                      width: collapseToIcons ? "auto" : "100%",
+                      height: "auto",
+                      justifyContent: "flex-end",
+                      whiteSpace: "nowrap"
+                    },
+                    children: /* @__PURE__ */ jsx9(Icon, { code: toggleIconCode })
+                  }
+                ) : null
+              ]
+            }
+          ),
+          showDisclosure ? /* @__PURE__ */ jsx9(
+            SidebarItemBodyStyled,
+            {
+              "aria-hidden": !expanded,
+              "aria-labelledby": headerId,
+              id: submenuId,
+              isExpanded: expanded,
+              isSidebarJustExpanded,
+              children: /* @__PURE__ */ jsx9("div", { children: subList })
+            }
+          ) : null
+        ]
+      })
+    );
+  }
+  const headerContent = renderContent(
+    children,
+    href,
+    isActive,
+    collapseToIcons,
+    isNested,
+    sectionVariant
+  );
+  if (collapseToIcons && !headerContent) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx9(
+    SidebarItemStyled,
+    __spreadProps(__spreadValues({
+      as: "li",
+      "data-testid": dataTestId != null ? dataTestId : "sidebar-item",
+      style
+    }, rest), {
+      children: /* @__PURE__ */ jsx9(
+        SidebarItemHeaderStyled,
+        {
+          isActive,
+          isInteractive: false,
+          isNested,
+          isSidebarCollapsed: collapseToIcons,
+          sectionVariant,
+          children: headerContent
+        }
+      )
+    })
+  );
+};
+SidebarItem.displayName = "SidebarItem";
+
+// src/components/SidebarSubList/SidebarSubList.styled.ts
+import styled5 from "@emotion/styled";
+var SidebarSubListStyled = styled5.ul`
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+`;
+
+// src/components/SidebarSubList/SidebarSubList.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var SidebarSubList = (_a) => {
+  var _b = _a, {
+    children,
+    dataTestId,
+    style
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "dataTestId",
+    "style"
+  ]);
+  useSidebarContext();
+  return /* @__PURE__ */ jsx10(SubListContext.Provider, { value: { isNested: true }, children: /* @__PURE__ */ jsx10(
+    SidebarSubListStyled,
+    __spreadProps(__spreadValues({
+      as: "ul",
+      "data-testid": dataTestId != null ? dataTestId : "sidebar-sub-list",
+      style
+    }, rest), {
+      children
+    })
+  ) });
+};
+SidebarSubList.displayName = "SidebarSubList";
+
+// src/components/SidebarContent/SidebarContent.styled.ts
+import styled6 from "@emotion/styled";
+var SidebarContentStyled = styled6.div`
+  ${({ theme, isSidebarCollapsed }) => {
+  return `
+      position: relative;
+      display: block;
+      flex: 1 1 auto;
+      overflow-x: hidden;
+      overflow-y: overlay;
+      scrollbar-width: ${isSidebarCollapsed ? "none" : "thin"};
+      scrollbar-color: ${theme.palette.border.default} transparent;
+    `;
+}}
+`;
+
+// src/components/SidebarContent/SidebarContent.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+var SidebarContent = (_a) => {
+  var _b = _a, {
+    children,
+    dataTestId,
+    style
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "dataTestId",
+    "style"
+  ]);
+  const { isExpanded, isMobile } = useSidebarContext();
+  const isSidebarCollapsed = !isMobile && !isExpanded;
+  return /* @__PURE__ */ jsx11(
+    SidebarContentStyled,
+    __spreadProps(__spreadValues({
+      "data-testid": dataTestId != null ? dataTestId : "sidebar-content",
+      isSidebarCollapsed,
+      style
+    }, rest), {
+      children
+    })
+  );
+};
+SidebarContent.displayName = "Sidebar.Content";
+
+// src/components/SidebarToggle/SidebarToggle.tsx
+import { Icon as Icon2 } from "@dt-dds/react-icon";
+
+// src/components/SidebarToggle/SidebarToggle.styled.ts
+import styled7 from "@emotion/styled";
+import { IconButton as IconButton2 } from "@dt-dds/react-icon-button";
+var SidebarToggleStyled = styled7(IconButton2)`
+  ${({ isSidebarCollapsed }) => `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    > i {
+      transform: ${isSidebarCollapsed ? "rotate(180deg)" : ""};
+    }
+  `}
+`;
+
+// src/components/SidebarToggle/SidebarToggle.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+var SidebarToggle = ({ onClick }) => {
+  const { isExpanded, isMobile, onToggle } = useSidebarContext();
+  const isSidebarCollapsed = !isMobile && !isExpanded;
+  const handleClick = onClick != null ? onClick : onToggle;
+  return /* @__PURE__ */ jsx12(
+    SidebarToggleStyled,
+    {
+      "aria-expanded": !isSidebarCollapsed,
+      "aria-label": "Toggle sidebar navigation",
+      isSidebarCollapsed,
+      onClick: handleClick,
+      children: /* @__PURE__ */ jsx12(Icon2, { code: "menu_open" })
+    }
+  );
+};
+SidebarToggle.displayName = "Sidebar.Toggle";
+
+// src/Sidebar.styled.ts
+import styled8 from "@emotion/styled";
+var SidebarStyled = styled8.aside`
+  ${({ theme, isExpanded, isMobile, offsetTop, placement }) => {
+  const height = isMobile ? SIDEBAR_DEFAULT_OFFSET_TOP : offsetTop;
+  const width = calculateSidebarWidth(isMobile, isExpanded);
+  const sidebarPositionValue = calculateSidebarPosition(isMobile, isExpanded);
+  const transitionAnimation = SIDEBAR_DEFAULT_TRANSITION;
+  return `
+      position: fixed;
+      display: flex;
+      flex-direction: column;
+      height: calc(100% - ${height}px);
+      width: ${width}px;
+      background-color: ${theme.palette.surface.contrast};
+      overflow: hidden;
+      top: ${offsetTop}px;
+      transition: ${transitionAnimation};
+      ${placement}: ${sidebarPositionValue}px;
+
+      ${placement === "right" ? `border-left: 1px solid ${theme.palette.border.default};` : `border-right: 1px solid ${theme.palette.border.default};`}
+    `;
+}}
+`;
+
+// src/Sidebar.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+var Sidebar = (_a) => {
+  var _b = _a, {
+    dataTestId,
+    offsetTop = 0,
+    children,
+    ariaLabel,
+    style,
+    isExpanded,
+    placement = SIDEBAR_DEFAULT_PLACEMENT,
+    onToggle
+  } = _b, rest = __objRest(_b, [
+    "dataTestId",
+    "offsetTop",
+    "children",
+    "ariaLabel",
+    "style",
+    "isExpanded",
+    "placement",
+    "onToggle"
+  ]);
+  const theme = useTheme2();
+  const isMobile = useMedia(`(max-width: ${theme.breakpoints.mq3}px)`);
+  const [isBackdropVisible, setIsBackdropVisible] = useState5(false);
+  const [shouldShowSidebar, setShouldShowSidebar] = useState5(
+    !isMobile && isExpanded
+  );
+  const timeoutRef = useRef3(null);
+  useEffect4(() => {
+    if (timeoutRef.current !== null) {
+      window.clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    if (!isMobile) {
+      setIsBackdropVisible(false);
+      setShouldShowSidebar(isExpanded);
+      return;
+    }
+    if (isExpanded) {
+      setIsBackdropVisible(true);
+      timeoutRef.current = window.setTimeout(() => {
+        setShouldShowSidebar(true);
+      }, SIDEBAR_BACKDROP_SHOW_DELAY);
+    } else {
+      setShouldShowSidebar(false);
+      timeoutRef.current = window.setTimeout(() => {
+        setIsBackdropVisible(false);
+      }, SIDEBAR_BACKDROP_HIDE_DELAY);
+    }
+    return () => {
+      if (timeoutRef.current !== null) {
+        window.clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [isExpanded, isMobile]);
+  useEffect4(() => {
+    if (!isMobile || !isExpanded) return;
+    const handleEscapeKey = (event) => {
+      if (event.key === "Escape") {
+        onToggle == null ? void 0 : onToggle(false);
+      }
+    };
+    document.addEventListener("keydown", handleEscapeKey);
+    return () => document.removeEventListener("keydown", handleEscapeKey);
+  }, [isMobile, isExpanded, onToggle]);
+  const handleToggle = useCallback4(() => {
+    onToggle == null ? void 0 : onToggle(!isExpanded);
+  }, [onToggle, isExpanded]);
+  const contextValue = useMemo5(
+    () => ({
+      isExpanded,
+      isMobile,
+      onToggle: handleToggle
+    }),
+    [isExpanded, isMobile, handleToggle]
+  );
+  return /* @__PURE__ */ jsx13(SidebarContextProvider, { value: contextValue, children: isMobile ? /* @__PURE__ */ jsx13(
+    SidebarBackdrop,
+    {
+      dataTestId: "mobile-backdrop",
+      isOpen: isBackdropVisible,
+      onBackdropClick: handleToggle,
+      children: /* @__PURE__ */ jsx13(
+        SidebarStyled,
+        __spreadProps(__spreadValues({
+          "aria-label": ariaLabel,
+          "data-testid": dataTestId,
+          isExpanded: shouldShowSidebar,
+          isMobile,
+          offsetTop: SIDEBAR_DEFAULT_OFFSET_TOP,
+          placement: SIDEBAR_MOBILE_PLACEMENT,
+          style
+        }, rest), {
+          children
+        })
+      )
+    }
+  ) : /* @__PURE__ */ jsx13(
+    SidebarStyled,
+    __spreadProps(__spreadValues({
+      "aria-label": ariaLabel,
+      "data-testid": dataTestId,
+      isExpanded,
+      isMobile,
+      offsetTop,
+      placement,
+      style
+    }, rest), {
+      children
+    })
+  ) });
+};
+Sidebar.Content = SidebarContent;
+Sidebar.Divider = SidebarDivider;
+Sidebar.Section = SidebarSection;
+Sidebar.Item = SidebarItem;
+Sidebar.SubList = SidebarSubList;
+Sidebar.Header = SidebarHeader;
+Sidebar.Footer = SidebarFooter;
+Sidebar.Toggle = SidebarToggle;
+export {
+  Sidebar,
+  useSidebar
+};