armtek-uikit-react 1.0.13 → 1.0.14

package/cjs/ui/Form/TextField/TextField.module.scss

@@ -1,160 +1 @@
-@import "../../../assets/styles";
-
-.textfield{
-  position: relative;
-  overflow: hidden;
-  border-radius: $radius;
-  border: 1px solid $color-gray-400;
-  background-color: #fff;
-  height: $size-elarge;
-  @include flex();
-  &:hover{
-    border-color: $color-gray-600;
-  }
-  &._focused{
-    border-color: $color-gray-800;
-  }
-  &._disabled{
-    pointer-events: none;
-    background: $color-gray-100;
-    border-color: transparent;
-    & .textfield__label{
-      color: $color-gray-600;
-    }
-  }
-  &.size_small{
-    height: $size-large;
-    font-size: 14px;
-  }
-  &_outlined{
-    border-top:none;
-    border-left: none;
-    border-right: none;
-    border-radius: 0;
-  }
-}
-.textfield__container{
-  cursor: text;
-  position: relative;
-  padding: 11px 12px 8px;
-  width: 100%;
-  &._label{
-    padding: 25px 12px 8px;
-  }
-  &.size_small{
-    &._label{
-      padding: 18px 12px 4px
-    }
-  }
-}
-.textfield__container_outlined{
-  padding-left: 0 !important;
-  & .textfield__label{
-    padding-left: 0;
-  }
-}
-.textfield__input{
-  display: block;
-  width: 100%;
-  font-size: 16px;
-  outline: none;
-  background: transparent;
-  border: none;
-  padding: 0;
-  height: 23px;
-  &:focus{
-    border-color: $color-gray-800;
-  }
-  &.size_small{
-    font-size: 14px;
-    height: 20px;
-  }
-  &._label::placeholder{
-    opacity: 0;
-  }
-}
-._error{
-  border-color: $color-error-dark;
-}
-
-.textfield__label_small{
-  font-size: 14px;
-}
-.textfield__label{
-  pointer-events: none;
-  color: $color-gray-600;
-  position: absolute;
-  top: 12px;
-  padding-left: 12px;
-  left: 1px;
-  font-size: 16px;
-  transition: 0.2s all ease;
-  width: calc(100% - 2px);
-  padding-top:8px;
-  &_small{
-    top: 4px;
-  }
-  &_focused{
-    font-size: 12px;
-    transform: none;
-    top: 1px;
-    &.textfield__label_small{
-      padding-top:4px
-    }
-  }
-}
-
-.textfield__input_outlined{
-  border-left:none;
-  border-top:none;
-  border-right: none;
-  padding-left: 0 !important;
-  &:focus,
-  &:hover{
-    border-left:none;
-    border-top:none;
-    border-right: none;
-  }
-  border-radius: 0;
-  & + .textfield__label{
-    left:0;
-  }
-  &:disabled{
-    border-bottom-color: $color-gray-400;
-    border-bottom-style: dotted;
-    background: transparent;
-    & + .textfield__label{
-      color: $color-gray-400;
-    }
-  }
-}
-
-.textfield__label_error{
-  color: $color-error-dark;
-}
-.textfield__adornment{
-  @include flex();
-  position: relative;
-  z-index: 5;
-  height: 100%;
-  padding-right: 10px;
-  & > *{
-    margin-left: $size-step;
-  }
-}
-.textfield__helperText{
-  margin-top: calc($size-step / 2);
-}
-._disabled{
-  & + .textfield__helperText{
-    color: $color-gray-600;
-  }
-  & .textfield_outlined{
-    & .textfield__helperText{
-      color: $color-gray-400;
-    }
-  }
-  & .textfield__icon{
-    color: $color-gray-400;
-  }
-}
+@import "../../../assets/TextField";

package/cjs/ui/HelperText/HelperText.js

@@ -3,9 +3,13 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
-var _HelperTextModule = _interopRequireDefault(require("./HelperText.module.scss"));
 var _clsx = _interopRequireDefault(require("clsx"));
+var _HelperTextModule = _interopRequireDefault(require("./HelperText.module.scss"));
 var _jsxRuntime = require("react/jsx-runtime");
+const CssClasses = ['helperText', 'helperText_error'];
+
+// const css = getCssPrefix(CssClasses)
+
 const HelperText = props => {
   let {
     className,

package/cjs/ui/HelperText/HelperText.module.scss

@@ -1,10 +1 @@
-@import "../../assets/styles";
-
-.helperText{
-  color: $color-gray-600;
-  font-size: 12px;
-  display: block;
-}
-.helperText_error{
-  color: $color-error-dark;
-}
+@import "../../assets/HelperText";

package/cjs/ui/List/ListItem.js

@@ -3,13 +3,17 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
-var _ListItemModule = _interopRequireDefault(require("./ListItem.module.scss"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _Checkbox = _interopRequireDefault(require("../Form/Checkbox/Checkbox"));
 var _Adornment = _interopRequireWildcard(require("../Adornment/Adornment"));
+var _ListItemModule = _interopRequireDefault(require("./ListItem.module.scss"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const CssClasses = ['listitem', 'listitem_active', 'listitem_divider', 'listitemText'];
+
+// const css = getCssPrefix(CssClasses)
+
 const ListItem = props => {
   let {
     children,

package/cjs/ui/List/ListItem.module.scss

@@ -1,34 +1 @@
-@import "../../assets/styles";
-
-.listitem{
-  outline: none;
-  padding: calc($size-step * 1.5) calc($size-step * 2);
-  color: $color-neutral;
-  background: transparent;
-  @include transition(0.3s, background);
-  @include flex();
-  width: 100%;
-  border: none;
-  text-align: left;
-  cursor: pointer;
-  &:hover{
-    background: $color-gray-50;
-  }
-  &.listitem_active,
-  &:active{
-    background: rgba($color-primary, 0.1);
-  }
-}
-.listitem_startAdornment{
-
-}
-.listitem_endAdornment{
-
-}
-.listitem_divider{
-  border-bottom: 1px solid $color-gray-200;
-}
-.listitemText{
-  display: block;
-  margin: 0 calc($size-step * 2);
-}
+@import "../../assets/ListItem";

package/cjs/ui/Loader/Loader.js

@@ -3,9 +3,13 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
-var _LoaderModule = _interopRequireDefault(require("./Loader.module.scss"));
 var _clsx = _interopRequireDefault(require("clsx"));
+var _LoaderModule = _interopRequireDefault(require("./Loader.module.scss"));
 var _jsxRuntime = require("react/jsx-runtime");
+const CssClasses = ['loader'];
+
+// const css = getCssPrefix(CssClasses)
+
 const Loader = props => {
   let width = props.size === 'large' ? 25 : props.size === 'medium' ? 23 : props.size === 'small' ? 21 : 27;
   let height = props.size === 'large' ? 24 : props.size === 'medium' ? 22 : props.size === 'small' ? 20 : 26;

package/cjs/ui/Loader/Loader.module.scss

@@ -1,37 +1 @@
-@import "../../assets/styles";
-
-.loader{
-  -webkit-animation: rotating 2s linear infinite;
-  -moz-animation: rotating 2s linear infinite;
-  -ms-animation: rotating 2s linear infinite;
-  -o-animation: rotating 2s linear infinite;
-  animation: rotating 2s linear infinite;
-}
-@-webkit-keyframes rotating /* Safari and Chrome */ {
-  from {
-    -webkit-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  to {
-    -webkit-transform: rotate(360deg);
-    -o-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-@keyframes rotating {
-  from {
-    -ms-transform: rotate(0deg);
-    -moz-transform: rotate(0deg);
-    -webkit-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  to {
-    -ms-transform: rotate(360deg);
-    -moz-transform: rotate(360deg);
-    -webkit-transform: rotate(360deg);
-    -o-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
+@import "../../assets/Loader";

package/cjs/ui/Logo/Logo.js

@@ -3,9 +3,13 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
-var _LogoModule = _interopRequireDefault(require("./Logo.module.scss"));
 var _clsx = _interopRequireDefault(require("clsx"));
+var _LogoModule = _interopRequireDefault(require("./Logo.module.scss"));
 var _jsxRuntime = require("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,

package/cjs/ui/Logo/Logo.module.scss

@@ -1,29 +1 @@
-@import "../../assets/styles";
-
-.logo{
-  display: inline-block;
-}
-.logo_shape{
-  box-shadow: $box-shadow;
-  padding: calc($size-step * 2);
-  transform: skewX(-10deg);
-  & .logo__inner{
-    transform: skewX(10deg);
-  }
-}
-.logo__inner{
-
-}
-
-.logo__img{
-  font-size: 0;
-}
-.logo__description{
-  color: $color-gray-900;
-  font-size: 14px;
-  font-style: italic;
-  margin-top: 2px;
-}
-.logo_inverse .logo__description{
-  color: #fff;
-}
+@import "../../assets/Logo";

package/cjs/ui/Slider/RcSlider.d.ts

@@ -1,2 +0,0 @@
-import RcSlider from 'rc-slider';
-export default RcSlider;

package/cjs/ui/Slider/RcSlider.js

@@ -1,9 +1 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-exports.__esModule = true;
-exports.default = void 0;
-var _rcSlider = _interopRequireDefault(require("rc-slider"));
-var _default = _rcSlider.default;
-exports.default = _default;
-module.exports = exports.default;
+"use strict";

package/cjs/ui/Slider/Slider.d.ts

@@ -1,6 +1,6 @@
 import '!style-loader!css-loader!./style.css';
 import { SliderProps as RcSliderProps } from 'rc-slider/lib/Slider';
-import { SizeType } from 'types/theme';
+import { SizeType } from '../../types/theme';
 export type SliderProps = {
     size?: Exclude<SizeType, 'extraLarge' | 'medium'>;
 } & Omit<RcSliderProps, 'size'>;

package/cjs/ui/Slider/Slider.js

@@ -3,12 +3,15 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
 var _rcSlider = _interopRequireDefault(require("rc-slider"));
 require("!style-loader!css-loader!./style.css");
 var _HelperText = _interopRequireDefault(require("../HelperText/HelperText"));
 var _SliderModule = _interopRequireDefault(require("./Slider.module.scss"));
 var _jsxRuntime = require("react/jsx-runtime");
-// import './style.css'
+const CssClasses = ['slider__helperText'];
+
+// const css = getCssPrefix(CssClasses)
 
 const Slider = props => {
   let {

package/cjs/ui/Slider/Slider.module.scss

@@ -1,6 +1 @@
-@import "../../assets/styles";
-
-.slider__helperText{
-  @include flex(space-between);
-  margin-top: 8px;
-}
+@import "../../assets/Slider";

package/cjs/ui/Status/Status.js

@@ -3,9 +3,13 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
-var _StatusModule = _interopRequireDefault(require("./Status.module.scss"));
 var _clsx = _interopRequireDefault(require("clsx"));
+var _StatusModule = _interopRequireDefault(require("./Status.module.scss"));
 var _jsxRuntime = require("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,

package/cjs/ui/Status/Status.module.scss

@@ -1,45 +1 @@
-@import "../../assets/styles";
-
-.status{
-  display: inline-flex;
-  align-items: center;
-  padding: 3px 8px 1px;
-  border-radius: 4px;
-}
-.status_primary{
-  background: rgba($color-primary-dark, 0.2);
-  color: $color-primary-dark;
-}
-.status_secondary{
-  background: rgba($color-secondary-dark, 0.2);
-  color: $color-secondary-dark;
-}
-.status_neutral{
-  background: rgba(#4D5359, 0.2);
-  color: rgba(#212529, 0.7);
-}
-.status_error{
-  background: rgba($color-error-dark, 0.2);
-  color: $color-error-dark;
-}
-.status_warning{
-  background: rgba(#FFC61A, 0.2);
-  color: $color-secondary-dark;
-}
-.status_info{
-  background: rgba(#0D46FF, 0.2);
-  color: $color-primary-dark;
-}
-.status_success{
-  background: rgba(#0BD998, 0.2);
-  color: $color-success-dark;
-}
-.status__content{
-  font-size: 14px;
-  line-height: 1;
-}
-.status__icon{
-  margin-left: 4px;
-  font-size: 14px;
-  line-height: 1.5;
-}
+@import "../../assets/Status";

package/cjs/ui/Stepper/StepItem.js

@@ -4,10 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _StepItemIcon = _interopRequireDefault(require("./StepItemIcon"));
-var _StepItemModule = _interopRequireDefault(require("./StepItem.module.scss"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _Button = _interopRequireDefault(require("../Button/Button"));
+var _StepItemModule = _interopRequireDefault(require("./StepItem.module.scss"));
 var _jsxRuntime = require("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,

package/cjs/ui/Stepper/StepItem.module.scss

@@ -1,67 +1 @@
-@import "../../assets/styles";
-
-.stepItem__inner{
-  @include flex(flex-start, flex-start)
-}
-
-.stepItem__title{
-  font-weight: 700;
-  margin: 2px 0 0 $size-step;
-  position: relative;
-  background: #fff;
-  padding-right: 5px;
-}
-.stepItem__title_error{
-  color: $color-error-dark
-}
-
-.stepItem__content{
-  padding-left: 23px;
-  border-left: 1px solid #B1BCC6;
-  margin-left: 11px;
-  margin-top:5px;
-  position: relative;
-}
-.stepItem__button{
-  margin-top: $size-step;
-}
-
-
-.stepItem_small{
-  & .stepItem__content,
-  & .stepItem__title{
-    font-size: 14px;
-  }
-  & .stepItem__content{
-    padding-left: 19px;
-    margin-left: 10px;
-  }
-  &.stepItem_horizontal{
-    & .stepItem__content:before{
-      top: -15px;
-    }
-  }
-}
-.stepItem_last{
-  & .stepItem__content{
-    border-color:transparent;
-    &:before{
-      display: none;
-    }
-  }
-}
-.stepItem_horizontal{
-  & .stepItem__content{
-    border-color:transparent;
-  }
-  & .stepItem__content:before{
-    content: '';
-    position: absolute;
-    top: -19px;
-    width: 100%;
-    left: 22px;
-    height: 1px;
-    background: #B1BCC6;
-    z-index: -1;
-  }
-}
+@import "../../assets/StepItem";

package/cjs/ui/Stepper/StepItemIcon.js

@@ -3,9 +3,13 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
-var _StepItemIconModule = _interopRequireDefault(require("./StepItemIcon.module.scss"));
 var _clsx = _interopRequireDefault(require("clsx"));
+var _StepItemIconModule = _interopRequireDefault(require("./StepItemIcon.module.scss"));
 var _jsxRuntime = require("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) {

package/cjs/ui/Stepper/StepItemIcon.module.scss

@@ -1,47 +1 @@
-@import "../../assets/styles";
-
-.stepItemIcon{
-  @include flex(center);
-  width: 24px;
-  min-width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  border: 1px solid;
-  & .stepItemIcon__number{
-    font-size: 16px;
-  }
-  &_small{
-    width: 20px;
-    min-width: 20px;
-    height: 20px;
-    & .stepItemIcon__number{
-      font-size: 14px;
-    }
-  }
-  border-color: $color-primary;
-  color: $color-primary;
-}
-
-.stepItemIcon__inner{
-  font-size: 0;
-}
-
-.stepItemIcon_active{
-  color: #fff;
-  background: $color-primary;
-  &.stepItemIcon_icon{
-    background: transparent;
-    color: $color-primary;
-    border: none;
-  }
-}
-.stepItemIcon_complete{
-  color: #fff;
-  background: $color-success;
-  border-color: $color-success;
-}
-.stepItemIcon_error{
-  color: $color-error-dark !important;
-  background: transparent;
-  border-color: transparent;
-}
+@import "../../assets/StepItemIcon";

package/cjs/ui/Stepper/Stepper.js

@@ -4,10 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _StepItem = _interopRequireDefault(require("./StepItem"));
-var _StepperModule = _interopRequireDefault(require("./Stepper.module.scss"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _react = require("react");
+var _StepperModule = _interopRequireDefault(require("./Stepper.module.scss"));
 var _jsxRuntime = require("react/jsx-runtime");
+const CssClasses = ['stepper', 'stepper_horizontal', 'stepper__connector', 'stepper_small'];
+
+// const css = getCssPrefix(CssClasses)
+
 const Stepper = props => {
   var _props$steps;
   let {

package/cjs/ui/Stepper/Stepper.module.scss

@@ -1,34 +1 @@
-@import "../../assets/styles";
-
-.stepper{
-
-}
-.stepper_horizontal{
-  display: flex;
-}
-.stepper__connector{
-  padding-left: 23px;
-  border-left: 1px solid #B1BCC6;
-  margin-left: 11px;
-  height: 25px;
-  margin-bottom: 5px;
-}
-.stepper_small{
-  & .stepper__connector{
-    padding-left: 19px;
-    margin-left: 10px;
-  }
-}
-.stepper_horizontal{
-  & .stepper__connector{
-    height: 1px;
-    width: auto;
-    margin-right: 5px;
-    margin-bottom: 0;
-    padding-left: 0;
-    border-left:none;
-    border-top: 1px solid #B1BCC6;
-    flex: 1 1 0;
-    margin-top:10px;
-  }
-}
+@import "../../assets/Stepper";

package/cjs/ui/Tooltip/Tooltip.js

@@ -4,9 +4,13 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
-var _TooltipModule = _interopRequireDefault(require("./Tooltip.module.scss"));
 var _react = require("react");
+var _TooltipModule = _interopRequireDefault(require("./Tooltip.module.scss"));
 var _jsxRuntime = require("react/jsx-runtime");
+const CssClasses = ['tooltip', 'tooltip__item'];
+
+// const css = getCssPrefix(CssClasses)
+
 function Tooltip(props) {
   let {
     text,