@geckoui/geckoui 1.1.2 → 1.2.0-beta.0

package/dist/index.js

@@ -89,6 +89,7 @@ __export(index_exports, {
   CalendarType: () => CalendarType,
   Checkbox: () => Checkbox_default,
   ConfirmDialog: () => ConfirmDialog_default,
+  CounterInput: () => CounterInput_default,
   DateInput: () => DateInput_default,
   DateRangeInput: () => DateRangeInput_default,
   Dialog: () => Dialog_default,
@@ -113,6 +114,7 @@ __export(index_exports, {
   Pagination: () => Pagination_default,
   RHFCheckbox: () => RHFCheckbox_default,
   RHFController: () => RHFController_default,
+  RHFCounterInput: () => RHFCounterInput_default,
   RHFCurrencyInput: () => RHFCurrencyInput_default,
   RHFDateInput: () => RHFDateInput_default,
   RHFDateRangeInput: () => RHFDateRangeInput_default,
@@ -196,8 +198,10 @@ var useClickOutside_default = useClickOutside;
 var import_react3 = require("react");
 
 // src/utils/isNil.ts
-var import_lodash = __toESM(require("lodash.isnil"));
-var isNil_default = import_lodash.default;
+var isNil = (value) => {
+  return value == null;
+};
+var isNil_default = isNil;
 
 // src/utils/toThousandsSeparatorFormat.ts
 var toThousandsSeparatorFormat = (value = "") => {
@@ -918,15 +922,139 @@ var Checkbox = (0, import_react8.forwardRef)(
 Checkbox.displayName = "Checkbox";
 var Checkbox_default = Checkbox;
 
+// src/components/CounterInput/CounterInput.tsx
+var import_react9 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var CounterInput = (0, import_react9.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      value,
+      onChange,
+      min = -Infinity,
+      max = Infinity,
+      step = 1,
+      size = "md",
+      className,
+      inputClassName,
+      buttonClassName,
+      disabled,
+      readOnly,
+      editable = false
+    } = _b, rest = __objRest(_b, [
+      "value",
+      "onChange",
+      "min",
+      "max",
+      "step",
+      "size",
+      "className",
+      "inputClassName",
+      "buttonClassName",
+      "disabled",
+      "readOnly",
+      "editable"
+    ]);
+    const [inputValue, setInputValue] = (0, import_react9.useState)(String(value));
+    (0, import_react9.useEffect)(() => {
+      setInputValue(String(value));
+    }, [value]);
+    const clamp = (val) => Math.min(Math.max(val, min), max);
+    const handleDecrement = () => {
+      onChange(clamp(value - step));
+    };
+    const handleIncrement = () => {
+      onChange(clamp(value + step));
+    };
+    const handleInputChange = (e) => {
+      const raw = e.target.value;
+      if (raw !== "" && !/^-?\d*\.?\d*$/.test(raw)) {
+        return;
+      }
+      setInputValue(raw);
+      const parsed = parseFloat(raw);
+      if (!isNaN(parsed)) {
+        onChange(clamp(parsed));
+      }
+    };
+    const handleBlur = () => {
+      setInputValue(String(value));
+    };
+    const isAtMin = value <= min;
+    const isAtMax = value >= max;
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "div",
+      {
+        className: classNames(
+          "GeckoUICounterInput",
+          `GeckoUICounterInput--size-${size}`,
+          disabled && "GeckoUICounterInput--disabled",
+          readOnly && "GeckoUICounterInput--readonly",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "button",
+            {
+              type: "button",
+              className: classNames(
+                "GeckoUICounterInput__button",
+                "GeckoUICounterInput__button--decrement",
+                buttonClassName
+              ),
+              onClick: handleDecrement,
+              disabled: disabled || readOnly || isAtMin,
+              "aria-label": "Decrement",
+              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "GeckoUICounterInput__icon GeckoUICounterInput__icon--minus" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "input",
+            __spreadProps(__spreadValues({
+              ref,
+              type: "text",
+              inputMode: "numeric",
+              className: classNames("GeckoUICounterInput__input", inputClassName),
+              value: editable ? inputValue : value,
+              onChange: handleInputChange,
+              onBlur: handleBlur,
+              disabled,
+              readOnly: readOnly || !editable
+            }, rest), {
+              tabIndex: editable ? 0 : -1
+            })
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "button",
+            {
+              type: "button",
+              className: classNames(
+                "GeckoUICounterInput__button",
+                "GeckoUICounterInput__button--increment",
+                buttonClassName
+              ),
+              onClick: handleIncrement,
+              disabled: disabled || readOnly || isAtMax,
+              "aria-label": "Increment",
+              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "GeckoUICounterInput__icon GeckoUICounterInput__icon--plus" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+CounterInput.displayName = "CounterInput";
+var CounterInput_default = CounterInput;
+
 // src/components/DateInput/DateInput.tsx
-var import_react12 = require("@floating-ui/react");
-var import_react13 = require("react");
+var import_react13 = require("@floating-ui/react");
+var import_react14 = require("react");
 
 // src/components/BaseDateInput/BaseDateInput.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/components/DynamicComponentRenderer/DynamicComponentRenderer.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function DynamicComponentRenderer(_a) {
   var _b = _a, {
     component
@@ -936,10 +1064,10 @@ function DynamicComponentRenderer(_a) {
   if (component === null || component === void 0 || component === "") return null;
   if (typeof component === "function") {
     const Component = component;
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Component, __spreadValues({}, props));
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Component, __spreadValues({}, props));
   }
   if (["string", "number"].includes(typeof component)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: props == null ? void 0 : props.className, children: component });
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: props == null ? void 0 : props.className, children: component });
   }
   return component;
 }
@@ -1003,7 +1131,7 @@ var generatePlaceholder = (format, separator) => {
 };
 
 // src/components/BaseDateInput/BaseDateInput.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var BaseDateInput = ({
   value = "",
   onChange,
@@ -1024,14 +1152,14 @@ var BaseDateInput = ({
   onSubmit,
   hasFocus
 }) => {
-  const containerRef = (0, import_react9.useRef)(null);
-  const monthRef = (0, import_react9.useRef)(null);
-  const dayRef = (0, import_react9.useRef)(null);
-  const yearRef = (0, import_react9.useRef)(null);
-  const [month, setMonth] = (0, import_react9.useState)("");
-  const [day, setDay] = (0, import_react9.useState)("");
-  const [year, setYear] = (0, import_react9.useState)("");
-  const [lastUpdatedTime, setLastUpdatedTime] = (0, import_react9.useState)(0);
+  const containerRef = (0, import_react10.useRef)(null);
+  const monthRef = (0, import_react10.useRef)(null);
+  const dayRef = (0, import_react10.useRef)(null);
+  const yearRef = (0, import_react10.useRef)(null);
+  const [month, setMonth] = (0, import_react10.useState)("");
+  const [day, setDay] = (0, import_react10.useState)("");
+  const [year, setYear] = (0, import_react10.useState)("");
+  const [lastUpdatedTime, setLastUpdatedTime] = (0, import_react10.useState)(0);
   const segmentRefs = { month: monthRef, day: dayRef, year: yearRef };
   const focusRef = (ref) => {
     var _a, _b;
@@ -1186,7 +1314,7 @@ var BaseDateInput = ({
     onSubmit == null ? void 0 : onSubmit();
     clearFocus();
   };
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const now = Date.now();
     const timeSinceLastUpdate = now - lastUpdatedTime;
     if (timeSinceLastUpdate > 500) {
@@ -1236,11 +1364,11 @@ var BaseDateInput = ({
     hasFocus && "GeckoUIDateInput--focus",
     className
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ref: containerRef, className: containerClasses, onClick: () => handleDisplayClick(), children: [
-    Boolean(prefix) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "GeckoUIDateInput__prefix", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DynamicComponentRenderer_default, { component: prefix }) }),
-    !!isEmpty && !hasFocus && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: classNames("GeckoUIDateInput__placeholder", placeholderClassName), children: placeholder != null ? placeholder : generatePlaceholder(format, separator) }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: classNames("GeckoUIDateInput__display-container"), children: inputs.map(({ ref, value: value2, onChange: onChange2, maxLength, segment, display }, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react9.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { ref: containerRef, className: containerClasses, onClick: () => handleDisplayClick(), children: [
+    Boolean(prefix) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "GeckoUIDateInput__prefix", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DynamicComponentRenderer_default, { component: prefix }) }),
+    !!isEmpty && !hasFocus && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: classNames("GeckoUIDateInput__placeholder", placeholderClassName), children: placeholder != null ? placeholder : generatePlaceholder(format, separator) }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: classNames("GeckoUIDateInput__display-container"), children: inputs.map(({ ref, value: value2, onChange: onChange2, maxLength, segment, display }, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react10.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
         "label",
         {
           className: classNames(
@@ -1253,7 +1381,7 @@ var BaseDateInput = ({
             handleDisplayClick(segment);
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               "input",
               {
                 ref,
@@ -1272,22 +1400,22 @@ var BaseDateInput = ({
           ]
         }
       ),
-      index < inputs.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "GeckoUIDateInput__separator", children: separator })
+      index < inputs.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "GeckoUIDateInput__separator", children: separator })
     ] }, segment)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "GeckoUIDateInput__icons", children: [
-      !hideClearIcon && !isEmpty && !disabled && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "GeckoUIDateInput__icons", children: [
+      !hideClearIcon && !isEmpty && !disabled && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "button",
         {
           type: "button",
           disabled: disabled || readOnly,
           className: "GeckoUIDateInput__clear-button",
           onClick: handleClear,
-          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "GeckoUI-icon__clear" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "GeckoUI-icon__clear" })
         }
       ),
-      Boolean(suffix) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "GeckoUIDateInput__suffix", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DynamicComponentRenderer_default, { component: suffix }) }),
+      Boolean(suffix) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "GeckoUIDateInput__suffix", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DynamicComponentRenderer_default, { component: suffix }) }),
       renderCalendarIcon,
-      !renderCalendarIcon && !hideCalendarIcon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "GeckoUIDateInput__calendar-icon" })
+      !renderCalendarIcon && !hideCalendarIcon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "GeckoUIDateInput__calendar-icon" })
     ] })
   ] });
 };
@@ -1295,7 +1423,7 @@ BaseDateInput.displayName = "BaseDateInput";
 var BaseDateInput_default = BaseDateInput;
 
 // src/components/Calendar/Calendar/Calendar.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 
 // src/components/Calendar/Calendar.utils.ts
 function daysInMonth(month, year) {
@@ -1370,24 +1498,24 @@ function shouldSwapDates(start, end) {
 }
 
 // src/components/Calendar/CalendarHeader/CalendarHeader.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function CalendarHeader({
   onClickLeftArrow,
   onClickRightArrow,
   header,
   onClickHeader
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: classNames("GeckoUICalendar__header"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: classNames("GeckoUICalendar__header"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "button",
       {
         className: "GeckoUICalendar__header__arrow-button GeckoUICalendar__header__arrow-button--left",
         onClick: onClickLeftArrow,
         type: "button",
-        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "GeckoUICalendar__header__arrow-left-icon" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "GeckoUICalendar__header__arrow-left-icon" })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "button",
       {
         className: classNames(
@@ -1399,13 +1527,13 @@ function CalendarHeader({
         children: header
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "button",
       {
         className: "GeckoUICalendar__header__arrow-button GeckoUICalendar__header__arrow-button--right",
         onClick: onClickRightArrow,
         type: "button",
-        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "GeckoUICalendar__header__arrow-right-icon" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "GeckoUICalendar__header__arrow-right-icon" })
       }
     )
   ] });
@@ -1414,7 +1542,7 @@ CalendarHeader.displayName = "CalendarHeader";
 var CalendarHeader_default = CalendarHeader;
 
 // src/components/Calendar/CalendarDayPicker/CalendarDayPicker.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function CalendarDayPicker(props) {
   const _a = props, {
     activeMonth,
@@ -1449,21 +1577,21 @@ function CalendarDayPicker(props) {
       (_a2 = props.onHoverDate) == null ? void 0 : _a2.call(props, date);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CalendarHeader_default, __spreadValues({ header: `${months[activeMonth]} ${activeYear}` }, headerProps)),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "GeckoUICalendar__day-picker-weekdays", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "S" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "M" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "T" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "W" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "T" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "F" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "S" })
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CalendarHeader_default, __spreadValues({ header: `${months[activeMonth]} ${activeYear}` }, headerProps)),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "GeckoUICalendar__day-picker-weekdays", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: "S" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: "M" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: "T" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: "W" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: "T" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: "F" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: "S" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "GeckoUICalendar__day-picker", children: dates.map((date) => {
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "GeckoUICalendar__day-picker", children: dates.map((date) => {
       const isActiveMonth = activeMonth === date.month;
       if (isRangeMode && !isActiveMonth) {
-        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", {}, `${date.year}-${date.month}-${date.day}`);
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", {}, `${date.year}-${date.month}-${date.day}`);
       }
       const formattedDate = `${date.year}-${(date.month + 1).toString().padStart(2, "0")}-${date.day.toString().padStart(2, "0")}`;
       const isToday = formattedDate === today;
@@ -1493,7 +1621,7 @@ function CalendarDayPicker(props) {
         }
       }
       const isDisable = disableDate == null ? void 0 : disableDate(formattedDate);
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "button",
         {
           className: classNames(
@@ -1529,7 +1657,7 @@ function CalendarDayPicker(props) {
 var CalendarDayPicker_default = CalendarDayPicker;
 
 // src/components/Calendar/CalendarMonthPicker/CalendarMonthPicker.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function CalendarMonthPicker(_a) {
   var _b = _a, {
     activeYear,
@@ -1541,11 +1669,11 @@ function CalendarMonthPicker(_a) {
     "onSelectMonth"
   ]);
   const { shortMonths } = generateMonthNames();
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CalendarHeader_default, __spreadValues({ header: `${activeYear}` }, headerProps)),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "GeckoUICalendar__month-picker", children: shortMonths.map((monthName, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CalendarHeader_default, __spreadValues({ header: `${activeYear}` }, headerProps)),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "GeckoUICalendar__month-picker", children: shortMonths.map((monthName, index) => {
       const selected = index === activeMonth;
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "button",
         {
           className: classNames(
@@ -1565,15 +1693,15 @@ CalendarMonthPicker.displayName = "CalendarMonthPicker";
 var CalendarMonthPicker_default = CalendarMonthPicker;
 
 // src/components/Calendar/CalendarYearPicker/CalendarYearPicker.tsx
-var import_react10 = require("react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_react11 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function CalendarYearPicker(_a) {
   var _b = _a, { activeYear, onSelectYear } = _b, headerProps = __objRest(_b, ["activeYear", "onSelectYear"]);
   let start = parseInt((activeYear / 10).toFixed(0)) * 10;
   if (activeYear + 1 === start) {
     start -= 10;
   }
-  const [years, setYears] = (0, import_react10.useState)(
+  const [years, setYears] = (0, import_react11.useState)(
     () => Array.from({ length: 12 }).map((_, index) => start - 1 + index)
   );
   const handleLeft = () => {
@@ -1582,8 +1710,8 @@ function CalendarYearPicker(_a) {
   const handleRight = () => {
     setYears((prev) => prev.map((year) => year + 10));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       CalendarHeader_default,
       __spreadValues({
         header: `${years[1]} - ${years[1] + 9}`,
@@ -1591,10 +1719,10 @@ function CalendarYearPicker(_a) {
         onClickRightArrow: handleRight
       }, headerProps)
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "GeckoUICalendar__year-picker", children: years.map((year, i) => {
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "GeckoUICalendar__year-picker", children: years.map((year, i) => {
       const selected = activeYear === year;
       const isPrevNext = i === 0 || i === 11;
-      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "button",
         {
           className: classNames(
@@ -1623,13 +1751,13 @@ var CalendarType = /* @__PURE__ */ ((CalendarType2) => {
 })(CalendarType || {});
 
 // src/components/Calendar/Calendar/Calendar.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var Calendar = (props) => {
   var _a;
   const { className, style, calendarRef, disableDate, renderDayCell, mode = "single" } = props;
-  const [view, setView] = (0, import_react11.useState)("day" /* Day */);
-  const [rangeSelectionStart, setRangeSelectionStart] = (0, import_react11.useState)(null);
-  const [hoveredDate, setHoveredDate] = (0, import_react11.useState)(null);
+  const [view, setView] = (0, import_react12.useState)("day" /* Day */);
+  const [rangeSelectionStart, setRangeSelectionStart] = (0, import_react12.useState)(null);
+  const [hoveredDate, setHoveredDate] = (0, import_react12.useState)(null);
   const selectedDate = mode === "single" ? props.selectedDate : void 0;
   const onSelectDate = mode === "single" ? props.onSelectDate : void 0;
   const selectedRange = mode === "range" ? props.selectedRange : void 0;
@@ -1644,8 +1772,8 @@ var Calendar = (props) => {
   const isValidDate2 = isValidISOFormat(initialDate);
   const today = getTodayDate();
   const [year, month] = (isValidDate2 ? initialDate : today).split("-").map(Number);
-  const [activeMonth, setActiveMonth] = (0, import_react11.useState)(month - 1);
-  const [activeYear, setActiveYear] = (0, import_react11.useState)(year);
+  const [activeMonth, setActiveMonth] = (0, import_react12.useState)(month - 1);
+  const [activeYear, setActiveYear] = (0, import_react12.useState)(year);
   const increaseYear = () => {
     setActiveYear((prev) => prev + 1);
   };
@@ -1669,7 +1797,7 @@ var Calendar = (props) => {
       onSelectDate == null ? void 0 : onSelectDate("");
     }
   };
-  (0, import_react11.useImperativeHandle)(calendarRef, () => {
+  (0, import_react12.useImperativeHandle)(calendarRef, () => {
     return {
       moveTo: (month2, year2) => {
         setActiveMonth(month2 - 1);
@@ -1679,7 +1807,7 @@ var Calendar = (props) => {
       clearSelection
     };
   });
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (mode === "single") {
       if (selectedDate && !isValidISOFormat(selectedDate)) {
         console.error(
@@ -1742,8 +1870,8 @@ Provided value: ${selectedRange.to}`
       if (mode === "range") {
         const secondMonth = activeMonth === 11 ? 0 : activeMonth + 1;
         const secondYear = activeMonth === 11 ? activeYear + 1 : activeYear;
-        return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "GeckoUICalendar__dual", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "GeckoUICalendar__dual--first", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "GeckoUICalendar__dual", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "GeckoUICalendar__dual--first", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             CalendarDayPicker_default,
             {
               mode: "range",
@@ -1760,7 +1888,7 @@ Provided value: ${selectedRange.to}`
               onHoverDate: handleHoverDate
             }
           ) }),
-          numberOfMonths === 2 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "GeckoUICalendar__dual--second", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          numberOfMonths === 2 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "GeckoUICalendar__dual--second", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             CalendarDayPicker_default,
             {
               mode: "range",
@@ -1779,7 +1907,7 @@ Provided value: ${selectedRange.to}`
           ) })
         ] });
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         CalendarDayPicker_default,
         {
           mode: "single",
@@ -1796,7 +1924,7 @@ Provided value: ${selectedRange.to}`
       );
     }
     if (view === "month" /* Month */) {
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         CalendarMonthPicker_default,
         {
           activeMonth,
@@ -1808,9 +1936,9 @@ Provided value: ${selectedRange.to}`
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CalendarYearPicker_default, { activeYear, onSelectYear });
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CalendarYearPicker_default, { activeYear, onSelectYear });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "div",
     {
       className: classNames(
@@ -1829,7 +1957,7 @@ Calendar.displayName = "Calendar";
 var Calendar_default = Calendar;
 
 // src/components/DateInput/DateInput.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var DateInput = (_a) => {
   var _b = _a, {
     value = "",
@@ -1876,20 +2004,20 @@ var DateInput = (_a) => {
     "onStateUpdate",
     "onSubmit"
   ]);
-  const calendarRef = (0, import_react13.useRef)(null);
-  const [openCalendar, setOpenCalendar] = (0, import_react13.useState)(false);
-  const { refs, floatingStyles } = (0, import_react12.useFloating)({
+  const calendarRef = (0, import_react14.useRef)(null);
+  const [openCalendar, setOpenCalendar] = (0, import_react14.useState)(false);
+  const { refs, floatingStyles } = (0, import_react13.useFloating)({
     placement: calendarPlacement,
     strategy: floatingStrategy,
-    middleware: [(0, import_react12.flip)({ padding: 4 }), (0, import_react12.offset)({ mainAxis: 4 })],
-    whileElementsMounted: import_react12.autoUpdate,
+    middleware: [(0, import_react13.flip)({ padding: 4 }), (0, import_react13.offset)({ mainAxis: 4 })],
+    whileElementsMounted: import_react13.autoUpdate,
     open: openCalendar,
     onOpenChange: setOpenCalendar
   });
   useClickOutside_default(() => {
     setOpenCalendar(false);
   }, [refs.reference]);
-  const handleStateUpdateInternal = (0, import_react13.useCallback)(
+  const handleStateUpdateInternal = (0, import_react14.useCallback)(
     (state) => {
       var _a2;
       if (!hideCalendar) {
@@ -1907,11 +2035,11 @@ var DateInput = (_a) => {
     },
     [hideCalendar, onStateUpdate]
   );
-  const handleSubmit = (0, import_react13.useCallback)(() => {
+  const handleSubmit = (0, import_react14.useCallback)(() => {
     setOpenCalendar(false);
     onSubmit == null ? void 0 : onSubmit();
   }, [onSubmit]);
-  const handleChange = (0, import_react13.useCallback)(
+  const handleChange = (0, import_react14.useCallback)(
     (date) => {
       onChange == null ? void 0 : onChange(date);
       if (date === null) {
@@ -1920,14 +2048,14 @@ var DateInput = (_a) => {
     },
     [onChange]
   );
-  const renderCalendarIcon = !hideCalendarIcon ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "GeckoUIDateInput__calendar-icon" }) : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  const renderCalendarIcon = !hideCalendarIcon ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "GeckoUIDateInput__calendar-icon" }) : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "div",
     {
       className: classNames("GeckoUIDateInputWrapper", wrapperClassName),
       ref: (r) => refs.setReference(r),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           BaseDateInput_default,
           __spreadValues({
             value,
@@ -1950,7 +2078,7 @@ var DateInput = (_a) => {
             hasFocus: openCalendar
           }, rest)
         ),
-        !hideCalendar && openCalendar && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref: (r) => refs.setFloating(r), style: __spreadProps(__spreadValues({}, floatingStyles), { zIndex: 9999 }), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        !hideCalendar && openCalendar && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ref: (r) => refs.setFloating(r), style: __spreadProps(__spreadValues({}, floatingStyles), { zIndex: 9999 }), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           Calendar_default,
           {
             calendarRef,
@@ -1970,12 +2098,12 @@ DateInput.displayName = "DateInput";
 var DateInput_default = DateInput;
 
 // src/components/DateRangeInput/DateRangeInput.tsx
-var import_react15 = require("@floating-ui/react");
-var import_react16 = require("react");
+var import_react16 = require("@floating-ui/react");
+var import_react17 = require("react");
 
 // src/components/BaseDateRangeInput/BaseDateRangeInput.tsx
-var import_react14 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_react15 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var BaseDateRangeInput = (_a) => {
   var _b = _a, {
     value,
@@ -2018,20 +2146,20 @@ var BaseDateRangeInput = (_a) => {
     "onSubmit",
     "hasFocus"
   ]);
-  const containerRef = (0, import_react14.useRef)(null);
-  const startMonthRef = (0, import_react14.useRef)(null);
-  const startDayRef = (0, import_react14.useRef)(null);
-  const startYearRef = (0, import_react14.useRef)(null);
-  const endMonthRef = (0, import_react14.useRef)(null);
-  const endDayRef = (0, import_react14.useRef)(null);
-  const endYearRef = (0, import_react14.useRef)(null);
-  const [startMonth, setStartMonth] = (0, import_react14.useState)("");
-  const [startDay, setStartDay] = (0, import_react14.useState)("");
-  const [startYear, setStartYear] = (0, import_react14.useState)("");
-  const [endMonth, setEndMonth] = (0, import_react14.useState)("");
-  const [endDay, setEndDay] = (0, import_react14.useState)("");
-  const [endYear, setEndYear] = (0, import_react14.useState)("");
-  const [lastUpdatedTime, setLastUpdatedTime] = (0, import_react14.useState)(0);
+  const containerRef = (0, import_react15.useRef)(null);
+  const startMonthRef = (0, import_react15.useRef)(null);
+  const startDayRef = (0, import_react15.useRef)(null);
+  const startYearRef = (0, import_react15.useRef)(null);
+  const endMonthRef = (0, import_react15.useRef)(null);
+  const endDayRef = (0, import_react15.useRef)(null);
+  const endYearRef = (0, import_react15.useRef)(null);
+  const [startMonth, setStartMonth] = (0, import_react15.useState)("");
+  const [startDay, setStartDay] = (0, import_react15.useState)("");
+  const [startYear, setStartYear] = (0, import_react15.useState)("");
+  const [endMonth, setEndMonth] = (0, import_react15.useState)("");
+  const [endDay, setEndDay] = (0, import_react15.useState)("");
+  const [endYear, setEndYear] = (0, import_react15.useState)("");
+  const [lastUpdatedTime, setLastUpdatedTime] = (0, import_react15.useState)(0);
   const segmentRefs = {
     startMonth: startMonthRef,
     startDay: startDayRef,
@@ -2219,7 +2347,7 @@ var BaseDateRangeInput = (_a) => {
     onSubmit == null ? void 0 : onSubmit();
     clearFocus();
   };
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const now = Date.now();
     const timeSinceLastUpdate = now - lastUpdatedTime;
     if (timeSinceLastUpdate > 500) {
@@ -2348,8 +2476,8 @@ var BaseDateRangeInput = (_a) => {
     hasFocus && "GeckoUIDateInput--focus",
     className
   );
-  const renderSegments = (segments) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: segments.map(({ ref, value: value2, onChange: onChange2, maxLength, segment, display }, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react14.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  const renderSegments = (segments) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: segments.map(({ ref, value: value2, onChange: onChange2, maxLength, segment, display }, index) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react15.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
       "label",
       {
         className: classNames(
@@ -2362,7 +2490,7 @@ var BaseDateRangeInput = (_a) => {
           handleDisplayClick(segment);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "input",
             {
               ref,
@@ -2381,13 +2509,13 @@ var BaseDateRangeInput = (_a) => {
         ]
       }
     ),
-    index < segments.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "GeckoUIDateInput__separator", children: separator })
+    index < segments.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "GeckoUIDateInput__separator", children: separator })
   ] }, segment)) });
   const generatePlaceholder2 = () => {
     const formattedPattern = format.replace(/\//g, separator);
     return placeholder != null ? placeholder : `${formattedPattern}${rangeSeparator}${formattedPattern}`;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     "div",
     __spreadProps(__spreadValues({
       ref: containerRef,
@@ -2395,27 +2523,27 @@ var BaseDateRangeInput = (_a) => {
     }, rest), {
       onClick: () => handleDisplayClick(),
       children: [
-        Boolean(prefix) && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "GeckoUIDateInput__prefix", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DynamicComponentRenderer_default, { component: prefix }) }),
-        !!isEmpty && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: classNames("GeckoUIDateInput__placeholder", placeholderClassName), children: generatePlaceholder2() }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: classNames("GeckoUIDateInput__display-container"), children: [
+        Boolean(prefix) && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "GeckoUIDateInput__prefix", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DynamicComponentRenderer_default, { component: prefix }) }),
+        !!isEmpty && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: classNames("GeckoUIDateInput__placeholder", placeholderClassName), children: generatePlaceholder2() }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: classNames("GeckoUIDateInput__display-container"), children: [
           renderSegments(startSegments),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "GeckoUIDateRangeInput__range-separator", children: rangeSeparator }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "GeckoUIDateRangeInput__range-separator", children: rangeSeparator }),
           renderSegments(endSegments)
         ] }),
-        Boolean(suffix) && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "GeckoUIDateInput__suffix", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DynamicComponentRenderer_default, { component: suffix }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "GeckoUIDateInput__icons", children: [
-          !hideClearIcon && !isEmpty && !disabled && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        Boolean(suffix) && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "GeckoUIDateInput__suffix", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DynamicComponentRenderer_default, { component: suffix }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "GeckoUIDateInput__icons", children: [
+          !hideClearIcon && !isEmpty && !disabled && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "button",
             {
               type: "button",
               disabled: disabled || readOnly,
               className: "GeckoUIDateInput__clear-button",
               onClick: handleClear,
-              children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "GeckoUI-icon__clear" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "GeckoUI-icon__clear" })
             }
           ),
           renderCalendarIcon,
-          !renderCalendarIcon && !hideCalendarIcon && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "GeckoUIDateInput__calendar-icon" })
+          !renderCalendarIcon && !hideCalendarIcon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "GeckoUIDateInput__calendar-icon" })
         ] })
       ]
     })
@@ -2425,7 +2553,7 @@ BaseDateRangeInput.displayName = "BaseDateRangeInput";
 var BaseDateRangeInput_default = BaseDateRangeInput;
 
 // src/components/DateRangeInput/DateRangeInput.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var DateRangeInput = (_a) => {
   var _b = _a, {
     value,
@@ -2476,8 +2604,8 @@ var DateRangeInput = (_a) => {
     "onStateUpdate",
     "onSubmit"
   ]);
-  const calendarRef = (0, import_react16.useRef)(null);
-  const [openCalendar, setOpenCalendar] = (0, import_react16.useState)(false);
+  const calendarRef = (0, import_react17.useRef)(null);
+  const [openCalendar, setOpenCalendar] = (0, import_react17.useState)(false);
   const handleCloseCalendar = () => {
     setOpenCalendar(false);
     if (!(value == null ? void 0 : value.from) || !(value == null ? void 0 : value.to)) return;
@@ -2485,11 +2613,11 @@ var DateRangeInput = (_a) => {
       onChange == null ? void 0 : onChange({ from: value.to, to: value.from });
     }
   };
-  const { refs, floatingStyles } = (0, import_react15.useFloating)({
+  const { refs, floatingStyles } = (0, import_react16.useFloating)({
     placement: calendarPlacement,
     strategy: floatingStrategy,
-    middleware: [(0, import_react15.flip)({ padding: 4 }), (0, import_react15.offset)({ mainAxis: 4 })],
-    whileElementsMounted: import_react15.autoUpdate,
+    middleware: [(0, import_react16.flip)({ padding: 4 }), (0, import_react16.offset)({ mainAxis: 4 })],
+    whileElementsMounted: import_react16.autoUpdate,
     open: openCalendar,
     onOpenChange: setOpenCalendar
   });
@@ -2527,14 +2655,14 @@ var DateRangeInput = (_a) => {
       handleCloseCalendar();
     }
   };
-  const renderCalendarIcon = !hideCalendarIcon ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "GeckoUIDateInput__calendar-icon" }) : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  const renderCalendarIcon = !hideCalendarIcon ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "GeckoUIDateInput__calendar-icon" }) : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "div",
     {
       className: classNames("GeckoUIDateRangeInputWrapper", wrapperClassName),
       ref: (r) => refs.setReference(r),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           BaseDateRangeInput_default,
           __spreadValues({
             value,
@@ -2558,7 +2686,7 @@ var DateRangeInput = (_a) => {
             hasFocus: openCalendar
           }, rest)
         ),
-        !hideCalendar && openCalendar && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ref: (r) => refs.setFloating(r), style: __spreadProps(__spreadValues({}, floatingStyles), { zIndex: 9999 }), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        !hideCalendar && openCalendar && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { ref: (r) => refs.setFloating(r), style: __spreadProps(__spreadValues({}, floatingStyles), { zIndex: 9999 }), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           Calendar_default,
           {
             mode: "range",
@@ -2577,13 +2705,13 @@ DateRangeInput.displayName = "DateRangeInput";
 var DateRangeInput_default = DateRangeInput;
 
 // src/components/Input/Input.tsx
-var import_react17 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var Input = (0, import_react17.forwardRef)(
+var import_react18 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var Input = (0, import_react18.forwardRef)(
   (_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 = (0, import_react17.useId)();
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    const _id = (0, import_react18.useId)();
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
       "label",
       {
         "aria-disabled": disabled,
@@ -2595,8 +2723,8 @@ var Input = (0, import_react17.forwardRef)(
         ),
         htmlFor: id != null ? id : _id,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DynamicComponentRenderer_default, { component: prefix, inputRef: ref }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DynamicComponentRenderer_default, { component: prefix, inputRef: ref }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             "input",
             __spreadValues({
               className: classNames("GeckoUIInput__input", inputClassName),
@@ -2607,7 +2735,7 @@ var Input = (0, import_react17.forwardRef)(
               readOnly
             }, rest)
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DynamicComponentRenderer_default, { component: suffix, inputRef: ref })
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DynamicComponentRenderer_default, { component: suffix, inputRef: ref })
         ]
       }
     );
@@ -2618,7 +2746,7 @@ var Input_default = Input;
 
 // src/components/Tooltip/Tooltip.tsx
 var RTooltip = __toESM(require("@radix-ui/react-tooltip"));
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var Tooltip = ({
   children,
   delayDuration = 700,
@@ -2631,8 +2759,8 @@ var Tooltip = ({
   sideOffset = 5
 }) => {
   if (!content) return children;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(RTooltip.Provider, { delayDuration, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(RTooltip.Root, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(RTooltip.Provider, { delayDuration, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(RTooltip.Root, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       RTooltip.Trigger,
       {
         asChild: triggerAsChild,
@@ -2642,7 +2770,7 @@ var Tooltip = ({
         children
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(RTooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(RTooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
       RTooltip.Content,
       {
         side,
@@ -2651,8 +2779,8 @@ var Tooltip = ({
         role: "tooltip",
         style: { backgroundColor },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DynamicComponentRenderer_default, { component: content }),
-          (side === "top" || side === "bottom") && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(RTooltip.Arrow, { fill: backgroundColor, className: "GeckoUITooltip__arrow" })
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DynamicComponentRenderer_default, { component: content }),
+          (side === "top" || side === "bottom") && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(RTooltip.Arrow, { fill: backgroundColor, className: "GeckoUITooltip__arrow" })
         ]
       }
     ) })
@@ -2661,7 +2789,7 @@ var Tooltip = ({
 var Tooltip_default = Tooltip;
 
 // src/components/Label/Label.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var Label = (_a) => {
   var _b = _a, {
     className,
@@ -2680,17 +2808,17 @@ var Label = (_a) => {
     "tooltipClassName",
     "children"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", __spreadProps(__spreadValues({ className: classNames("GeckoUILabel", className) }, rest), { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("label", __spreadProps(__spreadValues({ className: classNames("GeckoUILabel", className) }, rest), { children: [
     children,
-    required ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "GeckoUILabel__required-indicator", children: "*" }) : null,
-    tooltip ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    required ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "GeckoUILabel__required-indicator", children: "*" }) : null,
+    tooltip ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       Tooltip_default,
       {
         backgroundColor: tooltipBackgroundColor,
         className: classNames("GeckoUILabel__tooltip", tooltipClassName),
         content: tooltip,
         delayDuration: 0,
-        children: tooltipIcon ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DynamicComponentRenderer_default, { component: tooltipIcon }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "GeckoUILabel__tooltip-icon" })
+        children: tooltipIcon ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DynamicComponentRenderer_default, { component: tooltipIcon }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "GeckoUILabel__tooltip-icon" })
       }
     ) : null
   ] }));
@@ -2698,20 +2826,20 @@ var Label = (_a) => {
 var Label_default = Label;
 
 // src/components/InputError/InputError.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var InputError = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", __spreadProps(__spreadValues({ className: classNames("GeckoUIInputError", className) }, rest), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", __spreadProps(__spreadValues({ className: classNames("GeckoUIInputError", className) }, rest), { children }));
 };
 var InputError_default = InputError;
 
 // src/components/Button/Button.tsx
-var import_react18 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var Button = (0, import_react18.forwardRef)(
+var import_react19 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var Button = (0, import_react19.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className, variant = "filled", size = "md", color = "primary" } = _b, rest = __objRest(_b, ["children", "className", "variant", "size", "color"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "button",
       __spreadProps(__spreadValues({
         className: classNames(
@@ -2733,10 +2861,10 @@ Button.displayName = "Button";
 var Button_default = Button;
 
 // src/components/Spinner/Spinner.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var Spinner = (_a) => {
   var _b = _a, { className, stroke = "currentColor" } = _b, rest = __objRest(_b, ["className", "stroke"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "svg",
     __spreadProps(__spreadValues({
       xmlns: "http://www.w3.org/2000/svg",
@@ -2752,13 +2880,13 @@ var Spinner = (_a) => {
       stroke,
       className: classNames("GeckoUISpinnerIcon", className)
     }, rest), {
-      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
     })
   );
 };
 
 // src/components/LoadingButton/LoadingButton.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var LoadingButton = (_a) => {
   var _b = _a, {
     loading,
@@ -2783,14 +2911,14 @@ var LoadingButton = (_a) => {
   ]);
   const renderContent = () => {
     if (loading && loadingText) {
-      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: loadingText });
+      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: loadingText });
     }
     if (loading && typeof children === "string") {
-      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children });
+      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children });
     }
     return children;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     Button_default,
     __spreadProps(__spreadValues({
       className: classNames(
@@ -2807,9 +2935,9 @@ var LoadingButton = (_a) => {
       variant
     }, buttonProps), {
       children: [
-        loading && spinnerPosition === "start" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Spinner, { className: "size-3.5" }) : null,
+        loading && spinnerPosition === "start" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Spinner, { className: "size-3.5" }) : null,
         renderContent(),
-        loading && spinnerPosition === "end" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Spinner, { className: "size-3.5" }) : null
+        loading && spinnerPosition === "end" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Spinner, { className: "size-3.5" }) : null
       ]
     })
   );
@@ -2818,15 +2946,15 @@ LoadingButton.displayName = "LoadingButton";
 var LoadingButton_default = LoadingButton;
 
 // src/components/RHF/RHFCheckbox/RHFCheckbox.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 
 // src/utils/isEqual.ts
-var import_lodash2 = __toESM(require("lodash.isequal"));
-var isEqual_default = import_lodash2.default;
+var import_lodash = __toESM(require("lodash.isequal"));
+var isEqual_default = import_lodash.default;
 
 // src/components/RHF/RHFController/RHFController.tsx
 var import_react_hook_form = require("react-hook-form");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var RHFController = (_a) => {
   var _b = _a, { control: customControl } = _b, rest = __objRest(_b, ["control"]);
   const formContext = (0, import_react_hook_form.useFormContext)();
@@ -2836,13 +2964,13 @@ var RHFController = (_a) => {
       "RHFController should be wrapped with FormProvider or provide control prop explicitly."
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_hook_form.Controller, __spreadValues({ control: customControl != null ? customControl : control }, rest));
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_hook_form.Controller, __spreadValues({ control: customControl != null ? customControl : control }, rest));
 };
 RHFController.displayName = "RHFController";
 var RHFController_default = RHFController;
 
 // src/components/RHF/RHFCheckbox/RHFCheckbox.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var RHFCheckbox = (_a) => {
   var _b = _a, {
     name,
@@ -2873,8 +3001,8 @@ var RHFCheckbox = (_a) => {
     "partial",
     "onBlur"
   ]);
-  const _id = (0, import_react19.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  const _id = (0, import_react20.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     RHFController_default,
     {
       control,
@@ -2888,8 +3016,8 @@ var RHFCheckbox = (_a) => {
           if (!Array.isArray(field.value)) return false;
           return field.value.map((e) => JSON.stringify(e)).includes(JSON.stringify(value));
         };
-        return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("label", { className: "GeckoUIRHFCheckbox group", htmlFor: id || _id, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("label", { className: "GeckoUIRHFCheckbox group", htmlFor: id || _id, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             Checkbox_default,
             __spreadProps(__spreadValues(__spreadValues({}, field), rest), {
               disabled,
@@ -2920,7 +3048,7 @@ var RHFCheckbox = (_a) => {
               value: void 0
             })
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: classNames("GeckoUIRHFCheckbox__label", labelClassName), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DynamicComponentRenderer_default, { component: label }) })
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: classNames("GeckoUIRHFCheckbox__label", labelClassName), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DynamicComponentRenderer_default, { component: label }) })
         ] });
       }
     }
@@ -2929,8 +3057,56 @@ var RHFCheckbox = (_a) => {
 RHFCheckbox.displayName = "RHFCheckbox";
 var RHFCheckbox_default = RHFCheckbox;
 
+// src/components/RHF/RHFCounterInput/RHFCounterInput.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var RHFCounterInput = (_a) => {
+  var _b = _a, {
+    control,
+    name,
+    rules,
+    className,
+    onChange
+  } = _b, rest = __objRest(_b, [
+    "control",
+    "name",
+    "rules",
+    "className",
+    "onChange"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    RHFController_default,
+    {
+      control,
+      name,
+      rules,
+      render: ({ field, fieldState }) => {
+        var _a2;
+        const hasError = Boolean(fieldState.error);
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          CounterInput_default,
+          __spreadProps(__spreadValues({
+            className: classNames(
+              "GeckoUIRHFCounterInput",
+              hasError && "GeckoUIRHFCounterInput--error",
+              className
+            )
+          }, rest), {
+            value: (_a2 = field.value) != null ? _a2 : 0,
+            onChange: (value) => {
+              field.onChange(value);
+              onChange == null ? void 0 : onChange(value);
+            }
+          })
+        );
+      }
+    }
+  );
+};
+RHFCounterInput.displayName = "RHFCounterInput";
+var RHFCounterInput_default = RHFCounterInput;
+
 // src/components/RHF/RHFInput/RHFInput.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var RHFInput = (_a) => {
   var _b = _a, {
     control,
@@ -2957,7 +3133,7 @@ var RHFInput = (_a) => {
     "onChange",
     "onKeyDown"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     RHFController_default,
     {
       control,
@@ -2967,7 +3143,7 @@ var RHFInput = (_a) => {
         const { field, fieldState } = renderProps;
         const hasError = Boolean(fieldState.error);
         const value = (transform == null ? void 0 : transform.input) ? transform.input(field.value) : field.value;
-        return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           Input_default,
           __spreadProps(__spreadValues(__spreadValues({
             className: classNames(
@@ -2975,8 +3151,8 @@ var RHFInput = (_a) => {
               hasError && "GeckoUIRHFInput--error",
               className
             ),
-            prefix: prefix ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DynamicComponentRenderer_default, __spreadValues({ component: prefix }, renderProps)) : null,
-            suffix: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DynamicComponentRenderer_default, __spreadValues({ component: suffix }, renderProps))
+            prefix: prefix ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DynamicComponentRenderer_default, __spreadValues({ component: prefix }, renderProps)) : null,
+            suffix: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DynamicComponentRenderer_default, __spreadValues({ component: suffix }, renderProps))
           }, field), rest), {
             disabled,
             onBlur: () => {
@@ -2999,21 +3175,21 @@ RHFInput.displayName = "RHFInput";
 var RHFInput_default = RHFInput;
 
 // src/components/RHF/RHFError/RHFError.tsx
-var import_react20 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_react21 = require("react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var RHFError = ({ name, control, className, render }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     RHFController_default,
     {
       control,
       name,
       render: ({ fieldState }) => {
         const { error } = fieldState;
-        if (!(error == null ? void 0 : error.message)) return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react20.Fragment, {}, "rhf-error");
+        if (!(error == null ? void 0 : error.message)) return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react21.Fragment, {}, "rhf-error");
         if (typeof render === "function") {
           return render(fieldState);
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(InputError_default, { className: classNames("GeckoUIRHFError", className), children: error.message });
+        return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(InputError_default, { className: classNames("GeckoUIRHFError", className), children: error.message });
       }
     }
   );
@@ -3022,7 +3198,7 @@ RHFError.displayName = "RHFError";
 var RHFError_default = RHFError;
 
 // src/components/RHF/RHFInputGroup/RHFInputGroup.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var RHFInputGroup = (_a) => {
   var _b = _a, {
     className,
@@ -3046,10 +3222,10 @@ var RHFInputGroup = (_a) => {
     console.warn("RHFInputGroup not containing any `RHF` input component");
   }
   const { id, name, control } = (input == null ? void 0 : input.props) || {};
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: classNames("GeckoUIRHFInputGroup", className), children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Label_default, __spreadProps(__spreadValues({ htmlFor: id, className: labelClassName }, restLabelProps), { children: label })) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: classNames("GeckoUIRHFInputGroup", className), children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Label_default, __spreadProps(__spreadValues({ htmlFor: id, className: labelClassName }, restLabelProps), { children: label })) : null,
     children,
-    name ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(RHFError_default, { className: errorClassName, control, name }) : null
+    name ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RHFError_default, { className: errorClassName, control, name }) : null
   ] });
 };
 var RHFInputGroup_default = RHFInputGroup;
@@ -3076,7 +3252,7 @@ function findInput(el) {
 }
 
 // src/components/RHF/RHFNumberInput/RHFNumberInput.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var RHFNumberInput = (_a) => {
   var _b = _a, {
     strict = true,
@@ -3112,7 +3288,7 @@ var RHFNumberInput = (_a) => {
     }
     return formattedValue;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     RHFInput_default,
     __spreadProps(__spreadValues({
       inputMode: "decimal",
@@ -3130,15 +3306,15 @@ RHFNumberInput.displayName = "RHFNumberInput";
 var RHFNumberInput_default = RHFNumberInput;
 
 // src/components/RHF/RHFCurrencyInput/RHFCurrencyInput.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var RHFCurrencyInput = (_a) => {
   var _b = _a, { className, currency } = _b, rest = __objRest(_b, ["className", "currency"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     RHFNumberInput_default,
     __spreadProps(__spreadValues({
       className: classNames("GeckoUIRHFCurrencyInput", className),
-      prefix: (currency == null ? void 0 : currency.symbol) ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "GeckoUIRHFCurrencyInput__currency-symbol", children: currency.symbol }) : null,
-      suffix: (currency == null ? void 0 : currency.code) ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "GeckoUIRHFCurrencyInput__currency-code", children: currency.code }) : null,
+      prefix: (currency == null ? void 0 : currency.symbol) ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "GeckoUIRHFCurrencyInput__currency-symbol", children: currency.symbol }) : null,
+      suffix: (currency == null ? void 0 : currency.code) ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "GeckoUIRHFCurrencyInput__currency-code", children: currency.code }) : null,
       transform: { input: toThousandsSeparatorFormat }
     }, rest), {
       strict: true
@@ -3149,13 +3325,13 @@ RHFCurrencyInput.displayName = "RHFCurrencyInput";
 var RHFCurrencyInput_default = RHFCurrencyInput;
 
 // src/components/Textarea/Textarea.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_react_textarea_autosize = __toESM(require("react-textarea-autosize"));
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var Textarea = (0, import_react21.forwardRef)(
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var Textarea = (0, import_react22.forwardRef)(
   (_a, ref) => {
     var _b = _a, { autoResize, className, rows = 2, maxRows } = _b, rest = __objRest(_b, ["autoResize", "className", "rows", "maxRows"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       import_react_textarea_autosize.default,
       __spreadValues({
         className: classNames("GeckoUITextarea", className),
@@ -3170,7 +3346,7 @@ Textarea.displayName = "Textarea";
 var Textarea_default = Textarea;
 
 // src/components/RHF/RHFTextarea/RHFTextarea.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var RHFTextarea = (_a) => {
   var _b = _a, {
     name,
@@ -3189,7 +3365,7 @@ var RHFTextarea = (_a) => {
     "onChange",
     "onBlur"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     RHFController_default,
     {
       control,
@@ -3197,7 +3373,7 @@ var RHFTextarea = (_a) => {
       rules,
       render: (renderProps) => {
         const { field, fieldState } = renderProps;
-        return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           Textarea_default,
           __spreadProps(__spreadValues(__spreadValues({
             className: classNames(
@@ -3225,14 +3401,14 @@ RHFTextarea.displayName = "RHFTextarea";
 var RHFTextarea_default = RHFTextarea;
 
 // src/components/Switch/Switch.tsx
-var import_react22 = require("@headlessui/react");
-var import_react23 = require("react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
-var Switch = (0, import_react23.forwardRef)(
+var import_react23 = require("@headlessui/react");
+var import_react24 = require("react");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var Switch = (0, import_react24.forwardRef)(
   (_a, ref) => {
     var _b = _a, { className, thumbClassName, size = "md" } = _b, rest = __objRest(_b, ["className", "thumbClassName", "size"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-      import_react22.Switch,
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      import_react23.Switch,
       __spreadProps(__spreadValues({
         onKeyUp: (e) => {
           if (e.key === "Enter") {
@@ -3243,7 +3419,7 @@ var Switch = (0, import_react23.forwardRef)(
         className: classNames("group GeckoUISwitch", `GeckoUISwitch--size-${size}`, className)
       }, rest), {
         ref,
-        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           "span",
           {
             className: classNames(
@@ -3261,7 +3437,7 @@ Switch.displayName = "Switch";
 var Switch_default = Switch;
 
 // src/components/RHF/RHFSwitch/RHFSwitch.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var RHFSwitch = (_a) => {
   var _b = _a, {
     name,
@@ -3288,7 +3464,7 @@ var RHFSwitch = (_a) => {
     "thumbClassName",
     "onBlur"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     RHFController_default,
     {
       control,
@@ -3306,7 +3482,7 @@ var RHFSwitch = (_a) => {
           field.onChange(newValue);
           onChange == null ? void 0 : onChange(newValue);
         };
-        return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           Switch_default,
           __spreadProps(__spreadValues(__spreadValues({}, field), rest), {
             disabled,
@@ -3338,20 +3514,20 @@ RHFSwitch.displayName = "RHFSwitch";
 var RHFSwitch_default = RHFSwitch;
 
 // src/components/RHF/RHFRadio/RHFRadio.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 
 // src/components/Radio/Radio.tsx
-var import_react24 = require("react");
-var import_jsx_runtime35 = require("react/jsx-runtime");
-var Radio = (0, import_react24.forwardRef)((_a, ref) => {
+var import_react25 = require("react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var Radio = (0, import_react25.forwardRef)((_a, ref) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("input", __spreadProps(__spreadValues({ className: classNames("GeckoUIRadio", className), ref }, rest), { type: "radio" }));
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("input", __spreadProps(__spreadValues({ className: classNames("GeckoUIRadio", className), ref }, rest), { type: "radio" }));
 });
 Radio.displayName = "Radio";
 var Radio_default = Radio;
 
 // src/components/RHF/RHFRadio/RHFRadio.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var RHFRadio = (_a) => {
   var _b = _a, {
     name,
@@ -3376,20 +3552,20 @@ var RHFRadio = (_a) => {
     "onChange",
     "onBlur"
   ]);
-  const _id = (0, import_react25.useId)();
+  const _id = (0, import_react26.useId)();
   const uniqueId = id || _id;
   if (value === void 0 || value === null) {
     throw new Error("RHFRadio: value cannot be undefined or null");
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     RHFController_default,
     {
       control,
       name,
       rules,
       render: ({ field }) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("label", { className: "GeckoUIRHFRadio group", htmlFor: uniqueId, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("label", { className: "GeckoUIRHFRadio group", htmlFor: uniqueId, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             Radio_default,
             __spreadProps(__spreadValues(__spreadValues({}, field), rest), {
               checked: isEqual_default(field.value, value),
@@ -3406,7 +3582,7 @@ var RHFRadio = (_a) => {
               value: void 0
             })
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: classNames("GeckoUIRHFRadio__label", labelClassName), children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DynamicComponentRenderer_default, { component: label }) })
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: classNames("GeckoUIRHFRadio__label", labelClassName), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DynamicComponentRenderer_default, { component: label }) })
         ] });
       }
     }
@@ -3416,10 +3592,10 @@ RHFRadio.displayName = "RHFRadio";
 var RHFRadio_default = RHFRadio;
 
 // src/components/RHF/RHFDateInput/RHFDateInput.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var RHFDateInput = (_a) => {
   var _b = _a, { name, control, rules, onChange } = _b, rest = __objRest(_b, ["name", "control", "rules", "onChange"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     RHFController_default,
     {
       control,
@@ -3428,7 +3604,7 @@ var RHFDateInput = (_a) => {
       render: (renderProps) => {
         const { field, fieldState } = renderProps;
         const hasError = Boolean(fieldState.error);
-        return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           DateInput_default,
           __spreadProps(__spreadValues({
             value: field.value || "",
@@ -3448,10 +3624,10 @@ RHFDateInput.displayName = "RHFDateInput";
 var RHFDateInput_default = RHFDateInput;
 
 // src/components/RHF/RHFDateRangeInput/RHFDateRangeInput.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var RHFDateRangeInput = (_a) => {
   var _b = _a, { name, control, rules, onChange } = _b, rest = __objRest(_b, ["name", "control", "rules", "onChange"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     RHFController_default,
     {
       control,
@@ -3460,7 +3636,7 @@ var RHFDateRangeInput = (_a) => {
       render: (renderProps) => {
         const { field, fieldState } = renderProps;
         const hasError = Boolean(fieldState.error);
-        return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           DateRangeInput_default,
           __spreadProps(__spreadValues({
             value: field.value || void 0,
@@ -3480,7 +3656,7 @@ RHFDateRangeInput.displayName = "RHFDateRangeInput";
 var RHFDateRangeInput_default = RHFDateRangeInput;
 
 // src/components/RHF/RHFFileInput/RHFFileInput.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var RHFFileInput = (_a) => {
   var _b = _a, {
     id,
@@ -3507,7 +3683,7 @@ var RHFFileInput = (_a) => {
     "inputClassName",
     "render"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     RHFController_default,
     {
       control,
@@ -3515,8 +3691,8 @@ var RHFFileInput = (_a) => {
       rules,
       render: (renderProps) => {
         const { field } = renderProps;
-        return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("label", { className: classNames("GeckoUIRHFFileInput--wrapper", className), id, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("label", { className: classNames("GeckoUIRHFFileInput--wrapper", className), id, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             "input",
             __spreadProps(__spreadValues(__spreadValues({}, field), rest), {
               className: classNames(
@@ -3549,7 +3725,7 @@ var RHFFileInput = (_a) => {
               value: void 0
             })
           ),
-          render ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DynamicComponentRenderer_default, __spreadValues({ component: render }, renderProps)) : null
+          render ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DynamicComponentRenderer_default, __spreadValues({ component: render }, renderProps)) : null
         ] });
       }
     }
@@ -3559,9 +3735,9 @@ RHFFileInput.displayName = "RHFFileInput";
 var RHFFileInput_default = RHFFileInput;
 
 // src/components/OTPInput/OTPInput.tsx
-var import_react26 = require("react");
-var import_jsx_runtime40 = require("react/jsx-runtime");
-var OTPInput = (0, import_react26.forwardRef)(
+var import_react27 = require("react");
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var OTPInput = (0, import_react27.forwardRef)(
   ({
     value = "",
     onChange,
@@ -3574,7 +3750,7 @@ var OTPInput = (0, import_react26.forwardRef)(
     onOTPComplete,
     disabled
   }, ref) => {
-    const divRef = (0, import_react26.useRef)(null);
+    const divRef = (0, import_react27.useRef)(null);
     const focus = (index) => {
       var _a, _b;
       const children = (_a = divRef.current) == null ? void 0 : _a.children;
@@ -3603,7 +3779,7 @@ var OTPInput = (0, import_react26.forwardRef)(
       e.preventDefault();
       focus(value.length);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       "div",
       {
         className: classNames(
@@ -3615,7 +3791,7 @@ var OTPInput = (0, import_react26.forwardRef)(
         style: { gridTemplateColumns: `repeat(${length}, minmax(0, 1fr))` },
         children: Array.from({ length }).map((_, i) => i).map((key, index) => {
           const isLast = index === length - 1;
-          return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
             "div",
             {
               style: {
@@ -3623,7 +3799,7 @@ var OTPInput = (0, import_react26.forwardRef)(
                 aspectRatio: aspectRatio === void 0 ? 0.94 : aspectRatio
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                   "input",
                   {
                     className: classNames("GeckoUIOTPInput__input", inputClassName),
@@ -3660,7 +3836,7 @@ var OTPInput = (0, import_react26.forwardRef)(
                     value: value[index] || ""
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                   "button",
                   {
                     className: "GeckoUIOTPInput__overlay-button",
@@ -3684,10 +3860,10 @@ OTPInput.displayName = "OTPInput";
 var OTPInput_default = OTPInput;
 
 // src/components/RHF/RHFOTPInput/RHFOTPInput.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var RHFOTPInput = (_a) => {
   var _b = _a, { control, name, rules, disabled, className } = _b, rest = __objRest(_b, ["control", "name", "rules", "disabled", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     RHFController_default,
     {
       control,
@@ -3695,7 +3871,7 @@ var RHFOTPInput = (_a) => {
       rules,
       disabled,
       render: ({ field, fieldState }) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           OTPInput_default,
           __spreadValues(__spreadValues({
             className: classNames(
@@ -3714,7 +3890,7 @@ RHFOTPInput.displayName = "RHFOTPInput";
 var RHFOTPInput_default = RHFOTPInput;
 
 // src/components/RHF/RHFFilePicker/RHFFilePicker.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function formatFileSize(bytes) {
   if (bytes === 0) return "0 B";
   const k = 1024;
@@ -3724,14 +3900,14 @@ function formatFileSize(bytes) {
 }
 function RHFFilePicker(props) {
   const _a = props, { name, control, rules } = _a, rest = __objRest(_a, ["name", "control", "rules"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     RHFController_default,
     {
       control,
       name,
       rules,
       render: (renderProps) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(RHFFilePickerRenderer, __spreadValues(__spreadValues({}, rest), renderProps));
+        return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(RHFFilePickerRenderer, __spreadValues(__spreadValues({}, rest), renderProps));
       }
     }
   );
@@ -3771,7 +3947,7 @@ function RHFFilePickerRenderer({
     const updatedFiles = value.filter((file) => file.preview !== fileToRemove.preview);
     field.onChange(updatedFiles);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
     "div",
     {
       className: classNames(
@@ -3781,16 +3957,16 @@ function RHFFilePickerRenderer({
         error && "GeckoUIRHFFilePicker--error"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
           "div",
           {
             className: "GeckoUIRHFFilePicker__upload-area",
             ref: dropzoneRef,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Upload_default, { className: "GeckoUIRHFFilePicker__upload-icon" }),
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "GeckoUIRHFFilePicker__upload-text", children: "Drag and drop files here, or browse" }),
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "GeckoUIRHFFilePicker__upload-buttons", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Upload_default, { className: "GeckoUIRHFFilePicker__upload-icon" }),
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: "GeckoUIRHFFilePicker__upload-text", children: "Drag and drop files here, or browse" }),
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "GeckoUIRHFFilePicker__upload-buttons", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                   "button",
                   {
                     className: "GeckoUIRHFFilePicker__browse-button",
@@ -3799,7 +3975,7 @@ function RHFFilePickerRenderer({
                     children: "Browse Files"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                   "button",
                   {
                     className: "GeckoUIRHFFilePicker__browse-button",
@@ -3809,20 +3985,20 @@ function RHFFilePickerRenderer({
                   }
                 )
               ] }),
-              loading ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "GeckoUIRHFFilePicker__loading-overlay", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Spinner, {}) }) : null
+              loading ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "GeckoUIRHFFilePicker__loading-overlay", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Spinner, {}) }) : null
             ]
           }
         ),
-        Boolean(value == null ? void 0 : value.length) && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "GeckoUIRHFFilePicker__file-list", children: value.map((file) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "GeckoUIRHFFilePicker__file-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "GeckoUIRHFFilePicker__file-name", children: file.name }),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "GeckoUIRHFFilePicker__file-size", children: formatFileSize(file.size) }),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        Boolean(value == null ? void 0 : value.length) && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "GeckoUIRHFFilePicker__file-list", children: value.map((file) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "GeckoUIRHFFilePicker__file-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "GeckoUIRHFFilePicker__file-name", children: file.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "GeckoUIRHFFilePicker__file-size", children: formatFileSize(file.size) }),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
             "button",
             {
               className: "GeckoUIRHFFilePicker__file-remove",
               onClick: () => handleRemoveFile(file),
               type: "button",
-              children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(X_default, { className: "GeckoUIRHFFilePicker__file-remove-icon" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(X_default, { className: "GeckoUIRHFFilePicker__file-remove-icon" })
             }
           )
         ] }, file.preview)) })
@@ -3834,8 +4010,8 @@ RHFFilePicker.displayName = "RHFFilePicker";
 var RHFFilePicker_default = RHFFilePicker;
 
 // src/components/Select/Select/Select.tsx
-var import_react31 = require("@floating-ui/react");
-var import_react32 = require("react");
+var import_react32 = require("@floating-ui/react");
+var import_react33 = require("react");
 
 // src/utils/isTextIncludes.ts
 function isTextIncludes(baseString = "", searchString) {
@@ -3904,7 +4080,7 @@ function findSelectOptions(el) {
 }
 
 // src/components/Select/SelectButton/SelectButton.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 
 // src/utils/createLabel.ts
 function createLabel(item) {
@@ -3936,14 +4112,14 @@ function createLabel(item) {
 var createLabel_default = createLabel;
 
 // src/components/Select/hooks/useSelectTrigger.tsx
-var import_lodash3 = __toESM(require("lodash.isequal"));
-var import_react28 = require("react");
+var import_lodash2 = __toESM(require("lodash.isequal"));
+var import_react29 = require("react");
 
 // src/components/Select/useSelect.tsx
-var import_react27 = require("react");
-var SelectContext = (0, import_react27.createContext)(void 0);
+var import_react28 = require("react");
+var SelectContext = (0, import_react28.createContext)(void 0);
 var useSelect = () => {
-  const context = (0, import_react27.useContext)(SelectContext);
+  const context = (0, import_react28.useContext)(SelectContext);
   if (context === void 0) {
     throw new Error("SelectContext must be used within a SelectProvider");
   }
@@ -3987,7 +4163,7 @@ var useSelectTrigger = () => {
     }
     if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Tab") {
       e.preventDefault();
-      let currentIndex = filteredOptions.findIndex((e2) => (0, import_lodash3.default)(e2.value, focusedOption == null ? void 0 : focusedOption.value));
+      let currentIndex = filteredOptions.findIndex((e2) => (0, import_lodash2.default)(e2.value, focusedOption == null ? void 0 : focusedOption.value));
       currentIndex = currentIndex === -1 ? 0 : currentIndex;
       let isDown = e.key === "ArrowDown" || e.key === "Tab";
       if (e.key === "Tab" && e.shiftKey) {
@@ -4022,12 +4198,12 @@ var useSelectTrigger = () => {
       handleChange(value.at(-1));
     }
   };
-  const hasValue = (0, import_react28.useMemo)(() => {
+  const hasValue = (0, import_react29.useMemo)(() => {
     if (multiple) {
       return Array.isArray(value) && !!(value == null ? void 0 : value.length);
     }
     if (value === "" || value === null) {
-      return !!options.find((opt) => (0, import_lodash3.default)(opt.value, value));
+      return !!options.find((opt) => (0, import_lodash2.default)(opt.value, value));
     }
     return value !== void 0;
   }, [options, multiple, value]);
@@ -4062,7 +4238,7 @@ var sortMultiSelectValue = (value, options) => {
 };
 
 // src/components/Select/SelectButton/SelectButton.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 function SelectButton({ prefix, suffix, className }) {
   const {
     disabled,
@@ -4082,9 +4258,9 @@ function SelectButton({ prefix, suffix, className }) {
     onChange,
     clearable
   } = useSelect();
-  const id = (0, import_react29.useId)();
+  const id = (0, import_react30.useId)();
   const { hasValue, handleInputChange, handleKeyboardInteraction } = useSelectTrigger();
-  const trigger = (0, import_react29.useMemo)(() => import_react29.Children.toArray(children).find(isSelectTrigger), [children]);
+  const trigger = (0, import_react30.useMemo)(() => import_react30.Children.toArray(children).find(isSelectTrigger), [children]);
   const handleClear = (e) => {
     e.stopPropagation();
     if (disabled) return;
@@ -4098,7 +4274,7 @@ function SelectButton({ prefix, suffix, className }) {
     return trigger;
   }
   const filterable = _filterable === true || _filterable === "inline";
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     "div",
     {
       className: classNames(
@@ -4119,9 +4295,9 @@ function SelectButton({ prefix, suffix, className }) {
       },
       "aria-disabled": disabled,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DynamicComponentRenderer_default, { component: prefix }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "GeckoUISelectButton__content", children: [
-          hasValue ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SelectButtonContent, {}) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DynamicComponentRenderer_default, { component: prefix }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "GeckoUISelectButton__content", children: [
+          hasValue ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(SelectButtonContent, {}) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
             "span",
             {
               className: classNames(
@@ -4132,7 +4308,7 @@ function SelectButton({ prefix, suffix, className }) {
               children: placeholder != null ? placeholder : "Select Item"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
             "div",
             {
               className: classNames(
@@ -4142,7 +4318,7 @@ function SelectButton({ prefix, suffix, className }) {
                 multiple && Array.isArray(value) && !!(value == null ? void 0 : value.length) && "GeckoUISelectButton__search--multi-selected"
               ),
               "data-keyword": filterable ? keyword : "",
-              children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
                 "input",
                 {
                   id,
@@ -4172,12 +4348,12 @@ function SelectButton({ prefix, suffix, className }) {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "GeckoUISelectButton__icons", children: [
-          hasValue && !disabled && clearable && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("button", { className: "GeckoUISelectButton__clear-button", type: "button", onClick: handleClear, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "GeckoUI-icon__clear" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "GeckoUISelectButton__icons", children: [
+          hasValue && !disabled && clearable && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("button", { className: "GeckoUISelectButton__clear-button", type: "button", onClick: handleClear, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "GeckoUI-icon__clear" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
             DynamicComponentRenderer_default,
             {
-              component: suffix != null ? suffix : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "GeckoUI-icon__arrow-right GeckoUISelectTrigger__arrow-right-icon" })
+              component: suffix != null ? suffix : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "GeckoUI-icon__arrow-right GeckoUISelectTrigger__arrow-right-icon" })
             }
           )
         ] })
@@ -4221,7 +4397,7 @@ function SelectButtonContent() {
     });
     return selectedOptions.map((option) => {
       const { remove, value: value2, label } = option;
-      return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
         "div",
         {
           className: classNames(
@@ -4229,8 +4405,8 @@ function SelectButtonContent() {
             disabled && "GeckoUISelectButton__multiselected-chip--disabled"
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { children: option.label }),
-            !disabled && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { children: option.label }),
+            !disabled && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
               "button",
               {
                 type: "button",
@@ -4243,7 +4419,7 @@ function SelectButtonContent() {
                   "GeckoUISelectButton__multiselected-chip__clear-button",
                   disabled && "GeckoUISelectButton__multiselected-chip__clear-button--disabled"
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
                   "span",
                   {
                     className: classNames(
@@ -4264,19 +4440,19 @@ function SelectButtonContent() {
   }
   const selectedOptionLabel = value !== void 0 ? (_b = (_a = options.find((option) => isEqual_default(option.value, value))) == null ? void 0 : _a.label) != null ? _b : createLabel_default(value) : null;
   if (open && selectedOptionLabel && filterable) {
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "GeckoUISelectButton__value GeckoUISelectButton__value--placeholder", children: selectedOptionLabel });
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "GeckoUISelectButton__value GeckoUISelectButton__value--placeholder", children: selectedOptionLabel });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "GeckoUISelectButton__value GeckoUISelectButton__value--selected", children: selectedOptionLabel });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "GeckoUISelectButton__value GeckoUISelectButton__value--selected", children: selectedOptionLabel });
 }
 SelectButton.displayName = "SelectButton";
 var SelectButton_default = SelectButton;
 
 // src/components/Select/SelectMenu/SelectMenu.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 
 // src/components/Select/SelectDropdownSearch/SelectDropdownSearch.tsx
-var import_lodash4 = __toESM(require("lodash.isequal"));
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_lodash3 = __toESM(require("lodash.isequal"));
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var SelectDropdownSearch = (_a) => {
   var _b = _a, {
     placeholder = "Search options...",
@@ -4304,7 +4480,7 @@ var SelectDropdownSearch = (_a) => {
   const handleKeyboardInteraction = (e) => {
     if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Tab") {
       e.preventDefault();
-      let currentIndex = filteredOptions.findIndex((e2) => (0, import_lodash4.default)(e2.value, focusedOption == null ? void 0 : focusedOption.value));
+      let currentIndex = filteredOptions.findIndex((e2) => (0, import_lodash3.default)(e2.value, focusedOption == null ? void 0 : focusedOption.value));
       currentIndex = currentIndex === -1 ? 0 : currentIndex;
       let nextIndex = e.key === "ArrowUp" ? currentIndex - 1 : currentIndex + 1;
       if (nextIndex < 0) {
@@ -4341,11 +4517,11 @@ var SelectDropdownSearch = (_a) => {
       setFocusedOption(__spreadProps(__spreadValues({}, focusedValue), { focusType: "keyboard" }));
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     Input_default,
     __spreadProps(__spreadValues({
       placeholder,
-      prefix: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "GeckoUISelectDropdownSearch__icon" }),
+      prefix: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "GeckoUISelectDropdownSearch__icon" }),
       className: classNames("GeckoUISelectDropdownSearch", className)
     }, rest), {
       autoComplete: "off",
@@ -4361,18 +4537,18 @@ SelectDropdownSearch.displayName = "SelectDropdownSearch";
 var SelectDropdownSearch_default = SelectDropdownSearch;
 
 // src/components/Select/SelectEmpty/SelectEmpty.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var SelectEmpty = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
   const { isEmpty } = useSelect();
   if (!isEmpty) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", __spreadProps(__spreadValues({ className: classNames("GeckoUISelectEmpty", className) }, rest), { children: children || "No options" }));
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", __spreadProps(__spreadValues({ className: classNames("GeckoUISelectEmpty", className) }, rest), { children: children || "No options" }));
 };
 SelectEmpty.displayName = "SelectEmpty";
 var SelectEmpty_default = SelectEmpty;
 
 // src/components/Select/SelectMenu/SelectMenu.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var SelectMenu = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
   const {
@@ -4382,15 +4558,15 @@ var SelectMenu = (_a) => {
     menuScrollContainerRef,
     floating: { refs, floatingStyles }
   } = useSelect();
-  const menuItems = (0, import_react30.useMemo)(
-    () => import_react30.Children.toArray(children).filter((el) => !isSelectTrigger(el)),
+  const menuItems = (0, import_react31.useMemo)(
+    () => import_react31.Children.toArray(children).filter((el) => !isSelectTrigger(el)),
     [children]
   );
   if (!open || disabled) {
     return null;
   }
   const hasDropdownSearch = filterable === "dropdown";
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
     "div",
     __spreadProps(__spreadValues({
       ref: (r) => refs.setFloating(r),
@@ -4402,10 +4578,10 @@ var SelectMenu = (_a) => {
       )
     }, rest), {
       children: [
-        hasDropdownSearch && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(SelectDropdownSearch_default, { className: "GeckoUISelectMenu__search-container", autoFocus: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { ref: menuScrollContainerRef, className: "GeckoUISelectMenu__items", children: [
+        hasDropdownSearch && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectDropdownSearch_default, { className: "GeckoUISelectMenu__search-container", autoFocus: true }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { ref: menuScrollContainerRef, className: "GeckoUISelectMenu__items", children: [
           menuItems,
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Empty, { children: menuItems })
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Empty, { children: menuItems })
         ] })
       ]
     })
@@ -4414,18 +4590,18 @@ var SelectMenu = (_a) => {
 function Empty({ children }) {
   const { hideDefaultEmptyUI = false } = useSelect();
   if (hideDefaultEmptyUI) return null;
-  const customEmpty = import_react30.Children.toArray(children).find(isSelectEmpty);
+  const customEmpty = import_react31.Children.toArray(children).find(isSelectEmpty);
   if (customEmpty) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(SelectEmpty_default, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectEmpty_default, {});
 }
 SelectMenu.displayName = "SelectMenu";
 var SelectMenu_default = SelectMenu;
 
 // src/components/Select/Select/Select.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var Select = (props) => {
-  const inputRef = (0, import_react32.useRef)(null);
-  const menuScrollContainerRef = (0, import_react32.useRef)(null);
+  const inputRef = (0, import_react33.useRef)(null);
+  const menuScrollContainerRef = (0, import_react33.useRef)(null);
   const _a = props, {
     disabled,
     inputRef: customInputRef,
@@ -4453,22 +4629,22 @@ var Select = (props) => {
     "floatingStrategy",
     "clearable"
   ]);
-  const [open, setOpen] = (0, import_react32.useState)(false);
-  const [keyword, setKeyword] = (0, import_react32.useState)("");
-  const [focusedOption, setFocusedOption] = (0, import_react32.useState)(null);
-  const floating = (0, import_react31.useFloating)({
+  const [open, setOpen] = (0, import_react33.useState)(false);
+  const [keyword, setKeyword] = (0, import_react33.useState)("");
+  const [focusedOption, setFocusedOption] = (0, import_react33.useState)(null);
+  const floating = (0, import_react32.useFloating)({
     placement,
     strategy: floatingStrategy,
-    middleware: [(0, import_react31.flip)({ padding: 6 }), (0, import_react31.offset)({ mainAxis: 6 })],
-    whileElementsMounted: import_react31.autoUpdate,
+    middleware: [(0, import_react32.flip)({ padding: 6 }), (0, import_react32.offset)({ mainAxis: 6 })],
+    whileElementsMounted: import_react32.autoUpdate,
     open,
     onOpenChange: setOpen
   });
   const { refs } = floating;
-  const options = (0, import_react32.useMemo)(
+  const options = (0, import_react33.useMemo)(
     () => {
       var _a2;
-      return (_a2 = import_react32.Children.toArray(children).map(findSelectOptions).filter(Boolean).flat()) != null ? _a2 : [];
+      return (_a2 = import_react33.Children.toArray(children).map(findSelectOptions).filter(Boolean).flat()) != null ? _a2 : [];
     },
     [children]
   );
@@ -4517,7 +4693,7 @@ var Select = (props) => {
   useClickOutside_default(() => {
     closeMenu();
   }, [refs.reference]);
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     SelectContext.Provider,
     {
       value: __spreadValues({
@@ -4546,14 +4722,14 @@ var Select = (props) => {
         onChange,
         clearable
       }, rest),
-      children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
         "div",
         {
           className: classNames("GeckoUISelect", wrapperClassName),
           ref: (r) => refs.setReference(r),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SelectButton_default, __spreadValues({}, props)),
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SelectMenu_default, { className: menuClassName, children })
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(SelectButton_default, __spreadValues({}, props)),
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(SelectMenu_default, { className: menuClassName, children })
           ]
         }
       )
@@ -4564,8 +4740,8 @@ Select.displayName = "Select";
 var Select_default = Select;
 
 // src/components/Select/SelectOption/SelectOption.tsx
-var import_react33 = require("react");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_react34 = require("react");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var SelectOption = (_a) => {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
   const _a2 = props, {
@@ -4587,7 +4763,7 @@ var SelectOption = (_a) => {
     "onRemove",
     "disabled"
   ]);
-  const ref = (0, import_react33.useRef)(null);
+  const ref = (0, import_react34.useRef)(null);
   const { preventDefault, attachPreventDefault } = usePreventDefault_default();
   const {
     closeMenuOnSelect,
@@ -4605,7 +4781,7 @@ var SelectOption = (_a) => {
   } = useSelect();
   const selected = isSelected(value);
   const focused = !isNil_default(focusedOption) && isEqual_default(focusedOption == null ? void 0 : focusedOption.value, value);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (!ref.current || !menuScrollContainerRef.current) return;
     if ((focusedOption == null ? void 0 : focusedOption.focusType) !== "mouse" && focused) {
       const scrollContainer = menuScrollContainerRef.current;
@@ -4670,7 +4846,7 @@ var SelectOption = (_a) => {
     }
     return children;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
     "div",
     __spreadProps(__spreadValues({
       tabIndex: -1,
@@ -4690,8 +4866,8 @@ var SelectOption = (_a) => {
       },
       onClick: disabled ? void 0 : handleOnClick,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Content2, {}),
-        !!selected && !hideCheckIcon && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "GeckoUI-icon__check GeckoUISelectOption__check-icon" })
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Content2, {}),
+        !!selected && !hideCheckIcon && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "GeckoUI-icon__check GeckoUISelectOption__check-icon" })
       ]
     })
   );
@@ -4735,7 +4911,7 @@ var SelectConsumer = ({ render }) => {
 SelectConsumer.displayName = "SelectConsumer";
 
 // src/components/RHF/RHFSelect/RHFSelect.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var RHFSelect = (_a) => {
   var _b = _a, {
     name,
@@ -4750,14 +4926,14 @@ var RHFSelect = (_a) => {
     "className",
     "wrapperClassName"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     RHFController_default,
     {
       name,
       control,
       rules,
       render: ({ field: { ref, value, onChange }, fieldState: { error } }) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           Select_default,
           __spreadProps(__spreadValues({
             inputRef: ref,
@@ -4784,7 +4960,7 @@ RHFSelect.displayName = "RHFSelect";
 var RHFSelect_default = RHFSelect;
 
 // src/components/Alert/Alert.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var Alert = (props) => {
   const {
     variant = "default",
@@ -4796,7 +4972,7 @@ var Alert = (props) => {
     icon,
     iconClassName
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
     "div",
     {
       className: classNames(
@@ -4806,8 +4982,8 @@ var Alert = (props) => {
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "GeckoUIAlert__body", children: [
-          icon ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(DynamicComponentRenderer_default, { component: icon }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "GeckoUIAlert__body", children: [
+          icon ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(DynamicComponentRenderer_default, { component: icon }) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
             "div",
             {
               className: classNames(
@@ -4817,10 +4993,10 @@ var Alert = (props) => {
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(DynamicComponentRenderer_default, { component: title, className: "GeckoUIAlert__title" }),
-          Boolean(onRemove) && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("button", { className: "GeckoUIAlert__remove-button", onClick: onRemove, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "GeckoUIAlert__remove-button__icon" }) })
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(DynamicComponentRenderer_default, { component: title, className: "GeckoUIAlert__title" }),
+          Boolean(onRemove) && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("button", { className: "GeckoUIAlert__remove-button", onClick: onRemove, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "GeckoUIAlert__remove-button__icon" }) })
         ] }),
-        description ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "GeckoUIAlert__description", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(DynamicComponentRenderer_default, { component: description }) }) : null
+        description ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "GeckoUIAlert__description", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(DynamicComponentRenderer_default, { component: description }) }) : null
       ]
     }
   );
@@ -4828,7 +5004,7 @@ var Alert = (props) => {
 var Alert_default = Alert;
 
 // src/components/Pagination/Pagination.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var Pagination = ({ currentPage, totalPages, onChange, className }) => {
   if (totalPages <= 1) return null;
   const getPages = () => {
@@ -4862,8 +5038,8 @@ var Pagination = ({ currentPage, totalPages, onChange, className }) => {
     return pages2;
   };
   const pages = getPages();
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: classNames("GeckoUIPagination", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: classNames("GeckoUIPagination", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       "button",
       {
         className: "GeckoUIPagination__arrow",
@@ -4872,15 +5048,15 @@ var Pagination = ({ currentPage, totalPages, onChange, className }) => {
           onChange(currentPage - 1);
         },
         type: "button",
-        children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "GeckoUIPagination__arrow__icon GeckoUIPagination__arrow__icon--previous" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "GeckoUIPagination__arrow__icon GeckoUIPagination__arrow__icon--previous" })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "GeckoUIPagination__page-count", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { children: currentPage }),
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { children: "/" }),
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { children: totalPages })
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "GeckoUIPagination__page-count", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { children: currentPage }),
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { children: "/" }),
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { children: totalPages })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "GeckoUIPagination__page-buttons", children: pages.map((page, index) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "GeckoUIPagination__page-buttons", children: pages.map((page, index) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       "button",
       {
         className: classNames(
@@ -4895,7 +5071,7 @@ var Pagination = ({ currentPage, totalPages, onChange, className }) => {
       },
       index
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       "button",
       {
         className: "GeckoUIPagination__arrow",
@@ -4904,7 +5080,7 @@ var Pagination = ({ currentPage, totalPages, onChange, className }) => {
           onChange(currentPage + 1);
         },
         type: "button",
-        children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "GeckoUIPagination__arrow__icon GeckoUIPagination__arrow__icon--next" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "GeckoUIPagination__arrow__icon GeckoUIPagination__arrow__icon--next" })
       }
     )
   ] });
@@ -4912,21 +5088,21 @@ var Pagination = ({ currentPage, totalPages, onChange, className }) => {
 var Pagination_default = Pagination;
 
 // src/components/ConfirmDialog/ConfirmDialog.tsx
-var import_react35 = require("react");
+var import_react36 = require("react");
 
 // src/components/Dialog/Dialog.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 var import_client = require("react-dom/client");
 
 // src/components/Dialog/DialogContainer.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var DIALOG_CONTAINER_ID = "GeckoUI-dialog-container";
 function DialogContainer() {
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { id: DIALOG_CONTAINER_ID });
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { id: DIALOG_CONTAINER_ID });
 }
 
 // src/components/Dialog/Dialog.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var root = null;
 var dismissCallback = null;
 var dismiss = () => {
@@ -4946,7 +5122,7 @@ var show = (options) => {
   }
   root = (0, import_client.createRoot)(el);
   (_a = document.activeElement) == null ? void 0 : _a.blur();
-  root.render(/* @__PURE__ */ (0, import_jsx_runtime53.jsx)(DialogContent, __spreadValues({}, options)));
+  root.render(/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(DialogContent, __spreadValues({}, options)));
 };
 function DialogContent(_a) {
   var _b = _a, {
@@ -4966,8 +5142,8 @@ function DialogContent(_a) {
     }
     return acc;
   }, {});
-  const ref = (0, import_react34.useRef)(null);
-  const [animationState, setAnimationState] = (0, import_react34.useState)("entering");
+  const ref = (0, import_react35.useRef)(null);
+  const [animationState, setAnimationState] = (0, import_react35.useState)("entering");
   const handleDismiss = () => {
     setAnimationState("closing");
     setTimeout(() => {
@@ -4978,7 +5154,7 @@ function DialogContent(_a) {
       }
     }, 300);
   };
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     dismissCallback = handleDismiss;
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
@@ -4991,13 +5167,13 @@ function DialogContent(_a) {
   }, []);
   useEscListener_default(dismissOnEsc ? dismiss : void 0);
   useClickOutside_default(dismissOnOutsideClick ? dismiss : void 0, [ref]);
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", __spreadProps(__spreadValues({ className: "GeckoUIDialog", "data-state": animationState }, dataAttributes), { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "GeckoUIDialog__backdrop", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { ref, className: classNames("GeckoUIDialog__dialog", className), children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(DynamicComponentRenderer_default, { component: content, dismiss }) }) }) }));
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", __spreadProps(__spreadValues({ className: "GeckoUIDialog", "data-state": animationState }, dataAttributes), { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "GeckoUIDialog__backdrop", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { ref, className: classNames("GeckoUIDialog__dialog", className), children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(DynamicComponentRenderer_default, { component: content, dismiss }) }) }) }));
 }
 var Dialog = { show, dismiss };
 var Dialog_default = Dialog;
 
 // src/components/ConfirmDialog/ConfirmDialog.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 function ConfirmDialogContent({
   confirmButtonLabel = "Ok",
   cancelButtonLabel = "Cancel",
@@ -5009,10 +5185,10 @@ function ConfirmDialogContent({
   onConfirm,
   onCancel
 }) {
-  const [cancelLoading, setCancelLoading] = (0, import_react35.useState)(false);
-  const [confirmLoading, setConfirmLoading] = (0, import_react35.useState)(false);
+  const [cancelLoading, setCancelLoading] = (0, import_react36.useState)(false);
+  const [confirmLoading, setConfirmLoading] = (0, import_react36.useState)(false);
   const { preventDefault, attachPreventDefault } = usePreventDefault_default();
-  const handleConfirm = (0, import_react35.useCallback)(() => __async(null, null, function* () {
+  const handleConfirm = (0, import_react36.useCallback)(() => __async(null, null, function* () {
     const isAsync = isAsyncFn(onConfirm);
     if (isAsync) {
       setConfirmLoading(true);
@@ -5030,7 +5206,7 @@ function ConfirmDialogContent({
     setCancelLoading(false);
     attachPreventDefault(dismiss2);
   };
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     const onKeyDown = (e) => {
       const el = document.activeElement;
       if (e.key === "Enter") {
@@ -5047,11 +5223,11 @@ function ConfirmDialogContent({
       return document.removeEventListener("keydown", onKeyDown);
     };
   }, [handleConfirm]);
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: classNames("GeckoUIConfirmDialog__title", titleClassName), children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(DynamicComponentRenderer_default, { component: title }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: classNames("GeckoUIConfirmDialog__content", contentClassName), children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(DynamicComponentRenderer_default, { component: content, dismiss: dismiss2 }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "GeckoUIConfirmDialog__actions", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: classNames("GeckoUIConfirmDialog__title", titleClassName), children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DynamicComponentRenderer_default, { component: title }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: classNames("GeckoUIConfirmDialog__content", contentClassName), children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DynamicComponentRenderer_default, { component: content, dismiss: dismiss2 }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "GeckoUIConfirmDialog__actions", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
         LoadingButton_default,
         {
           className: classNames("GeckoUIConfirmDialog__cancel-button"),
@@ -5063,7 +5239,7 @@ function ConfirmDialogContent({
           children: cancelButtonLabel
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
         LoadingButton_default,
         {
           className: classNames("GeckoUIConfirmDialog__confirm-button"),
@@ -5083,7 +5259,7 @@ var show2 = (options) => {
     dismissOnOutsideClick: false
   }, options), {
     className: classNames("GeckoUIConfirmDialog__dialog", options.className),
-    content: ({ dismiss: dismiss2 }) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ConfirmDialogContent, __spreadProps(__spreadValues({}, options), { dismiss: dismiss2 }))
+    content: ({ dismiss: dismiss2 }) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ConfirmDialogContent, __spreadProps(__spreadValues({}, options), { dismiss: dismiss2 }))
   }));
 };
 var ConfirmDialog = { show: show2, dismiss: Dialog_default.dismiss };
@@ -5094,28 +5270,28 @@ var import_sonner = require("sonner");
 
 // src/components/GeckoUIPortal/GeckoUIPortal.tsx
 var import_mermaid2 = __toESM(require("mermaid"));
-var import_react36 = require("react");
+var import_react37 = require("react");
 var import_sonner2 = require("sonner");
 
 // src/components/Drawer/DrawerContainer.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var DRAWER_CONTAINER_ID = "GeckoUI-drawer-container";
 function DrawerContainer() {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { id: DRAWER_CONTAINER_ID });
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { id: DRAWER_CONTAINER_ID });
 }
 
 // src/components/GeckoUIPortal/GeckoUIPortal.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var GeckoUIPortal = ({ toastOptions = {}, mermaidConfig = {} }) => {
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     import_mermaid2.default.initialize(__spreadValues({
       startOnLoad: false,
       suppressErrorRendering: true
     }, mermaidConfig));
   }, [mermaidConfig]);
   const _a = toastOptions, { style } = _a, restToastOptions = __objRest(_a, ["style"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       import_sonner2.Toaster,
       __spreadValues({
         position: "bottom-right",
@@ -5126,16 +5302,16 @@ var GeckoUIPortal = ({ toastOptions = {}, mermaidConfig = {} }) => {
         }, style)
       }, restToastOptions)
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DrawerContainer, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DialogContainer, {})
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DrawerContainer, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DialogContainer, {})
   ] });
 };
 var GeckoUIPortal_default = GeckoUIPortal;
 
 // src/components/Drawer/Drawer.tsx
-var import_react37 = require("react");
+var import_react38 = require("react");
 var import_client2 = require("react-dom/client");
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 function getDrawerClasses(placement, open, className) {
   const baseClass = "GeckoUIDrawer__drawer";
   const placementClass = `${baseClass}--${placement}`;
@@ -5163,7 +5339,7 @@ function Drawer({
   children,
   dismissOnEscape = true
 }) {
-  const drawerRootRef = (0, import_react37.useRef)(null);
+  const drawerRootRef = (0, import_react38.useRef)(null);
   const handleDismiss = () => {
     if (open) handleClose == null ? void 0 : handleClose();
   };
@@ -5172,8 +5348,8 @@ function Drawer({
     handleDismiss();
   }, [drawerRootRef]);
   useEscListener_default(dismissOnEscape ? handleDismiss : void 0);
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "GeckoUIDrawer", ref: drawerRootRef, role: "dialog", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "GeckoUIDrawer", ref: drawerRootRef, role: "dialog", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       "div",
       {
         className: classNames(
@@ -5188,7 +5364,7 @@ function Drawer({
         role: "presentation"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: getDrawerClasses(placement, open, className), children })
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: getDrawerClasses(placement, open, className), children })
   ] });
 }
 var root2 = null;
@@ -5199,7 +5375,7 @@ Drawer.show = (node, options = {}) => {
   }
   root2 = (0, import_client2.createRoot)(el);
   root2.render(
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Drawer, __spreadProps(__spreadValues({}, options), { open: true, children: node }))
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Drawer, __spreadProps(__spreadValues({}, options), { open: true, children: node }))
   );
 };
 Drawer.dismiss = () => {
@@ -5212,13 +5388,13 @@ Drawer.dismiss = () => {
 var Drawer_default = Drawer;
 
 // src/components/Menu/Menu.tsx
-var import_react38 = require("@headlessui/react");
-var import_jsx_runtime58 = require("react/jsx-runtime");
-var Menu = import_react38.Menu;
+var import_react39 = require("@headlessui/react");
+var import_jsx_runtime60 = require("react/jsx-runtime");
+var Menu = import_react39.Menu;
 var MenuButton = (_a) => {
   var _b = _a, { as } = _b, rest = __objRest(_b, ["as"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
-    import_react38.MenuButton,
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    import_react39.MenuButton,
     __spreadProps(__spreadValues({
       as: as != null ? as : "button"
     }, rest), {
@@ -5234,8 +5410,8 @@ var MenuButton = (_a) => {
 };
 var MenuItems = (_a) => {
   var _b = _a, { as } = _b, rest = __objRest(_b, ["as"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
-    import_react38.MenuItems,
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    import_react39.MenuItems,
     __spreadProps(__spreadValues({
       as: as != null ? as : "div"
     }, rest), {
@@ -5251,8 +5427,8 @@ var MenuItems = (_a) => {
 };
 var MenuItem = (_a) => {
   var _b = _a, { children, as } = _b, rest = __objRest(_b, ["children", "as"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
-    import_react38.MenuItem,
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    import_react39.MenuItem,
     __spreadProps(__spreadValues({}, rest), {
       className: (args) => {
         const className = rest.className;
@@ -5267,12 +5443,12 @@ var MenuItem = (_a) => {
     })
   );
 };
-var MenuHeading = import_react38.MenuHeading;
-var MenuSection = import_react38.MenuSection;
-var MenuSeparator = import_react38.MenuSeparator;
+var MenuHeading = import_react39.MenuHeading;
+var MenuSection = import_react39.MenuSection;
+var MenuSeparator = import_react39.MenuSeparator;
 
 // src/components/Dropdown/Dropdown.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 function Dropdown(_a) {
   var _b = _a, {
     items,
@@ -5299,8 +5475,8 @@ function Dropdown(_a) {
     }
     return acc;
   }, {});
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Menu, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(Menu, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
       MenuButton,
       __spreadProps(__spreadValues({}, dataAttributes), {
         onClick: (e) => {
@@ -5323,24 +5499,24 @@ function Dropdown(_a) {
         className: classNames(`GeckoUIDropdown__button`, className),
         children: [
           children,
-          !hideArrowIcon && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: classNames("GeckoUIDropdown__icon", iconClassName) })
+          !hideArrowIcon && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: classNames("GeckoUIDropdown__icon", iconClassName) })
         ]
       })
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       MenuItems,
       {
         className: classNames("GeckoUIDropdown__menu", menuClassName),
         anchor: anchor || "bottom start",
         children: () => {
-          return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_jsx_runtime59.Fragment, { children: items.map((item, index) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_jsx_runtime61.Fragment, { children: items.map((item, index) => {
             const label = createLabel_default(item);
-            return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
               MenuItem,
               __spreadProps(__spreadValues({}, dataAttributes), {
                 className: classNames("GeckoUIDropdown__menu-item", item.className),
                 onClick: item.onClick,
-                children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DynamicComponentRenderer_default, { component: label })
+                children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(DynamicComponentRenderer_default, { component: label })
               }),
               index
             );
@@ -5354,7 +5530,7 @@ Dropdown.displayName = "Dropdown";
 var Dropdown_default = Dropdown;
 
 // src/components/MermaidDiagram/MermaidDiagram.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var MermaidDiagram = (_a) => {
   var _b = _a, {
     children,
@@ -5370,20 +5546,20 @@ var MermaidDiagram = (_a) => {
   }
   const { loading, error: mermaidError, Diagram } = useMermaidDiagram_default(children);
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(DynamicComponentRenderer_default, { component: placeholder });
+    return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(DynamicComponentRenderer_default, { component: placeholder });
   }
   if (mermaidError) {
-    if (!renderError) return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(InputError_default, { children: mermaidError });
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(DynamicComponentRenderer_default, { component: renderError, message: mermaidError });
+    if (!renderError) return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(InputError_default, { children: mermaidError });
+    return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(DynamicComponentRenderer_default, { component: renderError, message: mermaidError });
   }
   if (!Diagram) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Diagram, __spreadValues({}, rest));
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Diagram, __spreadValues({}, rest));
 };
 var MermaidDiagram_default = MermaidDiagram;
 
 // src/components/Markdown/Markdown.tsx
-var import_react39 = require("react");
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_react40 = require("react");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 function Markdown(_a) {
   var _b = _a, {
     children,
@@ -5404,13 +5580,13 @@ function Markdown(_a) {
   ]);
   const { loading, error, content = "" } = useMarkdown_default(children, { async, sanitize });
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(DynamicComponentRenderer_default, { component: renderPlaceholder });
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(DynamicComponentRenderer_default, { component: renderPlaceholder });
   }
   if (error) {
-    if (!renderError) return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(InputError_default, { children: error });
-    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(DynamicComponentRenderer_default, { component: renderError, message: error });
+    if (!renderError) return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(InputError_default, { children: error });
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(DynamicComponentRenderer_default, { component: renderError, message: error });
   }
-  return (0, import_react39.createElement)(as, __spreadProps(__spreadValues({}, props), {
+  return (0, import_react40.createElement)(as, __spreadProps(__spreadValues({}, props), {
     dangerouslySetInnerHTML: { __html: content },
     className: classNames("GeckoUIMarkdown", className)
   }));