bianic-ui 1.1.0-beta.6 → 1.3.0-beta

package/README.md

@@ -23,3 +23,27 @@ If you're interested in contributing to Bianic-Ui, please contact our team at [d
 ## Change Log
 
 Coming soon
+
+## Development Notes
+
+### Code Convention
+
+- Always separate style with tsx
+- For style config always try to be object with one level
+- Separate config file and component file for more readable code
+- The variable name of style config must be describe what you styling not describe the parameters (or key)
+- Use .tsx only when defining component, just us .ts if no component defined on the file
+- Don't import simulation or any demo to index.ts
+- Update storybook for every change or new component
+
+### Component attribute naming
+
+- Check on html documentation. Always try to use the exisiting html atribute name.
+- If there the attibute not listed on html documentation. You can make it on your own with rules :
+  - Use "is" prefix for boolean
+  - Use "on" prefix for event listener
+
+### Another Notes
+
+- Please assign class `...-primary-black` when need black color. If not assigned system will use #000000 black.
+- Just discuss any concept you had. **Discuss first, Implement later**.

package/dist/cjs/index.js

@@ -100,6 +100,8 @@ function TbAlertTriangle (props) {
   return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M6 15l6 -6l6 6"},"child":[]}]})(props);
 }function TbCrop11 (props) {
   return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"},"child":[]}]})(props);
+}function TbDots (props) {
+  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"},"child":[]},{"tag":"path","attr":{"d":"M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"},"child":[]},{"tag":"path","attr":{"d":"M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"},"child":[]}]})(props);
 }function TbEyeOff (props) {
   return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M10.585 10.587a2 2 0 0 0 2.829 2.828"},"child":[]},{"tag":"path","attr":{"d":"M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87"},"child":[]},{"tag":"path","attr":{"d":"M3 3l18 18"},"child":[]}]})(props);
 }function TbEye (props) {
@@ -360,16 +362,6 @@ function __rest(s, e) {
     return t;
 }
 
-function __spreadArray(to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-}
-
 typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
     var e = new Error(message);
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
@@ -390,10 +382,10 @@ var radiusConfig$1 = {
     },
 };
 var sizeConfig$b = {
-    lg: 'py-[10.5px] px-[13px] h-[48px] flex items-center justify-center gap-[10px] text-size-md',
-    md: ' px-[11px] py-[9px] h-[40px] flex items-center justify-center gap-[5px] text-size-base',
-    sm: 'px-[8px] py-[6px] h-[30px] flex items-center justify-center gap-[5px] text-size-sm',
-    tn: 'px-[4px] py-[2px] h-[22px] flex items-center justify-center gap-[3px] text-size-tiny',
+    lg: 'py-[10.5px] px-[13px] h-[48px] flex items-center justify-center gap-[10px] text-size-md min-w-[112px]',
+    md: ' px-[11px] py-[9px] h-[40px] flex items-center justify-center gap-[5px] text-size-base min-w-[96px]',
+    sm: 'px-[8px] py-[6px] h-[30px] flex items-center justify-center gap-[5px] text-size-sm min-w-[72px]',
+    tn: 'px-[4px] py-[2px] h-[22px] flex items-center justify-center gap-[3px] text-size-tiny min-w-[64px]',
 };
 var iconOnlySizeConfig$1 = {
     lg: 'p-[13px] flex items-center justify-center gap-[10px]',
@@ -440,7 +432,7 @@ var variantUnion$1 = [
 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, _j = _a.left, left = _j === void 0 ? null : _j, _k = _a.right, right = _k === void 0 ? null : _k, props = __rest(_a, ["label", "className", "disabled", "radius", "size", "variant", "iconLeft", "iconRight", "left", "right"]);
+    var label = _a.label, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.radius, radius = _d === void 0 ? 'default' : _d, _e = _a.size, size = _e === void 0 ? 'md' : _e, _f = _a.variant, variant = _f === void 0 ? 'default' : _f, _g = _a.iconLeft, iconLeft = _g === void 0 ? null : _g, _h = _a.iconRight, iconRight = _h === void 0 ? null : _h, _j = _a.left, left = _j === void 0 ? null : _j, _k = _a.right, right = _k === void 0 ? null : _k, _l = _a.isFitContent, isFitContent = _l === void 0 ? false : _l, props = __rest(_a, ["label", "className", "disabled", "radius", "size", "variant", "iconLeft", "iconRight", "left", "right", "isFitContent"]);
     var validatedVariant = validUnion(variant, variantUnion$1);
     var validatedSize = validUnion(size, sizeUnion$4);
     var validatedRadius = validUnion(radius, radiusUnion);
@@ -448,7 +440,7 @@ function Button(_a) {
         ? sizeConfig$b[validatedSize]
         : iconOnlySizeConfig$1[validatedSize];
     var classString = "\n    ".concat(variantConfig$2[validatedVariant], " \n    ").concat(sizeClass, " \n    ").concat(radiusConfig$1[validatedRadius][validatedSize], " \n    ").concat(className, "\n  ");
-    return (React.createElement("button", __assign({ type: "button", className: "button flex items-center justify-center font-semibold ".concat(classString), disabled: disabled }, props),
+    return (React.createElement("button", __assign({ type: "button", className: "button flex items-center justify-center font-semibold ".concat(classString), disabled: disabled, style: { minWidth: isFitContent ? '0px' : undefined } }, props),
         childrenElement(iconLeft || left),
         childrenElement(label),
         childrenElement(iconRight || right)));
@@ -1558,13 +1550,14 @@ function PasswordIcon(_a) {
 }
 
 function TextInput(_a) {
-    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, icon = _a.icon, _c = _a.id, id = _c === void 0 ? '' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, _e = _a.isValid, isValid = _e === void 0 ? false : _e, label = _a.label, _f = _a.placeholder, placeholder = _f === void 0 ? '' : _f, _g = _a.readOnly, readOnly = _g === void 0 ? false : _g, _h = _a.required, required = _h === void 0 ? false : _h, _j = _a.variant, variant = _j === void 0 ? 'text' : _j, _k = _a.value, value = _k === void 0 ? '' : _k, _l = _a.onChange, onChange = _l === void 0 ? function () { } : _l;
-    var _m = React.useState(false), isShow = _m[0], setIsShow = _m[1];
-    var _o = styleConfig[variant], fieldStyle = _o.fieldStyle, iconStyle = _o.iconStyle;
-    var _p = sizeConfig$a[size], iconSize = _p.iconSize, fieldSize = _p.fieldSize, iconPosition = _p.iconPosition;
+    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, _m = _a.maxLength, maxLength = _m === void 0 ? undefined : _m, props = __rest(_a, ["descText", "disabled", "icon", "id", "size", "isValid", "label", "placeholder", "readOnly", "required", "variant", "value", "onChange", "maxLength"]);
+    var _o = React.useState(false), isShow = _o[0], setIsShow = _o[1];
+    var _p = styleConfig[variant], fieldStyle = _p.fieldStyle, iconStyle = _p.iconStyle;
+    var _q = sizeConfig$a[size], iconSize = _q.iconSize, fieldSize = _q.fieldSize, iconPosition = _q.iconPosition;
     var typeVariant = variant;
     if (variant === 'password')
         typeVariant = isShow ? 'text' : 'password';
+    var remainWords = maxLength ? maxLength - (value ? value.length : 0) : 0;
     var isExistValidation = isValid !== null;
     var descColor = 'text-primary-cool';
     if (!disabled && isExistValidation && isValid)
@@ -1584,14 +1577,20 @@ function TextInput(_a) {
     if (variant === 'password') {
         iconElement = (React.createElement(PasswordIcon, { isShow: isShow, showHandler: setIsShow, iconSize: iconSize, disabled: disabled }));
     }
-    return (React.createElement("div", { className: "field-group flex w-full flex-col gap-y-2" },
+    return (React.createElement("div", { className: "field-group flex w-full flex-col gap-y-2 text-bia-black" },
         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: "relative w-full" },
-            React.createElement("input", { className: "field w-full rounded  border border-bia-grey-dark-10 bg-primary-white read-only:pointer-events-none read-only:border-bia-grey-light-50 hover:rounded-b-none focus:rounded-b-none focus-visible:outline-none disabled:border-bia-grey-dark-10 disabled:bg-bia-grey-light-80 disabled:text-bia-grey-active ".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("input", __assign({ className: "field w-full rounded  border border-bia-grey-dark-10 bg-primary-white read-only:pointer-events-none read-only:border-bia-grey-light-50 hover:rounded-b-none focus:rounded-b-none focus-visible:outline-none disabled:border-bia-grey-dark-10 disabled:bg-bia-grey-light-80 disabled:text-bia-grey-active ".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); }, maxLength: maxLength }, props)),
             React.createElement("div", { className: "absolute inset-y-0 flex items-center pl-3 ".concat(iconStyle, " ").concat(iconPosition) }, iconElement)),
-        descText && (React.createElement("span", { className: "desc text-xs ".concat(descColor) }, descText))));
+        React.createElement("div", { className: "desc flex justify-between gap-1 text-xs ".concat(descColor) },
+            descText && React.createElement("span", null, descText),
+            maxLength && (React.createElement("span", null,
+                remainWords,
+                "/",
+                maxLength,
+                ' ')))));
 }
 TextInput.defaultProps = {
     descText: '',
@@ -1608,15 +1607,6 @@ TextInput.defaultProps = {
     onChange: function () { },
 };
 
-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", size: size, id: "demo-id", value: value, onChange: function (e) { return setValue(e.target.value); } }));
-}
-TextInputSimulation.defaultProps = {
-    size: 'md',
-};
-
 // Desc: Radio button size configuration
 var sizeConfig$9 = {
     md: {
@@ -1659,16 +1649,23 @@ var sizeConfig$8 = {
 };
 
 function TextArea(_a) {
-    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, id = _a.id, _c = _a.size, size = _c === void 0 ? 'md' : _c, label = _a.label, _d = _a.placeholder, placeholder = _d === void 0 ? '' : _d, required = _a.required, rows = _a.rows, props = __rest(_a, ["descText", "disabled", "id", "size", "label", "placeholder", "required", "rows"]);
+    var 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, _e = _a.maxLength, maxLength = _e === void 0 ? undefined : _e, value = _a.value, props = __rest(_a, ["descText", "disabled", "id", "size", "label", "placeholder", "required", "rows", "maxLength", "value"]);
     var inputRow = rows !== null && rows !== void 0 ? rows : 4;
     var inputClass = sizeConfig$8[size].inputClass;
-    return (React.createElement("div", { className: "field-group w-full flex flex-col" },
-        React.createElement("label", { htmlFor: id, className: "label text-xs pb-2 font-semibold" },
+    var remainWords = maxLength ? maxLength - (value ? value.length : 0) : 0;
+    return (React.createElement("div", { className: "field-group flex w-full flex-col" },
+        React.createElement("label", { htmlFor: id, className: "label pb-2 text-xs font-semibold" },
             label,
             required && React.createElement("span", { className: "p-1 text-bia-red" }, "*")),
-        React.createElement("div", { className: "min-w-[250px] w-full h-full" },
-            React.createElement("textarea", __assign({ className: "field bg-primary-white disabled:bg-bia-grey-light-80  disabled:text-bia-grey-active read-only:pointe r-events-none p-2.5 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 rounded ".concat(inputClass), rows: inputRow, id: id, placeholder: placeholder, disabled: disabled }, props))),
-        React.createElement("span", { className: "desc text-primary-cool text-xs" }, descText)));
+        React.createElement("div", { className: "h-full w-full min-w-[250px]" },
+            React.createElement("textarea", __assign({ className: "field read-only:pointe r-events-none  w-full rounded border border-bia-grey-dark-10 bg-primary-white p-2.5 focus-visible:outline-none enabled:hover:rounded-b-none enabled:hover:border-b-bia-blue enabled:focus:rounded-b-none enabled:focus:border-b-bia-blue disabled:bg-bia-grey-light-80 disabled:text-bia-grey-active ".concat(inputClass), rows: inputRow, id: id, placeholder: placeholder, disabled: disabled, maxLength: maxLength, value: value }, props))),
+        React.createElement("div", { className: "desc flex justify-between gap-1 text-xs text-primary-cool" },
+            descText && React.createElement("span", null, descText),
+            maxLength && (React.createElement("span", null,
+                remainWords,
+                "/",
+                maxLength,
+                ' ')))));
 }
 TextArea.defaultProps = {
     disabled: false,
@@ -1679,6 +1676,8 @@ TextArea.defaultProps = {
     placeholder: 'Write here ...',
     required: false,
     rows: 4,
+    maxLength: undefined,
+    value: '',
 };
 
 var sizeConfig$7 = {
@@ -1713,41 +1712,6 @@ Checkbox.defaultProps = {
     onChange: function () { },
 };
 
-function CheckboxSimulation(_a) {
-    var size = _a.size;
-    var _b = React.useState([]), selected = _b[0], setSelected = _b[1];
-    var optionsData = [
-        {
-            id: 1,
-            label: 'Swimming',
-        },
-        {
-            id: 2,
-            label: 'Hiking',
-        },
-        {
-            id: 3,
-            label: 'Flying',
-        },
-    ];
-    var handleChange = function (e, optionId) {
-        var value = Number(e.target.value);
-        var isChecked = selected.includes(value);
-        if (isChecked) {
-            var selectedArr = selected.filter(function (item) { return item !== optionId; });
-            return setSelected(selectedArr);
-        }
-        return setSelected(function (prev) { return __spreadArray(__spreadArray([], prev, true), [Number(e.target.value)], false); });
-    };
-    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, 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: 'md',
-};
-
 var sizeConfig$6 = {
     md: {
         searchSize: 'text-size-base p-2.5 font-[350] h-10',
@@ -1864,12 +1828,6 @@ SelectInput.defaultProps = {
     setSelected: function () { },
 };
 
-function SelectInputSimulation(_a) {
-    var _b = _a.size, size = _b === void 0 ? 'md' : _b, options = _a.options;
-    var _c = React.useState('Mohammed Salah'), selected = _c[0], setSelected = _c[1];
-    return (React.createElement(SelectInput, { label: "Select with String Option Item", descText: "Deskripsi Input Select", options: options, selected: selected, setSelected: setSelected, size: size, placeholder: "-- Select Player --", id: "demo-id" }));
-}
-
 var sizeConfig$4 = {
     md: {
         iconClass: 'right-[10px]',
@@ -1967,26 +1925,26 @@ Toggle.defaultProps = {
 };
 
 var isSelectedConfig = {
-    selected: 'bg-white text-black cursor-default',
+    selected: 'bg-white text-primary-black cursor-default',
     notSelected: 'bg-bia-grey-light-50 text-bia-coolgrey hover:bg-bia-grey-light-80 hover:text-bia-coolgrey',
 };
 var roundedConfig = {
     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',
+    sm: 'first:rounded-l-radius-sm last:rounded-r-radius-sm',
     tn: 'first:rounded-l-radius-tn last:rounded-r-radius-tn',
 };
 var sizeConfig$2 = {
-    lg: 'text-size-md leading-[23.94px] px-[13px] py-[10.5px]',
-    md: 'text-size-base leading-[21px] px-[11px] py-[9px]',
-    sm: 'text-size-sm leading-[15.96px] px-[7px] py-[5px]',
-    tn: 'text-size-sm leading-[15.96px] px-[4px] py-[2px]',
+    lg: 'text-size-md leading-[23.94px] px-[13px] py-[10.5px] min-w-[112px]',
+    md: 'text-size-base leading-[21px] px-[11px] py-[9px] min-w-[96px]',
+    sm: 'text-size-sm leading-[15.96px] px-[7px] py-[5px] min-w-[72px]',
+    tn: 'text-size-sm leading-[15.96px] px-[4px] py-[2px] min-w-[64px]',
 };
 
 function SegmentButtonItem(_a) {
     var _b = _a.selected, selected = _b === void 0 ? false : _b, size = _a.size, children = _a.children, disabled = _a.disabled, onClick = _a.onClick;
     var isSelected = selected ? 'selected' : 'notSelected';
-    return (React.createElement("button", { type: "button", onClick: onClick, disabled: disabled, className: "focus-visible:z-50 focus-visible:outline focus-visible:-outline-offset-1 focus-visible:outline-[3px] focus-visible:outline-bia-blue-light-50 border-[1px] border-l-0 first:border-l-[1px] border-bia-grey-dark-10 group:last:border-l-0 disabled:bg-bia-grey-light-80 disabled:text-bia-grey-dark-10 disabled:cursor-not-allowed ".concat(isSelectedConfig[isSelected], " ").concat(roundedConfig[size], " ").concat(sizeConfig$2[size]) }, children));
+    return (React.createElement("button", { type: "button", onClick: onClick, disabled: disabled, className: "group:last:border-l-0 border-[1px] border-l-0 border-bia-grey-dark-10 first:border-l-[1px] focus-visible:z-50 focus-visible:outline focus-visible:outline-[3px] focus-visible:-outline-offset-1 focus-visible:outline-bia-blue-light-50 disabled:cursor-not-allowed disabled:bg-bia-grey-light-80 disabled:text-bia-grey-dark-10 ".concat(isSelectedConfig[isSelected], " ").concat(roundedConfig[size], " ").concat(sizeConfig$2[size]) }, children));
 }
 
 function SegmentButtonGroup(_a) {
@@ -1994,46 +1952,6 @@ function SegmentButtonGroup(_a) {
     return React.createElement("div", { className: "flex" }, children);
 }
 
-function SegmentButtonSimulation(_a) {
-    var size = _a.size;
-    var _b = React.useState(0), activeButton = _b[0], setActiveButton = _b[1];
-    var SegmentButtonArr = [
-        {
-            content: 'Segment Button A',
-            disabled: false,
-            handleClick: function (index) { return setActiveButton(index); },
-        },
-        {
-            content: 'Segment Button B',
-            disabled: false,
-            handleClick: function (index) { return setActiveButton(index); },
-        },
-        {
-            content: 'Segment Button C (Disabled)',
-            disabled: true,
-            handleClick: function (index) { return setActiveButton(index); },
-        },
-        {
-            content: 'Segment Button D',
-            disabled: false,
-            handleClick: function (index) { return setActiveButton(index); },
-        },
-        {
-            content: 'Segment Button E',
-            disabled: false,
-            handleClick: function (index) { return setActiveButton(index); },
-        },
-    ];
-    return (React.createElement(SegmentButtonGroup, null, SegmentButtonArr.map(function (_a, 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, null)),
-                content)));
-    })));
-}
-
 function Modal(_a) {
     var size = _a.size, title = _a.title, open = _a.open, zIndex = _a.zIndex, onClose = _a.onClose, rest = __rest(_a, ["size", "title", "open", "zIndex", "onClose"]);
     var modalSize;
@@ -2061,8 +1979,7 @@ function Modal(_a) {
             React.createElement("div", { className: "modal flex flex-col gap-[20px] rounded-[5px] bg-white p-[20px] ".concat(modalSize) },
                 React.createElement("div", { className: "flex justify-between" },
                     React.createElement("div", { className: " w-[260px] text-wrap font-humnst777 text-[18px] font-bold leading-[21.85px] text-primary-black" }, title),
-                    React.createElement("button", { type: "button", title: "button", className: "flex h-[22px] w-[22px] cursor-pointer items-center justify-center rounded-radius-full bg-bia-grey-light-50 hover:bg-bia-grey-light-30", onClick: function () { return onClose(); } },
-                        React.createElement(TbX, { className: "text-[14px] text-bia-coolgrey" }))),
+                    React.createElement(Button, { variant: "subtle", radius: "full-rounded", iconLeft: React.createElement(TbX, null), size: "tn", onClick: function () { return onClose(); } })),
                 React.createElement("div", { className: "flex flex-col gap-[20px]" }, rest.children))));
     }
     return null;
@@ -2245,21 +2162,15 @@ function ProgressCircle(_a) {
             content)));
 }
 
-var containerClass$1 = {
-    top: 'top-0 left-0 h-[9px] w-full',
-    right: 'top-0 right-0 h-full w-[9px]',
-    bottom: 'bottom-0 left-0 h-[9px] w-full',
-    left: 'top-0 left-0 h-full w-[9px]',
-};
-var stripClass = {
-    top: 'w-[30px] h-[3px] border-x-0',
-    right: 'w-[3px] h-[30px] border-y-0',
-    bottom: 'w-[30px] h-[3px] border-x-0',
-    left: 'w-[3px] h-[30px] border-y-0',
+var resizerContainerClass = {
+    top: 'top-[-4.5px] left-0 h-[9px] w-full cursor-row-resize',
+    right: 'top-0 right-[-4.5px] h-full w-[9px] cursor-col-resize',
+    bottom: 'bottom-[-4.5px] left-0 h-[9px] w-full cursor-row-resize',
+    left: 'top-0 left-[-4.5px] h-full w-[9px] cursor-col-resize',
 };
 
 function ResizeableDiv(_a) {
-    var _b = _a.position, position = _b === void 0 ? 'bottom' : _b, children = _a.children, className = _a.className;
+    var _b = _a.position, position = _b === void 0 ? 'bottom' : _b, children = _a.children, className = _a.className, initialWidth = _a.initialWidth, initialHeight = _a.initialHeight;
     var container = React.useRef(null);
     var resizer = React.useRef(null);
     var handleResize = function (e) {
@@ -2297,38 +2208,23 @@ function ResizeableDiv(_a) {
     var stopResize = function () {
         window.removeEventListener('mousemove', handleResize);
     };
-    return (React.createElement("div", { className: "relative overflow-auto ".concat(className), ref: container },
-        children,
-        React.createElement("button", { className: "flex border border-bia-grey-dark-10 justify-center items-center cursor-grab bg-primary-white absolute ".concat(containerClass$1[position]), ref: resizer, type: "button", onMouseDown: function () {
+    var isVerticalResizer = position === 'left' || position === 'right';
+    var thumbClass = isVerticalResizer && 'rotate-90';
+    var containerWidth = typeof initialWidth === 'number' && !isNaN(initialWidth) ? "".concat(initialWidth, "px") : initialWidth;
+    var containerHeight = typeof initialHeight === 'number' && !isNaN(initialHeight) ? "".concat(initialHeight, "px") : initialHeight;
+    return (React.createElement("div", { className: "relative overflow-visible", ref: container, style: { width: containerWidth, height: containerHeight } },
+        React.createElement("div", { className: "h-full w-full ".concat(className) }, children),
+        React.createElement("div", { className: "group absolute z-10 flex items-center justify-center ".concat(resizerContainerClass[position]), ref: resizer, onMouseDown: function () {
                 window.addEventListener('mousemove', handleResize);
                 window.addEventListener('mouseup', stopResize);
             } },
-            React.createElement("div", { className: "border border-bia-coolgrey ".concat(stripClass[position]) }))));
+            React.createElement("div", { className: "flex h-[9px] w-[25px] items-center justify-center rounded-radius-full border border-bia-grey-light-10 bg-primary-white opacity-20 group-hover:opacity-100 group-active:bg-bia-coolgrey-light-90 ".concat(thumbClass) },
+                React.createElement(TbDots, { className: "text-bia-grey-light-30" })))));
 }
 ResizeableDiv.defaultProps = {
     position: 'left',
 };
 
-var containerClass = {
-    top: 'justify-center items-end',
-    right: 'justify-start  items-center',
-    bottom: 'justify-center items-start',
-    left: 'justify-end items-center ',
-};
-function ResizeableDivSimulation(_a) {
-    var _b = _a.resizerPosition, resizerPosition = _b === void 0 ? 'right' : _b;
-    return (React.createElement("div", { className: "h-screen w-screen flex ".concat(containerClass[resizerPosition]) },
-        React.createElement("div", { className: "" },
-            React.createElement(ResizeableDiv, { position: resizerPosition, className: "w-52 h-52 space-x-2" },
-                React.createElement("div", { className: "w-full h-full bg-bia-blue text-size-sm text-white overflow-auto indent-5 p-5 text-justify" },
-                    React.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut libero ex, vestibulum sed egestas id, aliquam non dui. Phasellus nibh risus, sodales in tellus in, volutpat lobortis elit. Aenean eu molestie massa, nec interdum libero. Donec at turpis eget est vestibulum sodales rhoncus eget purus. Duis vehicula ante quis mollis fringilla. Morbi lacinia erat a volutpat rutrum. Mauris euismod enim et elementum dictum. Nulla ipsum tellus, laoreet nec ex consequat, congue mollis arcu. Morbi mattis elit eu vestibulum tristique. Praesent efficitur dolor ut eros laoreet, ut sodales ipsum rhoncus. Sed ullamcorper ante neque, eget cursus ligula efficitur at. Maecenas convallis gravida nisi eget hendrerit."),
-                    React.createElement("p", null, "Sed semper maximus scelerisque. Duis nec pretium elit, id viverra nibh. Suspendisse potenti. Nunc sem odio, consectetur ut ultricies in, lacinia id tortor. Nam id lacinia ipsum. Etiam libero tortor, aliquam id metus nec, malesuada semper massa. Vivamus vel arcu dolor. Vestibulum arcu lacus, euismod commodo leo sit amet, mattis varius quam. Maecenas condimentum sodales congue. Curabitur cursus elit eu sollicitudin rutrum. Sed molestie mauris sed facilisis luctus. Nulla facilisi. Sed rhoncus neque vitae libero maximus, sit amet interdum arcu egestas. Morbi condimentum euismod justo eget imperdiet."),
-                    React.createElement("p", null, "Aliquam vitae nunc quis mi euismod lacinia. Pellentesque molestie posuere augue, et dapibus velit. Nam sodales ullamcorper posuere. Suspendisse gravida nibh nunc, id interdum sem varius vel. Sed elementum, tortor id malesuada bibendum, ipsum metus venenatis nulla, vitae laoreet turpis elit a erat. Donec quis aliquam est, vel fermentum dolor. Nunc tempor pellentesque metus, eget maximus ex varius non. Sed luctus dapibus nulla, sagittis sollicitudin ante pharetra finibus. Morbi nulla erat, aliquam sed ipsum et, cursus lacinia arcu."))))));
-}
-ResizeableDivSimulation.defaultProps = {
-    resizerPosition: 'right',
-};
-
 function Slider(_a) {
     var disabled = _a.disabled;
     var _b = React.useState(50), sliderValue = _b[0], setsliderValue = _b[1];
@@ -2387,13 +2283,13 @@ function Tab(_a) {
         cursor = 'cursor-auto';
     }
     var activeKeyTab = active
-        ? 'group-disabled:text-bia-coolgrey-disabled'
+        ? 'group-disabled:text-bia-coolgrey-disabled text-primary-black'
         : '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 === '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("button", __assign({ type: "button", disabled: disabled }, rest, { className: "-mb-[1px] flex items-stretch justify-between ".concat(card && cardColor, " ").concat(mode === 'horizontal' ? 'flex-col' : 'w-full flex-row', " group relative outline-none ").concat(disabledKeyTab, " ").concat(fit) }),
+            React.createElement("div", { className: "flex items-center justify-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) },
+                    React.createElement("div", { className: "flex items-center space-x-1 text-nowrap ".concat(activeKeyTab, " ").concat(configTab[size].text) },
                         icon && React.createElement("div", { className: "mr-[5px]" }, icon),
                         children))),
             React.createElement("div", { className: "flex flex-row  ".concat(mode === 'vertical' ? 'w-[3px] justify-end' : 'h-[3px] w-full', "  items-end") }, !card && (React.createElement("div", { className: "shadow-lg shadow-bia-blue ".concat(configTab[active ? 'true' : 'false'][mode]) }))))));
@@ -2749,18 +2645,6 @@ Tooltip.defaultProps = {
 };
 Tooltip.defaultProps = {};
 
-function ScrollbarSimulation() {
-    return (React.createElement("div", { className: "flex gap-5" },
-        React.createElement("div", { className: "w-64 aspect-square overflow-y-auto p-5 text-justify" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta ac augue ac porta. Nunc ac pretium odio. Integer auctor viverra malesuada. Nullam id consectetur orci. Praesent lobortis enim fermentum lacus convallis, vitae vestibulum lorem accumsan. Donec ac magna tristique, fermentum nulla at, faucibus magna. Nulla facilisi. Ut vehicula pulvinar nulla vitae suscipit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus pulvinar, dolor a fringilla eleifend, metus arcu condimentum nisl, ut ultricies massa elit nec urna. Nam aliquam vestibulum ullamcorper. Aliquam ac ex sapien. Nam in interdum metus. Cras fringilla est nisl, ut pharetra sapien placerat non. Sed finibus elementum ipsum id interdum. Proin condimentum consequat tortor, ac aliquam urna. Donec tincidunt nunc eu est tristique aliquam. In a enim sit amet turpis sodales cursus. Donec in hendrerit odio. Vestibulum pretium, lectus nec vehicula iaculis, velit nisl laoreet enim, eget iaculis nibh neque et risus. Morbi aliquam malesuada mi in rhoncus."),
-        React.createElement("div", { className: "h-64 aspect-square overflow-x-auto overflow-y-clip p-5 text-justify" }, "Loremipsumdolorsitamet,consecteturadipiscingelit.Proinportaac augueacporta.Nuncacpretiumodio.Integerauctorviverramalesuada. Nullamidconsecteturorci.Praesentlobortisenimfermentumlacus convallis,vitaevestibulumloremaccumsan.Donecacmagnatristique, fermentumnullaat,faucibusmagna.Nullafacilisi.Utvehiculapulvinar nullavitaesuscipit.Vestibulumanteipsumprimisinfaucibusorci luctusetultricesposuerecubiliacurae;Vivamuspulvinar,dolora fringillaeleifend,metusarcucondimentumnisl,utultriciesmassaelit necurna.Namaliquamvestibulumullamcorper.Aliquamacexsapien.Nam in interdum metus. Cras fringilla est nisl, ut pharetra sapien placerat non. Sed finibus elementum ipsum id interdum. Proin condimentum consequat tortor, ac aliquam urna. Donec tincidunt nunc eu est tristique aliquam. In a enim sit amet turpis sodales cursus. Donec in hendrerit odio. Vestibulum pretium, lectus nec vehicula iaculis, velit nisl laoreet enim, eget iaculis nibh neque et risus. Morbi aliquam malesuada mi in rhoncus.")));
-}
-
-function HiddenScrollbarSimulation() {
-    return (React.createElement("div", { className: "flex gap-5" },
-        React.createElement("div", { className: "w-64 aspect-square overflow-y-auto p-5 scrollbar-hidden text-justify" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta ac augue ac porta. Nunc ac pretium odio. Integer auctor viverra malesuada. Nullam id consectetur orci. Praesent lobortis enim fermentum lacus convallis, vitae vestibulum lorem accumsan. Donec ac magna tristique, fermentum nulla at, faucibus magna. Nulla facilisi. Ut vehicula pulvinar nulla vitae suscipit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus pulvinar, dolor a fringilla eleifend, metus arcu condimentum nisl, ut ultricies massa elit nec urna. Nam aliquam vestibulum ullamcorper. Aliquam ac ex sapien. Nam in interdum metus. Cras fringilla est nisl, ut pharetra sapien placerat non. Sed finibus elementum ipsum id interdum. Proin condimentum consequat tortor, ac aliquam urna. Donec tincidunt nunc eu est tristique aliquam. In a enim sit amet turpis sodales cursus. Donec in hendrerit odio. Vestibulum pretium, lectus nec vehicula iaculis, velit nisl laoreet enim, eget iaculis nibh neque et risus. Morbi aliquam malesuada mi in rhoncus."),
-        React.createElement("div", { className: "h-64 aspect-square overflow-x-auto overflow-y-clip p-5 scrollbar-hidden text-justify" }, "Loremipsumdolorsitamet,consecteturadipiscingelit.Proinportaac augueacporta.Nuncacpretiumodio.Integerauctorviverramalesuada. Nullamidconsecteturorci.Praesentlobortisenimfermentumlacus convallis,vitaevestibulumloremaccumsan.Donecacmagnatristique, fermentumnullaat,faucibusmagna.Nullafacilisi.Utvehiculapulvinar nullavitaesuscipit.Vestibulumanteipsumprimisinfaucibusorci luctusetultricesposuerecubiliacurae;Vivamuspulvinar,dolora fringillaeleifend,metusarcucondimentumnisl,utultriciesmassaelit necurna.Namaliquamvestibulumullamcorper.Aliquamacexsapien.Nam ininterdummetus.Crasfringillaestnisl,utpharetrasapienplaceratnon. Sedfinibuselementumipsumidinterdum.Proincondimentumconsequat tortor,acaliquamurna.Donectinciduntnunceuesttristiquealiquam. Inaenimsitametturpissodalescursus.Donecinhendreritodio. Vestibulumpretium,lectusnecvehiculaiaculis,velitnisllaoreet enim,egetiaculisnibhnequeetrisus.Morbialiquammalesuadamiin rhoncus.")));
-}
-
 exports.Accordions = Accordions;
 exports.Alert = Alert;
 exports.Avatar = Avatar;
@@ -2771,12 +2655,10 @@ exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
 exports.ButtonApp = ButtonApp;
 exports.Checkbox = Checkbox;
-exports.CheckboxSimulation = CheckboxSimulation;
 exports.Color = Color;
 exports.Display = Display;
 exports.Divider = Divider;
 exports.Heading = Heading;
-exports.HiddenScrollbarSimulation = HiddenScrollbarSimulation;
 exports.LiveSearch = LiveSearch;
 exports.Modal = Modal;
 exports.P = P;
@@ -2786,13 +2668,9 @@ exports.Popover = Popover;
 exports.ProgressCircle = ProgressCircle;
 exports.Radio = Radio;
 exports.ResizeableDiv = ResizeableDiv;
-exports.ResizeableDivSimulation = ResizeableDivSimulation;
-exports.ScrollbarSimulation = ScrollbarSimulation;
 exports.SegmentButtonGroup = SegmentButtonGroup;
 exports.SegmentButtonItem = SegmentButtonItem;
-exports.SegmentButtonSimulation = SegmentButtonSimulation;
 exports.SelectInput = SelectInput;
-exports.SelectInputSimulation = SelectInputSimulation;
 exports.Slider = Slider;
 exports.Spinner = Spinner;
 exports.Tab = Tab;
@@ -2807,6 +2685,5 @@ exports.TagLabel = TagLabel;
 exports.Text = Text;
 exports.TextArea = TextArea;
 exports.TextInput = TextInput;
-exports.TextInputSimulation = TextInputSimulation;
 exports.Toggle = Toggle;
 exports.Tooltip = Tooltip;