@ozen-ui/kit 0.5.0 → 0.7.0

package/__inner__/cjs/components/ThemeProvider/themes/helper.d.ts

@@ -1,9 +1,9 @@
-export declare const color: readonly ["--color-content-primary", "--color-content-secondary", "--color-content-tertiary", "--color-content-disabled", "--color-content-ghost-disabled", "--color-content-action", "--color-content-action-hover", "--color-content-action-pressed", "--color-content-action-dark", "--color-content-action-on", "--color-content-error", "--color-content-error-hover", "--color-content-error-pressed", "--color-content-error-dark", "--color-content-warning", "--color-content-warning-hover", "--color-content-warning-pressed", "--color-content-warning-dark", "--color-content-success", "--color-content-success-hover", "--color-content-success-pressed", "--color-content-success-dark", "--color-content-info", "--color-content-info-hover", "--color-content-info-pressed", "--color-content-info-dark", "--color-content-primary-inverse", "--color-background-main", "--color-background-main-hover", "--color-background-main-pressed", "--color-background-primary", "--color-background-primary-hover", "--color-background-primary-pressed", "--color-background-secondary", "--color-background-secondary-hover", "--color-background-secondary-pressed", "--color-background-tertiary", "--color-background-tertiary-hover", "--color-background-tertiary-pressed", "--color-background-disabled", "--color-background-action", "--color-background-action-hover", "--color-background-action-pressed", "--color-background-action-active-disabled", "--color-background-action-light", "--color-background-action-light-hover", "--color-background-action-light-pressed", "--color-background-error", "--color-background-error-hover", "--color-background-error-pressed", "--color-background-error-light", "--color-background-error-light-hover", "--color-background-error-light-pressed", "--color-background-warning", "--color-background-warning-hover", "--color-background-warning-pressed", "--color-background-warning-light", "--color-background-warning-light-hover", "--color-background-warning-light-pressed", "--color-background-success", "--color-background-success-hover", "--color-background-success-pressed", "--color-background-success-light", "--color-background-success-light-hover", "--color-background-success-light-pressed", "--color-background-info", "--color-background-info-hover", "--color-background-info-pressed", "--color-background-info-light", "--color-background-info-light-hover", "--color-background-info-light-pressed", "--color-background-main-inverse", "--color-background-overlay", "--color-background-ghost", "--color-background-ghost-hover", "--color-background-ghost-pressed", "--color-background-ghost-disabled", "--color-border-main", "--color-border-main-hover", "--color-border-main-pressed", "--color-border-secondary", "--color-border-secondary-hover", "--color-border-secondary-pressed", "--color-border-disabled", "--color-border-ghost-disabled", "--color-border-focused", "--color-border-action", "--color-border-action-hover", "--color-border-action-pressed", "--color-border-error", "--color-border-warning", "--color-border-success", "--color-border-info", "--color-border-main-on", "--color-additional-a1", "--color-additional-a2", "--color-additional-a3", "--color-additional-b1", "--color-additional-b2", "--color-additional-b3", "--color-additional-c1", "--color-additional-c2", "--color-additional-c3", "--color-additional-d1", "--color-additional-d2", "--color-additional-d3", "--color-additional-e1", "--color-additional-e2", "--color-additional-e3", "--color-additional-f1", "--color-additional-f2", "--color-additional-f3", "--color-additional-g1", "--color-additional-g2", "--color-additional-g3", "--color-additional-h1", "--color-additional-h2", "--color-additional-h3", "--color-gradient-gr1", "--color-gradient-gr2", "--color-gradient-gr3", "--color-gradient-gr4", "--color-gradient-gr5"];
+export declare const color: readonly ["--color-content-primary", "--color-content-secondary", "--color-additional-h3", "--color-content-tertiary", "--color-content-disabled", "--color-content-ghost-disabled", "--color-content-action", "--color-content-action-hover", "--color-content-action-pressed", "--color-content-action-dark", "--color-content-action-on", "--color-content-error", "--color-content-error-hover", "--color-content-error-pressed", "--color-content-error-dark", "--color-content-warning", "--color-content-warning-hover", "--color-content-warning-pressed", "--color-content-warning-dark", "--color-content-success", "--color-content-success-hover", "--color-content-success-pressed", "--color-content-success-dark", "--color-content-info", "--color-content-info-hover", "--color-content-info-pressed", "--color-content-info-dark", "--color-content-primary-inverse", "--color-content-accent-main", "--color-accent-main", "--color-content-accent-primary", "--color-accent-primary", "--color-content-accent-disabled", "--color-background-main", "--color-background-main-hover", "--color-background-main-pressed", "--color-background-primary", "--color-background-primary-hover", "--color-background-primary-pressed", "--color-background-secondary", "--color-background-secondary-hover", "--color-background-secondary-pressed", "--color-background-tertiary", "--color-background-tertiary-hover", "--color-background-tertiary-pressed", "--color-background-disabled", "--color-background-action", "--color-background-action-hover", "--color-background-action-pressed", "--color-background-action-active-disabled", "--color-background-action-light", "--color-background-action-light-hover", "--color-background-action-light-pressed", "--color-background-error", "--color-background-error-hover", "--color-background-error-pressed", "--color-background-error-light", "--color-background-error-light-hover", "--color-background-error-light-pressed", "--color-background-warning", "--color-background-warning-hover", "--color-background-warning-pressed", "--color-background-warning-light", "--color-background-warning-light-hover", "--color-background-warning-light-pressed", "--color-background-success", "--color-background-success-hover", "--color-background-success-pressed", "--color-background-success-light", "--color-background-success-light-hover", "--color-background-success-light-pressed", "--color-background-info", "--color-background-info-hover", "--color-background-info-pressed", "--color-background-info-light", "--color-background-info-light-hover", "--color-background-info-light-pressed", "--color-background-main-inverse", "--color-background-overlay", "--color-background-ghost", "--color-background-ghost-hover", "--color-background-ghost-pressed", "--color-background-ghost-disabled", "--color-background-accent-action-light-hover", "--color-background-accent-action-light-pressed", "--color-background-accent-error-light-hover", "--color-background-accent-error-light-pressed", "--color-background-accent-warning-light-hover", "--color-background-accent-warning-light-pressed", "--color-background-accent-success-light-hover", "--color-background-accent-success-light-pressed", "--color-background-accent-info-light-hover", "--color-background-accent-info-light-pressed", "--color-border-main", "--color-border-main-hover", "--color-border-main-pressed", "--color-border-secondary", "--color-border-secondary-hover", "--color-border-secondary-pressed", "--color-border-disabled", "--color-border-ghost-disabled", "--color-border-focused", "--color-border-action", "--color-border-action-hover", "--color-border-action-pressed", "--color-border-error", "--color-border-warning", "--color-border-success", "--color-border-info", "--color-border-main-on", "--color-border-accent-main", "--color-border-accent-disabled", "--color-border-accent-focused", "--color-accent-main-hover", "--color-accent-main-pressed", "--color-accent-primary-hover", "--color-accent-primary-pressed", "--color-accent-secondary", "--color-accent-secondary-hover", "--color-accent-secondary-pressed", "--color-accent-tertiary", "--color-accent-tertiary-hover", "--color-accent-tertiary-pressed", "--color-accent-disabled", "--color-accent-main-inverse", "--color-additional-a1", "--color-additional-a2", "--color-additional-a3", "--color-additional-b1", "--color-additional-b2", "--color-additional-b3", "--color-additional-c1", "--color-additional-c2", "--color-additional-c3", "--color-additional-d1", "--color-additional-d2", "--color-additional-d3", "--color-additional-e1", "--color-additional-e2", "--color-additional-e3", "--color-additional-f1", "--color-additional-f2", "--color-additional-f3", "--color-additional-g1", "--color-additional-g2", "--color-additional-g3", "--color-additional-h1", "--color-additional-h2"];
 export declare const borderRadius: readonly ["--border-radius-l", "--border-radius-xl", "--border-radius-m", "--border-radius-s", "--border-radius-xs", "--border-radius-2xs"];
 export declare const borderWidth: readonly ["--border-width-s", "--border-width-m"];
 export declare const shadow: readonly ["--shadow-l", "--shadow-m", "--shadow-s"];
 export declare const breakpoint: readonly ["--breakpoint-xs", "--breakpoint-s", "--breakpoint-m", "--breakpoint-l"];
 export declare const zIndex: readonly ["--z-index-default", "--z-index-absolute", "--z-index-header", "--z-index-sidebar", "--z-index-modal", "--z-index-popover", "--z-index-snackbar", "--z-index-chat"];
 export declare const space: readonly ["--space-8xl", "--space-7xl", "--space-6xl", "--space-5xl", "--space-4xl", "--space-3xl", "--space-2xl", "--space-xl", "--space-l", "--space-m", "--space-s", "--space-xs"];
-export declare const typography: readonly ["--typography-text-4xl_1-font", "--typography-text-3xl_1-font", "--typography-text-2xl_1-font", "--typography-text-xl_1-font", "--typography-heading-4xl-font", "--typography-text-4xl-font", "--typography-heading-3xl-font", "--typography-text-3xl-font", "--typography-heading-2xl-font", "--typography-text-2xl-font", "--typography-heading-xl-font", "--typography-text-xl-font", "--typography-text-l-font", "--typography-text-l_1-font", "--typography-text-m-font", "--typography-text-m_1-font", "--typography-text-s-font", "--typography-text-s_1-font", "--typography-text-xs-font", "--typography-text-xs_1-font", "--typography-text-2xs-font", "--typography-text-2xs_1-font", "--typography-text-3xs-font", "--typography-caption-3xs-font", "--typography-caption-3xs-text_transform", "--typography-caption-3xs-letter_spacing", "--typography-text-3xs_1-font", "--typography-caption-3xs_1-font", "--typography-caption-3xs_1-text_transform", "--typography-caption-3xs_1-letter_spacing"];
+export declare const typography: readonly ["--typography-text-xl_1-font", "--typography-text-4xl_1-font", "--typography-text-3xl_1-font", "--typography-text-2xl_1-font", "--typography-heading-4xl-font", "--typography-text-4xl-font", "--typography-heading-3xl-font", "--typography-text-3xl-font", "--typography-heading-2xl-font", "--typography-text-2xl-font", "--typography-heading-xl-font", "--typography-text-xl-font", "--typography-text-l-font", "--typography-text-l_1-font", "--typography-text-m-font", "--typography-text-m_1-font", "--typography-text-s-font", "--typography-text-s_1-font", "--typography-text-xs-font", "--typography-text-xs_1-font", "--typography-text-2xs-font", "--typography-text-2xs_1-font", "--typography-text-3xs-font", "--typography-caption-3xs-font", "--typography-caption-3xs-text_transform", "--typography-caption-3xs-letter_spacing", "--typography-text-3xs_1-font", "--typography-caption-3xs_1-font", "--typography-caption-3xs_1-text_transform", "--typography-caption-3xs_1-letter_spacing"];
 export declare const transition: readonly ["--transition-default", "--transition-slow"];

package/__inner__/cjs/components/ThemeProvider/themes/helper.js

@@ -4,6 +4,7 @@ exports.transition = exports.typography = exports.space = exports.zIndex = expor
 exports.color = [
     '--color-content-primary',
     '--color-content-secondary',
+    '--color-additional-h3',
     '--color-content-tertiary',
     '--color-content-disabled',
     '--color-content-ghost-disabled',
@@ -29,6 +30,11 @@ exports.color = [
     '--color-content-info-pressed',
     '--color-content-info-dark',
     '--color-content-primary-inverse',
+    '--color-content-accent-main',
+    '--color-accent-main',
+    '--color-content-accent-primary',
+    '--color-accent-primary',
+    '--color-content-accent-disabled',
     '--color-background-main',
     '--color-background-main-hover',
     '--color-background-main-pressed',
@@ -79,6 +85,16 @@ exports.color = [
     '--color-background-ghost-hover',
     '--color-background-ghost-pressed',
     '--color-background-ghost-disabled',
+    '--color-background-accent-action-light-hover',
+    '--color-background-accent-action-light-pressed',
+    '--color-background-accent-error-light-hover',
+    '--color-background-accent-error-light-pressed',
+    '--color-background-accent-warning-light-hover',
+    '--color-background-accent-warning-light-pressed',
+    '--color-background-accent-success-light-hover',
+    '--color-background-accent-success-light-pressed',
+    '--color-background-accent-info-light-hover',
+    '--color-background-accent-info-light-pressed',
     '--color-border-main',
     '--color-border-main-hover',
     '--color-border-main-pressed',
@@ -96,6 +112,21 @@ exports.color = [
     '--color-border-success',
     '--color-border-info',
     '--color-border-main-on',
+    '--color-border-accent-main',
+    '--color-border-accent-disabled',
+    '--color-border-accent-focused',
+    '--color-accent-main-hover',
+    '--color-accent-main-pressed',
+    '--color-accent-primary-hover',
+    '--color-accent-primary-pressed',
+    '--color-accent-secondary',
+    '--color-accent-secondary-hover',
+    '--color-accent-secondary-pressed',
+    '--color-accent-tertiary',
+    '--color-accent-tertiary-hover',
+    '--color-accent-tertiary-pressed',
+    '--color-accent-disabled',
+    '--color-accent-main-inverse',
     '--color-additional-a1',
     '--color-additional-a2',
     '--color-additional-a3',
@@ -119,12 +150,6 @@ exports.color = [
     '--color-additional-g3',
     '--color-additional-h1',
     '--color-additional-h2',
-    '--color-additional-h3',
-    '--color-gradient-gr1',
-    '--color-gradient-gr2',
-    '--color-gradient-gr3',
-    '--color-gradient-gr4',
-    '--color-gradient-gr5',
 ];
 exports.borderRadius = [
     '--border-radius-l',
@@ -167,10 +192,10 @@ exports.space = [
     '--space-xs',
 ];
 exports.typography = [
+    '--typography-text-xl_1-font',
     '--typography-text-4xl_1-font',
     '--typography-text-3xl_1-font',
     '--typography-text-2xl_1-font',
-    '--typography-text-xl_1-font',
     '--typography-heading-4xl-font',
     '--typography-text-4xl-font',
     '--typography-heading-3xl-font',

package/__inner__/cjs/components/ThemeProvider/types.d.ts

@@ -27,6 +27,7 @@ import type { LoaderProps } from '../Loader';
 import type { MenuProps, MenuItemProps, MenuListProps } from '../Menu';
 import type { ModalProps } from '../Modal';
 import type { PaginationProps } from '../Pagination';
+import type { PaperProps } from '../Paper';
 import type { PopoverProps } from '../Popover';
 import type { PortalProps } from '../Portal';
 import type { RadioProps } from '../Radio';
@@ -91,6 +92,7 @@ export type Theme = {
         MenuList?: Partial<MenuListProps>;
         Modal?: Partial<ModalProps>;
         Pagination?: Partial<PaginationProps>;
+        Paper?: Partial<PaperProps>;
         Popover?: Partial<PopoverProps>;
         Portal?: Partial<PortalProps>;
         Radio?: Partial<RadioProps>;

package/__inner__/cjs/components/Tooltip/Tooltip.css

@@ -1,33 +1,28 @@
 /* stylelint-disable */
-.Popover.Tooltip {
+.Tooltip {
   max-inline-size: 300px;
-  box-shadow: var(--shadow-m);
 }
-.Popover.Tooltip_variant_dark {
-      background: var(--color-background-main-inverse);
-      color: var(--color-content-primary-inverse);
-    }
-.Popover.Tooltip_variant_light {
-      background: var(--color-background-main);
-      color: var(--color-content-primary);
-    }
-.Popover.Tooltip_size_xs {
-      padding: 8px 12px;
+.Tooltip_size_xs {
+      padding: var(--space-s) var(--space-m);
 
       font: var(--typography-text-xs-font);
 
       letter-spacing: var(--typography-text-xs-letter_spacing, 0);
 
       text-transform: var(--typography-text-xs-text_transform, none);
-      border-radius: var(--border-radius-s);
     }
-.Popover.Tooltip_size_s {
-      padding: 12px 16px;
+.Tooltip_size_s {
+      padding: var(--space-m) var(--space-l);
 
       font: var(--typography-text-s-font);
 
       letter-spacing: var(--typography-text-s-letter_spacing, 0);
 
       text-transform: var(--typography-text-s-text_transform, none);
-      border-radius: var(--border-radius-m);
+    }
+.Tooltip_variant_light {
+      color: var(--color-content-primary);
+    }
+.Tooltip_variant_dark {
+      color: var(--color-content-primary-inverse);
     }

package/__inner__/cjs/components/Tooltip/Tooltip.js

@@ -114,8 +114,7 @@ exports.Tooltip = (0, react_1.forwardRef)(function (inProps, ref) {
     ]);
     return (react_1["default"].createElement(react_1["default"].Fragment, null,
         react_1["default"].cloneElement(resolveChildren, composeChildrenProps),
-        react_1["default"].createElement(Popover_1.Popover, tslib_1.__assign({ anchorRef: anchorRef }, other, { ref: ref, offset: offset, placement: placement, open: openState && !disabled, onClose: handleClose, className: (0, exports.cnTooltip)({ size: size, variant: variant }, [className]), disableInteractive: disableInteractive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, arrow: arrow, arrowProps: {
-                variant: variant,
+        react_1["default"].createElement(Popover_1.Popover, tslib_1.__assign({ anchorRef: anchorRef, as: constants_1.TOOLTIP_DEFAULT_TAG, background: variant === 'light' ? 'main' : 'main-inverse', radius: size }, other, { ref: ref, offset: offset, placement: placement, open: openState && !disabled, onClose: handleClose, className: (0, exports.cnTooltip)({ size: size, variant: variant }, [className]), disableInteractive: disableInteractive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, arrow: arrow, arrowProps: {
                 size: size
             }, disableEnforceFocus: true, disableReturnFocus: true }), label)));
 });

package/__inner__/cjs/components/Tooltip/constants.d.ts

@@ -1,3 +1,4 @@
+export declare const TOOLTIP_DEFAULT_TAG: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<import("../Paper").PaperBaseProps, "div">;
 export declare const TOOLTIP_DEFAULT_TRIGGER = "hover";
 export declare const TOOLTIP_DEFAULT_SIZE = "s";
 export declare const TOOLTIP_DEFAULT_VARIANT = "dark";

package/__inner__/cjs/components/Tooltip/constants.js

@@ -1,6 +1,8 @@
 "use strict";
 exports.__esModule = true;
-exports.TOOLTIP_DEFAULT_DISABLED = exports.TOOLTIP_DEFAULT_SHOULD_WRAP_CHILDREN = exports.TOOLTIP_DEFAULT_ARROW = exports.TOOLTIP_DEFAULT_DELAY_LEAVE = exports.TOOLTIP_DEFAULT_DELAY_ENTER = exports.TOOLTIP_DEFAULT_OFFSET = exports.TOOLTIP_DEFAULT_VARIANT = exports.TOOLTIP_DEFAULT_SIZE = exports.TOOLTIP_DEFAULT_TRIGGER = void 0;
+exports.TOOLTIP_DEFAULT_DISABLED = exports.TOOLTIP_DEFAULT_SHOULD_WRAP_CHILDREN = exports.TOOLTIP_DEFAULT_ARROW = exports.TOOLTIP_DEFAULT_DELAY_LEAVE = exports.TOOLTIP_DEFAULT_DELAY_ENTER = exports.TOOLTIP_DEFAULT_OFFSET = exports.TOOLTIP_DEFAULT_VARIANT = exports.TOOLTIP_DEFAULT_SIZE = exports.TOOLTIP_DEFAULT_TRIGGER = exports.TOOLTIP_DEFAULT_TAG = void 0;
+var Paper_1 = require("../Paper");
+exports.TOOLTIP_DEFAULT_TAG = Paper_1.Paper;
 exports.TOOLTIP_DEFAULT_TRIGGER = 'hover';
 exports.TOOLTIP_DEFAULT_SIZE = 's';
 exports.TOOLTIP_DEFAULT_VARIANT = 'dark';

package/__inner__/cjs/components/Tooltip/types.d.ts

@@ -1,5 +1,6 @@
 import type { Ref, ReactNode, ReactElement, ComponentPropsWithRef } from 'react';
-import type { PopoverProps } from '../Popover';
+import type { PopoverBaseProps } from '../Popover';
+import { TOOLTIP_DEFAULT_TAG } from './constants';
 export declare const tooltipSizeVariant: readonly ["xs", "s"];
 export type TooltipSizeVariant = (typeof tooltipSizeVariant)[number];
 export declare const tooltipVariant: readonly ["light", "dark"];
@@ -39,4 +40,4 @@ export type TooltipProps = {
     'data-testid'?: string;
     /** Дополнительные CSS-классы */
     className?: string;
-} & Pick<PopoverProps, 'offset' | 'placement' | 'arrow' | 'anchorRef' | 'ignoreClickOutsideRefs' | 'disableInteractive' | 'onEnter' | 'onEntered' | 'onExit' | 'onExited' | 'setUpdate'> & ComponentPropsWithRef<'div'>;
+} & Pick<PopoverBaseProps, 'offset' | 'placement' | 'arrow' | 'anchorRef' | 'ignoreClickOutsideRefs' | 'disableInteractive' | 'onEnter' | 'onEntered' | 'onExit' | 'onExited' | 'setUpdate'> & ComponentPropsWithRef<typeof TOOLTIP_DEFAULT_TAG>;

package/__inner__/cjs/components/Typography/Typography.css

@@ -56,33 +56,69 @@
 .Typography_color_actionDark {
       color: var(--color-content-action-dark);
     }
+.Typography_color_actionPressed {
+      color: var(--color-content-action-pressed);
+    }
 .Typography_color_actionOn {
       color: var(--color-content-action-on);
     }
 .Typography_color_error {
       color: var(--color-content-error);
     }
+.Typography_color_errorHover {
+      color: var(--color-content-error-hover);
+    }
+.Typography_color_errorPressed {
+      color: var(--color-content-error-pressed);
+    }
 .Typography_color_errorDark {
       color: var(--color-content-error-dark);
     }
 .Typography_color_warning {
       color: var(--color-content-warning);
     }
+.Typography_color_warningHover {
+      color: var(--color-content-warning-hover);
+    }
+.Typography_color_warningPressed {
+      color: var(--color-content-warning-pressed);
+    }
 .Typography_color_warningDark {
       color: var(--color-content-warning-dark);
     }
 .Typography_color_success {
       color: var(--color-content-success);
     }
+.Typography_color_successHover {
+      color: var(--color-content-success-hover);
+    }
+.Typography_color_successPressed {
+      color: var(--color-content-success-pressed);
+    }
 .Typography_color_successDark {
       color: var(--color-content-success-dark);
     }
 .Typography_color_info {
       color: var(--color-content-info);
     }
+.Typography_color_infoHover {
+      color: var(--color-content-info-hover);
+    }
+.Typography_color_infoPressed {
+      color: var(--color-content-info-pressed);
+    }
 .Typography_color_infoDark {
       color: var(--color-content-info-dark);
     }
+.Typography_color_accentMain {
+      color: var(--color-content-accent-main);
+    }
+.Typography_color_accentPrimary {
+      color: var(--color-content-accent-primary);
+    }
+.Typography_color_accentDisabled {
+      color: var(--color-content-accent-disabled);
+    }
 .Typography_variant_heading-4xl {
       font: var(--typography-heading-4xl-font);
       letter-spacing: var(--typography-heading-4xl-letter_spacing, 0);

package/__inner__/cjs/components/Typography/Typography.d.ts

@@ -7,7 +7,7 @@ export declare const typographyDisplayVariant: readonly ["block", "inline", "inl
 export type TypographyDisplayVariant = (typeof typographyDisplayVariant)[number];
 export declare const typographyAlignVariant: readonly ["left", "center", "right"];
 export type TypographyAlignVariant = (typeof typographyAlignVariant)[number];
-export declare const typographyColorVariant: readonly ["primary", "secondary", "tertiary", "disabled", "ghostDisabled", "action", "actionHover", "actionDark", "actionOn", "error", "errorDark", "warning", "warningDark", "success", "successDark", "info", "infoDark", "primaryInverse"];
+export declare const typographyColorVariant: readonly ["primary", "secondary", "tertiary", "disabled", "ghostDisabled", "action", "actionPressed", "actionHover", "actionDark", "actionOn", "error", "errorHover", "errorPressed", "errorDark", "warning", "warningHover", "warningPressed", "warningDark", "success", "successHover", "successDark", "successPressed", "info", "infoHover", "infoPressed", "infoDark", "primaryInverse", "accentMain", "accentPrimary", "accentDisabled"];
 export type TypographyColorVariant = (typeof typographyColorVariant)[number];
 export type TypographyBaseProps = {
     /** Вариант типографики */

package/__inner__/cjs/components/Typography/Typography.js

@@ -50,18 +50,30 @@ exports.typographyColorVariant = [
     'disabled',
     'ghostDisabled',
     'action',
+    'actionPressed',
     'actionHover',
     'actionDark',
     'actionOn',
     'error',
+    'errorHover',
+    'errorPressed',
     'errorDark',
     'warning',
+    'warningHover',
+    'warningPressed',
     'warningDark',
     'success',
+    'successHover',
     'successDark',
+    'successPressed',
     'info',
+    'infoHover',
+    'infoPressed',
     'infoDark',
     'primaryInverse',
+    'accentMain',
+    'accentPrimary',
+    'accentDisabled',
 ];
 exports.cnTypography = (0, classname_1.cn)('Typography');
 exports.Typography = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {

package/__inner__/esm/components/Alert/Alert.css

@@ -1,7 +1,6 @@
 /* stylelint-disable */
 .Alert {
   position: relative;
-  border-radius: var(--border-radius-xs);
   display: flex;
   -moz-column-gap: var(--space-s);
        column-gap: var(--space-s);
@@ -11,8 +10,6 @@
   box-sizing: border-box;
   border-inline-start: 4px solid var(--alert-border-color);
   padding: 16px;
-  box-shadow: var(--shadow-m);
-  background-color: var(--alert-background-color);
 
   font: var(--typography-text-xs-font);
 
@@ -21,14 +18,12 @@
   text-transform: var(--typography-text-xs-text_transform, none);
 }
 .Alert_color_light {
-      --alert-background-color: var(--color-background-main);
       --alert-title-text-color: var(--color-content-primary);
       --alert-body-text-color: var(--color-content-secondary);
       --alert-icon-color: var(--color-content-primary);
       --alert-close-button-color: var(--color-background-main-inverse);
     }
 .Alert_color_dark {
-      --alert-background-color: var(--color-background-main-inverse);
       --alert-title-text-color: var(--color-content-primary-inverse);
       --alert-body-text-color: var(--color-content-tertiary);
       --alert-icon-color: var(--color-content-primary-inverse);

package/__inner__/esm/components/Alert/Alert.js

@@ -5,6 +5,7 @@ import { CloseIcon, InfoCircleFilledIcon, CheckCircleFilledIcon, WarningTriangle
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { IconButton } from '../IconButton';
+import { Paper } from '../Paper';
 import { ALERT_DEFAULT_STATUS, ALERT_DEFAULT_SHOW_ICON, ALERT_DEFAULT_COLOR, } from './constants';
 export var cnAlert = cn('Alert');
 export var alertStatusVariant = [
@@ -40,9 +41,9 @@ export var Alert = forwardRef(function (inProps, ref) {
         }
         return React.cloneElement(actionProp, actionProps);
     }, [actionProp]);
-    return (React.createElement("div", __assign({ className: cnAlert({ status: status, hasCloseButton: !!onClose, color: color }, [
+    return (React.createElement(Paper, __assign({ role: "alert", radius: "xs", shadow: "m", background: color === 'light' ? 'main' : 'main-inverse', className: cnAlert({ status: status, hasCloseButton: !!onClose, color: color }, [
             className,
-        ]), role: "alert" }, otherProps, { ref: ref }),
+        ]) }, otherProps, { ref: ref }),
         showIcon && (React.createElement("div", { className: cnAlert('Icon') }, matchStatusToIcon[status])),
         React.createElement("div", { className: cnAlert('Content') },
             React.createElement("div", { className: cnAlert('Title') }, title),

package/__inner__/esm/components/Breadcrumbs/Breadcrumbs.css

@@ -12,3 +12,7 @@
   display: flex;
   align-items: center;
 }
+
+.Breadcrumbs-Item .Button-Label {
+  color: var(--color-content-secondary);
+}

package/__inner__/esm/components/Card/Card.css

@@ -1,26 +1,21 @@
 .Card {
   position: relative;
-  background-color: var(--card-background-color);
   padding: var(--card-padding);
   cursor: var(--card-cursor-style);
-  border-radius: var(--card-border-radius);
   transition: var(--transition-default);
   box-sizing: border-box;
 }
 
   .Card_size_s {
       --card-padding: var(--space-l);
-      --card-border-radius: var(--border-radius-xs);
     }
 
   .Card_size_m {
       --card-padding: var(--space-xl);
-      --card-border-radius: var(--border-radius-m);
     }
 
   .Card_size_l {
       --card-padding: var(--space-2xl);
-      --card-border-radius: var(--border-radius-l);
     }
 
   .Card_interactive {
@@ -32,8 +27,9 @@
         position: absolute;
         inset: 0;
         pointer-events: none;
-        border: var(--card-border-width) var(--card-border-style) var(--card-border-color);
-        border-radius: var(--card-border-radius);
+        border: var(--card-border-width) var(--card-border-style)
+          var(--card-border-color);
+        border-radius: var(--paper-border-radius);
         transition: var(--transition-default);
       }
 
@@ -61,14 +57,6 @@
       --card-border-style: dashed;
     }
 
-  .Card_backgroundColor_standard {
-      --card-background-color: var(--color-background-main);
-    }
-
-  .Card_backgroundColor_selected {
-      --card-background-color: var(--color-background-action-light);
-    }
-
   .Card_interactive.Card_borderColor_standard:hover {
       --card-border-color: var(--color-border-secondary-hover);
     }
@@ -85,12 +73,6 @@
       --card-border-color: var(--color-border-action-pressed);
     }
 
-  .Card_disabled {
-    --card-background-color: var(--color-background-disabled);
-    --card-border-color: var(--color-border-disabled);
-    pointer-events: none;
-  }
-
   .Card:focus {
     outline: 0;
     box-shadow: var(--shadow-outline-focused);
@@ -99,3 +81,9 @@
   .Card:focus:not(:focus-visible) {
     box-shadow: none;
   }
+
+.Card[aria-disabled='true'] {
+  --card-border-color: var(--color-border-disabled);
+  background-color: var(--color-background-disabled);
+  pointer-events: none;
+}

package/__inner__/esm/components/Card/Card.d.ts

@@ -1,7 +1,6 @@
 import './Card.css';
-import { ElementType } from 'react';
-import type { ReactNode } from 'react';
-import { type PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+import type { ReactNode, ElementType } from 'react';
+import { type PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
 export declare const cnCard: import("@bem-react/classname").ClassNameFormatter;
 export declare const cardSizeVariant: readonly ["s", "m", "l"];
 export declare const cardBorderWidthVariant: readonly ["none", "s", "m"];
@@ -34,5 +33,5 @@ export type CardBaseProps = {
     className?: string;
     'data-testid'?: string;
 };
-export type CardProps<As extends ElementType = 'div'> = PolymorphicComponentPropsWithoutRef<CardBaseProps, As>;
+export type CardProps<As extends ElementType = 'div'> = PolymorphicComponentPropsWithRef<CardBaseProps, As>;
 export declare const Card: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<CardBaseProps, "div">;

package/__inner__/esm/components/Card/Card.js

@@ -4,18 +4,28 @@ import React from 'react';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { polymorphicComponentWithRef, } from '../../utils/polymorphicComponentWithRef';
+import { Paper, } from '../Paper';
 export var cnCard = cn('Card');
 export var cardSizeVariant = ['s', 'm', 'l'];
 export var cardBorderWidthVariant = ['none', 's', 'm'];
 export var cardBorderVariant = ['solid', 'dashed'];
 export var cardBorderColorVariant = ['standard', 'selected'];
 export var cardBackgroundColorVariant = ['standard', 'selected'];
+var matchBorderRadiusPaperToCard = {
+    s: 'xs',
+    m: 's',
+    l: 'l'
+};
+var matchBackgroundColorPaperToCard = {
+    selected: 'action-light',
+    standard: 'main'
+};
 export var Card = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'Card' });
     var _a = props.size, size = _a === void 0 ? 'm' : _a, _b = props.disabled, disabled = _b === void 0 ? false : _b, _c = props.interactive, interactive = _c === void 0 ? false : _c, _d = props.borderWidth, borderWidth = _d === void 0 ? 's' : _d, _e = props.borderVariant, borderVariant = _e === void 0 ? 'solid' : _e, _f = props.borderColor, borderColor = _f === void 0 ? 'standard' : _f, _g = props.backgroundColor, backgroundColor = _g === void 0 ? 'standard' : _g, _h = props.as, Tag = _h === void 0 ? 'div' : _h, className = props.className, children = props.children, other = __rest(props, ["size", "disabled", "interactive", "borderWidth", "borderVariant", "borderColor", "backgroundColor", "as", "className", "children"]);
     var shouldBeInteractive = !disabled && interactive;
     var shouldShowBorder = borderWidth !== 'none';
-    return (React.createElement(Tag, __assign({}, other, { ref: ref, "aria-disabled": disabled }, (shouldBeInteractive && { tabIndex: 0 }), { className: cnCard(__assign({ size: size, disabled: disabled, interactive: shouldBeInteractive, backgroundColor: backgroundColor, borderWidth: borderWidth }, (shouldShowBorder && {
+    return (React.createElement(Paper, __assign({ as: Tag, radius: matchBorderRadiusPaperToCard[size], background: matchBackgroundColorPaperToCard[backgroundColor] }, other, { ref: ref, "aria-disabled": disabled }, (shouldBeInteractive && { tabIndex: 0 }), { className: cnCard(__assign({ size: size, disabled: disabled, interactive: shouldBeInteractive, backgroundColor: backgroundColor, borderWidth: borderWidth }, (shouldShowBorder && {
             borderVariant: borderVariant,
             borderColor: borderColor
         })), [className]) }), children));

package/__inner__/esm/components/Dialog/Dialog.css

@@ -13,8 +13,6 @@
     max-inline-size: var(--modal-width);
     /* stylelint-disable-next-line plugin/use-logical-units */
     max-block-size: calc(100vh - 64px);
-    border-radius: var(--border-radius-m);
-    box-shadow: var(--shadow-l);
   }
 .Dialog-InnerContainer {
     display: flex;

package/__inner__/esm/components/Dialog/Dialog.d.ts

@@ -28,4 +28,24 @@ export type DialogProps = {
     /** Кастомный класс контейнера диалогового окна */
     className?: string;
 } & Omit<ModalProps, 'open' | 'onClose' | 'children' | 'className'>;
-export declare const Dialog: React.ForwardRefExoticComponent<Omit<DialogProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Dialog: React.ForwardRefExoticComponent<{
+    /** Признак по которому компонент будет представлен */
+    open: boolean;
+    /** Содержимое диалогового окна */
+    children: React.ReactNode;
+    /** Устанавливает размер типографики и отступов в диалоговом окне */
+    size?: "s" | "l" | undefined;
+    /** Вариант диалогового окна */
+    variant?: "small" | "medium" | "large" | "fullsize" | undefined;
+    /** Функция обратного вызова которая будет вызвана когда компонент запрашивает
+     *  закрытие (нажатие на клавишу {ESC}, клик по подложке Backdrop) */
+    onClose?: (() => void) | undefined;
+    /** Свойства кнопки закрытия диалогового окна */
+    closeButtonProps?: (Omit<IconButtonProps<"button">, "icon"> & {
+        'data-testid'?: string | undefined;
+    }) | undefined;
+    /** Признак по которому кнопка закрытия диалогового окна будет скрыта */
+    hideCloseButton?: boolean | undefined;
+    /** Кастомный класс контейнера диалогового окна */
+    className?: string | undefined;
+} & Omit<ModalProps, "className" | "children" | "open" | "onClose"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/esm/components/Drawer/Drawer.css

@@ -15,7 +15,6 @@
     border: none;
     inset-block-start: auto;
     inset-inline-start: auto;
-    box-shadow: var(--shadow-m);
     transform: none;
     padding: 0;
     outline: none;

package/__inner__/esm/components/Drawer/Drawer.d.ts

@@ -32,4 +32,26 @@ export type DrawerProps = {
     /** Кастомный класс контейнера шторки */
     className?: string;
 } & Omit<ModalProps, 'open' | 'onClose' | 'children' | 'className'>;
-export declare const Drawer: React.ForwardRefExoticComponent<Omit<DrawerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Drawer: React.ForwardRefExoticComponent<{
+    /** Признак по которому компонент будет представлен */
+    open?: boolean | undefined;
+    /** Вариант представления шторки */
+    variant?: "medium" | "large" | "little" | undefined;
+    /** Устанавливает размер типографики и отступов в шторке */
+    size?: "s" | "l" | undefined;
+    /** Функция обратного вызова которая будет вызвана когда компонент запрашивает
+     *  закрытие (нажатие на клавишу {ESC}, клик по подложке Backdrop) */
+    onClose?: (() => void) | undefined;
+    /** Содержимое шторки */
+    children?: React.ReactNode;
+    /** Расположение шторки */
+    placement?: "left" | "right" | undefined;
+    /** Признак по которому кнопка закрытия шторки будет скрыта */
+    hideCloseButton?: boolean | undefined;
+    /** Свойства кнопки закрытия шторки */
+    closeButtonProps?: (Omit<IconButtonProps<"button">, "icon"> & {
+        'data-testid'?: string | undefined;
+    }) | undefined;
+    /** Кастомный класс контейнера шторки */
+    className?: string | undefined;
+} & Omit<ModalProps, "className" | "children" | "open" | "onClose"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/esm/components/Menu/components/MenuItem/MenuItem.js

@@ -5,10 +5,11 @@ import { useThemeProps } from '../../../../hooks/useThemeProps';
 import { cn } from '../../../../utils/classname';
 import { polymorphicComponentWithRef, } from '../../../../utils/polymorphicComponentWithRef';
 import { cnListItemButton, ListItemButton, } from '../../../List';
+import { LIST_ITEM_BUTTON_DEFAULT_TAG } from '../../../List/constants';
 export var cnMenuItem = cn('MenuItem');
 export var MenuItem = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'MenuItem' });
-    var children = props.children, selected = props.selected, value = props.value, label = props.label, _a = props.autoFocus, autoFocus = _a === void 0 ? false : _a, className = props.className, other = __rest(props, ["children", "selected", "value", "label", "autoFocus", "className"]);
+    var children = props.children, selected = props.selected, value = props.value, label = props.label, _a = props.autoFocus, autoFocus = _a === void 0 ? false : _a, className = props.className, _b = props.as, Tag = _b === void 0 ? LIST_ITEM_BUTTON_DEFAULT_TAG : _b, other = __rest(props, ["children", "selected", "value", "label", "autoFocus", "className", "as"]);
     var innerRef = useRef(null);
     useEffect(function () {
         var _a;
@@ -16,6 +17,6 @@ export var MenuItem = polymorphicComponentWithRef(function (inProps, ref) {
             (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }, [autoFocus]);
-    return (React.createElement(ListItemButton, __assign({ role: "menuitem" }, other, { ref: useMultiRef([ref, innerRef]), className: cnListItemButton({ selected: selected }, [className, cnMenuItem()]), "data-value": value, "data-label": label }), children));
+    return (React.createElement(ListItemButton, __assign({ role: "menuitem", as: Tag }, other, { ref: useMultiRef([ref, innerRef]), className: cnListItemButton({ selected: selected }, [className, cnMenuItem()]), "data-value": value, "data-label": label }), children));
 });
 MenuItem.displayName = 'MenuItem';