@ozen-ui/kit 0.0.1

package/__inner__/esm/components/Textarea/Textarea.js

@@ -0,0 +1,75 @@
+import { __assign, __read, __rest } from "tslib";
+import './Textarea.css';
+import React, { useMemo, useCallback, useState, useEffect, useRef, forwardRef, } from 'react';
+import { useMultiRef } from '../../hooks/useMultiRef';
+import { useThemeProps } from '../../hooks/useThemeProps';
+import { cn } from '../../utils/classname';
+import { FieldHint } from '../FieldHint';
+import { FieldLabel } from '../FieldLabel';
+export var cnTextarea = cn('Textarea');
+export var textareaExpandVariant = ['autoSize', 'verticalResize'];
+export var Textarea = forwardRef(function (inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'Textarea'
+    });
+    var _a = props.size, size = _a === void 0 ? 'm' : _a, autoFocus = props.autoFocus, maxLength = props.maxLength, expand = props.expand, placeholder = props.placeholder, id = props.id, name = props.name, error = props.error, fullWidth = props.fullWidth, cols = props.cols, rows = props.rows, className = props.className, label = props.label, hint = props.hint, valueProp = props.value, defaultValue = props.defaultValue, onChange = props.onChange, required = props.required, textareaRef = props.textareaRef, disabled = props.disabled, textareaProps = props.textareaProps, labelRef = props.labelRef, labelProps = props.labelProps, other = __rest(props, ["size", "autoFocus", "maxLength", "expand", "placeholder", "id", "name", "error", "fullWidth", "cols", "rows", "className", "label", "hint", "value", "defaultValue", "onChange", "required", "textareaRef", "disabled", "textareaProps", "labelRef", "labelProps"]);
+    var fieldRef = useRef(null);
+    var isControlled = typeof valueProp !== 'undefined';
+    var _b = __read(useState(), 2), focused = _b[0], setFocused = _b[1];
+    var _c = __read(useState(defaultValue), 2), valueState = _c[0], setValueState = _c[1];
+    var filled = isControlled ? !!valueProp : !!valueState;
+    // autoSize
+    useEffect(function () {
+        if (fieldRef.current && expand === 'autoSize') {
+            fieldRef.current.style.blockSize = '0px';
+            var scrollHeight = fieldRef.current.scrollHeight;
+            fieldRef.current.style.blockSize = "".concat(scrollHeight, "px");
+        }
+    }, [valueProp, valueState]);
+    // maxLength
+    var counter = useMemo(function () {
+        var _a;
+        var value = valueProp || valueState;
+        return maxLength ? "".concat((_a = value === null || value === void 0 ? void 0 : value.length) !== null && _a !== void 0 ? _a : 0, " / ").concat(maxLength) : undefined;
+    }, [maxLength, valueProp, valueState]);
+    var handleFocus = useCallback(function (e) {
+        var _a;
+        setFocused(true);
+        (_a = textareaProps === null || textareaProps === void 0 ? void 0 : textareaProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(textareaProps, e);
+    }, [textareaProps === null || textareaProps === void 0 ? void 0 : textareaProps.onFocus]);
+    var handleBlur = useCallback(function (e) {
+        var _a;
+        setFocused(false);
+        (_a = textareaProps === null || textareaProps === void 0 ? void 0 : textareaProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(textareaProps, e);
+    }, [textareaProps === null || textareaProps === void 0 ? void 0 : textareaProps.onBlur]);
+    var handleChange = useCallback(function (e) {
+        if (disabled)
+            return;
+        var value = e.target.value;
+        if (!isControlled || maxLength || expand === 'autoSize') {
+            setValueState(value);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(e);
+    }, [onChange, isControlled, disabled, maxLength, expand]);
+    return (React.createElement("div", __assign({}, other, { className: cnTextarea({
+            size: size,
+            required: required,
+            fullWidth: fullWidth,
+            error: error,
+            disabled: disabled,
+            hasLabel: !!label,
+            expand: expand,
+            focused: focused
+        }, [className]), ref: ref }),
+        React.createElement("label", { className: cnTextarea('Body') },
+            label && (React.createElement(FieldLabel, __assign({ filled: filled, focused: focused, required: required, disabled: disabled, size: size }, labelProps, { className: cnTextarea('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: labelRef }), label)),
+            React.createElement("textarea", __assign({ id: id, name: name, cols: cols, rows: rows, disabled: disabled, value: valueProp, required: required, defaultValue: defaultValue, maxLength: maxLength, placeholder: placeholder, autoFocus: autoFocus }, textareaProps, { className: cnTextarea('Field', { filled: filled }, [
+                    textareaProps === null || textareaProps === void 0 ? void 0 : textareaProps.className,
+                ]), onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange, ref: useMultiRef([textareaRef, fieldRef]) })),
+            React.createElement("fieldset", { className: cnTextarea('Fieldset') })),
+        (hint || maxLength) && (React.createElement(FieldHint, { size: size, error: error, disabled: disabled },
+            hint,
+            maxLength && (React.createElement("span", { className: cnTextarea('Counter', { disabled: disabled }) }, counter))))));
+});
+Textarea.displayName = 'Textarea';

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

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

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

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

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

@@ -0,0 +1,41 @@
+/* stylelint-disable */
+.Theme {
+  --shadow-outline-focused: var(--color-border-focused) 0 0 0
+    var(--border-width-m);
+  -webkit-font-smoothing: antialiased;
+  color: var(--color-content-primary);
+
+  font: var(--typography-text-m-font);
+
+  letter-spacing: var(--typography-text-m-letter_spacing, 0);
+
+  text-transform: var(--typography-text-m-text_transform, none);
+}
+.Theme * {
+    --scroll-bar-size: 16px;
+  }
+.Theme *::-webkit-scrollbar {
+    inline-size: var(--scroll-bar-size);
+  }
+.Theme *::-webkit-scrollbar-thumb {
+    background-color: var(--color-background-secondary);
+    border-radius: calc(var(--scroll-bar-size) / 2);
+    border: calc(var(--scroll-bar-size) / 4) solid transparent;
+    background-clip: padding-box;
+    border-image: initial;
+    min-block-size: 24px;
+  }
+.Theme *::-webkit-scrollbar-thumb:hover,
+    .Theme *::-webkit-scrollbar-thumb:active {
+      border: calc(var(--scroll-bar-size) / 4) solid transparent;
+      background-clip: padding-box;
+    }
+.Theme *::-webkit-scrollbar-thumb:hover {
+      background-color: var(--color-background-secondary-hover);
+    }
+.Theme *::-webkit-scrollbar-thumb:active {
+      background-color: var(--color-background-secondary-pressed);
+    }
+.Theme *::-webkit-scrollbar-corner {
+    background: transparent;
+  }

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

@@ -0,0 +1,14 @@
+import './ThemeProvider.css';
+import React, { ElementType } from 'react';
+import { type PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+import type { Theme } from './types';
+export declare const THEME_DEFAULT_TAG = "div";
+export type ThemeProviderBaseProps = {
+    /** Содержимое компонента */
+    children: React.ReactNode;
+    /** Тема */
+    theme?: Theme;
+};
+export declare const cnThemeProvider: import("@bem-react/classname").ClassNameFormatter;
+export type ThemeProviderProps<As extends ElementType = typeof THEME_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<ThemeProviderBaseProps, As>;
+export declare const ThemeProvider: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<ThemeProviderBaseProps, "div">;

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

@@ -0,0 +1,14 @@
+import { __assign, __rest } from "tslib";
+import './ThemeProvider.css';
+import React from 'react';
+import { cn } from '../../utils/classname';
+import { polymorphicComponentWithRef, } from '../../utils/polymorphicComponentWithRef';
+import { ThemeProviderContext } from './ThemeProviderContext';
+export var THEME_DEFAULT_TAG = 'div';
+export var cnThemeProvider = cn('Theme');
+export var ThemeProvider = polymorphicComponentWithRef(function (_a, ref) {
+    var children = _a.children, theme = _a.theme, className = _a.className, _b = _a.as, Tag = _b === void 0 ? THEME_DEFAULT_TAG : _b, other = __rest(_a, ["children", "theme", "className", "as"]);
+    return (React.createElement(ThemeProviderContext.Provider, { value: theme },
+        React.createElement(Tag, __assign({ className: cnThemeProvider(theme === null || theme === void 0 ? void 0 : theme.tokens, [className]) }, other, { ref: ref }), children)));
+});
+ThemeProvider.displayName = 'ThemeProvider';

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { Theme } from './types';
+export declare const ThemeProviderContext: import("react").Context<Theme | undefined>;
+export declare function useTheme(): Theme | undefined;

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

@@ -0,0 +1,5 @@
+import { createContext, useContext } from 'react';
+export var ThemeProviderContext = createContext(undefined);
+export function useTheme() {
+    return useContext(ThemeProviderContext);
+}

package/__inner__/esm/components/ThemeProvider/_borderRadius/Theme_borderRadius_ozenDefault.css

@@ -0,0 +1,8 @@
+.Theme_borderRadius_ozenDefault {
+  --border-radius-l: 12px;
+  --border-radius-xl: 16px;
+  --border-radius-m: 8px;
+  --border-radius-s: 6px;
+  --border-radius-xs: 4px;
+  --border-radius-2xs: 2px;
+}

package/__inner__/esm/components/ThemeProvider/_borderWidth/Theme_borderWidth_ozenDefault.css

@@ -0,0 +1,4 @@
+.Theme_borderWidth_ozenDefault {
+  --border-width-s: 1px;
+  --border-width-m: 2px;
+}

package/__inner__/esm/components/ThemeProvider/_breakpoint/Theme_breakpoint_ozenDefault.css

@@ -0,0 +1,6 @@
+.Theme_breakpoint_ozenDefault {
+  --breakpoint-xs: 0;
+  --breakpoint-s: 640px;
+  --breakpoint-m: 1024px;
+  --breakpoint-l: 1280px;
+}

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

@@ -0,0 +1,125 @@
+.Theme_color_ozenDark {
+  --color-content-secondary: #949494;
+  --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-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-warning-pressed: #943209;
+  --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-primary-inverse: #080808;
+  --color-background-main: #212121;
+  --color-background-main-inverse: #F5F5F5;
+  --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-hover: #383838;
+  --color-background-secondary-pressed: #363636;
+  --color-background-tertiary: #383838;
+  --color-background-tertiary-hover: #363636;
+  --color-background-tertiary-pressed: #4E4E4E;
+  --color-background-disabled: #353535;
+  --color-background-action: #43B741;
+  --color-background-action-hover: #379535;
+  --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-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-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-success-hover: #379535;
+  --color-background-success-pressed: #2A7329;
+  --color-background-success-light: #113011;
+  --color-background-success-light-hover: #1E521D;
+  --color-background-success-light-pressed: #184117;
+  --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-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: #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-ghost-disabled: rgb(255 255 255 / 47%);
+  --color-border-focused: #184117;
+  --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%);
+}

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

@@ -0,0 +1,125 @@
+.Theme_color_ozenDefault {
+  --color-content-primary: #080808;
+  --color-content-secondary: #707070;
+  --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-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-warning-hover: #943209;
+  --color-content-warning-pressed: #652306;
+  --color-content-warning-dark: #4E1B05;
+  --color-content-success: #379535;
+  --color-content-success-hover: #2A7329;
+  --color-content-success-pressed: #1E521D;
+  --color-content-success-dark: #184117;
+  --color-content-info: #5E1DB1;
+  --color-content-info-hover: #481688;
+  --color-content-info-pressed: #33105E;
+  --color-content-info-dark: #280C4A;
+  --color-content-primary-inverse: #fff;
+  --color-background-main: #fff;
+  --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-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-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-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-border-main-pressed: #949494;
+  --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-action: #379535;
+  --color-border-action-hover: #2A7329;
+  --color-border-action-pressed: #184117;
+  --color-border-error: #CD1B10;
+  --color-border-warning: #C2420B;
+  --color-border-success: #379535;
+  --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%);
+}

package/__inner__/esm/components/ThemeProvider/_mixin/breakpoint.css

@@ -0,0 +1,4 @@
+/* xs >= 0px */
+/* s >= 640px */
+/* m >= 1024px */
+/* l >= 1280px */

package/__inner__/esm/components/ThemeProvider/_mixin/scrollbar.css

@@ -0,0 +1 @@
+

package/__inner__/esm/components/ThemeProvider/_mixin/typography.css

@@ -0,0 +1 @@
+/* stylelint-disable */

package/__inner__/esm/components/ThemeProvider/_shadow/Theme_shadow_ozenDefault.css

@@ -0,0 +1,5 @@
+.Theme_shadow_ozenDefault {
+  --shadow-l: 0px 8px 32px rgb(0 0 0 / 8%);
+  --shadow-m: 0px 4px 20px rgb(0 0 0 / 6%);
+  --shadow-s: 0px 4px 8px rgb(0 0 0 / 3%);
+}

package/__inner__/esm/components/ThemeProvider/_space/Theme_space_ozenDefault.css

@@ -0,0 +1,14 @@
+.Theme_space_ozenDefault {
+  --space-8xl: 80px;
+  --space-7xl: 72px;
+  --space-6xl: 64px;
+  --space-5xl: 56px;
+  --space-4xl: 48px;
+  --space-3xl: 40px;
+  --space-2xl: 32px;
+  --space-xl: 24px;
+  --space-l: 16px;
+  --space-m: 12px;
+  --space-s: 8px;
+  --space-xs: 4px;
+}

package/__inner__/esm/components/ThemeProvider/_transition/Theme_transition_ozenDefault.css

@@ -0,0 +1,4 @@
+.Theme_transition_ozenDefault {
+  --transition-default: 120ms ease-in-out;
+  --transition-slow: 300ms ease-in-out;
+}

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

@@ -0,0 +1,32 @@
+.Theme_typography_ozenDefault {
+  --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-text-4xl-font: 400 40px/56px 'Roboto', sans-serif;
+  --typography-heading-3xl-font: 500 32px/40px 'Roboto', sans-serif;
+  --typography-text-3xl-font: 400 32px/40px 'Roboto', sans-serif;
+  --typography-heading-2xl-font: 500 28px/36px 'Roboto', sans-serif;
+  --typography-text-2xl-font: 400 28px/36px 'Roboto', sans-serif;
+  --typography-heading-xl-font: 500 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;
+  --typography-text-m-font: 400 16px/24px 'Roboto', sans-serif;
+  --typography-text-m_1-font: 500 16px/24px 'Roboto', sans-serif;
+  --typography-text-s-font: 400 14px/20px 'Roboto', sans-serif;
+  --typography-text-s_1-font: 500 14px/20px 'Roboto', sans-serif;
+  --typography-text-xs-font: 400 13px/16px 'Roboto', sans-serif;
+  --typography-text-xs_1-font: 500 13px/16px 'Roboto', sans-serif;
+  --typography-text-2xs-font: 400 12px/16px 'Roboto', sans-serif;
+  --typography-text-2xs_1-font: 500 12px/16px 'Roboto', sans-serif;
+  --typography-text-3xs-font: 400 10px/16px 'Roboto', sans-serif;
+  --typography-caption-3xs-font: 400 10px/16px 'Roboto', sans-serif;
+  --typography-caption-3xs-text_transform: uppercase;
+  --typography-caption-3xs-letter_spacing: 0.30000001192092896;
+  --typography-text-3xs_1-font: 500 10px/16px 'Roboto', sans-serif;
+  --typography-caption-3xs_1-font: 500 10px/16px 'Roboto', sans-serif;
+  --typography-caption-3xs_1-text_transform: uppercase;
+  --typography-caption-3xs_1-letter_spacing: 0.30000001192092896;
+}

package/__inner__/esm/components/ThemeProvider/_zIndex/Theme_zIndex_ozenDefault.css

@@ -0,0 +1,11 @@
+.Theme_zIndex_ozenDefault {
+  --z-index-default: 0;
+  --z-index-absolute: 1;
+  --z-index-header: 600;
+  --z-index-sidebar: 800;
+  --z-index-modal: 1000;
+  --z-index-popover: 1000;
+  --z-index-snackbar: 1100;
+  --z-index-livespace: 9999;
+  --z-index-chat: 99999;
+}

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

@@ -0,0 +1,8 @@
+export * from './ThemeProvider';
+export * from './themes/themeOzenDark';
+export * from './themes/themeOzenDefault';
+export * as themeHelper from './themes/helper';
+export { useTheme } from './ThemeProviderContext';
+export * from './localization/localization';
+export * from './utils';
+export * from './types';

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

@@ -0,0 +1,9 @@
+export * from './ThemeProvider';
+export * from './themes/themeOzenDark';
+export * from './themes/themeOzenDefault';
+import * as themeHelper_1 from './themes/helper';
+export { themeHelper_1 as themeHelper };
+export { useTheme } from './ThemeProviderContext';
+export * from './localization/localization';
+export * from './utils';
+export * from './types';

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

@@ -0,0 +1,4 @@
+import type { Theme } from '../index';
+export declare const localizationLanguageVariant: readonly ["RU", "ENG", "KZN"];
+export type LocalizationLanguageVariant = (typeof localizationLanguageVariant)[number];
+export declare const localization: Record<LocalizationLanguageVariant, Partial<Theme>>;

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

@@ -0,0 +1,33 @@
+export var localizationLanguageVariant = ['RU', 'ENG', 'KZN'];
+export var localization = {
+    RU: {
+        defaultProps: {
+            Loader: {
+                'aria-label': 'Загрузка'
+            },
+            FilePicker: {
+                clearText: 'Очистить поле'
+            }
+        }
+    },
+    KZN: {
+        defaultProps: {
+            Loader: {
+                'aria-label': 'Жүктеу'
+            },
+            FilePicker: {
+                clearText: 'Өрісті тазалаңыз'
+            }
+        }
+    },
+    ENG: {
+        defaultProps: {
+            Loader: {
+                'aria-label': 'Loading'
+            },
+            FilePicker: {
+                clearText: 'Clear field'
+            }
+        }
+    }
+};

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

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