@moderneinc/neo-styled-components 2.3.0-next.f76980 → 2.4.0-next.7ddfb2

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.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}`]: {
@@ -908,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: {
@@ -1091,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 }) => {
@@ -1099,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];
@@ -1115,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'], {
@@ -1948,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',
@@ -1961,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,
     },
@@ -3921,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];
@@ -5491,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}`]: {