bianic-ui 1.0.0-beta.17 → 1.0.0-beta.19

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: '',
         },
     },
@@ -378,13 +378,13 @@ var radiusConfig = {
         tn: 'rounded-radius-full focus-visible:rounded-radius-full',
     },
 };
-var sizeConfig$a = {
+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] ',
@@ -434,8 +434,8 @@ function Button(_a) {
     var validatedSize = validUnion(size, sizeUnion$4);
     var validatedRadius = validUnion(radius, radiusUnion);
     var sizeClass = label
-        ? sizeConfig$a[validatedSize]
-        : iconOnlySizeConfig[validatedSize];
+        ? sizeConfig$b[validatedSize]
+        : iconOnlySizeConfig$1[validatedSize];
     var classString = "\n    ".concat(variantConfig$1[validatedVariant], " \n    ").concat(sizeClass, " \n    ").concat(radiusConfig[validatedRadius][validatedSize], " \n    ").concat(className, "\n  ");
     return (React.createElement("button", __assign({ type: "button", className: "button flex justify-center items-center ".concat(classString), disabled: disabled }, props),
         childrenElement(iconLeft || left),
@@ -1478,7 +1478,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]',
@@ -1512,7 +1512,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 } });
 }
@@ -1533,7 +1533,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';
@@ -1590,7 +1590,7 @@ TextInputSimulation.defaultProps = {
 };
 
 // Desc: Radio button size configuration
-var sizeConfig$8 = {
+var sizeConfig$9 = {
     md: {
         checkSize: 'w-[22px] h-[22px]',
         labelSize: 'text-size-base',
@@ -1605,7 +1605,7 @@ 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 validatedSize = validUnion(size, sizeUnion$3);
-    var _f = sizeConfig$8[validatedSize], checkSize = _f.checkSize, labelSize = _f.labelSize;
+    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 }),
@@ -1621,7 +1621,7 @@ Radio.defaultProps = {
     checked: false,
 };
 
-var sizeConfig$7 = {
+var sizeConfig$8 = {
     md: {
         inputClass: 'text-size-base font-[350] min-h-10',
     },
@@ -1633,7 +1633,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,
@@ -1653,7 +1653,7 @@ TextArea.defaultProps = {
     rows: 4,
 };
 
-var sizeConfig$6 = {
+var sizeConfig$7 = {
     md: {
         checkClass: 'w-[22px] h-[22px]',
         labelClass: 'text-size-base font-[350]',
@@ -1667,7 +1667,7 @@ 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[validUnion(size, sizeUnion$2)], 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 }),
@@ -1720,7 +1720,7 @@ 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]',
@@ -1731,7 +1731,7 @@ var sizeConfig$5 = {
     },
 };
 
-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',
@@ -1749,7 +1749,7 @@ function DefaultDropdownItem(_a) {
     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 () { } },
@@ -1772,7 +1772,7 @@ 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 _e = React.useState(false), isOpen = _e[0], setIsOpen = _e[1];
     var validatedSize = validUnion(size, sizeUnion$1);
-    var _f = sizeConfig$5[validatedSize], searchSize = _f.searchSize, iconSize = _f.iconSize;
+    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)) {
@@ -1843,7 +1843,7 @@ function SelectInputSimulation(_a) {
     return (React.createElement(SelectInput, { label: "Input Select", descText: "Deskripsi Input Select", options: optionData, selected: selected, setSelected: setSelected, size: size, id: "demo-id" }));
 }
 
-var sizeConfig$3 = {
+var sizeConfig$4 = {
     md: {
         iconClass: 'right-[10px]',
         iconSize: '18',
@@ -1862,7 +1862,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)) {
@@ -1908,7 +1908,7 @@ LiveSearch.defaultProps = {
     value: {},
 };
 
-var sizeConfig$2 = {
+var sizeConfig$3 = {
     md: {
         containerSize: 'w-[42px] h-[22px]',
         checkSize: 'p-2',
@@ -1923,7 +1923,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" }),
@@ -1949,7 +1949,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]',
@@ -1959,7 +1959,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) {
@@ -2002,7 +2002,7 @@ 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)));
     })));
 }
@@ -2044,7 +2044,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',
 };
@@ -2094,7 +2094,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 })));
 }
 
@@ -2184,7 +2184,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',
@@ -2472,724 +2472,40 @@ 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',
+};
+var iconOnlySizeConfig = {
+    md: 'p-[7px]',
+    sm: 'p-[4px]',
+    tn: 'p-[2px]',
+};
+var closeConfig = {
+    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 rightPaddingConfig = {
+    md: 'pr-[8px]',
+    sm: 'pr-[5px]',
+    tn: 'pr-[3px]',
 };
 
 var colorUnion = [
@@ -3201,96 +2517,40 @@ var colorUnion = [
     'red',
     'black',
     'white',
+    'custom',
 ];
 var sizeUnion = ['md', 'sm', 'tn'];
 var variantUnion = ['label', 'icon', 'closeable'];
-function TagLabel(_a) {
-    var text = _a.text, _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, left = _a.left, right = _a.right, props = __rest(_a, ["text", "closeHandler", "size", "variant", "open", "color", "leftIcon", "rightIcon", "left", "right"]);
+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 config = TagLabelConfig[validatedColor][validatedSize][validatedVariant];
-    var configIcon = TagLabelConfig[validatedColor][validatedSize];
-    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 (validatedSize === 'md') {
-            textSize = 'text-[20px]';
-        }
-        else if (validatedSize === 'sm' || validatedSize === 'tn') {
-            textSize = 'text-[14px]';
-        }
-        else {
-            textSize = 'text-[14px]';
-        }
-        var fillColor;
-        if (validatedColor === 'blue') {
-            fillColor = '#5d5dea';
-        }
-        else if (validatedColor === 'green') {
-            fillColor = '#21ba4c';
-        }
-        else if (validatedColor === 'teal') {
-            fillColor = '#00b5ad';
-        }
-        else if (validatedColor === 'yellow') {
-            fillColor = '#ff7b00';
-        }
-        else if (validatedColor === 'red') {
-            fillColor = '#db2828';
-        }
-        else if (validatedColor === 'black') {
-            fillColor = '#2f2f2f';
-        }
-        else {
-            fillColor = '#ffffff';
-        }
-        return (React.createElement(IconComponent, { className: "".concat(textSize, " ").concat(validatedVariant === 'icon' ? configXcolor : configXcolorV), color: fillColor }));
-    };
-    // const containerClass = `${container} ${capitalize && 'capitalize'}`;
-    // const closeableMode = variant === 'closeable';
-    // const iconMode = variant === 'icon';
-    var closeButtonException;
-    if (validatedSize === 'md') {
-        closeButtonException = '-mr-[2px]';
-    }
-    else {
-        closeButtonException = '-mr-[5px]';
-    }
-    var outlineColor;
-    if (validatedColor === 'default' || validatedColor === 'white') {
-        outlineColor = 'outline-primary-black';
-    }
-    else {
-        outlineColor = 'outline-white';
-    }
-    if (!open)
-        return null;
-    return (React.createElement("div", __assign({ className: "flex items-center font-segoe font-normal justify-center ".concat(configradius, " ").concat(configtext, " ").concat(configbg, " ").concat(configpadding) }, props),
-        validatedVariant === 'icon' ? (React.createElement("div", { className: "flex justify-center items-center ".concat(IconContainer[validatedSize]) }, childrenElement(leftIcon || left) ||
-            renderIcon(configX))) : (React.createElement(React.Fragment, null,
-            React.createElement("span", null, childrenElement(leftIcon)),
-            React.createElement("div", { className: "flex justify-center items-center ".concat(validatedSize === 'md' && 'min-h-[20px] px-[5px]', " ").concat(validatedSize === 'sm' && 'min-h-[18px] px-[3px]', " ").concat(validatedSize === 'tn' && 'min-h-[14px] px-[3px] -mt-[2px]') }, childrenElement(text)))),
-        validatedVariant === 'label' && rightIcon && (React.createElement("div", { className: "flex justify-center items-center ".concat(IconContainer[validatedSize]) }, childrenElement(rightIcon || right))),
-        validatedVariant === 'closeable' && closeHandler && (React.createElement("button", { type: "button", className: "flex justify-center items-center ".concat(validatedSize === 'tn' ? 'p-[1px]' : 'p-[2px]', " ").concat(outlineColor, " ").concat(iconColor, " ").concat(validatedColor === 'white' || validatedColor === 'default' ? 'bg-black/[.3]' : 'bg-white/[.5]', " focus:outline ").concat(validatedSize === 'tn' ? 'outline-[1.5px]' : 'outline-[2px]', " ").concat(closeButtonException, " rounded-full group"), onClick: function () { return closeHandler(); } },
-            React.createElement(CloseIcon, { size: validatedSize })))));
-}
+    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 closeClass = validatedColor === 'custom'
+        ? isDark ? "bg-bia-white-transparent-50 text-bia-".concat(bgColor) : "bg-bia-grey-dark-30 text-bia-".concat(bgColor)
+        : closeConfig[validatedColor];
+    return (open && (React.createElement("div", __assign({ className: "tag-label flex items-center gap-x-[5px] text-size-base h-fit ".concat(containerClass), style: { maxWidth: maxWidthStyle } }, props),
+        leftIcon ||
+            (validatedVariant === 'icon' && React.createElement(TbCheck, { className: defaultIconSize })),
+        validatedVariant !== 'icon' && (React.createElement("span", { className: "pb-[2px] truncate w-full ".concat(textClass) },
+            " ",
+            text,
+            " ")),
+        validatedVariant !== 'icon' && rightIcon,
+        validatedVariant === 'closeable' && (React.createElement("button", { type: "button", onClick: closeHandler, className: "aspect-square w-[18px] flex justify-center items-center rounded-full mt-[1px] ".concat(closeClass) },
+            React.createElement(TbX, { className: "text-[18px]" }))))));
+};
 TagLabel.defaultProps = {
     variant: 'default',
     size: 'sm',
@@ -3300,6 +2560,11 @@ TagLabel.defaultProps = {
     rightIcon: null,
     left: null,
     right: null,
+    bgColor: null,
+    textColor: null,
+    isBlock: false,
+    maxWidth: 300,
+    isDark: false,
 };
 
 var classConfig = {