@itcase/ui 1.2.30 → 1.2.32

package/dist/cjs/components/Image.js

@@ -5,10 +5,9 @@ require('react/jsx-runtime');
 require('clsx');
 require('../hooks/useDeviceTargetClass.js');
 require('react');
-require('lodash/castArray');
 require('lodash/camelCase');
+require('lodash/castArray');
 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,15 +1,13 @@
 'use strict';
 
-var Input = require('../../Input-BaicBuyd.js');
+var Input = require('../../Input-KgHOW5DR.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
-require('../appearance/Input.js');
 require('../hooks/useDeviceTargetClass.js');
-require('lodash/castArray');
 require('lodash/camelCase');
+require('lodash/castArray');
 require('../context/UIContext.js');
-require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 

package/dist/cjs/components/InputMask.js

@@ -4,25 +4,24 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-require('lodash/castArray');
 require('lodash/camelCase');
+require('lodash/castArray');
 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

@@ -3,36 +3,84 @@
 var jsxRuntime = require('react/jsx-runtime');
 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');
-require('lodash/castArray');
+var Icon = require('../../Icon-C8ACV9r7.js');
 require('lodash/camelCase');
+require('lodash/castArray');
 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');
 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('../appearance/Tooltip.js');
-require('../../Text-CC0xnhmx.js');
-require('../appearance/Text.js');
-require('../../Title-Ze_OL1Co.js');
-require('../appearance/Title.js');
+require('../../Tooltip-BswHy19O.js');
+require('../../Text-R6XNq6Ca.js');
+require('../../Title-DWIc05TX.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: index.InputPasswordAppearance,
+    appearance: InputPasswordAppearance,
     setAppearance: function (newComponent) {
         inputPasswordConfig.appearance = newComponent;
     },
-    state: index.InputPasswordState,
+    state: InputPasswordState,
     // eslint-disable-next-line perfectionist/sort-objects
     setState: function (newComponent) {
         inputPasswordConfig.state = newComponent;

package/dist/cjs/components/Label.js

@@ -1,29 +1,25 @@
 'use strict';
 
-var Label = require('../../Label-fp2Bus_T.js');
+var Label = require('../../Label-B06hLCqo.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
-require('../appearance/Label.js');
 require('../hooks/useDeviceTargetClass.js');
-require('lodash/castArray');
 require('lodash/camelCase');
+require('lodash/castArray');
 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('../appearance/Text.js');
-require('../../Tooltip-PrwacZFC.js');
-require('../appearance/Tooltip.js');
-require('../../Title-Ze_OL1Co.js');
-require('../appearance/Title.js');
+require('../../Text-R6XNq6Ca.js');
+require('../../Tooltip-BswHy19O.js');
+require('../../Title-DWIc05TX.js');
 
 
 
 exports.Label = Label.Label;
+exports.labelAppearance = Label.labelAppearance;
 exports.labelConfig = Label.labelConfig;

package/dist/cjs/components/LanguageSelector.js

@@ -2,15 +2,14 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
-var Icon = require('../../Icon-B2BwTQnP.js');
+var Icon = require('../../Icon-C8ACV9r7.js');
+require('../../tslib.es6-CCZ3TN_7.js');
 require('react');
 require('react-inlinesvg');
-require('../appearance/Icon.js');
 require('../hooks/useDeviceTargetClass.js');
-require('lodash/castArray');
 require('lodash/camelCase');
+require('lodash/castArray');
 require('../context/UIContext.js');
-require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('../hooks/useStyles.js');
@@ -18,13 +17,9 @@ 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('../appearance/Tooltip.js');
-require('../../Text-CC0xnhmx.js');
-require('../appearance/Text.js');
-require('../../Title-Ze_OL1Co.js');
-require('../appearance/Title.js');
+require('../../Tooltip-BswHy19O.js');
+require('../../Text-R6XNq6Ca.js');
+require('../../Title-DWIc05TX.js');
 
 function LanguageSelectorItem(props) {
     var label = props.label, iconSize = props.iconSize, SvgImage = props.SvgImage, isActive = props.isActive, onClick = props.onClick;

package/dist/cjs/components/Link.js

@@ -6,10 +6,9 @@ require('react/jsx-runtime');
 require('react');
 require('clsx');
 require('../hooks/useDeviceTargetClass.js');
-require('lodash/castArray');
 require('lodash/camelCase');
+require('lodash/castArray');
 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,23 +1,20 @@
 'use strict';
 
-var Loader = require('../../Loader-Ck59IXGG.js');
+var Loader = require('../../Loader-DReoCdZ2.js');
 require('react/jsx-runtime');
 require('clsx');
-require('../appearance/Loader.js');
 require('../hooks/useDeviceTargetClass.js');
 require('react');
-require('lodash/castArray');
 require('lodash/camelCase');
+require('lodash/castArray');
 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('../appearance/Text.js');
+require('../../Text-R6XNq6Ca.js');
 
 
 

package/dist/cjs/components/Logo.js

@@ -6,10 +6,9 @@ var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
 var Link = require('../../Link-CqWzwh8V.js');
 require('react');
-require('lodash/castArray');
 require('lodash/camelCase');
+require('lodash/castArray');
 require('../context/UIContext.js');
-require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('lodash/maxBy');

package/dist/cjs/components/Menu.js

@@ -4,22 +4,19 @@ 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-BXogEsbS.js');
 require('react');
-require('lodash/castArray');
 require('lodash/camelCase');
+require('lodash/castArray');
 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/MenuItem.js');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Text-CC0xnhmx.js');
-require('../appearance/Text.js');
+require('../../Text-R6XNq6Ca.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/cjs/components/MenuItem.js

@@ -1,15 +1,13 @@
 'use strict';
 
-var MenuItem = require('../../MenuItem-BJ3uGKCH.js');
+var MenuItem = require('../../MenuItem-BXogEsbS.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
-require('../appearance/MenuItem.js');
 require('../hooks/useDeviceTargetClass.js');
-require('lodash/castArray');
 require('lodash/camelCase');
+require('lodash/castArray');
 require('../context/UIContext.js');
-require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('../hooks/useStyles.js');
@@ -18,8 +16,7 @@ require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Text-CC0xnhmx.js');
-require('../appearance/Text.js');
+require('../../Text-R6XNq6Ca.js');
 
 
 

package/dist/cjs/components/Modal.js

@@ -7,20 +7,27 @@ var ReactDOM = require('react-dom');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
 var Overlay = require('../../Overlay-CFXouKnl.js');
-var Loader = require('../../Loader-Ck59IXGG.js');
-require('lodash/castArray');
+var Loader = require('../../Loader-DReoCdZ2.js');
 require('lodash/camelCase');
+require('lodash/castArray');
 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('../appearance/Text.js');
+require('../../Text-R6XNq6Ca.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 = ''; }
@@ -43,7 +50,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 +64,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 +164,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 +194,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/camelCase');
+require('lodash/castArray');
+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: "modal-sheet-bottom__header", children: jsxRuntime.jsx("div", { className: clsx('modal-sheet-bottom__close'), onClick: closeModal, children: closeButton }) })) : (jsxRuntime.jsx(reactModalSheet.Sheet.Header, { className: "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

@@ -2,29 +2,58 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 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-R6XNq6Ca.js');
+var Title = require('../../Title-DWIc05TX.js');
 var Notifications = require('../context/Notifications.js');
 require('react');
-require('lodash/castArray');
 require('lodash/camelCase');
+require('lodash/castArray');
 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/Text.js');
-require('../appearance/Title.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('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: index.notificationItemAppearance,
+    appearance: notificationItemAppearance,
     setAppearance: function (newComponent) {
         notificationItemConfig.appearance = newComponent;
     },
@@ -40,11 +69,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) {
@@ -56,4 +87,5 @@ function NotificationList(props) {
 
 exports.NotificationItem = NotificationItem;
 exports.NotificationList = NotificationList;
+exports.notificationItemAppearance = notificationItemAppearance;
 exports.notificationItemConfig = notificationItemConfig;

package/dist/cjs/components/Overlay.js

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