@undefine-ui/design-system 3.7.0 → 3.7.2

package/dist/index.d.cts

@@ -2393,6 +2393,12 @@ declare module '@mui/material/TextField' {
         xl: true;
     }
 }
+declare module '@mui/material/Autocomplete' {
+    interface AutocompletePropsSizeOverrides {
+        large: true;
+        xl: true;
+    }
+}
 declare module '@mui/material/ToggleButton' {
     interface ToggleButtonPropsColorOverrides {
         neutral: true;

package/dist/index.d.ts

@@ -2393,6 +2393,12 @@ declare module '@mui/material/TextField' {
         xl: true;
     }
 }
+declare module '@mui/material/Autocomplete' {
+    interface AutocompletePropsSizeOverrides {
+        large: true;
+        xl: true;
+    }
+}
 declare module '@mui/material/ToggleButton' {
     interface ToggleButtonPropsColorOverrides {
         neutral: true;

package/dist/index.js

@@ -5039,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 = {
@@ -5047,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 };
@@ -6172,19 +6172,31 @@ 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 }
+          [`& .${inputAdornmentClasses.root} span`]: {
+            ...theme.typography.h8,
+            color: theme.vars.palette.icon.black
+          }
+        },
+        // 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}`]: {
@@ -6255,6 +6267,24 @@ var MuiTextField = {
         [`&.MuiInputBase-sizeLarge`]: {
           minHeight: 48
         }
+      },
+      // Select icon sizing
+      [`& .MuiSelect-root`]: {
+        // Default medium size - 20x20 icons
+        "& svg": {
+          width: 20,
+          height: 20
+        },
+        // Size small - 16x16 icons
+        [`&.${inputBaseClasses.sizeSmall} svg`]: {
+          width: 16,
+          height: 16
+        },
+        // Size large - 24x24 icons
+        [`&.MuiInputBase-sizeLarge svg`]: {
+          width: 24,
+          height: 24
+        }
       }
     })
   }
@@ -11397,7 +11427,6 @@ var buttonGroup = { MuiButtonGroup };
 
 // src/theme/core/components/autocomplete.tsx
 import { chipClasses as chipClasses2 } from "@mui/material/Chip";
-import { svgIconClasses as svgIconClasses3 } from "@mui/material/SvgIcon";
 import { inputBaseClasses as inputBaseClasses4 } from "@mui/material/InputBase";
 import { autocompleteClasses as autocompleteClasses3 } from "@mui/material/Autocomplete";
 import { jsx as jsx107 } from "react/jsx-runtime";
@@ -11413,7 +11442,7 @@ var MuiAutocomplete = {
    * STYLE
    *************************************** */
   styleOverrides: {
-    root: ({ theme }) => ({
+    root: ({ theme, ownerState }) => ({
       // Tag count badge (e.g., "+2")
       [`& span.${autocompleteClasses3.tag}`]: {
         ...theme.typography.subtitle2,
@@ -11434,34 +11463,49 @@ var MuiAutocomplete = {
         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 }) => ({
+    inputRoot: ({ theme, ownerState }) => ({
       // Allow flexible height for multiple selections
       height: "auto",
       minHeight: 44,
       flexWrap: "wrap",
       alignItems: "center",
-      paddingTop: theme.spacing(0.75),
-      paddingBottom: theme.spacing(0.75),
+      paddingTop: theme.spacing(0),
+      paddingBottom: theme.spacing(0),
       paddingLeft: theme.spacing(1),
       paddingRight: `${theme.spacing(4)} !important`,
       // Space for clear/popup icons
       // Size small
-      [`&.${inputBaseClasses4.sizeSmall}`]: {
-        height: "auto",
+      ...ownerState.size === "small" && {
         minHeight: 36,
-        paddingTop: theme.spacing(0.5),
-        paddingBottom: theme.spacing(0.5),
         [`& .${autocompleteClasses3.tag}.${chipClasses2.root}`]: {
           height: 22,
           margin: theme.spacing(0.25, 0.25, 0.25, 0)
         }
       },
       // Size large
-      [`&.MuiInputBase-sizeLarge`]: {
-        height: "auto",
+      ...ownerState.size === "large" && {
         minHeight: 48,
         paddingTop: theme.spacing(1),
         paddingBottom: theme.spacing(1),
@@ -11479,7 +11523,7 @@ var MuiAutocomplete = {
     input: ({ theme }) => ({
       padding: `${theme.spacing(0.75, 0.75)} !important`,
       minWidth: 80,
-      [`&.${inputBaseClasses4.inputSizeSmall}`]: {
+      [`&.${inputBaseClasses4.sizeSmall}`]: {
         padding: `${theme.spacing(0.5, 0.5)} !important`
       }
     }),
@@ -11495,8 +11539,7 @@ var MuiAutocomplete = {
     endAdornment: ({ theme }) => ({
       top: "50%",
       transform: "translateY(-50%)",
-      right: theme.spacing(1),
-      [`& .${svgIconClasses3.root}`]: { width: 24, height: 24 }
+      right: theme.spacing(1)
     }),
     clearIndicator: ({ theme }) => ({
       marginRight: theme.spacing(0.5)