@tonyarbor/components 0.4.0 → 0.7.0

package/dist/index.js

@@ -34,16 +34,30 @@ __export(src_exports, {
   Banner: () => Banner,
   Breadcrumbs: () => Breadcrumbs,
   Button: () => Button,
+  ButtonSegmented: () => ButtonSegmented,
   Card: () => Card,
   Checkbox: () => Checkbox,
   Combobox: () => Combobox,
   DatePicker: () => DatePicker,
   Input: () => Input,
+  ListRow: () => ListRow,
+  ListRowMultiLine: () => ListRowMultiLine,
+  Logo: () => Logo,
+  Modal: () => Modal,
+  ModalContent: () => ModalContent,
+  ModalFooter: () => ModalFooter,
+  ModalHeader: () => ModalHeader,
   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,
@@ -124,6 +138,32 @@ var buttonStyles = {
         cursor: "not-allowed"
       }
     },
+    tertiary: {
+      backgroundColor: "#efefef",
+      // grey-100
+      color: "#2f2f2f",
+      // grey-900
+      ":hover": {
+        backgroundColor: "#dfdfdf"
+        // grey-200
+      },
+      ":active": {
+        backgroundColor: "#d1d1d1"
+        // grey-300
+      },
+      ":focus-visible": {
+        outline: "3px solid #3cad51",
+        // brand-500
+        outlineOffset: "0px"
+      },
+      ":disabled": {
+        backgroundColor: "#f8f8f8",
+        // grey-050
+        color: "#b3b3b3",
+        // grey-400
+        cursor: "not-allowed"
+      }
+    },
     destructive: {
       backgroundColor: "#c93232",
       // destructive-500
@@ -146,6 +186,36 @@ var buttonStyles = {
         cursor: "not-allowed"
       }
     },
+    "destructive-secondary": {
+      backgroundColor: "#ffffff",
+      color: "#a62323",
+      // destructive-600
+      border: "1px solid #c93232",
+      // destructive-500
+      ":hover": {
+        backgroundColor: "#a62323",
+        // destructive-600
+        color: "#ffffff",
+        border: "1px solid #a62323"
+      },
+      ":active": {
+        backgroundColor: "#920a0a",
+        // destructive-700
+        color: "#ffffff",
+        border: "1px solid #920a0a"
+      },
+      ":focus-visible": {
+        outline: "3px solid #3cad51",
+        // brand-500 (green focus ring)
+        outlineOffset: "0px"
+      },
+      ":disabled": {
+        backgroundColor: "#ffffff",
+        color: "#b3b3b3",
+        border: "1px solid #d1d1d1",
+        cursor: "not-allowed"
+      }
+    },
     ghost: {
       backgroundColor: "transparent",
       color: "#0b800b",
@@ -4700,22 +4770,1674 @@ 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(
+  ({
+    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";
+
+// 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)(
+  "svg",
+  {
+    width: "10",
+    height: "10",
+    viewBox: "0 0 10 10",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      "path",
+      {
+        d: "M1 1L9 9M9 1L1 9",
+        stroke: "#2f2f2f",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+);
+var modalHeaderStyles = {
+  container: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    width: "100%",
+    padding: "16px",
+    backgroundColor: "#ffffff",
+    boxSizing: "border-box",
+    fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+    minHeight: "56px"
+  },
+  leftContent: {
+    display: "flex",
+    alignItems: "center",
+    gap: "16px",
+    flex: 1
+  },
+  title: {
+    fontSize: "22px",
+    fontWeight: "600",
+    color: "#2f2f2f",
+    lineHeight: "1.25",
+    margin: 0
+  },
+  closeButton: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "32px",
+    height: "32px",
+    borderRadius: "16px",
+    backgroundColor: "#ffffff",
+    border: "none",
+    cursor: "pointer",
+    padding: 0,
+    flexShrink: 0,
+    transition: "background-color 0.15s ease-in-out"
+  },
+  closeButtonHover: {
+    backgroundColor: "#f8f8f8"
+  },
+  closeButtonFocus: {
+    outline: "3px solid #3cad51",
+    outlineOffset: "-3px"
+  }
+};
+var ModalHeader = React34.forwardRef(
+  ({ title, icon, onClose, className, style, ...props }, ref) => {
+    const [isHovered, setIsHovered] = React34.useState(false);
+    const [isFocused, setIsFocused] = React34.useState(false);
+    const closeButtonStyle = {
+      ...modalHeaderStyles.closeButton,
+      ...isHovered && modalHeaderStyles.closeButtonHover,
+      ...isFocused && modalHeaderStyles.closeButtonFocus
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+      "div",
+      {
+        ref,
+        className: (0, import_clsx29.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 })
+          ] }),
+          onClose && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              onMouseEnter: () => setIsHovered(true),
+              onMouseLeave: () => setIsHovered(false),
+              onFocus: () => setIsFocused(true),
+              onBlur: () => setIsFocused(false),
+              style: closeButtonStyle,
+              "aria-label": "Close modal",
+              children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CloseIcon, {})
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+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 modalFooterStyles = {
+  container: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: "16px",
+    width: "100%",
+    padding: "16px",
+    backgroundColor: "#ffffff",
+    boxSizing: "border-box",
+    maxHeight: "56px"
+  }
+};
+var ModalFooter = React35.forwardRef(
+  ({ children, className, style, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      "div",
+      {
+        ref,
+        className: (0, import_clsx30.clsx)("arbor-modal-footer", className),
+        style: { ...modalFooterStyles.container, ...style },
+        ...props,
+        children
+      }
+    );
+  }
+);
+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 modalStyles = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    backgroundColor: "#f8f8f8",
+    // grey-050
+    borderRadius: "8px",
+    boxShadow: "0px 8px 24px 0px rgba(32, 32, 32, 0.12)",
+    overflow: "hidden",
+    boxSizing: "border-box",
+    fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+  },
+  content: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "100%",
+    padding: "32px 16px",
+    backgroundColor: "#f8f8f8",
+    // grey-050
+    boxSizing: "border-box"
+  },
+  contentText: {
+    flex: 1,
+    fontSize: "13px",
+    fontWeight: "400",
+    color: "#2f2f2f",
+    lineHeight: "1.5"
+  }
+};
+var Modal = React36.forwardRef(
+  ({ children, width = 584, className, style, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      "div",
+      {
+        ref,
+        className: (0, import_clsx31.clsx)("arbor-modal", className),
+        style: {
+          ...modalStyles.container,
+          width: typeof width === "number" ? `${width}px` : width,
+          ...style
+        },
+        role: "dialog",
+        "aria-modal": "true",
+        ...props,
+        children
+      }
+    );
+  }
+);
+Modal.displayName = "Modal";
+var ModalContent = React36.forwardRef(
+  ({ children, className, style, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      "div",
+      {
+        ref,
+        className: (0, import_clsx31.clsx)("arbor-modal-content", className),
+        style: { ...modalStyles.content, ...style },
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { style: modalStyles.contentText, children })
+      }
+    );
+  }
+);
+ModalContent.displayName = "ModalContent";
 // 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,
+  Modal,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
   NumericInput,
   Pagination,
   Radio,
   SearchGlobal,
   SearchOnPage,
+  Section,
+  SectionHeading,
+  SectionHeadingInteractive,
+  SectionIcon,
+  SubSectionHeading,
+  SubSectionInteractive,
   Table,
   TableControls,
   TableFooterPagination,