bianic-ui 1.9.3 → 1.10.1

package/dist/esm/index.js

@@ -263,13 +263,20 @@ var childrenElement = function (element) {
 var validUnion = function (value, union) {
     return union.includes(value) ? value : union[0];
 };
-var useDetectOutsideClick = function (ref, initialState, event) {
+var useDetectOutsideClick = function (ref, initialState, ignoreRef, event) {
     if (event === void 0) { event = 'click'; }
     var _a = useState(initialState), isActive = _a[0], setIsActive = _a[1];
     useEffect(function () {
         var pageClickEvent = function (event) {
             // If the active element exists and is clicked outside of
-            if (ref.current !== null && !ref.current.contains(event.target)) {
+            if (ignoreRef &&
+                ignoreRef.current &&
+                ignoreRef.current.contains(event.target)) {
+                console.log('enter');
+            }
+            else if (ref.current !== null &&
+                !ref.current.contains(event.target)) {
+                console.log('close');
                 setIsActive(!isActive);
             }
         };
@@ -412,7 +419,7 @@ var radiusConfig$1 = {
         tn: 'rounded-radius-full focus-visible:rounded-radius-full',
     },
 };
-var sizeConfig$d = {
+var sizeConfig$c = {
     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,10 +497,10 @@ function Button(_a) {
     }
     var sizingRules;
     if (variant.includes('link')) {
-        sizingRules = "".concat(sizeConfig$d[validatedSize]);
+        sizingRules = "".concat(sizeConfig$c[validatedSize]);
     }
     else {
-        sizingRules = "".concat(sizeConfig$d[validatedSize], " ").concat(sidePaddingConfig[validatedSize]);
+        sizingRules = "".concat(sizeConfig$c[validatedSize], " ").concat(sidePaddingConfig[validatedSize]);
     }
     var sizeClass = label || variant === 'form-group'
         ? " ".concat(minWidthRules, " ").concat(sizingRules)
@@ -1481,8 +1488,8 @@ var colorConfig$1 = {
         active: 'bg-bia-verdantgreen-dark-40 text-primary-white',
     },
     blue: {
-        default: 'bg-bia-olympicblue hover:bg-bia-olympicblue-light-10 active:bg-bia-olympicblue-dark-10 text-primary-white disabled:bg-bia-olympicblue-dark-20 disabled:text-primary-white/50 disabled:cursor-default',
-        active: 'bg-bia-olympicblue-dark-10 text-primary-white',
+        default: 'bg-bia-crayola hover:bg-bia-crayola-light-10 active:bg-bia-crayola-dark-10 text-primary-white disabled:bg-bia-crayola-dark-20 disabled:text-primary-white/50 disabled:cursor-default',
+        active: 'bg-bia-crayola-dark-10 text-primary-white',
     },
 };
 
@@ -1549,12 +1556,12 @@ function Color() {
             tailwind: 'blue',
         },
         {
-            css: 'olympic',
-            tailwind: 'olympicblue',
+            css: 'crayola',
+            tailwind: 'crayola',
         },
         {
             css: 'sky',
-            tailwind: 'skyblue',
+            tailwind: 'sky',
         },
         {
             css: 'coolgrey',
@@ -1783,7 +1790,7 @@ MenuItem.defaultProps = {
     onClick: function () { },
 };
 
-var sizeConfig$c = {
+var sizeConfig$b = {
     md: {
         fieldSize: 'text-size-base p-2.5 font-[350] h-10',
         iconPosition: 'right-[10px]',
@@ -1839,13 +1846,13 @@ function PasswordIcon(_a) {
 }
 
 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, props = __rest(_a, ["descText", "disabled", "icon", "id", "size", "isValid", "label", "placeholder", "readOnly", "required", "variant", "value", "onChange", "maxLength", "inputClassName", "isFlatRight", "actionElement", "autoComplete"]);
+    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 = useState(false), isShow = _r[0], setIsShow = _r[1];
     var _s = styleConfig[variant], fieldStyle = _s.fieldStyle, iconStyle = _s.iconStyle;
     var _t = isTransparent
-        ? __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;
+        ? __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;
     var borderStyle = isTransparent
         ? 'border-transparent bg-transparent' // customize border rule for transparent variant
         : 'border border-bia-grey-dark-10 bg-primary-white';
@@ -1884,7 +1891,7 @@ function TextInput(_a) {
             label,
             required && React.createElement("span", { className: "p-1 text-bia-red" }, "*"))),
         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 }, props)),
+            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)),
         (descText || maxLength) && (React.createElement("div", { className: "bianic-text-input-desc flex justify-between gap-1 text-xs ".concat(descColor) },
             React.createElement("span", null, descText),
@@ -1911,7 +1918,7 @@ TextInput.defaultProps = {
 };
 
 // Desc: Radio button size configuration
-var sizeConfig$b = {
+var sizeConfig$a = {
     md: {
         checkSize: 'w-[22px] h-[22px]',
         labelSize: 'text-size-base',
@@ -1926,7 +1933,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$b[validatedSize], checkSize = _f.checkSize, labelSize = _f.labelSize;
+    var _f = sizeConfig$a[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 }),
@@ -1942,7 +1949,7 @@ Radio.defaultProps = {
     checked: false,
 };
 
-var sizeConfig$a = {
+var sizeConfig$9 = {
     md: {
         inputClass: 'text-size-base font-[350] min-h-10',
     },
@@ -1965,7 +1972,7 @@ var ResizeIcon = function (_a) {
 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$a[size].inputClass;
+    var inputClass = sizeConfig$9[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" },
@@ -1995,7 +2002,7 @@ TextArea.defaultProps = {
     value: '',
 };
 
-var sizeConfig$9 = {
+var sizeConfig$8 = {
     md: {
         checkClass: 'w-[22px] h-[22px]',
         labelClass: 'text-size-base font-[350]',
@@ -2009,7 +2016,7 @@ var sizeConfig$9 = {
 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$9[validUnion(size, sizeUnion$3)], checkClass = _e.checkClass, labelClass = _e.labelClass;
+    var _e = sizeConfig$8[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)),
@@ -2027,7 +2034,7 @@ Checkbox.defaultProps = {
     onChange: function () { },
 };
 
-var sizeConfig$8 = {
+var sizeConfig$7 = {
     md: {
         searchSize: 'text-size-base p-2.5 font-[350] h-10',
         iconSize: 'right-[10px] text-[18px]',
@@ -2038,7 +2045,7 @@ var sizeConfig$8 = {
     },
 };
 
-var sizeConfig$7 = {
+var sizeConfig$6 = {
     md: {
         container: 'text-size-base font-[350] py-[3px] first:pt-[8px] last:pb-[8px]',
         item: 'min-h-[34px] p-2.5',
@@ -2056,7 +2063,7 @@ function CustomDropdownItem(_a) {
     var _f = useState(false), isHoveredSubMenu = _f[0], setIsHoveredSubMenu = _f[1];
     var isOpenDropdown = isHovered || isHoveredSubMenu;
     var selectedClass = isSelected ? 'font-semibold' : 'font-normal';
-    var _g = sizeConfig$7[size], containerClass = _g.container, item = _g.item;
+    var _g = sizeConfig$6[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 () { } },
@@ -2083,7 +2090,7 @@ function DefaultDropdownItem(_a) {
     var _g = useState(false), isHoveredSubMenu = _g[0], setIsHoveredSubMenu = _g[1];
     var isOpenDropdown = isHovered || isHoveredSubMenu;
     var selectedClass = isSelected ? 'font-semibold' : 'font-normal';
-    var _h = sizeConfig$7[size], containerClass = _h.container, item = _h.item;
+    var _h = sizeConfig$6[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 () { } },
@@ -2105,12 +2112,95 @@ DefaultDropdownItem.defaultProps = {
     caption: '',
 };
 
+var containerSizeConfig = {
+    sm: 'min-w-[72px]',
+    md: 'min-w-[96px]',
+};
+var itemSizeConfig = {
+    sm: 'min-h-[30px] border-y-[2px] border-bia-white',
+    md: 'min-h-[40px] border-y-[3px] border-bia-white',
+};
+var fontConfig = {
+    sm: 'text-[12px] font-[400]',
+    md: 'text-[14px] font-[350]',
+};
+
+var DropdownContainer = forwardRef(function DropdownContainer(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 ? 0 : _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'];
+    var containerClass = "".concat(sizeClass, " ").concat(radiusClass, " ").concat(className);
+    var handleClickDrpdownItem = function (e, val) {
+        onClickItem(e, val);
+        onClose();
+    };
+    return (open && (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(); } })),
+        React.createElement("div", __assign({ style: {
+                zIndex: zIndex + 10, // Ensure dropdown is above overlay
+            }, ref: ref, className: "bianic-dropdown-container bg-bia-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] ".concat(containerClass) }, restProps), Children.map(children, function (child) {
+            return React.isValidElement(child)
+                ? // Kirimkan handleItemClick sebagai props onClick ke setiap DropdownItem
+                    cloneElement(child, {
+                        onClose: function () { return onClose(); },
+                        size: size,
+                        onClickItem: function (e, val) { return handleClickDrpdownItem(e, val); },
+                        zIndex: zIndex + 10,
+                    })
+                : child;
+        })))));
+});
+DropdownContainer.defaultProps = {
+    isTopFlat: false,
+};
+
+function DropdownItem(_a) {
+    var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.onClickItem, onClickItem = _c === void 0 ? function () { } : _c, _d = _a.onClose, onClose = _d === void 0 ? function () { } : _d, _e = _a.size, size = _e === void 0 ? 'md' : _e, _f = _a.value, value = _f === void 0 ? '' : _f, content = _a.content, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.zIndex, zIndex = _h === void 0 ? 0 : _h, props = __rest(_a, ["children", "className", "onClickItem", "onClose", "size", "value", "content", "disabled", "zIndex"]);
+    var _j = useState(false), isHovered = _j[0], setIsHovered = _j[1];
+    var _k = useState(false), isLeft = _k[0], setIsLeft = _k[1];
+    var fontClass = fontConfig[size] || fontConfig['md'];
+    var itemSizeClass = itemSizeConfig[size] || itemSizeConfig['md'];
+    var itemClass = "".concat(itemSizeClass, " ").concat(fontClass, " ").concat(className);
+    var chevronSize = size === 'sm' ? 14 : 18;
+    var DropdownContRef = useRef(null);
+    useEffect(function () {
+        var _a;
+        if (DropdownContRef.current) {
+            // Adjust dropdown position to prevent overflow on the right.
+            var MenuContRect = (_a = DropdownContRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            var RectRight = MenuContRect === null || MenuContRect === void 0 ? void 0 : MenuContRect.right;
+            var innerWindow = window.innerWidth;
+            if (RectRight > innerWindow)
+                setIsLeft(true);
+            else
+                setIsLeft(false);
+        }
+    }, [isHovered]);
+    var translateClass = isLeft
+        ? 'left-0 -translate-x-full'
+        : 'right-0 translate-x-full';
+    var currentZIndex = zIndex + 10;
+    return (React.createElement("div", { className: "bianic-dropdown-item group/main relative cursor-pointer first:rounded-t-radius-sm first:pt-[5px] last:rounded-b-radius-sm last:pb-[5px]", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } },
+        React.createElement("button", __assign({ className: "relative flex w-full !min-w-fit items-center justify-start whitespace-nowrap px-[15px] py-[5px] text-left text-bia-black disabled:cursor-not-allowed disabled:text-bia-coolgrey-light-50 hover:[&:not(:disabled)]:bg-bia-blue-pastel ".concat(itemClass), style: {
+                zIndex: isHovered ? currentZIndex : currentZIndex + 15,
+            }, onClick: function (e) {
+                onClickItem(e, value);
+            }, 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))));
+}
+DropdownItem.defaultProps = {
+    className: '',
+    onClickItem: function () { },
+};
+
 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, options = _a.options, _d = _a.required, required = _d === void 0 ? false : _d, selected = _a.selected, setSelected = _a.setSelected, _e = _a.onClickDropdown, onClickDropdown = _e === void 0 ? function () { } : _e, props = __rest(_a, ["descText", "disabled", "size", "id", "label", "options", "required", "selected", "setSelected", "onClickDropdown"]);
-    var _f = useState(false), isOpen = _f[0], setIsOpen = _f[1];
+    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, id = _a.id, 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 = useState(false), isOpen = _k[0], setIsOpen = _k[1];
     var validatedSize = validUnion(size, sizeUnion$2);
-    var _g = sizeConfig$8[validatedSize], searchSize = _g.searchSize, iconSize = _g.iconSize;
+    var _l = sizeConfig$7[validatedSize], searchSize = _l.searchSize, iconSize = _l.iconSize;
     var inputRef = useRef(null);
     var handleOutsideClick = function (e) {
         if (inputRef.current && !inputRef.current.contains(e.target)) {
@@ -2149,7 +2239,7 @@ function SelectInput(_a) {
         React.createElement("div", { className: "group relative w-full" },
             React.createElement("input", __assign({ className: "field peer w-full cursor-pointer rounded border border-bia-grey-dark-10 bg-primary-white pe-8 focus-visible:outline-none enabled:hover:rounded-b-none enabled:hover:border-b-bia-blue enabled:focus:rounded-b-none enabled:focus:border-b-bia-blue disabled:bg-bia-grey-light-80 disabled:text-bia-coolgrey ".concat(searchSize), onClick: function () { return setIsOpen(!isOpen); }, value: selectedLabel, readOnly: true, id: id, disabled: disabled }, props)),
             React.createElement("div", { className: "pointer-events-none absolute inset-y-0 flex items-center pl-3 text-bia-coolgrey peer-disabled:text-bia-coolgrey-light-50 ".concat(iconSize) }, isOpen ? React.createElement(TbChevronUp, null) : React.createElement(TbChevronDown, null)),
-            isOpen && (React.createElement("div", { className: "absolute z-10 w-full overflow-y-auto rounded-b-md border border-bia-grey-dark-10 bg-primary-white shadow-lg", ref: optionsRef, onClick: onClickDropdown }, options.map(function (option) {
+            children === undefined && isOpen && (React.createElement("div", { className: "absolute z-10 w-full overflow-y-auto rounded-b-md border border-bia-grey-dark-10 bg-primary-white shadow-lg", ref: optionsRef, onClick: onClickDropdown }, options.map(function (option) {
                 var isSelected = JSON.stringify(option) === JSON.stringify(selected);
                 var optionLabel = isObjectOptionItem ? option.label : option;
                 var optionCaption = isObjectOptionItem ? option.caption : '';
@@ -2160,6 +2250,18 @@ function SelectInput(_a) {
                         setSelected(option);
                         setIsOpen(false);
                     } }));
+            }))),
+            children && isOpen && (React.createElement(DropdownContainer, __assign({ open: isOpen, onClose: function () { return setIsOpen(false); }, size: size, isTopFlat: true, 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,
+                        onClick: function () {
+                            setSelected(child.props.value);
+                            setIsOpen(false);
+                        },
+                    });
+                }
+                return child;
             })))),
         descText && (React.createElement("span", { className: "desc mt-2 text-xs text-primary-cool" }, descText))));
 }
@@ -2174,7 +2276,7 @@ SelectInput.defaultProps = {
     setSelected: function () { },
 };
 
-var sizeConfig$6 = {
+var sizeConfig$5 = {
     md: {
         iconClass: 'right-[10px]',
         iconSize: '18',
@@ -2189,90 +2291,13 @@ var sizeConfig$6 = {
     },
 };
 
-var sizeConfig$5 = {
-    sm: 'min-w-[72px]',
-    md: 'min-w-[96px]',
-};
-var fontConfig = {
-    sm: 'text-[12px] font-[400]',
-    md: 'text-[14px] font-[350]',
-};
-
-var DropdownContainer = forwardRef(function DropdownContainer(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 ? 0 : _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 = sizeConfig$5[size] || sizeConfig$5['md'];
-    var containerClass = "".concat(sizeClass, " ").concat(radiusClass, " ").concat(className);
-    var handleClickDrpdownItem = function (e, val) {
-        onClickItem(e, val);
-        onClose();
-    };
-    return (open && (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(); } })),
-        React.createElement("div", __assign({ style: {
-                zIndex: zIndex + 10, // Ensure dropdown is above overlay
-            }, ref: ref, className: "bianic-dropdown-container bg-bia-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] ".concat(containerClass) }, restProps), Children.map(children, function (child) {
-            return React.isValidElement(child)
-                ? // Kirimkan handleItemClick sebagai props onClick ke setiap DropdownItem
-                    cloneElement(child, {
-                        onClose: function () { return onClose(); },
-                        size: size,
-                        onClickItem: function (e, val) { return handleClickDrpdownItem(e, val); },
-                        zIndex: zIndex + 10,
-                    })
-                : child;
-        })))));
-});
-DropdownContainer.defaultProps = {
-    isTopFlat: false,
-};
-
-function DropdownItem(_a) {
-    var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.onClickItem, onClickItem = _c === void 0 ? function () { } : _c, _d = _a.onClose, onClose = _d === void 0 ? function () { } : _d, _e = _a.size, size = _e === void 0 ? 'md' : _e, _f = _a.value, value = _f === void 0 ? '' : _f, content = _a.content, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.zIndex, zIndex = _h === void 0 ? 0 : _h, props = __rest(_a, ["children", "className", "onClickItem", "onClose", "size", "value", "content", "disabled", "zIndex"]);
-    var _j = useState(false), isHovered = _j[0], setIsHovered = _j[1];
-    var _k = useState(false), isLeft = _k[0], setIsLeft = _k[1];
-    var fontClass = fontConfig[size] || fontConfig['md'];
-    var itemClass = "".concat(fontClass, " ").concat(className);
-    var chevronSize = size === 'sm' ? 14 : 18;
-    var DropdownContRef = useRef(null);
-    useEffect(function () {
-        var _a;
-        if (DropdownContRef.current) {
-            // Adjust dropdown position to prevent overflow on the right.
-            var MenuContRect = (_a = DropdownContRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-            var RectRight = MenuContRect === null || MenuContRect === void 0 ? void 0 : MenuContRect.right;
-            var innerWindow = window.innerWidth;
-            if (RectRight > innerWindow)
-                setIsLeft(true);
-            else
-                setIsLeft(false);
-        }
-    }, [isHovered]);
-    var translateClass = isLeft
-        ? 'left-0 -translate-x-full'
-        : 'right-0 translate-x-full';
-    var currentZIndex = zIndex + 10;
-    return (React.createElement("div", { className: "bianic-dropdown-item group/main relative cursor-pointer first:rounded-t-radius-sm first:pt-[6px] last:rounded-b-radius-sm last:pb-[6px]", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } },
-        React.createElement("button", __assign({ className: "relative flex h-full w-full !min-w-fit items-center justify-start whitespace-nowrap px-[15px] py-[5px] text-left text-bia-black disabled:cursor-not-allowed disabled:text-bia-coolgrey-light-50 hover:[&:not(:disabled)]:bg-bia-blue-pastel ".concat(itemClass), style: {
-                zIndex: isHovered ? currentZIndex : currentZIndex + 15,
-            }, onClick: function (e) {
-                onClickItem(e, value);
-            }, 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))));
-}
-DropdownItem.defaultProps = {
-    className: '',
-    onClickItem: function () { },
-};
-
 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 = useState(false), isOpen = _l[0], setIsOpen = _l[1];
     var _m = useState(value.label || ''), searchTerm = _m[0], setSearchTerm = _m[1];
-    var _o = sizeConfig$6[size], iconClass = _o.iconClass, iconSize = _o.iconSize, inputClass = _o.inputClass;
+    var _o = sizeConfig$5[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 = useRef(null);
     var handleOutsideClick = function (e) {
         if (inputRef.current && !inputRef.current.contains(e.target)) {
@@ -2368,11 +2393,10 @@ function LiveSearch(_a) {
                     setValue({ id: null, label: e.target.value });
                     handleInputChange(e);
                 }, type: "text", readOnly: readOnly, autoComplete: autoComplete }),
-            React.createElement("div", { className: "absolute inset-y-0 flex items-center pl-3 group-hover:hidden ".concat(iconClass) },
-                React.createElement(TbZoom, { className: "text-primary-black", style: { fontSize: iconSize } })),
-            React.createElement("div", { className: "absolute inset-y-0 z-20 hidden pl-3 group-hover:block ".concat(iconClass) },
-                React.createElement("button", { onClick: function () { return setValue({ id: null, label: '' }); }, className: "flex h-full w-full items-center" },
-                    React.createElement(TbX, { className: "text-primary-black", style: { fontSize: iconSize } }))),
+            React.createElement("div", { className: "absolute inset-y-0 flex items-center pl-3 ".concat(iconClass) },
+                !isValueExist && (React.createElement(TbZoom, { className: "text-primary-black", style: { fontSize: iconSize } })),
+                isValueExist && (React.createElement("button", { onClick: function () { return setValue({ id: null, label: '' }); }, className: "flex h-full w-full items-center" },
+                    React.createElement(TbX, { className: "text-primary-black", style: { fontSize: iconSize } })))),
             children === undefined && isOpen && (React.createElement("div", { className: "border-grey-100 absolute z-10 max-h-60 w-full overflow-y-auto rounded-b-md border bg-primary-white shadow-lg", onClick: onClickDropdown }, filteredOptions.map(function (option) {
                 var isSelected = value && value.id && option.id === value.id;
                 return option.custom ? (React.createElement(CustomDropdownItem, { size: size, isSelected: isSelected, className: dropContClassName, onClick: function () {
@@ -2383,7 +2407,7 @@ function LiveSearch(_a) {
                         setIsOpen(false);
                     } }));
             }))),
-            children && isOpen && (React.createElement(DropdownContainer, __assign({ open: isOpen, onClose: function () { return setIsOpen(false); }, size: size, isTopFlat: true, 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), hasFilteredResults
+            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" }, 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.") }))))),
@@ -2445,9 +2469,9 @@ var roundedConfig = {
     tn: 'first:rounded-l-radius-tn last:rounded-r-radius-tn',
 };
 var sizeConfig$3 = {
-    lg: 'text-size-md leading-[23.94px] px-[13px] py-[10.5px] ',
-    md: 'text-size-base leading-[21px] px-[11px] py-[9px] ',
-    sm: 'text-size-sm leading-[15.96px] px-[7px] py-[5px] ',
+    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] ',
     tn: 'text-size-sm leading-[15.96px] px-[4px] py-[2px] ',
 };
 var minWidthConfig = {
@@ -2456,16 +2480,22 @@ var minWidthConfig = {
     sm: 'min-w-[72px]',
     tn: 'min-w-[64px]',
 };
+var minHeightConfig = {
+    lg: 'min-h-[48px]',
+    md: 'min-h-[40px]',
+    sm: 'min-h-[30px]',
+    tn: 'min-h-[22px]',
+};
 
 function SegmentButtonItem(_a) {
-    var _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 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(sizeConfig$3[size], " ").concat(minWidthConfig[size]);
+        ? "".concat(sizeConfig$3[size], " ").concat(minHeightConfig[size])
+        : "".concat(sizeConfig$3[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 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) }, children));
+    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));
 }
 
 function SegmentButtonGroup(_a) {
@@ -2505,8 +2535,445 @@ var FormGroupLabel = function (_a) {
         childrenElement(iconRight)));
 };
 
+var oneDayValue = 24 * 60 * 60 * 1000; // milliseconds in one day
+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;
+    // Constants
+    var daysMap = [
+        'Monday',
+        'Tuesday',
+        'Wednesday',
+        'Thursday',
+        'Friday',
+        'Saturday',
+        'Sunday',
+    ];
+    var monthMap = [
+        'January',
+        'February',
+        'March',
+        'April',
+        'May',
+        'June',
+        'July',
+        'August',
+        'September',
+        'October',
+        'November',
+        'December',
+    ];
+    var modeMap = ['date', 'year', 'month'];
+    // Mode Controller
+    var _b = useState(modeMap[0]), pickerMode = _b[0], setPickerMode = _b[1];
+    var _c = useState(''), prevMode = _c[0], setPrevMode = _c[1];
+    // styling constants and functions
+    var chevronButtonStyle = 'text-bia-coolgrey';
+    var selectedDateStyle = function (date, dateSelected) {
+        var isSelected = checkDateEquals(date, dateSelected);
+        var isToday = checkDateEquals(date, new Date(todayValue));
+        if (isSelected) {
+            return 'bg-bia-blue-dark-10 text-bia-white rounded-full border border-bia-blue-dark-10';
+        }
+        else if (!isSelected && isToday) {
+            return 'bg-bia-blue-pastel text-bia-black rounded-full border border-bia-blue-light-50';
+        }
+        else {
+            return 'hover:bg-bia-blue-pastel rounded-full';
+        }
+    };
+    var datesColorStyle = function (date, viewMonth) {
+        if (date.getMonth() === viewMonth) {
+            return 'text-bia-black';
+        }
+        else {
+            return 'text-bia-coolgrey';
+        }
+    };
+    var selectedMonthStyle = function (month, monthSelected) {
+        if (month === monthSelected) {
+            return 'bg-bia-blue-dark-10 text-bia-white rounded-full border border-bia-blue-dark-10';
+        }
+        else {
+            return 'hover:bg-bia-blue-pastel rounded-full';
+        }
+    };
+    // Supporting functions
+    var checkDateEquals = function (date1, date2) {
+        if (!date2 || !date1)
+            return false;
+        return (date1.getFullYear() === date2.getFullYear() &&
+            date1.getMonth() === date2.getMonth() &&
+            date1.getDate() === date2.getDate());
+    };
+    // handler
+    var handleViewNextMonth = function () {
+        if (viewMonthValue === 11) {
+            setViewMonthValue(0);
+            setViewYearValue(viewYearValue + 1);
+            setViewDecadeValue(viewYearValue + 1);
+        }
+        else {
+            setViewMonthValue(viewMonthValue + 1);
+        }
+    };
+    var handleViewNextYear = function () {
+        setViewYearValue(function (oldYear) { return oldYear + 1; });
+        setViewDecadeValue(function (oldYear) { return oldYear + 1; });
+    };
+    var handleViewPrevYear = function () {
+        setViewYearValue(function (oldYear) { return oldYear - 1; });
+        setViewDecadeValue(function (oldYear) { return oldYear - 1; });
+    };
+    var handleViewPrevMonth = function () {
+        if (viewMonthValue === 0) {
+            setViewMonthValue(11);
+            setViewYearValue(viewYearValue - 1);
+            setViewDecadeValue(viewYearValue - 1);
+        }
+        else {
+            setViewMonthValue(viewMonthValue - 1);
+        }
+    };
+    var handleNextAction = function () {
+        if (pickerMode === 'date') {
+            handleViewNextMonth();
+        }
+        else if (pickerMode === 'month') {
+            handleViewNextYear();
+        }
+        else {
+            setViewDecadeValue(function (oldvalue) { return oldvalue + 10; });
+        }
+    };
+    var handlePrevAction = function () {
+        if (pickerMode === 'date') {
+            handleViewPrevMonth();
+        }
+        else if (pickerMode === 'month') {
+            handleViewPrevYear();
+        }
+        else {
+            setViewDecadeValue(function (oldvalue) { return oldvalue - 10; });
+        }
+    };
+    var handleSetMonth = function (monthNumber) {
+        setViewMonthValue(monthNumber);
+        setPickerMode('date');
+    };
+    var handleSetYear = function (year, index) {
+        setViewYearValue(year);
+        setPickerMode(prevMode);
+    };
+    var handleSetSelectedDate = function (date) {
+        if (date.getMonth() !== viewMonthValue) {
+            // if the date is not in the current view month, update the view month and year
+            setViewMonthValue(date.getMonth());
+            setViewYearValue(date.getFullYear());
+        }
+        if (onDateChange) {
+            onDateChange(date);
+        }
+    };
+    var handlePickerMode = function (mode) {
+        setPickerMode(function (oldvalue) {
+            setPrevMode(oldvalue);
+            return mode;
+        });
+    };
+    // View Date Logic
+    var _d = useState(new Date(selectedDate || todayValue).getMonth()), viewMonthValue = _d[0], setViewMonthValue = _d[1]; // get the month of the selected date
+    var _e = useState(new Date(selectedDate || todayValue).getFullYear()), viewYearValue = _e[0], setViewYearValue = _e[1]; // get the year of the selected date
+    var _f = useState(new Date(selectedDate || todayValue).getFullYear()), viewDecadeValue = _f[0], setViewDecadeValue = _f[1]; // get the year for decaderange
+    // Month view logic
+    var monthStartDay = new Date("".concat(viewYearValue, "-").concat(viewMonthValue + 1, "-01")).getDay() === 0
+        ? 6
+        : new Date("".concat(viewYearValue, "-").concat(viewMonthValue + 1, "-01")).getDay() - 1;
+    var monthTotalDate = new Date(viewYearValue, viewMonthValue + 1, 0).getDate(); // get total days in the month
+    var monthCalenderView = monthTotalDate + monthStartDay > 35 ? 42 : 35; // for 5 or 6 weeks view for the calendar
+    var viewFirstDate = new Date("".concat(viewYearValue, "-").concat(viewMonthValue + 1, "-01"));
+    viewFirstDate.setDate(viewFirstDate.getDate() - monthStartDay); // get the first date of the view
+    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 = useState([]), displayDays = _g[0], setDisplayDays = _g[1];
+    function getDecadeRange(year) {
+        // Calculate the start of the decade
+        var startOfDecade = Math.floor(year / 10) * 10;
+        // Calculate the end of the decade
+        var endOfDecade = startOfDecade + 9;
+        // Create an array to hold the years in the decade
+        var decadeRange = [];
+        for (var i = startOfDecade; i <= endOfDecade + 2; i++) {
+            decadeRange.push(i);
+        }
+        return decadeRange;
+    }
+    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(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()))); }))));
+    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); } },
+        React.createElement(Text, { variant: "small-text" }, year))); })));
+    // useEffect to update displayDays when viewMonthValue or viewYearValue changes
+    useEffect(function () {
+        var tempDisplayDays = [];
+        for (var d = viewFirstDate; d <= viewLastDate; d.setDate(d.getDate() + 1)) {
+            tempDisplayDays.push(new Date(d));
+        }
+        setDisplayDays(tempDisplayDays);
+    }, [viewMonthValue, viewYearValue, selectedDate]);
+    return (React.createElement("div", { className: "bianic-datepicker-calendar flex flex-col gap-[15px] text-bia-black", ref: ref },
+        React.createElement("div", { className: "bianic-datepicker-calendar-controller flex  w-full items-center justify-between" },
+            React.createElement("button", { className: "bianic-datepicker-calendar-prev-button ".concat(chevronButtonStyle), onClick: function () { return handlePrevAction(); } },
+                React.createElement(TbChevronLeft, { size: 18 })),
+            React.createElement("div", { className: "bianic-datepicker-calendar-current-month gap flex items-center justify-center gap-1" },
+                React.createElement("button", { className: "".concat(pickerMode === 'date' ? '' : 'hidden'), onClick: function () { return handlePickerMode('month'); } },
+                    React.createElement(Text, { variant: "normal-text-semibold" },
+                        monthMap[viewMonthValue],
+                        ' ')),
+                React.createElement("button", { className: "".concat(pickerMode === 'date' || pickerMode === 'month' ? '' : 'hidden'), onClick: function () { return handlePickerMode('year'); } },
+                    React.createElement(Text, { variant: "normal-text" }, viewYearValue)),
+                React.createElement("button", { className: "".concat(pickerMode === 'year' ? '' : 'hidden') },
+                    React.createElement(Text, { variant: "normal-text" }, "".concat(yearDisplayRange[1], " - ").concat(yearDisplayRange[10])))),
+            React.createElement("button", { className: "bianic-datepicker-calendar-next-button ".concat(chevronButtonStyle), onClick: function () { return handleNextAction(); } },
+                React.createElement(TbChevronRight, { size: 18 }))),
+        React.createElement("div", { className: "bianic-datepicker-calendar-days-grid flex flex-col " },
+            dateDisplay,
+            monthDisplay,
+            yearDisplay)));
+};
+
+var monthMap = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+];
+function DatePicker(_a) {
+    var value = _a.value, onChange = _a.onChange;
+    // State and Ref
+    var inputRef = useRef(null);
+    var wrapperRef = useRef(null);
+    var pickerRef = useRef(null);
+    var _b = useDetectOutsideClick(wrapperRef, false, pickerRef), isPickerOpen = _b[0], setIsPickerOpen = _b[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 })),
+        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 editDateFormatter = function (date) {
+        var localString = date.toLocaleDateString().split('/');
+        return localString.reverse().join('-');
+    };
+    var displayDateFormatter = function (date) {
+        return "".concat(date.getDate(), " ").concat(monthMap[date.getMonth()].slice(0, 3), " '").concat(date.getFullYear().toString().slice(2, 4));
+    };
+    // Convert Date to string for display
+    var formattedValue = value instanceof Date ? displayDateFormatter(value) : value;
+    var _d = useState(formattedValue), viewValue = _d[0], setViewValue = _d[1];
+    useRef(null);
+    var _e = 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 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('-');
+        if (splittedDate.length !== 3) {
+            return [1, value]; // Invalid format
+        }
+        var year = splittedDate[0];
+        var month = splittedDate[1];
+        var day = splittedDate[2];
+        // 2. validate year
+        if (!/^\d{4}$/.test(year)) {
+            return [2, value];
+        }
+        var parsedYear = parseInt(year, 10);
+        // 3. validate month digit
+        if (!/^\d{1,2}$/.test(month)) {
+            return [3, value];
+        }
+        // 4. validate month range
+        var parsedMonth = parseInt(month, 10);
+        if (parsedMonth < 1 || parsedMonth > 12) {
+            return [4, value];
+        }
+        var formattedMonth = String(parsedMonth).padStart(2, '0');
+        // 5. validate date digit
+        if (!/^\d{1,2}$/.test(day)) {
+            return [5, value];
+        }
+        // 6. validate date range
+        var parsedDate = parseInt(day, 10);
+        if (parsedDate < 1 || parsedDate > 31) {
+            return [6, value];
+        }
+        var formattedDay = String(parsedDate).padStart(2, '0');
+        // 7. validate date rightness
+        var dateObject = new Date(parsedYear, parsedMonth - 1, parsedDate);
+        if (dateObject.getFullYear() !== parsedYear ||
+            dateObject.getMonth() !== parsedMonth - 1 ||
+            dateObject.getDate() !== parsedDate) {
+            return [7, value];
+        }
+        // If all checks pass, the date is valid and formatted
+        var formattedDate = "".concat(year, "-").concat(formattedMonth, "-").concat(formattedDay);
+        return [0, formattedDate];
+    };
+    // Update actual value on release
+    var updateValue = function (newValue) {
+        var date = new Date(newValue); // Create a Date object from the input
+        if (onChange && !Number.isNaN(date.valueOf())) {
+            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 (-)
+        // The caret (^) matches the beginning of the string, and the dollar sign ($) matches the end.
+        // This ensures the *entire* string matches the pattern.
+        var regex = /^[0-9-]*$/;
+        if (regex.test(value)) {
+            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
+    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" }, "*"))),
+        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 () {
+                    setIsActive && setIsActive(true);
+                    setViewValue(editDateFormatter(value));
+                }, onChange: handleChange, onBlur: function () {
+                    var _a = validateAndFormatDate(viewValue), status = _a[0], validatedValue = _a[1];
+                    setViewValue(displayDateFormatter(value));
+                    if (status !== 0) ;
+                    else {
+                        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 () {
+                        buttonAction && buttonAction();
+                    } },
+                    React.createElement(TbCalendar, null))))));
+};
+
 var Node = function (_a) {
-    var className = _a.className, _b = _a.fill, fill = _b === void 0 ? '#2f2f2f' : _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;
     return (React.createElement("svg", { className: className, width: size, height: size, viewBox: "0 0 24 24", fill: fill, stroke: fill, xmlns: "http://www.w3.org/2000/svg" },
         React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M15.8487 7.78595L6.93709 7.78595V6.03193L15.8487 6.03193C16.3439 6.03193 16.9911 6.23168 17.5149 6.76349C18.0559 7.3128 18.3919 8.13899 18.3919 9.25864C18.3919 10.6249 17.9588 11.5597 17.2603 12.1263C16.5971 12.6642 15.8434 12.7464 15.4322 12.7464H8.40792C8.16699 12.7828 7.79335 12.9098 7.48812 13.1699C7.19483 13.42 6.93709 13.8119 6.93709 14.4802C6.93709 15.4203 7.25406 15.7883 7.48638 15.9569C7.77053 16.1631 8.13102 16.2139 8.35104 16.2139L17 16.2139V17.968L8.35104 17.968C7.94624 17.968 7.16126 17.8882 6.45613 17.3765C5.69918 16.8271 5.18307 15.8897 5.18307 14.4802C5.18307 13.2687 5.68899 12.3988 6.35026 11.8351C6.98104 11.2974 7.72576 11.058 8.25173 10.998L8.30122 10.9924H15.4322C15.6457 10.9924 15.9333 10.9441 16.1553 10.764C16.342 10.6126 16.6378 10.242 16.6378 9.25864C16.6378 8.49852 16.4184 8.14987 16.2652 7.99427C16.0947 7.82117 15.9088 7.78595 15.8487 7.78595Z", fill: "inherit" }),
         React.createElement("rect", { x: "4.82964", y: "5.22156", width: "3.28794", height: "3.28794", rx: "1.64397", "stroke-width": "0.954563" }),
@@ -2514,37 +2981,37 @@ var Node = function (_a) {
 };
 
 var Port = function (_a) {
-    var className = _a.className, _b = _a.fill, fill = _b === void 0 ? '#2f2f2f' : _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;
     return (React.createElement("svg", { className: className, width: size, height: size, viewBox: "0 0 24 24", fill: fill, xmlns: "http://www.w3.org/2000/svg" },
         React.createElement("path", { d: "M11.9998 3.81818C16.5185 3.81818 20.1814 7.48121 20.1815 11.9998C20.1815 16.5185 16.5185 20.1815 11.9998 20.1815C7.4812 20.1814 3.81818 16.5185 3.81818 11.9998C3.81827 7.48127 7.48126 3.81828 11.9998 3.81818ZM12.0008 7.09064C11.7838 7.09064 11.5751 7.17744 11.4217 7.33088C11.2684 7.48427 11.1825 7.69214 11.1824 7.909V11.1815H7.909C7.69216 11.1816 7.48421 11.2684 7.33087 11.4217C7.17755 11.5751 7.09166 11.783 7.09161 11.9998C7.09161 12.2168 7.17743 12.4255 7.33087 12.5789C7.48419 12.7321 7.69224 12.8181 7.909 12.8182H11.1824V16.0906C11.1824 16.3076 11.2683 16.5163 11.4217 16.6697C11.5751 16.8231 11.7838 16.909 12.0008 16.909C12.2176 16.9089 12.4256 16.823 12.5789 16.6697C12.7324 16.5163 12.8182 16.3076 12.8182 16.0906V12.8182H16.0916C16.3084 12.8181 16.5164 12.7321 16.6697 12.5789C16.8232 12.4255 16.909 12.2168 16.909 11.9998C16.9089 11.7829 16.8231 11.5751 16.6697 11.4217C16.5164 11.2683 16.3085 11.1816 16.0916 11.1815H12.8182V7.909C12.8182 7.69213 12.7322 7.48428 12.5789 7.33088C12.4256 7.17755 12.2176 7.09076 12.0008 7.09064Z", fill: "inherit" })));
 };
 
 var ExposedPort = function (_a) {
-    var className = _a.className, _b = _a.fill, fill = _b === void 0 ? '#2f2f2f' : _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;
     return (React.createElement("svg", { className: className, width: size, height: size, viewBox: "0 0 24 24", fill: fill, xmlns: "http://www.w3.org/2000/svg" },
         React.createElement("path", { d: "M11.9999 3.33211C12.7365 3.33211 13.443 3.62479 13.9638 4.14559L19.8544 10.0362C20.3752 10.557 20.6679 11.2636 20.6679 12.0001C20.6679 12.7366 20.3752 13.4431 19.8544 13.9639L13.9638 19.8546C13.443 20.3754 12.7365 20.668 11.9999 20.668C11.2634 20.668 10.5569 20.3754 10.0361 19.8546L4.14545 13.9639C3.62465 13.4431 3.33197 12.7366 3.33197 12.0001C3.33199 11.2636 3.62467 10.557 4.14545 10.0362L10.0361 4.14559C10.5569 3.62481 11.2634 3.33213 11.9999 3.33211ZM11.9999 7.0909C11.7832 7.09101 11.5751 7.17694 11.4218 7.33016C11.2684 7.4836 11.1826 7.69226 11.1826 7.90926V11.1817H7.90912C7.69237 11.1818 7.48433 11.2678 7.33099 11.421C7.17755 11.5744 7.09174 11.7831 7.09174 12.0001C7.09176 12.217 7.17765 12.4248 7.33099 12.5782C7.48436 12.7316 7.69224 12.8184 7.90912 12.8184H11.1826V16.0909C11.1826 16.3078 11.2685 16.5156 11.4218 16.669C11.5752 16.8224 11.7831 16.9092 11.9999 16.9093C12.2169 16.9093 12.4256 16.8225 12.579 16.669C12.7323 16.5156 12.8183 16.3078 12.8183 16.0909V12.8184H16.0917C16.3086 12.8183 16.5165 12.7315 16.6699 12.5782C16.8232 12.4248 16.9091 12.217 16.9091 12.0001C16.9091 11.7831 16.8233 11.5744 16.6699 11.421C16.5166 11.2678 16.3085 11.1818 16.0917 11.1817H12.8183V7.90926C12.8183 7.69226 12.7325 7.4836 12.579 7.33016C12.4256 7.17679 12.2169 7.0909 11.9999 7.0909Z", fill: "inherit" })));
 };
 
 var VirtualPort = function (_a) {
-    var className = _a.className, _b = _a.fill, fill = _b === void 0 ? '#2f2f2f' : _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;
     return (React.createElement("svg", { className: className, width: size, height: size, viewBox: "0 0 24 24", fill: fill, xmlns: "http://www.w3.org/2000/svg" },
         React.createElement("path", { d: "M16.909 3.81818C17.777 3.81818 18.6097 4.16341 19.2234 4.77717C19.8369 5.39083 20.1814 6.2229 20.1815 7.09064V16.909C20.1815 17.777 19.8372 18.6097 19.2234 19.2235C18.6097 19.8372 17.777 20.1815 16.909 20.1815H7.09064C6.2229 20.1814 5.39082 19.837 4.77716 19.2235C4.16341 18.6097 3.81818 17.777 3.81818 16.909V7.09064C3.81825 6.22276 4.16347 5.39086 4.77716 4.77717C5.39085 4.16347 6.22275 3.81825 7.09064 3.81818H16.909ZM12.0008 7.09064C11.7838 7.09064 11.5751 7.17744 11.4217 7.33088C11.2684 7.48427 11.1825 7.69214 11.1824 7.909V11.1815H7.909C7.69216 11.1816 7.48421 11.2684 7.33087 11.4217C7.17755 11.5751 7.09166 11.783 7.09161 11.9998C7.09161 12.2168 7.17743 12.4255 7.33087 12.5789C7.48419 12.7321 7.69224 12.8181 7.909 12.8182H11.1824V16.0906C11.1824 16.3076 11.2683 16.5163 11.4217 16.6697C11.5751 16.8231 11.7838 16.909 12.0008 16.909C12.2176 16.9089 12.4256 16.823 12.5789 16.6697C12.7324 16.5163 12.8182 16.3076 12.8182 16.0906V12.8182H16.0916C16.3084 12.8181 16.5164 12.7321 16.6697 12.5789C16.8232 12.4255 16.909 12.2168 16.909 11.9998C16.9089 11.7829 16.8231 11.5751 16.6697 11.4217C16.5164 11.2683 16.3085 11.1816 16.0916 11.1815H12.8182V7.909C12.8182 7.69213 12.7322 7.48428 12.5789 7.33088C12.4256 7.17755 12.2176 7.09076 12.0008 7.09064Z", fill: "inherit" })));
 };
 
 var AlertRoundedSquare = function (_a) {
-    var className = _a.className, _b = _a.fill, fill = _b === void 0 ? '#2f2f2f' : _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;
     return (React.createElement("svg", { className: className, width: size, height: size, viewBox: "0 0 24 24", fill: fill, xmlns: "http://www.w3.org/2000/svg" },
         React.createElement("path", { d: "M12 2C15.5929 2 18.2392 2.42477 19.9072 4.09277C21.5752 5.76078 22 8.40715 22 12C22 15.5929 21.5752 18.2392 19.9072 19.9072C18.2392 21.5752 15.5929 22 12 22C8.40715 22 5.76078 21.5752 4.09277 19.9072C2.42477 18.2392 2 15.5929 2 12C2 8.40715 2.42477 5.76078 4.09277 4.09277C5.76078 2.42477 8.40715 2 12 2ZM12 4C8.39285 4 6.53883 4.47484 5.50684 5.50684C4.47484 6.53883 4 8.39285 4 12C4 15.6071 4.47484 17.4612 5.50684 18.4932C6.53883 19.5252 8.39285 20 12 20C15.6071 20 17.4612 19.5252 18.4932 18.4932C19.5252 17.4612 20 15.6071 20 12C20 8.39285 19.5252 6.53883 18.4932 5.50684C17.4612 4.47484 15.6071 4 12 4ZM12.0098 15C12.5621 15 13.0098 15.4477 13.0098 16C13.0098 16.5523 12.5621 17 12.0098 17H12C11.4477 17 11 16.5523 11 16C11 15.4477 11.4477 15 12 15H12.0098ZM12 7C12.5523 7 13 7.44772 13 8V12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12V8C11 7.44772 11.4477 7 12 7Z", fill: "inherit" })));
 };
 
 var Stack = function (_a) {
-    var className = _a.className, _b = _a.fill, fill = _b === void 0 ? '#2f2f2f' : _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;
     return (React.createElement("svg", { className: className, width: size, height: size, viewBox: "0 0 20 20", fill: fill, xmlns: "http://www.w3.org/2000/svg" },
         React.createElement("path", { d: "M11.5884 7.24696C11.8417 7.09495 12.1583 7.09495 12.4116 7.24696L18.8567 11.114C19.3745 11.4247 19.3745 12.1753 18.8567 12.486L12.4116 16.353C12.1583 16.505 11.8417 16.505 11.5884 16.353L5.14332 12.486C4.62545 12.1753 4.62545 11.4247 5.14332 11.114L11.5884 7.24696Z", fill: "inherit" })));
 };
 
 var Discrepancy = function (_a) {
-    var className = _a.className, _b = _a.fill, fill = _b === void 0 ? '#2f2f2f' : _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;
     return (React.createElement("svg", { className: className, width: size, height: size, viewBox: "0 0 24 24", fill: fill, xmlns: "http://www.w3.org/2000/svg" },
         React.createElement("path", { d: "M13.2 3.6H3.40002V20.4H15.6V18H9.60001V16.8H13.2V10.8H15.6V7.2H10.7998V6H13.2V3.6Z", fill: "inherit" }),
         React.createElement("path", { d: "M14.4 3.6H16.8V6H14.4V3.6Z" }),
@@ -2556,7 +3023,7 @@ var Discrepancy = function (_a) {
 };
 
 var ModalBalance = function (_a) {
-    var className = _a.className, _b = _a.fill, fill = _b === void 0 ? '#2f2f2f' : _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;
     return (React.createElement("svg", { className: className, width: size, height: size, viewBox: "0 0 24 24", fill: fill, xmlns: "http://www.w3.org/2000/svg" },
         React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.7912 5.66667C10.7912 5.11438 11.2389 4.66667 11.7912 4.66667L16.6667 4.66667C17.219 4.66667 17.6667 5.11438 17.6667 5.66667C17.6667 6.21895 17.219 6.66667 16.6667 6.66667L11.7912 6.66667C11.2389 6.66667 10.7912 6.21895 10.7912 5.66667Z" }),
         React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M9.95955 9.62623C10.3501 9.2357 10.9832 9.2357 11.3738 9.62623L15.8738 14.1262C16.2643 14.5168 16.2643 15.1499 15.8738 15.5404C15.4832 15.931 14.8501 15.931 14.4595 15.5404L9.95955 11.0404C9.56903 10.6499 9.56903 10.0168 9.95955 9.62623Z" }),
@@ -2568,27 +3035,27 @@ var ModalBalance = function (_a) {
 };
 
 var CubeHeader = function (_a) {
-    var className = _a.className, _b = _a.fill, fill = _b === void 0 ? '#2f2f2f' : _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;
     return (React.createElement("svg", { className: className, width: size, height: size, viewBox: "0 0 24 24", fill: fill, xmlns: "http://www.w3.org/2000/svg" },
         React.createElement("path", { d: "M17.895 3.553C17.8119 3.38684 17.6841 3.24711 17.526 3.14944C17.368 3.05177 17.1858 3.00003 17 3H7.00001C6.62102 3 6.27501 3.214 6.10501 3.553L2.10501 11.553C2.03549 11.6919 1.9993 11.8451 1.9993 12.0005C1.9993 12.1559 2.03549 12.3091 2.10501 12.448L6.10501 20.448C6.27501 20.786 6.62102 21 7.00001 21H17C17.379 21 17.725 20.786 17.895 20.447L21.895 12.447C21.9645 12.3081 22.0007 12.1549 22.0007 11.9995C22.0007 11.8441 21.9645 11.6909 21.895 11.552L17.895 3.553ZM19.382 11H11.618L8.61802 5H16.382L19.382 11ZM4.11801 12L7.00001 6.236L9.88202 12L7.00001 17.764L4.11801 12ZM16.382 19H8.61802L11.618 13H19.382L16.382 19Z", fill: "inherit" })));
 };
 
 var Legend = function (_a) {
-    var className = _a.className, _b = _a.fill, fill = _b === void 0 ? '#2f2f2f' : _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;
     return (React.createElement("svg", { className: className, width: size, height: size, viewBox: "0 0 24 24", fill: fill, xmlns: "http://www.w3.org/2000/svg" },
         React.createElement("path", { d: "M6 4C5.46957 4 4.96086 4.21071 4.58579 4.58579C4.21071 4.96086 4 5.46957 4 6V18C4 18.5304 4.21071 19.0391 4.58579 19.4142C4.96086 19.7893 5.46957 20 6 20H18C18.5304 20 19.0391 19.7893 19.4142 19.4142C19.7893 19.0391 20 18.5304 20 18V6C20 5.46957 19.7893 4.96086 19.4142 4.58579C19.0391 4.21071 18.5304 4 18 4H6ZM6 2H18C19.0609 2 20.0783 2.42143 20.8284 3.17157C21.5786 3.92172 22 4.93913 22 6V18C22 19.0609 21.5786 20.0783 20.8284 20.8284C20.0783 21.5786 19.0609 22 18 22H6C4.93913 22 3.92172 21.5786 3.17157 20.8284C2.42143 20.0783 2 19.0609 2 18V6C2 4.93913 2.42143 3.92172 3.17157 3.17157C3.92172 2.42143 4.93913 2 6 2V2Z", fill: "inherit" }),
         React.createElement("path", { d: "M10.9437 17.6805V8.95785H7.82846V7.1818H16.1716V8.95785H13.0635V17.6805H10.9437Z", fill: "inherit" })));
 };
 
 var SelectAllRemove = function (_a) {
-    var className = _a.className, _b = _a.fill, fill = _b === void 0 ? '#2f2f2f' : _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;
     return (React.createElement("svg", { className: className, width: size, height: size, viewBox: "0 0 24 24", fill: fill, xmlns: "http://www.w3.org/2000/svg" },
         React.createElement("path", { d: "M7 17V7H17V17H7ZM9 15H15V9H9V15ZM7 21V19H9V21H7ZM7 5V3H9V5H7ZM11 21V19H13V21H11ZM11 5V3H13V5H11ZM15 5V3H17V5H15ZM3 5V3H5V5H3ZM5 21H3V19H5V21ZM21 5H19V3H21V5ZM3 17V15H5V17H3ZM3 13V11H5V13H3ZM3 9V7H5V9H3ZM19 16V15H21V16H19ZM19 13V11H21V13H19ZM19 9V7H21V9H19Z", fill: "inherit" }),
         React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 19L24 19L24 21L16 21L16 19Z", fill: "inherit" })));
 };
 
 var SelectAllAdd = function (_a) {
-    var className = _a.className, _b = _a.fill, fill = _b === void 0 ? '#2f2f2f' : _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;
     return (React.createElement("svg", { className: className, width: size, height: size, viewBox: "0 0 24 24", fill: fill, xmlns: "http://www.w3.org/2000/svg" },
         React.createElement("path", { d: "M7 17V7H17V17H7ZM9 15H15V9H9V15ZM7 21V19H9V21H7ZM7 5V3H9V5H7ZM11 21V19H13V21H11ZM11 5V3H13V5H11ZM15 5V3H17V5H15ZM3 5V3H5V5H3ZM5 21H3V19H5V21ZM21 5H19V3H21V5ZM3 17V15H5V17H3ZM3 13V11H5V13H3ZM3 9V7H5V9H3ZM19 13V11H21V13H19ZM19 9V7H21V9H19Z", fill: "inherit" }),
         React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M19 24V16H21V24H19Z", fill: "inherit" }),
@@ -2596,7 +3063,7 @@ var SelectAllAdd = function (_a) {
 };
 
 var FQWelldone = function (_a) {
-    var className = _a.className, _b = _a.fill, fill = _b === void 0 ? '#2f2f2f' : _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;
     return (React.createElement("svg", { className: className, width: size, height: size, viewBox: "0 0 24 24", fill: fill, xmlns: "http://www.w3.org/2000/svg" },
         React.createElement("g", { "clip-path": "url(#clip0_514_7962)" },
             React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12 22H19.7534C20.9896 22 22 20.9896 22 19.7534V12C22 8.08095 19.7471 4.68905 16.465 3.05115L15.8061 8.94697C15.7559 9.40195 15.3699 9.73768 14.9244 9.74396L14.4286 13.8607C14.3847 14.2592 14.0835 14.5635 13.7101 14.6357L13.2488 17.375C13.2394 17.4158 13.2331 17.4565 13.2206 17.4973L13.2174 17.5036L13.2143 17.5162L13.2112 17.5287L13.208 17.535C13.1672 17.6511 13.1045 17.7546 13.0229 17.8425L13.0198 17.8456L13.0104 17.8582L13.0041 17.8644L12.9947 17.8739L12.9853 17.8833L12.979 17.8864L12.9664 17.899V17.9021C12.8786 17.9805 12.7719 18.0464 12.6558 18.0872H12.6495L12.637 18.0935L12.6244 18.0966L12.6181 18.0998C12.5397 18.1217 12.4581 18.1343 12.3734 18.1374H12.3514C12.2667 18.1343 12.182 18.1217 12.1035 18.0998L12.0973 18.0966L12.0847 18.0935L12.0722 18.0872H12.0659C11.9498 18.0464 11.8463 17.9805 11.7584 17.9021L11.7553 17.899L11.7427 17.8864L11.7364 17.8833L11.727 17.8739L11.7176 17.8644L11.7145 17.8582L11.7019 17.8456L11.6988 17.8425C11.6203 17.7546 11.5576 17.6511 11.5168 17.535L11.5136 17.5287L11.5074 17.5162L11.5042 17.5036V17.4973C11.4917 17.4565 11.4823 17.4158 11.476 17.375L11.0116 14.6357C10.6382 14.5635 10.3401 14.2592 10.2931 13.8607L9.7973 9.74396C9.35174 9.73768 8.96894 9.40195 8.91873 8.94697L8.22215 2.73737C4.57295 4.2278 2 7.81425 2 12C2 17.5224 6.47757 22 12 22ZM14.1117 7.94917L14.7361 2.37967C13.867 2.13179 12.9476 2 12 2C11.3034 2 10.6225 2.07217 9.96674 2.20709L9.96988 2.24161L10.61 7.94917C11.0775 7.95858 11.4572 8.32256 11.4885 8.78067L11.9812 12.8817C12.0188 13.1672 12.684 13.1672 12.7405 12.8817L13.2331 8.78067C13.2676 8.32256 13.6473 7.95858 14.1117 7.94917Z", fill: "inherit" })),
@@ -2606,7 +3073,7 @@ var FQWelldone = function (_a) {
 };
 
 var FQOperation = function (_a) {
-    var className = _a.className, _b = _a.fill, fill = _b === void 0 ? '#2f2f2f' : _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;
     return (React.createElement("svg", { className: className, width: size, height: size, viewBox: "0 0 24 24", fill: fill, xmlns: "http://www.w3.org/2000/svg" },
         React.createElement("g", { "clip-path": "url(#clip0_514_7959)" },
             React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.9983 2C17.5207 2 22 6.47599 22 11.9983V19.7521C22 20.9899 20.9899 22 19.7521 22H11.9983C6.47599 22 2 17.5207 2 11.9983C2 6.47599 6.47599 2 11.9983 2ZM14.606 8.07691C14.1868 7.81284 14.0614 7.26159 14.3255 6.84238C14.5895 6.42317 15.1408 6.29774 15.56 6.56181C15.8439 6.74336 16.1145 6.94471 16.372 7.16917C16.6295 7.39363 16.8671 7.63789 17.0817 7.89206C17.3986 8.27166 17.3491 8.83611 16.9695 9.153C16.5899 9.46988 16.0254 9.42037 15.7052 9.04077C15.5435 8.84932 15.3718 8.67107 15.1936 8.51593C15.0087 8.35418 14.814 8.20895 14.606 8.07691ZM16.7648 11.4075C16.6988 10.9157 17.0388 10.4634 17.5306 10.3974C18.0191 10.3281 18.4714 10.6714 18.5407 11.1632C18.5605 11.3151 18.577 11.4669 18.5869 11.6187H18.5902C18.6001 11.7838 18.6067 11.9389 18.6067 12.0809C18.6067 13.8864 17.8739 15.5171 16.6922 16.6988C15.5138 17.8805 13.8798 18.61 12.0776 18.61C10.2753 18.61 8.64136 17.8805 7.45965 16.6988C6.27793 15.5171 5.54844 13.8864 5.54844 12.0809C5.54844 10.2786 6.27793 8.64796 7.45965 7.46625C8.64136 6.28454 10.2753 5.55174 12.0776 5.55174C12.5727 5.55174 12.9754 5.95445 12.9754 6.44958C12.9754 6.94801 12.5727 7.34742 12.0776 7.34742C10.7704 7.34742 9.58541 7.87886 8.73048 8.73378C7.87226 9.59201 7.34412 10.7737 7.34412 12.0809C7.34412 13.3913 7.87226 14.573 8.73048 15.4313C9.58541 16.2862 10.7704 16.8176 12.0776 16.8176C13.3847 16.8176 14.5664 16.2862 15.4247 15.4313C16.2796 14.573 16.811 13.3913 16.811 12.0809C16.811 11.9554 16.8077 11.8432 16.8011 11.7442V11.7409C16.7912 11.6254 16.7813 11.5131 16.7648 11.4075Z", fill: "inherit" })),
@@ -2616,7 +3083,7 @@ var FQOperation = function (_a) {
 };
 
 var FQModeler = function (_a) {
-    var className = _a.className, _b = _a.fill, fill = _b === void 0 ? '#2f2f2f' : _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;
     return (React.createElement("svg", { className: className, width: size, height: size, viewBox: "0 0 24 24", fill: fill, xmlns: "http://www.w3.org/2000/svg" },
         React.createElement("g", { "clip-path": "url(#clip0_514_7961)" },
             React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.9987 2C17.5222 2 22 6.47776 22 11.9987V19.7523C22 20.9895 20.9895 22 19.7523 22H11.9987C6.47776 22 2 17.5222 2 11.9987C2 6.47776 6.47776 2 11.9987 2ZM13.6996 8.14086L16.2296 10.6683C16.6378 11.079 16.8419 11.6157 16.8419 12.155C16.8419 12.6917 16.6378 13.2309 16.2296 13.6392L13.6996 16.1691C13.2914 16.5773 12.7522 16.7839 12.2129 16.7839C11.6762 16.7839 11.137 16.5773 10.7287 16.1691L8.19882 13.6392C7.7906 13.2309 7.58649 12.6917 7.58649 12.155C7.58649 11.6157 7.7906 11.079 8.19882 10.6683L10.7287 8.14086C11.137 7.73012 11.6762 7.52602 12.2129 7.52602C12.7522 7.52602 13.2914 7.73012 13.6996 8.14086ZM19.1652 10.895C19.8657 10.895 20.4352 11.4645 20.4352 12.1651C20.4352 12.8656 19.8657 13.4351 19.1652 13.4351C18.4621 13.4351 17.8952 12.8656 17.8952 12.1651C17.8952 11.4645 18.4621 10.895 19.1652 10.895ZM12.2255 17.8347C12.926 17.8347 13.4955 18.4042 13.4955 19.1047C13.4955 19.8077 12.926 20.3747 12.2255 20.3747C11.5225 20.3747 10.9555 19.8077 10.9555 19.1047C10.9555 18.4042 11.5225 17.8347 12.2255 17.8347ZM12.2028 3.93272C12.9059 3.93272 13.4728 4.5022 13.4728 5.20272C13.4728 5.90576 12.9059 6.47272 12.2028 6.47272C11.5023 6.47272 10.9328 5.90576 10.9328 5.20272C10.9328 4.5022 11.5023 3.93272 12.2028 3.93272ZM5.2632 10.8749C5.96371 10.8749 6.5332 11.4419 6.5332 12.1449C6.5332 12.8454 5.96371 13.4149 5.2632 13.4149C4.56268 13.4149 3.9932 12.8454 3.9932 12.1449C3.9932 11.4419 4.56268 10.8749 5.2632 10.8749ZM14.9596 11.9383L12.4296 9.40834C12.3717 9.35038 12.2936 9.32015 12.2129 9.32015C12.1348 9.32015 12.0567 9.35038 11.9987 9.40834L9.46882 11.9383C9.41086 11.9962 9.38062 12.0743 9.38062 12.155C9.38062 12.2331 9.41086 12.3112 9.46882 12.3717L11.9987 14.8991C12.0567 14.957 12.1348 14.9873 12.2129 14.9873C12.2936 14.9873 12.3717 14.957 12.4296 14.8991L14.9596 12.3717C15.0175 12.3112 15.0478 12.2331 15.0478 12.155C15.0478 12.0743 15.0175 11.9962 14.9596 11.9383Z", fill: "inherit" })),
@@ -2626,7 +3093,7 @@ var FQModeler = function (_a) {
 };
 
 var FQGetaway = function (_a) {
-    var className = _a.className, _b = _a.fill, fill = _b === void 0 ? '#2f2f2f' : _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;
     return (React.createElement("svg", { className: className, width: size, height: size, viewBox: "0 0 24 24", fill: fill, xmlns: "http://www.w3.org/2000/svg" },
         React.createElement("g", { "clip-path": "url(#clip0_514_7963)" },
             React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12 2C15.6467 2 18.8387 3.95392 20.5837 6.86943H8.48541C7.41014 6.86943 6.43011 7.30876 5.7235 8.01843C5.01382 8.72504 4.5745 9.70507 4.5745 10.7803C4.5745 11.8556 5.01382 12.8326 5.7235 13.5422C6.43011 14.2488 7.40707 14.6882 8.48541 14.6882H15.0353C15.53 14.6882 15.9324 14.2888 15.9324 13.7911C15.9324 13.2965 15.53 12.894 15.0353 12.894H8.48541C7.90476 12.894 7.37634 12.6544 6.99232 12.2734C6.60829 11.8894 6.37174 11.361 6.37174 10.7803C6.37174 10.1997 6.60829 9.67128 6.99232 9.28725C7.37634 8.90323 7.90476 8.66667 8.48541 8.66667H21.4286C21.7972 9.70814 22 10.8295 22 12V19.7542C22 20.9892 20.9892 22 19.7542 22H12C6.47619 22 2 17.5238 2 12C2 6.47619 6.47619 2 12 2ZM12.427 17.6713C11.9324 17.6713 11.53 17.2688 11.53 16.7711C11.53 16.2765 11.9324 15.874 12.427 15.874H15.6098C16.1905 15.874 16.7189 15.6375 17.1029 15.2535C17.4869 14.8694 17.7266 14.341 17.7266 13.7604C17.7266 13.1797 17.4869 12.6513 17.1029 12.2673C16.7189 11.8833 16.1905 11.6467 15.6098 11.6467H9.06298C8.56528 11.6467 8.16283 11.2442 8.16283 10.7496C8.16283 10.2519 8.56528 9.84946 9.06298 9.84946H15.6098C16.6882 9.84946 17.6651 10.2888 18.3717 10.9985C19.0814 11.7081 19.5207 12.6851 19.5207 13.7604C19.5207 14.8356 19.0814 15.8157 18.3717 16.5223C17.6651 17.232 16.6882 17.6713 15.6098 17.6713H12.427Z", fill: "inherit" })),
@@ -2636,7 +3103,7 @@ var FQGetaway = function (_a) {
 };
 
 var FQAnalytical = function (_a) {
-    var className = _a.className, _b = _a.fill, fill = _b === void 0 ? '#2f2f2f' : _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;
     return (React.createElement("svg", { className: className, width: size, height: size, viewBox: "0 0 24 24", fill: fill, xmlns: "http://www.w3.org/2000/svg" },
         React.createElement("g", { "clip-path": "url(#clip0_514_7960)" },
             React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.0016 2C17.5242 2 22 6.47577 22 12.0016V19.754C22 20.9921 20.9921 22 19.754 22H12.0016C6.47577 22 2 17.5242 2 12.0016C2 6.47577 6.47577 2 12.0016 2ZM4.50851 15.0092C5.03678 15.5375 5.8924 15.5375 6.41744 15.0092C6.94571 14.481 6.94571 13.6253 6.41744 13.1003C5.8924 12.572 5.03678 12.572 4.50851 13.1003C3.98347 13.6253 3.98347 14.481 4.50851 15.0092ZM15.0805 6.50494C15.6088 5.97667 15.6088 5.12105 15.0805 4.59601C14.5523 4.06774 13.6999 4.06774 13.1716 4.59601C12.6433 5.12105 12.6433 5.97667 13.1716 6.50494C13.6999 7.02998 14.5523 7.02998 15.0805 6.50494ZM16.3478 18.2016C16.876 18.7299 17.7316 18.7299 18.2567 18.2016C18.785 17.6766 18.785 16.8209 18.2567 16.2927C17.7316 15.7644 16.876 15.7644 16.3478 16.2927C15.8195 16.8209 15.8195 17.6766 16.3478 18.2016ZM7.49344 12.2415C7.49344 14.8926 9.6422 17.0413 12.2933 17.0413C14.9444 17.0413 17.0932 14.8926 17.0932 12.2415C17.0932 11.0164 16.6232 9.78804 15.6866 8.84816C14.75 7.91152 13.5216 7.44482 12.2933 7.44482C11.065 7.44482 9.83666 7.91152 8.90002 8.84816C7.96338 9.78804 7.49344 11.0164 7.49344 12.2415ZM12.2933 15.2458C9.62599 15.2458 8.28423 12.0049 10.1705 10.1186C10.7571 9.532 11.5252 9.24032 12.2933 9.24032C13.0614 9.24032 13.8295 9.532 14.4161 10.1186C15.0028 10.7052 15.2977 11.4733 15.2977 12.2415C15.2977 13.9008 13.9527 15.2458 12.2933 15.2458Z", fill: "inherit" })),
@@ -2646,7 +3113,7 @@ var FQAnalytical = function (_a) {
 };
 
 var Flowqount = function (_a) {
-    var className = _a.className, _b = _a.fill, fill = _b === void 0 ? '#2f2f2f' : _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;
     return (React.createElement("svg", { className: className, width: size, height: size, viewBox: "0 0 24 24", fill: fill, xmlns: "http://www.w3.org/2000/svg" },
         React.createElement("g", { "clip-path": "url(#clip0_514_7964)" },
             React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.07166 8.36706V20.6265C8.07166 20.9514 8.11036 21.227 8.57479 21.3959C9.64206 21.7852 10.7949 21.9999 11.9971 21.9975H12.0405H17.684H19.2802H21.9742V19.985C22.0152 18.5084 20.8459 17.6581 19.8608 17.6581C19.2251 17.6581 19.0328 17.6616 18.3842 17.6616C17.7063 17.6616 17.0894 17.3848 16.6426 16.9368H16.6391C16.1922 16.49 15.9143 15.8719 15.9143 15.1928V12.656C15.9143 12.4555 15.8333 12.2737 15.702 12.1424L15.7008 12.1435C15.5683 12.0122 15.3877 11.9301 15.1883 11.9301C14.9889 11.9301 14.8071 12.011 14.6758 12.1424L14.6769 12.1435C14.5456 12.2761 14.4635 12.4567 14.4635 12.656V15.1928C14.4635 15.8719 14.1855 16.49 13.7387 16.9368H13.7352C13.2872 17.3848 12.6714 17.6616 11.9935 17.6616C11.3239 17.6616 10.7081 17.4224 10.2578 17.0072C9.8039 16.5873 9.5236 16.0033 9.5236 15.3148V8.36706C9.5236 8.16886 9.4415 7.98707 9.30898 7.85571C9.17762 7.72319 8.99583 7.64109 8.79763 7.64109C8.59708 7.64109 8.41529 7.72201 8.28628 7.8522L8.28276 7.85571C8.15258 7.98472 8.07166 8.16651 8.07166 8.36706ZM11.2676 8.36706V15.3148C11.2676 15.4884 11.3321 15.6291 11.4365 15.7265C11.5678 15.8473 11.766 15.9176 11.9935 15.9176C12.1929 15.9176 12.3747 15.8367 12.5072 15.7054L12.5049 15.7042C12.6374 15.5717 12.7183 15.391 12.7183 15.1928V12.656C12.7183 11.9758 12.9963 11.3577 13.4431 10.9109H13.4467C13.8947 10.4629 14.5104 10.1861 15.1883 10.1861C15.8685 10.1861 16.4866 10.4641 16.9334 10.9109V10.9144C17.3815 11.3613 17.6582 11.9782 17.6582 12.656V15.1928C17.6582 15.391 17.7403 15.5717 17.8729 15.7042L17.8705 15.7054C18.003 15.8367 18.1848 15.9176 18.3842 15.9176C19.3729 15.9176 20.2103 15.9165 21.199 15.9165C21.6751 15.9165 22 15.6139 22 15.1577L21.9953 12.0427V11.9993C21.9953 6.47883 17.5187 2.0022 11.9971 2.0022C6.47663 2.0022 2 6.47883 2 11.9993C2 15.0052 3.32645 17.7003 5.42579 19.5334C5.56066 19.6519 5.70726 19.795 5.80578 19.8524C6.18343 20.0717 6.32768 19.7234 6.32768 19.5616V8.36706C6.32768 7.69152 6.60564 7.07462 7.05248 6.62543L7.05483 6.62426L7.056 6.62191C7.50519 6.17507 8.12209 5.89711 8.79763 5.89711C9.47786 5.89711 10.0959 6.17507 10.5428 6.62191C10.9896 7.06876 11.2676 7.68683 11.2676 8.36706Z", fill: "inherit" })),
@@ -2656,13 +3123,13 @@ var Flowqount = function (_a) {
 };
 
 var Spinner$1 = function (_a) {
-    var className = _a.className, _b = _a.fill, fill = _b === void 0 ? '#2f2f2f' : _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;
     return (React.createElement("svg", { className: className, width: size, height: size, viewBox: "0 0 24 24", fill: fill, xmlns: "http://www.w3.org/2000/svg" },
         React.createElement("path", { d: "M12 22C9.99381 22 8.034 21.3966 6.37525 20.2681C4.7165 19.1397 3.43551 17.5384 2.69875 15.6724C1.96199 13.8064 1.80352 11.7619 2.24394 9.80469C2.68437 7.84744 3.70331 6.06791 5.16836 4.69735C6.63341 3.32679 8.47683 2.42858 10.4591 2.11944C12.4413 1.8103 14.4707 2.10452 16.2835 2.96387C18.0963 3.82323 19.6088 5.20798 20.6243 6.93817C21.6398 8.66836 22.1114 10.664 21.9778 12.6657L19.9823 12.5326C20.0891 10.9312 19.7118 9.33469 18.8994 7.95054C18.087 6.56638 16.8771 5.45858 15.4268 4.7711C13.9765 4.08362 12.353 3.84824 10.7673 4.09555C9.18147 4.34286 7.70673 5.06143 6.53469 6.15788C5.36265 7.25433 4.54749 8.67795 4.19516 10.2438C3.84282 11.8096 3.96959 13.4451 4.559 14.9379C5.14841 16.4308 6.1732 17.7118 7.5002 18.6145C8.8272 19.5173 10.395 20 12 20L12 22Z", fill: "inherit" })));
 };
 
 var Outlet = function (_a) {
-    var className = _a.className, _b = _a.fill, fill = _b === void 0 ? '#2f2f2f' : _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", { 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: "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" }),
@@ -2670,7 +3137,7 @@ var Outlet = function (_a) {
 };
 
 var Inlet = function (_a) {
-    _a.className; var _b = _a.fill, fill = _b === void 0 ? '#2f2f2f' : _b, _c = _a.size, size = _c === void 0 ? 20 : _c;
+    _a.className; var _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" },
         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" }),
@@ -2700,7 +3167,7 @@ function Modal(_a) {
     if (open) {
         return (
         // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
-        React.createElement("div", { className: "bianic-modal-wrapper fixed inset-0 flex items-center justify-center bg-bia-black-transparent-75", style: { zIndex: !zIndex && isNaN(zIndex) ? 'auto' : zIndex }, id: "", onClick: handleClose },
+        React.createElement("div", { className: "bianic-modal-wrapper fixed inset-0 flex items-center justify-center bg-bia-black-transparent-75", style: { zIndex: !zIndex && isNaN(zIndex) ? 'auto' : zIndex }, id: "wrapper", onClick: handleClose },
             React.createElement("div", { className: "bianic-modal flex flex-col gap-[20px] rounded-[5px] bg-white p-[20px] ".concat(modalSize), onClick: onClick },
                 React.createElement("div", { className: "bianic-modal-header flex justify-between" },
                     React.createElement("div", { className: " text-wrap text-left font-humnst777 text-[18px] font-bold leading-[21.85px] text-primary-black" }, title),
@@ -2967,8 +3434,8 @@ function ResizeableDiv(_a) {
     var container = useRef(null);
     var resizer = useRef(null);
     var handleResize = function (e) {
-        var mouseY = e.pageY;
-        var mouseX = e.pageX;
+        var mouseY = e.clientY;
+        var mouseX = e.clientX;
         var divBottom = container.current.getBoundingClientRect().bottom;
         var divLeft = container.current.getBoundingClientRect().left;
         var divTop = container.current.getBoundingClientRect().top;
@@ -2982,12 +3449,12 @@ function ResizeableDiv(_a) {
                     container.current.style.height = "".concat(height, "px");
                 break;
             case 'right':
-                width = mouseX + divLeft;
+                width = mouseX - divLeft;
                 if (width > 9)
                     container.current.style.width = "".concat(width, "px");
                 break;
             case 'bottom':
-                height = mouseY + divTop;
+                height = mouseY - divTop;
                 if (height > 9)
                     container.current.style.height = "".concat(height, "px");
                 break;
@@ -3021,13 +3488,13 @@ function ResizeableDiv(_a) {
             minWidth: minimumWidth,
             minHeight: minimumHeight,
         } },
-        React.createElement("div", { className: "h-full w-full ".concat(className) }, children),
-        React.createElement("div", { className: "group absolute z-10 flex items-center justify-center ".concat(resizerContainerClass[position]), ref: resizer, onMouseDown: function () {
+        React.createElement("div", { className: "group peer absolute z-10 flex items-center justify-center ".concat(resizerContainerClass[position]), ref: resizer, onMouseDown: function () {
                 window.addEventListener('mousemove', handleResize);
                 window.addEventListener('mouseup', stopResize);
             }, role: "button" },
             React.createElement("div", { className: "flex h-[9px] w-[25px] items-center justify-center rounded-radius-full border border-bia-grey-light-10 bg-primary-white opacity-20 group-hover:opacity-100 group-active:bg-bia-coolgrey-light-90 group-active:opacity-100 ".concat(thumbClass) },
-                React.createElement(TbDots, { className: "text-bia-grey-light-30" })))));
+                React.createElement(TbDots, { className: "text-bia-grey-light-30" }))),
+        React.createElement("div", { className: "h-full w-full peer-active:select-none ".concat(className) }, children)));
 }
 ResizeableDiv.defaultProps = {
     position: 'left',
@@ -3488,4 +3955,4 @@ function Window(_a) {
         React.createElement("div", { className: "bianic-window-content flex w-full flex-col items-start gap-[20px] px-[20px] pb-[20px] text-primary-black" }, rest.children)));
 }
 
-export { Accordions, Alert, Avatar, AlertRoundedSquare as BCAlertRoundedSquare, CubeHeader as BCCubeHeader, Discrepancy as BCDiscrepancy, ExposedPort as BCExposedPort, FQAnalytical as BCFQAnalytical, FQGetaway as BCFQGetaway, FQModeler as BCFQModeler, FQOperation as BCFQOperation, FQWelldone as BCFQWelldone, Flowqount as BCFlowqount, Inlet as BCInlet, Legend as BCLegend, ModalBalance as BCModalBalance, Node as BCNode, Outlet as BCOutlet, Port as BCPort, SelectAllAdd as BCSelectAllAdd, SelectAllRemove as BCSelectAllRemove, Spinner$1 as BCSpinner, Stack as BCStack, VirtualPort as BCVirtualPort, Badge, Banner, Brand, Breadcrumb, Button, ButtonApp, Checkbox, Color, ContextualButton, Display, Divider, DropdownContainer, DropdownItem, FileTree, FormGroup, FormGroupButton, FormGroupLabel, Heading, Link, LiveSearch, MenuContainer, MenuItem, Modal, P, PaginationBar, Pills, Popover, ProgressBar, ProgressCircle, Radio, ResizeableDiv, SegmentButtonGroup, SegmentButtonItem, SelectInput, Slider, Spinner, Tab, TabMenu, TableCell, TagLabel, Text, TextArea, TextInput, Toaster, Toggle, Tooltip, Window };
+export { Accordions, Alert, Avatar, AlertRoundedSquare as BCAlertRoundedSquare, CubeHeader as BCCubeHeader, Discrepancy as BCDiscrepancy, ExposedPort as BCExposedPort, FQAnalytical as BCFQAnalytical, FQGetaway as BCFQGetaway, FQModeler as BCFQModeler, FQOperation as BCFQOperation, FQWelldone as BCFQWelldone, Flowqount as BCFlowqount, Inlet as BCInlet, Legend as BCLegend, ModalBalance as BCModalBalance, Node as BCNode, Outlet as BCOutlet, Port as BCPort, SelectAllAdd as BCSelectAllAdd, SelectAllRemove as BCSelectAllRemove, Spinner$1 as BCSpinner, Stack as BCStack, VirtualPort as BCVirtualPort, Badge, Banner, Brand, Breadcrumb, Button, ButtonApp, Checkbox, Color, ContextualButton, DatePicker, Display, Divider, DropdownContainer, DropdownItem, FileTree, FormGroup, FormGroupButton, FormGroupLabel, Heading, Link, LiveSearch, MenuContainer, MenuItem, Modal, P, PaginationBar, Pills, Popover, ProgressBar, ProgressCircle, Radio, ResizeableDiv, SegmentButtonGroup, SegmentButtonItem, SelectInput, Slider, Spinner, Tab, TabMenu, TableCell, TagLabel, Text, TextArea, TextInput, Toaster, Toggle, Tooltip, Window };