@fairmint/ui 0.3.19 → 0.3.21

package/dist/components/generic/AgentSuggestion/AgentSuggestion.cjs

@@ -0,0 +1,186 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const index = require("../../../theme/index.cjs");
+const ActionIcon = require("../../primitives/ActionIcon/ActionIcon.cjs");
+const layout = require("../../primitives/layout.cjs");
+const Tooltip = require("../../primitives/Tooltip/Tooltip.cjs");
+const spacing = require("../../../theme/spacing.cjs");
+const Text = require("../../../node_modules/@mantine/core/esm/components/Text/Text.cjs");
+const MantineThemeProvider = require("../../../node_modules/@mantine/core/esm/core/MantineProvider/MantineThemeProvider/MantineThemeProvider.cjs");
+const useComputedColorScheme = require("../../../node_modules/@mantine/core/esm/core/MantineProvider/use-mantine-color-scheme/use-computed-color-scheme.cjs");
+function useCaptableAiBrandPaint() {
+  const theme = MantineThemeProvider.useMantineTheme();
+  const scheme = useComputedColorScheme.useComputedColorScheme("light");
+  const dark = scheme === "dark";
+  const blue = dark ? theme.colors.fairmintBlue[3] : index.brandColors.blue;
+  const purple = dark ? theme.colors.fairmintPurple[2] : index.brandColors.purple;
+  const markStops = dark ? ["#D0F8FF", "#AEEBFF", "#557CFF"] : ["#557CFF", theme.colors.fairmintBlue[4], index.brandColors.blue];
+  return {
+    blue,
+    purple,
+    markStops,
+    accent: `linear-gradient(180deg, ${blue} 0%, ${purple} 100%)`
+  };
+}
+const CAPTABLE_AI_MARK_PATH = "M 120 2 L 73 48 L 16 81 L 17 134 L 16 148 L 12 166 L 5 187 L 0 212 L 47 261 L 78 315 L 141 316 L 153 318 L 187 328 L 210 333 L 253 290 L 276 275 L 314 254 L 314 194 L 315 185 L 331 126 L 331 122 L 284 74 L 252 19 L 185 18 L 160 12 L 131 3 Z M 15 208 L 23 178 L 26 177 L 93 216 L 101 213 L 148 185 L 154 184 L 140 237 L 138 241 L 67 260 Z M 168 187 L 180 206 L 198 239 L 163 300 L 161 302 L 88 302 L 85 299 L 71 274 L 78 271 L 150 252 L 166 191 Z M 125 17 L 143 21 L 157 26 L 126 78 L 116 97 L 147 149 L 148 155 L 115 147 L 92 140 L 73 69 Z M 56 74 L 60 74 L 79 148 L 81 152 L 135 166 L 146 170 L 94 200 L 31 163 L 30 136 L 31 90 L 37 85 Z M 235 135 L 238 135 L 300 171 L 301 244 L 298 247 L 272 262 L 270 259 L 251 184 L 249 182 L 190 167 L 186 164 Z M 316 128 L 307 159 L 236 118 L 178 152 L 178 146 L 184 127 L 186 116 L 192 95 L 194 93 L 260 75 L 264 75 Z M 181 180 L 187 180 L 191 182 L 232 192 L 239 195 L 252 246 L 258 265 L 205 318 L 178 311 L 174 308 L 214 239 L 204 219 L 190 197 Z M 242 32 L 245 35 L 259 60 L 257 62 L 239 66 L 181 82 L 163 148 L 159 143 L 133 98 L 133 95 L 169 34 L 183 32 L 219 33 Z";
+function CaptableAiMarkIcon({ stops }) {
+  const rawId = React.useId();
+  const gradId = `agent-suggestion-captable-ai-mark-${rawId.replace(/:/g, "")}`;
+  const [start, mid, end] = stops;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: 16,
+      height: 16,
+      viewBox: "0 0 333 334",
+      fill: "none",
+      "aria-hidden": "true",
+      focusable: "false",
+      "data-captable-ai-mark": "",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: gradId, x1: "0", y1: "0", x2: "1", y2: "1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: start, "data-mark-stop": "start" }),
+          /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "48%", stopColor: mid, "data-mark-stop": "mid" }),
+          /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: end, "data-mark-stop": "end" })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            fill: `url(#${gradId})`,
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: CAPTABLE_AI_MARK_PATH
+          }
+        )
+      ]
+    }
+  );
+}
+function DismissIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 6 12 12" })
+      ]
+    }
+  );
+}
+function AgentSuggestion({
+  title,
+  message,
+  tone = "info",
+  icon,
+  onDismiss,
+  dismissLabel = "Dismiss",
+  role,
+  className,
+  style
+}) {
+  const brand = useCaptableAiBrandPaint();
+  const resolvedRole = role ?? (tone === "error" ? "alert" : "status");
+  const resolvedIcon = icon === null ? null : icon ?? /* @__PURE__ */ jsxRuntime.jsx(CaptableAiMarkIcon, { stops: brand.markStops });
+  const surface = tone === "warning" ? {
+    background: "transparent",
+    border: index.fairmintVars.colorWarningBorder,
+    accent: index.fairmintVars.colorWarningBorder
+  } : tone === "error" ? {
+    background: "transparent",
+    border: index.fairmintVars.colorErrorBorder,
+    accent: index.fairmintVars.colorErrorSolid
+  } : {
+    background: "transparent",
+    border: index.fairmintVars.colorBorderDefault,
+    accent: brand.accent
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    layout.Box,
+    {
+      className,
+      role: resolvedRole,
+      "data-tone": tone,
+      style: {
+        position: "relative",
+        display: "flex",
+        alignItems: "flex-start",
+        gap: spacing.spacing.xs,
+        backgroundColor: surface.background,
+        border: `1px solid ${surface.border}`,
+        borderRadius: 2,
+        paddingBlock: spacing.spacing.xs,
+        paddingInlineStart: spacing.spacing.sm,
+        paddingInlineEnd: spacing.spacing.xs,
+        overflow: "hidden",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          layout.Box,
+          {
+            "aria-hidden": true,
+            "data-accent": "",
+            style: {
+              position: "absolute",
+              insetBlock: 0,
+              insetInlineStart: 0,
+              width: 3,
+              background: surface.accent
+              // No own radius — container overflow:hidden + borderRadius:2 clips flush.
+            }
+          }
+        ),
+        resolvedIcon ? /* @__PURE__ */ jsxRuntime.jsx(
+          layout.Box,
+          {
+            style: {
+              display: "flex",
+              flexShrink: 0,
+              marginTop: 2,
+              width: 16,
+              height: 16
+            },
+            children: resolvedIcon
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs(layout.Stack, { gap: 4, style: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { size: "sm", fw: 500, c: index.fairmintVars.colorTextPrimary, lh: 1.3, children: title }),
+          message ? /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { size: "xs", c: index.fairmintVars.colorTextSecondary, lh: 1.4, children: message }) : null
+        ] }),
+        onDismiss ? /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { label: dismissLabel, withArrow: true, position: "top", children: /* @__PURE__ */ jsxRuntime.jsx(
+          ActionIcon.ActionIcon,
+          {
+            size: "sm",
+            variant: "subtle",
+            color: "gray",
+            "aria-label": dismissLabel,
+            onClick: onDismiss,
+            style: { flexShrink: 0, marginTop: -2 },
+            children: /* @__PURE__ */ jsxRuntime.jsx(DismissIcon, {})
+          }
+        ) }) : null
+      ]
+    }
+  );
+}
+function AgentSuggestionList({
+  children,
+  gap = spacing.spacing.xs,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(layout.Stack, { gap, className, children });
+}
+exports.AgentSuggestion = AgentSuggestion;
+exports.AgentSuggestionList = AgentSuggestionList;
+//# sourceMappingURL=AgentSuggestion.cjs.map

package/dist/components/generic/AgentSuggestion/AgentSuggestion.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentSuggestion.cjs","sources":["../../../../src/components/generic/AgentSuggestion/AgentSuggestion.tsx"],"sourcesContent":["import type { AriaRole, CSSProperties, ReactNode } from \"react\";\nimport { useId } from \"react\";\nimport { brandColors, fairmintVars, spacing } from \"../../../theme\";\nimport { ActionIcon } from \"../../primitives/ActionIcon/ActionIcon\";\nimport { Box, Stack, Text, useComputedColorScheme, useMantineTheme } from \"../../primitives/layout\";\nimport { Tooltip } from \"../../primitives/Tooltip/Tooltip\";\n\nexport type AgentSuggestionTone = \"info\" | \"warning\" | \"error\";\n\nexport interface AgentSuggestionProps {\n  /** Short title — typically a humanized agent code label. */\n  title: ReactNode;\n  /** Supporting detail from the agent. */\n  message?: ReactNode;\n  /**\n   * Semantic meaning. `error` / `warning` use severity surfaces because they\n   * map to actionable / blocking review states in CaptableAI. `info` stays\n   * CaptableAI-branded (blue→purple accent).\n   * @default \"info\"\n   */\n  tone?: AgentSuggestionTone;\n  /**\n   * Leading icon. Pass `null` to hide.\n   * When omitted, the CaptableAI brand mark is shown.\n   */\n  icon?: ReactNode | null;\n  /** When set, renders a dismiss control. */\n  onDismiss?: () => void;\n  /** Accessible label for the dismiss control. @default \"Dismiss\" */\n  dismissLabel?: string;\n  /** Override the default accessible role. Error defaults to alert; other tones use status. */\n  role?: AriaRole;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/**\n * CaptableAI brand stops for the left accent (Fairmint blue→purple) and the\n * logo-symbol mark (CaptableAI cyan→blue). Dark mode uses the official\n * CaptableAILogoSymbol gradient so the mark reads on charcoal; light mode\n * shifts toward stronger blues for contrast on white.\n */\nfunction useCaptableAiBrandPaint() {\n  const theme = useMantineTheme();\n  const scheme = useComputedColorScheme(\"light\");\n  const dark = scheme === \"dark\";\n\n  const blue = dark ? theme.colors.fairmintBlue[3] : brandColors.blue;\n  const purple = dark ? theme.colors.fairmintPurple[2] : brandColors.purple;\n\n  // From studiov2 CaptableAILogoSymbol.svg (dark / brand-on-navy).\n  const markStops: [string, string, string] = dark\n    ? [\"#D0F8FF\", \"#AEEBFF\", \"#557CFF\"]\n    : [\"#557CFF\", theme.colors.fairmintBlue[4], brandColors.blue];\n\n  return {\n    blue,\n    purple,\n    markStops,\n    accent: `linear-gradient(180deg, ${blue} 0%, ${purple} 100%)`,\n  };\n}\n\n/** CaptableAI logo symbol path — studiov2 `CaptableAILogoSymbol.svg` / `captable-ai-icon.svg`. */\nconst CAPTABLE_AI_MARK_PATH =\n  \"M 120 2 L 73 48 L 16 81 L 17 134 L 16 148 L 12 166 L 5 187 L 0 212 L 47 261 L 78 315 L 141 316 L 153 318 L 187 328 L 210 333 L 253 290 L 276 275 L 314 254 L 314 194 L 315 185 L 331 126 L 331 122 L 284 74 L 252 19 L 185 18 L 160 12 L 131 3 Z M 15 208 L 23 178 L 26 177 L 93 216 L 101 213 L 148 185 L 154 184 L 140 237 L 138 241 L 67 260 Z M 168 187 L 180 206 L 198 239 L 163 300 L 161 302 L 88 302 L 85 299 L 71 274 L 78 271 L 150 252 L 166 191 Z M 125 17 L 143 21 L 157 26 L 126 78 L 116 97 L 147 149 L 148 155 L 115 147 L 92 140 L 73 69 Z M 56 74 L 60 74 L 79 148 L 81 152 L 135 166 L 146 170 L 94 200 L 31 163 L 30 136 L 31 90 L 37 85 Z M 235 135 L 238 135 L 300 171 L 301 244 L 298 247 L 272 262 L 270 259 L 251 184 L 249 182 L 190 167 L 186 164 Z M 316 128 L 307 159 L 236 118 L 178 152 L 178 146 L 184 127 L 186 116 L 192 95 L 194 93 L 260 75 L 264 75 Z M 181 180 L 187 180 L 191 182 L 232 192 L 239 195 L 252 246 L 258 265 L 205 318 L 178 311 L 174 308 L 214 239 L 204 219 L 190 197 Z M 242 32 L 245 35 L 259 60 L 257 62 L 239 66 L 181 82 L 163 148 L 159 143 L 133 98 L 133 95 L 169 34 L 183 32 L 219 33 Z\";\n\nfunction CaptableAiMarkIcon({ stops }: { stops: [string, string, string] }) {\n  const rawId = useId();\n  const gradId = `agent-suggestion-captable-ai-mark-${rawId.replace(/:/g, \"\")}`;\n  const [start, mid, end] = stops;\n\n  return (\n    <svg\n      width={16}\n      height={16}\n      viewBox=\"0 0 333 334\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n      data-captable-ai-mark=\"\"\n    >\n      <defs>\n        <linearGradient id={gradId} x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">\n          <stop offset=\"0%\" stopColor={start} data-mark-stop=\"start\" />\n          <stop offset=\"48%\" stopColor={mid} data-mark-stop=\"mid\" />\n          <stop offset=\"100%\" stopColor={end} data-mark-stop=\"end\" />\n        </linearGradient>\n      </defs>\n      <path\n        fill={`url(#${gradId})`}\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d={CAPTABLE_AI_MARK_PATH}\n      />\n    </svg>\n  );\n}\n\nfunction DismissIcon() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M18 6 6 18\" />\n      <path d=\"m6 6 12 12\" />\n    </svg>\n  );\n}\n\n/**\n * Dense, agent-originated review note. Distinct from Alert/Banner so stacked\n * suggestions do not compete with a single page-level severity summary.\n *\n * Pattern candidate: compose a list of `AgentSuggestion` under one parent\n * Alert or Banner (\"N suggestions need review\") — never N banners.\n */\nexport function AgentSuggestion({\n  title,\n  message,\n  tone = \"info\",\n  icon,\n  onDismiss,\n  dismissLabel = \"Dismiss\",\n  role,\n  className,\n  style,\n}: AgentSuggestionProps) {\n  const brand = useCaptableAiBrandPaint();\n  const resolvedRole = role ?? (tone === \"error\" ? \"alert\" : \"status\");\n  const resolvedIcon =\n    icon === null ? null : (icon ?? <CaptableAiMarkIcon stops={brand.markStops} />);\n\n  // Warning accent shares the border token so the strip reads orange (not the\n  // red-adjacent Solid). Error keeps Solid — in dark it matches the border.\n  const surface =\n    tone === \"warning\"\n      ? {\n          background: \"transparent\",\n          border: fairmintVars.colorWarningBorder,\n          accent: fairmintVars.colorWarningBorder,\n        }\n      : tone === \"error\"\n        ? {\n            background: \"transparent\",\n            border: fairmintVars.colorErrorBorder,\n            accent: fairmintVars.colorErrorSolid,\n          }\n        : {\n            background: \"transparent\",\n            border: fairmintVars.colorBorderDefault,\n            accent: brand.accent,\n          };\n\n  return (\n    <Box\n      className={className}\n      role={resolvedRole}\n      data-tone={tone}\n      style={{\n        position: \"relative\",\n        display: \"flex\",\n        alignItems: \"flex-start\",\n        gap: spacing.xs,\n        backgroundColor: surface.background,\n        border: `1px solid ${surface.border}`,\n        borderRadius: 2,\n        paddingBlock: spacing.xs,\n        paddingInlineStart: spacing.sm,\n        paddingInlineEnd: spacing.xs,\n        overflow: \"hidden\",\n        ...style,\n      }}\n    >\n      <Box\n        aria-hidden\n        data-accent=\"\"\n        style={{\n          position: \"absolute\",\n          insetBlock: 0,\n          insetInlineStart: 0,\n          width: 3,\n          background: surface.accent,\n          // No own radius — container overflow:hidden + borderRadius:2 clips flush.\n        }}\n      />\n\n      {resolvedIcon ? (\n        <Box\n          style={{\n            display: \"flex\",\n            flexShrink: 0,\n            marginTop: 2,\n            width: 16,\n            height: 16,\n          }}\n        >\n          {resolvedIcon}\n        </Box>\n      ) : null}\n\n      <Stack gap={4} style={{ flex: 1, minWidth: 0 }}>\n        <Text size=\"sm\" fw={500} c={fairmintVars.colorTextPrimary} lh={1.3}>\n          {title}\n        </Text>\n        {message ? (\n          <Text size=\"xs\" c={fairmintVars.colorTextSecondary} lh={1.4}>\n            {message}\n          </Text>\n        ) : null}\n      </Stack>\n\n      {onDismiss ? (\n        <Tooltip label={dismissLabel} withArrow position=\"top\">\n          <ActionIcon\n            size=\"sm\"\n            variant=\"subtle\"\n            color=\"gray\"\n            aria-label={dismissLabel}\n            onClick={onDismiss}\n            style={{ flexShrink: 0, marginTop: -2 }}\n          >\n            <DismissIcon />\n          </ActionIcon>\n        </Tooltip>\n      ) : null}\n    </Box>\n  );\n}\n\n/** Convenience stack for composing multiple agent suggestions without inventing layout. */\nexport interface AgentSuggestionListProps {\n  children: ReactNode;\n  gap?: number | string;\n  className?: string;\n}\n\nexport function AgentSuggestionList({\n  children,\n  gap = spacing.xs,\n  className,\n}: AgentSuggestionListProps) {\n  return (\n    <Stack gap={gap} className={className}>\n      {children}\n    </Stack>\n  );\n}\n"],"names":["useMantineTheme","useComputedColorScheme","brandColors","useId","jsxs","jsx","fairmintVars","Box","spacing","Stack","Text","Tooltip","ActionIcon"],"mappings":"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"}

package/dist/components/generic/AgentSuggestion/AgentSuggestion.d.ts

@@ -0,0 +1,44 @@
+import { AriaRole, CSSProperties, ReactNode } from 'react';
+export type AgentSuggestionTone = "info" | "warning" | "error";
+export interface AgentSuggestionProps {
+    /** Short title — typically a humanized agent code label. */
+    title: ReactNode;
+    /** Supporting detail from the agent. */
+    message?: ReactNode;
+    /**
+     * Semantic meaning. `error` / `warning` use severity surfaces because they
+     * map to actionable / blocking review states in CaptableAI. `info` stays
+     * CaptableAI-branded (blue→purple accent).
+     * @default "info"
+     */
+    tone?: AgentSuggestionTone;
+    /**
+     * Leading icon. Pass `null` to hide.
+     * When omitted, the CaptableAI brand mark is shown.
+     */
+    icon?: ReactNode | null;
+    /** When set, renders a dismiss control. */
+    onDismiss?: () => void;
+    /** Accessible label for the dismiss control. @default "Dismiss" */
+    dismissLabel?: string;
+    /** Override the default accessible role. Error defaults to alert; other tones use status. */
+    role?: AriaRole;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Dense, agent-originated review note. Distinct from Alert/Banner so stacked
+ * suggestions do not compete with a single page-level severity summary.
+ *
+ * Pattern candidate: compose a list of `AgentSuggestion` under one parent
+ * Alert or Banner ("N suggestions need review") — never N banners.
+ */
+export declare function AgentSuggestion({ title, message, tone, icon, onDismiss, dismissLabel, role, className, style, }: AgentSuggestionProps): import("react/jsx-runtime").JSX.Element;
+/** Convenience stack for composing multiple agent suggestions without inventing layout. */
+export interface AgentSuggestionListProps {
+    children: ReactNode;
+    gap?: number | string;
+    className?: string;
+}
+export declare function AgentSuggestionList({ children, gap, className, }: AgentSuggestionListProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AgentSuggestion.d.ts.map

package/dist/components/generic/AgentSuggestion/AgentSuggestion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentSuggestion.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/AgentSuggestion/AgentSuggestion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOhE,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAE/D,MAAM,WAAW,oBAAoB;IACnC,4DAA4D;IAC5D,KAAK,EAAE,SAAS,CAAC;IACjB,wCAAwC;IACxC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,mEAAmE;IACnE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6FAA6F;IAC7F,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAoFD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,OAAO,EACP,IAAa,EACb,IAAI,EACJ,SAAS,EACT,YAAwB,EACxB,IAAI,EACJ,SAAS,EACT,KAAK,GACN,EAAE,oBAAoB,2CAqGtB;AAED,2FAA2F;AAC3F,MAAM,WAAW,wBAAwB;IACvC,QAAQ,EAAE,SAAS,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,GAAgB,EAChB,SAAS,GACV,EAAE,wBAAwB,2CAM1B"}

package/dist/components/generic/AgentSuggestion/AgentSuggestion.js

@@ -0,0 +1,186 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useId } from "react";
+import { fairmintVars, brandColors } from "../../../theme/index.js";
+import { ActionIcon } from "../../primitives/ActionIcon/ActionIcon.js";
+import { Box, Stack } from "../../primitives/layout.js";
+import { Tooltip } from "../../primitives/Tooltip/Tooltip.js";
+import { spacing } from "../../../theme/spacing.js";
+import { Text } from "../../../node_modules/@mantine/core/esm/components/Text/Text.js";
+import { useMantineTheme } from "../../../node_modules/@mantine/core/esm/core/MantineProvider/MantineThemeProvider/MantineThemeProvider.js";
+import { useComputedColorScheme } from "../../../node_modules/@mantine/core/esm/core/MantineProvider/use-mantine-color-scheme/use-computed-color-scheme.js";
+function useCaptableAiBrandPaint() {
+  const theme = useMantineTheme();
+  const scheme = useComputedColorScheme("light");
+  const dark = scheme === "dark";
+  const blue = dark ? theme.colors.fairmintBlue[3] : brandColors.blue;
+  const purple = dark ? theme.colors.fairmintPurple[2] : brandColors.purple;
+  const markStops = dark ? ["#D0F8FF", "#AEEBFF", "#557CFF"] : ["#557CFF", theme.colors.fairmintBlue[4], brandColors.blue];
+  return {
+    blue,
+    purple,
+    markStops,
+    accent: `linear-gradient(180deg, ${blue} 0%, ${purple} 100%)`
+  };
+}
+const CAPTABLE_AI_MARK_PATH = "M 120 2 L 73 48 L 16 81 L 17 134 L 16 148 L 12 166 L 5 187 L 0 212 L 47 261 L 78 315 L 141 316 L 153 318 L 187 328 L 210 333 L 253 290 L 276 275 L 314 254 L 314 194 L 315 185 L 331 126 L 331 122 L 284 74 L 252 19 L 185 18 L 160 12 L 131 3 Z M 15 208 L 23 178 L 26 177 L 93 216 L 101 213 L 148 185 L 154 184 L 140 237 L 138 241 L 67 260 Z M 168 187 L 180 206 L 198 239 L 163 300 L 161 302 L 88 302 L 85 299 L 71 274 L 78 271 L 150 252 L 166 191 Z M 125 17 L 143 21 L 157 26 L 126 78 L 116 97 L 147 149 L 148 155 L 115 147 L 92 140 L 73 69 Z M 56 74 L 60 74 L 79 148 L 81 152 L 135 166 L 146 170 L 94 200 L 31 163 L 30 136 L 31 90 L 37 85 Z M 235 135 L 238 135 L 300 171 L 301 244 L 298 247 L 272 262 L 270 259 L 251 184 L 249 182 L 190 167 L 186 164 Z M 316 128 L 307 159 L 236 118 L 178 152 L 178 146 L 184 127 L 186 116 L 192 95 L 194 93 L 260 75 L 264 75 Z M 181 180 L 187 180 L 191 182 L 232 192 L 239 195 L 252 246 L 258 265 L 205 318 L 178 311 L 174 308 L 214 239 L 204 219 L 190 197 Z M 242 32 L 245 35 L 259 60 L 257 62 L 239 66 L 181 82 L 163 148 L 159 143 L 133 98 L 133 95 L 169 34 L 183 32 L 219 33 Z";
+function CaptableAiMarkIcon({ stops }) {
+  const rawId = useId();
+  const gradId = `agent-suggestion-captable-ai-mark-${rawId.replace(/:/g, "")}`;
+  const [start, mid, end] = stops;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: 16,
+      height: 16,
+      viewBox: "0 0 333 334",
+      fill: "none",
+      "aria-hidden": "true",
+      focusable: "false",
+      "data-captable-ai-mark": "",
+      children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradId, x1: "0", y1: "0", x2: "1", y2: "1", children: [
+          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: start, "data-mark-stop": "start" }),
+          /* @__PURE__ */ jsx("stop", { offset: "48%", stopColor: mid, "data-mark-stop": "mid" }),
+          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: end, "data-mark-stop": "end" })
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: `url(#${gradId})`,
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: CAPTABLE_AI_MARK_PATH
+          }
+        )
+      ]
+    }
+  );
+}
+function DismissIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+      ]
+    }
+  );
+}
+function AgentSuggestion({
+  title,
+  message,
+  tone = "info",
+  icon,
+  onDismiss,
+  dismissLabel = "Dismiss",
+  role,
+  className,
+  style
+}) {
+  const brand = useCaptableAiBrandPaint();
+  const resolvedRole = role ?? (tone === "error" ? "alert" : "status");
+  const resolvedIcon = icon === null ? null : icon ?? /* @__PURE__ */ jsx(CaptableAiMarkIcon, { stops: brand.markStops });
+  const surface = tone === "warning" ? {
+    background: "transparent",
+    border: fairmintVars.colorWarningBorder,
+    accent: fairmintVars.colorWarningBorder
+  } : tone === "error" ? {
+    background: "transparent",
+    border: fairmintVars.colorErrorBorder,
+    accent: fairmintVars.colorErrorSolid
+  } : {
+    background: "transparent",
+    border: fairmintVars.colorBorderDefault,
+    accent: brand.accent
+  };
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className,
+      role: resolvedRole,
+      "data-tone": tone,
+      style: {
+        position: "relative",
+        display: "flex",
+        alignItems: "flex-start",
+        gap: spacing.xs,
+        backgroundColor: surface.background,
+        border: `1px solid ${surface.border}`,
+        borderRadius: 2,
+        paddingBlock: spacing.xs,
+        paddingInlineStart: spacing.sm,
+        paddingInlineEnd: spacing.xs,
+        overflow: "hidden",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            "aria-hidden": true,
+            "data-accent": "",
+            style: {
+              position: "absolute",
+              insetBlock: 0,
+              insetInlineStart: 0,
+              width: 3,
+              background: surface.accent
+              // No own radius — container overflow:hidden + borderRadius:2 clips flush.
+            }
+          }
+        ),
+        resolvedIcon ? /* @__PURE__ */ jsx(
+          Box,
+          {
+            style: {
+              display: "flex",
+              flexShrink: 0,
+              marginTop: 2,
+              width: 16,
+              height: 16
+            },
+            children: resolvedIcon
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs(Stack, { gap: 4, style: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, c: fairmintVars.colorTextPrimary, lh: 1.3, children: title }),
+          message ? /* @__PURE__ */ jsx(Text, { size: "xs", c: fairmintVars.colorTextSecondary, lh: 1.4, children: message }) : null
+        ] }),
+        onDismiss ? /* @__PURE__ */ jsx(Tooltip, { label: dismissLabel, withArrow: true, position: "top", children: /* @__PURE__ */ jsx(
+          ActionIcon,
+          {
+            size: "sm",
+            variant: "subtle",
+            color: "gray",
+            "aria-label": dismissLabel,
+            onClick: onDismiss,
+            style: { flexShrink: 0, marginTop: -2 },
+            children: /* @__PURE__ */ jsx(DismissIcon, {})
+          }
+        ) }) : null
+      ]
+    }
+  );
+}
+function AgentSuggestionList({
+  children,
+  gap = spacing.xs,
+  className
+}) {
+  return /* @__PURE__ */ jsx(Stack, { gap, className, children });
+}
+export {
+  AgentSuggestion,
+  AgentSuggestionList
+};
+//# sourceMappingURL=AgentSuggestion.js.map

package/dist/components/generic/AgentSuggestion/AgentSuggestion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentSuggestion.js","sources":["../../../../src/components/generic/AgentSuggestion/AgentSuggestion.tsx"],"sourcesContent":["import type { AriaRole, CSSProperties, ReactNode } from \"react\";\nimport { useId } from \"react\";\nimport { brandColors, fairmintVars, spacing } from \"../../../theme\";\nimport { ActionIcon } from \"../../primitives/ActionIcon/ActionIcon\";\nimport { Box, Stack, Text, useComputedColorScheme, useMantineTheme } from \"../../primitives/layout\";\nimport { Tooltip } from \"../../primitives/Tooltip/Tooltip\";\n\nexport type AgentSuggestionTone = \"info\" | \"warning\" | \"error\";\n\nexport interface AgentSuggestionProps {\n  /** Short title — typically a humanized agent code label. */\n  title: ReactNode;\n  /** Supporting detail from the agent. */\n  message?: ReactNode;\n  /**\n   * Semantic meaning. `error` / `warning` use severity surfaces because they\n   * map to actionable / blocking review states in CaptableAI. `info` stays\n   * CaptableAI-branded (blue→purple accent).\n   * @default \"info\"\n   */\n  tone?: AgentSuggestionTone;\n  /**\n   * Leading icon. Pass `null` to hide.\n   * When omitted, the CaptableAI brand mark is shown.\n   */\n  icon?: ReactNode | null;\n  /** When set, renders a dismiss control. */\n  onDismiss?: () => void;\n  /** Accessible label for the dismiss control. @default \"Dismiss\" */\n  dismissLabel?: string;\n  /** Override the default accessible role. Error defaults to alert; other tones use status. */\n  role?: AriaRole;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/**\n * CaptableAI brand stops for the left accent (Fairmint blue→purple) and the\n * logo-symbol mark (CaptableAI cyan→blue). Dark mode uses the official\n * CaptableAILogoSymbol gradient so the mark reads on charcoal; light mode\n * shifts toward stronger blues for contrast on white.\n */\nfunction useCaptableAiBrandPaint() {\n  const theme = useMantineTheme();\n  const scheme = useComputedColorScheme(\"light\");\n  const dark = scheme === \"dark\";\n\n  const blue = dark ? theme.colors.fairmintBlue[3] : brandColors.blue;\n  const purple = dark ? theme.colors.fairmintPurple[2] : brandColors.purple;\n\n  // From studiov2 CaptableAILogoSymbol.svg (dark / brand-on-navy).\n  const markStops: [string, string, string] = dark\n    ? [\"#D0F8FF\", \"#AEEBFF\", \"#557CFF\"]\n    : [\"#557CFF\", theme.colors.fairmintBlue[4], brandColors.blue];\n\n  return {\n    blue,\n    purple,\n    markStops,\n    accent: `linear-gradient(180deg, ${blue} 0%, ${purple} 100%)`,\n  };\n}\n\n/** CaptableAI logo symbol path — studiov2 `CaptableAILogoSymbol.svg` / `captable-ai-icon.svg`. */\nconst CAPTABLE_AI_MARK_PATH =\n  \"M 120 2 L 73 48 L 16 81 L 17 134 L 16 148 L 12 166 L 5 187 L 0 212 L 47 261 L 78 315 L 141 316 L 153 318 L 187 328 L 210 333 L 253 290 L 276 275 L 314 254 L 314 194 L 315 185 L 331 126 L 331 122 L 284 74 L 252 19 L 185 18 L 160 12 L 131 3 Z M 15 208 L 23 178 L 26 177 L 93 216 L 101 213 L 148 185 L 154 184 L 140 237 L 138 241 L 67 260 Z M 168 187 L 180 206 L 198 239 L 163 300 L 161 302 L 88 302 L 85 299 L 71 274 L 78 271 L 150 252 L 166 191 Z M 125 17 L 143 21 L 157 26 L 126 78 L 116 97 L 147 149 L 148 155 L 115 147 L 92 140 L 73 69 Z M 56 74 L 60 74 L 79 148 L 81 152 L 135 166 L 146 170 L 94 200 L 31 163 L 30 136 L 31 90 L 37 85 Z M 235 135 L 238 135 L 300 171 L 301 244 L 298 247 L 272 262 L 270 259 L 251 184 L 249 182 L 190 167 L 186 164 Z M 316 128 L 307 159 L 236 118 L 178 152 L 178 146 L 184 127 L 186 116 L 192 95 L 194 93 L 260 75 L 264 75 Z M 181 180 L 187 180 L 191 182 L 232 192 L 239 195 L 252 246 L 258 265 L 205 318 L 178 311 L 174 308 L 214 239 L 204 219 L 190 197 Z M 242 32 L 245 35 L 259 60 L 257 62 L 239 66 L 181 82 L 163 148 L 159 143 L 133 98 L 133 95 L 169 34 L 183 32 L 219 33 Z\";\n\nfunction CaptableAiMarkIcon({ stops }: { stops: [string, string, string] }) {\n  const rawId = useId();\n  const gradId = `agent-suggestion-captable-ai-mark-${rawId.replace(/:/g, \"\")}`;\n  const [start, mid, end] = stops;\n\n  return (\n    <svg\n      width={16}\n      height={16}\n      viewBox=\"0 0 333 334\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n      data-captable-ai-mark=\"\"\n    >\n      <defs>\n        <linearGradient id={gradId} x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">\n          <stop offset=\"0%\" stopColor={start} data-mark-stop=\"start\" />\n          <stop offset=\"48%\" stopColor={mid} data-mark-stop=\"mid\" />\n          <stop offset=\"100%\" stopColor={end} data-mark-stop=\"end\" />\n        </linearGradient>\n      </defs>\n      <path\n        fill={`url(#${gradId})`}\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d={CAPTABLE_AI_MARK_PATH}\n      />\n    </svg>\n  );\n}\n\nfunction DismissIcon() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M18 6 6 18\" />\n      <path d=\"m6 6 12 12\" />\n    </svg>\n  );\n}\n\n/**\n * Dense, agent-originated review note. Distinct from Alert/Banner so stacked\n * suggestions do not compete with a single page-level severity summary.\n *\n * Pattern candidate: compose a list of `AgentSuggestion` under one parent\n * Alert or Banner (\"N suggestions need review\") — never N banners.\n */\nexport function AgentSuggestion({\n  title,\n  message,\n  tone = \"info\",\n  icon,\n  onDismiss,\n  dismissLabel = \"Dismiss\",\n  role,\n  className,\n  style,\n}: AgentSuggestionProps) {\n  const brand = useCaptableAiBrandPaint();\n  const resolvedRole = role ?? (tone === \"error\" ? \"alert\" : \"status\");\n  const resolvedIcon =\n    icon === null ? null : (icon ?? <CaptableAiMarkIcon stops={brand.markStops} />);\n\n  // Warning accent shares the border token so the strip reads orange (not the\n  // red-adjacent Solid). Error keeps Solid — in dark it matches the border.\n  const surface =\n    tone === \"warning\"\n      ? {\n          background: \"transparent\",\n          border: fairmintVars.colorWarningBorder,\n          accent: fairmintVars.colorWarningBorder,\n        }\n      : tone === \"error\"\n        ? {\n            background: \"transparent\",\n            border: fairmintVars.colorErrorBorder,\n            accent: fairmintVars.colorErrorSolid,\n          }\n        : {\n            background: \"transparent\",\n            border: fairmintVars.colorBorderDefault,\n            accent: brand.accent,\n          };\n\n  return (\n    <Box\n      className={className}\n      role={resolvedRole}\n      data-tone={tone}\n      style={{\n        position: \"relative\",\n        display: \"flex\",\n        alignItems: \"flex-start\",\n        gap: spacing.xs,\n        backgroundColor: surface.background,\n        border: `1px solid ${surface.border}`,\n        borderRadius: 2,\n        paddingBlock: spacing.xs,\n        paddingInlineStart: spacing.sm,\n        paddingInlineEnd: spacing.xs,\n        overflow: \"hidden\",\n        ...style,\n      }}\n    >\n      <Box\n        aria-hidden\n        data-accent=\"\"\n        style={{\n          position: \"absolute\",\n          insetBlock: 0,\n          insetInlineStart: 0,\n          width: 3,\n          background: surface.accent,\n          // No own radius — container overflow:hidden + borderRadius:2 clips flush.\n        }}\n      />\n\n      {resolvedIcon ? (\n        <Box\n          style={{\n            display: \"flex\",\n            flexShrink: 0,\n            marginTop: 2,\n            width: 16,\n            height: 16,\n          }}\n        >\n          {resolvedIcon}\n        </Box>\n      ) : null}\n\n      <Stack gap={4} style={{ flex: 1, minWidth: 0 }}>\n        <Text size=\"sm\" fw={500} c={fairmintVars.colorTextPrimary} lh={1.3}>\n          {title}\n        </Text>\n        {message ? (\n          <Text size=\"xs\" c={fairmintVars.colorTextSecondary} lh={1.4}>\n            {message}\n          </Text>\n        ) : null}\n      </Stack>\n\n      {onDismiss ? (\n        <Tooltip label={dismissLabel} withArrow position=\"top\">\n          <ActionIcon\n            size=\"sm\"\n            variant=\"subtle\"\n            color=\"gray\"\n            aria-label={dismissLabel}\n            onClick={onDismiss}\n            style={{ flexShrink: 0, marginTop: -2 }}\n          >\n            <DismissIcon />\n          </ActionIcon>\n        </Tooltip>\n      ) : null}\n    </Box>\n  );\n}\n\n/** Convenience stack for composing multiple agent suggestions without inventing layout. */\nexport interface AgentSuggestionListProps {\n  children: ReactNode;\n  gap?: number | string;\n  className?: string;\n}\n\nexport function AgentSuggestionList({\n  children,\n  gap = spacing.xs,\n  className,\n}: AgentSuggestionListProps) {\n  return (\n    <Stack gap={gap} className={className}>\n      {children}\n    </Stack>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/generic/NotificationRow/NotificationRow.cjs

@@ -0,0 +1,169 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const index = require("../../../theme/index.cjs");
+const colors = require("../../../theme/colors.cjs");
+const ActionIcon = require("../../primitives/ActionIcon/ActionIcon.cjs");
+const Badge = require("../../primitives/Badge/Badge.cjs");
+const layout = require("../../primitives/layout.cjs");
+const ColorDot = require("../ColorDot/ColorDot.cjs");
+const Group = require("../../../node_modules/@mantine/core/esm/components/Group/Group.cjs");
+const Text = require("../../../node_modules/@mantine/core/esm/components/Text/Text.cjs");
+const SEVERITY_BADGE_COLORS = {
+  critical: colors.colors.error,
+  high: colors.colors.warning,
+  medium: colors.colors.info,
+  low: colors.colors.neutral,
+  info: colors.colors.info,
+  success: colors.colors.success,
+  resolved: colors.colors.success
+};
+const DEFAULT_SEVERITY_LABELS = {
+  critical: "Critical",
+  high: "High",
+  medium: "Medium",
+  low: "Low",
+  info: "Info",
+  success: "Success",
+  resolved: "Completed"
+};
+function DefaultCheckIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" })
+    }
+  );
+}
+function DefaultMailIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m22 6-10 7L2 6" })
+      ]
+    }
+  );
+}
+function NotificationRow({
+  ariaLabel,
+  body,
+  className,
+  isUnread = false,
+  onToggleRead,
+  severity = "medium",
+  severityLabel,
+  timestamp,
+  title,
+  toggleReadLabel,
+  variant = "standalone",
+  withDivider = true
+}) {
+  const resolvedSeverityLabel = severityLabel ?? DEFAULT_SEVERITY_LABELS[severity];
+  const resolvedToggleReadLabel = toggleReadLabel ?? (isUnread ? `Mark read: ${title}` : `Mark unread: ${title}`);
+  const readStateLabel = isUnread ? "Unread notification" : "Read notification";
+  const resolvedAriaLabel = ariaLabel ?? (timestamp ? `${title}. ${resolvedSeverityLabel}. ${readStateLabel}. ${timestamp}` : `${title}. ${resolvedSeverityLabel}. ${readStateLabel}`);
+  const isList = variant === "list";
+  const badgeColor = SEVERITY_BADGE_COLORS[severity];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    layout.Box,
+    {
+      "aria-label": resolvedAriaLabel,
+      role: "group",
+      className,
+      "data-severity": severity,
+      "data-testid": "notification-row",
+      "data-unread": isUnread || void 0,
+      "data-variant": variant,
+      px: "md",
+      py: "sm",
+      w: "100%",
+      style: {
+        backgroundColor: isUnread ? index.fairmintVars.colorBgSurface : index.fairmintVars.colorBgSurfaceSecondary,
+        border: isList ? "none" : `1px solid ${index.fairmintVars.colorBorderDefault}`,
+        borderBottom: isList && withDivider ? `1px solid ${index.fairmintVars.colorBorderDefault}` : void 0,
+        borderRadius: isList ? 0 : 10
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(Group.Group, { align: "flex-start", gap: "sm", justify: "space-between", wrap: "nowrap", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Group.Group, { align: "flex-start", gap: "sm", miw: 0, wrap: "nowrap", style: { flex: 1 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            layout.Box,
+            {
+              "aria-hidden": true,
+              mt: 6,
+              style: {
+                flexShrink: 0,
+                width: 8,
+                display: "flex",
+                justifyContent: "center"
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                ColorDot.ColorDot,
+                {
+                  color: isUnread ? index.fairmintVars.colorBrandPrimary : index.fairmintVars.colorBorderDisabled,
+                  size: 8
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(layout.Stack, { gap: 4, miw: 0, style: { flex: 1 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Badge.Badge, { color: badgeColor, size: "xs", variant: "light", children: resolvedSeverityLabel }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Text.Text,
+              {
+                fw: isUnread ? 600 : 500,
+                lineClamp: 2,
+                size: "sm",
+                c: index.fairmintVars.colorTextPrimary,
+                style: { minWidth: 0 },
+                children: title
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Text.Text,
+              {
+                c: index.fairmintVars.colorTextSecondary,
+                lineClamp: 3,
+                size: "sm",
+                style: { minWidth: 0 },
+                children: body
+              }
+            )
+          ] })
+        ] }),
+        onToggleRead ? /* @__PURE__ */ jsxRuntime.jsx(
+          ActionIcon.ActionIcon,
+          {
+            "aria-label": resolvedToggleReadLabel,
+            color: colors.colors.neutral,
+            onClick: onToggleRead,
+            size: "md",
+            variant: "subtle",
+            children: isUnread ? /* @__PURE__ */ jsxRuntime.jsx(DefaultCheckIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(DefaultMailIcon, {})
+          }
+        ) : null
+      ] })
+    }
+  );
+}
+exports.NotificationRow = NotificationRow;
+//# sourceMappingURL=NotificationRow.cjs.map