@actioneer/ads 1.0.8 → 1.0.9

package/examples/campaigns-screen.tsx

@@ -0,0 +1,439 @@
+/**
+ * Campaigns screen — the ADS collection-screen recipe, built only from ADS exports.
+ *
+ * Follows principles `collection-screens`, `record-detail-panels`,
+ * `status-language` and `tabs-search-opposed` (see `get_principles`):
+ *
+ * - One white panel: BodyPageHeader (title + one primary action), then the
+ *   control row — Tabs with counts leading, SearchDisclosure then Filters as
+ *   icon triggers trailing — then the Table.
+ * - The rows fill the panel: the page size is derived from the height that is
+ *   left, so Pagination always sits on the panel's bottom edge.
+ * - Row checkboxes appear on hover (the header checkbox is always visible).
+ * - Clicking a row opens its detail panel beside the list and marks the row
+ *   with `isActive` — no radio, no modal.
+ * - The detail panel: kicker, title, status Chip + context under the title,
+ *   then Performance (stat cards + chart card) and Details (label–value rows).
+ * - New campaign opens as a Modal over the list (never a separate screen): one
+ *   scrolling form — Campaign name, Caller numbers, Audience — with Cancel and
+ *   Create campaign together in the footer.
+ *
+ * In a full app this screen sits inside the shell, next to the Sidebar
+ * (put the customer's logo in its brand slot with SidebarWorkspace).
+ * Copy it and replace CAMPAIGNS with your own records.
+ */
+import * as React from "react";
+import {
+  Avatar,
+  BodyPageHeader,
+  Button,
+  Checkbox,
+  Chip,
+  Drawer,
+  DrawerBody,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  FileDropzone,
+  Filters,
+  InputField,
+  LineChart,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalTitle,
+  Pagination,
+  SearchDisclosure,
+  SegmentedControl,
+  Tab,
+  TabList,
+  Table,
+  TableBody,
+  TableCell,
+  TableColumn,
+  TableHeader,
+  TableRow,
+  Tabs,
+  type FilterGroup,
+} from "@actioneer/ads";
+
+/** Business-language statuses, one tone per meaning (principle `status-language`). */
+export type CampaignStatus = "Active" | "Scheduled" | "Paused" | "Completed" | "Draft" | "Failed";
+
+export const STATUS_COLOR: Record<CampaignStatus, "info" | "warning" | "success" | "default" | "danger"> = {
+  Active: "info",
+  Scheduled: "info",
+  Paused: "warning",
+  Completed: "success",
+  Draft: "default",
+  Failed: "danger",
+};
+
+export interface CampaignRecord {
+  id: string;
+  name: string;
+  status: CampaignStatus;
+  leads: number;
+  connectRate: string;
+  booked: number;
+  owner: string;
+  started: string;
+  context: string;
+  callingWindows: number;
+  /** Connected calls for the last seven days. */
+  week: number[];
+  cohorts?: CampaignRecord[];
+}
+
+const week = (...values: number[]) => values;
+
+export const CAMPAIGNS: CampaignRecord[] = [
+  {
+    id: "q4", name: "Q4 renewal reminders", status: "Active", leads: 2400, connectRate: "44%", booked: 286, owner: "Divya Shetty", started: "Oct 22", context: "Running since Oct 22", callingWindows: 2, week: week(210, 260, 240, 310, 290, 180, 150),
+    cohorts: [
+      { id: "q4-blr", name: "Bengaluru cohort", status: "Active", leads: 1500, connectRate: "47%", booked: 188, owner: "Divya Shetty", started: "Oct 22", context: "Running since Oct 22", callingWindows: 2, week: week(140, 170, 160, 210, 190, 120, 100) },
+      { id: "q4-bom", name: "Mumbai cohort", status: "Paused", leads: 900, connectRate: "39%", booked: 98, owner: "Kiran Menon", started: "Oct 22", context: "Paused today at 11:40", callingWindows: 2, week: week(70, 90, 80, 100, 100, 60, 0) },
+    ],
+  },
+  { id: "emi", name: "Loan EMI nudges", status: "Completed", leads: 5120, connectRate: "41%", booked: 612, owner: "Vikram Nair", started: "Oct 14", context: "Finished Oct 21", callingWindows: 3, week: week(420, 510, 480, 620, 580, 310, 260) },
+  { id: "kyc", name: "KYC re-verification", status: "Active", leads: 3260, connectRate: "38%", booked: 402, owner: "Rohan Iyer", started: "Oct 20", context: "Running since Oct 20", callingWindows: 2, week: week(260, 300, 320, 340, 330, 280, 310) },
+  { id: "lapse", name: "Policy lapse win-back", status: "Draft", leads: 780, connectRate: "—", booked: 0, owner: "Asha Rao", started: "—", context: "Not launched", callingWindows: 1, week: week(0, 0, 0, 0, 0, 0, 0) },
+  { id: "card", name: "Card activation follow-up", status: "Scheduled", leads: 1840, connectRate: "—", booked: 0, owner: "Meera Pillai", started: "Oct 28", context: "Starts Oct 28 at 10:00", callingWindows: 2, week: week(0, 0, 0, 0, 0, 0, 0) },
+  { id: "payment", name: "Payment failure outreach", status: "Completed", leads: 1120, connectRate: "45%", booked: 151, owner: "Arjun Das", started: "Oct 12", context: "Finished Oct 19", callingWindows: 2, week: week(160, 190, 170, 210, 200, 70, 34) },
+  { id: "festive", name: "Festive offer callbacks", status: "Paused", leads: 640, connectRate: "36%", booked: 52, owner: "Neha Kapoor", started: "Oct 18", context: "Paused yesterday at 18:10", callingWindows: 1, week: week(60, 80, 70, 90, 88, 0, 0) },
+  { id: "abandoned", name: "Abandoned application recovery", status: "Active", leads: 4050, connectRate: "40%", booked: 377, owner: "Sanjay Rao", started: "Oct 18", context: "Running since Oct 18", callingWindows: 3, week: week(340, 380, 400, 420, 410, 330, 310) },
+  { id: "renewal-check", name: "Insurance renewal check-in", status: "Failed", leads: 2210, connectRate: "—", booked: 0, owner: "Kiran Menon", started: "Oct 16", context: "CRM writeback failed on Oct 16", callingWindows: 2, week: week(0, 0, 0, 0, 0, 0, 0) },
+  { id: "credit-limit", name: "Credit limit upgrade offer", status: "Completed", leads: 3480, connectRate: "43%", booked: 298, owner: "Divya Shetty", started: "Oct 08", context: "Finished Oct 15", callingWindows: 3, week: week(300, 320, 310, 360, 340, 120, 80) },
+  { id: "survey", name: "Home loan top-up survey", status: "Active", leads: 2730, connectRate: "35%", booked: 120, owner: "Asha Rao", started: "Oct 24", context: "Running since Oct 24", callingWindows: 1, week: week(0, 0, 120, 180, 210, 190, 160) },
+  { id: "welcome", name: "New account welcome calls", status: "Scheduled", leads: 960, connectRate: "—", booked: 0, owner: "Meera Pillai", started: "Nov 02", context: "Starts Nov 2 at 09:30", callingWindows: 1, week: week(0, 0, 0, 0, 0, 0, 0) },
+];
+
+/** Status tabs use the same words as the status chips. */
+const TABS: Array<{ value: "all" | CampaignStatus; label: string }> = [
+  { value: "all", label: "All" },
+  { value: "Draft", label: "Draft" },
+  { value: "Active", label: "Active" },
+  { value: "Paused", label: "Paused" },
+  { value: "Completed", label: "Completed" },
+];
+
+const INITIAL_FILTERS: FilterGroup[] = [
+  {
+    id: "owner",
+    label: "Owner",
+    value: "all",
+    options: [{ value: "all", label: "All owners" }, ...Array.from(new Set(CAMPAIGNS.map((c) => c.owner))).map((owner) => ({ value: owner, label: owner }))],
+  },
+  {
+    id: "windows",
+    label: "Calling windows",
+    value: "all",
+    options: [
+      { value: "all", label: "Any number" },
+      { value: "1", label: "1 window" },
+      { value: "2", label: "2 windows" },
+      { value: "3", label: "3 windows" },
+    ],
+  },
+];
+
+const ROW_HEIGHT = 64;
+/** Header row + footer (pagination) heights inside the table surface. */
+const TABLE_CHROME = 37 + 53;
+
+/** Derive the page size from the height left in the panel, so rows fill it. */
+function useRowsThatFit(ref: React.RefObject<HTMLDivElement | null>) {
+  const [rows, setRows] = React.useState(8);
+  React.useLayoutEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    const update = () => setRows(Math.max(3, Math.floor((node.clientHeight - TABLE_CHROME) / ROW_HEIGHT)));
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [ref]);
+  return rows;
+}
+
+function findCampaign(id: string | null): CampaignRecord | undefined {
+  if (!id) return undefined;
+  for (const campaign of CAMPAIGNS) {
+    if (campaign.id === id) return campaign;
+    const cohort = campaign.cohorts?.find((child) => child.id === id);
+    if (cohort) return cohort;
+  }
+  return undefined;
+}
+
+function CampaignCells({ campaign }: { campaign: CampaignRecord }) {
+  return (
+    <>
+      <TableCell>{campaign.name}</TableCell>
+      <TableCell>
+        <Chip color={STATUS_COLOR[campaign.status]}>{campaign.status}</Chip>
+      </TableCell>
+      <TableCell align="right" className="tabular-nums">{campaign.leads.toLocaleString("en-IN")}</TableCell>
+      <TableCell>
+        <span className="flex items-center gap-2">
+          <Avatar name={campaign.owner} size="sm" />
+          {campaign.owner}
+        </span>
+      </TableCell>
+    </>
+  );
+}
+
+/** Selection-driven detail panel (principle `record-detail-panels`). */
+export function CampaignDetail({ campaign, onClose }: { campaign: CampaignRecord | undefined; onClose: () => void }) {
+  return (
+    <Drawer open={Boolean(campaign)} onOpenChange={(open) => !open && onClose()} aria-label="Campaign details">
+      {campaign && (
+        <>
+          <DrawerHeader>
+            <p className="text-xs uppercase tracking-wide text-secondary">Campaign</p>
+            <DrawerTitle>{campaign.name}</DrawerTitle>
+            {/* Status lives with the title, so it never floats on its own. */}
+            <div className="mt-1 flex items-center gap-2">
+              <Chip color={STATUS_COLOR[campaign.status]}>{campaign.status}</Chip>
+              <span className="text-s text-secondary">{campaign.context}</span>
+            </div>
+          </DrawerHeader>
+          <DrawerBody className="flex flex-col gap-8 overflow-y-auto">
+            <section aria-label="Performance" className="flex flex-col gap-2">
+              <h3 className="mb-1 text-m font-medium text-foreground">Performance</h3>
+              <dl className="grid grid-cols-3 gap-2">
+                {[
+                  { label: "Leads", value: campaign.leads.toLocaleString("en-IN") },
+                  { label: "Connect rate", value: campaign.connectRate },
+                  { label: "Booked", value: campaign.booked.toLocaleString("en-IN") },
+                ].map((stat) => (
+                  <div key={stat.label} className="min-w-0 rounded-l border border-tertiary p-3">
+                    <dt className="truncate text-s text-secondary">{stat.label}</dt>
+                    <dd className="mt-0.5 text-xl tabular-nums text-foreground">{stat.value}</dd>
+                  </div>
+                ))}
+              </dl>
+              <div className="rounded-l border border-tertiary p-4">
+                <LineChart
+                  title={<span className="text-s font-normal text-secondary">Connected calls · last 7 days</span>}
+                  data={campaign.week.map((calls, index) => ({ day: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"][index], calls }))}
+                  categoryKey="day"
+                  series={["calls"]}
+                  seriesLabels={{ calls: "Connected" }}
+                  legend={false}
+                  showYAxis={false}
+                  height={160}
+                />
+              </div>
+            </section>
+            <section aria-label="Details" className="flex flex-col gap-1">
+              <h3 className="text-m font-medium text-foreground">Details</h3>
+              <dl>
+                {[
+                  { label: "Owner", value: campaign.owner },
+                  { label: "Started", value: campaign.started },
+                  { label: "Calling windows", value: String(campaign.callingWindows) },
+                ].map((row) => (
+                  <div key={row.label} className="flex min-h-10 items-center justify-between gap-3 border-b border-tertiary last:border-0">
+                    <dt className="text-m text-secondary">{row.label}</dt>
+                    <dd className="text-m text-foreground">{row.value}</dd>
+                  </div>
+                ))}
+              </dl>
+            </section>
+          </DrawerBody>
+          <DrawerFooter>
+            <Button variant="outline">Duplicate</Button>
+            <Button>Open full view</Button>
+          </DrawerFooter>
+        </>
+      )}
+    </Drawer>
+  );
+}
+
+const SAVED_AUDIENCES = [
+  { id: "0019b431", name: "CSV audience 0019b431", size: 6 },
+  { id: "b190b191", name: "CSV audience b190b191", size: 868 },
+  { id: "5ee46ae6", name: "CSV audience 5ee46ae6", size: 162 },
+  { id: "9dc3d0b1", name: "CSV audience 9dc3d0b1", size: 188 },
+];
+
+/** Create task launched from the collection: a Modal over the list (principle `minimal-information`). */
+export function NewCampaignModal({ open, onOpenChange }: { open: boolean; onOpenChange: (open: boolean) => void }) {
+  const [name, setName] = React.useState("");
+  const [useNumber, setUseNumber] = React.useState(false);
+  const [audience, setAudience] = React.useState("csv");
+  const [query, setQuery] = React.useState("");
+  const audiences = SAVED_AUDIENCES.filter((item) => item.name.toLowerCase().includes(query.trim().toLowerCase()));
+
+  return (
+    <Modal open={open} onOpenChange={onOpenChange} height="fixed">
+      <ModalHeader>
+        <ModalTitle>New campaign</ModalTitle>
+      </ModalHeader>
+      <ModalBody className="flex flex-col gap-6">
+        <InputField label="Campaign name" value={name} onChange={(event) => setName(event.target.value)} placeholder="First-EMI onboarding" />
+        <div className="flex flex-col gap-2">
+          <p className="text-m font-medium text-foreground">Caller numbers</p>
+          <div className="flex min-h-12 items-center gap-3 rounded-m border border-input px-3">
+            <Checkbox aria-label="+91 22 6987 0900" checked={useNumber} onChange={(event) => setUseNumber(event.target.checked)} />
+            <span className="flex-1 text-m tabular-nums text-foreground">+91 22 6987 0900</span>
+            <Chip>Plivo</Chip>
+          </div>
+          <p className="text-s text-secondary">Optional. Tick none to call from any enabled number; you can change this later, even while it is calling.</p>
+        </div>
+        <div className="flex flex-col gap-3">
+          <p className="text-m font-medium text-foreground">Audience</p>
+          <SegmentedControl
+            aria-label="Audience source"
+            options={[{ value: "csv", label: "CSV upload" }, { value: "empty", label: "Empty audience" }]}
+            value={audience}
+            onChange={setAudience}
+          />
+          {audience === "csv" && (
+            <>
+              <InputField aria-label="Search audiences" type="search" placeholder="Search audiences" value={query} onChange={(event) => setQuery(event.target.value)} />
+              <FileDropzone accept=".csv,.xlsx" hint="CSV or first-sheet .xlsx with a phone column; name and other columns are optional" />
+              <ul aria-label="Saved audiences" className="rounded-m border border-input px-3">
+                {audiences.map((item) => (
+                  <li key={item.id} className="flex min-h-10 items-center justify-between gap-3 border-b border-tertiary text-m last:border-0">
+                    <span className="text-foreground">{item.name}</span>
+                    <span className="tabular-nums text-secondary">{item.size.toLocaleString("en-IN")}</span>
+                  </li>
+                ))}
+              </ul>
+            </>
+          )}
+        </div>
+      </ModalBody>
+      <ModalFooter>
+        <Button variant="outline" onClick={() => onOpenChange(false)}>Cancel</Button>
+        <Button disabled={!name.trim()} onClick={() => onOpenChange(false)}>Create campaign</Button>
+      </ModalFooter>
+    </Modal>
+  );
+}
+
+export function CampaignsScreen() {
+  const [tab, setTab] = React.useState<"all" | CampaignStatus>("all");
+  const [search, setSearch] = React.useState("");
+  const [searchOpen, setSearchOpen] = React.useState(false);
+  const [filters, setFilters] = React.useState(INITIAL_FILTERS);
+  const [selectedKeys, setSelectedKeys] = React.useState<Set<string>>(new Set());
+  const [openId, setOpenId] = React.useState<string | null>(null);
+  const [page, setPage] = React.useState(1);
+  const [creating, setCreating] = React.useState(false);
+  const rowsRef = React.useRef<HTMLDivElement>(null);
+  const pageSize = useRowsThatFit(rowsRef);
+
+  const owner = filters.find((group) => group.id === "owner")?.value ?? "all";
+  const windows = filters.find((group) => group.id === "windows")?.value ?? "all";
+  const query = search.trim().toLowerCase();
+  const visible = CAMPAIGNS.filter(
+    (c) =>
+      (tab === "all" || c.status === tab) &&
+      (owner === "all" || c.owner === owner) &&
+      (windows === "all" || String(c.callingWindows) === windows) &&
+      (!query || c.name.toLowerCase().includes(query)),
+  );
+  const pages = Math.max(1, Math.ceil(visible.length / pageSize));
+  const current = Math.min(page, pages);
+  const pageRows = visible.slice((current - 1) * pageSize, current * pageSize);
+  const countFor = (value: "all" | CampaignStatus) =>
+    value === "all" ? CAMPAIGNS.length : CAMPAIGNS.filter((c) => c.status === value).length;
+
+  return (
+    <div className="flex h-screen gap-3 bg-background p-3 text-foreground">
+      <section aria-label="Voice campaigns" className="flex min-w-0 flex-1 flex-col overflow-hidden rounded-l bg-card">
+        <BodyPageHeader title="Voice campaigns" actions={<Button onClick={() => setCreating(true)}>New campaign</Button>} />
+
+        {/* Tabs lead; search and filters trail as icon triggers. */}
+        <div className="flex items-center justify-between gap-4 px-6">
+          <Tabs className="min-w-0 flex-1" value={tab} onValueChange={(value) => { setTab(value as typeof tab); setPage(1); }}>
+            <TabList aria-label="Filter campaigns by status">
+              {TABS.map((item) => (
+                <Tab key={item.value} value={item.value} count={countFor(item.value)}>
+                  {item.label}
+                </Tab>
+              ))}
+            </TabList>
+          </Tabs>
+          <div className="flex shrink-0 items-center gap-2">
+            <SearchDisclosure
+              value={search}
+              onValueChange={(value) => { setSearch(value); setPage(1); }}
+              open={searchOpen}
+              onOpenChange={setSearchOpen}
+              placeholder="Search campaigns"
+              triggerLabel="Search campaigns"
+            />
+            <Filters
+              triggerLabel="Filter campaigns"
+              groups={filters}
+              onChange={(id, value) => { setFilters((groups) => groups.map((group) => (group.id === id ? { ...group, value } : group))); setPage(1); }}
+            />
+          </div>
+        </div>
+
+        {/* The rows fill what is left of the panel; pagination sits at the bottom. */}
+        <div ref={rowsRef} className="min-h-0 flex-1 px-6 pt-4 pb-6">
+          <Table
+            aria-label="Voice campaigns"
+            selectionMode="multiple"
+            selectedKeys={selectedKeys}
+            onSelectionChange={setSelectedKeys}
+            footer={
+              <Pagination
+                className="w-full"
+                total={pages}
+                page={current}
+                onChange={setPage}
+                summary={`${visible.length === 0 ? 0 : (current - 1) * pageSize + 1}–${Math.min(current * pageSize, visible.length)} of ${visible.length} campaigns`}
+              />
+            }
+          >
+            <TableHeader>
+              <TableRow>
+                <TableColumn>Campaign</TableColumn>
+                <TableColumn>Status</TableColumn>
+                <TableColumn align="right">Leads</TableColumn>
+                <TableColumn>Owner</TableColumn>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {pageRows.map((campaign) => (
+                <TableRow
+                  key={campaign.id}
+                  rowKey={campaign.id}
+                  aria-label={`Open ${campaign.name}`}
+                  isActive={openId === campaign.id}
+                  onClick={() => setOpenId((id) => (id === campaign.id ? null : campaign.id))}
+                  childRows={campaign.cohorts?.map((cohort) => (
+                    <TableRow
+                      key={cohort.id}
+                      rowKey={cohort.id}
+                      aria-label={`Open ${cohort.name}`}
+                      isActive={openId === cohort.id}
+                      onClick={() => setOpenId((id) => (id === cohort.id ? null : cohort.id))}
+                    >
+                      <CampaignCells campaign={cohort} />
+                    </TableRow>
+                  ))}
+                  defaultExpanded={Boolean(campaign.cohorts)}
+                >
+                  <CampaignCells campaign={campaign} />
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      </section>
+
+      <CampaignDetail campaign={findCampaign(openId)} onClose={() => setOpenId(null)} />
+      <NewCampaignModal open={creating} onOpenChange={setCreating} />
+    </div>
+  );
+}

package/lib/icons.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs as p, Fragment as d, jsx as a } from "react/jsx-runtime";
 import * as r from "react";
-import { Code as $, Check as k, Copy as S, FileText as f, UploadSimple as P, X as T, EyeSlash as w, Eye as L, MagnifyingGlass as A, Minus as m, Plus as x, CaretDown as B, Info as I, WarningCircle as y, Warning as U, CheckCircle as F, CaretRight as M, CaretUp as D, ArrowsDownUp as O, ChatCircle as b, ArrowUpRight as R, Clock as v, Database as H, ArrowSquareOut as E, Table as G, CaretLeft as W, CornersOut as z, Magnet as V, Tray as N, ArrowLeft as j, DotsThree as X, User as Q, XCircle as q, CircleDashed as _, ArrowsClockwise as J, Paperclip as K, Quotes as Y, At as Z, Lightning as ee, Sparkle as oe, File as te, DownloadSimple as ne, Image as C, BracketsCurly as se, MusicNotes as ae, VideoCamera as re, ImageBroken as ce, Pulse as ie, Archive as le, ArrowDown as he, ArrowRight as Ce, ArrowUp as ge, Scroll as ue, Bell as pe, Stack as de, BookOpen as $e, Brain as ke, CalendarBlank as Se, Phone as fe, ListChecks as Pe, Cube as Te, DotsNine as we, FunnelSimple as Le, Folder as Ae, FolderOpen as me, Gauge as xe, GitBranch as Be, Hash as Ie, ClockCounterClockwise as ye, House as Ue, SquaresFour as Fe, Leaf as Me, Lightbulb as De, Link as Oe, CircleNotch as be, SignOut as Re, Envelope as ve, Microphone as He, MicrophoneSlash as Ee, DotsThreeVertical as Ge, Palette as We, SidebarSimple as ze, Pause as Ve, PencilSimple as Ne, PhoneIncoming as je, PhoneSlash as Xe, ChartPie as Qe, Play as qe, Plug as _e, Presentation as Je, Rocket as Ke, Gear as Ye, Shapes as Ze, ShareNetwork as eo, Star as oo, Stop as to, ArrowsLeftRight as no, Target as so, Binoculars as ao, TextB as ro, TextT as co, TextItalic as io, TextStrikethrough as lo, TextUnderline as ho, ToggleRight as Co, Trash as go, Users as uo, Wrench as po } from "@phosphor-icons/react";
+import { Code as $, Check as k, Copy as S, FileText as f, UploadSimple as P, X as T, EyeSlash as w, Eye as L, MagnifyingGlass as A, Minus as m, Plus as x, CaretDown as B, FunnelSimple as I, Info as y, WarningCircle as U, Warning as F, CheckCircle as M, CaretRight as D, CaretUp as O, ArrowsDownUp as b, ChatCircle as R, ArrowUpRight as v, Clock as H, Database as E, ArrowSquareOut as G, Table as W, CaretLeft as z, CornersOut as V, Magnet as N, Tray as j, ArrowLeft as X, DotsThree as Q, User as q, XCircle as _, CircleDashed as J, ArrowsClockwise as K, Paperclip as Y, Quotes as Z, At as ee, Lightning as oe, Sparkle as te, File as ne, DownloadSimple as se, Image as C, BracketsCurly as ae, MusicNotes as re, VideoCamera as ce, ImageBroken as ie, Pulse as le, Archive as he, ArrowDown as Ce, ArrowRight as ge, ArrowUp as ue, Scroll as pe, Bell as de, Stack as $e, BookOpen as ke, Brain as Se, CalendarBlank as fe, Phone as Pe, ListChecks as Te, Cube as we, DotsNine as Le, Folder as Ae, FolderOpen as me, Gauge as xe, GitBranch as Be, Hash as Ie, ClockCounterClockwise as ye, House as Ue, SquaresFour as Fe, Leaf as Me, Lightbulb as De, Link as Oe, CircleNotch as be, SignOut as Re, Envelope as ve, Microphone as He, MicrophoneSlash as Ee, DotsThreeVertical as Ge, Palette as We, SidebarSimple as ze, Pause as Ve, PencilSimple as Ne, PhoneIncoming as je, PhoneSlash as Xe, ChartPie as Qe, Play as qe, Plug as _e, Presentation as Je, Rocket as Ke, Gear as Ye, Shapes as Ze, ShareNetwork as eo, Star as oo, Stop as to, ArrowsLeftRight as no, Target as so, Binoculars as ao, TextB as ro, TextT as co, TextItalic as io, TextStrikethrough as lo, TextUnderline as ho, ToggleRight as Co, Trash as go, Users as uo, Wrench as po } from "@phosphor-icons/react";
 const $o = r.createContext(!1), ko = /* @__PURE__ */ new Set(["Info"]), So = new Set(
   [
     "FunnelSimple",
@@ -58,10 +58,10 @@ function e(o, c) {
   });
   return i.displayName = c, i;
 }
-const wo = e(he, "ArrowDown"), Lo = e(j, "ArrowLeft"), Ao = e(Ce, "ArrowRight"), mo = e(ge, "ArrowUp"), xo = e(R, "ArrowUpRight"), Bo = e(B, "ChevronDown"), Io = e(W, "ChevronLeft"), yo = e(M, "ChevronRight"), Uo = e(D, "ChevronUp"), Fo = e(O, "SortIcon"), Mo = e(no, "SwapHorizontal"), Do = e(E, "ExternalLink"), Oo = e(ze, "PanelLeft"), bo = e(Z, "At"), Ro = e(fe, "Call"), vo = e(je, "PhoneIncoming"), Ho = e(T, "Close"), Eo = e(q, "CloseCircle"), Go = e(S, "Copy"), Wo = e(ne, "Download"), zo = e(Re, "LogOut"), Vo = e(He, "Mic"), No = e(Ee, "MicOff"), jo = e(Xe, "PhoneOff"), Xo = e(Ne, "Pencil"), Qo = e(Y, "Quote"), qo = e(L, "Eye"), _o = e(w, "EyeOff"), Jo = e(Ie, "Hash"), Ko = e(C, "ImageUpload"), Yo = e(P, "Upload"), Zo = e(co, "TextFont"), et = e(ro, "TextBold"), ot = e(io, "TextItalicStyle"), tt = e(lo, "TextStrike"), nt = e(
+const wo = e(Ce, "ArrowDown"), Lo = e(X, "ArrowLeft"), Ao = e(ge, "ArrowRight"), mo = e(ue, "ArrowUp"), xo = e(v, "ArrowUpRight"), Bo = e(B, "ChevronDown"), Io = e(z, "ChevronLeft"), yo = e(D, "ChevronRight"), Uo = e(O, "ChevronUp"), Fo = e(b, "SortIcon"), Mo = e(no, "SwapHorizontal"), Do = e(G, "ExternalLink"), Oo = e(ze, "PanelLeft"), bo = e(ee, "At"), Ro = e(Pe, "Call"), vo = e(je, "PhoneIncoming"), Ho = e(T, "Close"), Eo = e(_, "CloseCircle"), Go = e(S, "Copy"), Wo = e(se, "Download"), zo = e(Re, "LogOut"), Vo = e(He, "Mic"), No = e(Ee, "MicOff"), jo = e(Xe, "PhoneOff"), Xo = e(Ne, "Pencil"), Qo = e(Z, "Quote"), qo = e(L, "Eye"), _o = e(w, "EyeOff"), Jo = e(Ie, "Hash"), Ko = e(C, "ImageUpload"), Yo = e(P, "Upload"), Zo = e(co, "TextFont"), et = e(ro, "TextBold"), ot = e(io, "TextItalicStyle"), tt = e(lo, "TextStrike"), nt = e(
   ho,
   "TextUnderlineStyle"
-), st = e(Co, "ToggleOn"), at = e(Se, "Calendar"), rt = e(v, "Clock"), ct = e($, "Code"), it = e(to, "Stop"), lt = e(V, "Magnet"), ht = e(z, "Maximize"), Ct = e(m, "Minus"), gt = e(X, "MoreHorizontal"), ut = e(Ge, "MoreVertical"), pt = e(we, "DragHandle"), dt = e(Oe, "Link"), $t = e(x, "Plus"), kt = e(J, "Refresh"), St = e(ue, "AuditTrail"), ft = e(A, "Search"), Pt = e(eo, "Share"), Tt = e(go, "Trash"), wt = e(k, "Check"), Lt = e(be, "Loader"), At = e(F, "CheckCircle"), mt = e(I, "Info"), xt = e(U, "Warning"), Bt = e(pe, "Bell"), It = e(y, "WarningCircle"), yt = e(ie, "Activity"), Ut = e(b, "AgentChat"), Ft = e(ee, "Bolt"), Mt = e($e, "BookOpen"), Dt = e(ke, "Brain"), Ot = e(Pe, "CheckList"), bt = e(Te, "Component"), Rt = e(H, "Database"), vt = e(G, "Table"), Ht = e(Le, "Filter"), Et = e(le, "Archive"), Gt = e(te, "File"), Wt = e(f, "FileText"), zt = e(Ae, "Folder"), Vt = e(C, "Image"), Nt = e(ce, "ImageOff"), jt = e(ae, "Music"), Xt = e(re, "Video"), Qt = e(se, "Braces"), qt = e(me, "FolderOpen"), _t = e(xe, "Gauge"), Jt = e(Be, "GitBranch"), Kt = e(ye, "HistoryClock"), Yt = e(Ue, "Home"), Zt = e(de, "Blocks"), en = e(N, "Inbox"), on = e(De, "Lightbulb"), tn = e(Me, "Leaf"), nn = e(Fe, "LayoutGrid"), sn = e(ve, "Mail"), an = e(We, "Palette"), rn = e(Qe, "PieChart"), cn = e(_e, "Plug"), ln = e(Ke, "Rocket"), hn = e(Ye, "Settings"), Cn = e(Ze, "Shapes"), gn = e(oe, "Sparkles"), un = e(oo, "Star"), pn = e(ao, "Telescope"), dn = e(so, "Target"), $n = e(Q, "User"), kn = e(uo, "Users"), Sn = e(qe, "Play"), fn = e(Je, "Presentation"), Pn = e(Ve, "Pause"), Tn = e(K, "Paperclip"), wn = e(_, "CircleDashed"), Ln = e(po, "Wrench");
+), st = e(Co, "ToggleOn"), at = e(fe, "Calendar"), rt = e(H, "Clock"), ct = e($, "Code"), it = e(to, "Stop"), lt = e(N, "Magnet"), ht = e(V, "Maximize"), Ct = e(m, "Minus"), gt = e(Q, "MoreHorizontal"), ut = e(Ge, "MoreVertical"), pt = e(Le, "DragHandle"), dt = e(Oe, "Link"), $t = e(x, "Plus"), kt = e(K, "Refresh"), St = e(pe, "AuditTrail"), ft = e(A, "Search"), Pt = e(eo, "Share"), Tt = e(go, "Trash"), wt = e(k, "Check"), Lt = e(be, "Loader"), At = e(M, "CheckCircle"), mt = e(y, "Info"), xt = e(F, "Warning"), Bt = e(de, "Bell"), It = e(U, "WarningCircle"), yt = e(le, "Activity"), Ut = e(R, "AgentChat"), Ft = e(oe, "Bolt"), Mt = e(ke, "BookOpen"), Dt = e(Se, "Brain"), Ot = e(Te, "CheckList"), bt = e(we, "Component"), Rt = e(E, "Database"), vt = e(W, "Table"), Ht = e(I, "Filter"), Et = e(he, "Archive"), Gt = e(ne, "File"), Wt = e(f, "FileText"), zt = e(Ae, "Folder"), Vt = e(C, "Image"), Nt = e(ie, "ImageOff"), jt = e(re, "Music"), Xt = e(ce, "Video"), Qt = e(ae, "Braces"), qt = e(me, "FolderOpen"), _t = e(xe, "Gauge"), Jt = e(Be, "GitBranch"), Kt = e(ye, "HistoryClock"), Yt = e(Ue, "Home"), Zt = e($e, "Blocks"), en = e(j, "Inbox"), on = e(De, "Lightbulb"), tn = e(Me, "Leaf"), nn = e(Fe, "LayoutGrid"), sn = e(ve, "Mail"), an = e(We, "Palette"), rn = e(Qe, "PieChart"), cn = e(_e, "Plug"), ln = e(Ke, "Rocket"), hn = e(Ye, "Settings"), Cn = e(Ze, "Shapes"), gn = e(te, "Sparkles"), un = e(oo, "Star"), pn = e(ao, "Telescope"), dn = e(so, "Target"), $n = e(q, "User"), kn = e(uo, "Users"), Sn = e(qe, "Play"), fn = e(Je, "Presentation"), Pn = e(Ve, "Pause"), Tn = e(Y, "Paperclip"), wn = e(J, "CircleDashed"), Ln = e(po, "Wrench");
 export {
   yt as Activity,
   Ut as AgentChat,