bianic-ui 2.2.0 → 2.3.0

package/dist/esm/index.js

@@ -101,6 +101,10 @@ function TbCircleCheckFilled (props) {
   return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M9 6l6 6l-6 6"},"child":[]}]})(props);
 }function TbChevronUp (props) {
   return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M6 15l6 -6l6 6"},"child":[]}]})(props);
+}function TbChevronsLeft (props) {
+  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M11 7l-5 5l5 5"},"child":[]},{"tag":"path","attr":{"d":"M17 7l-5 5l5 5"},"child":[]}]})(props);
+}function TbChevronsRight (props) {
+  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M7 7l5 5l-5 5"},"child":[]},{"tag":"path","attr":{"d":"M13 7l5 5l-5 5"},"child":[]}]})(props);
 }function TbCrop11 (props) {
   return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"},"child":[]}]})(props);
 }function TbDots (props) {
@@ -457,7 +461,7 @@ var minWidthConfig$1 = {
 var iconOnlySizeConfig$1 = {
     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] w-[30px] flex items-center justify-center gap-[5px] ',
+    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 doubleIconSizeConfig = {
@@ -475,7 +479,7 @@ var variantConfig$2 = {
     warning: "text-primary-white bg-bia-orange active:bg-bia-orange-active hover:bg-bia-orange-hover disabled:bg-bia-orange-light-50 disabled:text-bia-orange-light-90 focus-visible:outline focus-visible:outline-offset-0 focus-visible:outline-bia-orange-light-50 focus-visible:outline-[3px] focus-visible:rounded-md shadow-bia-orange-disabled ".concat(shadow),
     danger: "text-primary-white bg-bia-red active:bg-bia-red-dark-10 hover:bg-bia-red-hover disabled:bg-bia-red-light-50 disabled:text-bia-red-light-90 focus-visible:outline focus-visible:outline-offset-0 focus-visible:outline-bia-red-light-50 focus-visible:outline-[3px] focus-visible:rounded-md shadow-bia-red-disabled ".concat(shadow),
     link: "text-bia-blue bg-transparent hover:text-bia-blue-hover disabled:text-bia-blue-light-50 focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:outline-[3px] focus-visible:rounded-md focus-visible:outline-bia-blue-light-50",
-    subtle: "text-primary-cool bg-bia-grey-disabled active:bg-bia-grey-dark-10 hover:bg-bia-grey-hover disabled:bg-bia-grey-light-50disabled:text-bia-grey-dark-10 focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:outline-[3px] focus-visible:rounded-md focus-visible:outline-bia-blue-light-50 ",
+    subtle: "text-primary-cool bg-bia-grey-light-50 active:bg-bia-grey-dark-10 hover:bg-bia-grey-hover disabled:bg-bia-grey-light-50 disabled:text-bia-grey-dark-10 focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:outline-[3px] focus-visible:rounded-md focus-visible:outline-bia-blue-light-50 ",
     'subtle-link': "text-bia-coolgrey bg-transparent active:text-bia-blue-dark-10 hover:text-bia-blue-light-10 disabled:text-bia-coolgrey-light-50 focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:outline-[3px] focus-visible:rounded-md focus-visible:outline-bia-blue-light-50 ",
     'default-outlined': "text-primary-black bg-primary-white border-bia-coolgrey border-solid active:bg-bia-coolgrey-light-90 active:border-bia-coolgrey-active hover:border-bia-coolgrey-hover border disabled:bg-primary-white disabled:border-[1px]disabled:border-bia-coolgrey-disabled disabled:text-bia-coolgrey-disabled focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:outline-[3px] focus-visible:rounded-md focus-visible:outline-bia-coolgrey-light-50 focus-visible:border-none",
     'primary-outlined': "bg-primary-white border border-bia-blue active:text-bia-blue-active active:bg-bia-blue-pastel active:border-bia-blue-active hover:text-bia-blue-hover hover:border-bia-blue-hover disabled:border-[1px]disabled:border-bia-blue-disabled disabled:text-bia-blue-disabled focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:outline-bia-blue-disabled focus-visible:outline-[3px] focus-visible:rounded-md text-bia-blue focus-visible:border-none",
@@ -1553,6 +1557,27 @@ var ContextualButton = forwardRef(function (_a, ref) {
             actionElement))));
 });
 
+var config$2 = {
+    'dark-background': 'bg-white hover:bg-bia-grey-light-90 outline-none focus:outline-2 focus:outline-bia-blue-light-50 focus-visible:outline-2 focus-visible:outline-bia-blue-light-50 active:bg-bia-grey-light-80',
+    'light-background': 'bg-bia-grey-light-90 hover:bg-bia-grey-light-80 outline-none focus:outline-2 focus:outline-bia-blue-light-50 focus-visible:outline-2 focus-visible:outline-bia-blue-light-50 active:bg-bia-grey-light-70',
+    'outline-light-background': 'bg-white border border-bia-grey-light-40 hover:bg-bia-grey-light-90 outline-none focus:outline-2 focus:outline-bia-blue-light-50 focus-visible:outline-2 focus-visible:outline-bia-blue-light-50 active:bg-bia-grey-light-80',
+};
+
+var Card = function (_a) {
+    var children = _a.children, disabled = _a.disabled, variant = _a.variant;
+    var base = config$2[variant || 'dark-background'];
+    var removeStateClasses = function (cls) {
+        return cls
+            .replace(/\b(?:hover|active|focus-visible|focus):[^\s]+/g, '')
+            .replace(/\s+/g, ' ')
+            .trim();
+    };
+    var cardClassName = disabled
+        ? "".concat(removeStateClasses(base), " cursor-not-allowed")
+        : base;
+    return (React.createElement("button", { disabled: disabled, "aria-disabled": disabled, className: "rounded-radius-md p-5 ".concat(cardClassName), tabIndex: disabled ? -1 : 0 }, children));
+};
+
 function Color() {
     var colors = [
         {
@@ -1694,7 +1719,7 @@ var FileTree = function (_a) {
     return (React.createElement("div", { className: "file-tree" },
         data.map(function (_a, index) {
             var label = _a.label, nodes = _a.nodes, props = __rest(_a, ["label", "nodes"]);
-            return (React.createElement(TreeItem, __assign({ label: label, nodes: nodes, key: index, color: color, chevronColor: chevronColor, handleRightClick: handleRightClick, onMouseDownTreeItem: onMouseDown }, props)));
+            return (React.createElement(TreeItem$1, __assign({ label: label, nodes: nodes, key: index, color: color, chevronColor: chevronColor, handleRightClick: handleRightClick, onMouseDownTreeItem: onMouseDown }, props)));
         }),
         isOpenContMenu && (React.createElement("div", { style: menuStyle, ref: popupRef, className: "bianic-filetree-contextmenu" }, React.isValidElement(contextMenu)
             ? // Kirimkan handleItemClick sebagai props onClick ke setiap MenuItem
@@ -1704,7 +1729,7 @@ var FileTree = function (_a) {
                 })
             : contextMenu))));
 };
-var TreeItem = function (_a) {
+var TreeItem$1 = function (_a) {
     var label = _a.label, nodes = _a.nodes, color = _a.color, chevronColor = _a.chevronColor, handleRightClick = _a.handleRightClick, onMouseDownTreeItem = _a.onMouseDownTreeItem, props = __rest(_a, ["label", "nodes", "color", "chevronColor", "handleRightClick", "onMouseDownTreeItem"]);
     var treeRef = useRef(null);
     var _b = useState(false), isExpand = _b[0], setIsExpand = _b[1];
@@ -1745,10 +1770,106 @@ var TreeItem = function (_a) {
                 React.createElement(Text, { variant: "small-text" }, label))),
         isExpand && nodes && nodes.length > 0 && (React.createElement("div", { className: "ml-4" }, nodes.map(function (_a, index) {
             var label = _a.label, nodes = _a.nodes, props = __rest(_a, ["label", "nodes"]);
-            return (React.createElement(TreeItem, __assign({ label: label, nodes: nodes, key: index, color: color, handleRightClick: handleRightClick, onMouseDownTreeItem: onMouseDownTreeItem }, props)));
+            return (React.createElement(TreeItem$1, __assign({ label: label, nodes: nodes, key: index, color: color, handleRightClick: handleRightClick, onMouseDownTreeItem: onMouseDownTreeItem }, props)));
         })))));
 };
 
+var TreeItem = function (_a) {
+    var data = _a.data, expandedData = _a.expandedData, setExpandedData = _a.setExpandedData, dataMap = _a.dataMap, activeUnitId = _a.activeUnitId, handleChevronClick = _a.handleChevronClick, handleRightClick = _a.handleRightClick, handleCLick = _a.handleCLick;
+    var isExpanded = !!expandedData.get(data.id);
+    var toogleExpand = function () {
+        var isCurrentlyExpanded = !!expandedData.get(data.id);
+        // create a new Map based on the existing one
+        var newExpandedState = new Map(expandedData);
+        if (isCurrentlyExpanded) {
+            // Logic to collapse this data and all its descendants
+            var collapseDescendants_1 = function (parent) {
+                newExpandedState.set(parent.id, false);
+                if (parent.children && parent.children.length > 0)
+                    parent.children.forEach(function (child) { return collapseDescendants_1(child); });
+            };
+            collapseDescendants_1(data);
+        }
+        else {
+            // Logic to expand this data and all its ancestors
+            var current = data;
+            while (current) {
+                newExpandedState.set(current.id, true);
+                current = dataMap[current.parent];
+            }
+        }
+        setExpandedData(newExpandedState);
+    };
+    var clickItemHandler = function () {
+        if (data.children && !isExpanded)
+            toogleExpand();
+        // forward selection event to optional handler; cast is used because this is a click callback without a MouseEvent
+        handleCLick === null || handleCLick === void 0 ? void 0 : handleCLick(data);
+    };
+    var chevronClickHandler = function () {
+        toogleExpand();
+        handleChevronClick === null || handleChevronClick === void 0 ? void 0 : handleChevronClick(data);
+    };
+    return (React.createElement("div", { className: "tree-item" },
+        React.createElement("div", { className: "tree-item-header flex items-center justify-start" },
+            data.children ? (React.createElement("button", { className: "tree-item-chevron", onClick: chevronClickHandler, type: "button" },
+                React.createElement(TbChevronRight, { className: "chevron ".concat(activeUnitId === data.id ? 'text-bia-green hover:text-bia-green-light-10' : 'text-bia-coolgrey-light-50 hover:text-bia-coolgrey-light-20', " ").concat(isExpanded ? 'rotate-90' : ''), size: 18 }))) : (React.createElement("div", { className: "chevron-placeholder aspect-square min-w-[18px]" })),
+            React.createElement("button", { className: "tree-item-label rounded-radius-sm px-0.5 py-[0.5px] text-start font-segoe text-size-sm font-normal text-bia-black ".concat(activeUnitId === data.id ? 'bg-bia-green-light-70' : 'hover:bg-bia-coolgrey-light-90'), onClick: clickItemHandler, type: "button", onContextMenu: function (e) {
+                    e.preventDefault();
+                    handleRightClick === null || handleRightClick === void 0 ? void 0 : handleRightClick(data);
+                } }, data.label)),
+        isExpanded && data.children && (React.createElement("div", { className: "tree-item-children flex flex-col gap-0.5 rounded-radius-sm pl-[18px]" }, data.children.map(function (childUnit) { return (React.createElement(TreeItem, { key: childUnit.id, data: childUnit, expandedData: expandedData, setExpandedData: setExpandedData, dataMap: dataMap, activeUnitId: activeUnitId, handleRightClick: handleRightClick, handleCLick: handleCLick })); })))));
+};
+
+var defaultAlias = {
+    id: null,
+    label: null,
+    parent: null,
+};
+var unitTransformator = function (unit, alias) {
+    var _a, _b, _c;
+    if (alias === void 0) { alias = defaultAlias; }
+    var newUnit = {
+        id: unit[(_a = alias.id) !== null && _a !== void 0 ? _a : 'id'],
+        label: unit[(_b = alias.label) !== null && _b !== void 0 ? _b : 'label'],
+        parent: unit[(_c = alias.parent) !== null && _c !== void 0 ? _c : 'parent'],
+        children: [],
+        data: __assign({}, unit),
+    }; // new unit object that will used in TreeItem Component
+    return newUnit;
+};
+var useFileTree = function (data, alias) {
+    if (alias === void 0) { alias = defaultAlias; }
+    var _a = useState(function () { return new Map(); }), expandedData = _a[0], setExpandedData = _a[1];
+    var usedAlias = __assign(__assign({}, defaultAlias), alias);
+    // A map to store all items by their ID for quick lookup
+    var map = new Map();
+    // An array to hold the root-level objects
+    var tree = [];
+    // First, create a map of all items
+    data.forEach(function (unit) {
+        map.set(unit['id'], unitTransformator(unit, usedAlias));
+    });
+    // build tree structure by linkiing children to parents
+    map.forEach(function (unit) {
+        var parent = map.get(unit.parent);
+        if (parent) {
+            // Find the correct insertion point for the new child
+            var insertionIndex = parent.children.findIndex(function (child) {
+                return unit.label.toLowerCase().localeCompare(child.label.toLowerCase()) < 0;
+            });
+            // Insert the new child at the correct position
+            if (insertionIndex === -1)
+                parent.children.push(unit);
+            else
+                parent.children.splice(insertionIndex, 0, unit);
+        }
+        else
+            tree.push(unit);
+    });
+    return { tree: tree, map: map, expandedData: expandedData, setExpandedData: setExpandedData };
+};
+
 var getContextualPopupStyle = function (anchorRef, popupRef, position) {
     if (!anchorRef.current || !popupRef.current) {
         return {};
@@ -1987,15 +2108,15 @@ MenuItem.defaultProps = {
 };
 
 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 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, _c = props.zIndex, zIndex = _c === void 0 ? 150 : _c, className = props.className, style = props.style;
     var timeout;
-    var _c = useState(false), active = _c[0], setActive = _c[1];
+    var _d = useState(false), active = _d[0], setActive = _d[1];
     var anchorRef = useRef(null);
     var tooltipContainerRef = useRef(null);
-    var _d = useState({
+    var _e = useState({
         maxWidth: maxWidth + 'px',
         whiteSpace: 'nowrap',
-    }), tooltipContainerStyle = _d[0], setTooltipContainerStyle = _d[1];
+    }), tooltipContainerStyle = _e[0], setTooltipContainerStyle = _e[1];
     var showTip = function () {
         timeout = setTimeout(function () {
             setActive(true);
@@ -2039,12 +2160,12 @@ function Tooltip(props) {
     }, [content, maxWidth, scrollWidth, offsetHeight]);
     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(TooltipItem, { anchorRef: anchorRef, direction: direction, content: content, tooltipContainerRef: tooltipContainerRef, tooltipContainerStyle: tooltipContainerStyle }))));
+        active && (React.createElement(TooltipItem, { anchorRef: anchorRef, direction: direction, content: content, tooltipContainerRef: tooltipContainerRef, tooltipContainerStyle: tooltipContainerStyle, zIndex: zIndex, className: className, style: style }))));
 }
 var TooltipItem = function (_a) {
-    var anchorRef = _a.anchorRef, direction = _a.direction, content = _a.content, tooltipContainerRef = _a.tooltipContainerRef, tooltipContainerStyle = _a.tooltipContainerStyle;
+    var anchorRef = _a.anchorRef, className = _a.className, content = _a.content, direction = _a.direction, style = _a.style, tooltipContainerRef = _a.tooltipContainerRef, tooltipContainerStyle = _a.tooltipContainerStyle, zIndex = _a.zIndex;
     var positionStyle = usePopupPosition(anchorRef, tooltipContainerRef, direction)[0];
-    return 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);
+    return createPortal(React.createElement("div", { className: "tooltip-container break-word absolute inline-block break-all rounded-[4px] bg-primary-black px-[7px] py-[4px] text-size-sm text-primary-white ".concat(className), style: __assign(__assign(__assign({ zIndex: zIndex }, positionStyle), tooltipContainerStyle), style), ref: tooltipContainerRef }, content), document.body);
 };
 Tooltip.defaultProps = {
     delay: 400,
@@ -2170,12 +2291,13 @@ var TextInput = forwardRef(function (_a, ref) {
     if (variant === 'date')
         iconElement = React.createElement(TbCalendar, { className: "text-bia-coolgrey", size: 18 });
     var extendedInputClassName = "".concat(fieldStyle, " ").concat(fieldSize, " ").concat(bottomBorderColor, " ").concat(inputClassName, " ").concat(borderStyle);
+    var disabledClass = disabled ? 'cursor-not-allowed' : '';
     return (React.createElement("div", { className: "bianic-text-input-container bianic-fgc-container group/form flex w-full flex-col gap-y-2 text-bia-black" },
         label && (React.createElement(FormLabel, { htmlFor: id, required: required, readOnly: readOnly }, label)),
-        React.createElement("div", { className: "relative w-full" },
-            React.createElement("input", __assign({ className: "bianic-text-input bianic-fgc-target w-full rounded read-only:pointer-events-none read-only:border-bia-grey-light-50 hover:rounded-b-none 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), disabled: disabled, id: id, placeholder: placeholder || label, readOnly: readOnly, required: required, type: typeVariant, value: value, onChange: function (e) { return onChange(e); }, maxLength: maxLength, autoComplete: autoComplete, ref: ref }, props)),
+        React.createElement("div", { className: "relative w-full ".concat(disabledClass) },
+            React.createElement("input", __assign({ className: "bianic-text-input bianic-fgc-target w-full rounded read-only:pointer-events-none read-only:border-bia-grey-light-50 hover:rounded-b-none focus:rounded-b-none focus-visible:outline-none disabled:cursor-not-allowed disabled:border-bia-grey-dark-10 disabled:bg-bia-grey-light-80 disabled:text-bia-grey-active ".concat(extendedInputClassName), disabled: disabled, id: id, placeholder: placeholder || label, readOnly: readOnly, required: required, type: typeVariant, value: value, onChange: function (e) { return onChange(e); }, maxLength: maxLength, autoComplete: autoComplete, ref: ref }, props)),
             React.createElement("div", { className: "absolute inset-y-0 flex items-center pl-3 ".concat(actionElement ? '' : iconStyle, " ").concat(iconPosition, " ").concat(iconSizing) }, iconElement)),
-        (descText || maxLength) && (React.createElement("div", { className: "bianic-text-input-desc flex justify-between gap-1 text-xs whitespace-nowrap ".concat(descColor) },
+        (descText || maxLength) && (React.createElement("div", { className: "bianic-text-input-desc flex justify-between gap-1 whitespace-nowrap text-xs ".concat(descColor) },
             React.createElement("span", null, descText),
             maxLength && (React.createElement("span", null,
                 remainWords,
@@ -2217,10 +2339,10 @@ function Radio(_a) {
     var validatedSize = validUnion(size, sizeUnion$4);
     var _f = sizeConfig$b[validatedSize], checkSize = _f.checkSize, labelSize = _f.labelSize;
     return (React.createElement("div", { className: "flex items-center" },
-        React.createElement("div", { className: "bg-white rounded-full flex flex-shrink-0 justify-center items-center relative ".concat(checkSize) },
-            React.createElement("input", { id: id, "aria-labelledby": "label1", type: "radio", className: "peer checkbox box-content appearance-none focus:opacity-100 focus:ring-1 focus:ring-offset-2 checked:disabled:border-bia-blue-disabled focus:ring-bia-blue focus:outline-none rounded-full border-bia-coolgrey-light-50 checked:border-bia-blue hover:border-bia-blue-hover disabled:border-bia-grey-dark-10 border-2 absolute cursor-pointer w-full h-full", onClick: function (e) { return onClick(e); }, checked: checked, disabled: disabled }),
-            React.createElement("div", { className: "check-icon flex text-bia-grey group justify-center border-2 border-primary-white  peer-disabled:bg-bia-grey-light-80 peer-disabled:border-transparent peer-disabled:peer-checked:border-primary-white peer-checked:peer-disabled:bg-bia-blue-disabled peer-checked:hover:border-bia-blue-hover peer-checked:bg-bia-blue peer-checked:peer-hover:bg-bia-blue-hover outline-2 peer-checked:hover:outline-bia-blue-hover outline-bia-blue rounded-full w-full h-full z-1" })),
-        React.createElement("label", { htmlFor: id, className: "ml-2 leading-4 font-[350] ".concat(labelSize), style: { color: disabled ? '#8C8CA6' : '#2f2f2f' } }, childrenElement(label))));
+        React.createElement("div", { className: "relative flex flex-shrink-0 items-center justify-center rounded-full bg-white ".concat(checkSize) },
+            React.createElement("input", { id: id, "aria-labelledby": "label1", type: "radio", className: "checkbox peer absolute box-content h-full w-full cursor-pointer appearance-none rounded-full border-2 border-bia-coolgrey-light-50 checked:border-bia-blue hover:border-bia-blue-hover focus:opacity-100 focus:outline-none focus:ring-1 focus:ring-bia-blue focus:ring-offset-2 disabled:cursor-not-allowed disabled:border-bia-grey-dark-10 checked:disabled:border-bia-blue-disabled", onClick: function (e) { return onClick(e); }, checked: checked, disabled: disabled }),
+            React.createElement("div", { className: "check-icon z-1 group flex h-full w-full justify-center  rounded-full border-2 border-primary-white text-bia-grey outline-2 outline-bia-blue peer-checked:bg-bia-blue peer-checked:hover:border-bia-blue-hover peer-checked:hover:outline-bia-blue-hover peer-checked:peer-hover:bg-bia-blue-hover peer-disabled:border-transparent peer-disabled:bg-bia-grey-light-80 peer-disabled:peer-checked:border-primary-white peer-checked:peer-disabled:bg-bia-blue-disabled" })),
+        React.createElement("label", { htmlFor: id, className: "ml-2 font-[350] leading-4 ".concat(labelSize), style: { color: disabled ? '#8C8CA6' : '#2f2f2f' } }, childrenElement(label))));
 }
 Radio.defaultProps = {
     label: '',
@@ -2256,11 +2378,12 @@ function TextArea(_a) {
     var inputRow = rows !== null && rows !== void 0 ? rows : 4;
     var inputClass = sizeConfig$a[size].inputClass;
     var remainWords = maxLength ? maxLength - (value ? value.length : 0) : 0;
+    var disabledClass = disabled ? 'cursor-not-allowed' : '';
     return (React.createElement("div", { className: "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: "relative h-fit w-full min-w-[250px]" },
+        React.createElement("div", { className: "relative h-fit w-full min-w-[250px] ".concat(disabledClass) },
             React.createElement(ResizeIcon, { className: "absolute bottom-[11px] right-[5px]" }),
-            React.createElement("textarea", __assign({ className: "field bianic-text-area w-full  rounded border border-bia-grey-dark-10 bg-primary-white p-2.5 read-only:pointer-events-none 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:bg-bia-grey-light-80 disabled:text-bia-grey-active ".concat(inputClass), rows: inputRow, id: id, placeholder: placeholder, disabled: disabled, maxLength: maxLength, value: value, autoComplete: autoComplete, readOnly: readOnly }, props))),
+            React.createElement("textarea", __assign({ className: "field bianic-text-area w-full  rounded border border-bia-grey-dark-10 bg-primary-white p-2.5 read-only:pointer-events-none 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:cursor-not-allowed disabled:bg-bia-grey-light-80 disabled:text-bia-grey-active ".concat(inputClass), rows: inputRow, id: id, placeholder: placeholder, disabled: disabled, maxLength: maxLength, value: value, autoComplete: autoComplete, readOnly: readOnly }, props))),
         React.createElement("div", { className: "desc flex justify-between gap-1 text-xs text-primary-cool" },
             descText && React.createElement("span", null, descText),
             maxLength && (React.createElement("span", null,
@@ -2299,7 +2422,7 @@ function Checkbox(_a) {
     var _e = sizeConfig$9[validUnion(size, sizeUnion$3)], checkClass = _e.checkClass, labelClass = _e.labelClass;
     return (React.createElement("div", { className: "flex items-center" },
         React.createElement("div", { className: "relative flex flex-shrink-0 items-center justify-center rounded-full bg-white ".concat(checkClass) },
-            React.createElement("input", __assign({ id: id, type: "checkbox", className: "checkbox peer absolute box-content h-full w-full cursor-pointer appearance-none rounded-full border-2 border-bia-coolgrey-light-50 checked:border-bia-blue hover:border-bia-blue-hover focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-bia-blue focus-visible:ring-offset-2 disabled:border-bia-coolgrey-light-50 disabled:checked:border-bia-blue-light-50", onChange: function (e) { return onChange(e); }, disabled: disabled }, props)),
+            React.createElement("input", __assign({ id: id, type: "checkbox", className: "checkbox peer absolute box-content h-full w-full cursor-pointer appearance-none rounded-full border-2 border-bia-coolgrey-light-50 checked:border-bia-blue hover:border-bia-blue-hover focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-bia-blue focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:border-bia-coolgrey-light-50 disabled:checked:border-bia-blue-light-50", onChange: function (e) { return onChange(e); }, disabled: disabled }, props)),
             React.createElement("div", { className: "check-icon z-1 group flex h-full w-full justify-center rounded-full text-bia-grey outline-2 outline-bia-blue peer-checked:border-2 peer-checked:border-primary-white peer-checked:bg-bia-blue peer-checked:hover:border-bia-blue-hover peer-checked:hover:outline-bia-blue-hover peer-checked:peer-hover:bg-bia-blue-hover peer-disabled:bg-bia-grey-light-80 peer-disabled:peer-checked:bg-bia-blue-light-50 peer-disabled:peer-checked:outline-bia-blue-light-50" },
                 React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: " fill-bia-grey-dark-10 peer-checked:group-[]:fill-primary-white peer-hover:group-[]:fill-bia-blue-hover peer-checked:peer-hover:group-[]:fill-primary-white peer-disabled:group-[]:fill-bia-grey-dark-10 peer-disabled:peer-checked:group-[]:fill-primary-white", viewBox: "-5 -7 24 24", width: "24" },
                     React.createElement("path", { d: "M5.486 9.73a.997.997 0 0 1-.707-.292L.537 5.195A1 1 0 1 1 1.95 3.78l3.535 3.535L11.85.952a1 1 0 0 1 1.415 1.414L6.193 9.438a.997.997 0 0 1-.707.292z" })))),
@@ -2412,12 +2535,13 @@ function SelectInput(_a) {
         descColor = 'text-bia-green';
     if (!disabled && isExistValidation && !isValid)
         descColor = 'text-bia-red';
+    var disabledClass = disabled ? 'cursor-not-allowed' : '';
     return (React.createElement("div", { className: "bianic-fgc-container bianic-text-input-container field-group flex w-full flex-col" },
         React.createElement("label", { htmlFor: id, className: "label pb-2 text-xs font-semibold" },
             childrenElement(label),
             required && React.createElement("span", { className: "p-1 text-bia-red" }, "*")),
-        React.createElement("div", { className: "group relative w-full" },
-            React.createElement("input", __assign({ className: "bianic-fgc-target field peer w-full  cursor-pointer rounded border border-bia-grey-dark-10 bg-primary-white pe-8 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:bg-bia-grey-light-80 disabled:text-bia-coolgrey ".concat(searchSize), onClick: function () { return setIsOpen(!isOpen); }, value: selectedLabel, readOnly: true, id: id, disabled: disabled, ref: inputRef }, props)),
+        React.createElement("div", { className: "group relative w-full ".concat(disabledClass) },
+            React.createElement("input", __assign({ className: "bianic-fgc-target field peer w-full  cursor-pointer rounded border border-bia-grey-dark-10 bg-primary-white pe-8 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:cursor-not-allowed disabled:bg-bia-grey-light-80 disabled:text-bia-coolgrey ".concat(searchSize), onClick: function () { return setIsOpen(!isOpen); }, value: selectedLabel, readOnly: true, id: id, disabled: disabled, ref: inputRef }, props)),
             React.createElement("div", { className: "pointer-events-none absolute inset-y-0 flex items-center pl-3 text-bia-coolgrey peer-disabled:text-bia-coolgrey-light-50 ".concat(iconSize) }, isOpen ? React.createElement(TbChevronUp, null) : React.createElement(TbChevronDown, null)),
             children === undefined && isOpen && (React.createElement("div", { className: "absolute z-10 w-full rounded-b-md border border-bia-grey-dark-10 bg-primary-white shadow-lg", ref: optionsRef, onClick: onClickDropdown }, options.map(function (option) {
                 var isSelected = JSON.stringify(option) === JSON.stringify(selected);
@@ -2733,7 +2857,7 @@ var useLiveSearch = function (_a) {
 };
 
 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, dropContProps = _a.dropContProps, id = _a.id; _a.label; var _e = _a.onChangeText, onChangeText = _e === void 0 ? function () { } : _e, _f = _a.onClickDropdown, onClickDropdown = _f === void 0 ? function () { } : _f, options = _a.options, placeholder = _a.placeholder, _g = _a.readOnly, readOnly = _g === void 0 ? false : _g, _h = _a.required, required = _h === void 0 ? false : _h, _j = _a.searchVariant, searchVariant = _j === void 0 ? 'include' : _j, setValue = _a.setValue, _k = _a.size, size = _k === void 0 ? 'md' : _k, _l = _a.isValid, isValid = _l === void 0 ? null : _l, value = _a.value;
+    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, dropContProps = _a.dropContProps, id = _a.id, label = _a.label, _e = _a.onChangeText, onChangeText = _e === void 0 ? function () { } : _e, _f = _a.onClickDropdown, onClickDropdown = _f === void 0 ? function () { } : _f, options = _a.options, placeholder = _a.placeholder, _g = _a.readOnly, readOnly = _g === void 0 ? false : _g, _h = _a.required, required = _h === void 0 ? false : _h, _j = _a.searchVariant, searchVariant = _j === void 0 ? 'include' : _j, setValue = _a.setValue, _k = _a.size, size = _k === void 0 ? 'md' : _k, _l = _a.isValid, isValid = _l === void 0 ? null : _l, value = _a.value;
     var inputRef = useRef(null);
     var _m = useLiveSearch({
         value: value,
@@ -2752,8 +2876,10 @@ function LiveSearch(_a) {
         descColor = 'text-bia-red';
     var filteredOptions = filterOptions(options || [], value.label);
     var _q = processRenderedChildren(children, searchTerm, searchVariant, handleDropdownItemClick), renderedChildren = _q.renderedChildren, hasFilteredResults = _q.hasFilteredResults;
-    return (React.createElement("div", { className: "bianic-livesearch bianic-fgc-container bianic-text-input-container field-group group/form flex w-full flex-col gap-y-2 " },
-        React.createElement("div", { className: "group relative w-full" },
+    var disabledClass = disabled ? 'cursor-not-allowed' : '';
+    return (React.createElement("div", { className: "bianic-livesearch bianic-fgc-container bianic-text-input-container 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 ".concat(disabledClass) },
             React.createElement("input", { className: "bianic-livesearch-input bianic-fgc-target field peer w-full rounded border  border-bia-grey-dark-10 bg-primary-white text-bia-black read-only:pointer-events-none read-only:border-bia-grey-light-50 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-80 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);
                     handleInputChange(e);
@@ -2808,11 +2934,13 @@ var sizeConfig$5 = {
 function Toggle(_a) {
     var _b = _a.label, label = _b === void 0 ? '' : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d, _e = _a.checked, checked = _e === void 0 ? false : _e, _f = _a.id, id = _f === void 0 ? '' : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g;
     var _h = sizeConfig$5[size], containerSize = _h.containerSize, checkSize = _h.checkSize, labelClass = _h.labelClass;
+    var checkedClass = checked ? 'justify-end' : 'justify-start';
+    var containerClass = "".concat(checkedClass, " ").concat(containerSize);
     return (React.createElement("div", { className: "flex items-center" },
-        React.createElement("div", { className: "".concat(containerSize, " rounded-full py-[2px] flex flex-shrink-0 ").concat(checked ? 'justify-end' : 'justify-start', " items-center relative cursor-pointer"), onClick: onClick, onKeyDown: function () { }, role: "checkbox", tabIndex: 0, "aria-checked": checked },
-            React.createElement("input", { id: id, checked: checked, disabled: disabled, className: "".concat(checkSize, " peer checkbox appearance-none opacity-100 focus:ring-1 focus:ring-offset-2 focus:ring-bia-blue focus:outline-none rounded-full border-bia-grey checked:border-bia-blue bg-primary-white checked:bg-bia-blue checked:hover:bg-bia-blue-hover cursor-pointer hover:border-bia-blue-hover peer-hover:border-bia-blue-hover disabled:bg-bia-grey-light-80 disabled:checked:bg-bia-blue-light-50 disabled:border-none border-2 absolute w-full h-full"), type: "checkbox" }),
-            React.createElement("div", { className: "peer check-icon flex m-[2px] text-bia-grey group justify-center border-2 peer-checked:border-bia-blue border-primary-white peer-checked:hover:bg-primary-white peer-checked:bg-primary-white bg-bia-grey peer-checked:peer-hover:bg-primary-white peer-hover:bg-bia-blue-hover peer-disabled:bg-bia-grey-dark-10 peer-disabled:border-none peer-disabled:outline-none peer-disabled:peer-checked:bg-bia-blue-light-90 outline-2 rounded-full w-5/12 h-full z-10" })),
-        React.createElement("label", { htmlFor: id, className: "ml-2 leading-4 font-normal text-grey-800 ".concat(labelClass), style: { color: disabled ? '#8C8CA6' : '' } }, label)));
+        React.createElement("div", { className: "relative flex flex-shrink-0 cursor-pointer items-center rounded-full py-[2px] ".concat(containerClass), onClick: onClick, onKeyDown: function () { }, role: "checkbox", tabIndex: 0, "aria-checked": checked },
+            React.createElement("input", { id: id, checked: checked, disabled: disabled, className: "".concat(checkSize, " checkbox peer absolute h-full w-full cursor-pointer appearance-none rounded-full border-2 border-bia-grey bg-primary-white opacity-100 checked:border-bia-blue checked:bg-bia-blue hover:border-bia-blue-hover checked:hover:bg-bia-blue-hover focus:outline-none focus:ring-1 focus:ring-bia-blue focus:ring-offset-2 disabled:cursor-not-allowed disabled:border-none disabled:bg-bia-grey-light-80 disabled:checked:bg-bia-blue-light-50 peer-hover:border-bia-blue-hover"), type: "checkbox" }),
+            React.createElement("div", { className: "check-icon group peer z-10 m-[2px] flex h-full w-5/12 justify-center rounded-full border-2 border-primary-white bg-bia-grey text-bia-grey outline-2 peer-checked:border-bia-blue peer-checked:bg-primary-white peer-checked:hover:bg-primary-white peer-hover:bg-bia-blue-hover peer-checked:peer-hover:bg-primary-white peer-disabled:cursor-not-allowed peer-disabled:border-none peer-disabled:bg-bia-grey-dark-10 peer-disabled:outline-none peer-disabled:peer-checked:bg-bia-blue-light-90" })),
+        React.createElement("label", { htmlFor: id, className: "text-grey-800 ml-2 font-normal leading-4 ".concat(labelClass), style: { color: disabled ? '#8C8CA6' : '' } }, label)));
 }
 Toggle.defaultProps = {
     label: '',
@@ -3287,7 +3415,7 @@ var DateInputDisplay = forwardRef(function (_a, ref) {
         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, inputClassName: className, autoFocus: true, actionElement: React.createElement("button", { className: "bianic-datepicker-toggle-button text-bia-coolgrey", disabled: disabled, onClick: function () {
+    var input = isEditing || disabled ? (React.createElement(TextInput, { type: "text", value: dateString !== null && dateString !== void 0 ? dateString : '', onChange: handleTextChange, onBlur: handleBlur, placeholder: placeholder, size: size, inputClassName: className, autoFocus: true, disabled: disabled, actionElement: React.createElement("button", { className: "bianic-datepicker-toggle-button text-bia-coolgrey disabled:cursor-not-allowed", disabled: disabled, onClick: function () {
                 buttonAction && buttonAction();
             } },
             React.createElement(TbCalendar, { size: iconSize })) })) : (React.createElement(React.Fragment, null,
@@ -3581,48 +3709,78 @@ var positionConfig = {
     end: 'justify-end',
 };
 
+var SelectedPage = function (_a) {
+    var label = _a.label, _b = _a.size, size = _b === void 0 ? 'sm' : _b;
+    var basicButtonStyle = 'bianic-custom-button bianic-fgc-target flex items-center justify-center font-semibold cursor-default';
+    var basicColorStyle = 'text-primary-cool bg-bia-grey-dark-10 focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:outline-[3px] focus-visible:rounded-md focus-visible:outline-bia-blue-light-50';
+    var textStyleOptions = {
+        sm: 'text-size-sm',
+        md: 'text-size-base',
+    };
+    var sizeStyleOptions = "".concat(iconOnlySizeConfig$1[size], " ").concat(radiusConfig$1['default'][size]);
+    var style = "".concat(basicButtonStyle, " ").concat(basicColorStyle, " ").concat(sizeStyleOptions, " ").concat(textStyleOptions[size]);
+    return React.createElement("div", { className: style }, label);
+};
+
 function PaginationBar(_a) {
     var size = _a.size, position = _a.position, currentPage = _a.currentPage, totalPages = _a.totalPages, onPageChange = _a.onPageChange;
-    var _b = useState([]), range = _b[0], setRange = _b[1];
-    var _c = useState([]), showedPages = _c[0], setShowedPages = _c[1];
+    var totalRange = Array.from({ length: totalPages }, function (_, i) { return i + 1; });
+    var PAGE_SIZE = 5;
+    var _b = useState(0), startIndex = _b[0], setStartIndex = _b[1];
+    var _c = useState(totalRange.slice(startIndex, PAGE_SIZE)), showedPages = _c[0], setShowedPages = _c[1];
     var buttonSizingStyle = size === 'sm' ? 31 : 38;
     var iconSize = size === 'sm' ? 14 : 18;
-    useEffect(function () {
-        var tempRange = [];
-        for (var i = 1; i <= totalPages; i += 1) {
-            tempRange.push(i);
-        }
-        setRange(tempRange);
-    }, [totalPages]);
-    useEffect(function () {
-        var usedRange = [];
-        var startRange = 0;
-        var endRange = totalPages > 5 ? 5 : totalPages;
-        if (totalPages > 5) {
-            if (currentPage < 3) {
-                endRange = 5;
-            }
-            else if (currentPage >= totalPages - 1) {
-                startRange = totalPages - 5;
-                endRange = totalPages;
-            }
-            else {
-                startRange = currentPage - 3;
-                endRange = currentPage + 2;
-            }
-        }
-        usedRange = range.slice(startRange, endRange);
-        setShowedPages(usedRange);
-    }, [currentPage, totalPages, range]);
     var handlePageChange = function (page) {
-        if (page >= 1 && page <= totalPages) {
+        if (page >= 1 && page <= totalPages)
             onPageChange(page);
-        }
     };
+    var handleNextRange = function () {
+        var newStartIndex = startIndex + PAGE_SIZE;
+        if (newStartIndex < totalPages)
+            setStartIndex(newStartIndex);
+        else
+            setStartIndex(totalPages - PAGE_SIZE);
+    };
+    var handlePrevRange = function () {
+        var newStartIndex = startIndex - PAGE_SIZE;
+        if (newStartIndex >= 0)
+            setStartIndex(newStartIndex);
+        else
+            setStartIndex(0);
+    };
+    var getStartIndex = function (index) {
+        if (index + PAGE_SIZE > totalPages)
+            return Math.max(0, totalPages - PAGE_SIZE);
+        return index;
+    };
+    useEffect(function () {
+        var correctedIndex = getStartIndex(startIndex);
+        setShowedPages(totalRange.slice(correctedIndex, correctedIndex + PAGE_SIZE));
+    }, [startIndex, totalRange, totalPages]);
     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: size, type: "button", onClick: function () { return handlePageChange(currentPage + 1); }, className: "cursor-pointer", iconLeft: React.createElement(TbChevronRight, { size: iconSize }), disabled: currentPage === totalPages })));
+        totalPages > 5 && (React.createElement(Button, { variant: "subtle", size: size, type: "button", onClick: handlePrevRange, className: showedPages[0] === 1 ? '' : 'cursor-pointer', iconLeft: React.createElement(TbChevronsLeft, { size: iconSize }), disabled: showedPages[0] === 1 })),
+        React.createElement(Button, { variant: "subtle", size: size, type: "button", onClick: function () {
+                handlePageChange(currentPage - 1);
+                if (showedPages[0] === currentPage)
+                    setStartIndex(function (old) { return old - 1; });
+            }, className: currentPage === 1 ? '' : 'cursor-pointer', iconLeft: React.createElement(TbChevronLeft, { size: iconSize }), disabled: currentPage === 1 }),
+        showedPages.map(function (page) {
+            if (page === currentPage) {
+                return React.createElement(SelectedPage, { key: page, label: page.toString(), size: size });
+            }
+            return (React.createElement(Button, { key: page, variant: "subtle", size: size, type: "button", onClick: function () {
+                    handlePageChange(page);
+                }, className: "cursor-pointer ".concat(sizeConfig$2[size]), label: page.toString(), minWidth: buttonSizingStyle }));
+        }),
+        React.createElement(Button, { variant: "subtle", size: size, type: "button", onClick: function () {
+                handlePageChange(currentPage + 1);
+                if (showedPages[4] === currentPage) {
+                    setStartIndex(function (old) { return old + 1; });
+                }
+            }, className: currentPage === totalPages ? '' : 'cursor-pointer', iconLeft: React.createElement(TbChevronRight, { size: iconSize }), disabled: currentPage === totalPages }),
+        totalPages > 5 && (React.createElement(Button, { variant: "subtle", size: size, type: "button", onClick: handleNextRange, className: showedPages[showedPages.length - 1] === totalPages
+                ? ''
+                : 'cursor-pointer', iconLeft: React.createElement(TbChevronsRight, { size: iconSize }), disabled: showedPages[showedPages.length - 1] === totalPages }))));
 }
 
 var activeConfig = {
@@ -3707,20 +3865,19 @@ 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 className = _a.className, children = _a.children, content = _a.content, _b = _a.direction, direction = _b === void 0 ? 'bottom' : _b; _a.maxWidth; var _c = _a.title, title = _c === void 0 ? '' : _c, style = _a.style, zIndex = _a.zIndex;
     var wrapperRef = useRef(null);
-    useRef(null);
-    var _e = useDetectOutsideClick(wrapperRef, false), isOpen = _e[0], setIsOpen = _e[1];
+    var _d = useDetectOutsideClick(wrapperRef, false), isOpen = _d[0], setIsOpen = _d[1];
     return (React.createElement("div", { className: "Bianic-popover-Wrapper relative block h-fit w-fit", role: "button", ref: wrapperRef, onClick: function () { return setIsOpen(true); } },
         children,
-        isOpen && (React.createElement(PopoverItem, { title: title, content: content, anchorRef: wrapperRef, direction: direction }))));
+        isOpen && (React.createElement(PopoverItem, { title: title, content: content, anchorRef: wrapperRef, direction: direction, className: className, style: style, zIndex: zIndex }))));
 }
 var PopoverItem = function (_a) {
-    var title = _a.title, content = _a.content, anchorRef = _a.anchorRef, direction = _a.direction;
+    var title = _a.title, content = _a.content, anchorRef = _a.anchorRef, direction = _a.direction, className = _a.className, style = _a.style, zIndex = _a.zIndex;
     var popoverRef = useRef(null);
     var positionStyle = usePopupPosition(anchorRef, popoverRef, direction)[0];
     var _b = classConfig[direction], triangleContainer = _b.triangleContainer, triangleShape = _b.triangleShape;
-    return 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" },
+    return createPortal(React.createElement("div", { ref: popoverRef, style: __assign(__assign(__assign({}, positionStyle), style), { zIndex: zIndex }), 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(className) },
         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)),
@@ -3728,7 +3885,6 @@ var PopoverItem = function (_a) {
             React.createElement("div", { className: "h-0 w-0 ".concat(triangleShape) }))), document.body);
 };
 Popover.defaultProps = {
-    delay: 400,
     direction: 'top',
     title: '',
 };
@@ -4262,4 +4418,4 @@ function Window(_a) {
         React.createElement("div", { className: "bianic-window-content flex w-full flex-col items-start gap-[20px] px-[20px] pb-[20px] text-primary-black" }, rest.children)));
 }
 
-export { Accordions, Alert, Avatar, AlertRoundedSquare as BCAlertRoundedSquare, CubeHeader as BCCubeHeader, Discrepancy as BCDiscrepancy, ExposedPort as BCExposedPort, FQAnalytical as BCFQAnalytical, FQGetaway as BCFQGetaway, FQModeler as BCFQModeler, FQOperation as BCFQOperation, FQWelldone as BCFQWelldone, Flowqount as BCFlowqount, Inlet as BCInlet, Legend as BCLegend, ModalBalance as BCModalBalance, Neutral as BCNeutral, Node as BCNode, Outlet as BCOutlet, Port as BCPort, SelectAllAdd as BCSelectAllAdd, SelectAllRemove as BCSelectAllRemove, Spinner$1 as BCSpinner, Stack as BCStack, VirtualPort as BCVirtualPort, Badge, Banner, Brand, Breadcrumb, Button, ButtonApp, Checkbox, Color, ContextualButton, DatePicker, Display, Divider, DropdownContainer, DropdownItem, FileTree, FormGroup, FormGroupButton, FormGroupLabel, FormLabel, Heading, InfoPanel, Link, LiveSearch, MenuContainer, MenuItem, Modal, P, PaginationBar, PickerCalendar, Pills, Popover, ProgressBar, ProgressCircle, Radio, ResizeableDiv, SegmentButtonGroup, SegmentButtonItem, SelectInput, Slider, Spinner, Tab, TabMenu, TableCell, TagLabel, Text, TextArea, TextInput, Toaster, Toggle, Tooltip, Window };
+export { Accordions, Alert, Avatar, AlertRoundedSquare as BCAlertRoundedSquare, CubeHeader as BCCubeHeader, Discrepancy as BCDiscrepancy, ExposedPort as BCExposedPort, FQAnalytical as BCFQAnalytical, FQGetaway as BCFQGetaway, FQModeler as BCFQModeler, FQOperation as BCFQOperation, FQWelldone as BCFQWelldone, Flowqount as BCFlowqount, Inlet as BCInlet, Legend as BCLegend, ModalBalance as BCModalBalance, Neutral as BCNeutral, Node as BCNode, Outlet as BCOutlet, Port as BCPort, SelectAllAdd as BCSelectAllAdd, SelectAllRemove as BCSelectAllRemove, Spinner$1 as BCSpinner, Stack as BCStack, VirtualPort as BCVirtualPort, Badge, Banner, Brand, Breadcrumb, Button, ButtonApp, Card, Checkbox, Color, ContextualButton, DatePicker, Display, Divider, DropdownContainer, DropdownItem, FileTree, FormGroup, FormGroupButton, FormGroupLabel, FormLabel, Heading, InfoPanel, Link, LiveSearch, MenuContainer, MenuItem, Modal, P, PaginationBar, PickerCalendar, Pills, Popover, ProgressBar, ProgressCircle, Radio, ResizeableDiv, SegmentButtonGroup, SegmentButtonItem, SelectInput, Slider, Spinner, Tab, TabMenu, TableCell, TagLabel, Text, TextArea, TextInput, Toaster, Toggle, Tooltip, TreeItem, Window, useFileTree };