bianic-ui 1.5.1-beta.9 → 1.7.0

package/dist/cjs/index.js

@@ -263,6 +263,22 @@ var childrenElement = function (element) {
 var validUnion = function (value, union) {
     return union.includes(value) ? value : union[0];
 };
+var useDetectOutsideClick = function (ref, initialState) {
+    var _a = React.useState(initialState), isActive = _a[0], setIsActive = _a[1];
+    React.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)) {
+                setIsActive(!isActive);
+            }
+        };
+        // If the item is active (ie open) then listen for clicks
+        if (isActive)
+            window.addEventListener('click', pageClickEvent);
+        return function () { return window.removeEventListener('click', pageClickEvent); };
+    }, [isActive, ref]);
+    return [isActive, setIsActive];
+};
 
 var variantUnion$2 = [
     'normal-text',
@@ -436,6 +452,7 @@ var variantConfig$2 = {
     'success-outlined': "text-bia-green bg-primary-white bg-primary-white border-solid border border-bia-greenactive:text-bia-green-active active:bg-bia-green-pastel active:border-bia-green-active hover:text-bia-green-hover hover:border-bia-green-hover  disabled:border-[1px] disabled:border-bia-green-light-50 disabled:text-bia-green-light-50 focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:outline-[3px] focus-visible:rounded-md focus-visible:outline-bia-green-light-50 focus-visible:border-none ",
     'warning-outlined': "text-bia-orange bg-primary-white border-solid border border-bia-orange active:text-bia-orange-dark-10 active:bg-bia-orange-light-90 active:border-bia-orange-active active:outline-none hover:text-bia-orange-hover hover:border-bia-orange-hover disabled:border-[1px]disabled:border-bia-orange-light-50 disabled:text-bia-orange-light-50 focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:outline-[3px] focus-visible:rounded-md focus-visible:outline-bia-orange-light-50 focus-visible:border-none",
     'danger-outlined': "text-bia-red border-solid border border-bia-red bg-primary-white active:text-bia-red-dark-10 active:border-bia-red-active active:bg-bia-red-light-90 active:border-bia-red-disabled hover:text-bia-red-hover hover:border-bia-red-hover disabled:border-[1px]disabled:border-bia-red-light-50 disabled:text-bia-red-light-50 focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:outline-[3px] focus-visible:rounded-md focus-visible:outline-bia-red-light-50 focus-visible:border-none \n  ",
+    'form-group': "text-bia-black border-solid border border-bia-grey-dark-10 bg-bia-white active:bg-bia-grey-light-20 hover:bg-bia-grey-light-80 disabled:text-bia-grey-dark-10 focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:outline-[3px] focus-visible:rounded-md focus-visible:outline-bia-grey-dark-10 focus-visible:border-none \n  ",
 };
 
 var variantUnion$1 = [
@@ -454,6 +471,7 @@ var variantUnion$1 = [
     'primary-outlined',
     'success-outlined',
     'warning-outlined',
+    'form-group'
 ];
 var radiusUnion = ['default', 'full-rounded'];
 var sizeUnion$4 = ['md', 'lg', 'sm', 'tn'];
@@ -463,7 +481,7 @@ function Button(_a) {
     var validatedSize = validUnion(size, sizeUnion$4);
     var validatedRadius = validUnion(radius, radiusUnion);
     var minWidthRules = minWidthConfig$1[size];
-    if (minWidth) {
+    if (minWidth !== undefined) {
         minWidthRules = "min-w-[".concat(minWidth, "px]");
     }
     else if (variant.includes('link')) {
@@ -476,11 +494,11 @@ function Button(_a) {
     else {
         sizingRules = "".concat(sizeConfig$c[validatedSize], " ").concat(sidePaddingConfig[validatedSize]);
     }
-    var sizeClass = label
+    var sizeClass = label || variant === 'form-group'
         ? " ".concat(minWidthRules, " ").concat(sizingRules)
         : iconOnlySizeConfig$1[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: "button flex items-center justify-center font-semibold ".concat(classString), disabled: disabled }, props),
+    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),
         childrenElement(label),
         childrenElement(iconRight || right)));
@@ -1468,9 +1486,9 @@ var colorConfig$1 = {
 };
 
 var ButtonApp = function (_a) {
-    _a.icon; _a.isNotified; var _c = _a.isActive, isActive = _c === void 0 ? false : _c, disabled = _a.disabled, _d = _a.color, color = _d === void 0 ? 'green' : _d, label = _a.label, rest = __rest(_a, ["icon", "isNotified", "isActive", "disabled", "color", "label"]);
+    _a.icon; _a.isNotified; var _c = _a.isActive, isActive = _c === void 0 ? false : _c, disabled = _a.disabled, _d = _a.color, color = _d === void 0 ? 'green' : _d, label = _a.label, extended = _a.extended, rest = __rest(_a, ["icon", "isNotified", "isActive", "disabled", "color", "label", "extended"]);
     var buttonState = isActive ? 'active' : 'default';
-    return (React.createElement("button", __assign({ className: "button-app px-[10px] pb-[8.8px] pt-[8px] text-size-tiny  ".concat(colorConfig$1[color][buttonState], " "), type: "button", disabled: disabled }, rest), label));
+    return (React.createElement("button", __assign({ className: "button-app px-[10px] pb-[8.8px] pt-[8px] text-size-tiny  ".concat(colorConfig$1[color][buttonState], " ").concat(extended, " "), type: "button", disabled: disabled }, rest), label));
 };
 
 var textColorConfig = {
@@ -1496,47 +1514,115 @@ var ContextualButton = function (_a) {
 };
 
 function Color() {
-    var colorList = [
-        'bg-bia-red',
-        'bg-bia-red-light-10',
-        'bg-bia-red-dark-10',
-        'bg-bia-yellow',
-        'bg-bia-yellow-light-10',
-        'bg-bia-yellow-dark-10',
-        'bg-bia-green',
-        'bg-bia-green-light-10',
-        'bg-bia-green-dark-10',
-        'bg-bia-teal',
-        'bg-bia-teal-light-10',
-        'bg-bia-teal-dark-10',
-        'bg-bia-blue',
-        'bg-bia-blue-light-10',
-        'bg-bia-blue-dark-10',
-        'bg-bia-pink',
-        'bg-bia-pink-light-10',
-        'bg-bia-pink-dark-10',
-        'bg-bia-coolgrey',
-        'bg-bia-coolgrey-light-10',
-        'bg-bia-coolgrey-dark-10',
-        'bg-bia-orange',
-        'bg-bia-orange-light-10',
-        'bg-bia-orange-dark-10',
-        'bg-bia-sky',
-        'bg-bia-sky-light-10',
-        'bg-bia-sky-dark-10',
-        'bg-bia-olympicblue',
-        'bg-bia-olympicblue-light-10',
-        'bg-bia-olympicblue-dark-10',
-        'bg-bia-verdantgreen',
-        'bg-bia-verdantgreen-light-10',
-        'bg-bia-verdantgreen-dark-10',
-        'bg-bia-margueriteblue',
-        'bg-bia-margueriteblue-light-10',
-        'bg-bia-margueriteblue-dark-10',
+    var colors = [
+        {
+            css: 'red',
+            tailwind: 'red',
+        },
+        {
+            css: 'orange',
+            tailwind: 'orange',
+        },
+        {
+            css: 'yellow',
+            tailwind: 'yellow',
+        },
+        {
+            css: 'green',
+            tailwind: 'green',
+        },
+        {
+            css: 'verdant',
+            tailwind: 'verdantgreen',
+        },
+        {
+            css: 'teal',
+            tailwind: 'teal',
+        },
+        {
+            css: 'marguerite',
+            tailwind: 'margueriteblue',
+        },
+        {
+            css: 'blue',
+            tailwind: 'blue',
+        },
+        {
+            css: 'olympic',
+            tailwind: 'olympicblue',
+        },
+        {
+            css: 'sky',
+            tailwind: 'skyblue',
+        },
+        {
+            css: 'coolgrey',
+            tailwind: 'coolgrey',
+        },
+        {
+            css: 'grey',
+            tailwind: 'grey',
+        },
+        {
+            css: 'pink',
+            tailwind: 'pink',
+        },
+    ];
+    var lightLevels = [
+        'light-90',
+        'light-80',
+        'light-70',
+        'light-60',
+        'light-50',
+        'light-40',
+        'light-30',
+        'light-20',
+        'light-10',
+        'primary',
+        'dark-10',
+        'dark-20',
+        'dark-30',
+        'dark-40',
+        'dark-50',
+        'dark-60',
+        'dark-70',
+        'dark-80',
+        'dark-90',
     ];
-    return (React.createElement("div", { className: "grid grid-rows-3 grid-flow-col gap-5" }, colorList.map(function (colorItem) { return (React.createElement("div", { className: "w-fit" },
-        React.createElement("div", { className: "w-20 aspect-square ".concat(colorItem) }),
-        React.createElement("span", { className: "text-size-base font-semibold whitespace-nowrap" }, colorItem))); })));
+    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 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: {
+                        backgroundColor: "var(--primary-black)",
+                    } })),
+            React.createElement("div", { className: "flex w-fit flex-col items-center gap-y-3" },
+                React.createElement("div", { className: "text-center text-xs font-semibold" }, "White"),
+                React.createElement("div", { className: "aspect-square w-10 rounded-lg border border-bia-black", style: {
+                        backgroundColor: "var(--primary-white)",
+                    } }))),
+        React.createElement("div", { className: "flex gap-x-5" },
+            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))); })),
+            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);
+                        return (React.createElement("div", { key: level, className: "aspect-square w-10 rounded-lg", style: {
+                                backgroundColor: "var(--".concat(color.css).concat(suffix, ")"),
+                            } }));
+                    })));
+            }))));
 }
 
 var DividerConfig = {
@@ -1692,13 +1778,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 ? false : _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 ? '' : _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, props = __rest(_a, ["descText", "disabled", "icon", "id", "size", "isValid", "label", "placeholder", "readOnly", "required", "variant", "value", "onChange", "maxLength", "inputClassName", "isFlatRight", "actionElement"]);
+    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 ? false : _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 isTransparent = variant.includes('transparent');
-    var _q = React.useState(false), isShow = _q[0], setIsShow = _q[1];
-    var _r = styleConfig[variant], fieldStyle = _r.fieldStyle, iconStyle = _r.iconStyle;
-    var _s = isTransparent
+    var _r = React.useState(false), isShow = _r[0], setIsShow = _r[1];
+    var _s = styleConfig[variant], fieldStyle = _s.fieldStyle, iconStyle = _s.iconStyle;
+    var _t = isTransparent
         ? __assign(__assign({}, sizeConfig$b[size]), { iconPosition: "right-0 ", fieldSize: sizeConfig$b[size].fieldSize +
-                " pe-[".concat(9 + sizeConfig$b[size].iconSize, "px]") }) : sizeConfig$b[size], iconSize = _s.iconSize, fieldSize = _s.fieldSize, iconPosition = _s.iconPosition;
+                " 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';
@@ -1730,20 +1816,19 @@ function TextInput(_a) {
     }
     var extendedInputClassName = "".concat(fieldStyle, " ").concat(fieldSize, " ").concat(bottomBorderColor, " ").concat(inputClassName, " ").concat(borderStyle);
     var labelStatus = readOnly ? 'read-only:pointer-events-none' : '';
-    return (React.createElement("div", { className: "field-group flex w-full flex-col gap-y-2 text-bia-black" },
-        React.createElement("label", { htmlFor: id, className: "label text-xs font-semibold ".concat(labelStatus) },
+    return (React.createElement("div", { className: "bianic-text-input-container bianic-fgc-container flex w-full flex-col gap-y-2 text-bia-black" },
+        label && (React.createElement("label", { htmlFor: id, className: "bianic-text-input-label text-xs font-semibold ".concat(labelStatus) },
             label,
-            required && React.createElement("span", { className: "p-1 text-bia-red" }, "*")),
+            required && React.createElement("span", { className: "p-1 text-bia-red" }, "*"))),
         React.createElement("div", { className: "relative w-full" },
-            React.createElement("input", __assign({ className: "field 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 }, 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 }, props)),
             React.createElement("div", { className: "absolute inset-y-0 flex items-center pl-3 ".concat(actionElement ? '' : iconStyle, " ").concat(iconPosition, " ").concat(iconSizing) }, iconElement)),
-        React.createElement("div", { className: "desc flex justify-between gap-1 text-xs ".concat(descColor) },
-            descText && React.createElement("span", null, descText),
+        (descText || maxLength) && (React.createElement("div", { className: "bianic-text-input-desc flex justify-between gap-1 text-xs ".concat(descColor) },
+            React.createElement("span", null, descText),
             maxLength && (React.createElement("span", null,
                 remainWords,
                 "/",
-                maxLength,
-                ' ')))));
+                maxLength))))));
 }
 TextInput.defaultProps = {
     descText: '',
@@ -1756,7 +1841,7 @@ TextInput.defaultProps = {
     placeholder: '',
     readOnly: false,
     variant: 'text',
-    value: '',
+    value: undefined,
     onChange: function () { },
     inputClassName: '',
     isFlatRight: false,
@@ -1815,7 +1900,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, props = __rest(_a, ["descText", "disabled", "id", "size", "label", "placeholder", "required", "rows", "maxLength", "value", "readOnly"]);
+    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, id = _a.id, _c = _a.size, size = _c === void 0 ? 'md' : _c, label = _a.label, _d = _a.placeholder, placeholder = _d === void 0 ? '' : _d, required = _a.required, rows = _a.rows, _e = _a.maxLength, maxLength = _e === void 0 ? undefined : _e, value = _a.value, _f = _a.readOnly, readOnly = _f === void 0 ? false : _f, _g = _a.autoComplete, autoComplete = _g === void 0 ? 'off' : _g, props = __rest(_a, ["descText", "disabled", "id", "size", "label", "placeholder", "required", "rows", "maxLength", "value", "readOnly", "autoComplete"]);
     var inputRow = rows !== null && rows !== void 0 ? rows : 4;
     var inputClass = sizeConfig$9[size].inputClass;
     var remainWords = maxLength ? maxLength - (value ? value.length : 0) : 0;
@@ -1825,7 +1910,7 @@ function TextArea(_a) {
             required && React.createElement("span", { className: "p-1 text-bia-red" }, "*")),
         React.createElement("div", { className: "relative h-full w-full min-w-[250px]" },
             React.createElement(ResizeIcon, { className: "absolute bottom-[11px] right-[5px]" }),
-            React.createElement("textarea", __assign({ className: "field w-full  rounded border border-bia-grey-dark-10 bg-primary-white p-2.5 read-only:pointer-events-none focus-visible:outline-none enabled:hover:rounded-b-none enabled:hover:border-b-bia-blue enabled:focus:rounded-b-none enabled:focus:border-b-bia-blue disabled:bg-bia-grey-light-80 disabled:text-bia-grey-active ".concat(inputClass), rows: inputRow, id: id, placeholder: placeholder, disabled: disabled, maxLength: maxLength, value: value }, props, { readOnly: readOnly }))),
+            React.createElement("textarea", __assign({ className: "field bianic-text-area w-full  rounded border border-bia-grey-dark-10 bg-primary-white p-2.5 read-only:pointer-events-none focus-visible:outline-none enabled:hover:rounded-b-none enabled:hover:border-b-bia-blue enabled:focus:rounded-b-none enabled:focus:border-b-bia-blue disabled:bg-bia-grey-light-80 disabled:text-bia-grey-active ".concat(inputClass), rows: inputRow, id: id, placeholder: placeholder, disabled: disabled, maxLength: maxLength, value: value, autoComplete: autoComplete, readOnly: readOnly }, props))),
         React.createElement("div", { className: "desc flex justify-between gap-1 text-xs text-primary-cool" },
             descText && React.createElement("span", null, descText),
             maxLength && (React.createElement("span", null,
@@ -2043,9 +2128,9 @@ var sizeConfig$5 = {
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 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;
-    var _h = React.useState(false), isOpen = _h[0], setIsOpen = _h[1];
-    var _j = sizeConfig$5[size], iconClass = _j.iconClass, iconSize = _j.iconSize, inputClass = _j.inputClass;
+    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, id = _a.id, _c = _a.size, size = _c === void 0 ? 'md' : _c, label = _a.label, placeholder = _a.placeholder, _d = _a.required, required = _d === void 0 ? false : _d, options = _a.options, setValue = _a.setValue, value = _a.value, _e = _a.readOnly, readOnly = _e === void 0 ? false : _e, _f = _a.onChangeText, onChangeText = _f === void 0 ? function () { } : _f, _g = _a.onClickDropdown, onClickDropdown = _g === void 0 ? function () { } : _g, _h = _a.autoComplete, autoComplete = _h === void 0 ? 'off' : _h;
+    var _j = React.useState(false), isOpen = _j[0], setIsOpen = _j[1];
+    var _k = sizeConfig$5[size], iconClass = _k.iconClass, iconSize = _k.iconSize, inputClass = _k.inputClass;
     var inputRef = React.useRef(null);
     var handleOutsideClick = function (e) {
         if (inputRef.current && !inputRef.current.contains(e.target)) {
@@ -2069,7 +2154,7 @@ function LiveSearch(_a) {
             React.createElement("input", { className: "field peer w-full rounded border  border-bia-grey-dark-10 bg-primary-white read-only:pointer-events-none read-only:border-bia-grey-disabled focus-visible:outline-none enabled:hover:rounded-b-none enabled:hover:border-b-bia-blue enabled:focus:rounded-b-none enabled:focus:border-b-bia-blue disabled:border-bia-grey-dark-10 disabled:bg-bia-grey-light-10 disabled:text-bia-coolgrey ".concat(inputClass), onClick: function () { return setIsOpen(!isOpen); }, value: value.label, required: required, disabled: disabled, id: id, placeholder: placeholder, onChange: function (e) {
                     onChangeText(e);
                     setValue({ id: null, label: e.target.value });
-                }, type: "search", readOnly: readOnly }),
+                }, type: "search", readOnly: readOnly, autoComplete: autoComplete }),
             React.createElement("div", { className: "absolute inset-y-0 flex items-center pl-3 peer-hover:hidden peer-focus:hidden ".concat(iconClass) },
                 React.createElement(TbZoom, { className: "text-primary-black", style: { fontSize: iconSize } })),
             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) {
@@ -2269,68 +2354,86 @@ var activeConfig = {
         ActiveText: 'text-bia-coolgrey font-semibold',
     },
 };
+var sizingConfig = {
+    small: 'px-[15px] py-[4.5px]',
+    medium: 'px-[18px] py-[7.5px]',
+};
 
-function Piils(_a) {
-    var title = _a.title, _b = _a.iconLeft, iconLeft = _b === void 0 ? null : _b, _c = _a.iconRight, iconRight = _c === void 0 ? null : _c, selected = _a.selected, onClick = _a.onClick, props = __rest(_a, ["title", "iconLeft", "iconRight", "selected", "onClick"]);
-    var _d = activeConfig[String(selected)], ActiveContainer = _d.ActiveContainer, ActiveIcon = _d.ActiveIcon, ActiveText = _d.ActiveText, ActivePointer = _d.ActivePointer;
+function Pills(_a) {
+    var title = _a.title, _b = _a.iconLeft, iconLeft = _b === void 0 ? null : _b, _c = _a.iconRight, iconRight = _c === void 0 ? null : _c, selected = _a.selected, onClick = _a.onClick, _d = _a.size, size = _d === void 0 ? 'medium' : _d, props = __rest(_a, ["title", "iconLeft", "iconRight", "selected", "onClick", "size"]);
+    var _e = activeConfig[String(selected)], ActiveContainer = _e.ActiveContainer, ActiveIcon = _e.ActiveIcon, ActiveText = _e.ActiveText, ActivePointer = _e.ActivePointer;
     var disabledContainer = props.disabled ? 'opacity-50 ' : '';
+    var sizingStyles = sizingConfig[size] || sizingConfig.medium;
+    var textVariable = size === 'small' ? 'small-text-semibold' : 'normal-text-semibold';
     return (React.createElement("div", { className: "flex justify-between" },
         React.createElement("button", __assign({ type: "button", className: "flex ".concat(disabledContainer, " ").concat(ActiveContainer, " ").concat(props.disabled ? 'cursor-not-allowed' : ActivePointer, " cursor rounded-radius-full"), onClick: props.disabled ? function () { } : onClick, role: "button" }, props),
-            React.createElement("div", { className: "flex px-[15px] py-[7.5px] items-center justify-center gap-[5px] ".concat(ActiveText) },
+            React.createElement("div", { className: "flex items-center justify-center gap-[5px]  ".concat(sizingStyles, " ").concat(ActiveText) },
                 iconLeft && React.createElement("div", { className: "icon ".concat(ActiveIcon) }, iconLeft),
-                React.createElement("div", { className: "h-[21px] flex items-center justify-center" },
-                    React.createElement(Text, { variant: "normal-text-semibold" }, title)),
+                React.createElement("div", { className: "flex h-[21px] items-center justify-center" },
+                    React.createElement(Text, { variant: textVariable }, title)),
                 iconRight && React.createElement("div", { className: "icon ".concat(ActiveIcon) }, iconRight)))));
 }
-Piils.defaultProps = {
+Pills.defaultProps = {
     iconLeft: null,
     iconRight: null,
 };
 
 var classConfig$1 = {
     top: {
-        tooltipContainer: 'bottom-[100%] mb-[8px] left-1/2 -translate-x-1/2',
+        tooltipContainer: 'bottom-[calc(100%+10px)]  left-1/2  -translate-x-1/2',
         triangleContainer: 'left-0 -bottom-[4px] flex justify-center w-full h-auto',
-        triangleShape: 'w-[7.07px] h-[7.07px] border-l-[7.07px] border-l-transparent border-t-[7.07px] border-t-primary-black border-r-[7.07px] border-r-transparent',
+        triangleShape: 'border-l-[8px] border-l-transparent border-t-[5px] border-t-primary-black border-r-[8px] border-r-transparent',
     },
     right: {
-        tooltipContainer: 'left-[100%] ms-[8px] top-1/2 -translate-y-1/2',
+        tooltipContainer: 'left-[calc(100%+10px)] top-1/2 -translate-y-1/2',
         triangleContainer: '-left-[4px] bottom-0 flex items-center w-auto h-full',
-        triangleShape: 'w-[7.07px] h-[7.07px] border-t-[7.07px] border-t-transparent border-r-[7.07px] border-r-primary-black border-b-[7.07px] border-b-transparent',
+        triangleShape: 'border-t-[8px] border-t-transparent border-r-[5px] border-r-primary-black border-b-[8px] border-b-transparent',
     },
     bottom: {
-        tooltipContainer: 'top-[100%] mt-[8px] left-1/2 -translate-x-1/2',
-        triangleContainer: 'left-0 -top-[4px] flex justify-center w-full h-auto',
-        triangleShape: 'w-[7.07px] h-[7.07px] mt-[-5px] border-l-[7.07px] border-l-transparent border-b-[7.07px] border-b-primary-black border-r-[7.07px] border-r-transparent',
+        tooltipContainer: 'top-[calc(100%+10px)]  left-1/2  -translate-x-1/2',
+        triangleContainer: 'px-[10px] left-0 -top-[9px] flex justify-center w-full h-auto',
+        triangleShape: 'border-l-[8px] border-l-transparent border-b-[5px] border-b-primary-black border-r-[8px] border-r-transparent',
     },
     left: {
-        tooltipContainer: 'right-[100%] me-[8px] top-1/2 -translate-y-1/2',
+        tooltipContainer: 'right-[calc(100%+10px)] top-1/2 -translate-y-1/2',
         triangleContainer: '-right-[4px] bottom-0 flex items-center w-auto h-full',
-        triangleShape: 'w-[7.07px] h-[7.07px] border-t-[7.07px] border-t-transparent border-l-[7.07px] border-l-primary-black border-b-[7.07px] border-b-transparent',
+        triangleShape: 'border-t-[8px] border-t-transparent border-l-[5px] border-l-primary-black border-b-[8px] border-b-transparent',
+    },
+    'top-right': {
+        tooltipContainer: 'bottom-[calc(100%+10px)] right-0',
+        triangleContainer: 'px-[10px] left-0 -bottom-[4px] flex justify-end w-full h-auto',
+        triangleShape: 'border-l-[8px] border-l-transparent border-t-[5px] border-t-primary-black border-r-[8px] border-r-transparent',
+    },
+    'top-left': {
+        tooltipContainer: 'bottom-[calc(100%+10px)] left-0',
+        triangleContainer: 'px-[10px] left-0 -bottom-[4px] flex justify-start w-full h-auto',
+        triangleShape: 'border-l-[8px] border-l-transparent border-t-[5px] border-t-primary-black border-r-[8px] border-r-transparent',
+    },
+    'bottom-right': {
+        tooltipContainer: 'top-[calc(100%+10px)]  right-0',
+        triangleContainer: 'px-[10px] left-0 -top-[9px] flex justify-end w-full h-auto',
+        triangleShape: 'border-l-[8px] border-l-transparent border-b-[5px] border-b-primary-black border-r-[8px] border-r-transparent',
+    },
+    'bottom-left': {
+        tooltipContainer: 'top-[calc(100%+10px)]  left-0',
+        triangleContainer: 'px-[10px] left-0 -top-[9px] flex justify-start w-full h-auto',
+        triangleShape: 'border-l-[8px] border-l-transparent border-b-[5px] border-b-primary-black border-r-[8px] border-r-transparent',
     },
 };
 
 function Popover(_a) {
-    var children = _a.children, content = _a.content, _b = _a.delay, delay = _b === void 0 ? 400 : _b, _c = _a.direction, direction = _c === void 0 ? 'bottom' : _c, _d = _a.title, title = _d === void 0 ? '' : _d, open = _a.open, setOpen = _a.setOpen;
-    var timeout;
-    var showPopover = function () {
-        timeout = setTimeout(function () {
-            setOpen(true);
-        }, delay);
-    };
-    var hidePopover = function () {
-        clearInterval(timeout);
-        setOpen(false);
-    };
-    var _e = classConfig$1[direction], tooltipContainer = _e.tooltipContainer, triangleContainer = _e.triangleContainer, triangleShape = _e.triangleShape;
-    return (React.createElement("div", { className: "Popover-Wrapper relative block w-fit h-fit", onMouseEnter: showPopover, onMouseLeave: hidePopover },
+    var children = _a.children, content = _a.content; _a.delay; var _c = _a.direction, direction = _c === void 0 ? 'bottom' : _c, _d = _a.title, title = _d === void 0 ? '' : _d; _a.maxWidth;
+    var wrapperRef = React.useRef(null);
+    var _e = useDetectOutsideClick(wrapperRef, false), isOpen = _e[0], setIsOpen = _e[1];
+    var _f = classConfig$1[direction], tooltipContainer = _f.tooltipContainer, triangleContainer = _f.triangleContainer, triangleShape = _f.triangleShape;
+    return (React.createElement("div", { className: "Bianic-popover-Wrapper relative block h-fit w-fit", role: "button", ref: wrapperRef, onClick: function () { return setIsOpen(true); } },
         children,
-        open && (React.createElement("div", { className: "Popover-Tip absolute px-[20px] py-[17.5px] text-bia-sm bg-primary-black text-primary-white z-50 rounded-[4px] w-[245px] space-y-[5px] ".concat(tooltipContainer) },
+        isOpen && (React.createElement("div", { className: "Bianic-popover-Tip text-bia-sm absolute z-50 w-[245px] space-y-[5px] rounded-[4px] bg-primary-black px-[20px] py-[17.5px] text-primary-white ".concat(tooltipContainer) },
             React.createElement("div", { className: "flex flex-col" },
-                React.createElement("div", { className: "text-[16px] leading-[19.42px] mb-[5px] font-humnst777 font-bold" }, title),
-                React.createElement("div", { className: "text-[12px] font-segoe font-normal break-words" }, content)),
-            React.createElement("div", { className: "absolute ".concat(triangleContainer) },
-                React.createElement("div", { className: "w-0 h-0 ".concat(triangleShape) }))))));
+                React.createElement("div", { className: "mb-[5px] font-humnst777 text-[16px] font-bold leading-[19.42px]" }, title),
+                React.createElement("div", { className: "break-words font-segoe text-[12px] font-normal" }, content)),
+            React.createElement("div", { className: "triangle absolute ".concat(triangleContainer) },
+                React.createElement("div", { className: "h-0 w-0 ".concat(triangleShape) }))))));
 }
 Popover.defaultProps = {
     delay: 400,
@@ -2652,7 +2755,8 @@ var colorConfig = {
     blue: 'bg-bia-blue text-primary-white',
     teal: 'bg-bia-teal text-primary-white',
     green: 'bg-bia-green text-primary-white',
-    yellow: 'bg-bia-yellow text-primary-white',
+    // yellow: 'bg-bia-yellow text-primary-black',
+    orange: 'bg-bia-orange text-primary-white',
     red: 'bg-bia-red text-primary-white',
     black: 'bg-primary-black text-primary-white',
     white: 'bg-primary-white text-primary-black border border-primary-black',
@@ -2693,7 +2797,7 @@ var colorUnion = [
     'blue',
     'teal',
     'green',
-    'yellow',
+    'orange',
     'red',
     'black',
     'white',
@@ -2702,12 +2806,12 @@ var colorUnion = [
 var sizeUnion = ['md', 'sm', 'tn'];
 var variantUnion = ['label', 'icon', 'closeable'];
 var TagLabel = function (_a) {
-    var color = _a.color, _b = _a.size, size = _b === void 0 ? 'md' : _b, variant = _a.variant, closeHandler = _a.closeHandler, open = _a.open, text = _a.text, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon; _a.left; _a.right; var bgColor = _a.bgColor, textColor = _a.textColor, isBlock = _a.isBlock, maxWidth = _a.maxWidth, isDark = _a.isDark, props = __rest(_a, ["color", "size", "variant", "closeHandler", "open", "text", "leftIcon", "rightIcon", "left", "right", "bgColor", "textColor", "isBlock", "maxWidth", "isDark"]);
+    var color = _a.color, _b = _a.size, size = _b === void 0 ? 'md' : _b, variant = _a.variant, closeHandler = _a.closeHandler, open = _a.open, text = _a.text, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon; _a.left; _a.right; var _c = _a.bgColor, bgColor = _c === void 0 ? 'grey-light-50' : _c, _d = _a.textColor, textColor = _d === void 0 ? 'black' : _d, outlineColor = _a.outlineColor, isBlock = _a.isBlock, maxWidth = _a.maxWidth, isDark = _a.isDark; _a.style; var props = __rest(_a, ["color", "size", "variant", "closeHandler", "open", "text", "leftIcon", "rightIcon", "left", "right", "bgColor", "textColor", "outlineColor", "isBlock", "maxWidth", "isDark", "style"]);
     var validatedColor = validUnion(color, colorUnion);
     var validatedSize = validUnion(size, sizeUnion);
     var validatedVariant = validUnion(variant, variantUnion);
     var containerRef = React.useRef(null);
-    var _c = React.useState(null), sizeCount = _c[0], setSizeCount = _c[1];
+    var _e = React.useState(null), sizeCount = _e[0], setSizeCount = _e[1];
     React.useEffect(function () {
         if (variant === 'icon') {
             // Get the size of the icon
@@ -2724,13 +2828,14 @@ var TagLabel = function (_a) {
         }
     }, []);
     var defaultIconSize = validatedSize === 'md' ? 'text-xl' : 'text-sm';
+    var borderColorRules = outlineColor || bgColor;
     var roundedClass = validatedVariant === 'icon' ? 'rounded-full' : 'rounded-[50px]';
     var sizeClass = validatedVariant === 'icon'
         ? iconOnlySizeConfig[validatedSize]
         : sizeConfig[validatedSize];
     var isCloseableClass = validatedVariant === 'closeable' && rightPaddingConfig[validatedSize];
     var colorClass = validatedColor === 'custom'
-        ? "bg-bia-".concat(bgColor, " text-bia-").concat(textColor)
+        ? "bg-bia-".concat(bgColor, " text-bia-").concat(textColor, " border border-bia-").concat(borderColorRules)
         : colorConfig[validatedColor];
     var blockclass = isBlock && validatedVariant !== 'icon' ? 'w-full' : "w-fit";
     var maxWidthStyle = !isBlock ? maxWidth + 'px' : '';
@@ -2767,8 +2872,8 @@ TagLabel.defaultProps = {
     rightIcon: null,
     left: null,
     right: null,
-    bgColor: null,
-    textColor: null,
+    bgColor: 'grey-light-50',
+    textColor: 'black',
     isBlock: false,
     maxWidth: 300,
     isDark: false,
@@ -2902,7 +3007,7 @@ exports.MenuItem = MenuItem;
 exports.Modal = Modal;
 exports.P = P;
 exports.PaginationBar = PaginationBar;
-exports.Pills = Piils;
+exports.Pills = Pills;
 exports.Popover = Popover;
 exports.ProgressBar = ProgressBar;
 exports.ProgressCircle = ProgressCircle;