azeriand-library 1.4.2 → 1.4.3

package/dist/index.esm.js

@@ -3,7 +3,7 @@
   try {
     if (typeof document != "undefined") {
       var elementStyle = document.createElement("style");
-      elementStyle.appendChild(document.createTextNode(".card{\n    /* border-radius: 20px; */\n    color: var(--card-text-color, white);\n}\n\n.card.glass{\n    background-color: color-mix(in oklch, var(--glass-color), transparent 80%);\n    border: 1px solid color-mix(in oklch, var(--glass-color), transparent 40%);\n    -webkit-backface-visibility: hidden;\n    -webkit-perspective: 1000;\n    -webkit-transform: translate3d(0,0,0);\n    -webkit-transform: translateZ(0);\n    backface-visibility: hidden;\n    perspective: 1000;\n    transform: translate3d(0,0,0);\n    transform: translateZ(0);\n}\n\n.card.mate{\n    background-color: var(--glass-color);\n}\n\n.card.outlined{\n    border: solid white 2px;\n}\n\nbutton .card.ghost:hover, button .card.outlined:hover{\n    background: color-mix(in oklch, var(--glass-color), transparent 80%);\n}\n\nbutton .card.glass:hover{\n    box-shadow: 0 4px 10px color-mix(in oklch, var(--glass-color), transparent 85%);\n}\n\nbutton .card.mate:hover{\n    background-color: color-mix(in oklch, var(--glass-color), white 10%) \n}\nbutton{\n    background: none;\n	color: inherit;\n	border: none;\n	padding: 0;\n	font: inherit;\n	cursor: pointer;\n	outline: inherit;\n    font-weight: bold;\n}\n\nbutton:focus {\n    outline: revert;\n}\n.MuiDateCalendar-root{\n    color: white;\n}"));
+      elementStyle.appendChild(document.createTextNode('.card{\n    /* border-radius: 20px; */\n    color: var(--card-text-color, white);\n}\n\n.card.glass{\n    background-color: color-mix(in oklch, var(--glass-color), transparent 80%);\n    border: 1px solid color-mix(in oklch, var(--glass-color), transparent 40%);\n    -webkit-backface-visibility: hidden;\n    -webkit-perspective: 1000;\n    -webkit-transform: translate3d(0,0,0);\n    -webkit-transform: translateZ(0);\n    backface-visibility: hidden;\n    perspective: 1000;\n    transform: translate3d(0,0,0);\n    transform: translateZ(0);\n}\n\n.card.mate{\n    background-color: var(--glass-color);\n}\n\n.card.outlined{\n    border: solid white 2px;\n}\n\nbutton .card.ghost:hover, button .card.outlined:hover{\n    background: color-mix(in oklch, var(--glass-color), transparent 80%);\n}\n\nbutton .card.glass:hover{\n    box-shadow: 0 4px 10px color-mix(in oklch, var(--glass-color), transparent 85%);\n}\n\nbutton .card.mate:hover{\n    background-color: color-mix(in oklch, var(--glass-color), white 10%) \n}\nbutton{\n    background: none;\n	color: inherit;\n	border: none;\n	padding: 0;\n	font: inherit;\n	cursor: pointer;\n	outline: inherit;\n    font-weight: bold;\n}\n\nbutton:focus {\n    outline: revert;\n}\n.section-name{\n    color: hsla(0, 0%, 100%, 0.7);\n}input:disabled{\n    color: hsla(0, 0%, 100%, 0.5);\n    font-weight: bold;\n}\n\ninput::-moz-placeholder{\n    color: hsla(0, 0%, 100%, 0.5);\n    \n}\n\ninput::placeholder{\n    color: hsla(0, 0%, 100%, 0.5);\n    \n}\n\ninput::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\ninput:focus{\n    outline: none;\n}.MuiDateCalendar-root{\n    color: white;\n}.dropdown-content{\n    box-shadow: rgba(149, 157, 165, 0.2)\n    0px 8px 24px;\n    max-height: 40%vh;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n    z-index: 10;\n}\n\n.dropdown-content::-webkit-scrollbar{\n    width: 0;\n    height: 0;\n}\n\n.dropdown-item:hover{\n    background-color: rgb(240, 249, 255);\n}.button-open{\n    border: rgb(147, 197, 253) 2px solid;\n}.vertical-line::before {\n    content: "";\n    position: absolute;\n    width: 1.5px;\n    height: 100%;\n    background-color: white;\n    left: 0;\n    top: 0;\n    transform: translateX(5.1px);\n}'));
       document.head.appendChild(elementStyle);
     }
   } catch (e) {
@@ -13,7 +13,7 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { jsx as jsx$1, jsxs } from "react/jsx-runtime";
+import { jsx as jsx$1, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import React__default, { forwardRef, useContext, isValidElement, cloneElement, Children, createContext, useState, useEffect } from "react";
 import ReactDOM from "react-dom";
@@ -27,16 +27,16 @@ function Avatar({ src, className = "", style: style2 }) {
     }
   );
 }
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function(n) {
+function _extends$1() {
+  return _extends$1 = Object.assign ? Object.assign.bind() : function(n) {
     for (var e = 1; e < arguments.length; e++) {
       var t = arguments[e];
       for (var r2 in t) ({}).hasOwnProperty.call(t, r2) && (n[r2] = t[r2]);
     }
     return n;
-  }, _extends.apply(null, arguments);
+  }, _extends$1.apply(null, arguments);
 }
-function _objectWithoutPropertiesLoose(r2, e) {
+function _objectWithoutPropertiesLoose$1(r2, e) {
   if (null == r2) return {};
   var t = {};
   for (var n in r2) if ({}.hasOwnProperty.call(r2, n)) {
@@ -244,7 +244,7 @@ function requireReactIs_development$1() {
       var ContextProvider = REACT_PROVIDER_TYPE;
       var Element2 = REACT_ELEMENT_TYPE;
       var ForwardRef = REACT_FORWARD_REF_TYPE;
-      var Fragment = REACT_FRAGMENT_TYPE;
+      var Fragment2 = REACT_FRAGMENT_TYPE;
       var Lazy = REACT_LAZY_TYPE;
       var Memo = REACT_MEMO_TYPE;
       var Portal = REACT_PORTAL_TYPE;
@@ -303,7 +303,7 @@ function requireReactIs_development$1() {
       reactIs_development$1.ContextProvider = ContextProvider;
       reactIs_development$1.Element = Element2;
       reactIs_development$1.ForwardRef = ForwardRef;
-      reactIs_development$1.Fragment = Fragment;
+      reactIs_development$1.Fragment = Fragment2;
       reactIs_development$1.Lazy = Lazy;
       reactIs_development$1.Memo = Memo;
       reactIs_development$1.Portal = Portal;
@@ -2317,7 +2317,7 @@ var createStyled$1 = function createStyled(tag, options) {
       }
     });
     Styled.withComponent = function(nextTag, nextOptions) {
-      var newStyled = createStyled(nextTag, _extends({}, options, nextOptions, {
+      var newStyled = createStyled(nextTag, _extends$1({}, options, nextOptions, {
         shouldForwardProp: composeShouldForwardProps(Styled, nextOptions, true)
       }));
       return newStyled.apply(void 0, styles2);
@@ -4041,6 +4041,33 @@ const createClassNameGenerator = () => {
   };
 };
 const ClassNameGenerator = createClassNameGenerator();
+function createBox(options = {}) {
+  const {
+    themeId,
+    defaultTheme: defaultTheme2,
+    defaultClassName = "MuiBox-root",
+    generateClassName
+  } = options;
+  const BoxRoot = styled$1("div", {
+    shouldForwardProp: (prop) => prop !== "theme" && prop !== "sx" && prop !== "as"
+  })(styleFunctionSx);
+  const Box2 = /* @__PURE__ */ React.forwardRef(function Box3(inProps, ref) {
+    const theme = useTheme$2(defaultTheme2);
+    const {
+      className,
+      component = "div",
+      ...other
+    } = extendSxProp$1(inProps);
+    return /* @__PURE__ */ jsx$1(BoxRoot, {
+      as: component,
+      ref,
+      className: clsx(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
+      theme: themeId ? theme[themeId] || theme : theme,
+      ...other
+    });
+  });
+  return Box2;
+}
 const globalStateClasses = {
   active: "active",
   checked: "checked",
@@ -7317,9 +7344,9 @@ function createTheme(options = {}, ...args) {
     ...typeof cssVariables !== "boolean" && cssVariables
   }, ...args);
 }
-const defaultTheme = createTheme();
+const defaultTheme$1 = createTheme();
 function useTheme() {
-  const theme = useTheme$2(defaultTheme);
+  const theme = useTheme$2(defaultTheme$1);
   if (process.env.NODE_ENV !== "production") {
     React.useDebugValue(theme);
   }
@@ -7332,7 +7359,7 @@ function useThemeProps({
   return useThemeProps$1({
     props,
     name,
-    defaultTheme,
+    defaultTheme: defaultTheme$1,
     themeId: THEME_ID
   });
 }
@@ -7342,7 +7369,7 @@ function slotShouldForwardProp(prop) {
 const rootShouldForwardProp = (prop) => slotShouldForwardProp(prop) && prop !== "classes";
 const styled = createStyled2({
   themeId: THEME_ID,
-  defaultTheme,
+  defaultTheme: defaultTheme$1,
   rootShouldForwardProp
 });
 function ThemeProviderNoVars({
@@ -7474,7 +7501,7 @@ const getPickersLocalization = (pickersTranslations) => {
     components: {
       MuiLocalizationProvider: {
         defaultProps: {
-          localeText: _extends({}, pickersTranslations)
+          localeText: _extends$1({}, pickersTranslations)
         }
       }
     }
@@ -7550,10 +7577,77 @@ const enUSPickers = {
 };
 const DEFAULT_LOCALE = enUSPickers;
 getPickersLocalization(enUSPickers);
+const _excluded$d = ["localeText"];
 const PickerAdapterContext = /* @__PURE__ */ React.createContext(null);
 if (process.env.NODE_ENV !== "production") PickerAdapterContext.displayName = "PickerAdapterContext";
-if (process.env.NODE_ENV !== "production") ;
-process.env.NODE_ENV !== "production" ? {
+const LocalizationProvider = function LocalizationProvider2(inProps) {
+  const {
+    localeText: inLocaleText
+  } = inProps, otherInProps = _objectWithoutPropertiesLoose$1(inProps, _excluded$d);
+  const {
+    adapter: parentAdapter,
+    localeText: parentLocaleText
+  } = React.useContext(PickerAdapterContext) ?? {
+    adapter: void 0,
+    localeText: void 0
+  };
+  const props = useThemeProps({
+    // We don't want to pass the `localeText` prop to the theme, that way it will always return the theme value,
+    // We will then merge this theme value with our value manually
+    props: otherInProps,
+    name: "MuiLocalizationProvider"
+  });
+  const {
+    children,
+    dateAdapter: DateAdapter,
+    dateFormats,
+    dateLibInstance,
+    adapterLocale,
+    localeText: themeLocaleText
+  } = props;
+  const localeText = React.useMemo(() => _extends$1({}, themeLocaleText, parentLocaleText, inLocaleText), [themeLocaleText, parentLocaleText, inLocaleText]);
+  const adapter = React.useMemo(() => {
+    if (!DateAdapter) {
+      if (parentAdapter) {
+        return parentAdapter;
+      }
+      return null;
+    }
+    const dateAdapter = new DateAdapter({
+      locale: adapterLocale,
+      formats: dateFormats,
+      instance: dateLibInstance
+    });
+    if (!dateAdapter.isMUIAdapter) {
+      throw new Error(["MUI X: The date adapter should be imported from `@mui/x-date-pickers` or `@mui/x-date-pickers-pro`, not from `@date-io`", "For example, `import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'` instead of `import AdapterDayjs from '@date-io/dayjs'`", "More information on the installation documentation: https://mui.com/x/react-date-pickers/quickstart/#installation"].join(`
+`));
+    }
+    return dateAdapter;
+  }, [DateAdapter, adapterLocale, dateFormats, dateLibInstance, parentAdapter]);
+  const defaultDates = React.useMemo(() => {
+    if (!adapter) {
+      return null;
+    }
+    return {
+      minDate: adapter.date("1900-01-01T00:00:00.000"),
+      maxDate: adapter.date("2099-12-31T00:00:00.000")
+    };
+  }, [adapter]);
+  const contextValue = React.useMemo(() => {
+    return {
+      utils: adapter,
+      adapter,
+      defaultDates,
+      localeText
+    };
+  }, [defaultDates, adapter, localeText]);
+  return /* @__PURE__ */ jsx$1(PickerAdapterContext.Provider, {
+    value: contextValue,
+    children
+  });
+};
+if (process.env.NODE_ENV !== "production") LocalizationProvider.displayName = "LocalizationProvider";
+process.env.NODE_ENV !== "production" ? LocalizationProvider.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
@@ -7614,8 +7708,8 @@ const useLocalizationContext = () => {
   if (localization.adapter === null) {
     throw new Error(["MUI X: Can not find the date and time pickers adapter from its localization context.", "It looks like you forgot to pass a `dateAdapter` to your LocalizationProvider."].join("\n"));
   }
-  const localeText = React.useMemo(() => _extends({}, DEFAULT_LOCALE, localization.localeText), [localization.localeText]);
-  return React.useMemo(() => _extends({}, localization, {
+  const localeText = React.useMemo(() => _extends$1({}, DEFAULT_LOCALE, localization.localeText), [localization.localeText]);
+  return React.useMemo(() => _extends$1({}, localization, {
     localeText
   }), [localization, localeText]);
 };
@@ -7795,7 +7889,7 @@ const v6Colors = {
   textDisabled: true
 };
 const extendSxProp = internal_createExtendSxProp();
-const useUtilityClasses$f = (ownerState) => {
+const useUtilityClasses$g = (ownerState) => {
   const {
     align,
     gutterBottom,
@@ -7938,7 +8032,7 @@ const Typography = /* @__PURE__ */ React.forwardRef(function Typography2(inProps
     variantMapping
   };
   const Component = component || (paragraph ? "p" : variantMapping[variant] || defaultVariantMapping[variant]) || "span";
-  const classes = useUtilityClasses$f(ownerState);
+  const classes = useUtilityClasses$g(ownerState);
   return /* @__PURE__ */ jsx$1(TypographyRoot, {
     as: Component,
     ref,
@@ -8216,7 +8310,7 @@ function getSvgIconUtilityClass(slot) {
   return generateUtilityClass("MuiSvgIcon", slot);
 }
 generateUtilityClasses("MuiSvgIcon", ["root", "colorPrimary", "colorSecondary", "colorAction", "colorError", "colorDisabled", "fontSizeInherit", "fontSizeSmall", "fontSizeMedium", "fontSizeLarge"]);
-const useUtilityClasses$e = (ownerState) => {
+const useUtilityClasses$f = (ownerState) => {
   const {
     color: color2,
     fontSize,
@@ -8361,7 +8455,7 @@ const SvgIcon = /* @__PURE__ */ React.forwardRef(function SvgIcon2(inProps, ref)
   if (!inheritViewBox) {
     more.viewBox = viewBox;
   }
-  const classes = useUtilityClasses$e(ownerState);
+  const classes = useUtilityClasses$f(ownerState);
   return /* @__PURE__ */ jsxs(SvgIconRoot, {
     as: component,
     className: clsx(classes.root, className),
@@ -8467,6 +8561,9 @@ function createSvgIcon(path, displayName) {
   Component.muiName = SvgIcon.muiName;
   return /* @__PURE__ */ React.memo(/* @__PURE__ */ React.forwardRef(Component));
 }
+function ownerDocument(node2) {
+  return node2 && node2.ownerDocument || document;
+}
 function useControlled(props) {
   const {
     controlled,
@@ -8905,7 +9002,7 @@ var Transition = /* @__PURE__ */ function(_React$Component) {
     _this$props.onExiting;
     _this$props.onExited;
     _this$props.nodeRef;
-    var childProps = _objectWithoutPropertiesLoose(_this$props, ["children", "in", "mountOnEnter", "unmountOnExit", "appear", "enter", "exit", "timeout", "addEndListener", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "nodeRef"]);
+    var childProps = _objectWithoutPropertiesLoose$1(_this$props, ["children", "in", "mountOnEnter", "unmountOnExit", "appear", "enter", "exit", "timeout", "addEndListener", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "nodeRef"]);
     return (
       // allows for nested Transitions
       /* @__PURE__ */ React__default.createElement(TransitionGroupContext.Provider, {
@@ -9228,8 +9325,8 @@ var CSSTransition = /* @__PURE__ */ function(_React$Component) {
   _proto.render = function render() {
     var _this$props = this.props;
     _this$props.classNames;
-    var props = _objectWithoutPropertiesLoose(_this$props, ["classNames"]);
-    return /* @__PURE__ */ React__default.createElement(Transition, _extends({}, props, {
+    var props = _objectWithoutPropertiesLoose$1(_this$props, ["classNames"]);
+    return /* @__PURE__ */ React__default.createElement(Transition, _extends$1({}, props, {
       onEnter: this.onEnter,
       onEntered: this.onEntered,
       onEntering: this.onEntering,
@@ -9243,7 +9340,7 @@ var CSSTransition = /* @__PURE__ */ function(_React$Component) {
 CSSTransition.defaultProps = {
   classNames: ""
 };
-CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends({}, Transition.propTypes, {
+CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends$1({}, Transition.propTypes, {
   /**
    * The animation classNames applied to the component as it appears, enters,
    * exits or has finished the transition. A single name can be provided, which
@@ -9516,7 +9613,7 @@ var TransitionGroup = /* @__PURE__ */ function(_React$Component) {
     }
     if (this.mounted) {
       this.setState(function(state) {
-        var children = _extends({}, state.children);
+        var children = _extends$1({}, state.children);
         delete children[child.key];
         return {
           children
@@ -9525,7 +9622,7 @@ var TransitionGroup = /* @__PURE__ */ function(_React$Component) {
     }
   };
   _proto.render = function render() {
-    var _this$props = this.props, Component = _this$props.component, childFactory2 = _this$props.childFactory, props = _objectWithoutPropertiesLoose(_this$props, ["component", "childFactory"]);
+    var _this$props = this.props, Component = _this$props.component, childFactory2 = _this$props.childFactory, props = _objectWithoutPropertiesLoose$1(_this$props, ["component", "childFactory"]);
     var contextValue = this.state.contextValue;
     var children = values(this.state.children).map(childFactory2);
     delete props.appear;
@@ -9996,7 +10093,7 @@ function getButtonBaseUtilityClass(slot) {
   return generateUtilityClass("MuiButtonBase", slot);
 }
 const buttonBaseClasses = generateUtilityClasses("MuiButtonBase", ["root", "disabled", "focusVisible"]);
-const useUtilityClasses$d = (ownerState) => {
+const useUtilityClasses$e = (ownerState) => {
   const {
     disabled,
     focusVisible,
@@ -10212,7 +10309,7 @@ const ButtonBase = /* @__PURE__ */ React.forwardRef(function ButtonBase2(inProps
     tabIndex,
     focusVisible
   };
-  const classes = useUtilityClasses$d(ownerState);
+  const classes = useUtilityClasses$e(ownerState);
   return /* @__PURE__ */ jsxs(ButtonBaseRoot, {
     as: ComponentProp,
     className: clsx(classes.root, className),
@@ -10447,7 +10544,7 @@ const rotateAnimation = typeof circularRotateKeyframe !== "string" ? css`
 const dashAnimation = typeof circularDashKeyframe !== "string" ? css`
         animation: ${circularDashKeyframe} 1.4s ease-in-out infinite;
       ` : null;
-const useUtilityClasses$c = (ownerState) => {
+const useUtilityClasses$d = (ownerState) => {
   const {
     classes,
     variant,
@@ -10581,7 +10678,7 @@ const CircularProgress = /* @__PURE__ */ React.forwardRef(function CircularProgr
     variant,
     enableTrackSlot
   };
-  const classes = useUtilityClasses$c(ownerState);
+  const classes = useUtilityClasses$d(ownerState);
   const circleStyle = {};
   const rootStyle = {};
   const rootProps = {};
@@ -10705,7 +10802,7 @@ function getIconButtonUtilityClass(slot) {
   return generateUtilityClass("MuiIconButton", slot);
 }
 const iconButtonClasses = generateUtilityClasses("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorError", "colorInfo", "colorSuccess", "colorWarning", "edgeStart", "edgeEnd", "sizeSmall", "sizeMedium", "sizeLarge", "loading", "loadingIndicator", "loadingWrapper"]);
-const useUtilityClasses$b = (ownerState) => {
+const useUtilityClasses$c = (ownerState) => {
   const {
     classes,
     disabled,
@@ -10890,7 +10987,7 @@ const IconButton = /* @__PURE__ */ React.forwardRef(function IconButton2(inProps
     loadingIndicator,
     size
   };
-  const classes = useUtilityClasses$b(ownerState);
+  const classes = useUtilityClasses$c(ownerState);
   return /* @__PURE__ */ jsxs(IconButtonRoot, {
     id: loading ? loadingId : idProp,
     className: clsx(classes.root, className),
@@ -11035,7 +11132,7 @@ function getPickersArrowSwitcherUtilityClass(slot) {
 }
 generateUtilityClasses("MuiPickersArrowSwitcher", ["root", "spacer", "button", "previousIconButton", "nextIconButton", "leftArrowIcon", "rightArrowIcon"]);
 const usePickerPrivateContext = () => React.useContext(PickerPrivateContext);
-const _excluded$b = ["children", "className", "slots", "slotProps", "isNextDisabled", "isNextHidden", "onGoToNext", "nextLabel", "isPreviousDisabled", "isPreviousHidden", "onGoToPrevious", "previousLabel", "labelId", "classes"], _excluded2$2 = ["ownerState"], _excluded3 = ["ownerState"];
+const _excluded$c = ["children", "className", "slots", "slotProps", "isNextDisabled", "isNextHidden", "onGoToNext", "nextLabel", "isPreviousDisabled", "isPreviousHidden", "onGoToPrevious", "previousLabel", "labelId", "classes"], _excluded2$2 = ["ownerState"], _excluded3 = ["ownerState"];
 const PickersArrowSwitcherRoot = styled("div", {
   name: "MuiPickersArrowSwitcher",
   slot: "Root"
@@ -11063,7 +11160,7 @@ const PickersArrowSwitcherButton = styled(IconButton, {
     }
   }]
 });
-const useUtilityClasses$a = (classes) => {
+const useUtilityClasses$b = (classes) => {
   const slots = {
     root: ["root"],
     spacer: ["spacer"],
@@ -11096,11 +11193,11 @@ const PickersArrowSwitcher = /* @__PURE__ */ React.forwardRef(function PickersAr
     previousLabel,
     labelId,
     classes: classesProp
-  } = props, other = _objectWithoutPropertiesLoose(props, _excluded$b);
+  } = props, other = _objectWithoutPropertiesLoose$1(props, _excluded$c);
   const {
     ownerState
   } = usePickerPrivateContext();
-  const classes = useUtilityClasses$a(classesProp);
+  const classes = useUtilityClasses$b(classesProp);
   const nextProps = {
     isDisabled: isNextDisabled,
     isHidden: isNextHidden,
@@ -11125,7 +11222,7 @@ const PickersArrowSwitcher = /* @__PURE__ */ React.forwardRef(function PickersAr
       edge: "end",
       onClick: previousProps.goTo
     },
-    ownerState: _extends({}, ownerState, {
+    ownerState: _extends$1({}, ownerState, {
       isButtonHidden: previousProps.isHidden ?? false
     }),
     className: clsx(classes.button, classes.previousIconButton)
@@ -11142,7 +11239,7 @@ const PickersArrowSwitcher = /* @__PURE__ */ React.forwardRef(function PickersAr
       edge: "start",
       onClick: nextProps.goTo
     },
-    ownerState: _extends({}, ownerState, {
+    ownerState: _extends$1({}, ownerState, {
       isButtonHidden: nextProps.isHidden ?? false
     }),
     className: clsx(classes.button, classes.nextIconButton)
@@ -11156,7 +11253,7 @@ const PickersArrowSwitcher = /* @__PURE__ */ React.forwardRef(function PickersAr
     },
     ownerState,
     className: classes.leftArrowIcon
-  }), leftArrowIconProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2$2);
+  }), leftArrowIconProps = _objectWithoutPropertiesLoose$1(_useSlotProps, _excluded2$2);
   const RightArrowIcon = (slots == null ? void 0 : slots.rightArrowIcon) ?? ArrowRightIcon;
   const _useSlotProps2 = useSlotProps({
     elementType: RightArrowIcon,
@@ -11166,14 +11263,14 @@ const PickersArrowSwitcher = /* @__PURE__ */ React.forwardRef(function PickersAr
     },
     ownerState,
     className: classes.rightArrowIcon
-  }), rightArrowIconProps = _objectWithoutPropertiesLoose(_useSlotProps2, _excluded3);
-  return /* @__PURE__ */ jsxs(PickersArrowSwitcherRoot, _extends({
+  }), rightArrowIconProps = _objectWithoutPropertiesLoose$1(_useSlotProps2, _excluded3);
+  return /* @__PURE__ */ jsxs(PickersArrowSwitcherRoot, _extends$1({
     ref,
     className: clsx(classes.root, className),
     ownerState
   }, other, {
-    children: [/* @__PURE__ */ jsx$1(PreviousIconButton, _extends({}, previousIconButtonProps, {
-      children: isRtl ? /* @__PURE__ */ jsx$1(RightArrowIcon, _extends({}, rightArrowIconProps)) : /* @__PURE__ */ jsx$1(LeftArrowIcon, _extends({}, leftArrowIconProps))
+    children: [/* @__PURE__ */ jsx$1(PreviousIconButton, _extends$1({}, previousIconButtonProps, {
+      children: isRtl ? /* @__PURE__ */ jsx$1(RightArrowIcon, _extends$1({}, rightArrowIconProps)) : /* @__PURE__ */ jsx$1(LeftArrowIcon, _extends$1({}, leftArrowIconProps))
     })), children ? /* @__PURE__ */ jsx$1(Typography, {
       variant: "subtitle1",
       component: "span",
@@ -11182,8 +11279,8 @@ const PickersArrowSwitcher = /* @__PURE__ */ React.forwardRef(function PickersAr
     }) : /* @__PURE__ */ jsx$1(PickersArrowSwitcherSpacer, {
       className: classes.spacer,
       ownerState
-    }), /* @__PURE__ */ jsx$1(NextIconButton, _extends({}, nextIconButtonProps, {
-      children: isRtl ? /* @__PURE__ */ jsx$1(LeftArrowIcon, _extends({}, leftArrowIconProps)) : /* @__PURE__ */ jsx$1(RightArrowIcon, _extends({}, rightArrowIconProps))
+    }), /* @__PURE__ */ jsx$1(NextIconButton, _extends$1({}, nextIconButtonProps, {
+      children: isRtl ? /* @__PURE__ */ jsx$1(LeftArrowIcon, _extends$1({}, leftArrowIconProps)) : /* @__PURE__ */ jsx$1(RightArrowIcon, _extends$1({}, rightArrowIconProps))
     }))]
   }));
 });
@@ -11310,7 +11407,7 @@ function useViews({
     }
     handleChangeView(viewToNavigateTo);
   });
-  return _extends({}, stepNavigation, {
+  return _extends$1({}, stepNavigation, {
     view,
     setView: handleChangeView,
     focusedView,
@@ -11460,7 +11557,7 @@ const getDefaultReferenceDate = ({
   }
   return referenceDate;
 };
-const _excluded$a = ["value", "referenceDate"];
+const _excluded$b = ["value", "referenceDate"];
 const singleItemValueManager = {
   emptyValue: null,
   getTodayValue: getTodayDate,
@@ -11468,7 +11565,7 @@ const singleItemValueManager = {
     let {
       value,
       referenceDate
-    } = _ref, params = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+    } = _ref, params = _objectWithoutPropertiesLoose$1(_ref, _excluded$b);
     if (params.adapter.isValid(value)) {
       return value;
     }
@@ -11504,7 +11601,7 @@ function usePickerDayOwnerState(parameters) {
   const {
     ownerState: pickerOwnerState
   } = usePickerPrivateContext();
-  return React.useMemo(() => _extends({}, pickerOwnerState, {
+  return React.useMemo(() => _extends$1({}, pickerOwnerState, {
     day,
     isDaySelected: selected ?? false,
     isDayDisabled: disabled ?? false,
@@ -11517,8 +11614,8 @@ function usePickerDayOwnerState(parameters) {
     showDaysOutsideCurrentMonth: showDaysOutsideCurrentMonth ?? false
   }), [adapter, pickerOwnerState, day, selected, disabled, today, outsideCurrentMonth, disableMargin, disableHighlightToday, showDaysOutsideCurrentMonth]);
 }
-const _excluded$9 = ["autoFocus", "className", "classes", "hidden", "isAnimating", "onClick", "onDaySelect", "onFocus", "onBlur", "onKeyDown", "onMouseDown", "onMouseEnter", "children", "isFirstVisibleCell", "isLastVisibleCell", "day", "selected", "disabled", "today", "outsideCurrentMonth", "disableMargin", "disableHighlightToday", "showDaysOutsideCurrentMonth"];
-const useUtilityClasses$9 = (classes, ownerState) => {
+const _excluded$a = ["autoFocus", "className", "classes", "hidden", "isAnimating", "onClick", "onDaySelect", "onFocus", "onBlur", "onKeyDown", "onMouseDown", "onMouseEnter", "children", "isFirstVisibleCell", "isLastVisibleCell", "day", "selected", "disabled", "today", "outsideCurrentMonth", "disableMargin", "disableHighlightToday", "showDaysOutsideCurrentMonth"];
+const useUtilityClasses$a = (classes, ownerState) => {
   const {
     isDaySelected,
     isDayDisabled,
@@ -11537,7 +11634,7 @@ const useUtilityClasses$9 = (classes, ownerState) => {
 };
 const styleArg = ({
   theme
-}) => _extends({}, theme.typography.caption, {
+}) => _extends$1({}, theme.typography.caption, {
   width: DAY_SIZE,
   height: DAY_SIZE,
   borderRadius: "50%",
@@ -11619,7 +11716,7 @@ const PickersDayFiller = styled("div", {
   overridesResolver
 })(({
   theme
-}) => _extends({}, styleArg({
+}) => _extends$1({}, styleArg({
   theme
 }), {
   // visibility: 'hidden' does not work here as it hides the element from screen readers as well
@@ -11654,7 +11751,7 @@ const PickersDayRaw = /* @__PURE__ */ React.forwardRef(function PickersDay(inPro
     disableMargin,
     disableHighlightToday,
     showDaysOutsideCurrentMonth
-  } = props, other = _objectWithoutPropertiesLoose(props, _excluded$9);
+  } = props, other = _objectWithoutPropertiesLoose$1(props, _excluded$a);
   const ownerState = usePickerDayOwnerState({
     day,
     selected,
@@ -11665,7 +11762,7 @@ const PickersDayRaw = /* @__PURE__ */ React.forwardRef(function PickersDay(inPro
     disableHighlightToday,
     showDaysOutsideCurrentMonth
   });
-  const classes = useUtilityClasses$9(classesProp, ownerState);
+  const classes = useUtilityClasses$a(classesProp, ownerState);
   const adapter = usePickerAdapter();
   const ref = React.useRef(null);
   const handleRef = useForkRef(ref, forwardedRef);
@@ -11699,7 +11796,7 @@ const PickersDayRaw = /* @__PURE__ */ React.forwardRef(function PickersDay(inPro
       role: other.role
     });
   }
-  return /* @__PURE__ */ jsx$1(PickersDayRoot, _extends({
+  return /* @__PURE__ */ jsx$1(PickersDayRoot, _extends$1({
     className: clsx(classes.root, className),
     ref: handleRef,
     centerRipple: true,
@@ -12148,6 +12245,17 @@ process.env.NODE_ENV !== "production" ? Fade.propTypes = {
     exit: PropTypes.number
   })])
 } : void 0;
+const visuallyHidden = {
+  border: 0,
+  clip: "rect(0 0 0 0)",
+  height: "1px",
+  margin: "-1px",
+  overflow: "hidden",
+  padding: 0,
+  position: "absolute",
+  whiteSpace: "nowrap",
+  width: "1px"
+};
 const useIsDateDisabled = ({
   shouldDisableDate,
   shouldDisableMonth,
@@ -12177,7 +12285,7 @@ const useIsDateDisabled = ({
 const createCalendarStateReducer = (reduceAnimations, adapter) => (state, action) => {
   switch (action.type) {
     case "setVisibleDate":
-      return _extends({}, state, {
+      return _extends$1({}, state, {
         slideDirection: action.direction,
         currentMonth: action.month,
         isMonthSwitchingAnimating: !adapter.isSameMonth(action.month, state.currentMonth) && !reduceAnimations && !action.skipAnimation,
@@ -12192,12 +12300,12 @@ const createCalendarStateReducer = (reduceAnimations, adapter) => (state, action
       if (adapter.getMonth(newCurrentMonth) !== adapter.getMonth(state.currentMonth)) {
         newCurrentMonth = adapter.setMonth(newCurrentMonth, adapter.getMonth(state.currentMonth));
       }
-      return _extends({}, state, {
+      return _extends$1({}, state, {
         currentMonth: newCurrentMonth
       });
     }
     case "finishMonthSwitchingAnimation":
-      return _extends({}, state, {
+      return _extends$1({}, state, {
         isMonthSwitchingAnimating: false
       });
     default:
@@ -12318,8 +12426,8 @@ const useCalendarState = (params) => {
 };
 const getPickersFadeTransitionGroupUtilityClass = (slot) => generateUtilityClass("MuiPickersFadeTransitionGroup", slot);
 generateUtilityClasses("MuiPickersFadeTransitionGroup", ["root"]);
-const _excluded$8 = ["children"];
-const useUtilityClasses$8 = (classes) => {
+const _excluded$9 = ["children"];
+const useUtilityClasses$9 = (classes) => {
   const slots = {
     root: ["root"]
   };
@@ -12345,8 +12453,8 @@ function PickersFadeTransitionGroup(inProps) {
   } = props;
   const {
     children
-  } = props, other = _objectWithoutPropertiesLoose(props, _excluded$8);
-  const classes = useUtilityClasses$8(classesProp);
+  } = props, other = _objectWithoutPropertiesLoose$1(props, _excluded$9);
+  const classes = useUtilityClasses$9(classesProp);
   const theme = useTheme();
   if (reduceAnimations) {
     return children;
@@ -12369,8 +12477,8 @@ function PickersFadeTransitionGroup(inProps) {
 }
 const getPickersSlideTransitionUtilityClass = (slot) => generateUtilityClass("MuiPickersSlideTransition", slot);
 const pickersSlideTransitionClasses = generateUtilityClasses("MuiPickersSlideTransition", ["root", "slideEnter-left", "slideEnter-right", "slideEnterActive", "slideExit", "slideExitActiveLeft-left", "slideExitActiveLeft-right"]);
-const _excluded$7 = ["children", "className", "reduceAnimations", "slideDirection", "transKey", "classes"];
-const useUtilityClasses$7 = (classes, ownerState) => {
+const _excluded$8 = ["children", "className", "reduceAnimations", "slideDirection", "transKey", "classes"];
+const useUtilityClasses$8 = (classes, ownerState) => {
   const {
     slideDirection
   } = ownerState;
@@ -12459,14 +12567,14 @@ function PickersSlideTransition(inProps) {
     slideDirection,
     transKey,
     classes: classesProp
-  } = props, other = _objectWithoutPropertiesLoose(props, _excluded$7);
+  } = props, other = _objectWithoutPropertiesLoose$1(props, _excluded$8);
   const {
     ownerState: pickerOwnerState
   } = usePickerPrivateContext();
-  const ownerState = _extends({}, pickerOwnerState, {
+  const ownerState = _extends$1({}, pickerOwnerState, {
     slideDirection
   });
-  const classes = useUtilityClasses$7(classesProp, ownerState);
+  const classes = useUtilityClasses$8(classesProp, ownerState);
   const theme = useTheme();
   if (reduceAnimations) {
     return /* @__PURE__ */ jsx$1("div", {
@@ -12487,7 +12595,7 @@ function PickersSlideTransition(inProps) {
     }),
     role: "presentation",
     ownerState,
-    children: /* @__PURE__ */ jsx$1(CSSTransition, _extends({
+    children: /* @__PURE__ */ jsx$1(CSSTransition, _extends$1({
       mountOnEnter: true,
       unmountOnExit: true,
       timeout: theme.transitions.duration.complex,
@@ -12499,8 +12607,8 @@ function PickersSlideTransition(inProps) {
 }
 const getDayCalendarUtilityClass = (slot) => generateUtilityClass("MuiDayCalendar", slot);
 generateUtilityClasses("MuiDayCalendar", ["root", "header", "weekDayLabel", "loadingContainer", "slideTransition", "monthContainer", "weekContainer", "weekNumberLabel", "weekNumber"]);
-const _excluded$6 = ["parentProps", "day", "focusedDay", "selectedDays", "isDateDisabled", "currentMonthNumber", "isViewFocused"], _excluded2$1 = ["ownerState"];
-const useUtilityClasses$6 = (classes) => {
+const _excluded$7 = ["parentProps", "day", "focusedDay", "selectedDays", "isDateDisabled", "currentMonthNumber", "isViewFocused"], _excluded2$1 = ["ownerState"];
+const useUtilityClasses$7 = (classes) => {
   const slots = {
     root: ["root"],
     header: ["header"],
@@ -12562,7 +12670,7 @@ const PickersCalendarWeekNumber = styled(Typography, {
   slot: "WeekNumber"
 })(({
   theme
-}) => _extends({}, theme.typography.caption, {
+}) => _extends$1({}, theme.typography.caption, {
   width: DAY_SIZE,
   height: DAY_SIZE,
   padding: 0,
@@ -12611,7 +12719,7 @@ function WrappedDay(_ref) {
     isDateDisabled,
     currentMonthNumber,
     isViewFocused
-  } = _ref, other = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+  } = _ref, other = _objectWithoutPropertiesLoose$1(_ref, _excluded$7);
   const {
     disabled,
     disableHighlightToday,
@@ -12644,7 +12752,7 @@ function WrappedDay(_ref) {
   const _useSlotProps = useSlotProps({
     elementType: Day,
     externalSlotProps: slotProps == null ? void 0 : slotProps.day,
-    additionalProps: _extends({
+    additionalProps: _extends$1({
       disableHighlightToday,
       showDaysOutsideCurrentMonth,
       role: "gridcell",
@@ -12652,12 +12760,12 @@ function WrappedDay(_ref) {
       // it is used in date range dragging logic by accessing `dataset.timestamp`
       "data-timestamp": adapter.toJsDate(day).valueOf()
     }, other),
-    ownerState: _extends({}, ownerState, {
+    ownerState: _extends$1({}, ownerState, {
       day,
       isDayDisabled: isDisabled,
       isDaySelected: isSelected
     })
-  }), dayProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2$1);
+  }), dayProps = _objectWithoutPropertiesLoose$1(_useSlotProps, _excluded2$1);
   const isFirstVisibleCell = React.useMemo(() => {
     const startOfMonth = adapter.startOfMonth(adapter.setMonth(day, currentMonthNumber));
     if (!showDaysOutsideCurrentMonth) {
@@ -12672,7 +12780,7 @@ function WrappedDay(_ref) {
     }
     return adapter.isSameDay(day, adapter.endOfWeek(endOfMonth));
   }, [currentMonthNumber, day, showDaysOutsideCurrentMonth, adapter]);
-  return /* @__PURE__ */ jsx$1(Day, _extends({}, dayProps, {
+  return /* @__PURE__ */ jsx$1(Day, _extends$1({}, dayProps, {
     day,
     disabled: isDisabled,
     autoFocus: !isOutsideCurrentMonth && isFocusedDay,
@@ -12725,7 +12833,7 @@ function DayCalendar(inProps) {
     timezone
   } = props;
   const now = useNow(timezone);
-  const classes = useUtilityClasses$6(classesProp);
+  const classes = useUtilityClasses$7(classesProp);
   const isRtl = useRtl();
   const isDateDisabled = useIsDateDisabled({
     shouldDisableDate,
@@ -12857,7 +12965,7 @@ function DayCalendar(inProps) {
     }), loading ? /* @__PURE__ */ jsx$1(PickersCalendarLoadingContainer, {
       className: classes.loadingContainer,
       children: renderLoading()
-    }) : /* @__PURE__ */ jsx$1(PickersCalendarSlideTransition, _extends({
+    }) : /* @__PURE__ */ jsx$1(PickersCalendarSlideTransition, _extends$1({
       transKey: transitionKey,
       onExited: onMonthSwitchingAnimationEnd,
       reduceAnimations,
@@ -12901,8 +13009,8 @@ function getMonthCalendarUtilityClass(slot) {
   return generateUtilityClass("MuiMonthCalendar", slot);
 }
 const monthCalendarClasses = generateUtilityClasses("MuiMonthCalendar", ["root", "button", "disabled", "selected"]);
-const _excluded$5 = ["autoFocus", "classes", "disabled", "selected", "value", "onClick", "onKeyDown", "onFocus", "onBlur", "slots", "slotProps"];
-const useUtilityClasses$5 = (classes, ownerState) => {
+const _excluded$6 = ["autoFocus", "classes", "disabled", "selected", "value", "onClick", "onKeyDown", "onFocus", "onBlur", "slots", "slotProps"];
+const useUtilityClasses$6 = (classes, ownerState) => {
   const slots = {
     button: ["button", ownerState.isMonthDisabled && "disabled", ownerState.isMonthSelected && "selected"]
   };
@@ -12918,7 +13026,7 @@ const DefaultMonthButton = styled("button", {
   }]
 })(({
   theme
-}) => _extends({
+}) => _extends$1({
   color: "unset",
   backgroundColor: "transparent",
   border: 0,
@@ -12962,16 +13070,16 @@ const MonthCalendarButton = /* @__PURE__ */ React.memo(function MonthCalendarBut
     onBlur,
     slots,
     slotProps
-  } = props, other = _objectWithoutPropertiesLoose(props, _excluded$5);
+  } = props, other = _objectWithoutPropertiesLoose$1(props, _excluded$6);
   const ref = React.useRef(null);
   const {
     ownerState: pickerOwnerState
   } = usePickerPrivateContext();
-  const ownerState = _extends({}, pickerOwnerState, {
+  const ownerState = _extends$1({}, pickerOwnerState, {
     isMonthDisabled: disabled,
     isMonthSelected: selected
   });
-  const classes = useUtilityClasses$5(classesProp, ownerState);
+  const classes = useUtilityClasses$6(classesProp, ownerState);
   useEnhancedEffect(() => {
     var _a;
     if (autoFocus) {
@@ -12997,11 +13105,11 @@ const MonthCalendarButton = /* @__PURE__ */ React.memo(function MonthCalendarBut
     ownerState,
     className: classes.button
   });
-  return /* @__PURE__ */ jsx$1(MonthButton, _extends({}, monthButtonProps));
+  return /* @__PURE__ */ jsx$1(MonthButton, _extends$1({}, monthButtonProps));
 });
 if (process.env.NODE_ENV !== "production") MonthCalendarButton.displayName = "MonthCalendarButton";
-const _excluded$4 = ["autoFocus", "className", "currentMonth", "classes", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "shouldDisableMonth", "readOnly", "disableHighlightToday", "onMonthFocus", "hasFocus", "onFocusedViewChange", "monthsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];
-const useUtilityClasses$4 = (classes) => {
+const _excluded$5 = ["autoFocus", "className", "currentMonth", "classes", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "shouldDisableMonth", "readOnly", "disableHighlightToday", "onMonthFocus", "hasFocus", "onFocusedViewChange", "monthsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];
+const useUtilityClasses$5 = (classes) => {
   const slots = {
     root: ["root"]
   };
@@ -13013,7 +13121,7 @@ function useMonthCalendarDefaultizedProps(props, name) {
     name
   });
   const validationProps = useApplyDefaultValuesToDateValidationProps(themeProps);
-  return _extends({}, themeProps, validationProps, {
+  return _extends$1({}, themeProps, validationProps, {
     monthsPerRow: themeProps.monthsPerRow ?? 3
   });
 }
@@ -13073,7 +13181,7 @@ const MonthCalendar = /* @__PURE__ */ React.forwardRef(function MonthCalendar2(i
     gridLabelId,
     slots,
     slotProps
-  } = props, other = _objectWithoutPropertiesLoose(props, _excluded$4);
+  } = props, other = _objectWithoutPropertiesLoose$1(props, _excluded$5);
   const {
     value,
     handleValueChange,
@@ -13105,7 +13213,7 @@ const MonthCalendar = /* @__PURE__ */ React.forwardRef(function MonthCalendar2(i
     []
     // eslint-disable-line react-hooks/exhaustive-deps
   );
-  const classes = useUtilityClasses$4(classesProp);
+  const classes = useUtilityClasses$5(classesProp);
   const todayMonth = React.useMemo(() => adapter.getMonth(now), [adapter, now]);
   const selectedMonth = React.useMemo(() => {
     if (value != null) {
@@ -13191,7 +13299,7 @@ const MonthCalendar = /* @__PURE__ */ React.forwardRef(function MonthCalendar2(i
       changeHasFocus(false);
     }
   });
-  return /* @__PURE__ */ jsx$1(MonthCalendarRoot, _extends({
+  return /* @__PURE__ */ jsx$1(MonthCalendarRoot, _extends$1({
     ref,
     className: clsx(classes.root, className),
     ownerState,
@@ -13337,8 +13445,8 @@ function getYearCalendarUtilityClass(slot) {
   return generateUtilityClass("MuiYearCalendar", slot);
 }
 const yearCalendarClasses = generateUtilityClasses("MuiYearCalendar", ["root", "button", "disabled", "selected"]);
-const _excluded$3 = ["autoFocus", "classes", "disabled", "selected", "value", "onClick", "onKeyDown", "onFocus", "onBlur", "slots", "slotProps"];
-const useUtilityClasses$3 = (classes, ownerState) => {
+const _excluded$4 = ["autoFocus", "classes", "disabled", "selected", "value", "onClick", "onKeyDown", "onFocus", "onBlur", "slots", "slotProps"];
+const useUtilityClasses$4 = (classes, ownerState) => {
   const slots = {
     button: ["button", ownerState.isYearDisabled && "disabled", ownerState.isYearSelected && "selected"]
   };
@@ -13354,7 +13462,7 @@ const DefaultYearButton = styled("button", {
   }]
 })(({
   theme
-}) => _extends({
+}) => _extends$1({
   color: "unset",
   backgroundColor: "transparent",
   border: 0,
@@ -13398,16 +13506,16 @@ const YearCalendarButton = /* @__PURE__ */ React.memo(function YearCalendarButto
     onBlur,
     slots,
     slotProps
-  } = props, other = _objectWithoutPropertiesLoose(props, _excluded$3);
+  } = props, other = _objectWithoutPropertiesLoose$1(props, _excluded$4);
   const ref = React.useRef(null);
   const {
     ownerState: pickerOwnerState
   } = usePickerPrivateContext();
-  const ownerState = _extends({}, pickerOwnerState, {
+  const ownerState = _extends$1({}, pickerOwnerState, {
     isYearDisabled: disabled,
     isYearSelected: selected
   });
-  const classes = useUtilityClasses$3(classesProp, ownerState);
+  const classes = useUtilityClasses$4(classesProp, ownerState);
   useEnhancedEffect(() => {
     var _a;
     if (autoFocus) {
@@ -13433,11 +13541,11 @@ const YearCalendarButton = /* @__PURE__ */ React.memo(function YearCalendarButto
     ownerState,
     className: classes.button
   });
-  return /* @__PURE__ */ jsx$1(YearButton, _extends({}, yearButtonProps));
+  return /* @__PURE__ */ jsx$1(YearButton, _extends$1({}, yearButtonProps));
 });
 if (process.env.NODE_ENV !== "production") YearCalendarButton.displayName = "YearCalendarButton";
-const _excluded$2 = ["autoFocus", "className", "classes", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "readOnly", "shouldDisableYear", "disableHighlightToday", "onYearFocus", "hasFocus", "onFocusedViewChange", "yearsOrder", "yearsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];
-const useUtilityClasses$2 = (classes) => {
+const _excluded$3 = ["autoFocus", "className", "classes", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "readOnly", "shouldDisableYear", "disableHighlightToday", "onYearFocus", "hasFocus", "onFocusedViewChange", "yearsOrder", "yearsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];
+const useUtilityClasses$3 = (classes) => {
   const slots = {
     root: ["root"]
   };
@@ -13449,7 +13557,7 @@ function useYearCalendarDefaultizedProps(props, name) {
     name
   });
   const validationProps = useApplyDefaultValuesToDateValidationProps(themeProps);
-  return _extends({}, themeProps, validationProps, {
+  return _extends$1({}, themeProps, validationProps, {
     yearsPerRow: themeProps.yearsPerRow ?? 3,
     yearsOrder: themeProps.yearsOrder ?? "asc"
   });
@@ -13521,7 +13629,7 @@ const YearCalendar = /* @__PURE__ */ React.forwardRef(function YearCalendar2(inP
     gridLabelId,
     slots,
     slotProps
-  } = props, other = _objectWithoutPropertiesLoose(props, _excluded$2);
+  } = props, other = _objectWithoutPropertiesLoose$1(props, _excluded$3);
   const {
     value,
     handleValueChange,
@@ -13553,7 +13661,7 @@ const YearCalendar = /* @__PURE__ */ React.forwardRef(function YearCalendar2(inP
     []
     // eslint-disable-line react-hooks/exhaustive-deps
   );
-  const classes = useUtilityClasses$2(classesProp);
+  const classes = useUtilityClasses$3(classesProp);
   const todayYear = React.useMemo(() => adapter.getYear(now), [adapter, now]);
   const selectedYear = React.useMemo(() => {
     if (value != null) {
@@ -13668,7 +13776,7 @@ const YearCalendar = /* @__PURE__ */ React.forwardRef(function YearCalendar2(inP
   if (fillerAmount === yearsPerRow) {
     fillerAmount = 0;
   }
-  return /* @__PURE__ */ jsxs(YearCalendarRoot, _extends({
+  return /* @__PURE__ */ jsxs(YearCalendarRoot, _extends$1({
     ref: handleRef,
     className: clsx(classes.root, className),
     ownerState,
@@ -13816,8 +13924,8 @@ process.env.NODE_ENV !== "production" ? YearCalendar.propTypes = {
 } : void 0;
 const getPickersCalendarHeaderUtilityClass = (slot) => generateUtilityClass("MuiPickersCalendarHeader", slot);
 const pickersCalendarHeaderClasses = generateUtilityClasses("MuiPickersCalendarHeader", ["root", "labelContainer", "label", "switchViewButton", "switchViewIcon"]);
-const _excluded$1 = ["slots", "slotProps", "currentMonth", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onMonthChange", "onViewChange", "view", "reduceAnimations", "views", "labelId", "className", "classes", "timezone", "format"], _excluded2 = ["ownerState"];
-const useUtilityClasses$1 = (classes) => {
+const _excluded$2 = ["slots", "slotProps", "currentMonth", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onMonthChange", "onViewChange", "view", "reduceAnimations", "views", "labelId", "className", "classes", "timezone", "format"], _excluded2 = ["ownerState"];
+const useUtilityClasses$2 = (classes) => {
   const slots = {
     root: ["root"],
     labelContainer: ["labelContainer"],
@@ -13846,7 +13954,7 @@ const PickersCalendarHeaderLabelContainer = styled("div", {
   slot: "LabelContainer"
 })(({
   theme
-}) => _extends({
+}) => _extends$1({
   display: "flex",
   overflow: "hidden",
   alignItems: "center",
@@ -13913,11 +14021,11 @@ const PickersCalendarHeader = /* @__PURE__ */ React.forwardRef(function PickersC
     classes: classesProp,
     timezone,
     format = `${adapter.formats.month} ${adapter.formats.year}`
-  } = props, other = _objectWithoutPropertiesLoose(props, _excluded$1);
+  } = props, other = _objectWithoutPropertiesLoose$1(props, _excluded$2);
   const {
     ownerState
   } = usePickerPrivateContext();
-  const classes = useUtilityClasses$1(classesProp);
+  const classes = useUtilityClasses$2(classesProp);
   const SwitchViewButton = (slots == null ? void 0 : slots.switchViewButton) ?? PickersCalendarHeaderSwitchViewButton;
   const switchViewButtonProps = useSlotProps({
     elementType: SwitchViewButton,
@@ -13926,7 +14034,7 @@ const PickersCalendarHeader = /* @__PURE__ */ React.forwardRef(function PickersC
       size: "small",
       "aria-label": translations.calendarViewSwitchingButtonAriaLabel(view)
     },
-    ownerState: _extends({}, ownerState, {
+    ownerState: _extends$1({}, ownerState, {
       view
     }),
     className: classes.switchViewButton
@@ -13937,7 +14045,7 @@ const PickersCalendarHeader = /* @__PURE__ */ React.forwardRef(function PickersC
     externalSlotProps: slotProps == null ? void 0 : slotProps.switchViewIcon,
     ownerState,
     className: classes.switchViewIcon
-  }), switchViewIconProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
+  }), switchViewIconProps = _objectWithoutPropertiesLoose$1(_useSlotProps, _excluded2);
   const selectNextMonth = () => onMonthChange(adapter.addMonths(month, 1));
   const selectPreviousMonth = () => onMonthChange(adapter.addMonths(month, -1));
   const isNextMonthDisabled = useNextMonthDisabled(month, {
@@ -13965,7 +14073,7 @@ const PickersCalendarHeader = /* @__PURE__ */ React.forwardRef(function PickersC
     return null;
   }
   const label = adapter.formatByString(month, format);
-  return /* @__PURE__ */ jsxs(PickersCalendarHeaderRoot, _extends({}, other, {
+  return /* @__PURE__ */ jsxs(PickersCalendarHeaderRoot, _extends$1({}, other, {
     ownerState,
     className: clsx(classes.root, className),
     ref,
@@ -13984,8 +14092,8 @@ const PickersCalendarHeader = /* @__PURE__ */ React.forwardRef(function PickersC
           className: classes.label,
           children: label
         })
-      }), views.length > 1 && !disabled && /* @__PURE__ */ jsx$1(SwitchViewButton, _extends({}, switchViewButtonProps, {
-        children: /* @__PURE__ */ jsx$1(SwitchViewIcon, _extends({}, switchViewIconProps))
+      }), views.length > 1 && !disabled && /* @__PURE__ */ jsx$1(SwitchViewButton, _extends$1({}, switchViewButtonProps, {
+        children: /* @__PURE__ */ jsx$1(SwitchViewIcon, _extends$1({}, switchViewIconProps))
       }))]
     }), /* @__PURE__ */ jsx$1(Fade, {
       in: view === "day",
@@ -14071,8 +14179,8 @@ function useReduceAnimations(customReduceAnimations) {
 }
 const getDateCalendarUtilityClass = (slot) => generateUtilityClass("MuiDateCalendar", slot);
 generateUtilityClasses("MuiDateCalendar", ["root", "viewTransitionContainer"]);
-const _excluded = ["autoFocus", "onViewChange", "value", "defaultValue", "referenceDate", "disableFuture", "disablePast", "onChange", "onYearChange", "onMonthChange", "reduceAnimations", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "view", "views", "openTo", "className", "classes", "disabled", "readOnly", "minDate", "maxDate", "disableHighlightToday", "focusedView", "onFocusedViewChange", "showDaysOutsideCurrentMonth", "fixedWeekNumber", "dayOfWeekFormatter", "slots", "slotProps", "loading", "renderLoading", "displayWeekNumber", "yearsOrder", "yearsPerRow", "monthsPerRow", "timezone"];
-const useUtilityClasses = (classes) => {
+const _excluded$1 = ["autoFocus", "onViewChange", "value", "defaultValue", "referenceDate", "disableFuture", "disablePast", "onChange", "onYearChange", "onMonthChange", "reduceAnimations", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "view", "views", "openTo", "className", "classes", "disabled", "readOnly", "minDate", "maxDate", "disableHighlightToday", "focusedView", "onFocusedViewChange", "showDaysOutsideCurrentMonth", "fixedWeekNumber", "dayOfWeekFormatter", "slots", "slotProps", "loading", "renderLoading", "displayWeekNumber", "yearsOrder", "yearsPerRow", "monthsPerRow", "timezone"];
+const useUtilityClasses$1 = (classes) => {
   const slots = {
     root: ["root"],
     viewTransitionContainer: ["viewTransitionContainer"]
@@ -14086,7 +14194,7 @@ function useDateCalendarDefaultizedProps(props, name) {
   });
   const reduceAnimations = useReduceAnimations(themeProps.reduceAnimations);
   const validationProps = useApplyDefaultValuesToDateValidationProps(themeProps);
-  return _extends({}, themeProps, validationProps, {
+  return _extends$1({}, themeProps, validationProps, {
     loading: themeProps.loading ?? false,
     openTo: themeProps.openTo ?? "day",
     views: themeProps.views ?? ["year", "day"],
@@ -14153,7 +14261,7 @@ const DateCalendar = /* @__PURE__ */ React.forwardRef(function DateCalendar2(inP
     yearsPerRow,
     monthsPerRow,
     timezone: timezoneProp
-  } = props, other = _objectWithoutPropertiesLoose(props, _excluded);
+  } = props, other = _objectWithoutPropertiesLoose$1(props, _excluded$1);
   const {
     value,
     handleValueChange,
@@ -14304,7 +14412,7 @@ const DateCalendar = /* @__PURE__ */ React.forwardRef(function DateCalendar2(inP
       });
     }
   }, [value]);
-  const classes = useUtilityClasses(classesProp);
+  const classes = useUtilityClasses$1(classesProp);
   const baseDateValidationProps = {
     disablePast,
     disableFuture,
@@ -14331,12 +14439,12 @@ const DateCalendar = /* @__PURE__ */ React.forwardRef(function DateCalendar2(inP
     prevOpenViewRef.current = view;
   }, [focusedView, setFocusedView, view]);
   const selectedDays = React.useMemo(() => [value], [value]);
-  return /* @__PURE__ */ jsxs(DateCalendarRoot, _extends({
+  return /* @__PURE__ */ jsxs(DateCalendarRoot, _extends$1({
     ref,
     className: clsx(classes.root, className),
     ownerState
   }, other, {
-    children: [/* @__PURE__ */ jsx$1(CalendarHeader, _extends({}, calendarHeaderProps, {
+    children: [/* @__PURE__ */ jsx$1(CalendarHeader, _extends$1({}, calendarHeaderProps, {
       slots,
       slotProps
     })), /* @__PURE__ */ jsx$1(DateCalendarViewTransitionContainer, {
@@ -14345,7 +14453,7 @@ const DateCalendar = /* @__PURE__ */ React.forwardRef(function DateCalendar2(inP
       transKey: view,
       ownerState,
       children: /* @__PURE__ */ jsxs("div", {
-        children: [view === "year" && /* @__PURE__ */ jsx$1(YearCalendar, _extends({}, baseDateValidationProps, commonViewProps, {
+        children: [view === "year" && /* @__PURE__ */ jsx$1(YearCalendar, _extends$1({}, baseDateValidationProps, commonViewProps, {
           value,
           onChange: handleDateYearChange,
           shouldDisableYear,
@@ -14354,7 +14462,7 @@ const DateCalendar = /* @__PURE__ */ React.forwardRef(function DateCalendar2(inP
           yearsOrder,
           yearsPerRow,
           referenceDate
-        })), view === "month" && /* @__PURE__ */ jsx$1(MonthCalendar, _extends({}, baseDateValidationProps, commonViewProps, {
+        })), view === "month" && /* @__PURE__ */ jsx$1(MonthCalendar, _extends$1({}, baseDateValidationProps, commonViewProps, {
           currentMonth: calendarState.currentMonth,
           hasFocus,
           className,
@@ -14364,7 +14472,7 @@ const DateCalendar = /* @__PURE__ */ React.forwardRef(function DateCalendar2(inP
           onFocusedViewChange: (isViewFocused) => setFocusedView("month", isViewFocused),
           monthsPerRow,
           referenceDate
-        })), view === "day" && /* @__PURE__ */ jsx$1(DayCalendar, _extends({}, calendarState, baseDateValidationProps, commonViewProps, {
+        })), view === "day" && /* @__PURE__ */ jsx$1(DayCalendar, _extends$1({}, calendarState, baseDateValidationProps, commonViewProps, {
           onMonthSwitchingAnimationEnd,
           hasFocus,
           onFocusedDayChange: (focusedDate) => setVisibleDate({
@@ -14615,6 +14723,21 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
    */
   yearsPerRow: PropTypes.oneOf([3, 4])
 } : void 0;
+const warnedOnceCache = /* @__PURE__ */ new Set();
+function warnOnce(message, gravity = "warning") {
+  if (process.env.NODE_ENV === "production") {
+    return;
+  }
+  const cleanMessage = Array.isArray(message) ? message.join("\n") : message;
+  if (!warnedOnceCache.has(cleanMessage)) {
+    warnedOnceCache.add(cleanMessage);
+    if (gravity === "error") {
+      console.error(cleanMessage);
+    } else {
+      console.warn(cleanMessage);
+    }
+  }
+}
 var dayjs_min = { exports: {} };
 (function(module, exports) {
   !function(t, e) {
@@ -14893,124 +15016,1019 @@ var dayjs_min = { exports: {} };
 })(dayjs_min);
 var dayjs_minExports = dayjs_min.exports;
 const dayjs = /* @__PURE__ */ getDefaultExportFromCjs(dayjs_minExports);
-const DEFAULT_THEME = "dark";
-const ThemeContext = createContext({ theme: DEFAULT_THEME, setTheme: () => {
-} });
-function Card({ children, noPadding, noBlur = false, appearance = "glass", color: color2 = "neutral", intensity, dark: dark2 = true, onClick, className, style: style2 }) {
-  let [classNames, setClassNames] = useState("");
-  let [cardStyle, setCardStyle] = useState({});
-  const { theme } = useContext(ThemeContext);
-  useEffect(() => {
-    let intensityValue = intensity;
-    if (intensityValue === void 0) {
-      intensityValue = theme === "dark" ? 600 : 300;
+var weekOfYear = { exports: {} };
+(function(module, exports) {
+  !function(e, t) {
+    module.exports = t();
+  }(commonjsGlobal, function() {
+    var e = "week", t = "year";
+    return function(i, n, r2) {
+      var f = n.prototype;
+      f.week = function(i2) {
+        if (void 0 === i2 && (i2 = null), null !== i2) return this.add(7 * (i2 - this.week()), "day");
+        var n2 = this.$locale().yearStart || 1;
+        if (11 === this.month() && this.date() > 25) {
+          var f2 = r2(this).startOf(t).add(1, t).date(n2), s = r2(this).endOf(e);
+          if (f2.isBefore(s)) return 1;
+        }
+        var a = r2(this).startOf(t).date(n2).startOf(e).subtract(1, "millisecond"), o = this.diff(a, e, true);
+        return o < 0 ? r2(this).startOf("week").week() : Math.ceil(o);
+      }, f.weeks = function(e2) {
+        return void 0 === e2 && (e2 = null), this.week(e2);
+      };
+    };
+  });
+})(weekOfYear);
+var weekOfYearExports = weekOfYear.exports;
+const weekOfYearPlugin = /* @__PURE__ */ getDefaultExportFromCjs(weekOfYearExports);
+var customParseFormat = { exports: {} };
+(function(module, exports) {
+  !function(e, t) {
+    module.exports = t();
+  }(commonjsGlobal, function() {
+    var e = { LTS: "h:mm:ss A", LT: "h:mm A", L: "MM/DD/YYYY", LL: "MMMM D, YYYY", LLL: "MMMM D, YYYY h:mm A", LLLL: "dddd, MMMM D, YYYY h:mm A" }, t = /(\[[^[]*\])|([-_:/.,()\s]+)|(A|a|Q|YYYY|YY?|ww?|MM?M?M?|Do|DD?|hh?|HH?|mm?|ss?|S{1,3}|z|ZZ?)/g, n = /\d/, r2 = /\d\d/, i = /\d\d?/, o = /\d*[^-_:/,()\s\d]+/, s = {}, a = function(e2) {
+      return (e2 = +e2) + (e2 > 68 ? 1900 : 2e3);
+    };
+    var f = function(e2) {
+      return function(t2) {
+        this[e2] = +t2;
+      };
+    }, h = [/[+-]\d\d:?(\d\d)?|Z/, function(e2) {
+      (this.zone || (this.zone = {})).offset = function(e3) {
+        if (!e3) return 0;
+        if ("Z" === e3) return 0;
+        var t2 = e3.match(/([+-]|\d\d)/g), n2 = 60 * t2[1] + (+t2[2] || 0);
+        return 0 === n2 ? 0 : "+" === t2[0] ? -n2 : n2;
+      }(e2);
+    }], u = function(e2) {
+      var t2 = s[e2];
+      return t2 && (t2.indexOf ? t2 : t2.s.concat(t2.f));
+    }, d = function(e2, t2) {
+      var n2, r3 = s.meridiem;
+      if (r3) {
+        for (var i2 = 1; i2 <= 24; i2 += 1) if (e2.indexOf(r3(i2, 0, t2)) > -1) {
+          n2 = i2 > 12;
+          break;
+        }
+      } else n2 = e2 === (t2 ? "pm" : "PM");
+      return n2;
+    }, c = { A: [o, function(e2) {
+      this.afternoon = d(e2, false);
+    }], a: [o, function(e2) {
+      this.afternoon = d(e2, true);
+    }], Q: [n, function(e2) {
+      this.month = 3 * (e2 - 1) + 1;
+    }], S: [n, function(e2) {
+      this.milliseconds = 100 * +e2;
+    }], SS: [r2, function(e2) {
+      this.milliseconds = 10 * +e2;
+    }], SSS: [/\d{3}/, function(e2) {
+      this.milliseconds = +e2;
+    }], s: [i, f("seconds")], ss: [i, f("seconds")], m: [i, f("minutes")], mm: [i, f("minutes")], H: [i, f("hours")], h: [i, f("hours")], HH: [i, f("hours")], hh: [i, f("hours")], D: [i, f("day")], DD: [r2, f("day")], Do: [o, function(e2) {
+      var t2 = s.ordinal, n2 = e2.match(/\d+/);
+      if (this.day = n2[0], t2) for (var r3 = 1; r3 <= 31; r3 += 1) t2(r3).replace(/\[|\]/g, "") === e2 && (this.day = r3);
+    }], w: [i, f("week")], ww: [r2, f("week")], M: [i, f("month")], MM: [r2, f("month")], MMM: [o, function(e2) {
+      var t2 = u("months"), n2 = (u("monthsShort") || t2.map(function(e3) {
+        return e3.slice(0, 3);
+      })).indexOf(e2) + 1;
+      if (n2 < 1) throw new Error();
+      this.month = n2 % 12 || n2;
+    }], MMMM: [o, function(e2) {
+      var t2 = u("months").indexOf(e2) + 1;
+      if (t2 < 1) throw new Error();
+      this.month = t2 % 12 || t2;
+    }], Y: [/[+-]?\d+/, f("year")], YY: [r2, function(e2) {
+      this.year = a(e2);
+    }], YYYY: [/\d{4}/, f("year")], Z: h, ZZ: h };
+    function l(n2) {
+      var r3, i2;
+      r3 = n2, i2 = s && s.formats;
+      for (var o2 = (n2 = r3.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g, function(t2, n3, r4) {
+        var o3 = r4 && r4.toUpperCase();
+        return n3 || i2[r4] || e[r4] || i2[o3].replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g, function(e2, t3, n4) {
+          return t3 || n4.slice(1);
+        });
+      })).match(t), a2 = o2.length, f2 = 0; f2 < a2; f2 += 1) {
+        var h2 = o2[f2], u2 = c[h2], d2 = u2 && u2[0], l2 = u2 && u2[1];
+        o2[f2] = l2 ? { regex: d2, parser: l2 } : h2.replace(/^\[|\]$/g, "");
+      }
+      return function(e2) {
+        for (var t2 = {}, n3 = 0, r4 = 0; n3 < a2; n3 += 1) {
+          var i3 = o2[n3];
+          if ("string" == typeof i3) r4 += i3.length;
+          else {
+            var s2 = i3.regex, f3 = i3.parser, h3 = e2.slice(r4), u3 = s2.exec(h3)[0];
+            f3.call(t2, u3), e2 = e2.replace(u3, "");
+          }
+        }
+        return function(e3) {
+          var t3 = e3.afternoon;
+          if (void 0 !== t3) {
+            var n4 = e3.hours;
+            t3 ? n4 < 12 && (e3.hours += 12) : 12 === n4 && (e3.hours = 0), delete e3.afternoon;
+          }
+        }(t2), t2;
+      };
     }
-    setCardStyle({
-      "--glass-color": `var(--color-${color2}-${intensityValue})`,
-      "--card-text-color": `var(--color-${color2}-${dark2 ? "100" : "800"})`,
-      backdropFilter: appearance === "glass" && !noBlur ? "blur(10px)" : void 0,
-      ...style2
+    return function(e2, t2, n2) {
+      n2.p.customParseFormat = true, e2 && e2.parseTwoDigitYear && (a = e2.parseTwoDigitYear);
+      var r3 = t2.prototype, i2 = r3.parse;
+      r3.parse = function(e3) {
+        var t3 = e3.date, r4 = e3.utc, o2 = e3.args;
+        this.$u = r4;
+        var a2 = o2[1];
+        if ("string" == typeof a2) {
+          var f2 = true === o2[2], h2 = true === o2[3], u2 = f2 || h2, d2 = o2[2];
+          h2 && (d2 = o2[2]), s = this.$locale(), !f2 && d2 && (s = n2.Ls[d2]), this.$d = function(e4, t4, n3, r5) {
+            try {
+              if (["x", "X"].indexOf(t4) > -1) return new Date(("X" === t4 ? 1e3 : 1) * e4);
+              var i3 = l(t4)(e4), o3 = i3.year, s2 = i3.month, a3 = i3.day, f3 = i3.hours, h3 = i3.minutes, u3 = i3.seconds, d3 = i3.milliseconds, c3 = i3.zone, m2 = i3.week, M2 = /* @__PURE__ */ new Date(), Y = a3 || (o3 || s2 ? 1 : M2.getDate()), p = o3 || M2.getFullYear(), v = 0;
+              o3 && !s2 || (v = s2 > 0 ? s2 - 1 : M2.getMonth());
+              var D, w = f3 || 0, g = h3 || 0, y = u3 || 0, L = d3 || 0;
+              return c3 ? new Date(Date.UTC(p, v, Y, w, g, y, L + 60 * c3.offset * 1e3)) : n3 ? new Date(Date.UTC(p, v, Y, w, g, y, L)) : (D = new Date(p, v, Y, w, g, y, L), m2 && (D = r5(D).week(m2).toDate()), D);
+            } catch (e5) {
+              return /* @__PURE__ */ new Date("");
+            }
+          }(t3, a2, r4, n2), this.init(), d2 && true !== d2 && (this.$L = this.locale(d2).$L), u2 && t3 != this.format(a2) && (this.$d = /* @__PURE__ */ new Date("")), s = {};
+        } else if (a2 instanceof Array) for (var c2 = a2.length, m = 1; m <= c2; m += 1) {
+          o2[1] = a2[m - 1];
+          var M = n2.apply(this, o2);
+          if (M.isValid()) {
+            this.$d = M.$d, this.$L = M.$L, this.init();
+            break;
+          }
+          m === c2 && (this.$d = /* @__PURE__ */ new Date(""));
+        }
+        else i2.call(this, e3);
+      };
+    };
+  });
+})(customParseFormat);
+var customParseFormatExports = customParseFormat.exports;
+const customParseFormatPlugin = /* @__PURE__ */ getDefaultExportFromCjs(customParseFormatExports);
+var localizedFormat = { exports: {} };
+(function(module, exports) {
+  !function(e, t) {
+    module.exports = t();
+  }(commonjsGlobal, function() {
+    var e = { LTS: "h:mm:ss A", LT: "h:mm A", L: "MM/DD/YYYY", LL: "MMMM D, YYYY", LLL: "MMMM D, YYYY h:mm A", LLLL: "dddd, MMMM D, YYYY h:mm A" };
+    return function(t, o, n) {
+      var r2 = o.prototype, i = r2.format;
+      n.en.formats = e, r2.format = function(t2) {
+        void 0 === t2 && (t2 = "YYYY-MM-DDTHH:mm:ssZ");
+        var o2 = this.$locale().formats, n2 = function(t3, o3) {
+          return t3.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g, function(t4, n3, r3) {
+            var i2 = r3 && r3.toUpperCase();
+            return n3 || o3[r3] || e[r3] || o3[i2].replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g, function(e2, t5, o4) {
+              return t5 || o4.slice(1);
+            });
+          });
+        }(t2, void 0 === o2 ? {} : o2);
+        return i.call(this, n2);
+      };
+    };
+  });
+})(localizedFormat);
+var localizedFormatExports = localizedFormat.exports;
+const localizedFormatPlugin = /* @__PURE__ */ getDefaultExportFromCjs(localizedFormatExports);
+var isBetween = { exports: {} };
+(function(module, exports) {
+  !function(e, i) {
+    module.exports = i();
+  }(commonjsGlobal, function() {
+    return function(e, i, t) {
+      i.prototype.isBetween = function(e2, i2, s, f) {
+        var n = t(e2), o = t(i2), r2 = "(" === (f = f || "()")[0], u = ")" === f[1];
+        return (r2 ? this.isAfter(n, s) : !this.isBefore(n, s)) && (u ? this.isBefore(o, s) : !this.isAfter(o, s)) || (r2 ? this.isBefore(n, s) : !this.isAfter(n, s)) && (u ? this.isAfter(o, s) : !this.isBefore(o, s));
+      };
+    };
+  });
+})(isBetween);
+var isBetweenExports = isBetween.exports;
+const isBetweenPlugin = /* @__PURE__ */ getDefaultExportFromCjs(isBetweenExports);
+var advancedFormat = { exports: {} };
+(function(module, exports) {
+  !function(e, t) {
+    module.exports = t();
+  }(commonjsGlobal, function() {
+    return function(e, t) {
+      var r2 = t.prototype, n = r2.format;
+      r2.format = function(e2) {
+        var t2 = this, r3 = this.$locale();
+        if (!this.isValid()) return n.bind(this)(e2);
+        var s = this.$utils(), a = (e2 || "YYYY-MM-DDTHH:mm:ssZ").replace(/\[([^\]]+)]|Q|wo|ww|w|WW|W|zzz|z|gggg|GGGG|Do|X|x|k{1,2}|S/g, function(e3) {
+          switch (e3) {
+            case "Q":
+              return Math.ceil((t2.$M + 1) / 3);
+            case "Do":
+              return r3.ordinal(t2.$D);
+            case "gggg":
+              return t2.weekYear();
+            case "GGGG":
+              return t2.isoWeekYear();
+            case "wo":
+              return r3.ordinal(t2.week(), "W");
+            case "w":
+            case "ww":
+              return s.s(t2.week(), "w" === e3 ? 1 : 2, "0");
+            case "W":
+            case "WW":
+              return s.s(t2.isoWeek(), "W" === e3 ? 1 : 2, "0");
+            case "k":
+            case "kk":
+              return s.s(String(0 === t2.$H ? 24 : t2.$H), "k" === e3 ? 1 : 2, "0");
+            case "X":
+              return Math.floor(t2.$d.getTime() / 1e3);
+            case "x":
+              return t2.$d.getTime();
+            case "z":
+              return "[" + t2.offsetName() + "]";
+            case "zzz":
+              return "[" + t2.offsetName("long") + "]";
+            default:
+              return e3;
+          }
+        });
+        return n.bind(this)(a);
+      };
+    };
+  });
+})(advancedFormat);
+var advancedFormatExports = advancedFormat.exports;
+const advancedFormatPlugin = /* @__PURE__ */ getDefaultExportFromCjs(advancedFormatExports);
+dayjs.extend(localizedFormatPlugin);
+dayjs.extend(weekOfYearPlugin);
+dayjs.extend(isBetweenPlugin);
+dayjs.extend(advancedFormatPlugin);
+const formatTokenMap = {
+  // Year
+  YY: "year",
+  YYYY: {
+    sectionType: "year",
+    contentType: "digit",
+    maxLength: 4
+  },
+  // Month
+  M: {
+    sectionType: "month",
+    contentType: "digit",
+    maxLength: 2
+  },
+  MM: "month",
+  MMM: {
+    sectionType: "month",
+    contentType: "letter"
+  },
+  MMMM: {
+    sectionType: "month",
+    contentType: "letter"
+  },
+  // Day of the month
+  D: {
+    sectionType: "day",
+    contentType: "digit",
+    maxLength: 2
+  },
+  DD: "day",
+  Do: {
+    sectionType: "day",
+    contentType: "digit-with-letter"
+  },
+  // Day of the week
+  d: {
+    sectionType: "weekDay",
+    contentType: "digit",
+    maxLength: 2
+  },
+  dd: {
+    sectionType: "weekDay",
+    contentType: "letter"
+  },
+  ddd: {
+    sectionType: "weekDay",
+    contentType: "letter"
+  },
+  dddd: {
+    sectionType: "weekDay",
+    contentType: "letter"
+  },
+  // Meridiem
+  A: "meridiem",
+  a: "meridiem",
+  // Hours
+  H: {
+    sectionType: "hours",
+    contentType: "digit",
+    maxLength: 2
+  },
+  HH: "hours",
+  h: {
+    sectionType: "hours",
+    contentType: "digit",
+    maxLength: 2
+  },
+  hh: "hours",
+  // Minutes
+  m: {
+    sectionType: "minutes",
+    contentType: "digit",
+    maxLength: 2
+  },
+  mm: "minutes",
+  // Seconds
+  s: {
+    sectionType: "seconds",
+    contentType: "digit",
+    maxLength: 2
+  },
+  ss: "seconds"
+};
+const defaultFormats = {
+  year: "YYYY",
+  month: "MMMM",
+  monthShort: "MMM",
+  dayOfMonth: "D",
+  dayOfMonthFull: "Do",
+  weekday: "dddd",
+  weekdayShort: "dd",
+  hours24h: "HH",
+  hours12h: "hh",
+  meridiem: "A",
+  minutes: "mm",
+  seconds: "ss",
+  fullDate: "ll",
+  keyboardDate: "L",
+  shortDate: "MMM D",
+  normalDate: "D MMMM",
+  normalDateWithWeekday: "ddd, MMM D",
+  fullTime12h: "hh:mm A",
+  fullTime24h: "HH:mm",
+  keyboardDateTime12h: "L hh:mm A",
+  keyboardDateTime24h: "L HH:mm"
+};
+const MISSING_UTC_PLUGIN = ["Missing UTC plugin", "To be able to use UTC or timezones, you have to enable the `utc` plugin", "Find more information on https://mui.com/x/react-date-pickers/timezone/#day-js-and-utc"].join("\n");
+const MISSING_TIMEZONE_PLUGIN = ["Missing timezone plugin", "To be able to use timezones, you have to enable both the `utc` and the `timezone` plugin", "Find more information on https://mui.com/x/react-date-pickers/timezone/#day-js-and-timezone"].join("\n");
+class AdapterDayjs {
+  constructor({
+    locale,
+    formats
+  } = {}) {
+    __publicField(this, "isMUIAdapter", true);
+    __publicField(this, "isTimezoneCompatible", true);
+    __publicField(this, "lib", "dayjs");
+    __publicField(this, "escapedCharacters", {
+      start: "[",
+      end: "]"
     });
-    let rounded = "rounded-md";
-    if (className) {
-      const roundedMatch = className.match(/rounded\-[a-z0-9]+/g);
-      if (roundedMatch) {
-        rounded = roundedMatch[roundedMatch.length - 1];
+    __publicField(this, "formatTokenMap", /* @__PURE__ */ (() => formatTokenMap)());
+    __publicField(this, "setLocaleToValue", (value) => {
+      const expectedLocale = this.getCurrentLocaleCode();
+      if (expectedLocale === value.locale()) {
+        return value;
       }
-    }
-    setClassNames(`card ${rounded} ${appearance} ${className} ${noPadding ? "" : "p-[2rem]"}`);
-  }, [color2, intensity, dark2, appearance, noBlur, className, theme]);
-  return /* @__PURE__ */ jsx$1("article", { className: classNames, style: cardStyle, onClick, children });
-}
-function Button({ children, label, icon, position: position2 = "left", onClick, size, className, ...cardProps }) {
-  let cardClassNames = "flex justify-center items-center gap-x-[0.40rem] h-[2.5rem] min-w-[2.5rem] box-border p-0";
-  if (label) {
-    cardClassNames += " px-0 py-1";
-  }
-  if (className) {
-    const roundedMatch = className.match(/rounded\-[a-z0-9]+/g);
-    if (roundedMatch) {
-      cardClassNames += " " + roundedMatch[roundedMatch.length - 1];
-    }
-  }
-  if (size === "sm") {
-    cardClassNames += " h-[2rem] w-[2rem] min-w-auto";
-  }
-  const buttonClick = (ev) => {
-    if (typeof onClick === "function") {
-      onClick(ev);
-    }
-  };
-  return /* @__PURE__ */ jsx$1("button", { className, onClick: buttonClick, children: /* @__PURE__ */ jsxs(Card, { noBlur: true, noPadding: true, className: cardClassNames, ...cardProps, children: [
-    position2 === "left" && icon,
-    label,
-    children,
-    position2 === "right" && icon
-  ] }) });
-}
-function CustomDay(props) {
-  const { highlightedDays = [], day, outsideCurrentMonth, ...other } = props;
-  const isSelected = highlightedDays.some((date) => day.isSame(date, "day"));
-  return /* @__PURE__ */ jsx$1(
-    PickersDay2,
-    {
-      ...other,
-      day,
-      selected: isSelected,
-      outsideCurrentMonth,
-      sx: {
-        ...isSelected && {
-          backgroundColor: "white !important",
-          // Make selected day white
-          color: "black !important"
-          // Text color to black for contrast
+      return value.locale(expectedLocale);
+    });
+    __publicField(this, "hasUTCPlugin", () => typeof dayjs.utc !== "undefined");
+    __publicField(this, "hasTimezonePlugin", () => typeof dayjs.tz !== "undefined");
+    __publicField(this, "isSame", (value, comparing, comparisonTemplate) => {
+      const comparingInValueTimezone = this.setTimezone(comparing, this.getTimezone(value));
+      return value.format(comparisonTemplate) === comparingInValueTimezone.format(comparisonTemplate);
+    });
+    /**
+     * Replaces "default" by undefined and "system" by the system timezone before passing it to `dayjs`.
+     */
+    __publicField(this, "cleanTimezone", (timezone) => {
+      switch (timezone) {
+        case "default": {
+          return void 0;
+        }
+        case "system": {
+          return dayjs.tz.guess();
+        }
+        default: {
+          return timezone;
         }
       }
-    }
-  );
-}
-function Calendar({
-  selectedDates,
-  onMonthChange,
-  onYearChange,
-  referenceDate,
-  view,
-  views,
-  openTo,
-  value,
-  onChange,
-  defaultValue,
-  ...cardProps
-}) {
-  const theme = createTheme({
-    palette: {
-      mode: "dark"
-    }
-  });
-  const convertSelectedDates = (dates) => {
-    if (!dates) return [];
-    return dates.map((date) => {
-      if (typeof date === "string") {
-        return dayjs(date);
+    });
+    __publicField(this, "createSystemDate", (value) => {
+      let date;
+      if (this.hasUTCPlugin() && this.hasTimezonePlugin()) {
+        const timezone = dayjs.tz.guess();
+        if (timezone === "UTC") {
+          date = dayjs(value);
+        } else {
+          date = dayjs.tz(value, timezone);
+        }
+      } else {
+        date = dayjs(value);
       }
-      return dayjs(date);
+      return this.setLocaleToValue(date);
     });
-  };
-  const convertDateToDayjs = (date) => date ? dayjs(date) : void 0;
-  const handleMonthChange = (month) => {
-    if (onMonthChange) {
-      onMonthChange(month.toDate());
-    }
-  };
-  const handleYearChange = (year) => {
-    if (onYearChange) {
-      onYearChange(year.toDate());
-    }
-  };
-  const handleChange = (newValue) => {
-    if (onChange) {
-      onChange(newValue ? newValue.toDate() : null);
-    }
+    __publicField(this, "createUTCDate", (value) => {
+      if (!this.hasUTCPlugin()) {
+        throw new Error(MISSING_UTC_PLUGIN);
+      }
+      return this.setLocaleToValue(dayjs.utc(value));
+    });
+    __publicField(this, "createTZDate", (value, timezone) => {
+      if (!this.hasUTCPlugin()) {
+        throw new Error(MISSING_UTC_PLUGIN);
+      }
+      if (!this.hasTimezonePlugin()) {
+        throw new Error(MISSING_TIMEZONE_PLUGIN);
+      }
+      const keepLocalTime = value !== void 0 && !value.endsWith("Z");
+      return this.setLocaleToValue(dayjs(value).tz(this.cleanTimezone(timezone), keepLocalTime));
+    });
+    __publicField(this, "getLocaleFormats", () => {
+      const locales = dayjs.Ls;
+      const locale = this.locale || "en";
+      let localeObject = locales[locale];
+      if (localeObject === void 0) {
+        if (process.env.NODE_ENV !== "production") {
+          warnOnce(["MUI X: Your locale has not been found.", "Either the locale key is not a supported one. Locales supported by dayjs are available here: https://github.com/iamkun/dayjs/tree/dev/src/locale.", "Or you forget to import the locale from 'dayjs/locale/{localeUsed}'", "fallback on English locale."]);
+        }
+        localeObject = locales.en;
+      }
+      return localeObject.formats;
+    });
+    /**
+     * If the new day does not have the same offset as the old one (when switching to summer day time for example),
+     * Then dayjs will not automatically adjust the offset (moment does).
+     * We have to parse again the value to make sure the `fixOffset` method is applied.
+     * See https://github.com/iamkun/dayjs/blob/b3624de619d6e734cd0ffdbbd3502185041c1b60/src/plugin/timezone/index.js#L72
+     */
+    __publicField(this, "adjustOffset", (value) => {
+      if (!this.hasTimezonePlugin()) {
+        return value;
+      }
+      const timezone = this.getTimezone(value);
+      if (timezone !== "UTC") {
+        const fixedValue = value.tz(this.cleanTimezone(timezone), true);
+        if (fixedValue.$offset === (value.$offset ?? 0)) {
+          return value;
+        }
+        value.$offset = fixedValue.$offset;
+      }
+      return value;
+    });
+    __publicField(this, "date", (value, timezone = "default") => {
+      if (value === null) {
+        return null;
+      }
+      if (timezone === "UTC") {
+        return this.createUTCDate(value);
+      }
+      if (timezone === "system" || timezone === "default" && !this.hasTimezonePlugin()) {
+        return this.createSystemDate(value);
+      }
+      return this.createTZDate(value, timezone);
+    });
+    __publicField(this, "getInvalidDate", () => dayjs(/* @__PURE__ */ new Date("Invalid date")));
+    __publicField(this, "getTimezone", (value) => {
+      var _a;
+      if (this.hasTimezonePlugin()) {
+        const zone = (_a = value.$x) == null ? void 0 : _a.$timezone;
+        if (zone) {
+          return zone;
+        }
+      }
+      if (this.hasUTCPlugin() && value.isUTC()) {
+        return "UTC";
+      }
+      return "system";
+    });
+    __publicField(this, "setTimezone", (value, timezone) => {
+      if (this.getTimezone(value) === timezone) {
+        return value;
+      }
+      if (timezone === "UTC") {
+        if (!this.hasUTCPlugin()) {
+          throw new Error(MISSING_UTC_PLUGIN);
+        }
+        return value.utc();
+      }
+      if (timezone === "system") {
+        return value.local();
+      }
+      if (!this.hasTimezonePlugin()) {
+        if (timezone === "default") {
+          return value;
+        }
+        throw new Error(MISSING_TIMEZONE_PLUGIN);
+      }
+      return this.setLocaleToValue(dayjs.tz(value, this.cleanTimezone(timezone)));
+    });
+    __publicField(this, "toJsDate", (value) => {
+      return value.toDate();
+    });
+    __publicField(this, "parse", (value, format) => {
+      if (value === "") {
+        return null;
+      }
+      return dayjs(value, format, this.locale, true);
+    });
+    __publicField(this, "getCurrentLocaleCode", () => {
+      return this.locale || "en";
+    });
+    __publicField(this, "is12HourCycleInCurrentLocale", () => {
+      return /A|a/.test(this.getLocaleFormats().LT || "");
+    });
+    __publicField(this, "expandFormat", (format) => {
+      const localeFormats = this.getLocaleFormats();
+      const t = (formatBis) => formatBis.replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g, (_, a, b) => a || b.slice(1));
+      return format.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g, (_, a, b) => {
+        const B = b && b.toUpperCase();
+        return a || localeFormats[b] || t(localeFormats[B]);
+      });
+    });
+    __publicField(this, "isValid", (value) => {
+      if (value == null) {
+        return false;
+      }
+      return value.isValid();
+    });
+    __publicField(this, "format", (value, formatKey) => {
+      return this.formatByString(value, this.formats[formatKey]);
+    });
+    __publicField(this, "formatByString", (value, formatString) => {
+      return this.setLocaleToValue(value).format(formatString);
+    });
+    __publicField(this, "formatNumber", (numberToFormat) => {
+      return numberToFormat;
+    });
+    __publicField(this, "isEqual", (value, comparing) => {
+      if (value === null && comparing === null) {
+        return true;
+      }
+      if (value === null || comparing === null) {
+        return false;
+      }
+      return value.toDate().getTime() === comparing.toDate().getTime();
+    });
+    __publicField(this, "isSameYear", (value, comparing) => {
+      return this.isSame(value, comparing, "YYYY");
+    });
+    __publicField(this, "isSameMonth", (value, comparing) => {
+      return this.isSame(value, comparing, "YYYY-MM");
+    });
+    __publicField(this, "isSameDay", (value, comparing) => {
+      return this.isSame(value, comparing, "YYYY-MM-DD");
+    });
+    __publicField(this, "isSameHour", (value, comparing) => {
+      return value.isSame(comparing, "hour");
+    });
+    __publicField(this, "isAfter", (value, comparing) => {
+      return value > comparing;
+    });
+    __publicField(this, "isAfterYear", (value, comparing) => {
+      if (!this.hasUTCPlugin()) {
+        return value.isAfter(comparing, "year");
+      }
+      return !this.isSameYear(value, comparing) && value.utc() > comparing.utc();
+    });
+    __publicField(this, "isAfterDay", (value, comparing) => {
+      if (!this.hasUTCPlugin()) {
+        return value.isAfter(comparing, "day");
+      }
+      return !this.isSameDay(value, comparing) && value.utc() > comparing.utc();
+    });
+    __publicField(this, "isBefore", (value, comparing) => {
+      return value < comparing;
+    });
+    __publicField(this, "isBeforeYear", (value, comparing) => {
+      if (!this.hasUTCPlugin()) {
+        return value.isBefore(comparing, "year");
+      }
+      return !this.isSameYear(value, comparing) && value.utc() < comparing.utc();
+    });
+    __publicField(this, "isBeforeDay", (value, comparing) => {
+      if (!this.hasUTCPlugin()) {
+        return value.isBefore(comparing, "day");
+      }
+      return !this.isSameDay(value, comparing) && value.utc() < comparing.utc();
+    });
+    __publicField(this, "isWithinRange", (value, [start, end]) => {
+      return value >= start && value <= end;
+    });
+    __publicField(this, "startOfYear", (value) => {
+      return this.adjustOffset(value.startOf("year"));
+    });
+    __publicField(this, "startOfMonth", (value) => {
+      return this.adjustOffset(value.startOf("month"));
+    });
+    __publicField(this, "startOfWeek", (value) => {
+      return this.adjustOffset(this.setLocaleToValue(value).startOf("week"));
+    });
+    __publicField(this, "startOfDay", (value) => {
+      return this.adjustOffset(value.startOf("day"));
+    });
+    __publicField(this, "endOfYear", (value) => {
+      return this.adjustOffset(value.endOf("year"));
+    });
+    __publicField(this, "endOfMonth", (value) => {
+      return this.adjustOffset(value.endOf("month"));
+    });
+    __publicField(this, "endOfWeek", (value) => {
+      return this.adjustOffset(this.setLocaleToValue(value).endOf("week"));
+    });
+    __publicField(this, "endOfDay", (value) => {
+      return this.adjustOffset(value.endOf("day"));
+    });
+    __publicField(this, "addYears", (value, amount) => {
+      return this.adjustOffset(value.add(amount, "year"));
+    });
+    __publicField(this, "addMonths", (value, amount) => {
+      return this.adjustOffset(value.add(amount, "month"));
+    });
+    __publicField(this, "addWeeks", (value, amount) => {
+      return this.adjustOffset(value.add(amount, "week"));
+    });
+    __publicField(this, "addDays", (value, amount) => {
+      return this.adjustOffset(value.add(amount, "day"));
+    });
+    __publicField(this, "addHours", (value, amount) => {
+      return this.adjustOffset(value.add(amount, "hour"));
+    });
+    __publicField(this, "addMinutes", (value, amount) => {
+      return this.adjustOffset(value.add(amount, "minute"));
+    });
+    __publicField(this, "addSeconds", (value, amount) => {
+      return this.adjustOffset(value.add(amount, "second"));
+    });
+    __publicField(this, "getYear", (value) => {
+      return value.year();
+    });
+    __publicField(this, "getMonth", (value) => {
+      return value.month();
+    });
+    __publicField(this, "getDate", (value) => {
+      return value.date();
+    });
+    __publicField(this, "getHours", (value) => {
+      return value.hour();
+    });
+    __publicField(this, "getMinutes", (value) => {
+      return value.minute();
+    });
+    __publicField(this, "getSeconds", (value) => {
+      return value.second();
+    });
+    __publicField(this, "getMilliseconds", (value) => {
+      return value.millisecond();
+    });
+    __publicField(this, "setYear", (value, year) => {
+      return this.adjustOffset(value.set("year", year));
+    });
+    __publicField(this, "setMonth", (value, month) => {
+      return this.adjustOffset(value.set("month", month));
+    });
+    __publicField(this, "setDate", (value, date) => {
+      return this.adjustOffset(value.set("date", date));
+    });
+    __publicField(this, "setHours", (value, hours) => {
+      return this.adjustOffset(value.set("hour", hours));
+    });
+    __publicField(this, "setMinutes", (value, minutes) => {
+      return this.adjustOffset(value.set("minute", minutes));
+    });
+    __publicField(this, "setSeconds", (value, seconds) => {
+      return this.adjustOffset(value.set("second", seconds));
+    });
+    __publicField(this, "setMilliseconds", (value, milliseconds) => {
+      return this.adjustOffset(value.set("millisecond", milliseconds));
+    });
+    __publicField(this, "getDaysInMonth", (value) => {
+      return value.daysInMonth();
+    });
+    __publicField(this, "getWeekArray", (value) => {
+      const start = this.startOfWeek(this.startOfMonth(value));
+      const end = this.endOfWeek(this.endOfMonth(value));
+      let count = 0;
+      let current = start;
+      const nestedWeeks = [];
+      while (current < end) {
+        const weekNumber = Math.floor(count / 7);
+        nestedWeeks[weekNumber] = nestedWeeks[weekNumber] || [];
+        nestedWeeks[weekNumber].push(current);
+        current = this.addDays(current, 1);
+        count += 1;
+      }
+      return nestedWeeks;
+    });
+    __publicField(this, "getWeekNumber", (value) => {
+      return value.week();
+    });
+    __publicField(this, "getYearRange", ([start, end]) => {
+      const startDate = this.startOfYear(start);
+      const endDate = this.endOfYear(end);
+      const years = [];
+      let current = startDate;
+      while (this.isBefore(current, endDate)) {
+        years.push(current);
+        current = this.addYears(current, 1);
+      }
+      return years;
+    });
+    this.locale = locale;
+    this.formats = _extends$1({}, defaultFormats, formats);
+    dayjs.extend(customParseFormatPlugin);
+  }
+  getDayOfWeek(value) {
+    return value.day() + 1;
+  }
+}
+const DEFAULT_THEME = "dark";
+const ThemeContext = createContext({ theme: DEFAULT_THEME, setTheme: () => {
+} });
+function ThemeContextComponent({ children }) {
+  const [theme, setTheme] = useState(DEFAULT_THEME);
+  return /* @__PURE__ */ jsx$1(ThemeContext.Provider, { value: { theme, setTheme }, children: /* @__PURE__ */ jsx$1(LocalizationProvider, { dateAdapter: AdapterDayjs, children }) });
+}
+function Card({ children, noPadding, noBlur = false, appearance = "glass", color: color2 = "neutral", intensity, dark: dark2 = true, onClick, className, style: style2 }) {
+  let [classNames, setClassNames] = useState("");
+  let [cardStyle, setCardStyle] = useState({});
+  const { theme } = useContext(ThemeContext);
+  useEffect(() => {
+    let intensityValue = intensity;
+    if (intensityValue === void 0) {
+      intensityValue = theme === "dark" ? 600 : 300;
+    }
+    setCardStyle({
+      "--glass-color": `var(--color-${color2}-${intensityValue})`,
+      "--card-text-color": `var(--color-${color2}-${dark2 ? "100" : "800"})`,
+      backdropFilter: appearance === "glass" && !noBlur ? "blur(10px)" : void 0,
+      ...style2
+    });
+    let rounded = "rounded-md";
+    if (className) {
+      const roundedMatch = className.match(/rounded\-[a-z0-9]+/g);
+      if (roundedMatch) {
+        rounded = roundedMatch[roundedMatch.length - 1];
+      }
+    }
+    setClassNames(`card ${rounded} ${appearance} ${className} ${noPadding ? "" : "p-[2rem]"}`);
+  }, [color2, intensity, dark2, appearance, noBlur, className, theme]);
+  return /* @__PURE__ */ jsx$1("article", { className: classNames, style: cardStyle, onClick, children });
+}
+function Button({ children, label, icon, position: position2 = "left", onClick, size, className, ...cardProps }) {
+  let cardClassNames = "flex justify-center items-center gap-x-[0.40rem] h-[2.5rem] min-w-[2.5rem] box-border p-0";
+  if (label) {
+    cardClassNames += " px-0 py-1";
+  }
+  if (className) {
+    const roundedMatch = className.match(/rounded\-[a-z0-9]+/g);
+    if (roundedMatch) {
+      cardClassNames += " " + roundedMatch[roundedMatch.length - 1];
+    }
+  }
+  if (size === "sm") {
+    cardClassNames += " h-[2rem] w-[2rem] min-w-auto";
+  }
+  const buttonClick = (ev) => {
+    if (typeof onClick === "function") {
+      onClick(ev);
+    }
+  };
+  return /* @__PURE__ */ jsx$1("button", { className, onClick: buttonClick, children: /* @__PURE__ */ jsxs(Card, { noBlur: true, noPadding: true, className: cardClassNames, ...cardProps, children: [
+    position2 === "left" && icon,
+    label,
+    children,
+    position2 === "right" && icon
+  ] }) });
+}
+function Badge({ label, ...cardProps }) {
+  return /* @__PURE__ */ jsx$1(Card, { noBlur: true, noPadding: true, className: "rounded-sm w-fit", ...cardProps, children: /* @__PURE__ */ jsx$1("div", { className: "px-0.5 py-0.10 text-[0.5rem] font-bold", children: label }) });
+}
+var DefaultContext = {
+  color: void 0,
+  size: void 0,
+  className: void 0,
+  style: void 0,
+  attr: void 0
+};
+var IconContext = React__default.createContext && /* @__PURE__ */ React__default.createContext(DefaultContext);
+var _excluded = ["attr", "size", "title"];
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  for (var key in source) {
+    if (Object.prototype.hasOwnProperty.call(source, key)) {
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+function ownKeys(e, r2) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r2 && (o = o.filter(function(r3) {
+      return Object.getOwnPropertyDescriptor(e, r3).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread(e) {
+  for (var r2 = 1; r2 < arguments.length; r2++) {
+    var t = null != arguments[r2] ? arguments[r2] : {};
+    r2 % 2 ? ownKeys(Object(t), true).forEach(function(r3) {
+      _defineProperty(e, r3, t[r3]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r3) {
+      Object.defineProperty(e, r3, Object.getOwnPropertyDescriptor(t, r3));
+    });
+  }
+  return e;
+}
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, { value, enumerable: true, configurable: true, writable: true });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive(t, r2) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r2);
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r2 ? String : Number)(t);
+}
+function Tree2Element(tree) {
+  return tree && tree.map((node2, i) => /* @__PURE__ */ React__default.createElement(node2.tag, _objectSpread({
+    key: i
+  }, node2.attr), Tree2Element(node2.child)));
+}
+function GenIcon(data) {
+  return (props) => /* @__PURE__ */ React__default.createElement(IconBase, _extends({
+    attr: _objectSpread({}, data.attr)
+  }, props), Tree2Element(data.child));
+}
+function IconBase(props) {
+  var elem = (conf) => {
+    var {
+      attr,
+      size,
+      title
+    } = props, svgProps = _objectWithoutProperties(props, _excluded);
+    var computedSize = size || conf.size || "1em";
+    var className;
+    if (conf.className) className = conf.className;
+    if (props.className) className = (className ? className + " " : "") + props.className;
+    return /* @__PURE__ */ React__default.createElement("svg", _extends({
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0"
+    }, conf.attr, attr, svgProps, {
+      className,
+      style: _objectSpread(_objectSpread({
+        color: props.color || conf.color
+      }, conf.style), props.style),
+      height: computedSize,
+      width: computedSize,
+      xmlns: "http://www.w3.org/2000/svg"
+    }), title && /* @__PURE__ */ React__default.createElement("title", null, title), props.children);
+  };
+  return IconContext !== void 0 ? /* @__PURE__ */ React__default.createElement(IconContext.Consumer, null, (conf) => elem(conf)) : elem(DefaultContext);
+}
+function FaCheck(props) {
+  return GenIcon({ "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" }, "child": [] }] })(props);
+}
+function FaChevronDown(props) {
+  return GenIcon({ "attr": { "viewBox": "0 0 448 512" }, "child": [{ "tag": "path", "attr": { "d": "M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z" }, "child": [] }] })(props);
+}
+function FaChevronUp(props) {
+  return GenIcon({ "attr": { "viewBox": "0 0 448 512" }, "child": [{ "tag": "path", "attr": { "d": "M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z" }, "child": [] }] })(props);
+}
+function Checkbox({ label, checkedDefault = false, onChange }) {
+  const [checked, setChecked] = useState(checkedDefault);
+  function checkboxClicked() {
+    const newValue = !checked;
+    setChecked(newValue);
+    onChange(newValue);
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 w-fit", onClick: checkboxClicked, children: [
+    /* @__PURE__ */ jsx$1(Button, { icon: checked ? /* @__PURE__ */ jsx$1(FaCheck, {}) : null }),
+    label
+  ] });
+}
+function SectionName({ section, className }) {
+  return /* @__PURE__ */ jsx$1("div", { className: `uppercase font-bold tracking-[0.15rem] w-fit section-name ${className}`, children: section });
+}
+function Input({ type, value, disabled, placeholder, size, maxLength, onChange, iconPosition = "left", centerText = false, icon, className, ...cardProps }) {
+  function inputUpdated(ev) {
+    onChange == null ? void 0 : onChange(ev.target.value);
+  }
+  const classnames = `flex`;
+  const inputClassName = `flex justify-center items-center border-none bg-none py-[0.5rem] px-[1rem] m-0 w-full ${centerText ? "text-center" : ""}`;
+  const directionClassName = iconPosition === "left" ? "pl-2" : "flex-row-reverse pr-2";
+  return /* @__PURE__ */ jsx$1("div", { className: classnames, children: /* @__PURE__ */ jsxs(Card, { className: `flex justify-center items-center rounded-md ${className} ${icon ? directionClassName : ""}`, noBlur: true, noPadding: true, ...cardProps, style: cardProps.style, children: [
+    icon && /* @__PURE__ */ jsx$1("div", { className: "flex items-center", children: icon }),
+    /* @__PURE__ */ jsx$1("input", { className: inputClassName, onChange: inputUpdated, placeholder, value, disabled, type, size, maxLength, style: cardProps.style })
+  ] }) });
+}
+function CustomDay(props) {
+  const { highlightedDays = [], day, outsideCurrentMonth, ...other } = props;
+  const isSelected = highlightedDays.some((date) => day.isSame(date, "day"));
+  return /* @__PURE__ */ jsx$1(
+    PickersDay2,
+    {
+      ...other,
+      day,
+      selected: isSelected,
+      outsideCurrentMonth,
+      sx: {
+        ...isSelected && {
+          backgroundColor: "white !important",
+          // Make selected day white
+          color: "black !important"
+          // Text color to black for contrast
+        }
+      }
+    }
+  );
+}
+function Calendar({
+  selectedDates,
+  onMonthChange,
+  onYearChange,
+  referenceDate,
+  view,
+  views,
+  openTo,
+  value,
+  onChange,
+  defaultValue,
+  ...cardProps
+}) {
+  const theme = createTheme({
+    palette: {
+      mode: "dark"
+    }
+  });
+  const convertSelectedDates = (dates) => {
+    if (!dates) return [];
+    return dates.map((date) => {
+      if (typeof date === "string") {
+        return dayjs(date);
+      }
+      return dayjs(date);
+    });
+  };
+  const convertDateToDayjs = (date) => date ? dayjs(date) : void 0;
+  const handleMonthChange = (month) => {
+    if (onMonthChange) {
+      onMonthChange(month.toDate());
+    }
+  };
+  const handleYearChange = (year) => {
+    if (onYearChange) {
+      onYearChange(year.toDate());
+    }
+  };
+  const handleChange = (newValue) => {
+    if (onChange) {
+      onChange(newValue ? newValue.toDate() : null);
+    }
   };
   return /* @__PURE__ */ jsx$1(Card, { appearance: cardProps.appearance ?? "ghost", noPadding: true, ...cardProps, children: /* @__PURE__ */ jsx$1(ThemeProvider, { theme, children: /* @__PURE__ */ jsx$1(
     DateCalendar,
@@ -15031,10 +16049,1863 @@ function Calendar({
     }
   ) }) });
 }
+function DropdownButton({ children, open, toggle }) {
+  return /* @__PURE__ */ jsxs(Button, { onClick: toggle, className: `cursor-pointer ${open ? "button-open" : null}`, children: [
+    children,
+    /* @__PURE__ */ jsx$1("span", { className: "flex items-center content-center ml-[1rem]", children: open ? /* @__PURE__ */ jsx$1(FaChevronUp, {}) : /* @__PURE__ */ jsx$1(FaChevronDown, {}) })
+  ] });
+}
+function Dropdown({ buttonText, options = [], onSelected }) {
+  const [open, setOpen] = useState(false);
+  const [optionSelected, setOptionSelected] = useState(buttonText);
+  const toggleDropdown = () => {
+    setOpen((open2) => !open2);
+  };
+  const itemClicked = (option) => {
+    setOptionSelected(option);
+    onSelected == null ? void 0 : onSelected(option);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs("div", { tabIndex: 0, className: "relative w-fit", onBlur: () => setOpen(false), children: [
+    /* @__PURE__ */ jsx$1(DropdownButton, { toggle: toggleDropdown, open, children: optionSelected }),
+    open && /* @__PURE__ */ jsx$1(Card, { noBlur: true, appearance: "mate", className: "absolute flex flex-col items-center p-[1rem] mt-[0.5rem] bg-white rounded-lg overflow-y-scroll dropdown-content", children: options.map((option) => /* @__PURE__ */ jsx$1("div", { className: "p-[0.5rem] m-[0.1rem] w-full rounded-lg cursor-pointer", onMouseDown: () => itemClicked(option), children: option }, option)) })
+  ] });
+}
+function areArraysEqual(array1, array2, itemComparer = (a, b) => a === b) {
+  return array1.length === array2.length && array1.every((value, index) => itemComparer(value, array2[index]));
+}
+const INTENTIONAL_DRAG_COUNT_THRESHOLD = 2;
+function getNewValue(currentValue, step, direction, min, max) {
+  return direction === 1 ? Math.min(currentValue + step, max) : Math.max(currentValue - step, min);
+}
+function asc(a, b) {
+  return a - b;
+}
+function findClosest(values2, currentValue) {
+  const {
+    index: closestIndex
+  } = values2.reduce((acc, value, index) => {
+    const distance = Math.abs(currentValue - value);
+    if (acc === null || distance < acc.distance || distance === acc.distance) {
+      return {
+        distance,
+        index
+      };
+    }
+    return acc;
+  }, null) ?? {};
+  return closestIndex;
+}
+function trackFinger(event, touchId) {
+  if (touchId.current !== void 0 && event.changedTouches) {
+    const touchEvent = event;
+    for (let i = 0; i < touchEvent.changedTouches.length; i += 1) {
+      const touch = touchEvent.changedTouches[i];
+      if (touch.identifier === touchId.current) {
+        return {
+          x: touch.clientX,
+          y: touch.clientY
+        };
+      }
+    }
+    return false;
+  }
+  return {
+    x: event.clientX,
+    y: event.clientY
+  };
+}
+function valueToPercent(value, min, max) {
+  return (value - min) * 100 / (max - min);
+}
+function percentToValue(percent, min, max) {
+  return (max - min) * percent + min;
+}
+function getDecimalPrecision(num) {
+  if (Math.abs(num) < 1) {
+    const parts = num.toExponential().split("e-");
+    const matissaDecimalPart = parts[0].split(".")[1];
+    return (matissaDecimalPart ? matissaDecimalPart.length : 0) + parseInt(parts[1], 10);
+  }
+  const decimalPart = num.toString().split(".")[1];
+  return decimalPart ? decimalPart.length : 0;
+}
+function roundValueToStep(value, step, min) {
+  const nearest = Math.round((value - min) / step) * step + min;
+  return Number(nearest.toFixed(getDecimalPrecision(step)));
+}
+function setValueIndex({
+  values: values2,
+  newValue,
+  index
+}) {
+  const output = values2.slice();
+  output[index] = newValue;
+  return output.sort(asc);
+}
+function focusThumb({
+  sliderRef,
+  activeIndex,
+  setActive
+}) {
+  var _a, _b, _c;
+  const doc = ownerDocument(sliderRef.current);
+  if (!((_a = sliderRef.current) == null ? void 0 : _a.contains(doc.activeElement)) || Number((_b = doc == null ? void 0 : doc.activeElement) == null ? void 0 : _b.getAttribute("data-index")) !== activeIndex) {
+    (_c = sliderRef.current) == null ? void 0 : _c.querySelector(`[type="range"][data-index="${activeIndex}"]`).focus();
+  }
+  if (setActive) {
+    setActive(activeIndex);
+  }
+}
+function areValuesEqual(newValue, oldValue) {
+  if (typeof newValue === "number" && typeof oldValue === "number") {
+    return newValue === oldValue;
+  }
+  if (typeof newValue === "object" && typeof oldValue === "object") {
+    return areArraysEqual(newValue, oldValue);
+  }
+  return false;
+}
+const axisProps = {
+  horizontal: {
+    offset: (percent) => ({
+      left: `${percent}%`
+    }),
+    leap: (percent) => ({
+      width: `${percent}%`
+    })
+  },
+  "horizontal-reverse": {
+    offset: (percent) => ({
+      right: `${percent}%`
+    }),
+    leap: (percent) => ({
+      width: `${percent}%`
+    })
+  },
+  vertical: {
+    offset: (percent) => ({
+      bottom: `${percent}%`
+    }),
+    leap: (percent) => ({
+      height: `${percent}%`
+    })
+  }
+};
+const Identity$1 = (x) => x;
+let cachedSupportsTouchActionNone;
+function doesSupportTouchActionNone() {
+  if (cachedSupportsTouchActionNone === void 0) {
+    if (typeof CSS !== "undefined" && typeof CSS.supports === "function") {
+      cachedSupportsTouchActionNone = CSS.supports("touch-action", "none");
+    } else {
+      cachedSupportsTouchActionNone = true;
+    }
+  }
+  return cachedSupportsTouchActionNone;
+}
+function useSlider(parameters) {
+  const {
+    "aria-labelledby": ariaLabelledby,
+    defaultValue,
+    disabled = false,
+    disableSwap = false,
+    isRtl = false,
+    marks: marksProp = false,
+    max = 100,
+    min = 0,
+    name,
+    onChange,
+    onChangeCommitted,
+    orientation = "horizontal",
+    rootRef: ref,
+    scale = Identity$1,
+    step = 1,
+    shiftStep = 10,
+    tabIndex,
+    value: valueProp
+  } = parameters;
+  const touchId = React.useRef(void 0);
+  const [active, setActive] = React.useState(-1);
+  const [open, setOpen] = React.useState(-1);
+  const [dragging, setDragging] = React.useState(false);
+  const moveCount = React.useRef(0);
+  const lastChangedValue = React.useRef(null);
+  const [valueDerived, setValueState] = useControlled({
+    controlled: valueProp,
+    default: defaultValue ?? min,
+    name: "Slider"
+  });
+  const handleChange = onChange && ((event, value, thumbIndex) => {
+    const nativeEvent = event.nativeEvent || event;
+    const clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
+    Object.defineProperty(clonedEvent, "target", {
+      writable: true,
+      value: {
+        value,
+        name
+      }
+    });
+    lastChangedValue.current = value;
+    onChange(clonedEvent, value, thumbIndex);
+  });
+  const range = Array.isArray(valueDerived);
+  let values2 = range ? valueDerived.slice().sort(asc) : [valueDerived];
+  values2 = values2.map((value) => value == null ? min : clamp(value, min, max));
+  const marks = marksProp === true && step !== null ? [...Array(Math.floor((max - min) / step) + 1)].map((_, index) => ({
+    value: min + step * index
+  })) : marksProp || [];
+  const marksValues = marks.map((mark) => mark.value);
+  const [focusedThumbIndex, setFocusedThumbIndex] = React.useState(-1);
+  const sliderRef = React.useRef(null);
+  const handleRef = useForkRef(ref, sliderRef);
+  const createHandleHiddenInputFocus = (otherHandlers) => (event) => {
+    var _a;
+    const index = Number(event.currentTarget.getAttribute("data-index"));
+    if (isFocusVisible(event.target)) {
+      setFocusedThumbIndex(index);
+    }
+    setOpen(index);
+    (_a = otherHandlers == null ? void 0 : otherHandlers.onFocus) == null ? void 0 : _a.call(otherHandlers, event);
+  };
+  const createHandleHiddenInputBlur = (otherHandlers) => (event) => {
+    var _a;
+    if (!isFocusVisible(event.target)) {
+      setFocusedThumbIndex(-1);
+    }
+    setOpen(-1);
+    (_a = otherHandlers == null ? void 0 : otherHandlers.onBlur) == null ? void 0 : _a.call(otherHandlers, event);
+  };
+  const changeValue = (event, valueInput) => {
+    const index = Number(event.currentTarget.getAttribute("data-index"));
+    const value = values2[index];
+    const marksIndex = marksValues.indexOf(value);
+    let newValue = valueInput;
+    if (marks && step == null) {
+      const maxMarksValue = marksValues[marksValues.length - 1];
+      if (newValue >= maxMarksValue) {
+        newValue = maxMarksValue;
+      } else if (newValue <= marksValues[0]) {
+        newValue = marksValues[0];
+      } else {
+        newValue = newValue < value ? marksValues[marksIndex - 1] : marksValues[marksIndex + 1];
+      }
+    }
+    newValue = clamp(newValue, min, max);
+    if (range) {
+      if (disableSwap) {
+        newValue = clamp(newValue, values2[index - 1] || -Infinity, values2[index + 1] || Infinity);
+      }
+      const previousValue = newValue;
+      newValue = setValueIndex({
+        values: values2,
+        newValue,
+        index
+      });
+      let activeIndex = index;
+      if (!disableSwap) {
+        activeIndex = newValue.indexOf(previousValue);
+      }
+      focusThumb({
+        sliderRef,
+        activeIndex
+      });
+    }
+    setValueState(newValue);
+    setFocusedThumbIndex(index);
+    if (handleChange && !areValuesEqual(newValue, valueDerived)) {
+      handleChange(event, newValue, index);
+    }
+    if (onChangeCommitted) {
+      onChangeCommitted(event, lastChangedValue.current ?? newValue);
+    }
+  };
+  const createHandleHiddenInputKeyDown = (otherHandlers) => (event) => {
+    var _a;
+    if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "PageUp", "PageDown", "Home", "End"].includes(event.key)) {
+      event.preventDefault();
+      const index = Number(event.currentTarget.getAttribute("data-index"));
+      const value = values2[index];
+      let newValue = null;
+      if (step != null) {
+        const stepSize = event.shiftKey ? shiftStep : step;
+        switch (event.key) {
+          case "ArrowUp":
+            newValue = getNewValue(value, stepSize, 1, min, max);
+            break;
+          case "ArrowRight":
+            newValue = getNewValue(value, stepSize, isRtl ? -1 : 1, min, max);
+            break;
+          case "ArrowDown":
+            newValue = getNewValue(value, stepSize, -1, min, max);
+            break;
+          case "ArrowLeft":
+            newValue = getNewValue(value, stepSize, isRtl ? 1 : -1, min, max);
+            break;
+          case "PageUp":
+            newValue = getNewValue(value, shiftStep, 1, min, max);
+            break;
+          case "PageDown":
+            newValue = getNewValue(value, shiftStep, -1, min, max);
+            break;
+          case "Home":
+            newValue = min;
+            break;
+          case "End":
+            newValue = max;
+            break;
+        }
+      } else if (marks) {
+        const maxMarksValue = marksValues[marksValues.length - 1];
+        const currentMarkIndex = marksValues.indexOf(value);
+        const decrementKeys = [isRtl ? "ArrowRight" : "ArrowLeft", "ArrowDown", "PageDown", "Home"];
+        const incrementKeys = [isRtl ? "ArrowLeft" : "ArrowRight", "ArrowUp", "PageUp", "End"];
+        if (decrementKeys.includes(event.key)) {
+          if (currentMarkIndex === 0) {
+            newValue = marksValues[0];
+          } else {
+            newValue = marksValues[currentMarkIndex - 1];
+          }
+        } else if (incrementKeys.includes(event.key)) {
+          if (currentMarkIndex === marksValues.length - 1) {
+            newValue = maxMarksValue;
+          } else {
+            newValue = marksValues[currentMarkIndex + 1];
+          }
+        }
+      }
+      if (newValue != null) {
+        changeValue(event, newValue);
+      }
+    }
+    (_a = otherHandlers == null ? void 0 : otherHandlers.onKeyDown) == null ? void 0 : _a.call(otherHandlers, event);
+  };
+  useEnhancedEffect(() => {
+    var _a;
+    if (disabled && sliderRef.current.contains(document.activeElement)) {
+      (_a = document.activeElement) == null ? void 0 : _a.blur();
+    }
+  }, [disabled]);
+  if (disabled && active !== -1) {
+    setActive(-1);
+  }
+  if (disabled && focusedThumbIndex !== -1) {
+    setFocusedThumbIndex(-1);
+  }
+  const createHandleHiddenInputChange = (otherHandlers) => (event) => {
+    var _a;
+    (_a = otherHandlers.onChange) == null ? void 0 : _a.call(otherHandlers, event);
+    changeValue(event, event.target.valueAsNumber);
+  };
+  const previousIndex = React.useRef(void 0);
+  let axis = orientation;
+  if (isRtl && orientation === "horizontal") {
+    axis += "-reverse";
+  }
+  const getFingerNewValue = ({
+    finger,
+    move = false
+  }) => {
+    const {
+      current: slider
+    } = sliderRef;
+    const {
+      width: width2,
+      height: height2,
+      bottom,
+      left
+    } = slider.getBoundingClientRect();
+    let percent;
+    if (axis.startsWith("vertical")) {
+      percent = (bottom - finger.y) / height2;
+    } else {
+      percent = (finger.x - left) / width2;
+    }
+    if (axis.includes("-reverse")) {
+      percent = 1 - percent;
+    }
+    let newValue;
+    newValue = percentToValue(percent, min, max);
+    if (step) {
+      newValue = roundValueToStep(newValue, step, min);
+    } else {
+      const closestIndex = findClosest(marksValues, newValue);
+      newValue = marksValues[closestIndex];
+    }
+    newValue = clamp(newValue, min, max);
+    let activeIndex = 0;
+    if (range) {
+      if (!move) {
+        activeIndex = findClosest(values2, newValue);
+      } else {
+        activeIndex = previousIndex.current;
+      }
+      if (disableSwap) {
+        newValue = clamp(newValue, values2[activeIndex - 1] || -Infinity, values2[activeIndex + 1] || Infinity);
+      }
+      const previousValue = newValue;
+      newValue = setValueIndex({
+        values: values2,
+        newValue,
+        index: activeIndex
+      });
+      if (!(disableSwap && move)) {
+        activeIndex = newValue.indexOf(previousValue);
+        previousIndex.current = activeIndex;
+      }
+    }
+    return {
+      newValue,
+      activeIndex
+    };
+  };
+  const handleTouchMove = useEventCallback((nativeEvent) => {
+    const finger = trackFinger(nativeEvent, touchId);
+    if (!finger) {
+      return;
+    }
+    moveCount.current += 1;
+    if (nativeEvent.type === "mousemove" && nativeEvent.buttons === 0) {
+      handleTouchEnd(nativeEvent);
+      return;
+    }
+    const {
+      newValue,
+      activeIndex
+    } = getFingerNewValue({
+      finger,
+      move: true
+    });
+    focusThumb({
+      sliderRef,
+      activeIndex,
+      setActive
+    });
+    setValueState(newValue);
+    if (!dragging && moveCount.current > INTENTIONAL_DRAG_COUNT_THRESHOLD) {
+      setDragging(true);
+    }
+    if (handleChange && !areValuesEqual(newValue, valueDerived)) {
+      handleChange(nativeEvent, newValue, activeIndex);
+    }
+  });
+  const handleTouchEnd = useEventCallback((nativeEvent) => {
+    const finger = trackFinger(nativeEvent, touchId);
+    setDragging(false);
+    if (!finger) {
+      return;
+    }
+    const {
+      newValue
+    } = getFingerNewValue({
+      finger,
+      move: true
+    });
+    setActive(-1);
+    if (nativeEvent.type === "touchend") {
+      setOpen(-1);
+    }
+    if (onChangeCommitted) {
+      onChangeCommitted(nativeEvent, lastChangedValue.current ?? newValue);
+    }
+    touchId.current = void 0;
+    stopListening();
+  });
+  const handleTouchStart = useEventCallback((nativeEvent) => {
+    if (disabled) {
+      return;
+    }
+    if (!doesSupportTouchActionNone()) {
+      nativeEvent.preventDefault();
+    }
+    const touch = nativeEvent.changedTouches[0];
+    if (touch != null) {
+      touchId.current = touch.identifier;
+    }
+    const finger = trackFinger(nativeEvent, touchId);
+    if (finger !== false) {
+      const {
+        newValue,
+        activeIndex
+      } = getFingerNewValue({
+        finger
+      });
+      focusThumb({
+        sliderRef,
+        activeIndex,
+        setActive
+      });
+      setValueState(newValue);
+      if (handleChange && !areValuesEqual(newValue, valueDerived)) {
+        handleChange(nativeEvent, newValue, activeIndex);
+      }
+    }
+    moveCount.current = 0;
+    const doc = ownerDocument(sliderRef.current);
+    doc.addEventListener("touchmove", handleTouchMove, {
+      passive: true
+    });
+    doc.addEventListener("touchend", handleTouchEnd, {
+      passive: true
+    });
+  });
+  const stopListening = React.useCallback(() => {
+    const doc = ownerDocument(sliderRef.current);
+    doc.removeEventListener("mousemove", handleTouchMove);
+    doc.removeEventListener("mouseup", handleTouchEnd);
+    doc.removeEventListener("touchmove", handleTouchMove);
+    doc.removeEventListener("touchend", handleTouchEnd);
+  }, [handleTouchEnd, handleTouchMove]);
+  React.useEffect(() => {
+    const {
+      current: slider
+    } = sliderRef;
+    slider.addEventListener("touchstart", handleTouchStart, {
+      passive: doesSupportTouchActionNone()
+    });
+    return () => {
+      slider.removeEventListener("touchstart", handleTouchStart);
+      stopListening();
+    };
+  }, [stopListening, handleTouchStart]);
+  React.useEffect(() => {
+    if (disabled) {
+      stopListening();
+    }
+  }, [disabled, stopListening]);
+  const createHandleMouseDown = (otherHandlers) => (event) => {
+    var _a;
+    (_a = otherHandlers.onMouseDown) == null ? void 0 : _a.call(otherHandlers, event);
+    if (disabled) {
+      return;
+    }
+    if (event.defaultPrevented) {
+      return;
+    }
+    if (event.button !== 0) {
+      return;
+    }
+    event.preventDefault();
+    const finger = trackFinger(event, touchId);
+    if (finger !== false) {
+      const {
+        newValue,
+        activeIndex
+      } = getFingerNewValue({
+        finger
+      });
+      focusThumb({
+        sliderRef,
+        activeIndex,
+        setActive
+      });
+      setValueState(newValue);
+      if (handleChange && !areValuesEqual(newValue, valueDerived)) {
+        handleChange(event, newValue, activeIndex);
+      }
+    }
+    moveCount.current = 0;
+    const doc = ownerDocument(sliderRef.current);
+    doc.addEventListener("mousemove", handleTouchMove, {
+      passive: true
+    });
+    doc.addEventListener("mouseup", handleTouchEnd);
+  };
+  const trackOffset = valueToPercent(range ? values2[0] : min, min, max);
+  const trackLeap = valueToPercent(values2[values2.length - 1], min, max) - trackOffset;
+  const getRootProps = (externalProps = {}) => {
+    const externalHandlers = extractEventHandlers(externalProps);
+    const ownEventHandlers = {
+      onMouseDown: createHandleMouseDown(externalHandlers || {})
+    };
+    const mergedEventHandlers = {
+      ...externalHandlers,
+      ...ownEventHandlers
+    };
+    return {
+      ...externalProps,
+      ref: handleRef,
+      ...mergedEventHandlers
+    };
+  };
+  const createHandleMouseOver = (otherHandlers) => (event) => {
+    var _a;
+    (_a = otherHandlers.onMouseOver) == null ? void 0 : _a.call(otherHandlers, event);
+    const index = Number(event.currentTarget.getAttribute("data-index"));
+    setOpen(index);
+  };
+  const createHandleMouseLeave = (otherHandlers) => (event) => {
+    var _a;
+    (_a = otherHandlers.onMouseLeave) == null ? void 0 : _a.call(otherHandlers, event);
+    setOpen(-1);
+  };
+  const getThumbProps = (externalProps = {}) => {
+    const externalHandlers = extractEventHandlers(externalProps);
+    const ownEventHandlers = {
+      onMouseOver: createHandleMouseOver(externalHandlers || {}),
+      onMouseLeave: createHandleMouseLeave(externalHandlers || {})
+    };
+    return {
+      ...externalProps,
+      ...externalHandlers,
+      ...ownEventHandlers
+    };
+  };
+  const getThumbStyle = (index) => {
+    return {
+      // So the non active thumb doesn't show its label on hover.
+      pointerEvents: active !== -1 && active !== index ? "none" : void 0
+    };
+  };
+  let cssWritingMode;
+  if (orientation === "vertical") {
+    cssWritingMode = isRtl ? "vertical-rl" : "vertical-lr";
+  }
+  const getHiddenInputProps = (externalProps = {}) => {
+    const externalHandlers = extractEventHandlers(externalProps);
+    const ownEventHandlers = {
+      onChange: createHandleHiddenInputChange(externalHandlers || {}),
+      onFocus: createHandleHiddenInputFocus(externalHandlers || {}),
+      onBlur: createHandleHiddenInputBlur(externalHandlers || {}),
+      onKeyDown: createHandleHiddenInputKeyDown(externalHandlers || {})
+    };
+    const mergedEventHandlers = {
+      ...externalHandlers,
+      ...ownEventHandlers
+    };
+    return {
+      tabIndex,
+      "aria-labelledby": ariaLabelledby,
+      "aria-orientation": orientation,
+      "aria-valuemax": scale(max),
+      "aria-valuemin": scale(min),
+      name,
+      type: "range",
+      min: parameters.min,
+      max: parameters.max,
+      step: parameters.step === null && parameters.marks ? "any" : parameters.step ?? void 0,
+      disabled,
+      ...externalProps,
+      ...mergedEventHandlers,
+      style: {
+        ...visuallyHidden,
+        direction: isRtl ? "rtl" : "ltr",
+        // So that VoiceOver's focus indicator matches the thumb's dimensions
+        width: "100%",
+        height: "100%",
+        writingMode: cssWritingMode
+      }
+    };
+  };
+  return {
+    active,
+    axis,
+    axisProps,
+    dragging,
+    focusedThumbIndex,
+    getHiddenInputProps,
+    getRootProps,
+    getThumbProps,
+    marks,
+    open,
+    range,
+    rootRef: handleRef,
+    trackLeap,
+    trackOffset,
+    values: values2,
+    getThumbStyle
+  };
+}
+const shouldSpreadAdditionalProps = (Slot) => {
+  return !Slot || !isHostComponent(Slot);
+};
+function getSliderUtilityClass(slot) {
+  return generateUtilityClass("MuiSlider", slot);
+}
+const sliderClasses = generateUtilityClasses("MuiSlider", ["root", "active", "colorPrimary", "colorSecondary", "colorError", "colorInfo", "colorSuccess", "colorWarning", "disabled", "dragging", "focusVisible", "mark", "markActive", "marked", "markLabel", "markLabelActive", "rail", "sizeSmall", "thumb", "thumbColorPrimary", "thumbColorSecondary", "thumbColorError", "thumbColorSuccess", "thumbColorInfo", "thumbColorWarning", "track", "trackInverted", "trackFalse", "thumbSizeSmall", "valueLabel", "valueLabelOpen", "valueLabelCircle", "valueLabelLabel", "vertical"]);
+const useValueLabelClasses = (props) => {
+  const {
+    open
+  } = props;
+  const utilityClasses = {
+    offset: clsx(open && sliderClasses.valueLabelOpen),
+    circle: sliderClasses.valueLabelCircle,
+    label: sliderClasses.valueLabelLabel
+  };
+  return utilityClasses;
+};
+function SliderValueLabel$1(props) {
+  const {
+    children,
+    className,
+    value
+  } = props;
+  const classes = useValueLabelClasses(props);
+  if (!children) {
+    return null;
+  }
+  return /* @__PURE__ */ React.cloneElement(children, {
+    className: children.props.className
+  }, /* @__PURE__ */ jsxs(React.Fragment, {
+    children: [children.props.children, /* @__PURE__ */ jsx$1("span", {
+      className: clsx(classes.offset, className),
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx$1("span", {
+        className: classes.circle,
+        children: /* @__PURE__ */ jsx$1("span", {
+          className: classes.label,
+          children: value
+        })
+      })
+    })]
+  }));
+}
+process.env.NODE_ENV !== "production" ? SliderValueLabel$1.propTypes = {
+  children: PropTypes.element.isRequired,
+  className: PropTypes.string,
+  value: PropTypes.node
+} : void 0;
+function Identity(x) {
+  return x;
+}
+const SliderRoot = styled("span", {
+  name: "MuiSlider",
+  slot: "Root",
+  overridesResolver: (props, styles2) => {
+    const {
+      ownerState
+    } = props;
+    return [styles2.root, styles2[`color${capitalize(ownerState.color)}`], ownerState.size !== "medium" && styles2[`size${capitalize(ownerState.size)}`], ownerState.marked && styles2.marked, ownerState.orientation === "vertical" && styles2.vertical, ownerState.track === "inverted" && styles2.trackInverted, ownerState.track === false && styles2.trackFalse];
+  }
+})(memoTheme(({
+  theme
+}) => ({
+  borderRadius: 12,
+  boxSizing: "content-box",
+  display: "inline-block",
+  position: "relative",
+  cursor: "pointer",
+  touchAction: "none",
+  WebkitTapHighlightColor: "transparent",
+  "@media print": {
+    colorAdjust: "exact"
+  },
+  [`&.${sliderClasses.disabled}`]: {
+    pointerEvents: "none",
+    cursor: "default",
+    color: (theme.vars || theme).palette.grey[400]
+  },
+  [`&.${sliderClasses.dragging}`]: {
+    [`& .${sliderClasses.thumb}, & .${sliderClasses.track}`]: {
+      transition: "none"
+    }
+  },
+  variants: [...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color2]) => ({
+    props: {
+      color: color2
+    },
+    style: {
+      color: (theme.vars || theme).palette[color2].main
+    }
+  })), {
+    props: {
+      orientation: "horizontal"
+    },
+    style: {
+      height: 4,
+      width: "100%",
+      padding: "13px 0",
+      // The primary input mechanism of the device includes a pointing device of limited accuracy.
+      "@media (pointer: coarse)": {
+        // Reach 42px touch target, about ~8mm on screen.
+        padding: "20px 0"
+      }
+    }
+  }, {
+    props: {
+      orientation: "horizontal",
+      size: "small"
+    },
+    style: {
+      height: 2
+    }
+  }, {
+    props: {
+      orientation: "horizontal",
+      marked: true
+    },
+    style: {
+      marginBottom: 20
+    }
+  }, {
+    props: {
+      orientation: "vertical"
+    },
+    style: {
+      height: "100%",
+      width: 4,
+      padding: "0 13px",
+      // The primary input mechanism of the device includes a pointing device of limited accuracy.
+      "@media (pointer: coarse)": {
+        // Reach 42px touch target, about ~8mm on screen.
+        padding: "0 20px"
+      }
+    }
+  }, {
+    props: {
+      orientation: "vertical",
+      size: "small"
+    },
+    style: {
+      width: 2
+    }
+  }, {
+    props: {
+      orientation: "vertical",
+      marked: true
+    },
+    style: {
+      marginRight: 44
+    }
+  }]
+})));
+const SliderRail = styled("span", {
+  name: "MuiSlider",
+  slot: "Rail"
+})({
+  display: "block",
+  position: "absolute",
+  borderRadius: "inherit",
+  backgroundColor: "currentColor",
+  opacity: 0.38,
+  variants: [{
+    props: {
+      orientation: "horizontal"
+    },
+    style: {
+      width: "100%",
+      height: "inherit",
+      top: "50%",
+      transform: "translateY(-50%)"
+    }
+  }, {
+    props: {
+      orientation: "vertical"
+    },
+    style: {
+      height: "100%",
+      width: "inherit",
+      left: "50%",
+      transform: "translateX(-50%)"
+    }
+  }, {
+    props: {
+      track: "inverted"
+    },
+    style: {
+      opacity: 1
+    }
+  }]
+});
+const SliderTrack = styled("span", {
+  name: "MuiSlider",
+  slot: "Track"
+})(memoTheme(({
+  theme
+}) => {
+  return {
+    display: "block",
+    position: "absolute",
+    borderRadius: "inherit",
+    border: "1px solid currentColor",
+    backgroundColor: "currentColor",
+    transition: theme.transitions.create(["left", "width", "bottom", "height"], {
+      duration: theme.transitions.duration.shortest
+    }),
+    variants: [{
+      props: {
+        size: "small"
+      },
+      style: {
+        border: "none"
+      }
+    }, {
+      props: {
+        orientation: "horizontal"
+      },
+      style: {
+        height: "inherit",
+        top: "50%",
+        transform: "translateY(-50%)"
+      }
+    }, {
+      props: {
+        orientation: "vertical"
+      },
+      style: {
+        width: "inherit",
+        left: "50%",
+        transform: "translateX(-50%)"
+      }
+    }, {
+      props: {
+        track: false
+      },
+      style: {
+        display: "none"
+      }
+    }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color2]) => ({
+      props: {
+        color: color2,
+        track: "inverted"
+      },
+      style: {
+        ...theme.vars ? {
+          backgroundColor: theme.vars.palette.Slider[`${color2}Track`],
+          borderColor: theme.vars.palette.Slider[`${color2}Track`]
+        } : {
+          backgroundColor: theme.lighten(theme.palette[color2].main, 0.62),
+          borderColor: theme.lighten(theme.palette[color2].main, 0.62),
+          ...theme.applyStyles("dark", {
+            backgroundColor: theme.darken(theme.palette[color2].main, 0.5)
+          }),
+          ...theme.applyStyles("dark", {
+            borderColor: theme.darken(theme.palette[color2].main, 0.5)
+          })
+        }
+      }
+    }))]
+  };
+}));
+const SliderThumb = styled("span", {
+  name: "MuiSlider",
+  slot: "Thumb",
+  overridesResolver: (props, styles2) => {
+    const {
+      ownerState
+    } = props;
+    return [styles2.thumb, styles2[`thumbColor${capitalize(ownerState.color)}`], ownerState.size !== "medium" && styles2[`thumbSize${capitalize(ownerState.size)}`]];
+  }
+})(memoTheme(({
+  theme
+}) => ({
+  position: "absolute",
+  width: 20,
+  height: 20,
+  boxSizing: "border-box",
+  borderRadius: "50%",
+  outline: 0,
+  backgroundColor: "currentColor",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  transition: theme.transitions.create(["box-shadow", "left", "bottom"], {
+    duration: theme.transitions.duration.shortest
+  }),
+  "&::before": {
+    position: "absolute",
+    content: '""',
+    borderRadius: "inherit",
+    width: "100%",
+    height: "100%",
+    boxShadow: (theme.vars || theme).shadows[2]
+  },
+  "&::after": {
+    position: "absolute",
+    content: '""',
+    borderRadius: "50%",
+    // 42px is the hit target
+    width: 42,
+    height: 42,
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)"
+  },
+  [`&.${sliderClasses.disabled}`]: {
+    "&:hover": {
+      boxShadow: "none"
+    }
+  },
+  variants: [{
+    props: {
+      size: "small"
+    },
+    style: {
+      width: 12,
+      height: 12,
+      "&::before": {
+        boxShadow: "none"
+      }
+    }
+  }, {
+    props: {
+      orientation: "horizontal"
+    },
+    style: {
+      top: "50%",
+      transform: "translate(-50%, -50%)"
+    }
+  }, {
+    props: {
+      orientation: "vertical"
+    },
+    style: {
+      left: "50%",
+      transform: "translate(-50%, 50%)"
+    }
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color2]) => ({
+    props: {
+      color: color2
+    },
+    style: {
+      [`&:hover, &.${sliderClasses.focusVisible}`]: {
+        boxShadow: `0px 0px 0px 8px ${theme.alpha((theme.vars || theme).palette[color2].main, 0.16)}`,
+        "@media (hover: none)": {
+          boxShadow: "none"
+        }
+      },
+      [`&.${sliderClasses.active}`]: {
+        boxShadow: `0px 0px 0px 14px ${theme.alpha((theme.vars || theme).palette[color2].main, 0.16)}`
+      }
+    }
+  }))]
+})));
+const SliderValueLabel = styled(SliderValueLabel$1, {
+  name: "MuiSlider",
+  slot: "ValueLabel"
+})(memoTheme(({
+  theme
+}) => ({
+  zIndex: 1,
+  whiteSpace: "nowrap",
+  ...theme.typography.body2,
+  fontWeight: 500,
+  transition: theme.transitions.create(["transform"], {
+    duration: theme.transitions.duration.shortest
+  }),
+  position: "absolute",
+  backgroundColor: (theme.vars || theme).palette.grey[600],
+  borderRadius: 2,
+  color: (theme.vars || theme).palette.common.white,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: "0.25rem 0.75rem",
+  variants: [{
+    props: {
+      orientation: "horizontal"
+    },
+    style: {
+      transform: "translateY(-100%) scale(0)",
+      top: "-10px",
+      transformOrigin: "bottom center",
+      "&::before": {
+        position: "absolute",
+        content: '""',
+        width: 8,
+        height: 8,
+        transform: "translate(-50%, 50%) rotate(45deg)",
+        backgroundColor: "inherit",
+        bottom: 0,
+        left: "50%"
+      },
+      [`&.${sliderClasses.valueLabelOpen}`]: {
+        transform: "translateY(-100%) scale(1)"
+      }
+    }
+  }, {
+    props: {
+      orientation: "vertical"
+    },
+    style: {
+      transform: "translateY(-50%) scale(0)",
+      right: "30px",
+      top: "50%",
+      transformOrigin: "right center",
+      "&::before": {
+        position: "absolute",
+        content: '""',
+        width: 8,
+        height: 8,
+        transform: "translate(-50%, -50%) rotate(45deg)",
+        backgroundColor: "inherit",
+        right: -8,
+        top: "50%"
+      },
+      [`&.${sliderClasses.valueLabelOpen}`]: {
+        transform: "translateY(-50%) scale(1)"
+      }
+    }
+  }, {
+    props: {
+      size: "small"
+    },
+    style: {
+      fontSize: theme.typography.pxToRem(12),
+      padding: "0.25rem 0.5rem"
+    }
+  }, {
+    props: {
+      orientation: "vertical",
+      size: "small"
+    },
+    style: {
+      right: "20px"
+    }
+  }]
+})));
+process.env.NODE_ENV !== "production" ? SliderValueLabel.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.element.isRequired,
+  /**
+   * @ignore
+   */
+  index: PropTypes.number.isRequired,
+  /**
+   * @ignore
+   */
+  open: PropTypes.bool.isRequired,
+  /**
+   * @ignore
+   */
+  value: PropTypes.node
+} : void 0;
+const SliderMark = styled("span", {
+  name: "MuiSlider",
+  slot: "Mark",
+  shouldForwardProp: (prop) => slotShouldForwardProp(prop) && prop !== "markActive",
+  overridesResolver: (props, styles2) => {
+    const {
+      markActive
+    } = props;
+    return [styles2.mark, markActive && styles2.markActive];
+  }
+})(memoTheme(({
+  theme
+}) => ({
+  position: "absolute",
+  width: 2,
+  height: 2,
+  borderRadius: 1,
+  backgroundColor: "currentColor",
+  variants: [{
+    props: {
+      orientation: "horizontal"
+    },
+    style: {
+      top: "50%",
+      transform: "translate(-1px, -50%)"
+    }
+  }, {
+    props: {
+      orientation: "vertical"
+    },
+    style: {
+      left: "50%",
+      transform: "translate(-50%, 1px)"
+    }
+  }, {
+    props: {
+      markActive: true
+    },
+    style: {
+      backgroundColor: (theme.vars || theme).palette.background.paper,
+      opacity: 0.8
+    }
+  }]
+})));
+const SliderMarkLabel = styled("span", {
+  name: "MuiSlider",
+  slot: "MarkLabel",
+  shouldForwardProp: (prop) => slotShouldForwardProp(prop) && prop !== "markLabelActive"
+})(memoTheme(({
+  theme
+}) => ({
+  ...theme.typography.body2,
+  color: (theme.vars || theme).palette.text.secondary,
+  position: "absolute",
+  whiteSpace: "nowrap",
+  variants: [{
+    props: {
+      orientation: "horizontal"
+    },
+    style: {
+      top: 30,
+      transform: "translateX(-50%)",
+      "@media (pointer: coarse)": {
+        top: 40
+      }
+    }
+  }, {
+    props: {
+      orientation: "vertical"
+    },
+    style: {
+      left: 36,
+      transform: "translateY(50%)",
+      "@media (pointer: coarse)": {
+        left: 44
+      }
+    }
+  }, {
+    props: {
+      markLabelActive: true
+    },
+    style: {
+      color: (theme.vars || theme).palette.text.primary
+    }
+  }]
+})));
+const useUtilityClasses = (ownerState) => {
+  const {
+    disabled,
+    dragging,
+    marked,
+    orientation,
+    track,
+    classes,
+    color: color2,
+    size
+  } = ownerState;
+  const slots = {
+    root: ["root", disabled && "disabled", dragging && "dragging", marked && "marked", orientation === "vertical" && "vertical", track === "inverted" && "trackInverted", track === false && "trackFalse", color2 && `color${capitalize(color2)}`, size && `size${capitalize(size)}`],
+    rail: ["rail"],
+    track: ["track"],
+    mark: ["mark"],
+    markActive: ["markActive"],
+    markLabel: ["markLabel"],
+    markLabelActive: ["markLabelActive"],
+    valueLabel: ["valueLabel"],
+    thumb: ["thumb", disabled && "disabled", size && `thumbSize${capitalize(size)}`, color2 && `thumbColor${capitalize(color2)}`],
+    active: ["active"],
+    disabled: ["disabled"],
+    focusVisible: ["focusVisible"]
+  };
+  return composeClasses(slots, getSliderUtilityClass, classes);
+};
+const Forward = ({
+  children
+}) => children;
+const Slider = /* @__PURE__ */ React.forwardRef(function Slider2(inputProps, ref) {
+  const props = useDefaultProps({
+    props: inputProps,
+    name: "MuiSlider"
+  });
+  const isRtl = useRtl();
+  const {
+    "aria-label": ariaLabel,
+    "aria-valuetext": ariaValuetext,
+    "aria-labelledby": ariaLabelledby,
+    // eslint-disable-next-line react/prop-types
+    component = "span",
+    components = {},
+    componentsProps = {},
+    color: color2 = "primary",
+    classes: classesProp,
+    className,
+    disableSwap = false,
+    disabled = false,
+    getAriaLabel,
+    getAriaValueText,
+    marks: marksProp = false,
+    max = 100,
+    min = 0,
+    name,
+    onChange,
+    onChangeCommitted,
+    orientation = "horizontal",
+    shiftStep = 10,
+    size = "medium",
+    step = 1,
+    scale = Identity,
+    slotProps,
+    slots,
+    tabIndex,
+    track = "normal",
+    value: valueProp,
+    valueLabelDisplay = "off",
+    valueLabelFormat = Identity,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
+    isRtl,
+    max,
+    min,
+    classes: classesProp,
+    disabled,
+    disableSwap,
+    orientation,
+    marks: marksProp,
+    color: color2,
+    size,
+    step,
+    shiftStep,
+    scale,
+    track,
+    valueLabelDisplay,
+    valueLabelFormat
+  };
+  const {
+    axisProps: axisProps2,
+    getRootProps,
+    getHiddenInputProps,
+    getThumbProps,
+    open,
+    active,
+    axis,
+    focusedThumbIndex,
+    range,
+    dragging,
+    marks,
+    values: values2,
+    trackOffset,
+    trackLeap,
+    getThumbStyle
+  } = useSlider({
+    ...ownerState,
+    rootRef: ref
+  });
+  ownerState.marked = marks.length > 0 && marks.some((mark) => mark.label);
+  ownerState.dragging = dragging;
+  ownerState.focusedThumbIndex = focusedThumbIndex;
+  const classes = useUtilityClasses(ownerState);
+  const RootSlot = (slots == null ? void 0 : slots.root) ?? components.Root ?? SliderRoot;
+  const RailSlot = (slots == null ? void 0 : slots.rail) ?? components.Rail ?? SliderRail;
+  const TrackSlot = (slots == null ? void 0 : slots.track) ?? components.Track ?? SliderTrack;
+  const ThumbSlot = (slots == null ? void 0 : slots.thumb) ?? components.Thumb ?? SliderThumb;
+  const ValueLabelSlot = (slots == null ? void 0 : slots.valueLabel) ?? components.ValueLabel ?? SliderValueLabel;
+  const MarkSlot = (slots == null ? void 0 : slots.mark) ?? components.Mark ?? SliderMark;
+  const MarkLabelSlot = (slots == null ? void 0 : slots.markLabel) ?? components.MarkLabel ?? SliderMarkLabel;
+  const InputSlot = (slots == null ? void 0 : slots.input) ?? components.Input ?? "input";
+  const rootSlotProps = (slotProps == null ? void 0 : slotProps.root) ?? componentsProps.root;
+  const railSlotProps = (slotProps == null ? void 0 : slotProps.rail) ?? componentsProps.rail;
+  const trackSlotProps = (slotProps == null ? void 0 : slotProps.track) ?? componentsProps.track;
+  const thumbSlotProps = (slotProps == null ? void 0 : slotProps.thumb) ?? componentsProps.thumb;
+  const valueLabelSlotProps = (slotProps == null ? void 0 : slotProps.valueLabel) ?? componentsProps.valueLabel;
+  const markSlotProps = (slotProps == null ? void 0 : slotProps.mark) ?? componentsProps.mark;
+  const markLabelSlotProps = (slotProps == null ? void 0 : slotProps.markLabel) ?? componentsProps.markLabel;
+  const inputSlotProps = (slotProps == null ? void 0 : slotProps.input) ?? componentsProps.input;
+  const rootProps = useSlotProps({
+    elementType: RootSlot,
+    getSlotProps: getRootProps,
+    externalSlotProps: rootSlotProps,
+    externalForwardedProps: other,
+    additionalProps: {
+      ...shouldSpreadAdditionalProps(RootSlot) && {
+        as: component
+      }
+    },
+    ownerState: {
+      ...ownerState,
+      ...rootSlotProps == null ? void 0 : rootSlotProps.ownerState
+    },
+    className: [classes.root, className]
+  });
+  const railProps = useSlotProps({
+    elementType: RailSlot,
+    externalSlotProps: railSlotProps,
+    ownerState,
+    className: classes.rail
+  });
+  const trackProps = useSlotProps({
+    elementType: TrackSlot,
+    externalSlotProps: trackSlotProps,
+    additionalProps: {
+      style: {
+        ...axisProps2[axis].offset(trackOffset),
+        ...axisProps2[axis].leap(trackLeap)
+      }
+    },
+    ownerState: {
+      ...ownerState,
+      ...trackSlotProps == null ? void 0 : trackSlotProps.ownerState
+    },
+    className: classes.track
+  });
+  const thumbProps = useSlotProps({
+    elementType: ThumbSlot,
+    getSlotProps: getThumbProps,
+    externalSlotProps: thumbSlotProps,
+    ownerState: {
+      ...ownerState,
+      ...thumbSlotProps == null ? void 0 : thumbSlotProps.ownerState
+    },
+    className: classes.thumb
+  });
+  const valueLabelProps = useSlotProps({
+    elementType: ValueLabelSlot,
+    externalSlotProps: valueLabelSlotProps,
+    ownerState: {
+      ...ownerState,
+      ...valueLabelSlotProps == null ? void 0 : valueLabelSlotProps.ownerState
+    },
+    className: classes.valueLabel
+  });
+  const markProps = useSlotProps({
+    elementType: MarkSlot,
+    externalSlotProps: markSlotProps,
+    ownerState,
+    className: classes.mark
+  });
+  const markLabelProps = useSlotProps({
+    elementType: MarkLabelSlot,
+    externalSlotProps: markLabelSlotProps,
+    ownerState,
+    className: classes.markLabel
+  });
+  const inputSliderProps = useSlotProps({
+    elementType: InputSlot,
+    getSlotProps: getHiddenInputProps,
+    externalSlotProps: inputSlotProps,
+    ownerState
+  });
+  return /* @__PURE__ */ jsxs(RootSlot, {
+    ...rootProps,
+    children: [/* @__PURE__ */ jsx$1(RailSlot, {
+      ...railProps
+    }), /* @__PURE__ */ jsx$1(TrackSlot, {
+      ...trackProps
+    }), marks.filter((mark) => mark.value >= min && mark.value <= max).map((mark, index) => {
+      const percent = valueToPercent(mark.value, min, max);
+      const style2 = axisProps2[axis].offset(percent);
+      let markActive;
+      if (track === false) {
+        markActive = values2.includes(mark.value);
+      } else {
+        markActive = track === "normal" && (range ? mark.value >= values2[0] && mark.value <= values2[values2.length - 1] : mark.value <= values2[0]) || track === "inverted" && (range ? mark.value <= values2[0] || mark.value >= values2[values2.length - 1] : mark.value >= values2[0]);
+      }
+      return /* @__PURE__ */ jsxs(React.Fragment, {
+        children: [/* @__PURE__ */ jsx$1(MarkSlot, {
+          "data-index": index,
+          ...markProps,
+          ...!isHostComponent(MarkSlot) && {
+            markActive
+          },
+          style: {
+            ...style2,
+            ...markProps.style
+          },
+          className: clsx(markProps.className, markActive && classes.markActive)
+        }), mark.label != null ? /* @__PURE__ */ jsx$1(MarkLabelSlot, {
+          "aria-hidden": true,
+          "data-index": index,
+          ...markLabelProps,
+          ...!isHostComponent(MarkLabelSlot) && {
+            markLabelActive: markActive
+          },
+          style: {
+            ...style2,
+            ...markLabelProps.style
+          },
+          className: clsx(classes.markLabel, markLabelProps.className, markActive && classes.markLabelActive),
+          children: mark.label
+        }) : null]
+      }, index);
+    }), values2.map((value, index) => {
+      const percent = valueToPercent(value, min, max);
+      const style2 = axisProps2[axis].offset(percent);
+      const ValueLabelComponent = valueLabelDisplay === "off" ? Forward : ValueLabelSlot;
+      return (
+        /* TODO v6: Change component structure. It will help in avoiding the complicated React.cloneElement API added in SliderValueLabel component. Should be: Thumb -> Input, ValueLabel. Follow Joy UI's Slider structure. */
+        /* @__PURE__ */ jsx$1(ValueLabelComponent, {
+          ...!isHostComponent(ValueLabelComponent) && {
+            valueLabelFormat,
+            valueLabelDisplay,
+            value: typeof valueLabelFormat === "function" ? valueLabelFormat(scale(value), index) : valueLabelFormat,
+            index,
+            open: open === index || active === index || valueLabelDisplay === "on",
+            disabled
+          },
+          ...valueLabelProps,
+          children: /* @__PURE__ */ jsx$1(ThumbSlot, {
+            "data-index": index,
+            ...thumbProps,
+            className: clsx(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
+            style: {
+              ...style2,
+              ...getThumbStyle(index),
+              ...thumbProps.style
+            },
+            children: /* @__PURE__ */ jsx$1(InputSlot, {
+              "data-index": index,
+              "aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel,
+              "aria-valuenow": scale(value),
+              "aria-labelledby": ariaLabelledby,
+              "aria-valuetext": getAriaValueText ? getAriaValueText(scale(value), index) : ariaValuetext,
+              value: values2[index],
+              ...inputSliderProps
+            })
+          })
+        }, index)
+      );
+    })]
+  });
+});
+process.env.NODE_ENV !== "production" ? Slider.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The label of the slider.
+   */
+  "aria-label": chainPropTypes(PropTypes.string, (props) => {
+    const range = Array.isArray(props.value || props.defaultValue);
+    if (range && props["aria-label"] != null) {
+      return new Error("MUI: You need to use the `getAriaLabel` prop instead of `aria-label` when using a range slider.");
+    }
+    return null;
+  }),
+  /**
+   * The id of the element containing a label for the slider.
+   */
+  "aria-labelledby": PropTypes.string,
+  /**
+   * A string value that provides a user-friendly name for the current value of the slider.
+   */
+  "aria-valuetext": chainPropTypes(PropTypes.string, (props) => {
+    const range = Array.isArray(props.value || props.defaultValue);
+    if (range && props["aria-valuetext"] != null) {
+      return new Error("MUI: You need to use the `getAriaValueText` prop instead of `aria-valuetext` when using a range slider.");
+    }
+    return null;
+  }),
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'primary'
+   */
+  color: PropTypes.oneOfType([PropTypes.oneOf(["primary", "secondary", "error", "info", "success", "warning"]), PropTypes.string]),
+  /**
+   * The components used for each slot inside.
+   *
+   * @deprecated use the `slots` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   *
+   * @default {}
+   */
+  components: PropTypes.shape({
+    Input: PropTypes.elementType,
+    Mark: PropTypes.elementType,
+    MarkLabel: PropTypes.elementType,
+    Rail: PropTypes.elementType,
+    Root: PropTypes.elementType,
+    Thumb: PropTypes.elementType,
+    Track: PropTypes.elementType,
+    ValueLabel: PropTypes.elementType
+  }),
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   *
+   * @default {}
+   */
+  componentsProps: PropTypes.shape({
+    input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    mark: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    markLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    rail: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    thumb: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    track: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    valueLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+      children: PropTypes.element,
+      className: PropTypes.string,
+      open: PropTypes.bool,
+      style: PropTypes.object,
+      value: PropTypes.node,
+      valueLabelDisplay: PropTypes.oneOf(["auto", "off", "on"])
+    })])
+  }),
+  /**
+   * The default value. Use when the component is not controlled.
+   */
+  defaultValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, the active thumb doesn't swap when moving pointer over a thumb while dragging another thumb.
+   * @default false
+   */
+  disableSwap: PropTypes.bool,
+  /**
+   * Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider.
+   * This is important for screen reader users.
+   * @param {number} index The thumb label's index to format.
+   * @returns {string}
+   */
+  getAriaLabel: PropTypes.func,
+  /**
+   * Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider.
+   * This is important for screen reader users.
+   * @param {number} value The thumb label's value to format.
+   * @param {number} index The thumb label's index to format.
+   * @returns {string}
+   */
+  getAriaValueText: PropTypes.func,
+  /**
+   * Marks indicate predetermined values to which the user can move the slider.
+   * If `true` the marks are spaced according the value of the `step` prop.
+   * If an array, it should contain objects with `value` and an optional `label` keys.
+   * @default false
+   */
+  marks: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.node,
+    value: PropTypes.number.isRequired
+  })), PropTypes.bool]),
+  /**
+   * The maximum allowed value of the slider.
+   * Should not be equal to min.
+   * @default 100
+   */
+  max: PropTypes.number,
+  /**
+   * The minimum allowed value of the slider.
+   * Should not be equal to max.
+   * @default 0
+   */
+  min: PropTypes.number,
+  /**
+   * Name attribute of the hidden `input` element.
+   */
+  name: PropTypes.string,
+  /**
+   * Callback function that is fired when the slider's value changed.
+   *
+   * @param {Event} event The event source of the callback.
+   * You can pull out the new value by accessing `event.target.value` (any).
+   * **Warning**: This is a generic event not a change event.
+   * @param {Value} value The new value.
+   * @param {number} activeThumb Index of the currently moved thumb.
+   */
+  onChange: PropTypes.func,
+  /**
+   * Callback function that is fired when the `mouseup` is triggered.
+   *
+   * @param {React.SyntheticEvent | Event} event The event source of the callback. **Warning**: This is a generic event not a change event.
+   * @param {Value} value The new value.
+   */
+  onChangeCommitted: PropTypes.func,
+  /**
+   * The component orientation.
+   * @default 'horizontal'
+   */
+  orientation: PropTypes.oneOf(["horizontal", "vertical"]),
+  /**
+   * A transformation function, to change the scale of the slider.
+   * @param {any} x
+   * @returns {any}
+   * @default function Identity(x) {
+   *   return x;
+   * }
+   */
+  scale: PropTypes.func,
+  /**
+   * The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down.
+   * @default 10
+   */
+  shiftStep: PropTypes.number,
+  /**
+   * The size of the slider.
+   * @default 'medium'
+   */
+  size: PropTypes.oneOfType([PropTypes.oneOf(["small", "medium"]), PropTypes.string]),
+  /**
+   * The props used for each slot inside the Slider.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    mark: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    markLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    rail: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    thumb: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    track: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    valueLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+      children: PropTypes.element,
+      className: PropTypes.string,
+      open: PropTypes.bool,
+      style: PropTypes.object,
+      value: PropTypes.node,
+      valueLabelDisplay: PropTypes.oneOf(["auto", "off", "on"])
+    })])
+  }),
+  /**
+   * The components used for each slot inside the Slider.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    input: PropTypes.elementType,
+    mark: PropTypes.elementType,
+    markLabel: PropTypes.elementType,
+    rail: PropTypes.elementType,
+    root: PropTypes.elementType,
+    thumb: PropTypes.elementType,
+    track: PropTypes.elementType,
+    valueLabel: PropTypes.elementType
+  }),
+  /**
+   * The granularity with which the slider can step through values. (A "discrete" slider.)
+   * The `min` prop serves as the origin for the valid values.
+   * We recommend (max - min) to be evenly divisible by the step.
+   *
+   * When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop.
+   * @default 1
+   */
+  step: PropTypes.number,
+  /**
+   * 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]),
+  /**
+   * Tab index attribute of the hidden `input` element.
+   */
+  tabIndex: PropTypes.number,
+  /**
+   * The track presentation:
+   *
+   * - `normal` the track will render a bar representing the slider value.
+   * - `inverted` the track will render a bar representing the remaining slider value.
+   * - `false` the track will render without a bar.
+   * @default 'normal'
+   */
+  track: PropTypes.oneOf(["inverted", "normal", false]),
+  /**
+   * The value of the slider.
+   * For ranged sliders, provide an array with two values.
+   */
+  value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
+  /**
+   * Controls when the value label is displayed:
+   *
+   * - `auto` the value label will display when the thumb is hovered or focused.
+   * - `on` will display persistently.
+   * - `off` will never display.
+   * @default 'off'
+   */
+  valueLabelDisplay: PropTypes.oneOf(["auto", "off", "on"]),
+  /**
+   * The format function the value label's value.
+   *
+   * When a function is provided, it should have the following signature:
+   *
+   * - {number} value The value label's value to format
+   * - {number} index The value label's index to format
+   * @param {any} x
+   * @returns {any}
+   * @default function Identity(x) {
+   *   return x;
+   * }
+   */
+  valueLabelFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
+} : void 0;
+const boxClasses = generateUtilityClasses("MuiBox", ["root"]);
+const defaultTheme = createTheme();
+const Box = createBox({
+  themeId: THEME_ID,
+  defaultTheme,
+  defaultClassName: boxClasses.root,
+  generateClassName: ClassNameGenerator.generate
+});
+process.env.NODE_ENV !== "production" ? Box.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * 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 NewSlider({ defaultValue, onChange }) {
+  return /* @__PURE__ */ jsx$1(Card, { noPadding: true, appearance: "ghost", children: /* @__PURE__ */ jsx$1(Box, { sx: { width: 150 }, children: /* @__PURE__ */ jsx$1(Slider, { defaultValue, "aria-label": "Default", valueLabelDisplay: "auto", onChange }) }) });
+}
+function Tab({ items, onTabSelected, defaultValue, ...cardProps }) {
+  const [tabSelected, setTabSelected] = useState(defaultValue);
+  const selectTab = (item) => {
+    setTabSelected(item);
+    onTabSelected == null ? void 0 : onTabSelected(item);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx$1(SectionName, { section: "Filter by" }),
+    /* @__PURE__ */ jsx$1(Card, { className: "rounded-md w-fit", noBlur: true, noPadding: true, ...cardProps, color: "blue", children: /* @__PURE__ */ jsx$1("div", { className: "flex p-[0.4rem] gap-x-[0.5rem]", children: items && items.map((item) => /* @__PURE__ */ jsx$1(
+      Button,
+      {
+        onClick: () => selectTab(item),
+        color: "blue",
+        appearance: item === tabSelected ? "mate" : "ghost",
+        dark: item === tabSelected ? false : true,
+        label: item
+      },
+      item
+    )) }) })
+  ] });
+}
+function Timeline({ children, faded, ...cardProps }) {
+  const timelineStyle = {
+    overflowY: "visible",
+    WebkitMaskImage: "linear-gradient(to bottom, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 100%)",
+    maskImage: "linear-gradient(to bottom, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%)"
+  };
+  return /* @__PURE__ */ jsx$1(Card, { className: "rounded-sm", noPadding: true, appearance: "ghost", ...cardProps, style: { ...cardProps.style, ...timelineStyle }, children: /* @__PURE__ */ jsx$1("ul", { className: "vertical-line list-disc font-bold text-start relative", style: { paddingInlineStart: 20 }, children }) });
+}
+function TlListItem({ label, badge, ...cardProps }) {
+  return /* @__PURE__ */ jsx$1("li", { children: /* @__PURE__ */ jsx$1(Card, { noBlur: true, appearance: "ghost", noPadding: true, ...cardProps, children: /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center gap-x-[1rem] text-[1rem]", children: [
+    label,
+    badge
+  ] }) }) });
+}
 export {
   Avatar,
+  Badge,
   Button,
   Calendar,
-  Card
+  Card,
+  Checkbox,
+  Dropdown,
+  DropdownButton,
+  Input,
+  NewSlider,
+  SectionName,
+  Tab,
+  ThemeContext,
+  ThemeContextComponent,
+  Timeline,
+  TlListItem
 };
 //# sourceMappingURL=index.esm.js.map