@itcase/ui 1.1.25 → 1.2.0

package/dist/{Title-zpOK2AxL.js → Title-BfSFPJtJ.js}

@@ -1,4 +1,4 @@
-import { j as jsxRuntimeExports } from './jsx-runtime-C2uP7l8s.js';
+import { jsxs } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import clsx from 'clsx';
 import { useUserDeviceContext } from './context/UIContext.js';
@@ -89,9 +89,9 @@ function Title(props) {
         }
         return size ? size : 'span';
     }, [isMobile, isTablet, isDesktop]);
-    return (jsxRuntimeExports.jsxs(Tag, { className: clsx(className, 'title', fillColorClass, svgFillClass, svgFillHoverClass, size && "title_size_".concat(size), mode && "title_mode_".concat(mode), directionClass, 'text', textColorClass ||
+    return (jsxs(Tag, { className: clsx(className, 'title', fillColorClass, svgFillClass, svgFillHoverClass, size && "title_size_".concat(size), mode && "title_mode_".concat(mode), directionClass, 'text', 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: [before, jsxRuntimeExports.jsxs("span", { className: clsx(textAlignClass, directionWrapperClass, 'title__wrapper', textTruncateClass), style: titleWrapperStyles, children: [beforeWrapper, children || text, afterWrapper] }), after] }));
+                "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, jsxs("span", { className: clsx(textAlignClass, directionWrapperClass, 'title__wrapper', textTruncateClass), style: titleWrapperStyles, children: [beforeWrapper, children || text, afterWrapper] }), after] }));
 }
 Title.defaultProps = {
     size: 'h3',

package/dist/{cjs/Title-Ckp30YSI.js → Title-zwP6c2U2.js}

@@ -1,15 +1,11 @@
 'use strict';
 
-var jsxRuntime = require('./jsx-runtime-BBxmckJR.js');
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var UIContext = require('./context/UIContext.js');
-var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
-var useStyles = require('./hooks/useStyles.js');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+var UIContext = require('./cjs/context/UIContext.js');
+var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
+var useStyles = require('./cjs/hooks/useStyles.js');
 
 var titleConfig = {
     appearance: undefined,
@@ -95,9 +91,9 @@ function Title(props) {
         }
         return size ? size : 'span';
     }, [isMobile, isTablet, isDesktop]);
-    return (jsxRuntime.jsxRuntimeExports.jsxs(Tag, { className: clsx__default.default(className, 'title', fillColorClass, svgFillClass, svgFillHoverClass, size && "title_size_".concat(size), mode && "title_mode_".concat(mode), directionClass, 'text', textColorClass ||
+    return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'title', fillColorClass, svgFillClass, svgFillHoverClass, size && "title_size_".concat(size), mode && "title_mode_".concat(mode), directionClass, 'text', 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: [before, jsxRuntime.jsxRuntimeExports.jsxs("span", { className: clsx__default.default(textAlignClass, directionWrapperClass, 'title__wrapper', textTruncateClass), style: titleWrapperStyles, children: [beforeWrapper, children || text, afterWrapper] }), after] }));
+                "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, jsxRuntime.jsxs("span", { className: clsx(textAlignClass, directionWrapperClass, 'title__wrapper', textTruncateClass), style: titleWrapperStyles, children: [beforeWrapper, children || text, afterWrapper] }), after] }));
 }
 Title.defaultProps = {
     size: 'h3',

package/dist/{Tooltip-IVq3_vb4.js → Tooltip-DJufHBiQ.js}

@@ -1,10 +1,10 @@
-import { j as jsxRuntimeExports } from './jsx-runtime-C2uP7l8s.js';
-import React__default, { useRef, useState, useCallback, useImperativeHandle } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { 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-Dz-KPI5I.js';
-import { T as Title } from './Title-zpOK2AxL.js';
+import { T as Text } from './Text-CG3xPG27.js';
+import { T as Title } from './Title-BfSFPJtJ.js';
 
 var tooltipConfig = {
     appearance: undefined,
@@ -12,7 +12,7 @@ var tooltipConfig = {
         tooltipConfig.appearance = newComponent;
     },
 };
-var Tooltip = React__default.forwardRef(function Tooltip(props, ref) {
+var Tooltip = React.forwardRef(function Tooltip(props, ref) {
     var before = props.before, after = props.after, appearance = props.appearance, children = props.children, className = props.className, text = props.text, title = props.title, type = props.type, set = props.set, arrowPosition = props.arrowPosition, titleTextColor = props.titleTextColor, titleSize = props.titleSize, textColor = props.textColor, textSize = props.textSize, initialIsVisible = props.initialIsVisible;
     var tooltipTimeoutHideRef = useRef(null);
     var tooltipTimeoutShowRef = useRef(null);
@@ -97,9 +97,9 @@ var Tooltip = React__default.forwardRef(function Tooltip(props, ref) {
     // @ts-expect-error
     var tooltipStyles = useStyles(props).styles;
     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 ||
+    return (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] }));
+                "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, jsxs("div", { className: "tooltip__inner", children: [title && (jsx(Title, { className: "tooltip__title", size: titleSize, textColor: titleTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextColor), children: title })), text && (jsx(Text, { className: "tooltip__text", size: textSize, textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), children: text })), children] }), after] }));
 });
 Tooltip.defaultProps = {
     initialIsVisible: null,

package/dist/{cjs/Tooltip-DREz-tP6.js → Tooltip-DkTKx9n-.js}

@@ -1,17 +1,12 @@
 'use strict';
 
-var jsxRuntime = require('./jsx-runtime-BBxmckJR.js');
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
-var useStyles = require('./hooks/useStyles.js');
-var Text = require('./Text-B0SULA92.js');
-var Title = require('./Title-Ckp30YSI.js');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
+var useStyles = require('./cjs/hooks/useStyles.js');
+var Text = require('./Text-_YhyTsQ1.js');
+var Title = require('./Title-zwP6c2U2.js');
 
 var tooltipConfig = {
     appearance: undefined,
@@ -19,7 +14,7 @@ var tooltipConfig = {
         tooltipConfig.appearance = newComponent;
     },
 };
-var Tooltip = React__default.default.forwardRef(function Tooltip(props, ref) {
+var Tooltip = React.forwardRef(function Tooltip(props, ref) {
     var before = props.before, after = props.after, appearance = props.appearance, children = props.children, className = props.className, text = props.text, title = props.title, type = props.type, set = props.set, arrowPosition = props.arrowPosition, titleTextColor = props.titleTextColor, titleSize = props.titleSize, textColor = props.textColor, textSize = props.textSize, initialIsVisible = props.initialIsVisible;
     var tooltipTimeoutHideRef = React.useRef(null);
     var tooltipTimeoutShowRef = React.useRef(null);
@@ -104,9 +99,9 @@ var Tooltip = React__default.default.forwardRef(function Tooltip(props, ref) {
     // @ts-expect-error
     var tooltipStyles = useStyles.useStyles(props).styles;
     var appearanceConfig = appearance && tooltipConfig.appearance && tooltipConfig.appearance[appearance];
-    return (jsxRuntime.jsxRuntimeExports.jsxs("div", { className: clsx__default.default(className, 'tooltip', isTooltipVisible === true && 'tooltip_state_open', isTooltipVisible === false && 'tooltip_state_close', fillClass ||
+    return (jsxRuntime.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, jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "tooltip__inner", children: [title && (jsxRuntime.jsxRuntimeExports.jsx(Title.Title, { className: "tooltip__title", size: titleSize, textColor: titleTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextColor), children: title })), text && (jsxRuntime.jsxRuntimeExports.jsx(Text.Text, { className: "tooltip__text", size: textSize, textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), children: text })), children] }), after] }));
+                "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, jsxRuntime.jsxs("div", { className: "tooltip__inner", children: [title && (jsxRuntime.jsx(Title.Title, { className: "tooltip__title", size: titleSize, textColor: titleTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextColor), children: title })), text && (jsxRuntime.jsx(Text.Text, { className: "tooltip__text", size: textSize, textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), children: text })), children] }), after] }));
 });
 Tooltip.defaultProps = {
     initialIsVisible: null,

package/dist/cjs/components/Accordion.js

@@ -1,29 +1,192 @@
 'use strict';
 
-var Accordion = require('../Accordion-Ba4Use_H.js');
-require('../_tslib-CKiUdo7p.js');
-require('../jsx-runtime-BBxmckJR.js');
-require('react');
-require('clsx');
-require('lodash/castArray');
-require('../hooks/useDeviceTargetClass.js');
+var tslib_es6 = require('../../tslib.es6-CKiUdo7p.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+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-Co5Mtpt_.js');
+var Text = require('../../Text-_YhyTsQ1.js');
 require('lodash/camelCase');
 require('../context/UIContext.js');
 require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
-require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../Icon-C7ZJyN5o.js');
 require('react-inlinesvg');
-require('../Link-DRV1vzHd.js');
-require('../Tooltip-DREz-tP6.js');
-require('../Text-B0SULA92.js');
-require('../Title-Ckp30YSI.js');
+require('../../Link-DQxoFKhI.js');
+require('../../Tooltip-DkTKx9n-.js');
+require('../../Title-zwP6c2U2.js');
 
+var ChevronDown16 = function ChevronDown16(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    d: "M8 11C8.23051 11 8.42712 10.9233 8.60339 10.764L13.7763 6.16224C13.9254 6.03835 14 5.87316 14 5.68437C14 5.30088 13.661 5 13.2136 5C12.9966 5 12.8 5.0767 12.6508 5.20649L8 9.35398L3.34915 5.20649C3.19322 5.0767 2.99661 5 2.77966 5C2.33898 5 2 5.30089 2 5.68437C2 5.87316 2.07458 6.03835 2.22373 6.16224L7.39661 10.764C7.57288 10.9233 7.76949 10.9941 8 11Z"
+  }));
+};
+ChevronDown16.defaultProps = {
+  width: "16",
+  height: "16",
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  stroke: "none"
+};
+var ChevronTop16 = function ChevronTop16(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    d: "M8 5C7.76949 5 7.57288 5.0767 7.39661 5.23599L2.22373 9.83776C2.07458 9.96165 2 10.1268 2 10.3156C2 10.6991 2.33898 11 2.78644 11C3.00339 11 3.2 10.9233 3.34915 10.7935L8 6.64602L12.6508 10.7935C12.8068 10.9233 13.0034 11 13.2203 11C13.661 11 14 10.6991 14 10.3156C14 10.1268 13.9254 9.96165 13.7763 9.83776L8.60339 5.23599C8.42712 5.0767 8.23051 5.0059 8 5Z"
+  }));
+};
+ChevronTop16.defaultProps = {
+  width: "16",
+  height: "16",
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  stroke: "none"
+};
+const icon16 = {
+  ChevronDown: ChevronDown16,
+  ChevronTop: ChevronTop16
+};
 
+function AccordionItem(props) {
+    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,
+            isExpanded: !isExpanded,
+            content: content,
+            title: title,
+        };
+        onClick && onClick(thisItemData);
+    }, [id, title, content, isExpanded, onClick]);
+    var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var contentBorderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'contentBorderColor',
+    });
+    var titleBorderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'titleBorderColor',
+    });
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    var contentFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'contentFill',
+    });
+    var titleFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'titleFill',
+    });
+    var titleFillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'titleFillHover',
+    });
+    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'accordion-item_shape_',
+        propsKey: 'shape',
+    });
+    // @ts-expect-error
+    var styles = useStyles.useStyles(props).styles;
+    return (jsxRuntime.jsxs("div", { style: styles, className: clsx('accordion-item', className, borderColorClass, fillClass, fillHoverClass, shapeClass, size && "accordion-item_size_".concat(size), isExpanded && 'accordion-item_state_open'), children: [jsxRuntime.jsx(Text.Text, { size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, className: clsx('accordion-item__title', titleBorderColorClass, titleFillClass, titleFillHoverClass, 'cursor_type_pointer'), onClick: onClickTitle, children: title }), jsxRuntime.jsx("div", { className: clsx('accordion-item__icon', 'cursor_type_pointer'), onClick: onClickTitle, children: icon || jsxRuntime.jsx(Icon.Icon, { SvgImage: icon16.ChevronDown, iconFill: iconFill, size: "16" }) }), beforeContent && beforeContent, isExpanded && (jsxRuntime.jsx("div", { className: clsx('accordion-item__content', contentBorderColorClass, contentFillClass, fillHoverClass), children: children ||
+                    (content && (jsxRuntime.jsx(Text.Text, { size: contentTextSize, textColor: contentTextColor, textWeight: contentTextWeight, children: content }))) })), afterContent && afterContent] }));
+}
+AccordionItem.defaultProps = {
+    iconFill: 'surfaceItemAccent',
+};
 
-exports.Accordion = Accordion.Accordion;
-exports.AccordionItem = Accordion.AccordionItem;
+function Accordion(props) {
+    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(initial)), expandedItems = _b[0], setExpandedItems = _b[1];
+    var onClickAccordionItem = React.useCallback(function (targetItem) {
+        setExpandedItems(function (prevState) {
+            var isExpanded = prevState.find(function (id) { return id === targetItem.id; });
+            if (isMultiple) {
+                if (isExpanded) {
+                    // ... without target id
+                    return prevState.filter(function (id) { return id !== targetItem.id; });
+                }
+                else {
+                    // ... with target id
+                    return tslib_es6.__spreadArray(tslib_es6.__spreadArray([], prevState, true), [targetItem.id], false);
+                }
+            }
+            else {
+                if (isExpanded) {
+                    return [];
+                }
+                else {
+                    return [targetItem.id];
+                }
+            }
+        });
+        onClickItem && onClickItem(targetItem);
+    }, [isMultiple, onClickItem]);
+    var accordionItemsList = React.useMemo(function () {
+        if (items) {
+            return items.map(function (item, i) { return (jsxRuntime.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.Children.toArray(children).map(function (child) {
+                if (React.isValidElement(child)) {
+                    var childID = child.props.id || child.key;
+                    return React.cloneElement(child, {
+                        id: childID,
+                        isExpanded: expandedItems.includes(childID),
+                        onClick: onClickAccordionItem,
+                    });
+                }
+                return child;
+            });
+        }
+        return [];
+    }, [children, items, expandedItems, onClickAccordionItem]);
+    var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'accordion_direction_',
+        propsKey: 'direction',
+    });
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'accordion_shape_',
+        propsKey: 'shape',
+    });
+    var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    /*
+     * paddingHorizontalWrapper="16px"
+     * paddingHorizontal - styles  (horizontal will be parsed to left/right)
+     * wrapper - target
+     */
+    // @ts-expect-error
+    var _c = useStyles.useStyles(props), accordionStyles = _c.styles, accordionWrapperStyles = _c.wrapper;
+    return (jsxRuntime.jsx("div", { style: accordionStyles, className: clsx(className, 'accordion', borderColorClass, directionClass, fillClass, shapeClass, widthClass), children: jsxRuntime.jsx("div", { className: "accordion__wrapper", style: accordionWrapperStyles, children: accordionItemsList }) }));
+}
+Accordion.defaultProps = {
+    initial: [],
+};
+
+exports.Accordion = Accordion;
+exports.AccordionItem = AccordionItem;

package/dist/cjs/components/Avatar.js

@@ -1,29 +1,48 @@
 'use strict';
 
-var Avatar = require('../Avatar-BKK80aBG.js');
-require('../jsx-runtime-BBxmckJR.js');
-require('react');
-require('clsx');
-require('../hooks/useDeviceTargetClass.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var Icon = require('../../Icon-Co5Mtpt_.js');
+var Image = require('../../Image-DrUlRMHa.js');
+var Text = require('../../Text-_YhyTsQ1.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
 require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
-require('../Icon-C7ZJyN5o.js');
-require('../_tslib-CKiUdo7p.js');
+require('../../tslib.es6-CKiUdo7p.js');
 require('react-inlinesvg');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../Link-DRV1vzHd.js');
-require('../Tooltip-DREz-tP6.js');
-require('../Text-B0SULA92.js');
-require('../Title-Ckp30YSI.js');
-require('../Image-CCx6QWZj.js');
+require('../../Link-DQxoFKhI.js');
+require('../../Tooltip-DkTKx9n-.js');
+require('../../Title-zwP6c2U2.js');
 
+function Avatar(props) {
+    var className = props.className, Dot = props.Dot, icon = props.icon, _a = props.size, size = _a === void 0 ? '96' : _a, after = props.after, before = props.before, src = props.src, type = props.type, mode = props.mode, onClick = props.onClick, _b = props.textSize, textSize = _b === void 0 ? 'l' : _b, _c = props.textColor, textColor = _c === void 0 ? 'surfaceTextTertiary' : _c, _d = props.textWeight, textWeight = _d === void 0 ? '600' : _d, iconSrc = props.iconSrc, iconItemFill = props.iconItemFill, iconShape = props.iconShape, iconSize = props.iconSize, iconFill = props.iconFill, iconFillHover = props.iconFillHover, iconFillSize = props.iconFillSize, _e = props.firstName, firstName = _e === void 0 ? '' : _e, _f = props.secondName, secondName = _f === void 0 ? '' : _f;
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'avatar_shape_',
+        propsKey: 'shape',
+    });
+    var avatarChars = React.useMemo(function () {
+        var firstChar = ((firstName === null || firstName === void 0 ? void 0 : firstName[0]) || '').toUpperCase();
+        var secondChar = ((secondName === null || secondName === void 0 ? void 0 : secondName[0]) || '').toUpperCase();
+        return "".concat(firstChar).concat(secondChar);
+    }, [firstName, secondName]);
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'avatar', shapeClass, mode && "avatar_mode_".concat(mode), size && "avatar_size_".concat(size), type && "avatar_type_".concat(type), Dot && 'avatar_status', onClick && 'cursor_type_pointer'), onClick: onClick, children: jsxRuntime.jsxs("div", { className: clsx('avatar__wrapper', fillClass, fillHoverClass), children: [before, src ? (jsxRuntime.jsx(Image.Image, { className: "avatar__image", shape: "geometric", src: src })) : (jsxRuntime.jsx(Text.Text, { className: "avatar__name", size: textSize, textColor: textColor, textWeight: textWeight, children: avatarChars })), (icon || iconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "avatar__icon", fill: iconFill, fillHover: iconFillHover, fillSize: iconFillSize, iconFill: iconItemFill, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), Dot, after] }) }));
+}
 
-
-exports.Avatar = Avatar.Avatar;
+exports.Avatar = Avatar;

package/dist/cjs/components/Badge.js

@@ -1,10 +1,10 @@
 'use strict';
 
-var Badge = require('../Badge-C_bYrtVY.js');
-require('../jsx-runtime-BBxmckJR.js');
-require('react');
+var Badge = require('../../Badge-2JkquAEb.js');
+require('react/jsx-runtime');
 require('clsx');
 require('../hooks/useDeviceTargetClass.js');
+require('react');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
@@ -15,7 +15,7 @@ require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../Text-B0SULA92.js');
+require('../../Text-_YhyTsQ1.js');
 
 
 

package/dist/cjs/components/Breadcrumbs.js

@@ -1,29 +1,102 @@
 'use strict';
 
-var Breadcrumbs = require('../Breadcrumbs-B7F96CYT.js');
-require('../_tslib-CKiUdo7p.js');
-require('../jsx-runtime-BBxmckJR.js');
-require('react');
-require('clsx');
-require('lodash/camelCase');
-require('../hooks/useDeviceTargetClass.js');
+var tslib_es6 = require('../../tslib.es6-CKiUdo7p.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+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-Co5Mtpt_.js');
+var Link = require('../../Link-DQxoFKhI.js');
+var Text = require('../../Text-_YhyTsQ1.js');
 require('lodash/castArray');
 require('../context/UIContext.js');
 require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
-require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../Icon-C7ZJyN5o.js');
 require('react-inlinesvg');
-require('../Link-DRV1vzHd.js');
-require('../Tooltip-DREz-tP6.js');
-require('../Text-B0SULA92.js');
-require('../Title-Ckp30YSI.js');
+require('../../Tooltip-DkTKx9n-.js');
+require('../../Title-zwP6c2U2.js');
 
+function BreadcrumbsItem(props) {
+    var children = props.children, className = props.className, cursor = props.cursor, _a = props.set, set = _a === void 0 ? 'default' : _a, text = props.text, textSize = props.textSize, textColor = props.textColor, textColorHover = props.textColorHover, href = props.href, iconAfter = props.iconAfter, iconAfterSize = props.iconAfterSize, iconAfterBgFill = props.iconAfterBgFill, iconAfterFill = props.iconAfterFill, onClick = props.onClick;
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'breadcrumbs__item_shape_',
+        propsKey: 'shape',
+    });
+    var positionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'position_',
+        propsKey: 'position',
+    });
+    var underlineClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'text-decoration_',
+        propsKey: 'underline',
+    });
+    // @ts-expect-error
+    var itemStyles = useStyles.useStyles(props).styles;
+    return (jsxRuntime.jsxs(Link.LinkWrapper, { className: clsx(className, 'breadcrumbs__item', set && "breadcrumbs__item_set_".concat(set), fillClass, positionClass, shapeClass, underlineClass, onClick && (cursor || 'cursor_type_pointer')), DefaultComponent: "div", href: href, style: itemStyles, onClick: onClick, children: [jsxRuntime.jsx(Text.Text, { className: "breadcrumbs__item-text", size: textSize, textColor: textColor, textColorHover: textColorHover, children: text || children }), iconAfter && (jsxRuntime.jsx(Icon.Icon, { bgFill: iconAfterBgFill, className: "breadcrumbs__item-icon", fill: iconAfterFill, size: iconAfterSize, SvgImage: iconAfter }))] }));
+}
+BreadcrumbsItem.defaultProps = {
+    set: 'default',
+};
 
+function Breadcrumbs(props) {
+    var breadcrumbsList = props.breadcrumbsList, children = props.children, className = props.className, iconAfterSize = props.iconAfterSize, iconAfterBgFill = props.iconAfterBgFill, iconAfterFill = props.iconAfterFill, itemUnderline = props.itemUnderline, itemTextColor = props.itemTextColor, itemTextColorHover = props.itemTextColorHover, set = props.set, otherProps = tslib_es6.__rest(props, ["breadcrumbsList", "children", "className", "iconAfterSize", "iconAfterBgFill", "iconAfterFill", "itemUnderline", "itemTextColor", "itemTextColorHover", "set"]);
+    var breadcrumbsItemsList = React.useMemo(function () {
+        if (breadcrumbsList) {
+            var itemProps_1 = Object.entries(otherProps).reduce(function (collectedProps, _a) {
+                var key = _a[0], value = _a[1];
+                if (key.startsWith('item')) {
+                    var propKey = camelCase(key.replace('item', ''));
+                    // @ts-expect-error
+                    collectedProps[propKey] = value;
+                }
+                return collectedProps;
+            }, {});
+            return breadcrumbsList.map(function (item, i) { return (jsxRuntime.jsx(BreadcrumbsItem, tslib_es6.__assign({ set: i + 1 !== breadcrumbsList.length ? 'default' : 'current', 
+                // @ts-expect-error
+                iconAfter: i + 1 !== breadcrumbsList.length ? itemProps_1.iconAfter : null, iconAfterSize: iconAfterSize, iconAfterBgFill: iconAfterBgFill, iconAfterFill: iconAfterFill, text: item.text, textColor: itemTextColor, textColorHover: itemTextColorHover, underline: itemUnderline, href: item.href }, itemProps_1), "breadcrumbsItem_".concat(item.id || item.text))); });
+        }
+        if (children) {
+            return children;
+        }
+        return [];
+    }, [children, breadcrumbsList, otherProps]);
+    var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'direction_',
+        propsKey: 'direction',
+    });
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'breadcrumbs_shape_',
+        propsKey: 'shape',
+    });
+    var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    var positionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'position_',
+        propsKey: 'position',
+    });
+    // @ts-expect-error
+    var breadcrumbsStyles = useStyles.useStyles(props).styles;
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'breadcrumbs', widthClass, directionClass, fillClass, positionClass, shapeClass, set && "breadcrumbs_set_".concat(set)), style: breadcrumbsStyles, children: breadcrumbsItemsList }));
+}
+Breadcrumbs.defaultProps = {
+    direction: 'horizontal',
+};
 
-exports.Breadcrumbs = Breadcrumbs.Breadcrumbs;
-exports.BreadcrumbsItem = Breadcrumbs.BreadcrumbsItem;
+exports.Breadcrumbs = Breadcrumbs;
+exports.BreadcrumbsItem = BreadcrumbsItem;

package/dist/cjs/components/Button.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var Button = require('../Button-DH5f_2bV.js');
-require('../jsx-runtime-BBxmckJR.js');
+var Button = require('../../Button-DvDXesom.js');
+require('react/jsx-runtime');
 require('react');
 require('clsx');
 require('../hooks/useDeviceTargetClass.js');
@@ -15,14 +15,14 @@ require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../Icon-C7ZJyN5o.js');
-require('../_tslib-CKiUdo7p.js');
+require('../../Icon-Co5Mtpt_.js');
+require('../../tslib.es6-CKiUdo7p.js');
 require('react-inlinesvg');
-require('../Link-DRV1vzHd.js');
-require('../Tooltip-DREz-tP6.js');
-require('../Text-B0SULA92.js');
-require('../Title-Ckp30YSI.js');
-require('../Loader-C2D6fJk1.js');
+require('../../Link-DQxoFKhI.js');
+require('../../Tooltip-DkTKx9n-.js');
+require('../../Text-_YhyTsQ1.js');
+require('../../Title-zwP6c2U2.js');
+require('../../Loader-fA11tUEJ.js');
 
 
 

package/dist/cjs/components/Caption.js

@@ -1,21 +1,37 @@
 'use strict';
 
-var Caption = require('../Caption-f-OM1D-G.js');
-require('../jsx-runtime-BBxmckJR.js');
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var useStyles = require('../hooks/useStyles.js');
 require('react');
-require('clsx');
-require('../hooks/useDeviceTargetClass.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
 require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
-require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 
+function Caption(props) {
+    var children = props.children, className = props.className;
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillGradientClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill-gradient_',
+        propsKey: 'fillGradient',
+    });
+    var positionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'caption_position_',
+        propsKey: 'position',
+    });
+    // @ts-expect-error
+    var captionStyles = useStyles.useStyles(props).styles;
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'caption', positionClass, fillClass, fillGradientClass), style: captionStyles, children: children }));
+}
 
-
-exports.Caption = Caption.Caption;
+exports.Caption = Caption;