intelicoreact 2.0.18 → 2.0.20

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

@@ -0,0 +1,148 @@
+import '../../../styles/base.css';
+import './AdvancedTags.styles.css';/* empty css                  */
+import cn from "classnames";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertTriangle } from "react-feather";
+//#region src/Atomic/UI/AdvancedTag/AdvTag.tsx
+var AdvTag = ({ item, className, testId = "adv-tag", toTop = true }) => {
+	const { labelLeft, labelRight, active = 0, pause = 0, merchants, warnLeft, warnLeftMsg, warnRightMsg, isEntityAndCounter = false, entityAndCounter = {
+		nullCounterMessage: "",
+		title: "",
+		counter: null
+	}, type } = 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 advancedTagClass = cn("advanced-tags", { "advanced-tags--error": isEntityAndCounter && (!entityAndCounter?.counter || entityAndCounter.counter === 0) || !isEntityAndCounter && (warnLeft || !merchants) }, 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);
+		};
+	}, []);
+	if (!item) return null;
+	const renderClassicTag = () => /* @__PURE__ */ jsxs("div", {
+		"data-testid": testId,
+		className: advancedTagClass,
+		ref: hintRef,
+		children: [
+			warnLeft && /* @__PURE__ */ jsx("div", {
+				"data-testid": `${testId}-left`,
+				className: "advanced-tags--warning-icon-wrapper",
+				onMouseEnter: () => onWarningClick("warnLeft"),
+				onMouseLeave: () => setIsOpen(false),
+				children: /* @__PURE__ */ jsx(AlertTriangle, {
+					width: 16,
+					height: 16,
+					className: "advanced-tags--warning-icon mr5"
+				})
+			}),
+			labelLeft && /* @__PURE__ */ jsx("span", {
+				className: "mr5",
+				children: labelLeft
+			}),
+			labelRight && /* @__PURE__ */ jsx("span", { children: labelRight }),
+			type !== "simple" && /* @__PURE__ */ jsx("span", {
+				className: "ml5 mr5",
+				children: "|"
+			}),
+			type !== "simple" && /* @__PURE__ */ jsxs("div", {
+				className: "df",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: activeNumberClass,
+						children: active
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "strong color--pause",
+						children: "/"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: pauseNumberClass,
+						children: pause
+					})
+				]
+			}),
+			type !== "simple" && /* @__PURE__ */ jsx("span", {
+				className: "ml5 mr5",
+				children: "|"
+			}),
+			merchants ? /* @__PURE__ */ jsx("span", { children: merchants }) : type !== "simple" && /* @__PURE__ */ jsx("div", {
+				"data-testid": `${testId}-right`,
+				className: "advanced-tags--warning-icon-wrapper",
+				onMouseEnter: () => onWarningClick("warnRight"),
+				onMouseLeave: () => setIsOpen(false),
+				children: /* @__PURE__ */ jsx(AlertTriangle, {
+					width: 16,
+					height: 16,
+					className: "advanced-tags--warning-icon"
+				})
+			}),
+			isOpen && warnLeftMsg && clickedWarning === "warnLeft" && /* @__PURE__ */ jsx("span", {
+				className: cn("advanced-tags__warn-text advanced-tags__warn-text--warnLeft", { "advanced-tags__warn-text--warnLeft--to-top": toTop }),
+				children: warnLeftMsg
+			}),
+			isOpen && warnRightMsg && clickedWarning === "warnRight" && /* @__PURE__ */ jsx("span", {
+				className: cn("advanced-tags__warn-text", "advanced-tags__warn-text--warnRight", { "advanced-tags__warn-text--warnRight--to-top": toTop }),
+				children: warnRightMsg
+			})
+		]
+	});
+	const renderWithEntityAndCounterTag = () => {
+		const isNullcounter = entityAndCounter?.counter?.toString() === "0";
+		return /* @__PURE__ */ jsxs("div", {
+			"data-testid": testId,
+			className: advancedTagClass,
+			ref: hintRef,
+			children: [
+				isNullcounter && /* @__PURE__ */ jsx("div", {
+					"data-testid": `${testId}-left`,
+					className: "advanced-tags--warning-icon-wrapper",
+					onMouseEnter: () => onWarningClick("warnLeft"),
+					onMouseLeave: () => setIsOpen(false),
+					children: /* @__PURE__ */ jsx(AlertTriangle, {
+						width: 16,
+						height: 16,
+						className: "advanced-tags--warning-icon mr5"
+					})
+				}),
+				isOpen && entityAndCounter?.nullCounterMessage && clickedWarning === "warnLeft" && /* @__PURE__ */ jsx("span", {
+					className: cn("advanced-tags__warn-text advanced-tags__warn-text--warnLeft", { "advanced-tags__warn-text--warnLeft--to-top": toTop }),
+					children: entityAndCounter.nullCounterMessage
+				}),
+				entityAndCounter?.title && /* @__PURE__ */ jsx("span", {
+					className: "mr5",
+					children: entityAndCounter.title
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: cn("advanced-tags__counter", {
+						"advanced-tags__counter--null": isNullcounter,
+						"advanced-tags__counter--bold": !isNullcounter
+					}),
+					children: entityAndCounter?.counter
+				})
+			]
+		});
+	};
+	return !isEntityAndCounter ? renderClassicTag() : renderWithEntityAndCounterTag();
+};
+//#endregion
+export { AdvTag as default };
+
+//# sourceMappingURL=AdvTag.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AdvTag.js","names":[],"sources":["../../../../../src/Atomic/UI/AdvancedTag/AdvTag.tsx"],"sourcesContent":["import type { MouseEvent } from 'react';\nimport type { IAdvTagProps } from './AdvancedTags.interface';\n\nimport cn from 'classnames';\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { AlertTriangle } from 'react-feather';\n\nimport './AdvancedTags.scss';\n\nconst AdvTag: React.FC<IAdvTagProps> = ({\n  item,\n  className,\n  testId = 'adv-tag',\n  toTop = true,\n}) => {\n  const {\n    labelLeft,\n    labelRight,\n    active = 0,\n    pause = 0,\n    merchants,\n    warnLeft,\n    warnLeftMsg,\n    warnRightMsg,\n    isEntityAndCounter = false,\n    entityAndCounter = {\n      nullCounterMessage: '',\n      title: '',\n      counter: null,\n    },\n    type,\n  } = item;\n\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const [clickedWarning, setClickedWarning] = useState<string>('');\n  const hintRef = useRef<HTMLDivElement>(null);\n\n  const activeNumberClass = cn('strong', {\n    'color--pause': active === 0,\n    'color--green-haze': active > 0,\n  });\n\n  const pauseNumberClass = cn('strong', {\n    'color--pause': pause === 0,\n    'color--light-red': pause > 0,\n  });\n\n  const isEmptyEntitys\n    = (isEntityAndCounter\n      && (!entityAndCounter?.counter || entityAndCounter.counter === 0))\n    || (!isEntityAndCounter && (warnLeft || !merchants));\n\n  const advancedTagClass = cn('advanced-tags', {\n    'advanced-tags--error': isEmptyEntitys,\n  }, className);\n\n  const onWarningClick = (warn: string): void => {\n    setIsOpen(true);\n    setClickedWarning(warn);\n  };\n\n  const handleClickOutside = (event: MouseEvent | Event): void => {\n    if (hintRef.current && !hintRef.current.contains(event.target as Node)) {\n      setIsOpen(false);\n    }\n  };\n\n  useEffect(() => {\n    document.addEventListener('click', handleClickOutside, true);\n    return () => {\n      document.removeEventListener('click', handleClickOutside, true);\n    };\n  }, []);\n\n  if (!item) return null;\n\n  const renderClassicTag = (): JSX.Element => (\n    <div data-testid={testId} className={advancedTagClass} ref={hintRef}>\n      {warnLeft && (\n        <div\n          data-testid={`${testId}-left`}\n          className=\"advanced-tags--warning-icon-wrapper\"\n          onMouseEnter={() => onWarningClick('warnLeft')}\n          onMouseLeave={() => setIsOpen(false)}\n        >\n          <AlertTriangle\n            width={16}\n            height={16}\n            className=\"advanced-tags--warning-icon mr5\"\n          />\n        </div>\n      )}\n\n      {labelLeft && <span className=\"mr5\">{labelLeft}</span>}\n      {labelRight && <span>{labelRight}</span>}\n\n      {type !== 'simple' && <span className=\"ml5 mr5\">|</span>}\n      {type !== 'simple' && (\n        <div className=\"df\">\n          <span className={activeNumberClass}>{active}</span>\n          <span className=\"strong color--pause\">/</span>\n          <span className={pauseNumberClass}>{pause}</span>\n        </div>\n      )}\n\n      {type !== 'simple' && <span className=\"ml5 mr5\">|</span>}\n\n      {merchants\n        ? (\n            <span>{merchants}</span>\n          )\n        : (\n            type !== 'simple' && (\n              <div\n                data-testid={`${testId}-right`}\n                className=\"advanced-tags--warning-icon-wrapper\"\n                onMouseEnter={() => onWarningClick('warnRight')}\n                onMouseLeave={() => setIsOpen(false)}\n              >\n                <AlertTriangle\n                  width={16}\n                  height={16}\n                  className=\"advanced-tags--warning-icon\"\n                />\n              </div>\n            )\n          )}\n\n      {isOpen && warnLeftMsg && clickedWarning === 'warnLeft' && (\n        <span\n          className={cn(\n            'advanced-tags__warn-text advanced-tags__warn-text--warnLeft',\n            { 'advanced-tags__warn-text--warnLeft--to-top': toTop },\n          )}\n        >\n          {warnLeftMsg}\n        </span>\n      )}\n\n      {isOpen && warnRightMsg && clickedWarning === 'warnRight' && (\n        <span\n          className={cn(\n            'advanced-tags__warn-text',\n            'advanced-tags__warn-text--warnRight',\n            { 'advanced-tags__warn-text--warnRight--to-top': toTop },\n          )}\n        >\n          {warnRightMsg}\n        </span>\n      )}\n    </div>\n  );\n\n  const renderWithEntityAndCounterTag = (): JSX.Element => {\n    const isNullcounter = entityAndCounter?.counter?.toString() === '0';\n\n    return (\n      <div data-testid={testId} className={advancedTagClass} ref={hintRef}>\n        {isNullcounter && (\n          <div\n            data-testid={`${testId}-left`}\n            className=\"advanced-tags--warning-icon-wrapper\"\n            onMouseEnter={() => onWarningClick('warnLeft')}\n            onMouseLeave={() => setIsOpen(false)}\n          >\n            <AlertTriangle\n              width={16}\n              height={16}\n              className=\"advanced-tags--warning-icon mr5\"\n            />\n          </div>\n        )}\n\n        {isOpen\n          && entityAndCounter?.nullCounterMessage\n          && clickedWarning === 'warnLeft' && (\n          <span\n            className={cn(\n              'advanced-tags__warn-text advanced-tags__warn-text--warnLeft',\n              { 'advanced-tags__warn-text--warnLeft--to-top': toTop },\n            )}\n          >\n            {entityAndCounter.nullCounterMessage}\n          </span>\n        )}\n\n        {entityAndCounter?.title && (\n          <span className=\"mr5\">{entityAndCounter.title}</span>\n        )}\n\n        <div\n          className={cn('advanced-tags__counter', {\n            'advanced-tags__counter--null': isNullcounter,\n            'advanced-tags__counter--bold': !isNullcounter,\n          })}\n        >\n          {entityAndCounter?.counter}\n        </div>\n      </div>\n    );\n  };\n\n  return !isEntityAndCounter ? renderClassicTag() : renderWithEntityAndCounterTag();\n};\n\nexport default AdvTag;\n"],"mappings":"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"}

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

@@ -0,0 +1,40 @@
+import Tag from "../Tag/Tag.js";
+import AdvTag from "./AdvTag.js";
+import cn from "classnames";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Atomic/UI/AdvancedTag/AdvancedTags.tsx
+var AdvancedTags = ({ items, noItemsTagLabel, className, testId = "advanced-tag-test", toTop = true }) => {
+	const [showedItems, setShowedItems] = useState(items.slice(0, 2));
+	const [showMore, setShowMore] = useState(true);
+	const onShowMoreClick = () => {
+		setShowedItems(showMore ? items : items.slice(0, 2));
+		setShowMore(!showMore);
+	};
+	if ((!items || !items.length) && noItemsTagLabel) return /* @__PURE__ */ jsx(Tag, {
+		label: noItemsTagLabel?.toString(),
+		className: cn(className, "tag-warn")
+	});
+	if ((!items || !items.length) && !noItemsTagLabel) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": testId,
+		className: cn(className, "j4 wrap"),
+		children: [showedItems.map((item, index) => {
+			if (!item) return null;
+			return /* @__PURE__ */ jsx(AdvTag, {
+				toTop,
+				item,
+				testId: `${testId}-item-${index}`
+			}, index);
+		}), items.length >= 3 && /* @__PURE__ */ jsx("span", {
+			"data-testid": `${testId}-showMore`,
+			onClick: onShowMoreClick,
+			className: "advanced-tags advanced-tags--showMore",
+			children: showMore ? `+${items.length - showedItems.length}` : "..."
+		})]
+	});
+};
+//#endregion
+export { AdvancedTags as default };
+
+//# sourceMappingURL=AdvancedTags.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AdvancedTags.js","names":[],"sources":["../../../../../src/Atomic/UI/AdvancedTag/AdvancedTags.tsx"],"sourcesContent":["import type { IAdvancedTagsItemProps, IAdvancedTagsProps } from './AdvancedTags.interface';\n\nimport cn from 'classnames';\n\nimport React, { useState } from 'react';\nimport Tag from '../Tag/Tag';\nimport AdvTag from './AdvTag';\n\nconst AdvancedTags: React.FC<IAdvancedTagsProps> = ({\n  items,\n  noItemsTagLabel,\n  className,\n  testId = 'advanced-tag-test',\n  toTop = true,\n}) => {\n  const [showedItems, setShowedItems] = useState<IAdvancedTagsItemProps[]>(items.slice(0, 2));\n\n  const [showMore, setShowMore] = useState<boolean>(true);\n\n  const onShowMoreClick = (): void => {\n    setShowedItems(showMore ? items : items.slice(0, 2));\n    setShowMore(!showMore);\n  };\n\n  if ((!items || !items.length) && noItemsTagLabel) {\n    return (\n      <Tag\n        label={noItemsTagLabel?.toString()}\n        className={cn(className, 'tag-warn')}\n      />\n    );\n  }\n\n  if ((!items || !items.length) && !noItemsTagLabel) return null;\n\n  return (\n    <div data-testid={testId} className={cn(className, 'j4 wrap')}>\n      {showedItems.map((item, index) => {\n        if (!item) return null;\n        return (\n          <AdvTag\n            toTop={toTop}\n            key={index}\n            item={item}\n            testId={`${testId}-item-${index}`}\n          />\n        )\n      })}\n\n      {items.length >= 3 && (\n        <span\n          data-testid={`${testId}-showMore`}\n          onClick={onShowMoreClick}\n          className=\"advanced-tags advanced-tags--showMore\"\n        >\n          {showMore ? `+${items.length - showedItems.length}` : '...'}\n        </span>\n      )}\n    </div>\n  );\n};\n\nexport default AdvancedTags;\n"],"mappings":";;;;;;AAQA,IAAM,gBAA8C,EAClD,OACA,iBACA,WACA,SAAS,qBACT,QAAQ,WACJ;CACJ,MAAM,CAAC,aAAa,kBAAkB,SAAmC,MAAM,MAAM,GAAG,CAAC,CAAC;CAE1F,MAAM,CAAC,UAAU,eAAe,SAAkB,IAAI;CAEtD,MAAM,wBAA8B;EAClC,eAAe,WAAW,QAAQ,MAAM,MAAM,GAAG,CAAC,CAAC;EACnD,YAAY,CAAC,QAAQ;CACvB;CAEA,KAAK,CAAC,SAAS,CAAC,MAAM,WAAW,iBAC/B,OACE,oBAAC,KAAD;EACE,OAAO,iBAAiB,SAAS;EACjC,WAAW,GAAG,WAAW,UAAU;CACpC,CAAA;CAIL,KAAK,CAAC,SAAS,CAAC,MAAM,WAAW,CAAC,iBAAiB,OAAO;CAE1D,OACE,qBAAC,OAAD;EAAK,eAAa;EAAQ,WAAW,GAAG,WAAW,SAAS;YAA5D,CACG,YAAY,KAAK,MAAM,UAAU;GAChC,IAAI,CAAC,MAAM,OAAO;GAClB,OACE,oBAAC,QAAD;IACS;IAED;IACN,QAAQ,GAAG,OAAO,QAAQ;GAC3B,GAHM,KAGN;EAEL,CAAC,GAEA,MAAM,UAAU,KACf,oBAAC,QAAD;GACE,eAAa,GAAG,OAAO;GACvB,SAAS;GACT,WAAU;aAET,WAAW,IAAI,MAAM,SAAS,YAAY,WAAW;EAClD,CAAA,CAEL;;AAET"}

package/dist/es/Atomic/UI/AdvancedTag/AdvancedTags.styles.css

@@ -0,0 +1,106 @@
+.advanced-tags {
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  height: 24px;
+  margin-top: 2.5px;
+  margin-right: 4px;
+  margin-bottom: 2.5px;
+  padding: 2px 8px;
+  font-size: 10px;
+  border-radius: 2px;
+  background-color: #e2e5ec;
+}
+.advanced-tags--error {
+  background-color: #fce2e8;
+}
+.advanced-tags--warning-icon {
+  min-width: 16px;
+  min-height: 16px;
+  font-size: 17px;
+  color: #f06d8d;
+}
+.advanced-tags--warning-icon-wrapper {
+  display: flex;
+  cursor: pointer;
+}
+.advanced-tags__warn-text {
+  position: absolute;
+  z-index: 2;
+  min-width: 80px;
+  max-width: 270px;
+  padding: 8px;
+  font-size: 10px;
+  line-height: 16px;
+  color: #fff;
+  border-radius: 4px;
+  background-color: #6b81dd;
+}
+.advanced-tags__warn-text::before {
+  position: absolute;
+  width: 8.5px;
+  height: 8.5px;
+  content: "";
+  background-color: #6b81dd;
+  transform: rotate(45deg);
+}
+.advanced-tags__warn-text--warnLeft {
+  top: 30px;
+  left: 4px;
+}
+.advanced-tags__warn-text--warnLeft::before {
+  top: -4px;
+  left: 8px;
+}
+.advanced-tags__warn-text--warnLeft--to-top {
+  top: -50px;
+}
+.advanced-tags__warn-text--warnRight {
+  top: 30px;
+}
+.advanced-tags__warn-text--warnRight::before {
+  top: -4px;
+  right: 10px;
+}
+.advanced-tags__warn-text--warnRight--to-top {
+  top: -50px;
+}
+.advanced-tags--showMore {
+  cursor: pointer;
+  user-select: none;
+  background-color: #ffedc8;
+}
+.advanced-tags__counter {
+  position: relative;
+  width: fit-content;
+  margin-right: -8px;
+  padding: 0 8px;
+  text-align: center;
+}
+.advanced-tags__counter::after {
+  position: absolute;
+  top: -4px;
+  left: 0;
+  width: 2px;
+  height: 27px;
+  content: "";
+  opacity: 0.2;
+  background-color: #9aa0b9;
+}
+.advanced-tags__counter--null {
+  opacity: 0.7;
+  color: #9aa0b9;
+}
+.advanced-tags__counter--bold {
+  font-family: Roboto, sans-serif;
+  font-size: 11px;
+  font-weight: 700;
+  color: #1e1e2d;
+}
+.advanced-tags svg {
+  min-width: 16px;
+  max-width: 16px;
+  min-height: 16px;
+  max-height: 16px;
+}

package/dist/es/Atomic/UI/AdvancedTag/index.js

@@ -0,0 +1,8 @@
+import AdvTag from "./AdvTag.js";
+import AdvancedTags from "./AdvancedTags.js";
+//#region src/Atomic/UI/AdvancedTag/index.ts
+var AdvancedTag_default = AdvancedTags;
+//#endregion
+export { AdvTag, AdvancedTag_default as default };
+
+//# sourceMappingURL=index.js.map

package/dist/es/Atomic/UI/AdvancedTag/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/Atomic/UI/AdvancedTag/index.ts"],"sourcesContent":["import AdvancedTags from './AdvancedTags';\nimport AdvTag from './AdvTag';\n\nexport default AdvancedTags;\n\nexport { AdvTag };\n\nexport type { IAdvancedTagsItemProps, IAdvancedTagsProps, IAdvTagProps } from './AdvancedTags.interface';\n"],"mappings":";;;AAGA,IAAA,sBAAe"}

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

@@ -0,0 +1,54 @@
+import '../../../styles/base.css';
+import Button from "../Button/Button.js";
+import Spinner from "../../Layout/Spinner/Spinner.js";
+import './Alert.styles.css';/* empty css           */
+import cn from "classnames";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { X } from "react-feather";
+//#region src/Atomic/UI/Alert/Alert.tsx
+var Alert = ({ message, icon, className, children, noDismiss, testId = "alert", isHidden = false, variant = "warning", isLoading, buttonParams }) => {
+	const [onClose, setOnClose] = useState(false);
+	const renderActionsBlock = () => {
+		if (buttonParams) return /* @__PURE__ */ jsxs("div", {
+			className: "j6 alert__btns-box",
+			children: [/* @__PURE__ */ jsx(Button, { ...buttonParams }), !noDismiss && /* @__PURE__ */ jsx("div", {
+				className: "alert__close-btn",
+				children: /* @__PURE__ */ jsx(X, {
+					"data-testid": `${testId}-close`,
+					onClick: () => setOnClose(!onClose)
+				})
+			})]
+		});
+		if (!noDismiss) return /* @__PURE__ */ jsx("div", {
+			className: "alert__close-btn",
+			children: /* @__PURE__ */ jsx(X, {
+				"data-testid": `${testId}-close`,
+				onClick: () => setOnClose(!onClose)
+			})
+		});
+		else return null;
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": testId,
+		className: cn(className, { hidden: onClose }, `alert alert--${variant}`, {
+			"hidden": isHidden,
+			"alert--loading": isLoading
+		}),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "alert__icon-text-box j4",
+				children: [icon, /* @__PURE__ */ jsx("div", { children: children || message })]
+			}),
+			renderActionsBlock(),
+			isLoading && /* @__PURE__ */ jsx(Spinner, {
+				size: "small",
+				testId: "loader-box"
+			})
+		]
+	});
+};
+//#endregion
+export { Alert as default };
+
+//# sourceMappingURL=Alert.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","names":[],"sources":["../../../../../src/Atomic/UI/Alert/Alert.tsx"],"sourcesContent":["import type { IAlertProps } from './Alert.interface';\n\nimport cn from 'classnames';\nimport React, { useState } from 'react';\n\nimport { X } from 'react-feather';\nimport Spinner from '../../Layout/Spinner/Spinner';\nimport Button from '../Button/Button';\n\nimport './Alert.scss';\n\nconst Alert: React.FC<IAlertProps> = ({\n  message,\n  icon,\n  className,\n  children,\n  noDismiss,\n  testId = 'alert',\n  isHidden = false,\n  variant = 'warning',\n  isLoading,\n  buttonParams,\n}) => {\n  const [onClose, setOnClose] = useState(false);\n\n  const renderActionsBlock = (): JSX.Element | null => {\n    if (buttonParams) {\n      return (\n        <div className=\"j6 alert__btns-box\">\n          <Button {...buttonParams} />\n          {!noDismiss && (\n            <div className=\"alert__close-btn\">\n              <X data-testid={`${testId}-close`} onClick={() => setOnClose(!onClose)} />\n            </div>\n          )}\n        </div>\n      );\n    }\n\n    if (!noDismiss) {\n      return (\n        <div className=\"alert__close-btn\">\n          <X data-testid={`${testId}-close`} onClick={() => setOnClose(!onClose)} />\n        </div>\n      );\n    }\n\n    else {\n      return null;\n    }\n  };\n\n  return (\n    <div\n      data-testid={testId}\n      className={cn(className, { hidden: onClose }, `alert alert--${variant}`, {\n        'hidden': isHidden,\n        'alert--loading': isLoading,\n      })}\n    >\n      <div className=\"alert__icon-text-box j4\">\n        {icon}\n        <div>{children || message}</div>\n      </div>\n      {renderActionsBlock()}\n      {isLoading && <Spinner size=\"small\" testId=\"loader-box\" />}\n    </div>\n  );\n};\n\nexport default Alert;\n"],"mappings":";;;;;;;;AAWA,IAAM,SAAgC,EACpC,SACA,MACA,WACA,UACA,WACA,SAAS,SACT,WAAW,OACX,UAAU,WACV,WACA,mBACI;CACJ,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,MAAM,2BAA+C;EACnD,IAAI,cACF,OACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,QAAD,EAAQ,GAAI,aAAe,CAAA,GAC1B,CAAC,aACA,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,GAAD;KAAG,eAAa,GAAG,OAAO;KAAS,eAAe,WAAW,CAAC,OAAO;IAAI,CAAA;GACtE,CAAA,CAEJ;;EAIT,IAAI,CAAC,WACH,OACE,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,GAAD;IAAG,eAAa,GAAG,OAAO;IAAS,eAAe,WAAW,CAAC,OAAO;GAAI,CAAA;EACtE,CAAA;OAKP,OAAO;CAEX;CAEA,OACE,qBAAC,OAAD;EACE,eAAa;EACb,WAAW,GAAG,WAAW,EAAE,QAAQ,QAAQ,GAAG,gBAAgB,WAAW;GACvE,UAAU;GACV,kBAAkB;EACpB,CAAC;YALH;GAOE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,MACD,oBAAC,OAAD,EAAA,UAAM,YAAY,QAAa,CAAA,CAC5B;;GACJ,mBAAmB;GACnB,aAAa,oBAAC,SAAD;IAAS,MAAK;IAAQ,QAAO;GAAc,CAAA;EACtD;;AAET"}

package/dist/es/Atomic/UI/Alert/Alert.styles.css

@@ -0,0 +1,65 @@
+.alert {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 15px;
+  font-size: 13px;
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+.alert--loading .loader-box {
+  opacity: 0.2;
+}
+.alert--error {
+  color: #f06d8d;
+  border-left: 2px solid #f06d8d;
+  background-color: #fce2e8;
+}
+.alert--warning {
+  color: #f59a2f;
+  border-left: 2px solid #f59a2f;
+  background-color: #ffedc8;
+}
+.alert--success {
+  color: #00b031;
+  border-left: 2px solid #00b031;
+  background-color: #e4f3e8;
+}
+.alert--info {
+  color: #6b81dd;
+  border-left: 2px solid #6b81dd;
+  background-color: #e2e6f8;
+}
+.alert__close-btn {
+  display: flex;
+  justify-content: flex-end;
+  align-self: flex-start;
+  min-width: 15px;
+  margin-left: 10px;
+  cursor: pointer;
+  user-select: none;
+}
+.alert--title {
+  height: 37px;
+  font-size: 13px;
+  font-weight: 400;
+  text-transform: uppercase;
+  color: #1e1e2d;
+  border-radius: 4px;
+  background-color: #ebeff2;
+}
+.alert--title .alert__close-btn {
+  display: none;
+}
+.alert__icon-text-box svg {
+  margin-right: 10px;
+}
+.alert svg {
+  align-self: flex-start;
+  width: 16px;
+  min-width: 16px;
+  height: 16px;
+}

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

@@ -0,0 +1,7 @@
+import Alert from "./Alert.js";
+//#region src/Atomic/UI/Alert/index.ts
+var Alert_default = Alert;
+//#endregion
+export { Alert_default as default };
+
+//# sourceMappingURL=index.js.map

package/dist/es/Atomic/UI/Alert/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/Atomic/UI/Alert/index.ts"],"sourcesContent":["import type { IAlertProps } from './Alert.interface';\nimport Alert from './Alert';\n\nexport type { IAlertProps };\nexport default Alert;\n"],"mappings":";;AAIA,IAAA,gBAAe"}

package/dist/es/Atomic/UI/Arrow/Arrow.js

@@ -0,0 +1,107 @@
+import '../../../styles/base.css';
+import { getStyles } from "../../../Functions/utils.js";
+import './Arrow.styles.css';/* empty css           */
+import cn from "classnames";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Atomic/UI/Arrow/Arrow.tsx
+function Arrow({ type, className, onClick, disabled, testId, isAlt }) {
+	const ref = useRef(null);
+	const [color, setColor] = useState("currentColor");
+	useEffect(() => {
+		if (ref.current) setColor(getStyles(ref.current, "color"));
+	}, [ref.current]);
+	if (!type || type !== "left" && type !== "right") return null;
+	function renderSVG() {
+		if (type === "left") {
+			if (isAlt) return /* @__PURE__ */ jsxs("svg", {
+				"data-testid": testId,
+				version: "1.1",
+				id: "Layer_1",
+				xmlns: "http://www.w3.org/2000/svg",
+				width: "16",
+				height: "16",
+				viewBox: "0 0 16 16",
+				children: [/* @__PURE__ */ jsx("path", {
+					d: "M12.7,8H3.3",
+					stroke: color,
+					fill: "none",
+					strokeWidth: 1.3333,
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				}), /* @__PURE__ */ jsx("path", {
+					d: "M8,3.3L3.3,8L8,12.7",
+					stroke: color,
+					fill: "none",
+					strokeWidth: 1.3333,
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				})]
+			});
+			return /* @__PURE__ */ jsx("svg", {
+				"data-testid": testId,
+				width: "24",
+				height: "24",
+				viewBox: "0 0 24 24",
+				fill: "none",
+				xmlns: "http://www.w3.org/2000/svg",
+				children: /* @__PURE__ */ jsx("path", {
+					d: "M15 18L9 12L15 6",
+					stroke: color,
+					strokeWidth: "2",
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				})
+			});
+		}
+		if (isAlt) return /* @__PURE__ */ jsxs("svg", {
+			"data-testid": testId,
+			id: "Layer_1",
+			xmlns: "http://www.w3.org/2000/svg",
+			width: "16",
+			height: "16",
+			viewBox: "0 0 16 16",
+			children: [/* @__PURE__ */ jsx("path", {
+				d: "M3.3,8h9.3",
+				stroke: color,
+				fill: "none",
+				strokeWidth: 1.3333,
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			}), /* @__PURE__ */ jsx("path", {
+				d: "M8,3.3L12.7,8L8,12.7",
+				stroke: color,
+				fill: "none",
+				strokeWidth: 1.3333,
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})]
+		});
+		return /* @__PURE__ */ jsx("svg", {
+			"data-testid": testId,
+			width: "24",
+			height: "24",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			xmlns: "http://www.w3.org/2000/svg",
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M9 18L15 12L9 6",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx("div", {
+		"data-testid": `arrow--key-${testId}--type-${type}`,
+		ref,
+		className: cn("arrow", `arrow_${type}`, className, { arrow_disabled: disabled }),
+		onClick,
+		children: renderSVG()
+	});
+}
+//#endregion
+export { Arrow as default };
+
+//# sourceMappingURL=Arrow.js.map

package/dist/es/Atomic/UI/Arrow/Arrow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Arrow.js","names":[],"sources":["../../../../../src/Atomic/UI/Arrow/Arrow.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\n\nimport type { IArrowProps } from './Arrow.interface';\nimport cn from 'classnames';\n\nimport { useEffect, useRef, useState } from 'react';\n\nimport { getStyles } from '../../../Functions/utils';\nimport './Arrow.scss';\n\nfunction Arrow({ type, className, onClick, disabled, testId, isAlt }: IArrowProps): ReactElement | null {\n  const ref = useRef<HTMLDivElement>(null);\n  const [color, setColor] = useState<string>('currentColor');\n\n  useEffect(() => {\n    if (ref.current) {\n      setColor(getStyles(ref.current, 'color') as string);\n    }\n  }, [ref.current]);\n  if (!type || (type !== 'left' && type !== 'right')) return null;\n\n  function renderSVG(): ReactNode {\n    if (type === 'left') {\n      if (isAlt) {\n        return (\n          <svg\n            data-testid={testId}\n            version=\"1.1\"\n            id=\"Layer_1\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              d=\"M12.7,8H3.3\"\n              stroke={color}\n              fill=\"none\"\n              strokeWidth={1.3333}\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n            <path\n              d=\"M8,3.3L3.3,8L8,12.7\"\n              stroke={color}\n              fill=\"none\"\n              strokeWidth={1.3333}\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        );\n      }\n      return (\n        <svg\n          data-testid={testId}\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M15 18L9 12L15 6\"\n            stroke={color}\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      );\n    }\n    if (isAlt) {\n      return (\n        <svg\n          data-testid={testId}\n          id=\"Layer_1\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n        >\n          <path\n            d=\"M3.3,8h9.3\"\n            stroke={color}\n            fill=\"none\"\n            strokeWidth={1.3333}\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n          <path\n            d=\"M8,3.3L12.7,8L8,12.7\"\n            stroke={color}\n            fill=\"none\"\n            strokeWidth={1.3333}\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      );\n    }\n    return (\n      <svg\n        data-testid={testId}\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M9 18L15 12L9 6\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n    );\n  }\n\n  return (\n    <div\n      data-testid={`arrow--key-${testId}--type-${type}`}\n      ref={ref}\n      className={cn('arrow', `arrow_${type}`, className, {\n        arrow_disabled: disabled,\n      })}\n      onClick={onClick}\n    >\n      {renderSVG()}\n    </div>\n  );\n}\n\nexport default Arrow;\n"],"mappings":";;;;;;AAUA,SAAS,MAAM,EAAE,MAAM,WAAW,SAAS,UAAU,QAAQ,SAA2C;CACtG,MAAM,MAAM,OAAuB,IAAI;CACvC,MAAM,CAAC,OAAO,YAAY,SAAiB,cAAc;CAEzD,gBAAgB;EACd,IAAI,IAAI,SACN,SAAS,UAAU,IAAI,SAAS,OAAO,CAAW;CAEtD,GAAG,CAAC,IAAI,OAAO,CAAC;CAChB,IAAI,CAAC,QAAS,SAAS,UAAU,SAAS,SAAU,OAAO;CAE3D,SAAS,YAAuB;EAC9B,IAAI,SAAS,QAAQ;GACnB,IAAI,OACF,OACE,qBAAC,OAAD;IACE,eAAa;IACb,SAAQ;IACR,IAAG;IACH,OAAM;IACN,OAAM;IACN,QAAO;IACP,SAAQ;cAPV,CASE,oBAAC,QAAD;KACE,GAAE;KACF,QAAQ;KACR,MAAK;KACL,aAAa;KACb,eAAc;KACd,gBAAe;IAChB,CAAA,GACD,oBAAC,QAAD;KACE,GAAE;KACF,QAAQ;KACR,MAAK;KACL,aAAa;KACb,eAAc;KACd,gBAAe;IAChB,CAAA,CACE;;GAGT,OACE,oBAAC,OAAD;IACE,eAAa;IACb,OAAM;IACN,QAAO;IACP,SAAQ;IACR,MAAK;IACL,OAAM;cAEN,oBAAC,QAAD;KACE,GAAE;KACF,QAAQ;KACR,aAAY;KACZ,eAAc;KACd,gBAAe;IAChB,CAAA;GACE,CAAA;EAET;EACA,IAAI,OACF,OACE,qBAAC,OAAD;GACE,eAAa;GACb,IAAG;GACH,OAAM;GACN,OAAM;GACN,QAAO;GACP,SAAQ;aANV,CAQE,oBAAC,QAAD;IACE,GAAE;IACF,QAAQ;IACR,MAAK;IACL,aAAa;IACb,eAAc;IACd,gBAAe;GAChB,CAAA,GACD,oBAAC,QAAD;IACE,GAAE;IACF,QAAQ;IACR,MAAK;IACL,aAAa;IACb,eAAc;IACd,gBAAe;GAChB,CAAA,CACE;;EAGT,OACE,oBAAC,OAAD;GACE,eAAa;GACb,OAAM;GACN,QAAO;GACP,SAAQ;GACR,MAAK;GACL,OAAM;aAEN,oBAAC,QAAD;IACE,GAAE;IACF,QAAO;IACP,aAAY;IACZ,eAAc;IACd,gBAAe;GAChB,CAAA;EACE,CAAA;CAET;CAEA,OACE,oBAAC,OAAD;EACE,eAAa,cAAc,OAAO,SAAS;EACtC;EACL,WAAW,GAAG,SAAS,SAAS,QAAQ,WAAW,EACjD,gBAAgB,SAClB,CAAC;EACQ;YAER,UAAU;CACR,CAAA;AAET"}

package/dist/es/Atomic/UI/Arrow/Arrow.styles.css

@@ -0,0 +1,14 @@
+.arrow {
+  width: 24px;
+  height: 24px;
+}
+.arrow_disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.arrow > svg {
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}

package/dist/es/Atomic/UI/Box/Box.js

@@ -0,0 +1,33 @@
+import '../../../styles/base.css';
+import './Box.styles.css';/* empty css         */
+import cn from "classnames";
+import { jsx } from "react/jsx-runtime";
+//#region src/Atomic/UI/Box/Box.tsx
+var directionVariants = {
+	column: "column",
+	row: "row"
+};
+var sizes = {
+	none: "none",
+	xs: "xs",
+	s: "s",
+	m: "m",
+	l: "l",
+	xl: "xl"
+};
+function Box({ children, paddingVariant = sizes.m, radiiVariant = sizes.s, direction = directionVariants.column, className, ...restProps }) {
+	return /* @__PURE__ */ jsx("div", {
+		style: { flexDirection: direction },
+		"data-testid": "box",
+		className: cn("box", `box--padding-${paddingVariant}`, `box--radii-${radiiVariant}`, className, {
+			"df": direction === directionVariants.row,
+			"dfc-jc": direction === directionVariants.column
+		}),
+		...restProps,
+		children
+	});
+}
+//#endregion
+export { Box as default };
+
+//# sourceMappingURL=Box.js.map

package/dist/es/Atomic/UI/Box/Box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.js","names":[],"sources":["../../../../../src/Atomic/UI/Box/Box.tsx"],"sourcesContent":["// global\nimport type { CSSProperties, ReactElement } from 'react';\n\nimport type { IBoxProps } from './Box.interface';\nimport cn from 'classnames';\n\n// styles\nimport './Box.scss';\n\nconst directionVariants = {\n  column: 'column',\n  row: 'row',\n};\n\nconst sizes = {\n  none: 'none',\n  xs: 'xs',\n  s: 's',\n  m: 'm',\n  l: 'l',\n  xl: 'xl',\n};\n\nfunction Box({\n  children,\n  paddingVariant = sizes.m,\n  radiiVariant = sizes.s,\n  direction = directionVariants.column,\n  className,\n  ...restProps\n}: IBoxProps): ReactElement {\n  const styles: CSSProperties = {\n    flexDirection: direction as 'row' | 'row-reverse' | 'column' | 'column-reverse',\n  };\n  return (\n    <div\n      style={styles}\n      data-testid=\"box\"\n      className={cn(\n        'box',\n        `box--padding-${paddingVariant}`,\n        `box--radii-${radiiVariant}`,\n        className,\n        {\n          'df': direction === directionVariants.row,\n          'dfc-jc': direction === directionVariants.column,\n        },\n      )}\n      {...restProps}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport default Box;\n"],"mappings":";;;;AASA,IAAM,oBAAoB;CACxB,QAAQ;CACR,KAAK;AACP;AAEA,IAAM,QAAQ;CACZ,MAAM;CACN,IAAI;CACJ,GAAG;CACH,GAAG;CACH,GAAG;CACH,IAAI;AACN;AAEA,SAAS,IAAI,EACX,UACA,iBAAiB,MAAM,GACvB,eAAe,MAAM,GACrB,YAAY,kBAAkB,QAC9B,WACA,GAAG,aACuB;CAI1B,OACE,oBAAC,OAAD;EACE,OAAO,EAJT,eAAe,UAIN;EACP,eAAY;EACZ,WAAW,GACT,OACA,gBAAgB,kBAChB,cAAc,gBACd,WACA;GACE,MAAM,cAAc,kBAAkB;GACtC,UAAU,cAAc,kBAAkB;EAC5C,CACF;EACA,GAAI;EAEH;CACE,CAAA;AAET"}