@itcase/ui 1.8.109 → 1.8.111

package/dist/components/Radio.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { T as Text } from '../Text_es_CtCwsa3V.js';
+import { T as Text } from '../Text_es_CwV9rjFD.js';
 import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react';
 import 'lodash/camelCase';
@@ -25,13 +25,16 @@ var radioAppearanceDefault = {
         fill: 'surfaceSecondary',
         fillCheckmark: 'surfaceQuaternary',
         fillDisabled: 'errorPrimary',
-        fillRadioClass: 'accentPrimary',
+        fillRadio: 'surfaceSecondary',
+        fillRadioHover: 'surfaceTertiary',
         labelTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderQuaternary',
-        borderColorCheckmark: 'accentPrimary',
-        borderColorRadio: 'surfaceBorderQuaternary',
-        borderColorRadioActive: 'surfaceBorderQuaternary',
+        borderRadioColor: 'surfaceBorderQuaternary',
+        borderRadioColorHover: 'surfaceBorderQuaternary',
+        borderRadioColorActive: 'surfaceBorderQuaternary',
+        borderRadioColorActiveHover: 'surfaceBorderQuaternary',
+        shape: 'circular',
     },
 };
 
@@ -42,8 +45,10 @@ var radioAppearanceDisabled = {
         labelTextColor: 'surfaceTextDisabled',
         descTextColor: 'surfaceTextDisabled',
         borderColor: 'surfaceBorderDisabled',
-        borderColorRadio: 'surfaceBorderDisabled',
-        borderColorRadioActive: 'surfaceBorderDisabled',
+        borderRadioColor: 'surfaceBorderQuaternary',
+        borderRadioColorHover: 'surfaceBorderQuaternary',
+        borderRadioColorActive: 'surfaceBorderQuaternary',
+        borderRadioColorActiveHover: 'surfaceBorderQuaternary',
     },
 };
 
@@ -54,8 +59,10 @@ var radioAppearanceError = {
         labelTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
         borderColor: 'errorBorderQuaternary',
-        borderColorRadio: 'errorBorderQuaternary',
-        borderColorRadioActive: 'errorBorderQuaternary',
+        borderRadioColor: 'surfaceBorderQuaternary',
+        borderRadioColorHover: 'surfaceBorderQuaternary',
+        borderRadioColorActive: 'surfaceBorderQuaternary',
+        borderRadioColorActiveHover: 'surfaceBorderQuaternary',
     },
 };
 
@@ -66,8 +73,10 @@ var radioAppearanceRequire = {
         labelTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
         borderColor: 'warningBorderSecondary',
-        borderColorRadio: 'warningBorderSecondary',
-        borderColorRadioActive: 'warningBorderSecondary',
+        borderRadioColor: 'surfaceBorderQuaternary',
+        borderRadioColorHover: 'surfaceBorderQuaternary',
+        borderRadioColorActive: 'surfaceBorderQuaternary',
+        borderRadioColorActiveHover: 'surfaceBorderQuaternary',
     },
 };
 
@@ -78,21 +87,21 @@ var radioAppearanceShape = {
     rounded: {
         shape: 'rounded',
     },
-    roundedS: {
-        shape: 'rounded',
-        shapeStrength: '0_5m',
-    },
-    roundedM: {
+    roundedXL: {
         shape: 'rounded',
-        shapeStrength: '1m',
+        shapeStrength: '2m',
     },
     roundedL: {
         shape: 'rounded',
         shapeStrength: '1_5m',
     },
-    roundedXL: {
+    roundedM: {
         shape: 'rounded',
-        shapeStrength: '2m',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
     },
 };
 
@@ -116,15 +125,25 @@ var radioAppearanceSize = {
 
 var radioAppearanceStyle = {
     solid: {
+        fill: 'none',
+        fillHover: 'none',
         borderColor: 'none',
+        borderColorHover: 'none',
+        borderRadioColor: 'none',
+        borderRadioColorActive: 'none',
+        borderRadioColorActiveHover: 'none',
+        borderRadioColorHover: 'none',
     },
     outlined: {
         fill: 'none',
+        fillHover: 'none',
     },
     full: {},
     ghost: {
         fill: 'none',
+        fillHover: 'none',
         borderColor: 'none',
+        borderColorHover: 'none',
     },
 };
 
@@ -135,8 +154,10 @@ var radioAppearanceSuccess = {
         labelTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
         borderColor: 'accentBorderSecondary',
-        borderColorRadio: 'accentBorderSecondary',
-        borderColorRadioActive: 'accentBorderSecondary',
+        borderRadioColor: 'surfaceBorderQuaternary',
+        borderRadioColorHover: 'surfaceBorderQuaternary',
+        borderRadioColorActive: 'surfaceBorderQuaternary',
+        borderRadioColorActiveHover: 'surfaceBorderQuaternary',
     },
 };
 
@@ -150,22 +171,23 @@ var radioConfig = {
 };
 function Radio(props) {
     var id = props.id, className = props.className, appearance = props.appearance, label = props.label, desc = props.desc, isDisabled = props.isDisabled, checked = props.checked, _a = props.tag, Tag = _a === void 0 ? 'label' : _a, value = props.value, isActive = props.isActive, isSkeleton = props.isSkeleton, onChange = props.onChange;
-    var appearanceConfig = useAppearanceConfig(appearance, radioConfig);
+    var appearanceConfig = useAppearanceConfig(appearance, radioConfig, isDisabled);
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var fillCheckmarkClass = propsGenerator.fillCheckmarkClass, fillClass = propsGenerator.fillClass, fillRadioActiveClass = propsGenerator.fillRadioActiveClass, fillRadioActiveHoverClass = propsGenerator.fillRadioActiveHoverClass, fillRadioClass = propsGenerator.fillRadioClass, fillRadioHoverClass = propsGenerator.fillRadioHoverClass, labelTextColor = propsGenerator.labelTextColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, descTextWeight = propsGenerator.descTextWeight, borderColorClass = propsGenerator.borderColorClass, borderColorRadioActiveClass = propsGenerator.borderColorRadioActiveClass, borderColorRadioActiveHoverClass = propsGenerator.borderColorRadioActiveHoverClass, borderColorRadioClass = propsGenerator.borderColorRadioClass, borderColorRadioHoverClass = propsGenerator.borderColorRadioHoverClass, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass;
-    return (jsxs(Tag, { className: clsx(className, 'radio', fillClass && "fill_".concat(fillClass), borderColorClass && "border-color_".concat(borderColorClass), isSkeleton && 'radio_skeleton', sizeClass && "radio_size_".concat(sizeClass)), htmlFor: id, children: [jsxs("div", { className: "radio__item", children: [jsx("input", { id: id, className: "radio__input", type: "radio", disabled: isDisabled && 'disabled', checked: checked, value: value, onChange: onChange }), jsx("div", { className: clsx('radio__state', !checked || !isActive
-                            ? fillRadioClass && "fill_".concat(fillRadioClass)
-                            : fillRadioActiveClass && "fill_active_".concat(fillRadioActiveClass), !checked || !isActive
-                            ? fillRadioHoverClass && "fill_hover_".concat(fillRadioHoverClass)
-                            : fillRadioActiveHoverClass &&
-                                "fill_active_hover_".concat(fillRadioActiveHoverClass), !checked || !isActive
-                            ? borderColorRadioClass && "border-color_".concat(borderColorRadioClass)
-                            : borderColorRadioActiveClass &&
-                                "border-color_active_".concat(borderColorRadioActiveClass), !checked || !isActive
-                            ? borderColorRadioHoverClass &&
-                                "border-color_hover_".concat(borderColorRadioHoverClass)
-                            : borderColorRadioActiveHoverClass &&
-                                "border-color_active_hover_".concat(borderColorRadioActiveHoverClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass)), children: "\u00A0" }), jsx("div", { className: clsx('radio__state-checkmark', checked && fillCheckmarkClass && "fill_".concat(fillCheckmarkClass)), children: "\u00A0" })] }), label && (jsx(Text, { className: "radio__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (jsx(Text, { className: "radio__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }))] }));
+    var fillCheckmarkClass = propsGenerator.fillCheckmarkClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, fillRadioActiveClass = propsGenerator.fillRadioActiveClass, fillRadioActiveHoverClass = propsGenerator.fillRadioActiveHoverClass, fillRadioClass = propsGenerator.fillRadioClass, fillRadioHoverClass = propsGenerator.fillRadioHoverClass, labelTextColor = propsGenerator.labelTextColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, descTextWeight = propsGenerator.descTextWeight, borderRadioColorClass = propsGenerator.borderRadioColorClass, borderRadioColorActiveClass = propsGenerator.borderRadioColorActiveClass, borderRadioColorActiveHoverClass = propsGenerator.borderRadioColorActiveHoverClass, borderRadioColorHoverClass = propsGenerator.borderRadioColorHoverClass, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass;
+    return (jsxs(Tag, { className: clsx(className, 'radio', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_".concat(fillHoverClass), isSkeleton && 'radio_skeleton', sizeClass && "radio_size_".concat(sizeClass), !checked || !isActive
+            ? fillRadioClass && "radio_fill_".concat(fillRadioClass)
+            : fillRadioActiveClass && "radio_fill_active_".concat(fillRadioActiveClass), !checked || !isActive
+            ? fillRadioHoverClass && "radio_fill_hover_".concat(fillRadioHoverClass)
+            : fillRadioActiveHoverClass &&
+                "radio_fill_active_hover_".concat(fillRadioActiveHoverClass), !checked || !isActive
+            ? borderRadioColorClass &&
+                "radio_border-color_".concat(borderRadioColorClass)
+            : borderRadioColorActiveClass &&
+                "radio_border-color_active_".concat(borderRadioColorActiveClass), !checked || !isActive
+            ? borderRadioColorHoverClass &&
+                "radio_border-color_hover_".concat(borderRadioColorHoverClass)
+            : borderRadioColorActiveHoverClass &&
+                "radio_border-color_active_hover_".concat(borderRadioColorActiveHoverClass)), htmlFor: id, children: [jsxs("div", { className: clsx('radio__item'), children: [jsx("input", { id: String(id), className: "radio__input", type: "radio", disabled: isDisabled && 'disabled', checked: checked, value: value, onChange: onChange }), jsx("div", { className: clsx('radio__state', shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass)), children: "\u00A0" }), jsx("div", { className: clsx('radio__state-checkmark', checked && fillCheckmarkClass && "fill_".concat(fillCheckmarkClass)), children: "\u00A0" })] }), label && (jsx(Text, { className: "radio__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (jsx(Text, { className: "radio__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }))] }));
 }
 
 export { Radio, radioAppearance, radioConfig };

package/dist/components/Response.js

@@ -7,9 +7,9 @@ import { urlWithAssetPrefix } from '../hoc/urlWithAssetPrefix.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { B as Button } from '../Button_es_D_IlkeBp.js';
+import { B as Button } from '../Button_es_C8qinRU4.js';
 import { G as Group } from '../Group_es_DIfmrMSM.js';
-import { T as Text } from '../Text_es_CtCwsa3V.js';
+import { T as Text } from '../Text_es_CwV9rjFD.js';
 import '@itcase/common';
 import '../context/UrlAssetPrefix.js';
 import 'lodash/camelCase';
@@ -24,10 +24,10 @@ import '../utils/setViewportProperty.js';
 import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
 import 'lodash/maxBy';
-import '../Icon_es_C76te22j.js';
+import '../Icon_es_Cstv1LFr.js';
 import 'react-inlinesvg';
-import '../Link_es_BnUIX0QT.js';
-import '../Loader_es_C8ETXkiZ.js';
+import '../Link_es_XiqbdwLp.js';
+import '../Loader_es_ByhTIMxS.js';
 
 var responseAppearanceConfirm = {
     confirm: {

package/dist/components/Search.js

@@ -6,8 +6,8 @@ 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_C76te22j.js';
-import { T as Text } from '../Text_es_CtCwsa3V.js';
+import { I as Icon } from '../Icon_es_Cstv1LFr.js';
+import { T as Text } from '../Text_es_CwV9rjFD.js';
 import { S as Scrollbar } from '../Scrollbar_es_CThJeCLF.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -25,7 +25,7 @@ import 'lodash/maxBy';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_BnUIX0QT.js';
+import '../Link_es_XiqbdwLp.js';
 import 'react-scrollbars-custom';
 
 var searchAppearanceDefault = {
@@ -199,7 +199,7 @@ var searchInputConfig = {
     },
 };
 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, onChange = props.onChange, onClickClean = props.onClickClean, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
+    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) {
         onChange && onChange(event.target.value);
     }, [onChange]);
@@ -210,7 +210,7 @@ var SearchInput = React.forwardRef(function SearchInput(props, ref) {
             onClickClean();
         }
     }, [onChange, onClickClean]);
-    var appearanceConfig = useAppearanceConfig(appearance, searchInputConfig);
+    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;

package/dist/components/Segmented.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React, { useRef, useMemo, createRef, useCallback, useEffect } from 'react';
 import clsx from 'clsx';
-import { I as Icon } from '../Icon_es_C76te22j.js';
+import { I as Icon } from '../Icon_es_Cstv1LFr.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { T as Text } from '../Text_es_CtCwsa3V.js';
+import { T as Text } from '../Text_es_CwV9rjFD.js';
 import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
@@ -22,7 +22,7 @@ import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Link_es_BnUIX0QT.js';
+import '../Link_es_XiqbdwLp.js';
 import 'lodash/castArray';
 
 var segmentedAppearanceDefault = {
@@ -46,8 +46,8 @@ var segmentedAppearanceDefault = {
     defaultSecondary: {
         fill: 'surfaceSecondary',
         fillActive: 'accentPrimary',
-        fillActiveHover: 'accentPrimary',
-        fillHover: 'surfaceSecondary',
+        fillActiveHover: 'accentHoverPrimary',
+        fillHover: 'surfaceTertiary',
         labelTextActiveColor: 'accentTextPrimary',
         labelTextActiveHoverColor: 'accentTextPrimary',
         labelTextColor: 'surfaceTextPrimary',
@@ -186,10 +186,11 @@ var segmentedAppearanceSuccess = {
 var segmentedAppearanceWarning = {
     warningPrimary: {
         fill: 'warningTertiary',
-        fillActive: 'warningItemSecondary',
-        fillHover: 'warningItemHover',
+        fillActive: 'accentPrimary',
+        fillActiveHover: 'accentPrimary',
+        fillHover: 'warningSecondary',
         labelTextActiveColor: 'warningTextPrimary',
-        labelTextColor: 'warningTextSecondary',
+        labelTextColor: 'warningTextPrimaryTertiary',
         labelTextColorHover: 'warningTextSecondary',
         borderColor: 'warningBorderSecondary',
         iconAfterFill: 'warningItemSecondary',
@@ -210,7 +211,7 @@ var segmentedConfig = {
     },
 };
 var Segmented = React.forwardRef(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, isSkeleton = props.isSkeleton, setActiveSegment = props.setActiveSegment, onChange = props.onChange;
+    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()]; }));
@@ -232,9 +233,9 @@ var Segmented = React.forwardRef(function (props) {
         // 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"));
     }, [activeSegment, segmentsRefs]);
-    var appearanceConfig = useAppearanceConfig(appearance, segmentedConfig);
+    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, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, iconFillDisabled = propsGenerator.iconFillDisabled, iconFill = propsGenerator.iconFill, iconFillActive = propsGenerator.iconFillActive, iconSize = propsGenerator.iconSize, indicatorFillClass = propsGenerator.indicatorFillClass, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
+    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 &&