mytek-components 1.0.9 → 2.0.2

package/dist/main.es.js

@@ -5725,7 +5725,7 @@ function getSvgIconUtilityClass(slot) {
   return generateUtilityClass("MuiSvgIcon", slot);
 }
 generateUtilityClasses("MuiSvgIcon", ["root", "colorPrimary", "colorSecondary", "colorAction", "colorError", "colorDisabled", "fontSizeInherit", "fontSizeSmall", "fontSizeMedium", "fontSizeLarge"]);
-const useUtilityClasses$w = (ownerState) => {
+const useUtilityClasses$C = (ownerState) => {
   const {
     color: color2,
     fontSize,
@@ -5870,7 +5870,7 @@ const SvgIcon = /* @__PURE__ */ React.forwardRef(function SvgIcon2(inProps, ref)
   if (!inheritViewBox) {
     more.viewBox = viewBox;
   }
-  const classes = useUtilityClasses$w(ownerState);
+  const classes = useUtilityClasses$C(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(SvgIconRoot, {
     as: component,
     className: clsx(classes.root, className),
@@ -7298,7 +7298,7 @@ function getPaperUtilityClass(slot) {
   return generateUtilityClass("MuiPaper", slot);
 }
 generateUtilityClasses("MuiPaper", ["root", "rounded", "outlined", "elevation", "elevation0", "elevation1", "elevation2", "elevation3", "elevation4", "elevation5", "elevation6", "elevation7", "elevation8", "elevation9", "elevation10", "elevation11", "elevation12", "elevation13", "elevation14", "elevation15", "elevation16", "elevation17", "elevation18", "elevation19", "elevation20", "elevation21", "elevation22", "elevation23", "elevation24"]);
-const useUtilityClasses$v = (ownerState) => {
+const useUtilityClasses$B = (ownerState) => {
   const {
     square,
     elevation,
@@ -7371,7 +7371,7 @@ const Paper = /* @__PURE__ */ React.forwardRef(function Paper2(inProps, ref) {
     square,
     variant
   };
-  const classes = useUtilityClasses$v(ownerState);
+  const classes = useUtilityClasses$B(ownerState);
   if (process.env.NODE_ENV !== "production") {
     if (theme.shadows[elevation] === void 0) {
       console.error([`MUI: The elevation provided <Paper elevation={${elevation}}> is not available in the theme.`, `Please make sure that \`theme.shadows[${elevation}]\` is defined.`].join("\n"));
@@ -8057,7 +8057,7 @@ function getButtonBaseUtilityClass(slot) {
   return generateUtilityClass("MuiButtonBase", slot);
 }
 const buttonBaseClasses = generateUtilityClasses("MuiButtonBase", ["root", "disabled", "focusVisible"]);
-const useUtilityClasses$u = (ownerState) => {
+const useUtilityClasses$A = (ownerState) => {
   const {
     disabled,
     focusVisible,
@@ -8273,7 +8273,7 @@ const ButtonBase = /* @__PURE__ */ React.forwardRef(function ButtonBase2(inProps
     tabIndex,
     focusVisible
   };
-  const classes = useUtilityClasses$u(ownerState);
+  const classes = useUtilityClasses$A(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(ButtonBaseRoot, {
     as: ComponentProp,
     className: clsx(classes.root, className),
@@ -8525,7 +8525,7 @@ const rotateAnimation = typeof circularRotateKeyframe !== "string" ? css`
 const dashAnimation = typeof circularDashKeyframe !== "string" ? css`
         animation: ${circularDashKeyframe} 1.4s ease-in-out infinite;
       ` : null;
-const useUtilityClasses$t = (ownerState) => {
+const useUtilityClasses$z = (ownerState) => {
   const {
     classes,
     variant,
@@ -8647,7 +8647,7 @@ const CircularProgress = /* @__PURE__ */ React.forwardRef(function CircularProgr
     value,
     variant
   };
-  const classes = useUtilityClasses$t(ownerState);
+  const classes = useUtilityClasses$z(ownerState);
   const circleStyle = {};
   const rootStyle = {};
   const rootProps = {};
@@ -8756,7 +8756,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$s = (ownerState) => {
+const useUtilityClasses$y = (ownerState) => {
   const {
     classes,
     disabled,
@@ -8941,7 +8941,7 @@ const IconButton = /* @__PURE__ */ React.forwardRef(function IconButton2(inProps
     loadingIndicator,
     size
   };
-  const classes = useUtilityClasses$s(ownerState);
+  const classes = useUtilityClasses$y(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(IconButtonRoot, {
     id: loading ? loadingId : idProp,
     className: clsx(classes.root, className),
@@ -9065,7 +9065,7 @@ const v6Colors = {
   textDisabled: true
 };
 const extendSxProp = internal_createExtendSxProp();
-const useUtilityClasses$r = (ownerState) => {
+const useUtilityClasses$x = (ownerState) => {
   const {
     align,
     gutterBottom,
@@ -9208,7 +9208,7 @@ const Typography = /* @__PURE__ */ React.forwardRef(function Typography2(inProps
     variantMapping
   };
   const Component = component || (paragraph ? "p" : variantMapping[variant] || defaultVariantMapping[variant]) || "span";
-  const classes = useUtilityClasses$r(ownerState);
+  const classes = useUtilityClasses$x(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(TypographyRoot, {
     as: Component,
     ref,
@@ -10959,7 +10959,7 @@ const inputOverridesResolver = (props, styles2) => {
   } = props;
   return [styles2.input, ownerState.size === "small" && styles2.inputSizeSmall, ownerState.multiline && styles2.inputMultiline, ownerState.type === "search" && styles2.inputTypeSearch, ownerState.startAdornment && styles2.inputAdornedStart, ownerState.endAdornment && styles2.inputAdornedEnd, ownerState.hiddenLabel && styles2.inputHiddenLabel];
 };
-const useUtilityClasses$q = (ownerState) => {
+const useUtilityClasses$w = (ownerState) => {
   const {
     classes,
     color: color2,
@@ -11363,7 +11363,7 @@ const InputBase = /* @__PURE__ */ React.forwardRef(function InputBase2(inProps,
     startAdornment,
     type
   };
-  const classes = useUtilityClasses$q(ownerState);
+  const classes = useUtilityClasses$w(ownerState);
   const Root = slots.root || components.Root || InputBaseRoot;
   const rootProps = slotProps.root || componentsProps.root || {};
   const Input3 = slots.input || components.Input || InputBaseInput;
@@ -11676,7 +11676,7 @@ const filledInputClasses = {
   ...inputBaseClasses,
   ...generateUtilityClasses("MuiFilledInput", ["root", "underline", "input", "adornedStart", "adornedEnd", "sizeSmall", "multiline", "hiddenLabel"])
 };
-const ArrowDropDownIcon = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("path", {
+const ArrowDropDownIcon$1 = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("path", {
   d: "M7 10l5 5 5-5z"
 }), "ArrowDropDown");
 function isClassComponent(elementType) {
@@ -11899,7 +11899,7 @@ function getBackdropUtilityClass(slot) {
   return generateUtilityClass("MuiBackdrop", slot);
 }
 generateUtilityClasses("MuiBackdrop", ["root", "invisible"]);
-const useUtilityClasses$p = (ownerState) => {
+const useUtilityClasses$v = (ownerState) => {
   const {
     classes,
     invisible
@@ -11962,7 +11962,7 @@ const Backdrop = /* @__PURE__ */ React.forwardRef(function Backdrop2(inProps, re
     component,
     invisible
   };
-  const classes = useUtilityClasses$p(ownerState);
+  const classes = useUtilityClasses$v(ownerState);
   const backwardCompatibleSlots = {
     transition: TransitionComponentProp,
     root: components.Root,
@@ -12130,7 +12130,7 @@ const ButtonGroupButtonContext = /* @__PURE__ */ React.createContext(void 0);
 if (process.env.NODE_ENV !== "production") {
   ButtonGroupButtonContext.displayName = "ButtonGroupButtonContext";
 }
-const useUtilityClasses$o = (ownerState) => {
+const useUtilityClasses$u = (ownerState) => {
   const {
     color: color2,
     disableElevation,
@@ -12630,7 +12630,7 @@ const Button = /* @__PURE__ */ React.forwardRef(function Button2(inProps, ref) {
     type,
     variant
   };
-  const classes = useUtilityClasses$o(ownerState);
+  const classes = useUtilityClasses$u(ownerState);
   const startIcon = (startIconProp || loading && loadingPosition === "start") && /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonStartIcon, {
     className: classes.startIcon,
     ownerState,
@@ -12797,7 +12797,7 @@ function getSwitchBaseUtilityClass(slot) {
   return generateUtilityClass("PrivateSwitchBase", slot);
 }
 generateUtilityClasses("PrivateSwitchBase", ["root", "checked", "disabled", "input", "edgeStart", "edgeEnd"]);
-const useUtilityClasses$n = (ownerState) => {
+const useUtilityClasses$t = (ownerState) => {
   const {
     classes,
     checked,
@@ -12934,7 +12934,7 @@ const SwitchBase = /* @__PURE__ */ React.forwardRef(function SwitchBase2(props,
     disableFocusRipple,
     edge
   };
-  const classes = useUtilityClasses$n(ownerState);
+  const classes = useUtilityClasses$t(ownerState);
   const externalForwardedProps = {
     slots,
     slotProps: {
@@ -13143,7 +13143,7 @@ function getCheckboxUtilityClass(slot) {
   return generateUtilityClass("MuiCheckbox", slot);
 }
 const checkboxClasses = generateUtilityClasses("MuiCheckbox", ["root", "checked", "disabled", "indeterminate", "colorPrimary", "colorSecondary", "sizeSmall", "sizeMedium"]);
-const useUtilityClasses$m = (ownerState) => {
+const useUtilityClasses$s = (ownerState) => {
   const {
     classes,
     indeterminate,
@@ -13252,7 +13252,7 @@ const Checkbox = /* @__PURE__ */ React.forwardRef(function Checkbox2(inProps, re
     indeterminate,
     size
   };
-  const classes = useUtilityClasses$m(ownerState);
+  const classes = useUtilityClasses$s(ownerState);
   const externalInputProps = slotProps.input ?? inputProps;
   const [RootSlot, rootSlotProps] = useSlot("root", {
     ref,
@@ -14024,7 +14024,7 @@ function getModalUtilityClass(slot) {
   return generateUtilityClass("MuiModal", slot);
 }
 generateUtilityClasses("MuiModal", ["root", "hidden", "backdrop"]);
-const useUtilityClasses$l = (ownerState) => {
+const useUtilityClasses$r = (ownerState) => {
   const {
     open,
     exited,
@@ -14131,7 +14131,7 @@ const Modal = /* @__PURE__ */ React.forwardRef(function Modal2(inProps, ref) {
     ...propsWithDefaults,
     exited
   };
-  const classes = useUtilityClasses$l(ownerState);
+  const classes = useUtilityClasses$r(ownerState);
   const childProps = {};
   if (children.props.tabIndex === void 0) {
     childProps.tabIndex = "-1";
@@ -14383,7 +14383,7 @@ function getDividerUtilityClass(slot) {
   return generateUtilityClass("MuiDivider", slot);
 }
 const dividerClasses = generateUtilityClasses("MuiDivider", ["root", "absolute", "fullWidth", "inset", "middle", "flexItem", "light", "vertical", "withChildren", "withChildrenVertical", "textAlignRight", "textAlignLeft", "wrapper", "wrapperVertical"]);
-const useUtilityClasses$k = (ownerState) => {
+const useUtilityClasses$q = (ownerState) => {
   const {
     absolute,
     children,
@@ -14597,7 +14597,7 @@ const Divider = /* @__PURE__ */ React.forwardRef(function Divider2(inProps, ref)
     textAlign,
     variant
   };
-  const classes = useUtilityClasses$k(ownerState);
+  const classes = useUtilityClasses$q(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(DividerRoot, {
     as: component,
     className: clsx(classes.root, className),
@@ -14679,7 +14679,7 @@ process.env.NODE_ENV !== "production" ? Divider.propTypes = {
    */
   variant: PropTypes.oneOfType([PropTypes.oneOf(["fullWidth", "inset", "middle"]), PropTypes.string])
 } : void 0;
-const useUtilityClasses$j = (ownerState) => {
+const useUtilityClasses$p = (ownerState) => {
   const {
     classes,
     disableUnderline,
@@ -14961,7 +14961,7 @@ const FilledInput = /* @__PURE__ */ React.forwardRef(function FilledInput2(inPro
     multiline,
     type
   };
-  const classes = useUtilityClasses$j(props);
+  const classes = useUtilityClasses$p(props);
   const filledInputComponentsProps = {
     root: {
       ownerState
@@ -15185,7 +15185,7 @@ function getFormControlUtilityClasses(slot) {
   return generateUtilityClass("MuiFormControl", slot);
 }
 generateUtilityClasses("MuiFormControl", ["root", "marginNone", "marginNormal", "marginDense", "fullWidth", "disabled"]);
-const useUtilityClasses$i = (ownerState) => {
+const useUtilityClasses$o = (ownerState) => {
   const {
     classes,
     margin: margin2,
@@ -15275,7 +15275,7 @@ const FormControl$2 = /* @__PURE__ */ React.forwardRef(function FormControl(inPr
     size,
     variant
   };
-  const classes = useUtilityClasses$i(ownerState);
+  const classes = useUtilityClasses$o(ownerState);
   const [adornedStart, setAdornedStart] = React.useState(() => {
     let initialAdornedStart = false;
     if (children) {
@@ -15450,7 +15450,7 @@ function getFormControlLabelUtilityClasses(slot) {
   return generateUtilityClass("MuiFormControlLabel", slot);
 }
 const formControlLabelClasses = generateUtilityClasses("MuiFormControlLabel", ["root", "labelPlacementStart", "labelPlacementTop", "labelPlacementBottom", "disabled", "label", "error", "required", "asterisk"]);
-const useUtilityClasses$h = (ownerState) => {
+const useUtilityClasses$n = (ownerState) => {
   const {
     classes,
     disabled,
@@ -15585,7 +15585,7 @@ const FormControlLabel = /* @__PURE__ */ React.forwardRef(function FormControlLa
     required,
     error: fcs.error
   };
-  const classes = useUtilityClasses$h(ownerState);
+  const classes = useUtilityClasses$n(ownerState);
   const externalForwardedProps = {
     slots,
     slotProps: {
@@ -15715,7 +15715,7 @@ function getFormHelperTextUtilityClasses(slot) {
 }
 const formHelperTextClasses = generateUtilityClasses("MuiFormHelperText", ["root", "error", "disabled", "sizeSmall", "sizeMedium", "contained", "focused", "filled", "required"]);
 var _span$2;
-const useUtilityClasses$g = (ownerState) => {
+const useUtilityClasses$m = (ownerState) => {
   const {
     classes,
     contained,
@@ -15810,7 +15810,7 @@ const FormHelperText = /* @__PURE__ */ React.forwardRef(function FormHelperText2
     required: fcs.required
   };
   delete ownerState.ownerState;
-  const classes = useUtilityClasses$g(ownerState);
+  const classes = useUtilityClasses$m(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(FormHelperTextRoot, {
     as: component,
     className: clsx(classes.root, className),
@@ -15889,7 +15889,7 @@ function getFormLabelUtilityClasses(slot) {
   return generateUtilityClass("MuiFormLabel", slot);
 }
 const formLabelClasses = generateUtilityClasses("MuiFormLabel", ["root", "colorSecondary", "focused", "disabled", "error", "filled", "required", "asterisk"]);
-const useUtilityClasses$f = (ownerState) => {
+const useUtilityClasses$l = (ownerState) => {
   const {
     classes,
     color: color2,
@@ -15986,7 +15986,7 @@ const FormLabel$1 = /* @__PURE__ */ React.forwardRef(function FormLabel(inProps,
     focused: fcs.focused,
     required: fcs.required
   };
-  const classes = useUtilityClasses$f(ownerState);
+  const classes = useUtilityClasses$l(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(FormLabelRoot, {
     as: component,
     ownerState,
@@ -16288,7 +16288,7 @@ process.env.NODE_ENV !== "production" ? Grow.propTypes = {
 if (Grow) {
   Grow.muiSupportAuto = true;
 }
-const useUtilityClasses$e = (ownerState) => {
+const useUtilityClasses$k = (ownerState) => {
   const {
     classes,
     disableUnderline
@@ -16421,7 +16421,7 @@ const Input = /* @__PURE__ */ React.forwardRef(function Input2(inProps, ref) {
     type = "text",
     ...other
   } = props;
-  const classes = useUtilityClasses$e(props);
+  const classes = useUtilityClasses$k(props);
   const ownerState = {
     disableUnderline
   };
@@ -16638,7 +16638,7 @@ function getInputLabelUtilityClasses(slot) {
   return generateUtilityClass("MuiInputLabel", slot);
 }
 generateUtilityClasses("MuiInputLabel", ["root", "focused", "disabled", "error", "required", "asterisk", "formControl", "sizeSmall", "shrink", "animated", "standard", "filled", "outlined"]);
-const useUtilityClasses$d = (ownerState) => {
+const useUtilityClasses$j = (ownerState) => {
   const {
     classes,
     formControl,
@@ -16827,7 +16827,7 @@ const InputLabel = /* @__PURE__ */ React.forwardRef(function InputLabel2(inProps
     required: fcs.required,
     focused: fcs.focused
   };
-  const classes = useUtilityClasses$d(ownerState);
+  const classes = useUtilityClasses$j(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(InputLabelRoot, {
     "data-shrink": shrink,
     ref,
@@ -16912,7 +16912,7 @@ function getListUtilityClass(slot) {
   return generateUtilityClass("MuiList", slot);
 }
 generateUtilityClasses("MuiList", ["root", "padding", "dense", "subheader"]);
-const useUtilityClasses$c = (ownerState) => {
+const useUtilityClasses$i = (ownerState) => {
   const {
     classes,
     disablePadding,
@@ -16978,7 +16978,7 @@ const List$1 = /* @__PURE__ */ React.forwardRef(function List(inProps, ref) {
     dense,
     disablePadding
   };
-  const classes = useUtilityClasses$c(ownerState);
+  const classes = useUtilityClasses$i(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ListContext.Provider, {
     value: context2,
     children: /* @__PURE__ */ jsxRuntimeExports.jsxs(ListRoot, {
@@ -17311,7 +17311,7 @@ function getTransformOriginValue(transformOrigin) {
 function resolveAnchorEl(anchorEl) {
   return typeof anchorEl === "function" ? anchorEl() : anchorEl;
 }
-const useUtilityClasses$b = (ownerState) => {
+const useUtilityClasses$h = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -17389,7 +17389,7 @@ const Popover$2 = /* @__PURE__ */ React.forwardRef(function Popover(inProps, ref
     transitionDuration: transitionDurationProp,
     TransitionProps
   };
-  const classes = useUtilityClasses$b(ownerState);
+  const classes = useUtilityClasses$h(ownerState);
   const getAnchorOffset = React.useCallback(() => {
     if (anchorReference === "anchorPosition") {
       if (process.env.NODE_ENV !== "production") {
@@ -17828,7 +17828,7 @@ const LTR_ORIGIN = {
   vertical: "top",
   horizontal: "left"
 };
-const useUtilityClasses$a = (ownerState) => {
+const useUtilityClasses$g = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -17899,7 +17899,7 @@ const Menu = /* @__PURE__ */ React.forwardRef(function Menu2(inProps, ref) {
     TransitionProps,
     variant
   };
-  const classes = useUtilityClasses$a(ownerState);
+  const classes = useUtilityClasses$g(ownerState);
   const autoFocusItem = autoFocus && !disableAutoFocusItem && open;
   const menuListActionsRef = React.useRef(null);
   const handleEntering = (element, isAppearing) => {
@@ -18142,7 +18142,7 @@ const overridesResolver = (props, styles2) => {
   } = props;
   return [styles2.root, ownerState.dense && styles2.dense, ownerState.divider && styles2.divider, !ownerState.disableGutters && styles2.gutters];
 };
-const useUtilityClasses$9 = (ownerState) => {
+const useUtilityClasses$f = (ownerState) => {
   const {
     disabled,
     dense,
@@ -18302,7 +18302,7 @@ const MenuItem = /* @__PURE__ */ React.forwardRef(function MenuItem2(inProps, re
     divider,
     disableGutters
   };
-  const classes = useUtilityClasses$9(props);
+  const classes = useUtilityClasses$f(props);
   const handleRef = useForkRef(menuItemRef, ref);
   let tabIndex;
   if (!props.disabled) {
@@ -18402,7 +18402,7 @@ function getNativeSelectUtilityClasses(slot) {
   return generateUtilityClass("MuiNativeSelect", slot);
 }
 const nativeSelectClasses = generateUtilityClasses("MuiNativeSelect", ["root", "select", "multiple", "filled", "outlined", "standard", "disabled", "icon", "iconOpen", "iconFilled", "iconOutlined", "iconStandard", "nativeInput", "error"]);
-const useUtilityClasses$8 = (ownerState) => {
+const useUtilityClasses$e = (ownerState) => {
   const {
     classes,
     variant,
@@ -18557,7 +18557,7 @@ const NativeSelectInput = /* @__PURE__ */ React.forwardRef(function NativeSelect
     variant,
     error
   };
-  const classes = useUtilityClasses$8(ownerState);
+  const classes = useUtilityClasses$e(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(React.Fragment, {
     children: [/* @__PURE__ */ jsxRuntimeExports.jsx(NativeSelectSelect, {
       ownerState,
@@ -18771,7 +18771,7 @@ process.env.NODE_ENV !== "production" ? NotchedOutline.propTypes = {
    */
   style: PropTypes.object
 } : void 0;
-const useUtilityClasses$7 = (ownerState) => {
+const useUtilityClasses$d = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -18949,7 +18949,7 @@ const OutlinedInput = /* @__PURE__ */ React.forwardRef(function OutlinedInput2(i
     type = "text",
     ...other
   } = props;
-  const classes = useUtilityClasses$7(props);
+  const classes = useUtilityClasses$d(props);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
@@ -19270,7 +19270,7 @@ function getRadioUtilityClass(slot) {
   return generateUtilityClass("MuiRadio", slot);
 }
 const radioClasses = generateUtilityClasses("MuiRadio", ["root", "checked", "disabled", "colorPrimary", "colorSecondary", "sizeSmall"]);
-const useUtilityClasses$6 = (ownerState) => {
+const useUtilityClasses$c = (ownerState) => {
   const {
     classes,
     color: color2,
@@ -19394,7 +19394,7 @@ const Radio = /* @__PURE__ */ React.forwardRef(function Radio2(inProps, ref) {
     color: color2,
     size
   };
-  const classes = useUtilityClasses$6(ownerState);
+  const classes = useUtilityClasses$c(ownerState);
   const radioGroup = useRadioGroup();
   let checked = checkedProp;
   const onChange = createChainedFunction(onChangeProp, radioGroup && radioGroup.onChange);
@@ -19627,7 +19627,7 @@ function areEqualValues(a, b) {
 function isEmpty(display) {
   return display == null || typeof display === "string" && !display.trim();
 }
-const useUtilityClasses$5 = (ownerState) => {
+const useUtilityClasses$b = (ownerState) => {
   const {
     classes,
     variant,
@@ -19947,7 +19947,7 @@ const SelectInput = /* @__PURE__ */ React.forwardRef(function SelectInput2(props
     open,
     error
   };
-  const classes = useUtilityClasses$5(ownerState);
+  const classes = useUtilityClasses$b(ownerState);
   const paperProps = {
     ...MenuProps.PaperProps,
     ...(_a = MenuProps.slotProps) == null ? void 0 : _a.paper
@@ -20186,7 +20186,7 @@ process.env.NODE_ENV !== "production" ? SelectInput.propTypes = {
    */
   variant: PropTypes.oneOf(["standard", "outlined", "filled"])
 } : void 0;
-const useUtilityClasses$4 = (ownerState) => {
+const useUtilityClasses$a = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -20219,7 +20219,7 @@ const Select = /* @__PURE__ */ React.forwardRef(function Select2(inProps, ref) {
     className,
     defaultOpen = false,
     displayEmpty = false,
-    IconComponent = ArrowDropDownIcon,
+    IconComponent = ArrowDropDownIcon$1,
     id,
     input,
     inputProps,
@@ -20249,7 +20249,7 @@ const Select = /* @__PURE__ */ React.forwardRef(function Select2(inProps, ref) {
     variant,
     classes: classesProp
   };
-  const classes = useUtilityClasses$4(ownerState);
+  const classes = useUtilityClasses$a(ownerState);
   const {
     root,
     ...restOfClasses
@@ -20466,7 +20466,7 @@ function getTabUtilityClass(slot) {
   return generateUtilityClass("MuiTab", slot);
 }
 const tabClasses = generateUtilityClasses("MuiTab", ["root", "labelIcon", "textColorInherit", "textColorPrimary", "textColorSecondary", "selected", "disabled", "fullWidth", "wrapped", "iconWrapper", "icon"]);
-const useUtilityClasses$3 = (ownerState) => {
+const useUtilityClasses$9 = (ownerState) => {
   const {
     classes,
     textColor,
@@ -20674,7 +20674,7 @@ const Tab = /* @__PURE__ */ React.forwardRef(function Tab2(inProps, ref) {
     textColor,
     wrapped
   };
-  const classes = useUtilityClasses$3(ownerState);
+  const classes = useUtilityClasses$9(ownerState);
   const icon = iconProp && label && /* @__PURE__ */ React.isValidElement(iconProp) ? /* @__PURE__ */ React.cloneElement(iconProp, {
     className: clsx(classes.icon, iconProp.props.className)
   }) : iconProp;
@@ -20789,174 +20789,897 @@ process.env.NODE_ENV !== "production" ? Tab.propTypes = {
    */
   wrapped: PropTypes.bool
 } : void 0;
-const KeyboardArrowLeft = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("path", {
-  d: "M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
-}), "KeyboardArrowLeft");
-const KeyboardArrowRight = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("path", {
-  d: "M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
-}), "KeyboardArrowRight");
-function easeInOutSin(time) {
-  return (1 + Math.sin(Math.PI * time - Math.PI / 2)) / 2;
-}
-function animate(property, element, to, options = {}, cb = () => {
-}) {
-  const {
-    ease = easeInOutSin,
-    duration: duration2 = 300
-    // standard
-  } = options;
-  let start2 = null;
-  const from = element[property];
-  let cancelled = false;
-  const cancel = () => {
-    cancelled = true;
-  };
-  const step = (timestamp) => {
-    if (cancelled) {
-      cb(new Error("Animation cancelled"));
-      return;
-    }
-    if (start2 === null) {
-      start2 = timestamp;
-    }
-    const time = Math.min(1, (timestamp - start2) / duration2);
-    element[property] = ease(time) * (to - from) + from;
-    if (time >= 1) {
-      requestAnimationFrame(() => {
-        cb(null);
-      });
-      return;
-    }
-    requestAnimationFrame(step);
-  };
-  if (from === to) {
-    cb(new Error("Element already at target position"));
-    return cancel;
-  }
-  requestAnimationFrame(step);
-  return cancel;
-}
-const styles = {
-  width: 99,
-  height: 99,
-  position: "absolute",
-  top: -9999,
-  overflow: "scroll"
-};
-function ScrollbarSize(props) {
-  const {
-    onChange,
-    ...other
-  } = props;
-  const scrollbarHeight = React.useRef();
-  const nodeRef = React.useRef(null);
-  const setMeasurements = () => {
-    scrollbarHeight.current = nodeRef.current.offsetHeight - nodeRef.current.clientHeight;
-  };
-  useEnhancedEffect(() => {
-    const handleResize = debounce$1(() => {
-      const prevHeight = scrollbarHeight.current;
-      setMeasurements();
-      if (prevHeight !== scrollbarHeight.current) {
-        onChange(scrollbarHeight.current);
-      }
-    });
-    const containerWindow = ownerWindow$1(nodeRef.current);
-    containerWindow.addEventListener("resize", handleResize);
-    return () => {
-      handleResize.clear();
-      containerWindow.removeEventListener("resize", handleResize);
-    };
-  }, [onChange]);
-  React.useEffect(() => {
-    setMeasurements();
-    onChange(scrollbarHeight.current);
-  }, [onChange]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-    style: styles,
-    ...other,
-    ref: nodeRef
-  });
+const TableContext = /* @__PURE__ */ React.createContext();
+if (process.env.NODE_ENV !== "production") {
+  TableContext.displayName = "TableContext";
 }
-process.env.NODE_ENV !== "production" ? ScrollbarSize.propTypes = {
-  onChange: PropTypes.func.isRequired
-} : void 0;
-function getTabScrollButtonUtilityClass(slot) {
-  return generateUtilityClass("MuiTabScrollButton", slot);
+function getTableUtilityClass(slot) {
+  return generateUtilityClass("MuiTable", slot);
 }
-const tabScrollButtonClasses = generateUtilityClasses("MuiTabScrollButton", ["root", "vertical", "horizontal", "disabled"]);
-const useUtilityClasses$2 = (ownerState) => {
+generateUtilityClasses("MuiTable", ["root", "stickyHeader"]);
+const useUtilityClasses$8 = (ownerState) => {
   const {
     classes,
-    orientation,
-    disabled
+    stickyHeader
   } = ownerState;
   const slots = {
-    root: ["root", orientation, disabled && "disabled"]
+    root: ["root", stickyHeader && "stickyHeader"]
   };
-  return composeClasses(slots, getTabScrollButtonUtilityClass, classes);
+  return composeClasses(slots, getTableUtilityClass, classes);
 };
-const TabScrollButtonRoot = styled(ButtonBase, {
-  name: "MuiTabScrollButton",
+const TableRoot = styled("table", {
+  name: "MuiTable",
   slot: "Root",
   overridesResolver: (props, styles2) => {
     const {
       ownerState
     } = props;
-    return [styles2.root, ownerState.orientation && styles2[ownerState.orientation]];
+    return [styles2.root, ownerState.stickyHeader && styles2.stickyHeader];
   }
-})({
-  width: 40,
-  flexShrink: 0,
-  opacity: 0.8,
-  [`&.${tabScrollButtonClasses.disabled}`]: {
-    opacity: 0
+})(memoTheme(({
+  theme
+}) => ({
+  display: "table",
+  width: "100%",
+  borderCollapse: "collapse",
+  borderSpacing: 0,
+  "& caption": {
+    ...theme.typography.body2,
+    padding: theme.spacing(2),
+    color: (theme.vars || theme).palette.text.secondary,
+    textAlign: "left",
+    captionSide: "bottom"
   },
   variants: [{
-    props: {
-      orientation: "vertical"
-    },
+    props: ({
+      ownerState
+    }) => ownerState.stickyHeader,
     style: {
-      width: "100%",
-      height: 40,
-      "& svg": {
-        transform: "var(--TabScrollButton-svgRotate)"
-      }
+      borderCollapse: "separate"
     }
   }]
-});
-const TabScrollButton = /* @__PURE__ */ React.forwardRef(function TabScrollButton2(inProps, ref) {
+})));
+const defaultComponent$3 = "table";
+const Table = /* @__PURE__ */ React.forwardRef(function Table2(inProps, ref) {
   const props = useDefaultProps({
     props: inProps,
-    name: "MuiTabScrollButton"
+    name: "MuiTable"
   });
   const {
     className,
-    slots = {},
-    slotProps = {},
-    direction,
-    orientation,
-    disabled,
+    component = defaultComponent$3,
+    padding: padding2 = "normal",
+    size = "medium",
+    stickyHeader = false,
     ...other
   } = props;
-  const isRtl = useRtl();
   const ownerState = {
-    isRtl,
-    ...props
+    ...props,
+    component,
+    padding: padding2,
+    size,
+    stickyHeader
   };
-  const classes = useUtilityClasses$2(ownerState);
-  const StartButtonIcon = slots.StartScrollButtonIcon ?? KeyboardArrowLeft;
-  const EndButtonIcon = slots.EndScrollButtonIcon ?? KeyboardArrowRight;
-  const startButtonIconProps = useSlotProps({
-    elementType: StartButtonIcon,
-    externalSlotProps: slotProps.startScrollButtonIcon,
-    additionalProps: {
-      fontSize: "small"
-    },
-    ownerState
+  const classes = useUtilityClasses$8(ownerState);
+  const table = React.useMemo(() => ({
+    padding: padding2,
+    size,
+    stickyHeader
+  }), [padding2, size, stickyHeader]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(TableContext.Provider, {
+    value: table,
+    children: /* @__PURE__ */ jsxRuntimeExports.jsx(TableRoot, {
+      as: component,
+      role: component === defaultComponent$3 ? null : "table",
+      ref,
+      className: clsx(classes.root, className),
+      ownerState,
+      ...other
+    })
   });
-  const endButtonIconProps = useSlotProps({
-    elementType: EndButtonIcon,
+});
+process.env.NODE_ENV !== "production" ? Table.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the table, normally `TableHead` and `TableBody`.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * Allows TableCells to inherit padding of the Table.
+   * @default 'normal'
+   */
+  padding: PropTypes.oneOf(["checkbox", "none", "normal"]),
+  /**
+   * Allows TableCells to inherit size of the Table.
+   * @default 'medium'
+   */
+  size: PropTypes.oneOfType([PropTypes.oneOf(["medium", "small"]), PropTypes.string]),
+  /**
+   * Set the header sticky.
+   * @default false
+   */
+  stickyHeader: PropTypes.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+const Tablelvl2Context = /* @__PURE__ */ React.createContext();
+if (process.env.NODE_ENV !== "production") {
+  Tablelvl2Context.displayName = "Tablelvl2Context";
+}
+function getTableBodyUtilityClass(slot) {
+  return generateUtilityClass("MuiTableBody", slot);
+}
+generateUtilityClasses("MuiTableBody", ["root"]);
+const useUtilityClasses$7 = (ownerState) => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ["root"]
+  };
+  return composeClasses(slots, getTableBodyUtilityClass, classes);
+};
+const TableBodyRoot = styled("tbody", {
+  name: "MuiTableBody",
+  slot: "Root"
+})({
+  display: "table-row-group"
+});
+const tablelvl2$1 = {
+  variant: "body"
+};
+const defaultComponent$2 = "tbody";
+const TableBody = /* @__PURE__ */ React.forwardRef(function TableBody2(inProps, ref) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: "MuiTableBody"
+  });
+  const {
+    className,
+    component = defaultComponent$2,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
+    component
+  };
+  const classes = useUtilityClasses$7(ownerState);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Tablelvl2Context.Provider, {
+    value: tablelvl2$1,
+    children: /* @__PURE__ */ jsxRuntimeExports.jsx(TableBodyRoot, {
+      className: clsx(classes.root, className),
+      as: component,
+      ref,
+      role: component === defaultComponent$2 ? null : "rowgroup",
+      ownerState,
+      ...other
+    })
+  });
+});
+process.env.NODE_ENV !== "production" ? TableBody.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component, normally `TableRow`.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * 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 getTableCellUtilityClass(slot) {
+  return generateUtilityClass("MuiTableCell", slot);
+}
+const tableCellClasses = generateUtilityClasses("MuiTableCell", ["root", "head", "body", "footer", "sizeSmall", "sizeMedium", "paddingCheckbox", "paddingNone", "alignLeft", "alignCenter", "alignRight", "alignJustify", "stickyHeader"]);
+const useUtilityClasses$6 = (ownerState) => {
+  const {
+    classes,
+    variant,
+    align,
+    padding: padding2,
+    size,
+    stickyHeader
+  } = ownerState;
+  const slots = {
+    root: ["root", variant, stickyHeader && "stickyHeader", align !== "inherit" && `align${capitalize(align)}`, padding2 !== "normal" && `padding${capitalize(padding2)}`, `size${capitalize(size)}`]
+  };
+  return composeClasses(slots, getTableCellUtilityClass, classes);
+};
+const TableCellRoot = styled("td", {
+  name: "MuiTableCell",
+  slot: "Root",
+  overridesResolver: (props, styles2) => {
+    const {
+      ownerState
+    } = props;
+    return [styles2.root, styles2[ownerState.variant], styles2[`size${capitalize(ownerState.size)}`], ownerState.padding !== "normal" && styles2[`padding${capitalize(ownerState.padding)}`], ownerState.align !== "inherit" && styles2[`align${capitalize(ownerState.align)}`], ownerState.stickyHeader && styles2.stickyHeader];
+  }
+})(memoTheme(({
+  theme
+}) => ({
+  ...theme.typography.body2,
+  display: "table-cell",
+  verticalAlign: "inherit",
+  // Workaround for a rendering bug with spanned columns in Chrome 62.0.
+  // Removes the alpha (sets it to 1), and lightens or darkens the theme color.
+  borderBottom: theme.vars ? `1px solid ${theme.vars.palette.TableCell.border}` : `1px solid
+    ${theme.palette.mode === "light" ? lighten(alpha(theme.palette.divider, 1), 0.88) : darken(alpha(theme.palette.divider, 1), 0.68)}`,
+  textAlign: "left",
+  padding: 16,
+  variants: [{
+    props: {
+      variant: "head"
+    },
+    style: {
+      color: (theme.vars || theme).palette.text.primary,
+      lineHeight: theme.typography.pxToRem(24),
+      fontWeight: theme.typography.fontWeightMedium
+    }
+  }, {
+    props: {
+      variant: "body"
+    },
+    style: {
+      color: (theme.vars || theme).palette.text.primary
+    }
+  }, {
+    props: {
+      variant: "footer"
+    },
+    style: {
+      color: (theme.vars || theme).palette.text.secondary,
+      lineHeight: theme.typography.pxToRem(21),
+      fontSize: theme.typography.pxToRem(12)
+    }
+  }, {
+    props: {
+      size: "small"
+    },
+    style: {
+      padding: "6px 16px",
+      [`&.${tableCellClasses.paddingCheckbox}`]: {
+        width: 24,
+        // prevent the checkbox column from growing
+        padding: "0 12px 0 16px",
+        "& > *": {
+          padding: 0
+        }
+      }
+    }
+  }, {
+    props: {
+      padding: "checkbox"
+    },
+    style: {
+      width: 48,
+      // prevent the checkbox column from growing
+      padding: "0 0 0 4px"
+    }
+  }, {
+    props: {
+      padding: "none"
+    },
+    style: {
+      padding: 0
+    }
+  }, {
+    props: {
+      align: "left"
+    },
+    style: {
+      textAlign: "left"
+    }
+  }, {
+    props: {
+      align: "center"
+    },
+    style: {
+      textAlign: "center"
+    }
+  }, {
+    props: {
+      align: "right"
+    },
+    style: {
+      textAlign: "right",
+      flexDirection: "row-reverse"
+    }
+  }, {
+    props: {
+      align: "justify"
+    },
+    style: {
+      textAlign: "justify"
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.stickyHeader,
+    style: {
+      position: "sticky",
+      top: 0,
+      zIndex: 2,
+      backgroundColor: (theme.vars || theme).palette.background.default
+    }
+  }]
+})));
+const TableCell = /* @__PURE__ */ React.forwardRef(function TableCell2(inProps, ref) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: "MuiTableCell"
+  });
+  const {
+    align = "inherit",
+    className,
+    component: componentProp,
+    padding: paddingProp,
+    scope: scopeProp,
+    size: sizeProp,
+    sortDirection,
+    variant: variantProp,
+    ...other
+  } = props;
+  const table = React.useContext(TableContext);
+  const tablelvl22 = React.useContext(Tablelvl2Context);
+  const isHeadCell = tablelvl22 && tablelvl22.variant === "head";
+  let component;
+  if (componentProp) {
+    component = componentProp;
+  } else {
+    component = isHeadCell ? "th" : "td";
+  }
+  let scope = scopeProp;
+  if (component === "td") {
+    scope = void 0;
+  } else if (!scope && isHeadCell) {
+    scope = "col";
+  }
+  const variant = variantProp || tablelvl22 && tablelvl22.variant;
+  const ownerState = {
+    ...props,
+    align,
+    component,
+    padding: paddingProp || (table && table.padding ? table.padding : "normal"),
+    size: sizeProp || (table && table.size ? table.size : "medium"),
+    sortDirection,
+    stickyHeader: variant === "head" && table && table.stickyHeader,
+    variant
+  };
+  const classes = useUtilityClasses$6(ownerState);
+  let ariaSort = null;
+  if (sortDirection) {
+    ariaSort = sortDirection === "asc" ? "ascending" : "descending";
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(TableCellRoot, {
+    as: component,
+    ref,
+    className: clsx(classes.root, className),
+    "aria-sort": ariaSort,
+    scope,
+    ownerState,
+    ...other
+  });
+});
+process.env.NODE_ENV !== "production" ? TableCell.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * Set the text-align on the table cell content.
+   *
+   * Monetary or generally number fields **should be right aligned** as that allows
+   * you to add them up quickly in your head without having to worry about decimals.
+   * @default 'inherit'
+   */
+  align: PropTypes.oneOf(["center", "inherit", "justify", "left", "right"]),
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * Sets the padding applied to the cell.
+   * The prop defaults to the value (`'default'`) inherited from the parent Table component.
+   */
+  padding: PropTypes.oneOf(["checkbox", "none", "normal"]),
+  /**
+   * Set scope attribute.
+   */
+  scope: PropTypes.string,
+  /**
+   * Specify the size of the cell.
+   * The prop defaults to the value (`'medium'`) inherited from the parent Table component.
+   */
+  size: PropTypes.oneOfType([PropTypes.oneOf(["medium", "small"]), PropTypes.string]),
+  /**
+   * Set aria-sort direction.
+   */
+  sortDirection: PropTypes.oneOf(["asc", "desc", false]),
+  /**
+   * 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]),
+  /**
+   * Specify the cell type.
+   * The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components.
+   */
+  variant: PropTypes.oneOfType([PropTypes.oneOf(["body", "footer", "head"]), PropTypes.string])
+} : void 0;
+function getTableContainerUtilityClass(slot) {
+  return generateUtilityClass("MuiTableContainer", slot);
+}
+generateUtilityClasses("MuiTableContainer", ["root"]);
+const useUtilityClasses$5 = (ownerState) => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ["root"]
+  };
+  return composeClasses(slots, getTableContainerUtilityClass, classes);
+};
+const TableContainerRoot = styled("div", {
+  name: "MuiTableContainer",
+  slot: "Root"
+})({
+  width: "100%",
+  overflowX: "auto"
+});
+const TableContainer = /* @__PURE__ */ React.forwardRef(function TableContainer2(inProps, ref) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: "MuiTableContainer"
+  });
+  const {
+    className,
+    component = "div",
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
+    component
+  };
+  const classes = useUtilityClasses$5(ownerState);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(TableContainerRoot, {
+    ref,
+    as: component,
+    className: clsx(classes.root, className),
+    ownerState,
+    ...other
+  });
+});
+process.env.NODE_ENV !== "production" ? TableContainer.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component, normally `Table`.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * 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 getTableHeadUtilityClass(slot) {
+  return generateUtilityClass("MuiTableHead", slot);
+}
+generateUtilityClasses("MuiTableHead", ["root"]);
+const useUtilityClasses$4 = (ownerState) => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ["root"]
+  };
+  return composeClasses(slots, getTableHeadUtilityClass, classes);
+};
+const TableHeadRoot = styled("thead", {
+  name: "MuiTableHead",
+  slot: "Root"
+})({
+  display: "table-header-group"
+});
+const tablelvl2 = {
+  variant: "head"
+};
+const defaultComponent$1 = "thead";
+const TableHead = /* @__PURE__ */ React.forwardRef(function TableHead2(inProps, ref) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: "MuiTableHead"
+  });
+  const {
+    className,
+    component = defaultComponent$1,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
+    component
+  };
+  const classes = useUtilityClasses$4(ownerState);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Tablelvl2Context.Provider, {
+    value: tablelvl2,
+    children: /* @__PURE__ */ jsxRuntimeExports.jsx(TableHeadRoot, {
+      as: component,
+      className: clsx(classes.root, className),
+      ref,
+      role: component === defaultComponent$1 ? null : "rowgroup",
+      ownerState,
+      ...other
+    })
+  });
+});
+process.env.NODE_ENV !== "production" ? TableHead.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component, normally `TableRow`.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * 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;
+const KeyboardArrowLeft = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("path", {
+  d: "M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+}), "KeyboardArrowLeft");
+const KeyboardArrowRight = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("path", {
+  d: "M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+}), "KeyboardArrowRight");
+function getTableRowUtilityClass(slot) {
+  return generateUtilityClass("MuiTableRow", slot);
+}
+const tableRowClasses = generateUtilityClasses("MuiTableRow", ["root", "selected", "hover", "head", "footer"]);
+const useUtilityClasses$3 = (ownerState) => {
+  const {
+    classes,
+    selected,
+    hover,
+    head,
+    footer
+  } = ownerState;
+  const slots = {
+    root: ["root", selected && "selected", hover && "hover", head && "head", footer && "footer"]
+  };
+  return composeClasses(slots, getTableRowUtilityClass, classes);
+};
+const TableRowRoot = styled("tr", {
+  name: "MuiTableRow",
+  slot: "Root",
+  overridesResolver: (props, styles2) => {
+    const {
+      ownerState
+    } = props;
+    return [styles2.root, ownerState.head && styles2.head, ownerState.footer && styles2.footer];
+  }
+})(memoTheme(({
+  theme
+}) => ({
+  color: "inherit",
+  display: "table-row",
+  verticalAlign: "middle",
+  // We disable the focus ring for mouse, touch and keyboard users.
+  outline: 0,
+  [`&.${tableRowClasses.hover}:hover`]: {
+    backgroundColor: (theme.vars || theme).palette.action.hover
+  },
+  [`&.${tableRowClasses.selected}`]: {
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+    "&:hover": {
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
+    }
+  }
+})));
+const defaultComponent = "tr";
+const TableRow = /* @__PURE__ */ React.forwardRef(function TableRow2(inProps, ref) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: "MuiTableRow"
+  });
+  const {
+    className,
+    component = defaultComponent,
+    hover = false,
+    selected = false,
+    ...other
+  } = props;
+  const tablelvl22 = React.useContext(Tablelvl2Context);
+  const ownerState = {
+    ...props,
+    component,
+    hover,
+    selected,
+    head: tablelvl22 && tablelvl22.variant === "head",
+    footer: tablelvl22 && tablelvl22.variant === "footer"
+  };
+  const classes = useUtilityClasses$3(ownerState);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(TableRowRoot, {
+    as: component,
+    ref,
+    className: clsx(classes.root, className),
+    role: component === defaultComponent ? null : "row",
+    ownerState,
+    ...other
+  });
+});
+process.env.NODE_ENV !== "production" ? TableRow.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * Should be valid `<tr>` children such as `TableCell`.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * If `true`, the table row will shade on hover.
+   * @default false
+   */
+  hover: PropTypes.bool,
+  /**
+   * If `true`, the table row will have the selected shading.
+   * @default false
+   */
+  selected: PropTypes.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+function easeInOutSin(time) {
+  return (1 + Math.sin(Math.PI * time - Math.PI / 2)) / 2;
+}
+function animate(property, element, to, options = {}, cb = () => {
+}) {
+  const {
+    ease = easeInOutSin,
+    duration: duration2 = 300
+    // standard
+  } = options;
+  let start2 = null;
+  const from = element[property];
+  let cancelled = false;
+  const cancel = () => {
+    cancelled = true;
+  };
+  const step = (timestamp) => {
+    if (cancelled) {
+      cb(new Error("Animation cancelled"));
+      return;
+    }
+    if (start2 === null) {
+      start2 = timestamp;
+    }
+    const time = Math.min(1, (timestamp - start2) / duration2);
+    element[property] = ease(time) * (to - from) + from;
+    if (time >= 1) {
+      requestAnimationFrame(() => {
+        cb(null);
+      });
+      return;
+    }
+    requestAnimationFrame(step);
+  };
+  if (from === to) {
+    cb(new Error("Element already at target position"));
+    return cancel;
+  }
+  requestAnimationFrame(step);
+  return cancel;
+}
+const styles = {
+  width: 99,
+  height: 99,
+  position: "absolute",
+  top: -9999,
+  overflow: "scroll"
+};
+function ScrollbarSize(props) {
+  const {
+    onChange,
+    ...other
+  } = props;
+  const scrollbarHeight = React.useRef();
+  const nodeRef = React.useRef(null);
+  const setMeasurements = () => {
+    scrollbarHeight.current = nodeRef.current.offsetHeight - nodeRef.current.clientHeight;
+  };
+  useEnhancedEffect(() => {
+    const handleResize = debounce$1(() => {
+      const prevHeight = scrollbarHeight.current;
+      setMeasurements();
+      if (prevHeight !== scrollbarHeight.current) {
+        onChange(scrollbarHeight.current);
+      }
+    });
+    const containerWindow = ownerWindow$1(nodeRef.current);
+    containerWindow.addEventListener("resize", handleResize);
+    return () => {
+      handleResize.clear();
+      containerWindow.removeEventListener("resize", handleResize);
+    };
+  }, [onChange]);
+  React.useEffect(() => {
+    setMeasurements();
+    onChange(scrollbarHeight.current);
+  }, [onChange]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+    style: styles,
+    ...other,
+    ref: nodeRef
+  });
+}
+process.env.NODE_ENV !== "production" ? ScrollbarSize.propTypes = {
+  onChange: PropTypes.func.isRequired
+} : void 0;
+function getTabScrollButtonUtilityClass(slot) {
+  return generateUtilityClass("MuiTabScrollButton", slot);
+}
+const tabScrollButtonClasses = generateUtilityClasses("MuiTabScrollButton", ["root", "vertical", "horizontal", "disabled"]);
+const useUtilityClasses$2 = (ownerState) => {
+  const {
+    classes,
+    orientation,
+    disabled
+  } = ownerState;
+  const slots = {
+    root: ["root", orientation, disabled && "disabled"]
+  };
+  return composeClasses(slots, getTabScrollButtonUtilityClass, classes);
+};
+const TabScrollButtonRoot = styled(ButtonBase, {
+  name: "MuiTabScrollButton",
+  slot: "Root",
+  overridesResolver: (props, styles2) => {
+    const {
+      ownerState
+    } = props;
+    return [styles2.root, ownerState.orientation && styles2[ownerState.orientation]];
+  }
+})({
+  width: 40,
+  flexShrink: 0,
+  opacity: 0.8,
+  [`&.${tabScrollButtonClasses.disabled}`]: {
+    opacity: 0
+  },
+  variants: [{
+    props: {
+      orientation: "vertical"
+    },
+    style: {
+      width: "100%",
+      height: 40,
+      "& svg": {
+        transform: "var(--TabScrollButton-svgRotate)"
+      }
+    }
+  }]
+});
+const TabScrollButton = /* @__PURE__ */ React.forwardRef(function TabScrollButton2(inProps, ref) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: "MuiTabScrollButton"
+  });
+  const {
+    className,
+    slots = {},
+    slotProps = {},
+    direction,
+    orientation,
+    disabled,
+    ...other
+  } = props;
+  const isRtl = useRtl();
+  const ownerState = {
+    isRtl,
+    ...props
+  };
+  const classes = useUtilityClasses$2(ownerState);
+  const StartButtonIcon = slots.StartScrollButtonIcon ?? KeyboardArrowLeft;
+  const EndButtonIcon = slots.EndScrollButtonIcon ?? KeyboardArrowRight;
+  const startButtonIconProps = useSlotProps({
+    elementType: StartButtonIcon,
+    externalSlotProps: slotProps.startScrollButtonIcon,
+    additionalProps: {
+      fontSize: "small"
+    },
+    ownerState
+  });
+  const endButtonIconProps = useSlotProps({
+    elementType: EndButtonIcon,
     externalSlotProps: slotProps.endScrollButtonIcon,
     additionalProps: {
       fontSize: "small"
@@ -22447,7 +23170,7 @@ const ComboDropdown = ({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  const normalizeOptions = (opts) => opts.map((opt) => {
+  const normalizeOptions2 = (opts) => opts.map((opt) => {
     if (typeof opt === "string") return { label: opt, value: opt };
     return {
       label: opt[optionLabelKey],
@@ -22457,29 +23180,47 @@ const ComboDropdown = ({
   const handleInputChange = (e) => {
     const val = e.target.value;
     setInputValue(val);
-    if (mode !== "select" && onChange) {
-      onChange(name, val);
-    }
-    if (mode !== "type") {
-      const normalized = normalizeOptions(options);
-      const filtered = normalized.filter(
-        (opt) => {
-          var _a;
-          return (_a = opt.label) == null ? void 0 : _a.toLowerCase().includes(val.toLowerCase());
-        }
-      );
-      setFilteredOptions(filtered);
-      setShowDropdown(true);
-      setHighlightIndex(-1);
-    }
+    const normalized = normalizeOptions2(options);
+    const filtered = normalized.filter(
+      (opt) => {
+        var _a;
+        return (_a = opt.label) == null ? void 0 : _a.toLowerCase().includes(val.toLowerCase());
+      }
+    );
+    setFilteredOptions(filtered);
+    setShowDropdown(true);
+    setHighlightIndex(-1);
   };
   const handleSelect = (val, label2) => {
     setInputValue(label2);
-    if (onChange) {
+    onChange(name, val);
+    setShowDropdown(false);
+    setHighlightIndex(-1);
+  };
+  const handleBlur = () => {
+    const val = inputValue.trim();
+    const normalized = normalizeOptions2(options);
+    const matchedOption = normalized.find(
+      (opt) => opt.label.toLowerCase() === val.toLowerCase()
+    );
+    if (matchedOption) {
+      setInputValue(matchedOption.label);
+      onChange(name, matchedOption.value);
+    } else if (mode === "both") {
       onChange(name, val);
+    } else if (mode === "type") {
+      onChange(name, val);
+    } else {
+      const selected = normalized.find(
+        (opt) => opt.value === value
+      );
+      if (selected) {
+        setInputValue(selected.label);
+      } else {
+        setInputValue("");
+      }
     }
     setShowDropdown(false);
-    setHighlightIndex(-1);
   };
   const handleKeyDown = (e) => {
     if (!showDropdown || filteredOptions.length === 0) return;
@@ -22506,7 +23247,7 @@ const ComboDropdown = ({
   const toggleDropdown = () => {
     if (disabled) return;
     if (!showDropdown && mode !== "type") {
-      setFilteredOptions(normalizeOptions(options));
+      setFilteredOptions(normalizeOptions2(options));
     }
     setShowDropdown((prev) => {
       var _a;
@@ -22531,15 +23272,16 @@ const ComboDropdown = ({
           name,
           value: inputValue,
           onChange: handleInputChange,
+          onBlur: handleBlur,
           onFocus: () => {
             if (mode !== "type") {
-              setFilteredOptions(normalizeOptions(options));
+              setFilteredOptions(normalizeOptions2(options));
               setShowDropdown(true);
             }
           },
           onClick: () => {
             if (mode !== "type") {
-              setFilteredOptions(normalizeOptions(options));
+              setFilteredOptions(normalizeOptions2(options));
               setShowDropdown(true);
             }
           },
@@ -28519,6 +29261,11 @@ const CustomInput = ({
   const [showPassword, setShowPassword] = useState(false);
   const [amountInWords, setAmountInWords] = useState("");
   const [enable, setEnable] = useState(true);
+  useEffect(() => {
+    if (value) {
+      validate(value);
+    }
+  }, [value]);
   console.log(enable);
   const validate = (val) => {
     const raw = category === "amount" ? removeCommas(val) : val;
@@ -28556,7 +29303,7 @@ const CustomInput = ({
         break;
       }
       case "mobile":
-        if (val.length !== 10) return setError("Invalid mobile number");
+        if (val.length < 12) return setError("Invalid mobile number");
         if (val.length == 10) setEnable(true);
         break;
       case "aadhaar":
@@ -28742,7 +29489,6 @@ const CustomInput = ({
   const handleChange = (e) => {
     let val;
     if (category == "mobile") {
-      alert(val.length);
       console.log(e);
       val = e;
       validate(val);
@@ -30368,14 +31114,512 @@ function DynamicTabs({
         ))
       }
     ) }),
-    tabs.map((tab, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(CustomTabPanel, { value, index, className: "focus:outline-none !pl-0 !pb-0 !p-2 ", children: tab.content }, index))
+    tabs.map((tab, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(CustomTabPanel, { value, index, className: "focus:outline-none !pr-0 !pt-0 !pl-0 !pb-0 sm:!pr-2 ", children: tab.content }, index))
   ] });
 }
+const ArrowDropDownIcon = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("path", {
+  d: "m7 10 5 5 5-5z"
+}), "ArrowDropDown");
+const normalizeOptions = (options, labelKey, valueKey) => {
+  return options.map((opt) => ({
+    label: opt[labelKey],
+    value: opt[valueKey],
+    raw: opt
+  }));
+};
+const PowerDropdown = ({
+  label,
+  options = [],
+  value,
+  onChange,
+  optionLabelKey = "name",
+  optionValueKey = "id",
+  mode = "both",
+  // select | type | both
+  displayFormat = "list",
+  // list | table
+  placeholder = "Search or select...",
+  allowNewValue = false,
+  // tableHeaders = [],
+  columnWidths = [],
+  height: height2 = "40px",
+  error,
+  disabled,
+  saveOptionTitle
+}) => {
+  console.log("options", options);
+  console.log("columnWidths", columnWidths);
+  const [inputVal, setInputVal] = useState("");
+  console.log("inputVal", inputVal);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const [suggestion, setSuggestion] = useState("");
+  const [isInputFocused, setIsInputFocused] = useState(false);
+  const [lastSelectedItem, setLastSelectedItem] = useState(null);
+  const [localOptions, setLocalOptions] = useState(
+    () => normalizeOptions(options, optionLabelKey, optionValueKey)
+  );
+  const [showAddModal, setShowAddModal] = useState(false);
+  const empDataFromDB = Object.keys(options[0]).reduce((acc, curr) => {
+    return { ...acc, [curr]: "" };
+  }, {});
+  const [newEmployee, setNewEmployee] = useState(empDataFromDB);
+  console.log(newEmployee, "newEmployee");
+  console.log("opt", empDataFromDB);
+  const handleAddNewClick = (e) => {
+    e.stopPropagation();
+    console.log("from add Emp", inputVal);
+    console.log("from add Emp labelKey", optionLabelKey, newEmployee);
+    console.log(newEmployee, "newEmployee before");
+    const restructuredEmp = Object.keys(newEmployee).reduce((acc, curr) => {
+      const val = curr === optionLabelKey ? inputVal : "";
+      return { ...acc, [curr]: val };
+    });
+    setNewEmployee(restructuredEmp);
+    setShowAddModal(true);
+  };
+  const handleAddEmployeeSubmit = () => {
+    const newOption = {
+      label: newEmployee.name,
+      value: newEmployee.id,
+      raw: { ...newEmployee }
+    };
+    console.log([...localOptions, newOption]);
+    setLocalOptions([...localOptions, newOption]);
+    setDropdownOpen(false);
+    setShowAddModal(false);
+  };
+  useRef(null);
+  const dropdownRef = useRef(null);
+  const normalizedOptions = useMemo(
+    () => normalizeOptions(options, optionLabelKey, optionValueKey),
+    [options, optionLabelKey, optionValueKey]
+  );
+  const filteredOptions = useMemo(() => {
+    return localOptions == null ? void 0 : localOptions.filter(
+      (option) => {
+        var _a;
+        return (_a = option.label) == null ? void 0 : _a.toLowerCase().includes(inputVal.toLowerCase());
+      }
+    );
+  }, [inputVal, localOptions]);
+  const handleSelect = (option) => {
+    setInputVal(option.label);
+    console.log("option.raw selected", option.raw);
+    onChange(option.raw);
+    setDropdownOpen(false);
+  };
+  const handleBlur = (event) => {
+    event.preventDefault();
+    const htmlElement = document.getElementById("display_name");
+    if (htmlElement) {
+      htmlElement.innerHTML = "";
+    }
+    setTimeout(() => {
+      if (!event.relatedTarget || !event.relatedTarget.closest(".table-container")) {
+        setDropdownOpen(false);
+        setFocusedIndex(-1);
+        setIsInputFocused(false);
+        if (mode !== "select" && allowNewValue && inputVal.trim()) {
+          normalizedOptions.find(
+            (opt) => opt.label.toLowerCase() === inputVal.toLowerCase()
+          );
+        }
+        if (htmlElement) {
+          htmlElement.innerHTML = "";
+        }
+      }
+    }, 100);
+  };
+  const handleKeyDown = (e) => {
+    if (!dropdownOpen && ["ArrowDown", "Enter"].includes(e.key)) {
+      setDropdownOpen(true);
+      return;
+    }
+    if (e.key === "ArrowDown") {
+      setFocusedIndex((prev) => (prev + 1) % filteredOptions.length);
+    } else if (e.key === "ArrowUp") {
+      setFocusedIndex(
+        (prev) => (prev - 1 + filteredOptions.length) % filteredOptions.length
+      );
+    } else if (e.key === "Enter" && focusedIndex >= 0) {
+      handleSelect(filteredOptions[focusedIndex]);
+    } else if (e.key === "Tab" && suggestion) {
+      e.preventDefault();
+      setInputVal(suggestion);
+      const matched = normalizedOptions.find(
+        (opt) => opt.label.toLowerCase() === suggestion.toLowerCase()
+      );
+      if (matched) {
+        handleSelect(matched);
+      }
+    }
+  };
+  const getFontSizeFromWidth = (width2) => {
+    const numericWidth = parseFloat(width2);
+    if (numericWidth >= 40) return "1rem";
+    if (numericWidth >= 25) return "0.9rem";
+    if (numericWidth >= 15) return "0.8rem";
+    return "0.75rem";
+  };
+  const generateColumns = () => {
+    if (options && options.length > 0) {
+      const firstItem = options[0];
+      console.log("firstItem in columns", firstItem);
+      const keys = Object.keys(firstItem).slice(1);
+      console.log("keys in columns", keys);
+      const defaultWidth = `${100 / 3}%`;
+      console.log("columnWidths in generateColumns", columnWidths.length > 0);
+      return keys.slice(0, columnWidths.length > 0 ? columnWidths.length : 3).map((key, index) => {
+        const width2 = columnWidths.length > 0 ? `${columnWidths[index]}%` : defaultWidth;
+        console.log("columnWidths.length", columnWidths.length);
+        console.log("columns width", width2);
+        return {
+          key,
+          label: key.charAt(0).toUpperCase() + key.slice(1).replace(/_/g, " "),
+          width: width2,
+          fontSize: getFontSizeFromWidth(width2)
+        };
+      });
+    }
+    return [];
+  };
+  console.log("generateColumns()", generateColumns());
+  const columns = useMemo(() => generateColumns(), [options, columnWidths]);
+  console.log("columns", columns);
+  useEffect(() => {
+    setInputVal((value == null ? void 0 : value[optionLabelKey]) || "");
+  }, [value, optionLabelKey]);
+  useEffect(() => {
+    if (!suggestion) {
+      setFocusedIndex(-1);
+      return;
+    }
+    const matchIndex = filteredOptions.findIndex(
+      (opt) => opt.label.toLowerCase() === suggestion.toLowerCase()
+    );
+    setFocusedIndex(matchIndex);
+  }, [suggestion, filteredOptions]);
+  useEffect(() => {
+    setLocalOptions(normalizeOptions(options, optionLabelKey, optionValueKey));
+  }, [options, optionLabelKey, optionValueKey]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("style", { children: `
+          .custom-scrollbar::-webkit-scrollbar {
+            width: 8px;
+          }
+
+          .custom-scrollbar::-webkit-scrollbar-track {
+            background: #f1f1f1;
+          }
+
+          .custom-scrollbar::-webkit-scrollbar-thumb {
+            background: #888;
+            border-radius: 4px;
+          }
+
+          .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+            background: #555;
+          }
+        ` }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { position: "relative", width: "100%" }, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Typography,
+        {
+          className: "heading",
+          style: {
+            marginBottom: "0.5rem",
+            textAlign: "left",
+            fontWeight: "500",
+            fontSize: "14px",
+            lineHeight: "20px",
+            color: "#212529",
+            textTransform: "capitalize"
+          },
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            border: `1px solid ${error ? "red" : "#ccc"}`,
+            borderRadius: "4px",
+            height: height2,
+            backgroundColor: disabled ? "#f5f5f5" : "white",
+            boxShadow: isInputFocused ? "0 0 5px 2px skyblue" : "none",
+            transition: "box-shadow 0.2s ease-in-out"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { position: "relative", width: "100%" }, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "input",
+                {
+                  value: suggestion && inputVal && suggestion.toLowerCase().startsWith(inputVal.toLowerCase()) ? suggestion : "",
+                  disabled: true,
+                  "aria-hidden": true,
+                  style: {
+                    position: "absolute",
+                    top: "8px",
+                    left: "7px",
+                    width: "100%",
+                    border: "none",
+                    outline: "none",
+                    color: "#ccc",
+                    backgroundColor: "transparent",
+                    fontSize: "16px",
+                    fontFamily: "inherit",
+                    pointerEvents: "none",
+                    zIndex: 0,
+                    boxSizing: "border-box"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "input",
+                {
+                  value: inputVal.charAt(0).toUpperCase() + inputVal.slice(1),
+                  onChange: (e) => {
+                    const newVal = e.target.value;
+                    setInputVal(newVal);
+                    setDropdownOpen(true);
+                    setFocusedIndex(-1);
+                    const match = filteredOptions.find(
+                      (opt) => opt.label.toLowerCase().startsWith(newVal.toLowerCase())
+                    );
+                    setSuggestion((match == null ? void 0 : match.label) || "");
+                  },
+                  onKeyDown: handleKeyDown,
+                  style: {
+                    border: "none",
+                    borderRadius: "4px",
+                    outline: "none",
+                    width: "100%",
+                    background: "transparent",
+                    color: "black",
+                    caretColor: "black",
+                    position: "relative",
+                    zIndex: "1",
+                    fontSize: "16px",
+                    fontFamily: "inherit",
+                    padding: "8px",
+                    paddingRight: "10%",
+                    boxSizing: "border-box"
+                  },
+                  onFocus: (e) => {
+                    setIsInputFocused(true);
+                    !disabled && setDropdownOpen(true);
+                  },
+                  onBlur: handleBlur
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              ArrowDropDownIcon,
+              {
+                onClick: () => !disabled && setDropdownOpen((prev) => !prev),
+                style: {
+                  cursor: disabled ? "not-allowed" : "pointer",
+                  color: "gray"
+                }
+              }
+            )
+          ]
+        }
+      ),
+      dropdownOpen && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          ref: dropdownRef,
+          style: {
+            position: "absolute",
+            zIndex: 10,
+            width: "100%",
+            backgroundColor: "white",
+            border: "1px solid #ccc",
+            maxHeight: 200,
+            overflowY: "auto",
+            marginTop: 4
+          },
+          children: filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { p: 1, variant: "body2", children: "No results found" }),
+            allowNewValue ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Button,
+              {
+                onMouseDown: handleAddNewClick,
+                style: { marginTop: 8 },
+                type: "button",
+                children: saveOptionTitle
+              }
+            ) : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {})
+          ] }) : displayFormat === "table" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+            TableContainer,
+            {
+              component: Paper,
+              className: "table-container overflow-x-hidden w-ful mt-0 h-full max-h-[60vh] overflow-y-auto shadow-2xl",
+              children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                Table,
+                {
+                  stickyHeader: true,
+                  size: "small",
+                  sx: {
+                    tableLayout: "fixed",
+                    width: "100%",
+                    overflowX: "hidden",
+                    border: "1px solid #aaa",
+                    borderCollapse: "collapse"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(TableRow, { children: columns.map((column, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      TableCell,
+                      {
+                        sx: {
+                          width: column.width,
+                          padding: "8px",
+                          fontSize: column.fontSize || "0.9rem",
+                          boxSizing: "border-box",
+                          overflow: "hidden",
+                          whiteSpace: "nowrap",
+                          textOverflow: "ellipsis",
+                          // Inline styles from .table-head-cell
+                          backgroundColor: "#1976d2",
+                          color: "white",
+                          fontWeight: "bold",
+                          position: "sticky",
+                          top: 0,
+                          zIndex: 1,
+                          border: "1px solid #aaa"
+                        },
+                        children: column.label
+                      },
+                      index
+                    )) }) }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(TableBody, { children: filteredOptions.map((opt, idx) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      TableRow,
+                      {
+                        onMouseDown: () => handleSelect(opt),
+                        hover: true,
+                        sx: {
+                          cursor: "pointer",
+                          height: 48,
+                          scrollBehavior: "smooth",
+                          backgroundColor: focusedIndex === idx ? "#fff54f" : idx % 2 === 0 ? "#f5f5f5" : "white",
+                          "&:hover": {
+                            backgroundColor: "#e3f2fd"
+                          }
+                        },
+                        children: columns.map((column, cellIndex) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                          TableCell,
+                          {
+                            sx: {
+                              width: column.width,
+                              padding: "6px",
+                              fontSize: column.fontSize || "0.9rem",
+                              boxSizing: "border-box",
+                              overflow: "hidden",
+                              whiteSpace: "nowrap",
+                              textOverflow: "ellipsis",
+                              border: "1px solid #aaa"
+                            },
+                            children: [
+                              opt.raw[column.key],
+                              console.log(opt, "opt in tablecell")
+                            ]
+                          },
+                          cellIndex
+                        ))
+                      },
+                      idx
+                    )) })
+                  ]
+                }
+              )
+            }
+          ) : /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: filteredOptions.map((opt, idx) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "li",
+            {
+              onMouseDown: () => handleSelect(opt),
+              style: {
+                padding: 8,
+                backgroundColor: focusedIndex === idx ? "#eee" : "white",
+                cursor: "pointer"
+              },
+              children: opt.label
+            },
+            idx
+          )) })
+        }
+      ),
+      error && /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { color: "error", children: error })
+    ] }),
+    showAddModal && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          width: "100%",
+          height: "100%",
+          background: "rgba(0,0,0,0.2)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          zIndex: 9999
+        },
+        children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "div",
+          {
+            style: {
+              background: "#fff",
+              padding: "2rem",
+              borderRadius: "8px",
+              width: "300px"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { children: "Add New Employee" }),
+              Object.keys(options[0]).map((key) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                CustomInput,
+                {
+                  label: key,
+                  name: key,
+                  value: newEmployee[key],
+                  onChange: (name, value2) => setNewEmployee((prev) => ({ ...prev, [key]: value2 })),
+                  disabled: key === "_id",
+                  width: "100%",
+                  placeholder: key,
+                  type: "text",
+                  category: "text",
+                  isRequired: true
+                }
+              )),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { marginTop: 16, textAlign: "right" }, children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: () => setShowAddModal(false), children: "Cancel" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "button",
+                  {
+                    onClick: handleAddEmployeeSubmit,
+                    disabled: !newEmployee.name,
+                    style: { marginLeft: 8 },
+                    children: "Save"
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+};
 export {
   ComboDropdown as MytekComboDropdown,
   CustomInput as MytekInputField,
   Loader as MytekLoader,
   Mt_MessageBox as MytekMessageBox,
+  PowerDropdown as MytekPowerCombo,
   RadioButton as MytekRadioButton,
   DynamicTabs as MytekTab,
   MasterTable as MytekTable,