@astral/ui 4.46.0 → 4.47.1

package/components/ComplianceStatus/ComplianceStatus.d.ts

@@ -1,44 +1,2 @@
-import { type ReactNode } from 'react';
-type ItemStatus = 'success' | 'reject' | 'default' | 'loading';
-type BackgroundColor = 'grey' | 'primary';
-type Variant = 'plain' | 'contained';
-export type ComplianceStatusItem = {
-    /**
-     * Текст для отображения в элементе списка
-     */
-    text: ReactNode;
-    /**
-     * Статус элемента
-     */
-    status: ItemStatus;
-};
-export type ComplianceStatusProps = {
-    /**
-     * Основной заголовок элемента
-     */
-    title?: string | null;
-    /**
-     * Пропс для добавления контента между заголовком и списком
-     */
-    subtitle?: ReactNode;
-    /**
-     * Пропс для добавления контента после списка
-     */
-    children?: ReactNode;
-    /**
-     * Элементы списка
-     */
-    itemsList: ComplianceStatusItem[];
-    /**
-     * Фоновый цвет
-     * @default grey
-     */
-    backgroundColor?: BackgroundColor;
-    /**
-     * Вариант отображения блока статусов
-     * @default contained
-     */
-    variant?: Variant;
-};
+import type { ComplianceStatusProps } from './types';
 export declare const ComplianceStatus: ({ title, itemsList, children, subtitle, backgroundColor, variant, }: ComplianceStatusProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/components/ComplianceStatus/ComplianceStatus.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { OverflowTypography } from '../OverflowTypography';
 import { Typography } from '../Typography';
+import { cva } from '../utils/cva';
+import { complianceStatusClassnames, complianceStatusColorClassnames, complianceStatusVariantClassnames, } from './constants';
 import { EmptyIcon, Inner, Item, RejectIcon, StyledLoader, SuccessIcon, Wrapper, } from './styles';
 const ICON_BY_STATUS = {
     default: _jsx(EmptyIcon, {}),
@@ -8,8 +10,21 @@ const ICON_BY_STATUS = {
     reject: _jsx(RejectIcon, {}),
     loading: _jsx(StyledLoader, {}),
 };
+const complianceStatus = cva(complianceStatusClassnames.root, {
+    variants: {
+        backgroundColor: {
+            grey: complianceStatusColorClassnames.grey,
+            primary: complianceStatusColorClassnames.primary,
+        },
+        variant: {
+            contained: complianceStatusVariantClassnames.contained,
+            outlined: complianceStatusVariantClassnames.outlined,
+            plain: complianceStatusVariantClassnames.plain,
+        },
+    },
+});
 export const ComplianceStatus = ({ title, itemsList, children, subtitle, backgroundColor = 'grey', variant = 'contained', }) => {
-    return (_jsxs(Wrapper, { "$background": backgroundColor, "$variant": variant, children: [title && (_jsx(OverflowTypography, { variant: "h6", component: "h4", children: title })), subtitle, _jsx(Inner, { children: itemsList.map(({ text, status }, index) => (
+    return (_jsxs(Wrapper, { className: complianceStatus({ backgroundColor, variant }), children: [title && (_jsx(OverflowTypography, { className: complianceStatusClassnames.title, variant: "h6", component: "h4", children: title })), subtitle, _jsx(Inner, { className: complianceStatusClassnames.list, children: itemsList.map(({ text, status }, index) => (
                 // biome-ignore lint/suspicious/noArrayIndexKey: Элементы статичны
-                _jsxs(Item, { children: [ICON_BY_STATUS[status], _jsx(Typography, { children: text })] }, index))) }), children] }));
+                _jsxs(Item, { className: complianceStatusClassnames.item, children: [ICON_BY_STATUS[status], _jsx(Typography, { children: text })] }, index))) }), children] }));
 };

package/components/ComplianceStatus/constants.d.ts

@@ -0,0 +1,14 @@
+import type { BackgroundColor, Variant } from './types';
+export declare const complianceStatusColorClassnames: Record<BackgroundColor, string>;
+export declare const complianceStatusVariantClassnames: Record<Variant, string>;
+export declare const complianceStatusClassnames: {
+    contained: string;
+    outlined: string;
+    plain: string;
+    primary: string;
+    grey: string;
+    root: string;
+    title: string;
+    list: string;
+    item: string;
+};

package/components/ComplianceStatus/constants.js

@@ -0,0 +1,18 @@
+import { createUIKitClassname } from '../utils/createUIKitClassname';
+export const complianceStatusColorClassnames = {
+    grey: createUIKitClassname('compliance-status_color-grey'),
+    primary: createUIKitClassname('compliance-status_color-primary'),
+};
+export const complianceStatusVariantClassnames = {
+    plain: createUIKitClassname('compliance-status_variant-plain'),
+    contained: createUIKitClassname('compliance-status_variant-contained'),
+    outlined: createUIKitClassname('compliance-status_variant-outlined'),
+};
+export const complianceStatusClassnames = {
+    root: createUIKitClassname('compliance-status'),
+    title: createUIKitClassname('compliance-status__title'),
+    list: createUIKitClassname('compliance-status__list'),
+    item: createUIKitClassname('compliance-status__item'),
+    ...complianceStatusColorClassnames,
+    ...complianceStatusVariantClassnames,
+};

package/components/ComplianceStatus/index.d.ts

@@ -1 +1,2 @@
-export { ComplianceStatus, type ComplianceStatusItem, type ComplianceStatusProps, } from './ComplianceStatus';
+export { ComplianceStatus } from './ComplianceStatus';
+export type { ComplianceStatusItem, ComplianceStatusProps } from './types';

package/components/ComplianceStatus/index.js

@@ -1 +1 @@
-export { ComplianceStatus, } from './ComplianceStatus';
+export { ComplianceStatus } from './ComplianceStatus';

package/components/ComplianceStatus/public.d.ts

@@ -1 +1,2 @@
-export { ComplianceStatus, type ComplianceStatusItem, type ComplianceStatusProps, } from './ComplianceStatus';
+export { ComplianceStatus } from './ComplianceStatus';
+export type { ComplianceStatusItem, ComplianceStatusProps } from './types';

package/components/ComplianceStatus/public.js

@@ -1 +1 @@
-export { ComplianceStatus, } from './ComplianceStatus';
+export { ComplianceStatus } from './ComplianceStatus';

package/components/ComplianceStatus/styles.d.ts

@@ -1,11 +1,7 @@
 /// <reference types="react" />
-type Variant = 'plain' | 'contained';
 export declare const Wrapper: import("../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-} & {
-    $background: 'grey' | 'primary';
-    $variant: Variant;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
 export declare const Inner: import("../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
@@ -51,4 +47,3 @@ export declare const SuccessIcon: import("../styled").StyledComponent<{
 export declare const StyledLoader: import("../styled").StyledComponent<import("../Loader").LoaderProps & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
-export {};

package/components/ComplianceStatus/styles.js

@@ -4,6 +4,7 @@ import { SuccessFillSm } from '../../icons/SuccessFillSm';
 import { Loader } from '../Loader';
 import { keyframes, styled } from '../styled';
 import { listContainer } from '../styled/mixins';
+import { complianceStatusClassnames } from './constants';
 const iconAppearAnimation = keyframes `
   from {
     transform: scale(0);
@@ -14,14 +15,31 @@ const iconAppearAnimation = keyframes `
     opacity: 1;
   }
 `;
-export const Wrapper = styled('article') `
+export const Wrapper = styled.article `
   display: grid;
   grid-gap: ${({ theme }) => theme.spacing(2)};
 
-  padding: ${({ theme, $variant }) => $variant === 'contained' ? theme.spacing(3) : 0};
+  background-color: inherit;
 
-  background-color: ${({ theme, $background, $variant }) => $variant === 'contained' ? theme.palette[$background][100] : 'inherit'};
   border-radius: ${({ theme }) => theme.shape.medium};
+
+  &.${complianceStatusClassnames.contained} {
+    padding: ${({ theme }) => theme.spacing(3)};
+
+    &.${complianceStatusClassnames.primary} {
+      background-color: ${({ theme }) => theme.palette.primary[100]};
+    }
+
+    &.${complianceStatusClassnames.grey} {
+      background-color: ${({ theme }) => theme.palette.grey[100]};
+    }
+  }
+
+  &.${complianceStatusClassnames.outlined} {
+    padding: ${({ theme }) => theme.spacing(3)};
+
+    border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  }
 `;
 export const Inner = styled('ul') `
   display: grid;

package/components/ComplianceStatus/types.d.ts

@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react';
+export type ItemStatus = 'success' | 'reject' | 'default' | 'loading';
+export type BackgroundColor = 'grey' | 'primary';
+export type Variant = 'plain' | 'contained' | 'outlined';
+export type ComplianceStatusItem = {
+    /**
+     * Текст для отображения в элементе списка
+     */
+    text: ReactNode;
+    /**
+     * Статус элемента
+     */
+    status: ItemStatus;
+};
+export type ComplianceStatusProps = {
+    /**
+     * Основной заголовок элемента
+     */
+    title?: string | null;
+    /**
+     * Пропс для добавления контента между заголовком и списком
+     */
+    subtitle?: ReactNode;
+    /**
+     * Пропс для добавления контента после списка
+     */
+    children?: ReactNode;
+    /**
+     * Элементы списка
+     */
+    itemsList: ComplianceStatusItem[];
+    /**
+     * Фоновый цвет
+     * @default grey
+     */
+    backgroundColor?: BackgroundColor;
+    /**
+     * Вариант отображения блока статусов
+     * @default contained
+     */
+    variant?: Variant;
+};

package/components/ComplianceStatus/types.js

@@ -0,0 +1 @@
+export {};

package/components/DashboardSidebar/constants.d.ts

@@ -2,3 +2,9 @@ export declare const dashboardSidebarClassnames: {
     root: string;
     hasMenuOrganization: string;
 };
+export declare const LABEL_WIDTH: {
+    default: string;
+    counter: string;
+    group: string;
+    groupCounter: string;
+};

package/components/DashboardSidebar/constants.js

@@ -3,3 +3,9 @@ export const dashboardSidebarClassnames = {
     root: createUIKitClassname('dashboard-layout-sidebar'),
     hasMenuOrganization: createUIKitClassname('dashboard-layout-sidebar_has-menu-organization'),
 };
+export const LABEL_WIDTH = {
+    default: '170px',
+    counter: '130px',
+    group: '140px',
+    groupCounter: '100px',
+};

package/components/DashboardSidebar/styles.js

@@ -2,10 +2,11 @@ import { FOOTER_DESKTOP_HEIGHT, FOOTER_LAPTOP_HEIGHT } from '../constants';
 import { HEADER_HEIGHT_MOBILE } from '../DashboardLayout/constants';
 import { menuOrganizationClassnames } from '../MenuOrganization/constants';
 import { MOBILE_BUTTON_HEIGHT } from '../MenuOrganization/OrganizationButton';
+import { navMenuItemButtonClassnames } from '../NavMenu/Item';
 import { Paper } from '../Paper';
 import { pinButtonClassnames } from '../PinButton';
 import { styled } from '../styled';
-import { dashboardSidebarClassnames } from './constants';
+import { dashboardSidebarClassnames, LABEL_WIDTH } from './constants';
 export const Wrapper = styled('div', {
     shouldForwardProp: (prop) => !['$isPinned', '$alertHeight'].includes(prop),
 }) `
@@ -59,7 +60,7 @@ export const SidebarRoot = styled('aside', {
   width: ${({ $collapsedIn, $isPinned }) => $isPinned || (!$isPinned && $collapsedIn) ? '242px' : '58px'};
   height: 100%;
 
-  background-color: ${({ theme }) => theme.palette.background.default};;
+  background-color: ${({ theme }) => theme.palette.background.default};
   border-radius: ${({ theme }) => theme.shape.medium};
   box-shadow: ${({ theme, $isPinned, $collapsedIn }) => ($isPinned || !$collapsedIn ? 'unset' : theme.elevation[300])};
   
@@ -115,6 +116,24 @@ export const SidebarContent = styled.div `
     });
 }};
 
+  & .${navMenuItemButtonClassnames.label} {
+    width: ${LABEL_WIDTH.default};
+
+    &.${navMenuItemButtonClassnames.labelHasCounter} {
+      width: ${LABEL_WIDTH.counter};
+    }
+  }
+
+  & .${navMenuItemButtonClassnames.hasGroup} {
+    & .${navMenuItemButtonClassnames.label} {
+      width: ${LABEL_WIDTH.group};
+
+      &.${navMenuItemButtonClassnames.labelHasCounter} {
+        width: ${LABEL_WIDTH.groupCounter};
+      }
+    }
+  }
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     width: inherit;
     padding: ${({ theme, $hasHeader }) => theme.spacing($hasHeader ? 0 : 2, 0, 0, 0)};
@@ -134,7 +153,7 @@ export const Footer = styled.footer `
   border-bottom-left-radius: ${({ theme }) => theme.shape.medium};
   
   .${pinButtonClassnames.root} {
-    padding-left: ${({ theme }) => theme.microSpacing(9)};;
+    padding-left: ${({ theme }) => theme.microSpacing(9)};
   }
 
   ${({ theme }) => theme.breakpoints.down('sm')} {

package/components/NavMenu/Item/ItemButton/ItemButton.js

@@ -2,11 +2,27 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { forwardRef, } from 'react';
 import { Collapse } from '../../../Collapse';
 import { useViewportType } from '../../../useViewportType';
+import { cva } from '../../../utils/cva';
+import { navMenuItemButtonClassnames } from './constants';
 import { EndAdornmentWrapper, NavMenuItemButtonChevron, NavMenuItemButtonIcon, NavMenuItemButtonText, StyledListItemButton, StyledPageDotOutlineMd, } from './styles';
+const itemButton = cva(navMenuItemButtonClassnames.root, {
+    variants: {
+        hasGroup: {
+            true: navMenuItemButtonClassnames.hasGroup,
+        },
+    },
+});
+const itemButtonLabel = cva(navMenuItemButtonClassnames.label, {
+    variants: {
+        hasCounter: {
+            true: navMenuItemButtonClassnames.labelHasCounter,
+        },
+    },
+});
 export const ItemButton = forwardRef((props, ref) => {
     const { collapsedIn, opened, text, icon, component = 'a', counter, isNested = false, isGroupTitleItem = false, selected, ...restProps } = props;
     const { isMobile } = useViewportType();
     const Counter = counter?.component;
     const { max, count } = counter || {};
-    return (_jsxs(StyledListItemButton, { "$isGroupTitleItem": isGroupTitleItem, ref: ref, component: component, withoutContainer: true, selected: selected, "aria-selected": selected, ...restProps, children: [isMobile ? (_jsxs(_Fragment, { children: [isNested && _jsx(StyledPageDotOutlineMd, {}), _jsx(NavMenuItemButtonText, { "$isGroupTitleItem": isGroupTitleItem, children: text, rowsCount: 2 })] })) : (_jsxs(_Fragment, { children: [_jsx(NavMenuItemButtonIcon, { children: Counter && Number(count) ? (_jsx(Counter.Badge, { invisible: collapsedIn, children: icon })) : (icon) }), _jsx(Collapse, { orientation: "horizontal", in: collapsedIn, children: _jsx(NavMenuItemButtonText, { "$isGroupTitleItem": isGroupTitleItem, "$isCounter": Boolean(counter), tooltipProps: { placement: 'right' }, children: text, rowsCount: 2 }) })] })), _jsxs(EndAdornmentWrapper, { "$collapsedIn": collapsedIn, children: [Counter && _jsx(Counter, { max: max, count: count }), isGroupTitleItem && (_jsx(NavMenuItemButtonChevron, { "$collapsedIn": collapsedIn, "$opened": opened }))] })] }));
+    return (_jsxs(StyledListItemButton, { className: itemButton({ hasGroup: isGroupTitleItem }), ref: ref, component: component, withoutContainer: true, selected: selected, "aria-selected": selected, ...restProps, children: [isMobile ? (_jsxs(_Fragment, { children: [isNested && _jsx(StyledPageDotOutlineMd, {}), _jsx(NavMenuItemButtonText, { children: text, rowsCount: 2 })] })) : (_jsxs(_Fragment, { children: [_jsx(NavMenuItemButtonIcon, { children: Counter && Number(count) ? (_jsx(Counter.Badge, { invisible: collapsedIn, children: icon })) : (icon) }), _jsx(Collapse, { orientation: "horizontal", in: collapsedIn, children: _jsx(NavMenuItemButtonText, { tooltipProps: { placement: 'right' }, className: itemButtonLabel({ hasCounter: Boolean(counter) }), children: text, rowsCount: 2 }) })] })), _jsxs(EndAdornmentWrapper, { "$collapsedIn": collapsedIn, children: [Counter && _jsx(Counter, { max: max, count: count }), isGroupTitleItem && (_jsx(NavMenuItemButtonChevron, { "$collapsedIn": collapsedIn, "$opened": opened }))] })] }));
 });

package/components/NavMenu/Item/ItemButton/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const navMenuItemButtonClassnames: {
+    root: string;
+    hasGroup: string;
+    label: string;
+    labelHasCounter: string;
+};

package/components/NavMenu/Item/ItemButton/constants.js

@@ -0,0 +1,7 @@
+import { createUIKitClassname } from '../../../utils/createUIKitClassname';
+export const navMenuItemButtonClassnames = {
+    root: createUIKitClassname('nav-menu-item-button'),
+    hasGroup: createUIKitClassname('nav-menu-item-button_has-group'),
+    label: createUIKitClassname('nav-menu-item-button__label'),
+    labelHasCounter: createUIKitClassname('nav-menu-item-button__label_has-counter'),
+};

package/components/NavMenu/Item/ItemButton/index.d.ts

@@ -1 +1,2 @@
 export * from './ItemButton';
+export * from './constants';

package/components/NavMenu/Item/ItemButton/index.js

@@ -1 +1,2 @@
 export * from './ItemButton';
+export * from './constants';

package/components/NavMenu/Item/ItemButton/styles.d.ts

@@ -2,8 +2,6 @@
 /// <reference types="react" />
 export declare const StyledListItemButton: import("../../../styled").StyledComponent<Omit<import("../../../ListItemButton").ListItemButtonProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
-} & {
-    $isGroupTitleItem: boolean;
 }, {}, {}>;
 export declare const NavMenuItemButtonIcon: import("../../../styled").StyledComponent<Omit<{
     classes?: Partial<import("@mui/material").ListItemIconClasses> | undefined;
@@ -637,9 +635,6 @@ export declare const NavMenuItemButtonText: import("../../../styled").StyledComp
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement> & {
     theme?: import("@emotion/react").Theme | undefined;
-} & {
-    $isGroupTitleItem: boolean;
-    $isCounter?: boolean | undefined;
 }, {}, {}>;
 export declare const NavMenuItemButtonChevron: import("../../../styled").StyledComponent<{
     children?: import("react").ReactNode;

package/components/NavMenu/Item/ItemButton/styles.js

@@ -1,3 +1,4 @@
+import { listItemButtonClasses } from '@mui/material/ListItemButton';
 import { ChevronDOutlineMd } from '../../../../icons/ChevronDOutlineMd';
 import { PageDotOutlineMd } from '../../../../icons/PageDotOutlineMd';
 import { ListItemButton } from '../../../ListItemButton';
@@ -6,15 +7,8 @@ import { OverflowTypography } from '../../../OverflowTypography';
 import { svgIconClassnames } from '../../../SvgIcon';
 import { styled } from '../../../styled';
 import { UpDownTransition } from '../../../styled/mixins';
-const getItemWidth = (isGroupTitleItem, isCounter) => {
-    if (!isCounter) {
-        return isGroupTitleItem ? '140px' : '170px';
-    }
-    return isGroupTitleItem ? '100px' : '130px';
-};
-export const StyledListItemButton = styled(ListItemButton, {
-    shouldForwardProp: (prop) => !['$isGroupTitleItem'].includes(prop),
-}) `
+import { navMenuItemButtonClassnames } from './constants';
+export const StyledListItemButton = styled(ListItemButton) `
   overflow: hidden;
 
   box-sizing: border-box;
@@ -23,10 +17,10 @@ export const StyledListItemButton = styled(ListItemButton, {
   
   border-radius: ${({ theme }) => theme.shape.small};
   
-  &.Mui-selected {
+  &.${listItemButtonClasses.selected} {
     color: ${({ theme }) => theme.palette.grey[900]};
 
-    background-color: ${({ theme, $isGroupTitleItem }) => $isGroupTitleItem ? 'inherit' : theme.palette.primary[100]};
+    background-color: ${({ theme }) => theme.palette.primary[100]};
 
     &::before {
       content: '';
@@ -40,7 +34,15 @@ export const StyledListItemButton = styled(ListItemButton, {
     }
     
     &:hover {
-      background-color: ${({ theme, $isGroupTitleItem }) => $isGroupTitleItem ? 'inherit' : theme.palette.primary[100]};
+      background-color: ${({ theme }) => theme.palette.primary[100]};
+    }
+
+    &.${navMenuItemButtonClassnames.hasGroup} {
+      background-color: inherit;
+
+      &:hover {
+        background-color: inherit;
+      }
     }
   }
 
@@ -86,10 +88,7 @@ export const NavMenuItemButtonIcon = styled(ListItemIcon) `
     height: 20px;
   }
 `;
-export const NavMenuItemButtonText = styled(OverflowTypography, {
-    shouldForwardProp: (prop) => !['$isGroupTitleItem', '$isCounter'].includes(prop),
-}) `
-  width: ${({ $isGroupTitleItem, $isCounter }) => getItemWidth($isGroupTitleItem, $isCounter)};
+export const NavMenuItemButtonText = styled(OverflowTypography) `
   margin-left: ${({ theme }) => theme.spacing(3)};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {

package/components/NavMenu/Item/index.d.ts

@@ -1,2 +1,3 @@
 export * from './Item';
 export * from './types';
+export { navMenuItemButtonClassnames } from './ItemButton';

package/components/NavMenu/Item/index.js

@@ -1,2 +1,3 @@
 export * from './Item';
 export * from './types';
+export { navMenuItemButtonClassnames } from './ItemButton';

package/components/utils/cva/cva.d.ts

@@ -0,0 +1 @@
+export { cva } from 'class-variance-authority';

package/components/utils/cva/cva.js

@@ -0,0 +1 @@
+export { cva } from 'class-variance-authority';

package/components/utils/cva/index.d.ts

@@ -0,0 +1 @@
+export * from './cva';

package/components/utils/cva/index.js

@@ -0,0 +1 @@
+export * from './cva';

package/components/utils/cva/public.d.ts

@@ -0,0 +1 @@
+export * from './cva';

package/components/utils/cva/public.js

@@ -0,0 +1 @@
+export * from './cva';

package/node/components/ComplianceStatus/ComplianceStatus.d.ts

@@ -1,44 +1,2 @@
-import { type ReactNode } from 'react';
-type ItemStatus = 'success' | 'reject' | 'default' | 'loading';
-type BackgroundColor = 'grey' | 'primary';
-type Variant = 'plain' | 'contained';
-export type ComplianceStatusItem = {
-    /**
-     * Текст для отображения в элементе списка
-     */
-    text: ReactNode;
-    /**
-     * Статус элемента
-     */
-    status: ItemStatus;
-};
-export type ComplianceStatusProps = {
-    /**
-     * Основной заголовок элемента
-     */
-    title?: string | null;
-    /**
-     * Пропс для добавления контента между заголовком и списком
-     */
-    subtitle?: ReactNode;
-    /**
-     * Пропс для добавления контента после списка
-     */
-    children?: ReactNode;
-    /**
-     * Элементы списка
-     */
-    itemsList: ComplianceStatusItem[];
-    /**
-     * Фоновый цвет
-     * @default grey
-     */
-    backgroundColor?: BackgroundColor;
-    /**
-     * Вариант отображения блока статусов
-     * @default contained
-     */
-    variant?: Variant;
-};
+import type { ComplianceStatusProps } from './types';
 export declare const ComplianceStatus: ({ title, itemsList, children, subtitle, backgroundColor, variant, }: ComplianceStatusProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/node/components/ComplianceStatus/ComplianceStatus.js

@@ -4,6 +4,8 @@ exports.ComplianceStatus = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const OverflowTypography_1 = require("../OverflowTypography");
 const Typography_1 = require("../Typography");
+const cva_1 = require("../utils/cva");
+const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 const ICON_BY_STATUS = {
     default: (0, jsx_runtime_1.jsx)(styles_1.EmptyIcon, {}),
@@ -11,9 +13,22 @@ const ICON_BY_STATUS = {
     reject: (0, jsx_runtime_1.jsx)(styles_1.RejectIcon, {}),
     loading: (0, jsx_runtime_1.jsx)(styles_1.StyledLoader, {}),
 };
+const complianceStatus = (0, cva_1.cva)(constants_1.complianceStatusClassnames.root, {
+    variants: {
+        backgroundColor: {
+            grey: constants_1.complianceStatusColorClassnames.grey,
+            primary: constants_1.complianceStatusColorClassnames.primary,
+        },
+        variant: {
+            contained: constants_1.complianceStatusVariantClassnames.contained,
+            outlined: constants_1.complianceStatusVariantClassnames.outlined,
+            plain: constants_1.complianceStatusVariantClassnames.plain,
+        },
+    },
+});
 const ComplianceStatus = ({ title, itemsList, children, subtitle, backgroundColor = 'grey', variant = 'contained', }) => {
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { "$background": backgroundColor, "$variant": variant, children: [title && ((0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { variant: "h6", component: "h4", children: title })), subtitle, (0, jsx_runtime_1.jsx)(styles_1.Inner, { children: itemsList.map(({ text, status }, index) => (
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: complianceStatus({ backgroundColor, variant }), children: [title && ((0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { className: constants_1.complianceStatusClassnames.title, variant: "h6", component: "h4", children: title })), subtitle, (0, jsx_runtime_1.jsx)(styles_1.Inner, { className: constants_1.complianceStatusClassnames.list, children: itemsList.map(({ text, status }, index) => (
                 // biome-ignore lint/suspicious/noArrayIndexKey: Элементы статичны
-                (0, jsx_runtime_1.jsxs)(styles_1.Item, { children: [ICON_BY_STATUS[status], (0, jsx_runtime_1.jsx)(Typography_1.Typography, { children: text })] }, index))) }), children] }));
+                (0, jsx_runtime_1.jsxs)(styles_1.Item, { className: constants_1.complianceStatusClassnames.item, children: [ICON_BY_STATUS[status], (0, jsx_runtime_1.jsx)(Typography_1.Typography, { children: text })] }, index))) }), children] }));
 };
 exports.ComplianceStatus = ComplianceStatus;

package/node/components/ComplianceStatus/constants.d.ts

@@ -0,0 +1,14 @@
+import type { BackgroundColor, Variant } from './types';
+export declare const complianceStatusColorClassnames: Record<BackgroundColor, string>;
+export declare const complianceStatusVariantClassnames: Record<Variant, string>;
+export declare const complianceStatusClassnames: {
+    contained: string;
+    outlined: string;
+    plain: string;
+    primary: string;
+    grey: string;
+    root: string;
+    title: string;
+    list: string;
+    item: string;
+};

package/node/components/ComplianceStatus/constants.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.complianceStatusClassnames = exports.complianceStatusVariantClassnames = exports.complianceStatusColorClassnames = void 0;
+const createUIKitClassname_1 = require("../utils/createUIKitClassname");
+exports.complianceStatusColorClassnames = {
+    grey: (0, createUIKitClassname_1.createUIKitClassname)('compliance-status_color-grey'),
+    primary: (0, createUIKitClassname_1.createUIKitClassname)('compliance-status_color-primary'),
+};
+exports.complianceStatusVariantClassnames = {
+    plain: (0, createUIKitClassname_1.createUIKitClassname)('compliance-status_variant-plain'),
+    contained: (0, createUIKitClassname_1.createUIKitClassname)('compliance-status_variant-contained'),
+    outlined: (0, createUIKitClassname_1.createUIKitClassname)('compliance-status_variant-outlined'),
+};
+exports.complianceStatusClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('compliance-status'),
+    title: (0, createUIKitClassname_1.createUIKitClassname)('compliance-status__title'),
+    list: (0, createUIKitClassname_1.createUIKitClassname)('compliance-status__list'),
+    item: (0, createUIKitClassname_1.createUIKitClassname)('compliance-status__item'),
+    ...exports.complianceStatusColorClassnames,
+    ...exports.complianceStatusVariantClassnames,
+};

package/node/components/ComplianceStatus/index.d.ts

@@ -1 +1,2 @@
-export { ComplianceStatus, type ComplianceStatusItem, type ComplianceStatusProps, } from './ComplianceStatus';
+export { ComplianceStatus } from './ComplianceStatus';
+export type { ComplianceStatusItem, ComplianceStatusProps } from './types';

package/node/components/ComplianceStatus/public.d.ts

@@ -1 +1,2 @@
-export { ComplianceStatus, type ComplianceStatusItem, type ComplianceStatusProps, } from './ComplianceStatus';
+export { ComplianceStatus } from './ComplianceStatus';
+export type { ComplianceStatusItem, ComplianceStatusProps } from './types';

package/node/components/ComplianceStatus/styles.d.ts

@@ -1,11 +1,7 @@
 /// <reference types="react" />
-type Variant = 'plain' | 'contained';
 export declare const Wrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-} & {
-    $background: 'grey' | 'primary';
-    $variant: Variant;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
 export declare const Inner: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
@@ -51,4 +47,3 @@ export declare const SuccessIcon: import("@emotion/styled/dist/declarations/src/
 export declare const StyledLoader: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../Loader").LoaderProps & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
-export {};

package/node/components/ComplianceStatus/styles.js

@@ -7,6 +7,7 @@ const SuccessFillSm_1 = require("../../icons/SuccessFillSm");
 const Loader_1 = require("../Loader");
 const styled_1 = require("../styled");
 const mixins_1 = require("../styled/mixins");
+const constants_1 = require("./constants");
 const iconAppearAnimation = (0, styled_1.keyframes) `
   from {
     transform: scale(0);
@@ -17,14 +18,31 @@ const iconAppearAnimation = (0, styled_1.keyframes) `
     opacity: 1;
   }
 `;
-exports.Wrapper = (0, styled_1.styled)('article') `
+exports.Wrapper = styled_1.styled.article `
   display: grid;
   grid-gap: ${({ theme }) => theme.spacing(2)};
 
-  padding: ${({ theme, $variant }) => $variant === 'contained' ? theme.spacing(3) : 0};
+  background-color: inherit;
 
-  background-color: ${({ theme, $background, $variant }) => $variant === 'contained' ? theme.palette[$background][100] : 'inherit'};
   border-radius: ${({ theme }) => theme.shape.medium};
+
+  &.${constants_1.complianceStatusClassnames.contained} {
+    padding: ${({ theme }) => theme.spacing(3)};
+
+    &.${constants_1.complianceStatusClassnames.primary} {
+      background-color: ${({ theme }) => theme.palette.primary[100]};
+    }
+
+    &.${constants_1.complianceStatusClassnames.grey} {
+      background-color: ${({ theme }) => theme.palette.grey[100]};
+    }
+  }
+
+  &.${constants_1.complianceStatusClassnames.outlined} {
+    padding: ${({ theme }) => theme.spacing(3)};
+
+    border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  }
 `;
 exports.Inner = (0, styled_1.styled)('ul') `
   display: grid;

package/node/components/ComplianceStatus/types.d.ts

@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react';
+export type ItemStatus = 'success' | 'reject' | 'default' | 'loading';
+export type BackgroundColor = 'grey' | 'primary';
+export type Variant = 'plain' | 'contained' | 'outlined';
+export type ComplianceStatusItem = {
+    /**
+     * Текст для отображения в элементе списка
+     */
+    text: ReactNode;
+    /**
+     * Статус элемента
+     */
+    status: ItemStatus;
+};
+export type ComplianceStatusProps = {
+    /**
+     * Основной заголовок элемента
+     */
+    title?: string | null;
+    /**
+     * Пропс для добавления контента между заголовком и списком
+     */
+    subtitle?: ReactNode;
+    /**
+     * Пропс для добавления контента после списка
+     */
+    children?: ReactNode;
+    /**
+     * Элементы списка
+     */
+    itemsList: ComplianceStatusItem[];
+    /**
+     * Фоновый цвет
+     * @default grey
+     */
+    backgroundColor?: BackgroundColor;
+    /**
+     * Вариант отображения блока статусов
+     * @default contained
+     */
+    variant?: Variant;
+};

package/node/components/ComplianceStatus/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/node/components/DashboardSidebar/constants.d.ts

@@ -2,3 +2,9 @@ export declare const dashboardSidebarClassnames: {
     root: string;
     hasMenuOrganization: string;
 };
+export declare const LABEL_WIDTH: {
+    default: string;
+    counter: string;
+    group: string;
+    groupCounter: string;
+};

package/node/components/DashboardSidebar/constants.js

@@ -1,8 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dashboardSidebarClassnames = void 0;
+exports.LABEL_WIDTH = exports.dashboardSidebarClassnames = void 0;
 const createUIKitClassname_1 = require("../utils/createUIKitClassname");
 exports.dashboardSidebarClassnames = {
     root: (0, createUIKitClassname_1.createUIKitClassname)('dashboard-layout-sidebar'),
     hasMenuOrganization: (0, createUIKitClassname_1.createUIKitClassname)('dashboard-layout-sidebar_has-menu-organization'),
 };
+exports.LABEL_WIDTH = {
+    default: '170px',
+    counter: '130px',
+    group: '140px',
+    groupCounter: '100px',
+};

package/node/components/DashboardSidebar/styles.js

@@ -5,6 +5,7 @@ const constants_1 = require("../constants");
 const constants_2 = require("../DashboardLayout/constants");
 const constants_3 = require("../MenuOrganization/constants");
 const OrganizationButton_1 = require("../MenuOrganization/OrganizationButton");
+const Item_1 = require("../NavMenu/Item");
 const Paper_1 = require("../Paper");
 const PinButton_1 = require("../PinButton");
 const styled_1 = require("../styled");
@@ -62,7 +63,7 @@ exports.SidebarRoot = (0, styled_1.styled)('aside', {
   width: ${({ $collapsedIn, $isPinned }) => $isPinned || (!$isPinned && $collapsedIn) ? '242px' : '58px'};
   height: 100%;
 
-  background-color: ${({ theme }) => theme.palette.background.default};;
+  background-color: ${({ theme }) => theme.palette.background.default};
   border-radius: ${({ theme }) => theme.shape.medium};
   box-shadow: ${({ theme, $isPinned, $collapsedIn }) => ($isPinned || !$collapsedIn ? 'unset' : theme.elevation[300])};
   
@@ -118,6 +119,24 @@ exports.SidebarContent = styled_1.styled.div `
     });
 }};
 
+  & .${Item_1.navMenuItemButtonClassnames.label} {
+    width: ${constants_4.LABEL_WIDTH.default};
+
+    &.${Item_1.navMenuItemButtonClassnames.labelHasCounter} {
+      width: ${constants_4.LABEL_WIDTH.counter};
+    }
+  }
+
+  & .${Item_1.navMenuItemButtonClassnames.hasGroup} {
+    & .${Item_1.navMenuItemButtonClassnames.label} {
+      width: ${constants_4.LABEL_WIDTH.group};
+
+      &.${Item_1.navMenuItemButtonClassnames.labelHasCounter} {
+        width: ${constants_4.LABEL_WIDTH.groupCounter};
+      }
+    }
+  }
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     width: inherit;
     padding: ${({ theme, $hasHeader }) => theme.spacing($hasHeader ? 0 : 2, 0, 0, 0)};
@@ -137,7 +156,7 @@ exports.Footer = styled_1.styled.footer `
   border-bottom-left-radius: ${({ theme }) => theme.shape.medium};
   
   .${PinButton_1.pinButtonClassnames.root} {
-    padding-left: ${({ theme }) => theme.microSpacing(9)};;
+    padding-left: ${({ theme }) => theme.microSpacing(9)};
   }
 
   ${({ theme }) => theme.breakpoints.down('sm')} {

package/node/components/NavMenu/Item/ItemButton/ItemButton.js

@@ -5,11 +5,27 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Collapse_1 = require("../../../Collapse");
 const useViewportType_1 = require("../../../useViewportType");
+const cva_1 = require("../../../utils/cva");
+const constants_1 = require("./constants");
 const styles_1 = require("./styles");
+const itemButton = (0, cva_1.cva)(constants_1.navMenuItemButtonClassnames.root, {
+    variants: {
+        hasGroup: {
+            true: constants_1.navMenuItemButtonClassnames.hasGroup,
+        },
+    },
+});
+const itemButtonLabel = (0, cva_1.cva)(constants_1.navMenuItemButtonClassnames.label, {
+    variants: {
+        hasCounter: {
+            true: constants_1.navMenuItemButtonClassnames.labelHasCounter,
+        },
+    },
+});
 exports.ItemButton = (0, react_1.forwardRef)((props, ref) => {
     const { collapsedIn, opened, text, icon, component = 'a', counter, isNested = false, isGroupTitleItem = false, selected, ...restProps } = props;
     const { isMobile } = (0, useViewportType_1.useViewportType)();
     const Counter = counter?.component;
     const { max, count } = counter || {};
-    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledListItemButton, { "$isGroupTitleItem": isGroupTitleItem, ref: ref, component: component, withoutContainer: true, selected: selected, "aria-selected": selected, ...restProps, children: [isMobile ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isNested && (0, jsx_runtime_1.jsx)(styles_1.StyledPageDotOutlineMd, {}), (0, jsx_runtime_1.jsx)(styles_1.NavMenuItemButtonText, { "$isGroupTitleItem": isGroupTitleItem, children: text, rowsCount: 2 })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(styles_1.NavMenuItemButtonIcon, { children: Counter && Number(count) ? ((0, jsx_runtime_1.jsx)(Counter.Badge, { invisible: collapsedIn, children: icon })) : (icon) }), (0, jsx_runtime_1.jsx)(Collapse_1.Collapse, { orientation: "horizontal", in: collapsedIn, children: (0, jsx_runtime_1.jsx)(styles_1.NavMenuItemButtonText, { "$isGroupTitleItem": isGroupTitleItem, "$isCounter": Boolean(counter), tooltipProps: { placement: 'right' }, children: text, rowsCount: 2 }) })] })), (0, jsx_runtime_1.jsxs)(styles_1.EndAdornmentWrapper, { "$collapsedIn": collapsedIn, children: [Counter && (0, jsx_runtime_1.jsx)(Counter, { max: max, count: count }), isGroupTitleItem && ((0, jsx_runtime_1.jsx)(styles_1.NavMenuItemButtonChevron, { "$collapsedIn": collapsedIn, "$opened": opened }))] })] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledListItemButton, { className: itemButton({ hasGroup: isGroupTitleItem }), ref: ref, component: component, withoutContainer: true, selected: selected, "aria-selected": selected, ...restProps, children: [isMobile ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isNested && (0, jsx_runtime_1.jsx)(styles_1.StyledPageDotOutlineMd, {}), (0, jsx_runtime_1.jsx)(styles_1.NavMenuItemButtonText, { children: text, rowsCount: 2 })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(styles_1.NavMenuItemButtonIcon, { children: Counter && Number(count) ? ((0, jsx_runtime_1.jsx)(Counter.Badge, { invisible: collapsedIn, children: icon })) : (icon) }), (0, jsx_runtime_1.jsx)(Collapse_1.Collapse, { orientation: "horizontal", in: collapsedIn, children: (0, jsx_runtime_1.jsx)(styles_1.NavMenuItemButtonText, { tooltipProps: { placement: 'right' }, className: itemButtonLabel({ hasCounter: Boolean(counter) }), children: text, rowsCount: 2 }) })] })), (0, jsx_runtime_1.jsxs)(styles_1.EndAdornmentWrapper, { "$collapsedIn": collapsedIn, children: [Counter && (0, jsx_runtime_1.jsx)(Counter, { max: max, count: count }), isGroupTitleItem && ((0, jsx_runtime_1.jsx)(styles_1.NavMenuItemButtonChevron, { "$collapsedIn": collapsedIn, "$opened": opened }))] })] }));
 });

package/node/components/NavMenu/Item/ItemButton/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const navMenuItemButtonClassnames: {
+    root: string;
+    hasGroup: string;
+    label: string;
+    labelHasCounter: string;
+};

package/node/components/NavMenu/Item/ItemButton/constants.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.navMenuItemButtonClassnames = void 0;
+const createUIKitClassname_1 = require("../../../utils/createUIKitClassname");
+exports.navMenuItemButtonClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('nav-menu-item-button'),
+    hasGroup: (0, createUIKitClassname_1.createUIKitClassname)('nav-menu-item-button_has-group'),
+    label: (0, createUIKitClassname_1.createUIKitClassname)('nav-menu-item-button__label'),
+    labelHasCounter: (0, createUIKitClassname_1.createUIKitClassname)('nav-menu-item-button__label_has-counter'),
+};

package/node/components/NavMenu/Item/ItemButton/index.d.ts

@@ -1 +1,2 @@
 export * from './ItemButton';
+export * from './constants';

package/node/components/NavMenu/Item/ItemButton/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./ItemButton"), exports);
+__exportStar(require("./constants"), exports);

package/node/components/NavMenu/Item/ItemButton/styles.d.ts

@@ -2,8 +2,6 @@
 /// <reference types="react" />
 export declare const StyledListItemButton: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../../ListItemButton").ListItemButtonProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
-} & {
-    $isGroupTitleItem: boolean;
 }, {}, {}>;
 export declare const NavMenuItemButtonIcon: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<{
     classes?: Partial<import("@mui/material").ListItemIconClasses> | undefined;
@@ -637,9 +635,6 @@ export declare const NavMenuItemButtonText: import("@emotion/styled/dist/declara
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement> & {
     theme?: import("@emotion/react").Theme | undefined;
-} & {
-    $isGroupTitleItem: boolean;
-    $isCounter?: boolean | undefined;
 }, {}, {}>;
 export declare const NavMenuItemButtonChevron: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     children?: import("react").ReactNode;

package/node/components/NavMenu/Item/ItemButton/styles.js

@@ -1,23 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledPageDotOutlineMd = exports.EndAdornmentWrapper = exports.NavMenuItemButtonChevron = exports.NavMenuItemButtonText = exports.NavMenuItemButtonIcon = exports.StyledListItemButton = void 0;
+const ListItemButton_1 = require("@mui/material/ListItemButton");
 const ChevronDOutlineMd_1 = require("../../../../icons/ChevronDOutlineMd");
 const PageDotOutlineMd_1 = require("../../../../icons/PageDotOutlineMd");
-const ListItemButton_1 = require("../../../ListItemButton");
+const ListItemButton_2 = require("../../../ListItemButton");
 const ListItemIcon_1 = require("../../../ListItemIcon");
 const OverflowTypography_1 = require("../../../OverflowTypography");
 const SvgIcon_1 = require("../../../SvgIcon");
 const styled_1 = require("../../../styled");
 const mixins_1 = require("../../../styled/mixins");
-const getItemWidth = (isGroupTitleItem, isCounter) => {
-    if (!isCounter) {
-        return isGroupTitleItem ? '140px' : '170px';
-    }
-    return isGroupTitleItem ? '100px' : '130px';
-};
-exports.StyledListItemButton = (0, styled_1.styled)(ListItemButton_1.ListItemButton, {
-    shouldForwardProp: (prop) => !['$isGroupTitleItem'].includes(prop),
-}) `
+const constants_1 = require("./constants");
+exports.StyledListItemButton = (0, styled_1.styled)(ListItemButton_2.ListItemButton) `
   overflow: hidden;
 
   box-sizing: border-box;
@@ -26,10 +20,10 @@ exports.StyledListItemButton = (0, styled_1.styled)(ListItemButton_1.ListItemBut
   
   border-radius: ${({ theme }) => theme.shape.small};
   
-  &.Mui-selected {
+  &.${ListItemButton_1.listItemButtonClasses.selected} {
     color: ${({ theme }) => theme.palette.grey[900]};
 
-    background-color: ${({ theme, $isGroupTitleItem }) => $isGroupTitleItem ? 'inherit' : theme.palette.primary[100]};
+    background-color: ${({ theme }) => theme.palette.primary[100]};
 
     &::before {
       content: '';
@@ -43,7 +37,15 @@ exports.StyledListItemButton = (0, styled_1.styled)(ListItemButton_1.ListItemBut
     }
     
     &:hover {
-      background-color: ${({ theme, $isGroupTitleItem }) => $isGroupTitleItem ? 'inherit' : theme.palette.primary[100]};
+      background-color: ${({ theme }) => theme.palette.primary[100]};
+    }
+
+    &.${constants_1.navMenuItemButtonClassnames.hasGroup} {
+      background-color: inherit;
+
+      &:hover {
+        background-color: inherit;
+      }
     }
   }
 
@@ -89,10 +91,7 @@ exports.NavMenuItemButtonIcon = (0, styled_1.styled)(ListItemIcon_1.ListItemIcon
     height: 20px;
   }
 `;
-exports.NavMenuItemButtonText = (0, styled_1.styled)(OverflowTypography_1.OverflowTypography, {
-    shouldForwardProp: (prop) => !['$isGroupTitleItem', '$isCounter'].includes(prop),
-}) `
-  width: ${({ $isGroupTitleItem, $isCounter }) => getItemWidth($isGroupTitleItem, $isCounter)};
+exports.NavMenuItemButtonText = (0, styled_1.styled)(OverflowTypography_1.OverflowTypography) `
   margin-left: ${({ theme }) => theme.spacing(3)};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {

package/node/components/NavMenu/Item/index.d.ts

@@ -1,2 +1,3 @@
 export * from './Item';
 export * from './types';
+export { navMenuItemButtonClassnames } from './ItemButton';

package/node/components/NavMenu/Item/index.js

@@ -14,5 +14,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.navMenuItemButtonClassnames = void 0;
 __exportStar(require("./Item"), exports);
 __exportStar(require("./types"), exports);
+var ItemButton_1 = require("./ItemButton");
+Object.defineProperty(exports, "navMenuItemButtonClassnames", { enumerable: true, get: function () { return ItemButton_1.navMenuItemButtonClassnames; } });

package/node/components/utils/cva/cva.d.ts

@@ -0,0 +1 @@
+export { cva } from 'class-variance-authority';

package/node/components/utils/cva/cva.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cva = void 0;
+var class_variance_authority_1 = require("class-variance-authority");
+Object.defineProperty(exports, "cva", { enumerable: true, get: function () { return class_variance_authority_1.cva; } });

package/node/components/utils/cva/index.d.ts

@@ -0,0 +1 @@
+export * from './cva';

package/node/components/utils/cva/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./cva"), exports);

package/node/components/utils/cva/public.d.ts

@@ -0,0 +1 @@
+export * from './cva';

package/node/components/utils/cva/public.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./cva"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.46.0",
+  "version": "4.47.1",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {
@@ -12,6 +12,7 @@
     "@emotion/styled": "^11.13.5",
     "@mui/material": "5.13.0",
     "classnames": "^2.5.1",
+    "class-variance-authority": "^0.7.1",
     "colord": "^2.9.3",
     "dayjs": "^1.11.5",
     "react-imask": "6.4.2",