armtek-uikit-react 1.0.24 → 1.0.26

package/assets/Alert.scss

@@ -35,4 +35,7 @@
 .alert_error{
   color: $color-error-dark;
   background: $color-red-50;
+}
+.alert__body{
+
 }

package/assets/Avatar.scss

@@ -15,6 +15,9 @@
   width: 100%;
   height: 100%;
   @include flex(center);
+}
+.avatar__innerText{
+
 }
 .avatar_medium{
   width: 40px;

package/assets/Button.scss

@@ -52,6 +52,7 @@
     }
   }
   &.button_neutral {
+    color: #fff;
     background: $color-neutral;
     &:hover{
       background: $color-neutral-dark;
@@ -64,6 +65,7 @@
     }
   }
   &.button_black {
+    color: #fff;
     background: $color-gray-900;
     &:hover{
       background: $color-neutral-dark;

package/assets/TextField.scss

@@ -11,10 +11,10 @@
   &:hover{
     border-color: $color-gray-600;
   }
-  &._focused{
+  &.textfield_focused{
     border-color: $color-gray-800;
   }
-  &._disabled{
+  &.textfield_disabled{
     pointer-events: none;
     background: $color-gray-100;
     border-color: transparent;
@@ -33,6 +33,14 @@
     border-radius: 0;
   }
 }
+.textfield_outlined{
+  &.textfield_disabled{
+    background: transparent;
+    border-bottom-style: dotted;
+    border-bottom-width: 1px;
+    border-bottom-color: $color-gray-100;
+  }
+}
 .textfield__container{
   cursor: text;
   position: relative;
@@ -73,7 +81,7 @@
     opacity: 0;
   }
 }
-._error{
+.textfield_error{
   border-color: $color-error-dark;
 }
 
@@ -83,6 +91,7 @@
 .textfield__label{
   pointer-events: none;
   color: $color-gray-600;
+  white-space: nowrap;
   position: absolute;
   top: 12px;
   padding-left: 12px;
@@ -120,9 +129,6 @@
     left:0;
   }
   &:disabled{
-    border-bottom-color: $color-gray-400;
-    border-bottom-style: dotted;
-    background: transparent;
     & + .textfield__label{
       color: $color-gray-400;
     }
@@ -138,6 +144,7 @@
   z-index: 5;
   height: 100%;
   padding-right: 10px;
+  font-size: 0;
   & > *{
     margin-left: $size-step;
   }
@@ -145,7 +152,7 @@
 .textfield__helperText{
   margin-top: calc($size-step / 2);
 }
-._disabled{
+.textfield_disabled{
   & + .textfield__helperText{
     color: $color-gray-600;
   }

package/lib/services/DateService.js

@@ -4,9 +4,9 @@ class DateClass {
   }
   format(form) {
     let strDate = form;
-    if (strDate.includes('DD')) strDate = strDate.replace('dd', DateClass.getDisplayValue(this.date.getDate()));
+    if (strDate.includes('dd')) strDate = strDate.replace('dd', DateClass.getDisplayValue(this.date.getDate()));
     if (strDate.includes('MM')) strDate = strDate.replace('MM', this.getStrMonth());
-    if (strDate.includes('YYYY')) strDate = strDate.replace('yyyy', String(this.date.getFullYear()));
+    if (strDate.includes('yyyy')) strDate = strDate.replace('yyyy', String(this.date.getFullYear()));
     if (strDate.includes('HH')) strDate = strDate.replace('HH', DateClass.getDisplayValue(this.date.getHours()));
     if (strDate.includes('mm')) strDate = strDate.replace('mm', DateClass.getDisplayValue(this.date.getMinutes()));
     return strDate;

package/package.json

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

package/ui/Adornment/Adornment.js

@@ -35,7 +35,7 @@ export const AdornmentContainer = props => {
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx("div", {
       ...inputProps,
-      className: clsx(css.adornmentContainer, {
+      className: clsx('Arm-adornment-container', css.adornmentContainer, {
         [css['adornmentContainer_end']]: position !== 'start'
       }, className),
       children: children

package/ui/Alert/Alert.d.ts

@@ -1,10 +1,10 @@
 import { ColorStatusType } from '../../types/theme';
-import { HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, MouseEvent, ReactNode } from 'react';
 export type AlertProps = {
     status: ColorStatusType;
     title: string;
     children: ReactNode | string;
-    onClose?: () => void;
+    onClose?: (e: MouseEvent) => void;
 } & HTMLAttributes<HTMLDivElement>;
 declare const Alert: (props: AlertProps) => import("react/jsx-runtime").JSX.Element;
 export default Alert;

package/ui/Alert/Alert.js

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import Index from "../ButtonIcon";
+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";
@@ -30,8 +30,9 @@ const Alert = props => {
         className: css.alert__title,
         children: props.title
       }), /*#__PURE__*/_jsx("div", {
+        className: css.alert__body,
         children: props.children
-      }), !!onClose && /*#__PURE__*/_jsx(Index, {
+      }), !!onClose && /*#__PURE__*/_jsx(ButtonIcon, {
         onClick: onClose,
         size: 'small',
         color: 'neutral',

package/ui/Alert/Alert.module.scss

@@ -1,2 +1 @@
-@import "./../../assets/variables";
 @import "./../../assets/Alert";

package/ui/Avatar/Avatar.d.ts

@@ -9,5 +9,6 @@ export type AvatarProps = {
     size?: Exclude<SizeType, 'extraLarge'>;
     status?: Exclude<ColorStatusType, 'info'>;
 };
+export declare const getLetters: (name: string) => string;
 declare const Avatar: (props: AvatarProps) => import("react/jsx-runtime").JSX.Element;
 export default Avatar;

package/ui/Avatar/Avatar.js

@@ -7,7 +7,7 @@ const AvatarClasses = ['avatar', 'avatar__inner', 'avatar_small', 'avatar_medium
 
 // const css = getCssPrefix(AvatarClasses)
 
-const getLetters = name => {
+export const getLetters = name => {
   let nameParts = name.split(' ');
   return nameParts[0].split('')[0] + (nameParts[1] ? nameParts[1].split('')[0] : '');
 };
@@ -28,16 +28,16 @@ const Avatar = props => {
   });
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs("div", {
-      className: clsx(css.avatar, css['avatar_' + props.size]),
+      className: clsx('Arm-avatar', css.avatar, css['avatar_' + props.size]),
       children: [/*#__PURE__*/_jsx("div", {
         className: css.avatar__inner,
         children: props.href ? /*#__PURE__*/_jsx("a", {
           href: props.href,
           ...props.linkProps,
-          className: css.avatar__inner,
+          className: css.avatar__innerText,
           children: content
         }) : /*#__PURE__*/_jsx("span", {
-          className: css.avatar__inner,
+          className: css.avatar__innerText,
           children: content
         })
       }), props.status && /*#__PURE__*/_jsx("span", {

package/ui/AvatarGroup/AvatarGroup.js

@@ -13,7 +13,7 @@ const AvatarGroup = props => {
   let visiblePart = arrChildren.slice(0, props.limit || 3);
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs("div", {
-      className: clsx(css.avatarGroup, css['avatarGroup_' + props.size]),
+      className: clsx('Arm-avatar-group', css.avatarGroup, css['avatarGroup_' + props.size]),
       children: [visiblePart.length < arrChildren.length && /*#__PURE__*/_jsxs("div", {
         className: clsx(css.avatarGroup__item, css.avatarGroup__remains, css['avatarGroup__remains_' + props.size]),
         children: ["+", arrChildren.length - visiblePart.length]

package/ui/Badge/Badge.js

@@ -15,7 +15,7 @@ function Badge(props) {
   } = props;
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs("span", {
-      className: css.badge,
+      className: clsx('Arm-badge', css.badge),
       children: [/*#__PURE__*/_jsx("span", {
         className: css.badge__content,
         children: props.children

package/ui/Chip/Chip.d.ts

@@ -1,10 +1,10 @@
-import { ComponentPropsWithoutRef, ElementType, HTMLAttributes } from 'react';
+import { ComponentPropsWithoutRef, ElementType, MouseEvent, HTMLAttributes } from 'react';
 import { ColorType, SizeType, VariantType } from '../../types/theme';
 export type ChipProps<T extends ElementType = ElementType<HTMLAttributes<HTMLSpanElement>>> = Omit<ComponentPropsWithoutRef<T>, 'color'> & {
     size?: Exclude<SizeType, 'large' | 'extraLarge'>;
     color?: ColorType;
     text?: string;
-    onClose?: () => void;
+    onClose?: (e: MouseEvent) => void;
     icon?: string;
     variant?: Exclude<VariantType, 'transparent'>;
     as?: T;

package/ui/Chip/Chip.js

@@ -21,7 +21,7 @@ function Chip(props) {
   let Component = as || 'span';
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(Component, {
-      className: clsx(css.chip, css['chip_' + size], css['chip_' + variant], css['chip_' + color]),
+      className: clsx('Arm-chip', css.chip, css['chip_' + size], css['chip_' + variant], css['chip_' + color]),
       children: /*#__PURE__*/_jsxs("span", {
         className: css.chip__inner,
         children: [icon && /*#__PURE__*/_jsx("span", {
@@ -31,6 +31,7 @@ function Chip(props) {
           children: text || children
         }), onClose && /*#__PURE__*/_jsx("span", {
           className: clsx('material_icon_solid', css['chip__close_' + size], css['chip__close_' + color], css.chip__close),
+          onClick: onClose,
           children: "cancel"
         })]
       })

package/ui/Form/Checkbox/Checkbox.js

@@ -32,8 +32,11 @@ const Checkbox = props => {
     children: /*#__PURE__*/_jsxs("div", {
       className: clsx(css.checkbox, className),
       children: [/*#__PURE__*/_jsx("input", {
-        className: css.checkbox__input,
         ...inputProps,
+        className: clsx(css.checkbox__input, {
+          '_checked': !!inputProps.checked
+        }),
+        onChange: onChange,
         type: props.type || 'checkbox'
       }), /*#__PURE__*/_jsx("label", {
         onClick: handleClick,

package/ui/Form/DateField/DateField.js

@@ -2,9 +2,8 @@
 
 import TextField from "../TextField/TextField";
 import { forwardRef, useState } from 'react';
-import Index from "../../ButtonIcon";
-import Card from "../../Card/Card";
 import DatePicker from "../DatePicker/DatePicker";
+import ButtonIcon from "../../ButtonIcon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 const DateInput = /*#__PURE__*/forwardRef((props, ref) => {
@@ -17,7 +16,7 @@ const DateInput = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/_jsx(TextField, {
     ref: ref,
     ...restProps,
-    endAdornment: /*#__PURE__*/_jsx(Index, {
+    endAdornment: /*#__PURE__*/_jsx(ButtonIcon, {
       size: 'medium',
       variant: 'transparent',
       onClick: props.onClick,
@@ -55,8 +54,9 @@ const DateField = /*#__PURE__*/forwardRef((props, ref) => {
         ref: ref,
         ...restProps
       }),
-      inline: false,
-      calendarContainer: Card,
+      inline: false
+      // calendarContainer={Card}
+      ,
       popperPlacement: "top-end",
       dateFormat: format
     })

package/ui/Form/DatePicker/DatePicker.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ReactDatePickerProps } from 'react-datepicker';
 import '!style-loader!css-loader!./styles.css';
 declare const DatePicker: import("react").ForwardRefExoticComponent<{

package/ui/Form/Interval/Interval.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TextFieldProps } from '../TextField/TextField';
 export type IntervalProps = {
     min: number;

package/ui/Form/Interval/Interval.js

@@ -38,13 +38,13 @@ const Interval = /*#__PURE__*/forwardRef((props, ref) => {
     let val = parseInt(e.target.value);
     val = val < min ? min : val;
     setCurrentMin(val);
-    if (onChange) onChange([val, max]);
+    if (onChange) onChange([val, Array.isArray(value) && value.length === 2 ? value[1] : max]);
   };
   const handleMax = e => {
     let val = parseInt(e.target.value);
     val = val > max ? max : val;
     setCurrentMax(val);
-    if (onChange) onChange([min, val]);
+    if (onChange) onChange([Array.isArray(value) && value.length === 2 ? value[0] : min, val]);
   };
   let realMin = currentMin;
   let realMax = currentMax;
@@ -52,47 +52,49 @@ const Interval = /*#__PURE__*/forwardRef((props, ref) => {
     realMin = value[0];
     realMax = value[1];
   }
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(TextFieldContainer, {
-      focused: focused,
-      error: error,
-      disabled: disabled,
-      size: inputProps.size,
-      variant: inputProps.variant,
-      children: /*#__PURE__*/_jsxs("div", {
-        className: css.interval,
-        children: [/*#__PURE__*/_jsx("div", {
-          className: css.interval__item,
-          children: /*#__PURE__*/_jsx(TextFieldInput, {
-            ...inputProps,
-            value: realMin,
-            label: labelStart,
-            type: 'number',
-            onFocus: handleFocus,
-            onBlur: handleBlur,
-            focused: true,
-            onChange: handleMin
-          })
-        }), /*#__PURE__*/_jsx("div", {
-          className: css.interval__item,
-          children: /*#__PURE__*/_jsx(TextFieldInput, {
-            ...inputProps,
-            value: realMax,
-            label: labelEnd,
-            type: 'number',
-            onFocus: handleFocus,
-            onBlur: handleBlur,
-            className: css.interval__end,
-            focused: true,
-            onChange: handleMax
-          })
-        })]
-      })
-    }), helperText && /*#__PURE__*/_jsx(HelperText, {
-      className: css.interval__helperText,
-      error: error,
-      children: helperText
-    })]
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsx(TextFieldContainer, {
+        focused: focused,
+        error: error,
+        disabled: disabled,
+        size: inputProps.size,
+        variant: inputProps.variant,
+        children: /*#__PURE__*/_jsxs("div", {
+          className: css.interval,
+          children: [/*#__PURE__*/_jsx("div", {
+            className: css.interval__item,
+            children: /*#__PURE__*/_jsx(TextFieldInput, {
+              ...inputProps,
+              value: realMin,
+              label: labelStart,
+              type: 'number',
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              focused: true,
+              onChange: handleMin
+            })
+          }), /*#__PURE__*/_jsx("div", {
+            className: css.interval__item,
+            children: /*#__PURE__*/_jsx(TextFieldInput, {
+              ...inputProps,
+              value: realMax,
+              label: labelEnd,
+              type: 'number',
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              className: css.interval__end,
+              focused: true,
+              onChange: handleMax
+            })
+          })]
+        })
+      }), helperText && /*#__PURE__*/_jsx(HelperText, {
+        className: css.interval__helperText,
+        error: error,
+        children: helperText
+      })]
+    })
   });
 });
 export default Interval;

package/ui/Form/Password/Password.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const Password: import("react").ForwardRefExoticComponent<{
     label?: string | undefined;
     size?: "large" | "small" | undefined;

package/ui/Form/Password/Password.js

@@ -2,7 +2,7 @@
 
 import TextField from "../TextField/TextField";
 import { forwardRef, useRef, useState } from 'react';
-import Index from "../../ButtonIcon";
+import ButtonIcon from "../../ButtonIcon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 const Password = /*#__PURE__*/forwardRef((props, ref) => {
@@ -27,7 +27,7 @@ const Password = /*#__PURE__*/forwardRef((props, ref) => {
       ...restProps,
       type: isPassword ? 'password' : 'text',
       onChange: handleChange,
-      endAdornment: /*#__PURE__*/_jsx(Index, {
+      endAdornment: /*#__PURE__*/_jsx(ButtonIcon, {
         size: 'medium',
         variant: 'transparent',
         color: 'neutral',

package/ui/Form/Period/Period.d.ts

@@ -1,15 +1,7 @@
-/// <reference types="react" />
+import { TextFieldProps } from '../TextField/TextField';
 declare const Period: import("react").ForwardRefExoticComponent<{
     format?: string | undefined;
     onChange?: ((value: [Date | null, Date | null]) => void) | undefined;
-} & {
-    label?: string | undefined;
-    size?: "large" | "small" | undefined;
-    variant?: import("../../../types/theme").VariantType | undefined;
-    error?: boolean | undefined;
-    success?: boolean | undefined;
-    helperText?: string | undefined;
-    endAdornment?: import("react").ReactNode;
-    multiline?: boolean | undefined;
-} & Omit<import("react").InputHTMLAttributes<any>, "size"> & import("react").RefAttributes<unknown>>;
+    value?: [Date | null, Date | null] | undefined;
+} & Omit<TextFieldProps, "value" | "onChange"> & import("react").RefAttributes<unknown>>;
 export default Period;

package/ui/Form/Period/Period.js

@@ -2,7 +2,7 @@
 
 import TextField from "../TextField/TextField";
 import { forwardRef, useState } from 'react';
-import Index from "../../ButtonIcon";
+import ButtonIcon from "../../ButtonIcon";
 import Card from "../../Card/Card";
 import DatePicker from "../DatePicker/DatePicker";
 import { DateService } from "../../../lib/services/DateService";
@@ -17,7 +17,7 @@ const CssClasses = ['dateField', 'dateField__picker'];
 const Period = /*#__PURE__*/forwardRef((props, ref) => {
   let {
     onChange,
-    format = 'DD.MM.YYYY',
+    format = 'dd.MM.yyyy',
     onInput,
     ...restProps
   } = props;
@@ -31,8 +31,9 @@ const Period = /*#__PURE__*/forwardRef((props, ref) => {
     if (date[0] && date[1]) setActive(false);
     if (onChange) onChange(date);
   };
+  let realValue = Array.isArray(props.value) ? props.value : value;
   let displayValue = '';
-  if (value[0] && value[1]) displayValue = `${DateService(value[0]).format('DD.MM.YYYY')} - ${DateService(value[1]).format('DD.MM.YYYY')}`;
+  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,
@@ -42,7 +43,7 @@ const Period = /*#__PURE__*/forwardRef((props, ref) => {
         ...restProps,
         value: displayValue,
         onFocus: handleClick,
-        endAdornment: /*#__PURE__*/_jsx(Index, {
+        endAdornment: /*#__PURE__*/_jsx(ButtonIcon, {
           size: 'medium',
           variant: 'transparent',
           color: 'neutral',
@@ -58,9 +59,9 @@ const Period = /*#__PURE__*/forwardRef((props, ref) => {
           onBlur: () => {
             setActive(false);
           },
-          selected: value[0],
-          startDate: value[0],
-          endDate: value[1]
+          selected: realValue[0],
+          startDate: realValue[0],
+          endDate: realValue[1]
         })
       })]
     })

package/ui/Form/TextField/TextField.js

@@ -7,7 +7,7 @@ import css from "./TextField.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 = ['textfield__container_outlined', 'textfield__container', 'textfield', 'textfield_outlined', '_focused', '_disabled', '_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 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)
 
@@ -100,9 +100,9 @@ export const TextFieldContainer = props => {
     children: /*#__PURE__*/_jsx("div", {
       ...restProps,
       className: clsx(css.textfield, css['textfield_' + variant], css['size_' + size], {
-        [css._focused]: focused,
-        [css._disabled]: disabled,
-        [css._error]: error
+        [css.textfield_focused]: focused,
+        [css.textfield_disabled]: disabled,
+        [css.textfield_error]: error
       }, className),
       children: children
     })
@@ -133,8 +133,8 @@ export const TextFieldInput = /*#__PURE__*/forwardRef((props, ref) => {
         ...inputProps,
         className: clsx(css.textfield__input, css['size_' + size], css['textfield__input_' + variant], {
           [css._label]: !!label,
-          [css._focused]: focused,
-          [css._error]: !!error,
+          [css.textfield_focused]: focused,
+          [css.textfield_error]: !!error,
           [css.textarea]: multiline
         }, className)
       }), label && /*#__PURE__*/_jsx("span", {

package/ui/HelperText/HelperText.js

@@ -16,7 +16,7 @@ const HelperText = props => {
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx("span", {
       ...restProps,
-      className: clsx(css.helperText, {
+      className: clsx('Arm-helper-text', css.helperText, {
         [css.helperText_error]: !!error
       }, className),
       children: children

package/ui/List/ListItem.js

@@ -35,6 +35,7 @@ const ListItem = props => {
           position: 'start',
           children: /*#__PURE__*/_jsx(Checkbox, {
             checked: checked,
+            readOnly: true,
             size: 'small'
           })
         }), !!startAdornment && /*#__PURE__*/_jsx(Adornment, {

package/ui/Logo/Logo.d.ts

@@ -7,6 +7,8 @@ export type LogoProps = {
     href?: string;
     shape?: boolean;
     linkProps?: HTMLAttributes<HTMLAnchorElement>;
+    width?: number;
+    height?: number;
 } & HTMLAttributes<HTMLDivElement>;
 declare const Logo: (props: LogoProps) => import("react/jsx-runtime").JSX.Element;
 export default Logo;

package/ui/Logo/Logo.js

@@ -18,12 +18,14 @@ const Logo = props => {
     src,
     linkProps,
     inverse,
+    width,
+    height,
     ...restProps
   } = props;
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx("div", {
       ...restProps,
-      className: clsx(css.logo, {
+      className: clsx('Arm-logo', css.logo, {
         [css.logo_inverse]: inverse,
         [css.logo_shape]: shape
       }, className),
@@ -39,7 +41,9 @@ const Logo = props => {
               alt: ''
             }) : children || /*#__PURE__*/_jsx(LogoArmtek, {
               black: black,
-              inverse: inverse
+              inverse: inverse,
+              width: width,
+              height: height
             })
           }) : /*#__PURE__*/_jsx("span", {
             children: src ? /*#__PURE__*/_jsx("img", {
@@ -47,7 +51,9 @@ const Logo = props => {
               alt: ''
             }) : children || /*#__PURE__*/_jsx(LogoArmtek, {
               black: black,
-              inverse: inverse
+              inverse: inverse,
+              width: width,
+              height: height
             })
           })
         }), description && /*#__PURE__*/_jsx("div", {
@@ -60,11 +66,15 @@ const Logo = props => {
 };
 const LogoArmtek = ({
   black,
-  inverse
+  inverse,
+  width,
+  height
 }) => {
   let part1Color = '#FF7F00';
   let part2Color = inverse ? '#FFFFFF' : '#212529';
   if (black) part1Color = part2Color;
+  let w = width || 324;
+  let h = height || 40;
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs("svg", {
       xmlns: "http://www.w3.org/2000/svg",

package/ui/Slider/Slider.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import RcSlider from 'rc-slider';
 import '!style-loader!css-loader!./style.css';
 import HelperText from "../HelperText/HelperText";
@@ -22,10 +21,14 @@ const Slider = props => {
         className: '_' + size
       }), restProps.min !== undefined && restProps.max !== undefined && /*#__PURE__*/_jsxs("div", {
         className: css.slider__helperText,
-        children: [/*#__PURE__*/_jsx(HelperText, {
-          children: restProps.min
-        }), /*#__PURE__*/_jsx(HelperText, {
-          children: restProps.max
+        children: [/*#__PURE__*/_jsx("div", {
+          children: /*#__PURE__*/_jsx(HelperText, {
+            children: restProps.min
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          children: /*#__PURE__*/_jsx(HelperText, {
+            children: restProps.max
+          })
         })]
       })]
     })

package/ui/Status/Status.js

@@ -20,7 +20,7 @@ function Status(props) {
       children: [/*#__PURE__*/_jsx("span", {
         className: css.status__content,
         children: text || children
-      }), /*#__PURE__*/_jsx("span", {
+      }), icon && /*#__PURE__*/_jsx("span", {
         className: clsx(css.status__icon, 'material_icon'),
         children: icon
       })]