@itcase/ui 1.9.36 → 1.9.38

package/dist/cjs/components/Segmented.js

@@ -5,8 +5,8 @@ var React = require('react');
 var clsx = require('clsx');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var Icon = require('../../Icon_cjs_CQxDPPGY.js');
-var Text = require('../../Text_cjs_Co2XdYF-.js');
+var Icon = require('../../Icon_cjs_D20B2YBo.js');
+var Text = require('../../Text_cjs_erTy2pUN.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
@@ -24,22 +24,18 @@ require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
-require('../../Link_cjs_DqNtNI23.js');
+require('../../Link_cjs_DXBqPjwm.js');
 
 const segmentedAppearanceDefault = {
     defaultPrimary: {
         fill: 'surfacePrimary',
         fillActive: 'accentPrimary',
-        fillActiveHover: 'accentPrimary',
-        fillHover: 'surfaceSecondary',
+        fillActiveHover: 'accentActiveHoverPrimary',
+        fillHover: 'surfaceHoverSecondary',
         labelTextActiveColor: 'accentTextPrimary',
-        labelTextActiveColorHover: 'accentTextPrimary',
+        labelTextActiveColorHover: 'accentTextActiveHoverPrimary',
         labelTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderQuaternary',
-        iconAfterFill: 'surfaceItemQuaternary',
-        iconAfterFillActive: 'surfaceItemSecondary',
-        iconBeforeFill: 'surfaceItemQuaternary',
-        iconBeforeFillActive: 'surfaceItemSecondary',
         iconFill: 'surfaceItemQuaternary',
         iconFillActive: 'surfaceItemSecondary',
         indicatorFill: 'accentPrimary',
@@ -47,16 +43,12 @@ const segmentedAppearanceDefault = {
     defaultSecondary: {
         fill: 'surfaceSecondary',
         fillActive: 'accentPrimary',
-        fillActiveHover: 'accentHoverPrimary',
-        fillHover: 'surfaceTertiary',
+        fillActiveHover: 'accentActiveHoverPrimary',
+        fillHover: 'surfaceHoverTertiary',
         labelTextActiveColor: 'accentTextPrimary',
-        labelTextActiveColorHover: 'accentTextPrimary',
+        labelTextActiveColorHover: 'accentTextActiveHoverPrimary',
         labelTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderQuaternary',
-        iconAfterFill: 'surfaceItemQuaternary',
-        iconAfterFillActive: 'surfaceItemSecondary',
-        iconBeforeFill: 'surfaceItemQuaternary',
-        iconBeforeFillActive: 'surfaceItemSecondary',
         iconFill: 'surfaceItemQuaternary',
         iconFillActive: 'surfaceItemSecondary',
         indicatorFill: 'accentPrimary',
@@ -66,16 +58,12 @@ const segmentedAppearanceDefault = {
 const segmentedAppearanceDisabled = {
     disabledPrimary: {
         fill: 'surfaceDisabled',
-        fillActive: 'surfaceItemTertiary',
-        labelTextActiveColor: 'surfaceTextQuaternary',
+        fillActive: 'surfaceTertiary',
+        labelTextActiveColor: 'surfaceTextActiveQuaternary',
         labelTextColor: 'surfaceTextQuaternary',
         borderColor: 'surfaceBorderPrimary',
-        iconAfterFill: 'surfaceItemPrimary',
-        iconAfterFillActive: 'surfaceItemDisabled',
-        iconBeforeFill: 'surfaceItemPrimary',
-        iconBeforeFillActive: 'surfaceItemDisabled',
         iconFill: 'surfaceItemPrimary',
-        iconFillActive: 'surfaceItemDisabled',
+        iconFillActive: 'surfaceItemPrimary',
     },
 };
 
@@ -83,20 +71,31 @@ const segmentedAppearanceError = {
     errorPrimary: {
         fill: 'errorTertiary',
         fillActive: 'errorPrimary',
-        fillHover: 'errorItemHover',
-        labelTextActiveColor: 'errorTextPrimary',
+        fillHover: 'errorHoverPrimary',
+        labelTextActiveColor: 'errorTextActivePrimary',
         labelTextColor: 'errorTextSecondary',
         labelTextColorHover: 'errorTextPrimary',
         borderColor: 'errorBorderQuaternary',
-        iconAfterFill: 'errorItemSecondary',
-        iconAfterFillActive: 'errorItemTertiary',
-        iconBeforeFill: 'errorItemSecondary',
-        iconBeforeFillActive: 'errorItemTertiary',
         iconFill: 'errorItemSecondary',
         iconFillActive: 'errorItemTertiary',
     },
 };
 
+const segmentedAppearanceRequire = {
+    requirePrimary: {
+        fill: 'warningTertiary',
+        fillActive: 'accentPrimary',
+        fillActiveHover: 'accentPrimary',
+        fillHover: 'warningSecondary',
+        labelTextActiveColor: 'warningTextPrimary',
+        labelTextColor: 'warningTextPrimary',
+        labelTextColorHover: 'warningTextSecondary',
+        borderColor: 'warningBorderSecondary',
+        iconFill: 'warningItemSecondary',
+        iconFillActive: 'warningItemTertiary',
+    },
+};
+
 const segmentedAppearanceShape = {
     circular: {
         shape: 'circular',
@@ -104,6 +103,10 @@ const segmentedAppearanceShape = {
     rounded: {
         shape: 'rounded',
     },
+    roundedXL: {
+        shape: 'rounded',
+        shapeStrength: '2m',
+    },
     roundedL: {
         shape: 'rounded',
         shapeStrength: '1_5m',
@@ -116,10 +119,6 @@ const segmentedAppearanceShape = {
         shape: 'rounded',
         shapeStrength: '0_5m',
     },
-    roundedXL: {
-        shape: 'rounded',
-        shapeStrength: '2m',
-    },
 };
 
 const segmentedAppearanceSize = {
@@ -169,18 +168,13 @@ const segmentedAppearanceStyle = {
 const segmentedAppearanceSuccess = {
     successPrimary: {
         fill: 'successTertiary',
-        fillActive: 'successItemSecondary',
-        fillHover: 'successItemSecondary',
+        fillActive: 'successSecondary',
+        fillHover: 'successSecondary',
         labelTextActiveColor: 'successTextPrimary',
         labelTextColor: 'successTextSecondary',
         labelTextColorHover: 'successTextPrimary',
         borderColor: 'successBorderSecondary',
-        iconAfterFill: 'successItemSecondary',
-        iconAfterFillActive: 'successTertiary',
-        iconBeforeFill: 'successItemSecondary',
-        iconBeforeFillActive: 'successTertiary',
         iconFill: 'successItemSecondary',
-        iconFillActive: 'successTertiary',
     },
 };
 
@@ -191,15 +185,10 @@ const segmentedAppearanceWarning = {
         fillActiveHover: 'accentPrimary',
         fillHover: 'warningSecondary',
         labelTextActiveColor: 'warningTextPrimary',
-        labelTextColor: 'warningTextPrimaryTertiary',
+        labelTextColor: 'warningTextSecondary',
         labelTextColorHover: 'warningTextSecondary',
         borderColor: 'warningBorderSecondary',
-        iconAfterFill: 'warningItemSecondary',
-        iconAfterFillActive: 'warningTertiary',
-        iconBeforeFill: 'warningItemSecondary',
-        iconBeforeFillActive: 'warningTertiary',
         iconFill: 'warningItemSecondary',
-        iconFillActive: 'warningTertiary',
     },
 };
 
@@ -212,6 +201,7 @@ const segmentedAppearance = {
     ...segmentedAppearanceSuccess,
     ...segmentedAppearanceDefault,
     ...segmentedAppearanceWarning,
+    ...segmentedAppearanceRequire,
 };
 
 const segmentedConfig = {
@@ -221,7 +211,7 @@ const segmentedConfig = {
     },
 };
 const Segmented = (props) => {
-    const { appearance, className, dataTestId, dataTour, name, activeSegment = {}, segments, isDisabled, isSkeleton, setActiveSegment, onChange, } = props;
+    const { appearance, className, dataTestId, dataTour, name, activeSegment, segments, isDisabled, isSkeleton, setActiveSegment, onChange, } = props;
     const controlRef = React.useRef(null);
     const segmentsRefs = React.useMemo(() => new Map(segments.map((item) => [item.value, React.createRef()])), [segments]);
     const onChangeValue = React.useCallback((item) => {
@@ -231,20 +221,19 @@ const Segmented = (props) => {
     React.useEffect(() => {
         let offsetWidth = 0;
         let offsetLeft = 0;
-        const activeSegmentRef = segmentsRefs.get(activeSegment?.value);
+        const activeSegmentRef = segmentsRefs.get(activeSegment.value);
         if (activeSegmentRef?.current) {
             offsetWidth = activeSegmentRef.current.offsetWidth;
             offsetLeft = activeSegmentRef.current.offsetLeft;
         }
         controlRef.current?.style.setProperty('--segmented-active-width', `${offsetWidth}px`);
-        // controlRef.current.style.setProperty('--segmented-active-x-pos', `${offsetLeft - 2}px`)
         controlRef.current?.style.setProperty('--segmented-active-x-pos', `${offsetLeft}px`);
     }, [activeSegment, segmentsRefs]);
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, segmentedConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, labelTextActiveColor, labelTextActiveColorHover, labelTextColor, labelTextColorHover, labelTextSize, labelTextWrap, borderColorClass, borderTypeClass, borderWidthClass, iconFill, iconFillActive, iconFillDisabled, iconSize, indicatorFillClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
     return (jsxRuntime.jsx("div", { className: clsx(className, 'segmented', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, fillClass && `fill_${fillClass}`, widthClass && `segmented_width_${widthClass}`, sizeClass && `segmented_size_${sizeClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, isSkeleton && `segmented_skeleton`), ref: controlRef, "data-testid": dataTestId, "data-tour": dataTour, children: jsxRuntime.jsx("div", { className: "segmented__wrapper", children: jsxRuntime.jsxs("div", { className: clsx('segmented__wrapper-inner'), children: [segments?.map((item) => {
-                        const isActive = String(activeSegment?.value) === String(item.value);
+                        const isActive = activeSegment.value === item.value;
                         return (jsxRuntime.jsx("div", { className: clsx('segmented__item', !item.label && 'segmented__item_icon', sizeClass && `segmented__item_size_${sizeClass}`, isActive && 'segmented__item_active', !isActive && isDisabled && 'segmented__item_state_disabled', isActive &&
                                 isDisabled &&
                                 'segmented__item_active_state_disabled', !isActive

package/dist/cjs/components/Select.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var SelectContainer = require('../../SelectContainer_cjs_B2fgWgCE.js');
+var SelectContainer = require('../../SelectContainer_cjs_Bd9llsQa.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -20,18 +20,19 @@ require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('../hooks.js');
 require('../hooks/useStyles/styleAttributes.js');
-require('../../Group_cjs_CcDdC0Ua.js');
+require('../../Group_cjs_xCUYKUcc.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
-require('../../Text_cjs_Co2XdYF-.js');
+require('../../Text_cjs_erTy2pUN.js');
 require('@itcase/icons/default');
-require('../../Icon_cjs_CQxDPPGY.js');
+require('../../Icon_cjs_D20B2YBo.js');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
-require('../../Link_cjs_DqNtNI23.js');
-require('../../Loader_cjs_CP1xKwb-.js');
-require('../../Divider_cjs_1fwsCxEb.js');
+require('../../Link_cjs_DXBqPjwm.js');
+require('../../Loader_cjs_DMIUN6_q.js');
+require('../utils/mergeAppearanceKeys.js');
+require('../../Divider_cjs_C5Ou2Kqa.js');
 
 
 

package/dist/cjs/components/Swiper.js

@@ -4,11 +4,11 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var react = require('swiper/react');
-var Group = require('../../Group_cjs_CcDdC0Ua.js');
-var Text = require('../../Text_cjs_Co2XdYF-.js');
+var Group = require('../../Group_cjs_xCUYKUcc.js');
+var Text = require('../../Text_cjs_erTy2pUN.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Icon = require('../../Icon_cjs_CQxDPPGY.js');
+var Icon = require('../../Icon_cjs_D20B2YBo.js');
 require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 require('lodash/camelCase');
 require('lodash/castArray');
@@ -26,32 +26,27 @@ require('lodash/maxBy');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
-require('../../Link_cjs_DqNtNI23.js');
+require('../../Link_cjs_DXBqPjwm.js');
 
 function Swiper(props) {
-    const { id, className, dataTestId, dataTour, direction, minZoom = 1, maxZoom = 5, title, titleAfter, titleSize, titleTextColor, titleWeight, activeSlideIndex = 0, allowTouchMove, autoHeight, breakpoints, forwardedRef, // https://github.com/vercel/next.js/issues/4957
-    freeMode, items, keyboard, loop, modules, mousewheel, nextButton, normalizeSlideIndex, pagination, prevButton, preventClicks, preventClicksPropagation, simulateTouch, slidesPerView, spaceBetween, speed, swiperClass, swiperSlideClass, isChangeOnClickSlide, isInit, isNavigation = false, isScrollbar, isShowOriginalLink = false, isZoomEnabled = false, setNextBtnDisabled, setPrevBtnDisabled, onSlideNextTransitionEnd, onSlidePrevTransitionEnd, onSwiper, onUpdate, children, } = props;
+    const { id, className, dataTestId, dataTour, direction, minZoom = 1, maxZoom = 5, title, titleAfter, titleSize, titleTextColor, titleWeight, activeSlideIndex = 0, allowTouchMove, autoHeight, breakpoints, forwardedRef, freeMode, items, keyboard, loop, modules, mousewheel, nextButton, normalizeSlideIndex, pagination, prevButton, preventClicks, preventClicksPropagation, simulateTouch, slidesPerView, spaceBetween, speed, swiperClass, swiperSlideClass, isChangeOnClickSlide, isInit, isNavigation = false, isScrollbar, isShowOriginalLink = false, isZoomEnabled = false, setNextBtnDisabled, setPrevBtnDisabled, onSlideNextTransitionEnd, onSlidePrevTransitionEnd, onSwiper, onUpdate, children, } = props;
     const swiperRef = React.useRef(null);
     const isMountedRef = React.useRef(false);
     const [nextEl, nextRef] = useSwiperRef();
     const [prevEl, prevRef] = useSwiperRef();
     const isLoop = loop ?? true;
     const onInitSwiper = React.useCallback((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]);
     const onSlideChange = React.useCallback((swiper) => {
-        // Some things with clickedIndex
         if (isChangeOnClickSlide) {
             swiper.activeIndex = activeSlideIndex || swiper.clickedIndex;
         }
     }, [isChangeOnClickSlide, activeSlideIndex]);
     const onTransitionStart = React.useCallback((swiper) => {
-        // Set "disabled" state to navigation buttons, when slider move
         if (!isLoop && setPrevBtnDisabled && setNextBtnDisabled) {
             setPrevBtnDisabled(swiper.isBeginning);
             setNextBtnDisabled(swiper.isEnd);
@@ -64,7 +59,6 @@ function Swiper(props) {
             window.open(imgElement.src, '_blank');
         }
     }, [swiperRef]);
-    // @ts-expect-error
     React.useImperativeHandle(forwardedRef, () => swiperRef.current, []);
     React.useEffect(() => {
         if (isMountedRef.current) {
@@ -79,17 +73,14 @@ function Swiper(props) {
     }, [activeSlideIndex]);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
     const { alignClass, alignDirectionClass, fillClass, shapeClass } = propsGenerator;
-    // @ts-expect-error
     const { styles: style } = useStyles.useStyles(props);
     return (jsxRuntime.jsxs("div", { id: id, className: clsx('swiper-block', slidesPerView === 'auto' && 'swiper-block_type_auto', fillClass && `fill_${fillClass}`, shapeClass && `swiper_shape_${shapeClass}`, className), "data-testid": dataTestId, "data-tour": dataTour, style: style, children: [title && (jsxRuntime.jsxs("div", { className: "swiper-block__wrapper", children: [title && (jsxRuntime.jsx(Icon.Title, { className: "swiper-block__title", size: titleSize, textColor: titleTextColor, textWeight: titleWeight, children: title })), titleAfter] })), prevButton && nextButton && (jsxRuntime.jsxs(React.Fragment, { 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, direction: direction, allowTouchMove: allowTouchMove, autoHeight: autoHeight ?? false, breakpoints: breakpoints, centeredSlides: true, freeMode: freeMode, init: isInit ?? true, keyboard: keyboard, loop: isLoop, modules: modules, mousewheel: mousewheel, navigation: isNavigation ? { nextEl, prevEl } : false, normalizeSlideIndex: normalizeSlideIndex, pagination: pagination, preventClicks: preventClicks, preventClicksPropagation: preventClicksPropagation, scrollbar: isScrollbar, simulateTouch: simulateTouch, slidesPerView: slidesPerView, spaceBetween: spaceBetween, speed: speed ?? 500, zoom: {
                     minRatio: minZoom,
                     maxRatio: maxZoom,
-                    enabled: isZoomEnabled,
                     toggle: true,
                 }, onInit: onInitSwiper, onSlideChange: onSlideChange, onSlideNextTransitionEnd: onSlideNextTransitionEnd, onSlidePrevTransitionEnd: onSlidePrevTransitionEnd, onSwiper: onSwiper, onTransitionStart: onTransitionStart, onUpdate: onUpdate, children: children ||
                     items?.map((item, i) => (jsxRuntime.jsx(react.SwiperSlide, { className: clsx('swiper-block__item', isZoomEnabled && 'swiper-block__item_zooming', swiperSlideClass, alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`), children: isZoomEnabled ? (jsxRuntime.jsx("div", { className: "swiper-zoom-container", children: item })) : (item) }, `swiper-slide_${i}`))) }), isShowOriginalLink && (jsxRuntime.jsx(Group.Group, { width: "fill", fill: "surfacePrimary", padding: "1m 0", children: jsxRuntime.jsx(Text.Text, { size: "s", textColor: "surfaceTextPrimary", textColorHover: "surfaceTextQuaternary", onClick: onClickShowOriginalButton, children: "\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u043E\u0440\u0438\u0433\u0438\u043D\u0430\u043B" }) }))] }));
 }
-// https://github.com/nolimits4web/swiper/issues/3855#issuecomment-1050694342
 const useSwiperRef = () => {
     const [wrapper, setWrapper] = React.useState(null);
     const ref = React.useRef(null);

package/dist/cjs/components/Switch.js

@@ -5,7 +5,7 @@ var React = require('react');
 var clsx = require('clsx');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var Text = require('../../Text_cjs_Co2XdYF-.js');
+var Text = require('../../Text_cjs_erTy2pUN.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
@@ -24,9 +24,9 @@ require('lodash/maxBy');
 const switchAppearanceDefault = {
     defaultPrimary: {
         fill: 'surfaceTertiary',
-        fillActive: 'successPrimary',
-        fillToggle: 'surfaceItemSecondary',
-        fillToggleActive: 'successItemPrimary',
+        fillActive: 'surfaceTertiary',
+        fillToggle: 'surfacePrimary',
+        fillToggleActive: 'surfacePrimary',
         titleTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
     },
@@ -36,8 +36,8 @@ const switchAppearanceDisabled = {
     disabledPrimary: {
         fill: 'surfaceDisabled',
         fillActive: 'surfaceDisabled',
-        fillToggle: 'surfaceItemSecondary',
-        fillToggleActive: 'surfaceItemSecondary',
+        fillToggle: 'surfaceSecondary',
+        fillToggleActive: 'surfaceActiveSecondary',
         titleTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
     },
@@ -45,10 +45,10 @@ const switchAppearanceDisabled = {
 
 const switchAppearanceError = {
     errorPrimary: {
-        fill: 'errorPrimary',
+        fill: 'surfaceTertiary',
         fillActive: 'errorSecondary',
-        fillToggle: 'errorItemPrimary',
-        fillToggleActive: 'errorItemPrimary',
+        fillToggle: 'surfacePrimary',
+        fillToggleActive: 'surfacePrimary',
         titleTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
     },
@@ -56,10 +56,10 @@ const switchAppearanceError = {
 
 const switchAppearanceRequire = {
     requirePrimary: {
-        fill: 'warningPrimary',
+        fill: 'surfaceTertiary',
         fillActive: 'warningSecondary',
-        fillToggle: 'warningItemPrimary',
-        fillToggleActive: 'warningItemPrimary',
+        fillToggle: 'surfacePrimary',
+        fillToggleActive: 'surfacePrimary',
         titleTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
     },
@@ -101,10 +101,10 @@ const switchAppearanceStyle = {
 
 const switchAppearanceSuccess = {
     successPrimary: {
-        fill: 'successPrimary',
+        fill: 'surfaceTertiary',
         fillActive: 'successPrimary',
-        fillToggle: 'successItemPrimary',
-        fillToggleActive: 'successItemPrimary',
+        fillToggle: 'surfacePrimary',
+        fillToggleActive: 'surfacePrimary',
         titleTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
     },
@@ -131,9 +131,7 @@ const Switch = React.forwardRef(function Switch(props, ref) {
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, switchConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { size, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, fillToggleActiveClass, fillToggleActiveHoverClass, fillToggleClass, fillToggleHoverClass, titleTextColor, titleTextSize, descTextColor, descTextSize, widthClass, } = propsGenerator;
-    return (jsxRuntime.jsxs("div", { className: clsx('switch', className, widthClass && `width_${widthClass}`, align && `switch_align_${align}`, size && `switch_size_${size}`), "data-testid": dataTestId, "data-tour": dataTour, children: [jsxRuntime.jsxs("div", { className: "switch__wrapper", children: [title && (jsxRuntime.jsx(Text.Text, { className: clsx('switch__title'), size: titleTextSize, textColor: titleTextColor, children: title })), desc && (jsxRuntime.jsx(Text.Text, { className: clsx('switch__desc'), size: descTextSize, textColor: descTextColor, children: desc }))] }), jsxRuntime.jsxs("div", { className: 'switch__item', children: [jsxRuntime.jsx("input", { id: id, className: "switch__checkbox", type: "checkbox", 
-                        // @ts-expect-error
-                        ref: ref, checked: isActive && 'checked', disabled: isDisabled && 'disabled', onChange: onChange }), jsxRuntime.jsx("div", { className: clsx('switch__bg', !isActive
+    return (jsxRuntime.jsxs("div", { className: clsx('switch', className, widthClass && `width_${widthClass}`, align && `switch_align_${align}`, size && `switch_size_${size}`), "data-testid": dataTestId, "data-tour": dataTour, children: [jsxRuntime.jsxs("div", { className: "switch__wrapper", children: [title && (jsxRuntime.jsx(Text.Text, { className: clsx('switch__title'), size: titleTextSize, textColor: titleTextColor, children: title })), desc && (jsxRuntime.jsx(Text.Text, { className: clsx('switch__desc'), size: descTextSize, textColor: descTextColor, children: desc }))] }), jsxRuntime.jsxs("div", { className: 'switch__item', children: [jsxRuntime.jsx("input", { id: id, className: "switch__checkbox", type: "checkbox", ref: ref, checked: isActive, disabled: isDisabled, onChange: onChange }), jsxRuntime.jsx("div", { className: clsx('switch__bg', !isActive
                             ? fillClass && `fill_${fillClass}`
                             : fillActiveClass && `fill_active_${fillActiveClass}`, !isActive
                             ? fillHoverClass && `fill_hover_${fillHoverClass}`

package/dist/cjs/components/Tab.js

@@ -3,14 +3,15 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
+var mergeAppearanceKeys = require('../utils/mergeAppearanceKeys.js');
 var useActiveClasses = require('../hooks/useActiveClasses/useActiveClasses.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Icon = require('../../Icon_cjs_CQxDPPGY.js');
-var Divider = require('../../Divider_cjs_1fwsCxEb.js');
-var Link = require('../../Link_cjs_DqNtNI23.js');
-var Text = require('../../Text_cjs_Co2XdYF-.js');
+var Icon = require('../../Icon_cjs_D20B2YBo.js');
+var Divider = require('../../Divider_cjs_C5Ou2Kqa.js');
+var Link = require('../../Link_cjs_DXBqPjwm.js');
+var Text = require('../../Text_cjs_erTy2pUN.js');
 require('../hooks/useActiveClasses/useActiveClasses.helpers.js');
 require('lodash/camelCase');
 require('lodash/castArray');
@@ -32,13 +33,13 @@ require('../context/UrlAssetPrefix.js');
 const tabAppearanceError = {
     errorPrimary: {
         fill: 'errorPrimary',
-        fillDisabled: 'errorDisabled',
+        fillDisabled: 'disabledPrimary',
         labelColor: 'errorTextPrimary',
-        labelColorActive: 'errorTextAccent',
+        labelColorActive: 'errorTextPrimary',
         labelColorDisabled: 'errorTextDisabled',
-        dividerFillDisabled: 'errorDisabled',
-        badgeAppearance: 'error',
+        badgeAppearance: 'errorPrimary',
         dividerFill: 'accentPrimary',
+        dividerFillDisabled: 'errorDisabled',
     },
 };
 
@@ -107,41 +108,41 @@ const tabAppearanceSuccess = {
         fill: 'successPrimary',
         fillDisabled: 'successDisabled',
         labelColor: 'successTextPrimary',
-        labelColorActive: 'successTextAccent',
+        labelColorActive: 'successTextPrimary',
         labelColorDisabled: 'successTextDisabled',
-        dividerFillDisabled: 'successDisabled',
-        badgeAppearance: 'success',
+        badgeAppearance: 'successPrimary',
         dividerFill: 'accentPrimary',
+        dividerFillDisabled: 'successDisabled',
     },
 };
 
 const tabAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
-        fillActive: 'surfacePrimary',
-        fillActiveHover: 'surfaceSecondary',
+        fillActive: 'surfaceActivePrimary',
+        fillActiveHover: 'surfaceHoverSecondary',
         fillDisabled: 'surfaceDisabled',
-        fillDivider: 'accentPrimary',
-        fillHover: 'surfaceSecondary',
+        fillHover: 'surfaceHoverSecondary',
         labelTextColor: 'surfaceTextPrimary',
-        labelTextColorActive: 'surfaceTextAccent',
+        labelTextColorActive: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderPrimary',
-        borderColorActive: 'surfaceBorderPrimary',
+        borderColorActive: 'surfaceBorderActivePrimary',
         badgeAppearance: 'accentPrimary solid circular',
+        dividerFill: 'surfacePrimary',
         dividerFillActive: 'accentPrimary',
         dividerFillDisabled: 'accentDisabled',
         iconFillIcon: 'surfaceItemPrimary',
     },
     surfaceQuaternary: {
         fill: 'surfaceQuaternary',
-        fillActive: 'accentPrimary',
-        fillActiveHover: 'surfaceTertiary',
+        fillActive: 'accentActivePrimary',
+        fillActiveHover: 'surfaceHoverTertiary',
         fillDisabled: 'surfaceDisabled',
-        fillHover: 'surfaceQuaternary',
-        labelTextColor: 'surfaceTextInverse',
-        labelTextColorActive: 'surfaceTextInverse',
+        fillHover: 'surfaceHoverQuaternary',
+        labelTextColor: 'surfaceTextPrimary',
+        labelTextColorActive: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderPrimary',
-        borderColorActive: 'surfaceBorderPrimary',
+        borderColorActive: 'surfaceBorderActivePrimary',
         badgeAppearance: 'accentPrimary solid circular',
         dividerFillActive: 'accentPrimary',
         dividerFillDisabled: 'accentDisabled',
@@ -149,14 +150,14 @@ const tabAppearanceSurface = {
     },
     surfaceSecondary: {
         fill: 'surfaceSecondary',
-        fillActive: 'surfaceSecondary',
-        fillActiveHover: 'surfaceTertiary',
+        fillActive: 'surfaceActiveSecondary',
+        fillActiveHover: 'surfaceHoverTertiary',
         fillDisabled: 'surfaceDisabled',
-        fillHover: 'surfaceTertiary',
+        fillHover: 'surfaceHoverTertiary',
         labelTextColor: 'surfaceTextPrimary',
-        labelTextColorActive: 'surfaceTextAccent',
+        labelTextColorActive: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderPrimary',
-        borderColorActive: 'surfaceBorderPrimary',
+        borderColorActive: 'surfaceBorderActivePrimary',
         badgeAppearance: 'accentPrimary solid circular',
         dividerFillActive: 'accentPrimary',
         dividerFillDisabled: 'accentDisabled',
@@ -164,14 +165,14 @@ const tabAppearanceSurface = {
     },
     surfaceTertiary: {
         fill: 'surfaceTertiary',
-        fillActive: 'surfaceSecondary',
-        fillActiveHover: 'surfaceTertiary',
+        fillActive: 'surfaceActiveSecondary',
+        fillActiveHover: 'surfaceHoverTertiary',
         fillDisabled: 'surfaceDisabled',
-        fillHover: 'surfaceSecondary',
+        fillHover: 'surfaceHoverSecondary',
         labelTextColor: 'surfaceTextPrimary',
-        labelTextColorActive: 'surfaceTextAccent',
+        labelTextColorActive: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderPrimary',
-        borderColorActive: 'surfaceBorderPrimary',
+        borderColorActive: 'surfaceBorderActivePrimary',
         badgeAppearance: 'accentPrimary solid circular',
         dividerFillActive: 'accentPrimary',
         dividerFillDisabled: 'accentDisabled',
@@ -182,13 +183,12 @@ const tabAppearanceSurface = {
 const tabAppearanceWarning = {
     warningPrimary: {
         fill: 'warningPrimary',
-        fillDisabled: 'warningDisabled',
+        fillDisabled: 'disabledPrimary',
         labelColor: 'warningTextPrimary',
-        labelColorActive: 'warningTextAccent',
-        labelColorDisabled: 'warningTextDisabled',
-        dividerFillDisabled: 'warningDisabled',
-        badgeAppearance: 'warning',
+        labelColorActive: 'warningTextPrimary',
+        badgeAppearance: 'warningPrimary',
         dividerFill: 'accentPrimary',
+        dividerFillDisabled: 'disabledPrimary',
     },
 };
 
@@ -216,17 +216,15 @@ function Tab(props) {
         isActive: isActive,
         isDisabled: isDisabled,
     });
-    const { justifyContentClass, alignClass, labelTextAlign, labelTextColor, labelTextColorActive, labelTextColorActiveHover, labelTextColorHover, labelTextSize, labelTextStyle, labelTextWeight, labelTextWrap, badgeAppearance, badgeAppearanceSize, badgeShape, badgeSize, badgeTextColor, badgeTextSize, dividerFill, dividerFillActive, dividerFillActiveHover, dividerFillDisabled, dividerFillHover, dividerSize, icon, iconFill, iconFillIcon, iconFillSize, iconShape, iconSize, iconSrc, linkFill, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
-    // @ts-expect-error
+    const { justifyContentClass, alignClass, labelTextAlign, labelTextColor, labelTextColorActive, labelTextColorHover, labelTextSize, labelTextStyle, labelTextWeight, labelTextWrap, badgeAppearance, badgeAppearanceSize, badgeShape, badgeSize, badgeTextColor, badgeTextSize, dividerFill, dividerFillActive, dividerFillActiveHover, dividerFillDisabled, dividerFillHover, dividerSize, icon, iconFill, iconFillIcon, iconFillSize, iconShape, iconSize, iconSrc, linkFill, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
     const { styles: tab } = useStyles.useStyles(props);
-    return (jsxRuntime.jsx("div", { className: clsx('tab', className, rootClasses, isActive && 'tab_state_active', isDisabled && 'tab_state_disabled', sizeClass && `tab_size_${sizeClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, widthClass && `width_${widthClass}`, justifyContentClass && `tab_justify-content_${justifyContentClass}`, isSkeleton && `tab_skeleton`, onClick && 'cursor_type_pointer'), "data-testid": dataTestId && `${dataTestId}Tab`, "data-tour": dataTour, style: tab, onClick: onClick, onMouseEnter: onMouseEnter, children: jsxRuntime.jsxs(Link.Link, { className: clsx('tab__link', !isDisabled && 'cursor_type_pointer'), fill: linkFill, href: link || href, rel: rel, target: target, children: [before, children || (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("div", { className: clsx('tab__wrapper', alignClass && `align_${alignClass}`), children: [label && (jsxRuntime.jsx(Text.Text, { className: "tab__label", size: labelTextSize, textAlign: labelTextAlign, textColor: labelTextColor, textColorActive: labelTextColorActive, textColorHover: labelTextColorHover, textColorHoverActive: labelTextColorActiveHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, isDisabled: isDisabled, children: label })), Boolean(badgeValue) && (jsxRuntime.jsx(Icon.Badge, { appearance: `${badgeAppearance} ${badgeAppearanceSize}`, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), (icon || iconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "tab__icon_after", fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon }))] }), jsxRuntime.jsx(Divider.Divider, { className: "tab__divider", width: "fill", direction: "horizontal", size: dividerSize, fill: dividerFill, fillActive: dividerFillActive, fillActiveHover: dividerFillActiveHover, fillDisabled: dividerFillDisabled, fillHover: dividerFillHover, zIndex: "1", isActive: isActive, isDisabled: isDisabled })] })), after] }) }));
+    return (jsxRuntime.jsx("div", { className: clsx('tab', className, rootClasses, isActive && 'tab_state_active', isDisabled && 'tab_state_disabled', sizeClass && `tab_size_${sizeClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, widthClass && `width_${widthClass}`, justifyContentClass && `tab_justify-content_${justifyContentClass}`, isSkeleton && `tab_skeleton`, onClick && 'cursor_type_pointer'), "data-testid": dataTestId && `${dataTestId}Tab`, "data-tour": dataTour, style: tab, onClick: onClick, onMouseEnter: onMouseEnter, children: jsxRuntime.jsxs(Link.Link, { className: clsx('tab__link', !isDisabled && 'cursor_type_pointer'), fill: linkFill, href: link || href, rel: rel, target: target, children: [before, children || (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("div", { className: clsx('tab__wrapper', alignClass && `align_${alignClass}`), children: [label && (jsxRuntime.jsx(Text.Text, { className: "tab__label", size: labelTextSize, textAlign: labelTextAlign, textColor: labelTextColor, textColorActive: labelTextColorActive, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, isDisabled: isDisabled, children: label })), Boolean(badgeValue) && (jsxRuntime.jsx(Icon.Badge, { appearance: mergeAppearanceKeys.mergeAppearanceKeys(badgeAppearance, badgeAppearanceSize), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), (icon || iconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "tab__icon_after", fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon }))] }), jsxRuntime.jsx(Divider.Divider, { className: "tab__divider", width: "fill", direction: "horizontal", size: dividerSize, fill: dividerFill, fillActive: dividerFillActive, fillActiveHover: dividerFillActiveHover, fillDisabled: dividerFillDisabled, fillHover: dividerFillHover, zIndex: "1", isActive: isActive, isDisabled: isDisabled })] })), after] }) }));
 }
 
 function TabGroup(props) {
     const { className, dataTestId, dataTour, horizontalScroll, style, tabAppearance, tabList, children, } = props;
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
     const { directionClass, alignClass, alignDirectionClass, fillClass, borderColorClass, borderTypeClass, borderWidthClass, widthClass, wrapClass, } = propsGenerator;
-    // @ts-expect-error
     const { styles: groupStyles, wrapper: groupWrapperStyles } = useStyles.useStyles(props);
     return (jsxRuntime.jsx("div", { className: clsx(className, 'tab-group', 'group', widthClass && `width_${widthClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, fillClass && `fill_${fillClass}`, horizontalScroll && 'group_scroll_horizontal', wrapClass && `group_wrap_${wrapClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: Object.assign({}, groupStyles, style), children: horizontalScroll ? (jsxRuntime.jsxs("div", { className: "tab-group__wrapper", style: groupWrapperStyles, children: [tabList?.map((item) => (jsxRuntime.jsx(Tab, { appearance: tabAppearance, label: item.label, isActive: item.isActive }, item.key))), children] })) : (jsxRuntime.jsxs(React.Fragment, { children: [tabList?.map((item) => (jsxRuntime.jsx(Tab, { appearance: tabAppearance, label: item.label, badgeValue: item.badgeValue, icon: item.icon, iconSrc: item.icon, isActive: item.isActive, onClick: item.onClick }, item.key))), children] })) }));
 }

package/dist/cjs/components/Text.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Text = require('../../Text_cjs_Co2XdYF-.js');
+var Text = require('../../Text_cjs_erTy2pUN.js');
 require('react/jsx-runtime');
 require('clsx');
 require('../hooks/useAppearanceConfig/useAppearanceConfig.js');