@ozen-ui/kit 0.52.0 → 0.54.0

package/__inner__/esm/components/ThemeProvider/_color/Theme_color_vipDark.css

@@ -0,0 +1,172 @@
+.Theme_color_vipDark {
+  --color-content-action-on: #fff;
+  --color-content-secondary: #aeb1c4;
+  --color-content-primary: #fff;
+  --color-content-tertiary: #7e8194;
+  --color-content-disabled: #636574;
+  --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: #eeddc4;
+  --color-content-action-secondary: #9a9eb5;
+  --color-content-action-secondary-hover: #7e8194;
+  --color-content-action-secondary-pressed: #636574;
+  --color-content-action-secondary-dark: #d7d8e1;
+  --color-background-main: #1e1d22;
+  --color-content-error: #f664af;
+  --color-content-error-hover: #c85390;
+  --color-content-error-pressed: #9a4270;
+  --color-content-error-dark: #fbc1df;
+  --color-content-warning: #ff7f50;
+  --color-content-warning-hover: #cf6944;
+  --color-content-warning-pressed: #9f5237;
+  --color-content-warning-dark: #ffccb9;
+  --color-content-success: #0b0;
+  --color-content-success-hover: #039904;
+  --color-content-success-pressed: #067607;
+  --color-content-success-dark: #99e499;
+  --color-content-info: #023dff;
+  --color-content-info-hover: #0534d0;
+  --color-content-info-pressed: #082ba0;
+  --color-content-info-dark: #9ab1ff;
+  --color-content-primary-inverse: #1e1d22;
+  --color-background-main-inverse: #d9dade;
+  --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-hover: #2c2c33;
+  --color-background-main-pressed: #474853;
+  --color-background-primary: #17161a;
+  --color-background-primary-hover: #1e1d22;
+  --color-background-primary-pressed: #2c2c33;
+  --color-background-secondary: #2c2c33;
+  --color-background-secondary-hover: #474853;
+  --color-background-secondary-pressed: #636574;
+  --color-background-tertiary: #474853;
+  --color-background-tertiary-hover: #636574;
+  --color-background-tertiary-pressed: #7e8194;
+  --color-background-disabled: #2c2c33;
+  --color-background-action: #ad8b59;
+  --color-background-action-hover: #d4aa6b;
+  --color-background-action-pressed: #db8;
+  --color-background-action-active-disabled: #5f4d36;
+  --color-background-action-light: #2d261f;
+  --color-background-action-light-hover: #372e24;
+  --color-background-action-light-pressed: #5f4d36;
+  --color-background-accent-action-light: #5f4d36;
+  --color-background-accent-action-light-hover: #866c47;
+  --color-background-accent-action-light-pressed: #ad8b59;
+  --color-background-action-secondary: #7e8194;
+  --color-background-action-secondary-hover: #9a9eb5;
+  --color-background-action-secondary-pressed: #aeb1c4;
+  --color-background-action-secondary-active-disabled: #636574;
+  --color-background-action-secondary-light: #2c2c33;
+  --color-background-action-secondary-light-hover: #474853;
+  --color-background-action-secondary-light-pressed: #636574;
+  --color-background-accent-action-secondary-light: #2c2c33;
+  --color-background-accent-action-secondary-light-hover: #474853;
+  --color-background-accent-action-secondary-light-pressed: #636574;
+  --color-background-error: #c85390;
+  --color-background-error-hover: #f664af;
+  --color-background-error-pressed: #f883bf;
+  --color-background-error-light: #321c2a;
+  --color-background-error-light-hover: #3e2031;
+  --color-background-error-light-pressed: #6c3151;
+  --color-background-accent-error-light: #6c3151;
+  --color-background-accent-error-light-hover: #9a4270;
+  --color-background-accent-error-light-pressed: #c85390;
+  --color-background-warning: #cf6944;
+  --color-background-warning-hover: #ff7f50;
+  --color-background-warning-pressed: #ff9973;
+  --color-background-warning-light: #34201b;
+  --color-background-warning-light-hover: #40251e;
+  --color-background-warning-light-pressed: #703c2b;
+  --color-background-accent-warning-light: #703c2b;
+  --color-background-accent-warning-light-hover: #9f5237;
+  --color-background-accent-warning-light-pressed: #cf6944;
+  --color-background-success: #039904;
+  --color-background-success-hover: #0b0;
+  --color-background-success-pressed: #33c933;
+  --color-background-success-light: #0e290f;
+  --color-background-success-light-hover: #0d310e;
+  --color-background-success-light-pressed: #0a540b;
+  --color-background-accent-success-light: #0a540b;
+  --color-background-accent-success-light-hover: #067607;
+  --color-background-accent-success-light-pressed: #039904;
+  --color-background-info: #0534d0;
+  --color-background-info-hover: #023dff;
+  --color-background-info-pressed: #3564ff;
+  --color-background-info-light: #0e1636;
+  --color-background-info-light-hover: #0d1841;
+  --color-background-info-light-pressed: #0a2171;
+  --color-background-accent-info-light: #0a2171;
+  --color-background-accent-info-light-hover: #082ba0;
+  --color-background-accent-info-light-pressed: #0534d0;
+  --color-background-overlay: rgb(0 0 0 / 60%);
+  --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: #474853;
+  --color-border-main-hover: #636574;
+  --color-border-main-pressed: #7e8194;
+  --color-border-secondary: #2c2c33;
+  --color-border-secondary-hover: #474853;
+  --color-border-secondary-pressed: #636574;
+  --color-border-disabled: #474853;
+  --color-border-ghost-disabled: rgb(255 255 255 / 40%);
+  --color-border-focused: #372e24;
+  --color-border-action: #ad8b59;
+  --color-border-action-hover: #866c47;
+  --color-border-action-pressed: #5f4d36;
+  --color-border-action-secondary: #d7d8e1;
+  --color-border-action-secondary-hover: #c2c5d3;
+  --color-border-action-secondary-pressed: #aeb1c4;
+  --color-border-error: #c85390;
+  --color-border-warning: #cf6944;
+  --color-border-success: #039904;
+  --color-border-info: #0534d0;
+  --color-border-main-on: #fff;
+  --color-border-accent-main: #989aa5;
+  --color-border-accent-disabled: #5f6374;
+  --color-border-accent-focused: #372e24;
+  --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__/esm/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__/esm/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__/esm/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__/esm/components/ThemeProvider/themes/helper.js

@@ -254,6 +254,7 @@ export var 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__/esm/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__/esm/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__/esm/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__/esm/components/Typography/Typography.js

@@ -11,6 +11,7 @@ export var typographyVariant = [
     'heading-3xl',
     'heading-2xl',
     'heading-xl',
+    'heading-l',
     'text-4xl',
     'text-4xl_1',
     'text-3xl',

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

@@ -3,6 +3,7 @@ export var 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__/esm/locale/locale.js

@@ -53,16 +53,14 @@ export var 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: {
@@ -125,16 +123,14 @@ export var 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: {
@@ -198,16 +194,14 @@ export var 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__/esm/utils/date/index.d.ts

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,7 @@
+export var monthDiff = function (d1, d2) {
+    var months;
+    months = (d2.getFullYear() - d1.getFullYear()) * 12;
+    months -= d1.getMonth();
+    months += d2.getMonth();
+    return months <= 0 ? 0 : months;
+};

package/__inner__/esm/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__/esm/utils/getByMap/getByMap.js

@@ -0,0 +1,3 @@
+export function getByMap(map, key) {
+    return map[key];
+}

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

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

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

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

package/__inner__/esm/utils/getIconSizeToFormElement.js

@@ -1,8 +1,11 @@
-var matchIconSizeToFormElement = {
-    '2xs': 's',
-    xs: 's',
+import { getByMap } from './getByMap';
+var typeMap = {
     s: 's',
     m: 'm',
     l: 'm',
+    xs: 's',
+    '2xs': 's',
+};
+export var getIconSizeToFormElement = function (size) {
+    return getByMap(typeMap, size);
 };
-export var getIconSizeToFormElement = function (size) { return matchIconSizeToFormElement === null || matchIconSizeToFormElement === void 0 ? void 0 : matchIconSizeToFormElement[size]; };

package/__inner__/esm/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__/esm/utils/getPaperSizeToFormElement.js

@@ -1,8 +1,11 @@
-var matchPaperSizeToFormElement = {
-    '2xs': 's',
-    xs: 's',
+import { getByMap } from './getByMap';
+var typeMap = {
     s: 'l',
     m: 'l',
     l: 'l',
+    xs: 's',
+    '2xs': 's',
+};
+export var getPaperSizeToFormElement = function (size) {
+    return getByMap(typeMap, size);
 };
-export var getPaperSizeToFormElement = function (size) { return matchPaperSizeToFormElement === null || matchPaperSizeToFormElement === void 0 ? void 0 : matchPaperSizeToFormElement[size]; };

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "@ozen-ui/kit",
-  "version": "0.52.0",
+  "version": "0.54.0",
   "description": "React component library",
   "files": [
     "*"
   ],
-  "type": "module",
   "publishConfig": {
     "access": "public"
   },
@@ -28,9 +27,9 @@
     "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
     "tslib": "^2.6.2",
-    "@ozen-ui/fonts": "0.52.0",
-    "@ozen-ui/logger": "0.52.0",
-    "@ozen-ui/icons": "0.52.0"
+    "@ozen-ui/fonts": "0.54.0",
+    "@ozen-ui/icons": "0.54.0",
+    "@ozen-ui/logger": "0.54.0"
   },
   "peerDependencies": {
     "react": ">=17.0.2 <19.0.0",

package/__inner__/cjs/components/Calendar/components/CalendarSwitcher/utils.d.ts

@@ -1,2 +0,0 @@
-import type { CalendarStepVariant } from '../../index';
-export declare const getPeriodSwitchAriaLabel: (step: CalendarStepVariant) => string[];

package/__inner__/cjs/components/DatePicker/utils/matchCalendarSizeToFormElement/index.d.ts

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

package/__inner__/cjs/components/DatePicker/utils/matchCalendarSizeToFormElement/matchCalendarSizeToFormElement.d.ts

@@ -1,5 +0,0 @@
-import type { FormElementSizeVariant } from '../../../../types/FormElementSizeVariant';
-import type { CalendarSizeVariant } from '../../../Calendar';
-export declare const matchCalendarSizeToFormElement: {
-    [key in FormElementSizeVariant]: CalendarSizeVariant;
-};

package/__inner__/cjs/components/DatePicker/utils/matchCalendarSizeToFormElement/matchCalendarSizeToFormElement.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.matchCalendarSizeToFormElement = void 0;
-exports.matchCalendarSizeToFormElement = {
-    '2xs': 's',
-    xs: 's',
-    s: 's',
-    m: 'm',
-    l: 'l',
-};

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

@@ -1,2 +0,0 @@
-import type { CalendarStepVariant } from '../../index';
-export declare const getPeriodSwitchAriaLabel: (step: CalendarStepVariant) => string[];