@wealthx/shadcn 1.3.1 → 1.3.3

package/dist/components/ui/financial-cards.js

@@ -69,7 +69,7 @@ __export(financial_cards_exports, {
 });
 module.exports = __toCommonJS(financial_cards_exports);
 var React2 = __toESM(require("react"));
-var import_lucide_react3 = require("lucide-react");
+var import_lucide_react4 = require("lucide-react");
 
 // src/lib/utils.ts
 var import_clsx = require("clsx");
@@ -218,11 +218,86 @@ function Badge(_a) {
   );
 }
 
-// src/components/ui/radio-group.tsx
+// src/components/ui/accordion.tsx
 var import_lucide_react = require("lucide-react");
+var import_accordion = require("@base-ui/react/accordion");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Accordion(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_accordion.Accordion.Root, __spreadValues({ "data-slot": "accordion" }, props));
+}
+function AccordionItem(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_accordion.Accordion.Item,
+    __spreadValues({
+      className: cn("border-b", className),
+      "data-slot": "accordion-item"
+    }, props)
+  );
+}
+function AccordionTrigger(_a) {
+  var _b = _a, {
+    className,
+    children
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_accordion.Accordion.Header, { className: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    import_accordion.Accordion.Trigger,
+    __spreadProps(__spreadValues({
+      className: cn(
+        // layout
+        "flex flex-1 items-center justify-between gap-4 py-4 text-left",
+        // typography
+        "text-label-medium",
+        // base
+        "rounded-none outline-none transition-[color,opacity]",
+        // interactive states
+        "hover:underline",
+        "focus-visible:ring-2 focus-visible:ring-foreground/30",
+        "disabled:pointer-events-none disabled:opacity-50",
+        // chevron rotation when open
+        "[&[data-panel-open]>svg]:rotate-180",
+        className
+      ),
+      "data-slot": "accordion-trigger"
+    }, props), {
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.ChevronDownIcon, { className: "pointer-events-none size-4 shrink-0 text-muted-foreground transition-transform duration-200" })
+      ]
+    })
+  ) });
+}
+function AccordionContent(_a) {
+  var _b = _a, {
+    className,
+    children
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_accordion.Accordion.Panel,
+    __spreadProps(__spreadValues({
+      className: "overflow-hidden text-body-small h-(--accordion-panel-height) transition-[height] duration-200 ease-out data-starting-style:h-0 data-ending-style:h-0",
+      "data-slot": "accordion-content"
+    }, props), {
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn("pb-4 text-muted-foreground", className), children })
+    })
+  );
+}
+
+// src/components/ui/radio-group.tsx
+var import_lucide_react2 = require("lucide-react");
 var import_radio_group = require("@base-ui/react/radio-group");
 var import_radio = require("@base-ui/react/radio");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var CIRCLE_BASE = "inline-flex items-center justify-center aspect-square size-4 shrink-0 rounded-full border border-primary bg-background";
 var INDICATOR_DOT = "size-2 fill-background text-background";
 function RadioGroup(_a) {
@@ -231,7 +306,7 @@ function RadioGroup(_a) {
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     import_radio_group.RadioGroup,
     __spreadValues({
       className: cn("grid gap-3", className),
@@ -245,7 +320,7 @@ function RadioGroupItem(_a) {
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     import_radio.Radio.Root,
     __spreadProps(__spreadValues({
       className: cn(
@@ -261,11 +336,11 @@ function RadioGroupItem(_a) {
       ),
       "data-slot": "radio-group-item"
     }, props), {
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         import_radio.Radio.Indicator,
         {
           "data-slot": "radio-group-indicator",
-          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.CircleIcon, { className: INDICATOR_DOT })
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.CircleIcon, { className: INDICATOR_DOT })
         }
       )
     })
@@ -273,12 +348,12 @@ function RadioGroupItem(_a) {
 }
 
 // src/components/ui/financial-primitives.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var NO_DATA = "\u2014";
 function FinancialSubsectionTitle({
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-label-medium uppercase text-foreground", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-label-medium uppercase text-foreground", children });
 }
 function FinancialDetailField({
   label,
@@ -286,13 +361,13 @@ function FinancialDetailField({
   variant = "caption"
 }) {
   if (variant === "footer") {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col justify-between min-w-0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-overline text-muted-foreground", children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-label-medium text-foreground mt-1 break-words", children: value != null ? value : NO_DATA })
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col justify-between min-w-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-overline text-muted-foreground", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-label-medium text-foreground mt-1 break-words", children: value != null ? value : NO_DATA })
     ] });
   }
   const labelClass = variant === "caption" ? "block min-h-[2rem] text-caption text-muted-foreground" : "min-h-[1.75rem] text-overline text-muted-foreground";
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
       className: cn(
@@ -300,8 +375,8 @@ function FinancialDetailField({
         variant === "overline" && "flex flex-col gap-0.5"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: labelClass, children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-label-medium text-foreground break-words", children: value != null ? value : NO_DATA })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: labelClass, children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-label-medium text-foreground break-words", children: value != null ? value : NO_DATA })
       ]
     }
   );
@@ -326,12 +401,12 @@ function FinancialLvrBar({
     warning: "bg-warning",
     destructive: "bg-destructive"
   }[color];
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-body-small text-muted-foreground", children: "LVR" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cn("text-label-medium", textClass), children: label })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-body-small text-muted-foreground", children: "LVR" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: cn("text-label-medium", textClass), children: label })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: cn("h-2.5 w-full overflow-hidden", trackClass), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cn("h-2.5 w-full overflow-hidden", trackClass), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "div",
       {
         className: cn("h-full", fillClass),
@@ -343,7 +418,7 @@ function FinancialLvrBar({
 function FinancialSubtotalFrame({
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mt-auto border-t border-primary/20 bg-primary/10 px-4 py-3", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mt-auto border-t border-primary/20 bg-primary/10 px-4 py-3", children });
 }
 function FinancialSubtotalBlock({
   monthlyAverage,
@@ -351,7 +426,7 @@ function FinancialSubtotalBlock({
   label
 }) {
   const isSingle = monthlyAverage && !totalLast12Months;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
       className: cn(
@@ -359,7 +434,7 @@ function FinancialSubtotalBlock({
         isSingle ? "justify-end" : "justify-between"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
           "div",
           {
             className: cn(
@@ -367,14 +442,14 @@ function FinancialSubtotalBlock({
               isSingle ? "text-right" : "text-left"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "min-h-[1.75rem] text-overline text-muted-foreground", children: label != null ? label : "Monthly Average" }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-label-medium text-foreground", children: monthlyAverage != null ? monthlyAverage : NO_DATA })
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "min-h-[1.75rem] text-overline text-muted-foreground", children: label != null ? label : "Monthly Average" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-label-medium text-foreground", children: monthlyAverage != null ? monthlyAverage : NO_DATA })
             ]
           }
         ),
-        !isSingle && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col gap-0.5 text-right", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "min-h-[1.75rem] text-overline text-muted-foreground", children: "Total Last 12 Months" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-label-medium text-foreground", children: totalLast12Months != null ? totalLast12Months : NO_DATA })
+        !isSingle && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col gap-0.5 text-right", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "min-h-[1.75rem] text-overline text-muted-foreground", children: "Total Last 12 Months" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-label-medium text-foreground", children: totalLast12Months != null ? totalLast12Months : NO_DATA })
         ] })
       ]
     }
@@ -384,8 +459,8 @@ function FinancialSubtotalBlock({
 // src/components/ui/button.tsx
 var import_react = require("react");
 var import_class_variance_authority2 = require("class-variance-authority");
-var import_lucide_react2 = require("lucide-react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_lucide_react3 = require("lucide-react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var buttonVariants = (0, import_class_variance_authority2.cva)(
   "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 font-sans text-button whitespace-nowrap transition-all active:scale-[0.98] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
@@ -394,9 +469,9 @@ var buttonVariants = (0, import_class_variance_authority2.cva)(
         default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
         secondary: "bg-brand-secondary text-brand-secondary-foreground shadow-xs hover:bg-brand-secondary/80 focus-visible:ring-brand-secondary/30",
         destructive: "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
-        outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground focus-visible:ring-border/50 dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground focus-visible:border-border focus-visible:ring-border/50 dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
         "outline-primary": "border border-primary text-foreground bg-transparent shadow-xs hover:bg-primary/5 focus-visible:ring-primary/50",
-        "outline-secondary": "border border-brand-secondary text-brand-secondary bg-transparent shadow-xs hover:bg-brand-secondary/10 focus-visible:ring-brand-secondary/30",
+        "outline-secondary": "border border-brand-secondary text-brand-secondary bg-transparent shadow-xs hover:bg-brand-secondary/10 focus-visible:border-brand-secondary focus-visible:ring-brand-secondary/30",
         ghost: "hover:bg-accent hover:text-accent-foreground hover:shadow-xs focus-visible:ring-border/50 dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline"
       },
@@ -439,7 +514,7 @@ var Button = (0, import_react.forwardRef)(function Button2(_a, ref) {
   ]);
   const Comp = asChild ? Slot : "button";
   const isIconOnly = size === "icon" || size === "icon-xs" || size === "icon-sm" || size === "icon-lg";
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     Comp,
     __spreadProps(__spreadValues({
       className: cn(buttonVariants({ variant, size, className })),
@@ -450,8 +525,8 @@ var Button = (0, import_react.forwardRef)(function Button2(_a, ref) {
       ref,
       type
     }, props), {
-      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.Loader2, { "aria-hidden": "true", className: "animate-spin" }),
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.Loader2, { "aria-hidden": "true", className: "animate-spin" }),
         !isIconOnly && children
       ] }) : children
     })
@@ -459,7 +534,7 @@ var Button = (0, import_react.forwardRef)(function Button2(_a, ref) {
 });
 
 // src/components/ui/financial-cards.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function PropertyCard({
   address,
   type,
@@ -483,7 +558,7 @@ function PropertyCard({
   principlePaidOff
 }) {
   const [expanded, setExpanded] = React2.useState(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
       className: cn(
@@ -491,20 +566,19 @@ function PropertyCard({
         !borderless && "border border-border"
       ),
       children: [
-        isLinkedToBank ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        isLinkedToBank ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           Button,
           {
             type: "button",
             variant: "ghost",
             "aria-expanded": expanded,
             onClick: () => setExpanded((prev) => !prev),
-            className: "h-auto w-full justify-start gap-1.5 px-5 py-3 text-left",
+            className: "h-auto w-full justify-start gap-1.5 px-5 py-3 text-left has-[>svg]:px-5",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-label-medium text-foreground", children: address }),
-              type && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Badge, { variant: "outline", children: type }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "flex-1" }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                import_lucide_react3.ChevronDown,
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "flex-1 min-w-0 truncate text-label-medium text-foreground", children: address }),
+              type && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Badge, { className: "shrink-0", variant: "outline", children: type }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                import_lucide_react4.ChevronDown,
                 {
                   className: cn(
                     "h-5 w-5 shrink-0 text-muted-foreground transition-transform duration-200",
@@ -514,67 +588,67 @@ function PropertyCard({
               )
             ]
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-1.5 px-5 py-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-label-medium text-foreground", children: address }),
-          type && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Badge, { variant: "outline", children: type })
+        ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-1.5 px-5 py-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-label-medium text-foreground", children: address }),
+          type && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Badge, { variant: "outline", children: type })
         ] }),
-        !isLinkedToBank && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "px-5 pb-2 text-xs italic text-muted-foreground", children: "No mortgage account linked to this property" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        !isLinkedToBank && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "px-5 pb-2 text-xs italic text-muted-foreground", children: "No mortgage account linked to this property" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           "div",
           {
             className: cn(
               "grid gap-5 px-5 py-[15px]",
-              isLinkedToBank ? "grid-cols-3" : "grid-cols-1"
+              isLinkedToBank ? "grid-cols-2" : "grid-cols-1"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialDetailField, { label: "Estimated Value", value: estimated }),
-              isLinkedToBank && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialDetailField, { label: "Loan Amount", value: loanAmount }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialDetailField, { label: "Equity", value: equity })
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FinancialDetailField, { label: "Estimated Value", value: estimated }),
+              isLinkedToBank && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FinancialDetailField, { label: "Loan Amount", value: loanAmount }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FinancialDetailField, { label: "Equity", value: equity }) })
               ] })
             ]
           }
         ),
-        isLinkedToBank && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "px-5 pb-[15px]", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        isLinkedToBank && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "px-5 pb-[15px]", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           FinancialLvrBar,
           {
             percent: lvrPercent,
             label: lvr != null ? lvr : `${lvrPercent}%`
           }
         ) }),
-        isLinkedToBank && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        isLinkedToBank && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "div",
           {
             className: cn(
               "grid transition-[grid-template-rows] duration-200 ease-in-out",
               expanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "overflow-hidden", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-5 border-t border-border px-5 py-[15px]", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialSubsectionTitle, { children: "Loan" }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-4 gap-x-4 gap-y-4", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "overflow-hidden", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col gap-5 border-t border-border px-5 py-[15px]", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FinancialSubsectionTitle, { children: "Loan" }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "grid grid-cols-4 gap-x-4 gap-y-4", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                     FinancialDetailField,
                     {
                       label: "Name of Lender",
                       value: lenderName
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                     FinancialDetailField,
                     {
                       label: "Current Loan Amount",
                       value: loanAmount
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                     FinancialDetailField,
                     {
                       label: "Interest Rate",
                       value: interestRate
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                     FinancialDetailField,
                     {
                       label: "Years Remaining",
@@ -582,29 +656,29 @@ function PropertyCard({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-4 gap-x-4 gap-y-4", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "grid grid-cols-4 gap-x-4 gap-y-4", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                     FinancialDetailField,
                     {
                       label: "Min Repayments",
                       value: minRepayments
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                     FinancialDetailField,
                     {
                       label: "Average Repayments",
                       value: averageRepayments
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                     FinancialDetailField,
                     {
                       label: "Redraw Amount",
                       value: redrawAmount
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                     FinancialDetailField,
                     {
                       label: "Offset Account",
@@ -613,8 +687,8 @@ function PropertyCard({
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialSubtotalFrame, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-4 gap-x-4 gap-y-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FinancialSubtotalFrame, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "grid grid-cols-4 gap-x-4 gap-y-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                   FinancialDetailField,
                   {
                     variant: "footer",
@@ -622,7 +696,7 @@ function PropertyCard({
                     value: totalMinRepayments
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                   FinancialDetailField,
                   {
                     variant: "footer",
@@ -630,7 +704,7 @@ function PropertyCard({
                     value: totalExtraRepayments
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                   FinancialDetailField,
                   {
                     variant: "footer",
@@ -638,7 +712,7 @@ function PropertyCard({
                     value: interestCharged
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                   FinancialDetailField,
                   {
                     variant: "footer",
@@ -668,17 +742,17 @@ function DebtCard({
   totalInterestPaid,
   yearsRemaining
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "border border-border overflow-hidden flex flex-col h-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-3 gap-5 px-5 py-[15px] border-b border-border min-h-[7rem] items-start", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialDetailField, { label: "Name of Lender", value: lenderName }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "border border-border overflow-hidden flex flex-col h-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "grid grid-cols-3 gap-5 px-5 py-[15px] border-b border-border min-h-[7rem] items-start", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FinancialDetailField, { label: "Name of Lender", value: lenderName }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         FinancialDetailField,
         {
           label: "Current Loan Amount",
           value: currentLoanAmount
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         FinancialDetailField,
         {
           label: "Current Interest Rate",
@@ -686,24 +760,24 @@ function DebtCard({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "px-5 py-[15px] flex flex-col gap-5 flex-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialSubsectionTitle, { children: "Loan Stats" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-3 gap-5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "px-5 py-[15px] flex flex-col gap-5 flex-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FinancialSubsectionTitle, { children: "Loan Stats" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "grid grid-cols-3 gap-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           FinancialDetailField,
           {
             label: "Original Loan Amount",
             value: originalLoanAmount
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           FinancialDetailField,
           {
             label: "Original Loan Term",
             value: originalLoanTerm
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           FinancialDetailField,
           {
             label: "Monthly Repayments",
@@ -711,10 +785,10 @@ function DebtCard({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-3 gap-5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialDetailField, { label: "Redraw Amount", value: redrawAmount }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialDetailField, { label: "Offset Account", value: offsetAmount }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "grid grid-cols-3 gap-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FinancialDetailField, { label: "Redraw Amount", value: redrawAmount }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FinancialDetailField, { label: "Offset Account", value: offsetAmount }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           FinancialDetailField,
           {
             label: "Extra Loan Repayments",
@@ -723,8 +797,8 @@ function DebtCard({
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialSubtotalFrame, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-3 gap-x-4 gap-y-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FinancialSubtotalFrame, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "grid grid-cols-3 gap-x-4 gap-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         FinancialDetailField,
         {
           variant: "footer",
@@ -732,7 +806,7 @@ function DebtCard({
           value: totalRepaymentsMade
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         FinancialDetailField,
         {
           variant: "footer",
@@ -740,7 +814,7 @@ function DebtCard({
           value: totalInterestPaid
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         FinancialDetailField,
         {
           variant: "footer",
@@ -769,52 +843,52 @@ function OtherLiabilityCard({
   totalInterestPaid
 }) {
   const isCreditCard = type === "credit_card";
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "border border-border overflow-hidden flex flex-col h-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-3 gap-5 px-4 pt-5 pb-4 min-h-[7rem] items-start", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialDetailField, { label: "Lender", value: lenderName }),
-      isCreditCard ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "border border-border overflow-hidden flex flex-col h-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "grid grid-cols-3 gap-5 px-4 pt-5 pb-4 min-h-[7rem] items-start", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FinancialDetailField, { label: "Lender", value: lenderName }),
+      isCreditCard ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         FinancialDetailField,
         {
           label: "Current Balance",
           value: currentBalance
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         FinancialDetailField,
         {
           label: "Current Loan Amount",
           value: currentLoanAmount
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialDetailField, { label: "Interest Rate", value: interestRate })
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FinancialDetailField, { label: "Interest Rate", value: interestRate })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "px-4 pt-4 pb-5 flex flex-col gap-5 border-t border-border flex-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialSubsectionTitle, { children: isCreditCard ? "Card Stats" : "Loan Stats" }),
-      isCreditCard ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-3 gap-5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialDetailField, { label: "Credit Limit", value: creditLimit }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "px-4 pt-4 pb-5 flex flex-col gap-5 border-t border-border flex-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FinancialSubsectionTitle, { children: isCreditCard ? "Card Stats" : "Loan Stats" }),
+      isCreditCard ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "grid grid-cols-3 gap-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FinancialDetailField, { label: "Credit Limit", value: creditLimit }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           FinancialDetailField,
           {
             label: "Min Monthly Payment",
             value: minMonthlyPayment
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialDetailField, { label: "Annual Fee", value: annualFee })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-3 gap-5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FinancialDetailField, { label: "Annual Fee", value: annualFee })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "grid grid-cols-3 gap-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           FinancialDetailField,
           {
             label: "Original Loan Amount",
             value: originalLoanAmount
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           FinancialDetailField,
           {
             label: "Original Loan Term",
             value: originalLoanTerm
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           FinancialDetailField,
           {
             label: "Monthly Repayments",
@@ -823,8 +897,8 @@ function OtherLiabilityCard({
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialSubtotalFrame, { children: isCreditCard ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-2 gap-x-4 gap-y-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FinancialSubtotalFrame, { children: isCreditCard ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "grid grid-cols-2 gap-x-4 gap-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         FinancialDetailField,
         {
           variant: "footer",
@@ -832,7 +906,7 @@ function OtherLiabilityCard({
           value: totalInterestPaid
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         FinancialDetailField,
         {
           variant: "footer",
@@ -840,8 +914,8 @@ function OtherLiabilityCard({
           value: availableCredit
         }
       )
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-3 gap-x-4 gap-y-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "grid grid-cols-3 gap-x-4 gap-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         FinancialDetailField,
         {
           variant: "footer",
@@ -849,7 +923,7 @@ function OtherLiabilityCard({
           value: totalRepaymentsMade
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         FinancialDetailField,
         {
           variant: "footer",
@@ -857,7 +931,7 @@ function OtherLiabilityCard({
           value: totalInterestPaid
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         FinancialDetailField,
         {
           variant: "footer",
@@ -883,10 +957,10 @@ function AlertCard({
   onActionChange
 }) {
   const { dot, border } = SEVERITY_CLASSES[severityCode];
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("flex flex-col gap-1.5 border p-2.5 px-3", border), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: cn("h-[9px] w-[9px] shrink-0 rounded-full", dot) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: cn("flex flex-col gap-1.5 border p-2.5 px-3", border), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: cn("h-[9px] w-[9px] shrink-0 rounded-full", dot) }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         "span",
         {
           className: cn(
@@ -897,19 +971,19 @@ function AlertCard({
         }
       )
     ] }),
-    ignored ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "ml-[15px] text-xs italic text-muted-foreground/60", children: [
+    ignored ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "ml-[15px] text-xs italic text-muted-foreground/60", children: [
       "Ignored until ",
       ignoredUntil
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       RadioGroup,
       {
         value: selectedAction != null ? selectedAction : "",
         onValueChange: (val) => onActionChange == null ? void 0 : onActionChange(val),
         className: "ml-[15px] flex flex-col gap-1",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RadioGroupItem, { value: "DISMISS", id: `dismiss-${id}` }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RadioGroupItem, { value: "DISMISS", id: `dismiss-${id}` }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "label",
               {
                 htmlFor: `dismiss-${id}`,
@@ -918,9 +992,9 @@ function AlertCard({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RadioGroupItem, { value: "SNOOZE", id: `snooze-${id}` }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RadioGroupItem, { value: "SNOOZE", id: `snooze-${id}` }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "label",
               {
                 htmlFor: `snooze-${id}`,
@@ -934,6 +1008,16 @@ function AlertCard({
     )
   ] });
 }
+function ageFromDob(dobStr) {
+  if (!dobStr) return null;
+  const dob = new Date(dobStr);
+  if (isNaN(dob.getTime())) return null;
+  const today = /* @__PURE__ */ new Date();
+  let age = today.getFullYear() - dob.getFullYear();
+  const m = today.getMonth() - dob.getMonth();
+  if (m < 0 || m === 0 && today.getDate() < dob.getDate()) age--;
+  return age >= 0 ? age : null;
+}
 function AboutCard({
   title,
   firstName,
@@ -944,6 +1028,7 @@ function AboutCard({
   gender,
   maritalStatus,
   numDependants,
+  dependants,
   citizenStatus,
   residentialAddress,
   residentialStatus,
@@ -952,210 +1037,265 @@ function AboutCard({
   driversLicence,
   passport,
   propertyInTrust,
-  companyOwnership
+  companyOwnership,
+  borderless = false
 }) {
   const fullName = [title, firstName, lastName].filter(Boolean).join(" ") || "\u2014";
   const timeAtAddress = timeAtAddressYears || timeAtAddressMonths ? [
     timeAtAddressYears && `${timeAtAddressYears}yr`,
     timeAtAddressMonths && `${timeAtAddressMonths}mo`
   ].filter(Boolean).join(" ") : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "border border-border overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-2 gap-x-8 gap-y-4 px-5 py-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialDetailField, { label: "Full Name", value: fullName }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialDetailField, { label: "Date of Birth", value: dob || "\u2014" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialDetailField, { label: "Gender", value: gender || "\u2014" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialDetailField, { label: "Phone", value: phone || "\u2014" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialDetailField, { label: "Email", value: email || "\u2014" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      FinancialDetailField,
-      {
-        label: "Marital Status",
-        value: maritalStatus || "\u2014"
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      FinancialDetailField,
-      {
-        label: "No. of Dependants",
-        value: numDependants != null ? numDependants : "\u2014"
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      FinancialDetailField,
-      {
-        label: "Citizenship",
-        value: citizenStatus || "\u2014"
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      FinancialDetailField,
-      {
-        label: "Residential Address",
-        value: residentialAddress || "\u2014"
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      FinancialDetailField,
-      {
-        label: "Residential Status",
-        value: residentialStatus || "\u2014"
-      }
-    ),
-    timeAtAddress && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialDetailField, { label: "Time at Address", value: timeAtAddress }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      FinancialDetailField,
-      {
-        label: "Driver's Licence",
-        value: driversLicence || "\u2014"
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialDetailField, { label: "Passport", value: passport || "\u2014" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      FinancialDetailField,
-      {
-        label: "Property in Trust",
-        value: propertyInTrust || "\u2014"
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      FinancialDetailField,
-      {
-        label: "Company Ownership",
-        value: companyOwnership || "\u2014"
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      className: cn(
+        "overflow-hidden divide-y divide-border",
+        !borderless && "border border-border"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "grid grid-cols-4 gap-x-6 gap-y-4 px-5 py-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FinancialDetailField, { label: "Full Name", value: fullName }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FinancialDetailField, { label: "Date of Birth", value: dob || "\u2014" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FinancialDetailField, { label: "Gender", value: gender || "\u2014" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            FinancialDetailField,
+            {
+              label: "Citizenship",
+              value: citizenStatus || "\u2014"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            FinancialDetailField,
+            {
+              label: "Driver's Licence",
+              value: driversLicence || "\u2014"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FinancialDetailField, { label: "Passport", value: passport || "\u2014" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "grid grid-cols-4 gap-x-6 gap-y-4 px-5 py-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FinancialDetailField, { label: "Phone", value: phone || "\u2014" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FinancialDetailField, { label: "Email", value: email || "\u2014" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "grid grid-cols-4 gap-x-6 gap-y-4 px-5 py-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            FinancialDetailField,
+            {
+              label: "Marital Status",
+              value: maritalStatus || "\u2014"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            FinancialDetailField,
+            {
+              label: "No. of Dependants",
+              value: numDependants != null ? numDependants : "\u2014"
+            }
+          ),
+          dependants && dependants.map((dep, i) => {
+            const age = ageFromDob(dep.dob);
+            const dobFormatted = formatDateShort(dep.dob) || "\u2014";
+            const value = age !== null ? `${dobFormatted} \xB7 age ${age}` : dobFormatted;
+            return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              FinancialDetailField,
+              {
+                label: `Dependant ${i + 1}`,
+                value
+              },
+              i
+            );
+          })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "grid grid-cols-4 gap-x-6 gap-y-4 px-5 py-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            FinancialDetailField,
+            {
+              label: "Residential Address",
+              value: residentialAddress || "\u2014"
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            FinancialDetailField,
+            {
+              label: "Residential Status",
+              value: residentialStatus || "\u2014"
+            }
+          ),
+          timeAtAddress && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FinancialDetailField, { label: "Time at Address", value: timeAtAddress })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "grid grid-cols-4 gap-x-6 gap-y-4 px-5 py-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            FinancialDetailField,
+            {
+              label: "Property in Trust",
+              value: propertyInTrust || "\u2014"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            FinancialDetailField,
+            {
+              label: "Company Ownership",
+              value: companyOwnership || "\u2014"
+            }
+          )
+        ] })
+      ]
+    }
+  );
 }
-function IncomeCard({ items, totalMonthly }) {
+function IncomeCard({
+  items,
+  totalMonthly,
+  borderless = false
+}) {
   if (items.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "border border-border px-5 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-sm text-muted-foreground", children: "No income recorded." }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: cn("px-5 py-4", !borderless && "border border-border"), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-sm text-muted-foreground", children: "No income recorded." }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "border border-border overflow-hidden flex flex-col", children: [
-    items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-      "div",
-      {
-        className: cn(
-          "flex flex-col gap-3 px-5 py-[15px]",
-          i < items.length - 1 && "border-b border-border"
-        ),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-3 gap-x-6", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialDetailField, { label: "Type", value: item.incomeType || "\u2014" }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      className: cn(
+        "overflow-hidden flex flex-col",
+        !borderless && "border border-border"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Accordion, { openMultiple: true, children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(AccordionItem, { value: String(i), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AccordionTrigger, { className: "px-5", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-1 items-center justify-between pr-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-label-medium text-foreground", children: item.incomeType }),
+              item.jobTitle && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "text-body-small text-muted-foreground", children: [
+                "\xB7 ",
+                item.jobTitle
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-label-medium text-foreground", children: item.amountLabel })
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AccordionContent, { className: "px-5", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "grid grid-cols-3 gap-x-6 gap-y-4 pb-2 pt-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               FinancialDetailField,
               {
                 label: "Job Title",
                 value: item.jobTitle || "\u2014"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialDetailField, { label: "Amount", value: item.amountLabel })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-3 gap-x-6", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               FinancialDetailField,
               {
                 label: "Company",
                 value: item.companyName || "\u2014"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               FinancialDetailField,
               {
                 label: "Start Date",
                 value: formatDateShort(item.startDate)
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               FinancialDetailField,
               {
                 label: "Status",
                 value: item.stillInPosition === void 0 ? "\u2014" : item.stillInPosition ? "Still in position" : item.endDate ? `Ended ${formatDateShort(item.endDate)}` : "No longer in position"
               }
+            ),
+            item.companyAddress && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              FinancialDetailField,
+              {
+                label: "Company Address",
+                value: item.companyAddress
+              }
             )
-          ] }),
-          item.companyAddress && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            FinancialDetailField,
-            {
-              label: "Company Address",
-              value: item.companyAddress
-            }
-          )
-        ]
-      },
-      i
-    )),
-    totalMonthly && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialSubtotalFrame, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      FinancialSubtotalBlock,
-      {
-        monthlyAverage: totalMonthly,
-        label: "Total Monthly Income"
-      }
-    ) })
-  ] });
+          ] }) })
+        ] }, i)) }),
+        totalMonthly && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FinancialSubtotalFrame, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          FinancialSubtotalBlock,
+          {
+            monthlyAverage: totalMonthly,
+            label: "Total Monthly Income"
+          }
+        ) })
+      ]
+    }
+  );
 }
 var EXPENSE_ICON_MAP = {
-  groceries: import_lucide_react3.ShoppingCart,
-  "dining out": import_lucide_react3.UtensilsCrossed,
-  dining: import_lucide_react3.UtensilsCrossed,
-  restaurants: import_lucide_react3.UtensilsCrossed,
-  transport: import_lucide_react3.Car,
-  transportation: import_lucide_react3.Car,
-  vehicle: import_lucide_react3.Car,
-  utilities: import_lucide_react3.Zap,
-  electricity: import_lucide_react3.Zap,
-  insurance: import_lucide_react3.Shield,
-  "council rates": import_lucide_react3.Landmark,
-  council: import_lucide_react3.Landmark,
-  rates: import_lucide_react3.Landmark,
-  medical: import_lucide_react3.HeartPulse,
-  health: import_lucide_react3.HeartPulse,
-  subscriptions: import_lucide_react3.RefreshCw,
-  subscription: import_lucide_react3.RefreshCw,
-  "credit card": import_lucide_react3.CreditCard,
-  education: import_lucide_react3.GraduationCap,
-  childcare: import_lucide_react3.Baby,
-  entertainment: import_lucide_react3.Tv,
-  gym: import_lucide_react3.Dumbbell,
-  fitness: import_lucide_react3.Dumbbell,
-  clothing: import_lucide_react3.Shirt,
-  rent: import_lucide_react3.Building2
+  groceries: import_lucide_react4.ShoppingCart,
+  "dining out": import_lucide_react4.UtensilsCrossed,
+  dining: import_lucide_react4.UtensilsCrossed,
+  restaurants: import_lucide_react4.UtensilsCrossed,
+  transport: import_lucide_react4.Car,
+  transportation: import_lucide_react4.Car,
+  vehicle: import_lucide_react4.Car,
+  utilities: import_lucide_react4.Zap,
+  electricity: import_lucide_react4.Zap,
+  insurance: import_lucide_react4.Shield,
+  "council rates": import_lucide_react4.Landmark,
+  council: import_lucide_react4.Landmark,
+  rates: import_lucide_react4.Landmark,
+  medical: import_lucide_react4.HeartPulse,
+  health: import_lucide_react4.HeartPulse,
+  subscriptions: import_lucide_react4.RefreshCw,
+  subscription: import_lucide_react4.RefreshCw,
+  "credit card": import_lucide_react4.CreditCard,
+  education: import_lucide_react4.GraduationCap,
+  childcare: import_lucide_react4.Baby,
+  entertainment: import_lucide_react4.Tv,
+  gym: import_lucide_react4.Dumbbell,
+  fitness: import_lucide_react4.Dumbbell,
+  clothing: import_lucide_react4.Shirt,
+  rent: import_lucide_react4.Building2
 };
 function getExpenseIcon(expenseType) {
   var _a;
-  return (_a = EXPENSE_ICON_MAP[expenseType.toLowerCase()]) != null ? _a : import_lucide_react3.Receipt;
+  return (_a = EXPENSE_ICON_MAP[expenseType.toLowerCase()]) != null ? _a : import_lucide_react4.Receipt;
 }
-function ExpensesCard({ items, totalMonthly }) {
+function ExpensesCard({
+  items,
+  totalMonthly,
+  borderless = false
+}) {
   if (items.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "border border-border px-5 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-sm text-muted-foreground", children: "No expenses recorded." }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: cn("px-5 py-4", !borderless && "border border-border"), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-sm text-muted-foreground", children: "No expenses recorded." }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "border border-border overflow-hidden flex flex-col", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex flex-col", children: items.map((item, i) => {
-      const Icon = getExpenseIcon(item.expenseType);
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-        "div",
-        {
-          className: cn(
-            "flex items-center justify-between gap-4 px-5 py-2.5",
-            i < items.length - 1 && "border-b border-border"
-          ),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2.5", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { className: "size-3.5 shrink-0 text-muted-foreground" }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-body-small text-foreground", children: item.expenseType })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-label-medium whitespace-nowrap text-destructive", children: item.amountLabel })
-          ]
-        },
-        item.expenseType
-      );
-    }) }),
-    totalMonthly && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialSubtotalFrame, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      FinancialSubtotalBlock,
-      {
-        monthlyAverage: totalMonthly,
-        label: "Total Monthly Expenses"
-      }
-    ) })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      className: cn(
+        "overflow-hidden flex flex-col",
+        !borderless && "border border-border"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex flex-col", children: items.map((item, i) => {
+          const Icon = getExpenseIcon(item.expenseType);
+          return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            "div",
+            {
+              className: cn(
+                "flex items-center justify-between gap-4 px-5 py-2.5",
+                i < items.length - 1 && "border-b border-border"
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-2.5", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { className: "size-3.5 shrink-0 text-muted-foreground" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-body-small text-foreground", children: item.expenseType })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-label-medium whitespace-nowrap text-destructive", children: item.amountLabel })
+              ]
+            },
+            item.expenseType
+          );
+        }) }),
+        totalMonthly && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FinancialSubtotalFrame, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          FinancialSubtotalBlock,
+          {
+            monthlyAverage: totalMonthly,
+            label: "Total Monthly Expenses"
+          }
+        ) })
+      ]
+    }
+  );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {