@itcase/ui 1.1.14 → 1.1.16

package/dist/{DropdownItem-BaQXZu0w.js → DropdownItem-Cf5vBgDu.js}

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
 import { D as Divider } from './Divider-Dhj6sMWd.js';
-import { L as Link } from './Link-CbCqej5B.js';
+import { L as Link } from './Link-Co6uspFK.js';
 import { T as Text } from './Text-CxrzHFN1.js';
 
 function Dropdown(props) {

package/dist/{GridRow-DUnumam2.js → GridRow-CvYQDJ2W.js}

@@ -155,4 +155,4 @@ GridRow.defaultProps = {
     tag: 'div',
 };
 
-export { Grid as G, GridRow as a, GridItem as b };
+export { Grid as G, GridItem as a, GridRow as b };

package/dist/{Icon-Duj1nynQ.js → Icon-DWnG-4KG.js}

@@ -5,8 +5,8 @@ import clsx from 'clsx';
 import SVG from 'react-inlinesvg';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
-import { a as LinkWrapper } from './Link-CbCqej5B.js';
-import { T as Tooltip } from './Tooltip-CcwyN7PD.js';
+import { a as LinkWrapper } from './Link-Co6uspFK.js';
+import { T as Tooltip } from './Tooltip-CpEQOh9v.js';
 
 var iconConfig = {
     appearance: {},

package/dist/{Input-CYMKQ0qF.js → Input-CYDtAlO-.js}

@@ -1,20 +1,21 @@
 import { j as jsxRuntimeExports } from './jsx-runtime-C2uP7l8s.js';
-import React__default, { useMemo } from 'react';
+import React__default from 'react';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 
 var inputConfig = {
-    state: undefined,
-    setState: function (newComponent) {
-        inputConfig.state = newComponent;
-    },
     appearance: undefined,
     setAppearance: function (newComponent) {
         inputConfig.appearance = newComponent;
     },
+    state: undefined,
+    // eslint-disable-next-line perfectionist/sort-objects
+    setState: function (newComponent) {
+        inputConfig.state = newComponent;
+    },
 };
 var Input = React__default.forwardRef(function Input(props, ref) {
-    var appearance = props.appearance, state = props.state, index = props.index, id = props.id, dataTestId = props.dataTestId, type = props.type, className = props.className, name = props.name, placeholder = props.placeholder, isDisabled = props.isDisabled, 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, type = props.type, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
     var fillClass = useDeviceTargetClass(props, {
         prefix: 'fill_',
         propsKey: 'fill',
@@ -79,9 +80,12 @@ var Input = React__default.forwardRef(function Input(props, ref) {
         prefix: 'width_',
         propsKey: 'width',
     });
-    var appearanceConfig = useMemo(function () { return appearance && inputConfig.appearance && inputConfig.appearance[appearance]; }, [appearance, inputConfig]);
-    var stateConfig = useMemo(function () { return state && inputConfig.state && inputConfig.state[state]; }, [state, inputConfig]);
-    return (jsxRuntimeExports.jsx("input", { className: clsx(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, !isDisabled ? fillClass : fillDisabledClass, shapeClass ||
+    // prettier-ignore
+    var appearanceConfig = (appearance && inputConfig.appearance && inputConfig.appearance[appearance]);
+    var stateConfig = state && inputConfig.state && inputConfig.state[state];
+    return (jsxRuntimeExports.jsx("input", { "data-test-id": dataTestId || (name ? "".concat(name, "Input") : 'input'), disabled: isDisabled, id: String(id), 
+        // @ts-ignore
+        index: index, placeholder: placeholder, ref: ref, type: type, value: value, className: clsx(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, !isDisabled ? fillClass : fillDisabledClass, shapeClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape) &&
                 "input_shape_".concat(appearanceConfig.shape).replace(/([A-Z])/g, '-$1').toLowerCase()), textSizeClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textSize) &&
@@ -121,9 +125,7 @@ var Input = React__default.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())), "data-test-id": dataTestId || (name ? "".concat(name, "Input") : 'input'), disabled: isDisabled, id: String(id), 
-        // @ts-ignore
-        index: index, placeholder: placeholder, ref: ref, type: type, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }));
+                    "text-color_".concat(stateConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase())), onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }));
 });
 Input.defaultProps = {
     size: 'm',

package/dist/{InputPassword-CTbtTP_o.js → InputPassword-BOdsE_Yd.js}

@@ -2,7 +2,7 @@ import { j as jsxRuntimeExports } from './jsx-runtime-C2uP7l8s.js';
 import { useState, useMemo, useCallback } from 'react';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
-import { I as Icon } from './Icon-Duj1nynQ.js';
+import { I as Icon } from './Icon-DWnG-4KG.js';
 
 var inputPasswordConfig = {
     state: undefined,

package/dist/{Label-D9cQMuy3.js → Label-VHbRKztj.js}

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
 import { T as Text } from './Text-CxrzHFN1.js';
-import { T as Tooltip } from './Tooltip-CcwyN7PD.js';
+import { T as Tooltip } from './Tooltip-CpEQOh9v.js';
 
 var labelConfig = {
     appearance: undefined,

package/dist/{LanguageSelector-TZEgbNsG.js → LanguageSelector-CzIV_gnd.js}

@@ -1,6 +1,6 @@
 import { j as jsxRuntimeExports } from './jsx-runtime-C2uP7l8s.js';
 import clsx from 'clsx';
-import { I as Icon } from './Icon-Duj1nynQ.js';
+import { I as Icon } from './Icon-DWnG-4KG.js';
 
 function LanguageSelectorItem(props) {
     var label = props.label, iconSize = props.iconSize, SvgImage = props.SvgImage, isActive = props.isActive, onClick = props.onClick;

package/dist/{Link-CbCqej5B.js → Link-Co6uspFK.js}

@@ -29,6 +29,14 @@ function Link(props) {
         prefix: 'fill_',
         propsKey: 'fill',
     });
+    var svgFillClass = useDeviceTargetClass(props, {
+        prefix: 'svg_fill_',
+        propsKey: 'svgFill',
+    });
+    var svgFillHoverClass = useDeviceTargetClass(props, {
+        prefix: 'svg_fill_hover_',
+        propsKey: 'svgFillHover',
+    });
     var weightClass = useDeviceTargetClass(props, {
         prefix: 'text-weight_',
         propsKey: 'textWeight',
@@ -47,7 +55,7 @@ function Link(props) {
     });
     // @ts-expect-error
     var styles = useStyles(props).styles;
-    return (jsxRuntimeExports.jsxs(LinkWrapper, { className: clsx(className, 'link', directionClass, sizeClass, underline && "link_underline_".concat(underline), (textColorClass ||
+    return (jsxRuntimeExports.jsxs(LinkWrapper, { className: clsx(className, 'link', directionClass, sizeClass, svgFillClass, svgFillHoverClass, underline && "link_underline_".concat(underline), (textColorClass ||
             textColorHoverClass ||
             textGradientClass ||
             textStyleClass ||

package/dist/{ListItem-Dgx1_Igi.js → ListItem-DMS6_Rtr.js}

@@ -2,7 +2,7 @@ import { j as jsxRuntimeExports } from './jsx-runtime-C2uP7l8s.js';
 import clsx from 'clsx';
 import { useStyles } from './hooks/useStyles.js';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
-import { L as Link } from './Link-CbCqej5B.js';
+import { L as Link } from './Link-Co6uspFK.js';
 
 function List(props) {
     var children = props.children, className = props.className, style = props.style, type = props.type;

package/dist/{Logo-DsOEX4uk.js → Logo-D4NFjeqd.js}

@@ -1,11 +1,11 @@
 import { j as jsxRuntimeExports } from './jsx-runtime-C2uP7l8s.js';
 import clsx from 'clsx';
-import { a as LinkWrapper } from './Link-CbCqej5B.js';
+import { a as LinkWrapper } from './Link-Co6uspFK.js';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
 
 function Logo(props) {
-    var className = props.className, href = props.href, link = props.link, mode = props.mode, size = props.size, source = props.source, src = props.src;
+    var alt = props.alt, className = props.className, href = props.href, link = props.link, mode = props.mode, size = props.size, source = props.source, src = props.src;
     var alignItemsClass = useDeviceTargetClass(props, {
         prefix: 'logo_align-items_',
         propsKey: 'alignItems',
@@ -24,7 +24,7 @@ function Logo(props) {
     });
     // @ts-expect-error
     var logo = useStyles(props).styles;
-    return (jsxRuntimeExports.jsx("div", { className: clsx(className, 'logo', alignDirectionClass, alignClass, widthClass, alignItemsClass, size && "logo_size_".concat(size), mode && "logo_mode_".concat(mode)), style: logo, children: link || href ? (jsxRuntimeExports.jsxs(LinkWrapper, { href: link || href, children: [' ', jsxRuntimeExports.jsx("img", { className: "logo__image", src: src || source })] })) : (jsxRuntimeExports.jsx("img", { className: "logo__image", src: src || source })) }));
+    return (jsxRuntimeExports.jsx("div", { className: clsx(className, 'logo', alignClass, alignDirectionClass, alignItemsClass, alt, mode && "logo_mode_".concat(mode), size && "logo_size_".concat(size), widthClass), style: logo, children: link || href ? (jsxRuntimeExports.jsxs(LinkWrapper, { href: link || href, children: [' ', jsxRuntimeExports.jsx("img", { className: "logo__image", src: src || source })] })) : (jsxRuntimeExports.jsx("img", { className: "logo__image", src: src || source })) }));
 }
 
 export { Logo as L };

package/dist/{Menu-Kpe1GMns.js → Menu-Cd-XlUmJ.js}

@@ -2,7 +2,7 @@ import { j as jsxRuntimeExports } from './jsx-runtime-C2uP7l8s.js';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
-import { M as MenuItem } from './MenuItem-C5BPgTO7.js';
+import { M as MenuItem } from './MenuItem-COZ-C9K2.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/{MenuItem-C5BPgTO7.js → MenuItem-COZ-C9K2.js}

@@ -3,7 +3,7 @@ import React__default, { useMemo } from 'react';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
-import { L as Link } from './Link-CbCqej5B.js';
+import { L as Link } from './Link-Co6uspFK.js';
 import { T as Text } from './Text-CxrzHFN1.js';
 
 var menuItemConfig = {

package/dist/{ModalLoader-8l8YtIvz.js → ModalLoader-D17lZhS7.js}

@@ -63,6 +63,8 @@ var Modal = React__default.forwardRef(function Modal(props, ref) {
     // Show modal with children content
     var openModal = useCallback(function () {
         setIsOpen(true);
+        console.warn('========   openModal   ========');
+        console.log('onOpenModal ', onOpenModal);
         // Callback
         if (typeof onOpenModal === 'function') {
             onOpenModal();
@@ -110,7 +112,12 @@ var Modal = React__default.forwardRef(function Modal(props, ref) {
         }
     }, []);
     // Save ref things
-    useImperativeHandle(ref, function () { return ({ isOpen: isOpen, openModal: openModal, closeModal: closeModal, modalElement: modalElement }); });
+    useImperativeHandle(ref, function () { return ({ isOpen: isOpen, closeModal: closeModal, modalElement: modalElement, openModal: openModal }); }, [
+        isOpen,
+        openModal,
+        closeModal,
+        modalElement,
+    ]);
     var fillClass = useDeviceTargetClass(props, {
         prefix: 'fill_',
         propsKey: 'fill',

package/dist/{NotificationList-CJ-hNA9W.js → NotificationList-C2OCJkY5.js}

@@ -4,7 +4,7 @@ import { useNotifications, useNotificationsAPI } from './context/Notifications.j
 import { useMemo } from 'react';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { T as Text } from './Text-CxrzHFN1.js';
-import { T as Title } from './Title-BUN57fWw.js';
+import { T as Title } from './Title-BhJcCgdK.js';
 
 var notificationItemConfig = {
     appearance: {},
@@ -36,8 +36,8 @@ NotificationItem.defaultProps = {
 function NotificationList(props) {
     var notifications = useNotifications();
     var hideNotifications = useNotificationsAPI().hideNotifications;
-    var className = props.className, size = props.size, type = props.type, set = props.set, closeButton = props.closeButton;
-    return (jsxRuntimeExports.jsx("div", { className: clsx('notification', className), children: jsxRuntimeExports.jsx("div", { className: "notification__wrapper", children: notifications.map(function (notification, i) { return (jsxRuntimeExports.jsx(NotificationItem, { id: notification.id, type: notification.type || type, set: notification.set || set, size: notification.size || size, title: notification.title, text: notification.text, status: notification.status, closeButton: closeButton, onClickClose: hideNotifications }, i)); }) }) }));
+    var className = props.className, closeButton = props.closeButton, set = props.set, size = props.size, type = props.type;
+    return (jsxRuntimeExports.jsx("div", { className: clsx('notification', className), children: jsxRuntimeExports.jsx("div", { className: "notification__wrapper", children: notifications.map(function (notification, i) { return (jsxRuntimeExports.jsx(NotificationItem, { closeButton: closeButton, id: notification.id, size: notification.size || size, status: notification.status, text: notification.text, title: notification.title, type: notification.type || type, set: notification.set || set, onClickClose: hideNotifications }, i)); }) }) }));
 }
 
 export { NotificationItem as N, NotificationList as a, notificationItemConfig as n };

package/dist/{Pagination-LXBlrbZT.js → Pagination-QfVqvSbE.js}

@@ -4,8 +4,8 @@ import clsx from 'clsx';
 import ceil from 'lodash/ceil';
 import ReactPaginate from 'react-paginate';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
-import { D as Dropdown, a as DropdownItem } from './DropdownItem-BaQXZu0w.js';
-import { I as Icon } from './Icon-Duj1nynQ.js';
+import { D as Dropdown, a as DropdownItem } from './DropdownItem-Cf5vBgDu.js';
+import { I as Icon } from './Icon-DWnG-4KG.js';
 import { T as Text } from './Text-CxrzHFN1.js';
 
 function Pagination(props) {

package/dist/{Response-Nzg8ooT8.js → Response-m-8zeYeD.js}

@@ -4,10 +4,10 @@ import clsx from 'clsx';
 import SVG from 'react-inlinesvg';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
-import { B as Button } from './Button-BXClqM-t.js';
+import { B as Button } from './Button-ULZVVxWC.js';
 import { G as Group } from './Group-C2kJKhWJ.js';
 import { T as Text } from './Text-CxrzHFN1.js';
-import { T as Title } from './Title-BUN57fWw.js';
+import { T as Title } from './Title-BhJcCgdK.js';
 
 var responseConfig = {
     appearance: undefined,
@@ -16,7 +16,7 @@ var responseConfig = {
     },
 };
 function Response(props) {
-    var after = props.after, before = props.before, appearance = props.appearance, imageSrc = props.imageSrc, className = props.className, title = props.title, titleTextSize = props.titleTextSize, titleTextWeight = props.titleTextWeight, titleTextColor = props.titleTextColor, message = props.message, messageTextColor = props.messageTextColor, messageTextSize = props.messageTextSize, primaryButton = props.primaryButton, primaryButtonAfter = props.primaryButtonAfter, primaryButtonAppearance = props.primaryButtonAppearance, primaryButtonBefore = props.primaryButtonBefore, primaryButtonFill = props.primaryButtonFill, primaryButtonFillHover = props.primaryButtonFillHover, primaryButtonLabel = props.primaryButtonLabel, primaryButtonLabelTextColor = props.primaryButtonLabelTextColor, primaryButtonLabelTextSize = props.primaryButtonLabelTextSize, primaryButtonShape = props.primaryButtonShape, primaryButtonSize = props.primaryButtonSize, primaryButtonWidth = props.primaryButtonWidth, secondaryButton = props.secondaryButton, secondaryButtonAfter = props.secondaryButtonAfter, secondaryButtonAppearance = props.secondaryButtonAppearance, secondaryButtonBefore = props.secondaryButtonBefore, secondaryButtonFill = props.secondaryButtonFill, secondaryButtonFillHover = props.secondaryButtonFillHover, secondaryButtonLabel = props.secondaryButtonLabel, secondaryButtonLabelTextColor = props.secondaryButtonLabelTextColor, secondaryButtonLabelTextSize = props.secondaryButtonLabelTextSize, secondaryButtonShape = props.secondaryButtonShape, secondaryButtonSize = props.secondaryButtonSize, secondaryButtonWidth = props.secondaryButtonWidth, set = props.set, onClickPrimaryButton = props.onClickPrimaryButton, onClickSecondaryButton = props.onClickSecondaryButton;
+    var after = props.after, before = props.before, appearance = props.appearance, imageSrc = props.imageSrc, className = props.className, title = props.title, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextWeight = props.titleTextWeight, message = props.message, messageTextColor = props.messageTextColor, messageTextSize = props.messageTextSize, messageTextWeight = props.messageTextWeight, primaryButton = props.primaryButton, primaryButtonAfter = props.primaryButtonAfter, primaryButtonAppearance = props.primaryButtonAppearance, primaryButtonBefore = props.primaryButtonBefore, primaryButtonFill = props.primaryButtonFill, primaryButtonFillHover = props.primaryButtonFillHover, primaryButtonLabel = props.primaryButtonLabel, primaryButtonLabelTextColor = props.primaryButtonLabelTextColor, primaryButtonLabelTextSize = props.primaryButtonLabelTextSize, primaryButtonShape = props.primaryButtonShape, primaryButtonSize = props.primaryButtonSize, primaryButtonWidth = props.primaryButtonWidth, secondaryButton = props.secondaryButton, secondaryButtonAfter = props.secondaryButtonAfter, secondaryButtonAppearance = props.secondaryButtonAppearance, secondaryButtonBefore = props.secondaryButtonBefore, secondaryButtonFill = props.secondaryButtonFill, secondaryButtonFillHover = props.secondaryButtonFillHover, secondaryButtonLabel = props.secondaryButtonLabel, secondaryButtonLabelTextColor = props.secondaryButtonLabelTextColor, secondaryButtonLabelTextSize = props.secondaryButtonLabelTextSize, secondaryButtonShape = props.secondaryButtonShape, secondaryButtonSize = props.secondaryButtonSize, secondaryButtonWidth = props.secondaryButtonWidth, set = props.set, onClickPrimaryButton = props.onClickPrimaryButton, onClickSecondaryButton = props.onClickSecondaryButton;
     var ImageComponent = useMemo(function () {
         if (imageSrc) {
             // eslint-disable-next-line react/prop-types
@@ -64,7 +64,7 @@ function Response(props) {
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
                 "fill_hover_".concat(appearanceConfig.fillHover).replace(/([A-Z])/g, '-$1').toLowerCase()), shapeClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape) &&
-                "fill_hover_".concat(appearanceConfig.shape).replace(/([A-Z])/g, '-$1').toLowerCase()), borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, set && "response_set_".concat(set)), style: responseStyles, children: [before, ImageComponent || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.imageSrc), jsxRuntimeExports.jsxs(Group, { className: "response__desc", width: "fill", children: [title && (jsxRuntimeExports.jsx(Title, { className: "response__title", size: titleTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextSize) || 'h2', textColor: titleTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextColor), textWeight: titleTextWeight || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextWeight) || '600', children: title })), message && (jsxRuntimeExports.jsx(Text, { className: "response__message", size: messageTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.messageTextSize) || 'xxl', textColor: messageTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.messageTextColor), children: message }))] }), (primaryButtonLabel ||
+                "fill_hover_".concat(appearanceConfig.shape).replace(/([A-Z])/g, '-$1').toLowerCase()), borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, set && "response_set_".concat(set)), style: responseStyles, children: [before, ImageComponent || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.imageSrc), jsxRuntimeExports.jsxs(Group, { className: "response__desc", width: "fill", children: [title && (jsxRuntimeExports.jsx(Title, { className: "response__title", size: titleTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextSize) || 'h2', textColor: titleTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextColor), textWeight: titleTextWeight || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextWeight) || '600', children: title })), message && (jsxRuntimeExports.jsx(Text, { className: "response__message", size: messageTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.messageTextSize) || 'xxl', textColor: messageTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.messageTextColor), textWeight: messageTextWeight, children: message }))] }), (primaryButtonLabel ||
                 primaryButton ||
                 secondaryButtonLabel ||
                 secondaryButton ||

package/dist/{SearchResult-B6Jd1xZO.js → SearchResult-DbhHiNmy.js}

@@ -3,7 +3,7 @@ import React__default, { useCallback, useMemo } from 'react';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
-import { I as Icon } from './Icon-Duj1nynQ.js';
+import { I as Icon } from './Icon-DWnG-4KG.js';
 import { T as Text } from './Text-CxrzHFN1.js';
 import { S as Scrollbar } from './Scrollbar-DrRNpn12.js';
 

package/dist/{SiteMenuButton-CcCAsJtr.js → SiteMenuButton-BwyPO-2_.js}

@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 import clsx from 'clsx';
 import { useSiteMenuContext } from './context/UIContext.js';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
-import { I as Icon } from './Icon-Duj1nynQ.js';
+import { I as Icon } from './Icon-DWnG-4KG.js';
 import { T as Text } from './Text-CxrzHFN1.js';
 
 function SiteMenu(props) {

package/dist/{Swiper-JdwU0uca.js → Swiper-CL9zCKXE.js}

@@ -3,7 +3,7 @@ import React__default, { forwardRef, useState, useRef, useEffect, useLayoutEffec
 import clsx from 'clsx';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
-import { T as Title } from './Title-BUN57fWw.js';
+import { T as Title } from './Title-BhJcCgdK.js';
 
 /**
  * SSR Window 4.0.2
@@ -610,7 +610,7 @@ function Observer(_ref) {
     });
     observer.observe(target, {
       attributes: typeof options.attributes === 'undefined' ? true : options.attributes,
-      childList: typeof options.childList === 'undefined' ? true : options.childList,
+      childList: swiper.isElement || (typeof options.childList === 'undefined' ? true : options).childList,
       characterData: typeof options.characterData === 'undefined' ? true : options.characterData
     });
     observers.push(observer);
@@ -4664,7 +4664,7 @@ const updateOnVirtualData = swiper => {
 };
 
 /**
- * Swiper React 11.1.4
+ * Swiper React 11.1.5
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
@@ -4672,7 +4672,7 @@ const updateOnVirtualData = swiper => {
  *
  * Released under the MIT License
  *
- * Released on: May 30, 2024
+ * Released on: July 15, 2024
  */
 
 

package/dist/{SwitchField-B8JbD2Se.js → SwitchField-nmu255b8.js}

@@ -6,7 +6,7 @@ import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { SelectInput } from './components/Select.js';
 import { D as Divider } from './Divider-Dhj6sMWd.js';
 import { T as Text } from './Text-CxrzHFN1.js';
-import { I as Icon } from './Icon-Duj1nynQ.js';
+import { I as Icon } from './Icon-DWnG-4KG.js';
 import { useStyles } from './hooks/useStyles.js';
 import { S as Switch } from './Switch-0BHqovLA.js';
 

package/dist/{TabGroup-DieipbE3.js → TabGroup-CK6ndAuh.js}

@@ -3,9 +3,9 @@ import React__default, { useMemo } from 'react';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
-import { B as Badge } from './Badge-D-4zpdfU.js';
+import { B as Badge } from './Badge-BBbMdbjo.js';
 import { D as Divider } from './Divider-Dhj6sMWd.js';
-import { L as Link } from './Link-CbCqej5B.js';
+import { L as Link } from './Link-Co6uspFK.js';
 import { T as Text } from './Text-CxrzHFN1.js';
 
 var tabConfig = {

package/dist/{Tile-rSmWn8mR.js → Tile-qiXVUf-t.js}

@@ -2,12 +2,12 @@ import { j as jsxRuntimeExports } from './jsx-runtime-C2uP7l8s.js';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
-import { B as Badge } from './Badge-D-4zpdfU.js';
+import { B as Badge } from './Badge-BBbMdbjo.js';
 import { T as Text } from './Text-CxrzHFN1.js';
-import { T as Title } from './Title-BUN57fWw.js';
+import { T as Title } from './Title-BhJcCgdK.js';
 
 function Tile(props) {
-    var after = props.after, badge = props.badge, badgeSize = props.badgeSize, badgeTextColor = props.badgeTextColor, badgeTextSize = props.badgeTextSize, before = props.before, children = props.children, className = props.className, direction = props.direction, reverse = props.reverse, size = props.size, text = props.text, textColor = props.textColor, textSize = props.textSize, textWrap = props.textWrap, title = props.title, titleTextAlign = props.titleTextAlign, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextWeight = props.titleTextWeight, titleTextWrap = props.titleTextWrap, type = props.type, onClick = props.onClick;
+    var children = props.children, after = props.after, badge = props.badge, badgeSize = props.badgeSize, badgeTextColor = props.badgeTextColor, badgeTextSize = props.badgeTextSize, before = props.before, className = props.className, direction = props.direction, reverse = props.reverse, size = props.size, text = props.text, textColor = props.textColor, textSize = props.textSize, textWrap = props.textWrap, title = props.title, titleTextAlign = props.titleTextAlign, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextWeight = props.titleTextWeight, titleTextWrap = props.titleTextWrap, type = props.type, onClick = props.onClick;
     var fillClass = useDeviceTargetClass(props, {
         prefix: 'fill_',
         propsKey: 'fill',

package/dist/{Title-BUN57fWw.js → Title-BhJcCgdK.js}

@@ -12,8 +12,16 @@ var titleConfig = {
     },
 };
 function Title(props) {
-    var appearance = props.appearance, children = props.children, className = props.className, dataTour = props.dataTour, mode = props.mode, size = props.size, sizeDesktop = props.sizeDesktop, sizeMobile = props.sizeMobile, sizeTablet = props.sizeTablet, _a = props.tag, tag = _a === void 0 ? 'span' : _a, text = props.text, textWrap = props.textWrap, onClick = props.onClick;
+    var appearance = props.appearance, children = props.children, className = props.className, dataTour = props.dataTour, before = props.before, beforeWrapper = props.beforeWrapper, afterWrapper = props.afterWrapper, after = props.after, mode = props.mode, size = props.size, sizeDesktop = props.sizeDesktop, sizeMobile = props.sizeMobile, sizeTablet = props.sizeTablet, _a = props.tag, tag = _a === void 0 ? 'span' : _a, text = props.text, textWrap = props.textWrap, onClick = props.onClick;
     var _b = useUserDeviceContext(), isMobile = _b.isMobile, isTablet = _b.isTablet, isDesktop = _b.isDesktop;
+    var directionClass = useDeviceTargetClass(props, {
+        prefix: 'title_direction_',
+        propsKey: 'direction',
+    });
+    var directionWrapperClass = useDeviceTargetClass(props, {
+        prefix: 'title-direction_',
+        propsKey: 'wrapperDirection',
+    });
     var textColorClass = useDeviceTargetClass(props, {
         prefix: 'text-color_',
         propsKey: 'textColor',
@@ -26,6 +34,14 @@ function Title(props) {
         prefix: 'text-color_hover_',
         propsKey: 'textColorHover',
     });
+    var svgFillClass = useDeviceTargetClass(props, {
+        prefix: 'svg_fill_',
+        propsKey: 'svgFill',
+    });
+    var svgFillHoverClass = useDeviceTargetClass(props, {
+        prefix: 'svg_fill_hover_',
+        propsKey: 'svgFillHover',
+    });
     var textAlignClass = useDeviceTargetClass(props, {
         prefix: 'text-align_',
         propsKey: 'textAlign',
@@ -55,7 +71,7 @@ function Title(props) {
         propsKey: 'textTruncate',
     });
     // @ts-expect-error
-    var titleStyles = useStyles(props).styles;
+    var _c = useStyles(props), titleStyles = _c.styles, titleWrapperStyles = _c.wrapper;
     var appearanceConfig = useMemo(function () { return appearance && titleConfig.appearance && titleConfig.appearance[appearance]; }, [appearance, titleConfig]);
     // Element type (h1, h2, ..., h6)
     var Tag = useMemo(function () {
@@ -73,9 +89,9 @@ function Title(props) {
         }
         return size ? size : 'span';
     }, [isMobile, isTablet, isDesktop]);
-    return (jsxRuntimeExports.jsx(Tag, { className: clsx(className, 'title', fillColorClass, size && "title_size_".concat(size), mode && "title_mode_".concat(mode), textColorClass ||
+    return (jsxRuntimeExports.jsxs(Tag, { className: clsx(className, 'title', fillColorClass, svgFillClass, svgFillHoverClass, size && "title_size_".concat(size), mode && "title_mode_".concat(mode), directionClass, textColorClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor) &&
-                "text-color_".concat(appearanceConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase()), textColorActiveClass, textColorHoverClass, typeClass, textGradientClass, textStyleClass, weightClass, textWrap && "word-wrap_".concat(textWrap)), "data-tour": dataTour, onClick: onClick, style: titleStyles, children: jsxRuntimeExports.jsx("span", { className: clsx(textAlignClass, 'title__wrapper', textTruncateClass), children: children || text }) }));
+                "text-color_".concat(appearanceConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase()), textColorActiveClass, textColorHoverClass, typeClass, textGradientClass, textStyleClass, weightClass, textWrap && "word-wrap_".concat(textWrap)), "data-tour": dataTour, onClick: onClick, style: titleStyles, children: [before, jsxRuntimeExports.jsxs("span", { className: clsx(textAlignClass, directionWrapperClass, 'title__wrapper', textTruncateClass), style: titleWrapperStyles, children: [beforeWrapper, children || text, afterWrapper] }), after] }));
 }
 Title.defaultProps = {
     size: 'h3',

package/dist/{Tooltip-CcwyN7PD.js → Tooltip-CpEQOh9v.js}

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
 import { T as Text } from './Text-CxrzHFN1.js';
-import { T as Title } from './Title-BUN57fWw.js';
+import { T as Title } from './Title-BhJcCgdK.js';
 
 var tooltipConfig = {
     appearance: undefined,

package/dist/cjs/{Accordion-BPSF6By2.js → Accordion-rCFDAon3.js}

@@ -7,7 +7,7 @@ var clsx = require('clsx');
 var castArray = require('lodash/castArray');
 var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
 var useStyles = require('./hooks/useStyles.js');
-var Icon = require('./Icon-DzJtiBBk.js');
+var Icon = require('./Icon-2rv_L0yY.js');
 var Text = require('./Text-C8vlKWNN.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -46,12 +46,17 @@ const icon16 = {
 };
 
 function AccordionItem(props) {
-    var children = props.children, id = props.id, title = props.title, icon = props.icon, _a = props.iconFill, iconFill = _a === void 0 ? 'surfaceItemAccent' : _a, content = props.content, beforeContent = props.beforeContent, afterContent = props.afterContent, className = props.className, titleTextSize = props.titleTextSize, titleTextColor = props.titleTextColor, titleTextWeight = props.titleTextWeight, contentTextSize = props.contentTextSize, contentTextColor = props.contentTextColor, contentTextWeight = props.contentTextWeight, size = props.size, isExpanded = props.isExpanded, onClick = props.onClick;
+    var id = props.id, children = props.children, isExpanded = props.isExpanded, afterContent = props.afterContent, beforeContent = props.beforeContent, className = props.className, content = props.content, contentTextColor = props.contentTextColor, contentTextSize = props.contentTextSize, contentTextWeight = props.contentTextWeight, icon = props.icon, _a = props.iconFill, iconFill = _a === void 0 ? 'surfaceItemAccent' : _a, size = props.size, title = props.title, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextWeight = props.titleTextWeight, onClick = props.onClick;
     var onClickTitle = React.useCallback(function () {
-        // !isExpanded - is next state of expanded
-        var thisItemData = { id: id, title: title, content: content, isExpanded: !isExpanded };
+        // "!isExpanded" - is next state of expanded
+        var thisItemData = {
+            id: id,
+            isExpanded: !isExpanded,
+            content: content,
+            title: title,
+        };
         onClick && onClick(thisItemData);
-    }, [onClick, id, title, content, isExpanded]);
+    }, [id, title, content, isExpanded, onClick]);
     var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
         prefix: 'border-color_',
         propsKey: 'borderColor',
@@ -90,7 +95,7 @@ function AccordionItem(props) {
     });
     // @ts-expect-error
     var styles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsxRuntimeExports.jsxs("div", { className: clsx__default.default('accordion-item', className, borderColorClass, fillClass, fillHoverClass, shapeClass, size && "accordion-item_size_".concat(size), isExpanded && 'accordion-item_state_open'), style: styles, children: [jsxRuntime.jsxRuntimeExports.jsx(Text.Text, { className: clsx__default.default('accordion-item__title', titleBorderColorClass, titleFillClass, titleFillHoverClass, 'cursor_type_pointer'), size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, onClick: onClickTitle, children: title }), jsxRuntime.jsxRuntimeExports.jsx("div", { className: clsx__default.default('accordion-item__icon', 'cursor_type_pointer'), onClick: onClickTitle, children: icon || (jsxRuntime.jsxRuntimeExports.jsx(Icon.Icon, { iconFill: iconFill, size: "16", SvgImage: icon16.ChevronDown })) }), beforeContent && beforeContent, isExpanded && (jsxRuntime.jsxRuntimeExports.jsx("div", { className: clsx__default.default('accordion-item__content', contentBorderColorClass, contentFillClass, fillHoverClass), children: children ||
+    return (jsxRuntime.jsxRuntimeExports.jsxs("div", { style: styles, className: clsx__default.default('accordion-item', className, borderColorClass, fillClass, fillHoverClass, shapeClass, size && "accordion-item_size_".concat(size), isExpanded && 'accordion-item_state_open'), children: [jsxRuntime.jsxRuntimeExports.jsx(Text.Text, { size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, className: clsx__default.default('accordion-item__title', titleBorderColorClass, titleFillClass, titleFillHoverClass, 'cursor_type_pointer'), onClick: onClickTitle, children: title }), jsxRuntime.jsxRuntimeExports.jsx("div", { className: clsx__default.default('accordion-item__icon', 'cursor_type_pointer'), onClick: onClickTitle, children: icon || jsxRuntime.jsxRuntimeExports.jsx(Icon.Icon, { SvgImage: icon16.ChevronDown, iconFill: iconFill, size: "16" }) }), beforeContent && beforeContent, isExpanded && (jsxRuntime.jsxRuntimeExports.jsx("div", { className: clsx__default.default('accordion-item__content', contentBorderColorClass, contentFillClass, fillHoverClass), children: children ||
                     (content && (jsxRuntime.jsxRuntimeExports.jsx(Text.Text, { size: contentTextSize, textColor: contentTextColor, textWeight: contentTextWeight, children: content }))) })), afterContent && afterContent] }));
 }
 AccordionItem.defaultProps = {
@@ -98,7 +103,7 @@ AccordionItem.defaultProps = {
 };
 
 function Accordion(props) {
-    var children = props.children, items = props.items, className = props.className, _a = props.initial, initial = _a === void 0 ? [] : _a, isMultiple = props.isMultiple, onClickItem = props.onClickItem;
+    var children = props.children, isMultiple = props.isMultiple, className = props.className, _a = props.initial, initial = _a === void 0 ? [] : _a, items = props.items, onClickItem = props.onClickItem;
     var _b = React.useState(castArray__default.default(initial)), expandedItems = _b[0], setExpandedItems = _b[1];
     var onClickAccordionItem = React.useCallback(function (targetItem) {
         setExpandedItems(function (prevState) {
@@ -123,12 +128,13 @@ function Accordion(props) {
             }
         });
         onClickItem && onClickItem(targetItem);
-    }, [onClickItem]);
+    }, [isMultiple, onClickItem]);
     var accordionItemsList = React.useMemo(function () {
         if (items) {
-            return items.map(function (item, i) { return (jsxRuntime.jsxRuntimeExports.jsx(AccordionItem, { content: item.content, id: item.id, isExpanded: expandedItems.includes(item.id), title: item.title, onClick: onClickAccordionItem }, "accordionItem_".concat(item.id || i + 1))); });
+            return items.map(function (item, i) { return (jsxRuntime.jsxRuntimeExports.jsx(AccordionItem, { content: item.content, id: item.id, title: item.title, isExpanded: expandedItems.includes(item.id), onClick: onClickAccordionItem }, "accordionItem_".concat(item.id || i + 1))); });
         }
         if (children) {
+            // @ts-ignore
             return React__default.default.Children.toArray(children).map(function (child) {
                 if (React__default.default.isValidElement(child)) {
                     var childID = child.props.id || child.key;
@@ -170,7 +176,7 @@ function Accordion(props) {
      */
     // @ts-expect-error
     var _c = useStyles.useStyles(props), accordionStyles = _c.styles, accordionWrapperStyles = _c.wrapper;
-    return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: clsx__default.default(className, 'accordion', borderColorClass, directionClass, fillClass, shapeClass, widthClass), style: accordionStyles, children: jsxRuntime.jsxRuntimeExports.jsx("div", { className: "accordion__wrapper", style: accordionWrapperStyles, children: accordionItemsList }) }));
+    return (jsxRuntime.jsxRuntimeExports.jsx("div", { style: accordionStyles, className: clsx__default.default(className, 'accordion', borderColorClass, directionClass, fillClass, shapeClass, widthClass), children: jsxRuntime.jsxRuntimeExports.jsx("div", { className: "accordion__wrapper", style: accordionWrapperStyles, children: accordionItemsList }) }));
 }
 Accordion.defaultProps = {
     initial: [],

package/dist/cjs/{Avatar-qFiPDVgu.js → Avatar-Bj5BiStx.js}

@@ -4,7 +4,7 @@ var jsxRuntime = require('./jsx-runtime-BBxmckJR.js');
 var React = require('react');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
-var Icon = require('./Icon-DzJtiBBk.js');
+var Icon = require('./Icon-2rv_L0yY.js');
 var Image = require('./Image-CCx6QWZj.js');
 var Text = require('./Text-C8vlKWNN.js');
 

package/dist/cjs/{Badge-zYZKun4n.js → Badge-D7W3B9G5.js}

@@ -18,7 +18,7 @@ var badgeConfig = {
     },
 };
 function Badge(props) {
-    var _a;
+    var _a, _b;
     var appearance = props.appearance, children = props.children, className = props.className, mode = props.mode; props.shape; props.size; var textColor = props.textColor, textSize = props.textSize, value = props.value;
     var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
         prefix: 'border-color_',
@@ -40,6 +40,10 @@ function Badge(props) {
         prefix: 'fill_',
         propsKey: 'fill',
     });
+    var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
     var positionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
         prefix: 'position_',
         propsKey: 'position',
@@ -57,7 +61,9 @@ function Badge(props) {
     var appearanceConfig = React.useMemo(function () { return appearance && badgeConfig.appearance && badgeConfig.appearance[appearance]; }, [appearance, badgeConfig]);
     return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: clsx__default.default(className, 'badge', !value && 'badge_type_status', mode && "badge_mode_".concat(mode), borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, fillClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
-                ((_a = "fill_".concat(appearanceConfig.fill)) === null || _a === void 0 ? void 0 : _a.replace(/([A-Z])/g, '-$1').toLowerCase())), positionClass, sizeClass, shapeClass), style: badgeStyles, children: children ||
+                ((_a = "fill_".concat(appearanceConfig.fill)) === null || _a === void 0 ? void 0 : _a.replace(/([A-Z])/g, '-$1').toLowerCase())), fillHoverClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
+                ((_b = "fill_hover_".concat(appearanceConfig.fillHover)) === null || _b === void 0 ? void 0 : _b.replace(/([A-Z])/g, '-$1').toLowerCase())), positionClass, sizeClass, shapeClass), style: badgeStyles, children: children ||
             (value && (jsxRuntime.jsxRuntimeExports.jsx(Text.Text, { size: textSize, textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), children: value }))) }));
 }
 Badge.defaultProps = {

package/dist/cjs/{Breadcrumbs-BIhuwcTG.js → Breadcrumbs-xj-c6cUH.js}

@@ -7,8 +7,8 @@ var clsx = require('clsx');
 var camelCase = require('lodash/camelCase');
 var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
 var useStyles = require('./hooks/useStyles.js');
-var Icon = require('./Icon-DzJtiBBk.js');
-var Link = require('./Link-3qPujNn9.js');
+var Icon = require('./Icon-2rv_L0yY.js');
+var Link = require('./Link-B6Xq7PWn.js');
 var Text = require('./Text-C8vlKWNN.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

package/dist/cjs/{Button-C4_FRFZe.js → Button-DfUQ11Hs.js}

@@ -5,8 +5,8 @@ var React = require('react');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
 var useStyles = require('./hooks/useStyles.js');
-var Icon = require('./Icon-DzJtiBBk.js');
-var Link = require('./Link-3qPujNn9.js');
+var Icon = require('./Icon-2rv_L0yY.js');
+var Link = require('./Link-B6Xq7PWn.js');
 var Loader = require('./Loader-2vQxF_aO.js');
 var Text = require('./Text-C8vlKWNN.js');