@moderneinc/neo-styled-components 2.0.2-next.b7dcad → 2.0.3-next.ba615c

package/dist/PageContent/PageContent.d.ts

@@ -1,6 +1,15 @@
 import type { BoxProps } from '@mui/material/Box';
 import type { Breakpoint } from '@mui/material/styles';
 import { type ReactNode } from 'react';
+/**
+ * Breadcrumb item configuration
+ */
+export interface BreadcrumbItem {
+    /** Link label */
+    label: ReactNode;
+    /** Link href (omit for current/last item) */
+    href?: string;
+}
 export interface NeoPageContentProps extends BoxProps {
     /**
      * Main heading displayed on the page
@@ -12,6 +21,20 @@ export interface NeoPageContentProps extends BoxProps {
      * Optional subtitle displayed below the page title
      */
     subtitle?: ReactNode | string;
+    /**
+     * Optional breadcrumbs navigation displayed above the page title.
+     * Last item is automatically marked as current.
+     *
+     * @example
+     * ```tsx
+     * breadcrumbs={[
+     *   { label: 'Settings', href: '/settings' },
+     *   { label: 'Team', href: '/team' },
+     *   { label: 'Team Details' },
+     * ]}
+     * ```
+     */
+    breadcrumbs?: BreadcrumbItem[];
     /**
      * Action button displayed in the top-right corner
      *
@@ -28,6 +51,11 @@ export interface NeoPageContentProps extends BoxProps {
      * @default false
      */
     contentMaxWidth?: Breakpoint | false;
+    /**
+     * Center content when using contentMaxWidth
+     * @default true
+     */
+    centerContent?: boolean;
     /**
      * Disable gutters/padding
      * @default false
@@ -103,7 +131,7 @@ export interface NeoPageContentProps extends BoxProps {
  * </NeoPageContent>
  * ```
  */
-export declare function NeoPageContent({ pageTitle, subtitle, action, sticky, contentMaxWidth, disableGutters, isLoading, showBackToTop, children, sx, ...boxProps }: NeoPageContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function NeoPageContent({ pageTitle, subtitle, breadcrumbs, action, sticky, contentMaxWidth, centerContent, disableGutters, isLoading, showBackToTop, children, sx, ...boxProps }: NeoPageContentProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace NeoPageContent {
     var displayName: string;
 }

package/dist/index.d.ts

@@ -1596,6 +1596,15 @@ declare const NeoModalFooter: {
     displayName: string;
 };
 
+/**
+ * Breadcrumb item configuration
+ */
+interface BreadcrumbItem {
+    /** Link label */
+    label: ReactNode;
+    /** Link href (omit for current/last item) */
+    href?: string;
+}
 interface NeoPageContentProps extends BoxProps {
     /**
      * Main heading displayed on the page
@@ -1607,6 +1616,20 @@ interface NeoPageContentProps extends BoxProps {
      * Optional subtitle displayed below the page title
      */
     subtitle?: ReactNode | string;
+    /**
+     * Optional breadcrumbs navigation displayed above the page title.
+     * Last item is automatically marked as current.
+     *
+     * @example
+     * ```tsx
+     * breadcrumbs={[
+     *   { label: 'Settings', href: '/settings' },
+     *   { label: 'Team', href: '/team' },
+     *   { label: 'Team Details' },
+     * ]}
+     * ```
+     */
+    breadcrumbs?: BreadcrumbItem[];
     /**
      * Action button displayed in the top-right corner
      *
@@ -1623,6 +1646,11 @@ interface NeoPageContentProps extends BoxProps {
      * @default false
      */
     contentMaxWidth?: Breakpoint | false;
+    /**
+     * Center content when using contentMaxWidth
+     * @default true
+     */
+    centerContent?: boolean;
     /**
      * Disable gutters/padding
      * @default false
@@ -1698,7 +1726,7 @@ interface NeoPageContentProps extends BoxProps {
  * </NeoPageContent>
  * ```
  */
-declare function NeoPageContent({ pageTitle, subtitle, action, sticky, contentMaxWidth, disableGutters, isLoading, showBackToTop, children, sx, ...boxProps }: NeoPageContentProps): react_jsx_runtime.JSX.Element;
+declare function NeoPageContent({ pageTitle, subtitle, breadcrumbs, action, sticky, contentMaxWidth, centerContent, disableGutters, isLoading, showBackToTop, children, sx, ...boxProps }: NeoPageContentProps): react_jsx_runtime.JSX.Element;
 declare namespace NeoPageContent {
     var displayName: string;
 }
@@ -2702,4 +2730,4 @@ 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, 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, DataGridSize, NeoActivityHeaderProps, NeoActivityIndicatorCellProps, NeoAvatarProps, NeoBadgeProps, NeoBannerProps, NeoBreadcrumbLinkProps, NeoBreadcrumbsProps, NeoButtonGroupProps, NeoButtonProps, NeoCheckboxProps, NeoCodeSnippetProps, NeoDataGridCellContentProps, NeoDataGridHeaderLabelProps, NeoDataGridProps, NeoDatePickerProps, NeoDividerProps, NeoDotProps, 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 type { ActivityColor, ActivityEvent, ActivityHeaderSize, BreadcrumbItem, DataGridSize, NeoActivityHeaderProps, NeoActivityIndicatorCellProps, NeoAvatarProps, NeoBadgeProps, NeoBannerProps, NeoBreadcrumbLinkProps, NeoBreadcrumbsProps, NeoButtonGroupProps, NeoButtonProps, NeoCheckboxProps, NeoCodeSnippetProps, NeoDataGridCellContentProps, NeoDataGridHeaderLabelProps, NeoDataGridProps, NeoDatePickerProps, NeoDividerProps, NeoDotProps, 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 };

package/dist/index.esm.js

@@ -499,7 +499,7 @@ const NeoActivityIndicatorCell = ({ event = 'commit-job', secondaryEvent, scene
 NeoActivityIndicatorCell.displayName = 'NeoActivityIndicatorCell';
 
 /**
- * @license lucide-react v0.552.0 - ISC
+ * @license lucide-react v0.562.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -526,7 +526,7 @@ const hasA11yProp = (props) => {
 };
 
 /**
- * @license lucide-react v0.552.0 - ISC
+ * @license lucide-react v0.562.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -545,7 +545,7 @@ var defaultAttributes = {
 };
 
 /**
- * @license lucide-react v0.552.0 - ISC
+ * @license lucide-react v0.562.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -583,7 +583,7 @@ const Icon = forwardRef(
 );
 
 /**
- * @license lucide-react v0.552.0 - ISC
+ * @license lucide-react v0.562.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -608,7 +608,7 @@ const createLucideIcon = (iconName, iconNode) => {
 };
 
 /**
- * @license lucide-react v0.552.0 - ISC
+ * @license lucide-react v0.562.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -622,7 +622,7 @@ const __iconNode$h = [
 const ArrowDown = createLucideIcon("arrow-down", __iconNode$h);
 
 /**
- * @license lucide-react v0.552.0 - ISC
+ * @license lucide-react v0.562.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -636,7 +636,7 @@ const __iconNode$g = [
 const ArrowUp = createLucideIcon("arrow-up", __iconNode$g);
 
 /**
- * @license lucide-react v0.552.0 - ISC
+ * @license lucide-react v0.562.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -658,7 +658,7 @@ const __iconNode$f = [
 const CalendarDays = createLucideIcon("calendar-days", __iconNode$f);
 
 /**
- * @license lucide-react v0.552.0 - ISC
+ * @license lucide-react v0.562.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -669,7 +669,7 @@ const __iconNode$e = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
 const ChevronDown = createLucideIcon("chevron-down", __iconNode$e);
 
 /**
- * @license lucide-react v0.552.0 - ISC
+ * @license lucide-react v0.562.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -680,7 +680,7 @@ const __iconNode$d = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
 const ChevronLeft = createLucideIcon("chevron-left", __iconNode$d);
 
 /**
- * @license lucide-react v0.552.0 - ISC
+ * @license lucide-react v0.562.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -691,7 +691,7 @@ const __iconNode$c = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
 const ChevronRight = createLucideIcon("chevron-right", __iconNode$c);
 
 /**
- * @license lucide-react v0.552.0 - ISC
+ * @license lucide-react v0.562.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -702,7 +702,7 @@ const __iconNode$b = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
 const ChevronUp = createLucideIcon("chevron-up", __iconNode$b);
 
 /**
- * @license lucide-react v0.552.0 - ISC
+ * @license lucide-react v0.562.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -716,7 +716,7 @@ const __iconNode$a = [
 const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$a);
 
 /**
- * @license lucide-react v0.552.0 - ISC
+ * @license lucide-react v0.562.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -731,7 +731,7 @@ const __iconNode$9 = [
 const CircleAlert = createLucideIcon("circle-alert", __iconNode$9);
 
 /**
- * @license lucide-react v0.552.0 - ISC
+ * @license lucide-react v0.562.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -745,7 +745,7 @@ const __iconNode$8 = [
 const CircleCheck = createLucideIcon("circle-check", __iconNode$8);
 
 /**
- * @license lucide-react v0.552.0 - ISC
+ * @license lucide-react v0.562.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -760,7 +760,7 @@ const __iconNode$7 = [
 const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$7);
 
 /**
- * @license lucide-react v0.552.0 - ISC
+ * @license lucide-react v0.562.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -775,7 +775,7 @@ const __iconNode$6 = [
 const Columns3 = createLucideIcon("columns-3", __iconNode$6);
 
 /**
- * @license lucide-react v0.552.0 - ISC
+ * @license lucide-react v0.562.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -790,7 +790,7 @@ const __iconNode$5 = [
 const ListFilter = createLucideIcon("list-filter", __iconNode$5);
 
 /**
- * @license lucide-react v0.552.0 - ISC
+ * @license lucide-react v0.562.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -804,7 +804,7 @@ const __iconNode$4 = [
 const Plus = createLucideIcon("plus", __iconNode$4);
 
 /**
- * @license lucide-react v0.552.0 - ISC
+ * @license lucide-react v0.562.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -818,7 +818,7 @@ const __iconNode$3 = [
 const Search = createLucideIcon("search", __iconNode$3);
 
 /**
- * @license lucide-react v0.552.0 - ISC
+ * @license lucide-react v0.562.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -835,7 +835,7 @@ const __iconNode$2 = [
 const Trash2 = createLucideIcon("trash-2", __iconNode$2);
 
 /**
- * @license lucide-react v0.552.0 - ISC
+ * @license lucide-react v0.562.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -854,7 +854,7 @@ const __iconNode$1 = [
 const WifiOff = createLucideIcon("wifi-off", __iconNode$1);
 
 /**
- * @license lucide-react v0.552.0 - ISC
+ * @license lucide-react v0.562.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -4047,12 +4047,13 @@ const StyledListItemButton$1 = styled(ListItemButton, {
         prop !== 'secondaryText' &&
         prop !== 'badge' &&
         prop !== 'icon' &&
-        prop !== 'isLink',
-})(({ theme, size = 'medium', isLink }) => {
+        prop !== 'isLink' &&
+        prop !== 'hasSecondaryText',
+})(({ theme, size = 'medium', isLink, hasSecondaryText }) => {
     const config = sizeConfig[size];
     return {
         minHeight: config.height,
-        height: config.height,
+        height: hasSecondaryText ? 'auto' : config.height,
         paddingTop: config.paddingTop,
         paddingRight: config.paddingRight,
         paddingBottom: config.paddingBottom,
@@ -4060,6 +4061,8 @@ const StyledListItemButton$1 = styled(ListItemButton, {
         borderRadius: spacing.spacing_3_4, // 6px
         backgroundColor: semanticColors.input.background,
         gap: config.gap,
+        // Icon is always centered vertically per Figma design
+        alignItems: 'center',
         transition: theme.transitions.create(['background-color'], {
             duration: theme.transitions.duration.short,
         }),
@@ -4092,15 +4095,14 @@ const StyledListItemButton$1 = styled(ListItemButton, {
             fontWeight: typography.fontWeight.regular,
             color: semanticColors.typography.bodySecondary,
         },
-        // Secondary text styling
+        // Secondary text styling - wraps with word break
         '& .list-item-secondary': {
             fontSize: theme.typography.pxToRem('secondaryFontSize' in config ? config.secondaryFontSize : config.fontSize),
             lineHeight: size === 'large' ? 1.5 : 1.4,
             fontWeight: typography.fontWeight.regular,
             color: semanticColors.typography.bodySecondary,
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
+            wordBreak: 'break-word',
+            whiteSpace: 'normal',
             ...(size === 'large' && {
                 marginBottom: -2,
             }),
@@ -4192,7 +4194,7 @@ const NeoListItem = ({ size = 'medium', primaryText, secondaryText, badge, icon,
     const showBadge = badge && size === 'xxlarge';
     // Prepare primary text with badge if needed
     const primaryContent = showBadge ? (jsxs(Fragment, { children: [primaryText, ' ', jsx(Typography, { component: "span", className: "list-item-badge", children: badge })] })) : (primaryText);
-    return (jsxs(StyledListItemButton$1, { size: size, isLink: isLink, ...(component && { component }), ...props, children: [icon && jsx(ListItemIcon, { children: icon }), jsx(ListItemText, { primary: primaryContent, secondary: showSecondaryText ? secondaryText : undefined, slotProps: {
+    return (jsxs(StyledListItemButton$1, { size: size, isLink: isLink, hasSecondaryText: !!showSecondaryText, ...(component && { component }), ...props, children: [icon && jsx(ListItemIcon, { children: icon }), jsx(ListItemText, { primary: primaryContent, secondary: showSecondaryText ? secondaryText : undefined, sx: { minWidth: 0, flex: 1 }, slotProps: {
                     primary: { className: 'list-item-primary' },
                     secondary: { className: 'list-item-secondary' },
                 } })] }));
@@ -4769,7 +4771,7 @@ const Subtitle = styled(Typography)(() => ({
  * </NeoPageContent>
  * ```
  */
-function NeoPageContent({ pageTitle, subtitle, action, sticky = false, contentMaxWidth = false, disableGutters = false, isLoading = false, showBackToTop = true, children, sx, ...boxProps }) {
+function NeoPageContent({ pageTitle, subtitle, breadcrumbs, action, sticky = false, contentMaxWidth = false, centerContent = true, disableGutters = false, isLoading = false, showBackToTop = true, children, sx, ...boxProps }) {
     const [showBackToTopButton, setShowBackToTopButton] = useState(false);
     const headerRef = useRef(null);
     const containerRef = useRef(null);
@@ -4799,8 +4801,8 @@ function NeoPageContent({ pageTitle, subtitle, action, sticky = false, contentMa
         // Also try to scroll window in case component is in a different context
         window.scrollTo({ top: 0, behavior: 'smooth' });
     };
-    const headerContent = (jsxs(Stack, { ref: headerRef, direction: "row", justifyContent: "space-between", alignItems: "flex-start", sx: { flexShrink: 0, gap: spacing.spacing_2 }, children: [jsxs(Stack, { sx: { gap: spacing.spacing_1, flexGrow: 1 }, children: [jsx(PageTitle, { children: pageTitle }), subtitle &&
-                        (typeof subtitle === 'string' ? (jsx(Subtitle, { variant: "caption", children: subtitle })) : (subtitle))] }), action] }));
+    const headerContent = (jsxs(Stack, { ref: headerRef, sx: { flexShrink: 0, gap: '0.5rem' }, children: [breadcrumbs && breadcrumbs.length > 0 && (jsx(NeoBreadcrumbs, { children: breadcrumbs.map((item, index) => (jsx(NeoBreadcrumbLink, { href: item.href, current: index === breadcrumbs.length - 1, children: item.label }, item.href ?? index))) })), jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "flex-start", sx: { gap: '1rem' }, children: [jsxs(Stack, { sx: { gap: '0.5rem', flexGrow: 1 }, children: [jsx(PageTitle, { children: pageTitle }), subtitle &&
+                                (typeof subtitle === 'string' ? (jsx(Subtitle, { variant: "caption", children: subtitle })) : (subtitle))] }), action] })] }));
     const content = isLoading ? (jsx(Box, { sx: {
             display: 'flex',
             alignItems: 'center',
@@ -4824,15 +4826,27 @@ function NeoPageContent({ pageTitle, subtitle, action, sticky = false, contentMa
                         pb: `${spacing.spacing_2_1_2}px`,
                         height: '100%',
                         overflow: 'auto',
-                    }, children: [sticky ? (jsx(StickyHeader, { ref: headerRef, sx: { pt: `${spacing.spacing_2}px` }, children: headerContent })) : (jsx(Box, { ref: headerRef, sx: { mb: `${spacing.spacing_1}px` }, children: headerContent })), jsx(Box, { sx: {
+                    }, children: [sticky ? (jsx(StickyHeader, { ref: headerRef, sx: {
+                                pt: `${spacing.spacing_2}px`,
+                                ...(contentMaxWidth !== false && {
+                                    maxWidth: theme => theme.breakpoints.values[contentMaxWidth],
+                                    width: '100%',
+                                }),
+                            }, children: headerContent })) : (jsx(Box, { ref: headerRef, sx: {
+                                mb: `${spacing.spacing_1}px`,
+                                ...(contentMaxWidth !== false && {
+                                    maxWidth: theme => theme.breakpoints.values[contentMaxWidth],
+                                    width: '100%',
+                                }),
+                            }, children: headerContent })), jsx(Box, { sx: {
                                 flexGrow: 1,
                                 minHeight: 0,
                                 display: 'flex',
                                 flexDirection: 'column',
                                 ...(contentMaxWidth !== false && {
                                     maxWidth: theme => theme.breakpoints.values[contentMaxWidth],
-                                    mx: 'auto',
                                     width: '100%',
+                                    ...(centerContent ? { mx: 'auto' } : { alignSelf: 'flex-start' }),
                                 }),
                             }, children: content })] }) }), showBackToTop && (jsx(Fade, { in: showBackToTopButton, children: jsx(Box, { sx: {
                         position: 'fixed',