bianic-ui 1.0.0-beta.2 → 1.0.0-beta.21

package/dist/esm/index.js

@@ -86,7 +86,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);
@@ -153,7 +153,7 @@ var AlertConfig = {
         ContainerIcon: 'bg-bia-green',
         close: 'text-bia-green',
         icon: {
-            true: TbCheck$1,
+            true: TbCheck,
             false: '',
         },
     },
@@ -244,9 +244,38 @@ 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: '',
@@ -347,13 +376,13 @@ 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] ',
@@ -378,12 +407,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$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),
+        childrenElement(label),
+        childrenElement(iconRight || right)));
 }
 Button.defaultProps = {
     label: null,
@@ -394,6 +449,8 @@ Button.defaultProps = {
     variant: 'default',
     iconLeft: null,
     iconRight: null,
+    left: null,
+    right: null,
 };
 
 var AvatarConfig = {
@@ -1419,7 +1476,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]',
@@ -1453,7 +1510,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 } });
 }
@@ -1474,7 +1531,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 = 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';
@@ -1531,7 +1588,7 @@ TextInputSimulation.defaultProps = {
 };
 
 // Desc: Radio button size configuration
-var sizeConfig$8 = {
+var sizeConfig$9 = {
     md: {
         checkSize: 'w-[22px] h-[22px]',
         labelSize: 'text-size-base',
@@ -1542,14 +1599,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: '',
@@ -1560,7 +1619,7 @@ Radio.defaultProps = {
     checked: false,
 };
 
-var sizeConfig$7 = {
+var sizeConfig$8 = {
     md: {
         inputClass: 'text-size-base font-[350] min-h-10',
     },
@@ -1572,7 +1631,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,
@@ -1592,7 +1651,7 @@ TextArea.defaultProps = {
     rows: 4,
 };
 
-var sizeConfig$6 = {
+var sizeConfig$7 = {
     md: {
         checkClass: 'w-[22px] h-[22px]',
         labelClass: 'text-size-base font-[350]',
@@ -1603,16 +1662,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], 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,
@@ -1658,7 +1718,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]',
@@ -1669,7 +1729,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',
@@ -1687,7 +1747,7 @@ function DefaultDropdownItem(_a) {
     var _g = 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 () { } },
@@ -1705,10 +1765,12 @@ DefaultDropdownItem.defaultProps = {
 };
 
 /* 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 _e = 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 = useRef(null);
     var handleOutsideClick = function (e) {
         if (inputRef.current && !inputRef.current.contains(e.target)) {
@@ -1723,14 +1785,14 @@ function SelectInput(_a) {
     });
     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,
+            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 () {
+                return (React.createElement(DefaultDropdownItem, { label: option.label, size: validatedSize, isSelected: isSelected, onClick: function () {
                         setSelected(option);
                         setIsOpen(false);
                     } }));
@@ -1779,7 +1841,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',
@@ -1798,7 +1860,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 = 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 = useRef(null);
     var handleOutsideClick = function (e) {
         if (inputRef.current && !inputRef.current.contains(e.target)) {
@@ -1844,7 +1906,7 @@ LiveSearch.defaultProps = {
     value: {},
 };
 
-var sizeConfig$2 = {
+var sizeConfig$3 = {
     md: {
         containerSize: 'w-[42px] h-[22px]',
         checkSize: 'p-2',
@@ -1859,7 +1921,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" }),
@@ -1885,7 +1947,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]',
@@ -1895,7 +1957,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) {
@@ -1938,7 +2000,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)));
     })));
 }
@@ -1980,7 +2042,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',
 };
@@ -2030,7 +2092,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 })));
 }
 
@@ -2120,7 +2182,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',
@@ -2408,816 +2470,99 @@ 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 = [
+    '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 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]" }))))));
 };
-
-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';
-        }
-        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 })))));
-}
 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 = {