@itcase/ui 1.2.30 → 1.2.32

package/dist/cjs/components/Search.js

@@ -3,40 +3,44 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var index = require('../appearance/Search.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
-var Icon = require('../../Icon-B2BwTQnP.js');
-var Text = require('../../Text-CC0xnhmx.js');
-var Scrollbar = require('../../Scrollbar-DVlIZzvz.js');
-require('lodash/castArray');
+var Icon = require('../../Icon-C8ACV9r7.js');
+var Text = require('../../Text-R6XNq6Ca.js');
+var Scrollbar = require('../../Scrollbar-CKbA0jQU.js');
 require('lodash/camelCase');
+require('lodash/castArray');
 require('../context/UIContext.js');
-require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
+require('../../tslib.es6-CCZ3TN_7.js');
 require('react-inlinesvg');
-require('../appearance/Icon.js');
 require('../../Link-CqWzwh8V.js');
-require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-PrwacZFC.js');
-require('../appearance/Tooltip.js');
-require('../../Title-Ze_OL1Co.js');
-require('../appearance/Title.js');
-require('../appearance/Text.js');
+require('../../Tooltip-BswHy19O.js');
+require('../../Title-DWIc05TX.js');
 require('react-scrollbars-custom');
 
+var searchAppearance = {
+    dev: {
+        borderColor: 'surfaceBorderTertiary',
+        borderHover: 'surfaceBorderQuaternary',
+        fill: 'surfacePrimary',
+        placeholderTextColor: 'surfaceTextQuaternary',
+        shape: 'rounded',
+    },
+};
+
 var searchInputConfig = {
-    appearance: index.searchAppearance,
+    appearance: searchAppearance,
     setAppearance: function (newComponent) {
         searchInputConfig.appearance = newComponent;
     },
 };
 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 = React.useCallback(function (event) {
         onChange && onChange(event.target.value);
     }, [onChange]);
@@ -114,11 +118,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) && (jsxRuntime.jsx(Icon.Icon, { className: "search-input__icon search-input__icon-before", iconFill: iconBeforeFill, imageSrc: iconBeforeSrc, size: iconBeforeSize, SvgImage: iconBefore })), jsxRuntime.jsxs("div", { className: clsx('search-input__wrapper', inputFillClass, inputShapeClass), children: [jsxRuntime.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) && (jsxRuntime.jsx(Icon.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) })), jsxRuntime.jsxs("div", { className: clsx('search-input__wrapper', inputFillClass, inputShapeClass), children: [jsxRuntime.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 }), jsxRuntime.jsx("div", { className: "search-input__placeholder", children: jsxRuntime.jsx(Text.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 && (jsxRuntime.jsx(Icon.Icon, { className: clsx('search-input__clear', 'cursor_type_pointer'), iconFill: iconClearFill, imageSrc: iconClearSrc, size: iconClearSize, SvgImage: iconClear, onClick: onClickClearIcon }))] }), (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon.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 }), jsxRuntime.jsx("div", { className: "search-input__placeholder", children: jsxRuntime.jsx(Text.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 && (jsxRuntime.jsx(Icon.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) && (jsxRuntime.jsx(Icon.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 = {
@@ -126,8 +130,6 @@ SearchInput.DEFAULT_REF_STATE = {
 };
 SearchInput.defaultProps = {
     inputTextSize: 'm',
-    placeholderTextSize: 'm',
-    size: 'normal',
 };
 
 var SearchResult = React.forwardRef(function SearchResult(props, ref) {

package/dist/cjs/components/Segmented.js

@@ -3,23 +3,33 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var index = require('../appearance/Segmented.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var Text = require('../../Text-CC0xnhmx.js');
-require('lodash/castArray');
+var Text = require('../../Text-R6XNq6Ca.js');
 require('lodash/camelCase');
+require('lodash/castArray');
 require('../context/UIContext.js');
-require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
-require('../appearance/Text.js');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../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: index.segmentedAppearance,
+    appearance: segmentedAppearance,
     setAppearance: function (newComponent) {
         segmentedConfig.appearance = newComponent;
     },

package/dist/cjs/components/Select.js

@@ -1,38 +1,53 @@
 'use strict';
 
-var index = require('../appearance/Select.js');
 var tslib_es6 = require('../../tslib.es6-CCZ3TN_7.js');
 var jsxRuntime = require('react/jsx-runtime');
 var Select = require('react-select');
-var Icon = require('../../Icon-B2BwTQnP.js');
+var Icon = require('../../Icon-C8ACV9r7.js');
 var React = require('react');
 var clsx = require('clsx');
 var CreatableSelect = require('react-select/creatable');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var Text = require('../../Text-CC0xnhmx.js');
-var Badge = require('../../Badge-TyPbVqR_.js');
-var Group = require('../../Group-BiN0haVp.js');
-var Divider = require('../../Divider-BjB5MD6u.js');
+var Text = require('../../Text-R6XNq6Ca.js');
+var Badge = require('../../Badge-CHeBPRrf.js');
+var Group = require('../../Group-u6YDbMxn.js');
+var Divider = require('../../Divider-BoB-f9Gr.js');
 require('react-inlinesvg');
-require('../appearance/Icon.js');
 require('../hooks/useStyles.js');
 require('lodash/camelCase');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../context/UIContext.js');
-require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('../hooks/styleAttributes.js');
 require('../../Link-CqWzwh8V.js');
-require('../../Tooltip-PrwacZFC.js');
-require('../appearance/Tooltip.js');
-require('../../Title-Ze_OL1Co.js');
-require('../appearance/Title.js');
+require('../../Tooltip-BswHy19O.js');
+require('../../Title-DWIc05TX.js');
 require('lodash/castArray');
-require('../appearance/Text.js');
-require('../appearance/Badge.js');
-require('../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> {}
@@ -318,7 +333,7 @@ SelectContainer.defaultProps = {
 };
 
 var selectConfig = {
-    appearance: index.selectAppearance,
+    appearance: selectAppearance,
     setAppearance: function (newComponent) {
         selectConfig.appearance = newComponent;
     },

package/dist/cjs/components/SiteMenu.js

@@ -5,29 +5,34 @@ var React = require('react');
 var clsx = require('clsx');
 var UIContext = require('../context/UIContext.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var Icon = require('../../Icon-B2BwTQnP.js');
-var Text = require('../../Text-CC0xnhmx.js');
-require('prop-types');
+var Icon = require('../../Icon-C8ACV9r7.js');
+var Text = require('../../Text-R6XNq6Ca.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
-require('lodash/castArray');
 require('lodash/camelCase');
+require('lodash/castArray');
+require('../../tslib.es6-CCZ3TN_7.js');
 require('react-inlinesvg');
-require('../appearance/Icon.js');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('../../Link-CqWzwh8V.js');
-require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-PrwacZFC.js');
-require('../appearance/Tooltip.js');
-require('../../Title-Ze_OL1Co.js');
-require('../appearance/Title.js');
-require('../appearance/Text.js');
+require('../../Tooltip-BswHy19O.js');
+require('../../Title-DWIc05TX.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 = UIContext.useSiteMenuContext(), isSiteMenuOpen = _a.isSiteMenuOpen, setIsSiteMenuOpen = _a.setIsSiteMenuOpen;
     var onClickClose = React.useCallback(
     // @ts-expect-error
@@ -57,7 +62,10 @@ function SiteMenu(props) {
     //     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, 
+    var appearanceConfig = appearance && siteMenuConfig.appearance && siteMenuConfig.appearance[appearance];
+    return (jsxRuntime.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: jsxRuntime.jsxs("div", { className: "site-menu__wrapper", children: [jsxRuntime.jsx("div", { className: "site-menu__close", children: iconClose ? (jsxRuntime.jsx(Icon.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 })) : (jsxRuntime.jsx(Text.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 })) }), jsxRuntime.jsx("div", { className: "site-menu__items", children: children })] }) }));
 }
@@ -77,3 +85,4 @@ function SiteMenuButton(props) {
 
 exports.SiteMenu = SiteMenu;
 exports.SiteMenuButton = SiteMenuButton;
+exports.siteMenuConfig = siteMenuConfig;

package/dist/cjs/components/Swiper.js

@@ -6,24 +6,22 @@ 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-Ze_OL1Co.js');
-require('lodash/castArray');
+var Title = require('../../Title-DWIc05TX.js');
 require('lodash/camelCase');
+require('lodash/castArray');
 require('../context/UIContext.js');
-require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../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 = React.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
     React.useImperativeHandle(forwardedRef, function () { return swiperRef.current; }, []);
@@ -73,11 +71,10 @@ function Swiper(props) {
     });
     // @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 ||
+    return (jsxRuntime.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)) && (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, { 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 (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

package/dist/cjs/components/Switch.js

@@ -4,11 +4,23 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('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 (jsxRuntime.jsxs("div", { className: clsx('switch', className, size && "switch_size_".concat(size), set && "switch_set_".concat(set)), children: [jsxRuntime.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 (jsxRuntime.jsxs("div", { className: clsx('switch', className, size && "switch_size_".concat(size), set && "switch_set_".concat(set)), children: [jsxRuntime.jsx("input", { className: "switch__checkbox", 
                 // @ts-expect-error
-                ref: ref, type: "checkbox", onChange: onChange }), jsxRuntime.jsx("div", { className: "switch__bg", children: "\u00A0" }), jsxRuntime.jsx("div", { className: "switch__toggle", children: "\u00A0" })] }));
+                ref: ref, checked: checked, disabled: disabled, id: id, type: "checkbox", onChange: onChange }), jsxRuntime.jsx("div", { className: "switch__bg", children: "\u00A0" }), jsxRuntime.jsx("div", { className: "switch__toggle", children: "\u00A0" })] }));
 });
 
 exports.Switch = Switch;
+exports.switchConfig = switchConfig;

package/dist/cjs/components/Tab.js

@@ -3,28 +3,123 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var index = require('../appearance/Tab.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
-var Badge = require('../../Badge-TyPbVqR_.js');
-var Divider = require('../../Divider-BjB5MD6u.js');
+var Badge = require('../../Badge-CHeBPRrf.js');
+var Divider = require('../../Divider-BoB-f9Gr.js');
 var Link = require('../../Link-CqWzwh8V.js');
-var Text = require('../../Text-CC0xnhmx.js');
-require('lodash/castArray');
+var Text = require('../../Text-R6XNq6Ca.js');
 require('lodash/camelCase');
+require('lodash/castArray');
 require('../context/UIContext.js');
-require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../appearance/Badge.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../appearance/Text.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: index.tabAppearance,
+    appearance: tabAppearance,
     setAppearance: function (newComponent) {
         tabConfig.appearance = newComponent;
     },
@@ -153,4 +248,5 @@ function TabGroup(props) {
 
 exports.Tab = Tab;
 exports.TabGroup = TabGroup;
+exports.tabAppearance = tabAppearance;
 exports.tabConfig = tabConfig;

package/dist/cjs/components/Text.js

@@ -1,15 +1,13 @@
 'use strict';
 
-var Text = require('../../Text-CC0xnhmx.js');
+var Text = require('../../Text-R6XNq6Ca.js');
 require('react/jsx-runtime');
 require('clsx');
-require('../appearance/Text.js');
 require('../hooks/useDeviceTargetClass.js');
 require('react');
-require('lodash/castArray');
 require('lodash/camelCase');
+require('lodash/castArray');
 require('../context/UIContext.js');
-require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('../hooks/useStyles.js');

package/dist/cjs/components/Textarea.js

@@ -3,21 +3,74 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var index = require('../appearance/Textarea.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-require('lodash/castArray');
 require('lodash/camelCase');
+require('lodash/castArray');
 require('../context/UIContext.js');
-require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('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: index.textareaAppearance,
+    appearance: textareaAppearance,
     setAppearance: function (newComponent) {
         textareaConfig.appearance = newComponent;
     },
-    state: index.textareaState,
+    state: textareaState,
     // eslint-disable-next-line perfectionist/sort-objects
     setState: function (newComponent) {
         textareaConfig.state = newComponent;