bianic-ui 0.5.18 → 1.0.0-beta.10

package/dist/cjs/index.js

@@ -246,9 +246,39 @@ var textClasses = {
     'tiny-text-bold': 'text-size-tiny font-bold font-["Arial"]',
 };
 
+var childrenElement = function (element) {
+    if (element === undefined)
+        return '';
+    if (typeof element === 'object')
+        return '';
+    return element;
+};
+var validUnion = function (value, union) {
+    return union.includes(value) ? value : union[0];
+};
+
+var variantUnion$2 = [
+    'large-text',
+    'large-text-semibold',
+    'medium-text',
+    'medium-text-semibold',
+    'caption',
+    'caption-semibold',
+    'normal-text',
+    'normal-text-semilight',
+    'normal-text-semibold',
+    'normal-text-bold',
+    'small-text',
+    'small-text-semibold',
+    'tiny-text',
+    'tiny-text-bold',
+    'script',
+    'link',
+];
 function Text(_a) {
     var _b = _a.extended, extended = _b === void 0 ? '' : _b, variant = _a.variant, children = _a.children;
-    return (React.createElement("span", { className: "text ".concat(textClasses[variant], " ").concat(extended) }, children));
+    var validatedVariant = validUnion(variant, variantUnion$2);
+    return (React.createElement("span", { className: "text ".concat(textClasses[validatedVariant], " ").concat(extended) }, childrenElement(children)));
 }
 Text.defaultProps = {
     extended: '',
@@ -380,12 +410,38 @@ var variantConfig$1 = {
     'danger-outlined': "\n  text-bia-red \n  border-solid \n  border \n  border-bia-red \n  bg-primary-white \n  active:text-bia-red-dark-10 \n  active:border-bia-red-active \n  active:bg-bia-red-light-90 \n  active:border-bia-red-disabled \n  hover:text-bia-red-hover \n  hover:border-bia-red-hover \n  disabled:cursor-not-allowed \n  disabled:border-[1px]\n  disabled:border-bia-red-light-50 \n  disabled:text-bia-red-light-50\n  focus-visible:outline-none \n  focus-visible:outline-offset-0 \n  focus-visible:outline-[3px] \n  focus-visible:rounded-md \n  focus-visible:outline-bia-red-light-50 \n  focus-visible:border-none \n  \n  ",
 };
 
+var variantUnion$1 = [
+    'default',
+    'danger',
+    'info',
+    'link',
+    'primary',
+    'subtle',
+    'subtle-link',
+    'success',
+    'warning',
+    'default-outlined',
+    'danger-outlined',
+    'info-outlined',
+    'primary-outlined',
+    'success-outlined',
+    'warning-outlined',
+];
+var radiusUnion = ['default', 'full-rounded'];
+var sizeUnion$4 = ['md', 'lg', 'sm', 'tn'];
 function Button(_a) {
     var label = _a.label, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.radius, radius = _d === void 0 ? 'default' : _d, _e = _a.size, size = _e === void 0 ? 'md' : _e, _f = _a.variant, variant = _f === void 0 ? 'default' : _f, _g = _a.iconLeft, iconLeft = _g === void 0 ? null : _g, _h = _a.iconRight, iconRight = _h === void 0 ? null : _h, props = __rest(_a, ["label", "className", "disabled", "radius", "size", "variant", "iconLeft", "iconRight"]);
-    return (React.createElement("button", __assign({ type: "button", className: "button flex justify-center items-center ".concat(variantConfig$1[variant], " ").concat(label ? sizeConfig$a[size] : iconOnlySizeConfig[size], " ").concat(radiusConfig[radius][size], " ").concat(className), disabled: disabled }, props),
-        iconLeft,
-        label,
-        iconRight));
+    var validatedVariant = validUnion(variant, variantUnion$1);
+    var validatedSize = validUnion(size, sizeUnion$4);
+    var validatedRadius = validUnion(radius, radiusUnion);
+    var sizeClass = label
+        ? sizeConfig$a[validatedSize]
+        : iconOnlySizeConfig[validatedSize];
+    var classString = "\n    ".concat(variantConfig$1[validatedVariant], " \n    ").concat(sizeClass, " \n    ").concat(radiusConfig[validatedRadius][validatedSize], " \n    ").concat(className, "\n  ");
+    return (React.createElement("button", __assign({ type: "button", className: "button flex justify-center items-center ".concat(classString), disabled: disabled }, props),
+        childrenElement(iconLeft),
+        childrenElement(label),
+        childrenElement(iconRight)));
 }
 Button.defaultProps = {
     label: null,
@@ -529,19 +585,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',
 };
 
@@ -1463,8 +1517,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,
@@ -1475,7 +1529,7 @@ 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.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 descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, icon = _a.icon, _c = _a.id, id = _c === void 0 ? '' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, _e = _a.isValid, isValid = _e === void 0 ? false : _e, label = _a.label, _f = _a.placeholder, placeholder = _f === void 0 ? '' : _f, _g = _a.readOnly, readOnly = _g === void 0 ? false : _g, _h = _a.required, required = _h === void 0 ? false : _h, _j = _a.variant, variant = _j === void 0 ? 'text' : _j, _k = _a.value, value = _k === void 0 ? '' : _k, _l = _a.onChange, onChange = _l === void 0 ? function () { } : _l;
     var _m = React.useState(false), isShow = _m[0], setIsShow = _m[1];
     var _o = styleConfig[variant], fieldStyle = _o.fieldStyle, iconStyle = _o.iconStyle;
     var _p = sizeConfig$9[size], iconSize = _p.iconSize, fieldSize = _p.fieldSize, iconPosition = _p.iconPosition;
@@ -1484,35 +1538,35 @@ function TextInput(_a) {
         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: '',
     size: 'md',
@@ -1546,21 +1600,23 @@ var sizeConfig$8 = {
     },
 };
 
+var sizeUnion$3 = ['md', 'sm'];
 function Radio(_a) {
-    var label = _a.label, _b = _a.size, size = _b === void 0 ? 'md' : _b, id = _a.id, _c = _a.onClick, onClick = _c === void 0 ? function () { } : _c, _d = _a.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;
+    var label = _a.label, _b = _a.size, size = _b === void 0 ? 'md' : _b, id = _a.id, _c = _a.onClick, onClick = _c === void 0 ? function () { } : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.checked, checked = _e === void 0 ? false : _e;
+    var validatedSize = validUnion(size, sizeUnion$3);
+    var _f = sizeConfig$8[validatedSize], checkSize = _f.checkSize, labelSize = _f.labelSize;
     return (React.createElement("div", { className: "flex items-center" },
         React.createElement("div", { className: "bg-white rounded-full flex flex-shrink-0 justify-center items-center relative ".concat(checkSize) },
-            React.createElement("input", { id: id, "aria-labelledby": "label1", type: "radio", className: "peer checkbox box-content appearance-none focus:opacity-100 focus:ring-1 focus:ring-offset-2 checked:disabled:border-bia-blue-disabled focus:ring-bia-blue focus:outline-none rounded-full border-bia-coolgrey-light-50 checked:border-bia-blue hover:border-bia-blue-hover disabled:border-bia-grey-dark-10 border-2 absolute cursor-pointer w-full h-full", onClick: function (e) { return onClick(e); }, checked: checked, disabled: 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' } }, childrenElement(label))));
 }
 Radio.defaultProps = {
     label: '',
     size: 'md',
     id: '',
     onClick: function () { },
-    isDisabled: false,
+    disabled: false,
     checked: false,
 };
 
@@ -1607,16 +1663,17 @@ var sizeConfig$6 = {
     },
 };
 
+var sizeUnion$2 = ['md', 'sm'];
 function Checkbox(_a) {
     var _b = _a.disabled, disabled = _b === void 0 ? false : _b, id = _a.id, _c = _a.size, size = _c === void 0 ? 'md' : _c, _d = _a.checked, checked = _d === void 0 ? false : _d, label = _a.label, _e = _a.onChange, onChange = _e === void 0 ? function () { } : _e, value = _a.value;
-    var _f = sizeConfig$6[size], checkClass = _f.checkClass, labelClass = _f.labelClass;
+    var _f = sizeConfig$6[validUnion(size, sizeUnion$2)], checkClass = _f.checkClass, labelClass = _f.labelClass;
     return (React.createElement("div", { className: "flex items-center" },
         React.createElement("div", { className: "bg-white rounded-full flex flex-shrink-0 justify-center items-center relative ".concat(checkClass) },
             React.createElement("input", { id: id, type: "checkbox", className: "peer checkbox box-content appearance-none focus-visible:opacity-100 focus-visible:ring-1 focus-visible:ring-offset-2 focus-visible:ring-bia-blue focus-visible:outline-none rounded-full border-bia-coolgrey-light-50 checked:border-bia-blue disabled:border-bia-coolgrey-light-50 hover:border-bia-blue-hover disabled:checked:border-bia-blue-light-50 border-2 absolute cursor-pointer w-full h-full", checked: checked, onChange: function (e) { return onChange(e); }, disabled: disabled, value: value }),
             React.createElement("div", { className: "check-icon flex text-bia-grey group justify-center peer-checked:border-2 peer-checked:border-primary-white peer-checked:hover:border-bia-blue-hover peer-checked:bg-bia-blue peer-checked:peer-hover:bg-bia-blue-hover outline-2 peer-checked:hover:outline-bia-blue-hover outline-bia-blue peer-disabled:bg-bia-grey-light-80 peer-disabled:peer-checked:outline-bia-blue-light-50 peer-disabled:peer-checked:bg-bia-blue-light-50 rounded-full w-full h-full z-1" },
                 React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: " fill-bia-grey-dark-10 peer-checked:group-[]:fill-primary-white peer-checked:peer-hover:group-[]:fill-primary-white peer-hover:group-[]:fill-bia-blue-hover peer-disabled:group-[]:fill-bia-grey-dark-10 peer-disabled:peer-checked:group-[]:fill-primary-white", viewBox: "-5 -7 24 24", width: "24" },
                     React.createElement("path", { d: "M5.486 9.73a.997.997 0 0 1-.707-.292L.537 5.195A1 1 0 1 1 1.95 3.78l3.535 3.535L11.85.952a1 1 0 0 1 1.415 1.414L6.193 9.438a.997.997 0 0 1-.707.292z" })))),
-        React.createElement("label", { htmlFor: id, className: "ml-2 leading-4 text-grey-800 ".concat(labelClass), style: { color: disabled ? '#8C8CA6' : '' } }, label)));
+        React.createElement("label", { htmlFor: id, className: "ml-2 leading-4 text-grey-800 ".concat(labelClass), style: { color: disabled ? '#8C8CA6' : '' } }, childrenElement(label))));
 }
 Checkbox.defaultProps = {
     disabled: false,
@@ -1709,10 +1766,12 @@ DefaultDropdownItem.defaultProps = {
 };
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
+var sizeUnion$1 = ['md', 'sm'];
 function SelectInput(_a) {
-    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 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[size], searchSize = _f.searchSize, iconSize = _f.iconSize;
+    var validatedSize = validUnion(size, sizeUnion$1);
+    var _f = sizeConfig$5[validatedSize], searchSize = _f.searchSize, iconSize = _f.iconSize;
     var inputRef = React.useRef(null);
     var handleOutsideClick = function (e) {
         if (inputRef.current && !inputRef.current.contains(e.target)) {
@@ -1727,14 +1786,14 @@ function SelectInput(_a) {
     });
     return (React.createElement("div", { className: "field-group w-full flex flex-col", ref: inputRef },
         React.createElement("label", { htmlFor: id, className: "label text-xs pb-2 font-semibold" },
-            label,
-            isRequired && React.createElement("span", { className: "p-1 text-bia-red" }, "*")),
+            childrenElement(label),
+            required && React.createElement("span", { className: "p-1 text-bia-red" }, "*")),
         React.createElement("div", { className: "group w-full relative" },
-            React.createElement("input", { className: "field bg-primary-white disabled:bg-bia-grey-light-80 pe-8 w-full border border-bia-grey-dark-10 enabled:hover:border-b-bia-blue enabled:hover:rounded-b-none enabled:focus:border-b-bia-blue enabled:focus:rounded-b-none focus-visible:outline-none cursor-pointer rounded disabled:text-bia-coolgrey peer ".concat(searchSize), onClick: function () { return setIsOpen(!isOpen); }, value: selected === null || selected === void 0 ? void 0 : selected.label, readOnly: true, id: id, disabled: 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: size, isSelected: isSelected, onClick: function () {
+                return (React.createElement(DefaultDropdownItem, { label: option.label, size: validatedSize, isSelected: isSelected, onClick: function () {
                         setSelected(option);
                         setIsOpen(false);
                     } }));
@@ -1743,11 +1802,11 @@ function SelectInput(_a) {
 }
 SelectInput.defaultProps = {
     descText: '',
-    isDisabled: false,
+    disabled: false,
     id: '',
     size: 'md',
     label: '',
-    isRequired: false,
+    required: false,
     selected: {},
     setSelected: function () { },
 };
@@ -1913,33 +1972,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)),
@@ -1948,7 +2007,7 @@ 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 === 'sm') {
         modalSize = 'w-[300px]';
@@ -1964,19 +2023,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))));
     }
@@ -2096,16 +2153,16 @@ 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, open = _a.open, 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 },
@@ -3134,10 +3191,25 @@ CloseIcon.defaultProps = {
     size: 'md',
 };
 
+var colorUnion = [
+    'default',
+    'blue',
+    'teal',
+    'green',
+    'yellow',
+    'red',
+    'black',
+    'white',
+];
+var sizeUnion = ['md', 'sm', 'tn'];
+var variantUnion = ['label', 'icon', 'closeable'];
 function TagLabel(_a) {
-    var children = _a.children, _b = _a.closeHandler, closeHandler = _b === void 0 ? undefined : _b, _c = _a.size, size = _c === void 0 ? 'sm' : _c, _d = _a.variant, variant = _d === void 0 ? 'label' : _d, isShow = _a.isShow, color = _a.color, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon;
-    var config = TagLabelConfig[color][size][variant];
-    var configIcon = TagLabelConfig[color][size];
+    var text = _a.text, _b = _a.closeHandler, closeHandler = _b === void 0 ? undefined : _b, _c = _a.size, size = _c === void 0 ? 'sm' : _c, _d = _a.variant, variant = _d === void 0 ? 'label' : _d, open = _a.open, color = _a.color, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon;
+    var validatedColor = validUnion(color, colorUnion);
+    var validatedSize = validUnion(size, sizeUnion);
+    var validatedVariant = validUnion(variant, variantUnion);
+    var config = TagLabelConfig[validatedColor][validatedSize][validatedVariant];
+    var configIcon = TagLabelConfig[validatedColor][validatedSize];
     var configbg = config.bg;
     var configtext = config.text;
     var configpadding = config.padding;
@@ -3157,70 +3229,71 @@ function TagLabel(_a) {
         }
         var IconComponent = icon;
         var textSize;
-        if (size === 'md') {
+        if (validatedSize === 'md') {
             textSize = 'text-[20px]';
         }
-        else if (size === 'sm' || size === 'tn') {
+        else if (validatedSize === 'sm' || validatedSize === 'tn') {
             textSize = 'text-[14px]';
         }
         else {
             textSize = 'text-[14px]';
         }
         var fillColor;
-        if (color === 'blue') {
+        if (validatedColor === 'blue') {
             fillColor = '#5d5dea';
         }
-        else if (color === 'green') {
+        else if (validatedColor === 'green') {
             fillColor = '#21ba4c';
         }
-        else if (color === 'teal') {
+        else if (validatedColor === 'teal') {
             fillColor = '#00b5ad';
         }
-        else if (color === 'yellow') {
+        else if (validatedColor === 'yellow') {
             fillColor = '#ff7b00';
         }
-        else if (color === 'red') {
+        else if (validatedColor === 'red') {
             fillColor = '#db2828';
         }
-        else if (color === 'black') {
+        else if (validatedColor === 'black') {
             fillColor = '#2f2f2f';
         }
         else {
             fillColor = '#ffffff';
         }
-        return (React.createElement(IconComponent, { className: "".concat(textSize, " ").concat(variant === 'icon' ? configXcolor : configXcolorV), color: fillColor }));
+        return (React.createElement(IconComponent, { className: "".concat(textSize, " ").concat(validatedVariant === 'icon' ? configXcolor : configXcolorV), color: fillColor }));
     };
     // const containerClass = `${container} ${capitalize && 'capitalize'}`;
     // const closeableMode = variant === 'closeable';
     // const iconMode = variant === 'icon';
     var closeButtonException;
-    if (size === 'md') {
+    if (validatedSize === 'md') {
         closeButtonException = '-mr-[2px]';
     }
     else {
         closeButtonException = '-mr-[5px]';
     }
     var outlineColor;
-    if (color === 'default' || color === 'white') {
+    if (validatedColor === 'default' || validatedColor === 'white') {
         outlineColor = 'outline-primary-black';
     }
     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 === 'md' && 'min-h-[20px] px-[5px]', " ").concat(size === 'sm' && 'min-h-[18px] px-[3px]', " ").concat(size === 'tn' && 'min-h-[14px] px-[3px] -mt-[2px]') }, children))),
-        variant === 'label' && rightIcon && (React.createElement("div", { className: "flex justify-center items-center ".concat(IconContainer[size]) }, rightIcon)),
-        variant === 'closeable' && closeHandler && (React.createElement("button", { type: "button", className: "flex justify-center items-center ".concat(size === 'tn' ? 'p-[1px]' : 'p-[2px]', " ").concat(outlineColor, " ").concat(iconColor, " ").concat(color === 'white' || color === 'default' ? 'bg-black/[.3]' : 'bg-white/[.5]', " focus:outline ").concat(size === 'tn' ? 'outline-[1.5px]' : 'outline-[2px]', " ").concat(closeButtonException, " rounded-full group"), onClick: function () { return closeHandler(); } },
-            React.createElement(CloseIcon, { size: size })))));
+        validatedVariant === 'icon' ? (React.createElement("div", { className: "flex justify-center items-center ".concat(IconContainer[validatedSize]) }, childrenElement(leftIcon) ||
+            renderIcon(configX))) : (React.createElement(React.Fragment, null,
+            React.createElement("span", null, childrenElement(leftIcon)),
+            React.createElement("div", { className: "flex justify-center items-center ".concat(validatedSize === 'md' && 'min-h-[20px] px-[5px]', " ").concat(validatedSize === 'sm' && 'min-h-[18px] px-[3px]', " ").concat(validatedSize === 'tn' && 'min-h-[14px] px-[3px] -mt-[2px]') }, childrenElement(text)))),
+        validatedVariant === 'label' && rightIcon && (React.createElement("div", { className: "flex justify-center items-center ".concat(IconContainer[validatedSize]) }, childrenElement(rightIcon))),
+        validatedVariant === 'closeable' && closeHandler && (React.createElement("button", { type: "button", className: "flex justify-center items-center ".concat(validatedSize === 'tn' ? 'p-[1px]' : 'p-[2px]', " ").concat(outlineColor, " ").concat(iconColor, " ").concat(validatedColor === 'white' || validatedColor === 'default' ? 'bg-black/[.3]' : 'bg-white/[.5]', " focus:outline ").concat(validatedSize === 'tn' ? 'outline-[1.5px]' : 'outline-[2px]', " ").concat(closeButtonException, " rounded-full group"), onClick: function () { return closeHandler(); } },
+            React.createElement(CloseIcon, { size: validatedSize })))));
 }
 TagLabel.defaultProps = {
     variant: 'default',
     size: 'sm',
-    isShow: true,
+    open: true,
     closeHandler: function () { },
     rightIcon: null,
     leftIcon: null,