intelicoreact 0.0.6 → 0.0.7

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

@@ -19,7 +19,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _ = _interopRequireDefault(require("."));
+var _InputDateRange = _interopRequireDefault(require("./InputDateRange"));
 
 var _Table = _interopRequireDefault(require("../Table/Table"));
 
@@ -36,7 +36,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 global.lng = 'en';
 var _default = {
   title: 'Form Elements/InputDateRange',
-  component: _.default,
+  component: _InputDateRange.default,
   argTypes: {// status: {
     //   control: {
     //     type: 'select',
@@ -198,11 +198,12 @@ var Template = function Template(args) {
         type: 'delete'
       }]
     });
-  }); // return <InputDateRange {...restOfProps} value={value} onChange={setValue} />;
+  }); // useEffect(() => console.log(value), [value]);
+  // return <InputDateRange {...restOfProps} value={value} onChange={setValue} />;
 
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
     className: "mb20"
-  }, /*#__PURE__*/_react.default.createElement(_.default, (0, _extends2.default)({}, restOfProps, {
+  }, /*#__PURE__*/_react.default.createElement(_InputDateRange.default, (0, _extends2.default)({}, restOfProps, {
     value: value,
     onChange: setValue
   }))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Table.default, {
@@ -216,6 +217,10 @@ var InputDateRangeTemplate = Template.bind({});
 exports.InputDateRangeTemplate = InputDateRangeTemplate;
 InputDateRangeTemplate.args = {
   txt: {},
+  buttonsTypes: {
+    // apply: 'ellipse-apply',
+    cancel: 'bark-outline'
+  },
   label: 'Date Range',
   dateRange: {
     intervalKey: 'today'
@@ -231,7 +236,8 @@ InputDateRangeTemplate.args = {
   isIntervalsHidden: false,
   isCompareHidden: true,
   hideArrows: false,
-  isOptionsRight: false // limitRange,
+  isOptionsRight: false,
+  isShortWeekNames: false // limitRange,
   // isUseAbs,
   // absTooltip
 

package/dist/Atomic/FormElements/InputDateRange/components/Datepicker.js

@@ -19,6 +19,8 @@ var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _dependencies = require("../dependencies");
+
 var _Dropdown = _interopRequireDefault(require("../../Dropdown/Dropdown"));
 
 var _Input = _interopRequireDefault(require("../../Input/Input"));
@@ -52,6 +54,8 @@ var handleDateInputOnChange = function handleDateInputOnChange(value) {
 var Datepicker = function Datepicker(props) {
   var txt = props.txt,
       className = props.className,
+      _props$buttonsTypes = props.buttonsTypes,
+      buttonsTypes = _props$buttonsTypes === void 0 ? {} : _props$buttonsTypes,
       _props$values = props.values,
       values = _props$values === void 0 ? {} : _props$values,
       onChange = props.onChange,
@@ -60,7 +64,10 @@ var Datepicker = function Datepicker(props) {
       getSelectedMode = props.getSelectedMode,
       onChangeInterval = props.onChangeInterval,
       isCompareHidden = props.isCompareHidden,
-      limitRange = props.limitRange;
+      limitRange = props.limitRange,
+      handleItemClick = props.handleItemClick,
+      setActiveInterval = props.setActiveInterval,
+      isShortWeekNames = props.isShortWeekNames;
   var _values$start = values.start,
       start = _values$start === void 0 ? null : _values$start,
       _values$end = values.end,
@@ -142,6 +149,14 @@ var Datepicker = function Datepicker(props) {
   var isPreviousPeriodShowed = (0, _react.useMemo)(function () {
     return isCompare && !isCompareHidden && startDate && endDate;
   }, [startDate, endDate, isCompare]);
+
+  var setInterval = function setInterval() {
+    setActiveInterval((0, _dependencies.getActualDateRange)({
+      start: startDate,
+      end: endDate
+    }).intervalKey);
+  };
+
   var prevEndHour = (0, _react.useRef)(endHour);
 
   var getStartHourItems = function getStartHourItems() {
@@ -209,6 +224,8 @@ var Datepicker = function Datepicker(props) {
       setDate1((0, _momentTimezone.default)(startDate));
       setDate2((0, _momentTimezone.default)(endDate));
     }
+
+    setInterval();
   }, [startDate, endDate]);
   (0, _react.useEffect)(function () {
     if ((0, _momentTimezone.default)(date1).isSameOrAfter((0, _momentTimezone.default)(date2), 'month')) {
@@ -286,10 +303,10 @@ var Datepicker = function Datepicker(props) {
       onClick: function onClick() {
         return onCancel();
       },
-      variant: "ellipse-cancel"
+      variant: buttonsTypes === null || buttonsTypes === void 0 ? void 0 : buttonsTypes.cancel
     }, (txt === null || txt === void 0 ? void 0 : (_txt$buttons = txt.buttons) === null || _txt$buttons === void 0 ? void 0 : _txt$buttons.cancel) || 'cancel'), /*#__PURE__*/_react.default.createElement(_Button.default, {
       className: "date-picker__button",
-      variant: "ellipse-apply",
+      variant: buttonsTypes === null || buttonsTypes === void 0 ? void 0 : buttonsTypes.apply,
       disabled: !startDate || !endDate,
       onClick: function onClick() {
         return onChange({
@@ -432,6 +449,8 @@ var Datepicker = function Datepicker(props) {
     className: "date-picker__previous-period"
   }, renderPreviousPeriod())), /*#__PURE__*/_react.default.createElement("div", {
     className: "date-picker__calendars"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "date-picker__calendars-wrapper"
   }, /*#__PURE__*/_react.default.createElement(_RangeCalendar.default, {
     className: "date-picker__calendar",
     date: date1,
@@ -443,7 +462,8 @@ var Datepicker = function Datepicker(props) {
     endPrevDate: endPrevDate,
     onClick: handleClick,
     onHover: handleHover,
-    limitRange: limitRange
+    limitRange: limitRange,
+    isShortWeekNames: isShortWeekNames
   }), /*#__PURE__*/_react.default.createElement(_RangeCalendar.default, {
     className: "date-picker__calendar",
     date: date2,
@@ -454,8 +474,9 @@ var Datepicker = function Datepicker(props) {
     startPrevDate: startPrevDate,
     endPrevDate: endPrevDate,
     onClick: handleClick,
-    onHover: handleHover
-  })), /*#__PURE__*/_react.default.createElement("div", {
+    onHover: handleHover,
+    isShortWeekNames: isShortWeekNames
+  }))), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('date-picker__footer', {
       'date-picker__footer_once-element': isCompareHidden
     })

package/dist/Atomic/FormElements/InputDateRange/components/OpenedPart.js

@@ -21,7 +21,7 @@ var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _ = require("..");
+var _dependencies = require("../dependencies");
 
 var _SelectItem = _interopRequireDefault(require("./SelectItem"));
 
@@ -37,6 +37,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 var OpenedPart = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var txt = props.txt,
+      buttonsTypes = props.buttonsTypes,
       actualValues = props.actualValues,
       _props$onChange = props.onChange,
       _onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
@@ -54,13 +55,18 @@ var OpenedPart = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       setCurrent = props.setCurrent,
       isCompare = props.isCompare,
       setIsCompare = props.setIsCompare,
-      toggleOff = props.toggleOff; // const [styles, setStyles] = useState({});
+      toggleOff = props.toggleOff,
+      isShortWeekNames = props.isShortWeekNames;
 
+  var items = isCompact ? (0, _toConsumableArray2.default)(Object.keys(_dependencies.INTERVALS)) : [].concat((0, _toConsumableArray2.default)(Object.keys(_dependencies.INTERVALS)), [_dependencies.CUSTOM_INTERVAL_KEY]);
 
-  var items = isCompact ? (0, _toConsumableArray2.default)(Object.keys(_.INTERVALS)) : [].concat((0, _toConsumableArray2.default)(Object.keys(_.INTERVALS)), [_.CUSTOM_INTERVAL_KEY]);
+  var _useState = (0, _react.useState)(actualValues.intervalKey),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      activeInterval = _useState2[0],
+      setActiveInterval = _useState2[1];
 
   var handleItemClick = function handleItemClick(item) {
-    if (item !== _.CUSTOM_INTERVAL_KEY) {
+    if (item !== _dependencies.CUSTOM_INTERVAL_KEY) {
       _onChange({
         intervalKey: item,
         compare: isCompare
@@ -79,10 +85,10 @@ var OpenedPart = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
         end = newValues.end;
 
     if ((0, _momentTimezone.default)(start).get('hour') !== 0 || (0, _momentTimezone.default)(end).get('hour') !== 0) {
-      return _.CUSTOM_INTERVAL_KEY;
+      return _dependencies.CUSTOM_INTERVAL_KEY;
     }
 
-    for (var _i = 0, _Object$entries = Object.entries(_.INTERVALS); _i < _Object$entries.length; _i++) {
+    for (var _i = 0, _Object$entries = Object.entries(_dependencies.INTERVALS); _i < _Object$entries.length; _i++) {
       var _Object$entries$_i = (0, _slicedToArray2.default)(_Object$entries[_i], 2),
           key = _Object$entries$_i[0],
           interval = _Object$entries$_i[1];
@@ -92,7 +98,7 @@ var OpenedPart = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       }
     }
 
-    return _.CUSTOM_INTERVAL_KEY;
+    return _dependencies.CUSTOM_INTERVAL_KEY;
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -113,15 +119,16 @@ var OpenedPart = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     return /*#__PURE__*/_react.default.createElement(_SelectItem.default, {
       key: index,
       item: item,
-      label: (txt === null || txt === void 0 ? void 0 : txt.labels) && (txt === null || txt === void 0 ? void 0 : txt.labels[item]) || ((_intervals$item = _.INTERVALS[item]) === null || _intervals$item === void 0 ? void 0 : _intervals$item.label) || item,
-      isActive: actualValues.intervalKey === item,
+      label: (txt === null || txt === void 0 ? void 0 : txt.labels) && (txt === null || txt === void 0 ? void 0 : txt.labels[item]) || ((_intervals$item = _dependencies.INTERVALS[item]) === null || _intervals$item === void 0 ? void 0 : _intervals$item.label) || (item === _dependencies.CUSTOM_INTERVAL_KEY ? _dependencies.CUSTOM_INTERVAL_KEY_TEXT : item),
+      isActive: activeInterval === item,
       onItemClick: function onItemClick() {
         return handleItemClick(item.value || item);
       },
-      disabled: item === _.CUSTOM_INTERVAL_KEY
+      disabled: item === _dependencies.CUSTOM_INTERVAL_KEY
     });
   })), !isCompact && /*#__PURE__*/_react.default.createElement(_Datepicker.default, {
     className: (0, _classnames.default)('opened-part__date-picker'),
+    buttonsTypes: buttonsTypes,
     values: actualValues,
     onChange: function onChange(data) {
       _onChange(_objectSpread({
@@ -139,7 +146,9 @@ var OpenedPart = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     },
     onCancel: toggleOff,
     isCompareHidden: isCompareHidden,
-    limitRange: limitRange
+    limitRange: limitRange,
+    setActiveInterval: setActiveInterval,
+    isShortWeekNames: isShortWeekNames
   })));
 });
 

package/dist/Atomic/FormElements/InputDateRange/components/SelectItem.js

@@ -11,8 +11,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _check = _interopRequireDefault(require("../../../../../../assets/icons/check.svg"));
-
 var SelectItem = function SelectItem(_ref) {
   var item = _ref.item,
       label = _ref.label,
@@ -28,10 +26,20 @@ var SelectItem = function SelectItem(_ref) {
     onClick: onItemClick,
     onMouseEnter: onMouseEnter,
     "data-item": item
-  }, isActive && /*#__PURE__*/_react.default.createElement("object", {
-    data: _check.default,
-    className: (0, _classnames.default)('opened-part__intervals-item-icon-active')
-  }), label);
+  }, isActive && /*#__PURE__*/_react.default.createElement("svg", {
+    className: (0, _classnames.default)('opened-part__intervals-item-icon-active'),
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M13.3333 4L5.99999 11.3333L2.66666 8",
+    stroke: "black",
+    "stroke-width": "1.33333",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  })), label);
 };
 
 var _default = SelectItem;

package/dist/Atomic/FormElements/InputDateRange/{index.js → dependencies.js}

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.getActualDateRange = exports.CUSTOM_INTERVAL_KEY_TEXT = exports.CUSTOM_INTERVAL_KEY = exports.ALL_TIME_KEY = exports.INTERVALS = exports.useToggle = exports.useClickOutside = void 0;
+exports.getActualDateRange = exports.CUSTOM_INTERVAL_KEY_TEXT = exports.CUSTOM_INTERVAL_KEY = exports.ALL_TIME_KEY = exports.INTERVALS = exports.useToggle = exports.useClickOutside = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
@@ -15,7 +15,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
 
-var _InputDateRange = _interopRequireDefault(require("./components/InputDateRange"));
+var _InputDateRange = _interopRequireDefault(require("./InputDateRange"));
 
 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); }
 
@@ -202,11 +202,9 @@ var getActualDateRange = function getActualDateRange(inputDateRange) {
   var _INTERVALS$inputDateR, _INTERVALS$inputDateR2, _INTERVALS$inputDateR3, _INTERVALS$inputDateR4;
 
   var actualIntervalKey = function () {
-    if (inputDateRange.intervalKey && inputDateRange.intervalKey !== CUSTOM_INTERVAL_KEY) {
+    if (inputDateRange.intervalKey && Object.keys(INTERVALS).includes(inputDateRange.intervalKey)) {
       return inputDateRange.intervalKey;
-    }
-
-    if (inputDateRange.start && inputDateRange.end) {
+    } else if (inputDateRange.start && inputDateRange.end) {
       for (var _i = 0, _Object$entries = Object.entries(INTERVALS); _i < _Object$entries.length; _i++) {
         var _Object$entries$_i = (0, _slicedToArray2.default)(_Object$entries[_i], 2),
             key = _Object$entries$_i[0],
@@ -216,16 +214,26 @@ var getActualDateRange = function getActualDateRange(inputDateRange) {
           return key;
         }
       }
+
+      return CUSTOM_INTERVAL_KEY;
     }
 
-    return null;
+    return ALL_TIME_KEY;
   }();
 
+  if (actualIntervalKey === ALL_TIME_KEY) return {
+    intervalKey: ALL_TIME_KEY,
+    start: null,
+    end: null,
+    compare: inputDateRange.compare,
+    startPrevDate: null,
+    endPrevDate: null
+  };
   var actualValues = {
     // intervalKey: inputDateRange.intervalKey || customIntervalKey,
     intervalKey: actualIntervalKey || CUSTOM_INTERVAL_KEY,
-    start: inputDateRange.intervalKey === CUSTOM_INTERVAL_KEY ? inputDateRange === null || inputDateRange === void 0 ? void 0 : inputDateRange.start : (_INTERVALS$inputDateR = INTERVALS[inputDateRange.intervalKey]) === null || _INTERVALS$inputDateR === void 0 ? void 0 : (_INTERVALS$inputDateR2 = _INTERVALS$inputDateR.start()) === null || _INTERVALS$inputDateR2 === void 0 ? void 0 : _INTERVALS$inputDateR2.toDate(),
-    end: inputDateRange.intervalKey === CUSTOM_INTERVAL_KEY ? inputDateRange === null || inputDateRange === void 0 ? void 0 : inputDateRange.end : (_INTERVALS$inputDateR3 = INTERVALS[inputDateRange.intervalKey]) === null || _INTERVALS$inputDateR3 === void 0 ? void 0 : (_INTERVALS$inputDateR4 = _INTERVALS$inputDateR3.end()) === null || _INTERVALS$inputDateR4 === void 0 ? void 0 : _INTERVALS$inputDateR4.toDate(),
+    start: inputDateRange.intervalKey === CUSTOM_INTERVAL_KEY ? inputDateRange === null || inputDateRange === void 0 ? void 0 : inputDateRange.start : (_INTERVALS$inputDateR = INTERVALS[inputDateRange.intervalKey]) === null || _INTERVALS$inputDateR === void 0 ? void 0 : (_INTERVALS$inputDateR2 = _INTERVALS$inputDateR.start()) === null || _INTERVALS$inputDateR2 === void 0 ? void 0 : _INTERVALS$inputDateR2.format('YYYY-MM-DDTHH:mm'),
+    end: inputDateRange.intervalKey === CUSTOM_INTERVAL_KEY ? inputDateRange === null || inputDateRange === void 0 ? void 0 : inputDateRange.end : (_INTERVALS$inputDateR3 = INTERVALS[inputDateRange.intervalKey]) === null || _INTERVALS$inputDateR3 === void 0 ? void 0 : (_INTERVALS$inputDateR4 = _INTERVALS$inputDateR3.end()) === null || _INTERVALS$inputDateR4 === void 0 ? void 0 : _INTERVALS$inputDateR4.format('YYYY-MM-DDTHH:mm'),
     compare: inputDateRange.compare
   };
 
@@ -238,11 +246,4 @@ var getActualDateRange = function getActualDateRange(inputDateRange) {
   return actualValues;
 };
 
-exports.getActualDateRange = getActualDateRange;
-
-var component = function component(props) {
-  return /*#__PURE__*/_react.default.createElement(_InputDateRange.default, props);
-};
-
-var _default = component;
-exports.default = _default;
+exports.getActualDateRange = getActualDateRange;

package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.js

@@ -43,7 +43,8 @@ var RangeCalendar = function RangeCalendar(props) {
       onHover = _props$onHover === void 0 ? function () {} : _props$onHover,
       startPrevDate = props.startPrevDate,
       endPrevDate = props.endPrevDate,
-      limitRange = props.limitRange;
+      limitRange = props.limitRange,
+      isShortWeekNames = props.isShortWeekNames;
 
   var _useState = (0, _react.useState)({}),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -125,6 +126,10 @@ var RangeCalendar = function RangeCalendar(props) {
     setDate((0, _momentTimezone.default)(date).add(1, 'month').toDate());
   };
 
+  var getFormatedWeekName = function getFormatedWeekName(input) {
+    return isShortWeekNames ? input.charAt(0) : input;
+  };
+
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('range-calendar', className)
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -147,7 +152,7 @@ var RangeCalendar = function RangeCalendar(props) {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: "day-of-week_".concat(dayOfWeek),
       className: "range-calendar__day range-calendar__day--title"
-    }, (0, _momentTimezone.default)().weekday(dayOfWeek).format('dd').charAt(0));
+    }, getFormatedWeekName((0, _momentTimezone.default)().weekday(dayOfWeek).format('dd')));
   })), Object.keys(days).map(function (week, index) {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: "week_".concat(index),

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

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

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

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

package/dist/Atomic/MainMenu/MainMenu.scss

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

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

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

package/dist/Atomic/UI/Arrow/Arrow.scss

@@ -1,9 +1,6 @@
 .arrow {
   width: 24px;
   height: 24px;
-  color: #1F7499;
-  // cursor: pointer;
-  // border: 1px solid #EAF2FF;
 
   &_disabled {
     pointer-events: none;

package/dist/Atomic/UI/Calendar/Calendar.js

@@ -34,7 +34,8 @@ function _default(props) {
       allowPrev = _props$allowPrev === void 0 ? true : _props$allowPrev,
       _props$allowNext = props.allowNext,
       allowNext = _props$allowNext === void 0 ? true : _props$allowNext,
-      params = props.params;
+      params = props.params,
+      className = props.className;
   var minDate = params.minDate,
       maxDate = params.maxDate;
 
@@ -112,7 +113,7 @@ function _default(props) {
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "calendar"
+    className: "calendar ".concat(className)
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "calendar-header"
   }, /*#__PURE__*/_react.default.createElement("div", {

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

@@ -13,7 +13,7 @@ var _Calendar = _interopRequireDefault(require("./Calendar"));
 
 global.lng = 'en';
 var _default = {
-  title: 'UI/Calendar',
+  title: 'Calendar',
   component: _Calendar.default
 };
 exports.default = _default;
@@ -33,5 +33,6 @@ CalendarTemplate.args = {
   params: {},
   setDate: function setDate() {
     return null;
-  }
+  },
+  className: ''
 };

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

@@ -1,4 +1,4 @@
-@import "../../../scss/anme/anme-vars";
+@import "~anme/scss/anme-vars";
 
 .status {
   display: inline-flex;