@raydenui/ui 0.8.0 → 0.9.1

package/dist/index.cjs

@@ -5709,11 +5709,7 @@ var Accordion = react.forwardRef(
       "div",
       {
         ref,
-        className: cn(
-          "w-full",
-          type === "nested" && "flex flex-col gap-3",
-          className
-        ),
+        className: cn("w-full", type === "nested" && "flex flex-col gap-3", className),
         ...rest,
         children
       }
@@ -5734,13 +5730,7 @@ var AccordionItem = react.forwardRef(
         ref,
         className: cn(
           "border-solid transition-colors",
-          type === "default" ? cn(
-            "border-b",
-            isOpen ? "border-primary-300" : "border-grey-100"
-          ) : cn(
-            "border rounded-[10px]",
-            isOpen ? "border-primary-300" : "border-grey-75"
-          ),
+          type === "default" ? cn("border-b", isOpen ? "border-primary-300" : "border-grey-100") : cn("border rounded-[10px]", isOpen ? "border-primary-300" : "border-grey-75"),
           className
         ),
         ...rest,
@@ -6001,7 +5991,7 @@ var Input = react.forwardRef(
                 disabled && "cursor-not-allowed"
               ),
               children: [
-                leadingIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 size-6 text-grey-400", children: resolveIcon(leadingIcon, "md") }),
+                leadingIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 size-6 text-grey-400", "aria-hidden": "true", children: resolveIcon(leadingIcon, "md") }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "input",
                   {
@@ -6021,7 +6011,7 @@ var Input = react.forwardRef(
                   }
                 ),
                 addonRight && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-sm text-grey-500", children: addonRight }),
-                trailingIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 size-6 text-grey-400", children: resolveIcon(trailingIcon, "md") })
+                trailingIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 size-6 text-grey-400", "aria-hidden": "true", children: resolveIcon(trailingIcon, "md") })
               ]
             }
           ),
@@ -6061,7 +6051,7 @@ var Input = react.forwardRef(
             readOnly ? "bg-grey-100 border-grey-300" : disabled ? "bg-grey-50 border-grey-200 cursor-not-allowed" : cn("bg-white dark:bg-grey-50", borderColor)
           ),
           children: [
-            leadingIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 size-6 text-grey-400", children: resolveIcon(leadingIcon, "md") }),
+            leadingIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 size-6 text-grey-400", "aria-hidden": "true", children: resolveIcon(leadingIcon, "md") }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "input",
               {
@@ -6081,7 +6071,7 @@ var Input = react.forwardRef(
               }
             ),
             addonRight && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-sm text-grey-500", children: addonRight }),
-            trailingIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 size-6 text-grey-400", children: resolveIcon(trailingIcon, "md") })
+            trailingIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 size-6 text-grey-400", "aria-hidden": "true", children: resolveIcon(trailingIcon, "md") })
           ]
         }
       ),
@@ -6519,24 +6509,37 @@ var RaydenChart = react.forwardRef(
       [type, options]
     );
     const ChartComponent = chartComponentMap[type];
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        className: cn("relative", className),
-        style: { height, width },
-        ...rest,
-        children: /* @__PURE__ */ jsxRuntime.jsx(ChartComponent, { data, options: mergedOptions })
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("relative", className), style: { height, width }, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(ChartComponent, { data, options: mergedOptions }) });
   }
 );
 RaydenChart.displayName = "RaydenChart";
 function MinusIcon({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 12h14" }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 12h14" })
+    }
+  );
 }
 function PlusIcon({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 5v14M5 12h14" }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 5v14M5 12h14" })
+    }
+  );
 }
 var buttonSize = {
   sm: "size-8 rounded-[10px]",
@@ -6614,10 +6617,7 @@ var Counter = react.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
-              className: cn(
-                "font-medium text-grey-900 text-center leading-[1.45]",
-                valueText[size]
-              ),
+              className: cn("font-medium text-grey-900 text-center leading-[1.45]", valueText[size]),
               children: val
             }
           ) }),
@@ -6661,14 +6661,15 @@ var NumberCounter = react.forwardRef(
       "div",
       {
         ref,
-        className: cn(
-          "inline-flex items-center justify-center",
-          s.container,
-          c.bg,
-          className
-        ),
+        className: cn("inline-flex items-center justify-center", s.container, c.bg, className),
         ...rest,
-        children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-semibold text-center leading-[1.45] tracking-tight", s.text, c.text), children: value })
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn("font-semibold text-center leading-[1.45] tracking-tight", s.text, c.text),
+            children: value
+          }
+        )
       }
     );
   }
@@ -6716,15 +6717,54 @@ function isDateDisabled(date, minDate, maxDate) {
   return false;
 }
 function ChevronLeft({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 3L5 7l4 4" }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 14 14",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 3L5 7l4 4" })
+    }
+  );
 }
 function ChevronRight({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 3l4 4-4 4" }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 14 14",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 3l4 4-4 4" })
+    }
+  );
 }
 function ChevronDown2({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 9l6 6 6-6" }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 9l6 6 6-6" })
+    }
+  );
 }
-function DayCell({ day, state, onClick }) {
+function DayCell({ day, state, fullDate, onClick }) {
   const isInteractive = state !== "disabled";
   const cellClasses = cn(
     "flex items-center justify-center w-10 h-10 text-sm font-medium relative select-none",
@@ -6737,6 +6777,13 @@ function DayCell({ day, state, onClick }) {
     state === "today" && "text-grey-900 hover:bg-grey-75 rounded-[10px]",
     isInteractive && "cursor-pointer"
   );
+  const dateLabel = fullDate.toLocaleDateString("en-US", {
+    weekday: "long",
+    year: "numeric",
+    month: "long",
+    day: "numeric"
+  });
+  const stateLabel = state === "today" ? "Today, " : state === "selected" ? "Selected, " : state === "start-range" ? "Start of range, " : state === "end-range" ? "End of range, " : state === "mid-range" ? "In selected range, " : "";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
@@ -6745,9 +6792,12 @@ function DayCell({ day, state, onClick }) {
       onClick: isInteractive ? onClick : void 0,
       disabled: !isInteractive,
       tabIndex: isInteractive ? 0 : -1,
+      "aria-label": `${stateLabel}${dateLabel}`,
+      "aria-current": state === "today" ? "date" : void 0,
+      "aria-pressed": state === "selected" || state === "start-range" || state === "end-range" ? true : void 0,
       children: [
         day,
-        state === "today" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute bottom-[5px] left-1/2 -translate-x-1/2 size-1 rounded-full bg-primary-400" })
+        state === "today" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute bottom-[5px] left-1/2 -translate-x-1/2 size-1 rounded-full bg-primary-400", "aria-hidden": "true" })
       ]
     }
   );
@@ -6803,20 +6853,24 @@ function MonthGrid({
   if (rows.length === 6 && rows[5].every((c) => c.state === "disabled")) {
     rows.pop();
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-10 items-center", children: DAY_LABELS.map((label, i) => /* @__PURE__ */ jsxRuntime.jsx(
+  const fullDayNames = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", role: "grid", "aria-label": "Calendar", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-10 items-center", role: "row", children: DAY_LABELS.map((label, i) => /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
+        role: "columnheader",
+        "aria-label": fullDayNames[i],
         className: "flex items-center justify-center w-10 h-10 text-sm font-medium text-grey-400",
         children: label
       },
       i
     )) }),
-    rows.map((row, ri) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-10 items-center", children: row.map((cell, ci) => /* @__PURE__ */ jsxRuntime.jsx(
+    rows.map((row, ri) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-10 items-center", role: "row", children: row.map((cell, ci) => /* @__PURE__ */ jsxRuntime.jsx(
       DayCell,
       {
         day: cell.day,
         state: cell.state,
+        fullDate: cell.date,
         onClick: () => onDayClick(cell.date)
       },
       ci
@@ -6832,10 +6886,12 @@ function YearGrid({ baseYear, selectedYear, onYearClick }) {
   for (let i = 0; i < years.length; i += 4) {
     rows.push(years.slice(i, i + 4));
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2 w-full", children: rows.map((row, ri) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-4 h-10 items-center w-full", children: row.map((year) => /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2 w-full", role: "grid", "aria-label": "Year selection", children: rows.map((row, ri) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-4 h-10 items-center w-full", role: "row", children: row.map((year) => /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
       type: "button",
+      "aria-label": year === selectedYear ? `${year}, selected` : String(year),
+      "aria-pressed": year === selectedYear || void 0,
       className: cn(
         "flex-1 flex items-center justify-center py-2.5 px-4 rounded-[10px] text-sm font-medium cursor-pointer select-none",
         year === selectedYear ? "bg-primary-400 text-white" : "text-grey-900 hover:bg-grey-75"
@@ -6856,6 +6912,9 @@ function NavButton({
     {
       type: "button",
       onClick,
+      "aria-label": direction === "left" ? "Previous month" : "Next month",
+      "aria-hidden": hidden || void 0,
+      tabIndex: hidden ? -1 : void 0,
       className: cn(
         "flex items-center justify-center p-2 rounded-lg bg-grey-75 hover:bg-grey-200 transition-colors cursor-pointer",
         hidden && "opacity-0 pointer-events-none"
@@ -7350,37 +7409,91 @@ function ProgressCircle({
 var statusColors = {
   information: {
     bold: { bg: "bg-[#4a9fed]", divider: "bg-[#f0f7ff]" },
-    subtle: { bg: "bg-[#f0f7ff]", text: "text-grey-900", descText: "text-grey-600", divider: "bg-[#0063ad]" }
+    subtle: {
+      bg: "bg-[#f0f7ff]",
+      text: "text-grey-900",
+      descText: "text-grey-600",
+      divider: "bg-[#0063ad]"
+    }
   },
   success: {
     bold: { bg: "bg-success-400", divider: "bg-success-50" },
-    subtle: { bg: "bg-success-50", text: "text-grey-900", descText: "text-grey-600", divider: "bg-success-400" }
+    subtle: {
+      bg: "bg-success-50",
+      text: "text-grey-900",
+      descText: "text-grey-600",
+      divider: "bg-success-400"
+    }
   },
   error: {
     bold: { bg: "bg-error-400", divider: "bg-error-50" },
-    subtle: { bg: "bg-error-50", text: "text-grey-900", descText: "text-grey-600", divider: "bg-error-400" }
+    subtle: {
+      bg: "bg-error-50",
+      text: "text-grey-900",
+      descText: "text-grey-600",
+      divider: "bg-error-400"
+    }
   },
   warning: {
     bold: { bg: "bg-warning-400", divider: "bg-warning-50" },
-    subtle: { bg: "bg-warning-50", text: "text-grey-900", descText: "text-grey-600", divider: "bg-warning-700" }
+    subtle: {
+      bg: "bg-warning-50",
+      text: "text-grey-900",
+      descText: "text-grey-600",
+      divider: "bg-warning-700"
+    }
   },
   feature: {
     bold: { bg: "bg-grey-900", divider: "bg-grey-100" },
-    subtle: { bg: "bg-grey-50", text: "text-black", descText: "text-black", divider: "bg-grey-300" }
+    subtle: {
+      bg: "bg-grey-50",
+      text: "text-black",
+      descText: "text-black",
+      divider: "bg-grey-300"
+    }
   },
   opportunity: {
     bold: { bg: "bg-[#475ccc]", divider: "bg-[#b1bae9]" },
-    subtle: { bg: "bg-[#f7f8fd]", text: "text-grey-900", descText: "text-grey-600", divider: "bg-[#b1bae9]" }
+    subtle: {
+      bg: "bg-[#f7f8fd]",
+      text: "text-grey-900",
+      descText: "text-grey-600",
+      divider: "bg-[#b1bae9]"
+    }
   }
 };
 function InfoIcon({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 16v-4M12 8h.01" })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 16v-4M12 8h.01" })
+      ]
+    }
+  );
 }
 function CloseIcon({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6L6 18M6 6l12 12" }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6L6 18M6 6l12 12" })
+    }
+  );
 }
 var Banner = react.forwardRef(
   ({
@@ -7420,7 +7533,13 @@ var Banner = react.forwardRef(
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-1 items-center", size === "sm" ? "gap-2" : "gap-3"), children: [
             icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("shrink-0", iconSize4, textColor), children: resolveIcon(icon, size === "sm" ? "sm" : "md") }) : /* @__PURE__ */ jsxRuntime.jsx(InfoIcon, { className: cn("shrink-0", iconSize4, textColor) }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-semibold leading-[1.45] whitespace-nowrap", textSize2, textColor), children: title }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cn("font-semibold leading-[1.45] whitespace-nowrap", textSize2, textColor),
+                children: title
+              }
+            ),
             description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("leading-[1.45] whitespace-nowrap", textSize2, descColor), children: description }),
             buttonLabel && /* @__PURE__ */ jsxRuntime.jsx(
               "button",
@@ -8071,10 +8190,34 @@ var Toggle = react.forwardRef(
 );
 Toggle.displayName = "Toggle";
 function ChevronRight3({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7.5 5l5 5-5 5" }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 20 20",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7.5 5l5 5-5 5" })
+    }
+  );
 }
 function DoubleChevronRight({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5.5 5l5 5-5 5M10.5 5l5 5-5 5" }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 20 20",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5.5 5l5 5-5 5M10.5 5l5 5-5 5" })
+    }
+  );
 }
 function SeparatorElement({ type }) {
   switch (type) {
@@ -8097,11 +8240,7 @@ function Breadcrumb({
     "nav",
     {
       "aria-label": "Breadcrumb",
-      className: cn(
-        "py-2.5",
-        hasBorders && "border-y border-grey-100",
-        className
-      ),
+      className: cn("py-2.5", hasBorders && "border-y border-grey-100", className),
       ...rest,
       children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex items-center gap-4 text-sm font-medium", children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center gap-4", children: [
         i > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(SeparatorElement, { type: separator }) }),
@@ -8274,13 +8413,37 @@ var AvatarGroup = react.forwardRef(
 );
 AvatarGroup.displayName = "AvatarGroup";
 function CloseIcon2({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 3L3 9M3 3l6 6" }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 12 12",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.5,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 3L3 9M3 3l6 6" })
+    }
+  );
 }
 function BoxIcon({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2.67 4.67L8 7.33l5.33-2.66M8 14V7.33" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13.33 10.67V5.33a1.33 1.33 0 00-.66-1.15L8.67 2a1.33 1.33 0 00-1.34 0L3.33 4.18A1.33 1.33 0 002.67 5.33v5.34a1.33 1.33 0 00.66 1.15L7.33 14a1.33 1.33 0 001.34 0l4-2.18a1.33 1.33 0 00.66-1.15z" })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 16 16",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2.67 4.67L8 7.33l5.33-2.66M8 14V7.33" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13.33 10.67V5.33a1.33 1.33 0 00-.66-1.15L8.67 2a1.33 1.33 0 00-1.34 0L3.33 4.18A1.33 1.33 0 002.67 5.33v5.34a1.33 1.33 0 00.66 1.15L7.33 14a1.33 1.33 0 001.34 0l4-2.18a1.33 1.33 0 00.66-1.15z" })
+      ]
+    }
+  );
 }
 var sizeClasses2 = {
   sm: "w-[400px]",
@@ -8871,6 +9034,8 @@ var FileUploadDropZone = react.forwardRef(
       "div",
       {
         ref,
+        role: "region",
+        "aria-label": "File upload dropzone",
         className: cn(
           "flex flex-col items-center justify-center rounded-xl p-8 transition-colors",
           state === "dragging" ? "border-2 border-dashed border-primary-400 bg-primary-50/10" : state === "uploading" || state === "success" || state === "error" ? "border border-grey-200 bg-white dark:bg-grey-50" : "border-2 border-dashed border-grey-300 bg-white dark:bg-grey-50",
@@ -8891,11 +9056,12 @@ var FileUploadDropZone = react.forwardRef(
               multiple,
               onChange: handleFileChange,
               className: "sr-only",
-              tabIndex: -1
+              tabIndex: -1,
+              "aria-label": multiple ? "Choose files to upload" : "Choose file to upload"
             }
           ),
           (state === "default" || state === "dragging") && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(UploadStateIcon, { state: "default", size: 56 }),
+            /* @__PURE__ */ jsxRuntime.jsx(UploadStateIcon, { state: "default", size: 56, "aria-hidden": "true" }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-1", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-body-sm font-medium text-grey-600", children: [
                 "Click to upload ",
@@ -8905,12 +9071,12 @@ var FileUploadDropZone = react.forwardRef(
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", size: "sm", onClick: handleBrowse, children: "Browse Files" })
           ] }),
-          state === "uploading" && uploadingFile && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col items-center gap-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(FileTypeIcon, { type: getFileType(uploadingFile.name) }),
+          state === "uploading" && uploadingFile && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col items-center gap-4", "aria-live": "polite", "aria-atomic": "true", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(FileTypeIcon, { type: getFileType(uploadingFile.name), "aria-hidden": "true" }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-xs flex-col gap-2", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-body-sm font-medium text-grey-700 truncate", children: uploadingFile.name }),
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-body-xs font-medium text-grey-500 ml-2 shrink-0", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-body-xs font-medium text-grey-500 ml-2 shrink-0", "aria-label": `Upload progress: ${Math.round(uploadingFile.progress)} percent`, children: [
                   Math.round(uploadingFile.progress),
                   "%"
                 ] })
@@ -8918,8 +9084,8 @@ var FileUploadDropZone = react.forwardRef(
               /* @__PURE__ */ jsxRuntime.jsx(ProgressBar, { value: uploadingFile.progress, size: "sm", showPercentage: false })
             ] })
           ] }),
-          state === "success" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(UploadStateIcon, { state: "success", size: 56 }),
+          state === "success" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", role: "status", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(UploadStateIcon, { state: "success", size: 56, "aria-hidden": "true" }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center gap-1", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-body-sm font-semibold text-grey-800", children: "Document Uploaded Successfully" }) }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "button",
@@ -8931,8 +9097,8 @@ var FileUploadDropZone = react.forwardRef(
               }
             )
           ] }),
-          state === "error" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(UploadStateIcon, { state: "error", size: 56 }),
+          state === "error" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", role: "alert", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(UploadStateIcon, { state: "error", size: 56, "aria-hidden": "true" }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-1", children: [
               /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-body-sm font-semibold text-grey-800", children: "Failed to Upload" }),
               errorMessage && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-body-xs text-grey-400", children: errorMessage })
@@ -9264,7 +9430,7 @@ var SidebarMenu = react.forwardRef(
       "nav",
       {
         ref,
-        role: "navigation",
+        "aria-label": "Main navigation",
         className: cn(
           "flex flex-col gap-3 overflow-y-auto rounded-xl py-6",
           ts.container,
@@ -9354,7 +9520,7 @@ var SidebarMenuItem = react.forwardRef(
           onClick: () => {
             if (!disabled && !isExpandable) onSelect(value);
           },
-          title: typeof labelContent === "string" ? labelContent : void 0,
+          "aria-label": typeof labelContent === "string" ? labelContent : void 0,
           className: cn(
             "flex size-11 cursor-pointer items-center justify-center rounded transition-colors",
             highlighted ? cn(ts.selectedBg, ts.selectedIcon) : cn(ts.defaultIcon, ts.hoverBg),
@@ -9373,6 +9539,8 @@ var SidebarMenuItem = react.forwardRef(
           ref,
           type: "button",
           role: "menuitem",
+          "aria-expanded": isExpandable ? open : void 0,
+          "aria-haspopup": isExpandable ? "menu" : void 0,
           disabled,
           onClick: handleClick,
           className: cn(
@@ -9400,6 +9568,7 @@ var SidebarMenuItem = react.forwardRef(
               {
                 name: open ? "chevron-up" : "chevron-down",
                 size: "sm",
+                "aria-hidden": "true",
                 className: cn(
                   "ml-1 shrink-0 transition-transform",
                   highlighted ? ts.selectedIcon : ts.defaultIcon
@@ -12864,6 +13033,7 @@ var TableHead = react.forwardRef(
           {
             name: sortDirection === "asc" ? "chevron-up" : "chevron-down",
             size: "sm",
+            "aria-hidden": "true",
             className: cn("shrink-0", sortDirection ? "text-grey-700" : "text-grey-400")
           }
         )
@@ -13133,8 +13303,33 @@ function ThinSpinner({ size, color }) {
   const r = size / 2 - 2;
   const c = size / 2;
   return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, className: "animate-spin", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: c, cy: c, r, fill: "none", stroke: "currentColor", strokeWidth: 1.5, opacity: 0.2, className: color }),
-    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: c, cy: c, r, fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeDasharray: `${r * Math.PI * 0.75} ${r * Math.PI * 1.25}`, strokeLinecap: "round", className: color })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "circle",
+      {
+        cx: c,
+        cy: c,
+        r,
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 1.5,
+        opacity: 0.2,
+        className: color
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "circle",
+      {
+        cx: c,
+        cy: c,
+        r,
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 1.5,
+        strokeDasharray: `${r * Math.PI * 0.75} ${r * Math.PI * 1.25}`,
+        strokeLinecap: "round",
+        className: color
+      }
+    )
   ] });
 }
 function BoldSpinner({ size, color }) {
@@ -13142,8 +13337,33 @@ function BoldSpinner({ size, color }) {
   const r = size / 2 - sw;
   const c = size / 2;
   return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, className: "animate-spin", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: c, cy: c, r, fill: "none", stroke: "currentColor", strokeWidth: sw, opacity: 0.2, className: color }),
-    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: c, cy: c, r, fill: "none", stroke: "currentColor", strokeWidth: sw, strokeDasharray: `${r * Math.PI * 0.75} ${r * Math.PI * 1.25}`, strokeLinecap: "round", className: color })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "circle",
+      {
+        cx: c,
+        cy: c,
+        r,
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: sw,
+        opacity: 0.2,
+        className: color
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "circle",
+      {
+        cx: c,
+        cy: c,
+        r,
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: sw,
+        strokeDasharray: `${r * Math.PI * 0.75} ${r * Math.PI * 1.25}`,
+        strokeLinecap: "round",
+        className: color
+      }
+    )
   ] });
 }
 function DuoToneSpinner({ size, color }) {
@@ -13151,8 +13371,33 @@ function DuoToneSpinner({ size, color }) {
   const r = size / 2 - sw;
   const c = size / 2;
   return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, className: "animate-spin", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: c, cy: c, r, fill: "none", stroke: "currentColor", strokeWidth: sw, opacity: 0.15, className: color }),
-    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: c, cy: c, r, fill: "none", stroke: "currentColor", strokeWidth: sw, strokeDasharray: `${r * Math.PI} ${r * Math.PI}`, strokeLinecap: "round", className: color })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "circle",
+      {
+        cx: c,
+        cy: c,
+        r,
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: sw,
+        opacity: 0.15,
+        className: color
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "circle",
+      {
+        cx: c,
+        cy: c,
+        r,
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: sw,
+        strokeDasharray: `${r * Math.PI} ${r * Math.PI}`,
+        strokeLinecap: "round",
+        className: color
+      }
+    )
   ] });
 }
 function BufferingThinSpinner({ size, color }) {
@@ -13160,8 +13405,33 @@ function BufferingThinSpinner({ size, color }) {
   const c = size / 2;
   const circumference = 2 * Math.PI * r;
   return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: c, cy: c, r, fill: "none", stroke: "currentColor", strokeWidth: 1.5, opacity: 0.2, className: color }),
-    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: c, cy: c, r, fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", className: cn(color, "animate-[spinner-dash_1.5s_ease-in-out_infinite]"), style: { strokeDasharray: circumference, transformOrigin: "center" } })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "circle",
+      {
+        cx: c,
+        cy: c,
+        r,
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 1.5,
+        opacity: 0.2,
+        className: color
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "circle",
+      {
+        cx: c,
+        cy: c,
+        r,
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 1.5,
+        strokeLinecap: "round",
+        className: cn(color, "animate-[spinner-dash_1.5s_ease-in-out_infinite]"),
+        style: { strokeDasharray: circumference, transformOrigin: "center" }
+      }
+    )
   ] });
 }
 function BufferingBoldSpinner({ size, color }) {
@@ -13170,8 +13440,33 @@ function BufferingBoldSpinner({ size, color }) {
   const c = size / 2;
   const circumference = 2 * Math.PI * r;
   return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: c, cy: c, r, fill: "none", stroke: "currentColor", strokeWidth: sw, opacity: 0.2, className: color }),
-    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: c, cy: c, r, fill: "none", stroke: "currentColor", strokeWidth: sw, strokeLinecap: "round", className: cn(color, "animate-[spinner-dash_1.5s_ease-in-out_infinite]"), style: { strokeDasharray: circumference, transformOrigin: "center" } })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "circle",
+      {
+        cx: c,
+        cy: c,
+        r,
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: sw,
+        opacity: 0.2,
+        className: color
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "circle",
+      {
+        cx: c,
+        cy: c,
+        r,
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: sw,
+        strokeLinecap: "round",
+        className: cn(color, "animate-[spinner-dash_1.5s_ease-in-out_infinite]"),
+        style: { strokeDasharray: circumference, transformOrigin: "center" }
+      }
+    )
   ] });
 }
 function DotSpinner({ size, color }) {
@@ -13182,14 +13477,36 @@ function DotSpinner({ size, color }) {
     const angle = i * 45 * Math.PI / 180;
     const x = c + r * Math.cos(angle);
     const y = c + r * Math.sin(angle);
-    return /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: x, cy: y, r: dotSize / 2, fill: "currentColor", opacity: 0.15 + i / 8 * 0.85, className: color }, i);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "circle",
+      {
+        cx: x,
+        cy: y,
+        r: dotSize / 2,
+        fill: "currentColor",
+        opacity: 0.15 + i / 8 * 0.85,
+        className: color
+      },
+      i
+    );
   }) });
 }
 function JugglingSpinner({ size, color }) {
   const dotSize = Math.max(3, size * 0.18);
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [0, 1, 2].map((i) => {
     const cx = size / 2 + (i - 1) * (size * 0.35);
-    return /* @__PURE__ */ jsxRuntime.jsx("circle", { cx, cy: size / 2, r: dotSize / 2, fill: "currentColor", className: cn(color, "animate-[juggle_1.4s_ease-in-out_infinite]"), style: { animationDelay: `${i * 0.16}s` } }, i);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "circle",
+      {
+        cx,
+        cy: size / 2,
+        r: dotSize / 2,
+        fill: "currentColor",
+        className: cn(color, "animate-[juggle_1.4s_ease-in-out_infinite]"),
+        style: { animationDelay: `${i * 0.16}s` }
+      },
+      i
+    );
   }) });
 }
 var Spinner = react.forwardRef(
@@ -13248,7 +13565,19 @@ var Spinner = react.forwardRef(
 );
 Spinner.displayName = "Spinner";
 function CheckIcon({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 12l5 5L20 7" }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 3,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 12l5 5L20 7" })
+    }
+  );
 }
 function StepCircle({
   status,
@@ -13277,7 +13606,16 @@ function StepCircle({
             isActive ? "bg-primary-400 border-primary-400" : isDisabled ? "bg-grey-300 border-grey-300" : "bg-grey-400 border-grey-300"
           )
         }
-      ) : indicator === "number" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-xs font-medium", isActive ? "text-primary-400" : isDisabled ? "text-grey-300" : "text-grey-500"), children: stepNumber }) : icon ?? /* @__PURE__ */ jsxRuntime.jsx(
+      ) : indicator === "number" ? /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: cn(
+            "text-xs font-medium",
+            isActive ? "text-primary-400" : isDisabled ? "text-grey-300" : "text-grey-500"
+          ),
+          children: stepNumber
+        }
+      ) : icon ?? /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
           className: cn(
@@ -13293,7 +13631,20 @@ function Connector({
   orientation,
   completed
 }) {
-  return orientation === "horizontal" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex-1 h-0.5 rounded-full", completed ? "bg-primary-400" : "bg-grey-300") }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-0.5 flex-1 min-h-[20px] ml-[11px] rounded-full", completed ? "bg-primary-400" : "bg-grey-300") });
+  return orientation === "horizontal" ? /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn("flex-1 h-0.5 rounded-full", completed ? "bg-primary-400" : "bg-grey-300")
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "w-0.5 flex-1 min-h-[20px] ml-[11px] rounded-full",
+        completed ? "bg-primary-400" : "bg-grey-300"
+      )
+    }
+  );
 }
 function resolveStatuses(steps, activeStep) {
   if (activeStep !== void 0) {
@@ -13307,14 +13658,7 @@ function resolveStatuses(steps, activeStep) {
   return steps.map((s) => s.status ?? "incomplete");
 }
 var Stepper = react.forwardRef(
-  ({
-    steps,
-    activeStep,
-    orientation = "horizontal",
-    indicator = "dot",
-    className,
-    ...rest
-  }, ref) => {
+  ({ steps, activeStep, orientation = "horizontal", indicator = "dot", className, ...rest }, ref) => {
     const statuses = resolveStatuses(steps, activeStep);
     if (orientation === "vertical") {
       return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex flex-col", className), ...rest, children: steps.map((step, i) => {
@@ -13322,7 +13666,15 @@ var Stepper = react.forwardRef(
         const isLast = i === steps.length - 1;
         return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(StepCircle, { status, indicator, stepNumber: i + 1, icon: step.icon }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              StepCircle,
+              {
+                status,
+                indicator,
+                stepNumber: i + 1,
+                icon: step.icon
+              }
+            ),
             !isLast && /* @__PURE__ */ jsxRuntime.jsx(Connector, { orientation: "vertical", completed: status === "completed" })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col pb-6", children: [
@@ -13346,8 +13698,22 @@ var Stepper = react.forwardRef(
       const isLast = i === steps.length - 1;
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1 items-center gap-2.5", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 w-full", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Connector, { orientation: "horizontal", completed: i > 0 && statuses[i - 1] === "completed" }),
-          /* @__PURE__ */ jsxRuntime.jsx(StepCircle, { status, indicator, stepNumber: i + 1, icon: step.icon }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Connector,
+            {
+              orientation: "horizontal",
+              completed: i > 0 && statuses[i - 1] === "completed"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            StepCircle,
+            {
+              status,
+              indicator,
+              stepNumber: i + 1,
+              icon: step.icon
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(Connector, { orientation: "horizontal", completed: !isLast && status === "completed" })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5 text-center w-full", children: [
@@ -13718,6 +14084,8 @@ var Select = react.forwardRef(
     const [open, setOpen] = react.useState(false);
     const value = controlledValue ?? internalValue;
     const listboxId = react.useId();
+    const labelId = react.useId();
+    const helperId = react.useId();
     const containerRef = react.useRef(null);
     const triggerRef = react.useRef(null);
     const listRef = react.useRef(null);
@@ -13814,7 +14182,7 @@ var Select = react.forwardRef(
         className: cn("relative flex flex-col gap-2 w-full", wrapperClassName),
         ...rest,
         children: [
-          label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium text-grey-900 leading-[1.45]", children: label }),
+          label && /* @__PURE__ */ jsxRuntime.jsx("label", { id: labelId, className: "text-sm font-medium text-grey-900 leading-[1.45]", children: label }),
           /* @__PURE__ */ jsxRuntime.jsxs(
             "button",
             {
@@ -13824,6 +14192,8 @@ var Select = react.forwardRef(
               "aria-expanded": open,
               "aria-haspopup": "listbox",
               "aria-controls": listboxId,
+              "aria-labelledby": label ? labelId : void 0,
+              "aria-describedby": helperText ? helperId : void 0,
               disabled,
               onClick: () => !disabled && setOpen(!open),
               className: cn(
@@ -13850,6 +14220,7 @@ var Select = react.forwardRef(
                   {
                     name: "chevron-down",
                     size: "md",
+                    "aria-hidden": "true",
                     className: cn(
                       "shrink-0 transition-transform",
                       open && "rotate-180",
@@ -13860,7 +14231,7 @@ var Select = react.forwardRef(
               ]
             }
           ),
-          helperText && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-grey-500 leading-[1.45]", children: helperText }),
+          helperText && /* @__PURE__ */ jsxRuntime.jsx("p", { id: helperId, className: "text-sm text-grey-500 leading-[1.45]", children: helperText }),
           open && /* @__PURE__ */ jsxRuntime.jsx(SelectContext.Provider, { value: { value, onSelect, open }, children: /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
@@ -13964,7 +14335,7 @@ var ActivityItem = react.forwardRef(
   }, ref) => {
     const hasConnectorAbove = connector === "middle" || connector === "last";
     const hasConnectorBelow = connector === "top" || connector === "middle";
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("flex gap-3 items-start", className), ...rest, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("article", { ref, className: cn("flex gap-3 items-start", className), ...rest, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
@@ -13973,9 +14344,9 @@ var ActivityItem = react.forwardRef(
             (connector === "last" || !connector) && "justify-start"
           ),
           children: [
-            hasConnectorAbove && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-px bg-grey-100" }),
+            hasConnectorAbove && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-px bg-grey-100", "aria-hidden": "true" }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 size-8", children: avatar }),
-            hasConnectorBelow && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 w-px bg-grey-100" })
+            hasConnectorBelow && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 w-px bg-grey-100", "aria-hidden": "true" })
           ]
         }
       ),
@@ -13992,7 +14363,8 @@ var ActivityItem = react.forwardRef(
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 w-full", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 items-start gap-1 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-body-sm leading-5 text-grey-600", children: text }) }),
-                unread && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 size-2 rounded-full bg-[#04802E] border-[1.5px] border-white" })
+                unread && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 size-2 rounded-full bg-[#04802E] border-[1.5px] border-white", "aria-hidden": "true" }),
+                unread && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Unread" })
               ] }),
               (date || time || link || badge) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-1 w-full", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 items-start min-w-0", children: [