bianic-ui 2.2.0-beta.1 → 2.2.0-beta.2

package/dist/cjs/types/components/Forms/SelectInput/Example/CustomDropdown.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
-declare const CustomDropdown: () => React.JSX.Element;
+import SelectInputProps from '../PropsInterface';
+declare const CustomDropdown: ({ descText, disabled, size, id, isValid, label, options, required, selected, setSelected, onClickDropdown, children, dropContProps: { className: dropContClassName, ...restDropContProps }, ...props }: SelectInputProps) => React.JSX.Element;
 export default CustomDropdown;

package/dist/cjs/types/components/Popover/index.d.ts

@@ -1,8 +1,16 @@
 import React from 'react';
-import { PopoverProps } from './PropInterface';
-declare function Popover({ className, children, content, direction, maxWidth, title, style, zIndex, }: PopoverProps): React.JSX.Element;
+interface PopoverProps {
+    children: React.ReactNode;
+    content: string;
+    delay?: number;
+    direction?: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    title?: string;
+    maxWidth?: string;
+}
+declare function Popover({ children, content, delay, direction, title, maxWidth, }: PopoverProps): React.JSX.Element;
 declare namespace Popover {
     var defaultProps: {
+        delay: number;
         direction: string;
         title: string;
     };

package/dist/cjs/types/components/Tooltip/PropsInterface.d.ts

@@ -1,20 +1,16 @@
-import { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactNode, RefObject } from 'react';
+import { ComponentPropsWithoutRef, ReactNode, RefObject } from 'react';
 interface TooltipProps extends Omit<ComponentPropsWithoutRef<'div'>, 'content'> {
     children: ReactNode;
     content: ReactNode | string;
     delay?: number;
     maxWidth?: string;
-    zIndex?: number;
     direction?: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
 }
 interface TooltipItemProps {
     anchorRef: RefObject<HTMLDivElement>;
-    className?: string;
+    direction?: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
     content: ReactNode | string;
     tooltipContainerRef: React.RefObject<HTMLDivElement>;
     tooltipContainerStyle: React.CSSProperties;
-    style?: ComponentPropsWithRef<'div'>['style'];
-    zIndex: number;
-    direction?: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
 }
 export { TooltipProps, TooltipItemProps };

package/dist/cjs/types/stories/Form/LiveSearch/LivesearchCustomDropdownExample.stories.d.ts

@@ -1,5 +1,5 @@
-import { StoryObj } from "@storybook/react/*";
-import React from "react";
+import { StoryObj } from '@storybook/react/*';
+import React from 'react';
 declare const meta: {
     title: string;
     component: ({ children, ...props }: import("../../../components/Forms/LiveSearch/types").LiveSearchProps) => React.JSX.Element;

package/dist/cjs/types/stories/Form/SelectInput/SelectInputCustom.stories.d.ts

@@ -2,7 +2,7 @@
 import type { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: () => import("react").JSX.Element;
+    component: ({ descText, disabled, size, id, isValid, label, options, required, selected, setSelected, onClickDropdown, children, dropContProps: { className: dropContClassName, ...restDropContProps }, ...props }: import("../../../components/Forms/SelectInput/PropsInterface").default) => import("react").JSX.Element;
     parameters: {
         layout: string;
     };

package/dist/esm/index.js

@@ -1987,15 +1987,15 @@ MenuItem.defaultProps = {
 };
 
 function Tooltip(props) {
-    var children = props.children, content = props.content, delay = props.delay, _a = props.direction, direction = _a === void 0 ? 'top' : _a, _b = props.maxWidth, maxWidth = _b === void 0 ? undefined : _b, _c = props.zIndex, zIndex = _c === void 0 ? 150 : _c, className = props.className, style = props.style;
+    var children = props.children, content = props.content, delay = props.delay, _a = props.direction, direction = _a === void 0 ? 'top' : _a, _b = props.maxWidth, maxWidth = _b === void 0 ? undefined : _b;
     var timeout;
-    var _d = useState(false), active = _d[0], setActive = _d[1];
+    var _c = useState(false), active = _c[0], setActive = _c[1];
     var anchorRef = useRef(null);
     var tooltipContainerRef = useRef(null);
-    var _e = useState({
+    var _d = useState({
         maxWidth: maxWidth + 'px',
         whiteSpace: 'nowrap',
-    }), tooltipContainerStyle = _e[0], setTooltipContainerStyle = _e[1];
+    }), tooltipContainerStyle = _d[0], setTooltipContainerStyle = _d[1];
     var showTip = function () {
         timeout = setTimeout(function () {
             setActive(true);
@@ -2039,12 +2039,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, zIndex: zIndex, className: className, style: style }))));
+        active && (React.createElement(TooltipItem, { anchorRef: anchorRef, direction: direction, content: content, tooltipContainerRef: tooltipContainerRef, tooltipContainerStyle: tooltipContainerStyle }))));
 }
 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, zIndex = _a.zIndex;
+    var anchorRef = _a.anchorRef, direction = _a.direction, content = _a.content, tooltipContainerRef = _a.tooltipContainerRef, tooltipContainerStyle = _a.tooltipContainerStyle;
     var positionStyle = usePopupPosition(anchorRef, tooltipContainerRef, direction)[0];
-    return createPortal(React.createElement("div", { className: "tooltip-container break-word absolute inline-block break-all rounded-[4px] bg-primary-black px-[7px] py-[4px] text-size-sm text-primary-white ".concat(className), style: __assign(__assign(__assign({ zIndex: zIndex }, positionStyle), tooltipContainerStyle), style), ref: tooltipContainerRef }, content), document.body);
+    return createPortal(React.createElement("div", { className: "tooltip-container break-word absolute z-50 inline-block break-all rounded-[4px] bg-primary-black px-[7px] py-[4px] text-size-sm text-primary-white", style: __assign(__assign({}, positionStyle), tooltipContainerStyle), ref: tooltipContainerRef }, content), document.body);
 };
 Tooltip.defaultProps = {
     delay: 400,
@@ -2170,12 +2170,13 @@ var TextInput = forwardRef(function (_a, ref) {
     if (variant === 'date')
         iconElement = React.createElement(TbCalendar, { className: "text-bia-coolgrey", size: 18 });
     var extendedInputClassName = "".concat(fieldStyle, " ").concat(fieldSize, " ").concat(bottomBorderColor, " ").concat(inputClassName, " ").concat(borderStyle);
+    var disabledClass = disabled ? 'cursor-not-allowed' : '';
     return (React.createElement("div", { className: "bianic-text-input-container bianic-fgc-container group/form flex w-full flex-col gap-y-2 text-bia-black" },
         label && (React.createElement(FormLabel, { htmlFor: id, required: required, readOnly: readOnly }, label)),
-        React.createElement("div", { className: "relative w-full" },
-            React.createElement("input", __assign({ className: "bianic-text-input bianic-fgc-target w-full rounded 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(extendedInputClassName), disabled: disabled, id: id, placeholder: placeholder || label, readOnly: readOnly, required: required, type: typeVariant, value: value, onChange: function (e) { return onChange(e); }, maxLength: maxLength, autoComplete: autoComplete, ref: ref }, props)),
+        React.createElement("div", { className: "relative w-full ".concat(disabledClass) },
+            React.createElement("input", __assign({ className: "bianic-text-input bianic-fgc-target w-full rounded 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:cursor-not-allowed disabled:border-bia-grey-dark-10 disabled:bg-bia-grey-light-80 disabled:text-bia-grey-active ".concat(extendedInputClassName), disabled: disabled, id: id, placeholder: placeholder || label, readOnly: readOnly, required: required, type: typeVariant, value: value, onChange: function (e) { return onChange(e); }, maxLength: maxLength, autoComplete: autoComplete, ref: ref }, props)),
             React.createElement("div", { className: "absolute inset-y-0 flex items-center pl-3 ".concat(actionElement ? '' : iconStyle, " ").concat(iconPosition, " ").concat(iconSizing) }, iconElement)),
-        (descText || maxLength) && (React.createElement("div", { className: "bianic-text-input-desc flex justify-between gap-1 text-xs whitespace-nowrap ".concat(descColor) },
+        (descText || maxLength) && (React.createElement("div", { className: "bianic-text-input-desc flex justify-between gap-1 whitespace-nowrap text-xs ".concat(descColor) },
             React.createElement("span", null, descText),
             maxLength && (React.createElement("span", null,
                 remainWords,
@@ -2217,10 +2218,10 @@ function Radio(_a) {
     var validatedSize = validUnion(size, sizeUnion$4);
     var _f = sizeConfig$b[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: 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: disabled ? '#8C8CA6' : '#2f2f2f' } }, childrenElement(label))));
+        React.createElement("div", { className: "relative flex flex-shrink-0 items-center justify-center rounded-full bg-white ".concat(checkSize) },
+            React.createElement("input", { id: id, "aria-labelledby": "label1", type: "radio", className: "checkbox peer absolute box-content h-full w-full cursor-pointer appearance-none rounded-full border-2 border-bia-coolgrey-light-50 checked:border-bia-blue hover:border-bia-blue-hover focus:opacity-100 focus:outline-none focus:ring-1 focus:ring-bia-blue focus:ring-offset-2 disabled:cursor-not-allowed disabled:border-bia-grey-dark-10 checked:disabled:border-bia-blue-disabled", onClick: function (e) { return onClick(e); }, checked: checked, disabled: disabled }),
+            React.createElement("div", { className: "check-icon z-1 group flex h-full w-full justify-center  rounded-full border-2 border-primary-white text-bia-grey outline-2 outline-bia-blue peer-checked:bg-bia-blue peer-checked:hover:border-bia-blue-hover peer-checked:hover:outline-bia-blue-hover peer-checked:peer-hover:bg-bia-blue-hover peer-disabled:border-transparent peer-disabled:bg-bia-grey-light-80 peer-disabled:peer-checked:border-primary-white peer-checked:peer-disabled:bg-bia-blue-disabled" })),
+        React.createElement("label", { htmlFor: id, className: "ml-2 font-[350] leading-4 ".concat(labelSize), style: { color: disabled ? '#8C8CA6' : '#2f2f2f' } }, childrenElement(label))));
 }
 Radio.defaultProps = {
     label: '',
@@ -2256,11 +2257,12 @@ function TextArea(_a) {
     var inputRow = rows !== null && rows !== void 0 ? rows : 4;
     var inputClass = sizeConfig$a[size].inputClass;
     var remainWords = maxLength ? maxLength - (value ? value.length : 0) : 0;
+    var disabledClass = disabled ? 'cursor-not-allowed' : '';
     return (React.createElement("div", { className: "field-group group/form flex w-full flex-col gap-y-2" },
         label && (React.createElement(FormLabel, { htmlFor: id, required: required, readOnly: readOnly }, label)),
-        React.createElement("div", { className: "relative h-fit w-full min-w-[250px]" },
+        React.createElement("div", { className: "relative h-fit w-full min-w-[250px] ".concat(disabledClass) },
             React.createElement(ResizeIcon, { className: "absolute bottom-[11px] right-[5px]" }),
-            React.createElement("textarea", __assign({ className: "field bianic-text-area w-full  rounded border border-bia-grey-dark-10 bg-primary-white p-2.5 read-only:pointer-events-none 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, autoComplete: autoComplete, readOnly: readOnly }, props))),
+            React.createElement("textarea", __assign({ className: "field bianic-text-area w-full  rounded border border-bia-grey-dark-10 bg-primary-white p-2.5 read-only:pointer-events-none 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-grey-active ".concat(inputClass), rows: inputRow, id: id, placeholder: placeholder, disabled: disabled, maxLength: maxLength, value: value, autoComplete: autoComplete, readOnly: readOnly }, 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,
@@ -2299,7 +2301,7 @@ function Checkbox(_a) {
     var _e = sizeConfig$9[validUnion(size, sizeUnion$3)], checkClass = _e.checkClass, labelClass = _e.labelClass;
     return (React.createElement("div", { className: "flex items-center" },
         React.createElement("div", { className: "relative flex flex-shrink-0 items-center justify-center rounded-full bg-white ".concat(checkClass) },
-            React.createElement("input", __assign({ id: id, type: "checkbox", className: "checkbox peer absolute box-content h-full w-full cursor-pointer appearance-none rounded-full border-2 border-bia-coolgrey-light-50 checked:border-bia-blue hover:border-bia-blue-hover focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-bia-blue focus-visible:ring-offset-2 disabled:border-bia-coolgrey-light-50 disabled:checked:border-bia-blue-light-50", onChange: function (e) { return onChange(e); }, disabled: disabled }, props)),
+            React.createElement("input", __assign({ id: id, type: "checkbox", className: "checkbox peer absolute box-content h-full w-full cursor-pointer appearance-none rounded-full border-2 border-bia-coolgrey-light-50 checked:border-bia-blue hover:border-bia-blue-hover focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-bia-blue focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:border-bia-coolgrey-light-50 disabled:checked:border-bia-blue-light-50", onChange: function (e) { return onChange(e); }, disabled: disabled }, props)),
             React.createElement("div", { className: "check-icon z-1 group flex h-full w-full justify-center rounded-full text-bia-grey outline-2 outline-bia-blue peer-checked:border-2 peer-checked:border-primary-white peer-checked:bg-bia-blue peer-checked:hover:border-bia-blue-hover peer-checked:hover:outline-bia-blue-hover peer-checked:peer-hover:bg-bia-blue-hover peer-disabled:bg-bia-grey-light-80 peer-disabled:peer-checked:bg-bia-blue-light-50 peer-disabled:peer-checked:outline-bia-blue-light-50" },
                 React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: " fill-bia-grey-dark-10 peer-checked:group-[]:fill-primary-white peer-hover:group-[]:fill-bia-blue-hover peer-checked:peer-hover:group-[]:fill-primary-white 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" })))),
@@ -2412,12 +2414,13 @@ function SelectInput(_a) {
         descColor = 'text-bia-green';
     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" }, "*")),
-        React.createElement("div", { className: "group relative w-full" },
-            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: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: "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("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);
@@ -2733,7 +2736,7 @@ var useLiveSearch = function (_a) {
 };
 
 function LiveSearch(_a) {
-    var _b = _a.autoComplete, autoComplete = _b === void 0 ? 'off' : _b, _c = _a.children, children = _c === void 0 ? undefined : _c, descText = _a.descText, _d = _a.disabled, disabled = _d === void 0 ? false : _d, dropContProps = _a.dropContProps, id = _a.id; _a.label; var _e = _a.onChangeText, onChangeText = _e === void 0 ? function () { } : _e, _f = _a.onClickDropdown, onClickDropdown = _f === void 0 ? function () { } : _f, options = _a.options, placeholder = _a.placeholder, _g = _a.readOnly, readOnly = _g === void 0 ? false : _g, _h = _a.required, required = _h === void 0 ? false : _h, _j = _a.searchVariant, searchVariant = _j === void 0 ? 'include' : _j, setValue = _a.setValue, _k = _a.size, size = _k === void 0 ? 'md' : _k, _l = _a.isValid, isValid = _l === void 0 ? null : _l, value = _a.value;
+    var _b = _a.autoComplete, autoComplete = _b === void 0 ? 'off' : _b, _c = _a.children, children = _c === void 0 ? undefined : _c, descText = _a.descText, _d = _a.disabled, disabled = _d === void 0 ? false : _d, dropContProps = _a.dropContProps, id = _a.id, label = _a.label, _e = _a.onChangeText, onChangeText = _e === void 0 ? function () { } : _e, _f = _a.onClickDropdown, onClickDropdown = _f === void 0 ? function () { } : _f, options = _a.options, placeholder = _a.placeholder, _g = _a.readOnly, readOnly = _g === void 0 ? false : _g, _h = _a.required, required = _h === void 0 ? false : _h, _j = _a.searchVariant, searchVariant = _j === void 0 ? 'include' : _j, setValue = _a.setValue, _k = _a.size, size = _k === void 0 ? 'md' : _k, _l = _a.isValid, isValid = _l === void 0 ? null : _l, value = _a.value;
     var inputRef = useRef(null);
     var _m = useLiveSearch({
         value: value,
@@ -2752,8 +2755,10 @@ function LiveSearch(_a) {
         descColor = 'text-bia-red';
     var filteredOptions = filterOptions(options || [], value.label);
     var _q = processRenderedChildren(children, searchTerm, searchVariant, handleDropdownItemClick), renderedChildren = _q.renderedChildren, hasFilteredResults = _q.hasFilteredResults;
-    return (React.createElement("div", { className: "bianic-livesearch bianic-fgc-container bianic-text-input-container field-group group/form flex w-full flex-col gap-y-2 " },
-        React.createElement("div", { className: "group relative w-full" },
+    var disabledClass = disabled ? 'cursor-not-allowed' : '';
+    return (React.createElement("div", { className: "bianic-livesearch bianic-fgc-container bianic-text-input-container field-group group/form 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", { className: "bianic-livesearch-input bianic-fgc-target field peer w-full rounded border  border-bia-grey-dark-10 bg-primary-white text-bia-black read-only:pointer-events-none read-only:border-bia-grey-light-50 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:border-bia-grey-dark-10 disabled:bg-bia-grey-light-80 disabled:text-bia-coolgrey ".concat(inputClass), onClick: function () { return setIsOpen(!isOpen); }, value: searchTerm, required: required, disabled: disabled, id: id, placeholder: placeholder, ref: inputRef, onChange: function (e) {
                     onChangeText(e);
                     handleInputChange(e);
@@ -2808,11 +2813,13 @@ var sizeConfig$5 = {
 function Toggle(_a) {
     var _b = _a.label, label = _b === void 0 ? '' : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d, _e = _a.checked, checked = _e === void 0 ? false : _e, _f = _a.id, id = _f === void 0 ? '' : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g;
     var _h = sizeConfig$5[size], containerSize = _h.containerSize, checkSize = _h.checkSize, labelClass = _h.labelClass;
+    var checkedClass = checked ? 'justify-end' : 'justify-start';
+    var containerClass = "".concat(checkedClass, " ").concat(containerSize);
     return (React.createElement("div", { className: "flex items-center" },
-        React.createElement("div", { className: "".concat(containerSize, " rounded-full py-[2px] flex flex-shrink-0 ").concat(checked ? 'justify-end' : 'justify-start', " items-center relative cursor-pointer"), onClick: onClick, onKeyDown: function () { }, role: "checkbox", tabIndex: 0, "aria-checked": checked },
-            React.createElement("input", { id: id, checked: checked, disabled: disabled, className: "".concat(checkSize, " peer checkbox appearance-none opacity-100 focus:ring-1 focus:ring-offset-2 focus:ring-bia-blue focus:outline-none rounded-full border-bia-grey checked:border-bia-blue bg-primary-white checked:bg-bia-blue checked:hover:bg-bia-blue-hover cursor-pointer hover:border-bia-blue-hover peer-hover:border-bia-blue-hover disabled:bg-bia-grey-light-80 disabled:checked:bg-bia-blue-light-50 disabled:border-none border-2 absolute w-full h-full"), type: "checkbox" }),
-            React.createElement("div", { className: "peer check-icon flex m-[2px] text-bia-grey group justify-center border-2 peer-checked:border-bia-blue border-primary-white peer-checked:hover:bg-primary-white peer-checked:bg-primary-white bg-bia-grey peer-checked:peer-hover:bg-primary-white peer-hover:bg-bia-blue-hover peer-disabled:bg-bia-grey-dark-10 peer-disabled:border-none peer-disabled:outline-none peer-disabled:peer-checked:bg-bia-blue-light-90 outline-2 rounded-full w-5/12 h-full z-10" })),
-        React.createElement("label", { htmlFor: id, className: "ml-2 leading-4 font-normal text-grey-800 ".concat(labelClass), style: { color: disabled ? '#8C8CA6' : '' } }, label)));
+        React.createElement("div", { className: "relative flex flex-shrink-0 cursor-pointer items-center rounded-full py-[2px] ".concat(containerClass), onClick: onClick, onKeyDown: function () { }, role: "checkbox", tabIndex: 0, "aria-checked": checked },
+            React.createElement("input", { id: id, checked: checked, disabled: disabled, className: "".concat(checkSize, " checkbox peer absolute h-full w-full cursor-pointer appearance-none rounded-full border-2 border-bia-grey bg-primary-white opacity-100 checked:border-bia-blue checked:bg-bia-blue hover:border-bia-blue-hover checked:hover:bg-bia-blue-hover focus:outline-none focus:ring-1 focus:ring-bia-blue focus:ring-offset-2 disabled:cursor-not-allowed disabled:border-none disabled:bg-bia-grey-light-80 disabled:checked:bg-bia-blue-light-50 peer-hover:border-bia-blue-hover"), type: "checkbox" }),
+            React.createElement("div", { className: "check-icon group peer z-10 m-[2px] flex h-full w-5/12 justify-center rounded-full border-2 border-primary-white bg-bia-grey text-bia-grey outline-2 peer-checked:border-bia-blue peer-checked:bg-primary-white peer-checked:hover:bg-primary-white peer-hover:bg-bia-blue-hover peer-checked:peer-hover:bg-primary-white peer-disabled:cursor-not-allowed peer-disabled:border-none peer-disabled:bg-bia-grey-dark-10 peer-disabled:outline-none peer-disabled:peer-checked:bg-bia-blue-light-90" })),
+        React.createElement("label", { htmlFor: id, className: "text-grey-800 ml-2 font-normal leading-4 ".concat(labelClass), style: { color: disabled ? '#8C8CA6' : '' } }, label)));
 }
 Toggle.defaultProps = {
     label: '',
@@ -3287,7 +3294,7 @@ var DateInputDisplay = forwardRef(function (_a, ref) {
         setIsEditing(false);
         setDateString(value);
     };
-    var input = isEditing ? (React.createElement(TextInput, { type: "text", value: dateString !== null && dateString !== void 0 ? dateString : '', onChange: handleTextChange, onBlur: handleBlur, placeholder: placeholder, size: size, inputClassName: className, autoFocus: true, actionElement: React.createElement("button", { className: "bianic-datepicker-toggle-button text-bia-coolgrey", disabled: disabled, onClick: function () {
+    var input = isEditing || disabled ? (React.createElement(TextInput, { type: "text", value: dateString !== null && dateString !== void 0 ? dateString : '', onChange: handleTextChange, onBlur: handleBlur, placeholder: placeholder, size: size, inputClassName: className, autoFocus: true, disabled: disabled, actionElement: React.createElement("button", { className: "bianic-datepicker-toggle-button text-bia-coolgrey disabled:cursor-not-allowed", disabled: disabled, onClick: function () {
                 buttonAction && buttonAction();
             } },
             React.createElement(TbCalendar, { size: iconSize })) })) : (React.createElement(React.Fragment, null,
@@ -3707,19 +3714,20 @@ var classConfig = {
 };
 
 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 children = _a.children, content = _a.content; _a.delay; var _c = _a.direction, direction = _c === void 0 ? 'bottom' : _c, _d = _a.title, title = _d === void 0 ? '' : _d; _a.maxWidth;
     var wrapperRef = useRef(null);
-    var _d = useDetectOutsideClick(wrapperRef, false), isOpen = _d[0], setIsOpen = _d[1];
+    useRef(null);
+    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 }))));
 }
 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;
     var popoverRef = useRef(null);
     var positionStyle = usePopupPosition(anchorRef, popoverRef, direction)[0];
     var _b = classConfig[direction], triangleContainer = _b.triangleContainer, triangleShape = _b.triangleShape;
-    return 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) },
+    return createPortal(React.createElement("div", { ref: popoverRef, style: positionStyle, 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" },
         React.createElement("div", { className: "flex flex-col" },
             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)),
@@ -3727,6 +3735,7 @@ var PopoverItem = function (_a) {
             React.createElement("div", { className: "h-0 w-0 ".concat(triangleShape) }))), document.body);
 };
 Popover.defaultProps = {
+    delay: 400,
     direction: 'top',
     title: '',
 };