@itcase/ui 1.1.25 → 1.2.1

package/dist/cjs/components/SiteMenu.js

@@ -1,29 +1,75 @@
 'use strict';
 
-var SiteMenuButton = require('../SiteMenuButton-CC0QccWu.js');
-require('../jsx-runtime-BBxmckJR.js');
-require('react');
-require('clsx');
-require('../context/UIContext.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 Icon = require('../../Icon-Co5Mtpt_.js');
+var Text = require('../../Text-_YhyTsQ1.js');
 require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
-require('../hooks/useDeviceTargetClass.js');
 require('lodash/castArray');
 require('lodash/camelCase');
-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('../../Link-DQxoFKhI.js');
+require('../../Tooltip-DkTKx9n-.js');
+require('../../Title-zwP6c2U2.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;
+    var _a = UIContext.useSiteMenuContext(), isSiteMenuOpen = _a.isSiteMenuOpen, setIsSiteMenuOpen = _a.setIsSiteMenuOpen;
+    var onClickClose = React.useCallback(
+    // @ts-expect-error
+    function (event) {
+        // @ts-expect-error
+        setIsSiteMenuOpen(false);
+        // @ts-expect-error
+        onClose && onClose(event);
+    }, [onClose]);
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    // TODO: dont delete!
+    // const onClickHeaderLink = useCallback((event) => {
+    //   // simulate a click on a link
+    //   event.stopPropagation()
+    //   event.preventDefault()
+    //   // save anchor in history
+    //   history.pushState(
+    //     location.href,
+    //     event.target.getAttribute('href'),
+    //     `${location.origin}/${event.target.getAttribute('href')}`
+    //   )
+    //   // scroll to anchor
+    //   document.querySelector(event.target.getAttribute('href')).scrollIntoView({
+    //     behavior: 'smooth',
+    //   })
+    // }, [])
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'site-menu', fillClass, isSiteMenuOpen && 'site-menu_state_visible', !isSiteMenuOpen && 'site-menu_state_hidden'), children: jsxRuntime.jsxs("div", { className: "site-menu__wrapper", children: [jsxRuntime.jsx("div", { className: "site-menu__close", children: iconClose ? (jsxRuntime.jsx(Icon.Icon, { fill: iconCloseFill, size: iconCloseSize, bgFill: iconCloseBgFill, SvgImage: iconClose, onClick: onClickClose })) : (jsxRuntime.jsx(Text.Text, { size: closeTextSize, textColor: closeTextColor, textColorHover: closeTextColorHover, 
+                        // @ts-expect-error
+                        onClick: onClickClose, children: closeText })) }), jsxRuntime.jsx("div", { className: "site-menu__items", children: children })] }) }));
+}
 
+function SiteMenuButton(props) {
+    var children = props.children, className = props.className, text = props.text, onClick = props.onClick;
+    var setIsSiteMenuOpen = UIContext.useSiteMenuContext().setIsSiteMenuOpen;
+    // @ts-expect-error
+    var onClickButton = React.useCallback(function (event) {
+        // @ts-expect-error
+        setIsSiteMenuOpen(true);
+        // @ts-expect-error
+        onClick && onClick(event);
+    }, []);
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'site-menu__button'), onClick: onClickButton, children: children || text }));
+}
 
-exports.SiteMenu = SiteMenuButton.SiteMenu;
-exports.SiteMenuButton = SiteMenuButton.SiteMenuButton;
+exports.SiteMenu = SiteMenu;
+exports.SiteMenuButton = SiteMenuButton;

package/dist/cjs/components/Swiper.js

@@ -1,22 +1,94 @@
 'use strict';
 
-var Swiper = require('../Swiper-Zh5xaPu3.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 react = require('swiper/react');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var useStyles = require('../hooks/useStyles.js');
+var Title = require('../../Title-zwP6c2U2.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');
-require('../Title-Ckp30YSI.js');
 
+function Swiper(props) {
+    var activeSlideIndex = props.activeSlideIndex, autoHeight = props.autoHeight, breakpoints = props.breakpoints, children = props.children, className = props.className, direction = props.direction, allowTouchMove = props.allowTouchMove, swiperSlideClass = props.swiperSlideClass, preventClicks = props.preventClicks, preventClicksPropagation = props.preventClicksPropagation, simulateTouch = props.simulateTouch, forwardedRef = props.forwardedRef, // https://github.com/vercel/next.js/issues/4957
+    freeMode = props.freeMode, id = props.id, isChangeOnClickSlide = props.isChangeOnClickSlide, isInit = props.isInit, _a = props.isNavigation, isNavigation = _a === void 0 ? false : _a, pagination = props.pagination, isScrollbar = props.isScrollbar, items = props.items, keyboard = props.keyboard, loop = props.loop, modules = props.modules, mousewheel = props.mousewheel, nextButton = props.nextButton, normalizeSlideIndex = props.normalizeSlideIndex, prevButton = props.prevButton, set = props.set, setNextBtnDisabled = props.setNextBtnDisabled, setPrevBtnDisabled = props.setPrevBtnDisabled, slidesPerView = props.slidesPerView, spaceBetween = props.spaceBetween, speed = props.speed, swiperClass = props.swiperClass, title = props.title, titleSize = props.titleSize, titleTextColor = props.titleTextColor, titleWeight = props.titleWeight, titleAfter = props.titleAfter, onSlideNextTransitionEnd = props.onSlideNextTransitionEnd, onSlidePrevTransitionEnd = props.onSlidePrevTransitionEnd, onSwiper = props.onSwiper, onUpdate = props.onUpdate;
+    var swiperRef = React.useRef(null);
+    var _b = useSwiperRef(), nextEl = _b[0], nextRef = _b[1];
+    var _c = useSwiperRef(), prevEl = _c[0], prevRef = _c[1];
+    var isLoop = loop !== null && loop !== void 0 ? loop : true;
+    // @ts-expect-error
+    React.useImperativeHandle(forwardedRef, function () { return swiperRef.current; }, []);
+    var onInitSwiper = React.useCallback(function (swiper) {
+        // swiper.touchEventsData.formElements = 'undefined'
+        // Set "disabled" state to navigation buttons on init
+        if (!isLoop && setPrevBtnDisabled && setNextBtnDisabled) {
+            setPrevBtnDisabled(swiper.isBeginning);
+            setNextBtnDisabled(swiper.isEnd);
+        }
+    }, [isLoop, setPrevBtnDisabled, setNextBtnDisabled]);
+    var onSlideChange = React.useCallback(function (swiper) {
+        // Some things with clickedIndex
+        if (isChangeOnClickSlide) {
+            swiper.activeIndex = activeSlideIndex || swiper.clickedIndex;
+        }
+    }, [isChangeOnClickSlide, activeSlideIndex]);
+    var onTransitionStart = React.useCallback(function (swiper) {
+        // Set "disabled" state to navigation buttons, when slider move
+        if (!isLoop && setPrevBtnDisabled && setNextBtnDisabled) {
+            setPrevBtnDisabled(swiper.isBeginning);
+            setNextBtnDisabled(swiper.isEnd);
+        }
+    }, [isLoop, setPrevBtnDisabled, setNextBtnDisabled]);
+    React.useEffect(function () {
+        var _a;
+        var swiperInstance = (_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper;
+        // @ts-expect-error
+        swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.updateActiveIndex(activeSlideIndex);
+        swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.updateSlidesClasses();
+    }, [activeSlideIndex]);
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'swiper_shape_',
+        propsKey: 'shape',
+    });
+    var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'alignDirection',
+    });
+    var alignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'align',
+    });
+    // @ts-expect-error
+    var style = useStyles.useStyles(props).styles;
+    return (jsxRuntime.jsxs("div", { className: clsx('swiper-block', slidesPerView === 'auto' && 'swiper-block_type_auto', fillClass, shapeClass, className, set && "swiper-block_set_".concat(set)), style: style, id: id, children: [(title || (prevButton && nextButton)) && (jsxRuntime.jsxs("div", { className: "swiper-block__wrapper", children: [title && (jsxRuntime.jsx(Title.Title, { className: "swiper-block__title", size: titleSize, textColor: titleTextColor, textWeight: titleWeight, children: title })), titleAfter, prevButton && nextButton && (jsxRuntime.jsxs("div", { className: "swiper-block__navigation", children: [jsxRuntime.jsx("div", { className: "swiper-block__prev swiper-button", ref: prevRef, children: prevButton }), jsxRuntime.jsx("div", { className: "swiper-block__next swiper-button", ref: nextRef, children: nextButton })] }))] })), jsxRuntime.jsx(react.Swiper, { autoHeight: autoHeight !== null && autoHeight !== void 0 ? autoHeight : false, breakpoints: breakpoints, allowTouchMove: allowTouchMove, centeredSlides: true, className: clsx('swiper-block__swiper', swiperClass), direction: direction, freeMode: freeMode, init: isInit !== null && isInit !== void 0 ? isInit : true, keyboard: keyboard, loop: isLoop, modules: modules, mousewheel: mousewheel, navigation: isNavigation ? { prevEl: prevEl, nextEl: nextEl } : false, normalizeSlideIndex: normalizeSlideIndex, onInit: onInitSwiper, onSlideChange: onSlideChange, onSlideNextTransitionEnd: onSlideNextTransitionEnd, onSlidePrevTransitionEnd: onSlidePrevTransitionEnd, onSwiper: onSwiper, onTransitionStart: onTransitionStart, onUpdate: onUpdate, pagination: pagination, preventClicks: preventClicks, preventClicksPropagation: preventClicksPropagation, ref: swiperRef, scrollbar: isScrollbar, simulateTouch: simulateTouch, slidesPerView: slidesPerView, spaceBetween: spaceBetween, speed: speed !== null && speed !== void 0 ? speed : 500, children: children ||
+                    (items === null || items === void 0 ? void 0 : items.map(function (item, i) { return (jsxRuntime.jsx(react.SwiperSlide, { className: clsx('swiper-block__item', swiperSlideClass, alignDirectionClass, alignClass), children: item }, "swiper-slide_".concat(i))); })) })] }));
+}
+Swiper.defaultProps = {
+    activeSlideIndex: 0,
+    disabledButtonClass: 'swiper-button-disabled',
+};
+// https://github.com/nolimits4web/swiper/issues/3855#issuecomment-1050694342
+var useSwiperRef = function () {
+    var _a = React.useState(null), wrapper = _a[0], setWrapper = _a[1];
+    var ref = React.useRef(null);
+    React.useEffect(function () {
+        if (ref.current) {
+            setWrapper(ref.current);
+        }
+    }, []);
+    return [wrapper, ref];
+};
 
-
-exports.Swiper = Swiper.Swiper;
+exports.Swiper = Swiper;

package/dist/cjs/components/Switch.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var Switch = require('../Switch-K1p9h3aF.js');
-require('../jsx-runtime-BBxmckJR.js');
+var Switch = require('../../Switch-B5yVEqxz.js');
+require('react/jsx-runtime');
 require('react');
 require('clsx');
 

package/dist/cjs/components/Tab.js

@@ -1,28 +1,158 @@
 'use strict';
 
-var TabGroup = require('../TabGroup-BKWkofWW.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 useStyles = require('../hooks/useStyles.js');
+var Badge = require('../../Badge-2JkquAEb.js');
+var Divider = require('../../Divider-BjB5MD6u.js');
+var Link = require('../../Link-DQxoFKhI.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('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../Badge-C_bYrtVY.js');
-require('../Text-B0SULA92.js');
-require('../Divider-D92wY8Fn.js');
-require('../Link-DRV1vzHd.js');
-require('../_tslib-CKiUdo7p.js');
+require('../../tslib.es6-CKiUdo7p.js');
 
+var tabConfig = {
+    appearance: undefined,
+    setAppearance: function (newComponent) {
+        tabConfig.appearance = newComponent;
+    },
+};
+function Tab(props) {
+    var children = props.children, _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, 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, labelTextAlign = props.labelTextAlign, labelTextWeight = props.labelTextWeight, labelTextWrap = props.labelTextWrap, link = props.link, linkFill = props.linkFill, rel = props.rel, reset = props.reset, set = props.set, target = props.target, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
+    var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'alignDirection',
+    });
+    var alignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'align',
+    });
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    var fillActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_active_',
+        propsKey: 'fillActive',
+    });
+    var fillActiveHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_active_hover_',
+        propsKey: 'fillActiveHover',
+    });
+    var fillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_disabled_',
+        propsKey: 'fillDisabled',
+    });
+    var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'tab_size_',
+        propsKey: 'size',
+    });
+    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'tab_shape_',
+        propsKey: 'shape',
+    });
+    var justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'tab_justify-content_',
+        propsKey: 'justifyContent',
+    });
+    var typeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'tab_type_',
+        propsKey: 'type',
+    });
+    var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    // @ts-expect-error
+    var tab = useStyles.useStyles(props).styles;
+    var appearanceConfig = appearance && tabConfig.appearance && tabConfig.appearance[appearance];
+    return (jsxRuntime.jsx("div", { "data-tour": dataTour, style: tab, className: clsx('tab', isActive && 'tab_state_active', isDisabled && 'tab_state_disabled', isHover && 'tab_state_hover', fillClass ||
+            (isDisabled
+                ? fillDisabledClass ||
+                    ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillDisabled) &&
+                        "fill_".concat(appearanceConfig.fillDisabled).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 ||
+            (isDisabled
+                ? null
+                : (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
+                    "fill_hover_".concat(appearanceConfig.fillHover).replace(/([A-Z])/g, '-$1').toLowerCase()), className, sizeClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.size) &&
+                "tab_size_".concat(appearanceConfig.size).replace(/([A-Z])/g, '-$1').toLowerCase()), fillActiveClass, fillActiveHoverClass, shapeClass, typeClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.type) &&
+                "tab_type_".concat(appearanceConfig.type).replace(/([A-Z])/g, '-$1').toLowerCase()), widthClass, reset && 'tab-reset', set && "tab_set_".concat(set), justifyContentClass, onClick && 'cursor_type_pointer'), onClick: onClick, onMouseEnter: onMouseEnter, children: jsxRuntime.jsx(Link.Link, { fill: linkFill, className: clsx('tab__link', alignDirectionClass, alignClass), href: link || href, rel: rel, target: target, children: jsxRuntime.jsxs(React.Fragment, { children: [before, children || (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("div", { className: "tab__wrapper", children: [(label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label)) && (jsxRuntime.jsx(Text.Text, { className: "tab__label", size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textColorHover: labelTextColorHover, textColor: isDisabled
+                                            ? labelColorDisabled || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelColorDisabled)
+                                            : labelColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelColor), textColorActive: isActive && (labelColorActive || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelColorActive)), textColorGradient: labelTextGradient, textStyle: labelTextStyle, textAlign: labelTextAlign, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label) })), (badgeValue || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.badgeValue)) && (jsxRuntime.jsx(Badge.Badge, { appearance: badgeAppearance || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.badgeAppearance), size: badgeSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.badgeSize), textColor: badgeTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.badgeTextColor), textSize: badgeTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.badgeTextSize), value: badgeValue || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.badgeValue) }))] }), jsxRuntime.jsx(Divider.Divider, { width: "fill", fill: isDisabled
+                                    ? dividerFillDisabled || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.dividerFillDisabled)
+                                    : dividerFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.dividerFill), fillHover: isHover && (dividerFillHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.dividerFillHover)), direction: dividerDirection, fillActive: isActive && (dividerFillActive || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.dividerFillActive)), fillActiveHover: dividerFillActiveHover, size: dividerSize })] })), after] }) }) }));
+}
+Tab.defaultProps = {
+    direction: 'horizontal',
+    LinkComponent: 'a',
+    size: 'normal',
+};
 
+function TabGroup(props) {
+    var id = props.id, dataTour = props.dataTour, children = props.children, className = props.className, horizontalScroll = props.horizontalScroll, set = props.set, style = props.style;
+    var contentAlignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'group_content-align_',
+        propsKey: 'contentAlign',
+    });
+    var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'alignDirection',
+    });
+    var alignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'align',
+    });
+    var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'group_direction_',
+        propsKey: 'direction',
+    });
+    var wrapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'group_wrap_',
+        propsKey: 'wrap',
+    });
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-width_',
+        propsKey: 'borderWidth',
+    });
+    var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border_type_',
+        propsKey: 'borderType',
+    });
+    // @ts-expect-error
+    var _a = useStyles.useStyles(props), groupStyles = _a.styles, groupWrapperStyles = _a.wrapper;
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'tab-group', 'group', widthClass, contentAlignClass, alignDirectionClass, directionClass, alignClass, fillClass, set && "group_set_".concat(set), horizontalScroll && 'group_type_horizontal_scroll', wrapClass, borderColorClass, borderWidthClass, borderTypeClass), id: id, "data-tour": dataTour, style: Object.assign({}, groupStyles, style), children: horizontalScroll ? (jsxRuntime.jsx("div", { className: "group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
+}
 
-exports.Tab = TabGroup.Tab;
-exports.TabGroup = TabGroup.TabGroup;
-exports.tabConfig = TabGroup.tabConfig;
+exports.Tab = Tab;
+exports.TabGroup = TabGroup;
+exports.tabConfig = tabConfig;

package/dist/cjs/components/Text.js

@@ -1,10 +1,10 @@
 'use strict';
 
-var Text = require('../Text-B0SULA92.js');
-require('../jsx-runtime-BBxmckJR.js');
-require('react');
+var Text = require('../../Text-_YhyTsQ1.js');
+require('react/jsx-runtime');
 require('clsx');
 require('../hooks/useDeviceTargetClass.js');
+require('react');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');

package/dist/cjs/components/Textarea.js

@@ -1,10 +1,9 @@
 'use strict';
 
-var Textarea = require('../Textarea-tng0D_n7.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');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
@@ -12,7 +11,95 @@ require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 
+var textareaConfig = {
+    state: {},
+    setState: function (newComponent) {
+        textareaConfig.state = newComponent;
+    },
+    appearance: {},
+    setAppearance: function (newComponent) {
+        textareaConfig.appearance = newComponent;
+    },
+};
+function Textarea(props) {
+    var appearance = props.appearance, id = props.id, className = props.className, placeholder = props.placeholder, disabled = props.disabled, state = props.state, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onKeyDown = props.onKeyDown;
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var borderColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-color_hover_',
+        propsKey: 'borderHover',
+    });
+    var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'textarea_size_',
+        propsKey: 'size',
+    });
+    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'textarea_shape_',
+        propsKey: 'shape',
+    });
+    var textSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'text_size_',
+        propsKey: 'textSize',
+    });
+    var textColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'text-color_',
+        propsKey: 'textColor',
+    });
+    var caretClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'caret-color_',
+        propsKey: 'caret',
+    });
+    var placeholderTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'placeholder-text-color_',
+        propsKey: 'placeholderTextColor',
+    });
+    var weightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'text-weight_',
+        propsKey: 'textWeight',
+    });
+    var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    var appearanceConfig = appearance && textareaConfig.appearance && textareaConfig.appearance[appearance];
+    var stateConfig = React.useMemo(function () { return state && textareaConfig.state && textareaConfig.state[state]; }, [state, textareaConfig]);
+    return (jsxRuntime.jsx("textarea", { className: clsx(className, 'textarea', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, fillClass, borderColorClass ||
+            ((stateConfig === null || stateConfig === void 0 ? void 0 : stateConfig.borderColor) &&
+                "border-color_".concat(stateConfig.borderColor).replace(/([A-Z])/g, '-$1').toLowerCase()) ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderColor) &&
+                "border-color_".concat(appearanceConfig.borderColor)
+                    .replace(/([A-Z])/g, '-$1')
+                    .toLowerCase()), borderColorHoverClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderHover) &&
+                "border-color_hover_".concat(appearanceConfig.borderHover)
+                    .replace(/([A-Z])/g, '-$1')
+                    .toLowerCase()), placeholderTextColorClass ||
+            ((stateConfig === null || stateConfig === void 0 ? void 0 : stateConfig.placeholderTextColor) &&
+                "placeholder-text-color_".concat(stateConfig.placeholderTextColor)
+                    .replace(/([A-Z])/g, '-$1')
+                    .toLowerCase()) ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.placeholderTextColor) &&
+                "placeholder-text-color_".concat(appearanceConfig.placeholderTextColor)
+                    .replace(/([A-Z])/g, '-$1')
+                    .toLowerCase()), sizeClass, shapeClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape) &&
+                "textarea_shape_".concat(appearanceConfig.shape).replace(/([A-Z])/g, '-$1').toLowerCase()), textSizeClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textSize) &&
+                "text_size_".concat(appearanceConfig.textSize).replace(/([A-Z])/g, '-$1').toLowerCase()), textColorClass ||
+            ((stateConfig === null || stateConfig === void 0 ? void 0 : stateConfig.textColor) &&
+                "text-color_".concat(stateConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase()) ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor) &&
+                "text-color_".concat(appearanceConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase()), weightClass, widthClass), id: id, disabled: disabled, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onKeyDown: onKeyDown }));
+}
+Textarea.defaultProps = {
+    size: 'm',
+};
 
-
-exports.Textarea = Textarea.Textarea;
-exports.textareaConfig = Textarea.textareaConfig;
+exports.Textarea = Textarea;
+exports.textareaConfig = textareaConfig;

package/dist/cjs/components/Tile.js

@@ -1,24 +1,64 @@
 'use strict';
 
-var Tile = require('../Tile-bPw3x_en.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');
+var Badge = require('../../Badge-2JkquAEb.js');
+var Text = require('../../Text-_YhyTsQ1.js');
+var Title = require('../../Title-zwP6c2U2.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');
-require('../Badge-C_bYrtVY.js');
-require('../Text-B0SULA92.js');
-require('../Title-Ckp30YSI.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;
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'alignDirection',
+    });
+    var alignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'align',
+    });
+    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'tile_shape_',
+        propsKey: 'shape',
+    });
+    var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var borderColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-color_hover_',
+        propsKey: 'borderColorHover',
+    });
+    var borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-width_',
+        propsKey: 'borderWidth',
+    });
+    var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border_type_',
+        propsKey: 'borderType',
+    });
+    // @ts-expect-error
+    var tileStyles = useStyles.useStyles(props).styles;
+    return (jsxRuntime.jsx("div", { className: clsx('tile', className, fillClass, shapeClass, alignClass, alignDirectionClass, direction && "direction_".concat(direction), borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, reverse && 'tile_reverse', size && "tile_size_".concat(size), type && "tile_type_".concat(type), badge && "tile_state_badge"), style: tileStyles, onClick: onClick, children: jsxRuntime.jsxs("div", { className: clsx('tile__wrapper', alignClass, alignDirectionClass), children: [before, title && (jsxRuntime.jsx(Title.Title, { className: "tile__title", size: titleTextSize, textAlign: titleTextAlign, textColor: titleTextColor, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), text && (jsxRuntime.jsx(Text.Text, { className: "tile__text", size: textSize, textColor: textColor, textWrap: textWrap, children: text })), badge && (jsxRuntime.jsx(Badge.Badge, { className: "tile__badge", size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, value: badge })), children, after] }) }));
+}
+Tile.defaultProps = {
+    textTag: 'span',
+    alignDirection: 'vertical',
+};
 
-
-exports.Tile = Tile.Tile;
+exports.Tile = Tile;

package/dist/cjs/components/Title.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var Title = require('../Title-Ckp30YSI.js');
-require('../jsx-runtime-BBxmckJR.js');
+var Title = require('../../Title-zwP6c2U2.js');
+require('react/jsx-runtime');
 require('react');
 require('clsx');
 require('../context/UIContext.js');

package/dist/cjs/components/Tooltip.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var Tooltip = require('../Tooltip-DREz-tP6.js');
-require('../jsx-runtime-BBxmckJR.js');
+var Tooltip = require('../../Tooltip-DkTKx9n-.js');
+require('react/jsx-runtime');
 require('react');
 require('clsx');
 require('../hooks/useDeviceTargetClass.js');
@@ -15,8 +15,8 @@ require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../Text-B0SULA92.js');
-require('../Title-Ckp30YSI.js');
+require('../../Text-_YhyTsQ1.js');
+require('../../Title-zwP6c2U2.js');