@atipicus/mrs-ui 1.1.0 → 2.0.2

package/dist/index.js

@@ -95,12 +95,12 @@ const ComponentAlertLightWarningOutlinedForeground = "#3e2410";
 const ComponentAlertLightWarningOutlinedBorder = "#dfa00a";
 const ComponentAlertLightWarningStandardBackground = "#fff4e5";
 const ComponentAlertLightWarningStandardForeground = "#3e2410";
-const ComponentAlertLightInfoFilledBackground = "#125c87";
+const ComponentAlertLightInfoFilledBackground = "#2481b8";
 const ComponentAlertLightInfoFilledForeground = "#ffffff";
-const ComponentAlertLightInfoOutlinedBackground = "#e5f6fd";
+const ComponentAlertLightInfoOutlinedBackground = "#bad7e9";
 const ComponentAlertLightInfoOutlinedForeground = "#014361";
-const ComponentAlertLightInfoOutlinedBorder = "#125c87";
-const ComponentAlertLightInfoStandardBackground = "#e5f6fd";
+const ComponentAlertLightInfoOutlinedBorder = "#2481b8";
+const ComponentAlertLightInfoStandardBackground = "#bad7e9";
 const ComponentAlertLightInfoStandardForeground = "#014361";
 const ComponentAlertLightSuccessFilledBackground = "#2e7d32";
 const ComponentAlertLightSuccessFilledForeground = "#ffffff";
@@ -152,6 +152,7 @@ const ComponentChipDefaultEnabledBorder = "#bdbdbd";
 const ComponentAvatarBorderRadius = "9999px";
 const ComponentAvatarSmall = "24px";
 const ComponentAvatarMedium = "40px";
+const ComponentAvatarLarge = "56px";
 const ComponentInputLightStandardEnabledBorder = "#0000006b";
 const ComponentInputLightFilledEnabledFill = "#0000000a";
 const ComponentInputLightOutlinedEnabledBorder = "#0000003b";
@@ -162,16 +163,6 @@ const ComponentInputDarkFilledEnabledFill = "#ffffff14";
 const ComponentInputDarkOutlinedEnabledBorder = "#ffffff3b";
 const ComponentRatingActiveFill = "#ffb400";
 const ComponentRatingEnabledBorder = "#0000003b";
-const ComponentSidenavWidthCollapsed = "64px";
-const ComponentSidenavWidthExpanded = "240px";
-const ComponentSidenavLightItemHoverBackground = "#00000014";
-const ComponentSidenavLightItemSelectedBackground = "#0099991f";
-const ComponentSidenavLightItemSelectedForeground = "#00686f";
-const ComponentSidenavLightBorderRadius = "8px";
-const ComponentSidenavDarkItemHoverBackground = "#ffffff14";
-const ComponentSidenavDarkItemSelectedBackground = "#0099993d";
-const ComponentSidenavDarkItemSelectedForeground = "#66b2b2";
-const ComponentSidenavDarkBorderRadius = "8px";
 const ComponentPaperLightElevation0 = "#ffffff";
 const ComponentPaperLightElevation1 = "#ffffff";
 const ComponentPaperLightElevation2 = "#ffffff";
@@ -190,9 +181,69 @@ const ComponentTableDarkBorder = "#ffffff1f";
 const ComponentTableDarkHeaderBackground = "#1e1e1e";
 const ComponentCardLightBorderRadius = "12px";
 const ComponentCardDarkBorderRadius = "12px";
+const PrimitivesColorsBrandVerones = "#00686f";
+const PrimitivesColorsBrandLima = "#99cc00";
 const PrimitivesColorsNeutralWhite = "#ffffff";
+const PrimitivesColorsNeutralBlack = "#000000";
+const PrimitivesColorsNeutralGray50 = "#fafafa";
+const PrimitivesColorsNeutralGray100 = "#f5f5f5";
+const PrimitivesColorsNeutralGray200 = "#eeeeee";
+const PrimitivesColorsNeutralGray300 = "#e0e0e0";
+const PrimitivesColorsNeutralGray400 = "#bdbdbd";
+const PrimitivesColorsNeutralGray500 = "#9e9e9e";
 const PrimitivesColorsNeutralGray600 = "#757575";
+const PrimitivesColorsNeutralGray700 = "#616161";
+const PrimitivesColorsNeutralGray800 = "#424242";
+const PrimitivesColorsNeutralGray900 = "#212121";
+const PrimitivesColorsStatusError50 = "#fdeded";
+const PrimitivesColorsStatusError100 = "#f8b8b8";
+const PrimitivesColorsStatusError500 = "#ab1a1a";
+const PrimitivesColorsStatusError600 = "#8b1515";
+const PrimitivesColorsStatusError700 = "#5f2120";
+const PrimitivesColorsStatusWarning50 = "#fff4e5";
+const PrimitivesColorsStatusWarning500 = "#dfa00a";
+const PrimitivesColorsStatusWarning600 = "#b88308";
+const PrimitivesColorsStatusWarning700 = "#3e2410";
+const PrimitivesColorsStatusInfo50 = "#bad7e9";
+const PrimitivesColorsStatusInfo100 = "#d1daf0";
+const PrimitivesColorsStatusInfo500 = "#2481b8";
+const PrimitivesColorsStatusInfo600 = "#125c87";
+const PrimitivesColorsStatusInfo700 = "#014361";
+const PrimitivesColorsStatusInfo800 = "#0c225a";
+const PrimitivesColorsStatusSuccess50 = "#edf7ed";
+const PrimitivesColorsStatusSuccess100 = "#b3d1c7";
+const PrimitivesColorsStatusSuccess500 = "#2e7d32";
+const PrimitivesColorsStatusSuccess600 = "#036642";
+const PrimitivesColorsStatusSuccess700 = "#1e4620";
+const PrimitivesColorsStatusSuccess800 = "#023321";
+const PrimitivesColorsAlphaBlack4 = "#0000000a";
+const PrimitivesColorsAlphaBlack8 = "#00000014";
+const PrimitivesColorsAlphaBlack12 = "#0000001f";
+const PrimitivesColorsAlphaBlack23 = "#0000003b";
+const PrimitivesColorsAlphaBlack26 = "#00000042";
+const PrimitivesColorsAlphaBlack38 = "#00000061";
+const PrimitivesColorsAlphaBlack42 = "#0000006b";
+const PrimitivesColorsAlphaBlack56 = "#0000008f";
+const PrimitivesColorsAlphaBlack60 = "#00000099";
+const PrimitivesColorsAlphaBlack87 = "#000000de";
+const PrimitivesColorsAlphaWhite8 = "#ffffff14";
+const PrimitivesColorsAlphaWhite12 = "#ffffff1f";
+const PrimitivesColorsAlphaWhite16 = "#ffffff29";
+const PrimitivesColorsAlphaWhite23 = "#ffffff3b";
+const PrimitivesColorsAlphaWhite26 = "#ffffff42";
 const PrimitivesColorsAlphaWhite30 = "#ffffff4d";
+const PrimitivesColorsAlphaWhite42 = "#ffffff6b";
+const PrimitivesColorsAlphaWhite50 = "#ffffff80";
+const PrimitivesColorsAlphaWhite70 = "#ffffffb3";
+const PrimitivesColorsAlphaWhite100 = "#ffffff";
+const PrimitivesColorsAlphaPrimary8 = "#00999914";
+const PrimitivesColorsAlphaPrimary12 = "#0099991f";
+const PrimitivesColorsAlphaPrimary16 = "#00999929";
+const PrimitivesColorsAlphaPrimary25 = "#00999940";
+const PrimitivesColorsAlphaPrimary24Dark = "#0099993d";
+const PrimitivesColorsAlphaPrimary32Dark = "#00999952";
+const PrimitivesColorsAlphaPrimary40Dark = "#00999966";
+const PrimitivesColorsSpecialRating = "#ffb400";
 const PrimitivesMotionDurationFast = "100ms";
 const PrimitivesMotionDurationBase = "200ms";
 const PrimitivesMotionDurationModerate = "300ms";
@@ -235,7 +286,7 @@ const SemanticColorLightWarningMain = "#dfa00a";
 const SemanticColorLightWarningDark = "#b88308";
 const SemanticColorLightWarningLight = "#f5b642";
 const SemanticColorLightWarningContrastText = "#000000de";
-const SemanticColorLightInfoMain = "#143996";
+const SemanticColorLightInfoMain = "#125c87";
 const SemanticColorLightInfoDark = "#0c225a";
 const SemanticColorLightInfoLight = "#d1daf0";
 const SemanticColorLightInfoContrastText = "#ffffff";
@@ -271,8 +322,8 @@ const SemanticColorDarkWarningDark = "#dfa00a";
 const SemanticColorDarkWarningLight = "#fff4e5";
 const SemanticColorDarkWarningContrastText = "#000000";
 const SemanticColorDarkInfoMain = "#64b5f6";
-const SemanticColorDarkInfoDark = "#125c87";
-const SemanticColorDarkInfoLight = "#e5f6fd";
+const SemanticColorDarkInfoDark = "#2481b8";
+const SemanticColorDarkInfoLight = "#bad7e9";
 const SemanticColorDarkInfoContrastText = "#000000";
 const SemanticColorDarkSuccessMain = "#81c784";
 const SemanticColorDarkSuccessDark = "#2e7d32";
@@ -423,7 +474,7 @@ const shapeTokens = {
   sm: 4,
   md: 8,
   lg: 12,
-  xl: 24,
+  xl: 20,
   rounded: 9999
   // pill shape
 };
@@ -482,7 +533,153 @@ const lightTokens = {
       disabled: SemanticColorLightActionDisabled,
       disabledBackground: SemanticColorLightActionDisabledBackground
     },
-    divider: SemanticColorLightDivider
+    divider: SemanticColorLightDivider,
+    primitives: {
+      brand: {
+        veronesMain: PrimitivesColorsBrandVerones,
+        lima: PrimitivesColorsBrandLima
+      },
+      neutral: {
+        white: PrimitivesColorsNeutralWhite,
+        black: PrimitivesColorsNeutralBlack,
+        gray: {
+          50: PrimitivesColorsNeutralGray50,
+          100: PrimitivesColorsNeutralGray100,
+          200: PrimitivesColorsNeutralGray200,
+          300: PrimitivesColorsNeutralGray300,
+          400: PrimitivesColorsNeutralGray400,
+          500: PrimitivesColorsNeutralGray500,
+          600: PrimitivesColorsNeutralGray600,
+          700: PrimitivesColorsNeutralGray700,
+          800: PrimitivesColorsNeutralGray800,
+          900: PrimitivesColorsNeutralGray900
+        }
+      },
+      status: {
+        error: {
+          50: PrimitivesColorsStatusError50,
+          100: PrimitivesColorsStatusError100,
+          500: PrimitivesColorsStatusError500,
+          600: PrimitivesColorsStatusError600,
+          700: PrimitivesColorsStatusError700
+        },
+        warning: {
+          50: PrimitivesColorsStatusWarning50,
+          500: PrimitivesColorsStatusWarning500,
+          600: PrimitivesColorsStatusWarning600,
+          700: PrimitivesColorsStatusWarning700
+        },
+        info: {
+          50: PrimitivesColorsStatusInfo50,
+          100: PrimitivesColorsStatusInfo100,
+          500: PrimitivesColorsStatusInfo500,
+          600: PrimitivesColorsStatusInfo600,
+          700: PrimitivesColorsStatusInfo700,
+          800: PrimitivesColorsStatusInfo800
+        },
+        success: {
+          50: PrimitivesColorsStatusSuccess50,
+          100: PrimitivesColorsStatusSuccess100,
+          500: PrimitivesColorsStatusSuccess500,
+          600: PrimitivesColorsStatusSuccess600,
+          700: PrimitivesColorsStatusSuccess700,
+          800: PrimitivesColorsStatusSuccess800
+        }
+      },
+      alpha: {
+        black: {
+          4: PrimitivesColorsAlphaBlack4,
+          8: PrimitivesColorsAlphaBlack8,
+          12: PrimitivesColorsAlphaBlack12,
+          23: PrimitivesColorsAlphaBlack23,
+          26: PrimitivesColorsAlphaBlack26,
+          38: PrimitivesColorsAlphaBlack38,
+          42: PrimitivesColorsAlphaBlack42,
+          56: PrimitivesColorsAlphaBlack56,
+          60: PrimitivesColorsAlphaBlack60,
+          87: PrimitivesColorsAlphaBlack87
+        },
+        white: {
+          8: PrimitivesColorsAlphaWhite8,
+          12: PrimitivesColorsAlphaWhite12,
+          16: PrimitivesColorsAlphaWhite16,
+          23: PrimitivesColorsAlphaWhite23,
+          26: PrimitivesColorsAlphaWhite26,
+          30: PrimitivesColorsAlphaWhite30,
+          42: PrimitivesColorsAlphaWhite42,
+          50: PrimitivesColorsAlphaWhite50,
+          70: PrimitivesColorsAlphaWhite70,
+          100: PrimitivesColorsAlphaWhite100
+        },
+        primary: {
+          8: PrimitivesColorsAlphaPrimary8,
+          12: PrimitivesColorsAlphaPrimary12,
+          16: PrimitivesColorsAlphaPrimary16,
+          25: PrimitivesColorsAlphaPrimary25,
+          "24-dark": PrimitivesColorsAlphaPrimary24Dark,
+          "32-dark": PrimitivesColorsAlphaPrimary32Dark,
+          "40-dark": PrimitivesColorsAlphaPrimary40Dark
+        }
+      },
+      special: {
+        rating: PrimitivesColorsSpecialRating
+      }
+    },
+    semantic: {
+      primary: {
+        main: SemanticColorLightPrimaryMain,
+        dark: SemanticColorLightPrimaryDark,
+        light: SemanticColorLightPrimaryLight,
+        contrastText: SemanticColorLightPrimaryContrastText
+      },
+      secondary: {
+        main: SemanticColorLightSecondaryMain,
+        dark: SemanticColorLightSecondaryDark,
+        light: SemanticColorLightSecondaryLight,
+        contrastText: SemanticColorLightSecondaryContrastText
+      },
+      error: {
+        main: SemanticColorLightErrorMain,
+        dark: SemanticColorLightErrorDark,
+        light: SemanticColorLightErrorLight,
+        contrastText: SemanticColorLightErrorContrastText
+      },
+      warning: {
+        main: SemanticColorLightWarningMain,
+        dark: SemanticColorLightWarningDark,
+        light: SemanticColorLightWarningLight,
+        contrastText: SemanticColorLightWarningContrastText
+      },
+      info: {
+        main: SemanticColorLightInfoMain,
+        dark: SemanticColorLightInfoDark,
+        light: SemanticColorLightInfoLight,
+        contrastText: SemanticColorLightInfoContrastText
+      },
+      success: {
+        main: SemanticColorLightSuccessMain,
+        dark: SemanticColorLightSuccessDark,
+        light: SemanticColorLightSuccessLight,
+        contrastText: SemanticColorLightSuccessContrastText
+      },
+      background: {
+        default: SemanticColorLightBackgroundDefault,
+        paper: SemanticColorLightBackgroundPaper
+      },
+      text: {
+        primary: SemanticColorLightTextPrimary,
+        secondary: SemanticColorLightTextSecondary,
+        disabled: SemanticColorLightTextDisabled
+      },
+      action: {
+        active: SemanticColorLightActionActive,
+        hover: SemanticColorLightActionHover,
+        selected: SemanticColorLightActionSelected,
+        disabled: SemanticColorLightActionDisabled,
+        disabledBackground: SemanticColorLightActionDisabledBackground
+      },
+      divider: SemanticColorLightDivider
+    }
   },
   components: {
     alert: {
@@ -758,6 +955,135 @@ const darkTokens = {
     }
   }
 };
+const styleCompositions = {
+  /**
+   * Button style compositions
+   * Used by: MuiButton, MuiFab, MuiToggleButton
+   */
+  button: {
+    /**
+     * Base button styles
+     */
+    base: () => ({
+      fontWeight: typographyTokens.fontWeightSemiBold,
+      textTransform: "none",
+      borderRadius: shapeTokens.md,
+      transition: "all 0.2s ease"
+    }),
+    /**
+     * Button size variants
+     */
+    sizes: {
+      small: {
+        fontSize: "0.8125rem",
+        padding: "4px 10px"
+      },
+      medium: {
+        fontSize: "0.875rem",
+        padding: "6px 16px"
+      },
+      large: {
+        fontSize: "1rem",
+        padding: "8px 22px"
+      }
+    },
+    /**
+     * Button state styles
+     */
+    states: {
+      disabled: () => ({
+        opacity: 0.5,
+        cursor: "not-allowed",
+        pointerEvents: "none"
+      })
+    }
+  },
+  /**
+   * List item style compositions
+   * Used by: MuiListItem, MuiListItemButton
+   */
+  listItem: {
+    /**
+     * Base list item styles
+     */
+    base: () => ({
+      borderRadius: shapeTokens.sm,
+      transition: "all 0.2s ease"
+    }),
+    /**
+     * List item state styles
+     */
+    states: {
+      selected: (theme2) => ({
+        backgroundColor: theme2.palette.action.selected,
+        fontWeight: typographyTokens.fontWeightSemiBold
+      }),
+      hover: (theme2) => ({
+        backgroundColor: theme2.palette.action.hover
+      }),
+      disabled: () => ({
+        opacity: 0.5,
+        cursor: "not-allowed",
+        pointerEvents: "none"
+      })
+    }
+  },
+  /**
+   * Chip style compositions
+   * Used by: MuiChip
+   */
+  chip: {
+    /**
+     * Base chip styles
+     */
+    base: () => ({
+      borderRadius: shapeTokens.rounded,
+      fontWeight: typographyTokens.fontWeightMedium,
+      transition: "all 0.2s ease"
+    }),
+    /**
+     * Chip size variants
+     */
+    sizes: {
+      small: {
+        fontSize: "0.75rem",
+        padding: "4px 8px"
+      },
+      medium: {
+        fontSize: "0.875rem",
+        padding: "6px 12px"
+      }
+    },
+    /**
+     * Chip state styles
+     */
+    states: {
+      disabled: () => ({
+        opacity: 0.5,
+        cursor: "not-allowed"
+      })
+    }
+  },
+  /**
+   * Typography weight shortcuts
+   */
+  typography: {
+    bold: { fontWeight: typographyTokens.fontWeightBold },
+    semiBold: { fontWeight: typographyTokens.fontWeightSemiBold },
+    medium: { fontWeight: typographyTokens.fontWeightMedium },
+    regular: { fontWeight: typographyTokens.fontWeightRegular },
+    light: { fontWeight: typographyTokens.fontWeightLight }
+  },
+  /**
+   * Border radius shortcuts
+   */
+  borderRadius: {
+    small: { borderRadius: shapeTokens.sm },
+    medium: { borderRadius: shapeTokens.md },
+    large: { borderRadius: shapeTokens.lg },
+    rounded: { borderRadius: shapeTokens.rounded }
+  }
+};
 const spacing$1 = (factor) => {
   const baseUnit = 8;
   return baseUnit * factor;
@@ -772,9 +1098,7 @@ const getComponentOverrides = (mode) => {
     // =========================================================================
     MuiCssBaseline: {
       styleOverrides: {
-        body: {
-          fontFamily: typography2.fontFamily
-        },
+        body: {},
         // Apply Nunito font globally
         "*": {
           fontFamily: "inherit"
@@ -790,36 +1114,22 @@ const getComponentOverrides = (mode) => {
       },
       styleOverrides: {
         root: {
-          borderRadius: shape2.md,
-          textTransform: "none",
-          fontWeight: typography2.fontWeightSemiBold,
-          fontFamily: typography2.fontFamily
-        },
-        sizeSmall: {
-          fontSize: "0.8125rem",
-          padding: "4px 10px"
-        },
-        sizeMedium: {
-          fontSize: "0.875rem",
-          padding: "6px 16px"
+          ...styleCompositions.button.base(),
+          textTransform: "none"
         },
-        sizeLarge: {
-          fontSize: "1rem",
-          padding: "8px 22px"
-        }
+        sizeSmall: styleCompositions.button.sizes.small,
+        sizeMedium: styleCompositions.button.sizes.medium,
+        sizeLarge: styleCompositions.button.sizes.large
       }
     },
     MuiIconButton: {
       styleOverrides: {
-        root: {
-          fontFamily: typography2.fontFamily
-        }
+        root: {}
       }
     },
     MuiToggleButton: {
       styleOverrides: {
         root: {
-          fontFamily: typography2.fontFamily,
           textTransform: "none"
         }
       }
@@ -850,16 +1160,13 @@ const getComponentOverrides = (mode) => {
         variant: "outlined"
       },
       styleOverrides: {
-        root: {
-          fontFamily: typography2.fontFamily
-        }
+        root: {}
       }
     },
     MuiOutlinedInput: {
       styleOverrides: {
         root: {
-          fontFamily: typography2.fontFamily,
-          borderRadius: shape2.sm
+          borderRadius: shape2.md
         },
         notchedOutline: {
           borderColor: modeTokens.components.input.outlined.enabledBorder
@@ -869,17 +1176,14 @@ const getComponentOverrides = (mode) => {
     MuiFilledInput: {
       styleOverrides: {
         root: {
-          fontFamily: typography2.fontFamily,
           backgroundColor: modeTokens.components.input.filled.enabledFill,
-          borderRadius: `${shape2.sm}px ${shape2.sm}px 0 0`
+          borderRadius: `${shape2.md}px ${shape2.md}px 0 0`
         }
       }
     },
     MuiInput: {
       styleOverrides: {
-        root: {
-          fontFamily: typography2.fontFamily
-        },
+        root: {},
         underline: {
           "&:before": {
             borderBottomColor: modeTokens.components.input.standard.enabledBorder
@@ -889,23 +1193,17 @@ const getComponentOverrides = (mode) => {
     },
     MuiInputLabel: {
       styleOverrides: {
-        root: {
-          fontFamily: typography2.fontFamily
-        }
+        root: {}
       }
     },
     MuiSelect: {
       styleOverrides: {
-        root: {
-          fontFamily: typography2.fontFamily
-        }
+        root: {}
       }
     },
     MuiAutocomplete: {
       styleOverrides: {
-        root: {
-          fontFamily: typography2.fontFamily
-        }
+        root: {}
       }
     },
     // =========================================================================
@@ -947,8 +1245,7 @@ const getComponentOverrides = (mode) => {
     MuiChip: {
       styleOverrides: {
         root: {
-          fontFamily: typography2.fontFamily,
-          borderRadius: shape2.rounded
+          ...styleCompositions.chip.base()
         },
         outlined: {
           borderColor: modeTokens.components.chip.defaultEnabledBorder
@@ -964,7 +1261,6 @@ const getComponentOverrides = (mode) => {
     MuiAlert: {
       styleOverrides: {
         root: {
-          fontFamily: typography2.fontFamily,
           borderRadius: `${shape2.md}px`
         },
         // Filled variants
@@ -1026,9 +1322,7 @@ const getComponentOverrides = (mode) => {
     },
     MuiSnackbar: {
       styleOverrides: {
-        root: {
-          fontFamily: typography2.fontFamily
-        }
+        root: {}
       }
     },
     // =========================================================================
@@ -1036,9 +1330,7 @@ const getComponentOverrides = (mode) => {
     // =========================================================================
     MuiPaper: {
       styleOverrides: {
-        root: {
-          fontFamily: typography2.fontFamily
-        },
+        root: {},
         rounded: {
           borderRadius: shape2.md
         },
@@ -1056,31 +1348,25 @@ const getComponentOverrides = (mode) => {
     MuiCard: {
       styleOverrides: {
         root: {
-          borderRadius: shape2.lg,
-          fontFamily: typography2.fontFamily
+          borderRadius: shape2.lg
         }
       }
     },
     MuiDialog: {
       styleOverrides: {
         paper: {
-          borderRadius: shape2.lg,
-          fontFamily: typography2.fontFamily
+          borderRadius: shape2.lg
         }
       }
     },
     MuiDrawer: {
       styleOverrides: {
-        paper: {
-          fontFamily: typography2.fontFamily
-        }
+        paper: {}
       }
     },
     MuiAppBar: {
       styleOverrides: {
-        root: {
-          fontFamily: typography2.fontFamily
-        }
+        root: {}
       }
     },
     // =========================================================================
@@ -1088,15 +1374,12 @@ const getComponentOverrides = (mode) => {
     // =========================================================================
     MuiTable: {
       styleOverrides: {
-        root: {
-          fontFamily: typography2.fontFamily
-        }
+        root: {}
       }
     },
     MuiTableCell: {
       styleOverrides: {
         root: {
-          fontFamily: typography2.fontFamily,
           borderBottomColor: modeTokens.components.table.border
         },
         head: {
@@ -1109,40 +1392,35 @@ const getComponentOverrides = (mode) => {
     // =========================================================================
     MuiList: {
       styleOverrides: {
-        root: {
-          fontFamily: typography2.fontFamily
-        }
+        root: {}
       }
     },
     MuiListItem: {
       styleOverrides: {
-        root: {
-          fontFamily: typography2.fontFamily
-        }
+        root: {}
       }
     },
     MuiListItemButton: {
       styleOverrides: {
         root: {
-          fontFamily: typography2.fontFamily,
-          borderRadius: shape2.sm,
+          ...styleCompositions.listItem.base(),
           "&.Mui-selected": {
-            backgroundColor: modeTokens.colors.action.selected
+            backgroundColor: modeTokens.colors.action.selected,
+            fontWeight: typography2.fontWeightSemiBold
           },
           "&.Mui-selected:hover": {
             backgroundColor: modeTokens.colors.action.hover
+          },
+          "&:hover": {
+            backgroundColor: modeTokens.colors.action.hover
           }
         }
       }
     },
     MuiListItemText: {
       styleOverrides: {
-        primary: {
-          fontFamily: typography2.fontFamily
-        },
-        secondary: {
-          fontFamily: typography2.fontFamily
-        }
+        primary: {},
+        secondary: {}
       }
     },
     MuiMenu: {
@@ -1154,9 +1432,7 @@ const getComponentOverrides = (mode) => {
     },
     MuiMenuItem: {
       styleOverrides: {
-        root: {
-          fontFamily: typography2.fontFamily
-        }
+        root: {}
       }
     },
     // =========================================================================
@@ -1164,38 +1440,29 @@ const getComponentOverrides = (mode) => {
     // =========================================================================
     MuiTabs: {
       styleOverrides: {
-        root: {
-          fontFamily: typography2.fontFamily
-        }
+        root: {}
       }
     },
     MuiTab: {
       styleOverrides: {
         root: {
-          fontFamily: typography2.fontFamily,
           textTransform: "none"
         }
       }
     },
     MuiBreadcrumbs: {
       styleOverrides: {
-        root: {
-          fontFamily: typography2.fontFamily
-        }
+        root: {}
       }
     },
     MuiPagination: {
       styleOverrides: {
-        root: {
-          fontFamily: typography2.fontFamily
-        }
+        root: {}
       }
     },
     MuiStepper: {
       styleOverrides: {
-        root: {
-          fontFamily: typography2.fontFamily
-        }
+        root: {}
       }
     },
     // =========================================================================
@@ -1203,16 +1470,12 @@ const getComponentOverrides = (mode) => {
     // =========================================================================
     MuiTypography: {
       styleOverrides: {
-        root: {
-          fontFamily: typography2.fontFamily
-        }
+        root: {}
       }
     },
     MuiLink: {
       styleOverrides: {
-        root: {
-          fontFamily: typography2.fontFamily
-        }
+        root: {}
       }
     },
     // =========================================================================
@@ -1220,23 +1483,17 @@ const getComponentOverrides = (mode) => {
     // =========================================================================
     MuiAvatar: {
       styleOverrides: {
-        root: {
-          fontFamily: typography2.fontFamily
-        }
+        root: {}
       }
     },
     MuiBadge: {
       styleOverrides: {
-        badge: {
-          fontFamily: typography2.fontFamily
-        }
+        badge: {}
       }
     },
     MuiTooltip: {
       styleOverrides: {
-        tooltip: {
-          fontFamily: typography2.fontFamily
-        }
+        tooltip: {}
       }
     },
     MuiDivider: {
@@ -1251,23 +1508,17 @@ const getComponentOverrides = (mode) => {
     // =========================================================================
     MuiFormControlLabel: {
       styleOverrides: {
-        label: {
-          fontFamily: typography2.fontFamily
-        }
+        label: {}
       }
     },
     MuiFormHelperText: {
       styleOverrides: {
-        root: {
-          fontFamily: typography2.fontFamily
-        }
+        root: {}
       }
     },
     MuiFormLabel: {
       styleOverrides: {
-        root: {
-          fontFamily: typography2.fontFamily
-        }
+        root: {}
       }
     },
     // =========================================================================
@@ -1295,6 +1546,8 @@ const lightTheme = styles.createTheme({
     text: lightTokens.colors.text,
     action: lightTokens.colors.action,
     divider: lightTokens.colors.divider,
+    primitives: lightTokens.colors.primitives,
+    semantic: lightTokens.colors.semantic,
     _components: lightTokens.components
   },
   typography: {
@@ -1373,6 +1626,7 @@ const Avatar = React.forwardRef(
     const getSizeToken = () => {
       if (size === 24) return ComponentAvatarSmall;
       if (size === 40) return ComponentAvatarMedium;
+      if (size === 56) return ComponentAvatarLarge;
       return `${size}px`;
     };
     const getFontSize = () => {
@@ -2080,8 +2334,12 @@ const Select = React.forwardRef(
         fullWidth,
         sx: {
           fontFamily: (theme2) => theme2.typography.fontFamily,
+          borderRadius: shapeTokens.lg,
           // Outlined variant specific styles
           ...variant === "outlined" && {
+            "& .MuiOutlinedInput-root": {
+              borderRadius: shapeTokens.lg
+            },
             "& .MuiOutlinedInput-notchedOutline": {
               borderColor: (theme2) => theme2.palette._components?.input?.outlined?.enabledBorder || theme2.palette.divider
             },
@@ -3385,8 +3643,7 @@ const Sidenav = React.forwardRef(
     listSx
   }, ref) => {
     const theme2 = styles.useTheme();
-    const mode = theme2.palette.mode;
-    const sidenavWidth = width ?? (variant === "slim" ? ComponentSidenavWidthCollapsed : ComponentSidenavWidthExpanded);
+    const sidenavWidth = width ?? (variant === "slim" ? 72 : 256);
     const handleItemClick = (item) => {
       if (item.onClick) {
         item.onClick();
@@ -3402,18 +3659,12 @@ const Sidenav = React.forwardRef(
           selected: item.selected,
           onClick: () => handleItemClick(item),
           sx: {
-            borderRadius: mode === "light" ? ComponentSidenavLightBorderRadius : ComponentSidenavDarkBorderRadius,
+            // Note: borderRadius and colors are now defined in theme.ts
+            // MuiListItemButton override via sidenavTokens
             mx: 1,
             px: variant === "slim" ? 1.5 : 2,
             justifyContent: variant === "slim" ? "center" : "flex-start",
-            minHeight: 48,
-            "&.Mui-selected": {
-              backgroundColor: mode === "light" ? ComponentSidenavLightItemSelectedBackground : ComponentSidenavDarkItemSelectedBackground,
-              color: mode === "light" ? ComponentSidenavLightItemSelectedForeground : ComponentSidenavDarkItemSelectedForeground,
-              "&:hover": {
-                backgroundColor: mode === "light" ? ComponentSidenavLightItemHoverBackground : ComponentSidenavDarkItemHoverBackground
-              }
-            }
+            minHeight: 48
           },
           children: [
             item.icon && /* @__PURE__ */ jsxRuntime.jsx(