@synergenius/flow-weaver-pack-weaver 0.9.59 → 0.9.77

package/dist/ui/bot-slot-card.js

@@ -0,0 +1,141 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/ui/bot-slot-card.tsx
+var bot_slot_card_exports = {};
+__export(bot_slot_card_exports, {
+  BotSlotCard: () => BotSlotCard,
+  default: () => bot_slot_card_default
+});
+module.exports = __toCommonJS(bot_slot_card_exports);
+var import_react = __toESM(require("react"), 1);
+var import_plugin_ui_kit = require("@fw/plugin-ui-kit");
+var statusToLabel = {
+  idle: "Idle",
+  executing: "Executing",
+  paused: "Paused",
+  stopped: "Stopped"
+};
+function formatTokens(n) {
+  if (n >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
+  if (n >= 1e3) return `${(n / 1e3).toFixed(1)}k`;
+  return String(n);
+}
+function formatCost(n) {
+  if (n < 0.01 && n > 0) return "<$0.01";
+  return `$${n.toFixed(2)}`;
+}
+function BotSlotCard({ bot, currentTaskTitle, profileName, botDisplayName, botIcon, botColor, onPause, onResume, onStop }) {
+  const { botId, botName, status, currentTaskId, tokensUsed, cost } = bot;
+  const isExecuting = status === "executing";
+  const isPaused = status === "paused";
+  const label = statusToLabel[status] ?? status;
+  const taskText = isExecuting ? currentTaskTitle || currentTaskId || "-" : "-";
+  return import_react.default.createElement(
+    import_plugin_ui_kit.Flex,
+    {
+      variant: "row-center-start-nowrap-8",
+      style: { padding: "6px 16px", minHeight: "38px", borderBottom: "1px solid var(--color-border-default)" }
+    },
+    // Instance name
+    import_react.default.createElement(import_plugin_ui_kit.Typography, {
+      variant: "smallCaption-regular",
+      color: "color-text-high",
+      style: { width: "120px", flexShrink: 0 }
+    }, profileName ? `${profileName} #${botId.split("-").pop() ?? "0"}` : botName),
+    // Bot (icon + name)
+    import_react.default.createElement(
+      import_plugin_ui_kit.Flex,
+      {
+        variant: "row-center-start-nowrap-4",
+        style: { width: "110px", flexShrink: 0, color: botColor ? `var(--${botColor})` : void 0 }
+      },
+      import_react.default.createElement(import_plugin_ui_kit.Icon, { name: botIcon || "smartToy", size: 12 }),
+      import_react.default.createElement(import_plugin_ui_kit.Typography, {
+        variant: "smallCaption-regular",
+        color: "color-text-subtle"
+      }, botDisplayName || "-")
+    ),
+    // Status
+    import_react.default.createElement(import_plugin_ui_kit.Typography, {
+      variant: "smallCaption-regular",
+      color: isExecuting ? "color-brand-main" : "color-text-subtle",
+      style: { width: "70px", flexShrink: 0 }
+    }, label),
+    // Current task
+    import_react.default.createElement(import_plugin_ui_kit.Typography, {
+      variant: "smallCaption-regular",
+      color: isExecuting ? "color-text-medium" : "color-text-subtle",
+      style: { flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }
+    }, taskText),
+    // Tokens
+    import_react.default.createElement(import_plugin_ui_kit.Typography, {
+      variant: "smallCaption-regular",
+      color: "color-text-subtle",
+      style: { width: "50px", flexShrink: 0, textAlign: "right" }
+    }, formatTokens(tokensUsed)),
+    // Cost
+    import_react.default.createElement(import_plugin_ui_kit.Typography, {
+      variant: "smallCaption-regular",
+      color: "color-text-subtle",
+      style: { width: "50px", flexShrink: 0, textAlign: "right" }
+    }, formatCost(cost)),
+    // Actions
+    import_react.default.createElement(
+      import_plugin_ui_kit.Flex,
+      {
+        variant: "row-center-end-nowrap-1",
+        style: { width: "50px", flexShrink: 0 }
+      },
+      isExecuting && onPause && import_react.default.createElement(import_plugin_ui_kit.IconButton, {
+        icon: "pause",
+        size: "xs",
+        variant: "clear",
+        onClick: () => onPause(botId),
+        title: "Pause"
+      }),
+      isPaused && onResume && import_react.default.createElement(import_plugin_ui_kit.IconButton, {
+        icon: "playArrow",
+        size: "xs",
+        variant: "clear",
+        onClick: () => onResume(botId),
+        title: "Resume"
+      }),
+      (isExecuting || isPaused) && onStop && import_react.default.createElement(import_plugin_ui_kit.IconButton, {
+        icon: "stop",
+        size: "xs",
+        variant: "clear",
+        color: "danger",
+        onClick: () => onStop(botId),
+        title: "Stop"
+      })
+    )
+  );
+}
+var bot_slot_card_default = BotSlotCard;

package/dist/ui/budget-bar.js

@@ -0,0 +1,59 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/ui/budget-bar.tsx
+var budget_bar_exports = {};
+__export(budget_bar_exports, {
+  BudgetBar: () => BudgetBar,
+  default: () => budget_bar_default
+});
+module.exports = __toCommonJS(budget_bar_exports);
+var React = require("react");
+var { Flex, Typography } = require("@fw/plugin-ui-kit");
+function BudgetBar({ label, used, limit, unit }) {
+  const pct = limit > 0 ? Math.min(100, used / limit * 100) : 0;
+  const color = pct > 90 ? "var(--color-status-negative)" : pct > 70 ? "var(--color-status-caution)" : "var(--color-brand-main)";
+  return React.createElement(
+    Flex,
+    { variant: "column-start-start-nowrap-2", style: { width: "100%" } },
+    React.createElement(
+      Flex,
+      { variant: "row-center-space-between-nowrap-4" },
+      React.createElement(Typography, { variant: "smallCaption-regular", color: "color-text-subtle" }, label),
+      React.createElement(
+        Typography,
+        { variant: "smallCaption-regular", color: "color-text-subtle" },
+        `${used.toLocaleString()} / ${limit.toLocaleString()} ${unit}`
+      )
+    ),
+    React.createElement(
+      Flex,
+      {
+        variant: "row-start-start-nowrap-0",
+        style: { width: "100%", height: "4px", borderRadius: "2px", backgroundColor: "var(--color-surface-raised)", overflow: "hidden" }
+      },
+      React.createElement(Flex, {
+        variant: "row-start-start-nowrap-0",
+        style: { width: `${pct}%`, height: "100%", borderRadius: "2px", backgroundColor: color, transition: "width 0.3s" }
+      })
+    )
+  );
+}
+var budget_bar_default = BudgetBar;
+module.exports = BudgetBar;

package/dist/ui/chat-task-result.js

@@ -0,0 +1,178 @@
+"use strict";
+
+// src/ui/chat-task-result.tsx
+var React = require("react");
+var { useState, useEffect, useCallback, useRef } = React;
+var { Flex, Typography, StatusIcon, Button } = require("@fw/plugin-ui-kit");
+function parseResult(result) {
+  try {
+    const parsed = typeof result === "string" ? JSON.parse(result) : result;
+    if (!parsed || typeof parsed !== "object") return { task: null, subtasks: [] };
+    const obj = parsed;
+    const task = obj.task ?? parsed;
+    const subtasks = Array.isArray(obj.subtasks) ? obj.subtasks : [];
+    return { task: task?.id ? task : null, subtasks };
+  } catch {
+    return { task: null, subtasks: [] };
+  }
+}
+function statusToIcon(status) {
+  switch (status) {
+    case "pending":
+    case "blocked":
+      return "pending";
+    case "in-progress":
+      return "running";
+    case "done":
+      return "completed";
+    case "failed":
+    case "cancelled":
+      return "failed";
+    default:
+      return "pending";
+  }
+}
+function statusLabel(status) {
+  switch (status) {
+    case "pending":
+      return "Pending";
+    case "in-progress":
+      return "In Progress";
+    case "blocked":
+      return "Blocked";
+    case "done":
+      return "Done";
+    case "failed":
+      return "Failed";
+    case "cancelled":
+      return "Cancelled";
+    default:
+      return status;
+  }
+}
+function isTerminal(status) {
+  return status === "done" || status === "failed" || status === "cancelled";
+}
+function ChatTaskResult({ result, args, callTool, openWorkspace }) {
+  const initial = parseResult(result);
+  const [task, setTask] = useState(initial.task);
+  const [subtasks, setSubtasks] = useState(initial.subtasks);
+  const mountedRef = useRef(true);
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  useEffect(() => {
+    if (!task?.id) return;
+    if (isTerminal(task.status)) return;
+    const poll = async () => {
+      try {
+        const raw = await callTool("fw_weaver_task_get", { id: task.id });
+        if (!mountedRef.current) return;
+        const { task: updated, subtasks: updatedSubs } = parseResult(raw);
+        if (updated) {
+          setTask(updated);
+          if (updatedSubs.length > 0) setSubtasks(updatedSubs);
+        }
+      } catch {
+      }
+    };
+    const interval = setInterval(poll, 3e3);
+    const timeout = setTimeout(poll, 1e3);
+    return () => {
+      clearInterval(interval);
+      clearTimeout(timeout);
+    };
+  }, [task?.id, task?.status, callTool]);
+  if (!task) {
+    return React.createElement(
+      Flex,
+      {
+        variant: "row-center-start-nowrap-10",
+        style: {
+          borderRadius: "var(--border-radius-regular)",
+          border: "1px solid var(--color-border-default)",
+          backgroundColor: "var(--color-surface-low)"
+        }
+      },
+      React.createElement(StatusIcon, { status: "pending", size: "sm" }),
+      React.createElement(Typography, {
+        variant: "caption-thick",
+        color: "color-text-medium"
+      }, "Task created")
+    );
+  }
+  const doneCount = subtasks.filter((s) => s.status === "done").length;
+  const totalCount = subtasks.length;
+  const hasSubtasks = task.isParent && totalCount > 0;
+  const botLabel = task.currentBotId ? `Bot: ${task.currentBotId}` : task.assignedProfile ? `Profile: ${task.assignedProfile}` : null;
+  const handleOpenDashboard = useCallback(() => {
+    openWorkspace({
+      packId: "@synergenius/flow-weaver-pack-weaver",
+      taskId: task.id
+    });
+  }, [openWorkspace, task.id]);
+  return React.createElement(
+    Flex,
+    {
+      variant: "row-center-start-nowrap-10",
+      style: {
+        borderRadius: "var(--border-radius-regular)",
+        border: "1px solid var(--color-border-default)",
+        backgroundColor: "var(--color-surface-low)"
+      }
+    },
+    // Status icon
+    React.createElement(StatusIcon, {
+      status: statusToIcon(task.status),
+      size: "sm"
+    }),
+    // Title + meta column
+    React.createElement(
+      Flex,
+      {
+        variant: "column-start-start-nowrap-2",
+        style: { flex: 1, minWidth: 0 }
+      },
+      // Title row
+      React.createElement(Typography, {
+        variant: "caption-thick",
+        color: "color-text-high",
+        truncate: true
+      }, task.title),
+      // Status + subtask progress + bot
+      React.createElement(
+        Flex,
+        {
+          variant: "row-center-start-wrap-8"
+        },
+        // Status label
+        React.createElement(Typography, {
+          variant: "smallCaption-regular",
+          color: task.status === "done" ? "color-text-positive" : task.status === "failed" ? "color-text-negative" : task.status === "in-progress" ? "color-text-info" : "color-text-medium"
+        }, statusLabel(task.status)),
+        // Subtask progress
+        hasSubtasks && React.createElement(Typography, {
+          variant: "smallCaption-regular",
+          color: "color-text-medium"
+        }, `${doneCount}/${totalCount} done`),
+        // Bot
+        botLabel && React.createElement(Typography, {
+          variant: "smallCaption-regular",
+          color: "color-text-low",
+          truncate: true
+        }, botLabel)
+      )
+    ),
+    // Open Dashboard button
+    React.createElement(Button, {
+      size: "xs",
+      variant: "clear",
+      color: "secondary",
+      onClick: handleOpenDashboard
+    }, "Open Dashboard")
+  );
+}
+module.exports = ChatTaskResult;

package/dist/ui/decision-log.js

@@ -0,0 +1,136 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/ui/decision-log.tsx
+var decision_log_exports = {};
+__export(decision_log_exports, {
+  DecisionLog: () => DecisionLog,
+  default: () => decision_log_default
+});
+module.exports = __toCommonJS(decision_log_exports);
+var React = require("react");
+var {
+  Flex,
+  Typography,
+  ScrollArea,
+  Tag,
+  SectionTitle
+} = require("@fw/plugin-ui-kit");
+var methodColors = {
+  "exact-match": "info",
+  "single-eligible": "positive",
+  "ai-routed": "secondary",
+  "round-robin": "secondary",
+  "manual": "caution"
+};
+var methodLabels = {
+  "exact-match": "exact",
+  "single-eligible": "single",
+  "ai-routed": "ai",
+  "round-robin": "robin",
+  "manual": "manual"
+};
+function formatTime(ts) {
+  const d = new Date(ts);
+  return d.toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit", second: "2-digit" });
+}
+function truncate(text, max) {
+  return text.length > max ? text.slice(0, max - 1) + "\u2026" : text;
+}
+function DecisionLog({ decisions }) {
+  if (!decisions || decisions.length === 0) {
+    return React.createElement(
+      Flex,
+      {
+        variant: "column-stretch-start-nowrap-4"
+      },
+      React.createElement(SectionTitle, null, "Decision Log"),
+      React.createElement(Typography, {
+        variant: "smallCaption-regular",
+        color: "color-text-subtle"
+      }, "No routing decisions yet.")
+    );
+  }
+  const sorted = [...decisions].sort((a, b) => b.timestamp - a.timestamp);
+  return React.createElement(
+    Flex,
+    {
+      variant: "column-stretch-start-nowrap-4"
+    },
+    React.createElement(SectionTitle, null, "Decision Log"),
+    React.createElement(
+      ScrollArea,
+      {
+        style: { maxHeight: "260px" }
+      },
+      React.createElement(
+        Flex,
+        {
+          variant: "column-stretch-start-nowrap-0"
+        },
+        ...sorted.map((d) => {
+          const methodLabel = d.method === "ai-routed" && d.confidence != null ? `ai ${d.confidence}%` : methodLabels[d.method] || d.method;
+          return React.createElement(
+            Flex,
+            {
+              key: d.id,
+              variant: "column-stretch-start-nowrap-2",
+              style: {
+                padding: "6px 8px",
+                borderBottom: "1px solid var(--color-border-default)"
+              }
+            },
+            // Main line: time, title, instance, method
+            React.createElement(
+              Flex,
+              { variant: "row-center-start-nowrap-8" },
+              React.createElement(Typography, {
+                variant: "smallCaption-regular",
+                color: "color-text-subtle",
+                style: { flexShrink: 0, fontFamily: "var(--font-mono, monospace)", fontSize: "11px" }
+              }, formatTime(d.timestamp)),
+              React.createElement(Typography, {
+                variant: "smallCaption-regular",
+                color: "color-text-high",
+                style: { flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }
+              }, `"${truncate(d.taskTitle, 40)}"`),
+              React.createElement(Typography, {
+                variant: "smallCaption-regular",
+                color: "color-text-medium",
+                style: { flexShrink: 0 }
+              }, `\u2192 ${d.assignedInstanceId}`),
+              React.createElement(Tag, {
+                size: "small",
+                color: methodColors[d.method] || "secondary"
+              }, methodLabel)
+            ),
+            // Reason line
+            React.createElement(Typography, {
+              variant: "smallCaption-regular",
+              color: "color-text-subtle",
+              style: { paddingLeft: "70px" }
+            }, d.reason)
+          );
+        })
+      )
+    )
+  );
+}
+var decision_log_default = DecisionLog;
+module.exports = DecisionLog;

package/dist/ui/profile-card.js

@@ -0,0 +1,158 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/ui/profile-card.tsx
+var profile_card_exports = {};
+__export(profile_card_exports, {
+  ProfileCard: () => ProfileCard,
+  default: () => profile_card_default
+});
+module.exports = __toCommonJS(profile_card_exports);
+var React = require("react");
+var {
+  Flex,
+  Typography,
+  Icon,
+  Chip,
+  IconButton,
+  Tag
+} = require("@fw/plugin-ui-kit");
+function ProfileCard({ profile, activeInstances, onEdit, onDelete }) {
+  const {
+    id,
+    name,
+    description,
+    icon,
+    color,
+    capabilities,
+    preferences,
+    maxInstances
+  } = profile;
+  const budgetParts = [];
+  if (preferences.maxCostPerRun) budgetParts.push(`$${preferences.maxCostPerRun.toFixed(2)}/run`);
+  if (preferences.maxCostPerTask) budgetParts.push(`$${preferences.maxCostPerTask.toFixed(2)}/task`);
+  const budgetText = budgetParts.length > 0 ? budgetParts.join(" / ") : null;
+  return React.createElement(
+    Flex,
+    {
+      variant: "column-stretch-start-nowrap-6",
+      style: {
+        padding: "10px 12px",
+        borderRadius: "8px",
+        border: "1px solid var(--color-border-default)",
+        backgroundColor: "var(--color-surface-elevated)"
+      }
+    },
+    // Row 1: Icon + Name + Edit/Delete buttons
+    React.createElement(
+      Flex,
+      { variant: "row-center-start-nowrap-8" },
+      React.createElement(
+        Flex,
+        {
+          variant: "row-center-center-nowrap-0",
+          style: { color: `var(--${color})`, flexShrink: 0 }
+        },
+        React.createElement(Icon, { name: icon || "smartToy", size: 18 })
+      ),
+      React.createElement(Typography, {
+        variant: "caption-thick",
+        color: "color-text-high",
+        style: { flex: 1, minWidth: 0 }
+      }, name),
+      onEdit && React.createElement(IconButton, {
+        icon: "edit",
+        size: "xs",
+        variant: "clear",
+        onClick: () => onEdit(id),
+        title: "Edit profile"
+      }),
+      onDelete && React.createElement(IconButton, {
+        icon: "delete",
+        size: "xs",
+        variant: "clear",
+        color: "danger",
+        onClick: () => onDelete(id),
+        title: "Delete profile"
+      })
+    ),
+    // Description
+    description && React.createElement(Typography, {
+      variant: "smallCaption-regular",
+      color: "color-text-medium"
+    }, description),
+    // Divider
+    React.createElement(Flex, {
+      variant: "row-center-start-nowrap-0",
+      style: { borderTop: "1px solid var(--color-border-default)", margin: "2px 0" }
+    }),
+    // Capabilities
+    capabilities.length > 0 && React.createElement(
+      Flex,
+      { variant: "row-center-start-wrap-4" },
+      React.createElement(Typography, {
+        variant: "smallCaption-regular",
+        color: "color-text-subtle",
+        style: { flexShrink: 0 }
+      }, "Capabilities:"),
+      ...capabilities.map(
+        (cap) => React.createElement(
+          "span",
+          { key: cap.name, title: cap.description },
+          React.createElement(Chip, { label: cap.name, size: "small", color: "color-brand-main" })
+        )
+      )
+    ),
+    // Cost strategy
+    React.createElement(
+      Flex,
+      { variant: "row-center-start-wrap-12" },
+      React.createElement(Typography, {
+        variant: "smallCaption-regular",
+        color: "color-text-subtle"
+      }, `Cost strategy: ${preferences.costStrategy}`)
+    ),
+    // Instances + Approval + Budget
+    React.createElement(
+      Flex,
+      { variant: "row-center-start-wrap-12" },
+      React.createElement(Typography, {
+        variant: "smallCaption-regular",
+        color: "color-text-subtle"
+      }, `Instances: ${activeInstances}/${maxInstances} active`),
+      React.createElement(Tag, {
+        size: "small",
+        color: preferences.requireApproval ? "caution" : "positive"
+      }, preferences.requireApproval ? "Approval required" : "Auto-approve")
+    ),
+    // Budget line
+    budgetText && React.createElement(Typography, {
+      variant: "smallCaption-regular",
+      color: "color-text-subtle"
+    }, `Budget: ${budgetText}`),
+    // Instructions
+    preferences.instructions && React.createElement(Typography, {
+      variant: "smallCaption-regular",
+      color: "color-text-subtle",
+      style: { fontStyle: "italic" }
+    }, preferences.instructions)
+  );
+}
+var profile_card_default = ProfileCard;
+module.exports = ProfileCard;