@itcase/ui 1.8.123 → 1.8.125

package/dist/components/InputPassword.js

@@ -1,11 +1,10 @@
-import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import { icons24 } from '@itcase/icons/default';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useMemo, useCallback } from 'react';
 import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { I as Icon } from '../Icon_es_BrwLifge.js';
+import { I as Icon } from '../Icon_es_DkVkzTha.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
@@ -23,10 +22,10 @@ import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
-import '../Link_es_XiqbdwLp.js';
-import '../Text_es_CwV9rjFD.js';
+import '../Link_es_P2b6ya7P.js';
+import '../Text_es_CnymlElo.js';
 
-var inputPasswordAppearanceDefault = {
+const inputPasswordAppearanceDefault = {
     defaultPrimary: {
         fill: 'surfaceSecondary',
         borderColor: 'surfaceBorderTertiary',
@@ -53,7 +52,7 @@ var inputPasswordAppearanceDefault = {
     },
 };
 
-var inputPasswordAppearanceDisabled = {
+const inputPasswordAppearanceDisabled = {
     disabledPrimary: {
         fill: 'surfaceFillDisabled',
         borderColor: 'errorBorderQuaternary',
@@ -75,7 +74,7 @@ var inputPasswordAppearanceDisabled = {
     },
 };
 
-var inputPasswordAppearanceError = {
+const inputPasswordAppearanceError = {
     errorPrimary: {
         fill: 'errorTertiary',
         borderColor: 'errorBorderQuaternary',
@@ -97,7 +96,7 @@ var inputPasswordAppearanceError = {
     },
 };
 
-var inputPasswordAppearanceRequire = {
+const inputPasswordAppearanceRequire = {
     requirePrimary: {
         fill: 'warningTertiary',
         borderColor: 'warningBorderQuaternary',
@@ -119,7 +118,7 @@ var inputPasswordAppearanceRequire = {
     },
 };
 
-var inputPasswordAppearanceShape = {
+const inputPasswordAppearanceShape = {
     circular: {
         shape: 'circular',
     },
@@ -144,7 +143,7 @@ var inputPasswordAppearanceShape = {
     },
 };
 
-var inputPasswordAppearanceSize = {
+const inputPasswordAppearanceSize = {
     sizeXXL: {
         size: 'xxl',
         textSize: 'l',
@@ -189,7 +188,7 @@ var inputPasswordAppearanceSize = {
     },
 };
 
-var inputPasswordAppearanceStyle = {
+const inputPasswordAppearanceStyle = {
     solid: {
         borderColor: 'none',
     },
@@ -205,7 +204,7 @@ var inputPasswordAppearanceStyle = {
     },
 };
 
-var inputPasswordAppearanceSuccess = {
+const inputPasswordAppearanceSuccess = {
     successPrimary: {
         fill: 'successTertiary',
         borderColor: 'successBorderQuaternary',
@@ -227,30 +226,39 @@ var inputPasswordAppearanceSuccess = {
     },
 };
 
-var inputPasswordAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, inputPasswordAppearanceSize), inputPasswordAppearanceDisabled), inputPasswordAppearanceRequire), inputPasswordAppearanceStyle), inputPasswordAppearanceError), inputPasswordAppearanceDefault), inputPasswordAppearanceSuccess), inputPasswordAppearanceShape);
+const inputPasswordAppearance = {
+    ...inputPasswordAppearanceSize,
+    ...inputPasswordAppearanceDisabled,
+    ...inputPasswordAppearanceRequire,
+    ...inputPasswordAppearanceStyle,
+    ...inputPasswordAppearanceError,
+    ...inputPasswordAppearanceDefault,
+    ...inputPasswordAppearanceSuccess,
+    ...inputPasswordAppearanceShape,
+};
 
-var inputPasswordConfig = {
+const inputPasswordConfig = {
     appearance: inputPasswordAppearance,
-    setAppearance: function (appearanceConfig) {
+    setAppearance: (appearanceConfig) => {
         inputPasswordConfig.appearance = appearanceConfig;
     },
 };
 function InputPassword(props) {
-    var id = props.id, appearance = props.appearance, className = props.className, placeholder = props.placeholder, value = props.value, isDisabled = props.isDisabled, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
-    var _a = useState(false), isRevealed = _a[0], setIsRevealed = _a[1];
-    var inputType = useMemo(function () {
+    const { id, appearance, className, placeholder, value, isDisabled, onBlur, onChange, onFocus, onKeyDown, } = props;
+    const [isRevealed, setIsRevealed] = useState(false);
+    const inputType = useMemo(() => {
         return isRevealed ? 'text' : 'password';
     }, [isRevealed]);
-    var onClickIconReveal = useCallback(function (event) {
+    const onClickIconReveal = useCallback((event) => {
         event.preventDefault();
-        setIsRevealed(function (prev) { return !prev; });
+        setIsRevealed((prev) => !prev);
     }, []);
-    var appearanceConfig = useAppearanceConfig(appearance, inputPasswordConfig, isDisabled);
-    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderWidthClass = propsGenerator.borderWidthClass, textColorClass = propsGenerator.textColorClass, textSizeClass = propsGenerator.textSizeClass, textWeightClass = propsGenerator.textWeightClass, caretClass = propsGenerator.caretClass, iconFill = propsGenerator.iconFill, iconFillHover = propsGenerator.iconFillHover, iconRevealableHide = propsGenerator.iconRevealableHide, iconRevealableShow = propsGenerator.iconRevealableShow, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, imageRevealableHide = propsGenerator.imageRevealableHide, imageRevealableShow = propsGenerator.imageRevealableShow, placeholderTextColorClass = propsGenerator.placeholderTextColorClass, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
-    return (jsxs("div", { className: "input-password", children: [jsx("input", { id: String(id), className: clsx(className, 'input-password__input', (textSizeClass || textColorClass || textWeightClass) && 'text', borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass &&
-                    "border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), caretClass && "caret-color_".concat(caretClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), placeholderTextColorClass &&
-                    "placeholder-text-color_".concat(placeholderTextColorClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), sizeClass && "input-password__input_size_".concat(sizeClass), textColorClass && "text-color_".concat(textColorClass), textColorClass && "text-color_".concat(textColorClass), textSizeClass && "text_size_".concat(textSizeClass), textWeightClass && "text-weight_".concat(textWeightClass), widthClass && "width_".concat(widthClass)), type: inputType, disabled: isDisabled, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }), jsx(Icon, { className: "input-password__icon", size: iconSize, iconFill: iconFill, iconFillHover: iconFillHover, imageSrc: isRevealed ? imageRevealableHide : imageRevealableShow, shape: iconShape, SvgImage: isRevealed ? iconRevealableHide : iconRevealableShow, onClick: onClickIconReveal })] }));
+    const appearanceConfig = useAppearanceConfig(appearance, inputPasswordConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, textColorClass, textSizeClass, textWeightClass, caretClass, iconFill, iconFillHover, iconRevealableHide, iconRevealableShow, iconShape, iconSize, imageRevealableHide, imageRevealableShow, placeholderTextColorClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
+    return (jsxs("div", { className: "input-password", children: [jsx("input", { id: String(id), className: clsx(className, 'input-password__input', (textSizeClass || textColorClass || textWeightClass) && 'text', borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass &&
+                    `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, caretClass && `caret-color_${caretClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, placeholderTextColorClass &&
+                    `placeholder-text-color_${placeholderTextColorClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `input-password__input_size_${sizeClass}`, textColorClass && `text-color_${textColorClass}`, textColorClass && `text-color_${textColorClass}`, textSizeClass && `text_size_${textSizeClass}`, textWeightClass && `text-weight_${textWeightClass}`, widthClass && `width_${widthClass}`), type: inputType, disabled: isDisabled, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }), jsx(Icon, { className: "input-password__icon", size: iconSize, iconFill: iconFill, iconFillHover: iconFillHover, imageSrc: isRevealed ? imageRevealableHide : imageRevealableShow, shape: iconShape, SvgImage: isRevealed ? iconRevealableHide : iconRevealableShow, onClick: onClickIconReveal })] }));
 }
 
 export { InputPassword, inputPasswordAppearance, inputPasswordConfig };

package/dist/components/Label.js

@@ -1,9 +1,8 @@
-export { L as Label, a as labelAppearance, l as labelConfig } from '../Label_es_SULlg9bL.js';
+export { L as Label, a as labelAppearance, l as labelConfig } from '../Label_es_B2kcstsG.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
 import '../hooks/useAppearanceConfig/useAppearanceConfig.js';
-import '../tslib.es6_es_Bwu1Cn-t.js';
 import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -19,9 +18,9 @@ import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
-import '../Icon_es_BrwLifge.js';
+import '../Icon_es_DkVkzTha.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_XiqbdwLp.js';
-import '../Text_es_CwV9rjFD.js';
+import '../Link_es_P2b6ya7P.js';
+import '../Text_es_CnymlElo.js';

package/dist/components/Link.js

@@ -1,5 +1,4 @@
-export { L as Link, a as LinkWrapper, b as linkAppearance, l as linkConfig } from '../Link_es_XiqbdwLp.js';
-import '../tslib.es6_es_Bwu1Cn-t.js';
+export { L as Link, a as LinkWrapper, b as linkAppearance, l as linkConfig } from '../Link_es_P2b6ya7P.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';

package/dist/components/List.js

@@ -3,8 +3,7 @@ import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
-import { L as Link } from '../Link_es_XiqbdwLp.js';
+import { L as Link } from '../Link_es_P2b6ya7P.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -20,7 +19,7 @@ import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
 import 'lodash/maxBy';
 
-var listAppearanceAccent = {
+const listAppearanceAccent = {
     accent: {
         fill: 'accentPrimary',
         fillHover: 'accentPrimaryHover',
@@ -41,14 +40,14 @@ var listAppearanceAccent = {
     },
 };
 
-var listAppearanceDanger = {
+const listAppearanceDanger = {
     danger: {
         fill: 'dangerPrimary',
         fillHover: 'dangerPrimaryHover',
     },
 };
 
-var listAppearanceError = {
+const listAppearanceError = {
     error: {
         fill: 'errorPrimary',
         fillHover: 'errorPrimaryHover',
@@ -59,7 +58,7 @@ var listAppearanceError = {
     },
 };
 
-var listAppearanceInfo = {
+const listAppearanceInfo = {
     info: {
         fill: 'accentPrimary',
         fillHover: 'accentPrimaryHover',
@@ -80,7 +79,7 @@ var listAppearanceInfo = {
     },
 };
 
-var listAppearancePrimary = {
+const listAppearancePrimary = {
     primary: {
         fill: 'primaryPrimary',
         fillHover: 'primaryPrimaryHover',
@@ -88,7 +87,7 @@ var listAppearancePrimary = {
     },
 };
 
-var listAppearanceSecondary = {
+const listAppearanceSecondary = {
     secondary: {
         fill: 'secondaryPrimary',
         fillHover: 'secondaryPrimaryHover',
@@ -96,7 +95,7 @@ var listAppearanceSecondary = {
     },
 };
 
-var listAppearanceSize = {
+const listAppearanceSize = {
     sizeXXL: {
         size: 'xxl',
         labelTextSize: 'xxl',
@@ -155,7 +154,7 @@ var listAppearanceSize = {
     },
 };
 
-var listAppearanceStyle = {
+const listAppearanceStyle = {
     full: {
         borderColor: '0',
     },
@@ -171,7 +170,7 @@ var listAppearanceStyle = {
     },
 };
 
-var listAppearanceSuccess = {
+const listAppearanceSuccess = {
     success: {
         fill: 'successPrimary',
         fillHover: 'successPrimaryHover',
@@ -182,7 +181,7 @@ var listAppearanceSuccess = {
     },
 };
 
-var listAppearanceSurface = {
+const listAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
         fillHover: 'surfacePrimaryHover',
@@ -207,7 +206,7 @@ var listAppearanceSurface = {
     },
 };
 
-var listAppearanceWarning = {
+const listAppearanceWarning = {
     warning: {
         fill: 'warningPrimary',
         fillHover: 'warningPrimaryHover',
@@ -218,31 +217,43 @@ var listAppearanceWarning = {
     },
 };
 
-var listAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, listAppearanceSize), listAppearanceStyle), listAppearanceAccent), listAppearanceDanger), listAppearanceError), listAppearanceInfo), listAppearancePrimary), listAppearanceSecondary), listAppearanceSuccess), listAppearanceSurface), listAppearanceWarning);
+const listAppearance = {
+    ...listAppearanceSize,
+    ...listAppearanceStyle,
+    ...listAppearanceAccent,
+    ...listAppearanceDanger,
+    ...listAppearanceError,
+    ...listAppearanceInfo,
+    ...listAppearancePrimary,
+    ...listAppearanceSecondary,
+    ...listAppearanceSuccess,
+    ...listAppearanceSurface,
+    ...listAppearanceWarning,
+};
 
-var listConfig = {
+const listConfig = {
     appearance: listAppearance};
 function List(props) {
-    var className = props.className, type = props.type, appearance = props.appearance, style = props.style, children = props.children;
-    var appearanceConfig = useAppearanceConfig(appearance, listConfig);
-    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var directionClass = propsGenerator.directionClass, bulletFillClass = propsGenerator.bulletFillClass, bulletSizeClass = propsGenerator.bulletSizeClass, bulletTextColorClass = propsGenerator.bulletTextColorClass, sizeClass = propsGenerator.sizeClass;
+    const { className, type, appearance, style, children } = props;
+    const appearanceConfig = useAppearanceConfig(appearance, listConfig);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { directionClass, bulletFillClass, bulletSizeClass, bulletTextColorClass, sizeClass, } = propsGenerator;
     // @ts-expect-error
-    var ulStyles = useStyles(props).styles;
-    return (jsx("ul", { className: clsx(className, 'list', bulletSizeClass && "list_bullet-size_".concat(bulletSizeClass), bulletFillClass && "list_bullet-fill_".concat(bulletFillClass), bulletTextColorClass &&
-            "list_bullet-text-color_".concat(bulletTextColorClass), directionClass && "list_direction_".concat(directionClass), sizeClass && "list_size_".concat(sizeClass), style && "list_style_".concat(style), type && "list_type_".concat(type)), style: ulStyles, children: children }));
+    const { styles: ulStyles } = useStyles(props);
+    return (jsx("ul", { className: clsx(className, 'list', bulletSizeClass && `list_bullet-size_${bulletSizeClass}`, bulletFillClass && `list_bullet-fill_${bulletFillClass}`, bulletTextColorClass &&
+            `list_bullet-text-color_${bulletTextColorClass}`, directionClass && `list_direction_${directionClass}`, sizeClass && `list_size_${sizeClass}`, style && `list_style_${style}`, type && `list_type_${type}`), style: ulStyles, children: children }));
 }
 
 function ListItem(props) {
-    var className = props.className, text = props.text, href = props.href, link = props.link, before = props.before, after = props.after, children = props.children;
-    var propsGenerator = useDevicePropsGenerator(props);
-    var fillClass = propsGenerator.fillClass, textColorClass = propsGenerator.textColorClass, textStyleClass = propsGenerator.textStyleClass, textWeightClass = propsGenerator.textWeightClass;
+    const { className, text, href, link, before, after, children } = props;
+    const propsGenerator = useDevicePropsGenerator(props);
+    const { fillClass, textColorClass, textStyleClass, textWeightClass } = propsGenerator;
     // @ts-expect-error
-    var _a = useStyles(props), linkStyles = _a.link, liStyles = _a.styles;
+    const { link: linkStyles, styles: liStyles } = useStyles(props);
     if (link) {
-        return (jsx("li", { className: clsx(className, 'list__item', 'list__item_type_link', textStyleClass && "text text-style_".concat(textStyleClass), textWeightClass && "text text-weight_".concat(textWeightClass), textColorClass && "text-color_".concat(textColorClass), fillClass && "fill_".concat(fillClass)), style: liStyles, children: jsx(Link, { className: clsx('list__item-link'), href: link || href, style: linkStyles, children: children || text }) }));
+        return (jsx("li", { className: clsx(className, 'list__item', 'list__item_type_link', textStyleClass && `text text-style_${textStyleClass}`, textWeightClass && `text text-weight_${textWeightClass}`, textColorClass && `text-color_${textColorClass}`, fillClass && `fill_${fillClass}`), style: liStyles, children: jsx(Link, { className: clsx('list__item-link'), href: link || href, style: linkStyles, children: children || text }) }));
     }
-    return (jsxs("li", { className: clsx(className, 'list__item', textStyleClass && "text text-style_".concat(textStyleClass), textWeightClass && "text text-weight_".concat(textWeightClass), textColorClass && "text-color_".concat(textColorClass), fillClass && "fill_".concat(fillClass)), style: liStyles, children: [before, children || text, after] }));
+    return (jsxs("li", { className: clsx(className, 'list__item', textStyleClass && `text text-style_${textStyleClass}`, textWeightClass && `text text-weight_${textWeightClass}`, textColorClass && `text-color_${textColorClass}`, fillClass && `fill_${fillClass}`), style: liStyles, children: [before, children || text, after] }));
 }
 
 export { List, ListItem };

package/dist/components/Loader.js

@@ -1,8 +1,7 @@
-export { L as Loader, a as loaderAppearance, l as loaderConfig } from '../Loader_es_BUSqFrCd.js';
+export { L as Loader, a as loaderAppearance, l as loaderConfig } from '../Loader_es_CmSggwbR.js';
 import 'react/jsx-runtime';
 import 'clsx';
 import '../hooks/useAppearanceConfig/useAppearanceConfig.js';
-import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react';
 import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import 'lodash/camelCase';
@@ -19,4 +18,4 @@ import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
-import '../Text_es_CwV9rjFD.js';
+import '../Text_es_CnymlElo.js';

package/dist/components/Logo.js

@@ -4,8 +4,7 @@ import { urlWithAssetPrefix } from '../hoc/urlWithAssetPrefix.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { a as LinkWrapper } from '../Link_es_XiqbdwLp.js';
-import '../tslib.es6_es_Bwu1Cn-t.js';
+import { a as LinkWrapper } from '../Link_es_P2b6ya7P.js';
 import 'react';
 import '@itcase/common';
 import '../context/UrlAssetPrefix.js';
@@ -22,19 +21,19 @@ import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
 import 'lodash/maxBy';
 
-var logoConfig = {
+const logoConfig = {
     appearance: undefined,
-    setAppearance: function (appearanceConfig) {
+    setAppearance: (appearanceConfig) => {
         logoConfig.appearance = appearanceConfig;
     },
 };
-var Logo = urlWithAssetPrefix(function Logo(props) {
-    var className = props.className, appearance = props.appearance, href = props.href, link = props.link;
-    var appearanceConfig = useAppearanceConfig(appearance, logoConfig);
-    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, alignItemsClass = propsGenerator.alignItemsClass, src = propsGenerator.src, title = propsGenerator.title, alt = propsGenerator.alt, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
-    var logo = useStyles(props).styles;
-    return (jsx("div", { className: clsx(className, 'logo', alignClass && "align_".concat(alignClass), alignDirectionClass && "align_".concat(alignDirectionClass), alignItemsClass && "logo_align-items_".concat(alignItemsClass), sizeClass && "logo_size_".concat(sizeClass), widthClass && "width_".concat(widthClass)), style: logo, children: link || href ? (jsx(LinkWrapper, { className: "logo__link", href: link || href, children: jsx("img", { className: "logo__image", src: src, title: title || alt, alt: alt || title }) })) : (jsx("img", { className: "logo__image", src: src, title: title || alt, alt: alt || title })) }));
+const Logo = urlWithAssetPrefix(function Logo(props) {
+    const { className, appearance, href, link } = props;
+    const appearanceConfig = useAppearanceConfig(appearance, logoConfig);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { alignClass, alignDirectionClass, alignItemsClass, src, title, alt, sizeClass, widthClass, } = propsGenerator;
+    const { styles: logo } = useStyles(props);
+    return (jsx("div", { className: clsx(className, 'logo', alignClass && `align_${alignClass}`, alignDirectionClass && `align_${alignDirectionClass}`, alignItemsClass && `logo_align-items_${alignItemsClass}`, sizeClass && `logo_size_${sizeClass}`, widthClass && `width_${widthClass}`), style: logo, children: link || href ? (jsx(LinkWrapper, { className: "logo__link", href: link || href, children: jsx("img", { className: "logo__image", src: src, title: title || alt, alt: alt || title }) })) : (jsx("img", { className: "logo__image", src: src, title: title || alt, alt: alt || title })) }));
 });
 
 export { Logo, logoConfig };

package/dist/components/MenuItem.js

@@ -4,10 +4,9 @@ import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { I as Icon, T as Tooltip } from '../Icon_es_BrwLifge.js';
-import { L as Link } from '../Link_es_XiqbdwLp.js';
-import { T as Text } from '../Text_es_CwV9rjFD.js';
-import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
+import { I as Icon, T as Tooltip } from '../Icon_es_DkVkzTha.js';
+import { L as Link } from '../Link_es_P2b6ya7P.js';
+import { T as Text } from '../Text_es_CnymlElo.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
@@ -25,7 +24,7 @@ import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
 
-var menuItemAppearanceAccent = {
+const menuItemAppearanceAccent = {
     accentMutedPrimary: {
         fill: 'accentTertiary',
         fillHover: 'accentTertiaryHover',
@@ -52,7 +51,7 @@ var menuItemAppearanceAccent = {
     },
 };
 
-var menuItemAppearanceError = {
+const menuItemAppearanceError = {
     errorMutedPrimary: {
         fill: 'errorDisabled',
         labelTextColor: 'errorTextQuaternary',
@@ -71,7 +70,7 @@ var menuItemAppearanceError = {
     },
 };
 
-var menuItemAppearanceSize = {
+const menuItemAppearanceSize = {
     sizeXXL: {
         size: 'xxl',
         labelTextSize: 'l',
@@ -116,7 +115,7 @@ var menuItemAppearanceSize = {
     },
 };
 
-var menuItemAppearanceStyle = {
+const menuItemAppearanceStyle = {
     solid: {
         borderColor: 'none',
     },
@@ -130,7 +129,7 @@ var menuItemAppearanceStyle = {
     },
 };
 
-var menuItemAppearanceSurface = {
+const menuItemAppearanceSurface = {
     surfaceMutedPrimary: {
         fill: 'surfaceSecondary',
         fillActive: 'surfacePrimary',
@@ -174,43 +173,47 @@ var menuItemAppearanceSurface = {
     },
 };
 
-var menuItemAppearance = __assign(__assign(__assign(__assign(__assign({}, menuItemAppearanceSize), menuItemAppearanceStyle), menuItemAppearanceAccent), menuItemAppearanceError), menuItemAppearanceSurface);
+const menuItemAppearance = {
+    ...menuItemAppearanceSize,
+    ...menuItemAppearanceStyle,
+    ...menuItemAppearanceAccent,
+    ...menuItemAppearanceError,
+    ...menuItemAppearanceSurface,
+};
 
-var menuItemConfig = {
+const menuItemConfig = {
     appearance: menuItemAppearance,
-    setAppearance: function (appearanceConfig) {
+    setAppearance: (appearanceConfig) => {
         menuItemConfig.appearance = appearanceConfig;
     },
 };
 function MenuItem(props) {
-    var className = props.className, appearance = props.appearance, label = props.label, isDisabled = props.isDisabled, href = props.href, link = props.link, LinkComponent = props.LinkComponent, rel = props.rel, showTooltip = props.showTooltip, target = props.target, tooltipAppearance = props.tooltipAppearance, underline = props.underline, before = props.before, after = props.after, isActive = props.isActive, onClick = props.onClick, children = props.children;
-    var tooltipRef = useRef(null);
-    var onMouseEnter = useCallback(function () {
-        var _a;
+    const { className, appearance, label, isDisabled, href, link, LinkComponent, rel, showTooltip, target, tooltipAppearance, underline, before, after, isActive, onClick, children, } = props;
+    const tooltipRef = useRef(null);
+    const onMouseEnter = useCallback(() => {
         if (showTooltip) {
-            (_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.openTooltip();
+            tooltipRef.current?.openTooltip();
         }
     }, [showTooltip]);
-    var onMouseLeave = useCallback(function () {
-        var _a;
+    const onMouseLeave = useCallback(() => {
         if (showTooltip) {
-            (_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.closeTooltip();
+            tooltipRef.current?.closeTooltip();
         }
     }, [showTooltip]);
-    var appearanceConfig = useAppearanceConfig(appearance, menuItemConfig, isDisabled);
-    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var directionClass = propsGenerator.directionClass, justifyContentClass = propsGenerator.justifyContentClass, alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, labelStyle = propsGenerator.labelStyle, labelTextActiveColor = propsGenerator.labelTextActiveColor, labelTextActiveHoverColor = propsGenerator.labelTextActiveHoverColor, labelTextColor = propsGenerator.labelTextColor, labelTextColorDisabled = propsGenerator.labelTextColorDisabled, labelTextHoverColor = propsGenerator.labelTextHoverColor, labelTextSize = propsGenerator.labelTextSize, labelWeight = propsGenerator.labelWeight, labelWrap = propsGenerator.labelWrap, borderColorClass = propsGenerator.borderColorClass, iconAfter = propsGenerator.iconAfter, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillIcon = propsGenerator.iconAfterFillIcon, iconAfterFillSize = propsGenerator.iconAfterFillSize, iconAfterShape = propsGenerator.iconAfterShape, iconAfterSize = propsGenerator.iconAfterSize, iconAfterSrc = propsGenerator.iconAfterSrc, iconBadgeAppearance = propsGenerator.iconBadgeAppearance, iconBadgeShape = propsGenerator.iconBadgeShape, iconBadgeSize = propsGenerator.iconBadgeSize, iconBadgeTextColor = propsGenerator.iconBadgeTextColor, iconBadgeTextSize = propsGenerator.iconBadgeTextSize, iconBadgeValue = propsGenerator.iconBadgeValue, iconBefore = propsGenerator.iconBefore, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillIcon = propsGenerator.iconBeforeFillIcon, iconBeforeFillSize = propsGenerator.iconBeforeFillSize, iconBeforeShape = propsGenerator.iconBeforeShape, iconBeforeSize = propsGenerator.iconBeforeSize, iconBeforeSrc = propsGenerator.iconBeforeSrc, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass, tooltipFill = propsGenerator.tooltipFill, tooltipShapeStrength = propsGenerator.tooltipShapeStrength, tooltipText = propsGenerator.tooltipText, tooltipTextColor = propsGenerator.tooltipTextColor, tooltipTitleTextColor = propsGenerator.tooltipTitleTextColor, typeClass = propsGenerator.typeClass, widthClass = propsGenerator.widthClass, isSkeleton = propsGenerator.isSkeleton;
+    const appearanceConfig = useAppearanceConfig(appearance, menuItemConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { directionClass, justifyContentClass, alignClass, alignDirectionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, labelStyle, labelTextActiveColor, labelTextActiveHoverColor, labelTextColor, labelTextColorDisabled, labelTextHoverColor, labelTextSize, labelWeight, labelWrap, borderColorClass, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBadgeAppearance, iconBadgeShape, iconBadgeSize, iconBadgeTextColor, iconBadgeTextSize, iconBadgeValue, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, shapeClass, shapeStrengthClass, sizeClass, tooltipFill, tooltipShapeStrength, tooltipText, tooltipTextColor, tooltipTitleTextColor, typeClass, widthClass, isSkeleton, } = propsGenerator;
     // @ts-expect-error
-    var menuItem = useStyles(props).styles;
-    return (jsxs("div", { className: clsx('menu-item', isActive && 'menu-item_state_active', isDisabled && "menu-item_state_disabled", directionClass && "menu-item_direction_".concat(directionClass), className, (iconBefore || iconBeforeSrc || iconAfter || iconAfterSrc) &&
-            'menu-item_label-icon', sizeClass && "menu-item_size_".concat(sizeClass), borderColorClass && "border-color_".concat(borderColorClass), !isActive
-            ? fillClass && "fill_".concat(fillClass)
-            : fillActiveClass && "fill_active_".concat(fillActiveClass), !isActive
-            ? fillHoverClass && "fill_hover_".concat(fillHoverClass)
-            : fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass
-            ? "shape-strength_".concat(shapeStrengthClass)
-            : shapeClass === 'rounded' && 'shape-strength_default', typeClass && "menu-item_type_".concat(typeClass), widthClass && "width_".concat(widthClass), justifyContentClass &&
-            "menu-item_justify-content_".concat(justifyContentClass), isSkeleton && "menu-item_skeleton"), style: menuItem, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [jsxs(Link, { className: clsx('menu-item__wrapper', alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass)), href: link || href, LinkComponent: LinkComponent, rel: rel, target: target, underline: underline, children: [before, children || (jsxs(React.Fragment, { children: [(iconBefore || iconBeforeSrc) && (jsx(Icon, { className: clsx('menu-item__icon_before', iconBadgeValue && 'menu-item__icon_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'menu-item__icon_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), label && (jsx(Text, { className: "menu-item__label", size: labelTextSize, isDisabled: isDisabled, textColorDisabled: labelTextColorDisabled, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveHoverColor, textColorHover: labelTextHoverColor, textStyle: labelStyle, textWeight: labelWeight, textWrap: labelWrap, isActive: isActive, children: label })), (iconAfter || iconAfterSrc) && (jsx(Icon, { className: clsx('menu-item__icon_after', iconBadgeValue && 'menu-item__icon_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: "menu-item__icon_after_badge", badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] })), after] }), showTooltip && (jsx(Tooltip, { className: "menu-item__tooltip", ref: tooltipRef, appearance: tooltipAppearance, minWidth: "auto", fill: tooltipFill, left: "100%", zIndex: "100", titleTextColor: tooltipTitleTextColor, text: tooltipText, textColor: tooltipTextColor, centering: "vertical", shapeStrength: tooltipShapeStrength }))] }));
+    const { styles: menuItem } = useStyles(props);
+    return (jsxs("div", { className: clsx('menu-item', isActive && 'menu-item_state_active', isDisabled && `menu-item_state_disabled`, directionClass && `menu-item_direction_${directionClass}`, className, (iconBefore || iconBeforeSrc || iconAfter || iconAfterSrc) &&
+            'menu-item_label-icon', sizeClass && `menu-item_size_${sizeClass}`, borderColorClass && `border-color_${borderColorClass}`, !isActive
+            ? fillClass && `fill_${fillClass}`
+            : fillActiveClass && `fill_active_${fillActiveClass}`, !isActive
+            ? fillHoverClass && `fill_hover_${fillHoverClass}`
+            : fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass
+            ? `shape-strength_${shapeStrengthClass}`
+            : shapeClass === 'rounded' && 'shape-strength_default', typeClass && `menu-item_type_${typeClass}`, widthClass && `width_${widthClass}`, justifyContentClass &&
+            `menu-item_justify-content_${justifyContentClass}`, isSkeleton && `menu-item_skeleton`), style: menuItem, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [jsxs(Link, { className: clsx('menu-item__wrapper', alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`), href: link || href, LinkComponent: LinkComponent, rel: rel, target: target, underline: underline, children: [before, children || (jsxs(React.Fragment, { children: [(iconBefore || iconBeforeSrc) && (jsx(Icon, { className: clsx('menu-item__icon_before', iconBadgeValue && 'menu-item__icon_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'menu-item__icon_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), label && (jsx(Text, { className: "menu-item__label", size: labelTextSize, isDisabled: isDisabled, textColorDisabled: labelTextColorDisabled, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveHoverColor, textColorHover: labelTextHoverColor, textStyle: labelStyle, textWeight: labelWeight, textWrap: labelWrap, isActive: isActive, children: label })), (iconAfter || iconAfterSrc) && (jsx(Icon, { className: clsx('menu-item__icon_after', iconBadgeValue && 'menu-item__icon_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: "menu-item__icon_after_badge", badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] })), after] }), showTooltip && (jsx(Tooltip, { className: "menu-item__tooltip", ref: tooltipRef, appearance: tooltipAppearance, minWidth: "auto", fill: tooltipFill, left: "100%", zIndex: "100", titleTextColor: tooltipTitleTextColor, text: tooltipText, textColor: tooltipTextColor, centering: "vertical", shapeStrength: tooltipShapeStrength }))] }));
 }
 
 export { MenuItem, menuItemAppearance, menuItemConfig };