@ozen-ui/kit 0.53.0 → 0.55.0

package/__inner__/cjs/components/Tabs/components/TabsScrollButton/TabsScrollButton.d.ts

@@ -0,0 +1,13 @@
+import './TabsScrollButton.css';
+import React from 'react';
+import type { TabsScrollButtonProps } from './index';
+export declare const cnScrollButton: import("@bem-react/classname").ClassNameFormatter;
+export declare const iconByDirection: {
+    left: React.ForwardRefExoticComponent<Omit<import("@ozen-ui/icons").IconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+    right: React.ForwardRefExoticComponent<Omit<import("@ozen-ui/icons").IconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+};
+export declare const ariaLabelByDirection: {
+    left: string;
+    right: string;
+};
+export declare const TabsScrollButton: React.ForwardRefExoticComponent<Omit<TabsScrollButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/__inner__/cjs/components/Tabs/components/{ScrollButton/ScrollButton.js → TabsScrollButton/TabsScrollButton.js}

@@ -1,14 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ScrollButton = exports.ariaLabelByDirection = exports.iconByDirection = exports.cnScrollButton = exports.scrollButtonDirectionVariant = void 0;
+exports.TabsScrollButton = exports.ariaLabelByDirection = exports.iconByDirection = exports.cnScrollButton = void 0;
 var tslib_1 = require("tslib");
-require("./ScrollButton.css");
+require("./TabsScrollButton.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var icons_1 = require("@ozen-ui/icons");
 var classname_1 = require("../../../../utils/classname");
 var IconButtonNext_1 = require("../../../IconButtonNext");
-exports.scrollButtonDirectionVariant = ['left', 'right'];
-exports.cnScrollButton = (0, classname_1.cn)('ScrollButton');
+exports.cnScrollButton = (0, classname_1.cn)('TabsScrollButton');
 exports.iconByDirection = {
     left: icons_1.ChevronLeftIcon,
     right: icons_1.ChevronRightIcon,
@@ -17,11 +16,11 @@ exports.ariaLabelByDirection = {
     left: 'Прокрутить вкладки влево',
     right: 'Прокрутить вкладки вправо',
 };
-exports.ScrollButton = react_1.default.forwardRef(function (_a, ref) {
+exports.TabsScrollButton = (0, react_1.forwardRef)(function (_a, ref) {
     var direction = _a.direction, invisible = _a.invisible, className = _a.className, _b = _a.size, size = _b === void 0 ? 'm' : _b, other = tslib_1.__rest(_a, ["direction", "invisible", "className", "size"]);
     var ariaLabel = (0, react_1.useMemo)(function () { return exports.ariaLabelByDirection[direction]; }, [direction]);
     var Icon = (0, react_1.useMemo)(function () { return exports.iconByDirection[direction]; }, [direction]);
     var tabIndex = invisible ? -1 : 0;
     return (react_1.default.createElement(IconButtonNext_1.IconButton, tslib_1.__assign({ variant: "floating", size: size, icon: react_1.default.createElement(Icon, { size: "s" }), className: (0, exports.cnScrollButton)({ invisible: invisible, direction: direction }, [className]), tabIndex: tabIndex, "aria-label": ariaLabel, compressed: true, ref: ref }, other)));
 });
-exports.ScrollButton.displayName = 'ScrollButton';
+exports.TabsScrollButton.displayName = 'TabsScrollButton';

package/__inner__/cjs/components/Tabs/components/TabsScrollButton/index.d.ts

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

package/__inner__/cjs/components/Tabs/components/TabsScrollButton/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./TabsScrollButton"), exports);
+tslib_1.__exportStar(require("./types"), exports);

package/__inner__/cjs/components/Tabs/components/TabsScrollButton/types.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentRef, Ref } from 'react';
+import type { ExtendableComponentPropsWithRef } from '../../../../types/ExtendableComponentPropsWithRef';
+import type { IconButtonProps } from '../../../IconButtonNext';
+import type { TabsSizeVariant } from '../../index';
+export declare const tabScrollButtonDirectionVariant: readonly ["left", "right"];
+export type TabsScrollButtonDirectionVariant = (typeof tabScrollButtonDirectionVariant)[number];
+export type TabsScrollButtonRef = ComponentRef<'button'>;
+export type TabsScrollButtonProps = ExtendableComponentPropsWithRef<Partial<IconButtonProps> & {
+    direction: TabsScrollButtonDirectionVariant;
+    invisible: boolean;
+    children?: never;
+    size?: TabsSizeVariant;
+    ref?: Ref<HTMLButtonElement>;
+}, 'button'>;

package/__inner__/cjs/components/Tabs/components/TabsScrollButton/types.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tabScrollButtonDirectionVariant = void 0;
+exports.tabScrollButtonDirectionVariant = ['left', 'right'];

package/__inner__/cjs/components/Tabs/components/index.d.ts

@@ -1,3 +1,3 @@
 export * from './TabsIndicator';
-export * from './ScrollButton';
+export * from './TabsScrollButton';
 export * from './Tab';

package/__inner__/cjs/components/Tabs/components/index.js

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./TabsIndicator"), exports);
-tslib_1.__exportStar(require("./ScrollButton"), exports);
+tslib_1.__exportStar(require("./TabsScrollButton"), exports);
 tslib_1.__exportStar(require("./Tab"), exports);

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

@@ -1,4 +1,5 @@
-import type { Ref, HTMLAttributes, ReactElement, SyntheticEvent } from 'react';
+import type { Ref, ReactElement, SyntheticEvent, ComponentRef } from 'react';
+import type { ExtendableComponentPropsWithRef } from '../../types/ExtendableComponentPropsWithRef';
 import type { TabProps } from './components';
 export declare const tabsSizeVariant: readonly ["xs", "s", "m", "l"];
 export declare const tabsVariant: readonly ["default", "scrollable"];
@@ -26,7 +27,8 @@ export interface TabsContextValue {
     /** Размер */
     size: TabsSizeVariant;
 }
-export type TabsProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> & {
+export type TabsRef = ComponentRef<'div'>;
+export type TabsProps = ExtendableComponentPropsWithRef<{
     children: ReactElement<TabProps>[] | ReactElement<TabProps>;
     /** Текущее значение */
     value: TabsContextValue['currentValue'];
@@ -40,4 +42,4 @@ export type TabsProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> & {
     ref?: Ref<HTMLDivElement>;
     /** Размер */
     size?: TabsSizeVariant;
-};
+}, 'div'>;

package/__inner__/cjs/components/Tag/Tag.css

@@ -5,6 +5,8 @@
   align-items: center;
   display: inline-flex;
   text-decoration: none;
+  white-space: nowrap;
+  max-inline-size: 100%;
   gap: var(--spacing-3xs);
   padding: var(--tag-padding);
   border-radius: var(--tag-border-radius);
@@ -13,6 +15,9 @@
     background-color var(--transition-default),
     color var(--transition-default);
 }
+.Tag > svg {
+    flex-shrink: 0;
+  }
 .Tag_size_2xs {
       font: var(--typography-text-3xs-font);
       letter-spacing: var(--typography-text-3xs-letter_spacing, 0);

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

@@ -1,15 +1,13 @@
 import './Tag.css';
 import type { ElementType, FC } from 'react';
-import type { IconProps, IconSize } from '@ozen-ui/icons';
+import type { IconProps } from '@ozen-ui/icons';
 import { type PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
 import { type RemoveButtonProps } from './components';
 export declare const tagVariant: readonly ["neutral", "action", "error", "warning", "success", "info"];
 export declare const tagSizeVariant: readonly ["2xs", "xs", "s"];
 export type TagVariant = (typeof tagVariant)[number];
 export type TagSizeVariant = (typeof tagSizeVariant)[number];
-export type TagIcon = FC<IconProps & {
-    size?: IconSize;
-}>;
+export type TagIcon = FC<IconProps>;
 export declare const cnTag: import("@bem-react/classname").ClassNameFormatter;
 type TagBaseProps = {
     /** Текст лейбла внутри тега */

package/__inner__/cjs/components/Tag/Tag.js

@@ -4,6 +4,7 @@ exports.Tag = exports.cnTag = exports.tagSizeVariant = exports.tagVariant = void
 var tslib_1 = require("tslib");
 require("./Tag.css");
 var react_1 = tslib_1.__importDefault(require("react"));
+var logger_1 = require("@ozen-ui/logger");
 var useThemeProps_1 = require("../../hooks/useThemeProps");
 var classname_1 = require("../../utils/classname");
 var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
@@ -22,6 +23,9 @@ exports.cnTag = (0, classname_1.cn)('Tag');
 exports.Tag = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'Tag' });
     var _a = props.size, size = _a === void 0 ? constants_1.TAG_DEFAULT_SIZE : _a, _b = props.as, Tag = _b === void 0 ? constants_1.TAG_DEFAULT_AS : _b, _c = props.variant, variant = _c === void 0 ? constants_1.TAG_DEFAULT_VARIANT : _c, IconLeft = props.iconLeft, IconRight = props.iconRight, label = props.label, className = props.className, onRemove = props.onRemove, other = tslib_1.__rest(props, ["size", "as", "variant", "iconLeft", "iconRight", "label", "className", "onRemove"]);
+    if (process.env.NODE_ENV !== 'production') {
+        (0, logger_1.deprecate)('Компонент «Tag» устарел. Для замены используйте компонент «TagNext».');
+    }
     return (react_1.default.createElement(Tag, tslib_1.__assign({ className: (0, exports.cnTag)({ variant: variant, size: size }, [className]) }, other, { ref: ref }),
         IconLeft && react_1.default.createElement(IconLeft, { size: "s" }),
         react_1.default.createElement("span", { className: (0, exports.cnTag)('Label') }, label),

package/__inner__/cjs/components/Tag/components/RemoveButton/Remove2xsIcon.d.ts

@@ -1,3 +1,2 @@
 import React from 'react';
-import type { IconProps } from '@ozen-ui/icons';
-export declare const Remove2xsIcon: React.FC<IconProps>;
+export declare const Remove2xsIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;

package/__inner__/cjs/components/Tag/components/RemoveButton/RemoveButton.d.ts

@@ -1,9 +1,8 @@
-import type { FC } from 'react';
-import type { IconProps } from '@ozen-ui/icons';
+import React from 'react';
+import type { ExtendableComponentPropsWithRef } from '../../../../types/ExtendableComponentPropsWithRef';
 export declare const removeButtonSizeVariant: readonly ["s", "xs", "2xs"];
 export type RemoveButtonSizeVariant = (typeof removeButtonSizeVariant)[number];
-export interface RemoveButtonProps extends IconProps {
+export type RemoveButtonProps = ExtendableComponentPropsWithRef<{
     size: RemoveButtonSizeVariant;
-    className?: string;
-}
-export declare const RemoveButton: FC<RemoveButtonProps>;
+}, 'svg'>;
+export declare const RemoveButton: React.ForwardRefExoticComponent<Omit<RemoveButtonProps, "ref"> & React.RefAttributes<SVGSVGElement>>;

package/__inner__/cjs/components/Tag/components/RemoveButton/RemoveButton.js

@@ -12,8 +12,8 @@ var icons = {
     '2xs': Remove2xsIcon_1.Remove2xsIcon,
 };
 exports.RemoveButton = (0, react_1.forwardRef)(function (_a, ref) {
-    var size = _a.size, props = tslib_1.__rest(_a, ["size"]);
+    var size = _a.size, other = tslib_1.__rest(_a, ["size"]);
     var Icon = (0, react_1.useMemo)(function () { return icons[size]; }, [size]);
-    return react_1.default.createElement(Icon, tslib_1.__assign({}, props, { ref: ref }));
+    return react_1.default.createElement(Icon, tslib_1.__assign({}, other, { ref: ref }));
 });
 exports.RemoveButton.displayName = 'RemoveButton';

package/__inner__/cjs/components/Tag/components/RemoveButton/RemoveSIcon.d.ts

@@ -1,3 +1,2 @@
 import React from 'react';
-import type { IconProps } from '@ozen-ui/icons';
-export declare const RemoveSIcon: React.FC<IconProps>;
+export declare const RemoveSIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;

package/__inner__/cjs/components/TagNext/Tag.css

@@ -0,0 +1,244 @@
+/* stylelint-disable */
+.TagNext {
+  border: none;
+  outline: none;
+  align-items: center;
+  display: inline-flex;
+  text-decoration: none;
+  white-space: nowrap;
+  max-inline-size: 100%;
+  gap: var(--tag-gap);
+  padding: var(--tag-padding);
+  border-radius: var(--tag-border-radius);
+  transition:
+    box-shadow var(--transition-default),
+    background-color var(--transition-default),
+    color var(--transition-default);
+}
+.TagNext > svg {
+    flex-shrink: 0;
+  }
+.TagNext_size_2xs {
+      font: var(--typography-text-3xs-font);
+      letter-spacing: var(--typography-text-3xs-letter_spacing, 0);
+      text-transform: var(--typography-text-3xs-text_transform, none);
+
+      --tag-padding: 0 4px;
+      --tag-gap: var(--spacing-3xs);
+      --tag-border-radius: var(--border-radius-s);
+    }
+.TagNext_size_xs {
+      font: var(--typography-text-xs-font);
+      letter-spacing: var(--typography-text-xs-letter_spacing, 0);
+      text-transform: var(--typography-text-xs-text_transform, none);
+
+      --tag-padding: 4px 8px;
+      --tag-gap: var(--spacing-3xs);
+      --tag-border-radius: var(--border-radius-s);
+    }
+.TagNext_size_s {
+      font: var(--typography-text-s-font);
+      letter-spacing: var(--typography-text-s-letter_spacing, 0);
+      text-transform: var(--typography-text-s-text_transform, none);
+
+      --tag-padding: 6px 12px;
+      --tag-gap: var(--spacing-3xs);
+      --tag-border-radius: var(--border-radius-m);
+    }
+.TagNext_size_m {
+      font: var(--typography-text-m-font);
+      letter-spacing: var(--typography-text-m-letter_spacing, 0);
+      text-transform: var(--typography-text-m-text_transform, none);
+
+      --tag-padding: 6px 12px;
+      --tag-gap: var(--spacing-2xs);
+      --tag-border-radius: var(--border-radius-m);
+    }
+.TagNext_size_l {
+      font: var(--typography-text-l-font);
+      letter-spacing: var(--typography-text-l-letter_spacing, 0);
+      text-transform: var(--typography-text-l-text_transform, none);
+
+      --tag-padding: 6px 12px;
+      --tag-gap: var(--spacing-2xs);
+      --tag-border-radius: var(--border-radius-m);
+    }
+.TagNext_interactive:focus:not(:focus-visible) {
+      box-shadow: none;
+    }
+.TagNext_interactive:focus {
+      box-shadow: var(--shadow-outline-focused);
+    }
+/** primary & neutral */
+.TagNext_variant_primary.TagNext_color_neutral {
+    background-color: var(--color-background-action-secondary);
+    color: var(--color-content-action-on);
+  }
+.TagNext_variant_primary.TagNext_color_neutral.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_primary.TagNext_color_neutral.TagNext_interactive:hover {
+      background-color: var(--color-background-action-secondary-hover);
+    }
+.TagNext_variant_primary.TagNext_color_neutral.TagNext_interactive:active {
+      background-color: var(--color-background-action-secondary-pressed);
+    }
+/** primary & action */
+.TagNext_variant_primary.TagNext_color_action {
+    background-color: var(--color-background-action);
+    color: var(--color-content-action-on);
+  }
+.TagNext_variant_primary.TagNext_color_action.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_primary.TagNext_color_action.TagNext_interactive:hover {
+      background-color: var(--color-background-action-hover);
+    }
+.TagNext_variant_primary.TagNext_color_action.TagNext_interactive:active {
+      background-color: var(--color-background-action-pressed);
+    }
+/** primary & error */
+.TagNext_variant_primary.TagNext_color_error {
+    background-color: var(--color-background-error);
+    color: var(--color-content-action-on);
+  }
+.TagNext_variant_primary.TagNext_color_error.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_primary.TagNext_color_error.TagNext_interactive:hover {
+      background-color: var(--color-background-error-hover);
+    }
+.TagNext_variant_primary.TagNext_color_error.TagNext_interactive:active {
+      background-color: var(--color-background-error-pressed);
+    }
+/** primary & warning */
+.TagNext_variant_primary.TagNext_color_warning {
+    background-color: var(--color-background-warning);
+    color: var(--color-content-action-on);
+  }
+.TagNext_variant_primary.TagNext_color_warning.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_primary.TagNext_color_warning.TagNext_interactive:hover {
+      background-color: var(--color-background-warning-hover);
+    }
+.TagNext_variant_primary.TagNext_color_warning.TagNext_interactive:active {
+      background-color: var(--color-background-warning-pressed);
+    }
+/** primary & success */
+.TagNext_variant_primary.TagNext_color_success {
+    background-color: var(--color-background-success);
+    color: var(--color-content-action-on);
+  }
+.TagNext_variant_primary.TagNext_color_success.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_primary.TagNext_color_success.TagNext_interactive:hover {
+      background-color: var(--color-background-success-hover);
+    }
+.TagNext_variant_primary.TagNext_color_success.TagNext_interactive:active {
+      background-color: var(--color-background-success-pressed);
+    }
+/** primary & info */
+.TagNext_variant_primary.TagNext_color_info {
+    background-color: var(--color-background-info);
+    color: var(--color-content-action-on);
+  }
+.TagNext_variant_primary.TagNext_color_info.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_primary.TagNext_color_info.TagNext_interactive:hover {
+      background-color: var(--color-background-info-hover);
+    }
+.TagNext_variant_primary.TagNext_color_info.TagNext_interactive:active {
+      background-color: var(--color-background-info-pressed);
+    }
+/** secondary & neutral */
+.TagNext_variant_secondary.TagNext_color_neutral {
+    background-color: var(--color-background-secondary);
+    color: var(--color-content-primary);
+  }
+.TagNext_variant_secondary.TagNext_color_neutral.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_secondary.TagNext_color_neutral.TagNext_interactive:hover {
+      background-color: var(--color-background-secondary-hover);
+    }
+.TagNext_variant_secondary.TagNext_color_neutral.TagNext_interactive:active {
+      background-color: var(--color-background-secondary-pressed);
+    }
+/** secondary & action */
+.TagNext_variant_secondary.TagNext_color_action {
+    background-color: var(--color-background-action-light);
+    color: var(--color-content-action-dark);
+  }
+.TagNext_variant_secondary.TagNext_color_action.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_secondary.TagNext_color_action.TagNext_interactive:hover {
+      background-color: var(--color-background-action-light-hover);
+    }
+.TagNext_variant_secondary.TagNext_color_action.TagNext_interactive:active {
+      background-color: var(--color-background-action-light-pressed);
+    }
+/** secondary & error */
+.TagNext_variant_secondary.TagNext_color_error {
+    background-color: var(--color-background-error-light);
+    color: var(--color-content-error-dark);
+  }
+.TagNext_variant_secondary.TagNext_color_error.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_secondary.TagNext_color_error.TagNext_interactive:hover {
+      background-color: var(--color-background-error-light-hover);
+    }
+.TagNext_variant_secondary.TagNext_color_error.TagNext_interactive:active {
+      background-color: var(--color-background-error-light-pressed);
+    }
+/** secondary & warning */
+.TagNext_variant_secondary.TagNext_color_warning {
+    background-color: var(--color-background-warning-light);
+    color: var(--color-content-warning-dark);
+  }
+.TagNext_variant_secondary.TagNext_color_warning.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_secondary.TagNext_color_warning.TagNext_interactive:hover {
+      background-color: var(--color-background-warning-light-hover);
+    }
+.TagNext_variant_secondary.TagNext_color_warning.TagNext_interactive:active {
+      background-color: var(--color-background-warning-light-pressed);
+    }
+/** secondary & success */
+.TagNext_variant_secondary.TagNext_color_success {
+    background-color: var(--color-background-success-light);
+    color: var(--color-content-success-dark);
+  }
+.TagNext_variant_secondary.TagNext_color_success.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_secondary.TagNext_color_success.TagNext_interactive:hover {
+      background-color: var(--color-background-success-light-hover);
+    }
+.TagNext_variant_secondary.TagNext_color_success.TagNext_interactive:active {
+      background-color: var(--color-background-success-light-pressed);
+    }
+/** secondary & info */
+.TagNext_variant_secondary.TagNext_color_info {
+    background-color: var(--color-background-info-light);
+    color: var(--color-content-info-dark);
+  }
+.TagNext_variant_secondary.TagNext_color_info.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_secondary.TagNext_color_info.TagNext_interactive:hover {
+      background-color: var(--color-background-info-light-hover);
+    }
+.TagNext_variant_secondary.TagNext_color_info.TagNext_interactive:active {
+      background-color: var(--color-background-info-light-pressed);
+    }
+.TagNext-Label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }

package/__inner__/cjs/components/TagNext/Tag.d.ts

@@ -0,0 +1,4 @@
+import './Tag.css';
+import type { TagBaseProps } from './index';
+export declare const cnTag: import("@bem-react/classname").ClassNameFormatter;
+export declare const Tag: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<TagBaseProps, "div">;

package/__inner__/cjs/components/TagNext/Tag.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tag = exports.cnTag = void 0;
+var tslib_1 = require("tslib");
+require("./Tag.css");
+var react_1 = tslib_1.__importDefault(require("react"));
+var useThemeProps_1 = require("../../hooks/useThemeProps");
+var classname_1 = require("../../utils/classname");
+var getIconSizeToFormElement_1 = require("../../utils/getIconSizeToFormElement");
+var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
+var renderContent_1 = require("../../utils/renderContent");
+var constants_1 = require("./constants");
+exports.cnTag = (0, classname_1.cn)('TagNext');
+exports.Tag = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'TagNext' });
+    var _a = props.color, color = _a === void 0 ? constants_1.TAG_DEFAULT_COLOR : _a, _b = props.variant, variant = _b === void 0 ? constants_1.TAG_DEFAULT_VARIANT : _b, _c = props.size, size = _c === void 0 ? constants_1.TAG_DEFAULT_SIZE : _c, _d = props.as, Tag = _d === void 0 ? constants_1.TAG_DEFAULT_AS : _d, interactive = props.interactive, iconLeft = props.iconLeft, iconRight = props.iconRight, label = props.label, className = props.className, other = tslib_1.__rest(props, ["color", "variant", "size", "as", "interactive", "iconLeft", "iconRight", "label", "className"]);
+    var renderIcon = function (content) {
+        return (0, renderContent_1.renderContent)({
+            content: content,
+            props: {
+                size: (0, getIconSizeToFormElement_1.getIconSizeToFormElement)(size),
+            },
+        });
+    };
+    return (react_1.default.createElement(Tag, tslib_1.__assign({ className: (0, exports.cnTag)({ variant: variant, color: color, size: size, interactive: interactive }, [className]) }, other, { ref: ref }),
+        renderIcon(iconLeft),
+        react_1.default.createElement("span", { className: (0, exports.cnTag)('Label') }, label),
+        renderIcon(iconRight)));
+});
+exports.Tag.displayName = 'Tag';

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

@@ -0,0 +1,4 @@
+export declare const TAG_DEFAULT_AS = "div";
+export declare const TAG_DEFAULT_VARIANT = "secondary";
+export declare const TAG_DEFAULT_COLOR = "action";
+export declare const TAG_DEFAULT_SIZE = "m";

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TAG_DEFAULT_SIZE = exports.TAG_DEFAULT_COLOR = exports.TAG_DEFAULT_VARIANT = exports.TAG_DEFAULT_AS = void 0;
+exports.TAG_DEFAULT_AS = 'div';
+exports.TAG_DEFAULT_VARIANT = 'secondary';
+exports.TAG_DEFAULT_COLOR = 'action';
+exports.TAG_DEFAULT_SIZE = 'm';

package/__inner__/cjs/components/TagNext/index.d.ts

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

package/__inner__/cjs/components/{DatePicker/utils/matchCalendarSizeToFormElement → TagNext}/index.js

@@ -1,4 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./matchCalendarSizeToFormElement"), exports);
+tslib_1.__exportStar(require("./Tag"), exports);
+tslib_1.__exportStar(require("./types"), exports);

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

@@ -0,0 +1,27 @@
+import type { ElementType } from 'react';
+import type { IconProps } from '@ozen-ui/icons';
+import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+import type { RenderContentType } from '../../utils/renderContent';
+export declare const tagVariant: readonly ["primary", "secondary"];
+export declare const tagColorVariant: readonly ["neutral", "action", "error", "warning", "success", "info"];
+export type TagVariant = (typeof tagVariant)[number];
+export type TagColor = (typeof tagColorVariant)[number];
+export type TagIcon = RenderContentType<IconProps>['content'];
+export type TagBaseProps = {
+    /** Текст лейбла внутри тега */
+    label: string;
+    /** Размер */
+    size?: FormElementSizeVariant;
+    /** Вариант компонента */
+    variant?: TagVariant;
+    /** Цвет компонента */
+    color?: TagColor;
+    /** Если {true} делает компонент интерактивным */
+    interactive?: boolean;
+    /** Иконка слева */
+    iconLeft?: TagIcon;
+    /** Иконка справа */
+    iconRight?: TagIcon;
+};
+export type TagProps<As extends ElementType = 'div'> = PolymorphicComponentPropsWithoutRef<TagBaseProps, As>;

package/__inner__/cjs/components/TagNext/types.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tagColorVariant = exports.tagVariant = void 0;
+exports.tagVariant = ['primary', 'secondary'];
+exports.tagColorVariant = [
+    'neutral',
+    'action',
+    'error',
+    'warning',
+    'success',
+    'info',
+];

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

@@ -1,4 +1,5 @@
 import type { ComponentPropsWithRef, Ref } from 'react';
+import type { ExtendableComponentPropsWithRef } from '../../types/ExtendableComponentPropsWithRef';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
 import type { FIELD_CONTROL_DEFAULT_TAG } from '../FieldControl';
 import type { FieldHintProps } from '../FieldHint';
@@ -18,8 +19,10 @@ type TextareaPropsDeprecated = {
      * */
     textareaRef?: Ref<HTMLTextAreaElement>;
 };
-type TextareaElement = ComponentPropsWithRef<'textarea'>;
-export type TextareaProps = Omit<ComponentPropsWithRef<typeof FIELD_CONTROL_DEFAULT_TAG>, 'size' | 'onChange'> & {
+type TextareaElement = ComponentPropsWithRef<'textarea'> & {
+    'data-testid'?: string;
+};
+type TextareaBaseProps = {
     /** Атрибут id для элемента input */
     id?: string;
     /** Атрибут name для элемента input */
@@ -42,6 +45,8 @@ export type TextareaProps = Omit<ComponentPropsWithRef<typeof FIELD_CONTROL_DEFA
     disabled?: boolean;
     /** Если {true} делает элемент обязательным к заполнению */
     required?: boolean;
+    /** Если {true} отключает обводку */
+    disableStroke?: boolean;
     /** Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. */
     maxLength?: number;
     /** Количество колонок */
@@ -57,14 +62,13 @@ export type TextareaProps = Omit<ComponentPropsWithRef<typeof FIELD_CONTROL_DEFA
     /** Обработчик события на изменение значения поля */
     onChange?: TextareaElement['onChange'];
     /** Свойства элемента textarea */
-    textareaProps?: TextareaElement & {
-        'data-testid'?: string;
-    };
+    textareaProps?: TextareaElement;
     /** Свойства FieldLabel */
     labelProps?: FieldLabelProps;
     /** Cвойства FieldHint */
     hintProps?: Omit<FieldHintProps, 'children'>;
     /** data-атрибут для тестирования */
     'data-testid'?: string;
-} & TextareaPropsDeprecated;
+};
+export type TextareaProps = ExtendableComponentPropsWithRef<TextareaBaseProps & TextareaPropsDeprecated, typeof FIELD_CONTROL_DEFAULT_TAG>;
 export {};

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

@@ -1,16 +1,4 @@
 import './ThemeProvider.css';
-import type { ComponentRef, ElementType } from 'react';
-import React from 'react';
-import { type PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
-import type { Theme } from './types';
-export declare const THEME_DEFAULT_TAG = "div";
-export type ThemeProviderBaseProps = {
-    /** Содержимое компонента */
-    children: React.ReactNode;
-    /** Тема */
-    theme?: Theme;
-};
+import type { ThemeProviderBaseProps } from './index';
 export declare const cnThemeProvider: import("@bem-react/classname").ClassNameFormatter;
-export type ThemeProviderProps<As extends ElementType = typeof THEME_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<ThemeProviderBaseProps, As>;
-export type ThemeProviderRef = ComponentRef<typeof THEME_DEFAULT_TAG>;
 export declare const ThemeProvider: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<ThemeProviderBaseProps, "div">;