@handled-ai/design-system 0.18.36 → 0.18.38

package/dist/charts/chart.d.ts

@@ -48,7 +48,7 @@ declare function ChartTooltipContent({ active, payload, className, indicator, hi
     labelClassName?: string;
     color?: string;
 }): React.JSX.Element | null;
-declare const ChartLegend: typeof RechartsPrimitive.Legend;
+declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
 type LegendPayloadItem = {
     value?: string;
     dataKey?: string;

package/dist/components/draft-feedback-inline.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 interface DraftFeedbackInlineProps {
-    initialDirection?: "up" | "down" | null;
+    initialDirection?: 'up' | 'down' | null;
     onRegenerateRequest?: (pills: string[], detail: string) => void;
     onSubmitFeedback?: (type: "up" | "down", pills: string[], detail: string) => void;
     onDiscardRequest?: (pills: string[], detail: string) => void;

package/dist/components/draft-feedback-inline.js

@@ -53,7 +53,7 @@ function DraftFeedbackInline({
   }, [thumbState, selectedPills, detailText, onDiscardRequest]);
   if (noted) {
     return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 py-1 animate-in fade-in slide-in-from-top-1 duration-200", children: [
-      /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5 text-foreground" }),
+      /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5 text-emerald-500" }),
       /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Feedback recorded" })
     ] });
   }
@@ -63,7 +63,7 @@ function DraftFeedbackInline({
       /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-indigo-600 dark:text-indigo-400", children: "Regenerating draft..." })
     ] }) });
   }
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-0", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground font-medium", children: "How's this draft?" }),
       /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
@@ -75,8 +75,8 @@ function DraftFeedbackInline({
               setSelectedPills([]);
               setDetailText("");
             },
-            className: `p-1.5 rounded transition-colors ${thumbState === "up" ? "bg-muted text-foreground" : "hover:bg-muted text-muted-foreground hover:text-foreground"}`,
-            children: /* @__PURE__ */ jsx(ThumbsUp, { className: "w-4 h-4" })
+            className: `p-1.5 rounded transition-colors ${thumbState === "up" ? "bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400" : "hover:bg-muted text-muted-foreground hover:text-foreground"}`,
+            children: /* @__PURE__ */ jsx(ThumbsUp, { className: "w-4 h-4", fill: thumbState === "up" ? "currentColor" : "none" })
           }
         ),
         /* @__PURE__ */ jsx(
@@ -87,20 +87,20 @@ function DraftFeedbackInline({
               setSelectedPills([]);
               setDetailText("");
             },
-            className: `p-1.5 rounded transition-colors ${thumbState === "down" ? "bg-muted text-foreground" : "hover:bg-muted text-muted-foreground hover:text-foreground"}`,
-            children: /* @__PURE__ */ jsx(ThumbsDown, { className: "w-4 h-4" })
+            className: `p-1.5 rounded transition-colors ${thumbState === "down" ? "bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400" : "hover:bg-muted text-muted-foreground hover:text-foreground"}`,
+            children: /* @__PURE__ */ jsx(ThumbsDown, { className: "w-4 h-4", fill: thumbState === "down" ? "currentColor" : "none" })
           }
         )
       ] })
     ] }),
-    thumbState && /* @__PURE__ */ jsxs("div", { className: "pt-2 space-y-2.5 animate-in fade-in slide-in-from-top-2 duration-200", children: [
+    thumbState && /* @__PURE__ */ jsxs("div", { className: "pt-3 space-y-3 animate-in fade-in slide-in-from-top-2 duration-200", children: [
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground mb-2 block font-medium", children: thumbState === "up" ? "What worked well?" : "What needs improvement?" }),
-        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: (thumbState === "up" ? positivePills : negativePills).map((pill) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: (thumbState === "up" ? positivePills : negativePills).map((pill) => /* @__PURE__ */ jsx(
           "button",
           {
             onClick: () => togglePill(pill),
-            className: `px-3 py-1.5 rounded-full text-[11px] font-medium border transition-colors ${selectedPills.includes(pill) ? thumbState === "up" ? "bg-muted text-foreground border-border" : "bg-red-50 text-red-700 border-red-200 dark:bg-red-950/30 dark:text-red-300 dark:border-red-800" : "bg-background text-muted-foreground border-border hover:bg-muted/50 hover:text-foreground"}`,
+            className: `px-2.5 py-1 rounded-full text-[11px] font-medium border transition-colors ${selectedPills.includes(pill) ? thumbState === "up" ? "bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-300 dark:border-emerald-800" : "bg-red-100 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-300 dark:border-red-800" : "bg-background text-muted-foreground border-border hover:bg-muted/50 hover:text-foreground"}`,
             children: pill
           },
           pill
@@ -115,7 +115,7 @@ function DraftFeedbackInline({
           className: "w-full text-xs bg-background border border-border rounded-md px-2.5 py-2 text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-1 focus:ring-indigo-500/50 focus:border-indigo-500/50 resize-none min-h-[60px]"
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2.5 pt-2", children: thumbState === "down" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 pt-1", children: thumbState === "down" ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs(
           "button",
           {

package/dist/components/draft-feedback-inline.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/draft-feedback-inline.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ThumbsUp,\n  ThumbsDown,\n  Check,\n  RefreshCw,\n} from \"lucide-react\"\n\n// ---------------------------------------------------------------------------\n// DraftFeedbackInline\n// ---------------------------------------------------------------------------\n\nconst positivePills = [\"Tone\", \"Personalization\", \"Length\", \"CTA\", \"Other\"]\nconst negativePills = [\"Too formal\", \"Too casual\", \"Too long\", \"Missing context\", \"Wrong angle\", \"Factual error\", \"Other\"]\n\nexport interface DraftFeedbackInlineProps {\n  initialDirection?: \"up\" | \"down\" | null\n  onRegenerateRequest?: (pills: string[], detail: string) => void\n  onSubmitFeedback?: (type: \"up\" | \"down\", pills: string[], detail: string) => void\n  onDiscardRequest?: (pills: string[], detail: string) => void\n}\n\nexport function DraftFeedbackInline({\n  initialDirection,\n  onRegenerateRequest,\n  onSubmitFeedback,\n  onDiscardRequest,\n}: DraftFeedbackInlineProps) {\n  const [thumbState, setThumbState] = React.useState<\"up\" | \"down\" | null>(initialDirection ?? null)\n  const [selectedPills, setSelectedPills] = React.useState<string[]>([])\n  const [detailText, setDetailText] = React.useState(\"\")\n  const [noted, setNoted] = React.useState(false)\n  const [regenerated, setRegenerated] = React.useState(false)\n\n  const togglePill = React.useCallback((pill: string) => {\n    setSelectedPills((prev) => (prev.includes(pill) ? prev.filter((p) => p !== pill) : [...prev, pill]))\n  }, [])\n\n  const handleSubmit = React.useCallback(() => {\n    if (!thumbState) return\n    onSubmitFeedback?.(thumbState, selectedPills, detailText)\n    setNoted(true)\n    setTimeout(() => {\n      setThumbState(null)\n      setSelectedPills([])\n      setDetailText(\"\")\n      setNoted(false)\n    }, 3000)\n  }, [thumbState, selectedPills, detailText, onSubmitFeedback])\n\n  const handleRegenerate = React.useCallback(() => {\n    if (!thumbState) return\n    onRegenerateRequest?.(selectedPills, detailText)\n    setRegenerated(true)\n    setTimeout(() => {\n      setThumbState(null)\n      setSelectedPills([])\n      setDetailText(\"\")\n      setRegenerated(false)\n    }, 3000)\n  }, [thumbState, selectedPills, detailText, onRegenerateRequest])\n\n  const handleDiscard = React.useCallback(() => {\n    if (!thumbState) return\n    onDiscardRequest?.(selectedPills, detailText)\n  }, [thumbState, selectedPills, detailText, onDiscardRequest])\n\n  if (noted) {\n    return (\n      <div className=\"flex items-center gap-1.5 py-1 animate-in fade-in slide-in-from-top-1 duration-200\">\n        <Check className=\"w-3.5 h-3.5 text-foreground\" />\n        <span className=\"text-xs text-muted-foreground\">Feedback recorded</span>\n      </div>\n    )\n  }\n\n  if (regenerated) {\n    return (\n      <div className=\"py-2 animate-in fade-in slide-in-from-top-1 duration-200\">\n        <div className=\"flex items-center gap-2 px-3 py-2 rounded-md bg-indigo-50 dark:bg-indigo-950/30 border border-indigo-200 dark:border-indigo-800\">\n          <RefreshCw className=\"w-3 h-3 text-indigo-500 animate-spin\" />\n          <span className=\"text-xs font-medium text-indigo-600 dark:text-indigo-400\">Regenerating draft...</span>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"space-y-2\">\n      <div className=\"flex items-center justify-between\">\n        <span className=\"text-sm text-foreground font-medium\">How&apos;s this draft?</span>\n        <div className=\"flex gap-1\">\n          <button\n            onClick={() => {\n              setThumbState(thumbState === \"up\" ? null : \"up\")\n              setSelectedPills([])\n              setDetailText(\"\")\n            }}\n            className={`p-1.5 rounded transition-colors ${\n              thumbState === \"up\"\n                ? \"bg-muted text-foreground\"\n                : \"hover:bg-muted text-muted-foreground hover:text-foreground\"\n            }`}\n          >\n            <ThumbsUp className=\"w-4 h-4\" />\n          </button>\n          <button\n            onClick={() => {\n              setThumbState(thumbState === \"down\" ? null : \"down\")\n              setSelectedPills([])\n              setDetailText(\"\")\n            }}\n            className={`p-1.5 rounded transition-colors ${\n              thumbState === \"down\"\n                ? \"bg-muted text-foreground\"\n                : \"hover:bg-muted text-muted-foreground hover:text-foreground\"\n            }`}\n          >\n            <ThumbsDown className=\"w-4 h-4\" />\n          </button>\n        </div>\n      </div>\n\n      {thumbState && (\n        <div className=\"pt-2 space-y-2.5 animate-in fade-in slide-in-from-top-2 duration-200\">\n          <div>\n            <span className=\"text-xs text-muted-foreground mb-2 block font-medium\">\n              {thumbState === \"up\" ? \"What worked well?\" : \"What needs improvement?\"}\n            </span>\n            <div className=\"flex flex-wrap gap-2\">\n              {(thumbState === \"up\" ? positivePills : negativePills).map((pill) => (\n                <button\n                  key={pill}\n                  onClick={() => togglePill(pill)}\n                  className={`px-3 py-1.5 rounded-full text-[11px] font-medium border transition-colors ${\n                    selectedPills.includes(pill)\n                      ? thumbState === \"up\"\n                        ? \"bg-muted text-foreground border-border\"\n                        : \"bg-red-50 text-red-700 border-red-200 dark:bg-red-950/30 dark:text-red-300 dark:border-red-800\"\n                      : \"bg-background text-muted-foreground border-border hover:bg-muted/50 hover:text-foreground\"\n                  }`}\n                >\n                  {pill}\n                </button>\n              ))}\n            </div>\n          </div>\n\n          <textarea\n            value={detailText}\n            onChange={(e) => setDetailText(e.target.value)}\n            placeholder={thumbState === \"up\" ? \"Add specific praise (optional)...\" : \"Provide specific instructions (optional)...\"}\n            className=\"w-full text-xs bg-background border border-border rounded-md px-2.5 py-2 text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-1 focus:ring-indigo-500/50 focus:border-indigo-500/50 resize-none min-h-[60px]\"\n          />\n\n          <div className=\"flex items-center gap-2.5 pt-2\">\n            {thumbState === \"down\" ? (\n              <>\n                <button\n                  onClick={handleRegenerate}\n                  disabled={selectedPills.length === 0 && detailText.length === 0}\n                  className={`flex-1 py-1.5 rounded-md text-xs font-semibold transition-colors flex items-center justify-center gap-1.5 ${\n                    selectedPills.length > 0 || detailText.length > 0\n                      ? \"bg-foreground text-background hover:bg-foreground/90\"\n                      : \"bg-muted text-muted-foreground cursor-not-allowed\"\n                  }`}\n                >\n                  <RefreshCw className=\"w-3 h-3\" />\n                  Regenerate draft\n                </button>\n                <button\n                  onClick={handleDiscard}\n                  className=\"flex-1 py-1.5 rounded-md text-xs font-medium transition-colors border bg-background text-foreground border-border hover:bg-muted/50 flex items-center justify-center gap-1.5\"\n                >\n                  Discard draft\n                </button>\n              </>\n            ) : (\n              <button\n                onClick={handleSubmit}\n                className=\"flex-1 py-1.5 rounded-md text-xs font-semibold transition-colors bg-foreground text-background hover:bg-foreground/90 border-transparent\"\n              >\n                Submit feedback\n              </button>\n            )}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/draft-feedback-inline.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ThumbsUp,\n  ThumbsDown,\n  Check,\n  RefreshCw,\n} from \"lucide-react\"\n\n// ---------------------------------------------------------------------------\n// DraftFeedbackInline\n// ---------------------------------------------------------------------------\n\nconst positivePills = [\"Tone\", \"Personalization\", \"Length\", \"CTA\", \"Other\"]\nconst negativePills = [\"Too formal\", \"Too casual\", \"Too long\", \"Missing context\", \"Wrong angle\", \"Factual error\", \"Other\"]\n\nexport interface DraftFeedbackInlineProps {\n  initialDirection?: 'up' | 'down' | null\n  onRegenerateRequest?: (pills: string[], detail: string) => void\n  onSubmitFeedback?: (type: \"up\" | \"down\", pills: string[], detail: string) => void\n  onDiscardRequest?: (pills: string[], detail: string) => void\n}\n\nexport function DraftFeedbackInline({\n  initialDirection,\n  onRegenerateRequest,\n  onSubmitFeedback,\n  onDiscardRequest,\n}: DraftFeedbackInlineProps) {\n  const [thumbState, setThumbState] = React.useState<\"up\" | \"down\" | null>(initialDirection ?? null)\n  const [selectedPills, setSelectedPills] = React.useState<string[]>([])\n  const [detailText, setDetailText] = React.useState(\"\")\n  const [noted, setNoted] = React.useState(false)\n  const [regenerated, setRegenerated] = React.useState(false)\n\n  const togglePill = React.useCallback((pill: string) => {\n    setSelectedPills((prev) => (prev.includes(pill) ? prev.filter((p) => p !== pill) : [...prev, pill]))\n  }, [])\n\n  const handleSubmit = React.useCallback(() => {\n    if (!thumbState) return\n    onSubmitFeedback?.(thumbState, selectedPills, detailText)\n    setNoted(true)\n    setTimeout(() => {\n      setThumbState(null)\n      setSelectedPills([])\n      setDetailText(\"\")\n      setNoted(false)\n    }, 3000)\n  }, [thumbState, selectedPills, detailText, onSubmitFeedback])\n\n  const handleRegenerate = React.useCallback(() => {\n    if (!thumbState) return\n    onRegenerateRequest?.(selectedPills, detailText)\n    setRegenerated(true)\n    setTimeout(() => {\n      setThumbState(null)\n      setSelectedPills([])\n      setDetailText(\"\")\n      setRegenerated(false)\n    }, 3000)\n  }, [thumbState, selectedPills, detailText, onRegenerateRequest])\n\n  const handleDiscard = React.useCallback(() => {\n    if (!thumbState) return\n    onDiscardRequest?.(selectedPills, detailText)\n  }, [thumbState, selectedPills, detailText, onDiscardRequest])\n\n  if (noted) {\n    return (\n      <div className=\"flex items-center gap-1.5 py-1 animate-in fade-in slide-in-from-top-1 duration-200\">\n        <Check className=\"w-3.5 h-3.5 text-emerald-500\" />\n        <span className=\"text-xs text-muted-foreground\">Feedback recorded</span>\n      </div>\n    )\n  }\n\n  if (regenerated) {\n    return (\n      <div className=\"py-2 animate-in fade-in slide-in-from-top-1 duration-200\">\n        <div className=\"flex items-center gap-2 px-3 py-2 rounded-md bg-indigo-50 dark:bg-indigo-950/30 border border-indigo-200 dark:border-indigo-800\">\n          <RefreshCw className=\"w-3 h-3 text-indigo-500 animate-spin\" />\n          <span className=\"text-xs font-medium text-indigo-600 dark:text-indigo-400\">Regenerating draft...</span>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"space-y-0\">\n      <div className=\"flex items-center justify-between\">\n        <span className=\"text-sm text-foreground font-medium\">How&apos;s this draft?</span>\n        <div className=\"flex gap-1\">\n          <button\n            onClick={() => {\n              setThumbState(thumbState === \"up\" ? null : \"up\")\n              setSelectedPills([])\n              setDetailText(\"\")\n            }}\n            className={`p-1.5 rounded transition-colors ${\n              thumbState === \"up\"\n                ? \"bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400\"\n                : \"hover:bg-muted text-muted-foreground hover:text-foreground\"\n            }`}\n          >\n            <ThumbsUp className=\"w-4 h-4\" fill={thumbState === \"up\" ? \"currentColor\" : \"none\"} />\n          </button>\n          <button\n            onClick={() => {\n              setThumbState(thumbState === \"down\" ? null : \"down\")\n              setSelectedPills([])\n              setDetailText(\"\")\n            }}\n            className={`p-1.5 rounded transition-colors ${\n              thumbState === \"down\"\n                ? \"bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400\"\n                : \"hover:bg-muted text-muted-foreground hover:text-foreground\"\n            }`}\n          >\n            <ThumbsDown className=\"w-4 h-4\" fill={thumbState === \"down\" ? \"currentColor\" : \"none\"} />\n          </button>\n        </div>\n      </div>\n\n      {thumbState && (\n        <div className=\"pt-3 space-y-3 animate-in fade-in slide-in-from-top-2 duration-200\">\n          <div>\n            <span className=\"text-xs text-muted-foreground mb-2 block font-medium\">\n              {thumbState === \"up\" ? \"What worked well?\" : \"What needs improvement?\"}\n            </span>\n            <div className=\"flex flex-wrap gap-1.5\">\n              {(thumbState === \"up\" ? positivePills : negativePills).map((pill) => (\n                <button\n                  key={pill}\n                  onClick={() => togglePill(pill)}\n                  className={`px-2.5 py-1 rounded-full text-[11px] font-medium border transition-colors ${\n                    selectedPills.includes(pill)\n                      ? thumbState === \"up\"\n                        ? \"bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-300 dark:border-emerald-800\"\n                        : \"bg-red-100 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-300 dark:border-red-800\"\n                      : \"bg-background text-muted-foreground border-border hover:bg-muted/50 hover:text-foreground\"\n                  }`}\n                >\n                  {pill}\n                </button>\n              ))}\n            </div>\n          </div>\n\n          <textarea\n            value={detailText}\n            onChange={(e) => setDetailText(e.target.value)}\n            placeholder={thumbState === \"up\" ? \"Add specific praise (optional)...\" : \"Provide specific instructions (optional)...\"}\n            className=\"w-full text-xs bg-background border border-border rounded-md px-2.5 py-2 text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-1 focus:ring-indigo-500/50 focus:border-indigo-500/50 resize-none min-h-[60px]\"\n          />\n\n          <div className=\"flex items-center gap-2 pt-1\">\n            {thumbState === \"down\" ? (\n              <>\n                <button\n                  onClick={handleRegenerate}\n                  disabled={selectedPills.length === 0 && detailText.length === 0}\n                  className={`flex-1 py-1.5 rounded-md text-xs font-semibold transition-colors flex items-center justify-center gap-1.5 ${\n                    selectedPills.length > 0 || detailText.length > 0\n                      ? \"bg-foreground text-background hover:bg-foreground/90\"\n                      : \"bg-muted text-muted-foreground cursor-not-allowed\"\n                  }`}\n                >\n                  <RefreshCw className=\"w-3 h-3\" />\n                  Regenerate draft\n                </button>\n                <button\n                  onClick={handleDiscard}\n                  className=\"flex-1 py-1.5 rounded-md text-xs font-medium transition-colors border bg-background text-foreground border-border hover:bg-muted/50 flex items-center justify-center gap-1.5\"\n                >\n                  Discard draft\n                </button>\n              </>\n            ) : (\n              <button\n                onClick={handleSubmit}\n                className=\"flex-1 py-1.5 rounded-md text-xs font-semibold transition-colors bg-foreground text-background hover:bg-foreground/90 border-transparent\"\n              >\n                Submit feedback\n              </button>\n            )}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"mappings":";AAuEM,SAwFQ,UAvFN,KADF;AArEN,YAAY,WAAW;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAMP,MAAM,gBAAgB,CAAC,QAAQ,mBAAmB,UAAU,OAAO,OAAO;AAC1E,MAAM,gBAAgB,CAAC,cAAc,cAAc,YAAY,mBAAmB,eAAe,iBAAiB,OAAO;AASlH,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA6B;AAC3B,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAA+B,8CAAoB,IAAI;AACjG,QAAM,CAAC,eAAe,gBAAgB,IAAI,MAAM,SAAmB,CAAC,CAAC;AACrE,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,EAAE;AACrD,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,KAAK;AAC9C,QAAM,CAAC,aAAa,cAAc,IAAI,MAAM,SAAS,KAAK;AAE1D,QAAM,aAAa,MAAM,YAAY,CAAC,SAAiB;AACrD,qBAAiB,CAAC,SAAU,KAAK,SAAS,IAAI,IAAI,KAAK,OAAO,CAAC,MAAM,MAAM,IAAI,IAAI,CAAC,GAAG,MAAM,IAAI,CAAE;AAAA,EACrG,GAAG,CAAC,CAAC;AAEL,QAAM,eAAe,MAAM,YAAY,MAAM;AAC3C,QAAI,CAAC,WAAY;AACjB,yDAAmB,YAAY,eAAe;AAC9C,aAAS,IAAI;AACb,eAAW,MAAM;AACf,oBAAc,IAAI;AAClB,uBAAiB,CAAC,CAAC;AACnB,oBAAc,EAAE;AAChB,eAAS,KAAK;AAAA,IAChB,GAAG,GAAI;AAAA,EACT,GAAG,CAAC,YAAY,eAAe,YAAY,gBAAgB,CAAC;AAE5D,QAAM,mBAAmB,MAAM,YAAY,MAAM;AAC/C,QAAI,CAAC,WAAY;AACjB,+DAAsB,eAAe;AACrC,mBAAe,IAAI;AACnB,eAAW,MAAM;AACf,oBAAc,IAAI;AAClB,uBAAiB,CAAC,CAAC;AACnB,oBAAc,EAAE;AAChB,qBAAe,KAAK;AAAA,IACtB,GAAG,GAAI;AAAA,EACT,GAAG,CAAC,YAAY,eAAe,YAAY,mBAAmB,CAAC;AAE/D,QAAM,gBAAgB,MAAM,YAAY,MAAM;AAC5C,QAAI,CAAC,WAAY;AACjB,yDAAmB,eAAe;AAAA,EACpC,GAAG,CAAC,YAAY,eAAe,YAAY,gBAAgB,CAAC;AAE5D,MAAI,OAAO;AACT,WACE,qBAAC,SAAI,WAAU,sFACb;AAAA,0BAAC,SAAM,WAAU,gCAA+B;AAAA,MAChD,oBAAC,UAAK,WAAU,iCAAgC,+BAAiB;AAAA,OACnE;AAAA,EAEJ;AAEA,MAAI,aAAa;AACf,WACE,oBAAC,SAAI,WAAU,4DACb,+BAAC,SAAI,WAAU,mIACb;AAAA,0BAAC,aAAU,WAAU,wCAAuC;AAAA,MAC5D,oBAAC,UAAK,WAAU,4DAA2D,mCAAqB;AAAA,OAClG,GACF;AAAA,EAEJ;AAEA,SACE,qBAAC,SAAI,WAAU,aACb;AAAA,yBAAC,SAAI,WAAU,qCACb;AAAA,0BAAC,UAAK,WAAU,uCAAsC,+BAAsB;AAAA,MAC5E,qBAAC,SAAI,WAAU,cACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS,MAAM;AACb,4BAAc,eAAe,OAAO,OAAO,IAAI;AAC/C,+BAAiB,CAAC,CAAC;AACnB,4BAAc,EAAE;AAAA,YAClB;AAAA,YACA,WAAW,mCACT,eAAe,OACX,iFACA,4DACN;AAAA,YAEA,8BAAC,YAAS,WAAU,WAAU,MAAM,eAAe,OAAO,iBAAiB,QAAQ;AAAA;AAAA,QACrF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS,MAAM;AACb,4BAAc,eAAe,SAAS,OAAO,MAAM;AACnD,+BAAiB,CAAC,CAAC;AACnB,4BAAc,EAAE;AAAA,YAClB;AAAA,YACA,WAAW,mCACT,eAAe,SACX,iEACA,4DACN;AAAA,YAEA,8BAAC,cAAW,WAAU,WAAU,MAAM,eAAe,SAAS,iBAAiB,QAAQ;AAAA;AAAA,QACzF;AAAA,SACF;AAAA,OACF;AAAA,IAEC,cACC,qBAAC,SAAI,WAAU,sEACb;AAAA,2BAAC,SACC;AAAA,4BAAC,UAAK,WAAU,wDACb,yBAAe,OAAO,sBAAsB,2BAC/C;AAAA,QACA,oBAAC,SAAI,WAAU,0BACX,0BAAe,OAAO,gBAAgB,eAAe,IAAI,CAAC,SAC1D;AAAA,UAAC;AAAA;AAAA,YAEC,SAAS,MAAM,WAAW,IAAI;AAAA,YAC9B,WAAW,6EACT,cAAc,SAAS,IAAI,IACvB,eAAe,OACb,4HACA,oGACF,2FACN;AAAA,YAEC;AAAA;AAAA,UAVI;AAAA,QAWP,CACD,GACH;AAAA,SACF;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,UAAU,CAAC,MAAM,cAAc,EAAE,OAAO,KAAK;AAAA,UAC7C,aAAa,eAAe,OAAO,sCAAsC;AAAA,UACzE,WAAU;AAAA;AAAA,MACZ;AAAA,MAEA,oBAAC,SAAI,WAAU,gCACZ,yBAAe,SACd,iCACE;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,UAAU,cAAc,WAAW,KAAK,WAAW,WAAW;AAAA,YAC9D,WAAW,6GACT,cAAc,SAAS,KAAK,WAAW,SAAS,IAC5C,yDACA,mDACN;AAAA,YAEA;AAAA,kCAAC,aAAU,WAAU,WAAU;AAAA,cAAE;AAAA;AAAA;AAAA,QAEnC;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,WAAU;AAAA,YACX;AAAA;AAAA,QAED;AAAA,SACF,IAEA;AAAA,QAAC;AAAA;AAAA,UACC,SAAS;AAAA,UACT,WAAU;AAAA,UACX;AAAA;AAAA,MAED,GAEJ;AAAA,OACF;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/components/email-composer-row.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+interface EmailComposerRowProps extends React.HTMLAttributes<HTMLDivElement> {
+    label: React.ReactNode;
+    state?: "default" | "amber";
+    alignStart?: boolean;
+    children: React.ReactNode;
+}
+declare function EmailComposerRow({ label, state, alignStart, children, className, ...props }: EmailComposerRowProps): React.JSX.Element;
+
+export { EmailComposerRow, type EmailComposerRowProps };

package/dist/components/email-composer-row.js

@@ -0,0 +1,82 @@
+"use client"
+
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+function EmailComposerRow(_a) {
+  var _b = _a, {
+    label,
+    state = "default",
+    alignStart = false,
+    children,
+    className
+  } = _b, props = __objRest(_b, [
+    "label",
+    "state",
+    "alignStart",
+    "children",
+    "className"
+  ]);
+  const amber = state === "amber";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    __spreadProps(__spreadValues({
+      className: cn(
+        "grid grid-cols-[60px_1fr] gap-2 px-[18px] py-[9px] border-b border-border/70 items-center text-sm",
+        alignStart && "items-start",
+        amber && "bg-amber-50/35 border-amber-200/80",
+        className
+      )
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "text-[11px] font-semibold uppercase tracking-wide text-muted-foreground",
+              alignStart && "pt-[7px]",
+              amber && "text-amber-700"
+            ),
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "min-w-0", children })
+      ]
+    })
+  );
+}
+export {
+  EmailComposerRow
+};
+//# sourceMappingURL=email-composer-row.js.map

package/dist/components/email-composer-row.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/email-composer-row.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../lib/utils\"\n\nexport interface EmailComposerRowProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  label: React.ReactNode\n  state?: \"default\" | \"amber\"\n  alignStart?: boolean\n  children: React.ReactNode\n}\n\nexport function EmailComposerRow({\n  label,\n  state = \"default\",\n  alignStart = false,\n  children,\n  className,\n  ...props\n}: EmailComposerRowProps) {\n  const amber = state === \"amber\"\n\n  return (\n    <div\n      className={cn(\n        \"grid grid-cols-[60px_1fr] gap-2 px-[18px] py-[9px] border-b border-border/70 items-center text-sm\",\n        alignStart && \"items-start\",\n        amber && \"bg-amber-50/35 border-amber-200/80\",\n        className,\n      )}\n      {...props}\n    >\n      <div\n        className={cn(\n          \"text-[11px] font-semibold uppercase tracking-wide text-muted-foreground\",\n          alignStart && \"pt-[7px]\",\n          amber && \"text-amber-700\",\n        )}\n      >\n        {label}\n      </div>\n      <div className=\"min-w-0\">{children}</div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBI,SASE,KATF;AArBJ,SAAS,UAAU;AAUZ,SAAS,iBAAiB,IAOP;AAPO,eAC/B;AAAA;AAAA,IACA,QAAQ;AAAA,IACR,aAAa;AAAA,IACb;AAAA,IACA;AAAA,EAnBF,IAciC,IAM5B,kBAN4B,IAM5B;AAAA,IALH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,QAAQ,UAAU;AAExB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,cAAc;AAAA,QACd,SAAS;AAAA,QACT;AAAA,MACF;AAAA,OACI,QAPL;AAAA,MASC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,cAAc;AAAA,cACd,SAAS;AAAA,YACX;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QACA,oBAAC,SAAI,WAAU,WAAW,UAAS;AAAA;AAAA;AAAA,EACrC;AAEJ;","names":[]}

package/dist/components/email-preview-card.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+interface EmailPreviewCardProps {
+    from: {
+        name: string;
+        email: string;
+    };
+    to?: string;
+    subject?: string;
+    htmlBody?: string;
+    textBody?: string;
+    signatureHtml?: string | null;
+    className?: string;
+}
+declare function EmailPreviewCard({ from, to, subject, htmlBody, textBody, signatureHtml, className, }: EmailPreviewCardProps): React.JSX.Element;
+
+export { EmailPreviewCard, type EmailPreviewCardProps };

package/dist/components/email-preview-card.js

@@ -0,0 +1,71 @@
+"use client"
+
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Eye } from "lucide-react";
+import { cn } from "../lib/utils.js";
+function getInitials(name) {
+  return name.split(" ").map((part) => part[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
+}
+function escapeHtml(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function EmailPreviewCard({
+  from,
+  to,
+  subject,
+  htmlBody,
+  textBody,
+  signatureHtml,
+  className
+}) {
+  const recipientLabel = to ? `${to}'s` : "the recipient's";
+  const bodyHtml = htmlBody != null ? htmlBody : textBody ? escapeHtml(textBody) : "";
+  return /* @__PURE__ */ jsxs("div", { className: cn("p-4 bg-muted/30 min-h-full", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 mb-3 py-2.5 px-3 border rounded-lg bg-background text-[11.5px] text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(Eye, { className: "size-4 shrink-0 mt-0.5" }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        "This is how your email lands in ",
+        recipientLabel,
+        " inbox. Nothing has been sent yet."
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "bg-background border rounded-xl shadow-sm overflow-hidden", children: [
+      /* @__PURE__ */ jsx("div", { className: "px-[18px] pt-4 pb-3 text-base font-semibold border-b border-border/50", children: subject || "(no subject)" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-[18px] pt-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex size-9 shrink-0 items-center justify-center rounded-full bg-foreground text-background text-xs font-semibold", children: getInitials(from.name) }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "text-sm", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: from.name }),
+            " ",
+            /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+              "<",
+              from.email,
+              ">"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: to ? `to ${to}` : "to no recipient yet" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground shrink-0", children: "just now" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "px-[18px] py-2 ml-[47px] text-[13.5px] leading-relaxed whitespace-pre-wrap",
+          dangerouslySetInnerHTML: { __html: bodyHtml }
+        }
+      ),
+      signatureHtml ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "ml-[47px] px-[18px] pt-3 mt-3 border-t border-border/50 pb-4 text-xs leading-relaxed text-muted-foreground",
+          dangerouslySetInnerHTML: { __html: signatureHtml }
+        }
+      ) : null
+    ] })
+  ] });
+}
+export {
+  EmailPreviewCard
+};
+//# sourceMappingURL=email-preview-card.js.map

package/dist/components/email-preview-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/email-preview-card.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Eye } from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\n\nexport interface EmailPreviewCardProps {\n  from: { name: string; email: string }\n  to?: string\n  subject?: string\n  htmlBody?: string\n  textBody?: string\n  signatureHtml?: string | null\n  className?: string\n}\n\nfunction getInitials(name: string): string {\n  return name\n    .split(\" \")\n    .map((part) => part[0])\n    .filter(Boolean)\n    .slice(0, 2)\n    .join(\"\")\n    .toUpperCase()\n}\n\nfunction escapeHtml(text: string): string {\n  return text\n    .replace(/&/g, \"&amp;\")\n    .replace(/</g, \"&lt;\")\n    .replace(/>/g, \"&gt;\")\n    .replace(/\"/g, \"&quot;\")\n    .replace(/'/g, \"&#39;\")\n}\n\nexport function EmailPreviewCard({\n  from,\n  to,\n  subject,\n  htmlBody,\n  textBody,\n  signatureHtml,\n  className,\n}: EmailPreviewCardProps) {\n  const recipientLabel = to ? `${to}'s` : \"the recipient's\"\n  const bodyHtml = htmlBody ?? (textBody ? escapeHtml(textBody) : \"\")\n\n  return (\n    <div className={cn(\"p-4 bg-muted/30 min-h-full\", className)}>\n      <div className=\"flex items-start gap-2 mb-3 py-2.5 px-3 border rounded-lg bg-background text-[11.5px] text-muted-foreground\">\n        <Eye className=\"size-4 shrink-0 mt-0.5\" />\n        <span>\n          This is how your email lands in {recipientLabel} inbox. Nothing has\n          been sent yet.\n        </span>\n      </div>\n\n      <div className=\"bg-background border rounded-xl shadow-sm overflow-hidden\">\n        <div className=\"px-[18px] pt-4 pb-3 text-base font-semibold border-b border-border/50\">\n          {subject || \"(no subject)\"}\n        </div>\n\n        <div className=\"flex items-center gap-3 px-[18px] pt-3\">\n          <div className=\"flex size-9 shrink-0 items-center justify-center rounded-full bg-foreground text-background text-xs font-semibold\">\n            {getInitials(from.name)}\n          </div>\n          <div className=\"min-w-0 flex-1\">\n            <div className=\"text-sm\">\n              <span className=\"font-semibold text-foreground\">{from.name}</span>{\" \"}\n              <span className=\"text-muted-foreground\">&lt;{from.email}&gt;</span>\n            </div>\n            <div className=\"text-xs text-muted-foreground\">\n              {to ? `to ${to}` : \"to no recipient yet\"}\n            </div>\n          </div>\n          <div className=\"text-xs text-muted-foreground shrink-0\">just now</div>\n        </div>\n\n        <div\n          className=\"px-[18px] py-2 ml-[47px] text-[13.5px] leading-relaxed whitespace-pre-wrap\"\n          dangerouslySetInnerHTML={{ __html: bodyHtml }}\n        />\n\n        {signatureHtml ? (\n          <div\n            className=\"ml-[47px] px-[18px] pt-3 mt-3 border-t border-border/50 pb-4 text-xs leading-relaxed text-muted-foreground\"\n            dangerouslySetInnerHTML={{ __html: signatureHtml }}\n          />\n        ) : null}\n      </div>\n    </div>\n  )\n}\n"],"mappings":";AAmDQ,cACA,YADA;AAhDR,SAAS,WAAW;AAEpB,SAAS,UAAU;AAYnB,SAAS,YAAY,MAAsB;AACzC,SAAO,KACJ,MAAM,GAAG,EACT,IAAI,CAAC,SAAS,KAAK,CAAC,CAAC,EACrB,OAAO,OAAO,EACd,MAAM,GAAG,CAAC,EACV,KAAK,EAAE,EACP,YAAY;AACjB;AAEA,SAAS,WAAW,MAAsB;AACxC,SAAO,KACJ,QAAQ,MAAM,OAAO,EACrB,QAAQ,MAAM,MAAM,EACpB,QAAQ,MAAM,MAAM,EACpB,QAAQ,MAAM,QAAQ,EACtB,QAAQ,MAAM,OAAO;AAC1B;AAEO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA0B;AACxB,QAAM,iBAAiB,KAAK,GAAG,EAAE,OAAO;AACxC,QAAM,WAAW,8BAAa,WAAW,WAAW,QAAQ,IAAI;AAEhE,SACE,qBAAC,SAAI,WAAW,GAAG,8BAA8B,SAAS,GACxD;AAAA,yBAAC,SAAI,WAAU,+GACb;AAAA,0BAAC,OAAI,WAAU,0BAAyB;AAAA,MACxC,qBAAC,UAAK;AAAA;AAAA,QAC6B;AAAA,QAAe;AAAA,SAElD;AAAA,OACF;AAAA,IAEA,qBAAC,SAAI,WAAU,6DACb;AAAA,0BAAC,SAAI,WAAU,yEACZ,qBAAW,gBACd;AAAA,MAEA,qBAAC,SAAI,WAAU,0CACb;AAAA,4BAAC,SAAI,WAAU,qHACZ,sBAAY,KAAK,IAAI,GACxB;AAAA,QACA,qBAAC,SAAI,WAAU,kBACb;AAAA,+BAAC,SAAI,WAAU,WACb;AAAA,gCAAC,UAAK,WAAU,iCAAiC,eAAK,MAAK;AAAA,YAAQ;AAAA,YACnE,qBAAC,UAAK,WAAU,yBAAwB;AAAA;AAAA,cAAK,KAAK;AAAA,cAAM;AAAA,eAAI;AAAA,aAC9D;AAAA,UACA,oBAAC,SAAI,WAAU,iCACZ,eAAK,MAAM,EAAE,KAAK,uBACrB;AAAA,WACF;AAAA,QACA,oBAAC,SAAI,WAAU,0CAAyC,sBAAQ;AAAA,SAClE;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,yBAAyB,EAAE,QAAQ,SAAS;AAAA;AAAA,MAC9C;AAAA,MAEC,gBACC;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,yBAAyB,EAAE,QAAQ,cAAc;AAAA;AAAA,MACnD,IACE;AAAA,OACN;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/email-recipient-field.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { SuggestedContact } from './suggested-actions.js';
+
+interface RecipientChip {
+    id: string;
+    email: string;
+    name: string;
+    confirmed: boolean;
+}
+interface EmailRecipientFieldProps {
+    label: string;
+    recipients: RecipientChip[];
+    onRecipientsChange: (recipients: RecipientChip[]) => void;
+    amber?: boolean;
+    contacts?: SuggestedContact[];
+    showPicker?: boolean;
+    showCcBcc?: boolean;
+    ccBccOpen?: boolean;
+    onCcBccToggle?: () => void;
+    addedEmails?: Set<string>;
+    placeholder?: string;
+    contactToRecipient?: (contact: SuggestedContact) => RecipientChip;
+}
+declare function EmailRecipientField({ label, recipients, onRecipientsChange, amber, contacts, showPicker, showCcBcc, ccBccOpen, onCcBccToggle, addedEmails, placeholder, contactToRecipient, }: EmailRecipientFieldProps): React.JSX.Element;
+
+export { EmailRecipientField, type EmailRecipientFieldProps, type RecipientChip };