@ozen-ui/kit 0.63.1 → 0.65.0

package/ChipGroup/package.json

@@ -0,0 +1,5 @@
+{
+	"main": "../__inner__/cjs/components/ChipGroup/index.js",
+	"module": "../__inner__/esm/components/ChipGroup/index.js",
+	"types": "../__inner__/esm/components/ChipGroup/index.d.ts"
+}

package/InputOTP/package.json

@@ -0,0 +1,5 @@
+{
+	"main": "../__inner__/cjs/components/InputOTP/index.js",
+	"module": "../__inner__/esm/components/InputOTP/index.js",
+	"types": "../__inner__/esm/components/InputOTP/index.d.ts"
+}

package/Title/package.json

@@ -0,0 +1,5 @@
+{
+	"main": "../__inner__/cjs/components/Title/index.js",
+	"module": "../__inner__/esm/components/Title/index.js",
+	"types": "../__inner__/esm/components/Title/index.d.ts"
+}

package/__inner__/cjs/components/ChipGroup/ChipGroup.css

@@ -0,0 +1,16 @@
+.ChipGroup {
+  display: flex;
+  flex-direction: column;
+}
+
+  .ChipGroup .FormGroup {
+    align-items: flex-start;
+  }
+
+  .ChipGroup .FormGroup_size_xs, .ChipGroup .FormGroup_size_s {
+        --form-group-gap: var(--spacing-xs);
+      }
+
+  .ChipGroup .FormGroup_size_m, .ChipGroup .FormGroup_size_l {
+        --form-group-gap: var(--spacing-s);
+      }

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

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

package/__inner__/cjs/components/ChipGroup/ChipGroup.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChipGroup = exports.cnChipGroup = void 0;
+var tslib_1 = require("tslib");
+require("./ChipGroup.css");
+var react_1 = tslib_1.__importDefault(require("react"));
+var useControlled_1 = require("../../hooks/useControlled");
+var useThemeProps_1 = require("../../hooks/useThemeProps");
+var classname_1 = require("../../utils/classname");
+var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
+var FormGroup_1 = require("../FormGroup");
+var FormTitle_1 = require("../FormTitle");
+var ChipGroupContext_1 = require("./ChipGroupContext");
+var constants_1 = require("./constants");
+exports.cnChipGroup = (0, classname_1.cn)('ChipGroup');
+exports.ChipGroup = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({
+        props: inProps,
+        name: 'ChipGroup',
+    });
+    var _a = props.direction, direction = _a === void 0 ? constants_1.CHIP_GROUP_DEFAULT_DIRECTION : _a, _b = props.size, size = _b === void 0 ? constants_1.CHIP_GROUP_DEFAULT_SIZE : _b, _c = props.as, Tag = _c === void 0 ? constants_1.CHIP_GROUP_DEFAULT_AS : _c, color = props.color, title = props.title, className = props.className, children = props.children, valueProp = props.value, _d = props.defaultValue, defaultValue = _d === void 0 ? [] : _d, onChange = props.onChange, disabled = props.disabled, titleProps = props.titleProps, groupProps = props.groupProps, other = tslib_1.__rest(props, ["direction", "size", "as", "color", "title", "className", "children", "value", "defaultValue", "onChange", "disabled", "titleProps", "groupProps"]);
+    var _e = tslib_1.__read((0, useControlled_1.useControlled)({
+        value: valueProp,
+        defaultValue: defaultValue,
+        name: 'ChipGroup',
+        state: 'value',
+    }), 2), valueState = _e[0], setValueState = _e[1];
+    var onClick = function (event, payload) {
+        var itemValue = payload.value;
+        if (itemValue === undefined) {
+            return;
+        }
+        var requiredValueState = valueState !== null && valueState !== void 0 ? valueState : [];
+        var isValueAlreadyChecked = requiredValueState.includes(itemValue);
+        var value = isValueAlreadyChecked
+            ? requiredValueState.filter(function (item) { return item !== itemValue; })
+            : tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(requiredValueState), false), [itemValue], false);
+        setValueState(value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
+    };
+    return (react_1.default.createElement(Tag, tslib_1.__assign({ className: (0, exports.cnChipGroup)({ size: size }, [className]), role: "group" }, other, { ref: ref }),
+        react_1.default.createElement(ChipGroupContext_1.ChipGroupContext.Provider, { value: {
+                value: valueState,
+                onClick: onClick,
+                size: size,
+                disabled: disabled,
+                color: color,
+            } },
+            title && (react_1.default.createElement(FormTitle_1.FormTitle, tslib_1.__assign({ size: size }, titleProps), title)),
+            react_1.default.createElement(FormGroup_1.FormGroup, tslib_1.__assign({ direction: direction, size: size }, groupProps), children))));
+});
+exports.ChipGroup.displayName = 'ChipGroup';

package/__inner__/cjs/components/ChipGroup/ChipGroupContext.d.ts

@@ -0,0 +1,10 @@
+import type { ChipColorVariant, ChipOnClick, ChipSizeVariant } from '../ChipNext';
+import type { ChipGroupValue } from './types';
+export type ChipGroupContextValue = {
+    onClick: ChipOnClick;
+    disabled?: boolean;
+    value?: ChipGroupValue;
+    size?: ChipSizeVariant;
+    color?: ChipColorVariant;
+};
+export declare const ChipGroupContext: import("react").Context<ChipGroupContextValue | undefined>;

package/__inner__/cjs/components/ChipGroup/ChipGroupContext.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChipGroupContext = void 0;
+var react_1 = require("react");
+exports.ChipGroupContext = (0, react_1.createContext)(undefined);

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

@@ -0,0 +1,5 @@
+import type { ChipSizeVariant } from '../ChipNext';
+import type { FormGroupDirectionVariant } from '../FormGroup';
+export declare const CHIP_GROUP_DEFAULT_DIRECTION: FormGroupDirectionVariant;
+export declare const CHIP_GROUP_DEFAULT_SIZE: ChipSizeVariant;
+export declare const CHIP_GROUP_DEFAULT_AS = "div";

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CHIP_GROUP_DEFAULT_AS = exports.CHIP_GROUP_DEFAULT_SIZE = exports.CHIP_GROUP_DEFAULT_DIRECTION = void 0;
+exports.CHIP_GROUP_DEFAULT_DIRECTION = 'row';
+exports.CHIP_GROUP_DEFAULT_SIZE = 'm';
+exports.CHIP_GROUP_DEFAULT_AS = 'div';

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

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

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

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

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

@@ -0,0 +1,33 @@
+import type { ElementType, MouseEvent, ReactNode } from 'react';
+import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+import type { ChipColorVariant, ChipSizeVariant } from '../ChipNext';
+import type { FormGroupDirectionVariant, FormGroupProps } from '../FormGroup';
+import type { FormTitleProps } from '../FormTitle';
+import type { CHIP_GROUP_DEFAULT_AS } from './constants';
+export type ChipGroupValue = string[];
+export type ChipGroupOnChange = (value: ChipGroupValue, event: MouseEvent<HTMLElement>) => void;
+export type ChipGroupBaseProps = {
+    /** Значение по умолчанию (неконтролируемое состояние) */
+    defaultValue?: ChipGroupValue;
+    /** Текущее значение */
+    value?: ChipGroupValue;
+    /** Вариант представления компонента */
+    color?: ChipColorVariant;
+    /** Размер */
+    size?: ChipSizeVariant;
+    /** Содержимое компонента */
+    children?: ReactNode;
+    /** Направление */
+    direction?: FormGroupDirectionVariant;
+    /** Событие изменения состояния */
+    onChange?: ChipGroupOnChange;
+    /** Если `true` делает элементы неактивными */
+    disabled?: boolean;
+    /** Идентификатор компонента для тестов */
+    'data-testid'?: string;
+    /** Свойства FormTitle */
+    titleProps?: FormTitleProps;
+    /** Свойства FormGroup */
+    groupProps?: FormGroupProps;
+};
+export type ChipGroupProps<As extends ElementType = typeof CHIP_GROUP_DEFAULT_AS> = PolymorphicComponentPropsWithoutRef<ChipGroupBaseProps, As>;

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

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

package/__inner__/cjs/components/ChipNext/Chip.css

@@ -1,5 +1,6 @@
 /* stylelint-disable */
 .ChipNext {
+  --chip-outline: var(--shadow-outline-focused);
   --chip-border-radius: 24px;
   --chip-text-wrap: nowrap;
   background-color: var(--chip-bg-color);
@@ -72,17 +73,53 @@
       --chip-padding-x: var(--spacing-m);
     }
 .ChipNext_color_primary {
-      --chip-bg-color: var(--color-background-action-light);
-      --chip-bg-color-hover: var(--color-background-action-light-hover);
-      --chip-bg-color-active: var(--color-background-action-light-pressed);
-      --chip-text-color: var(--color-content-action-dark);
-    }
+    --chip-bg-color: var(--color-background-action-light);
+    --chip-bg-color-hover: var(--color-background-action-light-hover);
+    --chip-bg-color-active: var(--color-background-action-light-pressed);
+    --chip-text-color: var(--color-content-action-dark);
+  }
 .ChipNext_color_secondary {
-      --chip-bg-color: var(--color-background-secondary);
-      --chip-bg-color-hover: var(--color-background-secondary-hover);
-      --chip-bg-color-active: var(--color-background-secondary-pressed);
-      --chip-text-color: var(--color-content-primary);
-    }
+    --chip-bg-color: var(--color-background-secondary);
+    --chip-bg-color-hover: var(--color-background-secondary-hover);
+    --chip-bg-color-active: var(--color-background-secondary-pressed);
+    --chip-text-color: var(--color-content-primary);
+  }
+.ChipNext_color_main {
+    --chip-bg-color: var(--color-background-main);
+    --chip-bg-color-hover: var(--color-background-main-hover);
+    --chip-bg-color-active: var(--color-background-main-pressed);
+    --chip-text-color: var(--color-content-primary);
+  }
+.ChipNext_color_overlay {
+    --chip-bg-color: var(--color-background-overlay);
+    --chip-bg-color-hover: var(--color-background-overlay);
+    --chip-bg-color-active: var(--color-background-overlay);
+    --chip-text-color: var(--color-content-action-on);
+  }
+.ChipNext_color_primary.ChipNext_checked {
+    --chip-bg-color: var(--color-background-action);
+    --chip-bg-color-hover: var(--color-background-action);
+    --chip-bg-color-active: var(--color-background-action);
+    --chip-text-color: var(--color-content-action-on);
+  }
+.ChipNext_color_primary.ChipNext_checked.ChipNext_disabled {
+    --chip-bg-color: var(--color-background-action-active-disabled);
+    --chip-bg-color-hover: var(--color-background-action-active-disabled);
+    --chip-bg-color-active: var(--color-background-action-active-disabled);
+    --chip-text-color: var(--color-content-primary-inverse);
+  }
+.ChipNext_color_secondary.ChipNext_checked, .ChipNext_color_main.ChipNext_checked, .ChipNext_color_overlay.ChipNext_checked {
+    --chip-bg-color: var(--color-background-action-secondary);
+    --chip-bg-color-hover: var(--color-background-action-secondary);
+    --chip-bg-color-active: var(--color-background-action-secondary);
+    --chip-text-color: var(--color-content-action-on);
+  }
+.ChipNext_color_secondary.ChipNext_checked.ChipNext_disabled, .ChipNext_color_main.ChipNext_checked.ChipNext_disabled, .ChipNext_color_overlay.ChipNext_checked.ChipNext_disabled {
+    --chip-bg-color: var(--color-background-action-secondary-active-disabled);
+    --chip-bg-color-hover: var(--color-background-action-secondary-active-disabled);
+    --chip-bg-color-active: var(--color-background-action-secondary-active-disabled);
+    --chip-text-color: var(--color-content-primary-inverse);
+  }
 .ChipNext:hover {
     --chip-bg-color: var(--chip-bg-color-hover);
   }
@@ -90,19 +127,15 @@
     --chip-bg-color: var(--chip-bg-color-active);
   }
 .ChipNext:focus {
-    box-shadow: var(--shadow-outline-focused);
+    box-shadow: var(--chip-outline);
   }
 .ChipNext:focus:not(:focus-visible) {
     box-shadow: none;
   }
-.ChipNext_checked,
-  .ChipNext_checked:hover,
-  .ChipNext_checked:active {
-    --chip-bg-color: var(--color-background-action);
-    --chip-text-color: var(--color-content-action-on);
-  }
 .ChipNext_disabled {
     --chip-bg-color: var(--color-background-disabled);
+    --chip-bg-color-hover: var(--color-background-disabled);
+    --chip-bg-color-active: var(--color-background-disabled);
     --chip-text-color: var(--color-content-disabled);
     pointer-events: none;
   }

package/__inner__/cjs/components/ChipNext/Chip.js

@@ -3,19 +3,44 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Chip = exports.cnChip = void 0;
 var tslib_1 = require("tslib");
 require("./Chip.css");
-var react_1 = tslib_1.__importDefault(require("react"));
+var react_1 = tslib_1.__importStar(require("react"));
+var logger_1 = require("@ozen-ui/logger");
+var environment_1 = require("../../constants/environment");
 var useControlled_1 = require("../../hooks/useControlled");
 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 ChipGroupContext_1 = require("../ChipGroup/ChipGroupContext");
 var constants_1 = require("./constants");
 exports.cnChip = (0, classname_1.cn)('ChipNext');
 exports.Chip = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
-    var _a = (0, useThemeProps_1.useThemeProps)({ name: 'ChipNext', props: inProps }), _b = _a.size, size = _b === void 0 ? constants_1.CHIP_DEFAULT_SIZE : _b, _c = _a.color, color = _c === void 0 ? constants_1.CHIP_DEFAULT_VARIANT : _c, _d = _a.disabled, disabled = _d === void 0 ? constants_1.CHIP_DEFAULT_DISABLED : _d, iconLeft = _a.iconLeft, iconRight = _a.iconRight, multiline = _a.multiline, className = _a.className, children = _a.children, onClick = _a.onClick, checkedProp = _a.checked, _e = _a.as, Tag = _e === void 0 ? constants_1.CHIP_DEFAULT_TAG : _e, dataTestId = _a["data-testid"], other = tslib_1.__rest(_a, ["size", "color", "disabled", "iconLeft", "iconRight", "multiline", "className", "children", "onClick", "checked", "as", 'data-testid']);
+    var _a = (0, useThemeProps_1.useThemeProps)({ name: 'ChipNext', props: inProps }), _b = _a.size, sizeProp = _b === void 0 ? constants_1.CHIP_DEFAULT_SIZE : _b, _c = _a.color, colorProp = _c === void 0 ? constants_1.CHIP_DEFAULT_VARIANT : _c, _d = _a.disabled, disabledProp = _d === void 0 ? constants_1.CHIP_DEFAULT_DISABLED : _d, iconLeft = _a.iconLeft, iconRight = _a.iconRight, multiline = _a.multiline, className = _a.className, children = _a.children, onClick = _a.onClick, checkedProp = _a.checked, _e = _a.as, Tag = _e === void 0 ? constants_1.CHIP_DEFAULT_TAG : _e, value = _a.value, dataTestId = _a["data-testid"], other = tslib_1.__rest(_a, ["size", "color", "disabled", "iconLeft", "iconRight", "multiline", "className", "children", "onClick", "checked", "as", "value", 'data-testid']);
+    var checked = checkedProp;
+    var size = sizeProp;
+    var disabled = disabledProp;
+    var color = colorProp;
+    var chipGroup = (0, react_1.useContext)(ChipGroupContext_1.ChipGroupContext);
+    if (chipGroup) {
+        if (environment_1.IS_DEV && value === undefined) {
+            logger_1.logger.error('Отсутствует параметр "value" для Chip, находящегося в ChipGroup.');
+        }
+        if (checked === undefined && chipGroup.value) {
+            checked = chipGroup === null || chipGroup === void 0 ? void 0 : chipGroup.value.includes(value);
+        }
+        if (inProps.size === undefined && chipGroup.size) {
+            size = chipGroup.size;
+        }
+        if (inProps.disabled === undefined && chipGroup.disabled !== undefined) {
+            disabled = chipGroup.disabled;
+        }
+        if (inProps.color === undefined && chipGroup.color) {
+            color = chipGroup.color;
+        }
+    }
     var _f = tslib_1.__read((0, useControlled_1.useControlled)({
-        value: checkedProp,
+        value: checked,
         defaultValue: false,
         name: 'ChipNext',
         state: 'open',
@@ -24,8 +49,10 @@ exports.Chip = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(fu
         if (disabled) {
             return;
         }
-        setCheckedState(!checkedState);
-        onClick === null || onClick === void 0 ? void 0 : onClick(event, { checked: !checkedState });
+        var newCheckedState = !checkedState;
+        setCheckedState(newCheckedState);
+        onClick === null || onClick === void 0 ? void 0 : onClick(event, { checked: newCheckedState, value: value });
+        chipGroup === null || chipGroup === void 0 ? void 0 : chipGroup.onClick(event, { checked: newCheckedState, value: value });
     };
     var renderIcon = function (content) {
         return (0, renderContent_1.renderContent)({

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

@@ -3,11 +3,15 @@ import type { IconProps } from '@ozen-ui/icons';
 import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
 import type { RenderContentType } from '../../utils/renderContent';
 import type { CHIP_DEFAULT_TAG } from './constants';
+export declare const chipColorVariant: readonly ["primary", "secondary", "main", "overlay"];
+export type ChipColorVariant = (typeof chipColorVariant)[number];
 export declare const chipSizeVariant: readonly ["xs", "s", "m", "l"];
-export declare const chipColorVariant: readonly ["primary", "secondary"];
 export type ChipSizeVariant = (typeof chipSizeVariant)[number];
-export type ChipColorVariant = (typeof chipColorVariant)[number];
 export type ChipIcon = RenderContentType<IconProps>['content'];
+export type ChipOnClick = (event: MouseEvent<HTMLElement>, payload: {
+    checked: boolean;
+    value: string | undefined;
+}) => void;
 export type ChipBaseProps = {
     /** Размер компонента */
     size?: ChipSizeVariant;
@@ -18,9 +22,9 @@ export type ChipBaseProps = {
     /** Если `true` делает элемент выбранным */
     checked?: boolean;
     /** Обработчик нажатия */
-    onClick?: (e: MouseEvent<HTMLElement>, payload: {
-        checked: boolean;
-    }) => void;
+    onClick?: ChipOnClick;
+    /** Значение chip */
+    value?: string;
     /** Иконка слева */
     iconLeft?: ChipIcon;
     /** Иконка справа */

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

@@ -1,5 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.chipColorVariant = exports.chipSizeVariant = void 0;
+exports.chipSizeVariant = exports.chipColorVariant = void 0;
+// ---- COLOR ----
+exports.chipColorVariant = [
+    'primary',
+    'secondary',
+    'main',
+    'overlay',
+];
+// ---- SIZE ----
 exports.chipSizeVariant = ['xs', 's', 'm', 'l'];
-exports.chipColorVariant = ['primary', 'secondary'];

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

@@ -13,5 +13,7 @@ export type FormGroupBaseProps = {
     children?: ReactNode;
     /** Направление */
     direction?: FormGroupDirectionVariant;
+    /** data-атрибут для тестирования */
+    'data-testid'?: string;
 };
 export type FormGroupProps<As extends ElementType = 'div'> = PolymorphicComponentPropsWithoutRef<FormGroupBaseProps, As>;

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

@@ -5,6 +5,7 @@ import { type PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphi
 export type FormTitleBaseProps = {
     /** Размер — влияет на размер шрифта и отступы заголовка */
     size?: FormElementSizeVariant;
+    'data-testid'?: string;
 };
 export type FormTitleProps<As extends ElementType = 'div'> = PolymorphicComponentPropsWithoutRef<FormTitleBaseProps, As>;
 export declare const cnFormTitle: import("@bem-react/classname").ClassNameFormatter;

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

@@ -8,6 +8,7 @@ export declare const iconButtonColorVariant: readonly ["primary", "secondary", "
 export declare const iconButtonVariant: readonly ["contained", "contained-additional", "ghost", "function", "floating"];
 export type IconButtonVariant = (typeof iconButtonVariant)[number];
 export type IconButtonColorVariant = (typeof iconButtonColorVariant)[number];
+export type IconButtonSize = FormElementSizeVariant;
 export type IconButtonIcon = RenderContentType<IconProps>['content'];
 export type IconButtonBaseProps = {
     /** Иконка */
@@ -15,7 +16,7 @@ export type IconButtonBaseProps = {
     /** Вариант представления компонента */
     variant?: IconButtonVariant;
     /** Размер */
-    size?: FormElementSizeVariant;
+    size?: IconButtonSize;
     /** Основной цвет компонента */
     color?: IconButtonColorVariant;
     /** Цвет иконки кнопки */
@@ -30,6 +31,8 @@ export type IconButtonBaseProps = {
     className?: string;
     /** Если `true` делает компонент круглым  */
     rounded?: boolean;
+    /** Идентификатор компонента для тестов */
+    'data-testid'?: string;
     children?: never;
 };
 export type IconButtonProps<As extends ElementType = typeof ICON_BUTTON_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<IconButtonBaseProps, As>;

package/__inner__/cjs/components/IconButtonNext/utils.d.ts

@@ -1,5 +1,5 @@
-import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
 import type { LoaderSizeVariant } from '../Loader';
+import type { IconButtonSize } from './types';
 export declare const loaderSizeMapper: {
-    [key in FormElementSizeVariant]: LoaderSizeVariant;
+    [key in IconButtonSize]: LoaderSizeVariant;
 };

package/__inner__/cjs/components/InputOTP/InputOTP.css

@@ -0,0 +1,60 @@
+/* stylelint-disable */
+.InputOTP-Field {
+    position: relative;
+  }
+.InputOTP-Field_notAvailable {
+      pointer-events: none;
+    }
+.InputOTP .FieldControl_error:not(.FieldControl_disabled) {
+    --textfield-color: var(--color-content-error);
+    --textfield-background-color: var(--color-background-primary);
+  }
+.InputOTP:not(.InputOTP_disabled) .InputOTP-InputContainer {
+      cursor: pointer;
+    }
+.InputOTP_size_s {
+      --otp-input-inline-size: 40px;
+    }
+.InputOTP_size_s .InputOTP-Input {
+        font: var(--typography-text-s-font);
+        letter-spacing: var(--typography-text-s-letter_spacing, 0);
+        text-transform: var(--typography-text-s-text_transform, none);
+      }
+.InputOTP_size_m {
+      --otp-input-inline-size: 44px;
+    }
+.InputOTP_size_m .InputOTP-Input {
+        font: var(--typography-text-l-font);
+        letter-spacing: var(--typography-text-l-letter_spacing, 0);
+        text-transform: var(--typography-text-l-text_transform, none);
+      }
+.InputOTP-Input {
+    box-sizing: border-box;
+    padding: var(--textfield-input-padding);
+    background-color: var(--textfield-background-color);
+    transition: background-color box-shadow var(--transition-slow);
+    color: var(--textfield-color);
+    border-radius: var(--textfield-border-radius);
+    block-size: var(--textfield-input-height);
+    text-align: center;
+    border: none;
+    outline: none;
+    display: block;
+    inline-size: var(--otp-input-inline-size);
+  }
+.InputOTP-Input:-webkit-autofill,
+    .InputOTP-Input:-webkit-autofill:hover,
+    .InputOTP-Input:-webkit-autofill:focus {
+      box-shadow: 0 0 0 1000px var(--textfield-background-color) inset !important;
+      background-color: transparent !important;
+      -webkit-text-fill-color: var(--textfield-color);
+    }
+.InputOTP-Input::-webkit-outer-spin-button,
+    .InputOTP-Input::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+              appearance: none;
+      margin: 0;
+    }
+.InputOTP-Input:disabled {
+      opacity: 1;
+    }

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

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