@itcase/ui 1.2.30 → 1.2.32

package/dist/components/Icon.js

@@ -1,25 +1,20 @@
-export { I as Icon, i as iconConfig } from '../Icon-ClsRaxDk.js';
+export { I as Icon, i as iconConfig } from '../Icon-DptCmI_y.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
 import 'react-inlinesvg';
-import '../appearance/Icon.js';
 import '../hooks/useDeviceTargetClass.js';
-import 'lodash/castArray';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
-import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Link-CzC1kU5C.js';
-import '../tslib.es6-w7hdJ3oZ.js';
-import '../Tooltip-ccRCMYQM.js';
-import '../appearance/Tooltip.js';
-import '../Text-kxGZButz.js';
-import '../appearance/Text.js';
-import '../Title-CQ_Fr1hO.js';
-import '../appearance/Title.js';
+import '../Link-CeQuavin.js';
+import '../Tooltip--c-4Qp04.js';
+import '../Text-C4Bg2Mv6.js';
+import '../Title-YVzIwk68.js';

package/dist/components/Image.js

@@ -3,10 +3,9 @@ import 'react/jsx-runtime';
 import 'clsx';
 import '../hooks/useDeviceTargetClass.js';
 import 'react';
-import 'lodash/castArray';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
-import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import '../hooks/useStyles.js';

package/dist/components/Input.js

@@ -1,12 +1,10 @@
-export { I as Input, i as inputConfig } from '../Input-DbzsXvEf.js';
+export { I as Input, i as inputConfig } from '../Input-CgjHxZmK.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
-import '../appearance/Input.js';
 import '../hooks/useDeviceTargetClass.js';
-import 'lodash/castArray';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
-import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';

package/dist/components/InputMask.js

@@ -2,25 +2,24 @@ import { jsx } from 'react/jsx-runtime';
 import React, { useMemo } from 'react';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import 'lodash/castArray';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
-import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 
 var inputMaskConfig = {
-    state: undefined,
-    setState: function (newComponent) {
-        inputMaskConfig.state = newComponent;
-    },
     appearance: undefined,
     setAppearance: function (newComponent) {
         inputMaskConfig.appearance = newComponent;
     },
+    setState: function (newComponent) {
+        inputMaskConfig.state = newComponent;
+    },
+    state: undefined,
 };
 var Input = React.forwardRef(function Input(props, ref) {
-    var appearance = props.appearance, className = props.className, dataTestId = props.dataTestId, id = props.id, index = props.index, isDisabled = props.isDisabled, name = props.name, placeholder = props.placeholder, state = props.state, type = props.type, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
+    var id = props.id, isDisabled = props.isDisabled, appearance = props.appearance, className = props.className, dataTestId = props.dataTestId, index = props.index, name = props.name, placeholder = props.placeholder, state = props.state, _a = props.type, type = _a === void 0 ? 'text' : _a, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
     var fillClass = useDeviceTargetClass(props, {
         prefix: 'fill_',
         propsKey: 'fill',
@@ -127,13 +126,12 @@ var Input = React.forwardRef(function Input(props, ref) {
                     "text-color_".concat(stateConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase())
             : textColorDisabledClass ||
                 ((stateConfig === null || stateConfig === void 0 ? void 0 : stateConfig.textColor) &&
-                    "text-color_".concat(stateConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase())), type: type, id: String(id), index: index, 
+                    "text-color_".concat(stateConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase())), 
         // @ts-expect-error
-        ref: ref, disabled: isDisabled, placeholder: placeholder, "data-test-id": dataTestId || (name ? "".concat(name, "Input") : 'input'), value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }));
+        ref: ref, "data-test-id": dataTestId || (name ? "".concat(name, "Input") : 'input'), disabled: isDisabled, id: String(id), index: index, placeholder: placeholder, type: type, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }));
 });
 Input.defaultProps = {
     size: 'm',
-    type: 'text',
 };
 
 export { Input, inputMaskConfig };

package/dist/components/InputPassword.js

@@ -1,29 +1,77 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useMemo, useCallback } from 'react';
 import clsx from 'clsx';
-import { InputPasswordAppearance, InputPasswordState } from '../appearance/InputPassword.js';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import { I as Icon } from '../Icon-ClsRaxDk.js';
-import 'lodash/castArray';
+import { I as Icon } from '../Icon-DptCmI_y.js';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
-import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../tslib.es6-5FtW-kfi.js';
 import 'react-inlinesvg';
-import '../appearance/Icon.js';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Link-CzC1kU5C.js';
-import '../tslib.es6-w7hdJ3oZ.js';
-import '../Tooltip-ccRCMYQM.js';
-import '../appearance/Tooltip.js';
-import '../Text-kxGZButz.js';
-import '../appearance/Text.js';
-import '../Title-CQ_Fr1hO.js';
-import '../appearance/Title.js';
+import '../Link-CeQuavin.js';
+import '../Tooltip--c-4Qp04.js';
+import '../Text-C4Bg2Mv6.js';
+import '../Title-YVzIwk68.js';
+
+var InputPasswordAppearance = {
+    dev: {
+        borderColor: 'surfaceBorderTertiary',
+        placeholderTextColor: 'surfaceTextSecondary',
+        shape: 'rounded',
+        size: 'm',
+        textColor: 'surfaceTextPrimary',
+        textSize: 'm',
+    },
+};
+var InputPasswordState = {
+    active: {
+        borderColor: 'surfaceBorderActive',
+        placeholderTextColor: 'secondaryTextSecondary',
+    },
+    activeFilled: {
+        borderColor: 'surfaceBorderActive',
+        textColor: 'surfaceTextPrimary',
+    },
+    disabled: {
+        borderColor: 'surfaceBorderDisabled',
+        placeholderTextColor: 'surfaceTextDisabled',
+        textColor: 'surfaceTextPrimary',
+    },
+    error: {
+        borderColor: 'errorBorderPrimary',
+        placeholderTextColor: 'secondaryTextSecondary',
+    },
+    errorFilled: {
+        borderColor: 'errorBorderPrimary',
+        textColor: 'surfaceTextPrimary',
+    },
+    filled: {
+        borderColor: 'surfaceBorderQuaternary',
+        textColor: 'surfaceTextPrimary',
+    },
+    normal: {
+        borderColor: 'surfaceBorderQuaternary',
+        placeholderTextColor: 'secondaryTextSecondary',
+    },
+    readonly: {
+        borderColor: 'surfaceBorderDisabled',
+        textColor: 'surfaceTextPrimary',
+    },
+    require: {
+        borderColor: 'surfaceBorderActive',
+        textColor: 'surfaceTextPrimary',
+    },
+    success: {
+        borderColor: 'successBorderPrimary',
+        textColor: 'surfaceTextPrimary',
+    },
+};
 
 var inputPasswordConfig = {
     appearance: InputPasswordAppearance,

package/dist/components/Label.js

@@ -1,22 +1,17 @@
-export { L as Label, l as labelConfig } from '../Label-BfotYOmD.js';
+export { L as Label, a as labelAppearance, l as labelConfig } from '../Label-zOLL6ePu.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
-import '../appearance/Label.js';
 import '../hooks/useDeviceTargetClass.js';
-import 'lodash/castArray';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
-import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Text-kxGZButz.js';
-import '../appearance/Text.js';
-import '../Tooltip-ccRCMYQM.js';
-import '../appearance/Tooltip.js';
-import '../Title-CQ_Fr1hO.js';
-import '../appearance/Title.js';
+import '../Text-C4Bg2Mv6.js';
+import '../Tooltip--c-4Qp04.js';
+import '../Title-YVzIwk68.js';

package/dist/components/LanguageSelector.js

@@ -1,28 +1,23 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { I as Icon } from '../Icon-ClsRaxDk.js';
+import { I as Icon } from '../Icon-DptCmI_y.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'react';
 import 'react-inlinesvg';
-import '../appearance/Icon.js';
 import '../hooks/useDeviceTargetClass.js';
-import 'lodash/castArray';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
-import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Link-CzC1kU5C.js';
-import '../tslib.es6-w7hdJ3oZ.js';
-import '../Tooltip-ccRCMYQM.js';
-import '../appearance/Tooltip.js';
-import '../Text-kxGZButz.js';
-import '../appearance/Text.js';
-import '../Title-CQ_Fr1hO.js';
-import '../appearance/Title.js';
+import '../Link-CeQuavin.js';
+import '../Tooltip--c-4Qp04.js';
+import '../Text-C4Bg2Mv6.js';
+import '../Title-YVzIwk68.js';
 
 function LanguageSelectorItem(props) {
     var label = props.label, iconSize = props.iconSize, SvgImage = props.SvgImage, isActive = props.isActive, onClick = props.onClick;

package/dist/components/Link.js

@@ -1,13 +1,12 @@
-export { L as Link, a as LinkWrapper, l as linkConfig } from '../Link-CzC1kU5C.js';
-import '../tslib.es6-w7hdJ3oZ.js';
+export { L as Link, a as LinkWrapper, l as linkConfig } from '../Link-CeQuavin.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
 import '../hooks/useDeviceTargetClass.js';
-import 'lodash/castArray';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
-import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import '../hooks/useStyles.js';

package/dist/components/List.js

@@ -2,18 +2,17 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useStyles } from '../hooks/useStyles.js';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import { L as Link } from '../Link-CzC1kU5C.js';
+import { L as Link } from '../Link-CeQuavin.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../context/UIContext.js';
-import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import '../hooks/styleAttributes.js';
 import 'lodash/castArray';
-import '../tslib.es6-w7hdJ3oZ.js';
+import '../tslib.es6-5FtW-kfi.js';
 
 function List(props) {
     var children = props.children, className = props.className, style = props.style, type = props.type;

package/dist/components/Loader.js

@@ -1,18 +1,15 @@
-export { L as Loader, l as loaderConfig } from '../Loader-CU_5Ydmy.js';
+export { L as Loader, l as loaderConfig } from '../Loader-DHNcD09o.js';
 import 'react/jsx-runtime';
 import 'clsx';
-import '../appearance/Loader.js';
 import '../hooks/useDeviceTargetClass.js';
 import 'react';
-import 'lodash/castArray';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
-import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Text-kxGZButz.js';
-import '../appearance/Text.js';
+import '../Text-C4Bg2Mv6.js';

package/dist/components/Logo.js

@@ -2,18 +2,17 @@ import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { a as LinkWrapper } from '../Link-CzC1kU5C.js';
+import { a as LinkWrapper } from '../Link-CeQuavin.js';
 import 'react';
-import 'lodash/castArray';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
-import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../tslib.es6-w7hdJ3oZ.js';
+import '../tslib.es6-5FtW-kfi.js';
 
 var logoConfig = {
     appearance: undefined,

package/dist/components/Menu.js

@@ -2,22 +2,19 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { M as MenuItem } from '../MenuItem-BEYVY0Vf.js';
+import { M as MenuItem } from '../MenuItem-C7frDyBO.js';
 import 'react';
-import 'lodash/castArray';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
-import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../appearance/MenuItem.js';
-import '../Link-CzC1kU5C.js';
-import '../tslib.es6-w7hdJ3oZ.js';
-import '../Text-kxGZButz.js';
-import '../appearance/Text.js';
+import '../Link-CeQuavin.js';
+import '../tslib.es6-5FtW-kfi.js';
+import '../Text-C4Bg2Mv6.js';
 
 function Menu(props) {
     var after = props.after, before = props.before, children = props.children, className = props.className, items = props.items, type = props.type, onClickItem = props.onClickItem;

package/dist/components/MenuItem.js

@@ -1,20 +1,17 @@
-export { M as MenuItem, m as menuItemConfig } from '../MenuItem-BEYVY0Vf.js';
+export { M as MenuItem, m as menuItemConfig } from '../MenuItem-C7frDyBO.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
-import '../appearance/MenuItem.js';
 import '../hooks/useDeviceTargetClass.js';
-import 'lodash/castArray';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
-import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Link-CzC1kU5C.js';
-import '../tslib.es6-w7hdJ3oZ.js';
-import '../Text-kxGZButz.js';
-import '../appearance/Text.js';
+import '../Link-CeQuavin.js';
+import '../tslib.es6-5FtW-kfi.js';
+import '../Text-C4Bg2Mv6.js';

package/dist/components/Modal.js

@@ -5,20 +5,27 @@ import ReactDOM from 'react-dom';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
 import { O as Overlay } from '../Overlay-DO5dnSRE.js';
-import { L as Loader } from '../Loader-CU_5Ydmy.js';
-import 'lodash/castArray';
+import { L as Loader } from '../Loader-DHNcD09o.js';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
-import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../appearance/Loader.js';
-import '../Text-kxGZButz.js';
-import '../appearance/Text.js';
+import '../Text-C4Bg2Mv6.js';
 
+var modalAppearance = {
+    dev: {},
+};
+
+var modalConfig = {
+    appearance: modalAppearance,
+    setAppearance: function (newComponent) {
+        modalConfig.appearance = newComponent;
+    },
+};
 var getOrCreateModalElement = function (modalQuerySelector, className) {
     var _a;
     if (className === void 0) { className = ''; }
@@ -41,7 +48,7 @@ var getOrCreateModalElement = function (modalQuerySelector, className) {
 };
 // Modal component that is an abstraction around the portal API.
 var Modal = React.forwardRef(function Modal(props, ref) {
-    var id = props.id, children = props.children, _a = props.isCloseOnBlur, isCloseOnBlur = _a === void 0 ? true : _a, _b = props.isOpen, initialIsOpen = _b === void 0 ? false : _b, _c = props.isOverlay, isOverlay = _c === void 0 ? true : _c, _d = props.isScrollOnOpen, isScrollOnOpen = _d === void 0 ? true : _d, _e = props.isSetFocusOnOpen, isSetFocusOnOpen = _e === void 0 ? true : _e, className = props.className, closeButton = props.closeButton, contentClassName = props.contentClassName, _f = props.modalQuerySelector, modalQuerySelector = _f === void 0 ? '#modal-global' : _f, overlayClassName = props.overlayClassName, overlayFill = props.overlayFill, overlayFillGradient = props.overlayFillGradient, overlayOpacity = props.overlayOpacity, onClickOverlay = props.onClickOverlay, onCloseModal = props.onCloseModal, onOpenModal = props.onOpenModal;
+    var id = props.id, children = props.children, _a = props.isCloseOnBlur, isCloseOnBlur = _a === void 0 ? true : _a, _b = props.isOpen, initialIsOpen = _b === void 0 ? false : _b, _c = props.isOverlay, isOverlay = _c === void 0 ? true : _c, _d = props.isScrollOnOpen, isScrollOnOpen = _d === void 0 ? true : _d, _e = props.isSetFocusOnOpen, isSetFocusOnOpen = _e === void 0 ? true : _e, appearance = props.appearance, className = props.className, closeButton = props.closeButton, contentClassName = props.contentClassName, _f = props.modalQuerySelector, modalQuerySelector = _f === void 0 ? '#modal-global' : _f, overlayClassName = props.overlayClassName, overlayFill = props.overlayFill, overlayFillGradient = props.overlayFillGradient, overlayOpacity = props.overlayOpacity, onClickOverlay = props.onClickOverlay, onCloseModal = props.onCloseModal, onOpenModal = props.onOpenModal;
     // Query DOM element
     var _g = useState(null), modalElement = _g[0], setModalElement = _g[1];
     var _h = useState(initialIsOpen), isOpen = _h[0], setIsOpen = _h[1];
@@ -55,7 +62,7 @@ var Modal = React.forwardRef(function Modal(props, ref) {
             // Scroll to opened modal
             if (isScrollOnOpen) {
                 // modalContentRef.current.style.top = `${window.visualViewport.pageTop}px`
-                element.scrollIntoView({ block: 'center', behavior: 'smooth' });
+                element.scrollIntoView({ behavior: 'smooth', block: 'center' });
             }
             // "setTimeout" in this implementation is needs for set focus on modal
             // after "onMouseDown" event on button
@@ -155,13 +162,26 @@ var Modal = React.forwardRef(function Modal(props, ref) {
     });
     // @ts-expect-error
     var modalStyles = useStyles(props).styles;
+    var appearanceConfig = appearance && modalConfig.appearance && modalConfig.appearance[appearance];
     // Use a portal to render the children into the element
     return (modalElement &&
         ReactDOM.createPortal(
         // Any valid React child: JSX, strings, arrays, etc.
-        isOpen ? (jsxs(React.Fragment, { children: [jsxs("div", { className: clsx('modal-content', contentClassName, fillClass, shapeClass, borderColorClass, borderWidthClass, borderTypeClass, elevationClass), ref: modalContentRef, id: id, style: modalStyles, tabIndex: 0, onBlur: isCloseOnBlur ? closeModal : undefined, children: [closeButton && (jsx("div", { className: "modal-content__close", onClick: closeModal, children: closeButton })), jsx("div", { className: "modal-content__wrapper", children: children })] }), jsx(Overlay, { className: clsx('modal__overlay', 'overlay_type_modal', overlayClassName), 
+        isOpen ? (jsxs(React.Fragment, { children: [jsxs("div", { className: clsx('modal-content', contentClassName, fillClass ||
+                        ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
+                            "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), shapeClass ||
+                        ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape) &&
+                            "modal-shape_".concat(appearanceConfig.shape).replace(/([A-Z])/g, '-$1').toLowerCase()), borderColorClass ||
+                        ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderColor) &&
+                            "border-color_".concat(appearanceConfig.borderColor)
+                                .replace(/([A-Z])/g, '-$1')
+                                .toLowerCase()), borderWidthClass, borderTypeClass, elevationClass ||
+                        ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.elevation) &&
+                            "elevation_".concat(appearanceConfig.elevation)
+                                .replace(/([A-Z])/g, '-$1')
+                                .toLowerCase())), ref: modalContentRef, id: id, style: modalStyles, tabIndex: 0, onBlur: isCloseOnBlur ? closeModal : undefined, children: [closeButton && (jsx("div", { className: "modal-content__close", onClick: closeModal, children: closeButton })), jsx("div", { className: "modal-content__wrapper", children: children })] }), jsx(Overlay, { className: clsx('modal__overlay', 'overlay_type_modal', overlayClassName), 
                     // ref={modalOverlayRef}
-                    fill: overlayFill, opacity: overlayOpacity, fillGradient: overlayFillGradient, isOverlay: isOverlay, onClick: onClickOverlay })] })) : null, 
+                    fill: overlayFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.overlayFill), opacity: overlayOpacity || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.overlayOpacity), fillGradient: overlayFillGradient || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.overlayFillGradient), isOverlay: isOverlay || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.isOverlay), onClick: onClickOverlay })] })) : null, 
         // A DOM element
         modalElement));
 });
@@ -170,4 +190,4 @@ function ModalLoader(props) {
     return (jsx("div", { className: "modal-loading", children: jsx("div", { className: "modal-loading__inner", children: jsx(Loader, {}) }) }));
 }
 
-export { Modal, ModalLoader };
+export { Modal, ModalLoader, modalConfig };

package/dist/components/ModalSheetBottom.js

@@ -0,0 +1,32 @@
+import { _ as __assign } from '../tslib.es6-5FtW-kfi.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { Sheet } from 'react-modal-sheet';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useStyles } from '../hooks/useStyles.js';
+import 'react';
+import 'lodash/camelCase';
+import 'lodash/castArray';
+import '../context/UIContext.js';
+import '../hooks/useMediaQueries.js';
+import 'react-responsive';
+import 'lodash/maxBy';
+import 'lodash/upperFirst';
+import '../hooks/styleAttributes.js';
+
+function ModalSheetBottom(props) {
+    var children = props.children, isOpenModal = props.isOpenModal, className = props.className, closeButton = props.closeButton, closeModal = props.closeModal;
+    var borderColorClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    // @ts-expect-error
+    var styles = useStyles(props).styles;
+    return (jsxs(Sheet, __assign({ className: clsx(className, 'modal-sheet-bottom', borderColorClass, fillClass), isOpen: isOpenModal, onClose: closeModal }, props, { children: [jsxs(Sheet.Container, { className: clsx(className, 'modal-sheet-bottom__container', borderColorClass, fillClass), style: styles, children: [closeButton ? (jsx("div", { className: "modal-sheet-bottom__header", children: jsx("div", { className: clsx('modal-sheet-bottom__close'), onClick: closeModal, children: closeButton }) })) : (jsx(Sheet.Header, { className: "modal-sheet-bottom__header" })), jsx(Sheet.Content, { className: clsx('modal-sheet-bottom__content'), children: children })] }), jsx(Sheet.Backdrop, { className: clsx('modal-sheet-bottom__backdrop'), onClick: closeModal })] })));
+}
+
+export { ModalSheetBottom };

package/dist/components/Notification.js

@@ -1,26 +1,55 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { notificationItemAppearance } from '../appearance/Notification.js';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { T as Text } from '../Text-kxGZButz.js';
-import { T as Title } from '../Title-CQ_Fr1hO.js';
+import { T as Text } from '../Text-C4Bg2Mv6.js';
+import { T as Title } from '../Title-YVzIwk68.js';
 import { useNotifications, useNotificationsAPI } from '../context/Notifications.js';
 import 'react';
-import 'lodash/castArray';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
-import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../appearance/Text.js';
-import '../appearance/Title.js';
-import '../tslib.es6-w7hdJ3oZ.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'uuid';
 
+var notificationItemAppearance = {
+    accent: {
+        fill: 'accentPrimary',
+        textColor: 'accentTextPrimary',
+        titleTextColor: 'accentTextPrimary',
+    },
+    primary: {
+        fill: 'primaryPrimary',
+        textColor: 'primaryTextPrimary',
+        titleTextColor: 'primaryTextPrimary',
+    },
+    secondary: {
+        fill: 'secondaryPrimary',
+        textColor: 'secondaryTextPrimary',
+        titleTextColor: 'secondaryTextPrimary',
+    },
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        textColor: 'surfaceTextPrimary',
+        titleTextColor: 'surfaceTextPrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        textColor: 'surfaceTextPrimary',
+        titleTextColor: 'surfaceTextPrimary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        textColor: 'surfaceTextPrimary',
+        titleTextColor: 'surfaceTextPrimary',
+    },
+};
+
 var notificationItemConfig = {
     appearance: notificationItemAppearance,
     setAppearance: function (newComponent) {
@@ -38,11 +67,13 @@ function NotificationItem(props) {
         propsKey: 'width',
     });
     var appearanceConfig = appearance && notificationItemConfig.appearance && notificationItemConfig.appearance[appearance];
+    // @ts-expect-error
     var notificationStyles = useStyles(props).styles;
-    return (jsxs("div", { className: clsx('notification__item', status && "notification__item_status_".concat(status), set && "notification__item_set_".concat(set), size && "notification__item_set_".concat(size), closeButton && 'notification__item_type_close-button', widthClass, fillClass ||
+    return (jsxs("div", { className: clsx('notification__item', status && "notification__item_status_".concat(status), set && "notification__item_set_".concat(set), size && "notification__item_set_".concat(size), closeButton && 'notification__item_type_close-button', widthClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.width) &&
+                "width_".concat(appearanceConfig.width).replace(/([A-Z])/g, '-$1').toLowerCase()), fillClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
-                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase())), "data-tour": dataTour, style: notificationStyles, children: [before, jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsx(Title, { className: "notification__item-title", size: titleTextSize, textColor: titleTextColor ||
-                            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextColor) && appearanceConfig.titleTextColor), children: title })), text && (jsx(Text, { className: "notification__item-text", size: textSize, textColor: textColor || ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor) && appearanceConfig.textColor), children: text })), closeButton && (jsx("div", { className: clsx('notification__item-close', onClickClose && 'cursor_type_pointer'), onClick: function () { return onClickClose && onClickClose(id); }, children: closeButton }))] }), after] }));
+                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase())), "data-tour": dataTour, style: notificationStyles, children: [before, jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsx(Title, { className: "notification__item-title", size: titleTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextSize), textColor: titleTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextColor), children: title })), text && (jsx(Text, { className: "notification__item-text", size: textSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textSize), textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), children: text })), closeButton && (jsx("div", { className: clsx('notification__item-close', onClickClose && 'cursor_type_pointer'), onClick: function () { return onClickClose && onClickClose(id); }, children: closeButton }))] }), after] }));
 }
 
 function NotificationList(props) {
@@ -52,4 +83,4 @@ function NotificationList(props) {
     return (jsx("div", { className: clsx('notification', className), children: jsx("div", { className: "notification__wrapper", children: notifications.map(function (notification, i) { return (jsx(NotificationItem, { closeButton: closeButton, id: notification.id, size: notification.size || size, status: notification.status, text: notification.text, title: notification.title, type: notification.type || type, set: notification.set || set, onClickClose: hideNotifications }, i)); }) }) }));
 }
 
-export { NotificationItem, NotificationList, notificationItemConfig };
+export { NotificationItem, NotificationList, notificationItemAppearance, notificationItemConfig };

package/dist/components/Overlay.js

@@ -3,10 +3,9 @@ import 'react/jsx-runtime';
 import 'clsx';
 import '../hooks/useDeviceTargetClass.js';
 import 'react';
-import 'lodash/castArray';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
-import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import '../hooks/useStyles.js';