armtek-uikit-react 1.0.120 → 1.0.122

package/ui/ButtonGroup/ButtonGroup.js

@@ -1,12 +1,7 @@
 import { Children, cloneElement, isValidElement } from 'react';
 import clsx from 'clsx';
-import css from "./ButtonGroup.module.scss";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-const ButtonGroupClasses = ['button_group', 'button_group_inline', 'button_group_column'];
-
-// const css = getCssPrefix(ButtonGroupClasses)
-
 const ButtonGroup = props => {
   let {
     orientation = 'inline',
@@ -17,7 +12,7 @@ const ButtonGroup = props => {
   let arrChildren = Children.toArray(children);
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx("div", {
-      className: clsx(css.button_group, css['button_group_' + orientation], className),
+      className: clsx('arm-button-group', ['arm-button-group_' + orientation], className),
       children: arrChildren.map((item, index) => {
         return /*#__PURE__*/isValidElement(item) && /*#__PURE__*/cloneElement(item, {
           ...item.props,

package/ui/ButtonIcon/ButtonIcon.js

@@ -1,12 +1,7 @@
 import Button from "../Button/Button";
 import clsx from 'clsx';
-import css from "./ButtonIcon.module.scss";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-const ButtonIconClasses = ['button_icon'];
-
-// const css = getCssPrefix(ButtonIconClasses)
-
 function ButtonIcon(props) {
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(Button, {
@@ -14,8 +9,8 @@ function ButtonIcon(props) {
       variant: 'transparent',
       ...props,
       asIcon: true,
-      className: clsx(css.button_icon, css['button_icon_' + props.size], props.className, {
-        [css['ButtonIcon_square']]: props.radius === false,
+      className: clsx('arm-button-icon', ['arm-button-icon_' + props.size], props.className, {
+        'arm-button-icon_square': props.radius === false,
         'border-radius': props.radius === true
       }),
       children: props.children

package/ui/Card/Card.d.ts

@@ -1,4 +1,4 @@
 import { HTMLAttributes } from 'react';
 export type CardProps = HTMLAttributes<HTMLDivElement>;
-declare const Card: (props: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+declare const Card: (props: CardProps) => import("react/jsx-runtime").JSX.Element;
 export default Card;

package/ui/Card/Card.js

@@ -1,16 +1,11 @@
 import clsx from 'clsx';
-import css from "./Card.module.scss";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-const CssClasses = ['card'];
-
-// const css = getCssPrefix(CssClasses)
-
 const Card = props => {
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx("div", {
       ...props,
-      className: clsx(css.card, props.className)
+      className: clsx('arm-card', props.className)
     })
   });
 };

package/ui/Chip/Chip.js

@@ -1,12 +1,7 @@
 import clsx from 'clsx';
-import css from "./Chip.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 = ['chip', 'chip__inner', 'chip__icon', 'chip__close', 'chip__close_primary', 'chip__close_secondary', 'chip_small', 'chip__icon_small', 'chip__close_small', 'chip_outlined', 'chip_secondary', 'chip_primary'];
-
-// const css = getCssPrefix(CssClasses)
-
 function Chip(props) {
   let {
     size,
@@ -24,21 +19,21 @@ function Chip(props) {
   let Component = as || 'span';
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(Component, {
-      className: clsx('Arm-chip', className, {
-        [css.chip_disabled]: !!disabled
-      }, css.chip, css['chip_' + size], css['chip_' + variant], css['chip_' + color], css['chip_' + shape]),
+      className: clsx('arm-chip', className, {
+        'arm-chip_disabled': !!disabled
+      }, ['arm-chip_' + size], ['arm-chip_' + variant], ['arm-chip_' + color], ['arm-chip_' + shape]),
       children: /*#__PURE__*/_jsxs("span", {
-        className: css.chip__inner,
+        className: 'arm-chip__inner',
         children: [icon && /*#__PURE__*/_jsx("span", {
-          className: clsx('material_icon', css.chip__icon, css['chip__icon_' + size]),
+          className: clsx('material_icon', 'arm-chip__icon', ['arm-chip__icon_' + size]),
           children: icon
         }), /*#__PURE__*/_jsx("span", {
-          className: css.chip__text,
+          className: 'arm-chip__text',
           children: text || children
         }), onClose && /*#__PURE__*/_jsx("span", {
           className: clsx('material_icon_solid', {
-            [css.chip__close_disabled]: !!disabled
-          }, css['chip__close_' + size], css['chip__close_' + color], css.chip__close),
+            'arm-chip__close_disabled': !!disabled
+          }, ['arm-chip__close_' + size], ['arm-chip__close_' + color], 'arm-chip__close'),
           onClick: onClose,
           children: /*#__PURE__*/_jsx("span", {
             className: 'material_icon',

package/ui/Dropdown/Dropdown.js

@@ -3,7 +3,6 @@
 import { useEffect, useRef } from 'react';
 import clsx from 'clsx';
 import { CSSTransition } from 'react-transition-group';
-import css from "./Dropdown.module.scss";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 function Dropdown(props) {
@@ -24,17 +23,17 @@ function Dropdown(props) {
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx("div", {
       ...divProps,
-      className: clsx('Arm-dropdown', css.Dropdown, className),
+      className: clsx('arm-dropdown', className),
       children: /*#__PURE__*/_jsx("div", {
         className: clsx({
           // [css.Dropdown__ContentWrapper_hidden]: !expanded
         }),
         children: /*#__PURE__*/_jsx(CSSTransition, {
           classNames: {
-            'enter': css.Dropdown__ContentWrapperEnter,
-            'enterActive': css.Dropdown__ContentWrapperEnterActive,
-            'exit': css.Dropdown__ContentWrapperExit,
-            'exitActive': css.Dropdown__ContentWrapperExitActive
+            'enter': 'arm-dropdown__ContentWrapperEnter',
+            'enterActive': 'arm-dropdown__ContentWrapperEnterActive',
+            'exit': 'arm-dropdown__ContentWrapperExit',
+            'exitActive': 'arm-dropdown__ContentWrapperExitActive'
           },
           in: expanded,
           timeout: duration,
@@ -43,7 +42,7 @@ function Dropdown(props) {
           children: /*#__PURE__*/_jsx("div", {
             ref: nodeRef,
             children: /*#__PURE__*/_jsx("div", {
-              className: css.Dropdown__Content,
+              className: 'arm-dropdown__Content',
               children: children
             })
           })

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'