@designa8/vibedesign-stripe-deepseek-2-176b 0.2.2 → 0.2.4

package/README.md

@@ -1,6 +1,6 @@
 # @designa8/vibedesign-stripe-deepseek-2-176b
 
-Complete design system generated by Atoms Design, version **0.2.2**.
+Complete design system generated by Atoms Design, version **0.2.4**.
 Tokens, atoms, molecules, organisms, and templates — import from the package root;
 never hardcode visual values in consumer code.
 

package/dist/index.cjs

@@ -7274,15 +7274,30 @@ var React35 = __toESM(require("react"));
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var cn29 = (...values) => values.filter(Boolean).join(" ");
 var tabular = { fontVariantNumeric: "tabular-nums" };
+var clampPct = (value) => Math.min(100, Math.max(0, value));
+var formatSize = (size) => {
+  if (size === void 0 || size === null) return void 0;
+  if (typeof size === "string") return size.trim() || void 0;
+  if (!Number.isFinite(size) || size < 0) return void 0;
+  if (size < 1024) return `${Math.round(size)} B`;
+  const units = ["KB", "MB", "GB"];
+  let value = size / 1024;
+  let unit = 0;
+  while (value >= 1024 && unit < units.length - 1) {
+    value /= 1024;
+    unit += 1;
+  }
+  return `${value >= 10 ? Math.round(value) : Math.round(value * 10) / 10} ${units[unit]}`;
+};
 var FileUpload = React35.forwardRef(
   ({
     status = "idle",
     title = "Upload payouts file",
     hint = "CSV, up to 10 MB",
     accept = ".csv",
-    fileName = "payouts.csv",
-    fileSize = "42 KB",
-    progress = 0,
+    fileName,
+    fileSize,
+    progress,
     errorLabel = "Failed",
     actionLabel = "Upload CSV",
     onFileSelect,
@@ -7292,17 +7307,24 @@ var FileUpload = React35.forwardRef(
   }, ref) => {
     const inputRef = React35.useRef(null);
     const [dragActive, setDragActive] = React35.useState(false);
-    const resolved = status === "idle" && dragActive ? "dragging" : status;
-    const dragging = resolved === "dragging";
-    const pct = Math.min(100, Math.max(0, progress));
+    const name = typeof fileName === "string" ? fileName.trim() : "";
+    const hasFile = name.length > 0;
+    const sizeLabel = formatSize(fileSize);
+    const resolved = !hasFile && status === "idle" && dragActive ? "dragging" : status;
+    const dragging = !hasFile && resolved === "dragging";
+    const failed = resolved === "error";
+    const errorOnDropzone = failed && !hasFile;
+    const pct = progress === void 0 ? resolved === "complete" ? 100 : 0 : clampPct(progress);
+    const barPct = failed ? progress === void 0 ? 18 : Math.min(pct, 18) : pct;
     const openPicker = () => inputRef.current?.click();
-    const fileInput = /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    const fileInput = /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       Input,
       {
         ref: inputRef,
         type: "file",
         accept,
         ariaLabel: title,
+        "aria-invalid": failed || void 0,
         chrome: "none",
         className: "sr-only",
         onChange: (event) => {
@@ -7310,8 +7332,8 @@ var FileUpload = React35.forwardRef(
           if (file) onFileSelect?.(file);
         }
       }
-    );
-    if (resolved === "idle" || dragging) {
+    ) });
+    if (!hasFile) {
       return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
         "div",
         {
@@ -7331,7 +7353,7 @@ var FileUpload = React35.forwardRef(
           className: cn29(
             "flex w-full flex-col items-center gap-md rounded-lg border border-dashed px-xl py-xl text-center",
             "transition duration-200 ease-out",
-            dragging ? "border-primary bg-primary-subdued/70" : "border-hairline-strong bg-canvas",
+            dragging ? "border-primary bg-primary-subdued/70" : errorOnDropzone ? "border-semantic-error bg-canvas" : "border-hairline-strong bg-canvas",
             className
           ),
           ...rest,
@@ -7351,7 +7373,7 @@ var FileUpload = React35.forwardRef(
                       strokeWidth: 1.25,
                       className: cn29(
                         "transition-colors duration-200 ease-out",
-                        dragging ? "text-primary" : "text-ink"
+                        dragging ? "text-primary" : errorOnDropzone ? "text-semantic-error" : "text-ink"
                       )
                     }
                   ),
@@ -7363,7 +7385,7 @@ var FileUpload = React35.forwardRef(
                       strokeWidth: 2,
                       className: cn29(
                         "absolute left-1/2 top-[60%] -translate-x-1/2 -translate-y-1/2 transition-colors duration-200 ease-out",
-                        dragging ? "text-primary" : "text-ink"
+                        dragging ? "text-primary" : errorOnDropzone ? "text-semantic-error" : "text-ink"
                       )
                     }
                   )
@@ -7383,12 +7405,12 @@ var FileUpload = React35.forwardRef(
               ),
               /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-caption text-muted", children: hint })
             ] }),
-            dragging ? null : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Button, { variant: "secondary", size: "sm", onClick: openPicker, children: actionLabel })
+            dragging ? null : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Button, { variant: "secondary", size: "sm", onClick: openPicker, children: actionLabel }),
+            errorOnDropzone ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { "aria-live": "polite", className: "text-caption text-semantic-error", children: errorLabel }) : null
           ]
         }
       );
     }
-    const failed = resolved === "error";
     return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
       "div",
       {
@@ -7401,18 +7423,27 @@ var FileUpload = React35.forwardRef(
         ),
         ...rest,
         children: [
+          fileInput,
           /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-start gap-md", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon, { name: "file", size: 20, strokeWidth: 1.5, className: "mt-xxs text-ink" }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+              Icon,
+              {
+                name: "file",
+                size: 20,
+                strokeWidth: 1.5,
+                className: "mt-xxs text-ink"
+              }
+            ),
             /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "truncate text-body-md text-ink", children: fileName }),
-              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "mt-xxs text-caption text-muted", children: fileSize })
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "truncate text-body-md text-ink", children: name }),
+              sizeLabel ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "mt-xxs text-caption text-muted", children: sizeLabel }) : null
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
               Button,
               {
                 variant: "bare",
                 size: "inline",
-                "aria-label": `Remove ${fileName}`,
+                "aria-label": `Remove ${name}`,
                 onClick: onRemove,
                 className: "-mr-xs -mt-xs shrink-0 rounded-sm p-xs text-muted hover:text-ink",
                 children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon, { name: "x", size: 16, strokeWidth: 1.75 })
@@ -7424,7 +7455,7 @@ var FileUpload = React35.forwardRef(
               "div",
               {
                 role: "progressbar",
-                "aria-label": `${fileName} upload progress`,
+                "aria-label": `${name} upload progress`,
                 "aria-valuemin": 0,
                 "aria-valuemax": 100,
                 "aria-valuenow": failed ? void 0 : pct,
@@ -7438,7 +7469,7 @@ var FileUpload = React35.forwardRef(
                       "block h-full rounded-full transition-[width,background-color] duration-200 ease-out",
                       failed ? "bg-semantic-error" : "bg-primary"
                     ),
-                    style: { width: `${failed ? Math.min(pct, 18) : pct}%` }
+                    style: { width: `${barPct}%` }
                   }
                 )
               }
@@ -10633,6 +10664,7 @@ var React54 = __toESM(require("react"));
 var import_jsx_runtime54 = require("react/jsx-runtime");
 var cn46 = (...values) => values.filter(Boolean).join(" ");
 var tabular2 = { fontFeatureSettings: '"tnum"' };
+var NARROW_FEED_WIDTH = 560;
 var defaultFilters = [
   { value: "all", label: "All" },
   { value: "payouts", label: "Payouts" },
@@ -10710,9 +10742,39 @@ var defaultItems = [
     filter: "risk"
   }
 ];
+function useMergedRef(forwarded, internal) {
+  return React54.useCallback(
+    (node) => {
+      internal.current = node;
+      if (typeof forwarded === "function") forwarded(node);
+      else if (forwarded) {
+        forwarded.current = node;
+      }
+    },
+    [forwarded, internal]
+  );
+}
+function useNarrowContainer(ref) {
+  const [narrow, setNarrow] = React54.useState(false);
+  React54.useLayoutEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    const measure = (width) => setNarrow(width < NARROW_FEED_WIDTH);
+    measure(node.getBoundingClientRect().width);
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) measure(entry.contentRect.width);
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [ref]);
+  return narrow;
+}
 var NotificationFeed = React54.forwardRef(
   ({
     title = "Notification center / feed",
+    titleSize = "lg",
     filters = defaultFilters,
     items,
     filter,
@@ -10730,6 +10792,9 @@ var NotificationFeed = React54.forwardRef(
     className,
     ...rest
   }, ref) => {
+    const internalRef = React54.useRef(null);
+    const setRootRef = useMergedRef(ref, internalRef);
+    const narrow = useNarrowContainer(internalRef);
     const isFilterControlled = filter !== void 0;
     const [internalFilter, setInternalFilter] = React54.useState(defaultFilter);
     const activeFilter = isFilterControlled ? filter : internalFilter;
@@ -10751,6 +10816,8 @@ var NotificationFeed = React54.forwardRef(
     );
     const unreadCount = visible.filter((item) => item.unread).length;
     const isBare = chrome === "bare";
+    const hasTitle = title !== null;
+    const hasFilterRow = filters.length > 0 || modes.length > 0 || Boolean(actions);
     const handleItemClick = (item, event) => {
       if (!onItemClick) return;
       if (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey || event.button !== 0) {
@@ -10760,157 +10827,247 @@ var NotificationFeed = React54.forwardRef(
       event.preventDefault();
       onItemClick(item, event);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { ref, className: cn46("w-full", className), ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex w-full flex-col gap-lg", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex w-full flex-wrap items-start justify-between gap-md", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex min-w-0 items-center gap-sm", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("h2", { className: "text-display-lg text-ink", children: title }),
-          unreadCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
-            "span",
+    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      "div",
+      {
+        ref: setRootRef,
+        className: cn46("@container w-full", className),
+        ...rest,
+        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex w-full flex-col gap-lg", children: [
+          hasTitle ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex w-full flex-wrap items-start justify-between gap-md", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex min-w-0 items-center gap-sm", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                "h2",
+                {
+                  className: cn46(
+                    "text-ink",
+                    titleSize === "md" ? "text-heading-md" : "text-display-lg"
+                  ),
+                  children: title
+                }
+              ),
+              unreadCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+                "span",
+                {
+                  className: cn46(
+                    "inline-flex shrink-0 items-center justify-center rounded-full bg-primary px-xs text-body-sm text-on-primary"
+                  ),
+                  style: tabular2,
+                  children: [
+                    unreadCount,
+                    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { className: "sr-only", children: [
+                      " ",
+                      "unread",
+                      " ",
+                      unreadCount === 1 ? "notification" : "notifications"
+                    ] })
+                  ]
+                }
+              ) : null
+            ] }),
+            actions ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "ml-auto flex shrink-0 items-center gap-sm", children: actions }) : null
+          ] }) : null,
+          hasFilterRow ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+            "div",
             {
               className: cn46(
-                "inline-flex shrink-0 items-center justify-center rounded-full bg-primary px-xs text-body-sm text-on-primary"
+                "flex w-full gap-md",
+                narrow ? "flex-col" : "flex-row flex-wrap items-center justify-between"
               ),
-              style: tabular2,
               children: [
-                unreadCount,
-                /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { className: "sr-only", children: [
-                  " ",
-                  "unread ",
-                  unreadCount === 1 ? "notification" : "notifications"
-                ] })
+                filters.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                  "div",
+                  {
+                    role: "group",
+                    "aria-label": "Filter notifications",
+                    className: cn46(
+                      "min-w-0",
+                      narrow ? (
+                        // One scrollable line of pills instead of a second row.
+                        "w-full overflow-x-auto pb-xxs"
+                      ) : "overflow-visible"
+                    ),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                      "div",
+                      {
+                        className: cn46(
+                          "flex items-center gap-sm",
+                          narrow ? "w-max flex-nowrap" : "w-auto flex-wrap"
+                        ),
+                        children: filters.map((option) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                          Chip,
+                          {
+                            size: "md",
+                            appearance: "quiet",
+                            selected: option.value === activeFilter,
+                            onClick: () => selectFilter(option.value),
+                            children: option.label
+                          },
+                          option.value
+                        ))
+                      }
+                    )
+                  }
+                ) : null,
+                modes.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "w-full min-w-0 shrink-0 max-w-drawer", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                  ButtonGroup,
+                  {
+                    options: modes,
+                    value: activeMode,
+                    onValueChange: selectMode,
+                    label: "Notification mode",
+                    size: "sm"
+                  }
+                ) }) : null,
+                !hasTitle && actions ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                  "div",
+                  {
+                    className: cn46(
+                      "flex shrink-0 items-center gap-sm",
+                      narrow ? "w-full" : "ml-auto w-auto"
+                    ),
+                    children: actions
+                  }
+                ) : null
               ]
             }
-          ) : null
-        ] }),
-        actions ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "ml-auto flex shrink-0 items-center gap-sm", children: actions }) : null
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex w-full flex-wrap items-center justify-between gap-md", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-          "div",
-          {
-            role: "group",
-            "aria-label": "Filter notifications",
-            className: "flex flex-wrap items-center gap-sm",
-            children: filters.map((option) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-              Chip,
-              {
-                size: "md",
-                appearance: "quiet",
-                selected: option.value === activeFilter,
-                onClick: () => selectFilter(option.value),
-                children: option.label
-              },
-              option.value
-            ))
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "w-full shrink-0 sm:ml-auto sm:max-w-drawer", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-          ButtonGroup,
-          {
-            options: modes,
-            value: activeMode,
-            onValueChange: selectMode,
-            label: "Notification mode",
-            size: "sm"
-          }
-        ) })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-        "section",
-        {
-          "aria-label": feedLabel,
-          className: cn46(
-            "w-full",
-            isBare ? "overflow-hidden" : "overflow-hidden rounded-lg border border-hairline bg-canvas shadow-card"
-          ),
-          children: visible.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-            "p",
+          ) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+            "section",
             {
+              "aria-label": feedLabel,
               className: cn46(
-                "text-body-md text-muted",
-                isBare ? "py-xl" : "px-xxl py-xl"
+                "w-full",
+                isBare ? "overflow-hidden" : "overflow-hidden rounded-lg border border-hairline bg-canvas shadow-card"
               ),
-              children: emptyMessage
-            }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("ul", { className: "flex w-full flex-col", children: visible.map((item, index) => {
-            const isFirst = index === 0;
-            const isLast = index === visible.length - 1;
-            const needsTopRule = index > 0;
-            return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
-              "li",
-              {
-                className: cn46(
-                  "relative flex w-full items-center gap-lg py-lg pr-xl pl-xxl",
-                  needsTopRule && "border-t border-hairline"
-                ),
-                children: [
-                  item.unread ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                    "span",
-                    {
-                      "aria-hidden": "true",
-                      className: "absolute inset-y-0 left-0 w-xs bg-primary"
-                    }
-                  ) : null,
-                  /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
-                    "div",
-                    {
-                      "aria-hidden": "true",
-                      className: "relative flex w-xl shrink-0 items-center justify-center self-stretch",
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                          "span",
-                          {
-                            className: cn46(
-                              "absolute left-1/2 w-px -translate-x-1/2 bg-hairline",
-                              isFirst ? "top-1/2" : "-top-lg",
-                              isLast ? "bottom-1/2" : "-bottom-lg"
-                            )
-                          }
-                        ),
-                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                          "span",
-                          {
-                            className: cn46(
-                              "relative size-md rounded-full ring-2 ring-canvas",
-                              item.unread ? "bg-primary" : "bg-muted-soft"
-                            )
-                          }
-                        )
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-xxs", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "text-body-md font-weight-label text-ink", children: item.title }),
-                    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "text-body-md text-muted", style: tabular2, children: item.description }),
-                    item.unread ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "sr-only", children: "Unread" }) : null
-                  ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                    "p",
-                    {
-                      className: "hidden shrink-0 whitespace-nowrap text-body-md text-muted sm:block sm:min-w-[7.5rem]",
-                      style: tabular2,
-                      children: item.timestamp
-                    }
+              children: visible.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                "p",
+                {
+                  className: cn46(
+                    "text-body-md text-muted",
+                    isBare ? "py-xl" : "px-xxl py-xl"
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                    Link,
-                    {
-                      href: item.href,
-                      size: "md",
-                      underline: "always",
-                      className: "whitespace-nowrap",
-                      onClick: (event) => handleItemClick(item, event),
-                      children: item.linkLabel ?? "View details"
-                    }
-                  ) })
-                ]
-              },
-              item.id
-            );
-          }) })
-        }
-      )
-    ] }) });
+                  children: emptyMessage
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("ul", { className: "flex w-full flex-col", children: visible.map((item, index) => {
+                const isFirst = index === 0;
+                const isLast = index === visible.length - 1;
+                const needsTopRule = index > 0;
+                const timestampNode = /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                  "p",
+                  {
+                    className: cn46(
+                      "shrink-0 whitespace-nowrap text-muted",
+                      narrow ? "text-body-sm" : "text-body-md"
+                    ),
+                    style: tabular2,
+                    children: item.timestamp
+                  }
+                );
+                const actionNode = /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                  Link,
+                  {
+                    href: item.href,
+                    size: "md",
+                    underline: "always",
+                    className: "whitespace-nowrap",
+                    onClick: (event) => handleItemClick(item, event),
+                    children: item.linkLabel ?? "View details"
+                  }
+                ) });
+                return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+                  "li",
+                  {
+                    className: cn46(
+                      "relative flex w-full",
+                      narrow ? "items-start gap-md py-md pr-md pl-lg" : "items-center gap-lg py-lg pr-xl pl-xxl",
+                      needsTopRule && "border-t border-hairline"
+                    ),
+                    children: [
+                      item.unread ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                        "span",
+                        {
+                          "aria-hidden": "true",
+                          className: "absolute inset-y-0 left-0 w-xs bg-primary"
+                        }
+                      ) : null,
+                      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+                        "div",
+                        {
+                          "aria-hidden": "true",
+                          className: "relative flex w-xl shrink-0 items-center justify-center self-stretch",
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                              "span",
+                              {
+                                className: cn46(
+                                  "absolute left-1/2 w-px -translate-x-1/2 bg-hairline",
+                                  isFirst ? "top-1/2" : narrow ? "-top-md" : "-top-lg",
+                                  isLast ? "bottom-1/2" : narrow ? "-bottom-md" : "-bottom-lg"
+                                )
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                              "span",
+                              {
+                                className: cn46(
+                                  "relative size-md rounded-full ring-2 ring-canvas",
+                                  item.unread ? "bg-primary" : "bg-muted-soft"
+                                )
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+                        "div",
+                        {
+                          className: cn46(
+                            "flex min-w-0 flex-1 flex-col gap-xxs",
+                            narrow ? void 0 : "max-w-none"
+                          ),
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                              "p",
+                              {
+                                className: cn46(
+                                  "text-body-md font-weight-label text-ink",
+                                  narrow ? "truncate" : "whitespace-normal wrap-break-word"
+                                ),
+                                children: item.title
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                              "p",
+                              {
+                                className: cn46(
+                                  "text-body-md text-muted",
+                                  narrow ? "line-clamp-2" : void 0
+                                ),
+                                style: tabular2,
+                                children: item.description
+                              }
+                            ),
+                            item.unread ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "sr-only", children: "Unread" }) : null,
+                            narrow ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "mt-xxs flex w-full min-w-0 items-center justify-between gap-sm", children: [
+                              timestampNode,
+                              actionNode
+                            ] }) : null
+                          ]
+                        }
+                      ),
+                      !narrow ? timestampNode : null,
+                      !narrow ? actionNode : null
+                    ]
+                  },
+                  item.id
+                );
+              }) })
+            }
+          )
+        ] })
+      }
+    );
   }
 );
 NotificationFeed.displayName = "NotificationFeed";