bianic-ui 1.13.2 → 1.14.1

package/dist/cjs/index.js

@@ -273,12 +273,9 @@ var useDetectOutsideClick = function (ref, initialState, ignoreRef, event) {
             // If the active element exists and is clicked outside of
             if (ignoreRef &&
                 ignoreRef.current &&
-                ignoreRef.current.contains(event.target)) {
-                console.log('enter');
-            }
+                ignoreRef.current.contains(event.target)) ;
             else if (ref.current !== null &&
                 !ref.current.contains(event.target)) {
-                console.log('close');
                 setIsActive(!isActive);
             }
         };
@@ -426,7 +423,7 @@ var radiusConfig$1 = {
         tn: 'rounded-radius-full focus-visible:rounded-radius-full',
     },
 };
-var sizeConfig$c = {
+var sizeConfig$d = {
     lg: 'py-[10.5px] h-[48px] flex items-center justify-center gap-[10px] text-size-md ',
     md: 'py-[9px] h-[40px] flex items-center justify-center gap-[5px] text-size-base ',
     sm: 'py-[6px] h-[30px] flex items-center justify-center gap-[5px] text-size-sm ',
@@ -445,10 +442,10 @@ var minWidthConfig$1 = {
     tn: 'min-w-[64px]',
 };
 var iconOnlySizeConfig$1 = {
-    lg: 'py-[13px] flex items-center justify-center gap-[10px]',
-    md: 'py-[11px] flex items-center justify-center gap-[5px]',
-    sm: 'py-[8px] flex items-center justify-center gap-[5px] ',
-    tn: 'py-[4px] flex items-center justify-center gap-[3px]',
+    lg: 'py-[13px] h-[48px] h-[48px] flex items-center justify-center gap-[10px]',
+    md: 'py-[11px] h-[40px] w-[40px] flex items-center justify-center gap-[5px]',
+    sm: 'py-[8px] h-[30px] h-[30px] flex items-center justify-center gap-[5px] ',
+    tn: 'py-[4px] h-[22px] h-[22px] flex items-center justify-center gap-[3px]',
 };
 var shadow = 'shadow-[0px_6px_18px_1px_rgba(188,199,237,0.5)] disabled:shadow-none active:shadow-none';
 var variantConfig$2 = {
@@ -464,7 +461,7 @@ var variantConfig$2 = {
     '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",
     'info-outlined': "text-bia-teal border-bia-teal bg-primary-white border-solid border active:text-bia-teal-active active:bg-bia-teal-pastel active:border-bia-teal-active active:outline-none disabled:border-[1px]disabled:border-bia-teal-light-50  disabled:text-bia-teal-light-50 hover:text-bia-teal-hover hover:border-bia-teal-hover focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:outline-[3px] focus-visible:rounded-md focus-visible:outline-bia-teal-light-50 focus-visible:border-none",
-    'success-outlined': "text-bia-green bg-primary-white bg-primary-white border-solid border border-bia-greenactive:text-bia-green-active active:bg-bia-green-pastel active:border-bia-green-active hover:text-bia-green-hover hover:border-bia-green-hover  disabled:border-[1px] disabled:border-bia-green-light-50 disabled:text-bia-green-light-50 focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:outline-[3px] focus-visible:rounded-md focus-visible:outline-bia-green-light-50 focus-visible:border-none ",
+    'success-outlined': "text-bia-green bg-primary-white bg-primary-white border-solid border border-bia-green active:text-bia-green-active active:bg-bia-green-pastel active:border-bia-green-active hover:text-bia-green-hover hover:border-bia-green-hover  disabled:border-[1px] disabled:border-bia-green-light-50 disabled:text-bia-green-light-50 focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:outline-[3px] focus-visible:rounded-md focus-visible:outline-bia-green-light-50 focus-visible:border-none ",
     'warning-outlined': "text-bia-orange bg-primary-white border-solid border border-bia-orange active:text-bia-orange-dark-10 active:bg-bia-orange-light-90 active:border-bia-orange-active active:outline-none hover:text-bia-orange-hover hover:border-bia-orange-hover disabled:border-[1px]disabled:border-bia-orange-light-50 disabled:text-bia-orange-light-50 focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:outline-[3px] focus-visible:rounded-md focus-visible:outline-bia-orange-light-50 focus-visible:border-none",
     'danger-outlined': "text-bia-red border-solid border border-bia-red bg-primary-white active:text-bia-red-dark-10 active:border-bia-red-active active:bg-bia-red-light-90 active:border-bia-red-disabled hover:text-bia-red-hover hover:border-bia-red-hover disabled:border-[1px]disabled:border-bia-red-light-50 disabled:text-bia-red-light-50 focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:outline-[3px] focus-visible:rounded-md focus-visible:outline-bia-red-light-50 focus-visible:border-none \n  ",
     'form-group': "text-bia-black border-solid border border-bia-grey-dark-10 bg-bia-white active:bg-bia-grey-light-20 hover:bg-bia-grey-light-80 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-grey-dark-10 focus-visible:border-none \n  ",
@@ -504,10 +501,10 @@ function Button(_a) {
     }
     var sizingRules;
     if (variant.includes('link')) {
-        sizingRules = "".concat(sizeConfig$c[validatedSize]);
+        sizingRules = "".concat(sizeConfig$d[validatedSize]);
     }
     else {
-        sizingRules = "".concat(sizeConfig$c[validatedSize], " ").concat(sidePaddingConfig[validatedSize]);
+        sizingRules = "".concat(sizeConfig$d[validatedSize], " ").concat(sidePaddingConfig[validatedSize]);
     }
     var sizeClass = label || variant === 'form-group'
         ? " ".concat(minWidthRules, " ").concat(sizingRules)
@@ -1489,7 +1486,7 @@ Breadcrumb.defaultProps = {
     selected: false,
 };
 
-var colorConfig$1 = {
+var colorConfig$2 = {
     green: {
         default: 'bg-bia-verdantgreen-dark-20 hover:bg-bia-verdantgreen-dark-10 active:bg-bia-verdantgreen-dark-40 text-primary-white disabled:bg-bia-verdantgreen-dark-20 disabled:text-primary-white/50 disabled:cursor-default',
         active: 'bg-bia-verdantgreen-dark-40 text-primary-white',
@@ -1503,7 +1500,7 @@ var colorConfig$1 = {
 var ButtonApp = function (_a) {
     _a.icon; _a.isNotified; var _c = _a.isActive, isActive = _c === void 0 ? false : _c, disabled = _a.disabled, _d = _a.color, color = _d === void 0 ? 'green' : _d, label = _a.label, extended = _a.extended, rest = __rest(_a, ["icon", "isNotified", "isActive", "disabled", "color", "label", "extended"]);
     var buttonState = isActive ? 'active' : 'default';
-    return (React.createElement("button", __assign({ className: "button-app flex items-center justify-center px-[10px] pb-[8.3px] pt-[8.5px] font-arial text-size-tiny ".concat(colorConfig$1[color][buttonState], " ").concat(extended), type: "button", disabled: disabled }, rest), label));
+    return (React.createElement("button", __assign({ className: "button-app flex items-center justify-center px-[10px] pb-[8.3px] pt-[8.5px] font-arial text-size-tiny ".concat(colorConfig$2[color][buttonState], " ").concat(extended), type: "button", disabled: disabled }, rest), label));
 };
 
 var textColorConfig = {
@@ -1793,7 +1790,147 @@ MenuItem.defaultProps = {
     onClick: function () { },
 };
 
-var sizeConfig$b = {
+var classConfig$1 = {
+    top: {
+        tooltipContainer: 'bottom-[calc(100%+5px)]  left-1/2  -translate-x-1/2',
+        triangleContainer: 'left-0 -bottom-[4px] flex justify-center w-full h-auto',
+        triangleShape: 'border-l-[8px] border-l-transparent border-t-[5px] border-t-primary-black border-r-[8px] border-r-transparent',
+    },
+    right: {
+        tooltipContainer: 'left-[calc(100%+5px)] top-1/2 -translate-y-1/2',
+        triangleContainer: '-left-[4px] bottom-0 flex items-center w-auto h-full',
+        triangleShape: 'border-t-[8px] border-t-transparent border-r-[5px] border-r-primary-black border-b-[8px] border-b-transparent',
+    },
+    bottom: {
+        tooltipContainer: 'top-[calc(100%+5px)]  left-1/2  -translate-x-1/2',
+        triangleContainer: 'left-0 -top-[4px] flex justify-center w-full h-auto',
+        triangleShape: 'border-l-[8px] border-l-transparent border-b-[5px] border-b-primary-black border-r-[8px] border-r-transparent',
+    },
+    left: {
+        tooltipContainer: 'right-[calc(100%+5px)] top-1/2 -translate-y-1/2',
+        triangleContainer: '-right-[4px] bottom-0 flex items-center w-auto h-full',
+        triangleShape: 'border-t-[8px] border-t-transparent border-l-[5px] border-l-primary-black border-b-[8px] border-b-transparent',
+    },
+    'top-right': {
+        tooltipContainer: 'bottom-[calc(100%+5px)] right-0',
+        triangleContainer: 'left-0 -bottom-[4px] flex justify-center w-full h-auto',
+        triangleShape: 'border-l-[8px] border-l-transparent border-t-[5px] border-t-primary-black border-r-[8px] border-r-transparent',
+    },
+    'top-left': {
+        tooltipContainer: 'bottom-[calc(100%+5px)] left-0',
+        triangleContainer: 'left-0 -bottom-[4px] flex justify-center w-full h-auto',
+        triangleShape: 'border-l-[8px] border-l-transparent border-t-[5px] border-t-primary-black border-r-[8px] border-r-transparent',
+    },
+    'bottom-right': {
+        tooltipContainer: 'top-[calc(100%+5px)]  right-0',
+        triangleContainer: 'left-0 -top-[4px] flex justify-center w-full h-auto',
+        triangleShape: 'border-l-[8px] border-l-transparent border-b-[5px] border-b-primary-black border-r-[8px] border-r-transparent',
+    },
+    'bottom-left': {
+        tooltipContainer: 'top-[calc(100%+5px)]  left-0',
+        triangleContainer: 'left-0 -top-[4px] flex justify-center w-full h-auto',
+        triangleShape: 'border-l-[8px] border-l-transparent border-b-[5px] border-b-primary-black border-r-[8px] border-r-transparent',
+    },
+};
+
+function Tooltip(props) {
+    var children = props.children, content = props.content, delay = props.delay, _a = props.direction, direction = _a === void 0 ? 'top' : _a, _b = props.maxWidth, maxWidth = _b === void 0 ? undefined : _b;
+    var timeout;
+    var _c = React.useState(false), active = _c[0], setActive = _c[1];
+    var showTip = function () {
+        timeout = setTimeout(function () {
+            setActive(true);
+        }, delay || 400);
+    };
+    var hideTip = function () {
+        clearInterval(timeout);
+        setActive(false);
+    };
+    var _d = classConfig$1[direction], tooltipContainer = _d.tooltipContainer; _d.triangleContainer; _d.triangleShape;
+    var tooltipContainerRef = React.useRef(null);
+    var _e = React.useState({
+        maxWidth: maxWidth + 'px',
+        whiteSpace: 'nowrap',
+    }), tooltipContainerStyle = _e[0], setTooltipContainerStyle = _e[1];
+    var tooltipContainerElement = tooltipContainerRef === null || tooltipContainerRef === void 0 ? void 0 : tooltipContainerRef.current;
+    var scrollWidth = tooltipContainerElement === null || tooltipContainerElement === void 0 ? void 0 : tooltipContainerElement.scrollWidth; // Mendapatkan lebar konten aktual
+    var offsetWidth = tooltipContainerElement === null || tooltipContainerElement === void 0 ? void 0 : tooltipContainerElement.offsetWidth;
+    var offsetHeight = tooltipContainerElement === null || tooltipContainerElement === void 0 ? void 0 : tooltipContainerElement.offsetHeight;
+    React.useEffect(function () {
+        if (scrollWidth && offsetWidth) {
+            var maxWidthNumber = Number(maxWidth);
+            var isMultiLine = offsetHeight > 23; // 23 pixels is the approximate height of one line of text
+            // Tooltip Width and Whitespace Determination Rules:
+            // 1. Default Condition:
+            //    - width: fit-content
+            //    - whiteSpace: nowrap
+            // 2. When maxWidth is Set:
+            //    * Text Exceeds maxWidth:
+            //      - width: maxWidth
+            //      - whiteSpace: normal
+            //    * Text Equals maxWidth (Multi-line):
+            //      - width: maxWidth
+            //      - whiteSpace: normal
+            //    * Text Less Than maxWidth:
+            //      - width: fit-content
+            //      - whiteSpace: nowrap
+            var newWidth_1 = 'fit-content';
+            var newWhiteSpace_1 = 'nowrap';
+            if (scrollWidth > maxWidthNumber ||
+                (offsetWidth === maxWidthNumber && isMultiLine)) {
+                newWidth_1 = maxWidthNumber + 'px';
+                newWhiteSpace_1 = 'normal';
+            }
+            setTooltipContainerStyle(function (prev) { return (__assign(__assign({}, prev), { width: newWidth_1, whiteSpace: newWhiteSpace_1 })); });
+        }
+    }, [content, maxWidth, scrollWidth, offsetHeight]);
+    return (React.createElement("div", { className: "tooltip-wrapper relative inline-flex h-fit w-fit flex-col", onMouseEnter: showTip, onMouseLeave: hideTip },
+        children,
+        active && (React.createElement("div", { className: "tooltip-container break-word absolute z-50 inline-block break-all rounded-[4px] bg-primary-black px-[7px] py-[4px] text-size-sm text-primary-white ".concat(tooltipContainer), style: tooltipContainerStyle, ref: tooltipContainerRef }, content))));
+}
+Tooltip.defaultProps = {
+    delay: 400,
+    direction: 'top',
+    maxWidth: '300',
+};
+Tooltip.defaultProps = {};
+
+var FormLabel = function (_a) {
+    var children = _a.children, className = _a.className, htmlFor = _a.htmlFor, readOnly = _a.readOnly, required = _a.required;
+    var labelClass = readOnly ? 'pointer-events-none' : '';
+    return (React.createElement(Tooltip, { content: "Required", delay: 2000, direction: "right" },
+        React.createElement("label", { htmlFor: htmlFor, className: "bianic-form-label group/formlabel text-xs font-semibold ".concat(labelClass, " ").concat(className) },
+            children,
+            required && (React.createElement("span", { className: "p-1 text-bia-coolgrey group-hover/form:text-bia-red group-hover/formlabel:text-bia-red" }, "*")))));
+};
+FormLabel.defaultProps = {
+    className: '',
+    htmlFor: undefined,
+    required: false,
+    readOnly: false,
+};
+
+function PasswordIcon(_a) {
+    var isShow = _a.isShow, _b = _a.showHandler, showHandler = _b === void 0 ? function () { } : _b, iconSize = _a.iconSize, disabled = _a.disabled;
+    var iconColor = disabled ? '#8b8ba6' : '#5E5EEA';
+    if (isShow) {
+        return (React.createElement(TbEye, { onClick: function () { return showHandler(false); }, style: {
+                fontSize: iconSize,
+                color: iconColor,
+            } }));
+    }
+    return (React.createElement(TbEyeOff, { onClick: function () { return showHandler(true); }, style: { fontSize: iconSize, color: iconColor } }));
+}
+
+function ValidationIcon(_a) {
+    var isValid = _a.isValid, iconSize = _a.iconSize;
+    if (isValid) {
+        return (React.createElement(TbCheck, { className: "text-bia-green", style: { fontSize: iconSize } }));
+    }
+    return React.createElement(TbX, { className: "text-bia-red", style: { fontSize: iconSize } });
+}
+
+var sizeConfig$c = {
     md: {
         fieldSize: 'text-size-base p-2.5 font-[350] h-10',
         iconPosition: 'right-[10px]',
@@ -1828,34 +1965,14 @@ var styleConfig = {
     },
 };
 
-function ValidationIcon(_a) {
-    var isValid = _a.isValid, iconSize = _a.iconSize;
-    if (isValid) {
-        return (React.createElement(TbCheck, { className: "text-bia-green", style: { fontSize: iconSize } }));
-    }
-    return React.createElement(TbX, { className: "text-bia-red", style: { fontSize: iconSize } });
-}
-
-function PasswordIcon(_a) {
-    var isShow = _a.isShow, _b = _a.showHandler, showHandler = _b === void 0 ? function () { } : _b, iconSize = _a.iconSize, disabled = _a.disabled;
-    var iconColor = disabled ? '#8b8ba6' : '#5E5EEA';
-    if (isShow) {
-        return (React.createElement(TbEye, { onClick: function () { return showHandler(false); }, style: {
-                fontSize: iconSize,
-                color: iconColor,
-            } }));
-    }
-    return (React.createElement(TbEyeOff, { onClick: function () { return showHandler(true); }, style: { fontSize: iconSize, color: iconColor } }));
-}
-
 function TextInput(_a) {
     var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, icon = _a.icon, _c = _a.id, id = _c === void 0 ? '' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, _e = _a.isValid, isValid = _e === void 0 ? null : _e, label = _a.label, _f = _a.placeholder, placeholder = _f === void 0 ? '' : _f, _g = _a.readOnly, readOnly = _g === void 0 ? false : _g, _h = _a.required, required = _h === void 0 ? false : _h, _j = _a.variant, variant = _j === void 0 ? 'text' : _j, _k = _a.value, value = _k === void 0 ? undefined : _k, _l = _a.onChange, onChange = _l === void 0 ? function () { } : _l, _m = _a.maxLength, maxLength = _m === void 0 ? undefined : _m, _o = _a.inputClassName, inputClassName = _o === void 0 ? '' : _o; _a.isFlatRight; var actionElement = _a.actionElement, _q = _a.autoComplete, autoComplete = _q === void 0 ? 'off' : _q, ref = _a.ref, props = __rest(_a, ["descText", "disabled", "icon", "id", "size", "isValid", "label", "placeholder", "readOnly", "required", "variant", "value", "onChange", "maxLength", "inputClassName", "isFlatRight", "actionElement", "autoComplete", "ref"]);
     var isTransparent = variant.includes('transparent');
     var _r = React.useState(false), isShow = _r[0], setIsShow = _r[1];
     var _s = styleConfig[variant], fieldStyle = _s.fieldStyle, iconStyle = _s.iconStyle;
     var _t = isTransparent
-        ? __assign(__assign({}, sizeConfig$b[size]), { iconPosition: "right-0 ", fieldSize: sizeConfig$b[size].fieldSize +
-                " pe-[".concat(9 + sizeConfig$b[size].iconSize, "px]") }) : sizeConfig$b[size], iconSize = _t.iconSize, fieldSize = _t.fieldSize, iconPosition = _t.iconPosition;
+        ? __assign(__assign({}, sizeConfig$c[size]), { iconPosition: "right-0 ", fieldSize: sizeConfig$c[size].fieldSize +
+                " pe-[".concat(9 + sizeConfig$c[size].iconSize, "px]") }) : sizeConfig$c[size], iconSize = _t.iconSize, fieldSize = _t.fieldSize, iconPosition = _t.iconPosition;
     var borderStyle = isTransparent
         ? 'border-transparent bg-transparent' // customize border rule for transparent variant
         : 'border border-bia-grey-dark-10 bg-primary-white';
@@ -1888,11 +2005,8 @@ function TextInput(_a) {
     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 labelStatus = readOnly ? 'read-only:pointer-events-none' : '';
-    return (React.createElement("div", { className: "bianic-text-input-container bianic-fgc-container flex w-full flex-col gap-y-2 text-bia-black" },
-        label && (React.createElement("label", { htmlFor: id, className: "bianic-text-input-label text-xs font-semibold ".concat(labelStatus) },
-            label,
-            required && React.createElement("span", { className: "p-1 text-bia-red" }, "*"))),
+    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: "absolute inset-y-0 flex items-center pl-3 ".concat(actionElement ? '' : iconStyle, " ").concat(iconPosition, " ").concat(iconSizing) }, iconElement)),
@@ -1921,7 +2035,7 @@ TextInput.defaultProps = {
 };
 
 // Desc: Radio button size configuration
-var sizeConfig$a = {
+var sizeConfig$b = {
     md: {
         checkSize: 'w-[22px] h-[22px]',
         labelSize: 'text-size-base',
@@ -1936,7 +2050,7 @@ var sizeUnion$4 = ['md', 'sm'];
 function Radio(_a) {
     var label = _a.label, _b = _a.size, size = _b === void 0 ? 'md' : _b, id = _a.id, _c = _a.onClick, onClick = _c === void 0 ? function () { } : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.checked, checked = _e === void 0 ? false : _e;
     var validatedSize = validUnion(size, sizeUnion$4);
-    var _f = sizeConfig$a[validatedSize], checkSize = _f.checkSize, labelSize = _f.labelSize;
+    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 }),
@@ -1952,15 +2066,6 @@ Radio.defaultProps = {
     checked: false,
 };
 
-var sizeConfig$9 = {
-    md: {
-        inputClass: 'text-size-base font-[350] min-h-10',
-    },
-    sm: {
-        inputClass: 'text-size-sm min-h-[30px]',
-    },
-};
-
 var ResizeIcon = function (_a) {
     var className = _a.className;
     return (React.createElement("svg", { width: "9", height: "9", viewBox: "0 0 9 9", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "bianic-resize-icon ".concat(className) },
@@ -1972,16 +2077,23 @@ var ResizeIcon = function (_a) {
         React.createElement("line", { y1: "-0.5", x2: "3.77124", y2: "-0.5", transform: "matrix(0.707106 -0.707108 0.707106 0.707108 6.33398 9)", stroke: "black", "stroke-opacity": "0.1" })));
 };
 
+var sizeConfig$a = {
+    md: {
+        inputClass: 'text-size-base font-[350] min-h-10',
+    },
+    sm: {
+        inputClass: 'text-size-sm min-h-[30px]',
+    },
+};
+
 function TextArea(_a) {
     var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, id = _a.id, _c = _a.size, size = _c === void 0 ? 'md' : _c, label = _a.label, _d = _a.placeholder, placeholder = _d === void 0 ? '' : _d, required = _a.required, rows = _a.rows, _e = _a.maxLength, maxLength = _e === void 0 ? undefined : _e, value = _a.value, _f = _a.readOnly, readOnly = _f === void 0 ? false : _f, _g = _a.autoComplete, autoComplete = _g === void 0 ? 'off' : _g, props = __rest(_a, ["descText", "disabled", "id", "size", "label", "placeholder", "required", "rows", "maxLength", "value", "readOnly", "autoComplete"]);
     var inputRow = rows !== null && rows !== void 0 ? rows : 4;
-    var inputClass = sizeConfig$9[size].inputClass;
+    var inputClass = sizeConfig$a[size].inputClass;
     var remainWords = maxLength ? maxLength - (value ? value.length : 0) : 0;
-    return (React.createElement("div", { className: "field-group flex w-full flex-col" },
-        React.createElement("label", { htmlFor: id, className: "label pb-2 text-xs font-semibold read-only:pointer-events-none" },
-            label,
-            required && React.createElement("span", { className: "p-1 text-bia-red" }, "*")),
-        React.createElement("div", { className: "relative h-full w-full min-w-[250px]" },
+    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(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("div", { className: "desc flex justify-between gap-1 text-xs text-primary-cool" },
@@ -2005,7 +2117,7 @@ TextArea.defaultProps = {
     value: '',
 };
 
-var sizeConfig$8 = {
+var sizeConfig$9 = {
     md: {
         checkClass: 'w-[22px] h-[22px]',
         labelClass: 'text-size-base font-[350]',
@@ -2019,7 +2131,7 @@ var sizeConfig$8 = {
 var sizeUnion$3 = ['md', 'sm'];
 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, props = __rest(_a, ["disabled", "id", "size", "label", "onChange"]);
-    var _e = sizeConfig$8[validUnion(size, sizeUnion$3)], checkClass = _e.checkClass, labelClass = _e.labelClass;
+    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)),
@@ -2037,7 +2149,7 @@ Checkbox.defaultProps = {
     onChange: function () { },
 };
 
-var sizeConfig$7 = {
+var sizeConfig$8 = {
     md: {
         searchSize: 'text-size-base p-2.5 font-[350] h-10',
         iconSize: 'right-[10px] text-[18px]',
@@ -2048,7 +2160,7 @@ var sizeConfig$7 = {
     },
 };
 
-var sizeConfig$6 = {
+var sizeConfig$7 = {
     md: {
         container: 'text-size-base font-[350] py-[3px] first:pt-[8px] last:pb-[8px]',
         item: 'min-h-[34px] p-2.5',
@@ -2066,7 +2178,7 @@ function CustomDropdownItem(_a) {
     var _f = React.useState(false), isHoveredSubMenu = _f[0], setIsHoveredSubMenu = _f[1];
     var isOpenDropdown = isHovered || isHoveredSubMenu;
     var selectedClass = isSelected ? 'font-semibold' : 'font-normal';
-    var _g = sizeConfig$6[size], containerClass = _g.container, item = _g.item;
+    var _g = sizeConfig$7[size], containerClass = _g.container, item = _g.item;
     var itemClass = "".concat(item, " ").concat(selectedClass, " ").concat(className);
     var isExistSubDropdown = options.length !== 0;
     return (React.createElement("div", { className: "relative w-full focus-visible:outline-bia-blue-light-50 ".concat(containerClass), tabIndex: 0, role: "button", onClick: function (e) { return onClick(e); }, onMouseEnter: function () { return setisHovered(true); }, onMouseLeave: function () { return setisHovered(false); }, onKeyDown: function () { } },
@@ -2093,7 +2205,7 @@ function DefaultDropdownItem(_a) {
     var _g = React.useState(false), isHoveredSubMenu = _g[0], setIsHoveredSubMenu = _g[1];
     var isOpenDropdown = isHovered || isHoveredSubMenu;
     var selectedClass = isSelected ? 'font-semibold' : 'font-normal';
-    var _h = sizeConfig$6[size], containerClass = _h.container, item = _h.item;
+    var _h = sizeConfig$7[size], containerClass = _h.container, item = _h.item;
     var itemClass = "".concat(item, " ").concat(selectedClass, " ").concat(className);
     var isExistSubDropdown = options.length !== 0;
     return (React.createElement("div", { className: "relative w-full focus-visible:outline-bia-blue-light-50 ".concat(containerClass), tabIndex: 0, role: "button", onClick: function (e) { return onClick(e); }, onMouseEnter: function () { return setisHovered(true); }, onMouseLeave: function () { return setisHovered(false); }, onKeyDown: function () { } },
@@ -2204,7 +2316,7 @@ function SelectInput(_a) {
     var _k = React.useState(false), isOpen = _k[0], setIsOpen = _k[1];
     var _l = React.useState(false), isDropUp = _l[0], setIsDropUp = _l[1];
     var validatedSize = validUnion(size, sizeUnion$2);
-    var _m = sizeConfig$7[validatedSize], searchSize = _m.searchSize, iconSize = _m.iconSize;
+    var _m = sizeConfig$8[validatedSize], searchSize = _m.searchSize, iconSize = _m.iconSize;
     var inputRef = React.useRef(null);
     var dropdownContRef = React.useRef(null);
     var handleOutsideClick = function (e) {
@@ -2298,7 +2410,7 @@ SelectInput.defaultProps = {
     setSelected: function () { },
 };
 
-var sizeConfig$5 = {
+var sizeConfig$6 = {
     md: {
         iconClass: 'right-[10px]',
         iconSize: '18',
@@ -2317,7 +2429,7 @@ function LiveSearch(_a) {
     var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, id = _a.id, _c = _a.size, size = _c === void 0 ? 'md' : _c, label = _a.label, placeholder = _a.placeholder, _d = _a.required, required = _d === void 0 ? false : _d, options = _a.options, setValue = _a.setValue, value = _a.value, _e = _a.readOnly, readOnly = _e === void 0 ? false : _e, _f = _a.onChangeText, onChangeText = _f === void 0 ? function () { } : _f, _g = _a.onClickDropdown, onClickDropdown = _g === void 0 ? function () { } : _g, _h = _a.autoComplete, autoComplete = _h === void 0 ? 'off' : _h, _j = _a.children, children = _j === void 0 ? undefined : _j, _k = _a.dropContProps, dropContProps = _k === void 0 ? { className: undefined } : _k;
     var _l = React.useState(false), isOpen = _l[0], setIsOpen = _l[1];
     var _m = React.useState(value.label || ''), searchTerm = _m[0], setSearchTerm = _m[1];
-    var _o = sizeConfig$5[size], iconClass = _o.iconClass, iconSize = _o.iconSize, inputClass = _o.inputClass;
+    var _o = sizeConfig$6[size], iconClass = _o.iconClass, iconSize = _o.iconSize, inputClass = _o.inputClass;
     var dropContClassName = dropContProps.className, restDropContProps = __rest(dropContProps, ["className"]);
     var isValueExist = value && value.label !== undefined && value.label !== '';
     var inputRef = React.useRef(null);
@@ -2424,10 +2536,8 @@ function LiveSearch(_a) {
             React.Children.toArray(renderedChildren).filter(Boolean).length > 0; // Should always be true if there are initial children
     }
     var dropdownPosition = isDropUp ? 'bottom-full' : 'top-full';
-    return (React.createElement("div", { className: "bianic-livesearch field-group flex w-full flex-col gap-y-2", ref: inputRef },
-        React.createElement("label", { htmlFor: id, className: "bianic-livesearch-label text-xs font-semibold read-only:pointer-events-none" },
-            label,
-            required && React.createElement("span", { className: "p-1 text-bia-red" }, "*")),
+    return (React.createElement("div", { className: "bianic-livesearch field-group group/form flex w-full flex-col gap-y-2 ", ref: inputRef },
+        label && (React.createElement(FormLabel, { htmlFor: id, required: required, readOnly: readOnly }, label)),
         React.createElement("div", { className: "group relative w-full" },
             React.createElement("input", { className: "bianic-livesearch-input field peer w-full rounded border  border-bia-grey-dark-10 bg-primary-white read-only:pointer-events-none read-only:border-bia-grey-disabled focus-visible:outline-none enabled:hover:rounded-b-none enabled:hover:border-b-bia-blue enabled:focus:rounded-b-none enabled:focus:border-b-bia-blue disabled:border-bia-grey-dark-10 disabled:bg-bia-grey-light-10 disabled:text-bia-coolgrey ".concat(inputClass), onClick: function () { return setIsOpen(!isOpen); }, value: searchTerm, required: required, disabled: disabled, id: id, placeholder: placeholder, onChange: function (e) {
                     onChangeText(e);
@@ -2452,7 +2562,7 @@ function LiveSearch(_a) {
                 ? renderedChildren
                 : // If no results and searchTerm is present
                     searchTerm.length > 0 && (React.createElement(DropdownItem, { content: React.createElement("div", { className: "px-4 py-2 text-gray-500" }, "Tidak ada hasil ditemukan.") }))))),
-        React.createElement("span", { className: "desc text-xs text-primary-cool" }, descText)));
+        descText && (React.createElement("span", { className: "desc text-xs text-primary-cool" }, descText))));
 }
 LiveSearch.defaultProps = {
     descText: '',
@@ -2468,7 +2578,7 @@ LiveSearch.defaultProps = {
     readonly: false,
 };
 
-var sizeConfig$4 = {
+var sizeConfig$5 = {
     md: {
         containerSize: 'w-[42px] h-[22px]',
         checkSize: 'p-2',
@@ -2483,7 +2593,7 @@ var sizeConfig$4 = {
 
 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$4[size], containerSize = _h.containerSize, checkSize = _h.checkSize, labelClass = _h.labelClass;
+    var _h = sizeConfig$5[size], containerSize = _h.containerSize, checkSize = _h.checkSize, labelClass = _h.labelClass;
     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" }),
@@ -2509,7 +2619,7 @@ var roundedConfig = {
     sm: 'first:rounded-l-radius-sm last:rounded-r-radius-sm',
     tn: 'first:rounded-l-radius-tn last:rounded-r-radius-tn',
 };
-var sizeConfig$3 = {
+var sizeConfig$4 = {
     lg: 'text-size-md leading-[23.94px] px-[13px] py-[11px] ',
     md: 'text-size-base leading-[21px] px-[11px] py-[8.5px] ',
     sm: 'text-size-sm leading-[15.96px] px-[7px] py-[6px] ',
@@ -2532,8 +2642,8 @@ function SegmentButtonItem(_a) {
     var className = _a.className, _b = _a.selected, selected = _b === void 0 ? false : _b, size = _a.size, children = _a.children, disabled = _a.disabled, _c = _a.isfitContent, isfitContent = _c === void 0 ? false : _c, onClick = _a.onClick;
     var isSelected = selected ? 'selected' : 'notSelected';
     var sizingStyle = isfitContent
-        ? "".concat(sizeConfig$3[size], " ").concat(minHeightConfig[size])
-        : "".concat(sizeConfig$3[size], " ").concat(minWidthConfig[size], " ").concat(minHeightConfig[size]);
+        ? "".concat(sizeConfig$4[size], " ").concat(minHeightConfig[size])
+        : "".concat(sizeConfig$4[size], " ").concat(minWidthConfig[size], " ").concat(minHeightConfig[size]);
     var radiusStyle = "".concat(roundedConfig[size]);
     var selectedStyle = "".concat(isSelectedConfig[isSelected]);
     return (React.createElement("button", { type: "button", onClick: onClick, disabled: disabled, className: "group:last:border-l-0 flex items-center justify-center border-[1px] border-l-0 border-bia-grey-dark-10 first:border-l-[1px] focus-visible:z-50 focus-visible:outline focus-visible:outline-[3px] focus-visible:-outline-offset-1 focus-visible:outline-bia-blue-light-50 disabled:cursor-not-allowed disabled:bg-bia-grey-light-80 disabled:text-bia-grey-dark-10 ".concat(selectedStyle, " ").concat(radiusStyle, " ").concat(sizingStyle, " ").concat(className) }, children));
@@ -2581,7 +2691,7 @@ var todayValue = Date.now() -
     (Date.now() % oneDayValue) +
     new Date().getTimezoneOffset() * 1000 * 60; // today in milliseconds
 var PickerCalendar = function (_a) {
-    var selectedDate = _a.selectedDate, onDateChange = _a.onDateChange, ref = _a.ref;
+    var _b = _a.selectedDate, selectedDate = _b === void 0 ? null : _b, onDateChange = _a.onDateChange, ref = _a.ref;
     // Constants
     var daysMap = [
         'Monday',
@@ -2608,8 +2718,8 @@ var PickerCalendar = function (_a) {
     ];
     var modeMap = ['date', 'year', 'month'];
     // Mode Controller
-    var _b = React.useState(modeMap[0]), pickerMode = _b[0], setPickerMode = _b[1];
-    var _c = React.useState(''), prevMode = _c[0], setPrevMode = _c[1];
+    var _c = React.useState(modeMap[0]), pickerMode = _c[0], setPickerMode = _c[1];
+    var _d = React.useState(''), prevMode = _d[0], setPrevMode = _d[1];
     // styling constants and functions
     var chevronButtonStyle = 'text-bia-coolgrey';
     var selectedDateStyle = function (date, dateSelected) {
@@ -2725,9 +2835,9 @@ var PickerCalendar = function (_a) {
         });
     };
     // View Date Logic
-    var _d = React.useState(new Date(selectedDate || todayValue).getMonth()), viewMonthValue = _d[0], setViewMonthValue = _d[1]; // get the month of the selected date
-    var _e = React.useState(new Date(selectedDate || todayValue).getFullYear()), viewYearValue = _e[0], setViewYearValue = _e[1]; // get the year of the selected date
-    var _f = React.useState(new Date(selectedDate || todayValue).getFullYear()), viewDecadeValue = _f[0], setViewDecadeValue = _f[1]; // get the year for decaderange
+    var _e = React.useState(new Date(selectedDate || todayValue).getMonth()), viewMonthValue = _e[0], setViewMonthValue = _e[1]; // get the month of the selected date
+    var _f = React.useState(new Date(selectedDate || todayValue).getFullYear()), viewYearValue = _f[0], setViewYearValue = _f[1]; // get the year of the selected date
+    var _g = React.useState(new Date(selectedDate || todayValue).getFullYear()), viewDecadeValue = _g[0], setViewDecadeValue = _g[1]; // get the year for decaderange
     // Month view logic
     var monthStartDay = new Date("".concat(viewYearValue, "-").concat(viewMonthValue + 1, "-01")).getDay() === 0
         ? 6
@@ -2739,7 +2849,7 @@ var PickerCalendar = function (_a) {
     var viewLastDate = new Date(viewFirstDate);
     viewLastDate.setDate(viewLastDate.getDate() + monthCalenderView - 1); // get the last date of the view
     // Generate the view days array
-    var _g = React.useState([]), displayDays = _g[0], setDisplayDays = _g[1];
+    var _h = React.useState([]), displayDays = _h[0], setDisplayDays = _h[1];
     function getDecadeRange(year) {
         // Calculate the start of the decade
         var startOfDecade = Math.floor(year / 10) * 10;
@@ -2755,13 +2865,13 @@ var PickerCalendar = function (_a) {
     var yearDisplayRange = getDecadeRange(viewDecadeValue);
     // Variable display
     var dateDisplay = (React.createElement("div", { className: "".concat(pickerMode === 'date' ? '' : 'hidden') },
-        React.createElement("div", { className: "bianic-datepicker-calendar-days-grid-header grid grid-cols-7 gap-[3px] pb-1.5" }, daysMap.map(function (day) { return (React.createElement("div", { key: day, className: "bianic-datepicker-calendar-day flex h-[18px] w-[31px] items-center justify-center text-bia-coolgrey" },
+        React.createElement("div", { className: "bianic-datepicker-calendar-days-grid-header grid grid-cols-7 gap-[3px] pb-1.5", style: { zIndex: 100 } }, daysMap.map(function (day) { return (React.createElement("div", { key: day, className: "bianic-datepicker-calendar-day flex h-[18px] w-[31px] items-center justify-center text-bia-coolgrey" },
             React.createElement(Text, { variant: "small-text" }, day.slice(0, 3)))); })),
         React.createElement("div", { className: "bianic-datepicker-calendar-days-grid-body grid grid-cols-7 gap-y-1.5" }, displayDays.map(function (date) { return (React.createElement("button", { key: date.toString(), className: "bianic-datepicker-calendar-day flex h-[31px] w-[31px] items-center justify-center ".concat(datesColorStyle(date, viewMonthValue), " ").concat(selectedDateStyle(date, selectedDate)), onClick: function () {
                 // Handle date selection logic here
                 handleSetSelectedDate(date);
             } },
-            React.createElement(Text, { variant: "small-text" }, date.getDate()))); }))));
+            React.createElement(Text, { variant: "small-text", extended: checkDateEquals(date, selectedDate) ? 'text-bia-white' : '' }, date.getDate()))); }))));
     var monthDisplay = (React.createElement("div", { className: "bianic-datepicker-calendar-month-grid grid grid-cols-3 gap-y-1.5 ".concat(pickerMode === 'month' ? '' : 'hidden') }, monthMap.map(function (month, index) { return (React.createElement("button", { className: "bianic-datepicker-calendar-month mx-[15px] flex h-[31px] items-center justify-center ".concat(selectedMonthStyle(index, viewMonthValue)), key: index, onClick: function () { return handleSetMonth(index); } },
         React.createElement(Text, { variant: "small-text" }, month.slice(0, 3)))); })));
     var yearDisplay = (React.createElement("div", { className: "bianic-datepicker-calendar-year-grid grid grid-cols-4 gap-y-1.5 ".concat(pickerMode === 'year' ? '' : 'hidden') }, yearDisplayRange.map(function (year, index) { return (React.createElement("button", { className: "bianic-datepicker-calendar-month mx-[6px] flex h-[31px] items-center justify-center ".concat(selectedMonthStyle(year, viewYearValue), " ").concat(index === 0 || index === 11 ? 'text-bia-coolgrey' : 'text-bia-black'), key: index, onClick: function () { return handleSetYear(year); } },
@@ -2810,20 +2920,20 @@ var monthMap = [
     'December',
 ];
 function DatePicker(_a) {
-    var value = _a.value, onChange = _a.onChange;
+    var value = _a.value, onChange = _a.onChange, size = _a.size, disabled = _a.disabled, _b = _a.placeholder, placeholder = _b === void 0 ? '"YYYY-MM-DD"' : _b, label = _a.label, descText = _a.descText, required = _a.required;
     // State and Ref
     var inputRef = React.useRef(null);
     var wrapperRef = React.useRef(null);
     var pickerRef = React.useRef(null);
-    var _b = useDetectOutsideClick(wrapperRef, false, pickerRef), isPickerOpen = _b[0], setIsPickerOpen = _b[1];
+    var _c = useDetectOutsideClick(wrapperRef, false, pickerRef), isPickerOpen = _c[0], setIsPickerOpen = _c[1];
     return (React.createElement("div", { className: "bianic-datepicker-container relative", ref: wrapperRef },
         React.createElement("div", { className: "bianic-datepicker-field-container" },
-            React.createElement(DateInput, { ref: inputRef, placeholder: "YYYY-MM-DD", value: value, onChange: onChange, buttonAction: function () { return setIsPickerOpen(true); }, setIsActive: setIsPickerOpen })),
+            React.createElement(DateInput, { ref: inputRef, placeholder: placeholder, value: value, onChange: onChange, size: size, disabled: disabled, buttonAction: function () { return setIsPickerOpen(true); }, setIsActive: setIsPickerOpen, label: label, descText: descText, required: required })),
         isPickerOpen && (React.createElement("div", { className: "bianic-datepicker-calendar-container absolute left-0 w-[250px] rounded-b-radius-sm bg-bia-white px-1.5 pb-[17px] pt-[15px] shadow-md" },
             React.createElement(PickerCalendar, { selectedDate: new Date(value), onDateChange: onChange, ref: pickerRef })))));
 }
 var DateInput = function (_a) {
-    var className = _a.className, value = _a.value; _a.isActive; var setIsActive = _a.setIsActive, label = _a.label, id = _a.id, _b = _a.size, size = _b === void 0 ? 'md' : _b, onChange = _a.onChange, _c = _a.required, required = _c === void 0 ? false : _c, buttonAction = _a.buttonAction, props = __rest(_a, ["className", "value", "isActive", "setIsActive", "label", "id", "size", "onChange", "required", "buttonAction"]);
+    var className = _a.className, value = _a.value; _a.isActive; var setIsActive = _a.setIsActive, label = _a.label, id = _a.id, _b = _a.size, size = _b === void 0 ? 'md' : _b, onChange = _a.onChange, _c = _a.required, required = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, buttonAction = _a.buttonAction, readOnly = _a.readOnly, descText = _a.descText, props = __rest(_a, ["className", "value", "isActive", "setIsActive", "label", "id", "size", "onChange", "required", "disabled", "buttonAction", "readOnly", "descText"]);
     var editDateFormatter = function (date) {
         var localString = date.toLocaleDateString().split('/');
         return localString.reverse().join('-');
@@ -2833,41 +2943,13 @@ var DateInput = function (_a) {
     };
     // Convert Date to string for display
     var formattedValue = value instanceof Date ? displayDateFormatter(value) : value;
-    var _d = React.useState(formattedValue), viewValue = _d[0], setViewValue = _d[1];
+    var _e = React.useState(formattedValue), viewValue = _e[0], setViewValue = _e[1];
     React.useRef(null);
-    var _e = React.useState(0); _e[0]; _e[1];
-    var _f = styleConfig['text'], fieldStyle = _f.fieldStyle;
-    var _g = sizeConfig$b[size]; _g.iconSize; var fieldSize = _g.fieldSize, iconPosition = _g.iconPosition;
+    var _f = React.useState(0); _f[0]; _f[1];
+    var _g = styleConfig['text'], fieldStyle = _g.fieldStyle;
+    var _h = sizeConfig$c[size], iconSize = _h.iconSize, fieldSize = _h.fieldSize, iconPosition = _h.iconPosition;
     var borderStyle = 'border border-bia-grey-dark-10 bg-primary-white';
     var extendedInputClassName = "".concat(fieldStyle, " ").concat(fieldSize, " ").concat(borderStyle, " ").concat(className);
-    var labelStatus = props.readOnly ? 'read-only:pointer-events-none' : '';
-    // Don't remove this, it will be used later
-    // Helper function to format the cleaned input with specific group sizes
-    // const formatInput = (cleanedValue: string, separator: string = '-') => {
-    //   let formattedValue = ''
-    //   // Define the group lengths: 4, 2, 2
-    //   const groupLengths = [4, 2, 2]
-    //   let currentIndex = 0
-    //   for (let i = 0; i < groupLengths.length; i++) {
-    //     const groupLength = groupLengths[i]
-    //     const nextSegment = cleanedValue.substring(
-    //       currentIndex,
-    //       currentIndex + groupLength
-    //     )
-    //     if (nextSegment.length > 0) {
-    //       formattedValue += nextSegment
-    //       currentIndex += groupLength
-    //       // Add separator if there are more groups to follow and we have enough characters
-    //       if (i < groupLengths.length - 1 && currentIndex < cleanedValue.length) {
-    //         formattedValue += separator
-    //       }
-    //     } else {
-    //       // Stop if there are no more characters for the current group
-    //       break
-    //     }
-    //   }
-    //   return formattedValue
-    // }
     var validateAndFormatDate = function (value) {
         // 1. validate separator
         var splittedDate = value.split('-');
@@ -2920,56 +3002,6 @@ var DateInput = function (_a) {
             onChange(date); // Update the value if it's a valid date
         }
     };
-    // Handle input change will develop later don't remove
-    // const handleChange = (event) => {
-    //   const inputElement = event.target
-    //   const rawValue = inputElement.value
-    //   const currentCursorPos = inputElement.selectionStart
-    //   const cleaned = cleanInput(rawValue)
-    //   // Max total digits for XXXX-XX-XX is 4 + 2 + 2 = 8
-    //   const maxDigits = 8
-    //   const truncatedCleaned = cleaned.substring(0, maxDigits)
-    //   const formatted = formatInput(truncatedCleaned)
-    //   // --- Cursor Position Adjustment Logic ---
-    //   let newCursorPos = currentCursorPos
-    //   const prevFormattedLength = viewValue.length // Length of the string *before* update
-    //   const currentFormattedLength = formatted.length // Length of the string *after* update
-    //   // If text was added and formatted length increased
-    //   if (currentFormattedLength > prevFormattedLength) {
-    //     // Count how many separators are now *before* the cursor in the new string
-    //     // We'll compare the raw cursor position with the formatted string to adjust
-    //     let separatorCountBeforeCursor = 0
-    //     let originalCleanedValue = cleanInput(viewValue) // Clean value before this change
-    //     // If a character was inserted, estimate new cursor position
-    //     if (cleaned.length > originalCleanedValue.length) {
-    //       // Count separators in the *new* formatted string up to the currentCursorPos
-    //       for (let i = 0; i < currentCursorPos; i++) {
-    //         if (formatted.charAt(i) === '-') {
-    //           separatorCountBeforeCursor++
-    //         }
-    //       }
-    //       newCursorPos = currentCursorPos + separatorCountBeforeCursor
-    //     } else {
-    //       // If characters were deleted (backspace/delete)
-    //       newCursorPos = currentCursorPos
-    //       // More sophisticated logic for backspace/delete on separators can go here.
-    //       // For example, if you backspace a digit and it causes a separator to disappear,
-    //       // the cursor might need to jump back an extra position.
-    //       // This basic setup often works acceptably for most cases.
-    //     }
-    //   } else {
-    //     // If text was deleted or no change in length
-    //     newCursorPos = currentCursorPos
-    //   }
-    //   const handleKeyDown = (event) => {
-    //     if (event.key === 'Enter') {
-    //       // Prevent default form submission if the input is inside a <form>
-    //       // event.preventDefault();
-    //     }
-    //   }
-    //   setViewValue(formatted)
-    //   setLastCursorPos(newCursorPos)
-    // }
     var handleChange = function (event) {
         var value = event.target.value;
         // Regular expression to allow only numbers (0-9) and hyphens (-)
@@ -2980,25 +3012,16 @@ var DateInput = function (_a) {
             setViewValue(value);
         }
     };
-    // Will Develop later
-    // useEffect to set cursor position after render
-    // useEffect(() => {
-    //   if (inputRef.current) {
-    //     inputRef.current.setSelectionRange(lastCursorPos, lastCursorPos)
-    //   }
-    // }, [viewValue, lastCursorPos]) // Re-run when viewValue or lastCursorPos changes
     React.useEffect(function () {
         setViewValue(formattedValue);
     }, [value]);
-    return (React.createElement("div", { className: "bianic-date-input-container bianic-fgc-container flex w-full flex-col gap-y-2 text-bia-black" },
-        label && (React.createElement("label", { htmlFor: id, className: "bianic-text-input-label text-xs font-semibold ".concat(labelStatus) },
-            label,
-            required && React.createElement("span", { className: "p-1 text-bia-red" }, "*"))),
+    return (React.createElement("div", { className: "bianic-date-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({}, props, { type: "text", 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), id: id, value: viewValue, onFocus: function () {
+            React.createElement("input", __assign({}, props, { type: "text", 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 hover:border-b-bia-blue focus:rounded-b-none focus-visible:outline-none disabled:border-bia-grey-dark-10 disabled:bg-bia-grey-light-80 disabled:text-bia-grey-active  ".concat(extendedInputClassName), id: id, value: viewValue, disabled: disabled, onChange: handleChange, required: required, onFocus: function () {
                     setIsActive && setIsActive(true);
                     setViewValue(editDateFormatter(value));
-                }, onChange: handleChange, onBlur: function () {
+                }, onBlur: function () {
                     var _a = validateAndFormatDate(viewValue), status = _a[0], validatedValue = _a[1];
                     setViewValue(displayDateFormatter(value));
                     if (status !== 0) ;
@@ -3006,11 +3029,12 @@ var DateInput = function (_a) {
                         updateValue(validatedValue);
                     }
                 }, maxLength: 10 })),
-            React.createElement("div", { className: "absolute inset-y-0 flex items-center pl-3 text-[18px] ".concat(iconPosition) },
-                React.createElement("button", { className: "bianic-datepicker-toggle-button", onClick: function () {
+            React.createElement("div", { className: "absolute inset-y-0 flex items-center pl-3 text-bia-coolgrey ".concat(iconPosition) },
+                React.createElement("button", { className: "bianic-datepicker-toggle-button", disabled: disabled, onClick: function () {
                         buttonAction && buttonAction();
                     } },
-                    React.createElement(TbCalendar, null))))));
+                    React.createElement(TbCalendar, { size: iconSize })))),
+        descText && (React.createElement("span", { className: "desc text-xs text-primary-cool" }, descText))));
 };
 
 var Node = function (_a) {
@@ -3178,9 +3202,9 @@ var Outlet = function (_a) {
 };
 
 var Inlet = function (_a) {
-    _a.className; var _b = _a.fill, fill = _b === void 0 ? 'currentColor' : _b, _c = _a.size, size = _c === void 0 ? 20 : _c;
+    var className = _a.className, _b = _a.fill, fill = _b === void 0 ? 'currentColor' : _b, _c = _a.size, size = _c === void 0 ? 20 : _c;
     var numericSize = Number(size);
-    return (React.createElement("svg", { width: numericSize * 2, height: numericSize, viewBox: "0 0 48 24", fill: fill, xmlns: "http://www.w3.org/2000/svg" },
+    return (React.createElement("svg", { className: className, width: numericSize * 2, height: numericSize, viewBox: "0 0 48 24", fill: fill, xmlns: "http://www.w3.org/2000/svg" },
         React.createElement("path", { d: "M36 20C38.1217 20 40.1566 19.1571 41.6569 17.6569C43.1571 16.1566 44 14.1217 44 12C44 9.87827 43.1571 7.84344 41.6569 6.34315C40.1566 4.84285 38.1217 4 36 4C33.8783 4 31.8434 4.84285 30.3431 6.34315C28.8429 7.84344 28 9.87827 28 12C28 14.1217 28.8429 16.1566 30.3431 17.6569C31.8434 19.1571 33.8783 20 36 20ZM36 22C30.477 22 26 17.523 26 12C26 6.477 30.477 2 36 2C41.523 2 46 6.477 46 12C46 17.523 41.523 22 36 22Z", fill: "inherit" }),
         React.createElement("path", { d: "M15.586 10.657L11.636 6.707C11.4538 6.5184 11.353 6.26579 11.3553 6.0036C11.3576 5.7414 11.4628 5.49059 11.6482 5.30518C11.8336 5.11977 12.0844 5.0146 12.3466 5.01232C12.6088 5.01005 12.8614 5.11084 13.05 5.293L18.707 10.95C18.8002 11.0427 18.8741 11.1528 18.9246 11.2741C18.9751 11.3955 19.001 11.5256 19.001 11.657C19.001 11.7884 18.9751 11.9185 18.9246 12.0399C18.8741 12.1612 18.8002 12.2713 18.707 12.364L13.05 18.021C12.9578 18.1165 12.8474 18.1927 12.7254 18.2451C12.6034 18.2975 12.4722 18.3251 12.3394 18.3263C12.2066 18.3274 12.0749 18.3021 11.952 18.2518C11.8292 18.2015 11.7175 18.1273 11.6236 18.0334C11.5297 17.9395 11.4555 17.8279 11.4052 17.705C11.3549 17.5821 11.3296 17.4504 11.3308 17.3176C11.3319 17.1848 11.3595 17.0536 11.4119 16.9316C11.4643 16.8096 11.5405 16.6992 11.636 16.607L15.586 12.657H6C5.73478 12.657 5.48043 12.5516 5.29289 12.3641C5.10536 12.1766 5 11.9222 5 11.657C5 11.3918 5.10536 11.1374 5.29289 10.9499C5.48043 10.7624 5.73478 10.657 6 10.657H15.586Z", fill: "inherit" })));
 };
@@ -3189,8 +3213,35 @@ var Neutral = function (_a) {
     var className = _a.className, _b = _a.fill, fill = _b === void 0 ? 'currentColor' : _b, _c = _a.size, size = _c === void 0 ? 20 : _c;
     var numericSize = Number(size);
     return (React.createElement("svg", { className: className, width: numericSize * 2, height: numericSize, viewBox: "0 0 48 24", fill: fill, xmlns: "http://www.w3.org/2000/svg" },
-        React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M28 12C28 11.4477 28.4477 11 29 11H43C43.5523 11 44 11.4477 44 12C44 12.5523 43.5523 13 43 13H29C28.4477 13 28 12.5523 28 12Z", fill: "#2F2F2F" }),
-        React.createElement("path", { d: "M12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20ZM12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22Z", fill: "#2F2F2F" })));
+        React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M28 12C28 11.4477 28.4477 11 29 11H43C43.5523 11 44 11.4477 44 12C44 12.5523 43.5523 13 43 13H29C28.4477 13 28 12.5523 28 12Z", fill: "inherit" }),
+        React.createElement("path", { d: "M12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20ZM12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22Z", fill: "inherit" })));
+};
+
+var colorConfig$1 = {
+    yellow: 'bg-bia-yellow-light-80',
+    blue: 'bg-bia-sky-light-90',
+    grey: 'bg-bia-grey-light-80',
+    white: 'bg-bia-white border border-bia-grey',
+};
+var sizeConfig$3 = {
+    container: 'min-h-fit p-5 text-wrap',
+    'form-sm': 'h-[30px] whitespace-nowrap px-2.5',
+    'form-md': 'h-10 whitespace-nowrap px-2.5',
+};
+
+var InfoPanel = function (_a) {
+    var variant = _a.variant, color = _a.color, className = _a.className, textClassName = _a.textClassName;
+    var sizeClass = sizeConfig$3[variant || 'container'];
+    var colorClass = colorConfig$1[color || 'yellow'];
+    var allClasses = "".concat(sizeClass, " ").concat(colorClass, " ").concat(className);
+    return (React.createElement("div", { className: "flex items-center justify-center rounded-radius-md ".concat(allClasses) },
+        React.createElement(Text, { variant: "medium-text", extended: textClassName }, "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.")));
+};
+InfoPanel.defaultProps = {
+    variant: 'container',
+    color: 'yellow',
+    className: '',
+    textClassName: '',
 };
 
 function Modal(_a) {
@@ -3318,7 +3369,7 @@ Pills.defaultProps = {
     iconRight: null,
 };
 
-var classConfig$1 = {
+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',
@@ -3365,7 +3416,7 @@ function Popover(_a) {
     var children = _a.children, content = _a.content; _a.delay; var _c = _a.direction, direction = _c === void 0 ? 'bottom' : _c, _d = _a.title, title = _d === void 0 ? '' : _d; _a.maxWidth;
     var wrapperRef = React.useRef(null);
     var _e = useDetectOutsideClick(wrapperRef, false), isOpen = _e[0], setIsOpen = _e[1];
-    var _f = classConfig$1[direction], tooltipContainer = _f.tooltipContainer, triangleContainer = _f.triangleContainer, triangleShape = _f.triangleShape;
+    var _f = classConfig[direction], tooltipContainer = _f.tooltipContainer, triangleContainer = _f.triangleContainer, triangleShape = _f.triangleShape;
     return (React.createElement("div", { className: "Bianic-popover-Wrapper relative block h-fit w-fit", role: "button", ref: wrapperRef, onClick: function () { return setIsOpen(true); } },
         children,
         isOpen && (React.createElement("div", { className: "Bianic-popover-Tip text-bia-sm absolute z-50 w-[245px] space-y-[5px] rounded-[4px] bg-primary-black px-[20px] py-[17.5px] text-primary-white ".concat(tooltipContainer) },
@@ -3853,111 +3904,6 @@ TagLabel.defaultProps = {
     isDark: false,
 };
 
-var classConfig = {
-    top: {
-        tooltipContainer: 'bottom-[calc(100%+5px)]  left-1/2  -translate-x-1/2',
-        triangleContainer: 'left-0 -bottom-[4px] flex justify-center w-full h-auto',
-        triangleShape: 'border-l-[8px] border-l-transparent border-t-[5px] border-t-primary-black border-r-[8px] border-r-transparent',
-    },
-    right: {
-        tooltipContainer: 'left-[calc(100%+5px)] top-1/2 -translate-y-1/2',
-        triangleContainer: '-left-[4px] bottom-0 flex items-center w-auto h-full',
-        triangleShape: 'border-t-[8px] border-t-transparent border-r-[5px] border-r-primary-black border-b-[8px] border-b-transparent',
-    },
-    bottom: {
-        tooltipContainer: 'top-[calc(100%+5px)]  left-1/2  -translate-x-1/2',
-        triangleContainer: 'left-0 -top-[4px] flex justify-center w-full h-auto',
-        triangleShape: 'border-l-[8px] border-l-transparent border-b-[5px] border-b-primary-black border-r-[8px] border-r-transparent',
-    },
-    left: {
-        tooltipContainer: 'right-[calc(100%+5px)] top-1/2 -translate-y-1/2',
-        triangleContainer: '-right-[4px] bottom-0 flex items-center w-auto h-full',
-        triangleShape: 'border-t-[8px] border-t-transparent border-l-[5px] border-l-primary-black border-b-[8px] border-b-transparent',
-    },
-    'top-right': {
-        tooltipContainer: 'bottom-[calc(100%+5px)] right-0',
-        triangleContainer: 'left-0 -bottom-[4px] flex justify-center w-full h-auto',
-        triangleShape: 'border-l-[8px] border-l-transparent border-t-[5px] border-t-primary-black border-r-[8px] border-r-transparent',
-    },
-    'top-left': {
-        tooltipContainer: 'bottom-[calc(100%+5px)] left-0',
-        triangleContainer: 'left-0 -bottom-[4px] flex justify-center w-full h-auto',
-        triangleShape: 'border-l-[8px] border-l-transparent border-t-[5px] border-t-primary-black border-r-[8px] border-r-transparent',
-    },
-    'bottom-right': {
-        tooltipContainer: 'top-[calc(100%+5px)]  right-0',
-        triangleContainer: 'left-0 -top-[4px] flex justify-center w-full h-auto',
-        triangleShape: 'border-l-[8px] border-l-transparent border-b-[5px] border-b-primary-black border-r-[8px] border-r-transparent',
-    },
-    'bottom-left': {
-        tooltipContainer: 'top-[calc(100%+5px)]  left-0',
-        triangleContainer: 'left-0 -top-[4px] flex justify-center w-full h-auto',
-        triangleShape: 'border-l-[8px] border-l-transparent border-b-[5px] border-b-primary-black border-r-[8px] border-r-transparent',
-    },
-};
-
-function Tooltip(props) {
-    var children = props.children, content = props.content, delay = props.delay, _a = props.direction, direction = _a === void 0 ? 'top' : _a, _b = props.maxWidth, maxWidth = _b === void 0 ? undefined : _b;
-    var timeout;
-    var _c = React.useState(false), active = _c[0], setActive = _c[1];
-    var showTip = function () {
-        timeout = setTimeout(function () {
-            setActive(true);
-        }, delay || 400);
-    };
-    var hideTip = function () {
-        clearInterval(timeout);
-        setActive(false);
-    };
-    var _d = classConfig[direction], tooltipContainer = _d.tooltipContainer; _d.triangleContainer; _d.triangleShape;
-    var tooltipContainerRef = React.useRef(null);
-    var _e = React.useState({
-        maxWidth: maxWidth + 'px',
-        whiteSpace: 'nowrap',
-    }), tooltipContainerStyle = _e[0], setTooltipContainerStyle = _e[1];
-    var tooltipContainerElement = tooltipContainerRef === null || tooltipContainerRef === void 0 ? void 0 : tooltipContainerRef.current;
-    var scrollWidth = tooltipContainerElement === null || tooltipContainerElement === void 0 ? void 0 : tooltipContainerElement.scrollWidth; // Mendapatkan lebar konten aktual
-    var offsetWidth = tooltipContainerElement === null || tooltipContainerElement === void 0 ? void 0 : tooltipContainerElement.offsetWidth;
-    var offsetHeight = tooltipContainerElement === null || tooltipContainerElement === void 0 ? void 0 : tooltipContainerElement.offsetHeight;
-    React.useEffect(function () {
-        if (scrollWidth && offsetWidth) {
-            var maxWidthNumber = Number(maxWidth);
-            var isMultiLine = offsetHeight > 23; // 23 pixels is the approximate height of one line of text
-            // Tooltip Width and Whitespace Determination Rules:
-            // 1. Default Condition:
-            //    - width: fit-content
-            //    - whiteSpace: nowrap
-            // 2. When maxWidth is Set:
-            //    * Text Exceeds maxWidth:
-            //      - width: maxWidth
-            //      - whiteSpace: normal
-            //    * Text Equals maxWidth (Multi-line):
-            //      - width: maxWidth
-            //      - whiteSpace: normal
-            //    * Text Less Than maxWidth:
-            //      - width: fit-content
-            //      - whiteSpace: nowrap
-            var newWidth_1 = 'fit-content';
-            var newWhiteSpace_1 = 'nowrap';
-            if (scrollWidth > maxWidthNumber ||
-                (offsetWidth === maxWidthNumber && isMultiLine)) {
-                newWidth_1 = maxWidthNumber + 'px';
-                newWhiteSpace_1 = 'normal';
-            }
-            setTooltipContainerStyle(function (prev) { return (__assign(__assign({}, prev), { width: newWidth_1, whiteSpace: newWhiteSpace_1 })); });
-        }
-    }, [content, maxWidth, scrollWidth, offsetHeight]);
-    return (React.createElement("div", { className: "tooltip-wrapper relative inline-flex h-fit w-fit flex-col", onMouseEnter: showTip, onMouseLeave: hideTip },
-        children,
-        active && (React.createElement("div", { className: "tooltip-container break-word absolute z-50 inline-block break-all rounded-[4px] bg-primary-black px-[7px] py-[4px] text-size-sm text-primary-white ".concat(tooltipContainer), style: tooltipContainerStyle, ref: tooltipContainerRef }, content))));
-}
-Tooltip.defaultProps = {
-    delay: 400,
-    direction: 'top',
-    maxWidth: '300',
-};
-Tooltip.defaultProps = {};
-
 var colorConfigs = {
     default: 'bg-bia-black',
     info: 'bg-bia-teal',
@@ -3978,7 +3924,7 @@ function Toaster(_a) {
         React.createElement("div", { className: "bianic-toaster-description-area text-[12px] font-normal leading-[134%]" }, children))) : (React.createElement("div", { className: "bianic-toaster-content-area flex flex-row gap-[5px]" },
         icon && React.createElement("div", { className: "bianic-toaster-icon-area" }, icon),
         React.createElement("div", { className: "bianic-toaster-description-area text-[12px] font-normal leading-[134%]" }, children)));
-    return (React.createElement("div", { className: "bianic-toaster flex max-w-[300px] flex-row gap-[5px] rounded-[5px] py-[10px] shadow-[0px_3px_20px_0px_rgba(0,0,0,0.10)] ".concat(colorStyles) },
+    return (React.createElement("div", { className: "bianic-toaster flex w-[300px] flex-row gap-[5px] rounded-[5px] py-[10px] shadow-[0px_3px_20px_0px_rgba(0,0,0,0.10)] ".concat(colorStyles) },
         React.createElement("span", { className: "mr-[10px] flex min-w-[3px] rounded-r-[10px] bg-bia-white/50" }),
         content,
         React.createElement("div", { className: "flex items-start pr-[11px] pt-[1px]" },
@@ -4057,6 +4003,7 @@ exports.FormGroup = FormGroup;
 exports.FormGroupButton = FormGroupButton;
 exports.FormGroupLabel = FormGroupLabel;
 exports.Heading = Heading;
+exports.InfoPanel = InfoPanel;
 exports.Link = Link;
 exports.LiveSearch = LiveSearch;
 exports.MenuContainer = MenuContainer;