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

package/dist/index.js

@@ -501,7 +501,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.
@@ -528,7 +528,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.
@@ -547,7 +547,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.
@@ -585,7 +585,7 @@ const Icon = react.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.
@@ -610,7 +610,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.
@@ -624,7 +624,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.
@@ -638,7 +638,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.
@@ -660,7 +660,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.
@@ -671,7 +671,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.
@@ -682,7 +682,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.
@@ -693,7 +693,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.
@@ -704,7 +704,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.
@@ -718,7 +718,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.
@@ -733,7 +733,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.
@@ -747,7 +747,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.
@@ -762,7 +762,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.
@@ -777,7 +777,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.
@@ -792,7 +792,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.
@@ -806,7 +806,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.
@@ -820,7 +820,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.
@@ -837,7 +837,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.
@@ -856,7 +856,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.
@@ -3984,11 +3984,11 @@ NeoInputField.displayName = 'NeoInputField';
 // Size configuration for consistent styling
 const sizeConfig = {
     small: {
-        height: 36,
-        paddingTop: neoDesign.spacing.spacing_1,
-        paddingRight: neoDesign.spacing.spacing_1_1_4,
-        paddingBottom: neoDesign.spacing.spacing_1,
-        paddingLeft: neoDesign.spacing.spacing_1_1_4,
+        height: neoDesign.spacing.spacing_3_1_2,
+        paddingTop: 1,
+        paddingRight: neoDesign.spacing.spacing_3_4,
+        paddingBottom: 1,
+        paddingLeft: neoDesign.spacing.spacing_3_4,
         gap: neoDesign.spacing.spacing_1,
         iconSize: neoDesign.typography.fontSize.h4,
         fontSize: neoDesign.typography.fontSize.sm,
@@ -3996,10 +3996,10 @@ const sizeConfig = {
     },
     medium: {
         height: neoDesign.spacing.spacing_5,
-        paddingTop: neoDesign.spacing.spacing_1,
-        paddingRight: neoDesign.spacing.spacing_1_1_4,
-        paddingBottom: neoDesign.spacing.spacing_1,
-        paddingLeft: neoDesign.spacing.spacing_1,
+        paddingTop: 1,
+        paddingRight: neoDesign.spacing.spacing_3_4,
+        paddingBottom: 1,
+        paddingLeft: neoDesign.spacing.spacing_3_4,
         gap: neoDesign.spacing.spacing_1,
         iconSize: neoDesign.typography.fontSize.h4,
         fontSize: neoDesign.typography.fontSize.default,
@@ -4007,10 +4007,10 @@ const sizeConfig = {
     },
     large: {
         height: neoDesign.spacing.spacing_6,
-        paddingTop: neoDesign.spacing.spacing_1,
-        paddingRight: neoDesign.spacing.spacing_1_1_4,
-        paddingBottom: neoDesign.spacing.spacing_1,
-        paddingLeft: neoDesign.spacing.spacing_1_1_4,
+        paddingTop: 1,
+        paddingRight: neoDesign.spacing.spacing_3_4,
+        paddingBottom: 1,
+        paddingLeft: neoDesign.spacing.spacing_3_4,
         gap: neoDesign.spacing.spacing_1_1_2,
         iconSize: neoDesign.typography.fontSize.h2,
         fontSize: neoDesign.typography.fontSize.default,
@@ -4019,10 +4019,10 @@ const sizeConfig = {
     },
     xlarge: {
         height: neoDesign.spacing.spacing_8,
-        paddingTop: neoDesign.spacing.spacing_1,
-        paddingRight: neoDesign.spacing.spacing_1_1_4,
-        paddingBottom: neoDesign.spacing.spacing_1,
-        paddingLeft: neoDesign.spacing.spacing_1_1_4,
+        paddingTop: 1,
+        paddingRight: neoDesign.spacing.spacing_3_4,
+        paddingBottom: 1,
+        paddingLeft: neoDesign.spacing.spacing_3_4,
         gap: neoDesign.spacing.spacing_2,
         iconSize: neoDesign.typography.fontSize.h2,
         fontSize: neoDesign.typography.fontSize.default,
@@ -4031,10 +4031,10 @@ const sizeConfig = {
     },
     xxlarge: {
         height: neoDesign.spacing.spacing_10,
-        paddingTop: neoDesign.spacing.spacing_1,
-        paddingRight: neoDesign.spacing.spacing_1_1_2,
-        paddingBottom: neoDesign.spacing.spacing_1,
-        paddingLeft: neoDesign.spacing.spacing_1_1_2,
+        paddingTop: 1,
+        paddingRight: neoDesign.spacing.spacing_3_4,
+        paddingBottom: 1,
+        paddingLeft: neoDesign.spacing.spacing_3_4,
         gap: neoDesign.spacing.spacing_2,
         iconSize: neoDesign.spacing.spacing_5,
         fontSize: neoDesign.typography.fontSize.h5,
@@ -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,
         }),
@@ -4076,10 +4079,17 @@ const StyledListItemButton$1 = styles.styled(ListItemButton, {
             }),
         },
         // Primary text styling
+        // Font weight varies by size per Figma:
+        // - Default: small/medium use 400, large/xlarge/xxlarge use 500
+        // - Link: xxlarge uses 600, others use their default weight
         '& .list-item-primary': {
             fontSize: theme.typography.pxToRem(config.fontSize),
             lineHeight: config.lineHeight,
-            fontWeight: neoDesign.typography.fontWeight.medium,
+            fontWeight: isLink && size === 'xxlarge'
+                ? neoDesign.typography.fontWeight.semiBold
+                : size === 'small' || size === 'medium'
+                    ? neoDesign.typography.fontWeight.regular
+                    : neoDesign.typography.fontWeight.medium,
             color: isLink
                 ? neoDesign.semanticColors.typography.link.primary
                 : neoDesign.semanticColors.typography.navigation.default,
@@ -4094,15 +4104,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,
             }),
@@ -4112,6 +4121,9 @@ const StyledListItemButton$1 = styles.styled(ListItemButton, {
             backgroundColor: neoDesign.semanticColors.input.background,
         },
         // Selected/Active state
+        // Font weights per Figma:
+        // - Primary: small/medium/xxlarge use 500, large/xlarge use 600
+        // - Secondary: large/xlarge use 500, xxlarge uses 400
         [`&.${ListItemButton.listItemButtonClasses.selected}`]: {
             backgroundColor: neoDesign.semanticColors.buttons.secondary.hoverBackground,
             '&:hover': {
@@ -4121,11 +4133,15 @@ const StyledListItemButton$1 = styles.styled(ListItemButton, {
                 color: neoDesign.semanticColors.icons.pressed,
             },
             '& .list-item-primary': {
-                fontWeight: neoDesign.typography.fontWeight.semiBold,
+                fontWeight: size === 'large' || size === 'xlarge'
+                    ? neoDesign.typography.fontWeight.semiBold
+                    : neoDesign.typography.fontWeight.medium,
                 color: neoDesign.semanticColors.typography.navigation.default,
             },
             '& .list-item-secondary': {
-                fontWeight: neoDesign.typography.fontWeight.medium,
+                fontWeight: size === 'large' || size === 'xlarge'
+                    ? neoDesign.typography.fontWeight.medium
+                    : neoDesign.typography.fontWeight.regular,
             },
         },
         // Disabled state
@@ -4194,7 +4210,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 +4787,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 +4817,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',
@@ -4826,15 +4842,27 @@ function NeoPageContent({ pageTitle, subtitle, action, sticky = false, contentMa
                         pb: `${neoDesign.spacing.spacing_2_1_2}px`,
                         height: '100%',
                         overflow: 'auto',
-                    }, children: [sticky ? (jsxRuntime.jsx(StickyHeader, { ref: headerRef, sx: { pt: `${neoDesign.spacing.spacing_2}px` }, children: headerContent })) : (jsxRuntime.jsx(Box, { ref: headerRef, sx: { mb: `${neoDesign.spacing.spacing_1}px` }, children: headerContent })), jsxRuntime.jsx(Box, { sx: {
+                    }, children: [sticky ? (jsxRuntime.jsx(StickyHeader, { ref: headerRef, sx: {
+                                pt: `${neoDesign.spacing.spacing_2}px`,
+                                ...(contentMaxWidth !== false && {
+                                    maxWidth: theme => theme.breakpoints.values[contentMaxWidth],
+                                    width: '100%',
+                                }),
+                            }, children: headerContent })) : (jsxRuntime.jsx(Box, { ref: headerRef, sx: {
+                                mb: `${neoDesign.spacing.spacing_1}px`,
+                                ...(contentMaxWidth !== false && {
+                                    maxWidth: theme => theme.breakpoints.values[contentMaxWidth],
+                                    width: '100%',
+                                }),
+                            }, children: headerContent })), jsxRuntime.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 && (jsxRuntime.jsx(Fade, { in: showBackToTopButton, children: jsxRuntime.jsx(Box, { sx: {
                         position: 'fixed',