intelicoreact 1.6.22 → 1.6.24

package/dist/Atomic/UI/AccordionTable/AccordionTable.js

@@ -1 +1,238 @@
-function e(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,o=Array(r);t<r;t++)o[t]=e[t];return o}function r(r,t){return function(e){if(Array.isArray(e))return e}(r)||function(e,r){var t,o,n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var a=[],c=!0,i=!1;try{for(n=n.call(e);!(c=(t=n.next()).done)&&(a.push(t.value),!r||a.length!==r);c=!0);}catch(e){i=!0,o=e}finally{try{c||null==n.return||n.return()}finally{if(i)throw o}}return a}}(r,t)||function(r,t){if(r){if("string"==typeof r)return e(r,t);var o=Object.prototype.toString.call(r).slice(8,-1);if("Object"===o&&r.constructor&&(o=r.constructor.name),"Map"===o||"Set"===o)return Array.from(o);if("Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o))return e(r,t)}}(r,t)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function t(e){return e&&"undefined"!=typeof Symbol&&e.constructor===Symbol?"symbol":typeof e}import{jsx as o,jsxs as n}from"react/jsx-runtime";import{useEffect as a,useState as c}from"react";import i from"classnames";import{ArrowDown as l,ArrowUp as s,ChevronDown as d,Tag as u}from"react-feather";import m from"../MonoAccordion/MonoAccordion";import"./AccordionTable.scss";export default function(e){var b=e.className,p=e.header,f=e.items,v=e.onChange,y=e.testId,h=e.onSort,_=void 0===h?function(){}:h,O=e.sortParams,N=r(c(f),2),g=N[0],j=N[1],w={accordionChange:function(e,r){var t,o,n,a=null==g?void 0:g.map(function(r){if(r.key===e){var t,o;return t=function(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),o.forEach(function(r){var o;o=t[r],r in e?Object.defineProperty(e,r,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[r]=o})}return e}({},r),o=o={isOpen:!r.isOpen},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(o)):(function(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t.push.apply(t,o)}return t})(Object(o)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(o,e))}),t}return r}),c=(null==r||null==(t=r.target)?void 0:t.tagName)==="svg";((null==(n=r.target.className)||null==(o=n.includes)?void 0:o.call(n,"accordion-table"))||c)&&(v(a),j(a))},setSort:function(e){var r;_(e!==O.key?{key:e,direction:"DESC"}:{key:e,direction:"ASC"===O.direction?"DESC":"ASC"})}},S=function(e){return null==p?void 0:p.find(function(r){return r.key===e})},k=function(e){var n;return null==(n=Object.entries(e))?void 0:n.map(function(e){var n,a,c=r(e,2),l=c[0],s=c[1];return"promoDetails"===l||"disclosure"===l?null:o("div",{style:{flexBasis:"".concat(null==(n=S(l))?void 0:n.width,"%")},className:i("accordion-table__td","accordion-table__td--".concat(l),null==(a=S(l))?void 0:a.className),children:o("p",{className:"accordion-table__statistics-td-value",title:(void 0===s?"undefined":t(s))!=="object"?s:s.value,children:(void 0===s?"undefined":t(s))!=="object"?s:s.value})},l)})};return a(function(){j(f)},[f]),n("div",{className:i("accordion-table",b),children:[o("div",{className:"accordion-table__header",children:null==p?void 0:p.map(function(e){return n("div",{style:{flexBasis:"".concat(e.width,"%")},className:i("accordion-table__header-item",e.className,{"accordion-table--sorted-col":O&&O.key===e.key},{"accordion-table__header-item-sortable":!e.noSort}),onClick:function(){return!e.noSort&&w.setSort(e.key)},children:[O&&e.key===O.key&&"actions"!==O.key&&("DESC"===O.direction?o(l,{size:16}):o(s,{size:16})),e.label]},e.key)})}),o("div",{className:"accordion-table__body",children:null==g?void 0:g.map(function(e){var t,a,c;return o(m,{testId:y,onClick:function(r){return w.accordionChange(e.key,r)},isOpen:e.isOpen,className:i("accordion-table__body-accordion",{"accordion-table__body-accordion--closed":!e.isOpen},e.className),titleJSX:n("div",{onClick:function(e){return w.accordionChange(a.key,e)},className:"accordion-table__accordion-label-box",children:[n("div",{className:"accordion-table__accordion-label-wrapper j4",children:[o(d,{width:8,height:4,className:i("accordion-label-box__icon",{"accordion-label-box__icon--open":(a=e).isOpen})}),o("span",{className:"accordion-label-box__label",children:a.label}),a.statistics&&o("div",{className:i("accordion-table__tr",a.className),children:Object.entries(a.statistics).map(function(e){var t,n,a=r(e,2),c=a[0],l=a[1];return o("div",{style:{width:"".concat(null==(t=S(c))?void 0:t.width,"%")},className:i("accordion-table__statistics-td",null==(n=S(c))?void 0:n.className),children:o("div",{className:"accordion-table__statistics-td-value-wrapper",children:"status"===c?o("div",{className:"accordion-table__statistics-td-value",children:l}):o("p",{className:"accordion-table__statistics-td-value",title:l,children:l})})},c)})})]}),a.titleContent]}),children:null!=(t=e.children)?t:null==(c=e.rows)?void 0:c.map(function(e,r){var t,a,c,l,s;return n("div",{className:i("accordion-table__tr",{"accordion-table__tr-with-promo":e.promoDetails||(null==(t=e.cols)?void 0:t.promoDetails)},e.className),children:[o("div",{className:"df w100",children:k(e.cols||e)}),e.promoDetails||(null==(a=e.cols)?void 0:a.promoDetails)?o("div",{className:"accordion-table__tr-promo-wrapper",children:n("div",{className:"accordion-table__tr-promo",children:[o(u,{className:"tr-promo-icon",width:16,height:16}),o("span",{className:"tr-promo-label",children:"PROMOTION"}),e.promoDetails||(null==(c=e.cols)?void 0:c.promoDetails)]})}):null,e.disclosure||(null==(l=e.cols)?void 0:l.disclosure)?o("div",{className:"accordion-table__tr-promo-wrapper",children:o("div",{className:"accordion-table__tr-promo accordion-table__tr-promo-disclosure",children:e.disclosure||(null==(s=e.cols)?void 0:s.disclosure)})}):null]},r)})},e.key)})})]})}
+import React, { useEffect, useState } from "react";
+
+import cn from "classnames";
+import { ArrowDown, ArrowUp, ChevronDown, Tag } from "react-feather";
+
+import MonoAccordion from "../MonoAccordion/MonoAccordion";
+
+import "./AccordionTable.scss";
+
+const AccordionTable = ({
+  className,
+  header,
+  items,
+  onChange,
+  testId,
+  onSort = () => {},
+  sortParams,
+}) => {
+  const [accordions, setAccordions] = useState(items);
+
+  const sortedColClassName = (item) =>
+    cn(
+      "accordion-table__header-item",
+      item.className,
+      {
+        "accordion-table--sorted-col":
+          sortParams && sortParams.key === item.key,
+      },
+      { "accordion-table__header-item-sortable": !item.noSort },
+    );
+
+  const handle = {
+    accordionChange: (key, e) => {
+      const newArr = accordions?.map((item) => {
+        if (item.key === key) {
+          return {
+            ...item,
+            isOpen: !item.isOpen,
+          };
+        }
+        return item;
+      });
+      const isArrowSvg = e?.target?.tagName === "svg";
+      const isAccordionElement =
+        e.target.className?.includes?.("accordion-table");
+      if (isAccordionElement || isArrowSvg) {
+        onChange(newArr);
+        setAccordions(newArr);
+      }
+    },
+
+    setSort: (key) => {
+      let newSorting;
+      if (key !== sortParams.key) newSorting = { key: key, direction: "DESC" };
+      else {
+        newSorting = {
+          key,
+          direction: sortParams.direction === "ASC" ? "DESC" : "ASC",
+        };
+      }
+      onSort(newSorting);
+    },
+  };
+
+  const getHeaderItem = (key) => {
+    return header?.find((item) => item.key === key);
+  };
+
+  const renderTd = (tr) => {
+    return Object.entries(tr)?.map(([key, value]) => {
+      return key === "promoDetails" || key === "disclosure" ? null : (
+        <div
+          key={key}
+          style={{ flexBasis: `${getHeaderItem(key)?.width}%` }}
+          className={cn(
+            "accordion-table__td",
+            `accordion-table__td--${key}`,
+            getHeaderItem(key)?.className,
+          )}
+        >
+          <p
+            className="accordion-table__statistics-td-value"
+            title={typeof value !== "object" ? value : value.value}
+          >
+            {typeof value !== "object" ? value : value.value}
+          </p>
+        </div>
+      );
+    });
+  };
+
+  const renderTr = (rows) => {
+    return rows?.map((row, index) => {
+      return (
+        <div
+          key={index}
+          className={cn(
+            "accordion-table__tr",
+            {
+              "accordion-table__tr-with-promo":
+                row.promoDetails || row.cols?.promoDetails,
+            },
+            row.className,
+          )}
+        >
+          <div className="df w100">{renderTd(row.cols || row)}</div>
+          {row.promoDetails || row.cols?.promoDetails ? (
+            <div className="accordion-table__tr-promo-wrapper">
+              <div className="accordion-table__tr-promo">
+                <Tag className="tr-promo-icon" width={16} height={16} />
+                <span className="tr-promo-label">PROMOTION</span>
+                {row.promoDetails || row.cols?.promoDetails}
+              </div>
+            </div>
+          ) : null}
+
+          {row.disclosure || row.cols?.disclosure ? (
+            <div className="accordion-table__tr-promo-wrapper">
+              <div className="accordion-table__tr-promo accordion-table__tr-promo-disclosure">
+                {row.disclosure || row.cols?.disclosure}
+              </div>
+            </div>
+          ) : null}
+        </div>
+      );
+    });
+  };
+
+  const defineAccordionTitle = (row) => {
+    return (
+      <div
+        onClick={(e) => handle.accordionChange(row.key, e)}
+        className="accordion-table__accordion-label-box"
+      >
+        <div className="accordion-table__accordion-label-wrapper j4">
+          <ChevronDown
+            width={8}
+            height={4}
+            className={cn("accordion-label-box__icon", {
+              "accordion-label-box__icon--open": row.isOpen,
+            })}
+          />
+          <span className="accordion-label-box__label">{row.label}</span>
+          {row.statistics && (
+            <div className={cn("accordion-table__tr", row.className)}>
+              {Object.entries(row.statistics).map(([key, value]) => {
+                return (
+                  <div
+                    key={key}
+                    style={{ width: `${getHeaderItem(key)?.width}%` }}
+                    className={cn(
+                      "accordion-table__statistics-td",
+                      getHeaderItem(key)?.className,
+                    )}
+                  >
+                    <div className="accordion-table__statistics-td-value-wrapper">
+                      {key === "status" ? (
+                        <div className="accordion-table__statistics-td-value">
+                          {value}
+                        </div>
+                      ) : (
+                        <p
+                          className="accordion-table__statistics-td-value"
+                          title={value}
+                        >
+                          {value}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+
+        {row.titleContent}
+      </div>
+    );
+  };
+
+  useEffect(() => {
+    setAccordions(items);
+  }, [items]);
+
+  return (
+    <div className={cn("accordion-table", className)}>
+      <div className="accordion-table__header">
+        {header?.map((item) => {
+          return (
+            <div
+              style={{ flexBasis: `${item.width}%` }}
+              key={item.key}
+              className={sortedColClassName(item)}
+              onClick={() => !item.noSort && handle.setSort(item.key)}
+            >
+              {sortParams &&
+                item.key === sortParams.key &&
+                sortParams.key !== "actions" &&
+                (sortParams.direction === "DESC" ? (
+                  <ArrowDown size={16} />
+                ) : (
+                  <ArrowUp size={16} />
+                ))}
+
+              {item.label}
+            </div>
+          );
+        })}
+      </div>
+
+      <div className="accordion-table__body">
+        {accordions?.map((accordion) => {
+          return (
+            <MonoAccordion
+              testId={testId}
+              key={accordion.key}
+              onClick={(e) => handle.accordionChange(accordion.key, e)}
+              isOpen={accordion.isOpen}
+              className={cn(
+                "accordion-table__body-accordion",
+                {
+                  "accordion-table__body-accordion--closed": !accordion.isOpen,
+                },
+                accordion.className,
+              )}
+              titleJSX={defineAccordionTitle(accordion)}
+            >
+              {accordion.children ?? renderTr(accordion.rows)}
+            </MonoAccordion>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default AccordionTable;

package/dist/Atomic/UI/AccordionText/AccordionText.js

@@ -1 +1,69 @@
-function t(t,r){(null==r||r>t.length)&&(r=t.length);for(var e=0,n=Array(r);e<r;e++)n[e]=t[e];return n}function r(r,e){return function(t){if(Array.isArray(t))return t}(r)||function(t,r){var e,n,o=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=o){var i=[],a=!0,c=!1;try{for(o=o.call(t);!(a=(e=o.next()).done)&&(i.push(e.value),!r||i.length!==r);a=!0);}catch(t){c=!0,n=t}finally{try{a||null==o.return||o.return()}finally{if(c)throw n}}return i}}(r,e)||function(r,e){if(r){if("string"==typeof r)return t(r,e);var n=Object.prototype.toString.call(r).slice(8,-1);if("Object"===n&&r.constructor&&(n=r.constructor.name),"Map"===n||"Set"===n)return Array.from(n);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return t(r,e)}}(r,e)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}import{jsx as e,jsxs as n}from"react/jsx-runtime";import{useEffect as o,useRef as i,useState as a}from"react";import"react";import c from"classnames";import{ChevronDown as u,ChevronUp as l}from"react-feather";import"./AccordionText.scss";export default function(t){var s=t.isDefaultOpen,d=t.isOuterOpen,m=void 0!==d&&d,f=t.className,p=t.text,v=void 0===p?"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.":p,y=t.shortText,b=void 0===y?null:y,h=i(null),x=r(a(void 0!==s&&s),2),g=x[0],A=x[1],j=r(a(!1),2),O=j[0],S=j[1];return o(function(){A(m)},[m]),o(function(){var t=function(){h.current&&S(h.current.scrollWidth>h.current.clientWidth)},r=new ResizeObserver(function(){t()});return h.current&&(r.observe(h.current),t()),function(){h.current&&r.unobserve(h.current)}},[v]),n("div",{className:c("accordion-text",f,{"accordion-text--open":g}),onClick:function(){return A(function(t){return!t})},children:[e("div",{className:c("accordion-text__body",{"accordion-text__body--trim-text":O&&!g}),ref:h,children:b?g?v:b:v}),e("div",{className:"accordion-text__toggle",children:g?e(l,{}):e(u,{})})]})}
+import { useEffect, useRef, useState } from "react";
+import React from "react";
+import cn from "classnames";
+import { ChevronDown, ChevronUp } from "react-feather";
+import "./AccordionText.scss";
+
+const defaultText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.`;
+
+const AccordionText = ({
+  isDefaultOpen = false,
+  isOuterOpen = false,
+  className,
+  text = defaultText,
+  shortText = null
+}) => {
+  const bodyRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(isDefaultOpen);
+  const [isNeedTrimText, setIsNeedTrimText] = useState(false);
+
+  useEffect(() => {
+    setIsOpen(isOuterOpen);
+  }, [isOuterOpen]);
+
+  useEffect(() => {
+    const checkEllipsis = () => {
+      if (bodyRef.current) {
+        setIsNeedTrimText(bodyRef.current.scrollWidth > bodyRef.current.clientWidth);
+      }
+    };
+
+    const resizeObserver = new ResizeObserver(() => {
+      checkEllipsis();
+    });
+
+    if (bodyRef.current) {
+      resizeObserver.observe(bodyRef.current);
+      checkEllipsis();
+    }
+
+    return () => {
+      if (bodyRef.current) {
+        resizeObserver.unobserve(bodyRef.current);
+      }
+    };
+  }, [text]);
+
+  return (
+    <div
+      className={cn("accordion-text", className, {
+        "accordion-text--open": isOpen,
+      })}
+      onClick={() => setIsOpen((prevIsOpen) => !prevIsOpen)}
+    >
+      <div
+        className={cn("accordion-text__body", {
+          "accordion-text__body--trim-text": isNeedTrimText && !isOpen,
+        })}
+        ref={bodyRef}
+      >
+        {shortText ? (isOpen ? text : shortText) : text}
+      </div>
+      <div className="accordion-text__toggle">
+        {isOpen ? <ChevronUp /> : <ChevronDown />}
+      </div>
+    </div>
+  );
+};
+
+export default AccordionText;

package/dist/Atomic/UI/AdvancedTag/AdvTag.js

@@ -1 +1,207 @@
-function n(n,t){(null==t||t>n.length)&&(t=n.length);for(var e=0,a=Array(t);e<t;e++)a[e]=n[e];return a}function t(t,e){return function(n){if(Array.isArray(n))return n}(t)||function(n,t){var e,a,r=null==n?null:"undefined"!=typeof Symbol&&n[Symbol.iterator]||n["@@iterator"];if(null!=r){var l=[],c=!0,s=!1;try{for(r=r.call(n);!(c=(e=r.next()).done)&&(l.push(e.value),!t||l.length!==t);c=!0);}catch(n){s=!0,a=n}finally{try{c||null==r.return||r.return()}finally{if(s)throw a}}return l}}(t,e)||function(t,e){if(t){if("string"==typeof t)return n(t,e);var a=Object.prototype.toString.call(t).slice(8,-1);if("Object"===a&&t.constructor&&(a=t.constructor.name),"Map"===a||"Set"===a)return Array.from(a);if("Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a))return n(t,e)}}(t,e)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useEffect as r,useRef as l,useState as c}from"react";import s from"classnames";import{AlertTriangle as i}from"react-feather";import"./AdvancedTags.scss";export default function(n){var o,d,u=n.item,m=n.className,v=n.testId,g=void 0===v?"adv-tag":v,f=n.toTop,p=void 0===f||f;if(!u)return null;var h=u.labelLeft,w=u.labelRight,_=u.active,y=void 0===_?0:_,N=u.pause,L=void 0===N?0:N,x=u.merchants,b=u.warnLeft,M=u.warnLeftMsg,A=u.warnRightMsg,E=u.isEntityAndCounter,j=void 0!==E&&E,C=u.entityAndCounter,R=void 0===C?{nullCounterMessage:"",title:"",counter:null}:C,S=t(c(!1),2),I=S[0],T=S[1],k=t(c(""),2),O=k[0],z=k[1],U=l(null),$=s("strong",{"color--pause":0===y},{"color--green-haze":y>0}),q=s("strong",{"color--pause":0===L},{"color--light-red":L>0}),B=s("advanced-tags",{"advanced-tags--error":j&&(!R.counter||0===R.counter)||!j&&(b||!x)},m),D=function(n){T(!0),z(n)},F=function(n){U.current&&!U.current.contains(n.target)&&T(!1)};return r(function(){return document.addEventListener("click",F,!0),function(){return document.removeEventListener("click",F,!0)}}),j?a("div",{"data-testid":g,className:B,ref:U,children:[(d=(null==R||null==(o=R.counter)?void 0:o.toString())==="0")&&e("div",{"data-testid":"".concat(g,"-left"),className:"advanced-tags--warning-icon-wrapper",onMouseEnter:function(){return D("warnLeft")},onMouseLeave:function(){return T(!1)},children:e(i,{width:16,height:16,className:"advanced-tags--warning-icon mr5"})}),I&&(null==R?void 0:R.nullCounterMessage)&&"warnLeft"===O?e("span",{className:s("advanced-tags__warn-text advanced-tags__warn-text--warnLeft",{"advanced-tags__warn-text--warnLeft--to-top":p}),children:null==R?void 0:R.nullCounterMessage}):null,(null==R?void 0:R.title)&&e("span",{className:"mr5",children:null==R?void 0:R.title}),e("div",{className:"advanced-tags__counter ".concat(d?"advanced-tags__counter--null":"advanced-tags__counter--bold"),children:null==R?void 0:R.counter})]}):a("div",{"data-testid":g,className:B,ref:U,children:[b&&e("div",{"data-testid":"".concat(g,"-left"),className:"advanced-tags--warning-icon-wrapper",onMouseEnter:function(){return D("warnLeft")},onMouseLeave:function(){return T(!1)},children:e(i,{width:16,height:16,className:"advanced-tags--warning-icon mr5"})}),h&&e("span",{className:"mr5",children:h}),w&&e("span",{children:w}),"simple"!==u.type?e("span",{className:"ml5 mr5",children:"|"}):null,"simple"!==u.type?a("div",{className:"df",children:[e("span",{className:$,children:y}),e("span",{className:"strong color--pause",children:"/"}),e("span",{className:q,children:L})]}):null,"simple"!==u.type?e("span",{className:"ml5 mr5",children:"|"}):null,x?e("span",{children:x}):"simple"!==u.type&&e("div",{"data-testid":"".concat(g,"-right"),className:"advanced-tags--warning-icon-wrapper",onMouseEnter:function(){return D("warnRight")},onMouseLeave:function(){return T(!1)},children:e(i,{width:16,height:16,className:"advanced-tags--warning-icon"})}),I&&M&&"warnLeft"===O?e("span",{className:s("advanced-tags__warn-text advanced-tags__warn-text--warnLeft",{"advanced-tags__warn-text--warnLeft--to-top":p}),children:M}):null,I&&A&&"warnRight"===O?e("span",{className:s("advanced-tags__warn-text","advanced-tags__warn-text--warnRight",{"advanced-tags__warn-text--warnRight--to-top":p}),children:A}):null]})}
+import React, { useEffect, useRef, useState } from "react";
+
+import cn from "classnames";
+import { AlertTriangle } from "react-feather";
+
+import "./AdvancedTags.scss";
+
+const AdvTag = ({ item, className, testId = "adv-tag", toTop = true }) => {
+  if (!item) return null;
+
+  const {
+    labelLeft,
+    labelRight,
+    active = 0,
+    pause = 0,
+    merchants,
+    warnLeft,
+    warnLeftMsg,
+    warnRightMsg,
+    isEntityAndCounter = false,
+    entityAndCounter = {
+      nullCounterMessage: "",
+      title: "",
+      counter: null,
+    },
+  } = item;
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [clickedWarning, setClickedWarning] = useState("");
+  const hintRef = useRef(null);
+
+  const activeNumberClass = cn(
+    "strong",
+    { "color--pause": active === 0 },
+    { "color--green-haze": active > 0 },
+  );
+  const pauseNumberClass = cn(
+    "strong",
+    { "color--pause": pause === 0 },
+    { "color--light-red": pause > 0 },
+  );
+
+  const isEmptyEntitys =
+    (isEntityAndCounter &&
+      (!entityAndCounter.counter || entityAndCounter.counter === 0)) ||
+    (!isEntityAndCounter && (warnLeft || !merchants));
+  const advancedTagClass = cn(
+    "advanced-tags",
+    { "advanced-tags--error": isEmptyEntitys },
+    className,
+  );
+
+  const onWarningClick = (warn) => {
+    setIsOpen(true);
+    setClickedWarning(warn);
+  };
+
+  const handleClickOutside = (event) => {
+    if (hintRef.current && !hintRef.current.contains(event.target)) {
+      setIsOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("click", handleClickOutside, true);
+    return () =>
+      document.removeEventListener("click", handleClickOutside, true);
+  });
+
+  const renderClassicTag = () => {
+    return (
+      <div data-testid={testId} className={advancedTagClass} ref={hintRef}>
+        {warnLeft && (
+          <div
+            data-testid={`${testId}-left`}
+            className="advanced-tags--warning-icon-wrapper"
+            onMouseEnter={() => onWarningClick("warnLeft")}
+            onMouseLeave={() => setIsOpen(false)}
+          >
+            <AlertTriangle
+              width={16}
+              height={16}
+              className="advanced-tags--warning-icon mr5"
+            />
+          </div>
+        )}
+
+        {labelLeft && <span className="mr5">{labelLeft}</span>}
+        {labelRight && <span>{labelRight}</span>}
+
+        {item.type !== "simple" ? <span className="ml5 mr5">|</span> : null}
+        {item.type !== "simple" ? (
+          <div className="df">
+            <span className={activeNumberClass}>{active}</span>
+            <span className="strong color--pause">/</span>
+            <span className={pauseNumberClass}>{pause}</span>
+          </div>
+        ) : null}
+
+        {item.type !== "simple" ? <span className="ml5 mr5">|</span> : null}
+
+        {merchants ? (
+          <span>{merchants}</span>
+        ) : (
+          item.type !== "simple" && (
+            <div
+              data-testid={`${testId}-right`}
+              className="advanced-tags--warning-icon-wrapper"
+              onMouseEnter={() => onWarningClick("warnRight")}
+              onMouseLeave={() => setIsOpen(false)}
+            >
+              <AlertTriangle
+                width={16}
+                height={16}
+                className="advanced-tags--warning-icon"
+              />
+            </div>
+          )
+        )}
+
+        {isOpen && warnLeftMsg && clickedWarning === "warnLeft" ? (
+          <span
+            className={cn(
+              "advanced-tags__warn-text advanced-tags__warn-text--warnLeft",
+              {
+                "advanced-tags__warn-text--warnLeft--to-top": toTop,
+              },
+            )}
+          >
+            {warnLeftMsg}
+          </span>
+        ) : null}
+
+        {isOpen && warnRightMsg && clickedWarning === "warnRight" ? (
+          <span
+            className={cn(
+              "advanced-tags__warn-text",
+              "advanced-tags__warn-text--warnRight",
+              {
+                "advanced-tags__warn-text--warnRight--to-top": toTop,
+              },
+            )}
+          >
+            {warnRightMsg}
+          </span>
+        ) : null}
+      </div>
+    );
+  };
+
+  const renderWithEntityAndCounterTag = () => {
+    const isNullcounter = entityAndCounter?.counter?.toString() === "0";
+
+    return (
+      <div data-testid={testId} className={advancedTagClass} ref={hintRef}>
+        {isNullcounter && (
+          <div
+            data-testid={`${testId}-left`}
+            className="advanced-tags--warning-icon-wrapper"
+            onMouseEnter={() => onWarningClick("warnLeft")}
+            onMouseLeave={() => setIsOpen(false)}
+          >
+            <AlertTriangle
+              width={16}
+              height={16}
+              className="advanced-tags--warning-icon mr5"
+            />
+          </div>
+        )}
+
+        {isOpen &&
+        entityAndCounter?.nullCounterMessage &&
+        clickedWarning === "warnLeft" ? (
+          <span
+            className={cn(
+              "advanced-tags__warn-text advanced-tags__warn-text--warnLeft",
+              {
+                "advanced-tags__warn-text--warnLeft--to-top": toTop,
+              },
+            )}
+          >
+            {entityAndCounter?.nullCounterMessage}
+          </span>
+        ) : null}
+
+        {entityAndCounter?.title && (
+          <span className="mr5">{entityAndCounter?.title}</span>
+        )}
+
+        <div
+          className={`advanced-tags__counter ${
+            isNullcounter
+              ? "advanced-tags__counter--null"
+              : "advanced-tags__counter--bold"
+          }`}
+        >
+          {entityAndCounter?.counter}
+        </div>
+      </div>
+    );
+  };
+  return !isEntityAndCounter
+    ? renderClassicTag()
+    : renderWithEntityAndCounterTag();
+};
+
+export default AdvTag;

package/dist/Atomic/UI/AdvancedTag/AdvancedTags.js

@@ -1 +1,56 @@
-function t(t,r){(null==r||r>t.length)&&(r=t.length);for(var n=0,e=Array(r);n<r;n++)e[n]=t[n];return e}function r(r,n){return function(t){if(Array.isArray(t))return t}(r)||function(t,r){var n,e,a=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=a){var o=[],i=!0,l=!1;try{for(a=a.call(t);!(i=(n=a.next()).done)&&(o.push(n.value),!r||o.length!==r);i=!0);}catch(t){l=!0,e=t}finally{try{i||null==a.return||a.return()}finally{if(l)throw e}}return o}}(r,n)||function(r,n){if(r){if("string"==typeof r)return t(r,n);var e=Object.prototype.toString.call(r).slice(8,-1);if("Object"===e&&r.constructor&&(e=r.constructor.name),"Map"===e||"Set"===e)return Array.from(e);if("Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e))return t(r,n)}}(r,n)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}import{jsx as n,jsxs as e}from"react/jsx-runtime";import{useState as a}from"react";import o from"classnames";import i from"../Tag/Tag";import l from"./AdvTag";export default function(t){var c=t.items,u=t.noItemsTagLabel,s=t.className,f=t.testId,m=void 0===f?"advanced-tag-test":f,d=t.toTop,g=void 0===d||d;if((!c||!c.length)&&!u)return null;if((!c||!c.length)&&u)return n(i,{label:null==u?void 0:u.toString(),className:o(s,"tag-warn")});var p=r(a([c[0],c[1]]),2),h=p[0],v=p[1],y=r(a(!0),2),b=y[0],j=y[1];return e("div",{"data-testid":m,className:o(s,"j4 wrap"),children:[null==h?void 0:h.map(function(t,r){return n(l,{toTop:g,item:t,testId:"".concat(m,"-item-").concat(r)},r)}),c.length>=3&&n("span",{"data-testid":"".concat(m,"-showMore"),onClick:function(){return v(b?c:[c[0],c[1]]),j(!b),function(){v([c[0],c[1]]),j(!0)}},className:"advanced-tags advanced-tags--showMore",children:b?"+".concat(c.length-h.length):"..."})]})}
+import React, { useState } from "react";
+
+import cn from "classnames";
+
+import Tag from "../Tag/Tag";
+
+import AdvTag from "./AdvTag";
+
+const AdvancedTags = ({ items, noItemsTagLabel, className, testId = "advanced-tag-test", toTop = true }) => {
+  if ((!items || !items.length) && !noItemsTagLabel) return null;
+
+  if ((!items || !items.length) && noItemsTagLabel)
+    return (
+      <Tag
+        label={noItemsTagLabel?.toString()}
+        className={cn(className, "tag-warn")}
+      />
+    );
+
+  const [showedItems, setShowedItems] = useState([items[0], items[1]]);
+  const [showMore, setShowMore] = useState(true);
+
+  const onShowMoreClick = () => {
+    setShowedItems(showMore ? items : [items[0], items[1]]);
+    setShowMore(!showMore);
+    return () => {
+      setShowedItems([items[0], items[1]]);
+      setShowMore(true);
+    };
+  };
+
+  return (
+    <div data-testid={testId} className={cn(className, "j4 wrap")}>
+      {showedItems?.map((item, index) => (
+        <AdvTag
+          toTop={toTop}
+          key={index}
+          item={item}
+          testId={`${testId}-item-${index}`}
+        />
+      ))}
+
+      {items.length >= 3 && (
+        <span
+          data-testid={`${testId}-showMore`}
+          onClick={() => onShowMoreClick()}
+          className="advanced-tags advanced-tags--showMore"
+        >
+          {showMore ? `+${items.length - showedItems.length}` : "..."}
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default AdvancedTags;

package/dist/Atomic/UI/Alert/Alert.js

@@ -1 +1,72 @@
-function t(t,r){(null==r||r>t.length)&&(r=t.length);for(var e=0,n=Array(r);e<r;e++)n[e]=t[e];return n}function r(t){for(var r=1;r<arguments.length;r++){var e=null!=arguments[r]?arguments[r]:{},n=Object.keys(e);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(e).filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.forEach(function(r){var n;n=e[r],r in t?Object.defineProperty(t,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[r]=n})}return t}import{jsx as e,jsxs as n}from"react/jsx-runtime";import{useState as o}from"react";import a from"classnames";import{X as i}from"react-feather";import l from"../../Layout/Spinner/Spinner";import c from"../Button/Button";import s from"../DynamicIcon/DynamicIcon";import"./Alert.scss";export default function(u){var m,f=u.message,d=u.icon,y=u.iconDynamicKey,p=u.iconDynamicProps,b=u.className,v=u.children,h=u.noDismiss,g=u.testId,j=void 0===g?"alert":g,O=u.isHidden,S=u.variant,x=u.isLoading,_=u.buttonParams,w=(m=o(!1),function(t){if(Array.isArray(t))return t}(m)||function(t,r){var e,n,o=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=o){var a=[],i=!0,l=!1;try{for(o=o.call(t);!(i=(e=o.next()).done)&&(a.push(e.value),a.length!==r);i=!0);}catch(t){l=!0,n=t}finally{try{i||null==o.return||o.return()}finally{if(l)throw n}}return a}}(m,2)||function(r,e){if(r){if("string"==typeof r)return t(r,2);var n=Object.prototype.toString.call(r).slice(8,-1);if("Object"===n&&r.constructor&&(n=r.constructor.name),"Map"===n||"Set"===n)return Array.from(n);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return t(r,e)}}(m,2)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),A=w[0],D=w[1],I=y&&!d?e(s,r({iconKey:y},p)):null;return n("div",{"data-testid":j,className:a(b,{hidden:A},"alert alert--".concat(void 0===S?"warning":S),{hidden:void 0!==O&&O,"alert--loading":x}),children:[n("div",{className:"alert__icon-text-box j4",children:[null!=I?I:d,e("div",{children:v||f})]}),_?n("div",{className:"j6 alert__btns-box",children:[e(c,r({},_)),!h&&e("div",{className:"alert__close-btn",children:e(i,{"data-testid":"".concat(j,"-close"),onClick:function(){return D(!A)}})})]}):h?null:e("div",{className:"alert__close-btn",children:e(i,{"data-testid":"".concat(j,"-close"),onClick:function(){return D(!A)}})}),x&&e(l,{size:"small"})]})}
+import React, { useState } from "react";
+
+import cn from "classnames";
+import { X } from "react-feather";
+
+import Spinner from "../../Layout/Spinner/Spinner";
+import Button from "../Button/Button";
+import DynamicIcon from "../DynamicIcon/DynamicIcon";
+
+import "./Alert.scss";
+
+const Alert = ({
+  message,
+  icon,
+  iconDynamicKey,
+  iconDynamicProps,
+  className,
+  children,
+  noDismiss,
+  testId = "alert",
+  isHidden = false,
+  variant = "warning",
+  isLoading,
+  buttonParams,
+}) => {
+  const [onClose, setOnClose] = useState(false);
+
+  const DynamicIconComponent =
+    iconDynamicKey && !icon ? (
+      <DynamicIcon iconKey={iconDynamicKey} {...iconDynamicProps} />
+    ) : null;
+
+  function renderActionsBlock() {
+    if (buttonParams)
+      return (
+        <div className="j6 alert__btns-box">
+          <Button {...buttonParams} />
+          {!noDismiss && (
+            <div className="alert__close-btn">
+              <X data-testid={`${testId}-close`} onClick={() => setOnClose(!onClose)} />
+            </div>
+          )}
+        </div>
+      );
+    if (!noDismiss)
+      return (
+        <div className="alert__close-btn">
+          <X data-testid={`${testId}-close`} onClick={() => setOnClose(!onClose)} />
+        </div>
+      );
+    return null;
+  }
+
+  return (
+    <div
+      data-testid={testId}
+      className={cn(className, { hidden: onClose }, `alert alert--${variant}`, {
+        hidden: isHidden,
+        "alert--loading": isLoading,
+      })}
+    >
+      <div className="alert__icon-text-box j4">
+        {DynamicIconComponent ?? icon}
+        <div>{children || message}</div>
+      </div>
+      {renderActionsBlock()}
+      {isLoading && <Spinner size="small" />}
+    </div>
+  );
+};
+
+export default Alert;