@undefine-ui/design-system 3.6.2 → 3.7.0

package/README.md

@@ -62,6 +62,7 @@ const ThemeSwitcher = () => {
 ```tsx
 import {
   CopyButton,
+  CustomFormLabel,
   Field,
   Form,
   Icon,
@@ -813,6 +814,65 @@ import { OTPInput, Field } from '@undefine-ui/design-system';
 
 The `Field.OTP` component automatically integrates with React Hook Form, providing validation and error handling out of the box.
 
+### FormLabel
+
+A custom form label component with support for optional text, tooltips, and custom icons. Perfect for creating consistent form field labels across your application.
+
+**Usage:**
+
+```tsx
+import { CustomFormLabel } from '@undefine-ui/design-system';
+
+// Basic label
+<CustomFormLabel label="Email Address" />
+
+// Optional field label
+<CustomFormLabel label="Phone Number" optional />
+
+// With tooltip
+<CustomFormLabel
+  label="API Key"
+  tooltip="Your API key can be found in the developer settings."
+/>
+
+// Optional with tooltip
+<CustomFormLabel
+  label="Company Name"
+  optional
+  tooltip="Enter your company name if applicable."
+/>
+
+// With custom icon
+<CustomFormLabel
+  label="Password"
+  tooltip="Password must be at least 8 characters long."
+  icon={<Icon icon="HelpCircle" sx={{ width: 16, height: 16, color: 'primary.main' }} />}
+/>
+
+// Complete form example
+<Box>
+  <CustomFormLabel label="Full Name" />
+  <TextField fullWidth placeholder="Enter your full name" size="small" />
+</Box>
+```
+
+**Props:**
+
+- `label` - Label text to display (required)
+- `optional` - Show "(Optional)" text after label (default: `false`)
+- `tooltip` - Tooltip text shown on hover of info icon
+- `icon` - Custom icon for tooltip (default: `InfoCircle` icon)
+- `sx` - MUI sx prop for styling
+- All MUI `FormLabelProps` are supported (except `children`)
+
+**Features:**
+
+- **Optional indicator:** Shows "(Optional)" text for non-required fields
+- **Tooltip support:** Info icon with tooltip for additional context
+- **Custom icons:** Replace default info icon with custom icons
+- **Flexible styling:** Supports all MUI FormLabel props and sx styling
+- **Theme integration:** Uses theme variables for consistent styling
+
 ### Dialog
 
 Custom dialog components with close button and feedback variations. Includes a base `CustomDialog` with a close button positioned on the right, and a `FeedbackDialog` for success, error, and confirmation states.

package/dist/index.cjs

@@ -50,6 +50,7 @@ __export(index_exports, {
   CopyButton: () => CopyButton,
   CustomDialog: () => CustomDialog,
   CustomDrawer: () => CustomDrawer,
+  CustomFormLabel: () => CustomFormLabel,
   DateRangeDropdown: () => DateRangeDropdown,
   DateRangePicker: () => DateRangePicker,
   Download: () => Download,
@@ -6116,7 +6117,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": {
@@ -6257,32 +6258,15 @@ var MuiTextField = {
           overflowX: "hidden"
         }
       },
-      // Autocomplete styling
-      [`& .${import_Autocomplete2.autocompleteClasses.input}`]: {
-        paddingLeft: "6px !important",
-        paddingTop: "10px !important",
-        paddingBottom: "10px !important",
-        [`&.${import_InputBase.inputBaseClasses.sizeSmall}`]: {
-          paddingLeft: "6px !important",
-          paddingTop: "2.5px !important",
-          paddingBottom: "2.5px !important"
-        }
-      },
+      // Autocomplete styling - allow flexible height for multiple mode
       [`& .${import_Autocomplete2.autocompleteClasses.inputRoot}`]: {
-        paddingTop: "15.5px !important",
-        paddingLeft: "8px !important",
-        paddingBottom: "15.5px !important",
-        "&:not(.MuiInputBase-sizeSmall).MuiInputBase-adornedStart": {
-          paddingLeft: "13px !important"
-        },
+        height: "auto",
+        minHeight: 44,
         [`&.${import_InputBase.inputBaseClasses.sizeSmall}`]: {
-          paddingTop: "7.5px !important",
-          paddingLeft: "5px !important",
-          paddingBottom: "7.5px !important",
-          "& .MuiAutocomplete-tag": {
-            margin: 2,
-            height: 22
-          }
+          minHeight: 36
+        },
+        [`&.MuiInputBase-sizeLarge`]: {
+          minHeight: 48
         }
       }
     })
@@ -6459,6 +6443,7 @@ __export(components_exports2, {
   CopyButton: () => CopyButton,
   CustomDialog: () => CustomDialog,
   CustomDrawer: () => CustomDrawer,
+  CustomFormLabel: () => CustomFormLabel,
   DateRangeDropdown: () => DateRangeDropdown,
   DateRangePicker: () => DateRangePicker,
   Download: () => Download,
@@ -10811,20 +10796,38 @@ var Field = {
   GooglePlacesAutocomplete: RHFGooglePlacesAutocomplete
 };
 
-// src/components/CopyButton/index.tsx
+// src/components/FormLabel/index.tsx
 var import_Tooltip2 = __toESM(require("@mui/material/Tooltip"), 1);
-var import_IconButton6 = __toESM(require("@mui/material/IconButton"), 1);
+var import_Typography15 = __toESM(require("@mui/material/Typography"), 1);
+var import_FormLabel4 = __toESM(require("@mui/material/FormLabel"), 1);
 var import_jsx_runtime103 = require("react/jsx-runtime");
+var CustomFormLabel = ({
+  label,
+  tooltip: tooltip2,
+  icon: icon2,
+  optional,
+  sx,
+  ...rest
+}) => /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(import_FormLabel4.default, { sx: { mb: 0.5, display: "flex", alignItems: "center", gap: 0.5, ...sx }, ...rest, children: [
+  label,
+  optional && /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_Typography15.default, { component: "span", variant: "caption", color: "text.secondary", children: "(Optional)" }),
+  tooltip2 && /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_Tooltip2.default, { placement: "right", title: tooltip2, children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("span", { style: { display: "inline-flex" }, children: icon2 ?? /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(Icon, { icon: "InfoCircle", sx: { width: 16, height: 16, color: "icons.black" } }) }) })
+] });
+
+// src/components/CopyButton/index.tsx
+var import_Tooltip3 = __toESM(require("@mui/material/Tooltip"), 1);
+var import_IconButton6 = __toESM(require("@mui/material/IconButton"), 1);
+var import_jsx_runtime104 = require("react/jsx-runtime");
 var CopyButton = ({ text: text2, size = "small" }) => {
   const { copy, isCopied } = useCopyToClipboard();
-  return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_Tooltip2.default, { title: isCopied ? "Copied" : "Copy", children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_Tooltip3.default, { title: isCopied ? "Copied" : "Copy", children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
     import_IconButton6.default,
     {
       size,
       onClick: () => copy(text2),
       "aria-label": "copy token",
       sx: { color: "icon.black" },
-      children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(Icon, { icon: isCopied ? "ClipboardCheck" : "Copy", sx: { width: 20, height: 20 } })
+      children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(Icon, { icon: isCopied ? "ClipboardCheck" : "Copy", sx: { width: 20, height: 20 } })
     }
   ) });
 };
@@ -10833,9 +10836,9 @@ var CopyButton = ({ text: text2, size = "small" }) => {
 var import_Portal2 = __toESM(require("@mui/material/Portal"), 1);
 var import_Box25 = __toESM(require("@mui/material/Box"), 1);
 var import_LinearProgress = __toESM(require("@mui/material/LinearProgress"), 1);
-var import_jsx_runtime104 = require("react/jsx-runtime");
+var import_jsx_runtime105 = require("react/jsx-runtime");
 var LoadingScreen = ({ portal, sx, ...rest }) => {
-  const content = /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+  const content = /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
     import_Box25.default,
     {
       sx: {
@@ -10849,16 +10852,16 @@ var LoadingScreen = ({ portal, sx, ...rest }) => {
         ...sx
       },
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_LinearProgress.default, { color: "primary", sx: { width: 1, maxWidth: 360 } })
+      children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_LinearProgress.default, { color: "primary", sx: { width: 1, maxWidth: 360 } })
     }
   );
   if (portal) {
-    return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_Portal2.default, { children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_Portal2.default, { children: content });
   }
   return content;
 };
 var SplashScreen = ({ portal, sx, ...rest }) => {
-  const content = /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+  const content = /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
     import_Box25.default,
     {
       sx: {
@@ -10875,17 +10878,17 @@ var SplashScreen = ({ portal, sx, ...rest }) => {
         ...sx
       },
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(AnimatedLogo, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(AnimatedLogo, {})
     }
   );
   if (portal) {
-    return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_Portal2.default, { children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_Portal2.default, { children: content });
   }
   return content;
 };
 
 // src/theme/core/components/mui-x-data-grid.tsx
-var import_jsx_runtime105 = require("react/jsx-runtime");
+var import_jsx_runtime106 = require("react/jsx-runtime");
 var MuiDataGrid = {
   /** **************************************
    * DEFAULT PROPS
@@ -10893,9 +10896,9 @@ var MuiDataGrid = {
   defaultProps: {
     slots: {
       /* Column */
-      columnSortedAscendingIcon: (props) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(DataGridArrowUpIcon, { sx: { color: "text.primary" }, ...props }),
-      columnSortedDescendingIcon: (props) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(DataGridArrowDownIcon, { sx: { color: "text.primary" }, ...props }),
-      columnUnsortedIcon: (props) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+      columnSortedAscendingIcon: (props) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(DataGridArrowUpIcon, { sx: { color: "text.primary" }, ...props }),
+      columnSortedDescendingIcon: (props) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(DataGridArrowDownIcon, { sx: { color: "text.primary" }, ...props }),
+      columnUnsortedIcon: (props) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
         DataGridArrowUpIcon,
         {
           fontSize: props.fontSize,
@@ -10903,28 +10906,28 @@ var MuiDataGrid = {
           sx: { color: "text.disabled" }
         }
       ),
-      columnMenuIcon: (props) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(DataGridMoreIcon, { width: 20, ...props }),
-      columnMenuSortAscendingIcon: (props) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(DataGridArrowUpIcon, { ...props }),
-      columnMenuSortDescendingIcon: (props) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(DataGridArrowDownIcon, { ...props }),
-      columnMenuFilterIcon: (props) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(DataGridFilterIcon, { ...props }),
-      columnMenuHideIcon: (props) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(DataGridEyeCloseIcon, { ...props }),
-      columnMenuManageColumnsIcon: (props) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(DataGridEyeIcon, { ...props }),
-      columnSelectorIcon: (props) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(DataGridEyeIcon, { ...props }),
+      columnMenuIcon: (props) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(DataGridMoreIcon, { width: 20, ...props }),
+      columnMenuSortAscendingIcon: (props) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(DataGridArrowUpIcon, { ...props }),
+      columnMenuSortDescendingIcon: (props) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(DataGridArrowDownIcon, { ...props }),
+      columnMenuFilterIcon: (props) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(DataGridFilterIcon, { ...props }),
+      columnMenuHideIcon: (props) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(DataGridEyeCloseIcon, { ...props }),
+      columnMenuManageColumnsIcon: (props) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(DataGridEyeIcon, { ...props }),
+      columnSelectorIcon: (props) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(DataGridEyeIcon, { ...props }),
       /* Filter */
-      filterPanelDeleteIcon: (props) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(DataGridCloseIcon, { ...props }),
-      openFilterButtonIcon: (props) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(DataGridFilterIcon, { ...props }),
-      columnFilteredIcon: (props) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(DataGridFilterIcon, { sx: { width: 16, color: "text.primary" }, ...props }),
+      filterPanelDeleteIcon: (props) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(DataGridCloseIcon, { ...props }),
+      openFilterButtonIcon: (props) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(DataGridFilterIcon, { ...props }),
+      columnFilteredIcon: (props) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(DataGridFilterIcon, { sx: { width: 16, color: "text.primary" }, ...props }),
       /* Density */
-      densityCompactIcon: (props) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(DataGridDensityCompactIcon, { ...props }),
-      densityStandardIcon: (props) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(DataGridDensityStandardIcon, { ...props }),
-      densityComfortableIcon: (props) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(DataGridDensityComfortableIcon, { ...props }),
+      densityCompactIcon: (props) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(DataGridDensityCompactIcon, { ...props }),
+      densityStandardIcon: (props) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(DataGridDensityStandardIcon, { ...props }),
+      densityComfortableIcon: (props) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(DataGridDensityComfortableIcon, { ...props }),
       /* Export */
-      exportIcon: (props) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(DataGridExportIcon, { ...props }),
+      exportIcon: (props) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(DataGridExportIcon, { ...props }),
       /*  Quick Filter */
-      quickFilterIcon: (props) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(DataGridSearchIcon, { sx: { width: 24, height: 24, color: "text.secondary" }, ...props }),
-      quickFilterClearIcon: (props) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(DataGridCloseIcon, { ...props }),
+      quickFilterIcon: (props) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(DataGridSearchIcon, { sx: { width: 24, height: 24, color: "text.secondary" }, ...props }),
+      quickFilterClearIcon: (props) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(DataGridCloseIcon, { ...props }),
       /* Actions Column */
-      moreActionsIcon: (props) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(Icon, { icon: "MoreHorizontal", sx: { width: 20, height: 20 }, ...props })
+      moreActionsIcon: (props) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Icon, { icon: "MoreHorizontal", sx: { width: 20, height: 20 }, ...props })
     },
     slotProps: {
       basePopper: { placement: "bottom-end" },
@@ -11101,15 +11104,15 @@ var MuiDataGrid = {
   }
 };
 var dataGrid = { MuiDataGrid };
-var DataGridArrowUpIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(import_SvgIcon3.default, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+var DataGridArrowUpIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(import_SvgIcon3.default, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
     "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__ */ (0, import_jsx_runtime105.jsx)(
+  /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
     "path",
     {
       fill: "currentColor",
@@ -11118,15 +11121,15 @@ var DataGridArrowUpIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runti
     }
   )
 ] });
-var DataGridArrowDownIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(import_SvgIcon3.default, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+var DataGridArrowDownIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(import_SvgIcon3.default, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
     "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__ */ (0, import_jsx_runtime105.jsx)(
+  /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
     "path",
     {
       fill: "currentColor",
@@ -11135,15 +11138,15 @@ var DataGridArrowDownIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_run
     }
   )
 ] });
-var DataGridFilterIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_SvgIcon3.default, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+var DataGridFilterIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_SvgIcon3.default, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
   "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__ */ (0, import_jsx_runtime105.jsxs)(import_SvgIcon3.default, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+var DataGridExportIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(import_SvgIcon3.default, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
     "path",
     {
       fill: "currentColor",
@@ -11152,7 +11155,7 @@ var DataGridExportIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtim
       clipRule: "evenodd"
     }
   ),
-  /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+  /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
     "path",
     {
       fill: "currentColor",
@@ -11160,9 +11163,9 @@ var DataGridExportIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtim
     }
   )
 ] });
-var DataGridEyeIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(import_SvgIcon3.default, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("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__ */ (0, import_jsx_runtime105.jsx)(
+var DataGridEyeIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(import_SvgIcon3.default, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("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__ */ (0, import_jsx_runtime106.jsx)(
     "path",
     {
       fill: "currentColor",
@@ -11172,7 +11175,7 @@ var DataGridEyeIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime10
     }
   )
 ] });
-var DataGridEyeCloseIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_SvgIcon3.default, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+var DataGridEyeCloseIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_SvgIcon3.default, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
   "path",
   {
     fill: "currentColor",
@@ -11181,23 +11184,23 @@ var DataGridEyeCloseIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runt
     clipRule: "evenodd"
   }
 ) });
-var DataGridSearchIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_SvgIcon3.default, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+var DataGridSearchIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_SvgIcon3.default, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
   "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__ */ (0, import_jsx_runtime105.jsx)(import_SvgIcon3.default, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+var DataGridCloseIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_SvgIcon3.default, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
   "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__ */ (0, import_jsx_runtime105.jsx)(import_SvgIcon3.default, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("g", { fill: "none", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("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__ */ (0, import_jsx_runtime105.jsx)(
+var DataGridMoreIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_SvgIcon3.default, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("g", { fill: "none", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("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__ */ (0, import_jsx_runtime106.jsx)(
     "path",
     {
       fill: "currentColor",
@@ -11205,16 +11208,16 @@ var DataGridMoreIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime1
     }
   )
 ] }) });
-var DataGridDensityCompactIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_SvgIcon3.default, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+var DataGridDensityCompactIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_SvgIcon3.default, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
   "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__ */ (0, import_jsx_runtime105.jsx)(import_SvgIcon3.default, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("g", { fill: "none", fillRule: "evenodd", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("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__ */ (0, import_jsx_runtime105.jsx)(
+var DataGridDensityComfortableIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_SvgIcon3.default, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("g", { fill: "none", fillRule: "evenodd", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("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__ */ (0, import_jsx_runtime106.jsx)(
     "path",
     {
       fill: "currentColor",
@@ -11222,9 +11225,9 @@ var DataGridDensityComfortableIcon = ({ ...props }) => /* @__PURE__ */ (0, impor
     }
   )
 ] }) });
-var DataGridDensityStandardIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_SvgIcon3.default, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("g", { fill: "none", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("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__ */ (0, import_jsx_runtime105.jsx)(
+var DataGridDensityStandardIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_SvgIcon3.default, { sx: { width: 20, height: 20, ...props.sx }, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("g", { fill: "none", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("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__ */ (0, import_jsx_runtime106.jsx)(
     "path",
     {
       fill: "currentColor",
@@ -11382,19 +11385,25 @@ var MuiButtonGroup = {
 var buttonGroup = { MuiButtonGroup };
 
 // src/theme/core/components/autocomplete.tsx
+var import_Chip2 = require("@mui/material/Chip");
 var import_SvgIcon4 = require("@mui/material/SvgIcon");
+var import_InputBase5 = require("@mui/material/InputBase");
 var import_Autocomplete5 = require("@mui/material/Autocomplete");
-var import_jsx_runtime106 = require("react/jsx-runtime");
+var import_jsx_runtime107 = require("react/jsx-runtime");
 var MuiAutocomplete = {
   /** **************************************
    * DEFAULT PROPS
    *************************************** */
-  defaultProps: { popupIcon: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Icon, { icon: "NavArrowDown" }) },
+  defaultProps: {
+    popupIcon: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(Icon, { icon: "NavArrowDown" }),
+    forcePopupIcon: true
+  },
   /** **************************************
    * STYLE
    *************************************** */
   styleOverrides: {
     root: ({ theme }) => ({
+      // Tag count badge (e.g., "+2")
       [`& span.${import_Autocomplete5.autocompleteClasses.tag}`]: {
         ...theme.typography.subtitle2,
         height: 24,
@@ -11402,9 +11411,65 @@ 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
+      [`& .${import_Autocomplete5.autocompleteClasses.tag}.${import_Chip2.chipClasses.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]
+      }
+    }),
+    // Input root - override fixed heights for multiple mode
+    inputRoot: ({ theme }) => ({
+      // Allow flexible height for multiple selections
+      height: "auto",
+      minHeight: 44,
+      flexWrap: "wrap",
+      alignItems: "center",
+      paddingTop: theme.spacing(0.75),
+      paddingBottom: theme.spacing(0.75),
+      paddingLeft: theme.spacing(1),
+      paddingRight: `${theme.spacing(4)} !important`,
+      // Space for clear/popup icons
+      // Size small
+      [`&.${import_InputBase5.inputBaseClasses.sizeSmall}`]: {
+        height: "auto",
+        minHeight: 36,
+        paddingTop: theme.spacing(0.5),
+        paddingBottom: theme.spacing(0.5),
+        [`& .${import_Autocomplete5.autocompleteClasses.tag}.${import_Chip2.chipClasses.root}`]: {
+          height: 22,
+          margin: theme.spacing(0.25, 0.25, 0.25, 0)
+        }
+      },
+      // Size large
+      [`&.MuiInputBase-sizeLarge`]: {
+        height: "auto",
+        minHeight: 48,
+        paddingTop: theme.spacing(1),
+        paddingBottom: theme.spacing(1),
+        [`& .${import_Autocomplete5.autocompleteClasses.tag}.${import_Chip2.chipClasses.root}`]: {
+          height: 28,
+          margin: theme.spacing(0.5, 0.5, 0.5, 0)
+        }
+      },
+      // Adornment adjustments
+      [`&.${import_InputBase5.inputBaseClasses.adornedStart}`]: {
+        paddingLeft: theme.spacing(1.5)
+      }
+    }),
+    // Input field inside autocomplete
+    input: ({ theme }) => ({
+      padding: `${theme.spacing(0.75, 0.75)} !important`,
+      minWidth: 80,
+      [`&.${import_InputBase5.inputBaseClasses.inputSizeSmall}`]: {
+        padding: `${theme.spacing(0.5, 0.5)} !important`
       }
     }),
     paper: ({ theme }) => ({
@@ -11416,7 +11481,15 @@ var MuiAutocomplete = {
         ...menuItem(theme)
       }
     }),
-    endAdornment: { [`& .${import_SvgIcon4.svgIconClasses.root}`]: { width: 24, height: 24 } }
+    endAdornment: ({ theme }) => ({
+      top: "50%",
+      transform: "translateY(-50%)",
+      right: theme.spacing(1),
+      [`& .${import_SvgIcon4.svgIconClasses.root}`]: { width: 24, height: 24 }
+    }),
+    clearIndicator: ({ theme }) => ({
+      marginRight: theme.spacing(0.5)
+    })
   }
 };
 var autocomplete = { MuiAutocomplete };
@@ -11514,11 +11587,11 @@ var toggleButton = { MuiToggleButton, MuiToggleButtonGroup };
 
 // src/theme/core/components/mui-x-date-picker.tsx
 var import_IconButton8 = __toESM(require("@mui/material/IconButton"), 1);
-var import_Typography15 = __toESM(require("@mui/material/Typography"), 1);
+var import_Typography16 = __toESM(require("@mui/material/Typography"), 1);
 var import_Button5 = require("@mui/material/Button");
 var import_styles36 = require("@mui/material/styles");
 var import_DialogActions = require("@mui/material/DialogActions");
-var import_jsx_runtime107 = require("react/jsx-runtime");
+var import_jsx_runtime108 = require("react/jsx-runtime");
 var CustomCalendarHeaderRoot = (0, import_styles36.styled)("div")(({ theme }) => ({
   display: "flex",
   justifyContent: "space-between",
@@ -11556,10 +11629,10 @@ function CustomCalendarHeader(props) {
       onViewChange("year");
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(CustomCalendarHeaderRoot, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(CustomIconButton, { onClick: selectPreviousMonth, title: "Previous month", size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(Icon, { icon: "NavArrowLeft", width: 16 }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
-      import_Typography15.default,
+  return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(CustomCalendarHeaderRoot, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(CustomIconButton, { onClick: selectPreviousMonth, title: "Previous month", size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(Icon, { icon: "NavArrowLeft", width: 16 }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+      import_Typography16.default,
       {
         variant: "subtitle1",
         onClick: handleLabelClick,
@@ -11573,7 +11646,7 @@ function CustomCalendarHeader(props) {
         children: monthLabel
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(CustomIconButton, { onClick: selectNextMonth, title: "Next month", size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(Icon, { icon: "NavArrowRight", width: 16 }) })
+    /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(CustomIconButton, { onClick: selectNextMonth, title: "Next month", size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(Icon, { icon: "NavArrowRight", width: 16 }) })
   ] });
 }
 var localeText = {
@@ -11581,13 +11654,13 @@ var localeText = {
 };
 var defaultProps = {
   date: {
-    openPickerIcon: () => /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(Icon, { icon: "Calendar", sx: { width: 20, height: 20 } }),
+    openPickerIcon: () => /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(Icon, { icon: "Calendar", sx: { width: 20, height: 20 } }),
     calendarHeader: CustomCalendarHeader
   },
   time: {
-    openPickerIcon: () => /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(Icon, { icon: "Clock", sx: { width: 20, height: 20 } }),
-    rightArrowIcon: () => /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(Icon, { icon: "NavArrowRight" }),
-    switchViewIcon: () => /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(Icon, { icon: "NavArrowDownSolid" })
+    openPickerIcon: () => /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(Icon, { icon: "Clock", sx: { width: 20, height: 20 } }),
+    rightArrowIcon: () => /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(Icon, { icon: "NavArrowRight" }),
+    switchViewIcon: () => /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(Icon, { icon: "NavArrowDownSolid" })
   }
 };
 var dateViews = ["year", "month", "day"];
@@ -12018,18 +12091,18 @@ var import__8 = require("@fontsource/geist/500.css");
 var import__9 = require("@fontsource/geist/600.css");
 var import__10 = require("@fontsource/geist/700.css");
 var import_satoshi = require("./satoshi-4X3TX4PE.css");
-var import_jsx_runtime108 = require("react/jsx-runtime");
+var import_jsx_runtime109 = require("react/jsx-runtime");
 var ThemeProvider = ({ children }) => {
   const settings = useSettings();
   const theme = createTheme(settings);
-  return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
     import_styles41.ThemeProvider,
     {
       theme,
       defaultMode: schemeConfig.defaultMode,
       modeStorageKey: schemeConfig.modeStorageKey,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_CssBaseline.default, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_CssBaseline.default, {}),
         children
       ]
     }
@@ -12059,6 +12132,7 @@ __reExport(index_exports, components_exports2, module.exports);
   CopyButton,
   CustomDialog,
   CustomDrawer,
+  CustomFormLabel,
   DateRangeDropdown,
   DateRangePicker,
   Download,