@metaboliccode-dev/widget 0.2.63 → 0.2.64

package/dist/index.js

@@ -534,9 +534,9 @@ function St(A) {
 }
 const Qt = {
   default: "border-[color:var(--mb-color-badge-border)] bg-[color:var(--mb-color-badge-bg)] text-[color:var(--mb-color-badge-text)] [border-width:var(--mb-badge-border-width)] px-[length:var(--mb-badge-padding-x)] py-[length:var(--mb-badge-padding-y)]",
-  value: "!h-[2rem] !w-[9rem] whitespace-nowrap !border-transparent !bg-[#ebebeb] !text-[#171717] [border-width:var(--mb-badge-border-width)] px-[length:var(--mb-badge-value-padding-x)] py-[length:var(--mb-badge-value-padding-y)]",
+  value: "!h-[2rem] !w-full max-w-[9rem] whitespace-nowrap !border-transparent !bg-[#ebebeb] !text-[#171717] [border-width:var(--mb-badge-border-width)] px-[length:var(--mb-badge-value-padding-x)] py-[length:var(--mb-badge-value-padding-y)] sm:!w-[9rem]",
   valueCompact: "!h-[2rem] !w-[4.25rem] whitespace-nowrap !border-transparent !bg-[#ebebeb] !text-[#171717] [border-width:var(--mb-badge-border-width)] px-2 py-[length:var(--mb-badge-value-padding-y)]",
-  rowMetricValue: "!h-[2rem] !w-[7.5rem] whitespace-nowrap !border-transparent !bg-[#ebebeb] !text-[#171717] [border-width:var(--mb-badge-border-width)] px-2 py-[length:var(--mb-badge-value-padding-y)] xl:!w-[9rem] xl:px-[length:var(--mb-badge-value-padding-x)]"
+  rowMetricValue: "!h-[2rem] !w-full max-w-[7.5rem] whitespace-nowrap !border-transparent !bg-[#ebebeb] !text-[#171717] [border-width:var(--mb-badge-border-width)] px-2 py-[length:var(--mb-badge-value-padding-y)] sm:!w-[7.5rem] xl:!w-[9rem] xl:max-w-[9rem] xl:px-[length:var(--mb-badge-value-padding-x)]"
 };
 function pA({
   children: A,
@@ -561,7 +561,7 @@ function M({
     "div",
     {
       ...t,
-      className: `rounded-[var(--mb-radius-card)] border border-[color:var(--mb-color-card-border)] bg-[color:var(--mb-color-card-bg)] p-[var(--mb-card-padding)] [border-width:var(--mb-card-border-width)] ${E}`.trim(),
+      className: `rounded-[var(--mb-radius-card)] border border-[color:var(--mb-color-card-border)] bg-[color:var(--mb-color-card-bg)] p-4 [border-width:var(--mb-card-border-width)] sm:p-[var(--mb-card-padding)] ${E}`.trim(),
       style: {
         boxShadow: "var(--mb-card-shadow, 0 0.25rem 0.375rem 0 rgba(0, 0, 0, 0.09))",
         ...r
@@ -868,7 +868,7 @@ function Gt({
     "div",
     {
       ref: r,
-      className: "relative min-w-0 w-full overflow-x-clip [&_.ag-charts-wrapper]:!overflow-x-clip [&_.ag-charts-wrapper]:!bg-transparent [&_.ag-charts-canvas-center]:!bg-transparent",
+      className: "relative min-w-0 w-full overflow-x-clip [&_.ag-charts-wrapper]:!max-w-full [&_.ag-charts-wrapper]:!min-h-0 [&_.ag-charts-wrapper]:!min-w-0 [&_.ag-charts-wrapper]:!overflow-x-clip [&_.ag-charts-wrapper]:!bg-transparent [&_.ag-charts-canvas-center]:!bg-transparent",
       style: { minHeight: T7(N7) },
       children: /* @__PURE__ */ I(
         f3,
@@ -1073,7 +1073,7 @@ function WE({
     "div",
     {
       ref: z,
-      className: `relative mx-auto min-w-0 w-full ${Ft} [&_.ag-charts-wrapper]:!bg-transparent [&_.ag-charts-canvas-center]:!bg-transparent`,
+      className: `relative mx-auto min-w-0 w-full ${Ft} [&_.ag-charts-wrapper]:!max-w-full [&_.ag-charts-wrapper]:!min-h-0 [&_.ag-charts-wrapper]:!min-w-0 [&_.ag-charts-wrapper]:!bg-transparent [&_.ag-charts-canvas-center]:!bg-transparent`,
       children: [
         /* @__PURE__ */ I(
           f3,
@@ -1477,7 +1477,7 @@ function YA({
         /* @__PURE__ */ a(
           "div",
           {
-            className: "relative w-full overflow-visible [&_.ag-charts-wrapper]:!overflow-visible [&_.ag-charts-wrapper]:!bg-transparent [&_.ag-charts-canvas-center]:!bg-transparent",
+            className: "relative w-full overflow-visible [&_.ag-charts-wrapper]:!max-w-full [&_.ag-charts-wrapper]:!min-h-0 [&_.ag-charts-wrapper]:!min-w-0 [&_.ag-charts-wrapper]:!overflow-visible [&_.ag-charts-wrapper]:!bg-transparent [&_.ag-charts-canvas-center]:!bg-transparent",
             style: { minHeight: QA(L7) },
             children: [
               /* @__PURE__ */ I(
@@ -1562,7 +1562,7 @@ function Cz({
   triadNumbers: A = uz
 }) {
   const E = qA();
-  return /* @__PURE__ */ I("div", { className: "flex shrink-0 items-center gap-2", children: A.map((r) => {
+  return /* @__PURE__ */ I("div", { className: "flex max-w-full shrink-0 flex-wrap items-center justify-end gap-2", children: A.map((r) => {
     const t = zE(r);
     return t ? /* @__PURE__ */ I(
       "img",
@@ -1663,7 +1663,7 @@ function pz({
     "div",
     {
       ref: z,
-      className: "mx-auto w-full max-w-[18.25rem] shrink-0 overflow-hidden leading-none [&_.ag-charts-wrapper]:!bg-transparent [&_.ag-charts-canvas-center]:!bg-transparent",
+      className: "mx-auto w-full max-w-[18.25rem] shrink-0 overflow-hidden leading-none [&_.ag-charts-wrapper]:!max-w-full [&_.ag-charts-wrapper]:!min-h-0 [&_.ag-charts-wrapper]:!min-w-0 [&_.ag-charts-wrapper]:!bg-transparent [&_.ag-charts-canvas-center]:!bg-transparent",
       style: { width: `min(100%, ${d7(l3)})`, height: d7(E7) },
       role: "img",
       "aria-label": `Radar chart for ${A.join(", ")}`,
@@ -1856,7 +1856,7 @@ function fz(A, E, r, t) {
   const V = i - v, d = V > 0 ? V : 1, R = Math.min(1, (A - i) / d);
   return xA(2 * n + R * n);
 }
-const zA = "rounded-full p-0.5 text-[color:var(--mb-color-text-muted)] transition hover:text-[color:var(--mb-color-text)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--mb-color-focus-ring)]", Kz = "whitespace-nowrap !border-[color:var(--mb-color-card-inline-button-border)] !bg-[color:var(--mb-color-card-inline-button-bg)] !px-3 !py-2 !text-base !font-[510] !text-[color:var(--mb-color-card-inline-button-text)] [&_svg]:!text-[color:var(--mb-color-card-inline-button-text)] !shadow-none hover:!bg-[color:var(--mb-color-card-inline-button-hover)]", B3 = "whitespace-nowrap !border-[color:var(--mb-color-card-border)] !bg-transparent !px-3 !py-2 !text-base !font-[510] !text-[color:var(--mb-color-text)] [&_svg]:!text-[color:var(--mb-color-text)] !shadow-none transition-[background-color,border-color] duration-150 ease-out hover:!border-[color:var(--mb-color-button-border)] hover:!bg-[color:var(--mb-color-card-inline-button-hover)] disabled:hover:!border-[color:var(--mb-color-card-border)] disabled:hover:!bg-transparent";
+const zA = "rounded-full p-0.5 text-[color:var(--mb-color-text-muted)] transition hover:text-[color:var(--mb-color-text)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--mb-color-focus-ring)]", Kz = "whitespace-nowrap !border-[color:var(--mb-color-card-inline-button-border)] !bg-[color:var(--mb-color-card-inline-button-bg)] !px-3 !py-2 !text-base !font-[510] !text-[color:var(--mb-color-card-inline-button-text)] [&_svg]:!text-[color:var(--mb-color-card-inline-button-text)] !shadow-none hover:!bg-[color:var(--mb-color-card-inline-button-hover)]", B3 = "max-w-full whitespace-normal break-words !border-[color:var(--mb-color-card-border)] !bg-transparent !px-3 !py-2 !text-base !font-[510] !text-[color:var(--mb-color-text)] [&_svg]:!text-[color:var(--mb-color-text)] !shadow-none transition-[background-color,border-color] duration-150 ease-out hover:!border-[color:var(--mb-color-button-border)] hover:!bg-[color:var(--mb-color-card-inline-button-hover)] disabled:hover:!border-[color:var(--mb-color-card-border)] disabled:hover:!bg-transparent sm:whitespace-nowrap";
 function G3({
   value: A,
   variant: E = "default",
@@ -1922,14 +1922,11 @@ function A7({
   return /* @__PURE__ */ a(
     "div",
     {
-      className: "grid min-w-0 grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-3 px-3 sm:px-4",
-      style: {
-        backgroundColor: v,
-        height: "var(--mb-category-panel-header-height)"
-      },
+      className: "grid min-h-[var(--mb-category-panel-header-height)] min-w-0 grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-3 px-3 py-2 sm:px-4",
+      style: { backgroundColor: v },
       children: [
         /* @__PURE__ */ a("div", { className: "flex min-w-0 items-center gap-3", children: [
-          /* @__PURE__ */ I("h3", { className: "m-0 min-w-0 break-words text-sm font-bold leading-none tracking-normal text-[color:var(--mb-color-text)] uppercase", children: A }),
+          /* @__PURE__ */ I("h3", { className: "m-0 min-w-0 break-words text-sm font-bold uppercase leading-tight tracking-normal text-[color:var(--mb-color-text)] sm:leading-none", children: A }),
           E && r === "inline" ? /* @__PURE__ */ I("span", { className: "inline-flex shrink-0 items-center", children: E }) : null
         ] }),
         E && r === "end" ? /* @__PURE__ */ I("span", { className: "inline-flex shrink-0 items-center", children: E }) : null,
@@ -1997,7 +1994,7 @@ function ZI({
   rangeBar: r,
   variant: t = "default"
 }) {
-  const z = t === "questionnaire", e = z ? "grid w-full min-w-0 grid-cols-[minmax(7rem,1.66fr)_minmax(0,1fr)_minmax(0,1fr)] items-start gap-x-2 gap-y-0 text-sm text-[color:var(--mb-color-text)] sm:gap-x-3" : "grid w-full min-w-0 grid-cols-[minmax(0,1.35fr)_minmax(0,1fr)_minmax(0,1fr)] items-start gap-x-2 gap-y-0 text-sm text-[color:var(--mb-color-text)] sm:gap-x-4", v = z ? "w-full min-w-0 space-y-0 px-3 pt-4 pb-3 sm:px-4" : "w-full min-w-0 space-y-0 px-3 pt-7 pb-3 sm:px-4", i = z ? "min-w-0 py-2.5 pr-1 pl-1 text-sm font-normal leading-5 whitespace-nowrap sm:pl-2" : "min-w-0 py-2.5 pr-1 pl-1 break-words sm:pl-2", n = z ? "min-w-0 px-0.5 pb-3 text-center text-[0.625rem] font-bold leading-4 whitespace-nowrap uppercase text-[color:var(--mb-color-text)]" : "min-w-0 px-0.5 pb-3 text-center text-[0.625rem] leading-tight whitespace-nowrap text-[color:var(--mb-color-text-muted)]", V = (d) => z ? [
+  const z = t === "questionnaire", e = z ? "grid w-full min-w-0 grid-cols-[minmax(0,1fr)_minmax(2.5rem,auto)_minmax(2.5rem,auto)] items-start gap-x-1 gap-y-0 text-sm text-[color:var(--mb-color-text)] @min-[24rem]:grid-cols-[minmax(7rem,1.66fr)_minmax(0,1fr)_minmax(0,1fr)] @min-[24rem]:gap-x-3" : "grid w-full min-w-0 grid-cols-[minmax(0,1.35fr)_minmax(0,1fr)_minmax(0,1fr)] items-start gap-x-2 gap-y-0 text-sm text-[color:var(--mb-color-text)] sm:gap-x-4", v = z ? "w-full min-w-0 space-y-0 px-2 pb-3 pt-4 @min-[24rem]:px-4" : "w-full min-w-0 space-y-0 px-3 pt-7 pb-3 sm:px-4", i = z ? "min-w-0 break-words py-2.5 pl-1 pr-1 text-sm font-normal leading-5 @min-[24rem]:whitespace-nowrap @min-[24rem]:pl-2" : "min-w-0 py-2.5 pr-1 pl-1 break-words sm:pl-2", n = z ? "min-w-0 break-words px-0.5 pb-3 text-center text-[0.5625rem] font-bold uppercase leading-tight text-[color:var(--mb-color-text)] @min-[24rem]:whitespace-nowrap @min-[24rem]:text-[0.625rem] @min-[24rem]:leading-4" : "min-w-0 px-0.5 pb-3 text-center text-[0.625rem] leading-tight whitespace-nowrap text-[color:var(--mb-color-text-muted)]", V = (d) => z ? [
     { key: "previous", value: d.previous, tone: "neutral" },
     { key: "current", value: d.current, tone: "emphasis" }
   ] : [
@@ -2412,11 +2409,11 @@ function u3({
   onInfoClick: n
 }) {
   const V = v ?? `${E} information`, d = i ?? V, R = z ? "text-[color:var(--mb-color-text)]" : e ? Gz[e] : "text-[color:var(--mb-color-text)]", q = z ? `var(--mb-color-risk-${z})` : "var(--mb-color-card-border)", Z = z ? `var(--mb-color-risk-${z}-tint)` : "var(--mb-color-card-bg)", l = r.endsWith(":") ? r : `${r}:`;
-  return /* @__PURE__ */ a("div", { className: "mb-6 flex min-w-0 flex-wrap items-center justify-between gap-4", children: [
-    /* @__PURE__ */ a("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+  return /* @__PURE__ */ a("div", { className: "mb-6 flex min-w-0 flex-col items-stretch gap-3 @min-[30rem]:flex-row @min-[30rem]:items-center @min-[30rem]:justify-between @min-[30rem]:gap-4", children: [
+    /* @__PURE__ */ a("div", { className: "flex w-full min-w-0 items-center gap-2 @min-[30rem]:w-auto @min-[30rem]:flex-1", children: [
       /* @__PURE__ */ I(fA, { triadNumber: A, className: "size-10" }),
       /* @__PURE__ */ a("div", { className: "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1", children: [
-        /* @__PURE__ */ I("h2", { className: "m-0 min-w-0 text-xl font-bold leading-tight text-[color:var(--mb-color-text)]", children: E }),
+        /* @__PURE__ */ I("h2", { className: "m-0 min-w-0 break-words text-xl font-bold leading-tight text-[color:var(--mb-color-text)]", children: E }),
         /* @__PURE__ */ I(T, { content: d, side: "bottom", children: /* @__PURE__ */ I(
           J,
           {
@@ -2430,12 +2427,12 @@ function u3({
         ) })
       ] })
     ] }),
-    /* @__PURE__ */ a("div", { className: "flex shrink-0 items-center gap-2", children: [
+    /* @__PURE__ */ a("div", { className: "flex w-full min-w-0 items-center justify-between gap-2 @min-[30rem]:w-auto @min-[30rem]:shrink-0 @min-[30rem]:justify-start", children: [
       /* @__PURE__ */ I("span", { className: "text-base font-bold text-[color:var(--mb-color-text)]", children: l }),
       /* @__PURE__ */ I(
         "span",
         {
-          className: `inline-flex min-w-[4rem] items-center justify-center rounded-[length:var(--mb-badge-radius)] border px-3 py-1 text-[1.75rem] font-bold leading-none tabular-nums ${R}`,
+          className: `inline-flex max-w-full min-w-[4rem] items-center justify-center rounded-[length:var(--mb-badge-radius)] border px-3 py-1 text-[1.75rem] font-bold leading-none tabular-nums ${R}`,
           style: { borderColor: q, backgroundColor: Z },
           children: t
         }
@@ -2458,7 +2455,7 @@ function Yz(A) {
     () => e.find((W) => W.statusExplanationPanel) ?? null
   ), [q, Z] = U(!1), l = i != null && i.length ? i : [n, V].filter((W) => !!W), u = qA();
   return /* @__PURE__ */ a($, { children: [
-    /* @__PURE__ */ a(M, { className: "flex min-w-0 flex-col", children: [
+    /* @__PURE__ */ a(M, { className: "@container flex min-w-0 flex-col", children: [
       /* @__PURE__ */ I(
         u3,
         {
@@ -2902,7 +2899,7 @@ function yz({
   const n = e ?? z;
   return /* @__PURE__ */ a(M, { className: `flex min-w-0 flex-col overflow-x-clip ${i}`.trim(), children: [
     /* @__PURE__ */ a("div", { className: "flex min-w-0 items-center gap-1.5", children: [
-      /* @__PURE__ */ I("h2", { className: "text-xl font-bold text-[color:var(--mb-color-text)] m-0 p-0", children: A }),
+      /* @__PURE__ */ I("h2", { className: "m-0 min-w-0 break-words p-0 text-xl font-bold text-[color:var(--mb-color-text)]", children: A }),
       z && n ? /* @__PURE__ */ I(T, { content: n, children: /* @__PURE__ */ I(
         J,
         {
@@ -2950,7 +2947,7 @@ function pI({
     )
   ] });
 }
-const Tz = "flex min-h-10 items-center justify-between gap-4 py-3.5 text-sm leading-5 text-[color:var(--mb-color-text)]", Pz = "border-t border-[color:var(--mb-color-card-border)]", Lz = "flex min-w-0 flex-1 items-center gap-3", wz = "flex size-5 shrink-0 items-center justify-center text-[color:var(--mb-color-text-muted)]", Hz = "size-[1.125rem] shrink-0";
+const Tz = "flex min-h-10 flex-col items-stretch gap-2 py-3.5 text-sm leading-5 text-[color:var(--mb-color-text)] @min-[30rem]:flex-row @min-[30rem]:items-center @min-[30rem]:justify-between @min-[30rem]:gap-4", Pz = "border-t border-[color:var(--mb-color-card-border)]", Lz = "flex w-full min-w-0 items-center gap-3 @min-[30rem]:flex-1", wz = "flex size-5 shrink-0 items-center justify-center text-[color:var(--mb-color-text-muted)]", Hz = "size-[1.125rem] shrink-0";
 function TA({
   Icon: A,
   label: E,
@@ -2960,9 +2957,9 @@ function TA({
   return /* @__PURE__ */ a("li", { className: `${Tz} ${t ? Pz : ""}`, children: [
     /* @__PURE__ */ a("span", { className: Lz, children: [
       /* @__PURE__ */ I("span", { className: wz, "aria-hidden": !0, children: /* @__PURE__ */ I(A, { className: Hz }) }),
-      /* @__PURE__ */ I("span", { className: "min-w-0 truncate", children: E })
+      /* @__PURE__ */ I("span", { className: "min-w-0 break-words @min-[30rem]:truncate", children: E })
     ] }),
-    /* @__PURE__ */ I(pA, { variant: "value", children: r })
+    /* @__PURE__ */ I(pA, { variant: "value", className: "max-w-full self-end @min-[30rem]:self-auto", children: r })
   ] });
 }
 function Dz({
@@ -2986,15 +2983,15 @@ function Dz({
   return /* @__PURE__ */ a(
     M,
     {
-      className: `min-w-0 ${l}`.trim(),
+      className: `@container min-w-0 ${l}`.trim(),
       "data-mc-audit-kind": "overall-score",
       "data-mc-score": r,
       "data-mc-status": z,
       "data-mc-risk": e ?? z,
       children: [
-        /* @__PURE__ */ a("div", { className: "mb-4 flex items-start justify-between gap-4", children: [
-          /* @__PURE__ */ a("div", { className: "flex min-w-0 flex-1 items-center gap-1.5", children: [
-            /* @__PURE__ */ I("h2", { className: "text-xl font-bold text-[color:var(--mb-color-text)] m-0 p-0", children: A }),
+        /* @__PURE__ */ a("div", { className: "mb-4 flex min-w-0 flex-col items-stretch gap-2 @min-[30rem]:flex-row @min-[30rem]:items-start @min-[30rem]:justify-between @min-[30rem]:gap-4", children: [
+          /* @__PURE__ */ a("div", { className: "flex min-w-0 items-center gap-1.5 @min-[30rem]:flex-1", children: [
+            /* @__PURE__ */ I("h2", { className: "m-0 min-w-0 break-words p-0 text-xl font-bold text-[color:var(--mb-color-text)]", children: A }),
             v && u ? /* @__PURE__ */ I(T, { content: u, children: /* @__PURE__ */ I(
               J,
               {
@@ -3006,10 +3003,16 @@ function Dz({
               }
             ) }) : null
           ] }),
-          /* @__PURE__ */ a("span", { className: `shrink-0 text-[3.75rem] font-bold leading-none ${t}`, children: [
-            K,
-            "%"
-          ] })
+          /* @__PURE__ */ a(
+            "span",
+            {
+              className: `max-w-full shrink-0 self-end text-[3.75rem] font-bold leading-none @min-[30rem]:self-auto ${t}`,
+              children: [
+                K,
+                "%"
+              ]
+            }
+          )
         ] }),
         /* @__PURE__ */ I(
           vE,
@@ -3063,7 +3066,7 @@ function _z({
   className: v = ""
 }) {
   const i = !!(A && E), n = !!(r && t), V = !!(z && e);
-  return i || n || V ? /* @__PURE__ */ I(M, { className: `min-w-0 ${v}`.trim(), children: /* @__PURE__ */ a("ul", { className: "list-none p-0 m-0", children: [
+  return i || n || V ? /* @__PURE__ */ I(M, { className: `@container min-w-0 ${v}`.trim(), children: /* @__PURE__ */ a("ul", { className: "list-none p-0 m-0", children: [
     i ? /* @__PURE__ */ I(
       TA,
       {
@@ -3147,17 +3150,17 @@ function Ae(A) {
       "data-mc-product-name": E,
       "data-mc-triads": r == null ? void 0 : r.join(","),
       children: [
-        /* @__PURE__ */ a("div", { className: "flex min-w-0 items-start justify-between gap-4", children: [
+        /* @__PURE__ */ a("div", { className: "flex min-w-0 flex-wrap items-start gap-3 sm:gap-4", children: [
           Z ? /* @__PURE__ */ I(
             "button",
             {
               type: "button",
               onClick: q,
-              className: "min-w-0 text-left text-xl font-bold leading-7 tracking-[-0.005rem] text-[color:var(--mb-color-text)] transition hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--mb-color-focus-ring)] sm:flex-1",
+              className: "min-w-0 flex-[1_1_12rem] break-words text-left text-xl font-bold leading-7 tracking-[-0.005rem] text-[color:var(--mb-color-text)] transition hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--mb-color-focus-ring)]",
               children: E
             }
-          ) : /* @__PURE__ */ I("h2", { className: "min-w-0 text-xl font-bold leading-7 tracking-[-0.005rem] text-[color:var(--mb-color-text)] sm:flex-1", children: E }),
-          /* @__PURE__ */ I("div", { className: "flex shrink-0 justify-end", children: /* @__PURE__ */ I(Cz, { triadNumbers: r }) })
+          ) : /* @__PURE__ */ I("h2", { className: "min-w-0 flex-[1_1_12rem] break-words text-xl font-bold leading-7 tracking-[-0.005rem] text-[color:var(--mb-color-text)]", children: E }),
+          /* @__PURE__ */ I("div", { className: "ml-auto flex max-w-full shrink-0 justify-end", children: /* @__PURE__ */ I(Cz, { triadNumbers: r }) })
         ] }),
         /* @__PURE__ */ a("div", { className: "flex w-full min-w-0 flex-col gap-4 md:flex-row md:items-start", children: [
           /* @__PURE__ */ I(
@@ -4443,11 +4446,17 @@ function M9({
   onCategoryClick: E
 }) {
   const r = Q9(A.aggregateTrendZone), t = r ? `${gA[r]} ${kA[r]}` : "border-[color:var(--mb-color-card-border)] bg-[color:var(--mb-color-card-bg)]";
-  return /* @__PURE__ */ I(M, { className: "@container min-w-0 !p-6", children: /* @__PURE__ */ a("div", { className: "grid min-w-0 gap-6 @min-[76rem]:grid-cols-[8.5rem_minmax(0,1fr)] @min-[76rem]:items-center", children: [
-    /* @__PURE__ */ a("div", { className: "flex min-w-0 items-center gap-4 @min-[76rem]:flex-col @min-[76rem]:justify-center @min-[76rem]:gap-2", children: [
-      /* @__PURE__ */ I(fA, { triadNumber: A.triadNumber, className: "size-20 @min-[76rem]:size-30" }),
+  return /* @__PURE__ */ I(M, { className: "@container min-w-0 !p-4 sm:!p-6", children: /* @__PURE__ */ a("div", { className: "grid min-w-0 gap-6 @min-[76rem]:grid-cols-[8.5rem_minmax(0,1fr)] @min-[76rem]:items-center", children: [
+    /* @__PURE__ */ a("div", { className: "flex min-w-0 items-center gap-3 @min-[32rem]:gap-4 @min-[76rem]:flex-col @min-[76rem]:justify-center @min-[76rem]:gap-2", children: [
+      /* @__PURE__ */ I(
+        fA,
+        {
+          triadNumber: A.triadNumber,
+          className: "size-16 @min-[32rem]:size-20 @min-[76rem]:size-30"
+        }
+      ),
       /* @__PURE__ */ a("div", { className: "min-w-0 flex-1 text-left @min-[76rem]:flex-none @min-[76rem]:text-center", children: [
-        /* @__PURE__ */ I("p", { className: "m-0 text-[0.75rem] font-bold uppercase leading-4 tracking-normal text-[color:var(--mb-color-text)]", children: p9(A.heading) }),
+        /* @__PURE__ */ I("p", { className: "m-0 break-words text-[0.75rem] font-bold uppercase leading-4 tracking-normal text-[color:var(--mb-color-text)]", children: p9(A.heading) }),
         /* @__PURE__ */ I(
           "p",
           {
@@ -4530,7 +4539,7 @@ function oI({
   tone: r = "current",
   valueBadgeClassName: t
 }) {
-  return /* @__PURE__ */ a("span", { className: "grid min-w-0 grid-cols-[5.25rem_minmax(4rem,1fr)] items-center gap-x-3", children: [
+  return /* @__PURE__ */ a("span", { className: "grid min-w-0 grid-cols-[minmax(3.5rem,auto)_minmax(0,1fr)] items-center gap-x-2 @min-[24rem]:grid-cols-[5.25rem_minmax(4rem,1fr)] @min-[24rem]:gap-x-3", children: [
     /* @__PURE__ */ I("span", { className: "text-right text-[0.625rem] font-bold uppercase leading-none text-[color:var(--mb-color-text)]", children: A }),
     /* @__PURE__ */ I("span", { className: "flex min-w-0 justify-center", children: /* @__PURE__ */ I(_, { value: E, tone: r, className: t }) })
   ] });
@@ -4685,13 +4694,13 @@ function w({
   return /* @__PURE__ */ a(
     "header",
     {
-      className: `flex min-w-0 flex-col gap-4 sm:flex-row sm:items-start sm:justify-between ${r}`.trim(),
+      className: `flex min-w-0 flex-col gap-4 xl:flex-row xl:items-start xl:justify-between ${r}`.trim(),
       children: [
         /* @__PURE__ */ a("div", { className: "min-w-0 space-y-1", children: [
-          /* @__PURE__ */ I("h1", { className: "m-0 mb-2 p-0 text-[2.1875rem] font-bold leading-[2.5rem] tracking-[-0.01rem] text-[color:var(--mb-color-text)]", children: A }),
+          /* @__PURE__ */ I("h1", { className: "m-0 mb-2 break-words p-0 text-[1.875rem] font-bold leading-[2.25rem] tracking-[-0.01rem] text-[color:var(--mb-color-text)] sm:text-[2.1875rem] sm:leading-[2.5rem]", children: A }),
           E ? /* @__PURE__ */ I("p", { className: "max-w-3xl text-sm leading-relaxed text-[color:var(--mb-color-text-muted)] m-0 p-0", children: E }) : null
         ] }),
-        t || e ? /* @__PURE__ */ a("div", { className: "flex max-w-full min-w-0 flex-wrap items-center gap-2 sm:justify-end", children: [
+        t || e ? /* @__PURE__ */ a("div", { className: "flex max-w-full min-w-0 flex-wrap items-center gap-2 xl:justify-end", children: [
           t,
           e ? /* @__PURE__ */ I(ME, { label: z }) : null
         ] }) : null
@@ -4814,7 +4823,7 @@ function U7({
   const n = v ?? e, V = !!(t != null && t.trim() && z.trim());
   return /* @__PURE__ */ I("div", { className: "@container mb-5 w-full min-w-0", children: /* @__PURE__ */ a("div", { className: "grid w-full min-w-0 grid-cols-1 gap-y-3 @2xl:grid-cols-[1fr_auto_1fr] @2xl:items-center @2xl:gap-x-6 @2xl:gap-y-0 @2xl:min-h-9", children: [
     /* @__PURE__ */ a("div", { className: "flex min-w-0 items-center gap-2 @2xl:min-w-0", children: [
-      /* @__PURE__ */ I("h2", { className: "min-w-0 truncate text-xl font-bold text-[color:var(--mb-color-text)]", children: A }),
+      /* @__PURE__ */ I("h2", { className: "min-w-0 break-words text-xl font-bold text-[color:var(--mb-color-text)] @2xl:truncate", children: A }),
       /* @__PURE__ */ I(T, { content: E, children: /* @__PURE__ */ I(
         J,
         {
@@ -5036,13 +5045,20 @@ function T9({
   rowSize: V
 }) {
   var IA;
-  const d = A.infoTooltip ?? A.infoAriaLabel, R = A.status === "optimal", q = A.status === "high", Z = A.status === "low", l = A.status === "unknown", u = R ? gA.low : q || Z ? gA.high : l ? "border-[color:var(--mb-color-card-border)]" : gA.moderate, W = R ? kA.low : q || Z ? kA.high : l ? "bg-[color:var(--mb-color-card-bg)]" : kA.moderate, C = R ? "OPTIMAL" : q ? "HIGH" : Z ? "LOW" : l ? "UNKNOWN" : "TRENDING", Q = (IA = A.riskLabel) == null ? void 0 : IA.trim(), s = Q ? Q.toUpperCase() : C, p = R ? "trendRowStatusOptimal" : q ? "trendRowStatusHigh" : Z ? "trendRowStatusLow" : l ? "trendRowStatusUnknown" : "trendRowStatusTrending", K = i === 2, S = V ? V === "wellness" : K, o = n ?? (K ? "2xl" : "xl"), g = K ? o === "2xl" ? "2xl:grid-cols-[minmax(10rem,16rem)_minmax(0,1fr)_minmax(8rem,9rem)]" : "xl:grid-cols-[minmax(10rem,16rem)_minmax(0,1fr)_minmax(8rem,9rem)]" : S ? o === "2xl" ? "2xl:grid-cols-[minmax(11rem,14rem)_minmax(0,1fr)_minmax(10rem,11rem)]" : "xl:grid-cols-[minmax(11rem,14rem)_minmax(0,1fr)_minmax(10rem,11rem)]" : o === "2xl" ? "2xl:grid-cols-[minmax(10rem,14rem)_minmax(0,1fr)_minmax(10rem,12rem)]" : "xl:grid-cols-[minmax(10rem,14rem)_minmax(0,1fr)_minmax(10rem,12rem)]", B = o === "2xl" ? `2xl:grid 2xl:items-stretch ${g}` : `xl:grid xl:items-stretch ${g}`, G = o === "2xl" ? "2xl:h-full" : "xl:h-full", O = o === "2xl" ? "2xl:border-t-0 2xl:px-3 2xl:py-1" : "xl:border-t-0 xl:px-3 xl:py-1", x = o === "2xl" ? "2xl:w-auto" : "xl:w-auto", Y = v.some((N) => N.length > 8), h = K || Y ? "grid-cols-[6.5rem_7.5rem] xl:grid-cols-[7rem_9rem]" : "grid-cols-[4.5rem_7.5rem] xl:grid-cols-[5rem_9rem]", AA = K ? "sm:gap-x-10" : Y ? "sm:gap-x-4" : "sm:gap-x-5", aA = (N, EA) => /* @__PURE__ */ a(
+  const d = A.infoTooltip ?? A.infoAriaLabel, R = A.status === "optimal", q = A.status === "high", Z = A.status === "low", l = A.status === "unknown", u = R ? gA.low : q || Z ? gA.high : l ? "border-[color:var(--mb-color-card-border)]" : gA.moderate, W = R ? kA.low : q || Z ? kA.high : l ? "bg-[color:var(--mb-color-card-bg)]" : kA.moderate, C = R ? "OPTIMAL" : q ? "HIGH" : Z ? "LOW" : l ? "UNKNOWN" : "TRENDING", Q = (IA = A.riskLabel) == null ? void 0 : IA.trim(), s = Q ? Q.toUpperCase() : C, p = R ? "trendRowStatusOptimal" : q ? "trendRowStatusHigh" : Z ? "trendRowStatusLow" : l ? "trendRowStatusUnknown" : "trendRowStatusTrending", K = i === 2, S = V ? V === "wellness" : K, o = n ?? (K ? "2xl" : "xl"), g = K ? o === "2xl" ? "2xl:grid-cols-[minmax(10rem,16rem)_minmax(0,1fr)_minmax(8rem,9rem)]" : "xl:grid-cols-[minmax(10rem,16rem)_minmax(0,1fr)_minmax(8rem,9rem)]" : S ? o === "2xl" ? "2xl:grid-cols-[minmax(11rem,14rem)_minmax(0,1fr)_minmax(10rem,11rem)]" : "xl:grid-cols-[minmax(11rem,14rem)_minmax(0,1fr)_minmax(10rem,11rem)]" : o === "2xl" ? "2xl:grid-cols-[minmax(10rem,14rem)_minmax(0,1fr)_minmax(10rem,12rem)]" : "xl:grid-cols-[minmax(10rem,14rem)_minmax(0,1fr)_minmax(10rem,12rem)]", B = o === "2xl" ? `2xl:grid 2xl:items-stretch ${g}` : `xl:grid xl:items-stretch ${g}`, G = o === "2xl" ? "2xl:h-full" : "xl:h-full", O = o === "2xl" ? "2xl:border-t-0 2xl:px-3 2xl:py-1" : "xl:border-t-0 xl:px-3 xl:py-1", x = o === "2xl" ? "2xl:w-auto" : "xl:w-auto", Y = v.some((N) => N.length > 8), h = K || Y ? "grid-cols-[minmax(3.5rem,auto)_minmax(0,1fr)] sm:grid-cols-[6.5rem_7.5rem] xl:grid-cols-[7rem_9rem]" : "grid-cols-[minmax(3.5rem,auto)_minmax(0,1fr)] sm:grid-cols-[4.5rem_7.5rem] xl:grid-cols-[5rem_9rem]", AA = K ? "sm:gap-x-10" : Y ? "sm:gap-x-4" : "sm:gap-x-5", aA = (N, EA) => /* @__PURE__ */ a(
     "span",
     {
-      className: `grid min-w-0 max-w-full shrink-0 items-center justify-center gap-x-2 ${h}`,
+      className: `grid w-full min-w-0 max-w-[14rem] items-center justify-center gap-x-2 sm:w-auto sm:shrink-0 ${h}`,
       children: [
         /* @__PURE__ */ I("span", { className: "shrink-0 justify-self-end whitespace-nowrap text-right text-xs text-[color:var(--mb-color-text-muted)] sm:text-sm", children: N }),
-        /* @__PURE__ */ I(pA, { variant: "rowMetricValue", className: "shrink-0 justify-self-start tabular-nums", children: EA })
+        /* @__PURE__ */ I(
+          pA,
+          {
+            variant: "rowMetricValue",
+            className: "min-w-0 shrink justify-self-start tabular-nums sm:shrink-0",
+            children: EA
+          }
+        )
       ]
     }
   );
@@ -5075,9 +5091,9 @@ function T9({
           {
             className: `flex min-w-0 flex-1 flex-col content-center items-center justify-center gap-y-2 border-t border-[color:var(--mb-color-card-border)] bg-[color:var(--mb-color-card-bg)] px-2 py-2 sm:flex-row sm:flex-wrap sm:px-3 ${AA} ${O}`,
             children: [
-              /* @__PURE__ */ I("div", { className: "flex min-w-0 justify-center", children: aA(v[0], A.symptomScore) }),
-              /* @__PURE__ */ I("div", { className: "flex min-w-0 justify-center", children: aA(v[1], A.labScore) }),
-              i === 3 ? /* @__PURE__ */ I("div", { className: "flex min-w-0 justify-center", children: aA(v[2], A.totalScore) }) : null
+              /* @__PURE__ */ I("div", { className: "flex w-full min-w-0 justify-center sm:w-auto", children: aA(v[0], A.symptomScore) }),
+              /* @__PURE__ */ I("div", { className: "flex w-full min-w-0 justify-center sm:w-auto", children: aA(v[1], A.labScore) }),
+              i === 3 ? /* @__PURE__ */ I("div", { className: "flex w-full min-w-0 justify-center sm:w-auto", children: aA(v[2], A.totalScore) }) : null
             ]
           }
         ),
@@ -5327,7 +5343,7 @@ function BI({
   value: E,
   tone: r = "current"
 }) {
-  return /* @__PURE__ */ a("span", { className: "grid min-w-0 grid-cols-[5.25rem_minmax(4rem,1fr)] items-center gap-x-3", children: [
+  return /* @__PURE__ */ a("span", { className: "grid min-w-0 grid-cols-[minmax(3.5rem,auto)_minmax(0,1fr)] items-center gap-x-2 @min-[24rem]:grid-cols-[5.25rem_minmax(4rem,1fr)] @min-[24rem]:gap-x-3", children: [
     /* @__PURE__ */ I("span", { className: "text-right text-[0.625rem] font-bold uppercase leading-none text-[color:var(--mb-color-text)]", children: A }),
     /* @__PURE__ */ I("span", { className: "flex min-w-0 justify-center", children: /* @__PURE__ */ I(
       _,
@@ -5924,7 +5940,7 @@ function YV({ content: A }) {
       V ? /* @__PURE__ */ I("div", { className: "space-y-6", children: q.map((o) => /* @__PURE__ */ a(
         "div",
         {
-          className: "min-w-0 space-y-3 rounded-[length:var(--mb-radius-card)] bg-[color:var(--mb-color-muted-section-bg)] p-[length:var(--mb-card-padding)]",
+          className: "min-w-0 space-y-3 rounded-[length:var(--mb-radius-card)] bg-[color:var(--mb-color-muted-section-bg)] p-3 sm:p-[length:var(--mb-card-padding)]",
           children: [
             /* @__PURE__ */ a("div", { className: "flex flex-wrap items-baseline justify-between gap-2", children: [
               /* @__PURE__ */ I("h2", { className: "m-0 text-xl font-bold text-[color:var(--mb-color-text)]", children: Za(o.title) }),
@@ -10094,71 +10110,57 @@ function xn({
   const C = nr(), Q = E && C ? (s) => {
     w3(s) && C.prefetch(s);
   } : void 0;
-  return i === "top" ? /* @__PURE__ */ I(
+  return i === "top" ? /* @__PURE__ */ I("div", { className: "mb-dashboard-root mb-root mb-sim-animate-in", style: A, children: /* @__PURE__ */ a(
     "div",
     {
-      className: "mb-root mb-sim-animate-in flex h-full min-h-0 min-w-0 flex-1 flex-col overflow-hidden",
-      style: A,
-      children: /* @__PURE__ */ a(
-        "div",
-        {
-          className: [
-            "flex h-full min-h-0 min-w-0 flex-1 flex-col overflow-hidden bg-[color:var(--mb-color-shell-bg)] text-[color:var(--mb-color-text)]",
-            Z
-          ].filter(Boolean).join(" "),
-          children: [
-            /* @__PURE__ */ I(
-              ai,
-              {
-                className: V,
-                items: d,
-                activeItemId: R,
-                onItemClick: q,
-                onNavItemPrefetch: Q
-              }
-            ),
-            /* @__PURE__ */ I("main", { className: "flex min-h-0 min-w-0 flex-1 overflow-auto bg-[color:var(--mb-color-sidebar-bg)]", children: /* @__PURE__ */ a("div", { className: u, children: [
-              W,
-              /* @__PURE__ */ I("div", { "aria-hidden": "true", className: "h-8 shrink-0" })
-            ] }) })
-          ]
-        }
-      )
+      className: [
+        "flex h-full min-h-0 min-w-0 flex-1 flex-col overflow-hidden bg-[color:var(--mb-color-shell-bg)] text-[color:var(--mb-color-text)]",
+        Z
+      ].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ I(
+          ai,
+          {
+            className: V,
+            items: d,
+            activeItemId: R,
+            onItemClick: q,
+            onNavItemPrefetch: Q
+          }
+        ),
+        /* @__PURE__ */ I("main", { className: "flex min-h-0 min-w-0 flex-1 overflow-auto bg-[color:var(--mb-color-sidebar-bg)]", children: /* @__PURE__ */ a("div", { className: u, children: [
+          W,
+          /* @__PURE__ */ I("div", { "aria-hidden": "true", className: "h-8 shrink-0" })
+        ] }) })
+      ]
     }
-  ) : /* @__PURE__ */ I(
-    "div",
+  ) }) : /* @__PURE__ */ I("div", { className: "mb-dashboard-root mb-root mb-sim-animate-in", style: A, children: /* @__PURE__ */ I(
+    gv,
     {
-      className: "mb-root mb-sim-animate-in flex h-full min-h-0 min-w-0 flex-1 flex-col overflow-hidden",
-      style: A,
-      children: /* @__PURE__ */ I(
-        gv,
+      sidebar: /* @__PURE__ */ I(
+        ti,
         {
-          sidebar: /* @__PURE__ */ I(
-            ti,
-            {
-              title: r,
-              logo: t,
-              userProfile: z,
-              footerContent: e,
-              currentReportLabel: v,
-              showReportSelector: n,
-              className: V,
-              items: d,
-              activeItemId: R,
-              onItemClick: q,
-              onNavItemPrefetch: Q
-            }
-          ),
-          sidebarWidthClassName: l,
-          className: Z,
-          children: /* @__PURE__ */ a("div", { className: u, children: [
-            W,
-            /* @__PURE__ */ I("div", { "aria-hidden": "true", className: "h-8 shrink-0" })
-          ] })
+          title: r,
+          logo: t,
+          userProfile: z,
+          footerContent: e,
+          currentReportLabel: v,
+          showReportSelector: n,
+          className: V,
+          items: d,
+          activeItemId: R,
+          onItemClick: q,
+          onNavItemPrefetch: Q
         }
-      )
+      ),
+      sidebarWidthClassName: l,
+      className: Z,
+      children: /* @__PURE__ */ a("div", { className: u, children: [
+        W,
+        /* @__PURE__ */ I("div", { "aria-hidden": "true", className: "h-8 shrink-0" })
+      ] })
     }
-  );
+  ) });
 }
 function hn({
   wrapTabContentCache: A,
@@ -10635,7 +10637,7 @@ function Rr({
   }, [h, RA, AA]);
   const cA = k(
     () => [
-      "flex min-h-0 min-w-0 w-full max-w-full flex-1 flex-col items-stretch gap-4 py-4 px-[max(1rem,var(--mb-main-padding,1.5rem))] text-[color:var(--mb-color-text-muted)] sm:px-[max(1.25rem,var(--mb-main-padding,1.5rem))]",
+      "flex min-h-0 min-w-0 w-full max-w-full flex-1 flex-col items-stretch gap-4 px-3 py-4 text-[color:var(--mb-color-text-muted)] sm:px-[max(1.25rem,var(--mb-main-padding,1.5rem))]",
       C
     ].filter(Boolean).join(" "),
     [C]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metaboliccode-dev/widget",
-  "version": "0.2.63",
+  "version": "0.2.64",
   "type": "module",
   "files": [
     "dist",