@ozen-ui/kit 0.5.0 → 0.7.0

package/__inner__/cjs/components/Popover/constants.js

@@ -1,6 +1,8 @@
 "use strict";
 exports.__esModule = true;
-exports.POPOVER_DEFAULT_PLACEMENT = exports.POPOVER_DEFAULT_DISABLE_RETURN_FOCUS = exports.POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS = exports.POPOVER_DEFAULT_DISABLE_INTERACTIVE = exports.POPOVER_DEFAULT_OPEN = exports.POPOVER_DEFAULT_ARROW = void 0;
+exports.POPOVER_DEFAULT_PLACEMENT = exports.POPOVER_DEFAULT_DISABLE_RETURN_FOCUS = exports.POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS = exports.POPOVER_DEFAULT_DISABLE_INTERACTIVE = exports.POPOVER_DEFAULT_OPEN = exports.POPOVER_DEFAULT_ARROW = exports.POPOVER_DEFAULT_TAG = void 0;
+var Paper_1 = require("../Paper");
+exports.POPOVER_DEFAULT_TAG = Paper_1.Paper;
 exports.POPOVER_DEFAULT_ARROW = false;
 exports.POPOVER_DEFAULT_OPEN = false;
 exports.POPOVER_DEFAULT_DISABLE_INTERACTIVE = false;

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

@@ -1,16 +1,18 @@
-import React from 'react';
-import type { RefObject, ComponentPropsWithRef } from 'react';
+import React, { ComponentRef, ElementType } from 'react';
+import type { RefObject } from 'react';
 import PopperJS from '@popperjs/core';
 import type { CSSTransitionProps } from 'react-transition-group/CSSTransition';
+import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
 import type { PortalProps } from '../Portal';
 import type { PopoverArrowProps } from './components';
+import { POPOVER_DEFAULT_TAG } from './constants';
 export type VirtualElement = {
     getBoundingClientRect: () => DOMRect;
     contextElement?: Element;
 };
 export declare const popoverPlacementVariant: readonly ["top-start", "top-end", "bottom-start", "bottom-end", "right-start", "right-end", "left-start", "left-end", "auto", "auto-start", "auto-end", "top", "bottom", "right", "left"];
 export type PopoverPlacementVariant = (typeof popoverPlacementVariant)[number];
-export type PopoverProps = {
+export type PopoverBaseProps = {
     /** Признак по которому компонент будет представлен */
     open?: boolean;
     /** Ссылка на элемент, относительно которого будет позиционироваться поповер */
@@ -67,4 +69,6 @@ export type PopoverProps = {
     setUpdate?: (update: PopperJS.Instance['update'] | null) => void;
     /** Контейнер для монтирования всплывающего окна */
     container?: PortalProps['container'];
-} & ComponentPropsWithRef<'div'>;
+};
+export type PopoverRef = ComponentRef<typeof POPOVER_DEFAULT_TAG>;
+export type PopoverProps<As extends ElementType = typeof POPOVER_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<PopoverBaseProps, As>;

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

@@ -1,10 +1,10 @@
-import React from 'react';
-import type { ComponentPropsWithRef, ComponentRef } from 'react';
-declare const portalEl = "div";
-export type PortalRef = ComponentRef<typeof portalEl>;
-export type PortalProps = {
+import type { ComponentRef, ElementType } from 'react';
+import { type PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+export declare const PORTAL_DEFAULT_TAG = "div";
+export type PortalRef = ComponentRef<typeof PORTAL_DEFAULT_TAG>;
+export type PortalBaseProps = {
     /** Контейнер для монтирования портала */
     container?: Element | DocumentFragment | null;
-} & ComponentPropsWithRef<typeof portalEl>;
-export declare const Portal: React.ForwardRefExoticComponent<Omit<PortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export {};
+};
+export type PortalProps<As extends ElementType = typeof PORTAL_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<PortalBaseProps, As>;
+export declare const Portal: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<PortalBaseProps, "div">;

package/__inner__/cjs/components/Portal/Portal.js

@@ -1,19 +1,20 @@
 "use strict";
 exports.__esModule = true;
-exports.Portal = void 0;
+exports.Portal = exports.PORTAL_DEFAULT_TAG = void 0;
 var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importStar(require("react"));
+var react_1 = tslib_1.__importDefault(require("react"));
 var react_dom_1 = require("react-dom");
 var useThemeProps_1 = require("../../hooks/useThemeProps");
+var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
 var ThemeProvider_1 = require("../ThemeProvider");
-var portalEl = 'div';
-exports.Portal = (0, react_1.forwardRef)(function (inProps, ref) {
+exports.PORTAL_DEFAULT_TAG = 'div';
+exports.Portal = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
     var _a = (0, useThemeProps_1.useThemeProps)({
         props: inProps,
         name: 'Portal'
-    }), children = _a.children, container = _a.container, className = _a.className, other = tslib_1.__rest(_a, ["children", "container", "className"]);
+    }), children = _a.children, container = _a.container, className = _a.className, _b = _a.as, Tag = _b === void 0 ? exports.PORTAL_DEFAULT_TAG : _b, other = tslib_1.__rest(_a, ["children", "container", "className", "as"]);
     var theme = (0, ThemeProvider_1.useTheme)();
     var portalContainer = container || window.document.body;
-    return (0, react_dom_1.createPortal)(react_1["default"].createElement(ThemeProvider_1.ThemeProvider, tslib_1.__assign({ theme: theme, className: className }, other, { ref: ref }), children), portalContainer);
+    return (0, react_dom_1.createPortal)(react_1["default"].createElement(ThemeProvider_1.ThemeProvider, tslib_1.__assign({ theme: theme, className: className, as: Tag }, other, { ref: ref }), children), portalContainer);
 });
 exports.Portal.displayName = 'Portal';

package/__inner__/cjs/components/Snackbar/SnackbarProvider.d.ts

@@ -7,4 +7,7 @@ export type SnackbarProviderProps = Partial<SnackbarProps> & SnackbarCommonProps
     /** Максимальное количество одновременно отображенных сообщений */
     maxMessages?: number;
 };
-export declare const SnackbarProvider: React.ForwardRefExoticComponent<Omit<SnackbarProviderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const SnackbarProvider: React.ForwardRefExoticComponent<Partial<SnackbarProps> & SnackbarCommonProps & {
+    /** Максимальное количество одновременно отображенных сообщений */
+    maxMessages?: number | undefined;
+} & React.RefAttributes<HTMLDivElement>>;

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

@@ -8,4 +8,9 @@ export type SnackbarProps = PortalProps & {
     /** Расположение сообщения относительно контейнера */
     anchorOrigin: SnackbarAnchorOrigin;
 };
-export declare const Snackbar: React.ForwardRefExoticComponent<Omit<SnackbarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Snackbar: React.ForwardRefExoticComponent<import("../../../Portal").PortalBaseProps & {
+    as?: "div" | undefined;
+} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "container"> & {
+    /** Расположение сообщения относительно контейнера */
+    anchorOrigin: SnackbarAnchorOrigin;
+} & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,5 +1,5 @@
 import './ThemeProvider.css';
-import React, { ElementType } from 'react';
+import React, { ComponentRef, ElementType } from 'react';
 import { type PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
 import type { Theme } from './types';
 export declare const THEME_DEFAULT_TAG = "div";
@@ -11,4 +11,5 @@ export type ThemeProviderBaseProps = {
 };
 export declare const cnThemeProvider: import("@bem-react/classname").ClassNameFormatter;
 export type ThemeProviderProps<As extends ElementType = typeof THEME_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<ThemeProviderBaseProps, As>;
+export type ThemeProviderRef = ComponentRef<typeof THEME_DEFAULT_TAG>;
 export declare const ThemeProvider: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<ThemeProviderBaseProps, "div">;

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

@@ -1,125 +1,150 @@
 .Theme_color_ozenDark {
+  --color-content-action-on: #fff;
   --color-content-secondary: #949494;
-  --color-content-primary: #F5F5F5;
+  --color-content-primary: #f5f5f5;
   --color-content-tertiary: #707070;
   --color-content-disabled: #363636;
   --color-content-ghost-disabled: rgb(255 255 255 / 47%);
-  --color-content-action: #43B741;
+  --color-content-action: #43b741;
   --color-content-action-hover: #379535;
-  --color-content-action-pressed: #2A7329;
-  --color-content-action-dark: #A5DDA5;
-  --color-content-action-on: #FFF;
-  --color-content-error: #F62114;
-  --color-content-error-hover: #CD1B10;
-  --color-content-error-pressed: #A4150D;
-  --color-content-error-dark: #FB9B96;
-  --color-content-warning: #F0520E;
-  --color-content-warning-hover: #C2420B;
+  --color-content-action-pressed: #2a7329;
+  --color-content-action-dark: #a5dda5;
+  --color-background-main: #222;
+  --color-content-error: #f62114;
+  --color-content-error-hover: #cd1b10;
+  --color-content-error-pressed: #a4150d;
+  --color-content-error-dark: #fb9b96;
+  --color-content-warning: #f0520e;
+  --color-content-warning-hover: #c2420b;
   --color-content-warning-pressed: #943209;
-  --color-content-warning-dark: #F8B598;
-  --color-content-success: #43B741;
+  --color-content-warning-dark: #f8b598;
+  --color-content-success: #43b741;
   --color-content-success-hover: #379535;
-  --color-content-success-pressed: #2A7329;
-  --color-content-success-dark: #A5DDA5;
-  --color-content-info: #8E4DE1;
-  --color-content-info-hover: #7424DA;
-  --color-content-info-pressed: #5E1DB1;
-  --color-content-info-dark: #C29FEF;
+  --color-content-success-pressed: #2a7329;
+  --color-content-success-dark: #a5dda5;
+  --color-content-info: #8e4de1;
+  --color-content-info-hover: #7424da;
+  --color-content-info-pressed: #5e1db1;
+  --color-content-info-dark: #c29fef;
   --color-content-primary-inverse: #080808;
-  --color-background-main: #212121;
-  --color-background-main-inverse: #F5F5F5;
-  --color-background-main-hover: #2C2C2C;
+  --color-background-main-inverse: #f5f5f5;
+  --color-content-accent-main: #a0a0a0;
+  --color-accent-main: #181818;
+  --color-content-accent-primary: #fff;
+  --color-accent-primary: #282828;
+  --color-content-accent-disabled: #606060;
+  --color-background-main-hover: #2c2c2c;
   --color-background-main-pressed: #383838;
   --color-background-primary: #121212;
   --color-background-primary-hover: #222;
   --color-background-primary-pressed: #353535;
-  --color-background-secondary: #2C2C2C;
+  --color-background-secondary: #2c2c2c;
   --color-background-secondary-hover: #383838;
   --color-background-secondary-pressed: #363636;
   --color-background-tertiary: #383838;
   --color-background-tertiary-hover: #363636;
-  --color-background-tertiary-pressed: #4E4E4E;
+  --color-background-tertiary-pressed: #4e4e4e;
   --color-background-disabled: #353535;
-  --color-background-action: #43B741;
+  --color-background-action: #43b741;
   --color-background-action-hover: #379535;
-  --color-background-action-pressed: #2A7329;
+  --color-background-action-pressed: #2a7329;
   --color-background-action-active-disabled: #184117;
   --color-background-action-light: #113011;
-  --color-background-action-light-hover: #1E521D;
+  --color-background-action-light-hover: #1e521d;
   --color-background-action-light-pressed: #184117;
-  --color-background-error: #F62114;
-  --color-background-error-hover: #CD1B10;
-  --color-background-error-pressed: #A4150D;
-  --color-background-error-light: #510A06;
-  --color-background-error-light-hover: #7A1009;
-  --color-background-error-light-pressed: #660D07;
-  --color-background-warning: #F0520E;
-  --color-background-warning-hover: #C2420B;
+  --color-background-error: #f62114;
+  --color-background-error-hover: #cd1b10;
+  --color-background-error-pressed: #a4150d;
+  --color-background-error-light: #510a06;
+  --color-background-error-light-hover: #7a1009;
+  --color-background-error-light-pressed: #660d07;
+  --color-background-warning: #f0520e;
+  --color-background-warning-hover: #c2420b;
   --color-background-warning-pressed: #943209;
   --color-background-warning-light: #371304;
   --color-background-warning-light-hover: #652306;
-  --color-background-warning-light-pressed: #4E1B05;
-  --color-background-success: #43B741;
+  --color-background-warning-light-pressed: #4e1b05;
+  --color-background-success: #43b741;
   --color-background-success-hover: #379535;
-  --color-background-success-pressed: #2A7329;
+  --color-background-success-pressed: #2a7329;
   --color-background-success-light: #113011;
-  --color-background-success-light-hover: #1E521D;
+  --color-background-success-light-hover: #1e521d;
   --color-background-success-light-pressed: #184117;
-  --color-background-info: #7424DA;
-  --color-background-info-hover: #5E1DB1;
+  --color-background-info: #7424da;
+  --color-background-info-hover: #5e1db1;
   --color-background-info-pressed: #481688;
-  --color-background-info-light: #1D0935;
-  --color-background-info-light-hover: #33105E;
-  --color-background-info-light-pressed: #280C4A;
+  --color-background-info-light: #1d0935;
+  --color-background-info-light-hover: #33105e;
+  --color-background-info-light-pressed: #280c4a;
   --color-background-overlay: rgb(0 0 0 / 55%);
   --color-background-ghost: rgb(255 255 255 / 12%);
   --color-background-ghost-hover: rgb(255 255 255 / 24%);
   --color-background-ghost-pressed: rgb(255 255 255 / 32%);
   --color-background-ghost-disabled: rgb(255 255 255 / 47%);
+  --color-background-accent-action-light-hover: #1e521d;
+  --color-background-accent-action-light-pressed: #184117;
+  --color-background-accent-error-light-hover: #7a1009;
+  --color-background-accent-error-light-pressed: #660d07;
+  --color-background-accent-warning-light-hover: #652306;
+  --color-background-accent-warning-light-pressed: #4e1b05;
+  --color-background-accent-success-light-hover: #1e521d;
+  --color-background-accent-success-light-pressed: #184117;
+  --color-background-accent-info-light-hover: #33105e;
+  --color-background-accent-info-light-pressed: #280c4a;
   --color-border-main: #363636;
   --color-border-main-hover: #707070;
   --color-border-main-pressed: #949494;
   --color-border-secondary: #383838;
   --color-border-secondary-hover: #363636;
-  --color-border-secondary-pressed: #4E4E4E;
-  --color-border-disabled: #2C2C2C;
+  --color-border-secondary-pressed: #4e4e4e;
+  --color-border-disabled: #2c2c2c;
   --color-border-ghost-disabled: rgb(255 255 255 / 47%);
   --color-border-focused: #184117;
-  --color-border-action: #43B741;
+  --color-border-action: #43b741;
   --color-border-action-hover: #379535;
-  --color-border-action-pressed: #2A7329;
-  --color-border-error: #F62114;
-  --color-border-warning: #F0520E;
-  --color-border-success: #43B741;
-  --color-border-info: #8E4DE1;
-  --color-border-main-on: #FFF;
-  --color-additional-a1: #0B6ABE;
-  --color-additional-a2: #1899E9;
-  --color-additional-a3: #B3F1FF;
-  --color-additional-b1: #B5215F;
-  --color-additional-b2: #E62D73;
-  --color-additional-b3: #FFB5CD;
-  --color-additional-c1: #E64920;
-  --color-additional-c2: #F46C1B;
-  --color-additional-c3: #FFE2A8;
-  --color-additional-d1: #FF8E00;
-  --color-additional-d2: #FFC100;
-  --color-additional-d3: #FFF9A2;
-  --color-additional-e1: #771DB4;
-  --color-additional-e2: #A02BE5;
-  --color-additional-e3: #E9B7FE;
-  --color-additional-f1: #107C60;
-  --color-additional-f2: #17AE87;
-  --color-additional-f3: #ABEADA;
-  --color-additional-g1: #B88F27;
-  --color-additional-g2: #E0B548;
-  --color-additional-g3: #F4D37D;
-  --color-additional-h1: #747E89;
-  --color-additional-h2: #BDC4CB;
-  --color-additional-h3: #E1E4E7;
-  --color-gradient-gr1: linear-gradient(180deg, #6ED88F 0%, #4796B6 100%);
-  --color-gradient-gr2: linear-gradient(180deg, #FC6883 0%, #6781DD 100%);
-  --color-gradient-gr3: linear-gradient(180deg, #CACFD6 0%, #7B858D 100%);
-  --color-gradient-gr4: linear-gradient(180deg, #E0BD62 0%, #9F8757 100%);
-  --color-gradient-gr5: linear-gradient(180deg, #767CFF 0%, #8C50E9 100%);
+  --color-border-action-pressed: #2a7329;
+  --color-border-error: #f62114;
+  --color-border-warning: #f0520e;
+  --color-border-success: #43b741;
+  --color-border-info: #8e4de1;
+  --color-border-main-on: #fff;
+  --color-border-accent-main: #a0a0a0;
+  --color-border-accent-disabled: #606060;
+  --color-border-accent-focused: #184117;
+  --color-accent-main-hover: #282828;
+  --color-accent-main-pressed: #383838;
+  --color-accent-primary-hover: #383838;
+  --color-accent-primary-pressed: #484848;
+  --color-accent-secondary: #383838;
+  --color-accent-secondary-hover: #484848;
+  --color-accent-secondary-pressed: #585858;
+  --color-accent-tertiary: #484848;
+  --color-accent-tertiary-hover: #585858;
+  --color-accent-tertiary-pressed: #686868;
+  --color-accent-disable: #484848;
+  --color-accent-main-inverse: #fff;
+  --color-additional-a1: #0b6abe;
+  --color-additional-a2: #1899e9;
+  --color-additional-a3: #b3f1ff;
+  --color-additional-b1: #b5215f;
+  --color-additional-b2: #e62d73;
+  --color-additional-b3: #ffb5cd;
+  --color-additional-c1: #e64920;
+  --color-additional-c2: #f46c1b;
+  --color-additional-c3: #ffe2a8;
+  --color-additional-d1: #ff8e00;
+  --color-additional-d2: #ffc100;
+  --color-additional-d3: #fff9a2;
+  --color-additional-e1: #771db4;
+  --color-additional-e2: #a02be5;
+  --color-additional-e3: #e9b7fe;
+  --color-additional-f1: #107c60;
+  --color-additional-f2: #17ae87;
+  --color-additional-f3: #abeada;
+  --color-additional-g1: #b88f27;
+  --color-additional-g2: #e0b548;
+  --color-additional-g3: #f4d37d;
+  --color-additional-h1: #747e89;
+  --color-additional-h2: #bdc4cb;
+  --color-additional-h3: #e1e4e7;
 }

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

@@ -1,125 +1,150 @@
 .Theme_color_ozenDefault {
   --color-content-primary: #080808;
   --color-content-secondary: #707070;
+  --color-additional-h3: #e1e4e7;
   --color-content-tertiary: #949494;
   --color-content-disabled: #949494;
   --color-content-ghost-disabled: rgb(255 255 255 / 47%);
   --color-content-action: #379535;
-  --color-content-action-hover: #2A7329;
-  --color-content-action-pressed: #1E521D;
+  --color-content-action-hover: #2a7329;
+  --color-content-action-pressed: #1e521d;
   --color-content-action-dark: #184117;
   --color-content-action-on: #fff;
-  --color-content-error: #CD1B10;
-  --color-content-error-hover: #A4150D;
-  --color-content-error-pressed: #7A1009;
-  --color-content-error-dark: #660D07;
-  --color-content-warning: #C2420B;
+  --color-content-error: #cd1b10;
+  --color-content-error-hover: #a4150d;
+  --color-content-error-pressed: #7a1009;
+  --color-content-error-dark: #660d07;
+  --color-content-warning: #c2420b;
   --color-content-warning-hover: #943209;
   --color-content-warning-pressed: #652306;
-  --color-content-warning-dark: #4E1B05;
+  --color-content-warning-dark: #4e1b05;
   --color-content-success: #379535;
-  --color-content-success-hover: #2A7329;
-  --color-content-success-pressed: #1E521D;
+  --color-content-success-hover: #2a7329;
+  --color-content-success-pressed: #1e521d;
   --color-content-success-dark: #184117;
-  --color-content-info: #5E1DB1;
+  --color-content-info: #5e1db1;
   --color-content-info-hover: #481688;
-  --color-content-info-pressed: #33105E;
-  --color-content-info-dark: #280C4A;
+  --color-content-info-pressed: #33105e;
+  --color-content-info-dark: #280c4a;
   --color-content-primary-inverse: #fff;
+  --color-content-accent-main: #a0a0a0;
+  --color-accent-main: #181818;
+  --color-content-accent-primary: #fff;
+  --color-accent-primary: #282828;
+  --color-content-accent-disabled: #606060;
   --color-background-main: #fff;
-  --color-background-main-hover: #F5F5F5;
-  --color-background-main-pressed: #E8E8E8;
-  --color-background-primary: #F5F5F5;
+  --color-background-main-hover: #f5f5f5;
+  --color-background-main-pressed: #e8e8e8;
+  --color-background-primary: #f5f5f5;
   --color-background-primary-hover: #e8e8e8;
-  --color-background-primary-pressed: #DCDCDC;
-  --color-background-secondary: #E8E8E8;
-  --color-background-secondary-hover: #DCDCDC;
-  --color-background-secondary-pressed: #C7C7C7;
-  --color-background-tertiary: #DCDCDC;
-  --color-background-tertiary-hover: #C7C7C7;
-  --color-background-tertiary-pressed: #B2B2B2;
-  --color-background-disabled: #E8E8E8;
-  --color-background-action: #43B741;
-  --color-background-action-hover: #2A7329;
-  --color-background-action-pressed: #1E521D;
-  --color-background-action-active-disabled: #B6E3B5;
-  --color-background-action-light: #D7F0D6;
-  --color-background-action-light-hover: #C6E9C6;
-  --color-background-action-light-pressed: #B6E3B5;
-  --color-background-error: #F62114;
-  --color-background-error-hover: #A4150D;
-  --color-background-error-pressed: #7A1009;
-  --color-background-error-light: #FDD9D6;
-  --color-background-error-light-hover: #FCC4C1;
-  --color-background-error-light-pressed: #FCB0AB;
-  --color-background-warning: #F0520E;
+  --color-background-primary-pressed: #dcdcdc;
+  --color-background-secondary: #e8e8e8;
+  --color-background-secondary-hover: #dcdcdc;
+  --color-background-secondary-pressed: #c7c7c7;
+  --color-background-tertiary: #dcdcdc;
+  --color-background-tertiary-hover: #c7c7c7;
+  --color-background-tertiary-pressed: #b2b2b2;
+  --color-background-disabled: #e8e8e8;
+  --color-background-action: #43b741;
+  --color-background-action-hover: #2a7329;
+  --color-background-action-pressed: #1e521d;
+  --color-background-action-active-disabled: #b6e3b5;
+  --color-background-action-light: #d7f0d6;
+  --color-background-action-light-hover: #c6e9c6;
+  --color-background-action-light-pressed: #b6e3b5;
+  --color-background-error: #f62114;
+  --color-background-error-hover: #a4150d;
+  --color-background-error-pressed: #7a1009;
+  --color-background-error-light: #fdd9d6;
+  --color-background-error-light-hover: #fcc4c1;
+  --color-background-error-light-pressed: #fcb0ab;
+  --color-background-warning: #f0520e;
   --color-background-warning-hover: #943209;
   --color-background-warning-pressed: #652306;
-  --color-background-warning-light: #FDE6DD;
-  --color-background-warning-light-hover: #FBD6C6;
-  --color-background-warning-light-pressed: #FAC5AF;
-  --color-background-success: #43B741;
-  --color-background-success-hover: #2A7329;
-  --color-background-success-pressed: #1E521D;
-  --color-background-success-light: #D7F0D6;
-  --color-background-success-light-hover: #C6E9C6;
-  --color-background-success-light-pressed: #B6E3B5;
-  --color-background-info: #7424DA;
+  --color-background-warning-light: #fde6dd;
+  --color-background-warning-light-hover: #fbd6c6;
+  --color-background-warning-light-pressed: #fac5af;
+  --color-background-success: #43b741;
+  --color-background-success-hover: #2a7329;
+  --color-background-success-pressed: #1e521d;
+  --color-background-success-light: #d7f0d6;
+  --color-background-success-light-hover: #c6e9c6;
+  --color-background-success-light-pressed: #b6e3b5;
+  --color-background-info: #7424da;
   --color-background-info-hover: #481688;
-  --color-background-info-pressed: #33105E;
-  --color-background-info-light: #E9DCF9;
-  --color-background-info-light-hover: #DCC8F6;
-  --color-background-info-light-pressed: #DEB7F7;
+  --color-background-info-pressed: #33105e;
+  --color-background-info-light: #e9dcf9;
+  --color-background-info-light-hover: #dcc8f6;
+  --color-background-info-light-pressed: #deb7f7;
   --color-background-main-inverse: #121212;
   --color-background-overlay: rgb(0 0 0 / 55%);
   --color-background-ghost: rgb(255 255 255 / 12%);
   --color-background-ghost-hover: rgb(255 255 255 / 24%);
   --color-background-ghost-pressed: rgb(255 255 255 / 32%);
   --color-background-ghost-disabled: rgb(255 255 255 / 47%);
-  --color-border-main: #C7C7C7;
-  --color-border-main-hover: #B2B2B2;
+  --color-background-accent-action-light-hover: #1e521d;
+  --color-background-accent-action-light-pressed: #184117;
+  --color-background-accent-error-light-hover: #7a1009;
+  --color-background-accent-error-light-pressed: #660d07;
+  --color-background-accent-warning-light-hover: #652306;
+  --color-background-accent-warning-light-pressed: #4e1b05;
+  --color-background-accent-success-light-hover: #1e521d;
+  --color-background-accent-success-light-pressed: #184117;
+  --color-background-accent-info-light-hover: #33105e;
+  --color-background-accent-info-light-pressed: #280c4a;
+  --color-border-main: #c7c7c7;
+  --color-border-main-hover: #b2b2b2;
   --color-border-main-pressed: #949494;
-  --color-border-secondary: #E8E8E8;
-  --color-border-secondary-hover: #C7C7C7;
-  --color-border-secondary-pressed: #B2B2B2;
-  --color-border-disabled: #C7C7C7;
+  --color-border-secondary: #e8e8e8;
+  --color-border-secondary-hover: #c7c7c7;
+  --color-border-secondary-pressed: #b2b2b2;
+  --color-border-disabled: #c7c7c7;
   --color-border-ghost-disabled: rgb(255 255 255 / 47%);
-  --color-border-focused: #85D083;
+  --color-border-focused: #85d083;
   --color-border-action: #379535;
-  --color-border-action-hover: #2A7329;
+  --color-border-action-hover: #2a7329;
   --color-border-action-pressed: #184117;
-  --color-border-error: #CD1B10;
-  --color-border-warning: #C2420B;
+  --color-border-error: #cd1b10;
+  --color-border-warning: #c2420b;
   --color-border-success: #379535;
-  --color-border-info: #5E1DB1;
+  --color-border-info: #5e1db1;
   --color-border-main-on: #fff;
-  --color-additional-a1: #0B6ABE;
-  --color-additional-a2: #1899E9;
-  --color-additional-a3: #B3F1FF;
-  --color-additional-b1: #B5215F;
-  --color-additional-b2: #E62D73;
-  --color-additional-b3: #FFB5CD;
-  --color-additional-c1: #E64920;
-  --color-additional-c2: #F46C1B;
-  --color-additional-c3: #FFE2A8;
-  --color-additional-d1: #FF8E00;
-  --color-additional-d2: #FFC100;
-  --color-additional-d3: #FFF9A2;
-  --color-additional-e1: #771DB4;
-  --color-additional-e2: #A02BE5;
-  --color-additional-e3: #E9B7FE;
-  --color-additional-f1: #107C60;
-  --color-additional-f2: #17AE87;
-  --color-additional-f3: #ABEADA;
-  --color-additional-g1: #B88F27;
-  --color-additional-g2: #E0B548;
-  --color-additional-g3: #F4D37D;
-  --color-additional-h1: #747E89;
-  --color-additional-h2: #BDC4CB;
-  --color-additional-h3: #E1E4E7;
-  --color-gradient-gr1: linear-gradient(180deg, #6ED88F 0%, #4796B6 100%);
-  --color-gradient-gr2: linear-gradient(180deg, #FC6883 0%, #6781DD 100%);
-  --color-gradient-gr3: linear-gradient(180deg, #CACFD6 0%, #7B858D 100%);
-  --color-gradient-gr4: linear-gradient(180deg, #E0BD62 0%, #9F8757 100%);
-  --color-gradient-gr5: linear-gradient(180deg, #767CFF 0%, #8C50E9 100%);
+  --color-border-accent-main: #a0a0a0;
+  --color-border-accent-disabled: #606060;
+  --color-border-accent-focused: #184117;
+  --color-accent-main-hover: #282828;
+  --color-accent-main-pressed: #383838;
+  --color-accent-primary-hover: #383838;
+  --color-accent-primary-pressed: #484848;
+  --color-accent-secondary: #383838;
+  --color-accent-secondary-hover: #484848;
+  --color-accent-secondary-pressed: #585858;
+  --color-accent-tertiary: #484848;
+  --color-accent-tertiary-hover: #585858;
+  --color-accent-tertiary-pressed: #686868;
+  --color-accent-disabled: #484848;
+  --color-accent-main-inverse: #fff;
+  --color-additional-a1: #0b6abe;
+  --color-additional-a2: #1899e9;
+  --color-additional-a3: #b3f1ff;
+  --color-additional-b1: #b5215f;
+  --color-additional-b2: #e62d73;
+  --color-additional-b3: #ffb5cd;
+  --color-additional-c1: #e64920;
+  --color-additional-c2: #f46c1b;
+  --color-additional-c3: #ffe2a8;
+  --color-additional-d1: #ff8e00;
+  --color-additional-d2: #ffc100;
+  --color-additional-d3: #fff9a2;
+  --color-additional-e1: #771db4;
+  --color-additional-e2: #a02be5;
+  --color-additional-e3: #e9b7fe;
+  --color-additional-f1: #107c60;
+  --color-additional-f2: #17ae87;
+  --color-additional-f3: #abeada;
+  --color-additional-g1: #b88f27;
+  --color-additional-g2: #e0b548;
+  --color-additional-g3: #f4d37d;
+  --color-additional-h1: #747e89;
+  --color-additional-h2: #bdc4cb;
 }

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

@@ -1,15 +1,15 @@
 .Theme_typography_ozenDefault {
+  --typography-text-xl_1-font: 500 24px/32px 'Roboto', sans-serif;
   --typography-text-4xl_1-font: 500 40px/56px 'Roboto', sans-serif;
   --typography-text-3xl_1-font: 500 32px/40px 'Roboto', sans-serif;
   --typography-text-2xl_1-font: 500 28px/36px 'Roboto', sans-serif;
-  --typography-text-xl_1-font: 500 24px/32px 'Roboto', sans-serif;
-  --typography-heading-4xl-font: 500 40px/56px 'Roboto', sans-serif;
+  --typography-heading-4xl-font: 500 48px/64px 'Roboto', sans-serif;
   --typography-text-4xl-font: 400 40px/56px 'Roboto', sans-serif;
-  --typography-heading-3xl-font: 500 32px/40px 'Roboto', sans-serif;
+  --typography-heading-3xl-font: 700 40px/56px 'Roboto', sans-serif;
   --typography-text-3xl-font: 400 32px/40px 'Roboto', sans-serif;
-  --typography-heading-2xl-font: 500 28px/36px 'Roboto', sans-serif;
+  --typography-heading-2xl-font: 700 32px/40px 'Roboto', sans-serif;
   --typography-text-2xl-font: 400 28px/36px 'Roboto', sans-serif;
-  --typography-heading-xl-font: 500 24px/32px 'Roboto', sans-serif;
+  --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-text-l_1-font: 500 18px/28px 'Roboto', sans-serif;