react-better-html 1.1.115 → 1.1.117

package/dist/index.mjs

@@ -6842,10 +6842,11 @@ import {
   useState as useState8,
   useImperativeHandle as useImperativeHandle2,
   useRef as useRef5,
-  useEffect as useEffect9
+  useEffect as useEffect9,
+  Fragment as Fragment5
 } from "react";
 import styled10, { css as css2 } from "styled-components";
-import { Fragment as Fragment5, jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 var defaultImageWidth = 160;
 var maximumVisiblePages = 11;
 var TableStyledComponent = styled10.table.withConfig({
@@ -6871,6 +6872,14 @@ var TableStyledComponent = styled10.table.withConfig({
          cursor: pointer;
       }
 
+      &.isExpandRow {
+         height: 0px;
+
+         td {
+            border-top: none;
+         }
+      }
+
       ${(props) => props.isStriped ? css2`
                  &:nth-child(even) {
                     background-color: ${props.theme.colors.backgroundSecondary};
@@ -6948,6 +6957,7 @@ var TableComponent = forwardRef15(function Table({
   const { colorTheme } = useBetterHtmlContextInternal();
   const filterModalRef = useRef5(null);
   const [checkedItems, setCheckedItems] = useState8([]);
+  const [expandedRows, setExpandedRows] = useState8([]);
   const [currentPage, setCurrentPage] = useState8(1);
   const [filterData, setFilterData] = useState8({});
   const [openedFilterColumnIndex, setOpenedFilterColumnIndex] = useState8();
@@ -6980,30 +6990,35 @@ var TableComponent = forwardRef15(function Table({
       filterModalRef.current?.close();
     }
   });
+  const expandRow = useMemo7(() => columns.find((column) => column.type === "expand"), [columns]);
   const renderCellContent = useCallback10(
-    (column, item, index) => {
+    (column, item, itemIndex) => {
       switch (column.type) {
         case "text": {
           const value = column.keyName ? item[column.keyName] : void 0;
-          return column.format?.(item, index) ?? String(value ?? "");
+          const textProps = (typeof column.getTextProps === "function" ? column.getTextProps?.(item, itemIndex) : column.getTextProps) ?? {};
+          return /* @__PURE__ */ jsx20(Text_default, { ...textProps, children: column.format?.(item, itemIndex) ?? String(value ?? "") });
         }
         case "element": {
-          return column.render?.(item, index) ?? /* @__PURE__ */ jsx20(Fragment5, {});
+          return column.render?.(item, itemIndex) ?? /* @__PURE__ */ jsx20(Fragment6, {});
         }
         case "image": {
-          const src = column.getImageSrc?.(item, index) ?? (column.keyName ? item[column.keyName] : void 0);
-          return /* @__PURE__ */ jsx20(Image_default, { src, width: "100%", borderRadius: theme2.styles.borderRadius / 2, ...column.imageProps });
+          const imageProps = (typeof column.getImageProps === "function" ? column.getImageProps?.(item, itemIndex) : column.getImageProps) ?? {};
+          return /* @__PURE__ */ jsx20(Image_default, { width: "100%", borderRadius: theme2.styles.borderRadius / 2, ...imageProps });
         }
         case "checkbox": {
-          const { onChange, ...toggleInputProps } = column.toggleInputProps ?? {};
-          const checkedValue = checkedItems[index];
+          const { onChange, ...toggleInputProps } = (typeof column.getToggleInputProps === "function" ? column.getToggleInputProps?.(item, itemIndex) : column.getToggleInputProps) ?? {};
+          const checkedValue = checkedItems[itemIndex];
           return /* @__PURE__ */ jsx20(
             ToggleInput_default.checkbox,
             {
               checked: checkedValue,
+              value: item,
               onChange: (checked, value) => {
                 setCheckedItems(
-                  (oldValue) => oldValue.map((isChecked, internalIndex) => internalIndex === index ? checked : isChecked)
+                  (oldValue) => oldValue.map(
+                    (isChecked, internalIndex) => internalIndex === itemIndex ? checked : isChecked
+                  )
                 );
                 onChange?.(checked, value);
               },
@@ -7011,18 +7026,37 @@ var TableComponent = forwardRef15(function Table({
             }
           );
         }
+        case "expand": {
+          return /* @__PURE__ */ jsx20(
+            Icon_default,
+            {
+              name: "chevronDown",
+              transform: `rotate(${expandedRows[itemIndex] ? 180 : 0}deg)`,
+              transition: theme2.styles.transition
+            }
+          );
+        }
         default: {
-          return /* @__PURE__ */ jsx20(Fragment5, {});
+          return /* @__PURE__ */ jsx20(Fragment6, {});
         }
       }
     },
-    [theme2, checkedItems]
+    [theme2, checkedItems, expandedRows]
   );
   const onClickRowElement = useCallback10(
     (item, index) => {
-      onClickRow?.(item, index);
+      if (expandRow) {
+        setExpandedRows((oldValue) => {
+          if (oldValue[index] === void 0) {
+            const newValue = expandRow.onlyOneExpanded ? [] : [...oldValue];
+            newValue[index] = true;
+            return newValue;
+          }
+          return oldValue.map((isExpanded, internalIndex) => internalIndex === index ? !isExpanded : isExpanded);
+        });
+      } else onClickRow?.(item, index);
     },
-    [onClickRow]
+    [onClickRow, expandRow]
   );
   const onClickAllCheckboxesElement = useCallback10(
     (checked) => {
@@ -7147,6 +7181,14 @@ var TableComponent = forwardRef15(function Table({
     },
     [openedFilterColumn]
   );
+  const renderExpandedRow = useCallback10(
+    (...props2) => {
+      const expandColumn = columns.find((column) => column.type === "expand");
+      if (!expandColumn) return;
+      return expandColumn.render?.(...props2);
+    },
+    [columns]
+  );
   const dataAfterFilter = useMemo7(
     () => data.filter(
       (item) => Object.entries(filterData).every(([columnIndex, filter]) => {
@@ -7252,7 +7294,7 @@ var TableComponent = forwardRef15(function Table({
     [currentPage, setCurrentPage, pageCountInternal, setCheckedItems]
   );
   const mobileFooterBreakingPoint = mediumScreen.size700 && pageCountInternal > maximumVisiblePages / 1.4;
-  return /* @__PURE__ */ jsxs16(Fragment5, { children: [
+  return /* @__PURE__ */ jsxs16(Fragment6, { children: [
     /* @__PURE__ */ jsx20(
       Div_default,
       {
@@ -7264,7 +7306,7 @@ var TableComponent = forwardRef15(function Table({
           TableStyledComponent,
           {
             isStriped,
-            withHover: onClickRow !== void 0,
+            withHover: onClickRow !== void 0 || expandRow !== void 0,
             withStickyHeader,
             colorTheme,
             theme: theme2,
@@ -7272,7 +7314,7 @@ var TableComponent = forwardRef15(function Table({
               /* @__PURE__ */ jsx20("thead", { children: /* @__PURE__ */ jsx20("tr", { className: "isHeader", children: columns.map((column, index) => /* @__PURE__ */ jsx20(
                 ThStyledComponent,
                 {
-                  width: column.width ?? (column.type === "image" ? defaultImageWidth : column.type === "checkbox" ? 26 : void 0),
+                  width: column.width ?? (column.type === "image" ? defaultImageWidth : column.type === "checkbox" ? 26 : column.type === "expand" ? 16 : void 0),
                   minWidth: column.minWidth,
                   maxWidth: column.maxWidth,
                   textAlign: column.align,
@@ -7306,15 +7348,24 @@ var TableComponent = forwardRef15(function Table({
                 },
                 column.type + column.label + index
               )) }) }),
-              /* @__PURE__ */ jsx20("tbody", { children: isLoading ? /* @__PURE__ */ jsx20("tr", { className: "withoutHover", children: /* @__PURE__ */ jsx20("td", { className: "noData", colSpan: columns.length, children: /* @__PURE__ */ jsx20(Loader_default.box, {}) }) }) : dataAfterPagination.length > 0 ? dataAfterPagination.map((item, rowIndex) => /* @__PURE__ */ jsx20(
-                "tr",
-                {
-                  className: onClickRow ? "isClickable" : void 0,
-                  onClick: () => onClickRowElement(item, rowIndex),
-                  children: columns.map((column, colIndex) => /* @__PURE__ */ jsx20(TdStyledComponent, { textAlign: column.align, children: renderCellContent(column, item, rowIndex) }, column.type + column.label + colIndex))
-                },
-                JSON.stringify(item) + rowIndex
-              )) : /* @__PURE__ */ jsx20("tr", { className: "withoutHover", children: /* @__PURE__ */ jsx20("td", { className: "noData", colSpan: columns.length, children: /* @__PURE__ */ jsx20(Text_default.unknown, { children: noDataItemsMessage }) }) }) }),
+              /* @__PURE__ */ jsx20("tbody", { children: isLoading ? /* @__PURE__ */ jsx20("tr", { className: "withoutHover", children: /* @__PURE__ */ jsx20("td", { className: "noData", colSpan: columns.length, children: /* @__PURE__ */ jsx20(Loader_default.box, {}) }) }) : dataAfterPagination.length > 0 ? dataAfterPagination.map((item, rowIndex) => /* @__PURE__ */ jsxs16(Fragment5, { children: [
+                /* @__PURE__ */ jsx20(
+                  "tr",
+                  {
+                    className: onClickRow || expandRow ? "isClickable" : void 0,
+                    onClick: () => onClickRowElement(item, rowIndex),
+                    children: columns.map((column, colIndex) => /* @__PURE__ */ jsx20(
+                      TdStyledComponent,
+                      {
+                        textAlign: column.align,
+                        children: renderCellContent(column, item, rowIndex)
+                      },
+                      column.type + column.label + colIndex
+                    ))
+                  }
+                ),
+                expandedRows[rowIndex] && /* @__PURE__ */ jsx20("tr", { className: "withoutHover isExpandRow", children: /* @__PURE__ */ jsx20("td", { colSpan: columns.length, children: renderExpandedRow(item, rowIndex) }) })
+              ] }, JSON.stringify(item) + rowIndex)) : /* @__PURE__ */ jsx20("tr", { className: "withoutHover", children: /* @__PURE__ */ jsx20("td", { className: "noData", colSpan: columns.length, children: /* @__PURE__ */ jsx20(Text_default.unknown, { children: noDataItemsMessage }) }) }) }),
               pageSize !== void 0 && pageCountInternal > 1 && /* @__PURE__ */ jsx20("tfoot", { children: /* @__PURE__ */ jsx20("tr", { className: "isFooter", children: /* @__PURE__ */ jsx20("td", { colSpan: columns.length, children: /* @__PURE__ */ jsxs16(
                 Div_default.column,
                 {
@@ -7526,20 +7577,368 @@ var TableComponent = forwardRef15(function Table({
 var Table2 = memo20(TableComponent);
 var Table_default = Table2;
 
-// src/components/Tabs.tsx
-import { forwardRef as forwardRef16, memo as memo21, useCallback as useCallback11, useEffect as useEffect10, useImperativeHandle as useImperativeHandle3, useMemo as useMemo8, useRef as useRef6, useState as useState9 } from "react";
+// src/components/Tooltip.tsx
+import { memo as memo21, useCallback as useCallback11, useRef as useRef6, useState as useState9, useEffect as useEffect10, forwardRef as forwardRef16, useImperativeHandle as useImperativeHandle3, useMemo as useMemo8 } from "react";
+import styled11, { css as css3 } from "styled-components";
 import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+var tooltipContainerStyle = (props) => ({
+  top: css3`
+      bottom: calc(100% + ${props.gap}px + ${props.arrowSize}px);
+      ${props.align === "center" ? "left: 50%;" : props.align === "left" ? "left: 0;" : "right: 0;"}
+   `,
+  bottom: css3`
+      top: calc(100% + ${props.gap}px + ${props.arrowSize}px);
+      ${props.align === "center" ? "left: 50%;" : props.align === "left" ? "left: 0;" : "right: 0;"};
+   `,
+  left: css3`
+      ${props.align === "center" ? "top: 50%;" : props.align === "top" ? "top: 0;" : "bottom: 0;"};
+      right: calc(100% + ${props.gap}px + ${props.arrowSize}px);
+   `,
+  right: css3`
+      ${props.align === "center" ? "top: 50%;" : props.align === "top" ? "top: 0;" : "bottom: 0;"};
+      left: calc(100% + ${props.gap}px + ${props.arrowSize}px);
+   `
+});
+var tooltipPositionStyle = (props) => ({
+  top: {
+    opened: css3`
+         transform: translateX(${props.align === "center" ? "-50%" : "0"});
+      `,
+    closed: css3`
+         transform: translateX(${props.align === "center" ? "-50%" : "0"}) translateY(${props.theme.styles.gap}px);
+      `
+  },
+  bottom: {
+    opened: css3`
+         transform: translateX(${props.align === "center" ? "-50%" : "0"});
+      `,
+    closed: css3`
+         transform: translateX(${props.align === "center" ? "-50%" : "0"}) translateY(-${props.theme.styles.gap}px);
+      `
+  },
+  left: {
+    opened: css3`
+         transform: translateY(${props.align === "center" ? "-50%" : "0"});
+      `,
+    closed: css3`
+         transform: translateX(${props.theme.styles.gap}px) translateY(${props.align === "center" ? "-50%" : "0"});
+      `
+  },
+  right: {
+    opened: css3`
+         transform: translateY(${props.align === "center" ? "-50%" : "0"});
+      `,
+    closed: css3`
+         transform: translateX(-${props.theme.styles.gap}px) translateY(${props.align === "center" ? "-50%" : "0"});
+      `
+  }
+});
+var TooltipContainer = styled11.div.withConfig({
+  shouldForwardProp: (prop) => !["theme", "position", "align", "withArrow", "arrowSize", "isOpen", "gap"].includes(prop)
+})`
+   position: absolute;
+   opacity: ${(props) => props.isOpen ? 1 : 0};
+   pointer-events: ${(props) => props.isOpen ? "auto" : "none"};
+   transition: ${(props) => props.theme.styles.transition};
+   z-index: 1000;
+
+   ${(props) => tooltipContainerStyle(props)[props.position]}
+
+   ${(props) => props.isOpen ? tooltipPositionStyle(props)[props.position].opened : tooltipPositionStyle(props)[props.position].closed}
+`;
+var arrowStyle = (props, borderWidth) => ({
+  top: {
+    borderTopColor: props.color,
+    borderBottom: 0,
+    top: borderWidth ? -props.size : void 0,
+    left: borderWidth ? -props.size + borderWidth * 2 : props.align === "center" ? "50%" : props.align === "left" ? props.sideSpace : void 0,
+    right: !borderWidth && props.align === "right" ? props.sideSpace : void 0,
+    bottom: -props.size + 1,
+    transform: !borderWidth && props.align === "center" ? "translateX(-50%)" : void 0
+  },
+  bottom: {
+    borderBottomColor: props.color,
+    borderTop: 0,
+    top: borderWidth ? borderWidth * 2 : -props.size + 1,
+    left: borderWidth ? -props.size + borderWidth * 2 : props.align === "center" ? "50%" : props.align === "left" ? props.sideSpace : void 0,
+    right: !borderWidth && props.align === "right" ? props.sideSpace : void 0,
+    transform: !borderWidth && props.align === "center" ? "translateX(-50%);" : void 0
+  },
+  left: {
+    borderLeftColor: props.color,
+    borderRight: 0,
+    top: borderWidth ? -props.size + borderWidth * 2 : props.align === "center" ? "50%" : props.align === "top" ? props.sideSpace : void 0,
+    bottom: !borderWidth && props.align === "bottom" ? props.sideSpace : void 0,
+    left: borderWidth ? -props.size : void 0,
+    right: -props.size + 1,
+    transform: !borderWidth && props.align === "center" ? "translateY(-50%)" : void 0
+  },
+  right: {
+    borderRightColor: props.color,
+    borderLeft: 0,
+    top: borderWidth ? -props.size + borderWidth * 2 : props.align === "center" ? "50%" : props.align === "top" ? props.sideSpace : void 0,
+    bottom: !borderWidth && props.align === "bottom" ? props.sideSpace : void 0,
+    left: borderWidth ? borderWidth * 2 : -props.size + 1,
+    transform: !borderWidth && props.align === "center" ? "translateY(-50%);" : void 0
+  }
+});
+var Arrow = memo21(function Arrow2(props) {
+  const theme2 = useTheme();
+  const { position, size } = props;
+  const outerProps = useMemo8(
+    () => ({
+      ...props,
+      color: theme2.colors.border
+    }),
+    [props, theme2]
+  );
+  const borderWidth = 1;
+  return /* @__PURE__ */ jsx21(
+    Div_default,
+    {
+      position: "absolute",
+      width: 0,
+      height: 0,
+      border: `${size}px solid transparent`,
+      ...arrowStyle(outerProps)[position],
+      children: /* @__PURE__ */ jsx21(
+        Div_default,
+        {
+          position: "absolute",
+          width: 0,
+          height: 0,
+          border: `${size - borderWidth * 2}px solid transparent`,
+          ...arrowStyle(props, borderWidth)[position]
+        }
+      )
+    }
+  );
+});
+var TooltipComponent = forwardRef16(function Tooltip({
+  position = "bottom",
+  trigger = "hover",
+  align = "center",
+  content,
+  contentWidth,
+  contentMinWidth,
+  withArrow,
+  isSmall,
+  backgroundColor,
+  asContextMenu,
+  onOpen,
+  onClose,
+  children
+}, ref) {
+  const theme2 = useTheme();
+  const triggerHolderRef = useRef6(null);
+  const contentRef = useRef6(null);
+  const tooltipContainerRef = useRef6(null);
+  const closeTimerRef = useRef6(void 0);
+  const [isOpen, setIsOpen] = useState9(false);
+  const [isOpenLate, setIsOpenLate] = useState9(false);
+  const arrowSize = withArrow ? theme2.styles.gap : 0;
+  const gap = theme2.styles.gap / 2;
+  const outsideScreenGap = theme2.styles.gap / 2;
+  const totalGap = arrowSize + gap;
+  const openTooltip = useCallback11(() => {
+    if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+    setIsOpen(true);
+    setIsOpenLate(true);
+    setTimeout(() => {
+      if (!tooltipContainerRef.current) return;
+      if (!contentRef.current) return;
+      const clientRects = tooltipContainerRef.current.getBoundingClientRect();
+      if (clientRects) {
+        const { width, height, x, y } = clientRects;
+        const topOutside = y < 0;
+        const bottomOutside = y + height > window.innerHeight;
+        const leftOutside = x < 0;
+        const rightOutside = x + width > window.innerWidth;
+        if (topOutside) contentRef.current.style.transform = `translateY(${y * -1 + outsideScreenGap}px)`;
+        if (bottomOutside)
+          contentRef.current.style.transform = `translateY(${window.innerHeight - (y + height) - totalGap}px)`;
+        if (leftOutside) contentRef.current.style.transform = `translateX(${x * -1 + outsideScreenGap}px)`;
+        if (rightOutside)
+          contentRef.current.style.transform = `translateX(${window.innerWidth - (x + width) - totalGap}px)`;
+      }
+    }, 1);
+    onOpen?.();
+  }, [onOpen, outsideScreenGap, totalGap]);
+  const closeTooltip = useCallback11(() => {
+    setIsOpen(false);
+    closeTimerRef.current = setTimeout(() => setIsOpenLate(false), 300);
+    onClose?.();
+  }, [onClose]);
+  const onMouseEnter = useCallback11(() => {
+    if (trigger === "hover") openTooltip();
+  }, [trigger, openTooltip]);
+  const onMouseLeave = useCallback11(() => {
+    if (trigger === "hover") closeTooltip();
+  }, [trigger, closeTooltip]);
+  const onClickHolder = useCallback11(
+    (event) => {
+      if (trigger === "click") {
+        if (!isOpen) openTooltip();
+        else if (triggerHolderRef.current?.contains(event.target)) closeTooltip();
+      }
+    },
+    [trigger, openTooltip, isOpen, closeTooltip]
+  );
+  const onClickOutside = useCallback11(
+    (event) => {
+      if (!isOpen) return;
+      if (trigger !== "click") return;
+      if (!contentRef.current?.contains(event.target) && !triggerHolderRef.current?.contains(event.target)) {
+        closeTooltip();
+      }
+    },
+    [trigger, isOpen, closeTooltip]
+  );
+  useEffect10(() => {
+    if (trigger === "click") {
+      document.addEventListener("mousedown", onClickOutside);
+      return () => {
+        document.removeEventListener("mousedown", onClickOutside);
+      };
+    }
+  }, [trigger, onClickOutside]);
+  useImperativeHandle3(
+    ref,
+    () => {
+      return {
+        isOpen,
+        open: openTooltip,
+        close: closeTooltip
+      };
+    },
+    [isOpen, openTooltip, closeTooltip]
+  );
+  return /* @__PURE__ */ jsxs17(Div_default, { position: "relative", onClick: onClickHolder, onMouseEnter, onMouseLeave, children: [
+    /* @__PURE__ */ jsx21(Div_default, { width: "100%", ref: triggerHolderRef, children }),
+    /* @__PURE__ */ jsx21(
+      TooltipContainer,
+      {
+        theme: theme2,
+        position,
+        align,
+        withArrow,
+        arrowSize,
+        gap,
+        isOpen,
+        role: "tooltip",
+        ref: tooltipContainerRef,
+        children: (isOpen || isOpenLate) && /* @__PURE__ */ jsxs17(Div_default, { position: "relative", ref: contentRef, children: [
+          /* @__PURE__ */ jsx21(
+            Div_default.box,
+            {
+              position: "relative",
+              width: contentWidth,
+              minWidth: contentMinWidth,
+              backgroundColor: backgroundColor ?? theme2.colors.backgroundContent,
+              boxShadow: "0px 10px 20px #00000020",
+              paddingBlock: isSmall ? theme2.styles.gap / 2 : theme2.styles.gap,
+              paddingInline: asContextMenu ? 0 : isSmall ? theme2.styles.space / 2 : theme2.styles.space,
+              overflow: asContextMenu ? "hidden" : void 0,
+              children: content
+            }
+          ),
+          /* @__PURE__ */ jsx21(
+            Div_default,
+            {
+              position: "absolute",
+              width: position === "left" || position === "right" ? totalGap : "100%",
+              height: position === "top" || position === "bottom" ? totalGap : "100%",
+              top: position === "top" ? "100%" : position === "bottom" ? void 0 : 0,
+              bottom: position === "bottom" ? "100%" : position === "top" ? void 0 : 0,
+              left: position === "left" ? "100%" : position === "right" ? void 0 : 0,
+              right: position === "right" ? "100%" : position === "left" ? void 0 : 0,
+              borderTopLeftRadius: 999,
+              borderTopRightRadius: 999
+            }
+          ),
+          withArrow && /* @__PURE__ */ jsx21(
+            Arrow,
+            {
+              position,
+              align,
+              sideSpace: theme2.styles.borderRadius,
+              size: arrowSize,
+              color: backgroundColor ?? theme2.colors.backgroundContent,
+              isOpen
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+});
+TooltipComponent.item = forwardRef16(function Item({ icon, text, description, isActive, value, id, onClick, onClickWithValue }, ref) {
+  const theme2 = useTheme();
+  return /* @__PURE__ */ jsxs17(
+    Div_default.row,
+    {
+      alignItems: "center",
+      gap: theme2.styles.space,
+      backgroundColor: theme2.colors.backgroundContent,
+      filterHover: "brightness(0.9)",
+      paddingBlock: theme2.styles.gap,
+      paddingInline: theme2.styles.space,
+      cursor: "pointer",
+      id,
+      value,
+      onClick,
+      onClickWithValue,
+      ref,
+      children: [
+        icon && /* @__PURE__ */ jsx21(Icon_default, { name: icon, color: !isActive ? theme2.colors.textSecondary : void 0 }),
+        /* @__PURE__ */ jsxs17(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
+          /* @__PURE__ */ jsx21(Text_default, { fontWeight: isActive ? 700 : void 0, children: text }),
+          description && /* @__PURE__ */ jsx21(Text_default, { fontSize: 14, color: theme2.colors.textSecondary, children: description })
+        ] })
+      ]
+    }
+  );
+});
+TooltipComponent.divider = forwardRef16(function DividerComponent(props, ref) {
+  const theme2 = useTheme();
+  return /* @__PURE__ */ jsx21(Divider_default.horizontal, { marginBlock: theme2.styles.gap, ...props, ref });
+});
+TooltipComponent.sectionTitle = forwardRef16(function SectionTitle({ text, ...props }, ref) {
+  const theme2 = useTheme();
+  return /* @__PURE__ */ jsx21(
+    Text_default,
+    {
+      fontSize: 12,
+      fontWeight: 700,
+      textTransform: "uppercase",
+      marginBlock: theme2.styles.gap / 2,
+      marginInline: theme2.styles.space,
+      ...props,
+      ref,
+      children: text
+    }
+  );
+});
+var Tooltip2 = memo21(TooltipComponent);
+Tooltip2.item = TooltipComponent.item;
+Tooltip2.divider = TooltipComponent.divider;
+Tooltip2.sectionTitle = TooltipComponent.sectionTitle;
+var Tooltip_default = Tooltip2;
+
+// src/components/Tabs.tsx
+import { forwardRef as forwardRef17, memo as memo22, useCallback as useCallback12, useEffect as useEffect11, useImperativeHandle as useImperativeHandle4, useMemo as useMemo9, useRef as useRef7, useState as useState10 } from "react";
+import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
 var tabBottomLineWidth = 2;
 var tabDotSize = 6;
 var defaultTabName = "tab";
-var TabsComponent = forwardRef16(function Tabs({ tabs, name, accentColor, style = "default", onChange, children, ...props }, ref) {
+var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style = "default", onChange, children, ...props }, ref) {
   const reactRouterDomPlugin2 = usePlugin("react-router-dom");
   const theme2 = useTheme();
   const urlQuery = reactRouterDomPlugin2 ? useUrlQuery() : void 0;
   const { colorTheme, componentsState } = useBetterHtmlContextInternal();
-  const firstRenderPassedRef = useRef6(false);
-  const tabsRef = useRef6({});
-  const [selectedTab, setSelectedTab] = useState9(() => {
+  const firstRenderPassedRef = useRef7(false);
+  const tabsRef = useRef7({});
+  const [selectedTab, setSelectedTab] = useState10(() => {
     const selectedTabValue = tabs[0] ?? "";
     if (urlQuery) {
       const tabQueryValue = urlQuery.getQuery(name ?? defaultTabName);
@@ -7548,9 +7947,9 @@ var TabsComponent = forwardRef16(function Tabs({ tabs, name, accentColor, style
     }
     return selectedTabValue;
   });
-  const [rerenderState, setRerenderState] = useState9(0);
+  const [rerenderState, setRerenderState] = useState10(0);
   const tabsGap = style === "box" ? theme2.styles.gap / 2 : 0;
-  const onClickTab = useCallback11(
+  const onClickTab = useCallback12(
     (tab) => {
       setSelectedTab(tab);
       onChange?.(tab);
@@ -7562,11 +7961,11 @@ var TabsComponent = forwardRef16(function Tabs({ tabs, name, accentColor, style
     },
     [onChange, name, urlQuery]
   );
-  const width = useMemo8(
+  const width = useMemo9(
     () => tabsRef.current[selectedTab]?.getBoundingClientRect().width ?? 0,
     [rerenderState, selectedTab]
   );
-  const leftSpacing = useMemo8(() => {
+  const leftSpacing = useMemo9(() => {
     const selectedTabIndex = tabs.findIndex((tab) => tab === selectedTab);
     let spacing = 0;
     Object.values(tabsRef.current).forEach((tab, index) => {
@@ -7574,7 +7973,7 @@ var TabsComponent = forwardRef16(function Tabs({ tabs, name, accentColor, style
     });
     return spacing;
   }, [selectedTab, tabs, tabsGap]);
-  useEffect10(() => {
+  useEffect11(() => {
     const timeout = setTimeout(() => {
       setRerenderState(Math.random());
       firstRenderPassedRef.current = true;
@@ -7583,7 +7982,7 @@ var TabsComponent = forwardRef16(function Tabs({ tabs, name, accentColor, style
       clearTimeout(timeout);
     };
   }, []);
-  useEffect10(() => {
+  useEffect11(() => {
     componentsState.tabs.setTabGroups((oldValue) => {
       const thisTabGroup = oldValue.find((item) => item.name === (name ?? defaultTabName));
       if (thisTabGroup) {
@@ -7604,20 +8003,20 @@ var TabsComponent = forwardRef16(function Tabs({ tabs, name, accentColor, style
       }
     });
   }, [selectedTab, name]);
-  useEffect10(() => {
+  useEffect11(() => {
     tabsRef.current[selectedTab]?.scrollIntoView({
       behavior: firstRenderPassedRef.current ? "smooth" : void 0,
       block: "nearest"
     });
   }, [selectedTab]);
-  useEffect10(() => {
+  useEffect11(() => {
     return () => {
       componentsState.tabs.setTabGroups(
         (oldValue) => oldValue.filter((item) => item.name !== (name ?? defaultTabName))
       );
     };
   }, []);
-  useImperativeHandle3(
+  useImperativeHandle4(
     ref,
     () => {
       return {
@@ -7627,11 +8026,11 @@ var TabsComponent = forwardRef16(function Tabs({ tabs, name, accentColor, style
     },
     [selectedTab, onClickTab]
   );
-  return /* @__PURE__ */ jsxs17(Div_default.column, { width: "100%", gap: theme2.styles.space, ...props, children: [
-    /* @__PURE__ */ jsxs17(Div_default, { position: "relative", className: "react-better-html-no-scrollbar", overflowY: "auto", children: [
-      /* @__PURE__ */ jsx21(Div_default.row, { position: "relative", width: "fit-content", gap: tabsGap, userSelect: "none", children: tabs.map((tab) => {
+  return /* @__PURE__ */ jsxs18(Div_default.column, { width: "100%", gap: theme2.styles.space, ...props, children: [
+    /* @__PURE__ */ jsxs18(Div_default, { position: "relative", className: "react-better-html-no-scrollbar", overflowY: "auto", children: [
+      /* @__PURE__ */ jsx22(Div_default.row, { position: "relative", width: "fit-content", gap: tabsGap, userSelect: "none", children: tabs.map((tab) => {
         const selected = tab === selectedTab;
-        return /* @__PURE__ */ jsxs17(
+        return /* @__PURE__ */ jsxs18(
           Div_default,
           {
             position: "relative",
@@ -7652,7 +8051,7 @@ var TabsComponent = forwardRef16(function Tabs({ tabs, name, accentColor, style
               tabsRef.current[tab] = ref2;
             },
             children: [
-              componentsState.tabs.tabsWithDots.includes(tab) && /* @__PURE__ */ jsx21(
+              componentsState.tabs.tabsWithDots.includes(tab) && /* @__PURE__ */ jsx22(
                 Div_default,
                 {
                   position: "absolute",
@@ -7665,7 +8064,7 @@ var TabsComponent = forwardRef16(function Tabs({ tabs, name, accentColor, style
                   transition: theme2.styles.transition
                 }
               ),
-              /* @__PURE__ */ jsx21(
+              /* @__PURE__ */ jsx22(
                 Text_default,
                 {
                   fontWeight: 700,
@@ -7680,7 +8079,7 @@ var TabsComponent = forwardRef16(function Tabs({ tabs, name, accentColor, style
           tab
         );
       }) }),
-      style !== "box" && /* @__PURE__ */ jsx21(
+      style !== "box" && /* @__PURE__ */ jsx22(
         Div_default,
         {
           position: "absolute",
@@ -7693,16 +8092,16 @@ var TabsComponent = forwardRef16(function Tabs({ tabs, name, accentColor, style
         }
       )
     ] }),
-    children && /* @__PURE__ */ jsx21(Div_default, { width: "100%", children })
+    children && /* @__PURE__ */ jsx22(Div_default, { width: "100%", children })
   ] });
 });
 TabsComponent.content = function Content({ tab, tabWithDot, tabsGroupName, isInitialTab, children }) {
   const { componentsState } = useBetterHtmlContextInternal();
-  const thisTabGroupData = useMemo8(
+  const thisTabGroupData = useMemo9(
     () => componentsState.tabs.tabGroups.find((item) => item.name === (tabsGroupName ?? defaultTabName)),
     [componentsState.tabs, tabsGroupName]
   );
-  useEffect10(() => {
+  useEffect11(() => {
     if (tabWithDot) {
       componentsState.tabs.setTabsWithDots?.((oldValue) => oldValue.includes(tab) ? oldValue : [...oldValue, tab]);
     } else {
@@ -7711,18 +8110,18 @@ TabsComponent.content = function Content({ tab, tabWithDot, tabsGroupName, isIni
       );
     }
   }, [tabWithDot]);
-  return (thisTabGroupData ? thisTabGroupData.selectedTab === tab : isInitialTab) ? /* @__PURE__ */ jsx21(Div_default, { width: "100%", children }) : void 0;
+  return (thisTabGroupData ? thisTabGroupData.selectedTab === tab : isInitialTab) ? /* @__PURE__ */ jsx22(Div_default, { width: "100%", children }) : void 0;
 };
-var Tabs2 = memo21(TabsComponent);
+var Tabs2 = memo22(TabsComponent);
 Tabs2.content = TabsComponent.content;
 var Tabs_default = Tabs2;
 
 // src/components/Foldable.tsx
-import { forwardRef as forwardRef17, memo as memo22, useCallback as useCallback12, useEffect as useEffect11, useImperativeHandle as useImperativeHandle4, useRef as useRef7, useState as useState10 } from "react";
-import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
+import { forwardRef as forwardRef18, memo as memo23, useCallback as useCallback13, useEffect as useEffect12, useImperativeHandle as useImperativeHandle5, useRef as useRef8, useState as useState11 } from "react";
+import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
 var animationDurationClose = 0.15;
 var animationDurationOpen = animationDurationClose * 2;
-var FoldableComponent = forwardRef17(function Foldable({
+var FoldableComponent = forwardRef18(function Foldable({
   isOpen: controlledIsOpen,
   defaultOpen = false,
   title,
@@ -7737,27 +8136,27 @@ var FoldableComponent = forwardRef17(function Foldable({
   ...props
 }, ref) {
   const theme2 = useTheme();
-  const bodyRef = useRef7(null);
+  const bodyRef = useRef8(null);
   const [internalIsOpen, setInternalIsOpen] = useBooleanState(defaultOpen);
-  const [bodyVirtualHeight, setBodyVirtualHeight] = useState10(500);
+  const [bodyVirtualHeight, setBodyVirtualHeight] = useState11(500);
   const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
-  const open = useCallback12(() => {
+  const open = useCallback13(() => {
     if (controlledIsOpen === void 0) setInternalIsOpen.setTrue();
     onOpenChange?.(true);
   }, [controlledIsOpen, onOpenChange]);
-  const close = useCallback12(() => {
+  const close = useCallback13(() => {
     if (controlledIsOpen === void 0) setInternalIsOpen.setFalse();
     onOpenChange?.(false);
   }, [controlledIsOpen, onOpenChange]);
-  const toggleOpen = useCallback12(() => {
+  const toggleOpen = useCallback13(() => {
     if (controlledIsOpen === void 0) setInternalIsOpen.toggle();
     onOpenChange?.(!isOpen);
   }, [controlledIsOpen, isOpen, onOpenChange]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!bodyRef.current) return;
     setBodyVirtualHeight(Math.min(500, bodyRef.current.scrollHeight * 2));
   }, [isOpen]);
-  useImperativeHandle4(
+  useImperativeHandle5(
     ref,
     () => {
       return {
@@ -7769,8 +8168,8 @@ var FoldableComponent = forwardRef17(function Foldable({
     },
     [open, close, toggleOpen, isOpen]
   );
-  return /* @__PURE__ */ jsxs18(Div_default.column, { width: "100%", ...props, children: [
-    renderHeader ? renderHeader(isOpen, toggleOpen) : /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(Div_default.column, { width: "100%", ...props, children: [
+    renderHeader ? renderHeader(isOpen, toggleOpen) : /* @__PURE__ */ jsxs19(
       Div_default.row,
       {
         width: "100%",
@@ -7782,15 +8181,15 @@ var FoldableComponent = forwardRef17(function Foldable({
         onClick: toggleOpen,
         userSelect: "none",
         children: [
-          /* @__PURE__ */ jsxs18(Div_default.row, { flex: 1, alignItems: "center", gap: theme2.styles.space, children: [
-            icon && /* @__PURE__ */ jsx22(Icon_default, { name: icon, size: 20, flexShrink: 0 }),
-            image && /* @__PURE__ */ jsx22(Image_default.profileImage, { name: image, size: 24, flexShrink: 0 }),
-            /* @__PURE__ */ jsxs18(Div_default.column, { gap: theme2.styles.gap / 2, children: [
-              title && /* @__PURE__ */ jsx22(Text_default, { as: "h3", fontWeight: 700, lineHeight: "20px", children: title }),
-              description && /* @__PURE__ */ jsx22(Text_default, { color: theme2.colors.textSecondary, children: description })
+          /* @__PURE__ */ jsxs19(Div_default.row, { flex: 1, alignItems: "center", gap: theme2.styles.space, children: [
+            icon && /* @__PURE__ */ jsx23(Icon_default, { name: icon, size: 20, flexShrink: 0 }),
+            image && /* @__PURE__ */ jsx23(Image_default.profileImage, { name: image, size: 24, flexShrink: 0 }),
+            /* @__PURE__ */ jsxs19(Div_default.column, { gap: theme2.styles.gap / 2, children: [
+              title && /* @__PURE__ */ jsx23(Text_default, { as: "h3", fontWeight: 700, lineHeight: "20px", children: title }),
+              description && /* @__PURE__ */ jsx23(Text_default, { color: theme2.colors.textSecondary, children: description })
             ] })
           ] }),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx23(
             Icon_default,
             {
               name: "chevronDown",
@@ -7801,8 +8200,8 @@ var FoldableComponent = forwardRef17(function Foldable({
         ]
       }
     ),
-    /* @__PURE__ */ jsx22(Div_default, { height: isOpen ? 1 : 0, opacity: isOpen ? 1 : 0, transition: theme2.styles.transition, children: /* @__PURE__ */ jsx22(Divider_default.horizontal, {}) }),
-    /* @__PURE__ */ jsx22(
+    /* @__PURE__ */ jsx23(Div_default, { height: isOpen ? 1 : 0, opacity: isOpen ? 1 : 0, transition: theme2.styles.transition, children: /* @__PURE__ */ jsx23(Divider_default.horizontal, {}) }),
+    /* @__PURE__ */ jsx23(
       Div_default,
       {
         maxHeight: isOpen ? bodyVirtualHeight : 0,
@@ -7811,14 +8210,14 @@ var FoldableComponent = forwardRef17(function Foldable({
         overflow: !isOpen ? "hidden" : void 0,
         pointerEvents: !isOpen ? "none" : void 0,
         ref: bodyRef,
-        children: /* @__PURE__ */ jsx22(Div_default, { paddingBlock: theme2.styles.gap, paddingInline: headerPaddingInline, children })
+        children: /* @__PURE__ */ jsx23(Div_default, { paddingBlock: theme2.styles.gap, paddingInline: headerPaddingInline, children })
       }
     )
   ] });
 });
-FoldableComponent.box = forwardRef17(function Box3({ ...props }, ref) {
+FoldableComponent.box = forwardRef18(function Box3({ ...props }, ref) {
   const theme2 = useTheme();
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     FoldableComponent,
     {
       backgroundColor: theme2.colors.backgroundContent,
@@ -7831,7 +8230,7 @@ FoldableComponent.box = forwardRef17(function Box3({ ...props }, ref) {
     }
   );
 });
-var Foldable2 = memo22(FoldableComponent);
+var Foldable2 = memo23(FoldableComponent);
 Foldable2.box = FoldableComponent.box;
 var Foldable_default = Foldable2;
 
@@ -7870,6 +8269,7 @@ export {
   Tabs_default as Tabs,
   Text_default as Text,
   ToggleInput_default as ToggleInput,
+  Tooltip_default as Tooltip,
   colorThemeControls,
   countries,
   darkenColor,