@moderneinc/design-system-components 7.4.1-next.b09733 → 7.5.0-next.230cdc

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 Figma's Shape default differs —
+     * Deliberately defaults to `square` even though the design's Shape default differs —
      * this keeps existing consumers rendering unchanged. Don't "fix" it.
      * @default "square"
      */

package/dist/Breadcrumbs/Breadcrumbs.d.ts

@@ -2,8 +2,6 @@ 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 Figma "Checkbox with text"
+ * Thin wrapper around ModCheckbox that maps the "Checkbox with text"
  * component to the existing ModCheckbox with label + helperText.
  */
 export declare const ModCheckboxWithText: {

package/dist/DataGrid/DataGrid.styles.d.ts

@@ -10,5 +10,13 @@ import type { SxProps, Theme } from '@mui/material/styles';
 export declare const panelSurfaceStyles: {
     readonly backgroundColor: "var(--mod-color-surface-raised)";
 };
-export declare const getDataGridHeaderStyles: () => SxProps<Theme>;
+/**
+ * `resizable` picks header-title overflow. User-draggable widths truncate,
+ * since wrapped labels grow the header row mid-drag; the ellipsis also
+ * restores MUI's full-label tooltip, which needs `overflow: hidden`. Fixed
+ * widths wrap. Grid-level only: MUI has no per-column resizability class.
+ */
+export declare const getDataGridHeaderStyles: ({ resizable, }?: {
+    resizable?: boolean;
+}) => SxProps<Theme>;
 export declare const getDataGridRowStyles: () => SxProps<Theme>;

package/dist/DataGridCell/DataGridCell.d.ts

@@ -44,7 +44,7 @@ export declare const ModDataGridCellContent: {
     displayName: string;
 };
 /**
- * Row height configuration for DataGrid size variants (from Figma specs)
+ * Row height configuration for DataGrid size variants
  * - 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 matching Figma design
+ * ModDataGridColumnsPanel - Custom columns panel for ModDataGrid
  *
  * 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 Figma library components
+ * Filled status icons — sourced from the published design 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 from Figma and drift):
+ * Design Tokens Used (hex values omitted — they are generated 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 Figma design system button loading icon.
+ * Based on the 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: Cannot be directly mapped from Figma (ReactNode)
+     * Note: Not expressible as a design-tool property (ReactNode)
      */
     icon?: ReactNode;
     /**
      * Optional keyboard shortcut to display on the right side
      * @example "⌘+P" or "Ctrl+K"
-     * Note: Cannot be directly mapped from Figma (ReactNode/string)
+     * Note: Not expressible as a design-tool property (ReactNode/string)
      */
     shortcut?: string;
     /**
      * Optional secondary text to display next to the primary label
      * @example "@username" or supporting text
-     * Note: Cannot be directly mapped from Figma (ReactNode/string)
+     * Note: Not expressible as a design-tool property (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 from Figma node 4305:41844)
+ * // With secondary text (user list pattern)
  * <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.
- * Styled to match the Figma design with search icon, clear button, and proper spacing.
+ * Search icon, clear button, and spacing from the design tokens.
  *
  * **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 Figma's Shape default differs —
+     * Deliberately defaults to `square` even though the design'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 Figma design no longer has Filled/Outlined styles. Retained for API
+ * @deprecated The 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 Figma design no longer has Filled/Outlined styles. Ignored; all
+     * @deprecated The 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 Figma design no longer has Filled/Outlined styles. Ignored.
+         * @deprecated The 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 matching Figma design
+ * ModDataGridColumnsPanel - Custom columns panel for ModDataGrid
  *
  * 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 Figma's Shape default differs —
+     * Deliberately defaults to `square` even though the design's Shape default differs —
      * this keeps existing consumers rendering unchanged. Don't "fix" it.
      * @default "square"
      */
@@ -451,8 +451,6 @@ 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 */
@@ -794,7 +792,7 @@ interface ModCheckboxWithTextProps extends Omit<ModCheckboxProps, 'size'> {
 /**
  * ModCheckboxWithText - Checkbox with label and supporting text
  *
- * Thin wrapper around ModCheckbox that maps the Figma "Checkbox with text"
+ * Thin wrapper around ModCheckbox that maps the "Checkbox with text"
  * component to the existing ModCheckbox with label + helperText.
  */
 declare const ModCheckboxWithText: {
@@ -895,7 +893,15 @@ declare namespace ModDataGrid {
     var displayName: string;
 }
 
-declare const getDataGridHeaderStyles: () => SxProps<Theme>;
+/**
+ * `resizable` picks header-title overflow. User-draggable widths truncate,
+ * since wrapped labels grow the header row mid-drag; the ellipsis also
+ * restores MUI's full-label tooltip, which needs `overflow: hidden`. Fixed
+ * widths wrap. Grid-level only: MUI has no per-column resizability class.
+ */
+declare const getDataGridHeaderStyles: ({ resizable, }?: {
+    resizable?: boolean;
+}) => SxProps<Theme>;
 declare const getDataGridRowStyles: () => SxProps<Theme>;
 
 interface ModDataGridCellContentProps extends HTMLAttributes<HTMLDivElement> {
@@ -942,7 +948,7 @@ declare const ModDataGridCellContent: {
     displayName: string;
 };
 /**
- * Row height configuration for DataGrid size variants (from Figma specs)
+ * Row height configuration for DataGrid size variants
  * - compact: 42px
  * - standard: 48px
  * - comfortable: 56px
@@ -1343,7 +1349,7 @@ declare const ModDownloadToast: {
 };
 
 /**
- * Filled status icons — sourced from the published Figma library components
+ * Filled status icons — sourced from the published design library components
  * Filled_Success / Filled_Queued / Filled_Info / Filled_Warning / Filled_Error /
  * Filled_Neutral / Filled_Canceled.
  *
@@ -1727,7 +1733,7 @@ interface ModListItemButtonProps extends ListItemButtonProps {
  * </ModListItemButton>
  * ```
  *
- * Design Tokens Used (hex values omitted — they are generated from Figma and drift):
+ * Design Tokens Used (hex values omitted — they are generated and drift):
  * - semanticColors.buttons.primary.default - Active border
  * - semanticColors.border.primary - Default/disabled border
  * - semanticColors.icons.default - Active icon color
@@ -1759,7 +1765,7 @@ interface ModLoadingSpinnerProps {
  * ModLoadingSpinner - Animated loading spinner component
  *
  * A circular loading spinner with a partial arc that rotates continuously.
- * Based on the Figma design system button loading icon.
+ * Based on the design system button loading icon.
  *
  * @example
  * <ModLoadingSpinner />
@@ -1805,19 +1811,19 @@ declare const ModMenu: {
 type ModMenuItemOwnProps = {
     /**
      * Optional icon to display on the left side
-     * Note: Cannot be directly mapped from Figma (ReactNode)
+     * Note: Not expressible as a design-tool property (ReactNode)
      */
     icon?: ReactNode;
     /**
      * Optional keyboard shortcut to display on the right side
      * @example "⌘+P" or "Ctrl+K"
-     * Note: Cannot be directly mapped from Figma (ReactNode/string)
+     * Note: Not expressible as a design-tool property (ReactNode/string)
      */
     shortcut?: string;
     /**
      * Optional secondary text to display next to the primary label
      * @example "@username" or supporting text
-     * Note: Cannot be directly mapped from Figma (ReactNode/string)
+     * Note: Not expressible as a design-tool property (ReactNode/string)
      */
     secondaryText?: string;
     /**
@@ -1868,7 +1874,7 @@ type ModMenuItemProps<C extends ElementType = typeof MenuItem> = ModMenuItemOwnP
  *   View profile
  * </ModMenuItem>
  *
- * // With secondary text (user list pattern from Figma node 4305:41844)
+ * // With secondary text (user list pattern)
  * <ModMenuItem secondaryText="@phoenix">Phoenix Baker</ModMenuItem>
  * <ModMenuItem secondaryText="@olivia">Olivia Rhye</ModMenuItem>
  *
@@ -2157,7 +2163,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 Figma's Shape default differs —
+     * Deliberately defaults to `square` even though the design's Shape default differs —
      * this keeps existing consumers rendering unchanged. Don't "fix" it.
      * @default "square"
      */
@@ -2460,7 +2466,7 @@ interface ModQuickFilterProps {
  * ModQuickFilter - Quick search/filter input component for data grids
  *
  * Uses MUI X DataGrid's QuickFilterControl with Moderne design system styling.
- * Styled to match the Figma design with search icon, clear button, and proper spacing.
+ * Search icon, clear button, and spacing from the design tokens.
  *
  * **Note:** This component must be used within a DataGrid context (inside a DataGrid component's toolbar).
  *
@@ -2859,7 +2865,7 @@ declare const ModTab: {
 
 type Intent = 'neutral' | 'info' | 'success' | 'error' | 'warning';
 /**
- * @deprecated The Figma design no longer has Filled/Outlined styles. Retained for API
+ * @deprecated The design no longer has Filled/Outlined styles. Retained for API
  * compatibility only; all toasts render the single tinted style.
  */
 type ToastType = 'outlined' | 'filled';
@@ -2870,7 +2876,7 @@ interface ModToastProps extends Omit<AlertProps, 'variant' | 'severity' | 'color
      */
     intent?: Intent;
     /**
-     * @deprecated The Figma design no longer has Filled/Outlined styles. Ignored; all
+     * @deprecated The design no longer has Filled/Outlined styles. Ignored; all
      * toasts render the single tinted style.
      */
     type?: ToastType;
@@ -2912,7 +2918,7 @@ declare const ModToastButton: {
         primary?: boolean;
         intent?: Intent;
         /**
-         * @deprecated The Figma design no longer has Filled/Outlined styles. Ignored.
+         * @deprecated The 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,
-    // Figma tracks labels at 0. Digit legibility comes from tabular figures
+    // Labels track 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) defined in Figma.
+ * (text/background/border).
  */
 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 (from Figma specs)
+ * Row height configuration for DataGrid size variants
  * - 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
-    // Figma specs: compact (42px), standard (48px), comfortable (56px)
+    // Sizes: 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 Figma "Button tab group" design.
+ * Styled toggle button group that implements the "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 FIGMA_XS_BORDER_RADIUS = 1;
+const XS_FOCUS_RING_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: FIGMA_XS_BORDER_RADIUS,
+            borderRadius: XS_FOCUS_RING_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 Figma "Checkbox with text"
+ * Thin wrapper around ModCheckbox that maps the "Checkbox with text"
  * component to the existing ModCheckbox with label + helperText.
  */
 const ModCheckboxWithText = ({ size = 'small', ...props }) => {
@@ -1545,9 +1545,15 @@ ModCodeSnippet.displayName = 'ModCodeSnippet';
 const panelSurfaceStyles = {
     backgroundColor: semanticColors.color.surface.raised,
 };
-const getDataGridHeaderStyles = () => {
+/**
+ * `resizable` picks header-title overflow. User-draggable widths truncate,
+ * since wrapped labels grow the header row mid-drag; the ellipsis also
+ * restores MUI's full-label tooltip, which needs `overflow: hidden`. Fixed
+ * widths wrap. Grid-level only: MUI has no per-column resizability class.
+ */
+const getDataGridHeaderStyles = ({ resizable = false, } = {}) => {
     return {
-        // Header cell container styles - from Figma: bg, border, padding
+        // Header cell container styles: bg, border, padding
         [`& .${gridClasses.columnHeader}`]: {
             backgroundColor: semanticColors.color.surface.dataGrid.header,
             borderBottom: `1px solid ${semanticColors.color.border.primary}`,
@@ -1571,14 +1577,15 @@ const getDataGridHeaderStyles = () => {
             ...semanticTypography.table.header,
             color: semanticColors.color.text.tertiary,
             transition: 'color 0.2s',
-            textOverflow: 'clip',
-            whiteSpace: 'break-spaces',
+            ...(resizable
+                ? { textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }
+                : { textOverflow: 'clip', whiteSpace: 'break-spaces' }),
         },
         // Change text color on hover
         [`& .${gridClasses.columnHeader}:hover .${gridClasses.columnHeaderTitle}`]: {
             color: semanticColors.color.text.primary,
         },
-        // Style the checkbox in header to match design system (16x16 from Figma)
+        // Style the checkbox in header to match design system (16x16)
         [`& .${gridClasses.columnHeaderCheckbox}`]: {
             padding: 0,
             [`& .${checkboxClasses.root}`]: {
@@ -1593,6 +1600,7 @@ const getDataGridHeaderStyles = () => {
         },
         // MUI clips this container when padding leaves < 16px of content area, which
         // crops the sort icon. Guards callers that shrink height.table.header.
+        // NOTE: MUI's own minWidth: 0 here keeps title truncation working despite `visible`.
         [`& .${gridClasses.columnHeaderTitleContainer}`]: {
             overflow: 'visible',
             lineHeight: 1,
@@ -1695,7 +1703,7 @@ const ColumnItemContainer = styled(Box)(({ theme }) => ({
     paddingLeft: spacing.spacing_3_4,
     paddingRight: spacing.spacing_3_4,
 }));
-// Figma-exact border radius for menu items — no matching design token
+// Border radius for menu items — no matching design token
 const MENU_ITEM_BORDER_RADIUS = 6;
 const MenuItemContent$1 = styled('div')(() => ({
     display: 'flex',
@@ -1881,7 +1889,7 @@ const Shortcut = styled('span')(({ theme }) => ({
  *   View profile
  * </ModMenuItem>
  *
- * // With secondary text (user list pattern from Figma node 4305:41844)
+ * // With secondary text (user list pattern)
  * <ModMenuItem secondaryText="@phoenix">Phoenix Baker</ModMenuItem>
  * <ModMenuItem secondaryText="@olivia">Olivia Rhye</ModMenuItem>
  *
@@ -2121,7 +2129,7 @@ const StyledGridFilterPanel = styled(GridFilterPanel)({
     '& legend': {
         display: 'none',
     },
-    // Buttons - design system styling (matching Figma 4594-163847)
+    // Buttons - design system styling
     // Add filter button (first button)
     [`& .${gridClasses.panelFooter} .${buttonClasses.root}:first-child`]: {
         textTransform: 'none',
@@ -2358,7 +2366,7 @@ function ModDataGrid({ autoHeight = false, toolbar, slots, sx, density = 'standa
         [`&& .${gridClasses.filler}, && .${gridClasses.scrollbarFiller}`]: {
             backgroundColor: semanticColors.color.surface.dataGrid.default,
         },
-        ...getDataGridHeaderStyles(),
+        ...getDataGridHeaderStyles({ resizable: !props.disableColumnResize }),
         ...getDataGridRowStyles(),
         border: `1px solid ${semanticColors.color.border.primary}`,
         // Target `& svg` (not `.MuiSvgIcon-root`) to match the lucide icons
@@ -2625,7 +2633,7 @@ const StyledIconOnlyButton = styled(ModButtonBase)(({ size = 'medium' }) => {
         },
     };
 });
-// Nav variant - standalone styled MUI IconButton (not backed by Figma)
+// Nav variant - standalone styled MUI IconButton (no design-system counterpart)
 const navOnlyProps = ['size', 'variant', 'active'];
 const StyledNavButton = styled(IconButton, {
     shouldForwardProp: prop => !navOnlyProps.includes(prop),
@@ -2826,7 +2834,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 to match Figma list item design (no borders, plain text)
+// Shortcut styles matching the list item design (no borders, plain text)
 const shortcutChipStyles = {
     // Container (MuiList) styles
     paddingY: `${spacing.spacing_1_1_2}px`,
@@ -3258,7 +3266,7 @@ const SpinnerWrapper = styled('div')({
  * ModLoadingSpinner - Animated loading spinner component
  *
  * A circular loading spinner with a partial arc that rotates continuously.
- * Based on the Figma design system button loading icon.
+ * Based on the design system button loading icon.
  *
  * @example
  * <ModLoadingSpinner />
@@ -3723,7 +3731,7 @@ const StyledFormHelperText = styled(FormHelperText, {
     return {
         marginLeft: 0,
         marginRight: 0,
-        // Figma specifies 14px for helper text
+        // Helper text is 14px
         fontSize: theme.typography.pxToRem(typography.fontSize.sm),
         color: semanticColors.color.text.inputHelper,
         [`&.${formHelperTextClasses.error}`]: {
@@ -3840,7 +3848,7 @@ const StyledListItemButton$1 = styled(ListItemButton, {
         borderRadius: spacing.spacing_3_4, // 6px
         backgroundColor: semanticColors.input.bg,
         gap: config.gap,
-        // Icon is always centered vertically per Figma design
+        // Icon is always centered vertically
         alignItems: 'center',
         transition: theme.transitions.create(['background-color'], {
             duration: theme.transitions.duration.short,
@@ -3856,7 +3864,7 @@ const StyledListItemButton$1 = styled(ListItemButton, {
             }),
         },
         // Primary text styling
-        // Font weight varies by size per Figma:
+        // Font weight varies by size:
         // - Default: small/medium use 400, large/xlarge/xxlarge use 500
         // - Link: xxlarge uses 600, others use their default weight
         '& .list-item-primary': {
@@ -3914,7 +3922,7 @@ const StyledListItemButton$1 = styled(ListItemButton, {
             backgroundColor: semanticColors.input.bg,
         },
         // Selected/Active state
-        // Font weights per Figma:
+        // Font weights by size:
         // - Primary: small/medium/xxlarge use 500, large/xlarge use 600
         // - Secondary: large/xlarge use 500, xxlarge uses 400
         [`&.${listItemButtonClasses.selected}`]: {
@@ -4136,7 +4144,7 @@ function cardVariantStyles(theme) {
  * </ModListItemButton>
  * ```
  *
- * Design Tokens Used (hex values omitted — they are generated from Figma and drift):
+ * Design Tokens Used (hex values omitted — they are generated and drift):
  * - semanticColors.buttons.primary.default - Active border
  * - semanticColors.border.primary - Default/disabled border
  * - semanticColors.icons.default - Active icon color
@@ -4700,7 +4708,7 @@ const variantConfig = {
         color: semanticColors.color.text.primary,
     },
     brand: {
-        // snackbarBrand is one of the few tokens Figma fixes across both modes, so
+        // snackbarBrand is one of the few tokens fixed 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 +4727,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 — Figma defines a
+        // regardless of whether a description is present — the design defines a
         // single tooltip treatment (title + optional content), not two.
         [`& .${tooltipClasses.tooltip}`]: {
             backgroundColor: variantStyles.backgroundColor,
@@ -5119,7 +5127,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.
- * Styled to match the Figma design with search icon, clear button, and proper spacing.
+ * Search icon, clear button, and spacing from the design tokens.
  *
  * **Note:** This component must be used within a DataGrid context (inside a DataGrid component's toolbar).
  *
@@ -5150,7 +5158,7 @@ const ModQuickFilter = ({ placeholder = 'Search...', onKeyDown, autoFocus = fals
 };
 ModQuickFilter.displayName = 'ModQuickFilter';
 
-// Custom radio icons to match Figma design
+// Custom radio icons
 const UncheckedIcon = ({ size, disabled }) => {
     const dimensions = size === 'small' ? 16 : 20;
     const radius = size === 'small' ? 8 : 10;
@@ -5352,7 +5360,7 @@ const StyledSearchChip = styled(InputBase, {
         duration: theme.transitions.duration.short,
     }),
     [`& .${inputBaseClasses.input}`]: {
-        padding: '0 2px',
+        padding: `0 ${spacing.spacing_1_4}px`,
         height: 'auto',
         lineHeight: 1,
         '&::placeholder': {
@@ -6260,7 +6268,7 @@ const StyledToolbar = styled(Toolbar)(({ theme }) => ({
     backgroundColor: semanticColors.color.surface.raised,
     minHeight: 'auto',
     justifyContent: 'space-between',
-    // Apply padding directly to match Figma design (16px horizontal, 12px vertical)
+    // Apply padding directly (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 +6452,7 @@ const StyledTreeView = styled(RichTreeViewPro)({
     },
 });
 
-// Figma-exact border radius for toggle buttons — no matching design token
+// 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,