armtek-uikit-react 1.0.120 → 1.0.122

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
     })
   });

package/ui/List/ListItem.js

@@ -1,14 +1,9 @@
 import clsx from 'clsx';
 import Checkbox from "../Form/Checkbox/Checkbox";
 import Adornment, { AdornmentContainer } from "../Adornment/Adornment";
-import css from "./ListItem.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 = ['listitem', 'listitem_active', 'listitem_divider', 'listitemText'];
-
-// const css = getCssPrefix(CssClasses)
-
 function ListItem(props) {
   let {
     children,
@@ -28,13 +23,13 @@ function ListItem(props) {
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs(Component, {
       ...restProps,
-      className: clsx(css.listitem, className, {
-        [css.listitem_active]: !!active || !!checked,
-        [css.listitem_divider]: !!divider,
-        [css.listitem_disabled]: !!restProps.disabled,
-        [css.listitem_endAdornment]: !!endAdornment,
-        [css.listitem_startAdornment]: withStartAdornment,
-        [css.listitem_dark]: theme === 'dark'
+      className: clsx('arm-listitem', className, {
+        'arm-listitem_active': !!active || !!checked,
+        'arm-listitem_divider': !!divider,
+        'arm-listitem_disabled': !!restProps.disabled,
+        'arm-listitem_endAdornment': !!endAdornment,
+        'arm-listitem_startAdornment': withStartAdornment,
+        'arm-listitem_dark': theme === 'dark'
       }),
       children: [withStartAdornment && /*#__PURE__*/_jsxs(AdornmentContainer, {
         children: [checked !== undefined && /*#__PURE__*/_jsx(Adornment, {
@@ -52,14 +47,14 @@ function ListItem(props) {
           children: startAdornment
         })]
       }), /*#__PURE__*/_jsxs("span", {
-        className: clsx(css.listitem__Content, {
-          [css.listitem__Content_adornment_left]: withStartAdornment
+        className: clsx('arm-listitem__content', {
+          'arm-listitem__content_adornment_left': withStartAdornment
         }),
         children: [/*#__PURE__*/_jsx("span", {
-          className: clsx(css.listitemText),
+          className: 'arm-listitem__text',
           children: children
         }), title && /*#__PURE__*/_jsx("span", {
-          className: css.listitem__helper,
+          className: 'arm-listitem__helper',
           children: title
         })]
       }), !!endAdornment && /*#__PURE__*/_jsx(AdornmentContainer, {

package/ui/Loader/Loader.js

@@ -1,11 +1,6 @@
 import clsx from 'clsx';
-import css from "./Loader.module.scss";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-const CssClasses = ['loader'];
-
-// const css = getCssPrefix(CssClasses)
-
 const Loader = props => {
   let {
     size,
@@ -17,10 +12,10 @@ const Loader = props => {
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx("div", {
       ...divProps,
-      className: clsx(css.loader, {
-        [css['loader_size_' + size]]: size,
-        [css['loader_theme_' + theme]]: theme,
-        [css['loader_color_' + color]]: color
+      className: clsx('arm-loader', {
+        ['arm-loader_size_' + size]: size,
+        ['arm-loader_theme_' + theme]: theme,
+        ['arm-loader_color_' + color]: color
       }, 'material_icon', className)
     })
   });

package/ui/Logo/Logo.js

@@ -1,12 +1,7 @@
 import clsx from 'clsx';
-import css from "./Logo.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 = ['logo', 'logo_shape', 'logo__inner', 'logo__img', 'logo__description', 'logo_inverse'];
-
-// const css = getCssPrefix(CssClasses)
-
 const Logo = props => {
   let {
     description,
@@ -25,14 +20,14 @@ const Logo = props => {
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx("div", {
       ...restProps,
-      className: clsx('Arm-logo', css.logo, {
-        [css.logo_inverse]: inverse,
-        [css.logo_shape]: shape
+      className: clsx('arm-logo', {
+        'arm-logo_inverse': inverse,
+        'arm-logo_shape': shape
       }, className),
       children: /*#__PURE__*/_jsxs("div", {
         className: "logo__inner",
         children: [/*#__PURE__*/_jsx("div", {
-          className: css.logo__img,
+          className: 'arm-logo__img',
           children: href ? /*#__PURE__*/_jsx("a", {
             href: href,
             ...linkProps,
@@ -57,7 +52,7 @@ const Logo = props => {
             })
           })
         }), description && /*#__PURE__*/_jsx("div", {
-          className: css.logo__description,
+          className: 'arm-logo__description',
           children: description
         })]
       })

package/ui/Modal/BaseModal.js

@@ -1,4 +1,3 @@
-import css from "./Modal.module.scss";
 import clsx from 'clsx';
 import FormControls from "../Form/FormControls";
 import ButtonIcon from "../ButtonIcon";
@@ -22,15 +21,15 @@ export const BaseModal = props => {
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs("div", {
       ...divProps,
-      className: clsx(className, 'Arm-Modal', classes == null ? void 0 : classes['Arm-Modal'], css.Modal),
+      className: clsx(className, 'arm-modal', classes == null ? void 0 : classes['Arm-Modal']),
       children: [title && /*#__PURE__*/_jsx("div", {
-        className: clsx('Arm-Modal__header', classes == null ? void 0 : classes['Arm-Modal__header'], css.Modal__header),
+        className: clsx('arm-modal__header', classes == null ? void 0 : classes['Arm-Modal__header']),
         children: /*#__PURE__*/_jsxs("div", {
-          className: clsx('Arm-Modal__title', classes == null ? void 0 : classes['Arm-Modal__title'], css.Modal__title),
+          className: clsx('arm-modal__title', classes == null ? void 0 : classes['Arm-Modal__title']),
           children: [title, onClose && /*#__PURE__*/_jsx(ButtonIcon, {
             variant: 'transparent',
             onClick: onClose,
-            className: clsx('Arm-Modal__close', classes == null ? void 0 : classes['Arm-Modal__close'], css.Modal__close),
+            className: clsx('arm-modal__close', classes == null ? void 0 : classes['Arm-Modal__close']),
             color: 'neutral',
             size: 'medium',
             children: /*#__PURE__*/_jsx("span", {
@@ -40,12 +39,12 @@ export const BaseModal = props => {
           })]
         })
       }), /*#__PURE__*/_jsx("div", {
-        className: clsx('Arm-Modal__body', classes == null ? void 0 : classes['Arm-Modal__body'], css.Modal__body),
+        className: clsx('arm-modal__body', classes == null ? void 0 : classes['Arm-Modal__body']),
         children: /*#__PURE__*/_jsx("div", {
           children: children
         })
       }), showControls && /*#__PURE__*/_jsx("div", {
-        className: clsx('Arm-Modal__footer', classes == null ? void 0 : classes['Arm-Modal__footer'], css.Modal__footer),
+        className: clsx('arm-modal__footer', classes == null ? void 0 : classes['Arm-Modal__footer']),
         children: /*#__PURE__*/_jsx(FormControls, {
           className: classes == null ? void 0 : classes['Arm-FormControls'],
           onSubmit: onSubmit,

package/ui/Modal/Modal.js

@@ -1,6 +1,5 @@
 import { BaseModal } from "./BaseModal";
 import BackDrop from "../BackDrop";
-import css from "./Modal.module.scss";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 const Modal = props => {
@@ -14,7 +13,7 @@ const Modal = props => {
     children: /*#__PURE__*/_jsx(BackDrop, {
       width: width,
       onClick: modalProps.onClose,
-      className: css.Modal__backdrop,
+      className: 'arm-modal__backdrop',
       children: /*#__PURE__*/_jsx(BaseModal, {
         ...modalProps
       })

package/ui/Paper/Paper.js

@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import css from "./Paper.module.scss";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 const Paper = props => {
@@ -12,10 +11,10 @@ const Paper = props => {
   } = props;
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx("div", {
-      className: clsx(css.Paper, 'Arm-Paper', className, {
-        [css.Paper_elevation]: variant === 'elevation',
-        [css.Paper_outlined]: variant === 'outlined',
-        [css.Paper_dark]: theme === 'dark'
+      className: clsx('arm-paper', className, {
+        'arm-paper_elevation': variant === 'elevation',
+        'arm-paper_outlined': variant === 'outlined',
+        'arm-paper_dark': theme === 'dark'
       }),
       ...divPops,
       children: children

package/ui/Skeleton/Skeleton.js

@@ -1,4 +1,3 @@
-import css from "./Skeleton.module.scss";
 import clsx from 'clsx';
 import { jsx as _jsx } from "react/jsx-runtime";
 const Skeleton = props => {
@@ -11,8 +10,8 @@ const Skeleton = props => {
   } = props;
   return /*#__PURE__*/_jsx("div", {
     ...divProps,
-    className: clsx(className, css.skeleton, {
-      [css.skeleton_circle]: !!circle
+    className: clsx(className, 'arm-skeleton', {
+      'arm-skeleton_circle': !!circle
     }),
     style: {
       width: typeof width === 'number' ? width + 'px' : width,

package/ui/Slider/Slider.js

@@ -1,14 +1,9 @@
 import RcSlider from 'rc-slider';
 import '!style-loader!css-loader!./style.css';
 import HelperText from "../HelperText/HelperText";
-import css from "./Slider.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 = ['slider__helperText'];
-
-// const css = getCssPrefix(CssClasses)
-
 const Slider = props => {
   let {
     size = 'large',
@@ -20,7 +15,7 @@ const Slider = props => {
         ...restProps,
         className: '_' + size
       }), restProps.min !== undefined && restProps.max !== undefined && /*#__PURE__*/_jsxs("div", {
-        className: css.slider__helperText,
+        className: 'arm-slider__text',
         children: [/*#__PURE__*/_jsx("div", {
           children: /*#__PURE__*/_jsx(HelperText, {
             children: restProps.min

package/ui/Stack/Stack.js

@@ -1,6 +1,5 @@
 import { cloneElement } from 'react';
 import clsx from 'clsx';
-import css from "./Stack.module.scss";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 const Stack = props => {
@@ -27,10 +26,10 @@ const Stack = props => {
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx("div", {
       ...divProps,
-      className: clsx('Arm-Stack', 'flex', className, {
+      className: clsx('arm-stack', 'flex', className, {
         'flex-wrap': !!wrap,
         'items-center': center,
-        [css['stack_spacing_' + spacing]]: !!spacing
+        ['arm-stack_spacing_' + spacing]: !!spacing
       }),
       children: childrenProp
     })
@@ -43,7 +42,7 @@ const StackItem = props => {
   } = props;
   return /*#__PURE__*/_jsx("div", {
     className: clsx({
-      [css['stackItem_spacing_' + spacing]]: !!spacing
+      ['arm-stack-item_spacing_' + spacing]: !!spacing
     }),
     children: children
   });

package/ui/Status/Status.js

@@ -1,12 +1,7 @@
 import clsx from 'clsx';
-import css from "./Status.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 = ['status', 'status_primary', 'status_secondary', 'status_neutral', 'status_error', 'status_warning', 'status_info', 'status_success', 'status__content', 'status__icon'];
-
-// const css = getCssPrefix(CssClasses)
-
 function Status(props) {
   let {
     color,
@@ -22,14 +17,14 @@ function Status(props) {
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs(Component, {
       ...restProps,
-      className: clsx(css.status, css['status_' + color], className, {
-        [css['status_size_' + size]]: !!size
+      className: clsx('arm-status', ['arm-status_' + color], className, {
+        ['arm-status_size_' + size]: !!size
       }),
       children: [/*#__PURE__*/_jsx("span", {
-        className: css.status__content,
+        className: 'arm-status__content',
         children: text || children
       }), icon && /*#__PURE__*/_jsx("span", {
-        className: clsx(css.status__icon, 'material_icon'),
+        className: clsx('arm-status__icon', 'material_icon'),
         children: icon
       })]
     })

package/ui/Stepper/StepItem.js

@@ -1,14 +1,9 @@
 import StepItemIcon from "./StepItemIcon";
 import clsx from 'clsx';
 import Button from "../Button/Button";
-import css from "./StepItem.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 = ['stepItem', 'stepItem__inner', 'stepItem__title', 'stepItem__title_error', 'stepItem__content', 'stepItem__button', 'stepItem_horizontal', 'stepItem_last', 'status_info', 'status_success', 'status__content', 'status__icon'];
-
-// const css = getCssPrefix(CssClasses)
-
 const StepItem = props => {
   let {
     title,
@@ -22,28 +17,28 @@ const StepItem = props => {
   } = props;
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs("div", {
-      className: clsx(css.stepItem, css['stepItem_' + props.size], {
-        [css.stepItem_last]: last,
-        [css.stepItem_horizontal]: orientation === 'horizontal'
+      className: clsx('arm-step-item', ['arm-step-item_' + props.size], {
+        'arm-step-item_last': last,
+        'arm-step-item_horizontal': orientation === 'horizontal'
       }),
       children: [/*#__PURE__*/_jsxs("div", {
-        className: css.stepItem__inner,
+        className: 'arm-step-item__inner',
         children: [/*#__PURE__*/_jsx("div", {
-          className: css.stepItem__icon,
+          className: 'arm-step-item__icon',
           children: /*#__PURE__*/_jsx(StepItemIcon, {
             ...iconProps
           })
         }), !!title && /*#__PURE__*/_jsx("p", {
-          className: clsx(css.stepItem__title, {
-            [css.stepItem__title_error]: iconProps.error,
-            [css.stepItem__title_with_content]: content || children
+          className: clsx('arm-step-item__title', {
+            'arm-step-item__title_error': iconProps.error,
+            'arm-step-item__title_with_content': content || children
           }),
           children: title
         })]
       }), /*#__PURE__*/_jsxs("div", {
-        className: css.stepItem__content,
+        className: 'arm-step-item__content',
         children: [content || children, !!button && /*#__PURE__*/_jsx("div", {
-          className: css.stepItem__button,
+          className: 'arm-step-item__button',
           children: /*#__PURE__*/_jsx(Button, {
             ...buttonProps,
             children: button

package/ui/Stepper/StepItemIcon.js

@@ -1,11 +1,6 @@
 import clsx from 'clsx';
-import css from "./StepItemIcon.module.scss";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-const CssClasses = ['stepItemIcon', 'stepItemIcon__number', 'stepItemIcon_small', 'stepItemIcon_active', 'stepItemIcon_complete', 'stepItemIcon_error', 'stepItemIcon__inner'];
-
-// const css = getCssPrefix(CssClasses)
-
 const StepItemIcon = props => {
   let icon = '';
   if (!props.number) {
@@ -13,19 +8,19 @@ const StepItemIcon = props => {
   }
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx("div", {
-      className: clsx(css.stepItemIcon, css['stepItemIcon_' + props.size], {
-        [css.stepItemIcon_active]: props.active,
-        [css.stepItemIcon_error]: props.error,
-        [css.stepItemIcon_complete]: props.complete,
-        [css.stepItemIcon_icon]: !props.icon
+      className: clsx('arm-step-item-icon', ['arm-step-item-icon_' + props.size], {
+        ['arm-step-item-icon_active']: props.active,
+        ['arm-step-item-icon_error']: props.error,
+        ['arm-step-item-icon_complete']: props.complete,
+        ['arm-step-item-icon_icon']: !props.icon
       }),
       children: /*#__PURE__*/_jsx("span", {
-        className: css.stepItemIcon__inner,
+        className: 'arm-step-item-icon__inner',
         children: !props.error ? !props.number ? /*#__PURE__*/_jsx("span", {
           className: 'material_icon_solid',
           children: icon
         }) : /*#__PURE__*/_jsx("span", {
-          className: css.stepItemIcon__number,
+          className: 'arm-step-item-icon__number',
           children: props.number
         }) : /*#__PURE__*/_jsx("span", {
           className: 'material_icon_solid',

package/ui/Stepper/Stepper.js

@@ -1,14 +1,9 @@
 import StepItem from "./StepItem";
 import clsx from 'clsx';
 import { Fragment } from 'react';
-import css from "./Stepper.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 = ['stepper', 'stepper_horizontal', 'stepper__connector', 'stepper_small'];
-
-// const css = getCssPrefix(CssClasses)
-
 const Stepper = props => {
   var _props$steps;
   let {
@@ -16,8 +11,8 @@ const Stepper = props => {
   } = props;
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx("div", {
-      className: clsx(css.stepper, css['stepper_' + props.size], {
-        [css.stepper_horizontal]: orientation === 'horizontal'
+      className: clsx('arm-stepper', ['arm-stepper_' + props.size], {
+        ['arm-stepper_horizontal']: orientation === 'horizontal'
       }),
       children: (_props$steps = props.steps) == null ? void 0 : _props$steps.map((item, index) => {
         var _props$steps2;
@@ -34,7 +29,7 @@ const Stepper = props => {
             orientation: orientation,
             size: props.size
           }), index + 1 < props.steps.length && /*#__PURE__*/_jsx("div", {
-            className: css.stepper__connector
+            className: 'arm-stepper__connector'
           })]
         }, index);
       })

package/ui/Table/TableBase.js

@@ -1,5 +1,4 @@
 import { forwardRef } from 'react';
-import css from "./Table.module.scss";
 import clsx from 'clsx';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const TableBase = /*#__PURE__*/forwardRef((props, ref) => {
@@ -11,7 +10,7 @@ export const TableBase = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/_jsx("table", {
     ...tableProps,
     ref: ref,
-    className: clsx(className, css.table),
+    className: clsx(className, 'arm-table'),
     children: children
   });
 });

package/ui/Table/TableCell.js

@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import css from "./Table.module.scss";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 export const TableCell = props => {
@@ -14,14 +13,14 @@ export const TableCell = props => {
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx("td", {
       ...cellProps,
-      className: clsx(className, css.tableCell, {
-        [css.tableCell_head]: !!head,
-        [css['tableCell_variant_' + variant]]: !!variant
+      className: clsx(className, 'arm-table-cell', {
+        'arm-table-cell_head': !!head,
+        ['arm-table-cell_variant_' + variant]: !!variant
       }),
       children: /*#__PURE__*/_jsx("div", {
-        className: clsx(css.tableCellInner, {
-          [css['tableCellInner_size_' + size]]: !!size,
-          [css['tableCellInner_variant_' + variant]]: !!variant
+        className: clsx('arm-table-cell__inner', {
+          ['arm-table-cell__inner_size_' + size]: !!size,
+          ['arm-table-cell__inner_variant_' + variant]: !!variant
         }),
         children: children
       })