armtek-uikit-react 1.0.121 → 1.0.124

package/lib/helpers/helpers.js

@@ -1,4 +1,21 @@
 import { CSS_PREFIX } from "../const/styles";
+export let SizeEnum = /*#__PURE__*/function (SizeEnum) {
+  SizeEnum["SMALL"] = "small";
+  SizeEnum["MEDIUM"] = "meidum";
+  SizeEnum["LARGE"] = "large";
+  SizeEnum["EXTRA_LARGE"] = "extraLarge";
+  return SizeEnum;
+}({});
+export let ColorEnum = /*#__PURE__*/function (ColorEnum) {
+  ColorEnum["PRIMARY"] = "primary";
+  ColorEnum["SECONDARY"] = "secondary";
+  ColorEnum["NEUTRAL"] = "neutral";
+  ColorEnum["SUCCESS"] = "success";
+  ColorEnum["ERROR"] = "error";
+  ColorEnum["WARNING"] = "warning";
+  ColorEnum["INFO"] = "info";
+  return ColorEnum;
+}({});
 export const getVariants = except => {
   let variants = {
     contained: 'Заливка',
@@ -10,25 +27,25 @@ export const getVariants = except => {
 };
 export const getColors = () => {
   return {
-    primary: 'Основной',
-    secondary: 'Второстепенный',
-    neutral: 'Нейтральный'
+    [ColorEnum.PRIMARY]: 'Основной',
+    [ColorEnum.SECONDARY]: 'Второстепенный',
+    [ColorEnum.NEUTRAL]: 'Нейтральный'
   };
 };
 export const getStatusColors = () => {
   return {
-    info: 'Инфо',
-    error: 'Ошибка',
-    success: 'Успех',
-    warning: 'Уведомление'
+    [ColorEnum.INFO]: 'Инфо',
+    [ColorEnum.ERROR]: 'Ошибка',
+    [ColorEnum.SUCCESS]: 'Успех',
+    [ColorEnum.WARNING]: 'Уведомление'
   };
 };
 export const getSizes = except => {
   let sizes = {
-    small: 'Маленький',
-    medium: 'Средний',
-    large: 'Большой',
-    extraLarge: 'Огромный'
+    [SizeEnum.SMALL]: 'Маленький',
+    [SizeEnum.MEDIUM]: 'Средний',
+    [SizeEnum.LARGE]: 'Большой',
+    [SizeEnum.EXTRA_LARGE]: 'Огромный'
   };
   if (except) sizes = filter(sizes, except);
   return sizes;

package/package.json

@@ -1 +1 @@
-{"name":"armtek-uikit-react","version":"1.0.121","description":"Armtek UIKit for React","repository":{"type":"git","url":"ssh://git@gl.corp:10022/int/uikit/uikit_react.git"},"author":"","license":"ISC","dependencies":{"build":"^0.1.4","clsx":"^2.0.0","rc-slider":"^10.2.1","react":"*","react-datepicker":"^4.16.0","react-dom":"*","react-transition-group":"^4.4.5"},"peerDependencies":{"react":"*","react-dom":"*"},"scripts":{"pub":"npm version patch && npm publish"}}
+{"name":"armtek-uikit-react","version":"1.0.124","description":"Armtek UIKit for React","repository":{"type":"git","url":"ssh://git@gl.corp:10022/int/uikit/uikit_react.git"},"author":"","license":"ISC","dependencies":{"build":"^0.1.4","clsx":"^2.0.0","rc-slider":"^10.2.1","react":"*","react-datepicker":"^4.16.0","react-dom":"*","react-transition-group":"^4.4.5"},"peerDependencies":{"react":"*","react-dom":"*"},"scripts":{"pub":"npm version patch && npm publish"}}

package/ui/Accordion/Accordion.classes.d.ts

@@ -0,0 +1,2 @@
+declare const _default: Record<string | number, string>;
+export default _default;

package/ui/Accordion/Accordion.classes.js

@@ -0,0 +1,29 @@
+import { CSS_PREFIX } from "../../lib/const/styles";
+import { getSizeClasses } from "../../lib/helpers/getSizeClasses";
+import { getColorClasses } from "../../lib/helpers/getColorClasses";
+import { getVariantClasses } from "../../lib/helpers/getVariantClasses";
+const BASE_CLASS_NAME = 'accordion';
+const BASE_CLASSES = {
+  'accordion': BASE_CLASS_NAME,
+  'accordion_head': BASE_CLASS_NAME + '__head',
+  'accordion_body': BASE_CLASS_NAME + '__body',
+  'accordion_title': BASE_CLASS_NAME + '__title',
+  'accordion_content': BASE_CLASS_NAME + '__content',
+  'accordion_toggle': BASE_CLASS_NAME + '__toggle'
+};
+const variants = ['blockquote', 'alert', 'section', 'contained'];
+const classes = {
+  ...Object.entries(BASE_CLASSES).reduce((prev, current) => {
+    prev[current[0]] = CSS_PREFIX + current[1];
+    return prev;
+  }, {}),
+  ...getSizeClasses(BASE_CLASSES.accordion),
+  ...getColorClasses(BASE_CLASSES.accordion),
+  ...getColorClasses(BASE_CLASSES.accordion_head),
+  ...getColorClasses(BASE_CLASSES.accordion_body),
+  ...getVariantClasses(BASE_CLASSES.accordion, variants),
+  ...getVariantClasses(BASE_CLASSES.accordion_title, variants),
+  ...getVariantClasses(BASE_CLASSES.accordion_head, variants),
+  ...getVariantClasses(BASE_CLASSES.accordion_body, variants)
+};
+export default classes;

package/ui/Accordion/Accordion.d.ts

@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { DropDownProps } from '../Dropdown';
 import { ColorStatusType, ColorType, SizeType } from '../../types/theme';
-type ClassNames = 'AccordionHead' | 'AccordionBody' | 'AccordionTitle' | 'AccordionToggle';
+type ClassNames = 'AccordionHead' | 'AccordionBody' | 'AccordionContent' | 'AccordionTitle' | 'AccordionToggle';
 type OwnProps = {
     title: string | ReactNode;
     classNames?: Record<ClassNames, string>;

package/ui/Accordion/Accordion.js

@@ -2,12 +2,13 @@
 
 import { useState } from 'react';
 import clsx from 'clsx';
-import css from "./Accordion.module.scss";
 import Dropdown from "../Dropdown";
 import ButtonIcon from "../ButtonIcon";
+import css from "./Accordion.classes";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
+console.log(css);
 const Accordion = props => {
   let {
     title,
@@ -57,18 +58,19 @@ const Accordion = props => {
       buttonTheme = 'dark';
     }
   }
+  console.log('accordion_' + color);
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs("div", {
       ...divPops,
-      className: clsx(css.Accordion, className, {
-        [css['Accordion_size_' + size]]: !!size,
-        [css['Accordion_variant_' + variant]]: !!variant,
-        [css['Accordion_color_' + color]]: !!color
+      className: clsx(css.accordion, className, {
+        [css['accordion_' + size]]: !!size,
+        [css['accordion_' + variant]]: !!variant,
+        [css['accordion_' + color]]: !!color
       }),
       children: [/*#__PURE__*/_jsxs("div", {
-        className: clsx(css.AccordionHead, 'Arm-AccordionHead', classNames == null ? void 0 : classNames.AccordionHead, {
-          [css['AccordionHead_variant_' + variant]]: !!variant,
-          [css['AccordionHead_color_' + color]]: !!color,
+        className: clsx(css.accordion_head, classNames == null ? void 0 : classNames.AccordionHead, {
+          [css['accordion__head_' + variant]]: !!variant,
+          [css['accordion__head_' + color]]: !!color,
           'py-1': size === 'small',
           'py-2': size === 'medium',
           'py-3': size === 'large',
@@ -77,11 +79,11 @@ const Accordion = props => {
         onClick: handleHeadClick,
         children: [/*#__PURE__*/_jsx("div", {
           className: clsx(classNames == null ? void 0 : classNames.AccordionTitle, {
-            [css['AccordionTitle_variant_' + variant]]: !!variant
+            [css['accordion__title_' + variant]]: !!variant
           }),
           children: title
         }), /*#__PURE__*/_jsx("div", {
-          className: clsx(classNames == null ? void 0 : classNames.AccordionTitle, css.AccordionToggle),
+          className: clsx(classNames == null ? void 0 : classNames.AccordionTitle, css.accordion_toggle),
           children: /*#__PURE__*/_jsx(ButtonIcon, {
             onClick: handleIconClick,
             size: 'small',
@@ -95,9 +97,9 @@ const Accordion = props => {
           })
         })]
       }), /*#__PURE__*/_jsx("div", {
-        className: clsx(classNames == null ? void 0 : classNames.AccordionBody, css.AccordionBody, {
-          [css['AccordionBody_variant_' + variant]]: !!variant,
-          [css['AccordionBody_color_' + color]]: !!color
+        className: clsx(classNames == null ? void 0 : classNames.AccordionBody, css.accordion__body, {
+          [css['accordion__body_' + variant]]: !!variant,
+          [css['accordion__body_' + color]]: !!color
         }),
         children: /*#__PURE__*/_jsx(Dropdown, {
           transitionProps: {
@@ -108,7 +110,7 @@ const Accordion = props => {
           },
           expanded: openProp,
           children: /*#__PURE__*/_jsx("div", {
-            className: css.AccordionContents,
+            className: clsx(classNames == null ? void 0 : classNames.AccordionContent, css.accordion_content),
             style: {
               display: contentHidden ? 'none' : 'block'
             },

package/ui/Adornment/Adornment.js

@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import css from "./Adornment.module.scss";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 // import { getCssPrefix } from 'lib/helpers/helpers'
@@ -18,9 +17,9 @@ const Adornment = props => {
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx("div", {
       ...spanProps,
-      className: clsx(className, 'Arm-adornment', css.adornment, {
-        [css['adornment_start']]: position === 'start',
-        [css['adornment_end']]: position !== 'start'
+      className: clsx(className, 'arm-adornment', {
+        'arm-adornment_start': position === 'start',
+        'arm-adornment_end': position !== 'start'
       }),
       children: children
     })
@@ -36,8 +35,8 @@ export const AdornmentContainer = props => {
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx("div", {
       ...inputProps,
-      className: clsx('Arm-adornment-container', css.adornmentContainer, {
-        [css['adornmentContainer_end']]: position !== 'start'
+      className: clsx('arm-adornment__container', {
+        'arm-adornment__container_end': position !== 'start'
       }, className),
       children: children
     })

package/ui/Alert/Alert.js

@@ -1,6 +1,5 @@
 import clsx from 'clsx';
 import ButtonIcon from "../ButtonIcon";
-import css from "./Alert.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";
@@ -22,22 +21,22 @@ const Alert = props => {
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs("div", {
       ...restProps,
-      className: clsx(css.alert, css['alert_' + status], className),
+      className: clsx('arm-alert', 'arm-alert_' + status, className),
       children: [/*#__PURE__*/_jsx("span", {
-        className: clsx(css.alert__icon, 'material_icon'),
+        className: clsx('arm-alert__icon', 'material_icon'),
         children: icon
       }), /*#__PURE__*/_jsx("div", {
-        className: css.alert__title,
+        className: 'arm-alert__title',
         children: props.title
       }), /*#__PURE__*/_jsx("div", {
-        className: css.alert__body,
+        className: 'arm-alert__body',
         children: props.children
       }), !!onClose && /*#__PURE__*/_jsx(ButtonIcon, {
         onClick: onClose,
         size: 'small',
         color: 'neutral',
         variant: 'transparent',
-        className: clsx(css.alert__close, 'material_icon'),
+        className: clsx('arm-alert__close', 'material_icon'),
         children: /*#__PURE__*/_jsx("span", {
           className: 'material_icon',
           children: "close"

package/ui/Avatar/Avatar.js

@@ -1,12 +1,7 @@
 import clsx from 'clsx';
-import css from "./Avatar.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 AvatarClasses = ['avatar', 'avatar__inner', 'avatar_small', 'avatar_medium', 'avatar__name', 'avatar__icon', 'avatar__status', 'avatar__img', 'avatar__status_success', 'avatar__status_error', 'avatar__status_warning'];
-
-// const css = getCssPrefix(AvatarClasses)
-
 export const getLetters = name => {
   let nameParts = name.split(' ');
   return nameParts[0].split('')[0] + (nameParts[1] ? nameParts[1].split('')[0] : '');
@@ -27,36 +22,36 @@ const Avatar = props => {
   if (!props.icon && !props.name && !photo) displayIcon = 'person';
   let content = photo ? /*#__PURE__*/_jsx("img", {
     src: photo,
-    className: css.avatar__img,
+    className: 'arm-avatar__img',
     alt: props.name,
     title: props.name
   }) : props.name ? /*#__PURE__*/_jsx("span", {
-    className: css.avatar__name,
+    className: 'arm-avatar__name',
     children: getLetters(props.name)
   }) : /*#__PURE__*/_jsx("span", {
-    className: clsx(css.avatar__icon, 'material_icon_solid'),
+    className: clsx('arm-avatar__icon', 'material_icon_solid'),
     children: displayIcon
   });
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs("div", {
       ...divProps,
-      className: clsx('Arm-avatar', className, {
-        [css.avatar__photo]: !!photo,
-        [css.avatar__icon]: !!displayIcon
-      }, css.avatar, css['avatar_' + size]),
+      className: clsx('arm-avatar', className, {
+        ['arm-avatar__photo']: !!photo,
+        ['arm-avatar__icon']: !!displayIcon
+      }, ['arm-avatar_' + size]),
       children: [/*#__PURE__*/_jsx("div", {
-        className: css.avatar__inner,
+        className: 'arm-avatar__inner',
         children: href ? /*#__PURE__*/_jsx("a", {
           href: href,
           ...linkProps,
-          className: css.avatar__innerText,
+          className: 'arm-avatar__text',
           children: content
         }) : /*#__PURE__*/_jsx("span", {
-          className: css.avatar__innerText,
+          className: 'arm-avatar__text',
           children: content
         })
       }), status && /*#__PURE__*/_jsx("span", {
-        className: clsx(css.avatar__status, css['avatar__status_' + status])
+        className: clsx('arm-avatar__status', ['arm-avatar__status_' + status])
       })]
     })
   });

package/ui/AvatarGroup/AvatarGroup.js

@@ -1,25 +1,20 @@
 import { Children, cloneElement, isValidElement } from 'react';
 import clsx from 'clsx';
-import css from "./AvatarGroup.module.scss";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-const AvatarGroupClasses = ['avatarGroup', 'avatarGroup_medium', 'avatarGroup__item', 'avatarGroup__remains', 'avatarGroup__remains_medium', 'avatarGroup__remains_small'];
-
-// const css = getCssPrefix(AvatarGroupClasses)
-
 const AvatarGroup = props => {
   let arrChildren = Children.toArray(props.children);
   let visiblePart = arrChildren.slice(0, props.limit || 3);
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs("div", {
-      className: clsx('Arm-avatar-group', css.avatarGroup, css['avatarGroup_' + props.size]),
+      className: clsx('arm-avatar-group', ['arm-avatar-group_' + props.size]),
       children: [visiblePart.length < arrChildren.length && /*#__PURE__*/_jsxs("div", {
-        className: clsx(css.avatarGroup__item, css.avatarGroup__remains, css['avatarGroup__remains_' + props.size]),
+        className: clsx('arm-avatar-group__item', 'arm-avatar-group__remains', ['arm-avatar-group__remains_' + props.size]),
         children: ["+", arrChildren.length - visiblePart.length]
       }), visiblePart.map((item, index) => {
         return /*#__PURE__*/_jsx("div", {
-          className: css.avatarGroup__item,
+          className: 'arm-avatar-group__item',
           children: /*#__PURE__*/isValidElement(item) && /*#__PURE__*/cloneElement(item, {
             ...item.props,
             size: props.size,

package/ui/BackDrop/BackDropBase.js

@@ -1,4 +1,3 @@
-import css from "./BackDrop.module.scss";
 import clsx from 'clsx';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -16,12 +15,12 @@ export const BackDropBase = props => {
   };
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs("div", {
-      className: clsx('Arm-BackDropBase', className, css.BackDropBase),
+      className: clsx('arm-backdrop', className),
       children: [/*#__PURE__*/_jsx("div", {
-        className: css.BackDropBase__overlay,
+        className: 'arm-backdrop__overlay',
         onClick: handleClick
       }), /*#__PURE__*/_jsx("div", {
-        className: css.BackDropBase__inner,
+        className: 'arm-backdrop__inner',
         style: {
           maxWidth: width + 'px'
         },

package/ui/Badge/Badge.js

@@ -1,12 +1,7 @@
 import clsx from 'clsx';
-import css from "./Badge.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 BadgeClasses = ['badge', 'badge__item_primary', 'badge__item_secondary', 'badge__item_neutral', 'badge__item_error', 'badge__item_info', 'badge__item_warning', 'badge__item_success', 'badge__item_content', 'badge__item_content_circle', 'badge__item_content_square', 'badge__item_content_circle', 'badge__item_top-right', 'badge__item_top-left', 'badge__item_bottom-right', 'badge__item_bottom-left', 'badge__item_center-right'];
-
-// const css = getCssPrefix(BadgeClasses)
-
 function Badge(props) {
   let {
     color,
@@ -16,15 +11,15 @@ function Badge(props) {
   } = props;
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs("span", {
-      className: clsx('Arm-badge', className, css.badge),
+      className: clsx('arm-badge', className),
       children: [/*#__PURE__*/_jsx("span", {
-        className: clsx('Arm-badge-content', css.badge__content),
+        className: clsx('arm-badge__content'),
         children: props.children
       }), /*#__PURE__*/_jsx("span", {
-        className: clsx(css.badge__item, 'Arm-badge-item', css['badge__item_' + color], css['badge__item_' + shape], css['badge__item_' + position], {
-          [css.badge__item_content]: props.badgeText !== undefined && !shape,
-          [css.badge__item_content_circle]: !!props.badgeText !== undefined && shape === 'circle',
-          [css.badge__item_content_square]: !!props.badgeText !== undefined && shape === 'square'
+        className: clsx('arm-badge__item', ['arm-badge__item_' + color], ['arm-badge__item_' + shape], ['arm-badge__item_' + position], {
+          'arm-badge__item_content': props.badgeText !== undefined && !shape,
+          'arm-badge__item_content_circle': !!props.badgeText !== undefined && shape === 'circle',
+          'arm-badge__item_content_square': !!props.badgeText !== undefined && shape === 'square'
         }),
         children: props.badgeText
       })]

package/ui/Button/Button.js

@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import css from "./Button.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";
@@ -29,23 +28,23 @@ const Button = props => {
     children: /*#__PURE__*/_jsxs(Component, {
       type: 'button',
       ...restProps,
-      className: clsx('Arm-button', css.button, css['button_' + size], css['button_' + variant], css['button_' + color], className, {
-        [css['button_grouped_' + group]]: group,
-        [css.button_radius_none]: radius === false,
-        [css.button_radius_full]: radius === true,
-        [css.button_fullWidth]: !!fullWidth,
-        [css['button_theme_' + theme]]: !!theme
+      className: clsx('Arm-button', 'arm-button', 'arm-button_' + size, 'arm-button_' + variant, 'arm-button_' + color, className, {
+        ['arm-button_grouped_' + group]: group,
+        'arm-button_radius_none': radius === false,
+        'arm-button_radius_full': radius === true,
+        'arm-button_fullWidth': !!fullWidth,
+        ['arm-button_theme_' + theme]: !!theme
       }),
       children: [startAdornment && /*#__PURE__*/_jsx("div", {
-        className: clsx(css.button__adornment, css.button__adornment_start),
+        className: clsx('arm-button__adornment', 'arm-button__adornment_start'),
         children: startAdornment
       }), /*#__PURE__*/_jsx("div", {
         className: clsx({
-          [css.button__iconWrapper]: !!asIcon
+          'arm-button__iconWrapper': !!asIcon
         }),
         children: children
       }), endAdornment && /*#__PURE__*/_jsx("div", {
-        className: clsx(css.button__adornment, css.button__adornment_end),
+        className: clsx('arm-button__adornment', 'arm-button__adornment_end'),
         children: endAdornment
       })]
     })

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