intelicoreact 2.0.11 → 2.0.12

package/dist/router-ui.js

@@ -0,0 +1,957 @@
+// src/Atomic/UI/Accordion/Accordion.tsx
+import cn3 from "classnames";
+import { useState as useState2 } from "react";
+import * as Icons2 from "react-feather";
+import { NavLink } from "react-router-dom";
+
+// src/Functions/utils.js
+import { useEffect } from "react";
+import moment from "moment-timezone";
+
+// src/Constants/index.constants.js
+var KEYBOARD_KEY_CODES = {
+  Backspace: 8,
+  Delete: 46,
+  ARROW_LEFT: 37,
+  ARROW_RIGHT: 39
+};
+
+// src/Functions/utils.js
+var handleObjectChange = (updateObject, updateFunction) => (data, prop = "", isNumber) => {
+  let value;
+  if (data?.target) {
+    value = data.target.type === "checkbox" ? data.target.checked : data.target.value;
+  } else value = data;
+  value = isNumber ? Number(value) : value;
+  const props = prop.split(".");
+  const currentObject = props.reduce((res, chapter, index) => {
+    if (props.length !== index + 1) res = res[chapter];
+    return res;
+  }, updateObject);
+  currentObject[props.pop()] = value;
+  updateFunction();
+};
+String.prototype.longerThan = function(compareWith) {
+  return this?.length > compareWith?.length;
+};
+String.prototype.lastIndexEqualsTo = function(index) {
+  return this?.length - 1 === index;
+};
+
+// src/Atomic/UI/Accordion/AccordionItem.tsx
+import cn2 from "classnames";
+import { useEffect as useEffect2, useRef, useState } from "react";
+import * as Icons from "react-feather";
+
+// src/Atomic/UI/Status/Status.tsx
+import cn from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+function defaultOnClick() {
+}
+var Status = ({
+  icon,
+  value,
+  label,
+  status,
+  disabled,
+  type,
+  active = 0,
+  pause = 0,
+  className,
+  noBackground,
+  children,
+  testId = "status",
+  onClick = defaultOnClick
+}) => {
+  if (!status) return null;
+  const text = children && typeof children === "string" ? children : value || label || status;
+  const formattedLabel = text?.[0].toUpperCase() + text?.slice(1);
+  return /* @__PURE__ */ jsx("div", { onClick, "data-testid": testId, className: cn({ disabled }, className), children: type === "number" ? /* @__PURE__ */ jsx("div", { children: active === 0 && pause === 0 ? /* @__PURE__ */ jsx("div", { className: "status status--error", children: /* @__PURE__ */ jsx("span", { children: active }) }) : /* @__PURE__ */ jsxs("div", { className: "status status--warning", children: [
+    /* @__PURE__ */ jsx("span", { className: "status--number-active", children: active }),
+    /* @__PURE__ */ jsx("span", { className: "color--gray-gull", children: " / " }),
+    /* @__PURE__ */ jsx("span", { className: pause > 0 ? "color--froly" : "color--gray-gull", children: pause })
+  ] }) }) : /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "status",
+        `status--${status}`,
+        {
+          "status--no-bg": noBackground && status === "pause",
+          "color--gray-gull": noBackground && status === "pause" && !className,
+          "j4": !!icon
+        },
+        className
+      ),
+      children: [
+        icon,
+        formattedLabel
+      ]
+    }
+  ) });
+};
+var Status_default = Status;
+
+// src/Atomic/UI/Status/index.ts
+var Status_default2 = Status_default;
+
+// src/Atomic/UI/Accordion/AccordionItem.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var DefaultLink = ({ to, className, children }) => /* @__PURE__ */ jsx2("a", { href: to, className, children });
+var AccordionItem = ({
+  item,
+  onClick,
+  isOpen,
+  className,
+  children,
+  noChevron,
+  linkComponent: LinkComponent = DefaultLink,
+  testId = "accordion-item"
+}) => {
+  const Icon = Icons[item.icon];
+  const [maxHeight, setMaxHeight] = useState(0);
+  const ref = useRef(null);
+  const getItemsHeight = () => {
+    let itemHeight = 0;
+    ref.current?.childNodes.forEach((el) => {
+      itemHeight += el.offsetHeight;
+    });
+    return itemHeight + 20;
+  };
+  useEffect2(() => {
+    setMaxHeight(isOpen ? getItemsHeight() : 0);
+  }, [isOpen]);
+  const calculateStatusCount = () => {
+    return item?.rows?.reduce(
+      (acc, row) => {
+        const result = row.cols.reduce(
+          (accum, col) => ({
+            active: accum.active + (col.status === "active" ? 1 : 0),
+            pause: accum.pause + (col.status === "pause" ? 1 : 0)
+          }),
+          { active: 0, pause: 0 }
+        );
+        return {
+          active: acc.active + result.active,
+          pause: acc.pause + result.pause
+        };
+      },
+      { active: 0, pause: 0 }
+    );
+  };
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      "data-testid": testId,
+      className: cn2("accordion--item", className),
+      role: "region",
+      "aria-labelledby": `accordion-title-${item.title}`,
+      children: [
+        /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            className: cn2("accordion--title-box", {
+              "accordion--title-open": isOpen
+            }),
+            onClick: () => onClick(!isOpen),
+            id: `accordion-title-${item.title}`,
+            role: "button",
+            "aria-expanded": isOpen,
+            "aria-controls": `accordion-content-${item.title}`,
+            tabIndex: 0,
+            children: [
+              /* @__PURE__ */ jsxs2("div", { className: "j4 no-wrap", children: [
+                item?.icon && /* @__PURE__ */ jsx2(Icon, { className: cn2("mr5", item?.className), "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx2("span", { className: "accordion--title", children: item.title || "Menu Chapter" })
+              ] }),
+              /* @__PURE__ */ jsxs2("div", { className: "j6 accordion-title__right-box", children: [
+                item.status && /* @__PURE__ */ jsx2("div", { className: "mr5", children: /* @__PURE__ */ jsx2(
+                  Status_default2,
+                  {
+                    type: item?.status.type,
+                    value: item?.status.value,
+                    status: item?.status.status,
+                    active: calculateStatusCount()?.active,
+                    pause: calculateStatusCount()?.pause
+                  }
+                ) }),
+                !noChevron && /* @__PURE__ */ jsx2(
+                  Icons.ChevronRight,
+                  {
+                    "aria-hidden": "true",
+                    className: cn2("accordion--title-chevron", {
+                      "accordion--title-chevron-open": isOpen
+                    })
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            ref,
+            style: { maxHeight },
+            className: cn2("accordion--content", {
+              "accordion--content-is-open": isOpen
+            }),
+            id: `accordion-content-${item.title}`,
+            role: "region",
+            "aria-labelledby": `accordion-title-${item.title}`,
+            children: item.children ? item.children.map((el) => {
+              return /* @__PURE__ */ jsx2(LinkComponent, { to: el.link, className: "accordion--content-item accordion--menu-link", children: el?.title || "Menu item" }, el.id);
+            }) : children
+          }
+        )
+      ]
+    }
+  );
+};
+var AccordionItem_default = AccordionItem;
+
+// src/Atomic/UI/Accordion/Accordion.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var CN = "accordion";
+var Accordion = ({
+  items,
+  className,
+  itemClassName,
+  isMenuHovered,
+  isOpen,
+  testId = CN
+}) => {
+  const [data, setData] = useState2(items);
+  const onChange = handleObjectChange(setData, () => setData([...data]));
+  const handleArrayChange = (e, index, prop) => {
+    data[index][prop] = e;
+    onChange(data);
+  };
+  return /* @__PURE__ */ jsx3("div", { className: cn3(CN, className), "data-testid": testId, role: "list", "aria-label": "Accordion list", children: items?.map((item, index) => {
+    const Icon = Icons2[item.icon];
+    return item.link ? /* @__PURE__ */ jsxs3(
+      NavLink,
+      {
+        "data-testid": `${testId}-link-${index}`,
+        to: item.link,
+        className: cn3("main-menu--item main-menu--items-box-title"),
+        children: [
+          item?.icon && /* @__PURE__ */ jsx3(Icon, { className: cn3("mr5", item?.className) }),
+          /* @__PURE__ */ jsx3("span", { className: cn3({ hidden: !isOpen && !isMenuHovered }), children: item?.title || "Link" })
+        ]
+      },
+      index
+    ) : /* @__PURE__ */ jsx3(
+      AccordionItem_default,
+      {
+        testId: `${testId}-item-${index}`,
+        className: itemClassName,
+        item,
+        isOpen: !!item.isOpen,
+        onClick: (value) => handleArrayChange(value, index, "isOpen"),
+        linkComponent: NavLink
+      },
+      index
+    );
+  }) });
+};
+var Accordion_default = Accordion;
+
+// src/Atomic/UI/Accordion/index.ts
+var Accordion_default2 = Accordion_default;
+
+// src/Atomic/UI/ButtonsBar/ButtonsBar.tsx
+import cn5 from "classnames";
+import { Link } from "react-router-dom";
+
+// src/Atomic/UI/Button/Button.tsx
+import cn4 from "classnames";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var RC = "button";
+var Button = ({
+  label,
+  onClick,
+  disabled,
+  icon,
+  className,
+  children,
+  style,
+  noIcon,
+  isIconRight,
+  testId = "button",
+  tabIndex = 0,
+  variant = "primary",
+  isTextEllipsis = false,
+  ...props
+}) => {
+  const noRenderIcon = noIcon || variant === "ellipse-apply" || variant === "ellipse-cancel";
+  return /* @__PURE__ */ jsxs4(
+    "button",
+    {
+      "data-testid": testId,
+      tabIndex,
+      style,
+      className: cn4(
+        RC,
+        {
+          [`${RC}_${variant}`]: variant,
+          "button_icon-left": icon && !isIconRight,
+          "button_icon-right": icon && isIconRight
+        },
+        className
+      ),
+      onClick,
+      disabled,
+      type: "button",
+      ...props,
+      children: [
+        !noRenderIcon && icon,
+        label && /* @__PURE__ */ jsx4("div", { className: cn4("button__text", { "text-ellipsis": isTextEllipsis }), children: label }),
+        !label && children ? children : null
+      ]
+    }
+  );
+};
+var Button_default = Button;
+
+// src/Atomic/UI/ButtonsBar/ButtonsBar.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var ButtonsBar = ({
+  className,
+  rejectBtnLabel,
+  rejectBtnIcon,
+  isRejectBtnIconRight,
+  rejectBtnVariant,
+  rejectBtnClass,
+  isRejectBtnDisabled,
+  rejectLink,
+  onReject,
+  confirmBtnLabel,
+  confirmBtnIcon,
+  isConfirmBtnIconRight,
+  confirmBtnVariant,
+  confirmBtnClass,
+  isConfirmBtnDisabled,
+  onConfirm,
+  testIdFirstBtn = "button-bar-first-item",
+  testIdSecondBtn = "button-bar-second-item"
+}) => {
+  return /* @__PURE__ */ jsxs5("div", { className: cn5("button-bar", className), children: [
+    rejectLink ? /* @__PURE__ */ jsx5(Link, { className: "text-decoration-none", to: rejectLink, children: /* @__PURE__ */ jsx5(
+      Button_default,
+      {
+        testId: testIdFirstBtn,
+        label: rejectBtnLabel,
+        variant: rejectBtnVariant,
+        onClick: onReject,
+        disabled: isRejectBtnDisabled,
+        icon: rejectBtnIcon,
+        isIconRight: isRejectBtnIconRight,
+        className: cn5(rejectBtnClass, { mr5: confirmBtnLabel })
+      }
+    ) }) : /* @__PURE__ */ jsx5(
+      Button_default,
+      {
+        testId: testIdFirstBtn,
+        label: rejectBtnLabel,
+        variant: rejectBtnVariant,
+        onClick: onReject,
+        disabled: isRejectBtnDisabled,
+        icon: rejectBtnIcon,
+        isIconRight: isRejectBtnIconRight,
+        className: cn5(rejectBtnClass, { mr5: confirmBtnLabel })
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      Button_default,
+      {
+        testId: testIdSecondBtn,
+        label: confirmBtnLabel,
+        variant: confirmBtnVariant,
+        onClick: onConfirm,
+        disabled: isConfirmBtnDisabled,
+        icon: confirmBtnIcon,
+        isIconRight: isConfirmBtnIconRight,
+        className: confirmBtnClass
+      }
+    )
+  ] });
+};
+var ButtonsBar_default = ButtonsBar;
+
+// src/Atomic/UI/ButtonsBar/index.ts
+var ButtonsBar_default2 = ButtonsBar_default;
+
+// src/Atomic/Layout/MainMenu/MainMenu.tsx
+import cn6 from "classnames";
+import { useState as useState3 } from "react";
+import * as Icons3 from "react-feather";
+import { NavLink as NavLink2 } from "react-router-dom";
+
+// src/Langs.js
+var Langs = {
+  en: {
+    auth: {},
+    settings: {},
+    labels: {
+      industries: "Industries",
+      includedLenders: "Included Lenders",
+      admin: "Administrator",
+      user: "User",
+      help: "Help",
+      description: "Description",
+      value: "Value",
+      paramName: "Parameter name(key)",
+      active: "Active",
+      pause: "Pause",
+      error: "Error",
+      sold: "Sold",
+      processing: "Processing",
+      home: "Home",
+      goods: "Goods",
+      improvement: "Improvement",
+      jewelry: "Jewelry",
+      firstName: "First Name",
+      lastName: "Last Name",
+      dateOfBirth: "Date of Birth",
+      militaryStatus: "Military status",
+      ssn: "SSN",
+      lengthAtAddress: "Length At Address",
+      rentOrOwn: "Rent or Own",
+      zip: "ZIP",
+      city: "City",
+      state: "State",
+      address: "Address",
+      email: "E-mail",
+      homePhone: "Home Phone",
+      cellPhone: "Cell Phone",
+      contactTime: "Contact Time",
+      dlState: "DL state",
+      dlNumber: "DL number",
+      ownCar: "Do you own a car?",
+      tcpaOptin: "TCPA OPTIN",
+      incomeSource: "Income Source",
+      timeEmployed: "Time Employed",
+      jobTitle: "Job Title",
+      currentEmployer: "Current Employer",
+      employersPhone: "Employer's Phone",
+      netMonthlyIncome: "Net monthly income",
+      howOftenIsPaid: "How often is paid",
+      nextPayDate: "Next Pay Date",
+      secondPayDate: "Second Pay Date",
+      loanAmount: "Loan amount",
+      ip: "IP",
+      storyName: "Story name",
+      channelName: "Channel name",
+      employmentInfo: "Employment Information",
+      personalDetails: "Personal Details",
+      offer: "Offer",
+      offers: "Offers",
+      status: "Status",
+      name: "Name",
+      from: "From",
+      to: "to",
+      periodMonths: "Period (months)",
+      loansSent: "Loans Sent",
+      approved: "Approved",
+      rejected: "Rejected",
+      loanAmountApproved: "Loan Amount Approved ($)",
+      loanAmountRejected: "Loan Amount Rejected ($)",
+      approveRate: "Approve Rate (%)",
+      actions: "Actions",
+      locations: "Locations",
+      score: "Score",
+      priority: "Priority",
+      lender: "Lender",
+      weight: "Weight",
+      selectLender: "Select lender"
+    },
+    singulars: {},
+    titles: {
+      pingTree: "Ping tree",
+      edit: "Edit",
+      create: "Create",
+      add: "Add",
+      consumerInfo: "Consumer info",
+      personalDetails: "Personal Details",
+      employmentInfo: "Employment Information",
+      tools: "Tools",
+      lenders: "Lenders",
+      settings: "Settings",
+      dashboard: "Dashboard",
+      consumers: "Consumers",
+      ticketDesk: "Ticket desk",
+      accounting: "Accounting",
+      users: "Users",
+      merchants: "Merchants",
+      lenderPingTree: "Lender Ping Tree",
+      reports: "Reports",
+      leads: "Leads",
+      location: "Location",
+      mainMenu: "Main menu",
+      partners: "Partners",
+      other: "Other",
+      homeGoodsAndInteriorDesign: "Home Goods and Interior Design"
+    },
+    placeholders: {
+      typeName: "Type name",
+      params: "Params placeholder",
+      value: "Value placeholder",
+      description: "Description placeholder"
+    },
+    hints: {
+      landerNotIncluded: "Lender is not included in Ping Tree by the \u201CHome Goods\u201D industry",
+      noMerchants: "No Merchants for the \u201CHome Goods\u201D industry"
+    },
+    buttons: {
+      create: "Create",
+      edit: "Edit",
+      add: "Add",
+      close: "Close",
+      apply: "Apply",
+      pingTree: "Ping tree",
+      addRow: "Add row",
+      consumerInfo: "Consumer Info",
+      deletePingTree: "Delete Ping Tree",
+      cancel: "Cancel"
+    },
+    radioButtons: {},
+    weekDays: {
+      su: "Su",
+      mo: "Mo",
+      tu: "Tu",
+      we: "We",
+      th: "Th",
+      fr: "Fr",
+      sa: "Sa"
+    },
+    alerts: {
+      lendersWillBeRemoved: "lenders will be removed"
+    },
+    checkboxes: {
+      homeGoods: "Home Goods",
+      travel: "Travel",
+      energyImprovement: "Energy Improvement",
+      jewelryIncluded: "Jewelry (included in PingTree name 2)",
+      jewelry: "Jewelry",
+      autoRepair: "Auto Repair",
+      cosmetics: "Cosmetics",
+      health: "Health"
+    },
+    errors: {},
+    texts: {},
+    tabs: {
+      general: "General",
+      payments: "Payments",
+      filters: "Filters",
+      offers: "Offers",
+      merchants: "Merchants",
+      integration: "Integration",
+      customDetails: "Custom details",
+      customerDetails: "Customer details",
+      postsLog: "Posts log"
+    },
+    toasts: {}
+  }
+};
+var Langs_default = Langs;
+
+// src/Atomic/Layout/MainMenu/MainMenu.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function MainMenu(props) {
+  const { items, className } = props;
+  const lng = globalThis.lng;
+  const txt = Langs_default[lng];
+  const [isOpen, setIsOpen] = useState3(true);
+  const [isMenuHovered, setIsMenuHovered] = useState3(false);
+  const [isMenuIconHovered, setIsMenuIconHovered] = useState3(false);
+  const chapterClass = cn6("main-menu--items-box-chapter", {
+    "main-menu--items-box-chapter-hidden": !isOpen && !isMenuHovered
+  });
+  const accordionClass = cn6("main-menu--accordion", {
+    "main-menu--accordion-hidden": !isOpen && !isMenuHovered
+  });
+  const itemsBoxClass = cn6("main-menu--items-box", {
+    "main-menu--items-box-closed": !isOpen && !isMenuHovered
+  });
+  const mainMenuClass = cn6("main-menu", className, {
+    "main-menu--closed": !isOpen && !isMenuHovered
+  });
+  const onMenuHover = () => {
+    if (!isOpen) {
+      setIsMenuHovered(!isMenuHovered);
+      items.mainMenu.forEach((item) => {
+        item.isOpen = false;
+      });
+      items.partners.forEach((item) => {
+        item.isOpen = false;
+      });
+      items.other.forEach((item) => {
+        item.isOpen = false;
+      });
+    }
+  };
+  const onCloseMenu = () => {
+    setIsOpen(!isOpen);
+    items.mainMenu.forEach((item) => {
+      item.isOpen = false;
+    });
+    items.partners.forEach((item) => {
+      item.isOpen = false;
+    });
+    items.other.forEach((item) => {
+      item.isOpen = false;
+    });
+  };
+  const changeMenuIcon = () => {
+    if (isOpen && !isMenuIconHovered) return /* @__PURE__ */ jsx6(Icons3.Menu, {});
+    if (isOpen && isMenuIconHovered) return /* @__PURE__ */ jsx6(Icons3.ChevronLeft, {});
+    if (!isOpen && isMenuHovered) return /* @__PURE__ */ jsx6(Icons3.ChevronRight, {});
+    if (!isOpen) return /* @__PURE__ */ jsx6("div", { className: "main-menu--logo-close" });
+    return null;
+  };
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: mainMenuClass,
+      onMouseEnter: () => onMenuHover(),
+      onMouseLeave: () => setIsMenuHovered(false),
+      children: [
+        /* @__PURE__ */ jsxs6(
+          "div",
+          {
+            className: cn6("main-menu--header", {
+              "main-menu--header-closed": !isOpen && !isMenuHovered
+            }),
+            children: [
+              /* @__PURE__ */ jsx6(
+                "div",
+                {
+                  className: cn6("main-menu--logo", {
+                    "main-menu--logo-none": !isOpen && !isMenuHovered
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsx6("div", { "data-testid": "main-menu--header-btn", className: "main-menu--header-btn", onClick: () => onCloseMenu(), children: /* @__PURE__ */ jsx6(
+                "div",
+                {
+                  className: "j5",
+                  onMouseEnter: () => setIsMenuIconHovered(true),
+                  onMouseLeave: () => setIsMenuIconHovered(false),
+                  children: changeMenuIcon()
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs6("div", { className: itemsBoxClass, children: [
+          /* @__PURE__ */ jsx6("div", { className: cn6("main-menu--items-box-main"), children: items.main.map((item, index) => {
+            const Icon = Icons3[item.icon];
+            return item.link ? /* @__PURE__ */ jsx6(
+              NavLink2,
+              {
+                to: item.link,
+                className: cn6("main-menu--items-box-title"),
+                children: /* @__PURE__ */ jsxs6("div", { className: "main-menu--item", children: [
+                  /* @__PURE__ */ jsx6("div", { className: "df", children: /* @__PURE__ */ jsx6(Icon, { className: cn6("mr5", item.className) }) }),
+                  /* @__PURE__ */ jsx6("span", { className: cn6({ hidden: !isOpen && !isMenuHovered }), children: item?.title || "Link" })
+                ] })
+              },
+              index
+            ) : /* @__PURE__ */ jsx6(
+              "span",
+              {
+                className: cn6("main-menu--items-box-title", {
+                  hidden: !isOpen && !isMenuHovered
+                }),
+                children: txt?.titles[item?.title]
+              },
+              index
+            );
+          }) }),
+          /* @__PURE__ */ jsx6("div", { className: chapterClass, children: /* @__PURE__ */ jsx6("span", { children: "Main menu" }) }),
+          /* @__PURE__ */ jsx6(
+            Accordion_default,
+            {
+              className: accordionClass,
+              items: items.mainMenu
+            }
+          ),
+          /* @__PURE__ */ jsx6("div", { className: chapterClass, children: /* @__PURE__ */ jsx6("span", { children: "Partners" }) }),
+          /* @__PURE__ */ jsx6(
+            Accordion_default,
+            {
+              isOpen,
+              isMenuHovered,
+              className: accordionClass,
+              items: items.partners
+            }
+          ),
+          /* @__PURE__ */ jsx6("div", { className: chapterClass, children: /* @__PURE__ */ jsx6("span", { children: "Other" }) }),
+          /* @__PURE__ */ jsx6(
+            Accordion_default,
+            {
+              className: accordionClass,
+              isOpen,
+              isMenuHovered,
+              items: items.other
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+var MainMenu_default = MainMenu;
+
+// src/Atomic/UI/NavLine/NavLine.tsx
+import cn7 from "classnames";
+import { createRef, useCallback, useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
+import * as Icons4 from "react-feather";
+import { NavLink as NavLink3 } from "react-router-dom";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var CN2 = "nav-line";
+function checkedRef(ref) {
+  if (!ref) return null;
+  return typeof ref === "function" ? (node) => ref(node) : ref;
+}
+var NavLine = ({
+  root = "",
+  activeTab,
+  variant,
+  onChange,
+  className,
+  items,
+  children,
+  isLocal = false,
+  mode,
+  isNavigateByKeys,
+  isTabLoading,
+  scrollMode = false,
+  testId = CN2
+}) => {
+  const [navLineItems, setNavLineItems] = useState4([]);
+  const wrapperRef = useRef2(null);
+  const wrapperInnerRef = useRef2(null);
+  const [showScrollButtons, setShowScrollButtons] = useState4(false);
+  const [canScrollLeft, setCanScrollLeft] = useState4(false);
+  const [canScrollRight, setCanScrollRight] = useState4(false);
+  const [isScrollBlocked, setIsScrollBlocked] = useState4(false);
+  const checkScroll = useCallback(() => {
+    const inner = wrapperInnerRef.current;
+    if (!inner) return;
+    const hasOverflow = inner.scrollWidth > inner.clientWidth;
+    const canScrollLeft2 = inner.scrollLeft > 0;
+    const canScrollRight2 = inner.scrollLeft < inner.scrollWidth - inner.clientWidth;
+    setShowScrollButtons(hasOverflow);
+    setCanScrollLeft(canScrollLeft2);
+    setCanScrollRight(canScrollRight2);
+  }, []);
+  const scroll = useCallback(
+    (direction) => {
+      if (isScrollBlocked || !wrapperInnerRef.current) return;
+      setIsScrollBlocked(true);
+      const scrollAmount = 100;
+      const offset = direction === "left" ? -scrollAmount : scrollAmount;
+      try {
+        wrapperInnerRef.current.scrollBy({
+          left: offset,
+          behavior: "smooth"
+        });
+      } catch (error) {
+        console.error("scrollBy is not supported", error);
+        if (wrapperInnerRef.current) {
+          wrapperInnerRef.current.scrollLeft += offset;
+        }
+      }
+      setTimeout(() => {
+        setIsScrollBlocked(false);
+        checkScroll();
+      }, 300);
+    },
+    [isScrollBlocked, checkScroll]
+  );
+  const handleWheel = useCallback(
+    (e) => {
+      if (!scrollMode) return;
+      e.preventDefault();
+      if (e.deltaY > 0) {
+        scroll("right");
+      } else {
+        scroll("left");
+      }
+    },
+    [scroll, scrollMode]
+  );
+  const onTabChange = useCallback(
+    (item) => {
+      if (!item.disabled && !(mode === "create" && item.tabId !== "general")) {
+        onChange(item.tabId);
+      }
+    },
+    [mode, onChange]
+  );
+  const navigateByKeys = useCallback(
+    (event) => {
+      if (event.repeat) return;
+      const activeTabIndex = items.findIndex((tab) => tab.tabId === activeTab);
+      const nextTabID = items[activeTabIndex + 1]?.tabId;
+      const prevTabID = items[activeTabIndex - 1]?.tabId;
+      if (event.keyCode === KEYBOARD_KEY_CODES.ARROW_RIGHT && nextTabID) {
+        onChange(nextTabID);
+      } else if (event.keyCode === KEYBOARD_KEY_CODES.ARROW_LEFT && prevTabID) {
+        onChange(prevTabID);
+      }
+    },
+    [activeTab, items, onChange]
+  );
+  useEffect3(() => {
+    setNavLineItems(
+      items.map((item) => ({
+        ...item,
+        ref: createRef()
+      }))
+    );
+  }, [items]);
+  useEffect3(() => {
+    if (isNavigateByKeys && !isTabLoading) {
+      document.addEventListener("keydown", navigateByKeys);
+    }
+    return () => document.removeEventListener("keydown", navigateByKeys);
+  }, [isNavigateByKeys, isTabLoading, navigateByKeys]);
+  useEffect3(() => {
+    if (!scrollMode) return;
+    const inner = wrapperInnerRef.current;
+    if (!inner) return;
+    const resizeObserver = new ResizeObserver(checkScroll);
+    resizeObserver.observe(inner);
+    inner.addEventListener("scroll", checkScroll);
+    inner.addEventListener("wheel", handleWheel, { passive: false });
+    checkScroll();
+    return () => {
+      resizeObserver.disconnect();
+      inner.removeEventListener("scroll", checkScroll);
+      inner.removeEventListener("wheel", handleWheel);
+    };
+  }, [scrollMode, checkScroll, handleWheel]);
+  const renderNavItem = (item) => {
+    const Icon = item.icon ? Icons4[item.icon] : null;
+    const isDisabled = item.disabled || mode === "create" && item.tabId !== "general";
+    const commonProps = {
+      "title": item.title,
+      "className": cn7(
+        { "nav-line__item": !variant },
+        { "nav-line--simple__item": variant === "simple" },
+        { active: activeTab === item.tabId },
+        { disabled: isDisabled },
+        { "nav-line__item--hidden": item.isHidden }
+      ),
+      "role": "tab",
+      "aria-selected": activeTab === item.tabId,
+      "aria-disabled": isDisabled,
+      "tabIndex": isDisabled ? -1 : 0
+    };
+    const content = /* @__PURE__ */ jsxs7("div", { className: "nav-line__content", children: [
+      Icon && /* @__PURE__ */ jsx7("div", { className: "nav-line__item--icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx7(Icon, {}) }),
+      /* @__PURE__ */ jsx7("span", { className: cn7({ "nav-line__item--label": variant !== "simple" }), children: item.label }),
+      item.count !== void 0 && /* @__PURE__ */ jsxs7("span", { className: "nav-line-count", "aria-label": `${item.count} items`, children: [
+        "(",
+        item.count,
+        ")"
+      ] })
+    ] });
+    if (isLocal) {
+      return /* @__PURE__ */ jsx7(
+        "span",
+        {
+          ...commonProps,
+          ref: checkedRef(item.ref),
+          onClick: () => !isDisabled && onTabChange(item),
+          onKeyPress: (e) => {
+            if (!isDisabled && (e.key === "Enter" || e.key === " ")) {
+              e.preventDefault();
+              onTabChange(item);
+            }
+          },
+          children: content
+        },
+        `tab__${item.tabId}`
+      );
+    }
+    return /* @__PURE__ */ jsx7(
+      NavLink3,
+      {
+        ...commonProps,
+        to: `${root}${item?.linkChapter || item.tabId}/`,
+        onClick: (e) => {
+          if (isDisabled) {
+            e.preventDefault();
+          }
+        },
+        children: content
+      },
+      `tab__${item.tabId}`
+    );
+  };
+  return /* @__PURE__ */ jsx7("div", { className: "nav-line-wrapper", children: /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      "data-testid": testId,
+      className: cn7(
+        { [CN2]: !variant },
+        { [`${CN2}--simple`]: variant === "simple" },
+        { [`${CN2}--scroll-mode`]: scrollMode },
+        className
+      ),
+      ref: wrapperRef,
+      children: [
+        scrollMode && showScrollButtons && /* @__PURE__ */ jsx7(
+          "button",
+          {
+            type: "button",
+            "data-testid": "nav-line-scroll-prev",
+            className: "nav-line--simple__arrow nav-line--simple__arrow--prev",
+            onClick: () => scroll("left"),
+            "aria-label": "Scroll previous",
+            disabled: !canScrollLeft,
+            children: /* @__PURE__ */ jsx7(Icons4.ChevronLeft, {})
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          "div",
+          {
+            ref: wrapperInnerRef,
+            className: cn7({ "nav-line__inner": !variant }, { "nav-line--simple__inner": variant === "simple" }),
+            role: "tablist",
+            "aria-orientation": "horizontal",
+            children: navLineItems.map(renderNavItem)
+          }
+        ),
+        scrollMode && showScrollButtons && /* @__PURE__ */ jsx7(
+          "button",
+          {
+            type: "button",
+            "data-testid": "nav-line-scroll-next",
+            className: "nav-line--simple__arrow nav-line--simple__arrow--next",
+            onClick: () => scroll("right"),
+            "aria-label": "Scroll next",
+            disabled: !canScrollRight,
+            children: /* @__PURE__ */ jsx7(Icons4.ChevronRight, {})
+          }
+        ),
+        children && /* @__PURE__ */ jsx7("div", { className: "nav-line__body", role: "tabpanel", children })
+      ]
+    }
+  ) });
+};
+var NavLine_default = NavLine;
+
+// src/Atomic/UI/NavLine/index.ts
+var NavLine_default2 = NavLine_default;
+export {
+  Accordion_default2 as Accordion,
+  ButtonsBar_default2 as ButtonsBar,
+  MainMenu_default as MainMenu,
+  NavLine_default2 as NavLine
+};
+//# sourceMappingURL=router-ui.js.map