@moderneinc/design-system-components 7.5.0-next.3525ba → 7.5.0-next.44ef69

package/dist/Badge/Badge.d.ts

@@ -21,7 +21,7 @@ export interface ModBadgeProps extends Omit<ChipProps, 'variant' | 'size'> {
     variant?: BadgeVariant;
     /**
      * Corner treatment. `square` = borderRadius.xS, `rounded` = borderRadius.full.
-     * Deliberately defaults to `square` even though the design's Shape default differs —
+     * Deliberately defaults to `square` even though Figma's Shape default differs —
      * this keeps existing consumers rendering unchanged. Don't "fix" it.
      * @default "square"
      */

package/dist/Breadcrumbs/Breadcrumbs.d.ts

@@ -2,6 +2,8 @@ import { type LinkProps } from '@mui/material/Link';
 import type { ElementType, ReactNode } from 'react';
 /**
  * ModBreadcrumbs - Navigation breadcrumb component
+ *
+ * @see https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4563-122872
  */
 export interface ModBreadcrumbsProps {
     /** Breadcrumb items as Link elements */

package/dist/CheckboxWithText/CheckboxWithText.d.ts

@@ -22,7 +22,7 @@ export interface ModCheckboxWithTextProps extends Omit<ModCheckboxProps, 'size'>
 /**
  * ModCheckboxWithText - Checkbox with label and supporting text
  *
- * Thin wrapper around ModCheckbox that maps the "Checkbox with text"
+ * Thin wrapper around ModCheckbox that maps the Figma "Checkbox with text"
  * component to the existing ModCheckbox with label + helperText.
  */
 export declare const ModCheckboxWithText: {

package/dist/DataGridCell/DataGridCell.d.ts

@@ -44,7 +44,7 @@ export declare const ModDataGridCellContent: {
     displayName: string;
 };
 /**
- * Row height configuration for DataGrid size variants
+ * Row height configuration for DataGrid size variants (from Figma specs)
  * - compact: 42px
  * - standard: 48px
  * - comfortable: 56px

package/dist/DataGridColumnsPanel/DataGridColumnsPanel.d.ts

@@ -1,6 +1,6 @@
 import type { GridColumnsPanelProps } from '@mui/x-data-grid-pro';
 /**
- * ModDataGridColumnsPanel - Custom columns panel for ModDataGrid
+ * ModDataGridColumnsPanel - Custom columns panel for ModDataGrid matching Figma design
  *
  * A styled columns panel that integrates with MUI DataGrid's column visibility system.
  * Features:

package/dist/FilledStatusIcons/FilledStatusIcons.d.ts

@@ -1,6 +1,6 @@
 import { type SvgIconProps } from '@mui/material/SvgIcon';
 /**
- * Filled status icons — sourced from the published design library components
+ * Filled status icons — sourced from the published Figma library components
  * Filled_Success / Filled_Queued / Filled_Info / Filled_Warning / Filled_Error /
  * Filled_Neutral / Filled_Canceled.
  *

package/dist/ListItemButton/ListItemButton.d.ts

@@ -46,7 +46,7 @@ export interface ModListItemButtonProps extends ListItemButtonProps {
  * </ModListItemButton>
  * ```
  *
- * Design Tokens Used (hex values omitted — they are generated and drift):
+ * Design Tokens Used (hex values omitted — they are generated from Figma and drift):
  * - semanticColors.buttons.primary.default - Active border
  * - semanticColors.border.primary - Default/disabled border
  * - semanticColors.icons.default - Active icon color

package/dist/LoadingSpinner/LoadingSpinner.d.ts

@@ -14,7 +14,7 @@ export interface ModLoadingSpinnerProps {
  * ModLoadingSpinner - Animated loading spinner component
  *
  * A circular loading spinner with a partial arc that rotates continuously.
- * Based on the design system button loading icon.
+ * Based on the Figma design system button loading icon.
  *
  * @example
  * <ModLoadingSpinner />

package/dist/MenuItem/MenuItem.d.ts

@@ -3,19 +3,19 @@ import type { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
 type ModMenuItemOwnProps = {
     /**
      * Optional icon to display on the left side
-     * Note: Not expressible as a design-tool property (ReactNode)
+     * Note: Cannot be directly mapped from Figma (ReactNode)
      */
     icon?: ReactNode;
     /**
      * Optional keyboard shortcut to display on the right side
      * @example "⌘+P" or "Ctrl+K"
-     * Note: Not expressible as a design-tool property (ReactNode/string)
+     * Note: Cannot be directly mapped from Figma (ReactNode/string)
      */
     shortcut?: string;
     /**
      * Optional secondary text to display next to the primary label
      * @example "@username" or supporting text
-     * Note: Not expressible as a design-tool property (ReactNode/string)
+     * Note: Cannot be directly mapped from Figma (ReactNode/string)
      */
     secondaryText?: string;
     /**
@@ -66,7 +66,7 @@ export type ModMenuItemProps<C extends ElementType = typeof MenuItem> = ModMenuI
  *   View profile
  * </ModMenuItem>
  *
- * // With secondary text (user list pattern)
+ * // With secondary text (user list pattern from Figma node 4305:41844)
  * <ModMenuItem secondaryText="@phoenix">Phoenix Baker</ModMenuItem>
  * <ModMenuItem secondaryText="@olivia">Olivia Rhye</ModMenuItem>
  *

package/dist/QuickFilter/QuickFilter.d.ts

@@ -18,7 +18,7 @@ export interface ModQuickFilterProps {
  * ModQuickFilter - Quick search/filter input component for data grids
  *
  * Uses MUI X DataGrid's QuickFilterControl with Moderne design system styling.
- * Search icon, clear button, and spacing from the design tokens.
+ * Styled to match the Figma design with search icon, clear button, and proper spacing.
  *
  * **Note:** This component must be used within a DataGrid context (inside a DataGrid component's toolbar).
  *

package/dist/Tag/Tag.d.ts

@@ -32,7 +32,7 @@ export type ModTagOwnProps = {
     intent?: 'default' | 'error' | 'warning' | 'success' | 'info' | 'violet' | 'beta';
     /**
      * Corner treatment. `square` = borderRadius.xS, `rounded` = borderRadius.full.
-     * Deliberately defaults to `square` even though the design's Shape default differs —
+     * Deliberately defaults to `square` even though Figma's Shape default differs —
      * this keeps existing consumers rendering unchanged. Don't "fix" it.
      * @default "square"
      */

package/dist/Toast/Toast.d.ts

@@ -3,7 +3,7 @@ import Button from '@mui/material/Button';
 import type { ReactNode } from 'react';
 type Intent = 'neutral' | 'info' | 'success' | 'error' | 'warning';
 /**
- * @deprecated The design no longer has Filled/Outlined styles. Retained for API
+ * @deprecated The Figma design no longer has Filled/Outlined styles. Retained for API
  * compatibility only; all toasts render the single tinted style.
  */
 type ToastType = 'outlined' | 'filled';
@@ -14,7 +14,7 @@ export interface ModToastProps extends Omit<AlertProps, 'variant' | 'severity' |
      */
     intent?: Intent;
     /**
-     * @deprecated The design no longer has Filled/Outlined styles. Ignored; all
+     * @deprecated The Figma design no longer has Filled/Outlined styles. Ignored; all
      * toasts render the single tinted style.
      */
     type?: ToastType;
@@ -56,7 +56,7 @@ export declare const ModToastButton: {
         primary?: boolean;
         intent?: Intent;
         /**
-         * @deprecated The design no longer has Filled/Outlined styles. Ignored.
+         * @deprecated The Figma design no longer has Filled/Outlined styles. Ignored.
          */
         type?: ToastType;
         children: ReactNode;

package/dist/index.d.ts

@@ -43,7 +43,7 @@ import { TreeItemProps } from '@mui/x-tree-view/TreeItem';
 import { RichTreeViewProProps } from '@mui/x-tree-view-pro/RichTreeViewPro';
 
 /**
- * ModDataGridColumnsPanel - Custom columns panel for ModDataGrid
+ * ModDataGridColumnsPanel - Custom columns panel for ModDataGrid matching Figma design
  *
  * A styled columns panel that integrates with MUI DataGrid's column visibility system.
  * Features:
@@ -382,7 +382,7 @@ interface ModBadgeProps extends Omit<ChipProps, 'variant' | 'size'> {
     variant?: BadgeVariant;
     /**
      * Corner treatment. `square` = borderRadius.xS, `rounded` = borderRadius.full.
-     * Deliberately defaults to `square` even though the design's Shape default differs —
+     * Deliberately defaults to `square` even though Figma's Shape default differs —
      * this keeps existing consumers rendering unchanged. Don't "fix" it.
      * @default "square"
      */
@@ -451,6 +451,8 @@ declare const ModBanner: {
 
 /**
  * ModBreadcrumbs - Navigation breadcrumb component
+ *
+ * @see https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4563-122872
  */
 interface ModBreadcrumbsProps {
     /** Breadcrumb items as Link elements */
@@ -792,7 +794,7 @@ interface ModCheckboxWithTextProps extends Omit<ModCheckboxProps, 'size'> {
 /**
  * ModCheckboxWithText - Checkbox with label and supporting text
  *
- * Thin wrapper around ModCheckbox that maps the "Checkbox with text"
+ * Thin wrapper around ModCheckbox that maps the Figma "Checkbox with text"
  * component to the existing ModCheckbox with label + helperText.
  */
 declare const ModCheckboxWithText: {
@@ -940,7 +942,7 @@ declare const ModDataGridCellContent: {
     displayName: string;
 };
 /**
- * Row height configuration for DataGrid size variants
+ * Row height configuration for DataGrid size variants (from Figma specs)
  * - compact: 42px
  * - standard: 48px
  * - comfortable: 56px
@@ -1341,7 +1343,7 @@ declare const ModDownloadToast: {
 };
 
 /**
- * Filled status icons — sourced from the published design library components
+ * Filled status icons — sourced from the published Figma library components
  * Filled_Success / Filled_Queued / Filled_Info / Filled_Warning / Filled_Error /
  * Filled_Neutral / Filled_Canceled.
  *
@@ -1725,7 +1727,7 @@ interface ModListItemButtonProps extends ListItemButtonProps {
  * </ModListItemButton>
  * ```
  *
- * Design Tokens Used (hex values omitted — they are generated and drift):
+ * Design Tokens Used (hex values omitted — they are generated from Figma and drift):
  * - semanticColors.buttons.primary.default - Active border
  * - semanticColors.border.primary - Default/disabled border
  * - semanticColors.icons.default - Active icon color
@@ -1757,7 +1759,7 @@ interface ModLoadingSpinnerProps {
  * ModLoadingSpinner - Animated loading spinner component
  *
  * A circular loading spinner with a partial arc that rotates continuously.
- * Based on the design system button loading icon.
+ * Based on the Figma design system button loading icon.
  *
  * @example
  * <ModLoadingSpinner />
@@ -1803,19 +1805,19 @@ declare const ModMenu: {
 type ModMenuItemOwnProps = {
     /**
      * Optional icon to display on the left side
-     * Note: Not expressible as a design-tool property (ReactNode)
+     * Note: Cannot be directly mapped from Figma (ReactNode)
      */
     icon?: ReactNode;
     /**
      * Optional keyboard shortcut to display on the right side
      * @example "⌘+P" or "Ctrl+K"
-     * Note: Not expressible as a design-tool property (ReactNode/string)
+     * Note: Cannot be directly mapped from Figma (ReactNode/string)
      */
     shortcut?: string;
     /**
      * Optional secondary text to display next to the primary label
      * @example "@username" or supporting text
-     * Note: Not expressible as a design-tool property (ReactNode/string)
+     * Note: Cannot be directly mapped from Figma (ReactNode/string)
      */
     secondaryText?: string;
     /**
@@ -1866,7 +1868,7 @@ type ModMenuItemProps<C extends ElementType = typeof MenuItem> = ModMenuItemOwnP
  *   View profile
  * </ModMenuItem>
  *
- * // With secondary text (user list pattern)
+ * // With secondary text (user list pattern from Figma node 4305:41844)
  * <ModMenuItem secondaryText="@phoenix">Phoenix Baker</ModMenuItem>
  * <ModMenuItem secondaryText="@olivia">Olivia Rhye</ModMenuItem>
  *
@@ -2155,7 +2157,7 @@ type ModTagOwnProps = {
     intent?: 'default' | 'error' | 'warning' | 'success' | 'info' | 'violet' | 'beta';
     /**
      * Corner treatment. `square` = borderRadius.xS, `rounded` = borderRadius.full.
-     * Deliberately defaults to `square` even though the design's Shape default differs —
+     * Deliberately defaults to `square` even though Figma's Shape default differs —
      * this keeps existing consumers rendering unchanged. Don't "fix" it.
      * @default "square"
      */
@@ -2458,7 +2460,7 @@ interface ModQuickFilterProps {
  * ModQuickFilter - Quick search/filter input component for data grids
  *
  * Uses MUI X DataGrid's QuickFilterControl with Moderne design system styling.
- * Search icon, clear button, and spacing from the design tokens.
+ * Styled to match the Figma design with search icon, clear button, and proper spacing.
  *
  * **Note:** This component must be used within a DataGrid context (inside a DataGrid component's toolbar).
  *
@@ -2857,7 +2859,7 @@ declare const ModTab: {
 
 type Intent = 'neutral' | 'info' | 'success' | 'error' | 'warning';
 /**
- * @deprecated The design no longer has Filled/Outlined styles. Retained for API
+ * @deprecated The Figma design no longer has Filled/Outlined styles. Retained for API
  * compatibility only; all toasts render the single tinted style.
  */
 type ToastType = 'outlined' | 'filled';
@@ -2868,7 +2870,7 @@ interface ModToastProps extends Omit<AlertProps, 'variant' | 'severity' | 'color
      */
     intent?: Intent;
     /**
-     * @deprecated The design no longer has Filled/Outlined styles. Ignored; all
+     * @deprecated The Figma design no longer has Filled/Outlined styles. Ignored; all
      * toasts render the single tinted style.
      */
     type?: ToastType;
@@ -2910,7 +2912,7 @@ declare const ModToastButton: {
         primary?: boolean;
         intent?: Intent;
         /**
-         * @deprecated The design no longer has Filled/Outlined styles. Ignored.
+         * @deprecated The Figma design no longer has Filled/Outlined styles. Ignored.
          */
         type?: ToastType;
         children: ReactNode;

package/dist/index.esm.js

@@ -126,7 +126,7 @@ const StyledChip$3 = styled(Chip, {
     borderRadius: badgeShape === 'rounded' ? borderRadius.full : borderRadius.xS,
     fontSize: theme.typography.pxToRem(typography.fontSize.xs),
     lineHeight: 1,
-    // Labels track at 0. Digit legibility comes from tabular figures
+    // Figma tracks labels at 0. Digit legibility comes from tabular figures
     // instead, which leaves word labels alone (moderne-ui#8686).
     fontVariantNumeric: 'tabular-nums',
     fontWeight: typography.fontWeight.medium,
@@ -172,7 +172,7 @@ const djb2Hash = (str) => {
 /**
  * Deterministically derives an avatar color index (1-7) from a string seed,
  * selecting one of the avatar.initials semantic token triplets
- * (text/background/border).
+ * (text/background/border) defined in Figma.
  */
 const avatarIndexFromSeed = (seed) => seed ? ((djb2Hash(seed) % 7) + 1) : undefined;
 
@@ -284,7 +284,7 @@ const ModDataGridCellContent = ({ children, ...props }) => {
 };
 ModDataGridCellContent.displayName = 'ModDataGridCellContent';
 /**
- * Row height configuration for DataGrid size variants
+ * Row height configuration for DataGrid size variants (from Figma specs)
  * - compact: 42px
  * - standard: 48px
  * - comfortable: 56px
@@ -330,7 +330,7 @@ const ACTIVITY_COLORS$1 = {
  */
 const HeaderContainer = styled(Box)(({ size }) => {
     // Use shared row heights from DataGridCell to ensure consistency
-    // Sizes: compact (42px), standard (48px), comfortable (56px)
+    // Figma specs: compact (42px), standard (48px), comfortable (56px)
     return {
         width: '34px',
         height: `${modRowHeights[size]}px`,
@@ -962,7 +962,7 @@ const ModButtonTab = ({ children, ...props }) => {
 ModButtonTab.displayName = 'ModButtonTab';
 
 /**
- * Styled toggle button group that implements the "Button tab group" design.
+ * Styled toggle button group that implements the Figma "Button tab group" design.
  *
  * Built on MUI ToggleButtonGroup which provides:
  * - Selection state management (value/onChange/exclusive)
@@ -1306,7 +1306,7 @@ const HelperText$2 = styled('span')(({ theme, size = 'medium' }) => ({
     color: semanticColors.color.text.secondary,
 }));
 // xs focus-ring radius — no matching design token (box corner comes from the icon)
-const XS_FOCUS_RING_RADIUS = 1;
+const FIGMA_XS_BORDER_RADIUS = 1;
 const StyledCheckbox = styled(Checkbox, {
     shouldForwardProp: prop => prop !== 'size',
 })(({ size = 'medium' }) => {
@@ -1314,7 +1314,7 @@ const StyledCheckbox = styled(Checkbox, {
     const sizeConfig = {
         xs: {
             size: 12,
-            borderRadius: XS_FOCUS_RING_RADIUS,
+            borderRadius: FIGMA_XS_BORDER_RADIUS,
         },
         small: {
             size: 16,
@@ -1422,7 +1422,7 @@ ModCheckbox.displayName = 'ModCheckbox';
 /**
  * ModCheckboxWithText - Checkbox with label and supporting text
  *
- * Thin wrapper around ModCheckbox that maps the "Checkbox with text"
+ * Thin wrapper around ModCheckbox that maps the Figma "Checkbox with text"
  * component to the existing ModCheckbox with label + helperText.
  */
 const ModCheckboxWithText = ({ size = 'small', ...props }) => {
@@ -1547,7 +1547,7 @@ const panelSurfaceStyles = {
 };
 const getDataGridHeaderStyles = () => {
     return {
-        // Header cell container styles: bg, border, padding
+        // Header cell container styles - from Figma: bg, border, padding
         [`& .${gridClasses.columnHeader}`]: {
             backgroundColor: semanticColors.color.surface.dataGrid.header,
             borderBottom: `1px solid ${semanticColors.color.border.primary}`,
@@ -1578,7 +1578,7 @@ const getDataGridHeaderStyles = () => {
         [`& .${gridClasses.columnHeader}:hover .${gridClasses.columnHeaderTitle}`]: {
             color: semanticColors.color.text.primary,
         },
-        // Style the checkbox in header to match design system (16x16)
+        // Style the checkbox in header to match design system (16x16 from Figma)
         [`& .${gridClasses.columnHeaderCheckbox}`]: {
             padding: 0,
             [`& .${checkboxClasses.root}`]: {
@@ -1695,7 +1695,7 @@ const ColumnItemContainer = styled(Box)(({ theme }) => ({
     paddingLeft: spacing.spacing_3_4,
     paddingRight: spacing.spacing_3_4,
 }));
-// Border radius for menu items — no matching design token
+// Figma-exact border radius for menu items — no matching design token
 const MENU_ITEM_BORDER_RADIUS = 6;
 const MenuItemContent$1 = styled('div')(() => ({
     display: 'flex',
@@ -1881,7 +1881,7 @@ const Shortcut = styled('span')(({ theme }) => ({
  *   View profile
  * </ModMenuItem>
  *
- * // With secondary text (user list pattern)
+ * // With secondary text (user list pattern from Figma node 4305:41844)
  * <ModMenuItem secondaryText="@phoenix">Phoenix Baker</ModMenuItem>
  * <ModMenuItem secondaryText="@olivia">Olivia Rhye</ModMenuItem>
  *
@@ -2121,7 +2121,7 @@ const StyledGridFilterPanel = styled(GridFilterPanel)({
     '& legend': {
         display: 'none',
     },
-    // Buttons - design system styling
+    // Buttons - design system styling (matching Figma 4594-163847)
     // Add filter button (first button)
     [`& .${gridClasses.panelFooter} .${buttonClasses.root}:first-child`]: {
         textTransform: 'none',
@@ -2625,7 +2625,7 @@ const StyledIconOnlyButton = styled(ModButtonBase)(({ size = 'medium' }) => {
         },
     };
 });
-// Nav variant - standalone styled MUI IconButton (no design-system counterpart)
+// Nav variant - standalone styled MUI IconButton (not backed by Figma)
 const navOnlyProps = ['size', 'variant', 'active'];
 const StyledNavButton = styled(IconButton, {
     shouldForwardProp: prop => !navOnlyProps.includes(prop),
@@ -2826,7 +2826,7 @@ const StyledDateRangePicker = styled(DateRangePicker)(({ theme }) => ({
 const ClearIcon = () => jsx(X, { size: 20, color: semanticColors.color.icon.placeholder });
 // Custom calendar icon component
 const CalendarIcon = () => jsx(CalendarDays, { size: 20, color: semanticColors.color.icon.placeholder });
-// Shortcut styles matching the list item design (no borders, plain text)
+// Shortcut styles to match Figma list item design (no borders, plain text)
 const shortcutChipStyles = {
     // Container (MuiList) styles
     paddingY: `${spacing.spacing_1_1_2}px`,
@@ -3258,7 +3258,7 @@ const SpinnerWrapper = styled('div')({
  * ModLoadingSpinner - Animated loading spinner component
  *
  * A circular loading spinner with a partial arc that rotates continuously.
- * Based on the design system button loading icon.
+ * Based on the Figma design system button loading icon.
  *
  * @example
  * <ModLoadingSpinner />
@@ -3723,7 +3723,7 @@ const StyledFormHelperText = styled(FormHelperText, {
     return {
         marginLeft: 0,
         marginRight: 0,
-        // Helper text is 14px
+        // Figma specifies 14px for helper text
         fontSize: theme.typography.pxToRem(typography.fontSize.sm),
         color: semanticColors.color.text.inputHelper,
         [`&.${formHelperTextClasses.error}`]: {
@@ -3840,7 +3840,7 @@ const StyledListItemButton$1 = styled(ListItemButton, {
         borderRadius: spacing.spacing_3_4, // 6px
         backgroundColor: semanticColors.input.bg,
         gap: config.gap,
-        // Icon is always centered vertically
+        // Icon is always centered vertically per Figma design
         alignItems: 'center',
         transition: theme.transitions.create(['background-color'], {
             duration: theme.transitions.duration.short,
@@ -3856,7 +3856,7 @@ const StyledListItemButton$1 = styled(ListItemButton, {
             }),
         },
         // Primary text styling
-        // Font weight varies by size:
+        // Font weight varies by size per Figma:
         // - Default: small/medium use 400, large/xlarge/xxlarge use 500
         // - Link: xxlarge uses 600, others use their default weight
         '& .list-item-primary': {
@@ -3914,7 +3914,7 @@ const StyledListItemButton$1 = styled(ListItemButton, {
             backgroundColor: semanticColors.input.bg,
         },
         // Selected/Active state
-        // Font weights by size:
+        // Font weights per Figma:
         // - Primary: small/medium/xxlarge use 500, large/xlarge use 600
         // - Secondary: large/xlarge use 500, xxlarge uses 400
         [`&.${listItemButtonClasses.selected}`]: {
@@ -4136,7 +4136,7 @@ function cardVariantStyles(theme) {
  * </ModListItemButton>
  * ```
  *
- * Design Tokens Used (hex values omitted — they are generated and drift):
+ * Design Tokens Used (hex values omitted — they are generated from Figma and drift):
  * - semanticColors.buttons.primary.default - Active border
  * - semanticColors.border.primary - Default/disabled border
  * - semanticColors.icons.default - Active icon color
@@ -4700,7 +4700,7 @@ const variantConfig = {
         color: semanticColors.color.text.primary,
     },
     brand: {
-        // snackbarBrand is one of the few tokens fixed across both modes, so
+        // snackbarBrand is one of the few tokens Figma fixes across both modes, so
         // its foreground must be fixed too. typography.tooltip.default flips
         // (#ffffff -> #232342), which would put dark navy on dark blue in dark mode.
         backgroundColor: semanticColors.color.surface.snackbarBrand,
@@ -4719,7 +4719,7 @@ const StyledTooltip = styled(({ className, ...props }) => jsx(Tooltip, { ...prop
     const variantStyles = variantConfig[variant];
     return {
         // Style the tooltip content. Padding/line-height/radius are uniform
-        // regardless of whether a description is present — the design defines a
+        // regardless of whether a description is present — Figma defines a
         // single tooltip treatment (title + optional content), not two.
         [`& .${tooltipClasses.tooltip}`]: {
             backgroundColor: variantStyles.backgroundColor,
@@ -5119,7 +5119,7 @@ const StyledTextField = styled(TextField)(({ theme }) => ({
  * ModQuickFilter - Quick search/filter input component for data grids
  *
  * Uses MUI X DataGrid's QuickFilterControl with Moderne design system styling.
- * Search icon, clear button, and spacing from the design tokens.
+ * Styled to match the Figma design with search icon, clear button, and proper spacing.
  *
  * **Note:** This component must be used within a DataGrid context (inside a DataGrid component's toolbar).
  *
@@ -5150,7 +5150,7 @@ const ModQuickFilter = ({ placeholder = 'Search...', onKeyDown, autoFocus = fals
 };
 ModQuickFilter.displayName = 'ModQuickFilter';
 
-// Custom radio icons
+// Custom radio icons to match Figma design
 const UncheckedIcon = ({ size, disabled }) => {
     const dimensions = size === 'small' ? 16 : 20;
     const radius = size === 'small' ? 8 : 10;
@@ -6260,7 +6260,7 @@ const StyledToolbar = styled(Toolbar)(({ theme }) => ({
     backgroundColor: semanticColors.color.surface.raised,
     minHeight: 'auto',
     justifyContent: 'space-between',
-    // Apply padding directly (16px horizontal, 12px vertical)
+    // Apply padding directly to match Figma design (16px horizontal, 12px vertical)
     paddingTop: spacing.spacing_1_1_2, // 12px
     paddingBottom: spacing.spacing_1_1_2, // 12px
     paddingLeft: spacing.spacing_2, // 16px
@@ -6444,7 +6444,7 @@ const StyledTreeView = styled(RichTreeViewPro)({
     },
 });
 
-// Border radius for toggle buttons — no matching design token
+// Figma-exact border radius for toggle buttons — no matching design token
 const TOGGLE_BUTTON_BORDER_RADIUS = 14;
 const StyledToggleButtonGroup = styled(MuiToggleButtonGroup)(({ theme }) => ({
     backgroundColor: semanticColors.color.surface.raised,