armtek-uikit-react 1.0.121 → 1.0.124

package/ui/Form/Checkbox/Checkbox.js

@@ -2,14 +2,9 @@
 
 import { isValidElement, useRef, useState } from 'react';
 import clsx from 'clsx';
-import css from "./Checkbox.module.scss";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-const CssClasses = ['checkbox', 'checkbox__input', 'checkbox__label', 'checkbox__text', 'checkbox_disabled', 'checkbox_medium', 'checkbox_small', 'checkbox__label_intermediate', 'checkbox__label_checked', 'checkbox__label_disabled', 'checkbox_contained', 'checkbox_outlined', 'checkbox_primary', 'checkbox_secondary', 'checkbox_neutral', 'checkbox_success', 'checkbox_error', 'checkbox_warning', 'radio'];
-
-// const css = getCssPrefix(CssClasses)
-
 const Checkbox = props => {
   let {
     label,
@@ -29,20 +24,20 @@ const Checkbox = props => {
   };
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs("div", {
-      className: clsx(css.checkbox, className, {
-        [css.checkbox_text]: ! /*#__PURE__*/isValidElement(label)
+      className: clsx('arm-checkbox', className, {
+        'arm-checkbox_text': ! /*#__PURE__*/isValidElement(label)
       }),
       children: [/*#__PURE__*/_jsx("label", {
         ref: labelRef,
-        className: clsx(css.checkbox__label, css['checkbox_' + size], css['checkbox_' + variant], css['checkbox_' + color], {
-          [css.checkbox__label_checked]: inputProps.checked !== undefined ? inputProps.checked : checked,
-          [css.checkbox__label_intermediate]: !!intermediate,
-          [css.checkbox__label_disabled]: !!inputProps.disabled
+        className: clsx('arm-checkbox__label', ['arm-checkbox_' + size], ['arm-checkbox_' + variant], ['arm-checkbox_' + color], {
+          'arm-checkbox__label_checked': inputProps.checked !== undefined ? inputProps.checked : checked,
+          'arm-checkbox__label_intermediate': !!intermediate,
+          'arm-checkbox__label_disabled': !!inputProps.disabled
         }),
         children: /*#__PURE__*/_jsx("input", {
           ...inputProps,
-          className: clsx(css.checkbox__input, {
-            '_checked': !!inputProps.checked
+          className: clsx('arm-checkbox__input', {
+            'arm-checkbox__input_checked': !!inputProps.checked
           }),
           onChange: handleChange,
           type: props.type || 'checkbox'
@@ -52,9 +47,9 @@ const Checkbox = props => {
           var _labelRef$current;
           return (_labelRef$current = labelRef.current) == null ? void 0 : _labelRef$current.click();
         },
-        className: clsx(css.checkbox__text, {
-          [css.checkbox__text_raw]: ! /*#__PURE__*/isValidElement(label),
-          [css['checkbox_text_size_' + size]]: size
+        className: clsx('arm-checkbox__text', {
+          'arm-checkbox__text_raw': ! /*#__PURE__*/isValidElement(label),
+          ['arm-checkbox_text_size_' + size]: size
         }),
         children: label
       })]

package/ui/Form/FormControls/FormControls.js

@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import css from "./FormControls.module.scss";
 import Button from "../../Button";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -17,25 +16,25 @@ const FormControls = props => {
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs("div", {
       ...divProps,
-      className: clsx(className, 'Arm-FormControls', css.FormControls),
+      className: clsx(className, 'arm-form-controls'),
       children: [/*#__PURE__*/_jsx("div", {
-        className: clsx('Arm-FormControls__button', css.FormControls__button),
+        className: 'arm-form-controls__button',
         children: /*#__PURE__*/_jsx(Button, {
           variant: 'contained',
           color: 'primary',
           onClick: onSubmit,
           ...submitProps,
-          className: clsx('Arm-FormControls__btn', classes == null ? void 0 : classes.submitBtn, css.FormControls__btn),
+          className: clsx('arm-form-controls__btn', classes == null ? void 0 : classes.submitBtn),
           children: submitProps == null ? void 0 : submitProps.text
         })
       }), onCancel && /*#__PURE__*/_jsx("div", {
-        className: clsx('Arm-FormControls__button', css.FormControls__button),
+        className: 'arm-form-controls__button',
         children: /*#__PURE__*/_jsx(Button, {
           variant: 'outlined',
           color: 'primary',
           onClick: onCancel,
           ...cancelProps,
-          className: clsx('Arm-FormControls__btn', classes == null ? void 0 : classes.cancelBtn, css.FormControls__btn),
+          className: clsx('arm-form-controls__btn', classes == null ? void 0 : classes.cancelBtn),
           children: cancelProps == null ? void 0 : cancelProps.text
         })
       })]

package/ui/Form/Interval/Interval.js

@@ -3,14 +3,9 @@
 import { forwardRef, useState } from 'react';
 import { TextFieldContainer, TextFieldInput } from "../TextField/TextField";
 import HelperText from "../../HelperText/HelperText";
-import css from "./Interval.module.scss";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-const CssClasses = ['interval', 'interval__end', 'interval__item', 'interval__helperText', 'intervalslide__slider'];
-
-// const css = getCssPrefix(CssClasses)
-
 const Interval = /*#__PURE__*/forwardRef((props, ref) => {
   let {
     value,
@@ -61,9 +56,9 @@ const Interval = /*#__PURE__*/forwardRef((props, ref) => {
         size: inputProps.size,
         variant: inputProps.variant,
         children: /*#__PURE__*/_jsxs("div", {
-          className: css.interval,
+          className: 'arm-interval',
           children: [/*#__PURE__*/_jsx("div", {
-            className: css.interval__item,
+            className: 'arm-interval__item',
             children: /*#__PURE__*/_jsx(TextFieldInput, {
               ...inputProps,
               value: realMin,
@@ -75,7 +70,7 @@ const Interval = /*#__PURE__*/forwardRef((props, ref) => {
               onChange: handleMin
             })
           }), /*#__PURE__*/_jsx("div", {
-            className: css.interval__item,
+            className: 'arm-interval__item',
             children: /*#__PURE__*/_jsx(TextFieldInput, {
               ...inputProps,
               value: realMax,
@@ -83,14 +78,14 @@ const Interval = /*#__PURE__*/forwardRef((props, ref) => {
               type: 'number',
               onFocus: handleFocus,
               onBlur: handleBlur,
-              className: css.interval__end,
+              className: 'arm-interval__end',
               focused: true,
               onChange: handleMax
             })
           })]
         })
       }), helperText && /*#__PURE__*/_jsx(HelperText, {
-        className: css.interval__helperText,
+        className: 'arm-interval__helper',
         error: error,
         children: helperText
       })]

package/ui/Form/Interval/IntervalSlide.js

@@ -3,14 +3,9 @@
 import Interval from "./Interval";
 import { useState } from 'react';
 import Slider from "../../Slider/Slider";
-import css from "./Interval.module.scss";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-const CssClasses = ['intervalslide__slider'];
-
-// const css = getCssPrefix(CssClasses)
-
 const IntervalSlide = props => {
   let {
     onChange,
@@ -31,7 +26,7 @@ const IntervalSlide = props => {
         ...restProps,
         onChange: setValue
       }), /*#__PURE__*/_jsx("div", {
-        className: css.intervalslide__slider,
+        className: 'arm-intervalslide__slider',
         children: /*#__PURE__*/_jsx(Slider, {
           range: true,
           min: props.min,

package/ui/Form/Period/Period.js

@@ -6,14 +6,9 @@ import ButtonIcon from "../../ButtonIcon";
 import Card from "../../Card/Card";
 import DatePicker from "../DatePicker/DatePicker";
 import { DateService } from "../../../lib/services/DateService";
-import css from "./Period.module.scss";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-const CssClasses = ['dateField', 'dateField__picker'];
-
-// const css = getCssPrefix(CssClasses)
-
 const Period = /*#__PURE__*/forwardRef((props, ref) => {
   let {
     onChange,
@@ -48,7 +43,7 @@ const Period = /*#__PURE__*/forwardRef((props, ref) => {
   if (realValue[0] && realValue[1]) displayValue = `${DateService(realValue[0]).format('dd.MM.yyyy')} - ${DateService(realValue[1]).format('dd.MM.yyyy')}`;
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs("div", {
-      className: css.dateField,
+      className: 'arm-period',
       children: [/*#__PURE__*/_jsx(TextField, {
         ref: ref,
         placeholder: 'дд.мм.гггг - дд.мм.гггг',
@@ -67,7 +62,7 @@ const Period = /*#__PURE__*/forwardRef((props, ref) => {
           })
         })
       }), active && /*#__PURE__*/_jsx(Card, {
-        className: css.dateField__picker,
+        className: 'arm-period__picker',
         children: /*#__PURE__*/_jsx(DatePicker, {
           onChange: handleChange,
           selectsRange: true,

package/ui/Form/Radio/Radio.js

@@ -1,17 +1,12 @@
 import Checkbox from "../Checkbox/Checkbox";
 import clsx from 'clsx';
-import css from "./Radio.module.scss";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-const CssClasses = ['radio'];
-
-// const css = getCssPrefix(CssClasses)
-
 const Radio = props => {
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(Checkbox, {
       ...props,
-      className: clsx(props.className, css.radio),
+      className: clsx(props.className, 'arm-radio'),
       type: 'radio'
     })
   });

package/ui/Form/Rating/Rating.js

@@ -2,14 +2,9 @@
 
 import { useState } from 'react';
 import clsx from 'clsx';
-import css from "./Rating.module.scss";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-const CssClasses = ['rating', 'rating__item', 'rating_medium', 'rating_small', 'rating__item_disabled'];
-
-// const css = getCssPrefix(CssClasses)
-
 const Rating = props => {
   let {
     size = 'large',
@@ -31,7 +26,7 @@ const Rating = props => {
   };
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs("div", {
-      className: css.rating,
+      className: 'arm-rating',
       onMouseLeave: handleLeaveRating,
       children: [/*#__PURE__*/_jsx("input", {
         value: value,
@@ -43,8 +38,8 @@ const Rating = props => {
           onMouseEnter: handleMouseEnter(index + 1),
           className: clsx('material_icon', {
             ['material_icon_solid']: index + 1 <= hovered || index + 1 <= realValue,
-            [css.rating__item_disabled]: !!restProps.disabled
-          }, css.rating__item, css['rating_' + size]),
+            'arm-rating__item_disabled': !!restProps.disabled
+          }, 'arm-rating__item', ['arm-rating__item_' + size]),
           children: "star"
         }, index);
       })]

package/ui/Form/Select/Select.js

@@ -5,7 +5,6 @@ import { forwardRef, useRef, useState } from 'react';
 import clsx from 'clsx';
 import ListItem from "../../List/ListItem";
 import useClickOutside from "../../../lib/hooks/useClickOutside";
-import css from "./Select.module.scss";
 import ButtonIcon from "../../ButtonIcon";
 import Adornment from "../../Adornment";
 import { SelectSummary, SelectSummaryChips } from "./SelectSummary";
@@ -13,10 +12,6 @@ import Popover from "../../Popover";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const CssClasses = ['select', 'select__input_wrapper', 'select__input', 'options', 'options_inline'];
-
-// const css = getCssPrefix(CssClasses)
-
 export const getOptionValue = option => option.value || option.text;
 
 // let selectEl!: HTMLSelectElement
@@ -126,9 +121,9 @@ function Select(props) {
     children: /*#__PURE__*/_jsxs("div", {
       className: className,
       children: [/*#__PURE__*/_jsxs("div", {
-        className: css.select,
+        className: 'arm-select',
         children: [/*#__PURE__*/_jsx("div", {
-          className: css.select__input_wrapper,
+          className: 'arm-select__input_wrapper',
           onClick: handleOpen,
           ref: anchorEl,
           children: /*#__PURE__*/_jsx(TextField, {
@@ -138,7 +133,7 @@ function Select(props) {
             onFocus: handleFocus,
             onBlur: handleBlur,
             value: !search ? selectedText : q,
-            className: clsx(css.select__input),
+            className: clsx('arm-select__input'),
             endAdornment: selectEndAdornment,
             style: {
               pointerEvents: 'none'
@@ -200,8 +195,8 @@ const SelectOptions = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs("div", {
       ref: ref,
-      className: clsx(css.options, {
-        [css.options_inline]: !!inline
+      className: clsx('arm-options', {
+        'arm-options_inline': !!inline
       }),
       children: [options.map((item, index) => {
         let optValue = getOptionValue(item);
@@ -215,7 +210,7 @@ const SelectOptions = /*#__PURE__*/forwardRef((props, ref) => {
           children: item.text
         }, index);
       }), listStyle === 'checkbox' && !!multiple && /*#__PURE__*/_jsx("div", {
-        className: css.selectSummary__wrapper,
+        className: 'arm-selectSummary__wrapper',
         children: /*#__PURE__*/_jsx(SelectSummary, {
           options: options,
           value: value,

package/ui/Form/Select/SelectSummary.js

@@ -1,7 +1,6 @@
 import Badge from "../../Badge";
 import Button from "../../Button";
 import clsx from 'clsx';
-import css from "./Select.module.scss";
 import Chip from "../../Chip";
 import { getOptionValue } from "./Select";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -26,19 +25,19 @@ export const SelectSummary = props => {
   let resetAllDisabled = disabled || selectedOptions.length === 0;
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs("div", {
-      className: clsx('Arm-select-summary', css.selectSummary),
+      className: 'arm-selectSummary',
       children: [selectedOptions.length > 0 && /*#__PURE__*/_jsx("div", {
-        className: css.selectSummary__options,
+        className: 'arm-selectSummary__options',
         children: /*#__PURE__*/_jsx(SelectSummaryChips, {
           options: selectedOptions,
           onDelete: onClose,
           disabled: disabled
         })
       }), /*#__PURE__*/_jsxs("div", {
-        className: css.selectSummary__row,
+        className: 'arm-selectSummary__row',
         children: [!!onSelectAll && /*#__PURE__*/_jsx("div", {
-          className: clsx(css.selectSummary__check, {
-            [css.selectSummary__check_disabled]: selectAllDisabled
+          className: clsx('arm-selectSummary__check', {
+            'arm-selectSummary__check_disabled': selectAllDisabled
           }),
           children: /*#__PURE__*/_jsx(Badge, {
             badgeText: options.length,
@@ -46,14 +45,14 @@ export const SelectSummary = props => {
             color: 'info',
             position: 'center-right',
             children: /*#__PURE__*/_jsx("span", {
-              className: css.selectSummary__checkLabel,
+              className: 'arm-selectSummary__checkLabel',
               onClick: onSelectAll,
               children: label_check_all
             })
           })
         }), !!onClearAll && /*#__PURE__*/_jsx("div", {
-          className: clsx(css.selectSummary__check, {
-            [css.selectSummary__check_disabled]: resetAllDisabled
+          className: clsx('arm-selectSummary__check', {
+            'arm-selectSummary__check_disabled': resetAllDisabled
           }),
           children: /*#__PURE__*/_jsx(Badge, {
             badgeText: selectedOptions.length,
@@ -61,14 +60,14 @@ export const SelectSummary = props => {
             color: 'info',
             position: 'center-right',
             children: /*#__PURE__*/_jsx("span", {
-              className: css.selectSummary__checkLabel,
+              className: 'arm-selectSummary__checkLabel',
               onClick: onClearAll,
               children: label_uncheck_all
             })
           })
         }), !!onSubmit && /*#__PURE__*/_jsx("div", {
           children: /*#__PURE__*/_jsx(Button, {
-            className: css.selectSummary__button,
+            className: 'arm-selectSummary__button',
             disabled: disabled,
             variant: 'transparent',
             size: 'small',
@@ -90,11 +89,11 @@ export const SelectSummaryChips = props => {
   } = props;
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx("div", {
-      className: css.selectSummary__optionList,
+      className: 'arm-selectSummary__optionList',
       children: options.map(option => {
         return /*#__PURE__*/_jsx(Chip, {
           disabled: disabled,
-          className: css.selectSummary__option,
+          className: 'arm-selectSummary__option',
           text: option.text,
           onClose: e => onDelete(e, option)
         }, getOptionValue(option));

package/ui/Form/Switch/Switch.js

@@ -1,12 +1,7 @@
 import clsx from 'clsx';
-import css from "./Switch.module.scss";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-const CssClasses = ['switch', 'switch__input', 'switch__slider', 'switch_small'];
-
-// const css = getCssPrefix(CssClasses)
-
 const Switch = props => {
   let {
     onChange,
@@ -15,13 +10,13 @@ const Switch = props => {
   } = props;
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs("label", {
-      className: clsx(css.switch, css['switch_' + props.size]),
+      className: clsx('arm-switch', ['arm-switch_' + props.size]),
       children: [/*#__PURE__*/_jsx("input", {
-        className: css.switch__input,
+        className: 'arm-switch__input',
         ...restProps,
         type: "checkbox"
       }), /*#__PURE__*/_jsx("span", {
-        className: css.switch__slider
+        className: 'arm-switch__slider'
       })]
     })
   });

package/ui/Form/TextArea/TextArea.js

@@ -3,13 +3,8 @@
 import TextField from "../TextField/TextField";
 import { useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
-import css from "./TextArea.module.scss";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-const CssClasses = ['textarea', 'size_small'];
-
-// const css = getCssPrefix(CssClasses)
-
 const TextArea = props => {
   var _textareaRef$current, _textareaRef$current2;
   let {
@@ -33,11 +28,11 @@ const TextArea = props => {
       ref: textareaRef,
       value: value,
       ...restProps,
-      className: clsx(css.textarea, css['size_' + restProps.size], className),
+      className: clsx('arm-textarea', ['arm-textarea_size_' + restProps.size], className),
       onChange: handleChange,
       multiline: true,
       classes: {
-        root: css.textarea__root
+        root: 'arm-textarea__root'
       },
       style: {
         height: textHeight + 'px'

package/ui/Form/TextField/TextField.js

@@ -1,17 +1,12 @@
 "use client";
 
-import { forwardRef, useRef, useState, useImperativeHandle } from 'react';
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 import clsx from 'clsx';
 import HelperText from "../../HelperText/HelperText";
-import css from "./TextField.module.scss";
 import Adornment, { AdornmentContainer } from "../../Adornment";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-const CssClasses = ['textfield__container_outlined', 'textfield__container', 'textfield', 'textfield_outlined', 'textfield_focused', 'textfield_disabled', 'textfield_error', '_label', 'textfield__label_focused', 'textfield__label_small', 'textfield__label_error', 'textfield__label', 'textfield__input', 'textfield__input_outlined', 'size_small', 'textfield__adornment', 'textfield__helperText', 'textfield__icon'];
-
-// const css = getCssPrefix(CssClasses)
-
 export const TextField = /*#__PURE__*/forwardRef((props, ref) => {
   var _inputRef$current;
   let {
@@ -55,7 +50,7 @@ export const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     if (inputProps.onBlur) inputProps.onBlur(e);
   };
   let endContent = /*#__PURE__*/_jsxs(AdornmentContainer, {
-    className: css.textfield__adornment,
+    className: 'arm-textfield__adornment',
     children: [endAdornment, error && /*#__PURE__*/_jsx(Adornment, {
       className: clsx('material_icon', 'text-error'),
       children: "error_outline"
@@ -96,7 +91,7 @@ export const TextField = /*#__PURE__*/forwardRef((props, ref) => {
           onBlur: handleBlur
         }), endContentExists && endContent]
       }), helperText && /*#__PURE__*/_jsx(HelperText, {
-        className: css.textfield__helperText,
+        className: 'arm-textfield__helperText',
         error: error,
         children: helperText
       })]
@@ -117,10 +112,10 @@ export const TextFieldContainer = props => {
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx("div", {
       ...restProps,
-      className: clsx('TextFieldContrainer', css.textfield_root, css['textfield_root_' + variant], css['size_' + size], {
-        [css.textfield_root_focused]: focused,
-        [css.textfield_root_disabled]: disabled,
-        [css.textfield_root_error]: error
+      className: clsx('TextFieldContrainer', 'arm-textfield_root', ['arm-textfield_root_' + variant], ['arm-textfield_root_size_' + size], {
+        'arm-textfield_root_focused': focused,
+        'arm-textfield_root_disabled': disabled,
+        'arm-textfield_root_error': error
       }, className),
       children: children
     })
@@ -145,25 +140,25 @@ export const TextFieldInput = /*#__PURE__*/forwardRef((props, ref) => {
   };
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs("div", {
-      className: clsx(css.textfield__wrapper, css['size_' + size], wrapperClass, {
-        [css._label]: !!label,
-        [css.textfield__wrapper_outlined]: variant === 'outlined'
+      className: clsx('arm-textfield__wrapper', ['arm-textfield__wrapper_size_' + size], wrapperClass, {
+        'arm-textfield__wrapper_label': !!label,
+        'arm-textfield__wrapper_outlined': variant === 'outlined'
       }),
       children: [/*#__PURE__*/_jsx(Component, {
         ref: ref,
         ...inputProps,
         onWheel: handleWheel,
-        className: clsx(css.textfield__input, css['size_' + size], css['textfield__input_' + variant], {
-          [css._label]: !!label,
-          [css.textfield_focused]: focused,
-          [css.textfield_error]: !!error,
-          [css.textarea]: multiline
+        className: clsx('arm-textfield__input', ['arm-textfield__input_size_' + size], ['arm-textfield__input_' + variant], {
+          'arm-textfield__input_label': !!label,
+          'arm-textfield_focused': focused,
+          'arm-textfield_error': !!error,
+          'arm-textarea': multiline
         }, className)
       }), label && /*#__PURE__*/_jsx("span", {
-        className: clsx(css.textfield__label, {
-          [css.textfield__label_focused]: focused || !!props.value || !!((_ref$current = ref.current) != null && _ref$current.value),
-          [css.textfield__label_small]: size === 'small',
-          [css.textfield__label_error]: error
+        className: clsx('arm-textfield__label', {
+          'arm-textfield__label_focused': focused || !!props.value || !!((_ref$current = ref.current) != null && _ref$current.value),
+          'arm-textfield__label_small': size === 'small',
+          'arm-textfield__label_error': error
         }),
         children: label
       })]

package/ui/HelperText/HelperText.js

@@ -1,11 +1,6 @@
 import clsx from 'clsx';
-import css from "./HelperText.module.scss";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-const CssClasses = ['helperText', 'helperText_error'];
-
-// const css = getCssPrefix(CssClasses)
-
 const HelperText = props => {
   let {
     className,
@@ -16,8 +11,8 @@ const HelperText = props => {
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx("span", {
       ...restProps,
-      className: clsx('Arm-helper-text', css.helperText, {
-        [css.helperText_error]: !!error
+      className: clsx('arm-helper-text', {
+        'arm-helper-text_error': !!error
       }, className),
       children: children
     })

package/ui/Icon/Icon.js

@@ -1,6 +1,5 @@
 import { forwardRef } from 'react';
 import clsx from 'clsx';
-import css from "./Icon.module.scss";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 const Icon = /*#__PURE__*/forwardRef((props, ref) => {
@@ -19,12 +18,12 @@ const Icon = /*#__PURE__*/forwardRef((props, ref) => {
     children: /*#__PURE__*/_jsx("span", {
       ref: ref,
       ...spanProps,
-      className: clsx(className, 'Arm-Icon', {
-        [css['Icon_size_' + size]]: size,
-        [css['Icon_theme_' + theme]]: theme,
+      className: clsx(className, 'arm-icon', {
+        ['arm-icon_size_' + size]: size,
+        ['arm-icon_theme_' + theme]: theme,
+        ['arm-icon_color_' + color]: color,
         'mi': variant === 'outlined',
-        'mis': variant === 'contained',
-        [css['Icon_color_' + color]]: color
+        'mis': variant === 'contained'
       }),
       style: fs ? {
         ...spanProps.style,

package/ui/Link/Link.js

@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import css from "./Link.module.scss";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 const Link = props => {
@@ -18,13 +17,13 @@ const Link = props => {
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(Component, {
       ...restProps,
-      className: clsx('Arm-link', css.link, {
-        [css.link_border]: !!border,
-        [css.link_disabled]: !!disabled,
-        [css.link_dark]: theme === 'dark',
-        [css['link_size_' + size]]: !!size,
-        [css['link_color_' + color]]: !!color
-      }, css['link_border_' + border], className),
+      className: clsx('arm-link', {
+        'arm-link_border': !!border,
+        'arm-link_disabled': !!disabled,
+        'arm-link_dark': theme === 'dark',
+        ['arm-link_size_' + size]: !!size,
+        ['arm-link_color_' + color]: !!color
+      }, ['arm-link_border_' + border], className),
       children: children
     })
   });