@itcase/ui 1.8.122 → 1.8.124

package/dist/cjs/components/Search.js

@@ -1,6 +1,5 @@
 'use strict';
 
-var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
 var _default = require('@itcase/icons/default');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
@@ -8,9 +7,9 @@ var clsx = require('clsx');
 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_Cz6IyOkb.js');
-var Text = require('../../Text_cjs_0EINiUq4.js');
-var Scrollbar = require('../../Scrollbar_cjs_DcKOfcNp.js');
+var Icon = require('../../Icon_cjs_DpFxIFv5.js');
+var Text = require('../../Text_cjs_BDTjOTVB.js');
+var Scrollbar = require('../../Scrollbar_cjs_Cp-7v2Mt.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
@@ -27,10 +26,10 @@ require('lodash/maxBy');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
-require('../../Link_cjs_C5UsZUiF.js');
+require('../../Link_cjs_qKXVfU8e.js');
 require('react-scrollbars-custom');
 
-var searchAppearanceDefault = {
+const searchAppearanceDefault = {
     defaultPrimary: {
         fill: 'surfaceSecondary',
         borderColor: 'surfaceBorderQuaternary',
@@ -53,7 +52,7 @@ var searchAppearanceDefault = {
     },
 };
 
-var searchAppearanceDisabled = {
+const searchAppearanceDisabled = {
     disabledPrimary: {
         fill: 'surfaceDisabled',
         borderColor: 'surfaceBorderDisabled',
@@ -66,7 +65,7 @@ var searchAppearanceDisabled = {
     },
 };
 
-var searchAppearanceError = {
+const searchAppearanceError = {
     errorPrimary: {
         fill: 'errorTertiary',
         borderColor: 'errorBorderQuaternary',
@@ -79,7 +78,7 @@ var searchAppearanceError = {
     },
 };
 
-var searchAppearanceRequire = {
+const searchAppearanceRequire = {
     requirePrimary: {
         fill: 'warningTertiary',
         borderColor: 'warningBorderSecondary',
@@ -92,7 +91,7 @@ var searchAppearanceRequire = {
     },
 };
 
-var searchAppearanceShape = {
+const searchAppearanceShape = {
     circular: {
         shape: 'circular',
     },
@@ -117,7 +116,7 @@ var searchAppearanceShape = {
     },
 };
 
-var searchAppearanceSize = {
+const searchAppearanceSize = {
     sizeXXL: {
         size: 'xxl',
         iconBefore: _default.icons24.Security.Search,
@@ -162,7 +161,7 @@ var searchAppearanceSize = {
     },
 };
 
-var searchAppearanceStyle = {
+const searchAppearanceStyle = {
     solid: {
         borderColor: 'none',
         borderColorHover: 'none',
@@ -179,7 +178,7 @@ var searchAppearanceStyle = {
     },
 };
 
-var searchAppearanceSuccess = {
+const searchAppearanceSuccess = {
     successPrimary: {
         fill: 'successTertiary',
         borderColor: 'accentBorderQuaternary',
@@ -192,46 +191,55 @@ var searchAppearanceSuccess = {
     },
 };
 
-var searchAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__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 = React.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 = React.useCallback((event) => {
         onChange && onChange(event.target.value);
     }, [onChange]);
-    var onClickClearIcon = React.useCallback(function (event) {
+    const onClickClearIcon = React.useCallback((event) => {
         event.stopPropagation();
         onChange && onChange('');
         if (onClickClean) {
             onClickClean();
         }
     }, [onChange, onClickClean]);
-    var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, searchInputConfig, isDisabled);
-    var propsGenerator = useDevicePropsGenerator.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.useStyles(props).styles;
-    return (jsxRuntime.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) && (jsxRuntime.jsx(Icon.Icon, { className: "search-input__icon-before", size: iconBeforeSize, iconFill: iconBeforeFill, imageSrc: iconBeforeSrc, SvgImage: iconBefore })), jsxRuntime.jsxs("div", { className: clsx('search-input__wrapper', inputFillClass && "fill_".concat(inputFillClass)), children: [jsxRuntime.jsx("input", { className: clsx('search-input__value', (inputTextSizeClass ||
+    const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, searchInputConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator.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.useStyles(props);
+    return (jsxRuntime.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) && (jsxRuntime.jsx(Icon.Icon, { className: "search-input__icon-before", size: iconBeforeSize, iconFill: iconBeforeFill, imageSrc: iconBeforeSrc, SvgImage: iconBefore })), jsxRuntime.jsxs("div", { className: clsx('search-input__wrapper', inputFillClass && `fill_${inputFillClass}`), children: [jsxRuntime.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 }), jsxRuntime.jsx("div", { className: "search-input__placeholder", children: jsxRuntime.jsx(Text.Text, { className: clsx('search-input__placeholder-value'), size: placeholderTextSize, textColor: placeholderTextColor, textStyle: placeholderTextStyle, textWeight: placeholderTextWeight, children: placeholder }) }), value && (jsxRuntime.jsx(Icon.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) && (jsxRuntime.jsx(Icon.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 }), jsxRuntime.jsx("div", { className: "search-input__placeholder", children: jsxRuntime.jsx(Text.Text, { className: clsx('search-input__placeholder-value'), size: placeholderTextSize, textColor: placeholderTextColor, textStyle: placeholderTextStyle, textWeight: placeholderTextWeight, children: placeholder }) }), value && (jsxRuntime.jsx(Icon.Icon, { className: clsx('search-input__clear', 'cursor_type_pointer', isActive && `fill_${iconClearFill}`), size: iconClearSize, iconFill: iconClearFill, imageSrc: iconClearSrc, SvgImage: iconClear, onClick: onClickClearIcon }))] }), (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon.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.useDevicePropsGenerator(props);
-    var fillClass = propsGenerator.fillClass, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass;
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'search-result', shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), fillClass && "fill_".concat(fillClass)), children: jsxRuntime.jsxs("div", { className: "search-result__wrapper", children: [before, React.Children.toArray(children).filter(Boolean).length && (jsxRuntime.jsx(Scrollbar.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.useDevicePropsGenerator(props);
+    const { fillClass, shapeClass, shapeStrengthClass } = propsGenerator;
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'search-result', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, fillClass && `fill_${fillClass}`), children: jsxRuntime.jsxs("div", { className: "search-result__wrapper", children: [before, React.Children.toArray(children).filter(Boolean).length && (jsxRuntime.jsx(Scrollbar.Scrollbar, { scrollHeight: scrollHeight ? `${scrollHeight}px` : '300px', children: children })), after] }) }));
 });
 
 exports.SearchInput = SearchInput;

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

@@ -1,9 +1,8 @@
 'use strict';
 
-var tslib_es6 = require('../../../../tslib.es6_cjs_CCZ3TN_7.js');
 var _default = require('@itcase/icons/default');
 
-var segmentedMock = {
+const segmentedMock = {
     activeSegment: {
         value: 1,
     },
@@ -34,17 +33,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 (tslib_es6.__assign(tslib_es6.__assign({}, segment), { iconAfter: _default.icons14.Placeholder.Default, iconBefore: _default.icons14.Placeholder.Default })); }),
-    16: segmentedMock.segments.map(function (segment) { return (tslib_es6.__assign(tslib_es6.__assign({}, segment), { iconAfter: _default.icons16.Placeholder.Default, iconBefore: _default.icons16.Placeholder.Default })); }),
-    20: segmentedMock.segments.map(function (segment) { return (tslib_es6.__assign(tslib_es6.__assign({}, segment), { iconAfter: _default.icons20.Placeholder.Default, iconBefore: _default.icons20.Placeholder.Default })); }),
+}))
+    .slice(3);
+const segmentedMockSize = {
+    14: segmentedMock.segments.map((segment) => ({
+        ...segment,
+        iconAfter: _default.icons14.Placeholder.Default,
+        iconBefore: _default.icons14.Placeholder.Default,
+    })),
+    16: segmentedMock.segments.map((segment) => ({
+        ...segment,
+        iconAfter: _default.icons16.Placeholder.Default,
+        iconBefore: _default.icons16.Placeholder.Default,
+    })),
+    20: segmentedMock.segments.map((segment) => ({
+        ...segment,
+        iconAfter: _default.icons20.Placeholder.Default,
+        iconBefore: _default.icons20.Placeholder.Default,
+    })),
 };
 
 exports.segmentedIconMock = segmentedIconMock;

package/dist/cjs/components/Segmented.js

@@ -3,11 +3,10 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var Icon = require('../../Icon_cjs_Cz6IyOkb.js');
+var Icon = require('../../Icon_cjs_DpFxIFv5.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var Text = require('../../Text_cjs_0EINiUq4.js');
-var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
+var Text = require('../../Text_cjs_BDTjOTVB.js');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('@itcase/common');
@@ -24,10 +23,10 @@ require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('../hooks.js');
 require('../hooks/useStyles/styleAttributes.js');
-require('../../Link_cjs_C5UsZUiF.js');
+require('../../Link_cjs_qKXVfU8e.js');
 require('lodash/castArray');
 
-var segmentedAppearanceDefault = {
+const segmentedAppearanceDefault = {
     defaultPrimary: {
         fill: 'surfacePrimary',
         fillActive: 'accentPrimary',
@@ -64,7 +63,7 @@ var segmentedAppearanceDefault = {
     },
 };
 
-var segmentedAppearanceDisabled = {
+const segmentedAppearanceDisabled = {
     disabledPrimary: {
         fill: 'surfaceDisabled',
         fillActive: 'surfaceItemTertiary',
@@ -80,7 +79,7 @@ var segmentedAppearanceDisabled = {
     },
 };
 
-var segmentedAppearanceError = {
+const segmentedAppearanceError = {
     errorPrimary: {
         fill: 'errorTertiary',
         fillActive: 'errorPrimary',
@@ -98,7 +97,7 @@ var segmentedAppearanceError = {
     },
 };
 
-var segmentedAppearanceShape = {
+const segmentedAppearanceShape = {
     circular: {
         shape: 'circular',
     },
@@ -123,7 +122,7 @@ var segmentedAppearanceShape = {
     },
 };
 
-var segmentedAppearanceSize = {
+const segmentedAppearanceSize = {
     sizeL: {
         size: 'l',
         labelTextSize: 'm',
@@ -151,7 +150,7 @@ var segmentedAppearanceSize = {
     },
 };
 
-var segmentedAppearanceStyle = {
+const segmentedAppearanceStyle = {
     solid: {
         borderColor: 'none',
     },
@@ -167,7 +166,7 @@ var segmentedAppearanceStyle = {
     },
 };
 
-var segmentedAppearanceSuccess = {
+const segmentedAppearanceSuccess = {
     successPrimary: {
         fill: 'successTertiary',
         fillActive: 'successItemSecondary',
@@ -185,7 +184,7 @@ var segmentedAppearanceSuccess = {
     },
 };
 
-var segmentedAppearanceWarning = {
+const segmentedAppearanceWarning = {
     warningPrimary: {
         fill: 'warningTertiary',
         fillActive: 'accentPrimary',
@@ -204,55 +203,61 @@ var segmentedAppearanceWarning = {
     },
 };
 
-var segmentedAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__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 = React.useRef(null);
-    var segmentsRefs = React.useMemo(function () {
-        return new Map(segments.map(function (item) { return [item.value, React.createRef()]; }));
-    }, [segments]);
-    var onChangeValue = React.useCallback(function (item) {
+const Segmented = (props) => {
+    const { appearance, className, 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) => {
         onChange && onChange(item.value, name);
         setActiveSegment && setActiveSegment(item);
     }, [name, onChange, setActiveSegment]);
-    React.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) {
+    React.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.useAppearanceConfig(appearance, segmentedConfig, isDisabled);
-    var propsGenerator = useDevicePropsGenerator.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 (jsxRuntime.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: jsxRuntime.jsx("div", { className: "segmented__wrapper", children: jsxRuntime.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 (jsxRuntime.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.useAppearanceConfig(appearance, segmentedConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator.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 (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, 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);
+                        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
-                                ? 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: jsxRuntime.jsxs("div", { className: clsx('segmented__item-label', sizeClass && "segmented_size_".concat(sizeClass)), children: [item.iconBefore || item.iconBeforeActive ? (jsxRuntime.jsx(Icon.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: jsxRuntime.jsxs("div", { className: clsx('segmented__item-label', sizeClass && `segmented_size_${sizeClass}`), children: [item.iconBefore || item.iconBeforeActive ? (jsxRuntime.jsx(Icon.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 && (jsxRuntime.jsx(Text.Text, { size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveHoverColor, textColorHover: labelTextHoverColor, textWrap: labelTextWrap, isActive: isActive, children: item.label })), item.icon || item.iconActive ? (jsxRuntime.jsx(Icon.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 ? (jsxRuntime.jsx(Icon.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 && (jsxRuntime.jsx(Text.Text, { size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveHoverColor, textColorHover: labelTextHoverColor, textWrap: labelTextWrap, isActive: isActive, children: item.label })), item.icon || item.iconActive ? (jsxRuntime.jsx(Icon.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 ? (jsxRuntime.jsx(Icon.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)));
-                    }), jsxRuntime.jsx("div", { className: clsx('segmented__indicator', indicatorFillClass && "fill_".concat(indicatorFillClass)) })] }) }) }));
+                                            : item.iconAfter, isActive: isActive, isDisabled: isDisabled })) : null] }) }, `${name}-${item.value}`));
+                    }), jsxRuntime.jsx("div", { className: clsx('segmented__indicator', indicatorFillClass && `fill_${indicatorFillClass}`) })] }) }) }));
 };
 
 exports.Segmented = Segmented;