intelicoreact 2.0.18 → 2.0.20

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

@@ -0,0 +1,152 @@
+import '../../../styles/base.css';
+import { checkedRef } from "../../../Functions/utils.js";
+import Tag$1 from "../Tag/Tag.js";
+import './TagList.styles.css';/* empty css             */
+import cn from "classnames";
+import { createRef, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Edit3 } from "react-feather";
+//#region src/Atomic/UI/TagList/TagList.tsx
+var TagList = ({ disabled, className, onTagClick, removeItem, items, withToggle = true, disableShowMore = false, shownItemsCount = "auto", testId = "test-taglist", refProp, renderOrder, onEditClick, onToggleRenderAll, isUseInTable }) => {
+	const wrapperRef = useRef(null);
+	const [tagList, setTagList] = useState([]);
+	const [staticTagsCount, setStaticTagsCount] = useState(-1);
+	const [renderItemsCount, setRenderItemsCount] = useState(-1);
+	const [renderAll, setRenderAll] = useState(!withToggle);
+	const wrapperWidth = wrapperRef?.current?.getBoundingClientRect()?.width ?? -1;
+	const setRenderAllInterceptor = (v, event) => {
+		setRenderAll(v);
+		onToggleRenderAll?.(v);
+		event?.stopPropagation();
+		event?.preventDefault();
+	};
+	const getStaticTagsCount = (computedWidth) => {
+		if (typeof shownItemsCount === "number") return shownItemsCount;
+		const delta = typeof onEditClick === "function" ? 60 : 32;
+		const result = tagList.reduce((result, { itemRef }, index) => {
+			if (result.skip) return result;
+			const itemStyle = itemRef?.current && window.getComputedStyle(itemRef.current);
+			const itemWidth = [
+				Number.parseInt((itemRef.current?.getBoundingClientRect()?.width ?? 0).toString(), 10),
+				Number.parseInt((itemStyle?.marginLeft ?? 0).toString(), 10),
+				Number.parseInt((itemStyle?.marginRight ?? 0).toString(), 10)
+			].reduce((result, item) => {
+				if (!Number.isNaN(item)) result += item;
+				return result;
+			}, 0);
+			if (!Number.isNaN(itemWidth) && itemWidth > 0 && itemWidth + result.width < computedWidth - delta || index === 0) result = {
+				count: result.count + 1,
+				width: result.width + itemWidth,
+				items: [...result.items, {
+					w: itemWidth,
+					r: itemRef?.current
+				}]
+			};
+			else result.skip = true;
+			return result;
+		}, {
+			count: 0,
+			width: 0,
+			items: [],
+			skip: false
+		});
+		if (result?.items?.length === 1 && result.items[0].r && tagList.length > 1) result.items[0].r.style.maxWidth = `${computedWidth - delta - 8}px`;
+		return result?.count;
+	};
+	const cancelDefault = (_e, cb) => {
+		cb?.();
+	};
+	const renderTags = () => {
+		return (renderOrder ?? tagList.map(({ value, id }) => id ?? value)).map((v, i) => {
+			const item = tagList.find(({ value, id }) => {
+				if (id) return id === v;
+				if (value) return value === v;
+				return false;
+			});
+			if (!item) return null;
+			return /* @__PURE__ */ jsx("div", {
+				className: `tag-list_wrapper_item ${(renderItemsCount !== -1 && staticTagsCount !== -1 ? i >= renderItemsCount : false) ? "tag-list_wrapper_item--hidden" : ""}`,
+				ref: checkedRef(item?.itemRef),
+				children: /* @__PURE__ */ jsx(Tag$1, {
+					testId: `test-taglist-item-${item?.id ?? item?.value}`,
+					...item,
+					onClick: onTagClick,
+					removeItem,
+					isUseInTable
+				})
+			}, `tag-list-item-${item?.id ?? item?.value}`);
+		});
+	};
+	const renderMoreTags = () => {
+		if (typeof shownItemsCount === "number" && tagList?.length < shownItemsCount || !tagList?.length || disableShowMore) return null;
+		const restItems = tagList.length - renderItemsCount;
+		if (restItems === 0 || !withToggle || staticTagsCount === -1) return null;
+		return /* @__PURE__ */ jsx(Tag$1, {
+			label: `+${restItems}`,
+			className: "tag-list_wrapper_render-more",
+			onClick: disableShowMore ? () => {} : (value, event) => cancelDefault(value, () => setRenderAllInterceptor(true, event)),
+			isUseInTable
+		});
+	};
+	const renderHideTags = () => {
+		if (renderItemsCount !== tagList?.length || !withToggle || staticTagsCount === -1 || staticTagsCount === tagList?.length) return null;
+		return /* @__PURE__ */ jsx(Tag$1, {
+			label: "...",
+			className: "tag-list_wrapper_hide-more",
+			onClick: (value, event) => cancelDefault(value, () => setRenderAllInterceptor(false, event)),
+			isUseInTable
+		});
+	};
+	useEffect(() => {
+		setStaticTagsCount(-1);
+		setRenderItemsCount(-1);
+		setRenderAllInterceptor(false, null);
+		const itemsWithRef = items.map((item) => ({
+			...item,
+			itemRef: createRef()
+		}));
+		setTagList(itemsWithRef);
+	}, [items]);
+	useLayoutEffect(() => {
+		if (withToggle && wrapperWidth !== -1 && staticTagsCount === -1) {
+			let computedWidth = wrapperWidth;
+			if (computedWidth === 0) computedWidth = Number.parseInt((wrapperRef?.current ? window.getComputedStyle(wrapperRef?.current)?.width : 0).toString());
+			if (!Number.isNaN(computedWidth)) setStaticTagsCount(getStaticTagsCount(computedWidth));
+		}
+	}, [
+		tagList,
+		wrapperWidth,
+		wrapperRef?.current
+	]);
+	useLayoutEffect(() => {
+		setRenderItemsCount(staticTagsCount);
+	}, [staticTagsCount]);
+	useEffect(() => {
+		setRenderItemsCount(renderAll ? tagList?.length : staticTagsCount);
+	}, [renderAll]);
+	useEffect(() => {
+		if (wrapperRef?.current && refProp) refProp.current = wrapperRef?.current;
+	}, [wrapperRef?.current]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": testId,
+		className: cn("tag-list_wrapper", `${renderItemsCount !== tagList?.length || !withToggle || staticTagsCount === -1 || staticTagsCount === tagList?.length ? "tag-list_wrapper--only-static-items" : "tag-list_wrapper--all-items"}`, className, { "tag-list_wrapper--disabled": disabled }),
+		style: {
+			visibility: staticTagsCount === -1 ? "hidden" : "visible",
+			zIndex: staticTagsCount === -1 ? "-1" : "auto"
+		},
+		ref: wrapperRef,
+		children: [
+			renderTags(),
+			renderMoreTags(),
+			renderHideTags(),
+			typeof onEditClick === "function" && /* @__PURE__ */ jsx("div", {
+				className: "tag-list__edit-trigger",
+				children: /* @__PURE__ */ jsx(Edit3, { onClick: onEditClick })
+			})
+		]
+	});
+};
+//#endregion
+export { TagList as default };
+
+//# sourceMappingURL=TagList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TagList.js","names":[],"sources":["../../../../../src/Atomic/UI/TagList/TagList.tsx"],"sourcesContent":["import type { ITagProps } from '../Tag/Tag.interface';\n\nimport type { ITagListProps } from './TagList.interface';\nimport cn from 'classnames';\n\nimport {\n  createRef,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { Edit3 } from 'react-feather';\n\nimport { checkedRef } from '../../../Functions/utils';\nimport Tag from '../Tag/Tag';\nimport './TagList.scss';\n\nconst TagList: React.FC<ITagListProps> = ({\n  disabled,\n  className,\n  onTagClick,\n  removeItem,\n  items,\n  withToggle = true,\n  disableShowMore = false,\n  shownItemsCount = 'auto',\n  testId = 'test-taglist',\n  refProp,\n\n  renderOrder,\n\n  onEditClick,\n  onToggleRenderAll,\n  isUseInTable,\n}) => {\n  const wrapperRef = useRef<HTMLDivElement | null>(null);\n  const [tagList, setTagList] = useState<(ITagProps & { itemRef: React.RefObject<HTMLDivElement> })[]>([]);\n\n  const [staticTagsCount, setStaticTagsCount] = useState(-1);\n  const [renderItemsCount, setRenderItemsCount] = useState(-1);\n  const [renderAll, setRenderAll] = useState(!withToggle);\n\n  const wrapperWidth\n    = wrapperRef?.current?.getBoundingClientRect()?.width ?? -1;\n\n  const setRenderAllInterceptor = (v: boolean, event: any): void => {\n    setRenderAll(v);\n    onToggleRenderAll?.(v);\n    event?.stopPropagation();\n    event?.preventDefault();\n  };\n\n  const getStaticTagsCount = (computedWidth: number): number => {\n    if (typeof shownItemsCount === 'number') return shownItemsCount;\n\n    const delta = typeof onEditClick === 'function' ? 60 : 32;\n    const result = tagList.reduce <{\n      count: number;\n      width: number;\n      items: { w: number; r: HTMLDivElement | null }[];\n      skip?: boolean;\n    }>((result, { itemRef }, index) => {\n      if (result.skip) return result;\n\n      const itemStyle\n          = itemRef?.current && window.getComputedStyle(itemRef.current);\n\n      const itemWidth = [\n        Number.parseInt((itemRef.current?.getBoundingClientRect()?.width ?? 0).toString(), 10),\n        Number.parseInt((itemStyle?.marginLeft ?? 0).toString(), 10),\n        Number.parseInt((itemStyle?.marginRight ?? 0).toString(), 10),\n      ].reduce((result, item) => {\n        if (!Number.isNaN(item)) result += item;\n        return result;\n      }, 0);\n\n      if (\n        (!Number.isNaN(itemWidth)\n          && itemWidth > 0\n          && itemWidth + result.width < computedWidth - delta)\n        || index === 0\n      ) {\n        result = {\n          count: result.count + 1,\n          width: result.width + itemWidth,\n          items: [...result.items, { w: itemWidth, r: itemRef?.current }],\n        };\n      }\n      else {\n        result.skip = true;\n      }\n\n      return result;\n    }, { count: 0, width: 0, items: [], skip: false });\n    if (result?.items?.length === 1 && result.items[0].r && tagList.length > 1) {\n      result.items[0].r.style.maxWidth = `${computedWidth - delta - 8}px`;\n    }\n\n    return result?.count;\n  };\n\n  const cancelDefault = (_e: string | undefined, cb: () => void): void => {\n    cb?.();\n  };\n\n  const renderTags = (): (JSX.Element | null)[] => {\n    const tagsRenderOrder\n      = renderOrder ?? tagList.map(({ value, id }) => id ?? value);\n\n    return tagsRenderOrder.map((v, i) => {\n      const item = tagList.find(({ value, id }) => {\n        // НЕ РЕФАКТОРИТЬ вариант через || дает необъяснимый сайд эффект\n        if (id) return id === v; // сначала ищем по id\n        if (value) return value === v; // потом по value\n        return false;\n      });\n\n      if (!item) return null;\n\n      const isHidden\n        = renderItemsCount !== -1 && staticTagsCount !== -1\n          ? i >= renderItemsCount\n          : false;\n\n      return (\n        <div\n          className={`tag-list_wrapper_item ${isHidden ? 'tag-list_wrapper_item--hidden' : ''}`}\n          key={`tag-list-item-${item?.id ?? item?.value}`}\n          ref={checkedRef(item?.itemRef)}\n        >\n          <Tag\n            testId={`test-taglist-item-${item?.id ?? item?.value}`}\n            {...item}\n            onClick={onTagClick}\n            removeItem={removeItem}\n            isUseInTable={isUseInTable}\n          />\n        </div>\n      );\n    });\n  };\n\n  const renderMoreTags = (): JSX.Element | null => {\n    if (\n      (typeof shownItemsCount === 'number' && tagList?.length < shownItemsCount)\n      || !tagList?.length\n      || disableShowMore\n    ) {\n      return null;\n    }\n    const restItems = tagList.length - renderItemsCount;\n\n    if (restItems === 0 || !withToggle || staticTagsCount === -1) return null;\n\n    return (\n      <Tag\n        label={`+${restItems}`}\n        className=\"tag-list_wrapper_render-more\"\n        onClick={\n          disableShowMore\n            ? () => {}\n            : (value, event) => cancelDefault(value, () => setRenderAllInterceptor(true, event))\n        }\n        isUseInTable={isUseInTable}\n      />\n    );\n  };\n  const renderHideTags = (): JSX.Element | null => {\n    if (\n      renderItemsCount !== tagList?.length\n      || !withToggle\n      || staticTagsCount === -1\n      || staticTagsCount === tagList?.length\n    ) {\n      return null;\n    }\n\n    return (\n      <Tag\n        label=\"...\"\n        className=\"tag-list_wrapper_hide-more\"\n        onClick={(value, event) => cancelDefault(value, () => setRenderAllInterceptor(false, event))}\n        isUseInTable={isUseInTable}\n      />\n    );\n  };\n\n  // Set TagList Items\n  useEffect(() => {\n    setStaticTagsCount(-1);\n    setRenderItemsCount(-1);\n    setRenderAllInterceptor(false, null);\n    const itemsWithRef = items.map(item => ({ ...item, itemRef: createRef<HTMLDivElement>() }));\n    setTagList(itemsWithRef);\n  }, [items]);\n\n  // Count Row Tags\n  useLayoutEffect(() => {\n    if (withToggle && wrapperWidth !== -1 && staticTagsCount === -1) {\n      let computedWidth = wrapperWidth;\n\n      if (computedWidth === 0) {\n        computedWidth = Number.parseInt(\n          (wrapperRef?.current\n            ? window.getComputedStyle(wrapperRef?.current)?.width\n            : 0).toString(),\n        );\n      }\n\n      if (!Number.isNaN(computedWidth)) {\n        setStaticTagsCount(getStaticTagsCount(computedWidth));\n      }\n    }\n  }, [tagList, wrapperWidth, wrapperRef?.current]);\n\n  //\n  useLayoutEffect(() => {\n    setRenderItemsCount(staticTagsCount);\n  }, [staticTagsCount]);\n\n  // Toggle Show/Hide More Tags\n  useEffect(() => {\n    setRenderItemsCount(renderAll ? tagList?.length : staticTagsCount);\n  }, [renderAll]);\n\n  useEffect(() => {\n    if (wrapperRef?.current && refProp) refProp.current = wrapperRef?.current;\n  }, [wrapperRef?.current]);\n\n  return (\n    <div\n      data-testid={testId}\n      className={cn(\n        'tag-list_wrapper',\n        `${\n          renderItemsCount !== tagList?.length\n          || !withToggle\n          || staticTagsCount === -1\n          || staticTagsCount === tagList?.length\n            ? 'tag-list_wrapper--only-static-items'\n            : 'tag-list_wrapper--all-items'\n        }`,\n        className,\n        { 'tag-list_wrapper--disabled': disabled },\n      )}\n      style={{\n        visibility: staticTagsCount === -1 ? 'hidden' : 'visible',\n        zIndex: staticTagsCount === -1 ? '-1' : 'auto',\n      }}\n      ref={wrapperRef}\n    >\n      {renderTags()}\n      {renderMoreTags()}\n      {renderHideTags()}\n      {typeof onEditClick === 'function' && (\n        <div className=\"tag-list__edit-trigger\">\n          <Edit3 onClick={onEditClick} />\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport default TagList;\n"],"mappings":"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"}

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

@@ -0,0 +1,59 @@
+.tag-list_wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+}
+.tag-list_wrapper--disabled {
+  filter: grayscale(0.2);
+}
+.tag-list_wrapper--disabled * {
+  pointer-events: none !important;
+}
+.tag-list_wrapper--only-static-items {
+  display: flex;
+}
+.tag-list_wrapper--only-static-items .tag-list_wrapper_item {
+  margin-bottom: 0;
+}
+.tag-list_wrapper_item {
+  display: inline-block;
+  box-sizing: border-box;
+  width: auto;
+}
+.tag-list_wrapper_item .tag {
+  box-sizing: border-box;
+  max-width: 100%;
+  margin: 0 !important;
+}
+.tag-list_wrapper_item .tag__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.tag-list_wrapper_item--hidden {
+  display: none;
+}
+.tag-list_wrapper_render-more, .tag-list_wrapper_hide-more {
+  margin: 0 !important;
+  cursor: pointer;
+  background: #ffedc8;
+}
+.tag-list_wrapper .tag {
+  margin: 2px;
+}
+
+.tag-list__edit-trigger {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  box-sizing: border-box;
+  padding: 2px;
+  cursor: pointer;
+}
+.tag-list__edit-trigger svg {
+  width: 16px;
+  height: 16px;
+  color: #6b81dd;
+}

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

@@ -0,0 +1,49 @@
+import '../../../styles/base.css';
+import Button from "../Button/Button.js";
+import { getColorById } from "../../../Functions/utils.js";
+import Label from "../../FormElements/Label/Label.js";
+import './UserBox.styles.css';/* empty css             */
+import cn from "classnames";
+import "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/Atomic/UI/UserBox/UserBox.tsx
+var UserBox = ({ name = "Username", role, id, onClick, isModal, className, colors, testId = "userbox" }) => {
+	const getNameFirstLetter = name.charAt(0).toUpperCase();
+	const renderUser = () => {
+		if (isModal) return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+			style: { backgroundColor: getColorById(id, colors) },
+			className: "td-user-box__avatar",
+			children: getNameFirstLetter
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "td-user-box__user-data",
+			children: [/* @__PURE__ */ jsx(Button, {
+				className: "p0 no-shadow",
+				onClick,
+				label: name,
+				variant: "link"
+			}), role && /* @__PURE__ */ jsx("span", { children: role })]
+		})] });
+		else return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+			style: { backgroundColor: getColorById(id) },
+			className: "td-user-box__avatar",
+			children: getNameFirstLetter
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "td-user-box__user-data",
+			children: [/* @__PURE__ */ jsx(Label, { label: name }), role && /* @__PURE__ */ jsx("span", {
+				"aria-label": `User role: ${role}`,
+				children: role
+			})]
+		})] });
+	};
+	return /* @__PURE__ */ jsx("div", {
+		"data-testid": testId,
+		className: cn("td-user-box", className),
+		role: "region",
+		"aria-label": `User box for ${name}`,
+		children: renderUser()
+	});
+};
+//#endregion
+export { UserBox as default };
+
+//# sourceMappingURL=UserBox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UserBox.js","names":[],"sources":["../../../../../src/Atomic/UI/UserBox/UserBox.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { IUserBoxProps } from './UserBox.interface';\nimport cn from 'classnames';\n\nimport React from 'react';\nimport { getColorById } from '../../../Functions/utils';\n\nimport Label from '../../FormElements/Label/Label';\nimport Button from '../Button/Button';\n\nimport './UserBox.scss';\n\nconst UserBox: React.FC<IUserBoxProps> = ({\n  name = 'Username',\n  role,\n  id,\n  onClick,\n  isModal,\n  className,\n  colors,\n  testId = 'userbox',\n}) => {\n  const getNameFirstLetter = name.charAt(0).toUpperCase();\n\n  const renderUser = (): ReactNode => {\n    if (isModal) {\n      return (\n        <>\n          <div style={{ backgroundColor: getColorById(id, colors) }} className=\"td-user-box__avatar\">\n            {getNameFirstLetter}\n          </div>\n          <div className=\"td-user-box__user-data\">\n            <Button className=\"p0 no-shadow\" onClick={onClick} label={name} variant=\"link\" />\n            {role && <span>{role}</span>}\n          </div>\n        </>\n      );\n    }\n    else {\n      return (\n        <>\n          <div style={{ backgroundColor: getColorById(id) }} className=\"td-user-box__avatar\">\n            {getNameFirstLetter}\n          </div>\n          <div className=\"td-user-box__user-data\">\n            <Label label={name} />\n            {role && <span aria-label={`User role: ${role}`}>{role}</span>}\n          </div>\n        </>\n      );\n    }\n  };\n\n  return (\n    <div\n      data-testid={testId}\n      className={cn('td-user-box', className)}\n      role=\"region\"\n      aria-label={`User box for ${name}`}\n    >\n      {renderUser()}\n    </div>\n  );\n};\n\nexport default UserBox;\n"],"mappings":";;;;;;;;AAYA,IAAM,WAAoC,EACxC,OAAO,YACP,MACA,IACA,SACA,SACA,WACA,QACA,SAAS,gBACL;CACJ,MAAM,qBAAqB,KAAK,OAAO,CAAC,CAAC,CAAC,YAAY;CAEtD,MAAM,mBAA8B;EAClC,IAAI,SACF,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;GAAK,OAAO,EAAE,iBAAiB,aAAa,IAAI,MAAM,EAAE;GAAG,WAAU;aAClE;EACE,CAAA,GACL,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,QAAD;IAAQ,WAAU;IAAwB;IAAS,OAAO;IAAM,SAAQ;GAAQ,CAAA,GAC/E,QAAQ,oBAAC,QAAD,EAAA,UAAO,KAAW,CAAA,CACxB;IACL,EAAA,CAAA;OAIJ,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;GAAK,OAAO,EAAE,iBAAiB,aAAa,EAAE,EAAE;GAAG,WAAU;aAC1D;EACE,CAAA,GACL,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,OAAD,EAAO,OAAO,KAAO,CAAA,GACpB,QAAQ,oBAAC,QAAD;IAAM,cAAY,cAAc;cAAS;GAAW,CAAA,CAC1D;IACL,EAAA,CAAA;CAGR;CAEA,OACE,oBAAC,OAAD;EACE,eAAa;EACb,WAAW,GAAG,eAAe,SAAS;EACtC,MAAK;EACL,cAAY,gBAAgB;YAE3B,WAAW;CACT,CAAA;AAET"}

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

@@ -0,0 +1,64 @@
+.td-user-box {
+  --userbox-avatar-width: 24px;
+  --userbox-avatar-height: 24px;
+  --userbox-avatar-font-size: 16px;
+  --userbox-avatar-font-weight: 400;
+  --userbox-avatar-color: #fff;
+  --userbox-avatar-border-radius: 30px;
+  --userbox-user-data-padding-left: 8px;
+  --userbox-user-data-font-family: sarabun;
+  --userbox-user-data-font-size: 12px;
+  --userbox-user-data-font-weight: 400;
+  --userbox-user-data-line-height: 18px;
+  --userbox-user-data-letter-spacing: 0.2px;
+  --userbox-button-link-height: unset;
+  --userbox-button-link-padding-left: 8px;
+  --userbox-button-link-font-size: 14px;
+  --userbox-button-link-font-weight: 400;
+  --userbox-label-margin-bottom: 0;
+  --userbox-label-margin-left: 8px;
+  --userbox-label-font-size: 14px;
+  --userbox-label-font-weight: 400;
+  --userbox-label-color: #171d33;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.td-user-box__avatar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--userbox-avatar-width, 24px);
+  height: var(--userbox-avatar-height, 24px);
+  font-size: var(--userbox-avatar-font-size, 16px);
+  font-weight: var(--userbox-avatar-font-weight, 400);
+  user-select: none;
+  color: var(--userbox-avatar-color, #fff);
+  border-radius: var(--userbox-avatar-border-radius, 30px);
+}
+.td-user-box__user-data {
+  display: flex;
+  flex-direction: column;
+}
+.td-user-box__user-data span {
+  padding-left: var(--userbox-user-data-padding-left, 8px);
+  font-family: var(--userbox-user-data-font-family, sarabun);
+  font-size: var(--userbox-user-data-font-size, 12px);
+  font-weight: var(--userbox-user-data-font-weight, 400);
+  font-style: normal;
+  line-height: var(--userbox-user-data-line-height, 18px);
+  letter-spacing: var(--userbox-user-data-letter-spacing, 0.2px);
+}
+.td-user-box .button_link {
+  height: var(--userbox-button-link-height, unset);
+  padding-left: var(--userbox-button-link-padding-left, 8px);
+  font-size: var(--userbox-button-link-font-size, 14px);
+  font-weight: var(--userbox-button-link-font-weight, 400);
+}
+.td-user-box .label {
+  margin-bottom: var(--userbox-label-margin-bottom, 0);
+  margin-left: var(--userbox-label-margin-left, 8px);
+  font-size: var(--userbox-label-font-size, 14px);
+  font-weight: var(--userbox-label-font-weight, 400);
+  color: var(--userbox-label-color, #171d33);
+}

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

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

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

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

package/dist/es/Atomic/UI/WizardStepper/constructor.js

@@ -0,0 +1,12 @@
+import "react";
+import "react/jsx-runtime";
+//#region src/Atomic/UI/WizardStepper/constructor.js
+var WIZARD_STEP_VARIANTS = Object.freeze({
+	DEFAULT: "default",
+	DONE: "done",
+	ACTIVE: "active"
+});
+//#endregion
+export { WIZARD_STEP_VARIANTS };
+
+//# sourceMappingURL=constructor.js.map

package/dist/es/Atomic/UI/WizardStepper/constructor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constructor.js","names":[],"sources":["../../../../../src/Atomic/UI/WizardStepper/constructor.js"],"sourcesContent":["import React from 'react';\nimport Status from '../Status/Status';\nexport const WIZARD_STEP_VARIANTS = Object.freeze({\n  DEFAULT: 'default',\n  DONE: 'done',\n  ACTIVE: 'active',\n});\n\nconst JSXMockComponent = () => {\n  const arr = [\n    { title: 'Requested Amont', value: '$15,000' },\n    { title: 'Repayment Amount', value: '$15,001' },\n    { title: 'Repayment Date', value: '12/12/2021' },\n  ]\n\n  const textStyles = {\n  fontSize: '14px',\n  fontWeight: 400,\n  lineHeight: '20px',\n  letterSpacing: '0.2px'\n  };\n\n  return arr.map(row => {\n    return <div style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '250px'}}>\n      <span style={textStyles}>{row.title}</span>\n      <span style={textStyles}>{row.value}</span>\n    </div>\n  });\n}\n\nexport const mockData = [\n  {\n    key: 'businessInfo',\n    label: 'Provide Business Info',\n    description: 'This information will help us to evaluate your application',\n    isFinished: true,\n  },\n  {\n    key: 'principal',\n    label: 'Add Principal Information',\n    description: 'A principal is essentially another name for a company owner. At some corporations, the principal is also the founder, CEO, or even the chief investor',\n    isFinished: true,\n    isOptional: true,\n  },\n  {\n    key: 'coOwners',\n    label: 'Add Co-Owners',\n    description: '{merchantName} will receive that amount from {lenderNmae}',\n    isActive: true,\n    titleSlot: <span className='custom-title-slot'>$15,001</span>,\n    contentSlot: <JSXMockComponent />,\n  },\n  {\n    key: 'bankAccount',\n    label: 'Add a Bank Account',\n    description: 'Your bank account information will be used to securely and automatically transfer the funds',\n    titleSlot:  <Status label=\"Some JSX\" status=\"draft\" />,\n  },\n  {\n    key: 'documents',\n    label: 'Upload Documents',\n    description: 'Please upload the required documents',\n  },\n  {\n    key: 'review',\n    label: 'Review & Submit',\n    description: 'Please review the information and submit your application',\n  },\n  {\n    key: 'success',\n    label: 'Success',\n    description: 'Your application has been submitted successfully',\n  },\n  {\n    key: 'failure',\n    label: 'Failure',\n    description: 'Your application has been failed',\n  },\n  {\n    key: 'pending',\n    label: 'Pending',\n    description: 'Your application is under review',\n  },\n]\n"],"mappings":";;;AAEO,IAAM,uBAAuB,OAAO,OAAO;CAChD,SAAS;CACT,MAAM;CACN,QAAQ;AACV,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/Atomic/UI/WizardStepper/index.ts"],"sourcesContent":["import WizardStepper from './ui';\n\nexport default WizardStepper;\nexport type { IStateIconProps, IStepRowProps, IStepWrapperProps } from './WizardStepper.interface';\n"],"mappings":";;AAEA,IAAA,wBAAe"}

package/dist/es/Atomic/UI/WizardStepper/ui/StateIcon/StateIcon.js

@@ -0,0 +1,52 @@
+import '../../../../../styles/base.css';
+import { WIZARD_STEP_VARIANTS } from "../../constructor.js";
+import './StateIcon.styles.css';/* empty css               */
+import cn from "classnames";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Atomic/UI/WizardStepper/ui/StateIcon/StateIcon.tsx
+var DefaultPoint = () => {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "none",
+		children: /* @__PURE__ */ jsx("circle", {
+			cx: "8",
+			cy: "8",
+			r: "4"
+		})
+	});
+};
+var DonePoint = () => {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "none",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M12.5 5L7 10.5L4 7.5",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+};
+var RC = "state-icon";
+var { ACTIVE, DEFAULT, DONE } = WIZARD_STEP_VARIANTS;
+var StateIcon = ({ variant = DEFAULT, className }) => {
+	const computedState = variant === ACTIVE || variant === DONE ? variant : DEFAULT;
+	const Inner = {
+		[DEFAULT]: /* @__PURE__ */ jsx(DefaultPoint, {}),
+		[ACTIVE]: /* @__PURE__ */ jsx(DefaultPoint, {}),
+		[DONE]: /* @__PURE__ */ jsx(DonePoint, {})
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(RC, `${RC}--${computedState}`, className),
+		children: Inner[computedState]
+	});
+};
+//#endregion
+export { StateIcon };
+
+//# sourceMappingURL=StateIcon.js.map

package/dist/es/Atomic/UI/WizardStepper/ui/StateIcon/StateIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StateIcon.js","names":[],"sources":["../../../../../../../src/Atomic/UI/WizardStepper/ui/StateIcon/StateIcon.tsx"],"sourcesContent":["import type { IStateIconProps } from '../../WizardStepper.interface';\nimport cn from 'classnames';\n\nimport React from 'react';\nimport { WIZARD_STEP_VARIANTS } from '../../constructor';\n\nimport './StateIcon.scss';\n\nconst DefaultPoint: React.FC = () => {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n      <circle cx=\"8\" cy=\"8\" r=\"4\" />\n    </svg>\n  );\n};\n\nconst DonePoint: React.FC = () => {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n      <path d=\"M12.5 5L7 10.5L4 7.5\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n};\n\nconst RC = 'state-icon';\n\nconst { ACTIVE, DEFAULT, DONE } = WIZARD_STEP_VARIANTS;\n\nexport const StateIcon: React.FC<IStateIconProps> = ({ variant = DEFAULT, className }) => {\n  const computedState = variant === ACTIVE || variant === DONE ? variant : DEFAULT;\n\n  const Inner = {\n    [DEFAULT]: <DefaultPoint />,\n    [ACTIVE]: <DefaultPoint />,\n    [DONE]: <DonePoint />,\n  };\n\n  return <div className={cn(RC, `${RC}--${computedState}`, className)}>{Inner[computedState]}</div>;\n};\n"],"mappings":";;;;;;AAQA,IAAM,qBAA+B;CACnC,OACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;YACnD,oBAAC,UAAD;GAAQ,IAAG;GAAI,IAAG;GAAI,GAAE;EAAK,CAAA;CAC1B,CAAA;AAET;AAEA,IAAM,kBAA4B;CAChC,OACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;YACnD,oBAAC,QAAD;GAAM,GAAE;GAAuB,aAAY;GAAI,eAAc;GAAQ,gBAAe;EAAS,CAAA;CAC1F,CAAA;AAET;AAEA,IAAM,KAAK;AAEX,IAAM,EAAE,QAAQ,SAAS,SAAS;AAElC,IAAa,aAAwC,EAAE,UAAU,SAAS,gBAAgB;CACxF,MAAM,gBAAgB,YAAY,UAAU,YAAY,OAAO,UAAU;CAEzE,MAAM,QAAQ;GACX,UAAU,oBAAC,cAAD,CAAe,CAAA;GACzB,SAAS,oBAAC,cAAD,CAAe,CAAA;GACxB,OAAO,oBAAC,WAAD,CAAY,CAAA;CACtB;CAEA,OAAO,oBAAC,OAAD;EAAK,WAAW,GAAG,IAAI,GAAG,GAAG,IAAI,iBAAiB,SAAS;YAAI,MAAM;CAAoB,CAAA;AAClG"}

package/dist/es/Atomic/UI/WizardStepper/ui/StateIcon/StateIcon.styles.css

@@ -0,0 +1,23 @@
+.state-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 16px;
+}
+.state-icon svg {
+  stroke: #656e7a;
+  fill: #656e7a;
+}
+.state-icon--done, .state-icon--active {
+  background-color: #eaf2ff;
+}
+.state-icon--done svg {
+  stroke: #1f7499;
+  fill: none;
+}
+.state-icon--active svg {
+  stroke: #000;
+  fill: #000;
+}

package/dist/es/Atomic/UI/WizardStepper/ui/StateIcon/index.js

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

package/dist/es/Atomic/UI/WizardStepper/ui/StateIcon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../../../src/Atomic/UI/WizardStepper/ui/StateIcon/index.ts"],"sourcesContent":["import { StateIcon } from './StateIcon';\n\nexport default StateIcon;\n"],"mappings":";;AAEA,IAAA,oBAAe"}

package/dist/es/Atomic/UI/WizardStepper/ui/StepRow/StepRow.js

@@ -0,0 +1,67 @@
+import '../../../../../styles/base.css';
+import Status from "../../../Status/Status.js";
+import { WIZARD_STEP_VARIANTS } from "../../constructor.js";
+import StateIcon_default from "../StateIcon/index.js";
+import './StepRow.styles.css';/* empty css             */
+import cn from "classnames";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Atomic/UI/WizardStepper/ui/StepRow/StepRow.tsx
+var RC = "step-row";
+var { DEFAULT, ACTIVE, DONE } = WIZARD_STEP_VARIANTS;
+var StepRow = ({ label, description, className, isOptional, isFinished, isActive, titleSlot, contentSlot, customIcons }) => {
+	const title = label;
+	const rowVariant = (() => {
+		if (isActive) return ACTIVE;
+		if (isFinished) return DONE;
+		return DEFAULT;
+	})();
+	const alternaviteIconFromProps = (() => {
+		if (isActive) return customIcons?.activeIcon;
+		if (isFinished) return customIcons?.doneIcon;
+		return customIcons?.defaultIcon;
+	})();
+	const CorrectIcon = () => {
+		if (!customIcons || Object?.values(customIcons)?.every((icon) => !icon)) return /* @__PURE__ */ jsx(StateIcon_default, { variant: rowVariant });
+		return alternaviteIconFromProps || null;
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(RC, `${RC}--${rowVariant}`, className),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: cn(`${RC}__state-point`, `${RC}__state-point--${rowVariant}`),
+			children: /* @__PURE__ */ jsx(CorrectIcon, {})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: `${RC}__content`,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: `${RC}__title`,
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: `${RC}__title-left`,
+						children: [/* @__PURE__ */ jsx("div", {
+							className: cn(`${RC}__title-text`, { "text-muted": rowVariant === DEFAULT }),
+							children: title
+						}), isOptional && /* @__PURE__ */ jsx(Status, {
+							label: "Optional",
+							status: "draft"
+						})]
+					}), titleSlot && /* @__PURE__ */ jsx("div", {
+						className: `${RC}__title-right`,
+						children: titleSlot
+					})]
+				}),
+				description && /* @__PURE__ */ jsx("div", {
+					className: `${RC}__description`,
+					children: description
+				}),
+				contentSlot && /* @__PURE__ */ jsx("div", {
+					className: `${RC}__body`,
+					children: contentSlot
+				})
+			]
+		})]
+	}, label);
+};
+//#endregion
+export { StepRow as default };
+
+//# sourceMappingURL=StepRow.js.map

package/dist/es/Atomic/UI/WizardStepper/ui/StepRow/StepRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepRow.js","names":[],"sources":["../../../../../../../src/Atomic/UI/WizardStepper/ui/StepRow/StepRow.tsx"],"sourcesContent":["import type { IStepRowProps } from '../../WizardStepper.interface';\nimport cn from 'classnames';\nimport React from 'react';\nimport Status from '../../../Status/Status';\nimport { WIZARD_STEP_VARIANTS } from '../../constructor';\nimport StateIcon from '../StateIcon';\nimport './StepRow.scss';\n\nconst RC = 'step-row';\n\nconst { DEFAULT, ACTIVE, DONE } = WIZARD_STEP_VARIANTS;\n\nconst StepRow: React.FC<IStepRowProps> = ({\n  label,\n  description,\n  className,\n  isOptional,\n  isFinished,\n  isActive,\n  titleSlot,\n  contentSlot,\n  customIcons,\n}) => {\n  const title = label;\n\n  const rowVariant = (() => {\n    if (isActive) return ACTIVE;\n    if (isFinished) return DONE;\n    return DEFAULT;\n  })();\n\n  const alternaviteIconFromProps = (() => {\n    if (isActive) return customIcons?.activeIcon;\n    if (isFinished) return customIcons?.doneIcon;\n    return customIcons?.defaultIcon;\n  })();\n\n  const CorrectIcon: React.FC = () => {\n    if (!customIcons || Object?.values(customIcons)?.every(icon => !icon)) {\n      return <StateIcon variant={rowVariant} />;\n    }\n\n    return alternaviteIconFromProps as React.ReactElement<any, any> || null;\n  };\n\n  return (\n    <div key={label} className={cn(RC, `${RC}--${rowVariant}`, className)}>\n      <div className={cn(`${RC}__state-point`, `${RC}__state-point--${rowVariant}`)}>\n        <CorrectIcon />\n      </div>\n\n      <div className={`${RC}__content`}>\n        <div className={`${RC}__title`}>\n          <div className={`${RC}__title-left`}>\n            <div className={cn(`${RC}__title-text`, { 'text-muted': rowVariant === DEFAULT })}>\n              {title}\n            </div>\n            {isOptional && <Status label=\"Optional\" status=\"draft\" />}\n          </div>\n\n          {titleSlot && (\n            <div className={`${RC}__title-right`}>\n              {titleSlot}\n            </div>\n          )}\n        </div>\n\n        {description && <div className={`${RC}__description`}>{description}</div>}\n        {contentSlot && <div className={`${RC}__body`}>{contentSlot}</div>}\n      </div>\n    </div>\n  );\n};\n\nexport default StepRow;\n"],"mappings":";;;;;;;;AAQA,IAAM,KAAK;AAEX,IAAM,EAAE,SAAS,QAAQ,SAAS;AAElC,IAAM,WAAoC,EACxC,OACA,aACA,WACA,YACA,YACA,UACA,WACA,aACA,kBACI;CACJ,MAAM,QAAQ;CAEd,MAAM,oBAAoB;EACxB,IAAI,UAAU,OAAO;EACrB,IAAI,YAAY,OAAO;EACvB,OAAO;CACT,EAAA,CAAG;CAEH,MAAM,kCAAkC;EACtC,IAAI,UAAU,OAAO,aAAa;EAClC,IAAI,YAAY,OAAO,aAAa;EACpC,OAAO,aAAa;CACtB,EAAA,CAAG;CAEH,MAAM,oBAA8B;EAClC,IAAI,CAAC,eAAe,QAAQ,OAAO,WAAW,CAAC,EAAE,OAAM,SAAQ,CAAC,IAAI,GAClE,OAAO,oBAAC,mBAAD,EAAW,SAAS,WAAa,CAAA;EAG1C,OAAO,4BAA4D;CACrE;CAEA,OACE,qBAAC,OAAD;EAAiB,WAAW,GAAG,IAAI,GAAG,GAAG,IAAI,cAAc,SAAS;YAApE,CACE,oBAAC,OAAD;GAAK,WAAW,GAAG,GAAG,GAAG,gBAAgB,GAAG,GAAG,iBAAiB,YAAY;aAC1E,oBAAC,aAAD,CAAc,CAAA;EACX,CAAA,GAEL,qBAAC,OAAD;GAAK,WAAW,GAAG,GAAG;aAAtB;IACE,qBAAC,OAAD;KAAK,WAAW,GAAG,GAAG;eAAtB,CACE,qBAAC,OAAD;MAAK,WAAW,GAAG,GAAG;gBAAtB,CACE,oBAAC,OAAD;OAAK,WAAW,GAAG,GAAG,GAAG,eAAe,EAAE,cAAc,eAAe,QAAQ,CAAC;iBAC7E;MACE,CAAA,GACJ,cAAc,oBAAC,QAAD;OAAQ,OAAM;OAAW,QAAO;MAAS,CAAA,CACrD;SAEJ,aACC,oBAAC,OAAD;MAAK,WAAW,GAAG,GAAG;gBACnB;KACE,CAAA,CAEJ;;IAEJ,eAAe,oBAAC,OAAD;KAAK,WAAW,GAAG,GAAG;eAAiB;IAAiB,CAAA;IACvE,eAAe,oBAAC,OAAD;KAAK,WAAW,GAAG,GAAG;eAAU;IAAiB,CAAA;GAC9D;IACF;IAxBK,KAwBL;AAET"}

package/dist/es/Atomic/UI/WizardStepper/ui/StepRow/StepRow.styles.css

@@ -0,0 +1,60 @@
+.step-row {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-left: 26px;
+}
+.step-row::after {
+  position: absolute;
+  left: -1px;
+  width: 2px;
+  height: calc(100% + 16px);
+  content: "";
+  background-color: #e1e4eb;
+}
+.step-row__state-point {
+  position: absolute;
+  z-index: 2;
+  left: -10px;
+}
+.step-row__content {
+  display: flex;
+  flex-direction: column;
+  row-gap: 4px;
+  width: 100%;
+}
+.step-row__title {
+  display: flex;
+  justify-content: space-between;
+}
+.step-row__title-left {
+  display: flex;
+  align-items: center;
+  column-gap: 8px;
+}
+.step-row__title-text {
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  letter-spacing: 0.2px;
+}
+.step-row__description {
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0.2px;
+  color: #656e7a;
+}
+
+.step-row:first-child::after {
+  bottom: -50%;
+  height: 100%;
+}
+
+.step-row:last-child::after {
+  bottom: 50%;
+  height: 100%;
+}