bianic-ui 1.0.0-beta.8 → 1.1.0-beta.2

package/dist/cjs/index.js

@@ -88,7 +88,7 @@ function IconBase(props) {
 // THIS FILE IS AUTO GENERATED
 function TbAlertTriangle (props) {
   return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M12 9v4"},"child":[]},{"tag":"path","attr":{"d":"M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z"},"child":[]},{"tag":"path","attr":{"d":"M12 16h.01"},"child":[]}]})(props);
-}function TbCheck$1 (props) {
+}function TbCheck (props) {
   return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M5 12l5 5l10 -10"},"child":[]}]})(props);
 }function TbChevronDown (props) {
   return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M6 9l6 6l6 -6"},"child":[]}]})(props);
@@ -155,7 +155,7 @@ var AlertConfig = {
         ContainerIcon: 'bg-bia-green',
         close: 'text-bia-green',
         icon: {
-            true: TbCheck$1,
+            true: TbCheck,
             false: '',
         },
     },
@@ -246,38 +246,80 @@ var textClasses = {
     'tiny-text-bold': 'text-size-tiny font-bold font-["Arial"]',
 };
 
+var childrenElement = function (element) {
+    if (element === undefined)
+        return '';
+    // if (typeof element === 'object') return '';
+    return element;
+};
+var validUnion = function (value, union) {
+    return union.includes(value) ? value : union[0];
+};
+
+var variantUnion$2 = [
+    'normal-text',
+    'large-text',
+    'large-text-semibold',
+    'medium-text',
+    'medium-text-semibold',
+    'caption',
+    'caption-semibold',
+    'normal-text-semilight',
+    'normal-text-semibold',
+    'normal-text-bold',
+    'small-text',
+    'small-text-semibold',
+    'tiny-text',
+    'tiny-text-bold',
+    'script',
+    'link',
+];
 function Text(_a) {
     var _b = _a.extended, extended = _b === void 0 ? '' : _b, variant = _a.variant, children = _a.children;
-    return (React.createElement("span", { className: "text ".concat(textClasses[variant], " ").concat(extended) }, children));
+    var validatedVariant = validUnion(variant, variantUnion$2);
+    return (React.createElement("span", { className: "text ".concat(textClasses[validatedVariant], " ").concat(extended) }, childrenElement(children)));
 }
 Text.defaultProps = {
     extended: '',
 };
 
 function Alert(_a) {
-    var title = _a.title, caption = _a.caption, variant = _a.variant, visible = _a.visible, setVisible = _a.setVisible, visibleIcon = _a.visibleIcon, visibleClose = _a.visibleClose;
-    var IconComponent = AlertConfig[variant].icon[visibleIcon ? 'true' : 'false'];
+    var _b = _a.title, title = _b === void 0 ? '' : _b, caption = _a.caption, _c = _a.variant, variant = _c === void 0 ? 'base' : _c, _d = _a.visible, visible = _d === void 0 ? true : _d, _e = _a.setVisible, setVisible = _e === void 0 ? function () { } : _e, _f = _a.visibleIcon, visibleIcon = _f === void 0 ? true : _f, _g = _a.visibleClose, visibleClose = _g === void 0 ? false : _g;
+    var validateVariant = validUnion(variant, [
+        'base',
+        'info',
+        'success',
+        'warning',
+        'danger',
+    ]);
+    var IconComponent = AlertConfig[validateVariant].icon[visibleIcon ? 'true' : 'false'];
     var IconX = AlertConfig[visibleClose ? 'true' : 'false'];
     var handleCloseAlert = function () {
         setVisible(false);
     };
-    return (visible && (React.createElement("div", { className: "flex flex-col w-full" },
-        React.createElement("div", { className: "w-full ".concat(AlertConfig[variant].bg, "  rounded-[5px] mb-5") },
+    return (visible && (React.createElement("div", { className: "alert-container flex flex-col w-full" },
+        React.createElement("div", { className: "alert-body w-full ".concat(AlertConfig[validateVariant].bg, "  rounded-[5px]") },
             React.createElement("div", { className: "flex w-full" },
-                React.createElement("div", { className: "accent flex items-center py-[10px]" },
-                    React.createElement("div", { className: "left-0 w-[3px] h-full ".concat(AlertConfig[variant].vBar, "  rounded-r-[10px]") })),
-                React.createElement("div", { className: "content w-full flex py-[10px] pe-[10px] items-start" },
-                    React.createElement("div", { className: "icon-area flex ps-[10px]" }, IconComponent && typeof IconComponent === 'function' && (React.createElement("div", { className: "flex p-[7px] ".concat(AlertConfig[variant].ContainerIcon, " items-center justify-center rounded-radius-full") },
+                React.createElement("div", { className: "alert-accent flex items-center py-[10px]" },
+                    React.createElement("div", { className: "left-0 w-[3px] h-full ".concat(AlertConfig[validateVariant].vBar, "  rounded-r-[10px]") })),
+                React.createElement("div", { className: "alert-content w-full flex py-[10px] pe-[10px] items-start" },
+                    React.createElement("div", { className: "icon-area flex ps-[10px]" }, IconComponent && typeof IconComponent === 'function' && (React.createElement("div", { className: "flex p-[7px] ".concat(AlertConfig[validateVariant].ContainerIcon, " items-center justify-center rounded-radius-full") },
                         React.createElement(IconComponent, { size: 20, color: "white" })))),
-                    React.createElement("div", { className: "flex w-full justify-between" },
-                        React.createElement("div", { className: "flex ps-[10px] text-area flex-col ".concat(visibleClose ? 'mr-[10px]' : '', " ").concat(visibleIcon ? '' : 'ml-[-10px]') },
+                    React.createElement("div", { className: "content-area flex w-full justify-between" },
+                        React.createElement("div", { className: "text-area flex ps-[10px] text-area flex-col ".concat(visibleClose ? 'mr-[10px]' : '', " ").concat(visibleIcon ? '' : 'ml-[-10px]') },
                             React.createElement("div", { className: "flex justify-between" },
                                 React.createElement(Text, { variant: "normal-text-semibold" }, title)),
                             React.createElement(Text, { variant: "small-text" }, caption)),
-                        React.createElement("div", { className: "flex closable-area" }, IconX && typeof IconX === 'function' && (React.createElement(IconX, { className: "cursor-pointer ".concat(AlertConfig[variant].hover, " ").concat(AlertConfig[variant].active, " ").concat(AlertConfig[variant].focus, " ").concat(AlertConfig[variant].close), onClick: function () { return handleCloseAlert(); }, tabIndex: 0 }))))))))));
+                        IconX && typeof IconX === 'function' && (React.createElement("div", { className: "closable-area flex " },
+                            React.createElement(IconX, { className: "cursor-pointer ".concat(AlertConfig[validateVariant].hover, " ").concat(AlertConfig[validateVariant].active, " ").concat(AlertConfig[validateVariant].focus, " ").concat(AlertConfig[validateVariant].close), onClick: function () { return handleCloseAlert(); }, tabIndex: 0 }))))))))));
 }
 Alert.defaultProps = {
-    title: null,
+    title: '',
+    variant: 'base',
+    visible: true,
+    setVisible: function () { },
+    visibleIcon: true,
+    visibleClose: false,
 };
 
 /******************************************************************************
@@ -335,7 +377,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var radiusConfig = {
+var radiusConfig$1 = {
     default: {
         sm: 'rounded-radius-sm focus-visible:rounded-radius-sm',
         md: 'rounded-radius-md focus-visible:rounded-radius-md',
@@ -349,20 +391,20 @@ var radiusConfig = {
         tn: 'rounded-radius-full focus-visible:rounded-radius-full',
     },
 };
-var sizeConfig$a = {
-    lg: 'py-[10.5px] px-[13px] h-[48px] flex items-center justify-center gap-[10px]',
-    md: ' px-[11px] py-[9px] h-[40px] flex items-center justify-center gap-[5px] ',
-    sm: 'px-[8px] py-[6px] h-[30px] flex items-center justify-center gap-[5px] ',
-    tn: 'px-[4px] py-[2px] h-[22px] flex items-center justify-center gap-[3px]',
+var sizeConfig$b = {
+    lg: 'py-[10.5px] px-[13px] h-[48px] flex items-center justify-center gap-[10px] text-size-md',
+    md: ' px-[11px] py-[9px] h-[40px] flex items-center justify-center gap-[5px] text-size-base',
+    sm: 'px-[8px] py-[6px] h-[30px] flex items-center justify-center gap-[5px] text-size-sm',
+    tn: 'px-[4px] py-[2px] h-[22px] flex items-center justify-center gap-[3px] text-size-tiny',
 };
-var iconOnlySizeConfig = {
+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]',
 };
 var shadow = 'shadow-[0px_6px_18px_1px_rgba(188,199,237,0.5)] disabled:shadow-none active:shadow-none';
-var variantConfig$1 = {
+var variantConfig$2 = {
     default: "\n  text-primary-black \n  bg-bia-grey \n  active:bg-bia-grey-dark-10  \n  hover:bg-bia-grey-hover \n  disabled:bg-bia-grey-disabled \n  disabled:text-bia-grey-active \n  disabled:cursor-not-allowed \n  focus-visible:outline \n  focus-visible:outline-offset-0 \n  focus-visible:outline-bia-blue-light-50\n  focus-visible:outline-[3px] \n  focus-visible:rounded-md\n  shadow-[0px_6px_18px_1px_#BCC7ED80] ".concat(shadow),
     primary: "\n  text-primary-white \n  bg-bia-blue \n  active:bg-bia-blue-dark-10 \n  hover:bg-bia-blue-hover \n  disabled:bg-bia-blue-disabled \n  disabled:text-bia-blue-light-90 \n  disabled:cursor-not-allowed \n  focus-visible:outline\n  focus-visible:outline-offset-0\n  focus-visible:outline-bia-blue-light-50 \n  focus-visible:outline-[3px] \n  focus-visible:rounded-md\n  shadow-bia-blue-disabled ".concat(shadow),
     info: "\n  text-primary-white \n  bg-bia-teal \n  active:bg-bia-teal-dark-10 \n  hover:bg-bia-teal-hover \n  disabled:bg-bia-teal-light-50 \n  disabled:text-bia-teal-light-90 \n  disabled:cursor-not-allowed \n  focus-visible:outline \n  focus-visible:outline-offset-0\n  focus-visible:outline-bia-teal-light-50 \n  focus-visible:outline-[3px] \n  focus-visible:rounded-md \n  shadow-bia-teal-disabled ".concat(shadow),
@@ -380,12 +422,38 @@ var variantConfig$1 = {
     'danger-outlined': "\n  text-bia-red \n  border-solid \n  border \n  border-bia-red \n  bg-primary-white \n  active:text-bia-red-dark-10 \n  active:border-bia-red-active \n  active:bg-bia-red-light-90 \n  active:border-bia-red-disabled \n  hover:text-bia-red-hover \n  hover:border-bia-red-hover \n  disabled:cursor-not-allowed \n  disabled:border-[1px]\n  disabled:border-bia-red-light-50 \n  disabled:text-bia-red-light-50\n  focus-visible:outline-none \n  focus-visible:outline-offset-0 \n  focus-visible:outline-[3px] \n  focus-visible:rounded-md \n  focus-visible:outline-bia-red-light-50 \n  focus-visible:border-none \n  \n  ",
 };
 
+var variantUnion$1 = [
+    'default',
+    'danger',
+    'info',
+    'link',
+    'primary',
+    'subtle',
+    'subtle-link',
+    'success',
+    'warning',
+    'default-outlined',
+    'danger-outlined',
+    'info-outlined',
+    'primary-outlined',
+    'success-outlined',
+    'warning-outlined',
+];
+var radiusUnion = ['default', 'full-rounded'];
+var sizeUnion$4 = ['md', 'lg', 'sm', 'tn'];
 function Button(_a) {
-    var label = _a.label, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.radius, radius = _d === void 0 ? 'default' : _d, _e = _a.size, size = _e === void 0 ? 'md' : _e, _f = _a.variant, variant = _f === void 0 ? 'default' : _f, _g = _a.iconLeft, iconLeft = _g === void 0 ? null : _g, _h = _a.iconRight, iconRight = _h === void 0 ? null : _h, props = __rest(_a, ["label", "className", "disabled", "radius", "size", "variant", "iconLeft", "iconRight"]);
-    return (React.createElement("button", __assign({ type: "button", className: "button flex justify-center items-center ".concat(variantConfig$1[variant], " ").concat(label ? sizeConfig$a[size] : iconOnlySizeConfig[size], " ").concat(radiusConfig[radius][size], " ").concat(className), disabled: disabled }, props),
-        iconLeft,
-        label,
-        iconRight));
+    var label = _a.label, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.radius, radius = _d === void 0 ? 'default' : _d, _e = _a.size, size = _e === void 0 ? 'md' : _e, _f = _a.variant, variant = _f === void 0 ? 'default' : _f, _g = _a.iconLeft, iconLeft = _g === void 0 ? null : _g, _h = _a.iconRight, iconRight = _h === void 0 ? null : _h, _j = _a.left, left = _j === void 0 ? null : _j, _k = _a.right, right = _k === void 0 ? null : _k, props = __rest(_a, ["label", "className", "disabled", "radius", "size", "variant", "iconLeft", "iconRight", "left", "right"]);
+    var validatedVariant = validUnion(variant, variantUnion$1);
+    var validatedSize = validUnion(size, sizeUnion$4);
+    var validatedRadius = validUnion(radius, radiusUnion);
+    var sizeClass = label
+        ? sizeConfig$b[validatedSize]
+        : 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 justify-center items-center font-semibold ".concat(classString), disabled: disabled }, props),
+        childrenElement(iconLeft || left),
+        childrenElement(label),
+        childrenElement(iconRight || right)));
 }
 Button.defaultProps = {
     label: null,
@@ -396,6 +464,8 @@ Button.defaultProps = {
     variant: 'default',
     iconLeft: null,
     iconRight: null,
+    left: null,
+    right: null,
 };
 
 var AvatarConfig = {
@@ -495,7 +565,7 @@ Badge.defaultProps = {
     color: undefined,
 };
 
-var variantConfig = {
+var variantConfig$1 = {
     black: {
         bg: 'bg-primary-black',
         active: 'active:bg-bia-coolgrey-dark-30 active:rounded-sm',
@@ -531,11 +601,11 @@ var variantConfig = {
 function Banner(_a) {
     var children = _a.children, _b = _a.closeable, closeable = _b === void 0 ? true : _b, _c = _a.variant, variant = _c === void 0 ? 'black' : _c, open = _a.open, onClose = _a.onClose;
     if (open) {
-        return (React.createElement("div", { className: "w-full h-[42px] py-[22px] text-size-base font-semibold flex justify-center items-center text-white relative ".concat(variantConfig[variant].bg) },
+        return (React.createElement("div", { className: "w-full h-[42px] py-[22px] text-size-base font-semibold flex justify-center items-center text-white relative ".concat(variantConfig$1[variant].bg) },
             React.createElement("div", { className: "w-full flex justify-center items-center gap-[10px]" },
                 React.createElement("div", { className: "font-semibold font-segoe text-[14px] leading-[21px]" }, children),
-                React.createElement("div", { className: "flex items-center justify-center" }, closeable && (React.createElement("button", { className: "ml-auto text-xs outline-2 text-white absolute right-4 w-[18px] h-[18px] flex justify-center items-center ".concat(variantConfig[variant].focus), type: "button", onClick: function () { return onClose(false); } },
-                    React.createElement(TbX, { className: "text-[18px] ".concat(variantConfig[variant].hover, " ").concat(variantConfig[variant].active) })))))));
+                React.createElement("div", { className: "flex items-center justify-center" }, closeable && (React.createElement("button", { className: "ml-auto text-xs outline-2 text-white absolute right-4 w-[18px] h-[18px] flex justify-center items-center ".concat(variantConfig$1[variant].focus), type: "button", onClick: function () { return onClose(false); } },
+                    React.createElement(TbX, { className: "text-[18px] ".concat(variantConfig$1[variant].hover, " ").concat(variantConfig$1[variant].active) })))))));
     }
 }
 Banner.defaultProps = {
@@ -1421,7 +1491,7 @@ Divider.defaultProps = {
     classname: '',
 };
 
-var sizeConfig$9 = {
+var sizeConfig$a = {
     md: {
         fieldSize: 'text-size-base p-2.5 font-[350] h-10',
         iconPosition: 'right-[10px]',
@@ -1455,7 +1525,7 @@ var styleConfig = {
 function ValidationIcon(_a) {
     var isValid = _a.isValid, iconSize = _a.iconSize;
     if (isValid) {
-        return (React.createElement(TbCheck$1, { className: "text-bia-green", style: { fontSize: iconSize } }));
+        return (React.createElement(TbCheck, { className: "text-bia-green", style: { fontSize: iconSize } }));
     }
     return React.createElement(TbX, { className: "text-bia-red", style: { fontSize: iconSize } });
 }
@@ -1476,7 +1546,7 @@ 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;
     var _m = React.useState(false), isShow = _m[0], setIsShow = _m[1];
     var _o = styleConfig[variant], fieldStyle = _o.fieldStyle, iconStyle = _o.iconStyle;
-    var _p = sizeConfig$9[size], iconSize = _p.iconSize, fieldSize = _p.fieldSize, iconPosition = _p.iconPosition;
+    var _p = sizeConfig$a[size], iconSize = _p.iconSize, fieldSize = _p.fieldSize, iconPosition = _p.iconPosition;
     var typeVariant = variant;
     if (variant === 'password')
         typeVariant = isShow ? 'text' : 'password';
@@ -1488,9 +1558,9 @@ function TextInput(_a) {
         descColor = 'text-bia-red';
     var bottomBorderColor = 'hover:border-b-bia-blue focus:border-b-bia-blue';
     if (!disabled && isExistValidation && isValid)
-        bottomBorderColor = 'border-b-bia-green';
+        bottomBorderColor = 'hover:border-b-bia-green focus:border-b-bia-green';
     if (!disabled && isExistValidation && !isValid)
-        bottomBorderColor = 'border-b-bia-red';
+        bottomBorderColor = 'hover:border-b-bia-red focus:border-b-bia-red';
     var iconElement = null;
     if (!disabled && isExistValidation)
         iconElement = React.createElement(ValidationIcon, { isValid: isValid, iconSize: iconSize });
@@ -1499,14 +1569,14 @@ function TextInput(_a) {
     if (variant === 'password') {
         iconElement = (React.createElement(PasswordIcon, { isShow: isShow, showHandler: setIsShow, iconSize: iconSize, disabled: disabled }));
     }
-    return (React.createElement("div", { className: "field-group w-full flex flex-col gap-y-2" },
+    return (React.createElement("div", { className: "field-group flex w-full flex-col gap-y-2" },
         React.createElement("label", { htmlFor: id, className: "label text-xs font-semibold" },
             label,
             required && React.createElement("span", { className: "p-1 text-bia-red" }, "*")),
-        React.createElement("div", { className: "w-full relative" },
-            React.createElement("input", { className: "field bg-primary-white disabled:bg-bia-grey-light-80  disabled:text-bia-grey-active read-only:border-bia-grey-light-50 read-only:pointer-events-none w-full border border-bia-grey-dark-10 disabled:border-bia-grey-dark-10 focus:rounded-b-none hover:rounded-b-none focus-visible:outline-none rounded ".concat(fieldStyle, " ").concat(fieldSize, " ").concat(bottomBorderColor), disabled: disabled, id: id, placeholder: placeholder || label, readOnly: readOnly, required: required, type: typeVariant, value: value, onChange: function (e) { return onChange(e); } }),
-            React.createElement("div", { className: "absolute inset-y-0 pl-3 flex items-center ".concat(iconStyle, " ").concat(iconPosition) }, iconElement)),
-        React.createElement("span", { className: "desc text-xs ".concat(descColor) }, descText)));
+        React.createElement("div", { className: "relative w-full" },
+            React.createElement("input", { className: "field w-full rounded  border border-bia-grey-dark-10 bg-primary-white 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(fieldStyle, " ").concat(fieldSize, " ").concat(bottomBorderColor), disabled: disabled, id: id, placeholder: placeholder || label, readOnly: readOnly, required: required, type: typeVariant, value: value, onChange: function (e) { return onChange(e); } }),
+            React.createElement("div", { className: "absolute inset-y-0 flex items-center pl-3 ".concat(iconStyle, " ").concat(iconPosition) }, iconElement)),
+        descText && (React.createElement("span", { className: "desc text-xs ".concat(descColor) }, descText))));
 }
 TextInput.defaultProps = {
     descText: '',
@@ -1533,7 +1603,7 @@ TextInputSimulation.defaultProps = {
 };
 
 // Desc: Radio button size configuration
-var sizeConfig$8 = {
+var sizeConfig$9 = {
     md: {
         checkSize: 'w-[22px] h-[22px]',
         labelSize: 'text-size-base',
@@ -1544,14 +1614,16 @@ var sizeConfig$8 = {
     },
 };
 
+var sizeUnion$3 = ['md', 'sm'];
 function Radio(_a) {
     var label = _a.label, _b = _a.size, size = _b === void 0 ? 'md' : _b, id = _a.id, _c = _a.onClick, onClick = _c === void 0 ? function () { } : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.checked, checked = _e === void 0 ? false : _e;
-    var _f = sizeConfig$8[size], checkSize = _f.checkSize, labelSize = _f.labelSize;
+    var validatedSize = validUnion(size, sizeUnion$3);
+    var _f = sizeConfig$9[validatedSize], checkSize = _f.checkSize, labelSize = _f.labelSize;
     return (React.createElement("div", { className: "flex items-center" },
         React.createElement("div", { className: "bg-white rounded-full flex flex-shrink-0 justify-center items-center relative ".concat(checkSize) },
             React.createElement("input", { id: id, "aria-labelledby": "label1", type: "radio", className: "peer checkbox box-content appearance-none focus:opacity-100 focus:ring-1 focus:ring-offset-2 checked:disabled:border-bia-blue-disabled focus:ring-bia-blue focus:outline-none rounded-full border-bia-coolgrey-light-50 checked:border-bia-blue hover:border-bia-blue-hover disabled:border-bia-grey-dark-10 border-2 absolute cursor-pointer w-full h-full", onClick: function (e) { return onClick(e); }, checked: checked, disabled: disabled }),
             React.createElement("div", { className: "check-icon flex text-bia-grey group justify-center border-2 border-primary-white  peer-disabled:bg-bia-grey-light-80 peer-disabled:border-transparent peer-disabled:peer-checked:border-primary-white peer-checked:peer-disabled:bg-bia-blue-disabled peer-checked:hover:border-bia-blue-hover peer-checked:bg-bia-blue peer-checked:peer-hover:bg-bia-blue-hover outline-2 peer-checked:hover:outline-bia-blue-hover outline-bia-blue rounded-full w-full h-full z-1" })),
-        React.createElement("label", { htmlFor: id, className: "ml-2 leading-4 font-[350] ".concat(labelSize), style: { color: disabled ? '#8C8CA6' : '#2f2f2f' } }, label)));
+        React.createElement("label", { htmlFor: id, className: "ml-2 leading-4 font-[350] ".concat(labelSize), style: { color: disabled ? '#8C8CA6' : '#2f2f2f' } }, childrenElement(label))));
 }
 Radio.defaultProps = {
     label: '',
@@ -1562,7 +1634,7 @@ Radio.defaultProps = {
     checked: false,
 };
 
-var sizeConfig$7 = {
+var sizeConfig$8 = {
     md: {
         inputClass: 'text-size-base font-[350] min-h-10',
     },
@@ -1574,7 +1646,7 @@ var sizeConfig$7 = {
 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, props = __rest(_a, ["descText", "disabled", "id", "size", "label", "placeholder", "required", "rows"]);
     var inputRow = rows !== null && rows !== void 0 ? rows : 4;
-    var inputClass = sizeConfig$7[size].inputClass;
+    var inputClass = sizeConfig$8[size].inputClass;
     return (React.createElement("div", { className: "field-group w-full flex flex-col" },
         React.createElement("label", { htmlFor: id, className: "label text-xs pb-2 font-semibold" },
             label,
@@ -1594,7 +1666,7 @@ TextArea.defaultProps = {
     rows: 4,
 };
 
-var sizeConfig$6 = {
+var sizeConfig$7 = {
     md: {
         checkClass: 'w-[22px] h-[22px]',
         labelClass: 'text-size-base font-[350]',
@@ -1605,16 +1677,17 @@ var sizeConfig$6 = {
     },
 };
 
+var sizeUnion$2 = ['md', 'sm'];
 function Checkbox(_a) {
     var _b = _a.disabled, disabled = _b === void 0 ? false : _b, id = _a.id, _c = _a.size, size = _c === void 0 ? 'md' : _c, _d = _a.checked, checked = _d === void 0 ? false : _d, label = _a.label, _e = _a.onChange, onChange = _e === void 0 ? function () { } : _e, value = _a.value;
-    var _f = sizeConfig$6[size === 'sm' || size === 'md' ? size : 'md'], checkClass = _f.checkClass, labelClass = _f.labelClass;
+    var _f = sizeConfig$7[validUnion(size, sizeUnion$2)], checkClass = _f.checkClass, labelClass = _f.labelClass;
     return (React.createElement("div", { className: "flex items-center" },
         React.createElement("div", { className: "bg-white rounded-full flex flex-shrink-0 justify-center items-center relative ".concat(checkClass) },
             React.createElement("input", { id: id, type: "checkbox", className: "peer checkbox box-content appearance-none focus-visible:opacity-100 focus-visible:ring-1 focus-visible:ring-offset-2 focus-visible:ring-bia-blue focus-visible:outline-none rounded-full border-bia-coolgrey-light-50 checked:border-bia-blue disabled:border-bia-coolgrey-light-50 hover:border-bia-blue-hover disabled:checked:border-bia-blue-light-50 border-2 absolute cursor-pointer w-full h-full", checked: checked, onChange: function (e) { return onChange(e); }, disabled: disabled, value: value }),
             React.createElement("div", { className: "check-icon flex text-bia-grey group justify-center peer-checked:border-2 peer-checked:border-primary-white peer-checked:hover:border-bia-blue-hover peer-checked:bg-bia-blue peer-checked:peer-hover:bg-bia-blue-hover outline-2 peer-checked:hover:outline-bia-blue-hover outline-bia-blue peer-disabled:bg-bia-grey-light-80 peer-disabled:peer-checked:outline-bia-blue-light-50 peer-disabled:peer-checked:bg-bia-blue-light-50 rounded-full w-full h-full z-1" },
                 React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: " fill-bia-grey-dark-10 peer-checked:group-[]:fill-primary-white peer-checked:peer-hover:group-[]:fill-primary-white peer-hover:group-[]:fill-bia-blue-hover peer-disabled:group-[]:fill-bia-grey-dark-10 peer-disabled:peer-checked:group-[]:fill-primary-white", viewBox: "-5 -7 24 24", width: "24" },
                     React.createElement("path", { d: "M5.486 9.73a.997.997 0 0 1-.707-.292L.537 5.195A1 1 0 1 1 1.95 3.78l3.535 3.535L11.85.952a1 1 0 0 1 1.415 1.414L6.193 9.438a.997.997 0 0 1-.707.292z" })))),
-        React.createElement("label", { htmlFor: id, className: "ml-2 leading-4 text-grey-800 ".concat(labelClass), style: { color: disabled ? '#8C8CA6' : '' } }, label)));
+        React.createElement("label", { htmlFor: id, className: "ml-2 leading-4 text-grey-800 ".concat(labelClass), style: { color: disabled ? '#8C8CA6' : '' } }, childrenElement(label))));
 }
 Checkbox.defaultProps = {
     disabled: false,
@@ -1660,18 +1733,18 @@ CheckboxSimulation.defaultProps = {
     size: 'md',
 };
 
-var sizeConfig$5 = {
+var sizeConfig$6 = {
     md: {
         searchSize: 'text-size-base p-2.5 font-[350] h-10',
-        iconSize: 'right-[10px]',
+        iconSize: 'right-[10px] text-[18px]',
     },
     sm: {
         searchSize: 'text-size-sm p-1.5 font-normal h-[30px]',
-        iconSize: 'right-[7px]',
+        iconSize: 'right-[7px] text-[14px]',
     },
 };
 
-var sizeConfig$4 = {
+var sizeConfig$5 = {
     md: {
         container: 'text-size-base font-[350] py-[3px] first:pt-[8px] last:pb-[8px]',
         item: 'min-h-[34px] p-2.5',
@@ -1684,18 +1757,20 @@ var sizeConfig$4 = {
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 function DefaultDropdownItem(_a) {
-    var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.label, label = _c === void 0 ? '' : _c, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d, _e = _a.size, size = _e === void 0 ? 'md' : _e, isSelected = _a.isSelected, options = _a.options;
+    var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.label, label = _c === void 0 ? '' : _c, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d, _e = _a.size, size = _e === void 0 ? 'md' : _e, isSelected = _a.isSelected, options = _a.options, caption = _a.caption;
     var _f = React.useState(false), isHovered = _f[0], setisHovered = _f[1];
     var _g = React.useState(false), isHoveredSubMenu = _g[0], setIsHoveredSubMenu = _g[1];
     var isOpenDropdown = isHovered || isHoveredSubMenu;
     var selectedClass = isSelected ? 'font-semibold' : 'font-normal';
-    var _h = sizeConfig$4[size], containerClass = _h.container, item = _h.item;
+    var _h = sizeConfig$5[size], containerClass = _h.container, item = _h.item;
     var itemClass = "".concat(item, " ").concat(selectedClass, " ").concat(className);
     var isExistSubDropdown = options.length !== 0;
     return (React.createElement("div", { className: "w-full relative focus-visible:outline-bia-blue-light-50 ".concat(containerClass), tabIndex: 0, role: "button", onClick: function (e) { return onClick(e); }, onMouseEnter: function () { return setisHovered(true); }, onMouseLeave: function () { return setisHovered(false); }, onKeyDown: function () { } },
-        React.createElement("div", { className: "hover:bg-bia-blue-light-90 active:bg-bia-blue-light-80 select-none ".concat(itemClass) },
-            label,
-            isExistSubDropdown && (React.createElement(TbChevronRight, { className: "float-right text-bia-grey" }))),
+        React.createElement("div", { className: "hover:bg-bia-blue-light-90 active:bg-bia-blue-light-80 select-none flex flex-col ".concat(itemClass) },
+            React.createElement("span", null,
+                label,
+                isExistSubDropdown && (React.createElement(TbChevronRight, { className: "float-right text-bia-grey" }))),
+            React.createElement(Text, { variant: "small-text", extended: "text-bia-coolgrey" }, caption)),
         isOpenDropdown && options && isExistSubDropdown && (React.createElement("div", { className: "absolute z-50 top-0 right-0 translate-x-full border w-full bg-primary-white border-bia-grey-dark-10 rounded-md shadow-lg", onMouseEnter: function () { return setIsHoveredSubMenu(true); }, onMouseLeave: function () { return setIsHoveredSubMenu(false); } }, options.map(function (option) { return (React.createElement(DefaultDropdownItem, { label: option.label, size: size, options: option.options })); })))));
 }
 DefaultDropdownItem.defaultProps = {
@@ -1704,13 +1779,15 @@ DefaultDropdownItem.defaultProps = {
     size: 'md',
     options: [],
     isSelected: false,
+    caption: '',
 };
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
+var sizeUnion$1 = ['md', 'sm'];
 function SelectInput(_a) {
-    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, id = _a.id, label = _a.label, options = _a.options, _d = _a.required, required = _d === void 0 ? false : _d, selected = _a.selected, setSelected = _a.setSelected;
+    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, id = _a.id, label = _a.label, options = _a.options, _d = _a.required, required = _d === void 0 ? false : _d, selected = _a.selected, setSelected = _a.setSelected, props = __rest(_a, ["descText", "disabled", "size", "id", "label", "options", "required", "selected", "setSelected"]);
     var _e = React.useState(false), isOpen = _e[0], setIsOpen = _e[1];
-    var _f = sizeConfig$5[size], searchSize = _f.searchSize, iconSize = _f.iconSize;
+    var validatedSize = validUnion(size, sizeUnion$1);
+    var _f = sizeConfig$6[validatedSize], searchSize = _f.searchSize, iconSize = _f.iconSize;
     var inputRef = React.useRef(null);
     var handleOutsideClick = function (e) {
         if (inputRef.current && !inputRef.current.contains(e.target)) {
@@ -1723,21 +1800,27 @@ function SelectInput(_a) {
             document.removeEventListener('mousedown', handleOutsideClick);
         };
     });
-    return (React.createElement("div", { className: "field-group w-full flex flex-col", ref: inputRef },
-        React.createElement("label", { htmlFor: id, className: "label text-xs pb-2 font-semibold" },
-            label,
+    var isObjectOptionItem = false;
+    if (options.every(function (item) { return typeof item === "object" && item !== null; }))
+        isObjectOptionItem = true;
+    var selectedLabel = isObjectOptionItem && typeof selected === 'object' ? selected.label : selected;
+    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),
             required && React.createElement("span", { className: "p-1 text-bia-red" }, "*")),
-        React.createElement("div", { className: "group w-full relative" },
-            React.createElement("input", { className: "field bg-primary-white disabled:bg-bia-grey-light-80 pe-8 w-full border border-bia-grey-dark-10 enabled:hover:border-b-bia-blue enabled:hover:rounded-b-none enabled:focus:border-b-bia-blue enabled:focus:rounded-b-none focus-visible:outline-none cursor-pointer rounded disabled:text-bia-coolgrey peer ".concat(searchSize), onClick: function () { return setIsOpen(!isOpen); }, value: selected === null || selected === void 0 ? void 0 : selected.label, readOnly: true, id: id, disabled: disabled }),
-            React.createElement("div", { className: "absolute inset-y-0 pl-3 flex items-center pointer-events-none text-bia-coolgrey peer-disabled:text-bia-coolgrey-light-50 ".concat(iconSize) }, isOpen ? (React.createElement(TbChevronUp, { className: "" })) : (React.createElement(TbChevronDown, { className: "" }))),
-            isOpen && (React.createElement("div", { className: "absolute border w-full bg-primary-white border-bia-grey-dark-10 rounded-b-md shadow-lg z-10" }, options.map(function (option) {
-                var isSelected = selected && selected.id && option.id === selected.id;
-                return (React.createElement(DefaultDropdownItem, { label: option.label, size: size, isSelected: isSelected, onClick: function () {
+        React.createElement("div", { className: "group relative w-full" },
+            React.createElement("input", __assign({ className: "field peer w-full cursor-pointer rounded border border-bia-grey-dark-10 bg-primary-white pe-8 focus-visible:outline-none enabled:hover:rounded-b-none enabled:hover:border-b-bia-blue enabled:focus:rounded-b-none enabled:focus:border-b-bia-blue disabled:bg-bia-grey-light-80 disabled:text-bia-coolgrey ".concat(searchSize), onClick: function () { return setIsOpen(!isOpen); }, value: selectedLabel, readOnly: true, id: id, disabled: disabled }, props)),
+            React.createElement("div", { className: "pointer-events-none absolute inset-y-0 flex items-center pl-3 text-bia-coolgrey peer-disabled:text-bia-coolgrey-light-50 ".concat(iconSize) }, isOpen ? React.createElement(TbChevronUp, null) : React.createElement(TbChevronDown, null)),
+            isOpen && (React.createElement("div", { className: "absolute z-10 w-full rounded-b-md border border-bia-grey-dark-10 bg-primary-white shadow-lg" }, options.map(function (option) {
+                var isSelected = JSON.stringify(option) === JSON.stringify(selected);
+                var optionLabel = isObjectOptionItem ? option.label : option;
+                var optionCaption = isObjectOptionItem ? option.caption : '';
+                return (React.createElement(DefaultDropdownItem, { label: optionLabel, caption: optionCaption, size: validatedSize, isSelected: isSelected, onClick: function () {
                         setSelected(option);
                         setIsOpen(false);
                     } }));
             })))),
-        React.createElement("span", { className: "desc text-primary-cool text-xs mt-2" }, descText)));
+        React.createElement("span", { className: "desc mt-2 text-xs text-primary-cool" }, descText)));
 }
 SelectInput.defaultProps = {
     descText: '',
@@ -1751,37 +1834,12 @@ SelectInput.defaultProps = {
 };
 
 function SelectInputSimulation(_a) {
-    var _b = _a.size, size = _b === void 0 ? 'md' : _b;
-    var _c = React.useState({
-        id: 1,
-        label: 'Mohammed Salah',
-    }), selected = _c[0], setSelected = _c[1];
-    var optionData = [
-        {
-            id: 1,
-            label: 'Mohammed Salah',
-        },
-        {
-            id: 2,
-            label: 'Cristiono Ronaldo',
-        },
-        {
-            id: 3,
-            label: 'Vinicius Junior',
-        },
-        {
-            id: 4,
-            label: 'Lionel Messi',
-        },
-        {
-            id: 5,
-            label: 'Ricardo Kaka',
-        },
-    ];
-    return (React.createElement(SelectInput, { label: "Input Select", descText: "Deskripsi Input Select", options: optionData, selected: selected, setSelected: setSelected, size: size, id: "demo-id" }));
+    var _b = _a.size, size = _b === void 0 ? 'md' : _b, options = _a.options;
+    var _c = React.useState('Mohammed Salah'), selected = _c[0], setSelected = _c[1];
+    return (React.createElement(SelectInput, { label: "Select with String Option Item", descText: "Deskripsi Input Select", options: options, selected: selected, setSelected: setSelected, size: size, placeholder: "-- Select Player --", id: "demo-id" }));
 }
 
-var sizeConfig$3 = {
+var sizeConfig$4 = {
     md: {
         iconClass: 'right-[10px]',
         iconSize: '18',
@@ -1800,7 +1858,7 @@ var sizeConfig$3 = {
 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;
     var _e = React.useState(false), isOpen = _e[0], setIsOpen = _e[1];
-    var _f = sizeConfig$3[size], iconClass = _f.iconClass, iconSize = _f.iconSize, inputClass = _f.inputClass;
+    var _f = sizeConfig$4[size], iconClass = _f.iconClass, iconSize = _f.iconSize, inputClass = _f.inputClass;
     var inputRef = React.useRef(null);
     var handleOutsideClick = function (e) {
         if (inputRef.current && !inputRef.current.contains(e.target)) {
@@ -1846,7 +1904,7 @@ LiveSearch.defaultProps = {
     value: {},
 };
 
-var sizeConfig$2 = {
+var sizeConfig$3 = {
     md: {
         containerSize: 'w-[42px] h-[22px]',
         checkSize: 'p-2',
@@ -1861,7 +1919,7 @@ var sizeConfig$2 = {
 
 function Toggle(_a) {
     var _b = _a.label, label = _b === void 0 ? '' : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d, _e = _a.checked, checked = _e === void 0 ? false : _e, _f = _a.id, id = _f === void 0 ? '' : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g;
-    var _h = sizeConfig$2[size], containerSize = _h.containerSize, checkSize = _h.checkSize, labelClass = _h.labelClass;
+    var _h = sizeConfig$3[size], containerSize = _h.containerSize, checkSize = _h.checkSize, labelClass = _h.labelClass;
     return (React.createElement("div", { className: "flex items-center" },
         React.createElement("div", { className: "".concat(containerSize, " rounded-full py-[2px] flex flex-shrink-0 ").concat(checked ? 'justify-end' : 'justify-start', " items-center relative cursor-pointer"), onClick: onClick, onKeyDown: function () { }, role: "checkbox", tabIndex: 0, "aria-checked": checked },
             React.createElement("input", { id: id, checked: checked, disabled: disabled, className: "".concat(checkSize, " peer checkbox appearance-none opacity-100 focus:ring-1 focus:ring-offset-2 focus:ring-bia-blue focus:outline-none rounded-full border-bia-grey checked:border-bia-blue bg-primary-white checked:bg-bia-blue checked:hover:bg-bia-blue-hover cursor-pointer hover:border-bia-blue-hover peer-hover:border-bia-blue-hover disabled:bg-bia-grey-light-80 disabled:checked:bg-bia-blue-light-50 disabled:border-none border-2 absolute w-full h-full"), type: "checkbox" }),
@@ -1887,7 +1945,7 @@ var roundedConfig = {
     sm: 'first:rounded-l-radius-sm last:rounded-r-radius-lg',
     tn: 'first:rounded-l-radius-tn last:rounded-r-radius-tn',
 };
-var sizeConfig$1 = {
+var sizeConfig$2 = {
     lg: 'text-size-md leading-[23.94px] px-[13px] py-[10.5px]',
     md: 'text-size-base leading-[21px] px-[11px] py-[9px]',
     sm: 'text-size-sm leading-[15.96px] px-[7px] py-[5px]',
@@ -1897,7 +1955,7 @@ var sizeConfig$1 = {
 function SegmentButtonItem(_a) {
     var _b = _a.selected, selected = _b === void 0 ? false : _b, size = _a.size, children = _a.children, disabled = _a.disabled, onClick = _a.onClick;
     var isSelected = selected ? 'selected' : 'notSelected';
-    return (React.createElement("button", { type: "button", onClick: onClick, disabled: disabled, className: "focus-visible:z-50 focus-visible:outline focus-visible:-outline-offset-1 focus-visible:outline-[3px] focus-visible:outline-bia-blue-light-50 border-[1px] border-l-0 first:border-l-[1px] border-bia-grey-dark-10 group:last:border-l-0 disabled:bg-bia-grey-light-80 disabled:text-bia-grey-dark-10 disabled:cursor-not-allowed ".concat(isSelectedConfig[isSelected], " ").concat(roundedConfig[size], " ").concat(sizeConfig$1[size]) }, children));
+    return (React.createElement("button", { type: "button", onClick: onClick, disabled: disabled, className: "focus-visible:z-50 focus-visible:outline focus-visible:-outline-offset-1 focus-visible:outline-[3px] focus-visible:outline-bia-blue-light-50 border-[1px] border-l-0 first:border-l-[1px] border-bia-grey-dark-10 group:last:border-l-0 disabled:bg-bia-grey-light-80 disabled:text-bia-grey-dark-10 disabled:cursor-not-allowed ".concat(isSelectedConfig[isSelected], " ").concat(roundedConfig[size], " ").concat(sizeConfig$2[size]) }, children));
 }
 
 function SegmentButtonGroup(_a) {
@@ -1940,13 +1998,13 @@ function SegmentButtonSimulation(_a) {
         return (React.createElement(SegmentButtonItem, { selected: activeButton === index, size: size, disabled: disabled, onClick: function () { return handleClick(index); } },
             React.createElement("div", { className: "flex items-center justify-center" },
                 React.createElement("div", { className: "mt-[1px] mr-[5px]" },
-                    React.createElement(TbCheck$1, null)),
+                    React.createElement(TbCheck, null)),
                 content)));
     })));
 }
 
 function Modal(_a) {
-    var size = _a.size, title = _a.title, open = _a.open, onClose = _a.onClose, rest = __rest(_a, ["size", "title", "open", "onClose"]);
+    var size = _a.size, title = _a.title, open = _a.open, zIndex = _a.zIndex, onClose = _a.onClose, rest = __rest(_a, ["size", "title", "open", "zIndex", "onClose"]);
     var modalSize;
     if (size === 'sm') {
         modalSize = 'w-[300px]';
@@ -1968,12 +2026,12 @@ function Modal(_a) {
     if (open) {
         return (
         // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
-        React.createElement("div", { className: "fixed inset-0 flex justify-center items-center bg-bia-black-transparent-75", id: "wrapper", onClick: handleClose },
-            React.createElement("div", { className: "modal flex flex-col gap-[20px] bg-white rounded-[5px] p-[20px] ".concat(modalSize) },
+        React.createElement("div", { className: "fixed inset-0 flex items-center justify-center bg-bia-black-transparent-75", style: { zIndex: !zIndex && isNaN(zIndex) ? 'auto' : zIndex }, id: "wrapper", onClick: handleClose },
+            React.createElement("div", { className: "modal flex flex-col gap-[20px] rounded-[5px] bg-white p-[20px] ".concat(modalSize) },
                 React.createElement("div", { className: "flex justify-between" },
-                    React.createElement("div", { className: " font-humnst777 font-bold text-[18px] leading-[21.85px] text-primary-black w-[260px] text-wrap" }, title),
-                    React.createElement("button", { type: "button", title: "button", className: "w-[22px] h-[22px] rounded-radius-full flex items-center justify-center bg-bia-grey-light-50 hover:bg-bia-grey-light-30 cursor-pointer", onClick: function () { return onClose(); } },
-                        React.createElement(TbX, { className: "text-bia-coolgrey text-[14px]" }))),
+                    React.createElement("div", { className: " w-[260px] text-wrap font-humnst777 text-[18px] font-bold leading-[21.85px] text-primary-black" }, title),
+                    React.createElement("button", { type: "button", title: "button", className: "flex h-[22px] w-[22px] cursor-pointer items-center justify-center rounded-radius-full bg-bia-grey-light-50 hover:bg-bia-grey-light-30", onClick: function () { return onClose(); } },
+                        React.createElement(TbX, { className: "text-[14px] text-bia-coolgrey" }))),
                 React.createElement("div", { className: "flex flex-col gap-[20px]" }, rest.children))));
     }
     return null;
@@ -1982,7 +2040,7 @@ Modal.defaultProps = {
     title: null,
 };
 
-var sizeConfig = {
+var sizeConfig$1 = {
     md: 'w-[38px] h-[40px] text-[14px] font-semibold',
     sm: 'w-[29px] h-[30px] mt-1 text-[12px] font-normal',
 };
@@ -2032,7 +2090,7 @@ function PaginationBar(_a) {
     };
     return (React.createElement("div", { className: "flex w-screen max-w-4xl ".concat(positionConfig[position], " gap-[5px]") },
         React.createElement(Button, { variant: "subtle-link", size: "md", type: "button", onClick: function () { return handlePageChange(currentPage - 1); }, className: "cursor-pointer", iconLeft: leftArrow }),
-        showedPages.map(function (page) { return (React.createElement(Button, { key: page, variant: currentPage === page ? 'default' : 'subtle-link', size: "md", type: "button", onClick: function () { return handlePageChange(page); }, className: "cursor-pointer  ".concat(sizeConfig[size]), label: page.toString() })); }),
+        showedPages.map(function (page) { return (React.createElement(Button, { key: page, variant: currentPage === page ? 'default' : 'subtle-link', size: "md", type: "button", onClick: function () { return handlePageChange(page); }, className: "cursor-pointer  ".concat(sizeConfig$1[size]), label: page.toString() })); }),
         React.createElement(Button, { variant: "subtle-link", size: "md", type: "button", onClick: function () { return handlePageChange(currentPage + 1); }, className: "cursor-pointer", iconLeft: rightArrow })));
 }
 
@@ -2122,7 +2180,7 @@ Popover.defaultProps = {
 var config = {
     success: {
         container: 'border-bia-green',
-        content: React.createElement(TbCheck$1, { className: "text-[38px] text-bia-green" }),
+        content: React.createElement(TbCheck, { className: "text-[38px] text-bia-green" }),
     },
     failed: {
         container: 'border-bia-red',
@@ -2318,6 +2376,60 @@ Tab.defaultProps = {
     card: false,
 };
 
+var radiusConfig = {
+    none: '',
+    all: 'rounded-radius-sm',
+    top: 'rounded-t-radius-sm',
+    right: 'rounded-tr-radius-sm',
+    left: 'rounded-tl-radius-sm',
+};
+var variantConfig = {
+    default: 'py-[7px] ps-[15px] pe-[10px] gap-[10px]',
+    alternative: 'pt-[4px] pb-[4.8px] px-[20px] relative',
+};
+var defaultConfigs = {
+    true: 'cursor-default bg-bia-grey-light-80 hover:bg-bia-coolgrey-light-90 text-primary-black ',
+    false: 'cursor-pointer bg-bia-grey hover:bg-bia-grey-light-50 text-bia-coolgrey-dark-10',
+};
+var defaultButtonConfigs = {
+    true: 'text-primary-black',
+    false: 'text-primary-black',
+};
+var alternativeConfigs = {
+    true: 'cursor-default bg-primary-white text-primary-black overflow-hidden',
+    false: 'cursor-pointer bg-bia-verdantgreen-dark-40 hover:bg-bia-verdantgreen-dark-50 text-primary-white overflow-hidden',
+};
+var alternativeButtonConfigs = {
+    true: 'absolute px-[5px] opacity-0 hover:opacity-100 grid-cols-2 gap-[2px] bg-gradient-to-l from-primary-white from-50% to-primary-white/[.0] inset-y-0 right-0',
+    false: ' absolute px-[5px] opacity-0 hover:opacity-100 grid-cols-2 gap-[2px] bg-gradient-to-l from-bia-verdantgreen-dark-50 from-50% to-bia-verdantgreen-dark-50/[.0] inset-y-0 right-0',
+};
+
+var TabMenu = function (_a) {
+    var variant = _a.variant, _b = _a.text, text = _b === void 0 ? '' : _b, _c = _a.rounded, rounded = _c === void 0 ? 'none' : _c, _d = _a.isActive, isActive = _d === void 0 ? false : _d, _e = _a.onClose, onClose = _e === void 0 ? function () { } : _e, rest = __rest(_a, ["variant", "text", "rounded", "isActive", "onClose"]);
+    // valiated parameter
+    var validatedVariant = validUnion(variant, [
+        'default',
+        'alternative',
+    ]);
+    var validatedRadius = validUnion(rounded, ['none', 'all', 'top', 'right', 'left']);
+    var usedBaseConfig;
+    var usedButtonConfig;
+    if (validatedVariant === 'alternative') {
+        usedBaseConfig = alternativeConfigs[isActive];
+        usedButtonConfig = alternativeButtonConfigs[isActive];
+    }
+    else {
+        usedBaseConfig = defaultConfigs[isActive];
+        usedButtonConfig = defaultButtonConfigs[isActive];
+    }
+    return (React.createElement("div", __assign({ className: "tab-menu flex flex-row text-size-tiny font-normal ".concat(radiusConfig[validatedRadius], " ").concat(variantConfig[validatedVariant], " ").concat(usedBaseConfig, " ") }, rest),
+        text,
+        React.createElement("div", { className: "grid ".concat(usedButtonConfig, " ") },
+            validatedVariant === 'alternative' && React.createElement("div", { className: "order-first" }),
+            React.createElement("button", { className: "order-last", onClick: onClose },
+                React.createElement(TbX, { size: 14 })))));
+};
+
 var colAlign = {
     middle: 'justify-center',
     right: 'justify-end',
@@ -2410,845 +2522,180 @@ TableDemo.defaultProps = {
     tableSize: 'md',
 };
 
-function TbCheck() {
-    return (React.createElement("svg", { width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-        React.createElement("path", { d: "M4.73836 7.94166C4.62898 7.94188 4.52062 7.9205 4.41952 7.87874C4.31841 7.83699 4.22655 7.77567 4.1492 7.69833L0.614197 4.16249C0.534553 4.08568 0.471004 3.99377 0.42726 3.89213C0.383515 3.79049 0.360451 3.68116 0.359412 3.57051C0.358373 3.45986 0.37938 3.35012 0.421209 3.24767C0.463037 3.14523 0.524848 3.05214 0.603036 2.97385C0.681224 2.89555 0.774223 2.8336 0.876605 2.79163C0.978988 2.74966 1.08871 2.7285 1.19935 2.72938C1.31 2.73026 1.41937 2.75317 1.52107 2.79677C1.62277 2.84037 1.71477 2.90379 1.7917 2.98333L4.73753 5.92916L10.0417 0.62666C10.198 0.470293 10.4099 0.382402 10.631 0.382324C10.852 0.382246 11.0641 0.469986 11.2204 0.626243C11.3768 0.7825 11.4647 0.994473 11.4648 1.21553C11.4649 1.43659 11.3771 1.64863 11.2209 1.80499L5.32753 7.69833C5.25018 7.77567 5.15832 7.83699 5.05721 7.87874C4.95611 7.9205 4.84775 7.94188 4.73836 7.94166Z", fill: "white" })));
-}
-
-function TbCheckBlack() {
-    return (React.createElement("svg", { width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-        React.createElement("path", { d: "M4.73836 7.94166C4.62898 7.94188 4.52062 7.9205 4.41952 7.87874C4.31841 7.83699 4.22655 7.77567 4.1492 7.69833L0.614197 4.16249C0.534553 4.08568 0.471004 3.99377 0.42726 3.89213C0.383515 3.79049 0.360451 3.68116 0.359412 3.57051C0.358373 3.45986 0.37938 3.35012 0.421209 3.24767C0.463037 3.14523 0.524848 3.05214 0.603036 2.97385C0.681224 2.89555 0.774223 2.8336 0.876605 2.79163C0.978988 2.74966 1.08871 2.7285 1.19935 2.72938C1.31 2.73026 1.41937 2.75317 1.52107 2.79677C1.62277 2.84037 1.71477 2.90379 1.7917 2.98333L4.73753 5.92916L10.0417 0.62666C10.198 0.470293 10.4099 0.382402 10.631 0.382324C10.852 0.382246 11.0641 0.469986 11.2204 0.626243C11.3768 0.7825 11.4647 0.994473 11.4648 1.21553C11.4649 1.43659 11.3771 1.64863 11.2209 1.80499L5.32753 7.69833C5.25018 7.77567 5.15832 7.83699 5.05721 7.87874C4.95611 7.9205 4.84775 7.94188 4.73836 7.94166Z", fill: "#2F2F2F" })));
-}
-
-function TbCheckBlackSmall() {
-    return (React.createElement("svg", { width: "8", height: "6", viewBox: "0 0 8 6", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-        React.createElement("path", { d: "M3.11607 5.75906C3.0395 5.75922 2.96365 5.74425 2.89288 5.71502C2.82211 5.68579 2.7578 5.64287 2.70366 5.58873L0.229157 3.11365C0.173406 3.05988 0.128922 2.99554 0.0983007 2.92439C0.0676795 2.85325 0.0515342 2.77671 0.050807 2.69926C0.0500797 2.62181 0.064785 2.54498 0.0940648 2.47327C0.123345 2.40156 0.166613 2.3364 0.221344 2.28159C0.276076 2.22679 0.341175 2.18343 0.412843 2.15404C0.484511 2.12466 0.561312 2.10985 0.638767 2.11047C0.716221 2.11108 0.792777 2.12712 0.863967 2.15764C0.935157 2.18816 0.999557 2.23256 1.05341 2.28823L3.11549 4.35031L6.82841 0.638564C6.93779 0.529107 7.08617 0.467584 7.24091 0.467529C7.39565 0.467475 7.54408 0.528893 7.65353 0.638272C7.76299 0.747652 7.82451 0.896034 7.82457 1.05077C7.82462 1.20552 7.7632 1.35394 7.65382 1.4634L3.52849 5.58873C3.47434 5.64287 3.41004 5.68579 3.33927 5.71502C3.26849 5.74425 3.19265 5.75922 3.11607 5.75906Z", fill: "#2F2F2F" })));
-}
-
-function TbCloseAbleBlack(_a) {
-    var color = _a.color;
-    return (React.createElement("svg", { width: "18.1", height: "18.1", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-        React.createElement("rect", { width: "18", height: "18", rx: "9", fill: "#DADEEB" }),
-        React.createElement("rect", { width: "18", height: "18", rx: "9", fill: "black", fillOpacity: "0.3" }),
-        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.9118 5.91256C13.1396 5.68475 13.1396 5.31541 12.9118 5.0876C12.684 4.8598 12.3147 4.8598 12.0869 5.0876L8.99935 8.17512L5.91183 5.0876C5.68402 4.8598 5.31468 4.8598 5.08687 5.0876C4.85906 5.31541 4.85906 5.68475 5.08687 5.91256L8.17439 9.00008L5.08687 12.0876C4.85906 12.3154 4.85906 12.6848 5.08687 12.9126C5.31468 13.1404 5.68402 13.1404 5.91183 12.9126L8.99935 9.82504L12.0869 12.9126C12.3147 13.1404 12.684 13.1404 12.9118 12.9126C13.1396 12.6848 13.1396 12.3154 12.9118 12.0876L9.82431 9.00008L12.9118 5.91256Z", fill: color })));
-}
-
-function TbCheckWhiteSmall() {
-    return (React.createElement("svg", { width: "8", height: "6", viewBox: "0 0 8 6", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-        React.createElement("path", { d: "M3.11607 5.75906C3.0395 5.75922 2.96365 5.74425 2.89288 5.71502C2.82211 5.68579 2.7578 5.64287 2.70366 5.58873L0.229157 3.11365C0.173406 3.05988 0.128922 2.99554 0.0983007 2.92439C0.0676795 2.85325 0.0515342 2.77671 0.050807 2.69926C0.0500797 2.62181 0.064785 2.54498 0.0940648 2.47327C0.123345 2.40156 0.166613 2.3364 0.221344 2.28159C0.276076 2.22679 0.341175 2.18343 0.412843 2.15404C0.484511 2.12466 0.561312 2.10985 0.638767 2.11047C0.716221 2.11108 0.792777 2.12712 0.863967 2.15764C0.935157 2.18816 0.999557 2.23256 1.05341 2.28823L3.11549 4.35031L6.82841 0.638564C6.93779 0.529107 7.08617 0.467584 7.24091 0.467529C7.39565 0.467475 7.54408 0.528893 7.65353 0.638272C7.76299 0.747652 7.82451 0.896034 7.82457 1.05077C7.82462 1.20552 7.7632 1.35394 7.65382 1.4634L3.52849 5.58873C3.47434 5.64287 3.41004 5.68579 3.33927 5.71502C3.26849 5.74425 3.19265 5.75922 3.11607 5.75906Z", fill: "white" })));
-}
-
-function TbCloseAbleBlackSmall() {
-    return (React.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-        React.createElement("rect", { width: "12", height: "12", rx: "6", fill: "#DADEEB" }),
-        React.createElement("rect", { width: "12", height: "12", rx: "6", fill: "black", fillOpacity: "0.3" }),
-        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.60984 3.94171C8.76171 3.78984 8.76171 3.54361 8.60984 3.39173C8.45797 3.23986 8.21174 3.23986 8.05987 3.39173L6.00152 5.45008L3.94317 3.39173C3.7913 3.23986 3.54507 3.23986 3.3932 3.39173C3.24133 3.54361 3.24133 3.78984 3.3932 3.94171L5.45155 6.00005L3.3932 8.0584C3.24133 8.21027 3.24133 8.4565 3.3932 8.60837C3.54507 8.76024 3.7913 8.76024 3.94317 8.60837L6.00152 6.55003L8.05987 8.60837C8.21174 8.76024 8.45797 8.76024 8.60984 8.60837C8.76171 8.4565 8.76171 8.21027 8.60984 8.0584L6.55149 6.00005L8.60984 3.94171Z", fill: "white" })));
-}
-
-function TbCloseAbleWhiteSmall(_a) {
-    var color = _a.color;
-    return (React.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-        React.createElement("rect", { width: "12", height: "12", rx: "6", fill: "white", fillOpacity: "0.5" }),
-        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.60984 3.94171C8.76171 3.78984 8.76171 3.54361 8.60984 3.39174C8.45797 3.23986 8.21174 3.23986 8.05987 3.39174L6.00152 5.45008L3.94317 3.39174C3.7913 3.23986 3.54507 3.23986 3.3932 3.39174C3.24133 3.54361 3.24133 3.78984 3.3932 3.94171L5.45155 6.00005L3.3932 8.0584C3.24133 8.21027 3.24133 8.4565 3.3932 8.60837C3.54507 8.76024 3.7913 8.76024 3.94317 8.60837L6.00152 6.55003L8.05987 8.60837C8.21174 8.76024 8.45797 8.76024 8.60984 8.60837C8.76171 8.4565 8.76171 8.21027 8.60984 8.0584L6.55149 6.00005L8.60984 3.94171Z", fill: color })));
-}
-
-function TbCloseAbleGraySmall() {
-    return (React.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-        React.createElement("rect", { width: "12", height: "12", rx: "6", fill: "#DADEEB" }),
-        React.createElement("rect", { width: "12", height: "12", rx: "6", fill: "black", fillOpacity: "0.3" }),
-        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.60984 3.94171C8.76171 3.78984 8.76171 3.54361 8.60984 3.39173C8.45797 3.23986 8.21174 3.23986 8.05987 3.39173L6.00152 5.45008L3.94317 3.39173C3.7913 3.23986 3.54507 3.23986 3.3932 3.39173C3.24133 3.54361 3.24133 3.78984 3.3932 3.94171L5.45155 6.00005L3.3932 8.0584C3.24133 8.21027 3.24133 8.4565 3.3932 8.60837C3.54507 8.76024 3.7913 8.76024 3.94317 8.60837L6.00152 6.55003L8.05987 8.60837C8.21174 8.76024 8.45797 8.76024 8.60984 8.60837C8.76171 8.4565 8.76171 8.21027 8.60984 8.0584L6.55149 6.00005L8.60984 3.94171Z", fill: "white" })));
-}
-
-function TbCloseable(_a) {
-    var color = _a.color;
-    return (React.createElement("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-        React.createElement("rect", { width: "18", height: "18", rx: "9", fill: "white", fillOpacity: "0.5" }),
-        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.9118 5.91256C13.1396 5.68475 13.1396 5.31541 12.9118 5.0876C12.684 4.8598 12.3147 4.8598 12.0869 5.0876L8.99935 8.17512L5.91183 5.0876C5.68402 4.8598 5.31468 4.8598 5.08687 5.0876C4.85906 5.31541 4.85906 5.68475 5.08687 5.91256L8.17439 9.00008L5.08687 12.0876C4.85906 12.3154 4.85906 12.6848 5.08687 12.9126C5.31468 13.1404 5.68402 13.1404 5.91183 12.9126L8.99935 9.82504L12.0869 12.9126C12.3147 13.1404 12.684 13.1404 12.9118 12.9126C13.1396 12.6848 13.1396 12.3154 12.9118 12.0876L9.82431 9.00008L12.9118 5.91256Z", fill: color })));
-}
-
-var TagLabelConfig = {
-    default: {
-        md: {
-            iconColor: 'text-white',
-            XColor: 'text-bia-coolgrey',
-            XcolorV: 'text-primary-black',
-            label: {
-                bg: 'bg-bia-grey-light-50',
-                text: 'text-[#2F2F2F] font-normal text-[14px] leading-[18px]',
-                padding: 'px-[10px] py-[7px] ',
-                radius: 'rounded-[50px]',
-                Xicon: '',
-            },
-            closeable: {
-                bg: 'bg-bia-grey-light-50',
-                text: 'text-[#2F2F2F] font-normal text-[14px] leading-[18px]',
-                padding: 'px-[10px] py-[7px] ',
-                radius: 'rounded-[50px]',
-                Xicon: TbCloseAbleBlack,
-            },
-            icon: {
-                bg: 'bg-bia-grey-light-50',
-                text: 'text-[#2F2F2F] text-[18.67px]',
-                padding: 'p-[7px] ',
-                radius: 'rounded-[50px]',
-                Xicon: TbCheckBlack,
-            },
-        },
-        sm: {
-            iconColor: 'text-white',
-            XColor: 'text-bia-coolgrey',
-            XcolorV: 'text-primary-black',
-            label: {
-                bg: "bg-bia-grey-light-50",
-                text: "text-[#2F2F2F] font-normal text-[12px] leading-[15.96px]",
-                padding: "px-[10px] py-[5px] ",
-                radius: "rounded-[12px]",
-                Xicon: '',
-            },
-            closeable: {
-                bg: "bg-bia-grey-light-50",
-                text: "text-[#2F2F2F] font-normal text-[12px] leading-[15.96px]",
-                padding: "px-[10px] py-[2px]",
-                radius: "rounded-[12px]",
-                Xicon: TbCloseAbleBlackSmall,
-            },
-            icon: {
-                bg: "bg-bia-grey-light-50",
-                text: "text-[#2F2F2F] text-[13.06px]",
-                padding: "p-[4px]",
-                radius: "rounded-[12px]",
-                Xicon: TbCheckBlackSmall,
-            },
-        },
-        tn: {
-            iconColor: 'text-white',
-            XColor: 'text-bia-coolgrey',
-            XcolorV: 'text-primary-black',
-            label: {
-                bg: "bg-bia-grey-light-50",
-                text: "text-[#2F2F2F] font-normal text-[12px] leading-[13px]",
-                padding: "px-[8px] py-[2px]",
-                radius: "rounded-[12px]",
-                Xicon: '',
-            },
-            closeable: {
-                bg: "bg-bia-grey-light-50",
-                text: "text-[#2F2F2F] font-normal text-[12px] leading-[13px]",
-                padding: "px-[8px] py-[2px]",
-                radius: "rounded-[12px]",
-                Xicon: TbCloseAbleBlackSmall,
-            },
-            icon: {
-                bg: "bg-bia-grey-light-50",
-                text: "text-[#2F2F2F] text-[11.2px]",
-                padding: "p-[3px]",
-                radius: "rounded-[12px]",
-                Xicon: TbCheckBlackSmall,
-            },
-        },
-    },
-    blue: {
-        md: {
-            iconColor: 'text-bia-blue',
-            XColor: 'text-bia-blue-light-50',
-            XcolorV: 'text-white',
-            label: {
-                bg: "bg-bia-blue",
-                text: "text-[#FFFFFF] font-normal text-[14px] leading-[18px]",
-                padding: "px-[10px] py-[7px]  ",
-                radius: "rounded-[50px]",
-                Xicon: '',
-            },
-            closeable: {
-                bg: "bg-bia-blue",
-                text: "text-[#FFFFFF] font-normal text-[14px] leading-[18px]",
-                padding: "px-[10px] py-[7px]  ",
-                radius: "rounded-[50px]",
-                Xicon: TbCloseable,
-            },
-            icon: {
-                bg: "bg-bia-blue",
-                text: "text-[#FFFFFF] text-[18.67px]",
-                padding: "p-[7px] ",
-                radius: "rounded-[50px]",
-                Xicon: TbCheck,
-            },
-        },
-        sm: {
-            iconColor: 'text-bia-blue',
-            XColor: 'text-white',
-            XcolorV: 'text-white',
-            label: {
-                bg: "bg-bia-blue",
-                text: "text-[#FFF] font-normal text-[12px] leading-[15.96px]",
-                padding: "px-[10px] py-[2px]",
-                radius: "rounded-[12px]",
-                Xicon: '',
-            },
-            closeable: {
-                bg: "bg-bia-blue",
-                text: "text-[#FFF] font-normal text-[12px] leading-[15.96px]",
-                padding: "px-[10px] py-[2px] ",
-                radius: "rounded-[12px]",
-                Xicon: TbCloseAbleWhiteSmall,
-            },
-            icon: {
-                bg: "bg-bia-blue",
-                text: "text-[#FFF] text-[13.06px]",
-                padding: "p-[4px] ",
-                radius: "rounded-[12px]",
-                Xicon: TbCheckWhiteSmall,
-            },
-        },
-        tn: {
-            iconColor: 'text-bia-blue',
-            XColor: 'text-white',
-            XcolorV: 'text-white',
-            label: {
-                bg: "bg-bia-blue",
-                text: "text-[#FFF] font-normal text-[12px] leading-[13px]",
-                padding: "px-[8px] py-[2px]",
-                radius: "rounded-[12px]",
-                Xicon: '',
-            },
-            closeable: {
-                bg: "bg-bia-blue",
-                text: "text-[#FFF] font-normal text-[12px] leading-[13px]",
-                padding: "px-[8px] py-[2px]",
-                radius: "rounded-[12px]",
-                Xicon: TbCloseAbleWhiteSmall,
-            },
-            icon: {
-                bg: "bg-bia-blue",
-                text: "text-[#FFF] text-[13.06px]",
-                padding: "p-[3px]",
-                radius: "rounded-[12px]",
-                Xicon: TbCheckWhiteSmall,
-            },
-        },
-    },
-    teal: {
-        md: {
-            iconColor: 'text-bia-teal',
-            XColor: 'text-bia-teal-light-50',
-            XcolorV: 'text-white',
-            label: {
-                bg: "bg-bia-teal",
-                text: "text-[#FFF] font-normal text-[14px] leading-[18px]",
-                padding: "px-[10px] py-[7px] ",
-                radius: "rounded-[50px]",
-                Xicon: '',
-            },
-            closeable: {
-                bg: "bg-bia-teal",
-                text: "text-[#FFF] font-normal text-[14px] leading-[18px]",
-                padding: "px-[10px] py-[7px] ",
-                radius: "rounded-[50px]",
-                Xicon: TbCloseable,
-            },
-            icon: {
-                bg: "bg-bia-teal",
-                text: "text-[#FFF] text-[18.67px]",
-                padding: "p-[7px] ",
-                radius: "rounded-[50px]",
-                Xicon: TbCheck,
-            },
-        },
-        sm: {
-            iconColor: 'text-bia-teal',
-            XColor: 'text-white',
-            XcolorV: 'text-white',
-            label: {
-                bg: "bg-bia-teal",
-                text: "text-[#FFF] font-normal text-[12px] leading-[15.96px]",
-                padding: "px-[10px] py-[2px]",
-                radius: "rounded-[12px]",
-                Xicon: '',
-            },
-            closeable: {
-                bg: "bg-bia-teal",
-                text: "text-[#FFF] font-normal text-[12px] leading-[15.96px]",
-                padding: "px-[10px] py-[2px]",
-                radius: "rounded-[12px]",
-                Xicon: TbCloseAbleWhiteSmall,
-            },
-            icon: {
-                bg: "bg-bia-teal",
-                text: "text-[#FFF] text-[13.06px]",
-                padding: "p-[4px]",
-                radius: "rounded-[12px]",
-                Xicon: TbCheckWhiteSmall,
-            },
-        },
-        tn: {
-            iconColor: 'text-bia-teal',
-            XColor: 'text-white',
-            XcolorV: 'text-white',
-            label: {
-                bg: "bg-bia-teal",
-                text: "text-[#FFF] font-normal text-[12px] leading-[13px]",
-                padding: "px-[8px] py-[2px]",
-                radius: "rounded-[12px]",
-                Xicon: '',
-            },
-            closeable: {
-                bg: "bg-bia-teal",
-                text: "text-[#FFF] font-normal text-[12px] leading-[13px]",
-                padding: "px-[8px] py-[2px]",
-                radius: "rounded-[12px]",
-                Xicon: TbCloseAbleWhiteSmall,
-            },
-            icon: {
-                bg: "bg-bia-teal",
-                text: "text-[#FFF] text-[11.2px]",
-                padding: "p-[3px] ",
-                radius: "rounded-[12px]",
-                Xicon: TbCheckWhiteSmall,
-            },
-        },
-    },
-    green: {
-        md: {
-            iconColor: 'text-bia-green',
-            XColor: 'text-bia-green-light-50',
-            XcolorV: 'text-white',
-            label: {
-                bg: "bg-bia-green",
-                text: "text-[#FFF] font-normal text-[14px] leading-[18px]",
-                padding: "px-[10px] py-[7px] ",
-                radius: "rounded-[50px]",
-                Xicon: '',
-            },
-            closeable: {
-                bg: "bg-bia-green",
-                text: "text-[#FFF] font-normal text-[14px] leading-[18px]",
-                padding: "px-[10px] py-[7px] ",
-                radius: "rounded-[50px]",
-                Xicon: TbCloseable,
-            },
-            icon: {
-                bg: "bg-bia-green",
-                text: "text-[#FFF] text-[18.67px]",
-                padding: "p-[7px] ",
-                radius: "rounded-[50px]",
-                Xicon: TbCheck,
-            },
-        },
-        sm: {
-            iconColor: 'text-bia-green',
-            XColor: 'text-white',
-            XcolorV: 'text-white',
-            label: {
-                bg: "bg-bia-green",
-                text: "text-[#FFF] font-normal text-[12px] leading-[15.96px]",
-                padding: "px-[10px] py-[2px]",
-                radius: "rounded-[12px]",
-                Xicon: '',
-            },
-            closeable: {
-                bg: "bg-bia-green",
-                text: "text-[#FFF] font-normal text-[12px] leading-[15.96px]",
-                padding: "px-[10px] py-[2px]",
-                radius: "rounded-[12px]",
-                Xicon: TbCloseAbleWhiteSmall,
-            },
-            icon: {
-                bg: "bg-bia-green",
-                text: "text-[#FFF] text-[13.06px]",
-                padding: "p-[4px] ",
-                radius: "rounded-[12px]",
-                Xicon: TbCheckWhiteSmall,
-            },
-        },
-        tn: {
-            iconColor: 'text-bia-green',
-            XColor: 'text-white',
-            XcolorV: 'text-white',
-            label: {
-                bg: "bg-bia-green",
-                text: "text-[#FFF] font-normal text-[12px] leading-[13px]",
-                padding: "px-[8px] py-[2px] ",
-                radius: "rounded-[12px]",
-                Xicon: '',
-            },
-            closeable: {
-                bg: "bg-bia-green",
-                text: "text-[#FFF] font-normal text-[12px] leading-[13px]",
-                padding: "px-[8px] py-[2px] ",
-                radius: "rounded-[12px]",
-                Xicon: TbCloseAbleWhiteSmall,
-            },
-            icon: {
-                bg: "bg-bia-green",
-                text: "text-[#FFF] text-[11.2px]",
-                padding: "p-[3px] ",
-                radius: "rounded-[12px]",
-                Xicon: TbCheckWhiteSmall,
-            },
-        },
-    },
-    yellow: {
-        md: {
-            iconColor: 'text-bia-orange',
-            XColor: 'text-bia-orange-light-50',
-            XcolorV: 'text-white',
-            label: {
-                bg: "bg-[#FF7B00]",
-                text: "text-[#FFF] font-normal text-[14px] leading-[18px]",
-                padding: "px-[10px] py-[7px]  ",
-                radius: "rounded-[50px]",
-                Xicon: '',
-            },
-            closeable: {
-                bg: "bg-[#FF7B00]",
-                text: "text-[#FFF] font-normal text-[14px] leading-[18px]",
-                padding: "px-[10px] py-[7px] ",
-                radius: "rounded-[50px]",
-                Xicon: TbCloseable,
-            },
-            icon: {
-                bg: "bg-[#FF7B00]",
-                text: "text-[#FFF] text-[18.67px]",
-                padding: "p-[7px] ",
-                radius: "rounded-[50px]",
-                Xicon: TbCheck,
-            },
-        },
-        sm: {
-            iconColor: 'text-bia-orange',
-            XColor: 'text-white',
-            XcolorV: 'text-white',
-            label: {
-                bg: "bg-[#FF7B00]",
-                text: "text-[#FFF] font-normal text-[12px] leading-[15.96px]",
-                padding: "px-[10px] py-[2px]",
-                radius: "rounded-[12px]",
-                Xicon: '',
-            },
-            closeable: {
-                bg: "bg-[#FF7B00]",
-                text: "text-[#FFF] font-normal text-[12px] leading-[15.96px]",
-                padding: "px-[10px] py-[2px]",
-                radius: "rounded-[12px]",
-                Xicon: TbCloseAbleWhiteSmall,
-            },
-            icon: {
-                bg: "bg-[#FF7B00]",
-                text: "text-[#FFF] text-[13.06px]",
-                padding: "p-[4px]",
-                radius: "rounded-[12px]",
-                Xicon: TbCheckWhiteSmall,
-            },
-        },
-        tn: {
-            iconColor: 'text-bia-orange',
-            XColor: 'text-white',
-            XcolorV: 'text-white',
-            label: {
-                bg: "bg-[#FF7B00]",
-                text: "text-[#FFF] font-normal text-[12px] leading-[13px]",
-                padding: "px-[8px] py-[2px]",
-                radius: "rounded-[12px]",
-                Xicon: '',
-            },
-            closeable: {
-                bg: "bg-[#FF7B00]",
-                text: "text-[#FFF] font-normal text-[12px] leading-[13px]",
-                padding: "px-[8px] py-[2px] ",
-                radius: "rounded-[12px]",
-                Xicon: TbCloseAbleWhiteSmall,
-            },
-            icon: {
-                bg: "bg-[#FF7B00]",
-                text: "text-[#FFF] text-[11.2px]",
-                padding: "p-[3px] ",
-                radius: "rounded-[12px]",
-                Xicon: TbCheckWhiteSmall,
-            },
-        },
-    },
-    red: {
-        md: {
-            iconColor: 'text-bia-red',
-            XColor: 'text-bia-red-light-50',
-            XcolorV: 'text-white',
-            label: {
-                bg: "bg-bia-red",
-                text: "text-[#FFF] font-normal text-[14px] leading-[18px]",
-                padding: "px-[10px] py-[7px]  ",
-                radius: "rounded-[50px]",
-                Xicon: '',
-            },
-            closeable: {
-                bg: "bg-bia-red",
-                text: "text-[#FFF] font-normal text-[14px] leading-[18px]",
-                padding: "px-[10px] py-[7px]  ",
-                radius: "rounded-[50px]",
-                Xicon: TbCloseable,
-            },
-            icon: {
-                bg: "bg-bia-red",
-                text: "text-[#FFF] text-[18.67px]",
-                padding: "p-[7px]",
-                radius: "rounded-[50px]",
-                Xicon: TbCheck,
-            },
-        },
-        sm: {
-            iconColor: 'text-bia-red',
-            XColor: 'text-white',
-            XcolorV: 'text-white',
-            label: {
-                bg: "bg-bia-red",
-                text: "text-[#FFF] font-normal text-[12px] leading-[15.96px]",
-                padding: "px-[10px] py-[2px]",
-                radius: "rounded-[12px]",
-                Xicon: '',
-            },
-            closeable: {
-                bg: "bg-bia-red",
-                text: "text-[#FFF] font-normal text-[12px] leading-[15.96px]",
-                padding: "px-[10px] py-[2px] ",
-                radius: "rounded-[12px]",
-                Xicon: TbCloseAbleWhiteSmall,
-            },
-            icon: {
-                bg: "bg-bia-red",
-                text: "text-[#FFF] text-[13.06px]",
-                padding: "p-[4px] ",
-                radius: "rounded-[12px]",
-                Xicon: TbCheckWhiteSmall,
-            },
-        },
-        tn: {
-            iconColor: 'text-bia-red',
-            XColor: 'text-white',
-            XcolorV: 'text-white',
-            label: {
-                bg: "bg-bia-red",
-                text: "text-[#FFF] font-normal text-[12px] leading-[13px]",
-                padding: "px-[8px] py-[2px] ",
-                radius: "rounded-[12px]",
-                Xicon: '',
-            },
-            closeable: {
-                bg: "bg-bia-red",
-                text: "text-[#FFF] font-normal text-[12px] leading-[13px]",
-                padding: "px-[8px] py-[2px] ",
-                radius: "rounded-[12px]",
-                Xicon: TbCloseAbleWhiteSmall,
-            },
-            icon: {
-                bg: "bg-bia-red",
-                text: "text-[#FFF] text-[11.2px]",
-                padding: "p-[3px] ",
-                radius: "rounded-[12px]",
-                Xicon: TbCheckWhiteSmall,
-            },
-        },
-    },
-    black: {
-        md: {
-            iconColor: 'text-[#2f2f2f]',
-            XColor: 'text-bia-coolgrey',
-            XcolorV: 'text-white',
-            label: {
-                bg: "bg-primary-black",
-                text: "text-[#FFF] font-normal text-[14px] leading-[18px]",
-                padding: "px-[10px] py-[7px]  ",
-                radius: "rounded-[50px]",
-                Xicon: '',
-            },
-            closeable: {
-                bg: "bg-primary-black",
-                text: "text-[#FFF] font-normal text-[14px] leading-[18px]",
-                padding: "px-[10px] py-[7px]  ",
-                radius: "rounded-[50px]",
-                Xicon: TbCloseable,
-            },
-            icon: {
-                bg: "bg-primary-black",
-                text: "text-[#FFF] text-[18.67px]",
-                padding: "p-[7px]  ",
-                radius: "rounded-[50px]",
-                Xicon: TbCheck,
-            },
-        },
-        sm: {
-            iconColor: 'text-[#2f2f2f]',
-            XColor: 'text-white',
-            XcolorV: 'text-white',
-            label: {
-                bg: "bg-primary-black",
-                text: "text-[#FFF] font-normal text-[12px] leading-[15.96px]",
-                padding: "px-[10px] py-[2px] ",
-                radius: "rounded-[12px]",
-                Xicon: '',
-            },
-            closeable: {
-                bg: "bg-primary-black",
-                text: "text-[#FFF] font-normal text-[12px] leading-[15.96px]",
-                padding: "px-[10px] py-[2px] ",
-                radius: "rounded-[12px]",
-                Xicon: TbCloseAbleWhiteSmall,
-            },
-            icon: {
-                bg: "bg-primary-black",
-                text: "text-[#FFF] text-[13.06px]",
-                padding: "p-[4px] ",
-                radius: "rounded-[12px]",
-                Xicon: TbCheckWhiteSmall,
-            },
-        },
-        tn: {
-            iconColor: 'text-[#2f2f2f]',
-            XColor: 'text-white',
-            XcolorV: 'text-white',
-            label: {
-                bg: "bg-primary-black",
-                text: "text-[#FFF] font-normal text-[12px] leading-[13px]",
-                padding: "px-[8px] py-[2px] ",
-                radius: "rounded-[12px]",
-                Xicon: '',
-            },
-            closeable: {
-                bg: "bg-primary-black",
-                text: "text-[#FFF] font-normal text-[12px] leading-[13px]",
-                padding: "px-[8px] py-[2px] ",
-                radius: "rounded-[12px]",
-                Xicon: TbCloseAbleWhiteSmall,
-            },
-            icon: {
-                bg: "bg-primary-black",
-                text: "text-[#FFF] text-[11.2px]",
-                padding: "p-[3px] ",
-                radius: "rounded-[12px]",
-                Xicon: TbCheckWhiteSmall,
-            },
-        },
-    },
-    white: {
-        md: {
-            iconColor: 'text-white',
-            XColor: 'text-bia-grey-dark-30 group-focus:outline-2',
-            XcolorV: 'text-primary-black',
-            label: {
-                bg: "bg-primary-white border-[1px] border-bia-grey-dark-10",
-                text: "text-[#2F2F2F] font-normal text-[14px] leading-[18px]",
-                padding: "px-[10px] py-[7px]  ",
-                radius: "rounded-[50px]",
-                Xicon: '',
-            },
-            closeable: {
-                bg: "bg-primary-white border-[1px] border-bia-grey-dark-10",
-                text: "text-[#2F2F2F] font-normal text-[14px] leading-[18px]",
-                padding: "px-[10px] py-[7px]  ",
-                radius: "rounded-[50px]",
-                Xicon: TbCloseAbleBlack,
-            },
-            icon: {
-                bg: "bg-primary-white border-[1px] border-bia-grey-dark-10",
-                text: "text-[#2F2F2F] text-[18.67px]",
-                padding: "p-[7px]",
-                radius: "rounded-[50px]",
-                Xicon: TbCheckBlack,
-            },
-        },
-        sm: {
-            iconColor: 'text-white',
-            XColor: 'text-bia-grey-dark-30 group-focus:outline-2',
-            XcolorV: 'text-primary-black',
-            label: {
-                bg: "bg-primary-white border-[1px] border-bia-grey-dark-10",
-                text: "text-[#2F2F2F] font-normal text-[12px] leading-[15.96px]",
-                padding: "px-[10px] py-[2px] ",
-                radius: "rounded-[12px]",
-                Xicon: '',
-            },
-            closeable: {
-                bg: "bg-primary-white border-[1px] border-bia-grey-dark-10",
-                text: "text-[#2F2F2F] font-normal text-[12px] leading-[15.96px]",
-                padding: "px-[10px] py-[2px] ",
-                radius: "rounded-[12px]",
-                Xicon: TbCloseAbleGraySmall,
-            },
-            icon: {
-                bg: "bg-primary-white border-[1px] border-bia-grey-dark-10",
-                text: "text-[#2F2F2F] text-[6.53px]",
-                padding: "p-[4px] ",
-                radius: "rounded-[12px]",
-                Xicon: TbCheckBlackSmall,
-            },
-        },
-        tn: {
-            iconColor: 'text-white',
-            XColor: 'text-bia-grey-dark-30 group-focus:outline-2',
-            XcolorV: 'text-primary-black',
-            label: {
-                bg: "bg-primary-white border-[1px] border-bia-grey-dark-10",
-                text: "text-[#2F2F2F] font-normal text-[12px] leading-[13px]",
-                padding: "px-[8px] py-[2px] ",
-                radius: "rounded-[12px]",
-                Xicon: '',
-            },
-            closeable: {
-                bg: "bg-primary-white border-[1px] border-bia-grey-dark-10",
-                text: "text-[#2F2F2F] font-normal text-[12px] leading-[13px]",
-                padding: "px-[8px] py-[2px] ",
-                radius: "rounded-[12px]",
-                Xicon: TbCloseAbleGraySmall,
-            },
-            icon: {
-                bg: "bg-primary-white border-[1px] border-bia-grey-dark-10",
-                text: "text-[#2F2F2F] text-[11.2px]",
-                padding: "p-[3px] ",
-                radius: "rounded-[12px]",
-                Xicon: TbCheckBlackSmall,
-            },
-        },
-    },
+var colorConfig = {
+    default: 'bg-bia-grey-light-50 text-primary-black',
+    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',
+    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',
 };
-
-function CloseIcon(_a) {
-    var _b = _a.size, size = _b === void 0 ? 'md' : _b;
-    var iconSize;
-    if (size === 'tn') {
-        iconSize = '10';
-    }
-    else if (size === 'sm') {
-        iconSize = '10';
-    }
-    else {
-        iconSize = '14';
-    }
-    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: iconSize, height: iconSize, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "icon icon-tabler icons-tabler-outline icon-tabler-x" },
-        React.createElement("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
-        React.createElement("path", { d: "M18 6l-12 12" }),
-        React.createElement("path", { d: "M6 6l12 12" })));
-}
-CloseIcon.defaultProps = {
-    size: 'md',
+var sizeConfig = {
+    md: 'px-[10px] py-[7px] h-[34px] text-size-base',
+    sm: 'px-[10px] py-[4px] h-[22px] text-size-sm',
+    tn: 'px-[8px] py-[2px] h-[18px] text-size-sm',
 };
-
-function TagLabel(_a) {
-    var children = _a.children, _b = _a.closeHandler, closeHandler = _b === void 0 ? undefined : _b, _c = _a.size, size = _c === void 0 ? 'sm' : _c, _d = _a.variant, variant = _d === void 0 ? 'label' : _d, open = _a.open, color = _a.color, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon;
-    var config = TagLabelConfig[color][size][variant];
-    var configIcon = TagLabelConfig[color][size];
-    var configbg = config.bg;
-    var configtext = config.text;
-    var configpadding = config.padding;
-    var configradius = config.radius;
-    var configX = config.Xicon;
-    var configXcolor = configIcon.XColor;
-    var configXcolorV = configIcon.XcolorV;
-    var iconColor = configIcon.iconColor;
-    var IconContainer = {
-        sm: 'h-[14px] w-[14px]',
-        tn: 'h-[14px] w-[14px]',
-        md: 'h-[20px] w-[20px]',
-    };
-    var renderIcon = function (icon) {
-        if (typeof icon === 'string') {
-            return React.createElement("span", null, icon);
-        }
-        var IconComponent = icon;
-        var textSize;
-        if (size === 'md') {
-            textSize = 'text-[20px]';
-        }
-        else if (size === 'sm' || size === 'tn') {
-            textSize = 'text-[14px]';
-        }
-        else {
-            textSize = 'text-[14px]';
-        }
-        var fillColor;
-        if (color === 'blue') {
-            fillColor = '#5d5dea';
-        }
-        else if (color === 'green') {
-            fillColor = '#21ba4c';
-        }
-        else if (color === 'teal') {
-            fillColor = '#00b5ad';
-        }
-        else if (color === 'yellow') {
-            fillColor = '#ff7b00';
-        }
-        else if (color === 'red') {
-            fillColor = '#db2828';
-        }
-        else if (color === 'black') {
-            fillColor = '#2f2f2f';
-        }
-        else {
-            fillColor = '#ffffff';
+var iconOnlySizeConfig = {
+    md: 'p-[7px]',
+    sm: 'p-[4px]',
+    tn: 'p-[2px]',
+};
+var closeColorConfig = {
+    default: 'bg-bia-grey-dark-30 text-primary-white',
+    blue: 'bg-bia-white-transparent-50 text-bia-blue',
+    teal: 'bg-bia-white-transparent-50 text-bia-teal',
+    green: 'bg-bia-white-transparent-50 text-bia-green',
+    yellow: 'bg-bia-white-transparent-50 text-bia-yellow',
+    red: 'bg-bia-white-transparent-50 text-bia-red',
+    black: 'bg-bia-white-transparent-50 text-primary-black',
+    white: 'bg-bia-grey-dark-30 text-primary-white',
+};
+var closeSizeConfig = {
+    md: 'w-[18px] h-[18px] text-[14px]',
+    sm: 'w-[12px] h-[12px] text-[9.33px]',
+    tn: 'w-[12px] h-[12px] text-[9.33px]',
+};
+var rightPaddingConfig = {
+    md: 'pr-[8px]',
+    sm: 'pr-[5px]',
+    tn: 'pr-[3px]',
+};
+
+var colorUnion = [
+    'default',
+    'blue',
+    'teal',
+    'green',
+    'yellow',
+    'red',
+    'black',
+    'white',
+    'custom',
+];
+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 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];
+    React.useEffect(function () {
+        if (variant === 'icon') {
+            // Get the size of the icon
+            // and set the size of the container
+            // to the one with the biggest size (width or height icon)
+            // in order to make the container square
+            var rect = containerRef.current.getBoundingClientRect();
+            var width = rect.width;
+            var height = rect.height;
+            if (width > height)
+                setSizeCount(width);
+            else
+                setSizeCount(height);
         }
-        return (React.createElement(IconComponent, { className: "".concat(textSize, " ").concat(variant === 'icon' ? configXcolor : configXcolorV), color: fillColor }));
-    };
-    // const containerClass = `${container} ${capitalize && 'capitalize'}`;
-    // const closeableMode = variant === 'closeable';
-    // const iconMode = variant === 'icon';
-    var closeButtonException;
-    if (size === 'md') {
-        closeButtonException = '-mr-[2px]';
-    }
-    else {
-        closeButtonException = '-mr-[5px]';
-    }
-    var outlineColor;
-    if (color === 'default' || color === 'white') {
-        outlineColor = 'outline-primary-black';
-    }
-    else {
-        outlineColor = 'outline-white';
-    }
-    if (!open)
-        return null;
-    return (React.createElement("div", { className: "flex items-center font-segoe font-normal justify-center ".concat(configradius, " ").concat(configtext, " ").concat(configbg, " ").concat(configpadding) },
-        variant === 'icon' ? (React.createElement("div", { className: "flex justify-center items-center ".concat(IconContainer[size]) }, leftIcon || renderIcon(configX))) : (React.createElement(React.Fragment, null,
-            React.createElement("span", null, leftIcon),
-            React.createElement("div", { className: "flex justify-center items-center ".concat(size === 'md' && 'min-h-[20px] px-[5px]', " ").concat(size === 'sm' && 'min-h-[18px] px-[3px]', " ").concat(size === 'tn' && 'min-h-[14px] px-[3px] -mt-[2px]') }, children))),
-        variant === 'label' && rightIcon && (React.createElement("div", { className: "flex justify-center items-center ".concat(IconContainer[size]) }, rightIcon)),
-        variant === 'closeable' && closeHandler && (React.createElement("button", { type: "button", className: "flex justify-center items-center ".concat(size === 'tn' ? 'p-[1px]' : 'p-[2px]', " ").concat(outlineColor, " ").concat(iconColor, " ").concat(color === 'white' || color === 'default' ? 'bg-black/[.3]' : 'bg-white/[.5]', " focus:outline ").concat(size === 'tn' ? 'outline-[1.5px]' : 'outline-[2px]', " ").concat(closeButtonException, " rounded-full group"), onClick: function () { return closeHandler(); } },
-            React.createElement(CloseIcon, { size: size })))));
-}
+    }, []);
+    var defaultIconSize = validatedSize === 'md' ? 'text-xl' : 'text-sm';
+    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)
+        : colorConfig[validatedColor];
+    var blockclass = isBlock && validatedVariant !== 'icon' ? 'w-full' : "w-fit";
+    var maxWidthStyle = !isBlock ? maxWidth + 'px' : '';
+    var textClass = isBlock ? 'text-center' : 'text-left';
+    var containerClass = "".concat(sizeClass, " ").concat(colorClass, " ").concat(roundedClass, " ").concat(isCloseableClass, " ").concat(blockclass);
+    var closeColor = validatedColor === 'custom'
+        ? isDark
+            ? "bg-bia-white-transparent-50 text-bia-".concat(bgColor)
+            : "bg-bia-grey-dark-30 text-bia-".concat(bgColor)
+        : closeColorConfig[validatedColor];
+    var closeClass = "".concat(closeColor, " ").concat(closeSizeConfig[validatedSize]);
+    return (open && (React.createElement("div", __assign({ className: "tag-label flex items-center gap-x-[5px] text-size-base ".concat(containerClass), style: {
+            maxWidth: maxWidthStyle,
+        } }, props),
+        leftIcon && (React.createElement("div", { style: {
+                width: sizeCount + 'px',
+                height: sizeCount + 'px',
+            }, className: "flex items-center justify-center", ref: containerRef }, leftIcon ||
+            (validatedVariant === 'icon' && (React.createElement(TbCheck, { className: defaultIconSize }))))),
+        validatedVariant !== 'icon' && text && (React.createElement("span", { className: "w-full truncate pb-[2px] ".concat(textClass) }, text)),
+        validatedVariant === 'label' && rightIcon && (React.createElement("div", { className: "block" },
+            " ",
+            rightIcon,
+            " ")),
+        validatedVariant === 'closeable' && (React.createElement("button", { type: "button", onClick: closeHandler, className: "flex aspect-square items-center justify-center rounded-full pt-[1px] ".concat(closeClass) },
+            React.createElement(TbX, null))))));
+};
 TagLabel.defaultProps = {
     variant: 'default',
     size: 'sm',
     open: true,
     closeHandler: function () { },
-    rightIcon: null,
     leftIcon: null,
+    rightIcon: null,
+    left: null,
+    right: null,
+    bgColor: null,
+    textColor: null,
+    isBlock: false,
+    maxWidth: 300,
+    isDark: false,
 };
 
 var classConfig = {
     top: {
-        tooltipContainer: 'bottom-[110%]  left-1/2  -translate-x-1/2',
+        tooltipContainer: 'bottom-[calc(100%+5px)]  left-1/2  -translate-x-1/2',
         triangleContainer: 'left-0 -bottom-[4px] flex justify-center w-full h-auto',
         triangleShape: 'border-l-[8px] border-l-transparent border-t-[5px] border-t-primary-black border-r-[8px] border-r-transparent',
     },
     right: {
-        tooltipContainer: 'left-[105%] top-1/2 -translate-y-1/2',
+        tooltipContainer: 'left-[calc(100%+5px)] top-1/2 -translate-y-1/2',
         triangleContainer: '-left-[4px] bottom-0 flex items-center w-auto h-full',
         triangleShape: 'border-t-[8px] border-t-transparent border-r-[5px] border-r-primary-black border-b-[8px] border-b-transparent',
     },
     bottom: {
-        tooltipContainer: 'top-[110%]  left-1/2  -translate-x-1/2',
+        tooltipContainer: 'top-[calc(100%+5px)]  left-1/2  -translate-x-1/2',
         triangleContainer: 'left-0 -top-[4px] flex justify-center w-full h-auto',
         triangleShape: 'border-l-[8px] border-l-transparent border-b-[5px] border-b-primary-black border-r-[8px] border-r-transparent',
     },
     left: {
-        tooltipContainer: 'right-[105%] top-1/2 -translate-y-1/2',
+        tooltipContainer: 'right-[calc(100%+5px)] top-1/2 -translate-y-1/2',
         triangleContainer: '-right-[4px] bottom-0 flex items-center w-auto h-full',
         triangleShape: 'border-t-[8px] border-t-transparent border-l-[5px] border-l-primary-black border-b-[8px] border-b-transparent',
     },
+    'top-right': {
+        tooltipContainer: 'bottom-[calc(100%+5px)] right-0',
+        triangleContainer: 'left-0 -bottom-[4px] flex justify-center w-full h-auto',
+        triangleShape: 'border-l-[8px] border-l-transparent border-t-[5px] border-t-primary-black border-r-[8px] border-r-transparent',
+    },
+    'top-left': {
+        tooltipContainer: 'bottom-[calc(100%+5px)] left-0',
+        triangleContainer: 'left-0 -bottom-[4px] flex justify-center w-full h-auto',
+        triangleShape: 'border-l-[8px] border-l-transparent border-t-[5px] border-t-primary-black border-r-[8px] border-r-transparent',
+    },
+    'bottom-right': {
+        tooltipContainer: 'top-[calc(100%+5px)]  right-0',
+        triangleContainer: 'left-0 -top-[4px] flex justify-center w-full h-auto',
+        triangleShape: 'border-l-[8px] border-l-transparent border-b-[5px] border-b-primary-black border-r-[8px] border-r-transparent',
+    },
+    'bottom-left': {
+        tooltipContainer: 'top-[calc(100%+5px)]  left-0',
+        triangleContainer: 'left-0 -top-[4px] flex justify-center w-full h-auto',
+        triangleShape: 'border-l-[8px] border-l-transparent border-b-[5px] border-b-primary-black border-r-[8px] border-r-transparent',
+    },
 };
 
 function Tooltip(props) {
-    var children = props.children, content = props.content, delay = props.delay, _a = props.direction, direction = _a === void 0 ? 'top' : _a;
+    var children = props.children, content = props.content, delay = props.delay, _a = props.direction, direction = _a === void 0 ? 'top' : _a, _b = props.maxWidth, maxWidth = _b === void 0 ? '300px' : _b;
     var timeout;
-    var _b = React.useState(false), active = _b[0], setActive = _b[1];
+    var _c = React.useState(false), active = _c[0], setActive = _c[1];
     var showTip = function () {
         timeout = setTimeout(function () {
             setActive(true);
@@ -3258,26 +2705,29 @@ function Tooltip(props) {
         clearInterval(timeout);
         setActive(false);
     };
-    var _c = classConfig[direction], tooltipContainer = _c.tooltipContainer, triangleContainer = _c.triangleContainer, triangleShape = _c.triangleShape;
-    return (React.createElement("div", { className: "Tooltip-Wrapper relative block w-fit h-fit", onMouseEnter: showTip, onMouseLeave: hideTip },
+    var _d = classConfig[direction], tooltipContainer = _d.tooltipContainer; _d.triangleContainer; _d.triangleShape;
+    return (React.createElement("div", { className: "Tooltip-Wrapper relative flex flex-col w-full h-fit", onMouseEnter: showTip, onMouseLeave: hideTip },
         children,
-        active && (React.createElement("div", { className: "Tooltip-Tip absolute px-[7px] py-[4px] text-bia-sm bg-primary-black text-primary-white z-50 whitespace-nowrap rounded-[4px] ".concat(tooltipContainer) },
-            content,
-            React.createElement("div", { className: "absolute ".concat(triangleContainer) },
-                React.createElement("div", { className: "w-0 h-0 ".concat(triangleShape) }))))));
+        active && (React.createElement("div", { className: "Tooltip absolute px-[7px] py-[4px] text-size-sm bg-primary-black text-primary-white z-50 whitespace-nowrap rounded-[4px] ".concat(tooltipContainer), style: { maxWidth: maxWidth } },
+            React.createElement("p", { className: " whitespace-pre-wrap break-words" }, content)))));
 }
 Tooltip.defaultProps = {
     delay: 400,
     direction: 'top',
+    maxWidth: '300px',
 };
 Tooltip.defaultProps = {};
 
 function ScrollbarSimulation() {
-    return (React.createElement("div", { className: "w-64 aspect-square overflow-y-auto p-5 text-justify" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta ac augue ac porta. Nunc ac pretium odio. Integer auctor viverra malesuada. Nullam id consectetur orci. Praesent lobortis enim fermentum lacus convallis, vitae vestibulum lorem accumsan. Donec ac magna tristique, fermentum nulla at, faucibus magna. Nulla facilisi. Ut vehicula pulvinar nulla vitae suscipit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus pulvinar, dolor a fringilla eleifend, metus arcu condimentum nisl, ut ultricies massa elit nec urna. Nam aliquam vestibulum ullamcorper. Aliquam ac ex sapien. Nam in interdum metus. Cras fringilla est nisl, ut pharetra sapien placerat non. Sed finibus elementum ipsum id interdum. Proin condimentum consequat tortor, ac aliquam urna. Donec tincidunt nunc eu est tristique aliquam. In a enim sit amet turpis sodales cursus. Donec in hendrerit odio. Vestibulum pretium, lectus nec vehicula iaculis, velit nisl laoreet enim, eget iaculis nibh neque et risus. Morbi aliquam malesuada mi in rhoncus."));
+    return (React.createElement("div", { className: "flex gap-5" },
+        React.createElement("div", { className: "w-64 aspect-square overflow-y-auto p-5 text-justify" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta ac augue ac porta. Nunc ac pretium odio. Integer auctor viverra malesuada. Nullam id consectetur orci. Praesent lobortis enim fermentum lacus convallis, vitae vestibulum lorem accumsan. Donec ac magna tristique, fermentum nulla at, faucibus magna. Nulla facilisi. Ut vehicula pulvinar nulla vitae suscipit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus pulvinar, dolor a fringilla eleifend, metus arcu condimentum nisl, ut ultricies massa elit nec urna. Nam aliquam vestibulum ullamcorper. Aliquam ac ex sapien. Nam in interdum metus. Cras fringilla est nisl, ut pharetra sapien placerat non. Sed finibus elementum ipsum id interdum. Proin condimentum consequat tortor, ac aliquam urna. Donec tincidunt nunc eu est tristique aliquam. In a enim sit amet turpis sodales cursus. Donec in hendrerit odio. Vestibulum pretium, lectus nec vehicula iaculis, velit nisl laoreet enim, eget iaculis nibh neque et risus. Morbi aliquam malesuada mi in rhoncus."),
+        React.createElement("div", { className: "h-64 aspect-square overflow-x-auto overflow-y-clip p-5 text-justify" }, "Loremipsumdolorsitamet,consecteturadipiscingelit.Proinportaac augueacporta.Nuncacpretiumodio.Integerauctorviverramalesuada. Nullamidconsecteturorci.Praesentlobortisenimfermentumlacus convallis,vitaevestibulumloremaccumsan.Donecacmagnatristique, fermentumnullaat,faucibusmagna.Nullafacilisi.Utvehiculapulvinar nullavitaesuscipit.Vestibulumanteipsumprimisinfaucibusorci luctusetultricesposuerecubiliacurae;Vivamuspulvinar,dolora fringillaeleifend,metusarcucondimentumnisl,utultriciesmassaelit necurna.Namaliquamvestibulumullamcorper.Aliquamacexsapien.Nam in interdum metus. Cras fringilla est nisl, ut pharetra sapien placerat non. Sed finibus elementum ipsum id interdum. Proin condimentum consequat tortor, ac aliquam urna. Donec tincidunt nunc eu est tristique aliquam. In a enim sit amet turpis sodales cursus. Donec in hendrerit odio. Vestibulum pretium, lectus nec vehicula iaculis, velit nisl laoreet enim, eget iaculis nibh neque et risus. Morbi aliquam malesuada mi in rhoncus.")));
 }
 
 function HiddenScrollbarSimulation() {
-    return (React.createElement("div", { className: "w-64 aspect-square overflow-y-auto p-5 scrollbar-hidden text-justify" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta ac augue ac porta. Nunc ac pretium odio. Integer auctor viverra malesuada. Nullam id consectetur orci. Praesent lobortis enim fermentum lacus convallis, vitae vestibulum lorem accumsan. Donec ac magna tristique, fermentum nulla at, faucibus magna. Nulla facilisi. Ut vehicula pulvinar nulla vitae suscipit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus pulvinar, dolor a fringilla eleifend, metus arcu condimentum nisl, ut ultricies massa elit nec urna. Nam aliquam vestibulum ullamcorper. Aliquam ac ex sapien. Nam in interdum metus. Cras fringilla est nisl, ut pharetra sapien placerat non. Sed finibus elementum ipsum id interdum. Proin condimentum consequat tortor, ac aliquam urna. Donec tincidunt nunc eu est tristique aliquam. In a enim sit amet turpis sodales cursus. Donec in hendrerit odio. Vestibulum pretium, lectus nec vehicula iaculis, velit nisl laoreet enim, eget iaculis nibh neque et risus. Morbi aliquam malesuada mi in rhoncus."));
+    return (React.createElement("div", { className: "flex gap-5" },
+        React.createElement("div", { className: "w-64 aspect-square overflow-y-auto p-5 scrollbar-hidden text-justify" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta ac augue ac porta. Nunc ac pretium odio. Integer auctor viverra malesuada. Nullam id consectetur orci. Praesent lobortis enim fermentum lacus convallis, vitae vestibulum lorem accumsan. Donec ac magna tristique, fermentum nulla at, faucibus magna. Nulla facilisi. Ut vehicula pulvinar nulla vitae suscipit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus pulvinar, dolor a fringilla eleifend, metus arcu condimentum nisl, ut ultricies massa elit nec urna. Nam aliquam vestibulum ullamcorper. Aliquam ac ex sapien. Nam in interdum metus. Cras fringilla est nisl, ut pharetra sapien placerat non. Sed finibus elementum ipsum id interdum. Proin condimentum consequat tortor, ac aliquam urna. Donec tincidunt nunc eu est tristique aliquam. In a enim sit amet turpis sodales cursus. Donec in hendrerit odio. Vestibulum pretium, lectus nec vehicula iaculis, velit nisl laoreet enim, eget iaculis nibh neque et risus. Morbi aliquam malesuada mi in rhoncus."),
+        React.createElement("div", { className: "h-64 aspect-square overflow-x-auto overflow-y-clip p-5 scrollbar-hidden text-justify" }, "Loremipsumdolorsitamet,consecteturadipiscingelit.Proinportaac augueacporta.Nuncacpretiumodio.Integerauctorviverramalesuada. Nullamidconsecteturorci.Praesentlobortisenimfermentumlacus convallis,vitaevestibulumloremaccumsan.Donecacmagnatristique, fermentumnullaat,faucibusmagna.Nullafacilisi.Utvehiculapulvinar nullavitaesuscipit.Vestibulumanteipsumprimisinfaucibusorci luctusetultricesposuerecubiliacurae;Vivamuspulvinar,dolora fringillaeleifend,metusarcucondimentumnisl,utultriciesmassaelit necurna.Namaliquamvestibulumullamcorper.Aliquamacexsapien.Nam ininterdummetus.Crasfringillaestnisl,utpharetrasapienplaceratnon. Sedfinibuselementumipsumidinterdum.Proincondimentumconsequat tortor,acaliquamurna.Donectinciduntnunceuesttristiquealiquam. Inaenimsitametturpissodalescursus.Donecinhendreritodio. Vestibulumpretium,lectusnecvehiculaiaculis,velitnisllaoreet enim,egetiaculisnibhnequeetrisus.Morbialiquammalesuadamiin rhoncus.")));
 }
 
 exports.Accordions = Accordions;
@@ -3314,6 +2764,7 @@ exports.SelectInputSimulation = SelectInputSimulation;
 exports.Slider = Slider;
 exports.Spinner = Spinner;
 exports.Tab = Tab;
+exports.TabMenu = TabMenu;
 exports.Table = Table;
 exports.TableBody = TableBody;
 exports.TableCol = TableCol;