bianic-ui 1.10.2 → 1.12.0

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

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

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

@@ -19,3 +19,4 @@ export { default as BCFlowqount } from './Flowqount';
 export { default as BCSpinner } from './Spinner';
 export { default as BCOutlet } from './Outlet';
 export { default as BCInlet } from './Inlet';
+export { default as BCNeutral } from './Neutral';

package/dist/cjs/types/components/ResizeableDiv/Simulation.d.ts

@@ -3,6 +3,7 @@ interface ResizeableDivSimulationProps {
     resizerPosition?: 'top' | 'right' | 'bottom' | 'left';
     minimumWidth?: number | string;
     minimumHeight?: number | string;
+    ref?: React.Ref<HTMLDivElement>;
 }
 declare function ResizeableDivSimulation({ resizerPosition, minimumHeight, minimumWidth, }: ResizeableDivSimulationProps): React.JSX.Element;
 declare namespace ResizeableDivSimulation {

package/dist/cjs/types/components/ResizeableDiv/SimulationZIndex.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface ResizeableDivZIndexSimulationProps {
+    resizerPosition?: 'top' | 'right' | 'bottom' | 'left';
+    minimumWidth?: number | string;
+    minimumHeight?: number | string;
+    zIndex?: number;
+    ref?: React.Ref<HTMLDivElement>;
+}
+declare function ResizeableDivZIndexSimulation({ resizerPosition, minimumHeight, minimumWidth, zIndex, }: ResizeableDivZIndexSimulationProps): React.JSX.Element;
+declare namespace ResizeableDivZIndexSimulation {
+    var defaultProps: {
+        resizerPosition: string;
+    };
+}
+export default ResizeableDivZIndexSimulation;

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

@@ -3,11 +3,14 @@ interface ResizeableDivProps extends ComponentPropsWithRef<'div'> {
     position?: 'top' | 'right' | 'bottom' | 'left';
     initialWidth?: string | number;
     minWidth?: string | number;
+    maxWidth?: string | number;
     initialHeight?: string | number;
     minHeight?: string | number;
+    maxHeight?: string | number;
     children: React.ReactNode;
+    zIndex?: number;
 }
-declare function ResizeableDiv({ position, children, className, initialWidth, minWidth, initialHeight, minHeight, }: ResizeableDivProps): React.JSX.Element;
+declare function ResizeableDiv({ position, children, className, initialWidth, minWidth, maxWidth, initialHeight, minHeight, maxHeight, ref, zIndex, ...props }: ResizeableDivProps): React.JSX.Element;
 declare namespace ResizeableDiv {
     var defaultProps: {
         position: string;

package/dist/cjs/types/components/Snippet/ContextualButtonsTable.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ContextualButtonsTable: () => React.JSX.Element;
+export default ContextualButtonsTable;

package/dist/cjs/types/components/Typography/Text/index.d.ts

@@ -4,10 +4,11 @@ interface TextProps extends ComponentPropsWithoutRef<'span'> {
     children: React.ReactNode;
     variant: 'large-text' | 'large-text-semibold' | 'medium-text' | 'medium-text-semibold' | 'caption' | 'caption-semibold' | 'normal-text' | 'normal-text-semilight' | 'normal-text-semibold' | 'normal-text-bold' | 'small-text' | 'small-text-semibold' | 'tiny-text' | 'tiny-text-bold' | 'script' | 'link';
 }
-declare function Text({ extended, variant, children }: TextProps): React.JSX.Element;
+declare function Text({ extended, variant, children, className }: TextProps): React.JSX.Element;
 declare namespace Text {
     var defaultProps: {
         extended: string;
+        className: string;
     };
 }
 export default Text;

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

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

package/dist/cjs/types/stories/Resizeable/ResizeableSimulation.stories.d.ts

@@ -6,7 +6,6 @@ declare const meta: {
     parameters: {
         layout: string;
     };
-    tags: string[];
 };
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/cjs/types/stories/Resizeable/ResizeableZIndexSimulation.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from '@storybook/react';
+import ResizeableDivZIndexSimulation from '../../components/ResizeableDiv/SimulationZIndex';
+declare const meta: {
+    title: string;
+    component: typeof ResizeableDivZIndexSimulation;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const SimulationZIndex: Story;

package/dist/cjs/types/stories/Snippet/ContextualButtonsTable/Story.stories.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: () => import("react").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Demo: Story;

package/dist/esm/index.js

@@ -307,12 +307,17 @@ var variantUnion$2 = [
     'link',
 ];
 function Text(_a) {
-    var _b = _a.extended, extended = _b === void 0 ? '' : _b, variant = _a.variant, children = _a.children;
+    var _b = _a.extended, extended = _b === void 0 ? '' : _b, variant = _a.variant, children = _a.children, _c = _a.className, className = _c === void 0 ? '' : _c;
     var validatedVariant = validUnion(variant, variantUnion$2);
-    return (React.createElement("span", { className: "bianic-text ".concat(textClasses[validatedVariant], " ").concat(extended) }, childrenElement(children)));
+    var defaultColor = extended.includes('text-bia') || (className === null || className === void 0 ? void 0 : className.includes('text-bia'))
+        ? ''
+        : 'text-bia-black';
+    var extendedClasses = "".concat(className, " ").concat(extended);
+    return (React.createElement("span", { className: "bianic-text ".concat(textClasses[validatedVariant], " ").concat(defaultColor, " ").concat(extendedClasses) }, childrenElement(children)));
 }
 Text.defaultProps = {
     extended: '',
+    className: '',
 };
 
 /******************************************************************************
@@ -438,10 +443,10 @@ var minWidthConfig$1 = {
     tn: 'min-w-[64px]',
 };
 var iconOnlySizeConfig$1 = {
-    lg: 'p-[13px] flex items-center justify-center gap-[10px]',
-    md: ' p-[11px] flex items-center justify-center gap-[5px]',
-    sm: 'p-[8px] flex items-center justify-center gap-[5px] ',
-    tn: 'p-[4px] flex items-center justify-center gap-[3px]',
+    lg: 'py-[13px] flex items-center justify-center gap-[10px]',
+    md: 'py-[11px] flex items-center justify-center gap-[5px]',
+    sm: 'py-[8px] flex items-center justify-center gap-[5px] ',
+    tn: 'py-[4px] flex items-center justify-center gap-[3px]',
 };
 var shadow = 'shadow-[0px_6px_18px_1px_rgba(188,199,237,0.5)] disabled:shadow-none active:shadow-none';
 var variantConfig$2 = {
@@ -479,7 +484,7 @@ var variantUnion$1 = [
     'primary-outlined',
     'success-outlined',
     'warning-outlined',
-    'form-group'
+    'form-group',
 ];
 var radiusUnion = ['default', 'full-rounded'];
 var sizeUnion$5 = ['md', 'lg', 'sm', 'tn'];
@@ -504,7 +509,7 @@ function Button(_a) {
     }
     var sizeClass = label || variant === 'form-group'
         ? " ".concat(minWidthRules, " ").concat(sizingRules)
-        : iconOnlySizeConfig$1[validatedSize];
+        : "".concat(iconOnlySizeConfig$1[validatedSize], " ").concat(variant.includes('link') ? '' : "".concat(sidePaddingConfig[validatedSize]));
     var classString = "\n    ".concat(variantConfig$2[validatedVariant], " \n    ").concat(sizeClass, " \n    ").concat(radiusConfig$1[validatedRadius][validatedSize], " \n    ").concat(className, "\n  ");
     return (React.createElement("button", __assign({ type: "button", className: "bianic-button bianic-fgc-target flex items-center justify-center font-semibold ".concat(classString), disabled: disabled }, props),
         childrenElement(iconLeft || left),
@@ -1586,7 +1591,7 @@ function Color() {
         'light-30',
         'light-20',
         'light-10',
-        'primary',
+        '',
         'dark-10',
         'dark-20',
         'dark-30',
@@ -1597,14 +1602,8 @@ function Color() {
         'dark-80',
         'dark-90',
     ];
-    var aliases = {
-        'light-90': 'pastel',
-        'light-50': 'disabled',
-        'light-10': 'hover',
-        'dark-10': 'active',
-    };
     return (React.createElement("div", { className: "color-pallete flex flex-col gap-y-10" },
-        React.createElement("div", { className: "flex gap-x-5 justify-center" },
+        React.createElement("div", { className: "flex justify-center gap-x-5" },
             React.createElement("div", { className: "flex w-fit flex-col items-center gap-y-3" },
                 React.createElement("div", { className: "text-center text-xs font-semibold" }, "Black"),
                 React.createElement("div", { className: "aspect-square w-10 rounded-lg", style: {
@@ -1619,13 +1618,13 @@ function Color() {
             React.createElement("div", { className: "flex flex-col items-end justify-center space-y-3" },
                 React.createElement("div", { className: "h-10 min-w-10" }),
                 lightLevels.map(function (level) { return (React.createElement("div", { key: level, className: "flex h-10 w-fit items-center justify-end" },
-                    React.createElement("div", { className: "whitespace-nowrap text-center text-xs font-semibold" }, aliases[level] ? "(".concat(aliases[level], ") ").concat(level) : level))); })),
+                    React.createElement("div", { className: "whitespace-nowrap text-center text-xs font-semibold" }, level))); })),
             colors.map(function (color, index) {
                 return (React.createElement("div", { className: "flex w-fit flex-col items-center gap-y-3", key: index },
                     React.createElement("div", { className: "h-10 w-fit" },
                         React.createElement("div", { className: "text-center text-xs font-semibold" }, color.tailwind)),
                     lightLevels.map(function (level) {
-                        var suffix = level === 'primary' ? '' : "-".concat(level);
+                        var suffix = level === '' ? '' : "-".concat(level);
                         return (React.createElement("div", { key: level, className: "aspect-square w-10 rounded-lg", style: {
                                 backgroundColor: "var(--".concat(color.css).concat(suffix, ")"),
                             } }));
@@ -1726,18 +1725,18 @@ var TreeItem = function (_a) {
 };
 
 var MenuContainer = forwardRef(function MenuContainer(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.zIndex, zIndex = _f === void 0 ? 0 : _f, restProps = __rest(propsComp, ["isTopFlat", "children", "open", "onClose", "className", "isWithOverlay", "zIndex"]);
+    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.zIndex, zIndex = _f === void 0 ? 100 : _f, restProps = __rest(propsComp, ["isTopFlat", "children", "open", "onClose", "className", "isWithOverlay", "zIndex"]);
     var radiusClass = "rounded-b-radius-sm ".concat(!isTopFlat && 'rounded-t-radius-sm');
     return (open && (React.createElement(React.Fragment, null,
-        isWithOverlay && (React.createElement("div", { className: "bianic-menu-overlay fixed left-0 top-0 z-0 h-screen w-screen", onClick: function () { return onClose(); } })),
+        isWithOverlay && (React.createElement("div", { className: "bianic-menu-overlay fixed left-0 top-0 z-0 h-screen w-screen", onClick: function () { return onClose(); }, style: { zIndex: zIndex } })),
         React.createElement("div", __assign({ className: "w-fit bg-bia-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] ".concat(radiusClass, " ").concat(className), ref: ref, style: {
-                zIndex: zIndex,
+                zIndex: zIndex + 10,
             } }, restProps), Children.map(children, function (child) {
             return React.isValidElement(child)
                 ? // Kirimkan handleItemClick sebagai props onClick ke setiap MenuItem
                     cloneElement(child, {
                         onClose: function () { return onClose(); },
-                        zIndex: zIndex,
+                        zIndex: zIndex + 10,
                     })
                 : child;
         })))));
@@ -1747,7 +1746,7 @@ MenuContainer.defaultProps = {
 };
 
 function MenuItem(_a) {
-    var _b = _a.className, className = _b === void 0 ? '' : _b, label = _a.label, _c = _a.onClick, onClick = _c === void 0 ? function () { } : _c, _d = _a.caption, caption = _d === void 0 ? undefined : _d, _e = _a.isChecked, isChecked = _e === void 0 ? undefined : _e, _f = _a.onClose, onClose = _f === void 0 ? function () { } : _f, children = _a.children, _g = _a.zIndex, zIndex = _g === void 0 ? 0 : _g, props = __rest(_a, ["className", "label", "onClick", "caption", "isChecked", "onClose", "children", "zIndex"]);
+    var _b = _a.className, className = _b === void 0 ? '' : _b, label = _a.label, _c = _a.onClick, onClick = _c === void 0 ? function () { } : _c, _d = _a.caption, caption = _d === void 0 ? undefined : _d, _e = _a.isChecked, isChecked = _e === void 0 ? undefined : _e, _f = _a.onClose, onClose = _f === void 0 ? function () { } : _f, children = _a.children, _g = _a.zIndex, zIndex = _g === void 0 ? 100 : _g, props = __rest(_a, ["className", "label", "onClick", "caption", "isChecked", "onClose", "children", "zIndex"]);
     var _h = useState(false), isHovered = _h[0], setIsHovered = _h[1];
     var _j = useState(false), isLeft = _j[0], setIsLeft = _j[1];
     var isWithChecked = isChecked !== undefined;
@@ -1776,14 +1775,14 @@ function MenuItem(_a) {
         React.createElement("div", __assign({ className: "relative flex items-center py-[5px] hover:bg-bia-blue-pastel ".concat(itemClass), role: "button", tabIndex: 0, onClick: function (e) {
                 onClick(e);
             }, onKeyDown: function () { }, style: {
-                zIndex: isHovered ? currentZIndex : 0,
+                zIndex: isHovered ? currentZIndex : currentZIndex + 15,
             } }, props),
             isWithChecked && (React.createElement("div", { className: "mr-[5px] aspect-square w-[14px]" }, isChecked && React.createElement(TbCheck, { className: "text-primary-black", size: 14 }))),
             React.createElement("span", { className: "whitespace-nowrap font-arial text-[11px] text-bia-black" }, label),
             React.createElement("div", { className: "ml-auto flex items-center" },
                 children && (React.createElement(TbChevronRight, { className: "ml-[10px] text-bia-coolgrey" })),
                 children === undefined && caption && (React.createElement("span", { className: "ml-[30px] whitespace-nowrap text-[11px] text-bia-coolgrey" }, caption)))),
-        children && (React.createElement(MenuContainer, { open: isHovered, onClose: onClose, 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), ref: MenuContRef, zIndex: currentZIndex }, children))));
+        children && (React.createElement(MenuContainer, { open: isHovered, onClose: onClose, 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), ref: MenuContRef, zIndex: currentZIndex + 10 }, children))));
 }
 MenuItem.defaultProps = {
     className: '',
@@ -2126,7 +2125,7 @@ var fontConfig = {
 };
 
 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 _a = propsComp.isTopFlat, isTopFlat = _a === void 0 ? false : _a, children = propsComp.children, _b = propsComp.open, open = _b === void 0 ? true : _b, _c = propsComp.onClose, onClose = _c === void 0 ? function () { } : _c, _d = propsComp.className, className = _d === void 0 ? '' : _d, _e = propsComp.isWithOverlay, isWithOverlay = _e === void 0 ? true : _e, _f = propsComp.size, size = _f === void 0 ? 'md' : _f, _g = propsComp.onClickItem, onClickItem = _g === void 0 ? function () { } : _g, _h = propsComp.zIndex, zIndex = _h === void 0 ? 100 : _h, restProps = __rest(propsComp, ["isTopFlat", "children", "open", "onClose", "className", "isWithOverlay", "size", "onClickItem", "zIndex"]);
     var radiusClass = "rounded-b-radius-sm ".concat(!isTopFlat && 'rounded-t-radius-sm');
     var sizeClass = containerSizeConfig[size] || containerSizeConfig['md'];
     var containerClass = "".concat(sizeClass, " ").concat(radiusClass, " ").concat(className);
@@ -2155,7 +2154,7 @@ DropdownContainer.defaultProps = {
 };
 
 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 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 ? 100 : _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'];
@@ -2199,9 +2198,11 @@ var sizeUnion$2 = ['md', 'sm'];
 function SelectInput(_a) {
     var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, id = _a.id, label = _a.label, _d = _a.options, options = _d === void 0 ? [] : _d, _e = _a.required, required = _e === void 0 ? false : _e, selected = _a.selected, setSelected = _a.setSelected, _f = _a.onClickDropdown, onClickDropdown = _f === void 0 ? function () { } : _f, children = _a.children, _g = _a.dropContProps, _h = _g === void 0 ? {} : _g, _j = _h.className, dropContClassName = _j === void 0 ? '' : _j, restDropContProps = __rest(_h, ["className"]), props = __rest(_a, ["descText", "disabled", "size", "id", "label", "options", "required", "selected", "setSelected", "onClickDropdown", "children", "dropContProps"]);
     var _k = useState(false), isOpen = _k[0], setIsOpen = _k[1];
+    var _l = useState(false), isDropUp = _l[0], setIsDropUp = _l[1];
     var validatedSize = validUnion(size, sizeUnion$2);
-    var _l = sizeConfig$7[validatedSize], searchSize = _l.searchSize, iconSize = _l.iconSize;
+    var _m = sizeConfig$7[validatedSize], searchSize = _m.searchSize, iconSize = _m.iconSize;
     var inputRef = useRef(null);
+    var dropdownContRef = useRef(null);
     var handleOutsideClick = function (e) {
         if (inputRef.current && !inputRef.current.contains(e.target)) {
             setIsOpen(false);
@@ -2213,6 +2214,22 @@ function SelectInput(_a) {
             document.removeEventListener('mousedown', handleOutsideClick);
         };
     });
+    useEffect(function () {
+        var _a, _b;
+        if (inputRef.current) {
+            // Adjust dropdown position to prevent show up out of screen
+            var windowHeight = window.innerHeight;
+            var inputRect = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            var inputBottom = inputRect === null || inputRect === void 0 ? void 0 : inputRect.bottom;
+            var diff = windowHeight - inputBottom;
+            var dropdownRect = (_b = dropdownContRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+            var dropdownHeight = (dropdownRect === null || dropdownRect === void 0 ? void 0 : dropdownRect.height) || 0;
+            if (dropdownHeight >= diff)
+                setIsDropUp(true);
+            else
+                setIsDropUp(false);
+        }
+    }, [isOpen]);
     var isObjectOptionItem = false;
     if (options.every(function (item) { return typeof item === 'object' && item !== null; }))
         isObjectOptionItem = true;
@@ -2232,6 +2249,7 @@ function SelectInput(_a) {
             optionsElement.style.maxHeight = "".concat(Math.max(0, maxHeight), "px");
         }
     }, [isOpen]);
+    var dropdownPosition = isDropUp ? 'bottom-full' : 'top-full';
     return (React.createElement("div", { className: "field-group flex w-full flex-col", ref: inputRef },
         React.createElement("label", { htmlFor: id, className: "label pb-2 text-xs font-semibold" },
             childrenElement(label),
@@ -2239,7 +2257,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)),
-            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) {
+            children === undefined && isOpen && (React.createElement("div", { className: "absolute z-10 w-full rounded-b-md border border-bia-grey-dark-10 bg-primary-white shadow-lg ".concat(dropdownPosition), 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 : '';
@@ -2251,7 +2269,7 @@ function SelectInput(_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), React.Children.map(children, function (child) {
+            children && isOpen && (React.createElement(DropdownContainer, __assign({ open: isOpen, onClose: function () { return setIsOpen(false); }, size: size, isTopFlat: true, ref: dropdownContRef, className: "bianic-livesearch-dropdown absolute z-10 mt-1 w-full overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ".concat(dropdownPosition, " ").concat(dropContClassName) }, restDropContProps), React.Children.map(children, function (child) {
                 if (React.isValidElement(child)) {
                     return React.cloneElement(child, {
                         isSelected: selected && selected.id === child.props.value.id,
@@ -2299,6 +2317,8 @@ function LiveSearch(_a) {
     var dropContClassName = dropContProps.className, restDropContProps = __rest(dropContProps, ["className"]);
     var isValueExist = value && value.label !== undefined && value.label !== '';
     var inputRef = useRef(null);
+    var dropdownContRef = useRef(null);
+    var _p = useState(false), isDropUp = _p[0], setIsDropUp = _p[1];
     var handleOutsideClick = function (e) {
         if (inputRef.current && !inputRef.current.contains(e.target)) {
             setIsOpen(false);
@@ -2318,6 +2338,22 @@ function LiveSearch(_a) {
             setSearchTerm(value.label || '');
         }
     }, [value.label, searchTerm]);
+    useEffect(function () {
+        var _a, _b;
+        if (inputRef.current) {
+            // Adjust dropdown position to prevent show up out of screen
+            var windowHeight = window.innerHeight;
+            var inputRect = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            var inputBottom = inputRect === null || inputRect === void 0 ? void 0 : inputRect.bottom;
+            var diff = windowHeight - inputBottom;
+            var dropdownRect = (_b = dropdownContRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+            var dropdownHeight = (dropdownRect === null || dropdownRect === void 0 ? void 0 : dropdownRect.height) || 0;
+            if (dropdownHeight >= diff)
+                setIsDropUp(true);
+            else
+                setIsDropUp(false);
+        }
+    }, [isOpen]);
     var filteredOptions = options.filter(function (item) {
         return item.label.toLowerCase().includes(value.label.toLowerCase());
     });
@@ -2383,6 +2419,7 @@ function LiveSearch(_a) {
         hasFilteredResults =
             Children.toArray(renderedChildren).filter(Boolean).length > 0; // Should always be true if there are initial children
     }
+    var dropdownPosition = isDropUp ? 'bottom-full' : 'top-full';
     return (React.createElement("div", { className: "bianic-livesearch field-group flex w-full flex-col gap-y-2", ref: inputRef },
         React.createElement("label", { htmlFor: id, className: "bianic-livesearch-label text-xs font-semibold read-only:pointer-events-none" },
             label,
@@ -2407,7 +2444,7 @@ function LiveSearch(_a) {
                         setIsOpen(false);
                     } }));
             }))),
-            children && isOpen && (React.createElement(DropdownContainer, __assign({ open: isOpen, onClose: function () { return setIsOpen(false); }, size: size, isTopFlat: true, zIndex: 10, className: "bianic-livesearch-dropdown absolute w-full overflow-hidden bg-white shadow-lg ".concat(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 ".concat(dropdownPosition, " ").concat(dropContClassName), ref: dropdownContRef }, 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.") }))))),
@@ -3144,6 +3181,14 @@ var Inlet = function (_a) {
         React.createElement("path", { d: "M15.586 10.657L11.636 6.707C11.4538 6.5184 11.353 6.26579 11.3553 6.0036C11.3576 5.7414 11.4628 5.49059 11.6482 5.30518C11.8336 5.11977 12.0844 5.0146 12.3466 5.01232C12.6088 5.01005 12.8614 5.11084 13.05 5.293L18.707 10.95C18.8002 11.0427 18.8741 11.1528 18.9246 11.2741C18.9751 11.3955 19.001 11.5256 19.001 11.657C19.001 11.7884 18.9751 11.9185 18.9246 12.0399C18.8741 12.1612 18.8002 12.2713 18.707 12.364L13.05 18.021C12.9578 18.1165 12.8474 18.1927 12.7254 18.2451C12.6034 18.2975 12.4722 18.3251 12.3394 18.3263C12.2066 18.3274 12.0749 18.3021 11.952 18.2518C11.8292 18.2015 11.7175 18.1273 11.6236 18.0334C11.5297 17.9395 11.4555 17.8279 11.4052 17.705C11.3549 17.5821 11.3296 17.4504 11.3308 17.3176C11.3319 17.1848 11.3595 17.0536 11.4119 16.9316C11.4643 16.8096 11.5405 16.6992 11.636 16.607L15.586 12.657H6C5.73478 12.657 5.48043 12.5516 5.29289 12.3641C5.10536 12.1766 5 11.9222 5 11.657C5 11.3918 5.10536 11.1374 5.29289 10.9499C5.48043 10.7624 5.73478 10.657 6 10.657H15.586Z", fill: "inherit" })));
 };
 
+var Neutral = function (_a) {
+    var className = _a.className, _b = _a.fill, fill = _b === void 0 ? 'currentColor' : _b, _c = _a.size, size = _c === void 0 ? 20 : _c;
+    var numericSize = Number(size);
+    return (React.createElement("svg", { className: className, width: numericSize * 2, height: numericSize, viewBox: "0 0 48 24", fill: fill, xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M28 12C28 11.4477 28.4477 11 29 11H43C43.5523 11 44 11.4477 44 12C44 12.5523 43.5523 13 43 13H29C28.4477 13 28 12.5523 28 12Z", fill: "#2F2F2F" }),
+        React.createElement("path", { d: "M12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20ZM12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22Z", fill: "#2F2F2F" })));
+};
+
 function Modal(_a) {
     var _b = _a.size, size = _b === void 0 ? 'sm' : _b, title = _a.title, open = _a.open, _c = _a.zIndex, zIndex = _c === void 0 ? 100 : _c, onClose = _a.onClose, onClick = _a.onClick, rest = __rest(_a, ["size", "title", "open", "zIndex", "onClose", "onClick"]);
     var modalSize;
@@ -3430,8 +3475,8 @@ var resizerContainerClass = {
 };
 
 function ResizeableDiv(_a) {
-    var _b = _a.position, position = _b === void 0 ? 'bottom' : _b, children = _a.children, className = _a.className, initialWidth = _a.initialWidth, minWidth = _a.minWidth, initialHeight = _a.initialHeight, minHeight = _a.minHeight;
-    var container = useRef(null);
+    var _b = _a.position, position = _b === void 0 ? 'bottom' : _b, children = _a.children, className = _a.className, initialWidth = _a.initialWidth, minWidth = _a.minWidth, maxWidth = _a.maxWidth, initialHeight = _a.initialHeight, minHeight = _a.minHeight, maxHeight = _a.maxHeight, ref = _a.ref, zIndex = _a.zIndex; __rest(_a, ["position", "children", "className", "initialWidth", "minWidth", "maxWidth", "initialHeight", "minHeight", "maxHeight", "ref", "zIndex"]);
+    var container = ref || useRef(null);
     var resizer = useRef(null);
     var handleResize = function (e) {
         var mouseY = e.clientY;
@@ -3476,19 +3521,28 @@ function ResizeableDiv(_a) {
     var minimumWidth = typeof minWidth === 'number' && !isNaN(minWidth)
         ? "".concat(minWidth, "px")
         : minWidth;
+    var maximumWidth = typeof maxWidth === 'number' && !isNaN(maxWidth)
+        ? "".concat(maxWidth, "px")
+        : maxWidth;
     var containerHeight = typeof initialHeight === 'number' && !isNaN(initialHeight)
         ? "".concat(initialHeight, "px")
         : initialHeight;
     var minimumHeight = typeof minHeight === 'number' && !isNaN(minHeight)
         ? "".concat(minHeight, "px")
         : minHeight;
+    var maximumHeight = typeof maxHeight === 'number' && !isNaN(maxHeight)
+        ? "".concat(maxHeight, "px")
+        : maxHeight;
     return (React.createElement("div", { className: "relative overflow-visible", ref: container, style: {
+            zIndex: zIndex,
             width: containerWidth,
             height: containerHeight,
             minWidth: minimumWidth,
             minHeight: minimumHeight,
+            maxHeight: maximumHeight,
+            maxWidth: maximumWidth,
         } },
-        React.createElement("div", { className: "group peer absolute z-10 flex items-center justify-center ".concat(resizerContainerClass[position]), ref: resizer, onMouseDown: function () {
+        React.createElement("div", { className: "group peer absolute flex items-center justify-center ".concat(resizerContainerClass[position]), ref: resizer, onMouseDown: function () {
                 window.addEventListener('mousemove', handleResize);
                 window.addEventListener('mouseup', stopResize);
             }, role: "button" },
@@ -3955,4 +4009,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, 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 };
+export { Accordions, Alert, Avatar, AlertRoundedSquare as BCAlertRoundedSquare, CubeHeader as BCCubeHeader, Discrepancy as BCDiscrepancy, ExposedPort as BCExposedPort, FQAnalytical as BCFQAnalytical, FQGetaway as BCFQGetaway, FQModeler as BCFQModeler, FQOperation as BCFQOperation, FQWelldone as BCFQWelldone, Flowqount as BCFlowqount, Inlet as BCInlet, Legend as BCLegend, ModalBalance as BCModalBalance, Neutral as BCNeutral, Node as BCNode, Outlet as BCOutlet, Port as BCPort, 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 };