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

package/dist/index.js

@@ -4049,12 +4049,13 @@ const StyledListItemButton$1 = styles.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,
@@ -4062,6 +4063,8 @@ const StyledListItemButton$1 = styles.styled(ListItemButton, {
         borderRadius: neoDesign.spacing.spacing_3_4, // 6px
         backgroundColor: neoDesign.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,
         }),
@@ -4094,15 +4097,14 @@ const StyledListItemButton$1 = styles.styled(ListItemButton, {
             fontWeight: neoDesign.typography.fontWeight.regular,
             color: neoDesign.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: neoDesign.typography.fontWeight.regular,
             color: neoDesign.semanticColors.typography.bodySecondary,
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
+            wordBreak: 'break-word',
+            whiteSpace: 'normal',
             ...(size === 'large' && {
                 marginBottom: -2,
             }),
@@ -4194,7 +4196,7 @@ const NeoListItem = ({ size = 'medium', primaryText, secondaryText, badge, icon,
     const showBadge = badge && size === 'xxlarge';
     // Prepare primary text with badge if needed
     const primaryContent = showBadge ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [primaryText, ' ', jsxRuntime.jsx(Typography, { component: "span", className: "list-item-badge", children: badge })] })) : (primaryText);
-    return (jsxRuntime.jsxs(StyledListItemButton$1, { size: size, isLink: isLink, ...(component && { component }), ...props, children: [icon && jsxRuntime.jsx(ListItemIcon, { children: icon }), jsxRuntime.jsx(ListItemText, { primary: primaryContent, secondary: showSecondaryText ? secondaryText : undefined, slotProps: {
+    return (jsxRuntime.jsxs(StyledListItemButton$1, { size: size, isLink: isLink, hasSecondaryText: !!showSecondaryText, ...(component && { component }), ...props, children: [icon && jsxRuntime.jsx(ListItemIcon, { children: icon }), jsxRuntime.jsx(ListItemText, { primary: primaryContent, secondary: showSecondaryText ? secondaryText : undefined, sx: { minWidth: 0, flex: 1 }, slotProps: {
                     primary: { className: 'list-item-primary' },
                     secondary: { className: 'list-item-secondary' },
                 } })] }));
@@ -4771,7 +4773,7 @@ const Subtitle = styles.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] = react.useState(false);
     const headerRef = react.useRef(null);
     const containerRef = react.useRef(null);
@@ -4801,8 +4803,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 = (jsxRuntime.jsxs(Stack, { ref: headerRef, direction: "row", justifyContent: "space-between", alignItems: "flex-start", sx: { flexShrink: 0, gap: neoDesign.spacing.spacing_2 }, children: [jsxRuntime.jsxs(Stack, { sx: { gap: neoDesign.spacing.spacing_1, flexGrow: 1 }, children: [jsxRuntime.jsx(PageTitle, { children: pageTitle }), subtitle &&
-                        (typeof subtitle === 'string' ? (jsxRuntime.jsx(Subtitle, { variant: "caption", children: subtitle })) : (subtitle))] }), action] }));
+    const headerContent = (jsxRuntime.jsxs(Stack, { ref: headerRef, sx: { flexShrink: 0, gap: '0.5rem' }, children: [breadcrumbs && breadcrumbs.length > 0 && (jsxRuntime.jsx(NeoBreadcrumbs, { children: breadcrumbs.map((item, index) => (jsxRuntime.jsx(NeoBreadcrumbLink, { href: item.href, current: index === breadcrumbs.length - 1, children: item.label }, item.href ?? index))) })), jsxRuntime.jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "flex-start", sx: { gap: '1rem' }, children: [jsxRuntime.jsxs(Stack, { sx: { gap: '0.5rem', flexGrow: 1 }, children: [jsxRuntime.jsx(PageTitle, { children: pageTitle }), subtitle &&
+                                (typeof subtitle === 'string' ? (jsxRuntime.jsx(Subtitle, { variant: "caption", children: subtitle })) : (subtitle))] }), action] })] }));
     const content = isLoading ? (jsxRuntime.jsx(Box, { sx: {
             display: 'flex',
             alignItems: 'center',
@@ -4833,8 +4835,8 @@ function NeoPageContent({ pageTitle, subtitle, action, sticky = false, contentMa
                                 flexDirection: 'column',
                                 ...(contentMaxWidth !== false && {
                                     maxWidth: theme => theme.breakpoints.values[contentMaxWidth],
-                                    mx: 'auto',
                                     width: '100%',
+                                    ...(centerContent ? { mx: 'auto' } : { alignSelf: 'flex-start' }),
                                 }),
                             }, children: content })] }) }), showBackToTop && (jsxRuntime.jsx(Fade, { in: showBackToTopButton, children: jsxRuntime.jsx(Box, { sx: {
                         position: 'fixed',