@itcase/ui 1.2.29 → 1.2.31

package/dist/components/Divider.js

@@ -1,12 +1,12 @@
-export { D as Divider } from '../Divider-U5UdY-ef.js';
+export { D as Divider, d as dividerConfig } from '../Divider-DE2Q5J36.js';
 import 'react/jsx-runtime';
 import 'clsx';
+import '../appearance/Divider.js';
 import '../hooks/useDeviceTargetClass.js';
 import 'react';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
-import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import '../hooks/useStyles.js';

package/dist/components/Dot.js

@@ -6,7 +6,6 @@ import 'react';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
-import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import 'lodash/maxBy';
@@ -14,7 +13,7 @@ import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 
 function Dot(props) {
-    var className = props.className, children = props.children;
+    var children = props.children, className = props.className;
     var borderColorClass = useDeviceTargetClass(props, {
         prefix: 'border-color_',
         propsKey: 'borderColor',
@@ -39,6 +38,5 @@ function Dot(props) {
     var styles = useStyles(props).styles;
     return (jsx("div", { className: clsx(className, 'dot', borderColorClass, borderTypeClass, fillClass, shapeClass, sizeClass), style: styles, children: children }));
 }
-Dot.defaultProps = {};
 
 export { Dot };

package/dist/components/Dropdown.js

@@ -1,4 +1,4 @@
-export { D as Dropdown, a as DropdownItem } from '../DropdownItem-CFkRx8LX.js';
+export { D as Dropdown, a as DropdownItem, d as dropdownItemConfig } from '../DropdownItem-DzDP45iO.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -6,15 +6,16 @@ import '../hooks/useDeviceTargetClass.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 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 '../Divider-U5UdY-ef.js';
-import '../Link-CzC1kU5C.js';
-import '../tslib.es6-w7hdJ3oZ.js';
-import '../Text-kxGZButz.js';
+import '../appearance/DropdownItem.js';
+import '../Divider-DE2Q5J36.js';
+import '../appearance/Divider.js';
+import '../Link-CeQuavin.js';
+import '../tslib.es6-5FtW-kfi.js';
+import '../Text-DlSG_p4u.js';
 import '../appearance/Text.js';

package/dist/components/Flex.js

@@ -6,7 +6,6 @@ import 'react';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
-import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import 'lodash/maxBy';

package/dist/components/Grid.js

@@ -6,7 +6,6 @@ import 'react';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
-import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import 'lodash/maxBy';
@@ -14,7 +13,7 @@ import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 
 function Grid(props) {
-    var id = props.id, after = props.after, before = props.before, children = props.children, className = props.className, horizontalResizing = props.horizontalResizing, horizontalScroll = props.horizontalScroll, onClick = props.onClick, type = props.type, useGridSystem = props.useGridSystem, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, dataTour = props.dataTour, verticalResizing = props.verticalResizing;
+    var id = props.id, children = props.children, after = props.after, before = props.before, className = props.className, dataTour = props.dataTour, horizontalResizing = props.horizontalResizing, horizontalScroll = props.horizontalScroll, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, type = props.type, useGridSystem = props.useGridSystem, verticalResizing = props.verticalResizing, onClick = props.onClick;
     var columnsClass = useDeviceTargetClass(props, {
         prefix: 'grid_columns_',
         propsKey: 'columns',
@@ -59,9 +58,6 @@ function Grid(props) {
     var gridStyles = useStyles(props).styles;
     return (jsxs(Tag, { className: clsx(className, 'grid', useGridSystem && "grid_state_system", horizontalScroll && "grid_scroll_horizontal", type && "grid_type_".concat(type), columnsClass, rowsClass, rowGapClass, columnGapClass, alignContentClass, alignItemsClass, borderColorClass, justifyContentClass, justifyItemsClass, fillClass, horizontalResizing && "grid_horizontal-resizing_".concat(horizontalResizing), verticalResizing && "grid_vertical-resizing_".concat(verticalResizing)), "data-tour": dataTour, id: id, style: gridStyles, onClick: onClick, children: [before && jsx("div", { className: "grid__before", children: before }), children, after && jsx("div", { className: "grid__after", children: after })] }));
 }
-Grid.defaultProps = {
-    tag: 'div',
-};
 
 function GridItem(props) {
     var id = props.id, children = props.children, className = props.className, dataTour = props.dataTour, onClick = props.onClick;
@@ -156,8 +152,5 @@ function GridRow(props) {
     var gridRowStyles = useStyles(props).styles;
     return (jsx(Tag, { className: clsx(className, 'grid__row', fillClass, fillHoverClass, borderColorClass), "data-tour": dataTour, htmlFor: htmlFor, id: id, style: gridRowStyles, onClick: onClick, children: children }));
 }
-GridRow.defaultProps = {
-    tag: 'div',
-};
 
 export { Grid, GridItem, GridRow };

package/dist/components/Group.js

@@ -7,7 +7,6 @@ import '../hooks/useDeviceTargetClass.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
-import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import '../hooks/useStyles.js';

package/dist/components/HTMLContent.js

@@ -6,7 +6,6 @@ import 'react';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
-import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import 'lodash/maxBy';

package/dist/components/Icon.js

@@ -1,4 +1,5 @@
-export { I as Icon, i as iconConfig } from '../Icon-ClsRaxDk.js';
+export { I as Icon, i as iconConfig } from '../Icon-B7BJo5kW.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -8,18 +9,16 @@ import '../hooks/useDeviceTargetClass.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 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 '../Link-CeQuavin.js';
+import '../Tooltip-f5EWhsGj.js';
 import '../appearance/Tooltip.js';
-import '../Text-kxGZButz.js';
+import '../Text-DlSG_p4u.js';
 import '../appearance/Text.js';
-import '../Title-CQ_Fr1hO.js';
+import '../Title-mkus84Rh.js';
 import '../appearance/Title.js';

package/dist/components/Image.js

@@ -6,7 +6,6 @@ import 'react';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
-import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import '../hooks/useStyles.js';

package/dist/components/Input.js

@@ -1,4 +1,4 @@
-export { I as Input, i as inputConfig } from '../Input-DbzsXvEf.js';
+export { I as Input, i as inputConfig } from '../Input-HGM-rzzr.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -7,6 +7,5 @@ import '../hooks/useDeviceTargetClass.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
-import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';

package/dist/components/InputMask.js

@@ -5,22 +5,21 @@ import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 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

@@ -3,26 +3,25 @@ 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 { I as Icon } from '../Icon-B7BJo5kW.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 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 '../Link-CeQuavin.js';
+import '../Tooltip-f5EWhsGj.js';
 import '../appearance/Tooltip.js';
-import '../Text-kxGZButz.js';
+import '../Text-DlSG_p4u.js';
 import '../appearance/Text.js';
-import '../Title-CQ_Fr1hO.js';
+import '../Title-mkus84Rh.js';
 import '../appearance/Title.js';
 
 var inputPasswordConfig = {

package/dist/components/Label.js

@@ -1,4 +1,4 @@
-export { L as Label, l as labelConfig } from '../Label-BfotYOmD.js';
+export { L as Label, l as labelConfig } from '../Label-Chm6tl6E.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -7,16 +7,15 @@ import '../hooks/useDeviceTargetClass.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 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 '../Text-DlSG_p4u.js';
 import '../appearance/Text.js';
-import '../Tooltip-ccRCMYQM.js';
+import '../Tooltip-f5EWhsGj.js';
 import '../appearance/Tooltip.js';
-import '../Title-CQ_Fr1hO.js';
+import '../Title-mkus84Rh.js';
 import '../appearance/Title.js';

package/dist/components/LanguageSelector.js

@@ -1,6 +1,7 @@
 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-B7BJo5kW.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'react';
 import 'react-inlinesvg';
 import '../appearance/Icon.js';
@@ -8,20 +9,18 @@ import '../hooks/useDeviceTargetClass.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 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 '../Link-CeQuavin.js';
+import '../Tooltip-f5EWhsGj.js';
 import '../appearance/Tooltip.js';
-import '../Text-kxGZButz.js';
+import '../Text-DlSG_p4u.js';
 import '../appearance/Text.js';
-import '../Title-CQ_Fr1hO.js';
+import '../Title-mkus84Rh.js';
 import '../appearance/Title.js';
 
 function LanguageSelectorItem(props) {

package/dist/components/Link.js

@@ -1,5 +1,5 @@
-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';
@@ -7,7 +7,6 @@ import '../hooks/useDeviceTargetClass.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 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,4 +1,4 @@
-export { L as Loader, l as loaderConfig } from '../Loader-CU_5Ydmy.js';
+export { L as Loader, l as loaderConfig } from '../Loader-CqEocvjh.js';
 import 'react/jsx-runtime';
 import 'clsx';
 import '../appearance/Loader.js';
@@ -7,12 +7,11 @@ import 'react';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 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 '../Text-DlSG_p4u.js';
 import '../appearance/Text.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 '../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,21 +2,20 @@ 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-zHzWXIvQ.js';
 import 'react';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 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 '../Link-CeQuavin.js';
+import '../tslib.es6-5FtW-kfi.js';
+import '../Text-DlSG_p4u.js';
 import '../appearance/Text.js';
 
 function Menu(props) {

package/dist/components/MenuItem.js

@@ -1,4 +1,4 @@
-export { M as MenuItem, m as menuItemConfig } from '../MenuItem-BEYVY0Vf.js';
+export { M as MenuItem, m as menuItemConfig } from '../MenuItem-zHzWXIvQ.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -7,14 +7,13 @@ import '../hooks/useDeviceTargetClass.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 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 '../Link-CeQuavin.js';
+import '../tslib.es6-5FtW-kfi.js';
+import '../Text-DlSG_p4u.js';
 import '../appearance/Text.js';

package/dist/components/Modal.js

@@ -2,23 +2,29 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useState, useRef, useCallback, useEffect, useLayoutEffect, useImperativeHandle } from 'react';
 import clsx from 'clsx';
 import ReactDOM from 'react-dom';
+import { modalAppearance } from '../appearance/Modal.js';
 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 { L as Loader } from '../Loader-CqEocvjh.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 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 '../Text-DlSG_p4u.js';
 import '../appearance/Text.js';
 
+var modalConfig = {
+    appearance: modalAppearance,
+    setAppearance: function (newComponent) {
+        modalConfig.appearance = newComponent;
+    },
+};
 var getOrCreateModalElement = function (modalQuerySelector, className) {
     var _a;
     if (className === void 0) { className = ''; }
@@ -41,7 +47,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 +61,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 +161,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 +189,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/castArray';
+import 'lodash/camelCase';
+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: clsx('modal-sheet-bottom__close'), onClick: closeModal, children: closeButton })) : (jsx(Sheet.Header, { className: clsx('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

@@ -3,14 +3,13 @@ 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-DlSG_p4u.js';
+import { T as Title } from '../Title-mkus84Rh.js';
 import { useNotifications, useNotificationsAPI } from '../context/Notifications.js';
 import 'react';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
-import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import 'lodash/maxBy';
@@ -18,7 +17,7 @@ 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 notificationItemConfig = {
@@ -38,11 +37,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) {