@natoe/colab 0.1.8 → 0.1.10

package/dist/index.js

@@ -1202,11 +1202,109 @@ function BackIcon({ size = 22, color = "currentColor" }) {
     }
   );
 }
+
+// src/core/theme.ts
+var FONT_SIZE = {
+  xs: "12px",
+  sm: "13px",
+  md: "15px",
+  lg: "17px",
+  xxl: "28px"
+};
+var FONT_WEIGHT = {
+  regular: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700
+};
+var LINE_HEIGHT = {
+  tight: 1.3,
+  normal: 1.45};
+var SPACE = {
+  S1: "4px",
+  S2: "8px",
+  S3: "12px",
+  S4: "16px",
+  S5: "20px",
+  S6: "24px",
+  S12: "48px"
+};
+var RADIUS = {
+  sm: "4px",
+  md: "8px",
+  lg: "12px",
+  pill: "9999px",
+  full: "50%"
+};
+var COLOR = {
+  // Brand
+  primary: "#2563eb",
+  /** Tinted surface for chips/cards on brand-coloured states. */
+  primaryBg: "#dbeafe",
+  primaryFg: "#1d4ed8",
+  // Neutral grayscale — taken from Tailwind's zinc-leaning slate, the
+  // existing dominant family in the package.
+  white: "#ffffff",
+  neutral50: "#f9fafb",
+  neutral100: "#f3f4f6",
+  neutral200: "#e5e7eb",
+  neutral300: "#d1d5db",
+  neutral400: "#9ca3af",
+  neutral500: "#6b7280",
+  neutral600: "#4b5563",
+  neutral700: "#374151",
+  neutral800: "#1f2937",
+  neutral900: "#111827",
+  // Slate (used by day dividers + dialog title bar)
+  slate200: "#e2e8f0",
+  slate700: "#334155",
+  slate800: "#1e293b",
+  // Semantic
+  success: "#059669",
+  warning: "#d97706",
+  danger: "#dc2626",
+  dangerBg: "#fef2f2",
+  dangerBorder: "#fecaca",
+  dangerFg: "#b91c1c"
+};
+var SIZE = {
+  /** Default interactive height (text buttons, list rows). */
+  control: "40px",
+  /** Square icon-only buttons inside chrome (popup title, menu trigger). */
+  controlIcon: "36px",
+  /** Primary input controls (textarea send/attach). 44px = WCAG min. */
+  controlPrimary: "44px",
+  /** Avatar in the inbox row. */
+  avatar: "40px",
+  /** Unread dot. */
+  dot: "10px"
+};
+var SHADOW = {
+  /** Cards / floating popovers (message-actions menu). */
+  popover: "0 6px 18px rgba(0, 0, 0, 0.12)",
+  /** Dialog (CollabPopup). */
+  dialog: "0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08)",
+  /** Subtle separator shadow (sticky day divider, toast). */
+  subtle: "0 1px 2px rgba(0, 0, 0, 0.04)",
+  toast: "0 4px 12px rgba(0, 0, 0, 0.18)"
+};
+var Z_INDEX = {
+  /** Sticky day divider — above bubbles, below interactive popovers. */
+  sticky: 1,
+  /** Toasts inside a panel. */
+  toast: 20,
+  /** Floating CollabPopup dialog. */
+  dialog: 9999,
+  /** Portaled message-actions menu — must sit above the dialog. */
+  menu: 1e4
+};
 function PatientHeader({
   patientData,
   onOpenDicom,
   onOpenSettings,
   onBack,
+  hideName = false,
+  displayName,
   className
 }) {
   const hasDicom = !!(patientData.studyId && patientData.storageId);
@@ -1221,7 +1319,7 @@ function PatientHeader({
     meta.push({ label: "Ref", value: patientData.referringPhysician });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: styles.container, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.nameRow, children: [
+    !hideName && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.nameRow, children: [
       onBack && /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
@@ -1230,10 +1328,10 @@ function PatientHeader({
           style: styles.backButton,
           "aria-label": "Back to conversations",
           title: "Back to conversations",
-          children: /* @__PURE__ */ jsxRuntime.jsx(BackIcon, { size: 22, color: "#1f2937" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(BackIcon, { size: 22, color: COLOR.neutral800 })
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles.nameText, children: buildChannelName(patientData) })
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles.nameText, children: displayName ?? buildChannelName(patientData) })
     ] }),
     meta.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.metaRow, children: meta.map((item) => /* @__PURE__ */ jsxRuntime.jsxs("span", { style: styles.metaItem, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("span", { style: styles.metaLabel, children: [
@@ -1252,7 +1350,7 @@ function PatientHeader({
           type: "button",
           "aria-label": "View DICOM study",
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(DicomIcon, { size: 18, color: "#ffffff" }),
+            /* @__PURE__ */ jsxRuntime.jsx(DicomIcon, { size: 18, color: COLOR.white }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: "View DICOM" })
           ]
         }
@@ -1265,7 +1363,7 @@ function PatientHeader({
           type: "button",
           "aria-label": "Open channel settings",
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(SettingsIcon, { size: 18, color: "#374151" }),
+            /* @__PURE__ */ jsxRuntime.jsx(SettingsIcon, { size: 18, color: COLOR.neutral700 }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Settings" })
           ]
         }
@@ -1275,33 +1373,33 @@ function PatientHeader({
 }
 var styles = {
   container: {
-    padding: "14px 16px",
-    borderBottom: "1px solid #e5e7eb",
-    backgroundColor: "#f9fafb"
+    padding: `${SPACE.S3} ${SPACE.S4}`,
+    borderBottom: `1px solid ${COLOR.neutral200}`,
+    backgroundColor: COLOR.neutral50
   },
   nameRow: {
     display: "flex",
     alignItems: "center",
-    gap: "6px"
+    gap: SPACE.S2
   },
   backButton: {
-    width: "36px",
-    height: "36px",
+    width: SIZE.controlIcon,
+    height: SIZE.controlIcon,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    marginLeft: "-8px",
+    marginLeft: `-${SPACE.S2}`,
     backgroundColor: "transparent",
     border: "none",
-    borderRadius: "50%",
+    borderRadius: RADIUS.full,
     cursor: "pointer",
     flexShrink: 0
   },
   nameText: {
-    fontSize: "18px",
-    fontWeight: 600,
-    color: "#111827",
-    lineHeight: 1.3,
+    fontSize: FONT_SIZE.lg,
+    fontWeight: FONT_WEIGHT.semibold,
+    color: COLOR.neutral900,
+    lineHeight: LINE_HEIGHT.tight,
     minWidth: 0,
     overflow: "hidden",
     textOverflow: "ellipsis",
@@ -1310,53 +1408,53 @@ var styles = {
   metaRow: {
     display: "flex",
     flexWrap: "wrap",
-    columnGap: "14px",
-    rowGap: "4px",
-    marginTop: "6px"
+    columnGap: SPACE.S3,
+    rowGap: SPACE.S1,
+    marginTop: SPACE.S1
   },
   metaItem: {
-    fontSize: "13px",
-    color: "#374151",
+    fontSize: FONT_SIZE.sm,
+    color: COLOR.neutral700,
     whiteSpace: "nowrap"
   },
   metaLabel: {
-    color: "#6b7280",
-    fontWeight: 500
+    color: COLOR.neutral500,
+    fontWeight: FONT_WEIGHT.medium
   },
   metaValue: {
-    color: "#111827"
+    color: COLOR.neutral900
   },
   actions: {
     display: "flex",
-    gap: "8px",
-    marginTop: "10px"
+    gap: SPACE.S2,
+    marginTop: SPACE.S3
   },
   dicomButton: {
     display: "inline-flex",
     alignItems: "center",
-    gap: "8px",
-    minHeight: "40px",
-    padding: "8px 16px",
-    fontSize: "14px",
-    fontWeight: 500,
-    color: "#ffffff",
-    backgroundColor: "#2563eb",
+    gap: SPACE.S2,
+    minHeight: SIZE.control,
+    padding: `${SPACE.S2} ${SPACE.S4}`,
+    fontSize: FONT_SIZE.sm,
+    fontWeight: FONT_WEIGHT.medium,
+    color: COLOR.white,
+    backgroundColor: COLOR.primary,
     border: "none",
-    borderRadius: "6px",
+    borderRadius: RADIUS.md,
     cursor: "pointer"
   },
   settingsButton: {
     display: "inline-flex",
     alignItems: "center",
-    gap: "8px",
-    minHeight: "40px",
-    padding: "8px 16px",
-    fontSize: "14px",
-    fontWeight: 500,
-    color: "#374151",
-    backgroundColor: "#ffffff",
-    border: "1px solid #d1d5db",
-    borderRadius: "6px",
+    gap: SPACE.S2,
+    minHeight: SIZE.control,
+    padding: `${SPACE.S2} ${SPACE.S4}`,
+    fontSize: FONT_SIZE.sm,
+    fontWeight: FONT_WEIGHT.medium,
+    color: COLOR.neutral700,
+    backgroundColor: COLOR.white,
+    border: `1px solid ${COLOR.neutral300}`,
+    borderRadius: RADIUS.md,
     cursor: "pointer"
   }
 };
@@ -1366,10 +1464,10 @@ function ReplyQuoteBlock({
   onClick,
   className
 }) {
-  const baseBg = inOwnBubble ? "rgba(255,255,255,0.18)" : "#f3f4f6";
-  const barColor = inOwnBubble ? "#ffffff" : "#2563eb";
-  const nameColor = inOwnBubble ? "#ffffff" : "#2563eb";
-  const bodyColor = inOwnBubble ? "rgba(255,255,255,0.85)" : "#4b5563";
+  const baseBg = inOwnBubble ? "rgba(255,255,255,0.18)" : COLOR.neutral100;
+  const barColor = inOwnBubble ? COLOR.white : COLOR.primary;
+  const nameColor = inOwnBubble ? COLOR.white : COLOR.primary;
+  const bodyColor = inOwnBubble ? "rgba(255,255,255,0.85)" : COLOR.neutral600;
   const preview = renderSnapshotPreview(snapshot);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -1408,10 +1506,10 @@ function renderSnapshotPreview(snapshot) {
 var styles2 = {
   container: {
     display: "flex",
-    gap: "6px",
-    padding: "4px 8px",
-    marginBottom: "4px",
-    borderRadius: "6px",
+    gap: SPACE.S2,
+    padding: `${SPACE.S1} ${SPACE.S2}`,
+    marginBottom: SPACE.S1,
+    borderRadius: RADIUS.sm,
     cursor: "pointer",
     maxWidth: "100%"
   },
@@ -1428,13 +1526,13 @@ var styles2 = {
     overflow: "hidden"
   },
   senderName: {
-    fontSize: "11px",
-    fontWeight: 600,
-    lineHeight: "1.2"
+    fontSize: FONT_SIZE.xs,
+    fontWeight: FONT_WEIGHT.semibold,
+    lineHeight: LINE_HEIGHT.tight
   },
   body: {
-    fontSize: "11px",
-    lineHeight: "1.3",
+    fontSize: FONT_SIZE.xs,
+    lineHeight: LINE_HEIGHT.tight,
     overflow: "hidden",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap"
@@ -1481,22 +1579,22 @@ var styles3 = {
   container: {
     display: "flex",
     alignItems: "center",
-    gap: "4px",
+    gap: SPACE.S1,
     marginTop: "2px",
-    fontSize: "10px",
-    opacity: 0.75
+    fontSize: FONT_SIZE.xs,
+    opacity: 0.85
   },
   checkmark: {
-    fontSize: "10px",
-    color: "#60a5fa"
+    fontSize: FONT_SIZE.xs,
+    color: COLOR.primary
   },
   label: {
-    fontSize: "10px",
+    fontSize: FONT_SIZE.xs,
     color: "inherit"
   },
   moreButton: {
-    fontSize: "10px",
-    fontWeight: 600,
+    fontSize: FONT_SIZE.xs,
+    fontWeight: FONT_WEIGHT.semibold,
     color: "inherit",
     backgroundColor: "transparent",
     border: "none",
@@ -1664,7 +1762,7 @@ function MessageActionsMenu({
             onClick: () => run(() => onReply(message)),
             style: styles4.item,
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(ReplyIcon, { size: 18, color: "#374151" }),
+              /* @__PURE__ */ jsxRuntime.jsx(ReplyIcon, { size: 18, color: COLOR.neutral700 }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Reply" })
             ]
           }
@@ -1677,7 +1775,7 @@ function MessageActionsMenu({
             onClick: () => run(() => onUnpin(message.id)),
             style: styles4.item,
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(PinIcon, { size: 16, color: "#374151" }),
+              /* @__PURE__ */ jsxRuntime.jsx(PinIcon, { size: 16, color: COLOR.neutral700 }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Unpin" })
             ]
           }
@@ -1694,7 +1792,7 @@ function MessageActionsMenu({
             },
             title: pinDisabled ? "Pin limit reached (max 3)" : void 0,
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(PinIcon, { size: 16, color: "#374151" }),
+              /* @__PURE__ */ jsxRuntime.jsx(PinIcon, { size: 16, color: COLOR.neutral700 }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: pinDisabled ? "Pin (limit reached)" : "Pin" })
             ]
           }
@@ -1707,7 +1805,7 @@ function MessageActionsMenu({
             onClick: () => run(() => onCopy(message.body)),
             style: styles4.item,
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(CopyIcon, { size: 16, color: "#374151" }),
+              /* @__PURE__ */ jsxRuntime.jsx(CopyIcon, { size: 16, color: COLOR.neutral700 }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Copy text" })
             ]
           }
@@ -1730,7 +1828,7 @@ function MessageActionsMenu({
         "aria-expanded": isOpen ? "true" : "false",
         title: "Message actions",
         style: styles4.trigger,
-        children: /* @__PURE__ */ jsxRuntime.jsx(MoreIcon, { size: 18, color: "#4b5563" })
+        children: /* @__PURE__ */ jsxRuntime.jsx(MoreIcon, { size: 18, color: COLOR.neutral600 })
       }
     ),
     menu && typeof document !== "undefined" ? reactDom.createPortal(menu, document.body) : null
@@ -1742,45 +1840,45 @@ var styles4 = {
     display: "inline-block"
   },
   trigger: {
-    width: "36px",
-    height: "36px",
+    width: SIZE.controlIcon,
+    height: SIZE.controlIcon,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     backgroundColor: "transparent",
     border: "none",
-    borderRadius: "50%",
+    borderRadius: RADIUS.full,
     cursor: "pointer",
-    color: "#4b5563"
+    color: COLOR.neutral600
   },
   menu: {
     position: "fixed",
     minWidth: "160px",
-    backgroundColor: "#ffffff",
-    border: "1px solid #e5e7eb",
-    borderRadius: "10px",
-    boxShadow: "0 6px 18px rgba(0, 0, 0, 0.12)",
-    padding: "4px",
-    // Above the floating popup (z-index 9999) but below any future modal.
-    zIndex: 1e4
+    backgroundColor: COLOR.white,
+    border: `1px solid ${COLOR.neutral200}`,
+    borderRadius: RADIUS.md,
+    boxShadow: SHADOW.popover,
+    padding: SPACE.S1,
+    // Above the floating popup (z-index dialog) but below any future modal.
+    zIndex: Z_INDEX.menu
   },
   item: {
     display: "flex",
     alignItems: "center",
-    gap: "10px",
+    gap: SPACE.S3,
     width: "100%",
-    minHeight: "40px",
-    padding: "8px 12px",
-    fontSize: "14px",
-    color: "#111827",
+    minHeight: SIZE.control,
+    padding: `${SPACE.S2} ${SPACE.S3}`,
+    fontSize: FONT_SIZE.sm,
+    color: COLOR.neutral900,
     backgroundColor: "transparent",
     border: "none",
-    borderRadius: "6px",
+    borderRadius: RADIUS.sm,
     cursor: "pointer",
     textAlign: "left"
   },
   itemDisabled: {
-    color: "#9ca3af",
+    color: COLOR.neutral400,
     cursor: "not-allowed"
   }
 };
@@ -1812,7 +1910,7 @@ function AlertIcon({ size = 14, color = "currentColor" }) {
     }
   );
 }
-function Spinner({ size = 16, color = "#6b7280", thickness = 2 }) {
+function Spinner({ size = 16, color = COLOR.neutral500, thickness = 2 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
@@ -2050,10 +2148,10 @@ var styles5 = {
   wrapper: {
     display: "flex",
     alignItems: "flex-end",
-    gap: "4px",
-    marginBottom: "8px",
-    paddingLeft: "16px",
-    paddingRight: "16px"
+    gap: SPACE.S1,
+    marginBottom: SPACE.S2,
+    paddingLeft: SPACE.S4,
+    paddingRight: SPACE.S4
   },
   bubbleWrapper: {
     position: "relative",
@@ -2064,64 +2162,64 @@ var styles5 = {
     alignSelf: "flex-end"
   },
   bubble: {
-    padding: "10px 14px",
-    borderRadius: "12px",
+    padding: `${SPACE.S3} ${SPACE.S4}`,
+    borderRadius: RADIUS.lg,
     wordBreak: "break-word"
   },
   ownBubble: {
-    backgroundColor: "#2563eb",
-    color: "#ffffff",
-    borderBottomRightRadius: "4px"
+    backgroundColor: COLOR.primary,
+    color: COLOR.white,
+    borderBottomRightRadius: RADIUS.sm
   },
   otherBubble: {
-    backgroundColor: "#f3f4f6",
-    color: "#111827",
-    borderBottomLeftRadius: "4px"
+    backgroundColor: COLOR.neutral100,
+    color: COLOR.neutral900,
+    borderBottomLeftRadius: RADIUS.sm
   },
   pinnedBadge: {
     display: "inline-flex",
     alignItems: "center",
-    gap: "4px",
-    fontSize: "12px",
-    fontWeight: 600,
-    marginBottom: "4px",
-    color: "#6b7280"
+    gap: SPACE.S1,
+    fontSize: FONT_SIZE.xs,
+    fontWeight: FONT_WEIGHT.semibold,
+    marginBottom: SPACE.S1,
+    color: COLOR.neutral500
   },
   senderRow: {
     display: "flex",
     alignItems: "center",
-    gap: "6px",
-    marginBottom: "4px"
+    gap: SPACE.S2,
+    marginBottom: SPACE.S1
   },
   senderName: {
-    fontSize: "13px",
-    fontWeight: 600,
-    color: "#374151"
+    fontSize: FONT_SIZE.sm,
+    fontWeight: FONT_WEIGHT.semibold,
+    color: COLOR.neutral700
   },
   roleBadge: {
-    fontSize: "11px",
-    fontWeight: 600,
-    padding: "2px 8px",
-    borderRadius: "4px"
+    fontSize: FONT_SIZE.xs,
+    fontWeight: FONT_WEIGHT.semibold,
+    padding: `2px ${SPACE.S2}`,
+    borderRadius: RADIUS.sm
   },
   textBody: {
     margin: 0,
-    fontSize: "15px",
-    lineHeight: "1.45"
+    fontSize: FONT_SIZE.md,
+    lineHeight: LINE_HEIGHT.normal
   },
   timestamp: {
-    fontSize: "12px",
+    fontSize: FONT_SIZE.xs,
     color: "inherit",
     opacity: 0.8,
-    marginTop: "4px",
+    marginTop: SPACE.S1,
     textAlign: "right"
   },
   statusRow: {
     display: "flex",
     alignItems: "center",
-    gap: "6px",
-    marginTop: "4px",
-    fontSize: "12px",
+    gap: SPACE.S2,
+    marginTop: SPACE.S1,
+    fontSize: FONT_SIZE.xs,
     justifyContent: "flex-end",
     color: "rgba(255, 255, 255, 0.9)"
   },
@@ -2131,48 +2229,48 @@ var styles5 = {
   retryButton: {
     background: "transparent",
     border: "none",
-    color: "#ffffff",
-    fontWeight: 600,
-    fontSize: "12px",
+    color: COLOR.white,
+    fontWeight: FONT_WEIGHT.semibold,
+    fontSize: FONT_SIZE.xs,
     textDecoration: "underline",
     cursor: "pointer",
-    padding: "0 2px"
+    padding: `0 ${SPACE.S1}`
   },
   audioContainer: {
     display: "flex",
     alignItems: "center",
-    gap: "8px"
+    gap: SPACE.S2
   },
   audioPlayer: {
     height: "32px",
     maxWidth: "220px"
   },
   audioDuration: {
-    fontSize: "12px",
+    fontSize: FONT_SIZE.xs,
     opacity: 0.7,
     whiteSpace: "nowrap"
   },
   imagePreview: {
     maxWidth: "240px",
     maxHeight: "180px",
-    borderRadius: "8px",
+    borderRadius: RADIUS.md,
     objectFit: "cover",
     cursor: "pointer"
   },
   fileLink: {
     display: "flex",
     alignItems: "center",
-    gap: "6px",
+    gap: SPACE.S2,
     textDecoration: "none",
     color: "inherit",
-    padding: "6px 0"
+    padding: `${SPACE.S1} 0`
   },
   fileName: {
-    fontSize: "13px",
+    fontSize: FONT_SIZE.sm,
     textDecoration: "underline"
   },
   deepLink: {
-    color: "#3b82f6",
+    color: COLOR.primary,
     textDecoration: "underline",
     cursor: "pointer"
   },
@@ -2180,34 +2278,34 @@ var styles5 = {
     display: "flex",
     flexDirection: "column",
     gap: "2px",
-    padding: "8px",
-    backgroundColor: "#eff6ff",
-    borderRadius: "8px",
-    border: "1px solid #bfdbfe",
+    padding: SPACE.S2,
+    backgroundColor: COLOR.primaryBg,
+    borderRadius: RADIUS.md,
+    border: `1px solid ${COLOR.primaryBg}`,
     cursor: "pointer"
   },
   deepLinkLabel: {
-    fontSize: "13px",
-    fontWeight: 500,
-    color: "#1d4ed8"
+    fontSize: FONT_SIZE.sm,
+    fontWeight: FONT_WEIGHT.medium,
+    color: COLOR.primaryFg
   },
   deepLinkPath: {
-    fontSize: "11px",
-    color: "#6b7280",
+    fontSize: FONT_SIZE.xs,
+    color: COLOR.neutral500,
     fontFamily: "monospace"
   },
   systemMessage: {
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
-    gap: "8px",
-    padding: "6px 16px",
-    fontSize: "13px",
-    color: "#6b7280"
+    gap: SPACE.S2,
+    padding: `${SPACE.S1} ${SPACE.S4}`,
+    fontSize: FONT_SIZE.sm,
+    color: COLOR.neutral500
   },
   systemTime: {
-    fontSize: "12px",
-    color: "#9ca3af"
+    fontSize: FONT_SIZE.xs,
+    color: COLOR.neutral400
   }
 };
 function ChatIllustration({ size = 96 }) {
@@ -2462,34 +2560,34 @@ var styles6 = {
   container: {
     flex: 1,
     overflowY: "auto",
-    paddingTop: "12px",
-    paddingBottom: "8px"
+    paddingTop: SPACE.S3,
+    paddingBottom: SPACE.S2
   },
   loadingMore: {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    gap: "8px",
-    padding: "12px",
-    fontSize: "14px",
-    color: "#6b7280"
+    gap: SPACE.S2,
+    padding: SPACE.S3,
+    fontSize: FONT_SIZE.sm,
+    color: COLOR.neutral500
   },
   firstLoad: {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    padding: "48px 16px"
+    padding: `${SPACE.S12} ${SPACE.S4}`
   },
   loadMoreButton: {
     display: "block",
-    margin: "0 auto 12px",
+    margin: `0 auto ${SPACE.S3}`,
     minHeight: "36px",
-    padding: "8px 18px",
-    fontSize: "13px",
-    color: "#374151",
+    padding: `${SPACE.S2} ${SPACE.S5}`,
+    fontSize: FONT_SIZE.sm,
+    color: COLOR.neutral700,
     backgroundColor: "transparent",
-    border: "1px solid #d1d5db",
-    borderRadius: "18px",
+    border: `1px solid ${COLOR.neutral300}`,
+    borderRadius: RADIUS.pill,
     cursor: "pointer"
   },
   empty: {
@@ -2497,47 +2595,47 @@ var styles6 = {
     flexDirection: "column",
     alignItems: "center",
     justifyContent: "center",
-    padding: "48px 16px",
-    color: "#6b7280"
+    padding: `${SPACE.S12} ${SPACE.S4}`,
+    color: COLOR.neutral500
   },
   emptyTitle: {
-    fontSize: "16px",
-    fontWeight: 600,
-    color: "#374151",
-    margin: "14px 0 4px"
+    fontSize: FONT_SIZE.lg,
+    fontWeight: FONT_WEIGHT.semibold,
+    color: COLOR.neutral700,
+    margin: `${SPACE.S3} 0 ${SPACE.S1}`
   },
   emptySubtitle: {
-    fontSize: "14px",
+    fontSize: FONT_SIZE.sm,
     margin: 0,
     maxWidth: "280px",
-    lineHeight: 1.45,
+    lineHeight: LINE_HEIGHT.normal,
     textAlign: "center"
   },
   typingIndicator: {
-    padding: "4px 16px 8px",
-    fontSize: "13px",
-    color: "#6b7280",
+    padding: `${SPACE.S1} ${SPACE.S4} ${SPACE.S2}`,
+    fontSize: FONT_SIZE.sm,
+    color: COLOR.neutral500,
     fontStyle: "italic"
   },
   dayDivider: {
     display: "flex",
     justifyContent: "center",
-    margin: "12px 0 8px",
+    margin: `${SPACE.S3} 0 ${SPACE.S2}`,
     position: "sticky",
-    top: "4px",
-    zIndex: 1,
+    top: SPACE.S1,
+    zIndex: Z_INDEX.sticky,
     pointerEvents: "none"
   },
   dayDividerPill: {
     display: "inline-block",
-    padding: "5px 14px",
-    fontSize: "13px",
-    fontWeight: 500,
-    color: "#334155",
-    backgroundColor: "#e2e8f0",
-    borderRadius: "12px",
+    padding: `${SPACE.S1} ${SPACE.S3}`,
+    fontSize: FONT_SIZE.sm,
+    fontWeight: FONT_WEIGHT.medium,
+    color: COLOR.slate700,
+    backgroundColor: COLOR.slate200,
+    borderRadius: RADIUS.lg,
     letterSpacing: "0.2px",
-    boxShadow: "0 1px 2px rgba(0, 0, 0, 0.04)"
+    boxShadow: SHADOW.subtle
   },
   bubbleSlot: {
     animation: "natoe-colab-message-in 180ms ease-out"
@@ -2580,14 +2678,14 @@ var styles7 = {
   container: {
     display: "flex",
     alignItems: "stretch",
-    gap: "8px",
-    padding: "8px 12px",
-    backgroundColor: "#f9fafb",
-    borderTop: "1px solid #e5e7eb"
+    gap: SPACE.S2,
+    padding: `${SPACE.S2} ${SPACE.S3}`,
+    backgroundColor: COLOR.neutral50,
+    borderTop: `1px solid ${COLOR.neutral200}`
   },
   bar: {
     width: "3px",
-    backgroundColor: "#2563eb",
+    backgroundColor: COLOR.primary,
     borderRadius: "2px",
     flexShrink: 0
   },
@@ -2601,20 +2699,20 @@ var styles7 = {
   senderLine: {
     display: "flex",
     alignItems: "center",
-    gap: "4px"
+    gap: SPACE.S1
   },
   senderIcon: {
-    fontSize: "11px",
-    color: "#2563eb"
+    fontSize: FONT_SIZE.xs,
+    color: COLOR.primary
   },
   senderName: {
-    fontSize: "12px",
-    fontWeight: 600,
-    color: "#2563eb"
+    fontSize: FONT_SIZE.xs,
+    fontWeight: FONT_WEIGHT.semibold,
+    color: COLOR.primary
   },
   preview: {
-    fontSize: "12px",
-    color: "#6b7280",
+    fontSize: FONT_SIZE.xs,
+    color: COLOR.neutral500,
     overflow: "hidden",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap"
@@ -2626,12 +2724,12 @@ var styles7 = {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    color: "#6b7280",
+    color: COLOR.neutral500,
     backgroundColor: "transparent",
     border: "none",
-    borderRadius: "4px",
+    borderRadius: RADIUS.sm,
     cursor: "pointer",
-    fontSize: "12px",
+    fontSize: FONT_SIZE.xs,
     flexShrink: 0
   }
 };
@@ -2846,7 +2944,7 @@ function MessageInput({
             opacity: text.trim() ? 1 : 0.4
           },
           type: "button",
-          children: /* @__PURE__ */ jsxRuntime.jsx(SendIcon, { size: 20, color: "#ffffff" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(SendIcon, { size: 20, color: COLOR.white })
         }
       )
     ] })
@@ -2854,26 +2952,26 @@ function MessageInput({
 }
 var styles8 = {
   container: {
-    borderTop: "1px solid #e5e7eb",
-    backgroundColor: "#ffffff"
+    borderTop: `1px solid ${COLOR.neutral200}`,
+    backgroundColor: COLOR.white
   },
   uploadBanner: {
     display: "flex",
     alignItems: "center",
-    gap: "8px",
-    padding: "6px 14px",
-    fontSize: "12px",
-    color: "#6b7280",
-    backgroundColor: "#f9fafb",
-    borderBottom: "1px solid #e5e7eb"
+    gap: SPACE.S2,
+    padding: `${SPACE.S1} ${SPACE.S4}`,
+    fontSize: FONT_SIZE.xs,
+    color: COLOR.neutral500,
+    backgroundColor: COLOR.neutral50,
+    borderBottom: `1px solid ${COLOR.neutral200}`
   },
   uploadSpinner: {
     display: "inline-block",
     width: "12px",
     height: "12px",
-    border: "2px solid #d1d5db",
-    borderTopColor: "#7c3aed",
-    borderRadius: "50%",
+    border: `2px solid ${COLOR.neutral300}`,
+    borderTopColor: COLOR.primary,
+    borderRadius: RADIUS.full,
     animation: "natoe-colab-spin 0.7s linear infinite",
     flexShrink: 0
   },
@@ -2881,12 +2979,12 @@ var styles8 = {
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
-    gap: "8px",
-    padding: "8px 12px 8px 16px",
-    fontSize: "13px",
-    color: "#b91c1c",
-    backgroundColor: "#fef2f2",
-    borderTop: "1px solid #fecaca"
+    gap: SPACE.S2,
+    padding: `${SPACE.S2} ${SPACE.S3} ${SPACE.S2} ${SPACE.S4}`,
+    fontSize: FONT_SIZE.sm,
+    color: COLOR.dangerFg,
+    backgroundColor: COLOR.dangerBg,
+    borderTop: `1px solid ${COLOR.dangerBorder}`
   },
   errorText: {
     flex: 1,
@@ -2900,52 +2998,52 @@ var styles8 = {
     justifyContent: "center",
     backgroundColor: "transparent",
     border: "none",
-    color: "#b91c1c",
-    borderRadius: "4px",
+    color: COLOR.dangerFg,
+    borderRadius: RADIUS.sm,
     cursor: "pointer",
     flexShrink: 0
   },
   inputBar: {
     display: "flex",
     alignItems: "flex-end",
-    gap: "6px",
-    padding: "10px 12px"
+    gap: SPACE.S2,
+    padding: `${SPACE.S3} ${SPACE.S3}`
   },
   iconButton: {
-    width: "44px",
-    height: "44px",
+    width: SIZE.controlPrimary,
+    height: SIZE.controlPrimary,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     backgroundColor: "transparent",
     border: "none",
-    borderRadius: "50%",
+    borderRadius: RADIUS.full,
     cursor: "pointer",
     flexShrink: 0
   },
   textarea: {
     flex: 1,
-    padding: "10px 14px",
-    fontSize: "15px",
-    lineHeight: "1.45",
-    border: "1px solid #d1d5db",
-    borderRadius: "22px",
+    padding: `${SPACE.S3} ${SPACE.S4}`,
+    fontSize: FONT_SIZE.md,
+    lineHeight: LINE_HEIGHT.normal,
+    border: `1px solid ${COLOR.neutral300}`,
+    borderRadius: RADIUS.pill,
     resize: "none",
     outline: "none",
     fontFamily: "inherit",
     maxHeight: "120px",
-    minHeight: "44px"
+    minHeight: SIZE.controlPrimary
   },
   sendButton: {
-    width: "44px",
-    height: "44px",
+    width: SIZE.controlPrimary,
+    height: SIZE.controlPrimary,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: "#2563eb",
-    color: "#ffffff",
+    backgroundColor: COLOR.primary,
+    color: COLOR.white,
     border: "none",
-    borderRadius: "50%",
+    borderRadius: RADIUS.full,
     cursor: "pointer",
     flexShrink: 0
   }};
@@ -2964,7 +3062,7 @@ function ParticipantsList({
         {
           style: {
             ...styles9.statusDot,
-            backgroundColor: participant.isOnline ? "#22c55e" : "#d1d5db"
+            backgroundColor: participant.isOnline ? COLOR.success : COLOR.neutral300
           }
         }
       )
@@ -3020,9 +3118,9 @@ var styles9 = {
   item: {
     display: "flex",
     alignItems: "center",
-    gap: "10px",
-    padding: "8px 0",
-    borderBottom: "1px solid #f9fafb"
+    gap: SPACE.S3,
+    padding: `${SPACE.S2} 0`,
+    borderBottom: `1px solid ${COLOR.neutral50}`
   },
   avatar: {
     position: "relative",
@@ -3033,55 +3131,55 @@ var styles9 = {
   avatarImg: {
     width: "32px",
     height: "32px",
-    borderRadius: "50%",
+    borderRadius: RADIUS.full,
     objectFit: "cover"
   },
   avatarFallback: {
     width: "32px",
     height: "32px",
-    borderRadius: "50%",
-    backgroundColor: "#e5e7eb",
+    borderRadius: RADIUS.full,
+    backgroundColor: COLOR.neutral200,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    fontSize: "13px",
-    fontWeight: 600,
-    color: "#6b7280"
+    fontSize: FONT_SIZE.sm,
+    fontWeight: FONT_WEIGHT.semibold,
+    color: COLOR.neutral500
   },
   statusDot: {
     position: "absolute",
     bottom: "0",
     right: "0",
-    width: "8px",
-    height: "8px",
-    borderRadius: "50%",
-    border: "2px solid #ffffff"
+    width: SPACE.S2,
+    height: SPACE.S2,
+    borderRadius: RADIUS.full,
+    border: `2px solid ${COLOR.white}`
   },
   info: {
     display: "flex",
     alignItems: "center",
-    gap: "6px",
+    gap: SPACE.S2,
     flex: 1,
     minWidth: 0
   },
   name: {
-    fontSize: "13px",
-    fontWeight: 500,
-    color: "#111827",
+    fontSize: FONT_SIZE.sm,
+    fontWeight: FONT_WEIGHT.medium,
+    color: COLOR.neutral900,
     overflow: "hidden",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap"
   },
   youBadge: {
-    fontSize: "11px",
-    fontWeight: 400,
-    color: "#9ca3af"
+    fontSize: FONT_SIZE.xs,
+    fontWeight: FONT_WEIGHT.regular,
+    color: COLOR.neutral400
   },
   roleBadge: {
-    fontSize: "10px",
-    fontWeight: 500,
-    padding: "1px 6px",
-    borderRadius: "4px",
+    fontSize: FONT_SIZE.xs,
+    fontWeight: FONT_WEIGHT.medium,
+    padding: `2px ${SPACE.S2}`,
+    borderRadius: RADIUS.sm,
     whiteSpace: "nowrap"
   },
   removeButton: {
@@ -3092,10 +3190,10 @@ var styles9 = {
     justifyContent: "center",
     backgroundColor: "transparent",
     border: "none",
-    borderRadius: "4px",
+    borderRadius: RADIUS.sm,
     cursor: "pointer",
-    fontSize: "11px",
-    color: "#9ca3af",
+    fontSize: FONT_SIZE.xs,
+    color: COLOR.neutral400,
     flexShrink: 0
   }
 };
@@ -3247,19 +3345,19 @@ var styles10 = {
     display: "flex",
     flexDirection: "column",
     height: "100%",
-    backgroundColor: "#ffffff"
+    backgroundColor: COLOR.white
   },
   header: {
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center",
-    padding: "12px 16px",
-    borderBottom: "1px solid #e5e7eb"
+    padding: `${SPACE.S3} ${SPACE.S4}`,
+    borderBottom: `1px solid ${COLOR.neutral200}`
   },
   title: {
     margin: 0,
-    fontSize: "16px",
-    fontWeight: 600
+    fontSize: FONT_SIZE.lg,
+    fontWeight: FONT_WEIGHT.semibold
   },
   closeButton: {
     width: "28px",
@@ -3269,139 +3367,139 @@ var styles10 = {
     justifyContent: "center",
     backgroundColor: "transparent",
     border: "none",
-    borderRadius: "4px",
+    borderRadius: RADIUS.sm,
     cursor: "pointer",
-    fontSize: "14px",
-    color: "#6b7280"
+    fontSize: FONT_SIZE.sm,
+    color: COLOR.neutral500
   },
   error: {
-    padding: "8px 16px",
-    fontSize: "13px",
-    color: "#dc2626",
-    backgroundColor: "#fef2f2"
+    padding: `${SPACE.S2} ${SPACE.S4}`,
+    fontSize: FONT_SIZE.sm,
+    color: COLOR.danger,
+    backgroundColor: COLOR.dangerBg
   },
   section: {
-    padding: "16px",
-    borderBottom: "1px solid #f3f4f6"
+    padding: SPACE.S4,
+    borderBottom: `1px solid ${COLOR.neutral100}`
   },
   sectionHeader: {
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center",
-    marginBottom: "8px"
+    marginBottom: SPACE.S2
   },
   label: {
-    fontSize: "12px",
-    fontWeight: 600,
-    color: "#6b7280",
+    fontSize: FONT_SIZE.xs,
+    fontWeight: FONT_WEIGHT.semibold,
+    color: COLOR.neutral500,
     textTransform: "uppercase",
     letterSpacing: "0.05em"
   },
   channelName: {
-    fontSize: "14px",
-    color: "#111827"
+    fontSize: FONT_SIZE.sm,
+    color: COLOR.neutral900
   },
   editRow: {
     display: "flex",
     alignItems: "center",
-    gap: "8px",
-    marginTop: "6px"
+    gap: SPACE.S2,
+    marginTop: SPACE.S2
   },
   input: {
-    padding: "6px 10px",
-    fontSize: "13px",
-    border: "1px solid #d1d5db",
-    borderRadius: "6px",
+    padding: `${SPACE.S2} ${SPACE.S3}`,
+    fontSize: FONT_SIZE.sm,
+    border: `1px solid ${COLOR.neutral300}`,
+    borderRadius: RADIUS.md,
     outline: "none",
     width: "100%"
   },
   editButton: {
-    padding: "4px 10px",
-    fontSize: "12px",
-    color: "#2563eb",
+    padding: `${SPACE.S1} ${SPACE.S3}`,
+    fontSize: FONT_SIZE.xs,
+    color: COLOR.primary,
     backgroundColor: "transparent",
     border: "none",
     cursor: "pointer"
   },
   saveButton: {
-    padding: "6px 12px",
-    fontSize: "12px",
-    fontWeight: 500,
-    color: "#ffffff",
-    backgroundColor: "#2563eb",
+    padding: `${SPACE.S2} ${SPACE.S3}`,
+    fontSize: FONT_SIZE.xs,
+    fontWeight: FONT_WEIGHT.medium,
+    color: COLOR.white,
+    backgroundColor: COLOR.primary,
     border: "none",
-    borderRadius: "6px",
+    borderRadius: RADIUS.md,
     cursor: "pointer",
     whiteSpace: "nowrap"
   },
   cancelButton: {
-    padding: "6px 12px",
-    fontSize: "12px",
-    color: "#6b7280",
+    padding: `${SPACE.S2} ${SPACE.S3}`,
+    fontSize: FONT_SIZE.xs,
+    color: COLOR.neutral500,
     backgroundColor: "transparent",
-    border: "1px solid #d1d5db",
-    borderRadius: "6px",
+    border: `1px solid ${COLOR.neutral300}`,
+    borderRadius: RADIUS.md,
     cursor: "pointer",
     whiteSpace: "nowrap"
   },
   addButton: {
-    padding: "4px 10px",
-    fontSize: "12px",
-    fontWeight: 500,
-    color: "#2563eb",
-    backgroundColor: "#eff6ff",
+    padding: `${SPACE.S1} ${SPACE.S3}`,
+    fontSize: FONT_SIZE.xs,
+    fontWeight: FONT_WEIGHT.medium,
+    color: COLOR.primary,
+    backgroundColor: COLOR.primaryBg,
     border: "none",
-    borderRadius: "4px",
+    borderRadius: RADIUS.sm,
     cursor: "pointer"
   },
   inviteForm: {
     display: "flex",
     flexDirection: "column",
-    gap: "8px",
-    padding: "12px",
-    marginBottom: "12px",
-    backgroundColor: "#f9fafb",
-    borderRadius: "8px"
+    gap: SPACE.S2,
+    padding: SPACE.S3,
+    marginBottom: SPACE.S3,
+    backgroundColor: COLOR.neutral50,
+    borderRadius: RADIUS.md
   },
   inviteActions: {
     display: "flex",
-    gap: "8px"
+    gap: SPACE.S2
   },
   dangerZone: {
-    padding: "16px",
+    padding: SPACE.S4,
     marginTop: "auto",
     display: "flex",
     flexDirection: "column",
-    gap: "8px"
+    gap: SPACE.S2
   },
   leaveButton: {
-    padding: "8px",
-    fontSize: "13px",
-    fontWeight: 500,
-    color: "#b45309",
+    padding: SPACE.S2,
+    fontSize: FONT_SIZE.sm,
+    fontWeight: FONT_WEIGHT.medium,
+    color: COLOR.warning,
     backgroundColor: "#fffbeb",
     border: "1px solid #fde68a",
-    borderRadius: "6px",
+    borderRadius: RADIUS.md,
     cursor: "pointer"
   },
   deleteButton: {
-    padding: "8px",
-    fontSize: "13px",
-    fontWeight: 500,
-    color: "#dc2626",
-    backgroundColor: "#fef2f2",
-    border: "1px solid #fecaca",
-    borderRadius: "6px",
+    padding: SPACE.S2,
+    fontSize: FONT_SIZE.sm,
+    fontWeight: FONT_WEIGHT.medium,
+    color: COLOR.danger,
+    backgroundColor: COLOR.dangerBg,
+    border: `1px solid ${COLOR.dangerBorder}`,
+    borderRadius: RADIUS.md,
     cursor: "pointer"
   },
   confirmDeleteButton: {
-    padding: "8px",
-    fontSize: "13px",
-    fontWeight: 600,
-    color: "#ffffff",
-    backgroundColor: "#dc2626",
+    padding: SPACE.S2,
+    fontSize: FONT_SIZE.sm,
+    fontWeight: FONT_WEIGHT.semibold,
+    color: COLOR.white,
+    backgroundColor: COLOR.danger,
     border: "none",
-    borderRadius: "6px",
+    borderRadius: RADIUS.md,
     cursor: "pointer"
   }
 };
@@ -3424,13 +3522,13 @@ function PinnedMessagesBar({
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: styles11.container, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles11.indicator, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles11.pinIcon, children: "\u{1F4CC}" }),
+      /* @__PURE__ */ jsxRuntime.jsx(PinIcon, { size: 14, color: COLOR.primary }),
       pinnedMessages.length > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles11.segments, children: pinnedMessages.map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
           style: {
             ...styles11.segment,
-            backgroundColor: i === safeIndex ? "#2563eb" : "#d1d5db"
+            backgroundColor: i === safeIndex ? COLOR.primary : COLOR.neutral300
           }
         },
         i
@@ -3494,20 +3592,17 @@ var styles11 = {
   container: {
     display: "flex",
     alignItems: "center",
-    gap: "8px",
-    padding: "6px 12px",
-    backgroundColor: "#eff6ff",
-    borderBottom: "1px solid #dbeafe"
+    gap: SPACE.S2,
+    padding: `${SPACE.S1} ${SPACE.S3}`,
+    backgroundColor: COLOR.primaryBg,
+    borderBottom: `1px solid ${COLOR.primaryBg}`
   },
   indicator: {
     display: "flex",
     alignItems: "center",
-    gap: "4px",
+    gap: SPACE.S1,
     flexShrink: 0
   },
-  pinIcon: {
-    fontSize: "13px"
-  },
   segments: {
     display: "flex",
     flexDirection: "column",
@@ -3532,19 +3627,19 @@ var styles11 = {
     overflow: "hidden"
   },
   label: {
-    fontSize: "11px",
-    fontWeight: 600,
-    color: "#2563eb"
+    fontSize: FONT_SIZE.xs,
+    fontWeight: FONT_WEIGHT.semibold,
+    color: COLOR.primary
   },
   preview: {
-    fontSize: "12px",
-    color: "#374151",
+    fontSize: FONT_SIZE.xs,
+    color: COLOR.neutral700,
     overflow: "hidden",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap"
   },
   sender: {
-    fontWeight: 600
+    fontWeight: FONT_WEIGHT.semibold
   },
   unpinButton: {
     width: "24px",
@@ -3552,12 +3647,12 @@ var styles11 = {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    color: "#6b7280",
+    color: COLOR.neutral500,
     backgroundColor: "transparent",
     border: "none",
-    borderRadius: "4px",
+    borderRadius: RADIUS.sm,
     cursor: "pointer",
-    fontSize: "11px",
+    fontSize: FONT_SIZE.xs,
     flexShrink: 0
   }
 };
@@ -3592,15 +3687,15 @@ var styles12 = {
     transform: "translateX(-50%)",
     display: "flex",
     alignItems: "center",
-    gap: "12px",
-    padding: "10px 14px",
-    backgroundColor: "#1e293b",
-    color: "#ffffff",
-    borderRadius: "8px",
-    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.18)",
-    fontSize: "14px",
+    gap: SPACE.S3,
+    padding: `${SPACE.S3} ${SPACE.S4}`,
+    backgroundColor: COLOR.slate800,
+    color: COLOR.white,
+    borderRadius: RADIUS.md,
+    boxShadow: SHADOW.toast,
+    fontSize: FONT_SIZE.sm,
     maxWidth: "90%",
-    zIndex: 20
+    zIndex: Z_INDEX.toast
   },
   message: {
     whiteSpace: "nowrap",
@@ -3610,11 +3705,11 @@ var styles12 = {
   action: {
     background: "transparent",
     border: "none",
-    color: "#93c5fd",
-    fontWeight: 600,
-    fontSize: "14px",
+    color: COLOR.primaryBg,
+    fontWeight: FONT_WEIGHT.semibold,
+    fontSize: FONT_SIZE.sm,
     cursor: "pointer",
-    padding: "4px 6px",
+    padding: `${SPACE.S1} ${SPACE.S2}`,
     textTransform: "uppercase",
     letterSpacing: "0.4px"
   }
@@ -3665,6 +3760,7 @@ function CollabPanel({
   participantIds,
   showSeenBy = true,
   onBack,
+  hidePatientName = false,
   className,
   style
 }) {
@@ -3773,7 +3869,9 @@ function CollabPanel({
           participants,
           onOpenDicom: handleOpenDicom,
           onOpenSettings: () => setShowSettings(true),
-          onBack
+          onBack,
+          hideName: hidePatientName,
+          displayName: conversation?.name
         }
       ),
       pinnedMessages.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
@@ -3827,10 +3925,10 @@ var panelStyles = {
     display: "flex",
     flexDirection: "column",
     height: "100%",
-    backgroundColor: "#ffffff",
-    borderRadius: "8px",
+    backgroundColor: COLOR.white,
+    borderRadius: RADIUS.md,
     overflow: "hidden",
-    border: "1px solid #e5e7eb",
+    border: `1px solid ${COLOR.neutral200}`,
     fontFamily: FONT_STACK
   },
   loadingState: {
@@ -3838,8 +3936,8 @@ var panelStyles = {
     alignItems: "center",
     justifyContent: "center",
     height: "100%",
-    fontSize: "14px",
-    color: "#9ca3af"
+    fontSize: FONT_SIZE.sm,
+    color: COLOR.neutral500
   },
   errorState: {
     display: "flex",
@@ -3847,18 +3945,18 @@ var panelStyles = {
     alignItems: "center",
     justifyContent: "center",
     height: "100%",
-    padding: "24px",
+    padding: SPACE.S6,
     textAlign: "center"
   },
   errorTitle: {
-    fontSize: "15px",
-    fontWeight: 500,
-    color: "#dc2626",
-    margin: "0 0 4px"
+    fontSize: FONT_SIZE.md,
+    fontWeight: FONT_WEIGHT.medium,
+    color: COLOR.danger,
+    margin: `0 0 ${SPACE.S1}`
   },
   errorMessage: {
-    fontSize: "13px",
-    color: "#6b7280",
+    fontSize: FONT_SIZE.sm,
+    color: COLOR.neutral500,
     margin: 0
   }
 };
@@ -4029,7 +4127,7 @@ function CollabPopup({
                 "aria-label": isMinimized ? "Expand chat" : "Minimize chat",
                 title: isMinimized ? "Expand" : "Minimize",
                 type: "button",
-                children: isMinimized ? /* @__PURE__ */ jsxRuntime.jsx(ExpandIcon, { size: 16, color: "#cbd5e1" }) : /* @__PURE__ */ jsxRuntime.jsx(MinimizeIcon, { size: 16, color: "#cbd5e1" })
+                children: isMinimized ? /* @__PURE__ */ jsxRuntime.jsx(ExpandIcon, { size: 16, color: COLOR.slate200 }) : /* @__PURE__ */ jsxRuntime.jsx(MinimizeIcon, { size: 16, color: COLOR.slate200 })
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -4040,12 +4138,12 @@ function CollabPopup({
                 "aria-label": "Close chat",
                 title: "Close",
                 type: "button",
-                children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { size: 16, color: "#cbd5e1" })
+                children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { size: 16, color: COLOR.slate200 })
               }
             )
           ] })
         ] }),
-        !isMinimized && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles13.panelWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(CollabPanel, { orderId, patientData, participantIds }) })
+        !isMinimized && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles13.panelWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(CollabPanel, { orderId, patientData, participantIds, hidePatientName: true }) })
       ]
     }
   );
@@ -4053,14 +4151,14 @@ function CollabPopup({
 var styles13 = {
   container: {
     position: "fixed",
-    zIndex: 9999,
-    borderRadius: "12px",
-    boxShadow: "0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08)",
+    zIndex: Z_INDEX.dialog,
+    borderRadius: RADIUS.lg,
+    boxShadow: SHADOW.dialog,
     overflow: "hidden",
     display: "flex",
     flexDirection: "column",
-    backgroundColor: "#ffffff",
-    border: "1px solid #e5e7eb",
+    backgroundColor: COLOR.white,
+    border: `1px solid ${COLOR.neutral200}`,
     transition: "height 0.2s ease",
     fontFamily: FONT_STACK
   },
@@ -4068,37 +4166,37 @@ var styles13 = {
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center",
-    padding: "0 8px 0 14px",
+    padding: `0 ${SPACE.S2} 0 ${SPACE.S4}`,
     height: "52px",
-    backgroundColor: "#1e293b",
+    backgroundColor: COLOR.slate800,
     cursor: "grab",
     userSelect: "none",
     flexShrink: 0
   },
   titleText: {
-    fontSize: "15px",
-    fontWeight: 500,
-    color: "#ffffff",
+    fontSize: FONT_SIZE.md,
+    fontWeight: FONT_WEIGHT.medium,
+    color: COLOR.white,
     overflow: "hidden",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap"
   },
   titleActions: {
     display: "flex",
-    gap: "4px",
+    gap: SPACE.S1,
     flexShrink: 0
   },
   titleButton: {
-    width: "40px",
-    height: "40px",
+    width: SIZE.control,
+    height: SIZE.control,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     backgroundColor: "transparent",
     border: "none",
-    borderRadius: "6px",
+    borderRadius: RADIUS.md,
     cursor: "pointer",
-    color: "#cbd5e1"
+    color: COLOR.slate200
   },
   panelWrapper: {
     flex: 1,
@@ -4571,55 +4669,55 @@ var styles14 = {
     display: "flex",
     flexDirection: "column",
     width: "100%",
-    padding: "6px 8px",
-    backgroundColor: "#ffffff",
-    border: "1px solid #e5e7eb",
-    borderRadius: "8px",
+    padding: `${SPACE.S1} ${SPACE.S2}`,
+    backgroundColor: COLOR.white,
+    border: `1px solid ${COLOR.neutral200}`,
+    borderRadius: RADIUS.md,
     fontFamily: FONT_STACK
   },
   loadingState: {
-    padding: "8px",
-    fontSize: "12px",
-    color: "#9ca3af",
+    padding: SPACE.S2,
+    fontSize: FONT_SIZE.xs,
+    color: COLOR.neutral500,
     textAlign: "center"
   },
   error: {
-    padding: "4px 8px",
-    marginBottom: "4px",
-    fontSize: "11px",
-    color: "#dc2626",
-    backgroundColor: "#fef2f2",
-    borderRadius: "4px"
+    padding: `${SPACE.S1} ${SPACE.S2}`,
+    marginBottom: SPACE.S1,
+    fontSize: FONT_SIZE.xs,
+    color: COLOR.danger,
+    backgroundColor: COLOR.dangerBg,
+    borderRadius: RADIUS.sm
   },
   preview: {
     display: "flex",
     flexDirection: "column",
     gap: "2px",
-    marginBottom: "6px",
-    paddingBottom: "6px",
-    borderBottom: "1px solid #f3f4f6"
+    marginBottom: SPACE.S1,
+    paddingBottom: SPACE.S1,
+    borderBottom: `1px solid ${COLOR.neutral100}`
   },
   messageRow: {
     display: "flex",
     alignItems: "center",
-    gap: "6px",
-    fontSize: "12px",
-    lineHeight: "1.4",
+    gap: SPACE.S2,
+    fontSize: FONT_SIZE.xs,
+    lineHeight: LINE_HEIGHT.normal,
     overflow: "hidden"
   },
   roleDot: {
     flexShrink: 0,
     width: "6px",
     height: "6px",
-    borderRadius: "50%"
+    borderRadius: RADIUS.full
   },
   senderName: {
     flexShrink: 0,
-    fontWeight: 600,
-    color: "#374151"
+    fontWeight: FONT_WEIGHT.semibold,
+    color: COLOR.neutral700
   },
   messageText: {
-    color: "#4b5563",
+    color: COLOR.neutral600,
     overflow: "hidden",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap",
@@ -4627,8 +4725,8 @@ var styles14 = {
     flex: 1
   },
   systemRow: {
-    fontSize: "11px",
-    color: "#9ca3af",
+    fontSize: FONT_SIZE.xs,
+    color: COLOR.neutral400,
     fontStyle: "italic",
     textAlign: "center",
     padding: "2px 0"
@@ -4640,11 +4738,11 @@ var styles14 = {
   audioPlayer: {
     display: "inline-flex",
     alignItems: "center",
-    gap: "6px",
-    padding: "2px 8px",
-    borderRadius: "12px",
-    backgroundColor: "#eff6ff",
-    border: "1px solid #dbeafe",
+    gap: SPACE.S2,
+    padding: `2px ${SPACE.S2}`,
+    borderRadius: RADIUS.lg,
+    backgroundColor: COLOR.primaryBg,
+    border: `1px solid ${COLOR.primaryBg}`,
     flex: 1,
     minWidth: 0
   },
@@ -4654,11 +4752,11 @@ var styles14 = {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    fontSize: "10px",
-    color: "#ffffff",
-    backgroundColor: "#2563eb",
+    fontSize: FONT_SIZE.xs,
+    color: COLOR.white,
+    backgroundColor: COLOR.primary,
     border: "none",
-    borderRadius: "50%",
+    borderRadius: RADIUS.full,
     cursor: "pointer",
     flexShrink: 0
   },
@@ -4666,7 +4764,7 @@ var styles14 = {
     display: "inline-flex",
     alignItems: "center",
     gap: "2px",
-    height: "16px",
+    height: SPACE.S4,
     flex: 1,
     minWidth: 0
   },
@@ -4674,27 +4772,27 @@ var styles14 = {
     display: "inline-block",
     width: "2px",
     borderRadius: "1px",
-    backgroundColor: "#60a5fa"
+    backgroundColor: COLOR.primary
   },
   audioDuration: {
-    fontSize: "11px",
-    color: "#2563eb",
+    fontSize: FONT_SIZE.xs,
+    color: COLOR.primary,
     fontVariantNumeric: "tabular-nums",
-    fontWeight: 500,
+    fontWeight: FONT_WEIGHT.medium,
     flexShrink: 0
   },
   // ── Input bar ──
   inputBar: {
     display: "flex",
     alignItems: "center",
-    gap: "6px"
+    gap: SPACE.S2
   },
   input: {
     flex: 1,
-    padding: "6px 10px",
-    fontSize: "13px",
-    border: "1px solid #e5e7eb",
-    borderRadius: "16px",
+    padding: `${SPACE.S2} ${SPACE.S3}`,
+    fontSize: FONT_SIZE.sm,
+    border: `1px solid ${COLOR.neutral200}`,
+    borderRadius: RADIUS.pill,
     outline: "none",
     fontFamily: "inherit",
     minWidth: 0
@@ -4703,12 +4801,12 @@ var styles14 = {
     flexShrink: 0,
     minWidth: "18px",
     height: "18px",
-    padding: "0 5px",
-    fontSize: "10px",
-    fontWeight: 600,
-    color: "#ffffff",
-    backgroundColor: "#dc2626",
-    borderRadius: "10px",
+    padding: `0 ${SPACE.S1}`,
+    fontSize: FONT_SIZE.xs,
+    fontWeight: FONT_WEIGHT.semibold,
+    color: COLOR.white,
+    backgroundColor: COLOR.danger,
+    borderRadius: RADIUS.pill,
     display: "flex",
     alignItems: "center",
     justifyContent: "center"
@@ -4717,8 +4815,8 @@ var styles14 = {
     flexShrink: 0,
     width: "6px",
     height: "6px",
-    borderRadius: "50%",
-    backgroundColor: "#22c55e"
+    borderRadius: RADIUS.full,
+    backgroundColor: COLOR.success
   },
   sendButton: {
     flexShrink: 0,
@@ -4727,11 +4825,11 @@ var styles14 = {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    fontSize: "13px",
-    color: "#ffffff",
-    backgroundColor: "#2563eb",
+    fontSize: FONT_SIZE.sm,
+    color: COLOR.white,
+    backgroundColor: COLOR.primary,
     border: "none",
-    borderRadius: "50%",
+    borderRadius: RADIUS.full,
     cursor: "pointer"
   },
   expandButton: {
@@ -4741,11 +4839,11 @@ var styles14 = {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    fontSize: "12px",
-    color: "#6b7280",
+    fontSize: FONT_SIZE.xs,
+    color: COLOR.neutral500,
     backgroundColor: "transparent",
-    border: "1px solid #e5e7eb",
-    borderRadius: "50%",
+    border: `1px solid ${COLOR.neutral200}`,
+    borderRadius: RADIUS.full,
     cursor: "pointer"
   }};
 function useConversationList(options) {
@@ -4909,52 +5007,52 @@ var styles15 = {
   container: {
     display: "flex",
     alignItems: "center",
-    gap: "12px",
-    padding: "10px 12px",
+    gap: SPACE.S3,
+    padding: `${SPACE.S3} ${SPACE.S3}`,
     width: "100%",
     backgroundColor: "transparent",
     border: "none",
-    borderBottom: "1px solid #f3f4f6",
+    borderBottom: `1px solid ${COLOR.neutral100}`,
     cursor: "pointer",
     textAlign: "left"
   },
   selected: {
-    backgroundColor: "#eff6ff"
+    backgroundColor: COLOR.primaryBg
   },
   unread: {},
   avatarWrapper: {
     position: "relative",
-    width: "40px",
-    height: "40px",
+    width: SIZE.avatar,
+    height: SIZE.avatar,
     flexShrink: 0
   },
   avatar: {
-    width: "40px",
-    height: "40px",
-    borderRadius: "50%",
+    width: SIZE.avatar,
+    height: SIZE.avatar,
+    borderRadius: RADIUS.full,
     objectFit: "cover"
   },
   avatarFallback: {
-    width: "40px",
-    height: "40px",
-    borderRadius: "50%",
-    backgroundColor: "#e5e7eb",
+    width: SIZE.avatar,
+    height: SIZE.avatar,
+    borderRadius: RADIUS.full,
+    backgroundColor: COLOR.neutral200,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    fontSize: "15px",
-    fontWeight: 600,
-    color: "#6b7280"
+    fontSize: FONT_SIZE.md,
+    fontWeight: FONT_WEIGHT.semibold,
+    color: COLOR.neutral500
   },
   unreadDot: {
     position: "absolute",
     top: "0",
     left: "0",
-    width: "10px",
-    height: "10px",
-    borderRadius: "50%",
-    backgroundColor: "#2563eb",
-    border: "2px solid #ffffff"
+    width: SIZE.dot,
+    height: SIZE.dot,
+    borderRadius: RADIUS.full,
+    backgroundColor: COLOR.primary,
+    border: `2px solid ${COLOR.white}`
   },
   content: {
     flex: 1,
@@ -4967,12 +5065,12 @@ var styles15 = {
     display: "flex",
     justifyContent: "space-between",
     alignItems: "baseline",
-    gap: "8px"
+    gap: SPACE.S2
   },
   name: {
-    fontSize: "15px",
-    fontWeight: 500,
-    color: "#111827",
+    fontSize: FONT_SIZE.md,
+    fontWeight: FONT_WEIGHT.medium,
+    color: COLOR.neutral900,
     overflow: "hidden",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap",
@@ -4980,26 +5078,26 @@ var styles15 = {
     minWidth: 0
   },
   nameUnread: {
-    fontWeight: 700
+    fontWeight: FONT_WEIGHT.bold
   },
   time: {
-    fontSize: "12px",
-    color: "#6b7280",
+    fontSize: FONT_SIZE.xs,
+    color: COLOR.neutral500,
     flexShrink: 0
   },
   timeUnread: {
-    color: "#2563eb",
-    fontWeight: 600
+    color: COLOR.primary,
+    fontWeight: FONT_WEIGHT.semibold
   },
   bottomRow: {
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center",
-    gap: "8px"
+    gap: SPACE.S2
   },
   preview: {
-    fontSize: "14px",
-    color: "#4b5563",
+    fontSize: FONT_SIZE.sm,
+    color: COLOR.neutral600,
     overflow: "hidden",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap",
@@ -5007,18 +5105,18 @@ var styles15 = {
     minWidth: 0
   },
   previewUnread: {
-    color: "#111827",
-    fontWeight: 500
+    color: COLOR.neutral900,
+    fontWeight: FONT_WEIGHT.medium
   },
   badge: {
     minWidth: "20px",
     height: "20px",
-    padding: "0 6px",
-    fontSize: "11px",
-    fontWeight: 600,
-    color: "#ffffff",
-    backgroundColor: "#2563eb",
-    borderRadius: "10px",
+    padding: `0 ${SPACE.S2}`,
+    fontSize: FONT_SIZE.xs,
+    fontWeight: FONT_WEIGHT.semibold,
+    color: COLOR.white,
+    backgroundColor: COLOR.primary,
+    borderRadius: RADIUS.pill,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -5119,89 +5217,89 @@ var styles16 = {
     display: "flex",
     flexDirection: "column",
     height: "100%",
-    backgroundColor: "#ffffff",
-    borderRight: "1px solid #e5e7eb"
+    backgroundColor: COLOR.white,
+    borderRight: `1px solid ${COLOR.neutral200}`
   },
   header: {
-    padding: "12px",
-    borderBottom: "1px solid #e5e7eb",
-    backgroundColor: "#f9fafb",
+    padding: SPACE.S3,
+    borderBottom: `1px solid ${COLOR.neutral200}`,
+    backgroundColor: COLOR.neutral50,
     flexShrink: 0
   },
   titleRow: {
     display: "flex",
     alignItems: "center",
-    gap: "8px",
-    marginBottom: "8px"
+    gap: SPACE.S2,
+    marginBottom: SPACE.S2
   },
   title: {
     margin: 0,
-    fontSize: "15px",
-    fontWeight: 600,
-    color: "#111827"
+    fontSize: FONT_SIZE.md,
+    fontWeight: FONT_WEIGHT.semibold,
+    color: COLOR.neutral900
   },
   totalBadge: {
     minWidth: "20px",
     height: "20px",
-    padding: "0 6px",
-    fontSize: "11px",
-    fontWeight: 600,
-    color: "#ffffff",
-    backgroundColor: "#2563eb",
-    borderRadius: "10px",
+    padding: `0 ${SPACE.S2}`,
+    fontSize: FONT_SIZE.xs,
+    fontWeight: FONT_WEIGHT.semibold,
+    color: COLOR.white,
+    backgroundColor: COLOR.primary,
+    borderRadius: RADIUS.pill,
     display: "flex",
     alignItems: "center",
     justifyContent: "center"
   },
   searchRow: {
-    marginBottom: "8px"
+    marginBottom: SPACE.S2
   },
   searchInput: {
     width: "100%",
-    padding: "6px 10px",
-    fontSize: "13px",
-    border: "1px solid #e5e7eb",
-    borderRadius: "6px",
+    padding: `${SPACE.S2} ${SPACE.S3}`,
+    fontSize: FONT_SIZE.sm,
+    border: `1px solid ${COLOR.neutral200}`,
+    borderRadius: RADIUS.md,
     outline: "none",
     fontFamily: "inherit"
   },
   filterRow: {
     display: "flex",
-    gap: "4px"
+    gap: SPACE.S1
   },
   filterButton: {
     flex: 1,
-    padding: "5px 8px",
-    fontSize: "12px",
-    color: "#6b7280",
-    backgroundColor: "#ffffff",
-    border: "1px solid #e5e7eb",
-    borderRadius: "6px",
+    padding: `${SPACE.S1} ${SPACE.S2}`,
+    fontSize: FONT_SIZE.xs,
+    color: COLOR.neutral500,
+    backgroundColor: COLOR.white,
+    border: `1px solid ${COLOR.neutral200}`,
+    borderRadius: RADIUS.md,
     cursor: "pointer"
   },
   filterButtonActive: {
-    color: "#ffffff",
-    backgroundColor: "#2563eb",
-    borderColor: "#2563eb",
-    fontWeight: 500
+    color: COLOR.white,
+    backgroundColor: COLOR.primary,
+    borderColor: COLOR.primary,
+    fontWeight: FONT_WEIGHT.medium
   },
   list: {
     flex: 1,
     overflowY: "auto"
   },
   state: {
-    padding: "24px 16px",
-    fontSize: "13px",
-    color: "#9ca3af",
+    padding: `${SPACE.S6} ${SPACE.S4}`,
+    fontSize: FONT_SIZE.sm,
+    color: COLOR.neutral500,
     textAlign: "center"
   },
   errorState: {
-    padding: "16px",
-    fontSize: "13px",
-    color: "#dc2626",
-    backgroundColor: "#fef2f2",
-    margin: "12px",
-    borderRadius: "6px",
+    padding: SPACE.S4,
+    fontSize: FONT_SIZE.sm,
+    color: COLOR.danger,
+    backgroundColor: COLOR.dangerBg,
+    margin: SPACE.S3,
+    borderRadius: RADIUS.md,
     textAlign: "center"
   }
 };
@@ -5297,7 +5395,7 @@ var styles17 = {
     display: "flex",
     height: "100%",
     width: "100%",
-    backgroundColor: "#ffffff",
+    backgroundColor: COLOR.white,
     fontFamily: FONT_STACK
   },
   sidebar: {
@@ -5318,15 +5416,15 @@ var styles17 = {
     display: "flex",
     flexDirection: "column",
     minWidth: 0,
-    padding: "12px",
-    backgroundColor: "#f3f4f6"
+    padding: SPACE.S3,
+    backgroundColor: COLOR.neutral100
   },
   mainCompact: {
     flex: 1,
     display: "flex",
     flexDirection: "column",
     minWidth: 0,
-    backgroundColor: "#f3f4f6"
+    backgroundColor: COLOR.neutral100
   },
   panel: {
     height: "100%",
@@ -5338,23 +5436,23 @@ var styles17 = {
     flexDirection: "column",
     alignItems: "center",
     justifyContent: "center",
-    padding: "48px 24px",
+    padding: `${SPACE.S12} ${SPACE.S6}`,
     textAlign: "center"
   },
   emptyIcon: {
-    fontSize: "48px",
-    marginBottom: "12px"
+    fontSize: FONT_SIZE.xxl,
+    marginBottom: SPACE.S3
   },
   emptyTitle: {
-    margin: "0 0 6px",
-    fontSize: "16px",
-    fontWeight: 600,
-    color: "#374151"
+    margin: `0 0 ${SPACE.S2}`,
+    fontSize: FONT_SIZE.lg,
+    fontWeight: FONT_WEIGHT.semibold,
+    color: COLOR.neutral700
   },
   emptySubtitle: {
     margin: 0,
-    fontSize: "13px",
-    color: "#6b7280",
+    fontSize: FONT_SIZE.sm,
+    color: COLOR.neutral500,
     maxWidth: "320px"
   }
 };