@alfadocs/ui-kit-debug 0.48.0 → 0.49.0

package/dist/_chunks/product-hub-panel-CkfZBA3t.js

@@ -0,0 +1,620 @@
+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 _ } from "./separator-CYU_bGFn.js";
+import { i as W } from "./is-safe-url-DkETxeHz.js";
+import { u as X } from "./registry-nPAVE19X.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-CKEOrN37.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";
+/**
+ * @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 = [
+  ["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" }],
+  [
+    "path",
+    { 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 = {
+  id: "product-hub-tray",
+  capabilities: ["open", "close"],
+  state: {
+    unseenCount: {
+      type: "number",
+      descriptionKey: "ui.agent.productHubTray.state.unseenCount",
+      description: "Number of unseen product releases — the trigger badge count.",
+      read: (s) => s.getUnseenCount()
+    }
+  },
+  actions: {
+    open: {
+      safety: "read",
+      descriptionKey: "ui.agent.productHubTray.actions.open",
+      description: "Open the product-updates panel.",
+      invoke: (s) => {
+        s.open();
+      }
+    },
+    close: {
+      safety: "read",
+      descriptionKey: "ui.agent.productHubTray.actions.close",
+      description: "Close the product-updates panel.",
+      invoke: (s) => {
+        s.close();
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "product-hub-tray",
+      description: "Marks the ProductHubTray wrapper."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop. Required to address a specific tray from the agent."
+    },
+    item: {
+      attr: "data-update-id",
+      description: "Stable release id emitted on each rendered release row inside the tray."
+    }
+  }
+}, le = b(
+  "ds:relative ds:inline-flex ds:items-center",
+  {
+    variants: {
+      size: {
+        sm: "",
+        md: ""
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+), ce = b(
+  [
+    "ds:flex ds:flex-col",
+    "ds:bg-[var(--popover)] ds:text-[var(--popover-foreground)]",
+    "ds:border ds:border-[color:var(--card-border)]",
+    "ds:rounded-[var(--radius-md)]",
+    "ds:shadow-[var(--shadow-lg)]",
+    "ds:z-[var(--z-popover)]",
+    // Fluid below the design cap so narrow viewports keep a gutter on
+    // both sides of the panel (shadow included).
+    "ds:w-[min(24rem,calc(100vw-2*var(--spacing-md)))]",
+    // Near-full-screen sheet below `sm`; auto above, where the list's
+    // own `--product-hub-tray-max-block-size` cap governs the height.
+    "ds:h-[calc(100dvh-6rem)] ds:sm:h-auto",
+    "ds:data-[state=open]:animate-in ds:data-[state=closed]:animate-out",
+    "ds:data-[state=closed]:fade-out-0 ds:data-[state=open]:fade-in-0",
+    "ds:data-[state=closed]:zoom-out-95 ds:data-[state=open]:zoom-in-95",
+    "ds:motion-reduce:transition-none ds:motion-reduce:animate-none",
+    "ds:focus-visible:outline-none",
+    "ds:forced-colors:border-[CanvasText]"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "ds:p-[var(--spacing-xs)]",
+        md: "ds:p-[var(--spacing-sm)]"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+), ue = b(
+  [
+    // Anchored to the top-end corner of the trigger, nudged outward so
+    // the gift glyph isn't covered.
+    "ds:absolute ds:-top-[var(--spacing-xs)] ds:-end-[var(--spacing-xs)]",
+    "ds:inline-flex ds:items-center ds:justify-center",
+    // Circle at 1-2 digits; widens into a pill only for "99+".
+    "ds:min-w-[calc(var(--spacing-md)+var(--spacing-xs))] ds:h-[calc(var(--spacing-md)+var(--spacing-xs))] ds:ps-[calc(var(--spacing-xs)/1.5)] ds:pe-[calc(var(--spacing-xs)/1.5)]",
+    "ds:rounded-[var(--radius-full)]",
+    // One red unseen-count chip across every header tray — matches the
+    // platform header and the NotificationTray badge convention.
+    "ds:bg-[color:var(--destructive)] ds:text-[color:var(--destructive-foreground)]",
+    "ds:text-[length:var(--font-size-xs)] ds:font-semibold ds:leading-none",
+    "ds:pointer-events-none ds:select-none",
+    "ds:forced-colors:outline ds:forced-colors:outline-1 ds:forced-colors:outline-[CanvasText]"
+  ].join(" ")
+), pe = b(
+  [
+    "ds:relative ds:flex ds:items-start",
+    "ds:rounded-[var(--radius-sm)]",
+    "ds:text-start",
+    "ds:transition-colors ds:motion-reduce:transition-none"
+  ].join(" "),
+  {
+    variants: {
+      density: {
+        tray: "ds:gap-[var(--spacing-sm)] ds:p-[var(--spacing-sm)]",
+        panel: "ds:gap-[var(--spacing-md)] ds:p-[var(--spacing-md)]"
+      },
+      unseen: {
+        true: "ds:bg-[color:var(--accent)]/5 ds:hover:bg-[color:var(--accent)]/10",
+        false: "ds:hover:bg-[color:var(--muted)]/40"
+      }
+    },
+    defaultVariants: {
+      density: "tray",
+      unseen: !1
+    }
+  }
+), $ = b(
+  [
+    "ds:shrink-0 ds:rounded-[var(--radius-sm)] ds:object-cover",
+    // Tile backdrop so transparent / still-loading thumbnails keep a
+    // visible square instead of collapsing into whitespace.
+    "ds:bg-[color:var(--muted)]",
+    "ds:forced-colors:border ds:forced-colors:border-[CanvasText]"
+  ].join(" "),
+  {
+    variants: {
+      density: {
+        tray: "ds:size-10",
+        panel: "ds:size-12"
+      }
+    },
+    defaultVariants: {
+      density: "tray"
+    }
+  }
+), me = [
+  "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",
+  "ds:focus-visible:after:outline-[length:var(--focus-ring-width)]",
+  "ds:focus-visible:after:outline-solid",
+  "ds:focus-visible:after:outline-[color:var(--ring)]",
+  "ds:focus-visible:after:outline-offset-[length:var(--focus-ring-offset)]",
+  "ds:forced-colors:focus-visible:after:outline-[CanvasText]"
+].join(" ");
+function Y({
+  item: s,
+  density: a = "tray",
+  locale: o,
+  onActivate: i,
+  className: l,
+  ...u
+}) {
+  const { t: p } = R(), m = de(s.imageUrl), x = !!s.url && W(s.url), d = !!s.unseen, f = d ? /* @__PURE__ */ e("span", { className: "ds:sr-only", children: p("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,
+      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("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",
+              {
+                "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]"
+              }
+            ) : null,
+            x ? (
+              // 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
+            ] })
+          ] }),
+          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,
+            {
+              value: s.dateIso,
+              format: "absolute",
+              locale: o,
+              className: "ds:italic ds:text-[color:var(--muted-foreground)]"
+            }
+          ) : null
+        ] })
+      ]
+    }
+  );
+}
+function j({
+  density: s = "tray"
+}) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      "aria-hidden": "true",
+      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,
+          {
+            variant: "rounded",
+            width: s === "panel" ? "3rem" : "2.5rem",
+            height: s === "panel" ? "3rem" : "2.5rem"
+          }
+        ),
+        /* @__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%" })
+        ] })
+      ]
+    }
+  );
+}
+function Z({ children: s }) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      className: "ds:flex ds:flex-col ds:items-center ds:justify-center ds:gap-[var(--spacing-xs)] ds:p-[var(--spacing-lg)] ds:text-center type-body-sm ds:text-[color:var(--muted-foreground)]",
+      children: s
+    }
+  );
+}
+function fe(s, a) {
+  return s > 99 ? a : String(s);
+}
+function ve() {
+  const { t: s } = R();
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      className: "ds:flex ds:flex-col ds:items-center ds:justify-center ds:gap-[var(--spacing-xs)] ds:p-[var(--spacing-lg)] ds:text-center",
+      children: [
+        /* @__PURE__ */ e(
+          "span",
+          {
+            "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, {})
+          }
+        ),
+        /* @__PURE__ */ e("p", { className: "type-title-item ds:text-[color:var(--foreground)]", children: s("productHubTray.emptyTitle", "No product updates yet") }),
+        /* @__PURE__ */ e("p", { className: "type-meta ds:text-[color:var(--muted-foreground)]", children: s(
+          "productHubTray.emptyDescription",
+          "New releases and improvements will appear here."
+        ) })
+      ]
+    }
+  );
+}
+const ge = F(
+  ({
+    id: s,
+    items: a,
+    hubUrl: o,
+    loading: i = !1,
+    error: l,
+    unseenCount: u,
+    onOpenChange: p,
+    onItemActivate: m,
+    triggerLabel: x,
+    maxVisible: d = 10,
+    emptyState: f,
+    defaultOpen: I = !1,
+    locale: L,
+    align: O = "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 = x ?? (t > 0 ? n("productHubTray.triggerLabel", {
+      count: t,
+      defaultValue: "What's new, {{count}} unseen updates"
+    }) : n("productHubTray.triggerLabelNone", "What's new")), U = fe(
+      t,
+      n("productHubTray.badgeCountOverflow", "99+")
+    ), K = a.slice(0, Math.max(0, d)), A = !l && !i && K.length > 0, E = o && W(o) ? o : void 0, q = w(a);
+    q.current = a;
+    const B = w(u);
+    B.current = u;
+    const ee = G(
+      () => ({
+        open: () => g(!0),
+        close: () => g(!1),
+        getUnseenCount: () => B.current ?? q.current.filter((h) => h.unseen).length
+      }),
+      [g]
+    ), D = w(null);
+    J(T, () => D.current, []), X(ie, ee, s);
+    let y;
+    return l ? y = /* @__PURE__ */ e(Z, { children: l }) : i ? y = /* @__PURE__ */ r(S, { children: [
+      /* @__PURE__ */ e(j, {}),
+      /* @__PURE__ */ e(j, {}),
+      /* @__PURE__ */ e(j, {})
+    ] }) : K.length === 0 ? y = f ?? /* @__PURE__ */ e(ve, {}) : y = K.map((h) => /* @__PURE__ */ e(
+      Y,
+      {
+        item: h,
+        density: "tray",
+        locale: L,
+        onActivate: m
+      },
+      h.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,
+            {
+              icon: /* @__PURE__ */ e(V, {}),
+              intent: "outline",
+              size: c === "sm" ? "sm" : "md",
+              "aria-label": P,
+              "aria-haspopup": "dialog"
+            }
+          ) }),
+          t > 0 ? /* @__PURE__ */ e(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-testid": "product-hub-tray-badge",
+              className: ue(),
+              children: U
+            }
+          ) : null,
+          /* @__PURE__ */ e(C.Portal, { children: /* @__PURE__ */ r(
+            C.Content,
+            {
+              role: "dialog",
+              "aria-label": n("productHubTray.panelTitle", "What's new"),
+              side: M,
+              align: O,
+              sideOffset: 8,
+              collisionPadding: 16,
+              className: ce({ size: c }),
+              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(_, {}),
+                /* @__PURE__ */ e(
+                  "div",
+                  {
+                    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: y
+                  }
+                ),
+                E ? /* @__PURE__ */ r(S, { 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(Q, { href: E, external: !0, children: n("productHubTray.openHub", "Open in Product Hub") }) })
+                ] }) : null
+              ]
+            }
+          ) })
+        ] })
+      }
+    );
+  }
+);
+ge.displayName = "ProductHubTray";
+const he = {
+  id: "product-hub-panel",
+  capabilities: ["select_single"],
+  state: {
+    items: {
+      type: "Array<{ id: string; unseen: boolean }>",
+      descriptionKey: "ui.agent.productHubPanel.state.items",
+      description: "Currently-displayed releases. Ids + unseen flag only — no content.",
+      read: (s) => s.getItems()
+    },
+    unseenCount: {
+      type: "number",
+      descriptionKey: "ui.agent.productHubPanel.state.unseenCount",
+      description: "Number of displayed releases still marked unseen.",
+      read: (s) => s.getUnseenCount()
+    }
+  },
+  actions: {
+    select_item: {
+      safety: "read",
+      argsType: "{ id: string }",
+      descriptionKey: "ui.agent.productHubPanel.actions.selectItem",
+      description: "Activate the release with the given id (fires the host analytics hook).",
+      invoke: (s, a) => {
+        s.selectItem(a.id);
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "product-hub-panel",
+      description: "Marks the ProductHubPanel section."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop. Required to address a specific panel from the agent."
+    },
+    item: {
+      attr: "data-update-id",
+      description: "Stable release id emitted on each rendered release row inside the panel."
+    }
+  }
+}, be = b(
+  [
+    "ds:flex ds:flex-col",
+    "ds:rounded-[var(--radius-md)]",
+    "ds:border ds:border-[color:var(--card-border)] ds:[.theme-accessible_&]:border-2",
+    "ds:bg-[color:var(--card)] ds:text-[color:var(--card-foreground)]",
+    "ds:overflow-hidden",
+    "ds:forced-colors:border-[CanvasText]"
+  ].join(" "),
+  {
+    variants: {
+      surface: {
+        flat: "",
+        elevated: "ds:shadow-[var(--shadow-card)]"
+      }
+    },
+    defaultVariants: {
+      surface: "elevated"
+    }
+  }
+), xe = F(
+  ({
+    id: s,
+    items: a,
+    hubUrl: o,
+    loading: i = !1,
+    error: l,
+    title: u,
+    description: p,
+    maxVisible: m = 5,
+    emptyState: x,
+    onItemActivate: d,
+    locale: f,
+    surface: I = "elevated",
+    className: L,
+    ...O
+  }, M) => {
+    const { t: c } = R(), N = u ?? c("productHubPanel.title", "What's new"), H = a.slice(0, Math.max(0, m)), T = o && W(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 = x ?? /* @__PURE__ */ e("div", { className: "ds:p-[var(--spacing-md)]", children: /* @__PURE__ */ e(
+      se,
+      {
+        variant: "first-use",
+        size: "sm",
+        title: c("productHubPanel.emptyTitle", "No product updates yet"),
+        description: c(
+          "productHubPanel.emptyDescription",
+          "New releases and improvements will appear here."
+        )
+      }
+    ) }) : n = /* @__PURE__ */ e(
+      "div",
+      {
+        role: "list",
+        "data-max-visible": m,
+        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(
+          Y,
+          {
+            item: t,
+            density: "panel",
+            locale: f,
+            onActivate: d
+          },
+          t.id
+        ))
+      }
+    );
+    const v = w(a);
+    v.current = a;
+    const g = G(
+      () => ({
+        getItems: () => v.current.map((t) => ({ id: t.id, unseen: !!t.unseen })),
+        getUnseenCount: () => v.current.filter((t) => t.unseen).length,
+        selectItem: (t) => {
+          const P = v.current.find((U) => U.id === t);
+          P && (d == null || d(P));
+        }
+      }),
+      [d]
+    ), k = w(null);
+    return J(M, () => k.current, []), X(he, g, s), /* @__PURE__ */ r(
+      "section",
+      {
+        ref: k,
+        "aria-label": N,
+        "data-component": "product-hub-panel",
+        "data-component-id": s,
+        className: be({ surface: I, className: L }),
+        ...O,
+        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
+            ] }),
+            p ? /* @__PURE__ */ e("p", { className: "ds:m-0 ds:text-start type-body-sm ds:text-[color:var(--muted-foreground)]", children: p }) : null
+          ] }),
+          n,
+          T ? /* @__PURE__ */ r(S, { children: [
+            /* @__PURE__ */ e(_, {}),
+            /* @__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") }) })
+          ] }) : null
+        ]
+      }
+    );
+  }
+);
+xe.displayName = "ProductHubPanel";
+export {
+  xe as P,
+  ge as a,
+  ie as b,
+  he as p
+};
+//# sourceMappingURL=product-hub-panel-CkfZBA3t.js.map