@ozen-ui/kit 0.52.0 → 0.54.0

package/__inner__/cjs/components/ThemeProvider/_color/Theme_color_vipDefault.css

@@ -0,0 +1,172 @@
+.Theme_color_vipDefault {
+  --color-content-primary: #17161a;
+  --color-content-secondary: #636574;
+  --color-content-tertiary: #7e8194;
+  --color-content-disabled: #9a9eb5;
+  --color-content-ghost-disabled: rgb(255 255 255 / 40%);
+  --color-content-action: #d4aa6b;
+  --color-content-action-hover: #ad8b59;
+  --color-content-action-pressed: #866c47;
+  --color-content-action-dark: #5f4d36;
+  --color-content-action-secondary: #2c2c33;
+  --color-content-action-secondary-hover: #1e1d22;
+  --color-content-action-secondary-pressed: #17161a;
+  --color-content-action-secondary-dark: #17161a;
+  --color-content-action-on: #fff;
+  --color-content-error: #f664af;
+  --color-content-error-hover: #c85390;
+  --color-content-error-pressed: #9a4270;
+  --color-content-error-dark: #6c3151;
+  --color-content-warning: #ff7f50;
+  --color-content-warning-hover: #cf6944;
+  --color-content-warning-pressed: #9f5237;
+  --color-content-warning-dark: #703c2b;
+  --color-content-success: #0b0;
+  --color-content-success-hover: #039904;
+  --color-content-success-pressed: #067607;
+  --color-content-success-dark: #0a540b;
+  --color-content-info: #023dff;
+  --color-content-info-hover: #0534d0;
+  --color-content-info-pressed: #082ba0;
+  --color-content-info-dark: #0a2171;
+  --color-content-primary-inverse: #fff;
+  --color-content-accent-secondary: #989aa5;
+  --color-accent-main: #14151b;
+  --color-content-accent-primary: #c7c8ce;
+  --color-accent-primary: #1b1c24;
+  --color-content-accent-disabled: #7b7e8c;
+  --color-background-main: #fff;
+  --color-background-main-hover: #f5f5f8;
+  --color-background-main-pressed: #ebecf0;
+  --color-background-primary: #f5f5f8;
+  --color-background-primary-hover: #ebecf0;
+  --color-background-primary-pressed: #d7d8e1;
+  --color-background-secondary: #ebecf0;
+  --color-background-secondary-hover: #d7d8e1;
+  --color-background-secondary-pressed: #c2c5d3;
+  --color-background-tertiary: #d7d8e1;
+  --color-background-tertiary-hover: #c2c5d3;
+  --color-background-tertiary-pressed: #aeb1c4;
+  --color-background-disabled: #ebecf0;
+  --color-background-action: #d4aa6b;
+  --color-background-action-hover: #ad8b59;
+  --color-background-action-pressed: #866c47;
+  --color-background-action-active-disabled: #eeddc4;
+  --color-background-action-light: #f9f3e9;
+  --color-background-action-light-hover: #f6eee1;
+  --color-background-action-light-pressed: #eeddc4;
+  --color-background-accent-action-light: #866c47;
+  --color-background-accent-action-light-hover: #5f4d36;
+  --color-background-accent-action-light-pressed: #372e24;
+  --color-background-action-secondary: #2c2c33;
+  --color-background-action-secondary-hover: #1e1d22;
+  --color-background-action-secondary-pressed: #17161a;
+  --color-background-action-secondary-active-disabled: #c2c5d3;
+  --color-background-action-secondary-light: #ebecf0;
+  --color-background-action-secondary-light-hover: #d7d8e1;
+  --color-background-action-secondary-light-pressed: #c2c5d3;
+  --color-background-accent-action-secondary-light: #636574;
+  --color-background-accent-action-secondary-light-hover: #474853;
+  --color-background-accent-action-secondary-light-pressed: #2c2c33;
+  --color-background-error: #f664af;
+  --color-background-error-hover: #c85390;
+  --color-background-error-pressed: #9a4270;
+  --color-background-error-light: #fee8f3;
+  --color-background-error-light-hover: #fde0ef;
+  --color-background-error-light-pressed: #fbc1df;
+  --color-background-accent-error-light: #9a4270;
+  --color-background-accent-error-light-hover: #6c3151;
+  --color-background-accent-error-light-pressed: #3e2031;
+  --color-background-warning: #ff7f50;
+  --color-background-warning-hover: #cf6944;
+  --color-background-warning-pressed: #9f5237;
+  --color-background-warning-light: #ffece5;
+  --color-background-warning-light-hover: #ffe5dc;
+  --color-background-warning-light-pressed: #ffccb9;
+  --color-background-accent-warning-light: #9f5237;
+  --color-background-accent-warning-light-hover: #703c2b;
+  --color-background-accent-warning-light-pressed: #40251e;
+  --color-background-success: #0b0;
+  --color-background-success-hover: #039904;
+  --color-background-success-pressed: #067607;
+  --color-background-success-light: #d9f5d9;
+  --color-background-success-light-hover: #ccf1cc;
+  --color-background-success-light-pressed: #99e499;
+  --color-background-accent-success-light: #067607;
+  --color-background-accent-success-light-hover: #0a540b;
+  --color-background-accent-success-light-pressed: #0d310e;
+  --color-background-info: #023dff;
+  --color-background-info-hover: #0534d0;
+  --color-background-info-pressed: #082ba0;
+  --color-background-info-light: #d9e2ff;
+  --color-background-info-light-hover: #ccd8ff;
+  --color-background-info-light-pressed: #9ab1ff;
+  --color-background-accent-info-light: #082ba0;
+  --color-background-accent-info-light-hover: #0a2171;
+  --color-background-accent-info-light-pressed: #0d1841;
+  --color-background-main-inverse: #0d0e12;
+  --color-background-overlay: rgb(0 0 0 / 50%);
+  --color-background-ghost: rgb(255 255 255 / 10%);
+  --color-background-ghost-hover: rgb(255 255 255 / 20%);
+  --color-background-ghost-pressed: rgb(255 255 255 / 30%);
+  --color-background-ghost-disabled: rgb(255 255 255 / 40%);
+  --color-border-main: #c2c5d3;
+  --color-border-main-hover: #aeb1c4;
+  --color-border-main-pressed: #9a9eb5;
+  --color-border-secondary: #d7d8e1;
+  --color-border-secondary-hover: #c2c5d3;
+  --color-border-secondary-pressed: #aeb1c4;
+  --color-border-disabled: #c2c5d3;
+  --color-border-ghost-disabled: rgb(255 255 255 / 40%);
+  --color-border-focused: #eeddc4;
+  --color-border-action: #d4aa6b;
+  --color-border-action-hover: #ad8b59;
+  --color-border-action-pressed: #866c47;
+  --color-border-action-secondary: #2c2c33;
+  --color-border-action-secondary-hover: #1e1d22;
+  --color-border-action-secondary-pressed: #17161a;
+  --color-border-error: #f664af;
+  --color-border-warning: #ff7f50;
+  --color-border-success: #0b0;
+  --color-border-info: #023dff;
+  --color-border-main-on: #fff;
+  --color-border-accent-main: #989aa5;
+  --color-border-accent-disabled: #5f6374;
+  --color-border-accent-focused: #2d261f;
+  --color-accent-main-hover: #1b1c24;
+  --color-accent-main-pressed: #252732;
+  --color-accent-primary-hover: #252732;
+  --color-accent-primary-pressed: #2f3240;
+  --color-accent-secondary: #252732;
+  --color-accent-secondary-hover: #2f3240;
+  --color-accent-secondary-pressed: #393c4d;
+  --color-accent-tertiary: #2f3240;
+  --color-accent-tertiary-hover: #393c4d;
+  --color-accent-tertiary-pressed: #43475b;
+  --color-accent-disabled: #2f3240;
+  --color-accent-main-inverse: #c7c8ce;
+  --color-additional-a1: #067607;
+  --color-additional-a2: #0b0;
+  --color-additional-a3: #99e499;
+  --color-additional-b1: #763986;
+  --color-additional-b2: #ba55d3;
+  --color-additional-b3: #e3bbed;
+  --color-additional-c1: #638125;
+  --color-additional-c2: #9acd32;
+  --color-additional-c3: #d7ebad;
+  --color-additional-d1: #23867f;
+  --color-additional-d2: #30d5c8;
+  --color-additional-d3: #aceee9;
+  --color-additional-e1: #9f6d24;
+  --color-additional-e2: #ffac30;
+  --color-additional-e3: #ffdeac;
+  --color-additional-f1: #1966a0;
+  --color-additional-f2: #1fa1ff;
+  --color-additional-f3: #a5d9ff;
+  --color-additional-g1: #9f3b3d;
+  --color-additional-g2: #ff5959;
+  --color-additional-g3: #ffbdbd;
+  --color-additional-h1: #9f891a;
+  --color-additional-h2: #ffda1f;
+  --color-additional-h3: #fff0a5;
+}

package/__inner__/cjs/components/ThemeProvider/_typography/Theme_typography_ozenDefault.css

@@ -12,6 +12,7 @@
   --typography-heading-xl-font: 700 24px/32px 'Roboto', sans-serif;
   --typography-text-xl-font: 400 24px/32px 'Roboto', sans-serif;
   --typography-text-l-font: 400 18px/28px 'Roboto', sans-serif;
+  --typography-heading-l-font: 700 20px/28px 'Roboto', sans-serif;
   --typography-text-l_1-font: 500 18px/28px 'Roboto', sans-serif;
   --typography-text-m-font: 400 16px/24px 'Roboto', sans-serif;
   --typography-text-m_1-font: 500 16px/24px 'Roboto', sans-serif;

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

@@ -7,5 +7,5 @@ export declare const zIndex: readonly ["--z-index-default", "--z-index-absolute"
 export declare const space: readonly ["--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 declare const spacing: readonly ["--spacing-4xs", "--spacing-3xs", "--spacing-2xs", "--spacing-xs", "--spacing-s", "--spacing-m", "--spacing-l", "--spacing-xl", "--spacing-2xl", "--spacing-3xl", "--spacing-4xl"];
 export declare const control: readonly ["--control-padding-4xs", "--control-padding-3xs", "--control-padding-2xs", "--control-padding-xs", "--control-padding-s", "--control-padding-m", "--control-padding-l", "--control-height-4xs", "--control-height-3xs", "--control-height-2xs", "--control-height-xs", "--control-height-s", "--control-height-m", "--control-height-l"];
-export declare const typography: readonly ["--typography-text-xl_1-font", "--typography-text-4xl_1-font", "--typography-text-3xl_1-font", "--typography-text-2xl_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 declare const typography: readonly ["--typography-text-xl_1-font", "--typography-text-4xl_1-font", "--typography-text-3xl_1-font", "--typography-text-2xl_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-heading-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 declare const transition: readonly ["--transition-default", "--transition-slow"];

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

@@ -257,6 +257,7 @@ exports.typography = [
     '--typography-heading-xl-font',
     '--typography-text-xl-font',
     '--typography-text-l-font',
+    '--typography-heading-l-font',
     '--typography-text-l_1-font',
     '--typography-text-m-font',
     '--typography-text-m_1-font',

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

@@ -49,6 +49,7 @@ 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 { TagProps as TagPropsNext } from '../TagNext';
 import type { TextareaProps } from '../Textarea';
 import type { ToggleProps } from '../Toggle';
 import type { TooltipProps } from '../Tooltip';
@@ -128,6 +129,7 @@ export type Theme = {
         TableCell?: Partial<TableCellProps>;
         TableContainer?: Partial<TableContainerProps>;
         Tag?: Partial<TagProps>;
+        TagNext?: Partial<TagPropsNext>;
         Textarea?: Partial<TextareaProps>;
         Toggle?: Partial<ToggleProps>;
         Tooltip?: Partial<TooltipProps>;

package/__inner__/cjs/components/Typography/Typography.css

@@ -157,6 +157,14 @@
 .Typography_variant_heading-xl.Typography_defaultMargin {
         margin-block-end: var(--spacing-l);
       }
+.Typography_variant_heading-l {
+      font: var(--typography-heading-l-font);
+      letter-spacing: var(--typography-heading-l-letter_spacing, 0);
+      text-transform: var(--typography-heading-l-text_transform, none);
+    }
+.Typography_variant_heading-l.Typography_defaultMargin {
+        margin-block-end: var(--spacing-m);
+      }
 .Typography_variant_text-4xl {
       font: var(--typography-text-4xl-font);
       letter-spacing: var(--typography-text-4xl-letter_spacing, 0);

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

@@ -1,7 +1,7 @@
 import './Typography.css';
 import type { ElementType, ReactNode } from 'react';
 import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
-export declare const typographyVariant: readonly ["heading-4xl", "heading-3xl", "heading-2xl", "heading-xl", "text-4xl", "text-4xl_1", "text-3xl", "text-3xl_1", "text-2xl", "text-2xl_1", "text-xl", "text-xl_1", "text-l", "text-l_1", "text-m", "text-m_1", "text-s", "text-s_1", "text-xs", "text-xs_1", "text-2xs", "text-2xs_1", "text-3xs", "text-3xs_1", "caption-3xs", "caption-3xs_1", "inherit"];
+export declare const typographyVariant: readonly ["heading-4xl", "heading-3xl", "heading-2xl", "heading-xl", "heading-l", "text-4xl", "text-4xl_1", "text-3xl", "text-3xl_1", "text-2xl", "text-2xl_1", "text-xl", "text-xl_1", "text-l", "text-l_1", "text-m", "text-m_1", "text-s", "text-s_1", "text-xs", "text-xs_1", "text-2xs", "text-2xs_1", "text-3xs", "text-3xs_1", "caption-3xs", "caption-3xs_1", "inherit"];
 export type TypographyVariant = (typeof typographyVariant)[number];
 export declare const typographyDisplayVariant: readonly ["block", "inline", "inlineBlock"];
 export type TypographyDisplayVariant = (typeof typographyDisplayVariant)[number];

package/__inner__/cjs/components/Typography/Typography.js

@@ -14,6 +14,7 @@ exports.typographyVariant = [
     'heading-3xl',
     'heading-2xl',
     'heading-xl',
+    'heading-l',
     'text-4xl',
     'text-4xl_1',
     'text-3xl',

package/__inner__/cjs/components/Typography/utils.js

@@ -6,6 +6,7 @@ exports.matchVariantToTag = {
     'heading-3xl': 'h2',
     'heading-2xl': 'h3',
     'heading-xl': 'h4',
+    'heading-l': 'h5',
     'text-4xl': 'p',
     'text-4xl_1': 'p',
     'text-3xl': 'p',

package/__inner__/cjs/locale/locale.js

@@ -56,16 +56,14 @@ exports.ruRU = {
         },
         Calendar: {
             locale: 'ru-RU',
-            calendarSwitcherProps: {
-                getPeriodSwitchAriaLabel: function (step) {
-                    if (step === 'days') {
-                        return ['Предыдущий месяц', 'Следующий месяц'];
-                    }
-                    if (step === 'months') {
-                        return ['Предыдущий год', 'Следующий год'];
-                    }
-                    return ['Предыдущий период', 'Следующий период'];
-                },
+            getPeriodSwitchAriaLabel: function (step) {
+                if (step === 'days') {
+                    return ['Предыдущий месяц', 'Следующий месяц'];
+                }
+                if (step === 'months') {
+                    return ['Предыдущий год', 'Следующий год'];
+                }
+                return ['Предыдущий период', 'Следующий период'];
             },
         },
         DatePicker: {
@@ -128,16 +126,14 @@ exports.kkKZ = {
         },
         Calendar: {
             locale: 'kk-KZ',
-            calendarSwitcherProps: {
-                getPeriodSwitchAriaLabel: function (step) {
-                    if (step === 'days') {
-                        return ['Алдыңғы ай', 'Келесі ай'];
-                    }
-                    if (step === 'months') {
-                        return ['Өткен жыл', 'Келесі жыл'];
-                    }
-                    return ['Алдыңғы кезең', 'Келесі кезең'];
-                },
+            getPeriodSwitchAriaLabel: function (step) {
+                if (step === 'days') {
+                    return ['Алдыңғы ай', 'Келесі ай'];
+                }
+                if (step === 'months') {
+                    return ['Өткен жыл', 'Келесі жыл'];
+                }
+                return ['Алдыңғы кезең', 'Келесі кезең'];
             },
         },
         DatePicker: {
@@ -201,16 +197,14 @@ exports.enUS = {
         Calendar: {
             locale: 'en-US',
             startDay: 0,
-            calendarSwitcherProps: {
-                getPeriodSwitchAriaLabel: function (step) {
-                    if (step === 'days') {
-                        return ['Previous month', 'Next month'];
-                    }
-                    if (step === 'months') {
-                        return ['Previous year', 'Next year'];
-                    }
-                    return ['Previous period', 'Next period'];
-                },
+            getPeriodSwitchAriaLabel: function (step) {
+                if (step === 'days') {
+                    return ['Previous month', 'Next month'];
+                }
+                if (step === 'months') {
+                    return ['Previous year', 'Next year'];
+                }
+                return ['Previous period', 'Next period'];
             },
         },
         DatePicker: {

package/__inner__/cjs/utils/date/index.d.ts

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

package/__inner__/cjs/utils/date/index.js

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

package/__inner__/cjs/utils/date/monthDiff/index.d.ts

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

package/__inner__/cjs/utils/date/monthDiff/index.js

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

package/__inner__/cjs/utils/date/monthDiff/monthDiff.d.ts

@@ -0,0 +1 @@
+export declare const monthDiff: (d1: Date, d2: Date) => number;

package/__inner__/cjs/utils/date/monthDiff/monthDiff.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.monthDiff = void 0;
+var monthDiff = function (d1, d2) {
+    var months;
+    months = (d2.getFullYear() - d1.getFullYear()) * 12;
+    months -= d1.getMonth();
+    months += d2.getMonth();
+    return months <= 0 ? 0 : months;
+};
+exports.monthDiff = monthDiff;

package/__inner__/cjs/utils/getByMap/getByMap.d.ts

@@ -0,0 +1 @@
+export declare function getByMap<KEY extends string | number, VALUE>(map: Record<KEY, VALUE>, key: KEY): VALUE;

package/__inner__/cjs/utils/getByMap/getByMap.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getByMap = void 0;
+function getByMap(map, key) {
+    return map[key];
+}
+exports.getByMap = getByMap;

package/__inner__/cjs/utils/getByMap/index.d.ts

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

package/__inner__/cjs/utils/getByMap/index.js

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

package/__inner__/cjs/utils/getIconSizeToFormElement.js

@@ -1,12 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getIconSizeToFormElement = void 0;
-var matchIconSizeToFormElement = {
-    '2xs': 's',
-    xs: 's',
+var getByMap_1 = require("./getByMap");
+var typeMap = {
     s: 's',
     m: 'm',
     l: 'm',
+    xs: 's',
+    '2xs': 's',
+};
+var getIconSizeToFormElement = function (size) {
+    return (0, getByMap_1.getByMap)(typeMap, size);
 };
-var getIconSizeToFormElement = function (size) { return matchIconSizeToFormElement === null || matchIconSizeToFormElement === void 0 ? void 0 : matchIconSizeToFormElement[size]; };
 exports.getIconSizeToFormElement = getIconSizeToFormElement;

package/__inner__/cjs/utils/getPaperSizeToFormElement.d.ts

@@ -1,3 +1,2 @@
-import type { PaperProps } from '../components/Paper';
 import type { FormElementSizeVariant } from '../types/FormElementSizeVariant';
-export declare const getPaperSizeToFormElement: (size: FormElementSizeVariant) => PaperProps['radius'];
+export declare const getPaperSizeToFormElement: (size: FormElementSizeVariant) => "s" | "l" | "xl" | "xs" | "2xl";

package/__inner__/cjs/utils/getPaperSizeToFormElement.js

@@ -1,12 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getPaperSizeToFormElement = void 0;
-var matchPaperSizeToFormElement = {
-    '2xs': 's',
-    xs: 's',
+var getByMap_1 = require("./getByMap");
+var typeMap = {
     s: 'l',
     m: 'l',
     l: 'l',
+    xs: 's',
+    '2xs': 's',
+};
+var getPaperSizeToFormElement = function (size) {
+    return (0, getByMap_1.getByMap)(typeMap, size);
 };
-var getPaperSizeToFormElement = function (size) { return matchPaperSizeToFormElement === null || matchPaperSizeToFormElement === void 0 ? void 0 : matchPaperSizeToFormElement[size]; };
 exports.getPaperSizeToFormElement = getPaperSizeToFormElement;

package/__inner__/esm/components/Autocomplete/helper.d.ts

@@ -42,6 +42,7 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     placeholder?: string | undefined;
     required?: boolean | undefined;
     fullWidth?: boolean | undefined;
+    disableStroke?: boolean | undefined;
     hint?: string | null | undefined;
     renderLeft?: string | number | import("react").FC<import("react").SVGProps<SVGSVGElement> & {
         color?: string | undefined;
@@ -142,6 +143,7 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     placeholder?: string | undefined;
     required?: boolean | undefined;
     fullWidth?: boolean | undefined;
+    disableStroke?: boolean | undefined;
     hint?: string | null | undefined;
     renderLeft?: string | number | import("react").FC<import("react").SVGProps<SVGSVGElement> & {
         color?: string | undefined;

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

@@ -31,7 +31,7 @@ type AutocompleteOpenUncontrolledProps = {
     /** Состояние открытие по умолчанию (неконтролируемый компонент) */
     defaultOpen?: boolean;
 };
-type AutocompleteInputProps = Pick<InputProps, 'placeholder' | 'autoFocus' | 'fullWidth' | 'disabled' | 'label' | 'required' | 'style' | 'error' | 'hint' | 'renderLeft' | 'renderRight' | 'className' | 'inputProps' | 'hintProps' | 'bodyProps' | 'onKeyDown'>;
+type AutocompleteInputProps = Pick<InputProps, 'placeholder' | 'autoFocus' | 'fullWidth' | 'disabled' | 'label' | 'required' | 'disableStroke' | 'style' | 'error' | 'hint' | 'renderLeft' | 'renderRight' | 'className' | 'inputProps' | 'hintProps' | 'bodyProps' | 'onKeyDown'>;
 type AutocompleteDataListProps = Partial<Omit<DataListProps, 'onClose' | 'open' | 'anchorRef' | 'multiple' | 'selected' | 'onSelect'>>;
 export type AutocompleteProps<OPTION = AutocompleteDefaultOption> = {
     /** Список вариантов выбора (опции) */

package/__inner__/esm/components/Calendar/Calendar.css

@@ -6,6 +6,7 @@
   flex-direction: column;
 }
 .Calendar_size_s {
+      --calendar-width: 252px;
       --calendar-grid-size: 236px;
       --calendar-switcher-height: var(--control-height-s);
       --calendar-switcher-margin: 0 var(--spacing-xs);
@@ -18,6 +19,7 @@
       text-transform: var(--typography-text-s-text_transform, none);
     }
 .Calendar_size_m {
+      --calendar-width: 308px;
       --calendar-grid-size: 292px;
       --calendar-switcher-height: var(--control-height-m);
       --calendar-switcher-margin: 0 var(--spacing-xs);
@@ -30,6 +32,7 @@
       text-transform: var(--typography-text-m-text_transform, none);
     }
 .Calendar_size_l {
+      --calendar-width: 364px;
       --calendar-grid-size: 348px;
       --calendar-switcher-height: var(--control-height-l);
       --calendar-switcher-margin: 0 var(--spacing-xs);

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

@@ -1,4 +1,3 @@
 import './Calendar.css';
-import type { CalendarBaseProps } from './types';
-export declare const cnCalendar: import("@bem-react/classname").ClassNameFormatter;
-export declare const Calendar: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<CalendarBaseProps, "div">;
+import type { CalendarComponent } from './types';
+export declare const Calendar: CalendarComponent;

package/__inner__/esm/components/Calendar/Calendar.js

@@ -1,87 +1,23 @@
-import { __assign, __read, __rest } from "tslib";
+import { __assign, __rest } from "tslib";
 import './Calendar.css';
-import React, { useState, useEffect } from 'react';
-import { DatePickerProvider } from '@rehookify/datepicker';
-import { useControlled } from '../../hooks/useControlled';
+import React, { forwardRef } from 'react';
 import { useThemeProps } from '../../hooks/useThemeProps';
-import { cn } from '../../utils/classname';
-import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
-import { Divider } from '../Divider';
-import { CalendarContext } from './CalendarContext';
-import { CalendarAdditionalControls, CalendarGrid, CalendarSwitcher, } from './components';
-import { CALENDAR_DEFAULT_AS, CALENDAR_DEFAULT_SIZE, CALENDAR_DEFAULT_START_DAY, } from './constants';
-export var cnCalendar = cn('Calendar');
-export var Calendar = polymorphicComponentWithRef(function (inProps, ref) {
+import { getByMap } from '../../utils/getByMap';
+import { CalendarModeRange, CalendarModeSingle } from './components';
+import { CALENDAR_DEFAULT_MODE, CALENDAR_DEFAULT_SIZE, CALENDAR_DEFAULT_START_DAY, } from './constants';
+import { getPeriodSwitchAriaLabel as createPeriodSwitchAriaLabel } from './utils';
+var typeMap = {
+    range: CalendarModeRange,
+    single: CalendarModeSingle,
+};
+// eslint-disable-next-line react/display-name
+export var Calendar = forwardRef(function (inProps, ref) {
     var props = useThemeProps({
         props: inProps,
         name: 'Calendar',
     });
-    var _a = props.size, size = _a === void 0 ? CALENDAR_DEFAULT_SIZE : _a, _b = props.startDay, startDay = _b === void 0 ? CALENDAR_DEFAULT_START_DAY : _b, _c = props.as, Tag = _c === void 0 ? CALENDAR_DEFAULT_AS : _c, renderAdditionalControls = props.renderAdditionalControls, locale = props.locale, onChangeProp = props.onChange, onOffsetDateChangeProp = props.onOffsetDateChange, onMonthClick = props.onMonthClick, onDayClick = props.onDayClick, onYearClick = props.onYearClick, valueProp = props.value, defaultValue = props.defaultValue, offsetDateProp = props.offsetDate, defaultOffsetDate = props.defaultOffsetDate, exclude = props.exclude, minDate = props.minDate, maxDate = props.maxDate, className = props.className, calendarSwitcherProps = props.calendarSwitcherProps, other = __rest(props, ["size", "startDay", "as", "renderAdditionalControls", "locale", "onChange", "onOffsetDateChange", "onMonthClick", "onDayClick", "onYearClick", "value", "defaultValue", "offsetDate", "defaultOffsetDate", "exclude", "minDate", "maxDate", "className", "calendarSwitcherProps"]);
-    var _d = __read(useState('days'), 2), step = _d[0], setStep = _d[1];
-    var _e = __read(useControlled({
-        value: valueProp,
-        defaultValue: defaultValue,
-        name: 'Calendar',
-        state: 'value',
-    }), 2), value = _e[0], setValue = _e[1];
-    var _f = __read(useControlled({
-        value: offsetDateProp,
-        defaultValue: defaultOffsetDate,
-        name: 'Calendar',
-        state: 'offsetDate',
-    }), 2), offsetDate = _f[0], setOffsetDateState = _f[1];
-    var onDatesChange = function (data) {
-        var value = data[0];
-        if (value) {
-            setValue(value);
-            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(value);
-        }
-    };
-    var onOffsetChange = function (date) {
-        setOffsetDateState(date);
-        onOffsetDateChangeProp === null || onOffsetDateChangeProp === void 0 ? void 0 : onOffsetDateChangeProp(date);
-    };
-    useEffect(function () {
-        if (value)
-            onOffsetChange(value);
-    }, [value]);
-    var config = {
-        calendar: {
-            startDay: startDay,
-        },
-        locale: {
-            locale: locale,
-            day: 'numeric',
-            weekday: 'short',
-        },
-        exclude: exclude,
-        offsetDate: offsetDate,
-        onDatesChange: onDatesChange,
-        onOffsetChange: onOffsetChange,
-        dates: { minDate: minDate, maxDate: maxDate },
-        years: { numberOfYears: 15 },
-        selectedDates: value ? [value] : [],
-    };
-    // Управление представлениями календаря
-    var goStep = function (step) {
-        setStep(step);
-    };
-    return (React.createElement(DatePickerProvider, { config: config },
-        React.createElement(CalendarContext.Provider, { value: {
-                size: size,
-                step: step,
-                goStep: goStep,
-                minDate: minDate,
-                maxDate: maxDate,
-                onMonthClick: onMonthClick,
-                onDayClick: onDayClick,
-                onYearClick: onYearClick,
-                onOffsetChange: setOffsetDateState,
-            } },
-            React.createElement(Tag, __assign({ className: cnCalendar({ size: size }, [className]) }, other, { ref: ref }),
-                React.createElement(CalendarSwitcher, __assign({}, calendarSwitcherProps)),
-                React.createElement(Divider, { color: "secondary" }),
-                React.createElement(CalendarGrid, null),
-                React.createElement(CalendarAdditionalControls, { renderAdditionalControls: renderAdditionalControls })))));
+    var _a = props.size, size = _a === void 0 ? CALENDAR_DEFAULT_SIZE : _a, _b = props.mode, mode = _b === void 0 ? CALENDAR_DEFAULT_MODE : _b, _c = props.startDay, startDay = _c === void 0 ? CALENDAR_DEFAULT_START_DAY : _c, getPeriodSwitchAriaLabelProp = props.getPeriodSwitchAriaLabel, other = __rest(props, ["size", "mode", "startDay", "getPeriodSwitchAriaLabel"]);
+    var getPeriodSwitchAriaLabel = getPeriodSwitchAriaLabelProp || createPeriodSwitchAriaLabel;
+    var Component = getByMap(typeMap, mode);
+    return (React.createElement(Component, __assign({ size: size, startDay: startDay, getPeriodSwitchAriaLabel: getPeriodSwitchAriaLabel }, other, { ref: ref })));
 });
-Calendar.displayName = 'Calendar';

package/__inner__/esm/components/Calendar/CalendarContext.d.ts

@@ -1,14 +1,14 @@
 import React from 'react';
-import type { CalendarStepVariant, CalendarSizeVariant, CalendarBaseProps } from './types';
+import type { CalendarSizeVariant, CalendarProps } from './types';
 export interface CalendarContextValue {
-    size?: CalendarSizeVariant;
-    step: CalendarStepVariant;
-    goStep?: (step: CalendarStepVariant) => void;
-    onMonthClick?: CalendarBaseProps['onMonthClick'];
-    onDayClick?: CalendarBaseProps['onDayClick'];
-    onYearClick?: CalendarBaseProps['onYearClick'];
     minDate?: Date;
     maxDate?: Date;
+    size?: CalendarSizeVariant;
     onOffsetChange?(d: Date): void;
+    onDayClick?: CalendarProps['onDayClick'];
+    onYearClick?: CalendarProps['onYearClick'];
+    onMonthClick?: CalendarProps['onMonthClick'];
+    getPeriodSwitchAriaLabel?: CalendarProps['getPeriodSwitchAriaLabel'];
 }
 export declare const CalendarContext: React.Context<CalendarContextValue>;
+export declare const useCalendar: () => CalendarContextValue;