bianic-ui 1.5.1-beta.9 → 1.6.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',
@@ -1468,9 +1484,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 +1512,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 +1776,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 ? '' : _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';
@@ -1735,7 +1819,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: "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: "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, 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),
@@ -1815,7 +1899,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 +1909,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 +2127,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 +2153,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) {
@@ -2289,48 +2373,60 @@ Piils.defaultProps = {
 
 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 +2748,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 +2790,7 @@ var colorUnion = [
     'blue',
     'teal',
     'green',
-    'yellow',
+    'orange',
     'red',
     'black',
     'white',
@@ -2702,12 +2799,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 +2821,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 +2865,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,