@itcase/ui 1.3.31 → 1.3.34

package/dist/cjs/components/Modal.js

@@ -4,21 +4,21 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var ReactDOM = require('react-dom');
-var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
-var useStyles = require('../hooks/useStyles.js');
-var Overlay = require('../../Overlay-Yf9EEclM.js');
-var Loader = require('../../Loader-Dn036JwE.js');
+var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
+var useStyles = require('../hooks/useStyles/useStyles.js');
+var Overlay = require('../../Overlay-DiCjwUv4.js');
+var Loader = require('../../Loader-CBEbIRnd.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('lodash/camelCase');
 require('lodash/castArray');
+require('lodash/upperFirst');
 require('../context/UIContext.js');
-require('../hooks/useMediaQueries.js');
+require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
-require('lodash/upperFirst');
-require('../hooks/styleAttributes.js');
-require('../../Text-Beslj4Ns.js');
+require('../hooks/useStyles/styleAttributes.js');
+require('../../Text-C49zj3jO.js');
 
 var modalAppearance = {
     dev: {},
@@ -133,16 +133,11 @@ var Modal = React.forwardRef(function Modal(props, ref) {
         }
     }, []);
     // Save ref things
-    React.useImperativeHandle(ref, function () { return ({ isOpen: isOpen, closeModal: closeModal, modalElement: modalElement, openModal: openModal }); }, [
-        isOpen,
-        openModal,
-        closeModal,
-        modalElement,
-    ]);
+    React.useImperativeHandle(ref, function () { return ({ isOpen: isOpen, closeModal: closeModal, modalElement: modalElement, openModal: openModal }); }, [isOpen, openModal, closeModal, modalElement]);
     // @ts-expect-error
     var appearanceConfig = modalConfig.appearance && modalConfig.appearance[appearance];
-    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props, appearanceConfig);
-    var borderColorClass = classGenerator.borderColorClass, borderTypeClass = classGenerator.borderTypeClass, borderWidthClass = classGenerator.borderWidthClass, elevationClass = classGenerator.elevationClass, fillClass = classGenerator.fillClass, shapeClass = classGenerator.shapeClass;
+    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    var borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, elevationClass = propsGenerator.elevationClass, fillClass = propsGenerator.fillClass, shapeClass = propsGenerator.shapeClass;
     // @ts-expect-error
     var modalStyles = useStyles.useStyles(props).styles;
     // Use a portal to render the children into the element

package/dist/cjs/components/ModalSheetBottom.js

@@ -3,16 +3,16 @@
 var tslib_es6 = require('../../tslib.es6-CCZ3TN_7.js');
 var jsxRuntime = require('react/jsx-runtime');
 var reactModalSheet = require('react-modal-sheet');
-var useStyles = require('../hooks/useStyles.js');
+var useStyles = require('../hooks/useStyles/useStyles.js');
 require('react');
 require('lodash/camelCase');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../context/UIContext.js');
-require('../hooks/useMediaQueries.js');
+require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
 require('../utils/setViewportProperty.js');
-require('../hooks/styleAttributes.js');
+require('../hooks/useStyles/styleAttributes.js');
 
 function ModalSheetBottom(props) {
     var children = props.children, dataTestId = props.dataTestId, dataTour = props.dataTour, isOpenModal = props.isOpenModal, closeButton = props.closeButton, closeModal = props.closeModal;

package/dist/cjs/components/Notification.js

@@ -2,21 +2,21 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
-var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
-var useStyles = require('../hooks/useStyles.js');
-var Text = require('../../Text-Beslj4Ns.js');
+var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
+var useStyles = require('../hooks/useStyles/useStyles.js');
+var Text = require('../../Text-C49zj3jO.js');
 var Notifications = require('../context/Notifications.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('react');
 require('lodash/camelCase');
 require('lodash/castArray');
+require('lodash/upperFirst');
 require('../context/UIContext.js');
-require('../hooks/useMediaQueries.js');
+require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
-require('lodash/upperFirst');
-require('../hooks/styleAttributes.js');
+require('../hooks/useStyles/styleAttributes.js');
 require('uuid');
 
 var notificationItemAppearance = {
@@ -61,8 +61,8 @@ var notificationItemConfig = {
 function NotificationItem(props) {
     var id = props.id, after = props.after, appearance = props.appearance, before = props.before, className = props.className, closeButton = props.closeButton, dataTour = props.dataTour, dataTestId = props.dataTestId, set = props.set, size = props.size, status = props.status, text = props.text, textColor = props.textColor, _a = props.textSize, textSize = _a === void 0 ? 's' : _a, title = props.title, titleTextColor = props.titleTextColor, _b = props.titleTextSize, titleTextSize = _b === void 0 ? 'm' : _b, onClickClose = props.onClickClose;
     var appearanceConfig = notificationItemConfig.appearance && notificationItemConfig.appearance[appearance];
-    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props, appearanceConfig);
-    var fillClass = classGenerator.fillClass, widthClass = classGenerator.widthClass;
+    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    var fillClass = propsGenerator.fillClass, widthClass = propsGenerator.widthClass;
     // @ts-expect-error
     var notificationStyles = useStyles.useStyles(props).styles;
     return (jsxRuntime.jsxs("div", { className: clsx('notification__item', status && "notification__item_status_".concat(status), set && "notification__item_set_".concat(set), size && "notification__item_set_".concat(size), closeButton && 'notification__item_type_close-button', widthClass && "width_".concat(widthClass), fillClass && "fill_".concat(fillClass)), "data-testid": dataTestId, "data-tour": dataTour, style: notificationStyles, children: [before, jsxRuntime.jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsxRuntime.jsx(Text.Text, { className: "notification__item-title", size: titleTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextSize), textColor: titleTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextColor), children: title })), text && (jsxRuntime.jsx(Text.Text, { className: "notification__item-text", size: textSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textSize), textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), children: text })), closeButton && (jsxRuntime.jsx("div", { className: clsx('notification__item-close', onClickClose && 'cursor_type_pointer'), onClick: function () { return onClickClose && onClickClose(id); }, children: closeButton }))] }), after] }));

package/dist/cjs/components/Overlay.js

@@ -1,21 +1,21 @@
 'use strict';
 
-var Overlay = require('../../Overlay-Yf9EEclM.js');
+var Overlay = require('../../Overlay-DiCjwUv4.js');
 require('react/jsx-runtime');
 require('clsx');
-require('../hooks/useDeviceTargetClassGenerator.js');
+require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('react');
 require('lodash/camelCase');
 require('lodash/castArray');
+require('lodash/upperFirst');
 require('../context/UIContext.js');
-require('../hooks/useMediaQueries.js');
+require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
 require('../utils/setViewportProperty.js');
-require('../hooks/useStyles.js');
+require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
-require('lodash/upperFirst');
-require('../hooks/styleAttributes.js');
+require('../hooks/useStyles/styleAttributes.js');
 
 
 

package/dist/cjs/components/Pagination.js

@@ -5,26 +5,26 @@ var React = require('react');
 var clsx = require('clsx');
 var ceil = require('lodash/ceil');
 var ReactPaginate = require('react-paginate');
-var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
-var DropdownItem = require('../../DropdownItem-FNOztnTT.js');
-var Icon = require('../../Icon-pUvizy3W.js');
-var Text = require('../../Text-Beslj4Ns.js');
+var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
+var DropdownItem = require('../../DropdownItem-BiiEhR49.js');
+var Icon = require('../../Icon-GVGrUu_Z.js');
+var Text = require('../../Text-C49zj3jO.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('lodash/camelCase');
 require('lodash/castArray');
+require('lodash/upperFirst');
 require('../context/UIContext.js');
-require('../hooks/useMediaQueries.js');
+require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
 require('../utils/setViewportProperty.js');
-require('../hooks/useStyles.js');
+require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
-require('lodash/upperFirst');
-require('../hooks/styleAttributes.js');
-require('../../Divider-Goh6mpPK.js');
-require('../../Link-CxWmYMyL.js');
+require('../hooks/useStyles/styleAttributes.js');
+require('../../Divider-ImOOytuN.js');
+require('../../Link-B38Hn4G2.js');
 require('react-inlinesvg');
-require('../../Tooltip-BDEyAnd-.js');
-require('../../Title-BfKF5WvZ.js');
+require('../../Tooltip-DpBQQoNo.js');
+require('../../Title-BWWyRwLY.js');
 
 var paginationAppearance = {
     default: {
@@ -125,8 +125,8 @@ function Pagination(props) {
     }, [pageNumber]);
     // @ts-expect-error
     var appearanceConfig = paginationConfig.appearance && paginationConfig.appearance[appearance];
-    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props, appearanceConfig);
-    var fillClass = classGenerator.fillClass, fillHoverClass = classGenerator.fillHoverClass, gapClass = classGenerator.gapClass, justifyContentClass = classGenerator.justifyContentClass;
+    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, gapClass = propsGenerator.gapClass, justifyContentClass = propsGenerator.justifyContentClass;
     return (jsxRuntime.jsxs("div", { className: "pagination", children: [jsxRuntime.jsx(ReactPaginate, { activeClassName: "pagination__item_state_active cursor_type_default", activeLinkClassName: "pagination__item-link_state_active", breakClassName: "pagination__item pagination__item_break", 
                 // break element
                 breakLabel: "...", breakLinkClassName: "pagination__item-link", disabledClassName: "pagination__item_state_disabled cursor_type_default", disabledLinkClassName: "pagination__item_state_disabled", 

package/dist/cjs/components/Panel.js

@@ -3,20 +3,20 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
-var useStyles = require('../hooks/useStyles.js');
-var Group = require('../../Group-BY8OkVsS.js');
-var Text = require('../../Text-Beslj4Ns.js');
+var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
+var useStyles = require('../hooks/useStyles/useStyles.js');
+var Group = require('../../Group-Chtnas-J.js');
+var Text = require('../../Text-C49zj3jO.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('lodash/camelCase');
 require('lodash/castArray');
+require('lodash/upperFirst');
 require('../context/UIContext.js');
-require('../hooks/useMediaQueries.js');
+require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
-require('lodash/upperFirst');
-require('../hooks/styleAttributes.js');
+require('../hooks/useStyles/styleAttributes.js');
 
 var panelConfig = {
     appearance: undefined,
@@ -28,8 +28,8 @@ var Panel = React.forwardRef(function Panel(props, ref) {
     var children = props.children, appearance = props.appearance, className = props.className, dataTour = props.dataTour, desc = props.desc, descTextColor = props.descTextColor, descTextSize = props.descTextSize, descTextWeight = props.descTextWeight, horizontalScroll = props.horizontalScroll, htmlFor = props.htmlFor, set = props.set, title = props.title, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextWeight = props.titleTextWeight, verticalScroll = props.verticalScroll;
     // @ts-expect-error
     var appearanceConfig = panelConfig.appearance && panelConfig.appearance[appearance];
-    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props, appearanceConfig);
-    var alignContentClass = classGenerator.alignContentClass, alignItemsClass = classGenerator.alignItemsClass, borderColorClass = classGenerator.borderColorClass, borderTypeClass = classGenerator.borderTypeClass, borderWidthClass = classGenerator.borderWidthClass, directionClass = classGenerator.directionClass, elevationClass = classGenerator.elevationClass, fillClass = classGenerator.fillClass, fillHoverClass = classGenerator.fillHoverClass, heightClass = classGenerator.heightClass, justifyContentClass = classGenerator.justifyContentClass, positionClass = classGenerator.positionClass, shapeClass = classGenerator.shapeClass, widthClass = classGenerator.widthClass, wrapClass = classGenerator.wrapClass;
+    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    var alignContentClass = propsGenerator.alignContentClass, alignItemsClass = propsGenerator.alignItemsClass, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, directionClass = propsGenerator.directionClass, elevationClass = propsGenerator.elevationClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, heightClass = propsGenerator.heightClass, justifyContentClass = propsGenerator.justifyContentClass, positionClass = propsGenerator.positionClass, shapeClass = propsGenerator.shapeClass, widthClass = propsGenerator.widthClass, wrapClass = propsGenerator.wrapClass;
     // @ts-expect-error
     var _a = useStyles.useStyles(props), panelStyles = _a.styles, panelWrapperStyles = _a.wrapper;
     return (jsxRuntime.jsxs(Group.Group, { className: clsx(className, 'panel', widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), set && "panel_set_".concat(set), wrapClass && "flex_wrap_".concat(wrapClass), shapeClass && "panel_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), alignContentClass && "panel_align-content_".concat(alignContentClass), alignItemsClass && "panel_align-items_".concat(alignItemsClass), elevationClass && "elevation_".concat(elevationClass), justifyContentClass && "panel_justify-content_".concat(justifyContentClass), positionClass && "position_".concat(positionClass), horizontalScroll && 'panel_type_scroll_horizontal', verticalScroll && 'panel_type_scroll_vertical'), ref: ref, "data-tour": dataTour, htmlFor: htmlFor, style: panelStyles, children: [title && (jsxRuntime.jsx("div", { className: "panel__header", children: jsxRuntime.jsx(Text.Text, { className: "panel__title", size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, children: title }) })), jsxRuntime.jsx("div", { className: clsx('panel__wrapper', directionClass && "panel_direction_".concat(directionClass)), style: panelWrapperStyles, children: children }), desc && (jsxRuntime.jsx("div", { className: "panel__footer", children: jsxRuntime.jsx(Text.Text, { className: "panel__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }) }))] }));

package/dist/cjs/components/Radio.js

@@ -2,20 +2,20 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
-var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
-var Text = require('../../Text-Beslj4Ns.js');
+var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
+var Text = require('../../Text-C49zj3jO.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('react');
 require('lodash/camelCase');
 require('lodash/castArray');
+require('lodash/upperFirst');
 require('../context/UIContext.js');
-require('../hooks/useMediaQueries.js');
+require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
 require('../utils/setViewportProperty.js');
-require('../hooks/useStyles.js');
+require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
-require('lodash/upperFirst');
-require('../hooks/styleAttributes.js');
+require('../hooks/useStyles/styleAttributes.js');
 
 var radioAppearance = {
     dev: {
@@ -51,23 +51,20 @@ 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.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.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 (jsxRuntime.jsxs(Tag, { className: clsx(className, 'radio', fillClass && "fill_".concat(fillClass), shapeClass && "radio_shape_".concat(shapeClass)), htmlFor: id, children: [jsxRuntime.jsxs("div", { className: clsx('radio__item', stateCheckmarkFillClass && "radio_checkmark_fill_".concat(stateCheckmarkFillClass)), children: [jsxRuntime.jsx("input", { className: "radio__input", checked: checked, disabled: disabled, 
-                        // @ts-expect-error
-                        id: id, type: "radio", onChange: onChange }), jsxRuntime.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 (jsxRuntime.jsxs(Tag, { className: clsx(className, 'radio', fillClass && "fill_".concat(fillClass), shapeClass && "radio_shape_".concat(shapeClass)), htmlFor: id, children: [jsxRuntime.jsxs("div", { className: clsx('radio__item', stateCheckmarkFillClass &&
+                    "radio_checkmark_fill_".concat(stateCheckmarkFillClass)), children: [jsxRuntime.jsx("input", { id: id, className: "radio__input", type: "radio", disabled: disabled, checked: checked, onChange: onChange }), jsxRuntime.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" }), jsxRuntime.jsx("div", { className: "radio__state-checkmark", children: "\u00A0" })] }), label && (jsxRuntime.jsx(Text.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 && (jsxRuntime.jsx(Text.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" }), jsxRuntime.jsx("div", { className: "radio__state-checkmark", children: "\u00A0" })] }), label && (jsxRuntime.jsx(Text.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 && (jsxRuntime.jsx(Text.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',
-};
 
 exports.Radio = Radio;
 exports.radioAppearance = radioAppearance;

package/dist/cjs/components/RangeSlider.js

@@ -3,24 +3,24 @@
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var Slider = require('rc-slider');
-var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
-var useStyles = require('../hooks/useStyles.js');
+var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
+var useStyles = require('../hooks/useStyles/useStyles.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('react');
 require('lodash/camelCase');
 require('lodash/castArray');
+require('lodash/upperFirst');
 require('../context/UIContext.js');
-require('../hooks/useMediaQueries.js');
+require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
-require('lodash/upperFirst');
-require('../hooks/styleAttributes.js');
+require('../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.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.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.useStyles(props).styles;
     return (jsxRuntime.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/cjs/components/Response.js

@@ -5,25 +5,25 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var SVG = require('react-inlinesvg');
-var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
-var useStyles = require('../hooks/useStyles.js');
-var Button = require('../../Button-BSnodY9v.js');
-var Group = require('../../Group-BY8OkVsS.js');
-var Text = require('../../Text-Beslj4Ns.js');
+var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
+var useStyles = require('../hooks/useStyles/useStyles.js');
+var Button = require('../../Button-D1m2MxZA.js');
+var Group = require('../../Group-Chtnas-J.js');
+var Text = require('../../Text-C49zj3jO.js');
 require('lodash/camelCase');
 require('lodash/castArray');
+require('lodash/upperFirst');
 require('../context/UIContext.js');
-require('../hooks/useMediaQueries.js');
+require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
-require('lodash/upperFirst');
-require('../hooks/styleAttributes.js');
-require('../../Icon-pUvizy3W.js');
-require('../../Link-CxWmYMyL.js');
-require('../../Tooltip-BDEyAnd-.js');
-require('../../Title-BfKF5WvZ.js');
-require('../../Loader-Dn036JwE.js');
+require('../hooks/useStyles/styleAttributes.js');
+require('../../Icon-GVGrUu_Z.js');
+require('../../Link-B38Hn4G2.js');
+require('../../Tooltip-DpBQQoNo.js');
+require('../../Title-BWWyRwLY.js');
+require('../../Loader-CBEbIRnd.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";
 
@@ -248,8 +248,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.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.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 = React.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/cjs/components/SVGContent.js

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

package/dist/cjs/components/ScrollOnDrag.js

@@ -5,29 +5,26 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var reactIndianaDragScroll = require('react-indiana-drag-scroll');
-var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
-var useStyles = require('../hooks/useStyles.js');
+var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
+var useStyles = require('../hooks/useStyles/useStyles.js');
 require('lodash/camelCase');
 require('lodash/castArray');
+require('lodash/upperFirst');
 require('../context/UIContext.js');
-require('../hooks/useMediaQueries.js');
+require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
-require('lodash/upperFirst');
-require('../hooks/styleAttributes.js');
+require('../hooks/useStyles/styleAttributes.js');
 
 function ScrollOnDrag(props) {
     var children = props.children, className = props.className, scrollContainerProps = props.scrollContainerProps;
     var ref = React.useRef(null);
-    var classGenerator = useDeviceTargetClassGenerator.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.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.useStyles(props), scrollContainerStyles = _a.scrollContainer, styles = _a.styles;
+    var _b = useStyles.useStyles(props), scrollContainerStyles = _b.scrollContainer, styles = _b.styles;
     return (jsxRuntime.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: jsxRuntime.jsx(reactIndianaDragScroll.ScrollContainer, tslib_es6.__assign({ className: "scroll-on-drag__wrapper" }, scrollContainerProps, { style: scrollContainerStyles, children: children })) }));
 }
-ScrollOnDrag.defaultProps = {
-    width: 'fill',
-};
 
 exports.ScrollOnDrag = ScrollOnDrag;

package/dist/cjs/components/ScrollToView.js

@@ -3,26 +3,26 @@
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var reactScroll = require('react-scroll');
-var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
-var useStyles = require('../hooks/useStyles.js');
+var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
+var useStyles = require('../hooks/useStyles/useStyles.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('react');
 require('lodash/camelCase');
 require('lodash/castArray');
+require('lodash/upperFirst');
 require('../context/UIContext.js');
-require('../hooks/useMediaQueries.js');
+require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
-require('lodash/upperFirst');
-require('../hooks/styleAttributes.js');
+require('../hooks/useStyles/styleAttributes.js');
 
 var ScrollToView = reactScroll.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.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.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.useStyles(props).styles;
-    return (jsxRuntime.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 (jsxRuntime.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 }));
 });
 
 exports.ScrollToView = ScrollToView;