@geckoui/geckoui 1.3.2 → 1.5.0

package/dist/index.mjs

@@ -881,7 +881,7 @@ var getSegmentOrder = (format) => {
       return ["day", "month", "year"];
     case "MM/DD/YYYY":
       return ["month", "day", "year"];
-    case "YYYY/MM/DD":
+    case "YYYY-MM-DD":
       return ["year", "month", "day"];
     default:
       return ["day", "month", "year"];
@@ -1505,9 +1505,8 @@ var CalendarType = /* @__PURE__ */ ((CalendarType2) => {
 })(CalendarType || {});
 
 // src/components/Calendar/Calendar/Calendar.tsx
-import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var Calendar = (props) => {
-  var _a;
   const { className, style, calendarRef, disableDate, renderDayCell, mode = "single" } = props;
   const [view, setView] = useState5("day" /* Day */);
   const [rangeSelectionStart, setRangeSelectionStart] = useState5(null);
@@ -1516,7 +1515,6 @@ var Calendar = (props) => {
   const onSelectDate = mode === "single" ? props.onSelectDate : void 0;
   const selectedRange = mode === "range" ? props.selectedRange : void 0;
   const onSelectRange = mode === "range" ? props.onSelectRange : void 0;
-  const numberOfMonths = mode === "range" ? (_a = props.numberOfMonths) != null ? _a : 2 : 1;
   let initialDate;
   if (mode === "range") {
     initialDate = (selectedRange == null ? void 0 : selectedRange.from) || (selectedRange == null ? void 0 : selectedRange.to) || getTodayDate();
@@ -1622,44 +1620,23 @@ Provided value: ${selectedRange.to}`
     };
     if (view === "day" /* Day */) {
       if (mode === "range") {
-        const secondMonth = activeMonth === 11 ? 0 : activeMonth + 1;
-        const secondYear = activeMonth === 11 ? activeYear + 1 : activeYear;
-        return /* @__PURE__ */ jsxs9("div", { className: "GeckoUICalendar__dual", children: [
-          /* @__PURE__ */ jsx13("div", { className: "GeckoUICalendar__dual__item", "data-position": "first", children: /* @__PURE__ */ jsx13(
-            CalendarDayPicker_default,
-            {
-              mode: "range",
-              disableDate,
-              renderDayCell,
-              activeMonth,
-              activeYear,
-              onClickHeader: () => setView("month" /* Month */),
-              onClickLeftArrow: decreaseMonth,
-              onClickRightArrow: increaseMonth,
-              selectedRange,
-              onSelectRange: handleRangeDateClick,
-              hoveredDate,
-              onHoverDate: handleHoverDate
-            }
-          ) }),
-          numberOfMonths === 2 && /* @__PURE__ */ jsx13("div", { className: "GeckoUICalendar__dual__item", "data-position": "second", children: /* @__PURE__ */ jsx13(
-            CalendarDayPicker_default,
-            {
-              mode: "range",
-              disableDate,
-              renderDayCell,
-              activeMonth: secondMonth,
-              activeYear: secondYear,
-              onClickHeader: () => setView("month" /* Month */),
-              onClickLeftArrow: decreaseMonth,
-              onClickRightArrow: increaseMonth,
-              selectedRange,
-              onSelectRange: handleRangeDateClick,
-              hoveredDate,
-              onHoverDate: handleHoverDate
-            }
-          ) })
-        ] });
+        return /* @__PURE__ */ jsx13(
+          CalendarDayPicker_default,
+          {
+            mode: "range",
+            disableDate,
+            renderDayCell,
+            activeMonth,
+            activeYear,
+            onClickHeader: () => setView("month" /* Month */),
+            onClickLeftArrow: decreaseMonth,
+            onClickRightArrow: increaseMonth,
+            selectedRange,
+            onSelectRange: handleRangeDateClick,
+            hoveredDate,
+            onHoverDate: handleHoverDate
+          }
+        );
       }
       return /* @__PURE__ */ jsx13(
         CalendarDayPicker_default,
@@ -1698,7 +1675,6 @@ Provided value: ${selectedRange.to}`
       className: classNames(`GeckoUICalendar`, className),
       "data-mode": view,
       "data-selection": mode,
-      "data-calendars": mode === "range" && view === "day" /* Day */ && numberOfMonths || void 0,
       style,
       children: renderContent()
     }
@@ -1708,7 +1684,7 @@ Calendar.displayName = "Calendar";
 var Calendar_default = Calendar;
 
 // src/components/DateInput/DateInput.tsx
-import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 var DateInput = (_a) => {
   var _b = _a, {
     value = "",
@@ -1800,7 +1776,7 @@ var DateInput = (_a) => {
     [onChange]
   );
   const renderCalendarIcon = !hideCalendarIcon ? /* @__PURE__ */ jsx14("div", { className: "GeckoUIDateInput__calendar-icon" }) : void 0;
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       className: classNames("GeckoUIDateInputWrapper", wrapperClassName),
@@ -1855,7 +1831,7 @@ import { useRef as useRef6, useState as useState8 } from "react";
 
 // src/components/BaseDateRangeInput/BaseDateRangeInput.tsx
 import { Fragment as Fragment5, useEffect as useEffect7, useRef as useRef5, useState as useState7 } from "react";
-import { Fragment as Fragment6, jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var BaseDateRangeInput = (_a) => {
   var _b = _a, {
     value,
@@ -2218,8 +2194,8 @@ var BaseDateRangeInput = (_a) => {
   const endValid = isValidDate(endYear, endMonth, endDay);
   const isError = !isEmpty && (!startEmpty && !startValid || !endEmpty && !endValid) || hasError;
   const state = disabled ? "disabled" : readOnly ? "readonly" : "enabled";
-  const renderSegments = (segments) => /* @__PURE__ */ jsx15(Fragment6, { children: segments.map(({ ref, value: value2, onChange: onChange2, maxLength, segment, display }, index) => /* @__PURE__ */ jsxs11(Fragment5, { children: [
-    /* @__PURE__ */ jsxs11(
+  const renderSegments = (segments) => /* @__PURE__ */ jsx15(Fragment6, { children: segments.map(({ ref, value: value2, onChange: onChange2, maxLength, segment, display }, index) => /* @__PURE__ */ jsxs10(Fragment5, { children: [
+    /* @__PURE__ */ jsxs10(
       "label",
       {
         className: "GeckoUIDateInput__segment",
@@ -2255,7 +2231,7 @@ var BaseDateRangeInput = (_a) => {
     const formattedPattern = format.replace(/\//g, separator);
     return placeholder != null ? placeholder : `${formattedPattern}${rangeSeparator}${formattedPattern}`;
   };
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs10(
     "div",
     __spreadProps(__spreadValues({
       ref: containerRef,
@@ -2269,13 +2245,13 @@ var BaseDateRangeInput = (_a) => {
       children: [
         Boolean(prefix) && /* @__PURE__ */ jsx15("div", { className: "GeckoUIDateInput__prefix", children: /* @__PURE__ */ jsx15(DynamicComponentRenderer_default, { component: prefix }) }),
         !!isEmpty && /* @__PURE__ */ jsx15("span", { className: classNames("GeckoUIDateInput__placeholder", placeholderClassName), children: generatePlaceholder2() }),
-        /* @__PURE__ */ jsxs11("div", { className: classNames("GeckoUIDateInput__display-container"), children: [
+        /* @__PURE__ */ jsxs10("div", { className: classNames("GeckoUIDateInput__display-container"), children: [
           renderSegments(startSegments),
           /* @__PURE__ */ jsx15("span", { className: "GeckoUIDateRangeInput__range-separator", children: rangeSeparator }),
           renderSegments(endSegments)
         ] }),
         Boolean(suffix) && /* @__PURE__ */ jsx15("div", { className: "GeckoUIDateInput__suffix", children: /* @__PURE__ */ jsx15(DynamicComponentRenderer_default, { component: suffix }) }),
-        /* @__PURE__ */ jsxs11("div", { className: "GeckoUIDateInput__icons", children: [
+        /* @__PURE__ */ jsxs10("div", { className: "GeckoUIDateInput__icons", children: [
           !hideClearIcon && !isEmpty && !disabled && !readOnly && /* @__PURE__ */ jsx15(
             "button",
             {
@@ -2297,7 +2273,7 @@ BaseDateRangeInput.displayName = "BaseDateRangeInput";
 var BaseDateRangeInput_default = BaseDateRangeInput;
 
 // src/components/DateRangeInput/DateRangeInput.tsx
-import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 var DateRangeInput = (_a) => {
   var _b = _a, {
     value,
@@ -2320,7 +2296,6 @@ var DateRangeInput = (_a) => {
     calendarPlacement = "bottom-start",
     floatingStrategy = "absolute",
     wrapperClassName,
-    numberOfMonths = 2,
     onStateUpdate,
     onSubmit
   } = _b, rest = __objRest(_b, [
@@ -2344,7 +2319,6 @@ var DateRangeInput = (_a) => {
     "calendarPlacement",
     "floatingStrategy",
     "wrapperClassName",
-    "numberOfMonths",
     "onStateUpdate",
     "onSubmit"
   ]);
@@ -2400,7 +2374,7 @@ var DateRangeInput = (_a) => {
     }
   };
   const renderCalendarIcon = !hideCalendarIcon ? /* @__PURE__ */ jsx16("div", { className: "GeckoUIDateInput__calendar-icon" }) : void 0;
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       className: classNames("GeckoUIDateRangeInputWrapper", wrapperClassName),
@@ -2438,8 +2412,7 @@ var DateRangeInput = (_a) => {
             calendarRef,
             className: classNames("GeckoUIDateRangeInput__calendar", calendarClassName),
             onSelectRange: handleRangeSelect,
-            selectedRange: value,
-            numberOfMonths
+            selectedRange: value
           }
         ) })
       ]
@@ -2451,12 +2424,12 @@ var DateRangeInput_default = DateRangeInput;
 
 // src/components/Input/Input.tsx
 import { forwardRef as forwardRef3, useId as useId2 } from "react";
-import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
 var Input = forwardRef3(
   (_a, ref) => {
     var _b = _a, { name, prefix, id, suffix, inputClassName, className, disabled, readOnly } = _b, rest = __objRest(_b, ["name", "prefix", "id", "suffix", "inputClassName", "className", "disabled", "readOnly"]);
     const _id = useId2();
-    return /* @__PURE__ */ jsxs13(
+    return /* @__PURE__ */ jsxs12(
       "label",
       {
         "aria-disabled": disabled,
@@ -2497,7 +2470,7 @@ import {
   useFloating as useFloating3
 } from "@floating-ui/react";
 import { Children, cloneElement, isValidElement as isValidElement2, useRef as useRef7, useState as useState9 } from "react";
-import { Fragment as Fragment7, jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
 var Tooltip = ({
   children,
   delayDuration = 700,
@@ -2507,7 +2480,7 @@ var Tooltip = ({
   triggerAsChild = false,
   arrowClassName,
   backgroundColor,
-  side = "top",
+  placement = "top",
   sideOffset = 12
 }) => {
   const [isOpen, setIsOpen] = useState9(false);
@@ -2516,7 +2489,7 @@ var Tooltip = ({
   const { refs, floatingStyles, context } = useFloating3({
     open: isOpen,
     onOpenChange: setIsOpen,
-    placement: side,
+    placement,
     middleware: [offset3(sideOffset), flip3(), shift({ padding: 5 }), arrow({ element: arrowRef })]
   });
   const handleMouseEnter = () => {
@@ -2552,9 +2525,9 @@ var Tooltip = ({
     }
     return /* @__PURE__ */ jsx18("span", __spreadProps(__spreadValues({}, triggerProps), { className: classNames("GeckoUITooltip__trigger", triggerClassName), children }));
   };
-  return /* @__PURE__ */ jsxs14(Fragment7, { children: [
+  return /* @__PURE__ */ jsxs13(Fragment7, { children: [
     renderTrigger(),
-    isOpen && /* @__PURE__ */ jsx18(FloatingPortal, { children: /* @__PURE__ */ jsxs14(
+    isOpen && /* @__PURE__ */ jsx18(FloatingPortal, { children: /* @__PURE__ */ jsxs13(
       "div",
       {
         ref: refs.setFloating,
@@ -2580,7 +2553,7 @@ var Tooltip = ({
 var Tooltip_default = Tooltip;
 
 // src/components/Label/Label.tsx
-import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
 var Label = (_a) => {
   var _b = _a, {
     className,
@@ -2599,7 +2572,7 @@ var Label = (_a) => {
     "tooltipClassName",
     "children"
   ]);
-  return /* @__PURE__ */ jsxs15("label", __spreadProps(__spreadValues({ className: classNames("GeckoUILabel", className) }, rest), { children: [
+  return /* @__PURE__ */ jsxs14("label", __spreadProps(__spreadValues({ className: classNames("GeckoUILabel", className) }, rest), { children: [
     children,
     required ? /* @__PURE__ */ jsx19("span", { className: "GeckoUILabel__required-indicator", children: "*" }) : null,
     tooltip ? /* @__PURE__ */ jsx19(
@@ -2674,7 +2647,7 @@ var Spinner = (_a) => {
 };
 
 // src/components/LoadingButton/LoadingButton.tsx
-import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
 var LoadingButton = (_a) => {
   var _b = _a, {
     loading,
@@ -2706,7 +2679,7 @@ var LoadingButton = (_a) => {
     }
     return children;
   };
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs15(
     Button_default,
     __spreadProps(__spreadValues({
       "data-loading": loading || void 0,
@@ -2752,7 +2725,7 @@ RHFController.displayName = "RHFController";
 var RHFController_default = RHFController;
 
 // src/components/RHF/RHFCheckbox/RHFCheckbox.tsx
-import { jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
 var RHFCheckbox = (_a) => {
   var _b = _a, {
     name,
@@ -2793,12 +2766,12 @@ var RHFCheckbox = (_a) => {
       render: (renderProps) => {
         const { field } = renderProps;
         const isChecked = () => {
-          if (value === void 0) return false;
+          if (value === void 0) return field.value === true;
           if (single) return isEqual_default(field.value, value);
           if (!Array.isArray(field.value)) return false;
           return field.value.map((e) => JSON.stringify(e)).includes(JSON.stringify(value));
         };
-        return /* @__PURE__ */ jsxs17("label", { className: "GeckoUIRHFCheckbox group", htmlFor: id || _id, children: [
+        return /* @__PURE__ */ jsxs16("label", { className: "GeckoUIRHFCheckbox group", htmlFor: id || _id, children: [
           /* @__PURE__ */ jsx25(
             Checkbox_default,
             __spreadProps(__spreadValues(__spreadValues({}, field), rest), {
@@ -2812,7 +2785,9 @@ var RHFCheckbox = (_a) => {
               onChange: () => {
                 var _a2;
                 let v;
-                if (single) {
+                if (value === void 0) {
+                  v = !field.value;
+                } else if (single) {
                   v = isEqual_default(field.value, value) ? uncheckedValue != null ? uncheckedValue : null : value;
                 } else {
                   v = (_a2 = field.value) != null ? _a2 : [];
@@ -2974,7 +2949,7 @@ RHFError.displayName = "RHFError";
 var RHFError_default = RHFError;
 
 // src/components/RHF/RHFInputGroup/RHFInputGroup.tsx
-import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
 var RHFInputGroup = (_a) => {
   var _b = _a, {
     className,
@@ -2998,7 +2973,7 @@ var RHFInputGroup = (_a) => {
     console.warn("RHFInputGroup not containing any `RHF` input component");
   }
   const { id, name, control } = (input == null ? void 0 : input.props) || {};
-  return /* @__PURE__ */ jsxs18("div", { className: classNames("GeckoUIRHFInputGroup", className), children: [
+  return /* @__PURE__ */ jsxs17("div", { className: classNames("GeckoUIRHFInputGroup", className), children: [
     label ? /* @__PURE__ */ jsx29(Label_default, __spreadProps(__spreadValues({ htmlFor: id, className: labelClassName }, restLabelProps), { children: label })) : null,
     children,
     name ? /* @__PURE__ */ jsx29(RHFError_default, { className: errorClassName, control, name }) : null
@@ -3130,6 +3105,7 @@ var RHFTextarea = (_a) => {
     rules,
     disabled,
     className,
+    transform,
     onChange,
     onBlur
   } = _b, rest = __objRest(_b, [
@@ -3138,6 +3114,7 @@ var RHFTextarea = (_a) => {
     "rules",
     "disabled",
     "className",
+    "transform",
     "onChange",
     "onBlur"
   ]);
@@ -3149,6 +3126,7 @@ var RHFTextarea = (_a) => {
       rules,
       render: (renderProps) => {
         const { field, fieldState } = renderProps;
+        const value = (transform == null ? void 0 : transform.input) ? transform.input(field.value) : field.value;
         return /* @__PURE__ */ jsx33(
           Textarea_default,
           __spreadProps(__spreadValues(__spreadValues({
@@ -3161,9 +3139,11 @@ var RHFTextarea = (_a) => {
               onBlur == null ? void 0 : onBlur(e.target.value);
             },
             onChange: (e) => {
-              field.onChange(e.target.value);
-              onChange == null ? void 0 : onChange(e.target.value);
-            }
+              const outputValue = (transform == null ? void 0 : transform.output) ? transform.output(e.target.value) : e.target.value;
+              field.onChange(outputValue);
+              onChange == null ? void 0 : onChange(outputValue);
+            },
+            value: value != null ? value : ""
           })
         );
       }
@@ -3175,11 +3155,11 @@ var RHFTextarea_default = RHFTextarea;
 
 // src/components/Switch/Switch.tsx
 import { forwardRef as forwardRef6 } from "react";
-import { jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
 var Switch = forwardRef6(
   (_a, ref) => {
     var _b = _a, { size = "md", className, thumbClassName, onChange, onKeyDown } = _b, rest = __objRest(_b, ["size", "className", "thumbClassName", "onChange", "onKeyDown"]);
-    return /* @__PURE__ */ jsxs19("label", { className: classNames("GeckoUISwitch", className), "data-size": size, children: [
+    return /* @__PURE__ */ jsxs18("label", { className: classNames("GeckoUISwitch", className), "data-size": size, children: [
       /* @__PURE__ */ jsx34(
         "input",
         __spreadValues({
@@ -3292,7 +3272,7 @@ Radio.displayName = "Radio";
 var Radio_default = Radio;
 
 // src/components/RHF/RHFRadio/RHFRadio.tsx
-import { jsx as jsx37, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs19 } from "react/jsx-runtime";
 var RHFRadio = (_a) => {
   var _b = _a, {
     name,
@@ -3329,7 +3309,7 @@ var RHFRadio = (_a) => {
       name,
       rules,
       render: ({ field }) => {
-        return /* @__PURE__ */ jsxs20("label", { className: "GeckoUIRHFRadio group", htmlFor: uniqueId, children: [
+        return /* @__PURE__ */ jsxs19("label", { className: "GeckoUIRHFRadio group", htmlFor: uniqueId, children: [
           /* @__PURE__ */ jsx37(
             Radio_default,
             __spreadProps(__spreadValues(__spreadValues({}, field), rest), {
@@ -3431,7 +3411,7 @@ RHFDateRangeInput.displayName = "RHFDateRangeInput";
 var RHFDateRangeInput_default = RHFDateRangeInput;
 
 // src/components/RHF/RHFFileInput/RHFFileInput.tsx
-import { jsx as jsx40, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs20 } from "react/jsx-runtime";
 var RHFFileInput = (_a) => {
   var _b = _a, {
     id,
@@ -3466,7 +3446,7 @@ var RHFFileInput = (_a) => {
       rules,
       render: (renderProps) => {
         const { field } = renderProps;
-        return /* @__PURE__ */ jsxs21("label", { className: classNames("GeckoUIRHFFileInput", className), id, children: [
+        return /* @__PURE__ */ jsxs20("label", { className: classNames("GeckoUIRHFFileInput", className), id, children: [
           /* @__PURE__ */ jsx40(
             "input",
             __spreadProps(__spreadValues(__spreadValues({}, field), rest), {
@@ -3508,7 +3488,7 @@ var RHFFileInput_default = RHFFileInput;
 
 // src/components/OTPInput/OTPInput.tsx
 import { forwardRef as forwardRef8, useRef as useRef8 } from "react";
-import { jsx as jsx41, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs21 } from "react/jsx-runtime";
 var OTPInput = forwardRef8(
   ({
     value = "",
@@ -3557,14 +3537,15 @@ var OTPInput = forwardRef8(
         className: classNames("GeckoUIOTPInput", className),
         "data-state": disabled ? "disabled" : "enabled",
         ref: divRef,
-        style: { gridTemplateColumns: `repeat(${length}, minmax(0, 1fr))` },
         children: Array.from({ length }).map((_, i) => i).map((key, index) => {
           const isLast = index === length - 1;
-          return /* @__PURE__ */ jsxs22(
+          return /* @__PURE__ */ jsxs21(
             "div",
             {
               style: {
                 position: "relative",
+                flex: 1,
+                maxWidth: 56,
                 aspectRatio: aspectRatio === void 0 ? 0.94 : aspectRatio
               },
               children: [
@@ -3636,13 +3617,17 @@ var RHFOTPInput = (_a) => {
     name,
     rules,
     disabled,
-    className
+    className,
+    onChange,
+    onBlur
   } = _b, rest = __objRest(_b, [
     "control",
     "name",
     "rules",
     "disabled",
-    "className"
+    "className",
+    "onChange",
+    "onBlur"
   ]);
   return /* @__PURE__ */ jsx42(
     RHFController_default,
@@ -3654,11 +3639,20 @@ var RHFOTPInput = (_a) => {
       render: ({ field, fieldState }) => {
         return /* @__PURE__ */ jsx42(
           OTPInput_default,
-          __spreadValues(__spreadValues({
+          __spreadProps(__spreadValues(__spreadValues({
             className: classNames("GeckoUIRHFOTPInput", className),
             "data-error": !disabled && fieldState.error ? "" : void 0,
             disabled
-          }, rest), field)
+          }, rest), field), {
+            onBlur: () => {
+              field.onBlur();
+              onBlur == null ? void 0 : onBlur();
+            },
+            onChange: (value) => {
+              field.onChange(value);
+              onChange == null ? void 0 : onChange(value);
+            }
+          })
         );
       }
     }
@@ -3668,7 +3662,7 @@ RHFOTPInput.displayName = "RHFOTPInput";
 var RHFOTPInput_default = RHFOTPInput;
 
 // src/components/RHF/RHFFilePicker/RHFFilePicker.tsx
-import { jsx as jsx43, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs22 } from "react/jsx-runtime";
 function formatFileSize(bytes) {
   if (bytes === 0) return "0 B";
   const k = 1024;
@@ -3725,7 +3719,7 @@ function RHFFilePickerRenderer({
     const updatedFiles = value.filter((file) => file.preview !== fileToRemove.preview);
     field.onChange(updatedFiles);
   };
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs22(
     "div",
     {
       className: "GeckoUIRHFFilePicker",
@@ -3733,7 +3727,7 @@ function RHFFilePickerRenderer({
       "data-dragging": dragging || void 0,
       "data-error": error ? "" : void 0,
       children: [
-        /* @__PURE__ */ jsxs23(
+        /* @__PURE__ */ jsxs22(
           "div",
           {
             className: "GeckoUIRHFFilePicker__upload-area",
@@ -3741,7 +3735,7 @@ function RHFFilePickerRenderer({
             children: [
               /* @__PURE__ */ jsx43(Upload_default, { className: "GeckoUIRHFFilePicker__upload-icon" }),
               /* @__PURE__ */ jsx43("p", { className: "GeckoUIRHFFilePicker__upload-text", children: "Drag and drop files here, or browse" }),
-              /* @__PURE__ */ jsxs23("div", { className: "GeckoUIRHFFilePicker__upload-buttons", children: [
+              /* @__PURE__ */ jsxs22("div", { className: "GeckoUIRHFFilePicker__upload-buttons", children: [
                 /* @__PURE__ */ jsx43(
                   "button",
                   {
@@ -3765,7 +3759,7 @@ function RHFFilePickerRenderer({
             ]
           }
         ),
-        Boolean(value == null ? void 0 : value.length) && /* @__PURE__ */ jsx43("div", { className: "GeckoUIRHFFilePicker__file-list", children: value.map((file) => /* @__PURE__ */ jsxs23("div", { className: "GeckoUIRHFFilePicker__file-row", children: [
+        Boolean(value == null ? void 0 : value.length) && /* @__PURE__ */ jsx43("div", { className: "GeckoUIRHFFilePicker__file-list", children: value.map((file) => /* @__PURE__ */ jsxs22("div", { className: "GeckoUIRHFFilePicker__file-row", children: [
           /* @__PURE__ */ jsx43("span", { className: "GeckoUIRHFFilePicker__file-name", children: file.name }),
           /* @__PURE__ */ jsx43("span", { className: "GeckoUIRHFFilePicker__file-size", children: formatFileSize(file.size) }),
           /* @__PURE__ */ jsx43(
@@ -4014,7 +4008,7 @@ var sortMultiSelectValue = (value, options) => {
 };
 
 // src/components/Select/SelectButton/SelectButton.tsx
-import { jsx as jsx44, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs23 } from "react/jsx-runtime";
 function SelectButton({ prefix, suffix, className }) {
   const {
     disabled,
@@ -4050,7 +4044,7 @@ function SelectButton({ prefix, suffix, className }) {
     return trigger;
   }
   const filterable = _filterable === true || _filterable === "inline";
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs23(
     "div",
     __spreadProps(__spreadValues({
       className: classNames("GeckoUISelectButton", className),
@@ -4068,14 +4062,14 @@ function SelectButton({ prefix, suffix, className }) {
       "aria-disabled": disabled,
       children: [
         /* @__PURE__ */ jsx44(DynamicComponentRenderer_default, { component: prefix }),
-        /* @__PURE__ */ jsxs24("div", { className: "GeckoUISelectButton__content", children: [
+        /* @__PURE__ */ jsxs23("div", { className: "GeckoUISelectButton__content", children: [
           hasValue ? /* @__PURE__ */ jsx44(SelectButtonContent, {}) : /* @__PURE__ */ jsx44(
             "span",
             __spreadProps(__spreadValues({
               className: classNames("GeckoUISelectButton__value", placeholderClassName),
               "data-placeholder": ""
             }, keyword && filterable && { "data-hidden": "" }), {
-              children: placeholder != null ? placeholder : "Select Item"
+              children: placeholder != null ? placeholder : "Select option"
             })
           ),
           /* @__PURE__ */ jsx44(
@@ -4110,7 +4104,7 @@ function SelectButton({ prefix, suffix, className }) {
             })
           )
         ] }),
-        /* @__PURE__ */ jsxs24("div", { className: "GeckoUISelectButton__icons", children: [
+        /* @__PURE__ */ jsxs23("div", { className: "GeckoUISelectButton__icons", children: [
           hasValue && !disabled && clearable && /* @__PURE__ */ jsx44(
             "button",
             {
@@ -4168,7 +4162,7 @@ function SelectButtonContent() {
     });
     return selectedOptions.map((option) => {
       const { remove, value: value2, label } = option;
-      return /* @__PURE__ */ jsxs24(
+      return /* @__PURE__ */ jsxs23(
         "div",
         {
           className: "GeckoUISelectButton__multiselected-chip",
@@ -4308,7 +4302,7 @@ SelectEmpty.displayName = "SelectEmpty";
 var SelectEmpty_default = SelectEmpty;
 
 // src/components/Select/SelectMenu/SelectMenu.tsx
-import { jsx as jsx47, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs24 } from "react/jsx-runtime";
 var SelectMenu = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
   const {
@@ -4326,7 +4320,7 @@ var SelectMenu = (_a) => {
     return null;
   }
   const hasDropdownSearch = filterable === "dropdown";
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs24(
     "div",
     __spreadProps(__spreadValues({
       ref: (r) => refs.setFloating(r),
@@ -4336,7 +4330,7 @@ var SelectMenu = (_a) => {
     }, rest), {
       children: [
         hasDropdownSearch && /* @__PURE__ */ jsx47(SelectDropdownSearch_default, { className: "GeckoUISelectMenu__search-container", autoFocus: true }),
-        /* @__PURE__ */ jsxs25("div", { ref: menuScrollContainerRef, className: "GeckoUISelectMenu__items", children: [
+        /* @__PURE__ */ jsxs24("div", { ref: menuScrollContainerRef, className: "GeckoUISelectMenu__items", children: [
           menuItems,
           /* @__PURE__ */ jsx47(Empty, { children: menuItems })
         ] })
@@ -4355,7 +4349,7 @@ SelectMenu.displayName = "SelectMenu";
 var SelectMenu_default = SelectMenu;
 
 // src/components/Select/Select/Select.tsx
-import { jsx as jsx48, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs25 } from "react/jsx-runtime";
 var Select = (props) => {
   const inputRef = useRef9(null);
   const menuScrollContainerRef = useRef9(null);
@@ -4479,7 +4473,7 @@ var Select = (props) => {
         onChange,
         clearable
       }, rest),
-      children: /* @__PURE__ */ jsxs26(
+      children: /* @__PURE__ */ jsxs25(
         "div",
         {
           className: classNames("GeckoUISelect", wrapperClassName),
@@ -4498,7 +4492,7 @@ var Select_default = Select;
 
 // src/components/Select/SelectOption/SelectOption.tsx
 import { useEffect as useEffect8, useRef as useRef10 } from "react";
-import { jsx as jsx49, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs26 } from "react/jsx-runtime";
 var SelectOption = (_a) => {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
   const _a2 = props, {
@@ -4603,7 +4597,7 @@ var SelectOption = (_a) => {
     }
     return children;
   };
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs26(
     "div",
     __spreadProps(__spreadValues({
       tabIndex: -1,
@@ -4714,7 +4708,7 @@ RHFSelect.displayName = "RHFSelect";
 var RHFSelect_default = RHFSelect;
 
 // src/components/Alert/Alert.tsx
-import { jsx as jsx51, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs27 } from "react/jsx-runtime";
 var Alert = (props) => {
   const {
     variant = "default",
@@ -4726,14 +4720,14 @@ var Alert = (props) => {
     icon,
     iconClassName
   } = props;
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs27(
     "div",
     __spreadProps(__spreadValues({
       className: classNames("GeckoUIAlert", className),
       "data-variant": variant
     }, condensed ? { "data-condensed": "" } : {}), {
       children: [
-        /* @__PURE__ */ jsxs28("div", { className: "GeckoUIAlert__body", children: [
+        /* @__PURE__ */ jsxs27("div", { className: "GeckoUIAlert__body", children: [
           icon ? /* @__PURE__ */ jsx51(DynamicComponentRenderer_default, { component: icon }) : /* @__PURE__ */ jsx51("div", { className: classNames("GeckoUIAlert__icon", iconClassName), "data-variant": variant }),
           /* @__PURE__ */ jsx51(DynamicComponentRenderer_default, { component: title, className: "GeckoUIAlert__title" }),
           Boolean(onRemove) && /* @__PURE__ */ jsx51("button", { className: "GeckoUIAlert__remove-button", onClick: onRemove, type: "button", children: /* @__PURE__ */ jsx51("span", { className: "GeckoUIAlert__remove-button__icon" }) })
@@ -4746,7 +4740,7 @@ var Alert = (props) => {
 var Alert_default = Alert;
 
 // src/components/Pagination/Pagination.tsx
-import { jsx as jsx52, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs28 } from "react/jsx-runtime";
 var Pagination = ({ currentPage, totalPages, onChange, className }) => {
   if (totalPages <= 1) return null;
   const getPages = () => {
@@ -4780,7 +4774,7 @@ var Pagination = ({ currentPage, totalPages, onChange, className }) => {
     return pages2;
   };
   const pages = getPages();
-  return /* @__PURE__ */ jsxs29("div", { className: classNames("GeckoUIPagination", className), children: [
+  return /* @__PURE__ */ jsxs28("div", { className: classNames("GeckoUIPagination", className), children: [
     /* @__PURE__ */ jsx52(
       "button",
       {
@@ -4793,7 +4787,7 @@ var Pagination = ({ currentPage, totalPages, onChange, className }) => {
         children: /* @__PURE__ */ jsx52("span", { className: "GeckoUIPagination__arrow__icon", "data-direction": "previous" })
       }
     ),
-    /* @__PURE__ */ jsxs29("div", { className: "GeckoUIPagination__page-count", children: [
+    /* @__PURE__ */ jsxs28("div", { className: "GeckoUIPagination__page-count", children: [
       /* @__PURE__ */ jsx52("span", { children: currentPage }),
       /* @__PURE__ */ jsx52("span", { children: "/" }),
       /* @__PURE__ */ jsx52("span", { children: totalPages })
@@ -4913,7 +4907,7 @@ var Dialog = { show, dismiss };
 var Dialog_default = Dialog;
 
 // src/components/ConfirmDialog/ConfirmDialog.tsx
-import { Fragment as Fragment10, jsx as jsx55, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx55, jsxs as jsxs29 } from "react/jsx-runtime";
 function ConfirmDialogContent({
   confirmButtonLabel = "Ok",
   cancelButtonLabel = "Cancel",
@@ -4963,10 +4957,10 @@ function ConfirmDialogContent({
       return document.removeEventListener("keydown", onKeyDown);
     };
   }, [handleConfirm]);
-  return /* @__PURE__ */ jsxs30(Fragment10, { children: [
+  return /* @__PURE__ */ jsxs29(Fragment10, { children: [
     /* @__PURE__ */ jsx55("div", { className: classNames("GeckoUIConfirmDialog__title", titleClassName), children: /* @__PURE__ */ jsx55(DynamicComponentRenderer_default, { component: title }) }),
     /* @__PURE__ */ jsx55("div", { className: classNames("GeckoUIConfirmDialog__content", contentClassName), children: /* @__PURE__ */ jsx55(DynamicComponentRenderer_default, { component: content, dismiss: dismiss2 }) }),
-    /* @__PURE__ */ jsxs30("div", { className: "GeckoUIConfirmDialog__actions", children: [
+    /* @__PURE__ */ jsxs29("div", { className: "GeckoUIConfirmDialog__actions", children: [
       /* @__PURE__ */ jsx55(
         LoadingButton_default,
         {
@@ -5019,10 +5013,10 @@ function DrawerContainer() {
 }
 
 // src/components/GeckoUIPortal/GeckoUIPortal.tsx
-import { Fragment as Fragment11, jsx as jsx57, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx57, jsxs as jsxs30 } from "react/jsx-runtime";
 var GeckoUIPortal = ({ toastOptions = {} }) => {
   const _a = toastOptions, { style } = _a, restToastOptions = __objRest(_a, ["style"]);
-  return /* @__PURE__ */ jsxs31(Fragment11, { children: [
+  return /* @__PURE__ */ jsxs30(Fragment11, { children: [
     /* @__PURE__ */ jsx57(
       Toaster,
       __spreadValues({
@@ -5043,7 +5037,7 @@ var GeckoUIPortal_default = GeckoUIPortal;
 // src/components/Drawer/Drawer.tsx
 import { useRef as useRef12 } from "react";
 import { createRoot as createRoot2 } from "react-dom/client";
-import { jsx as jsx58, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs31 } from "react/jsx-runtime";
 function Drawer({
   open = false,
   allowClickOutside,
@@ -5064,7 +5058,7 @@ function Drawer({
     handleDismiss();
   }, [drawerRootRef]);
   useEscListener_default(dismissOnEscape ? handleDismiss : void 0);
-  return /* @__PURE__ */ jsxs32("div", { className: "GeckoUIDrawer", ref: drawerRootRef, role: "dialog", children: [
+  return /* @__PURE__ */ jsxs31("div", { className: "GeckoUIDrawer", ref: drawerRootRef, role: "dialog", children: [
     /* @__PURE__ */ jsx58(
       "div",
       {
@@ -5225,7 +5219,7 @@ var MenuPanel = ({ children, className }) => {
       style: floatingStyles,
       className: classNames("GeckoUIMenu__items", className),
       onKeyDown: handleKeyDown,
-      children: /* @__PURE__ */ jsx60("div", { className: "GeckoUIMenu__scroll-container", children })
+      children
     }
   );
 };
@@ -5233,7 +5227,7 @@ MenuPanel.displayName = "MenuPanel";
 var MenuPanel_default = MenuPanel;
 
 // src/components/Menu/Menu/Menu.tsx
-import { jsx as jsx61, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs32 } from "react/jsx-runtime";
 var Menu = ({
   label,
   disabled = false,
@@ -5288,7 +5282,7 @@ var Menu = ({
         disabled,
         menuRef
       },
-      children: /* @__PURE__ */ jsxs33("div", { className: classNames("GeckoUIMenu", className), ref: (r) => refs.setReference(r), children: [
+      children: /* @__PURE__ */ jsxs32("div", { className: classNames("GeckoUIMenu", className), ref: (r) => refs.setReference(r), children: [
         trigger != null ? trigger : /* @__PURE__ */ jsx61(MenuButton_default, { className: buttonClassName, children: label != null ? label : "Menu" }),
         /* @__PURE__ */ jsx61(MenuPanel_default, { className: menuClassName, children: menuItems })
       ] })