bianic-ui 0.5.17 → 0.5.18

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 = {
@@ -1352,15 +1347,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 +1424,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,
@@ -1480,10 +1475,10 @@ 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.isDisabled, isDisabled = _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';
@@ -1520,7 +1515,7 @@ TextInput.defaultProps = {
     isDisabled: false,
     icon: null,
     id: '',
-    inputSize: 'medium',
+    size: 'md',
     isValid: null,
     label: '',
     placeholder: '',
@@ -1533,55 +1528,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.isDisabled, isDisabled = _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: isDisabled }),
             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)));
 }
 Radio.defaultProps = {
     label: '',
-    inputSize: 'medium',
+    size: 'md',
     id: '',
     onClick: function () { },
     isDisabled: false,
-    isChecked: 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 +1589,7 @@ TextArea.defaultProps = {
     disabled: false,
     descText: '',
     id: '',
-    inputSize: 'medium',
+    size: 'md',
     label: '',
     placeholder: 'Write here ...',
     required: false,
@@ -1602,22 +1597,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 +1621,8 @@ function Checkbox(_a) {
 Checkbox.defaultProps = {
     disabled: false,
     id: '',
-    inputSize: 'medium',
-    isChecked: false,
+    size: 'md',
+    checked: false,
     label: '',
     onChange: function () { },
 };
@@ -1661,29 +1656,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 +1686,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 +1703,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.isDisabled, isDisabled = _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.isRequired, isRequired = _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)) {
@@ -1739,7 +1734,7 @@ function SelectInput(_a) {
             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);
                     } }));
@@ -1750,7 +1745,7 @@ SelectInput.defaultProps = {
     descText: '',
     isDisabled: false,
     id: '',
-    inputSize: 'medium',
+    size: 'md',
     label: '',
     isRequired: false,
     selected: {},
@@ -1758,7 +1753,7 @@ SelectInput.defaultProps = {
 };
 
 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 +1780,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 +1800,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 +1828,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 +1839,7 @@ LiveSearch.defaultProps = {
     descText: '',
     disabled: false,
     id: '',
-    inputSize: 'medium',
+    size: 'md',
     label: '',
     placeholder: '',
     required: false,
@@ -1854,12 +1849,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 +1862,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) {
@@ -1955,13 +1950,13 @@ 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 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 {
@@ -1992,8 +1987,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 +2035,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,7 +2096,7 @@ 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, setIsActive = _a.setIsActive;
     var timeout;
     var showPopover = function () {
         timeout = setTimeout(function () {
@@ -2115,7 +2110,7 @@ function Popover(_a) {
     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 +2270,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 +2306,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 +2317,7 @@ Tab.defaultProps = {
     children: null,
     mode: 'horizontal',
     fit: 'size-base',
-    size: 'medium',
+    size: 'md',
     icon: null,
     card: false,
 };
@@ -2333,22 +2328,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 +2356,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 +2371,7 @@ TableCol.defaultProps = {
     variant: 'body',
     lined: false,
     alignment: 'left',
-    size: 'medium',
+    size: 'md',
 };
 
 function TableHead(_a) {
@@ -2396,7 +2391,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 +2411,7 @@ function TableDemo(_a) {
                 React.createElement(TableCol, { size: tableSize }, "Street Avenue no. 29")))));
 }
 TableDemo.defaultProps = {
-    tableSize: 'medium',
+    tableSize: 'md',
 };
 
 function TbCheck() {
@@ -2477,7 +2472,7 @@ function TbCloseable(_a) {
 
 var TagLabelConfig = {
     default: {
-        medium: {
+        md: {
             iconColor: 'text-white',
             XColor: 'text-bia-coolgrey',
             XcolorV: 'text-primary-black',
@@ -2503,7 +2498,7 @@ var TagLabelConfig = {
                 Xicon: TbCheckBlack,
             },
         },
-        small: {
+        sm: {
             iconColor: 'text-white',
             XColor: 'text-bia-coolgrey',
             XcolorV: 'text-primary-black',
@@ -2529,7 +2524,7 @@ var TagLabelConfig = {
                 Xicon: TbCheckBlackSmall,
             },
         },
-        tiny: {
+        tn: {
             iconColor: 'text-white',
             XColor: 'text-bia-coolgrey',
             XcolorV: 'text-primary-black',
@@ -2557,7 +2552,7 @@ var TagLabelConfig = {
         },
     },
     blue: {
-        medium: {
+        md: {
             iconColor: 'text-bia-blue',
             XColor: 'text-bia-blue-light-50',
             XcolorV: 'text-white',
@@ -2583,7 +2578,7 @@ var TagLabelConfig = {
                 Xicon: TbCheck,
             },
         },
-        small: {
+        sm: {
             iconColor: 'text-bia-blue',
             XColor: 'text-white',
             XcolorV: 'text-white',
@@ -2609,7 +2604,7 @@ var TagLabelConfig = {
                 Xicon: TbCheckWhiteSmall,
             },
         },
-        tiny: {
+        tn: {
             iconColor: 'text-bia-blue',
             XColor: 'text-white',
             XcolorV: 'text-white',
@@ -2637,7 +2632,7 @@ var TagLabelConfig = {
         },
     },
     teal: {
-        medium: {
+        md: {
             iconColor: 'text-bia-teal',
             XColor: 'text-bia-teal-light-50',
             XcolorV: 'text-white',
@@ -2663,7 +2658,7 @@ var TagLabelConfig = {
                 Xicon: TbCheck,
             },
         },
-        small: {
+        sm: {
             iconColor: 'text-bia-teal',
             XColor: 'text-white',
             XcolorV: 'text-white',
@@ -2689,7 +2684,7 @@ var TagLabelConfig = {
                 Xicon: TbCheckWhiteSmall,
             },
         },
-        tiny: {
+        tn: {
             iconColor: 'text-bia-teal',
             XColor: 'text-white',
             XcolorV: 'text-white',
@@ -2717,7 +2712,7 @@ var TagLabelConfig = {
         },
     },
     green: {
-        medium: {
+        md: {
             iconColor: 'text-bia-green',
             XColor: 'text-bia-green-light-50',
             XcolorV: 'text-white',
@@ -2743,7 +2738,7 @@ var TagLabelConfig = {
                 Xicon: TbCheck,
             },
         },
-        small: {
+        sm: {
             iconColor: 'text-bia-green',
             XColor: 'text-white',
             XcolorV: 'text-white',
@@ -2769,7 +2764,7 @@ var TagLabelConfig = {
                 Xicon: TbCheckWhiteSmall,
             },
         },
-        tiny: {
+        tn: {
             iconColor: 'text-bia-green',
             XColor: 'text-white',
             XcolorV: 'text-white',
@@ -2797,7 +2792,7 @@ var TagLabelConfig = {
         },
     },
     yellow: {
-        medium: {
+        md: {
             iconColor: 'text-bia-orange',
             XColor: 'text-bia-orange-light-50',
             XcolorV: 'text-white',
@@ -2823,7 +2818,7 @@ var TagLabelConfig = {
                 Xicon: TbCheck,
             },
         },
-        small: {
+        sm: {
             iconColor: 'text-bia-orange',
             XColor: 'text-white',
             XcolorV: 'text-white',
@@ -2849,7 +2844,7 @@ var TagLabelConfig = {
                 Xicon: TbCheckWhiteSmall,
             },
         },
-        tiny: {
+        tn: {
             iconColor: 'text-bia-orange',
             XColor: 'text-white',
             XcolorV: 'text-white',
@@ -2877,7 +2872,7 @@ var TagLabelConfig = {
         },
     },
     red: {
-        medium: {
+        md: {
             iconColor: 'text-bia-red',
             XColor: 'text-bia-red-light-50',
             XcolorV: 'text-white',
@@ -2903,7 +2898,7 @@ var TagLabelConfig = {
                 Xicon: TbCheck,
             },
         },
-        small: {
+        sm: {
             iconColor: 'text-bia-red',
             XColor: 'text-white',
             XcolorV: 'text-white',
@@ -2929,7 +2924,7 @@ var TagLabelConfig = {
                 Xicon: TbCheckWhiteSmall,
             },
         },
-        tiny: {
+        tn: {
             iconColor: 'text-bia-red',
             XColor: 'text-white',
             XcolorV: 'text-white',
@@ -2957,7 +2952,7 @@ var TagLabelConfig = {
         },
     },
     black: {
-        medium: {
+        md: {
             iconColor: 'text-[#2f2f2f]',
             XColor: 'text-bia-coolgrey',
             XcolorV: 'text-white',
@@ -2983,7 +2978,7 @@ var TagLabelConfig = {
                 Xicon: TbCheck,
             },
         },
-        small: {
+        sm: {
             iconColor: 'text-[#2f2f2f]',
             XColor: 'text-white',
             XcolorV: 'text-white',
@@ -3009,7 +3004,7 @@ var TagLabelConfig = {
                 Xicon: TbCheckWhiteSmall,
             },
         },
-        tiny: {
+        tn: {
             iconColor: 'text-[#2f2f2f]',
             XColor: 'text-white',
             XcolorV: 'text-white',
@@ -3037,7 +3032,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 +3058,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 +3084,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 +3114,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 +3131,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, isShow = _a.isShow, 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 +3147,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 +3157,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 +3194,7 @@ function TagLabel(_a) {
     // const closeableMode = variant === 'closeable';
     // const iconMode = variant === 'icon';
     var closeButtonException;
-    if (size === 'medium') {
+    if (size === 'md') {
         closeButtonException = '-mr-[2px]';
     }
     else {
@@ -3217,14 +3212,14 @@ function TagLabel(_a) {
     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',
+    size: 'sm',
     isShow: true,
     closeHandler: function () { },
     rightIcon: null,