mytek-components 1.0.9 → 2.0.2

package/dist/main.umd.js

@@ -5741,7 +5741,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
     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,
@@ -5886,7 +5886,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
     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),
@@ -7314,7 +7314,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
     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,
@@ -7387,7 +7387,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
       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"));
@@ -8073,7 +8073,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
     return generateUtilityClass("MuiButtonBase", slot);
   }
   const buttonBaseClasses = generateUtilityClasses("MuiButtonBase", ["root", "disabled", "focusVisible"]);
-  const useUtilityClasses$u = (ownerState) => {
+  const useUtilityClasses$A = (ownerState) => {
     const {
       disabled,
       focusVisible,
@@ -8289,7 +8289,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
       tabIndex,
       focusVisible
     };
-    const classes = useUtilityClasses$u(ownerState);
+    const classes = useUtilityClasses$A(ownerState);
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(ButtonBaseRoot, {
       as: ComponentProp,
       className: clsx(classes.root, className),
@@ -8541,7 +8541,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
   const dashAnimation = typeof circularDashKeyframe !== "string" ? react.css`
         animation: ${circularDashKeyframe} 1.4s ease-in-out infinite;
       ` : null;
-  const useUtilityClasses$t = (ownerState) => {
+  const useUtilityClasses$z = (ownerState) => {
     const {
       classes,
       variant,
@@ -8663,7 +8663,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
       value,
       variant
     };
-    const classes = useUtilityClasses$t(ownerState);
+    const classes = useUtilityClasses$z(ownerState);
     const circleStyle = {};
     const rootStyle = {};
     const rootProps = {};
@@ -8772,7 +8772,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
     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,
@@ -8957,7 +8957,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
       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),
@@ -9081,7 +9081,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
     textDisabled: true
   };
   const extendSxProp = internal_createExtendSxProp();
-  const useUtilityClasses$r = (ownerState) => {
+  const useUtilityClasses$x = (ownerState) => {
     const {
       align,
       gutterBottom,
@@ -9224,7 +9224,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
       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,
@@ -10975,7 +10975,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
     } = 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,
@@ -11379,7 +11379,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
       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 Input2 = slots.input || components.Input || InputBaseInput;
@@ -11692,7 +11692,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
     ...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) {
@@ -11915,7 +11915,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
     return generateUtilityClass("MuiBackdrop", slot);
   }
   generateUtilityClasses("MuiBackdrop", ["root", "invisible"]);
-  const useUtilityClasses$p = (ownerState) => {
+  const useUtilityClasses$v = (ownerState) => {
     const {
       classes,
       invisible
@@ -11978,7 +11978,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
       component,
       invisible
     };
-    const classes = useUtilityClasses$p(ownerState);
+    const classes = useUtilityClasses$v(ownerState);
     const backwardCompatibleSlots = {
       transition: TransitionComponentProp,
       root: components.Root,
@@ -12146,7 +12146,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
   if (process.env.NODE_ENV !== "production") {
     ButtonGroupButtonContext.displayName = "ButtonGroupButtonContext";
   }
-  const useUtilityClasses$o = (ownerState) => {
+  const useUtilityClasses$u = (ownerState) => {
     const {
       color: color2,
       disableElevation,
@@ -12646,7 +12646,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
       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,
@@ -12813,7 +12813,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
     return generateUtilityClass("PrivateSwitchBase", slot);
   }
   generateUtilityClasses("PrivateSwitchBase", ["root", "checked", "disabled", "input", "edgeStart", "edgeEnd"]);
-  const useUtilityClasses$n = (ownerState) => {
+  const useUtilityClasses$t = (ownerState) => {
     const {
       classes,
       checked,
@@ -12950,7 +12950,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
       disableFocusRipple,
       edge
     };
-    const classes = useUtilityClasses$n(ownerState);
+    const classes = useUtilityClasses$t(ownerState);
     const externalForwardedProps = {
       slots,
       slotProps: {
@@ -13159,7 +13159,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
     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,
@@ -13268,7 +13268,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
       indeterminate,
       size
     };
-    const classes = useUtilityClasses$m(ownerState);
+    const classes = useUtilityClasses$s(ownerState);
     const externalInputProps = slotProps.input ?? inputProps;
     const [RootSlot, rootSlotProps] = useSlot("root", {
       ref,
@@ -14040,7 +14040,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
     return generateUtilityClass("MuiModal", slot);
   }
   generateUtilityClasses("MuiModal", ["root", "hidden", "backdrop"]);
-  const useUtilityClasses$l = (ownerState) => {
+  const useUtilityClasses$r = (ownerState) => {
     const {
       open,
       exited,
@@ -14147,7 +14147,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
       ...propsWithDefaults,
       exited
     };
-    const classes = useUtilityClasses$l(ownerState);
+    const classes = useUtilityClasses$r(ownerState);
     const childProps = {};
     if (children.props.tabIndex === void 0) {
       childProps.tabIndex = "-1";
@@ -14399,7 +14399,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
     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,
@@ -14613,7 +14613,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
       textAlign,
       variant
     };
-    const classes = useUtilityClasses$k(ownerState);
+    const classes = useUtilityClasses$q(ownerState);
     return /* @__PURE__ */ jsxRuntimeExports.jsx(DividerRoot, {
       as: component,
       className: clsx(classes.root, className),
@@ -14695,7 +14695,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
      */
     variant: PropTypes.oneOfType([PropTypes.oneOf(["fullWidth", "inset", "middle"]), PropTypes.string])
   } : void 0;
-  const useUtilityClasses$j = (ownerState) => {
+  const useUtilityClasses$p = (ownerState) => {
     const {
       classes,
       disableUnderline,
@@ -14977,7 +14977,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
       multiline,
       type
     };
-    const classes = useUtilityClasses$j(props);
+    const classes = useUtilityClasses$p(props);
     const filledInputComponentsProps = {
       root: {
         ownerState
@@ -15201,7 +15201,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
     return generateUtilityClass("MuiFormControl", slot);
   }
   generateUtilityClasses("MuiFormControl", ["root", "marginNone", "marginNormal", "marginDense", "fullWidth", "disabled"]);
-  const useUtilityClasses$i = (ownerState) => {
+  const useUtilityClasses$o = (ownerState) => {
     const {
       classes,
       margin: margin2,
@@ -15291,7 +15291,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
       size,
       variant
     };
-    const classes = useUtilityClasses$i(ownerState);
+    const classes = useUtilityClasses$o(ownerState);
     const [adornedStart, setAdornedStart] = React__namespace.useState(() => {
       let initialAdornedStart = false;
       if (children) {
@@ -15466,7 +15466,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
     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,
@@ -15601,7 +15601,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
       required,
       error: fcs.error
     };
-    const classes = useUtilityClasses$h(ownerState);
+    const classes = useUtilityClasses$n(ownerState);
     const externalForwardedProps = {
       slots,
       slotProps: {
@@ -15731,7 +15731,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
   }
   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,
@@ -15826,7 +15826,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
       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),
@@ -15905,7 +15905,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
     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,
@@ -16002,7 +16002,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
       focused: fcs.focused,
       required: fcs.required
     };
-    const classes = useUtilityClasses$f(ownerState);
+    const classes = useUtilityClasses$l(ownerState);
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(FormLabelRoot, {
       as: component,
       ownerState,
@@ -16304,7 +16304,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
   if (Grow) {
     Grow.muiSupportAuto = true;
   }
-  const useUtilityClasses$e = (ownerState) => {
+  const useUtilityClasses$k = (ownerState) => {
     const {
       classes,
       disableUnderline
@@ -16437,7 +16437,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
       type = "text",
       ...other
     } = props;
-    const classes = useUtilityClasses$e(props);
+    const classes = useUtilityClasses$k(props);
     const ownerState = {
       disableUnderline
     };
@@ -16654,7 +16654,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
     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,
@@ -16843,7 +16843,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
       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,
@@ -16928,7 +16928,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
     return generateUtilityClass("MuiList", slot);
   }
   generateUtilityClasses("MuiList", ["root", "padding", "dense", "subheader"]);
-  const useUtilityClasses$c = (ownerState) => {
+  const useUtilityClasses$i = (ownerState) => {
     const {
       classes,
       disablePadding,
@@ -16994,7 +16994,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
       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, {
@@ -17327,7 +17327,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
   function resolveAnchorEl(anchorEl) {
     return typeof anchorEl === "function" ? anchorEl() : anchorEl;
   }
-  const useUtilityClasses$b = (ownerState) => {
+  const useUtilityClasses$h = (ownerState) => {
     const {
       classes
     } = ownerState;
@@ -17405,7 +17405,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
       transitionDuration: transitionDurationProp,
       TransitionProps
     };
-    const classes = useUtilityClasses$b(ownerState);
+    const classes = useUtilityClasses$h(ownerState);
     const getAnchorOffset = React__namespace.useCallback(() => {
       if (anchorReference === "anchorPosition") {
         if (process.env.NODE_ENV !== "production") {
@@ -17844,7 +17844,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
     vertical: "top",
     horizontal: "left"
   };
-  const useUtilityClasses$a = (ownerState) => {
+  const useUtilityClasses$g = (ownerState) => {
     const {
       classes
     } = ownerState;
@@ -17915,7 +17915,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
       TransitionProps,
       variant
     };
-    const classes = useUtilityClasses$a(ownerState);
+    const classes = useUtilityClasses$g(ownerState);
     const autoFocusItem = autoFocus && !disableAutoFocusItem && open;
     const menuListActionsRef = React__namespace.useRef(null);
     const handleEntering = (element, isAppearing) => {
@@ -18158,7 +18158,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
     } = 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,
@@ -18318,7 +18318,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
       divider,
       disableGutters
     };
-    const classes = useUtilityClasses$9(props);
+    const classes = useUtilityClasses$f(props);
     const handleRef = useForkRef(menuItemRef, ref);
     let tabIndex;
     if (!props.disabled) {
@@ -18418,7 +18418,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
     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,
@@ -18573,7 +18573,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
       variant,
       error
     };
-    const classes = useUtilityClasses$8(ownerState);
+    const classes = useUtilityClasses$e(ownerState);
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(React__namespace.Fragment, {
       children: [/* @__PURE__ */ jsxRuntimeExports.jsx(NativeSelectSelect, {
         ownerState,
@@ -18787,7 +18787,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
      */
     style: PropTypes.object
   } : void 0;
-  const useUtilityClasses$7 = (ownerState) => {
+  const useUtilityClasses$d = (ownerState) => {
     const {
       classes
     } = ownerState;
@@ -18965,7 +18965,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
       type = "text",
       ...other
     } = props;
-    const classes = useUtilityClasses$7(props);
+    const classes = useUtilityClasses$d(props);
     const muiFormControl = useFormControl();
     const fcs = formControlState({
       props,
@@ -19286,7 +19286,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
     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,
@@ -19410,7 +19410,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
       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);
@@ -19643,7 +19643,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
   function isEmpty(display) {
     return display == null || typeof display === "string" && !display.trim();
   }
-  const useUtilityClasses$5 = (ownerState) => {
+  const useUtilityClasses$b = (ownerState) => {
     const {
       classes,
       variant,
@@ -19963,7 +19963,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
       open,
       error
     };
-    const classes = useUtilityClasses$5(ownerState);
+    const classes = useUtilityClasses$b(ownerState);
     const paperProps = {
       ...MenuProps.PaperProps,
       ...(_a = MenuProps.slotProps) == null ? void 0 : _a.paper
@@ -20202,7 +20202,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
      */
     variant: PropTypes.oneOf(["standard", "outlined", "filled"])
   } : void 0;
-  const useUtilityClasses$4 = (ownerState) => {
+  const useUtilityClasses$a = (ownerState) => {
     const {
       classes
     } = ownerState;
@@ -20235,7 +20235,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
       className,
       defaultOpen = false,
       displayEmpty = false,
-      IconComponent = ArrowDropDownIcon,
+      IconComponent = ArrowDropDownIcon$1,
       id,
       input,
       inputProps,
@@ -20265,7 +20265,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
       variant,
       classes: classesProp
     };
-    const classes = useUtilityClasses$4(ownerState);
+    const classes = useUtilityClasses$a(ownerState);
     const {
       root,
       ...restOfClasses
@@ -20482,7 +20482,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
     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,
@@ -20690,7 +20690,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
       textColor,
       wrapped
     };
-    const classes = useUtilityClasses$3(ownerState);
+    const classes = useUtilityClasses$9(ownerState);
     const icon = iconProp && label && /* @__PURE__ */ React__namespace.isValidElement(iconProp) ? /* @__PURE__ */ React__namespace.cloneElement(iconProp, {
       className: clsx(classes.icon, iconProp.props.className)
     }) : iconProp;
@@ -20805,174 +20805,897 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
      */
     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, options2 = {}, cb = () => {
-  }) {
-    const {
-      ease = easeInOutSin,
-      duration: duration2 = 300
-      // standard
-    } = options2;
-    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__namespace.useRef();
-    const nodeRef = React__namespace.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__namespace.useEffect(() => {
-      setMeasurements();
-      onChange(scrollbarHeight.current);
-    }, [onChange]);
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-      style: styles,
-      ...other,
-      ref: nodeRef
-    });
+  const TableContext = /* @__PURE__ */ React__namespace.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__namespace.forwardRef(function TabScrollButton2(inProps, ref) {
+  })));
+  const defaultComponent$3 = "table";
+  const Table = /* @__PURE__ */ React__namespace.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__namespace.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__namespace.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__namespace.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__namespace.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__namespace.useContext(TableContext);
+    const tablelvl22 = React__namespace.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__namespace.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__namespace.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__namespace.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__namespace.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, options2 = {}, cb = () => {
+  }) {
+    const {
+      ease = easeInOutSin,
+      duration: duration2 = 300
+      // standard
+    } = options2;
+    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__namespace.useRef();
+    const nodeRef = React__namespace.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__namespace.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__namespace.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"
@@ -22463,7 +23186,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
       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],
@@ -22473,29 +23196,47 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
     const handleInputChange = (e) => {
       const val = e.target.value;
       setInputValue(val);
-      if (mode !== "select" && onChange) {
-        onChange(name, val);
-      }
-      if (mode !== "type") {
-        const normalized = normalizeOptions(options2);
-        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(options2);
+      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(options2);
+      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;
@@ -22522,7 +23263,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
     const toggleDropdown = () => {
       if (disabled) return;
       if (!showDropdown && mode !== "type") {
-        setFilteredOptions(normalizeOptions(options2));
+        setFilteredOptions(normalizeOptions2(options2));
       }
       setShowDropdown((prev) => {
         var _a;
@@ -22547,15 +23288,16 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
             name,
             value: inputValue,
             onChange: handleInputChange,
+            onBlur: handleBlur,
             onFocus: () => {
               if (mode !== "type") {
-                setFilteredOptions(normalizeOptions(options2));
+                setFilteredOptions(normalizeOptions2(options2));
                 setShowDropdown(true);
               }
             },
             onClick: () => {
               if (mode !== "type") {
-                setFilteredOptions(normalizeOptions(options2));
+                setFilteredOptions(normalizeOptions2(options2));
                 setShowDropdown(true);
               }
             },
@@ -28535,6 +29277,11 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
     const [showPassword, setShowPassword] = React.useState(false);
     const [amountInWords, setAmountInWords] = React.useState("");
     const [enable, setEnable] = React.useState(true);
+    React.useEffect(() => {
+      if (value) {
+        validate(value);
+      }
+    }, [value]);
     console.log(enable);
     const validate = (val) => {
       const raw = category === "amount" ? removeCommas(val) : val;
@@ -28572,7 +29319,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
           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":
@@ -28758,7 +29505,6 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
     const handleChange = (e) => {
       let val;
       if (category == "mobile") {
-        alert(val.length);
         console.log(e);
         val = e;
         validate(val);
@@ -30384,13 +31130,511 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
           ))
         }
       ) }),
-      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 = (options2, labelKey, valueKey) => {
+    return options2.map((opt) => ({
+      label: opt[labelKey],
+      value: opt[valueKey],
+      raw: opt
+    }));
+  };
+  const PowerDropdown = ({
+    label,
+    options: options2 = [],
+    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", options2);
+    console.log("columnWidths", columnWidths);
+    const [inputVal, setInputVal] = React.useState("");
+    console.log("inputVal", inputVal);
+    const [dropdownOpen, setDropdownOpen] = React.useState(false);
+    const [focusedIndex, setFocusedIndex] = React.useState(-1);
+    const [suggestion, setSuggestion] = React.useState("");
+    const [isInputFocused, setIsInputFocused] = React.useState(false);
+    const [lastSelectedItem, setLastSelectedItem] = React.useState(null);
+    const [localOptions, setLocalOptions] = React.useState(
+      () => normalizeOptions(options2, optionLabelKey, optionValueKey)
+    );
+    const [showAddModal, setShowAddModal] = React.useState(false);
+    const empDataFromDB = Object.keys(options2[0]).reduce((acc, curr) => {
+      return { ...acc, [curr]: "" };
+    }, {});
+    const [newEmployee, setNewEmployee] = React.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);
+    };
+    React.useRef(null);
+    const dropdownRef = React.useRef(null);
+    const normalizedOptions = React.useMemo(
+      () => normalizeOptions(options2, optionLabelKey, optionValueKey),
+      [options2, optionLabelKey, optionValueKey]
+    );
+    const filteredOptions = React.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 (options2 && options2.length > 0) {
+        const firstItem = options2[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 = React.useMemo(() => generateColumns(), [options2, columnWidths]);
+    console.log("columns", columns);
+    React.useEffect(() => {
+      setInputVal((value == null ? void 0 : value[optionLabelKey]) || "");
+    }, [value, optionLabelKey]);
+    React.useEffect(() => {
+      if (!suggestion) {
+        setFocusedIndex(-1);
+        return;
+      }
+      const matchIndex = filteredOptions.findIndex(
+        (opt) => opt.label.toLowerCase() === suggestion.toLowerCase()
+      );
+      setFocusedIndex(matchIndex);
+    }, [suggestion, filteredOptions]);
+    React.useEffect(() => {
+      setLocalOptions(normalizeOptions(options2, optionLabelKey, optionValueKey));
+    }, [options2, 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(options2[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"
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        }
+      )
+    ] });
+  };
   exports2.MytekComboDropdown = ComboDropdown;
   exports2.MytekInputField = CustomInput;
   exports2.MytekLoader = Loader;
   exports2.MytekMessageBox = Mt_MessageBox;
+  exports2.MytekPowerCombo = PowerDropdown;
   exports2.MytekRadioButton = RadioButton;
   exports2.MytekTab = DynamicTabs;
   exports2.MytekTable = MasterTable;