@tonyarbor/components 0.9.1 → 0.9.2

package/dist/index.js

@@ -63,6 +63,7 @@ __export(src_exports, {
   SubSectionHeading: () => SubSectionHeading,
   SubSectionInteractive: () => SubSectionInteractive,
   Table: () => Table,
+  TableContainer: () => TableContainer,
   TableControls: () => TableControls,
   TableFooterPagination: () => TableFooterPagination,
   Tabs: () => Tabs,
@@ -4125,10 +4126,37 @@ var Table = React19.forwardRef(
 );
 Table.displayName = "Table";
 
-// src/Avatar/Avatar.tsx
+// src/TableContainer/TableContainer.tsx
 var React20 = __toESM(require("react"));
-var import_lucide_react10 = require("lucide-react");
+var import_clsx20 = require("clsx");
 var import_jsx_runtime20 = require("react/jsx-runtime");
+var containerStyles6 = {
+  backgroundColor: "#ffffff",
+  padding: "8px",
+  borderRadius: "8px",
+  width: "100%",
+  boxSizing: "border-box"
+};
+var TableContainer = React20.forwardRef(
+  ({ children, className, style, "data-testid": dataTestId }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      "div",
+      {
+        ref,
+        className: (0, import_clsx20.clsx)("arbor-table-container", className),
+        style: { ...containerStyles6, ...style },
+        "data-testid": dataTestId,
+        children
+      }
+    );
+  }
+);
+TableContainer.displayName = "TableContainer";
+
+// src/Avatar/Avatar.tsx
+var React21 = __toESM(require("react"));
+var import_lucide_react10 = require("lucide-react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var sizeConfig = {
   small: {
     size: 20,
@@ -4160,7 +4188,7 @@ var sizeConfig = {
     borderRadius: "8px"
   }
 };
-var Avatar = React20.forwardRef(
+var Avatar = React21.forwardRef(
   ({
     size = "medium",
     src,
@@ -4170,11 +4198,11 @@ var Avatar = React20.forwardRef(
     style,
     "data-testid": dataTestId
   }, ref) => {
-    const [isHovered, setIsHovered] = React20.useState(false);
-    const [imageError, setImageError] = React20.useState(false);
+    const [isHovered, setIsHovered] = React21.useState(false);
+    const [imageError, setImageError] = React21.useState(false);
     const config = sizeConfig[size];
     const hasHoverState = size === "small";
-    const containerStyles6 = {
+    const containerStyles7 = {
       width: `${config.size}px`,
       height: `${config.size}px`,
       borderRadius: config.borderRadius,
@@ -4214,17 +4242,17 @@ var Avatar = React20.forwardRef(
     const showImage = src && !imageError;
     const showInitials = !showImage && initials && size !== "small";
     const showPlaceholder = !showImage && !showInitials;
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
       "div",
       {
         ref,
         className,
-        style: containerStyles6,
+        style: containerStyles7,
         onMouseEnter: () => setIsHovered(true),
         onMouseLeave: () => setIsHovered(false),
         "data-testid": dataTestId,
         children: [
-          showImage && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          showImage && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "img",
             {
               src,
@@ -4233,9 +4261,9 @@ var Avatar = React20.forwardRef(
               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 })
+          showInitials && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { style: initialsStyles, children: initials.slice(0, 2).toUpperCase() }),
+          showPlaceholder && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react10.User, { size: config.iconSize, color: "#d1d1d1", strokeWidth: 2 }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: hoverOverlayStyles })
         ]
       }
     );
@@ -4244,10 +4272,10 @@ var Avatar = React20.forwardRef(
 Avatar.displayName = "Avatar";
 
 // src/SearchGlobal/SearchGlobal.tsx
-var React21 = __toESM(require("react"));
+var React22 = __toESM(require("react"));
 var import_lucide_react11 = require("lucide-react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var SearchGlobal = React21.forwardRef(
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var SearchGlobal = React22.forwardRef(
   ({
     value = "",
     onChange,
@@ -4258,10 +4286,10 @@ var SearchGlobal = React21.forwardRef(
     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 [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);
     };
@@ -4281,7 +4309,7 @@ var SearchGlobal = React21.forwardRef(
       onClear?.();
       inputRef.current?.focus();
     };
-    const containerStyles6 = {
+    const containerStyles7 = {
       position: "relative",
       width: isFocused ? "300px" : "160px",
       height: "32px",
@@ -4365,18 +4393,18 @@ var SearchGlobal = React21.forwardRef(
     };
     const showKeyboardShortcut = isHovered && !isFocused;
     const showClearButton = isFocused;
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
       "div",
       {
         className,
-        style: containerStyles6,
+        style: containerStyles7,
         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)(
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: iconContainerStyles2, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react11.Search, { size: 12, color: "#2f2f2f", strokeWidth: 2 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             "input",
             {
               ref: inputRef,
@@ -4390,19 +4418,19 @@ var SearchGlobal = React21.forwardRef(
               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" })
+          showKeyboardShortcut && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: keyboardShortcutStyles, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: keyStyles, children: "\u2318" }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { style: plusStyles, children: "+" }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: keyStyles, children: "K" })
           ] }),
-          showClearButton && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          showClearButton && /* @__PURE__ */ (0, import_jsx_runtime22.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 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react11.X, { size: 13.333, color: "#2f2f2f", strokeWidth: 2 })
             }
           )
         ]
@@ -4413,10 +4441,10 @@ var SearchGlobal = React21.forwardRef(
 SearchGlobal.displayName = "SearchGlobal";
 
 // src/SearchOnPage/SearchOnPage.tsx
-var React22 = __toESM(require("react"));
+var React23 = __toESM(require("react"));
 var import_lucide_react12 = require("lucide-react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var SearchOnPage = React22.forwardRef(
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var SearchOnPage = React23.forwardRef(
   ({
     value = "",
     onChange,
@@ -4427,10 +4455,10 @@ var SearchOnPage = React22.forwardRef(
     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 [isFocused, setIsFocused] = React23.useState(false);
+    const [isHovered, setIsHovered] = React23.useState(false);
+    const inputRef = React23.useRef(null);
+    React23.useImperativeHandle(ref, () => inputRef.current);
     const handleFocus = () => {
       setIsFocused(true);
     };
@@ -4450,7 +4478,7 @@ var SearchOnPage = React22.forwardRef(
       onClear?.();
       inputRef.current?.focus();
     };
-    const containerStyles6 = {
+    const containerStyles7 = {
       position: "relative",
       width: "200px",
       height: "32px",
@@ -4501,18 +4529,18 @@ var SearchOnPage = React22.forwardRef(
     };
     const showClearButton = isFocused && value.length > 0;
     const iconColor = isFocused || isHovered ? "#2f2f2f" : "#595959";
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
       "div",
       {
         className,
-        style: containerStyles6,
+        style: containerStyles7,
         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)(
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: iconContainerStyles2, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.Search, { size: 12, color: iconColor, strokeWidth: 2 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             "input",
             {
               ref: inputRef,
@@ -4526,14 +4554,14 @@ var SearchOnPage = React22.forwardRef(
               style: inputStyles5
             }
           ),
-          showClearButton && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          showClearButton && /* @__PURE__ */ (0, import_jsx_runtime23.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 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.X, { size: 13.333, color: "#2f2f2f", strokeWidth: 2 })
             }
           )
         ]
@@ -4544,10 +4572,10 @@ var SearchOnPage = React22.forwardRef(
 SearchOnPage.displayName = "SearchOnPage";
 
 // src/Breadcrumbs/Breadcrumbs.tsx
-var React23 = __toESM(require("react"));
+var React24 = __toESM(require("react"));
 var import_lucide_react13 = require("lucide-react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var Breadcrumbs = React23.forwardRef(
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var Breadcrumbs = React24.forwardRef(
   ({
     items,
     onCopy,
@@ -4555,12 +4583,12 @@ var Breadcrumbs = React23.forwardRef(
     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(() => {
+    const [hoveredIndex, setHoveredIndex] = React24.useState(null);
+    const [focusedIndex, setFocusedIndex] = React24.useState(null);
+    const [showCopyTooltip, setShowCopyTooltip] = React24.useState(false);
+    const [ellipsisFocused, setEllipsisFocused] = React24.useState(false);
+    const [ellipsisHovered, setEllipsisHovered] = React24.useState(false);
+    const displayItems = React24.useMemo(() => {
       if (items.length > 6) {
         return [items[0], { label: "...", isEllipsis: true }, items[items.length - 1]];
       }
@@ -4571,7 +4599,7 @@ var Breadcrumbs = React23.forwardRef(
       const trail = items.map((item) => item.label).join(" / ");
       navigator.clipboard.writeText(trail);
     };
-    const containerStyles6 = {
+    const containerStyles7 = {
       display: "flex",
       alignItems: "center",
       gap: "8px",
@@ -4661,19 +4689,19 @@ var Breadcrumbs = React23.forwardRef(
       boxShadow: "0px 4px 12px rgba(32, 32, 32, 0.08)",
       zIndex: 1e3
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "div",
       {
         ref,
         className,
-        style: containerStyles6,
+        style: containerStyles7,
         "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)(
+            return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(React24.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                 "button",
                 {
                   style: ellipsisButtonStyles,
@@ -4682,7 +4710,7 @@ var Breadcrumbs = React23.forwardRef(
                   onMouseEnter: () => setEllipsisHovered(true),
                   onMouseLeave: () => setEllipsisHovered(false),
                   "aria-label": "More breadcrumbs",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                     import_lucide_react13.MoreHorizontal,
                     {
                       size: 12,
@@ -4693,13 +4721,13 @@ var Breadcrumbs = React23.forwardRef(
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { style: dividerStyles, children: " /" })
+              /* @__PURE__ */ (0, import_jsx_runtime24.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)(
+            return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(React24.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                 "div",
                 {
                   style: breadcrumbItemStyles(index, true),
@@ -4708,10 +4736,10 @@ var Breadcrumbs = React23.forwardRef(
                   onFocus: () => setFocusedIndex(index),
                   onBlur: () => setFocusedIndex(null),
                   tabIndex: 0,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { style: linkStyles(true, hoveredIndex === index), children: breadcrumbItem.label })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { style: linkStyles(true, hoveredIndex === index), children: breadcrumbItem.label })
                 }
               ),
-              onCopy && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+              onCopy && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                 "button",
                 {
                   style: copyButtonStyles,
@@ -4720,7 +4748,7 @@ var Breadcrumbs = React23.forwardRef(
                   onMouseLeave: () => setShowCopyTooltip(false),
                   "aria-label": "Copy breadcrumb trail",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                       import_lucide_react13.Link,
                       {
                         size: 12,
@@ -4729,15 +4757,15 @@ var Breadcrumbs = React23.forwardRef(
                         style: { display: "block", flexShrink: 0 }
                       }
                     ),
-                    showCopyTooltip && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: tooltipStyles2, children: "Copy breadcrumb trail" })
+                    showCopyTooltip && /* @__PURE__ */ (0, import_jsx_runtime24.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)(
+          return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(React24.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
               Element,
               {
                 ...breadcrumbItem.href ? { href: breadcrumbItem.href } : {},
@@ -4757,8 +4785,8 @@ var Breadcrumbs = React23.forwardRef(
                 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)(
+                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { style: linkStyles(false, hoveredIndex === index), children: breadcrumbItem.label }),
+                  breadcrumbItem.hasDropdown && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                     import_lucide_react13.ChevronDown,
                     {
                       size: 12,
@@ -4770,7 +4798,7 @@ var Breadcrumbs = React23.forwardRef(
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { style: dividerStyles, children: " /" })
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { style: dividerStyles, children: " /" })
           ] }, index);
         })
       }
@@ -4780,9 +4808,9 @@ var Breadcrumbs = React23.forwardRef(
 Breadcrumbs.displayName = "Breadcrumbs";
 
 // src/Logo/Logo.tsx
-var React24 = __toESM(require("react"));
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var Logo = React24.forwardRef(
+var React25 = __toESM(require("react"));
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var Logo = React25.forwardRef(
   ({
     withText = true,
     light = false,
@@ -4796,7 +4824,7 @@ var Logo = React24.forwardRef(
     const finalWidth = width ?? defaultWidth;
     const finalHeight = height ?? defaultHeight;
     if (!withText) {
-      return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
         "svg",
         {
           ref,
@@ -4809,23 +4837,23 @@ var Logo = React24.forwardRef(
           style,
           "aria-label": "Arbor logo",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("g", { clipPath: "url(#clip0_logo_icon)", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "M12.6821 12.448C12.6821 9.06699 15.4229 6.32623 18.8039 6.32623C18.8039 2.94571 16.0631 0.205391 12.6817 0.205391C9.30163 0.205391 6.56086 2.94571 6.56042 6.32623C9.94138 6.32623 12.6817 9.06699 12.6821 12.448Z", fill: "#F7931E" }),
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "M12.6826 12.4481C12.6826 15.8286 9.9423 18.5694 6.56178 18.5694C6.56178 21.9503 9.3021 24.6902 12.6826 24.6902C16.064 24.6902 18.8043 21.9499 18.8043 18.5694C15.4229 18.5676 12.6822 15.8281 12.6822 12.4472L12.6826 12.4481Z", fill: "#AFD318" }),
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "M18.8043 6.32631C18.8043 9.70727 16.064 12.448 12.6826 12.448C16.0636 12.448 18.8043 15.1888 18.8043 18.5693C22.1853 18.5693 24.9252 15.8286 24.9252 12.448C24.9252 9.06619 22.1844 6.32543 18.8048 6.32543L18.8043 6.32631Z", fill: "#DEEE21" }),
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "M12.6826 12.448C16.064 12.448 18.8043 9.70725 18.8043 6.32673C15.4225 6.32673 12.6822 9.06705 12.6826 12.448Z", fill: "#D58822" }),
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "M12.6822 12.4481C12.6822 15.8286 15.423 18.5693 18.8039 18.5693C18.8039 15.1875 16.0632 12.4472 12.6818 12.4472L12.6822 12.4481Z", fill: "#96BA0F" }),
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "M12.6826 12.448C9.30204 12.448 6.56128 9.70725 6.56128 6.32673C3.18076 6.32673 0.440002 9.06705 0.440002 12.448C0.440002 15.8285 3.18076 18.5684 6.56128 18.5693C6.56128 15.1874 9.30204 12.4471 12.6826 12.4471V12.448Z", fill: "#7DBA3C" }),
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "M12.6826 12.448C12.6826 9.06705 9.9423 6.32629 6.56178 6.32629L6.56134 6.32673C6.56134 9.70769 9.3021 12.448 12.6826 12.448Z", fill: "#A0861A" }),
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "M12.6826 12.4481C9.3021 12.4481 6.56178 15.1888 6.56134 18.5693C9.94186 18.5676 12.6826 15.8281 12.6826 12.4472V12.4481Z", fill: "#68AA22" })
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("g", { clipPath: "url(#clip0_logo_icon)", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M12.6821 12.448C12.6821 9.06699 15.4229 6.32623 18.8039 6.32623C18.8039 2.94571 16.0631 0.205391 12.6817 0.205391C9.30163 0.205391 6.56086 2.94571 6.56042 6.32623C9.94138 6.32623 12.6817 9.06699 12.6821 12.448Z", fill: "#F7931E" }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M12.6826 12.4481C12.6826 15.8286 9.9423 18.5694 6.56178 18.5694C6.56178 21.9503 9.3021 24.6902 12.6826 24.6902C16.064 24.6902 18.8043 21.9499 18.8043 18.5694C15.4229 18.5676 12.6822 15.8281 12.6822 12.4472L12.6826 12.4481Z", fill: "#AFD318" }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M18.8043 6.32631C18.8043 9.70727 16.064 12.448 12.6826 12.448C16.0636 12.448 18.8043 15.1888 18.8043 18.5693C22.1853 18.5693 24.9252 15.8286 24.9252 12.448C24.9252 9.06619 22.1844 6.32543 18.8048 6.32543L18.8043 6.32631Z", fill: "#DEEE21" }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M12.6826 12.448C16.064 12.448 18.8043 9.70725 18.8043 6.32673C15.4225 6.32673 12.6822 9.06705 12.6826 12.448Z", fill: "#D58822" }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M12.6822 12.4481C12.6822 15.8286 15.423 18.5693 18.8039 18.5693C18.8039 15.1875 16.0632 12.4472 12.6818 12.4472L12.6822 12.4481Z", fill: "#96BA0F" }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M12.6826 12.448C9.30204 12.448 6.56128 9.70725 6.56128 6.32673C3.18076 6.32673 0.440002 9.06705 0.440002 12.448C0.440002 15.8285 3.18076 18.5684 6.56128 18.5693C6.56128 15.1874 9.30204 12.4471 12.6826 12.4471V12.448Z", fill: "#7DBA3C" }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M12.6826 12.448C12.6826 9.06705 9.9423 6.32629 6.56178 6.32629L6.56134 6.32673C6.56134 9.70769 9.3021 12.448 12.6826 12.448Z", fill: "#A0861A" }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M12.6826 12.4481C9.3021 12.4481 6.56178 15.1888 6.56134 18.5693C9.94186 18.5676 12.6826 15.8281 12.6826 12.4472V12.4481Z", fill: "#68AA22" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("clipPath", { id: "clip0_logo_icon", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("rect", { width: "25", height: "25", fill: "white" }) }) })
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("clipPath", { id: "clip0_logo_icon", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("rect", { width: "25", height: "25", fill: "white" }) }) })
           ]
         }
       );
     }
     const textColor = light ? "#2F2F2F" : "white";
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
       "svg",
       {
         ref,
@@ -4838,19 +4866,19 @@ var Logo = React24.forwardRef(
         style,
         "aria-label": "Arbor",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "M12.6822 12.4479C12.6822 9.06698 15.423 6.32622 18.8039 6.32622C18.8039 2.9457 16.0632 0.205383 12.6818 0.205383C9.30169 0.205383 6.56093 2.9457 6.56049 6.32622C9.94145 6.32622 12.6818 9.06698 12.6822 12.4479Z", fill: "#F7931E" }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "M12.6826 12.4481C12.6826 15.8286 9.9423 18.5694 6.56178 18.5694C6.56178 21.9503 9.3021 24.6902 12.6826 24.6902C16.064 24.6902 18.8043 21.9499 18.8043 18.5694C15.4229 18.5676 12.6822 15.8281 12.6822 12.4472L12.6826 12.4481Z", fill: "#AFD318" }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "M18.8044 6.3263C18.8044 9.70726 16.0641 12.448 12.6827 12.448C16.0636 12.448 18.8044 15.1888 18.8044 18.5693C22.1854 18.5693 24.9252 15.8285 24.9252 12.448C24.9252 9.06618 22.1845 6.32542 18.8048 6.32542L18.8044 6.3263Z", fill: "#DEEE21" }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "M12.6827 12.448C16.0641 12.448 18.8044 9.70725 18.8044 6.32673C15.4226 6.32673 12.6822 9.06705 12.6827 12.448Z", fill: "#D58822" }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "M12.6823 12.4481C12.6823 15.8286 15.423 18.5693 18.804 18.5693C18.804 15.1875 16.0632 12.4472 12.6818 12.4472L12.6823 12.4481Z", fill: "#96BA0F" }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "M12.6826 12.448C9.30204 12.448 6.56128 9.70725 6.56128 6.32673C3.18076 6.32673 0.440002 9.06705 0.440002 12.448C0.440002 15.8285 3.18076 18.5684 6.56128 18.5693C6.56128 15.1875 9.30204 12.4471 12.6826 12.4471V12.448Z", fill: "#7DBA3C" }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "M12.6826 12.448C12.6826 9.06705 9.9423 6.32629 6.56178 6.32629L6.56134 6.32673C6.56134 9.70769 9.3021 12.448 12.6826 12.448Z", fill: "#A0861A" }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "M12.6826 12.4481C9.3021 12.4481 6.56178 15.1888 6.56134 18.5693C9.94186 18.5676 12.6826 15.8281 12.6826 12.4472V12.4481Z", fill: "#68AA22" }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "M37.7924 17.8181L36.4913 14.3809H31.9131L30.6604 17.7055H29.1345L33.4716 6.57394H34.9821L39.255 17.4965L37.7924 17.8181ZM34.1936 8.37222L32.4266 13.0459H35.9761L34.195 8.37222H34.1936Z", fill: textColor }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "M41.4713 13.1755V17.7053H40.0417V10.0427H41.1822L41.4229 11.6012C41.9689 10.7335 42.8529 9.94635 44.1056 9.88211L44.3308 11.2479C43.0614 11.3121 41.9843 12.1635 41.4708 13.1751L41.4713 13.1755Z", fill: textColor }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "M48.2659 17.8016C47.1092 17.8016 46.2903 17.6252 45.2779 17.3194V6.33171L46.707 6.10687V10.942C47.2218 10.4118 47.9601 9.88163 49.0047 9.88163C50.6591 9.88163 52.024 11.1026 52.024 13.6564C52.024 16.4513 50.4822 17.8008 48.2659 17.8008V17.8016ZM48.7957 11.1515C47.9931 11.1515 47.2861 11.6817 46.7079 12.4046V16.3241C47.1897 16.5006 47.5439 16.5811 48.2505 16.5811C49.7443 16.5811 50.5795 15.6971 50.5795 13.722C50.5795 12.0522 49.8231 11.1528 48.7957 11.1528V11.1515Z", fill: textColor }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "M56.5064 17.8664C54.467 17.8664 52.9882 16.4042 52.9882 13.8826C52.9882 11.3605 54.467 9.88211 56.5064 9.88211C58.563 9.88211 60.0722 11.3601 60.0722 13.8826C60.0722 16.4038 58.563 17.8664 56.5064 17.8664ZM56.5064 11.0873C55.1248 11.0873 54.4345 12.2762 54.4345 13.8822C54.4345 15.4565 55.1574 16.6775 56.5064 16.6775C57.9202 16.6775 58.6263 15.4886 58.6263 13.8822C58.625 12.3087 57.8845 11.0877 56.5042 11.0877L56.5064 11.0873Z", fill: textColor }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "M62.4495 13.1755V17.7053H61.0199V10.0427H62.1613L62.4019 11.6012C62.948 10.7335 63.8315 9.94635 65.0846 9.88211L65.3099 11.2479C64.0423 11.3121 62.9651 12.1635 62.4517 13.1751L62.4495 13.1755Z", fill: textColor })
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M12.6822 12.4479C12.6822 9.06698 15.423 6.32622 18.8039 6.32622C18.8039 2.9457 16.0632 0.205383 12.6818 0.205383C9.30169 0.205383 6.56093 2.9457 6.56049 6.32622C9.94145 6.32622 12.6818 9.06698 12.6822 12.4479Z", fill: "#F7931E" }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M12.6826 12.4481C12.6826 15.8286 9.9423 18.5694 6.56178 18.5694C6.56178 21.9503 9.3021 24.6902 12.6826 24.6902C16.064 24.6902 18.8043 21.9499 18.8043 18.5694C15.4229 18.5676 12.6822 15.8281 12.6822 12.4472L12.6826 12.4481Z", fill: "#AFD318" }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M18.8044 6.3263C18.8044 9.70726 16.0641 12.448 12.6827 12.448C16.0636 12.448 18.8044 15.1888 18.8044 18.5693C22.1854 18.5693 24.9252 15.8285 24.9252 12.448C24.9252 9.06618 22.1845 6.32542 18.8048 6.32542L18.8044 6.3263Z", fill: "#DEEE21" }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M12.6827 12.448C16.0641 12.448 18.8044 9.70725 18.8044 6.32673C15.4226 6.32673 12.6822 9.06705 12.6827 12.448Z", fill: "#D58822" }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M12.6823 12.4481C12.6823 15.8286 15.423 18.5693 18.804 18.5693C18.804 15.1875 16.0632 12.4472 12.6818 12.4472L12.6823 12.4481Z", fill: "#96BA0F" }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M12.6826 12.448C9.30204 12.448 6.56128 9.70725 6.56128 6.32673C3.18076 6.32673 0.440002 9.06705 0.440002 12.448C0.440002 15.8285 3.18076 18.5684 6.56128 18.5693C6.56128 15.1875 9.30204 12.4471 12.6826 12.4471V12.448Z", fill: "#7DBA3C" }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M12.6826 12.448C12.6826 9.06705 9.9423 6.32629 6.56178 6.32629L6.56134 6.32673C6.56134 9.70769 9.3021 12.448 12.6826 12.448Z", fill: "#A0861A" }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M12.6826 12.4481C9.3021 12.4481 6.56178 15.1888 6.56134 18.5693C9.94186 18.5676 12.6826 15.8281 12.6826 12.4472V12.4481Z", fill: "#68AA22" }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M37.7924 17.8181L36.4913 14.3809H31.9131L30.6604 17.7055H29.1345L33.4716 6.57394H34.9821L39.255 17.4965L37.7924 17.8181ZM34.1936 8.37222L32.4266 13.0459H35.9761L34.195 8.37222H34.1936Z", fill: textColor }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M41.4713 13.1755V17.7053H40.0417V10.0427H41.1822L41.4229 11.6012C41.9689 10.7335 42.8529 9.94635 44.1056 9.88211L44.3308 11.2479C43.0614 11.3121 41.9843 12.1635 41.4708 13.1751L41.4713 13.1755Z", fill: textColor }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M48.2659 17.8016C47.1092 17.8016 46.2903 17.6252 45.2779 17.3194V6.33171L46.707 6.10687V10.942C47.2218 10.4118 47.9601 9.88163 49.0047 9.88163C50.6591 9.88163 52.024 11.1026 52.024 13.6564C52.024 16.4513 50.4822 17.8008 48.2659 17.8008V17.8016ZM48.7957 11.1515C47.9931 11.1515 47.2861 11.6817 46.7079 12.4046V16.3241C47.1897 16.5006 47.5439 16.5811 48.2505 16.5811C49.7443 16.5811 50.5795 15.6971 50.5795 13.722C50.5795 12.0522 49.8231 11.1528 48.7957 11.1528V11.1515Z", fill: textColor }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M56.5064 17.8664C54.467 17.8664 52.9882 16.4042 52.9882 13.8826C52.9882 11.3605 54.467 9.88211 56.5064 9.88211C58.563 9.88211 60.0722 11.3601 60.0722 13.8826C60.0722 16.4038 58.563 17.8664 56.5064 17.8664ZM56.5064 11.0873C55.1248 11.0873 54.4345 12.2762 54.4345 13.8822C54.4345 15.4565 55.1574 16.6775 56.5064 16.6775C57.9202 16.6775 58.6263 15.4886 58.6263 13.8822C58.625 12.3087 57.8845 11.0877 56.5042 11.0877L56.5064 11.0873Z", fill: textColor }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M62.4495 13.1755V17.7053H61.0199V10.0427H62.1613L62.4019 11.6012C62.948 10.7335 63.8315 9.94635 65.0846 9.88211L65.3099 11.2479C64.0423 11.3121 62.9651 12.1635 62.4517 13.1751L62.4495 13.1755Z", fill: textColor })
         ]
       }
     );
@@ -4859,9 +4887,9 @@ var Logo = React24.forwardRef(
 Logo.displayName = "Logo";
 
 // src/ButtonSegmented/ButtonSegmented.tsx
-var React25 = __toESM(require("react"));
-var import_clsx20 = require("clsx");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var React26 = __toESM(require("react"));
+var import_clsx21 = require("clsx");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var segmentedStyles = {
   container: {
     display: "inline-flex",
@@ -4909,9 +4937,9 @@ var segmentedStyles = {
     }
   }
 };
-var ButtonSegmented = React25.forwardRef(
+var ButtonSegmented = React26.forwardRef(
   ({ items, activeIndex = 0, onChange, className, style, ...props }, ref) => {
-    const [hoveredIndex, setHoveredIndex] = React25.useState(null);
+    const [hoveredIndex, setHoveredIndex] = React26.useState(null);
     const validItems = items.slice(0, 4);
     if (validItems.length < 2) {
       console.warn("ButtonSegmented requires at least 2 items");
@@ -4922,11 +4950,11 @@ var ButtonSegmented = React25.forwardRef(
         onChange(index, validItems[index]);
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "div",
       {
         ref,
-        className: (0, import_clsx20.clsx)("arbor-button-segmented", className),
+        className: (0, import_clsx21.clsx)("arbor-button-segmented", className),
         style: { ...segmentedStyles.container, ...style },
         role: "group",
         "aria-label": "Segmented button group",
@@ -4950,7 +4978,7 @@ var ButtonSegmented = React25.forwardRef(
               ...isHovered && segmentedStyles.button.hover
             };
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
             "button",
             {
               type: "button",
@@ -4960,7 +4988,7 @@ var ButtonSegmented = React25.forwardRef(
               onMouseLeave: () => setHoveredIndex(null),
               "aria-pressed": isActive,
               children: [
-                hasIcons && item.icon && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                hasIcons && item.icon && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                   "span",
                   {
                     style: {
@@ -4986,15 +5014,15 @@ var ButtonSegmented = React25.forwardRef(
 ButtonSegmented.displayName = "ButtonSegmented";
 
 // src/SectionHeading/SectionHeading.tsx
-var React27 = __toESM(require("react"));
-var import_clsx22 = require("clsx");
+var React28 = __toESM(require("react"));
+var import_clsx23 = require("clsx");
 
 // src/SectionIcon/SectionIcon.tsx
-var React26 = __toESM(require("react"));
-var import_clsx21 = require("clsx");
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var WarningIcon = ({ color }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("svg", { width: "14", height: "12", viewBox: "0 0 14 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+var React27 = __toESM(require("react"));
+var import_clsx22 = require("clsx");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var WarningIcon = ({ color }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("svg", { width: "14", height: "12", viewBox: "0 0 14 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "path",
     {
       d: "M7 0.5L13.5 11.5H0.5L7 0.5Z",
@@ -5004,7 +5032,7 @@ var WarningIcon = ({ color }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
       fill: "none"
     }
   ),
-  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "path",
     {
       d: "M7 4.5V7",
@@ -5013,16 +5041,16 @@ var WarningIcon = ({ color }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
       strokeLinecap: "round"
     }
   ),
-  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("circle", { cx: "7", cy: "9", r: "0.75", fill: color })
+  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("circle", { cx: "7", cy: "9", r: "0.75", fill: color })
 ] });
-var InfoIcon = ({ color }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("circle", { cx: "7", cy: "7", r: "6", stroke: color, strokeWidth: "1.2", fill: "none" }),
-  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { d: "M7 6V10", stroke: color, strokeWidth: "1.2", strokeLinecap: "round" }),
-  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("circle", { cx: "7", cy: "4", r: "0.75", fill: color })
+var InfoIcon = ({ color }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("circle", { cx: "7", cy: "7", r: "6", stroke: color, strokeWidth: "1.2", fill: "none" }),
+  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("path", { d: "M7 6V10", stroke: color, strokeWidth: "1.2", strokeLinecap: "round" }),
+  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("circle", { cx: "7", cy: "4", r: "0.75", fill: color })
 ] });
-var SuccessIcon = ({ color }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("circle", { cx: "7", cy: "7", r: "6", stroke: color, strokeWidth: "1.2", fill: "none" }),
-  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { d: "M4 7L6 9L10 5", stroke: color, strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" })
+var SuccessIcon = ({ color }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("circle", { cx: "7", cy: "7", r: "6", stroke: color, strokeWidth: "1.2", fill: "none" }),
+  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("path", { d: "M4 7L6 9L10 5", stroke: color, strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" })
 ] });
 var variantConfig3 = {
   warning: {
@@ -5058,33 +5086,33 @@ var sectionIconStyles = {
     height: "16px"
   }
 };
-var SectionIcon = React26.forwardRef(
+var SectionIcon = React27.forwardRef(
   ({ variant = "info", className, style, ...props }, ref) => {
     const config = variantConfig3[variant];
     const renderIcon = () => {
       switch (variant) {
         case "warning":
         case "danger":
-          return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(WarningIcon, { color: config.iconColor });
+          return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(WarningIcon, { color: config.iconColor });
         case "success":
-          return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SuccessIcon, { color: config.iconColor });
+          return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SuccessIcon, { color: config.iconColor });
         case "info":
         default:
-          return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(InfoIcon, { color: config.iconColor });
+          return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(InfoIcon, { color: config.iconColor });
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       "div",
       {
         ref,
-        className: (0, import_clsx21.clsx)("arbor-section-icon", className),
+        className: (0, import_clsx22.clsx)("arbor-section-icon", className),
         style: {
           ...sectionIconStyles.container,
           backgroundColor: config.backgroundColor,
           ...style
         },
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: sectionIconStyles.iconWrapper, children: renderIcon() })
+        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: sectionIconStyles.iconWrapper, children: renderIcon() })
       }
     );
   }
@@ -5092,10 +5120,10 @@ var SectionIcon = React26.forwardRef(
 SectionIcon.displayName = "SectionIcon";
 
 // src/SectionHeading/SectionHeading.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var AvatarPlaceholder = () => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("svg", { width: "22", height: "33", viewBox: "0 0 22 33", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("circle", { cx: "11", cy: "7", r: "7", fill: "#d1d1d1" }),
-  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("ellipse", { cx: "11", cy: "33", rx: "11", ry: "11", fill: "#d1d1d1" })
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var AvatarPlaceholder = () => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("svg", { width: "22", height: "33", viewBox: "0 0 22 33", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("circle", { cx: "11", cy: "7", r: "7", fill: "#d1d1d1" }),
+  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ellipse", { cx: "11", cy: "33", rx: "11", ry: "11", fill: "#d1d1d1" })
 ] });
 var sectionHeadingStyles = {
   container: {
@@ -5220,37 +5248,37 @@ var sectionHeadingStyles = {
     }
   }
 };
-var SectionHeading = React27.forwardRef(
+var SectionHeading = React28.forwardRef(
   ({ title, icon, avatar, button, buttonGroup, className, style, ...props }, ref) => {
-    const [buttonHovered, setButtonHovered] = React27.useState(false);
-    const [hoveredGroupIndex, setHoveredGroupIndex] = React27.useState(null);
+    const [buttonHovered, setButtonHovered] = React28.useState(false);
+    const [hoveredGroupIndex, setHoveredGroupIndex] = React28.useState(null);
     if (button && buttonGroup) {
       console.warn("SectionHeading: button and buttonGroup are mutually exclusive. Only button will be rendered.");
     }
     const renderAvatar = () => {
       if (!avatar) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: sectionHeadingStyles.avatar, children: avatar.src ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { style: sectionHeadingStyles.avatar, children: avatar.src ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         "img",
         {
           src: avatar.src,
           alt: avatar.alt || "Avatar",
           style: sectionHeadingStyles.avatarImage
         }
-      ) : avatar.initials ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { style: sectionHeadingStyles.avatarInitials, children: avatar.initials }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(AvatarPlaceholder, {}) });
+      ) : avatar.initials ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { style: sectionHeadingStyles.avatarInitials, children: avatar.initials }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AvatarPlaceholder, {}) });
     };
     const renderTitle = () => {
       if (icon) {
         const iconVariant = typeof icon === "string" ? icon : "info";
-        return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { style: sectionHeadingStyles.titleWithIcon, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("h2", { style: { ...sectionHeadingStyles.title, flex: "none" }, children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: sectionHeadingStyles.iconBadge, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SectionIcon, { variant: iconVariant }) })
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { style: sectionHeadingStyles.titleWithIcon, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h2", { style: { ...sectionHeadingStyles.title, flex: "none" }, children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { style: sectionHeadingStyles.iconBadge, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SectionIcon, { variant: iconVariant }) })
         ] });
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("h2", { style: sectionHeadingStyles.title, children: title });
+      return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h2", { style: sectionHeadingStyles.title, children: title });
     };
     const renderButton = () => {
       if (!button) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
         "button",
         {
           type: "button",
@@ -5262,7 +5290,7 @@ var SectionHeading = React27.forwardRef(
           onMouseEnter: () => setButtonHovered(true),
           onMouseLeave: () => setButtonHovered(false),
           children: [
-            button.icon && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { style: { display: "flex", alignItems: "center", width: "16px", height: "16px" }, children: button.icon }),
+            button.icon && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { style: { display: "flex", alignItems: "center", width: "16px", height: "16px" }, children: button.icon }),
             button.label
           ]
         }
@@ -5271,7 +5299,7 @@ var SectionHeading = React27.forwardRef(
     const renderButtonGroup = () => {
       if (!buttonGroup || button) return null;
       const { items, activeIndex = 0, onChange } = buttonGroup;
-      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: sectionHeadingStyles.buttonGroup.container, children: items.slice(0, 4).map((item, index) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { style: sectionHeadingStyles.buttonGroup.container, children: items.slice(0, 4).map((item, index) => {
         const isActive = index === activeIndex;
         const isHovered = hoveredGroupIndex === index;
         let btnStyle = {
@@ -5290,7 +5318,7 @@ var SectionHeading = React27.forwardRef(
             ...isHovered && sectionHeadingStyles.buttonGroup.button.hover
           };
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
           "button",
           {
             type: "button",
@@ -5303,7 +5331,7 @@ var SectionHeading = React27.forwardRef(
             onMouseEnter: () => setHoveredGroupIndex(index),
             onMouseLeave: () => setHoveredGroupIndex(null),
             children: [
-              item.icon && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { style: { display: "flex", alignItems: "center", width: "16px", height: "16px" }, children: item.icon }),
+              item.icon && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { style: { display: "flex", alignItems: "center", width: "16px", height: "16px" }, children: item.icon }),
               item.label
             ]
           },
@@ -5311,11 +5339,11 @@ var SectionHeading = React27.forwardRef(
         );
       }) });
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
       "div",
       {
         ref,
-        className: (0, import_clsx22.clsx)("arbor-section-heading", className),
+        className: (0, import_clsx23.clsx)("arbor-section-heading", className),
         style: { ...sectionHeadingStyles.container, ...style },
         ...props,
         children: [
@@ -5331,12 +5359,12 @@ var SectionHeading = React27.forwardRef(
 SectionHeading.displayName = "SectionHeading";
 
 // src/ListRow/ListRow.tsx
-var React28 = __toESM(require("react"));
-var import_clsx23 = require("clsx");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var React29 = __toESM(require("react"));
+var import_clsx24 = require("clsx");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var CaretIcon = ({ isHovered }) => {
   if (isHovered) {
-    return /* @__PURE__ */ (0, import_jsx_runtime28.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_runtime28.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime29.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_runtime29.jsx)(
       "path",
       {
         d: "M6 4L10 8L6 12",
@@ -5347,7 +5375,7 @@ var CaretIcon = ({ isHovered }) => {
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime28.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_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.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_runtime29.jsx)(
     "path",
     {
       d: "M6 4L10 8L6 12",
@@ -5431,10 +5459,10 @@ var listRowStyles = {
     flexShrink: 0
   }
 };
-var ListRow = React28.forwardRef(
+var ListRow = React29.forwardRef(
   ({ value, label, note, icon = false, onClick, className, style, ...props }, ref) => {
-    const [isHovered, setIsHovered] = React28.useState(false);
-    const [isFocused, setIsFocused] = React28.useState(false);
+    const [isHovered, setIsHovered] = React29.useState(false);
+    const [isFocused, setIsFocused] = React29.useState(false);
     const showHoverState = icon && isHovered;
     const isClickable = icon && onClick;
     const containerStyle = {
@@ -5455,11 +5483,11 @@ var ListRow = React28.forwardRef(
         onClick?.();
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "div",
       {
         ref,
-        className: (0, import_clsx23.clsx)("arbor-list-row", className),
+        className: (0, import_clsx24.clsx)("arbor-list-row", className),
         style: containerStyle,
         onClick: handleClick,
         onMouseEnter: () => icon && setIsHovered(true),
@@ -5470,12 +5498,12 @@ var ListRow = React28.forwardRef(
         tabIndex: isClickable ? 0 : void 0,
         role: isClickable ? "button" : void 0,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { style: listRowStyles.content, children: [
-          label && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { style: listRowStyles.label, children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { style: listRowStyles.valueContainer, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { style: listRowStyles.value, children: value }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { style: listRowStyles.rightContainer, children: [
-            note && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { style: listRowStyles.note, children: note }),
-            icon && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { style: listRowStyles.iconWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CaretIcon, { isHovered }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { style: listRowStyles.content, children: [
+          label && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { style: listRowStyles.label, children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { style: listRowStyles.valueContainer, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { style: listRowStyles.value, children: value }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { style: listRowStyles.rightContainer, children: [
+            note && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { style: listRowStyles.note, children: note }),
+            icon && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { style: listRowStyles.iconWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CaretIcon, { isHovered }) })
           ] })
         ] })
       }
@@ -5485,12 +5513,12 @@ var ListRow = React28.forwardRef(
 ListRow.displayName = "ListRow";
 
 // src/ListRowMultiLine/ListRowMultiLine.tsx
-var React29 = __toESM(require("react"));
-var import_clsx24 = require("clsx");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var React30 = __toESM(require("react"));
+var import_clsx25 = require("clsx");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var CaretIcon2 = ({ isHovered }) => {
   if (isHovered) {
-    return /* @__PURE__ */ (0, import_jsx_runtime29.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_runtime29.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime30.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_runtime30.jsx)(
       "path",
       {
         d: "M6 4L10 8L6 12",
@@ -5501,7 +5529,7 @@ var CaretIcon2 = ({ isHovered }) => {
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime29.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_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.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_runtime30.jsx)(
     "path",
     {
       d: "M6 4L10 8L6 12",
@@ -5574,10 +5602,10 @@ var listRowMultiLineStyles = {
     marginLeft: "8px"
   }
 };
-var ListRowMultiLine = React29.forwardRef(
+var ListRowMultiLine = React30.forwardRef(
   ({ title, description, icon = false, onClick, className, style, ...props }, ref) => {
-    const [isHovered, setIsHovered] = React29.useState(false);
-    const [isFocused, setIsFocused] = React29.useState(false);
+    const [isHovered, setIsHovered] = React30.useState(false);
+    const [isFocused, setIsFocused] = React30.useState(false);
     const showHoverState = icon && isHovered;
     const isClickable = icon && onClick;
     const containerStyle = {
@@ -5598,11 +5626,11 @@ var ListRowMultiLine = React29.forwardRef(
         onClick?.();
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       "div",
       {
         ref,
-        className: (0, import_clsx24.clsx)("arbor-list-row-multi-line", className),
+        className: (0, import_clsx25.clsx)("arbor-list-row-multi-line", className),
         style: containerStyle,
         onClick: handleClick,
         onMouseEnter: () => icon && setIsHovered(true),
@@ -5613,12 +5641,12 @@ var ListRowMultiLine = React29.forwardRef(
         tabIndex: isClickable ? 0 : void 0,
         role: isClickable ? "button" : void 0,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { style: listRowMultiLineStyles.content, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { style: listRowMultiLineStyles.textContent, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { style: listRowMultiLineStyles.title, children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { style: listRowMultiLineStyles.description, children: description })
+        children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { style: listRowMultiLineStyles.content, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { style: listRowMultiLineStyles.textContent, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { style: listRowMultiLineStyles.title, children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { style: listRowMultiLineStyles.description, children: description })
           ] }),
-          icon && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { style: listRowMultiLineStyles.iconWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CaretIcon2, { isHovered }) })
+          icon && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { style: listRowMultiLineStyles.iconWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CaretIcon2, { isHovered }) })
         ] })
       }
     );
@@ -5627,12 +5655,12 @@ var ListRowMultiLine = React29.forwardRef(
 ListRowMultiLine.displayName = "ListRowMultiLine";
 
 // src/SubSectionHeading/SubSectionHeading.tsx
-var React30 = __toESM(require("react"));
-var import_clsx25 = require("clsx");
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var InfoIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("circle", { cx: "8", cy: "8", r: "6.5", stroke: "#2f2f2f", strokeWidth: "1.2" }),
-  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+var React31 = __toESM(require("react"));
+var import_clsx26 = require("clsx");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var InfoIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("circle", { cx: "8", cy: "8", r: "6.5", stroke: "#2f2f2f", strokeWidth: "1.2" }),
+  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "path",
     {
       d: "M8 7V11",
@@ -5641,9 +5669,9 @@ var InfoIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("svg", { wi
       strokeLinecap: "round"
     }
   ),
-  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("circle", { cx: "8", cy: "5", r: "0.75", fill: "#2f2f2f" })
+  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("circle", { cx: "8", cy: "5", r: "0.75", fill: "#2f2f2f" })
 ] });
-var PlusIcon = ({ color = "#2f2f2f" }) => /* @__PURE__ */ (0, import_jsx_runtime30.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_runtime30.jsx)(
+var PlusIcon = ({ color = "#2f2f2f" }) => /* @__PURE__ */ (0, import_jsx_runtime31.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_runtime31.jsx)(
   "path",
   {
     d: "M8 3V13M3 8H13",
@@ -5736,7 +5764,7 @@ var subSectionHeadingStyles = {
     flexShrink: 0
   }
 };
-var SubSectionHeading = React30.forwardRef(
+var SubSectionHeading = React31.forwardRef(
   ({
     title,
     icon = false,
@@ -5748,7 +5776,7 @@ var SubSectionHeading = React30.forwardRef(
     style,
     ...props
   }, ref) => {
-    const [isButtonHovered, setIsButtonHovered] = React30.useState(false);
+    const [isButtonHovered, setIsButtonHovered] = React31.useState(false);
     const containerStyle = {
       ...subSectionHeadingStyles.container,
       ...button ? subSectionHeadingStyles.containerWithButton : subSectionHeadingStyles.containerNoButton,
@@ -5774,23 +5802,23 @@ var SubSectionHeading = React30.forwardRef(
     };
     const renderButtonIcon = () => {
       if (buttonIcon) {
-        return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { style: subSectionHeadingStyles.buttonIconWrapper, children: buttonIcon });
+        return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { style: subSectionHeadingStyles.buttonIconWrapper, children: buttonIcon });
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { style: subSectionHeadingStyles.buttonIconWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PlusIcon, { color: button === "primary" ? "#ffffff" : "#2f2f2f" }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { style: subSectionHeadingStyles.buttonIconWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(PlusIcon, { color: button === "primary" ? "#ffffff" : "#2f2f2f" }) });
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
       "div",
       {
         ref,
-        className: (0, import_clsx25.clsx)("arbor-sub-section-heading", className),
+        className: (0, import_clsx26.clsx)("arbor-sub-section-heading", className),
         style: containerStyle,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { style: subSectionHeadingStyles.textContainer, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h3", { style: subSectionHeadingStyles.title, children: title }),
-            icon && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { style: subSectionHeadingStyles.iconWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(InfoIcon2, {}) })
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { style: subSectionHeadingStyles.textContainer, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h3", { style: subSectionHeadingStyles.title, children: title }),
+            icon && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { style: subSectionHeadingStyles.iconWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(InfoIcon2, {}) })
           ] }),
-          button && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+          button && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
             "button",
             {
               type: "button",
@@ -5800,7 +5828,7 @@ var SubSectionHeading = React30.forwardRef(
               onMouseLeave: () => setIsButtonHovered(false),
               children: [
                 renderButtonIcon(),
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: buttonText })
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { children: buttonText })
               ]
             }
           )
@@ -5812,10 +5840,10 @@ var SubSectionHeading = React30.forwardRef(
 SubSectionHeading.displayName = "SubSectionHeading";
 
 // src/SubSectionInteractive/SubSectionInteractive.tsx
-var React31 = __toESM(require("react"));
-var import_clsx26 = require("clsx");
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var ChevronIcon = ({ expanded }) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+var React32 = __toESM(require("react"));
+var import_clsx27 = require("clsx");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var ChevronIcon = ({ expanded }) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
   "svg",
   {
     width: "16",
@@ -5827,7 +5855,7 @@ var ChevronIcon = ({ expanded }) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx
       transform: expanded ? "rotate(0deg)" : "rotate(180deg)",
       transition: "transform 0.2s ease-in-out"
     },
-    children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "path",
       {
         d: "M4 6L8 10L12 6",
@@ -5910,7 +5938,7 @@ var subSectionInteractiveStyles = {
     borderBottom: "1px solid #f8f8f8"
   }
 };
-var SubSectionInteractive = React31.forwardRef(
+var SubSectionInteractive = React32.forwardRef(
   ({
     title,
     children,
@@ -5921,11 +5949,11 @@ var SubSectionInteractive = React31.forwardRef(
     style,
     ...props
   }, ref) => {
-    const [internalExpanded, setInternalExpanded] = React31.useState(defaultExpanded);
+    const [internalExpanded, setInternalExpanded] = React32.useState(defaultExpanded);
     const isControlled = controlledExpanded !== void 0;
     const isExpanded = isControlled ? controlledExpanded : internalExpanded;
-    const [isHovered, setIsHovered] = React31.useState(false);
-    const [isFocused, setIsFocused] = React31.useState(false);
+    const [isHovered, setIsHovered] = React32.useState(false);
+    const [isFocused, setIsFocused] = React32.useState(false);
     const handleToggle = () => {
       const newExpanded = !isExpanded;
       if (!isControlled) {
@@ -5948,15 +5976,15 @@ var SubSectionInteractive = React31.forwardRef(
       ...subSectionInteractiveStyles.content,
       ...isExpanded ? subSectionInteractiveStyles.contentExpanded : subSectionInteractiveStyles.contentCollapsed
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
       "div",
       {
         ref,
-        className: (0, import_clsx26.clsx)("arbor-sub-section-interactive", className),
+        className: (0, import_clsx27.clsx)("arbor-sub-section-interactive", className),
         style: { ...subSectionInteractiveStyles.container, ...style },
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             "button",
             {
               type: "button",
@@ -5968,13 +5996,13 @@ var SubSectionInteractive = React31.forwardRef(
               onBlur: () => setIsFocused(false),
               onKeyDown: handleKeyDown,
               "aria-expanded": isExpanded,
-              children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { style: headerContentStyle, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h3", { style: subSectionInteractiveStyles.title, children: title }),
-                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { style: subSectionInteractiveStyles.iconWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ChevronIcon, { expanded: isExpanded }) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { style: headerContentStyle, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h3", { style: subSectionInteractiveStyles.title, children: title }),
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { style: subSectionInteractiveStyles.iconWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChevronIcon, { expanded: isExpanded }) })
               ] })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { style: contentStyle, "aria-hidden": !isExpanded, children: children && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { style: subSectionInteractiveStyles.contentInner, children }) })
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { style: contentStyle, "aria-hidden": !isExpanded, children: children && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { style: subSectionInteractiveStyles.contentInner, children }) })
         ]
       }
     );
@@ -5983,10 +6011,10 @@ var SubSectionInteractive = React31.forwardRef(
 SubSectionInteractive.displayName = "SubSectionInteractive";
 
 // src/SectionHeadingInteractive/SectionHeadingInteractive.tsx
-var React32 = __toESM(require("react"));
-var import_clsx27 = require("clsx");
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var ChevronIcon2 = ({ expanded }) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+var React33 = __toESM(require("react"));
+var import_clsx28 = require("clsx");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var ChevronIcon2 = ({ expanded }) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
   "svg",
   {
     width: "16",
@@ -5998,7 +6026,7 @@ var ChevronIcon2 = ({ expanded }) => /* @__PURE__ */ (0, import_jsx_runtime32.js
       transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
       transition: "transform 0.2s ease-in-out"
     },
-    children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "path",
       {
         d: "M4 6L8 10L12 6",
@@ -6094,7 +6122,7 @@ var sectionHeadingInteractiveStyles = {
     // Content area styling - children go here
   }
 };
-var SectionHeadingInteractive = React32.forwardRef(
+var SectionHeadingInteractive = React33.forwardRef(
   ({
     title,
     children,
@@ -6105,11 +6133,11 @@ var SectionHeadingInteractive = React32.forwardRef(
     style,
     ...props
   }, ref) => {
-    const [internalExpanded, setInternalExpanded] = React32.useState(defaultExpanded);
+    const [internalExpanded, setInternalExpanded] = React33.useState(defaultExpanded);
     const isControlled = controlledExpanded !== void 0;
     const isExpanded = isControlled ? controlledExpanded : internalExpanded;
-    const [isHovered, setIsHovered] = React32.useState(false);
-    const [isFocused, setIsFocused] = React32.useState(false);
+    const [isHovered, setIsHovered] = React33.useState(false);
+    const [isFocused, setIsFocused] = React33.useState(false);
     const handleToggle = () => {
       const newExpanded = !isExpanded;
       if (!isControlled) {
@@ -6133,15 +6161,15 @@ var SectionHeadingInteractive = React32.forwardRef(
       ...sectionHeadingInteractiveStyles.content,
       ...isExpanded ? sectionHeadingInteractiveStyles.contentExpanded : sectionHeadingInteractiveStyles.contentCollapsed
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
       "div",
       {
         ref,
-        className: (0, import_clsx27.clsx)("arbor-section-heading-interactive", className),
+        className: (0, import_clsx28.clsx)("arbor-section-heading-interactive", className),
         style: { ...sectionHeadingInteractiveStyles.container, ...style },
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { style: headerContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: headerContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             "button",
             {
               type: "button",
@@ -6153,13 +6181,13 @@ var SectionHeadingInteractive = React32.forwardRef(
               onBlur: () => setIsFocused(false),
               onKeyDown: handleKeyDown,
               "aria-expanded": isExpanded,
-              children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { style: headerContentStyle, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h2", { style: sectionHeadingInteractiveStyles.title, children: title }),
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { style: sectionHeadingInteractiveStyles.iconWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChevronIcon2, { expanded: isExpanded }) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { style: headerContentStyle, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("h2", { style: sectionHeadingInteractiveStyles.title, children: title }),
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { style: sectionHeadingInteractiveStyles.iconWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChevronIcon2, { expanded: isExpanded }) })
               ] })
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { style: contentStyle, "aria-hidden": !isExpanded, children: children && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { style: sectionHeadingInteractiveStyles.contentInner, children }) })
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: contentStyle, "aria-hidden": !isExpanded, children: children && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: sectionHeadingInteractiveStyles.contentInner, children }) })
         ]
       }
     );
@@ -6168,9 +6196,9 @@ var SectionHeadingInteractive = React32.forwardRef(
 SectionHeadingInteractive.displayName = "SectionHeadingInteractive";
 
 // src/Section/Section.tsx
-var React33 = __toESM(require("react"));
-var import_clsx28 = require("clsx");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var React34 = __toESM(require("react"));
+var import_clsx29 = require("clsx");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var sectionStyles = {
   container: {
     display: "flex",
@@ -6183,13 +6211,13 @@ var sectionStyles = {
     fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
   }
 };
-var Section = React33.forwardRef(
+var Section = React34.forwardRef(
   ({ children, className, style, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "div",
       {
         ref,
-        className: (0, import_clsx28.clsx)("arbor-section", className),
+        className: (0, import_clsx29.clsx)("arbor-section", className),
         style: { ...sectionStyles.container, ...style },
         ...props,
         children
@@ -6200,10 +6228,10 @@ var Section = React33.forwardRef(
 Section.displayName = "Section";
 
 // src/ModalHeader/ModalHeader.tsx
-var React34 = __toESM(require("react"));
-var import_clsx29 = require("clsx");
-var import_jsx_runtime34 = require("react/jsx-runtime");
-var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+var React35 = __toESM(require("react"));
+var import_clsx30 = require("clsx");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
   "svg",
   {
     width: "10",
@@ -6211,7 +6239,7 @@ var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     viewBox: "0 0 10 10",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       "path",
       {
         d: "M1 1L9 9M9 1L1 9",
@@ -6270,28 +6298,28 @@ var modalHeaderStyles = {
     outlineOffset: "-3px"
   }
 };
-var ModalHeader = React34.forwardRef(
+var ModalHeader = React35.forwardRef(
   ({ title, icon, onClose, className, style, ...props }, ref) => {
-    const [isHovered, setIsHovered] = React34.useState(false);
-    const [isFocused, setIsFocused] = React34.useState(false);
+    const [isHovered, setIsHovered] = React35.useState(false);
+    const [isFocused, setIsFocused] = React35.useState(false);
     const closeButtonStyle = {
       ...modalHeaderStyles.closeButton,
       ...isHovered && modalHeaderStyles.closeButtonHover,
       ...isFocused && modalHeaderStyles.closeButtonFocus
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
       "div",
       {
         ref,
-        className: (0, import_clsx29.clsx)("arbor-modal-header", className),
+        className: (0, import_clsx30.clsx)("arbor-modal-header", className),
         style: { ...modalHeaderStyles.container, ...style },
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { style: modalHeaderStyles.leftContent, children: [
-            icon && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SectionIcon, { variant: icon }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h2", { style: modalHeaderStyles.title, children: title })
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { style: modalHeaderStyles.leftContent, children: [
+            icon && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SectionIcon, { variant: icon }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h2", { style: modalHeaderStyles.title, children: title })
           ] }),
-          onClose && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          onClose && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             "button",
             {
               type: "button",
@@ -6302,7 +6330,7 @@ var ModalHeader = React34.forwardRef(
               onBlur: () => setIsFocused(false),
               style: closeButtonStyle,
               "aria-label": "Close modal",
-              children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CloseIcon, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CloseIcon, {})
             }
           )
         ]
@@ -6313,9 +6341,9 @@ var ModalHeader = React34.forwardRef(
 ModalHeader.displayName = "ModalHeader";
 
 // src/ModalFooter/ModalFooter.tsx
-var React35 = __toESM(require("react"));
-var import_clsx30 = require("clsx");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var React36 = __toESM(require("react"));
+var import_clsx31 = require("clsx");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var modalFooterStyles = {
   container: {
     display: "flex",
@@ -6329,13 +6357,13 @@ var modalFooterStyles = {
     maxHeight: "56px"
   }
 };
-var ModalFooter = React35.forwardRef(
+var ModalFooter = React36.forwardRef(
   ({ children, className, style, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       "div",
       {
         ref,
-        className: (0, import_clsx30.clsx)("arbor-modal-footer", className),
+        className: (0, import_clsx31.clsx)("arbor-modal-footer", className),
         style: { ...modalFooterStyles.container, ...style },
         ...props,
         children
@@ -6346,9 +6374,9 @@ var ModalFooter = React35.forwardRef(
 ModalFooter.displayName = "ModalFooter";
 
 // src/Modal/Modal.tsx
-var React36 = __toESM(require("react"));
-var import_clsx31 = require("clsx");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var React37 = __toESM(require("react"));
+var import_clsx32 = require("clsx");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var modalStyles = {
   container: {
     display: "flex",
@@ -6380,13 +6408,13 @@ var modalStyles = {
     lineHeight: "1.5"
   }
 };
-var Modal = React36.forwardRef(
+var Modal = React37.forwardRef(
   ({ children, width = 584, className, style, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       "div",
       {
         ref,
-        className: (0, import_clsx31.clsx)("arbor-modal", className),
+        className: (0, import_clsx32.clsx)("arbor-modal", className),
         style: {
           ...modalStyles.container,
           width: typeof width === "number" ? `${width}px` : width,
@@ -6401,16 +6429,16 @@ var Modal = React36.forwardRef(
   }
 );
 Modal.displayName = "Modal";
-var ModalContent = React36.forwardRef(
+var ModalContent = React37.forwardRef(
   ({ children, className, style, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       "div",
       {
         ref,
-        className: (0, import_clsx31.clsx)("arbor-modal-content", className),
+        className: (0, import_clsx32.clsx)("arbor-modal-content", className),
         style: { ...modalStyles.content, ...style },
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { style: modalStyles.contentText, children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { style: modalStyles.contentText, children })
       }
     );
   }
@@ -6418,10 +6446,10 @@ var ModalContent = React36.forwardRef(
 ModalContent.displayName = "ModalContent";
 
 // src/AvatarLogoLockup/AvatarLogoLockup.tsx
-var React37 = __toESM(require("react"));
+var React38 = __toESM(require("react"));
 var import_lucide_react14 = require("lucide-react");
-var import_jsx_runtime37 = require("react/jsx-runtime");
-var AvatarLogoLockup = React37.forwardRef(
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var AvatarLogoLockup = React38.forwardRef(
   ({
     avatarSrc,
     avatarInitials,
@@ -6431,8 +6459,8 @@ var AvatarLogoLockup = React37.forwardRef(
     className,
     style
   }, ref) => {
-    const [isHovered, setIsHovered] = React37.useState(false);
-    const containerStyles6 = {
+    const [isHovered, setIsHovered] = React38.useState(false);
+    const containerStyles7 = {
       display: "inline-flex",
       alignItems: "center",
       gap: "4px",
@@ -6470,16 +6498,16 @@ var AvatarLogoLockup = React37.forwardRef(
     };
     const AvatarSection = onAvatarClick ? "button" : "div";
     const LogoSection = onLogoClick ? "button" : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
       "div",
       {
         ref,
         className,
-        style: containerStyles6,
+        style: containerStyles7,
         onMouseEnter: () => setIsHovered(true),
         onMouseLeave: () => setIsHovered(false),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
             AvatarSection,
             {
               style: {
@@ -6489,7 +6517,7 @@ var AvatarLogoLockup = React37.forwardRef(
               onClick: onAvatarClick,
               ...onAvatarClick ? { type: "button" } : {},
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                   Avatar,
                   {
                     size: "medium",
@@ -6498,12 +6526,12 @@ var AvatarLogoLockup = React37.forwardRef(
                     alt: avatarAlt
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react14.ChevronDown, { size: 12, color: "#2f2f2f", strokeWidth: 2 })
+                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react14.ChevronDown, { size: 12, color: "#2f2f2f", strokeWidth: 2 })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { style: dividerStyles }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { style: dividerStyles }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             LogoSection,
             {
               style: {
@@ -6512,7 +6540,7 @@ var AvatarLogoLockup = React37.forwardRef(
               },
               onClick: onLogoClick,
               ...onLogoClick ? { type: "button" } : {},
-              children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Logo, { withText: true, light: true, height: 25 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Logo, { withText: true, light: true, height: 25 })
             }
           )
         ]
@@ -6523,10 +6551,10 @@ var AvatarLogoLockup = React37.forwardRef(
 AvatarLogoLockup.displayName = "AvatarLogoLockup";
 
 // src/TopNavItem/TopNavItem.tsx
-var React38 = __toESM(require("react"));
+var React39 = __toESM(require("react"));
 var import_lucide_react15 = require("lucide-react");
-var import_jsx_runtime38 = require("react/jsx-runtime");
-var TopNavItem = React38.forwardRef(
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var TopNavItem = React39.forwardRef(
   ({
     children,
     active = false,
@@ -6534,8 +6562,8 @@ var TopNavItem = React38.forwardRef(
     className,
     style
   }, ref) => {
-    const [isHovered, setIsHovered] = React38.useState(false);
-    const [isFocused, setIsFocused] = React38.useState(false);
+    const [isHovered, setIsHovered] = React39.useState(false);
+    const [isFocused, setIsFocused] = React39.useState(false);
     const textColor = active ? "#005700" : "#474747";
     const iconColor = active ? "#005700" : "#474747";
     const getBackgroundColor = () => {
@@ -6543,7 +6571,7 @@ var TopNavItem = React38.forwardRef(
       if (isHovered) return "#f8f8f8";
       return "transparent";
     };
-    const containerStyles6 = {
+    const containerStyles7 = {
       display: "inline-flex",
       alignItems: "center",
       justifyContent: "center",
@@ -6568,12 +6596,12 @@ var TopNavItem = React38.forwardRef(
       textAlign: "center",
       whiteSpace: "nowrap"
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
       "button",
       {
         ref,
         className,
-        style: containerStyles6,
+        style: containerStyles7,
         onClick,
         onMouseEnter: () => setIsHovered(true),
         onMouseLeave: () => setIsHovered(false),
@@ -6581,8 +6609,8 @@ var TopNavItem = React38.forwardRef(
         onBlur: () => setIsFocused(false),
         type: "button",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { style: textStyles3, children }),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react15.ChevronDown, { size: 12, color: iconColor, strokeWidth: 2 })
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { style: textStyles3, children }),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react15.ChevronDown, { size: 12, color: iconColor, strokeWidth: 2 })
         ]
       }
     );
@@ -6591,10 +6619,10 @@ var TopNavItem = React38.forwardRef(
 TopNavItem.displayName = "TopNavItem";
 
 // src/TopNavBar/TopNavBar.tsx
-var React39 = __toESM(require("react"));
+var React40 = __toESM(require("react"));
 var import_lucide_react16 = require("lucide-react");
-var import_jsx_runtime39 = require("react/jsx-runtime");
-var TopNavBar = React39.forwardRef(
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var TopNavBar = React40.forwardRef(
   ({
     schoolLogoSrc,
     schoolLogoAlt = "School logo",
@@ -6616,7 +6644,7 @@ var TopNavBar = React39.forwardRef(
     className,
     style
   }, ref) => {
-    const containerStyles6 = {
+    const containerStyles7 = {
       position: "fixed",
       top: 0,
       left: 0,
@@ -6685,9 +6713,9 @@ var TopNavBar = React39.forwardRef(
       gap: "8px"
     };
     const SchoolLogoElement = onSchoolLogoClick ? "button" : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("nav", { ref, className, style: containerStyles6, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { style: leftSectionStyles, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("nav", { ref, className, style: containerStyles7, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { style: leftSectionStyles, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           SchoolLogoElement,
           {
             style: {
@@ -6696,17 +6724,17 @@ var TopNavBar = React39.forwardRef(
             },
             onClick: onSchoolLogoClick,
             ...onSchoolLogoClick ? { type: "button" } : {},
-            children: schoolLogoSrc ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            children: schoolLogoSrc ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
               "img",
               {
                 src: schoolLogoSrc,
                 alt: schoolLogoAlt,
                 style: schoolLogoImageStyles
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { style: placeholderStyles, children: "Logo" })
+            ) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { style: placeholderStyles, children: "Logo" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { style: navItemsGroupStyles, children: navItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { style: navItemsGroupStyles, children: navItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           TopNavItem,
           {
             active: item.active,
@@ -6716,8 +6744,8 @@ var TopNavBar = React39.forwardRef(
           item.id
         )) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { style: rightSectionStyles, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { style: rightSectionStyles, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           SearchGlobal,
           {
             value: searchValue,
@@ -6726,7 +6754,7 @@ var TopNavBar = React39.forwardRef(
             onClear: onSearchClear
           }
         ),
-        showActionButton && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+        showActionButton && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
           Button,
           {
             variant: "secondary",
@@ -6734,12 +6762,12 @@ var TopNavBar = React39.forwardRef(
             onClick: onActionButtonClick,
             style: actionButtonStyles2,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react16.Sparkles, { size: 16, strokeWidth: 2 }),
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react16.Sparkles, { size: 16, strokeWidth: 2 }),
               actionButtonLabel
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           AvatarLogoLockup,
           {
             avatarSrc,
@@ -6756,10 +6784,10 @@ var TopNavBar = React39.forwardRef(
 TopNavBar.displayName = "TopNavBar";
 
 // src/SideNavButton/SideNavButton.tsx
-var React40 = __toESM(require("react"));
+var React41 = __toESM(require("react"));
 var import_lucide_react17 = require("lucide-react");
-var import_jsx_runtime40 = require("react/jsx-runtime");
-var SideNavButton = React40.forwardRef(
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var SideNavButton = React41.forwardRef(
   ({
     icon,
     selected = false,
@@ -6769,8 +6797,8 @@ var SideNavButton = React40.forwardRef(
     className,
     style
   }, ref) => {
-    const [isHovered, setIsHovered] = React40.useState(false);
-    const [isActive, setIsActive] = React40.useState(false);
+    const [isHovered, setIsHovered] = React41.useState(false);
+    const [isActive, setIsActive] = React41.useState(false);
     const getIconColor = () => {
       if (selected) return "#0e8a0e";
       if (isActive || isHovered) return "#2f2f2f";
@@ -6809,25 +6837,25 @@ var SideNavButton = React40.forwardRef(
       };
       switch (icon) {
         case "side-menu":
-          return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react17.Menu, { ...iconProps });
+          return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react17.Menu, { ...iconProps });
         case "home":
-          return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react17.Home, { ...iconProps });
+          return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react17.Home, { ...iconProps });
         case "favourite":
-          return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react17.Star, { ...iconProps });
+          return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react17.Star, { ...iconProps });
         case "calendar":
-          return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react17.Calendar, { ...iconProps });
+          return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react17.Calendar, { ...iconProps });
         case "notifications":
-          return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react17.Bell, { ...iconProps });
+          return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react17.Bell, { ...iconProps });
         case "emergency-alert":
-          return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react17.AlertTriangle, { ...iconProps });
+          return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react17.AlertTriangle, { ...iconProps });
         case "help":
-          return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react17.HelpCircle, { ...iconProps });
+          return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react17.HelpCircle, { ...iconProps });
         default:
           return null;
       }
     };
     const defaultAriaLabel = icon.charAt(0).toUpperCase() + icon.slice(1);
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       "button",
       {
         ref,
@@ -6852,7 +6880,7 @@ var SideNavButton = React40.forwardRef(
 SideNavButton.displayName = "SideNavButton";
 
 // src/SideNavBar/SideNavBar.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var SideNavBar = ({
   isOpen = false,
   title,
@@ -6937,10 +6965,10 @@ var SideNavBar = ({
   const handleClick = (icon) => {
     onIconClick?.(icon);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className, style: wrapperStyles6, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { style: iconBarStyles, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { style: topSectionStyles, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className, style: wrapperStyles6, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { style: iconBarStyles, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { style: topSectionStyles, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           SideNavButton,
           {
             icon: "side-menu",
@@ -6949,8 +6977,8 @@ var SideNavBar = ({
             "aria-label": "Side menu"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { style: dividerStyles }),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { style: dividerStyles }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           SideNavButton,
           {
             icon: "favourite",
@@ -6959,7 +6987,7 @@ var SideNavBar = ({
             "aria-label": "Favourites"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           SideNavButton,
           {
             icon: "notifications",
@@ -6968,7 +6996,7 @@ var SideNavBar = ({
             "aria-label": "Notifications"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           SideNavButton,
           {
             icon: "calendar",
@@ -6977,8 +7005,8 @@ var SideNavBar = ({
             "aria-label": "Calendar"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { style: dividerStyles }),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { style: dividerStyles }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           SideNavButton,
           {
             icon: "emergency-alert",
@@ -6988,7 +7016,7 @@ var SideNavBar = ({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
         SideNavButton,
         {
           icon: "help",
@@ -6998,19 +7026,19 @@ var SideNavBar = ({
         }
       )
     ] }),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { style: contentPanelStyles, children: [
-      title && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { style: headerStyles, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { style: titleStyles2, children: title }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { style: navListStyles, children })
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { style: contentPanelStyles, children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { style: headerStyles, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { style: titleStyles2, children: title }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { style: navListStyles, children })
     ] })
   ] });
 };
 SideNavBar.displayName = "SideNavBar";
 
 // src/SideNavItem/SideNavItem.tsx
-var React41 = __toESM(require("react"));
+var React42 = __toESM(require("react"));
 var import_lucide_react18 = require("lucide-react");
-var import_jsx_runtime42 = require("react/jsx-runtime");
-var SideNavItem = React41.forwardRef(
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var SideNavItem = React42.forwardRef(
   ({
     label,
     tier = 1,
@@ -7025,8 +7053,8 @@ var SideNavItem = React41.forwardRef(
     className,
     style
   }, ref) => {
-    const [isHovered, setIsHovered] = React41.useState(false);
-    const [isStarHovered, setIsStarHovered] = React41.useState(false);
+    const [isHovered, setIsHovered] = React42.useState(false);
+    const [isStarHovered, setIsStarHovered] = React42.useState(false);
     const basePadding = 24;
     const tierIndent = (tier - 1) * 12;
     const chevronSpace = hasChildren ? 20 : 0;
@@ -7050,7 +7078,7 @@ var SideNavItem = React41.forwardRef(
       if (isStarHovered) return "#2f2f2f";
       return "#0e8a0e";
     };
-    const containerStyles6 = {
+    const containerStyles7 = {
       display: "flex",
       alignItems: "center",
       gap: "8px",
@@ -7115,12 +7143,12 @@ var SideNavItem = React41.forwardRef(
         onClick?.();
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
       "div",
       {
         ref,
         className,
-        style: containerStyles6,
+        style: containerStyles7,
         onClick: handleClick,
         onMouseEnter: () => setIsHovered(true),
         onMouseLeave: () => {
@@ -7133,18 +7161,18 @@ var SideNavItem = React41.forwardRef(
         "aria-expanded": hasChildren ? expanded : void 0,
         "aria-label": label,
         children: [
-          hasChildren && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          hasChildren && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
             "div",
             {
               style: chevronStyles,
               onClick: handleChevronClick,
               role: "button",
               "aria-label": expanded ? "Collapse" : "Expand",
-              children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react18.ChevronDown, { size: 14, color: "#7e7e7e", strokeWidth: 2 }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react18.ChevronRight, { size: 14, color: "#7e7e7e", strokeWidth: 2 })
+              children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react18.ChevronDown, { size: 14, color: "#7e7e7e", strokeWidth: 2 }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react18.ChevronRight, { size: 14, color: "#7e7e7e", strokeWidth: 2 })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { style: labelStyles10, children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { style: labelStyles10, children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
             "div",
             {
               style: starContainerStyles,
@@ -7154,7 +7182,7 @@ var SideNavItem = React41.forwardRef(
               role: "button",
               "aria-label": favourited ? "Remove from favourites" : "Add to favourites",
               "aria-pressed": favourited,
-              children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                 import_lucide_react18.Star,
                 {
                   size: 15,
@@ -7206,6 +7234,7 @@ SideNavItem.displayName = "SideNavItem";
   SubSectionHeading,
   SubSectionInteractive,
   Table,
+  TableContainer,
   TableControls,
   TableFooterPagination,
   Tabs,