@ozen-ui/kit 0.66.0 → 0.68.0

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

@@ -15,6 +15,8 @@ import type { CalendarProps } from '../Calendar';
 import type { CardProps } from '../Card';
 import type { CheckboxProps } from '../Checkbox';
 import type { CheckboxGroupProps } from '../CheckboxGroup';
+import type { CheckboxGroupProps as CheckboxGroupNextProps } from '../CheckboxGroupNext';
+import type { CheckboxProps as CheckboxNextProps } from '../CheckboxNext';
 import type { ChipProps } from '../Chip';
 import type { ChipGroupProps } from '../ChipGroup';
 import type { ChipProps as ChipNextProps } from '../ChipNext';
@@ -23,6 +25,7 @@ import type { ContainerProps } from '../Container';
 import type { DataListProps } from '../DataList';
 import type { DatePickerProps } from '../DatePicker';
 import type { DialogProps } from '../Dialog';
+import type { DialogProps as DialogNextProps } from '../DialogNext';
 import type { DividerProps } from '../Divider';
 import type { DrawerProps } from '../Drawer';
 import type { DrawerProps as DrawerNextProps } from '../DrawerNext';
@@ -48,6 +51,8 @@ import type { PopoverProps } from '../Popover';
 import type { PortalProps } from '../Portal';
 import type { RadioProps } from '../Radio';
 import type { RadioGroupProps } from '../RadioGroup';
+import type { RadioGroupProps as RadioGroupNextProps } from '../RadioGroupNext';
+import type { RadioProps as RadioNextProps } from '../RadioNext';
 import type { SectionMessageProps } from '../SectionMessage';
 import type { SegmentProps } from '../Segment';
 import type { SelectProps } from '../Select';
@@ -60,6 +65,7 @@ import type { TagProps as TagPropsNext } from '../TagNext';
 import type { TextareaProps } from '../Textarea';
 import type { TitleProps } from '../Title';
 import type { ToggleProps } from '../Toggle';
+import type { ToggleProps as ToggleNextProps } from '../ToggleNext';
 import type { TooltipProps } from '../Tooltip';
 import type { TypographyProps } from '../Typography';
 import type { THEME_DEFAULT_TAG } from './constants';
@@ -92,6 +98,8 @@ export type Theme = {
         Calendar?: Partial<CalendarProps>;
         Card?: Partial<CardProps>;
         Checkbox?: Partial<CheckboxProps>;
+        CheckboxNext?: Partial<CheckboxNextProps>;
+        CheckboxGroupNext?: Partial<CheckboxGroupNextProps>;
         CheckboxGroup?: Partial<CheckboxGroupProps>;
         Chip?: Partial<ChipProps>;
         ChipNext?: Partial<ChipNextProps>;
@@ -100,6 +108,7 @@ export type Theme = {
         Container?: Partial<ContainerProps>;
         DataList?: Partial<DataListProps>;
         Dialog?: Partial<DialogProps>;
+        DialogNext?: Partial<DialogNextProps>;
         DatePicker?: Partial<DatePickerProps>;
         Divider?: Partial<DividerProps>;
         Drawer?: Partial<DrawerProps>;
@@ -131,7 +140,9 @@ export type Theme = {
         Popover?: Partial<PopoverProps>;
         Portal?: Partial<PortalProps>;
         Radio?: Partial<RadioProps>;
+        RadioNext?: Partial<RadioNextProps>;
         RadioGroup?: Partial<RadioGroupProps>;
+        RadioGroupNext?: Partial<RadioGroupNextProps>;
         SectionMessage?: Partial<SectionMessageProps>;
         Segment?: Partial<SegmentProps>;
         Select?: Partial<SelectProps>;
@@ -147,6 +158,7 @@ export type Theme = {
         Textarea?: Partial<TextareaProps>;
         Title?: Partial<TitleProps>;
         Toggle?: Partial<ToggleProps>;
+        ToggleNext?: Partial<ToggleNextProps>;
         Tooltip?: Partial<TooltipProps>;
         Typography?: Partial<TypographyProps>;
     };

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

@@ -1,4 +1,4 @@
-import './modules/tag/TitleTag.css';
+import './modules/TitleTag/TitleTag.css';
 import type { TitleBaseProps } from './types';
 export declare const cnTitle: import("@bem-react/classname").ClassNameFormatter;
 export declare const Title: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<TitleBaseProps, "div">;

package/__inner__/esm/components/Title/Title.js

@@ -1,5 +1,5 @@
 import { __assign, __rest } from "tslib";
-import './modules/tag/TitleTag.css';
+import './modules/TitleTag/TitleTag.css';
 import React from 'react';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';

package/__inner__/esm/components/Title/TitleContext.d.ts

@@ -4,5 +4,6 @@ export type TitleContextValue = {
     variant: TitleVariant;
     size: TitleSizeVariant;
 };
+export declare const TitleContextDefaultValue: TitleContextValue;
 export declare const TitleContext: React.Context<TitleContextValue>;
 export declare const useTitleContext: () => TitleContextValue;

package/__inner__/esm/components/Title/TitleContext.js

@@ -1,10 +1,11 @@
 import React, { useContext } from 'react';
 import { IS_DEV } from '../../constants/environment';
 import { TITLE_DEFAULT_SIZE, TITLE_DEFAULT_VARIANT } from './constants';
-export var TitleContext = React.createContext({
+export var TitleContextDefaultValue = {
     variant: TITLE_DEFAULT_VARIANT,
     size: TITLE_DEFAULT_SIZE,
-});
+};
+export var TitleContext = React.createContext(TitleContextDefaultValue);
 export var useTitleContext = function () { return useContext(TitleContext); };
 // Именованный провайдер
 if (IS_DEV) {

package/__inner__/esm/components/Title/components/variant/main/TitleMain.css

@@ -3,16 +3,18 @@
   display: inline-flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: var(--space-xs);
+  gap: var(--spacing-3xs);
 }
-.TitleMain_defaultMargin {
-    margin-block: var(--title-main-default-margin-block);
+.TitleMain_withSpace {
+    margin-block: var(--title-main-default-margin-block-start) var(--title-main-default-margin-block-end);
+  }
+.TitleMain_withoutBreadcrumbs.TitleMain_withSpace {
+    margin-block-start: calc(var(--title-main-default-mock-breadcrumbs-height) + var(--title-main-default-margin-block-start));
   }
-.TitleMain_defaultMargin .TitleMain-Label {
-      block-size: 1em;
-    }
 .TitleMain_size_s {
-      --title-main-default-margin-block: 12px 16px;
+      --title-main-default-margin-block-start: 12px;
+      --title-main-default-margin-block-end: 16px;
+      --title-main-default-mock-breadcrumbs-height: 20px;
     }
 .TitleMain_size_s .TitleMain-Content {
         font: var(--typography-heading-xl-font);
@@ -20,7 +22,9 @@
         text-transform: var(--typography-heading-xl-text_transform, none);
       }
 .TitleMain_size_m {
-      --title-main-default-margin-block: 16px 24px;
+      --title-main-default-margin-block-start: 16px;
+      --title-main-default-margin-block-end: 24px;
+      --title-main-default-mock-breadcrumbs-height: 24px;
     }
 .TitleMain_size_m .TitleMain-Content {
         font: var(--typography-heading-2xl-font);
@@ -33,6 +37,3 @@
 .TitleMain-Content {
     color: var(--color-content-primary);
   }
-.TitleMain-Label {
-    cursor: default;
-  }

package/__inner__/esm/components/Title/components/variant/main/TitleMain.js

@@ -5,14 +5,13 @@ import { cn } from '../../../../../utils/classname';
 import { getIconSizeToFormElement } from '../../../../../utils/getIconSizeToFormElement';
 import { polymorphicComponentWithRef } from '../../../../../utils/polymorphicComponentWithRef';
 import { renderContent } from '../../../../../utils/renderContent';
-import { BreadcrumbItem, Breadcrumbs } from '../../../../Breadcrumbs';
 import { Stack } from '../../../../Stack';
 import { TITLE_DEFAULT_TAG } from '../../../constants';
-import { TITLE_MAIN_LABEL_SIZE_MAP } from './config';
 export var cnTitleMain = cn('TitleMain');
 export var TitleMain = polymorphicComponentWithRef(function (_a, ref) {
-    var size = _a.size, className = _a.className, _b = _a.as, Tag = _b === void 0 ? TITLE_DEFAULT_TAG : _b, children = _a.children, renderLeft = _a.renderLeft, renderRight = _a.renderRight, label = _a.label, defaultMarginProp = _a.defaultMargin, other = __rest(_a, ["size", "className", "as", "children", "renderLeft", "renderRight", "label", "defaultMargin"]);
-    var defaultMargin = defaultMarginProp === undefined ? !!label : defaultMarginProp;
+    var size = _a.size, className = _a.className, _b = _a.as, Tag = _b === void 0 ? TITLE_DEFAULT_TAG : _b, children = _a.children, renderLeft = _a.renderLeft, renderRight = _a.renderRight, breadcrumbs = _a.breadcrumbs, withBreadcrumbs = _a.withBreadcrumbs, other = __rest(_a, ["size", "className", "as", "children", "renderLeft", "renderRight", "breadcrumbs", "withBreadcrumbs"]);
+    var hasBreadcrumbs = !!breadcrumbs;
+    var withSpace = withBreadcrumbs || hasBreadcrumbs;
     var renderIcon = function (content) {
         return renderContent({
             content: content,
@@ -21,9 +20,12 @@ export var TitleMain = polymorphicComponentWithRef(function (_a, ref) {
             },
         });
     };
-    return (React.createElement(Tag, __assign({ className: cnTitleMain({ size: size, defaultMargin: defaultMargin }, [className]) }, other, { ref: ref }),
-        (label || defaultMargin) && (React.createElement(Breadcrumbs, { size: TITLE_MAIN_LABEL_SIZE_MAP[size], className: cnTitleMain('LabelContainer') },
-            React.createElement(BreadcrumbItem, { as: "span", className: cnTitleMain('Label') }, label))),
+    return (React.createElement(Tag, __assign({ className: cnTitleMain({
+            size: size,
+            withSpace: withSpace,
+            withoutBreadcrumbs: !hasBreadcrumbs,
+        }, [className]) }, other, { ref: ref }),
+        breadcrumbs,
         React.createElement(Stack, { gap: "s", align: "center", className: cnTitleMain('ContentContainer') },
             renderIcon(renderLeft),
             React.createElement("span", { className: cnTitleMain('Content') }, children),

package/__inner__/esm/components/Title/components/variant/main/types.d.ts

@@ -1,18 +1,18 @@
-import type { ElementType } from 'react';
+import type { ElementType, ReactNode } from 'react';
 import type { PolymorphicComponentPropsWithoutRef } from '../../../../../utils/polymorphicComponentWithRef';
 import type { TITLE_DEFAULT_TAG } from '../../../constants';
 import type { TitleIcon, TitleSizeVariant } from '../../../entities';
 export type TitleMainBaseProps = {
     /** Свойство, регулирующее размер слайдера */
     size: TitleSizeVariant;
-    /** Лейбл */
-    label?: string;
+    /** Хлебные крошки */
+    breadcrumbs?: ReactNode;
+    /** Если `true`, всегда будет добавлять отступ под хлебные крошки */
+    withBreadcrumbs?: boolean;
     /** Компонент слева */
     renderLeft?: TitleIcon;
     /** Компонент справа */
     renderRight?: TitleIcon;
-    /** Если `true` добавляет отступы */
-    defaultMargin?: boolean;
     /** data-атрибут для тестирования */
     'data-testid'?: string;
 };

package/__inner__/esm/components/Title/components/variant/secondary/TitleSecondary.css

@@ -2,6 +2,7 @@
 .TitleSecondary {
   display: inline-block;
   color: var(--color-content-secondary);
+  margin-block: var(--title-secondary-default-margin-block);
 }
 .TitleSecondary_size_s {
       --title-secondary-default-margin-block: 24px 12px;
@@ -21,6 +22,3 @@
 
       text-transform: var(--typography-text-m_1-text_transform, none);
     }
-.TitleSecondary_defaultMargin {
-    margin-block: var(--title-secondary-default-margin-block);
-  }

package/__inner__/esm/components/Title/components/variant/secondary/TitleSecondary.js

@@ -6,7 +6,7 @@ import { polymorphicComponentWithRef } from '../../../../../utils/polymorphicCom
 import { TITLE_DEFAULT_TAG } from '../../../constants';
 export var cnTitleSecondary = cn('TitleSecondary');
 export var TitleSecondary = polymorphicComponentWithRef(function (_a, ref) {
-    var size = _a.size, className = _a.className, _b = _a.as, Tag = _b === void 0 ? TITLE_DEFAULT_TAG : _b, children = _a.children, defaultMargin = _a.defaultMargin, other = __rest(_a, ["size", "className", "as", "children", "defaultMargin"]);
-    return (React.createElement(Tag, __assign({ className: cnTitleSecondary({ size: size, defaultMargin: defaultMargin }, [className]) }, other, { ref: ref }), children));
+    var size = _a.size, className = _a.className, _b = _a.as, Tag = _b === void 0 ? TITLE_DEFAULT_TAG : _b, children = _a.children, other = __rest(_a, ["size", "className", "as", "children"]);
+    return (React.createElement(Tag, __assign({ className: cnTitleSecondary({ size: size }, [className]) }, other, { ref: ref }), children));
 });
 TitleSecondary.displayName = 'TitleSecondary';

package/__inner__/esm/components/Title/components/variant/secondary/types.d.ts

@@ -5,8 +5,6 @@ import type { TitleSizeVariant } from '../../../entities';
 export type TitleSecondaryBaseProps = {
     /** Свойство, регулирующее размер слайдера */
     size: TitleSizeVariant;
-    /** Если `true` добавляет отступы */
-    defaultMargin?: boolean;
     /** data-атрибут для тестирования */
     'data-testid'?: string;
 };

package/__inner__/esm/components/Title/modules/TitleBreadcrumbItem/TitleBreadcrumbItem.d.ts

@@ -0,0 +1 @@
+export declare const TitleBreadcrumbItem: import("../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<import("../../../Breadcrumbs").BreadcrumbItemBaseProps, "a">;

package/__inner__/esm/components/Title/modules/TitleBreadcrumbItem/TitleBreadcrumbItem.js

@@ -0,0 +1,10 @@
+import { __assign, __rest } from "tslib";
+import React from 'react';
+import { polymorphicComponentWithRef } from '../../../../utils/polymorphicComponentWithRef';
+import { BreadcrumbItem } from '../../../Breadcrumbs';
+import { TITLE_BREADCRUMB_ITEM_DEFAULT_TAG } from './constants';
+export var TitleBreadcrumbItem = polymorphicComponentWithRef(function (_a, ref) {
+    var children = _a.children, _b = _a.as, as = _b === void 0 ? TITLE_BREADCRUMB_ITEM_DEFAULT_TAG : _b, other = __rest(_a, ["children", "as"]);
+    return (React.createElement(BreadcrumbItem, __assign({ ref: ref, as: as }, other), children));
+});
+TitleBreadcrumbItem.displayName = 'TitleBreadcrumbItem';

package/__inner__/esm/components/Title/modules/TitleBreadcrumbItem/constants.d.ts

@@ -0,0 +1 @@
+export declare const TITLE_BREADCRUMB_ITEM_DEFAULT_TAG = "a";

package/__inner__/esm/components/Title/modules/TitleBreadcrumbItem/constants.js

@@ -0,0 +1 @@
+export var TITLE_BREADCRUMB_ITEM_DEFAULT_TAG = 'a';

package/__inner__/esm/components/Title/modules/TitleBreadcrumbItem/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TitleBreadcrumbItem';
+export * from './types';

package/__inner__/esm/components/Title/modules/TitleBreadcrumbItem/index.js

@@ -0,0 +1,2 @@
+export * from './TitleBreadcrumbItem';
+export * from './types';

package/__inner__/esm/components/Title/modules/TitleBreadcrumbItem/types.d.ts

@@ -0,0 +1,6 @@
+import type { ElementType } from 'react';
+import type { PolymorphicComponentPropsWithoutRef } from '../../../../utils/polymorphicComponentWithRef';
+import type { BreadcrumbItemBaseProps } from '../../../Breadcrumbs';
+import type { TITLE_BREADCRUMB_ITEM_DEFAULT_TAG } from './constants';
+export type TitleBreadcrumbItemBaseProps = BreadcrumbItemBaseProps;
+export type TitleBreadcrumbItemProps<As extends ElementType = typeof TITLE_BREADCRUMB_ITEM_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<TitleBreadcrumbItemBaseProps, As>;

package/__inner__/esm/components/Title/modules/TitleBreadcrumbItem/types.js

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

package/__inner__/esm/components/Title/modules/TitleBreadcrumbs/TitleBreadcrumbs.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { TitleBreadcrumbsProps } from './types';
+export declare const TitleBreadcrumbs: React.ForwardRefExoticComponent<Omit<TitleBreadcrumbsProps, "ref"> & React.RefAttributes<HTMLElement>>;

package/__inner__/esm/components/Title/modules/TitleBreadcrumbs/TitleBreadcrumbs.js

@@ -0,0 +1,12 @@
+import { __assign, __rest } from "tslib";
+import React, { forwardRef } from 'react';
+import { Breadcrumbs } from '../../../Breadcrumbs';
+import { useTitleContext } from '../../TitleContext';
+import { TITLE_BREADCRUMBS_SIZE_MAP } from './constants';
+export var TitleBreadcrumbs = forwardRef(function (_a, ref) {
+    var children = _a.children, other = __rest(_a, ["children"]);
+    var size = useTitleContext().size;
+    var breadcrumbsSize = TITLE_BREADCRUMBS_SIZE_MAP[size];
+    return (React.createElement(Breadcrumbs, __assign({ ref: ref, size: breadcrumbsSize }, other), children));
+});
+TitleBreadcrumbs.displayName = 'TitleBreadcrumbs';

package/__inner__/esm/components/Title/modules/TitleBreadcrumbs/constants.d.ts

@@ -0,0 +1,3 @@
+import type { BreadcrumbsSizeVariant } from '../../../Breadcrumbs';
+import type { TitleSizeVariant } from '../../entities';
+export declare const TITLE_BREADCRUMBS_SIZE_MAP: Readonly<Record<TitleSizeVariant, BreadcrumbsSizeVariant>>;

package/__inner__/esm/components/Title/modules/TitleBreadcrumbs/constants.js

@@ -0,0 +1,4 @@
+export var TITLE_BREADCRUMBS_SIZE_MAP = {
+    s: 'xs',
+    m: 's',
+};

package/__inner__/esm/components/Title/modules/TitleBreadcrumbs/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TitleBreadcrumbs';
+export * from './types';

package/__inner__/esm/components/Title/modules/TitleBreadcrumbs/index.js

@@ -0,0 +1,2 @@
+export * from './TitleBreadcrumbs';
+export * from './types';

package/__inner__/esm/components/Title/modules/TitleBreadcrumbs/types.d.ts

@@ -0,0 +1,3 @@
+import type { BreadcrumbsProps, BreadcrumbsRef } from '../../../Breadcrumbs';
+export type TitleBreadcrumbsRef = BreadcrumbsRef;
+export type TitleBreadcrumbsProps = Omit<BreadcrumbsProps, 'size'>;

package/__inner__/esm/components/Title/modules/TitleBreadcrumbs/types.js

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

package/__inner__/esm/components/Title/modules/{icon-button → TitleIconButton}/index.d.ts

@@ -1,2 +1,3 @@
+export * from './presets';
 export * from './TitleIconButton';
 export * from './types';

package/__inner__/esm/components/Title/modules/{icon-button → TitleIconButton}/index.js

@@ -1,2 +1,3 @@
+export * from './presets';
 export * from './TitleIconButton';
 export * from './types';

package/__inner__/esm/components/Title/modules/TitleIconButton/presets/TitleBackIconButton/TitleBackIconButton.d.ts

@@ -0,0 +1,2 @@
+import type { TitleBackIconButtonBaseProps } from './types';
+export declare const TitleBackIconButton: import("../../../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<TitleBackIconButtonBaseProps, "button">;

package/__inner__/esm/components/Title/modules/TitleIconButton/presets/TitleBackIconButton/TitleBackIconButton.js

@@ -0,0 +1,11 @@
+import { __assign, __rest } from "tslib";
+import React from 'react';
+import { ArrowLeftIcon } from '@ozen-ui/icons';
+import { polymorphicComponentWithRef } from '../../../../../../utils/polymorphicComponentWithRef';
+import { TitleIconButton } from '../../TitleIconButton';
+import { TITLE_BACK_ICON_BUTTON_DEFAULT_TAG } from './constants';
+export var TitleBackIconButton = polymorphicComponentWithRef(function (_a, ref) {
+    var _b = _a.as, as = _b === void 0 ? TITLE_BACK_ICON_BUTTON_DEFAULT_TAG : _b, other = __rest(_a, ["as"]);
+    return (React.createElement(TitleIconButton, __assign({}, other, { ref: ref, as: as, icon: React.createElement(ArrowLeftIcon, null) })));
+});
+TitleBackIconButton.displayName = 'TitleBackIconButton';

package/__inner__/esm/components/Title/modules/TitleIconButton/presets/TitleBackIconButton/constants.d.ts

@@ -0,0 +1 @@
+export declare const TITLE_BACK_ICON_BUTTON_DEFAULT_TAG = "button";

package/__inner__/esm/components/Title/modules/TitleIconButton/presets/TitleBackIconButton/constants.js

@@ -0,0 +1 @@
+export var TITLE_BACK_ICON_BUTTON_DEFAULT_TAG = 'button';

package/__inner__/esm/components/Title/modules/TitleIconButton/presets/TitleBackIconButton/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TitleBackIconButton';
+export * from './types';

package/__inner__/esm/components/Title/modules/TitleIconButton/presets/TitleBackIconButton/index.js

@@ -0,0 +1,2 @@
+export * from './TitleBackIconButton';
+export * from './types';

package/__inner__/esm/components/Title/modules/TitleIconButton/presets/TitleBackIconButton/types.d.ts

@@ -0,0 +1,6 @@
+import type { ElementType } from 'react';
+import type { PolymorphicComponentPropsWithoutRef } from '../../../../../../utils/polymorphicComponentWithRef';
+import type { TitleIconButtonBaseProps } from '../../types';
+import type { TITLE_BACK_ICON_BUTTON_DEFAULT_TAG } from './constants';
+export type TitleBackIconButtonBaseProps = Omit<TitleIconButtonBaseProps, 'icon'>;
+export type TitleBackIconButtonProps<As extends ElementType = typeof TITLE_BACK_ICON_BUTTON_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<TitleBackIconButtonBaseProps, As>;

package/__inner__/esm/components/Title/modules/TitleIconButton/presets/TitleBackIconButton/types.js

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

package/__inner__/esm/components/Title/modules/TitleIconButton/presets/index.d.ts

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

package/__inner__/esm/components/Title/modules/TitleIconButton/presets/index.js

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

package/__inner__/esm/components/Title/modules/TitleIconButton/types.js

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

package/__inner__/esm/components/Title/modules/{tag → TitleTag}/TitleTag.d.ts

@@ -1,3 +1,3 @@
-import type { TitleTagBaseProps } from '../../../Title/modules/tag/types';
+import type { TitleTagBaseProps } from './types';
 export declare const cnTitleTag: import("@bem-react/classname").ClassNameFormatter;
 export declare const TitleTag: import("../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<TitleTagBaseProps, "div">;

package/__inner__/esm/components/Title/modules/{tag → TitleTag}/TitleTag.js

@@ -3,6 +3,6 @@ import React from 'react';
 import { cn } from '../../../../utils/classname';
 import { polymorphicComponentWithRef } from '../../../../utils/polymorphicComponentWithRef';
 import { Tag } from '../../../TagNext';
-import { TITLE_TAG_DEFAULT_TAG } from '../../../Title/modules/tag/constants';
+import { TITLE_TAG_DEFAULT_TAG } from './constants';
 export var cnTitleTag = cn('TitleTag');
 export var TitleTag = polymorphicComponentWithRef(function (props, ref) { return (React.createElement(Tag, __assign({ as: TITLE_TAG_DEFAULT_TAG }, props, { ref: ref, size: "xs", variant: "primary", color: "uncolored", className: cnTitleTag('', [props.className]) }))); });

package/__inner__/esm/components/Title/modules/TitleTag/types.js

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

package/__inner__/esm/components/Title/modules/index.d.ts

@@ -1,2 +1,4 @@
-export * from './icon-button';
-export * from './tag';
+export * from './TitleBreadcrumbItem';
+export * from './TitleBreadcrumbs';
+export * from './TitleIconButton';
+export * from './TitleTag';

package/__inner__/esm/components/Title/modules/index.js

@@ -1,2 +1,4 @@
-export * from './icon-button';
-export * from './tag';
+export * from './TitleBreadcrumbItem';
+export * from './TitleBreadcrumbs';
+export * from './TitleIconButton';
+export * from './TitleTag';

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

@@ -2,4 +2,7 @@ import './Toggle.css';
 import React from 'react';
 import type { ToggleProps } from './index';
 export declare const cnToggle: import("@bem-react/classname").ClassNameFormatter;
+/**
+ * @deprecated Компонент устарел. Для замены используйте компонент ToggleNext
+ */
 export declare const Toggle: React.ForwardRefExoticComponent<Omit<ToggleProps, "ref"> & React.RefAttributes<HTMLLabelElement>>;

package/__inner__/esm/components/Toggle/Toggle.js

@@ -5,6 +5,9 @@ import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { FormControlLabel } from '../FormControlLabel';
 export var cnToggle = cn('Toggle');
+/**
+ * @deprecated Компонент устарел. Для замены используйте компонент ToggleNext
+ */
 export var Toggle = forwardRef(function (inProps, ref) {
     var props = useThemeProps({
         props: inProps,

package/__inner__/esm/components/ToggleNext/Toggle.css

@@ -0,0 +1,131 @@
+.ToggleNext {
+  --toggle-ball-translate-x: var(--toggle-switch-ball-padding);
+}
+
+  .ToggleNext_size_s,
+  .ToggleNext_size_xs,
+  .ToggleNext_size_2xs {
+    --toggle-switch-inline-size: 30px;
+    --toggle-switch-block-size: 16px;
+    --toggle-switch-border-radius: 30px;
+    --toggle-switch-ball-size: 14px;
+    --toggle-switch-ball-padding: 1px;
+  }
+
+  .ToggleNext_size_m,
+  .ToggleNext_size_l {
+    --toggle-switch-inline-size: 44px;
+    --toggle-switch-block-size: 24px;
+    --toggle-switch-border-radius: 44px;
+    --toggle-switch-ball-size: 20px;
+    --toggle-switch-ball-padding: 2px;
+  }
+
+  .ToggleNext_size_m {
+    --form-control-carcass-control-block-padding: 0;
+  }
+
+  .ToggleNext_size_l {
+    --form-control-carcass-control-block-padding: var(--spacing-4xs);
+  }
+
+  .ToggleNext_variant_default {
+    --toggle-background-color: var(--color-background-tertiary);
+    --toggle-background-color-checked: var(--color-background-action);
+    --toggle-background-color-hover: var(--color-background-tertiary-hover);
+    --toggle-background-color-hover-checked: var(--color-background-action-hover);
+    --toggle-background-color-active: var(--color-background-tertiary-pressed);
+    --toggle-background-color-active-checked: var(--color-background-action-pressed);
+  }
+
+  .ToggleNext_variant_error {
+    --toggle-background-color: var(--color-background-error-light);
+    --toggle-background-color-checked: var(--color-background-error);
+    --toggle-background-color-hover: var(--color-background-error-light);
+    --toggle-background-color-hover-checked: var(--color-background-error);
+    --toggle-background-color-active: var(--color-background-error-light);
+    --toggle-background-color-active-checked: var(--color-background-error);
+  }
+
+  .ToggleNext_disabled {
+    pointer-events: none;
+  }
+
+  .ToggleNext_disabled .ToggleNext-Switch {
+      background-color: var(--color-background-disabled);
+    }
+
+  .ToggleNext_disabled .ToggleNext-Input:checked + .ToggleNext-Switch {
+      background-color: var(--color-background-action-active-disabled);
+    }
+
+  .ToggleNext-Box {
+    display: inline-flex;
+    position: relative;
+  }
+
+  .ToggleNext-Input {
+    position: absolute;
+    margin: 0;
+    opacity: 0;
+    inset-inline-start: 0;
+    inset-block-start: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    cursor: pointer;
+    z-index: var(--z-index-absolute);
+  }
+
+  .ToggleNext-Input:hover:not(:disabled) + .ToggleNext-Switch {
+      background-color: var(--toggle-background-color-hover);
+    }
+
+  .ToggleNext-Input:hover:checked + .ToggleNext-Switch {
+      background-color: var(--toggle-background-color-hover-checked);
+    }
+
+  .ToggleNext-Input:active:not(:disabled) + .ToggleNext-Switch {
+      background-color: var(--toggle-background-color-active);
+    }
+
+  .ToggleNext-Input:active:checked + .ToggleNext-Switch {
+      background-color: var(--toggle-background-color-active-checked);
+    }
+
+  .ToggleNext-Input:checked + .ToggleNext-Switch {
+      --toggle-ball-translate-x: calc(var(--toggle-switch-inline-size) - var(--toggle-switch-ball-size) - var(--toggle-switch-ball-padding));
+      background-color: var(--toggle-background-color-checked);
+    }
+
+  .ToggleNext-Input:focus + .ToggleNext-Switch {
+      box-shadow: var(--shadow-outline-focused);
+    }
+
+  .ToggleNext-Input:focus:not(:focus-visible) + .ToggleNext-Switch {
+      box-shadow: 0 1px 1px 0 rgb(0 0 0 / 16%) inset;
+    }
+
+  .ToggleNext-Switch {
+    position: relative;
+    cursor: pointer;
+    flex-shrink: 0;
+    inline-size: var(--toggle-switch-inline-size);
+    block-size: var(--toggle-switch-block-size);
+    border-radius: calc(var(--toggle-switch-border-radius) / 2);
+    background-color: var(--toggle-background-color);
+    transition: var(--transition-default);
+    box-shadow: 0 1px 1px 0 rgb(0 0 0 / 16%) inset;
+  }
+
+  .ToggleNext-Switch::before {
+      position: absolute;
+      content: '';
+      background-color: var(--color-background-main);
+      block-size: var(--toggle-switch-ball-size);
+      inline-size: var(--toggle-switch-ball-size);
+      box-shadow: 0 1px 1px 0 rgb(0 0 0 / 16%);
+      transition: var(--transition-default);
+      border-radius: 50%;
+      inset-block-start: 50%;
+      transform: translate(var(--toggle-ball-translate-x), -50%);
+    }

package/__inner__/esm/components/ToggleNext/Toggle.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { ToggleProps } from './types';
+import './Toggle.css';
+export declare const cnToggle: import("@bem-react/classname").ClassNameFormatter;
+export declare const Toggle: React.ForwardRefExoticComponent<Omit<ToggleProps, "ref"> & React.RefAttributes<HTMLLabelElement>>;

package/__inner__/esm/components/ToggleNext/Toggle.js

@@ -0,0 +1,26 @@
+import { __assign, __rest } from "tslib";
+import React, { forwardRef } from 'react';
+import { useThemeProps } from '../../hooks/useThemeProps';
+import { cn } from '../../utils/classname';
+import { FormControlCarcass } from '../FormControlCarcass';
+import { TOGGLE_DEFAULT_MIRRORED, TOGGLE_DEFAULT_ALIGN, TOGGLE_DEFAULT_DISABLED, TOGGLE_DEFAULT_SIZE, TOGGLE_DEFAULT_VARIANT, } from './constants';
+import './Toggle.css';
+export var cnToggle = cn('ToggleNext');
+export var Toggle = forwardRef(function (inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'ToggleNext',
+    });
+    var _a = props.align, align = _a === void 0 ? TOGGLE_DEFAULT_ALIGN : _a, _b = props.mirrored, mirrored = _b === void 0 ? TOGGLE_DEFAULT_MIRRORED : _b, _c = props.size, size = _c === void 0 ? TOGGLE_DEFAULT_SIZE : _c, _d = props.variant, variant = _d === void 0 ? TOGGLE_DEFAULT_VARIANT : _d, className = props.className, label = props.label, carcassProps = props.carcassProps, hintProps = props.hintProps, renderAfter = props.renderAfter, renderAfterProps = props.renderAfterProps, _e = props.disabled, disabled = _e === void 0 ? TOGGLE_DEFAULT_DISABLED : _e, hint = props.hint, checked = props.checked, inputRef = props.inputRef, dataTestid = props.dataTestid, other = __rest(props, ["align", "mirrored", "size", "variant", "className", "label", "carcassProps", "hintProps", "renderAfter", "renderAfterProps", "disabled", "hint", "checked", "inputRef", "dataTestid"]);
+    return (React.createElement(FormControlCarcass, __assign({}, carcassProps, { ref: ref, size: size, align: align, mirrored: !mirrored, hint: hint, label: label, hintProps: hintProps, disabled: disabled, className: cnToggle({
+            disabled: disabled,
+            mirrored: mirrored,
+            variant: variant,
+            size: size,
+        }, [className]), variant: variant, controlProps: {
+            className: cnToggle('Box'),
+        }, renderAfter: renderAfter, renderAfterProps: renderAfterProps, "data-testid": dataTestid }),
+        React.createElement("input", __assign({ type: "checkbox", className: cnToggle('Input'), disabled: disabled, checked: checked }, other, { ref: inputRef })),
+        React.createElement("span", { className: cnToggle('Switch') })));
+});
+Toggle.displayName = 'Toggle';