@moderneinc/neo-styled-components 4.1.2-next.c7153c → 4.1.2-next.f98de9

package/dist/DataGridColumnsPanel/DataGridColumnsPanel.d.ts

@@ -28,6 +28,6 @@ export interface NeoDataGridColumnsPanelProps extends GridColumnsPanelProps {
     showSearch?: boolean;
 }
 export declare const NeoDataGridColumnsPanel: {
-    ({ showSearch, ...props }: NeoDataGridColumnsPanelProps): import("react/jsx-runtime").JSX.Element;
+    ({ showSearch, sx: _sx, theme: _theme, ...props }: NeoDataGridColumnsPanelProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/IconButton/IconButton.d.ts

@@ -1,7 +1,8 @@
-import { type IconButtonProps } from '@mui/material/IconButton';
+import type { ButtonBaseProps } from '@mui/material/ButtonBase';
+import type { ReactNode } from 'react';
 type IconButtonSize = 'small' | 'medium';
-type IconButtonVariant = 'default' | 'nav';
-export interface NeoIconButtonProps extends Omit<IconButtonProps, 'color' | 'size'> {
+type IconButtonVariant = 'primary' | 'secondary' | 'destructive' | 'tertiary' | 'nav';
+export interface NeoIconButtonProps extends Omit<ButtonBaseProps, 'children' | 'size'> {
     /**
      * The size of the icon button
      * @default "medium"
@@ -10,10 +11,10 @@ export interface NeoIconButtonProps extends Omit<IconButtonProps, 'color' | 'siz
      */
     size?: IconButtonSize;
     /**
-     * The visual variant of the icon button
-     * - `default`: Transparent neutral style
+     * The visual variant of the icon button.
+     * - `primary`, `secondary`, `destructive`, `tertiary`: Uses NeoButton's hierarchy styling
      * - `nav`: White background with border, used in global navigation
-     * @default "default"
+     * @default "tertiary"
      */
     variant?: IconButtonVariant;
     /**
@@ -22,25 +23,34 @@ export interface NeoIconButtonProps extends Omit<IconButtonProps, 'color' | 'siz
      * @default false
      */
     active?: boolean;
+    /**
+     * Show loading spinner instead of icon.
+     * Only applies to hierarchy variants (not `nav`).
+     * @default false
+     */
+    loading?: boolean;
+    children?: ReactNode;
 }
 /**
- * NeoIconButton - Icon-only button component based on MUI IconButton
+ * NeoIconButton - Icon-only button component
  *
- * Simple, neutral icon button with transparent background and icon color states.
- * Use `variant="nav"` for the global navigation pill-shaped button style.
+ * For hierarchy variants (primary/secondary/destructive/tertiary), wraps NeoButton with
+ * icon-only sizing. For the `nav` variant, uses a standalone MUI IconButton with custom styling.
  *
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=11126-21344
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4086-7590
  *
  * Figma Props Mapping:
+ * - Hierarchy (Primary|Secondary|Destructive|Tertiary) → variant prop
  * - Size (Small|Medium) → size prop
+ * - Show text = false → always (this is the icon-only variant of NeoButton)
  * - State=Disabled → disabled prop
+ * - State=Loading → loading prop
  * - State=Hover → CSS :hover
- * - State=Active → CSS :active
+ * - State=Pressed → CSS :active
  * - State=Focus → CSS :focus-visible
- * - State=Loading → not yet implemented
  */
 export declare const NeoIconButton: {
-    ({ size, variant, active, ...props }: NeoIconButtonProps): import("react/jsx-runtime").JSX.Element;
+    ({ size, variant, active, loading, children, ...props }: NeoIconButtonProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/dist/Toolbar/Toolbar.d.ts

@@ -1,4 +1,4 @@
-import { type ToolbarProps } from '@mui/x-data-grid-pro';
+import { type ToolbarProps } from '@mui/x-data-grid';
 import type { ReactNode } from 'react';
 export interface NeoToolbarProps extends ToolbarProps {
     /**

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
 import React__default, { ReactNode, ElementType, HTMLAttributes, ComponentType, ComponentPropsWithoutRef } from 'react';
-import { GridDensity, GridFilterPanel } from '@mui/x-data-grid';
+import { GridDensity, GridFilterPanel, ToolbarProps } from '@mui/x-data-grid';
 import Chip, { ChipProps } from '@mui/material/Chip';
 import { AlertProps } from '@mui/material/Alert';
 import { LinkProps } from '@mui/material/Link';
@@ -11,14 +11,13 @@ import * as _mui_material_ToggleButton from '@mui/material/ToggleButton';
 import { ToggleButtonProps } from '@mui/material/ToggleButton';
 import { ToggleButtonGroupProps } from '@mui/material/ToggleButtonGroup';
 import { CheckboxProps } from '@mui/material/Checkbox';
-import { GridDensity as GridDensity$1, DataGridProProps, GridSlots, ToolbarProps, GridColumnsPanelProps } from '@mui/x-data-grid-pro';
+import { GridDensity as GridDensity$1, DataGridProProps, GridSlots, GridColumnsPanelProps } from '@mui/x-data-grid-pro';
 import * as _mui_material_styles from '@mui/material/styles';
 import { SxProps, Theme, Breakpoint } from '@mui/material/styles';
 import { DividerProps } from '@mui/material/Divider';
 import { PaperProps } from '@mui/material/Paper';
 import { BadgeProps } from '@mui/material/Badge';
 import { AvatarProps } from '@mui/material/Avatar';
-import { IconButtonProps } from '@mui/material/IconButton';
 import { InputBaseProps } from '@mui/material/InputBase';
 import { MenuProps } from '@mui/material/Menu';
 import { MenuItemProps } from '@mui/material/MenuItem';
@@ -1421,8 +1420,8 @@ declare const NeoGeneralAvatar: {
 };
 
 type IconButtonSize = 'small' | 'medium';
-type IconButtonVariant = 'default' | 'nav';
-interface NeoIconButtonProps extends Omit<IconButtonProps, 'color' | 'size'> {
+type IconButtonVariant = 'primary' | 'secondary' | 'destructive' | 'tertiary' | 'nav';
+interface NeoIconButtonProps extends Omit<ButtonBaseProps, 'children' | 'size'> {
     /**
      * The size of the icon button
      * @default "medium"
@@ -1431,10 +1430,10 @@ interface NeoIconButtonProps extends Omit<IconButtonProps, 'color' | 'size'> {
      */
     size?: IconButtonSize;
     /**
-     * The visual variant of the icon button
-     * - `default`: Transparent neutral style
+     * The visual variant of the icon button.
+     * - `primary`, `secondary`, `destructive`, `tertiary`: Uses NeoButton's hierarchy styling
      * - `nav`: White background with border, used in global navigation
-     * @default "default"
+     * @default "tertiary"
      */
     variant?: IconButtonVariant;
     /**
@@ -1443,25 +1442,34 @@ interface NeoIconButtonProps extends Omit<IconButtonProps, 'color' | 'size'> {
      * @default false
      */
     active?: boolean;
+    /**
+     * Show loading spinner instead of icon.
+     * Only applies to hierarchy variants (not `nav`).
+     * @default false
+     */
+    loading?: boolean;
+    children?: ReactNode;
 }
 /**
- * NeoIconButton - Icon-only button component based on MUI IconButton
+ * NeoIconButton - Icon-only button component
  *
- * Simple, neutral icon button with transparent background and icon color states.
- * Use `variant="nav"` for the global navigation pill-shaped button style.
+ * For hierarchy variants (primary/secondary/destructive/tertiary), wraps NeoButton with
+ * icon-only sizing. For the `nav` variant, uses a standalone MUI IconButton with custom styling.
  *
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=11126-21344
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4086-7590
  *
  * Figma Props Mapping:
+ * - Hierarchy (Primary|Secondary|Destructive|Tertiary) → variant prop
  * - Size (Small|Medium) → size prop
+ * - Show text = false → always (this is the icon-only variant of NeoButton)
  * - State=Disabled → disabled prop
+ * - State=Loading → loading prop
  * - State=Hover → CSS :hover
- * - State=Active → CSS :active
+ * - State=Pressed → CSS :active
  * - State=Focus → CSS :focus-visible
- * - State=Loading → not yet implemented
  */
 declare const NeoIconButton: {
-    ({ size, variant, active, ...props }: NeoIconButtonProps): react_jsx_runtime.JSX.Element;
+    ({ size, variant, active, loading, children, ...props }: NeoIconButtonProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -2771,7 +2779,7 @@ interface NeoDataGridColumnsPanelProps extends GridColumnsPanelProps {
     showSearch?: boolean;
 }
 declare const NeoDataGridColumnsPanel: {
-    ({ showSearch, ...props }: NeoDataGridColumnsPanelProps): react_jsx_runtime.JSX.Element;
+    ({ showSearch, sx: _sx, theme: _theme, ...props }: NeoDataGridColumnsPanelProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/index.esm.js

@@ -16,7 +16,8 @@ import MuiToggleButton, { toggleButtonClasses } from '@mui/material/ToggleButton
 import MuiToggleButtonGroup, { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';
 import MuiCard from '@mui/material/Card';
 import Checkbox, { checkboxClasses } from '@mui/material/Checkbox';
-import { useGridApiContext, useGridSelector, gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector, GridPanelWrapper, useGridApiRef, gridClasses as gridClasses$1, DataGridPro, ColumnsPanelTrigger, ToolbarButton, gridFilterModelSelector, FilterPanelTrigger, Toolbar } from '@mui/x-data-grid-pro';
+import { useGridApiContext, useGridSelector, gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector, GridFilterPanel, gridClasses, ColumnsPanelTrigger, ToolbarButton, gridFilterModelSelector, FilterPanelTrigger, gridPaginationModelSelector, gridRowCountSelector, gridRowSelectionCountSelector, QuickFilter, QuickFilterControl, QuickFilterClear, Toolbar } from '@mui/x-data-grid';
+import { useGridApiRef, DataGridPro } from '@mui/x-data-grid-pro';
 import Button, { buttonClasses } from '@mui/material/Button';
 import Divider from '@mui/material/Divider';
 import InputAdornment, { inputAdornmentClasses } from '@mui/material/InputAdornment';
@@ -25,7 +26,6 @@ import TextField from '@mui/material/TextField';
 import { formLabelClasses } from '@mui/material/FormLabel';
 import InputLabel, { inputLabelClasses } from '@mui/material/InputLabel';
 import MuiSelect, { selectClasses } from '@mui/material/Select';
-import { GridFilterPanel, gridClasses, useGridApiContext as useGridApiContext$1, useGridSelector as useGridSelector$1, gridPaginationModelSelector, gridRowCountSelector, gridRowSelectionCountSelector, QuickFilter, QuickFilterControl, QuickFilterClear } from '@mui/x-data-grid';
 import MenuItem, { menuItemClasses } from '@mui/material/MenuItem';
 import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
 import { dayCalendarClasses } from '@mui/x-date-pickers/DateCalendar';
@@ -1084,7 +1084,7 @@ const LinkText = styled('span')(({ bannerType = 'outlined' }) => ({
         textDecoration: 'underline',
     },
 }));
-const StyledIconButton$1 = styled(IconButton)(({ closeIconColor }) => ({
+const StyledIconButton = styled(IconButton)(({ closeIconColor }) => ({
     padding: 0,
     color: closeIconColor,
     '&:hover': {
@@ -1101,7 +1101,7 @@ const NeoBanner = ({ intent = 'info', type = 'outlined', message, messagePositio
         return null;
     }
     const closeIconColor = type === 'filled' ? semanticColors.surfaces.white : intentColors$1[intent].default;
-    return (jsx(StyledAlert$1, { ...props, intent: intent, bannerType: type, messagePosition: messagePosition, icon: messagePosition === 'left' ? icon || false : false, action: showClose ? (jsx(StyledIconButton$1, { size: "small", onClick: handleClose, closeIconColor: closeIconColor, children: jsx(X, { size: 24 }) })) : undefined, children: messagePosition === 'center' ? (jsxs(Fragment, { children: [icon, jsx("span", { children: message }), linkText && (jsx(LinkText, { bannerType: type, onClick: onLinkClick, children: linkText }))] })) : (jsxs(Fragment, { children: [jsx("span", { children: message }), linkText && (jsx(LinkText, { bannerType: type, onClick: onLinkClick, children: linkText }))] })) }));
+    return (jsx(StyledAlert$1, { ...props, intent: intent, bannerType: type, messagePosition: messagePosition, icon: messagePosition === 'left' ? icon || false : false, action: showClose ? (jsx(StyledIconButton, { size: "small", onClick: handleClose, closeIconColor: closeIconColor, children: jsx(X, { size: 24 }) })) : undefined, children: messagePosition === 'center' ? (jsxs(Fragment, { children: [icon, jsx("span", { children: message }), linkText && (jsx(LinkText, { bannerType: type, onClick: onLinkClick, children: linkText }))] })) : (jsxs(Fragment, { children: [jsx("span", { children: message }), linkText && (jsx(LinkText, { bannerType: type, onClick: onLinkClick, children: linkText }))] })) }));
 };
 NeoBanner.displayName = 'NeoBanner';
 
@@ -1171,7 +1171,7 @@ function NeoBreadcrumbs({ children, className }) {
 }
 
 // Props that should not be forwarded to ButtonBase (Button-specific props that ButtonBase doesn't support)
-const buttonOnlyProps$1 = [
+const buttonOnlyProps = [
     'variant',
     'size',
     'loading',
@@ -1181,7 +1181,7 @@ const buttonOnlyProps$1 = [
     'disableElevation',
 ];
 const StyledButtonBase$1 = styled(ButtonBase, {
-    shouldForwardProp: prop => !buttonOnlyProps$1.includes(prop),
+    shouldForwardProp: prop => !buttonOnlyProps.includes(prop),
 })(({ theme, variant = 'primary', size = 'medium', loading = false }) => {
     // Size configurations using theme.spacing()
     const sizeConfig = {
@@ -2008,6 +2008,13 @@ const NeoCodeSnippet = ({ variant = 'outlined', size = 'small', endIcon, childre
 };
 NeoCodeSnippet.displayName = 'NeoCodeSnippet';
 
+// PanelWrapper was removed from @mui/x-data-grid-pro public API in v8.28.2
+const PanelWrapper = styled('div')({
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+    '&:focus': { outline: 0 },
+});
 const PanelContent = styled(Box)(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
@@ -2114,7 +2121,10 @@ const ResetButton = styled(Button)(({ theme }) => ({
         color: colors.grey['400'],
     },
 }));
-const NeoDataGridColumnsPanel = ({ showSearch = false, ...props }) => {
+const NeoDataGridColumnsPanel = ({ showSearch = false, 
+// Strip MUI-specific props to avoid dual-module Theme type conflict between
+// @mui/x-data-grid-pro (CJS) and @mui/x-data-grid (ESM) declarations
+sx: _sx, theme: _theme, ...props }) => {
     const apiRef = useGridApiContext();
     const columns = useGridSelector(apiRef, gridColumnDefinitionsSelector);
     const columnVisibilityModel = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
@@ -2149,7 +2159,7 @@ const NeoDataGridColumnsPanel = ({ showSearch = false, ...props }) => {
     };
     // Check if current state differs from initial/default state
     const hasChanges = Object.keys(columnVisibilityModel).length > 0;
-    return (jsx(GridPanelWrapper, { ...props, children: jsxs(PanelContent, { sx: { width: 320 }, children: [showSearch && (jsx(StyledSearchField, { placeholder: "Search", variant: "standard", value: searchText, onChange: e => setSearchText(e.target.value), slotProps: {
+    return (jsx(PanelWrapper, { ...props, children: jsxs(PanelContent, { sx: { width: 320 }, children: [showSearch && (jsx(StyledSearchField, { placeholder: "Search", variant: "standard", value: searchText, onChange: e => setSearchText(e.target.value), slotProps: {
                         input: {
                             startAdornment: (jsx(InputAdornment, { position: "start", children: jsx(Search, {}) })),
                             disableUnderline: true,
@@ -2710,17 +2720,17 @@ function NeoDataGrid({ autoHeight = false, toolbar, slots, sx, density = 'standa
         // Fix for MUI X 8.15.0+ scroll shadow issue - backgroundColor must be on main, not root
         // See: https://github.com/mui/mui-x/issues/20107
         // This must be set to prevent scroll shadow artifacts
-        [`& .${gridClasses$1.main}`]: {
+        [`& .${gridClasses.main}`]: {
             backgroundColor: semanticColors.surfaces.white,
         },
         // White background for empty/loading overlays
-        [`& .${gridClasses$1.overlay}`]: {
+        [`& .${gridClasses.overlay}`]: {
             backgroundColor: semanticColors.surfaces.white,
         },
         ...getDataGridHeaderStyles(),
         border: `1px solid ${semanticColors.border.secondary}`,
         // Style row selection checkboxes to match header (16px, proper spacing)
-        [`& .${gridClasses$1.cellCheckbox}`]: {
+        [`& .${gridClasses.cellCheckbox}`]: {
             [`& .${checkboxClasses.root}`]: {
                 padding: `${spacing.spacing_1}px`,
                 [`& .${svgIconClasses.root}`]: {
@@ -2730,7 +2740,7 @@ function NeoDataGrid({ autoHeight = false, toolbar, slots, sx, density = 'standa
             },
         },
         // Ensure cells are vertically centered
-        [`& .${gridClasses$1.cell}`]: {
+        [`& .${gridClasses.cell}`]: {
             minHeight: density === 'compact' ? 36 : density === 'comfortable' ? 52 : 44,
             paddingLeft: `${spacing.spacing_3}px`,
             paddingRight: `${spacing.spacing_3}px`,
@@ -3404,20 +3414,24 @@ function subMonths(date, amount, options) {
   return addMonths(date, -1);
 }
 
-// Props that should not be forwarded to IconButton (Button-specific props that IconButton doesn't support)
-const buttonOnlyProps = [
-    'size',
-    'startIcon',
-    'endIcon',
-    'fullWidth',
-    'disableElevation',
-    'variant',
-    'active',
-];
-const StyledIconButton = styled(IconButton, {
-    shouldForwardProp: prop => !buttonOnlyProps.includes(prop),
-})(({ theme, size = 'medium', variant = 'default', active = false }) => {
-    // Size configurations using theme.spacing()
+// Cast NeoButton to a simpler type for styled() compatibility (avoids generic inference issues)
+const NeoButtonBase = NeoButton;
+// Icon-only wrapper around NeoButton for hierarchy variants
+const StyledIconOnlyButton = styled(NeoButtonBase)(({ size = 'medium' }) => {
+    const dimension = size === 'small' ? 32 : spacing.spacing_5;
+    return {
+        '&&': {
+            minWidth: 'unset',
+            padding: 0,
+            width: dimension,
+        },
+    };
+});
+// Nav variant - standalone styled MUI IconButton (not backed by Figma)
+const navOnlyProps = ['size', 'variant', 'active'];
+const StyledNavButton = styled(IconButton, {
+    shouldForwardProp: prop => !navOnlyProps.includes(prop),
+})(({ theme, size = 'medium', active = false }) => {
     const sizeConfig = {
         small: {
             width: 32,
@@ -3431,50 +3445,24 @@ const StyledIconButton = styled(IconButton, {
         },
     };
     const sizeStyles = sizeConfig[size];
-    // Base styles shared by all variants
-    const baseStyles = {
+    const activeNavStyles = {
+        backgroundColor: semanticColors.icons.pressedBackground,
+        borderColor: 'transparent',
+        color: semanticColors.buttons.primary.pressed,
+    };
+    return {
         width: sizeStyles.width,
         height: sizeStyles.height,
         padding: sizeStyles.padding,
-        borderRadius: borderRadius.button, // Fully rounded/circular
+        borderRadius: borderRadius.button,
         transition: theme.transitions.create(['background-color', 'border-color', 'color'], {
             duration: theme.transitions.duration.short,
         }),
-        // Disabled state
-        [`&.${iconButtonClasses.disabled}`]: {
-            cursor: 'not-allowed',
-            pointerEvents: 'auto',
-        },
-        // Focus visible for keyboard navigation
         '&:focus-visible': {
             outline: `2px solid ${semanticColors.border.focus}`,
             outlineOffset: 2,
         },
-    };
-    // Default variant - transparent neutral style
-    const defaultStyles = {
-        backgroundColor: 'transparent',
-        color: semanticColors.icons.default,
-        border: 'none',
-        '&:hover': {
-            backgroundColor: semanticColors.icons.hoverBackground,
-            color: semanticColors.icons.hover,
-        },
-        '&:active': {
-            color: semanticColors.icons.pressed,
-        },
-        [`&.${iconButtonClasses.disabled}`]: {
-            backgroundColor: 'transparent',
-            color: semanticColors.icons.disabled,
-        },
-    };
-    // Nav variant - 44px pill with border, used in global navigation
-    const activeNavStyles = {
-        backgroundColor: semanticColors.icons.pressedBackground,
-        borderColor: 'transparent',
-        color: semanticColors.buttons.primary.pressed,
-    };
-    const navStyles = {
+        // Nav styles
         backgroundColor: semanticColors.surfaces.white,
         color: semanticColors.icons.default,
         border: `1px solid ${semanticColors.border.secondary}`,
@@ -3485,6 +3473,8 @@ const StyledIconButton = styled(IconButton, {
         },
         '&:active': activeNavStyles,
         [`&.${iconButtonClasses.disabled}`]: {
+            cursor: 'not-allowed',
+            pointerEvents: 'auto',
             backgroundColor: semanticColors.surfaces.white,
             borderColor: semanticColors.border.secondary,
             color: semanticColors.icons.disabled,
@@ -3492,33 +3482,30 @@ const StyledIconButton = styled(IconButton, {
         },
         ...(active ? activeNavStyles : {}),
     };
-    const variantStyles = {
-        default: defaultStyles,
-        nav: navStyles,
-    };
-    return {
-        ...baseStyles,
-        ...variantStyles[variant],
-    };
 });
 /**
- * NeoIconButton - Icon-only button component based on MUI IconButton
+ * NeoIconButton - Icon-only button component
  *
- * Simple, neutral icon button with transparent background and icon color states.
- * Use `variant="nav"` for the global navigation pill-shaped button style.
+ * For hierarchy variants (primary/secondary/destructive/tertiary), wraps NeoButton with
+ * icon-only sizing. For the `nav` variant, uses a standalone MUI IconButton with custom styling.
  *
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=11126-21344
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4086-7590
  *
  * Figma Props Mapping:
+ * - Hierarchy (Primary|Secondary|Destructive|Tertiary) → variant prop
  * - Size (Small|Medium) → size prop
+ * - Show text = false → always (this is the icon-only variant of NeoButton)
  * - State=Disabled → disabled prop
+ * - State=Loading → loading prop
  * - State=Hover → CSS :hover
- * - State=Active → CSS :active
+ * - State=Pressed → CSS :active
  * - State=Focus → CSS :focus-visible
- * - State=Loading → not yet implemented
  */
-const NeoIconButton = ({ size = 'medium', variant = 'default', active = false, ...props }) => {
-    return (jsx(StyledIconButton, { size: size, variant: variant, active: active, disableRipple: variant === 'nav', ...props }));
+const NeoIconButton = ({ size = 'medium', variant = 'tertiary', active = false, loading, children, ...props }) => {
+    if (variant === 'nav') {
+        return (jsx(StyledNavButton, { size: size, active: active, disableRipple: true, ...props, children: children }));
+    }
+    return (jsx(StyledIconOnlyButton, { variant: variant, size: size, loading: loading, ...props, children: children }));
 };
 NeoIconButton.displayName = 'NeoIconButton';
 
@@ -4207,11 +4194,11 @@ const PaginationText = styled('p')(({ theme }) => ({
  * />
  */
 const NeoFooter = ({ variant = 'pagination', showShadow = false, loading = false, resultCount, onLoadMore, hasMore = true, paginationInfo, onPreviousPage, onNextPage, hasPreviousPage, hasNextPage, showSelected = true, children, }) => {
-    const apiRef = useGridApiContext$1();
+    const apiRef = useGridApiContext();
     // Use selectors to reactively subscribe to pagination state changes
-    const paginationModel = useGridSelector$1(apiRef, gridPaginationModelSelector);
-    const rowCount = useGridSelector$1(apiRef, gridRowCountSelector);
-    const selectedCount = useGridSelector$1(apiRef, gridRowSelectionCountSelector);
+    const paginationModel = useGridSelector(apiRef, gridPaginationModelSelector);
+    const rowCount = useGridSelector(apiRef, gridRowCountSelector);
+    const selectedCount = useGridSelector(apiRef, gridRowSelectionCountSelector);
     // For pagination variant, try to derive info from DataGrid if not provided
     const derivePaginationInfo = () => {
         if (paginationInfo) {
@@ -4347,7 +4334,7 @@ function NeoInfiniteScrollGrid({ onLoadMore, hasNextPage = true, loadMoreAtScrol
         }
         const unsubscribe = apiRef.current?.subscribeEvent?.('scrollPositionChange', (e) => {
             if (!scrollerRef.current) {
-                const elem = document.querySelector(`.${gridClasses$1.virtualScroller}`);
+                const elem = document.querySelector(`.${gridClasses.virtualScroller}`);
                 if (elem) {
                     scrollerRef.current = elem;
                 }
@@ -4401,7 +4388,7 @@ function NeoInfiniteScrollGrid({ onLoadMore, hasNextPage = true, loadMoreAtScrol
             },
         }, sx: {
             // Add border at bottom of rows section (above footer)
-            [`& .${gridClasses$1.virtualScrollerContent}`]: {
+            [`& .${gridClasses.virtualScrollerContent}`]: {
                 borderBottom: `1px solid ${semanticColors.border.primary}`,
             },
             ...userSx,
@@ -4564,7 +4551,7 @@ const StyledFormHelperText = styled(FormHelperText, {
 const NeoInputField = ({ size = 'medium', destructive = false, label, required = false, infoIcon, helperText, errorMessage, startIcon, endIcon, disabled, id, ...props }) => {
     const inputId = id || `neo-input-${Math.random().toString(36).substring(7)}`;
     const helperTextId = helperText || errorMessage ? `${inputId}-helper-text` : undefined;
-    return (jsxs(StyledFormControl, { size: size, error: destructive, disabled: disabled, children: [label && (jsxs(StyledInputLabel, { htmlFor: inputId, size: size, infoIcon: !!infoIcon, disabled: disabled, error: destructive, children: [label, required && jsx("span", { "aria-hidden": "true", children: "*" }), infoIcon && jsx(InfoIconWrapper, { children: infoIcon })] })), jsx(StyledInputBase, { id: inputId, size: size, destructive: destructive, disabled: disabled, error: destructive, "aria-describedby": helperTextId, startAdornment: startIcon ? (jsx(InputAdornment, { position: "start", style: { paddingLeft: size === 'small' ? spacing.spacing_1_1_2 : spacing.spacing_2 }, children: startIcon })) : undefined, endAdornment: destructive ? (jsx(InputAdornment, { position: "end", style: { paddingRight: spacing.spacing_1_1_2 }, children: jsx(CircleAlert, { size: 20 }) })) : endIcon ? (jsx(InputAdornment, { position: "end", style: { paddingRight: spacing.spacing_1_1_2 }, children: endIcon })) : undefined, ...props }), (helperText || errorMessage) && (jsx(StyledFormHelperText, { id: helperTextId, error: destructive, disabled: disabled, children: destructive ? errorMessage : helperText }))] }));
+    return (jsxs(StyledFormControl, { size: size, error: destructive, disabled: disabled, children: [label && (jsxs(StyledInputLabel, { htmlFor: inputId, size: size, infoIcon: !!infoIcon, disabled: disabled, error: destructive, shrink: true, children: [label, required && jsx("span", { "aria-hidden": "true", children: "*" }), infoIcon && jsx(InfoIconWrapper, { children: infoIcon })] })), jsx(StyledInputBase, { id: inputId, size: size, destructive: destructive, disabled: disabled, error: destructive, "aria-describedby": helperTextId, startAdornment: startIcon ? (jsx(InputAdornment, { position: "start", style: { paddingLeft: size === 'small' ? spacing.spacing_1_1_2 : spacing.spacing_2 }, children: startIcon })) : undefined, endAdornment: destructive ? (jsx(InputAdornment, { position: "end", style: { paddingRight: spacing.spacing_1_1_2 }, children: jsx(CircleAlert, { size: 20 }) })) : endIcon ? (jsx(InputAdornment, { position: "end", style: { paddingRight: spacing.spacing_1_1_2 }, children: endIcon })) : undefined, ...props }), (helperText || errorMessage) && (jsx(StyledFormHelperText, { id: helperTextId, error: destructive, disabled: disabled, children: destructive ? errorMessage : helperText }))] }));
 };
 NeoInputField.displayName = 'NeoInputField';