@moderneinc/neo-styled-components 4.0.0-next.e0896f → 4.0.0

package/dist/index.js

@@ -4,8 +4,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var neoDesign = require('@moderneinc/neo-design');
 var Box = require('@mui/material/Box');
 var styles = require('@mui/material/styles');
-var Avatar = require('@mui/material/Avatar');
 var Chip = require('@mui/material/Chip');
+var MuiAvatar = require('@mui/material/Avatar');
 var SvgIcon = require('@mui/material/SvgIcon');
 var Alert = require('@mui/material/Alert');
 var ButtonBase = require('@mui/material/ButtonBase');
@@ -64,129 +64,6 @@ var hooks = require('@mui/x-tree-view/hooks');
 var TreeItem = require('@mui/x-tree-view/TreeItem');
 var RichTreeViewPro = require('@mui/x-tree-view-pro/RichTreeViewPro');
 
-/**
- * Outline-based focus ring styles derived from Neo border tokens.
- * Uses CSS outline (not box-shadow) so focus rings are never clipped by overflow:hidden.
- *
- * Produces a double-ring effect: a white inner gap (via outline-offset) and a colored outer ring.
- */
-const focusRingStyles = {
-    outline: `2px solid ${neoDesign.semanticColors.border.focus}`,
-    outlineOffset: '2px',
-};
-
-// biome-ignore lint/suspicious/noExplicitAny: Type cast required to override MUI Avatar variant type without global augmentation
-const StyledAvatar$1 = styles.styled(Avatar, {
-    shouldForwardProp: prop => prop !== 'size' && prop !== 'variant',
-})(({ theme, size = 'medium', variant = 'circular' }) => ({
-    boxSizing: 'border-box',
-    borderRadius: neoDesign.borderRadius.full,
-    fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.xs),
-    fontWeight: neoDesign.typography.fontWeight.regular,
-    lineHeight: 1.5,
-    // Size variants — dimensions match Figma bounding boxes (border-box)
-    ...(size === 'small' &&
-        variant === 'circular' && {
-        width: neoDesign.spacing.spacing_4,
-        height: neoDesign.spacing.spacing_4,
-        fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.xs),
-    }),
-    ...(size === 'small' &&
-        variant === 'initials' && {
-        width: neoDesign.spacing.spacing_2_1_2,
-        height: neoDesign.spacing.spacing_2_1_2,
-        fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.xs),
-    }),
-    // Medium circular fills its AvatarContainer (container owns the 44px dimension)
-    ...(size === 'medium' &&
-        variant === 'circular' && {
-        width: '100%',
-        height: '100%',
-        fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.sm),
-    }),
-    // Medium initials has no container, so it owns its 44px dimension
-    ...(size === 'medium' &&
-        variant === 'initials' && {
-        width: neoDesign.spacing.spacing_5_1_2,
-        height: neoDesign.spacing.spacing_5_1_2,
-        fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.sm),
-    }),
-    // Initials variant styling
-    ...(variant === 'initials' && {
-        backgroundColor: neoDesign.colors.violet[100],
-        color: neoDesign.semanticColors.icons.default,
-        border: `1px solid ${neoDesign.semanticColors.icons.default}`,
-    }),
-    // Circular variant (image) styling
-    ...(variant === 'circular' && {
-        backgroundColor: 'transparent',
-        border: `2px solid ${neoDesign.semanticColors.surfaces.white}`,
-    }),
-    '&:focus-visible': {
-        ...focusRingStyles,
-    },
-}));
-const AvatarContainer = styles.styled(Box)(({ size = 'medium' }) => ({
-    boxSizing: 'border-box',
-    ...(size === 'medium' && {
-        width: neoDesign.spacing.spacing_5_1_2,
-        height: neoDesign.spacing.spacing_5_1_2,
-        backgroundColor: neoDesign.semanticColors.surfaces.white,
-        borderRadius: neoDesign.borderRadius.full,
-        padding: neoDesign.spacing.spacing_1_4,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        overflow: 'hidden',
-        boxShadow: `${neoDesign.shadows.neutral.small.x}px ${neoDesign.shadows.neutral.small.y}px ${neoDesign.shadows.neutral.small.blur}px ${neoDesign.shadows.neutral.small.spread}px ${neoDesign.shadows.neutral.small.shadow}`,
-    }),
-    '&:focus-within': {
-        ...focusRingStyles,
-    },
-}));
-/**
- * NeoAvatar - User avatar component based on MUI Avatar
- *
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=9600-185
- *
- * Figma Props Mapping:
- * - Figma Type "Initials" → variant="initials", size="small" (20px)
- * - Figma Type "Small" → variant="circular", size="small" (32px with image)
- * - Figma Type "Medium" → variant="circular", size="medium" (44px white container with image)
- * - State: Focus → CSS :focus-visible ring (2px white inner + 4px blue outer)
- * - State: Hover (tooltip) → Wrap component with MUI Tooltip
- *
- * Usage:
- * ```tsx
- * // Medium image avatar (with white container)
- * <NeoAvatar variant="circular" size="medium" src="/avatar.jpg" alt="User" />
- *
- * // Small image avatar (no container)
- * <NeoAvatar variant="circular" size="small" src="/avatar.jpg" alt="User" />
- *
- * // Small initials avatar
- * <NeoAvatar variant="initials" size="small">A</NeoAvatar>
- *
- * // Medium initials avatar
- * <NeoAvatar variant="initials" size="medium">AB</NeoAvatar>
- *
- * // With tooltip (user wraps)
- * <Tooltip title="This is a tooltip" arrow placement="top">
- *   <NeoAvatar variant="initials">A</NeoAvatar>
- * </Tooltip>
- * ```
- */
-const NeoAvatar = ({ size = 'medium', variant = 'circular', ...props }) => {
-    // shouldForwardProp filters out size and variant from being passed to the DOM
-    const avatar = jsxRuntime.jsx(StyledAvatar$1, { size: size, variant: variant, ...props });
-    // Medium size with circular variant (image) gets wrapped in white container
-    if (size === 'medium' && variant === 'circular') {
-        return jsxRuntime.jsx(AvatarContainer, { size: size, children: avatar });
-    }
-    return avatar;
-};
-NeoAvatar.displayName = 'NeoAvatar';
-
 const StyledChip$2 = styles.styled(Chip)(({ theme }) => ({
     height: 24,
     paddingTop: neoDesign.spacing.spacing_1_4,
@@ -278,6 +155,67 @@ const NeoBadge = (props) => {
 };
 NeoBadge.displayName = 'NeoBadge';
 
+/**
+ * Shared color palette for avatar components (GeneralAvatar, NavigationAvatar).
+ * Maps color index (1-7) to background color token pairs.
+ */
+const avatarColorPalette = {
+    1: { bg: neoDesign.colors.digitalBlue[100] },
+    2: { bg: neoDesign.colors.digitalGreen[100] },
+    3: { bg: neoDesign.colors.gold[100] },
+    4: { bg: neoDesign.colors.red[100] },
+    5: { bg: neoDesign.colors.violet[100] },
+    6: { bg: neoDesign.colors.tealGreen[100] },
+    7: { bg: neoDesign.colors.orange[100] },
+};
+
+/**
+ * Outline-based focus ring styles derived from Neo border tokens.
+ * Uses CSS outline (not box-shadow) so focus rings are never clipped by overflow:hidden.
+ *
+ * Produces a double-ring effect: a white inner gap (via outline-offset) and a colored outer ring.
+ */
+const focusRingStyles = {
+    outline: `2px solid ${neoDesign.semanticColors.border.focus}`,
+    outlineOffset: '2px',
+};
+
+const sizeConfig$1 = {
+    small: { width: neoDesign.spacing.spacing_4, height: neoDesign.spacing.spacing_4, fontSize: neoDesign.typography.fontSize.xs },
+    medium: { width: neoDesign.spacing.spacing_5, height: neoDesign.spacing.spacing_5, fontSize: neoDesign.typography.fontSize.sm },
+};
+const StyledAvatar = styles.styled(MuiAvatar, {
+    shouldForwardProp: prop => prop !== 'avatarSize' && prop !== 'colorIndex',
+})(({ theme, avatarSize, colorIndex }) => {
+    const size = sizeConfig$1[avatarSize];
+    const palette = avatarColorPalette[colorIndex];
+    return {
+        boxSizing: 'border-box',
+        width: size.width,
+        height: size.height,
+        fontSize: theme.typography.pxToRem(size.fontSize),
+        fontFamily: neoDesign.typography.fontFamily.body,
+        fontWeight: neoDesign.typography.fontWeight.regular,
+        lineHeight: 1,
+        color: neoDesign.semanticColors.typography.body,
+        backgroundColor: palette ? palette.bg : undefined,
+        border: `1px solid ${neoDesign.semanticColors.border.primary}`,
+        '&:focus-visible': {
+            ...focusRingStyles,
+            borderColor: neoDesign.semanticColors.border.focus,
+        },
+    };
+});
+/**
+ * NeoGeneralAvatar - Avatar with image or colored initials display
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=9600-185
+ */
+const NeoGeneralAvatar = ({ size = 'medium', colorIndex = 0, children, ...props }) => {
+    return (jsxRuntime.jsx(StyledAvatar, { avatarSize: size, colorIndex: colorIndex, ...props, children: children }));
+};
+NeoGeneralAvatar.displayName = 'NeoGeneralAvatar';
+
 /**
  * Base styled container for DataGrid cell content that needs flex layout
  */
@@ -313,7 +251,7 @@ const CellContentContainer = styles.styled('div')({
  * // Avatar with text
  * renderCell: (params) => (
  *   <NeoDataGridCellContent>
- *     <NeoAvatar src={params.row.avatarUrl} />
+ *     <NeoGeneralAvatar src={params.row.avatarUrl} />
  *     <span>{params.row.name}</span>
  *   </NeoDataGridCellContent>
  * )
@@ -364,7 +302,7 @@ const NeoStatusBadgeCell = ({ status, colorMap }) => {
 };
 NeoStatusBadgeCell.displayName = 'NeoStatusBadgeCell';
 const NeoUserAvatarCell = ({ name, avatarUrl, size = 'small' }) => {
-    return (jsxRuntime.jsxs(NeoDataGridCellContent, { children: [jsxRuntime.jsx(NeoAvatar, { size: size, alt: name, src: avatarUrl }), jsxRuntime.jsx("span", { style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: name })] }));
+    return (jsxRuntime.jsxs(NeoDataGridCellContent, { children: [jsxRuntime.jsx(NeoGeneralAvatar, { size: size, alt: name, src: avatarUrl }), jsxRuntime.jsx("span", { style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: name })] }));
 };
 NeoUserAvatarCell.displayName = 'NeoUserAvatarCell';
 /**
@@ -1352,48 +1290,6 @@ const StyledButtonBase$1 = styles.styled(ButtonBase, {
                     },
                 }),
         },
-        link: {
-            backgroundColor: 'transparent',
-            color: neoDesign.semanticColors.buttons.tertiary.default,
-            border: 'none',
-            padding: `0 ${theme.spacing(1)}`,
-            '&:hover': {
-                backgroundColor: 'transparent',
-                color: neoDesign.semanticColors.buttons.tertiary.hover,
-            },
-            '&:active': {
-                color: neoDesign.semanticColors.buttons.tertiary.pressed,
-            },
-            ...(loading
-                ? {}
-                : {
-                    [`&.${ButtonBase.buttonBaseClasses.disabled}`]: {
-                        backgroundColor: 'transparent',
-                        color: neoDesign.semanticColors.buttons.tertiary.disabled,
-                    },
-                }),
-        },
-        linkColor: {
-            backgroundColor: 'transparent',
-            color: neoDesign.semanticColors.buttons.primary.default,
-            border: 'none',
-            padding: `0 ${theme.spacing(1)}`,
-            '&:hover': {
-                backgroundColor: 'transparent',
-                color: neoDesign.semanticColors.buttons.primary.hover,
-            },
-            '&:active': {
-                color: neoDesign.semanticColors.buttons.primary.pressed,
-            },
-            ...(loading
-                ? {}
-                : {
-                    [`&.${ButtonBase.buttonBaseClasses.disabled}`]: {
-                        backgroundColor: 'transparent',
-                        color: neoDesign.semanticColors.buttons.tertiary.disabled,
-                    },
-                }),
-        },
         tertiary: {
             backgroundColor: 'transparent',
             color: neoDesign.semanticColors.typography.input.default,
@@ -1428,8 +1324,6 @@ const LoadingSpinner = styles.styled(CircularProgress)(({ theme, $variant }) =>
         primary: theme.palette.common.white,
         secondary: neoDesign.semanticColors.buttons.primary.default,
         destructive: theme.palette.common.white,
-        link: neoDesign.semanticColors.buttons.primary.default,
-        linkColor: neoDesign.semanticColors.buttons.primary.default,
         tertiary: neoDesign.semanticColors.buttons.tertiary.default,
     };
     return {
@@ -1442,7 +1336,7 @@ const LoadingSpinner = styles.styled(CircularProgress)(({ theme, $variant }) =>
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4086-7590
  *
  * Figma Props Mapping:
- * - Hierarchy (Primary|Secondary|Destructive|Link|Link Color|Tertiary) → variant prop
+ * - Hierarchy (Primary|Secondary|Destructive|Tertiary) → variant prop
  * - Size (Small|Medium) → size prop
  * - State=Disabled → disabled prop
  * - State=Loading → loading prop
@@ -1941,7 +1835,7 @@ const StyledCheckbox = styles.styled(Checkbox, {
  * Figma Props Mapping:
  * - Checked (True|False) → checked prop
  * - Indeterminate (True|False) → indeterminate prop
- * - Size (xs|sm|md) → size prop (xs|small|medium)
+ * - Size (Extra Small|Small|Medium) → size prop (xs|small|medium)
  * - State=Default → default state
  * - State=Hover → CSS :hover
  * - State=Focused → CSS :focus-visible
@@ -1993,6 +1887,22 @@ const NeoCheckbox = ({ size = 'medium', label, helperText, disabled, icon, check
 };
 NeoCheckbox.displayName = 'NeoCheckbox';
 
+/**
+ * NeoCheckboxWithText - Checkbox with label and supporting text
+ *
+ * Thin wrapper around NeoCheckbox that maps the Figma "Checkbox with text"
+ * component to the existing NeoCheckbox with label + helperText.
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=12125-162
+ *
+ * Figma Props Mapping:
+ * - Property 1 (Medium|Small) → size ('medium'|'small')
+ */
+const NeoCheckboxWithText = ({ size = 'small', ...props }) => {
+    return jsxRuntime.jsx(NeoCheckbox, { size: size, ...props });
+};
+NeoCheckboxWithText.displayName = 'NeoCheckboxWithText';
+
 const StyledButtonBase = styles.styled(ButtonBase, {
     shouldForwardProp: prop => prop !== 'isMultiline' && prop !== 'variant' && prop !== 'size',
 })(({ theme, variant = 'outlined', size = 'small', isMultiline = false }) => {
@@ -2962,7 +2872,7 @@ const StyledChip$1 = styles.styled(Chip)(({ theme, size, variant, color }) => ({
  * - Intent (Neutral|Error|Warning|Success|Info|Violet|Beta) → intent (default|error|warning|success|info|violet|beta)
  * - TEXT Label → label prop
  */
-function NeoTag({ size = 'small', variant = 'outlined', intent, ...props }) {
+function NeoTag({ size = 'small', variant = 'outlined', intent = 'default', ...props }) {
     return jsxRuntime.jsx(StyledChip$1, { size: size, variant: variant, color: intent, ...props });
 }
 NeoTag.displayName = 'NeoTag';
@@ -2984,7 +2894,7 @@ function NeoDataGridFiltersButton() {
     const filterModel = xDataGridPro.useGridSelector(apiRef, xDataGridPro.gridFilterModelSelector);
     const activeFilters = filterModel.items.filter(item => item.value != null && item.value !== '');
     const filterCount = activeFilters.length;
-    return (jsxRuntime.jsx(xDataGridPro.FilterPanelTrigger, { render: jsxRuntime.jsx(xDataGridPro.ToolbarButton, { render: jsxRuntime.jsxs(NeoButton, { variant: "secondary", size: "small", children: [jsxRuntime.jsx(ListFilter, { size: 16, color: neoDesign.semanticColors.buttons.primary.default }), "Filters", filterCount > 0 && (jsxRuntime.jsx(NeoTag, { size: "medium", variant: "filled", color: "info", label: String(filterCount) }))] }) }) }));
+    return (jsxRuntime.jsx(xDataGridPro.FilterPanelTrigger, { render: jsxRuntime.jsx(xDataGridPro.ToolbarButton, { render: jsxRuntime.jsxs(NeoButton, { variant: "secondary", size: "small", children: [jsxRuntime.jsx(ListFilter, { size: 16, color: neoDesign.semanticColors.buttons.primary.default }), "Filters", filterCount > 0 && (jsxRuntime.jsx(NeoTag, { size: "medium", variant: "filled", intent: "info", label: String(filterCount) }))] }) }) }));
 }
 NeoDataGridFiltersButton.displayName = 'NeoDataGridFiltersButton';
 
@@ -3896,7 +3806,7 @@ const StyledBadge = styles.styled(Badge)(({ ownerState }) => {
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4163-3577
  *
  * Figma Props Mapping:
- * - size (sm|md|lg) → size prop (small|medium|large)
+ * - Size (Small|Medium|Large) → size prop (small|medium|large)
  * - outline (False|True) → variant prop (solid|outline)
  * - Color is configurable via color prop (success|error|warning|info|neutral)
  */
@@ -4346,56 +4256,6 @@ const NeoFooter = ({ variant = 'pagination', showShadow = false, loading = false
 };
 NeoFooter.displayName = 'NeoFooter';
 
-/**
- * Shared color palette for avatar components (GeneralAvatar, NavigationAvatar).
- * Maps color index (1-7) to background color token pairs.
- */
-const avatarColorPalette = {
-    1: { bg: neoDesign.colors.digitalBlue[100] },
-    2: { bg: neoDesign.colors.digitalGreen[100] },
-    3: { bg: neoDesign.colors.gold[100] },
-    4: { bg: neoDesign.colors.red[100] },
-    5: { bg: neoDesign.colors.violet[100] },
-    6: { bg: neoDesign.colors.tealGreen[100] },
-    7: { bg: neoDesign.colors.orange[100] },
-};
-
-const sizeConfig$1 = {
-    small: { width: neoDesign.spacing.spacing_4, height: neoDesign.spacing.spacing_4, fontSize: neoDesign.typography.fontSize.xs },
-    medium: { width: neoDesign.spacing.spacing_5, height: neoDesign.spacing.spacing_5, fontSize: neoDesign.typography.fontSize.sm },
-};
-const StyledAvatar = styles.styled(Avatar, {
-    shouldForwardProp: prop => prop !== 'avatarSize' && prop !== 'colorIndex',
-})(({ theme, avatarSize, colorIndex }) => {
-    const size = sizeConfig$1[avatarSize];
-    const palette = avatarColorPalette[colorIndex];
-    return {
-        boxSizing: 'border-box',
-        width: size.width,
-        height: size.height,
-        fontSize: theme.typography.pxToRem(size.fontSize),
-        fontFamily: neoDesign.typography.fontFamily.body,
-        fontWeight: neoDesign.typography.fontWeight.regular,
-        lineHeight: 1,
-        color: neoDesign.semanticColors.typography.body,
-        backgroundColor: palette ? palette.bg : undefined,
-        border: `1px solid ${neoDesign.semanticColors.border.primary}`,
-        '&:focus-visible': {
-            ...focusRingStyles,
-            borderColor: neoDesign.semanticColors.border.focus,
-        },
-    };
-});
-/**
- * NeoGeneralAvatar - Avatar with image or colored initials display
- *
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=9600-185
- */
-const NeoGeneralAvatar = ({ size = 'medium', colorIndex = 0, children, ...props }) => {
-    return (jsxRuntime.jsx(StyledAvatar, { avatarSize: size, colorIndex: colorIndex, ...props, children: children }));
-};
-NeoGeneralAvatar.displayName = 'NeoGeneralAvatar';
-
 const customProps$1 = ['iconSize'];
 const StyledIconWrapper = styles.styled('div', {
     shouldForwardProp: prop => !customProps$1.includes(prop),
@@ -6166,7 +6026,7 @@ const TabLabelContainer = styles.styled('span')(({ theme }) => ({
  * - Text label → label prop
  */
 const NeoTab = ({ label, count, ...props }) => {
-    const tabLabel = count !== undefined ? (jsxRuntime.jsxs(TabLabelContainer, { children: [label, jsxRuntime.jsx(NeoTag, { label: String(count), size: "large", variant: "outlined", color: "default" })] })) : (label);
+    const tabLabel = count !== undefined ? (jsxRuntime.jsxs(TabLabelContainer, { children: [label, jsxRuntime.jsx(NeoTag, { label: String(count), size: "large", variant: "outlined", intent: "default" })] })) : (label);
     return jsxRuntime.jsx(StyledTab, { label: tabLabel, ...props });
 };
 NeoTab.displayName = 'NeoTab';
@@ -6287,7 +6147,7 @@ const ToastButton = styles.styled(Button, {
 const NeoToast = ({ intent = 'neutral', type = 'outlined', title, message, showClose = false, actions, onClose, ...props }) => {
     const palette = intentColors[intent];
     const closeIconColor = type === 'filled' ? neoDesign.semanticColors.surfaces.white : palette.default;
-    return (jsxRuntime.jsxs(StyledAlert, { ...props, intent: intent, toastType: type, action: showClose ? (jsxRuntime.jsx(IconButton, { size: "small", onClick: onClose, sx: { color: closeIconColor }, children: jsxRuntime.jsx(X, { size: 16 }) })) : undefined, children: [jsxRuntime.jsxs(Stack, { sx: { gap: `${neoDesign.spacing.spacing_1}px`, width: '100%' }, children: [title && jsxRuntime.jsx(ToastTitle, { intent: intent, toastType: type, children: title }), message && jsxRuntime.jsx(ToastMessage, { intent: intent, toastType: type, children: message })] }), actions && jsxRuntime.jsx(ToastActions, { direction: "row", children: actions })] }));
+    return (jsxRuntime.jsxs(StyledAlert, { ...props, intent: intent, toastType: type, action: showClose ? (jsxRuntime.jsx(IconButton, { size: "small", onClick: onClose, sx: { color: closeIconColor }, children: jsxRuntime.jsx(X, { size: 16 }) })) : undefined, children: [jsxRuntime.jsxs(Stack, { sx: { gap: `${neoDesign.spacing.spacing_1}px`, width: '100%' }, children: [title && (jsxRuntime.jsx(ToastTitle, { intent: intent, toastType: type, children: title })), message && (jsxRuntime.jsx(ToastMessage, { intent: intent, toastType: type, children: message }))] }), actions && jsxRuntime.jsx(ToastActions, { direction: "row", children: actions })] }));
 };
 /**
  * Helper component for creating toast action buttons with proper styling
@@ -6805,7 +6665,6 @@ exports.CIRCLE_RADIUS = CIRCLE_RADIUS;
 exports.NeoActivityHeader = NeoActivityHeader;
 exports.NeoActivityIndicatorCell = NeoActivityIndicatorCell;
 exports.NeoAlert = NeoAlert;
-exports.NeoAvatar = NeoAvatar;
 exports.NeoBadge = NeoBadge;
 exports.NeoBanner = NeoBanner;
 exports.NeoBreadcrumbLink = NeoBreadcrumbLink;
@@ -6815,6 +6674,7 @@ exports.NeoButtonTab = NeoButtonTab;
 exports.NeoButtonTabGroup = NeoButtonTabGroup;
 exports.NeoCard = NeoCard;
 exports.NeoCheckbox = NeoCheckbox;
+exports.NeoCheckboxWithText = NeoCheckboxWithText;
 exports.NeoCodeSnippet = NeoCodeSnippet;
 exports.NeoDataGrid = NeoDataGrid;
 exports.NeoDataGridCellContent = NeoDataGridCellContent;
@@ -6880,6 +6740,7 @@ exports.NeoUserAvatarCell = NeoUserAvatarCell;
 exports.SortedAscendingIcon = SortedAscendingIcon;
 exports.SortedDescendingIcon = SortedDescendingIcon;
 exports.UnsortedIcon = UnsortedIcon;
+exports.focusRingStyles = focusRingStyles;
 exports.getDataGridHeaderStyles = getDataGridHeaderStyles;
 exports.neoRowHeights = neoRowHeights;
 exports.version = version;