@ozen-ui/kit 0.8.0 → 0.9.1

package/__inner__/esm/components/Input/index.js

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

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

@@ -0,0 +1,71 @@
+import type { ComponentPropsWithRef, ComponentRef, Ref } from 'react';
+import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+import type { FIELD_CONTROL_DEFAULT_TAG } from '../FieldControl';
+import type { FieldIconProps } from '../FieldIcon';
+import type { FieldLabelProps } from '../FieldLabel';
+export declare const inputTypeVariant: readonly ["number", "date", "datetime-local", "time", "text", "tel", "password", "email"];
+export type InputTypeVariant = (typeof inputTypeVariant)[number];
+export type InputSizeVariant = FormElementSizeVariant;
+type InputPropsDeprecated = {
+    /**
+     * deprecated
+     * Ссылка на FieldLabel
+     * */
+    labelRef?: FieldLabelProps['ref'];
+    /** deprecated
+     * Ссылка на элемент input
+     * */
+    inputRef?: Ref<HTMLInputElement>;
+};
+type InputElement = ComponentPropsWithRef<'input'>;
+export type InputProps = Omit<ComponentPropsWithRef<typeof FIELD_CONTROL_DEFAULT_TAG>, 'size' | 'onChange'> & {
+    /** Атрибут id для элемента input */
+    id?: string;
+    /** Атрибут name для элемента input */
+    name?: string;
+    /** Лейбл */
+    label?: string;
+    /** Размер компонента */
+    size?: InputSizeVariant;
+    /** Подсказка. Отображается, когда вариант не выбран */
+    placeholder?: string;
+    /** Если {true} устанавливает автофокус */
+    autoFocus?: boolean;
+    /** Если {true} переводит поле в состояние ошибки */
+    error?: boolean;
+    /** Если {true} растягивает поле на всю ширину */
+    fullWidth?: boolean;
+    /** Дополнительное описание к полю */
+    hint?: string | null | undefined;
+    /** Атрибут type для элемента input */
+    type?: InputTypeVariant;
+    /** Если {true} делает элемент неактивным */
+    disabled?: boolean;
+    /** Если {true} делает элемент обязательным к заполнению */
+    required?: boolean;
+    /** Минимальное количество символов разрешенных для ввода */
+    minLength?: InputElement['minLength'];
+    /** Максимальное количество символов разрешенных для ввода */
+    maxLength?: InputElement['maxLength'];
+    /** Текст или иконка слева */
+    renderLeft?: FieldIconProps['icon'];
+    /** Текст или иконка справа */
+    renderRight?: FieldIconProps['icon'];
+    /** Выбранное значение */
+    value?: InputElement['value'];
+    /** Значение по умолчанию (неконтролируемый компонент) */
+    defaultValue?: InputElement['defaultValue'];
+    /** Обработчик события на изменение значения поля */
+    onChange?: InputElement['onChange'];
+    /** Свойства элемента input */
+    inputProps?: InputElement & {
+        'data-testid'?: string;
+    };
+    /** Свойства FieldLabel */
+    labelProps?: FieldLabelProps;
+    /** Ссылка на корневой DOM-элемент компонента */
+    ref?: ComponentRef<typeof FIELD_CONTROL_DEFAULT_TAG>;
+    /** data-атрибут для тестирования */
+    'data-testid'?: string;
+} & InputPropsDeprecated;
+export {};

package/__inner__/esm/components/Input/types.js

@@ -0,0 +1,10 @@
+export var inputTypeVariant = [
+    'number',
+    'date',
+    'datetime-local',
+    'time',
+    'text',
+    'tel',
+    'password',
+    'email',
+];

package/__inner__/esm/components/InputNumber/InputNumber.css

@@ -1,9 +1,10 @@
 /* stylelint-disable */
 .InputNumber {
-  --number-input-color: var(--color-content-primary);
-  --number-input-background-color: var(--color-background-primary);
-  --number-input-border-width: var(--border-width-s);
-  --number-input-border-color: var(--color-border-main);
+  --textfield-color: var(--color-content-primary);
+  --textfield-background-color: var(--color-background-primary);
+  --textfield-border-width: var(--border-width-s);
+  --textfield-border-color: var(--color-border-main);
+  font: var(--textfield-input-font);
   cursor: text;
   display: inline-flex;
   vertical-align: top;
@@ -12,31 +13,17 @@
 .InputNumber > * {
     cursor: text;
   }
-.InputNumber-Fieldset {
-    position: absolute;
-    inset-block-end: 0;
-    inset-inline-end: 0;
-    inset-block-start: 0;
-    inset-inline-start: 0;
-    margin: 0;
-    padding: 0;
-    pointer-events: none;
-    border-radius: var(--border-radius-xs);
-    border: var(--number-input-border-width) solid
-      var(--number-input-border-color);
-    transition: border var(--transition-default);
-  }
 .InputNumber-Body {
     position: relative;
     display: flex;
-    -moz-column-gap: var(--number-input-input-gap);
-         column-gap: var(--number-input-input-gap);
+    -moz-column-gap: var(--textfield-input-gap);
+         column-gap: var(--textfield-input-gap);
     align-items: center;
     box-sizing: border-box;
-    padding: 0 4px 0 var(--number-input-gutter-x);
-    background-color: var(--number-input-background-color);
+    padding: 0 4px 0 var(--textfield-gutter-x);
+    background-color: var(--textfield-background-color);
     transition: background-color var(--transition-slow);
-    color: var(--number-input-color);
+    color: var(--textfield-color);
     border-radius: var(--border-radius-xs);
   }
 .InputNumber-FieldContainer {
@@ -53,10 +40,10 @@
     inline-size: 100%;
     padding: 0;
     background: none;
-    color: var(--number-input-color);
+    color: var(--textfield-color);
     box-sizing: border-box;
-    block-size: var(--number-input-input-height);
-    font: var(--number-input-input-font);
+    block-size: var(--textfield-input-height);
+    font: inherit;
   }
 .InputNumber-Field::placeholder {
       opacity: 1;
@@ -65,7 +52,7 @@
 .InputNumber-Field:-webkit-autofill,
     .InputNumber-Field:-webkit-autofill:hover,
     .InputNumber-Field:-webkit-autofill:focus {
-      box-shadow: 0 0 0 1000px var(--number-input-background-color) inset !important;
+      box-shadow: 0 0 0 1000px var(--textfield-background-color) inset !important;
       background-color: transparent !important;
       -webkit-text-fill-color: var(--color-content-info-dark);
     }
@@ -80,59 +67,59 @@
     flex-direction: column;
   }
 .InputNumber_size_2xs {
-      --number-input-gutter-x: 12px;
-      --number-input-input-height: 40px;
-      --number-input-input-padding: 4px 0 4px;
-      --number-input-input-font: var(--typography-text-2xs-font);
-      --number-input-input-gap: var(--space-s);
-      --number-input-button-width: 24px;
-      --number-input-button-height: 16px;
+      --textfield-gutter-x: 12px;
+      --textfield-input-height: 40px;
+      --textfield-input-padding: 4px 0 4px;
+      --textfield-input-font: var(--typography-text-2xs-font);
+      --textfield-input-gap: var(--space-s);
+      --textfield-button-width: 24px;
+      --textfield-button-height: 16px;
     }
 .InputNumber_size_2xs .FieldLabel_size_2xs {
         --field-label-top: 12px;
       }
 .InputNumber_size_xs {
-      --number-input-gutter-x: 12px;
-      --number-input-input-height: 40px;
-      --number-input-input-font: var(--typography-text-xs-font);
-      --number-input-input-padding: 19px 0 4px;
-      --number-input-input-gap: var(--space-s);
-      --number-input-button-width: 28px;
-      --number-input-button-height: 16px;
+      --textfield-gutter-x: 12px;
+      --textfield-input-height: 40px;
+      --textfield-input-font: var(--typography-text-xs-font);
+      --textfield-input-padding: 19px 0 4px;
+      --textfield-input-gap: var(--space-s);
+      --textfield-button-width: 28px;
+      --textfield-button-height: 16px;
     }
 .InputNumber_size_s {
-      --number-input-gutter-x: 16px;
-      --number-input-input-height: 48px;
-      --number-input-input-font: var(--typography-text-s-font);
-      --number-input-input-padding: 21px 0 6px;
-      --number-input-input-gap: var(--space-m);
-      --number-input-button-width: 32px;
-      --number-input-button-height: 20px;
+      --textfield-gutter-x: 16px;
+      --textfield-input-height: 48px;
+      --textfield-input-font: var(--typography-text-s-font);
+      --textfield-input-padding: 21px 0 6px;
+      --textfield-input-gap: var(--space-m);
+      --textfield-button-width: 32px;
+      --textfield-button-height: 20px;
     }
 .InputNumber_size_m {
-      --number-input-gutter-x: 20px;
-      --number-input-input-height: 56px;
-      --number-input-input-font: var(--typography-text-m-font);
-      --number-input-input-padding: 24px 0 6px;
-      --number-input-input-gap: var(--space-m);
-      --number-input-button-width: 40px;
-      --number-input-button-height: 24px;
+      --textfield-gutter-x: 20px;
+      --textfield-input-height: 56px;
+      --textfield-input-font: var(--typography-text-m-font);
+      --textfield-input-padding: 24px 0 6px;
+      --textfield-input-gap: var(--space-m);
+      --textfield-button-width: 40px;
+      --textfield-button-height: 24px;
     }
 .InputNumber_size_l {
-      --number-input-gutter-x: 24px;
-      --number-input-input-height: 64px;
-      --number-input-input-font: var(--typography-text-l-font);
-      --number-input-input-padding: 26px 0 6px;
-      --number-input-input-gap: var(--space-l);
-      --number-input-button-width: 48px;
-      --number-input-button-height: 28px;
+      --textfield-gutter-x: 24px;
+      --textfield-input-height: 64px;
+      --textfield-input-font: var(--typography-text-l-font);
+      --textfield-input-padding: 26px 0 6px;
+      --textfield-input-gap: var(--space-l);
+      --textfield-button-width: 48px;
+      --textfield-button-height: 28px;
     }
 .InputNumber_fullWidth {
     inline-size: 100%;
   }
 .InputNumber_hasLabel .InputNumber-Field {
-      padding: var(--number-input-input-padding);
-      font: var(--number-input-input-font);
+      padding: var(--textfield-input-padding);
+      font: var(--textfield-input-font);
     }
 .InputNumber_hasLabel .InputNumber-Field::placeholder {
         opacity: 0;
@@ -141,31 +128,31 @@
         opacity: 1;
       }
 .InputNumber:hover {
-    --number-input-border-color: var(--color-border-main-hover);
+    --textfield-border-color: var(--color-border-main-hover);
   }
 .InputNumber_focused,
   .InputNumber_focused:hover {
-    --number-input-border-width: var(--border-width-m);
-    --number-input-background-color: var(--color-background-main);
-    --number-input-border-color: var(--color-border-action);
+    --textfield-border-width: var(--border-width-m);
+    --textfield-background-color: var(--color-background-main);
+    --textfield-border-color: var(--color-border-action);
   }
 .InputNumber_error,
   .InputNumber_error.InputNumber:hover,
   .InputNumber_error.InputNumber_focused,
   .InputNumber_error.InputNumber_focused:hover {
-    --number-input-border-color: var(--color-border-error);
+    --textfield-border-color: var(--color-border-error);
   }
 .InputNumber_disabled {
-    --number-input-border-color: var(--color-border-disabled);
-    --number-input-background-color: var(--color-background-disabled);
-    --number-input-color: var(--color-content-secondary);
+    --textfield-border-color: var(--color-border-disabled);
+    --textfield-background-color: var(--color-background-disabled);
+    --textfield-color: var(--color-content-secondary);
     pointer-events: none;
     cursor: default;
   }
 .IconButton.InputNumber-Increment,
 .IconButton.InputNumber-Decrement {
-  inline-size: var(--number-input-button-width);
-  block-size: var(--number-input-button-height);
+  inline-size: var(--textfield-button-width);
+  block-size: var(--textfield-button-height);
 }
 .IconButton.InputNumber-Increment *, .IconButton.InputNumber-Decrement * {
     pointer-events: none;

package/__inner__/esm/components/InputNumber/InputNumber.js

@@ -11,6 +11,7 @@ import { cn } from '../../utils/classname';
 import { FieldHint } from '../FieldHint';
 import { FieldIcon } from '../FieldIcon';
 import { FieldLabel } from '../FieldLabel';
+import { Fieldset } from '../Fieldset';
 import { IconButton } from '../IconButton';
 import { INPUT_NUMBER_DEFAULT_STEP, INPUT_NUMBER_DEFAULT_SIZE, INPUT_NUMBER_DEFAULT_AUTO_FOCUS, INPUT_NUMBER_DEFAULT_ERROR, INPUT_NUMBER_DEFAULT_REQUIRED, INPUT_NUMBER_DEFAULT_DISABLED, INPUT_NUMBER_DEFAULT_FULL_WIDTH, INPUT_NUMBER_DEFAULT_VALUE, INPUT_NUMBER_DEFAULT_MIN, INPUT_NUMBER_DEFAULT_MAX, } from './constants';
 import { getValue, isInputInvalid, isValidValue } from './utils';
@@ -142,7 +143,7 @@ export var InputNumber = forwardRef(function (inProps, ref) {
             React.createElement("span", { className: cnInputNumber('Controls') },
                 React.createElement(IconButton, { tabIndex: -1, size: size, className: cnInputNumber('Increment'), icon: SortUpIcon, onMouseDown: handleMouseDown('increment'), disabled: disabled, "aria-label": "increment", variant: "ghost" }),
                 React.createElement(IconButton, { tabIndex: -1, size: size, icon: SortDownIcon, className: cnInputNumber('Decrement'), onMouseDown: handleMouseDown('decrement'), disabled: disabled, "aria-label": "decrement", variant: "ghost" })),
-            React.createElement("fieldset", { className: cnInputNumber('Fieldset') })),
+            React.createElement(Fieldset, { className: cnInputNumber('Fieldset') })),
         React.createElement(FieldHint, { size: size, error: error, disabled: disabled }, hint)));
 });
 InputNumber.displayName = 'InputNumber';

package/__inner__/esm/components/InputNumber/utils.d.ts

@@ -1,5 +1,5 @@
-import { KeyboardEvent } from 'react';
-import { InputNumberValue, InputNumberCountDirection } from './types';
+import type { KeyboardEvent } from 'react';
+import type { InputNumberValue, InputNumberCountDirection } from './types';
 export declare const isValidValue: (value?: InputNumberValue) => boolean;
 export declare const isInputInvalid: (event: KeyboardEvent<HTMLInputElement>) => boolean;
 export declare const getValue: ({ value, step, min, max, countDirection, }: {

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

@@ -1,5 +1,5 @@
 import './Link.css';
-import { ElementType } from 'react';
+import type { ElementType } from 'react';
 import { type PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
 import { type TypographyBaseProps } from '../Typography';
 export type LinkBaseProps = Pick<TypographyBaseProps, 'variant' | 'display' | 'defaultMargin' | 'children' | 'noWrap' | 'align'>;

package/__inner__/esm/components/List/components/ListItem/ListItem.d.ts

@@ -1,6 +1,5 @@
 import './ListItem.css';
-import { ElementType } from 'react';
-import type { ReactNode } from 'react';
+import type { ReactNode, ElementType } from 'react';
 import { type PolymorphicComponentPropsWithoutRef } from '../../../../utils/polymorphicComponentWithRef';
 import { LIST_ITEM_DEFAULT_TAG } from '../../constants';
 export declare const cnListItem: import("@bem-react/classname").ClassNameFormatter;

package/__inner__/esm/components/List/components/ListItemButton/ListItemButton.d.ts

@@ -1,6 +1,5 @@
 import './ListItemButton.css';
-import { ElementType } from 'react';
-import type { ReactNode } from 'react';
+import type { ReactNode, ElementType } from 'react';
 import { type PolymorphicComponentPropsWithoutRef } from '../../../../utils/polymorphicComponentWithRef';
 import { LIST_ITEM_BUTTON_DEFAULT_TAG } from '../../constants';
 export declare const cnListItemButton: import("@bem-react/classname").ClassNameFormatter;

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

@@ -1,7 +1,7 @@
 import type { ElementType, ReactNode } from 'react';
-import { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
-import { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
-import { LIST_DEFAULT_TAG } from './constants';
+import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
+import type { LIST_DEFAULT_TAG } from './constants';
 export type ListSizeVariant = FormElementSizeVariant;
 export type ListContextValue = {
     size: ListSizeVariant;

package/__inner__/esm/components/Menu/components/MenuItem/MenuItem.d.ts

@@ -1,4 +1,4 @@
-import { ElementType } from 'react';
+import type { ElementType } from 'react';
 import { type PolymorphicComponentPropsWithoutRef } from '../../../../utils/polymorphicComponentWithRef';
 import { type ListItemButtonBaseProps } from '../../../List';
 import { LIST_ITEM_BUTTON_DEFAULT_TAG } from '../../../List/constants';

package/__inner__/esm/components/Menu/components/MenuList/MenuList.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ListProps } from '../../../List';
+import type { ListProps } from '../../../List';
 export type MenuListProps = {
     /** Если {true} устанавливает автофокус на первый или выбранный элемент в списке */
     autoFocus?: boolean;

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

@@ -1,7 +1,7 @@
 import './Modal.css';
 import React from 'react';
 import type { ReactNode, RefObject } from 'react';
-import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
+import type { CSSTransitionProps } from 'react-transition-group/CSSTransition';
 import { type BackdropProps } from '../Backdrop';
 import { type PaperProps } from '../Paper';
 import { type PortalProps, type PortalRef } from '../Portal';

package/__inner__/esm/components/Modal/Modal.js

@@ -69,7 +69,7 @@ export var Modal = forwardRef(function (_a, ref) {
     });
     return (React.createElement(CSSTransition, __assign({ classNames: cnModal({ animation: true }), timeout: 300 }, transitionProps, { "in": openState, onEnter: onEnter, onEntered: onEntered, onExit: onExit, onExited: onExited, unmountOnExit: !keepMounted, appear: true }),
         React.createElement(Portal, __assign({}, other, { className: cnModal({ hidden: keepMounted && !openState, hasBackdrop: hasBackdrop }, [className]), ref: ref }),
-            !hideBackdrop && (React.createElement(Backdrop, __assign({ zIndex: -1, onClick: onClose }, backdropProps, { open: openState, className: backdropProps === null || backdropProps === void 0 ? void 0 : backdropProps.className }))),
+            !hideBackdrop && (React.createElement(Backdrop, __assign({ zIndex: -1 }, backdropProps, { open: openState, className: backdropProps === null || backdropProps === void 0 ? void 0 : backdropProps.className }))),
             React.createElement(ModalConsumer, __assign({}, windowProps, { open: openState && !disableScrollLock, ref: useMultiRef([modalInnerRef, trapRef, windowProps === null || windowProps === void 0 ? void 0 : windowProps.ref]) }), children))));
 });
 Modal.displayName = 'Modal';

package/__inner__/esm/components/Modal/components/ModalConsumer.d.ts

@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { PaperProps } from '../../Paper';
+import type { FC } from 'react';
+import type { PaperProps } from '../../Paper';
 export declare const ModalConsumer: FC<PaperProps & {
     open: boolean;
 }>;

package/__inner__/esm/components/Pagination/helpers/createPaginationRange/createPaginationRange.d.ts

@@ -1,5 +1,5 @@
 import type { PaginationBaseProps } from '../../index';
-import { EllipsisType } from '../../types';
+import type { EllipsisType } from '../../types';
 type Params = Required<Pick<PaginationBaseProps, 'page' | 'pageSize' | 'totalCount' | 'siblingCount'>>;
 export declare const createPaginationRange: ({ page, pageSize, totalCount, siblingCount, }: Params) => (number | EllipsisType)[];
 export {};

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

@@ -1,7 +1,7 @@
-import React, { HTMLAttributes } from 'react';
-import { PaginationItemProps } from './components';
-import { ELLIPSIS, NEXT, PREVIOUS } from './constants';
-import { GetItemAriaLabel } from './helpers/getItemAriaLabel';
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { PaginationItemProps } from './components';
+import type { ELLIPSIS, NEXT, PREVIOUS } from './constants';
+import type { GetItemAriaLabel } from './helpers/getItemAriaLabel';
 export type EllipsisType = typeof ELLIPSIS;
 export type PreviousType = typeof PREVIOUS;
 export type NextType = typeof NEXT;
@@ -33,6 +33,6 @@ export type PaginationBaseProps = {
     /** Функция форматирования атрибута aria-label. */
     getItemAriaLabel?: GetItemAriaLabel;
     /** Рендер функция, для отображения кнопок пагинации.  */
-    renderComponent?: (PagItemProps: PaginationItemProps) => React.ReactNode;
+    renderComponent?: (PagItemProps: PaginationItemProps) => ReactNode;
 };
 export type PaginationProps = PaginationBaseProps & HTMLAttributes<HTMLElement>;

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

@@ -1,11 +1,10 @@
-import React, { ComponentRef, ElementType } from 'react';
-import type { RefObject } from 'react';
-import PopperJS from '@popperjs/core';
+import type { RefObject, ComponentRef, ElementType, ReactNode } from 'react';
+import type PopperJS from '@popperjs/core';
 import type { CSSTransitionProps } from 'react-transition-group/CSSTransition';
 import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
 import type { PortalProps } from '../Portal';
 import type { PopoverArrowProps } from './components';
-import { POPOVER_DEFAULT_TAG } from './constants';
+import type { POPOVER_DEFAULT_TAG } from './constants';
 export type VirtualElement = {
     getBoundingClientRect: () => DOMRect;
     contextElement?: Element;
@@ -25,7 +24,7 @@ export type PopoverBaseProps = {
         y: number;
     };
     /** Контент поповера */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /** Функция обратного вызова, которая будет вызвана когда компонент запрашивает закрытие */
     onClose?: () => void;
     /** Функция обратного вызова которая будет вызвана до начала

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

@@ -1,6 +1,6 @@
 import './ProgressBar.css';
-import { type ElementType } from 'react';
-import { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+import type { ElementType } from 'react';
+import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
 import { PROGRESSBAR_DEFAULT_TAG } from './constants';
 export declare const cnProgressBar: import("@bem-react/classname").ClassNameFormatter;
 export type ProgressBarBaseProps = {

package/__inner__/esm/components/ProgressBar/ProgressBar.js

@@ -2,7 +2,7 @@ import { __assign, __rest } from "tslib";
 import './ProgressBar.css';
 import React from 'react';
 import { cn } from '../../utils/classname';
-import { polymorphicComponentWithRef, } from '../../utils/polymorphicComponentWithRef';
+import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
 import { PROGRESSBAR_DEFAULT_TAG } from './constants';
 export var cnProgressBar = cn('ProgressBar');
 export var ProgressBar = polymorphicComponentWithRef(function (_a, ref) {

package/__inner__/esm/components/Select/Select.css

@@ -4,6 +4,7 @@
   --textfield-background-color: var(--color-background-primary);
   --textfield-border-width: var(--border-width-s);
   --textfield-border-color: var(--color-border-main);
+  font: var(--textfield-input-font);
   display: inline-flex;
   vertical-align: top;
   flex-direction: column;
@@ -21,19 +22,6 @@
     inline-size: 100%;
     box-sizing: border-box;
   }
-.Select-Fieldset {
-    position: absolute;
-    inset-block-end: 0;
-    inset-inline-end: 0;
-    inset-block-start: 0;
-    inset-inline-start: 0;
-    margin: 0;
-    padding: 0;
-    pointer-events: none;
-    border-radius: var(--border-radius-xs);
-    border: var(--textfield-border-width) solid var(--textfield-border-color);
-    transition: border var(--transition-default);
-  }
 .Select-Body {
     position: relative;
     display: flex;
@@ -64,7 +52,6 @@
     color: var(--textfield-color);
     box-sizing: border-box;
     block-size: var(--textfield-input-block-size);
-    font: var(--textfield-input-font);
     align-items: center;
   }
 .Select-Field span {
@@ -176,7 +163,8 @@
   }
 .Select_animation-enter-active {
     opacity: 1;
-    transition: opacity var(--transition-default),
+    transition:
+      opacity var(--transition-default),
       transform var(--transition-default);
     transform: translate(0);
     pointer-events: none;
@@ -192,7 +180,8 @@
   }
 .Select_animation-exit-active {
     opacity: 0;
-    transition: opacity var(--transition-default),
+    transition:
+      opacity var(--transition-default),
       transform var(--transition-default);
     transform: translate(0, calc(var(--space-s) * -1));
     pointer-events: none;

package/__inner__/esm/components/Select/components/SelectInput/SelectInput.js

@@ -7,6 +7,7 @@ import { useMultiRef } from '../../../../hooks/useMultiRef';
 import { FieldHint } from '../../../FieldHint';
 import { FieldIcon } from '../../../FieldIcon';
 import { FieldLabel } from '../../../FieldLabel';
+import { Fieldset } from '../../../Fieldset';
 import { cnSelect } from '../../index';
 export var SelectInput = forwardRef(function (_a, ref) {
     var _b = _a.size, size = _b === void 0 ? 'm' : _b, _c = _a.multiline, multiline = _c === void 0 ? false : _c, label = _a.label, error = _a.error, id = _a.id, name = _a.name, renderLeft = _a.renderLeft, renderRight = _a.renderRight, inputRef = _a.inputRef, fieldRef = _a.fieldRef, fullWidth = _a.fullWidth, disabled = _a.disabled, hint = _a.hint, required = _a.required, className = _a.className, inputProps = _a.inputProps, valueProp = _a.value, defaultValue = _a.defaultValue, onFocus = _a.onFocus, onBlur = _a.onBlur, onKeyDown = _a.onKeyDown, labelRef = _a.labelRef, labelProps = _a.labelProps, fieldProps = _a.fieldProps, onClick = _a.onClick, focused = _a.focused, placeholderProp = _a.placeholder, renderedValue = _a.renderedValue, bodyProps = _a.bodyProps, bodyRefProp = _a.bodyRef, open = _a.open, other = __rest(_a, ["size", "multiline", "label", "error", "id", "name", "renderLeft", "renderRight", "inputRef", "fieldRef", "fullWidth", "disabled", "hint", "required", "className", "inputProps", "value", "defaultValue", "onFocus", "onBlur", "onKeyDown", "labelRef", "labelProps", "fieldProps", "onClick", "focused", "placeholder", "renderedValue", "bodyProps", "bodyRef", "open"]);
@@ -32,7 +33,7 @@ export var SelectInput = forwardRef(function (_a, ref) {
                 React.createElement("input", __assign({ id: id, name: name, defaultValue: defaultValue, value: valueProp, disabled: disabled, required: required, tabIndex: -1, "aria-hidden": true, readOnly: true }, inputProps, { className: cnSelect('Input', [inputProps === null || inputProps === void 0 ? void 0 : inputProps.className]), ref: inputRef }))),
             React.createElement(FieldIcon, { className: cnSelect('RenderRight'), icon: renderRight, size: size }),
             React.createElement(FieldIcon, { className: classnames(cnSelect('RenderRight'), cnSelect('DropDownIcon', { open: open })), icon: ChevronDownIcon, size: size }),
-            React.createElement("fieldset", { className: cnSelect('Fieldset') })),
+            React.createElement(Fieldset, { className: cnSelect('Fieldset') })),
         React.createElement(FieldHint, { size: size, error: error, disabled: disabled }, hint)));
 });
 SelectInput.displayName = 'SelectInput';

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

@@ -1,5 +1,4 @@
-import React, { SyntheticEvent } from 'react';
-import type { HTMLAttributes } from 'react';
+import type { HTMLAttributes, SyntheticEvent, ReactNode } from 'react';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
 import type { MenuProps } from '../Menu';
 import type { SelectInputProps } from './components';
@@ -10,7 +9,7 @@ export type SelectedOptionProp = {
     label?: SelectPropLabel;
     value?: SelectPropValue;
 };
-export type SelectRenderValue = (option: SelectedOptionProp) => React.ReactNode | null;
+export type SelectRenderValue = (option: SelectedOptionProp) => ReactNode | null;
 type SelectOpenControlledProps = {
     /** Текущее состояние списка. Если `true`, список отображается. */
     open?: boolean;
@@ -47,7 +46,7 @@ export type SelectProps = {
     /** Рендер-функция для выбранного значения */
     renderValue?: SelectRenderValue;
     /** Содержимое компонента */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /** Свойства компонента Menu */
     menuProps?: Omit<MenuProps, 'onClose' | 'open' | 'anchorRef'>;
     /** Функция обратного вызова, которая будет вызвана когда компонент запрашивает закрытие */

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

@@ -1,7 +1,7 @@
 import type { ElementType, ComponentPropsWithRef, ChangeEvent } from 'react';
 import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
 import type { TooltipProps } from '../Tooltip';
-import { SLIDER_DEFAULT_TAG } from './constants';
+import type { SLIDER_DEFAULT_TAG } from './constants';
 export declare const sliderSizeVariant: readonly ["m", "l"];
 export type SliderSizeVariant = (typeof sliderSizeVariant)[number];
 export type SliderValue = number;

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

@@ -1,4 +1,4 @@
-import { SnackbarItemProps } from './components/SnackbarItem';
+import type { SnackbarItemProps } from './components/SnackbarItem';
 export declare const snackbarVerticalAlignVariant: readonly ["top", "bottom"];
 export declare const snackbarHorizontalAlignVariant: readonly ["left", "center", "right"];
 export declare const snackbarStatusVariant: readonly ["success", "info", "warning", "error"];

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

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import type { IconProps } from '@ozen-ui/icons';
 export declare const removeButtonSizeVariant: readonly ["s", "xs", "2xs"];
 export type RemoveButtonSizeVariant = (typeof removeButtonSizeVariant)[number];