intelicoreact 1.3.21 → 1.3.23

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

@@ -1,56 +1,47 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 require("./Button.scss");
-
-var RC = 'button';
-
-var Button = function Button(_ref) {
-  var _tabIndex$toString, _cn;
-
-  var label = _ref.label,
-      onClick = _ref.onClick,
-      disabled = _ref.disabled,
-      icon = _ref.icon,
-      className = _ref.className,
-      children = _ref.children,
-      style = _ref.style,
-      noIcon = _ref.noIcon,
-      isIconRight = _ref.isIconRight,
-      _ref$testId = _ref.testId,
-      testId = _ref$testId === void 0 ? '' : _ref$testId,
-      _ref$tabIndex = _ref.tabIndex,
-      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
-      _ref$isTextEllipsis = _ref.isTextEllipsis,
-      isTextEllipsis = _ref$isTextEllipsis === void 0 ? false : _ref$isTextEllipsis;
-  var noRenderIcon = noIcon || variant === 'ellipse-apply' || variant === 'ellipse-cancel';
+const RC = "button";
+const Button = _ref => {
+  var _tabIndex$toString;
+  let {
+    label,
+    onClick,
+    disabled,
+    icon,
+    className,
+    children,
+    style,
+    noIcon,
+    isIconRight,
+    testId = "",
+    tabIndex = 0,
+    variant = "primary",
+    isTextEllipsis = false
+  } = _ref;
+  const noRenderIcon = noIcon || variant === "ellipse-apply" || variant === "ellipse-cancel";
   return /*#__PURE__*/_react.default.createElement("button", {
-    "data-testid": "button".concat(testId && "--".concat(testId), "--").concat((label === null || label === void 0 ? void 0 : label.replace(/\s/g, '-')) || variant),
-    tabIndex: tabIndex === null || tabIndex === void 0 ? void 0 : (_tabIndex$toString = tabIndex.toString) === null || _tabIndex$toString === void 0 ? void 0 : _tabIndex$toString.call(tabIndex),
+    "data-testid": "button".concat(testId && "--".concat(testId), "--").concat((label === null || label === void 0 ? void 0 : label.replace(/\s/g, "-")) || variant),
+    tabIndex: tabIndex === null || tabIndex === void 0 || (_tabIndex$toString = tabIndex.toString) === null || _tabIndex$toString === void 0 ? void 0 : _tabIndex$toString.call(tabIndex),
     style: style,
-    className: (0, _classnames.default)(RC, (_cn = {}, (0, _defineProperty2.default)(_cn, "".concat(RC, "_").concat(variant), variant), (0, _defineProperty2.default)(_cn, 'button_icon-left', icon && !isIconRight), (0, _defineProperty2.default)(_cn, 'button_icon-right', icon && isIconRight), _cn), className),
+    className: (0, _classnames.default)(RC, {
+      ["".concat(RC, "_").concat(variant)]: variant,
+      "button_icon-left": icon && !isIconRight,
+      "button_icon-right": icon && isIconRight
+    }, className),
     onClick: onClick,
     disabled: disabled
   }, !noRenderIcon && icon, label && /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)('button__text', {
-      'text-ellipsis': isTextEllipsis
+    className: (0, _classnames.default)("button__text", {
+      "text-ellipsis": isTextEllipsis
     })
   }, label), !label && children ? children : null);
 };
-
-var _default = Button;
-exports.default = _default;
+var _default = exports.default = Button;

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

@@ -1,13 +1,16 @@
 .button {
   position: relative;
+
   display: inline-flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
 
   box-sizing: border-box;
   height: 28px;
   padding: 3px 10px;
 
+  font-size: 13px;
+  line-height: 20px;
   cursor: pointer;
   user-select: none;
   text-align: center;
@@ -16,9 +19,6 @@
   border-radius: 3px;
   box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
 
-  font-size: 13px;
-  line-height: 20px;
-
   &:disabled {
     pointer-events: none;
 
@@ -26,9 +26,9 @@
   }
 
   &_warning {
-    color: #FFF;
-    border: 1px solid #F06D8D;
-    background-color: #F06D8D;
+    color: #fff;
+    border: 1px solid #f06d8d;
+    background-color: #f06d8d;
 
     &:hover {
       filter: brightness(1.1);
@@ -36,18 +36,18 @@
   }
 
   &_dark-outline {
-    color: #1E1E2DFF;
-    border: 1px solid #BAC2C9;
+    color: #1e1e2dff;
+    border: 1px solid #bac2c9;
 
     &:hover {
-      background-color: #F2F2F8FF;
+      background-color: #f2f2f8ff;
     }
   }
 
   &_primary {
-    color: #FFF;
-    border: 1px solid #6B81DDFF;
-    background-color: #6B81DDFF;
+    color: #fff;
+    border: 1px solid #6b81ddff;
+    background-color: #6b81ddff;
 
     &:hover {
       filter: brightness(1.1);
@@ -55,9 +55,9 @@
   }
 
   &_secondary {
-    color: #FFF;
-    border: 1px solid #BAC2C9FF;
-    background-color: #BAC2C9FF;
+    color: #fff;
+    border: 1px solid #bac2c9ff;
+    background-color: #bac2c9ff;
 
     &:hover {
       filter: brightness(1.1);
@@ -67,36 +67,34 @@
   &_ellipse-apply {
     padding: 8px 16px;
 
-    letter-spacing: 0.1px;
-
-    color: #FFF;
-    border-radius: 40px;
-    background: #1F7499;
-
     font-family: Sarabun, sans-serif;
     font-size: 16px;
     font-weight: 500;
     font-style: normal;
     line-height: 24px;
+    letter-spacing: 0.1px;
+
+    color: #fff;
+    border-radius: 40px;
+    background: #1f7499;
   }
 
   &_ellipse-cancel {
     padding: 8px 18px;
 
-    letter-spacing: 0.2px;
-
-    color: #1F7499;
-    border-radius: 32px;
-
     font-family: Sarabun, sans-serif;
     font-size: 14px;
     font-weight: normal;
     font-style: normal;
     line-height: 20px;
+    letter-spacing: 0.2px;
+
+    color: #1f7499;
+    border-radius: 32px;
   }
 
   &_link {
-    color: #6B81DD;
+    color: #6b81dd;
     box-shadow: none;
 
     svg {
@@ -105,9 +103,9 @@
   }
 
   &_success {
-    color: #FFF;
-    border: 1px solid #7AC48C;
-    background-color: #7AC48C;
+    color: #fff;
+    border: 1px solid #7ac48c;
+    background-color: #7ac48c;
 
     &:hover {
       filter: brightness(1.1);
@@ -116,8 +114,8 @@
 
   &__text {
     display: flex;
-    align-items: center;
     justify-content: center;
+    align-items: center;
 
     width: 100%;
 
@@ -155,9 +153,11 @@
 }
 
 .text-ellipsis {
-  width: 100%;
   display: block;
   overflow: hidden;
-  text-overflow: ellipsis;
+
+  width: 100%;
+
   white-space: nowrap;
+  text-overflow: ellipsis;
 }

package/dist/Atomic/UI/ButtonsBar/ButtonsBar.js

@@ -1,45 +1,38 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
-var _reactRouterDom = require("react-router-dom");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
+var _reactRouterDom = require("react-router-dom");
 var _Button = _interopRequireDefault(require("../Button/Button"));
-
 require("./ButtonsBar.scss");
-
-var ButtonsBar = function ButtonsBar(_ref) {
-  var className = _ref.className,
-      rejectBtnLabel = _ref.rejectBtnLabel,
-      rejectBtnIcon = _ref.rejectBtnIcon,
-      isRejectBtnIconRight = _ref.isRejectBtnIconRight,
-      rejectBtnVariant = _ref.rejectBtnVariant,
-      rejectBtnClass = _ref.rejectBtnClass,
-      isRejectBtnDisabled = _ref.isRejectBtnDisabled,
-      rejectLink = _ref.rejectLink,
-      onReject = _ref.onReject,
-      confirmBtnLabel = _ref.confirmBtnLabel,
-      confirmBtnIcon = _ref.confirmBtnIcon,
-      isConfirmBtnIconRight = _ref.isConfirmBtnIconRight,
-      confirmBtnVariant = _ref.confirmBtnVariant,
-      confirmBtnClass = _ref.confirmBtnClass,
-      isConfirmBtnDisabled = _ref.isConfirmBtnDisabled,
-      onConfirm = _ref.onConfirm,
-      _ref$testIdFirstBtn = _ref.testIdFirstBtn,
-      testIdFirstBtn = _ref$testIdFirstBtn === void 0 ? 'test-btn-bar-first' : _ref$testIdFirstBtn,
-      _ref$testIdSecondBtn = _ref.testIdSecondBtn,
-      testIdSecondBtn = _ref$testIdSecondBtn === void 0 ? 'test-btn-bar-second' : _ref$testIdSecondBtn;
+const ButtonsBar = _ref => {
+  let {
+    className,
+    rejectBtnLabel,
+    rejectBtnIcon,
+    isRejectBtnIconRight,
+    rejectBtnVariant,
+    rejectBtnClass,
+    isRejectBtnDisabled,
+    rejectLink,
+    onReject,
+    confirmBtnLabel,
+    confirmBtnIcon,
+    isConfirmBtnIconRight,
+    confirmBtnVariant,
+    confirmBtnClass,
+    isConfirmBtnDisabled,
+    onConfirm,
+    testIdFirstBtn = "test-btn-bar-first",
+    testIdSecondBtn = "test-btn-bar-second"
+  } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)('button-bar', className)
+    className: (0, _classnames.default)("button-bar", className)
   }, rejectLink ? /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
     className: "text-decoration-none",
     to: rejectLink
@@ -76,6 +69,4 @@ var ButtonsBar = function ButtonsBar(_ref) {
     className: confirmBtnClass
   }));
 };
-
-var _default = ButtonsBar;
-exports.default = _default;
+var _default = exports.default = ButtonsBar;

package/dist/Atomic/UI/ButtonsBar/ButtonsBar.scss

@@ -1,7 +1,7 @@
 .button-bar {
   display: flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
 
   width: 100%;
   margin: 15px;

package/dist/Atomic/UI/Chart/Chart.js

@@ -1,119 +1,84 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _chart = require("chart.js");
-
 var _helpers = require("chart.js/helpers");
-
+var _classnames = _interopRequireDefault(require("classnames"));
 var ChartComponents = _interopRequireWildcard(require("react-chartjs-2"));
-
-var _utils = require("./partial/utils");
-
+var _utils = require("../../../Functions/utils");
 var _Chart = require("./partial/Chart.constants");
-
-var _utils2 = require("../../../Functions/utils");
-
 var _ChartTypeSwitcherIcon = _interopRequireDefault(require("./partial/ChartTypeSwitcherIcon/ChartTypeSwitcherIcon"));
-
+var _utils2 = require("./partial/utils");
 require("./Chart.scss");
-
-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; }
-
-var RC = 'chart';
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const RC = "chart";
 _chart.Chart.register(_chart.CategoryScale, _chart.LinearScale, _chart.BarElement, _chart.PointElement, _chart.LineElement, _chart.Filler, _chart.Tooltip);
-
-var Chart = function Chart(_ref) {
+const Chart = _ref => {
   var _modifyOptions$toStri;
-
-  var className = _ref.className,
-      initialModel = _ref.initialModel,
-      modelsForSwitch = _ref.modelsForSwitch,
-      setModelExternalValue = _ref.setModelExternalValue,
-      description = _ref.description,
-      customOptions = _ref.customOptions,
-      data = _ref.data,
-      addToDatasets = _ref.addToDatasets,
-      modifyOptions = _ref.modifyOptions;
+  let {
+    className,
+    initialModel,
+    modelsForSwitch,
+    setModelExternalValue,
+    description,
+    customOptions,
+    data,
+    addToDatasets,
+    modifyOptions
+  } = _ref;
   if (!data) return null;
-
-  var _ref2 = description || {},
-      label = _ref2.label,
-      value = _ref2.value;
-
-  var _useState = (0, _react.useState)(_Chart.DEFAULT_CHART_MODEL),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      model = _useState2[0],
-      setModel = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(data),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      localData = _useState4[0],
-      setLocalData = _useState4[1];
-
-  var chartRef = (0, _react.useRef)(null);
-  var charContainertRef = (0, _react.useRef)(null);
-  var options = (0, _react.useMemo)(function () {
-    return customOptions || (modifyOptions ? modifyOptions((0, _utils.getOptions)(model)) : (0, _utils.getOptions)(model));
-  }, [customOptions, model, modifyOptions === null || modifyOptions === void 0 ? void 0 : (_modifyOptions$toStri = modifyOptions.toString) === null || _modifyOptions$toStri === void 0 ? void 0 : _modifyOptions$toStri.call(modifyOptions), data]);
-  var notLibraryOptionsOptions = (0, _react.useMemo)(function () {
-    return customOptions ? customOptions === null || customOptions === void 0 ? void 0 : customOptions.notLibraryOptions : (0, _utils.getNotLibraryOptionsOptions)(model);
-  }, [customOptions, model, data]);
-  var ChartComponent = (0, _react.useCallback)(function (props) {
-    var Component = ChartComponents[(0, _utils.getChartTypeKey)(model)];
+  const {
+    label,
+    value
+  } = description || {};
+  const [model, setModel] = (0, _react.useState)(_Chart.DEFAULT_CHART_MODEL);
+  const [localData, setLocalData] = (0, _react.useState)(data);
+  const chartRef = (0, _react.useRef)(null);
+  const charContainertRef = (0, _react.useRef)(null);
+  const options = (0, _react.useMemo)(() => customOptions || (modifyOptions ? modifyOptions((0, _utils2.getOptions)(model)) : (0, _utils2.getOptions)(model)), [customOptions, model, modifyOptions === null || modifyOptions === void 0 || (_modifyOptions$toStri = modifyOptions.toString) === null || _modifyOptions$toStri === void 0 ? void 0 : _modifyOptions$toStri.call(modifyOptions), data]);
+  const notLibraryOptionsOptions = (0, _react.useMemo)(() => customOptions ? customOptions === null || customOptions === void 0 ? void 0 : customOptions.notLibraryOptions : (0, _utils2.getNotLibraryOptionsOptions)(model), [customOptions, model, data]);
+  const ChartComponent = (0, _react.useCallback)(props => {
+    const Component = ChartComponents[(0, _utils2.getChartTypeKey)(model)];
     return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
       ref: chartRef
     }, props));
   }, [model]);
-
-  var isExcludeDescription = _Chart.COMPONENT_OPTIONS.disableDescriptionsFor.includes(model);
-
-  var isExcludeChartTypeSwitcher = _Chart.COMPONENT_OPTIONS.disableChartTypeSwitcherFor.includes(model);
-
-  (0, _react.useLayoutEffect)(function () {
-    if (setModelExternalValue && model !== 'emptyLayout') setModelExternalValue(model);
+  const isExcludeDescription = _Chart.COMPONENT_OPTIONS.disableDescriptionsFor.includes(model);
+  const isExcludeChartTypeSwitcher = _Chart.COMPONENT_OPTIONS.disableChartTypeSwitcherFor.includes(model);
+  (0, _react.useLayoutEffect)(() => {
+    if (setModelExternalValue && model !== "emptyLayout") setModelExternalValue(model);
   }, [model]);
-  (0, _react.useLayoutEffect)(function () {
-    var _ref3 = notLibraryOptionsOptions || {},
-        setCanvasDimensions = _ref3.setCanvasDimensions;
-
+  (0, _react.useLayoutEffect)(() => {
+    const {
+      setCanvasDimensions
+    } = notLibraryOptionsOptions || {};
     if (charContainertRef.current) {
       var _setCanvasDimensions$, _setCanvasDimensions$2;
-
-      charContainertRef.current.style.width = (_setCanvasDimensions$ = setCanvasDimensions === null || setCanvasDimensions === void 0 ? void 0 : setCanvasDimensions.width) !== null && _setCanvasDimensions$ !== void 0 ? _setCanvasDimensions$ : '';
-      charContainertRef.current.style.height = (_setCanvasDimensions$2 = setCanvasDimensions === null || setCanvasDimensions === void 0 ? void 0 : setCanvasDimensions.height) !== null && _setCanvasDimensions$2 !== void 0 ? _setCanvasDimensions$2 : '';
+      charContainertRef.current.style.width = (_setCanvasDimensions$ = setCanvasDimensions === null || setCanvasDimensions === void 0 ? void 0 : setCanvasDimensions.width) !== null && _setCanvasDimensions$ !== void 0 ? _setCanvasDimensions$ : "";
+      charContainertRef.current.style.height = (_setCanvasDimensions$2 = setCanvasDimensions === null || setCanvasDimensions === void 0 ? void 0 : setCanvasDimensions.height) !== null && _setCanvasDimensions$2 !== void 0 ? _setCanvasDimensions$2 : "";
     }
   }, [notLibraryOptionsOptions]);
-  (0, _react.useEffect)(function () {
-    setModel((0, _utils.correctModelKey)(initialModel));
+  (0, _react.useEffect)(() => {
+    setModel((0, _utils2.correctModelKey)(initialModel));
   }, [initialModel]);
-  (0, _react.useEffect)(function () {
-    setLocalData((0, _utils.prepareData)(model, (0, _utils2.clone)(data), chartRef.current, addToDatasets));
+  (0, _react.useEffect)(() => {
+    setLocalData((0, _utils2.prepareData)(model, (0, _utils.clone)(data), chartRef.current, addToDatasets));
   }, [model, data]);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(RC, (0, _defineProperty2.default)({}, "".concat(RC, "_icon-mode"), _Chart.ICON_MODELS.includes(model)), className)
+    className: (0, _classnames.default)(RC, {
+      ["".concat(RC, "_icon-mode")]: _Chart.ICON_MODELS.includes(model)
+    }, className)
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)("".concat(RC, "__header"), (0, _defineProperty2.default)({}, "".concat(RC, "__header_only-switcher"), !description))
+    className: (0, _classnames.default)("".concat(RC, "__header"), {
+      ["".concat(RC, "__header_only-switcher")]: !description
+    })
   }, description && !isExcludeDescription ? /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)("".concat(RC, "__description"))
   }, label ? /*#__PURE__*/_react.default.createElement("span", {
@@ -124,16 +89,12 @@ var Chart = function Chart(_ref) {
     className: (0, _classnames.default)("".concat(RC, "__type-switcher"))
   }, /*#__PURE__*/_react.default.createElement(_ChartTypeSwitcherIcon.default, {
     iconType: "Bar",
-    isActive: (0, _utils.getChartTypeKey)(model) === 'Bar',
-    onClick: function onClick() {
-      return setModel((modelsForSwitch === null || modelsForSwitch === void 0 ? void 0 : modelsForSwitch[0]) || 'barLayout');
-    }
+    isActive: (0, _utils2.getChartTypeKey)(model) === "Bar",
+    onClick: () => setModel((modelsForSwitch === null || modelsForSwitch === void 0 ? void 0 : modelsForSwitch[0]) || "barLayout")
   }), /*#__PURE__*/_react.default.createElement(_ChartTypeSwitcherIcon.default, {
     iconType: "Line",
-    isActive: (0, _utils.getChartTypeKey)(model) === 'Line',
-    onClick: function onClick() {
-      return setModel((modelsForSwitch === null || modelsForSwitch === void 0 ? void 0 : modelsForSwitch[1]) || 'lineLayout');
-    }
+    isActive: (0, _utils2.getChartTypeKey)(model) === "Line",
+    onClick: () => setModel((modelsForSwitch === null || modelsForSwitch === void 0 ? void 0 : modelsForSwitch[1]) || "lineLayout")
   })) : null), /*#__PURE__*/_react.default.createElement("div", {
     ref: charContainertRef,
     className: (0, _classnames.default)("".concat(RC, "__chart-wrapper"))
@@ -141,6 +102,4 @@ var Chart = function Chart(_ref) {
     data: localData
   }))));
 };
-
-var _default = Chart;
-exports.default = _default;
+var _default = exports.default = Chart;

package/dist/Atomic/UI/Chart/Chart.scss

@@ -7,9 +7,9 @@
 
   &__header {
     display: flex;
-    align-items: flex-start;
     flex-flow: row nowrap;
     justify-content: space-between;
+    align-items: flex-start;
 
     margin-bottom: 24px;
 
@@ -20,19 +20,19 @@
 
   &__description {
     display: flex;
-    align-items: flex-start;
-    flex-flow: column nowrap;
     flex-grow: 1;
+    flex-flow: column nowrap;
     justify-content: flex-start;
+    align-items: flex-start;
 
     padding-left: 24px;
   }
 
   &__type-switcher {
     display: flex;
-    align-items: flex-start;
     flex-flow: row nowrap;
     justify-content: flex-start;
+    align-items: flex-start;
 
     width: fit-content;
     height: fit-content;

package/dist/Atomic/UI/Chart/partial/AnyOuterClass.scss

@@ -2,41 +2,37 @@
   max-width: 806px;
 
   border-radius: 16px;
-
-  background: #FFF;
+  background: #fff;
   box-shadow: 0 16px 24px rgb(0 0 0 / 5%);
 }
 
 .any-outer-class__chart {
   .chart__description-title {
-    letter-spacing: 0.1px;
-
-    color: #3B414B;
-
     font-size: 16px;
     font-weight: 600;
     font-style: normal;
     line-height: 24px;
+    letter-spacing: 0.1px;
+
+    color: #3b414b;
   }
 
   .chart__description-value {
     span {
-      letter-spacing: 0.359794px;
-
-      color: #3B414B;
-
       font-size: 20px;
       font-weight: 600;
       font-style: normal;
       line-height: 30px;
+      letter-spacing: 0.359794px;
 
-      &:last-child {
-        letter-spacing: 0.2px;
-
-        color: #757F8C;
+      color: #3b414b;
 
+      &:last-child {
         font-size: 14px;
         line-height: 20px;
+        letter-spacing: 0.2px;
+
+        color: #757f8c;
       }
     }
   }