@geckoui/geckoui 1.2.0-beta.2 → 1.3.0

package/dist/index.mjs

@@ -755,27 +755,20 @@ var CounterInput = forwardRef2(
     return /* @__PURE__ */ jsxs3(
       "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__ */ jsx6(
             "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__ */ jsx6("span", { className: "GeckoUICounterInput__icon GeckoUICounterInput__icon--minus" })
+              children: /* @__PURE__ */ jsx6("span", { className: "GeckoUICounterInput__icon", "data-icon": "minus" })
             }
           ),
           /* @__PURE__ */ jsx6(
@@ -798,15 +791,12 @@ var CounterInput = forwardRef2(
             "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__ */ jsx6("span", { className: "GeckoUICounterInput__icon GeckoUICounterInput__icon--plus" })
+              children: /* @__PURE__ */ jsx6("span", { className: "GeckoUICounterInput__icon", "data-icon": "plus" })
             }
           )
         ]
@@ -1125,70 +1115,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__ */ jsxs4("div", { ref: containerRef, className: containerClasses, onClick: () => handleDisplayClick(), children: [
-    Boolean(prefix) && /* @__PURE__ */ jsx8("div", { className: "GeckoUIDateInput__prefix", children: /* @__PURE__ */ jsx8(DynamicComponentRenderer_default, { component: prefix }) }),
-    !!isEmpty && !hasFocus && /* @__PURE__ */ jsx8("span", { className: classNames("GeckoUIDateInput__placeholder", placeholderClassName), children: placeholder != null ? placeholder : generatePlaceholder(format, separator) }),
-    /* @__PURE__ */ jsx8("div", { className: classNames("GeckoUIDateInput__display-container"), children: inputs.map(({ ref, value: value2, onChange: onChange2, maxLength, segment, display }, index) => /* @__PURE__ */ jsxs4(Fragment, { children: [
-      /* @__PURE__ */ jsxs4(
-        "label",
-        {
-          className: classNames(
-            "GeckoUIDateInput__segment",
-            !value2 && "GeckoUIDateInput__segment--empty"
+  const state = disabled ? "disabled" : readOnly ? "readonly" : "enabled";
+  return /* @__PURE__ */ jsxs4(
+    "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__ */ jsx8("div", { className: "GeckoUIDateInput__prefix", children: /* @__PURE__ */ jsx8(DynamicComponentRenderer_default, { component: prefix }) }),
+        !!isEmpty && !hasFocus && /* @__PURE__ */ jsx8("span", { className: classNames("GeckoUIDateInput__placeholder", placeholderClassName), children: placeholder != null ? placeholder : generatePlaceholder(format, separator) }),
+        /* @__PURE__ */ jsx8("div", { className: classNames("GeckoUIDateInput__display-container"), children: inputs.map(({ ref, value: value2, onChange: onChange2, maxLength, segment, display }, index) => /* @__PURE__ */ jsxs4(Fragment, { children: [
+          /* @__PURE__ */ jsxs4(
+            "label",
+            {
+              className: "GeckoUIDateInput__segment",
+              "data-empty": !value2 || void 0,
+              tabIndex: -1,
+              onClick: (e) => {
+                e.stopPropagation();
+                handleDisplayClick(segment);
+              },
+              children: [
+                /* @__PURE__ */ jsx8(
+                  "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__ */ jsx8(
-              "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__ */ jsx8("span", { className: "GeckoUIDateInput__separator", children: separator })
-    ] }, segment)) }),
-    /* @__PURE__ */ jsxs4("div", { className: "GeckoUIDateInput__icons", children: [
-      !hideClearIcon && !isEmpty && !disabled && !readOnly && /* @__PURE__ */ jsx8(
-        "button",
-        {
-          type: "button",
-          disabled: disabled || readOnly,
-          className: "GeckoUIDateInput__clear-button",
-          onClick: handleClear,
-          children: /* @__PURE__ */ jsx8("div", { className: "GeckoUI-icon__clear" })
-        }
-      ),
-      Boolean(suffix) && /* @__PURE__ */ jsx8("div", { className: "GeckoUIDateInput__suffix", children: /* @__PURE__ */ jsx8(DynamicComponentRenderer_default, { component: suffix }) }),
-      renderCalendarIcon,
-      !renderCalendarIcon && !hideCalendarIcon && /* @__PURE__ */ jsx8("div", { className: "GeckoUIDateInput__calendar-icon" })
-    ] })
-  ] });
+          index < inputs.length - 1 && /* @__PURE__ */ jsx8("span", { className: "GeckoUIDateInput__separator", children: separator })
+        ] }, segment)) }),
+        /* @__PURE__ */ jsxs4("div", { className: "GeckoUIDateInput__icons", children: [
+          !hideClearIcon && !isEmpty && !disabled && !readOnly && /* @__PURE__ */ jsx8(
+            "button",
+            {
+              type: "button",
+              disabled: disabled || readOnly,
+              className: "GeckoUIDateInput__clear-button",
+              onClick: handleClear,
+              children: /* @__PURE__ */ jsx8("div", { className: "GeckoUI-icon__clear" })
+            }
+          ),
+          Boolean(suffix) && /* @__PURE__ */ jsx8("div", { className: "GeckoUIDateInput__suffix", children: /* @__PURE__ */ jsx8(DynamicComponentRenderer_default, { component: suffix }) }),
+          renderCalendarIcon,
+          !renderCalendarIcon && !hideCalendarIcon && /* @__PURE__ */ jsx8("div", { className: "GeckoUIDateInput__calendar-icon" })
+        ] })
+      ]
+    }
+  );
 };
 BaseDateInput.displayName = "BaseDateInput";
 var BaseDateInput_default = BaseDateInput;
@@ -1276,7 +1267,7 @@ function CalendarHeader({
   header,
   onClickHeader
 }) {
-  return /* @__PURE__ */ jsxs5("div", { className: classNames("GeckoUICalendar__header"), children: [
+  return /* @__PURE__ */ jsxs5("div", { className: "GeckoUICalendar__header", children: [
     /* @__PURE__ */ jsx9(
       "button",
       {
@@ -1289,10 +1280,8 @@ function CalendarHeader({
     /* @__PURE__ */ jsx9(
       "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
@@ -1395,19 +1384,17 @@ function CalendarDayPicker(props) {
       return /* @__PURE__ */ jsx10(
         "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),
@@ -1447,10 +1434,8 @@ function CalendarMonthPicker(_a) {
       return /* @__PURE__ */ jsx11(
         "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
@@ -1496,11 +1481,9 @@ function CalendarYearPicker(_a) {
       return /* @__PURE__ */ jsx12(
         "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
@@ -1642,7 +1625,7 @@ Provided value: ${selectedRange.to}`
         const secondMonth = activeMonth === 11 ? 0 : activeMonth + 1;
         const secondYear = activeMonth === 11 ? activeYear + 1 : activeYear;
         return /* @__PURE__ */ jsxs9("div", { className: "GeckoUICalendar__dual", children: [
-          /* @__PURE__ */ jsx13("div", { className: "GeckoUICalendar__dual--first", children: /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx13("div", { className: "GeckoUICalendar__dual__item", "data-position": "first", children: /* @__PURE__ */ jsx13(
             CalendarDayPicker_default,
             {
               mode: "range",
@@ -1659,7 +1642,7 @@ Provided value: ${selectedRange.to}`
               onHoverDate: handleHoverDate
             }
           ) }),
-          numberOfMonths === 2 && /* @__PURE__ */ jsx13("div", { className: "GeckoUICalendar__dual--second", children: /* @__PURE__ */ jsx13(
+          numberOfMonths === 2 && /* @__PURE__ */ jsx13("div", { className: "GeckoUICalendar__dual__item", "data-position": "second", children: /* @__PURE__ */ jsx13(
             CalendarDayPicker_default,
             {
               mode: "range",
@@ -1712,13 +1695,10 @@ Provided value: ${selectedRange.to}`
   return /* @__PURE__ */ jsx13(
     "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()
     }
@@ -1824,6 +1804,7 @@ var DateInput = (_a) => {
     "div",
     {
       className: classNames("GeckoUIDateInputWrapper", wrapperClassName),
+      "data-calendar-open": openCalendar || void 0,
       ref: (r) => refs.setReference(r),
       children: [
         /* @__PURE__ */ jsx14(
@@ -1836,7 +1817,7 @@ var DateInput = (_a) => {
             prefix,
             suffix,
             hasError,
-            className: classNames(className, openCalendar && "GeckoUIDateInput--calendar-open"),
+            className,
             format,
             separator,
             placeholder,
@@ -2236,25 +2217,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__ */ jsx15(Fragment6, { children: segments.map(({ ref, value: value2, onChange: onChange2, maxLength, segment, display }, index) => /* @__PURE__ */ jsxs11(Fragment5, { children: [
     /* @__PURE__ */ jsxs11(
       "label",
       {
-        className: classNames(
-          "GeckoUIDateInput__segment",
-          !value2 && "GeckoUIDateInput__segment--empty"
-        ),
+        className: "GeckoUIDateInput__segment",
+        "data-empty": !value2 || void 0,
         tabIndex: -1,
         onClick: (e) => {
           e.stopPropagation();
@@ -2290,7 +2259,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: [
@@ -2431,6 +2404,7 @@ var DateRangeInput = (_a) => {
     "div",
     {
       className: classNames("GeckoUIDateRangeInputWrapper", wrapperClassName),
+      "data-calendar-open": openCalendar || void 0,
       ref: (r) => refs.setReference(r),
       children: [
         /* @__PURE__ */ jsx16(
@@ -2443,7 +2417,7 @@ var DateRangeInput = (_a) => {
             prefix,
             suffix,
             hasError,
-            className: classNames(className, openCalendar && "GeckoUIDateInput--calendar-open"),
+            className,
             format,
             separator,
             rangeSeparator,
@@ -2486,12 +2460,9 @@ var Input = forwardRef3(
       "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__ */ jsx17(DynamicComponentRenderer_default, { component: prefix, inputRef: ref }),
@@ -2662,13 +2633,10 @@ var Button = forwardRef4(
     return /* @__PURE__ */ jsx21(
       "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), {
@@ -2741,14 +2709,8 @@ var LoadingButton = (_a) => {
   return /* @__PURE__ */ jsxs16(
     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,
@@ -2905,11 +2867,8 @@ var RHFCounterInput = (_a) => {
         return /* @__PURE__ */ jsx26(
           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) => {
@@ -2966,11 +2925,8 @@ var RHFInput = (_a) => {
         return /* @__PURE__ */ jsx27(
           Input_default,
           __spreadProps(__spreadValues(__spreadValues({
-            className: classNames(
-              "GeckoUIRHFInput",
-              hasError && "GeckoUIRHFInput--error",
-              className
-            ),
+            className: classNames("GeckoUIRHFInput", className),
+            "data-error": hasError || void 0,
             prefix: prefix ? /* @__PURE__ */ jsx27(DynamicComponentRenderer_default, __spreadValues({ component: prefix }, renderProps)) : null,
             suffix: /* @__PURE__ */ jsx27(DynamicComponentRenderer_default, __spreadValues({ component: suffix }, renderProps))
           }, field), rest), {
@@ -3196,11 +3152,8 @@ var RHFTextarea = (_a) => {
         return /* @__PURE__ */ jsx33(
           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) => {
@@ -3221,36 +3174,31 @@ RHFTextarea.displayName = "RHFTextarea";
 var RHFTextarea_default = RHFTextarea;
 
 // src/components/Switch/Switch.tsx
-import { Switch as HeadlessSwitch } from "@headlessui/react";
 import { forwardRef as forwardRef6 } from "react";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
 var Switch = forwardRef6(
   (_a, ref) => {
-    var _b = _a, { className, thumbClassName, size = "md" } = _b, rest = __objRest(_b, ["className", "thumbClassName", "size"]);
-    return /* @__PURE__ */ jsx34(
-      HeadlessSwitch,
-      __spreadProps(__spreadValues({
-        onKeyUp: (e) => {
-          if (e.key === "Enter") {
-            e.preventDefault();
-            return true;
-          }
-        },
-        className: classNames("group GeckoUISwitch", `GeckoUISwitch--size-${size}`, className)
-      }, rest), {
-        ref,
-        children: /* @__PURE__ */ jsx34(
-          "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__ */ jsxs19("label", { className: classNames("GeckoUISwitch", className), "data-size": size, children: [
+      /* @__PURE__ */ jsx34(
+        "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__ */ jsx34("span", { className: classNames("GeckoUISwitch__thumb", thumbClassName), "data-size": size })
+    ] });
   }
 );
 Switch.displayName = "Switch";
@@ -3307,7 +3255,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);
@@ -3319,10 +3267,7 @@ var RHFSwitch = (_a) => {
             },
             onChange: handleUpdate,
             size,
-            thumbClassName: classNames(
-              `GeckoUIRHFSwitch__thumb GeckoUIRHFSwitch__thumb--size-${size}`,
-              thumbClassName
-            ),
+            thumbClassName: classNames("GeckoUIRHFSwitch__thumb", thumbClassName),
             value: void 0
           })
         );
@@ -3347,7 +3292,7 @@ Radio.displayName = "Radio";
 var Radio_default = Radio;
 
 // src/components/RHF/RHFRadio/RHFRadio.tsx
-import { jsx as jsx37, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs20 } from "react/jsx-runtime";
 var RHFRadio = (_a) => {
   var _b = _a, {
     name,
@@ -3384,7 +3329,7 @@ var RHFRadio = (_a) => {
       name,
       rules,
       render: ({ field }) => {
-        return /* @__PURE__ */ jsxs19("label", { className: "GeckoUIRHFRadio group", htmlFor: uniqueId, children: [
+        return /* @__PURE__ */ jsxs20("label", { className: "GeckoUIRHFRadio group", htmlFor: uniqueId, children: [
           /* @__PURE__ */ jsx37(
             Radio_default,
             __spreadProps(__spreadValues(__spreadValues({}, field), rest), {
@@ -3446,7 +3391,17 @@ var RHFDateInput_default = RHFDateInput;
 // src/components/RHF/RHFDateRangeInput/RHFDateRangeInput.tsx
 import { jsx as jsx39 } from "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__ */ jsx39(
     RHFController_default,
     {
@@ -3476,7 +3431,7 @@ RHFDateRangeInput.displayName = "RHFDateRangeInput";
 var RHFDateRangeInput_default = RHFDateRangeInput;
 
 // src/components/RHF/RHFFileInput/RHFFileInput.tsx
-import { jsx as jsx40, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs21 } from "react/jsx-runtime";
 var RHFFileInput = (_a) => {
   var _b = _a, {
     id,
@@ -3511,15 +3466,12 @@ var RHFFileInput = (_a) => {
       rules,
       render: (renderProps) => {
         const { field } = renderProps;
-        return /* @__PURE__ */ jsxs20("label", { className: classNames("GeckoUIRHFFileInput--wrapper", className), id, children: [
+        return /* @__PURE__ */ jsxs21("label", { className: classNames("GeckoUIRHFFileInput", className), id, children: [
           /* @__PURE__ */ jsx40(
             "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,
@@ -3556,7 +3508,7 @@ var RHFFileInput_default = RHFFileInput;
 
 // src/components/OTPInput/OTPInput.tsx
 import { forwardRef as forwardRef8, useRef as useRef8 } from "react";
-import { jsx as jsx41, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs22 } from "react/jsx-runtime";
 var OTPInput = forwardRef8(
   ({
     value = "",
@@ -3602,16 +3554,13 @@ var OTPInput = forwardRef8(
     return /* @__PURE__ */ jsx41(
       "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) => {
           const isLast = index === length - 1;
-          return /* @__PURE__ */ jsxs21(
+          return /* @__PURE__ */ jsxs22(
             "div",
             {
               style: {
@@ -3682,7 +3631,19 @@ var OTPInput_default = OTPInput;
 // src/components/RHF/RHFOTPInput/RHFOTPInput.tsx
 import { jsx as jsx42 } from "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__ */ jsx42(
     RHFController_default,
     {
@@ -3694,11 +3655,8 @@ var RHFOTPInput = (_a) => {
         return /* @__PURE__ */ jsx42(
           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)
         );
@@ -3710,7 +3668,7 @@ RHFOTPInput.displayName = "RHFOTPInput";
 var RHFOTPInput_default = RHFOTPInput;
 
 // src/components/RHF/RHFFilePicker/RHFFilePicker.tsx
-import { jsx as jsx43, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs23 } from "react/jsx-runtime";
 function formatFileSize(bytes) {
   if (bytes === 0) return "0 B";
   const k = 1024;
@@ -3767,17 +3725,15 @@ function RHFFilePickerRenderer({
     const updatedFiles = value.filter((file) => file.preview !== fileToRemove.preview);
     field.onChange(updatedFiles);
   };
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     "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__ */ jsxs22(
+        /* @__PURE__ */ jsxs23(
           "div",
           {
             className: "GeckoUIRHFFilePicker__upload-area",
@@ -3785,7 +3741,7 @@ function RHFFilePickerRenderer({
             children: [
               /* @__PURE__ */ jsx43(Upload_default, { className: "GeckoUIRHFFilePicker__upload-icon" }),
               /* @__PURE__ */ jsx43("p", { className: "GeckoUIRHFFilePicker__upload-text", children: "Drag and drop files here, or browse" }),
-              /* @__PURE__ */ jsxs22("div", { className: "GeckoUIRHFFilePicker__upload-buttons", children: [
+              /* @__PURE__ */ jsxs23("div", { className: "GeckoUIRHFFilePicker__upload-buttons", children: [
                 /* @__PURE__ */ jsx43(
                   "button",
                   {
@@ -3809,7 +3765,7 @@ function RHFFilePickerRenderer({
             ]
           }
         ),
-        Boolean(value == null ? void 0 : value.length) && /* @__PURE__ */ jsx43("div", { className: "GeckoUIRHFFilePicker__file-list", children: value.map((file) => /* @__PURE__ */ jsxs22("div", { className: "GeckoUIRHFFilePicker__file-row", children: [
+        Boolean(value == null ? void 0 : value.length) && /* @__PURE__ */ jsx43("div", { className: "GeckoUIRHFFilePicker__file-list", children: value.map((file) => /* @__PURE__ */ jsxs23("div", { className: "GeckoUIRHFFilePicker__file-row", children: [
           /* @__PURE__ */ jsx43("span", { className: "GeckoUIRHFFilePicker__file-name", children: file.name }),
           /* @__PURE__ */ jsx43("span", { className: "GeckoUIRHFFilePicker__file-size", children: formatFileSize(file.size) }),
           /* @__PURE__ */ jsx43(
@@ -4058,7 +4014,7 @@ var sortMultiSelectValue = (value, options) => {
 };
 
 // src/components/Select/SelectButton/SelectButton.tsx
-import { jsx as jsx44, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs24 } from "react/jsx-runtime";
 function SelectButton({ prefix, suffix, className }) {
   const {
     disabled,
@@ -4094,16 +4050,12 @@ function SelectButton({ prefix, suffix, className }) {
     return trigger;
   }
   const filterable = _filterable === true || _filterable === "inline";
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     "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) {
@@ -4116,43 +4068,33 @@ function SelectButton({ prefix, suffix, className }) {
       "aria-disabled": disabled,
       children: [
         /* @__PURE__ */ jsx44(DynamicComponentRenderer_default, { component: prefix }),
-        /* @__PURE__ */ jsxs23("div", { className: "GeckoUISelectButton__content", children: [
+        /* @__PURE__ */ jsxs24("div", { className: "GeckoUISelectButton__content", children: [
           hasValue ? /* @__PURE__ */ jsx44(SelectButtonContent, {}) : /* @__PURE__ */ jsx44(
             "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__ */ jsx44(
             "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__ */ jsx44(
                 "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 : (
@@ -4163,13 +4105,22 @@ function SelectButton({ prefix, suffix, className }) {
                   autoCapitalize: "off",
                   autoCorrect: "off",
                   spellCheck: false
-                }
+                })
               )
-            }
+            })
           )
         ] }),
-        /* @__PURE__ */ jsxs23("div", { className: "GeckoUISelectButton__icons", children: [
-          hasValue && !disabled && clearable && /* @__PURE__ */ jsx44("button", { className: "GeckoUISelectButton__clear-button", type: "button", onClick: handleClear, children: /* @__PURE__ */ jsx44("div", { className: "GeckoUI-icon__clear" }) }),
+        /* @__PURE__ */ jsxs24("div", { className: "GeckoUISelectButton__icons", children: [
+          hasValue && !disabled && clearable && /* @__PURE__ */ jsx44(
+            "button",
+            {
+              className: "GeckoUISelectButton__clear-button",
+              type: "button",
+              onClick: handleClear,
+              "data-disabled": disabled || void 0,
+              children: /* @__PURE__ */ jsx44("div", { className: "GeckoUI-icon__clear" })
+            }
+          ),
           /* @__PURE__ */ jsx44(
             DynamicComponentRenderer_default,
             {
@@ -4178,7 +4129,7 @@ function SelectButton({ prefix, suffix, className }) {
           )
         ] })
       ]
-    }
+    })
   );
 }
 function SelectButtonContent() {
@@ -4217,13 +4168,11 @@ function SelectButtonContent() {
     });
     return selectedOptions.map((option) => {
       const { remove, value: value2, label } = option;
-      return /* @__PURE__ */ jsxs23(
+      return /* @__PURE__ */ jsxs24(
         "div",
         {
-          className: classNames(
-            "GeckoUISelectButton__multiselected-chip",
-            disabled && "GeckoUISelectButton__multiselected-chip--disabled"
-          ),
+          className: "GeckoUISelectButton__multiselected-chip",
+          "data-disabled": disabled || void 0,
           children: [
             /* @__PURE__ */ jsx44("span", { children: option.label }),
             !disabled && /* @__PURE__ */ jsx44(
@@ -4235,18 +4184,9 @@ function SelectButtonContent() {
                   remove();
                 },
                 disabled,
-                className: classNames(
-                  "GeckoUISelectButton__multiselected-chip__clear-button",
-                  disabled && "GeckoUISelectButton__multiselected-chip__clear-button--disabled"
-                ),
-                children: /* @__PURE__ */ jsx44(
-                  "span",
-                  {
-                    className: classNames(
-                      "GeckoUISelectButton__multiselected-chip__clear-button__icon"
-                    )
-                  }
-                )
+                className: "GeckoUISelectButton__multiselected-chip__clear-button",
+                "data-disabled": disabled || void 0,
+                children: /* @__PURE__ */ jsx44("span", { className: "GeckoUISelectButton__multiselected-chip__clear-button__icon" })
               }
             )
           ]
@@ -4260,9 +4200,9 @@ 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__ */ jsx44("span", { className: "GeckoUISelectButton__value GeckoUISelectButton__value--placeholder", children: selectedOptionLabel });
+    return /* @__PURE__ */ jsx44("span", { className: "GeckoUISelectButton__value", "data-placeholder": "", children: selectedOptionLabel });
   }
-  return /* @__PURE__ */ jsx44("span", { className: "GeckoUISelectButton__value GeckoUISelectButton__value--selected", children: selectedOptionLabel });
+  return /* @__PURE__ */ jsx44("span", { className: "GeckoUISelectButton__value", "data-selected": "", children: selectedOptionLabel });
 }
 SelectButton.displayName = "SelectButton";
 var SelectButton_default = SelectButton;
@@ -4368,7 +4308,7 @@ SelectEmpty.displayName = "SelectEmpty";
 var SelectEmpty_default = SelectEmpty;
 
 // src/components/Select/SelectMenu/SelectMenu.tsx
-import { jsx as jsx47, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs25 } from "react/jsx-runtime";
 var SelectMenu = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
   const {
@@ -4386,20 +4326,17 @@ var SelectMenu = (_a) => {
     return null;
   }
   const hasDropdownSearch = filterable === "dropdown";
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     "div",
     __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__ */ jsx47(SelectDropdownSearch_default, { className: "GeckoUISelectMenu__search-container", autoFocus: true }),
-        /* @__PURE__ */ jsxs24("div", { ref: menuScrollContainerRef, className: "GeckoUISelectMenu__items", children: [
+        /* @__PURE__ */ jsxs25("div", { ref: menuScrollContainerRef, className: "GeckoUISelectMenu__items", children: [
           menuItems,
           /* @__PURE__ */ jsx47(Empty, { children: menuItems })
         ] })
@@ -4418,7 +4355,7 @@ SelectMenu.displayName = "SelectMenu";
 var SelectMenu_default = SelectMenu;
 
 // src/components/Select/Select/Select.tsx
-import { jsx as jsx48, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs26 } from "react/jsx-runtime";
 var Select = (props) => {
   const inputRef = useRef9(null);
   const menuScrollContainerRef = useRef9(null);
@@ -4542,7 +4479,7 @@ var Select = (props) => {
         onChange,
         clearable
       }, rest),
-      children: /* @__PURE__ */ jsxs25(
+      children: /* @__PURE__ */ jsxs26(
         "div",
         {
           className: classNames("GeckoUISelect", wrapperClassName),
@@ -4561,7 +4498,7 @@ var Select_default = Select;
 
 // src/components/Select/SelectOption/SelectOption.tsx
 import { useEffect as useEffect8, useRef as useRef10 } from "react";
-import { jsx as jsx49, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs27 } from "react/jsx-runtime";
 var SelectOption = (_a) => {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
   const _a2 = props, {
@@ -4666,18 +4603,18 @@ var SelectOption = (_a) => {
     }
     return children;
   };
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs27(
     "div",
     __spreadProps(__spreadValues({
       tabIndex: -1,
       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) {
@@ -4759,11 +4696,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;
@@ -4780,7 +4714,7 @@ RHFSelect.displayName = "RHFSelect";
 var RHFSelect_default = RHFSelect;
 
 // src/components/Alert/Alert.tsx
-import { jsx as jsx51, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs28 } from "react/jsx-runtime";
 var Alert = (props) => {
   const {
     variant = "default",
@@ -4792,39 +4726,27 @@ var Alert = (props) => {
     icon,
     iconClassName
   } = props;
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs28(
     "div",
-    {
-      className: classNames(
-        "GeckoUIAlert",
-        `GeckoUIAlert--${variant}`,
-        condensed && "GeckoUIAlert--condensed",
-        className
-      ),
+    __spreadProps(__spreadValues({
+      className: classNames("GeckoUIAlert", className),
+      "data-variant": variant
+    }, condensed ? { "data-condensed": "" } : {}), {
       children: [
-        /* @__PURE__ */ jsxs27("div", { className: "GeckoUIAlert__body", children: [
-          icon ? /* @__PURE__ */ jsx51(DynamicComponentRenderer_default, { component: icon }) : /* @__PURE__ */ jsx51(
-            "div",
-            {
-              className: classNames(
-                "GeckoUIAlert__icon",
-                `GeckoUIAlert__icon--${variant}`,
-                iconClassName
-              )
-            }
-          ),
+        /* @__PURE__ */ jsxs28("div", { className: "GeckoUIAlert__body", children: [
+          icon ? /* @__PURE__ */ jsx51(DynamicComponentRenderer_default, { component: icon }) : /* @__PURE__ */ jsx51("div", { className: classNames("GeckoUIAlert__icon", iconClassName), "data-variant": variant }),
           /* @__PURE__ */ jsx51(DynamicComponentRenderer_default, { component: title, className: "GeckoUIAlert__title" }),
           Boolean(onRemove) && /* @__PURE__ */ jsx51("button", { className: "GeckoUIAlert__remove-button", onClick: onRemove, type: "button", children: /* @__PURE__ */ jsx51("span", { className: "GeckoUIAlert__remove-button__icon" }) })
         ] }),
         description ? /* @__PURE__ */ jsx51("div", { className: "GeckoUIAlert__description", children: /* @__PURE__ */ jsx51(DynamicComponentRenderer_default, { component: description }) }) : null
       ]
-    }
+    })
   );
 };
 var Alert_default = Alert;
 
 // src/components/Pagination/Pagination.tsx
-import { jsx as jsx52, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs29 } from "react/jsx-runtime";
 var Pagination = ({ currentPage, totalPages, onChange, className }) => {
   if (totalPages <= 1) return null;
   const getPages = () => {
@@ -4858,7 +4780,7 @@ var Pagination = ({ currentPage, totalPages, onChange, className }) => {
     return pages2;
   };
   const pages = getPages();
-  return /* @__PURE__ */ jsxs28("div", { className: classNames("GeckoUIPagination", className), children: [
+  return /* @__PURE__ */ jsxs29("div", { className: classNames("GeckoUIPagination", className), children: [
     /* @__PURE__ */ jsx52(
       "button",
       {
@@ -4868,10 +4790,10 @@ var Pagination = ({ currentPage, totalPages, onChange, className }) => {
           onChange(currentPage - 1);
         },
         type: "button",
-        children: /* @__PURE__ */ jsx52("span", { className: "GeckoUIPagination__arrow__icon GeckoUIPagination__arrow__icon--previous" })
+        children: /* @__PURE__ */ jsx52("span", { className: "GeckoUIPagination__arrow__icon", "data-direction": "previous" })
       }
     ),
-    /* @__PURE__ */ jsxs28("div", { className: "GeckoUIPagination__page-count", children: [
+    /* @__PURE__ */ jsxs29("div", { className: "GeckoUIPagination__page-count", children: [
       /* @__PURE__ */ jsx52("span", { children: currentPage }),
       /* @__PURE__ */ jsx52("span", { children: "/" }),
       /* @__PURE__ */ jsx52("span", { children: totalPages })
@@ -4879,11 +4801,9 @@ var Pagination = ({ currentPage, totalPages, onChange, className }) => {
     /* @__PURE__ */ jsx52("div", { className: "GeckoUIPagination__page-buttons", children: pages.map((page, index) => /* @__PURE__ */ jsx52(
       "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",
@@ -4900,7 +4820,7 @@ var Pagination = ({ currentPage, totalPages, onChange, className }) => {
           onChange(currentPage + 1);
         },
         type: "button",
-        children: /* @__PURE__ */ jsx52("span", { className: "GeckoUIPagination__arrow__icon GeckoUIPagination__arrow__icon--next" })
+        children: /* @__PURE__ */ jsx52("span", { className: "GeckoUIPagination__arrow__icon", "data-direction": "next" })
       }
     )
   ] });
@@ -4993,7 +4913,7 @@ var Dialog = { show, dismiss };
 var Dialog_default = Dialog;
 
 // src/components/ConfirmDialog/ConfirmDialog.tsx
-import { Fragment as Fragment10, jsx as jsx55, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx55, jsxs as jsxs30 } from "react/jsx-runtime";
 function ConfirmDialogContent({
   confirmButtonLabel = "Ok",
   cancelButtonLabel = "Cancel",
@@ -5043,10 +4963,10 @@ function ConfirmDialogContent({
       return document.removeEventListener("keydown", onKeyDown);
     };
   }, [handleConfirm]);
-  return /* @__PURE__ */ jsxs29(Fragment10, { children: [
+  return /* @__PURE__ */ jsxs30(Fragment10, { children: [
     /* @__PURE__ */ jsx55("div", { className: classNames("GeckoUIConfirmDialog__title", titleClassName), children: /* @__PURE__ */ jsx55(DynamicComponentRenderer_default, { component: title }) }),
     /* @__PURE__ */ jsx55("div", { className: classNames("GeckoUIConfirmDialog__content", contentClassName), children: /* @__PURE__ */ jsx55(DynamicComponentRenderer_default, { component: content, dismiss: dismiss2 }) }),
-    /* @__PURE__ */ jsxs29("div", { className: "GeckoUIConfirmDialog__actions", children: [
+    /* @__PURE__ */ jsxs30("div", { className: "GeckoUIConfirmDialog__actions", children: [
       /* @__PURE__ */ jsx55(
         LoadingButton_default,
         {
@@ -5099,18 +5019,18 @@ function DrawerContainer() {
 }
 
 // src/components/GeckoUIPortal/GeckoUIPortal.tsx
-import { Fragment as Fragment11, jsx as jsx57, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx57, jsxs as jsxs31 } from "react/jsx-runtime";
 var GeckoUIPortal = ({ toastOptions = {} }) => {
   const _a = toastOptions, { style } = _a, restToastOptions = __objRest(_a, ["style"]);
-  return /* @__PURE__ */ jsxs30(Fragment11, { children: [
+  return /* @__PURE__ */ jsxs31(Fragment11, { children: [
     /* @__PURE__ */ jsx57(
       Toaster,
       __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)
     ),
@@ -5123,23 +5043,7 @@ var GeckoUIPortal_default = GeckoUIPortal;
 // src/components/Drawer/Drawer.tsx
 import { useRef as useRef12 } from "react";
 import { createRoot as createRoot2 } from "react-dom/client";
-import { jsx as jsx58, jsxs as jsxs31 } from "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);
-}
+import { jsx as jsx58, jsxs as jsxs32 } from "react/jsx-runtime";
 function Drawer({
   open = false,
   allowClickOutside,
@@ -5160,23 +5064,27 @@ function Drawer({
     handleDismiss();
   }, [drawerRootRef]);
   useEscListener_default(dismissOnEscape ? handleDismiss : void 0);
-  return /* @__PURE__ */ jsxs31("div", { className: "GeckoUIDrawer", ref: drawerRootRef, role: "dialog", children: [
+  return /* @__PURE__ */ jsxs32("div", { className: "GeckoUIDrawer", ref: drawerRootRef, role: "dialog", children: [
     /* @__PURE__ */ jsx58(
       "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__ */ jsx58("div", { className: getDrawerClasses(placement, open, className), children })
+    /* @__PURE__ */ jsx58(
+      "div",
+      {
+        "data-placement": placement,
+        "data-state": open ? "open" : "closed",
+        className: classNames("GeckoUIDrawer__drawer", className),
+        children
+      }
+    )
   ] });
 }
 var root2 = null;
@@ -5199,155 +5107,230 @@ Drawer.dismiss = () => {
 };
 var Drawer_default = Drawer;
 
-// src/components/Menu/Menu.tsx
-import {
-  Menu as HeadlessMenu,
-  MenuButton as HeadlessMenuButton,
-  MenuHeading as HeadlessMenuHeading,
-  MenuItem as HeadlessMenuItem,
-  MenuItems as HeadlessMenuItems,
-  MenuSection as HeadlessMenuSection,
-  MenuSeparator as HeadlessMenuSeparator
-} from "@headlessui/react";
+// src/components/Menu/Menu/Menu.tsx
+import { autoUpdate as autoUpdate4, flip as flip5, offset as offset5, useFloating as useFloating5 } from "@floating-ui/react";
+import { Children as Children5, useCallback as useCallback4, useRef as useRef14, useState as useState13 } from "react";
+
+// src/components/Menu/Menu.utils.ts
+import { isValidElement as isValidElement3 } from "react";
+
+// src/components/Menu/useMenu.tsx
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var MenuContext = createContext2(void 0);
+var useMenu = () => {
+  const context = useContext2(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 isValidElement3(child) && child.type === MenuTrigger_default;
+}
+
+// src/components/Menu/MenuButton/MenuButton.tsx
 import { jsx as jsx59 } from "react/jsx-runtime";
-var Menu = HeadlessMenu;
-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__ */ jsx59(
-    HeadlessMenuButton,
-    __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__ */ jsx59(
-    HeadlessMenuItems,
-    __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
+import { useEffect as useEffect11, useRef as useRef13 } from "react";
+import { jsx as jsx60 } from "react/jsx-runtime";
+var MenuPanel = ({ children, className }) => {
+  const {
+    open,
+    disabled,
+    closeMenu,
+    menuRef,
+    floating: { refs, floatingStyles }
+  } = useMenu();
+  const panelRef = useRef13(null);
+  useEffect11(() => {
+    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__ */ jsx60(
+    "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__ */ jsx60("div", { className: "GeckoUIMenu__scroll-container", children })
+    }
   );
 };
-var MenuItem = (_a) => {
-  var _b = _a, { children, as } = _b, rest = __objRest(_b, ["children", "as"]);
-  return /* @__PURE__ */ jsx59(
-    HeadlessMenuItem,
-    __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
+import { jsx as jsx61, jsxs as jsxs33 } from "react/jsx-runtime";
+var Menu = ({
+  label,
+  disabled = false,
+  placement = "bottom-start",
+  floatingStrategy,
+  className,
+  menuClassName,
+  buttonClassName,
+  children
+}) => {
+  const menuRef = useRef14(null);
+  const [open, setOpen] = useState13(false);
+  const floating = useFloating5({
+    placement,
+    strategy: floatingStrategy,
+    middleware: [flip5({ padding: 6 }), offset5({ mainAxis: 6 })],
+    whileElementsMounted: autoUpdate4,
+    open,
+    onOpenChange: setOpen
+  });
+  const { refs } = floating;
+  const openMenu = useCallback4(() => {
+    if (disabled || open) return;
+    setOpen(true);
+  }, [disabled, open]);
+  const closeMenu = useCallback4(() => {
+    setOpen(false);
+  }, []);
+  const toggleMenu = useCallback4(() => {
+    if (open) {
+      closeMenu();
+    } else {
+      openMenu();
+    }
+  }, [open, openMenu, closeMenu]);
+  useClickOutside_default(() => {
+    closeMenu();
+  }, [refs.reference]);
+  const childArray = Children5.toArray(children);
+  const trigger = childArray.find(isMenuTrigger);
+  const menuItems = childArray.filter((el) => !isMenuTrigger(el));
+  return /* @__PURE__ */ jsx61(
+    MenuContext.Provider,
+    {
+      value: {
+        open,
+        setOpen,
+        floating,
+        openMenu,
+        closeMenu,
+        toggleMenu,
+        disabled,
+        menuRef
       },
-      as: as != null ? as : "button",
-      type: "button",
-      children
-    })
+      children: /* @__PURE__ */ jsxs33("div", { className: classNames("GeckoUIMenu", className), ref: (r) => refs.setReference(r), children: [
+        trigger != null ? trigger : /* @__PURE__ */ jsx61(MenuButton_default, { className: buttonClassName, children: label != null ? label : "Menu" }),
+        /* @__PURE__ */ jsx61(MenuPanel_default, { className: menuClassName, children: menuItems })
+      ] })
+    }
   );
 };
-var MenuHeading = HeadlessMenuHeading;
-var MenuSection = HeadlessMenuSection;
-var MenuSeparator = HeadlessMenuSeparator;
+Menu.displayName = "Menu";
+var Menu_default = Menu;
 
-// src/components/Dropdown/Dropdown.tsx
-import { Fragment as Fragment12, jsx as jsx60, jsxs as jsxs32 } from "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
+import { jsx as jsx62 } from "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__ */ jsxs32(Menu, { children: [
-    /* @__PURE__ */ jsxs32(
-      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__ */ jsx60("span", { className: classNames("GeckoUIDropdown__icon", iconClassName) })
-        ]
-      })
-    ),
-    /* @__PURE__ */ jsx60(
-      MenuItems,
-      {
-        className: classNames("GeckoUIDropdown__menu", menuClassName),
-        anchor: anchor || "bottom start",
-        children: () => {
-          return /* @__PURE__ */ jsx60(Fragment12, { children: items.map((item, index) => {
-            const label = createLabel_default(item);
-            return /* @__PURE__ */ jsx60(
-              MenuItem,
-              __spreadProps(__spreadValues({}, dataAttributes), {
-                className: classNames("GeckoUIDropdown__menu-item", item.className),
-                onClick: item.onClick,
-                children: /* @__PURE__ */ jsx60(DynamicComponentRenderer_default, { component: label })
-              }),
-              index
-            );
-          }) });
-        }
-      }
-    )
-  ] });
-}
-Dropdown.displayName = "Dropdown";
-var Dropdown_default = Dropdown;
+  };
+  return /* @__PURE__ */ jsx62(
+    "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;
 export {
   Alert_default as Alert,
   BaseDateRangeInput_default as BaseDateRangeInput,
@@ -5361,20 +5344,15 @@ export {
   DateRangeInput_default as DateRangeInput,
   Dialog_default as Dialog,
   Drawer_default as Drawer,
-  Dropdown_default as Dropdown,
   FilePicker_default as FilePicker,
   GeckoUIPortal_default as GeckoUIPortal,
   Input_default as Input,
   InputError_default as InputError,
   Label_default as Label,
   LoadingButton_default as LoadingButton,
-  Menu,
-  MenuButton,
-  MenuHeading,
-  MenuItem,
-  MenuItems,
-  MenuSection,
-  MenuSeparator,
+  Menu_default as Menu,
+  MenuItem_default as MenuItem,
+  MenuTrigger_default as MenuTrigger,
   OTPInput_default as OTPInput,
   Pagination_default as Pagination,
   RHFCheckbox_default as RHFCheckbox,
@@ -5415,6 +5393,7 @@ export {
   useClickOutside_default as useClickOutside,
   useEscListener_default as useEscListener,
   useFilePicker_default as useFilePicker,
+  useMenu,
   usePreventDefault_default as usePreventDefault,
   useSelect
 };