@withpotter/components 0.13.0-next.101

package/dist/mobile/mobile-redesign-mockups/crm-customer-profile-full.js

@@ -0,0 +1,383 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  ChevronRight,
+  Gift,
+  Mail,
+  MessageCircle,
+  MoreHorizontal,
+  Phone,
+  Plus,
+  Settings as SettingsIcon
+} from "lucide-react";
+import { tokens } from "../mobile-redesign-theme";
+import {
+  Caption,
+  StatusBar,
+  edgeFadeRight,
+  hideScrollbar
+} from "./pill-presets-tailwind-utilit";
+import { HubHeader } from "./drill-chrome-sub-app-header-";
+import { ToggleRow } from "./recover-sheets-shared-chrome";
+function CustomerProfileFull() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsx(StatusBar, {}),
+    /* @__PURE__ */ jsx(
+      HubHeader,
+      {
+        title: "Customer",
+        trailing: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "More",
+            className: "flex h-9 w-9 items-center justify-center",
+            children: /* @__PURE__ */ jsx(
+              MoreHorizontal,
+              {
+                className: "size-4",
+                style: { color: tokens.textSecondary }
+              }
+            )
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto px-4 pb-32", children: [
+      /* @__PURE__ */ jsxs(
+        "section",
+        {
+          className: "mt-3 rounded-3xl border p-5",
+          style: {
+            borderColor: "rgba(17,109,255,0.28)",
+            background: "rgba(17,109,255,0.08)"
+          },
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "flex h-14 w-14 items-center justify-center rounded-2xl text-lg font-bold",
+                  style: { background: tokens.accent, color: tokens.accentFg },
+                  children: "TA"
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx("p", { className: "truncate text-base font-semibold text-white", children: "Tunde Adekunle" }),
+                /* @__PURE__ */ jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-1.5", children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "rounded-full border px-2 py-0.5 text-3xs font-semibold",
+                      style: {
+                        borderColor: `${tokens.good}50`,
+                        background: `${tokens.good}1A`,
+                        color: tokens.good
+                      },
+                      children: "Registered"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "rounded-full border px-2 py-0.5 text-3xs font-semibold",
+                      style: {
+                        borderColor: `${tokens.warn}50`,
+                        background: `${tokens.warn}1A`,
+                        color: tokens.warn
+                      },
+                      children: "VIP"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "text-3xs",
+                      style: { color: tokens.textTertiary },
+                      children: "\xB7 since Feb 2026"
+                    }
+                  )
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-4 grid grid-cols-4 gap-1.5", children: [
+              /* @__PURE__ */ jsx(ContactAction, { icon: Mail, label: "Email" }),
+              /* @__PURE__ */ jsx(ContactAction, { icon: Phone, label: "Call" }),
+              /* @__PURE__ */ jsx(ContactAction, { icon: MessageCircle, label: "Message" }),
+              /* @__PURE__ */ jsx(ContactAction, { icon: SettingsIcon, label: "Edit" })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("section", { className: "mt-3 grid grid-cols-3 gap-2", children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "rounded-2xl border p-3",
+            style: { borderColor: tokens.border, background: tokens.card },
+            children: [
+              /* @__PURE__ */ jsx("p", { className: "text-3xs", style: { color: tokens.textTertiary }, children: "Lifetime" }),
+              /* @__PURE__ */ jsx("p", { className: "mt-1 text-md font-bold text-white", children: "\u20A6212K" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "rounded-2xl border p-3",
+            style: { borderColor: tokens.border, background: tokens.card },
+            children: [
+              /* @__PURE__ */ jsx("p", { className: "text-3xs", style: { color: tokens.textTertiary }, children: "Orders" }),
+              /* @__PURE__ */ jsx("p", { className: "mt-1 text-md font-bold text-white", children: "8" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "rounded-2xl border p-3",
+            style: { borderColor: tokens.border, background: tokens.card },
+            children: [
+              /* @__PURE__ */ jsx("p", { className: "text-3xs", style: { color: tokens.textTertiary }, children: "Last" }),
+              /* @__PURE__ */ jsx("p", { className: "mt-1 text-md font-bold text-white", children: "3d" })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "section",
+        {
+          className: "mt-3 rounded-3xl border p-4",
+          style: {
+            borderColor: "rgba(244,183,64,0.32)",
+            background: "rgba(244,183,64,0.06)"
+          },
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "flex h-10 w-10 items-center justify-center rounded-xl",
+                  style: { background: "rgba(244,183,64,0.18)" },
+                  children: /* @__PURE__ */ jsx(Gift, { className: "size-4", style: { color: tokens.warn } })
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-base font-bold text-white", children: "2,140" }),
+                  /* @__PURE__ */ jsx("p", { className: "text-2xs", style: { color: tokens.textTertiary }, children: "points \xB7 Gold tier" })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: "mt-0.5 text-3xs",
+                    style: { color: tokens.textTertiary },
+                    children: "360 to Platinum \xB7 earned 80 last week"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                ChevronRight,
+                {
+                  className: "size-4",
+                  style: { color: tokens.textMuted }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "mt-3 h-1.5 w-full overflow-hidden rounded-full",
+                style: { background: tokens.elevated },
+                children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "h-full w-[70%] rounded-full",
+                    style: { background: tokens.warn }
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `mt-5 flex gap-1 overflow-x-auto ${hideScrollbar}`,
+          style: edgeFadeRight,
+          children: [
+            { label: "Timeline", active: true },
+            { label: "Orders", n: 8 },
+            { label: "Bookings", n: 2 },
+            { label: "Subscriptions", n: 1 },
+            { label: "Notes", n: 3 }
+          ].map((t) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "shrink-0 px-3 py-2 text-xs font-medium",
+              style: {
+                color: t.active ? "#FFF" : tokens.textTertiary,
+                borderBottom: t.active ? "2px solid #FFF" : "2px solid transparent"
+              },
+              children: [
+                t.label,
+                t.n != null && /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: "ml-1 text-3xs",
+                    style: { color: tokens.textTertiary },
+                    children: [
+                      "(",
+                      t.n,
+                      ")"
+                    ]
+                  }
+                )
+              ]
+            },
+            t.label
+          ))
+        }
+      ),
+      /* @__PURE__ */ jsxs("section", { className: "mt-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx(Caption, { children: "Tags" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "text-2xs font-medium",
+              style: { color: tokens.accent },
+              children: "+ Add"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-1.5", children: ["VIP", "Loves spicy", "Friday regular", "Referrer"].map((t) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "rounded-full border px-2.5 py-1 text-3xs font-medium",
+            style: {
+              borderColor: tokens.border,
+              background: tokens.elevated,
+              color: tokens.textSecondary
+            },
+            children: t
+          },
+          t
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { className: "mt-4", children: [
+        /* @__PURE__ */ jsx(Caption, { children: "Marketing" }),
+        /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(ToggleRow, { label: "Accepts marketing", hint: "Email + SMS" }) })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { className: "mt-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx(Caption, { children: "Recent note" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "text-2xs font-medium",
+              style: { color: tokens.accent },
+              children: "View all"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "mt-2 rounded-2xl border p-3.5",
+            style: { borderColor: tokens.border, background: tokens.card },
+            children: [
+              /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: "text-xs leading-relaxed",
+                  style: { color: tokens.textSecondary },
+                  children: "Prefers spicy. Always orders extra pepper sauce. Remind on next visit."
+                }
+              ),
+              /* @__PURE__ */ jsx("p", { className: "mt-2 text-3xs", style: { color: tokens.textTertiary }, children: "Abraham \xB7 2 weeks ago" })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "absolute inset-x-3 bottom-3 z-30 grid grid-cols-3 gap-2 rounded-[26px] border p-2",
+        style: {
+          borderColor: tokens.border,
+          background: `${tokens.card}F2`,
+          backdropFilter: "blur(12px)"
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "flex h-12 items-center justify-center gap-1.5 rounded-2xl border text-2xs font-medium text-white",
+              style: { borderColor: tokens.border, background: tokens.elevated },
+              children: [
+                /* @__PURE__ */ jsx(MessageCircle, { className: "size-4" }),
+                "Message"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "flex h-12 items-center justify-center gap-1.5 rounded-2xl border text-2xs font-medium text-white",
+              style: { borderColor: tokens.border, background: tokens.elevated },
+              children: [
+                /* @__PURE__ */ jsx(Gift, { className: "size-4" }),
+                "Adjust pts"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "flex h-12 items-center justify-center gap-1.5 rounded-2xl text-2xs font-semibold",
+              style: { background: tokens.accent, color: tokens.accentFg },
+              children: [
+                /* @__PURE__ */ jsx(Plus, { className: "size-4" }),
+                "New order"
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function ContactAction({
+  icon: Icon,
+  label
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: "flex h-[52px] flex-col items-center justify-center gap-1 rounded-xl border text-3xs font-medium text-[#C9D0DD]",
+      style: {
+        borderColor: "rgba(17,109,255,0.20)",
+        background: "rgba(17,109,255,0.10)"
+      },
+      children: [
+        /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }),
+        label
+      ]
+    }
+  );
+}
+export {
+  ContactAction,
+  CustomerProfileFull
+};
+//# sourceMappingURL=crm-customer-profile-full.js.map

package/dist/mobile/mobile-redesign-mockups/crm-customer-profile-full.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/mobile/mobile-redesign-mockups/crm-customer-profile-full.tsx"],"sourcesContent":["'use client';\n\nimport {\n  ChevronRight,\n  Gift,\n  Mail,\n  MessageCircle,\n  MoreHorizontal,\n  Phone,\n  Plus,\n  Settings as SettingsIcon,\n} from 'lucide-react';\nimport { tokens } from '../mobile-redesign-theme';\nimport {\n  Caption,\n  StatusBar,\n  edgeFadeRight,\n  hideScrollbar,\n} from './pill-presets-tailwind-utilit';\nimport { HubHeader } from './drill-chrome-sub-app-header-';\nimport { ToggleRow } from './recover-sheets-shared-chrome';\n\n/**\n * CRM — Customer profile (full)\n *\n * One chapter of the mobile visual contract. ~40 screens cite this file as\n * the spec they implement, so the markup here is the artifact and is never\n * converted onto primitives — see CLAUDE.md. Splitting it moves nothing:\n * every screen is the same markup, in a file named for what it draws.\n */\n\n// ─────────────────────────────────────────────────────────────\n// CRM — Customer profile (full)\n// ─────────────────────────────────────────────────────────────\nexport function CustomerProfileFull() {\n  return (\n    <div className=\"flex h-full flex-col\">\n      <StatusBar />\n      <HubHeader\n        title=\"Customer\"\n        trailing={\n          <button\n            type=\"button\"\n            aria-label=\"More\"\n            className=\"flex h-9 w-9 items-center justify-center\"\n          >\n            <MoreHorizontal className=\"size-4\"\n              style={{ color: tokens.textSecondary }}\n            />\n          </button>\n        }\n      />\n      <div className=\"flex-1 overflow-y-auto px-4 pb-32\">\n        {/* Identity */}\n        <section\n          className=\"mt-3 rounded-3xl border p-5\"\n          style={{\n            borderColor: 'rgba(17,109,255,0.28)',\n            background: 'rgba(17,109,255,0.08)',\n          }}\n        >\n          <div className=\"flex items-start gap-3\">\n            <div\n              className=\"flex h-14 w-14 items-center justify-center rounded-2xl text-lg font-bold\"\n              style={{ background: tokens.accent, color: tokens.accentFg }}\n            >\n              TA\n            </div>\n            <div className=\"min-w-0 flex-1\">\n              <p className=\"truncate text-base font-semibold text-white\">\n                Tunde Adekunle\n              </p>\n              <div className=\"mt-1 flex flex-wrap items-center gap-1.5\">\n                <span\n                  className=\"rounded-full border px-2 py-0.5 text-3xs font-semibold\"\n                  style={{\n                    borderColor: `${tokens.good}50`,\n                    background: `${tokens.good}1A`,\n                    color: tokens.good,\n                  }}\n                >\n                  Registered\n                </span>\n                <span\n                  className=\"rounded-full border px-2 py-0.5 text-3xs font-semibold\"\n                  style={{\n                    borderColor: `${tokens.warn}50`,\n                    background: `${tokens.warn}1A`,\n                    color: tokens.warn,\n                  }}\n                >\n                  VIP\n                </span>\n                <span\n                  className=\"text-3xs\"\n                  style={{ color: tokens.textTertiary }}\n                >\n                  · since Feb 2026\n                </span>\n              </div>\n            </div>\n          </div>\n\n          <div className=\"mt-4 grid grid-cols-4 gap-1.5\">\n            <ContactAction icon={Mail} label=\"Email\" />\n            <ContactAction icon={Phone} label=\"Call\" />\n            <ContactAction icon={MessageCircle} label=\"Message\" />\n            <ContactAction icon={SettingsIcon} label=\"Edit\" />\n          </div>\n        </section>\n\n        {/* Metrics */}\n        <section className=\"mt-3 grid grid-cols-3 gap-2\">\n          <div\n            className=\"rounded-2xl border p-3\"\n            style={{ borderColor: tokens.border, background: tokens.card }}\n          >\n            <p className=\"text-3xs\" style={{ color: tokens.textTertiary }}>\n              Lifetime\n            </p>\n            <p className=\"mt-1 text-md font-bold text-white\">₦212K</p>\n          </div>\n          <div\n            className=\"rounded-2xl border p-3\"\n            style={{ borderColor: tokens.border, background: tokens.card }}\n          >\n            <p className=\"text-3xs\" style={{ color: tokens.textTertiary }}>\n              Orders\n            </p>\n            <p className=\"mt-1 text-md font-bold text-white\">8</p>\n          </div>\n          <div\n            className=\"rounded-2xl border p-3\"\n            style={{ borderColor: tokens.border, background: tokens.card }}\n          >\n            <p className=\"text-3xs\" style={{ color: tokens.textTertiary }}>\n              Last\n            </p>\n            <p className=\"mt-1 text-md font-bold text-white\">3d</p>\n          </div>\n        </section>\n\n        {/* Loyalty card */}\n        <section\n          className=\"mt-3 rounded-3xl border p-4\"\n          style={{\n            borderColor: 'rgba(244,183,64,0.32)',\n            background: 'rgba(244,183,64,0.06)',\n          }}\n        >\n          <div className=\"flex items-center gap-3\">\n            <div\n              className=\"flex h-10 w-10 items-center justify-center rounded-xl\"\n              style={{ background: 'rgba(244,183,64,0.18)' }}\n            >\n              <Gift className=\"size-4\" style={{ color: tokens.warn }} />\n            </div>\n            <div className=\"min-w-0 flex-1\">\n              <div className=\"flex items-baseline gap-2\">\n                <p className=\"text-base font-bold text-white\">2,140</p>\n                <p className=\"text-2xs\" style={{ color: tokens.textTertiary }}>\n                  points · Gold tier\n                </p>\n              </div>\n              <p\n                className=\"mt-0.5 text-3xs\"\n                style={{ color: tokens.textTertiary }}\n              >\n                360 to Platinum · earned 80 last week\n              </p>\n            </div>\n            <ChevronRight className=\"size-4\"\n              style={{ color: tokens.textMuted }}\n            />\n          </div>\n          <div\n            className=\"mt-3 h-1.5 w-full overflow-hidden rounded-full\"\n            style={{ background: tokens.elevated }}\n          >\n            <div\n              className=\"h-full w-[70%] rounded-full\"\n              style={{ background: tokens.warn }}\n            />\n          </div>\n        </section>\n\n        {/* Tabs */}\n        <div\n          className={`mt-5 flex gap-1 overflow-x-auto ${hideScrollbar}`}\n          style={edgeFadeRight}\n        >\n          {[\n            { label: 'Timeline', active: true },\n            { label: 'Orders', n: 8 },\n            { label: 'Bookings', n: 2 },\n            { label: 'Subscriptions', n: 1 },\n            { label: 'Notes', n: 3 },\n          ].map((t) => (\n            <button\n              type=\"button\"\n              key={t.label}\n              className=\"shrink-0 px-3 py-2 text-xs font-medium\"\n              style={{\n                color: t.active ? '#FFF' : tokens.textTertiary,\n                borderBottom: t.active\n                  ? '2px solid #FFF'\n                  : '2px solid transparent',\n              }}\n            >\n              {t.label}\n              {t.n != null && (\n                <span\n                  className=\"ml-1 text-3xs\"\n                  style={{ color: tokens.textTertiary }}\n                >\n                  ({t.n})\n                </span>\n              )}\n            </button>\n          ))}\n        </div>\n\n        {/* Tags */}\n        <section className=\"mt-4\">\n          <div className=\"flex items-center justify-between\">\n            <Caption>Tags</Caption>\n            <button\n              type=\"button\"\n              className=\"text-2xs font-medium\"\n              style={{ color: tokens.accent }}\n            >\n              + Add\n            </button>\n          </div>\n          <div className=\"mt-2 flex flex-wrap gap-1.5\">\n            {['VIP', 'Loves spicy', 'Friday regular', 'Referrer'].map((t) => (\n              <span\n                key={t}\n                className=\"rounded-full border px-2.5 py-1 text-3xs font-medium\"\n                style={{\n                  borderColor: tokens.border,\n                  background: tokens.elevated,\n                  color: tokens.textSecondary,\n                }}\n              >\n                {t}\n              </span>\n            ))}\n          </div>\n        </section>\n\n        {/* Marketing */}\n        <section className=\"mt-4\">\n          <Caption>Marketing</Caption>\n          <div className=\"mt-2\">\n            <ToggleRow label=\"Accepts marketing\" hint=\"Email + SMS\" />\n          </div>\n        </section>\n\n        {/* Notes preview */}\n        <section className=\"mt-4\">\n          <div className=\"flex items-center justify-between\">\n            <Caption>Recent note</Caption>\n            <button\n              type=\"button\"\n              className=\"text-2xs font-medium\"\n              style={{ color: tokens.accent }}\n            >\n              View all\n            </button>\n          </div>\n          <div\n            className=\"mt-2 rounded-2xl border p-3.5\"\n            style={{ borderColor: tokens.border, background: tokens.card }}\n          >\n            <p\n              className=\"text-xs leading-relaxed\"\n              style={{ color: tokens.textSecondary }}\n            >\n              Prefers spicy. Always orders extra pepper sauce. Remind on next\n              visit.\n            </p>\n            <p className=\"mt-2 text-3xs\" style={{ color: tokens.textTertiary }}>\n              Abraham · 2 weeks ago\n            </p>\n          </div>\n        </section>\n      </div>\n\n      <div\n        className=\"absolute inset-x-3 bottom-3 z-30 grid grid-cols-3 gap-2 rounded-[26px] border p-2\"\n        style={{\n          borderColor: tokens.border,\n          background: `${tokens.card}F2`,\n          backdropFilter: 'blur(12px)',\n        }}\n      >\n        <button\n          type=\"button\"\n          className=\"flex h-12 items-center justify-center gap-1.5 rounded-2xl border text-2xs font-medium text-white\"\n          style={{ borderColor: tokens.border, background: tokens.elevated }}\n        >\n          <MessageCircle className=\"size-4\" />\n          Message\n        </button>\n        <button\n          type=\"button\"\n          className=\"flex h-12 items-center justify-center gap-1.5 rounded-2xl border text-2xs font-medium text-white\"\n          style={{ borderColor: tokens.border, background: tokens.elevated }}\n        >\n          <Gift className=\"size-4\" />\n          Adjust pts\n        </button>\n        <button\n          type=\"button\"\n          className=\"flex h-12 items-center justify-center gap-1.5 rounded-2xl text-2xs font-semibold\"\n          style={{ background: tokens.accent, color: tokens.accentFg }}\n        >\n          <Plus className=\"size-4\" />\n          New order\n        </button>\n      </div>\n    </div>\n  );\n}\n\nexport function ContactAction({\n  icon: Icon,\n  label,\n}: {\n  icon: React.ComponentType<{ className?: string }>;\n  label: string;\n}) {\n  return (\n    <button\n      type=\"button\"\n      className=\"flex h-[52px] flex-col items-center justify-center gap-1 rounded-xl border text-3xs font-medium text-[#C9D0DD]\"\n      style={{\n        borderColor: 'rgba(17,109,255,0.20)',\n        background: 'rgba(17,109,255,0.10)',\n      }}\n    >\n      <Icon className=\"h-4 w-4\" />\n      {label}\n    </button>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/mobile/mobile-redesign-mockups/crm-customer-timeline-tab.d.ts

@@ -0,0 +1,10 @@
+/**
+ * CRM — Customer Timeline tab
+ *
+ * One chapter of the mobile visual contract. ~40 screens cite this file as
+ * the spec they implement, so the markup here is the artifact and is never
+ * converted onto primitives — see CLAUDE.md. Splitting it moves nothing:
+ * every screen is the same markup, in a file named for what it draws.
+ */
+export declare function CustomerTimeline(): import("react").JSX.Element;
+export declare function SegmentsHub(): import("react").JSX.Element;