@ozen-ui/kit 0.0.1

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

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

package/__inner__/esm/components/ThemeProvider/themes/themeOzenDark.d.ts

@@ -0,0 +1,12 @@
+import '@ozen-ui/fonts';
+import type { Theme } from '../index';
+import '../_color/Theme_color_ozenDark.css';
+import '../_typography/Theme_typography_ozenDefault.css';
+import '../_borderRadius/Theme_borderRadius_ozenDefault.css';
+import '../_space/Theme_space_ozenDefault.css';
+import '../_shadow/Theme_shadow_ozenDefault.css';
+import '../_breakpoint/Theme_breakpoint_ozenDefault.css';
+import '../_borderWidth/Theme_borderWidth_ozenDefault.css';
+import '../_zIndex/Theme_zIndex_ozenDefault.css';
+import '../_transition/Theme_transition_ozenDefault.css';
+export declare const themeOzenDark: Theme;

package/__inner__/esm/components/ThemeProvider/themes/themeOzenDark.js

@@ -0,0 +1,24 @@
+import '@ozen-ui/fonts';
+import '../_color/Theme_color_ozenDark.css';
+import '../_typography/Theme_typography_ozenDefault.css';
+import '../_borderRadius/Theme_borderRadius_ozenDefault.css';
+import '../_space/Theme_space_ozenDefault.css';
+import '../_shadow/Theme_shadow_ozenDefault.css';
+import '../_breakpoint/Theme_breakpoint_ozenDefault.css';
+import '../_borderWidth/Theme_borderWidth_ozenDefault.css';
+import '../_zIndex/Theme_zIndex_ozenDefault.css';
+import '../_transition/Theme_transition_ozenDefault.css';
+export var themeOzenDark = {
+    tokens: {
+        color: 'ozenDark',
+        space: 'ozenDefault',
+        typography: 'ozenDefault',
+        borderRadius: 'ozenDefault',
+        borderWidth: 'ozenDefault',
+        shadow: 'ozenDefault',
+        breakpoint: 'ozenDefault',
+        zIndex: 'ozenDefault',
+        transition: 'ozenDefault'
+    },
+    defaultProps: {}
+};

package/__inner__/esm/components/ThemeProvider/themes/themeOzenDefault.d.ts

@@ -0,0 +1,12 @@
+import '@ozen-ui/fonts';
+import type { Theme } from '../index';
+import '../_color/Theme_color_ozenDefault.css';
+import '../_typography/Theme_typography_ozenDefault.css';
+import '../_borderRadius/Theme_borderRadius_ozenDefault.css';
+import '../_space/Theme_space_ozenDefault.css';
+import '../_shadow/Theme_shadow_ozenDefault.css';
+import '../_breakpoint/Theme_breakpoint_ozenDefault.css';
+import '../_borderWidth/Theme_borderWidth_ozenDefault.css';
+import '../_zIndex/Theme_zIndex_ozenDefault.css';
+import '../_transition/Theme_transition_ozenDefault.css';
+export declare const themeOzenDefault: Theme;

package/__inner__/esm/components/ThemeProvider/themes/themeOzenDefault.js

@@ -0,0 +1,24 @@
+import '@ozen-ui/fonts';
+import '../_color/Theme_color_ozenDefault.css';
+import '../_typography/Theme_typography_ozenDefault.css';
+import '../_borderRadius/Theme_borderRadius_ozenDefault.css';
+import '../_space/Theme_space_ozenDefault.css';
+import '../_shadow/Theme_shadow_ozenDefault.css';
+import '../_breakpoint/Theme_breakpoint_ozenDefault.css';
+import '../_borderWidth/Theme_borderWidth_ozenDefault.css';
+import '../_zIndex/Theme_zIndex_ozenDefault.css';
+import '../_transition/Theme_transition_ozenDefault.css';
+export var themeOzenDefault = {
+    tokens: {
+        color: 'ozenDefault',
+        space: 'ozenDefault',
+        typography: 'ozenDefault',
+        borderRadius: 'ozenDefault',
+        borderWidth: 'ozenDefault',
+        shadow: 'ozenDefault',
+        breakpoint: 'ozenDefault',
+        zIndex: 'ozenDefault',
+        transition: 'ozenDefault'
+    },
+    defaultProps: {}
+};

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

@@ -0,0 +1,112 @@
+import type { AccordionProps, AccordionSummaryProps } from '../Accordion';
+import type { AlertProps } from '../Alert';
+import type { AvatarProps } from '../Avatar';
+import type { BackdropProps } from '../Backdrop';
+import type { BadgeProps } from '../Badge';
+import type { ButtonProps } from '../Button';
+import type { CardProps } from '../Card';
+import type { CheckboxProps } from '../Checkbox';
+import type { ChipProps } from '../Chip';
+import type { CollapseProps } from '../Collapse';
+import type { ContainerProps } from '../Container';
+import type { DataListProps } from '../DataList';
+import type { DividerProps } from '../Divider';
+import type { FileProps } from '../File';
+import type { FilePickerProps } from '../FilePicker';
+import type { FormGroupProps } from '../FormGroup';
+import type { FormTitleProps } from '../FormTitle';
+import type { GridProps, GridItemProps } from '../Grid';
+import type { IconButtonProps } from '../IconButton';
+import type { IndicatorProps } from '../Indicator';
+import type { InputProps } from '../Input';
+import type { InputNumberProps } from '../InputNumber';
+import type { LinkProps } from '../Link';
+import type { ListProps, ListItemProps, ListItemButtonProps } from '../List';
+import type { LoaderProps } from '../Loader';
+import type { MenuProps, MenuItemProps, MenuListProps } from '../Menu';
+import type { ModalProps } from '../Modal';
+import type { PaginationProps } from '../Pagination';
+import type { PopoverProps } from '../Popover';
+import type { PortalProps } from '../Portal';
+import type { RadioProps } from '../Radio';
+import type { RadioGroupProps } from '../RadioGroup';
+import type { SectionMessageProps } from '../SectionMessage';
+import type { SegmentProps } from '../Segment';
+import type { SelectProps } from '../Select';
+import type { SliderProps } from '../Slider';
+import type { SnackbarProviderProps } from '../Snackbar';
+import type { StackProps } from '../Stack';
+import type { TableContainerProps, TableProps, TableCaptionProps, TableCellProps } from '../Table';
+import type { TagProps } from '../Tag';
+import type { TextareaProps } from '../Textarea';
+import type { ToggleProps } from '../Toggle';
+import type { TooltipProps } from '../Tooltip';
+import type { TypographyProps } from '../Typography';
+export type Theme = {
+    tokens: {
+        color: string;
+        typography: string;
+        borderRadius: string;
+        borderWidth: string;
+        space: string;
+        shadow: string;
+        breakpoint: string;
+        zIndex: string;
+        transition: string;
+    };
+    defaultProps: {
+        Accordion?: Partial<AccordionProps>;
+        AccordionSummary?: Partial<AccordionSummaryProps>;
+        Alert?: Partial<AlertProps>;
+        Avatar?: Partial<AvatarProps>;
+        Backdrop?: Partial<BackdropProps>;
+        Badge?: Partial<BadgeProps>;
+        Button?: Partial<ButtonProps>;
+        Card?: Partial<CardProps>;
+        Checkbox?: Partial<CheckboxProps>;
+        Chip?: Partial<ChipProps>;
+        Collapse?: Partial<CollapseProps>;
+        Container?: Partial<ContainerProps>;
+        DataList?: Partial<DataListProps>;
+        Divider?: Partial<DividerProps>;
+        File?: Partial<FileProps>;
+        FilePicker?: Partial<FilePickerProps>;
+        FormGroup?: Partial<FormGroupProps>;
+        FormTitle?: Partial<FormTitleProps>;
+        Grid?: Partial<GridProps>;
+        GridItem?: Partial<GridItemProps>;
+        IconButton?: Partial<IconButtonProps>;
+        Indicator?: Partial<IndicatorProps>;
+        Input?: Partial<InputProps>;
+        InputNumber?: Partial<InputNumberProps>;
+        Link?: Partial<LinkProps>;
+        List?: Partial<ListProps>;
+        ListItem?: Partial<ListItemProps>;
+        ListItemButton?: Partial<ListItemButtonProps>;
+        Loader?: Partial<LoaderProps>;
+        Menu?: Partial<MenuProps>;
+        MenuItem?: Partial<MenuItemProps>;
+        MenuList?: Partial<MenuListProps>;
+        Modal?: Partial<ModalProps>;
+        Pagination?: Partial<PaginationProps>;
+        Popover?: Partial<PopoverProps>;
+        Portal?: Partial<PortalProps>;
+        Radio?: Partial<RadioProps>;
+        RadioGroup?: Partial<RadioGroupProps>;
+        SectionMessage?: Partial<SectionMessageProps>;
+        Segment?: Partial<SegmentProps>;
+        Select?: Partial<SelectProps>;
+        Slider?: Partial<SliderProps>;
+        SnackbarProvider?: Partial<SnackbarProviderProps>;
+        Stack?: Partial<StackProps>;
+        Table?: Partial<TableProps>;
+        TableCaption?: Partial<TableCaptionProps>;
+        TableCell?: Partial<TableCellProps>;
+        TableContainer?: Partial<TableContainerProps>;
+        Tag?: Partial<TagProps>;
+        Textarea?: Partial<TextareaProps>;
+        Toggle?: Partial<ToggleProps>;
+        Tooltip?: Partial<TooltipProps>;
+        Typography?: Partial<TypographyProps>;
+    };
+};

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

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

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

@@ -0,0 +1,2 @@
+import type { Theme } from './types';
+export declare const extendTheme: (target: Theme, source: Partial<Theme>) => Theme;

package/__inner__/esm/components/ThemeProvider/utils.js

@@ -0,0 +1,4 @@
+import { mergeDeep } from '../../utils/mergeDeep';
+export var extendTheme = function (target, source) {
+    return mergeDeep(target, source);
+};

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

@@ -0,0 +1,108 @@
+.Toggle {
+  display: inline-flex;
+  position: relative;
+}
+
+  .Toggle_size_s .Toggle-Input:checked + .Toggle-Switch::before, .Toggle_size_xs .Toggle-Input:checked + .Toggle-Switch::before, .Toggle_size_2xs .Toggle-Input:checked + .Toggle-Switch::before {
+        transform: translateX(14px);
+      }
+
+  .Toggle_size_s .Toggle-Switch, .Toggle_size_xs .Toggle-Switch, .Toggle_size_2xs .Toggle-Switch {
+      inline-size: 30px;
+      block-size: 16px;
+      border-radius: calc(30px / 2);
+    }
+
+  .Toggle_size_s .Toggle-Switch::before, .Toggle_size_xs .Toggle-Switch::before, .Toggle_size_2xs .Toggle-Switch::before {
+        block-size: 14px;
+        inline-size: 14px;
+        inset-inline-start: 1px;
+        inset-block-end: 1px;
+      }
+
+  .Toggle_size_m .Toggle-Input:checked + .Toggle-Switch::before, .Toggle_size_l .Toggle-Input:checked + .Toggle-Switch::before {
+        transform: translateX(20px);
+      }
+
+  .Toggle_size_m .Toggle-Switch, .Toggle_size_l .Toggle-Switch {
+      inline-size: 44px;
+      block-size: 24px;
+      border-radius: calc(44px / 2);
+    }
+
+  .Toggle_size_m .Toggle-Switch::before, .Toggle_size_l .Toggle-Switch::before {
+        block-size: 20px;
+        inline-size: 20px;
+        inset-inline-start: 2px;
+        inset-block-end: 2px;
+      }
+
+.Toggle-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);
+}
+
+.Toggle-Input:hover:not(:disabled) + .Toggle-Switch {
+    background-color: var(--color-background-tertiary-hover);
+  }
+
+.Toggle-Input:hover:checked + .Toggle-Switch {
+    background-color: var(--color-background-action-hover);
+  }
+
+.Toggle-Input:active:not(:disabled) + .Toggle-Switch {
+    background-color: var(--color-background-tertiary-hover);
+  }
+
+.Toggle-Input:active:checked + .Toggle-Switch {
+    background-color: var(--color-background-action-pressed);
+  }
+
+.Toggle-Input:checked + .Toggle-Switch {
+    background-color: var(--color-background-action);
+  }
+
+.Toggle-Input:focus + .Toggle-Switch {
+    box-shadow: var(--shadow-outline-focused);
+  }
+
+.Toggle-Input:focus:not(:focus-visible) + .Toggle-Switch {
+    box-shadow: 0 1px 1px 0 rgb(0 0 0 / 16%) inset;
+  }
+
+.Toggle-Switch {
+  position: relative;
+  cursor: pointer;
+  flex-shrink: 0;
+  background-color: var(--color-background-tertiary);
+  transition: var(--transition-default);
+  box-shadow: 0 1px 1px 0 rgb(0 0 0 / 16%) inset;
+}
+
+.Toggle-Switch::before {
+    position: absolute;
+    content: '';
+    background-color: var(--color-background-main);
+    box-shadow: 0 1px 1px 0 rgb(0 0 0 / 16%);
+    transition: var(--transition-default);
+    border-radius: 50%;
+  }
+
+.Toggle_disabled {
+  pointer-events: none;
+}
+
+.Toggle_disabled .Toggle-Switch {
+    background-color: var(--color-background-disabled);
+  }
+
+.Toggle_disabled .Toggle-Input:checked + .Toggle-Switch {
+    background-color: var(--color-background-action-active-disabled);
+  }

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

@@ -0,0 +1,31 @@
+import './Toggle.css';
+import React from 'react';
+import type { InputHTMLAttributes, Ref } from 'react';
+import { type FormControlLabelProps } from '../FormControlLabel';
+export declare const toggleSizeVariant: readonly ["2xs", "xs", "s", "m", "l"];
+export type ToggleSizeVariant = (typeof toggleSizeVariant)[number];
+export type ToggleProps = {
+    /** Размер */
+    size?: ToggleSizeVariant;
+    /** Если {true} делает элемент неактивным */
+    disabled?: boolean;
+    /** Если {true} делает элемент выбранным */
+    checked?: boolean;
+    /** Расположение лейбла */
+    align?: FormControlLabelProps['align'];
+    /** Лейбл */
+    label?: React.ReactNode;
+    /** Позиция лейбла */
+    labelPlacement?: FormControlLabelProps['labelPlacement'];
+    /** Свойства лейбла */
+    labelProps?: FormControlLabelProps;
+    /** Ссылка на корневой DOM-элемент компонента */
+    ref?: Ref<HTMLLabelElement>;
+    /** Ссылка на input-элемент в компоненте */
+    inputRef?: Ref<HTMLInputElement>;
+    /** Кастомный класс */
+    className?: string;
+    children?: never;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
+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/Toggle/Toggle.js

@@ -0,0 +1,21 @@
+import { __assign, __rest } from "tslib";
+import './Toggle.css';
+import React, { forwardRef } from 'react';
+import { useThemeProps } from '../../hooks/useThemeProps';
+import { cn } from '../../utils/classname';
+import { FormControlLabel, } from '../FormControlLabel';
+export var toggleSizeVariant = ['2xs', 'xs', 's', 'm', 'l'];
+export var cnToggle = cn('Toggle');
+// TODO: Switch (без тега label) как самостоятельный компонент
+export var Toggle = forwardRef(function (inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'Toggle'
+    });
+    var _a = props.align, align = _a === void 0 ? 'center' : _a, _b = props.labelPlacement, labelPlacement = _b === void 0 ? 'right' : _b, _c = props.size, size = _c === void 0 ? 'm' : _c, className = props.className, label = props.label, labelProps = props.labelProps, disabled = props.disabled, checked = props.checked, inputRef = props.inputRef, other = __rest(props, ["align", "labelPlacement", "size", "className", "label", "labelProps", "disabled", "checked", "inputRef"]);
+    return (React.createElement(FormControlLabel, __assign({ label: label, size: size, labelPlacement: labelPlacement, disabled: disabled, align: align, className: className, ref: ref }, labelProps),
+        React.createElement("span", { className: cnToggle({ size: size, disabled: disabled, checked: checked }) },
+            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';

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

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

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

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

package/__inner__/esm/components/Tooltip/Tooltip.css

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

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

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