@itcase/ui 1.2.30 → 1.2.31

package/dist/cjs/components/Dropdown.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var DropdownItem = require('../../DropdownItem-toApJyeB.js');
+var DropdownItem = require('../../DropdownItem-CT9Dmiub.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -8,20 +8,22 @@ require('../hooks/useDeviceTargetClass.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
-require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Divider-BjB5MD6u.js');
+require('../appearance/DropdownItem.js');
+require('../../Divider-3upWnf8a.js');
+require('../appearance/Divider.js');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Text-CC0xnhmx.js');
+require('../../Text-1b-Bk7yG.js');
 require('../appearance/Text.js');
 
 
 
 exports.Dropdown = DropdownItem.Dropdown;
 exports.DropdownItem = DropdownItem.DropdownItem;
+exports.dropdownItemConfig = DropdownItem.dropdownItemConfig;

package/dist/cjs/components/Flex.js

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

package/dist/cjs/components/Grid.js

@@ -8,7 +8,6 @@ require('react');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
-require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('lodash/maxBy');
@@ -16,7 +15,7 @@ require('lodash/upperFirst');
 require('../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.useDeviceTargetClass(props, {
         prefix: 'grid_columns_',
         propsKey: 'columns',
@@ -61,9 +60,6 @@ function Grid(props) {
     var gridStyles = useStyles.useStyles(props).styles;
     return (jsxRuntime.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 && jsxRuntime.jsx("div", { className: "grid__before", children: before }), children, after && jsxRuntime.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;
@@ -158,9 +154,6 @@ function GridRow(props) {
     var gridRowStyles = useStyles.useStyles(props).styles;
     return (jsxRuntime.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',
-};
 
 exports.Grid = Grid;
 exports.GridItem = GridItem;

package/dist/cjs/components/Group.js

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

package/dist/cjs/components/HTMLContent.js

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

package/dist/cjs/components/Icon.js

@@ -1,6 +1,7 @@
 'use strict';
 
-var Icon = require('../../Icon-B2BwTQnP.js');
+var Icon = require('../../Icon-PoesVPJn.js');
+require('../../tslib.es6-CCZ3TN_7.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -10,7 +11,6 @@ require('../hooks/useDeviceTargetClass.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
-require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('../hooks/useStyles.js');
@@ -18,12 +18,11 @@ require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('../../Link-CqWzwh8V.js');
-require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-PrwacZFC.js');
+require('../../Tooltip-CNJN2lf5.js');
 require('../appearance/Tooltip.js');
-require('../../Text-CC0xnhmx.js');
+require('../../Text-1b-Bk7yG.js');
 require('../appearance/Text.js');
-require('../../Title-Ze_OL1Co.js');
+require('../../Title-o5ofk8ge.js');
 require('../appearance/Title.js');
 
 

package/dist/cjs/components/Image.js

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

package/dist/cjs/components/Input.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Input = require('../../Input-BaicBuyd.js');
+var Input = require('../../Input-DXbt_RWB.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -9,7 +9,6 @@ require('../hooks/useDeviceTargetClass.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
-require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 

package/dist/cjs/components/InputMask.js

@@ -7,22 +7,21 @@ var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
-require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('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.useDeviceTargetClass(props, {
         prefix: 'fill_',
         propsKey: 'fill',
@@ -129,13 +128,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',
 };
 
 exports.Input = Input;

package/dist/cjs/components/InputPassword.js

@@ -5,13 +5,13 @@ var React = require('react');
 var clsx = require('clsx');
 var index = require('../appearance/InputPassword.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var Icon = require('../../Icon-B2BwTQnP.js');
+var Icon = require('../../Icon-PoesVPJn.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
-require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../../tslib.es6-CCZ3TN_7.js');
 require('react-inlinesvg');
 require('../appearance/Icon.js');
 require('../hooks/useStyles.js');
@@ -19,12 +19,11 @@ require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('../../Link-CqWzwh8V.js');
-require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-PrwacZFC.js');
+require('../../Tooltip-CNJN2lf5.js');
 require('../appearance/Tooltip.js');
-require('../../Text-CC0xnhmx.js');
+require('../../Text-1b-Bk7yG.js');
 require('../appearance/Text.js');
-require('../../Title-Ze_OL1Co.js');
+require('../../Title-o5ofk8ge.js');
 require('../appearance/Title.js');
 
 var inputPasswordConfig = {

package/dist/cjs/components/Label.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Label = require('../../Label-fp2Bus_T.js');
+var Label = require('../../Label-BBm19sQ-.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -9,18 +9,17 @@ require('../hooks/useDeviceTargetClass.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
-require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Text-CC0xnhmx.js');
+require('../../Text-1b-Bk7yG.js');
 require('../appearance/Text.js');
-require('../../Tooltip-PrwacZFC.js');
+require('../../Tooltip-CNJN2lf5.js');
 require('../appearance/Tooltip.js');
-require('../../Title-Ze_OL1Co.js');
+require('../../Title-o5ofk8ge.js');
 require('../appearance/Title.js');
 
 

package/dist/cjs/components/LanguageSelector.js

@@ -2,7 +2,8 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
-var Icon = require('../../Icon-B2BwTQnP.js');
+var Icon = require('../../Icon-PoesVPJn.js');
+require('../../tslib.es6-CCZ3TN_7.js');
 require('react');
 require('react-inlinesvg');
 require('../appearance/Icon.js');
@@ -10,7 +11,6 @@ require('../hooks/useDeviceTargetClass.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
-require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('../hooks/useStyles.js');
@@ -18,12 +18,11 @@ require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('../../Link-CqWzwh8V.js');
-require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-PrwacZFC.js');
+require('../../Tooltip-CNJN2lf5.js');
 require('../appearance/Tooltip.js');
-require('../../Text-CC0xnhmx.js');
+require('../../Text-1b-Bk7yG.js');
 require('../appearance/Text.js');
-require('../../Title-Ze_OL1Co.js');
+require('../../Title-o5ofk8ge.js');
 require('../appearance/Title.js');
 
 function LanguageSelectorItem(props) {

package/dist/cjs/components/Link.js

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

package/dist/cjs/components/List.js

@@ -10,7 +10,6 @@ require('lodash/camelCase');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../context/UIContext.js');
-require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('../hooks/styleAttributes.js');

package/dist/cjs/components/Loader.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Loader = require('../../Loader-Ck59IXGG.js');
+var Loader = require('../../Loader-DRTOGvF1.js');
 require('react/jsx-runtime');
 require('clsx');
 require('../appearance/Loader.js');
@@ -9,14 +9,13 @@ require('react');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
-require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Text-CC0xnhmx.js');
+require('../../Text-1b-Bk7yG.js');
 require('../appearance/Text.js');
 
 

package/dist/cjs/components/Logo.js

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

package/dist/cjs/components/Menu.js

@@ -4,12 +4,11 @@ var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
-var MenuItem = require('../../MenuItem-BJ3uGKCH.js');
+var MenuItem = require('../../MenuItem-DPJ_9FxW.js');
 require('react');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
-require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('lodash/maxBy');
@@ -18,7 +17,7 @@ require('../hooks/styleAttributes.js');
 require('../appearance/MenuItem.js');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Text-CC0xnhmx.js');
+require('../../Text-1b-Bk7yG.js');
 require('../appearance/Text.js');
 
 function Menu(props) {

package/dist/cjs/components/MenuItem.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var MenuItem = require('../../MenuItem-BJ3uGKCH.js');
+var MenuItem = require('../../MenuItem-DPJ_9FxW.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -9,7 +9,6 @@ require('../hooks/useDeviceTargetClass.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
-require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('../hooks/useStyles.js');
@@ -18,7 +17,7 @@ require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Text-CC0xnhmx.js');
+require('../../Text-1b-Bk7yG.js');
 require('../appearance/Text.js');
 
 

package/dist/cjs/components/Modal.js

@@ -4,23 +4,29 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var ReactDOM = require('react-dom');
+var index = require('../appearance/Modal.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
 var Overlay = require('../../Overlay-CFXouKnl.js');
-var Loader = require('../../Loader-Ck59IXGG.js');
+var Loader = require('../../Loader-DRTOGvF1.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
-require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('../appearance/Loader.js');
-require('../../Text-CC0xnhmx.js');
+require('../../Text-1b-Bk7yG.js');
 require('../appearance/Text.js');
 
+var modalConfig = {
+    appearance: index.modalAppearance,
+    setAppearance: function (newComponent) {
+        modalConfig.appearance = newComponent;
+    },
+};
 var getOrCreateModalElement = function (modalQuerySelector, className) {
     var _a;
     if (className === void 0) { className = ''; }
@@ -43,7 +49,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 = React.useState(null), modalElement = _g[0], setModalElement = _g[1];
     var _h = React.useState(initialIsOpen), isOpen = _h[0], setIsOpen = _h[1];
@@ -57,7 +63,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
@@ -157,13 +163,26 @@ var Modal = React.forwardRef(function Modal(props, ref) {
     });
     // @ts-expect-error
     var modalStyles = useStyles.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 ? (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.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 && (jsxRuntime.jsx("div", { className: "modal-content__close", onClick: closeModal, children: closeButton })), jsxRuntime.jsx("div", { className: "modal-content__wrapper", children: children })] }), jsxRuntime.jsx(Overlay.Overlay, { className: clsx('modal__overlay', 'overlay_type_modal', overlayClassName), 
+        isOpen ? (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.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 && (jsxRuntime.jsx("div", { className: "modal-content__close", onClick: closeModal, children: closeButton })), jsxRuntime.jsx("div", { className: "modal-content__wrapper", children: children })] }), jsxRuntime.jsx(Overlay.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));
 });
@@ -174,3 +193,4 @@ function ModalLoader(props) {
 
 exports.Modal = Modal;
 exports.ModalLoader = ModalLoader;
+exports.modalConfig = modalConfig;

package/dist/cjs/components/ModalSheetBottom.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var tslib_es6 = require('../../tslib.es6-CCZ3TN_7.js');
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var reactModalSheet = require('react-modal-sheet');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var useStyles = require('../hooks/useStyles.js');
+require('react');
+require('lodash/castArray');
+require('lodash/camelCase');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../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.useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    // @ts-expect-error
+    var styles = useStyles.useStyles(props).styles;
+    return (jsxRuntime.jsxs(reactModalSheet.Sheet, tslib_es6.__assign({ className: clsx(className, 'modal-sheet-bottom', borderColorClass, fillClass), isOpen: isOpenModal, onClose: closeModal }, props, { children: [jsxRuntime.jsxs(reactModalSheet.Sheet.Container, { className: clsx(className, 'modal-sheet-bottom__container', borderColorClass, fillClass), style: styles, children: [closeButton ? (jsxRuntime.jsx("div", { className: clsx('modal-sheet-bottom__close'), onClick: closeModal, children: closeButton })) : (jsxRuntime.jsx(reactModalSheet.Sheet.Header, { className: clsx('modal-sheet-bottom__header') })), jsxRuntime.jsx(reactModalSheet.Sheet.Content, { className: clsx('modal-sheet-bottom__content'), children: children })] }), jsxRuntime.jsx(reactModalSheet.Sheet.Backdrop, { className: clsx('modal-sheet-bottom__backdrop'), onClick: closeModal })] })));
+}
+
+exports.ModalSheetBottom = ModalSheetBottom;

package/dist/cjs/components/Notification.js

@@ -5,14 +5,13 @@ var clsx = require('clsx');
 var index = require('../appearance/Notification.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
-var Text = require('../../Text-CC0xnhmx.js');
-var Title = require('../../Title-Ze_OL1Co.js');
+var Text = require('../../Text-1b-Bk7yG.js');
+var Title = require('../../Title-o5ofk8ge.js');
 var Notifications = require('../context/Notifications.js');
 require('react');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
-require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('lodash/maxBy');
@@ -40,11 +39,13 @@ function NotificationItem(props) {
         propsKey: 'width',
     });
     var appearanceConfig = appearance && notificationItemConfig.appearance && notificationItemConfig.appearance[appearance];
+    // @ts-expect-error
     var notificationStyles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.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 (jsxRuntime.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, jsxRuntime.jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsxRuntime.jsx(Title.Title, { className: "notification__item-title", size: titleTextSize, textColor: titleTextColor ||
-                            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextColor) && appearanceConfig.titleTextColor), children: title })), text && (jsxRuntime.jsx(Text.Text, { className: "notification__item-text", size: textSize, textColor: textColor || ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor) && appearanceConfig.textColor), children: text })), closeButton && (jsxRuntime.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, jsxRuntime.jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsxRuntime.jsx(Title.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 && (jsxRuntime.jsx(Text.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 && (jsxRuntime.jsx("div", { className: clsx('notification__item-close', onClickClose && 'cursor_type_pointer'), onClick: function () { return onClickClose && onClickClose(id); }, children: closeButton }))] }), after] }));
 }
 
 function NotificationList(props) {

package/dist/cjs/components/Overlay.js

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