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

package/dist/index.js

@@ -0,0 +1,1541 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+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;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// index.ts
+var index_exports = {};
+__export(index_exports, {
+  Sidebar: () => Sidebar,
+  useSidebar: () => useSidebar
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/Sidebar.tsx
+var import_react17 = require("react");
+var import_react18 = require("@emotion/react");
+var import_react_core5 = require("@dt-dds/react-core");
+
+// src/components/SidebarBackdrop/SidebarBackdrop.tsx
+var import_react = require("react");
+
+// src/components/SidebarBackdrop/SidebarBackdrop.styled.ts
+var import_styled = __toESM(require("@emotion/styled"));
+var import_react_core = require("@dt-dds/react-core");
+var import_themes = require("@dt-dds/themes");
+var SidebarBackdropStyled = import_styled.default.div`
+  ${({ theme, isOpen }) => {
+  if (!isOpen) {
+    return "display: none;";
+  }
+  return `
+      position: fixed;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background: ${(0, import_themes.hexToRgba)(theme.palette.surface.dark, 0.2)};
+      z-index: ${import_react_core.BACKDROP_Z_INDEX};
+      overflow: hidden;
+    `;
+}}
+`;
+
+// src/components/SidebarBackdrop/SidebarBackdrop.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var SidebarBackdrop = ({
+  isOpen,
+  onBackdropClick,
+  children,
+  dataTestId
+}) => {
+  const handleBackdropClick = (0, import_react.useCallback)(
+    (event) => {
+      if (event.target === event.currentTarget && onBackdropClick) {
+        onBackdropClick();
+      }
+    },
+    [onBackdropClick]
+  );
+  if (!isOpen) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    SidebarBackdropStyled,
+    {
+      "data-testid": dataTestId != null ? dataTestId : "sidebar-backdrop",
+      isOpen,
+      onClick: handleBackdropClick,
+      children
+    }
+  );
+};
+SidebarBackdrop.displayName = "Sidebar.Backdrop";
+
+// src/components/SidebarDivider/SidebarDivider.tsx
+var import_react_core2 = require("@dt-dds/react-core");
+
+// src/components/SidebarDivider/SidebarDivider.styled.ts
+var import_styled2 = __toESM(require("@emotion/styled"));
+var SidebarDividerStyled = import_styled2.default.hr`
+  ${({ theme }) => `
+    height: 1px;
+    margin: ${theme.spacing.spacing_0};
+    border: none;
+    background-color: ${theme.palette.border.default};
+  `}
+`;
+
+// src/components/SidebarDivider/SidebarDivider.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var SidebarDividerBase = (_a) => {
+  var _b = _a, {
+    dataTestId,
+    style
+  } = _b, rest = __objRest(_b, [
+    "dataTestId",
+    "style"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    SidebarDividerStyled,
+    __spreadValues({
+      "data-testid": dataTestId != null ? dataTestId : "sidebar-divider",
+      style
+    }, rest)
+  );
+};
+SidebarDividerBase.displayName = "Sidebar.Divider";
+var SidebarDivider = (0, import_react_core2.withResponsive)(SidebarDividerBase);
+
+// src/components/SidebarSection/SidebarSection.tsx
+var import_react9 = require("react");
+var import_react10 = require("@emotion/react");
+var import_react_typography2 = require("@dt-dds/react-typography");
+
+// src/components/SidebarSection/SidebarSectionRoot.styled.ts
+var import_styled3 = __toESM(require("@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 = import_styled3.default.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
+var import_react2 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var SidebarContext = (0, import_react2.createContext)(null);
+var SidebarContextProvider = ({
+  value,
+  children
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SidebarContext.Provider, { value, children });
+};
+var useSidebarContext = () => {
+  const context = (0, import_react2.useContext)(SidebarContext);
+  if (!context) {
+    throw new Error("Sidebar compound components must be used within Sidebar");
+  }
+  return context;
+};
+
+// src/context/SectionContext.tsx
+var import_react3 = require("react");
+var SectionContext = (0, import_react3.createContext)(null);
+var useSectionContext = () => {
+  var _a;
+  const context = (0, import_react3.useContext)(SectionContext);
+  return (_a = context == null ? void 0 : context.variant) != null ? _a : "default";
+};
+
+// src/context/SubListContext.tsx
+var import_react4 = require("react");
+var SubListContext = (0, import_react4.createContext)(null);
+var useSubListContext = () => {
+  var _a;
+  const context = (0, import_react4.useContext)(SubListContext);
+  return (_a = context == null ? void 0 : context.isNested) != null ? _a : false;
+};
+
+// src/utils/sidebarUtils.ts
+var import_react5 = require("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 (!(0, import_react5.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 (!(0, import_react5.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 (!(0, import_react5.isValidElement)(node)) return items;
+  if (isSidebarItemElement(node)) {
+    items.push(node);
+    return items;
+  }
+  if (node.type === import_react5.Fragment && ((_a = node.props) == null ? void 0 : _a.children)) {
+    const fragmentChildren = import_react5.Children.toArray(node.props.children);
+    fragmentChildren.forEach((child) => {
+      if ((0, import_react5.isValidElement)(child) && isSidebarItemElement(child)) {
+        items.push(child);
+      }
+    });
+    return items;
+  }
+  if ((_b = node.props) == null ? void 0 : _b.children) {
+    const children = import_react5.Children.toArray(node.props.children);
+    children.forEach((child) => {
+      if ((0, import_react5.isValidElement)(child) && isSidebarItemElement(child)) {
+        items.push(child);
+      }
+    });
+  }
+  return items;
+};
+var isIconElement = (child) => {
+  if (!(0, import_react5.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 (!(0, import_react5.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 (!(0, import_react5.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 === import_react5.Fragment && ((_a = node.props) == null ? void 0 : _a.children)) {
+    const fragmentChildren = import_react5.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 = import_react5.Children.toArray(nodeChildren);
+    nestedChildren.forEach((child) => extractIconsFromNode(child, icons));
+  }
+  return icons;
+};
+var extractIconsFromChildren = (children) => {
+  const icons = [];
+  const childrenArray = import_react5.Children.toArray(children);
+  childrenArray.forEach((child) => {
+    extractIconsFromNode(child, icons);
+  });
+  return icons;
+};
+var hasIconInChildren = (children) => {
+  return extractIconsFromChildren(children).length > 0;
+};
+var hasFirstItemIcon = (children) => {
+  const childrenArray = import_react5.Children.toArray(children);
+  return childrenArray.some((child) => {
+    const directItems = findDirectSidebarItems(child);
+    return directItems.some((item) => {
+      if ((0, import_react5.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
+var import_react6 = require("react");
+var isLinkElement = (child) => {
+  if (!(0, import_react6.isValidElement)(child)) return false;
+  return child.type === "a" || "href" in (child.props || {});
+};
+var findSubListInChildren = (node) => {
+  if (!(0, import_react6.isValidElement)(node)) return false;
+  if (isSidebarSubList(node)) return true;
+  if (node.type === import_react6.Fragment && node.props.children) {
+    return import_react6.Children.toArray(node.props.children).some(findSubListInChildren);
+  }
+  return false;
+};
+var flattenChildren = (children) => {
+  return import_react6.Children.toArray(children).flatMap((child) => {
+    if ((0, import_react6.isValidElement)(child) && child.type === import_react6.Fragment && 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 (!(0, import_react6.isValidElement)(node)) return false;
+  if (isSidebarItemElement(node)) {
+    return isCurrentUrl2(node.props.href, currentPath);
+  }
+  if (!((_a = node.props) == null ? void 0 : _a.children)) return false;
+  return import_react6.Children.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
+var import_react8 = require("react");
+
+// src/utils/sidebarItemContent.tsx
+var import_react7 = require("react");
+var import_react_tooltip = require("@dt-dds/react-tooltip");
+
+// src/components/SidebarItem/SidebarItem.styled.ts
+var import_styled4 = __toESM(require("@emotion/styled"));
+var import_react_typography = require("@dt-dds/react-typography");
+var SidebarItemStyled = import_styled4.default.li`
+  margin: 0;
+  padding: 0;
+  list-style: none;
+`;
+var SidebarItemHeaderStyled = import_styled4.default.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 = import_styled4.default.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 = (0, import_styled4.default)(import_react_typography.Typography)`
+  ${({
+  theme,
+  isActive,
+  isSidebarCollapsed,
+  isDynamicLink,
+  isNested,
+  sectionVariant
+}) => isDynamicLink ? `
+      > a,
+      > *[href] {
+        ${defaultSidebarItemLinkStyles({
+  theme,
+  isActive,
+  isSidebarCollapsed,
+  isNested,
+  sectionVariant
+})}
+      }
+    ` : defaultSidebarItemLinkStyles({
+  theme,
+  isActive,
+  isSidebarCollapsed,
+  isNested,
+  sectionVariant
+})}
+`;
+var SidebarItemTextContent = import_styled4.default.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
+var import_jsx_runtime4 = require("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 ((0, import_react7.isValidElement)(child) && child.props.children) {
+      const nestedChildren = import_react7.Children.toArray(child.props.children);
+      const nestedString = nestedChildren.find(
+        (nested) => typeof nested === "string"
+      );
+      if (nestedString) {
+        return nestedString;
+      }
+    }
+  }
+  return void 0;
+};
+var partitionIconAndContent = (children) => {
+  const childrenArray = import_react7.Children.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__ */ (0, import_jsx_runtime4.jsx)(SidebarItemTextContent, { isSidebarCollapsed, children: textContent }) : null;
+var wrapWithTooltip = (content, tooltipText) => tooltipText ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_tooltip.Tooltip, { children: [
+  content,
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_tooltip.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
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var renderCollapsed = (content, href, isActive, isSidebarCollapsed, isNested, sectionVariant) => {
+  const childrenArray = import_react8.Children.toArray(content);
+  const hasLinkChild = childrenArray.some(isLinkElement);
+  if (hasLinkChild) {
+    const linkElement = childrenArray.find(isLinkElement);
+    if (!linkElement || !(0, import_react8.isValidElement)(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 = (0, import_react8.cloneElement)(
+      linkElement,
+      isActive ? { "aria-current": "page" } : {},
+      iconOnlyContent2
+    );
+    const tooltipText2 = extractTextContent(import_react8.Children.toArray(linkChildren));
+    const color2 = isActive ? "accent.default" : "content.dark";
+    const fontStyles2 = isActive && !isNested ? "bodyLgBold" : "bodyLgRegular";
+    const wrappedLink = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      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__ */ (0, import_jsx_runtime5.jsx)(
+    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 = import_react8.Children.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 || !(0, import_react8.isValidElement)(linkElement)) {
+      const { firstIcon: firstIcon3, textContent: textContent3 } = partitionIconAndContent(content);
+      const wrappedTextContent3 = wrapTextContent(
+        textContent3,
+        isSidebarCollapsed
+      );
+      const element2 = href ? "a" : "span";
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        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 = import_react8.Children.toArray(linkElement.props.children);
+    const { firstIcon: firstIcon2, textContent: textContent2 } = partitionIconAndContent(linkChildren);
+    const wrappedTextContent2 = wrapTextContent(textContent2, isSidebarCollapsed);
+    const structuredLinkChildren = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+      firstIcon2,
+      wrappedTextContent2
+    ] });
+    const clonedLink = (0, import_react8.cloneElement)(
+      linkElement,
+      isActive ? { "aria-current": "page" } : {},
+      structuredLinkChildren
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      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__ */ (0, import_jsx_runtime5.jsxs)(
+    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
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var SidebarSection = (_a) => {
+  var _b = _a, {
+    title,
+    children,
+    dataTestId,
+    style
+  } = _b, rest = __objRest(_b, [
+    "title",
+    "children",
+    "dataTestId",
+    "style"
+  ]);
+  const theme = (0, import_react10.useTheme)();
+  const { isExpanded, isMobile } = useSidebarContext();
+  const isSidebarCollapsed = !isMobile && !isExpanded;
+  const shouldShowTitle = title && !isSidebarCollapsed;
+  const firstItemHasIcon = (0, import_react9.useMemo)(
+    () => hasFirstItemIcon(children),
+    [children]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SectionContext.Provider, { value: { variant: "default" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    SidebarSectionRoot,
+    __spreadProps(__spreadValues({
+      as: "nav",
+      "data-testid": dataTestId != null ? dataTestId : "sidebar-section",
+      firstItemHasIcon,
+      isSidebarCollapsed,
+      style,
+      variant: "default"
+    }, rest), {
+      children: [
+        shouldShowTitle ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          import_react_typography2.Typography,
+          {
+            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__ */ (0, import_jsx_runtime6.jsx)("ul", { children })
+      ]
+    })
+  ) });
+};
+SidebarSection.displayName = "Sidebar.Section";
+
+// src/components/SidebarSection/SidebarHeader.tsx
+var import_react11 = require("react");
+var import_react_core3 = require("@dt-dds/react-core");
+var import_jsx_runtime7 = require("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 = (0, import_react11.useMemo)(
+    () => hasFirstItemIcon(children),
+    [children]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SectionContext.Provider, { value: { variant: "header" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    SidebarSectionRoot,
+    __spreadProps(__spreadValues({
+      as: "header",
+      "data-testid": dataTestId != null ? dataTestId : "sidebar-header",
+      firstItemHasIcon,
+      isSidebarCollapsed,
+      style,
+      variant: "header"
+    }, rest), {
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ul", { children })
+    })
+  ) });
+};
+SidebarHeaderBase.displayName = "Sidebar.Header";
+var SidebarHeader = (0, import_react_core3.withResponsive)(SidebarHeaderBase);
+
+// src/components/SidebarSection/SidebarFooter.tsx
+var import_react12 = require("react");
+var import_react_core4 = require("@dt-dds/react-core");
+var import_jsx_runtime8 = require("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 = (0, import_react12.useMemo)(
+    () => hasFirstItemIcon(children),
+    [children]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SectionContext.Provider, { value: { variant: "footer" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    SidebarSectionRoot,
+    __spreadProps(__spreadValues({
+      as: "footer",
+      "data-testid": dataTestId != null ? dataTestId : "sidebar-footer",
+      firstItemHasIcon,
+      isSidebarCollapsed,
+      style,
+      variant: "footer"
+    }, rest), {
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ul", { children })
+    })
+  ) });
+};
+SidebarFooterBase.displayName = "Sidebar.Footer";
+var SidebarFooter = (0, import_react_core4.withResponsive)(SidebarFooterBase);
+
+// src/components/SidebarItem/SidebarItem.tsx
+var import_react16 = require("react");
+var import_react_icon = require("@dt-dds/react-icon");
+var import_react_icon_button = require("@dt-dds/react-icon-button");
+
+// src/hooks/useSidebar.tsx
+var import_react13 = require("react");
+var useSidebar = (options = {}) => {
+  const { isExpanded: initialExpanded = false } = options;
+  const [isExpanded, setIsExpanded] = (0, import_react13.useState)(initialExpanded);
+  const toggleSidebar = (0, import_react13.useCallback)(() => {
+    setIsExpanded((prev) => !prev);
+  }, []);
+  return {
+    isExpanded,
+    setIsExpanded,
+    toggleSidebar
+  };
+};
+
+// src/hooks/useLocationPath.ts
+var import_react14 = require("react");
+var useLocationPath = () => {
+  const [path, setPath] = (0, import_react14.useState)(() => getCurrentPath());
+  (0, import_react14.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
+var import_react15 = require("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] = (0, import_react15.useState)(
+    () => defaultExpanded
+  );
+  const lastAutoExpandKey = (0, import_react15.useRef)(
+    shouldAutoExpand ? autoExpandKey : null
+  );
+  (0, import_react15.useEffect)(() => {
+    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 = (0, import_react15.useCallback)(() => {
+    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
+var import_jsx_runtime9 = require("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] = (0, import_react16.useState)(false);
+  const prevCollapseToIcons = (0, import_react16.useRef)(collapseToIcons);
+  (0, import_react16.useEffect)(() => {
+    if (prevCollapseToIcons.current && !collapseToIcons) {
+      setIsSidebarJustExpanded(true);
+      const timeout = setTimeout(() => {
+        setIsSidebarJustExpanded(false);
+      }, 1e3);
+      return () => clearTimeout(timeout);
+    }
+    prevCollapseToIcons.current = collapseToIcons;
+  }, [collapseToIcons]);
+  const { subList, otherChildren } = (0, import_react16.useMemo)(
+    () => partitionChildren(children),
+    [children]
+  );
+  const currentPath = useLocationPath();
+  const isActive = (0, import_react16.useMemo)(
+    () => isCurrentUrl(href, currentPath),
+    [href, currentPath]
+  );
+  const hasActiveDescendant = (0, import_react16.useMemo)(() => {
+    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 = (0, import_react16.useId)();
+  const headerId = (0, import_react16.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__ */ (0, import_jsx_runtime9.jsxs)(
+      SidebarItemStyled,
+      __spreadProps(__spreadValues({
+        as: "li",
+        "data-testid": dataTestId != null ? dataTestId : "sidebar-item",
+        style
+      }, rest), {
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+            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__ */ (0, import_jsx_runtime9.jsx)(
+                  import_react_icon_button.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__ */ (0, import_jsx_runtime9.jsx)(import_react_icon.Icon, { code: toggleIconCode })
+                  }
+                ) : null
+              ]
+            }
+          ),
+          showDisclosure ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            SidebarItemBodyStyled,
+            {
+              "aria-hidden": !expanded,
+              "aria-labelledby": headerId,
+              id: submenuId,
+              isExpanded: expanded,
+              isSidebarJustExpanded,
+              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { children: subList })
+            }
+          ) : null
+        ]
+      })
+    );
+  }
+  const headerContent = renderContent(
+    children,
+    href,
+    isActive,
+    collapseToIcons,
+    isNested,
+    sectionVariant
+  );
+  if (collapseToIcons && !headerContent) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    SidebarItemStyled,
+    __spreadProps(__spreadValues({
+      as: "li",
+      "data-testid": dataTestId != null ? dataTestId : "sidebar-item",
+      style
+    }, rest), {
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        SidebarItemHeaderStyled,
+        {
+          isActive,
+          isInteractive: false,
+          isNested,
+          isSidebarCollapsed: collapseToIcons,
+          sectionVariant,
+          children: headerContent
+        }
+      )
+    })
+  );
+};
+SidebarItem.displayName = "SidebarItem";
+
+// src/components/SidebarSubList/SidebarSubList.styled.ts
+var import_styled5 = __toESM(require("@emotion/styled"));
+var SidebarSubListStyled = import_styled5.default.ul`
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+`;
+
+// src/components/SidebarSubList/SidebarSubList.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var SidebarSubList = (_a) => {
+  var _b = _a, {
+    children,
+    dataTestId,
+    style
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "dataTestId",
+    "style"
+  ]);
+  useSidebarContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SubListContext.Provider, { value: { isNested: true }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    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
+var import_styled6 = __toESM(require("@emotion/styled"));
+var SidebarContentStyled = import_styled6.default.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
+var import_jsx_runtime11 = require("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__ */ (0, import_jsx_runtime11.jsx)(
+    SidebarContentStyled,
+    __spreadProps(__spreadValues({
+      "data-testid": dataTestId != null ? dataTestId : "sidebar-content",
+      isSidebarCollapsed,
+      style
+    }, rest), {
+      children
+    })
+  );
+};
+SidebarContent.displayName = "Sidebar.Content";
+
+// src/components/SidebarToggle/SidebarToggle.tsx
+var import_react_icon2 = require("@dt-dds/react-icon");
+
+// src/components/SidebarToggle/SidebarToggle.styled.ts
+var import_styled7 = __toESM(require("@emotion/styled"));
+var import_react_icon_button2 = require("@dt-dds/react-icon-button");
+var SidebarToggleStyled = (0, import_styled7.default)(import_react_icon_button2.IconButton)`
+  ${({ isSidebarCollapsed }) => `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    > i {
+      transform: ${isSidebarCollapsed ? "rotate(180deg)" : ""};
+    }
+  `}
+`;
+
+// src/components/SidebarToggle/SidebarToggle.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var SidebarToggle = ({ onClick }) => {
+  const { isExpanded, isMobile, onToggle } = useSidebarContext();
+  const isSidebarCollapsed = !isMobile && !isExpanded;
+  const handleClick = onClick != null ? onClick : onToggle;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    SidebarToggleStyled,
+    {
+      "aria-expanded": !isSidebarCollapsed,
+      "aria-label": "Toggle sidebar navigation",
+      isSidebarCollapsed,
+      onClick: handleClick,
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_icon2.Icon, { code: "menu_open" })
+    }
+  );
+};
+SidebarToggle.displayName = "Sidebar.Toggle";
+
+// src/Sidebar.styled.ts
+var import_styled8 = __toESM(require("@emotion/styled"));
+var SidebarStyled = import_styled8.default.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
+var import_jsx_runtime13 = require("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 = (0, import_react18.useTheme)();
+  const isMobile = (0, import_react_core5.useMedia)(`(max-width: ${theme.breakpoints.mq3}px)`);
+  const [isBackdropVisible, setIsBackdropVisible] = (0, import_react17.useState)(false);
+  const [shouldShowSidebar, setShouldShowSidebar] = (0, import_react17.useState)(
+    !isMobile && isExpanded
+  );
+  const timeoutRef = (0, import_react17.useRef)(null);
+  (0, import_react17.useEffect)(() => {
+    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]);
+  (0, import_react17.useEffect)(() => {
+    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 = (0, import_react17.useCallback)(() => {
+    onToggle == null ? void 0 : onToggle(!isExpanded);
+  }, [onToggle, isExpanded]);
+  const contextValue = (0, import_react17.useMemo)(
+    () => ({
+      isExpanded,
+      isMobile,
+      onToggle: handleToggle
+    }),
+    [isExpanded, isMobile, handleToggle]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SidebarContextProvider, { value: contextValue, children: isMobile ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    SidebarBackdrop,
+    {
+      dataTestId: "mobile-backdrop",
+      isOpen: isBackdropVisible,
+      onBackdropClick: handleToggle,
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        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__ */ (0, import_jsx_runtime13.jsx)(
+    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;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Sidebar,
+  useSidebar
+});