@tonyarbor/components 0.2.1 → 0.6.0

package/dist/index.js

@@ -30,16 +30,30 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  Avatar: () => Avatar,
   Banner: () => Banner,
+  Breadcrumbs: () => Breadcrumbs,
   Button: () => Button,
+  ButtonSegmented: () => ButtonSegmented,
   Card: () => Card,
   Checkbox: () => Checkbox,
   Combobox: () => Combobox,
   DatePicker: () => DatePicker,
   Input: () => Input,
+  ListRow: () => ListRow,
+  ListRowMultiLine: () => ListRowMultiLine,
+  Logo: () => Logo,
   NumericInput: () => NumericInput,
   Pagination: () => Pagination,
   Radio: () => Radio,
+  SearchGlobal: () => SearchGlobal,
+  SearchOnPage: () => SearchOnPage,
+  Section: () => Section,
+  SectionHeading: () => SectionHeading,
+  SectionHeadingInteractive: () => SectionHeadingInteractive,
+  SectionIcon: () => SectionIcon,
+  SubSectionHeading: () => SubSectionHeading,
+  SubSectionInteractive: () => SubSectionInteractive,
   Table: () => Table,
   TableControls: () => TableControls,
   TableFooterPagination: () => TableFooterPagination,
@@ -4042,18 +4056,2106 @@ var Table = React19.forwardRef(
   }
 );
 Table.displayName = "Table";
+
+// src/Avatar/Avatar.tsx
+var React20 = __toESM(require("react"));
+var import_lucide_react10 = require("lucide-react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var sizeConfig = {
+  small: {
+    size: 20,
+    fontSize: 0,
+    // Too small for initials
+    fontWeight: 400,
+    iconSize: 12,
+    borderRadius: "99px"
+  },
+  medium: {
+    size: 32,
+    fontSize: 13,
+    fontWeight: 400,
+    iconSize: 16,
+    borderRadius: "99px"
+  },
+  large: {
+    size: 48,
+    fontSize: 13,
+    fontWeight: 400,
+    iconSize: 24,
+    borderRadius: "4px"
+  },
+  "extra-large": {
+    size: 96,
+    fontSize: 27,
+    fontWeight: 600,
+    iconSize: 48,
+    borderRadius: "8px"
+  }
+};
+var Avatar = React20.forwardRef(
+  ({
+    size = "medium",
+    src,
+    initials,
+    alt = "Avatar",
+    className,
+    style,
+    "data-testid": dataTestId
+  }, ref) => {
+    const [isHovered, setIsHovered] = React20.useState(false);
+    const [imageError, setImageError] = React20.useState(false);
+    const config = sizeConfig[size];
+    const hasHoverState = size === "small";
+    const containerStyles6 = {
+      width: `${config.size}px`,
+      height: `${config.size}px`,
+      borderRadius: config.borderRadius,
+      border: "1px solid #efefef",
+      overflow: "hidden",
+      position: "relative",
+      backgroundColor: "#f8f8f8",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+      cursor: "default",
+      boxSizing: "border-box",
+      ...style
+    };
+    const hoverOverlayStyles = {
+      position: "absolute",
+      inset: 0,
+      pointerEvents: "none",
+      boxShadow: isHovered && hasHoverState ? "inset 0px 4px 100px 0px rgba(32, 32, 32, 0.3)" : "none",
+      borderRadius: config.borderRadius,
+      transition: "box-shadow 0.2s ease-in-out"
+    };
+    const imageStyles = {
+      width: "100%",
+      height: "100%",
+      objectFit: "cover"
+    };
+    const initialsStyles = {
+      fontSize: `${config.fontSize}px`,
+      fontWeight: config.fontWeight,
+      color: "#2f2f2f",
+      lineHeight: 1.5,
+      textAlign: "center",
+      userSelect: "none"
+    };
+    const showImage = src && !imageError;
+    const showInitials = !showImage && initials && size !== "small";
+    const showPlaceholder = !showImage && !showInitials;
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+      "div",
+      {
+        ref,
+        className,
+        style: containerStyles6,
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        "data-testid": dataTestId,
+        children: [
+          showImage && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            "img",
+            {
+              src,
+              alt,
+              style: imageStyles,
+              onError: () => setImageError(true)
+            }
+          ),
+          showInitials && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { style: initialsStyles, children: initials.slice(0, 2).toUpperCase() }),
+          showPlaceholder && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.User, { size: config.iconSize, color: "#d1d1d1", strokeWidth: 2 }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: hoverOverlayStyles })
+        ]
+      }
+    );
+  }
+);
+Avatar.displayName = "Avatar";
+
+// src/SearchGlobal/SearchGlobal.tsx
+var React21 = __toESM(require("react"));
+var import_lucide_react11 = require("lucide-react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var SearchGlobal = React21.forwardRef(
+  ({
+    value = "",
+    onChange,
+    onSubmit,
+    onClear,
+    placeholder = "Search",
+    className,
+    style,
+    "data-testid": dataTestId
+  }, ref) => {
+    const [isFocused, setIsFocused] = React21.useState(false);
+    const [isHovered, setIsHovered] = React21.useState(false);
+    const inputRef = React21.useRef(null);
+    React21.useImperativeHandle(ref, () => inputRef.current);
+    const handleFocus = () => {
+      setIsFocused(true);
+    };
+    const handleBlur = () => {
+      setIsFocused(false);
+    };
+    const handleChange = (e) => {
+      onChange?.(e.target.value);
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter") {
+        onSubmit?.(value);
+      }
+    };
+    const handleClear = () => {
+      onChange?.("");
+      onClear?.();
+      inputRef.current?.focus();
+    };
+    const containerStyles6 = {
+      position: "relative",
+      width: isFocused ? "300px" : "160px",
+      height: "32px",
+      backgroundColor: isFocused ? "#ffffff" : isHovered ? "#efefef" : "#f8f8f8",
+      borderRadius: "16px",
+      padding: "8px 16px",
+      display: "flex",
+      alignItems: "center",
+      gap: isFocused ? "8px" : "8px",
+      cursor: "text",
+      transition: "all 0.2s ease-in-out",
+      boxSizing: "border-box",
+      border: isFocused ? "1px solid #efefef" : "none",
+      boxShadow: isFocused ? "0px 0px 0px 3px #3cad51" : "none",
+      marginLeft: isFocused ? "-140px" : "0",
+      // Expand to the left
+      ...style
+    };
+    const iconContainerStyles2 = {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      padding: "2px"
+    };
+    const inputStyles5 = {
+      border: "none",
+      outline: "none",
+      backgroundColor: "transparent",
+      fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+      fontSize: "13px",
+      fontWeight: 400,
+      color: "#2f2f2f",
+      lineHeight: "1.5",
+      flex: 1,
+      width: "100%",
+      minWidth: 0
+    };
+    const keyboardShortcutStyles = {
+      display: "flex",
+      alignItems: "center",
+      gap: "0px",
+      flexShrink: 0
+    };
+    const keyStyles = {
+      border: "1px solid #2f2f2f",
+      borderRadius: "5px",
+      padding: "0px 3px",
+      height: "16px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontFamily: "'Work Sans', sans-serif",
+      fontSize: "8px",
+      fontWeight: 400,
+      color: "#2f2f2f",
+      letterSpacing: "-0.08px",
+      lineHeight: "1.5",
+      minWidth: "16px"
+    };
+    const plusStyles = {
+      fontFamily: "'Work Sans', sans-serif",
+      fontSize: "8px",
+      fontWeight: 400,
+      color: "#2f2f2f",
+      letterSpacing: "-0.08px",
+      lineHeight: "1.5",
+      padding: "0 2px"
+    };
+    const clearButtonStyles = {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      width: "16px",
+      height: "16px",
+      cursor: "pointer",
+      border: "none",
+      background: "none",
+      padding: 0
+    };
+    const showKeyboardShortcut = isHovered && !isFocused;
+    const showClearButton = isFocused;
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      "div",
+      {
+        className,
+        style: containerStyles6,
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        onClick: () => inputRef.current?.focus(),
+        "data-testid": dataTestId,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: iconContainerStyles2, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react11.Search, { size: 12, color: "#2f2f2f", strokeWidth: 2 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              value,
+              onChange: handleChange,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              onKeyDown: handleKeyDown,
+              placeholder: isFocused ? "" : placeholder,
+              style: inputStyles5
+            }
+          ),
+          showKeyboardShortcut && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: keyboardShortcutStyles, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: keyStyles, children: "\u2318" }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { style: plusStyles, children: "+" }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: keyStyles, children: "K" })
+          ] }),
+          showClearButton && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: handleClear,
+              style: clearButtonStyles,
+              "aria-label": "Clear search",
+              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react11.X, { size: 13.333, color: "#2f2f2f", strokeWidth: 2 })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+SearchGlobal.displayName = "SearchGlobal";
+
+// src/SearchOnPage/SearchOnPage.tsx
+var React22 = __toESM(require("react"));
+var import_lucide_react12 = require("lucide-react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var SearchOnPage = React22.forwardRef(
+  ({
+    value = "",
+    onChange,
+    onSubmit,
+    onClear,
+    placeholder = "Search Reports",
+    className,
+    style,
+    "data-testid": dataTestId
+  }, ref) => {
+    const [isFocused, setIsFocused] = React22.useState(false);
+    const [isHovered, setIsHovered] = React22.useState(false);
+    const inputRef = React22.useRef(null);
+    React22.useImperativeHandle(ref, () => inputRef.current);
+    const handleFocus = () => {
+      setIsFocused(true);
+    };
+    const handleBlur = () => {
+      setIsFocused(false);
+    };
+    const handleChange = (e) => {
+      onChange?.(e.target.value);
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter") {
+        onSubmit?.(value);
+      }
+    };
+    const handleClear = () => {
+      onChange?.("");
+      onClear?.();
+      inputRef.current?.focus();
+    };
+    const containerStyles6 = {
+      position: "relative",
+      width: "200px",
+      height: "32px",
+      backgroundColor: isFocused ? "#ffffff" : isHovered ? "#efefef" : "#ffffff",
+      borderRadius: "16px",
+      padding: "8px 16px",
+      display: "flex",
+      alignItems: "center",
+      gap: "8px",
+      cursor: "text",
+      transition: "all 0.2s ease-in-out",
+      boxSizing: "border-box",
+      border: isFocused ? "1px solid #efefef" : "none",
+      boxShadow: isFocused ? "0px 0px 0px 3px #3cad51" : "none",
+      ...style
+    };
+    const iconContainerStyles2 = {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      padding: "2px"
+    };
+    const inputStyles5 = {
+      border: "none",
+      outline: "none",
+      backgroundColor: "transparent",
+      fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+      fontSize: "13px",
+      fontWeight: 400,
+      color: "#2f2f2f",
+      lineHeight: "1.5",
+      flex: 1,
+      width: "100%",
+      minWidth: 0
+    };
+    const clearButtonStyles = {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      width: "16px",
+      height: "16px",
+      cursor: "pointer",
+      border: "none",
+      background: "none",
+      padding: 0
+    };
+    const showClearButton = isFocused && value.length > 0;
+    const iconColor = isFocused || isHovered ? "#2f2f2f" : "#595959";
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+      "div",
+      {
+        className,
+        style: containerStyles6,
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        onClick: () => inputRef.current?.focus(),
+        "data-testid": dataTestId,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: iconContainerStyles2, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react12.Search, { size: 12, color: iconColor, strokeWidth: 2 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              value,
+              onChange: handleChange,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              onKeyDown: handleKeyDown,
+              placeholder: isFocused ? "" : placeholder,
+              style: inputStyles5
+            }
+          ),
+          showClearButton && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: handleClear,
+              style: clearButtonStyles,
+              "aria-label": "Clear search",
+              children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react12.X, { size: 13.333, color: "#2f2f2f", strokeWidth: 2 })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+SearchOnPage.displayName = "SearchOnPage";
+
+// src/Breadcrumbs/Breadcrumbs.tsx
+var React23 = __toESM(require("react"));
+var import_lucide_react13 = require("lucide-react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var Breadcrumbs = React23.forwardRef(
+  ({
+    items,
+    onCopy,
+    className,
+    style,
+    "data-testid": dataTestId
+  }, ref) => {
+    const [hoveredIndex, setHoveredIndex] = React23.useState(null);
+    const [focusedIndex, setFocusedIndex] = React23.useState(null);
+    const [showCopyTooltip, setShowCopyTooltip] = React23.useState(false);
+    const [ellipsisFocused, setEllipsisFocused] = React23.useState(false);
+    const [ellipsisHovered, setEllipsisHovered] = React23.useState(false);
+    const displayItems = React23.useMemo(() => {
+      if (items.length > 6) {
+        return [items[0], { label: "...", isEllipsis: true }, items[items.length - 1]];
+      }
+      return items;
+    }, [items]);
+    const handleCopy = () => {
+      onCopy?.();
+      const trail = items.map((item) => item.label).join(" / ");
+      navigator.clipboard.writeText(trail);
+    };
+    const containerStyles6 = {
+      display: "flex",
+      alignItems: "center",
+      gap: "8px",
+      ...style
+    };
+    const breadcrumbItemStyles = (index, isActive, isEllipsis) => {
+      const isFocused = focusedIndex === index;
+      if (isEllipsis) {
+        return {
+          display: "flex",
+          alignItems: "center",
+          gap: "4px",
+          height: "24px",
+          overflow: "hidden"
+        };
+      }
+      return {
+        display: "flex",
+        alignItems: "center",
+        gap: "4px",
+        height: "24px",
+        overflow: "hidden",
+        backgroundColor: isFocused ? "rgba(255, 255, 255, 0.01)" : "transparent",
+        borderRadius: "99px",
+        boxShadow: isFocused ? "0px 0px 0px 3px #3cad51" : "none",
+        padding: isFocused ? "0 6px" : "0 2px",
+        margin: isFocused ? "0" : "0 4px",
+        cursor: isActive ? "default" : "pointer",
+        textDecoration: "none"
+      };
+    };
+    const linkStyles = (isActive, isHovered) => ({
+      fontFamily: isActive ? "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" : "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+      fontSize: "13px",
+      fontWeight: isActive ? 600 : 400,
+      color: isActive ? isHovered ? "#0e8a0e" : "#2f2f2f" : isHovered ? "#0e8a0e" : "#595959",
+      lineHeight: "1.5",
+      whiteSpace: "nowrap"
+    });
+    const dividerStyles = {
+      fontFamily: "'PT Sans', sans-serif",
+      fontSize: "14px",
+      color: "#595959",
+      lineHeight: "normal",
+      whiteSpace: "nowrap"
+    };
+    const ellipsisButtonStyles = {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "24px",
+      height: "24px",
+      borderRadius: "99px",
+      border: "none",
+      background: "transparent",
+      cursor: "pointer",
+      backgroundColor: ellipsisFocused ? "rgba(255, 255, 255, 0.01)" : ellipsisHovered ? "#efefef" : "transparent",
+      boxShadow: ellipsisFocused ? "0px 0px 0px 3px #3cad51" : "none"
+    };
+    const copyButtonStyles = {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "24px",
+      height: "24px",
+      borderRadius: "99px",
+      border: "none",
+      background: showCopyTooltip ? "#efefef" : "transparent",
+      cursor: "pointer",
+      position: "relative"
+    };
+    const tooltipStyles2 = {
+      position: "absolute",
+      top: "100%",
+      left: "50%",
+      transform: "translateX(-50%)",
+      marginTop: "8px",
+      backgroundColor: "#2f2f2f",
+      color: "white",
+      padding: "12px",
+      borderRadius: "8px",
+      fontSize: "13px",
+      fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+      fontWeight: 400,
+      lineHeight: "1.5",
+      whiteSpace: "nowrap",
+      boxShadow: "0px 4px 12px rgba(32, 32, 32, 0.08)",
+      zIndex: 1e3
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      "div",
+      {
+        ref,
+        className,
+        style: containerStyles6,
+        "data-testid": dataTestId,
+        children: displayItems.map((item, index) => {
+          const isActive = index === displayItems.length - 1;
+          const isEllipsis = "isEllipsis" in item && item.isEllipsis;
+          if (isEllipsis) {
+            return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(React23.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                "button",
+                {
+                  style: ellipsisButtonStyles,
+                  onFocus: () => setEllipsisFocused(true),
+                  onBlur: () => setEllipsisFocused(false),
+                  onMouseEnter: () => setEllipsisHovered(true),
+                  onMouseLeave: () => setEllipsisHovered(false),
+                  "aria-label": "More breadcrumbs",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                    import_lucide_react13.MoreHorizontal,
+                    {
+                      size: 12,
+                      color: "#2f2f2f",
+                      strokeWidth: 2,
+                      style: { display: "block", flexShrink: 0 }
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { style: dividerStyles, children: " /" })
+            ] }, `ellipsis-${index}`);
+          }
+          const breadcrumbItem = item;
+          if (isActive) {
+            return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(React23.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                "div",
+                {
+                  style: breadcrumbItemStyles(index, true),
+                  onMouseEnter: () => setHoveredIndex(index),
+                  onMouseLeave: () => setHoveredIndex(null),
+                  onFocus: () => setFocusedIndex(index),
+                  onBlur: () => setFocusedIndex(null),
+                  tabIndex: 0,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { style: linkStyles(true, hoveredIndex === index), children: breadcrumbItem.label })
+                }
+              ),
+              onCopy && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                "button",
+                {
+                  style: copyButtonStyles,
+                  onClick: handleCopy,
+                  onMouseEnter: () => setShowCopyTooltip(true),
+                  onMouseLeave: () => setShowCopyTooltip(false),
+                  "aria-label": "Copy breadcrumb trail",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                      import_lucide_react13.Link,
+                      {
+                        size: 12,
+                        color: "#2f2f2f",
+                        strokeWidth: 2,
+                        style: { display: "block", flexShrink: 0 }
+                      }
+                    ),
+                    showCopyTooltip && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: tooltipStyles2, children: "Copy breadcrumb trail" })
+                  ]
+                }
+              )
+            ] }, index);
+          }
+          const Element = breadcrumbItem.href ? "a" : "button";
+          return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(React23.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+              Element,
+              {
+                ...breadcrumbItem.href ? { href: breadcrumbItem.href } : {},
+                style: {
+                  ...breadcrumbItemStyles(index, false),
+                  border: "none",
+                  background: "transparent"
+                },
+                onClick: (e) => {
+                  if (!breadcrumbItem.href && breadcrumbItem.onClick) {
+                    e.preventDefault();
+                    breadcrumbItem.onClick();
+                  }
+                },
+                onMouseEnter: () => setHoveredIndex(index),
+                onMouseLeave: () => setHoveredIndex(null),
+                onFocus: () => setFocusedIndex(index),
+                onBlur: () => setFocusedIndex(null),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { style: linkStyles(false, hoveredIndex === index), children: breadcrumbItem.label }),
+                  breadcrumbItem.hasDropdown && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                    import_lucide_react13.ChevronDown,
+                    {
+                      size: 12,
+                      color: hoveredIndex === index ? "#0e8a0e" : "#595959",
+                      strokeWidth: 2,
+                      style: { marginLeft: "2px", display: "inline-block", flexShrink: 0 }
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { style: dividerStyles, children: " /" })
+          ] }, index);
+        })
+      }
+    );
+  }
+);
+Breadcrumbs.displayName = "Breadcrumbs";
+
+// src/Logo/Logo.tsx
+var React24 = __toESM(require("react"));
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var Logo = React24.forwardRef(
+  ({
+    withText = true,
+    light = false,
+    width,
+    height,
+    className,
+    style
+  }, ref) => {
+    const defaultWidth = withText ? 66 : 25;
+    const defaultHeight = withText ? 26 : 25;
+    const finalWidth = width ?? defaultWidth;
+    const finalHeight = height ?? defaultHeight;
+    if (!withText) {
+      return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+        "svg",
+        {
+          ref,
+          width: finalWidth,
+          height: finalHeight,
+          viewBox: "0 0 25 25",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          className,
+          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_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" }) }) })
+          ]
+        }
+      );
+    }
+    const textColor = light ? "#2F2F2F" : "white";
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+      "svg",
+      {
+        ref,
+        width: finalWidth,
+        height: finalHeight,
+        viewBox: "0 0 66 26",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        className,
+        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 })
+        ]
+      }
+    );
+  }
+);
+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 segmentedStyles = {
+  container: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "8px",
+    padding: "8px",
+    backgroundColor: "#ffffff",
+    border: "1px solid #efefef",
+    borderRadius: "99px",
+    fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+  },
+  button: {
+    base: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "8px",
+      padding: "8px 16px",
+      borderRadius: "99px",
+      border: "none",
+      cursor: "pointer",
+      fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+      fontSize: "13px",
+      fontWeight: "600",
+      lineHeight: "1.5",
+      transition: "all 0.15s ease-in-out",
+      outline: "none",
+      whiteSpace: "nowrap"
+    },
+    default: {
+      backgroundColor: "transparent",
+      color: "#595959"
+    },
+    hover: {
+      backgroundColor: "#f8f8f8",
+      color: "#2f2f2f"
+    },
+    active: {
+      backgroundColor: "#0e8a0e",
+      color: "#ffffff"
+    },
+    activeHover: {
+      backgroundColor: "#005700",
+      color: "#ffffff"
+    }
+  }
+};
+var ButtonSegmented = React25.forwardRef(
+  ({ items, activeIndex = 0, onChange, className, style, ...props }, ref) => {
+    const [hoveredIndex, setHoveredIndex] = React25.useState(null);
+    const validItems = items.slice(0, 4);
+    if (validItems.length < 2) {
+      console.warn("ButtonSegmented requires at least 2 items");
+    }
+    const hasIcons = validItems.some((item) => item.icon);
+    const handleClick = (index) => {
+      if (index !== activeIndex && onChange) {
+        onChange(index, validItems[index]);
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      "div",
+      {
+        ref,
+        className: (0, import_clsx20.clsx)("arbor-button-segmented", className),
+        style: { ...segmentedStyles.container, ...style },
+        role: "group",
+        "aria-label": "Segmented button group",
+        ...props,
+        children: validItems.map((item, index) => {
+          const isActive = index === activeIndex;
+          const isHovered = hoveredIndex === index;
+          let buttonStyle = {
+            ...segmentedStyles.button.base
+          };
+          if (isActive) {
+            buttonStyle = {
+              ...buttonStyle,
+              ...segmentedStyles.button.active,
+              ...isHovered && segmentedStyles.button.activeHover
+            };
+          } else {
+            buttonStyle = {
+              ...buttonStyle,
+              ...segmentedStyles.button.default,
+              ...isHovered && segmentedStyles.button.hover
+            };
+          }
+          return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+            "button",
+            {
+              type: "button",
+              style: buttonStyle,
+              onClick: () => handleClick(index),
+              onMouseEnter: () => setHoveredIndex(index),
+              onMouseLeave: () => setHoveredIndex(null),
+              "aria-pressed": isActive,
+              children: [
+                hasIcons && item.icon && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                  "span",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      width: "16px",
+                      height: "16px"
+                    },
+                    children: item.icon
+                  }
+                ),
+                item.label
+              ]
+            },
+            item.value || index
+          );
+        })
+      }
+    );
+  }
+);
+ButtonSegmented.displayName = "ButtonSegmented";
+
+// src/SectionHeading/SectionHeading.tsx
+var React27 = __toESM(require("react"));
+var import_clsx22 = 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)(
+    "path",
+    {
+      d: "M7 0.5L13.5 11.5H0.5L7 0.5Z",
+      stroke: color,
+      strokeWidth: "1.2",
+      strokeLinejoin: "round",
+      fill: "none"
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    "path",
+    {
+      d: "M7 4.5V7",
+      stroke: color,
+      strokeWidth: "1.2",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime26.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 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 variantConfig3 = {
+  warning: {
+    backgroundColor: "#fffaf5",
+    iconColor: "#e4720d"
+  },
+  danger: {
+    backgroundColor: "#fff5f5",
+    iconColor: "#c93232"
+  },
+  info: {
+    backgroundColor: "#f5fbff",
+    iconColor: "#2c8bca"
+  },
+  success: {
+    backgroundColor: "#f5fff8",
+    iconColor: "#16a33d"
+  }
+};
+var sectionIconStyles = {
+  container: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "4px",
+    borderRadius: "99px"
+  },
+  iconWrapper: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "16px",
+    height: "16px"
+  }
+};
+var SectionIcon = React26.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 });
+        case "success":
+          return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SuccessIcon, { color: config.iconColor });
+        case "info":
+        default:
+          return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(InfoIcon, { color: config.iconColor });
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      "div",
+      {
+        ref,
+        className: (0, import_clsx21.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() })
+      }
+    );
+  }
+);
+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 sectionHeadingStyles = {
+  container: {
+    display: "flex",
+    alignItems: "center",
+    gap: "12px",
+    padding: "8px",
+    borderBottom: "1px solid #f8f8f8",
+    fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+    minHeight: "56px",
+    boxSizing: "border-box"
+  },
+  title: {
+    fontSize: "22px",
+    fontWeight: "600",
+    color: "#2f2f2f",
+    lineHeight: "1.25",
+    flex: 1,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    margin: 0
+  },
+  titleWithIcon: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    flex: 1
+  },
+  iconBadge: {
+    display: "flex",
+    alignItems: "center",
+    flexShrink: 0
+  },
+  avatar: {
+    width: "48px",
+    height: "48px",
+    borderRadius: "8px",
+    border: "1px solid #efefef",
+    backgroundColor: "#f8f8f8",
+    flexShrink: 0,
+    overflow: "hidden",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  avatarImage: {
+    width: "100%",
+    height: "100%",
+    objectFit: "cover"
+  },
+  avatarInitials: {
+    fontSize: "18px",
+    fontWeight: "600",
+    color: "#595959"
+  },
+  button: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "8px",
+    height: "32px",
+    padding: "0 16px",
+    backgroundColor: "#0e8a0e",
+    color: "#ffffff",
+    border: "none",
+    borderRadius: "99px",
+    fontSize: "13px",
+    fontWeight: "600",
+    cursor: "pointer",
+    transition: "background-color 0.15s ease-in-out",
+    whiteSpace: "nowrap",
+    flexShrink: 0
+  },
+  buttonHover: {
+    backgroundColor: "#005700"
+  },
+  buttonGroup: {
+    container: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "8px",
+      padding: "8px",
+      backgroundColor: "#ffffff",
+      border: "1px solid #efefef",
+      borderRadius: "99px",
+      flexShrink: 0
+    },
+    button: {
+      base: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "8px",
+        padding: "8px 16px",
+        borderRadius: "99px",
+        border: "none",
+        cursor: "pointer",
+        fontSize: "13px",
+        fontWeight: "600",
+        lineHeight: "1.5",
+        transition: "all 0.15s ease-in-out",
+        outline: "none",
+        whiteSpace: "nowrap"
+      },
+      default: {
+        backgroundColor: "transparent",
+        color: "#595959"
+      },
+      hover: {
+        backgroundColor: "#f8f8f8",
+        color: "#2f2f2f"
+      },
+      active: {
+        backgroundColor: "#0e8a0e",
+        color: "#ffffff"
+      },
+      activeHover: {
+        backgroundColor: "#005700",
+        color: "#ffffff"
+      }
+    }
+  }
+};
+var SectionHeading = React27.forwardRef(
+  ({ title, icon, avatar, button, buttonGroup, className, style, ...props }, ref) => {
+    const [buttonHovered, setButtonHovered] = React27.useState(false);
+    const [hoveredGroupIndex, setHoveredGroupIndex] = React27.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)(
+        "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, {}) });
+    };
+    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_runtime27.jsx)("h2", { style: sectionHeadingStyles.title, children: title });
+    };
+    const renderButton = () => {
+      if (!button) return null;
+      return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+        "button",
+        {
+          type: "button",
+          style: {
+            ...sectionHeadingStyles.button,
+            ...buttonHovered && sectionHeadingStyles.buttonHover
+          },
+          onClick: button.onClick,
+          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.label
+          ]
+        }
+      );
+    };
+    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) => {
+        const isActive = index === activeIndex;
+        const isHovered = hoveredGroupIndex === index;
+        let btnStyle = {
+          ...sectionHeadingStyles.buttonGroup.button.base
+        };
+        if (isActive) {
+          btnStyle = {
+            ...btnStyle,
+            ...sectionHeadingStyles.buttonGroup.button.active,
+            ...isHovered && sectionHeadingStyles.buttonGroup.button.activeHover
+          };
+        } else {
+          btnStyle = {
+            ...btnStyle,
+            ...sectionHeadingStyles.buttonGroup.button.default,
+            ...isHovered && sectionHeadingStyles.buttonGroup.button.hover
+          };
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+          "button",
+          {
+            type: "button",
+            style: btnStyle,
+            onClick: () => {
+              if (index !== activeIndex && onChange) {
+                onChange(index);
+              }
+            },
+            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.label
+            ]
+          },
+          item.value || index
+        );
+      }) });
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+      "div",
+      {
+        ref,
+        className: (0, import_clsx22.clsx)("arbor-section-heading", className),
+        style: { ...sectionHeadingStyles.container, ...style },
+        ...props,
+        children: [
+          renderAvatar(),
+          renderTitle(),
+          renderButton(),
+          renderButtonGroup()
+        ]
+      }
+    );
+  }
+);
+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 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)(
+      "path",
+      {
+        d: "M6 4L10 8L6 12",
+        stroke: "#2f2f2f",
+        strokeWidth: "1.2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ) });
+  }
+  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)(
+    "path",
+    {
+      d: "M6 4L10 8L6 12",
+      stroke: "#b3b3b3",
+      strokeWidth: "1.2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+};
+var listRowStyles = {
+  container: {
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    borderBottom: "1px solid #f8f8f8",
+    fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+    boxSizing: "border-box",
+    borderRadius: "8px",
+    transition: "background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out",
+    outline: "none"
+  },
+  containerHover: {
+    backgroundColor: "#f8f8f8"
+  },
+  containerFocus: {
+    outline: "3px solid #3cad51",
+    outlineOffset: "-3px"
+  },
+  containerClickable: {
+    cursor: "pointer"
+  },
+  content: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    width: "100%",
+    padding: "4px 8px",
+    minHeight: "28px"
+  },
+  label: {
+    fontSize: "13px",
+    fontWeight: "600",
+    color: "#2f2f2f",
+    lineHeight: "1.5",
+    width: "190px",
+    flexShrink: 0
+  },
+  valueContainer: {
+    flex: 1,
+    display: "flex",
+    alignItems: "center"
+  },
+  value: {
+    fontSize: "13px",
+    fontWeight: "400",
+    color: "#2f2f2f",
+    lineHeight: "1.5"
+  },
+  rightContainer: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: "8px",
+    flexShrink: 0
+  },
+  note: {
+    fontSize: "13px",
+    fontWeight: "400",
+    fontStyle: "italic",
+    color: "#2f2f2f",
+    lineHeight: "1.5",
+    textAlign: "right"
+  },
+  iconWrapper: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "16px",
+    height: "16px",
+    flexShrink: 0
+  }
+};
+var ListRow = React28.forwardRef(
+  ({ value, label, note, icon = false, onClick, className, style, ...props }, ref) => {
+    const [isHovered, setIsHovered] = React28.useState(false);
+    const [isFocused, setIsFocused] = React28.useState(false);
+    const showHoverState = icon && isHovered;
+    const isClickable = icon && onClick;
+    const containerStyle = {
+      ...listRowStyles.container,
+      ...showHoverState && listRowStyles.containerHover,
+      ...isFocused && listRowStyles.containerFocus,
+      ...isClickable && listRowStyles.containerClickable,
+      ...style
+    };
+    const handleClick = () => {
+      if (isClickable && onClick) {
+        onClick();
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (isClickable && (event.key === "Enter" || event.key === " ")) {
+        event.preventDefault();
+        onClick?.();
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      "div",
+      {
+        ref,
+        className: (0, import_clsx23.clsx)("arbor-list-row", className),
+        style: containerStyle,
+        onClick: handleClick,
+        onMouseEnter: () => icon && setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        onFocus: () => setIsFocused(true),
+        onBlur: () => setIsFocused(false),
+        onKeyDown: handleKeyDown,
+        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 }) })
+          ] })
+        ] })
+      }
+    );
+  }
+);
+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 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)(
+      "path",
+      {
+        d: "M6 4L10 8L6 12",
+        stroke: "#2f2f2f",
+        strokeWidth: "1.2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ) });
+  }
+  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",
+      stroke: "#b3b3b3",
+      strokeWidth: "1.2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+};
+var listRowMultiLineStyles = {
+  container: {
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    borderBottom: "1px solid #f8f8f8",
+    fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+    boxSizing: "border-box",
+    borderRadius: "8px",
+    transition: "background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out",
+    outline: "none"
+  },
+  containerHover: {
+    backgroundColor: "#f8f8f8"
+  },
+  containerFocus: {
+    outline: "3px solid #3cad51",
+    outlineOffset: "-3px"
+  },
+  containerClickable: {
+    cursor: "pointer"
+  },
+  content: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    width: "100%",
+    padding: "4px 8px",
+    minHeight: "44px"
+  },
+  textContent: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    justifyContent: "center",
+    flex: 1,
+    gap: "0px"
+  },
+  title: {
+    fontSize: "16px",
+    fontWeight: "600",
+    color: "#2f2f2f",
+    lineHeight: "1.5",
+    margin: 0
+  },
+  description: {
+    fontSize: "13px",
+    fontWeight: "400",
+    color: "#2f2f2f",
+    lineHeight: "1.5",
+    margin: 0
+  },
+  iconWrapper: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "16px",
+    height: "16px",
+    flexShrink: 0,
+    marginLeft: "8px"
+  }
+};
+var ListRowMultiLine = React29.forwardRef(
+  ({ title, description, icon = false, onClick, className, style, ...props }, ref) => {
+    const [isHovered, setIsHovered] = React29.useState(false);
+    const [isFocused, setIsFocused] = React29.useState(false);
+    const showHoverState = icon && isHovered;
+    const isClickable = icon && onClick;
+    const containerStyle = {
+      ...listRowMultiLineStyles.container,
+      ...showHoverState && listRowMultiLineStyles.containerHover,
+      ...isFocused && listRowMultiLineStyles.containerFocus,
+      ...isClickable && listRowMultiLineStyles.containerClickable,
+      ...style
+    };
+    const handleClick = () => {
+      if (isClickable && onClick) {
+        onClick();
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (isClickable && (event.key === "Enter" || event.key === " ")) {
+        event.preventDefault();
+        onClick?.();
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      "div",
+      {
+        ref,
+        className: (0, import_clsx24.clsx)("arbor-list-row-multi-line", className),
+        style: containerStyle,
+        onClick: handleClick,
+        onMouseEnter: () => icon && setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        onFocus: () => setIsFocused(true),
+        onBlur: () => setIsFocused(false),
+        onKeyDown: handleKeyDown,
+        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 })
+          ] }),
+          icon && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { style: listRowMultiLineStyles.iconWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CaretIcon2, { isHovered }) })
+        ] })
+      }
+    );
+  }
+);
+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)(
+    "path",
+    {
+      d: "M8 7V11",
+      stroke: "#2f2f2f",
+      strokeWidth: "1.2",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime30.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)(
+  "path",
+  {
+    d: "M8 3V13M3 8H13",
+    stroke: color,
+    strokeWidth: "1.2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+var subSectionHeadingStyles = {
+  container: {
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    borderBottom: "1px solid #efefef",
+    fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+    boxSizing: "border-box"
+  },
+  containerNoButton: {
+    padding: "12px 8px",
+    gap: "0px"
+  },
+  containerWithButton: {
+    padding: "8px",
+    gap: "12px",
+    justifyContent: "space-between"
+  },
+  textContainer: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    flex: 1,
+    minHeight: "16px"
+  },
+  title: {
+    fontSize: "18px",
+    fontWeight: "600",
+    color: "#2f2f2f",
+    lineHeight: "1.25",
+    margin: 0,
+    whiteSpace: "nowrap"
+  },
+  iconWrapper: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "16px",
+    height: "16px",
+    flexShrink: 0
+  },
+  buttonBase: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "8px",
+    height: "32px",
+    minHeight: "32px",
+    padding: "0 16px",
+    borderRadius: "99px",
+    border: "none",
+    cursor: "pointer",
+    fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+    fontSize: "13px",
+    fontWeight: "600",
+    lineHeight: "1.5",
+    whiteSpace: "nowrap",
+    flexShrink: 0,
+    transition: "background-color 0.15s ease-in-out, opacity 0.15s ease-in-out"
+  },
+  buttonPrimary: {
+    backgroundColor: "#0e8a0e",
+    color: "#ffffff"
+  },
+  buttonPrimaryHover: {
+    backgroundColor: "#0a6b0a"
+  },
+  buttonTertiary: {
+    backgroundColor: "#efefef",
+    color: "#2f2f2f"
+  },
+  buttonTertiaryHover: {
+    backgroundColor: "#e5e5e5"
+  },
+  buttonIconWrapper: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "16px",
+    height: "16px",
+    flexShrink: 0
+  }
+};
+var SubSectionHeading = React30.forwardRef(
+  ({
+    title,
+    icon = false,
+    button,
+    buttonText = "Button Text",
+    buttonIcon,
+    onButtonClick,
+    className,
+    style,
+    ...props
+  }, ref) => {
+    const [isButtonHovered, setIsButtonHovered] = React30.useState(false);
+    const containerStyle = {
+      ...subSectionHeadingStyles.container,
+      ...button ? subSectionHeadingStyles.containerWithButton : subSectionHeadingStyles.containerNoButton,
+      ...style
+    };
+    const getButtonStyle = () => {
+      const baseStyle = { ...subSectionHeadingStyles.buttonBase };
+      if (button === "primary") {
+        return {
+          ...baseStyle,
+          ...subSectionHeadingStyles.buttonPrimary,
+          ...isButtonHovered && subSectionHeadingStyles.buttonPrimaryHover
+        };
+      }
+      if (button === "tertiary") {
+        return {
+          ...baseStyle,
+          ...subSectionHeadingStyles.buttonTertiary,
+          ...isButtonHovered && subSectionHeadingStyles.buttonTertiaryHover
+        };
+      }
+      return baseStyle;
+    };
+    const renderButtonIcon = () => {
+      if (buttonIcon) {
+        return /* @__PURE__ */ (0, import_jsx_runtime30.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_runtime30.jsxs)(
+      "div",
+      {
+        ref,
+        className: (0, import_clsx25.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, {}) })
+          ] }),
+          button && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+            "button",
+            {
+              type: "button",
+              style: getButtonStyle(),
+              onClick: onButtonClick,
+              onMouseEnter: () => setIsButtonHovered(true),
+              onMouseLeave: () => setIsButtonHovered(false),
+              children: [
+                renderButtonIcon(),
+                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: buttonText })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+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)(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: {
+      transform: expanded ? "rotate(0deg)" : "rotate(180deg)",
+      transition: "transform 0.2s ease-in-out"
+    },
+    children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      "path",
+      {
+        d: "M4 6L8 10L12 6",
+        stroke: "#2f2f2f",
+        strokeWidth: "1.2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+);
+var subSectionInteractiveStyles = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    width: "100%",
+    fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+    boxSizing: "border-box"
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    cursor: "pointer",
+    border: "none",
+    background: "transparent",
+    padding: 0,
+    margin: 0,
+    textAlign: "left",
+    outline: "none"
+  },
+  headerContent: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    width: "100%",
+    padding: "12px 8px",
+    borderRadius: "8px",
+    transition: "background-color 0.15s ease-in-out",
+    minHeight: "16px",
+    gap: "12px"
+  },
+  headerContentHover: {
+    backgroundColor: "#f8f8f8"
+  },
+  headerContentFocus: {
+    outline: "3px solid #3cad51",
+    outlineOffset: "-3px"
+  },
+  title: {
+    fontSize: "18px",
+    fontWeight: "600",
+    color: "#2f2f2f",
+    lineHeight: "1.25",
+    margin: 0,
+    flex: 1,
+    whiteSpace: "nowrap"
+  },
+  iconWrapper: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "16px",
+    height: "16px",
+    flexShrink: 0
+  },
+  content: {
+    overflow: "hidden",
+    transition: "max-height 0.3s ease-in-out, opacity 0.2s ease-in-out"
+  },
+  contentExpanded: {
+    maxHeight: "2000px",
+    opacity: 1
+  },
+  contentCollapsed: {
+    maxHeight: "0px",
+    opacity: 0
+  },
+  contentInner: {
+    borderBottom: "1px solid #f8f8f8"
+  }
+};
+var SubSectionInteractive = React31.forwardRef(
+  ({
+    title,
+    children,
+    expanded: controlledExpanded,
+    defaultExpanded = true,
+    onExpandedChange,
+    className,
+    style,
+    ...props
+  }, ref) => {
+    const [internalExpanded, setInternalExpanded] = React31.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 handleToggle = () => {
+      const newExpanded = !isExpanded;
+      if (!isControlled) {
+        setInternalExpanded(newExpanded);
+      }
+      onExpandedChange?.(newExpanded);
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        handleToggle();
+      }
+    };
+    const headerContentStyle = {
+      ...subSectionInteractiveStyles.headerContent,
+      ...isHovered && subSectionInteractiveStyles.headerContentHover,
+      ...isFocused && subSectionInteractiveStyles.headerContentFocus
+    };
+    const contentStyle = {
+      ...subSectionInteractiveStyles.content,
+      ...isExpanded ? subSectionInteractiveStyles.contentExpanded : subSectionInteractiveStyles.contentCollapsed
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+      "div",
+      {
+        ref,
+        className: (0, import_clsx26.clsx)("arbor-sub-section-interactive", className),
+        style: { ...subSectionInteractiveStyles.container, ...style },
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+            "button",
+            {
+              type: "button",
+              style: subSectionInteractiveStyles.header,
+              onClick: handleToggle,
+              onMouseEnter: () => setIsHovered(true),
+              onMouseLeave: () => setIsHovered(false),
+              onFocus: () => setIsFocused(true),
+              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 }) })
+              ] })
+            }
+          ),
+          /* @__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 }) })
+        ]
+      }
+    );
+  }
+);
+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)(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: {
+      transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
+      transition: "transform 0.2s ease-in-out"
+    },
+    children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      "path",
+      {
+        d: "M4 6L8 10L12 6",
+        stroke: "#2f2f2f",
+        strokeWidth: "1.2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+);
+var sectionHeadingInteractiveStyles = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    width: "100%",
+    fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+    boxSizing: "border-box"
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    cursor: "pointer",
+    border: "none",
+    background: "transparent",
+    padding: 0,
+    margin: 0,
+    textAlign: "left",
+    outline: "none"
+  },
+  // When collapsed, no bottom border
+  headerContainerCollapsed: {
+    display: "flex",
+    alignItems: "center",
+    width: "100%"
+  },
+  // When expanded, has bottom border
+  headerContainerExpanded: {
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    borderBottom: "1px solid #f8f8f8"
+  },
+  headerContent: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    width: "100%",
+    padding: "12px 8px",
+    borderRadius: "8px",
+    transition: "background-color 0.15s ease-in-out",
+    minHeight: "16px",
+    gap: "12px"
+  },
+  headerContentHover: {
+    backgroundColor: "#f8f8f8"
+  },
+  headerContentFocus: {
+    outline: "3px solid #3cad51",
+    outlineOffset: "-3px"
+  },
+  title: {
+    fontSize: "22px",
+    fontWeight: "600",
+    color: "#2f2f2f",
+    lineHeight: "1.25",
+    margin: 0,
+    flex: 1,
+    whiteSpace: "nowrap"
+  },
+  iconWrapper: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "16px",
+    height: "16px",
+    flexShrink: 0
+  },
+  content: {
+    overflow: "hidden",
+    transition: "max-height 0.3s ease-in-out, opacity 0.2s ease-in-out"
+  },
+  contentExpanded: {
+    maxHeight: "5000px",
+    opacity: 1
+  },
+  contentCollapsed: {
+    maxHeight: "0px",
+    opacity: 0
+  },
+  contentInner: {
+    // Content area styling - children go here
+  }
+};
+var SectionHeadingInteractive = React32.forwardRef(
+  ({
+    title,
+    children,
+    expanded: controlledExpanded,
+    defaultExpanded = true,
+    onExpandedChange,
+    className,
+    style,
+    ...props
+  }, ref) => {
+    const [internalExpanded, setInternalExpanded] = React32.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 handleToggle = () => {
+      const newExpanded = !isExpanded;
+      if (!isControlled) {
+        setInternalExpanded(newExpanded);
+      }
+      onExpandedChange?.(newExpanded);
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        handleToggle();
+      }
+    };
+    const headerContainerStyle = isExpanded ? sectionHeadingInteractiveStyles.headerContainerExpanded : sectionHeadingInteractiveStyles.headerContainerCollapsed;
+    const headerContentStyle = {
+      ...sectionHeadingInteractiveStyles.headerContent,
+      ...isHovered && sectionHeadingInteractiveStyles.headerContentHover,
+      ...isFocused && sectionHeadingInteractiveStyles.headerContentFocus
+    };
+    const contentStyle = {
+      ...sectionHeadingInteractiveStyles.content,
+      ...isExpanded ? sectionHeadingInteractiveStyles.contentExpanded : sectionHeadingInteractiveStyles.contentCollapsed
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+      "div",
+      {
+        ref,
+        className: (0, import_clsx27.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)(
+            "button",
+            {
+              type: "button",
+              style: sectionHeadingInteractiveStyles.header,
+              onClick: handleToggle,
+              onMouseEnter: () => setIsHovered(true),
+              onMouseLeave: () => setIsHovered(false),
+              onFocus: () => setIsFocused(true),
+              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 }) })
+              ] })
+            }
+          ) }),
+          /* @__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 }) })
+        ]
+      }
+    );
+  }
+);
+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 sectionStyles = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    width: "100%",
+    padding: "8px",
+    borderRadius: "8px",
+    backgroundColor: "#ffffff",
+    boxSizing: "border-box",
+    fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+  }
+};
+var Section = React33.forwardRef(
+  ({ children, className, style, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      "div",
+      {
+        ref,
+        className: (0, import_clsx28.clsx)("arbor-section", className),
+        style: { ...sectionStyles.container, ...style },
+        ...props,
+        children
+      }
+    );
+  }
+);
+Section.displayName = "Section";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Avatar,
   Banner,
+  Breadcrumbs,
   Button,
+  ButtonSegmented,
   Card,
   Checkbox,
   Combobox,
   DatePicker,
   Input,
+  ListRow,
+  ListRowMultiLine,
+  Logo,
   NumericInput,
   Pagination,
   Radio,
+  SearchGlobal,
+  SearchOnPage,
+  Section,
+  SectionHeading,
+  SectionHeadingInteractive,
+  SectionIcon,
+  SubSectionHeading,
+  SubSectionInteractive,
   Table,
   TableControls,
   TableFooterPagination,