@undefine-ui/design-system 3.6.2 → 3.7.1

package/dist/index.js

@@ -38,6 +38,7 @@ __export(index_exports, {
   CopyButton: () => CopyButton,
   CustomDialog: () => CustomDialog,
   CustomDrawer: () => CustomDrawer,
+  CustomFormLabel: () => CustomFormLabel,
   DateRangeDropdown: () => DateRangeDropdown,
   DateRangePicker: () => DateRangePicker,
   Download: () => Download,
@@ -5038,7 +5039,7 @@ var MuiSelect = {
    * DEFAULT PROPS
    *************************************** */
   defaultProps: {
-    IconComponent: () => /* @__PURE__ */ jsx56(Icon, { icon: "NavArrowDown", sx: { width: 18, height: 18, position: "absolute", right: 10 } })
+    IconComponent: () => /* @__PURE__ */ jsx56(Icon, { icon: "NavArrowDown", sx: { position: "absolute", right: 10 } })
   }
 };
 var MuiNativeSelect = {
@@ -5046,7 +5047,7 @@ var MuiNativeSelect = {
    * DEFAULT PROPS
    *************************************** */
   defaultProps: {
-    IconComponent: () => /* @__PURE__ */ jsx56(Icon, { icon: "NavArrowDown", sx: { width: 18, height: 18, position: "absolute", right: 10 } })
+    IconComponent: () => /* @__PURE__ */ jsx56(Icon, { icon: "NavArrowDown", sx: { position: "absolute", right: 10 } })
   }
 };
 var select = { MuiSelect, MuiNativeSelect };
@@ -6103,7 +6104,7 @@ var MuiTextField = {
         position: "relative",
         fontSize: `${theme.typography.h8.fontSize} !important`,
         fontWeight: `${theme.typography.fontWeightMedium} !important`,
-        marginBottom: theme.spacing(1),
+        marginBottom: theme.spacing(0.5),
         color: `${theme.vars.palette.icon.black} !important`,
         // Focused state
         "&:not(.Mui-error).MuiFormLabel-colorPrimary.Mui-focused": {
@@ -6171,19 +6172,27 @@ var MuiTextField = {
             borderColor: theme.vars.palette.surface.disable
           }
         },
-        // InputAdornment styling
+        // InputAdornment styling (target MuiInputAdornment only, not autocomplete endAdornment)
         [`&.${inputBaseClasses.adornedStart}, &.${inputBaseClasses.adornedEnd}`]: {
           color: theme.vars.palette.icon.black,
-          svg: {
+          [`& .${inputAdornmentClasses.root} svg`]: {
             width: 20,
             height: 20,
             color: theme.vars.palette.icon.black
-          },
-          [`& .${inputAdornmentClasses.sizeSmall}`]: {
-            svg: { width: 16, height: 16 }
-          },
-          [`& .MuiInputAdornment-sizeLarge`]: {
-            svg: { width: 24, height: 24 }
+          }
+        },
+        // Size small - 16x16 icons
+        [`&.${inputBaseClasses.sizeSmall}`]: {
+          [`& .${inputAdornmentClasses.root} svg`]: {
+            width: 16,
+            height: 16
+          }
+        },
+        // Size large - 24x24 icons
+        [`&.MuiInputBase-sizeLarge`]: {
+          [`& .${inputAdornmentClasses.root} svg`]: {
+            width: 24,
+            height: 24
           }
         },
         [`&.${inputBaseClasses.adornedStart}`]: {
@@ -6244,32 +6253,33 @@ var MuiTextField = {
           overflowX: "hidden"
         }
       },
-      // Autocomplete styling
-      [`& .${autocompleteClasses2.input}`]: {
-        paddingLeft: "6px !important",
-        paddingTop: "10px !important",
-        paddingBottom: "10px !important",
+      // Autocomplete styling - allow flexible height for multiple mode
+      [`& .${autocompleteClasses2.inputRoot}`]: {
+        height: "auto",
+        minHeight: 44,
         [`&.${inputBaseClasses.sizeSmall}`]: {
-          paddingLeft: "6px !important",
-          paddingTop: "2.5px !important",
-          paddingBottom: "2.5px !important"
+          minHeight: 36
+        },
+        [`&.MuiInputBase-sizeLarge`]: {
+          minHeight: 48
         }
       },
-      [`& .${autocompleteClasses2.inputRoot}`]: {
-        paddingTop: "15.5px !important",
-        paddingLeft: "8px !important",
-        paddingBottom: "15.5px !important",
-        "&:not(.MuiInputBase-sizeSmall).MuiInputBase-adornedStart": {
-          paddingLeft: "13px !important"
+      // Select icon sizing
+      [`& .MuiSelect-root`]: {
+        // Default medium size - 20x20 icons
+        "& svg": {
+          width: 20,
+          height: 20
         },
-        [`&.${inputBaseClasses.sizeSmall}`]: {
-          paddingTop: "7.5px !important",
-          paddingLeft: "5px !important",
-          paddingBottom: "7.5px !important",
-          "& .MuiAutocomplete-tag": {
-            margin: 2,
-            height: 22
-          }
+        // Size small - 16x16 icons
+        [`&.${inputBaseClasses.sizeSmall} svg`]: {
+          width: 16,
+          height: 16
+        },
+        // Size large - 24x24 icons
+        [`&.MuiInputBase-sizeLarge svg`]: {
+          width: 24,
+          height: 24
         }
       }
     })
@@ -6446,6 +6456,7 @@ __export(components_exports2, {
   CopyButton: () => CopyButton,
   CustomDialog: () => CustomDialog,
   CustomDrawer: () => CustomDrawer,
+  CustomFormLabel: () => CustomFormLabel,
   DateRangeDropdown: () => DateRangeDropdown,
   DateRangePicker: () => DateRangePicker,
   Download: () => Download,
@@ -10822,20 +10833,38 @@ var Field = {
   GooglePlacesAutocomplete: RHFGooglePlacesAutocomplete
 };
 
-// src/components/CopyButton/index.tsx
+// src/components/FormLabel/index.tsx
 import Tooltip from "@mui/material/Tooltip";
+import Typography14 from "@mui/material/Typography";
+import FormLabel4 from "@mui/material/FormLabel";
+import { jsx as jsx103, jsxs as jsxs64 } from "react/jsx-runtime";
+var CustomFormLabel = ({
+  label,
+  tooltip: tooltip2,
+  icon: icon2,
+  optional,
+  sx,
+  ...rest
+}) => /* @__PURE__ */ jsxs64(FormLabel4, { sx: { mb: 0.5, display: "flex", alignItems: "center", gap: 0.5, ...sx }, ...rest, children: [
+  label,
+  optional && /* @__PURE__ */ jsx103(Typography14, { component: "span", variant: "caption", color: "text.secondary", children: "(Optional)" }),
+  tooltip2 && /* @__PURE__ */ jsx103(Tooltip, { placement: "right", title: tooltip2, children: /* @__PURE__ */ jsx103("span", { style: { display: "inline-flex" }, children: icon2 ?? /* @__PURE__ */ jsx103(Icon, { icon: "InfoCircle", sx: { width: 16, height: 16, color: "icons.black" } }) }) })
+] });
+
+// src/components/CopyButton/index.tsx
+import Tooltip2 from "@mui/material/Tooltip";
 import IconButton6 from "@mui/material/IconButton";
-import { jsx as jsx103 } from "react/jsx-runtime";
+import { jsx as jsx104 } from "react/jsx-runtime";
 var CopyButton = ({ text: text2, size = "small" }) => {
   const { copy, isCopied } = useCopyToClipboard();
-  return /* @__PURE__ */ jsx103(Tooltip, { title: isCopied ? "Copied" : "Copy", children: /* @__PURE__ */ jsx103(
+  return /* @__PURE__ */ jsx104(Tooltip2, { title: isCopied ? "Copied" : "Copy", children: /* @__PURE__ */ jsx104(
     IconButton6,
     {
       size,
       onClick: () => copy(text2),
       "aria-label": "copy token",
       sx: { color: "icon.black" },
-      children: /* @__PURE__ */ jsx103(Icon, { icon: isCopied ? "ClipboardCheck" : "Copy", sx: { width: 20, height: 20 } })
+      children: /* @__PURE__ */ jsx104(Icon, { icon: isCopied ? "ClipboardCheck" : "Copy", sx: { width: 20, height: 20 } })
     }
   ) });
 };
@@ -10844,9 +10873,9 @@ var CopyButton = ({ text: text2, size = "small" }) => {
 import Portal2 from "@mui/material/Portal";
 import Box25 from "@mui/material/Box";
 import LinearProgress from "@mui/material/LinearProgress";
-import { jsx as jsx104 } from "react/jsx-runtime";
+import { jsx as jsx105 } from "react/jsx-runtime";
 var LoadingScreen = ({ portal, sx, ...rest }) => {
-  const content = /* @__PURE__ */ jsx104(
+  const content = /* @__PURE__ */ jsx105(
     Box25,
     {
       sx: {
@@ -10860,16 +10889,16 @@ var LoadingScreen = ({ portal, sx, ...rest }) => {
         ...sx
       },
       ...rest,
-      children: /* @__PURE__ */ jsx104(LinearProgress, { color: "primary", sx: { width: 1, maxWidth: 360 } })
+      children: /* @__PURE__ */ jsx105(LinearProgress, { color: "primary", sx: { width: 1, maxWidth: 360 } })
     }
   );
   if (portal) {
-    return /* @__PURE__ */ jsx104(Portal2, { children: content });
+    return /* @__PURE__ */ jsx105(Portal2, { children: content });
   }
   return content;
 };
 var SplashScreen = ({ portal, sx, ...rest }) => {
-  const content = /* @__PURE__ */ jsx104(
+  const content = /* @__PURE__ */ jsx105(
     Box25,
     {
       sx: {
@@ -10886,17 +10915,17 @@ var SplashScreen = ({ portal, sx, ...rest }) => {
         ...sx
       },
       ...rest,
-      children: /* @__PURE__ */ jsx104(AnimatedLogo, {})
+      children: /* @__PURE__ */ jsx105(AnimatedLogo, {})
     }
   );
   if (portal) {
-    return /* @__PURE__ */ jsx104(Portal2, { children: content });
+    return /* @__PURE__ */ jsx105(Portal2, { children: content });
   }
   return content;
 };
 
 // src/theme/core/components/mui-x-data-grid.tsx
-import { jsx as jsx105, jsxs as jsxs64 } from "react/jsx-runtime";
+import { jsx as jsx106, jsxs as jsxs65 } from "react/jsx-runtime";
 var MuiDataGrid = {
   /** **************************************
    * DEFAULT PROPS
@@ -10904,9 +10933,9 @@ var MuiDataGrid = {
   defaultProps: {
     slots: {
       /* Column */
-      columnSortedAscendingIcon: (props) => /* @__PURE__ */ jsx105(DataGridArrowUpIcon, { sx: { color: "text.primary" }, ...props }),
-      columnSortedDescendingIcon: (props) => /* @__PURE__ */ jsx105(DataGridArrowDownIcon, { sx: { color: "text.primary" }, ...props }),
-      columnUnsortedIcon: (props) => /* @__PURE__ */ jsx105(
+      columnSortedAscendingIcon: (props) => /* @__PURE__ */ jsx106(DataGridArrowUpIcon, { sx: { color: "text.primary" }, ...props }),
+      columnSortedDescendingIcon: (props) => /* @__PURE__ */ jsx106(DataGridArrowDownIcon, { sx: { color: "text.primary" }, ...props }),
+      columnUnsortedIcon: (props) => /* @__PURE__ */ jsx106(
         DataGridArrowUpIcon,
         {
           fontSize: props.fontSize,
@@ -10914,28 +10943,28 @@ var MuiDataGrid = {
           sx: { color: "text.disabled" }
         }
       ),
-      columnMenuIcon: (props) => /* @__PURE__ */ jsx105(DataGridMoreIcon, { width: 20, ...props }),
-      columnMenuSortAscendingIcon: (props) => /* @__PURE__ */ jsx105(DataGridArrowUpIcon, { ...props }),
-      columnMenuSortDescendingIcon: (props) => /* @__PURE__ */ jsx105(DataGridArrowDownIcon, { ...props }),
-      columnMenuFilterIcon: (props) => /* @__PURE__ */ jsx105(DataGridFilterIcon, { ...props }),
-      columnMenuHideIcon: (props) => /* @__PURE__ */ jsx105(DataGridEyeCloseIcon, { ...props }),
-      columnMenuManageColumnsIcon: (props) => /* @__PURE__ */ jsx105(DataGridEyeIcon, { ...props }),
-      columnSelectorIcon: (props) => /* @__PURE__ */ jsx105(DataGridEyeIcon, { ...props }),
+      columnMenuIcon: (props) => /* @__PURE__ */ jsx106(DataGridMoreIcon, { width: 20, ...props }),
+      columnMenuSortAscendingIcon: (props) => /* @__PURE__ */ jsx106(DataGridArrowUpIcon, { ...props }),
+      columnMenuSortDescendingIcon: (props) => /* @__PURE__ */ jsx106(DataGridArrowDownIcon, { ...props }),
+      columnMenuFilterIcon: (props) => /* @__PURE__ */ jsx106(DataGridFilterIcon, { ...props }),
+      columnMenuHideIcon: (props) => /* @__PURE__ */ jsx106(DataGridEyeCloseIcon, { ...props }),
+      columnMenuManageColumnsIcon: (props) => /* @__PURE__ */ jsx106(DataGridEyeIcon, { ...props }),
+      columnSelectorIcon: (props) => /* @__PURE__ */ jsx106(DataGridEyeIcon, { ...props }),
       /* Filter */
-      filterPanelDeleteIcon: (props) => /* @__PURE__ */ jsx105(DataGridCloseIcon, { ...props }),
-      openFilterButtonIcon: (props) => /* @__PURE__ */ jsx105(DataGridFilterIcon, { ...props }),
-      columnFilteredIcon: (props) => /* @__PURE__ */ jsx105(DataGridFilterIcon, { sx: { width: 16, color: "text.primary" }, ...props }),
+      filterPanelDeleteIcon: (props) => /* @__PURE__ */ jsx106(DataGridCloseIcon, { ...props }),
+      openFilterButtonIcon: (props) => /* @__PURE__ */ jsx106(DataGridFilterIcon, { ...props }),
+      columnFilteredIcon: (props) => /* @__PURE__ */ jsx106(DataGridFilterIcon, { sx: { width: 16, color: "text.primary" }, ...props }),
       /* Density */
-      densityCompactIcon: (props) => /* @__PURE__ */ jsx105(DataGridDensityCompactIcon, { ...props }),
-      densityStandardIcon: (props) => /* @__PURE__ */ jsx105(DataGridDensityStandardIcon, { ...props }),
-      densityComfortableIcon: (props) => /* @__PURE__ */ jsx105(DataGridDensityComfortableIcon, { ...props }),
+      densityCompactIcon: (props) => /* @__PURE__ */ jsx106(DataGridDensityCompactIcon, { ...props }),
+      densityStandardIcon: (props) => /* @__PURE__ */ jsx106(DataGridDensityStandardIcon, { ...props }),
+      densityComfortableIcon: (props) => /* @__PURE__ */ jsx106(DataGridDensityComfortableIcon, { ...props }),
       /* Export */
-      exportIcon: (props) => /* @__PURE__ */ jsx105(DataGridExportIcon, { ...props }),
+      exportIcon: (props) => /* @__PURE__ */ jsx106(DataGridExportIcon, { ...props }),
       /*  Quick Filter */
-      quickFilterIcon: (props) => /* @__PURE__ */ jsx105(DataGridSearchIcon, { sx: { width: 24, height: 24, color: "text.secondary" }, ...props }),
-      quickFilterClearIcon: (props) => /* @__PURE__ */ jsx105(DataGridCloseIcon, { ...props }),
+      quickFilterIcon: (props) => /* @__PURE__ */ jsx106(DataGridSearchIcon, { sx: { width: 24, height: 24, color: "text.secondary" }, ...props }),
+      quickFilterClearIcon: (props) => /* @__PURE__ */ jsx106(DataGridCloseIcon, { ...props }),
       /* Actions Column */
-      moreActionsIcon: (props) => /* @__PURE__ */ jsx105(Icon, { icon: "MoreHorizontal", sx: { width: 20, height: 20 }, ...props })
+      moreActionsIcon: (props) => /* @__PURE__ */ jsx106(Icon, { icon: "MoreHorizontal", sx: { width: 20, height: 20 }, ...props })
     },
     slotProps: {
       basePopper: { placement: "bottom-end" },
@@ -11112,15 +11141,15 @@ var MuiDataGrid = {
   }
 };
 var dataGrid = { MuiDataGrid };
-var DataGridArrowUpIcon = ({ ...props }) => /* @__PURE__ */ jsxs64(SvgIcon3, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: [
-  /* @__PURE__ */ jsx105(
+var DataGridArrowUpIcon = ({ ...props }) => /* @__PURE__ */ jsxs65(SvgIcon3, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: [
+  /* @__PURE__ */ jsx106(
     "path",
     {
       fill: "currentColor",
       d: "m8.303 11.596l3.327-3.431a.499.499 0 0 1 .74 0l6.43 6.63c.401.414.158 1.205-.37 1.205h-5.723z"
     }
   ),
-  /* @__PURE__ */ jsx105(
+  /* @__PURE__ */ jsx106(
     "path",
     {
       fill: "currentColor",
@@ -11129,15 +11158,15 @@ var DataGridArrowUpIcon = ({ ...props }) => /* @__PURE__ */ jsxs64(SvgIcon3, { s
     }
   )
 ] });
-var DataGridArrowDownIcon = ({ ...props }) => /* @__PURE__ */ jsxs64(SvgIcon3, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: [
-  /* @__PURE__ */ jsx105(
+var DataGridArrowDownIcon = ({ ...props }) => /* @__PURE__ */ jsxs65(SvgIcon3, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: [
+  /* @__PURE__ */ jsx106(
     "path",
     {
       fill: "currentColor",
       d: "m8.303 12.404l3.327 3.431c.213.22.527.22.74 0l6.43-6.63C19.201 8.79 18.958 8 18.43 8h-5.723z"
     }
   ),
-  /* @__PURE__ */ jsx105(
+  /* @__PURE__ */ jsx106(
     "path",
     {
       fill: "currentColor",
@@ -11146,15 +11175,15 @@ var DataGridArrowDownIcon = ({ ...props }) => /* @__PURE__ */ jsxs64(SvgIcon3, {
     }
   )
 ] });
-var DataGridFilterIcon = ({ ...props }) => /* @__PURE__ */ jsx105(SvgIcon3, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ jsx105(
+var DataGridFilterIcon = ({ ...props }) => /* @__PURE__ */ jsx106(SvgIcon3, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ jsx106(
   "path",
   {
     fill: "currentColor",
     d: "M19 3H5c-1.414 0-2.121 0-2.56.412C2 3.824 2 4.488 2 5.815v.69c0 1.037 0 1.556.26 1.986c.26.43.733.698 1.682 1.232l2.913 1.64c.636.358.955.537 1.183.735c.474.411.766.895.898 1.49c.064.284.064.618.064 1.285v2.67c0 .909 0 1.364.252 1.718c.252.355.7.53 1.594.88c1.879.734 2.818 1.101 3.486.683c.668-.417.668-1.372.668-3.282v-2.67c0-.666 0-1 .064-1.285a2.68 2.68 0 0 1 .899-1.49c.227-.197.546-.376 1.182-.735l2.913-1.64c.948-.533 1.423-.8 1.682-1.23c.26-.43.26-.95.26-1.988v-.69c0-1.326 0-1.99-.44-2.402C21.122 3 20.415 3 19 3"
   }
 ) });
-var DataGridExportIcon = ({ ...props }) => /* @__PURE__ */ jsxs64(SvgIcon3, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: [
-  /* @__PURE__ */ jsx105(
+var DataGridExportIcon = ({ ...props }) => /* @__PURE__ */ jsxs65(SvgIcon3, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: [
+  /* @__PURE__ */ jsx106(
     "path",
     {
       fill: "currentColor",
@@ -11163,7 +11192,7 @@ var DataGridExportIcon = ({ ...props }) => /* @__PURE__ */ jsxs64(SvgIcon3, { sx
       clipRule: "evenodd"
     }
   ),
-  /* @__PURE__ */ jsx105(
+  /* @__PURE__ */ jsx106(
     "path",
     {
       fill: "currentColor",
@@ -11171,9 +11200,9 @@ var DataGridExportIcon = ({ ...props }) => /* @__PURE__ */ jsxs64(SvgIcon3, { sx
     }
   )
 ] });
-var DataGridEyeIcon = ({ ...props }) => /* @__PURE__ */ jsxs64(SvgIcon3, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: [
-  /* @__PURE__ */ jsx105("path", { fill: "currentColor", d: "M9.75 12a2.25 2.25 0 1 1 4.5 0a2.25 2.25 0 0 1-4.5 0" }),
-  /* @__PURE__ */ jsx105(
+var DataGridEyeIcon = ({ ...props }) => /* @__PURE__ */ jsxs65(SvgIcon3, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: [
+  /* @__PURE__ */ jsx106("path", { fill: "currentColor", d: "M9.75 12a2.25 2.25 0 1 1 4.5 0a2.25 2.25 0 0 1-4.5 0" }),
+  /* @__PURE__ */ jsx106(
     "path",
     {
       fill: "currentColor",
@@ -11183,7 +11212,7 @@ var DataGridEyeIcon = ({ ...props }) => /* @__PURE__ */ jsxs64(SvgIcon3, { sx: {
     }
   )
 ] });
-var DataGridEyeCloseIcon = ({ ...props }) => /* @__PURE__ */ jsx105(SvgIcon3, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ jsx105(
+var DataGridEyeCloseIcon = ({ ...props }) => /* @__PURE__ */ jsx106(SvgIcon3, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ jsx106(
   "path",
   {
     fill: "currentColor",
@@ -11192,23 +11221,23 @@ var DataGridEyeCloseIcon = ({ ...props }) => /* @__PURE__ */ jsx105(SvgIcon3, {
     clipRule: "evenodd"
   }
 ) });
-var DataGridSearchIcon = ({ ...props }) => /* @__PURE__ */ jsx105(SvgIcon3, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ jsx105(
+var DataGridSearchIcon = ({ ...props }) => /* @__PURE__ */ jsx106(SvgIcon3, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ jsx106(
   "path",
   {
     fill: "currentColor",
     d: "m20.71 19.29l-3.4-3.39A7.92 7.92 0 0 0 19 11a8 8 0 1 0-8 8a7.92 7.92 0 0 0 4.9-1.69l3.39 3.4a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42M5 11a6 6 0 1 1 6 6a6 6 0 0 1-6-6"
   }
 ) });
-var DataGridCloseIcon = ({ ...props }) => /* @__PURE__ */ jsx105(SvgIcon3, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ jsx105(
+var DataGridCloseIcon = ({ ...props }) => /* @__PURE__ */ jsx106(SvgIcon3, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ jsx106(
   "path",
   {
     fill: "currentColor",
     d: "m13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29l-4.3 4.29a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l4.29-4.3l4.29 4.3a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42Z"
   }
 ) });
-var DataGridMoreIcon = ({ ...props }) => /* @__PURE__ */ jsx105(SvgIcon3, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ jsxs64("g", { fill: "none", children: [
-  /* @__PURE__ */ jsx105("path", { d: "M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" }),
-  /* @__PURE__ */ jsx105(
+var DataGridMoreIcon = ({ ...props }) => /* @__PURE__ */ jsx106(SvgIcon3, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ jsxs65("g", { fill: "none", children: [
+  /* @__PURE__ */ jsx106("path", { d: "M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" }),
+  /* @__PURE__ */ jsx106(
     "path",
     {
       fill: "currentColor",
@@ -11216,16 +11245,16 @@ var DataGridMoreIcon = ({ ...props }) => /* @__PURE__ */ jsx105(SvgIcon3, { sx:
     }
   )
 ] }) });
-var DataGridDensityCompactIcon = ({ ...props }) => /* @__PURE__ */ jsx105(SvgIcon3, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ jsx105(
+var DataGridDensityCompactIcon = ({ ...props }) => /* @__PURE__ */ jsx106(SvgIcon3, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ jsx106(
   "path",
   {
     fill: "currentColor",
     d: "M4 15.5q-.425 0-.712-.288T3 14.5V14q0-.425.288-.712T4 13h16q.425 0 .713.288T21 14v.5q0 .425-.288.713T20 15.5zM4 11q-.425 0-.712-.288T3 10v-.5q0-.425.288-.712T4 8.5h16q.425 0 .713.288T21 9.5v.5q0 .425-.288.713T20 11zm0-4.5q-.425 0-.712-.288T3 5.5V5q0-.425.288-.712T4 4h16q.425 0 .713.288T21 5v.5q0 .425-.288.713T20 6.5zM4 20q-.425 0-.712-.288T3 19v-.5q0-.425.288-.712T4 17.5h16q.425 0 .713.288T21 18.5v.5q0 .425-.288.713T20 20z"
   }
 ) });
-var DataGridDensityComfortableIcon = ({ ...props }) => /* @__PURE__ */ jsx105(SvgIcon3, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ jsxs64("g", { fill: "none", fillRule: "evenodd", children: [
-  /* @__PURE__ */ jsx105("path", { d: "M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" }),
-  /* @__PURE__ */ jsx105(
+var DataGridDensityComfortableIcon = ({ ...props }) => /* @__PURE__ */ jsx106(SvgIcon3, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ jsxs65("g", { fill: "none", fillRule: "evenodd", children: [
+  /* @__PURE__ */ jsx106("path", { d: "M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" }),
+  /* @__PURE__ */ jsx106(
     "path",
     {
       fill: "currentColor",
@@ -11233,9 +11262,9 @@ var DataGridDensityComfortableIcon = ({ ...props }) => /* @__PURE__ */ jsx105(Sv
     }
   )
 ] }) });
-var DataGridDensityStandardIcon = ({ ...props }) => /* @__PURE__ */ jsx105(SvgIcon3, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ jsxs64("g", { fill: "none", children: [
-  /* @__PURE__ */ jsx105("path", { d: "M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" }),
-  /* @__PURE__ */ jsx105(
+var DataGridDensityStandardIcon = ({ ...props }) => /* @__PURE__ */ jsx106(SvgIcon3, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ jsxs65("g", { fill: "none", children: [
+  /* @__PURE__ */ jsx106("path", { d: "M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" }),
+  /* @__PURE__ */ jsx106(
     "path",
     {
       fill: "currentColor",
@@ -11393,19 +11422,24 @@ var MuiButtonGroup = {
 var buttonGroup = { MuiButtonGroup };
 
 // src/theme/core/components/autocomplete.tsx
-import { svgIconClasses as svgIconClasses3 } from "@mui/material/SvgIcon";
+import { chipClasses as chipClasses2 } from "@mui/material/Chip";
+import { inputBaseClasses as inputBaseClasses4 } from "@mui/material/InputBase";
 import { autocompleteClasses as autocompleteClasses3 } from "@mui/material/Autocomplete";
-import { jsx as jsx106 } from "react/jsx-runtime";
+import { jsx as jsx107 } from "react/jsx-runtime";
 var MuiAutocomplete = {
   /** **************************************
    * DEFAULT PROPS
    *************************************** */
-  defaultProps: { popupIcon: /* @__PURE__ */ jsx106(Icon, { icon: "NavArrowDown" }) },
+  defaultProps: {
+    popupIcon: /* @__PURE__ */ jsx107(Icon, { icon: "NavArrowDown" }),
+    forcePopupIcon: true
+  },
   /** **************************************
    * STYLE
    *************************************** */
   styleOverrides: {
-    root: ({ theme }) => ({
+    root: ({ theme, ownerState }) => ({
+      // Tag count badge (e.g., "+2")
       [`& span.${autocompleteClasses3.tag}`]: {
         ...theme.typography.subtitle2,
         height: 24,
@@ -11413,9 +11447,80 @@ var MuiAutocomplete = {
         lineHeight: "24px",
         textAlign: "center",
         padding: theme.spacing(0, 0.75),
-        color: theme.vars.palette.text.secondary,
-        borderRadius: theme.shape.borderRadius,
-        backgroundColor: varAlpha(theme.vars.palette.grey["500Channel"], 0.16)
+        color: theme.vars.palette.neutral[950],
+        borderRadius: theme.radius["radius-sm"],
+        backgroundColor: theme.vars.palette.neutral[100]
+      },
+      // Chip tags in multiple mode
+      [`& .${autocompleteClasses3.tag}.${chipClasses2.root}`]: {
+        height: 26,
+        margin: theme.spacing(0.5, 0.5, 0.5, 0),
+        fontSize: theme.typography.caption.fontSize,
+        fontWeight: theme.typography.fontWeightMedium,
+        color: theme.vars.palette.neutral[950],
+        backgroundColor: theme.vars.palette.neutral[100]
+      },
+      // Default medium size - 20x20 end adornment icons
+      [`& .${autocompleteClasses3.endAdornment} svg`]: {
+        width: 20,
+        height: 20
+      },
+      // Size small - 16x16 end adornment icons
+      ...ownerState.size === "small" && {
+        [`& .${autocompleteClasses3.endAdornment} svg`]: {
+          width: 16,
+          height: 16
+        }
+      },
+      // Size large - 24x24 end adornment icons
+      ...ownerState.size === "large" && {
+        [`& .${autocompleteClasses3.endAdornment} svg`]: {
+          width: 24,
+          height: 24
+        }
+      }
+    }),
+    // Input root - override fixed heights for multiple mode
+    inputRoot: ({ theme, ownerState }) => ({
+      // Allow flexible height for multiple selections
+      height: "auto",
+      minHeight: 44,
+      flexWrap: "wrap",
+      alignItems: "center",
+      paddingTop: theme.spacing(0),
+      paddingBottom: theme.spacing(0),
+      paddingLeft: theme.spacing(1),
+      paddingRight: `${theme.spacing(4)} !important`,
+      // Space for clear/popup icons
+      // Size small
+      ...ownerState.size === "small" && {
+        minHeight: 36,
+        [`& .${autocompleteClasses3.tag}.${chipClasses2.root}`]: {
+          height: 22,
+          margin: theme.spacing(0.25, 0.25, 0.25, 0)
+        }
+      },
+      // Size large
+      ...ownerState.size === "large" && {
+        minHeight: 48,
+        paddingTop: theme.spacing(1),
+        paddingBottom: theme.spacing(1),
+        [`& .${autocompleteClasses3.tag}.${chipClasses2.root}`]: {
+          height: 28,
+          margin: theme.spacing(0.5, 0.5, 0.5, 0)
+        }
+      },
+      // Adornment adjustments
+      [`&.${inputBaseClasses4.adornedStart}`]: {
+        paddingLeft: theme.spacing(1.5)
+      }
+    }),
+    // Input field inside autocomplete
+    input: ({ theme }) => ({
+      padding: `${theme.spacing(0.75, 0.75)} !important`,
+      minWidth: 80,
+      [`&.${inputBaseClasses4.sizeSmall}`]: {
+        padding: `${theme.spacing(0.5, 0.5)} !important`
       }
     }),
     paper: ({ theme }) => ({
@@ -11427,7 +11532,14 @@ var MuiAutocomplete = {
         ...menuItem(theme)
       }
     }),
-    endAdornment: { [`& .${svgIconClasses3.root}`]: { width: 24, height: 24 } }
+    endAdornment: ({ theme }) => ({
+      top: "50%",
+      transform: "translateY(-50%)",
+      right: theme.spacing(1)
+    }),
+    clearIndicator: ({ theme }) => ({
+      marginRight: theme.spacing(0.5)
+    })
   }
 };
 var autocomplete = { MuiAutocomplete };
@@ -11525,11 +11637,11 @@ var toggleButton = { MuiToggleButton, MuiToggleButtonGroup };
 
 // src/theme/core/components/mui-x-date-picker.tsx
 import IconButton7 from "@mui/material/IconButton";
-import Typography14 from "@mui/material/Typography";
+import Typography15 from "@mui/material/Typography";
 import { buttonClasses as buttonClasses3 } from "@mui/material/Button";
 import { styled as styled3 } from "@mui/material/styles";
 import { dialogActionsClasses } from "@mui/material/DialogActions";
-import { jsx as jsx107, jsxs as jsxs65 } from "react/jsx-runtime";
+import { jsx as jsx108, jsxs as jsxs66 } from "react/jsx-runtime";
 var CustomCalendarHeaderRoot = styled3("div")(({ theme }) => ({
   display: "flex",
   justifyContent: "space-between",
@@ -11567,10 +11679,10 @@ function CustomCalendarHeader(props) {
       onViewChange("year");
     }
   };
-  return /* @__PURE__ */ jsxs65(CustomCalendarHeaderRoot, { children: [
-    /* @__PURE__ */ jsx107(CustomIconButton, { onClick: selectPreviousMonth, title: "Previous month", size: "small", children: /* @__PURE__ */ jsx107(Icon, { icon: "NavArrowLeft", width: 16 }) }),
-    /* @__PURE__ */ jsx107(
-      Typography14,
+  return /* @__PURE__ */ jsxs66(CustomCalendarHeaderRoot, { children: [
+    /* @__PURE__ */ jsx108(CustomIconButton, { onClick: selectPreviousMonth, title: "Previous month", size: "small", children: /* @__PURE__ */ jsx108(Icon, { icon: "NavArrowLeft", width: 16 }) }),
+    /* @__PURE__ */ jsx108(
+      Typography15,
       {
         variant: "subtitle1",
         onClick: handleLabelClick,
@@ -11584,7 +11696,7 @@ function CustomCalendarHeader(props) {
         children: monthLabel
       }
     ),
-    /* @__PURE__ */ jsx107(CustomIconButton, { onClick: selectNextMonth, title: "Next month", size: "small", children: /* @__PURE__ */ jsx107(Icon, { icon: "NavArrowRight", width: 16 }) })
+    /* @__PURE__ */ jsx108(CustomIconButton, { onClick: selectNextMonth, title: "Next month", size: "small", children: /* @__PURE__ */ jsx108(Icon, { icon: "NavArrowRight", width: 16 }) })
   ] });
 }
 var localeText = {
@@ -11592,13 +11704,13 @@ var localeText = {
 };
 var defaultProps = {
   date: {
-    openPickerIcon: () => /* @__PURE__ */ jsx107(Icon, { icon: "Calendar", sx: { width: 20, height: 20 } }),
+    openPickerIcon: () => /* @__PURE__ */ jsx108(Icon, { icon: "Calendar", sx: { width: 20, height: 20 } }),
     calendarHeader: CustomCalendarHeader
   },
   time: {
-    openPickerIcon: () => /* @__PURE__ */ jsx107(Icon, { icon: "Clock", sx: { width: 20, height: 20 } }),
-    rightArrowIcon: () => /* @__PURE__ */ jsx107(Icon, { icon: "NavArrowRight" }),
-    switchViewIcon: () => /* @__PURE__ */ jsx107(Icon, { icon: "NavArrowDownSolid" })
+    openPickerIcon: () => /* @__PURE__ */ jsx108(Icon, { icon: "Clock", sx: { width: 20, height: 20 } }),
+    rightArrowIcon: () => /* @__PURE__ */ jsx108(Icon, { icon: "NavArrowRight" }),
+    switchViewIcon: () => /* @__PURE__ */ jsx108(Icon, { icon: "NavArrowDownSolid" })
   }
 };
 var dateViews = ["year", "month", "day"];
@@ -12029,18 +12141,18 @@ import "@fontsource/geist/500.css";
 import "@fontsource/geist/600.css";
 import "@fontsource/geist/700.css";
 import "./satoshi-4X3TX4PE.css";
-import { jsx as jsx108, jsxs as jsxs66 } from "react/jsx-runtime";
+import { jsx as jsx109, jsxs as jsxs67 } from "react/jsx-runtime";
 var ThemeProvider = ({ children }) => {
   const settings = useSettings();
   const theme = createTheme(settings);
-  return /* @__PURE__ */ jsxs66(
+  return /* @__PURE__ */ jsxs67(
     MuiThemeProvider,
     {
       theme,
       defaultMode: schemeConfig.defaultMode,
       modeStorageKey: schemeConfig.modeStorageKey,
       children: [
-        /* @__PURE__ */ jsx108(CssBaseline, {}),
+        /* @__PURE__ */ jsx109(CssBaseline, {}),
         children
       ]
     }
@@ -12069,6 +12181,7 @@ export {
   CopyButton,
   CustomDialog,
   CustomDrawer,
+  CustomFormLabel,
   DateRangeDropdown,
   DateRangePicker,
   Download,