bianic-ui 1.13.2 → 1.15.0-alpha.0

package/dist/cjs/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var React = require('react');
+var reactDom = require('react-dom');
 
 function Accordions(_a) {
     var title = _a.title, content = _a.content;
@@ -273,12 +274,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 +424,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 ',
@@ -490,12 +488,12 @@ var variantUnion$1 = [
 ];
 var radiusUnion = ['default', 'full-rounded'];
 var sizeUnion$5 = ['md', 'lg', 'sm', 'tn'];
-function Button(_a) {
+var Button = React.forwardRef(function (_a, ref) {
     var label = _a.label, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.radius, radius = _d === void 0 ? 'default' : _d, _e = _a.size, size = _e === void 0 ? 'md' : _e, _f = _a.variant, variant = _f === void 0 ? 'default' : _f, _g = _a.iconLeft, iconLeft = _g === void 0 ? null : _g, _h = _a.iconRight, iconRight = _h === void 0 ? null : _h, _j = _a.left, left = _j === void 0 ? null : _j, _k = _a.right, right = _k === void 0 ? null : _k, minWidth = _a.minWidth, props = __rest(_a, ["label", "className", "disabled", "radius", "size", "variant", "iconLeft", "iconRight", "left", "right", "minWidth"]);
     var validatedVariant = validUnion(variant, variantUnion$1);
     var validatedSize = validUnion(size, sizeUnion$5);
     var validatedRadius = validUnion(radius, radiusUnion);
-    var minWidthRules = minWidthConfig$1[size];
+    var minWidthRules = minWidthConfig$1[validatedSize];
     if (minWidth !== undefined) {
         minWidthRules = "min-w-[".concat(minWidth, "px]");
     }
@@ -504,31 +502,31 @@ 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)
         : "".concat(iconOnlySizeConfig$1[validatedSize], " ").concat(variant.includes('link') ? '' : "".concat(sidePaddingConfig[validatedSize]));
-    var classString = "\n    ".concat(variantConfig$2[validatedVariant], " \n    ").concat(sizeClass, " \n    ").concat(radiusConfig$1[validatedRadius][validatedSize], " \n    ").concat(className, "\n  ");
-    return (React.createElement("button", __assign({ type: "button", className: "bianic-button bianic-fgc-target flex items-center justify-center font-semibold ".concat(classString), disabled: disabled }, props),
+    var classString = "\n    ".concat(variantConfig$2[validatedVariant], "\n    ").concat(sizeClass, "\n    ").concat(radiusConfig$1[validatedRadius][validatedSize], "\n    ").concat(className, "\n  ");
+    return (React.createElement("button", __assign({ ref: ref, type: "button", className: "bianic-button bianic-fgc-target flex items-center justify-center font-semibold ".concat(classString), disabled: disabled }, props),
         childrenElement(iconLeft || left),
         childrenElement(label),
         childrenElement(iconRight || right)));
-}
+});
 Button.defaultProps = {
-    label: null,
+    label: undefined,
     className: '',
     disabled: false,
     radius: 'default',
     size: 'md',
     variant: 'default',
-    iconLeft: null,
-    iconRight: null,
-    left: null,
-    right: null,
+    iconLeft: undefined,
+    iconRight: undefined,
+    left: undefined,
+    right: undefined,
 };
 
 var AvatarConfig = {
@@ -1489,7 +1487,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 +1501,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 +1791,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 +1966,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 +2006,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 +2036,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 +2051,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 +2067,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 +2078,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 +2118,7 @@ TextArea.defaultProps = {
     value: '',
 };
 
-var sizeConfig$8 = {
+var sizeConfig$9 = {
     md: {
         checkClass: 'w-[22px] h-[22px]',
         labelClass: 'text-size-base font-[350]',
@@ -2019,7 +2132,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 +2150,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 +2161,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 +2179,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 +2206,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 () { } },
@@ -2128,7 +2241,77 @@ var fontConfig = {
     md: 'text-[14px] font-[350]',
 };
 
-var DropdownContainer = React.forwardRef(function DropdownContainer(propsComp, ref) {
+var getDropdownStyle = function (anchorRef, dropdownRef) {
+    if (!anchorRef.current || !dropdownRef.current) {
+        return { minWidth: 'auto' };
+    }
+    var anchorRect = anchorRef.current.getBoundingClientRect();
+    var dropdownHeight = dropdownRef.current.offsetHeight;
+    var spaceToBottom = window.innerHeight - anchorRect.bottom;
+    var spaceToTop = anchorRect.top;
+    var style = {
+        left: "".concat(anchorRect.left + window.scrollX, "px"),
+        minWidth: "".concat(anchorRect.width, "px"),
+    };
+    // If space below is less than dropdown height, 
+    // AND space above is more than space below
+    // then flip up
+    if (spaceToBottom < dropdownHeight && spaceToTop > spaceToBottom) {
+        var topPositionForFlip = anchorRect.top + window.scrollY - dropdownHeight;
+        style.top = "".concat(topPositionForFlip, "px");
+    }
+    else {
+        style.top = "".concat(anchorRect.bottom + window.scrollY, "px");
+    }
+    return style;
+};
+var DropdownContainer = function (propsComp) {
+    var _a = propsComp.isTopFlat, isTopFlat = _a === void 0 ? false : _a, children = propsComp.children, _b = propsComp.open, open = _b === void 0 ? true : _b, _c = propsComp.onClose, onClose = _c === void 0 ? function () { } : _c, _d = propsComp.className, className = _d === void 0 ? '' : _d, _e = propsComp.isWithOverlay, isWithOverlay = _e === void 0 ? true : _e, _f = propsComp.size, size = _f === void 0 ? 'md' : _f, _g = propsComp.onClickItem, onClickItem = _g === void 0 ? function () { } : _g, _h = propsComp.zIndex, zIndex = _h === void 0 ? 100 : _h, anchorRef = propsComp.anchorRef, restProps = __rest(propsComp, ["isTopFlat", "children", "open", "onClose", "className", "isWithOverlay", "size", "onClickItem", "zIndex", "anchorRef"]);
+    if (!open)
+        return null;
+    var _j = React.useState({ minWidth: 'auto' }), positionStyle = _j[0], setPositionStyle = _j[1];
+    var radiusClass = "rounded-b-radius-sm ".concat(!isTopFlat && 'rounded-t-radius-sm');
+    var sizeClass = containerSizeConfig[size] || containerSizeConfig['md'];
+    var containerClass = "".concat(sizeClass, " ").concat(radiusClass, " ").concat(className);
+    var dropdownRef = React.useRef(null);
+    var handleClickDrpdownItem = function (e, val) {
+        onClickItem(e, val);
+        onClose();
+    };
+    React.useLayoutEffect(function () {
+        if (!(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current))
+            return;
+        var newStyle = getDropdownStyle(anchorRef, dropdownRef);
+        setPositionStyle(newStyle);
+        var handleScrollOrResize = function () {
+            setPositionStyle(getDropdownStyle(anchorRef, dropdownRef));
+        };
+        window.addEventListener('scroll', handleScrollOrResize);
+        window.addEventListener('resize', handleScrollOrResize);
+        return function () {
+            window.removeEventListener('scroll', handleScrollOrResize);
+            window.removeEventListener('resize', handleScrollOrResize);
+        };
+    }, [anchorRef]);
+    return (React.createElement(React.Fragment, null,
+        isWithOverlay && (React.createElement("div", { className: "bianic-dropdown-overlay fixed left-0 top-0 h-screen w-screen", style: { zIndex: zIndex }, onClick: function () { return onClose(); } })),
+        reactDom.createPortal(React.createElement("div", __assign({ ref: dropdownRef, className: "absolute max-w-fit bianic-dropdown-container bg-bia-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] ".concat(containerClass), style: __assign({ zIndex: zIndex + 10 }, positionStyle) }, restProps), React.Children.map(children, function (child) {
+            return React.isValidElement(child)
+                ? // Kirimkan handleItemClick sebagai props onClick ke setiap DropdownItem
+                    React.cloneElement(child, {
+                        onClose: function () { return onClose(); },
+                        size: size,
+                        onClickItem: function (e, val) { return handleClickDrpdownItem(e, val); },
+                        zIndex: zIndex + 10,
+                    })
+                : child;
+        })), document.body)));
+};
+DropdownContainer.defaultProps = {
+    isTopFlat: false,
+};
+
+var DropdownContNoAnchor = React.forwardRef(function DropdownContNoAnchor(propsComp, ref) {
     var _a = propsComp.isTopFlat, isTopFlat = _a === void 0 ? false : _a, children = propsComp.children, _b = propsComp.open, open = _b === void 0 ? true : _b, _c = propsComp.onClose, onClose = _c === void 0 ? function () { } : _c, _d = propsComp.className, className = _d === void 0 ? '' : _d, _e = propsComp.isWithOverlay, isWithOverlay = _e === void 0 ? true : _e, _f = propsComp.size, size = _f === void 0 ? 'md' : _f, _g = propsComp.onClickItem, onClickItem = _g === void 0 ? function () { } : _g, _h = propsComp.zIndex, zIndex = _h === void 0 ? 100 : _h, restProps = __rest(propsComp, ["isTopFlat", "children", "open", "onClose", "className", "isWithOverlay", "size", "onClickItem", "zIndex"]);
     var radiusClass = "rounded-b-radius-sm ".concat(!isTopFlat && 'rounded-t-radius-sm');
     var sizeClass = containerSizeConfig[size] || containerSizeConfig['md'];
@@ -2153,7 +2336,7 @@ var DropdownContainer = React.forwardRef(function DropdownContainer(propsComp, r
                 : child;
         })))));
 });
-DropdownContainer.defaultProps = {
+DropdownContNoAnchor.defaultProps = {
     isTopFlat: false,
 };
 
@@ -2191,7 +2374,7 @@ function DropdownItem(_a) {
             }, onKeyDown: function () { }, disabled: disabled, type: "button" }, props),
             content,
             React.createElement("div", { className: "ml-auto flex items-center" }, children && (React.createElement(TbChevronRight, { className: "ml-[10px] text-bia-coolgrey", size: chevronSize })))),
-        children && (React.createElement(DropdownContainer, { className: "absolute top-0 bg-primary-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] group-first/main:top-[6px] ".concat(translateClass), onClose: onClose, open: isHovered, onClickItem: function (e, value) { return onClickItem(e, value); }, size: size, ref: DropdownContRef, zIndex: currentZIndex + 10 }, children))));
+        children && (React.createElement(DropdownContNoAnchor, { className: "absolute top-0 bg-primary-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] group-first/main:top-[6px] ".concat(translateClass), onClose: onClose, open: isHovered, onClickItem: function (e, value) { return onClickItem(e, value); }, size: size, ref: DropdownContRef, zIndex: currentZIndex + 10 }, children))));
 }
 DropdownItem.defaultProps = {
     className: '',
@@ -2202,11 +2385,9 @@ 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, label = _a.label, _d = _a.options, options = _d === void 0 ? [] : _d, _e = _a.required, required = _e === void 0 ? false : _e, selected = _a.selected, setSelected = _a.setSelected, _f = _a.onClickDropdown, onClickDropdown = _f === void 0 ? function () { } : _f, children = _a.children, _g = _a.dropContProps, _h = _g === void 0 ? {} : _g, _j = _h.className, dropContClassName = _j === void 0 ? '' : _j, restDropContProps = __rest(_h, ["className"]), props = __rest(_a, ["descText", "disabled", "size", "id", "label", "options", "required", "selected", "setSelected", "onClickDropdown", "children", "dropContProps"]);
     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 _l = sizeConfig$8[validatedSize], searchSize = _l.searchSize, iconSize = _l.iconSize;
     var inputRef = React.useRef(null);
-    var dropdownContRef = React.useRef(null);
     var handleOutsideClick = function (e) {
         if (inputRef.current && !inputRef.current.contains(e.target)) {
             setIsOpen(false);
@@ -2218,22 +2399,6 @@ function SelectInput(_a) {
             document.removeEventListener('mousedown', handleOutsideClick);
         };
     });
-    React.useEffect(function () {
-        var _a, _b;
-        if (inputRef.current) {
-            // Adjust dropdown position to prevent show up out of screen
-            var windowHeight = window.innerHeight;
-            var inputRect = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-            var inputBottom = inputRect === null || inputRect === void 0 ? void 0 : inputRect.bottom;
-            var diff = windowHeight - inputBottom;
-            var dropdownRect = (_b = dropdownContRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
-            var dropdownHeight = (dropdownRect === null || dropdownRect === void 0 ? void 0 : dropdownRect.height) || 0;
-            if (dropdownHeight >= diff)
-                setIsDropUp(true);
-            else
-                setIsDropUp(false);
-        }
-    }, [isOpen]);
     var isObjectOptionItem = false;
     if (options.every(function (item) { return typeof item === 'object' && item !== null; }))
         isObjectOptionItem = true;
@@ -2253,7 +2418,6 @@ function SelectInput(_a) {
             optionsElement.style.maxHeight = "".concat(Math.max(0, maxHeight), "px");
         }
     }, [isOpen]);
-    var dropdownPosition = isDropUp ? 'bottom-full' : 'top-full';
     return (React.createElement("div", { className: "field-group flex w-full flex-col", ref: inputRef },
         React.createElement("label", { htmlFor: id, className: "label pb-2 text-xs font-semibold" },
             childrenElement(label),
@@ -2273,7 +2437,7 @@ function SelectInput(_a) {
                         setIsOpen(false);
                     } }));
             }))),
-            children && isOpen && (React.createElement(DropdownContainer, __assign({ open: isOpen, onClose: function () { return setIsOpen(false); }, size: size, isTopFlat: true, ref: dropdownContRef, className: "bianic-livesearch-dropdown absolute z-10 mt-1 w-full overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ".concat(dropdownPosition, " ").concat(dropContClassName) }, restDropContProps), React.Children.map(children, function (child) {
+            children && isOpen && (React.createElement(DropdownContainer, __assign({ open: isOpen, onClose: function () { return setIsOpen(false); }, size: size, isTopFlat: true, anchorRef: inputRef, className: "bianic-livesearch-dropdown absolute z-10 mt-1 w-full overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ".concat(dropContClassName) }, restDropContProps), React.Children.map(children, function (child) {
                 if (React.isValidElement(child)) {
                     return React.cloneElement(child, {
                         isSelected: selected && selected.id === child.props.value.id,
@@ -2298,7 +2462,7 @@ SelectInput.defaultProps = {
     setSelected: function () { },
 };
 
-var sizeConfig$5 = {
+var sizeConfig$6 = {
     md: {
         iconClass: 'right-[10px]',
         iconSize: '18',
@@ -2313,16 +2477,29 @@ var sizeConfig$5 = {
     },
 };
 
+var matchSearchTerm = function (content, term, variant) {
+    var lowerContent = content.toLowerCase();
+    var lowerTerm = term.toLowerCase();
+    switch (variant) {
+        case 'startsWith':
+            return lowerContent.startsWith(lowerTerm);
+        case 'endsWith':
+            return lowerContent.endsWith(lowerTerm);
+        case 'include':
+            return lowerContent.includes(lowerTerm);
+        default:
+            return lowerContent.includes(lowerTerm);
+    }
+};
 function LiveSearch(_a) {
-    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, id = _a.id, _c = _a.size, size = _c === void 0 ? 'md' : _c, label = _a.label, placeholder = _a.placeholder, _d = _a.required, required = _d === void 0 ? false : _d, options = _a.options, setValue = _a.setValue, value = _a.value, _e = _a.readOnly, readOnly = _e === void 0 ? false : _e, _f = _a.onChangeText, onChangeText = _f === void 0 ? function () { } : _f, _g = _a.onClickDropdown, onClickDropdown = _g === void 0 ? function () { } : _g, _h = _a.autoComplete, autoComplete = _h === void 0 ? 'off' : _h, _j = _a.children, children = _j === void 0 ? undefined : _j, _k = _a.dropContProps, dropContProps = _k === void 0 ? { className: undefined } : _k;
-    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 descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, id = _a.id, _c = _a.size, size = _c === void 0 ? 'md' : _c, label = _a.label, placeholder = _a.placeholder, _d = _a.required, required = _d === void 0 ? false : _d, options = _a.options, setValue = _a.setValue, value = _a.value, _e = _a.readOnly, readOnly = _e === void 0 ? false : _e, _f = _a.onChangeText, onChangeText = _f === void 0 ? function () { } : _f, _g = _a.onClickDropdown, onClickDropdown = _g === void 0 ? function () { } : _g, _h = _a.autoComplete, autoComplete = _h === void 0 ? 'off' : _h, _j = _a.children, children = _j === void 0 ? undefined : _j, _k = _a.dropContProps, dropContProps = _k === void 0 ? { className: undefined } : _k, _l = _a.searchVariant, searchVariant = _l === void 0 ? 'include' : _l;
+    var _m = React.useState(false), isOpen = _m[0], setIsOpen = _m[1];
+    var _o = React.useState(value.label || ''), searchTerm = _o[0], setSearchTerm = _o[1];
+    var _p = sizeConfig$6[size], iconClass = _p.iconClass, iconSize = _p.iconSize, inputClass = _p.inputClass;
     var dropContClassName = dropContProps.className, restDropContProps = __rest(dropContProps, ["className"]);
     var isValueExist = value && value.label !== undefined && value.label !== '';
     var inputRef = React.useRef(null);
     var dropdownContRef = React.useRef(null);
-    var _p = React.useState(false), isDropUp = _p[0], setIsDropUp = _p[1];
     var handleOutsideClick = function (e) {
         if (inputRef.current && !inputRef.current.contains(e.target)) {
             setIsOpen(false);
@@ -2342,22 +2519,6 @@ function LiveSearch(_a) {
             setSearchTerm(value.label || '');
         }
     }, [value.label, searchTerm]);
-    React.useEffect(function () {
-        var _a, _b;
-        if (inputRef.current) {
-            // Adjust dropdown position to prevent show up out of screen
-            var windowHeight = window.innerHeight;
-            var inputRect = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-            var inputBottom = inputRect === null || inputRect === void 0 ? void 0 : inputRect.bottom;
-            var diff = windowHeight - inputBottom;
-            var dropdownRect = (_b = dropdownContRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
-            var dropdownHeight = (dropdownRect === null || dropdownRect === void 0 ? void 0 : dropdownRect.height) || 0;
-            if (dropdownHeight >= diff)
-                setIsDropUp(true);
-            else
-                setIsDropUp(false);
-        }
-    }, [isOpen]);
     var filteredOptions = options === null || options === void 0 ? void 0 : options.filter(function (item) {
         return item.label.toLowerCase().includes(value.label.toLowerCase());
     });
@@ -2375,36 +2536,38 @@ function LiveSearch(_a) {
     var processDropdownChildren = function (nodes, currentSearchTerm, includeAllIfNoSearch) {
         return React.Children.map(nodes, function (child) {
             if (!React.isValidElement(child) || child.type !== DropdownItem) {
-                return child; // Render non-DropdownItem or other elements as is
+                return child;
             }
-            var itemProps = child.props; // Cast to any to access props
+            var itemProps = child.props;
+            // Assume content is a string for filtering; otherwise, filtering won't work well
+            var itemContent = typeof itemProps.content === 'string' ? itemProps.content : '';
             var itemValue = itemProps.value;
             var isDisabled = itemProps.disabled;
-            // Filter based on searchTerm only if searchTerm is present
-            if (currentSearchTerm &&
-                !itemValue.toLowerCase().includes(currentSearchTerm.toLowerCase())) {
-                return null; // Do not render if it doesn't match
+            // 2. Filtering Logic (Uses Global Search Variant)
+            if (!includeAllIfNoSearch) {
+                // Use the matchSearchTerm utility with the selected searchVariant
+                if (currentSearchTerm && !matchSearchTerm(itemValue, currentSearchTerm, searchVariant)) {
+                    return null; // Item does not match the search criteria
+                }
             }
-            // If includeAllIfNoSearch is true (when searchTerm is empty), do not filter.
-            // If includeAllIfNoSearch is false (when searchTerm is present), filtering has been done above.
-            // Clone its children recursively if any
+            // 3. Process Nested Children (Recursion)
             var clonedChildren = itemProps.children
-                ? processDropdownChildren(itemProps.children, currentSearchTerm)
+                ? processDropdownChildren(itemProps.children, currentSearchTerm, includeAllIfNoSearch)
                 : null;
-            // Clone the DropdownItem to inject the onClick prop
+            // 4. Clone and Inject Click Handler
             return React.cloneElement(child, {
                 onClick: function (e) {
                     if (!isDisabled) {
                         handleDropdownItemClick({
-                            id: itemValue,
-                            label: itemValue,
+                            id: itemValue !== undefined ? itemValue : itemContent,
+                            label: itemValue !== undefined ? itemValue : itemContent
                         });
                     }
-                    if (dropContProps === null || dropContProps === void 0 ? void 0 : dropContProps.onClickItem) {
-                        dropContProps.onClickItem(e, itemValue);
+                    if (itemProps.onClick) {
+                        itemProps.onClick(e);
                     }
                 },
-                children: clonedChildren, // Ensure processed children are also cloned
+                children: clonedChildren
             });
         });
     };
@@ -2413,23 +2576,20 @@ function LiveSearch(_a) {
     var hasFilteredResults = false;
     if (searchTerm) {
         // If there's a searchTerm, filter children
-        renderedChildren = processDropdownChildren(children, searchTerm);
+        renderedChildren = processDropdownChildren(children, searchTerm, false);
         hasFilteredResults =
             React.Children.toArray(renderedChildren).filter(Boolean).length > 0;
     }
     else {
         // If searchTerm is empty, display all children without filtering (but with onClick injected)
-        renderedChildren = processDropdownChildren(children, '');
+        renderedChildren = processDropdownChildren(children, '', true);
         hasFilteredResults =
             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 " },
+        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) {
+            React.createElement("input", { className: "bianic-livesearch-input field peer w-full rounded border  border-bia-grey-dark-10 bg-primary-white read-only:pointer-events-none read-only:border-bia-grey-disabled focus-visible:outline-none enabled:hover:rounded-b-none enabled:hover:border-b-bia-blue enabled:focus:rounded-b-none enabled:focus:border-b-bia-blue disabled:border-bia-grey-dark-10 disabled:bg-bia-grey-light-10 disabled:text-bia-coolgrey ".concat(inputClass), onClick: function () { return setIsOpen(!isOpen); }, value: searchTerm, required: required, disabled: disabled, id: id, placeholder: placeholder, ref: inputRef, onChange: function (e) {
                     onChangeText(e);
                     setValue({ id: null, label: e.target.value });
                     handleInputChange(e);
@@ -2448,11 +2608,11 @@ function LiveSearch(_a) {
                         setIsOpen(false);
                     } }));
             }))),
-            children && isOpen && (React.createElement(DropdownContainer, __assign({ open: isOpen, onClose: function () { return setIsOpen(false); }, size: size, isTopFlat: true, zIndex: 10, className: "bianic-livesearch-dropdown absolute w-full overflow-hidden bg-white shadow-lg ".concat(dropdownPosition, " ").concat(dropContClassName), ref: dropdownContRef }, restDropContProps), hasFilteredResults
+            children && React.createElement(DropdownContainer, __assign({ open: isOpen, onClose: function () { return setIsOpen(false); }, size: size, isTopFlat: true, zIndex: 10, className: "bianic-livesearch-dropdown absolute w-full overflow-hidden bg-white shadow-lg ".concat(dropContClassName), ref: dropdownContRef, anchorRef: inputRef }, restDropContProps), hasFilteredResults
                 ? 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)));
+                    searchTerm.length > 0 && (React.createElement(DropdownItem, { content: React.createElement("div", { className: "px-4 py-2 text-gray-500" }, "Tidak ada hasil ditemukan.") })))),
+        descText && (React.createElement("span", { className: "desc text-xs text-primary-cool" }, descText))));
 }
 LiveSearch.defaultProps = {
     descText: '',
@@ -2468,7 +2628,7 @@ LiveSearch.defaultProps = {
     readonly: false,
 };
 
-var sizeConfig$4 = {
+var sizeConfig$5 = {
     md: {
         containerSize: 'w-[42px] h-[22px]',
         checkSize: 'p-2',
@@ -2483,7 +2643,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 +2669,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 +2692,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 +2741,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 +2768,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 +2885,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 +2899,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 +2915,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 +2970,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 +2993,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 +3052,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 +3062,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 +3079,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) {
@@ -3193,6 +3267,33 @@ var Neutral = function (_a) {
         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" })));
 };
 
+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) {
     var _b = _a.size, size = _b === void 0 ? 'sm' : _b, title = _a.title, open = _a.open, _c = _a.zIndex, zIndex = _c === void 0 ? 100 : _c, onClose = _a.onClose, onClick = _a.onClick, rest = __rest(_a, ["size", "title", "open", "zIndex", "onClose", "onClick"]);
     var modalSize;
@@ -3318,7 +3419,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 +3466,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 +3954,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 +3974,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 +4053,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;