bianic-ui 2.10.1 → 2.10.2-beta.1

package/README.md

@@ -1,49 +1,49 @@
-# Bianic 2.0
-
-DLS designed by BIAENERGI
-
-## Installation
-
-### First Installation
-
-`npm i bianic-ui`
-
-## Usage
-
-After Bianic-Ui succesfully installed, you can call the component using JSX tag declaration style ex: `<Alert />`. Futher documentation about component can be access [here](https://ristek.link/bianic-dev-docs)
-
-## Support
-
-If you found any bug, please contact at [devbiaenergi@gmail.com](mailto:devbiaenergi@gmail.com)
-
-## Contributing
-
-If you're interested in contributing to Bianic-Ui, please contact our team at [devbiaenergi@gmail.com](mailto:devbiaenergi@gmail.com)
-
-## 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**.
+# Bianic 2.0
+
+DLS designed by BIAENERGI
+
+## Installation
+
+### First Installation
+
+`npm i bianic-ui`
+
+## Usage
+
+After Bianic-Ui succesfully installed, you can call the component using JSX tag declaration style ex: `<Alert />`. Futher documentation about component can be access [here](https://ristek.link/bianic-dev-docs)
+
+## Support
+
+If you found any bug, please contact at [devbiaenergi@gmail.com](mailto:devbiaenergi@gmail.com)
+
+## Contributing
+
+If you're interested in contributing to Bianic-Ui, please contact our team at [devbiaenergi@gmail.com](mailto:devbiaenergi@gmail.com)
+
+## 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/Empty.svg

@@ -1,12 +1,12 @@
-<svg width="92" height="92" viewBox="0 0 92 92" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M32.8825 12.968C33.8187 12.0283 35.0905 11.5 36.417 11.5H66.6521C69.4074 11.5 71.641 13.7336 71.641 16.489V75.1388C71.641 77.8941 69.4074 80.1278 66.6521 80.1278H25.8327C23.0774 80.1278 20.8437 77.8875 20.8438 75.1321C20.8438 56.1849 20.8438 44.6779 20.8438 27.1159C20.8438 25.7961 21.3667 24.528 22.2982 23.593L32.8825 12.968Z" fill="#DADEEB"/>
-<path d="M32.8825 12.968C33.8187 12.0283 35.0905 11.5 36.417 11.5H66.6521C69.4074 11.5 71.641 13.7336 71.641 16.489V75.1388C71.641 77.8941 69.4074 80.1278 66.6521 80.1278H25.8327C23.0774 80.1278 20.8437 77.8875 20.8438 75.1321C20.8438 56.1849 20.8438 44.6779 20.8438 27.1159C20.8438 25.7961 21.3667 24.528 22.2982 23.593L32.8825 12.968Z" fill="white" fill-opacity="0.5"/>
-<path d="M34.3638 11.5V16.1283C34.3638 21.0391 30.3828 25.02 25.472 25.02H20.8438L34.3638 11.5Z" fill="#DADEEB"/>
-<rect x="28.1716" y="32.6677" width="18.7253" height="4.07072" rx="1.99559" fill="#DADEEB"/>
-<rect x="28.1716" y="39.9949" width="36.6365" height="4.07072" rx="1.99559" fill="#DADEEB"/>
-<rect x="28.1716" y="47.3223" width="36.6365" height="4.07072" rx="1.99559" fill="#DADEEB"/>
-<rect x="28.1716" y="54.6497" width="36.6365" height="4.07072" rx="1.99559" fill="#DADEEB"/>
-<rect x="28.1716" y="61.9768" width="36.6365" height="4.07072" rx="1.99559" fill="#DADEEB"/>
-<path d="M58.7737 63.8789C63.267 59.3856 70.5519 59.3856 75.0452 63.8789C79.5382 68.3722 79.5384 75.6572 75.0452 80.1504C70.552 84.6436 63.267 84.6434 58.7737 80.1504C54.2804 75.6571 54.2804 68.3722 58.7737 63.8789Z" stroke="#54A0F9" stroke-width="1.70457"/>
-<path d="M75.6475 80.1499L81.9753 86.4778" stroke="#54A0F9" stroke-width="1.70457"/>
-</svg>
+<svg width="92" height="92" viewBox="0 0 92 92" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.8825 12.968C33.8187 12.0283 35.0905 11.5 36.417 11.5H66.6521C69.4074 11.5 71.641 13.7336 71.641 16.489V75.1388C71.641 77.8941 69.4074 80.1278 66.6521 80.1278H25.8327C23.0774 80.1278 20.8437 77.8875 20.8438 75.1321C20.8438 56.1849 20.8438 44.6779 20.8438 27.1159C20.8438 25.7961 21.3667 24.528 22.2982 23.593L32.8825 12.968Z" fill="#DADEEB"/>
+<path d="M32.8825 12.968C33.8187 12.0283 35.0905 11.5 36.417 11.5H66.6521C69.4074 11.5 71.641 13.7336 71.641 16.489V75.1388C71.641 77.8941 69.4074 80.1278 66.6521 80.1278H25.8327C23.0774 80.1278 20.8437 77.8875 20.8438 75.1321C20.8438 56.1849 20.8438 44.6779 20.8438 27.1159C20.8438 25.7961 21.3667 24.528 22.2982 23.593L32.8825 12.968Z" fill="white" fill-opacity="0.5"/>
+<path d="M34.3638 11.5V16.1283C34.3638 21.0391 30.3828 25.02 25.472 25.02H20.8438L34.3638 11.5Z" fill="#DADEEB"/>
+<rect x="28.1716" y="32.6677" width="18.7253" height="4.07072" rx="1.99559" fill="#DADEEB"/>
+<rect x="28.1716" y="39.9949" width="36.6365" height="4.07072" rx="1.99559" fill="#DADEEB"/>
+<rect x="28.1716" y="47.3223" width="36.6365" height="4.07072" rx="1.99559" fill="#DADEEB"/>
+<rect x="28.1716" y="54.6497" width="36.6365" height="4.07072" rx="1.99559" fill="#DADEEB"/>
+<rect x="28.1716" y="61.9768" width="36.6365" height="4.07072" rx="1.99559" fill="#DADEEB"/>
+<path d="M58.7737 63.8789C63.267 59.3856 70.5519 59.3856 75.0452 63.8789C79.5382 68.3722 79.5384 75.6572 75.0452 80.1504C70.552 84.6436 63.267 84.6434 58.7737 80.1504C54.2804 75.6571 54.2804 68.3722 58.7737 63.8789Z" stroke="#54A0F9" stroke-width="1.70457"/>
+<path d="M75.6475 80.1499L81.9753 86.4778" stroke="#54A0F9" stroke-width="1.70457"/>
+</svg>

package/dist/cjs/index.js

@@ -721,12 +721,29 @@ var variantConfig$2 = {
 
 function Banner(_a) {
     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;
+    var textRef = React.useRef(null);
+    var _d = React.useState(false), isMultiLine = _d[0], setIsMultiLine = _d[1];
+    React.useLayoutEffect(function () {
+        var textElement = textRef.current;
+        if (!textElement)
+            return;
+        var observer = new ResizeObserver(function () {
+            var computedStyle = window.getComputedStyle(textElement);
+            var lineHeight = parseFloat(computedStyle.lineHeight);
+            var height = textElement.clientHeight;
+            if (lineHeight && height) {
+                setIsMultiLine(height > lineHeight * 1.5);
+            }
+        });
+        observer.observe(textElement);
+        return function () { return observer.disconnect(); };
+    }, [children]);
     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$2[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" }, 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$2[variant].focus), type: "button", onClick: function () { return onClose(false); } },
-                    React.createElement(TbX, { className: "text-[18px] ".concat(variantConfig$2[variant].hover, " ").concat(variantConfig$2[variant].active) })))))));
+        return (React.createElement("div", { className: "relative flex min-h-fit w-full justify-center gap-x-[15px] py-[22px] pl-[15px] pr-[48px] text-size-base font-semibold text-white ".concat(variantConfig$2[variant].bg, " ").concat(isMultiLine ? 'items-start' : 'items-center') },
+            React.createElement("div", { className: "font-segoe text-[14px] font-semibold leading-[21px]", ref: textRef }, children),
+            React.createElement("div", { className: "absolute right-[15px]", style: { display: closeable ? 'block' : 'none' } },
+                React.createElement("button", { className: "flex h-[18px] w-[18px] items-center justify-center text-xs text-white outline-2 ".concat(variantConfig$2[variant].focus), type: "button", onClick: function () { return onClose(false); } },
+                    React.createElement(TbX, { className: "text-[18px] ".concat(variantConfig$2[variant].hover, " ").concat(variantConfig$2[variant].active) })))));
     }
 }
 Banner.defaultProps = {
@@ -1745,17 +1762,24 @@ function Color() {
             }))));
 }
 
-var BORDER_COLOR = {
-    countdown: 'border-bia-blue',
-    success: 'border-bia-green',
-};
 var Countdown = React.forwardRef(function (_a, ref) {
-    var seconds = _a.seconds, _b = _a.variant, variant = _b === void 0 ? 'countdown' : _b, className = _a.className, props = __rest(_a, ["seconds", "variant", "className"]);
+    var seconds = _a.seconds, maxSeconds = _a.maxSeconds, _b = _a.variant, variant = _b === void 0 ? 'countdown' : _b, className = _a.className, props = __rest(_a, ["seconds", "maxSeconds", "variant", "className"]);
     var isCountdown = variant === 'countdown';
-    var borderColor = BORDER_COLOR[variant];
-    return (React.createElement("div", __assign({ ref: ref, role: isCountdown ? 'timer' : 'status', "aria-live": "polite", "aria-atomic": "true", className: cn('flex aspect-square w-[120px] flex-col items-center justify-center rounded-radius-full border-[3px]', borderColor, className) }, props), isCountdown ? (React.createElement(React.Fragment, null,
-        React.createElement(Heading, { variant: "2" }, seconds),
-        React.createElement(Text, { variant: "small-text", className: "font-segoe text-bia-coolgrey" }, seconds === 1 ? 'second' : 'seconds'))) : (React.createElement(TbCheck, { size: 46, className: "text-bia-green", "aria-label": "Countdown complete" }))));
+    var strokeWidth = 3;
+    var size = 120;
+    var radius = (size - strokeWidth) / 2;
+    var circumference = 2 * Math.PI * radius;
+    // Calculate how much stroke to show based on time remaining
+    var strokeDashoffset = circumference - (seconds / maxSeconds) * circumference;
+    return (React.createElement("div", __assign({ ref: ref, role: isCountdown ? 'timer' : 'status', "aria-live": "polite", "aria-atomic": "true", className: cn('relative flex aspect-square w-[120px] flex-col items-center justify-center rounded-radius-full', className) }, props, { style: { width: size, height: size } }),
+        React.createElement("svg", { className: "absolute left-0 top-0 -rotate-90 transform" // Rotates SVG so progress starts at 12 o'clock
+            , width: size, height: size },
+            React.createElement("circle", { className: "text-bia-blue-light-90", stroke: "currentColor", fill: "transparent", strokeWidth: strokeWidth, cx: size / 2, cy: size / 2, r: radius }),
+            isCountdown && (React.createElement("circle", { className: "text-bia-blue transition-all ease-linear ".concat(seconds !== maxSeconds ? 'duration-1000' : 'duration-0'), stroke: "currentColor", fill: "transparent", strokeWidth: strokeWidth, strokeDasharray: circumference, strokeDashoffset: strokeDashoffset, strokeLinecap: "round", cx: size / 2, cy: size / 2, r: radius })),
+            React.createElement("circle", { className: "origin-center scale-y-[-1] text-bia-green transition-all ease-linear ".concat(isCountdown ? 'duration-0' : 'duration-1000'), stroke: "currentColor", fill: "transparent", strokeWidth: strokeWidth, strokeDasharray: circumference, strokeDashoffset: circumference - (isCountdown ? 0 : 1 / 1) * circumference, strokeLinecap: "round", cx: size / 2, cy: size / 2, r: radius })),
+        isCountdown ? (React.createElement(React.Fragment, null,
+            React.createElement(Heading, { key: seconds, variant: "2", className: "animate-number-drop" }, seconds),
+            React.createElement(Text, { variant: "small-text", className: "font-segoe text-bia-coolgrey" }, seconds <= 1 ? 'second' : 'seconds'))) : (React.createElement(TbCheck, { size: 46, className: "text-bia-green", "aria-label": "Countdown complete" }))));
 });
 Countdown.displayName = 'Countdown';
 
@@ -1956,6 +1980,8 @@ var getContextualPopupStyle = function (anchorRef, popupRef, position) {
     var popupRect = popupRef.current.getBoundingClientRect();
     var popupHeight = popupRect.height;
     var popupWidth = popupRect.width;
+    console.log('popupHeight', popupHeight);
+    console.log('anchorHeight', anchorRect.height);
     switch (position) {
         case 'top':
             style.top = "".concat(anchorRect.top - popupHeight + window.scrollY - 5, "px");
@@ -2239,12 +2265,12 @@ function Tooltip(props) {
     }, [content, maxWidth, scrollWidth, offsetHeight]);
     return (React.createElement("div", { className: "tooltip-wrapper relative inline-flex h-fit w-fit flex-col", onMouseEnter: showTip, onMouseLeave: hideTip, ref: anchorRef },
         children,
-        active && (React.createElement(TooltipItem, { anchorRef: anchorRef, direction: direction, content: content, tooltipContainerRef: tooltipContainerRef, tooltipContainerStyle: tooltipContainerStyle, bgColor: bgColor, textColor: textColor, zIndex: zIndex, className: className, style: style }))));
+        React.createElement(TooltipItem, { anchorRef: anchorRef, direction: direction, content: content, tooltipContainerRef: tooltipContainerRef, tooltipContainerStyle: tooltipContainerStyle, bgColor: bgColor, textColor: textColor, zIndex: zIndex, className: className, style: style, active: active })));
 }
 var TooltipItem = function (_a) {
-    var anchorRef = _a.anchorRef, className = _a.className, content = _a.content, direction = _a.direction, style = _a.style, tooltipContainerRef = _a.tooltipContainerRef, tooltipContainerStyle = _a.tooltipContainerStyle, _b = _a.bgColor, bgColor = _b === void 0 ? 'bia-black' : _b, _c = _a.textColor, textColor = _c === void 0 ? 'bia-white' : _c, zIndex = _a.zIndex;
+    var anchorRef = _a.anchorRef, className = _a.className, content = _a.content, direction = _a.direction, style = _a.style, tooltipContainerRef = _a.tooltipContainerRef, tooltipContainerStyle = _a.tooltipContainerStyle, _b = _a.bgColor, bgColor = _b === void 0 ? 'bia-black' : _b, _c = _a.textColor, textColor = _c === void 0 ? 'bia-white' : _c, zIndex = _a.zIndex, _d = _a.active, active = _d === void 0 ? false : _d;
     var positionStyle = usePopupPosition(anchorRef, tooltipContainerRef, direction)[0];
-    return reactDom.createPortal(React.createElement("div", { className: "tooltip-container break-word absolute inline-block break-all rounded-[4px] bg-".concat(bgColor, " px-[7px] py-[4px] text-size-sm text-").concat(textColor, " ").concat(className), style: __assign(__assign(__assign({ zIndex: zIndex }, positionStyle), tooltipContainerStyle), style), ref: tooltipContainerRef }, content), document.body);
+    return reactDom.createPortal(React.createElement("div", { className: "tooltip-container break-word absolute inline-block break-all rounded-[4px] bg-".concat(bgColor, " px-[7px] py-[4px] text-size-sm text-").concat(textColor, " ").concat(className), style: __assign(__assign(__assign(__assign({ zIndex: zIndex }, positionStyle), tooltipContainerStyle), style), { visibility: active ? 'visible' : 'hidden' }), ref: tooltipContainerRef }, content), document.body);
 };
 Tooltip.defaultProps = {
     delay: 400,
@@ -2521,7 +2547,7 @@ var sizeUnion$3 = ['md', 'sm', 'tn'];
 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, label = _a.label, _d = _a.onChange, onChange = _d === void 0 ? function () { } : _d, _e = _a.isIndeterminate, isIndeterminate = _e === void 0 ? false : _e, props = __rest(_a, ["disabled", "id", "size", "label", "onChange", "isIndeterminate"]);
     var _f = sizeConfig$9[validUnion(size, sizeUnion$3)], checkClass = _f.checkClass, labelClass = _f.labelClass;
-    var isValidIndeterminate = isIndeterminate && props.checked && !disabled;
+    var isValidIndeterminate = isIndeterminate && props.checked;
     var backgroundClass = size === 'tn' && props.checked ? 'bg-bia-blue' : 'bg-bia-white';
     var peerCheckedClass = size === 'tn' ? '' : 'peer-checked:border-2';
     return (React.createElement("div", { className: "flex items-center" },
@@ -2619,10 +2645,10 @@ DefaultDropdownItem.defaultProps = {
 
 var sizeUnion$2 = ['md', 'sm'];
 function SelectInput(_a) {
-    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, id = _a.id, _d = _a.isValid, isValid = _d === void 0 ? null : _d, label = _a.label, _e = _a.options, options = _e === void 0 ? [] : _e, _f = _a.required, required = _f === void 0 ? false : _f, selected = _a.selected, setSelected = _a.setSelected, _g = _a.onClickDropdown, onClickDropdown = _g === void 0 ? function () { } : _g, children = _a.children, _h = _a.dropContProps, _j = _h === void 0 ? {} : _h, _k = _j.className, dropContClassName = _k === void 0 ? '' : _k, restDropContProps = __rest(_j, ["className"]), props = __rest(_a, ["descText", "disabled", "size", "id", "isValid", "label", "options", "required", "selected", "setSelected", "onClickDropdown", "children", "dropContProps"]);
-    var _l = React.useState(false), isOpen = _l[0], setIsOpen = _l[1];
+    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, _d = _a.isValid, isValid = _d === void 0 ? null : _d, label = _a.label, _e = _a.options, options = _e === void 0 ? [] : _e, _f = _a.readOnly, readOnly = _f === void 0 ? false : _f, _g = _a.required, required = _g === void 0 ? false : _g, selected = _a.selected, setSelected = _a.setSelected, _h = _a.onClickDropdown, onClickDropdown = _h === void 0 ? function () { } : _h, children = _a.children, _j = _a.dropContProps, _k = _j === void 0 ? {} : _j, _l = _k.className, dropContClassName = _l === void 0 ? '' : _l, restDropContProps = __rest(_k, ["className"]), props = __rest(_a, ["descText", "disabled", "size", "id", "isValid", "label", "options", "readOnly", "required", "selected", "setSelected", "onClickDropdown", "children", "dropContProps"]);
+    var _m = React.useState(false), isOpen = _m[0], setIsOpen = _m[1];
     var validatedSize = validUnion(size, sizeUnion$2);
-    var _m = sizeConfig$8[validatedSize], searchSize = _m.searchSize, iconSize = _m.iconSize;
+    var _o = sizeConfig$8[validatedSize], searchSize = _o.searchSize, iconSize = _o.iconSize;
     var inputRef = React.useRef(null);
     var isObjectOptionItem = false;
     if (options.every(function (item) { return typeof item === 'object' && item !== null; }))
@@ -2638,12 +2664,10 @@ function SelectInput(_a) {
     if (!disabled && isExistValidation && !isValid)
         descColor = 'text-bia-red';
     var disabledClass = disabled ? 'cursor-not-allowed' : '';
-    return (React.createElement("div", { className: "bianic-fgc-container bianic-text-input-container field-group flex w-full flex-col" },
-        React.createElement("label", { htmlFor: id, className: "label pb-2 text-xs font-semibold" },
-            childrenElement(label),
-            required && React.createElement("span", { className: "p-1 text-bia-red" }, "*")),
+    return (React.createElement("div", { className: "bianic-fgc-container bianic-text-input-container field-group flex w-full flex-col gap-y-2" },
+        label && (React.createElement(FormLabel, { htmlFor: id, required: required, readOnly: readOnly }, label)),
         React.createElement("div", { className: "group relative w-full ".concat(disabledClass) },
-            React.createElement("input", __assign({ className: "bianic-fgc-target field peer w-full  cursor-pointer rounded border border-bia-grey-dark-10 bg-primary-white pe-8 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:cursor-not-allowed disabled:bg-bia-grey-light-80 disabled:text-bia-coolgrey ".concat(searchSize), onClick: function () { return setIsOpen(!isOpen); }, value: selectedLabel, readOnly: true, id: id, disabled: disabled, ref: inputRef }, props)),
+            React.createElement("input", __assign({ className: "bianic-fgc-target field peer w-full cursor-pointer rounded border border-bia-grey-dark-10 bg-primary-white pe-8 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:cursor-not-allowed disabled:bg-bia-grey-light-80 disabled:text-bia-coolgrey ".concat(searchSize), onClick: function () { return setIsOpen(!isOpen); }, value: selectedLabel, readOnly: true, id: id, disabled: disabled, ref: inputRef }, props)),
             React.createElement("div", { className: "pointer-events-none absolute inset-y-0 flex items-center pl-3 text-bia-coolgrey peer-disabled:text-bia-coolgrey-light-50 ".concat(iconSize) }, isOpen ? React.createElement(TbChevronUp, null) : React.createElement(TbChevronDown, null)),
             children === undefined && isOpen && (React.createElement("div", { className: "absolute z-10 w-full rounded-b-md border border-bia-grey-dark-10 bg-primary-white shadow-lg", ref: optionsRef, onClick: onClickDropdown }, options.map(function (option) {
                 var isSelected = JSON.stringify(option) === JSON.stringify(selected);
@@ -3099,10 +3123,19 @@ var FormGroup = function (_a) {
     var children = _a.children, size = _a.size;
     var validSize = validUnion(size, sizeUnion$1);
     return (React.createElement("div", { className: "bianic-form-group flex items-end" }, React.Children.map(children, function (child) {
-        return React.isValidElement(child)
-            ? // Kirimkan handleItemClick sebagai props onClick ke setiap MenuItem
-                React.cloneElement(child, { size: validSize })
-            : child;
+        var _a;
+        if (!React.isValidElement(child))
+            return child;
+        if (typeof child.type === 'string') {
+            var existingClassName = (_a = child.props.className) !== null && _a !== void 0 ? _a : '';
+            var mergedClassName = [existingClassName, 'bianic-fgc-container']
+                .filter(Boolean)
+                .join(' ');
+            return React.cloneElement(child, {
+                className: mergedClassName,
+            });
+        }
+        return React.cloneElement(child, { size: validSize });
     })));
 };
 
@@ -4040,6 +4073,12 @@ var Port = function (_a) {
         React.createElement("path", { d: "M11.9998 3.81818C16.5185 3.81818 20.1814 7.48121 20.1815 11.9998C20.1815 16.5185 16.5185 20.1815 11.9998 20.1815C7.4812 20.1814 3.81818 16.5185 3.81818 11.9998C3.81827 7.48127 7.48126 3.81828 11.9998 3.81818ZM12.0008 7.09064C11.7838 7.09064 11.5751 7.17744 11.4217 7.33088C11.2684 7.48427 11.1825 7.69214 11.1824 7.909V11.1815H7.909C7.69216 11.1816 7.48421 11.2684 7.33087 11.4217C7.17755 11.5751 7.09166 11.783 7.09161 11.9998C7.09161 12.2168 7.17743 12.4255 7.33087 12.5789C7.48419 12.7321 7.69224 12.8181 7.909 12.8182H11.1824V16.0906C11.1824 16.3076 11.2683 16.5163 11.4217 16.6697C11.5751 16.8231 11.7838 16.909 12.0008 16.909C12.2176 16.9089 12.4256 16.823 12.5789 16.6697C12.7324 16.5163 12.8182 16.3076 12.8182 16.0906V12.8182H16.0916C16.3084 12.8181 16.5164 12.7321 16.6697 12.5789C16.8232 12.4255 16.909 12.2168 16.909 11.9998C16.9089 11.7829 16.8231 11.5751 16.6697 11.4217C16.5164 11.2683 16.3085 11.1816 16.0916 11.1815H12.8182V7.909C12.8182 7.69213 12.7322 7.48428 12.5789 7.33088C12.4256 7.17755 12.2176 7.09076 12.0008 7.09064Z", fill: "inherit" })));
 };
 
+var Rhombus = function (_a) {
+    var className = _a.className, _b = _a.fill, fill = _b === void 0 ? 'currentColor' : _b, _c = _a.size, size = _c === void 0 ? 20 : _c;
+    return (React.createElement("svg", { className: className, width: size, height: size, viewBox: "0 0 24 24", fill: fill, xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("path", { d: "M11.5884 7.24696C11.8417 7.09495 12.1583 7.09495 12.4116 7.24696L18.8567 11.114C19.3745 11.4247 19.3745 12.1753 18.8567 12.486L12.4116 16.353C12.1583 16.505 11.8417 16.505 11.5884 16.353L5.14332 12.486C4.62545 12.1753 4.62545 11.4247 5.14332 11.114L11.5884 7.24696Z", fill: "inherit" })));
+};
+
 var SelectAllAdd = function (_a) {
     var className = _a.className, _b = _a.fill, fill = _b === void 0 ? 'currentColor' : _b, _c = _a.size, size = _c === void 0 ? 20 : _c;
     return (React.createElement("svg", { className: className, width: size, height: size, viewBox: "0 0 24 24", fill: fill, xmlns: "http://www.w3.org/2000/svg" },
@@ -4067,10 +4106,13 @@ var Stack = function (_a) {
         React.createElement("path", { d: "M11.5884 7.24696C11.8417 7.09495 12.1583 7.09495 12.4116 7.24696L18.8567 11.114C19.3745 11.4247 19.3745 12.1753 18.8567 12.486L12.4116 16.353C12.1583 16.505 11.8417 16.505 11.5884 16.353L5.14332 12.486C4.62545 12.1753 4.62545 11.4247 5.14332 11.114L11.5884 7.24696Z", fill: "inherit" })));
 };
 
-var Rhombus = function (_a) {
+var Unlinked = function (_a) {
     var className = _a.className, _b = _a.fill, fill = _b === void 0 ? 'currentColor' : _b, _c = _a.size, size = _c === void 0 ? 20 : _c;
     return (React.createElement("svg", { className: className, width: size, height: size, viewBox: "0 0 24 24", fill: fill, xmlns: "http://www.w3.org/2000/svg" },
-        React.createElement("path", { d: "M11.5884 7.24696C11.8417 7.09495 12.1583 7.09495 12.4116 7.24696L18.8567 11.114C19.3745 11.4247 19.3745 12.1753 18.8567 12.486L12.4116 16.353C12.1583 16.505 11.8417 16.505 11.5884 16.353L5.14332 12.486C4.62545 12.1753 4.62545 11.4247 5.14332 11.114L11.5884 7.24696Z", fill: "inherit" })));
+        React.createElement("path", { d: "M21.293 16.293C21.6835 15.9025 22.3165 15.9024 22.707 16.293C23.0975 16.6835 23.0975 17.3165 22.707 17.707L20.9141 19.5L22.707 21.293C23.0975 21.6835 23.0975 22.3165 22.707 22.707C22.3165 23.0975 21.6835 23.0975 21.293 22.707L19.5 20.9141L17.707 22.707C17.3165 23.0975 16.6835 23.0975 16.293 22.707C15.9024 22.3165 15.9024 21.6835 16.293 21.293L18.0859 19.5L16.293 17.707C15.9024 17.3165 15.9024 16.6835 16.293 16.293C16.6835 15.9025 17.3165 15.9024 17.707 16.293L19.5 18.0859L21.293 16.293Z", fill: "#2F2F2F" }),
+        React.createElement("path", { d: "M5.33789 10.251C5.75171 9.88533 6.38331 9.92416 6.74902 10.3379C7.11467 10.7517 7.07583 11.3833 6.66211 11.749L6.16016 12.1924C5.79549 12.5578 5.50566 12.9912 5.30664 13.4678C5.10428 13.9525 5.00006 14.4728 5 14.998C5 15.5234 5.10422 16.0445 5.30664 16.5293C5.50905 17.0139 5.80525 17.454 6.17871 17.8232C6.94016 18.5762 7.9682 18.9979 9.03906 18.998C10.0861 18.998 11.0926 18.5947 11.8486 17.873L12.1973 17.4033C12.5268 16.9601 13.1535 16.8678 13.5967 17.1973C14.0399 17.5268 14.1322 18.1535 13.8027 18.5967L13.4053 19.1309C13.3751 19.1714 13.3416 19.2096 13.3057 19.2451C12.1697 20.3683 10.6365 20.998 9.03906 20.998C7.44166 20.9979 5.90831 20.3683 4.77246 19.2451C4.21094 18.6898 3.76524 18.0285 3.46094 17.2998C3.15659 16.5709 3 15.788 3 14.998C3.00006 14.2083 3.15665 13.4261 3.46094 12.6973C3.76524 11.9685 4.21094 11.3072 4.77246 10.752C4.78565 10.7389 4.79958 10.7262 4.81348 10.7139L5.33789 10.251Z", fill: "#2F2F2F" }),
+        React.createElement("path", { d: "M14.293 8.29297C14.6835 7.90244 15.3165 7.90244 15.707 8.29297C16.0976 8.68349 16.0976 9.31651 15.707 9.70703L9.70703 15.707C9.31651 16.0976 8.68349 16.0976 8.29297 15.707C7.90244 15.3165 7.90244 14.6835 8.29297 14.293L14.293 8.29297Z", fill: "#2F2F2F" }),
+        React.createElement("path", { d: "M14.999 3C16.5903 3.00014 18.116 3.6325 19.2412 4.75781C20.3663 5.88307 20.999 7.40877 20.999 9C20.9989 10.5913 20.3665 12.118 19.2412 13.2432C19.2247 13.2597 19.2071 13.2757 19.1895 13.291L18.6562 13.7549C18.2394 14.1171 17.6074 14.073 17.2451 13.6562C16.8829 13.2394 16.927 12.6074 17.3438 12.2451L17.8506 11.8057C18.5863 11.0578 18.999 10.0499 18.999 9C18.999 7.93919 18.5772 6.92206 17.8271 6.17188C17.0771 5.42168 16.0599 5.00014 14.999 5C13.9496 4.99993 12.9422 5.41159 12.1943 6.14648L11.7568 6.65332C11.3959 7.07118 10.7646 7.11762 10.3467 6.75684C9.92881 6.39588 9.88237 5.76463 10.2432 5.34668L10.7061 4.81055C10.722 4.79214 10.7387 4.77404 10.7559 4.75684C11.8812 3.63164 13.4076 2.99989 14.999 3Z", fill: "#2F2F2F" })));
 };
 
 var VirtualPort = function (_a) {
@@ -4273,65 +4315,76 @@ Pills.defaultProps = {
 var classConfig = {
     top: {
         tooltipContainer: 'bottom-[calc(100%+10px)]  left-1/2  -translate-x-1/2',
-        triangleContainer: 'left-0 -bottom-[4px] flex justify-center w-full h-auto',
-        triangleShape: 'border-l-[8px] border-l-transparent border-t-[5px] border-t-primary-black border-r-[8px] border-r-transparent',
+        // Positioned at the bottom, pointing down: needs right and bottom borders
+        triangleContainer: 'left-0 -bottom-[3px] flex justify-center w-full h-auto',
+        triangleBorders: 'border-r border-b',
     },
     right: {
         tooltipContainer: 'left-[calc(100%+10px)] top-1/2 -translate-y-1/2',
-        triangleContainer: '-left-[4px] bottom-0 flex items-center w-auto h-full',
-        triangleShape: 'border-t-[8px] border-t-transparent border-r-[5px] border-r-primary-black border-b-[8px] border-b-transparent',
+        // Positioned on the left, pointing left: needs bottom and left borders
+        triangleContainer: '-left-[3px] bottom-0 flex items-center w-auto h-full',
+        triangleBorders: 'border-b border-l',
     },
     bottom: {
-        tooltipContainer: 'top-[calc(100%+10px)]  left-1/2  -translate-x-1/2',
-        triangleContainer: 'px-[10px] left-0 -top-[9px] flex justify-center w-full h-auto',
-        triangleShape: 'border-l-[8px] border-l-transparent border-b-[5px] border-b-primary-black border-r-[8px] border-r-transparent',
+        tooltipContainer: 'top-[calc(100%+20px)]  left-1/2  -translate-x-1/2',
+        // Positioned at the top, pointing up: needs left and top borders
+        triangleContainer: 'px-[10px] left-0 -top-[3px] flex justify-center w-full h-auto',
+        triangleBorders: 'border-l border-t',
     },
     left: {
         tooltipContainer: 'right-[calc(100%+10px)] top-1/2 -translate-y-1/2',
-        triangleContainer: '-right-[4px] bottom-0 flex items-center w-auto h-full',
-        triangleShape: 'border-t-[8px] border-t-transparent border-l-[5px] border-l-primary-black border-b-[8px] border-b-transparent',
+        // Positioned on the right, pointing right: needs top and right borders
+        triangleContainer: '-right-[3px] bottom-0 flex items-center w-auto h-full',
+        triangleBorders: 'border-t border-r',
     },
     'top-right': {
         tooltipContainer: 'bottom-[calc(100%+10px)] right-0',
-        triangleContainer: 'px-[10px] left-0 -bottom-[4px] flex justify-end w-full h-auto',
-        triangleShape: 'border-l-[8px] border-l-transparent border-t-[5px] border-t-primary-black border-r-[8px] border-r-transparent',
+        triangleContainer: 'px-[10px] left-0 -bottom-[3px] flex justify-end w-full h-auto',
+        triangleBorders: 'border-r border-b',
     },
     'top-left': {
         tooltipContainer: 'bottom-[calc(100%+10px)] left-0',
-        triangleContainer: 'px-[10px] left-0 -bottom-[4px] flex justify-start w-full h-auto',
-        triangleShape: 'border-l-[8px] border-l-transparent border-t-[5px] border-t-primary-black border-r-[8px] border-r-transparent',
+        triangleContainer: 'px-[10px] left-0 -bottom-[3px] flex justify-start w-full h-auto',
+        triangleBorders: 'border-r border-b',
     },
     'bottom-right': {
         tooltipContainer: 'top-[calc(100%+10px)]  right-0',
-        triangleContainer: 'px-[10px] left-0 -top-[9px] flex justify-end w-full h-auto',
-        triangleShape: 'border-l-[8px] border-l-transparent border-b-[5px] border-b-primary-black border-r-[8px] border-r-transparent',
+        triangleContainer: 'px-[10px] left-0 -top-[3px] flex justify-end w-full h-auto',
+        triangleBorders: 'border-l border-t',
     },
     'bottom-left': {
         tooltipContainer: 'top-[calc(100%+10px)]  left-0',
-        triangleContainer: 'px-[10px] left-0 -top-[9px] flex justify-start w-full h-auto',
-        triangleShape: 'border-l-[8px] border-l-transparent border-b-[5px] border-b-primary-black border-r-[8px] border-r-transparent',
+        triangleContainer: 'px-[10px] left-0 -top-[3px] flex justify-start w-full h-auto',
+        triangleBorders: 'border-l border-t',
     },
 };
 
 function Popover(_a) {
-    var className = _a.className, children = _a.children, content = _a.content, _b = _a.direction, direction = _b === void 0 ? 'bottom' : _b; _a.maxWidth; var _c = _a.title, title = _c === void 0 ? '' : _c, style = _a.style, zIndex = _a.zIndex;
+    var className = _a.className, children = _a.children, content = _a.content, _b = _a.direction, direction = _b === void 0 ? 'bottom' : _b; _a.maxWidth; var _c = _a.title, title = _c === void 0 ? '' : _c, style = _a.style, zIndex = _a.zIndex, _d = _a.color, color = _d === void 0 ? 'black' : _d;
     var wrapperRef = React.useRef(null);
-    var _d = useDetectOutsideClick(wrapperRef, false), isOpen = _d[0], setIsOpen = _d[1];
+    var _e = useDetectOutsideClick(wrapperRef, false), isOpen = _e[0], setIsOpen = _e[1];
     return (React.createElement("div", { className: "Bianic-popover-Wrapper relative block h-fit w-fit", role: "button", ref: wrapperRef, onClick: function () { return setIsOpen(true); } },
         children,
-        isOpen && (React.createElement(PopoverItem, { title: title, content: content, anchorRef: wrapperRef, direction: direction, className: className, style: style, zIndex: zIndex }))));
+        isOpen && (React.createElement(PopoverItem, { title: title, content: content, anchorRef: wrapperRef, direction: direction, className: className, style: style, zIndex: zIndex, color: color }))));
 }
 var PopoverItem = function (_a) {
-    var title = _a.title, content = _a.content, anchorRef = _a.anchorRef, direction = _a.direction, className = _a.className, style = _a.style, zIndex = _a.zIndex;
+    var title = _a.title, content = _a.content, anchorRef = _a.anchorRef, direction = _a.direction, className = _a.className, style = _a.style, zIndex = _a.zIndex, _b = _a.color, color = _b === void 0 ? 'black' : _b;
     var popoverRef = React.useRef(null);
     var positionStyle = usePopupPosition(anchorRef, popoverRef, direction)[0];
-    var _b = classConfig[direction], triangleContainer = _b.triangleContainer, triangleShape = _b.triangleShape;
-    return reactDom.createPortal(React.createElement("div", { ref: popoverRef, style: __assign(__assign(__assign({}, positionStyle), style), { zIndex: zIndex }), className: "Bianic-popover-Tip text-bia-sm absolute z-50 w-[245px] space-y-[5px] rounded-[4px] bg-primary-black px-[20px] py-[17.5px] text-primary-white ".concat(className) },
-        React.createElement("div", { className: "flex flex-col" },
+    var _c = classConfig[direction], triangleContainer = _c.triangleContainer, triangleBorders = _c.triangleBorders;
+    var triangleThemeClasses = color === 'white'
+        ? "".concat(triangleBorders, " border-bia-grey bg-primary-white")
+        : 'bg-primary-black';
+    var colorClass = color === 'black'
+        ? 'bg-primary-black text-primary-white'
+        : 'bg-primary-white border border-bia-grey text-primary-black';
+    console.log('positionStyle', positionStyle);
+    return reactDom.createPortal(React.createElement("div", { ref: popoverRef, style: __assign(__assign(__assign({}, positionStyle), style), { zIndex: zIndex }), className: "Bianic-popover absolute z-50 w-fit" },
+        React.createElement("div", { className: "text-bia-sm flex w-[245px] flex-col space-y-[5px] rounded-[4px] px-[20px] py-[17.5px] ".concat(colorClass, " ").concat(className) },
             React.createElement("div", { className: "mb-[5px] font-humnst777 text-[16px] font-bold leading-[19.42px]" }, title),
             React.createElement("div", { className: "break-words font-segoe text-[12px] font-normal" }, content)),
-        React.createElement("div", { className: "triangle absolute ".concat(triangleContainer) },
-            React.createElement("div", { className: "h-0 w-0 ".concat(triangleShape) }))), document.body);
+        React.createElement("div", { className: "triangle absolute ".concat(triangleContainer, " pointer-events-none") },
+            React.createElement("div", { className: "h-[7px] w-[7px] rotate-45 transform ".concat(triangleThemeClasses) }))), document.body);
 };
 Popover.defaultProps = {
     direction: 'top',
@@ -4558,21 +4611,20 @@ SidebarContainer.displayName = 'SidebarContainer';
 var SidebarMenu = function (_a) {
     var _b = _a.color, color = _b === void 0 ? 'margueriteblue-dark-30' : _b, children = _a.children, _c = _a.isMinimized, isMinimized = _c === void 0 ? false : _c, _d = _a.activeId, activeId = _d === void 0 ? undefined : _d, _e = _a.setActiveId, setActiveId = _e === void 0 ? function () { } : _e;
     var _f = React.useState(false), isAllExpanded = _f[0], setIsAllExpanded = _f[1];
-    var menuClass = "transition-sidebar-menu-menu h-[60px]";
     var minimizedMenuClass = isMinimized
         ? 'opacity-100 h-1 w-full delay-[600ms] duration-300 ease-[cubic-bezier(0.68,-0.1,0.32,2)]'
-        : 'opacity-0 w-0 duration-200';
+        : 'opacity-0 h-1 w-full duration-500 ease-[cubic-bezier(0.32,-1,0.68,1)]';
     return (React.createElement("div", null,
-        React.createElement("div", { className: "relative flex w-full text-bia-white ".concat(menuClass) },
+        React.createElement("div", { className: "relative flex h-[60px] w-full text-bia-white" },
             React.createElement("div", { className: "absolute left-0 top-[27.5px] px-[17px] ".concat(minimizedMenuClass) },
-                React.createElement("div", { className: "h-[1px] w-full bg-white" })),
-            React.createElement("div", { className: "absolute bottom-[11px] flex w-full justify-between pl-[78px] pr-[25px]" },
+                React.createElement("div", { className: "h-[1px] w-full bg-white opacity-35" })),
+            React.createElement("div", { className: cn('transition-sidebar-item absolute bottom-[11px] flex w-full justify-between pr-[25px]', isMinimized ? 'pl-[58px]' : 'pl-[78px]') },
                 React.createElement(Text, { variant: "small-text", className: cn('truncate text-bia-white delay-[400ms]', isMinimized
                         ? 'opacity-0 duration-300 ease-in-out'
                         : 'opacity-75 delay-1000 duration-700 ease-in-out') }, "Menu"),
                 React.createElement(ContextualButton, { onClick: function () { return setIsAllExpanded(function (prev) { return !prev; }); }, icon: React.createElement(TbChevronsDown, { className: cn('truncate text-bia-white delay-[400ms]', isMinimized
                             ? 'opacity-0 duration-300 ease-in-out'
-                            : 'opacity-100 delay-1000 duration-700 ease-in-out'), size: 18 }), className: "ml-auto opacity-50 hover:opacity-100 ".concat(isAllExpanded ? 'rotate-180' : '') }))),
+                            : 'opacity-100 delay-1000 duration-700 ease-in-out'), size: 18 }), className: "ml-auto opacity-50 duration-300 ease-in hover:opacity-100 ".concat(isAllExpanded ? 'rotate-180' : '') }))),
         React.Children.map(children, function (child) {
             return React.isValidElement(child)
                 ? React.cloneElement(child, {
@@ -5193,10 +5245,10 @@ var EmptyTable = function (_a) {
 
 var tableSizeOption = [10, 20, 50, 100, 999];
 var TableFooterController = function (_a) {
-    var currentPage = _a.currentPage, totalPages = _a.totalPages, pageSize = _a.pageSize, setCurrentPage = _a.setCurrentPage, setPageSize = _a.setPageSize, isLoading = _a.isLoading;
+    var currentPage = _a.currentPage, totalPages = _a.totalPages, pageSize = _a.pageSize, setCurrentPage = _a.setCurrentPage, setPageSize = _a.setPageSize, isLoading = _a.isLoading, _b = _a.size, size = _b === void 0 ? 'sm' : _b;
     // Table Button
     var tableSizeRef = React.useRef(null);
-    var _b = React.useState(false), isShownTableSizeDropdown = _b[0], setIsShownTableSizeDropdown = _b[1];
+    var _c = React.useState(false), isShownTableSizeDropdown = _c[0], setIsShownTableSizeDropdown = _c[1];
     var handlePageSizeChange = function (size) {
         setPageSize(size);
         setCurrentPage(1);
@@ -5206,19 +5258,22 @@ var TableFooterController = function (_a) {
         var displayValue = value === 999 ? 'All' : value;
         return React.createElement(DropdownItem, { key: value, content: displayValue, value: value });
     })));
-    return (React.createElement("div", { className: "table-controller-footer flex w-full justify-between gap-[5px] rounded-b-radius-lg border-t border-bia-grey bg-bia-grey-light-80 px-2.5 pb-[7px] pt-2" },
+    var paddingSize = size === 'md' ? 'py-2.5 pt-[9px]' : 'py-[3.5px] pt-[4.5px]';
+    return (React.createElement("div", { className: "table-controller-footer flex w-full justify-between gap-[5px] rounded-b-radius-lg border-t border-bia-grey bg-bia-grey-light-80 px-2.5 ".concat(paddingSize) },
         React.createElement("div", { className: "action-container flex gap-[5px]" }, totalPages > 0 && (React.createElement(PaginationBar, { size: "sm", currentPage: currentPage, totalPages: totalPages, onPageChange: setCurrentPage, position: 'center' }))),
         React.createElement(Button, { ref: tableSizeRef, label: pageSizeDisplay, minWidth: 0, size: "sm", iconRight: React.createElement(TbChevronDown, { size: 14 }), onClick: function () { return setIsShownTableSizeDropdown(function (oldState) { return !oldState; }); }, disabled: isLoading, className: "w-fit" }),
         tableSizeDropdown));
 };
 
 var TableHeaderController = function (_a) {
-    var buttonActions = _a.buttonActions, totalData = _a.totalData, firstIndex = _a.firstIndex, lastIndex = _a.lastIndex;
+    var _b = _a.size, size = _b === void 0 ? 'sm' : _b, buttonActions = _a.buttonActions, totalData = _a.totalData, firstIndex = _a.firstIndex, lastIndex = _a.lastIndex;
     var isShowHelperText = totalData || firstIndex || lastIndex;
-    return (React.createElement("div", { className: "table-controller-header flex w-full justify-between rounded-t-radius-lg border-b border-bia-grey bg-bia-grey-light-80 px-2.5 pb-[7px] pt-2" },
+    var paddingSize = size === 'md' ? 'py-[13px] pt-[14px] ' : 'py-[7px] pt-2';
+    var textSize = size === 'md' ? 'normal-text' : 'small-text';
+    return (React.createElement("div", { className: "table-controller-header flex w-full justify-between rounded-t-radius-lg border-b border-bia-grey bg-bia-grey-light-80 px-2.5 ".concat(paddingSize) },
         React.createElement("div", { className: "action-container flex grow gap-[5px] pe-2.5" }, buttonActions && (buttonActions === null || buttonActions === void 0 ? void 0 : buttonActions.map(function (button) { return button; }))),
         isShowHelperText && (React.createElement("div", { className: "flex max-h-[22px] items-center font-segoe" },
-            React.createElement(Text, { variant: "small-text", className: "text-bia-coolgrey" },
+            React.createElement(Text, { variant: textSize, className: "text-bia-coolgrey" },
                 "View ",
                 lastIndex === 0 ? 0 : firstIndex,
                 " - ",
@@ -5505,6 +5560,7 @@ exports.BCSelectAllAdd = SelectAllAdd;
 exports.BCSelectAllRemove = SelectAllRemove;
 exports.BCSpinner = Spinner$1;
 exports.BCStack = Stack;
+exports.BCUnlinked = Unlinked;
 exports.BCVirtualPort = VirtualPort;
 exports.Badge = Badge;
 exports.Banner = Banner;