@itcase/ui 1.9.36 → 1.9.38

package/dist/cjs/components/Modal.js

@@ -5,12 +5,13 @@ var React = require('react');
 var clsx = require('clsx');
 var ReactDOM = require('react-dom');
 var _default = require('@itcase/icons/default');
+var mergeAppearanceKeys = require('../utils/mergeAppearanceKeys.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Icon = require('../../Icon_cjs_CQxDPPGY.js');
-var Overlay = require('../../Overlay_cjs_-hY4qbRG.js');
-var Loader = require('../../Loader_cjs_CP1xKwb-.js');
+var Icon = require('../../Icon_cjs_D20B2YBo.js');
+var Overlay = require('../../Overlay_cjs_BK_0yTLw.js');
+var Loader = require('../../Loader_cjs_DMIUN6_q.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
@@ -27,8 +28,8 @@ require('lodash/maxBy');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
-require('../../Link_cjs_DqNtNI23.js');
-require('../../Text_cjs_Co2XdYF-.js');
+require('../../Link_cjs_DXBqPjwm.js');
+require('../../Text_cjs_erTy2pUN.js');
 
 const modalAppearanceShape = {
     circular: {
@@ -137,7 +138,7 @@ const getOrCreateModalElement = (modalIdQuerySelector, className = '') => {
 };
 // Modal component that is an abstraction around the portal API.
 const Modal = React.forwardRef(function Modal(props, ref) {
-    const { id, appearance, className, dataTestId, dataTour, title, absoluteHeader = false, modalIdQuerySelector = 'modal-global', print, scroll = false, stickyHeader = false, closeIcon = true, isDisabled, isSkeleton, isCloseOnBlur = true, isOpen: initialIsOpen = false, isOverlay = true, isScrollOnOpen = true, isSetFocusOnOpen = true, onClickOverlay, onCloseModal, onOpenModal, children, } = props;
+    const { id, appearance, className, dataTestId, dataTour, title, absoluteHeader = false, modalIdQuerySelector = 'modal-global', print, scroll = false, stickyHeader = false, before, after, closeIcon = true, isDisabled, isSkeleton, isCloseOnBlur = true, isOpen: initialIsOpen = false, isOverlay = true, isScrollOnOpen = true, isSetFocusOnOpen = true, onClickOverlay, onCloseModal, onOpenModal, children, } = props;
     // Query DOM element
     const [modalElement, setModalElement] = React.useState(null);
     const [isOpen, setIsOpen] = React.useState(initialIsOpen);
@@ -180,11 +181,11 @@ const Modal = React.forwardRef(function Modal(props, ref) {
         setIsOpen(false);
         onCloseModal && onCloseModal();
     }, [modalElement, onCloseModal]);
-    const handleClickOverlay = React.useCallback(() => {
+    const handleClickOverlay = React.useCallback((event) => {
         if (isCloseOnBlur) {
             closeModal();
         }
-        onClickOverlay && onClickOverlay();
+        onClickOverlay && onClickOverlay(event);
     }, [closeModal, isCloseOnBlur, onClickOverlay]);
     React.useEffect(() => {
         if (!modalElement) {
@@ -194,7 +195,7 @@ const Modal = React.forwardRef(function Modal(props, ref) {
     }, [isOpen]); // eslint-disable-line
     React.useLayoutEffect(() => {
         let classNameModal = className;
-        if (print === false) {
+        if (!print) {
             classNameModal = clsx(className, 'no-print');
         }
         const element = getOrCreateModalElement(modalIdQuerySelector, classNameModal);
@@ -203,7 +204,7 @@ const Modal = React.forwardRef(function Modal(props, ref) {
         if (element) {
             addModalProps(element);
         }
-    }, [addModalProps, className, modalIdQuerySelector]);
+    }, [addModalProps, className, modalIdQuerySelector, print]);
     React.useEffect(() => {
         if (!isCloseOnBlur || !isOpen) {
             return;
@@ -228,10 +229,9 @@ const Modal = React.forwardRef(function Modal(props, ref) {
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, modalConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { fillClass, titleTextColor, titleTextColorHover, titleTextSize, titleTextTruncate, titleTextWeight, titleTextWidth, titleTextWrap, borderColorClass, borderTypeClass, borderWidthClass, elevationClass, overlayFill, overlayOpacity, shapeClass, shapeStrengthClass, sizeClass, closeIconAppearance, closeIconAppearanceSize, closeIconFillSize, closeIconImage, closeIconShape, closeIconSize, } = propsGenerator;
-    // @ts-expect-error
     const { styles: modalStyles } = useStyles.useStyles(props);
     return (modalElement &&
-        ReactDOM.createPortal(isOpen ? (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("div", { id: id, className: clsx('modal__content', absoluteHeader && 'modal__content-absolute-header', !title && !closeIcon && 'modal__content-no-header', fillClass && `fill_${fillClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, shapeClass && `shape_${shapeClass}`, sizeClass && `modal_size_${sizeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, elevationClass && `elevation_${elevationClass}`, scroll && `modal-scroll_${scroll}`, stickyHeader && 'modal-scroll_header_sticky', isSkeleton && 'modal_skeleton'), ref: modalContentRef, "data-testid": dataTestId, "data-tour": dataTour, style: modalStyles, tabIndex: 0, children: [(title || closeIcon) && (jsxRuntime.jsxs("div", { className: clsx('modal__header', fillClass && `fill_${fillClass}`), children: [title && (jsxRuntime.jsx(Icon.Title, { width: titleTextWidth, flex: "1", size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), closeIcon && (jsxRuntime.jsx("div", { className: "modal__close", onClick: closeModal, children: jsxRuntime.jsx(Icon.Icon, { appearance: `${closeIconAppearance} ${closeIconAppearanceSize}`, fillSize: closeIconFillSize, iconSize: closeIconSize, shape: closeIconShape, SvgImage: closeIconImage ?? _default.icons24.Action.Close }) }))] })), jsxRuntime.jsx("div", { className: "modal__content-wrapper", children: children })] }), jsxRuntime.jsx(Overlay.Overlay, { className: "modal__overlay", 
+        ReactDOM.createPortal(isOpen ? (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("div", { id: id, className: clsx('modal__content', absoluteHeader && 'modal__content-absolute-header', !title && !closeIcon && 'modal__content-no-header', fillClass && `fill_${fillClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, shapeClass && `shape_${shapeClass}`, sizeClass && `modal_size_${sizeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, elevationClass && `elevation_${elevationClass}`, scroll && `modal-scroll_${scroll}`, stickyHeader && 'modal-scroll_header_sticky', isSkeleton && 'modal_skeleton'), ref: modalContentRef, "data-testid": dataTestId, "data-tour": dataTour, style: modalStyles, tabIndex: 0, children: [before, (title || closeIcon) && (jsxRuntime.jsxs("div", { className: clsx('modal__header', fillClass && `fill_${fillClass}`), children: [title && (jsxRuntime.jsx(Icon.Title, { width: titleTextWidth, flex: "1", size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), closeIcon && (jsxRuntime.jsx("div", { className: "modal__close", onClick: closeModal, children: jsxRuntime.jsx(Icon.Icon, { appearance: mergeAppearanceKeys.mergeAppearanceKeys(closeIconAppearance, closeIconAppearanceSize), fillSize: closeIconFillSize, iconSize: closeIconSize, shape: closeIconShape, SvgImage: closeIconImage ?? _default.icons24.Action.Close }) }))] })), jsxRuntime.jsx("div", { className: "modal__content-wrapper", children: children }), after] }), jsxRuntime.jsx(Overlay.Overlay, { className: "modal__overlay", 
                     // ref={modalOverlayRef}
                     fill: overlayFill, opacity: overlayOpacity, isOverlay: isOverlay, onClick: handleClickOverlay })] })) : null, 
         // A DOM element

package/dist/cjs/components/ModalSheetBottom.js

@@ -7,7 +7,7 @@ var reactModalSheet = require('react-modal-sheet');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Icon = require('../../Icon_cjs_CQxDPPGY.js');
+var Icon = require('../../Icon_cjs_D20B2YBo.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
@@ -24,16 +24,14 @@ require('lodash/maxBy');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
-require('../../Link_cjs_DqNtNI23.js');
-require('../../Text_cjs_Co2XdYF-.js');
+require('../../Link_cjs_DXBqPjwm.js');
+require('../../Text_cjs_erTy2pUN.js');
 
 const modalSheetBottomAppearanceSize = {
     sizeL: {
-        size: 'l',
         titleTextSize: 'h4',
     },
     sizeM: {
-        size: 'm',
         titleTextSize: 'h5',
     },
 };
@@ -55,7 +53,6 @@ const ModalSheetBottom = React.forwardRef(function Modal(props, ref) {
         setIsOpen(false);
         onCloseModalSheetBottom && onCloseModalSheetBottom();
     }, [onCloseModalSheetBottom]);
-    // Save ref things
     React.useImperativeHandle(ref, () => ({
         openModal: openModalSheetBottom,
         closeModal: closeModalSheetBottom,
@@ -64,9 +61,8 @@ const ModalSheetBottom = React.forwardRef(function Modal(props, ref) {
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, modalSheetBottomConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { titleTextColor, titleTextColorHover, titleTextSize, titleTextTruncate, titleTextWeight, titleTextWidth, titleTextWrap, zeroPadding, } = propsGenerator;
-    // @ts-expect-error
     const { styles } = useStyles.useStyles(props);
-    return (jsxRuntime.jsxs(reactModalSheet.Sheet, { className: "modal-sheet-bottom", "data-testid": dataTestId, "data-tour": dataTour, isOpen: isOpen, onClose: closeModalSheetBottom, ...props, children: [jsxRuntime.jsxs(reactModalSheet.Sheet.Container, { className: "modal-sheet-bottom__container", style: styles, children: [jsxRuntime.jsx(reactModalSheet.Sheet.Header, { className: "modal-sheet-bottom__header", children: closeButton && (jsxRuntime.jsx("div", { className: "modal-sheet-bottom__close", onClick: closeModalSheetBottom, children: closeButton })) }), jsxRuntime.jsx(reactModalSheet.Sheet.Content, { className: "modal-sheet-bottom__content", children: jsxRuntime.jsxs("div", { className: clsx('modal-sheet-bottom__content-wrapper', zeroPadding && 'modal-sheet-bottom__content-reset-padding'), children: [title && (jsxRuntime.jsx(Icon.Title, { className: "modal__title", width: titleTextWidth, size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), children] }) })] }), jsxRuntime.jsx(reactModalSheet.Sheet.Backdrop, { className: "modal-sheet-bottom__backdrop", onClick: closeModalSheetBottom })] }));
+    return (jsxRuntime.jsxs(reactModalSheet.Sheet, { ...props, className: "modal-sheet-bottom", "data-testid": dataTestId, "data-tour": dataTour, isOpen: isOpen, onClose: closeModalSheetBottom, children: [jsxRuntime.jsxs(reactModalSheet.Sheet.Container, { className: "modal-sheet-bottom__container", style: styles, children: [jsxRuntime.jsx(reactModalSheet.Sheet.Header, { className: "modal-sheet-bottom__header", children: closeButton && (jsxRuntime.jsx("div", { className: "modal-sheet-bottom__close", onClick: closeModalSheetBottom, children: closeButton })) }), jsxRuntime.jsx(reactModalSheet.Sheet.Content, { className: "modal-sheet-bottom__content", children: jsxRuntime.jsxs("div", { className: clsx('modal-sheet-bottom__content-wrapper', zeroPadding && 'modal-sheet-bottom__content-reset-padding'), children: [title && (jsxRuntime.jsx(Icon.Title, { className: "modal__title", width: titleTextWidth, size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), children] }) })] }), jsxRuntime.jsx(reactModalSheet.Sheet.Backdrop, { className: "modal-sheet-bottom__backdrop", onClick: closeModalSheetBottom })] }));
 });
 
 exports.ModalSheetBottom = ModalSheetBottom;

package/dist/cjs/components/Notification.js

@@ -2,13 +2,14 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
-var Loader = require('../../Loader_cjs_CP1xKwb-.js');
+var mergeAppearanceKeys = require('../utils/mergeAppearanceKeys.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Button = require('../../Button_cjs_BLuRWxbc.js');
-var Icon = require('../../Icon_cjs_CQxDPPGY.js');
-var Text = require('../../Text_cjs_Co2XdYF-.js');
+var Button = require('../../Button_cjs_Ivarkwy6.js');
+var Icon = require('../../Icon_cjs_D20B2YBo.js');
+var Loader = require('../../Loader_cjs_DMIUN6_q.js');
+var Text = require('../../Text_cjs_erTy2pUN.js');
 var _default = require('@itcase/icons/default');
 var Notifications = require('../context/Notifications.js');
 require('../context/UIContext.js');
@@ -24,7 +25,7 @@ require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
-require('../../Link_cjs_DqNtNI23.js');
+require('../../Link_cjs_DXBqPjwm.js');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
@@ -32,7 +33,7 @@ require('../context/UrlAssetPrefix.js');
 const notificationAppearanceDefault = {
     defaultPrimary: {
         fill: 'surfacePrimary',
-        fillHover: 'surfacePrimaryHover',
+        fillHover: 'surfacePrimary',
         titleTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderPrimary',
@@ -47,7 +48,7 @@ const notificationAppearanceDefault = {
 const notificationAppearanceError = {
     errorPrimary: {
         fill: 'errorPrimary',
-        fillHover: 'errorPrimaryHover',
+        fillHover: 'errorPrimary',
         titleTextColor: 'errorTextPrimary',
         descTextColor: 'errorTextPrimary',
         borderColor: 'errorBorderPrimary',
@@ -62,7 +63,7 @@ const notificationAppearanceError = {
 const notificationAppearanceInfo = {
     infoPrimary: {
         fill: 'infoPrimary',
-        fillHover: 'infoPrimaryHover',
+        fillHover: 'infoPrimary',
         titleTextColor: 'infoTextPrimary',
         descTextColor: 'infoTextPrimary',
         borderColor: 'infoBorderPrimary',
@@ -104,17 +105,15 @@ const notificationAppearanceSize = {
         size: 'm',
         titleTextSize: 'xxl',
         descTextSize: 'm',
-        iconSize: 24,
         loaderAppearanceSize: 'sizeS',
-        closeIconAppearanceSize: 'size_24_24',
+        closeIconAppearanceSize: 'size24_24',
     },
     sizeS: {
         size: 'm',
         titleTextSize: 'xl',
         descTextSize: 'm',
-        iconSize: 24,
         loaderAppearanceSize: 'sizeS',
-        closeIconAppearanceSize: 'size_24_24',
+        closeIconAppearanceSize: 'size24_24',
     },
 };
 
@@ -135,7 +134,7 @@ const notificationAppearanceStyle = {
 const notificationAppearanceSuccess = {
     successPrimary: {
         fill: 'successPrimary',
-        fillHover: 'successPrimaryHover',
+        fillHover: 'successPrimary',
         titleTextColor: 'successTextPrimary',
         descTextColor: 'successTextPrimary',
         borderColor: 'successBorderPrimary',
@@ -150,7 +149,7 @@ const notificationAppearanceSuccess = {
 const notificationAppearanceWarning = {
     warningPrimary: {
         fill: 'warningPrimary',
-        fillHover: 'warningPrimaryHover',
+        fillHover: 'warningPrimary',
         titleTextColor: 'warningTextPrimary',
         descTextColor: 'warningTextPrimary',
         borderColor: 'surfaceBorderPrimary',
@@ -183,10 +182,9 @@ function Notification(props) {
     const { id, appearance, className, dataTestId, dataTour, type = 'float', title, text, before, after, isSkeleton, isLoading, onClickButton, onClickClose, } = props;
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, notificationConfig);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    const { fillClass, fillHoverClass, titleTextColor, titleTextSize, descTextColor, descTextSize, buttonAppearance, buttonLabel, elevationClass, loaderAppearance, loaderAppearanceSize, loaderFill, loaderItemFill, loaderSize, loaderType = 'hug', shapeClass, shapeStrengthClass, sizeClass, widthClass, closeIcon, closeIconAppearance, closeIconAppearanceSize, closeIconSrc, } = propsGenerator;
-    // @ts-expect-error
+    const { fillClass, fillHoverClass, titleTextColor, titleTextSize, descTextColor, descTextSize, buttonAppearance, buttonLabel, elevationClass, loaderAppearance, loaderAppearanceSize, loaderFill, loaderItemFill, loaderSize, loaderType = 'dot', shapeClass, shapeStrengthClass, sizeClass, widthClass, closeIcon, closeIconAppearance, closeIconAppearanceSize, closeIconSrc, } = propsGenerator;
     const { styles: notificationStyles } = useStyles.useStyles(props);
-    return (jsxRuntime.jsxs("div", { className: clsx('notification__item', `notification__item_${type}`, widthClass && `width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, fillClass && `fill_${fillClass}`, sizeClass && `notification__item_size_${sizeClass}`, type && `notification__item_type_${type}`, fillHoverClass && `fill_${fillHoverClass}`, isSkeleton && `notification__item_skeleton`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: notificationStyles, children: [before, jsxRuntime.jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsxRuntime.jsx(Text.Text, { className: "notification__item-title", size: titleTextSize, textColor: titleTextColor, children: title })), text && (jsxRuntime.jsx(Text.Text, { className: "notification__item-text", size: descTextSize, textColor: descTextColor, children: text })), isLoading && (jsxRuntime.jsx(Loader.Loader, { appearance: `${loaderAppearance} ${loaderAppearanceSize}`, className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), onClickClose && (jsxRuntime.jsx(Icon.Icon, { appearance: `${closeIconAppearance} ${closeIconAppearanceSize}`, className: clsx('notification__item-close', 'cursor_type_pointer'), imageSrc: closeIconSrc, SvgImage: closeIcon, onClick: () => onClickClose && onClickClose(id) })), (onClickButton || buttonLabel) && (jsxRuntime.jsx(Button.Button, { appearance: buttonAppearance, className: "notification__item-button", width: "fill", label: buttonLabel, onClick: onClickButton }))] }), after] }));
+    return (jsxRuntime.jsxs("div", { className: clsx('notification__item', `notification__item_${type}`, widthClass && `width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, fillClass && `fill_${fillClass}`, sizeClass && `notification__item_size_${sizeClass}`, type && `notification__item_type_${type}`, fillHoverClass && `fill_${fillHoverClass}`, isSkeleton && `notification__item_skeleton`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: notificationStyles, children: [before, jsxRuntime.jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsxRuntime.jsx(Text.Text, { className: "notification__item-title", size: titleTextSize, textColor: titleTextColor, children: title })), text && (jsxRuntime.jsx(Text.Text, { className: "notification__item-text", size: descTextSize, textColor: descTextColor, children: text })), isLoading && (jsxRuntime.jsx(Loader.Loader, { appearance: mergeAppearanceKeys.mergeAppearanceKeys(loaderAppearance, loaderAppearanceSize), className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), onClickClose && (jsxRuntime.jsx(Icon.Icon, { appearance: mergeAppearanceKeys.mergeAppearanceKeys(closeIconAppearance, closeIconAppearanceSize), className: clsx('notification__item-close', 'cursor_type_pointer'), imageSrc: closeIconSrc, SvgImage: closeIcon, onClick: () => onClickClose && onClickClose(id) })), (onClickButton || buttonLabel) && (jsxRuntime.jsx(Button.Button, { appearance: buttonAppearance, className: "notification__item-button", width: "fill", label: buttonLabel, onClick: onClickButton }))] }), after] }));
 }
 
 function NotificationWrapper(props) {

package/dist/cjs/components/Overlay.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Overlay = require('../../Overlay_cjs_-hY4qbRG.js');
+var Overlay = require('../../Overlay_cjs_BK_0yTLw.js');
 require('react/jsx-runtime');
 require('clsx');
 require('../hooks/useAppearanceConfig/useAppearanceConfig.js');

package/dist/cjs/components/Pagination.js

@@ -8,9 +8,9 @@ var ReactPaginate = require('react-paginate');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var DropdownItem = require('../../DropdownItem_cjs_DUtEvTHI.js');
-var Icon = require('../../Icon_cjs_CQxDPPGY.js');
-var Text = require('../../Text_cjs_Co2XdYF-.js');
+var DropdownItem = require('../../DropdownItem_cjs_nZbgMgqg.js');
+var Icon = require('../../Icon_cjs_D20B2YBo.js');
+var Text = require('../../Text_cjs_erTy2pUN.js');
 var _default = require('@itcase/icons/default');
 require('lodash/camelCase');
 require('lodash/castArray');
@@ -25,20 +25,16 @@ require('../utils/setViewportProperty.js');
 require('../hooks.js');
 require('../hooks/useStyles/styleAttributes.js');
 require('lodash/maxBy');
-require('../../Divider_cjs_1fwsCxEb.js');
+require('../../Divider_cjs_C5Ou2Kqa.js');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
-require('../../Link_cjs_DqNtNI23.js');
+require('../../Link_cjs_DXBqPjwm.js');
 
 const paginationAppearanceAccent = {
-    accent: {
-        fill: 'accentPrimary',
-        fillHover: 'accentPrimaryHover',
-    },
     accentPrimary: {
         fill: 'accentPrimary',
-        fillActive: 'accentQuaternary',
+        fillActive: 'accentActiveQuaternary',
         fillInput: 'surfacePrimary',
         borderColor: 'accentBorderPrimary',
         textColor: 'accentTextPrimary',
@@ -46,13 +42,13 @@ const paginationAppearanceAccent = {
         nextIconFillIcon: 'accentItemPrimary',
         pageCountDescTextColor: 'surfaceTextPrimary',
         pageCountDropdownAlignment: 'topCenter',
-        pageCountDropdownElevation: 8,
+        pageCountDropdownElevation: '8',
         pageCountDropdownFill: 'surfacePrimary',
         pageCountDropdownItemDividerFill: 'surfaceSecondary',
         pageCountDropdownItemFill: 'surfacePrimary',
         pageCountDropdownItemFillActive: 'accentPrimary',
-        pageCountDropdownItemFillActiveHover: 'accentActiveHover',
-        pageCountDropdownItemFillHover: 'surfaceSecondary',
+        pageCountDropdownItemFillActiveHover: 'accentActiveHoverPrimary',
+        pageCountDropdownItemFillHover: 'surfaceHoverSecondary',
         pageCountDropdownItemLabelAlign: 'center',
         pageCountDropdownItemLabelColor: 'surfaceTextPrimary',
         pageCountDropdownItemLabelColorActive: 'accentTextPrimary',
@@ -64,7 +60,7 @@ const paginationAppearanceAccent = {
     },
     accentSecondary: {
         fill: 'accentPrimary',
-        fillHover: 'accentPrimaryHover',
+        fillHover: 'accentHoverPrimary',
         labelTextColor: 'accentTextSecondary',
         labelTextColorHover: 'accentTextSecondary',
         borderColor: 'accentBorderPrimary',
@@ -112,17 +108,13 @@ const paginationAppearanceSize = {
         size: 'l',
         labelTextSize: 'l',
         textSize: 'l',
-        builderIcon: _default.icons24.General.Dot,
-        iconAfterFillSize: '24',
-        iconAfterSize: '24',
-        iconBeforeFillSize: '24',
-        iconBeforeSize: '24',
+        builderIcon: _default.icons24.General.DotMedium,
         nextIcon: _default.icons24.Arrow.ChevronRightSmall,
         pageCountDescTextSize: 'l',
         pageCountDropdownItemDividerSize: 'xxs',
         pageCountDropdownItemLabelSize: 'm',
         pageCountDropdownItemSize: 'l',
-        pageCountDropdownItemWidth: '64',
+        pageCountDropdownItemWidth: '64px',
         pageCountInputIcon: _default.icons14.Arrow.ChevronDownSmall,
         pageCountInputIconFillSize: '24',
         pageCountInputTextSize: 'l',
@@ -132,11 +124,7 @@ const paginationAppearanceSize = {
         size: 'm',
         labelTextSize: 'm',
         textSize: 'm',
-        builderIcon: _default.icons24.General.Dot,
-        iconAfterFillSize: '24',
-        iconAfterSize: '24',
-        iconBeforeFillSize: '24',
-        iconBeforeSize: '24',
+        builderIcon: _default.icons24.General.DotMedium,
         nextIcon: _default.icons24.Arrow.ChevronRightSmall,
         pageCountDescTextSize: 'm',
         pageCountDropdownItemDividerSize: 'xxs',
@@ -151,11 +139,7 @@ const paginationAppearanceSize = {
         size: 's',
         labelTextSize: 's',
         textSize: 's',
-        builderIcon: _default.icons24.General.Dot,
-        iconAfterFillSize: '20',
-        iconAfterSize: '20',
-        iconBeforeFillSize: '20',
-        iconBeforeSize: '20',
+        builderIcon: _default.icons24.General.DotMedium,
         nextIcon: _default.icons16.Arrow.ChevronRightSmall,
         pageCountDescTextSize: 's',
         pageCountDropdownItemDividerSize: 'xxs',
@@ -169,10 +153,7 @@ const paginationAppearanceSize = {
         size: 'xs',
         labelTextSize: 'xs',
         textSize: 'xs',
-        beforeSize: '16',
-        // TODO: replace builderIcon: icons24.General.Dot with an builderIcon: icons14.General.Dot,
-        builderIcon: _default.icons24.General.Dot,
-        iconAfterFillSize: '16',
+        builderIcon: _default.icons14.General.DotMedium,
         nextIcon: _default.icons14.Arrow.ChevronRightSmall,
         pageCountDescTextSize: 'xs',
         pageCountDropdownItemDividerSize: 'xxs',
@@ -201,27 +182,27 @@ const paginationAppearanceStyle = {
 const paginationAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
-        fillHover: 'surfaceTertiary',
         fillActive: 'accentPrimary',
-        fillActiveHover: 'accentHoverPrimary',
+        fillActiveHover: 'accentPrimary',
+        fillHover: 'surfaceHoverTertiary',
         fillInput: 'surfacePrimary',
-        fillInputHover: 'surfaceTertiary',
+        fillInputHover: 'surfaceHoverTertiary',
         textColor: 'surfaceTextPrimary',
-        textColorHover: 'surfaceTextPrimary',
         textColorActive: 'accentTextPrimary',
         textColorActiveHover: 'accentTextPrimary',
+        textColorHover: 'surfaceTextPrimary',
         builderIconFillIcon: 'surfaceItemPrimary',
         nextIconFillIcon: 'surfaceItemPrimary',
         pageCountDescTextColor: 'surfaceTextPrimary',
         pageCountDropdownAlignment: 'topCenter',
-        pageCountDropdownElevation: 8,
+        pageCountDropdownElevation: '8',
         pageCountDropdownFill: 'surfacePrimary',
-        pageCountDropdownFillHover: 'surfaceTertiary',
+        pageCountDropdownFillHover: 'surfaceHoverTertiary',
         pageCountDropdownItemDividerFill: 'surfaceSecondary',
         pageCountDropdownItemFill: 'surfacePrimary',
         pageCountDropdownItemFillActive: 'accentPrimary',
-        pageCountDropdownItemFillActiveHover: 'accentActiveHover',
-        pageCountDropdownItemFillHover: 'surfaceSecondary',
+        pageCountDropdownItemFillActiveHover: 'accentPrimary',
+        pageCountDropdownItemFillHover: 'surfaceHoverSecondary',
         pageCountDropdownItemLabelAlign: 'center',
         pageCountDropdownItemLabelColor: 'surfaceTextPrimary',
         pageCountDropdownItemLabelColorActive: 'accentTextPrimary',
@@ -248,15 +229,7 @@ const paginationConfig = {
     },
 };
 function Pagination(props) {
-    const { appearance, className, dataTestId, dataTour, allItemsCount = 0, pageCountDesc = 'кол-во строк', pageCountDropdownItemDividerDirection, pageCountList = [10, 20, 50, 100], pageNumber = 0, perPageCount = 0, isDisabled, isSkeleton, isPageCount, isPageCountDropdownReversed = false, isPageLabelBuilder, onChangePage, onChangePerPageCount, 
-    /**
-     * @deprecated The method should not be used
-     */
-    onPageChange, 
-    /**
-     * @deprecated The method should not be used
-     */
-    onPerPageCountChange, } = props;
+    const { appearance, className, dataTestId, dataTour, allItemsCount = 0, pageCountDesc = 'кол-во строк', pageCountDropdownItemDividerDirection, pageCountList = [10, 20, 50, 100], pageNumber = 0, perPageCount = 0, isDisabled, isSkeleton, isPageCount, isPageCountDropdownReversed = false, isPageLabelBuilder, onChangePage, onChangePerPageCount, onPageChange, onPerPageCountChange, } = props;
     const _onChangePage = React.useMemo(() => {
         if (onPageChange) {
             console.warn('@itcase/ui Pagination warning: "onPageChange" is deprecated, use "onChangePage" instead.');
@@ -278,7 +251,6 @@ function Pagination(props) {
             ? pageCountList?.reverse()
             : pageCountList;
     }, [isPageCountDropdownReversed, pageCountList]);
-    // Toggle command menu
     const onClickCommandMenuButton = React.useCallback(() => {
         setIsOpenDropdown((state) => !state);
     }, []);
@@ -288,18 +260,14 @@ function Pagination(props) {
         setActiveDropdownItem(item);
         setIsOpenDropdown(false);
     }, [_onChangePerPageCount]);
-    // Calculate count of pages for all items
     const paginationPagesCount = React.useMemo(() => {
         if (allItemsCount && allItemsCount > 0) {
-            // Round up. "perPageCount" may be is a query params "limit"
             return ceil(allItemsCount / perPageCount);
         }
         return 0;
     }, [allItemsCount, perPageCount]);
-    // Index for pagination state
     const paginationPageIndex = React.useMemo(() => {
-        const intPageNumber = parseInt(pageNumber);
-        // For pagination need index of page, not number
+        const intPageNumber = pageNumber;
         if (!isNaN(intPageNumber) && intPageNumber > 1) {
             return intPageNumber - 1;
         }
@@ -310,17 +278,12 @@ function Pagination(props) {
     const { justifyContentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, fillInputClass, fillInputHoverClass, fillInputShapeClass, fillInputShapeStrengthClass, textColorActiveClass, textColorActiveHoverClass, textColorClass, textColorHoverClass, textSizeClass, builderIcon, builderIconFill, builderIconFillIcon, builderIconFillSize, builderIconSize, marginPagesDisplayed, nextIcon, nextIconFill, nextIconFillIcon, nextIconFillSize, nextIconSize, pageCountDescTextColor, pageCountDescTextSize, pageCountDropdownAlignment, pageCountDropdownElevation, pageCountDropdownFill, pageCountDropdownFillHover, pageCountDropdownItemDividerFill, pageCountDropdownItemDividerSize, pageCountDropdownItemFill, pageCountDropdownItemFillActive, pageCountDropdownItemFillActiveHover, pageCountDropdownItemFillHover, pageCountDropdownItemLabelAlign, pageCountDropdownItemLabelColor, pageCountDropdownItemLabelColorActive, pageCountDropdownItemLabelColorActiveHover, pageCountDropdownItemLabelColorHover, pageCountDropdownItemLabelSize, pageCountDropdownItemLabelWrap, pageCountDropdownItemShowDivider, pageCountDropdownItemSize, pageCountDropdownItemWidth, pageCountDropdownShape, pageCountDropdownShapeStrength, pageCountInputIcon, pageCountInputIconColor, pageCountInputIconFillSize, pageCountInputIconSrc, pageCountInputTextColor, pageCountInputTextSize, pageRangeDisplayed, previousIcon, previousIconFill, previousIconFillIcon, previousIconFillSize, previousIconSize, sizeClass, } = propsGenerator;
     const { styles: paginationStyles } = useStyles.useStyles(props);
     const minPageSize = Math.min(perPageCount, ...pageCountList);
-    // If there are fewer items than the minimum page size - pagination wont work.
     const isPaginationDisplayed = allItemsCount > minPageSize;
     return (isPaginationDisplayed && (jsxRuntime.jsxs("div", { className: clsx('pagination', sizeClass && `pagination_size_${sizeClass}`, isSkeleton && `pagination_skeleton`), "data-testid": dataTestId, "data-tour": dataTour, style: paginationStyles, children: [jsxRuntime.jsx(ReactPaginate, { activeClassName: clsx('pagination__item_state_active cursor_type_default', fillActiveClass && `fill fill_active_${fillActiveClass}`, fillActiveHoverClass &&
                     `fill fill_active_hover_${fillActiveHoverClass}`), activeLinkClassName: clsx('pagination__item-link_state_active', textColorActiveClass &&
                     `text text-color_active_${textColorActiveClass}`, textColorActiveHoverClass &&
                     `text text-color_active_hover_${textColorActiveHoverClass}`), breakClassName: "pagination__item pagination__item_break", breakLabel: "...", breakLinkClassName: "pagination__item-link", containerClassName: clsx(className, 'pagination__container', justifyContentClass &&
-                    `pagination_justify-content_${justifyContentClass}`), disabledClassName: "pagination__item_state_disabled cursor_type_default", disabledLinkClassName: "pagination__item_state_disabled", 
-                // pages settings
-                forcePage: paginationPageIndex, marginPagesDisplayed: marginPagesDisplayed, nextClassName: clsx('pagination__item pagination__item_next', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), 
-                // next button
-                nextLabel: jsxRuntime.jsx(Icon.Icon, { fill: nextIconFill, fillSize: nextIconFillSize, iconFill: nextIconFillIcon, iconSize: nextIconSize, shape: "circular", SvgImage: nextIcon }), nextLinkClassName: "pagination__item-link", pageClassName: clsx('pagination__item', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), pageCount: paginationPagesCount, pageLabelBuilder: isPageLabelBuilder &&
+                    `pagination_justify-content_${justifyContentClass}`), disabledClassName: "pagination__item_state_disabled cursor_type_default", disabledLinkClassName: "pagination__item_state_disabled", forcePage: paginationPageIndex, marginPagesDisplayed: marginPagesDisplayed, nextClassName: clsx('pagination__item pagination__item_next', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), nextLabel: jsxRuntime.jsx(Icon.Icon, { fill: nextIconFill, fillSize: nextIconFillSize, iconFill: nextIconFillIcon, iconSize: nextIconSize, shape: "circular", SvgImage: nextIcon }), nextLinkClassName: "pagination__item-link", pageClassName: clsx('pagination__item', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), pageCount: paginationPagesCount, pageLabelBuilder: isPageLabelBuilder &&
                     (() => (jsxRuntime.jsx(Icon.Icon, { fill: builderIconFill, fillSize: builderIconFillSize, iconFill: builderIconFillIcon, iconSize: builderIconSize, shape: "circular", SvgImage: builderIcon }))), pageLinkClassName: clsx('pagination__item-link', textSizeClass && `pagination__item-link_size_${textSizeClass}`, textColorClass && `text text-color_${textColorClass}`, textColorHoverClass && `text-color_hover_${textColorHoverClass}`), pageRangeDisplayed: pageRangeDisplayed ?? 8, previousClassName: clsx('pagination__item pagination__item_previous', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), previousLabel: jsxRuntime.jsx(Icon.Icon, { fill: previousIconFill, fillSize: previousIconFillSize, iconFill: previousIconFillIcon, iconSize: previousIconSize, shape: "circular", SvgImage: previousIcon }), previousLinkClassName: "pagination__item-link", onPageChange: _onChangePage }), isPageCount && (jsxRuntime.jsxs("div", { className: clsx(className, 'pagination__count'), children: [jsxRuntime.jsx(Text.Text, { className: "pagination__count-text", size: pageCountDescTextSize, textColor: pageCountDescTextColor, children: pageCountDesc }), jsxRuntime.jsxs("div", { className: clsx('pagination__input', 'cursor_type_pointer', fillInputClass && `fill_${fillInputClass}`, fillInputHoverClass && `fill_hover_${fillInputHoverClass}`, fillInputShapeClass && `shape_${fillInputShapeClass}`, fillInputShapeStrengthClass &&
                             `shape-strength_${fillInputShapeStrengthClass}`), onClick: onClickCommandMenuButton, children: [jsxRuntime.jsx(Text.Text, { size: pageCountInputTextSize, textColor: pageCountInputTextColor, children: activeDropdownItem }), jsxRuntime.jsx(Icon.Icon, { fillSize: pageCountInputIconFillSize, iconFill: pageCountInputIconColor, imageSrc: pageCountInputIconSrc, SvgImage: pageCountInputIcon }), jsxRuntime.jsx(DropdownItem.Dropdown, { className: "pagination__dropdown", alignment: pageCountDropdownAlignment, fill: pageCountDropdownFill, fillHover: pageCountDropdownFillHover, elevation: pageCountDropdownElevation, shape: pageCountDropdownShape, shapeStrength: pageCountDropdownShapeStrength, isOpen: isOpenDropdown, setIsOpen: setIsOpenDropdown, children: pageCountDropdownArray.map((item, index) => activeDropdownItem === item ? (jsxRuntime.jsx(DropdownItem.DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillActive: pageCountDropdownItemFillActive, fillActiveHover: pageCountDropdownItemFillActiveHover, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorActive: pageCountDropdownItemLabelColorActive, labelTextColorActiveHover: pageCountDropdownItemLabelColorActiveHover, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountList.length - 1 &&
                                         pageCountDropdownItemShowDivider, isActive: true, onClick: (event) => handleDropdownItemClick(event, item) }, item)) : (jsxRuntime.jsx(DropdownItem.DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountList.length - 1 &&

package/dist/cjs/components/Radio.js

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var Text = require('../../Text_cjs_Co2XdYF-.js');
+var Text = require('../../Text_cjs_erTy2pUN.js');
 require('react');
 require('lodash/camelCase');
 require('lodash/castArray');
@@ -25,7 +25,6 @@ const radioAppearanceDefault = {
     defaultPrimary: {
         fill: 'surfaceSecondary',
         fillCheckmark: 'surfaceQuaternary',
-        fillDisabled: 'errorPrimary',
         fillRadio: 'surfaceSecondary',
         fillRadioHover: 'surfaceTertiary',
         labelTextColor: 'surfaceTextPrimary',
@@ -43,13 +42,13 @@ const radioAppearanceDisabled = {
     disabledPrimary: {
         fill: 'surfaceDisabled',
         fillCheckmark: 'surfaceQuaternary',
-        labelTextColor: 'surfaceTextDisabled',
-        descTextColor: 'surfaceTextDisabled',
-        borderColor: 'surfaceBorderDisabled',
+        labelTextColor: 'surfaceTextPrimary',
+        descTextColor: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderPrimary',
         borderRadioColor: 'surfaceBorderQuaternary',
-        borderRadioColorHover: 'surfaceBorderQuaternary',
-        borderRadioColorActive: 'surfaceBorderQuaternary',
-        borderRadioColorActiveHover: 'surfaceBorderQuaternary',
+        borderRadioColorActive: 'surfaceBorderActiveQuaternary',
+        borderRadioColorActiveHover: 'surfaceBorderHoverQuaternary',
+        borderRadioColorHover: 'surfaceBorderHoverQuaternary',
     },
 };
 
@@ -61,9 +60,9 @@ const radioAppearanceError = {
         descTextColor: 'surfaceTextPrimary',
         borderColor: 'errorBorderQuaternary',
         borderRadioColor: 'surfaceBorderQuaternary',
-        borderRadioColorHover: 'surfaceBorderQuaternary',
-        borderRadioColorActive: 'surfaceBorderQuaternary',
-        borderRadioColorActiveHover: 'surfaceBorderQuaternary',
+        borderRadioColorActive: 'surfaceBorderActiveQuaternary',
+        borderRadioColorActiveHover: 'surfaceBorderHoverQuaternary',
+        borderRadioColorHover: 'surfaceBorderHoverQuaternary',
     },
 };
 
@@ -75,9 +74,9 @@ const radioAppearanceRequire = {
         descTextColor: 'surfaceTextPrimary',
         borderColor: 'warningBorderSecondary',
         borderRadioColor: 'surfaceBorderQuaternary',
-        borderRadioColorHover: 'surfaceBorderQuaternary',
         borderRadioColorActive: 'surfaceBorderQuaternary',
         borderRadioColorActiveHover: 'surfaceBorderQuaternary',
+        borderRadioColorHover: 'surfaceBorderQuaternary',
     },
 };
 
@@ -151,14 +150,14 @@ const radioAppearanceStyle = {
 const radioAppearanceSuccess = {
     successPrimary: {
         fill: 'successTertiary',
-        fillCheckmark: 'accentItemSecondary',
+        fillCheckmark: 'accentSecondary',
         labelTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
         borderColor: 'accentBorderSecondary',
         borderRadioColor: 'surfaceBorderQuaternary',
-        borderRadioColorHover: 'surfaceBorderQuaternary',
-        borderRadioColorActive: 'surfaceBorderQuaternary',
-        borderRadioColorActiveHover: 'surfaceBorderQuaternary',
+        borderRadioColorActive: 'surfaceBorderActiveQuaternary',
+        borderRadioColorActiveHover: 'surfaceBorderHoverQuaternary',
+        borderRadioColorHover: 'surfaceBorderHoverQuaternary',
     },
 };
 
@@ -197,7 +196,7 @@ function Radio(props) {
             ? borderRadioColorHoverClass &&
                 `radio_border-color_hover_${borderRadioColorHoverClass}`
             : borderRadioColorActiveHoverClass &&
-                `radio_border-color_active_hover_${borderRadioColorActiveHoverClass}`), "data-testid": dataTestId, "data-tour": dataTour, htmlFor: id, children: [jsxRuntime.jsxs("div", { className: clsx('radio__item'), children: [jsxRuntime.jsx("input", { id: String(id), className: "radio__input", type: "radio", checked: checked, disabled: isDisabled && 'disabled', value: value, onChange: onChange }), jsxRuntime.jsx("div", { className: clsx('radio__state', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), children: "\u00A0" }), jsxRuntime.jsx("div", { className: clsx('radio__state-checkmark', checked && fillCheckmarkClass && `fill_${fillCheckmarkClass}`), children: "\u00A0" })] }), label && (jsxRuntime.jsx(Text.Text, { className: "radio__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (jsxRuntime.jsx(Text.Text, { className: "radio__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }))] }));
+                `radio_border-color_active_hover_${borderRadioColorActiveHoverClass}`), "data-testid": dataTestId, "data-tour": dataTour, htmlFor: id, children: [jsxRuntime.jsxs("div", { className: clsx('radio__item'), children: [jsxRuntime.jsx("input", { id: String(id), className: "radio__input", type: "radio", checked: checked, disabled: isDisabled, value: value, onChange: onChange }), jsxRuntime.jsx("div", { className: clsx('radio__state', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), children: "\u00A0" }), jsxRuntime.jsx("div", { className: clsx('radio__state-checkmark', checked && fillCheckmarkClass && `fill_${fillCheckmarkClass}`), children: "\u00A0" })] }), label && (jsxRuntime.jsx(Text.Text, { className: "radio__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (jsxRuntime.jsx(Text.Text, { className: "radio__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }))] }));
 }
 
 exports.Radio = Radio;

package/dist/cjs/components/RangeSlider.js

@@ -24,7 +24,6 @@ function RangeSlider(props) {
     const { className, dataTestId, dataTour, min, max, disabled, pushable, range, step, value, vertical, before, after, set, onChangeSlider, children, } = props;
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
     const { fillClass, fillHandleClass, fillHandleDraggingClass, fillHandleDraggingHoverClass, fillHandleHoverClass, fillRailClass, fillTrackClass, shapeClass, widthClass, } = propsGenerator;
-    // @ts-expect-error
     const { styles: rangeSliderStyles } = useStyles.useStyles(props);
     return (jsxRuntime.jsxs("div", { className: clsx(className, 'range-slider', set && `range-slider_set_${set}`, fillClass && `fill_${fillClass}`, fillTrackClass && `range-slider-track-fill_${fillTrackClass}`, fillRailClass && `range-slider-rail-fill_${fillRailClass}`, fillHandleClass && `range-slider-handle-fill_${fillHandleClass}`, fillHandleHoverClass &&
             `range-slider-handle-fill-hover_${fillHandleHoverClass}`, fillHandleDraggingClass &&

package/dist/cjs/components/Response/img.js

@@ -23,17 +23,17 @@ var img$1 = "data:image/svg+xml,%3csvg width='180' height='180' viewBox='0 0 180
 var img = "data:image/svg+xml,%3csvg width='180' height='180' viewBox='0 0 180 180' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='180' height='180' rx='90' fill='%23DE8806'/%3e%3cpath d='M90.5029 123.721C93.8166 123.721 96.5029 126.407 96.5029 129.721V134.749C96.5027 138.063 93.8165 140.749 90.5029 140.749C87.1894 140.749 84.5031 138.063 84.5029 134.749V129.721C84.5029 126.407 87.1892 123.721 90.5029 123.721ZM90.5029 39.251C93.8166 39.251 96.5029 41.9383 96.5029 45.252V104.582C96.5024 107.895 93.8163 110.582 90.5029 110.582C87.1895 110.582 84.5034 107.895 84.5029 104.582V45.252C84.5029 41.9382 87.1892 39.251 90.5029 39.251Z' fill='white'/%3e%3c/svg%3e";
 
 const responseIcon = {
-    Error: img$7,
-    Warning: img,
-    Success: img$2,
-    Danger: img$9,
     Confirm: img$a,
+    Danger: img$9,
     Empty: img$8,
+    Error: img$7,
     Fail: img$6,
     NothingFound: img$5,
     Refresh: img$4,
     Search: img$3,
+    Success: img$2,
     UnableLoadData: img$1,
+    Warning: img,
 };
 
 exports.responseIcon = responseIcon;