@moderneinc/neo-styled-components 2.5.0-next.3268eb → 2.5.0-next.3773dc

package/dist/Avatar/Avatar.d.ts

@@ -20,8 +20,9 @@ export interface NeoAvatarProps extends Omit<AvatarProps, 'variant'> {
  *
  * Figma Props Mapping:
  * - Figma Type "Initials" → variant="initials", size="small" (20px)
- * - Figma Type "Small" → variant="circular", size="small" (20px with image)
+ * - Figma Type "Small" → variant="circular", size="small" (32px with image)
  * - Figma Type "Medium" → variant="circular", size="medium" (44px white container with image)
+ * - State: Focus → CSS :focus-visible ring (2px white inner + 4px blue outer)
  * - State: Hover (tooltip) → Wrap component with MUI Tooltip
  *
  * Usage:

package/dist/Button/Button.d.ts

@@ -1,5 +1,5 @@
-import { type ButtonBaseProps } from '@mui/material/ButtonBase';
-import type { ReactNode } from 'react';
+import ButtonBase from '@mui/material/ButtonBase';
+import React, { type ElementType, type ReactNode } from 'react';
 declare module '@mui/material/ButtonBase' {
     interface ButtonBasePropsVariantOverrides {
         primary: true;
@@ -7,11 +7,12 @@ declare module '@mui/material/ButtonBase' {
         destructive: true;
         link: true;
         linkColor: true;
+        tertiary: true;
     }
 }
-type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'link' | 'linkColor';
+type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'link' | 'linkColor' | 'tertiary';
 type ButtonSize = 'small' | 'medium';
-export interface NeoButtonProps extends Omit<ButtonBaseProps, 'children'> {
+type NeoButtonOwnProps = {
     /**
      * The visual variant of the button
      * @default "primary"
@@ -41,14 +42,25 @@ export interface NeoButtonProps extends Omit<ButtonBaseProps, 'children'> {
      * URL to link to. When provided, the button renders as a link element.
      */
     href?: string;
-}
+    /**
+     * Icon placed before the button label
+     */
+    startIcon?: ReactNode;
+    /**
+     * Icon placed after the button label
+     */
+    endIcon?: ReactNode;
+};
+export type NeoButtonProps<C extends ElementType = typeof ButtonBase> = NeoButtonOwnProps & Omit<React.ComponentPropsWithoutRef<C>, keyof NeoButtonOwnProps> & {
+    component?: C;
+};
 /**
  * NeoButton - Text button component based on MUI ButtonBase
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4086-7590
  *
  * Figma Props Mapping:
- * - Hierarchy (Primary|Secondary|Destructive|Link|Link Color) → variant prop
+ * - Hierarchy (Primary|Secondary|Destructive|Link|Link Color|Tertiary) → variant prop
  * - Size (Small|Medium) → size prop
  * - State=Disabled → disabled prop
  * - State=Loading → loading prop
@@ -56,8 +68,8 @@ export interface NeoButtonProps extends Omit<ButtonBaseProps, 'children'> {
  * - State=Pressed → CSS :active
  * - State=Focused → CSS :focus-visible
  */
-export declare const NeoButton: {
-    ({ variant, size, loading, children, disabled, ...props }: NeoButtonProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare function NeoButton<C extends ElementType = typeof ButtonBase>({ variant, size, loading, children, disabled, startIcon, endIcon, ...rest }: NeoButtonProps<C>): import("react/jsx-runtime").JSX.Element;
+export declare namespace NeoButton {
+    var displayName: string;
+}
 export {};

package/dist/SearchChip/SearchChip.d.ts

@@ -0,0 +1,19 @@
+import { type InputBaseProps } from '@mui/material/InputBase';
+export interface NeoSearchChipProps extends Omit<InputBaseProps, 'startAdornment' | 'endAdornment' | 'type'> {
+    /**
+     * Handler for clearing the search value (shows X icon when provided and value is non-empty)
+     */
+    onClear?: () => void;
+}
+/**
+ * NeoSearchChip - Pill-shaped search input for inline search functionality.
+ *
+ * @example
+ * <NeoSearchChip placeholder="Search titles" value={query} onChange={handleChange} onClear={handleClear} />
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=8542-921
+ */
+export declare const NeoSearchChip: {
+    ({ onClear, value, ...props }: NeoSearchChipProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/index.d.ts

@@ -6,8 +6,8 @@ import { AvatarProps } from '@mui/material/Avatar';
 import { ChipProps } from '@mui/material/Chip';
 import { AlertProps } from '@mui/material/Alert';
 import { LinkProps } from '@mui/material/Link';
-import * as _mui_material_ButtonBase from '@mui/material/ButtonBase';
-import { ButtonBaseProps } from '@mui/material/ButtonBase';
+import * as ButtonBase from '@mui/material/ButtonBase';
+import ButtonBase__default, { ButtonBaseProps } from '@mui/material/ButtonBase';
 import { ButtonGroupProps } from '@mui/material/ButtonGroup';
 import { CheckboxProps } from '@mui/material/Checkbox';
 import { GridDensity as GridDensity$1, DataGridProProps, GridSlots, ToolbarProps, GridColumnsPanelProps } from '@mui/x-data-grid-pro';
@@ -302,8 +302,9 @@ interface NeoAvatarProps extends Omit<AvatarProps, 'variant'> {
  *
  * Figma Props Mapping:
  * - Figma Type "Initials" → variant="initials", size="small" (20px)
- * - Figma Type "Small" → variant="circular", size="small" (20px with image)
+ * - Figma Type "Small" → variant="circular", size="small" (32px with image)
  * - Figma Type "Medium" → variant="circular", size="medium" (44px white container with image)
+ * - State: Focus → CSS :focus-visible ring (2px white inner + 4px blue outer)
  * - State: Hover (tooltip) → Wrap component with MUI Tooltip
  *
  * Usage:
@@ -488,11 +489,12 @@ declare module '@mui/material/ButtonBase' {
         destructive: true;
         link: true;
         linkColor: true;
+        tertiary: true;
     }
 }
-type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'link' | 'linkColor';
+type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'link' | 'linkColor' | 'tertiary';
 type ButtonSize = 'small' | 'medium';
-interface NeoButtonProps extends Omit<ButtonBaseProps, 'children'> {
+type NeoButtonOwnProps = {
     /**
      * The visual variant of the button
      * @default "primary"
@@ -522,14 +524,25 @@ interface NeoButtonProps extends Omit<ButtonBaseProps, 'children'> {
      * URL to link to. When provided, the button renders as a link element.
      */
     href?: string;
-}
+    /**
+     * Icon placed before the button label
+     */
+    startIcon?: ReactNode;
+    /**
+     * Icon placed after the button label
+     */
+    endIcon?: ReactNode;
+};
+type NeoButtonProps<C extends ElementType = typeof ButtonBase__default> = NeoButtonOwnProps & Omit<React__default.ComponentPropsWithoutRef<C>, keyof NeoButtonOwnProps> & {
+    component?: C;
+};
 /**
  * NeoButton - Text button component based on MUI ButtonBase
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4086-7590
  *
  * Figma Props Mapping:
- * - Hierarchy (Primary|Secondary|Destructive|Link|Link Color) → variant prop
+ * - Hierarchy (Primary|Secondary|Destructive|Link|Link Color|Tertiary) → variant prop
  * - Size (Small|Medium) → size prop
  * - State=Disabled → disabled prop
  * - State=Loading → loading prop
@@ -537,10 +550,10 @@ interface NeoButtonProps extends Omit<ButtonBaseProps, 'children'> {
  * - State=Pressed → CSS :active
  * - State=Focused → CSS :focus-visible
  */
-declare const NeoButton: {
-    ({ variant, size, loading, children, disabled, ...props }: NeoButtonProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
+declare function NeoButton<C extends ElementType = typeof ButtonBase__default>({ variant, size, loading, children, disabled, startIcon, endIcon, ...rest }: NeoButtonProps<C>): react_jsx_runtime.JSX.Element;
+declare namespace NeoButton {
+    var displayName: string;
+}
 
 type ButtonGroupSize = 'small' | 'medium';
 interface NeoButtonGroupProps extends Omit<ButtonGroupProps, 'size' | 'variant'> {
@@ -1646,6 +1659,41 @@ declare const NeoModalFooter: {
     displayName: string;
 };
 
+interface NeoNavigationItemProps extends Omit<ButtonBaseProps, 'children'> {
+    /**
+     * Icon element to display
+     */
+    icon?: ReactNode;
+    /**
+     * Text label below the icon
+     */
+    label?: string;
+    /**
+     * Whether the item is selected/active
+     * @figma State (Selected)
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Optional tag badge content (e.g., count)
+     * @figma Tag
+     */
+    tag?: string;
+    /**
+     * Additional content
+     */
+    children?: ReactNode;
+}
+/**
+ * NeoNavigationItem - Vertical navigation item with icon, label, and optional tag
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=8455-6120
+ */
+declare const NeoNavigationItem: {
+    ({ icon, label, selected, tag, children, ...props }: NeoNavigationItemProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
 /**
  * Breadcrumb item configuration
  */
@@ -1962,6 +2010,25 @@ declare const NeoRadio: {
     displayName: string;
 };
 
+interface NeoSearchChipProps extends Omit<InputBaseProps, 'startAdornment' | 'endAdornment' | 'type'> {
+    /**
+     * Handler for clearing the search value (shows X icon when provided and value is non-empty)
+     */
+    onClear?: () => void;
+}
+/**
+ * NeoSearchChip - Pill-shaped search input for inline search functionality.
+ *
+ * @example
+ * <NeoSearchChip placeholder="Search titles" value={query} onChange={handleChange} onClear={handleClear} />
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=8542-921
+ */
+declare const NeoSearchChip: {
+    ({ onClear, value, ...props }: NeoSearchChipProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
 /**
  * Extended props for NeoSkeleton component
  */
@@ -2544,7 +2611,7 @@ declare const NeoTooltip: {
     displayName: string;
 };
 
-declare const StyledToggleButton: StyledComponent<_mui_material_ToggleButton.ToggleButtonOwnProps & Omit<_mui_material_ButtonBase.ButtonBaseOwnProps, "classes"> & _mui_material_OverridableComponent.CommonProps & Omit<React$1.DetailedHTMLProps<React$1.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style" | "color" | "size" | "children" | "sx" | "className" | "tabIndex" | "onChange" | "onClick" | "classes" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "value" | "fullWidth" | "selected"> & _mui_system.MUIStyledCommonProps<_mui_material_styles.Theme>, {}, {}>;
+declare const StyledToggleButton: StyledComponent<_mui_material_ToggleButton.ToggleButtonOwnProps & Omit<ButtonBase.ButtonBaseOwnProps, "classes"> & _mui_material_OverridableComponent.CommonProps & Omit<React$1.DetailedHTMLProps<React$1.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style" | "color" | "size" | "children" | "sx" | "className" | "tabIndex" | "onChange" | "onClick" | "classes" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "value" | "fullWidth" | "selected"> & _mui_system.MUIStyledCommonProps<_mui_material_styles.Theme>, {}, {}>;
 interface NeoTypologyControlProps extends Omit<ToggleButtonGroupProps, 'orientation'> {
 }
 /**
@@ -2804,5 +2871,5 @@ declare module '@mui/x-data-grid-pro' {
 
 declare const version: string
 
-export { ActivityScene, CIRCLE_RADIUS, NeoActivityHeader, NeoActivityIndicatorCell, NeoAvatar, NeoBadge, NeoBanner, NeoBreadcrumbLink, NeoBreadcrumbs, NeoButton, NeoButtonGroup, NeoCheckbox, NeoCodeSnippet, NeoDataGrid, NeoDataGridCellContent, NeoDataGridColumnsButton, NeoDataGridColumnsPanel, NeoDataGridFilterPanel, NeoDataGridFilterPanelAddIcon, NeoDataGridFilterPanelDeleteIcon, NeoDataGridFilterPanelRemoveAllIcon, NeoDataGridFiltersButton, NeoDataGridHeaderLabel, NeoSelect as NeoDataGridSelect, NeoDatePicker, NeoDivider, NeoDot, NeoFilterChip, NeoFooter, NeoIconButton, NeoInfiniteScrollGrid, NeoInputField, NeoListItem, NeoListItemButton, NeoLoadingSpinner, NeoMarketplaceCard, NeoMenu, NeoMenuItem, NeoModal, NeoModalContent, NeoModalFooter, NeoModalHeader, NeoMultiBadgesCell, NeoPageContent, NeoPaginatedGrid, NeoProgressbar, NeoQuickFilter, NeoRadio, NeoSelect, NeoMenuItem as NeoSelectOption, NeoSkeleton, NeoStatusBadgeCell, NeoStatusBanner, NeoTab, NeoTabs, NeoTag, NeoToast, NeoToastButton, NeoToggle, NeoToolbar, NeoTooltip, StyledToggleButton as NeoTypologyButton, NeoTypologyControl, NeoUserAvatarCell, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, getDataGridHeaderStyles, version };
-export type { ActivityColor, ActivityEvent, ActivityHeaderSize, BreadcrumbItem, DataGridSize, NeoActivityHeaderProps, NeoActivityIndicatorCellProps, NeoAvatarProps, NeoBadgeProps, NeoBannerProps, NeoBreadcrumbLinkProps, NeoBreadcrumbsProps, NeoButtonGroupProps, NeoButtonProps, NeoCheckboxProps, NeoCodeSnippetProps, NeoDataGridCellContentProps, NeoDataGridHeaderLabelProps, NeoDataGridProps, NeoDatePickerProps, NeoDividerProps, NeoDotProps, NeoFilterChipProps, NeoFooterProps, NeoIconButtonProps, NeoInfiniteScrollGridProps, NeoInputFieldProps, NeoListItemButtonProps, NeoListItemProps, NeoLoadingSpinnerProps, NeoMarketplaceCardProps, NeoMenuItemProps, NeoMenuProps, NeoModalContentProps, NeoModalFooterProps, NeoModalHeaderProps, NeoModalProps, NeoMultiBadgesCellProps, NeoPageContentProps, NeoPaginatedGridProps, NeoProgressbarProps, NeoQuickFilterProps, NeoRadioProps, NeoSelectProps, NeoSkeletonProps, NeoStatusBadgeCellProps, NeoStatusBannerProps, NeoTabProps, NeoTagProps, NeoToastProps, NeoToggleProps, NeoToolbarProps, NeoTooltipProps, NeoTypologyControlProps, NeoUserAvatarCellProps };
+export { ActivityScene, CIRCLE_RADIUS, NeoActivityHeader, NeoActivityIndicatorCell, NeoAvatar, NeoBadge, NeoBanner, NeoBreadcrumbLink, NeoBreadcrumbs, NeoButton, NeoButtonGroup, NeoCheckbox, NeoCodeSnippet, NeoDataGrid, NeoDataGridCellContent, NeoDataGridColumnsButton, NeoDataGridColumnsPanel, NeoDataGridFilterPanel, NeoDataGridFilterPanelAddIcon, NeoDataGridFilterPanelDeleteIcon, NeoDataGridFilterPanelRemoveAllIcon, NeoDataGridFiltersButton, NeoDataGridHeaderLabel, NeoSelect as NeoDataGridSelect, NeoDatePicker, NeoDivider, NeoDot, NeoFilterChip, NeoFooter, NeoIconButton, NeoInfiniteScrollGrid, NeoInputField, NeoListItem, NeoListItemButton, NeoLoadingSpinner, NeoMarketplaceCard, NeoMenu, NeoMenuItem, NeoModal, NeoModalContent, NeoModalFooter, NeoModalHeader, NeoMultiBadgesCell, NeoNavigationItem, NeoPageContent, NeoPaginatedGrid, NeoProgressbar, NeoQuickFilter, NeoRadio, NeoSearchChip, NeoSelect, NeoMenuItem as NeoSelectOption, NeoSkeleton, NeoStatusBadgeCell, NeoStatusBanner, NeoTab, NeoTabs, NeoTag, NeoToast, NeoToastButton, NeoToggle, NeoToolbar, NeoTooltip, StyledToggleButton as NeoTypologyButton, NeoTypologyControl, NeoUserAvatarCell, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, getDataGridHeaderStyles, version };
+export type { ActivityColor, ActivityEvent, ActivityHeaderSize, BreadcrumbItem, DataGridSize, NeoActivityHeaderProps, NeoActivityIndicatorCellProps, NeoAvatarProps, NeoBadgeProps, NeoBannerProps, NeoBreadcrumbLinkProps, NeoBreadcrumbsProps, NeoButtonGroupProps, NeoButtonProps, NeoCheckboxProps, NeoCodeSnippetProps, NeoDataGridCellContentProps, NeoDataGridHeaderLabelProps, NeoDataGridProps, NeoDatePickerProps, NeoDividerProps, NeoDotProps, NeoFilterChipProps, NeoFooterProps, NeoIconButtonProps, NeoInfiniteScrollGridProps, NeoInputFieldProps, NeoListItemButtonProps, NeoListItemProps, NeoLoadingSpinnerProps, NeoMarketplaceCardProps, NeoMenuItemProps, NeoMenuProps, NeoModalContentProps, NeoModalFooterProps, NeoModalHeaderProps, NeoModalProps, NeoMultiBadgesCellProps, NeoNavigationItemProps, NeoPageContentProps, NeoPaginatedGridProps, NeoProgressbarProps, NeoQuickFilterProps, NeoRadioProps, NeoSearchChipProps, NeoSelectProps, NeoSkeletonProps, NeoStatusBadgeCellProps, NeoStatusBannerProps, NeoTabProps, NeoTagProps, NeoToastProps, NeoToggleProps, NeoToolbarProps, NeoTooltipProps, NeoTypologyControlProps, NeoUserAvatarCellProps };

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { semanticColors, colors, spacing, typography, borderRadius, shadows } from '@moderneinc/neo-design';
+import { shadows, semanticColors, colors, spacing, typography, borderRadius } from '@moderneinc/neo-design';
 import Box from '@mui/material/Box';
 import { styled, alpha } from '@mui/material/styles';
 import Avatar from '@mui/material/Avatar';
@@ -7,7 +7,7 @@ import Chip, { chipClasses } from '@mui/material/Chip';
 import SvgIcon, { svgIconClasses } from '@mui/material/SvgIcon';
 import Alert, { alertClasses } from '@mui/material/Alert';
 import IconButton, { iconButtonClasses } from '@mui/material/IconButton';
-import { forwardRef, createElement, useState, useMemo, useRef, useEffect } from 'react';
+import React, { forwardRef, createElement, useState, useMemo, useRef, useEffect } from 'react';
 import Breadcrumbs, { breadcrumbsClasses } from '@mui/material/Breadcrumbs';
 import Link from '@mui/material/Link';
 import ButtonBase, { buttonBaseClasses } from '@mui/material/ButtonBase';
@@ -60,21 +60,39 @@ import Switch, { switchClasses } from '@mui/material/Switch';
 import ToggleButton, { toggleButtonClasses } from '@mui/material/ToggleButton';
 import ToggleButtonGroup, { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';
 
+const focusRingShadow$2 = `${shadows.focusWhite1.x}px ${shadows.focusWhite1.y}px ${shadows.focusWhite1.blur}px ${shadows.focusWhite1.spread}px ${shadows.focusWhite1.shadow}, ${shadows.focusBlue2.x}px ${shadows.focusBlue2.y}px ${shadows.focusBlue2.blur}px ${shadows.focusBlue2.spread}px ${shadows.focusBlue2.shadow}`;
 // biome-ignore lint/suspicious/noExplicitAny: Type cast required to override MUI Avatar variant type without global augmentation
 const StyledAvatar = styled(Avatar, {
     shouldForwardProp: prop => prop !== 'size' && prop !== 'variant',
 })(({ theme, size = 'medium', variant = 'circular' }) => ({
+    boxSizing: 'border-box',
     borderRadius: borderRadius.full,
     fontSize: theme.typography.pxToRem(typography.fontSize.xs),
     fontWeight: typography.fontWeight.regular,
     lineHeight: 1.5,
-    // Size variants
-    ...(size === 'small' && {
+    // Size variants — dimensions match Figma bounding boxes (border-box)
+    ...(size === 'small' &&
+        variant === 'circular' && {
+        width: spacing.spacing_4,
+        height: spacing.spacing_4,
+        fontSize: theme.typography.pxToRem(typography.fontSize.xs),
+    }),
+    ...(size === 'small' &&
+        variant === 'initials' && {
         width: spacing.spacing_2_1_2,
         height: spacing.spacing_2_1_2,
         fontSize: theme.typography.pxToRem(typography.fontSize.xs),
     }),
-    ...(size === 'medium' && {
+    // Medium circular fills its AvatarContainer (container owns the 44px dimension)
+    ...(size === 'medium' &&
+        variant === 'circular' && {
+        width: '100%',
+        height: '100%',
+        fontSize: theme.typography.pxToRem(typography.fontSize.sm),
+    }),
+    // Medium initials has no container, so it owns its 44px dimension
+    ...(size === 'medium' &&
+        variant === 'initials' && {
         width: spacing.spacing_5_1_2,
         height: spacing.spacing_5_1_2,
         fontSize: theme.typography.pxToRem(typography.fontSize.sm),
@@ -90,20 +108,29 @@ const StyledAvatar = styled(Avatar, {
         backgroundColor: 'transparent',
         border: `2px solid ${semanticColors.surfaces.white}`,
     }),
+    '&:focus-visible': {
+        outline: 'none',
+        boxShadow: focusRingShadow$2,
+    },
 }));
 const AvatarContainer = styled(Box)(({ size = 'medium' }) => ({
+    boxSizing: 'border-box',
     ...(size === 'medium' && {
         width: spacing.spacing_5_1_2,
         height: spacing.spacing_5_1_2,
         backgroundColor: semanticColors.surfaces.white,
         borderRadius: borderRadius.full,
-        padding: spacing.spacing_1_2,
+        padding: spacing.spacing_1_4,
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
         overflow: 'hidden',
         boxShadow: `${shadows.neutralSmall.x}px ${shadows.neutralSmall.y}px ${shadows.neutralSmall.blur}px ${shadows.neutralSmall.spread}px ${shadows.neutralSmall.shadow}`,
     }),
+    '&:focus-within': {
+        outline: 'none',
+        boxShadow: focusRingShadow$2,
+    },
 }));
 /**
  * NeoAvatar - User avatar component based on MUI Avatar
@@ -112,8 +139,9 @@ const AvatarContainer = styled(Box)(({ size = 'medium' }) => ({
  *
  * Figma Props Mapping:
  * - Figma Type "Initials" → variant="initials", size="small" (20px)
- * - Figma Type "Small" → variant="circular", size="small" (20px with image)
+ * - Figma Type "Small" → variant="circular", size="small" (32px with image)
  * - Figma Type "Medium" → variant="circular", size="medium" (44px white container with image)
+ * - State: Focus → CSS :focus-visible ring (2px white inner + 4px blue outer)
  * - State: Hover (tooltip) → Wrap component with MUI Tooltip
  *
  * Usage:
@@ -1262,6 +1290,28 @@ const StyledButtonBase$1 = styled(ButtonBase, {
                     },
                 }),
         },
+        tertiary: {
+            backgroundColor: 'transparent',
+            color: semanticColors.typography.input.default,
+            border: 'none',
+            padding: 0,
+            lineHeight: 1,
+            '&:hover': {
+                backgroundColor: 'transparent',
+                color: semanticColors.buttons.tertiary.hover,
+            },
+            '&:active': {
+                color: semanticColors.buttons.tertiary.pressed,
+            },
+            ...(loading
+                ? {}
+                : {
+                    [`&.${buttonBaseClasses.disabled}`]: {
+                        backgroundColor: 'transparent',
+                        color: semanticColors.buttons.tertiary.disabled,
+                    },
+                }),
+        },
     };
     return {
         ...baseStyles,
@@ -1276,6 +1326,7 @@ const LoadingSpinner = styled(CircularProgress)(({ theme, $variant }) => {
         destructive: theme.palette.common.white,
         link: semanticColors.buttons.primary.default,
         linkColor: semanticColors.buttons.primary.default,
+        tertiary: semanticColors.buttons.tertiary.default,
     };
     return {
         color: spinnerColors[$variant],
@@ -1287,7 +1338,7 @@ const LoadingSpinner = styled(CircularProgress)(({ theme, $variant }) => {
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4086-7590
  *
  * Figma Props Mapping:
- * - Hierarchy (Primary|Secondary|Destructive|Link|Link Color) → variant prop
+ * - Hierarchy (Primary|Secondary|Destructive|Link|Link Color|Tertiary) → variant prop
  * - Size (Small|Medium) → size prop
  * - State=Disabled → disabled prop
  * - State=Loading → loading prop
@@ -1295,9 +1346,9 @@ const LoadingSpinner = styled(CircularProgress)(({ theme, $variant }) => {
  * - State=Pressed → CSS :active
  * - State=Focused → CSS :focus-visible
  */
-const NeoButton = ({ variant = 'primary', size = 'medium', loading = false, children, disabled, ...props }) => {
-    return (jsx(StyledButtonBase$1, { variant: variant, size: size, loading: loading, disabled: disabled || loading, ...props, children: loading ? jsx(LoadingSpinner, { "$variant": variant, size: size === 'small' ? 16 : 20 }) : children }));
-};
+function NeoButton({ variant = 'primary', size = 'medium', loading = false, children, disabled, startIcon, endIcon, ...rest }) {
+    return (jsx(StyledButtonBase$1, { variant: variant, size: size, loading: loading, disabled: disabled || loading, ...rest, children: loading ? (jsx(LoadingSpinner, { "$variant": variant, size: size === 'small' ? 16 : 20 })) : (jsxs(React.Fragment, { children: [startIcon, children, endIcon] })) }));
+}
 NeoButton.displayName = 'NeoButton';
 
 /**
@@ -1457,6 +1508,8 @@ const HelperText$2 = styled('span')(({ theme, size = 'medium' }) => ({
     lineHeight: size === 'xs' ? 1.5 : size === 'small' ? 1.4 : 1.5,
     color: semanticColors.typography.bodySecondary,
 }));
+// Figma-exact border radius for xs checkbox — no matching design token
+const FIGMA_XS_BORDER_RADIUS = 1;
 const StyledCheckbox = styled(Checkbox, {
     shouldForwardProp: prop => prop !== 'size',
 })(({ size = 'medium' }) => {
@@ -1464,8 +1517,7 @@ const StyledCheckbox = styled(Checkbox, {
     const sizeConfig = {
         xs: {
             size: 12,
-            // biome-ignore plugin: Figma-exact 1px for xs — no matching token
-            borderRadius: 1, // From Figma: 1px for xs
+            borderRadius: FIGMA_XS_BORDER_RADIUS,
         },
         small: {
             size: 16,
@@ -1758,13 +1810,14 @@ const ColumnItemContainer = styled(Box)(({ theme }) => ({
     paddingLeft: theme.spacing(0.75),
     paddingRight: theme.spacing(0.75),
 }));
+// Figma-exact border radius for menu items — no matching design token
+const MENU_ITEM_BORDER_RADIUS = 6;
 const MenuItemContent$1 = styled('div')(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     gap: theme.spacing(1),
     padding: theme.spacing(1),
-    // biome-ignore plugin: no exact token for 6px
-    borderRadius: 6,
+    borderRadius: MENU_ITEM_BORDER_RADIUS,
     width: '100%',
     '&:hover': {
         backgroundColor: semanticColors.surfaces.listHover,
@@ -3532,7 +3585,7 @@ const NeoDot = ({ size = 'medium', variant = 'solid', color = 'neutral', ...prop
 };
 NeoDot.displayName = 'NeoDot';
 
-const focusRing = `${shadows.focusWhite1.x}px ${shadows.focusWhite1.y}px ${shadows.focusWhite1.blur}px ${shadows.focusWhite1.spread}px ${shadows.focusWhite1.shadow}, ${shadows.focusBlue2.x}px ${shadows.focusBlue2.y}px ${shadows.focusBlue2.blur}px ${shadows.focusBlue2.spread}px ${shadows.focusBlue2.shadow}`;
+const focusRing$1 = `${shadows.focusWhite1.x}px ${shadows.focusWhite1.y}px ${shadows.focusWhite1.blur}px ${shadows.focusWhite1.spread}px ${shadows.focusWhite1.shadow}, ${shadows.focusBlue2.x}px ${shadows.focusBlue2.y}px ${shadows.focusBlue2.blur}px ${shadows.focusBlue2.spread}px ${shadows.focusBlue2.shadow}`;
 const filterChipOnlyProps = ['selected', 'expanded', 'selectedLabel', 'count', 'onClear'];
 const StyledChip = styled(Chip, {
     shouldForwardProp: prop => !filterChipOnlyProps.includes(prop),
@@ -3569,7 +3622,7 @@ const StyledChip = styled(Chip, {
         backgroundColor: semanticColors.buttons.secondary.hoverBackground,
     },
     [`&.${chipClasses.focusVisible}`]: {
-        boxShadow: focusRing,
+        boxShadow: focusRing$1,
         backgroundColor: selected
             ? semanticColors.buttons.secondary.pressedBackground
             : semanticColors.surfaces.white,
@@ -4740,7 +4793,7 @@ const HeaderTitle = styled('span', {
     shouldForwardProp: prop => prop !== 'cardTheme',
 })(({ cardTheme = 'light' }) => ({
     fontFamily: `${typography.fontFamily.heading}, sans-serif`,
-    fontWeight: 600,
+    fontWeight: typography.fontWeight.semiBold,
     fontSize: typography.fontSize.h6,
     lineHeight: 1.4,
     color: cardTheme === 'light' ? colors.grey[800] : semanticColors.surfaces.white,
@@ -4750,7 +4803,7 @@ const Description = styled('p', {
     shouldForwardProp: prop => prop !== 'cardTheme',
 })(({ cardTheme = 'light' }) => ({
     fontFamily: `${typography.fontFamily.body}, sans-serif`,
-    fontWeight: 400,
+    fontWeight: typography.fontWeight.regular,
     fontSize: typography.fontSize.xs,
     lineHeight: 1.5,
     color: cardTheme === 'light' ? colors.grey[800] : semanticColors.surfaces.white,
@@ -5653,6 +5706,72 @@ const NeoRadio = ({ size = 'medium', label, helperText, disabled, ...props }) =>
 };
 NeoRadio.displayName = 'NeoRadio';
 
+const focusRing = `${shadows.focusWhite1.x}px ${shadows.focusWhite1.y}px ${shadows.focusWhite1.blur}px ${shadows.focusWhite1.spread}px ${shadows.focusWhite1.shadow}, ${shadows.focusBlue2.x}px ${shadows.focusBlue2.y}px ${shadows.focusBlue2.blur}px ${shadows.focusBlue2.spread}px ${shadows.focusBlue2.shadow}`;
+const StyledSearchChip = styled(InputBase)(({ theme }) => ({
+    borderRadius: borderRadius.full,
+    border: `1px solid ${semanticColors.buttons.secondary.defaultBorder}`,
+    backgroundColor: semanticColors.surfaces.white,
+    height: 40,
+    padding: `0 ${spacing.spacing_1_1_2}px`,
+    gap: spacing.spacing_1_2,
+    fontSize: theme.typography.pxToRem(typography.fontSize.sm),
+    fontWeight: typography.fontWeight.medium,
+    lineHeight: 1,
+    color: semanticColors.typography.input.default,
+    cursor: 'text',
+    boxSizing: 'border-box',
+    [`& .${inputBaseClasses.input}`]: {
+        padding: '0 2px',
+        height: 'auto',
+        lineHeight: 1,
+        '&::placeholder': {
+            color: semanticColors.typography.input.placeholder,
+            opacity: 1,
+        },
+        // Hide native browser clear button for type="search" (we provide our own)
+        '&::-webkit-search-cancel-button': {
+            WebkitAppearance: 'none',
+        },
+    },
+    '&:hover': {
+        backgroundColor: semanticColors.buttons.secondary.hoverBackground,
+    },
+    [`&.${inputBaseClasses.focused}`]: {
+        boxShadow: focusRing,
+        backgroundColor: semanticColors.surfaces.white,
+    },
+}));
+const ClearButton = styled(ButtonBase)({
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 16,
+    height: 16,
+    padding: 0,
+    border: 'none',
+    backgroundColor: 'transparent',
+    cursor: 'pointer',
+    color: semanticColors.icons.default,
+    flexShrink: 0,
+    borderRadius: borderRadius.full,
+    '&:hover': {
+        backgroundColor: semanticColors.buttons.secondary.hoverBackground,
+    },
+});
+/**
+ * NeoSearchChip - Pill-shaped search input for inline search functionality.
+ *
+ * @example
+ * <NeoSearchChip placeholder="Search titles" value={query} onChange={handleChange} onClear={handleClear} />
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=8542-921
+ */
+const NeoSearchChip = ({ onClear, value, ...props }) => {
+    const hasValue = Boolean(value && String(value).length > 0);
+    return (jsx(StyledSearchChip, { type: "search", value: value, startAdornment: jsx(Search, { size: 16, color: semanticColors.icons.placeholder, style: { flexShrink: 0 } }), endAdornment: hasValue && onClear ? (jsx(ClearButton, { type: "button", onClick: onClear, "aria-label": "Clear search", children: jsx(X, { size: 16 }) })) : undefined, ...props }));
+};
+NeoSearchChip.displayName = 'NeoSearchChip';
+
 const StyledSkeleton = styled(Skeleton, {
     shouldForwardProp: prop => prop !== 'colorTheme' && prop !== 'position',
 })(({ theme, colorTheme = 'light', position = 'start' }) => ({
@@ -6415,6 +6534,8 @@ const NeoTooltip = ({ variant = 'light', title, description, children, arrow = f
 };
 NeoTooltip.displayName = 'NeoTooltip';
 
+// Figma-exact border radius for toggle buttons — no matching design token
+const TOGGLE_BUTTON_BORDER_RADIUS = 14;
 const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
     backgroundColor: colors.grey[50],
     padding: theme.spacing(0.625, 0.875),
@@ -6422,17 +6543,14 @@ const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
     gap: 0,
     [`& .${toggleButtonGroupClasses.grouped}`]: {
         border: 'none',
-        // biome-ignore plugin: no exact token for 14px
-        borderRadius: 14,
+        borderRadius: TOGGLE_BUTTON_BORDER_RADIUS,
         margin: 0,
         '&:not(:first-of-type)': {
-            // biome-ignore plugin: no exact token for 14px
-            borderRadius: 14,
+            borderRadius: TOGGLE_BUTTON_BORDER_RADIUS,
             marginLeft: 0,
         },
         '&:not(:last-of-type)': {
-            // biome-ignore plugin: no exact token for 14px
-            borderRadius: 14,
+            borderRadius: TOGGLE_BUTTON_BORDER_RADIUS,
         },
     },
 }));
@@ -6485,5 +6603,5 @@ NeoTypologyControl.displayName = 'NeoTypologyControl';
 
 const version = '0.0.0-development';
 
-export { ActivityScene, CIRCLE_RADIUS, NeoActivityHeader, NeoActivityIndicatorCell, NeoAvatar, NeoBadge, NeoBanner, NeoBreadcrumbLink, NeoBreadcrumbs, NeoButton, NeoButtonGroup, NeoCheckbox, NeoCodeSnippet, NeoDataGrid, NeoDataGridCellContent, NeoDataGridColumnsButton, NeoDataGridColumnsPanel, NeoDataGridFilterPanel, NeoDataGridFilterPanelAddIcon, NeoDataGridFilterPanelDeleteIcon, NeoDataGridFilterPanelRemoveAllIcon, NeoDataGridFiltersButton, NeoDataGridHeaderLabel, NeoSelect as NeoDataGridSelect, NeoDatePicker, NeoDivider, NeoDot, NeoFilterChip, NeoFooter, NeoIconButton, NeoIconWrapper, NeoInfiniteScrollGrid, NeoInputField, NeoListItem, NeoListItemButton, NeoLoadingSpinner, NeoMarketplaceCard, NeoMarketplaceLargeCard, NeoMenu, NeoMenuItem, NeoModal, NeoModalContent, NeoModalFooter, NeoModalHeader, NeoMultiBadgesCell, NeoNavigationItem, NeoPageContent, NeoPaginatedGrid, NeoProgressbar, NeoQuickFilter, NeoRadio, NeoSelect, NeoMenuItem as NeoSelectOption, NeoSkeleton, NeoStatusBadgeCell, NeoStatusBanner, NeoTab, NeoTabs, NeoTag, NeoToast, NeoToastButton, NeoToggle, NeoToolbar, NeoTooltip, StyledToggleButton as NeoTypologyButton, NeoTypologyControl, NeoUserAvatarCell, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, getDataGridHeaderStyles, neoRowHeights, version };
+export { ActivityScene, CIRCLE_RADIUS, NeoActivityHeader, NeoActivityIndicatorCell, NeoAvatar, NeoBadge, NeoBanner, NeoBreadcrumbLink, NeoBreadcrumbs, NeoButton, NeoButtonGroup, NeoCheckbox, NeoCodeSnippet, NeoDataGrid, NeoDataGridCellContent, NeoDataGridColumnsButton, NeoDataGridColumnsPanel, NeoDataGridFilterPanel, NeoDataGridFilterPanelAddIcon, NeoDataGridFilterPanelDeleteIcon, NeoDataGridFilterPanelRemoveAllIcon, NeoDataGridFiltersButton, NeoDataGridHeaderLabel, NeoSelect as NeoDataGridSelect, NeoDatePicker, NeoDivider, NeoDot, NeoFilterChip, NeoFooter, NeoIconButton, NeoIconWrapper, NeoInfiniteScrollGrid, NeoInputField, NeoListItem, NeoListItemButton, NeoLoadingSpinner, NeoMarketplaceCard, NeoMarketplaceLargeCard, NeoMenu, NeoMenuItem, NeoModal, NeoModalContent, NeoModalFooter, NeoModalHeader, NeoMultiBadgesCell, NeoNavigationItem, NeoPageContent, NeoPaginatedGrid, NeoProgressbar, NeoQuickFilter, NeoRadio, NeoSearchChip, NeoSelect, NeoMenuItem as NeoSelectOption, NeoSkeleton, NeoStatusBadgeCell, NeoStatusBanner, NeoTab, NeoTabs, NeoTag, NeoToast, NeoToastButton, NeoToggle, NeoToolbar, NeoTooltip, StyledToggleButton as NeoTypologyButton, NeoTypologyControl, NeoUserAvatarCell, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, getDataGridHeaderStyles, neoRowHeights, version };
 //# sourceMappingURL=index.esm.js.map