@alfadocs/ui-kit 0.70.0 → 0.71.0

package/dist/_chunks/{product-hub-panel-e6pW220e.js → product-hub-panel-DtU7KXxm.js}

@@ -1,26 +1,28 @@
-import { jsx as e, jsxs as r, Fragment as S } from "react/jsx-runtime";
-import { forwardRef as F, useRef as w, useMemo as G, useImperativeHandle as J } from "react";
-import { c as b } from "./index-D2ZczOXr.js";
-import { useTranslation as R } from "react-i18next";
-import { E as se } from "./empty-state-BLy7tigq.js";
-import { L as Q } from "./link-DrD_cRUg.js";
-import { S as W } from "./separator-CYU_bGFn.js";
-import { i as _ } from "./is-safe-url-DkETxeHz.js";
-import { u as X } from "./registry-DvAUVLHh.js";
-import * as C from "@radix-ui/react-popover";
-import { u as ae } from "./use-controllable-state-BiY4xTzM.js";
-import { I as te } from "./icon-button-LqoiKcUN.js";
-import { S as z } from "./skeleton-CZbwyJAA.js";
-import { T as re } from "./timestamp-BV2lC-wV.js";
-import { s as de } from "./safe-image-src-DstKgCo7.js";
-import { c as ne } from "./createLucideIcon-CrFbzy84.js";
+import { jsx as e, jsxs as r, Fragment as V } from "react/jsx-runtime";
+import { forwardRef as F, useRef as T, useMemo as G, useImperativeHandle as X } from "react";
+import { c as x } from "./index-D2ZczOXr.js";
+import { useTranslation as L } from "react-i18next";
+import { E as ae } from "./empty-state-BLy7tigq.js";
+import { L as A } from "./link-DrD_cRUg.js";
+import { S as _ } from "./separator-CYU_bGFn.js";
+import { i as W } from "./is-safe-url-DkETxeHz.js";
+import { u as J } from "./registry-DvAUVLHh.js";
+import * as j from "@radix-ui/react-popover";
+import { u as te } from "./use-controllable-state-BiY4xTzM.js";
+import { I as Q } from "./icon-button-LqoiKcUN.js";
+import { S as re } from "./scroll-area-BZOvUhwQ.js";
+import { S as R } from "./skeleton-CZbwyJAA.js";
+import { T as de } from "./timestamp-BV2lC-wV.js";
+import { s as ne } from "./safe-image-src-DstKgCo7.js";
+import { c as oe } from "./createLucideIcon-CrFbzy84.js";
+import { X as ie } from "./x-CCcI3eJp.js";
 /**
  * @license lucide-react v1.8.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const oe = [
+const ce = [
   ["path", { d: "M12 7v14", key: "1akyts" }],
   ["path", { d: "M20 11v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8", key: "1sqzm4" }],
   [
@@ -28,7 +30,7 @@ const oe = [
     { d: "M7.5 7a1 1 0 0 1 0-5A4.8 8 0 0 1 12 7a4.8 8 0 0 1 4.5-5 1 1 0 0 1 0 5", key: "kc0143" }
   ],
   ["rect", { x: "3", y: "7", width: "18", height: "4", rx: "1", key: "1hberx" }]
-], V = ne("gift", oe), ie = {
+], O = oe("gift", ce), le = {
   id: "product-hub-tray",
   capabilities: ["open", "close"],
   state: {
@@ -75,7 +77,7 @@ const oe = [
       description: "Stable release id emitted on each rendered release row inside the tray."
     }
   }
-}, le = b(
+}, pe = x(
   "ds:relative ds:inline-flex ds:items-center",
   {
     variants: {
@@ -88,7 +90,7 @@ const oe = [
       size: "md"
     }
   }
-), ce = b(
+), ue = x(
   [
     "ds:flex ds:flex-col",
     "ds:bg-[var(--popover)] ds:text-[var(--popover-foreground)]",
@@ -120,7 +122,7 @@ const oe = [
       size: "md"
     }
   }
-), ue = b(
+), me = x(
   [
     // Anchored to the top-end corner of the trigger, nudged outward so
     // the gift glyph isn't covered.
@@ -136,9 +138,11 @@ const oe = [
     "ds:pointer-events-none ds:select-none",
     "ds:forced-colors:outline ds:forced-colors:outline-1 ds:forced-colors:outline-[CanvasText]"
   ].join(" ")
-), pe = b(
+), fe = x(
   [
-    "ds:relative ds:flex ds:items-start",
+    // `group` so the hover/focus-revealed close button can react to the whole
+    // row, not just itself.
+    "ds:group ds:relative ds:flex ds:items-start",
     "ds:rounded-[var(--radius-sm)]",
     "ds:text-start",
     "ds:transition-colors ds:motion-reduce:transition-none"
@@ -149,17 +153,28 @@ const oe = [
         tray: "ds:gap-[var(--spacing-sm)] ds:p-[var(--spacing-sm)]",
         panel: "ds:gap-[var(--spacing-md)] ds:p-[var(--spacing-md)]"
       },
+      // Unseen no longer tints the background — the read/new state is carried
+      // by the leading-corner Gift indicator instead, matching the
+      // notification / message cards.
       unseen: {
-        true: "ds:bg-[color:var(--accent)]/5 ds:hover:bg-[color:var(--accent)]/10",
+        true: "ds:hover:bg-[color:var(--muted)]/40",
         false: "ds:hover:bg-[color:var(--muted)]/40"
+      },
+      // Row chrome: flat (inside a bordered tray/panel) vs elevated (own card
+      // on a rail). Mirrors AppointmentCard / NotificationCard so the Inbox
+      // feed reads consistently with the other rail panels.
+      surface: {
+        flat: "",
+        elevated: "ds:border ds:border-[color:var(--card-border)] ds:[.theme-accessible_&]:border-2 ds:shadow-[var(--shadow-sm)]"
       }
     },
     defaultVariants: {
       density: "tray",
-      unseen: !1
+      unseen: !1,
+      surface: "flat"
     }
   }
-), $ = b(
+), $ = x(
   [
     "ds:shrink-0 ds:rounded-[var(--radius-sm)] ds:object-cover",
     // Tile backdrop so transparent / still-loading thumbnails keep a
@@ -178,7 +193,7 @@ const oe = [
       density: "tray"
     }
   }
-), me = [
+), ve = [
   "ds:focus-visible:outline-none",
   "ds:after:content-[''] ds:after:absolute ds:after:inset-0 ds:after:rounded-[var(--radius-sm)]",
   "ds:after:pointer-events-auto",
@@ -191,90 +206,108 @@ const oe = [
 function Y({
   item: s,
   density: a = "tray",
-  locale: o,
-  onActivate: i,
-  className: l,
-  ...u
+  surface: i = "flat",
+  locale: m,
+  onActivate: o,
+  onDismiss: c,
+  className: f,
+  ...v
 }) {
-  const { t: p } = R(), m = de(s.imageUrl), y = !!s.url && _(s.url), d = !!s.unseen, f = d ? /* @__PURE__ */ e("span", { className: "ds:sr-only", children: p("productHubTray.unseenLabel", ", new") }) : null;
+  const { t: u } = L(), n = ne(s.imageUrl), w = !!s.url && W(s.url), l = !!s.unseen, N = a === "panel" ? "ds:top-[var(--spacing-md)] ds:end-[var(--spacing-md)]" : "ds:top-[var(--spacing-sm)] ds:end-[var(--spacing-sm)]", g = l ? /* @__PURE__ */ e("span", { className: "ds:sr-only", children: u("productHubTray.unseenLabel", ", new") }) : null;
   return /* @__PURE__ */ r(
     "div",
     {
       role: "listitem",
       "data-component": "product-hub-update",
       "data-update-id": s.id,
-      "data-unseen": d ? "true" : "false",
-      className: pe({ density: a, unseen: d, className: l }),
-      ...u,
+      "data-unseen": l ? "true" : "false",
+      className: fe({ density: a, unseen: l, surface: i, className: f }),
+      ...v,
       children: [
-        m ? /* @__PURE__ */ e(
-          "img",
-          {
-            src: m,
-            alt: "",
-            "aria-hidden": "true",
-            referrerPolicy: "no-referrer",
-            loading: "lazy",
-            className: $({ density: a })
-          }
-        ) : /* @__PURE__ */ e(
-          "span",
-          {
-            "aria-hidden": "true",
-            className: `${$({ density: a })} ds:inline-flex ds:items-center ds:justify-center ds:text-[color:var(--muted-foreground)] ds:[&>svg]:size-5`,
-            children: /* @__PURE__ */ e(V, {})
-          }
-        ),
+        /* @__PURE__ */ r("span", { className: "ds:relative ds:shrink-0", children: [
+          n ? /* @__PURE__ */ e(
+            "img",
+            {
+              src: n,
+              alt: "",
+              "aria-hidden": "true",
+              referrerPolicy: "no-referrer",
+              loading: "lazy",
+              className: $({ density: a })
+            }
+          ) : /* @__PURE__ */ e(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: `${$({ density: a })} ds:inline-flex ds:items-center ds:justify-center ds:text-[color:var(--muted-foreground)] ds:[&>svg]:size-5`,
+              children: /* @__PURE__ */ e(O, {})
+            }
+          ),
+          l ? /* @__PURE__ */ e(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-testid": "product-hub-unseen-dot",
+              className: "ds:absolute ds:top-[calc(var(--spacing-xs)*-1)] ds:end-[calc(var(--spacing-xs)*-1)] ds:z-[1] ds:block ds:size-[calc(var(--spacing-sm)+var(--spacing-xs))] ds:rounded-[var(--radius-full)] ds:bg-[color:var(--primary)] ds:ring-2 ds:ring-[color:var(--card)] ds:forced-colors:bg-[Highlight]"
+            }
+          ) : null
+        ] }),
         /* @__PURE__ */ r("div", { className: "ds:min-w-0 ds:flex-1 ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
-          /* @__PURE__ */ r("span", { className: "ds:flex ds:items-center ds:gap-[var(--spacing-xs)] type-title-item ds:text-[color:var(--foreground)]", children: [
-            d ? /* @__PURE__ */ e(
-              "span",
+          /* @__PURE__ */ e("span", { className: "ds:flex ds:items-center ds:gap-[var(--spacing-sm)] type-title-item ds:text-[color:var(--foreground)]", children: w ? (
+            // A real (non-display:contents) anchor so the row is reliably
+            // keyboard-focusable; the ::after stretch keeps the whole row
+            // clickable and carries the focus ring.
+            /* @__PURE__ */ r(
+              "a",
               {
-                "aria-hidden": "true",
-                "data-testid": "product-hub-unseen-dot",
-                className: "ds:inline-block ds:size-1.5 ds:shrink-0 ds:rounded-[var(--radius-full)] ds:bg-[color:var(--primary)] ds:forced-colors:bg-[Highlight]"
+                href: s.url,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: `${ve} ds:min-w-0 ds:flex-1 ds:no-underline ds:text-[color:var(--foreground)]`,
+                onClick: () => o == null ? void 0 : o(s),
+                children: [
+                  /* @__PURE__ */ e("span", { className: "ds:block ds:truncate ds:font-semibold", children: s.title }),
+                  g,
+                  /* @__PURE__ */ e("span", { className: "ds:sr-only", children: u("productHubTray.opensInNewTab", "(opens in a new tab)") })
+                ]
               }
-            ) : null,
-            y ? (
-              // A real (non-display:contents) anchor so the row is reliably
-              // keyboard-focusable; the ::after stretch keeps the whole row
-              // clickable and carries the focus ring.
-              /* @__PURE__ */ r(
-                "a",
-                {
-                  href: s.url,
-                  target: "_blank",
-                  rel: "noopener noreferrer",
-                  className: `${me} ds:min-w-0 ds:flex-1 ds:no-underline ds:text-[color:var(--foreground)]`,
-                  onClick: () => i == null ? void 0 : i(s),
-                  children: [
-                    /* @__PURE__ */ e("span", { className: "ds:block ds:truncate ds:font-semibold", children: s.title }),
-                    f,
-                    /* @__PURE__ */ e("span", { className: "ds:sr-only", children: p("productHubTray.opensInNewTab", "(opens in a new tab)") })
-                  ]
-                }
-              )
-            ) : /* @__PURE__ */ r(S, { children: [
-              /* @__PURE__ */ e("span", { className: "ds:min-w-0 ds:flex-1 ds:truncate ds:font-semibold", children: s.title }),
-              f
-            ] })
-          ] }),
+            )
+          ) : /* @__PURE__ */ r(V, { children: [
+            /* @__PURE__ */ e("span", { className: "ds:min-w-0 ds:flex-1 ds:truncate ds:font-semibold", children: s.title }),
+            g
+          ] }) }),
           s.summary ? /* @__PURE__ */ e("p", { className: "ds:m-0 type-body-sm ds:text-[color:var(--muted-foreground)] ds:[overflow:hidden] ds:[display:-webkit-box] ds:[-webkit-box-orient:vertical] ds:[-webkit-line-clamp:2] ds:break-words", children: s.summary }) : null,
           s.dateIso ? /* @__PURE__ */ e(
-            re,
+            de,
             {
               value: s.dateIso,
               format: "absolute",
-              locale: o,
+              locale: m,
               className: "ds:italic ds:text-[color:var(--muted-foreground)]"
             }
           ) : null
-        ] })
+        ] }),
+        c ? /* @__PURE__ */ e(
+          "span",
+          {
+            className: "ds:absolute ds:z-[2] ds:opacity-0 ds:pointer-events-none ds:transition-opacity ds:motion-reduce:transition-none ds:group-hover:opacity-100 ds:group-hover:pointer-events-auto ds:group-focus-within:opacity-100 ds:group-focus-within:pointer-events-auto " + N,
+            children: /* @__PURE__ */ e(
+              Q,
+              {
+                icon: /* @__PURE__ */ e(ie, {}),
+                intent: "ghost",
+                size: "sm",
+                "aria-label": u("productHubTray.dismiss", "Dismiss update"),
+                onClick: () => c(s)
+              }
+            )
+          }
+        ) : null
       ]
     }
   );
 }
-function j({
+function I({
   density: s = "tray"
 }) {
   return /* @__PURE__ */ r(
@@ -284,7 +317,7 @@ function j({
       className: s === "panel" ? "ds:flex ds:items-start ds:gap-[var(--spacing-md)] ds:p-[var(--spacing-md)]" : "ds:flex ds:items-start ds:gap-[var(--spacing-sm)] ds:p-[var(--spacing-sm)]",
       children: [
         /* @__PURE__ */ e(
-          z,
+          R,
           {
             variant: "rounded",
             width: s === "panel" ? "3rem" : "2.5rem",
@@ -292,9 +325,9 @@ function j({
           }
         ),
         /* @__PURE__ */ r("div", { className: "ds:flex-1 ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
-          /* @__PURE__ */ e(z, { variant: "text", size: "md", width: "60%" }),
-          /* @__PURE__ */ e(z, { variant: "text", size: "sm", width: "90%" }),
-          /* @__PURE__ */ e(z, { variant: "text", size: "sm", width: "30%" })
+          /* @__PURE__ */ e(R, { variant: "text", size: "md", width: "60%" }),
+          /* @__PURE__ */ e(R, { variant: "text", size: "sm", width: "90%" }),
+          /* @__PURE__ */ e(R, { variant: "text", size: "sm", width: "30%" })
         ] })
       ]
     }
@@ -311,11 +344,11 @@ function Z({ children: s }) {
     }
   );
 }
-function fe(s, a) {
+function ge(s, a) {
   return s > 99 ? a : String(s);
 }
-function ve() {
-  const { t: s } = R();
+function he() {
+  const { t: s } = L();
   return /* @__PURE__ */ r(
     "div",
     {
@@ -328,7 +361,7 @@ function ve() {
           {
             "aria-hidden": "true",
             className: "ds:inline-flex ds:items-center ds:justify-center ds:size-10 ds:rounded-[var(--radius-full)] ds:bg-[color:var(--muted)] ds:text-[color:var(--muted-foreground)] ds:[&>svg]:size-5",
-            children: /* @__PURE__ */ e(V, {})
+            children: /* @__PURE__ */ e(O, {})
           }
         ),
         /* @__PURE__ */ e("p", { className: "type-title-item ds:text-[color:var(--foreground)]", children: s("productHubTray.emptyTitle", "No product updates yet") }),
@@ -340,79 +373,79 @@ function ve() {
     }
   );
 }
-const ge = F(
+const be = F(
   ({
     id: s,
     items: a,
-    hubUrl: o,
-    loading: i = !1,
-    error: l,
-    unseenCount: u,
-    onOpenChange: p,
-    onItemActivate: m,
-    triggerLabel: y,
-    maxVisible: d = 10,
-    emptyState: f,
-    defaultOpen: I = !1,
-    locale: L,
-    align: O = "end",
+    hubUrl: i,
+    loading: m = !1,
+    error: o,
+    unseenCount: c,
+    onOpenChange: f,
+    onItemActivate: v,
+    triggerLabel: u,
+    maxVisible: n = 10,
+    emptyState: w,
+    defaultOpen: l = !1,
+    locale: N,
+    align: g = "end",
     side: M = "bottom",
-    size: c = "md",
-    className: N,
-    ...H
-  }, T) => {
-    const { t: n } = R(), [v, g] = ae({
-      defaultValue: I,
-      onChange: p
-    }), k = v ?? !1, t = u ?? a.filter((h) => h.unseen).length, P = y ?? (t > 0 ? n("productHubTray.triggerLabel", {
+    size: p = "md",
+    className: k,
+    ...P
+  }, z) => {
+    const { t: d } = L(), [h, b] = te({
+      defaultValue: l,
+      onChange: f
+    }), C = h ?? !1, t = c ?? a.filter((y) => y.unseen).length, S = u ?? (t > 0 ? d("productHubTray.triggerLabel", {
       count: t,
       defaultValue: "What's new, {{count}} unseen updates"
-    }) : n("productHubTray.triggerLabelNone", "What's new")), U = fe(
+    }) : d("productHubTray.triggerLabelNone", "What's new")), U = ge(
       t,
-      n("productHubTray.badgeCountOverflow", "99+")
-    ), K = a.slice(0, Math.max(0, d)), A = !l && !i && K.length > 0, q = o && _(o) ? o : void 0, E = w(a);
+      d("productHubTray.badgeCountOverflow", "99+")
+    ), K = a.slice(0, Math.max(0, n)), ee = !o && !m && K.length > 0, q = i && W(i) ? i : void 0, E = T(a);
     E.current = a;
-    const B = w(u);
-    B.current = u;
-    const ee = G(
+    const B = T(c);
+    B.current = c;
+    const se = G(
       () => ({
-        open: () => g(!0),
-        close: () => g(!1),
-        getUnseenCount: () => B.current ?? E.current.filter((h) => h.unseen).length
+        open: () => b(!0),
+        close: () => b(!1),
+        getUnseenCount: () => B.current ?? E.current.filter((y) => y.unseen).length
       }),
-      [g]
-    ), D = w(null);
-    J(T, () => D.current, []), X(ie, ee, s);
-    let x;
-    return l ? x = /* @__PURE__ */ e(Z, { children: l }) : i ? x = /* @__PURE__ */ r(S, { children: [
-      /* @__PURE__ */ e(j, {}),
-      /* @__PURE__ */ e(j, {}),
-      /* @__PURE__ */ e(j, {})
-    ] }) : K.length === 0 ? x = f ?? /* @__PURE__ */ e(ve, {}) : x = K.map((h) => /* @__PURE__ */ e(
+      [b]
+    ), D = T(null);
+    X(z, () => D.current, []), J(le, se, s);
+    let H;
+    return o ? H = /* @__PURE__ */ e(Z, { children: o }) : m ? H = /* @__PURE__ */ r(V, { children: [
+      /* @__PURE__ */ e(I, {}),
+      /* @__PURE__ */ e(I, {}),
+      /* @__PURE__ */ e(I, {})
+    ] }) : K.length === 0 ? H = w ?? /* @__PURE__ */ e(he, {}) : H = K.map((y) => /* @__PURE__ */ e(
       Y,
       {
-        item: h,
+        item: y,
         density: "tray",
-        locale: L,
-        onActivate: m
+        locale: N,
+        onActivate: v
       },
-      h.id
+      y.id
     )), /* @__PURE__ */ e(
       "div",
       {
         ref: D,
         "data-component": "product-hub-tray",
         "data-component-id": s,
-        className: [le({ size: c }), N].filter(Boolean).join(" "),
-        ...H,
-        children: /* @__PURE__ */ r(C.Root, { open: k, onOpenChange: g, children: [
-          /* @__PURE__ */ e(C.Trigger, { asChild: !0, children: /* @__PURE__ */ e(
-            te,
+        className: [pe({ size: p }), k].filter(Boolean).join(" "),
+        ...P,
+        children: /* @__PURE__ */ r(j.Root, { open: C, onOpenChange: b, children: [
+          /* @__PURE__ */ e(j.Trigger, { asChild: !0, children: /* @__PURE__ */ e(
+            Q,
             {
-              icon: /* @__PURE__ */ e(V, {}),
+              icon: /* @__PURE__ */ e(O, {}),
               intent: "outline",
-              size: c === "sm" ? "sm" : "md",
-              "aria-label": P,
+              size: p === "sm" ? "sm" : "md",
+              "aria-label": S,
               "aria-haspopup": "dialog"
             }
           ) }),
@@ -421,35 +454,42 @@ const ge = F(
             {
               "aria-hidden": "true",
               "data-testid": "product-hub-tray-badge",
-              className: ue(),
+              className: me(),
               children: U
             }
           ) : null,
-          /* @__PURE__ */ e(C.Portal, { children: /* @__PURE__ */ r(
-            C.Content,
+          /* @__PURE__ */ e(j.Portal, { children: /* @__PURE__ */ r(
+            j.Content,
             {
               role: "dialog",
-              "aria-label": n("productHubTray.panelTitle", "What's new"),
+              "aria-label": d("productHubTray.panelTitle", "What's new"),
               side: M,
-              align: O,
+              align: g,
               sideOffset: 8,
               collisionPadding: 16,
-              className: ce({ size: c }),
+              className: ue({ size: p }),
               children: [
-                /* @__PURE__ */ e("div", { className: "ds:flex ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)] ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:pb-[var(--spacing-xs)]", children: /* @__PURE__ */ e("h3", { className: "ds:m-0 type-title-card ds:text-[color:var(--foreground)]", children: n("productHubTray.panelTitle", "What's new") }) }),
-                /* @__PURE__ */ e(W, {}),
+                /* @__PURE__ */ e("div", { className: "ds:flex ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)] ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:pb-[var(--spacing-xs)]", children: /* @__PURE__ */ e("h3", { className: "ds:m-0 type-title-card ds:text-[color:var(--foreground)]", children: d("productHubTray.panelTitle", "What's new") }) }),
+                /* @__PURE__ */ e(_, {}),
                 /* @__PURE__ */ e(
-                  "div",
+                  re,
                   {
-                    role: A ? "list" : void 0,
-                    "data-max-visible": d,
-                    className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:overflow-y-auto ds:pt-[var(--spacing-xs)] ds:flex-1 ds:sm:flex-none ds:sm:[max-block-size:var(--product-hub-tray-max-block-size,24rem)]",
-                    children: x
+                    orientation: "vertical",
+                    className: "ds:flex-1 ds:sm:flex-none ds:sm:[max-block-size:var(--product-hub-tray-max-block-size,24rem)]",
+                    children: /* @__PURE__ */ e(
+                      "div",
+                      {
+                        role: ee ? "list" : void 0,
+                        "data-max-visible": n,
+                        className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:pt-[var(--spacing-xs)]",
+                        children: H
+                      }
+                    )
                   }
                 ),
-                q ? /* @__PURE__ */ r(S, { children: [
-                  /* @__PURE__ */ e(W, {}),
-                  /* @__PURE__ */ e("div", { className: "ds:flex ds:justify-center ds:pt-[var(--spacing-sm)] ds:pb-[var(--spacing-xs)]", children: /* @__PURE__ */ e(Q, { href: q, external: !0, children: n("productHubTray.openHub", "Open in Product Hub") }) })
+                q ? /* @__PURE__ */ r(V, { children: [
+                  /* @__PURE__ */ e(_, {}),
+                  /* @__PURE__ */ e("div", { className: "ds:flex ds:justify-center ds:pt-[var(--spacing-sm)] ds:pb-[var(--spacing-xs)]", children: /* @__PURE__ */ e(A, { href: q, external: !0, children: d("productHubTray.openHub", "Open in Product Hub") }) })
                 ] }) : null
               ]
             }
@@ -459,8 +499,8 @@ const ge = F(
     );
   }
 );
-ge.displayName = "ProductHubTray";
-const he = {
+be.displayName = "ProductHubTray";
+const ye = {
   id: "product-hub-panel",
   // selectItem activates one release row (fires the host hook) without
   // persisting a stored selection → `pick`, not `select_single`.
@@ -520,7 +560,7 @@ const he = {
       description: "Stable release id emitted on each rendered release row inside the panel."
     }
   }
-}, be = b(
+}, xe = x(
   [
     "ds:flex ds:flex-col",
     "ds:rounded-[var(--radius-md)]",
@@ -540,99 +580,99 @@ const he = {
       surface: "elevated"
     }
   }
-), ye = F(
+), we = F(
   ({
     id: s,
     items: a,
-    hubUrl: o,
-    loading: i = !1,
-    error: l,
-    title: u,
-    description: p,
-    maxVisible: m = 5,
-    emptyState: y,
-    onItemActivate: d,
-    locale: f,
-    surface: I = "elevated",
-    className: L,
-    ...O
+    hubUrl: i,
+    loading: m = !1,
+    error: o,
+    title: c,
+    description: f,
+    maxVisible: v = 5,
+    emptyState: u,
+    onItemActivate: n,
+    locale: w,
+    surface: l = "elevated",
+    className: N,
+    ...g
   }, M) => {
-    const { t: c } = R(), N = u ?? c("productHubPanel.title", "What's new"), H = a.slice(0, Math.max(0, m)), T = o && _(o) ? o : void 0;
-    let n;
-    l ? n = /* @__PURE__ */ e(Z, { children: l }) : i ? n = /* @__PURE__ */ e("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:p-[var(--spacing-sm)] ds:pt-0", children: [0, 1, 2].map((t) => /* @__PURE__ */ e(j, { density: "panel" }, t)) }) : H.length === 0 ? n = y ?? /* @__PURE__ */ e("div", { className: "ds:p-[var(--spacing-md)]", children: /* @__PURE__ */ e(
-      se,
+    const { t: p } = L(), k = c ?? p("productHubPanel.title", "What's new"), P = a.slice(0, Math.max(0, v)), z = i && W(i) ? i : void 0;
+    let d;
+    o ? d = /* @__PURE__ */ e(Z, { children: o }) : m ? d = /* @__PURE__ */ e("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:p-[var(--spacing-sm)] ds:pt-0", children: [0, 1, 2].map((t) => /* @__PURE__ */ e(I, { density: "panel" }, t)) }) : P.length === 0 ? d = u ?? /* @__PURE__ */ e("div", { className: "ds:p-[var(--spacing-md)]", children: /* @__PURE__ */ e(
+      ae,
       {
         variant: "first-use",
         size: "sm",
-        title: c("productHubPanel.emptyTitle", "No product updates yet"),
-        description: c(
+        title: p("productHubPanel.emptyTitle", "No product updates yet"),
+        description: p(
           "productHubPanel.emptyDescription",
           "New releases and improvements will appear here."
         )
       }
-    ) }) : n = /* @__PURE__ */ e(
+    ) }) : d = /* @__PURE__ */ e(
       "div",
       {
         role: "list",
-        "data-max-visible": m,
+        "data-max-visible": v,
         className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:p-[var(--spacing-sm)] ds:pt-0",
-        children: H.map((t) => /* @__PURE__ */ e(
+        children: P.map((t) => /* @__PURE__ */ e(
           Y,
           {
             item: t,
             density: "panel",
-            locale: f,
-            onActivate: d
+            locale: w,
+            onActivate: n
           },
           t.id
         ))
       }
     );
-    const v = w(a);
-    v.current = a;
-    const g = G(
+    const h = T(a);
+    h.current = a;
+    const b = G(
       () => ({
-        getItems: () => v.current.map((t) => ({ id: t.id, unseen: !!t.unseen })),
-        getUnseenCount: () => v.current.filter((t) => t.unseen).length,
+        getItems: () => h.current.map((t) => ({ id: t.id, unseen: !!t.unseen })),
+        getUnseenCount: () => h.current.filter((t) => t.unseen).length,
         selectItem: (t) => {
-          const P = v.current.find((U) => U.id === t);
-          P && (d == null || d(P));
+          const S = h.current.find((U) => U.id === t);
+          S && (n == null || n(S));
         }
       }),
-      [d]
-    ), k = w(null);
-    return J(M, () => k.current, []), X(he, g, s), /* @__PURE__ */ r(
+      [n]
+    ), C = T(null);
+    return X(M, () => C.current, []), J(ye, b, s), /* @__PURE__ */ r(
       "section",
       {
-        ref: k,
-        "aria-label": N,
+        ref: C,
+        "aria-label": k,
         "data-component": "product-hub-panel",
         "data-component-id": s,
-        className: be({ surface: I, className: L }),
-        ...O,
+        className: xe({ surface: l, className: N }),
+        ...g,
         children: [
           /* @__PURE__ */ r("header", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-2xs)] ds:p-[var(--spacing-md)] ds:pb-[var(--spacing-sm)]", children: [
             /* @__PURE__ */ r("h2", { className: "ds:m-0 ds:flex ds:items-center ds:gap-[var(--spacing-xs)] ds:text-start type-title-section ds:text-[color:var(--foreground)]", children: [
-              /* @__PURE__ */ e(V, { "aria-hidden": "true", className: "ds:size-5 ds:shrink-0" }),
-              N
+              /* @__PURE__ */ e(O, { "aria-hidden": "true", className: "ds:size-5 ds:shrink-0" }),
+              k
             ] }),
-            p ? /* @__PURE__ */ e("p", { className: "ds:m-0 ds:text-start type-body-sm ds:text-[color:var(--muted-foreground)]", children: p }) : null
+            f ? /* @__PURE__ */ e("p", { className: "ds:m-0 ds:text-start type-body-sm ds:text-[color:var(--muted-foreground)]", children: f }) : null
           ] }),
-          n,
-          T ? /* @__PURE__ */ r(S, { children: [
-            /* @__PURE__ */ e(W, {}),
-            /* @__PURE__ */ e("div", { className: "ds:flex ds:justify-center ds:p-[var(--spacing-sm)]", children: /* @__PURE__ */ e(Q, { href: T, external: !0, children: c("productHubPanel.openHub", "Open in Product Hub") }) })
+          d,
+          z ? /* @__PURE__ */ r(V, { children: [
+            /* @__PURE__ */ e(_, {}),
+            /* @__PURE__ */ e("div", { className: "ds:flex ds:justify-center ds:p-[var(--spacing-sm)]", children: /* @__PURE__ */ e(A, { href: z, external: !0, children: p("productHubPanel.openHub", "Open in Product Hub") }) })
           ] }) : null
         ]
       }
     );
   }
 );
-ye.displayName = "ProductHubPanel";
+we.displayName = "ProductHubPanel";
 export {
-  ye as P,
-  ge as a,
-  ie as b,
-  he as p
+  we as P,
+  be as a,
+  le as b,
+  ye as p
 };
-//# sourceMappingURL=product-hub-panel-e6pW220e.js.map
+//# sourceMappingURL=product-hub-panel-DtU7KXxm.js.map