intelicoreact 1.3.22 → 1.3.24

package/dist/Atomic/UI/ExampleChartIntegration/ExampleChartIntegration.js

@@ -9,11 +9,11 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _uuid = require("uuid");
-var _Chart = _interopRequireDefault(require("../Chart/Chart"));
-var _InputDateRange = _interopRequireDefault(require("../../FormElements/InputDateRange/InputDateRange"));
-var _utils = require("./partial/utils");
-var _utils2 = require("../../../Functions/utils");
 var _fieldValueFormatters = require("../../../Functions/fieldValueFormatters");
+var _utils = require("../../../Functions/utils");
+var _InputDateRange = _interopRequireDefault(require("../../FormElements/InputDateRange/InputDateRange"));
+var _Chart = _interopRequireDefault(require("../Chart/Chart"));
+var _utils2 = require("./partial/utils");
 require("./partial/AnyOuterClass.scss");
 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; }
@@ -29,18 +29,18 @@ const ExampleChartIntegration = props => {
   const {
     initialChartType
   } = chartProps || {};
-  const dateRange = (0, _react.useMemo)(() => (0, _utils.getSafelyDateRange)(outerDateRange), [outerDateRange]);
-  const [chartType, setChartType] = (0, _react.useState)(initialChartType || 'Bar');
-  const [tab, setTab] = (0, _react.useState)('tab1');
-  const [initialModel, setInitialModel] = (0, _react.useState)(chartType === 'Bar' ? 'finturfLoadingModeBar' : 'finturfLoadingModeLine');
+  const dateRange = (0, _react.useMemo)(() => (0, _utils2.getSafelyDateRange)(outerDateRange), [outerDateRange]);
+  const [chartType, setChartType] = (0, _react.useState)(initialChartType || "Bar");
+  const [tab, setTab] = (0, _react.useState)("tab1");
+  const [initialModel, setInitialModel] = (0, _react.useState)(chartType === "Bar" ? "finturfLoadingModeBar" : "finturfLoadingModeLine");
   const [tab1, setTab1] = (0, _react.useState)(null);
   const [tab2, setTab2] = (0, _react.useState)(null);
   const [tab3, setTab3] = (0, _react.useState)(null);
   const [tab4, setTab4] = (0, _react.useState)(null);
   const [dataForRender, setDataForRender] = (0, _react.useState)(null);
   const getMockData = () => {
-    const labels = (0, _utils.getLabels)(dateRange);
-    const mock = () => labels.map(label => (0, _utils.getMockValue)());
+    const labels = (0, _utils2.getLabels)(dateRange);
+    const mock = () => labels.map(label => (0, _utils2.getMockValue)());
     return {
       labels,
       datasets: [{
@@ -50,53 +50,53 @@ const ExampleChartIntegration = props => {
   };
   const getTabData = tabId => {
     switch (tabId) {
-      case 'tab1':
-        return !tab1 ? null : (0, _utils2.clone)(tab1);
-      case 'tab2':
-        return !tab2 ? null : (0, _utils2.clone)(tab2);
-      case 'tab3':
-        return !tab3 ? null : (0, _utils2.clone)(tab3);
-      case 'tab4':
-        return !tab4 ? null : (0, _utils2.clone)(tab4);
+      case "tab1":
+        return !tab1 ? null : (0, _utils.clone)(tab1);
+      case "tab2":
+        return !tab2 ? null : (0, _utils.clone)(tab2);
+      case "tab3":
+        return !tab3 ? null : (0, _utils.clone)(tab3);
+      case "tab4":
+        return !tab4 ? null : (0, _utils.clone)(tab4);
       default:
         return null;
     }
   };
   const getDescription = tabId => {
     switch (tabId) {
-      case 'tab1':
-        return 'Tab 1';
-      case 'tab2':
-        return 'Tab 2';
-      case 'tab3':
-        return 'Tab 3';
-      case 'tab4':
-        return 'Tab 4';
+      case "tab1":
+        return "Tab 1";
+      case "tab2":
+        return "Tab 2";
+      case "tab3":
+        return "Tab 3";
+      case "tab4":
+        return "Tab 4";
       default:
         return null;
     }
   };
   const selectData = () => getTabData(tab) ? getTabData(tab) : getMockData();
-  const modelsForSwitch = (0, _react.useMemo)(() => getTabData(tab) ? ['finturfChartBar', 'finturfChartLine'] : ['finturfLoadingModeBar', 'finturfLoadingModeLine'], [!!getTabData(tab)]);
+  const modelsForSwitch = (0, _react.useMemo)(() => getTabData(tab) ? ["finturfChartBar", "finturfChartLine"] : ["finturfLoadingModeBar", "finturfLoadingModeLine"], [Boolean(getTabData(tab))]);
   const handleChangeChartType = model => {
-    setChartType(model.includes('Line') ? 'Line' : 'Bar');
+    setChartType(model.includes("Line") ? "Line" : "Bar");
     setInitialModel(model);
   };
   const getModel = () => {
-    if (!getTabData(tab)) return chartType === 'Bar' ? 'finturfLoadingModeBar' : 'finturfLoadingModeLine';else return chartType === 'Bar' ? 'finturfChartBar' : 'finturfChartLine';
+    if (!getTabData(tab)) return chartType === "Bar" ? "finturfLoadingModeBar" : "finturfLoadingModeLine";else return chartType === "Bar" ? "finturfChartBar" : "finturfChartLine";
   };
   const processResponse = (res, tabId) => {
     switch (tabId) {
-      case 'tab1':
+      case "tab1":
         setTab1(res);
         break;
-      case 'tab2':
+      case "tab2":
         setTab2(res);
         break;
-      case 'tab3':
+      case "tab3":
         setTab3(res);
         break;
-      case 'tab4':
+      case "tab4":
         setTab4(res);
         break;
       default:
@@ -113,12 +113,12 @@ const ExampleChartIntegration = props => {
     // эмуляция запросов
     // вся логика происходит в самих входящих промисах
     // Promise.all добавлен для расширения на случай надобности описания эффектов по завершении всех запросов
-    Promise.all([(0, _utils.getTab)('tab1', dateRange, processResponse), (0, _utils.getTab)('tab2', dateRange, processResponse), (0, _utils.getTab)('tab3', dateRange, processResponse), (0, _utils.getTab)('tab4', dateRange, processResponse)]);
+    Promise.all([(0, _utils2.getTab)("tab1", dateRange, processResponse), (0, _utils2.getTab)("tab2", dateRange, processResponse), (0, _utils2.getTab)("tab3", dateRange, processResponse), (0, _utils2.getTab)("tab4", dateRange, processResponse)]);
   }, [dateRange]);
   (0, _react.useLayoutEffect)(() => {
     setInitialModel(getModel());
     setDataForRender(selectData());
-  }, [!!getTabData(tab), tab, chartType]);
+  }, [Boolean(getTabData(tab)), tab, chartType]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "example-wrapper"
   }, /*#__PURE__*/_react.default.createElement(_InputDateRange.default, (0, _extends2.default)({}, inputDateRangeProps, {
@@ -127,25 +127,25 @@ const ExampleChartIntegration = props => {
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "buttons-block"
   }, /*#__PURE__*/_react.default.createElement("button", {
-    className: (0, _classnames.default)('tab-button', {
-      'tab-button_active': tab === 'tab1'
+    className: (0, _classnames.default)("tab-button", {
+      "tab-button_active": tab === "tab1"
     }),
-    onClick: () => setTab('tab1')
+    onClick: () => setTab("tab1")
   }, "Tab 1"), /*#__PURE__*/_react.default.createElement("button", {
-    className: (0, _classnames.default)('tab-button', {
-      'tab-button_active': tab === 'tab2'
+    className: (0, _classnames.default)("tab-button", {
+      "tab-button_active": tab === "tab2"
     }),
-    onClick: () => setTab('tab2')
+    onClick: () => setTab("tab2")
   }, "Tab 2"), /*#__PURE__*/_react.default.createElement("button", {
-    className: (0, _classnames.default)('tab-button', {
-      'tab-button_active': tab === 'tab3'
+    className: (0, _classnames.default)("tab-button", {
+      "tab-button_active": tab === "tab3"
     }),
-    onClick: () => setTab('tab3')
+    onClick: () => setTab("tab3")
   }, "Tab 3"), /*#__PURE__*/_react.default.createElement("button", {
-    className: (0, _classnames.default)('tab-button', {
-      'tab-button_active': tab === 'tab4'
+    className: (0, _classnames.default)("tab-button", {
+      "tab-button_active": tab === "tab4"
     }),
-    onClick: () => setTab('tab4')
+    onClick: () => setTab("tab4")
   }, "Tab 4")), /*#__PURE__*/_react.default.createElement(_Chart.default, (0, _extends2.default)({}, chartProps, {
     key: JSON.stringify(dataForRender),
     data: dataForRender,
@@ -171,7 +171,7 @@ const ExampleChartIntegration = props => {
               callbacks: {
                 ...(options === null || options === void 0 || (_options$options3 = options.options) === null || _options$options3 === void 0 || (_options$options3 = _options$options3.plugins) === null || _options$options3 === void 0 || (_options$options3 = _options$options3.tooltip) === null || _options$options3 === void 0 ? void 0 : _options$options3.callbacks),
                 label: context => {
-                  return context.dataset.id === 'tab3' || context.dataset.id === 'tab4' ? (0, _fieldValueFormatters.formatToPriceWithUSD)(context.raw || '0') : context.raw || '0';
+                  return context.dataset.id === "tab3" || context.dataset.id === "tab4" ? (0, _fieldValueFormatters.formatToPriceWithUSD)(context.raw || "0") : context.raw || "0";
                 }
               }
             }

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

@@ -14,7 +14,6 @@
   .tab-button {
     width: 100px;
     height: 40px;
-
     margin-right: 20px;
 
     border: 1px solid black;
@@ -32,41 +31,37 @@
     max-width: 806px;
 
     border-radius: 16px;
-
-    background: #FFF;
+    background: #fff;
     box-shadow: 0 16px 24px rgb(0 0 0 / 5%);
   }
 
   .chart__description-title {
-    letter-spacing: 0.1px;
-
-    color: #3B414B;
-
     font-family: Sarabun, sans-serif;
     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;
       }
     }
   }

package/dist/Atomic/UI/ExampleChartIntegration/partial/utils.js

@@ -7,13 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.getTab = exports.getSafelyDateRange = exports.getMockValue = exports.getLabels = void 0;
 var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
 var _dependencies = require("../../../FormElements/InputDateRange/dependencies");
-const getSafelyDateRange = dateRange => (!(dateRange !== null && dateRange !== void 0 && dateRange.start) || !(dateRange !== null && dateRange !== void 0 && dateRange.end)) && (!(dateRange !== null && dateRange !== void 0 && dateRange.intervalKey) || (dateRange === null || dateRange === void 0 ? void 0 : dateRange.intervalKey) === 'allTime') ? (0, _dependencies.getActualDateRange)({
-  start: '2022-01-01T00:00:00',
-  end: (0, _momentTimezone.default)().endOf('day').format('YYYY-MM-DDTHH:mm:ss')
+const getSafelyDateRange = dateRange => (!(dateRange !== null && dateRange !== void 0 && dateRange.start) || !(dateRange !== null && dateRange !== void 0 && dateRange.end)) && (!(dateRange !== null && dateRange !== void 0 && dateRange.intervalKey) || (dateRange === null || dateRange === void 0 ? void 0 : dateRange.intervalKey) === "allTime") ? (0, _dependencies.getActualDateRange)({
+  start: "2022-01-01T00:00:00",
+  end: (0, _momentTimezone.default)().endOf("day").format("YYYY-MM-DDTHH:mm:ss")
 }) : (0, _dependencies.getActualDateRange)(dateRange);
 exports.getSafelyDateRange = getSafelyDateRange;
 const getLabels = range => {
-  const MINIMUM_INTERVAL = 'hour';
+  const MINIMUM_INTERVAL = "hour";
   const NO_MORE_THAN_THREE_HOURS = 3; // this is hours
   const NO_MORE_THAN_TWO_DAYS = 48; // this is hours
   const NO_MORE_THAN_TWO_MONTHS = 2; // this is months
@@ -26,20 +26,20 @@ const getLabels = range => {
   const getValues = intervalStepKey => {
     let format;
     switch (intervalStepKey) {
-      case 'minutes':
-        format = 'MM.DD hh:mm';
+      case "minutes":
+        format = "MM.DD hh:mm";
         break;
-      case 'hours':
-        format = 'MM.DD.YYYY h A';
+      case "hours":
+        format = "MM.DD.YYYY h A";
         break;
-      case 'days':
-        format = 'MM.DD.YYYY';
+      case "days":
+        format = "MM.DD.YYYY";
         break;
-      case 'months':
-        format = 'MM.YYYY';
+      case "months":
+        format = "MM.YYYY";
         break;
       default:
-        format = 'YYYY';
+        format = "YYYY";
         break;
     }
     const structure = [...Array(end.diff(start, intervalStepKey)).keys()];
@@ -53,7 +53,7 @@ const getLabels = range => {
     });
     return process.values;
   };
-  if (end.diff(start, 'hours') <= NO_MORE_THAN_THREE_HOURS) return getValues('minutes');else if (end.diff(start, 'hours') <= NO_MORE_THAN_TWO_DAYS) return getValues('hours');else if (end.diff(start, 'months') <= NO_MORE_THAN_TWO_MONTHS) return getValues('days');else if (end.diff(start, 'months') <= NO_MORE_THAN_THREE_YEARS) return getValues('months');else return getValues('years');
+  if (end.diff(start, "hours") <= NO_MORE_THAN_THREE_HOURS) return getValues("minutes");else if (end.diff(start, "hours") <= NO_MORE_THAN_TWO_DAYS) return getValues("hours");else if (end.diff(start, "months") <= NO_MORE_THAN_TWO_MONTHS) return getValues("days");else if (end.diff(start, "months") <= NO_MORE_THAN_THREE_YEARS) return getValues("months");else return getValues("years");
 };
 exports.getLabels = getLabels;
 const getMockValue = () => Math.trunc(Math.random() * 1000000);
@@ -61,16 +61,16 @@ exports.getMockValue = getMockValue;
 const getTab = async (tabId, range, callback) => {
   let requestDelay;
   switch (tabId) {
-    case 'tab1':
+    case "tab1":
       requestDelay = 2000;
       break;
-    case 'tab2':
+    case "tab2":
       requestDelay = 1500;
       break;
-    case 'tab3':
+    case "tab3":
       requestDelay = 3000;
       break;
-    case 'tab4':
+    case "tab4":
       requestDelay = 500;
       break;
     default:

package/dist/Atomic/UI/Hint/Hint.js

@@ -6,23 +6,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _CustomIcons = require("../../../Molecular/CustomIcons");
-var _reactDom = require("react-dom");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _reactDom = require("react-dom");
 var _reactFeather = require("react-feather");
+var _CustomIcons = require("./../../../Molecular/CustomIcons");
 require("./Hint.scss");
 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 time = (Date.now() * Math.random() / 1000).toString().replace(/\./g, '_');
+const time = (Date.now() * Math.random() / 1000).toString().replace(/\./g, "_");
 const Hint = _ref => {
   var _ref2;
   let {
     hint,
-    side = 'right',
+    side = "right",
     className,
-    label = '',
-    variant = 'filled',
-    handleOpenType = 'click',
+    label = "",
+    variant = "filled",
+    handleOpenType = "click",
     onClickCallback,
     key,
     id,
@@ -33,29 +33,30 @@ const Hint = _ref => {
   const hintId = (_ref2 = key !== null && key !== void 0 ? key : id) !== null && _ref2 !== void 0 ? _ref2 : time;
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
   const hintRef = (0, _react.useRef)(null);
-  const isCallbackExist = typeof onClickCallback === 'function';
+  const isCallbackExist = typeof onClickCallback === "function";
   const handleClickOutside = event => {
     if (!getHintContainer().contains(event === null || event === void 0 ? void 0 : event.target)) {
       setIsOpen(false);
     }
   };
   const getParentNode = () => {
-    var _document$querySelect;
-    return (_document$querySelect = document.querySelector('div#root')) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector('div#app');
+    var _ref3, _document$querySelect;
+    return (_ref3 = (_document$querySelect = document.querySelector("div#root")) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector("div#app")) !== null && _ref3 !== void 0 ? _ref3 : document.body;
   };
   const initHintContainer = () => {
-    const hint = document.createElement('div');
-    hint.setAttribute('id', hintId);
-    hint.classList.add('hint__container');
-    getParentNode().append(hint);
+    var _getParentNode;
+    const hint = document.createElement("div");
+    hint.setAttribute("id", hintId);
+    hint.classList.add("hint__container");
+    (_getParentNode = getParentNode()) === null || _getParentNode === void 0 || _getParentNode.append(hint);
   };
   const getHintContainer = () => {
     return document.getElementById(hintId);
   };
   const getHintMarkUp = () => {
     return /*#__PURE__*/_react.default.createElement("div", {
-      "data-testid": 'test-hint-text',
-      className: (0, _classnames.default)('hint__text', "hint__text_".concat(side))
+      "data-testid": "test-hint-text",
+      className: (0, _classnames.default)("hint__text", "hint__text_".concat(side))
     }, hint, children);
   };
   const setHintContainerStyles = () => {
@@ -64,17 +65,15 @@ const Hint = _ref => {
     if (!hc || !isOpen) return false;
     const {
       width,
-      height,
       left,
-      top,
-      bottom
+      top
     } = (hintRef === null || hintRef === void 0 ? void 0 : hintRef.current.getBoundingClientRect()) || {};
-    const sw = hc.getElementsByClassName('hint__text')[0];
+    const sw = hc.getElementsByClassName("hint__text")[0];
     const swHeight = sw === null || sw === void 0 || (_sw$getBoundingClient = sw.getBoundingClientRect()) === null || _sw$getBoundingClient === void 0 ? void 0 : _sw$getBoundingClient.height;
-    hc.style.width = isOpen ? width === null || width === void 0 ? void 0 : width.toString().concat('px') : 0;
-    hc.style.left = isOpen ? left === null || left === void 0 ? void 0 : left.toString().concat('px') : 0;
-    hc.style.top = isOpen ? top === null || top === void 0 ? void 0 : top.toString().concat('px') : 0;
-    hc.style.maxHeight = isOpen ? swHeight === null || swHeight === void 0 ? void 0 : swHeight.toString().concat('px') : 0;
+    hc.style.width = isOpen ? width === null || width === void 0 ? void 0 : width.toString().concat("px") : 0;
+    hc.style.left = isOpen ? left === null || left === void 0 ? void 0 : left.toString().concat("px") : 0;
+    hc.style.top = isOpen ? top === null || top === void 0 ? void 0 : top.toString().concat("px") : 0;
+    hc.style.maxHeight = isOpen ? swHeight === null || swHeight === void 0 ? void 0 : swHeight.toString().concat("px") : 0;
   };
   const renderHintContainer = () => {
     const hc = getHintContainer();
@@ -88,36 +87,36 @@ const Hint = _ref => {
     setHintContainerStyles();
   }, [isOpen]);
   (0, _react.useEffect)(() => {
-    document.addEventListener('click', handleClickOutside, true);
-    return () => document.removeEventListener('click', handleClickOutside, true);
-  });
+    document.addEventListener("click", handleClickOutside, true);
+    return () => document.removeEventListener("click", handleClickOutside, true);
+  }, []);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)('hint', className),
+    className: (0, _classnames.default)("hint", className),
     ref: hintRef
   }, /*#__PURE__*/_react.default.createElement("button", {
-    "tab-index": isAccessability ? 0 : -1,
-    "data-testid": label ? label === null || label === void 0 ? void 0 : label.replace(/\s/g, '-') : 'test-hint',
-    "aria-label": isAccessability && label || '',
-    onClick: () => handleOpenType === 'click' && (isCallbackExist ? onClickCallback() : setIsOpen(!isOpen)),
-    onMouseEnter: () => handleOpenType === 'hover' && setIsOpen(!isOpen),
-    onMouseLeave: () => handleOpenType === 'hover' && handleClickOutside(),
-    className: (0, _classnames.default)('hint__button', {
+    tabIndex: isAccessability ? 0 : -1,
+    "data-testid": label ? label === null || label === void 0 ? void 0 : label.replace(/\s/g, "-") : "test-hint",
+    "aria-label": isAccessability && label || "",
+    onClick: () => handleOpenType === "click" && (isCallbackExist ? onClickCallback() : setIsOpen(!isOpen)),
+    onMouseEnter: () => handleOpenType === "hover" && setIsOpen(!isOpen),
+    onMouseLeave: () => handleOpenType === "hover" && handleClickOutside(),
+    className: (0, _classnames.default)("hint__button", {
       hint__button_active: isOpen
     })
-  }, icon || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, variant === 'outlined' && /*#__PURE__*/_react.default.createElement(_reactFeather.HelpCircle, {
+  }, icon || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, variant === "outlined" && /*#__PURE__*/_react.default.createElement(_reactFeather.HelpCircle, {
     width: 16,
     height: 16,
     className: "hint__icon outlined"
-  }), variant === 'filled' && /*#__PURE__*/_react.default.createElement(_CustomIcons.HelpCircleFilled, {
+  }), variant === "filled" && /*#__PURE__*/_react.default.createElement(_CustomIcons.HelpCircleFilled, {
     className: "hint__icon filled"
-  }), variant === 'warning' && /*#__PURE__*/_react.default.createElement(_reactFeather.AlertTriangle, {
+  }), variant === "warning" && /*#__PURE__*/_react.default.createElement(_reactFeather.AlertTriangle, {
     className: "hint__icon",
-    color: '#F06D8D',
+    color: "#F06D8D",
     width: 16,
     height: 16
   })), label && /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)('hint__label', {
-      'color--primary': isOpen
+    className: (0, _classnames.default)("hint__label", {
+      "color--primary": isOpen
     })
   }, label[0].toUpperCase() + label.slice(1))), isOpen && renderHintContainer());
 };

package/dist/Atomic/UI/Hint/Hint.scss

@@ -27,10 +27,10 @@
 
     &:hover,
     &_active {
-      color: #6B81DD;
+      color: #6b81dd;
 
       svg {
-        color: #6B81DD;
+        color: #6b81dd;
       }
     }
   }
@@ -43,17 +43,17 @@
     max-width: 250px;
     padding: 8px;
 
-    color: #FFF;
-    border-radius: 4px;
-    background-color: #6B81DD;
-
     font-size: 10px;
     line-height: 16px;
 
+    color: #fff;
+    border-radius: 4px;
+    background-color: #6b81dd;
+
     a {
       text-decoration: underline;
 
-      color: #FFF;
+      color: #fff;
     }
 
     &::before {
@@ -63,9 +63,10 @@
       height: 8.5px;
 
       content: "";
-      transform: rotate(45deg);
 
-      background-color: #6B81DD;
+      background-color: #6b81dd;
+
+      transform: rotate(45deg);
     }
 
     &_bottom {
@@ -110,10 +111,10 @@
   }
 
   &__icon.outlined {
-    color: #9AA0B9;
+    color: #9aa0b9;
   }
 
   &__icon.filled {
-    color: #FFF;
+    color: #fff;
   }
 }