bianic-ui 0.5.17 → 1.0.0-beta.1

package/dist/cjs/index.js

@@ -337,35 +337,29 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 
 var radiusConfig = {
     default: {
-        small: 'rounded-radius-sm focus-visible:rounded-radius-sm',
-        medium: 'rounded-radius-md focus-visible:rounded-radius-md',
-        large: 'rounded-radius-lg focus-visible:rounded-radius-lg',
-        tiny: 'rounded-radius-tn focus-visible:rounded-radius-tn',
+        sm: 'rounded-radius-sm focus-visible:rounded-radius-sm',
+        md: 'rounded-radius-md focus-visible:rounded-radius-md',
+        lg: 'rounded-radius-lg focus-visible:rounded-radius-lg',
+        tn: 'rounded-radius-tn focus-visible:rounded-radius-tn',
     },
     'full-rounded': {
-        small: 'rounded-radius-full focus-visible:rounded-radius-full',
-        medium: 'rounded-radius-full focus-visible:rounded-radius-full',
-        large: 'rounded-radius-full focus-visible:rounded-radius-full',
-        tiny: 'rounded-radius-full focus-visible:rounded-radius-full',
+        sm: 'rounded-radius-full focus-visible:rounded-radius-full',
+        md: 'rounded-radius-full focus-visible:rounded-radius-full',
+        lg: 'rounded-radius-full focus-visible:rounded-radius-full',
+        tn: 'rounded-radius-full focus-visible:rounded-radius-full',
     },
 };
 var sizeConfig$a = {
-    large: 'text-primary-black py-[10.5px] px-[13px] h-[48px] flex items-center justify-center gap-[10px]',
-    medium: 'text-primary-black  px-[11px] py-[9px] h-[40px] flex items-center justify-center gap-[5px] ',
-    small: 'text-primary-black px-[8px] py-[6px] h-[30px] flex items-center justify-center gap-[5px] ',
-    tiny: 'text-primary-black px-[4px] py-[2px] h-[22px] flex items-center justify-center gap-[3px]',
+    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 iconOnlySizeConfig = {
-    large: 'text-primary-black p-[13px] flex items-center justify-center gap-[10px]',
-    medium: 'text-primary-black  p-[11px] flex items-center justify-center gap-[5px]',
-    small: 'text-primary-black p-[8px] flex items-center justify-center gap-[5px] ',
-    tiny: 'text-primary-black p-[4px] flex items-center justify-center gap-[3px]',
-};
-var textConfig = {
-    large: 'medium-text-semibold',
-    medium: 'normal-text-semibold',
-    small: 'small-text-semibold',
-    tiny: 'small-text-semibold',
+    lg: 'p-[13px] flex items-center justify-center gap-[10px]',
+    md: ' p-[11px] flex items-center justify-center gap-[5px]',
+    sm: 'p-[8px] flex items-center justify-center gap-[5px] ',
+    tn: 'p-[4px] flex items-center justify-center gap-[3px]',
 };
 var shadow = 'shadow-[0px_6px_18px_1px_rgba(188,199,237,0.5)] disabled:shadow-none active:shadow-none';
 var variantConfig$1 = {
@@ -387,10 +381,10 @@ var variantConfig$1 = {
 };
 
 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 ? 'medium' : _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"]);
+    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 && (React.createElement(Text, { variant: textConfig[size], extended: size === 'large' ? 'pb-[0px]' : 'pb-[2px]' }, label)),
+        label,
         iconRight));
 }
 Button.defaultProps = {
@@ -398,37 +392,37 @@ Button.defaultProps = {
     className: '',
     disabled: false,
     radius: 'default',
-    size: 'medium',
+    size: 'md',
     variant: 'default',
     iconLeft: null,
     iconRight: null,
 };
 
 var AvatarConfig = {
-    small: {
+    sm: {
         picture: 'w-[24px] h-[24px] rounded-[12px] border-[1px] border-bia-coolgrey-light-90',
         'no picture': 'font-semibold text-[12px] leading-[15.96px] text-primary-white flex items-center',
     },
-    medium: {
+    md: {
         picture: 'w-[36px] h-[36px] rounded-[18px] border-[1px] border-bia-coolgrey-light-90',
         'no picture': 'font-semibold text-[14px] leading-[18.62px] text-primary-white flex items-center',
     },
-    large: {
+    lg: {
         picture: 'w-[52px] h-[52px] rounded-[26px] border-[2px] border-bia-coolgrey-light-90',
         'no picture': 'font-semibold text-[24px] leading-[31.92px] text-primary-white flex items-center',
     },
-    'x-large': {
+    xl: {
         picture: 'w-[92px] h-[92px] rounded-[46px] border-[3px] border-bia-coolgrey-light-90',
         'no picture': 'font-semibold text-[36px] leading-[47.88px] text-primary-white flex items-center',
     },
-    'xx-large': {
+    xxl: {
         picture: 'w-[160px] h-[160px] rounded-[80px] border-[5px] border-bia-coolgrey-light-90',
         'no picture': 'font-semibold text-[64px] leading-[85.13px] text-primary-white flex items-center',
     },
 };
 
 function Avatar(_a) {
-    var size = _a.size, variant = _a.variant, _b = _a.name, name = _b === void 0 ? 'Test' : _b;
+    var _b = _a.size, size = _b === void 0 ? 'md' : _b, variant = _a.variant, _c = _a.name, name = _c === void 0 ? 'Test' : _c;
     var getInitials = function (initial) {
         if (!initial)
             return '';
@@ -460,6 +454,7 @@ function Avatar(_a) {
 }
 Avatar.defaultProps = {
     name: '',
+    size: 'md',
 };
 
 var typeConfig = {
@@ -534,19 +529,17 @@ var variantConfig = {
 };
 
 function Banner(_a) {
-    var children = _a.children, _b = _a.isCloseable, isCloseable = _b === void 0 ? true : _b, _c = _a.variant, variant = _c === void 0 ? 'black' : _c, isShow = _a.isShow, setIsShow = _a.setIsShow;
-    if (isShow) {
+    var children = _a.children, _b = _a.closeable, closeable = _b === void 0 ? true : _b, _c = _a.variant, variant = _c === void 0 ? 'black' : _c, open = _a.open, onClose = _a.onClose;
+    if (open) {
         return (React.createElement("div", { className: "w-full h-[42px] py-[22px] text-size-base font-semibold flex justify-center items-center text-white relative ".concat(variantConfig[variant].bg) },
             React.createElement("div", { className: "w-full flex justify-center items-center gap-[10px]" },
                 React.createElement("div", { className: "font-semibold font-segoe text-[14px] leading-[21px]" }, children),
-                React.createElement("div", { className: "flex items-center justify-center" }, isCloseable && (React.createElement("button", { className: "ml-auto text-xs outline-2 text-white absolute right-4 w-[18px] h-[18px] flex justify-center items-center ".concat(variantConfig[variant].focus), type: "button", onClick: function () {
-                        setIsShow(false);
-                    } },
+                React.createElement("div", { className: "flex items-center justify-center" }, closeable && (React.createElement("button", { className: "ml-auto text-xs outline-2 text-white absolute right-4 w-[18px] h-[18px] flex justify-center items-center ".concat(variantConfig[variant].focus), type: "button", onClick: function () { return onClose(false); } },
                     React.createElement(TbX, { className: "text-[18px] ".concat(variantConfig[variant].hover, " ").concat(variantConfig[variant].active) })))))));
     }
 }
 Banner.defaultProps = {
-    isCloseable: true,
+    closeable: true,
     variant: 'black',
 };
 
@@ -1352,15 +1345,15 @@ function Chevron() {
 }
 
 function Breadcrumb(_a) {
-    var disabled = _a.disabled, _b = _a.isActive, isActive = _b === void 0 ? false : _b, children = _a.children, onClick = _a.onClick, rest = __rest(_a, ["disabled", "isActive", "children", "onClick"]);
-    var _c = BreadcrumbConfig[String(isActive)], container = _c.container, text = _c.text;
+    var disabled = _a.disabled, _b = _a.selected, selected = _b === void 0 ? false : _b, children = _a.children, onClick = _a.onClick, rest = __rest(_a, ["disabled", "selected", "children", "onClick"]);
+    var _c = BreadcrumbConfig[String(selected)], container = _c.container, text = _c.text;
     return (React.createElement("div", { className: "flex" },
         React.createElement("button", __assign({ className: "".concat(text, " ").concat(disabled ? 'text-bia-coolgrey-light-50 cursor-pointer' : '', " whitespace-normal flex items-center justify-center bg-transparent rounded-radius-sm px-[5px] py-[3px] focus-visible:outline cursor-pointer ").concat(container, " ").concat(disabled ? 'hover:bg-transparent focus-visible:outline-transparent active:bg-transparent' : ''), disabled: disabled, type: "button", onClick: onClick }, rest), children),
-        !isActive && (React.createElement("div", { className: "px-[5px] flex justify-center items-center" },
+        !selected && (React.createElement("div", { className: "px-[5px] flex justify-center items-center" },
             React.createElement(Chevron, null)))));
 }
 Breadcrumb.defaultProps = {
-    isActive: false,
+    selected: false,
 };
 
 function Color() {
@@ -1429,12 +1422,12 @@ Divider.defaultProps = {
 };
 
 var sizeConfig$9 = {
-    medium: {
+    md: {
         fieldSize: 'text-size-base p-2.5 font-[350] h-10',
         iconPosition: 'right-[10px]',
         iconSize: 18,
     },
-    small: {
+    sm: {
         fieldSize: 'text-size-sm p-1.5 h-[30px]',
         iconPosition: 'right-[7px]',
         iconSize: 14,
@@ -1468,8 +1461,8 @@ function ValidationIcon(_a) {
 }
 
 function PasswordIcon(_a) {
-    var isShow = _a.isShow, _b = _a.showHandler, showHandler = _b === void 0 ? function () { } : _b, iconSize = _a.iconSize, isDisabled = _a.isDisabled;
-    var iconColor = isDisabled ? '#8b8ba6' : '#5E5EEA';
+    var isShow = _a.isShow, _b = _a.showHandler, showHandler = _b === void 0 ? function () { } : _b, iconSize = _a.iconSize, disabled = _a.disabled;
+    var iconColor = disabled ? '#8b8ba6' : '#5E5EEA';
     if (isShow) {
         return (React.createElement(TbEye, { onClick: function () { return showHandler(false); }, style: {
                 fontSize: iconSize,
@@ -1480,47 +1473,47 @@ function PasswordIcon(_a) {
 }
 
 function TextInput(_a) {
-    var descText = _a.descText, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, icon = _a.icon, _c = _a.id, id = _c === void 0 ? '' : _c, _d = _a.inputSize, inputSize = _d === void 0 ? 'medium' : _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 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[inputSize], iconSize = _p.iconSize, fieldSize = _p.fieldSize, iconPosition = _p.iconPosition;
+    var _p = sizeConfig$9[size], iconSize = _p.iconSize, fieldSize = _p.fieldSize, iconPosition = _p.iconPosition;
     var typeVariant = variant;
     if (variant === 'password')
         typeVariant = isShow ? 'text' : 'password';
     var isExistValidation = isValid !== null;
     var descColor = 'text-primary-cool';
-    if (!isDisabled && isExistValidation && isValid)
+    if (!disabled && isExistValidation && isValid)
         descColor = 'text-bia-green';
-    if (!isDisabled && isExistValidation && !isValid)
+    if (!disabled && isExistValidation && !isValid)
         descColor = 'text-bia-red';
     var bottomBorderColor = 'hover:border-b-bia-blue focus:border-b-bia-blue';
-    if (!isDisabled && isExistValidation && isValid)
+    if (!disabled && isExistValidation && isValid)
         bottomBorderColor = 'border-b-bia-green';
-    if (!isDisabled && isExistValidation && !isValid)
+    if (!disabled && isExistValidation && !isValid)
         bottomBorderColor = 'border-b-bia-red';
     var iconElement = null;
-    if (!isDisabled && isExistValidation)
+    if (!disabled && isExistValidation)
         iconElement = React.createElement(ValidationIcon, { isValid: isValid, iconSize: iconSize });
     if (icon)
         iconElement = icon;
     if (variant === 'password') {
-        iconElement = (React.createElement(PasswordIcon, { isShow: isShow, showHandler: setIsShow, iconSize: iconSize, isDisabled: isDisabled }));
+        iconElement = (React.createElement(PasswordIcon, { isShow: isShow, showHandler: setIsShow, iconSize: iconSize, disabled: disabled }));
     }
     return (React.createElement("div", { className: "field-group w-full flex flex-col gap-y-2" },
         React.createElement("label", { htmlFor: id, className: "label text-xs font-semibold" },
             label,
             required && React.createElement("span", { className: "p-1 text-bia-red" }, "*")),
         React.createElement("div", { className: "w-full relative" },
-            React.createElement("input", { className: "field bg-primary-white disabled:bg-bia-grey-light-80  disabled:text-bia-grey-active read-only:border-bia-grey-light-50 read-only:pointer-events-none w-full border border-bia-grey-dark-10 disabled:border-bia-grey-dark-10 focus:rounded-b-none hover:rounded-b-none focus-visible:outline-none rounded ".concat(fieldStyle, " ").concat(fieldSize, " ").concat(bottomBorderColor), disabled: isDisabled, id: id, placeholder: placeholder || label, readOnly: readOnly, required: required, type: typeVariant, value: value, onChange: function (e) { return onChange(e); } }),
+            React.createElement("input", { className: "field bg-primary-white disabled:bg-bia-grey-light-80  disabled:text-bia-grey-active read-only:border-bia-grey-light-50 read-only:pointer-events-none w-full border border-bia-grey-dark-10 disabled:border-bia-grey-dark-10 focus:rounded-b-none hover:rounded-b-none focus-visible:outline-none rounded ".concat(fieldStyle, " ").concat(fieldSize, " ").concat(bottomBorderColor), disabled: disabled, id: id, placeholder: placeholder || label, readOnly: readOnly, required: required, type: typeVariant, value: value, onChange: function (e) { return onChange(e); } }),
             React.createElement("div", { className: "absolute inset-y-0 pl-3 flex items-center ".concat(iconStyle, " ").concat(iconPosition) }, iconElement)),
         React.createElement("span", { className: "desc text-xs ".concat(descColor) }, descText)));
 }
 TextInput.defaultProps = {
     descText: '',
-    isDisabled: false,
+    disabled: false,
     icon: null,
     id: '',
-    inputSize: 'medium',
+    size: 'md',
     isValid: null,
     label: '',
     placeholder: '',
@@ -1533,55 +1526,55 @@ TextInput.defaultProps = {
 function TextInputSimulation(_a) {
     var size = _a.size;
     var _b = React.useState(''), value = _b[0], setValue = _b[1];
-    return (React.createElement(TextInput, { variant: "text", label: "Input", descText: "Deskripsi", placeholder: "Type here", inputSize: size, id: "demo-id", value: value, onChange: function (e) { return setValue(e.target.value); } }));
+    return (React.createElement(TextInput, { variant: "text", label: "Input", descText: "Deskripsi", placeholder: "Type here", size: size, id: "demo-id", value: value, onChange: function (e) { return setValue(e.target.value); } }));
 }
 TextInputSimulation.defaultProps = {
-    size: 'medium',
+    size: 'md',
 };
 
 // Desc: Radio button size configuration
 var sizeConfig$8 = {
-    medium: {
+    md: {
         checkSize: 'w-[22px] h-[22px]',
         labelSize: 'text-size-base',
     },
-    small: {
+    sm: {
         checkSize: 'w-4 h-4',
         labelSize: 'text-size-sm',
     },
 };
 
 function Radio(_a) {
-    var label = _a.label, _b = _a.inputSize, inputSize = _b === void 0 ? 'medium' : _b, id = _a.id, _c = _a.onClick, onClick = _c === void 0 ? function () { } : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isChecked, isChecked = _e === void 0 ? false : _e;
-    var _f = sizeConfig$8[inputSize], checkSize = _f.checkSize, labelSize = _f.labelSize;
+    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;
     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: isChecked, disabled: isDisabled }),
+            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: isDisabled ? '#8C8CA6' : '#2f2f2f' } }, label)));
+        React.createElement("label", { htmlFor: id, className: "ml-2 leading-4 font-[350] ".concat(labelSize), style: { color: disabled ? '#8C8CA6' : '#2f2f2f' } }, label)));
 }
 Radio.defaultProps = {
     label: '',
-    inputSize: 'medium',
+    size: 'md',
     id: '',
     onClick: function () { },
-    isDisabled: false,
-    isChecked: false,
+    disabled: false,
+    checked: false,
 };
 
 var sizeConfig$7 = {
-    medium: {
+    md: {
         inputClass: 'text-size-base font-[350] min-h-10',
     },
-    small: {
+    sm: {
         inputClass: 'text-size-sm min-h-[30px]',
     },
 };
 
 function TextArea(_a) {
-    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, id = _a.id, _c = _a.inputSize, inputSize = _c === void 0 ? 'medium' : _c, label = _a.label, _d = _a.placeholder, placeholder = _d === void 0 ? '' : _d, required = _a.required, rows = _a.rows, props = __rest(_a, ["descText", "disabled", "id", "inputSize", "label", "placeholder", "required", "rows"]);
+    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[inputSize].inputClass;
+    var inputClass = sizeConfig$7[size].inputClass;
     return (React.createElement("div", { className: "field-group w-full flex flex-col" },
         React.createElement("label", { htmlFor: id, className: "label text-xs pb-2 font-semibold" },
             label,
@@ -1594,7 +1587,7 @@ TextArea.defaultProps = {
     disabled: false,
     descText: '',
     id: '',
-    inputSize: 'medium',
+    size: 'md',
     label: '',
     placeholder: 'Write here ...',
     required: false,
@@ -1602,22 +1595,22 @@ TextArea.defaultProps = {
 };
 
 var sizeConfig$6 = {
-    medium: {
+    md: {
         checkClass: 'w-[22px] h-[22px]',
         labelClass: 'text-size-base font-[350]',
     },
-    small: {
+    sm: {
         checkClass: 'w-4 h-4',
         labelClass: 'text-size-sm font-normal',
     },
 };
 
 function Checkbox(_a) {
-    var _b = _a.disabled, disabled = _b === void 0 ? false : _b, id = _a.id, _c = _a.inputSize, inputSize = _c === void 0 ? 'medium' : _c, _d = _a.isChecked, isChecked = _d === void 0 ? false : _d, label = _a.label, _e = _a.onChange, onChange = _e === void 0 ? function () { } : _e, value = _a.value;
-    var _f = sizeConfig$6[inputSize], checkClass = _f.checkClass, labelClass = _f.labelClass;
+    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;
     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: isChecked, onChange: function (e) { return onChange(e); }, disabled: disabled, value: value }),
+            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" })))),
@@ -1626,8 +1619,8 @@ function Checkbox(_a) {
 Checkbox.defaultProps = {
     disabled: false,
     id: '',
-    inputSize: 'medium',
-    isChecked: false,
+    size: 'md',
+    checked: false,
     label: '',
     onChange: function () { },
 };
@@ -1661,29 +1654,29 @@ function CheckboxSimulation(_a) {
     console.log('selected', selected);
     return (React.createElement("div", { className: "flex flex-col gap-y-5" },
         React.createElement("div", null, "Pick your hobby"),
-        optionsData.map(function (option) { return (React.createElement(Checkbox, { label: option.label, inputSize: size, id: String(option.id), value: option.id, onChange: function (e) { return handleChange(e, option.id); }, isChecked: selected.includes(option.id) })); })));
+        optionsData.map(function (option) { return (React.createElement(Checkbox, { label: option.label, size: size, id: String(option.id), value: option.id, onChange: function (e) { return handleChange(e, option.id); }, checked: selected.includes(option.id) })); })));
 }
 CheckboxSimulation.defaultProps = {
-    size: 'medium',
+    size: 'md',
 };
 
 var sizeConfig$5 = {
-    medium: {
+    md: {
         searchSize: 'text-size-base p-2.5 font-[350] h-10',
         iconSize: 'right-[10px]',
     },
-    small: {
+    sm: {
         searchSize: 'text-size-sm p-1.5 font-normal h-[30px]',
         iconSize: 'right-[7px]',
     },
 };
 
 var sizeConfig$4 = {
-    medium: {
+    md: {
         container: 'text-size-base font-[350] py-[3px] first:pt-[8px] last:pb-[8px]',
         item: 'min-h-[34px] p-2.5',
     },
-    small: {
+    sm: {
         container: 'text-size-sm font-normal py-[2px] first:pt-[7px] last:pb-[7px]',
         item: 'min-h-[26px] p-1.5',
     },
@@ -1691,7 +1684,7 @@ var sizeConfig$4 = {
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 function DefaultDropdownItem(_a) {
-    var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.label, label = _c === void 0 ? '' : _c, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d, _e = _a.size, size = _e === void 0 ? 'medium' : _e, isSelected = _a.isSelected, options = _a.options;
+    var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.label, label = _c === void 0 ? '' : _c, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d, _e = _a.size, size = _e === void 0 ? 'md' : _e, isSelected = _a.isSelected, options = _a.options;
     var _f = React.useState(false), isHovered = _f[0], setisHovered = _f[1];
     var _g = React.useState(false), isHoveredSubMenu = _g[0], setIsHoveredSubMenu = _g[1];
     var isOpenDropdown = isHovered || isHoveredSubMenu;
@@ -1708,16 +1701,16 @@ function DefaultDropdownItem(_a) {
 DefaultDropdownItem.defaultProps = {
     className: '',
     onClick: function () { },
-    size: 'medium',
+    size: 'md',
     options: [],
     isSelected: false,
 };
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 function SelectInput(_a) {
-    var descText = _a.descText, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, _c = _a.inputSize, inputSize = _c === void 0 ? 'medium' : _c, id = _a.id, label = _a.label, options = _a.options, _d = _a.isRequired, isRequired = _d === void 0 ? false : _d, selected = _a.selected, setSelected = _a.setSelected;
+    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, id = _a.id, label = _a.label, options = _a.options, _d = _a.required, required = _d === void 0 ? false : _d, selected = _a.selected, setSelected = _a.setSelected;
     var _e = React.useState(false), isOpen = _e[0], setIsOpen = _e[1];
-    var _f = sizeConfig$5[inputSize], searchSize = _f.searchSize, iconSize = _f.iconSize;
+    var _f = sizeConfig$5[size], searchSize = _f.searchSize, iconSize = _f.iconSize;
     var inputRef = React.useRef(null);
     var handleOutsideClick = function (e) {
         if (inputRef.current && !inputRef.current.contains(e.target)) {
@@ -1733,13 +1726,13 @@ 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,
-            isRequired && React.createElement("span", { className: "p-1 text-bia-red" }, "*")),
+            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: isDisabled }),
+            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: inputSize, isSelected: isSelected, onClick: function () {
+                return (React.createElement(DefaultDropdownItem, { label: option.label, size: size, isSelected: isSelected, onClick: function () {
                         setSelected(option);
                         setIsOpen(false);
                     } }));
@@ -1748,17 +1741,17 @@ function SelectInput(_a) {
 }
 SelectInput.defaultProps = {
     descText: '',
-    isDisabled: false,
+    disabled: false,
     id: '',
-    inputSize: 'medium',
+    size: 'md',
     label: '',
-    isRequired: false,
+    required: false,
     selected: {},
     setSelected: function () { },
 };
 
 function SelectInputSimulation(_a) {
-    var _b = _a.size, size = _b === void 0 ? 'medium' : _b;
+    var _b = _a.size, size = _b === void 0 ? 'md' : _b;
     var _c = React.useState({
         id: 1,
         label: 'Mohammed Salah',
@@ -1785,17 +1778,17 @@ function SelectInputSimulation(_a) {
             label: 'Ricardo Kaka',
         },
     ];
-    return (React.createElement(SelectInput, { label: "Input Select", descText: "Deskripsi Input Select", options: optionData, selected: selected, setSelected: setSelected, inputSize: size, id: "demo-id" }));
+    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 = {
-    medium: {
+    md: {
         iconClass: 'right-[10px]',
         iconSize: '18',
         inputClass: 'text-size-base placeholder:text-size-base px-2.5 h-10',
         optionClass: 'text-size-base px-2.5 py-[9.5px]',
     },
-    small: {
+    sm: {
         iconClass: 'right-[7px]',
         iconSize: '14',
         inputClass: 'text-size-sm placeholder:text-size-sm px-1.5 h-[30px]',
@@ -1805,9 +1798,9 @@ var sizeConfig$3 = {
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 function LiveSearch(_a) {
-    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, id = _a.id, _c = _a.inputSize, inputSize = _c === void 0 ? 'medium' : _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 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[inputSize], iconClass = _f.iconClass, iconSize = _f.iconSize, inputClass = _f.inputClass;
+    var _f = sizeConfig$3[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)) {
@@ -1833,7 +1826,7 @@ function LiveSearch(_a) {
                 React.createElement(TbZoom, { className: "text-primary-black", style: { fontSize: iconSize } })),
             isOpen && (React.createElement("div", { className: "absolute border w-full max-h-60 overflow-y-auto bg-primary-white border-grey-100 rounded-b-md shadow-lg" }, filteredOptions.map(function (option) {
                 var isSelected = value && value.id && option.id === value.id;
-                return (React.createElement(DefaultDropdownItem, { label: option.label, size: inputSize, isSelected: isSelected, onClick: function () {
+                return (React.createElement(DefaultDropdownItem, { label: option.label, size: size, isSelected: isSelected, onClick: function () {
                         setValue(option);
                         setIsOpen(false);
                     } }));
@@ -1844,7 +1837,7 @@ LiveSearch.defaultProps = {
     descText: '',
     disabled: false,
     id: '',
-    inputSize: 'medium',
+    size: 'md',
     label: '',
     placeholder: '',
     required: false,
@@ -1854,12 +1847,12 @@ LiveSearch.defaultProps = {
 };
 
 var sizeConfig$2 = {
-    medium: {
+    md: {
         containerSize: 'w-[42px] h-[22px]',
         checkSize: 'p-2',
         labelClass: 'text-bia-base',
     },
-    small: {
+    sm: {
         containerSize: 'w-[28px] h-[16px]',
         checkSize: 'px-2 py-1',
         labelClass: 'text-bia-sm',
@@ -1867,44 +1860,44 @@ var sizeConfig$2 = {
 };
 
 function Toggle(_a) {
-    var _b = _a.label, label = _b === void 0 ? '' : _b, _c = _a.inputSize, inputSize = _c === void 0 ? 'medium' : _c, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d, _e = _a.isChecked, isChecked = _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[inputSize], containerSize = _h.containerSize, checkSize = _h.checkSize, labelClass = _h.labelClass;
+    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;
     return (React.createElement("div", { className: "flex items-center" },
-        React.createElement("div", { className: "".concat(containerSize, " rounded-full py-[2px] flex flex-shrink-0 ").concat(isChecked ? 'justify-end' : 'justify-start', " items-center relative cursor-pointer"), onClick: onClick, onKeyDown: function () { }, role: "checkbox", tabIndex: 0, "aria-checked": isChecked },
-            React.createElement("input", { id: id, checked: isChecked, 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" }),
+        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" }),
             React.createElement("div", { className: "peer check-icon flex m-[2px] text-bia-grey group justify-center border-2 peer-checked:border-bia-blue border-primary-white peer-checked:hover:bg-primary-white peer-checked:bg-primary-white bg-bia-grey peer-checked:peer-hover:bg-primary-white peer-hover:bg-bia-blue-hover peer-disabled:bg-bia-grey-dark-10 peer-disabled:border-none peer-disabled:outline-none peer-disabled:peer-checked:bg-bia-blue-light-90 outline-2 rounded-full w-5/12 h-full z-10" })),
         React.createElement("label", { htmlFor: id, className: "ml-2 leading-4 font-normal text-grey-800 ".concat(labelClass), style: { color: disabled ? '#8C8CA6' : '' } }, label)));
 }
 Toggle.defaultProps = {
     label: '',
-    inputSize: 'medium',
+    size: 'md',
     onClick: function () { },
-    isChecked: false,
+    checked: false,
     id: '',
     disabled: false,
 };
 
-var isActiveConfig = {
-    active: 'bg-white text-black cursor-default',
-    nonactive: 'bg-bia-grey-light-50 text-bia-coolgrey hover:bg-bia-grey-light-80 hover:text-bia-coolgrey',
+var isSelectedConfig = {
+    selected: 'bg-white text-black cursor-default',
+    notSelected: 'bg-bia-grey-light-50 text-bia-coolgrey hover:bg-bia-grey-light-80 hover:text-bia-coolgrey',
 };
 var roundedConfig = {
-    large: 'first:rounded-l-radius-lg last:rounded-r-radius-lg ',
-    medium: 'first:rounded-l-radius-md last:rounded-r-radius-md',
-    small: 'first:rounded-l-radius-sm last:rounded-r-radius-lg',
-    tiny: 'first:rounded-l-radius-tn last:rounded-r-radius-tn',
+    lg: 'first:rounded-l-radius-lg last:rounded-r-radius-lg ',
+    md: 'first:rounded-l-radius-md last:rounded-r-radius-md',
+    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 = {
-    large: 'text-size-md leading-[23.94px] px-[13px] py-[10.5px]',
-    medium: 'text-size-base leading-[21px] px-[11px] py-[9px]',
-    small: 'text-size-sm leading-[15.96px] px-[7px] py-[5px]',
-    tiny: 'text-size-sm leading-[15.96px] px-[4px] py-[2px]',
+    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]',
+    tn: 'text-size-sm leading-[15.96px] px-[4px] py-[2px]',
 };
 
 function SegmentButtonItem(_a) {
-    var _b = _a.active, active = _b === void 0 ? false : _b, size = _a.size, children = _a.children, disabled = _a.disabled, onClick = _a.onClick;
-    var isActive = active ? 'active' : 'nonactive';
-    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(isActiveConfig[isActive], " ").concat(roundedConfig[size], " ").concat(sizeConfig$1[size]) }, children));
+    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));
 }
 
 function SegmentButtonGroup(_a) {
@@ -1918,33 +1911,33 @@ function SegmentButtonSimulation(_a) {
     var SegmentButtonArr = [
         {
             content: 'Segment Button A',
-            isDisabled: false,
+            disabled: false,
             handleClick: function (index) { return setActiveButton(index); },
         },
         {
             content: 'Segment Button B',
-            isDisabled: false,
+            disabled: false,
             handleClick: function (index) { return setActiveButton(index); },
         },
         {
             content: 'Segment Button C (Disabled)',
-            isDisabled: true,
+            disabled: true,
             handleClick: function (index) { return setActiveButton(index); },
         },
         {
             content: 'Segment Button D',
-            isDisabled: false,
+            disabled: false,
             handleClick: function (index) { return setActiveButton(index); },
         },
         {
             content: 'Segment Button E',
-            isDisabled: false,
+            disabled: false,
             handleClick: function (index) { return setActiveButton(index); },
         },
     ];
     return (React.createElement(SegmentButtonGroup, null, SegmentButtonArr.map(function (_a, index) {
-        var content = _a.content, isDisabled = _a.isDisabled, handleClick = _a.handleClick;
-        return (React.createElement(SegmentButtonItem, { active: activeButton === index, size: size, disabled: isDisabled, onClick: function () { return handleClick(index); } },
+        var content = _a.content, disabled = _a.disabled, handleClick = _a.handleClick;
+        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)),
@@ -1953,15 +1946,15 @@ function SegmentButtonSimulation(_a) {
 }
 
 function Modal(_a) {
-    var size = _a.size, title = _a.title, isShow = _a.isShow, setIsShow = _a.setIsShow, rest = __rest(_a, ["size", "title", "isShow", "setIsShow"]);
+    var size = _a.size, title = _a.title, open = _a.open, onClose = _a.onClose, rest = __rest(_a, ["size", "title", "open", "onClose"]);
     var modalSize;
-    if (size === 'small') {
+    if (size === 'sm') {
         modalSize = 'w-[300px]';
     }
-    else if (size === 'large') {
+    else if (size === 'lg') {
         modalSize = 'w-[800px]';
     }
-    else if (size === 'extra large') {
+    else if (size === 'xl') {
         modalSize = 'w-[1140px]';
     }
     else {
@@ -1969,19 +1962,17 @@ function Modal(_a) {
     }
     var handleClose = function (e) {
         if (e && e.target && e.target.id === 'wrapper') {
-            setIsShow(false);
+            onClose();
         }
     };
-    if (isShow) {
+    if (open) {
         return (
         // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
         React.createElement("div", { className: "fixed inset-0 flex justify-center items-center bg-bia-black-transparent-75", id: "wrapper", onClick: handleClose },
             React.createElement("div", { className: "modal flex flex-col gap-[20px] bg-white rounded-[5px] p-[20px] ".concat(modalSize) },
                 React.createElement("div", { className: "flex justify-between" },
                     React.createElement("div", { className: " font-humnst777 font-bold text-[18px] leading-[21.85px] text-primary-black w-[260px] text-wrap" }, title),
-                    React.createElement("button", { type: "button", title: "button", className: "w-[22px] h-[22px] rounded-radius-full flex items-center justify-center bg-bia-grey-light-50 hover:bg-bia-grey-light-30 cursor-pointer", onClick: function () {
-                            setIsShow(false);
-                        } },
+                    React.createElement("button", { type: "button", title: "button", className: "w-[22px] h-[22px] rounded-radius-full flex items-center justify-center bg-bia-grey-light-50 hover:bg-bia-grey-light-30 cursor-pointer", onClick: function () { return onClose(); } },
                         React.createElement(TbX, { className: "text-bia-coolgrey text-[14px]" }))),
                 React.createElement("div", { className: "flex flex-col gap-[20px]" }, rest.children))));
     }
@@ -1992,8 +1983,8 @@ Modal.defaultProps = {
 };
 
 var sizeConfig = {
-    medium: 'w-[38px] h-[40px] text-[14px] font-semibold',
-    small: 'w-[29px] h-[30px] mt-1 text-[12px] font-normal',
+    md: 'w-[38px] h-[40px] text-[14px] font-semibold',
+    sm: 'w-[29px] h-[30px] mt-1 text-[12px] font-normal',
 };
 var positionConfig = {
     start: 'justify-start',
@@ -2040,9 +2031,9 @@ 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: "medium", 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: "medium", type: "button", onClick: function () { return handlePageChange(page); }, className: "cursor-pointer  ".concat(sizeConfig[size]), label: page.toString() })); }),
-        React.createElement(Button, { variant: "subtle-link", size: "medium", type: "button", onClick: function () { return handlePageChange(currentPage + 1); }, className: "cursor-pointer", iconLeft: rightArrow })));
+        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() })); }),
+        React.createElement(Button, { variant: "subtle-link", size: "md", type: "button", onClick: function () { return handlePageChange(currentPage + 1); }, className: "cursor-pointer", iconLeft: rightArrow })));
 }
 
 var activeConfig = {
@@ -2101,21 +2092,21 @@ var classConfig$1 = {
 };
 
 function Popover(_a) {
-    var children = _a.children, content = _a.content, _b = _a.delay, delay = _b === void 0 ? 400 : _b, _c = _a.direction, direction = _c === void 0 ? 'bottom' : _c, _d = _a.title, title = _d === void 0 ? '' : _d, isActive = _a.isActive, setIsActive = _a.setIsActive;
+    var children = _a.children, content = _a.content, _b = _a.delay, delay = _b === void 0 ? 400 : _b, _c = _a.direction, direction = _c === void 0 ? 'bottom' : _c, _d = _a.title, title = _d === void 0 ? '' : _d, open = _a.open, setOpen = _a.setOpen;
     var timeout;
     var showPopover = function () {
         timeout = setTimeout(function () {
-            setIsActive(true);
+            setOpen(true);
         }, delay);
     };
     var hidePopover = function () {
         clearInterval(timeout);
-        setIsActive(false);
+        setOpen(false);
     };
     var _e = classConfig$1[direction], tooltipContainer = _e.tooltipContainer, triangleContainer = _e.triangleContainer, triangleShape = _e.triangleShape;
     return (React.createElement("div", { className: "Popover-Wrapper relative block w-fit h-fit", onMouseEnter: showPopover, onMouseLeave: hidePopover },
         children,
-        isActive && (React.createElement("div", { className: "Popover-Tip absolute px-[20px] py-[17.5px] text-bia-sm bg-primary-black text-primary-white z-50 rounded-[4px] w-[245px] space-y-[5px] ".concat(tooltipContainer) },
+        open && (React.createElement("div", { className: "Popover-Tip absolute px-[20px] py-[17.5px] text-bia-sm bg-primary-black text-primary-white z-50 rounded-[4px] w-[245px] space-y-[5px] ".concat(tooltipContainer) },
             React.createElement("div", { className: "flex flex-col" },
                 React.createElement("div", { className: "text-[16px] leading-[19.42px] mb-[5px] font-humnst777 font-bold" }, title),
                 React.createElement("div", { className: "text-[12px] font-segoe font-normal break-words" }, content)),
@@ -2275,18 +2266,18 @@ var configTab = {
         horizontal: 'w-full h-[1px] bg-bia-grey group-hover:bg-bia-blue-hover group-active:bg-bia-blue-active rounded-t-none -rotate-0',
         vertical: 'h-full  w-[1px] bg-bia-grey group-hover:bg-bia-blue-hover group-active:bg-bia-blue-active rounded-l-none ',
     },
-    small: {
+    sm: {
         text: 'text-[12px] leading-[15.96px] font-semibold',
         icon: 'text-[14px]',
     },
-    medium: {
+    md: {
         text: 'text-[14px] leading-[21px] font-semibold',
         icon: 'text-[18px]',
     },
 };
 
 function Tab(_a) {
-    var children = _a.children, active = _a.active, icon = _a.icon, disabled = _a.disabled, _b = _a.mode, mode = _b === void 0 ? 'horizontal' : _b, _c = _a.fit, fit = _c === void 0 ? 'fit-content' : _c, _d = _a.size, size = _d === void 0 ? 'medium' : _d, _e = _a.card, card = _e === void 0 ? false : _e, rest = __rest(_a, ["children", "active", "icon", "disabled", "mode", "fit", "size", "card"]);
+    var children = _a.children, active = _a.active, icon = _a.icon, disabled = _a.disabled, _b = _a.mode, mode = _b === void 0 ? 'horizontal' : _b, _c = _a.fit, fit = _c === void 0 ? 'fit-content' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, _e = _a.card, card = _e === void 0 ? false : _e, rest = __rest(_a, ["children", "active", "icon", "disabled", "mode", "fit", "size", "card"]);
     var disabledKeyTab = disabled || active ? ' pointer-events-none' : '';
     var cursor;
     var cardColor;
@@ -2311,7 +2302,7 @@ function Tab(_a) {
         : 'text-bia-coolgrey group-hover:text-bia-coolgrey-hover group-active:text-bia-coolgrey-active group-disabled:text-bia-coolgrey-disabled';
     return (React.createElement("div", { className: "".concat(mode === 'horizontal' ? 'h-full' : 'w-full', " ").concat(cursor) },
         React.createElement("button", __assign({ type: "button", disabled: disabled }, rest, { className: "flex -mb-[1px] justify-between items-stretch ".concat(card && cardColor, " ").concat(mode === 'horizontal' ? 'flex-col' : 'flex-row w-full', " group outline-none relative ").concat(disabledKeyTab, " ").concat(fit) }),
-            React.createElement("div", { className: "flex justify-center items-center ".concat(size === 'small' ? " pt-[10px] ".concat(mode === 'vertical' ? 'pb-[10px] pe-[30px]' : 'px-[30px] pb-[8px]') : "px-[30px] pt-[13px] ".concat(mode === 'vertical' ? 'pb-[13px]' : 'pb-[10px]', " ")) },
+            React.createElement("div", { className: "flex justify-center items-center ".concat(size === 'sm' ? " pt-[10px] ".concat(mode === 'vertical' ? 'pb-[10px] pe-[30px]' : 'px-[30px] pb-[8px]') : "px-[30px] pt-[13px] ".concat(mode === 'vertical' ? 'pb-[13px]' : 'pb-[10px]', " ")) },
                 React.createElement("div", { className: "flex  items-center justify-center " },
                     React.createElement("div", { className: "flex text-nowrap space-x-1 ".concat(activeKeyTab, " ").concat(configTab[size].text) },
                         icon && React.createElement("div", { className: "mr-[5px]" }, icon),
@@ -2322,7 +2313,7 @@ Tab.defaultProps = {
     children: null,
     mode: 'horizontal',
     fit: 'size-base',
-    size: 'medium',
+    size: 'md',
     icon: null,
     card: false,
 };
@@ -2333,22 +2324,22 @@ var colAlign = {
     left: 'justify-start',
 };
 var colSize = {
-    medium: 'px-2.5 py-[9px] text-bia-base font-[350]',
-    small: 'px-2.5 py-[7px] text-bia-sm',
-    tiny: 'px-2.5 py-[3px] text-bia-sm',
+    md: 'px-2.5 py-[9px] text-bia-base font-[350]',
+    sm: 'px-2.5 py-[7px] text-bia-sm',
+    tn: 'px-2.5 py-[3px] text-bia-sm',
 };
 var tableClass = {
-    medium: 'text-bia-base',
-    small: 'text-bia-sm',
-    tiny: 'text-bia-sm',
+    md: 'text-bia-base',
+    sm: 'text-bia-sm',
+    tn: 'text-bia-sm',
 };
 
 function Table(_a) {
-    var _b = _a.tableSize, tableSize = _b === void 0 ? 'medium' : _b, className = _a.className, children = _a.children;
+    var _b = _a.tableSize, tableSize = _b === void 0 ? 'md' : _b, className = _a.className, children = _a.children;
     return (React.createElement("table", { className: "table table-auto w-full font-['Segoe UI'] leading-[21px] rounded-[5px] ".concat(tableClass[tableSize], " ").concat(className, "}") }, children));
 }
 Table.defaultProps = {
-    tableSize: 'medium',
+    tableSize: 'md',
     className: '',
 };
 
@@ -2361,7 +2352,7 @@ TableRow.defaultProps = {
 };
 
 function TableCol(_a) {
-    var _b = _a.variant, variant = _b === void 0 ? 'body' : _b, _c = _a.lined, lined = _c === void 0 ? false : _c, _d = _a.alignment, alignment = _d === void 0 ? 'left' : _d, className = _a.className, children = _a.children, _e = _a.size, size = _e === void 0 ? 'medium' : _e;
+    var _b = _a.variant, variant = _b === void 0 ? 'body' : _b, _c = _a.lined, lined = _c === void 0 ? false : _c, _d = _a.alignment, alignment = _d === void 0 ? 'left' : _d, className = _a.className, children = _a.children, _e = _a.size, size = _e === void 0 ? 'md' : _e;
     var borderBottom = lined ? 'border-b border-bia-grey' : '';
     var defaultAlign = variant ? 'text-center' : 'text-left';
     var columnClass = "p-0 ".concat(borderBottom, " ").concat(className, " ").concat(colSize[size], " ").concat(alignment ? colAlign[alignment] : defaultAlign);
@@ -2376,7 +2367,7 @@ TableCol.defaultProps = {
     variant: 'body',
     lined: false,
     alignment: 'left',
-    size: 'medium',
+    size: 'md',
 };
 
 function TableHead(_a) {
@@ -2396,7 +2387,7 @@ TableBody.defaultProps = {
 };
 
 function TableDemo(_a) {
-    var _b = _a.tableSize, tableSize = _b === void 0 ? 'medium' : _b;
+    var _b = _a.tableSize, tableSize = _b === void 0 ? 'md' : _b;
     return (React.createElement(Table, { tableSize: tableSize },
         React.createElement("thead", null,
             React.createElement(TableRow, null,
@@ -2416,7 +2407,7 @@ function TableDemo(_a) {
                 React.createElement(TableCol, { size: tableSize }, "Street Avenue no. 29")))));
 }
 TableDemo.defaultProps = {
-    tableSize: 'medium',
+    tableSize: 'md',
 };
 
 function TbCheck() {
@@ -2477,7 +2468,7 @@ function TbCloseable(_a) {
 
 var TagLabelConfig = {
     default: {
-        medium: {
+        md: {
             iconColor: 'text-white',
             XColor: 'text-bia-coolgrey',
             XcolorV: 'text-primary-black',
@@ -2503,7 +2494,7 @@ var TagLabelConfig = {
                 Xicon: TbCheckBlack,
             },
         },
-        small: {
+        sm: {
             iconColor: 'text-white',
             XColor: 'text-bia-coolgrey',
             XcolorV: 'text-primary-black',
@@ -2529,7 +2520,7 @@ var TagLabelConfig = {
                 Xicon: TbCheckBlackSmall,
             },
         },
-        tiny: {
+        tn: {
             iconColor: 'text-white',
             XColor: 'text-bia-coolgrey',
             XcolorV: 'text-primary-black',
@@ -2557,7 +2548,7 @@ var TagLabelConfig = {
         },
     },
     blue: {
-        medium: {
+        md: {
             iconColor: 'text-bia-blue',
             XColor: 'text-bia-blue-light-50',
             XcolorV: 'text-white',
@@ -2583,7 +2574,7 @@ var TagLabelConfig = {
                 Xicon: TbCheck,
             },
         },
-        small: {
+        sm: {
             iconColor: 'text-bia-blue',
             XColor: 'text-white',
             XcolorV: 'text-white',
@@ -2609,7 +2600,7 @@ var TagLabelConfig = {
                 Xicon: TbCheckWhiteSmall,
             },
         },
-        tiny: {
+        tn: {
             iconColor: 'text-bia-blue',
             XColor: 'text-white',
             XcolorV: 'text-white',
@@ -2637,7 +2628,7 @@ var TagLabelConfig = {
         },
     },
     teal: {
-        medium: {
+        md: {
             iconColor: 'text-bia-teal',
             XColor: 'text-bia-teal-light-50',
             XcolorV: 'text-white',
@@ -2663,7 +2654,7 @@ var TagLabelConfig = {
                 Xicon: TbCheck,
             },
         },
-        small: {
+        sm: {
             iconColor: 'text-bia-teal',
             XColor: 'text-white',
             XcolorV: 'text-white',
@@ -2689,7 +2680,7 @@ var TagLabelConfig = {
                 Xicon: TbCheckWhiteSmall,
             },
         },
-        tiny: {
+        tn: {
             iconColor: 'text-bia-teal',
             XColor: 'text-white',
             XcolorV: 'text-white',
@@ -2717,7 +2708,7 @@ var TagLabelConfig = {
         },
     },
     green: {
-        medium: {
+        md: {
             iconColor: 'text-bia-green',
             XColor: 'text-bia-green-light-50',
             XcolorV: 'text-white',
@@ -2743,7 +2734,7 @@ var TagLabelConfig = {
                 Xicon: TbCheck,
             },
         },
-        small: {
+        sm: {
             iconColor: 'text-bia-green',
             XColor: 'text-white',
             XcolorV: 'text-white',
@@ -2769,7 +2760,7 @@ var TagLabelConfig = {
                 Xicon: TbCheckWhiteSmall,
             },
         },
-        tiny: {
+        tn: {
             iconColor: 'text-bia-green',
             XColor: 'text-white',
             XcolorV: 'text-white',
@@ -2797,7 +2788,7 @@ var TagLabelConfig = {
         },
     },
     yellow: {
-        medium: {
+        md: {
             iconColor: 'text-bia-orange',
             XColor: 'text-bia-orange-light-50',
             XcolorV: 'text-white',
@@ -2823,7 +2814,7 @@ var TagLabelConfig = {
                 Xicon: TbCheck,
             },
         },
-        small: {
+        sm: {
             iconColor: 'text-bia-orange',
             XColor: 'text-white',
             XcolorV: 'text-white',
@@ -2849,7 +2840,7 @@ var TagLabelConfig = {
                 Xicon: TbCheckWhiteSmall,
             },
         },
-        tiny: {
+        tn: {
             iconColor: 'text-bia-orange',
             XColor: 'text-white',
             XcolorV: 'text-white',
@@ -2877,7 +2868,7 @@ var TagLabelConfig = {
         },
     },
     red: {
-        medium: {
+        md: {
             iconColor: 'text-bia-red',
             XColor: 'text-bia-red-light-50',
             XcolorV: 'text-white',
@@ -2903,7 +2894,7 @@ var TagLabelConfig = {
                 Xicon: TbCheck,
             },
         },
-        small: {
+        sm: {
             iconColor: 'text-bia-red',
             XColor: 'text-white',
             XcolorV: 'text-white',
@@ -2929,7 +2920,7 @@ var TagLabelConfig = {
                 Xicon: TbCheckWhiteSmall,
             },
         },
-        tiny: {
+        tn: {
             iconColor: 'text-bia-red',
             XColor: 'text-white',
             XcolorV: 'text-white',
@@ -2957,7 +2948,7 @@ var TagLabelConfig = {
         },
     },
     black: {
-        medium: {
+        md: {
             iconColor: 'text-[#2f2f2f]',
             XColor: 'text-bia-coolgrey',
             XcolorV: 'text-white',
@@ -2983,7 +2974,7 @@ var TagLabelConfig = {
                 Xicon: TbCheck,
             },
         },
-        small: {
+        sm: {
             iconColor: 'text-[#2f2f2f]',
             XColor: 'text-white',
             XcolorV: 'text-white',
@@ -3009,7 +3000,7 @@ var TagLabelConfig = {
                 Xicon: TbCheckWhiteSmall,
             },
         },
-        tiny: {
+        tn: {
             iconColor: 'text-[#2f2f2f]',
             XColor: 'text-white',
             XcolorV: 'text-white',
@@ -3037,7 +3028,7 @@ var TagLabelConfig = {
         },
     },
     white: {
-        medium: {
+        md: {
             iconColor: 'text-white',
             XColor: 'text-bia-grey-dark-30 group-focus:outline-2',
             XcolorV: 'text-primary-black',
@@ -3063,7 +3054,7 @@ var TagLabelConfig = {
                 Xicon: TbCheckBlack,
             },
         },
-        small: {
+        sm: {
             iconColor: 'text-white',
             XColor: 'text-bia-grey-dark-30 group-focus:outline-2',
             XcolorV: 'text-primary-black',
@@ -3089,7 +3080,7 @@ var TagLabelConfig = {
                 Xicon: TbCheckBlackSmall,
             },
         },
-        tiny: {
+        tn: {
             iconColor: 'text-white',
             XColor: 'text-bia-grey-dark-30 group-focus:outline-2',
             XcolorV: 'text-primary-black',
@@ -3119,12 +3110,12 @@ var TagLabelConfig = {
 };
 
 function CloseIcon(_a) {
-    var _b = _a.size, size = _b === void 0 ? 'medium' : _b;
+    var _b = _a.size, size = _b === void 0 ? 'md' : _b;
     var iconSize;
-    if (size === 'tiny') {
+    if (size === 'tn') {
         iconSize = '10';
     }
-    else if (size === 'small') {
+    else if (size === 'sm') {
         iconSize = '10';
     }
     else {
@@ -3136,11 +3127,11 @@ function CloseIcon(_a) {
         React.createElement("path", { d: "M6 6l12 12" })));
 }
 CloseIcon.defaultProps = {
-    size: 'medium',
+    size: 'md',
 };
 
 function TagLabel(_a) {
-    var children = _a.children, _b = _a.closeHandler, closeHandler = _b === void 0 ? undefined : _b, _c = _a.size, size = _c === void 0 ? 'small' : _c, _d = _a.variant, variant = _d === void 0 ? 'label' : _d, isShow = _a.isShow, color = _a.color, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon;
+    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;
@@ -3152,9 +3143,9 @@ function TagLabel(_a) {
     var configXcolorV = configIcon.XcolorV;
     var iconColor = configIcon.iconColor;
     var IconContainer = {
-        small: 'h-[14px] w-[14px]',
-        tiny: 'h-[14px] w-[14px]',
-        medium: 'h-[20px] w-[20px]',
+        sm: 'h-[14px] w-[14px]',
+        tn: 'h-[14px] w-[14px]',
+        md: 'h-[20px] w-[20px]',
     };
     var renderIcon = function (icon) {
         if (typeof icon === 'string') {
@@ -3162,10 +3153,10 @@ function TagLabel(_a) {
         }
         var IconComponent = icon;
         var textSize;
-        if (size === 'medium') {
+        if (size === 'md') {
             textSize = 'text-[20px]';
         }
-        else if (size === 'small' || size === 'tiny') {
+        else if (size === 'sm' || size === 'tn') {
             textSize = 'text-[14px]';
         }
         else {
@@ -3199,7 +3190,7 @@ function TagLabel(_a) {
     // const closeableMode = variant === 'closeable';
     // const iconMode = variant === 'icon';
     var closeButtonException;
-    if (size === 'medium') {
+    if (size === 'md') {
         closeButtonException = '-mr-[2px]';
     }
     else {
@@ -3212,20 +3203,20 @@ function TagLabel(_a) {
     else {
         outlineColor = 'outline-white';
     }
-    if (!isShow)
+    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 === 'medium' && 'min-h-[20px] px-[5px]', " ").concat(size === 'small' && 'min-h-[18px] px-[3px]', " ").concat(size === 'tiny' && 'min-h-[14px] px-[3px] -mt-[2px]') }, children))),
+            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 === 'tiny' ? 'p-[1px]' : 'p-[2px]', " ").concat(outlineColor, " ").concat(iconColor, " ").concat(color === 'white' || color === 'default' ? 'bg-black/[.3]' : 'bg-white/[.5]', " focus:outline ").concat(size === 'tiny' ? 'outline-[1.5px]' : 'outline-[2px]', " ").concat(closeButtonException, " rounded-full group"), onClick: function () { return closeHandler(); } },
+        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: 'small',
-    isShow: true,
+    size: 'sm',
+    open: true,
     closeHandler: function () { },
     rightIcon: null,
     leftIcon: null,