@itcase/ui 1.1.16 → 1.1.18

package/dist/{MenuItem-COZ-C9K2.js → MenuItem-CXxL099U.js}

@@ -1,10 +1,10 @@
 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';
 import { useStyles } from './hooks/useStyles.js';
 import { L as Link } from './Link-Co6uspFK.js';
-import { T as Text } from './Text-CxrzHFN1.js';
+import { T as Text } from './Text-Dn0X1zxN.js';
 
 var menuItemConfig = {
     appearance: undefined,
@@ -68,7 +68,7 @@ function MenuItem(props) {
     });
     // @ts-expect-error
     var menuItem = useStyles(props).styles;
-    var appearanceConfig = useMemo(function () { return appearance && menuItemConfig.appearance && menuItemConfig.appearance[appearance]; }, [appearance, menuItemConfig]);
+    var appearanceConfig = appearance && menuItemConfig.appearance && menuItemConfig.appearance[appearance];
     return (jsxRuntimeExports.jsx("div", { className: clsx('menu-item', isActive && 'menu-item_state_active', isHover && 'menu-item_state_hover', directionClass, className, sizeClass, fillClass ||
             (appearance && "fill_".concat(appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, shapeClass, typeClass, widthClass, set && "menu-item_set_".concat(set), justifyContentClass), style: menuItem, onClick: onClick, onMouseEnter: onMouseEnter, children: jsxRuntimeExports.jsx(Link, { className: clsx('menu-item__label', alignDirectionClass, alignClass), fill: linkFill, href: link || href, rel: rel, target: target, underline: underline, children: jsxRuntimeExports.jsxs(React__default.Fragment, { children: [before, children || (jsxRuntimeExports.jsxs(React__default.Fragment, { children: [label && (jsxRuntimeExports.jsx(Text, { className: "menu-item__label", size: textSize, textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), textColorActive: isActive && (textColorActive || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColorActive)), textColorHover: textColorHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColorHover), textColorGradient: textGradient, textStyle: textStyle, textWeight: textWeight, textWrap: textWrap, children: label })), desc && (jsxRuntimeExports.jsx(Text, { className: "menu-item__desc", size: descTextSize, textColor: descTextColor, textColorHover: descTextColorHover, textColorGradient: descTextGradient, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, children: desc }))] })), after] }) }) }));
 }

package/dist/{ModalLoader-D17lZhS7.js → ModalLoader-DHOpJqE3.js}

@@ -5,7 +5,7 @@ import ReactDOM__default from 'react-dom';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
 import { O as Overlay } from './Overlay-C4gCb0sL.js';
-import { L as Loader } from './Loader-YZrWGaNy.js';
+import { L as Loader } from './Loader-DhgIcSY1.js';
 
 var getOrCreateModalElement = function (modalQuerySelector, className) {
     var _a;
@@ -63,8 +63,6 @@ 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();

package/dist/{NotificationList-C2OCJkY5.js → NotificationList-B48jz206.js}

@@ -1,10 +1,9 @@
 import { j as jsxRuntimeExports } from './jsx-runtime-C2uP7l8s.js';
 import clsx from 'clsx';
 import { useNotifications, useNotificationsAPI } from './context/Notifications.js';
-import { useMemo } from 'react';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
-import { T as Text } from './Text-CxrzHFN1.js';
-import { T as Title } from './Title-BhJcCgdK.js';
+import { T as Text } from './Text-Dn0X1zxN.js';
+import { T as Title } from './Title-BAdU2oW_.js';
 
 var notificationItemConfig = {
     appearance: {},
@@ -18,11 +17,9 @@ function NotificationItem(props) {
         prefix: 'fill_',
         propsKey: 'fill',
     });
-    var appearanceConfig = useMemo(function () {
-        return appearance &&
-            notificationItemConfig.appearance &&
-            notificationItemConfig.appearance[appearance];
-    }, [appearance, notificationItemConfig]);
+    var appearanceConfig = appearance &&
+        notificationItemConfig.appearance &&
+        notificationItemConfig.appearance[appearance];
     return (jsxRuntimeExports.jsxs("div", { className: clsx('notification__item', status && "notification__item_status_".concat(status), set && "notification__item_set_".concat(set), size && "notification__item_set_".concat(size), closeButton && 'notification__item_type_close-button', fillClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
                 "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase())), "data-tour": dataTour, children: [before, jsxRuntimeExports.jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsxRuntimeExports.jsx(Title, { className: "notification__item-title", size: titleTextSize, textColor: titleTextColor ||

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

@@ -4,9 +4,9 @@ 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-Cf5vBgDu.js';
-import { I as Icon } from './Icon-DWnG-4KG.js';
-import { T as Text } from './Text-CxrzHFN1.js';
+import { D as Dropdown, a as DropdownItem } from './DropdownItem-DB5nPIdl.js';
+import { I as Icon } from './Icon-C0gtkmdU.js';
+import { T as Text } from './Text-Dn0X1zxN.js';
 
 function Pagination(props) {
     var allItemsCount = props.allItemsCount, className = props.className, marginPagesDisplayed = props.marginPagesDisplayed, nextLabel = props.nextLabel, _a = props.pageCountArray, pageCountArray = _a === void 0 ? [10, 20, 50, 100] : _a, pageCountDesc = props.pageCountDesc, pageCountDescTextColor = props.pageCountDescTextColor, pageCountDescTextSize = props.pageCountDescTextSize, pageCountDropdownAlignment = props.pageCountDropdownAlignment, pageCountDropdownElevation = props.pageCountDropdownElevation, pageCountDropdownFill = props.pageCountDropdownFill, pageCountDropdownItemDividerDirection = props.pageCountDropdownItemDividerDirection, pageCountDropdownItemDividerFill = props.pageCountDropdownItemDividerFill, pageCountDropdownItemDividerSize = props.pageCountDropdownItemDividerSize, pageCountDropdownItemFill = props.pageCountDropdownItemFill, pageCountDropdownItemFillActive = props.pageCountDropdownItemFillActive, pageCountDropdownItemFillActiveHover = props.pageCountDropdownItemFillActiveHover, pageCountDropdownItemFillHover = props.pageCountDropdownItemFillHover, pageCountDropdownItemLabelColor = props.pageCountDropdownItemLabelColor, pageCountDropdownItemLabelColorActive = props.pageCountDropdownItemLabelColorActive, pageCountDropdownItemLabelSize = props.pageCountDropdownItemLabelSize, pageCountDropdownItemLabelWrap = props.pageCountDropdownItemLabelWrap, pageCountDropdownItemSize = props.pageCountDropdownItemSize, pageCountDropdownItemLabelAlign = props.pageCountDropdownItemLabelAlign, pageCountDropdownItemWidth = props.pageCountDropdownItemWidth, pageCountDropdownItemShowDivider = props.pageCountDropdownItemShowDivider, pageCountDropdownSet = props.pageCountDropdownSet, pageCountDropdownShape = props.pageCountDropdownShape, pageCountInputIcon = props.pageCountInputIcon, pageCountInputIconColor = props.pageCountInputIconColor, pageCountInputIconFillSize = props.pageCountInputIconFillSize, pageCountInputTextColor = props.pageCountInputTextColor, pageCountInputTextSize = props.pageCountInputTextSize, pageNumber = props.pageNumber, pageRangeDisplayed = props.pageRangeDisplayed, _b = props.perPageCount, perPageCount = _b === void 0 ? 0 : _b, previousLabel = props.previousLabel, isPageCount = props.isPageCount, isPageCountDropdownReversed = props.isPageCountDropdownReversed, onPageChange = props.onPageChange, onPerPageCountChange = props.onPerPageCountChange;

package/dist/{Radio-Ca2-2PPF.js → Radio-CmejVeSJ.js}

@@ -1,8 +1,7 @@
 import { j as jsxRuntimeExports } from './jsx-runtime-C2uP7l8s.js';
-import { useMemo } from 'react';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
-import { T as Text } from './Text-CxrzHFN1.js';
+import { T as Text } from './Text-Dn0X1zxN.js';
 
 var radioConfig = {
     state: undefined,
@@ -56,7 +55,7 @@ function Radio(props) {
         prefix: 'border-color_',
         propsKey: checked ? 'stateBorderColorDisabledChecked' : 'stateBorderColorDisabled',
     });
-    var appearanceConfig = useMemo(function () { return appearance && radioConfig.appearance && radioConfig.appearance[appearance]; }, [appearance, radioConfig]);
+    var appearanceConfig = appearance && radioConfig.appearance && radioConfig.appearance[appearance];
     return (jsxRuntimeExports.jsxs(Tag, { className: clsx(className, 'radio', fillClass, shapeClass), htmlFor: id, children: [jsxRuntimeExports.jsxs("div", { className: clsx('radio__item', stateCheckmarkFillClass ||
                     ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.stateCheckmarkFill) &&
                         "radio_checkmark_fill_".concat(appearanceConfig.stateCheckmarkFill)

package/dist/{Response-m-8zeYeD.js → Response-CgE3B1JS.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-ULZVVxWC.js';
-import { G as Group } from './Group-C2kJKhWJ.js';
-import { T as Text } from './Text-CxrzHFN1.js';
-import { T as Title } from './Title-BhJcCgdK.js';
+import { B as Button } from './Button-DxZUKQ8I.js';
+import { G as Group } from './Group-DuHn_z2p.js';
+import { T as Text } from './Text-Dn0X1zxN.js';
+import { T as Title } from './Title-BAdU2oW_.js';
 
 var responseConfig = {
     appearance: undefined,
@@ -57,7 +57,7 @@ function Response(props) {
     });
     // @ts-expect-error
     var responseStyles = useStyles(props).styles;
-    var appearanceConfig = useMemo(function () { return appearance && responseConfig.appearance && responseConfig.appearance[appearance]; }, [appearance, responseConfig]);
+    var appearanceConfig = appearance && responseConfig.appearance && responseConfig.appearance[appearance];
     return (jsxRuntimeExports.jsxs("div", { className: clsx(className, 'response', fillClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
                 "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass ||

package/dist/{SearchResult-DbhHiNmy.js → SearchResult-vA2t-ZGx.js}

@@ -1,10 +1,10 @@
 import { j as jsxRuntimeExports } from './jsx-runtime-C2uP7l8s.js';
-import React__default, { useCallback, useMemo } from 'react';
+import React__default, { useCallback } from 'react';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
-import { I as Icon } from './Icon-DWnG-4KG.js';
-import { T as Text } from './Text-CxrzHFN1.js';
+import { I as Icon } from './Icon-C0gtkmdU.js';
+import { T as Text } from './Text-Dn0X1zxN.js';
 import { S as Scrollbar } from './Scrollbar-DrRNpn12.js';
 
 var searchInputConfig = {
@@ -79,7 +79,7 @@ var SearchInput = React__default.forwardRef(function SearchInput(props, ref) {
     });
     // @ts-expect-error
     var searchInputStyles = useStyles(props).styles;
-    var appearanceConfig = useMemo(function () { return appearance && searchInputConfig.appearance && searchInputConfig.appearance[appearance]; }, [appearance, searchInputConfig]);
+    var appearanceConfig = appearance && searchInputConfig.appearance && searchInputConfig.appearance[appearance];
     return (jsxRuntimeExports.jsxs("label", { className: clsx(className, 'search-input', shapeClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape) &&
                 "search_shape_".concat(appearanceConfig.shape).replace(/([A-Z])/g, '-$1').toLowerCase()), fillClass ||

package/dist/{Segmented-pa7MGnor.js → Segmented-BoROz9LW.js}

@@ -2,7 +2,7 @@ import { j as jsxRuntimeExports } from './jsx-runtime-C2uP7l8s.js';
 import React__default, { useRef, useMemo, createRef, useCallback, useEffect } from 'react';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
-import { T as Text } from './Text-CxrzHFN1.js';
+import { T as Text } from './Text-Dn0X1zxN.js';
 
 var segmentedConfig = {
     appearance: undefined,
@@ -63,7 +63,8 @@ var Segmented = React__default.forwardRef(function (props, ref) {
         prefix: 'fill_hover_',
         propsKey: 'fillHover',
     });
-    var appearanceConfig = useMemo(function () { return appearance && segmentedConfig.appearance && segmentedConfig.appearance[appearance]; }, [appearance, segmentedConfig]);
+    // prettier-ignore
+    var appearanceConfig = (appearance && segmentedConfig.appearance && segmentedConfig.appearance[appearance]);
     return (jsxRuntimeExports.jsx("div", { className: clsx(className, 'segmented', shapeClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape) &&
                 "segmented_shape_".concat(appearanceConfig.shape).replace(/([A-Z])/g, '-$1').toLowerCase()), fillClass ||

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

@@ -3,8 +3,8 @@ 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-DWnG-4KG.js';
-import { T as Text } from './Text-CxrzHFN1.js';
+import { I as Icon } from './Icon-C0gtkmdU.js';
+import { T as Text } from './Text-Dn0X1zxN.js';
 
 function SiteMenu(props) {
     var children = props.children, className = props.className, closeText = props.closeText, closeTextSize = props.closeTextSize, closeTextColor = props.closeTextColor, closeTextColorHover = props.closeTextColorHover, iconCloseBgFill = props.iconCloseBgFill, iconCloseFill = props.iconCloseFill, iconCloseSize = props.iconCloseSize, iconClose = props.iconClose, onClose = props.onClose;

package/dist/{Swiper-CL9zCKXE.js → Swiper-CP2ph4S3.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-BhJcCgdK.js';
+import { T as Title } from './Title-BAdU2oW_.js';
 
 /**
  * SSR Window 4.0.2
@@ -330,7 +330,22 @@ function elementChildren(element, selector) {
   if (selector === void 0) {
     selector = '';
   }
-  return [...element.children].filter(el => el.matches(selector));
+  const children = [...element.children];
+  if (element instanceof HTMLSlotElement) {
+    children.push(...element.assignedElements());
+  }
+  if (!selector) {
+    return children;
+  }
+  return children.filter(el => el.matches(selector));
+}
+function elementIsChildOf(el, parent) {
+  const isChild = parent.contains(el);
+  if (!isChild && parent instanceof HTMLSlotElement) {
+    const children = [...parent.assignedElements()];
+    return children.includes(el);
+  }
+  return isChild;
 }
 function showWarning(text) {
   try {
@@ -2595,7 +2610,7 @@ function onTouchStart(event) {
   }
   let targetEl = e.target;
   if (params.touchEventsTarget === 'wrapper') {
-    if (!swiper.wrapperEl.contains(targetEl)) return;
+    if (!elementIsChildOf(targetEl, swiper.wrapperEl)) return;
   }
   if ('which' in e && e.which === 3) return;
   if ('button' in e && e.button > 0) return;
@@ -4664,7 +4679,7 @@ const updateOnVirtualData = swiper => {
 };
 
 /**
- * Swiper React 11.1.5
+ * Swiper React 11.1.8
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
@@ -4672,7 +4687,7 @@ const updateOnVirtualData = swiper => {
  *
  * Released under the MIT License
  *
- * Released on: July 15, 2024
+ * Released on: July 26, 2024
  */
 
 

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

@@ -1,12 +1,12 @@
 import { _ as __assign } from './_tslib-S-VPg1Cw.js';
 import { j as jsxRuntimeExports } from './jsx-runtime-C2uP7l8s.js';
-import { R as Radio } from './Radio-Ca2-2PPF.js';
+import { R as Radio } from './Radio-CmejVeSJ.js';
 import clsx from 'clsx';
 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-DWnG-4KG.js';
+import { T as Text } from './Text-Dn0X1zxN.js';
+import { I as Icon } from './Icon-C0gtkmdU.js';
 import { useStyles } from './hooks/useStyles.js';
 import { S as Switch } from './Switch-0BHqovLA.js';
 

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

@@ -1,12 +1,12 @@
 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';
 import { useStyles } from './hooks/useStyles.js';
-import { B as Badge } from './Badge-BBbMdbjo.js';
+import { B as Badge } from './Badge-DtYgQu3L.js';
 import { D as Divider } from './Divider-Dhj6sMWd.js';
 import { L as Link } from './Link-Co6uspFK.js';
-import { T as Text } from './Text-CxrzHFN1.js';
+import { T as Text } from './Text-Dn0X1zxN.js';
 
 var tabConfig = {
     appearance: undefined,
@@ -15,7 +15,7 @@ var tabConfig = {
     },
 };
 function Tab(props) {
-    var isActive = props.isActive, isDisabled = props.isDisabled, isHover = props.isHover, after = props.after, appearance = props.appearance, badgeAppearance = props.badgeAppearance, badgeSize = props.badgeSize, badgeTextColor = props.badgeTextColor, badgeTextSize = props.badgeTextSize, badgeValue = props.badgeValue, before = props.before, children = props.children, className = props.className, dataTour = props.dataTour, dividerDirection = props.dividerDirection, dividerFill = props.dividerFill, dividerFillActive = props.dividerFillActive, dividerFillActiveHover = props.dividerFillActiveHover, dividerFillDisabled = props.dividerFillDisabled, dividerFillHover = props.dividerFillHover, dividerSize = props.dividerSize, href = props.href, label = props.label, labelColor = props.labelColor, labelColorActive = props.labelColorActive, labelColorDisabled = props.labelColorDisabled, labelTextColorHover = props.labelTextColorHover, labelTextGradient = props.labelTextGradient, labelTextSize = props.labelTextSize, labelTextStyle = props.labelTextStyle, labelTextWeight = props.labelTextWeight, labelTextWrap = props.labelTextWrap, link = props.link, linkFill = props.linkFill, onClick = props.onClick, onMouseEnter = props.onMouseEnter, rel = props.rel, reset = props.reset, set = props.set, target = props.target;
+    var _a = props.isActive, isActive = _a === void 0 ? false : _a, _b = props.isDisabled, isDisabled = _b === void 0 ? false : _b, _c = props.isHover, isHover = _c === void 0 ? false : _c, after = props.after, appearance = props.appearance, badgeAppearance = props.badgeAppearance, badgeSize = props.badgeSize, badgeTextColor = props.badgeTextColor, badgeTextSize = props.badgeTextSize, badgeValue = props.badgeValue, before = props.before, children = props.children, className = props.className, dataTour = props.dataTour, dividerDirection = props.dividerDirection, dividerFill = props.dividerFill, dividerFillActive = props.dividerFillActive, dividerFillActiveHover = props.dividerFillActiveHover, dividerFillDisabled = props.dividerFillDisabled, dividerFillHover = props.dividerFillHover, dividerSize = props.dividerSize, href = props.href, label = props.label, labelColor = props.labelColor, labelColorActive = props.labelColorActive, labelColorDisabled = props.labelColorDisabled, labelTextColorHover = props.labelTextColorHover, labelTextGradient = props.labelTextGradient, labelTextSize = props.labelTextSize, labelTextStyle = props.labelTextStyle, labelTextWeight = props.labelTextWeight, labelTextWrap = props.labelTextWrap, link = props.link, linkFill = props.linkFill, onClick = props.onClick, onMouseEnter = props.onMouseEnter, rel = props.rel, reset = props.reset, set = props.set, target = props.target;
     var alignDirectionClass = useDeviceTargetClass(props, {
         prefix: 'align_',
         propsKey: 'alignDirection',
@@ -66,7 +66,7 @@ function Tab(props) {
     });
     // @ts-expect-error
     var tab = useStyles(props).styles;
-    var appearanceConfig = useMemo(function () { return appearance && tabConfig.appearance && tabConfig.appearance[appearance]; }, [appearance, tabConfig]);
+    var appearanceConfig = appearance && tabConfig.appearance && tabConfig.appearance[appearance];
     return (jsxRuntimeExports.jsx("div", { className: clsx('tab', isActive && 'tab_state_active', isDisabled && 'tab_state_disabled', isHover && 'tab_state_hover', fillClass ||
             (isDisabled
                 ? fillDisabledClass ||

package/dist/{Text-CxrzHFN1.js → Text-Dn0X1zxN.js}

@@ -1,5 +1,4 @@
 import { j as jsxRuntimeExports } from './jsx-runtime-C2uP7l8s.js';
-import { useMemo } from 'react';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
@@ -62,7 +61,7 @@ function Text(props) {
     });
     // @ts-expect-error
     var textStyles = useStyles(props).styles;
-    var appearanceConfig = useMemo(function () { return appearance && textConfig.appearance && textConfig.appearance[appearance]; }, [appearance, textConfig]);
+    var appearanceConfig = appearance && textConfig.appearance && textConfig.appearance[appearance];
     return (jsxRuntimeExports.jsxs(Tag, { className: clsx(className, 'text', sizeClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.size) &&
                 "text_size_".concat(appearanceConfig.size).replace(/([A-Z])/g, '-$1').toLowerCase()), weightClass, textAlignClass, textColorClass ||

package/dist/{Textarea-Cie6SPyp.js → Textarea-D3XSuMEm.js}

@@ -59,7 +59,7 @@ function Textarea(props) {
         prefix: 'width_',
         propsKey: 'width',
     });
-    var appearanceConfig = useMemo(function () { return appearance && textareaConfig.appearance && textareaConfig.appearance[appearance]; }, [appearance, textareaConfig]);
+    var appearanceConfig = appearance && textareaConfig.appearance && textareaConfig.appearance[appearance];
     var stateConfig = useMemo(function () { return state && textareaConfig.state && textareaConfig.state[state]; }, [state, textareaConfig]);
     return (jsxRuntimeExports.jsx("textarea", { className: clsx(className, 'textarea', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, fillClass, borderColorClass ||
             ((stateConfig === null || stateConfig === void 0 ? void 0 : stateConfig.borderColor) &&

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

@@ -2,9 +2,9 @@ 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-BBbMdbjo.js';
-import { T as Text } from './Text-CxrzHFN1.js';
-import { T as Title } from './Title-BhJcCgdK.js';
+import { B as Badge } from './Badge-DtYgQu3L.js';
+import { T as Text } from './Text-Dn0X1zxN.js';
+import { T as Title } from './Title-BAdU2oW_.js';
 
 function Tile(props) {
     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;

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

@@ -72,7 +72,7 @@ function Title(props) {
     });
     // @ts-expect-error
     var _c = useStyles(props), titleStyles = _c.styles, titleWrapperStyles = _c.wrapper;
-    var appearanceConfig = useMemo(function () { return appearance && titleConfig.appearance && titleConfig.appearance[appearance]; }, [appearance, titleConfig]);
+    var appearanceConfig = appearance && titleConfig.appearance && titleConfig.appearance[appearance];
     // Element type (h1, h2, ..., h6)
     var Tag = useMemo(function () {
         if (tag) {

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

@@ -1,10 +1,10 @@
 import { j as jsxRuntimeExports } from './jsx-runtime-C2uP7l8s.js';
-import React__default, { useRef, useState, useCallback, useImperativeHandle, useMemo } from 'react';
+import React__default, { useRef, useState, useCallback, useImperativeHandle } from 'react';
 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-BhJcCgdK.js';
+import { T as Text } from './Text-Dn0X1zxN.js';
+import { T as Title } from './Title-BAdU2oW_.js';
 
 var tooltipConfig = {
     appearance: undefined,
@@ -96,7 +96,7 @@ var Tooltip = React__default.forwardRef(function Tooltip(props, ref) {
     });
     // @ts-expect-error
     var tooltipStyles = useStyles(props).styles;
-    var appearanceConfig = useMemo(function () { return appearance && tooltipConfig.appearance && tooltipConfig.appearance[appearance]; }, [appearance, tooltipConfig]);
+    var appearanceConfig = appearance && tooltipConfig.appearance && tooltipConfig.appearance[appearance];
     return (jsxRuntimeExports.jsxs("div", { className: clsx(className, 'tooltip', isTooltipVisible === true && 'tooltip_state_open', isTooltipVisible === false && 'tooltip_state_close', fillClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
                 "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), shapeClass, alignDirectionClass, alignClass, alignmentClass, borderWidthClass, borderColorClass, borderTypeClass, elevationClass, sizeClass, arrowPosition && "tooltip_type_arrow tooltip_arrow_position_".concat(arrowPosition), type && "tooltip_type_".concat(type), set && "tooltip_set_".concat(set), widthClass), style: tooltipStyles, onAnimationEnd: onAnimationEnd, children: [before, jsxRuntimeExports.jsxs("div", { className: "tooltip__inner", children: [title && (jsxRuntimeExports.jsx(Title, { className: "tooltip__title", size: titleSize, textColor: titleTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextColor), children: title })), text && (jsxRuntimeExports.jsx(Text, { className: "tooltip__text", size: textSize, textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), children: text })), children] }), after] }));

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

@@ -7,8 +7,8 @@ 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-2rv_L0yY.js');
-var Text = require('./Text-C8vlKWNN.js');
+var Icon = require('./Icon-BUwWk_dS.js');
+var Text = require('./Text-D2YDVhGJ.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 

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

@@ -4,9 +4,9 @@ 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-2rv_L0yY.js');
+var Icon = require('./Icon-BUwWk_dS.js');
 var Image = require('./Image-CCx6QWZj.js');
-var Text = require('./Text-C8vlKWNN.js');
+var Text = require('./Text-D2YDVhGJ.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 

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

@@ -1,11 +1,10 @@
 'use strict';
 
 var jsxRuntime = require('./jsx-runtime-BBxmckJR.js');
-var React = require('react');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
 var useStyles = require('./hooks/useStyles.js');
-var Text = require('./Text-C8vlKWNN.js');
+var Text = require('./Text-D2YDVhGJ.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -58,7 +57,7 @@ function Badge(props) {
     });
     // @ts-expect-error
     var badgeStyles = useStyles.useStyles(props).styles;
-    var appearanceConfig = React.useMemo(function () { return appearance && badgeConfig.appearance && badgeConfig.appearance[appearance]; }, [appearance, badgeConfig]);
+    var appearanceConfig = appearance && badgeConfig.appearance && badgeConfig.appearance[appearance];
     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())), fillHoverClass ||

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

@@ -7,9 +7,9 @@ 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-2rv_L0yY.js');
+var Icon = require('./Icon-BUwWk_dS.js');
 var Link = require('./Link-B6Xq7PWn.js');
-var Text = require('./Text-C8vlKWNN.js');
+var Text = require('./Text-D2YDVhGJ.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 

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

@@ -5,10 +5,10 @@ var React = require('react');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
 var useStyles = require('./hooks/useStyles.js');
-var Icon = require('./Icon-2rv_L0yY.js');
+var Icon = require('./Icon-BUwWk_dS.js');
 var Link = require('./Link-B6Xq7PWn.js');
-var Loader = require('./Loader-2vQxF_aO.js');
-var Text = require('./Text-C8vlKWNN.js');
+var Loader = require('./Loader-2CPNhu-4.js');
+var Text = require('./Text-D2YDVhGJ.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -22,7 +22,7 @@ var buttonConfig = {
     },
 };
 var Button = React__default.default.forwardRef(function Button(props, ref) {
-    var before = props.before, appearance = props.appearance, after = props.after, className = props.className, dataTour = props.dataTour, dataTestId = props.dataTestId, Badge = props.Badge, children = props.children, fillIcon = props.fillIcon, fillIconAfter = props.fillIconAfter, fillIconBefore = props.fillIconBefore, iconAfter = props.iconAfter, iconAfterSize = props.iconAfterSize, iconBefore = props.iconBefore, iconBeforeSize = props.iconBeforeSize, label = props.label, labelTextColor = props.labelTextColor, labelTextColorHover = props.labelTextColorHover, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, labelTextWrap = props.labelTextWrap, _a = props.loaderSet, loaderSet = _a === void 0 ? 'simple' : _a, loaderFill = props.loaderFill, loaderItemFill = props.loaderItemFill, link = props.link, href = props.href, target = props.target, rel = props.rel; props.size; var icon = props.icon, iconShape = props.iconShape, iconAfterShape = props.iconAfterShape, iconBeforeShape = props.iconBeforeShape, iconSize = props.iconSize, iconFill = props.iconFill, iconFillSize = props.iconFillSize, iconBeforeFill = props.iconBeforeFill, iconBeforeFillSize = props.iconBeforeFillSize, iconAfterFill = props.iconAfterFill, iconAfterFillSize = props.iconAfterFillSize, iconAfterSrc = props.iconAfterSrc, iconBeforeSrc = props.iconBeforeSrc, iconSrc = props.iconSrc, set = props.set, _c = props.loading, loading = _c === void 0 ? false : _c, _d = props.htmlType, htmlType = _d === void 0 ? 'button' : _d; props.width; var isDisabled = props.isDisabled, onClick = props.onClick, onMouseDown = props.onMouseDown;
+    var before = props.before, appearance = props.appearance, after = props.after, className = props.className, dataTour = props.dataTour, dataTestId = props.dataTestId, Badge = props.Badge, children = props.children, fillIcon = props.fillIcon, fillIconAfter = props.fillIconAfter, fillIconBefore = props.fillIconBefore, iconAfter = props.iconAfter, iconAfterSize = props.iconAfterSize, iconBefore = props.iconBefore, iconBeforeSize = props.iconBeforeSize, label = props.label, labelTextColor = props.labelTextColor, labelTextColorHover = props.labelTextColorHover, labelTextSize = props.labelTextSize, labelTextSizeMobile = props.labelTextSizeMobile, labelTextWeight = props.labelTextWeight, labelTextWrap = props.labelTextWrap, _a = props.loaderSet, loaderSet = _a === void 0 ? 'simple' : _a, loaderFill = props.loaderFill, loaderItemFill = props.loaderItemFill, link = props.link, href = props.href, target = props.target, rel = props.rel; props.size; var icon = props.icon, iconShape = props.iconShape, iconAfterShape = props.iconAfterShape, iconBeforeShape = props.iconBeforeShape, iconSize = props.iconSize, iconFill = props.iconFill, iconFillSize = props.iconFillSize, iconBeforeFill = props.iconBeforeFill, iconBeforeFillSize = props.iconBeforeFillSize, iconAfterFill = props.iconAfterFill, iconAfterFillSize = props.iconAfterFillSize, iconAfterSrc = props.iconAfterSrc, iconBeforeSrc = props.iconBeforeSrc, iconSrc = props.iconSrc, set = props.set, _c = props.loading, loading = _c === void 0 ? false : _c, _d = props.htmlType, htmlType = _d === void 0 ? 'button' : _d; props.width; var isDisabled = props.isDisabled, onClick = props.onClick, onMouseDown = props.onMouseDown;
     var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
         prefix: 'button_width_',
         propsKey: 'width',
@@ -61,7 +61,7 @@ var Button = React__default.default.forwardRef(function Button(props, ref) {
     });
     // @ts-expect-error
     var _f = useStyles.useStyles(props), buttonStyles = _f.styles, labelStyles = _f.label;
-    var appearanceConfig = React.useMemo(function () { return appearance && buttonConfig.appearance && buttonConfig.appearance[appearance]; }, [appearance, buttonConfig]);
+    var appearanceConfig = appearance && buttonConfig.appearance && buttonConfig.appearance[appearance];
     return (jsxRuntime.jsxRuntimeExports.jsx(Link.LinkWrapper, { className: clsx__default.default(className, 'button', label && 'button_type_label', borderColorClass ? 'button_set_outlined' : set ? "button_set_".concat(set) : 'button_set_filled', borderWidthClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderWidth) &&
                 "border-width_".concat(appearanceConfig.borderWidth)
@@ -87,7 +87,7 @@ var Button = React__default.default.forwardRef(function Button(props, ref) {
                 iconBefore ||
                 iconBeforeSrc ||
                 iconSrc) &&
-            'button_type_with-icon', loading && 'button_state_loading button_type_loader'), "data-test-id": dataTestId && "".concat(dataTestId, "Button"), "data-tour": dataTour, DefaultComponent: "button", disabled: isDisabled, href: link || href, rel: rel, style: buttonStyles, target: target, type: htmlType, onClick: onClick, onMouseDown: onMouseDown, children: jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "button__wrapper", ref: ref, children: [loading && (jsxRuntime.jsxRuntimeExports.jsx(Loader.Loader, { className: "button__loader", fill: loaderFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.loaderFill), itemFill: loaderItemFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.loaderItemFill), set: loaderSet })), before, (iconBefore || iconBeforeSrc) && (jsxRuntime.jsxRuntimeExports.jsx(Icon.Icon, { className: "button__icon_before", fill: fillIconBefore, fillSize: iconBeforeFillSize, iconFill: iconBeforeFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconBeforeFill), imageSrc: iconBeforeSrc, shape: iconBeforeShape, size: iconBeforeSize, SvgImage: iconBefore })), (icon || iconSrc) && (jsxRuntime.jsxRuntimeExports.jsx(Icon.Icon, { className: "button__icon", fill: fillIcon, fillSize: iconFillSize, iconFill: iconFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconFill), imageSrc: iconSrc, shape: iconShape, size: iconSize, SvgImage: icon })), (children || label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label)) && (jsxRuntime.jsxRuntimeExports.jsx(Text.Text, { className: "button__label", size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize) || undefined, style: labelStyles, textColor: labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), textColorHover: labelTextColorHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColorHover), textWrap: labelTextWrap, textWeight: labelTextWeight, children: children || label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label) })), (iconAfter || iconAfterSrc) && (jsxRuntime.jsxRuntimeExports.jsx(Icon.Icon, { className: "button__icon_after", fill: fillIconAfter, fillSize: iconAfterFillSize, iconFill: iconAfterFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconAfterFill), imageSrc: iconAfterSrc, shape: iconAfterShape, size: iconAfterSize, SvgImage: iconAfter })), Badge, after] }) }));
+            'button_type_with-icon', loading && 'button_state_loading button_type_loader'), "data-test-id": dataTestId && "".concat(dataTestId, "Button"), "data-tour": dataTour, DefaultComponent: "button", disabled: isDisabled, href: link || href, rel: rel, style: buttonStyles, target: target, type: htmlType, onClick: onClick, onMouseDown: onMouseDown, children: jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "button__wrapper", ref: ref, children: [loading && (jsxRuntime.jsxRuntimeExports.jsx(Loader.Loader, { className: "button__loader", fill: loaderFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.loaderFill), itemFill: loaderItemFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.loaderItemFill), set: loaderSet })), before, (iconBefore || iconBeforeSrc) && (jsxRuntime.jsxRuntimeExports.jsx(Icon.Icon, { className: "button__icon_before", fill: fillIconBefore, fillSize: iconBeforeFillSize, iconFill: iconBeforeFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconBeforeFill), imageSrc: iconBeforeSrc, shape: iconBeforeShape, size: iconBeforeSize, SvgImage: iconBefore })), (icon || iconSrc) && (jsxRuntime.jsxRuntimeExports.jsx(Icon.Icon, { className: "button__icon", fill: fillIcon, fillSize: iconFillSize, iconFill: iconFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconFill), imageSrc: iconSrc, shape: iconShape, size: iconSize, SvgImage: icon })), (children || label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label)) && (jsxRuntime.jsxRuntimeExports.jsx(Text.Text, { className: "button__label", size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize) || undefined, sizeMobile: labelTextSizeMobile, style: labelStyles, textColor: labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), textColorHover: labelTextColorHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColorHover), textWrap: labelTextWrap, textWeight: labelTextWeight, children: children || label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label) })), (iconAfter || iconAfterSrc) && (jsxRuntime.jsxRuntimeExports.jsx(Icon.Icon, { className: "button__icon_after", fill: fillIconAfter, fillSize: iconAfterFillSize, iconFill: iconAfterFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconAfterFill), imageSrc: iconAfterSrc, shape: iconAfterShape, size: iconAfterSize, SvgImage: iconAfter })), Badge, after] }) }));
 });
 Button.defaultProps = {
     // Button with a `type="submit"` attribute is a form control by default.

package/dist/cjs/{Card--te6xVsm.js → Card-D9Eh3qLN.js}

@@ -4,7 +4,7 @@ var jsxRuntime = require('./jsx-runtime-BBxmckJR.js');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
 var Image = require('./Image-CCx6QWZj.js');
-var Text = require('./Text-C8vlKWNN.js');
+var Text = require('./Text-D2YDVhGJ.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 

package/dist/cjs/{Cell-DEBk3Rbp.js → Cell-DpzvSs16.js}

@@ -3,9 +3,9 @@
 var jsxRuntime = require('./jsx-runtime-BBxmckJR.js');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
-var Icon = require('./Icon-2rv_L0yY.js');
-var Label = require('./Label-EFoxH21m.js');
-var Text = require('./Text-C8vlKWNN.js');
+var Icon = require('./Icon-BUwWk_dS.js');
+var Label = require('./Label-Bc4u2NRI.js');
+var Text = require('./Text-D2YDVhGJ.js');
 var useStyles = require('./hooks/useStyles.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

package/dist/cjs/{Checkbox-BIvndDsy.js → Checkbox-BE9LWRTC.js}

@@ -3,7 +3,7 @@
 var jsxRuntime = require('./jsx-runtime-BBxmckJR.js');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
-var Text = require('./Text-C8vlKWNN.js');
+var Text = require('./Text-D2YDVhGJ.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 

package/dist/cjs/{Chips-i7zrI9aU.js → Chips-cdORW7eM.js}

@@ -1,11 +1,10 @@
 'use strict';
 
 var jsxRuntime = require('./jsx-runtime-BBxmckJR.js');
-var React = require('react');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
 var useStyles = require('./hooks/useStyles.js');
-var Text = require('./Text-C8vlKWNN.js');
+var Text = require('./Text-D2YDVhGJ.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -18,7 +17,8 @@ var chipsConfig = {
     },
 };
 function Chips(props) {
-    var isActive = props.isActive, labelTextActiveColor = props.labelTextActiveColor, appearance = props.appearance, children = props.children, className = props.className, label = props.label, labelTextSize = props.labelTextSize, labelTextColor = props.labelTextColor, labelTextWeight = props.labelTextWeight, type = props.type, onClick = props.onClick;
+    var children = props.children, isActive = props.isActive, appearance = props.appearance, className = props.className, _a = props.label, label = _a === void 0 ? '' : _a, labelSize = props.labelSize, // labelTextSize,
+    labelTextActiveColor = props.labelTextActiveColor, labelTextColor = props.labelTextColor, labelTextWeight = props.labelTextWeight, type = props.type, onClick = props.onClick;
     var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
         prefix: 'align_',
         propsKey: 'alignDirection',
@@ -61,22 +61,24 @@ function Chips(props) {
     });
     // @ts-expect-error
     var chipsStyles = useStyles.useStyles(props).styles;
-    var appearanceConfig = React.useMemo(function () { return appearance && chipsConfig.appearance && chipsConfig.appearance[appearance]; }, [appearance, chipsConfig]);
-    return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: clsx__default.default(className, 'chips', isActive && 'chips_state_active', isActive ? fillActiveClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillActive) &&
-                "fill_".concat(appearanceConfig.fillActive).replace(/([A-Z])/g, '-$1').toLowerCase()) : fillClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
-                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass ||
+    // prettier-ignore
+    var appearanceConfig = (appearance && chipsConfig.appearance && chipsConfig.appearance[appearance]);
+    return (jsxRuntime.jsxRuntimeExports.jsx("div", { style: chipsStyles, className: clsx__default.default(className, 'chips', isActive && 'chips_state_active', isActive
+            ? fillActiveClass ||
+                ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillActive) &&
+                    "fill_".concat(appearanceConfig.fillActive).replace(/([A-Z])/g, '-$1').toLowerCase())
+            : fillClass ||
+                ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
+                    "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
                 "fill_hover_".concat(appearanceConfig.fillHover).replace(/([A-Z])/g, '-$1').toLowerCase()), shapeClass, borderColorClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderColor) &&
                 "border-color_".concat(appearanceConfig.borderColor)
                     .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), borderTypeClass, sizeClass, alignDirectionClass, alignClass, type && "chips_type_".concat(type), cursorClass, onClick && 'cursor_type_pointer'), style: chipsStyles, onClick: onClick, children: jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "chips__inner", children: [typeof label === 'string' ? (jsxRuntime.jsxRuntimeExports.jsx(Text.Text, { className: "chips__label", textColor: isActive ? labelTextActiveColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextActiveColor) : labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), textWeight: labelTextWeight, size: labelTextSize, children: label })) : (jsxRuntime.jsxRuntimeExports.jsx("div", { className: "chips__label", children: label })), children] }) }));
+                    .toLowerCase()), borderTypeClass, sizeClass, alignDirectionClass, alignClass, type && "chips_type_".concat(type), cursorClass, onClick && 'cursor_type_pointer'), onClick: onClick, children: jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "chips__inner", children: [typeof label === 'string' ? (jsxRuntime.jsxRuntimeExports.jsx(Text.Text, { className: "chips__label", size: labelSize, textWeight: labelTextWeight, textColor: isActive
+                        ? labelTextActiveColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextActiveColor)
+                        : labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), children: label })) : (jsxRuntime.jsxRuntimeExports.jsx("div", { className: "chips__label", children: label })), children] }) }));
 }
-Chips.defaultProps = {
-    label: 'Chips',
-};
 
 exports.Chips = Chips;
 exports.chipsConfig = chipsConfig;