@ozen-ui/kit 0.51.0 → 0.53.0

package/__inner__/cjs/components/Loader/Loader.css

@@ -10,24 +10,24 @@
 }
 
   .Loader_size_s {
-    inline-size: 12px;
-    block-size: 12px;
-  }
+      inline-size: 12px;
+      block-size: 12px;
+    }
 
   .Loader_size_m {
-    inline-size: 20px;
-    block-size: 20px;
-  }
+      inline-size: 20px;
+      block-size: 20px;
+    }
 
   .Loader_size_l {
-    inline-size: 28px;
-    block-size: 28px;
-  }
+      inline-size: 28px;
+      block-size: 28px;
+    }
 
   .Loader_size_xl {
-    inline-size: 44px;
-    block-size: 44px;
-  }
+      inline-size: 44px;
+      block-size: 44px;
+    }
 
 @keyframes spinner-border {
   to {

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

@@ -1,21 +1,21 @@
 import './Loader.css';
 import React from 'react';
-import type { HTMLAttributes } from 'react';
+import type { CSSProperties, HTMLAttributes } from 'react';
 export declare const loaderSizeVariant: readonly ["s", "m", "l", "xl"];
 export type LoaderSizeVariant = (typeof loaderSizeVariant)[number];
 export type LoaderProps = {
-    /** Дополнительный класс */
-    className?: string;
-    /** Размер прелоадера */
-    size?: LoaderSizeVariant;
     /** Цвет */
-    color?: string;
+    color?: CSSProperties['color'];
+    /** Размер */
+    size?: LoaderSizeVariant;
+    /** Дополнительные СSS-классы */
+    className?: string;
 } & HTMLAttributes<HTMLDivElement>;
 export declare const Loader: React.ForwardRefExoticComponent<{
-    /** Дополнительный класс */
-    className?: string | undefined;
-    /** Размер прелоадера */
-    size?: "s" | "m" | "l" | "xl" | undefined;
     /** Цвет */
-    color?: string | undefined;
+    color?: CSSProperties['color'];
+    /** Размер */
+    size?: "s" | "m" | "l" | "xl" | undefined;
+    /** Дополнительные СSS-классы */
+    className?: string | undefined;
 } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/cjs/components/Loader/Loader.js

@@ -10,7 +10,8 @@ var cnLoader = (0, classname_1.cn)('Loader');
 exports.loaderSizeVariant = ['s', 'm', 'l', 'xl'];
 exports.Loader = (0, react_1.forwardRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'Loader' });
-    var _a = props.size, size = _a === void 0 ? 'm' : _a, className = props.className, color = props.color, ariaLabel = props["aria-label"], other = tslib_1.__rest(props, ["size", "className", "color", 'aria-label']);
-    return (react_1.default.createElement("div", tslib_1.__assign({ className: cnLoader({ size: size }, [className]) }, other, { "aria-label": ariaLabel, ref: ref, style: { '--loader-color': color } })));
+    var _a = props.size, size = _a === void 0 ? 'm' : _a, className = props.className, color = props.color, ariaLabel = props["aria-label"], styleProp = props.style, other = tslib_1.__rest(props, ["size", "className", "color", 'aria-label', "style"]);
+    var style = tslib_1.__assign(tslib_1.__assign({}, styleProp), { '--loader-color': color });
+    return (react_1.default.createElement("div", tslib_1.__assign({ role: "progressbar", "aria-label": ariaLabel, className: cnLoader({ size: size }, [className]), style: style }, other, { ref: ref })));
 });
 exports.Loader.displayName = 'Loader';

package/__inner__/cjs/components/Modal/Modal.js

@@ -30,10 +30,8 @@ exports.Modal = (0, react_1.forwardRef)(function (_a, ref) {
         refs: tslib_1.__spreadArray(tslib_1.__spreadArray([
             modalInnerRef
         ], tslib_1.__read(refsClickOutside), false), tslib_1.__read((ignoreClickOutsideRefs || [])), false),
-        handler: function () {
-            onClose === null || onClose === void 0 ? void 0 : onClose();
-        },
-        active: !disableClickOutside,
+        handler: onClose,
+        active: open && !disableClickOutside,
     });
     // Блокирует прокрутку основного окна приложения
     (0, useLockBodyScroll_1.useLockBodyScroll)(opened && !disableScrollLock);

package/__inner__/cjs/components/Select/Select.css

@@ -90,7 +90,6 @@
 
 .FieldControl_hasLabel .Select-Field {
       padding: var(--textfield-input-padding);
-      font: var(--textfield-input-font);
     }
 
 .Select .ListItemButton::after {

package/__inner__/cjs/components/Snackbar/components/Snackbar/Snackbar.css

@@ -1,13 +1,14 @@
 .Snackbar {
+  display: flex;
   position: fixed;
-  max-inline-size: 400px;
-  min-inline-size: 300px;
+  inline-size: 100%;
   min-block-size: 0;
-  display: flex;
   flex-direction: column;
-  z-index: var(--z-index-snackbar);
-  margin: var(--spacing-xs);
+  box-sizing: border-box;
   gap: var(--spacing-2xs);
+  padding: var(--spacing-xs);
+  z-index: var(--z-index-snackbar);
+  max-inline-size: calc(360px + var(--spacing-xs) * 2);
 
   /* workaround for a removed scroll bar on the body */
   border-inline-end: var(--removed-body-scroll-bar-size) solid transparent;

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/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__/esm/components/Loader/Loader.css

@@ -10,24 +10,24 @@
 }
 
   .Loader_size_s {
-    inline-size: 12px;
-    block-size: 12px;
-  }
+      inline-size: 12px;
+      block-size: 12px;
+    }
 
   .Loader_size_m {
-    inline-size: 20px;
-    block-size: 20px;
-  }
+      inline-size: 20px;
+      block-size: 20px;
+    }
 
   .Loader_size_l {
-    inline-size: 28px;
-    block-size: 28px;
-  }
+      inline-size: 28px;
+      block-size: 28px;
+    }
 
   .Loader_size_xl {
-    inline-size: 44px;
-    block-size: 44px;
-  }
+      inline-size: 44px;
+      block-size: 44px;
+    }
 
 @keyframes spinner-border {
   to {

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

@@ -1,21 +1,21 @@
 import './Loader.css';
 import React from 'react';
-import type { HTMLAttributes } from 'react';
+import type { CSSProperties, HTMLAttributes } from 'react';
 export declare const loaderSizeVariant: readonly ["s", "m", "l", "xl"];
 export type LoaderSizeVariant = (typeof loaderSizeVariant)[number];
 export type LoaderProps = {
-    /** Дополнительный класс */
-    className?: string;
-    /** Размер прелоадера */
-    size?: LoaderSizeVariant;
     /** Цвет */
-    color?: string;
+    color?: CSSProperties['color'];
+    /** Размер */
+    size?: LoaderSizeVariant;
+    /** Дополнительные СSS-классы */
+    className?: string;
 } & HTMLAttributes<HTMLDivElement>;
 export declare const Loader: React.ForwardRefExoticComponent<{
-    /** Дополнительный класс */
-    className?: string | undefined;
-    /** Размер прелоадера */
-    size?: "s" | "m" | "l" | "xl" | undefined;
     /** Цвет */
-    color?: string | undefined;
+    color?: CSSProperties['color'];
+    /** Размер */
+    size?: "s" | "m" | "l" | "xl" | undefined;
+    /** Дополнительные СSS-классы */
+    className?: string | undefined;
 } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/esm/components/Loader/Loader.js

@@ -7,7 +7,8 @@ var cnLoader = cn('Loader');
 export var loaderSizeVariant = ['s', 'm', 'l', 'xl'];
 export var Loader = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'Loader' });
-    var _a = props.size, size = _a === void 0 ? 'm' : _a, className = props.className, color = props.color, ariaLabel = props["aria-label"], other = __rest(props, ["size", "className", "color", 'aria-label']);
-    return (React.createElement("div", __assign({ className: cnLoader({ size: size }, [className]) }, other, { "aria-label": ariaLabel, ref: ref, style: { '--loader-color': color } })));
+    var _a = props.size, size = _a === void 0 ? 'm' : _a, className = props.className, color = props.color, ariaLabel = props["aria-label"], styleProp = props.style, other = __rest(props, ["size", "className", "color", 'aria-label', "style"]);
+    var style = __assign(__assign({}, styleProp), { '--loader-color': color });
+    return (React.createElement("div", __assign({ role: "progressbar", "aria-label": ariaLabel, className: cnLoader({ size: size }, [className]), style: style }, other, { ref: ref })));
 });
 Loader.displayName = 'Loader';

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

@@ -27,10 +27,8 @@ export var Modal = forwardRef(function (_a, ref) {
         refs: __spreadArray(__spreadArray([
             modalInnerRef
         ], __read(refsClickOutside), false), __read((ignoreClickOutsideRefs || [])), false),
-        handler: function () {
-            onClose === null || onClose === void 0 ? void 0 : onClose();
-        },
-        active: !disableClickOutside,
+        handler: onClose,
+        active: open && !disableClickOutside,
     });
     // Блокирует прокрутку основного окна приложения
     useLockBodyScroll(opened && !disableScrollLock);

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

@@ -90,7 +90,6 @@
 
 .FieldControl_hasLabel .Select-Field {
       padding: var(--textfield-input-padding);
-      font: var(--textfield-input-font);
     }
 
 .Select .ListItemButton::after {

package/__inner__/esm/components/Snackbar/components/Snackbar/Snackbar.css

@@ -1,13 +1,14 @@
 .Snackbar {
+  display: flex;
   position: fixed;
-  max-inline-size: 400px;
-  min-inline-size: 300px;
+  inline-size: 100%;
   min-block-size: 0;
-  display: flex;
   flex-direction: column;
-  z-index: var(--z-index-snackbar);
-  margin: var(--spacing-xs);
+  box-sizing: border-box;
   gap: var(--spacing-2xs);
+  padding: var(--spacing-xs);
+  z-index: var(--z-index-snackbar);
+  max-inline-size: calc(360px + var(--spacing-xs) * 2);
 
   /* workaround for a removed scroll bar on the body */
   border-inline-end: var(--removed-body-scroll-bar-size) solid transparent;

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozen-ui/kit",
-  "version": "0.51.0",
+  "version": "0.53.0",
   "description": "React component library",
   "files": [
     "*"
@@ -28,9 +28,9 @@
     "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
     "tslib": "^2.6.2",
-    "@ozen-ui/fonts": "0.51.0",
-    "@ozen-ui/icons": "0.51.0",
-    "@ozen-ui/logger": "0.51.0"
+    "@ozen-ui/fonts": "0.53.0",
+    "@ozen-ui/icons": "0.53.0",
+    "@ozen-ui/logger": "0.53.0"
   },
   "peerDependencies": {
     "react": ">=17.0.2 <19.0.0",