@itcase/ui 1.2.30 → 1.2.32

package/dist/components/Search.js

@@ -1,32 +1,36 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useCallback } from 'react';
 import clsx from 'clsx';
-import { searchAppearance } from '../appearance/Search.js';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { I as Icon } from '../Icon-ClsRaxDk.js';
-import { T as Text } from '../Text-kxGZButz.js';
-import { S as Scrollbar } from '../Scrollbar-CrGXCZ_F.js';
-import 'lodash/castArray';
+import { I as Icon } from '../Icon-DptCmI_y.js';
+import { T as Text } from '../Text-C4Bg2Mv6.js';
+import { S as Scrollbar } from '../Scrollbar-Bo7z7ELm.js';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
-import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'react-inlinesvg';
-import '../appearance/Icon.js';
-import '../Link-CzC1kU5C.js';
-import '../tslib.es6-w7hdJ3oZ.js';
-import '../Tooltip-ccRCMYQM.js';
-import '../appearance/Tooltip.js';
-import '../Title-CQ_Fr1hO.js';
-import '../appearance/Title.js';
-import '../appearance/Text.js';
+import '../Link-CeQuavin.js';
+import '../Tooltip--c-4Qp04.js';
+import '../Title-YVzIwk68.js';
 import 'react-scrollbars-custom';
 
+var searchAppearance = {
+    dev: {
+        borderColor: 'surfaceBorderTertiary',
+        borderHover: 'surfaceBorderQuaternary',
+        fill: 'surfacePrimary',
+        placeholderTextColor: 'surfaceTextQuaternary',
+        shape: 'rounded',
+    },
+};
+
 var searchInputConfig = {
     appearance: searchAppearance,
     setAppearance: function (newComponent) {
@@ -34,7 +38,7 @@ var searchInputConfig = {
     },
 };
 var SearchInput = React.forwardRef(function SearchInput(props, ref) {
-    var after = props.after, appearance = props.appearance, before = props.before, className = props.className, dataTour = props.dataTour, iconAfter = props.iconAfter, iconAfterFill = props.iconAfterFill, iconAfterSize = props.iconAfterSize, iconAfterSrc = props.iconAfterSrc, iconBefore = props.iconBefore, iconBeforeFill = props.iconBeforeFill, iconBeforeSize = props.iconBeforeSize, iconBeforeSrc = props.iconBeforeSrc, iconClear = props.iconClear, iconClearFill = props.iconClearFill, iconClearSize = props.iconClearSize, iconClearSrc = props.iconClearSrc, placeholder = props.placeholder, placeholderTextColor = props.placeholderTextColor, placeholderTextSize = props.placeholderTextSize, placeholderTextStyle = props.placeholderTextStyle, placeholderTextWeight = props.placeholderTextWeight, size = props.size, type = props.type, value = props.value, onChange = props.onChange, onClickClean = props.onClickClean, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
+    var after = props.after, appearance = props.appearance, before = props.before, className = props.className, dataTour = props.dataTour, iconAfter = props.iconAfter, iconAfterFill = props.iconAfterFill, iconAfterSize = props.iconAfterSize, iconAfterSrc = props.iconAfterSrc, iconBefore = props.iconBefore, iconBeforeFill = props.iconBeforeFill, iconBeforeSize = props.iconBeforeSize, iconBeforeSrc = props.iconBeforeSrc, iconClear = props.iconClear, iconClearFill = props.iconClearFill, iconClearSize = props.iconClearSize, iconClearSrc = props.iconClearSrc, placeholder = props.placeholder, placeholderTextColor = props.placeholderTextColor, _a = props.placeholderTextSize, placeholderTextSize = _a === void 0 ? 'm' : _a, placeholderTextStyle = props.placeholderTextStyle, placeholderTextWeight = props.placeholderTextWeight, _b = props.size, size = _b === void 0 ? 'normal' : _b, type = props.type, value = props.value, onChange = props.onChange, onClickClean = props.onClickClean, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
     var onChangeSearchInput = useCallback(function (event) {
         onChange && onChange(event.target.value);
     }, [onChange]);
@@ -112,11 +116,11 @@ var SearchInput = React.forwardRef(function SearchInput(props, ref) {
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderHover) &&
                 "border-color_hover_".concat(appearanceConfig.borderHover)
                     .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), borderWidthClass, borderTypeClass, size && "search-input_size_".concat(size), type && "search-input_type_".concat(type)), "data-tour": dataTour, style: searchInputStyles, children: [before, (iconBefore || iconBeforeSrc) && (jsx(Icon, { className: "search-input__icon search-input__icon-before", iconFill: iconBeforeFill, imageSrc: iconBeforeSrc, size: iconBeforeSize, SvgImage: iconBefore })), jsxs("div", { className: clsx('search-input__wrapper', inputFillClass, inputShapeClass), children: [jsx("input", { className: clsx('search-input__value', (inputTextSizeClass ||
+                    .toLowerCase()), borderWidthClass, borderTypeClass, size && "search-input_size_".concat(size), type && "search-input_type_".concat(type)), "data-tour": dataTour, style: searchInputStyles, children: [before, (iconBefore || iconBeforeSrc) && (jsx(Icon, { className: "search-input__icon search-input__icon-before", iconFill: iconBeforeFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconBeforeFill), imageSrc: iconBeforeSrc || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconBeforeSrc), size: iconBeforeSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconBeforeSize), SvgImage: iconBefore || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconBefore) })), jsxs("div", { className: clsx('search-input__wrapper', inputFillClass, inputShapeClass), children: [jsx("input", { className: clsx('search-input__value', (inputTextSizeClass ||
                             inputWeightClass ||
                             inputTextColorClass ||
                             inputTextStyleClass) &&
-                            'text', inputTextSizeClass, inputWeightClass, inputTextColorClass, inputTextStyleClass), ref: ref, required: true, type: "text", value: value, onChange: onChangeSearchInput, onFocus: onFocus, onKeyDown: onKeyDown }), jsx("div", { className: "search-input__placeholder", children: jsx(Text, { className: clsx('search-input__placeholder-value'), size: placeholderTextSize, textColor: placeholderTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.placeholderTextColor), textStyle: placeholderTextStyle, textWeight: placeholderTextWeight, children: placeholder || 'Search' }) }), value && (jsx(Icon, { className: clsx('search-input__clear', 'cursor_type_pointer'), iconFill: iconClearFill, imageSrc: iconClearSrc, size: iconClearSize, SvgImage: iconClear, onClick: onClickClearIcon }))] }), (iconAfter || iconAfterSrc) && (jsx(Icon, { className: "search-input__icon search-input__icon-after", iconFill: iconAfterFill, imageSrc: iconAfterSrc, size: iconAfterSize, SvgImage: iconAfter })), after] }));
+                            'text', inputTextSizeClass, inputWeightClass, inputTextColorClass, inputTextStyleClass), ref: ref, required: true, type: "text", value: value, onChange: onChangeSearchInput, onFocus: onFocus, onKeyDown: onKeyDown }), jsx("div", { className: "search-input__placeholder", children: jsx(Text, { className: clsx('search-input__placeholder-value'), size: placeholderTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.placeholderTextSize), textColor: placeholderTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.placeholderTextColor), textStyle: placeholderTextStyle, textWeight: placeholderTextWeight, children: placeholder || 'Search' }) }), value && (jsx(Icon, { className: clsx('search-input__clear', 'cursor_type_pointer'), iconFill: iconClearFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconClearFill), imageSrc: iconClearSrc || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconClearSrc), size: iconClearSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconClearSize), SvgImage: iconClear || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconClear), onClick: onClickClearIcon }))] }), (iconAfter || iconAfterSrc) && (jsx(Icon, { className: "search-input__icon search-input__icon-after", iconFill: iconAfterFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconAfterFill), imageSrc: iconAfterSrc || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconAfterSrc), size: iconAfterSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconAfterSize), SvgImage: iconAfter || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconAfter) })), after] }));
 });
 // @ts-expect-error
 SearchInput.DEFAULT_REF_STATE = {
@@ -124,8 +128,6 @@ SearchInput.DEFAULT_REF_STATE = {
 };
 SearchInput.defaultProps = {
     inputTextSize: 'm',
-    placeholderTextSize: 'm',
-    size: 'normal',
 };
 
 var SearchResult = React.forwardRef(function SearchResult(props, ref) {

package/dist/components/Segmented.js

@@ -1,21 +1,31 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React, { useRef, useMemo, createRef, useCallback, useEffect } from 'react';
 import clsx from 'clsx';
-import { segmentedAppearance } from '../appearance/Segmented.js';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import { T as Text } from '../Text-kxGZButz.js';
-import 'lodash/castArray';
+import { T as Text } from '../Text-C4Bg2Mv6.js';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
-import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
-import '../appearance/Text.js';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 
+var segmentedAppearance = {
+    dev: {
+        width: 'fill',
+        fill: 'surfaceSecondary',
+        fillHover: 'surfacePrimaryHover',
+        indicatorFill: 'accentPrimary',
+        labelTextActiveColor: 'accentTextPrimary',
+        labelTextColor: 'surfaceTextPrimary',
+        labelTextSize: 'm',
+        shape: 'rounded',
+    },
+};
+
 var segmentedConfig = {
     appearance: segmentedAppearance,
     setAppearance: function (newComponent) {

package/dist/components/Select.js

@@ -1,36 +1,51 @@
-import { selectAppearance } from '../appearance/Select.js';
-import { a as __assign } from '../tslib.es6-w7hdJ3oZ.js';
+import { _ as __assign } from '../tslib.es6-5FtW-kfi.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import Select, { components } from 'react-select';
-import { I as Icon } from '../Icon-ClsRaxDk.js';
+import { I as Icon } from '../Icon-DptCmI_y.js';
 import React, { useMemo, useRef, useCallback, useEffect } from 'react';
 import clsx from 'clsx';
 import CreatableSelect from 'react-select/creatable';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import { T as Text } from '../Text-kxGZButz.js';
-import { B as Badge } from '../Badge-BZYBmgBK.js';
-import { G as Group } from '../Group-Dc70Z4_7.js';
-import { D as Divider } from '../Divider-U5UdY-ef.js';
+import { T as Text } from '../Text-C4Bg2Mv6.js';
+import { B as Badge } from '../Badge-DBeSKfoF.js';
+import { G as Group } from '../Group-BCvs5UxK.js';
+import { D as Divider } from '../Divider-DHIuQUsH.js';
 import 'react-inlinesvg';
-import '../appearance/Icon.js';
 import '../hooks/useStyles.js';
 import 'lodash/camelCase';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../context/UIContext.js';
-import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import '../hooks/styleAttributes.js';
-import '../Link-CzC1kU5C.js';
-import '../Tooltip-ccRCMYQM.js';
-import '../appearance/Tooltip.js';
-import '../Title-CQ_Fr1hO.js';
-import '../appearance/Title.js';
+import '../Link-CeQuavin.js';
+import '../Tooltip--c-4Qp04.js';
+import '../Title-YVzIwk68.js';
 import 'lodash/castArray';
-import '../appearance/Text.js';
-import '../appearance/Badge.js';
-import '../appearance/Group.js';
+
+var selectAppearance = {
+    dev: {
+        elevation: 8,
+        inputBorderColor: 'surfaceBorderTertiary',
+        inputBorderColorHover: 'surfaceBorderQuaternary',
+        inputFill: 'surfacePrimary',
+        inputShape: 'rounded',
+        inputTextColor: 'surfaceTextPrimary',
+        inputTextSize: 'm',
+        noOptionsText: 'Ничего не найдено...',
+        noOptionsTextColor: 'surfaceTextPrimary',
+        noOptionsTextSize: 'm',
+        optionFill: 'surfacePrimary',
+        optionFillHover: 'surfacePrimaryHover',
+        optionTextColor: 'surfaceTextPrimary',
+        optionTextSize: 'm',
+        placeholder: 'Выбрать...',
+        placeholderTextColor: 'surfaceTextSecondary',
+        placeholderTextSize: 'm',
+        size: 'normal',
+    },
+};
 
 // interface ClearIndicatorProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>>
 //   extends DefaultClearIndicatorProps<Option, IsMulti, Group> {}

package/dist/components/SiteMenu.js

@@ -3,29 +3,34 @@ 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-ClsRaxDk.js';
-import { T as Text } from '../Text-kxGZButz.js';
-import 'prop-types';
+import { I as Icon } from '../Icon-DptCmI_y.js';
+import { T as Text } from '../Text-C4Bg2Mv6.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
-import 'lodash/castArray';
 import 'lodash/camelCase';
+import 'lodash/castArray';
+import '../tslib.es6-5FtW-kfi.js';
 import 'react-inlinesvg';
-import '../appearance/Icon.js';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Link-CzC1kU5C.js';
-import '../tslib.es6-w7hdJ3oZ.js';
-import '../Tooltip-ccRCMYQM.js';
-import '../appearance/Tooltip.js';
-import '../Title-CQ_Fr1hO.js';
-import '../appearance/Title.js';
-import '../appearance/Text.js';
+import '../Link-CeQuavin.js';
+import '../Tooltip--c-4Qp04.js';
+import '../Title-YVzIwk68.js';
+
+var siteMenuAppearance = {
+    dev: {},
+};
 
+var siteMenuConfig = {
+    appearance: siteMenuAppearance,
+    setAppearance: function (newComponent) {
+        siteMenuConfig.appearance = newComponent;
+    },
+};
 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 children = props.children, appearance = props.appearance, className = props.className, closeText = props.closeText, closeTextColor = props.closeTextColor, closeTextColorHover = props.closeTextColorHover, closeTextSize = props.closeTextSize, iconClose = props.iconClose, iconCloseBgFill = props.iconCloseBgFill, iconCloseFill = props.iconCloseFill, iconCloseSize = props.iconCloseSize, onClose = props.onClose;
     var _a = useSiteMenuContext(), isSiteMenuOpen = _a.isSiteMenuOpen, setIsSiteMenuOpen = _a.setIsSiteMenuOpen;
     var onClickClose = useCallback(
     // @ts-expect-error
@@ -55,7 +60,10 @@ function SiteMenu(props) {
     //     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, 
+    var appearanceConfig = appearance && siteMenuConfig.appearance && siteMenuConfig.appearance[appearance];
+    return (jsx("div", { className: clsx(className, 'site-menu', fillClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
+                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), 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 || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconCloseFill), bgFill: iconCloseBgFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconCloseBgFill), size: iconCloseSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconCloseSize), SvgImage: iconClose || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconClose), onClick: onClickClose })) : (jsx(Text, { size: closeTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.closeTextSize), textColor: closeTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.closeTextColor), textColorHover: closeTextColorHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.closeTextColorHover), 
                         // @ts-expect-error
                         onClick: onClickClose, children: closeText })) }), jsx("div", { className: "site-menu__items", children: children })] }) }));
 }
@@ -73,4 +81,4 @@ function SiteMenuButton(props) {
     return (jsx("div", { className: clsx(className, 'site-menu__button'), onClick: onClickButton, children: children || text }));
 }
 
-export { SiteMenu, SiteMenuButton };
+export { SiteMenu, SiteMenuButton, siteMenuConfig };

package/dist/components/Swiper.js

@@ -4,24 +4,22 @@ 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-CQ_Fr1hO.js';
-import 'lodash/castArray';
+import { T as Title } from '../Title-YVzIwk68.js';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
-import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../appearance/Title.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 id = props.id, children = props.children, direction = props.direction, isChangeOnClickSlide = props.isChangeOnClickSlide, isInit = props.isInit, _a = props.isNavigation, isNavigation = _a === void 0 ? false : _a, isScrollbar = props.isScrollbar, _b = props.activeSlideIndex, activeSlideIndex = _b === void 0 ? 0 : _b, allowTouchMove = props.allowTouchMove, autoHeight = props.autoHeight, breakpoints = props.breakpoints, className = props.className, forwardedRef = props.forwardedRef, // https://github.com/vercel/next.js/issues/4957
+    freeMode = props.freeMode, items = props.items, keyboard = props.keyboard, loop = props.loop, modules = props.modules, mousewheel = props.mousewheel, nextButton = props.nextButton, normalizeSlideIndex = props.normalizeSlideIndex, pagination = props.pagination, prevButton = props.prevButton, preventClicks = props.preventClicks, preventClicksPropagation = props.preventClicksPropagation, set = props.set, setNextBtnDisabled = props.setNextBtnDisabled, setPrevBtnDisabled = props.setPrevBtnDisabled, simulateTouch = props.simulateTouch, slidesPerView = props.slidesPerView, spaceBetween = props.spaceBetween, speed = props.speed, swiperClass = props.swiperClass, swiperSlideClass = props.swiperSlideClass, title = props.title, titleAfter = props.titleAfter, titleSize = props.titleSize, titleTextColor = props.titleTextColor, titleWeight = props.titleWeight, 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 _c = useSwiperRef(), nextEl = _c[0], nextRef = _c[1];
+    var _d = useSwiperRef(), prevEl = _d[0], prevRef = _d[1];
     var isLoop = loop !== null && loop !== void 0 ? loop : true;
     // @ts-expect-error
     useImperativeHandle(forwardedRef, function () { return swiperRef.current; }, []);
@@ -71,11 +69,10 @@ function Swiper(props) {
     });
     // @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 ||
+    return (jsxs("div", { className: clsx('swiper-block', slidesPerView === 'auto' && 'swiper-block_type_auto', fillClass, shapeClass, className, set && "swiper-block_set_".concat(set)), id: id, style: style, 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, { className: clsx('swiper-block__swiper', swiperClass), ref: swiperRef, allowTouchMove: allowTouchMove, autoHeight: autoHeight !== null && autoHeight !== void 0 ? autoHeight : false, breakpoints: breakpoints, centeredSlides: true, direction: direction, freeMode: freeMode, init: isInit !== null && isInit !== void 0 ? isInit : true, keyboard: keyboard, loop: isLoop, modules: modules, mousewheel: mousewheel, navigation: isNavigation ? { nextEl: nextEl, prevEl: prevEl } : false, normalizeSlideIndex: normalizeSlideIndex, pagination: pagination, preventClicks: preventClicks, preventClicksPropagation: preventClicksPropagation, scrollbar: isScrollbar, simulateTouch: simulateTouch, slidesPerView: slidesPerView, spaceBetween: spaceBetween, speed: speed !== null && speed !== void 0 ? speed : 500, onInit: onInitSwiper, onSlideChange: onSlideChange, onSlideNextTransitionEnd: onSlideNextTransitionEnd, onSlidePrevTransitionEnd: onSlidePrevTransitionEnd, onSwiper: onSwiper, onTransitionStart: onTransitionStart, onUpdate: onUpdate, 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

package/dist/components/Switch.js

@@ -2,11 +2,22 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import clsx from 'clsx';
 
+var switchAppearance = {
+    dev: {},
+};
+
+var switchConfig = {
+    appearance: switchAppearance,
+    setAppearance: function (newComponent) {
+        switchConfig.appearance = newComponent;
+    },
+};
 var Switch = React.forwardRef(function Switch(props, ref) {
-    var className = props.className, set = props.set, size = props.size, id = props.id, checked = props.checked, disabled = props.disabled, onChange = props.onChange;
-    return (jsxs("div", { className: clsx('switch', className, size && "switch_size_".concat(size), set && "switch_set_".concat(set)), children: [jsx("input", { checked: checked, className: "switch__checkbox", disabled: disabled, id: id, 
+    var id = props.id, appearance = props.appearance, checked = props.checked, className = props.className, disabled = props.disabled, set = props.set, size = props.size, onChange = props.onChange;
+    appearance && switchConfig.appearance && switchConfig.appearance[appearance];
+    return (jsxs("div", { className: clsx('switch', className, size && "switch_size_".concat(size), set && "switch_set_".concat(set)), children: [jsx("input", { className: "switch__checkbox", 
                 // @ts-expect-error
-                ref: ref, type: "checkbox", onChange: onChange }), jsx("div", { className: "switch__bg", children: "\u00A0" }), jsx("div", { className: "switch__toggle", children: "\u00A0" })] }));
+                ref: ref, checked: checked, disabled: disabled, id: id, type: "checkbox", onChange: onChange }), jsx("div", { className: "switch__bg", children: "\u00A0" }), jsx("div", { className: "switch__toggle", children: "\u00A0" })] }));
 });
 
-export { Switch };
+export { Switch, switchConfig };

package/dist/components/Tab.js

@@ -1,25 +1,120 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import clsx from 'clsx';
-import { tabAppearance } from '../appearance/Tab.js';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { B as Badge } from '../Badge-BZYBmgBK.js';
-import { D as Divider } from '../Divider-U5UdY-ef.js';
-import { L as Link } from '../Link-CzC1kU5C.js';
-import { T as Text } from '../Text-kxGZButz.js';
-import 'lodash/castArray';
+import { B as Badge } from '../Badge-DBeSKfoF.js';
+import { D as Divider } from '../Divider-DHIuQUsH.js';
+import { L as Link } from '../Link-CeQuavin.js';
+import { T as Text } from '../Text-C4Bg2Mv6.js';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
-import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../appearance/Badge.js';
-import '../tslib.es6-w7hdJ3oZ.js';
-import '../appearance/Text.js';
+import '../tslib.es6-5FtW-kfi.js';
+
+var tabAppearance = {
+    any: {
+        dividerFill: 'surfaceTertiary',
+        dividerFillActive: 'accentPrimary',
+        dividerFillDisabled: 'accentDisabled',
+        dividerFillHover: 'surfaceTertiary',
+        fill: 'surfacePrimary',
+        fillDisabled: 'surfaceDisabled',
+        fillHover: 'surfaceTertiary',
+        labelColor: 'surfaceTextPrimary',
+        labelColorActive: 'surfaceTextAccent',
+        labelColorDisabled: 'surfaceTextDisabled',
+    },
+    surfacePrimary: {
+        dividerFill: 'surfaceTertiary',
+        dividerFillActive: 'accentPrimary',
+        dividerFillDisabled: 'accentDisabled',
+        dividerFillHover: 'surfaceTertiary',
+        fill: 'surfacePrimary',
+        fillDisabled: 'surfaceDisabled',
+        fillHover: 'surfacePrimaryHover',
+        labelColor: 'surfaceTextPrimary',
+        labelColorActive: 'surfaceTextAccent',
+        labelColorDisabled: 'surfaceTextDisabled',
+    },
+    surfaceSecondary: {
+        dividerFill: 'surfaceTertiary',
+        dividerFillActive: 'accentPrimary',
+        dividerFillDisabled: 'accentDisabled',
+        dividerFillHover: 'surfaceTertiary',
+        fill: 'surfaceSecondary',
+        fillDisabled: 'surfaceDisabled',
+        fillHover: 'surfaceSecondaryHover',
+        labelColor: 'surfaceTextPrimary',
+        labelColorActive: 'surfaceTextAccent',
+        labelColorDisabled: 'surfaceTextDisabled',
+    },
+    surfaceTertiary: {
+        dividerFill: 'surfaceTertiary',
+        dividerFillActive: 'accentPrimary',
+        dividerFillDisabled: 'accentDisabled',
+        dividerFillHover: 'surfaceTertiary',
+        fill: 'surfaceTertiary',
+        fillDisabled: 'surfaceDisabled',
+        fillHover: 'surfaceTertiaryHover',
+        labelColor: 'surfaceTextPrimary',
+        labelColorActive: 'surfaceTextAccent',
+        labelColorDisabled: 'surfaceTextDisabled',
+    },
+    surfaceQuaternary: {
+        dividerFill: 'surfaceTertiary',
+        dividerFillActive: 'accentPrimary',
+        dividerFillDisabled: 'accentDisabled',
+        dividerFillHover: 'surfaceTertiary',
+        fill: 'surfaceQuaternary',
+        fillDisabled: 'surfaceDisabled',
+        fillHover: 'surfaceTertiaryHover',
+        labelColor: 'surfaceTextInverse',
+        labelColorActive: 'surfaceTextInverse',
+        labelColorDisabled: 'surfaceTextDisabled',
+    },
+    accent: {
+        dividerFill: 'surfaceTertiary',
+        dividerFillActive: 'surfacePrimary',
+        dividerFillDisabled: 'accentDisabled',
+        dividerFillHover: 'surfaceTertiary',
+        fill: 'accentPrimary',
+        fillDisabled: 'surfaceDisabled',
+        fillHover: 'accentPrimaryHover',
+        labelColor: 'accentTextPrimary',
+        labelColorActive: 'accentTextPrimary',
+        labelColorDisabled: 'surfaceTextDisabled',
+    },
+    primary: {
+        dividerFill: 'surfaceTertiary',
+        dividerFillActive: 'accentPrimary',
+        dividerFillDisabled: 'accentDisabled',
+        dividerFillHover: 'surfaceTertiary',
+        fill: 'primaryPrimary',
+        fillDisabled: 'surfaceDisabled',
+        fillHover: 'primaryPrimaryHover',
+        labelColor: 'primaryTextPrimary',
+        labelColorActive: 'primaryTextPrimary',
+        labelColorDisabled: 'surfaceTextDisabled',
+    },
+    secondary: {
+        dividerFill: 'surfaceTertiary',
+        dividerFillActive: 'accentPrimary',
+        dividerFillDisabled: 'accentDisabled',
+        dividerFillHover: 'surfaceTertiary',
+        fill: 'secondaryPrimary',
+        fillDisabled: 'surfaceDisabled',
+        fillHover: 'secondaryPrimaryHover',
+        labelColor: 'secondaryTextPrimary',
+        labelColorActive: 'secondaryTextPrimary',
+        labelColorDisabled: 'surfaceTextDisabled',
+    },
+};
 
 var tabConfig = {
     appearance: tabAppearance,
@@ -149,4 +244,4 @@ function TabGroup(props) {
     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), "data-tour": dataTour, id: id, style: Object.assign({}, groupStyles, style), children: horizontalScroll ? (jsx("div", { className: "tab-group__wrapper group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
 }
 
-export { Tab, TabGroup, tabConfig };
+export { Tab, TabGroup, tabAppearance, tabConfig };

package/dist/components/Text.js

@@ -1,13 +1,11 @@
-export { T as Text, t as textConfig } from '../Text-kxGZButz.js';
+export { T as Text, t as textConfig } from '../Text-C4Bg2Mv6.js';
 import 'react/jsx-runtime';
 import 'clsx';
-import '../appearance/Text.js';
 import '../hooks/useDeviceTargetClass.js';
 import 'react';
-import 'lodash/castArray';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
-import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import '../hooks/useStyles.js';

package/dist/components/Textarea.js

@@ -1,15 +1,68 @@
 import { jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import clsx from 'clsx';
-import { textareaAppearance, textareaState } from '../appearance/Textarea.js';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import 'lodash/castArray';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
-import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 
+var textareaAppearance = {
+    dev: {
+        borderColor: 'surfaceBorderTertiary',
+        borderHover: 'surfaceBorderQuaternary',
+        placeholderTextColor: 'surfaceTextSecondary',
+        shape: 'rounded',
+        size: 'm',
+        textColor: 'surfaceTextPrimary',
+        textSize: 'm',
+    },
+};
+var textareaState = {
+    active: {
+        borderColor: 'surfaceBorderActive',
+        placeholderTextColor: 'secondaryTextSecondary',
+    },
+    activeFilled: {
+        borderColor: 'surfaceBorderActive',
+        textColor: 'surfaceTextPrimary',
+    },
+    disabled: {
+        borderColor: 'surfaceBorderDisabled',
+        placeholderTextColor: 'surfaceTextDisabled',
+        textColor: 'surfaceTextPrimary',
+    },
+    error: {
+        borderColor: 'errorBorderPrimary',
+        placeholderTextColor: 'secondaryTextSecondary',
+    },
+    errorFilled: {
+        borderColor: 'errorBorderPrimary',
+        textColor: 'surfaceTextPrimary',
+    },
+    filled: {
+        borderColor: 'surfaceBorderQuaternary',
+        textColor: 'surfaceTextPrimary',
+    },
+    normal: {
+        borderColor: 'surfaceBorderQuaternary',
+        placeholderTextColor: 'secondaryTextSecondary',
+    },
+    readonly: {
+        borderColor: 'surfaceBorderDisabled',
+        textColor: 'surfaceTextPrimary',
+    },
+    require: {
+        borderColor: 'surfaceBorderActive',
+        textColor: 'surfaceTextPrimary',
+    },
+    success: {
+        borderColor: 'successBorderPrimary',
+        textColor: 'surfaceTextPrimary',
+    },
+};
+
 var textareaConfig = {
     appearance: textareaAppearance,
     setAppearance: function (newComponent) {