import { j as jsxRuntimeExports } from "./jsx-runtime-ClFauRgV.esm.js";
import * as React from "react";
import React__default, { useState, useEffect, useMemo, useCallback } from "react";
import { useNavigate, useLocation, matchRoutes } from "react-router-dom";
import { L as ListContext, g as getListItemButtonUtilityClass, h as ButtonBase, l as listItemButtonClasses, i as Transition, u as useTheme, j as getTransitionProps, k as elementTypeAcceptingRef, m as getReactElementRef, r as reflow, n as elementAcceptingRef, o as chainPropTypes, p as HTMLElementType, q as useRtl, P as Paper, s as Modal, t as integerPropType, e as Tooltip, v as ListItem, w as ListItemIcon, x as default_1$1, f as Box, y as default_1$2, z as List, S as SearchBar, E as Typography$1, F as default_1$3 } from "./appbar-CF_DgfSS.esm.js";
import { u as useDefaultProps, e as _objectWithoutPropertiesLoose, _ as _extends, f as alpha_1, P as PropTypes, g as generateUtilityClass, h as duration, j as capitalize, k as interopRequireDefaultExports } from "./identifier-u4E_J1of.esm.js";
import { d as useEnhancedEffect, e as useForkRef, f as useTimeout, h as debounce, o as ownerWindow, r as requireCreateSvgIcon, T as Typography } from "./useAuth-CEQTm2rv.esm.js";
import { useTheme as useTheme$1, ClickAwayListener, IconButton, Icon, Popover, Paper as Paper$1 } from "@mui/material";
import { i as images } from "./images-DvZ6-RV8.esm.js";
/* empty css                     */
import { u as useLanguage } from "./useLangauge-BaiyBPxd.esm.js";
import { a as clsx, b as composeClasses, s as styled, r as rootShouldForwardProp, g as generateUtilityClasses, d as SvgIcon } from "./notification-Dr_nE2Dc.esm.js";
import { b as SearchStatus, S as Search } from "./tick-CCBMlWKE.esm.js";
import { g as getApiConfig } from "./api-config-GOys-syK.esm.js";
import { P as Pathname } from "./pathname.rental-VYOFVGX6.esm.js";
const _excluded$3 = ["alignItems", "autoFocus", "component", "children", "dense", "disableGutters", "divider", "focusVisibleClassName", "selected", "className"];
const overridesResolver$1 = (props, styles) => {
  const {
    ownerState
  } = props;
  return [styles.root, ownerState.dense && styles.dense, ownerState.alignItems === "flex-start" && styles.alignItemsFlexStart, ownerState.divider && styles.divider, !ownerState.disableGutters && styles.gutters];
};
const useUtilityClasses$2 = (ownerState) => {
  const {
    alignItems,
    classes,
    dense,
    disabled,
    disableGutters,
    divider,
    selected
  } = ownerState;
  const slots = {
    root: ["root", dense && "dense", !disableGutters && "gutters", divider && "divider", disabled && "disabled", alignItems === "flex-start" && "alignItemsFlexStart", selected && "selected"]
  };
  const composedClasses = composeClasses(slots, getListItemButtonUtilityClass, classes);
  return _extends({}, classes, composedClasses);
};
const ListItemButtonRoot = styled(ButtonBase, {
  shouldForwardProp: (prop) => rootShouldForwardProp(prop) || prop === "classes",
  name: "MuiListItemButton",
  slot: "Root",
  overridesResolver: overridesResolver$1
})(({
  theme,
  ownerState
}) => _extends({
  display: "flex",
  flexGrow: 1,
  justifyContent: "flex-start",
  alignItems: "center",
  position: "relative",
  textDecoration: "none",
  minWidth: 0,
  boxSizing: "border-box",
  textAlign: "left",
  paddingTop: 8,
  paddingBottom: 8,
  transition: theme.transitions.create("background-color", {
    duration: theme.transitions.duration.shortest
  }),
  "&:hover": {
    textDecoration: "none",
    backgroundColor: (theme.vars || theme).palette.action.hover,
    // Reset on touch devices, it doesn't add specificity
    "@media (hover: none)": {
      backgroundColor: "transparent"
    }
  },
  [`&.${listItemButtonClasses.selected}`]: {
    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha_1(theme.palette.primary.main, theme.palette.action.selectedOpacity),
    [`&.${listItemButtonClasses.focusVisible}`]: {
      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha_1(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
    }
  },
  [`&.${listItemButtonClasses.selected}:hover`]: {
    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha_1(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
    // Reset on touch devices, it doesn't add specificity
    "@media (hover: none)": {
      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha_1(theme.palette.primary.main, theme.palette.action.selectedOpacity)
    }
  },
  [`&.${listItemButtonClasses.focusVisible}`]: {
    backgroundColor: (theme.vars || theme).palette.action.focus
  },
  [`&.${listItemButtonClasses.disabled}`]: {
    opacity: (theme.vars || theme).palette.action.disabledOpacity
  }
}, ownerState.divider && {
  borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
  backgroundClip: "padding-box"
}, ownerState.alignItems === "flex-start" && {
  alignItems: "flex-start"
}, !ownerState.disableGutters && {
  paddingLeft: 16,
  paddingRight: 16
}, ownerState.dense && {
  paddingTop: 4,
  paddingBottom: 4
}));
const ListItemButton = /* @__PURE__ */ React.forwardRef(function ListItemButton2(inProps, ref) {
  const props = useDefaultProps({
    props: inProps,
    name: "MuiListItemButton"
  });
  const {
    alignItems = "center",
    autoFocus = false,
    component = "div",
    children,
    dense = false,
    disableGutters = false,
    divider = false,
    focusVisibleClassName,
    selected = false,
    className
  } = props, other = _objectWithoutPropertiesLoose(props, _excluded$3);
  const context = React.useContext(ListContext);
  const childContext = React.useMemo(() => ({
    dense: dense || context.dense || false,
    alignItems,
    disableGutters
  }), [alignItems, context.dense, dense, disableGutters]);
  const listItemRef = React.useRef(null);
  useEnhancedEffect(() => {
    if (autoFocus) {
      if (listItemRef.current) {
        listItemRef.current.focus();
      } else if (process.env.NODE_ENV !== "production") {
        console.error("MUI: Unable to set focus to a ListItemButton whose component has not been rendered.");
      }
    }
  }, [autoFocus]);
  const ownerState = _extends({}, props, {
    alignItems,
    dense: childContext.dense,
    disableGutters,
    divider,
    selected
  });
  const classes = useUtilityClasses$2(ownerState);
  const handleRef = useForkRef(listItemRef, ref);
  return /* @__PURE__ */ jsxRuntimeExports.jsx(ListContext.Provider, {
    value: childContext,
    children: /* @__PURE__ */ jsxRuntimeExports.jsx(ListItemButtonRoot, _extends({
      ref: handleRef,
      href: other.href || other.to,
      component: (other.href || other.to) && component === "div" ? "button" : component,
      focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
      ownerState,
      className: clsx(classes.root, className)
    }, other, {
      classes,
      children
    }))
  });
});
process.env.NODE_ENV !== "production" ? ListItemButton.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * Defines the `align-items` style property.
   * @default 'center'
   */
  alignItems: PropTypes.oneOf(["center", "flex-start"]),
  /**
   * If `true`, the list item is focused during the first mount.
   * Focus will also be triggered if the value changes from false to true.
   * @default false
   */
  autoFocus: PropTypes.bool,
  /**
   * The content of the component if a `ListItemSecondaryAction` is used it must
   * be the last child.
   */
  children: PropTypes.node,
  /**
   * Override or extend the styles applied to the component.
   */
  classes: PropTypes.object,
  /**
   * @ignore
   */
  className: PropTypes.string,
  /**
   * The component used for the root node.
   * Either a string to use a HTML element or a component.
   */
  component: PropTypes.elementType,
  /**
   * If `true`, compact vertical padding designed for keyboard and mouse input is used.
   * The prop defaults to the value inherited from the parent List component.
   * @default false
   */
  dense: PropTypes.bool,
  /**
   * If `true`, the component is disabled.
   * @default false
   */
  disabled: PropTypes.bool,
  /**
   * If `true`, the left and right padding is removed.
   * @default false
   */
  disableGutters: PropTypes.bool,
  /**
   * If `true`, a 1px light border is added to the bottom of the list item.
   * @default false
   */
  divider: PropTypes.bool,
  /**
   * This prop can help identify which element has keyboard focus.
   * The class name will be applied when the element gains the focus through keyboard interaction.
   * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
   * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
   * if needed.
   */
  focusVisibleClassName: PropTypes.string,
  /**
   * @ignore
   */
  href: PropTypes.string,
  /**
   * Use to apply selected styling.
   * @default false
   */
  selected: PropTypes.bool,
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
} : void 0;
function getCollapseUtilityClass(slot) {
  return generateUtilityClass("MuiCollapse", slot);
}
generateUtilityClasses("MuiCollapse", ["root", "horizontal", "vertical", "entered", "hidden", "wrapper", "wrapperInner"]);
const _excluded$2 = ["addEndListener", "children", "className", "collapsedSize", "component", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "orientation", "style", "timeout", "TransitionComponent"];
const useUtilityClasses$1 = (ownerState) => {
  const {
    orientation,
    classes
  } = ownerState;
  const slots = {
    root: ["root", `${orientation}`],
    entered: ["entered"],
    hidden: ["hidden"],
    wrapper: ["wrapper", `${orientation}`],
    wrapperInner: ["wrapperInner", `${orientation}`]
  };
  return composeClasses(slots, getCollapseUtilityClass, classes);
};
const CollapseRoot = styled("div", {
  name: "MuiCollapse",
  slot: "Root",
  overridesResolver: (props, styles) => {
    const {
      ownerState
    } = props;
    return [styles.root, styles[ownerState.orientation], ownerState.state === "entered" && styles.entered, ownerState.state === "exited" && !ownerState.in && ownerState.collapsedSize === "0px" && styles.hidden];
  }
})(({
  theme,
  ownerState
}) => _extends({
  height: 0,
  overflow: "hidden",
  transition: theme.transitions.create("height")
}, ownerState.orientation === "horizontal" && {
  height: "auto",
  width: 0,
  transition: theme.transitions.create("width")
}, ownerState.state === "entered" && _extends({
  height: "auto",
  overflow: "visible"
}, ownerState.orientation === "horizontal" && {
  width: "auto"
}), ownerState.state === "exited" && !ownerState.in && ownerState.collapsedSize === "0px" && {
  visibility: "hidden"
}));
const CollapseWrapper = styled("div", {
  name: "MuiCollapse",
  slot: "Wrapper",
  overridesResolver: (props, styles) => styles.wrapper
})(({
  ownerState
}) => _extends({
  // Hack to get children with a negative margin to not falsify the height computation.
  display: "flex",
  width: "100%"
}, ownerState.orientation === "horizontal" && {
  width: "auto",
  height: "100%"
}));
const CollapseWrapperInner = styled("div", {
  name: "MuiCollapse",
  slot: "WrapperInner",
  overridesResolver: (props, styles) => styles.wrapperInner
})(({
  ownerState
}) => _extends({
  width: "100%"
}, ownerState.orientation === "horizontal" && {
  width: "auto",
  height: "100%"
}));
const Collapse = /* @__PURE__ */ React.forwardRef(function Collapse2(inProps, ref) {
  const props = useDefaultProps({
    props: inProps,
    name: "MuiCollapse"
  });
  const {
    addEndListener,
    children,
    className,
    collapsedSize: collapsedSizeProp = "0px",
    component,
    easing,
    in: inProp,
    onEnter,
    onEntered,
    onEntering,
    onExit,
    onExited,
    onExiting,
    orientation = "vertical",
    style,
    timeout = duration.standard,
    // eslint-disable-next-line react/prop-types
    TransitionComponent = Transition
  } = props, other = _objectWithoutPropertiesLoose(props, _excluded$2);
  const ownerState = _extends({}, props, {
    orientation,
    collapsedSize: collapsedSizeProp
  });
  const classes = useUtilityClasses$1(ownerState);
  const theme = useTheme();
  const timer = useTimeout();
  const wrapperRef = React.useRef(null);
  const autoTransitionDuration = React.useRef();
  const collapsedSize = typeof collapsedSizeProp === "number" ? `${collapsedSizeProp}px` : collapsedSizeProp;
  const isHorizontal2 = orientation === "horizontal";
  const size = isHorizontal2 ? "width" : "height";
  const nodeRef = React.useRef(null);
  const handleRef = useForkRef(ref, nodeRef);
  const normalizedTransitionCallback = (callback) => (maybeIsAppearing) => {
    if (callback) {
      const node = nodeRef.current;
      if (maybeIsAppearing === void 0) {
        callback(node);
      } else {
        callback(node, maybeIsAppearing);
      }
    }
  };
  const getWrapperSize = () => wrapperRef.current ? wrapperRef.current[isHorizontal2 ? "clientWidth" : "clientHeight"] : 0;
  const handleEnter = normalizedTransitionCallback((node, isAppearing) => {
    if (wrapperRef.current && isHorizontal2) {
      wrapperRef.current.style.position = "absolute";
    }
    node.style[size] = collapsedSize;
    if (onEnter) {
      onEnter(node, isAppearing);
    }
  });
  const handleEntering = normalizedTransitionCallback((node, isAppearing) => {
    const wrapperSize = getWrapperSize();
    if (wrapperRef.current && isHorizontal2) {
      wrapperRef.current.style.position = "";
    }
    const {
      duration: transitionDuration,
      easing: transitionTimingFunction
    } = getTransitionProps({
      style,
      timeout,
      easing
    }, {
      mode: "enter"
    });
    if (timeout === "auto") {
      const duration2 = theme.transitions.getAutoHeightDuration(wrapperSize);
      node.style.transitionDuration = `${duration2}ms`;
      autoTransitionDuration.current = duration2;
    } else {
      node.style.transitionDuration = typeof transitionDuration === "string" ? transitionDuration : `${transitionDuration}ms`;
    }
    node.style[size] = `${wrapperSize}px`;
    node.style.transitionTimingFunction = transitionTimingFunction;
    if (onEntering) {
      onEntering(node, isAppearing);
    }
  });
  const handleEntered = normalizedTransitionCallback((node, isAppearing) => {
    node.style[size] = "auto";
    if (onEntered) {
      onEntered(node, isAppearing);
    }
  });
  const handleExit = normalizedTransitionCallback((node) => {
    node.style[size] = `${getWrapperSize()}px`;
    if (onExit) {
      onExit(node);
    }
  });
  const handleExited = normalizedTransitionCallback(onExited);
  const handleExiting = normalizedTransitionCallback((node) => {
    const wrapperSize = getWrapperSize();
    const {
      duration: transitionDuration,
      easing: transitionTimingFunction
    } = getTransitionProps({
      style,
      timeout,
      easing
    }, {
      mode: "exit"
    });
    if (timeout === "auto") {
      const duration2 = theme.transitions.getAutoHeightDuration(wrapperSize);
      node.style.transitionDuration = `${duration2}ms`;
      autoTransitionDuration.current = duration2;
    } else {
      node.style.transitionDuration = typeof transitionDuration === "string" ? transitionDuration : `${transitionDuration}ms`;
    }
    node.style[size] = collapsedSize;
    node.style.transitionTimingFunction = transitionTimingFunction;
    if (onExiting) {
      onExiting(node);
    }
  });
  const handleAddEndListener = (next) => {
    if (timeout === "auto") {
      timer.start(autoTransitionDuration.current || 0, next);
    }
    if (addEndListener) {
      addEndListener(nodeRef.current, next);
    }
  };
  return /* @__PURE__ */ jsxRuntimeExports.jsx(TransitionComponent, _extends({
    in: inProp,
    onEnter: handleEnter,
    onEntered: handleEntered,
    onEntering: handleEntering,
    onExit: handleExit,
    onExited: handleExited,
    onExiting: handleExiting,
    addEndListener: handleAddEndListener,
    nodeRef,
    timeout: timeout === "auto" ? null : timeout
  }, other, {
    children: (state, childProps) => /* @__PURE__ */ jsxRuntimeExports.jsx(CollapseRoot, _extends({
      as: component,
      className: clsx(classes.root, className, {
        "entered": classes.entered,
        "exited": !inProp && collapsedSize === "0px" && classes.hidden
      }[state]),
      style: _extends({
        [isHorizontal2 ? "minWidth" : "minHeight"]: collapsedSize
      }, style),
      ref: handleRef
    }, childProps, {
      // `ownerState` is set after `childProps` to override any existing `ownerState` property in `childProps`
      // that might have been forwarded from the Transition component.
      ownerState: _extends({}, ownerState, {
        state
      }),
      children: /* @__PURE__ */ jsxRuntimeExports.jsx(CollapseWrapper, {
        ownerState: _extends({}, ownerState, {
          state
        }),
        className: classes.wrapper,
        ref: wrapperRef,
        children: /* @__PURE__ */ jsxRuntimeExports.jsx(CollapseWrapperInner, {
          ownerState: _extends({}, ownerState, {
            state
          }),
          className: classes.wrapperInner,
          children
        })
      })
    }))
  }));
});
process.env.NODE_ENV !== "production" ? Collapse.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * Add a custom transition end trigger. Called with the transitioning DOM
   * node and a done callback. Allows for more fine grained transition end
   * logic. Note: Timeouts are still used as a fallback if provided.
   */
  addEndListener: PropTypes.func,
  /**
   * The content node to be collapsed.
   */
  children: PropTypes.node,
  /**
   * Override or extend the styles applied to the component.
   */
  classes: PropTypes.object,
  /**
   * @ignore
   */
  className: PropTypes.string,
  /**
   * The width (horizontal) or height (vertical) of the container when collapsed.
   * @default '0px'
   */
  collapsedSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  /**
   * The component used for the root node.
   * Either a string to use a HTML element or a component.
   */
  component: elementTypeAcceptingRef,
  /**
   * The transition timing function.
   * You may specify a single easing or a object containing enter and exit values.
   */
  easing: PropTypes.oneOfType([PropTypes.shape({
    enter: PropTypes.string,
    exit: PropTypes.string
  }), PropTypes.string]),
  /**
   * If `true`, the component will transition in.
   */
  in: PropTypes.bool,
  /**
   * @ignore
   */
  onEnter: PropTypes.func,
  /**
   * @ignore
   */
  onEntered: PropTypes.func,
  /**
   * @ignore
   */
  onEntering: PropTypes.func,
  /**
   * @ignore
   */
  onExit: PropTypes.func,
  /**
   * @ignore
   */
  onExited: PropTypes.func,
  /**
   * @ignore
   */
  onExiting: PropTypes.func,
  /**
   * The transition orientation.
   * @default 'vertical'
   */
  orientation: PropTypes.oneOf(["horizontal", "vertical"]),
  /**
   * @ignore
   */
  style: PropTypes.object,
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
  /**
   * The duration for the transition, in milliseconds.
   * You may specify a single timeout for all transitions, or individually with an object.
   *
   * Set to 'auto' to automatically calculate transition time based on height.
   * @default duration.standard
   */
  timeout: PropTypes.oneOfType([PropTypes.oneOf(["auto"]), PropTypes.number, PropTypes.shape({
    appear: PropTypes.number,
    enter: PropTypes.number,
    exit: PropTypes.number
  })])
} : void 0;
Collapse.muiSupportAuto = true;
const _excluded$1 = ["addEndListener", "appear", "children", "container", "direction", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
function getTranslateValue(direction, node, resolvedContainer) {
  const rect = node.getBoundingClientRect();
  const containerRect = resolvedContainer && resolvedContainer.getBoundingClientRect();
  const containerWindow = ownerWindow(node);
  let transform;
  if (node.fakeTransform) {
    transform = node.fakeTransform;
  } else {
    const computedStyle = containerWindow.getComputedStyle(node);
    transform = computedStyle.getPropertyValue("-webkit-transform") || computedStyle.getPropertyValue("transform");
  }
  let offsetX = 0;
  let offsetY = 0;
  if (transform && transform !== "none" && typeof transform === "string") {
    const transformValues = transform.split("(")[1].split(")")[0].split(",");
    offsetX = parseInt(transformValues[4], 10);
    offsetY = parseInt(transformValues[5], 10);
  }
  if (direction === "left") {
    if (containerRect) {
      return `translateX(${containerRect.right + offsetX - rect.left}px)`;
    }
    return `translateX(${containerWindow.innerWidth + offsetX - rect.left}px)`;
  }
  if (direction === "right") {
    if (containerRect) {
      return `translateX(-${rect.right - containerRect.left - offsetX}px)`;
    }
    return `translateX(-${rect.left + rect.width - offsetX}px)`;
  }
  if (direction === "up") {
    if (containerRect) {
      return `translateY(${containerRect.bottom + offsetY - rect.top}px)`;
    }
    return `translateY(${containerWindow.innerHeight + offsetY - rect.top}px)`;
  }
  if (containerRect) {
    return `translateY(-${rect.top - containerRect.top + rect.height - offsetY}px)`;
  }
  return `translateY(-${rect.top + rect.height - offsetY}px)`;
}
function resolveContainer(containerPropProp) {
  return typeof containerPropProp === "function" ? containerPropProp() : containerPropProp;
}
function setTranslateValue(direction, node, containerProp) {
  const resolvedContainer = resolveContainer(containerProp);
  const transform = getTranslateValue(direction, node, resolvedContainer);
  if (transform) {
    node.style.webkitTransform = transform;
    node.style.transform = transform;
  }
}
const Slide = /* @__PURE__ */ React.forwardRef(function Slide2(props, ref) {
  const theme = useTheme();
  const defaultEasing = {
    enter: theme.transitions.easing.easeOut,
    exit: theme.transitions.easing.sharp
  };
  const defaultTimeout = {
    enter: theme.transitions.duration.enteringScreen,
    exit: theme.transitions.duration.leavingScreen
  };
  const {
    addEndListener,
    appear = true,
    children,
    container: containerProp,
    direction = "down",
    easing: easingProp = defaultEasing,
    in: inProp,
    onEnter,
    onEntered,
    onEntering,
    onExit,
    onExited,
    onExiting,
    style,
    timeout = defaultTimeout,
    // eslint-disable-next-line react/prop-types
    TransitionComponent = Transition
  } = props, other = _objectWithoutPropertiesLoose(props, _excluded$1);
  const childrenRef = React.useRef(null);
  const handleRef = useForkRef(getReactElementRef(children), childrenRef, ref);
  const normalizedTransitionCallback = (callback) => (isAppearing) => {
    if (callback) {
      if (isAppearing === void 0) {
        callback(childrenRef.current);
      } else {
        callback(childrenRef.current, isAppearing);
      }
    }
  };
  const handleEnter = normalizedTransitionCallback((node, isAppearing) => {
    setTranslateValue(direction, node, containerProp);
    reflow(node);
    if (onEnter) {
      onEnter(node, isAppearing);
    }
  });
  const handleEntering = normalizedTransitionCallback((node, isAppearing) => {
    const transitionProps = getTransitionProps({
      timeout,
      style,
      easing: easingProp
    }, {
      mode: "enter"
    });
    node.style.webkitTransition = theme.transitions.create("-webkit-transform", _extends({}, transitionProps));
    node.style.transition = theme.transitions.create("transform", _extends({}, transitionProps));
    node.style.webkitTransform = "none";
    node.style.transform = "none";
    if (onEntering) {
      onEntering(node, isAppearing);
    }
  });
  const handleEntered = normalizedTransitionCallback(onEntered);
  const handleExiting = normalizedTransitionCallback(onExiting);
  const handleExit = normalizedTransitionCallback((node) => {
    const transitionProps = getTransitionProps({
      timeout,
      style,
      easing: easingProp
    }, {
      mode: "exit"
    });
    node.style.webkitTransition = theme.transitions.create("-webkit-transform", transitionProps);
    node.style.transition = theme.transitions.create("transform", transitionProps);
    setTranslateValue(direction, node, containerProp);
    if (onExit) {
      onExit(node);
    }
  });
  const handleExited = normalizedTransitionCallback((node) => {
    node.style.webkitTransition = "";
    node.style.transition = "";
    if (onExited) {
      onExited(node);
    }
  });
  const handleAddEndListener = (next) => {
    if (addEndListener) {
      addEndListener(childrenRef.current, next);
    }
  };
  const updatePosition = React.useCallback(() => {
    if (childrenRef.current) {
      setTranslateValue(direction, childrenRef.current, containerProp);
    }
  }, [direction, containerProp]);
  React.useEffect(() => {
    if (inProp || direction === "down" || direction === "right") {
      return void 0;
    }
    const handleResize = debounce(() => {
      if (childrenRef.current) {
        setTranslateValue(direction, childrenRef.current, containerProp);
      }
    });
    const containerWindow = ownerWindow(childrenRef.current);
    containerWindow.addEventListener("resize", handleResize);
    return () => {
      handleResize.clear();
      containerWindow.removeEventListener("resize", handleResize);
    };
  }, [direction, inProp, containerProp]);
  React.useEffect(() => {
    if (!inProp) {
      updatePosition();
    }
  }, [inProp, updatePosition]);
  return /* @__PURE__ */ jsxRuntimeExports.jsx(TransitionComponent, _extends({
    nodeRef: childrenRef,
    onEnter: handleEnter,
    onEntered: handleEntered,
    onEntering: handleEntering,
    onExit: handleExit,
    onExited: handleExited,
    onExiting: handleExiting,
    addEndListener: handleAddEndListener,
    appear,
    in: inProp,
    timeout
  }, other, {
    children: (state, childProps) => {
      return /* @__PURE__ */ React.cloneElement(children, _extends({
        ref: handleRef,
        style: _extends({
          visibility: state === "exited" && !inProp ? "hidden" : void 0
        }, style, children.props.style)
      }, childProps));
    }
  }));
});
process.env.NODE_ENV !== "production" ? Slide.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * Add a custom transition end trigger. Called with the transitioning DOM
   * node and a done callback. Allows for more fine grained transition end
   * logic. Note: Timeouts are still used as a fallback if provided.
   */
  addEndListener: PropTypes.func,
  /**
   * Perform the enter transition when it first mounts if `in` is also `true`.
   * Set this to `false` to disable this behavior.
   * @default true
   */
  appear: PropTypes.bool,
  /**
   * A single child content element.
   */
  children: elementAcceptingRef.isRequired,
  /**
   * An HTML element, or a function that returns one.
   * It's used to set the container the Slide is transitioning from.
   */
  container: chainPropTypes(PropTypes.oneOfType([HTMLElementType, PropTypes.func]), (props) => {
    if (props.open) {
      const resolvedContainer = resolveContainer(props.container);
      if (resolvedContainer && resolvedContainer.nodeType === 1) {
        const box = resolvedContainer.getBoundingClientRect();
        if (process.env.NODE_ENV !== "test" && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
          return new Error(["MUI: The `container` prop provided to the component is invalid.", "The anchor element should be part of the document layout.", "Make sure the element is present in the document or that it's not display none."].join("\n"));
        }
      } else if (!resolvedContainer || typeof resolvedContainer.getBoundingClientRect !== "function" || resolvedContainer.contextElement != null && resolvedContainer.contextElement.nodeType !== 1) {
        return new Error(["MUI: The `container` prop provided to the component is invalid.", "It should be an HTML element instance."].join("\n"));
      }
    }
    return null;
  }),
  /**
   * Direction the child node will enter from.
   * @default 'down'
   */
  direction: PropTypes.oneOf(["down", "left", "right", "up"]),
  /**
   * The transition timing function.
   * You may specify a single easing or a object containing enter and exit values.
   * @default {
   *   enter: theme.transitions.easing.easeOut,
   *   exit: theme.transitions.easing.sharp,
   * }
   */
  easing: PropTypes.oneOfType([PropTypes.shape({
    enter: PropTypes.string,
    exit: PropTypes.string
  }), PropTypes.string]),
  /**
   * If `true`, the component will transition in.
   */
  in: PropTypes.bool,
  /**
   * @ignore
   */
  onEnter: PropTypes.func,
  /**
   * @ignore
   */
  onEntered: PropTypes.func,
  /**
   * @ignore
   */
  onEntering: PropTypes.func,
  /**
   * @ignore
   */
  onExit: PropTypes.func,
  /**
   * @ignore
   */
  onExited: PropTypes.func,
  /**
   * @ignore
   */
  onExiting: PropTypes.func,
  /**
   * @ignore
   */
  style: PropTypes.object,
  /**
   * The duration for the transition, in milliseconds.
   * You may specify a single timeout for all transitions, or individually with an object.
   * @default {
   *   enter: theme.transitions.duration.enteringScreen,
   *   exit: theme.transitions.duration.leavingScreen,
   * }
   */
  timeout: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
    appear: PropTypes.number,
    enter: PropTypes.number,
    exit: PropTypes.number
  })])
} : void 0;
function getDrawerUtilityClass(slot) {
  return generateUtilityClass("MuiDrawer", slot);
}
generateUtilityClasses("MuiDrawer", ["root", "docked", "paper", "paperAnchorLeft", "paperAnchorRight", "paperAnchorTop", "paperAnchorBottom", "paperAnchorDockedLeft", "paperAnchorDockedRight", "paperAnchorDockedTop", "paperAnchorDockedBottom", "modal"]);
const _excluded = ["BackdropProps"], _excluded2 = ["anchor", "BackdropProps", "children", "className", "elevation", "hideBackdrop", "ModalProps", "onClose", "open", "PaperProps", "SlideProps", "TransitionComponent", "transitionDuration", "variant"];
const overridesResolver = (props, styles) => {
  const {
    ownerState
  } = props;
  return [styles.root, (ownerState.variant === "permanent" || ownerState.variant === "persistent") && styles.docked, styles.modal];
};
const useUtilityClasses = (ownerState) => {
  const {
    classes,
    anchor,
    variant
  } = ownerState;
  const slots = {
    root: ["root"],
    docked: [(variant === "permanent" || variant === "persistent") && "docked"],
    modal: ["modal"],
    paper: ["paper", `paperAnchor${capitalize(anchor)}`, variant !== "temporary" && `paperAnchorDocked${capitalize(anchor)}`]
  };
  return composeClasses(slots, getDrawerUtilityClass, classes);
};
const DrawerRoot = styled(Modal, {
  name: "MuiDrawer",
  slot: "Root",
  overridesResolver
})(({
  theme
}) => ({
  zIndex: (theme.vars || theme).zIndex.drawer
}));
const DrawerDockedRoot = styled("div", {
  shouldForwardProp: rootShouldForwardProp,
  name: "MuiDrawer",
  slot: "Docked",
  skipVariantsResolver: false,
  overridesResolver
})({
  flex: "0 0 auto"
});
const DrawerPaper = styled(Paper, {
  name: "MuiDrawer",
  slot: "Paper",
  overridesResolver: (props, styles) => {
    const {
      ownerState
    } = props;
    return [styles.paper, styles[`paperAnchor${capitalize(ownerState.anchor)}`], ownerState.variant !== "temporary" && styles[`paperAnchorDocked${capitalize(ownerState.anchor)}`]];
  }
})(({
  theme,
  ownerState
}) => _extends({
  overflowY: "auto",
  display: "flex",
  flexDirection: "column",
  height: "100%",
  flex: "1 0 auto",
  zIndex: (theme.vars || theme).zIndex.drawer,
  // Add iOS momentum scrolling for iOS < 13.0
  WebkitOverflowScrolling: "touch",
  // temporary style
  position: "fixed",
  top: 0,
  // We disable the focus ring for mouse, touch and keyboard users.
  // At some point, it would be better to keep it for keyboard users.
  // :focus-ring CSS pseudo-class will help.
  outline: 0
}, ownerState.anchor === "left" && {
  left: 0
}, ownerState.anchor === "top" && {
  top: 0,
  left: 0,
  right: 0,
  height: "auto",
  maxHeight: "100%"
}, ownerState.anchor === "right" && {
  right: 0
}, ownerState.anchor === "bottom" && {
  top: "auto",
  left: 0,
  bottom: 0,
  right: 0,
  height: "auto",
  maxHeight: "100%"
}, ownerState.anchor === "left" && ownerState.variant !== "temporary" && {
  borderRight: `1px solid ${(theme.vars || theme).palette.divider}`
}, ownerState.anchor === "top" && ownerState.variant !== "temporary" && {
  borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
}, ownerState.anchor === "right" && ownerState.variant !== "temporary" && {
  borderLeft: `1px solid ${(theme.vars || theme).palette.divider}`
}, ownerState.anchor === "bottom" && ownerState.variant !== "temporary" && {
  borderTop: `1px solid ${(theme.vars || theme).palette.divider}`
}));
const oppositeDirection = {
  left: "right",
  right: "left",
  top: "down",
  bottom: "up"
};
function isHorizontal(anchor) {
  return ["left", "right"].indexOf(anchor) !== -1;
}
function getAnchor({
  direction
}, anchor) {
  return direction === "rtl" && isHorizontal(anchor) ? oppositeDirection[anchor] : anchor;
}
const Drawer$1 = /* @__PURE__ */ React.forwardRef(function Drawer(inProps, ref) {
  const props = useDefaultProps({
    props: inProps,
    name: "MuiDrawer"
  });
  const theme = useTheme();
  const isRtl = useRtl();
  const defaultTransitionDuration = {
    enter: theme.transitions.duration.enteringScreen,
    exit: theme.transitions.duration.leavingScreen
  };
  const {
    anchor: anchorProp = "left",
    BackdropProps,
    children,
    className,
    elevation = 16,
    hideBackdrop = false,
    ModalProps: {
      BackdropProps: BackdropPropsProp
    } = {},
    onClose,
    open = false,
    PaperProps = {},
    SlideProps,
    // eslint-disable-next-line react/prop-types
    TransitionComponent = Slide,
    transitionDuration = defaultTransitionDuration,
    variant = "temporary"
  } = props, ModalProps = _objectWithoutPropertiesLoose(props.ModalProps, _excluded), other = _objectWithoutPropertiesLoose(props, _excluded2);
  const mounted = React.useRef(false);
  React.useEffect(() => {
    mounted.current = true;
  }, []);
  const anchorInvariant = getAnchor({
    direction: isRtl ? "rtl" : "ltr"
  }, anchorProp);
  const anchor = anchorProp;
  const ownerState = _extends({}, props, {
    anchor,
    elevation,
    open,
    variant
  }, other);
  const classes = useUtilityClasses(ownerState);
  const drawer = /* @__PURE__ */ jsxRuntimeExports.jsx(DrawerPaper, _extends({
    elevation: variant === "temporary" ? elevation : 0,
    square: true
  }, PaperProps, {
    className: clsx(classes.paper, PaperProps.className),
    ownerState,
    children
  }));
  if (variant === "permanent") {
    return /* @__PURE__ */ jsxRuntimeExports.jsx(DrawerDockedRoot, _extends({
      className: clsx(classes.root, classes.docked, className),
      ownerState,
      ref
    }, other, {
      children: drawer
    }));
  }
  const slidingDrawer = /* @__PURE__ */ jsxRuntimeExports.jsx(TransitionComponent, _extends({
    in: open,
    direction: oppositeDirection[anchorInvariant],
    timeout: transitionDuration,
    appear: mounted.current
  }, SlideProps, {
    children: drawer
  }));
  if (variant === "persistent") {
    return /* @__PURE__ */ jsxRuntimeExports.jsx(DrawerDockedRoot, _extends({
      className: clsx(classes.root, classes.docked, className),
      ownerState,
      ref
    }, other, {
      children: slidingDrawer
    }));
  }
  return /* @__PURE__ */ jsxRuntimeExports.jsx(DrawerRoot, _extends({
    BackdropProps: _extends({}, BackdropProps, BackdropPropsProp, {
      transitionDuration
    }),
    className: clsx(classes.root, classes.modal, className),
    open,
    ownerState,
    onClose,
    hideBackdrop,
    ref
  }, other, ModalProps, {
    children: slidingDrawer
  }));
});
process.env.NODE_ENV !== "production" ? Drawer$1.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * Side from which the drawer will appear.
   * @default 'left'
   */
  anchor: PropTypes.oneOf(["bottom", "left", "right", "top"]),
  /**
   * @ignore
   */
  BackdropProps: PropTypes.object,
  /**
   * The content of the component.
   */
  children: PropTypes.node,
  /**
   * Override or extend the styles applied to the component.
   */
  classes: PropTypes.object,
  /**
   * @ignore
   */
  className: PropTypes.string,
  /**
   * The elevation of the drawer.
   * @default 16
   */
  elevation: integerPropType,
  /**
   * If `true`, the backdrop is not rendered.
   * @default false
   */
  hideBackdrop: PropTypes.bool,
  /**
   * Props applied to the [`Modal`](/material-ui/api/modal/) element.
   * @default {}
   */
  ModalProps: PropTypes.object,
  /**
   * Callback fired when the component requests to be closed.
   * The `reason` parameter can optionally be used to control the response to `onClose`.
   *
   * @param {object} event The event source of the callback.
   * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
   */
  onClose: PropTypes.func,
  /**
   * If `true`, the component is shown.
   * @default false
   */
  open: PropTypes.bool,
  /**
   * Props applied to the [`Paper`](/material-ui/api/paper/) element.
   * @default {}
   */
  PaperProps: PropTypes.object,
  /**
   * Props applied to the [`Slide`](/material-ui/api/slide/) element.
   */
  SlideProps: PropTypes.object,
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
  /**
   * The duration for the transition, in milliseconds.
   * You may specify a single timeout for all transitions, or individually with an object.
   * @default {
   *   enter: theme.transitions.duration.enteringScreen,
   *   exit: theme.transitions.duration.leavingScreen,
   * }
   */
  transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
    appear: PropTypes.number,
    enter: PropTypes.number,
    exit: PropTypes.number
  })]),
  /**
   * The variant to use.
   * @default 'temporary'
   */
  variant: PropTypes.oneOf(["permanent", "persistent", "temporary"])
} : void 0;
var ExpandLess = {};
var _interopRequireDefault = interopRequireDefaultExports;
Object.defineProperty(ExpandLess, "__esModule", {
  value: true
});
var default_1 = ExpandLess.default = void 0;
var _createSvgIcon = _interopRequireDefault(requireCreateSvgIcon());
var _jsxRuntime = jsxRuntimeExports;
default_1 = ExpandLess.default = (0, _createSvgIcon.default)(/* @__PURE__ */ (0, _jsxRuntime.jsx)("path", {
  d: "m12 8-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"
}), "ExpandLess");
const DynamicSvgIcon = ({
  svgPath,
  sx = {},
  color = "inherit",
  fontSize = "medium",
  ...props
}) => {
  const [svgContent, setSvgContent] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);
  const theme = useTheme$1();
  const getColorValue = (colorProp) => {
    if (colorProp === "inherit") return "currentColor";
    if (colorProp === "primary") return theme.palette.primary.main;
    if (colorProp === "secondary") return theme.palette.secondary.main;
    if (colorProp === "action") return theme.palette.action.active;
    if (colorProp === "disabled") return theme.palette.action.disabled;
    if (colorProp === "error") return theme.palette.error.main;
    if (colorProp === "info") return theme.palette.info.main;
    if (colorProp === "success") return theme.palette.success.main;
    if (colorProp === "warning") return theme.palette.warning.main;
    if (colorProp === "grey") return theme.palette.grey.main;
    return colorProp;
  };
  const actualColor = getColorValue(color);
  useEffect(() => {
    if (!svgPath) return;
    const fetchSvg = async () => {
      try {
        setLoading(true);
        setError(false);
        const response = await fetch(svgPath);
        if (!response.ok) throw new Error("Failed to fetch SVG");
        const svgText = await response.text();
        setSvgContent(svgText);
      } catch (err) {
        console.error("Error loading SVG:", err);
        setError(true);
      } finally {
        setLoading(false);
      }
    };
    fetchSvg();
  }, [svgPath]);
  const svgElements = useMemo(() => {
    if (!svgContent) return null;
    try {
      const parser = new DOMParser();
      const svgDoc = parser.parseFromString(svgContent, "image/svg+xml");
      const svgElement = svgDoc.querySelector("svg");
      if (!svgElement) return null;
      const convertToReactElement = (element, index = 0) => {
        const tagName = element.tagName.toLowerCase();
        const props2 = {};
        Array.from(element.attributes).forEach((attr) => {
          let propName = attr.name;
          if (propName === "class") propName = "className";
          if (propName.includes("-")) {
            propName = propName.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());
          }
          let propValue = attr.value;
          if (actualColor && actualColor !== "currentColor") {
            if (propName === "fill" && propValue !== "none") {
              propValue = actualColor;
            }
            if (propName === "stroke" && propValue !== "none") {
              propValue = actualColor;
            }
          }
          props2[propName] = propValue;
        });
        props2.key = index;
        const children = Array.from(element.children).map(
          (child, childIndex) => convertToReactElement(child, `${index}-${childIndex}`)
        );
        if (element.childNodes.length === 1 && element.childNodes[0].nodeType === 3) {
          children.push(element.textContent);
        }
        return React__default.createElement(tagName, props2, children.length > 0 ? children : null);
      };
      return Array.from(svgElement.children).map(
        (child, index) => convertToReactElement(child, index)
      );
    } catch (err) {
      console.error("Error parsing SVG:", err);
      return null;
    }
  }, [svgContent, actualColor]);
  if (loading) {
    return /* @__PURE__ */ jsxRuntimeExports.jsx(
      SvgIcon,
      {
        sx: {
          width: 24,
          height: 24,
          ...sx
        },
        color,
        fontSize,
        ...props,
        children: /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "12", cy: "12", r: "8", fill: "currentColor", opacity: "0.3" })
      }
    );
  }
  if (error || !svgElements) {
    return /* @__PURE__ */ jsxRuntimeExports.jsx(
      SvgIcon,
      {
        sx: {
          width: 24,
          height: 24,
          ...sx
        },
        color,
        fontSize,
        ...props,
        children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" })
      }
    );
  }
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
    SvgIcon,
    {
      sx: {
        color: actualColor,
        fill: "none",
        ...sx
      },
      fontSize,
      fontWeight: 500,
      viewBox: "0 0 16 16",
      ...props,
      children: svgElements
    }
  );
};
let drawerWidth;
const openedMixin = (theme) => {
  var _a, _b;
  return {
    width: drawerWidth,
    transition: theme.transitions.create("width", {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen
    }),
    overflowX: "hidden",
    display: "flex",
    flexDirection: "column",
    justifyContent: "space-between",
    borderRight: `1px solid ${(_a = theme.palette.theme) == null ? void 0 : _a.secondary[200]}`,
    backgroundColor: (_b = theme.palette.theme) == null ? void 0 : _b.secondary[100]
  };
};
const closedMixin = (theme) => {
  var _a, _b;
  return {
    transition: theme.transitions.create("width", {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen
    }),
    overflowX: "hidden",
    width: `calc(${theme.spacing(7)} + 1px)`,
    [theme.breakpoints.up("sm")]: {
      width: `calc(${theme.spacing(8)} + 1px)`
    },
    borderRight: `1px solid ${(_a = theme.palette.theme) == null ? void 0 : _a.secondary[200]}`,
    backgroundColor: (_b = theme.palette.theme) == null ? void 0 : _b.secondary[100]
  };
};
const Drawer2 = styled(Drawer$1, {
  shouldForwardProp: (prop) => prop !== "open"
})(({ theme, open }) => {
  var _a, _b, _c;
  return {
    width: drawerWidth,
    flexShrink: 0,
    whiteSpace: "nowrap",
    boxSizing: "border-box",
    ".MuiDrawer-paper": {
      backgroundColor: (_c = (_b = (_a = theme == null ? void 0 : theme.palette) == null ? void 0 : _a.theme) == null ? void 0 : _b.secondary) == null ? void 0 : _c[100],
      overflow: "visible !important",
      zIndex: 1201
    },
    ...open && {
      ...openedMixin(theme),
      "& .MuiDrawer-paper": openedMixin(theme)
    },
    ...!open && {
      ...closedMixin(theme),
      "& .MuiDrawer-paper": closedMixin(theme)
    }
  };
});
const DrawerHeader = styled("div")(({ theme }) => ({
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  padding: theme.spacing(0, 2),
  height: "60px"
}));
const SubmenuPopover = styled(Paper$1)(({ theme }) => {
  var _a, _b, _c, _d;
  return {
    minWidth: 250,
    maxWidth: 350,
    maxHeight: "80vh",
    overflowY: "auto",
    backgroundColor: ((_b = (_a = theme.palette.theme) == null ? void 0 : _a.secondary) == null ? void 0 : _b[100]) || theme.palette.background.paper,
    borderRadius: 12,
    boxShadow: "0 8px 32px rgba(0, 0, 0, 0.12)",
    border: `1px solid ${((_d = (_c = theme.palette.theme) == null ? void 0 : _c.secondary) == null ? void 0 : _d[200]) || theme.palette.divider}`,
    "&.MuiPaper-root": {
      transformOrigin: "top left"
    },
    "&::-webkit-scrollbar": {
      width: 6
    },
    "&::-webkit-scrollbar-track": {
      backgroundColor: "transparent"
    },
    "&::-webkit-scrollbar-thumb": {
      backgroundColor: "rgba(0, 0, 0, 0.2)",
      borderRadius: 3
    }
  };
});
const BreadcrumbContainer = styled(Box)(({ theme }) => {
  var _a, _b, _c, _d;
  return {
    padding: theme.spacing(1, 2),
    borderBottom: `1px solid ${((_b = (_a = theme.palette.theme) == null ? void 0 : _a.secondary) == null ? void 0 : _b[200]) || theme.palette.divider}`,
    backgroundColor: ((_d = (_c = theme.palette.theme) == null ? void 0 : _c.secondary) == null ? void 0 : _d[50]) || theme.palette.grey[50]
  };
});
const CollapsedSubmenu = ({
  menu,
  anchorEl,
  open,
  onClose,
  onItemClick,
  onSubmenuClick,
  getActiveClassIf,
  breadcrumb,
  onBreadcrumbClick
}) => {
  var _a;
  const renderBreadcrumb = () => {
    if (breadcrumb.length <= 1) return null;
    return /* @__PURE__ */ jsxRuntimeExports.jsx(BreadcrumbContainer, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { display: "flex", alignItems: "center", flexWrap: "wrap", gap: 0.5 }, children: breadcrumb.map((item, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(React__default.Fragment, { children: [
      index > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(default_1$1, { sx: { fontSize: 14, color: "theme.secondary.400" } }),
      /* @__PURE__ */ jsxRuntimeExports.jsx(
        Typography$1,
        {
          variant: "caption",
          onClick: () => onBreadcrumbClick(item, index),
          sx: {
            cursor: index < breadcrumb.length - 1 ? "pointer" : "default",
            color: index < breadcrumb.length - 1 ? "primary.main" : "theme.secondary.600",
            fontWeight: index === breadcrumb.length - 1 ? 600 : 400,
            fontSize: "0.75rem",
            "&:hover": index < breadcrumb.length - 1 ? {
              textDecoration: "underline"
            } : {}
          },
          children: item.label
        }
      )
    ] }, index)) }) });
  };
  return /* @__PURE__ */ jsxRuntimeExports.jsx(ClickAwayListener, { onClickAway: onClose, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
    Popover,
    {
      open,
      anchorEl,
      onClose,
      anchorOrigin: {
        vertical: "center",
        horizontal: "right"
      },
      transformOrigin: {
        vertical: "center",
        horizontal: "left"
      },
      PaperComponent: SubmenuPopover,
      elevation: 1,
      disableRestoreFocus: true,
      disableAutoFocus: true,
      disableEnforceFocus: true,
      sx: {
        ml: 0.5,
        "& .MuiPopover-paper": {
          // overflow: 'visible',
          marginTop: 0,
          pointerEvents: "auto"
          // border: '1px solid',
          // borderColor: 'theme.secondary.200',
        }
      },
      transitionDuration: 200,
      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { children: [
        renderBreadcrumb(),
        /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx(
            Typography$1,
            {
              variant: "subtitle2",
              sx: {
                px: 2,
                py: 1,
                fontWeight: 600,
                color: "theme.secondary.1000",
                borderBottom: breadcrumb.length > 1 ? "none" : "1px solid",
                borderColor: "theme.secondary.200",
                mb: 0.5,
                fontSize: "0.875rem"
              },
              children: menu.label
            }
          ),
          /* @__PURE__ */ jsxRuntimeExports.jsx(List, { component: "div", sx: { py: 0 }, children: (_a = menu.submenu) == null ? void 0 : _a.map((subItem, index) => {
            var _a2;
            const isActive = getActiveClassIf([...(subItem == null ? void 0 : subItem.connectedRoutes) || [], ...[subItem.link]]);
            return /* @__PURE__ */ jsxRuntimeExports.jsx(ListItem, { disablePadding: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
              ListItemButton,
              {
                onClick: (e) => {
                  var _a3;
                  if ((_a3 = subItem.submenu) == null ? void 0 : _a3.length) {
                    onSubmenuClick(subItem, e);
                  } else {
                    onItemClick(subItem);
                    onClose();
                  }
                },
                selected: isActive,
                sx: (theme) => {
                  var _a3, _b;
                  return {
                    minHeight: 32,
                    // px: 2,
                    // py: 0.75,
                    borderRadius: 1.5,
                    // mx: 1,
                    mb: 0.25,
                    position: "relative",
                    "&.Mui-selected": {
                      backgroundColor: (_a3 = theme.palette.theme) == null ? void 0 : _a3.primary[100],
                      color: "primary.main",
                      "& .MuiListItemIcon-root": {
                        color: "primary.main"
                      }
                    },
                    "&.Mui-selected:hover": {
                      backgroundColor: (_b = theme.palette.theme) == null ? void 0 : _b.primary[200]
                    },
                    "&:hover": {
                      backgroundColor: "rgba(0, 0, 0, 0.04)"
                    }
                  };
                },
                children: [
                  subItem.icon && /* @__PURE__ */ jsxRuntimeExports.jsx(ListItemIcon, { sx: { minWidth: 32 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                    "img",
                    {
                      src: subItem.icon,
                      alt: subItem.label + " icon",
                      style: { opacity: 0.8 }
                    }
                  ) }),
                  /* @__PURE__ */ jsxRuntimeExports.jsx(
                    Typography,
                    {
                      type: "s3",
                      weight: "normal",
                      color: "theme.secondary.1000",
                      sx: {
                        flexGrow: 1,
                        fontSize: "0.875rem",
                        lineHeight: 1.4
                      },
                      children: subItem.label
                    }
                  ),
                  ((_a2 = subItem.submenu) == null ? void 0 : _a2.length) > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
                    default_1$1,
                    {
                      sx: {
                        fontSize: 18,
                        color: "theme.secondary.500",
                        ml: 1
                      }
                    }
                  )
                ]
              }
            ) }, index);
          }) })
        ] })
      ] })
    }
  ) });
};
const Sidebar = (props) => {
  const navigate = useNavigate();
  const currentLocation = useLocation();
  const { currentLanguage } = useLanguage();
  const isRtl = useMemo(() => (currentLanguage == null ? void 0 : currentLanguage.direction) === "rtl", [currentLanguage]);
  const [collapsedSubmenuState, setCollapsedSubmenuState] = useState({
    open: false,
    anchorEl: null,
    menu: null,
    breadcrumb: []
  });
  const [menus, setMenus] = useState([]);
  const [search, setSearch] = useState("");
  const [openSubmenuArray, setOpenSubmenuArray] = useState([]);
  const [isOpenSearchTooltop, setIsOpenSearchTooltop] = useState(false);
  const getActiveClassIf = useCallback(
    (paths) => {
      const shouldMatch = Array.isArray(paths) ? paths.map((path) => ({ path })) : [{ path: paths }];
      return Boolean(matchRoutes(shouldMatch, currentLocation));
    },
    [currentLocation]
  );
  const isSubmenuActive = useCallback(
    (menu) => {
      var _a;
      if (!((_a = menu.submenu) == null ? void 0 : _a.length)) return false;
      for (const subItem of menu.submenu) {
        const isActive = getActiveClassIf([...(subItem == null ? void 0 : subItem.connectedRoutes) || [], ...[subItem.link]]);
        if (isActive || isSubmenuActive(subItem)) {
          return true;
        }
      }
      return false;
    },
    [getActiveClassIf]
  );
  const getAllMenuPaths = useCallback((menu) => {
    var _a, _b;
    const paths = [];
    if (menu.link) {
      paths.push(menu.link);
    }
    if ((_a = menu.connectedRoutes) == null ? void 0 : _a.length) {
      paths.push(...menu.connectedRoutes);
    }
    if ((_b = menu.submenu) == null ? void 0 : _b.length) {
      menu.submenu.forEach((subItem) => {
        paths.push(...getAllMenuPaths(subItem));
      });
    }
    return paths;
  }, []);
  const handleCollapsedMenuClick = useCallback(
    (event, menu) => {
      var _a, _b;
      event.stopPropagation();
      if (!props.open && ((_a = menu.submenu) == null ? void 0 : _a.length) > 0) {
        if (collapsedSubmenuState.open && ((_b = collapsedSubmenuState.menu) == null ? void 0 : _b.label) === menu.label) {
          setCollapsedSubmenuState({
            open: false,
            anchorEl: null,
            menu: null,
            breadcrumb: []
          });
        } else {
          setCollapsedSubmenuState({
            open: true,
            anchorEl: event.currentTarget,
            menu,
            breadcrumb: [menu]
          });
        }
      }
    },
    [props.open, collapsedSubmenuState]
  );
  const handleCollapsedSubmenuClick = useCallback((item, event) => {
    var _a;
    if ((_a = item.submenu) == null ? void 0 : _a.length) {
      setCollapsedSubmenuState((prev) => ({
        ...prev,
        menu: item,
        breadcrumb: [...prev.breadcrumb, item]
      }));
    }
  }, []);
  const handleBreadcrumbClick = useCallback((item, index) => {
    setCollapsedSubmenuState((prev) => ({
      ...prev,
      menu: item,
      breadcrumb: prev.breadcrumb.slice(0, index + 1)
    }));
  }, []);
  const handleCollapsedSubmenuClose = useCallback(() => {
    setCollapsedSubmenuState({
      open: false,
      anchorEl: null,
      menu: null,
      breadcrumb: []
    });
  }, []);
  const handleSubmenuItemClick = useCallback(
    (item) => {
      navigate(item.link);
    },
    [navigate]
  );
  const handleMenuClick = useCallback(
    (menu, parent, index) => {
      var _a, _b, _c, _d;
      if (!props.open && ((_a = menu.submenu) == null ? void 0 : _a.length) > 0) {
        return;
      }
      if (!((_b = menu.submenu) == null ? void 0 : _b.length)) {
        navigate(menu.link);
        if (!parent) {
          setOpenSubmenuArray([]);
        }
      } else if (((_c = menu.submenu) == null ? void 0 : _c.length) && ((_d = menu.submenu[index]) == null ? void 0 : _d.link)) {
        navigate(`${menu.link}${menu.submenu[index].link}`);
      } else {
        const menuKey = `${(parent == null ? void 0 : parent.label) || ""}-${menu.label}`;
        if (openSubmenuArray.includes(menuKey)) {
          if (parent) {
            const newSubArray = openSubmenuArray.filter((f) => f !== menuKey);
            setOpenSubmenuArray([...newSubArray]);
          } else {
            setOpenSubmenuArray([]);
          }
        } else {
          if (parent) {
            setOpenSubmenuArray([...openSubmenuArray, menuKey]);
          } else {
            setOpenSubmenuArray([menuKey]);
          }
        }
      }
    },
    [props.open, navigate, openSubmenuArray]
  );
  const filterMenuOnSearch = useCallback((menu, search2) => {
    return menu.filter((m) => {
      var _a, _b, _c, _d;
      if ((_b = (_a = m == null ? void 0 : m.label) == null ? void 0 : _a.toLowerCase()) == null ? void 0 : _b.includes(search2)) {
        return m;
      } else if ((_c = m == null ? void 0 : m.submenu) == null ? void 0 : _c.length) {
        m.submenu = filterMenuOnSearch(m == null ? void 0 : m.submenu, search2);
        return ((_d = m.submenu) == null ? void 0 : _d.length) > 0 ? m : null;
      }
      return null;
    }).filter(Boolean);
  }, []);
  const handleSidebarSearch = useCallback(
    (search2) => {
      if (!search2) {
        setMenus(props.menu || []);
      } else {
        const searchTerm = search2.toLowerCase();
        const menuItems = (props == null ? void 0 : props.menu) ? JSON.parse(JSON.stringify(props.menu)) : [];
        const filteredMenu = filterMenuOnSearch(menuItems, searchTerm);
        setMenus(filteredMenu);
      }
    },
    [props.menu, filterMenuOnSearch]
  );
  const handleOpenSearchTooltip = useCallback(() => setIsOpenSearchTooltop(true), []);
  const handleCloseSearchTooltip = useCallback(() => setIsOpenSearchTooltop(false), []);
  const renderMenu = useCallback(
    (menus2, parent, level) => {
      return menus2 == null ? void 0 : menus2.map((menu, index) => {
        var _a, _b;
        const menuKey = `${(parent == null ? void 0 : parent.label) || ""}-${menu.label}`;
        const isMenuActive = getActiveClassIf([...(menu == null ? void 0 : menu.connectedRoutes) || [], ...[menu.link]]);
        const hasActiveSubmenu = !props.open && isSubmenuActive(menu);
        const shouldHighlightParent = isMenuActive || hasActiveSubmenu;
        return /* @__PURE__ */ jsxRuntimeExports.jsx(
          Tooltip,
          {
            title: menu.label,
            placement: "right",
            arrow: true,
            disableHoverListener: props.open,
            disableFocusListener: props.open,
            disableTouchListener: props.open,
            children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
              ListItem,
              {
                disablePadding: true,
                sx: {
                  display: "block",
                  // mb: 0.5,
                  ...isRtl && {
                    padding: 0
                  }
                },
                children: [
                  /* @__PURE__ */ jsxRuntimeExports.jsxs(
                    ListItemButton,
                    {
                      onClick: (e) => {
                        var _a2;
                        if (!props.open && ((_a2 = menu.submenu) == null ? void 0 : _a2.length) > 0) {
                          handleCollapsedMenuClick(e, menu);
                        } else {
                          handleMenuClick(menu, parent, (menu == null ? void 0 : menu.submenu) ? -1 : index);
                        }
                      },
                      selected: shouldHighlightParent,
                      sx: (theme) => {
                        var _a2, _b2, _c, _d, _e, _f;
                        return {
                          minHeight: props.open ? 32 : 32,
                          justifyContent: props.open ? "initial" : "center",
                          display: "flex",
                          alignItems: "center",
                          borderRadius: 2,
                          gap: 1,
                          // mx: props.open ? 1 : 0.5,
                          // px: props.open ? 2 : 1,
                          // py: 1,
                          position: "relative",
                          transition: "all 0.2s ease-in-out",
                          "&.Mui-selected": {
                            backgroundColor: (_a2 = theme.palette.theme) == null ? void 0 : _a2.primary[100],
                            color: (_b2 = theme.palette.theme) == null ? void 0 : _b2.primary[800],
                            "& .MuiListItemIcon-root": {
                              color: (_c = theme.palette.theme) == null ? void 0 : _c.primary[800]
                            },
                            "& .MuiTypography-root": {
                              color: (_d = theme.palette.theme) == null ? void 0 : _d.primary[800],
                              fontWeight: 500
                            }
                          },
                          "&.Mui-selected:hover": {
                            backgroundColor: (_e = theme.palette.theme) == null ? void 0 : _e.primary[200]
                          },
                          "&:hover": {
                            backgroundColor: props.open ? "rgba(0, 0, 0, 0.04)" : "rgba(0, 0, 0, 0.08)",
                            transform: props.open ? "none" : "scale(1.02)"
                          },
                          ...!props.open && ((_f = menu.submenu) == null ? void 0 : _f.length) > 0 && {
                            cursor: "pointer",
                            "&::after": {
                              content: '""',
                              position: "absolute",
                              ...isRtl ? {
                                left: 8,
                                borderRight: "5px solid"
                              } : {
                                right: 8,
                                borderLeft: "5px solid"
                              },
                              top: "25%",
                              transform: "translateY(-50%)",
                              width: 0,
                              height: 0,
                              borderTop: "4px solid transparent",
                              borderBottom: "4px solid transparent",
                              borderColor: "currentColor transparent transparent transparent",
                              opacity: 0.7
                            }
                          }
                        };
                      },
                      children: [
                        /* @__PURE__ */ jsxRuntimeExports.jsx(
                          ListItemIcon,
                          {
                            sx: {
                              minWidth: props.open ? "auto" : 0,
                              // mr: props.open ? 1 : 'auto',
                              ...isRtl ? { ml: 0 } : {},
                              justifyContent: "center",
                              display: "flex",
                              alignItems: "center",
                              transition: "all 0.2s ease-in-out"
                            },
                            children: menu.icon ? /* @__PURE__ */ jsxRuntimeExports.jsx(DynamicSvgIcon, { svgPath: menu.icon, color: shouldHighlightParent ? "primary" : "grey", fontSize: props.open ? "small" : "medium" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
                              default_1$1,
                              {
                                sx: {
                                  fontSize: props.open ? 24 : 28,
                                  transition: "all 0.2s ease-in-out"
                                }
                              }
                            )
                          }
                        ),
                        props.open && /* @__PURE__ */ jsxRuntimeExports.jsxs(
                          Box,
                          {
                            sx: {
                              display: "flex",
                              alignItems: "center",
                              flexGrow: 1,
                              position: "relative",
                              overflow: "hidden"
                            },
                            children: [
                              /* @__PURE__ */ jsxRuntimeExports.jsx(
                                Typography,
                                {
                                  type: "s3",
                                  weight: level === 0 ? "medium" : "normal",
                                  color: "theme.secondary.1000",
                                  sx: {
                                    flexGrow: 1,
                                    pl: level * 1.5,
                                    fontSize: level === 0 ? "0.875rem" : "0.8125rem",
                                    lineHeight: 1.4,
                                    whiteSpace: "nowrap",
                                    overflow: "hidden",
                                    textOverflow: "ellipsis"
                                  },
                                  children: menu.label
                                }
                              ),
                              ((_a = menu.submenu) == null ? void 0 : _a.length) > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
                                Box,
                                {
                                  sx: {
                                    ml: 1,
                                    display: "flex",
                                    alignItems: "center",
                                    transition: "transform 0.2s ease-in-out"
                                  },
                                  children: openSubmenuArray.includes(menuKey) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
                                    default_1,
                                    {
                                      sx: {
                                        fontSize: 20,
                                        color: "theme.secondary.600"
                                      }
                                    }
                                  ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
                                    default_1$2,
                                    {
                                      sx: {
                                        fontSize: 20,
                                        color: "theme.secondary.600"
                                      }
                                    }
                                  )
                                }
                              )
                            ]
                          }
                        )
                      ]
                    }
                  ),
                  openSubmenuArray.includes(menuKey) && ((_b = menu.submenu) == null ? void 0 : _b.length) > 0 && props.open && /* @__PURE__ */ jsxRuntimeExports.jsx(Collapse, { in: openSubmenuArray.includes(menuKey), timeout: "auto", unmountOnExit: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(List, { component: "div", disablePadding: true, sx: { mt: 0.5 }, children: renderMenu(menu.submenu, menu, level + 1) }) })
                ]
              }
            )
          },
          `${menu.label}-${index}`
        );
      });
    },
    [props.open, openSubmenuArray, getActiveClassIf, handleCollapsedMenuClick, handleMenuClick, isSubmenuActive, isRtl]
  );
  useEffect(() => {
    var _a;
    handleSidebarSearch(search);
    if ((_a = props.menu) == null ? void 0 : _a.length) {
      const expandedMenus = [];
      const checkAndExpandMenu = (menuItems, parentLabel = "") => {
        menuItems.forEach((menu) => {
          var _a2;
          if ((_a2 = menu == null ? void 0 : menu.submenu) == null ? void 0 : _a2.length) {
            const menuKey = `${parentLabel}-${menu.label}`;
            const allPaths = getAllMenuPaths(menu);
            if (getActiveClassIf(allPaths)) {
              expandedMenus.push(menuKey);
              checkAndExpandMenu(menu.submenu, menu.label);
            }
          }
        });
      };
      checkAndExpandMenu(props.menu);
      setOpenSubmenuArray(expandedMenus);
    }
  }, [getActiveClassIf, handleSidebarSearch, props.menu, search, getAllMenuPaths]);
  useEffect(() => {
    if (props.open) {
      handleCollapsedSubmenuClose();
    }
  }, [props.open, handleCollapsedSubmenuClose]);
  drawerWidth = props.width;
  const appLogo = getApiConfig().appLogo || images.logo;
  const appFavicon = getApiConfig().appFavicon || images.favicon;
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx(
      Drawer2,
      {
        variant: "permanent",
        open: props.open,
        anchor: document.body.dir === "rtl" ? "right" : "left",
        onMouseEnter: props.handleMouseEnter,
        onMouseLeave: props.handleMouseLeave,
        children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
          Box,
          {
            sx: {
              display: "flex",
              flexDirection: "column",
              height: "100%",
              backgroundColor: "grey.100"
            },
            children: [
              /* @__PURE__ */ jsxRuntimeExports.jsx(
                Box,
                {
                  sx: (theme) => {
                    var _a, _b;
                    return {
                      borderBottom: `1px solid ${((_b = (_a = theme.palette.theme) == null ? void 0 : _a.secondary) == null ? void 0 : _b[200]) || theme.palette.divider}`
                    };
                  },
                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(DrawerHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                    "img",
                    {
                      src: props.open ? appLogo : appFavicon,
                      alt: props.open ? "logo" : "favicon",
                      width: !props.open && 40,
                      height: 55,
                      style: {
                        transition: "all 0.3s ease-in-out",
                        filter: "brightness(1.1)",
                        cursor: "pointer"
                      },
                      onClick: () => navigate(props.dashboardPath || Pathname.DASHBOARD)
                    }
                  ) })
                }
              ),
              props.open ? /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { px: 1.5, py: 1.5, borderBottom: "1px solid", borderColor: "theme.secondary.200" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(SearchBar, { className: "sidebar-search", handleSearch: setSearch, placeholder: "Search menu...", value: search, sx: { "&.MuiTextField-root": { backgroundColor: "grey.200", border: "1px solid", borderColor: "grey.200", borderRadius: 1 } } }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ClickAwayListener, { onClickAway: handleCloseSearchTooltip, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { p: 1, pb: 0, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                Tooltip,
                {
                  title: /* @__PURE__ */ jsxRuntimeExports.jsx(
                    SearchBar,
                    {
                      className: "sidebar-search",
                      handleSearch: setSearch,
                      placeholder: "Search menu...",
                      value: search,
                      sx: { "&.MuiTextField-root": { backgroundColor: "transparent" } }
                    }
                  ),
                  placement: "right",
                  arrow: true,
                  sx: {
                    p: 0,
                    backgroundColor: "grey.200",
                    border: "1px solid",
                    borderColor: "grey.300",
                    "& .MuiTooltip-arrow": {
                      color: "grey.300"
                    },
                    ml: "8px !important"
                  },
                  open: isOpenSearchTooltop,
                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconButton, { color: "inherit", sx: { borderRadius: 2, p: 1.5, backgroundColor: isOpenSearchTooltop ? "grey.200" : "inherit" }, onClick: handleOpenSearchTooltip, children: search.trim() ? /* @__PURE__ */ jsxRuntimeExports.jsx(SearchStatus, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(Search, {}) })
                }
              ) }) }),
              /* @__PURE__ */ jsxRuntimeExports.jsx(
                Box,
                {
                  sx: {
                    flexGrow: 1,
                    overflowY: "auto",
                    py: 1,
                    "&::-webkit-scrollbar": {
                      width: 6
                    },
                    "&::-webkit-scrollbar-track": {
                      backgroundColor: "transparent"
                    },
                    "&::-webkit-scrollbar-thumb": {
                      backgroundColor: "rgba(0, 0, 0, 0.2)",
                      borderRadius: 3
                    }
                  },
                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(List, { className: "sidebar-list", sx: { p: 0 }, children: renderMenu(menus, null, 0) })
                }
              ),
              props.open && /* @__PURE__ */ jsxRuntimeExports.jsx(
                Box,
                {
                  sx: {
                    borderTop: "1px solid",
                    borderColor: "theme.secondary.200",
                    backgroundColor: "rgba(255, 255, 255, 0.5)"
                  },
                  children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
                    Box,
                    {
                      sx: {
                        padding: ".75rem 1.5rem",
                        display: "flex",
                        alignItems: "self-start",
                        gap: 0.5,
                        justifyContent: "center"
                      },
                      children: [
                        /* @__PURE__ */ jsxRuntimeExports.jsx(
                          Typography$1,
                          {
                            sx: {
                              color: "theme.secondary.600",
                              fontSize: ".85rem",
                              fontWeight: 500
                            },
                            children: "Crafted with"
                          }
                        ),
                        /* @__PURE__ */ jsxRuntimeExports.jsx(
                          Icon,
                          {
                            sx: {
                              color: "theme.error.500",
                              width: "1rem",
                              height: "1rem",
                              fontSize: ".75rem"
                            },
                            children: "❤️"
                          }
                        ),
                        /* @__PURE__ */ jsxRuntimeExports.jsx(
                          Typography$1,
                          {
                            sx: {
                              color: "theme.secondary.600",
                              fontSize: ".75rem",
                              fontWeight: 500
                            },
                            children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: images.erp_logo })
                          }
                        )
                      ]
                    }
                  )
                }
              )
            ]
          }
        )
      }
    ),
    /* @__PURE__ */ jsxRuntimeExports.jsx(
      IconButton,
      {
        size: "small",
        onClick: () => props.forcedOpen ? props.handleDrawerClose() : props.handleDrawerOpen(),
        className: isRtl ? "drawer-expand-btn_rtl" : "drawer-expand-btn",
        sx: {
          ml: "auto",
          backgroundColor: "rgba(0, 0, 0, 0.04)",
          "&:hover": {
            backgroundColor: "grey.100"
          },
          // transition: 'all 0.2s ease-in-out',
          width: "30px",
          height: "30px",
          borderRadius: `8px`,
          borderTopLeftRadius: 0,
          borderBottomLeftRadius: 0,
          borderColor: "grey.500",
          ...isRtl ? !props.forcedOpen ? { right: "63px !important", left: "auto" } : { right: "299px", left: "auto" } : !props.forcedOpen ? { left: "63px !important", right: "auto" } : { left: "299px", right: "auto" },
          transition: "all 0.3s ease-in-out"
        },
        children: props.theme.direction === "rtl" ? props.forcedOpen ? /* @__PURE__ */ jsxRuntimeExports.jsx(default_1$1, { fontSize: "small" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(default_1$3, { fontSize: "small" }) : props.forcedOpen ? /* @__PURE__ */ jsxRuntimeExports.jsx(default_1$3, { fontSize: "small" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(default_1$1, { fontSize: "small" })
      }
    ),
    collapsedSubmenuState.menu && /* @__PURE__ */ jsxRuntimeExports.jsx(
      CollapsedSubmenu,
      {
        menu: collapsedSubmenuState.menu,
        anchorEl: collapsedSubmenuState.anchorEl,
        open: collapsedSubmenuState.open,
        onClose: handleCollapsedSubmenuClose,
        onItemClick: handleSubmenuItemClick,
        onSubmenuClick: handleCollapsedSubmenuClick,
        getActiveClassIf,
        breadcrumb: collapsedSubmenuState.breadcrumb,
        onBreadcrumbClick: handleBreadcrumbClick
      }
    )
  ] });
};
export {
  Collapse as C,
  Sidebar as S
};
//# sourceMappingURL=sidebar-pKJm8Xef.esm.js.map
