@moderneinc/neo-styled-components 2.3.0 → 2.4.0

package/dist/Checkbox/Checkbox.d.ts

@@ -92,6 +92,6 @@ export declare const NeoCheckbox: {
  * Base styled checkbox component without label wrapper
  * Used internally by NeoCheckbox and directly in DataGrid
  *
- * @internal - Prefer using NeoCheckbox for most cases
+ * @public
  */
 export { StyledCheckbox as NeoCheckboxBase };

package/dist/LargeCard/LargeCard.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+/**
+ * Props for the NeoLargeCard component
+ */
+export interface NeoLargeCardProps {
+    /**
+     * The content to display inside the component
+     */
+    children?: ReactNode;
+}
+/**
+ * NeoLargeCard - TODO: Add component description
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=5925-11
+ *
+ * Figma Props Mapping:
+ * - TODO: Document Figma property mappings
+ * - FigmaProp → reactProp
+ *
+ * Design Tokens Used:
+ * - TODO: List design tokens used (e.g., semanticColors.text.primary, typography.body.medium)
+ */
+export declare const NeoLargeCard: {
+    ({ children, ...props }: NeoLargeCardProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/NavItem/NavItem.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+/**
+ * Props for the NeoNavItem component
+ */
+export interface NeoNavItemProps {
+    /**
+     * The content to display inside the component
+     */
+    children?: ReactNode;
+}
+/**
+ * NeoNavItem - TODO: Add component description
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4286-13844
+ *
+ * Figma Props Mapping:
+ * - TODO: Document Figma property mappings
+ * - FigmaProp → reactProp
+ *
+ * Design Tokens Used:
+ * - TODO: List design tokens used (e.g., semanticColors.text.primary, typography.body.medium)
+ */
+export declare const NeoNavItem: {
+    ({ children, ...props }: NeoNavItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/SideNav/SideNav.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+/**
+ * Props for the NeoSideNav component
+ */
+export interface NeoSideNavProps {
+    /**
+     * The content to display inside the component
+     */
+    children?: ReactNode;
+}
+/**
+ * NeoSideNav - TODO: Add component description
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4065-3425
+ *
+ * Figma Props Mapping:
+ * - TODO: Document Figma property mappings
+ * - FigmaProp → reactProp
+ *
+ * Design Tokens Used:
+ * - TODO: List design tokens used (e.g., semanticColors.text.primary, typography.body.medium)
+ */
+export declare const NeoSideNav: {
+    ({ children, ...props }: NeoSideNavProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/TopNav/TopNav.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+/**
+ * Props for the NeoTopNav component
+ */
+export interface NeoTopNavProps {
+    /**
+     * The content to display inside the component
+     */
+    children?: ReactNode;
+}
+/**
+ * NeoTopNav - TODO: Add component description
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4618-185228
+ *
+ * Figma Props Mapping:
+ * - TODO: Document Figma property mappings
+ * - FigmaProp → reactProp
+ *
+ * Design Tokens Used:
+ * - TODO: List design tokens used (e.g., semanticColors.text.primary, typography.body.medium)
+ */
+export declare const NeoTopNav: {
+    ({ children, ...props }: NeoTopNavProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/Tree/Tree.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+/**
+ * Props for the NeoTree component
+ */
+export interface NeoTreeProps {
+    /**
+     * The content to display inside the component
+     */
+    children?: ReactNode;
+}
+/**
+ * NeoTree - TODO: Add component description
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4190-30493
+ *
+ * Figma Props Mapping:
+ * - TODO: Document Figma property mappings
+ * - FigmaProp → reactProp
+ *
+ * Design Tokens Used:
+ * - TODO: List design tokens used (e.g., semanticColors.text.primary, typography.body.medium)
+ */
+export declare const NeoTree: {
+    ({ children, ...props }: NeoTreeProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/index.d.ts

@@ -10,7 +10,7 @@ import * as _mui_material_ButtonBase from '@mui/material/ButtonBase';
 import { ButtonBaseProps } from '@mui/material/ButtonBase';
 import { ButtonGroupProps } from '@mui/material/ButtonGroup';
 import { CheckboxProps } from '@mui/material/Checkbox';
-import { DataGridProProps, GridSlots, GridDensity as GridDensity$1, ToolbarProps, GridColumnsPanelProps } from '@mui/x-data-grid-pro';
+import { GridDensity as GridDensity$1, DataGridProProps, GridSlots, ToolbarProps, 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';

package/dist/index.esm.js

@@ -74,18 +74,11 @@ const StyledAvatar = styled(Avatar, {
         height: spacing.spacing_2_1_2,
         fontSize: theme.typography.pxToRem(typography.fontSize.xs),
     }),
-    ...(size === 'medium' &&
-        variant === 'initials' && {
+    ...(size === 'medium' && {
         width: spacing.spacing_5_1_2,
         height: spacing.spacing_5_1_2,
         fontSize: theme.typography.pxToRem(typography.fontSize.sm),
     }),
-    ...(size === 'medium' &&
-        variant === 'circular' && {
-        width: 36,
-        height: 36,
-        fontSize: theme.typography.pxToRem(typography.fontSize.sm),
-    }),
     // Initials variant styling
     ...(variant === 'initials' && {
         backgroundColor: colors.violet[100],
@@ -160,6 +153,7 @@ const StyledChip$1 = styled(Chip)(({ theme }) => ({
     borderRadius: borderRadius.full,
     fontSize: theme.typography.pxToRem(typography.fontSize.xs),
     lineHeight: 1,
+    fontWeight: typography.fontWeight.medium,
     gap: spacing.spacing_1_2,
     overflow: 'visible',
     [`& .${chipClasses.label}`]: {
@@ -499,34 +493,52 @@ const NeoActivityIndicatorCell = ({ event = 'commit-job', secondaryEvent, scene
 NeoActivityIndicatorCell.displayName = 'NeoActivityIndicatorCell';
 
 /**
- * @license lucide-react v0.562.0 - ISC
+ * @license lucide-react v0.563.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+const mergeClasses = (...classes) => classes.filter((className, index, array) => {
+  return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
+}).join(" ").trim();
+
+/**
+ * @license lucide-react v0.563.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
 
 const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+
+/**
+ * @license lucide-react v0.563.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
 const toCamelCase = (string) => string.replace(
   /^([A-Z])|[\s-_]+(\w)/g,
   (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()
 );
+
+/**
+ * @license lucide-react v0.563.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
 const toPascalCase = (string) => {
   const camelCase = toCamelCase(string);
   return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
 };
-const mergeClasses = (...classes) => classes.filter((className, index, array) => {
-  return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
-}).join(" ").trim();
-const hasA11yProp = (props) => {
-  for (const prop in props) {
-    if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
-      return true;
-    }
-  }
-};
 
 /**
- * @license lucide-react v0.562.0 - ISC
+ * @license lucide-react v0.563.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 +557,23 @@ var defaultAttributes = {
 };
 
 /**
- * @license lucide-react v0.562.0 - ISC
+ * @license lucide-react v0.563.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+const hasA11yProp = (props) => {
+  for (const prop in props) {
+    if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
+      return true;
+    }
+  }
+  return false;
+};
+
+/**
+ * @license lucide-react v0.563.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 +611,7 @@ const Icon = forwardRef(
 );
 
 /**
- * @license lucide-react v0.562.0 - ISC
+ * @license lucide-react v0.563.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 +636,7 @@ const createLucideIcon = (iconName, iconNode) => {
 };
 
 /**
- * @license lucide-react v0.562.0 - ISC
+ * @license lucide-react v0.563.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 +650,7 @@ const __iconNode$h = [
 const ArrowDown = createLucideIcon("arrow-down", __iconNode$h);
 
 /**
- * @license lucide-react v0.562.0 - ISC
+ * @license lucide-react v0.563.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 +664,7 @@ const __iconNode$g = [
 const ArrowUp = createLucideIcon("arrow-up", __iconNode$g);
 
 /**
- * @license lucide-react v0.562.0 - ISC
+ * @license lucide-react v0.563.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 +686,7 @@ const __iconNode$f = [
 const CalendarDays = createLucideIcon("calendar-days", __iconNode$f);
 
 /**
- * @license lucide-react v0.562.0 - ISC
+ * @license lucide-react v0.563.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 +697,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.562.0 - ISC
+ * @license lucide-react v0.563.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 +708,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.562.0 - ISC
+ * @license lucide-react v0.563.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 +719,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.562.0 - ISC
+ * @license lucide-react v0.563.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 +730,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.562.0 - ISC
+ * @license lucide-react v0.563.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 +744,7 @@ const __iconNode$a = [
 const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$a);
 
 /**
- * @license lucide-react v0.562.0 - ISC
+ * @license lucide-react v0.563.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 +759,7 @@ const __iconNode$9 = [
 const CircleAlert = createLucideIcon("circle-alert", __iconNode$9);
 
 /**
- * @license lucide-react v0.562.0 - ISC
+ * @license lucide-react v0.563.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 +773,7 @@ const __iconNode$8 = [
 const CircleCheck = createLucideIcon("circle-check", __iconNode$8);
 
 /**
- * @license lucide-react v0.562.0 - ISC
+ * @license lucide-react v0.563.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 +788,7 @@ const __iconNode$7 = [
 const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$7);
 
 /**
- * @license lucide-react v0.562.0 - ISC
+ * @license lucide-react v0.563.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 +803,7 @@ const __iconNode$6 = [
 const Columns3 = createLucideIcon("columns-3", __iconNode$6);
 
 /**
- * @license lucide-react v0.562.0 - ISC
+ * @license lucide-react v0.563.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 +818,7 @@ const __iconNode$5 = [
 const ListFilter = createLucideIcon("list-filter", __iconNode$5);
 
 /**
- * @license lucide-react v0.562.0 - ISC
+ * @license lucide-react v0.563.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 +832,7 @@ const __iconNode$4 = [
 const Plus = createLucideIcon("plus", __iconNode$4);
 
 /**
- * @license lucide-react v0.562.0 - ISC
+ * @license lucide-react v0.563.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 +846,7 @@ const __iconNode$3 = [
 const Search = createLucideIcon("search", __iconNode$3);
 
 /**
- * @license lucide-react v0.562.0 - ISC
+ * @license lucide-react v0.563.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 +863,7 @@ const __iconNode$2 = [
 const Trash2 = createLucideIcon("trash-2", __iconNode$2);
 
 /**
- * @license lucide-react v0.562.0 - ISC
+ * @license lucide-react v0.563.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 +882,7 @@ const __iconNode$1 = [
 const WifiOff = createLucideIcon("wifi-off", __iconNode$1);
 
 /**
- * @license lucide-react v0.562.0 - ISC
+ * @license lucide-react v0.563.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -874,7 +902,7 @@ const StyledAlert$2 = styled(Alert, {
     // Variant-specific styles
     const variantStyles = {
         dark: {
-            backgroundColor: colors.digitalBlue['400'],
+            backgroundColor: semanticColors.surfaces.snackbarBrand,
             color: semanticColors.surfaces.white,
         },
         light: {
@@ -1057,7 +1085,15 @@ function NeoBreadcrumbs({ children, className }) {
 }
 
 // Props that should not be forwarded to ButtonBase (Button-specific props that ButtonBase doesn't support)
-const buttonOnlyProps$1 = ['variant', 'size', 'loading', 'startIcon', 'endIcon', 'fullWidth', 'disableElevation'];
+const buttonOnlyProps$1 = [
+    'variant',
+    'size',
+    'loading',
+    'startIcon',
+    'endIcon',
+    'fullWidth',
+    'disableElevation',
+];
 const StyledButtonBase$1 = styled(ButtonBase, {
     shouldForwardProp: prop => !buttonOnlyProps$1.includes(prop),
 })(({ theme, variant = 'primary', size = 'medium', loading = false }) => {
@@ -1065,13 +1101,13 @@ const StyledButtonBase$1 = styled(ButtonBase, {
     const sizeConfig = {
         small: {
             height: 32,
-            padding: `0 ${theme.spacing(2)}`,
+            padding: `0 ${theme.spacing(1.5)}`,
             fontSize: theme.typography.pxToRem(14),
         },
         medium: {
             height: spacing.spacing_5,
-            padding: `0 ${theme.spacing(3)}`,
-            fontSize: theme.typography.pxToRem(16),
+            padding: `0 ${theme.spacing(2)}`,
+            fontSize: theme.typography.pxToRem(14),
         },
     };
     const sizeStyles = sizeConfig[size];
@@ -1081,7 +1117,7 @@ const StyledButtonBase$1 = styled(ButtonBase, {
         padding: sizeStyles.padding,
         fontSize: sizeStyles.fontSize,
         fontWeight: 500,
-        lineHeight: 1.5,
+        lineHeight: '1.25rem',
         borderRadius: borderRadius.button,
         textTransform: 'none',
         transition: theme.transitions.create(['background-color', 'border-color', 'color'], {
@@ -1914,7 +1950,7 @@ const StyledSelect = styled(MuiSelect)({
     },
     '&.Mui-focused': {
         backgroundColor: semanticColors.input.background,
-        borderColor: semanticColors.border.input,
+        borderColor: semanticColors.buttons.primary.default,
     },
     '&::before': {
         display: 'none',
@@ -1927,7 +1963,7 @@ const StyledSelect = styled(MuiSelect)({
         paddingBottom: spacing.spacing_1,
         paddingLeft: spacing.spacing_1_1_2,
         paddingRight: spacing.spacing_5,
-        fontSize: typography.fontSize.default,
+        fontSize: typography.fontSize.sm,
         fontWeight: typography.fontWeight.regular,
         color: semanticColors.typography.input.default,
     },
@@ -3887,7 +3923,7 @@ const StyledInputBase = styled(InputBase, {
             height: spacing.spacing_5_1_2,
             padding: `${spacing.spacing_2}px ${spacing.spacing_3}px ${spacing.spacing_2}px ${startAdornment ? 0 : spacing.spacing_2}px`,
             fontSize: theme.typography.pxToRem(typography.fontSize.default),
-            borderRadius: borderRadius.full,
+            borderRadius: borderRadius.input,
         },
     };
     const sizeStyles = sizeConfig[size];
@@ -5457,9 +5493,9 @@ const StyledTab = styled(MuiTab)(({ theme }) => ({
     minHeight: spacing.spacing_5,
     padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
     textTransform: 'none',
-    fontWeight: 500,
+    fontWeight: 400,
     fontSize: theme.typography.pxToRem(14),
-    lineHeight: 1.5,
+    lineHeight: '1.5rem',
     color: semanticColors.typography.tab.inactive,
     transition: 'none', // Remove animation
     [`&.${tabClasses.selected}`]: {