@itcase/ui 1.3.31 → 1.3.33

package/dist/components/Radio.js

@@ -1,19 +1,19 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
-import { T as Text } from '../Text-JayJa3hj.js';
-import '../tslib.es6-Bwu1Cn-t.js';
+import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
+import { T as Text } from '../Text-C6NSmetx.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
+import 'lodash/upperFirst';
 import '../context/UIContext.js';
-import '../hooks/useMediaQueries.js';
+import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
 import '../utils/setViewportProperty.js';
-import '../hooks/useStyles.js';
+import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
-import 'lodash/upperFirst';
-import '../hooks/styleAttributes.js';
+import '../hooks/useStyles/styleAttributes.js';
 
 var radioAppearance = {
     dev: {
@@ -49,22 +49,19 @@ function Radio(props) {
     var id = props.id, appearance = props.appearance, checked = props.checked, className = props.className, desc = props.desc, descTextColor = props.descTextColor, descTextSize = props.descTextSize, descTextWeight = props.descTextWeight, disabled = props.disabled, label = props.label, labelTextColor = props.labelTextColor, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, _a = props.tag, Tag = _a === void 0 ? 'label' : _a, onChange = props.onChange;
     // @ts-expect-error
     var appearanceConfig = radioConfig.appearance && radioConfig.appearance[appearance];
-    var classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig);
-    var fillClass = classGenerator.fillClass, shapeClass = classGenerator.shapeClass, stateBorderColorClass = classGenerator.stateBorderColorClass, stateBorderWidthClass = classGenerator.stateBorderWidthClass, stateCheckmarkFillClass = classGenerator.stateCheckmarkFillClass, stateShapeClass = classGenerator.stateShapeClass;
-    var stateFillClass = classGenerator.getClass(checked ? 'stateFillChecked' : 'stateFill', {
+    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    var fillClass = propsGenerator.fillClass, _b = propsGenerator.shapeClass, shapeClass = _b === void 0 ? 'circular' : _b, stateBorderColorClass = propsGenerator.stateBorderColorClass, stateBorderWidthClass = propsGenerator.stateBorderWidthClass, stateCheckmarkFillClass = propsGenerator.stateCheckmarkFillClass, stateShapeClass = propsGenerator.stateShapeClass;
+    var stateFillClass = propsGenerator.getClassName(checked ? 'stateFillChecked' : 'stateFill', {
         prefix: 'fill_',
     });
-    var stateFillDisabledClass = classGenerator.getClass(checked ? 'stateFillDisabledChecked' : 'stateFillDisabled', { prefix: 'fill_' });
-    var stateBorderColorHoverClass = classGenerator.getClass(checked ? 'stateBorderColorHoverChecked' : 'stateBorderColorHover', { prefix: 'border-color_hover_' });
-    var stateBorderColorDisabledClass = classGenerator.getClass(checked ? 'stateBorderColorDisabledChecked' : 'stateBorderColorDisabled', { prefix: 'border-color_' });
-    return (jsxs(Tag, { className: clsx(className, 'radio', fillClass && "fill_".concat(fillClass), shapeClass && "radio_shape_".concat(shapeClass)), htmlFor: id, children: [jsxs("div", { className: clsx('radio__item', stateCheckmarkFillClass && "radio_checkmark_fill_".concat(stateCheckmarkFillClass)), children: [jsx("input", { className: "radio__input", checked: checked, disabled: disabled, 
-                        // @ts-expect-error
-                        id: id, type: "radio", onChange: onChange }), jsx("div", { className: clsx('radio__state', disabled ? stateFillDisabledClass : stateFillClass, disabled
+    var stateFillDisabledClass = propsGenerator.getClassName(checked ? 'stateFillDisabledChecked' : 'stateFillDisabled', { prefix: 'fill_' });
+    var stateBorderColorHoverClass = propsGenerator.getClassName(checked ? 'stateBorderColorHoverChecked' : 'stateBorderColorHover', { prefix: 'border-color_hover_' });
+    var stateBorderColorDisabledClass = propsGenerator.getClassName(checked ? 'stateBorderColorDisabledChecked' : 'stateBorderColorDisabled', { prefix: 'border-color_' });
+    return (jsxs(Tag, { className: clsx(className, 'radio', fillClass && "fill_".concat(fillClass), shapeClass && "radio_shape_".concat(shapeClass)), htmlFor: id, children: [jsxs("div", { className: clsx('radio__item', stateCheckmarkFillClass &&
+                    "radio_checkmark_fill_".concat(stateCheckmarkFillClass)), children: [jsx("input", { id: id, className: "radio__input", type: "radio", disabled: disabled, checked: checked, onChange: onChange }), jsx("div", { className: clsx('radio__state', disabled ? stateFillDisabledClass : stateFillClass, disabled
                             ? stateBorderColorDisabledClass
-                            : stateBorderColorClass && "border-color_".concat(stateBorderColorClass), stateBorderColorHoverClass, stateShapeClass && "radio__state_shape_".concat(stateShapeClass), stateBorderWidthClass && "border-width_".concat(stateBorderWidthClass)), children: "\u00A0" }), jsx("div", { className: "radio__state-checkmark", children: "\u00A0" })] }), label && (jsx(Text, { className: "radio__label", size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textColor: labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), textWeight: labelTextWeight, children: label })), desc && (jsx(Text, { className: "radio__desc", size: descTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextSize), textColor: descTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextColor), textWeight: descTextWeight, children: desc }))] }));
+                            : stateBorderColorClass &&
+                                "border-color_".concat(stateBorderColorClass), stateBorderColorHoverClass, stateShapeClass && "radio__state_shape_".concat(stateShapeClass), stateBorderWidthClass && "border-width_".concat(stateBorderWidthClass)), children: "\u00A0" }), jsx("div", { className: "radio__state-checkmark", children: "\u00A0" })] }), label && (jsx(Text, { className: "radio__label", textColor: labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), textWeight: labelTextWeight, size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), children: label })), desc && (jsx(Text, { className: "radio__desc", textColor: descTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextColor), textWeight: descTextWeight, size: descTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextSize), children: desc }))] }));
 }
-Radio.defaultProps = {
-    shape: 'circular',
-};
 
 export { Radio, radioAppearance, radioConfig, radioState };

package/dist/components/RangeSlider.js

@@ -1,24 +1,24 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import Slider from 'rc-slider';
-import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
-import { useStyles } from '../hooks/useStyles.js';
-import '../tslib.es6-Bwu1Cn-t.js';
+import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
+import { useStyles } from '../hooks/useStyles/useStyles.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
+import 'lodash/upperFirst';
 import '../context/UIContext.js';
-import '../hooks/useMediaQueries.js';
+import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
-import 'lodash/upperFirst';
-import '../hooks/styleAttributes.js';
+import '../hooks/useStyles/styleAttributes.js';
 
 function RangeSlider(props) {
     var children = props.children, after = props.after, before = props.before, className = props.className, disabled = props.disabled, max = props.max, min = props.min, pushable = props.pushable, range = props.range, set = props.set, value = props.value, vertical = props.vertical, onChangeSlider = props.onChangeSlider;
-    var classGenerator = useDeviceTargetClassGenerator(props);
-    var fillClass = classGenerator.fillClass, fillHandleClass = classGenerator.fillHandleClass, fillHandleDraggingClass = classGenerator.fillHandleDraggingClass, fillHandleDraggingHoverClass = classGenerator.fillHandleDraggingHoverClass, fillHandleHoverClass = classGenerator.fillHandleHoverClass, fillRailClass = classGenerator.fillRailClass, fillTrackClass = classGenerator.fillTrackClass, shapeClass = classGenerator.shapeClass, widthClass = classGenerator.widthClass;
+    var propsGenerator = useDevicePropsGenerator(props);
+    var fillClass = propsGenerator.fillClass, fillHandleClass = propsGenerator.fillHandleClass, fillHandleDraggingClass = propsGenerator.fillHandleDraggingClass, fillHandleDraggingHoverClass = propsGenerator.fillHandleDraggingHoverClass, fillHandleHoverClass = propsGenerator.fillHandleHoverClass, fillRailClass = propsGenerator.fillRailClass, fillTrackClass = propsGenerator.fillTrackClass, shapeClass = propsGenerator.shapeClass, widthClass = propsGenerator.widthClass;
     // @ts-expect-error
     var rangeSliderStyles = useStyles(props).styles;
     return (jsxs("div", { className: clsx(className, 'range-slider', set && "range-slider_set_".concat(set), fillClass && "fill_".concat(fillClass), fillTrackClass && "range-slider-track-fill_".concat(fillTrackClass), fillRailClass && "range-slider-rail-fill_".concat(fillRailClass), fillHandleClass && "range-slider-handle-fill_".concat(fillHandleClass), fillHandleHoverClass && "range-slider-handle-fill-hover_".concat(fillHandleHoverClass), fillHandleDraggingClass && "range-slider-handle-dragging-fill_".concat(fillHandleDraggingClass), fillHandleDraggingHoverClass &&

package/dist/components/Response.js

@@ -1,27 +1,27 @@
-import { _ as __assign } from '../tslib.es6-Bwu1Cn-t.js';
+import { _ as __assign } from '../tslib.es6-5FtW-kfi.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import clsx from 'clsx';
 import SVG from 'react-inlinesvg';
-import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
-import { useStyles } from '../hooks/useStyles.js';
-import { B as Button } from '../Button-Kcw2DdY0.js';
-import { G as Group } from '../Group-c3ZkPu8e.js';
-import { T as Text } from '../Text-JayJa3hj.js';
+import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
+import { useStyles } from '../hooks/useStyles/useStyles.js';
+import { B as Button } from '../Button-BtAUGGPc.js';
+import { G as Group } from '../Group-DiMnEfge.js';
+import { T as Text } from '../Text-C6NSmetx.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
+import 'lodash/upperFirst';
 import '../context/UIContext.js';
-import '../hooks/useMediaQueries.js';
+import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
-import 'lodash/upperFirst';
-import '../hooks/styleAttributes.js';
-import '../Icon-BdHr6E6M.js';
-import '../Link-DN2LhPjD.js';
-import '../Tooltip-AodzD-7D.js';
-import '../Title-C7Qv9WfS.js';
-import '../Loader-K_DJmah6.js';
+import '../hooks/useStyles/styleAttributes.js';
+import '../Icon-htF_V35Y.js';
+import '../Link-BhJ5BdyS.js';
+import '../Tooltip-BYgzNVYI.js';
+import '../Title-Dck3eHNM.js';
+import '../Loader-CsPvc-9g.js';
 
 var img$7 = "data:image/svg+xml,%3csvg width='180' height='180' viewBox='0 0 180 180' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='90' cy='90' r='90' fill='%23D9D9D9'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M85.7155 56.9042L54.1865 115.911C53.0219 118.09 54.5678 121.43 58.4708 121.43H121.529C125.432 121.43 126.978 118.09 125.814 115.911L94.2845 56.9043C93.5012 55.4392 91.8762 54.57 89.9998 54.57C88.1237 54.57 86.4986 55.439 85.7155 56.9042ZM89.9998 48C93.9317 48 98.1142 49.8644 100.253 53.8659L131.782 112.873C135.732 120.266 129.482 128 121.529 128H58.4708C50.5181 128 44.2675 120.266 48.2181 112.873L79.7471 53.866C81.8855 49.8645 86.0683 48 89.9998 48ZM90.0002 74.0886C91.8588 74.0886 93.3658 75.5593 93.3658 77.3736V92.8756C93.3658 94.6897 91.8588 96.1606 90.0002 96.1606C88.1411 96.1606 86.6345 94.6897 86.6345 92.8756V77.3736C86.6345 75.5593 88.1411 74.0886 90.0002 74.0886ZM93.3658 108.377C93.3658 106.563 91.8588 105.092 90.0002 105.092C88.1411 105.092 86.6345 106.563 86.6345 108.377V108.457C86.6345 110.271 88.1411 111.742 90.0002 111.742C91.8588 111.742 93.3658 110.271 93.3658 108.457V108.377Z' fill='%23747474'/%3e%3c/svg%3e";
 
@@ -246,8 +246,8 @@ function Response(props) {
     var width = props.width, height = props.height, after = props.after, appearance = props.appearance, before = props.before, className = props.className, imageSrc = props.imageSrc, message = props.message, messageTextColor = props.messageTextColor, messageTextSize = props.messageTextSize, messageTextWeight = props.messageTextWeight, primaryButton = props.primaryButton, primaryButtonAfter = props.primaryButtonAfter, primaryButtonAppearance = props.primaryButtonAppearance, primaryButtonBefore = props.primaryButtonBefore, primaryButtonFill = props.primaryButtonFill, primaryButtonFillHover = props.primaryButtonFillHover, primaryButtonLabel = props.primaryButtonLabel, primaryButtonLabelTextColor = props.primaryButtonLabelTextColor, primaryButtonLabelTextSize = props.primaryButtonLabelTextSize, primaryButtonShape = props.primaryButtonShape, primaryButtonSize = props.primaryButtonSize, primaryButtonWidth = props.primaryButtonWidth, secondaryButton = props.secondaryButton, secondaryButtonAfter = props.secondaryButtonAfter, secondaryButtonAppearance = props.secondaryButtonAppearance, secondaryButtonBefore = props.secondaryButtonBefore, secondaryButtonFill = props.secondaryButtonFill, secondaryButtonFillHover = props.secondaryButtonFillHover, secondaryButtonLabel = props.secondaryButtonLabel, secondaryButtonLabelTextColor = props.secondaryButtonLabelTextColor, secondaryButtonLabelTextSize = props.secondaryButtonLabelTextSize, secondaryButtonShape = props.secondaryButtonShape, secondaryButtonSize = props.secondaryButtonSize, secondaryButtonWidth = props.secondaryButtonWidth, set = props.set, SvgImage = props.SvgImage, svgSrc = props.svgSrc, title = props.title, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextWeight = props.titleTextWeight, onClickPrimaryButton = props.onClickPrimaryButton, onClickSecondaryButton = props.onClickSecondaryButton;
     // @ts-expect-error
     var appearanceConfig = responseConfig.appearance && responseConfig.appearance[appearance];
-    var classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig);
-    var borderColorClass = classGenerator.borderColorClass, borderColorHoverClass = classGenerator.borderColorHoverClass, borderTypeClass = classGenerator.borderTypeClass, dataTestId = classGenerator.dataTestId, dataTour = classGenerator.dataTour, borderWidthClass = classGenerator.borderWidthClass, fillClass = classGenerator.fillClass, fillHoverClass = classGenerator.fillHoverClass, shapeClass = classGenerator.shapeClass, svgFillClass = classGenerator.svgFillClass, svgPathFillClass = classGenerator.svgPathFillClass, textAlignClass = classGenerator.textAlignClass;
+    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    var borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, dataTestId = propsGenerator.dataTestId, dataTour = propsGenerator.dataTour, borderWidthClass = propsGenerator.borderWidthClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, shapeClass = propsGenerator.shapeClass, svgFillClass = propsGenerator.svgFillClass, svgPathFillClass = propsGenerator.svgPathFillClass, textAlignClass = propsGenerator.textAlignClass;
     var ImageComponent = useMemo(function () {
         var src = imageSrc || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.imageSrc) || svgSrc || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.svgSrc);
         var Image = SvgImage || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.SvgImage);

package/dist/components/SVGContent.js

@@ -1,24 +1,24 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import SVG from 'react-inlinesvg';
-import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
-import { useStyles } from '../hooks/useStyles.js';
-import '../tslib.es6-Bwu1Cn-t.js';
+import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
+import { useStyles } from '../hooks/useStyles/useStyles.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
+import 'lodash/upperFirst';
 import '../context/UIContext.js';
-import '../hooks/useMediaQueries.js';
+import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
-import 'lodash/upperFirst';
-import '../hooks/styleAttributes.js';
+import '../hooks/useStyles/styleAttributes.js';
 
 function SVGContent(props) {
     var className = props.className, src = props.src, SvgImage = props.SvgImage;
-    var classGenerator = useDeviceTargetClassGenerator(props);
-    var svgFillClass = classGenerator.svgFillClass, svgFillHoverClass = classGenerator.svgFillHoverClass;
+    var propsGenerator = useDevicePropsGenerator(props);
+    var svgFillClass = propsGenerator.svgFillClass, svgFillHoverClass = propsGenerator.svgFillHoverClass;
     // @ts-expect-error
     var svgContentStyles = useStyles(props).styles;
     return (jsxs("div", { className: clsx(className, 'svg-content', svgFillClass && "svg_fill_".concat(svgFillClass), svgFillHoverClass && "svg_fill_hover_".concat(svgFillHoverClass)), style: svgContentStyles, children: [src && jsx(SVG, { src: src }), SvgImage && jsx(SvgImage, {})] }));

package/dist/components/ScrollOnDrag.js

@@ -1,31 +1,28 @@
-import { _ as __assign } from '../tslib.es6-Bwu1Cn-t.js';
+import { _ as __assign } from '../tslib.es6-5FtW-kfi.js';
 import { jsx } from 'react/jsx-runtime';
 import { useRef } from 'react';
 import clsx from 'clsx';
 import { ScrollContainer } from 'react-indiana-drag-scroll';
-import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
-import { useStyles } from '../hooks/useStyles.js';
+import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
+import { useStyles } from '../hooks/useStyles/useStyles.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
+import 'lodash/upperFirst';
 import '../context/UIContext.js';
-import '../hooks/useMediaQueries.js';
+import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
-import 'lodash/upperFirst';
-import '../hooks/styleAttributes.js';
+import '../hooks/useStyles/styleAttributes.js';
 
 function ScrollOnDrag(props) {
     var children = props.children, className = props.className, scrollContainerProps = props.scrollContainerProps;
     var ref = useRef(null);
-    var classGenerator = useDeviceTargetClassGenerator(props);
-    var borderColorClass = classGenerator.borderColorClass, borderTypeClass = classGenerator.borderTypeClass, borderWidthClass = classGenerator.borderWidthClass, elevationClass = classGenerator.elevationClass, fillClass = classGenerator.fillClass, fillHoverClass = classGenerator.fillHoverClass, heightClass = classGenerator.heightClass, widthClass = classGenerator.widthClass;
+    var propsGenerator = useDevicePropsGenerator(props);
+    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, elevationClass = propsGenerator.elevationClass, heightClass = propsGenerator.heightClass, _a = propsGenerator.widthClass, widthClass = _a === void 0 ? 'fill' : _a;
     // @ts-expect-error
-    var _a = useStyles(props), scrollContainerStyles = _a.scrollContainer, styles = _a.styles;
+    var _b = useStyles(props), scrollContainerStyles = _b.scrollContainer, styles = _b.styles;
     return (jsx("div", { className: clsx('scroll-on-drag', className, borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), borderWidthClass && "border-width_".concat(borderWidthClass), elevationClass && "elevation_".concat(elevationClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), heightClass && "height_".concat(heightClass), widthClass && "width_".concat(widthClass)), ref: ref, style: styles, children: jsx(ScrollContainer, __assign({ className: "scroll-on-drag__wrapper" }, scrollContainerProps, { style: scrollContainerStyles, children: children })) }));
 }
-ScrollOnDrag.defaultProps = {
-    width: 'fill',
-};
 
 export { ScrollOnDrag };

package/dist/components/ScrollToView.js

@@ -1,26 +1,26 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { ScrollLink } from 'react-scroll';
-import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
-import { useStyles } from '../hooks/useStyles.js';
-import '../tslib.es6-Bwu1Cn-t.js';
+import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
+import { useStyles } from '../hooks/useStyles/useStyles.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
+import 'lodash/upperFirst';
 import '../context/UIContext.js';
-import '../hooks/useMediaQueries.js';
+import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
-import 'lodash/upperFirst';
-import '../hooks/styleAttributes.js';
+import '../hooks/useStyles/styleAttributes.js';
 
 var ScrollToView = ScrollLink(function ScrollToView(props) {
-    var id = props.id, children = props.children, className = props.className, _a = props.tag, Tag = _a === void 0 ? 'div' : _a;
-    var classGenerator = useDeviceTargetClassGenerator(props);
-    var alignClass = classGenerator.alignClass, alignDirectionClass = classGenerator.alignDirectionClass, alignItemsClass = classGenerator.alignItemsClass, alignSelfClass = classGenerator.alignSelfClass, directionClass = classGenerator.directionClass, heightClass = classGenerator.heightClass, justifyContentClass = classGenerator.justifyContentClass, textColorActiveClass = classGenerator.textColorActiveClass, textColorClass = classGenerator.textColorClass, textColorHoverClass = classGenerator.textColorHoverClass, widthClass = classGenerator.widthClass;
+    var id = props.id, className = props.className, children = props.children, _a = props.tag, Tag = _a === void 0 ? 'div' : _a;
+    var propsGenerator = useDevicePropsGenerator(props);
+    var directionClass = propsGenerator.directionClass, justifyContentClass = propsGenerator.justifyContentClass, alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, alignItemsClass = propsGenerator.alignItemsClass, alignSelfClass = propsGenerator.alignSelfClass, textColorActiveClass = propsGenerator.textColorActiveClass, textColorClass = propsGenerator.textColorClass, textColorHoverClass = propsGenerator.textColorHoverClass, heightClass = propsGenerator.heightClass, widthClass = propsGenerator.widthClass;
     var scrollToViewStyles = useStyles(props).styles;
-    return (jsx(Tag, { className: clsx(className, 'scroll-to-view', alignItemsClass && "align-items_".concat(alignItemsClass), widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass), textColorClass && "scroll-to-view_text-color_".concat(textColorClass), textColorActiveClass && "scroll-to-view_text-color_active_".concat(textColorActiveClass), textColorHoverClass && "scroll-to-view_text-color_hover_".concat(textColorHoverClass), justifyContentClass && "justify-content_".concat(justifyContentClass), directionClass && "direction_".concat(directionClass), alignSelfClass && "align-self_".concat(alignSelfClass)), id: id, style: Object.assign({}, scrollToViewStyles, props.style), onClick: props.onClick, children: children }));
+    return (jsx(Tag, { id: id, className: clsx(className, 'scroll-to-view', alignItemsClass && "align-items_".concat(alignItemsClass), widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass), textColorClass && "scroll-to-view_text-color_".concat(textColorClass), textColorActiveClass && "scroll-to-view_text-color_active_".concat(textColorActiveClass), textColorHoverClass && "scroll-to-view_text-color_hover_".concat(textColorHoverClass), justifyContentClass && "justify-content_".concat(justifyContentClass), directionClass && "direction_".concat(directionClass), alignSelfClass && "align-self_".concat(alignSelfClass)), style: Object.assign({}, scrollToViewStyles, props.style), onClick: props.onClick, children: children }));
 });
 
 export { ScrollToView };

package/dist/components/Search.js

@@ -1,25 +1,25 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useCallback } from 'react';
 import clsx from 'clsx';
-import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
-import { useStyles } from '../hooks/useStyles.js';
-import { I as Icon } from '../Icon-BdHr6E6M.js';
-import { T as Text } from '../Text-JayJa3hj.js';
+import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
+import { useStyles } from '../hooks/useStyles/useStyles.js';
+import { I as Icon } from '../Icon-htF_V35Y.js';
+import { T as Text } from '../Text-C6NSmetx.js';
 import { S as Scrollbar } from '../Scrollbar-Bo7z7ELm.js';
-import '../tslib.es6-Bwu1Cn-t.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
+import 'lodash/upperFirst';
 import '../context/UIContext.js';
-import '../hooks/useMediaQueries.js';
+import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
-import 'lodash/upperFirst';
-import '../hooks/styleAttributes.js';
+import '../hooks/useStyles/styleAttributes.js';
 import 'react-inlinesvg';
-import '../Link-DN2LhPjD.js';
-import '../Tooltip-AodzD-7D.js';
-import '../Title-C7Qv9WfS.js';
+import '../Link-BhJ5BdyS.js';
+import '../Tooltip-BYgzNVYI.js';
+import '../Title-Dck3eHNM.js';
 import 'react-scrollbars-custom';
 
 var searchAppearance = {
@@ -39,7 +39,7 @@ var searchInputConfig = {
     },
 };
 var SearchInput = React.forwardRef(function SearchInput(props, ref) {
-    var after = props.after, appearance = props.appearance, before = props.before, className = props.className, dataTour = props.dataTour, iconAfter = props.iconAfter, iconAfterFill = props.iconAfterFill, iconAfterSize = props.iconAfterSize, iconAfterSrc = props.iconAfterSrc, iconBefore = props.iconBefore, iconBeforeFill = props.iconBeforeFill, iconBeforeSize = props.iconBeforeSize, iconBeforeSrc = props.iconBeforeSrc, iconClear = props.iconClear, iconClearFill = props.iconClearFill, iconClearSize = props.iconClearSize, iconClearSrc = props.iconClearSrc, placeholder = props.placeholder, placeholderTextColor = props.placeholderTextColor, _a = props.placeholderTextSize, placeholderTextSize = _a === void 0 ? 'm' : _a, placeholderTextStyle = props.placeholderTextStyle, placeholderTextWeight = props.placeholderTextWeight, _b = props.size, size = _b === void 0 ? 'normal' : _b, type = props.type, value = props.value, onChange = props.onChange, onClickClean = props.onClickClean, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
+    var className = props.className, type = props.type, appearance = props.appearance, dataTour = props.dataTour, iconAfter = props.iconAfter, iconAfterFill = props.iconAfterFill, iconAfterSize = props.iconAfterSize, iconAfterSrc = props.iconAfterSrc, iconBefore = props.iconBefore, iconBeforeFill = props.iconBeforeFill, iconBeforeSize = props.iconBeforeSize, iconBeforeSrc = props.iconBeforeSrc, iconClear = props.iconClear, iconClearFill = props.iconClearFill, iconClearSize = props.iconClearSize, iconClearSrc = props.iconClearSrc, placeholder = props.placeholder, placeholderTextColor = props.placeholderTextColor, _a = props.placeholderTextSize, placeholderTextSize = _a === void 0 ? 'm' : _a, placeholderTextStyle = props.placeholderTextStyle, placeholderTextWeight = props.placeholderTextWeight, _b = props.size, size = _b === void 0 ? 'normal' : _b, value = props.value, before = props.before, after = props.after, onChange = props.onChange, onClickClean = props.onClickClean, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
     var onChangeSearchInput = useCallback(function (event) {
         onChange && onChange(event.target.value);
     }, [onChange]);
@@ -52,28 +52,25 @@ var SearchInput = React.forwardRef(function SearchInput(props, ref) {
     }, [onChange, onClickClean]);
     // @ts-expect-error
     var appearanceConfig = searchInputConfig.appearance && searchInputConfig.appearance[appearance];
-    var classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig);
-    var borderColorClass = classGenerator.borderColorClass, borderHoverClass = classGenerator.borderHoverClass, borderTypeClass = classGenerator.borderTypeClass, borderWidthClass = classGenerator.borderWidthClass, fillClass = classGenerator.fillClass, inputFillClass = classGenerator.inputFillClass, inputShapeClass = classGenerator.inputShapeClass, inputTextColorClass = classGenerator.inputTextColorClass, inputTextSizeClass = classGenerator.inputTextSizeClass, inputTextStyleClass = classGenerator.inputTextStyleClass, inputTextWeightClass = classGenerator.inputTextWeightClass, shapeClass = classGenerator.shapeClass, widthClass = classGenerator.widthClass;
+    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    var fillClass = propsGenerator.fillClass, borderColorClass = propsGenerator.borderColorClass, borderHoverClass = propsGenerator.borderHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, inputFillClass = propsGenerator.inputFillClass, inputShapeClass = propsGenerator.inputShapeClass, inputTextColorClass = propsGenerator.inputTextColorClass, _c = propsGenerator.inputTextSizeClass, inputTextSizeClass = _c === void 0 ? 'm' : _c, inputTextStyleClass = propsGenerator.inputTextStyleClass, inputTextWeightClass = propsGenerator.inputTextWeightClass, shapeClass = propsGenerator.shapeClass, widthClass = propsGenerator.widthClass;
     // @ts-expect-error
     var searchInputStyles = useStyles(props).styles;
     return (jsxs("label", { className: clsx(className, 'search-input', shapeClass && "search_shape_".concat(shapeClass), fillClass && "fill_".concat(fillClass), widthClass && "width_".concat(widthClass), borderColorClass && "border-color_".concat(borderColorClass), borderHoverClass && "border-color_hover_".concat(borderHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), size && "search-input_size_".concat(size), type && "search-input_type_".concat(type)), "data-tour": dataTour, style: searchInputStyles, children: [before, (iconBefore || iconBeforeSrc) && (jsx(Icon, { className: "search-input__icon search-input__icon-before", iconFill: iconBeforeFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconBeforeFill), imageSrc: iconBeforeSrc || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconBeforeSrc), size: iconBeforeSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconBeforeSize), SvgImage: iconBefore || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconBefore) })), jsxs("div", { className: clsx('search-input__wrapper', inputFillClass && "fill_".concat(inputFillClass), inputShapeClass && "search-input_shape_".concat(inputShapeClass)), 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)), ref: ref, required: true, type: "text", 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 || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.placeholderTextSize), textColor: placeholderTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.placeholderTextColor), textStyle: placeholderTextStyle, textWeight: placeholderTextWeight, children: placeholder || 'Search' }) }), value && (jsx(Icon, { className: clsx('search-input__clear', 'cursor_type_pointer'), iconFill: iconClearFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconClearFill), imageSrc: iconClearSrc || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconClearSrc), size: iconClearSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconClearSize), SvgImage: iconClear || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconClear), onClick: onClickClearIcon }))] }), (iconAfter || iconAfterSrc) && (jsx(Icon, { className: "search-input__icon search-input__icon-after", iconFill: iconAfterFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconAfterFill), imageSrc: iconAfterSrc || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconAfterSrc), size: iconAfterSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconAfterSize), SvgImage: iconAfter || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconAfter) })), after] }));
+                            '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'), textColor: placeholderTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.placeholderTextColor), textStyle: placeholderTextStyle, textWeight: placeholderTextWeight, size: placeholderTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.placeholderTextSize), children: placeholder || 'Search' }) }), value && (jsx(Icon, { className: clsx('search-input__clear', 'cursor_type_pointer'), iconFill: iconClearFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconClearFill), imageSrc: iconClearSrc || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconClearSrc), size: iconClearSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconClearSize), SvgImage: iconClear || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconClear), onClick: onClickClearIcon }))] }), (iconAfter || iconAfterSrc) && (jsx(Icon, { className: "search-input__icon search-input__icon-after", iconFill: iconAfterFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconAfterFill), imageSrc: iconAfterSrc || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconAfterSrc), size: iconAfterSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconAfterSize), SvgImage: iconAfter || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconAfter) })), after] }));
 });
 // @ts-expect-error
 SearchInput.DEFAULT_REF_STATE = {
     input: null,
 };
-SearchInput.defaultProps = {
-    inputTextSize: 'm',
-};
 
 var SearchResult = React.forwardRef(function SearchResult(props, ref) {
     var children = props.children, after = props.after, before = props.before, className = props.className, scrollHeight = props.scrollHeight, type = props.type;
-    var classGenerator = useDeviceTargetClassGenerator(props);
-    var fillClass = classGenerator.fillClass;
+    var propsGenerator = useDevicePropsGenerator(props);
+    var fillClass = propsGenerator.fillClass;
     return (jsx("div", { className: clsx(className, 'search-result', fillClass && "fill_".concat(fillClass), type && "search-result_type_".concat(type)), 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] }) }));
 });
 

package/dist/components/Segmented.js

@@ -1,19 +1,19 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React, { useRef, useMemo, createRef, useCallback, useEffect } from 'react';
 import clsx from 'clsx';
-import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
-import { T as Text } from '../Text-JayJa3hj.js';
-import '../tslib.es6-Bwu1Cn-t.js';
+import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
+import { T as Text } from '../Text-C6NSmetx.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
+import 'lodash/upperFirst';
 import '../context/UIContext.js';
-import '../hooks/useMediaQueries.js';
+import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
 import '../utils/setViewportProperty.js';
-import '../hooks/useStyles.js';
+import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
-import 'lodash/upperFirst';
-import '../hooks/styleAttributes.js';
+import '../hooks/useStyles/styleAttributes.js';
 
 var segmentedAppearance = {
     dev: {
@@ -57,8 +57,8 @@ var Segmented = React.forwardRef(function (props, ref) {
     }, [activeSegment, segmentsRefs]);
     // @ts-expect-error
     var appearanceConfig = segmentedConfig.appearance && segmentedConfig.appearance[appearance];
-    var classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig);
-    var borderTypeClass = classGenerator.borderTypeClass, borderWidthClass = classGenerator.borderWidthClass, fillClass = classGenerator.fillClass, fillHoverClass = classGenerator.fillHoverClass, indicatorFillClass = classGenerator.indicatorFillClass, inputBorderColorClass = classGenerator.inputBorderColorClass, shapeClass = classGenerator.shapeClass, widthClass = classGenerator.widthClass;
+    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    var borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, indicatorFillClass = propsGenerator.indicatorFillClass, inputBorderColorClass = propsGenerator.inputBorderColorClass, shapeClass = propsGenerator.shapeClass, widthClass = propsGenerator.widthClass;
     return (jsx("div", { className: clsx(className, 'segmented', shapeClass && "segmented_shape_".concat(shapeClass), fillClass && "fill_".concat(fillClass), widthClass && "segmented_width_".concat(widthClass), size
             ? "segmented_size_".concat(size)
             : (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.size) &&

package/dist/components/Select.js

@@ -1,28 +1,28 @@
-import { _ as __assign } from '../tslib.es6-Bwu1Cn-t.js';
+import { _ as __assign } from '../tslib.es6-5FtW-kfi.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import Select, { components } from 'react-select';
-import { I as Icon } from '../Icon-BdHr6E6M.js';
+import { I as Icon } from '../Icon-htF_V35Y.js';
 import React, { useRef, useCallback, useEffect, useMemo } from 'react';
 import clsx from 'clsx';
 import CreatableSelect from 'react-select/creatable';
-import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
-import { T as Text } from '../Text-JayJa3hj.js';
-import { B as Badge } from '../Badge-5gtVywXB.js';
-import { G as Group } from '../Group-c3ZkPu8e.js';
-import { D as Divider } from '../Divider-DBvDCUqP.js';
+import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
+import { T as Text } from '../Text-C6NSmetx.js';
+import { B as Badge } from '../Badge-CGHosmYx.js';
+import { G as Group } from '../Group-DiMnEfge.js';
+import { D as Divider } from '../Divider-BQcBkzt1.js';
 import 'react-inlinesvg';
-import '../hooks/useStyles.js';
+import '../hooks/useStyles/useStyles.js';
 import 'lodash/camelCase';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../context/UIContext.js';
-import '../hooks/useMediaQueries.js';
+import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
 import '../utils/setViewportProperty.js';
-import '../hooks/styleAttributes.js';
-import '../Link-DN2LhPjD.js';
-import '../Tooltip-AodzD-7D.js';
-import '../Title-C7Qv9WfS.js';
+import '../hooks/useStyles/styleAttributes.js';
+import '../Link-BhJ5BdyS.js';
+import '../Tooltip-BYgzNVYI.js';
+import '../Title-Dck3eHNM.js';
 import 'lodash/castArray';
 
 // interface ClearIndicatorProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>>
@@ -153,20 +153,25 @@ var selectConfig = {
     },
 };
 var SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
-    var width = props.width, minWidth = props.minWidth, elevation = props.elevation, isClearable = props.isClearable, isCreatable = props.isCreatable, isDisabled = props.isDisabled, isLoading = props.isLoading, isMulti = props.isMulti, isSearchable = props.isSearchable, after = props.after, appearance = props.appearance, badgeAppearance = props.badgeAppearance, badgeSize = props.badgeSize, badgeTextSize = props.badgeTextSize, before = props.before, className = props.className, clearIcon = props.clearIcon, clearIconFill = props.clearIconFill, closeMenuOnSelect = props.closeMenuOnSelect, defaultValue = props.defaultValue, dividerDirection = props.dividerDirection, dividerFill = props.dividerFill, dividerSize = props.dividerSize, dropdownFillHover = props.dropdownFillHover, dropdownIcon = props.dropdownIcon, dropdownIconFill = props.dropdownIconFill, dropdownIconShape = props.dropdownIconShape, filterOption = props.filterOption, hideSelectedOptions = props.hideSelectedOptions, hideValueContainer = props.hideValueContainer, initialValue = props.initialValue, inputAfter = props.inputAfter, inputBefore = props.inputBefore, instanceId = props.instanceId, loadingMessage = props.loadingMessage, menuAfter = props.menuAfter, menuBefore = props.menuBefore, menuIsOpen = props.menuIsOpen, menuItemSize = props.menuItemSize, multipleItemFill = props.multipleItemFill, multipleItemFillHover = props.multipleItemFillHover, multipleItemIcon = props.multipleItemIcon, multipleItemIconFill = props.multipleItemIconFill, noOptionsSearchText = props.noOptionsSearchText, noOptionsText = props.noOptionsText, openMenuOnClick = props.openMenuOnClick, optionAfter = props.optionAfter, optionBefore = props.optionBefore, options = props.options, optionSelected = props.optionSelected, placeholder = props.placeholder, placeholderTextColor = props.placeholderTextColor, placeholderTextSize = props.placeholderTextSize, set = props.set, showBadge = props.showBadge, showDivider = props.showDivider, value = props.value, onChange = props.onChange, onInputChange = props.onInputChange;
+    var className = props.className, appearance = props.appearance, width = props.width, minWidth = props.minWidth, initialValue = props.initialValue, elevation = props.elevation, badgeAppearance = props.badgeAppearance, badgeSize = props.badgeSize, badgeTextSize = props.badgeTextSize, clearIcon = props.clearIcon, clearIconFill = props.clearIconFill, defaultValue = props.defaultValue, dividerDirection = props.dividerDirection, dividerFill = props.dividerFill, dividerSize = props.dividerSize, dropdownFillHover = props.dropdownFillHover, dropdownIcon = props.dropdownIcon, dropdownIconFill = props.dropdownIconFill, dropdownIconShape = props.dropdownIconShape, filterOption = props.filterOption, hideSelectedOptions = props.hideSelectedOptions, hideValueContainer = props.hideValueContainer, inputAfter = props.inputAfter, inputBefore = props.inputBefore, instanceId = props.instanceId, loadingMessage = props.loadingMessage, menuAfter = props.menuAfter, menuBefore = props.menuBefore, menuIsOpen = props.menuIsOpen, menuItemSize = props.menuItemSize, multipleItemFill = props.multipleItemFill, multipleItemFillHover = props.multipleItemFillHover, multipleItemIcon = props.multipleItemIcon, multipleItemIconFill = props.multipleItemIconFill, noOptionsSearchText = props.noOptionsSearchText, noOptionsText = props.noOptionsText, optionAfter = props.optionAfter, optionBefore = props.optionBefore, options = props.options, optionSelected = props.optionSelected, placeholder = props.placeholder, placeholderTextColor = props.placeholderTextColor, placeholderTextSize = props.placeholderTextSize, showBadge = props.showBadge, showDivider = props.showDivider, value = props.value, before = props.before, after = props.after, openMenuOnClick = props.openMenuOnClick, closeMenuOnSelect = props.closeMenuOnSelect, isClearable = props.isClearable, isCreatable = props.isCreatable, isDisabled = props.isDisabled, isLoading = props.isLoading, isMulti = props.isMulti, isSearchable = props.isSearchable, set = props.set, onChange = props.onChange, onInputChange = props.onInputChange;
     var defaultRef = useRef(null);
     var selectRef = ref || defaultRef;
     // React-select wait function as "loadingMessage" property
     var getLoadingMessage = useCallback(function () { return loadingMessage; }, [loadingMessage]);
-    var SelectComponent = isCreatable ? CreatableSelect : Select;
+    var SelectComponent = isCreatable
+        ? CreatableSelect
+        : Select;
     useEffect(function () {
         // @ts-expect-error
         var onClickOutside = function (event) {
             var _a;
             var isTargetSelectContainer = 
             // maybe here ".contains()"?
-            event.target.hasClass && event.target.hasClass('select_state_hide-value-container');
-            if ('current' in selectRef && selectRef.current && selectRef.current.controlRef) {
+            event.target.hasClass &&
+                event.target.hasClass('select_state_hide-value-container');
+            if ('current' in selectRef &&
+                selectRef.current &&
+                selectRef.current.controlRef) {
                 var isTargetInsideController = selectRef.current.controlRef.contains(event.target);
                 if (!isTargetSelectContainer && !isTargetInsideController) {
                     // @ts-expect-error
@@ -198,25 +203,16 @@ var SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
             },
         });
     }, []);
-    // @ts-expect-error
     var appearanceConfig = (selectConfig.appearance && selectConfig.appearance[appearance]) || {};
-    var classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig);
-    var borderColorClass = classGenerator.borderColorClass, fillClass = classGenerator.fillClass, fillHoverClass = classGenerator.fillHoverClass, headingFillClass = classGenerator.headingFillClass, headingFillHoverClass = classGenerator.headingFillHoverClass, headingTextColorClass = classGenerator.headingTextColorClass, headingTextSizeClass = classGenerator.headingTextSizeClass, headingTextWeightClass = classGenerator.headingTextWeightClass, inputBorderColorClass = classGenerator.inputBorderColorClass, inputBorderColorHoverClass = classGenerator.inputBorderColorHoverClass, inputCaretColorClass = classGenerator.inputCaretColorClass, inputFillClass = classGenerator.inputFillClass, inputShapeClass = classGenerator.inputShapeClass, inputTextColorClass = classGenerator.inputTextColorClass, inputTextSizeClass = classGenerator.inputTextSizeClass, multipleItemTextColorClass = classGenerator.multipleItemTextColorClass, multipleItemTextSizeClass = classGenerator.multipleItemTextSizeClass, noOptionsTextColorClass = classGenerator.noOptionsTextColorClass, noOptionsTextSizeClass = classGenerator.noOptionsTextSizeClass, optionBorderClass = classGenerator.optionBorderClass, optionBorderTypeClass = classGenerator.optionBorderTypeClass, optionFillClass = classGenerator.optionFillClass, optionFillHoverClass = classGenerator.optionFillHoverClass, optionShapeClass = classGenerator.optionShapeClass, optionTextColorClass = classGenerator.optionTextColorClass, optionTextSizeClass = classGenerator.optionTextSizeClass, shapeClass = classGenerator.shapeClass, sizeClass = classGenerator.sizeClass;
-    return (jsx(SelectComponent, { className: clsx(className, 'select', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), shapeClass && "select_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), sizeClass && "select_size_".concat(sizeClass), hideValueContainer && 'select_state_hide-value-container', set && "select_set_".concat(set)), ref: selectRef, after: after, badgeAppearance: badgeAppearance, badgeSize: badgeSize, badgeTextSize: badgeTextSize, before: before, classNamePrefix: "select", clearIcon: clearIcon, clearIconFill: clearIconFill, closeMenuOnSelect: closeMenuOnSelect !== null && closeMenuOnSelect !== void 0 ? closeMenuOnSelect : false, defaultValue: defaultValue || initialValue, dividerDirection: dividerDirection, dividerFill: dividerFill, dividerSize: dividerSize, dropdownFillHover: dropdownFillHover, dropdownIcon: dropdownIcon, dropdownIconFill: dropdownIconFill, dropdownIconShape: dropdownIconShape, elevation: elevation || appearanceConfig.elevation, filterOption: filterOption, 
-        // headingFill={headingFillClass as tFillProps}
-        headingFill: headingFillClass && "fill_".concat(headingFillClass), headingFillHover: headingFillHoverClass && "fill_hover_".concat(headingFillHoverClass), headingTextColor: headingTextColorClass, headingTextSize: headingTextSizeClass, headingTextWeight: headingTextWeightClass, hideSelectedOptions: hideSelectedOptions, inputAfter: inputAfter, inputBefore: inputBefore, inputBorderColor: inputBorderColorClass, inputBorderColorHover: inputBorderColorHoverClass, inputCaretColor: inputCaretColorClass, inputFill: inputFillClass && "select__control_fill_".concat(inputFillClass), inputShape: inputShapeClass && "select__control_shape_".concat(inputShapeClass), inputTextColor: inputTextColorClass, inputTextSize: inputTextSizeClass, instanceId: instanceId, 
-        // @ts-expect-error
-        loadingMessage: getLoadingMessage, menuAfter: menuAfter, menuBefore: menuBefore, menuIsOpen: menuIsOpen, menuItemSize: menuItemSize, multipleItemFill: multipleItemFill, multipleItemFillHover: multipleItemFillHover, multipleItemIcon: multipleItemIcon, multipleItemIconFill: multipleItemIconFill, multipleItemTextColor: multipleItemTextColorClass, multipleItemTextSize: multipleItemTextSizeClass, noOptionBorder: optionBorderClass && "border-color_".concat(optionBorderClass), noOptionBorderType: optionBorderTypeClass && "border_type_".concat(optionBorderTypeClass), noOptionsFill: optionFillClass && "fill_".concat(optionFillClass), noOptionsSearchText: noOptionsSearchText, noOptionsText: noOptionsText || appearanceConfig.noOptionsText, noOptionsTextColor: noOptionsTextColorClass, noOptionsTextSize: noOptionsTextSizeClass, openMenuOnClick: openMenuOnClick, optionAfter: optionAfter, optionBefore: optionBefore, 
-        // optionBorder={optionBorderClass as tBorderColorProps}
-        optionBorder: optionBorderClass && "border-color_".concat(optionBorderClass), 
-        // optionBorderType={optionBorderTypeClass as tBorderTypeProps}
-        optionBorderType: optionBorderTypeClass && "border_type_".concat(optionBorderTypeClass), optionFill: optionFillClass && "fill_".concat(optionFillClass), optionFillHover: optionFillHoverClass && "fill_hover_".concat(optionFillHoverClass), options: options, optionSelected: optionSelected, optionShape: optionShapeClass, optionTextColor: optionTextColorClass, optionTextSize: optionTextSizeClass, placeholder: placeholder || appearanceConfig.placeholder, placeholderTextColor: placeholderTextColor || appearanceConfig.placeholderTextColor, placeholderTextSize: placeholderTextSize || appearanceConfig.placeholderTextSize, showBadge: showBadge, showDivider: showDivider, styles: clearStyle, value: value, components: {
+    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, headingFillClass = propsGenerator.headingFillClass, headingFillHoverClass = propsGenerator.headingFillHoverClass, headingTextColorClass = propsGenerator.headingTextColorClass, headingTextSizeClass = propsGenerator.headingTextSizeClass, headingTextWeightClass = propsGenerator.headingTextWeightClass, inputBorderColorClass = propsGenerator.inputBorderColorClass, inputBorderColorHoverClass = propsGenerator.inputBorderColorHoverClass, inputCaretColorClass = propsGenerator.inputCaretColorClass, inputFillClass = propsGenerator.inputFillClass, inputShapeClass = propsGenerator.inputShapeClass, inputTextColorClass = propsGenerator.inputTextColorClass, inputTextSizeClass = propsGenerator.inputTextSizeClass, multipleItemTextColorClass = propsGenerator.multipleItemTextColorClass, multipleItemTextSizeClass = propsGenerator.multipleItemTextSizeClass, noOptionsTextColorClass = propsGenerator.noOptionsTextColorClass, noOptionsTextSizeClass = propsGenerator.noOptionsTextSizeClass, optionBorderClass = propsGenerator.optionBorderClass, optionBorderTypeClass = propsGenerator.optionBorderTypeClass, optionFillClass = propsGenerator.optionFillClass, optionFillHoverClass = propsGenerator.optionFillHoverClass, optionShapeClass = propsGenerator.optionShapeClass, optionTextColorClass = propsGenerator.optionTextColorClass, optionTextSizeClass = propsGenerator.optionTextSizeClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass;
+    return (jsx(SelectComponent, { className: clsx(className, 'select', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), shapeClass && "select_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), sizeClass && "select_size_".concat(sizeClass), hideValueContainer && 'select_state_hide-value-container', set && "select_set_".concat(set)), elevation: elevation || appearanceConfig.elevation, isDisabled: isDisabled, badgeAppearance: badgeAppearance, badgeSize: badgeSize, badgeTextSize: badgeTextSize, classNamePrefix: "select", clearIcon: clearIcon, clearIconFill: clearIconFill, components: {
+            IndicatorSeparator: function () { return null; },
             ClearIndicator: SelectClearIndicator,
             Control: SelectControl,
             DropdownIndicator: SelectDropdownIndicator,
             GroupHeading: SelectGroupHeading,
             IndicatorsContainer: SelectIndicatorsContainer,
-            IndicatorSeparator: function () { return null; },
             Input: SelectInput,
             LoadingIndicator: SelectLoadingIndicator,
             Menu: SelectMenu,
@@ -228,11 +224,15 @@ var SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
             Placeholder: SelectPlaceholder,
             SingleValue: SelectSingleValue,
             ValueContainer: SelectValueContainer,
-        }, isClearable: isClearable, isDisabled: isDisabled, isLoading: isLoading, isMulti: isMulti, isSearchable: isSearchable, set: set, onChange: onChange, onInputChange: onInputChange }));
+        }, defaultValue: defaultValue || initialValue, dividerDirection: dividerDirection, dividerFill: dividerFill, dividerSize: dividerSize, dropdownFillHover: dropdownFillHover, dropdownIcon: dropdownIcon, dropdownIconFill: dropdownIconFill, dropdownIconShape: dropdownIconShape, filterOption: filterOption, 
+        // headingFill={headingFillClass as tFillProps}
+        headingFill: headingFillClass && "fill_".concat(headingFillClass), headingFillHover: headingFillHoverClass && "fill_hover_".concat(headingFillHoverClass), headingTextColor: headingTextColorClass, headingTextSize: headingTextSizeClass, headingTextWeight: headingTextWeightClass, hideSelectedOptions: hideSelectedOptions, inputAfter: inputAfter, inputBefore: inputBefore, inputBorderColor: inputBorderColorClass, inputBorderColorHover: inputBorderColorHoverClass, inputCaretColor: inputCaretColorClass, inputFill: inputFillClass && "select__control_fill_".concat(inputFillClass), inputShape: inputShapeClass && "select__control_shape_".concat(inputShapeClass), inputTextColor: inputTextColorClass, inputTextSize: inputTextSizeClass, instanceId: instanceId, 
+        // @ts-expect-error
+        loadingMessage: getLoadingMessage, menuAfter: menuAfter, menuBefore: menuBefore, menuIsOpen: menuIsOpen, menuItemSize: menuItemSize, multipleItemFill: multipleItemFill, multipleItemFillHover: multipleItemFillHover, multipleItemIcon: multipleItemIcon, multipleItemIconFill: multipleItemIconFill, multipleItemTextColor: multipleItemTextColorClass, multipleItemTextSize: multipleItemTextSizeClass, noOptionBorder: optionBorderClass && "border-color_".concat(optionBorderClass), noOptionBorderType: optionBorderTypeClass && "border_type_".concat(optionBorderTypeClass), noOptionsFill: optionFillClass && "fill_".concat(optionFillClass), noOptionsSearchText: noOptionsSearchText, noOptionsText: noOptionsText || appearanceConfig.noOptionsText, noOptionsTextColor: noOptionsTextColorClass, noOptionsTextSize: noOptionsTextSizeClass, optionAfter: optionAfter, optionBefore: optionBefore, 
+        // optionBorder={optionBorderClass as tBorderColorProps}
+        optionBorder: optionBorderClass && "border-color_".concat(optionBorderClass), 
+        // optionBorderType={optionBorderTypeClass as tBorderTypeProps}
+        optionBorderType: optionBorderTypeClass && "border_type_".concat(optionBorderTypeClass), optionFill: optionFillClass && "fill_".concat(optionFillClass), optionFillHover: optionFillHoverClass && "fill_hover_".concat(optionFillHoverClass), options: options, optionSelected: optionSelected, optionShape: optionShapeClass, optionTextColor: optionTextColorClass, optionTextSize: optionTextSizeClass, placeholder: placeholder || appearanceConfig.placeholder, placeholderTextColor: placeholderTextColor || appearanceConfig.placeholderTextColor, placeholderTextSize: placeholderTextSize || appearanceConfig.placeholderTextSize, ref: selectRef, showBadge: showBadge, showDivider: showDivider, styles: clearStyle, value: value, before: before, after: after, openMenuOnClick: openMenuOnClick, closeMenuOnSelect: closeMenuOnSelect !== null && closeMenuOnSelect !== void 0 ? closeMenuOnSelect : false, isClearable: isClearable, isLoading: isLoading, isMulti: isMulti, isSearchable: isSearchable, set: set, onChange: onChange, onInputChange: onInputChange }));
 });
-SelectContainer.defaultProps = {
-    animationClose: 'select_animation_close',
-    animationOpen: 'select_animation_open',
-};
 
 export { SelectContainer as Select, SelectClearIndicator, SelectControl, SelectDropdownIndicator, SelectGroupHeading, SelectIndicatorsContainer, SelectInput, SelectMenu, SelectMultiValueContainer, SelectMultiValueLabel, SelectMultiValueRemove, SelectOption, SelectPlaceholder, SelectSingleValue, SelectValueContainer, selectConfig };