armtek-uikit-react 1.0.11 → 1.0.14

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

@@ -1,297 +1 @@
-@import "../../../assets/styles";
-
-.checkbox{
-  position: relative;
-}
-.checkbox__input{
-  display: none;
-}
-.checkbox__label{
-  cursor: pointer;
-  text-align: left;
-  position: relative;
-  display: block;
-  font-size: 16px;
-  line-height: 1.2;
-  width:22px;
-  height: 22px;
-  & .checkbox__text{
-    display: block;
-    padding-left: 31px;
-  }
-  &:before{
-    width: 100%;
-    height: 100%;
-    border-radius: $radius;
-    border: 1px solid $color-gray-700;
-    background: #fff;
-    position: absolute;
-    content: '';
-    left: 0;
-    top: -3px;
-  }
-  &:after{
-    content: '';
-    position: absolute;
-    transform: rotate(45deg);
-    left: 9px;
-    top: 1px;
-    width: 5px;
-    height: 10px;
-    border-bottom: 2px solid;
-    border-right: 2px solid;
-    display: none;
-  }
-  & span{
-    display: inline-block;
-    padding-left: 5px;
-  }
-}
-
-.checkbox_medium{
-  width:18px;
-  height: 18px;
-  & .checkbox__text{
-    //padding-left: 27px;
-  }
-  &:after{
-    left: 7px;
-    top: 1px;
-  }
-  &:before{
-    top:-1px;
-  }
-}
-.checkbox_small{
-  font-size: 14px;
-  width:16px;
-  height: 16px;
-  & .checkbox__text{
-    padding-left: 25px;
-  }
-  &:after{
-    left: 7px;
-    top: 1px;
-    height: 8px;
-    width: 3px;
-  }
-  &:before{
-    top: -2px;
-  }
-}
-.checkbox__label_intermediate{
-  &:after{
-    border-left: none;
-    width: 16px;
-    transform: none;
-    top: 7px;
-    height: 0;
-    left: 4px;
-    border-right: none;
-  }
-  &.checkbox_medium:after{
-    width: 12px;
-  }
-  &.checkbox_small:after{
-    width: 10px;
-    top: 6px;
-  }
-}
-
-.checkbox__label_intermediate,
-.checkbox__label_checked{
-  &:before{
-    border-color: transparent;
-    background: $color-primary;
-  }
-  &:after{
-    border-color: #fff;
-    display: block;
-  }
-  &.checkbox_secondary{
-    &:before{
-      background: $color-secondary;
-    }
-  }
-
-  &.checkbox_contained{
-    &.checkbox_secondary{
-      &:before{
-        background: $color-secondary;
-      }
-    }
-    &.checkbox_neutral{
-      &:before{
-        background: $color-neutral;
-      }
-    }
-    &.checkbox_success{
-      &:before{
-        background: $color-success;
-      }
-    }
-    &.checkbox_error{
-      color: $color-error-dark;
-      &:before{
-        background: $color-error-dark;
-      }
-    }
-    &.checkbox_warning{
-      &:before{
-        background: $color-warning;
-      }
-    }
-  }
-}
-.checkbox_outlined{
-  &:before{
-    background: transparent;
-    border-color: $color-primary;
-  }
-  &:after{
-    border-color: $color-primary;
-  }
-  &.checkbox_secondary{
-    &:before{
-      border-color: $color-secondary;
-    }
-    &:after{
-      border-color: $color-secondary;
-    }
-  }
-  &.checkbox_neutral{
-    &:before{
-      border-color: $color-neutral;
-    }
-    &:after{
-      border-color: $color-neutral;
-    }
-  }
-  &.checkbox_success{
-    &:before{
-      border-color: $color-success;
-    }
-    &:after{
-      border-color: $color-success;
-    }
-  }
-  &.checkbox_error{
-    color: $color-error-dark;
-    &:before{
-      border-color: $color-error-dark;
-    }
-    &:after{
-      border-color: $color-error-dark;
-    }
-  }
-  &.checkbox_warning{
-    &:before{
-      border-color: $color-warning;
-    }
-    &:after{
-      border-color: $color-warning;
-    }
-  }
-}
-
-.checkbox__label_disabled{
-  color: $color-gray-500 !important;
-  pointer-events: none;
-  &:before{
-    background-color: $color-gray-400;
-  }
-  &:after{
-    border-color: $color-gray-200;
-  }
-  &.checkbox_outlined{
-    &:before{
-      background-color: transparent;
-      border-color: $color-gray-200;
-    }
-    &:after{
-      border-color: $color-gray-200;
-    }
-  }
-}
-
-.radio{
-  & .checkbox__label{
-    &:before{
-      border-radius: 50%;
-    }
-    &:after{
-      border: none;
-      border-radius: 50%;
-      background: $color-primary;
-      width: 12px;
-      height: 12px;
-      margin-top: -2px;
-      margin-left: 1px;
-      top:50%;
-      left:50%;
-      transform: translate(-50%, -50%);
-    }
-    &.checkbox_medium{
-      &:after{
-        width: 8px;
-        height: 8px;
-        margin-top: 0;
-      }
-    }
-    &.checkbox_small{
-      &:after{
-        width: 6px;
-        height: 6px;
-        margin-top: -1px;
-      }
-    }
-    &.checkbox_error:before{
-      border-color: $color-error-dark;
-    }
-    &.checkbox_secondary:before{
-      border-color: $color-secondary;
-    }
-    &.checkbox_success:before{
-      border-color: $color-success;
-    }
-    &.checkbox_warning:before{
-      border-color: $color-warning;
-    }
-    &.checkbox_neutral:before{
-      border-color: $color-neutral;
-    }
-    &.checkbox_error:after{
-      background: $color-error-dark;
-    }
-    &.checkbox_secondary:after{
-      background: $color-secondary;
-    }
-    &.checkbox_success:after{
-      background: $color-success;
-    }
-    &.checkbox_warning:after{
-      background: $color-warning;
-    }
-    &.checkbox_neutral:after{
-      background: $color-neutral;
-    }
-    &_disabled:after{
-      background: $color-gray-200 !important;
-    }
-    &.checkbox_contained:after{
-      background: #fff;
-    }
-
-    &.checkbox__label_disabled:before{
-      background: transparent !important;
-      border-color: $color-gray-400;
-    }
-    &_checked{
-      &.checkbox__label_disabled:before{
-        background: #B1BCC6 !important;
-      }
-    }
-
-
-  }
-}
+@import "../../../assets/Checkbox";

package/cjs/ui/Form/Checkbox/Radio.js

@@ -4,14 +4,18 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _Checkbox = _interopRequireDefault(require("./Checkbox"));
-var _CheckboxModule = _interopRequireDefault(require("./Checkbox.module.scss"));
 var _clsx = _interopRequireDefault(require("clsx"));
+var _CheckboxModule = _interopRequireDefault(require("./Checkbox.module.scss"));
 var _jsxRuntime = require("react/jsx-runtime");
+const CssClasses = ['radio'];
+
+// const css = getCssPrefix(CssClasses)
+
 const Radio = props => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
       ...props,
-      className: (0, _clsx.default)(props.className, _CheckboxModule.default.radio, _CheckboxModule.default['radio_' + props.size || 'large'], _CheckboxModule.default['radio_' + props.color || 'primary']),
+      className: (0, _clsx.default)(props.className, _CheckboxModule.default.radio),
       type: 'radio'
     })
   });

package/cjs/ui/Form/DateField/DateField.js

@@ -17,7 +17,6 @@ const DateInput = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
     ...restProps
   } = props;
   let inputIcon = showTime && showTimeOnly ? 'schedule' : 'calendar_today';
-  console.log(restProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
     ref: ref,
     ...restProps,

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

@@ -1,7 +1 @@
-@import "../../../assets/styles";
-
-.datepicker{
-  & .react-datepicker{
-    border:none;
-  }
-}
+@import "../../../assets/DatePicker";

package/cjs/ui/Form/Interval/Interval.js

@@ -5,10 +5,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _react = require("react");
-var _IntervalModule = _interopRequireDefault(require("./Interval.module.scss"));
 var _TextField = require("../TextField/TextField");
 var _HelperText = _interopRequireDefault(require("../../HelperText/HelperText"));
+var _IntervalModule = _interopRequireDefault(require("./Interval.module.scss"));
 var _jsxRuntime = require("react/jsx-runtime");
+const CssClasses = ['interval', 'interval__end', 'interval__item', 'interval__helperText', 'intervalslide__slider'];
+
+// const css = getCssPrefix(CssClasses)
+
 const Interval = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   let {
     value,

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

@@ -1,35 +1 @@
-@import "../../../assets/styles";
-
-.interval{
-  @include flex();
-  width: 100%;
-  & input{
-    -moz-appearance: textfield;
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
-  }
-}
-.interval__end{
-  text-align: right;
-  & + span{
-    text-align: right;
-    padding-left: 0;
-    padding-right: 12px;
-  }
-}
-.interval__item{
-  max-width: 50%;
-  flex: 0 0 50%;
-}
-
-.interval__helperText{
-  margin-top: calc($size-step / 2);
-}
-
-.intervalslide__slider{
-  padding: 0 calc($size-step * 2);
-  margin-top: -7px;
-}
+@import "../../../assets/Interval";

package/cjs/ui/Form/Interval/IntervalSlide.js

@@ -5,10 +5,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _Interval = _interopRequireDefault(require("./Interval"));
-var _IntervalModule = _interopRequireDefault(require("./Interval.module.scss"));
 var _react = require("react");
 var _Slider = _interopRequireDefault(require("../../Slider/Slider"));
+var _IntervalModule = _interopRequireDefault(require("./Interval.module.scss"));
 var _jsxRuntime = require("react/jsx-runtime");
+const CssClasses = ['intervalslide__slider'];
+
+// const css = getCssPrefix(CssClasses)
+
 const IntervalSlide = props => {
   let {
     onChange,

package/cjs/ui/Form/Period/Period.js

@@ -6,12 +6,16 @@ exports.__esModule = true;
 exports.default = void 0;
 var _TextField = _interopRequireDefault(require("../TextField/TextField"));
 var _react = require("react");
-var _PeriodModule = _interopRequireDefault(require("./Period.module.scss"));
 var _ButtonIcon = _interopRequireDefault(require("../../Button/ButtonIcon"));
 var _Card = _interopRequireDefault(require("../../Card/Card"));
 var _DatePicker = _interopRequireDefault(require("../DatePicker/DatePicker"));
 var _DateService = require("../../../lib/services/DateService");
+var _PeriodModule = _interopRequireDefault(require("./Period.module.scss"));
 var _jsxRuntime = require("react/jsx-runtime");
+const CssClasses = ['dateField', 'dateField__picker'];
+
+// const css = getCssPrefix(CssClasses)
+
 const Period = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   let {
     onChange,

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

@@ -1,10 +1,2 @@
-@import "../../../assets/styles";
+@import "../../../assets/Period";
 
-.dateField{
-  position: relative;
-}
-.dateField__picker{
-  position: absolute;
-  top: 100%;
-  right: 0;
-}

package/cjs/ui/Form/Rating/Rating.js

@@ -4,10 +4,14 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
-var _RatingModule = _interopRequireDefault(require("./Rating.module.scss"));
 var _react = require("react");
 var _clsx = _interopRequireDefault(require("clsx"));
+var _RatingModule = _interopRequireDefault(require("./Rating.module.scss"));
 var _jsxRuntime = require("react/jsx-runtime");
+const CssClasses = ['rating', 'rating__item', 'rating_medium', 'rating_small', 'rating__item_disabled'];
+
+// const css = getCssPrefix(CssClasses)
+
 const Rating = props => {
   let {
     size = 'large',

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

@@ -1,19 +1 @@
-@import "../../../assets/styles";
-
-.rating{
-  @include flex();
-}
-.rating__item{
-  cursor: pointer;
-  color: #F7B519;
-  font-size: 30px;
-}
-.rating_medium{
-  font-size: 24px;
-}
-.rating_small{
-  font-size: 18px;
-}
-.rating__item_disabled{
-  color: $color-gray-400;
-}
+@import "../../../assets/Rating";

package/cjs/ui/Form/Select/Select.js

@@ -6,12 +6,16 @@ exports.__esModule = true;
 exports.getOptionValue = exports.default = void 0;
 var _TextField = _interopRequireDefault(require("../TextField/TextField"));
 var _react = require("react");
-var _SelectModule = _interopRequireDefault(require("./Select.module.scss"));
 var _ButtonIcon = _interopRequireDefault(require("../../Button/ButtonIcon"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _ListItem = _interopRequireDefault(require("../../List/ListItem"));
 var _useClickOutside = _interopRequireDefault(require("../../../lib/hooks/useClickOutside"));
+var _SelectModule = _interopRequireDefault(require("./Select.module.scss"));
 var _jsxRuntime = require("react/jsx-runtime");
+const CssClasses = ['select', 'select__input_wrapper', 'select__input', 'options', 'options_inline'];
+
+// const css = getCssPrefix(CssClasses)
+
 const getOptionValue = option => option.value || option.text;
 exports.getOptionValue = getOptionValue;
 function Select(props) {

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

@@ -1,26 +1 @@
-@import "../../../assets/styles";
-
-.select{
-  position: relative;
-}
-.select__input_wrapper{
-
-}
-.select__input{
-  cursor: pointer;
-  & * {
-    cursor: pointer;
-  }
-}
-.options{
-  padding: $size-step 0;
-  border-radius: $radius;
-  box-shadow: $box-shadow;
-  position: absolute;
-  left:0;
-  top:100%;
-  width:100%;
-}
-.options_inline{
-  position: static;
-}
+@import "../../../assets/Select";

package/cjs/ui/Form/Switch/Switch.js

@@ -3,9 +3,13 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
-var _SwitchModule = _interopRequireDefault(require("./Switch.module.scss"));
 var _clsx = _interopRequireDefault(require("clsx"));
+var _SwitchModule = _interopRequireDefault(require("./Switch.module.scss"));
 var _jsxRuntime = require("react/jsx-runtime");
+const CssClasses = ['switch', 'switch__input', 'switch__slider', 'switch_small'];
+
+// const css = getCssPrefix(CssClasses)
+
 const Switch = props => {
   let {
     onChange,

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

@@ -1,69 +1 @@
-@import "../../../assets/styles";
-
-
-.switch {
-  position: relative;
-  display: inline-block;
-  width: 34px;
-  height: 14px;
-}
-
-
-.switch__input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-/* The slider */
-.switch__slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: $color-neutral-light;
-  -webkit-transition: .4s;
-  transition: .4s;
-  border-radius: 7px;
-}
-
-.switch__slider:before {
-  position: absolute;
-  content: "";
-  height: 20px;
-  width: 20px;
-  left: -3px;
-  bottom: -3px;
-  background-color: white;
-  -webkit-transition: .4s;
-  transition: .4s;
-  border-radius: 50%;
-  box-shadow: $box-shadow;
-}
-
-.switch__input:checked + .switch__slider {
-  background-color: $color-orange-400;
-}
-
-.switch__input:checked + .switch__slider:before {
-  -webkit-transform: translateX(22px);
-  -ms-transform: translateX(22px);
-  transform: translateX(22px);
-  background: $color-secondary;
-}
-
-.switch_small{
-  width: 26px;
-  height: 10px;
-  & .switch__slider:before{
-    width: 16px;
-    height: 16px;
-  }
-  & .switch__input:checked + .switch__slider:before {
-    -webkit-transform: translateX(20px);
-    -ms-transform: translateX(20px);
-    transform: translateX(18px);
-  }
-}
+@import "../../../assets/Switch";

package/cjs/ui/Form/TextArea/TextArea.js

@@ -9,6 +9,10 @@ var _react = require("react");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _TextAreaModule = _interopRequireDefault(require("./TextArea.module.scss"));
 var _jsxRuntime = require("react/jsx-runtime");
+const CssClasses = ['textarea', 'size_small'];
+
+// const css = getCssPrefix(CssClasses)
+
 const TextArea = props => {
   var _textareaRef$current, _textareaRef$current2;
   let {

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

@@ -1,15 +1 @@
-@import "../../../assets/styles";
-
-.textarea{
-  font-family: $font-family;
-  height: auto;
-  min-height: $size-elarge;
-  &.size_small{
-    height: auto;
-    min-height: $size-large;
-  }
-  & textarea{
-    resize: none;
-    appearance: none;
-  }
-}
+@import "../../../assets/TextArea";

package/cjs/ui/Form/TextField/TextField.js

@@ -5,10 +5,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = exports.TextFieldInput = exports.TextFieldContainer = void 0;
 var _react = require("react");
-var _TextFieldModule = _interopRequireDefault(require("./TextField.module.scss"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _HelperText = _interopRequireDefault(require("../../HelperText/HelperText"));
+var _TextFieldModule = _interopRequireDefault(require("./TextField.module.scss"));
 var _jsxRuntime = require("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 css = getCssPrefix(CssClasses)
+
 const TextField = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   let {
     error,