@tonyarbor/components 0.2.0 → 0.4.0

package/dist/index.js

@@ -30,14 +30,29 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  Avatar: () => Avatar,
+  Banner: () => Banner,
+  Breadcrumbs: () => Breadcrumbs,
   Button: () => Button,
   Card: () => Card,
   Checkbox: () => Checkbox,
   Combobox: () => Combobox,
+  DatePicker: () => DatePicker,
   Input: () => Input,
   NumericInput: () => NumericInput,
+  Pagination: () => Pagination,
   Radio: () => Radio,
-  Tag: () => Tag
+  SearchGlobal: () => SearchGlobal,
+  SearchOnPage: () => SearchOnPage,
+  Table: () => Table,
+  TableControls: () => TableControls,
+  TableFooterPagination: () => TableFooterPagination,
+  Tabs: () => Tabs,
+  Tag: () => Tag,
+  TextArea: () => TextArea,
+  Toast: () => Toast,
+  Toggle: () => Toggle,
+  Tooltip: () => Tooltip
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -1079,10 +1094,10 @@ var import_clsx7 = require("clsx");
 var import_lucide_react2 = require("lucide-react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var checkboxStyles = {
-  width: "20px",
-  height: "20px",
-  border: "2px solid #d1d1d1",
-  // grey-300
+  width: "16px",
+  height: "16px",
+  border: "1px solid #7e7e7e",
+  // grey-500
   borderRadius: "4px",
   display: "flex",
   alignItems: "center",
@@ -1093,9 +1108,18 @@ var checkboxStyles = {
   backgroundColor: "#ffffff"
 };
 var checkedStyles = {
-  backgroundColor: "#3cad51",
-  // brand-500
-  borderColor: "#3cad51"
+  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",
@@ -1119,10 +1143,24 @@ var Checkbox = React7.forwardRef(
     style,
     "data-testid": dataTestId,
     name,
-    value
+    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);
@@ -1130,12 +1168,16 @@ var Checkbox = React7.forwardRef(
     };
     const boxStyle = {
       ...checkboxStyles,
-      ...checked && !disabled && checkedStyles,
-      ...disabled && !checked && { backgroundColor: "#f8f8f8", borderColor: "#efefef" },
-      ...disabled && checked && { backgroundColor: "#7e7e7e", borderColor: "#7e7e7e" },
-      ...isFocused && !disabled && { borderColor: "#3cad51", outline: "2px solid rgba(60, 173, 81, 0.2)" }
+      ...(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 = disabled ? "#d1d1d1" : "#ffffff";
+    const checkmarkColor = "#ffffff";
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "div",
       {
@@ -1146,7 +1188,7 @@ var Checkbox = React7.forwardRef(
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "input",
             {
-              ref,
+              ref: innerRef,
               id: checkboxId,
               type: "checkbox",
               checked,
@@ -1162,13 +1204,15 @@ var Checkbox = React7.forwardRef(
                 width: 0,
                 height: 0
               },
-              "aria-checked": checked
+              "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",
@@ -1176,7 +1220,7 @@ var Checkbox = React7.forwardRef(
                 cursor: disabled ? "not-allowed" : "pointer"
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: boxStyle, children: checked && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.Check, { size: 14, color: checkmarkColor, strokeWidth: 3 }) }),
+                /* @__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",
                   {
@@ -1203,10 +1247,10 @@ var React8 = __toESM(require("react"));
 var import_clsx8 = require("clsx");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var radioStyles = {
-  width: "20px",
-  height: "20px",
-  border: "2px solid #d1d1d1",
-  // grey-300
+  width: "16px",
+  height: "16px",
+  border: "1px solid #7e7e7e",
+  // grey-500
   borderRadius: "50%",
   display: "flex",
   alignItems: "center",
@@ -1217,17 +1261,29 @@ var radioStyles = {
   backgroundColor: "#ffffff"
 };
 var checkedStyles2 = {
-  borderColor: "#3cad51"
-  // brand-500
+  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: "#3cad51",
-  // brand-500
+  backgroundColor: "#0e8a0e",
+  // brand-600
   transition: "all 0.2s ease-in-out"
 };
+var innerDotHoverStyles = {
+  backgroundColor: "#005700"
+  // brand-800
+};
 var labelStyles5 = {
   fontSize: "13px",
   color: "#2f2f2f",
@@ -1253,6 +1309,7 @@ var Radio = React8.forwardRef(
     value
   }, ref) => {
     const [isFocused, setIsFocused] = React8.useState(false);
+    const [isHovered, setIsHovered] = React8.useState(false);
     const radioId = React8.useId();
     const handleChange = (e) => {
       if (!disabled) {
@@ -1262,13 +1319,18 @@ var Radio = React8.forwardRef(
     const circleStyle = {
       ...radioStyles,
       ...checked && !disabled && checkedStyles2,
-      ...disabled && !checked && { backgroundColor: "#f8f8f8", borderColor: "#efefef" },
-      ...disabled && checked && { borderColor: "#7e7e7e" },
-      ...isFocused && !disabled && { borderColor: "#3cad51", outline: "2px solid rgba(60, 173, 81, 0.2)" }
+      ...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,
-      backgroundColor: disabled ? "#7e7e7e" : "#3cad51"
+      ...isHovered && !disabled && innerDotHoverStyles,
+      ...disabled && { backgroundColor: "#7e7e7e" }
     };
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "div",
@@ -1303,6 +1365,8 @@ var Radio = React8.forwardRef(
             "label",
             {
               htmlFor: radioId,
+              onMouseEnter: () => !disabled && setIsHovered(true),
+              onMouseLeave: () => !disabled && setIsHovered(false),
               style: {
                 display: "flex",
                 alignItems: "center",
@@ -1331,15 +1395,3335 @@ var Radio = React8.forwardRef(
   }
 );
 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";
+
+// src/Avatar/Avatar.tsx
+var React20 = __toESM(require("react"));
+var import_lucide_react10 = require("lucide-react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var sizeConfig = {
+  small: {
+    size: 20,
+    fontSize: 0,
+    // Too small for initials
+    fontWeight: 400,
+    iconSize: 12,
+    borderRadius: "99px"
+  },
+  medium: {
+    size: 32,
+    fontSize: 13,
+    fontWeight: 400,
+    iconSize: 16,
+    borderRadius: "99px"
+  },
+  large: {
+    size: 48,
+    fontSize: 13,
+    fontWeight: 400,
+    iconSize: 24,
+    borderRadius: "4px"
+  },
+  "extra-large": {
+    size: 96,
+    fontSize: 27,
+    fontWeight: 600,
+    iconSize: 48,
+    borderRadius: "8px"
+  }
+};
+var Avatar = React20.forwardRef(
+  ({
+    size = "medium",
+    src,
+    initials,
+    alt = "Avatar",
+    className,
+    style,
+    "data-testid": dataTestId
+  }, ref) => {
+    const [isHovered, setIsHovered] = React20.useState(false);
+    const [imageError, setImageError] = React20.useState(false);
+    const config = sizeConfig[size];
+    const hasHoverState = size === "small";
+    const containerStyles6 = {
+      width: `${config.size}px`,
+      height: `${config.size}px`,
+      borderRadius: config.borderRadius,
+      border: "1px solid #efefef",
+      overflow: "hidden",
+      position: "relative",
+      backgroundColor: "#f8f8f8",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+      cursor: "default",
+      boxSizing: "border-box",
+      ...style
+    };
+    const hoverOverlayStyles = {
+      position: "absolute",
+      inset: 0,
+      pointerEvents: "none",
+      boxShadow: isHovered && hasHoverState ? "inset 0px 4px 100px 0px rgba(32, 32, 32, 0.3)" : "none",
+      borderRadius: config.borderRadius,
+      transition: "box-shadow 0.2s ease-in-out"
+    };
+    const imageStyles = {
+      width: "100%",
+      height: "100%",
+      objectFit: "cover"
+    };
+    const initialsStyles = {
+      fontSize: `${config.fontSize}px`,
+      fontWeight: config.fontWeight,
+      color: "#2f2f2f",
+      lineHeight: 1.5,
+      textAlign: "center",
+      userSelect: "none"
+    };
+    const showImage = src && !imageError;
+    const showInitials = !showImage && initials && size !== "small";
+    const showPlaceholder = !showImage && !showInitials;
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+      "div",
+      {
+        ref,
+        className,
+        style: containerStyles6,
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        "data-testid": dataTestId,
+        children: [
+          showImage && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            "img",
+            {
+              src,
+              alt,
+              style: imageStyles,
+              onError: () => setImageError(true)
+            }
+          ),
+          showInitials && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { style: initialsStyles, children: initials.slice(0, 2).toUpperCase() }),
+          showPlaceholder && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.User, { size: config.iconSize, color: "#d1d1d1", strokeWidth: 2 }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: hoverOverlayStyles })
+        ]
+      }
+    );
+  }
+);
+Avatar.displayName = "Avatar";
+
+// src/SearchGlobal/SearchGlobal.tsx
+var React21 = __toESM(require("react"));
+var import_lucide_react11 = require("lucide-react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var SearchGlobal = React21.forwardRef(
+  ({
+    value = "",
+    onChange,
+    onSubmit,
+    onClear,
+    placeholder = "Search",
+    className,
+    style,
+    "data-testid": dataTestId
+  }, ref) => {
+    const [isFocused, setIsFocused] = React21.useState(false);
+    const [isHovered, setIsHovered] = React21.useState(false);
+    const inputRef = React21.useRef(null);
+    React21.useImperativeHandle(ref, () => inputRef.current);
+    const handleFocus = () => {
+      setIsFocused(true);
+    };
+    const handleBlur = () => {
+      setIsFocused(false);
+    };
+    const handleChange = (e) => {
+      onChange?.(e.target.value);
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter") {
+        onSubmit?.(value);
+      }
+    };
+    const handleClear = () => {
+      onChange?.("");
+      onClear?.();
+      inputRef.current?.focus();
+    };
+    const containerStyles6 = {
+      position: "relative",
+      width: isFocused ? "300px" : "160px",
+      height: "32px",
+      backgroundColor: isFocused ? "#ffffff" : isHovered ? "#efefef" : "#f8f8f8",
+      borderRadius: "16px",
+      padding: "8px 16px",
+      display: "flex",
+      alignItems: "center",
+      gap: isFocused ? "8px" : "8px",
+      cursor: "text",
+      transition: "all 0.2s ease-in-out",
+      boxSizing: "border-box",
+      border: isFocused ? "1px solid #efefef" : "none",
+      boxShadow: isFocused ? "0px 0px 0px 3px #3cad51" : "none",
+      marginLeft: isFocused ? "-140px" : "0",
+      // Expand to the left
+      ...style
+    };
+    const iconContainerStyles2 = {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      padding: "2px"
+    };
+    const inputStyles5 = {
+      border: "none",
+      outline: "none",
+      backgroundColor: "transparent",
+      fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+      fontSize: "13px",
+      fontWeight: 400,
+      color: "#2f2f2f",
+      lineHeight: "1.5",
+      flex: 1,
+      width: "100%",
+      minWidth: 0
+    };
+    const keyboardShortcutStyles = {
+      display: "flex",
+      alignItems: "center",
+      gap: "0px",
+      flexShrink: 0
+    };
+    const keyStyles = {
+      border: "1px solid #2f2f2f",
+      borderRadius: "5px",
+      padding: "0px 3px",
+      height: "16px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontFamily: "'Work Sans', sans-serif",
+      fontSize: "8px",
+      fontWeight: 400,
+      color: "#2f2f2f",
+      letterSpacing: "-0.08px",
+      lineHeight: "1.5",
+      minWidth: "16px"
+    };
+    const plusStyles = {
+      fontFamily: "'Work Sans', sans-serif",
+      fontSize: "8px",
+      fontWeight: 400,
+      color: "#2f2f2f",
+      letterSpacing: "-0.08px",
+      lineHeight: "1.5",
+      padding: "0 2px"
+    };
+    const clearButtonStyles = {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      width: "16px",
+      height: "16px",
+      cursor: "pointer",
+      border: "none",
+      background: "none",
+      padding: 0
+    };
+    const showKeyboardShortcut = isHovered && !isFocused;
+    const showClearButton = isFocused;
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      "div",
+      {
+        className,
+        style: containerStyles6,
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        onClick: () => inputRef.current?.focus(),
+        "data-testid": dataTestId,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: iconContainerStyles2, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react11.Search, { size: 12, color: "#2f2f2f", strokeWidth: 2 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              value,
+              onChange: handleChange,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              onKeyDown: handleKeyDown,
+              placeholder: isFocused ? "" : placeholder,
+              style: inputStyles5
+            }
+          ),
+          showKeyboardShortcut && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: keyboardShortcutStyles, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: keyStyles, children: "\u2318" }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { style: plusStyles, children: "+" }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: keyStyles, children: "K" })
+          ] }),
+          showClearButton && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: handleClear,
+              style: clearButtonStyles,
+              "aria-label": "Clear search",
+              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react11.X, { size: 13.333, color: "#2f2f2f", strokeWidth: 2 })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+SearchGlobal.displayName = "SearchGlobal";
+
+// src/SearchOnPage/SearchOnPage.tsx
+var React22 = __toESM(require("react"));
+var import_lucide_react12 = require("lucide-react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var SearchOnPage = React22.forwardRef(
+  ({
+    value = "",
+    onChange,
+    onSubmit,
+    onClear,
+    placeholder = "Search Reports",
+    className,
+    style,
+    "data-testid": dataTestId
+  }, ref) => {
+    const [isFocused, setIsFocused] = React22.useState(false);
+    const [isHovered, setIsHovered] = React22.useState(false);
+    const inputRef = React22.useRef(null);
+    React22.useImperativeHandle(ref, () => inputRef.current);
+    const handleFocus = () => {
+      setIsFocused(true);
+    };
+    const handleBlur = () => {
+      setIsFocused(false);
+    };
+    const handleChange = (e) => {
+      onChange?.(e.target.value);
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter") {
+        onSubmit?.(value);
+      }
+    };
+    const handleClear = () => {
+      onChange?.("");
+      onClear?.();
+      inputRef.current?.focus();
+    };
+    const containerStyles6 = {
+      position: "relative",
+      width: "200px",
+      height: "32px",
+      backgroundColor: isFocused ? "#ffffff" : isHovered ? "#efefef" : "#ffffff",
+      borderRadius: "16px",
+      padding: "8px 16px",
+      display: "flex",
+      alignItems: "center",
+      gap: "8px",
+      cursor: "text",
+      transition: "all 0.2s ease-in-out",
+      boxSizing: "border-box",
+      border: isFocused ? "1px solid #efefef" : "none",
+      boxShadow: isFocused ? "0px 0px 0px 3px #3cad51" : "none",
+      ...style
+    };
+    const iconContainerStyles2 = {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      padding: "2px"
+    };
+    const inputStyles5 = {
+      border: "none",
+      outline: "none",
+      backgroundColor: "transparent",
+      fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+      fontSize: "13px",
+      fontWeight: 400,
+      color: "#2f2f2f",
+      lineHeight: "1.5",
+      flex: 1,
+      width: "100%",
+      minWidth: 0
+    };
+    const clearButtonStyles = {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      width: "16px",
+      height: "16px",
+      cursor: "pointer",
+      border: "none",
+      background: "none",
+      padding: 0
+    };
+    const showClearButton = isFocused && value.length > 0;
+    const iconColor = isFocused || isHovered ? "#2f2f2f" : "#595959";
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+      "div",
+      {
+        className,
+        style: containerStyles6,
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        onClick: () => inputRef.current?.focus(),
+        "data-testid": dataTestId,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: iconContainerStyles2, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react12.Search, { size: 12, color: iconColor, strokeWidth: 2 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              value,
+              onChange: handleChange,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              onKeyDown: handleKeyDown,
+              placeholder: isFocused ? "" : placeholder,
+              style: inputStyles5
+            }
+          ),
+          showClearButton && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: handleClear,
+              style: clearButtonStyles,
+              "aria-label": "Clear search",
+              children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react12.X, { size: 13.333, color: "#2f2f2f", strokeWidth: 2 })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+SearchOnPage.displayName = "SearchOnPage";
+
+// src/Breadcrumbs/Breadcrumbs.tsx
+var React23 = __toESM(require("react"));
+var import_lucide_react13 = require("lucide-react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var Breadcrumbs = React23.forwardRef(
+  ({
+    items,
+    onCopy,
+    className,
+    style,
+    "data-testid": dataTestId
+  }, ref) => {
+    const [hoveredIndex, setHoveredIndex] = React23.useState(null);
+    const [focusedIndex, setFocusedIndex] = React23.useState(null);
+    const [showCopyTooltip, setShowCopyTooltip] = React23.useState(false);
+    const [ellipsisFocused, setEllipsisFocused] = React23.useState(false);
+    const [ellipsisHovered, setEllipsisHovered] = React23.useState(false);
+    const displayItems = React23.useMemo(() => {
+      if (items.length > 6) {
+        return [items[0], { label: "...", isEllipsis: true }, items[items.length - 1]];
+      }
+      return items;
+    }, [items]);
+    const handleCopy = () => {
+      onCopy?.();
+      const trail = items.map((item) => item.label).join(" / ");
+      navigator.clipboard.writeText(trail);
+    };
+    const containerStyles6 = {
+      display: "flex",
+      alignItems: "center",
+      gap: "8px",
+      ...style
+    };
+    const breadcrumbItemStyles = (index, isActive, isEllipsis) => {
+      const isFocused = focusedIndex === index;
+      if (isEllipsis) {
+        return {
+          display: "flex",
+          alignItems: "center",
+          gap: "4px",
+          height: "24px",
+          overflow: "hidden"
+        };
+      }
+      return {
+        display: "flex",
+        alignItems: "center",
+        gap: "4px",
+        height: "24px",
+        overflow: "hidden",
+        backgroundColor: isFocused ? "rgba(255, 255, 255, 0.01)" : "transparent",
+        borderRadius: "99px",
+        boxShadow: isFocused ? "0px 0px 0px 3px #3cad51" : "none",
+        padding: isFocused ? "0 6px" : "0 2px",
+        margin: isFocused ? "0" : "0 4px",
+        cursor: isActive ? "default" : "pointer",
+        textDecoration: "none"
+      };
+    };
+    const linkStyles = (isActive, isHovered) => ({
+      fontFamily: isActive ? "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" : "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+      fontSize: "13px",
+      fontWeight: isActive ? 600 : 400,
+      color: isActive ? isHovered ? "#0e8a0e" : "#2f2f2f" : isHovered ? "#0e8a0e" : "#595959",
+      lineHeight: "1.5",
+      whiteSpace: "nowrap"
+    });
+    const dividerStyles = {
+      fontFamily: "'PT Sans', sans-serif",
+      fontSize: "14px",
+      color: "#595959",
+      lineHeight: "normal",
+      whiteSpace: "nowrap"
+    };
+    const ellipsisButtonStyles = {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "24px",
+      height: "24px",
+      borderRadius: "99px",
+      border: "none",
+      background: "transparent",
+      cursor: "pointer",
+      backgroundColor: ellipsisFocused ? "rgba(255, 255, 255, 0.01)" : ellipsisHovered ? "#efefef" : "transparent",
+      boxShadow: ellipsisFocused ? "0px 0px 0px 3px #3cad51" : "none"
+    };
+    const copyButtonStyles = {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "24px",
+      height: "24px",
+      borderRadius: "99px",
+      border: "none",
+      background: showCopyTooltip ? "#efefef" : "transparent",
+      cursor: "pointer",
+      position: "relative"
+    };
+    const tooltipStyles2 = {
+      position: "absolute",
+      top: "100%",
+      left: "50%",
+      transform: "translateX(-50%)",
+      marginTop: "8px",
+      backgroundColor: "#2f2f2f",
+      color: "white",
+      padding: "12px",
+      borderRadius: "8px",
+      fontSize: "13px",
+      fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+      fontWeight: 400,
+      lineHeight: "1.5",
+      whiteSpace: "nowrap",
+      boxShadow: "0px 4px 12px rgba(32, 32, 32, 0.08)",
+      zIndex: 1e3
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      "div",
+      {
+        ref,
+        className,
+        style: containerStyles6,
+        "data-testid": dataTestId,
+        children: displayItems.map((item, index) => {
+          const isActive = index === displayItems.length - 1;
+          const isEllipsis = "isEllipsis" in item && item.isEllipsis;
+          if (isEllipsis) {
+            return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(React23.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                "button",
+                {
+                  style: ellipsisButtonStyles,
+                  onFocus: () => setEllipsisFocused(true),
+                  onBlur: () => setEllipsisFocused(false),
+                  onMouseEnter: () => setEllipsisHovered(true),
+                  onMouseLeave: () => setEllipsisHovered(false),
+                  "aria-label": "More breadcrumbs",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                    import_lucide_react13.MoreHorizontal,
+                    {
+                      size: 12,
+                      color: "#2f2f2f",
+                      strokeWidth: 2,
+                      style: { display: "block", flexShrink: 0 }
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { style: dividerStyles, children: " /" })
+            ] }, `ellipsis-${index}`);
+          }
+          const breadcrumbItem = item;
+          if (isActive) {
+            return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(React23.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                "div",
+                {
+                  style: breadcrumbItemStyles(index, true),
+                  onMouseEnter: () => setHoveredIndex(index),
+                  onMouseLeave: () => setHoveredIndex(null),
+                  onFocus: () => setFocusedIndex(index),
+                  onBlur: () => setFocusedIndex(null),
+                  tabIndex: 0,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { style: linkStyles(true, hoveredIndex === index), children: breadcrumbItem.label })
+                }
+              ),
+              onCopy && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                "button",
+                {
+                  style: copyButtonStyles,
+                  onClick: handleCopy,
+                  onMouseEnter: () => setShowCopyTooltip(true),
+                  onMouseLeave: () => setShowCopyTooltip(false),
+                  "aria-label": "Copy breadcrumb trail",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                      import_lucide_react13.Link,
+                      {
+                        size: 12,
+                        color: "#2f2f2f",
+                        strokeWidth: 2,
+                        style: { display: "block", flexShrink: 0 }
+                      }
+                    ),
+                    showCopyTooltip && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: tooltipStyles2, children: "Copy breadcrumb trail" })
+                  ]
+                }
+              )
+            ] }, index);
+          }
+          const Element = breadcrumbItem.href ? "a" : "button";
+          return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(React23.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+              Element,
+              {
+                ...breadcrumbItem.href ? { href: breadcrumbItem.href } : {},
+                style: {
+                  ...breadcrumbItemStyles(index, false),
+                  border: "none",
+                  background: "transparent"
+                },
+                onClick: (e) => {
+                  if (!breadcrumbItem.href && breadcrumbItem.onClick) {
+                    e.preventDefault();
+                    breadcrumbItem.onClick();
+                  }
+                },
+                onMouseEnter: () => setHoveredIndex(index),
+                onMouseLeave: () => setHoveredIndex(null),
+                onFocus: () => setFocusedIndex(index),
+                onBlur: () => setFocusedIndex(null),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { style: linkStyles(false, hoveredIndex === index), children: breadcrumbItem.label }),
+                  breadcrumbItem.hasDropdown && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                    import_lucide_react13.ChevronDown,
+                    {
+                      size: 12,
+                      color: hoveredIndex === index ? "#0e8a0e" : "#595959",
+                      strokeWidth: 2,
+                      style: { marginLeft: "2px", display: "inline-block", flexShrink: 0 }
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { style: dividerStyles, children: " /" })
+          ] }, index);
+        })
+      }
+    );
+  }
+);
+Breadcrumbs.displayName = "Breadcrumbs";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Avatar,
+  Banner,
+  Breadcrumbs,
   Button,
   Card,
   Checkbox,
   Combobox,
+  DatePicker,
   Input,
   NumericInput,
+  Pagination,
   Radio,
-  Tag
+  SearchGlobal,
+  SearchOnPage,
+  Table,
+  TableControls,
+  TableFooterPagination,
+  Tabs,
+  Tag,
+  TextArea,
+  Toast,
+  Toggle,
+  Tooltip
 });
 //# sourceMappingURL=index.js.map