@moderneinc/neo-styled-components 3.0.0 → 4.0.0-next.3cddda

package/dist/index.d.ts

@@ -362,7 +362,7 @@ declare const NeoBadge: {
     displayName: string;
 };
 
-type Intent = 'info' | 'success' | 'error' | 'warning' | 'neutral';
+type Intent$2 = 'info' | 'success' | 'error' | 'warning' | 'neutral';
 type BannerType = 'outlined' | 'filled';
 interface NeoBannerProps extends Omit<AlertProps, 'variant' | 'severity' | 'color'> {
     /**
@@ -371,7 +371,7 @@ interface NeoBannerProps extends Omit<AlertProps, 'variant' | 'severity' | 'colo
      *
      * @figmaPropMapping Intention (Info|Success|Error|Warning|Neutral) → intent
      */
-    intent?: Intent;
+    intent?: Intent$2;
     /**
      * Visual type: outlined (light bg) or filled (solid bg)
      * @default "outlined"
@@ -1099,7 +1099,7 @@ declare namespace NeoDataGridFiltersButton {
     var displayName: string;
 }
 
-interface NeoDropdownMenuItemProps extends MenuItemProps {
+interface NeoMenuItemProps extends MenuItemProps {
     /**
      * Optional icon to display on the left side
      * Note: Cannot be directly mapped from Figma (ReactNode)
@@ -1124,49 +1124,49 @@ interface NeoDropdownMenuItemProps extends MenuItemProps {
     children?: ReactNode;
 }
 /**
- * NeoDropdownMenuItem - Dropdown menu item component based on MUI MenuItem
+ * NeoMenuItem - Menu item component based on MUI MenuItem
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4159-8584
  *
  * @example
  * ```tsx
  * // With icon and shortcut
- * <NeoDropdownMenuItem icon={<UserIcon />} shortcut="⌘+P">
+ * <NeoMenuItem icon={<UserIcon />} shortcut="⌘+P">
  *   View profile
- * </NeoDropdownMenuItem>
+ * </NeoMenuItem>
  *
  * // With secondary text (user list pattern from Figma node 4305:41844)
- * <NeoDropdownMenuItem secondaryText="@phoenix">Phoenix Baker</NeoDropdownMenuItem>
- * <NeoDropdownMenuItem secondaryText="@olivia">Olivia Rhye</NeoDropdownMenuItem>
+ * <NeoMenuItem secondaryText="@phoenix">Phoenix Baker</NeoMenuItem>
+ * <NeoMenuItem secondaryText="@olivia">Olivia Rhye</NeoMenuItem>
  *
  * // Disabled state
- * <NeoDropdownMenuItem disabled>Disabled item</NeoDropdownMenuItem>
+ * <NeoMenuItem disabled>Disabled item</NeoMenuItem>
  * ```
  */
-declare const NeoDropdownMenuItem: {
-    ({ icon, shortcut, secondaryText, children, ...props }: NeoDropdownMenuItemProps): react_jsx_runtime.JSX.Element;
+declare const NeoMenuItem: {
+    ({ icon, shortcut, secondaryText, children, ...props }: NeoMenuItemProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
-type NeoDropdownProps = SelectProps;
+type NeoSelectProps = SelectProps;
 /**
- * NeoDropdown - Dropdown select component with Neo design system styling
+ * NeoSelect - Select component with Neo design system styling
  *
  * A styled version of MUI's Select that uses Neo design tokens, Lucide ChevronDown icon,
- * and NeoDropdownMenu/NeoDropdownMenuItem for the dropdown list.
+ * and NeoMenu/NeoMenuItem for the dropdown list.
  *
  * @example
  * ```tsx
- * import { NeoDropdown, NeoDropdownOption } from '@moderneinc/neo-styled-components'
+ * import { NeoSelect, NeoSelectOption } from '@moderneinc/neo-styled-components'
  *
- * <NeoDropdown value={value} onChange={handleChange}>
- *   <NeoDropdownOption value="option1">Option 1</NeoDropdownOption>
- *   <NeoDropdownOption value="option2">Option 2</NeoDropdownOption>
- * </NeoDropdown>
+ * <NeoSelect value={value} onChange={handleChange}>
+ *   <NeoSelectOption value="option1">Option 1</NeoSelectOption>
+ *   <NeoSelectOption value="option2">Option 2</NeoSelectOption>
+ * </NeoSelect>
  * ```
  */
-declare const NeoDropdown: {
-    (props: NeoDropdownProps): react_jsx_runtime.JSX.Element;
+declare const NeoSelect: {
+    (props: NeoSelectProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -1267,11 +1267,11 @@ interface NeoDividerProps extends DividerProps {
  * @example
  * ```tsx
  * // In a menu
- * <NeoDropdownMenu>
- *   <NeoDropdownMenuItem>Settings</NeoDropdownMenuItem>
+ * <NeoMenu>
+ *   <NeoMenuItem>Settings</NeoMenuItem>
  *   <NeoDivider />
- *   <NeoDropdownMenuItem>Sign out</NeoDropdownMenuItem>
- * </NeoDropdownMenu>
+ *   <NeoMenuItem>Sign out</NeoMenuItem>
+ * </NeoMenu>
  *
  * // In a card
  * <Card>
@@ -1537,14 +1537,14 @@ declare const NeoLoadingSpinner: {
     displayName: string;
 };
 
-interface NeoDropdownMenuProps extends MenuProps {
+interface NeoMenuProps extends MenuProps {
     /**
-     * Menu content (typically NeoDropdownMenuItem components)
+     * Menu content (typically NeoMenuItem components)
      */
     children?: React.ReactNode;
 }
 /**
- * NeoDropdownMenu - Dropdown menu component based on MUI Menu
+ * NeoMenu - Menu component based on MUI Menu
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=11141-4980
  *
@@ -1554,18 +1554,18 @@ interface NeoDropdownMenuProps extends MenuProps {
  * const open = Boolean(anchorEl);
  *
  * <Button onClick={(e) => setAnchorEl(e.currentTarget)}>Open Menu</Button>
- * <NeoDropdownMenu
+ * <NeoMenu
  *   open={open}
  *   anchorEl={anchorEl}
  *   onClose={() => setAnchorEl(null)}
  * >
- *   <NeoDropdownMenuItem icon={<Icon />} shortcut="⌘+P">View profile</NeoDropdownMenuItem>
- *   <NeoDropdownMenuItem>Settings</NeoDropdownMenuItem>
- * </NeoDropdownMenu>
+ *   <NeoMenuItem icon={<Icon />} shortcut="⌘+P">View profile</NeoMenuItem>
+ *   <NeoMenuItem>Settings</NeoMenuItem>
+ * </NeoMenu>
  * ```
  */
-declare const NeoDropdownMenu: {
-    ({ children, ...props }: NeoDropdownMenuProps): react_jsx_runtime.JSX.Element;
+declare const NeoMenu: {
+    ({ children, ...props }: NeoMenuProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -1696,7 +1696,7 @@ declare const NeoNavigationAvatar: {
     displayName: string;
 };
 
-interface NeoNavigationItemProps extends Omit<ButtonBaseProps, 'children'> {
+type NeoNavigationItemOwnProps = {
     /**
      * Icon element to display
      */
@@ -1720,16 +1720,19 @@ interface NeoNavigationItemProps extends Omit<ButtonBaseProps, 'children'> {
      * Additional content
      */
     children?: ReactNode;
-}
+};
+type NeoNavigationItemProps<C extends ElementType = typeof ButtonBase__default> = NeoNavigationItemOwnProps & Omit<ButtonBaseProps, keyof NeoNavigationItemOwnProps | 'component'> & Omit<ComponentPropsWithoutRef<C>, keyof NeoNavigationItemOwnProps | keyof ButtonBaseProps> & {
+    component?: C;
+};
 /**
  * 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;
-};
+declare function NeoNavigationItem<C extends ElementType = typeof ButtonBase__default>({ icon, label, selected, tag, children, ...props }: NeoNavigationItemProps<C>): react_jsx_runtime.JSX.Element;
+declare namespace NeoNavigationItem {
+    var displayName: string;
+}
 
 /**
  * Breadcrumb item configuration
@@ -2101,57 +2104,51 @@ declare const NeoSkeleton: {
     displayName: string;
 };
 
-/**
- * Props for the NeoStatusBanner component
- */
-interface NeoStatusBannerProps extends Omit<AlertProps, 'severity' | 'variant'> {
+type Intent$1 = 'success' | 'error' | 'warning' | 'offline' | 'info';
+type AlertType = 'outlined' | 'filled';
+interface NeoAlertProps extends Omit<AlertProps, 'severity' | 'variant' | 'color'> {
     /**
-     * The severity level of the status banner
+     * The intent/purpose of the alert
      * @default "success"
      * @figma Intent
      */
-    severity?: 'success' | 'error' | 'neutral' | 'info';
+    intent?: Intent$1;
     /**
-     * The visual variant style
+     * Visual type: outlined (light bg) or filled (solid bg)
      * @default "outlined"
-     * @figma Theme
+     * @figma Type
      */
-    variant?: 'outlined' | 'filled';
+    type?: AlertType;
     /**
-     * The content to display inside the banner
+     * The title text displayed in the alert
      */
-    children?: ReactNode;
+    title: string;
+    /**
+     * Optional supporting description text
+     */
+    description?: string;
     /**
-     * Custom icon to display (defaults to severity-based icon)
+     * Custom icon to display (defaults to intent-based icon)
      */
     icon?: ReactNode;
+    /**
+     * Optional action element (typically a button) displayed on the right
+     */
+    action?: ReactNode;
 }
 /**
- * NeoStatusBanner - Status banner component for displaying system status messages
- *
- * Displays status information with different severity levels (success, error, info, neutral) and
- * visual modes (outlined for light backgrounds, filled for emphasis).
+ * NeoAlert - Alert component for displaying contextual status messages
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4921-3427
  *
  * Figma Props Mapping:
- * - Status (Success|Error|Info|Offline) → severity ('success'|'error'|'info'|'neutral')
- * - Mode (Light|Dark) → variant ('outlined'|'filled')
- *
- * Design Tokens Used:
- * - status.success.light, status.success.default
- * - status.error.light, status.error.default
- * - status.neutral.light, status.neutral.default
- * - status.info.light, status.info.default
- * - typography.tooltip, typography.bodySecondary
- * - grey[800]
- * - fontSize.default, fontSize.sm
- * - fontWeight.medium, fontWeight.regular
- * - fontFamily.body
- * - surfaces.shadowNeutral
- */
-declare const NeoStatusBanner: {
-    ({ severity, variant, icon, children, ...props }: NeoStatusBannerProps): react_jsx_runtime.JSX.Element;
+ * - Intent (Success|Error|Warning|Offline|Info) → intent
+ * - Type (Outlined|Filled) → type
+ * - Show supporting text → description prop presence
+ * - Show Button → action prop presence
+ */
+declare const NeoAlert: {
+    ({ intent, type, title, description, icon, action, ...props }: NeoAlertProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -2194,10 +2191,7 @@ interface NeoTabProps extends Omit<TabProps, 'label'> {
  *
  * Figma Props Mapping:
  * - Current=True/False → Controlled by parent NeoTabs value
- * - State=Default → default styling
- * - State=Hover → CSS :hover
- * - State=Focus → CSS :focus-visible
- * - Tag count → count prop (renders NeoTag)
+ * - Show tag → count prop (renders NeoTag)
  * - Text label → label prop
  */
 declare const NeoTab: {
@@ -2221,24 +2215,24 @@ declare module '@mui/material/Chip' {
 type NeoTagOwnProps = {
     /**
      * The size of the tag
-     * @figma m (sm|md|lg)
+     * @figma Size (Small|Medium|Large)
      * @default "small"
      */
     size?: 'small' | 'medium' | 'large';
     /**
      * The variant style of the tag
-     * @figma type (light|dark)
+     * @figma Variant (Subtle|Filled)
      * @default "outlined"
      */
     variant?: 'outlined' | 'filled';
     /**
-     * The color/state of the tag
-     * @figma state (Neutral|Error|Warning|Success|Info|Violet|Beta)
+     * The intent/purpose of the tag
+     * @figma Intent (Neutral|Error|Warning|Success|Info|Violet)
      * @default "default"
      */
-    color?: 'default' | 'error' | 'warning' | 'success' | 'info' | 'violet' | 'beta';
+    intent?: 'default' | 'error' | 'warning' | 'success' | 'info' | 'violet' | 'beta';
 };
-type NeoTagProps<C extends ElementType = typeof Chip> = NeoTagOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof NeoTagOwnProps> & {
+type NeoTagProps<C extends ElementType = typeof Chip> = NeoTagOwnProps & Omit<ChipProps, keyof NeoTagOwnProps | 'component' | 'color'> & Omit<ComponentPropsWithoutRef<C>, keyof NeoTagOwnProps | keyof ChipProps> & {
     component?: C;
 };
 /**
@@ -2247,22 +2241,33 @@ type NeoTagProps<C extends ElementType = typeof Chip> = NeoTagOwnProps & Omit<Co
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4120-34533
  *
  * Figma Props Mapping:
- * - m (sm|md|lg) → size (small|medium|large)
- * - type (light|dark) → variant (outlined|filled)
- * - state (Neutral|Error|Warning|Success|Info|Violet|Beta) → color (default|error|warning|success|info|violet|beta)
- * - Label text → label prop
+ * - Size (Small|Medium|Large) → size (small|medium|large)
+ * - Variant (Subtle|Filled) → variant (outlined|filled)
+ * - Intent (Neutral|Error|Warning|Success|Info|Violet|Beta) → intent (default|error|warning|success|info|violet|beta)
+ * - TEXT Label → label prop
  */
-declare function NeoTag<C extends ElementType = typeof Chip>({ size, variant, ...props }: NeoTagProps<C>): react_jsx_runtime.JSX.Element;
+declare function NeoTag<C extends ElementType = typeof Chip>({ size, variant, intent, ...props }: NeoTagProps<C>): react_jsx_runtime.JSX.Element;
 declare namespace NeoTag {
     var displayName: string;
 }
 
+type Intent = 'neutral' | 'info' | 'success' | 'error' | 'warning';
+type ToastType = 'outlined' | 'filled';
 interface NeoToastProps extends Omit<AlertProps, 'variant' | 'severity' | 'color'> {
     /**
-     * The visual style variant of the toast
-     * @default "default"
+     * The intent/purpose of the toast
+     * @default "neutral"
+     *
+     * @figmaPropMapping Intent (Neutral|Error|Success|Info|Warning) → intent
+     */
+    intent?: Intent;
+    /**
+     * Visual type: outlined (light bg + border) or filled (solid bg)
+     * @default "outlined"
+     *
+     * @figmaPropMapping Style (Outlined|Filled) → type
      */
-    variant?: 'default' | 'dark' | 'brand' | 'error' | 'success' | 'info';
+    type?: ToastType;
     /**
      * The title/header text
      */
@@ -2273,7 +2278,7 @@ interface NeoToastProps extends Omit<AlertProps, 'variant' | 'severity' | 'color
     message?: string;
     /**
      * Whether to show the close button
-     * @default true
+     * @default false
      */
     showClose?: boolean;
     /**
@@ -2290,25 +2295,19 @@ interface NeoToastProps extends Omit<AlertProps, 'variant' | 'severity' | 'color
  * NeoToast - Notification/Toast component based on MUI Alert
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4122-37223
- *
- * Figma Props Mapping:
- * - type (Light mode|Dark mode|Brand color|Error|Success|Info) → variant (default|dark|brand|error|success|info)
- * - header → title (string)
- * - supportingText → message (string)
- * - xCloseButton → showClose (boolean)
- * - actions → actions (ReactNode)
  */
 declare const NeoToast: {
-    ({ variant, title, message, showClose, actions, onClose, ...props }: NeoToastProps): react_jsx_runtime.JSX.Element;
+    ({ intent, type, title, message, showClose, actions, onClose, ...props }: NeoToastProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 /**
  * Helper component for creating toast action buttons with proper styling
  */
 declare const NeoToastButton: {
-    ({ primary, variant, children, ...props }: {
+    ({ primary, intent, type, children, ...props }: {
         primary?: boolean;
-        variant?: NeoToastProps["variant"];
+        intent?: Intent;
+        type?: ToastType;
         children: ReactNode;
     } & Omit<React.ComponentProps<typeof Button>, "variant">): react_jsx_runtime.JSX.Element;
     displayName: string;
@@ -2435,7 +2434,7 @@ declare const NeoToolbar: {
 
 declare module '@mui/material/ListItemButton' {
     interface ListItemButtonPropsVariantOverrides {
-        size?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
+        size?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge';
     }
 }
 /**
@@ -2447,19 +2446,19 @@ interface NeoListItemProps extends Omit<ListItemButtonProps, 'children' | 'size'
      * @default "medium"
      * @figma size
      */
-    size?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
+    size?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge';
     /**
      * Primary text content (required)
      * @figma Placeholder (primary text)
      */
     primaryText: ReactNode;
     /**
-     * Secondary/supporting text content (optional, shown in large/xlarge/xxlarge)
+     * Secondary/supporting text content (optional, shown in large/xlarge/xxlarge/xxxlarge)
      * @figma Recipe name (secondary text)
      */
     secondaryText?: ReactNode;
     /**
-     * Badge content for count display (optional, for xxlarge link variant)
+     * Badge content for count display (optional, for xxlarge/xxxlarge link variant)
      * @figma (# recipes)
      */
     badge?: ReactNode;
@@ -2490,14 +2489,14 @@ interface NeoListItemProps extends Omit<ListItemButtonProps, 'children' | 'size'
 /**
  * NeoListItem - Flexible list item component with multiple size variants and states
  *
- * A versatile list item component built on MUI's ListItemButton that supports five size variants
- * (small to xxlarge), interactive states (default, selected, disabled, link), and optional
+ * A versatile list item component built on MUI's ListItemButton that supports six size variants
+ * (small to xxxlarge), interactive states (default, selected, disabled, link), and optional
  * icons/logos, secondary text, and badges.
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4205-36442
  *
  * Figma Props Mapping:
- * - size (small|medium|large|xlarge|XXL) → size (small|medium|large|xlarge|xxlarge)
+ * - size (Small|Medium|Large|Extra Large|XX Large|TripleExtraLarge) → size (small|medium|large|xlarge|xxlarge|xxxlarge)
  * - state (default|active|disabled|link) → selected, disabled, isLink props
  * - showIcon → icon prop (pass ReactNode)
  * - showSupportingText → secondaryText prop (pass ReactNode)
@@ -2599,7 +2598,7 @@ interface NeoTooltipProps extends Omit<TooltipProps, 'title' | 'variant'> {
     /**
      * The visual style variant
      * @default "light"
-     * @figma Type
+     * @figma Theme
      */
     variant?: TooltipVariant;
     /**
@@ -2624,8 +2623,8 @@ interface NeoTooltipProps extends Omit<TooltipProps, 'title' | 'variant'> {
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4091-26557&t=Bo58EpFmg6ILJtmv-11
  *
  * Figma Props Mapping:
- * - Type (Light mode|Dark mode|Brand color) → variant ('light'|'dark'|'brand')
- * - Arrow → arrow (boolean) + placement (top/bottom/left/right/etc)
+ * - Theme (Light mode|Dark mode|Brand color) → variant ('light'|'dark'|'brand')
+ * - Placement → arrow (boolean) + placement (top/bottom/left/right/etc)
  * - Supporting text (True|False) → description (string|undefined)
  * - text → title (string, literal content)
  *
@@ -2696,52 +2695,6 @@ declare const NeoCard: {
     displayName: string;
 };
 
-/**
- * Props for the NeoMarketplaceCard component
- * @deprecated Use NeoCardSmallProps with NeoCard instead
- */
-interface NeoMarketplaceCardProps extends Omit<NeoCardSmallProps, 'size'> {
-}
-/**
- * @deprecated Use `NeoCard` with `size="small"` instead.
- *
- * @example
- * ```tsx
- * // Before
- * <NeoMarketplaceCard logo={...} title="Java" ... />
- *
- * // After
- * <NeoCard size="small" logo={...} title="Java" ... />
- * ```
- */
-declare const NeoMarketplaceCard: {
-    (props: NeoMarketplaceCardProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-/**
- * Props for the NeoMarketplaceLargeCard component
- * @deprecated Use NeoCardLargeProps with NeoCard instead
- */
-interface NeoMarketplaceLargeCardProps extends Omit<NeoCardLargeProps, 'size'> {
-}
-/**
- * @deprecated Use `NeoCard` with `size="large"` instead.
- *
- * @example
- * ```tsx
- * // Before
- * <NeoMarketplaceLargeCard cardTheme="light" ... />
- *
- * // After
- * <NeoCard size="large" cardTheme="light" ... />
- * ```
- */
-declare const NeoMarketplaceLargeCard: {
-    (props: NeoMarketplaceLargeCardProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
 /**
  * NeoDataGridColumnsPanel - Custom columns panel for NeoDataGrid matching Figma design
  *
@@ -2783,13 +2736,12 @@ interface NeoDatePickerProps {
     /**
      * Type of date picker to render
      * @default "single"
-     * @figma type
+     * @figma Mode
      */
     type?: DatePickerType;
     /**
      * Whether the picker is open
      * When not provided, the picker manages its own open state (uncontrolled mode)
-     * @figma opened
      */
     open?: boolean;
     /**
@@ -2858,11 +2810,10 @@ interface NeoDatePickerProps {
  * customization. Supports both single date selection and date range selection with
  * built-in shortcuts.
  *
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4176-3700
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4176-8593
  *
  * Figma Props Mapping:
- * - opened → open (boolean)
- * - type ('Single date'|'Dual dates') → type ('single'|'range')
+ * - Mode ('Single'|'Range') → type ('single'|'range')
  *
  * Design Tokens Used:
  * - colors: semanticColors.grey[800], semanticColors.grey[700], semanticColors.surfaces.white, semanticColors.icons.hoverBackground
@@ -2916,6 +2867,17 @@ declare const NeoTreeView: {
     displayName: string;
 };
 
+/**
+ * Outline-based focus ring styles derived from Neo border tokens.
+ * Uses CSS outline (not box-shadow) so focus rings are never clipped by overflow:hidden.
+ *
+ * Produces a double-ring effect: a white inner gap (via outline-offset) and a colored outer ring.
+ */
+declare const focusRingStyles: {
+    readonly outline: "2px solid #3bcca6";
+    readonly outlineOffset: "2px";
+};
+
 /**
  * @moderneinc/neo-styled-components
  *
@@ -2935,5 +2897,5 @@ declare module '@mui/x-data-grid-pro' {
 
 declare const version: string
 
-export { ActivityScene, CIRCLE_RADIUS, NeoActivityHeader, NeoActivityIndicatorCell, NeoAvatar, NeoBadge, NeoBanner, NeoBreadcrumbLink, NeoBreadcrumbs, NeoButton, NeoButtonTab, NeoButtonTabGroup, NeoCard, NeoCheckbox, NeoCodeSnippet, NeoDataGrid, NeoDataGridCellContent, NeoDataGridColumnsButton, NeoDataGridColumnsPanel, NeoDataGridFilterPanel, NeoDataGridFilterPanelAddIcon, NeoDataGridFilterPanelDeleteIcon, NeoDataGridFilterPanelRemoveAllIcon, NeoDataGridFiltersButton, NeoDataGridHeaderLabel, NeoDropdown as NeoDataGridSelect, NeoDatePicker, NeoDivider, NeoDot, NeoDropdown, NeoDropdownMenu, NeoDropdownMenuItem, NeoDropdownMenuItem as NeoDropdownOption, NeoFilterChip, NeoFooter, NeoGeneralAvatar, NeoIconButton, NeoInfiniteScrollGrid, NeoInputField, NeoListItem, NeoListItemButton, NeoLoadingSpinner, NeoMarketplaceCard, NeoMarketplaceLargeCard, NeoDropdownMenu as NeoMenu, NeoDropdownMenuItem as NeoMenuItem, NeoModal, NeoModalContent, NeoModalFooter, NeoModalHeader, NeoMultiBadgesCell, NeoNavigationAvatar, NeoNavigationItem, NeoPageContent, NeoPaginatedGrid, NeoProgressbar, NeoQuickFilter, NeoRadio, NeoSearchChip, NeoDropdown as NeoSelect, NeoDropdownMenuItem as NeoSelectOption, NeoSkeleton, NeoStatusBadgeCell, NeoStatusBanner, NeoTab, NeoTabs, NeoTag, NeoToast, NeoToastButton, NeoToggle, NeoToolbar, NeoTooltip, NeoTreeItem, NeoTreeView, StyledToggleButton as NeoTypologyButton, NeoTypologyControl, NeoUserAvatarCell, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, getDataGridHeaderStyles, version };
-export type { ActivityColor, ActivityEvent, ActivityHeaderSize, BreadcrumbItem, DataGridSize, NeoActivityHeaderProps, NeoActivityIndicatorCellProps, NeoAvatarProps, NeoBadgeProps, NeoBannerProps, NeoBreadcrumbLinkProps, NeoBreadcrumbsProps, NeoButtonProps, NeoButtonTabGroupProps, NeoButtonTabProps, NeoCardLargeProps, NeoCardProps, NeoCardSize, NeoCardSmallProps, NeoCheckboxProps, NeoCodeSnippetProps, NeoDataGridCellContentProps, NeoDataGridHeaderLabelProps, NeoDataGridProps, NeoDatePickerProps, NeoDividerProps, NeoDotProps, NeoDropdownMenuItemProps, NeoDropdownMenuProps, NeoDropdownProps, NeoFilterChipProps, NeoFooterProps, NeoGeneralAvatarProps, NeoIconButtonProps, NeoInfiniteScrollGridProps, NeoInputFieldProps, NeoListItemButtonProps, NeoListItemProps, NeoLoadingSpinnerProps, NeoMarketplaceCardProps, NeoMarketplaceLargeCardProps, NeoDropdownMenuItemProps as NeoMenuItemProps, NeoDropdownMenuProps as NeoMenuProps, NeoModalContentProps, NeoModalFooterProps, NeoModalHeaderProps, NeoModalProps, NeoMultiBadgesCellProps, NeoNavigationAvatarProps, NeoNavigationItemProps, NeoPageContentProps, NeoPaginatedGridProps, NeoProgressbarProps, NeoQuickFilterProps, NeoRadioProps, NeoSearchChipProps, NeoDropdownProps as NeoSelectProps, NeoSkeletonProps, NeoStatusBadgeCellProps, NeoStatusBannerProps, NeoTabProps, NeoTagProps, NeoToastProps, NeoToggleProps, NeoToolbarProps, NeoTooltipProps, NeoTreeItemData, NeoTreeItemProps, NeoTreeViewProps, NeoTypologyControlProps, NeoUserAvatarCellProps };
+export { ActivityScene, CIRCLE_RADIUS, NeoActivityHeader, NeoActivityIndicatorCell, NeoAlert, NeoAvatar, NeoBadge, NeoBanner, NeoBreadcrumbLink, NeoBreadcrumbs, NeoButton, NeoButtonTab, NeoButtonTabGroup, NeoCard, NeoCheckbox, NeoCodeSnippet, NeoDataGrid, NeoDataGridCellContent, NeoDataGridColumnsButton, NeoDataGridColumnsPanel, NeoDataGridFilterPanel, NeoDataGridFilterPanelAddIcon, NeoDataGridFilterPanelDeleteIcon, NeoDataGridFilterPanelRemoveAllIcon, NeoDataGridFiltersButton, NeoDataGridHeaderLabel, NeoSelect as NeoDataGridSelect, NeoDatePicker, NeoDivider, NeoDot, NeoSelect as NeoDropdown, NeoMenu as NeoDropdownMenu, NeoMenuItem as NeoDropdownMenuItem, NeoMenuItem as NeoDropdownOption, NeoFilterChip, NeoFooter, NeoGeneralAvatar, NeoIconButton, NeoInfiniteScrollGrid, NeoInputField, NeoListItem, NeoListItemButton, NeoLoadingSpinner, NeoMenu, NeoMenuItem, NeoModal, NeoModalContent, NeoModalFooter, NeoModalHeader, NeoMultiBadgesCell, NeoNavigationAvatar, NeoNavigationItem, NeoPageContent, NeoPaginatedGrid, NeoProgressbar, NeoQuickFilter, NeoRadio, NeoSearchChip, NeoSelect, NeoMenuItem as NeoSelectOption, NeoSkeleton, NeoStatusBadgeCell, NeoTab, NeoTabs, NeoTag, NeoToast, NeoToastButton, NeoToggle, NeoToolbar, NeoTooltip, NeoTreeItem, NeoTreeView, StyledToggleButton as NeoTypologyButton, NeoTypologyControl, NeoUserAvatarCell, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, focusRingStyles, getDataGridHeaderStyles, version };
+export type { ActivityColor, ActivityEvent, ActivityHeaderSize, BreadcrumbItem, DataGridSize, NeoActivityHeaderProps, NeoActivityIndicatorCellProps, NeoAlertProps, NeoAvatarProps, NeoBadgeProps, NeoBannerProps, NeoBreadcrumbLinkProps, NeoBreadcrumbsProps, NeoButtonProps, NeoButtonTabGroupProps, NeoButtonTabProps, NeoCardLargeProps, NeoCardProps, NeoCardSize, NeoCardSmallProps, NeoCheckboxProps, NeoCodeSnippetProps, NeoDataGridCellContentProps, NeoDataGridHeaderLabelProps, NeoDataGridProps, NeoDatePickerProps, NeoDividerProps, NeoDotProps, NeoMenuItemProps as NeoDropdownMenuItemProps, NeoMenuProps as NeoDropdownMenuProps, NeoSelectProps as NeoDropdownProps, NeoFilterChipProps, NeoFooterProps, NeoGeneralAvatarProps, NeoIconButtonProps, NeoInfiniteScrollGridProps, NeoInputFieldProps, NeoListItemButtonProps, NeoListItemProps, NeoLoadingSpinnerProps, NeoMenuItemProps, NeoMenuProps, NeoModalContentProps, NeoModalFooterProps, NeoModalHeaderProps, NeoModalProps, NeoMultiBadgesCellProps, NeoNavigationAvatarProps, NeoNavigationItemProps, NeoPageContentProps, NeoPaginatedGridProps, NeoProgressbarProps, NeoQuickFilterProps, NeoRadioProps, NeoSearchChipProps, NeoSelectProps, NeoSkeletonProps, NeoStatusBadgeCellProps, NeoTabProps, NeoTagProps, NeoToastProps, NeoToggleProps, NeoToolbarProps, NeoTooltipProps, NeoTreeItemData, NeoTreeItemProps, NeoTreeViewProps, NeoTypologyControlProps, NeoUserAvatarCellProps };