intelicoreact 0.1.3 → 0.1.7

package/dist/Atomic/FormElements/AdvancedStatus/AdvancedStatus.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _TextSwitcher = _interopRequireDefault(require("../TextSwitcher/TextSwitcher"));
+
+var _Status = _interopRequireDefault(require("../../UI/Status/Status"));
+
+require("./AdvancedStatus.scss");
+
+var AdvancedStatus = function AdvancedStatus(_ref) {
+  var onChange = _ref.onChange,
+      inactiveText = _ref.inactiveText,
+      activeText = _ref.activeText,
+      value = _ref.value,
+      disabled = _ref.disabled,
+      isPrimary = _ref.isPrimary,
+      primaryStatusText = _ref.primaryStatusText;
+  var isUndefined = value === undefined || value === null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames.default)('advanced-status', {
+      'advanced-status_undefined': isUndefined,
+      'advanced-status_disabled': disabled
+    })
+  }, /*#__PURE__*/React.createElement(_TextSwitcher.default, {
+    onChange: onChange,
+    isIncluded: value,
+    inactiveText: inactiveText,
+    activeText: activeText,
+    className: "advanced-status__switcher"
+  }), isPrimary && /*#__PURE__*/React.createElement(_Status.default, {
+    className: "advanced-status__status",
+    status: "warning"
+  }, primaryStatusText));
+};
+
+var _default = AdvancedStatus;
+exports.default = _default;

package/dist/Atomic/FormElements/AdvancedStatus/AdvancedStatus.scss

@@ -0,0 +1,72 @@
+@import '../../../scss/vars';
+
+.advanced-status {
+  width: 100%;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+
+  &__switcher {
+    height: fit-content;
+    min-height: 28px;
+    border: none;
+
+    .text-switcher__btn {
+      cursor: pointer;
+      min-width: 58px;
+      white-space: nowrap;
+      padding: 0 14px;
+      height: 100%;
+      position: relative;
+      z-index: 2;
+      background-color: transparent;
+
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: center;
+      align-items: center;
+      
+      text-transform: capitalize;
+      font-style: normal;
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 20px;
+      display: flex;
+      align-items: center;
+      text-align: center;
+      color: $color--primary;
+
+      &_off {
+        color: #1E1E2D;;
+      }
+    }
+
+    .text-switcher__slider {
+      border: 1px solid $color--primary;
+      background-color: transparent;
+    }
+  }
+
+  &_undefined, &_disabled {
+    .advanced-status__switcher {
+      cursor: auto;
+      pointer-events: none;
+    }
+  }
+
+  &_undefined {
+    .text-switcher__slider {
+      border: none;
+    }
+  }
+
+  &__status {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+    align-items: center;
+    
+    margin-left: 5px;
+  }
+}

package/dist/Atomic/FormElements/AdvancedStatus/AdvancedStatus.stories.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TemplateAdvancedStatus = exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _AdvancedStatus = _interopRequireDefault(require("./AdvancedStatus"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
+
+global.lng = 'en';
+var _default = {
+  title: 'Form Elements/AdvancedStatus',
+  component: _AdvancedStatus.default
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var buttonStyles = {
+    border: '1px solid black',
+    padding: '10px',
+    marginTop: '10px'
+  };
+  (0, _react.useEffect)(function () {
+    if (value === null) setTimeout(function () {
+      return setValue(args.value);
+    }, 1500);
+    console.log(value);
+  }, [value]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_AdvancedStatus.default, (0, _extends2.default)({}, args, {
+    value: value,
+    onChange: setValue
+  })), /*#__PURE__*/_react.default.createElement("button", {
+    style: buttonStyles,
+    disabled: value === null,
+    onClick: function onClick() {
+      return setValue(null);
+    }
+  }, "Reload"));
+};
+
+var TemplateAdvancedStatus = Template.bind({});
+exports.TemplateAdvancedStatus = TemplateAdvancedStatus;
+TemplateAdvancedStatus.args = {
+  value: false,
+  className: '',
+  activeText: 'Approved',
+  inactiveText: 'Review',
+  disabled: false,
+  isPrimary: true,
+  primaryStatusText: 'Primary'
+};

package/dist/Atomic/FormElements/CheckboxInput/CheckboxInput.js

@@ -38,7 +38,7 @@ var CheckboxInput = function CheckboxInput(_ref) {
     onChange: function onChange(e) {
       return _onChange(!value, e);
     },
-    checked: value,
+    checked: value !== null && value !== void 0 ? value : false,
     disabled: disabled,
     ref: function ref(elem) {
       if (elem) elem.indeterminate = isStark;

package/dist/Atomic/FormElements/Dropdown/Dropdown.js

@@ -221,7 +221,7 @@ var Dropdown = function Dropdown(_ref) {
     }),
     ref: dropdownRef
   }, /*#__PURE__*/_react.default.createElement("button", {
-    className: "".concat(RC, "__trigger input__wrap ").concat(!value ? 'placeholder' : '', " ").concat(error ? 'error' : ''),
+    className: "".concat(RC, "__trigger input__wrap ").concat(isOpen ? 'input__wrap--focus' : '', " ").concat(!value ? 'placeholder' : '', " ").concat(error ? 'error' : ''),
     onClick: function onClick() {
       return !isSearchable ? setIsOpen(!isOpen) : null;
     }

package/dist/Atomic/FormElements/Dropdown/Dropdown.stories.js

@@ -33,7 +33,9 @@ var _default = {
       description: 'string - current option'
     },
     isSearchable: {
-      description: 'boolean - enable search'
+      description: 'boolean - enable search',
+      type: 'boolean',
+      defaultValue: false
     },
     onChange: {
       description: 'callback return selected value'

package/dist/Atomic/FormElements/Input/Input.js

@@ -35,7 +35,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-var Input = function Input(_ref) {
+var Input = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var isSelect = _ref.isSelect,
       onChange = _ref.onChange,
       onBlur = _ref.onBlur,
@@ -62,7 +62,9 @@ var Input = function Input(_ref) {
       symbolsLimit = _ref.symbolsLimit,
       blinkTime = _ref.blinkTime,
       _ref$isFocusDefault = _ref.isFocusDefault,
-      isFocusDefault = _ref$isFocusDefault === void 0 ? false : _ref$isFocusDefault;
+      isFocusDefault = _ref$isFocusDefault === void 0 ? false : _ref$isFocusDefault,
+      _ref$isNotValidateASC = _ref.isNotValidateASCII,
+      isNotValidateASCII = _ref$isNotValidateASC === void 0 ? false : _ref$isNotValidateASC;
   var DEFAULT_BLINK_TIME = 100; // STATES
 
   var _useState = (0, _react.useState)(false),
@@ -75,7 +77,10 @@ var Input = function Input(_ref) {
       isEditing = _useState4[0],
       setEditing = _useState4[1];
 
-  var inputRef = (0, _react.useRef)(null);
+  var inputInnerRef = (0, _react.useRef)(null);
+  var inputRef = (0, _react.useMemo)(function () {
+    return ref || inputInnerRef;
+  }, [ref]);
   var previousValueRef = (0, _react.useRef)(value);
 
   var _useState5 = (0, _react.useState)(false),
@@ -99,6 +104,7 @@ var Input = function Input(_ref) {
   var handle = {
     change: function change(e) {
       var inputValue = e.target ? e.target.value : e;
+      if (type === 'text' && !isNotValidateASCII) inputValue = (0, _fieldValueFormatters.formatToOnlyASCIICodeText)(inputValue);
       if (symbolsLimit && inputValue.length > +symbolsLimit) inputValue = inputValue.substring(0, +symbolsLimit);
       if (onlyNumbers && isOnlyString || isOnlyString) inputValue = (0, _fieldValueFormatters.formatToLetters)(inputValue, softStringMode);else if (onlyNumbers) inputValue = (0, _fieldValueFormatters.filterNumeric)(inputValue, onlyNumbers);
       onChange(inputValue.toString());
@@ -176,7 +182,7 @@ var Input = function Input(_ref) {
 
     if (mask) {
       return /*#__PURE__*/_react.default.createElement(_reactInputMask.default, (0, _extends2.default)({}, uniProps, {
-        ref: inputRef,
+        inputRef: inputRef,
         mask: mask
       }));
     }
@@ -188,7 +194,9 @@ var Input = function Input(_ref) {
   }
 
   (0, _react.useEffect)(function () {
-    if (isEditing) inputRef.current.focus();
+    var _inputRef$current, _inputRef$current$foc;
+
+    if (isEditing) inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : (_inputRef$current$foc = _inputRef$current.focus) === null || _inputRef$current$foc === void 0 ? void 0 : _inputRef$current$foc.call(_inputRef$current);
   }, [isEditing, isFocused]);
   (0, _react.useEffect)(function () {
     setEditing(isSelect !== null && isSelect !== void 0 ? isSelect : false);
@@ -220,7 +228,7 @@ var Input = function Input(_ref) {
     }),
     onClick: handle.toggleEdit
   }));
-};
+});
 
 var _default = Input;
 exports.default = _default;

package/dist/Atomic/FormElements/Input/Input.stories.js

@@ -119,7 +119,7 @@ InputTemplate.args = {
     type: 'float',
     decimalPlaces: 2
   },
-  isOnlyString: true,
+  isOnlyString: false,
   isPriceInput: false,
   isTwoDigitAfterDot: false,
   disabled: false,

package/dist/Atomic/FormElements/RangeInputs/RangeInputs.js

@@ -34,29 +34,65 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 var RangeInputs = function RangeInputs(_ref) {
+  var _valueObj$from, _valueObj$to;
+
   var label = _ref.label,
       hint = _ref.hint,
-      items = _ref.items,
+      _ref$value = _ref.value,
+      valueObj = _ref$value === void 0 ? {
+    from: '',
+    to: ''
+  } : _ref$value,
       className = _ref.className,
       onChange = _ref.onChange,
       isRequired = _ref.isRequired,
       _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'float' : _ref$type;
+      type = _ref$type === void 0 ? 'int' : _ref$type,
+      setInnerError = _ref.setError;
 
-  var _useState = (0, _react.useState)(''),
+  var _useState = (0, _react.useState)({
+    from: '',
+    to: ''
+  }),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       error = _useState2[0],
       setError = _useState2[1];
 
-  var handleChange = function handleChange(prop, value) {
-    onChange(_objectSpread(_objectSpread({}, items), {}, (0, _defineProperty2.default)({}, prop, type === 'float' ? (0, _fieldValueFormatters.filterFloat)(value) : (0, _fieldValueFormatters.filterNumbers)(value))));
+  var inputFromRef = (0, _react.useRef)(null);
+  var inputToRef = (0, _react.useRef)(null);
+  var isValidRange = !!(valueObj !== null && valueObj !== void 0 && valueObj.from && valueObj !== null && valueObj !== void 0 && valueObj.to && +(valueObj === null || valueObj === void 0 ? void 0 : valueObj.from) <= +(valueObj === null || valueObj === void 0 ? void 0 : valueObj.to));
+
+  var handleChange = function handleChange(prop, val) {
+    onChange(_objectSpread(_objectSpread({}, valueObj), {}, (0, _defineProperty2.default)({}, prop, type === 'float' ? (0, _fieldValueFormatters.filterFloat)(val) : (0, _fieldValueFormatters.formatOnlyNumbers)(val))));
   };
 
-  var rangeValidation = function rangeValidation() {
-    if (items !== null && items !== void 0 && items.from && items !== null && items !== void 0 && items.to && (items === null || items === void 0 ? void 0 : items.from) > (items === null || items === void 0 ? void 0 : items.to) || !(items !== null && items !== void 0 && items.to)) {
-      setError('Invalid range');
+  var rangeValidation = function rangeValidation(e, key) {
+    var oppositeKey = key === 'from' ? 'to' : 'from';
+
+    if (!(valueObj !== null && valueObj !== void 0 && valueObj.from) && !(valueObj !== null && valueObj !== void 0 && valueObj.to)) {
+      setError({
+        from: '',
+        to: ''
+      });
+      setInnerError === null || setInnerError === void 0 ? void 0 : setInnerError('');
+      return e;
+    } else if (!valueObj[oppositeKey]) {
+      var mustToFocus = key === 'from' ? inputToRef.current : inputFromRef.current;
+      mustToFocus.focus();
+    } else if (!isValidRange) {
+      if (!(valueObj !== null && valueObj !== void 0 && valueObj.from)) setError(_objectSpread(_objectSpread({}, error), {}, {
+        from: 'Invalid range'
+      }));else setError(_objectSpread(_objectSpread({}, error), {}, {
+        to: 'Invalid range'
+      }));
+      setInnerError === null || setInnerError === void 0 ? void 0 : setInnerError('Invalid range');
     } else {
-      setError('');
+      setError({
+        from: '',
+        to: ''
+      });
+      setInnerError === null || setInnerError === void 0 ? void 0 : setInnerError('');
+      return e;
     }
   };
 
@@ -74,23 +110,41 @@ var RangeInputs = function RangeInputs(_ref) {
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "range-inputs__input-label"
   }, "From"), /*#__PURE__*/_react.default.createElement(_Input.default, {
-    value: items === null || items === void 0 ? void 0 : items.from,
+    ref: inputFromRef,
+    value: (_valueObj$from = valueObj === null || valueObj === void 0 ? void 0 : valueObj.from) !== null && _valueObj$from !== void 0 ? _valueObj$from : '',
     className: "mr15",
-    onChange: function onChange(value) {
-      return handleChange('from', value);
+    onChange: function onChange(val) {
+      return handleChange('from', val);
+    },
+    onBlur: function onBlur(e) {
+      return rangeValidation(e, 'from');
     },
-    onBlur: rangeValidation
+    error: error.from,
+    onKeyUp: function onKeyUp(code, e) {
+      if (code === 13) {
+        if (isValidRange) inputFromRef.current.blur();else {
+          inputToRef.current.focus();
+          inputToRef.current.select();
+        }
+      }
+    }
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "j4 w50"
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "range-inputs__input-label"
   }, "To"), /*#__PURE__*/_react.default.createElement(_Input.default, {
-    value: items === null || items === void 0 ? void 0 : items.to,
-    onChange: function onChange(value) {
-      return handleChange('to', value);
+    ref: inputToRef,
+    value: (_valueObj$to = valueObj === null || valueObj === void 0 ? void 0 : valueObj.to) !== null && _valueObj$to !== void 0 ? _valueObj$to : '',
+    onChange: function onChange(val) {
+      return handleChange('to', val);
+    },
+    onBlur: function onBlur(e) {
+      return rangeValidation(e, 'to');
     },
-    onBlur: rangeValidation,
-    error: error
+    error: error.to,
+    onKeyUp: function onKeyUp(code, e) {
+      if (code === 13) inputToRef.current.blur();
+    }
   }))));
 };
 

package/dist/Atomic/FormElements/RangeInputs/RangeInputs.stories.js

@@ -31,17 +31,17 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  var _useState = (0, _react.useState)({
-    from: 0,
-    to: 0
-  }),
+  var _useState = (0, _react.useState)(),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       state = _useState2[0],
       setState = _useState2[1];
 
+  (0, _react.useEffect)(function () {
+    return console.log(state);
+  }, [state]);
   return /*#__PURE__*/_react.default.createElement(_RangeInputs.default, (0, _extends2.default)({}, args, {
     onChange: setState,
-    items: state
+    value: state
   }));
 };
 

package/dist/Atomic/FormElements/Table/Table.scss

@@ -1,4 +1,4 @@
-@import '~anme/scss/anme-vars';
+@import "../../../scss/vars";
 
 .table-header {
     &--weight-actions {

package/dist/Atomic/FormElements/TextSwitcher/TextSwitcher.js

@@ -18,14 +18,14 @@ require("./TextSwitcher.scss");
 var RC = 'text-switcher';
 
 var TextSwitcher = function TextSwitcher(_ref) {
-  var _ref$isIncluded = _ref.isIncluded,
-      isIncluded = _ref$isIncluded === void 0 ? true : _ref$isIncluded,
+  var isIncluded = _ref.isIncluded,
       _ref$activeText = _ref.activeText,
       activeText = _ref$activeText === void 0 ? 'is' : _ref$activeText,
       _ref$inactiveText = _ref.inactiveText,
       inactiveText = _ref$inactiveText === void 0 ? 'is not' : _ref$inactiveText,
       onChange = _ref.onChange,
       className = _ref.className;
+  var isUndefined = isIncluded === undefined || isIncluded === null;
   return /*#__PURE__*/_react.default.createElement("button", {
     className: (0, _classnames.default)(RC, (0, _defineProperty2.default)({}, "".concat(RC, "_active"), isIncluded), className),
     onClick: function onClick() {
@@ -35,7 +35,7 @@ var TextSwitcher = function TextSwitcher(_ref) {
     className: "".concat(RC, "__btn")
   }, activeText), inactiveText && /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _classnames.default)("".concat(RC, "__btn"), "".concat(RC, "__btn_off"))
-  }, inactiveText), /*#__PURE__*/_react.default.createElement("div", {
+  }, inactiveText), !isUndefined && /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)("".concat(RC, "__slider"), (0, _defineProperty2.default)({}, "".concat(RC, "__slider_inactive"), !isIncluded))
   }));
 };

package/dist/Atomic/FormElements/Textarea/Textarea.scss

@@ -1,5 +1,5 @@
 @import "../../../scss/vars";
-@import "~anme/scss/anme-mixins";
+@import "../../../scss/mixins";
 
 .textarea {
   border: 1px solid #e2e5ec;

package/dist/Atomic/MainMenu/MainMenu.scss

@@ -1,5 +1,5 @@
-@import "~anme/scss/anme-vars";
-@import "~anme/scss/anme-mixins";
+@import "../../scss/vars";
+@import "../../scss/mixins";
 
 .main-menu {
   display: flex;

package/dist/Atomic/UI/Accordion/Accordion.scss

@@ -1,5 +1,5 @@
-@import '~anme/scss/anme-vars';
-@import '~anme/scss/anme-mixins';
+@import '../../../scss/vars';
+@import '../../../scss/mixins';
 
 .accordion {
     &--item {

package/dist/Atomic/UI/Button/Button.js

@@ -15,7 +15,11 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 require("./Button.scss");
 
+var RC = 'button';
+
 var Button = function Button(_ref) {
+  var _cn;
+
   var label = _ref.label,
       _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
@@ -25,11 +29,12 @@ var Button = function Button(_ref) {
       className = _ref.className,
       children = _ref.children,
       style = _ref.style,
-      noIcon = _ref.noIcon;
+      noIcon = _ref.noIcon,
+      isIconRight = _ref.isIconRight;
   var noRenderIcon = noIcon || variant === "ellipse-apply" || variant === "ellipse-cancel";
   return /*#__PURE__*/_react.default.createElement("button", {
     style: style,
-    className: (0, _classnames.default)(className, 'button', (0, _defineProperty2.default)({}, "button_".concat(variant), variant)),
+    className: (0, _classnames.default)(className, RC, (_cn = {}, (0, _defineProperty2.default)(_cn, "".concat(RC, "_").concat(variant), variant), (0, _defineProperty2.default)(_cn, 'button_icon-right', isIconRight), _cn)),
     onClick: onClick,
     disabled: disabled
   }, !noRenderIcon && icon, label && /*#__PURE__*/_react.default.createElement("div", {

package/dist/Atomic/UI/Button/Button.scss

@@ -19,57 +19,57 @@
     pointer-events: none;
   }
 
-    &_dark-outline {
+  &_dark-outline {
         border: 1px solid #bac2c9;
         color: #1E1E2DFF;
 
         &:hover {
             background-color: #F2F2F8FF;
         }
-    }
+  }
 
-    &_primary {
+  &_primary {
         border: 1px solid #6B81DDFF;
         background-color: #6B81DDFF;
         color: #fff;
         &:hover {
             filter: brightness(1.1);
         }
-    }
+  }
 
-    &_secondary {
+  &_secondary {
         border: 1px solid #BAC2C9FF;
         background-color: #BAC2C9FF;
         color: #fff;
         &:hover {
             filter: brightness(1.1);
         }
-    }
+  }
 
-    &_ellipse-apply{
-      padding: 8px 16px;
-      border-radius: 40px;
-      background: #1F7499;
-      font-family: 'Sarabun';
-      font-style: normal;
-      font-weight: 500;
-      font-size: 16px;
-      line-height: 24px;
-      letter-spacing: 0.1px;
-      color: #FFFFFF;
-    }
+  &_ellipse-apply{
+    padding: 8px 16px;
+    border-radius: 40px;
+    background: #1F7499;
+    font-family: 'Sarabun';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 24px;
+    letter-spacing: 0.1px;
+    color: #FFFFFF;
+  }
 
-    &_ellipse-cancel{
-      padding: 8px 18px;
-      border-radius: 32px;
-      font-family: Sarabun;
-      font-style: normal;
-      font-weight: normal;
-      font-size: 14px;
-      line-height: 20px;
-      letter-spacing: 0.2px;
-      color: #1F7499;
-    }
+  &_ellipse-cancel{
+    padding: 8px 18px;
+    border-radius: 32px;
+    font-family: Sarabun;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: 0.2px;
+    color: #1F7499;
+  }
 
   &_link {
     color: #6b81dd;
@@ -92,7 +92,10 @@
 
   &__text {
     width: 100%;
-    text-align: center;
+    margin-left: 5px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 
   &:active {
@@ -100,9 +103,20 @@
   }
 
   &__icon {
-    width: 20px;
+    width: auto;
     height: 25px;
-    margin-right: 5px;
     min-width: 15px;
   }
+
+  &_icon-right {
+    .button__text {
+      order: 1;
+      margin-left: 0;
+      margin-right: 5px;
+    }
+
+    svg {
+      order: 2
+    }
+  }
 }

package/dist/Atomic/UI/Button/Button.stories.js

@@ -57,5 +57,6 @@ ButtonTemplate.args = {
     return null;
   },
   label: 'Button',
-  icon: /*#__PURE__*/_react.default.createElement(_reactFeather.Check, null)
+  icon: /*#__PURE__*/_react.default.createElement(_reactFeather.Check, null),
+  isIconRight: true
 };

package/dist/Atomic/UI/Status/Status.js

@@ -14,7 +14,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 require("./Status.scss");
 
 var Status = function Status(_ref) {
-  var label = _ref.label,
+  var value = _ref.value,
+      label = _ref.label,
       status = _ref.status,
       disabled = _ref.disabled,
       type = _ref.type,
@@ -25,6 +26,8 @@ var Status = function Status(_ref) {
       className = _ref.className,
       noBackground = _ref.noBackground,
       children = _ref.children;
+  var text = children && typeof children === 'string' ? children : value || label || status;
+  var formatedLabel = (text === null || text === void 0 ? void 0 : text[0].toUpperCase()) + (text === null || text === void 0 ? void 0 : text.slice(1));
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)({
       disabled: disabled
@@ -45,7 +48,7 @@ var Status = function Status(_ref) {
     }, {
       'color--gray-gull': noBackground && status === 'pause' && !className
     })
-  }, children || label));
+  }, formatedLabel));
 };
 
 var _default = Status;

package/dist/Atomic/UI/Status/Status.scss

@@ -1,4 +1,4 @@
-@import "~anme/scss/anme-vars";
+@import "../../../scss/vars";
 
 .status {
   display: inline-flex;
@@ -29,10 +29,12 @@
     background-color: #9aa0b9;
   }
 
+  &--review,
   &--pause,
   &--reject,
   &--No,
-  &--declined {
+  &--declined,
+  &--blocked {
     color: $color--froly;
     background-color: #fce2e8;
   }
@@ -48,7 +50,10 @@
     background-color: #e2e6f8;
   }
 
+  &--pending,
+  &--primary,
   &--warning {
+    color: #f59a2f;
     background-color: $color--sandy-beach;
   }
 

package/dist/Functions/fieldValueFormatters.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.filterNumeric = exports.filterPhone = exports.filterToLimitLength = exports.filterFloat = exports.formatToCutOffDotAtTheEnd = exports.formatToRemoveComa = exports.formatToLetters = exports.formatToTwoDigitAfterDot = exports.formatToAddBitDepthPoints = exports.formatOnlyNumbers = void 0;
+exports.filterNumeric = exports.filterPhone = exports.filterToLimitLength = exports.filterFloat = exports.formatToCutOffDotAtTheEnd = exports.formatToRemoveComa = exports.formatToOnlyASCIICodeText = exports.formatToLetters = exports.formatToTwoDigitAfterDot = exports.formatToAddBitDepthPoints = exports.formatOnlyNumbers = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
@@ -52,10 +52,17 @@ var formatToLetters = function formatToLetters(value) {
   } else {
     return value.toString().replace(/[^a-z]/gi, '');
   }
-};
+}; // eslint-disable-next-line no-control-regex
+
 
 exports.formatToLetters = formatToLetters;
 
+var formatToOnlyASCIICodeText = function formatToOnlyASCIICodeText(text) {
+  return text === null || text === void 0 ? void 0 : text.replace(/[^\x00-\x7F]+/g, '');
+};
+
+exports.formatToOnlyASCIICodeText = formatToOnlyASCIICodeText;
+
 var formatToRemoveComa = function formatToRemoveComa(value) {
   return value.toString().replace(/\,/g, '');
 };

package/dist/Molecular/FormElements/FormElement.js

@@ -25,10 +25,10 @@ var FormElement = function FormElement(_ref) {
       className = _ref.className,
       hint = _ref.hint,
       isLabelBolt = _ref.isLabelBolt,
-      isNolabel = _ref.isNolabel;
+      isNoLabel = _ref.isNoLabel;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(className, RC)
-  }, label && !isNolabel && /*#__PURE__*/_react.default.createElement(_Label.default, {
+  }, label && !isNoLabel && /*#__PURE__*/_react.default.createElement(_Label.default, {
     className: "".concat(RC, "__label"),
     label: label,
     hint: hint,

package/dist/Molecular/FormElements/FormElement.scss

@@ -1,3 +1,7 @@
+.form-element {
+  position: relative;
+}
+
 .form-element__error {
   margin-top: 2px;
   margin-left: 1px;

package/dist/scss/_mixins.scss

@@ -0,0 +1,2 @@
+@import "anme/scss/anme-mixins-media";
+@import "anme/scss/anme-mixins";

package/dist/scss/_vars.scss

@@ -1,5 +1,8 @@
-/* THEME COLORS*/
 @use "sass:math";
+@import "anme/scss/anme-vars";
+// @import "../../node_modules/anme/scss/anme-vars";
+
+/* THEME COLORS*/
 
 $color--secondary: #f06d8d;
 $color--primary: #6b81dd;

package/dist/scss/main.scss

@@ -1,5 +1,6 @@
 @import './fonts';
-@import '~anme/scss/styles.scss';
+@import 'anme/scss/styles.scss';
+// @import '../../node_modules/anme/scss/anme-vars';
 
 body {
     font-family: 'Roboto', sans-serif;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intelicoreact",
-  "version": "0.1.3",
+  "version": "0.1.7",
   "description": "add postfix in dropdown",
   "main": "dist/index.js",
   "files": ["dist/*"],
@@ -23,6 +23,6 @@
     "@babel/core": "^7.15.5",
     "@babel/polyfill": "^7.12.1",
     "@babel/preset-env": "^7.15.6",
-    "anme": "^1.0.0"
+    "anme": "^1.0.1"
   }
 }