@geckoui/geckoui 1.2.0-beta.2 → 1.3.0

package/dist/index.js

@@ -94,20 +94,15 @@ __export(index_exports, {
   DateRangeInput: () => DateRangeInput_default,
   Dialog: () => Dialog_default,
   Drawer: () => Drawer_default,
-  Dropdown: () => Dropdown_default,
   FilePicker: () => FilePicker_default,
   GeckoUIPortal: () => GeckoUIPortal_default,
   Input: () => Input_default,
   InputError: () => InputError_default,
   Label: () => Label_default,
   LoadingButton: () => LoadingButton_default,
-  Menu: () => Menu,
-  MenuButton: () => MenuButton,
-  MenuHeading: () => MenuHeading,
-  MenuItem: () => MenuItem,
-  MenuItems: () => MenuItems,
-  MenuSection: () => MenuSection,
-  MenuSeparator: () => MenuSeparator,
+  Menu: () => Menu_default,
+  MenuItem: () => MenuItem_default,
+  MenuTrigger: () => MenuTrigger_default,
   OTPInput: () => OTPInput_default,
   Pagination: () => Pagination_default,
   RHFCheckbox: () => RHFCheckbox_default,
@@ -148,6 +143,7 @@ __export(index_exports, {
   useClickOutside: () => useClickOutside_default,
   useEscListener: () => useEscListener_default,
   useFilePicker: () => useFilePicker_default,
+  useMenu: () => useMenu,
   usePreventDefault: () => usePreventDefault_default,
   useSelect: () => useSelect
 });
@@ -855,27 +851,20 @@ var CounterInput = (0, import_react7.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       "div",
       {
-        className: classNames(
-          "GeckoUICounterInput",
-          `GeckoUICounterInput--size-${size}`,
-          disabled && "GeckoUICounterInput--disabled",
-          readOnly && "GeckoUICounterInput--readonly",
-          className
-        ),
+        className: classNames("GeckoUICounterInput", className),
+        "data-size": size,
+        "data-state": disabled ? "disabled" : readOnly ? "readonly" : void 0,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "button",
             {
               type: "button",
-              className: classNames(
-                "GeckoUICounterInput__button",
-                "GeckoUICounterInput__button--decrement",
-                buttonClassName
-              ),
+              className: classNames("GeckoUICounterInput__button", buttonClassName),
+              "data-action": "decrement",
               onClick: handleDecrement,
               disabled: disabled || readOnly || isAtMin,
               "aria-label": "Decrement",
-              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "GeckoUICounterInput__icon GeckoUICounterInput__icon--minus" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "GeckoUICounterInput__icon", "data-icon": "minus" })
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -898,15 +887,12 @@ var CounterInput = (0, import_react7.forwardRef)(
             "button",
             {
               type: "button",
-              className: classNames(
-                "GeckoUICounterInput__button",
-                "GeckoUICounterInput__button--increment",
-                buttonClassName
-              ),
+              className: classNames("GeckoUICounterInput__button", buttonClassName),
+              "data-action": "increment",
               onClick: handleIncrement,
               disabled: disabled || readOnly || isAtMax,
               "aria-label": "Increment",
-              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "GeckoUICounterInput__icon GeckoUICounterInput__icon--plus" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "GeckoUICounterInput__icon", "data-icon": "plus" })
             }
           )
         ]
@@ -1225,70 +1211,71 @@ var BaseDateInput = ({
   const inputs = segmentOrder.map((segment) => allInputs[segment]);
   const isEmpty = !month && !day && !year && !hasFocus;
   const isError = !isEmpty && !isValidDate(year, month, day) || hasError;
-  const containerClasses = classNames(
-    "GeckoUIDateInput",
-    disabled && "GeckoUIDateInput--disabled",
-    readOnly && "GeckoUIDateInput--readOnly",
-    !disabled && !readOnly && "GeckoUIDateInput--enabled",
-    isError && "GeckoUIDateInput--error",
-    isEmpty && "GeckoUIDateInput--empty",
-    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_react8.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-        "label",
-        {
-          className: classNames(
-            "GeckoUIDateInput__segment",
-            !value2 && "GeckoUIDateInput__segment--empty"
+  const state = disabled ? "disabled" : readOnly ? "readonly" : "enabled";
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      className: classNames("GeckoUIDateInput", className),
+      "data-state": state,
+      "data-error": isError || void 0,
+      "data-empty": isEmpty || void 0,
+      "data-focus": hasFocus || void 0,
+      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_react8.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+            "label",
+            {
+              className: "GeckoUIDateInput__segment",
+              "data-empty": !value2 || void 0,
+              tabIndex: -1,
+              onClick: (e) => {
+                e.stopPropagation();
+                handleDisplayClick(segment);
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  "input",
+                  {
+                    ref,
+                    type: "text",
+                    value: value2,
+                    readOnly,
+                    disabled,
+                    className: "GeckoUIDateInput__hidden-input",
+                    onChange: onChange2,
+                    onKeyDown: (e) => handleKeyDown(e, segment),
+                    maxLength,
+                    tabIndex: -1
+                  }
+                ),
+                display
+              ]
+            }
           ),
-          tabIndex: -1,
-          onClick: (e) => {
-            e.stopPropagation();
-            handleDisplayClick(segment);
-          },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              "input",
-              {
-                ref,
-                type: "text",
-                value: value2,
-                readOnly,
-                disabled,
-                className: "GeckoUIDateInput__hidden-input",
-                onChange: onChange2,
-                onKeyDown: (e) => handleKeyDown(e, segment),
-                maxLength,
-                tabIndex: -1
-              }
-            ),
-            display
-          ]
-        }
-      ),
-      index < inputs.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime8.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)(
-        "button",
-        {
-          type: "button",
-          disabled: disabled || readOnly,
-          className: "GeckoUIDateInput__clear-button",
-          onClick: handleClear,
-          children: /* @__PURE__ */ (0, import_jsx_runtime8.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 }) }),
-      renderCalendarIcon,
-      !renderCalendarIcon && !hideCalendarIcon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "GeckoUIDateInput__calendar-icon" })
-    ] })
-  ] });
+          index < inputs.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime8.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)(
+            "button",
+            {
+              type: "button",
+              disabled: disabled || readOnly,
+              className: "GeckoUIDateInput__clear-button",
+              onClick: handleClear,
+              children: /* @__PURE__ */ (0, import_jsx_runtime8.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 }) }),
+          renderCalendarIcon,
+          !renderCalendarIcon && !hideCalendarIcon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "GeckoUIDateInput__calendar-icon" })
+        ] })
+      ]
+    }
+  );
 };
 BaseDateInput.displayName = "BaseDateInput";
 var BaseDateInput_default = BaseDateInput;
@@ -1376,7 +1363,7 @@ function CalendarHeader({
   header,
   onClickHeader
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: classNames("GeckoUICalendar__header"), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "GeckoUICalendar__header", children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "button",
       {
@@ -1389,10 +1376,8 @@ function CalendarHeader({
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "button",
       {
-        className: classNames(
-          "GeckoUICalendar__header__title",
-          onClickHeader && "GeckoUICalendar__header__title--clickable"
-        ),
+        className: "GeckoUICalendar__header__title",
+        "data-clickable": onClickHeader ? "" : void 0,
         onClick: onClickHeader,
         type: "button",
         children: header
@@ -1495,19 +1480,17 @@ function CalendarDayPicker(props) {
       return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "button",
         {
-          className: classNames(
-            "GeckoUICalendar__day-picker__button",
-            isToday && "GeckoUICalendar__day-picker__button--today",
-            isSelected && "GeckoUICalendar__day-picker__button--selected",
-            isRangeStart && "GeckoUICalendar__day-picker__button--range-start",
-            isRangeEnd && "GeckoUICalendar__day-picker__button--range-end",
-            isInRange && "GeckoUICalendar__day-picker__button--in-range",
-            isHoverPreview && "GeckoUICalendar__day-picker__button--hover-preview",
-            isHoverPreviewStart && "GeckoUICalendar__day-picker__button--hover-preview-start",
-            isHoverPreviewEnd && "GeckoUICalendar__day-picker__button--hover-preview-end",
-            isDisable && "GeckoUICalendar__day-picker__button--disabled",
-            `GeckoUICalendar__day-picker__button--active-month-${isActiveMonth}`
-          ),
+          className: "GeckoUICalendar__day-picker__button",
+          "data-today": isToday || void 0,
+          "data-selected": isSelected || void 0,
+          "data-range-start": isRangeStart || void 0,
+          "data-range-end": isRangeEnd || void 0,
+          "data-in-range": isInRange || void 0,
+          "data-hover-preview": isHoverPreview || void 0,
+          "data-hover-preview-start": isHoverPreviewStart || void 0,
+          "data-hover-preview-end": isHoverPreviewEnd || void 0,
+          "data-disabled": isDisable || void 0,
+          "data-active-month": isActiveMonth || void 0,
           disabled: isDisable,
           onClick: () => handleDateClick(formattedDate),
           onMouseEnter: () => handleDateHover(formattedDate),
@@ -1547,10 +1530,8 @@ function CalendarMonthPicker(_a) {
       return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "button",
         {
-          className: classNames(
-            "GeckoUICalendar__month-picker__button",
-            selected && "GeckoUICalendar__month-picker__button--selected"
-          ),
+          className: "GeckoUICalendar__month-picker__button",
+          "data-selected": selected || void 0,
           onClick: () => onSelectMonth == null ? void 0 : onSelectMonth(index),
           type: "button",
           children: monthName
@@ -1596,11 +1577,9 @@ function CalendarYearPicker(_a) {
       return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "button",
         {
-          className: classNames(
-            "GeckoUICalendar__year-picker__button",
-            selected && "GeckoUICalendar__year-picker__button--selected",
-            isPrevNext && "GeckoUICalendar__year-picker__button--prev-next"
-          ),
+          className: "GeckoUICalendar__year-picker__button",
+          "data-selected": selected || void 0,
+          "data-prev-next": isPrevNext || void 0,
           onClick: () => onSelectYear == null ? void 0 : onSelectYear(year),
           type: "button",
           children: year
@@ -1742,7 +1721,7 @@ Provided value: ${selectedRange.to}`
         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)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "GeckoUICalendar__dual__item", "data-position": "first", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             CalendarDayPicker_default,
             {
               mode: "range",
@@ -1759,7 +1738,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_runtime13.jsx)("div", { className: "GeckoUICalendar__dual__item", "data-position": "second", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             CalendarDayPicker_default,
             {
               mode: "range",
@@ -1812,13 +1791,10 @@ Provided value: ${selectedRange.to}`
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "div",
     {
-      className: classNames(
-        `GeckoUICalendar`,
-        `GeckoUICalendar--mode-${view}`,
-        `GeckoUICalendar--selection-${mode}`,
-        mode === "range" && view === "day" /* Day */ && `GeckoUICalendar--calendars-${numberOfMonths}`,
-        className
-      ),
+      className: classNames(`GeckoUICalendar`, className),
+      "data-mode": view,
+      "data-selection": mode,
+      "data-calendars": mode === "range" && view === "day" /* Day */ && numberOfMonths || void 0,
       style,
       children: renderContent()
     }
@@ -1924,6 +1900,7 @@ var DateInput = (_a) => {
     "div",
     {
       className: classNames("GeckoUIDateInputWrapper", wrapperClassName),
+      "data-calendar-open": openCalendar || void 0,
       ref: (r) => refs.setReference(r),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
@@ -1936,7 +1913,7 @@ var DateInput = (_a) => {
             prefix,
             suffix,
             hasError,
-            className: classNames(className, openCalendar && "GeckoUIDateInput--calendar-open"),
+            className,
             format,
             separator,
             placeholder,
@@ -2336,25 +2313,13 @@ var BaseDateRangeInput = (_a) => {
   const startValid = isValidDate(startYear, startMonth, startDay);
   const endValid = isValidDate(endYear, endMonth, endDay);
   const isError = !isEmpty && (!startEmpty && !startValid || !endEmpty && !endValid) || hasError;
-  const containerClasses = classNames(
-    "GeckoUIDateInput",
-    "GeckoUIDateRangeInput",
-    disabled && "GeckoUIDateInput--disabled",
-    readOnly && "GeckoUIDateInput--readOnly",
-    !disabled && !readOnly && "GeckoUIDateInput--enabled",
-    isError && "GeckoUIDateInput--error",
-    isEmpty && "GeckoUIDateInput--empty",
-    hasFocus && "GeckoUIDateInput--focus",
-    className
-  );
+  const state = disabled ? "disabled" : readOnly ? "readonly" : "enabled";
   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_react13.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "label",
       {
-        className: classNames(
-          "GeckoUIDateInput__segment",
-          !value2 && "GeckoUIDateInput__segment--empty"
-        ),
+        className: "GeckoUIDateInput__segment",
+        "data-empty": !value2 || void 0,
         tabIndex: -1,
         onClick: (e) => {
           e.stopPropagation();
@@ -2390,7 +2355,11 @@ var BaseDateRangeInput = (_a) => {
     "div",
     __spreadProps(__spreadValues({
       ref: containerRef,
-      className: containerClasses
+      className: classNames("GeckoUIDateInput", "GeckoUIDateRangeInput", className),
+      "data-state": state,
+      "data-error": isError || void 0,
+      "data-empty": isEmpty || void 0,
+      "data-focus": hasFocus || void 0
     }, rest), {
       onClick: () => handleDisplayClick(),
       children: [
@@ -2531,6 +2500,7 @@ var DateRangeInput = (_a) => {
     "div",
     {
       className: classNames("GeckoUIDateRangeInputWrapper", wrapperClassName),
+      "data-calendar-open": openCalendar || void 0,
       ref: (r) => refs.setReference(r),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -2543,7 +2513,7 @@ var DateRangeInput = (_a) => {
             prefix,
             suffix,
             hasError,
-            className: classNames(className, openCalendar && "GeckoUIDateInput--calendar-open"),
+            className,
             format,
             separator,
             rangeSeparator,
@@ -2586,12 +2556,9 @@ var Input = (0, import_react16.forwardRef)(
       "label",
       {
         "aria-disabled": disabled,
-        className: classNames(
-          "GeckoUIInput group",
-          disabled ? "GeckoUIInput--disabled" : "GeckoUIInput--enabled",
-          readOnly && "GeckoUIInput--readonly",
-          className
-        ),
+        "data-state": disabled ? "disabled" : "enabled",
+        "data-readonly": readOnly || void 0,
+        className: classNames("GeckoUIInput group", className),
         htmlFor: id != null ? id : _id,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DynamicComponentRenderer_default, { component: prefix, inputRef: ref }),
@@ -2754,13 +2721,10 @@ var Button = (0, import_react19.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "button",
       __spreadProps(__spreadValues({
-        className: classNames(
-          "GeckoUIButton",
-          `GeckoUIButton--${variant}`,
-          `GeckoUIButton--${variant}-${color}`,
-          `GeckoUIButton--size-${size}`,
-          className
-        ),
+        "data-variant": variant,
+        "data-color": color,
+        "data-size": size,
+        className: classNames("GeckoUIButton", className),
         ref,
         type: "button"
       }, rest), {
@@ -2833,14 +2797,8 @@ var LoadingButton = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     Button_default,
     __spreadProps(__spreadValues({
-      className: classNames(
-        "GeckoUILoadingButton",
-        `GeckoUILoadingButton--${variant}`,
-        `GeckoUILoadingButton--${variant}-${color}`,
-        `GeckoUILoadingButton--size-${size}`,
-        loading && `GeckoUILoadingButton--loading GeckoUILoadingButton--${variant}-loading`,
-        className
-      ),
+      "data-loading": loading || void 0,
+      className: classNames("GeckoUILoadingButton", className),
       disabled: loading || disabled,
       size,
       color,
@@ -2997,11 +2955,8 @@ var RHFCounterInput = (_a) => {
         return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           CounterInput_default,
           __spreadProps(__spreadValues({
-            className: classNames(
-              "GeckoUIRHFCounterInput",
-              hasError && "GeckoUIRHFCounterInput--error",
-              className
-            )
+            className: classNames("GeckoUIRHFCounterInput", className),
+            "data-error": hasError || void 0
           }, rest), {
             value: (_a2 = field.value) != null ? _a2 : 0,
             onChange: (value) => {
@@ -3058,11 +3013,8 @@ var RHFInput = (_a) => {
         return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           Input_default,
           __spreadProps(__spreadValues(__spreadValues({
-            className: classNames(
-              "GeckoUIRHFInput",
-              hasError && "GeckoUIRHFInput--error",
-              className
-            ),
+            className: classNames("GeckoUIRHFInput", className),
+            "data-error": hasError || void 0,
             prefix: prefix ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DynamicComponentRenderer_default, __spreadValues({ component: prefix }, renderProps)) : null,
             suffix: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DynamicComponentRenderer_default, __spreadValues({ component: suffix }, renderProps))
           }, field), rest), {
@@ -3288,11 +3240,8 @@ var RHFTextarea = (_a) => {
         return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           Textarea_default,
           __spreadProps(__spreadValues(__spreadValues({
-            className: classNames(
-              "GeckoUIRHFTextarea",
-              !disabled && fieldState.error && "GeckoUIRHFTextarea--error",
-              className
-            )
+            className: classNames("GeckoUIRHFTextarea", className),
+            "data-error": !disabled && fieldState.error ? "" : void 0
           }, field), rest), {
             disabled,
             onBlur: (e) => {
@@ -3313,36 +3262,31 @@ RHFTextarea.displayName = "RHFTextarea";
 var RHFTextarea_default = RHFTextarea;
 
 // src/components/Switch/Switch.tsx
-var import_react23 = require("@headlessui/react");
-var import_react24 = require("react");
+var import_react23 = require("react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
-var Switch = (0, import_react24.forwardRef)(
+var Switch = (0, import_react23.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { className, thumbClassName, size = "md" } = _b, rest = __objRest(_b, ["className", "thumbClassName", "size"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-      import_react23.Switch,
-      __spreadProps(__spreadValues({
-        onKeyUp: (e) => {
-          if (e.key === "Enter") {
-            e.preventDefault();
-            return true;
-          }
-        },
-        className: classNames("group GeckoUISwitch", `GeckoUISwitch--size-${size}`, className)
-      }, rest), {
-        ref,
-        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-          "span",
-          {
-            className: classNames(
-              "GeckoUISwitch__thumb",
-              `GeckoUISwitch__thumb--size-${size}`,
-              thumbClassName
-            )
+    var _b = _a, { size = "md", className, thumbClassName, onChange, onKeyDown } = _b, rest = __objRest(_b, ["size", "className", "thumbClassName", "onChange", "onKeyDown"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("label", { className: classNames("GeckoUISwitch", className), "data-size": size, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        "input",
+        __spreadValues({
+          ref,
+          type: "checkbox",
+          role: "switch",
+          className: "GeckoUISwitch__input",
+          onChange: (e) => onChange == null ? void 0 : onChange(e.target.checked),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              e.currentTarget.click();
+            }
+            onKeyDown == null ? void 0 : onKeyDown(e);
           }
-        )
-      })
-    );
+        }, rest)
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: classNames("GeckoUISwitch__thumb", thumbClassName), "data-size": size })
+    ] });
   }
 );
 Switch.displayName = "Switch";
@@ -3399,7 +3343,7 @@ var RHFSwitch = (_a) => {
           __spreadProps(__spreadValues(__spreadValues({}, field), rest), {
             disabled,
             checked: isChecked,
-            className: classNames(`GeckoUIRHFSwitch GeckoUIRHFSwitch--size-${size}`, className),
+            className: classNames("GeckoUIRHFSwitch", className),
             onBlur: (e) => {
               field.onBlur();
               onBlur == null ? void 0 : onBlur(e);
@@ -3411,10 +3355,7 @@ var RHFSwitch = (_a) => {
             },
             onChange: handleUpdate,
             size,
-            thumbClassName: classNames(
-              `GeckoUIRHFSwitch__thumb GeckoUIRHFSwitch__thumb--size-${size}`,
-              thumbClassName
-            ),
+            thumbClassName: classNames("GeckoUIRHFSwitch__thumb", thumbClassName),
             value: void 0
           })
         );
@@ -3426,12 +3367,12 @@ RHFSwitch.displayName = "RHFSwitch";
 var RHFSwitch_default = RHFSwitch;
 
 // src/components/RHF/RHFRadio/RHFRadio.tsx
-var import_react26 = require("react");
+var import_react25 = require("react");
 
 // src/components/Radio/Radio.tsx
-var import_react25 = require("react");
+var import_react24 = require("react");
 var import_jsx_runtime36 = require("react/jsx-runtime");
-var Radio = (0, import_react25.forwardRef)((_a, ref) => {
+var Radio = (0, import_react24.forwardRef)((_a, ref) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("input", __spreadProps(__spreadValues({ className: classNames("GeckoUIRadio", className), ref }, rest), { type: "radio" }));
 });
@@ -3464,7 +3405,7 @@ var RHFRadio = (_a) => {
     "onChange",
     "onBlur"
   ]);
-  const _id = (0, import_react26.useId)();
+  const _id = (0, import_react25.useId)();
   const uniqueId = id || _id;
   if (value === void 0 || value === null) {
     throw new Error("RHFRadio: value cannot be undefined or null");
@@ -3538,7 +3479,17 @@ var RHFDateInput_default = RHFDateInput;
 // src/components/RHF/RHFDateRangeInput/RHFDateRangeInput.tsx
 var import_jsx_runtime39 = require("react/jsx-runtime");
 var RHFDateRangeInput = (_a) => {
-  var _b = _a, { name, control, rules, onChange } = _b, rest = __objRest(_b, ["name", "control", "rules", "onChange"]);
+  var _b = _a, {
+    name,
+    control,
+    rules,
+    onChange
+  } = _b, rest = __objRest(_b, [
+    "name",
+    "control",
+    "rules",
+    "onChange"
+  ]);
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     RHFController_default,
     {
@@ -3603,15 +3554,12 @@ var RHFFileInput = (_a) => {
       rules,
       render: (renderProps) => {
         const { field } = renderProps;
-        return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("label", { className: classNames("GeckoUIRHFFileInput--wrapper", className), id, children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("label", { className: classNames("GeckoUIRHFFileInput", className), id, children: [
           /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             "input",
             __spreadProps(__spreadValues(__spreadValues({}, field), rest), {
-              className: classNames(
-                "GeckoUIRHFFileInput",
-                Boolean(render) && "GeckoUIRHFFileInput--custom",
-                inputClassName
-              ),
+              className: classNames("GeckoUIRHFFileInput__input", inputClassName),
+              "data-custom": Boolean(render) || void 0,
               disabled,
               id,
               multiple,
@@ -3647,9 +3595,9 @@ RHFFileInput.displayName = "RHFFileInput";
 var RHFFileInput_default = RHFFileInput;
 
 // src/components/OTPInput/OTPInput.tsx
-var import_react27 = require("react");
+var import_react26 = require("react");
 var import_jsx_runtime41 = require("react/jsx-runtime");
-var OTPInput = (0, import_react27.forwardRef)(
+var OTPInput = (0, import_react26.forwardRef)(
   ({
     value = "",
     onChange,
@@ -3662,7 +3610,7 @@ var OTPInput = (0, import_react27.forwardRef)(
     onOTPComplete,
     disabled
   }, ref) => {
-    const divRef = (0, import_react27.useRef)(null);
+    const divRef = (0, import_react26.useRef)(null);
     const focus = (index) => {
       var _a, _b;
       const children = (_a = divRef.current) == null ? void 0 : _a.children;
@@ -3694,11 +3642,8 @@ var OTPInput = (0, import_react27.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       "div",
       {
-        className: classNames(
-          "GeckoUIOTPInput",
-          disabled ? "GeckoUIOTPInput--disabled" : "GeckoUIOTPInput--enabled",
-          className
-        ),
+        className: classNames("GeckoUIOTPInput", className),
+        "data-state": disabled ? "disabled" : "enabled",
         ref: divRef,
         style: { gridTemplateColumns: `repeat(${length}, minmax(0, 1fr))` },
         children: Array.from({ length }).map((_, i) => i).map((key, index) => {
@@ -3774,7 +3719,19 @@ var OTPInput_default = OTPInput;
 // src/components/RHF/RHFOTPInput/RHFOTPInput.tsx
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var RHFOTPInput = (_a) => {
-  var _b = _a, { control, name, rules, disabled, className } = _b, rest = __objRest(_b, ["control", "name", "rules", "disabled", "className"]);
+  var _b = _a, {
+    control,
+    name,
+    rules,
+    disabled,
+    className
+  } = _b, rest = __objRest(_b, [
+    "control",
+    "name",
+    "rules",
+    "disabled",
+    "className"
+  ]);
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     RHFController_default,
     {
@@ -3786,11 +3743,8 @@ var RHFOTPInput = (_a) => {
         return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           OTPInput_default,
           __spreadValues(__spreadValues({
-            className: classNames(
-              "GeckoUIRHFOTPInput",
-              !disabled && fieldState.error && "GeckoUIRHFOTPInput--error",
-              className
-            ),
+            className: classNames("GeckoUIRHFOTPInput", className),
+            "data-error": !disabled && fieldState.error ? "" : void 0,
             disabled
           }, rest), field)
         );
@@ -3862,12 +3816,10 @@ function RHFFilePickerRenderer({
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
     "div",
     {
-      className: classNames(
-        "GeckoUIRHFFilePicker",
-        loading && "GeckoUIRHFFilePicker--loading",
-        dragging && "GeckoUIRHFFilePicker--dragging",
-        error && "GeckoUIRHFFilePicker--error"
-      ),
+      className: "GeckoUIRHFFilePicker",
+      "data-loading": loading || void 0,
+      "data-dragging": dragging || void 0,
+      "data-error": error ? "" : void 0,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
           "div",
@@ -3922,8 +3874,8 @@ RHFFilePicker.displayName = "RHFFilePicker";
 var RHFFilePicker_default = RHFFilePicker;
 
 // src/components/Select/Select/Select.tsx
-var import_react32 = require("@floating-ui/react");
-var import_react33 = require("react");
+var import_react31 = require("@floating-ui/react");
+var import_react32 = require("react");
 
 // src/utils/isTextIncludes.ts
 function isTextIncludes(baseString = "", searchString) {
@@ -3992,7 +3944,7 @@ function findSelectOptions(el) {
 }
 
 // src/components/Select/SelectButton/SelectButton.tsx
-var import_react30 = require("react");
+var import_react29 = require("react");
 
 // src/utils/createLabel.ts
 function createLabel(item) {
@@ -4025,13 +3977,13 @@ var createLabel_default = createLabel;
 
 // src/components/Select/hooks/useSelectTrigger.tsx
 var import_lodash2 = __toESM(require("lodash.isequal"));
-var import_react29 = require("react");
+var import_react28 = require("react");
 
 // src/components/Select/useSelect.tsx
-var import_react28 = require("react");
-var SelectContext = (0, import_react28.createContext)(void 0);
+var import_react27 = require("react");
+var SelectContext = (0, import_react27.createContext)(void 0);
 var useSelect = () => {
-  const context = (0, import_react28.useContext)(SelectContext);
+  const context = (0, import_react27.useContext)(SelectContext);
   if (context === void 0) {
     throw new Error("SelectContext must be used within a SelectProvider");
   }
@@ -4110,7 +4062,7 @@ var useSelectTrigger = () => {
       handleChange(value.at(-1));
     }
   };
-  const hasValue = (0, import_react29.useMemo)(() => {
+  const hasValue = (0, import_react28.useMemo)(() => {
     if (multiple) {
       return Array.isArray(value) && !!(value == null ? void 0 : value.length);
     }
@@ -4170,9 +4122,9 @@ function SelectButton({ prefix, suffix, className }) {
     onChange,
     clearable
   } = useSelect();
-  const id = (0, import_react30.useId)();
+  const id = (0, import_react29.useId)();
   const { hasValue, handleInputChange, handleKeyboardInteraction } = useSelectTrigger();
-  const trigger = (0, import_react30.useMemo)(() => import_react30.Children.toArray(children).find(isSelectTrigger), [children]);
+  const trigger = (0, import_react29.useMemo)(() => import_react29.Children.toArray(children).find(isSelectTrigger), [children]);
   const handleClear = (e) => {
     e.stopPropagation();
     if (disabled) return;
@@ -4188,14 +4140,10 @@ function SelectButton({ prefix, suffix, className }) {
   const filterable = _filterable === true || _filterable === "inline";
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
     "div",
-    {
-      className: classNames(
-        "GeckoUISelectButton",
-        disabled ? "GeckoUISelectButton--disabled" : "GeckoUISelectButton--enabled",
-        multiple && hasValue && "GeckoUISelectButton--multi-select-default",
-        !filterable && "GeckoUISelectButton--readonly",
-        className
-      ),
+    __spreadProps(__spreadValues({
+      className: classNames("GeckoUISelectButton", className),
+      "data-state": disabled ? "disabled" : "enabled"
+    }, !filterable && { "data-readonly": "" }), {
       onClick: () => {
         var _a;
         if (open && !keyword) {
@@ -4211,40 +4159,30 @@ function SelectButton({ prefix, suffix, className }) {
         /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "GeckoUISelectButton__content", children: [
           hasValue ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(SelectButtonContent, {}) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
             "span",
-            {
-              className: classNames(
-                "GeckoUISelectButton__value GeckoUISelectButton__value--placeholder",
-                placeholderClassName,
-                keyword && filterable && "GeckoUISelectButton__value--hidden"
-              ),
+            __spreadProps(__spreadValues({
+              className: classNames("GeckoUISelectButton__value", placeholderClassName),
+              "data-placeholder": ""
+            }, keyword && filterable && { "data-hidden": "" }), {
               children: placeholder != null ? placeholder : "Select Item"
-            }
+            })
           ),
           /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
             "div",
-            {
-              className: classNames(
-                "GeckoUISelectButton__search",
-                !open && hasValue && "GeckoUISelectButton__search--focusonly",
-                !filterable && "GeckoUISelectButton__search--focusonly",
-                multiple && Array.isArray(value) && !!(value == null ? void 0 : value.length) && "GeckoUISelectButton__search--multi-selected"
-              ),
+            __spreadProps(__spreadValues(__spreadValues({
+              className: "GeckoUISelectButton__search"
+            }, (!open && hasValue || !filterable) && { "data-focusonly": "" }), multiple && Array.isArray(value) && !!(value == null ? void 0 : value.length) && { "data-multi-selected": "" }), {
               "data-keyword": filterable ? keyword : "",
               children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                 "input",
-                {
+                __spreadProps(__spreadValues(__spreadValues({
                   id,
                   ref: (r) => {
                     setInputRef(r);
                   },
                   value: filterable ? keyword : "",
                   disabled,
-                  className: classNames(
-                    "GeckoUISelectButton__search__input",
-                    open && !hasValue && "GeckoUISelectButton__search__input--initial",
-                    !multiple && hasValue && "GeckoUISelectButton__search__input--initial",
-                    !filterable && "GeckoUISelectButton__search__input--readonly"
-                  ),
+                  className: "GeckoUISelectButton__search__input"
+                }, (open && !hasValue || !multiple && hasValue) && { "data-initial": "" }), !filterable && { "data-readonly": "" }), {
                   onKeyDown: handleKeyboardInteraction,
                   onFocusCapture: openMenu,
                   onChange: filterable ? handleInputChange : (
@@ -4255,13 +4193,22 @@ function SelectButton({ prefix, suffix, className }) {
                   autoCapitalize: "off",
                   autoCorrect: "off",
                   spellCheck: false
-                }
+                })
               )
-            }
+            })
           )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "GeckoUISelectButton__icons", children: [
-          hasValue && !disabled && clearable && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("button", { className: "GeckoUISelectButton__clear-button", type: "button", onClick: handleClear, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "GeckoUI-icon__clear" }) }),
+          hasValue && !disabled && clearable && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+            "button",
+            {
+              className: "GeckoUISelectButton__clear-button",
+              type: "button",
+              onClick: handleClear,
+              "data-disabled": disabled || void 0,
+              children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "GeckoUI-icon__clear" })
+            }
+          ),
           /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
             DynamicComponentRenderer_default,
             {
@@ -4270,7 +4217,7 @@ function SelectButton({ prefix, suffix, className }) {
           )
         ] })
       ]
-    }
+    })
   );
 }
 function SelectButtonContent() {
@@ -4312,10 +4259,8 @@ function SelectButtonContent() {
       return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
         "div",
         {
-          className: classNames(
-            "GeckoUISelectButton__multiselected-chip",
-            disabled && "GeckoUISelectButton__multiselected-chip--disabled"
-          ),
+          className: "GeckoUISelectButton__multiselected-chip",
+          "data-disabled": disabled || void 0,
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { children: option.label }),
             !disabled && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
@@ -4327,18 +4272,9 @@ function SelectButtonContent() {
                   remove();
                 },
                 disabled,
-                className: classNames(
-                  "GeckoUISelectButton__multiselected-chip__clear-button",
-                  disabled && "GeckoUISelectButton__multiselected-chip__clear-button--disabled"
-                ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                  "span",
-                  {
-                    className: classNames(
-                      "GeckoUISelectButton__multiselected-chip__clear-button__icon"
-                    )
-                  }
-                )
+                className: "GeckoUISelectButton__multiselected-chip__clear-button",
+                "data-disabled": disabled || void 0,
+                children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "GeckoUISelectButton__multiselected-chip__clear-button__icon" })
               }
             )
           ]
@@ -4352,15 +4288,15 @@ 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_runtime44.jsx)("span", { className: "GeckoUISelectButton__value GeckoUISelectButton__value--placeholder", children: selectedOptionLabel });
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "GeckoUISelectButton__value", "data-placeholder": "", children: selectedOptionLabel });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "GeckoUISelectButton__value GeckoUISelectButton__value--selected", children: selectedOptionLabel });
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "GeckoUISelectButton__value", "data-selected": "", children: selectedOptionLabel });
 }
 SelectButton.displayName = "SelectButton";
 var SelectButton_default = SelectButton;
 
 // src/components/Select/SelectMenu/SelectMenu.tsx
-var import_react31 = require("react");
+var import_react30 = require("react");
 
 // src/components/Select/SelectDropdownSearch/SelectDropdownSearch.tsx
 var import_lodash3 = __toESM(require("lodash.isequal"));
@@ -4470,8 +4406,8 @@ var SelectMenu = (_a) => {
     menuScrollContainerRef,
     floating: { refs, floatingStyles }
   } = useSelect();
-  const menuItems = (0, import_react31.useMemo)(
-    () => import_react31.Children.toArray(children).filter((el) => !isSelectTrigger(el)),
+  const menuItems = (0, import_react30.useMemo)(
+    () => import_react30.Children.toArray(children).filter((el) => !isSelectTrigger(el)),
     [children]
   );
   if (!open || disabled) {
@@ -4483,11 +4419,8 @@ var SelectMenu = (_a) => {
     __spreadProps(__spreadValues({
       ref: (r) => refs.setFloating(r),
       style: floatingStyles,
-      className: classNames(
-        "GeckoUISelectMenu",
-        hasDropdownSearch && "GeckoUISelectMenu--with-dropdown-search",
-        className
-      )
+      className: classNames("GeckoUISelectMenu", className),
+      "data-with-search": hasDropdownSearch || void 0
     }, rest), {
       children: [
         hasDropdownSearch && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SelectDropdownSearch_default, { className: "GeckoUISelectMenu__search-container", autoFocus: true }),
@@ -4502,7 +4435,7 @@ var SelectMenu = (_a) => {
 function Empty({ children }) {
   const { hideDefaultEmptyUI = false } = useSelect();
   if (hideDefaultEmptyUI) return null;
-  const customEmpty = import_react31.Children.toArray(children).find(isSelectEmpty);
+  const customEmpty = import_react30.Children.toArray(children).find(isSelectEmpty);
   if (customEmpty) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SelectEmpty_default, {});
 }
@@ -4512,8 +4445,8 @@ var SelectMenu_default = SelectMenu;
 // src/components/Select/Select/Select.tsx
 var import_jsx_runtime48 = require("react/jsx-runtime");
 var Select = (props) => {
-  const inputRef = (0, import_react33.useRef)(null);
-  const menuScrollContainerRef = (0, import_react33.useRef)(null);
+  const inputRef = (0, import_react32.useRef)(null);
+  const menuScrollContainerRef = (0, import_react32.useRef)(null);
   const _a = props, {
     disabled,
     inputRef: customInputRef,
@@ -4541,22 +4474,22 @@ var Select = (props) => {
     "floatingStrategy",
     "clearable"
   ]);
-  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)({
+  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)({
     placement,
     strategy: floatingStrategy,
-    middleware: [(0, import_react32.flip)({ padding: 6 }), (0, import_react32.offset)({ mainAxis: 6 })],
-    whileElementsMounted: import_react32.autoUpdate,
+    middleware: [(0, import_react31.flip)({ padding: 6 }), (0, import_react31.offset)({ mainAxis: 6 })],
+    whileElementsMounted: import_react31.autoUpdate,
     open,
     onOpenChange: setOpen
   });
   const { refs } = floating;
-  const options = (0, import_react33.useMemo)(
+  const options = (0, import_react32.useMemo)(
     () => {
       var _a2;
-      return (_a2 = import_react33.Children.toArray(children).map(findSelectOptions).filter(Boolean).flat()) != null ? _a2 : [];
+      return (_a2 = import_react32.Children.toArray(children).map(findSelectOptions).filter(Boolean).flat()) != null ? _a2 : [];
     },
     [children]
   );
@@ -4652,7 +4585,7 @@ Select.displayName = "Select";
 var Select_default = Select;
 
 // src/components/Select/SelectOption/SelectOption.tsx
-var import_react34 = require("react");
+var import_react33 = require("react");
 var import_jsx_runtime49 = require("react/jsx-runtime");
 var SelectOption = (_a) => {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
@@ -4675,7 +4608,7 @@ var SelectOption = (_a) => {
     "onRemove",
     "disabled"
   ]);
-  const ref = (0, import_react34.useRef)(null);
+  const ref = (0, import_react33.useRef)(null);
   const { preventDefault, attachPreventDefault } = usePreventDefault_default();
   const {
     closeMenuOnSelect,
@@ -4693,7 +4626,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_react34.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     if (!ref.current || !menuScrollContainerRef.current) return;
     if ((focusedOption == null ? void 0 : focusedOption.focusType) !== "mouse" && focused) {
       const scrollContainer = menuScrollContainerRef.current;
@@ -4765,11 +4698,11 @@ var SelectOption = (_a) => {
       ref,
       className: classNames(
         "GeckoUISelectOption",
-        `GeckoUISelectOption--${selected ? "selected" : "unselected"}`,
-        focused && "GeckoUISelectOption--focused",
-        disabled && "GeckoUISelectOption--disabled",
         typeof className === "function" ? className({ value, selected, focused }) : className
-      )
+      ),
+      "data-state": selected ? "selected" : "unselected",
+      "data-focused": focused || void 0,
+      "data-disabled": disabled || void 0
     }, rest), {
       onMouseMove: () => {
         if ((focusedOption == null ? void 0 : focusedOption.value) !== value) {
@@ -4851,11 +4784,8 @@ var RHFSelect = (_a) => {
             inputRef: ref,
             wrapperClassName: classNames("GeckoUIRHFSelect", wrapperClassName)
           }, rest), {
-            className: classNames(
-              "GeckoUIRHFSelectButton",
-              !!error && "GeckoUIRHFSelectButton--error",
-              className
-            ),
+            className: classNames("GeckoUIRHFSelectButton", className),
+            "data-error": !!error || void 0,
             value,
             onChange: (v) => {
               var _a2;
@@ -4886,31 +4816,19 @@ var Alert = (props) => {
   } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
     "div",
-    {
-      className: classNames(
-        "GeckoUIAlert",
-        `GeckoUIAlert--${variant}`,
-        condensed && "GeckoUIAlert--condensed",
-        className
-      ),
+    __spreadProps(__spreadValues({
+      className: classNames("GeckoUIAlert", className),
+      "data-variant": variant
+    }, condensed ? { "data-condensed": "" } : {}), {
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "GeckoUIAlert__body", children: [
-          icon ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(DynamicComponentRenderer_default, { component: icon }) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-            "div",
-            {
-              className: classNames(
-                "GeckoUIAlert__icon",
-                `GeckoUIAlert__icon--${variant}`,
-                iconClassName
-              )
-            }
-          ),
+          icon ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(DynamicComponentRenderer_default, { component: icon }) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: classNames("GeckoUIAlert__icon", iconClassName), "data-variant": variant }),
           /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(DynamicComponentRenderer_default, { component: title, className: "GeckoUIAlert__title" }),
           Boolean(onRemove) && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("button", { className: "GeckoUIAlert__remove-button", onClick: onRemove, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "GeckoUIAlert__remove-button__icon" }) })
         ] }),
         description ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "GeckoUIAlert__description", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(DynamicComponentRenderer_default, { component: description }) }) : null
       ]
-    }
+    })
   );
 };
 var Alert_default = Alert;
@@ -4960,7 +4878,7 @@ var Pagination = ({ currentPage, totalPages, onChange, className }) => {
           onChange(currentPage - 1);
         },
         type: "button",
-        children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "GeckoUIPagination__arrow__icon GeckoUIPagination__arrow__icon--previous" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "GeckoUIPagination__arrow__icon", "data-direction": "previous" })
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "GeckoUIPagination__page-count", children: [
@@ -4971,11 +4889,9 @@ var Pagination = ({ currentPage, totalPages, onChange, className }) => {
     /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "GeckoUIPagination__page-buttons", children: pages.map((page, index) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       "button",
       {
-        className: classNames(
-          "GeckoUIPagination__page-button",
-          page === currentPage && "GeckoUIPagination__page-button--active",
-          page === "..." && "GeckoUIPagination__page-button--ellipsis"
-        ),
+        className: "GeckoUIPagination__page-button",
+        "data-active": page === currentPage || void 0,
+        "data-ellipsis": page === "..." || void 0,
         disabled: page === "...",
         onClick: () => page !== "..." && onChange(Number(page)),
         type: "button",
@@ -4992,7 +4908,7 @@ var Pagination = ({ currentPage, totalPages, onChange, className }) => {
           onChange(currentPage + 1);
         },
         type: "button",
-        children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "GeckoUIPagination__arrow__icon GeckoUIPagination__arrow__icon--next" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "GeckoUIPagination__arrow__icon", "data-direction": "next" })
       }
     )
   ] });
@@ -5000,10 +4916,10 @@ var Pagination = ({ currentPage, totalPages, onChange, className }) => {
 var Pagination_default = Pagination;
 
 // src/components/ConfirmDialog/ConfirmDialog.tsx
-var import_react36 = require("react");
+var import_react35 = require("react");
 
 // src/components/Dialog/Dialog.tsx
-var import_react35 = require("react");
+var import_react34 = require("react");
 var import_client = require("react-dom/client");
 
 // src/components/Dialog/DialogContainer.tsx
@@ -5054,8 +4970,8 @@ function DialogContent(_a) {
     }
     return acc;
   }, {});
-  const ref = (0, import_react35.useRef)(null);
-  const [animationState, setAnimationState] = (0, import_react35.useState)("entering");
+  const ref = (0, import_react34.useRef)(null);
+  const [animationState, setAnimationState] = (0, import_react34.useState)("entering");
   const handleDismiss = () => {
     setAnimationState("closing");
     setTimeout(() => {
@@ -5066,7 +4982,7 @@ function DialogContent(_a) {
       }
     }, 300);
   };
-  (0, import_react35.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     dismissCallback = handleDismiss;
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
@@ -5097,10 +5013,10 @@ function ConfirmDialogContent({
   onConfirm,
   onCancel
 }) {
-  const [cancelLoading, setCancelLoading] = (0, import_react36.useState)(false);
-  const [confirmLoading, setConfirmLoading] = (0, import_react36.useState)(false);
+  const [cancelLoading, setCancelLoading] = (0, import_react35.useState)(false);
+  const [confirmLoading, setConfirmLoading] = (0, import_react35.useState)(false);
   const { preventDefault, attachPreventDefault } = usePreventDefault_default();
-  const handleConfirm = (0, import_react36.useCallback)(() => __async(null, null, function* () {
+  const handleConfirm = (0, import_react35.useCallback)(() => __async(null, null, function* () {
     const isAsync = isAsyncFn(onConfirm);
     if (isAsync) {
       setConfirmLoading(true);
@@ -5118,7 +5034,7 @@ function ConfirmDialogContent({
     setCancelLoading(false);
     attachPreventDefault(dismiss2);
   };
-  (0, import_react36.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     const onKeyDown = (e) => {
       const el = document.activeElement;
       if (e.key === "Enter") {
@@ -5200,9 +5116,9 @@ var GeckoUIPortal = ({ toastOptions = {} }) => {
       __spreadValues({
         position: "bottom-right",
         style: __spreadValues({
-          "--normal-bg": "rgb(var(--gecko-ui-surface-primary))",
-          "--normal-text": "rgb(var(--gecko-ui-text-primary))",
-          "--normal-border": "rgb(var(--gecko-ui-border-primary))"
+          "--normal-bg": "var(--color-surface-primary)",
+          "--normal-text": "var(--color-text-primary)",
+          "--normal-border": "var(--color-border-primary)"
         }, style)
       }, restToastOptions)
     ),
@@ -5213,25 +5129,9 @@ var GeckoUIPortal = ({ toastOptions = {} }) => {
 var GeckoUIPortal_default = GeckoUIPortal;
 
 // src/components/Drawer/Drawer.tsx
-var import_react37 = require("react");
+var import_react36 = require("react");
 var import_client2 = require("react-dom/client");
 var import_jsx_runtime58 = require("react/jsx-runtime");
-function getDrawerClasses(placement, open, className) {
-  const baseClass = "GeckoUIDrawer__drawer";
-  const placementClass = `${baseClass}--${placement}`;
-  const stateClass = open ? `${baseClass}--open` : `${baseClass}--closed`;
-  let compoundClass = "";
-  if (open) {
-    if (placement === "right" || placement === "left") {
-      compoundClass = `${baseClass}--right-open ${baseClass}--left-open`;
-    } else if (placement === "top" || placement === "bottom") {
-      compoundClass = `${baseClass}--top-open ${baseClass}--bottom-open`;
-    }
-  } else {
-    compoundClass = `${baseClass}--${placement}-closed`;
-  }
-  return classNames(baseClass, placementClass, stateClass, compoundClass, className);
-}
 function Drawer({
   open = false,
   allowClickOutside,
@@ -5243,7 +5143,7 @@ function Drawer({
   children,
   dismissOnEscape = true
 }) {
-  const drawerRootRef = (0, import_react37.useRef)(null);
+  const drawerRootRef = (0, import_react36.useRef)(null);
   const handleDismiss = () => {
     if (open) handleClose == null ? void 0 : handleClose();
   };
@@ -5256,19 +5156,23 @@ function Drawer({
     /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       "div",
       {
-        className: classNames(
-          "GeckoUIDrawer__backdrop",
-          open ? "GeckoUIDrawer__backdrop--visible" : "GeckoUIDrawer__backdrop--hidden",
-          hideBackdrop && "GeckoUIDrawer__backdrop--hidden",
-          allowClickOutside && "GeckoUIDrawer__backdrop--clickthrough",
-          backdropClassName
-        ),
+        "data-state": open && !hideBackdrop ? "visible" : "hidden",
+        "data-clickthrough": allowClickOutside || void 0,
+        className: classNames("GeckoUIDrawer__backdrop", backdropClassName),
         onClick: handleDismiss,
         onKeyDown: handleDismiss,
         role: "presentation"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: getDrawerClasses(placement, open, className), children })
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+      "div",
+      {
+        "data-placement": placement,
+        "data-state": open ? "open" : "closed",
+        className: classNames("GeckoUIDrawer__drawer", className),
+        children
+      }
+    )
   ] });
 }
 var root2 = null;
@@ -5291,144 +5195,227 @@ Drawer.dismiss = () => {
 };
 var Drawer_default = Drawer;
 
-// src/components/Menu/Menu.tsx
-var import_react38 = require("@headlessui/react");
+// src/components/Menu/Menu/Menu.tsx
+var import_react40 = require("@floating-ui/react");
+var import_react41 = require("react");
+
+// src/components/Menu/Menu.utils.ts
+var import_react38 = require("react");
+
+// src/components/Menu/useMenu.tsx
+var import_react37 = require("react");
+var MenuContext = (0, import_react37.createContext)(void 0);
+var useMenu = () => {
+  const context = (0, import_react37.useContext)(MenuContext);
+  if (context === void 0) {
+    throw new Error("useMenu must be used within a Menu");
+  }
+  return context;
+};
+
+// src/components/Menu/MenuTrigger/MenuTrigger.tsx
+var MenuTrigger = ({ children }) => {
+  const { open, openMenu, closeMenu, toggleMenu, disabled } = useMenu();
+  return children({ open, openMenu, closeMenu, toggleMenu, disabled });
+};
+MenuTrigger.displayName = "MenuTrigger";
+var MenuTrigger_default = MenuTrigger;
+
+// src/components/Menu/Menu.utils.ts
+function isMenuTrigger(child) {
+  return (0, import_react38.isValidElement)(child) && child.type === MenuTrigger_default;
+}
+
+// src/components/Menu/MenuButton/MenuButton.tsx
 var import_jsx_runtime59 = require("react/jsx-runtime");
-var Menu = import_react38.Menu;
-var MenuButton = (_a) => {
-  var _b = _a, { as } = _b, rest = __objRest(_b, ["as"]);
+var MenuButton = ({ children, className }) => {
+  const { toggleMenu, openMenu, disabled, open, menuRef } = useMenu();
+  const handleKeyDown = (e) => {
+    var _a;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      if (!open) openMenu();
+      const firstItem = (_a = menuRef.current) == null ? void 0 : _a.querySelector("[role=menuitem]");
+      setTimeout(() => firstItem == null ? void 0 : firstItem.focus());
+    }
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-    import_react38.MenuButton,
-    __spreadProps(__spreadValues({
-      as: as != null ? as : "button"
-    }, rest), {
-      className: (args) => {
-        const className = rest.className;
-        return classNames(
-          "GeckoUIMenu__button",
-          typeof className === "function" ? className(args) : className
-        );
-      }
-    })
+    "button",
+    {
+      type: "button",
+      className: classNames("GeckoUIMenu__button", className),
+      disabled,
+      "aria-haspopup": "menu",
+      "aria-expanded": open,
+      onClick: toggleMenu,
+      onKeyDown: handleKeyDown,
+      children
+    }
   );
 };
-var MenuItems = (_a) => {
-  var _b = _a, { as } = _b, rest = __objRest(_b, ["as"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-    import_react38.MenuItems,
-    __spreadProps(__spreadValues({
-      as: as != null ? as : "div"
-    }, rest), {
-      className: (args) => {
-        const className = rest.className;
-        return classNames(
-          "GeckoUIMenu__items",
-          typeof className === "function" ? className(args) : className
-        );
+MenuButton.displayName = "MenuButton";
+var MenuButton_default = MenuButton;
+
+// src/components/Menu/MenuPanel/MenuPanel.tsx
+var import_react39 = require("react");
+var import_jsx_runtime60 = require("react/jsx-runtime");
+var MenuPanel = ({ children, className }) => {
+  const {
+    open,
+    disabled,
+    closeMenu,
+    menuRef,
+    floating: { refs, floatingStyles }
+  } = useMenu();
+  const panelRef = (0, import_react39.useRef)(null);
+  (0, import_react39.useEffect)(() => {
+    if (!open || !panelRef.current) return;
+    panelRef.current.focus();
+  }, [open]);
+  if (!open || disabled) return null;
+  const handleKeyDown = (e) => {
+    var _a, _b;
+    const items = Array.from(
+      (_b = (_a = panelRef.current) == null ? void 0 : _a.querySelectorAll("[role=menuitem]:not([data-disabled])")) != null ? _b : []
+    );
+    const current = document.activeElement;
+    const currentIndex = items.indexOf(current);
+    switch (e.key) {
+      case "ArrowDown": {
+        e.preventDefault();
+        const next = items[(currentIndex + 1) % items.length];
+        next == null ? void 0 : next.focus();
+        break;
       }
-    })
+      case "ArrowUp": {
+        e.preventDefault();
+        const prev = items[(currentIndex - 1 + items.length) % items.length];
+        prev == null ? void 0 : prev.focus();
+        break;
+      }
+      case "Escape":
+      case "Tab":
+        e.preventDefault();
+        closeMenu();
+        break;
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    "div",
+    {
+      ref: (r) => {
+        refs.setFloating(r);
+        menuRef.current = r;
+        panelRef.current = r;
+      },
+      role: "menu",
+      tabIndex: -1,
+      style: floatingStyles,
+      className: classNames("GeckoUIMenu__items", className),
+      onKeyDown: handleKeyDown,
+      children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "GeckoUIMenu__scroll-container", children })
+    }
   );
 };
-var MenuItem = (_a) => {
-  var _b = _a, { children, as } = _b, rest = __objRest(_b, ["children", "as"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-    import_react38.MenuItem,
-    __spreadProps(__spreadValues({}, rest), {
-      className: (args) => {
-        const className = rest.className;
-        return classNames(
-          "GeckoUIMenu__item",
-          typeof className === "function" ? className(args) : className
-        );
+MenuPanel.displayName = "MenuPanel";
+var MenuPanel_default = MenuPanel;
+
+// src/components/Menu/Menu/Menu.tsx
+var import_jsx_runtime61 = require("react/jsx-runtime");
+var Menu = ({
+  label,
+  disabled = false,
+  placement = "bottom-start",
+  floatingStrategy,
+  className,
+  menuClassName,
+  buttonClassName,
+  children
+}) => {
+  const menuRef = (0, import_react41.useRef)(null);
+  const [open, setOpen] = (0, import_react41.useState)(false);
+  const floating = (0, import_react40.useFloating)({
+    placement,
+    strategy: floatingStrategy,
+    middleware: [(0, import_react40.flip)({ padding: 6 }), (0, import_react40.offset)({ mainAxis: 6 })],
+    whileElementsMounted: import_react40.autoUpdate,
+    open,
+    onOpenChange: setOpen
+  });
+  const { refs } = floating;
+  const openMenu = (0, import_react41.useCallback)(() => {
+    if (disabled || open) return;
+    setOpen(true);
+  }, [disabled, open]);
+  const closeMenu = (0, import_react41.useCallback)(() => {
+    setOpen(false);
+  }, []);
+  const toggleMenu = (0, import_react41.useCallback)(() => {
+    if (open) {
+      closeMenu();
+    } else {
+      openMenu();
+    }
+  }, [open, openMenu, closeMenu]);
+  useClickOutside_default(() => {
+    closeMenu();
+  }, [refs.reference]);
+  const childArray = import_react41.Children.toArray(children);
+  const trigger = childArray.find(isMenuTrigger);
+  const menuItems = childArray.filter((el) => !isMenuTrigger(el));
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    MenuContext.Provider,
+    {
+      value: {
+        open,
+        setOpen,
+        floating,
+        openMenu,
+        closeMenu,
+        toggleMenu,
+        disabled,
+        menuRef
       },
-      as: as != null ? as : "button",
-      type: "button",
-      children
-    })
+      children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: classNames("GeckoUIMenu", className), ref: (r) => refs.setReference(r), children: [
+        trigger != null ? trigger : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(MenuButton_default, { className: buttonClassName, children: label != null ? label : "Menu" }),
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(MenuPanel_default, { className: menuClassName, children: menuItems })
+      ] })
+    }
   );
 };
-var MenuHeading = import_react38.MenuHeading;
-var MenuSection = import_react38.MenuSection;
-var MenuSeparator = import_react38.MenuSeparator;
+Menu.displayName = "Menu";
+var Menu_default = Menu;
 
-// src/components/Dropdown/Dropdown.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
-function Dropdown(_a) {
-  var _b = _a, {
-    items,
-    anchor,
-    icon,
-    className,
-    menuClassName,
-    iconClassName,
-    children,
-    hideArrowIcon
-  } = _b, rest = __objRest(_b, [
-    "items",
-    "anchor",
-    "icon",
-    "className",
-    "menuClassName",
-    "iconClassName",
-    "children",
-    "hideArrowIcon"
-  ]);
-  const dataAttributes = Object.keys(rest).reduce((acc, key) => {
-    if (key.startsWith("data-")) {
-      acc[key] = rest[key];
+// src/components/Menu/MenuItem/MenuItem.tsx
+var import_jsx_runtime62 = require("react/jsx-runtime");
+var MenuItem = (_a) => {
+  var _b = _a, { label, disabled, className, onClick, children } = _b, rest = __objRest(_b, ["label", "disabled", "className", "onClick", "children"]);
+  const { closeMenu } = useMenu();
+  const handleClick = () => {
+    if (disabled) return;
+    onClick == null ? void 0 : onClick();
+    closeMenu();
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handleClick();
     }
-    return acc;
-  }, {});
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(Menu, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
-      MenuButton,
-      __spreadProps(__spreadValues({}, dataAttributes), {
-        onClick: (e) => {
-          e.stopPropagation();
-          setTimeout(() => {
-            var _a2;
-            return (_a2 = document.activeElement) == null ? void 0 : _a2.blur();
-          }, 0);
-        },
-        type: "button",
-        as: "button",
-        onKeyDown: (e) => {
-          if (e.key === "Enter") {
-            setTimeout(() => {
-              var _a2;
-              return (_a2 = document.activeElement) == null ? void 0 : _a2.blur();
-            }, 0);
-          }
-        },
-        className: classNames(`GeckoUIDropdown__button`, className),
-        children: [
-          children,
-          !hideArrowIcon && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: classNames("GeckoUIDropdown__icon", iconClassName) })
-        ]
-      })
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-      MenuItems,
-      {
-        className: classNames("GeckoUIDropdown__menu", menuClassName),
-        anchor: anchor || "bottom start",
-        children: () => {
-          return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_jsx_runtime60.Fragment, { children: items.map((item, index) => {
-            const label = createLabel_default(item);
-            return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-              MenuItem,
-              __spreadProps(__spreadValues({}, dataAttributes), {
-                className: classNames("GeckoUIDropdown__menu-item", item.className),
-                onClick: item.onClick,
-                children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(DynamicComponentRenderer_default, { component: label })
-              }),
-              index
-            );
-          }) });
-        }
-      }
-    )
-  ] });
-}
-Dropdown.displayName = "Dropdown";
-var Dropdown_default = Dropdown;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    "div",
+    __spreadProps(__spreadValues({
+      role: "menuitem",
+      tabIndex: disabled ? -1 : 0,
+      className: classNames("GeckoUIMenu__item", className),
+      "data-disabled": disabled || void 0,
+      onMouseMove: (e) => e.currentTarget.focus(),
+      onClick: disabled ? void 0 : handleClick,
+      onKeyDown: handleKeyDown
+    }, rest), {
+      children: children != null ? children : label
+    })
+  );
+};
+MenuItem.displayName = "MenuItem";
+var MenuItem_default = MenuItem;