@itcase/ui 1.8.122 → 1.8.124

package/dist/components/Search.js

@@ -1,4 +1,3 @@
-import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import { icons16, icons24 } from '@itcase/icons/default';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useCallback } from 'react';
@@ -6,9 +5,9 @@ import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { I as Icon } from '../Icon_es_BrwLifge.js';
-import { T as Text } from '../Text_es_CwV9rjFD.js';
-import { S as Scrollbar } from '../Scrollbar_es_CThJeCLF.js';
+import { I as Icon } from '../Icon_es_D5eiycFI.js';
+import { T as Text } from '../Text_es_CnymlElo.js';
+import { S as Scrollbar } from '../Scrollbar_es_CcMgNvGi.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
@@ -25,10 +24,10 @@ import 'lodash/maxBy';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_XiqbdwLp.js';
+import '../Link_es_P2b6ya7P.js';
 import 'react-scrollbars-custom';
 
-var searchAppearanceDefault = {
+const searchAppearanceDefault = {
     defaultPrimary: {
         fill: 'surfaceSecondary',
         borderColor: 'surfaceBorderQuaternary',
@@ -51,7 +50,7 @@ var searchAppearanceDefault = {
     },
 };
 
-var searchAppearanceDisabled = {
+const searchAppearanceDisabled = {
     disabledPrimary: {
         fill: 'surfaceDisabled',
         borderColor: 'surfaceBorderDisabled',
@@ -64,7 +63,7 @@ var searchAppearanceDisabled = {
     },
 };
 
-var searchAppearanceError = {
+const searchAppearanceError = {
     errorPrimary: {
         fill: 'errorTertiary',
         borderColor: 'errorBorderQuaternary',
@@ -77,7 +76,7 @@ var searchAppearanceError = {
     },
 };
 
-var searchAppearanceRequire = {
+const searchAppearanceRequire = {
     requirePrimary: {
         fill: 'warningTertiary',
         borderColor: 'warningBorderSecondary',
@@ -90,7 +89,7 @@ var searchAppearanceRequire = {
     },
 };
 
-var searchAppearanceShape = {
+const searchAppearanceShape = {
     circular: {
         shape: 'circular',
     },
@@ -115,7 +114,7 @@ var searchAppearanceShape = {
     },
 };
 
-var searchAppearanceSize = {
+const searchAppearanceSize = {
     sizeXXL: {
         size: 'xxl',
         iconBefore: icons24.Security.Search,
@@ -160,7 +159,7 @@ var searchAppearanceSize = {
     },
 };
 
-var searchAppearanceStyle = {
+const searchAppearanceStyle = {
     solid: {
         borderColor: 'none',
         borderColorHover: 'none',
@@ -177,7 +176,7 @@ var searchAppearanceStyle = {
     },
 };
 
-var searchAppearanceSuccess = {
+const searchAppearanceSuccess = {
     successPrimary: {
         fill: 'successTertiary',
         borderColor: 'accentBorderQuaternary',
@@ -190,46 +189,55 @@ var searchAppearanceSuccess = {
     },
 };
 
-var searchAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, searchAppearanceSize), searchAppearanceStyle), searchAppearanceDefault), searchAppearanceError), searchAppearanceSuccess), searchAppearanceRequire), searchAppearanceDisabled), searchAppearanceShape);
+const searchAppearance = {
+    ...searchAppearanceSize,
+    ...searchAppearanceStyle,
+    ...searchAppearanceDefault,
+    ...searchAppearanceError,
+    ...searchAppearanceSuccess,
+    ...searchAppearanceRequire,
+    ...searchAppearanceDisabled,
+    ...searchAppearanceShape,
+};
 
-var searchInputConfig = {
+const searchInputConfig = {
     appearance: searchAppearance,
-    setAppearance: function (appearanceConfig) {
+    setAppearance: (appearanceConfig) => {
         searchInputConfig.appearance = appearanceConfig;
     },
 };
-var SearchInput = React.forwardRef(function SearchInput(props, ref) {
-    var dataTour = props.dataTour, className = props.className, appearance = props.appearance, placeholder = props.placeholder, value = props.value, before = props.before, after = props.after, isActive = props.isActive, isSkeleton = props.isSkeleton, isDisabled = props.isDisabled, onChange = props.onChange, onClickClean = props.onClickClean, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
-    var onChangeSearchInput = useCallback(function (event) {
+const SearchInput = React.forwardRef(function SearchInput(props, ref) {
+    const { dataTour, className, appearance, placeholder, value, before, after, isActive, isSkeleton, isDisabled, onChange, onClickClean, onFocus, onKeyDown, } = props;
+    const onChangeSearchInput = useCallback((event) => {
         onChange && onChange(event.target.value);
     }, [onChange]);
-    var onClickClearIcon = useCallback(function (event) {
+    const onClickClearIcon = useCallback((event) => {
         event.stopPropagation();
         onChange && onChange('');
         if (onClickClean) {
             onClickClean();
         }
     }, [onChange, onClickClean]);
-    var appearanceConfig = useAppearanceConfig(appearance, searchInputConfig, isDisabled);
-    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var size = propsGenerator.size, fillClass = propsGenerator.fillClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, iconAfter = propsGenerator.iconAfter, iconAfterFill = propsGenerator.iconAfterFill, iconAfterSize = propsGenerator.iconAfterSize, iconAfterSrc = propsGenerator.iconAfterSrc, iconBefore = propsGenerator.iconBefore, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeSize = propsGenerator.iconBeforeSize, iconBeforeSrc = propsGenerator.iconBeforeSrc, iconClear = propsGenerator.iconClear, iconClearFill = propsGenerator.iconClearFill, iconClearSize = propsGenerator.iconClearSize, iconClearSrc = propsGenerator.iconClearSrc, inputFillClass = propsGenerator.inputFillClass, inputTextColorClass = propsGenerator.inputTextColorClass, inputTextSizeClass = propsGenerator.inputTextSizeClass, inputTextStyleClass = propsGenerator.inputTextStyleClass, inputTextWeightClass = propsGenerator.inputTextWeightClass, placeholderTextColor = propsGenerator.placeholderTextColor, placeholderTextSize = propsGenerator.placeholderTextSize, placeholderTextStyle = propsGenerator.placeholderTextStyle, placeholderTextWeight = propsGenerator.placeholderTextWeight, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, widthClass = propsGenerator.widthClass;
-    var searchInputStyles = useStyles(props).styles;
-    return (jsxs("label", { dataTour: dataTour, className: clsx(className, 'search-input', shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), fillClass && "fill_".concat(fillClass), widthClass && "width_".concat(widthClass), borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass && "border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), size && "search-input_size_".concat(size), isSkeleton && "search-input_skeleton"), style: searchInputStyles, children: [before, (iconBefore || iconBeforeSrc) && (jsx(Icon, { className: "search-input__icon-before", size: iconBeforeSize, iconFill: iconBeforeFill, imageSrc: iconBeforeSrc, SvgImage: iconBefore })), jsxs("div", { className: clsx('search-input__wrapper', inputFillClass && "fill_".concat(inputFillClass)), children: [jsx("input", { className: clsx('search-input__value', (inputTextSizeClass ||
+    const appearanceConfig = useAppearanceConfig(appearance, searchInputConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { size, fillClass, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, iconAfter, iconAfterFill, iconAfterSize, iconAfterSrc, iconBefore, iconBeforeFill, iconBeforeSize, iconBeforeSrc, iconClear, iconClearFill, iconClearSize, iconClearSrc, inputFillClass, inputTextColorClass, inputTextSizeClass, inputTextStyleClass, inputTextWeightClass, placeholderTextColor, placeholderTextSize, placeholderTextStyle, placeholderTextWeight, shapeClass, shapeStrengthClass, widthClass, } = propsGenerator;
+    const { styles: searchInputStyles } = useStyles(props);
+    return (jsxs("label", { dataTour: dataTour, className: clsx(className, 'search-input', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, fillClass && `fill_${fillClass}`, widthClass && `width_${widthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, size && `search-input_size_${size}`, isSkeleton && `search-input_skeleton`), style: searchInputStyles, children: [before, (iconBefore || iconBeforeSrc) && (jsx(Icon, { className: "search-input__icon-before", size: iconBeforeSize, iconFill: iconBeforeFill, imageSrc: iconBeforeSrc, SvgImage: iconBefore })), jsxs("div", { className: clsx('search-input__wrapper', inputFillClass && `fill_${inputFillClass}`), children: [jsx("input", { className: clsx('search-input__value', (inputTextSizeClass ||
                             inputTextWeightClass ||
                             inputTextColorClass ||
                             inputTextStyleClass) &&
-                            'text', inputTextSizeClass && "text_size_".concat(inputTextSizeClass), inputTextWeightClass && "text-weight_".concat(inputTextWeightClass), inputTextColorClass && "text-color_".concat(inputTextColorClass), inputTextStyleClass && "text-style_".concat(inputTextStyleClass)), type: "text", ref: ref, required: true, 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, textStyle: placeholderTextStyle, textWeight: placeholderTextWeight, children: placeholder }) }), value && (jsx(Icon, { className: clsx('search-input__clear', 'cursor_type_pointer', isActive && "fill_".concat(iconClearFill)), size: iconClearSize, iconFill: iconClearFill, imageSrc: iconClearSrc, SvgImage: iconClear, onClick: onClickClearIcon }))] }), (iconAfter || iconAfterSrc) && (jsx(Icon, { className: "search-input__icon-after", size: iconAfterSize, iconFill: iconAfterFill, imageSrc: iconAfterSrc, SvgImage: iconAfter })), after] }));
+                            'text', inputTextSizeClass && `text_size_${inputTextSizeClass}`, inputTextWeightClass && `text-weight_${inputTextWeightClass}`, inputTextColorClass && `text-color_${inputTextColorClass}`, inputTextStyleClass && `text-style_${inputTextStyleClass}`), type: "text", ref: ref, required: true, 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, textStyle: placeholderTextStyle, textWeight: placeholderTextWeight, children: placeholder }) }), value && (jsx(Icon, { className: clsx('search-input__clear', 'cursor_type_pointer', isActive && `fill_${iconClearFill}`), size: iconClearSize, iconFill: iconClearFill, imageSrc: iconClearSrc, SvgImage: iconClear, onClick: onClickClearIcon }))] }), (iconAfter || iconAfterSrc) && (jsx(Icon, { className: "search-input__icon-after", size: iconAfterSize, iconFill: iconAfterFill, imageSrc: iconAfterSrc, SvgImage: iconAfter })), after] }));
 });
 // @ts-expect-error
 SearchInput.DEFAULT_REF_STATE = {
     input: null,
 };
 
-var SearchResult = React.forwardRef(function SearchResult(props) {
-    var className = props.className, scrollHeight = props.scrollHeight, before = props.before, after = props.after, children = props.children;
-    var propsGenerator = useDevicePropsGenerator(props);
-    var fillClass = propsGenerator.fillClass, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass;
-    return (jsx("div", { className: clsx(className, 'search-result', shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), fillClass && "fill_".concat(fillClass)), children: jsxs("div", { className: "search-result__wrapper", children: [before, React.Children.toArray(children).filter(Boolean).length && (jsx(Scrollbar, { scrollHeight: scrollHeight ? "".concat(scrollHeight, "px") : '300px', children: children })), after] }) }));
+const SearchResult = React.forwardRef(function SearchResult(props) {
+    const { className, scrollHeight, before, after, children } = props;
+    const propsGenerator = useDevicePropsGenerator(props);
+    const { fillClass, shapeClass, shapeStrengthClass } = propsGenerator;
+    return (jsx("div", { className: clsx(className, 'search-result', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, fillClass && `fill_${fillClass}`), children: jsxs("div", { className: "search-result__wrapper", children: [before, React.Children.toArray(children).filter(Boolean).length && (jsx(Scrollbar, { scrollHeight: scrollHeight ? `${scrollHeight}px` : '300px', children: children })), after] }) }));
 });
 
 export { SearchInput, SearchResult, searchAppearance, searchInputConfig };

package/dist/components/Segmented/stories/__mock__.js

@@ -1,7 +1,6 @@
-import { _ as __assign } from '../../../tslib.es6_es_Bwu1Cn-t.js';
 import { icons24, icons20, icons16, icons14 } from '@itcase/icons/default';
 
-var segmentedMock = {
+const segmentedMock = {
     activeSegment: {
         value: 1,
     },
@@ -32,17 +31,31 @@ var segmentedMock = {
         },
     ],
 };
-var segmentedLabelMock = segmentedMock === null || segmentedMock === void 0 ? void 0 : segmentedMock.segments.map(function (segment) { return ({
+const segmentedLabelMock = segmentedMock?.segments.map((segment) => ({
     label: segment.label,
     value: segment.value,
-}); });
-var segmentedIconMock = segmentedMock === null || segmentedMock === void 0 ? void 0 : segmentedMock.segments.map(function (segment) { return ({
+}));
+const segmentedIconMock = segmentedMock?.segments
+    .map((segment) => ({
     iconBefore: segment.iconBefore,
-}); }).slice(3);
-var segmentedMockSize = {
-    14: segmentedMock.segments.map(function (segment) { return (__assign(__assign({}, segment), { iconAfter: icons14.Placeholder.Default, iconBefore: icons14.Placeholder.Default })); }),
-    16: segmentedMock.segments.map(function (segment) { return (__assign(__assign({}, segment), { iconAfter: icons16.Placeholder.Default, iconBefore: icons16.Placeholder.Default })); }),
-    20: segmentedMock.segments.map(function (segment) { return (__assign(__assign({}, segment), { iconAfter: icons20.Placeholder.Default, iconBefore: icons20.Placeholder.Default })); }),
+}))
+    .slice(3);
+const segmentedMockSize = {
+    14: segmentedMock.segments.map((segment) => ({
+        ...segment,
+        iconAfter: icons14.Placeholder.Default,
+        iconBefore: icons14.Placeholder.Default,
+    })),
+    16: segmentedMock.segments.map((segment) => ({
+        ...segment,
+        iconAfter: icons16.Placeholder.Default,
+        iconBefore: icons16.Placeholder.Default,
+    })),
+    20: segmentedMock.segments.map((segment) => ({
+        ...segment,
+        iconAfter: icons20.Placeholder.Default,
+        iconBefore: icons20.Placeholder.Default,
+    })),
 };
 
 export { segmentedIconMock, segmentedLabelMock, segmentedMock, segmentedMockSize };

package/dist/components/Segmented.js

@@ -1,11 +1,10 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useRef, useMemo, createRef, useCallback, useEffect } from 'react';
 import clsx from 'clsx';
-import { I as Icon } from '../Icon_es_BrwLifge.js';
+import { I as Icon } from '../Icon_es_D5eiycFI.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { T as Text } from '../Text_es_CwV9rjFD.js';
-import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
+import { T as Text } from '../Text_es_CnymlElo.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '@itcase/common';
@@ -22,10 +21,10 @@ import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Link_es_XiqbdwLp.js';
+import '../Link_es_P2b6ya7P.js';
 import 'lodash/castArray';
 
-var segmentedAppearanceDefault = {
+const segmentedAppearanceDefault = {
     defaultPrimary: {
         fill: 'surfacePrimary',
         fillActive: 'accentPrimary',
@@ -62,7 +61,7 @@ var segmentedAppearanceDefault = {
     },
 };
 
-var segmentedAppearanceDisabled = {
+const segmentedAppearanceDisabled = {
     disabledPrimary: {
         fill: 'surfaceDisabled',
         fillActive: 'surfaceItemTertiary',
@@ -78,7 +77,7 @@ var segmentedAppearanceDisabled = {
     },
 };
 
-var segmentedAppearanceError = {
+const segmentedAppearanceError = {
     errorPrimary: {
         fill: 'errorTertiary',
         fillActive: 'errorPrimary',
@@ -96,7 +95,7 @@ var segmentedAppearanceError = {
     },
 };
 
-var segmentedAppearanceShape = {
+const segmentedAppearanceShape = {
     circular: {
         shape: 'circular',
     },
@@ -121,7 +120,7 @@ var segmentedAppearanceShape = {
     },
 };
 
-var segmentedAppearanceSize = {
+const segmentedAppearanceSize = {
     sizeL: {
         size: 'l',
         labelTextSize: 'm',
@@ -149,7 +148,7 @@ var segmentedAppearanceSize = {
     },
 };
 
-var segmentedAppearanceStyle = {
+const segmentedAppearanceStyle = {
     solid: {
         borderColor: 'none',
     },
@@ -165,7 +164,7 @@ var segmentedAppearanceStyle = {
     },
 };
 
-var segmentedAppearanceSuccess = {
+const segmentedAppearanceSuccess = {
     successPrimary: {
         fill: 'successTertiary',
         fillActive: 'successItemSecondary',
@@ -183,7 +182,7 @@ var segmentedAppearanceSuccess = {
     },
 };
 
-var segmentedAppearanceWarning = {
+const segmentedAppearanceWarning = {
     warningPrimary: {
         fill: 'warningTertiary',
         fillActive: 'accentPrimary',
@@ -202,55 +201,61 @@ var segmentedAppearanceWarning = {
     },
 };
 
-var segmentedAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, segmentedAppearanceDisabled), segmentedAppearanceSize), segmentedAppearanceShape), segmentedAppearanceStyle), segmentedAppearanceError), segmentedAppearanceSuccess), segmentedAppearanceDefault), segmentedAppearanceWarning);
+const segmentedAppearance = {
+    ...segmentedAppearanceDisabled,
+    ...segmentedAppearanceSize,
+    ...segmentedAppearanceShape,
+    ...segmentedAppearanceStyle,
+    ...segmentedAppearanceError,
+    ...segmentedAppearanceSuccess,
+    ...segmentedAppearanceDefault,
+    ...segmentedAppearanceWarning,
+};
 
-var segmentedConfig = {
+const segmentedConfig = {
     appearance: segmentedAppearance,
-    setAppearance: function (appearanceConfig) {
+    setAppearance: (appearanceConfig) => {
         segmentedConfig.appearance = appearanceConfig;
     },
 };
-var Segmented = function (props) {
-    var className = props.className, name = props.name, appearance = props.appearance, isDisabled = props.isDisabled, _a = props.activeSegment, activeSegment = _a === void 0 ? {} : _a, segments = props.segments, isDisabled = props.isDisabled, setActiveSegment = props.setActiveSegment, isSkeleton = props.isSkeleton, onChange = props.onChange;
-    var controlRef = useRef(null);
-    var segmentsRefs = useMemo(function () {
-        return new Map(segments.map(function (item) { return [item.value, createRef()]; }));
-    }, [segments]);
-    var onChangeValue = useCallback(function (item) {
+const Segmented = (props) => {
+    const { appearance, className, name, activeSegment = {}, segments, isDisabled, isSkeleton, setActiveSegment, onChange, } = props;
+    const controlRef = useRef(null);
+    const segmentsRefs = useMemo(() => new Map(segments.map((item) => [item.value, createRef()])), [segments]);
+    const onChangeValue = useCallback((item) => {
         onChange && onChange(item.value, name);
         setActiveSegment && setActiveSegment(item);
     }, [name, onChange, setActiveSegment]);
-    useEffect(function () {
-        var _a, _b;
-        var offsetWidth = 0;
-        var offsetLeft = 0;
-        var activeSegmentRef = segmentsRefs.get(activeSegment === null || activeSegment === void 0 ? void 0 : activeSegment.value);
-        if (activeSegmentRef === null || activeSegmentRef === void 0 ? void 0 : activeSegmentRef.current) {
+    useEffect(() => {
+        let offsetWidth = 0;
+        let offsetLeft = 0;
+        const activeSegmentRef = segmentsRefs.get(activeSegment?.value);
+        if (activeSegmentRef?.current) {
             offsetWidth = activeSegmentRef.current.offsetWidth;
             offsetLeft = activeSegmentRef.current.offsetLeft;
         }
-        (_a = controlRef.current) === null || _a === void 0 ? void 0 : _a.style.setProperty('--segmented-active-width', "".concat(offsetWidth, "px"));
+        controlRef.current?.style.setProperty('--segmented-active-width', `${offsetWidth}px`);
         // controlRef.current.style.setProperty('--segmented-active-x-pos', `${offsetLeft - 2}px`)
-        (_b = controlRef.current) === null || _b === void 0 ? void 0 : _b.style.setProperty('--segmented-active-x-pos', "".concat(offsetLeft, "px"));
+        controlRef.current?.style.setProperty('--segmented-active-x-pos', `${offsetLeft}px`);
     }, [activeSegment, segmentsRefs]);
-    var appearanceConfig = useAppearanceConfig(appearance, segmentedConfig, isDisabled);
-    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, labelTextActiveColor = propsGenerator.labelTextActiveColor, labelTextActiveHoverColor = propsGenerator.labelTextActiveHoverColor, labelTextColor = propsGenerator.labelTextColor, labelTextHoverColor = propsGenerator.labelTextHoverColor, labelTextSize = propsGenerator.labelTextSize, labelTextWrap = propsGenerator.labelTextWrap, iconFillDisabled = propsGenerator.iconFillDisabled, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, iconFill = propsGenerator.iconFill, iconFillActive = propsGenerator.iconFillActive, iconSize = propsGenerator.iconSize, indicatorFillClass = propsGenerator.indicatorFillClass, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
-    return (jsx("div", { className: clsx(className, 'segmented', shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), fillClass && "fill_".concat(fillClass), widthClass && "segmented_width_".concat(widthClass), sizeClass && "segmented_size_".concat(sizeClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), isSkeleton && "segmented_skeleton"), ref: controlRef, children: jsx("div", { className: "segmented__wrapper", children: jsxs("div", { className: clsx('segmented__wrapper-inner'), children: [segments === null || segments === void 0 ? void 0 : segments.map(function (item) {
-                        var isActive = String(activeSegment === null || activeSegment === void 0 ? void 0 : activeSegment.value) === String(item.value);
-                        return (jsx("div", { className: clsx('segmented__item', !item.label && 'segmented__item_icon', sizeClass && "segmented__item_size_".concat(sizeClass), isActive && 'segmented__item_active', !isActive && isDisabled && 'segmented__item_state_disabled', isActive &&
+    const appearanceConfig = useAppearanceConfig(appearance, segmentedConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, labelTextActiveColor, labelTextActiveHoverColor, labelTextColor, labelTextHoverColor, labelTextSize, labelTextWrap, borderColorClass, borderTypeClass, borderWidthClass, iconFill, iconFillActive, iconFillDisabled, iconSize, indicatorFillClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
+    return (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, children: jsx("div", { className: "segmented__wrapper", children: jsxs("div", { className: clsx('segmented__wrapper-inner'), children: [segments?.map((item) => {
+                        const isActive = String(activeSegment?.value) === String(item.value);
+                        return (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
-                                ? fillHoverClass && "fill_hover_".concat(fillHoverClass)
+                                ? fillHoverClass && `fill_hover_${fillHoverClass}`
                                 : fillActiveHoverClass &&
-                                    "fill_active_hover_".concat(fillActiveHoverClass), isActive &&
+                                    `fill_active_hover_${fillActiveHoverClass}`, isActive &&
                                 fillActiveClass &&
-                                "fill_active_".concat(fillActiveClass)), ref: segmentsRefs.get(item.value), onClick: function () { return !isDisabled && onChangeValue(item); }, children: jsxs("div", { className: clsx('segmented__item-label', sizeClass && "segmented_size_".concat(sizeClass)), children: [item.iconBefore || item.iconBeforeActive ? (jsx(Icon, { className: "segmented__item-icon", iconFillDisabled: iconFillDisabled, isDisabled: isDisabled, iconFill: iconFill, iconFillActive: iconFillActive, iconSize: iconSize, SvgImage: isActive
+                                `fill_active_${fillActiveClass}`), ref: segmentsRefs.get(item.value), onClick: () => !isDisabled && onChangeValue(item), children: jsxs("div", { className: clsx('segmented__item-label', sizeClass && `segmented_size_${sizeClass}`), children: [item.iconBefore || item.iconBeforeActive ? (jsx(Icon, { className: "segmented__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive
                                             ? item.iconBeforeActive || item.iconBefore
-                                            : item.iconBefore, isActive: isActive })) : null, item.label && (jsx(Text, { size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveHoverColor, textColorHover: labelTextHoverColor, textWrap: labelTextWrap, isActive: isActive, children: item.label })), item.icon || item.iconActive ? (jsx(Icon, { className: "segmented__item-icon", iconFillDisabled: iconFillDisabled, isDisabled: isDisabled, iconFill: iconFill, iconFillActive: iconFillActive, iconSize: iconSize, SvgImage: isActive ? item.iconActive || item.icon : item.icon, isActive: isActive })) : null, item.iconAfter || item.iconAfterActive ? (jsx(Icon, { className: "segmented__item-icon", iconFillDisabled: iconFillDisabled, isDisabled: isDisabled, iconFill: iconFill, iconFillActive: iconFillActive, iconSize: iconSize, SvgImage: isActive
+                                            : item.iconBefore, isActive: isActive, isDisabled: isDisabled })) : null, item.label && (jsx(Text, { size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveHoverColor, textColorHover: labelTextHoverColor, textWrap: labelTextWrap, isActive: isActive, children: item.label })), item.icon || item.iconActive ? (jsx(Icon, { className: "segmented__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive ? item.iconActive || item.icon : item.icon, isActive: isActive, isDisabled: isDisabled })) : null, item.iconAfter || item.iconAfterActive ? (jsx(Icon, { className: "segmented__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive
                                             ? item.iconAfterActive || item.iconAfter
-                                            : item.iconAfter, isActive: isActive })) : null] }) }, "".concat(name, "-").concat(item.value)));
-                    }), jsx("div", { className: clsx('segmented__indicator', indicatorFillClass && "fill_".concat(indicatorFillClass)) })] }) }) }));
+                                            : item.iconAfter, isActive: isActive, isDisabled: isDisabled })) : null] }) }, `${name}-${item.value}`));
+                    }), jsx("div", { className: clsx('segmented__indicator', indicatorFillClass && `fill_${indicatorFillClass}`) })] }) }) }));
 };
 
 export { Segmented, segmentedAppearance, segmentedConfig };