bianic-ui 2.10.1 → 2.10.2-beta.1

package/dist/cjs/types/components/Countdown/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export interface CountdownProps extends React.ComponentPropsWithoutRef<'div'> {
     seconds: number;
+    maxSeconds: number;
     variant?: 'countdown' | 'success';
 }
 declare const Countdown: React.ForwardRefExoticComponent<CountdownProps & React.RefAttributes<HTMLDivElement>>;

package/dist/cjs/types/components/Forms/SelectInput/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import SelectInputProps from './PropsInterface';
-declare function SelectInput({ descText, disabled, size, id, isValid, label, options, required, selected, setSelected, onClickDropdown, children, dropContProps: { className: dropContClassName, ...restDropContProps }, ...props }: SelectInputProps): React.JSX.Element;
+declare function SelectInput({ descText, disabled, size, id, isValid, label, options, readOnly, required, selected, setSelected, onClickDropdown, children, dropContProps: { className: dropContClassName, ...restDropContProps }, ...props }: SelectInputProps): React.JSX.Element;
 declare namespace SelectInput {
     var defaultProps: {
         descText: string;

package/dist/cjs/types/components/Icons/Unlinked.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IconProps } from './interface';
+declare const Unlinked: ({ className, fill, size, }: IconProps) => React.JSX.Element;
+export default Unlinked;

package/dist/cjs/types/components/Icons/index.d.ts

@@ -15,9 +15,10 @@ export { default as BCNeutral } from './Neutral';
 export { default as BCNode } from './Node';
 export { default as BCOutlet } from './Outlet';
 export { default as BCPort } from './Port';
+export { default as BCRhombus } from './Rhombus';
 export { default as BCSelectAllAdd } from './SelectAllAdd';
 export { default as BCSelectAllRemove } from './SelectAllRemove';
 export { default as BCSpinner } from './Spinner';
 export { default as BCStack } from './Stack';
-export { default as BCRhombus } from './Rhombus';
+export { default as BCUnlinked } from './Unlinked';
 export { default as BCVirtualPort } from './VirtualPort';

package/dist/cjs/types/components/Popover/PropInterface.d.ts

@@ -7,6 +7,7 @@ export interface PopoverProps {
     title?: string;
     style?: React.CSSProperties;
     zIndex?: number;
+    color?: 'black' | 'white';
     direction?: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
 }
 export interface PopoverItemProps {
@@ -16,5 +17,6 @@ export interface PopoverItemProps {
     style?: React.CSSProperties;
     title: string;
     zIndex?: number;
+    color?: 'black' | 'white';
     direction: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
 }

package/dist/cjs/types/components/Popover/configs.d.ts

@@ -2,42 +2,42 @@ declare const classConfig: {
     top: {
         tooltipContainer: string;
         triangleContainer: string;
-        triangleShape: string;
+        triangleBorders: string;
     };
     right: {
         tooltipContainer: string;
         triangleContainer: string;
-        triangleShape: string;
+        triangleBorders: string;
     };
     bottom: {
         tooltipContainer: string;
         triangleContainer: string;
-        triangleShape: string;
+        triangleBorders: string;
     };
     left: {
         tooltipContainer: string;
         triangleContainer: string;
-        triangleShape: string;
+        triangleBorders: string;
     };
     'top-right': {
         tooltipContainer: string;
         triangleContainer: string;
-        triangleShape: string;
+        triangleBorders: string;
     };
     'top-left': {
         tooltipContainer: string;
         triangleContainer: string;
-        triangleShape: string;
+        triangleBorders: string;
     };
     'bottom-right': {
         tooltipContainer: string;
         triangleContainer: string;
-        triangleShape: string;
+        triangleBorders: string;
     };
     'bottom-left': {
         tooltipContainer: string;
         triangleContainer: string;
-        triangleShape: string;
+        triangleBorders: string;
     };
 };
 export default classConfig;

package/dist/cjs/types/components/Popover/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PopoverProps } from './PropInterface';
-declare function Popover({ className, children, content, direction, maxWidth, title, style, zIndex, }: PopoverProps): React.JSX.Element;
+declare function Popover({ className, children, content, direction, maxWidth, title, style, zIndex, color, }: PopoverProps): React.JSX.Element;
 declare namespace Popover {
     var defaultProps: {
         direction: string;

package/dist/cjs/types/components/Table/TableUtility/TableFooterController.d.ts

@@ -1,6 +1,7 @@
 import { ComponentPropsWithoutRef, Dispatch, SetStateAction } from 'react';
 import React from 'react';
 interface TableFooterControllerProps extends ComponentPropsWithoutRef<'div'> {
+    size: 'sm' | 'md';
     currentPage: number;
     totalPages: number;
     pageSize: number;
@@ -8,5 +9,5 @@ interface TableFooterControllerProps extends ComponentPropsWithoutRef<'div'> {
     setPageSize: Dispatch<SetStateAction<number>>;
     isLoading?: boolean;
 }
-declare const TableFooterController: ({ currentPage, totalPages, pageSize, setCurrentPage, setPageSize, isLoading, }: TableFooterControllerProps) => React.JSX.Element;
+declare const TableFooterController: ({ currentPage, totalPages, pageSize, setCurrentPage, setPageSize, isLoading, size, }: TableFooterControllerProps) => React.JSX.Element;
 export default TableFooterController;

package/dist/cjs/types/components/Table/TableUtility/TableHeaderController.d.ts

@@ -1,9 +1,10 @@
 import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
 interface TableHeaderControllerProps extends ComponentPropsWithoutRef<'div'> {
+    size?: 'sm' | 'md';
     buttonActions?: ReactNode[];
     totalData?: number;
     firstIndex?: number;
     lastIndex?: number;
 }
-declare const TableHeaderController: ({ buttonActions, totalData, firstIndex, lastIndex, }: TableHeaderControllerProps) => React.JSX.Element;
+declare const TableHeaderController: ({ size, buttonActions, totalData, firstIndex, lastIndex, }: TableHeaderControllerProps) => React.JSX.Element;
 export default TableHeaderController;

package/dist/cjs/types/components/Tooltip/PropsInterface.d.ts

@@ -10,6 +10,7 @@ interface TooltipProps extends Omit<ComponentPropsWithoutRef<'div'>, 'content'>
     direction?: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
 }
 interface TooltipItemProps {
+    active?: boolean;
     anchorRef: RefObject<HTMLDivElement>;
     className?: string;
     content: ReactNode | string;

package/dist/cjs/types/stories/Banner.stories.d.ts

@@ -16,3 +16,4 @@ export declare const DemoIconButtonDanger: Story;
 export declare const DemoIconButtonInfo: Story;
 export declare const DemoIconButtonSuccess: Story;
 export declare const DemoIconButtonWarning: Story;
+export declare const DemoMoreText: Story;

package/dist/cjs/types/stories/Icons/Unlinked.stories.d.ts

@@ -0,0 +1,14 @@
+import type { StoryObj } from '@storybook/react-webpack5';
+import React from 'react';
+declare const meta: {
+    title: string;
+    component: ({ className, fill, size, }: import("../../components/Icons/interface").IconProps) => React.JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Preview: Story;

package/dist/esm/Empty.svg

@@ -1,12 +1,12 @@
-<svg width="92" height="92" viewBox="0 0 92 92" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M32.8825 12.968C33.8187 12.0283 35.0905 11.5 36.417 11.5H66.6521C69.4074 11.5 71.641 13.7336 71.641 16.489V75.1388C71.641 77.8941 69.4074 80.1278 66.6521 80.1278H25.8327C23.0774 80.1278 20.8437 77.8875 20.8438 75.1321C20.8438 56.1849 20.8438 44.6779 20.8438 27.1159C20.8438 25.7961 21.3667 24.528 22.2982 23.593L32.8825 12.968Z" fill="#DADEEB"/>
-<path d="M32.8825 12.968C33.8187 12.0283 35.0905 11.5 36.417 11.5H66.6521C69.4074 11.5 71.641 13.7336 71.641 16.489V75.1388C71.641 77.8941 69.4074 80.1278 66.6521 80.1278H25.8327C23.0774 80.1278 20.8437 77.8875 20.8438 75.1321C20.8438 56.1849 20.8438 44.6779 20.8438 27.1159C20.8438 25.7961 21.3667 24.528 22.2982 23.593L32.8825 12.968Z" fill="white" fill-opacity="0.5"/>
-<path d="M34.3638 11.5V16.1283C34.3638 21.0391 30.3828 25.02 25.472 25.02H20.8438L34.3638 11.5Z" fill="#DADEEB"/>
-<rect x="28.1716" y="32.6677" width="18.7253" height="4.07072" rx="1.99559" fill="#DADEEB"/>
-<rect x="28.1716" y="39.9949" width="36.6365" height="4.07072" rx="1.99559" fill="#DADEEB"/>
-<rect x="28.1716" y="47.3223" width="36.6365" height="4.07072" rx="1.99559" fill="#DADEEB"/>
-<rect x="28.1716" y="54.6497" width="36.6365" height="4.07072" rx="1.99559" fill="#DADEEB"/>
-<rect x="28.1716" y="61.9768" width="36.6365" height="4.07072" rx="1.99559" fill="#DADEEB"/>
-<path d="M58.7737 63.8789C63.267 59.3856 70.5519 59.3856 75.0452 63.8789C79.5382 68.3722 79.5384 75.6572 75.0452 80.1504C70.552 84.6436 63.267 84.6434 58.7737 80.1504C54.2804 75.6571 54.2804 68.3722 58.7737 63.8789Z" stroke="#54A0F9" stroke-width="1.70457"/>
-<path d="M75.6475 80.1499L81.9753 86.4778" stroke="#54A0F9" stroke-width="1.70457"/>
-</svg>
+<svg width="92" height="92" viewBox="0 0 92 92" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.8825 12.968C33.8187 12.0283 35.0905 11.5 36.417 11.5H66.6521C69.4074 11.5 71.641 13.7336 71.641 16.489V75.1388C71.641 77.8941 69.4074 80.1278 66.6521 80.1278H25.8327C23.0774 80.1278 20.8437 77.8875 20.8438 75.1321C20.8438 56.1849 20.8438 44.6779 20.8438 27.1159C20.8438 25.7961 21.3667 24.528 22.2982 23.593L32.8825 12.968Z" fill="#DADEEB"/>
+<path d="M32.8825 12.968C33.8187 12.0283 35.0905 11.5 36.417 11.5H66.6521C69.4074 11.5 71.641 13.7336 71.641 16.489V75.1388C71.641 77.8941 69.4074 80.1278 66.6521 80.1278H25.8327C23.0774 80.1278 20.8437 77.8875 20.8438 75.1321C20.8438 56.1849 20.8438 44.6779 20.8438 27.1159C20.8438 25.7961 21.3667 24.528 22.2982 23.593L32.8825 12.968Z" fill="white" fill-opacity="0.5"/>
+<path d="M34.3638 11.5V16.1283C34.3638 21.0391 30.3828 25.02 25.472 25.02H20.8438L34.3638 11.5Z" fill="#DADEEB"/>
+<rect x="28.1716" y="32.6677" width="18.7253" height="4.07072" rx="1.99559" fill="#DADEEB"/>
+<rect x="28.1716" y="39.9949" width="36.6365" height="4.07072" rx="1.99559" fill="#DADEEB"/>
+<rect x="28.1716" y="47.3223" width="36.6365" height="4.07072" rx="1.99559" fill="#DADEEB"/>
+<rect x="28.1716" y="54.6497" width="36.6365" height="4.07072" rx="1.99559" fill="#DADEEB"/>
+<rect x="28.1716" y="61.9768" width="36.6365" height="4.07072" rx="1.99559" fill="#DADEEB"/>
+<path d="M58.7737 63.8789C63.267 59.3856 70.5519 59.3856 75.0452 63.8789C79.5382 68.3722 79.5384 75.6572 75.0452 80.1504C70.552 84.6436 63.267 84.6434 58.7737 80.1504C54.2804 75.6571 54.2804 68.3722 58.7737 63.8789Z" stroke="#54A0F9" stroke-width="1.70457"/>
+<path d="M75.6475 80.1499L81.9753 86.4778" stroke="#54A0F9" stroke-width="1.70457"/>
+</svg>

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, forwardRef, useRef, cloneElement, useLayoutEffect, Children, useMemo, isValidElement, useCallback } from 'react';
+import React, { useState, useEffect, forwardRef, useRef, useLayoutEffect, cloneElement, Children, useMemo, isValidElement, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 
 function Accordions(_a) {
@@ -719,12 +719,29 @@ var variantConfig$2 = {
 
 function Banner(_a) {
     var children = _a.children, _b = _a.closeable, closeable = _b === void 0 ? true : _b, _c = _a.variant, variant = _c === void 0 ? 'black' : _c, open = _a.open, onClose = _a.onClose;
+    var textRef = useRef(null);
+    var _d = useState(false), isMultiLine = _d[0], setIsMultiLine = _d[1];
+    useLayoutEffect(function () {
+        var textElement = textRef.current;
+        if (!textElement)
+            return;
+        var observer = new ResizeObserver(function () {
+            var computedStyle = window.getComputedStyle(textElement);
+            var lineHeight = parseFloat(computedStyle.lineHeight);
+            var height = textElement.clientHeight;
+            if (lineHeight && height) {
+                setIsMultiLine(height > lineHeight * 1.5);
+            }
+        });
+        observer.observe(textElement);
+        return function () { return observer.disconnect(); };
+    }, [children]);
     if (open) {
-        return (React.createElement("div", { className: "w-full h-[42px] py-[22px] text-size-base font-semibold flex justify-center items-center text-white relative ".concat(variantConfig$2[variant].bg) },
-            React.createElement("div", { className: "w-full flex justify-center items-center gap-[10px]" },
-                React.createElement("div", { className: "font-semibold font-segoe text-[14px] leading-[21px]" }, children),
-                React.createElement("div", { className: "flex items-center justify-center" }, closeable && (React.createElement("button", { className: "ml-auto text-xs outline-2 text-white absolute right-4 w-[18px] h-[18px] flex justify-center items-center ".concat(variantConfig$2[variant].focus), type: "button", onClick: function () { return onClose(false); } },
-                    React.createElement(TbX, { className: "text-[18px] ".concat(variantConfig$2[variant].hover, " ").concat(variantConfig$2[variant].active) })))))));
+        return (React.createElement("div", { className: "relative flex min-h-fit w-full justify-center gap-x-[15px] py-[22px] pl-[15px] pr-[48px] text-size-base font-semibold text-white ".concat(variantConfig$2[variant].bg, " ").concat(isMultiLine ? 'items-start' : 'items-center') },
+            React.createElement("div", { className: "font-segoe text-[14px] font-semibold leading-[21px]", ref: textRef }, children),
+            React.createElement("div", { className: "absolute right-[15px]", style: { display: closeable ? 'block' : 'none' } },
+                React.createElement("button", { className: "flex h-[18px] w-[18px] items-center justify-center text-xs text-white outline-2 ".concat(variantConfig$2[variant].focus), type: "button", onClick: function () { return onClose(false); } },
+                    React.createElement(TbX, { className: "text-[18px] ".concat(variantConfig$2[variant].hover, " ").concat(variantConfig$2[variant].active) })))));
     }
 }
 Banner.defaultProps = {
@@ -1743,17 +1760,24 @@ function Color() {
             }))));
 }
 
-var BORDER_COLOR = {
-    countdown: 'border-bia-blue',
-    success: 'border-bia-green',
-};
 var Countdown = React.forwardRef(function (_a, ref) {
-    var seconds = _a.seconds, _b = _a.variant, variant = _b === void 0 ? 'countdown' : _b, className = _a.className, props = __rest(_a, ["seconds", "variant", "className"]);
+    var seconds = _a.seconds, maxSeconds = _a.maxSeconds, _b = _a.variant, variant = _b === void 0 ? 'countdown' : _b, className = _a.className, props = __rest(_a, ["seconds", "maxSeconds", "variant", "className"]);
     var isCountdown = variant === 'countdown';
-    var borderColor = BORDER_COLOR[variant];
-    return (React.createElement("div", __assign({ ref: ref, role: isCountdown ? 'timer' : 'status', "aria-live": "polite", "aria-atomic": "true", className: cn('flex aspect-square w-[120px] flex-col items-center justify-center rounded-radius-full border-[3px]', borderColor, className) }, props), isCountdown ? (React.createElement(React.Fragment, null,
-        React.createElement(Heading, { variant: "2" }, seconds),
-        React.createElement(Text, { variant: "small-text", className: "font-segoe text-bia-coolgrey" }, seconds === 1 ? 'second' : 'seconds'))) : (React.createElement(TbCheck, { size: 46, className: "text-bia-green", "aria-label": "Countdown complete" }))));
+    var strokeWidth = 3;
+    var size = 120;
+    var radius = (size - strokeWidth) / 2;
+    var circumference = 2 * Math.PI * radius;
+    // Calculate how much stroke to show based on time remaining
+    var strokeDashoffset = circumference - (seconds / maxSeconds) * circumference;
+    return (React.createElement("div", __assign({ ref: ref, role: isCountdown ? 'timer' : 'status', "aria-live": "polite", "aria-atomic": "true", className: cn('relative flex aspect-square w-[120px] flex-col items-center justify-center rounded-radius-full', className) }, props, { style: { width: size, height: size } }),
+        React.createElement("svg", { className: "absolute left-0 top-0 -rotate-90 transform" // Rotates SVG so progress starts at 12 o'clock
+            , width: size, height: size },
+            React.createElement("circle", { className: "text-bia-blue-light-90", stroke: "currentColor", fill: "transparent", strokeWidth: strokeWidth, cx: size / 2, cy: size / 2, r: radius }),
+            isCountdown && (React.createElement("circle", { className: "text-bia-blue transition-all ease-linear ".concat(seconds !== maxSeconds ? 'duration-1000' : 'duration-0'), stroke: "currentColor", fill: "transparent", strokeWidth: strokeWidth, strokeDasharray: circumference, strokeDashoffset: strokeDashoffset, strokeLinecap: "round", cx: size / 2, cy: size / 2, r: radius })),
+            React.createElement("circle", { className: "origin-center scale-y-[-1] text-bia-green transition-all ease-linear ".concat(isCountdown ? 'duration-0' : 'duration-1000'), stroke: "currentColor", fill: "transparent", strokeWidth: strokeWidth, strokeDasharray: circumference, strokeDashoffset: circumference - (isCountdown ? 0 : 1 / 1) * circumference, strokeLinecap: "round", cx: size / 2, cy: size / 2, r: radius })),
+        isCountdown ? (React.createElement(React.Fragment, null,
+            React.createElement(Heading, { key: seconds, variant: "2", className: "animate-number-drop" }, seconds),
+            React.createElement(Text, { variant: "small-text", className: "font-segoe text-bia-coolgrey" }, seconds <= 1 ? 'second' : 'seconds'))) : (React.createElement(TbCheck, { size: 46, className: "text-bia-green", "aria-label": "Countdown complete" }))));
 });
 Countdown.displayName = 'Countdown';
 
@@ -1954,6 +1978,8 @@ var getContextualPopupStyle = function (anchorRef, popupRef, position) {
     var popupRect = popupRef.current.getBoundingClientRect();
     var popupHeight = popupRect.height;
     var popupWidth = popupRect.width;
+    console.log('popupHeight', popupHeight);
+    console.log('anchorHeight', anchorRect.height);
     switch (position) {
         case 'top':
             style.top = "".concat(anchorRect.top - popupHeight + window.scrollY - 5, "px");
@@ -2237,12 +2263,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, bgColor: bgColor, textColor: textColor, zIndex: zIndex, className: className, style: style }))));
+        React.createElement(TooltipItem, { anchorRef: anchorRef, direction: direction, content: content, tooltipContainerRef: tooltipContainerRef, tooltipContainerStyle: tooltipContainerStyle, bgColor: bgColor, textColor: textColor, zIndex: zIndex, className: className, style: style, active: active })));
 }
 var TooltipItem = function (_a) {
-    var anchorRef = _a.anchorRef, className = _a.className, content = _a.content, direction = _a.direction, style = _a.style, tooltipContainerRef = _a.tooltipContainerRef, tooltipContainerStyle = _a.tooltipContainerStyle, _b = _a.bgColor, bgColor = _b === void 0 ? 'bia-black' : _b, _c = _a.textColor, textColor = _c === void 0 ? 'bia-white' : _c, zIndex = _a.zIndex;
+    var anchorRef = _a.anchorRef, className = _a.className, content = _a.content, direction = _a.direction, style = _a.style, tooltipContainerRef = _a.tooltipContainerRef, tooltipContainerStyle = _a.tooltipContainerStyle, _b = _a.bgColor, bgColor = _b === void 0 ? 'bia-black' : _b, _c = _a.textColor, textColor = _c === void 0 ? 'bia-white' : _c, zIndex = _a.zIndex, _d = _a.active, active = _d === void 0 ? false : _d;
     var positionStyle = usePopupPosition(anchorRef, tooltipContainerRef, direction)[0];
-    return createPortal(React.createElement("div", { className: "tooltip-container break-word absolute inline-block break-all rounded-[4px] bg-".concat(bgColor, " px-[7px] py-[4px] text-size-sm text-").concat(textColor, " ").concat(className), style: __assign(__assign(__assign({ zIndex: zIndex }, positionStyle), tooltipContainerStyle), style), ref: tooltipContainerRef }, content), document.body);
+    return createPortal(React.createElement("div", { className: "tooltip-container break-word absolute inline-block break-all rounded-[4px] bg-".concat(bgColor, " px-[7px] py-[4px] text-size-sm text-").concat(textColor, " ").concat(className), style: __assign(__assign(__assign(__assign({ zIndex: zIndex }, positionStyle), tooltipContainerStyle), style), { visibility: active ? 'visible' : 'hidden' }), ref: tooltipContainerRef }, content), document.body);
 };
 Tooltip.defaultProps = {
     delay: 400,
@@ -2519,7 +2545,7 @@ var sizeUnion$3 = ['md', 'sm', 'tn'];
 function Checkbox(_a) {
     var _b = _a.disabled, disabled = _b === void 0 ? false : _b, id = _a.id, _c = _a.size, size = _c === void 0 ? 'md' : _c, label = _a.label, _d = _a.onChange, onChange = _d === void 0 ? function () { } : _d, _e = _a.isIndeterminate, isIndeterminate = _e === void 0 ? false : _e, props = __rest(_a, ["disabled", "id", "size", "label", "onChange", "isIndeterminate"]);
     var _f = sizeConfig$9[validUnion(size, sizeUnion$3)], checkClass = _f.checkClass, labelClass = _f.labelClass;
-    var isValidIndeterminate = isIndeterminate && props.checked && !disabled;
+    var isValidIndeterminate = isIndeterminate && props.checked;
     var backgroundClass = size === 'tn' && props.checked ? 'bg-bia-blue' : 'bg-bia-white';
     var peerCheckedClass = size === 'tn' ? '' : 'peer-checked:border-2';
     return (React.createElement("div", { className: "flex items-center" },
@@ -2617,10 +2643,10 @@ DefaultDropdownItem.defaultProps = {
 
 var sizeUnion$2 = ['md', 'sm'];
 function SelectInput(_a) {
-    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, id = _a.id, _d = _a.isValid, isValid = _d === void 0 ? null : _d, label = _a.label, _e = _a.options, options = _e === void 0 ? [] : _e, _f = _a.required, required = _f === void 0 ? false : _f, selected = _a.selected, setSelected = _a.setSelected, _g = _a.onClickDropdown, onClickDropdown = _g === void 0 ? function () { } : _g, children = _a.children, _h = _a.dropContProps, _j = _h === void 0 ? {} : _h, _k = _j.className, dropContClassName = _k === void 0 ? '' : _k, restDropContProps = __rest(_j, ["className"]), props = __rest(_a, ["descText", "disabled", "size", "id", "isValid", "label", "options", "required", "selected", "setSelected", "onClickDropdown", "children", "dropContProps"]);
-    var _l = useState(false), isOpen = _l[0], setIsOpen = _l[1];
+    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, id = _a.id, _d = _a.isValid, isValid = _d === void 0 ? null : _d, label = _a.label, _e = _a.options, options = _e === void 0 ? [] : _e, _f = _a.readOnly, readOnly = _f === void 0 ? false : _f, _g = _a.required, required = _g === void 0 ? false : _g, selected = _a.selected, setSelected = _a.setSelected, _h = _a.onClickDropdown, onClickDropdown = _h === void 0 ? function () { } : _h, children = _a.children, _j = _a.dropContProps, _k = _j === void 0 ? {} : _j, _l = _k.className, dropContClassName = _l === void 0 ? '' : _l, restDropContProps = __rest(_k, ["className"]), props = __rest(_a, ["descText", "disabled", "size", "id", "isValid", "label", "options", "readOnly", "required", "selected", "setSelected", "onClickDropdown", "children", "dropContProps"]);
+    var _m = useState(false), isOpen = _m[0], setIsOpen = _m[1];
     var validatedSize = validUnion(size, sizeUnion$2);
-    var _m = sizeConfig$8[validatedSize], searchSize = _m.searchSize, iconSize = _m.iconSize;
+    var _o = sizeConfig$8[validatedSize], searchSize = _o.searchSize, iconSize = _o.iconSize;
     var inputRef = useRef(null);
     var isObjectOptionItem = false;
     if (options.every(function (item) { return typeof item === 'object' && item !== null; }))
@@ -2636,12 +2662,10 @@ function SelectInput(_a) {
     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" }, "*")),
+    return (React.createElement("div", { className: "bianic-fgc-container bianic-text-input-container field-group 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", __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("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);
@@ -3097,10 +3121,19 @@ var FormGroup = function (_a) {
     var children = _a.children, size = _a.size;
     var validSize = validUnion(size, sizeUnion$1);
     return (React.createElement("div", { className: "bianic-form-group flex items-end" }, Children.map(children, function (child) {
-        return React.isValidElement(child)
-            ? // Kirimkan handleItemClick sebagai props onClick ke setiap MenuItem
-                cloneElement(child, { size: validSize })
-            : child;
+        var _a;
+        if (!React.isValidElement(child))
+            return child;
+        if (typeof child.type === 'string') {
+            var existingClassName = (_a = child.props.className) !== null && _a !== void 0 ? _a : '';
+            var mergedClassName = [existingClassName, 'bianic-fgc-container']
+                .filter(Boolean)
+                .join(' ');
+            return cloneElement(child, {
+                className: mergedClassName,
+            });
+        }
+        return cloneElement(child, { size: validSize });
     })));
 };
 
@@ -4038,6 +4071,12 @@ var Port = function (_a) {
         React.createElement("path", { d: "M11.9998 3.81818C16.5185 3.81818 20.1814 7.48121 20.1815 11.9998C20.1815 16.5185 16.5185 20.1815 11.9998 20.1815C7.4812 20.1814 3.81818 16.5185 3.81818 11.9998C3.81827 7.48127 7.48126 3.81828 11.9998 3.81818ZM12.0008 7.09064C11.7838 7.09064 11.5751 7.17744 11.4217 7.33088C11.2684 7.48427 11.1825 7.69214 11.1824 7.909V11.1815H7.909C7.69216 11.1816 7.48421 11.2684 7.33087 11.4217C7.17755 11.5751 7.09166 11.783 7.09161 11.9998C7.09161 12.2168 7.17743 12.4255 7.33087 12.5789C7.48419 12.7321 7.69224 12.8181 7.909 12.8182H11.1824V16.0906C11.1824 16.3076 11.2683 16.5163 11.4217 16.6697C11.5751 16.8231 11.7838 16.909 12.0008 16.909C12.2176 16.9089 12.4256 16.823 12.5789 16.6697C12.7324 16.5163 12.8182 16.3076 12.8182 16.0906V12.8182H16.0916C16.3084 12.8181 16.5164 12.7321 16.6697 12.5789C16.8232 12.4255 16.909 12.2168 16.909 11.9998C16.9089 11.7829 16.8231 11.5751 16.6697 11.4217C16.5164 11.2683 16.3085 11.1816 16.0916 11.1815H12.8182V7.909C12.8182 7.69213 12.7322 7.48428 12.5789 7.33088C12.4256 7.17755 12.2176 7.09076 12.0008 7.09064Z", fill: "inherit" })));
 };
 
+var Rhombus = function (_a) {
+    var className = _a.className, _b = _a.fill, fill = _b === void 0 ? 'currentColor' : _b, _c = _a.size, size = _c === void 0 ? 20 : _c;
+    return (React.createElement("svg", { className: className, width: size, height: size, viewBox: "0 0 24 24", fill: fill, xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("path", { d: "M11.5884 7.24696C11.8417 7.09495 12.1583 7.09495 12.4116 7.24696L18.8567 11.114C19.3745 11.4247 19.3745 12.1753 18.8567 12.486L12.4116 16.353C12.1583 16.505 11.8417 16.505 11.5884 16.353L5.14332 12.486C4.62545 12.1753 4.62545 11.4247 5.14332 11.114L11.5884 7.24696Z", fill: "inherit" })));
+};
+
 var SelectAllAdd = function (_a) {
     var className = _a.className, _b = _a.fill, fill = _b === void 0 ? 'currentColor' : _b, _c = _a.size, size = _c === void 0 ? 20 : _c;
     return (React.createElement("svg", { className: className, width: size, height: size, viewBox: "0 0 24 24", fill: fill, xmlns: "http://www.w3.org/2000/svg" },
@@ -4065,10 +4104,13 @@ var Stack = function (_a) {
         React.createElement("path", { d: "M11.5884 7.24696C11.8417 7.09495 12.1583 7.09495 12.4116 7.24696L18.8567 11.114C19.3745 11.4247 19.3745 12.1753 18.8567 12.486L12.4116 16.353C12.1583 16.505 11.8417 16.505 11.5884 16.353L5.14332 12.486C4.62545 12.1753 4.62545 11.4247 5.14332 11.114L11.5884 7.24696Z", fill: "inherit" })));
 };
 
-var Rhombus = function (_a) {
+var Unlinked = function (_a) {
     var className = _a.className, _b = _a.fill, fill = _b === void 0 ? 'currentColor' : _b, _c = _a.size, size = _c === void 0 ? 20 : _c;
     return (React.createElement("svg", { className: className, width: size, height: size, viewBox: "0 0 24 24", fill: fill, xmlns: "http://www.w3.org/2000/svg" },
-        React.createElement("path", { d: "M11.5884 7.24696C11.8417 7.09495 12.1583 7.09495 12.4116 7.24696L18.8567 11.114C19.3745 11.4247 19.3745 12.1753 18.8567 12.486L12.4116 16.353C12.1583 16.505 11.8417 16.505 11.5884 16.353L5.14332 12.486C4.62545 12.1753 4.62545 11.4247 5.14332 11.114L11.5884 7.24696Z", fill: "inherit" })));
+        React.createElement("path", { d: "M21.293 16.293C21.6835 15.9025 22.3165 15.9024 22.707 16.293C23.0975 16.6835 23.0975 17.3165 22.707 17.707L20.9141 19.5L22.707 21.293C23.0975 21.6835 23.0975 22.3165 22.707 22.707C22.3165 23.0975 21.6835 23.0975 21.293 22.707L19.5 20.9141L17.707 22.707C17.3165 23.0975 16.6835 23.0975 16.293 22.707C15.9024 22.3165 15.9024 21.6835 16.293 21.293L18.0859 19.5L16.293 17.707C15.9024 17.3165 15.9024 16.6835 16.293 16.293C16.6835 15.9025 17.3165 15.9024 17.707 16.293L19.5 18.0859L21.293 16.293Z", fill: "#2F2F2F" }),
+        React.createElement("path", { d: "M5.33789 10.251C5.75171 9.88533 6.38331 9.92416 6.74902 10.3379C7.11467 10.7517 7.07583 11.3833 6.66211 11.749L6.16016 12.1924C5.79549 12.5578 5.50566 12.9912 5.30664 13.4678C5.10428 13.9525 5.00006 14.4728 5 14.998C5 15.5234 5.10422 16.0445 5.30664 16.5293C5.50905 17.0139 5.80525 17.454 6.17871 17.8232C6.94016 18.5762 7.9682 18.9979 9.03906 18.998C10.0861 18.998 11.0926 18.5947 11.8486 17.873L12.1973 17.4033C12.5268 16.9601 13.1535 16.8678 13.5967 17.1973C14.0399 17.5268 14.1322 18.1535 13.8027 18.5967L13.4053 19.1309C13.3751 19.1714 13.3416 19.2096 13.3057 19.2451C12.1697 20.3683 10.6365 20.998 9.03906 20.998C7.44166 20.9979 5.90831 20.3683 4.77246 19.2451C4.21094 18.6898 3.76524 18.0285 3.46094 17.2998C3.15659 16.5709 3 15.788 3 14.998C3.00006 14.2083 3.15665 13.4261 3.46094 12.6973C3.76524 11.9685 4.21094 11.3072 4.77246 10.752C4.78565 10.7389 4.79958 10.7262 4.81348 10.7139L5.33789 10.251Z", fill: "#2F2F2F" }),
+        React.createElement("path", { d: "M14.293 8.29297C14.6835 7.90244 15.3165 7.90244 15.707 8.29297C16.0976 8.68349 16.0976 9.31651 15.707 9.70703L9.70703 15.707C9.31651 16.0976 8.68349 16.0976 8.29297 15.707C7.90244 15.3165 7.90244 14.6835 8.29297 14.293L14.293 8.29297Z", fill: "#2F2F2F" }),
+        React.createElement("path", { d: "M14.999 3C16.5903 3.00014 18.116 3.6325 19.2412 4.75781C20.3663 5.88307 20.999 7.40877 20.999 9C20.9989 10.5913 20.3665 12.118 19.2412 13.2432C19.2247 13.2597 19.2071 13.2757 19.1895 13.291L18.6562 13.7549C18.2394 14.1171 17.6074 14.073 17.2451 13.6562C16.8829 13.2394 16.927 12.6074 17.3438 12.2451L17.8506 11.8057C18.5863 11.0578 18.999 10.0499 18.999 9C18.999 7.93919 18.5772 6.92206 17.8271 6.17188C17.0771 5.42168 16.0599 5.00014 14.999 5C13.9496 4.99993 12.9422 5.41159 12.1943 6.14648L11.7568 6.65332C11.3959 7.07118 10.7646 7.11762 10.3467 6.75684C9.92881 6.39588 9.88237 5.76463 10.2432 5.34668L10.7061 4.81055C10.722 4.79214 10.7387 4.77404 10.7559 4.75684C11.8812 3.63164 13.4076 2.99989 14.999 3Z", fill: "#2F2F2F" })));
 };
 
 var VirtualPort = function (_a) {
@@ -4271,65 +4313,76 @@ Pills.defaultProps = {
 var classConfig = {
     top: {
         tooltipContainer: 'bottom-[calc(100%+10px)]  left-1/2  -translate-x-1/2',
-        triangleContainer: 'left-0 -bottom-[4px] flex justify-center w-full h-auto',
-        triangleShape: 'border-l-[8px] border-l-transparent border-t-[5px] border-t-primary-black border-r-[8px] border-r-transparent',
+        // Positioned at the bottom, pointing down: needs right and bottom borders
+        triangleContainer: 'left-0 -bottom-[3px] flex justify-center w-full h-auto',
+        triangleBorders: 'border-r border-b',
     },
     right: {
         tooltipContainer: 'left-[calc(100%+10px)] top-1/2 -translate-y-1/2',
-        triangleContainer: '-left-[4px] bottom-0 flex items-center w-auto h-full',
-        triangleShape: 'border-t-[8px] border-t-transparent border-r-[5px] border-r-primary-black border-b-[8px] border-b-transparent',
+        // Positioned on the left, pointing left: needs bottom and left borders
+        triangleContainer: '-left-[3px] bottom-0 flex items-center w-auto h-full',
+        triangleBorders: 'border-b border-l',
     },
     bottom: {
-        tooltipContainer: 'top-[calc(100%+10px)]  left-1/2  -translate-x-1/2',
-        triangleContainer: 'px-[10px] left-0 -top-[9px] flex justify-center w-full h-auto',
-        triangleShape: 'border-l-[8px] border-l-transparent border-b-[5px] border-b-primary-black border-r-[8px] border-r-transparent',
+        tooltipContainer: 'top-[calc(100%+20px)]  left-1/2  -translate-x-1/2',
+        // Positioned at the top, pointing up: needs left and top borders
+        triangleContainer: 'px-[10px] left-0 -top-[3px] flex justify-center w-full h-auto',
+        triangleBorders: 'border-l border-t',
     },
     left: {
         tooltipContainer: 'right-[calc(100%+10px)] top-1/2 -translate-y-1/2',
-        triangleContainer: '-right-[4px] bottom-0 flex items-center w-auto h-full',
-        triangleShape: 'border-t-[8px] border-t-transparent border-l-[5px] border-l-primary-black border-b-[8px] border-b-transparent',
+        // Positioned on the right, pointing right: needs top and right borders
+        triangleContainer: '-right-[3px] bottom-0 flex items-center w-auto h-full',
+        triangleBorders: 'border-t border-r',
     },
     'top-right': {
         tooltipContainer: 'bottom-[calc(100%+10px)] right-0',
-        triangleContainer: 'px-[10px] left-0 -bottom-[4px] flex justify-end w-full h-auto',
-        triangleShape: 'border-l-[8px] border-l-transparent border-t-[5px] border-t-primary-black border-r-[8px] border-r-transparent',
+        triangleContainer: 'px-[10px] left-0 -bottom-[3px] flex justify-end w-full h-auto',
+        triangleBorders: 'border-r border-b',
     },
     'top-left': {
         tooltipContainer: 'bottom-[calc(100%+10px)] left-0',
-        triangleContainer: 'px-[10px] left-0 -bottom-[4px] flex justify-start w-full h-auto',
-        triangleShape: 'border-l-[8px] border-l-transparent border-t-[5px] border-t-primary-black border-r-[8px] border-r-transparent',
+        triangleContainer: 'px-[10px] left-0 -bottom-[3px] flex justify-start w-full h-auto',
+        triangleBorders: 'border-r border-b',
     },
     'bottom-right': {
         tooltipContainer: 'top-[calc(100%+10px)]  right-0',
-        triangleContainer: 'px-[10px] left-0 -top-[9px] flex justify-end w-full h-auto',
-        triangleShape: 'border-l-[8px] border-l-transparent border-b-[5px] border-b-primary-black border-r-[8px] border-r-transparent',
+        triangleContainer: 'px-[10px] left-0 -top-[3px] flex justify-end w-full h-auto',
+        triangleBorders: 'border-l border-t',
     },
     'bottom-left': {
         tooltipContainer: 'top-[calc(100%+10px)]  left-0',
-        triangleContainer: 'px-[10px] left-0 -top-[9px] flex justify-start w-full h-auto',
-        triangleShape: 'border-l-[8px] border-l-transparent border-b-[5px] border-b-primary-black border-r-[8px] border-r-transparent',
+        triangleContainer: 'px-[10px] left-0 -top-[3px] flex justify-start w-full h-auto',
+        triangleBorders: 'border-l border-t',
     },
 };
 
 function Popover(_a) {
-    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 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, _d = _a.color, color = _d === void 0 ? 'black' : _d;
     var wrapperRef = useRef(null);
-    var _d = useDetectOutsideClick(wrapperRef, false), isOpen = _d[0], setIsOpen = _d[1];
+    var _e = useDetectOutsideClick(wrapperRef, false), isOpen = _e[0], setIsOpen = _e[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, className: className, style: style, zIndex: zIndex }))));
+        isOpen && (React.createElement(PopoverItem, { title: title, content: content, anchorRef: wrapperRef, direction: direction, className: className, style: style, zIndex: zIndex, color: color }))));
 }
 var PopoverItem = function (_a) {
-    var title = _a.title, content = _a.content, anchorRef = _a.anchorRef, direction = _a.direction, className = _a.className, style = _a.style, zIndex = _a.zIndex;
+    var title = _a.title, content = _a.content, anchorRef = _a.anchorRef, direction = _a.direction, className = _a.className, style = _a.style, zIndex = _a.zIndex, _b = _a.color, color = _b === void 0 ? 'black' : _b;
     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: __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" },
+    var _c = classConfig[direction], triangleContainer = _c.triangleContainer, triangleBorders = _c.triangleBorders;
+    var triangleThemeClasses = color === 'white'
+        ? "".concat(triangleBorders, " border-bia-grey bg-primary-white")
+        : 'bg-primary-black';
+    var colorClass = color === 'black'
+        ? 'bg-primary-black text-primary-white'
+        : 'bg-primary-white border border-bia-grey text-primary-black';
+    console.log('positionStyle', positionStyle);
+    return createPortal(React.createElement("div", { ref: popoverRef, style: __assign(__assign(__assign({}, positionStyle), style), { zIndex: zIndex }), className: "Bianic-popover absolute z-50 w-fit" },
+        React.createElement("div", { className: "text-bia-sm flex w-[245px] flex-col space-y-[5px] rounded-[4px] px-[20px] py-[17.5px] ".concat(colorClass, " ").concat(className) },
             React.createElement("div", { className: "mb-[5px] font-humnst777 text-[16px] font-bold leading-[19.42px]" }, title),
             React.createElement("div", { className: "break-words font-segoe text-[12px] font-normal" }, content)),
-        React.createElement("div", { className: "triangle absolute ".concat(triangleContainer) },
-            React.createElement("div", { className: "h-0 w-0 ".concat(triangleShape) }))), document.body);
+        React.createElement("div", { className: "triangle absolute ".concat(triangleContainer, " pointer-events-none") },
+            React.createElement("div", { className: "h-[7px] w-[7px] rotate-45 transform ".concat(triangleThemeClasses) }))), document.body);
 };
 Popover.defaultProps = {
     direction: 'top',
@@ -4556,21 +4609,20 @@ SidebarContainer.displayName = 'SidebarContainer';
 var SidebarMenu = function (_a) {
     var _b = _a.color, color = _b === void 0 ? 'margueriteblue-dark-30' : _b, children = _a.children, _c = _a.isMinimized, isMinimized = _c === void 0 ? false : _c, _d = _a.activeId, activeId = _d === void 0 ? undefined : _d, _e = _a.setActiveId, setActiveId = _e === void 0 ? function () { } : _e;
     var _f = useState(false), isAllExpanded = _f[0], setIsAllExpanded = _f[1];
-    var menuClass = "transition-sidebar-menu-menu h-[60px]";
     var minimizedMenuClass = isMinimized
         ? 'opacity-100 h-1 w-full delay-[600ms] duration-300 ease-[cubic-bezier(0.68,-0.1,0.32,2)]'
-        : 'opacity-0 w-0 duration-200';
+        : 'opacity-0 h-1 w-full duration-500 ease-[cubic-bezier(0.32,-1,0.68,1)]';
     return (React.createElement("div", null,
-        React.createElement("div", { className: "relative flex w-full text-bia-white ".concat(menuClass) },
+        React.createElement("div", { className: "relative flex h-[60px] w-full text-bia-white" },
             React.createElement("div", { className: "absolute left-0 top-[27.5px] px-[17px] ".concat(minimizedMenuClass) },
-                React.createElement("div", { className: "h-[1px] w-full bg-white" })),
-            React.createElement("div", { className: "absolute bottom-[11px] flex w-full justify-between pl-[78px] pr-[25px]" },
+                React.createElement("div", { className: "h-[1px] w-full bg-white opacity-35" })),
+            React.createElement("div", { className: cn('transition-sidebar-item absolute bottom-[11px] flex w-full justify-between pr-[25px]', isMinimized ? 'pl-[58px]' : 'pl-[78px]') },
                 React.createElement(Text, { variant: "small-text", className: cn('truncate text-bia-white delay-[400ms]', isMinimized
                         ? 'opacity-0 duration-300 ease-in-out'
                         : 'opacity-75 delay-1000 duration-700 ease-in-out') }, "Menu"),
                 React.createElement(ContextualButton, { onClick: function () { return setIsAllExpanded(function (prev) { return !prev; }); }, icon: React.createElement(TbChevronsDown, { className: cn('truncate text-bia-white delay-[400ms]', isMinimized
                             ? 'opacity-0 duration-300 ease-in-out'
-                            : 'opacity-100 delay-1000 duration-700 ease-in-out'), size: 18 }), className: "ml-auto opacity-50 hover:opacity-100 ".concat(isAllExpanded ? 'rotate-180' : '') }))),
+                            : 'opacity-100 delay-1000 duration-700 ease-in-out'), size: 18 }), className: "ml-auto opacity-50 duration-300 ease-in hover:opacity-100 ".concat(isAllExpanded ? 'rotate-180' : '') }))),
         Children.map(children, function (child) {
             return isValidElement(child)
                 ? cloneElement(child, {
@@ -5191,10 +5243,10 @@ var EmptyTable = function (_a) {
 
 var tableSizeOption = [10, 20, 50, 100, 999];
 var TableFooterController = function (_a) {
-    var currentPage = _a.currentPage, totalPages = _a.totalPages, pageSize = _a.pageSize, setCurrentPage = _a.setCurrentPage, setPageSize = _a.setPageSize, isLoading = _a.isLoading;
+    var currentPage = _a.currentPage, totalPages = _a.totalPages, pageSize = _a.pageSize, setCurrentPage = _a.setCurrentPage, setPageSize = _a.setPageSize, isLoading = _a.isLoading, _b = _a.size, size = _b === void 0 ? 'sm' : _b;
     // Table Button
     var tableSizeRef = useRef(null);
-    var _b = useState(false), isShownTableSizeDropdown = _b[0], setIsShownTableSizeDropdown = _b[1];
+    var _c = useState(false), isShownTableSizeDropdown = _c[0], setIsShownTableSizeDropdown = _c[1];
     var handlePageSizeChange = function (size) {
         setPageSize(size);
         setCurrentPage(1);
@@ -5204,19 +5256,22 @@ var TableFooterController = function (_a) {
         var displayValue = value === 999 ? 'All' : value;
         return React.createElement(DropdownItem, { key: value, content: displayValue, value: value });
     })));
-    return (React.createElement("div", { className: "table-controller-footer flex w-full justify-between gap-[5px] rounded-b-radius-lg border-t border-bia-grey bg-bia-grey-light-80 px-2.5 pb-[7px] pt-2" },
+    var paddingSize = size === 'md' ? 'py-2.5 pt-[9px]' : 'py-[3.5px] pt-[4.5px]';
+    return (React.createElement("div", { className: "table-controller-footer flex w-full justify-between gap-[5px] rounded-b-radius-lg border-t border-bia-grey bg-bia-grey-light-80 px-2.5 ".concat(paddingSize) },
         React.createElement("div", { className: "action-container flex gap-[5px]" }, totalPages > 0 && (React.createElement(PaginationBar, { size: "sm", currentPage: currentPage, totalPages: totalPages, onPageChange: setCurrentPage, position: 'center' }))),
         React.createElement(Button, { ref: tableSizeRef, label: pageSizeDisplay, minWidth: 0, size: "sm", iconRight: React.createElement(TbChevronDown, { size: 14 }), onClick: function () { return setIsShownTableSizeDropdown(function (oldState) { return !oldState; }); }, disabled: isLoading, className: "w-fit" }),
         tableSizeDropdown));
 };
 
 var TableHeaderController = function (_a) {
-    var buttonActions = _a.buttonActions, totalData = _a.totalData, firstIndex = _a.firstIndex, lastIndex = _a.lastIndex;
+    var _b = _a.size, size = _b === void 0 ? 'sm' : _b, buttonActions = _a.buttonActions, totalData = _a.totalData, firstIndex = _a.firstIndex, lastIndex = _a.lastIndex;
     var isShowHelperText = totalData || firstIndex || lastIndex;
-    return (React.createElement("div", { className: "table-controller-header flex w-full justify-between rounded-t-radius-lg border-b border-bia-grey bg-bia-grey-light-80 px-2.5 pb-[7px] pt-2" },
+    var paddingSize = size === 'md' ? 'py-[13px] pt-[14px] ' : 'py-[7px] pt-2';
+    var textSize = size === 'md' ? 'normal-text' : 'small-text';
+    return (React.createElement("div", { className: "table-controller-header flex w-full justify-between rounded-t-radius-lg border-b border-bia-grey bg-bia-grey-light-80 px-2.5 ".concat(paddingSize) },
         React.createElement("div", { className: "action-container flex grow gap-[5px] pe-2.5" }, buttonActions && (buttonActions === null || buttonActions === void 0 ? void 0 : buttonActions.map(function (button) { return button; }))),
         isShowHelperText && (React.createElement("div", { className: "flex max-h-[22px] items-center font-segoe" },
-            React.createElement(Text, { variant: "small-text", className: "text-bia-coolgrey" },
+            React.createElement(Text, { variant: textSize, className: "text-bia-coolgrey" },
                 "View ",
                 lastIndex === 0 ? 0 : firstIndex,
                 " - ",
@@ -5478,4 +5533,4 @@ var useTableDataHandler = function (initialData, options) {
     };
 };
 
-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, Rhombus as BCRhombus, SelectAllAdd as BCSelectAllAdd, SelectAllRemove as BCSelectAllRemove, Spinner$1 as BCSpinner, Stack as BCStack, VirtualPort as BCVirtualPort, Badge, Banner, BlockLoading, Brand, Breadcrumb, Button, ButtonApp, Card, Checkbox, Color, ContextualButton, Countdown, DatePicker, Display, Divider, DropdownContainer, DropdownItem, EmptyTable, FileTree, FormGroup, FormGroupButton, FormGroupLabel, FormLabel, Heading, InfoPanel, Link, LiveSearch, MenuContainer, MenuItem, Modal, MonospaceBadge, Notification, P, PaginationBar, PickerCalendar, Pills, Popover, ProgressBar, ProgressCircle, Radio, ResizeableDiv, SegmentButtonGroup, SegmentButtonItem, SelectInput, SidebarContainer, SidebarItem, SidebarMenu, SidebarProfile, Slider, Spinner, Tab, TabMenu, Table, TableBody, TableCell, TableFooterController, TableHead, TableHeaderController, TableRow, TableSearchInput, TagLabel, Text, TextArea, TextInput, Toaster, Toggle, Tooltip, TreeItem, StepperItem as VerticalStepper, Window, getRelativeTime, useFileTree, useTableDataHandler };
+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, Rhombus as BCRhombus, SelectAllAdd as BCSelectAllAdd, SelectAllRemove as BCSelectAllRemove, Spinner$1 as BCSpinner, Stack as BCStack, Unlinked as BCUnlinked, VirtualPort as BCVirtualPort, Badge, Banner, BlockLoading, Brand, Breadcrumb, Button, ButtonApp, Card, Checkbox, Color, ContextualButton, Countdown, DatePicker, Display, Divider, DropdownContainer, DropdownItem, EmptyTable, FileTree, FormGroup, FormGroupButton, FormGroupLabel, FormLabel, Heading, InfoPanel, Link, LiveSearch, MenuContainer, MenuItem, Modal, MonospaceBadge, Notification, P, PaginationBar, PickerCalendar, Pills, Popover, ProgressBar, ProgressCircle, Radio, ResizeableDiv, SegmentButtonGroup, SegmentButtonItem, SelectInput, SidebarContainer, SidebarItem, SidebarMenu, SidebarProfile, Slider, Spinner, Tab, TabMenu, Table, TableBody, TableCell, TableFooterController, TableHead, TableHeaderController, TableRow, TableSearchInput, TagLabel, Text, TextArea, TextInput, Toaster, Toggle, Tooltip, TreeItem, StepperItem as VerticalStepper, Window, getRelativeTime, useFileTree, useTableDataHandler };