bianic-ui 2.2.0 → 2.3.0

package/dist/cjs/index.js

@@ -103,6 +103,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) {
@@ -459,7 +463,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 = {
@@ -477,7 +481,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",
@@ -1555,6 +1559,27 @@ var ContextualButton = React.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 = [
         {
@@ -1696,7 +1721,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
@@ -1706,7 +1731,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 = React.useRef(null);
     var _b = React.useState(false), isExpand = _b[0], setIsExpand = _b[1];
@@ -1747,10 +1772,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 = React.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 {};
@@ -1989,15 +2110,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 = React.useState(false), active = _c[0], setActive = _c[1];
+    var _d = React.useState(false), active = _d[0], setActive = _d[1];
     var anchorRef = React.useRef(null);
     var tooltipContainerRef = React.useRef(null);
-    var _d = React.useState({
+    var _e = React.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);
@@ -2041,12 +2162,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 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);
+    return reactDom.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,
@@ -2172,12 +2293,13 @@ var TextInput = React.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,
@@ -2219,10 +2341,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: '',
@@ -2258,11 +2380,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,
@@ -2301,7 +2424,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" })))),
@@ -2414,12 +2537,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);
@@ -2735,7 +2859,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 = React.useRef(null);
     var _m = useLiveSearch({
         value: value,
@@ -2754,8 +2878,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);
@@ -2810,11 +2936,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: '',
@@ -3289,7 +3417,7 @@ var DateInputDisplay = React.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,
@@ -3583,48 +3711,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 = React.useState([]), range = _b[0], setRange = _b[1];
-    var _c = React.useState([]), showedPages = _c[0], setShowedPages = _c[1];
+    var totalRange = Array.from({ length: totalPages }, function (_, i) { return i + 1; });
+    var PAGE_SIZE = 5;
+    var _b = React.useState(0), startIndex = _b[0], setStartIndex = _b[1];
+    var _c = React.useState(totalRange.slice(startIndex, PAGE_SIZE)), showedPages = _c[0], setShowedPages = _c[1];
     var buttonSizingStyle = size === 'sm' ? 31 : 38;
     var iconSize = size === 'sm' ? 14 : 18;
-    React.useEffect(function () {
-        var tempRange = [];
-        for (var i = 1; i <= totalPages; i += 1) {
-            tempRange.push(i);
-        }
-        setRange(tempRange);
-    }, [totalPages]);
-    React.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;
+    };
+    React.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 = {
@@ -3709,20 +3867,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 = React.useRef(null);
-    React.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 = 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" },
+    return reactDom.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)),
@@ -3730,7 +3887,6 @@ var PopoverItem = function (_a) {
             React.createElement("div", { className: "h-0 w-0 ".concat(triangleShape) }))), document.body);
 };
 Popover.defaultProps = {
-    delay: 400,
     direction: 'top',
     title: '',
 };
@@ -4295,6 +4451,7 @@ exports.Brand = Brand;
 exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
 exports.ButtonApp = ButtonApp;
+exports.Card = Card;
 exports.Checkbox = Checkbox;
 exports.Color = Color;
 exports.ContextualButton = ContextualButton;
@@ -4339,4 +4496,6 @@ exports.TextInput = TextInput;
 exports.Toaster = Toaster;
 exports.Toggle = Toggle;
 exports.Tooltip = Tooltip;
+exports.TreeItem = TreeItem;
 exports.Window = Window;
+exports.useFileTree = useFileTree;