@itcase/ui 1.1.25 → 1.2.0

package/dist/components/SiteMenu.js

@@ -1,22 +1,72 @@
-export { S as SiteMenu, a as SiteMenuButton } from '../SiteMenuButton-DsYMvX6W.js';
-import '../jsx-runtime-C2uP7l8s.js';
-import 'react';
-import 'clsx';
-import '../context/UIContext.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useCallback } from 'react';
+import clsx from 'clsx';
+import { useSiteMenuContext } from '../context/UIContext.js';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { I as Icon } from '../Icon-CsE2-ieX.js';
+import { T as Text } from '../Text-CG3xPG27.js';
 import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
-import '../hooks/useDeviceTargetClass.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
-import '../Icon-BLqnXYOO.js';
-import '../_tslib-S-VPg1Cw.js';
+import '../tslib.es6-S-VPg1Cw.js';
 import 'react-inlinesvg';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Link-DtzAAQn8.js';
-import '../Tooltip-IVq3_vb4.js';
-import '../Text-Dz-KPI5I.js';
-import '../Title-zpOK2AxL.js';
+import '../Link-Bqu5amIb.js';
+import '../Tooltip-DJufHBiQ.js';
+import '../Title-BfSFPJtJ.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 = useSiteMenuContext(), isSiteMenuOpen = _a.isSiteMenuOpen, setIsSiteMenuOpen = _a.setIsSiteMenuOpen;
+    var onClickClose = useCallback(
+    // @ts-expect-error
+    function (event) {
+        // @ts-expect-error
+        setIsSiteMenuOpen(false);
+        // @ts-expect-error
+        onClose && onClose(event);
+    }, [onClose]);
+    var fillClass = 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 (jsx("div", { className: clsx(className, 'site-menu', fillClass, isSiteMenuOpen && 'site-menu_state_visible', !isSiteMenuOpen && 'site-menu_state_hidden'), children: jsxs("div", { className: "site-menu__wrapper", children: [jsx("div", { className: "site-menu__close", children: iconClose ? (jsx(Icon, { fill: iconCloseFill, size: iconCloseSize, bgFill: iconCloseBgFill, SvgImage: iconClose, onClick: onClickClose })) : (jsx(Text, { size: closeTextSize, textColor: closeTextColor, textColorHover: closeTextColorHover, 
+                        // @ts-expect-error
+                        onClick: onClickClose, children: closeText })) }), 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 = useSiteMenuContext().setIsSiteMenuOpen;
+    // @ts-expect-error
+    var onClickButton = useCallback(function (event) {
+        // @ts-expect-error
+        setIsSiteMenuOpen(true);
+        // @ts-expect-error
+        onClick && onClick(event);
+    }, []);
+    return (jsx("div", { className: clsx(className, 'site-menu__button'), onClick: onClickButton, children: children || text }));
+}
+
+export { SiteMenu, SiteMenuButton };

package/dist/components/Swiper.js

@@ -1,16 +1,92 @@
-export { S as Swiper } from '../Swiper-CXjE6qZR.js';
-import '../jsx-runtime-C2uP7l8s.js';
-import 'react';
-import 'clsx';
-import '../hooks/useDeviceTargetClass.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useImperativeHandle, useCallback, useEffect, useState } from 'react';
+import clsx from 'clsx';
+import { Swiper as Swiper$1, SwiperSlide } from 'swiper/react';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useStyles } from '../hooks/useStyles.js';
+import { T as Title } from '../Title-BfSFPJtJ.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
 import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
-import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Title-zpOK2AxL.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 = 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
+    useImperativeHandle(forwardedRef, function () { return swiperRef.current; }, []);
+    var onInitSwiper = 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 = useCallback(function (swiper) {
+        // Some things with clickedIndex
+        if (isChangeOnClickSlide) {
+            swiper.activeIndex = activeSlideIndex || swiper.clickedIndex;
+        }
+    }, [isChangeOnClickSlide, activeSlideIndex]);
+    var onTransitionStart = 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]);
+    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(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'swiper_shape_',
+        propsKey: 'shape',
+    });
+    var alignDirectionClass = useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'alignDirection',
+    });
+    var alignClass = useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'align',
+    });
+    // @ts-expect-error
+    var style = useStyles(props).styles;
+    return (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)) && (jsxs("div", { className: "swiper-block__wrapper", children: [title && (jsx(Title, { className: "swiper-block__title", size: titleSize, textColor: titleTextColor, textWeight: titleWeight, children: title })), titleAfter, prevButton && nextButton && (jsxs("div", { className: "swiper-block__navigation", children: [jsx("div", { className: "swiper-block__prev swiper-button", ref: prevRef, children: prevButton }), jsx("div", { className: "swiper-block__next swiper-button", ref: nextRef, children: nextButton })] }))] })), jsx(Swiper$1, { 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 (jsx(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 = useState(null), wrapper = _a[0], setWrapper = _a[1];
+    var ref = useRef(null);
+    useEffect(function () {
+        if (ref.current) {
+            setWrapper(ref.current);
+        }
+    }, []);
+    return [wrapper, ref];
+};
+
+export { Swiper };

package/dist/components/Switch.js

@@ -1,4 +1,4 @@
-export { S as Switch } from '../Switch-0BHqovLA.js';
-import '../jsx-runtime-C2uP7l8s.js';
+export { S as Switch } from '../Switch-DEXsrPCo.js';
+import 'react/jsx-runtime';
 import 'react';
 import 'clsx';

package/dist/components/Tab.js

@@ -1,20 +1,154 @@
-export { T as Tab, a as TabGroup, t as tabConfig } from '../TabGroup-BLB4Ymcx.js';
-import '../jsx-runtime-C2uP7l8s.js';
-import 'react';
-import 'clsx';
-import '../hooks/useDeviceTargetClass.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import clsx from 'clsx';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useStyles } from '../hooks/useStyles.js';
+import { B as Badge } from '../Badge-CrhdvxY6.js';
+import { D as Divider } from '../Divider-U5UdY-ef.js';
+import { L as Link } from '../Link-Bqu5amIb.js';
+import { T as Text } from '../Text-CG3xPG27.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
 import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
-import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Badge-CLV5v6N7.js';
-import '../Text-Dz-KPI5I.js';
-import '../Divider-Dhj6sMWd.js';
-import '../Link-DtzAAQn8.js';
-import '../_tslib-S-VPg1Cw.js';
+import '../tslib.es6-S-VPg1Cw.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(props, {
+        prefix: 'align_',
+        propsKey: 'alignDirection',
+    });
+    var alignClass = useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'align',
+    });
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    var fillActiveClass = useDeviceTargetClass(props, {
+        prefix: 'fill_active_',
+        propsKey: 'fillActive',
+    });
+    var fillActiveHoverClass = useDeviceTargetClass(props, {
+        prefix: 'fill_active_hover_',
+        propsKey: 'fillActiveHover',
+    });
+    var fillDisabledClass = useDeviceTargetClass(props, {
+        prefix: 'fill_disabled_',
+        propsKey: 'fillDisabled',
+    });
+    var sizeClass = useDeviceTargetClass(props, {
+        prefix: 'tab_size_',
+        propsKey: 'size',
+    });
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'tab_shape_',
+        propsKey: 'shape',
+    });
+    var justifyContentClass = useDeviceTargetClass(props, {
+        prefix: 'tab_justify-content_',
+        propsKey: 'justifyContent',
+    });
+    var typeClass = useDeviceTargetClass(props, {
+        prefix: 'tab_type_',
+        propsKey: 'type',
+    });
+    var widthClass = useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    // @ts-expect-error
+    var tab = useStyles(props).styles;
+    var appearanceConfig = appearance && tabConfig.appearance && tabConfig.appearance[appearance];
+    return (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: jsx(Link, { fill: linkFill, className: clsx('tab__link', alignDirectionClass, alignClass), href: link || href, rel: rel, target: target, children: jsxs(React.Fragment, { children: [before, children || (jsxs(React.Fragment, { children: [jsxs("div", { className: "tab__wrapper", children: [(label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label)) && (jsx(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)) && (jsx(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) }))] }), jsx(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(props, {
+        prefix: 'group_content-align_',
+        propsKey: 'contentAlign',
+    });
+    var alignDirectionClass = useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'alignDirection',
+    });
+    var alignClass = useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'align',
+    });
+    var directionClass = useDeviceTargetClass(props, {
+        prefix: 'group_direction_',
+        propsKey: 'direction',
+    });
+    var wrapClass = useDeviceTargetClass(props, {
+        prefix: 'group_wrap_',
+        propsKey: 'wrap',
+    });
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var widthClass = useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    var borderColorClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var borderWidthClass = useDeviceTargetClass(props, {
+        prefix: 'border-width_',
+        propsKey: 'borderWidth',
+    });
+    var borderTypeClass = useDeviceTargetClass(props, {
+        prefix: 'border_type_',
+        propsKey: 'borderType',
+    });
+    // @ts-expect-error
+    var _a = useStyles(props), groupStyles = _a.styles, groupWrapperStyles = _a.wrapper;
+    return (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 ? (jsx("div", { className: "group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
+}
+
+export { Tab, TabGroup, tabConfig };

package/dist/components/Text.js

@@ -1,8 +1,8 @@
-export { T as Text, t as textConfig } from '../Text-Dz-KPI5I.js';
-import '../jsx-runtime-C2uP7l8s.js';
-import 'react';
+export { T as Text, t as textConfig } from '../Text-CG3xPG27.js';
+import 'react/jsx-runtime';
 import 'clsx';
 import '../hooks/useDeviceTargetClass.js';
+import 'react';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';

package/dist/components/Textarea.js

@@ -1,11 +1,102 @@
-export { T as Textarea, t as textareaConfig } from '../Textarea-D3XSuMEm.js';
-import '../jsx-runtime-C2uP7l8s.js';
-import 'react';
-import 'clsx';
-import '../hooks/useDeviceTargetClass.js';
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import clsx from 'clsx';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
 import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import '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(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var borderColorClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var borderColorHoverClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_hover_',
+        propsKey: 'borderHover',
+    });
+    var sizeClass = useDeviceTargetClass(props, {
+        prefix: 'textarea_size_',
+        propsKey: 'size',
+    });
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'textarea_shape_',
+        propsKey: 'shape',
+    });
+    var textSizeClass = useDeviceTargetClass(props, {
+        prefix: 'text_size_',
+        propsKey: 'textSize',
+    });
+    var textColorClass = useDeviceTargetClass(props, {
+        prefix: 'text-color_',
+        propsKey: 'textColor',
+    });
+    var caretClass = useDeviceTargetClass(props, {
+        prefix: 'caret-color_',
+        propsKey: 'caret',
+    });
+    var placeholderTextColorClass = useDeviceTargetClass(props, {
+        prefix: 'placeholder-text-color_',
+        propsKey: 'placeholderTextColor',
+    });
+    var weightClass = useDeviceTargetClass(props, {
+        prefix: 'text-weight_',
+        propsKey: 'textWeight',
+    });
+    var widthClass = useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    var appearanceConfig = appearance && textareaConfig.appearance && textareaConfig.appearance[appearance];
+    var stateConfig = useMemo(function () { return state && textareaConfig.state && textareaConfig.state[state]; }, [state, textareaConfig]);
+    return (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',
+};
+
+export { Textarea, textareaConfig };

package/dist/components/Tile.js

@@ -1,18 +1,62 @@
-export { T as Tile } from '../Tile-CNnauNx6.js';
-import '../jsx-runtime-C2uP7l8s.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useStyles } from '../hooks/useStyles.js';
+import { B as Badge } from '../Badge-CrhdvxY6.js';
+import { T as Text } from '../Text-CG3xPG27.js';
+import { T as Title } from '../Title-BfSFPJtJ.js';
 import 'react';
-import 'clsx';
-import '../hooks/useDeviceTargetClass.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
 import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
-import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Badge-CLV5v6N7.js';
-import '../Text-Dz-KPI5I.js';
-import '../Title-zpOK2AxL.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(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var alignDirectionClass = useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'alignDirection',
+    });
+    var alignClass = useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'align',
+    });
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'tile_shape_',
+        propsKey: 'shape',
+    });
+    var borderColorClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var borderColorHoverClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_hover_',
+        propsKey: 'borderColorHover',
+    });
+    var borderWidthClass = useDeviceTargetClass(props, {
+        prefix: 'border-width_',
+        propsKey: 'borderWidth',
+    });
+    var borderTypeClass = useDeviceTargetClass(props, {
+        prefix: 'border_type_',
+        propsKey: 'borderType',
+    });
+    // @ts-expect-error
+    var tileStyles = useStyles(props).styles;
+    return (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: jsxs("div", { className: clsx('tile__wrapper', alignClass, alignDirectionClass), children: [before, title && (jsx(Title, { className: "tile__title", size: titleTextSize, textAlign: titleTextAlign, textColor: titleTextColor, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), text && (jsx(Text, { className: "tile__text", size: textSize, textColor: textColor, textWrap: textWrap, children: text })), badge && (jsx(Badge, { className: "tile__badge", size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, value: badge })), children, after] }) }));
+}
+Tile.defaultProps = {
+    textTag: 'span',
+    alignDirection: 'vertical',
+};
+
+export { Tile };

package/dist/components/Title.js

@@ -1,5 +1,5 @@
-export { T as Title, t as titleConfig } from '../Title-zpOK2AxL.js';
-import '../jsx-runtime-C2uP7l8s.js';
+export { T as Title, t as titleConfig } from '../Title-BfSFPJtJ.js';
+import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
 import '../context/UIContext.js';

package/dist/components/Tooltip.js

@@ -1,5 +1,5 @@
-export { T as Tooltip, t as tooltipConfig } from '../Tooltip-IVq3_vb4.js';
-import '../jsx-runtime-C2uP7l8s.js';
+export { T as Tooltip, t as tooltipConfig } from '../Tooltip-DJufHBiQ.js';
+import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
 import '../hooks/useDeviceTargetClass.js';
@@ -13,5 +13,5 @@ import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Text-Dz-KPI5I.js';
-import '../Title-zpOK2AxL.js';
+import '../Text-CG3xPG27.js';
+import '../Title-BfSFPJtJ.js';

package/dist/components/Video.js

@@ -1,8 +1,7 @@
-export { V as Video } from '../Video-0z4mNz4P.js';
-import '../jsx-runtime-C2uP7l8s.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useStyles } from '../hooks/useStyles.js';
 import 'react';
-import 'clsx';
-import '../hooks/useStyles.js';
 import 'lodash/camelCase';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
@@ -11,3 +10,18 @@ import '../context/UIContext.js';
 import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+
+function Video(props) {
+    var id = props.id, children = props.children, className = props.className, poster = props.poster, webm = props.webm, ogv = props.ogv, mp4 = props.mp4, type = props.type, position = props.position;
+    // @ts-expect-error
+    var videoStyles = useStyles(props).styles;
+    return (jsxs("div", { className: clsx('video', className, type && "video_type_".concat(type), position && "video_position_".concat(position)), id: id, style: videoStyles, children: [jsxs("video", { autoPlay: true, className: "video__wrapper", poster: poster, muted: true, loop: true, playsInline: false, children: [webm && jsx("source", { src: webm, type: "video/webm", 
+                        // @ts-expect-error
+                        codecs: "vp8, vorbis" }), ogv && jsx("source", { src: ogv, type: "video/ogg", 
+                        // @ts-expect-error
+                        codecs: "theora, vorbis" }), mp4 && jsx("source", { src: mp4, type: "video/mp4", 
+                        // @ts-expect-error
+                        codecs: "avc1.42E01E, mp4a.40.2" })] }), children] }));
+}
+
+export { Video };