bianic-ui 1.15.0 → 1.16.0-alpha.1

package/dist/cjs/index.js

@@ -443,10 +443,10 @@ var minWidthConfig$1 = {
     tn: 'min-w-[64px]',
 };
 var iconOnlySizeConfig$1 = {
-    lg: 'py-[13px] h-[48px] h-[48px] flex items-center justify-center gap-[10px]',
+    lg: 'py-[13px] h-[48px] w-[48px] flex items-center justify-center gap-[10px]',
     md: 'py-[11px] h-[40px] w-[40px] flex items-center justify-center gap-[5px]',
-    sm: 'py-[8px] h-[30px] h-[30px] flex items-center justify-center gap-[5px] ',
-    tn: 'py-[4px] h-[22px] h-[22px] flex items-center justify-center gap-[3px]',
+    sm: 'py-[8px] h-[30px] w-[30px] flex items-center justify-center gap-[5px] ',
+    tn: 'py-[4px] h-[22px] w-[22px] flex items-center justify-center gap-[3px]',
 };
 var shadow = 'shadow-[0px_6px_18px_1px_rgba(188,199,237,0.5)] disabled:shadow-none active:shadow-none';
 var variantConfig$2 = {
@@ -1724,7 +1724,133 @@ var TreeItem = function (_a) {
         })))));
 };
 
-var MenuContainer = React.forwardRef(function MenuContainer(propsComp, ref) {
+var getContextualPopupStyle = function (anchorRef, popupRef, position) {
+    if (!anchorRef.current || !popupRef.current) {
+        return {};
+    }
+    var style = {};
+    var anchorRect = anchorRef.current.getBoundingClientRect();
+    var popupRect = popupRef.current.getBoundingClientRect();
+    var popupHeight = popupRect.height;
+    var popupWidth = popupRect.width;
+    switch (position) {
+        case 'top':
+            style.top = "".concat(anchorRect.top - popupHeight + window.scrollY - 10, "px");
+            style.left = "".concat(anchorRect.left - 0.5 * popupWidth + 0.5 * anchorRect.width + window.scrollX, "px");
+            break;
+        case 'bottom':
+            style.top = "".concat(anchorRect.top + anchorRect.height + window.scrollY + 10, "px");
+            style.left = "".concat(anchorRect.left - 0.5 * popupWidth + 0.5 * anchorRect.width + window.scrollX, "px");
+            break;
+        case 'left':
+            style.top = "".concat(anchorRect.top - 0.5 * popupHeight + window.scrollY + 0.5 * anchorRect.height, "px");
+            style.left = "".concat(anchorRect.left - popupWidth - 10 + window.scrollX, "px");
+            break;
+        case 'right':
+            style.top = "".concat(anchorRect.top - 0.5 * popupHeight + window.scrollY + 0.5 * anchorRect.height, "px");
+            style.left = "".concat(anchorRect.right + 10 + window.scrollX, "px");
+            break;
+        case 'top-left':
+            style.top = "".concat(anchorRect.top - popupHeight + window.scrollY - 10, "px");
+            style.left = "".concat(anchorRect.left + window.scrollX, "px");
+            break;
+        case 'top-right':
+            style.top = "".concat(anchorRect.top - popupHeight + window.scrollY - 10, "px");
+            style.left = "".concat(anchorRect.left + anchorRect.width - popupWidth + window.scrollX, "px");
+            break;
+        case 'bottom-left':
+            style.top = "".concat(anchorRect.top + anchorRect.height + window.scrollY + 10, "px");
+            style.left = "".concat(anchorRect.left + window.scrollX, "px");
+            break;
+        case 'bottom-right':
+            style.top = "".concat(anchorRect.top + anchorRect.height + window.scrollY + 10, "px");
+            style.left = "".concat(anchorRect.left + anchorRect.width - popupWidth + window.scrollX, "px");
+            break;
+    }
+    return style;
+};
+var getDropdownStyle = function (anchorRef, popupRef) {
+    if (!anchorRef.current || !popupRef.current) {
+        return {};
+    }
+    var anchorRect = anchorRef.current.getBoundingClientRect();
+    var popupHeight = popupRef.current.offsetHeight;
+    var spaceToBottom = window.innerHeight - anchorRect.bottom;
+    var spaceToTop = anchorRect.top;
+    var style = {
+        left: "".concat(anchorRect.left + window.scrollX, "px"),
+    };
+    // If space below is less than popup height,
+    // AND space above is more than space below
+    // then flip up
+    if (spaceToBottom < popupHeight && spaceToTop > spaceToBottom) {
+        style.top = "".concat(anchorRect.top - popupHeight + window.scrollY, "px");
+    }
+    else {
+        style.top = "".concat(anchorRect.bottom + window.scrollY, "px");
+    }
+    return style;
+};
+var usePopupPosition = function (anchorRef, popupRef, position) {
+    // In projects where bianic-ui is installed,
+    // there is a delay in rendering styles,
+    // which causes popups to lose their position and need to be re-rendered.
+    var _a = React.useState(0), repeateRender = _a[0], setRepeateRender = _a[1];
+    var _b = React.useState({}), positionStyle = _b[0], setPositionStyle = _b[1];
+    var calcPosition = function () {
+        var newStyle = position !== undefined
+            ? getContextualPopupStyle(anchorRef, popupRef, position)
+            : getDropdownStyle(anchorRef, popupRef);
+        setPositionStyle(newStyle);
+    };
+    React.useLayoutEffect(function () {
+        if (!(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current))
+            return;
+        calcPosition();
+        window.addEventListener('scroll', calcPosition);
+        window.addEventListener('resize', calcPosition);
+        setRepeateRender(0);
+        return function () {
+            window.removeEventListener('scroll', calcPosition);
+            window.removeEventListener('resize', calcPosition);
+        };
+    }, [anchorRef]);
+    React.useEffect(function () {
+        if (repeateRender < 5 && (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current)) {
+            calcPosition();
+            setRepeateRender(repeateRender + 1);
+        }
+    }, [repeateRender]);
+    return [positionStyle, calcPosition];
+};
+
+var MenuContainer = function (props) {
+    var _a = props.isTopFlat, isTopFlat = _a === void 0 ? false : _a, children = props.children, _b = props.open, open = _b === void 0 ? true : _b, _c = props.onClose, onClose = _c === void 0 ? function () { } : _c, _d = props.className, className = _d === void 0 ? '' : _d, _e = props.isWithOverlay, isWithOverlay = _e === void 0 ? true : _e, _f = props.zIndex, zIndex = _f === void 0 ? 100 : _f, _g = props.onClickItem, onClickItem = _g === void 0 ? function () { } : _g, anchorRef = props.anchorRef, restProps = __rest(props, ["isTopFlat", "children", "open", "onClose", "className", "isWithOverlay", "zIndex", "onClickItem", "anchorRef"]);
+    if (!open)
+        return null;
+    var radiusClass = "rounded-b-radius-sm ".concat(!isTopFlat && 'rounded-t-radius-sm');
+    var MenuContainerRef = React.useRef(null);
+    var positionStyle = usePopupPosition(anchorRef, MenuContainerRef)[0];
+    return (React.createElement(React.Fragment, null,
+        isWithOverlay && (React.createElement("div", { className: "bianic-menu-overlay fixed left-0 top-0 z-0 h-screen w-screen", onClick: function () { return onClose(); }, style: { zIndex: zIndex } })),
+        reactDom.createPortal(React.createElement("div", __assign({ ref: MenuContainerRef, className: "absolute w-fit bg-bia-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] ".concat(radiusClass, " ").concat(className), style: __assign({ zIndex: zIndex + 10, minWidth: anchorRef.current
+                    ? anchorRef.current.offsetWidth
+                    : undefined }, positionStyle) }, restProps), React.Children.map(children, function (child) {
+            return React.isValidElement(child)
+                ? // Kirimkan handleItemClick sebagai props onClick ke setiap MenuItem
+                    React.cloneElement(child, {
+                        onClose: function () { return onClose(); },
+                        zIndex: zIndex + 10,
+                        inheritedOnClick: function () { return onClickItem(); },
+                    })
+                : child;
+        })), document.body)));
+};
+MenuContainer.defaultProps = {
+    isTopFlat: false,
+};
+
+var MenuContainerNoAnchor = React.forwardRef(function MenuContainerNoAnchor(propsComp, ref) {
     var _a = propsComp.isTopFlat, isTopFlat = _a === void 0 ? false : _a, children = propsComp.children, _b = propsComp.open, open = _b === void 0 ? true : _b, _c = propsComp.onClose, onClose = _c === void 0 ? function () { } : _c, _d = propsComp.className, className = _d === void 0 ? '' : _d, _e = propsComp.isWithOverlay, isWithOverlay = _e === void 0 ? true : _e, _f = propsComp.zIndex, zIndex = _f === void 0 ? 100 : _f, _g = propsComp.onClickItem, onClickItem = _g === void 0 ? function () { } : _g, restProps = __rest(propsComp, ["isTopFlat", "children", "open", "onClose", "className", "isWithOverlay", "zIndex", "onClickItem"]);
     var radiusClass = "rounded-b-radius-sm ".concat(!isTopFlat && 'rounded-t-radius-sm');
     return (open && (React.createElement(React.Fragment, null,
@@ -1742,7 +1868,7 @@ var MenuContainer = React.forwardRef(function MenuContainer(propsComp, ref) {
                 : child;
         })))));
 });
-MenuContainer.defaultProps = {
+MenuContainerNoAnchor.defaultProps = {
     isTopFlat: false,
 };
 
@@ -1756,11 +1882,10 @@ function MenuItem(_a) {
     var itemClass = "".concat(leftPadding, " ").concat(rightPadding, " ").concat(className);
     var MenuContRef = React.useRef(null);
     React.useEffect(function () {
-        var _a;
         if (MenuContRef.current) {
             // Adjust dropdown position to prevent overflow on the right.
-            var MenuContRect = (_a = MenuContRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-            var RectRight = MenuContRect === null || MenuContRect === void 0 ? void 0 : MenuContRect.right;
+            var MenuContRect = MenuContRef.current.getBoundingClientRect();
+            var RectRight = MenuContRect.right;
             var innerWindow = window.innerWidth;
             if (RectRight > innerWindow)
                 setIsLeft(true);
@@ -1784,60 +1909,23 @@ function MenuItem(_a) {
             React.createElement("div", { className: "ml-auto flex items-center" },
                 children && (React.createElement(TbChevronRight, { className: "ml-[10px] text-bia-coolgrey" })),
                 children === undefined && caption && (React.createElement("span", { className: "ml-[30px] whitespace-nowrap text-[11px] text-bia-coolgrey" }, caption)))),
-        children && (React.createElement(MenuContainer, { open: isHovered, onClose: onClose, className: "absolute top-0 bg-primary-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] group-first/main:top-[6px] ".concat(translateClass), ref: MenuContRef, zIndex: currentZIndex + 10, onClickItem: function () { return inheritedOnClick(); } }, children))));
+        children && (React.createElement(MenuContainerNoAnchor, { open: isHovered, onClose: onClose, className: "absolute top-0 bg-primary-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] group-first/main:top-[6px] ".concat(translateClass), ref: MenuContRef, zIndex: currentZIndex + 10, onClickItem: function () { return inheritedOnClick(); } }, children))));
 }
 MenuItem.defaultProps = {
     className: '',
     onClick: function () { },
 };
 
-var classConfig$1 = {
-    top: {
-        tooltipContainer: 'bottom-[calc(100%+5px)]  left-1/2  -translate-x-1/2',
-        triangleContainer: 'left-0 -bottom-[4px] flex justify-center w-full h-auto',
-        triangleShape: 'border-l-[8px] border-l-transparent border-t-[5px] border-t-primary-black border-r-[8px] border-r-transparent',
-    },
-    right: {
-        tooltipContainer: 'left-[calc(100%+5px)] top-1/2 -translate-y-1/2',
-        triangleContainer: '-left-[4px] bottom-0 flex items-center w-auto h-full',
-        triangleShape: 'border-t-[8px] border-t-transparent border-r-[5px] border-r-primary-black border-b-[8px] border-b-transparent',
-    },
-    bottom: {
-        tooltipContainer: 'top-[calc(100%+5px)]  left-1/2  -translate-x-1/2',
-        triangleContainer: 'left-0 -top-[4px] flex justify-center w-full h-auto',
-        triangleShape: 'border-l-[8px] border-l-transparent border-b-[5px] border-b-primary-black border-r-[8px] border-r-transparent',
-    },
-    left: {
-        tooltipContainer: 'right-[calc(100%+5px)] top-1/2 -translate-y-1/2',
-        triangleContainer: '-right-[4px] bottom-0 flex items-center w-auto h-full',
-        triangleShape: 'border-t-[8px] border-t-transparent border-l-[5px] border-l-primary-black border-b-[8px] border-b-transparent',
-    },
-    'top-right': {
-        tooltipContainer: 'bottom-[calc(100%+5px)] right-0',
-        triangleContainer: 'left-0 -bottom-[4px] flex justify-center w-full h-auto',
-        triangleShape: 'border-l-[8px] border-l-transparent border-t-[5px] border-t-primary-black border-r-[8px] border-r-transparent',
-    },
-    'top-left': {
-        tooltipContainer: 'bottom-[calc(100%+5px)] left-0',
-        triangleContainer: 'left-0 -bottom-[4px] flex justify-center w-full h-auto',
-        triangleShape: 'border-l-[8px] border-l-transparent border-t-[5px] border-t-primary-black border-r-[8px] border-r-transparent',
-    },
-    'bottom-right': {
-        tooltipContainer: 'top-[calc(100%+5px)]  right-0',
-        triangleContainer: 'left-0 -top-[4px] flex justify-center w-full h-auto',
-        triangleShape: 'border-l-[8px] border-l-transparent border-b-[5px] border-b-primary-black border-r-[8px] border-r-transparent',
-    },
-    'bottom-left': {
-        tooltipContainer: 'top-[calc(100%+5px)]  left-0',
-        triangleContainer: 'left-0 -top-[4px] flex justify-center w-full h-auto',
-        triangleShape: 'border-l-[8px] border-l-transparent border-b-[5px] border-b-primary-black border-r-[8px] border-r-transparent',
-    },
-};
-
 function Tooltip(props) {
     var children = props.children, content = props.content, delay = props.delay, _a = props.direction, direction = _a === void 0 ? 'top' : _a, _b = props.maxWidth, maxWidth = _b === void 0 ? undefined : _b;
     var timeout;
     var _c = React.useState(false), active = _c[0], setActive = _c[1];
+    var anchorRef = React.useRef(null);
+    var tooltipContainerRef = React.useRef(null);
+    var _d = React.useState({
+        maxWidth: maxWidth + 'px',
+        whiteSpace: 'nowrap',
+    }), tooltipContainerStyle = _d[0], setTooltipContainerStyle = _d[1];
     var showTip = function () {
         timeout = setTimeout(function () {
             setActive(true);
@@ -1847,12 +1935,6 @@ function Tooltip(props) {
         clearInterval(timeout);
         setActive(false);
     };
-    var _d = classConfig$1[direction], tooltipContainer = _d.tooltipContainer; _d.triangleContainer; _d.triangleShape;
-    var tooltipContainerRef = React.useRef(null);
-    var _e = React.useState({
-        maxWidth: maxWidth + 'px',
-        whiteSpace: 'nowrap',
-    }), tooltipContainerStyle = _e[0], setTooltipContainerStyle = _e[1];
     var tooltipContainerElement = tooltipContainerRef === null || tooltipContainerRef === void 0 ? void 0 : tooltipContainerRef.current;
     var scrollWidth = tooltipContainerElement === null || tooltipContainerElement === void 0 ? void 0 : tooltipContainerElement.scrollWidth; // Mendapatkan lebar konten aktual
     var offsetWidth = tooltipContainerElement === null || tooltipContainerElement === void 0 ? void 0 : tooltipContainerElement.offsetWidth;
@@ -1885,10 +1967,15 @@ function Tooltip(props) {
             setTooltipContainerStyle(function (prev) { return (__assign(__assign({}, prev), { width: newWidth_1, whiteSpace: newWhiteSpace_1 })); });
         }
     }, [content, maxWidth, scrollWidth, offsetHeight]);
-    return (React.createElement("div", { className: "tooltip-wrapper relative inline-flex h-fit w-fit flex-col", onMouseEnter: showTip, onMouseLeave: hideTip },
+    return (React.createElement("div", { className: "tooltip-wrapper relative inline-flex h-fit w-fit flex-col", onMouseEnter: showTip, onMouseLeave: hideTip, ref: anchorRef },
         children,
-        active && (React.createElement("div", { className: "tooltip-container break-word absolute z-50 inline-block break-all rounded-[4px] bg-primary-black px-[7px] py-[4px] text-size-sm text-primary-white ".concat(tooltipContainer), style: tooltipContainerStyle, ref: tooltipContainerRef }, content))));
+        active && (React.createElement(TooltipItem, { anchorRef: anchorRef, direction: direction, content: content, tooltipContainerRef: tooltipContainerRef, tooltipContainerStyle: tooltipContainerStyle }))));
 }
+var TooltipItem = function (_a) {
+    var anchorRef = _a.anchorRef, direction = _a.direction, content = _a.content, tooltipContainerRef = _a.tooltipContainerRef, tooltipContainerStyle = _a.tooltipContainerStyle;
+    var positionStyle = usePopupPosition(anchorRef, tooltipContainerRef, direction)[0];
+    return reactDom.createPortal(React.createElement("div", { className: "tooltip-container break-word absolute z-50 inline-block break-all rounded-[4px] bg-primary-black px-[7px] py-[4px] text-size-sm text-primary-white", style: __assign(__assign({}, positionStyle), tooltipContainerStyle), ref: tooltipContainerRef }, content), document.body);
+};
 Tooltip.defaultProps = {
     delay: 400,
     direction: 'top',
@@ -2385,71 +2472,24 @@ var sizeConfig$6 = {
     },
 };
 
-var getDropdownStyle = function (anchorRef, dropdownRef) {
-    if (!anchorRef.current || !dropdownRef.current) {
-        return { minWidth: 'auto' };
-    }
-    var anchorRect = anchorRef.current.getBoundingClientRect();
-    var dropdownHeight = dropdownRef.current.offsetHeight;
-    var spaceToBottom = window.innerHeight - anchorRect.bottom;
-    var spaceToTop = anchorRect.top;
-    var style = {
-        left: "".concat(anchorRect.left, "px"),
-        minWidth: "".concat(anchorRect.width, "px"),
-    };
-    // If space below is less than dropdown height, 
-    // AND space above is more than space below
-    // then flip up
-    if (spaceToBottom < dropdownHeight && spaceToTop > spaceToBottom) {
-        style.bottom = "".concat(window.innerHeight - anchorRect.top, "px");
-    }
-    else {
-        style.top = "".concat(anchorRect.bottom, "px");
-    }
-    return style;
-};
 var DropdownContainer = function (propsComp) {
     var _a = propsComp.isTopFlat, isTopFlat = _a === void 0 ? false : _a, children = propsComp.children, _b = propsComp.open, open = _b === void 0 ? true : _b, _c = propsComp.onClose, onClose = _c === void 0 ? function () { } : _c, _d = propsComp.className, className = _d === void 0 ? '' : _d, _e = propsComp.isWithOverlay, isWithOverlay = _e === void 0 ? true : _e, _f = propsComp.size, size = _f === void 0 ? 'md' : _f, _g = propsComp.onClickItem, onClickItem = _g === void 0 ? function () { } : _g, _h = propsComp.zIndex, zIndex = _h === void 0 ? 100 : _h, anchorRef = propsComp.anchorRef, restProps = __rest(propsComp, ["isTopFlat", "children", "open", "onClose", "className", "isWithOverlay", "size", "onClickItem", "zIndex", "anchorRef"]);
     if (!open)
         return null;
-    var _j = React.useState({ minWidth: 'auto' }), positionStyle = _j[0], setPositionStyle = _j[1];
     var radiusClass = "rounded-b-radius-sm ".concat(!isTopFlat && 'rounded-t-radius-sm');
     var sizeClass = containerSizeConfig[size] || containerSizeConfig['md'];
     var containerClass = "".concat(sizeClass, " ").concat(radiusClass, " ").concat(className);
     var dropdownRef = React.useRef(null);
+    var positionStyle = usePopupPosition(anchorRef, dropdownRef)[0];
     var handleClickDrpdownItem = function (e, val) {
         onClickItem(e, val);
         onClose();
     };
-    // In projects where bianic-ui is installed, 
-    // there is a delay in rendering styles, 
-    // which causes dropdowns to lose their position and need to be re-rendered.
-    var _k = React.useState(0), repeateRender = _k[0], setRepeateRender = _k[1];
-    React.useLayoutEffect(function () {
-        if (!(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current))
-            return;
-        var newStyle = getDropdownStyle(anchorRef, dropdownRef);
-        setPositionStyle(newStyle);
-        var handleScrollOrResize = function () {
-            setPositionStyle(getDropdownStyle(anchorRef, dropdownRef));
-        };
-        window.addEventListener('scroll', handleScrollOrResize);
-        window.addEventListener('resize', handleScrollOrResize);
-        setRepeateRender(0);
-        return function () {
-            window.removeEventListener('scroll', handleScrollOrResize);
-            window.removeEventListener('resize', handleScrollOrResize);
-        };
-    }, [anchorRef]);
-    React.useEffect(function () {
-        if (repeateRender < 5 && (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current)) {
-            setPositionStyle(getDropdownStyle(anchorRef, dropdownRef));
-            setRepeateRender(repeateRender + 1);
-        }
-    }, [repeateRender]);
     return (React.createElement(React.Fragment, null,
         isWithOverlay && (React.createElement("div", { className: "bianic-dropdown-overlay fixed left-0 top-0 h-screen w-screen", style: { zIndex: zIndex }, onClick: function () { return onClose(); } })),
-        reactDom.createPortal(React.createElement("div", __assign({ ref: dropdownRef, className: "fixed max-w-fit bianic-dropdown-container bg-bia-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] ".concat(containerClass), style: __assign({ zIndex: zIndex + 10 }, positionStyle) }, restProps), React.Children.map(children, function (child) {
+        reactDom.createPortal(React.createElement("div", __assign({ ref: dropdownRef, className: "bianic-dropdown-container absolute max-w-fit bg-bia-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] ".concat(containerClass), style: __assign({ minWidth: anchorRef.current
+                    ? anchorRef.current.offsetWidth
+                    : undefined, zIndex: zIndex + 10 }, positionStyle) }, restProps), React.Children.map(children, function (child) {
             return React.isValidElement(child)
                 ? // Kirimkan handleItemClick sebagai props onClick ke setiap DropdownItem
                     React.cloneElement(child, {
@@ -2520,111 +2560,129 @@ var matchSearchTerm = function (content, term, variant) {
             return lowerContent.includes(lowerTerm);
     }
 };
-function LiveSearch(_a) {
-    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, id = _a.id, _c = _a.size, size = _c === void 0 ? 'md' : _c, label = _a.label, placeholder = _a.placeholder, _d = _a.required, required = _d === void 0 ? false : _d, options = _a.options, setValue = _a.setValue, value = _a.value, _e = _a.readOnly, readOnly = _e === void 0 ? false : _e, _f = _a.onChangeText, onChangeText = _f === void 0 ? function () { } : _f, _g = _a.onClickDropdown, onClickDropdown = _g === void 0 ? function () { } : _g, _h = _a.autoComplete, autoComplete = _h === void 0 ? 'off' : _h, _j = _a.children, children = _j === void 0 ? undefined : _j, _k = _a.dropContProps, dropContProps = _k === void 0 ? { className: undefined } : _k, _l = _a.searchVariant, searchVariant = _l === void 0 ? 'include' : _l;
-    var _m = React.useState(false), isOpen = _m[0], setIsOpen = _m[1];
-    var _o = React.useState(value.label || ''), searchTerm = _o[0], setSearchTerm = _o[1];
-    var _p = sizeConfig$6[size], iconClass = _p.iconClass, iconSize = _p.iconSize, inputClass = _p.inputClass;
-    var dropContClassName = dropContProps.className, dropContOnClickItem = dropContProps.onClickItem, restDropContProps = __rest(dropContProps, ["className", "onClickItem"]);
-    var isValueExist = value && value.label !== undefined && value.label !== '';
-    var inputRef = React.useRef(null);
-    var dropdownContRef = React.useRef(null);
-    // Will be used soon
-    // const handleOutsideClick = (e: MouseEvent) => {
-    //   if (inputRef.current && !inputRef.current.contains(e.target as Node)) {
-    //     setIsOpen(false)
-    //   }
-    // }
-    // useEffect(() => {
-    //   document.addEventListener('mousedown', handleOutsideClick)
-    //   return () => {
-    //     document.removeEventListener('mousedown', handleOutsideClick)
-    //   }
-    // })
-    // Synchronize internal searchTerm with external value prop
-    React.useEffect(function () {
-        // Only update searchTerm if the label from the value prop differs from the current searchTerm
-        // This prevents infinite loops if searchTerm is already the same as value.label
-        if (value.label !== searchTerm) {
-            setSearchTerm(value.label || '');
-        }
-    }, [value.label, searchTerm]);
-    var filteredOptions = options === null || options === void 0 ? void 0 : options.filter(function (item) {
-        return item.label.toLowerCase().includes(value.label.toLowerCase());
+var filterOptions = function (options, searchTerm) {
+    return options === null || options === void 0 ? void 0 : options.filter(function (item) {
+        return item.label.toLowerCase().includes(searchTerm.toLowerCase());
     });
-    var handleInputChange = function (e) {
-        var newSearchTerm = e.target.value;
-        setSearchTerm(newSearchTerm);
-        setIsOpen(true); // Ensure dropdown opens when typing
-    };
-    var handleDropdownItemClick = React.useCallback(function (clickedValue) {
-        setSearchTerm(clickedValue.label); // Set input text to the selected label
-        setValue(clickedValue); // Update the value in the parent
-        setIsOpen(false);
-    }, [setValue]);
-    // Recursive function to filter and clone DropdownItems, including nested items
-    var processDropdownChildren = function (nodes, currentSearchTerm, includeAllIfNoSearch) {
-        return React.Children.map(nodes, function (child) {
-            if (!React.isValidElement(child) || child.type !== DropdownItem) {
-                return child;
-            }
-            var itemProps = child.props;
-            // Assume content is a string for filtering; otherwise, filtering won't work well
-            var itemContent = typeof itemProps.content === 'string' ? itemProps.content : '';
-            var itemValue = itemProps.value;
-            var isDisabled = itemProps.disabled;
-            // 2. Filtering Logic (Uses Global Search Variant)
-            if (!includeAllIfNoSearch) {
-                // Use the matchSearchTerm utility with the selected searchVariant
-                if (currentSearchTerm && !matchSearchTerm(itemValue, currentSearchTerm, searchVariant)) {
-                    return null; // Item does not match the search criteria
-                }
+};
+
+var getItemLabel = function (value) {
+    var _a;
+    return typeof value === 'object' && value !== null && 'label' in value
+        ? (_a = value.label) !== null && _a !== void 0 ? _a : ''
+        : String(value !== null && value !== void 0 ? value : '');
+};
+var processDropdownChildren = function (nodes, currentSearchTerm, includeAllIfNoSearch, searchVariant, handleDropdownItemClick) {
+    if (searchVariant === void 0) { searchVariant = 'include'; }
+    return React.Children.map(nodes, function (child) {
+        if (!React.isValidElement(child) || child.type !== DropdownItem) {
+            return child;
+        }
+        var itemProps = child.props;
+        var itemContent = typeof itemProps.content === 'string' ? itemProps.content : '';
+        var itemValue = itemProps.value;
+        var isDisabled = itemProps.disabled;
+        // Filtering Logic
+        if (!includeAllIfNoSearch) {
+            var itemValueStr = typeof itemValue === 'object'
+                ? itemValue.label
+                : String(itemValue || '');
+            if (currentSearchTerm &&
+                !matchSearchTerm(itemValueStr, currentSearchTerm, searchVariant)) {
+                return null;
             }
-            // 3. Process Nested Children (Recursion)
-            var clonedChildren = itemProps.children
-                ? processDropdownChildren(itemProps.children, currentSearchTerm, includeAllIfNoSearch)
-                : null;
-            // 4. Clone and Inject Click Handler
-            return React.cloneElement(child, {
-                onClick: function (e) {
-                    if (!isDisabled) {
-                        handleDropdownItemClick({
-                            id: itemValue !== undefined ? itemValue : itemContent,
-                            label: itemValue !== undefined ? itemValue : itemContent
-                        });
-                    }
-                    if (dropContOnClickItem) {
-                        dropContOnClickItem(e, itemValue !== undefined ? itemValue : itemContent);
+        }
+        // Process Nested Children
+        var clonedChildren = itemProps.children
+            ? processDropdownChildren(itemProps.children, currentSearchTerm, includeAllIfNoSearch, searchVariant, handleDropdownItemClick)
+            : null;
+        // Clone and Inject Click Handler
+        return React.cloneElement(child, {
+            onClick: function (e) {
+                if (!isDisabled) {
+                    if (itemValue === undefined &&
+                        typeof itemProps.content === 'string') {
+                        return handleDropdownItemClick(e, itemContent);
                     }
-                    if (itemProps.onClickItem) {
-                        itemProps.onClickItem(e, itemValue !== undefined ? itemValue : itemContent);
+                    if (typeof itemValue === 'object' || itemValue !== undefined) {
+                        return handleDropdownItemClick(e, itemValue);
                     }
-                },
-                children: clonedChildren
-            });
+                }
+                if (itemProps.onClickItem) {
+                    itemProps.onClickItem(e, itemValue !== undefined ? itemValue : itemContent);
+                }
+            },
+            children: clonedChildren,
         });
-    };
-    // Determine which children to display
+    });
+};
+var processRenderedChildren = function (children, searchTerm, searchVariant, handleDropdownItemClick) {
     var renderedChildren = null;
     var hasFilteredResults = false;
     if (searchTerm) {
-        // If there's a searchTerm, filter children
-        renderedChildren = processDropdownChildren(children, searchTerm, false);
+        renderedChildren = processDropdownChildren(children, searchTerm, false, searchVariant, handleDropdownItemClick);
         hasFilteredResults =
             React.Children.toArray(renderedChildren).filter(Boolean).length > 0;
     }
     else {
-        // If searchTerm is empty, display all children without filtering (but with onClick injected)
-        renderedChildren = processDropdownChildren(children, '', true);
+        renderedChildren = processDropdownChildren(children, '', true, searchVariant, handleDropdownItemClick);
         hasFilteredResults =
-            React.Children.toArray(renderedChildren).filter(Boolean).length > 0; // Should always be true if there are initial children
+            React.Children.toArray(renderedChildren).filter(Boolean).length > 0;
     }
+    return { renderedChildren: renderedChildren, hasFilteredResults: hasFilteredResults };
+};
+
+var useLiveSearch = function (_a) {
+    var value = _a.value, setValue = _a.setValue, onChangeText = _a.onChangeText, dropContOnClickItem = _a.dropContOnClickItem;
+    var _b = React.useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    var _c = React.useState(String(value.label || '')), searchTerm = _c[0], setSearchTerm = _c[1];
+    React.useEffect(function () {
+        if (!isOpen && searchTerm !== '') {
+            setSearchTerm(getItemLabel(value));
+        }
+    }, [isOpen]);
+    var handleInputChange = function (e) {
+        var newSearchTerm = e.target.value;
+        setSearchTerm(newSearchTerm);
+        setIsOpen(true);
+        onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(e);
+    };
+    var handleDropdownItemClick = React.useCallback(function (event, clickedValue) {
+        dropContOnClickItem === null || dropContOnClickItem === void 0 ? void 0 : dropContOnClickItem(event, clickedValue);
+        var newLabel = getItemLabel(clickedValue);
+        setSearchTerm(newLabel);
+        setValue(clickedValue);
+        setIsOpen(false);
+    }, [setValue, dropContOnClickItem]);
+    return {
+        isOpen: isOpen,
+        setIsOpen: setIsOpen,
+        searchTerm: searchTerm,
+        handleInputChange: handleInputChange,
+        handleDropdownItemClick: handleDropdownItemClick,
+    };
+};
+
+function LiveSearch(_a) {
+    var _b = _a.autoComplete, autoComplete = _b === void 0 ? 'off' : _b, _c = _a.children, children = _c === void 0 ? undefined : _c, descText = _a.descText, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.dropContProps, dropContProps = _e === void 0 ? { className: undefined } : _e, id = _a.id, label = _a.label, _f = _a.onChangeText, onChangeText = _f === void 0 ? function () { } : _f, _g = _a.onClickDropdown, onClickDropdown = _g === void 0 ? function () { } : _g, options = _a.options, placeholder = _a.placeholder, _h = _a.readOnly, readOnly = _h === void 0 ? false : _h, _j = _a.required, required = _j === void 0 ? false : _j, _k = _a.searchVariant, searchVariant = _k === void 0 ? 'include' : _k, setValue = _a.setValue, _l = _a.size, size = _l === void 0 ? 'md' : _l, value = _a.value;
+    var inputRef = React.useRef(null);
+    var dropdownContRef = React.useRef(null);
+    var _m = useLiveSearch({
+        value: value,
+        setValue: setValue,
+        onChangeText: onChangeText,
+        dropContOnClickItem: dropContProps.onClickItem
+    }), isOpen = _m.isOpen, setIsOpen = _m.setIsOpen, searchTerm = _m.searchTerm, handleInputChange = _m.handleInputChange, handleDropdownItemClick = _m.handleDropdownItemClick;
+    var _o = sizeConfig$6[size], iconClass = _o.iconClass, iconSize = _o.iconSize, inputClass = _o.inputClass;
+    var dropContClassName = dropContProps.className; dropContProps.onClickItem; var restDropContProps = __rest(dropContProps, ["className", "onClickItem"]);
+    var isValueExist = value && value.label !== undefined && value.label !== '';
+    var filteredOptions = filterOptions(options || [], value.label);
+    var _p = processRenderedChildren(children, searchTerm, searchVariant, handleDropdownItemClick), renderedChildren = _p.renderedChildren, hasFilteredResults = _p.hasFilteredResults;
     return (React.createElement("div", { className: "bianic-livesearch field-group group/form flex w-full flex-col gap-y-2 " },
         label && (React.createElement(FormLabel, { htmlFor: id, required: required, readOnly: readOnly }, label)),
         React.createElement("div", { className: "group relative w-full" },
             React.createElement("input", { className: "bianic-livesearch-input field peer w-full rounded border  border-bia-grey-dark-10 bg-primary-white read-only:pointer-events-none read-only:border-bia-grey-disabled focus-visible:outline-none enabled:hover:rounded-b-none enabled:hover:border-b-bia-blue enabled:focus:rounded-b-none enabled:focus:border-b-bia-blue disabled:border-bia-grey-dark-10 disabled:bg-bia-grey-light-10 disabled:text-bia-coolgrey ".concat(inputClass), onClick: function () { return setIsOpen(!isOpen); }, value: searchTerm, required: required, disabled: disabled, id: id, placeholder: placeholder, ref: inputRef, onChange: function (e) {
                     onChangeText(e);
-                    setValue({ id: null, label: e.target.value });
                     handleInputChange(e);
                 }, type: "text", readOnly: readOnly, autoComplete: autoComplete }),
             React.createElement("div", { className: "absolute inset-y-0 flex items-center pl-3 ".concat(iconClass) },
@@ -3070,7 +3128,7 @@ var monthMap = [
     'December',
 ];
 var DateInputDisplay = function (_a) {
-    var value = _a.value, setValue = _a.setValue, _b = _a.placeholder, placeholder = _b === void 0 ? 'YYYY-MM-DD' : _b, label = _a.label, required = _a.required, id = _a.id, _c = _a.size, size = _c === void 0 ? 'sm' : _c, className = _a.className, _d = _a.disabled, disabled = _d === void 0 ? false : _d, buttonAction = _a.buttonAction, props = __rest(_a, ["value", "setValue", "placeholder", "label", "required", "id", "size", "className", "disabled", "buttonAction"]);
+    var value = _a.value, setValue = _a.setValue, _b = _a.placeholder, placeholder = _b === void 0 ? 'YYYY-MM-DD' : _b, label = _a.label, required = _a.required, id = _a.id, _c = _a.size, size = _c === void 0 ? 'sm' : _c, className = _a.className, _d = _a.disabled, disabled = _d === void 0 ? false : _d, buttonAction = _a.buttonAction, nullDisplay = _a.nullDisplay, props = __rest(_a, ["value", "setValue", "placeholder", "label", "required", "id", "size", "className", "disabled", "buttonAction", "nullDisplay"]);
     var _e = React.useState(false), isEditing = _e[0], setIsEditing = _e[1];
     var _f = React.useState(value), dateString = _f[0], setDateString = _f[1];
     var _g = styleConfig['text'], fieldStyle = _g.fieldStyle;
@@ -3099,11 +3157,13 @@ var DateInputDisplay = function (_a) {
         setIsEditing(false);
         setDateString(value);
     };
-    var input = isEditing ? (React.createElement(TextInput, { type: "text", value: dateString !== null && dateString !== void 0 ? dateString : '', onChange: handleTextChange, onBlur: handleBlur, placeholder: placeholder, size: size, autoFocus: true, actionElement: React.createElement("button", { className: "bianic-datepicker-toggle-button text-bia-coolgrey", disabled: disabled, onClick: function () {
+    var input = isEditing ? (React.createElement(TextInput, { type: "text", value: dateString !== null && dateString !== void 0 ? dateString : '', onChange: handleTextChange, onBlur: handleBlur, placeholder: placeholder, size: size, inputClassName: className, autoFocus: true, actionElement: React.createElement("button", { className: "bianic-datepicker-toggle-button text-bia-coolgrey", disabled: disabled, onClick: function () {
                 buttonAction && buttonAction();
             } },
             React.createElement(TbCalendar, { size: iconSize })) })) : (React.createElement(React.Fragment, null,
-        React.createElement("div", { role: "button", onClick: function () { return setIsEditing(true); }, className: "bianic-text-input bianic-fgc-target w-full min-w-[185px] rounded hover:rounded-b-none hover:border-b-bia-blue focus:rounded-b-none focus-visible:outline-none disabled:border-bia-grey-dark-10 disabled:bg-bia-grey-light-80 disabled:text-bia-grey-active ".concat(extendedInputClassName, " ").concat(value ? 'text-bia-black' : 'text-bia-coolgrey') }, value ? displayDateFormatter(new Date(value)) : placeholder),
+        React.createElement("div", { role: "button", onClick: function () { return setIsEditing(true); }, className: "bianic-text-input bianic-fgc-target w-full min-w-[185px] rounded hover:rounded-b-none hover:border-b-bia-blue focus:rounded-b-none focus-visible:outline-none disabled:border-bia-grey-dark-10 disabled:bg-bia-grey-light-80 disabled:text-bia-grey-active ".concat(extendedInputClassName, " ").concat(value || nullDisplay ? 'text-bia-black' : 'text-bia-coolgrey', " ").concat(className) }, value
+            ? displayDateFormatter(new Date(value))
+            : nullDisplay || placeholder),
         React.createElement("div", { className: "absolute inset-y-0 flex items-center pl-3 text-bia-coolgrey ".concat(iconPosition) },
             React.createElement("button", { className: "bianic-datepicker-toggle-button", disabled: disabled, onClick: function () { return buttonAction && buttonAction(); } },
                 React.createElement(TbCalendar, { size: iconSize })))));
@@ -3132,15 +3192,15 @@ var displayDateFormatter = function (date) {
 };
 
 function DatePicker(_a) {
-    var value = _a.value, onChange = _a.onChange, size = _a.size, disabled = _a.disabled; _a.placeholder; var label = _a.label, minDate = _a.minDate, maxDate = _a.maxDate, required = _a.required;
+    var value = _a.value, onChange = _a.onChange, size = _a.size, disabled = _a.disabled; _a.placeholder; var label = _a.label, minDate = _a.minDate, maxDate = _a.maxDate, required = _a.required, nullDisplay = _a.nullDisplay, inputclassName = _a.inputclassName, containerClassName = _a.containerClassName;
     // State and Ref
     var inputRef = React.useRef(null);
     var wrapperRef = React.useRef(null);
     var pickerRef = React.useRef(null);
     var _c = useDetectOutsideClick(wrapperRef, false, pickerRef), isPickerOpen = _c[0], setIsPickerOpen = _c[1];
-    return (React.createElement("div", { className: "bianic-datepicker-container relative", ref: wrapperRef },
+    return (React.createElement("div", { className: "bianic-datepicker-container relative ".concat(containerClassName), ref: wrapperRef },
         React.createElement("div", { className: "bianic-datepicker-field-container" },
-            React.createElement(DateInputDisplay, { value: value, setValue: onChange, placeholder: "YYYY-MM-DD", size: size, label: label, required: required, buttonAction: function () { return setIsPickerOpen(!isPickerOpen); }, ref: inputRef, disabled: disabled })),
+            React.createElement(DateInputDisplay, { inputClassName: inputclassName, value: value, setValue: onChange, placeholder: "YYYY-MM-DD", nullDisplay: nullDisplay, size: size, label: label, required: required, buttonAction: function () { return setIsPickerOpen(!isPickerOpen); }, ref: inputRef, disabled: disabled })),
         isPickerOpen && (React.createElement("div", { className: "bianic-datepicker-calendar-container absolute left-0 w-[250px] rounded-b-radius-sm bg-bia-white px-1.5 pb-[17px] pt-[15px] shadow-md" },
             React.createElement(PickerCalendar, { selectedDate: value, onDateChange: onChange, ref: pickerRef, minDate: minDate, maxDate: maxDate })))));
 }
@@ -3338,18 +3398,17 @@ var sizeConfig$3 = {
 };
 
 var InfoPanel = function (_a) {
-    var variant = _a.variant, color = _a.color, className = _a.className, textClassName = _a.textClassName;
+    var variant = _a.variant, color = _a.color, className = _a.className, children = _a.children;
     var sizeClass = sizeConfig$3[variant || 'container'];
     var colorClass = colorConfig$1[color || 'yellow'];
     var allClasses = "".concat(sizeClass, " ").concat(colorClass, " ").concat(className);
-    return (React.createElement("div", { className: "flex items-center justify-center rounded-radius-md ".concat(allClasses) },
-        React.createElement(Text, { variant: "medium-text", extended: textClassName }, "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.")));
+    return (React.createElement("div", { className: "flex items-center justify-center rounded-radius-md ".concat(allClasses) }, children));
 };
 InfoPanel.defaultProps = {
     variant: 'container',
     color: 'yellow',
     className: '',
-    textClassName: '',
+    children: null,
 };
 
 function Modal(_a) {
@@ -3375,12 +3434,12 @@ function Modal(_a) {
     if (open) {
         return (
         // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
-        React.createElement("div", { className: "bianic-modal-wrapper fixed inset-0 flex items-center justify-center bg-bia-black-transparent-75", style: { zIndex: !zIndex && isNaN(zIndex) ? 'auto' : zIndex }, id: "wrapper", onClick: handleClose },
+        reactDom.createPortal(React.createElement("div", { className: "bianic-modal-wrapper fixed inset-0 flex items-center justify-center bg-bia-black-transparent-75", style: { zIndex: !zIndex && isNaN(zIndex) ? 'auto' : zIndex }, id: "wrapper", onClick: handleClose },
             React.createElement("div", { className: "bianic-modal flex flex-col gap-[20px] rounded-[5px] bg-white p-[20px] ".concat(modalSize), onClick: onClick },
                 React.createElement("div", { className: "bianic-modal-header flex justify-between" },
                     React.createElement("div", { className: " text-wrap text-left font-humnst777 text-[18px] font-bold leading-[21.85px] text-primary-black" }, title),
                     React.createElement(Button, { variant: "subtle", radius: "full-rounded", iconLeft: React.createElement(TbX, { size: 14 }), size: "tn", onClick: function () { return onClose(); } })),
-                React.createElement("div", { className: "bianic-modal-content flex w-full flex-col items-start gap-[20px]" }, rest.children))));
+                React.createElement("div", { className: "bianic-modal-content flex w-full flex-col items-start gap-[20px]" }, rest.children))), document.body));
     }
     return null;
 }
@@ -3436,7 +3495,7 @@ function PaginationBar(_a) {
     return (React.createElement("div", { className: "flex ".concat(positionConfig[position], " gap-[5px]") },
         React.createElement(Button, { variant: "subtle-link", size: size, type: "button", onClick: function () { return handlePageChange(currentPage - 1); }, className: "cursor-pointer", iconLeft: React.createElement(TbChevronLeft, { size: iconSize }), disabled: currentPage === 1 }),
         showedPages.map(function (page) { return (React.createElement(Button, { key: page, variant: currentPage === page ? 'default' : 'subtle-link', size: size, type: "button", onClick: function () { return handlePageChange(page); }, className: "cursor-pointer ".concat(sizeConfig$2[size]), label: page.toString(), minWidth: buttonSizingStyle })); }),
-        React.createElement(Button, { variant: "subtle-link", size: "md", type: "button", onClick: function () { return handlePageChange(currentPage + 1); }, className: "cursor-pointer", iconLeft: React.createElement(TbChevronRight, { size: iconSize }), disabled: currentPage === totalPages })));
+        React.createElement(Button, { variant: "subtle-link", size: size, type: "button", onClick: function () { return handlePageChange(currentPage + 1); }, className: "cursor-pointer", iconLeft: React.createElement(TbChevronRight, { size: iconSize }), disabled: currentPage === totalPages })));
 }
 
 var activeConfig = {
@@ -3523,17 +3582,24 @@ var classConfig = {
 function Popover(_a) {
     var children = _a.children, content = _a.content; _a.delay; var _c = _a.direction, direction = _c === void 0 ? 'bottom' : _c, _d = _a.title, title = _d === void 0 ? '' : _d; _a.maxWidth;
     var wrapperRef = React.useRef(null);
+    React.useRef(null);
     var _e = useDetectOutsideClick(wrapperRef, false), isOpen = _e[0], setIsOpen = _e[1];
-    var _f = classConfig[direction], tooltipContainer = _f.tooltipContainer, triangleContainer = _f.triangleContainer, triangleShape = _f.triangleShape;
-    return (React.createElement("div", { className: "Bianic-popover-Wrapper relative block h-fit w-fit", role: "button", ref: wrapperRef, onClick: function () { return setIsOpen(true); } },
+    return (React.createElement("div", { className: "Bianic-popover-Wrapper relative block h-fit w-fit bg-bia-blue", role: "button", ref: wrapperRef, onClick: function () { return setIsOpen(true); } },
         children,
-        isOpen && (React.createElement("div", { className: "Bianic-popover-Tip text-bia-sm absolute z-50 w-[245px] space-y-[5px] rounded-[4px] bg-primary-black px-[20px] py-[17.5px] text-primary-white ".concat(tooltipContainer) },
-            React.createElement("div", { className: "flex flex-col" },
-                React.createElement("div", { className: "mb-[5px] font-humnst777 text-[16px] font-bold leading-[19.42px]" }, title),
-                React.createElement("div", { className: "break-words font-segoe text-[12px] font-normal" }, content)),
-            React.createElement("div", { className: "triangle absolute ".concat(triangleContainer) },
-                React.createElement("div", { className: "h-0 w-0 ".concat(triangleShape) }))))));
+        isOpen && (React.createElement(PopoverItem, { title: title, content: content, anchorRef: wrapperRef, direction: direction }))));
 }
+var PopoverItem = function (_a) {
+    var title = _a.title, content = _a.content, anchorRef = _a.anchorRef, direction = _a.direction;
+    var popoverRef = React.useRef(null);
+    var positionStyle = usePopupPosition(anchorRef, popoverRef, direction)[0];
+    var _b = classConfig[direction], triangleContainer = _b.triangleContainer, triangleShape = _b.triangleShape;
+    return reactDom.createPortal(React.createElement("div", { ref: popoverRef, style: positionStyle, className: "Bianic-popover-Tip text-bia-sm absolute z-50 w-[245px] space-y-[5px] rounded-[4px] bg-primary-black px-[20px] py-[17.5px] text-primary-white" },
+        React.createElement("div", { className: "flex flex-col" },
+            React.createElement("div", { className: "mb-[5px] font-humnst777 text-[16px] font-bold leading-[19.42px]" }, title),
+            React.createElement("div", { className: "break-words font-segoe text-[12px] font-normal" }, content)),
+        React.createElement("div", { className: "triangle absolute ".concat(triangleContainer) },
+            React.createElement("div", { className: "h-0 w-0 ".concat(triangleShape) }))), document.body);
+};
 Popover.defaultProps = {
     delay: 400,
     direction: 'top',
@@ -3754,7 +3820,7 @@ var configTab = {
 };
 
 function Tab(_a) {
-    var children = _a.children, active = _a.active, icon = _a.icon, disabled = _a.disabled, _b = _a.mode, mode = _b === void 0 ? 'horizontal' : _b, _c = _a.fit, fit = _c === void 0 ? 'fit-content' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, rest = __rest(_a, ["children", "active", "icon", "disabled", "mode", "fit", "size"]);
+    var children = _a.children, active = _a.active, icon = _a.icon, disabled = _a.disabled, _b = _a.mode, mode = _b === void 0 ? 'horizontal' : _b, _c = _a.fit, fit = _c === void 0 ? 'fit-content' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, className = _a.className, rest = __rest(_a, ["children", "active", "icon", "disabled", "mode", "fit", "size", "className"]);
     var disabledKeyTab = disabled || active ? ' pointer-events-none' : '';
     var cursor;
     if (disabled) {
@@ -3775,8 +3841,9 @@ function Tab(_a) {
     var activeKeyTab = active
         ? 'group-disabled:text-bia-coolgrey-disabled text-primary-black'
         : 'text-bia-coolgrey group-hover:text-bia-coolgrey-hover group-active:text-bia-coolgrey-active group-disabled:text-bia-coolgrey-disabled';
+    var buttonClassName = "".concat(horizontalButtonStyle, " ").concat(disabledKeyTab, " ").concat(fit, " ").concat(className ? className : '');
     return (React.createElement("div", { className: "".concat(mode === 'horizontal' ? 'h-full' : 'w-full', " ").concat(cursor) },
-        React.createElement("button", __assign({ type: "button", disabled: disabled }, rest, { className: "flex items-stretch justify-between ".concat(horizontalButtonStyle, " group relative outline-none ").concat(disabledKeyTab, " ").concat(fit) }),
+        React.createElement("button", __assign({ type: "button", className: "flex items-stretch justify-between  group relative outline-none ".concat(buttonClassName), disabled: disabled }, rest),
             React.createElement("div", { className: "flex items-center justify-center ".concat(buttonContentStyle) },
                 React.createElement("div", { className: "flex  items-center justify-center " },
                     React.createElement("div", { className: "flex items-center space-x-1 text-nowrap ".concat(activeKeyTab, " ").concat(configTab[size].text) },