@tonyarbor/components 0.1.0 → 0.2.1

package/dist/index.js

@@ -30,10 +30,25 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  Banner: () => Banner,
   Button: () => Button,
   Card: () => Card,
+  Checkbox: () => Checkbox,
+  Combobox: () => Combobox,
+  DatePicker: () => DatePicker,
   Input: () => Input,
-  Tag: () => Tag
+  NumericInput: () => NumericInput,
+  Pagination: () => Pagination,
+  Radio: () => Radio,
+  Table: () => Table,
+  TableControls: () => TableControls,
+  TableFooterPagination: () => TableFooterPagination,
+  Tabs: () => Tabs,
+  Tag: () => Tag,
+  TextArea: () => TextArea,
+  Toast: () => Toast,
+  Toggle: () => Toggle,
+  Tooltip: () => Tooltip
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -500,11 +515,3553 @@ var Tag = React4.forwardRef(
   }
 );
 Tag.displayName = "Tag";
+
+// src/Combobox/Combobox.tsx
+var React5 = __toESM(require("react"));
+var import_clsx5 = require("clsx");
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var comboboxStyles = {
+  base: {
+    width: "100%",
+    height: "36px",
+    fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+    backgroundColor: "#ffffff",
+    borderRadius: "8px",
+    transition: "all 0.2s ease-in-out",
+    outline: "none",
+    fontSize: "13px",
+    padding: "8px",
+    paddingRight: "32px",
+    margin: "0",
+    display: "flex",
+    alignItems: "center",
+    cursor: "pointer",
+    position: "relative"
+  },
+  states: {
+    default: {
+      border: "1px solid #d1d1d1",
+      // grey-300
+      color: "#2f2f2f"
+      // grey-900
+    },
+    defaultFocus: {
+      borderColor: "#3cad51",
+      // brand-500
+      outline: "3px solid rgba(60, 173, 81, 0.2)"
+    },
+    error: {
+      border: "1px solid #c93232",
+      // destructive-500
+      color: "#2f2f2f"
+    },
+    errorFocus: {
+      borderColor: "#c93232",
+      outline: "3px solid rgba(201, 50, 50, 0.2)"
+    },
+    success: {
+      border: "1px solid #16a33d",
+      // success-500
+      color: "#2f2f2f"
+    },
+    successFocus: {
+      borderColor: "#16a33d",
+      outline: "3px solid rgba(22, 163, 61, 0.2)"
+    },
+    disabled: {
+      backgroundColor: "#f8f8f8",
+      // grey-050
+      borderColor: "#efefef",
+      // grey-100
+      color: "#7e7e7e",
+      // grey-500
+      cursor: "not-allowed"
+    }
+  }
+};
+var labelStyles2 = {
+  display: "block",
+  fontSize: "13px",
+  fontWeight: "600",
+  color: "#2f2f2f",
+  marginBottom: "4px",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+};
+var helperTextStyles2 = {
+  fontSize: "13px",
+  margin: "0",
+  marginTop: "2px",
+  color: "#595959",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+  lineHeight: "1.4"
+};
+var errorTextStyles2 = {
+  ...helperTextStyles2,
+  color: "#a62323",
+  // destructive-600
+  display: "flex",
+  alignItems: "center",
+  gap: "4px"
+};
+var dropdownStyles = {
+  position: "absolute",
+  top: "calc(100% + 4px)",
+  left: "0",
+  right: "0",
+  backgroundColor: "#ffffff",
+  border: "1px solid #d1d1d1",
+  borderRadius: "8px",
+  maxHeight: "200px",
+  overflowY: "auto",
+  boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
+  zIndex: 1e3
+};
+var optionStyles = {
+  padding: "8px 12px",
+  fontSize: "13px",
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+  color: "#2f2f2f"
+  // grey-900
+};
+var Combobox = React5.forwardRef(
+  ({
+    label,
+    placeholder = "default-text",
+    options,
+    value,
+    onChange,
+    state = "default",
+    error,
+    helperText,
+    disabled = false,
+    className,
+    style,
+    "data-testid": dataTestId
+  }, ref) => {
+    const [isOpen, setIsOpen] = React5.useState(false);
+    const [searchQuery, setSearchQuery] = React5.useState("");
+    const [isFocused, setIsFocused] = React5.useState(false);
+    const inputRef = React5.useRef(null);
+    const dropdownRef = React5.useRef(null);
+    const wrapperRef = React5.useRef(null);
+    const comboboxId = React5.useId();
+    const helperTextId = React5.useId();
+    const errorId = React5.useId();
+    const selectedOption = options.find((opt) => opt.value === value);
+    const filteredOptions = React5.useMemo(() => {
+      if (!searchQuery) return options;
+      return options.filter(
+        (option) => option.label.toLowerCase().includes(searchQuery.toLowerCase())
+      );
+    }, [options, searchQuery]);
+    React5.useEffect(() => {
+      const handleClickOutside = (event) => {
+        if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+          setIsOpen(false);
+          setSearchQuery("");
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+    const handleInputChange = (e) => {
+      setSearchQuery(e.target.value);
+      if (!isOpen) setIsOpen(true);
+    };
+    const handleSelectOption = (optionValue) => {
+      onChange?.(optionValue);
+      setIsOpen(false);
+      setSearchQuery("");
+      inputRef.current?.blur();
+    };
+    const handleClear = (e) => {
+      e.stopPropagation();
+      onChange?.(void 0);
+      setSearchQuery("");
+      inputRef.current?.focus();
+    };
+    const handleInputFocus = () => {
+      setIsFocused(true);
+      if (!disabled) setIsOpen(true);
+    };
+    const handleInputBlur = () => {
+      setIsFocused(false);
+      setTimeout(() => {
+        if (!wrapperRef.current?.contains(document.activeElement)) {
+          setSearchQuery("");
+        }
+      }, 200);
+    };
+    const currentState = error ? "error" : state;
+    const stateStyles = comboboxStyles.states[currentState];
+    const focusStyles = currentState === "error" ? comboboxStyles.states.errorFocus : currentState === "success" ? comboboxStyles.states.successFocus : comboboxStyles.states.defaultFocus;
+    const inputWrapperStyle = {
+      ...comboboxStyles.base,
+      ...stateStyles,
+      ...isFocused && !disabled && focusStyles,
+      ...disabled && comboboxStyles.states.disabled
+    };
+    const displayValue = selectedOption ? selectedOption.label : "";
+    const showPlaceholder = !selectedOption && !searchQuery && !isFocused;
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_clsx5.clsx)("arbor-combobox-wrapper", className), style, ref: wrapperRef, "data-testid": dataTestId, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { htmlFor: comboboxId, style: labelStyles2, children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { position: "relative" }, ref, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: inputWrapperStyle, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "input",
+            {
+              ref: inputRef,
+              id: comboboxId,
+              type: "text",
+              value: searchQuery || displayValue,
+              onChange: handleInputChange,
+              onFocus: handleInputFocus,
+              onBlur: handleInputBlur,
+              placeholder: showPlaceholder ? placeholder : "",
+              disabled,
+              "aria-invalid": error ? "true" : "false",
+              "aria-describedby": error ? errorId : helperText ? helperTextId : void 0,
+              "aria-expanded": isOpen,
+              "aria-autocomplete": "list",
+              role: "combobox",
+              style: {
+                border: "none",
+                outline: "none",
+                background: "transparent",
+                flex: 1,
+                fontSize: "13px",
+                padding: 0,
+                margin: 0,
+                color: showPlaceholder ? "#7e7e7e" : "#2f2f2f",
+                fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "4px", position: "absolute", right: "8px" }, children: [
+            selectedOption && !disabled && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: handleClear,
+                style: {
+                  border: "none",
+                  background: "transparent",
+                  padding: "2px",
+                  cursor: "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  color: "#7e7e7e"
+                },
+                "aria-label": "Clear selection",
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react.X, { size: 16 })
+              }
+            ),
+            currentState === "success" && !isOpen && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react.Check, { size: 16, color: "#16a33d" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              import_lucide_react.ChevronDown,
+              {
+                size: 16,
+                color: "#7e7e7e",
+                style: {
+                  transform: isOpen ? "rotate(180deg)" : "rotate(0deg)",
+                  transition: "transform 0.2s"
+                }
+              }
+            )
+          ] })
+        ] }),
+        isOpen && !disabled && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: dropdownRef, style: dropdownStyles, children: filteredOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { ...optionStyles, color: "#7e7e7e", cursor: "default" }, children: "No options found" }) : filteredOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "div",
+          {
+            onClick: () => handleSelectOption(option.value),
+            onMouseDown: (e) => e.preventDefault(),
+            style: {
+              ...optionStyles,
+              backgroundColor: option.value === value ? "#f8f8f8" : "transparent"
+            },
+            onMouseEnter: (e) => {
+              e.currentTarget.style.backgroundColor = "#f8f8f8";
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.backgroundColor = option.value === value ? "#f8f8f8" : "transparent";
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: option.label }),
+              option.value === value && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react.Check, { size: 16, color: "#16a33d" })
+            ]
+          },
+          option.value
+        )) })
+      ] }),
+      error && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { id: errorId, style: errorTextStyles2, role: "alert", children: error }),
+      !error && helperText && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { id: helperTextId, style: helperTextStyles2, children: helperText })
+    ] });
+  }
+);
+Combobox.displayName = "Combobox";
+
+// src/NumericInput/NumericInput.tsx
+var React6 = __toESM(require("react"));
+var import_clsx6 = require("clsx");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var labelStyles3 = {
+  display: "block",
+  fontSize: "13px",
+  fontWeight: "600",
+  color: "#2f2f2f",
+  marginBottom: "4px",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+};
+var helperTextStyles3 = {
+  fontSize: "13px",
+  margin: "0",
+  marginTop: "2px",
+  color: "#595959",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+  lineHeight: "1.4"
+};
+var errorTextStyles3 = {
+  ...helperTextStyles3,
+  color: "#a62323",
+  // destructive-600
+  display: "flex",
+  alignItems: "center",
+  gap: "4px"
+};
+var containerStyles = {
+  base: {
+    display: "flex",
+    alignItems: "center",
+    height: "46px",
+    fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+    backgroundColor: "#ffffff",
+    borderRadius: "8px",
+    transition: "all 0.2s ease-in-out",
+    overflow: "hidden"
+  },
+  states: {
+    default: {
+      border: "1px solid #d1d1d1"
+      // grey-300
+    },
+    defaultFocus: {
+      borderColor: "#3cad51",
+      // brand-500
+      outline: "3px solid rgba(60, 173, 81, 0.2)"
+    },
+    error: {
+      border: "1px solid #c93232"
+      // destructive-500
+    },
+    errorFocus: {
+      borderColor: "#c93232",
+      outline: "3px solid rgba(201, 50, 50, 0.2)"
+    },
+    success: {
+      border: "1px solid #16a33d"
+      // success-500
+    },
+    successFocus: {
+      borderColor: "#16a33d",
+      outline: "3px solid rgba(22, 163, 61, 0.2)"
+    },
+    disabled: {
+      backgroundColor: "#f8f8f8",
+      // grey-050
+      borderColor: "#efefef",
+      // grey-100
+      cursor: "not-allowed"
+    }
+  }
+};
+var buttonStyles2 = {
+  width: "46px",
+  height: "100%",
+  border: "none",
+  background: "transparent",
+  cursor: "pointer",
+  fontSize: "16px",
+  color: "#2f2f2f",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  transition: "background-color 0.2s",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+  userSelect: "none"
+};
+var inputStyles2 = {
+  flex: 1,
+  border: "none",
+  outline: "none",
+  background: "transparent",
+  textAlign: "center",
+  fontSize: "13px",
+  color: "#2f2f2f",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+  padding: "0 8px",
+  appearance: "textfield"
+};
+var NumericInput = React6.forwardRef(
+  ({
+    label,
+    value,
+    onChange,
+    min,
+    max,
+    step = 1,
+    state = "default",
+    error,
+    helperText,
+    disabled = false,
+    className,
+    style,
+    "data-testid": dataTestId
+  }, ref) => {
+    const [isFocused, setIsFocused] = React6.useState(false);
+    const inputRef = React6.useRef(null);
+    const inputId = React6.useId();
+    const helperTextId = React6.useId();
+    const errorId = React6.useId();
+    const clampValue = (val) => {
+      let clamped = val;
+      if (min !== void 0 && clamped < min) clamped = min;
+      if (max !== void 0 && clamped > max) clamped = max;
+      return clamped;
+    };
+    const handleIncrement = () => {
+      if (disabled) return;
+      const currentValue = value ?? 0;
+      const newValue = currentValue + step;
+      const clampedValue = clampValue(newValue);
+      if (clampedValue !== currentValue) {
+        onChange?.(clampedValue);
+      }
+    };
+    const handleDecrement = () => {
+      if (disabled) return;
+      const currentValue = value ?? 0;
+      const newValue = currentValue - step;
+      const clampedValue = clampValue(newValue);
+      if (clampedValue !== currentValue) {
+        onChange?.(clampedValue);
+      }
+    };
+    const handleInputChange = (e) => {
+      const inputValue = e.target.value;
+      if (inputValue === "" || inputValue === "-") {
+        onChange?.(void 0);
+        return;
+      }
+      const numValue = parseFloat(inputValue);
+      if (!isNaN(numValue)) {
+        const clampedValue = clampValue(numValue);
+        onChange?.(clampedValue);
+      }
+    };
+    const handleKeyDown = (e) => {
+      const allowedKeys = ["Backspace", "Delete", "Tab", "Escape", "Enter", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "-", "."];
+      if (allowedKeys.includes(e.key)) {
+        if (e.key === "ArrowUp") {
+          e.preventDefault();
+          handleIncrement();
+        } else if (e.key === "ArrowDown") {
+          e.preventDefault();
+          handleDecrement();
+        }
+        return;
+      }
+      if (!/^[0-9]$/.test(e.key)) {
+        e.preventDefault();
+      }
+    };
+    const currentState = error ? "error" : state;
+    const stateStyles = containerStyles.states[currentState];
+    const focusStyles = currentState === "error" ? containerStyles.states.errorFocus : currentState === "success" ? containerStyles.states.successFocus : containerStyles.states.defaultFocus;
+    const containerStyle = {
+      ...containerStyles.base,
+      ...stateStyles,
+      ...isFocused && !disabled && focusStyles,
+      ...disabled && containerStyles.states.disabled
+    };
+    const isDecrementDisabled = disabled || min !== void 0 && value !== void 0 && value <= min;
+    const isIncrementDisabled = disabled || max !== void 0 && value !== void 0 && value >= max;
+    const getButtonStyle = (isDisabled) => {
+      const baseStyle = {
+        ...buttonStyles2,
+        cursor: isDisabled ? "not-allowed" : "pointer",
+        color: isDisabled ? "#7e7e7e" : "#2f2f2f"
+      };
+      if (currentState === "success" && !isDisabled) {
+        return {
+          ...baseStyle,
+          color: "#16a33d",
+          // success-500
+          border: "2px solid #16a33d",
+          borderRadius: "50%",
+          width: "32px",
+          height: "32px"
+        };
+      }
+      return baseStyle;
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: (0, import_clsx6.clsx)("arbor-numeric-input-wrapper", className), style, ref, "data-testid": dataTestId, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("label", { htmlFor: inputId, style: labelStyles3, children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: containerStyle, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: handleDecrement,
+            disabled: isDecrementDisabled,
+            style: getButtonStyle(isDecrementDisabled),
+            onMouseEnter: (e) => {
+              if (!isDecrementDisabled) {
+                e.currentTarget.style.backgroundColor = "#f8f8f8";
+                e.currentTarget.style.borderRadius = "99px";
+              }
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.backgroundColor = "transparent";
+              e.currentTarget.style.borderRadius = currentState === "success" ? "50%" : "0";
+            },
+            "aria-label": "Decrement",
+            children: "\u2212"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "input",
+          {
+            ref: inputRef,
+            id: inputId,
+            type: "text",
+            inputMode: "numeric",
+            value: value !== void 0 ? value : "",
+            onChange: handleInputChange,
+            onKeyDown: handleKeyDown,
+            onFocus: () => setIsFocused(true),
+            onBlur: () => setIsFocused(false),
+            disabled,
+            "aria-invalid": error ? "true" : "false",
+            "aria-describedby": error ? errorId : helperText ? helperTextId : void 0,
+            style: {
+              ...inputStyles2,
+              color: disabled ? "#7e7e7e" : "#2f2f2f",
+              cursor: disabled ? "not-allowed" : "text"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: handleIncrement,
+            disabled: isIncrementDisabled,
+            style: getButtonStyle(isIncrementDisabled),
+            onMouseEnter: (e) => {
+              if (!isIncrementDisabled) {
+                e.currentTarget.style.backgroundColor = "#f8f8f8";
+                e.currentTarget.style.borderRadius = "99px";
+              }
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.backgroundColor = "transparent";
+              e.currentTarget.style.borderRadius = currentState === "success" ? "50%" : "0";
+            },
+            "aria-label": "Increment",
+            children: "+"
+          }
+        )
+      ] }),
+      error && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { id: errorId, style: errorTextStyles3, children: error }),
+      helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { id: helperTextId, style: helperTextStyles3, children: helperText })
+    ] });
+  }
+);
+NumericInput.displayName = "NumericInput";
+
+// src/Checkbox/Checkbox.tsx
+var React7 = __toESM(require("react"));
+var import_clsx7 = require("clsx");
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var checkboxStyles = {
+  width: "16px",
+  height: "16px",
+  border: "1px solid #7e7e7e",
+  // grey-500
+  borderRadius: "4px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  cursor: "pointer",
+  transition: "all 0.2s ease-in-out",
+  flexShrink: 0,
+  backgroundColor: "#ffffff"
+};
+var checkedStyles = {
+  backgroundColor: "#0e8a0e",
+  // brand-600
+  border: "1px solid #0e8a0e"
+};
+var checkedHoverStyles = {
+  backgroundColor: "#005700",
+  // brand-800
+  border: "1px solid #005700"
+};
+var uncheckedHoverStyles = {
+  border: "1px solid #474747"
+  // grey-700
+};
+var labelStyles4 = {
+  fontSize: "13px",
+  color: "#2f2f2f",
+  cursor: "pointer",
+  userSelect: "none",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+};
+var wrapperStyles = {
+  display: "flex",
+  alignItems: "center",
+  gap: "8px"
+};
+var Checkbox = React7.forwardRef(
+  ({
+    label,
+    checked = false,
+    onChange,
+    disabled = false,
+    className,
+    style,
+    "data-testid": dataTestId,
+    name,
+    value,
+    indeterminate = false
+  }, ref) => {
+    const [isFocused, setIsFocused] = React7.useState(false);
+    const [isHovered, setIsHovered] = React7.useState(false);
+    const checkboxId = React7.useId();
+    const innerRef = React7.useRef(null);
+    React7.useEffect(() => {
+      const node = innerRef.current;
+      if (node) {
+        node.indeterminate = indeterminate;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      }
+    }, [indeterminate, ref]);
+    const handleChange = (e) => {
+      if (!disabled) {
+        onChange?.(e.target.checked);
+      }
+    };
+    const boxStyle = {
+      ...checkboxStyles,
+      ...(checked || indeterminate) && !disabled && checkedStyles,
+      ...isHovered && !disabled && !(checked || indeterminate) && uncheckedHoverStyles,
+      ...isHovered && !disabled && (checked || indeterminate) && checkedHoverStyles,
+      ...disabled && !checked && !indeterminate && { backgroundColor: "#efefef", border: "1px solid #b3b3b3" },
+      ...disabled && (checked || indeterminate) && { backgroundColor: "#b3b3b3", border: "1px solid #b3b3b3" },
+      ...isFocused && !disabled && {
+        boxShadow: "0px 0px 0px 3px #3cad51"
+      }
+    };
+    const checkmarkColor = "#ffffff";
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "div",
+      {
+        className: (0, import_clsx7.clsx)("arbor-checkbox-wrapper", className),
+        style: { ...wrapperStyles, ...style },
+        "data-testid": dataTestId,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "input",
+            {
+              ref: innerRef,
+              id: checkboxId,
+              type: "checkbox",
+              checked,
+              onChange: handleChange,
+              onFocus: () => setIsFocused(true),
+              onBlur: () => setIsFocused(false),
+              disabled,
+              name,
+              value,
+              style: {
+                position: "absolute",
+                opacity: 0,
+                width: 0,
+                height: 0
+              },
+              "aria-checked": indeterminate ? "mixed" : checked
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+            "label",
+            {
+              htmlFor: checkboxId,
+              onMouseEnter: () => !disabled && setIsHovered(true),
+              onMouseLeave: () => !disabled && setIsHovered(false),
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "8px",
+                cursor: disabled ? "not-allowed" : "pointer"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: boxStyle, children: (checked || indeterminate) && (indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.Minus, { size: 12, color: checkmarkColor, strokeWidth: 3 }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.Check, { size: 16, color: checkmarkColor, strokeWidth: 3 })) }),
+                label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  "span",
+                  {
+                    style: {
+                      ...labelStyles4,
+                      color: disabled ? "#7e7e7e" : "#2f2f2f",
+                      cursor: disabled ? "not-allowed" : "pointer"
+                    },
+                    children: label
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+// src/Radio/Radio.tsx
+var React8 = __toESM(require("react"));
+var import_clsx8 = require("clsx");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var radioStyles = {
+  width: "16px",
+  height: "16px",
+  border: "1px solid #7e7e7e",
+  // grey-500
+  borderRadius: "50%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  cursor: "pointer",
+  transition: "all 0.2s ease-in-out",
+  flexShrink: 0,
+  backgroundColor: "#ffffff"
+};
+var checkedStyles2 = {
+  border: "1px solid #0e8a0e"
+  // brand-600
+};
+var checkedHoverStyles2 = {
+  border: "1px solid #005700"
+  // brand-800
+};
+var uncheckedHoverStyles2 = {
+  border: "1px solid #2f2f2f"
+  // grey-900
+};
+var innerDotStyles = {
+  width: "10px",
+  height: "10px",
+  borderRadius: "50%",
+  backgroundColor: "#0e8a0e",
+  // brand-600
+  transition: "all 0.2s ease-in-out"
+};
+var innerDotHoverStyles = {
+  backgroundColor: "#005700"
+  // brand-800
+};
+var labelStyles5 = {
+  fontSize: "13px",
+  color: "#2f2f2f",
+  cursor: "pointer",
+  userSelect: "none",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+};
+var wrapperStyles2 = {
+  display: "flex",
+  alignItems: "center",
+  gap: "8px"
+};
+var Radio = React8.forwardRef(
+  ({
+    label,
+    checked = false,
+    onChange,
+    disabled = false,
+    className,
+    style,
+    "data-testid": dataTestId,
+    name,
+    value
+  }, ref) => {
+    const [isFocused, setIsFocused] = React8.useState(false);
+    const [isHovered, setIsHovered] = React8.useState(false);
+    const radioId = React8.useId();
+    const handleChange = (e) => {
+      if (!disabled) {
+        onChange?.(e.target.checked);
+      }
+    };
+    const circleStyle = {
+      ...radioStyles,
+      ...checked && !disabled && checkedStyles2,
+      ...isHovered && !disabled && !checked && uncheckedHoverStyles2,
+      ...isHovered && !disabled && checked && checkedHoverStyles2,
+      ...disabled && !checked && { backgroundColor: "#efefef", border: "1px solid #7e7e7e" },
+      ...disabled && checked && { backgroundColor: "#efefef", border: "1px solid #7e7e7e" },
+      ...isFocused && !disabled && {
+        boxShadow: "0px 0px 0px 3px #3cad51"
+      }
+    };
+    const dotStyle = {
+      ...innerDotStyles,
+      ...isHovered && !disabled && innerDotHoverStyles,
+      ...disabled && { backgroundColor: "#7e7e7e" }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      "div",
+      {
+        className: (0, import_clsx8.clsx)("arbor-radio-wrapper", className),
+        style: { ...wrapperStyles2, ...style },
+        "data-testid": dataTestId,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "input",
+            {
+              ref,
+              id: radioId,
+              type: "radio",
+              checked,
+              onChange: handleChange,
+              onFocus: () => setIsFocused(true),
+              onBlur: () => setIsFocused(false),
+              disabled,
+              name,
+              value,
+              style: {
+                position: "absolute",
+                opacity: 0,
+                width: 0,
+                height: 0
+              },
+              "aria-checked": checked
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+            "label",
+            {
+              htmlFor: radioId,
+              onMouseEnter: () => !disabled && setIsHovered(true),
+              onMouseLeave: () => !disabled && setIsHovered(false),
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "8px",
+                cursor: disabled ? "not-allowed" : "pointer"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: circleStyle, children: checked && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: dotStyle }) }),
+                label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  "span",
+                  {
+                    style: {
+                      ...labelStyles5,
+                      color: disabled ? "#7e7e7e" : "#2f2f2f",
+                      cursor: disabled ? "not-allowed" : "pointer"
+                    },
+                    children: label
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Radio.displayName = "Radio";
+
+// src/DatePicker/DatePicker.tsx
+var React9 = __toESM(require("react"));
+var import_clsx9 = require("clsx");
+var Popover = __toESM(require("@radix-ui/react-popover"));
+var import_lucide_react3 = require("lucide-react");
+var import_date_fns = require("date-fns");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var wrapperStyles3 = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "4px"
+};
+var labelStyles6 = {
+  fontSize: "11px",
+  fontWeight: 600,
+  color: "#2f2f2f",
+  textTransform: "uppercase",
+  letterSpacing: "0.5px",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+};
+var inputContainerStyles = {
+  position: "relative",
+  display: "flex",
+  alignItems: "center"
+};
+var inputStyles3 = {
+  width: "100%",
+  height: "36px",
+  padding: "0 36px 0 12px",
+  fontSize: "13px",
+  border: "1px solid #d1d1d1",
+  borderRadius: "8px",
+  outline: "none",
+  transition: "all 0.2s ease-in-out",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+  backgroundColor: "#ffffff",
+  color: "#2f2f2f"
+};
+var iconButtonStyles = {
+  position: "absolute",
+  right: "8px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: "4px",
+  cursor: "pointer",
+  color: "#595959",
+  backgroundColor: "transparent",
+  border: "none"
+};
+var helperTextStyles4 = {
+  fontSize: "11px",
+  color: "#595959",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+};
+var calendarPopoverStyles = {
+  backgroundColor: "#ffffff",
+  border: "1px solid #efefef",
+  borderRadius: "8px",
+  padding: "16px",
+  boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
+  minWidth: "320px",
+  zIndex: 1e3
+};
+var calendarHeaderStyles = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  marginBottom: "16px",
+  gap: "8px"
+};
+var monthYearContainerStyles = {
+  display: "flex",
+  gap: "8px",
+  flex: 1
+};
+var selectStyles = {
+  padding: "6px 8px",
+  fontSize: "13px",
+  border: "1px solid #d1d1d1",
+  borderRadius: "6px",
+  backgroundColor: "#ffffff",
+  color: "#2f2f2f",
+  cursor: "pointer",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+  outline: "none"
+};
+var navButtonStyles = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "28px",
+  height: "28px",
+  border: "none",
+  backgroundColor: "transparent",
+  cursor: "pointer",
+  borderRadius: "4px",
+  color: "#2f2f2f",
+  transition: "background-color 0.2s"
+};
+var weekDaysStyles = {
+  display: "grid",
+  gridTemplateColumns: "repeat(7, 1fr)",
+  gap: "4px",
+  marginBottom: "8px"
+};
+var weekDayStyles = {
+  fontSize: "11px",
+  fontWeight: 600,
+  color: "#7e7e7e",
+  textAlign: "center",
+  padding: "4px",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+};
+var daysGridStyles = {
+  display: "grid",
+  gridTemplateColumns: "repeat(7, 1fr)",
+  gap: "4px"
+};
+var dayButtonStyles = {
+  width: "36px",
+  height: "36px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  border: "none",
+  backgroundColor: "transparent",
+  borderRadius: "50%",
+  cursor: "pointer",
+  fontSize: "13px",
+  color: "#2f2f2f",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+  transition: "all 0.2s"
+};
+var footerStyles = {
+  display: "flex",
+  justifyContent: "flex-end",
+  marginTop: "12px",
+  paddingTop: "12px",
+  borderTop: "1px solid #efefef"
+};
+var todayButtonStyles = {
+  padding: "6px 12px",
+  fontSize: "13px",
+  fontWeight: 500,
+  color: "#16a33d",
+  backgroundColor: "transparent",
+  border: "none",
+  cursor: "pointer",
+  borderRadius: "6px",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+  transition: "background-color 0.2s"
+};
+var MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+var WEEKDAYS = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
+var DatePicker = React9.forwardRef(
+  ({
+    value,
+    onChange,
+    label,
+    placeholder = "DD/MM/YYYY",
+    helperText,
+    error,
+    state = "default",
+    disabled = false,
+    className,
+    style,
+    "data-testid": dataTestId,
+    minDate,
+    maxDate,
+    dateFormat = "dd/MM/yyyy"
+  }, ref) => {
+    const [open, setOpen] = React9.useState(false);
+    const [inputValue, setInputValue] = React9.useState("");
+    const [viewDate, setViewDate] = React9.useState(value || /* @__PURE__ */ new Date());
+    const inputId = React9.useId();
+    React9.useEffect(() => {
+      if (value && (0, import_date_fns.isValid)(value)) {
+        setInputValue((0, import_date_fns.format)(value, dateFormat));
+      } else {
+        setInputValue("");
+      }
+    }, [value, dateFormat]);
+    React9.useEffect(() => {
+      if (value && (0, import_date_fns.isValid)(value)) {
+        setViewDate(value);
+      }
+    }, [value]);
+    const handleInputChange = (e) => {
+      const newValue = e.target.value;
+      setInputValue(newValue);
+      const parsedDate = (0, import_date_fns.parse)(newValue, dateFormat, /* @__PURE__ */ new Date());
+      if ((0, import_date_fns.isValid)(parsedDate)) {
+        onChange?.(parsedDate);
+        setViewDate(parsedDate);
+      }
+    };
+    const handleInputBlur = () => {
+      if (value && (0, import_date_fns.isValid)(value)) {
+        setInputValue((0, import_date_fns.format)(value, dateFormat));
+      } else if (!inputValue) {
+        onChange?.(void 0);
+      }
+    };
+    const handleDateSelect = (date) => {
+      onChange?.(date);
+      setOpen(false);
+    };
+    const handleTodayClick = () => {
+      const today = /* @__PURE__ */ new Date();
+      onChange?.(today);
+      setViewDate(today);
+      setOpen(false);
+    };
+    const handleMonthChange = (e) => {
+      const newMonth = parseInt(e.target.value, 10);
+      const newDate = new Date(viewDate);
+      newDate.setMonth(newMonth);
+      setViewDate(newDate);
+    };
+    const handleYearChange = (e) => {
+      const newYear = parseInt(e.target.value, 10);
+      const newDate = new Date(viewDate);
+      newDate.setFullYear(newYear);
+      setViewDate(newDate);
+    };
+    const handlePrevMonth = () => {
+      setViewDate((0, import_date_fns.subMonths)(viewDate, 1));
+    };
+    const handleNextMonth = () => {
+      setViewDate((0, import_date_fns.addMonths)(viewDate, 1));
+    };
+    const monthStart = (0, import_date_fns.startOfMonth)(viewDate);
+    const monthEnd = (0, import_date_fns.endOfMonth)(viewDate);
+    const startDate = (0, import_date_fns.startOfWeek)(monthStart, { weekStartsOn: 1 });
+    const endDate = (0, import_date_fns.endOfWeek)(monthEnd, { weekStartsOn: 1 });
+    const days = (0, import_date_fns.eachDayOfInterval)({ start: startDate, end: endDate });
+    const isDateDisabled = (date) => {
+      if (minDate && date < minDate) return true;
+      if (maxDate && date > maxDate) return true;
+      return false;
+    };
+    const currentYear = viewDate.getFullYear();
+    const yearOptions = Array.from({ length: 201 }, (_, i) => currentYear - 100 + i);
+    const currentState = error ? "error" : state;
+    const getInputStyles = () => {
+      const styles = { ...inputStyles3 };
+      if (disabled) {
+        styles.backgroundColor = "#f8f8f8";
+        styles.borderColor = "#efefef";
+        styles.color = "#7e7e7e";
+        styles.cursor = "not-allowed";
+      } else if (currentState === "error") {
+        styles.borderColor = "#e02f1d";
+      } else if (currentState === "success") {
+        styles.borderColor = "#16a33d";
+      }
+      return styles;
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      "div",
+      {
+        className: (0, import_clsx9.clsx)("arbor-datepicker-wrapper", className),
+        style: { ...wrapperStyles3, ...style },
+        "data-testid": dataTestId,
+        children: [
+          label && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { htmlFor: inputId, style: labelStyles6, children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Popover.Root, { open, onOpenChange: setOpen, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: inputContainerStyles, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                "input",
+                {
+                  ref,
+                  id: inputId,
+                  type: "text",
+                  value: inputValue,
+                  onChange: handleInputChange,
+                  onBlur: handleInputBlur,
+                  placeholder,
+                  disabled,
+                  style: getInputStyles(),
+                  "aria-label": label || "Date picker"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                "button",
+                {
+                  type: "button",
+                  style: {
+                    ...iconButtonStyles,
+                    cursor: disabled ? "not-allowed" : "pointer"
+                  },
+                  disabled,
+                  "aria-label": "Open calendar",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.Calendar, { size: 16 })
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+              Popover.Content,
+              {
+                align: "start",
+                sideOffset: 4,
+                style: calendarPopoverStyles,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: calendarHeaderStyles, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: handlePrevMonth,
+                        style: navButtonStyles,
+                        onMouseEnter: (e) => {
+                          e.currentTarget.style.backgroundColor = "#f8f8f8";
+                        },
+                        onMouseLeave: (e) => {
+                          e.currentTarget.style.backgroundColor = "transparent";
+                        },
+                        "aria-label": "Previous month",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.ChevronLeft, { size: 16 })
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: monthYearContainerStyles, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                        "select",
+                        {
+                          value: viewDate.getMonth(),
+                          onChange: handleMonthChange,
+                          style: selectStyles,
+                          "aria-label": "Select month",
+                          children: MONTHS.map((month, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: index, children: month }, month))
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                        "select",
+                        {
+                          value: viewDate.getFullYear(),
+                          onChange: handleYearChange,
+                          style: selectStyles,
+                          "aria-label": "Select year",
+                          children: yearOptions.map((year) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: year, children: year }, year))
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: handleNextMonth,
+                        style: navButtonStyles,
+                        onMouseEnter: (e) => {
+                          e.currentTarget.style.backgroundColor = "#f8f8f8";
+                        },
+                        onMouseLeave: (e) => {
+                          e.currentTarget.style.backgroundColor = "transparent";
+                        },
+                        "aria-label": "Next month",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.ChevronRight, { size: 16 })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: weekDaysStyles, children: WEEKDAYS.map((day) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: weekDayStyles, children: day }, day)) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: daysGridStyles, children: days.map((day) => {
+                    const isCurrentMonth = day.getMonth() === viewDate.getMonth();
+                    const isSelected = value && (0, import_date_fns.isSameDay)(day, value);
+                    const isTodayDate = (0, import_date_fns.isToday)(day);
+                    const isDayDisabled = isDateDisabled(day);
+                    const getDayButtonStyles = () => {
+                      const styles = { ...dayButtonStyles };
+                      if (!isCurrentMonth) {
+                        styles.color = "#d1d1d1";
+                      }
+                      if (isDayDisabled) {
+                        styles.color = "#d1d1d1";
+                        styles.cursor = "not-allowed";
+                      }
+                      if (isSelected) {
+                        styles.backgroundColor = "#3cad51";
+                        styles.color = "#ffffff";
+                      } else if (isTodayDate && !isDayDisabled) {
+                        styles.fontWeight = 600;
+                        styles.color = "#16a33d";
+                      }
+                      return styles;
+                    };
+                    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => !isDayDisabled && handleDateSelect(day),
+                        disabled: isDayDisabled,
+                        style: getDayButtonStyles(),
+                        onMouseEnter: (e) => {
+                          if (!isSelected && !isDayDisabled && isCurrentMonth) {
+                            e.currentTarget.style.backgroundColor = "#f8f8f8";
+                          }
+                        },
+                        onMouseLeave: (e) => {
+                          if (!isSelected) {
+                            e.currentTarget.style.backgroundColor = "transparent";
+                          }
+                        },
+                        "aria-label": (0, import_date_fns.format)(day, "MMMM d, yyyy"),
+                        "aria-selected": isSelected,
+                        children: (0, import_date_fns.format)(day, "d")
+                      },
+                      day.toISOString()
+                    );
+                  }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: footerStyles, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: handleTodayClick,
+                      style: todayButtonStyles,
+                      onMouseEnter: (e) => {
+                        e.currentTarget.style.backgroundColor = "#f8f8f8";
+                      },
+                      onMouseLeave: (e) => {
+                        e.currentTarget.style.backgroundColor = "transparent";
+                      },
+                      children: "Today"
+                    }
+                  ) })
+                ]
+              }
+            ) })
+          ] }),
+          error && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { ...helperTextStyles4, color: "#e02f1d" }, children: error }),
+          !error && helperText && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: helperTextStyles4, children: helperText })
+        ]
+      }
+    );
+  }
+);
+DatePicker.displayName = "DatePicker";
+
+// src/Toast/Toast.tsx
+var React10 = __toESM(require("react"));
+var import_clsx10 = require("clsx");
+var import_lucide_react4 = require("lucide-react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var baseToastStyles = {
+  width: "360px",
+  padding: "16px",
+  borderRadius: "8px",
+  border: "1px solid",
+  display: "flex",
+  alignItems: "center",
+  gap: "12px",
+  boxShadow: "0px 4px 12px 0px rgba(32, 32, 32, 0.08)",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+};
+var messageStyles = {
+  fontSize: "13px",
+  fontWeight: 600,
+  flex: 1
+};
+var closeButtonStyles = {
+  width: "24px",
+  height: "24px",
+  borderRadius: "50%",
+  border: "none",
+  background: "transparent",
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0,
+  transition: "background-color 0.2s ease-in-out"
+};
+var variantConfig = {
+  information: {
+    backgroundColor: "#f5fbff",
+    borderColor: "#2c8bca",
+    textColor: "#053a61",
+    icon: import_lucide_react4.Info,
+    iconColor: "#2c8bca",
+    closeHoverBg: "#e0f3ff"
+  },
+  danger: {
+    backgroundColor: "#fff5f5",
+    borderColor: "#c93232",
+    textColor: "#610202",
+    icon: import_lucide_react4.AlertCircle,
+    iconColor: "#c93232",
+    closeHoverBg: "#ffe0e0"
+  },
+  warning: {
+    backgroundColor: "#fffaf5",
+    borderColor: "#e4720d",
+    textColor: "#611f00",
+    icon: import_lucide_react4.AlertTriangle,
+    iconColor: "#e4720d",
+    closeHoverBg: "#ffedd5"
+  },
+  success: {
+    backgroundColor: "#f0faf3",
+    borderColor: "#5ec171",
+    textColor: "#024002",
+    icon: import_lucide_react4.CheckCircle,
+    iconColor: "#5ec171",
+    closeHoverBg: "#d9f2df"
+  },
+  caution: {
+    backgroundColor: "#fffdf5",
+    borderColor: "#edae06",
+    textColor: "#613f00",
+    icon: import_lucide_react4.AlertOctagon,
+    iconColor: "#edae06",
+    closeHoverBg: "#fff8d5"
+  }
+};
+var Toast = React10.forwardRef(
+  ({
+    variant,
+    message,
+    onClose,
+    className,
+    style,
+    "data-testid": dataTestId
+  }, ref) => {
+    const [isCloseHovered, setIsCloseHovered] = React10.useState(false);
+    const config = variantConfig[variant];
+    const IconComponent = config.icon;
+    const toastStyle = {
+      ...baseToastStyles,
+      backgroundColor: config.backgroundColor,
+      borderColor: config.borderColor,
+      ...style
+    };
+    const closeStyle = {
+      ...closeButtonStyles,
+      ...isCloseHovered && { backgroundColor: config.closeHoverBg }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      "div",
+      {
+        ref,
+        className: (0, import_clsx10.clsx)("arbor-toast", `arbor-toast-${variant}`, className),
+        style: toastStyle,
+        "data-testid": dataTestId,
+        role: "alert",
+        "aria-live": "polite",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconComponent, { size: 16, color: config.iconColor, style: { flexShrink: 0 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { ...messageStyles, color: config.textColor }, children: message }),
+          onClose && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "button",
+            {
+              onClick: onClose,
+              onMouseEnter: () => setIsCloseHovered(true),
+              onMouseLeave: () => setIsCloseHovered(false),
+              style: closeStyle,
+              "aria-label": "Close notification",
+              type: "button",
+              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { fontSize: "18px", lineHeight: 1, color: "#595959", fontWeight: "bold" }, children: "\xD7" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Toast.displayName = "Toast";
+
+// src/Tooltip/Tooltip.tsx
+var React11 = __toESM(require("react"));
+var import_clsx11 = require("clsx");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var tooltipStyles = {
+  position: "absolute",
+  bottom: "calc(100% + 8px)",
+  left: "50%",
+  transform: "translateX(-50%)",
+  backgroundColor: "#2f2f2f",
+  color: "#ffffff",
+  padding: "12px",
+  borderRadius: "8px",
+  boxShadow: "0px 4px 12px 0px rgba(32, 32, 32, 0.08)",
+  fontSize: "13px",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+  fontWeight: 400,
+  lineHeight: 1.5,
+  whiteSpace: "nowrap",
+  pointerEvents: "none",
+  zIndex: 1e3,
+  opacity: 0,
+  transition: "opacity 0.2s ease-in-out"
+};
+var wrapperStyles4 = {
+  position: "relative",
+  display: "inline-block"
+};
+var Tooltip = React11.forwardRef(
+  ({
+    content,
+    children,
+    className,
+    style,
+    "data-testid": dataTestId
+  }, ref) => {
+    const [isVisible, setIsVisible] = React11.useState(false);
+    const visibleTooltipStyles = {
+      ...tooltipStyles,
+      opacity: isVisible ? 1 : 0,
+      ...style
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      "div",
+      {
+        ref,
+        style: wrapperStyles4,
+        onMouseEnter: () => setIsVisible(true),
+        onMouseLeave: () => setIsVisible(false),
+        "data-testid": dataTestId,
+        children: [
+          children,
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "div",
+            {
+              className: (0, import_clsx11.clsx)("arbor-tooltip", className),
+              style: visibleTooltipStyles,
+              role: "tooltip",
+              "aria-hidden": !isVisible,
+              children: content
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Tooltip.displayName = "Tooltip";
+
+// src/Toggle/Toggle.tsx
+var React12 = __toESM(require("react"));
+var import_clsx12 = require("clsx");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var toggleContainerStyles = {
+  width: "40px",
+  height: "24px",
+  borderRadius: "16px",
+  border: "1px solid",
+  position: "relative",
+  cursor: "pointer",
+  transition: "all 0.2s ease-in-out"
+};
+var knobStyles = {
+  width: "18px",
+  height: "18px",
+  borderRadius: "50%",
+  position: "absolute",
+  top: "50%",
+  transform: "translateY(-50%)",
+  transition: "all 0.2s ease-in-out"
+};
+var labelStyles7 = {
+  fontSize: "13px",
+  color: "#2f2f2f",
+  cursor: "pointer",
+  userSelect: "none",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+};
+var wrapperStyles5 = {
+  display: "flex",
+  alignItems: "center",
+  gap: "8px"
+};
+var Toggle = React12.forwardRef(
+  ({
+    label,
+    checked = false,
+    onChange,
+    disabled = false,
+    className,
+    style,
+    "data-testid": dataTestId,
+    name,
+    value
+  }, ref) => {
+    const [isFocused, setIsFocused] = React12.useState(false);
+    const [isHovered, setIsHovered] = React12.useState(false);
+    const [isActive, setIsActive] = React12.useState(false);
+    const toggleId = React12.useId();
+    const handleChange = (e) => {
+      if (!disabled) {
+        onChange?.(e.target.checked);
+      }
+    };
+    const getContainerStyles = () => {
+      if (disabled) {
+        return {
+          ...toggleContainerStyles,
+          backgroundColor: checked ? "#d1d1d1" : "#ffffff",
+          borderColor: checked ? "#d1d1d1" : "#d1d1d1",
+          cursor: "not-allowed"
+        };
+      }
+      if (checked) {
+        if (isActive && isFocused) {
+          return {
+            ...toggleContainerStyles,
+            backgroundColor: "#024002",
+            borderColor: "#024002",
+            boxShadow: "0px 0px 0px 3px #3cad51"
+          };
+        }
+        if (isActive) {
+          return {
+            ...toggleContainerStyles,
+            backgroundColor: "#024002",
+            borderColor: "#024002"
+          };
+        }
+        if (isHovered) {
+          return {
+            ...toggleContainerStyles,
+            backgroundColor: "#005700",
+            borderColor: "#005700"
+          };
+        }
+        if (isFocused) {
+          return {
+            ...toggleContainerStyles,
+            backgroundColor: "#0b800b",
+            borderColor: "#0b800b",
+            boxShadow: "0px 0px 0px 3px #3cad51"
+          };
+        }
+        return {
+          ...toggleContainerStyles,
+          backgroundColor: "#0b800b",
+          borderColor: "#0b800b"
+        };
+      } else {
+        if (isActive && isFocused) {
+          return {
+            ...toggleContainerStyles,
+            backgroundColor: "#efefef",
+            borderColor: "#2f2f2f",
+            boxShadow: "0px 0px 0px 3px #3cad51"
+          };
+        }
+        if (isActive) {
+          return {
+            ...toggleContainerStyles,
+            backgroundColor: "#efefef",
+            borderColor: "#2f2f2f"
+          };
+        }
+        if (isHovered) {
+          return {
+            ...toggleContainerStyles,
+            backgroundColor: "#f8f8f8",
+            borderColor: "#595959"
+          };
+        }
+        if (isFocused) {
+          return {
+            ...toggleContainerStyles,
+            backgroundColor: "#ffffff",
+            borderColor: "#7e7e7e",
+            boxShadow: "0px 0px 0px 3px #3cad51"
+          };
+        }
+        return {
+          ...toggleContainerStyles,
+          backgroundColor: "#ffffff",
+          borderColor: "#7e7e7e"
+        };
+      }
+    };
+    const getKnobStyles = () => {
+      const baseKnob = {
+        ...knobStyles,
+        left: checked ? "18px" : "2px"
+      };
+      if (disabled) {
+        return {
+          ...baseKnob,
+          backgroundColor: checked ? "#f8f8f8" : "#d1d1d1"
+        };
+      }
+      if (checked) {
+        if (isActive) {
+          return {
+            ...baseKnob,
+            backgroundColor: "#efefef"
+          };
+        }
+        if (isHovered) {
+          return {
+            ...baseKnob,
+            backgroundColor: "#f8f8f8"
+          };
+        }
+        return {
+          ...baseKnob,
+          backgroundColor: "#ffffff"
+        };
+      } else {
+        if (isActive) {
+          return {
+            ...baseKnob,
+            backgroundColor: "#2f2f2f"
+          };
+        }
+        if (isHovered) {
+          return {
+            ...baseKnob,
+            backgroundColor: "#595959"
+          };
+        }
+        return {
+          ...baseKnob,
+          backgroundColor: "#7e7e7e"
+        };
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      "div",
+      {
+        className: (0, import_clsx12.clsx)("arbor-toggle-wrapper", className),
+        style: { ...wrapperStyles5, ...style },
+        "data-testid": dataTestId,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "input",
+            {
+              ref,
+              id: toggleId,
+              type: "checkbox",
+              checked,
+              onChange: handleChange,
+              onFocus: () => setIsFocused(true),
+              onBlur: () => setIsFocused(false),
+              disabled,
+              name,
+              value,
+              style: {
+                position: "absolute",
+                opacity: 0,
+                width: 0,
+                height: 0
+              },
+              "aria-checked": checked
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+            "label",
+            {
+              htmlFor: toggleId,
+              onMouseEnter: () => !disabled && setIsHovered(true),
+              onMouseLeave: () => !disabled && setIsHovered(false),
+              onMouseDown: () => !disabled && setIsActive(true),
+              onMouseUp: () => !disabled && setIsActive(false),
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "8px",
+                cursor: disabled ? "not-allowed" : "pointer"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: getContainerStyles(), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: getKnobStyles() }) }),
+                label && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  "span",
+                  {
+                    style: {
+                      ...labelStyles7,
+                      color: disabled ? "#7e7e7e" : "#2f2f2f",
+                      cursor: disabled ? "not-allowed" : "pointer"
+                    },
+                    children: label
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Toggle.displayName = "Toggle";
+
+// src/TextArea/TextArea.tsx
+var React13 = __toESM(require("react"));
+var import_clsx13 = require("clsx");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var labelStyles8 = {
+  fontSize: "13px",
+  fontWeight: 600,
+  color: "#2f2f2f",
+  marginBottom: "0px",
+  display: "block",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+};
+var textareaWrapperStyles = {
+  position: "relative",
+  width: "100%"
+};
+var textareaStyles = {
+  width: "100%",
+  minHeight: "72px",
+  padding: "8px",
+  fontSize: "13px",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+  border: "1px solid",
+  borderRadius: "8px",
+  outline: "none",
+  resize: "vertical",
+  transition: "all 0.2s ease-in-out",
+  lineHeight: "1.5"
+};
+var helperTextStyles5 = {
+  fontSize: "13px",
+  marginTop: "4px",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+};
+var TextArea = React13.forwardRef(
+  ({
+    label,
+    placeholder,
+    value,
+    onChange,
+    state = "default",
+    error,
+    helperText,
+    disabled = false,
+    rows = 3,
+    className,
+    style,
+    "data-testid": dataTestId,
+    name
+  }, ref) => {
+    const [isFocused, setIsFocused] = React13.useState(false);
+    const [isHovered, setIsHovered] = React13.useState(false);
+    const textareaId = React13.useId();
+    const actualState = error ? "error" : state;
+    const getBorderColor = () => {
+      if (disabled) {
+        return "#dfdfdf";
+      }
+      if (actualState === "error") {
+        return "#c93232";
+      }
+      if (actualState === "success") {
+        return "#0e8a0e";
+      }
+      if (isFocused) {
+        return "#0e8a0e";
+      }
+      if (isHovered) {
+        return "#7e7e7e";
+      }
+      return "#dfdfdf";
+    };
+    const getBackgroundColor = () => {
+      if (disabled) {
+        return "#efefef";
+      }
+      return "#ffffff";
+    };
+    const getBoxShadow = () => {
+      if (isFocused && !disabled) {
+        if (actualState === "error") {
+          return "0px 0px 0px 3px rgba(201, 50, 50, 0.2)";
+        }
+        return "0px 0px 0px 3px #3cad51";
+      }
+      return void 0;
+    };
+    const textareaStylesCombined = {
+      ...textareaStyles,
+      borderColor: getBorderColor(),
+      backgroundColor: getBackgroundColor(),
+      boxShadow: getBoxShadow(),
+      color: disabled ? "#7e7e7e" : "#2f2f2f",
+      cursor: disabled ? "not-allowed" : "text"
+    };
+    const helperColor = error ? "#c93232" : actualState === "success" ? "#0e8a0e" : "#595959";
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      "div",
+      {
+        className: (0, import_clsx13.clsx)("arbor-textarea-wrapper", className),
+        style,
+        "data-testid": dataTestId,
+        children: [
+          label && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { htmlFor: textareaId, style: labelStyles8, children: label }),
+          label && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { height: "8px" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: textareaWrapperStyles, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "textarea",
+            {
+              ref,
+              id: textareaId,
+              name,
+              placeholder,
+              value,
+              onChange,
+              disabled,
+              rows,
+              onFocus: () => setIsFocused(true),
+              onBlur: () => setIsFocused(false),
+              onMouseEnter: () => setIsHovered(true),
+              onMouseLeave: () => setIsHovered(false),
+              style: textareaStylesCombined
+            }
+          ) }),
+          (error || helperText) && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { ...helperTextStyles5, color: helperColor }, role: error ? "alert" : void 0, children: error || helperText })
+        ]
+      }
+    );
+  }
+);
+TextArea.displayName = "TextArea";
+
+// src/Tabs/Tabs.tsx
+var React14 = __toESM(require("react"));
+var import_clsx14 = require("clsx");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var tabsContainerStyles = {
+  display: "flex",
+  alignItems: "flex-start",
+  gap: "12px",
+  borderBottom: "1px solid #f8f8f8",
+  paddingBottom: "1px",
+  width: "100%"
+};
+var tabItemWrapperStyles = {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  cursor: "pointer",
+  position: "relative"
+};
+var tabItemStyles = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "8px",
+  padding: "8px 12px",
+  borderRadius: "8px",
+  fontSize: "14px",
+  lineHeight: "1.5",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+  outline: "none",
+  transition: "all 0.2s ease-in-out",
+  userSelect: "none"
+};
+var underlineStyles = {
+  width: "100%",
+  height: "2px",
+  borderTopLeftRadius: "4px",
+  borderTopRightRadius: "4px",
+  transition: "background-color 0.2s ease-in-out"
+};
+var Tabs = React14.forwardRef(
+  ({
+    tabs,
+    activeTab,
+    onTabChange,
+    className,
+    style,
+    "data-testid": dataTestId
+  }, ref) => {
+    const [hoveredTab, setHoveredTab] = React14.useState(null);
+    const [focusedTab, setFocusedTab] = React14.useState(null);
+    const currentActiveTab = activeTab || (tabs.length > 0 ? tabs[0].value : "");
+    const handleTabClick = (value) => {
+      onTabChange?.(value);
+    };
+    const handleKeyDown = (e, value) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        handleTabClick(value);
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      "div",
+      {
+        ref,
+        className: (0, import_clsx14.clsx)("arbor-tabs", className),
+        style: { ...tabsContainerStyles, ...style },
+        "data-testid": dataTestId,
+        role: "tablist",
+        children: tabs.map((tab) => {
+          const isActive = tab.value === currentActiveTab;
+          const isHovered = tab.value === hoveredTab;
+          const isFocused = tab.value === focusedTab;
+          const getTextColor = () => {
+            if (isActive) {
+              return "#0e8a0e";
+            }
+            if (isHovered) {
+              return "#202020";
+            }
+            return "#2f2f2f";
+          };
+          const getFontWeight = () => {
+            return isActive ? 600 : 500;
+          };
+          const getUnderlineColor = () => {
+            if (isActive) {
+              return "#0e8a0e";
+            }
+            if (isHovered) {
+              return "#d1d1d1";
+            }
+            return "transparent";
+          };
+          const getBoxShadow = () => {
+            if (isFocused) {
+              return "0px 0px 0px 3px #3cad51";
+            }
+            return void 0;
+          };
+          const tabItemStylesCombined = {
+            ...tabItemStyles,
+            color: getTextColor(),
+            fontWeight: getFontWeight(),
+            boxShadow: getBoxShadow(),
+            backgroundColor: isFocused ? "rgba(255, 255, 255, 0.01)" : "transparent"
+          };
+          const underlineStylesCombined = {
+            ...underlineStyles,
+            backgroundColor: getUnderlineColor()
+          };
+          return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+            "div",
+            {
+              style: tabItemWrapperStyles,
+              onMouseEnter: () => setHoveredTab(tab.value),
+              onMouseLeave: () => setHoveredTab(null),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+                  "div",
+                  {
+                    role: "tab",
+                    "aria-selected": isActive,
+                    tabIndex: isActive ? 0 : -1,
+                    onClick: () => handleTabClick(tab.value),
+                    onKeyDown: (e) => handleKeyDown(e, tab.value),
+                    onFocus: () => setFocusedTab(tab.value),
+                    onBlur: () => setFocusedTab(null),
+                    style: tabItemStylesCombined,
+                    children: [
+                      tab.icon && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: { display: "flex", alignItems: "center" }, children: tab.icon }),
+                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: tab.label })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: underlineStylesCombined })
+              ]
+            },
+            tab.value
+          );
+        })
+      }
+    );
+  }
+);
+Tabs.displayName = "Tabs";
+
+// src/Banner/Banner.tsx
+var React15 = __toESM(require("react"));
+var import_clsx15 = require("clsx");
+var import_lucide_react5 = require("lucide-react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var containerStyles2 = {
+  display: "flex",
+  alignItems: "flex-start",
+  padding: "16px",
+  borderRadius: "8px",
+  border: "1px solid",
+  width: "100%",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+};
+var iconContainerStyles = {
+  flexShrink: 0,
+  width: "24px",
+  height: "24px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+};
+var contentContainerStyles = {
+  flex: 1,
+  display: "flex",
+  flexDirection: "column",
+  minWidth: 0
+};
+var titleStyles = {
+  fontSize: "18px",
+  fontWeight: 600,
+  lineHeight: "1.25",
+  marginBottom: "8px"
+};
+var messageStyles2 = {
+  fontSize: "13px",
+  fontWeight: 400,
+  lineHeight: "1.5",
+  margin: 0
+};
+var actionContainerStyles = {
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "flex-end",
+  alignItems: "flex-end",
+  alignSelf: "stretch",
+  flexShrink: 0
+};
+var actionButtonStyles = {
+  background: "none",
+  border: "none",
+  padding: 0,
+  fontSize: "13px",
+  fontWeight: 600,
+  lineHeight: "1.5",
+  textDecoration: "underline",
+  textUnderlinePosition: "from-font",
+  cursor: "pointer",
+  fontFamily: "inherit"
+};
+var closeButtonStyles2 = {
+  background: "none",
+  border: "none",
+  padding: "4px",
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0,
+  marginLeft: "8px"
+};
+var variantConfig2 = {
+  warning: {
+    backgroundColor: "#fffaf5",
+    borderColor: "#e4720d",
+    textColor: "#611f00",
+    actionColor: "#a74102",
+    icon: import_lucide_react5.AlertTriangle
+  },
+  destructive: {
+    backgroundColor: "#fff5f5",
+    borderColor: "#c93232",
+    textColor: "#610202",
+    actionColor: "#920a0a",
+    icon: import_lucide_react5.AlertCircle
+  },
+  information: {
+    backgroundColor: "#f5fbff",
+    borderColor: "#2c8bca",
+    textColor: "#053a61",
+    actionColor: "#024f83",
+    icon: import_lucide_react5.Info
+  },
+  neutral: {
+    backgroundColor: "transparent",
+    borderColor: "#b3b3b3",
+    textColor: "#2f2f2f",
+    actionColor: "#2f2f2f",
+    icon: import_lucide_react5.Info
+  }
+};
+var Banner = React15.forwardRef(
+  ({
+    variant = "information",
+    title,
+    message,
+    icon = true,
+    actionLabel,
+    onAction,
+    onClose,
+    className,
+    style,
+    "data-testid": dataTestId
+  }, ref) => {
+    const config = variantConfig2[variant];
+    const DefaultIcon = config.icon;
+    const showIcon = icon !== false;
+    const iconElement = icon === true || icon === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DefaultIcon, { size: 20, strokeWidth: 2 }) : icon;
+    const containerStylesCombined = {
+      ...containerStyles2,
+      backgroundColor: config.backgroundColor,
+      borderColor: config.borderColor,
+      color: config.textColor,
+      gap: showIcon ? "16px" : "0px",
+      ...style
+    };
+    const titleStylesCombined = {
+      ...titleStyles,
+      color: config.textColor
+    };
+    const messageStylesCombined = {
+      ...messageStyles2,
+      color: config.textColor
+    };
+    const actionButtonStylesCombined = {
+      ...actionButtonStyles,
+      color: config.actionColor
+    };
+    const closeButtonStylesCombined = {
+      ...closeButtonStyles2,
+      color: config.textColor
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+      "div",
+      {
+        ref,
+        className: (0, import_clsx15.clsx)("arbor-banner", `arbor-banner--${variant}`, className),
+        style: containerStylesCombined,
+        "data-testid": dataTestId,
+        role: "alert",
+        children: [
+          showIcon && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { ...iconContainerStyles, color: config.textColor }, children: iconElement }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: contentContainerStyles, children: [
+            title && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: titleStylesCombined, children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { style: messageStylesCombined, children: message })
+          ] }),
+          actionLabel && onAction && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: actionContainerStyles, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: onAction,
+              style: actionButtonStylesCombined,
+              children: actionLabel
+            }
+          ) }),
+          onClose && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              style: closeButtonStylesCombined,
+              "aria-label": "Close banner",
+              children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react5.X, { size: 20 })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Banner.displayName = "Banner";
+
+// src/Pagination/Pagination.tsx
+var React16 = __toESM(require("react"));
+var import_clsx16 = require("clsx");
+var import_lucide_react6 = require("lucide-react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var containerStyles3 = {
+  display: "flex",
+  alignItems: "center",
+  gap: "8px",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+};
+var buttonStyles3 = {
+  width: "24px",
+  height: "24px",
+  borderRadius: "50%",
+  border: "none",
+  background: "transparent",
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: 0,
+  transition: "background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out",
+  flexShrink: 0,
+  WebkitTapHighlightColor: "transparent",
+  outline: "none"
+};
+var buttonDisabledStyles = {
+  cursor: "not-allowed",
+  opacity: 0.5
+};
+var labelStyles9 = {
+  fontSize: "13px",
+  fontWeight: 600,
+  lineHeight: "1.5",
+  color: "#2f2f2f"
+};
+var inputWrapperStyles = {
+  display: "flex",
+  alignItems: "center",
+  gap: "8px"
+};
+var inputStyles4 = {
+  width: "60px",
+  paddingTop: "12px",
+  paddingBottom: "12px",
+  paddingLeft: "16px",
+  paddingRight: "16px",
+  fontSize: "13px",
+  fontWeight: 400,
+  lineHeight: "1.5",
+  color: "#2f2f2f",
+  backgroundColor: "white",
+  border: "1px solid #dfdfdf",
+  borderRadius: "8px",
+  fontFamily: "inherit",
+  textAlign: "center",
+  outline: "none"
+};
+var inputFocusStyles = {
+  boxShadow: "0px 0px 0px 3px #3cad51"
+};
+var textStyles = {
+  fontSize: "13px",
+  fontWeight: 400,
+  lineHeight: "1.5",
+  color: "#2f2f2f"
+};
+var Pagination = React16.forwardRef(
+  ({
+    currentPage,
+    totalPages,
+    onPageChange,
+    className,
+    style,
+    "data-testid": dataTestId
+  }, ref) => {
+    const [inputValue, setInputValue] = React16.useState(currentPage.toString());
+    const [focusedButton, setFocusedButton] = React16.useState(null);
+    const [hoveredButton, setHoveredButton] = React16.useState(null);
+    const [activeButton, setActiveButton] = React16.useState(null);
+    const [inputFocused, setInputFocused] = React16.useState(false);
+    React16.useEffect(() => {
+      setInputValue(currentPage.toString());
+    }, [currentPage]);
+    const handleFirstPage = () => {
+      if (currentPage !== 1) {
+        onPageChange(1);
+      }
+    };
+    const handlePreviousPage = () => {
+      if (currentPage > 1) {
+        onPageChange(currentPage - 1);
+      }
+    };
+    const handleNextPage = () => {
+      if (currentPage < totalPages) {
+        onPageChange(currentPage + 1);
+      }
+    };
+    const handleLastPage = () => {
+      if (currentPage !== totalPages) {
+        onPageChange(totalPages);
+      }
+    };
+    const handleInputChange = (e) => {
+      const value = e.target.value;
+      if (value === "" || /^\d+$/.test(value)) {
+        setInputValue(value);
+      }
+    };
+    const handleInputBlur = () => {
+      setInputFocused(false);
+      const pageNumber = parseInt(inputValue, 10);
+      if (isNaN(pageNumber) || pageNumber < 1) {
+        setInputValue(currentPage.toString());
+      } else if (pageNumber > totalPages) {
+        setInputValue(totalPages.toString());
+        onPageChange(totalPages);
+      } else if (pageNumber !== currentPage) {
+        onPageChange(pageNumber);
+      }
+    };
+    const handleInputKeyDown = (e) => {
+      if (e.key === "Enter") {
+        handleInputBlur();
+        e.target.blur();
+      }
+    };
+    const getButtonStyle = (buttonName, disabled) => {
+      if (disabled) {
+        return { ...buttonStyles3, ...buttonDisabledStyles };
+      }
+      const isHovered = hoveredButton === buttonName;
+      const isFocused = focusedButton === buttonName;
+      const isActive = activeButton === buttonName;
+      const style2 = {
+        ...buttonStyles3
+      };
+      if (isHovered && !isFocused && !isActive) {
+        style2.backgroundColor = "#efefef";
+      }
+      if (isActive && !isFocused) {
+        style2.backgroundColor = "transparent";
+      }
+      if (isFocused) {
+        style2.boxShadow = "0px 0px 0px 3px #3cad51";
+        style2.backgroundColor = "rgba(255, 255, 255, 0.01)";
+      }
+      return style2;
+    };
+    const isFirstDisabled = currentPage === 1;
+    const isPreviousDisabled = currentPage === 1;
+    const isNextDisabled = currentPage === totalPages;
+    const isLastDisabled = currentPage === totalPages;
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+      "div",
+      {
+        ref,
+        className: (0, import_clsx16.clsx)("arbor-pagination", className),
+        style: { ...containerStyles3, ...style },
+        "data-testid": dataTestId,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: handleFirstPage,
+              disabled: isFirstDisabled,
+              onMouseEnter: () => setHoveredButton("first"),
+              onMouseLeave: () => setHoveredButton(null),
+              onMouseDown: () => setActiveButton("first"),
+              onMouseUp: () => setActiveButton(null),
+              onFocus: () => setFocusedButton("first"),
+              onBlur: () => setFocusedButton(null),
+              style: getButtonStyle("first", isFirstDisabled),
+              "aria-label": "Go to first page",
+              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react6.ChevronsLeft, { size: 16, color: "#2f2f2f" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: handlePreviousPage,
+              disabled: isPreviousDisabled,
+              onMouseEnter: () => setHoveredButton("previous"),
+              onMouseLeave: () => setHoveredButton(null),
+              onMouseDown: () => setActiveButton("previous"),
+              onMouseUp: () => setActiveButton(null),
+              onFocus: () => setFocusedButton("previous"),
+              onBlur: () => setFocusedButton(null),
+              style: getButtonStyle("previous", isPreviousDisabled),
+              "aria-label": "Go to previous page",
+              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react6.ChevronLeft, { size: 16, color: "#2f2f2f" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: inputWrapperStyles, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: labelStyles9, children: "Page" }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              "input",
+              {
+                type: "text",
+                value: inputValue,
+                onChange: handleInputChange,
+                onBlur: handleInputBlur,
+                onFocus: () => setInputFocused(true),
+                onKeyDown: handleInputKeyDown,
+                style: {
+                  ...inputStyles4,
+                  ...inputFocused && inputFocusStyles
+                },
+                "aria-label": `Page ${currentPage} of ${totalPages}`
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { style: textStyles, children: [
+              "of ",
+              totalPages
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: handleNextPage,
+              disabled: isNextDisabled,
+              onMouseEnter: () => setHoveredButton("next"),
+              onMouseLeave: () => setHoveredButton(null),
+              onMouseDown: () => setActiveButton("next"),
+              onMouseUp: () => setActiveButton(null),
+              onFocus: () => setFocusedButton("next"),
+              onBlur: () => setFocusedButton(null),
+              style: getButtonStyle("next", isNextDisabled),
+              "aria-label": "Go to next page",
+              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react6.ChevronRight, { size: 16, color: "#2f2f2f" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: handleLastPage,
+              disabled: isLastDisabled,
+              onMouseEnter: () => setHoveredButton("last"),
+              onMouseLeave: () => setHoveredButton(null),
+              onMouseDown: () => setActiveButton("last"),
+              onMouseUp: () => setActiveButton(null),
+              onFocus: () => setFocusedButton("last"),
+              onBlur: () => setFocusedButton(null),
+              style: getButtonStyle("last", isLastDisabled),
+              "aria-label": "Go to last page",
+              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react6.ChevronsRight, { size: 16, color: "#2f2f2f" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Pagination.displayName = "Pagination";
+
+// src/TableFooterPagination/TableFooterPagination.tsx
+var React17 = __toESM(require("react"));
+var import_clsx17 = require("clsx");
+var import_lucide_react7 = require("lucide-react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var containerStyles4 = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  backgroundColor: "white",
+  paddingTop: "4px",
+  paddingBottom: 0,
+  paddingLeft: 0,
+  paddingRight: 0,
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+};
+var textStyles2 = {
+  fontSize: "13px",
+  fontWeight: 400,
+  lineHeight: "1.5",
+  color: "#2f2f2f",
+  minWidth: "165px"
+};
+var paginationWrapperStyles = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "8px",
+  minWidth: "165px",
+  flexWrap: "wrap"
+};
+var paginationButtonStyles = {
+  width: "32px",
+  height: "32px",
+  minWidth: "32px",
+  minHeight: "32px",
+  maxWidth: "32px",
+  maxHeight: "32px",
+  borderRadius: "99px",
+  border: "none",
+  background: "white",
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: 0,
+  transition: "background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out",
+  flexShrink: 0,
+  WebkitTapHighlightColor: "transparent",
+  outline: "none"
+};
+var paginationButtonDisabledStyles = {
+  cursor: "not-allowed",
+  opacity: 0.5
+};
+var paginationLabelStyles = {
+  fontSize: "13px",
+  fontWeight: 400,
+  lineHeight: "1.5",
+  color: "#2f2f2f"
+};
+var paginationInputWrapperStyles = {
+  display: "flex",
+  alignItems: "center",
+  gap: "8px"
+};
+var paginationInputStyles = {
+  width: "60px",
+  paddingTop: "12px",
+  paddingBottom: "12px",
+  paddingLeft: "16px",
+  paddingRight: "16px",
+  fontSize: "13px",
+  fontWeight: 400,
+  lineHeight: "1.5",
+  color: "#2f2f2f",
+  backgroundColor: "white",
+  border: "1px solid #dfdfdf",
+  borderRadius: "8px",
+  fontFamily: "inherit",
+  textAlign: "center",
+  outline: "none"
+};
+var paginationInputFocusStyles = {
+  boxShadow: "0px 0px 0px 3px #3cad51"
+};
+var rightAlignedStyles = {
+  display: "flex",
+  gap: "16px",
+  alignItems: "center",
+  justifyContent: "flex-end",
+  minWidth: "165px"
+};
+var perPageButtonStyles = {
+  height: "32px",
+  backgroundColor: "white",
+  border: "1px solid #d1d1d1",
+  borderRadius: "8px",
+  display: "flex",
+  alignItems: "center",
+  gap: "8px",
+  paddingLeft: "12px",
+  paddingRight: "8px",
+  paddingTop: "8px",
+  paddingBottom: "8px",
+  cursor: "pointer",
+  transition: "background-color 0.2s ease-in-out",
+  outline: "none"
+};
+var perPageTextStyles = {
+  fontSize: "13px",
+  fontWeight: 600,
+  lineHeight: "1.5",
+  color: "#2f2f2f",
+  textAlign: "center"
+};
+var expandButtonStyles = {
+  height: "32px",
+  minHeight: "32px",
+  backgroundColor: "#efefef",
+  border: "none",
+  borderRadius: "99px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  paddingLeft: "16px",
+  paddingRight: "16px",
+  paddingTop: 0,
+  paddingBottom: 0,
+  gap: 0,
+  cursor: "pointer",
+  transition: "background-color 0.2s ease-in-out",
+  outline: "none"
+};
+var expandButtonTextStyles = {
+  fontSize: "13px",
+  fontWeight: 600,
+  lineHeight: "1.5",
+  color: "#2f2f2f",
+  textAlign: "center"
+};
+var TableFooterPagination = React17.forwardRef(
+  ({
+    currentPage,
+    totalPages,
+    onPageChange,
+    totalResults,
+    currentResults,
+    itemsPerPage,
+    onItemsPerPageChange,
+    onExpandTable,
+    className,
+    style,
+    "data-testid": dataTestId
+  }, ref) => {
+    const [inputValue, setInputValue] = React17.useState(currentPage.toString());
+    const [focusedButton, setFocusedButton] = React17.useState(null);
+    const [hoveredButton, setHoveredButton] = React17.useState(null);
+    const [activeButton, setActiveButton] = React17.useState(null);
+    const [inputFocused, setInputFocused] = React17.useState(false);
+    const [perPageHovered, setPerPageHovered] = React17.useState(false);
+    const [expandHovered, setExpandHovered] = React17.useState(false);
+    React17.useEffect(() => {
+      setInputValue(currentPage.toString());
+    }, [currentPage]);
+    const handleFirstPage = () => {
+      if (currentPage !== 1) {
+        onPageChange(1);
+      }
+    };
+    const handlePreviousPage = () => {
+      if (currentPage > 1) {
+        onPageChange(currentPage - 1);
+      }
+    };
+    const handleNextPage = () => {
+      if (currentPage < totalPages) {
+        onPageChange(currentPage + 1);
+      }
+    };
+    const handleLastPage = () => {
+      if (currentPage !== totalPages) {
+        onPageChange(totalPages);
+      }
+    };
+    const handleInputChange = (e) => {
+      const value = e.target.value;
+      if (value === "" || /^\d+$/.test(value)) {
+        setInputValue(value);
+      }
+    };
+    const handleInputBlur = () => {
+      setInputFocused(false);
+      const pageNumber = parseInt(inputValue, 10);
+      if (isNaN(pageNumber) || pageNumber < 1) {
+        setInputValue(currentPage.toString());
+      } else if (pageNumber > totalPages) {
+        setInputValue(totalPages.toString());
+        onPageChange(totalPages);
+      } else if (pageNumber !== currentPage) {
+        onPageChange(pageNumber);
+      }
+    };
+    const handleInputKeyDown = (e) => {
+      if (e.key === "Enter") {
+        handleInputBlur();
+        e.target.blur();
+      }
+    };
+    const getButtonStyle = (buttonName, disabled) => {
+      if (disabled) {
+        return { ...paginationButtonStyles, ...paginationButtonDisabledStyles };
+      }
+      const isHovered = hoveredButton === buttonName;
+      const isFocused = focusedButton === buttonName;
+      const isActive = activeButton === buttonName;
+      const style2 = {
+        ...paginationButtonStyles
+      };
+      if (isHovered && !isFocused && !isActive) {
+        style2.backgroundColor = "#efefef";
+      }
+      if (isActive && !isFocused) {
+        style2.backgroundColor = "transparent";
+      }
+      if (isFocused) {
+        style2.boxShadow = "0px 0px 0px 3px #3cad51";
+        style2.backgroundColor = "rgba(255, 255, 255, 0.01)";
+      }
+      return style2;
+    };
+    const isFirstDisabled = currentPage === 1;
+    const isPreviousDisabled = currentPage === 1;
+    const isNextDisabled = currentPage === totalPages;
+    const isLastDisabled = currentPage === totalPages;
+    const resultText = currentResults === totalResults ? `Showing ${totalResults} results` : `Showing ${currentResults} of ${totalResults} results`;
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+      "div",
+      {
+        ref,
+        className: (0, import_clsx17.clsx)("arbor-table-footer-pagination", className),
+        style: { ...containerStyles4, ...style },
+        "data-testid": dataTestId,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: textStyles2, children: resultText }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: paginationWrapperStyles, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: handleFirstPage,
+                disabled: isFirstDisabled,
+                onMouseEnter: () => setHoveredButton("first"),
+                onMouseLeave: () => setHoveredButton(null),
+                onMouseDown: () => setActiveButton("first"),
+                onMouseUp: () => setActiveButton(null),
+                onFocus: () => setFocusedButton("first"),
+                onBlur: () => setFocusedButton(null),
+                style: getButtonStyle("first", isFirstDisabled),
+                "aria-label": "Go to first page",
+                children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  "svg",
+                  {
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 16 16",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                      "path",
+                      {
+                        d: "M7 12L3 8L7 4M11 12L7 8L11 4",
+                        stroke: "#2f2f2f",
+                        strokeWidth: "1.5",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: handlePreviousPage,
+                disabled: isPreviousDisabled,
+                onMouseEnter: () => setHoveredButton("previous"),
+                onMouseLeave: () => setHoveredButton(null),
+                onMouseDown: () => setActiveButton("previous"),
+                onMouseUp: () => setActiveButton(null),
+                onFocus: () => setFocusedButton("previous"),
+                onBlur: () => setFocusedButton(null),
+                style: getButtonStyle("previous", isPreviousDisabled),
+                "aria-label": "Go to previous page",
+                children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  "svg",
+                  {
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 16 16",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                      "path",
+                      {
+                        d: "M10 12L6 8L10 4",
+                        stroke: "#2f2f2f",
+                        strokeWidth: "1.5",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: paginationInputWrapperStyles, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: paginationLabelStyles, children: "Page" }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                "input",
+                {
+                  type: "text",
+                  value: inputValue,
+                  onChange: handleInputChange,
+                  onBlur: handleInputBlur,
+                  onFocus: () => setInputFocused(true),
+                  onKeyDown: handleInputKeyDown,
+                  style: {
+                    ...paginationInputStyles,
+                    ...inputFocused && paginationInputFocusStyles
+                  },
+                  "aria-label": `Page ${currentPage} of ${totalPages}`
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { style: paginationLabelStyles, children: [
+                "of ",
+                totalPages
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: handleNextPage,
+                disabled: isNextDisabled,
+                onMouseEnter: () => setHoveredButton("next"),
+                onMouseLeave: () => setHoveredButton(null),
+                onMouseDown: () => setActiveButton("next"),
+                onMouseUp: () => setActiveButton(null),
+                onFocus: () => setFocusedButton("next"),
+                onBlur: () => setFocusedButton(null),
+                style: getButtonStyle("next", isNextDisabled),
+                "aria-label": "Go to next page",
+                children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  "svg",
+                  {
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 16 16",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                      "path",
+                      {
+                        d: "M6 4L10 8L6 12",
+                        stroke: "#2f2f2f",
+                        strokeWidth: "1.5",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: handleLastPage,
+                disabled: isLastDisabled,
+                onMouseEnter: () => setHoveredButton("last"),
+                onMouseLeave: () => setHoveredButton(null),
+                onMouseDown: () => setActiveButton("last"),
+                onMouseUp: () => setActiveButton(null),
+                onFocus: () => setFocusedButton("last"),
+                onBlur: () => setFocusedButton(null),
+                style: getButtonStyle("last", isLastDisabled),
+                "aria-label": "Go to last page",
+                children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  "svg",
+                  {
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 16 16",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                      "path",
+                      {
+                        d: "M9 4L13 8L9 12M5 4L9 8L5 12",
+                        stroke: "#2f2f2f",
+                        strokeWidth: "1.5",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: rightAlignedStyles, children: [
+            onItemsPerPageChange && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+              "button",
+              {
+                type: "button",
+                onClick: () => onItemsPerPageChange(itemsPerPage),
+                onMouseEnter: () => setPerPageHovered(true),
+                onMouseLeave: () => setPerPageHovered(false),
+                style: {
+                  ...perPageButtonStyles,
+                  backgroundColor: perPageHovered ? "#f5f5f5" : "white"
+                },
+                "aria-label": "Items per page",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { style: perPageTextStyles, children: [
+                    itemsPerPage,
+                    " per page"
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.ChevronDown, { size: 16, color: "#2f2f2f" })
+                ]
+              }
+            ),
+            onExpandTable && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: onExpandTable,
+                onMouseEnter: () => setExpandHovered(true),
+                onMouseLeave: () => setExpandHovered(false),
+                style: {
+                  ...expandButtonStyles,
+                  backgroundColor: expandHovered ? "#e5e5e5" : "#efefef"
+                },
+                "aria-label": "Expand table",
+                children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: expandButtonTextStyles, children: "Expand table" })
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+TableFooterPagination.displayName = "TableFooterPagination";
+
+// src/TableControls/TableControls.tsx
+var React18 = __toESM(require("react"));
+var import_clsx18 = require("clsx");
+var Popover2 = __toESM(require("@radix-ui/react-popover"));
+var import_lucide_react8 = require("lucide-react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var containerStyles5 = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  paddingTop: "8px",
+  paddingBottom: "8px",
+  paddingLeft: 0,
+  paddingRight: 0,
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+};
+var actions1Styles = {
+  display: "flex",
+  gap: "12px",
+  alignItems: "center"
+};
+var actions2Styles = {
+  display: "flex",
+  gap: "12px",
+  alignItems: "center",
+  justifyContent: "flex-end",
+  flexGrow: 1,
+  paddingRight: "4px"
+};
+var dropdownButtonStyles = {
+  height: "32px",
+  backgroundColor: "white",
+  border: "1px solid #d1d1d1",
+  borderRadius: "8px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "8px",
+  paddingLeft: "12px",
+  paddingRight: "8px",
+  paddingTop: 0,
+  paddingBottom: 0,
+  cursor: "pointer",
+  transition: "background-color 0.2s ease-in-out",
+  outline: "none"
+};
+var dropdownTextStyles = {
+  fontSize: "13px",
+  fontWeight: 600,
+  lineHeight: "1.5",
+  color: "#2f2f2f",
+  textAlign: "center"
+};
+var iconButtonStyles2 = {
+  width: "32px",
+  height: "32px",
+  borderRadius: "99px",
+  border: "none",
+  backgroundColor: "white",
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: 0,
+  transition: "background-color 0.2s ease-in-out",
+  flexShrink: 0,
+  outline: "none"
+};
+var iconButtonDisabledStyles = {
+  cursor: "not-allowed",
+  opacity: 0.5
+};
+var popoverContentStyles = {
+  backgroundColor: "white",
+  border: "1px solid #d1d1d1",
+  borderRadius: "8px",
+  padding: "8px",
+  minWidth: "180px",
+  boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
+  zIndex: 1e3
+};
+var menuItemStyles = {
+  padding: "8px 12px",
+  fontSize: "13px",
+  color: "#2f2f2f",
+  cursor: "pointer",
+  borderRadius: "4px",
+  border: "none",
+  backgroundColor: "white",
+  width: "100%",
+  textAlign: "left",
+  transition: "background-color 0.2s ease-in-out"
+};
+var TableControls = React18.forwardRef(
+  ({
+    selectedCount = 0,
+    onActionsClick,
+    onUndoClick,
+    onRedoClick,
+    onHideColumnsClick,
+    onSearchClick,
+    onDownloadClick,
+    onTooltipsClick,
+    tooltipsEnabled = false,
+    onSettingsClick,
+    onExpandClick,
+    undoDisabled = false,
+    redoDisabled = false,
+    className,
+    style,
+    "data-testid": dataTestId
+  }, ref) => {
+    const [hoveredButton, setHoveredButton] = React18.useState(null);
+    const [focusedButton, setFocusedButton] = React18.useState(null);
+    const [actionsOpen, setActionsOpen] = React18.useState(false);
+    const [hideColumnsOpen, setHideColumnsOpen] = React18.useState(false);
+    const getIconButtonStyle = (buttonName, disabled = false) => {
+      if (disabled) {
+        return { ...iconButtonStyles2, ...iconButtonDisabledStyles };
+      }
+      const isHovered = hoveredButton === buttonName;
+      const isFocused = focusedButton === buttonName;
+      return {
+        ...iconButtonStyles2,
+        backgroundColor: isHovered ? "#f5f5f5" : "white",
+        boxShadow: isFocused ? "0 0 0 3px #3cad51" : "none"
+      };
+    };
+    const getDropdownButtonStyle = (buttonName) => {
+      const isHovered = hoveredButton === buttonName;
+      const isFocused = focusedButton === buttonName;
+      return {
+        ...dropdownButtonStyles,
+        backgroundColor: isHovered ? "#f5f5f5" : "white",
+        boxShadow: isFocused ? "0 0 0 3px #3cad51" : "none"
+      };
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+      "div",
+      {
+        ref,
+        className: (0, import_clsx18.clsx)("arbor-table-controls", className),
+        style: { ...containerStyles5, ...style },
+        "data-testid": dataTestId,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: actions1Styles, children: [
+            onActionsClick && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Popover2.Root, { open: actionsOpen, onOpenChange: setActionsOpen, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Popover2.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    setActionsOpen(!actionsOpen);
+                    onActionsClick();
+                  },
+                  onMouseEnter: () => setHoveredButton("actions"),
+                  onMouseLeave: () => setHoveredButton(null),
+                  onFocus: () => setFocusedButton("actions"),
+                  onBlur: () => setFocusedButton(null),
+                  style: getDropdownButtonStyle("actions"),
+                  "aria-label": "Actions",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { style: dropdownTextStyles, children: [
+                      "Actions (",
+                      selectedCount,
+                      ")"
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.ChevronDown, { size: 16, color: "#2f2f2f" })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Popover2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+                Popover2.Content,
+                {
+                  style: popoverContentStyles,
+                  sideOffset: 4,
+                  align: "start",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                      "button",
+                      {
+                        style: menuItemStyles,
+                        onMouseEnter: (e) => e.currentTarget.style.backgroundColor = "#f5f5f5",
+                        onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "white",
+                        onClick: () => {
+                          console.log("Edit selected items");
+                          setActionsOpen(false);
+                        },
+                        children: "Edit selected items"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                      "button",
+                      {
+                        style: menuItemStyles,
+                        onMouseEnter: (e) => e.currentTarget.style.backgroundColor = "#f5f5f5",
+                        onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "white",
+                        onClick: () => {
+                          console.log("Delete selected items");
+                          setActionsOpen(false);
+                        },
+                        children: "Delete selected items"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                      "button",
+                      {
+                        style: menuItemStyles,
+                        onMouseEnter: (e) => e.currentTarget.style.backgroundColor = "#f5f5f5",
+                        onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "white",
+                        onClick: () => {
+                          console.log("Export selected items");
+                          setActionsOpen(false);
+                        },
+                        children: "Export selected items"
+                      }
+                    )
+                  ]
+                }
+              ) })
+            ] }),
+            onUndoClick && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: onUndoClick,
+                disabled: undoDisabled,
+                onMouseEnter: () => setHoveredButton("undo"),
+                onMouseLeave: () => setHoveredButton(null),
+                onFocus: () => setFocusedButton("undo"),
+                onBlur: () => setFocusedButton(null),
+                style: getIconButtonStyle("undo", undoDisabled),
+                "aria-label": "Undo",
+                children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Undo2, { size: 16, color: "#2f2f2f" })
+              }
+            ),
+            onRedoClick && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: onRedoClick,
+                disabled: redoDisabled,
+                onMouseEnter: () => setHoveredButton("redo"),
+                onMouseLeave: () => setHoveredButton(null),
+                onFocus: () => setFocusedButton("redo"),
+                onBlur: () => setFocusedButton(null),
+                style: getIconButtonStyle("redo", redoDisabled),
+                "aria-label": "Redo",
+                children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Redo2, { size: 16, color: "#2f2f2f" })
+              }
+            ),
+            onHideColumnsClick && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Popover2.Root, { open: hideColumnsOpen, onOpenChange: setHideColumnsOpen, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Popover2.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    setHideColumnsOpen(!hideColumnsOpen);
+                    onHideColumnsClick();
+                  },
+                  onMouseEnter: () => setHoveredButton("hideColumns"),
+                  onMouseLeave: () => setHoveredButton(null),
+                  onFocus: () => setFocusedButton("hideColumns"),
+                  onBlur: () => setFocusedButton(null),
+                  style: getDropdownButtonStyle("hideColumns"),
+                  "aria-label": "Hide Columns",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { style: dropdownTextStyles, children: "Hide Columns" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.ChevronDown, { size: 16, color: "#2f2f2f" })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Popover2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+                Popover2.Content,
+                {
+                  style: popoverContentStyles,
+                  sideOffset: 4,
+                  align: "start",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                      "button",
+                      {
+                        style: menuItemStyles,
+                        onMouseEnter: (e) => e.currentTarget.style.backgroundColor = "#f5f5f5",
+                        onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "white",
+                        onClick: () => {
+                          console.log("Hide Name column");
+                          setHideColumnsOpen(false);
+                        },
+                        children: "Name"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                      "button",
+                      {
+                        style: menuItemStyles,
+                        onMouseEnter: (e) => e.currentTarget.style.backgroundColor = "#f5f5f5",
+                        onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "white",
+                        onClick: () => {
+                          console.log("Hide Email column");
+                          setHideColumnsOpen(false);
+                        },
+                        children: "Email"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                      "button",
+                      {
+                        style: menuItemStyles,
+                        onMouseEnter: (e) => e.currentTarget.style.backgroundColor = "#f5f5f5",
+                        onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "white",
+                        onClick: () => {
+                          console.log("Hide Status column");
+                          setHideColumnsOpen(false);
+                        },
+                        children: "Status"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                      "button",
+                      {
+                        style: menuItemStyles,
+                        onMouseEnter: (e) => e.currentTarget.style.backgroundColor = "#f5f5f5",
+                        onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "white",
+                        onClick: () => {
+                          console.log("Hide Date column");
+                          setHideColumnsOpen(false);
+                        },
+                        children: "Date"
+                      }
+                    )
+                  ]
+                }
+              ) })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: actions2Styles, children: [
+            onSearchClick && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: onSearchClick,
+                onMouseEnter: () => setHoveredButton("search"),
+                onMouseLeave: () => setHoveredButton(null),
+                onFocus: () => setFocusedButton("search"),
+                onBlur: () => setFocusedButton(null),
+                style: getIconButtonStyle("search"),
+                "aria-label": "Search",
+                children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Search, { size: 16, color: "#2f2f2f" })
+              }
+            ),
+            onDownloadClick && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: onDownloadClick,
+                onMouseEnter: () => setHoveredButton("download"),
+                onMouseLeave: () => setHoveredButton(null),
+                onFocus: () => setFocusedButton("download"),
+                onBlur: () => setFocusedButton(null),
+                style: getIconButtonStyle("download"),
+                "aria-label": "Download",
+                children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Download, { size: 16, color: "#2f2f2f" })
+              }
+            ),
+            onTooltipsClick && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: onTooltipsClick,
+                onMouseEnter: () => setHoveredButton("tooltips"),
+                onMouseLeave: () => setHoveredButton(null),
+                onFocus: () => setFocusedButton("tooltips"),
+                onBlur: () => setFocusedButton(null),
+                style: getIconButtonStyle("tooltips"),
+                "aria-label": tooltipsEnabled ? "Disable tooltips" : "Enable tooltips",
+                children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                  import_lucide_react8.MessageSquare,
+                  {
+                    size: 16,
+                    color: "#2f2f2f"
+                  }
+                )
+              }
+            ),
+            onSettingsClick && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: onSettingsClick,
+                onMouseEnter: () => setHoveredButton("settings"),
+                onMouseLeave: () => setHoveredButton(null),
+                onFocus: () => setFocusedButton("settings"),
+                onBlur: () => setFocusedButton(null),
+                style: getIconButtonStyle("settings"),
+                "aria-label": "Settings",
+                children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Settings, { size: 16, color: "#2f2f2f" })
+              }
+            ),
+            onExpandClick && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: onExpandClick,
+                onMouseEnter: () => setHoveredButton("expand"),
+                onMouseLeave: () => setHoveredButton(null),
+                onFocus: () => setFocusedButton("expand"),
+                onBlur: () => setFocusedButton(null),
+                style: getIconButtonStyle("expand"),
+                "aria-label": "Expand",
+                children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Expand, { size: 16, color: "#2f2f2f" })
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+TableControls.displayName = "TableControls";
+
+// src/Table/Table.tsx
+var React19 = __toESM(require("react"));
+var import_clsx19 = require("clsx");
+var import_lucide_react9 = require("lucide-react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var tableStyles = {
+  width: "100%",
+  borderCollapse: "separate",
+  borderSpacing: 0,
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+};
+var headerCellStyles = {
+  height: "44px",
+  paddingLeft: "16px",
+  paddingRight: "16px",
+  paddingTop: 0,
+  paddingBottom: 0,
+  backgroundColor: "#f8f8f8",
+  borderBottom: "1px solid #efefef",
+  fontSize: "13px",
+  fontWeight: 600,
+  color: "#2f2f2f",
+  textAlign: "left",
+  position: "relative"
+};
+var checkboxCellStyles = {
+  width: "48px",
+  paddingLeft: "16px",
+  paddingRight: "8px"
+};
+var bodyCellStyles = {
+  height: "41px",
+  paddingLeft: "16px",
+  paddingRight: "16px",
+  paddingTop: "8px",
+  paddingBottom: "8px",
+  borderBottom: "1px solid #efefef",
+  fontSize: "13px",
+  color: "#2f2f2f"
+};
+var menuButtonStyles = {
+  width: "24px",
+  height: "24px",
+  border: "none",
+  backgroundColor: "transparent",
+  cursor: "pointer",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: 0,
+  marginLeft: "8px",
+  borderRadius: "4px",
+  transition: "background-color 0.2s ease-in-out"
+};
+var rowStyles = {
+  transition: "background-color 0.1s ease-in-out"
+};
+var Table = React19.forwardRef(
+  ({
+    columns,
+    rows,
+    onRowSelectionChange,
+    onSelectAllChange,
+    allSelected = false,
+    someSelected = false,
+    className,
+    style,
+    "data-testid": dataTestId
+  }, ref) => {
+    const [hoveredRow, setHoveredRow] = React19.useState(null);
+    const [hoveredMenuButton, setHoveredMenuButton] = React19.useState(null);
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+      "table",
+      {
+        ref,
+        className: (0, import_clsx19.clsx)("arbor-table", className),
+        style: { ...tableStyles, ...style },
+        "data-testid": dataTestId,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("tr", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("th", { style: { ...headerCellStyles, ...checkboxCellStyles }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              Checkbox,
+              {
+                checked: allSelected,
+                indeterminate: someSelected && !allSelected,
+                onChange: onSelectAllChange,
+                "aria-label": "Select all rows"
+              }
+            ) }),
+            columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              "th",
+              {
+                style: {
+                  ...headerCellStyles,
+                  ...column.width ? { width: column.width } : {}
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { display: "flex", alignItems: "center" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: column.label }),
+                  column.showMenu !== false && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onMouseEnter: () => setHoveredMenuButton(`header-${column.key}`),
+                      onMouseLeave: () => setHoveredMenuButton(null),
+                      style: {
+                        ...menuButtonStyles,
+                        backgroundColor: hoveredMenuButton === `header-${column.key}` ? "#f5f5f5" : "transparent"
+                      },
+                      "aria-label": `${column.label} options`,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react9.MoreVertical, { size: 16, color: "#595959" })
+                    }
+                  )
+                ] })
+              },
+              column.key
+            ))
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("tbody", { children: rows.map((row, index) => {
+            const isOdd = index % 2 === 0;
+            const isHovered = hoveredRow === row.id;
+            return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+              "tr",
+              {
+                onMouseEnter: () => setHoveredRow(row.id),
+                onMouseLeave: () => setHoveredRow(null),
+                style: {
+                  ...rowStyles,
+                  backgroundColor: isHovered ? "#fafafa" : isOdd ? "white" : "#f8f8f8"
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("td", { style: { ...bodyCellStyles, ...checkboxCellStyles }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                    Checkbox,
+                    {
+                      checked: row.selected || false,
+                      onChange: (checked) => onRowSelectionChange?.(row.id, checked),
+                      "aria-label": `Select row ${row.id}`
+                    }
+                  ) }),
+                  columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("td", { style: bodyCellStyles, children: row.cells[column.key] }, column.key))
+                ]
+              },
+              row.id
+            );
+          }) })
+        ]
+      }
+    );
+  }
+);
+Table.displayName = "Table";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Banner,
   Button,
   Card,
+  Checkbox,
+  Combobox,
+  DatePicker,
   Input,
-  Tag
+  NumericInput,
+  Pagination,
+  Radio,
+  Table,
+  TableControls,
+  TableFooterPagination,
+  Tabs,
+  Tag,
+  TextArea,
+  Toast,
+  Toggle,
+  Tooltip
 });
 //# sourceMappingURL=index.js.map