chordia-ui 3.7.2 → 3.7.4

package/dist/index.es.js

@@ -1,31 +1,32 @@
 import { C as c, a as C, D as S, S as f, T as x } from "./SmallButton.es.js";
-import { T as g, b as I, c as D, a as u } from "./Tooltip.es.js";
-import { Badge as U, Checkbox as v, ColorPalette as P, FormLabel as h, InlineConfirm as F, MultiSelect as w, Select as y, TextArea as N } from "./components/primitives.es.js";
+import { T as g, b as D, c as I, a as b } from "./Tooltip.es.js";
+import { Badge as P, Checkbox as U, ColorPalette as v, FormLabel as h, InlineConfirm as F, MultiSelect as w, Select as y, TextArea as N } from "./components/primitives.es.js";
 import { S as B, T as L } from "./SectionLabel.es.js";
 import { T as O } from "./TextInput.es.js";
-import { DataTable as G, DataTableFilters as R, SummaryStatsPanel as j } from "./components/data.es.js";
-import { A as H, a as V, b as q, F as z, T as J, c as K } from "./Toast.es.js";
+import { DataTable as G, DataTableFilters2 as R, SummaryStatsPanel as j } from "./components/data.es.js";
+import { D as H, a as V } from "./DataTable2.es.js";
+import { A as z, a as J, b as K, F as Q, T as W, c as X } from "./Toast.es.js";
 import "react/jsx-runtime";
 import "react";
 import "lucide-react";
-import { C as W, M as X, O as Y, b as Z, c as _, S as $, a as aa, d as ra } from "./SummarySection.es.js";
-import { T as ta } from "./TourGuideTooltip.es.js";
-import { D as ia, b as na, a as sa, S as pa } from "./SideDrawer.es.js";
-import { C as da, a as la, T as ca } from "./Timeline.es.js";
-import { InteractionSummaryCard as Sa } from "./components/media.es.js";
-import { ChatHistoryPanel as xa, ChatInterface as Ta, MessageThread as ga, ThinkingIndicator as Ia } from "./components/chat.es.js";
-import { a as ua, C as ba } from "./ChatMessage.es.js";
-import { NavDropdown as va, NavDropdownItem as Pa, NavPill as ha, NavigationBar as Fa, Sidebar as wa, StatusIndicator as ya } from "./components/navigation.es.js";
-import { DemoProjectBanner as Aa, FirstCallScreen as Ba, LoginForm as La, OnboardingChecklist as Ma, SplitPane as Oa } from "./components/layout.es.js";
-import { I as Ga } from "./IntegrationCard.es.js";
-import { NotificationItem as ja, NotificationPanel as Ea } from "./components/notifications.es.js";
-import { PerformancePanel as Va } from "./components/performance.es.js";
-import { OverlayPanel as za } from "./components/models.es.js";
-import { U as Ka, a as Qa } from "./UploadInteraction.es.js";
-import { AddTeammates as Xa, ConnectData as Ya, GettingStarted as Za } from "./components/onboarding.es.js";
-import { LoginPage as $a, SignUpPage as ar } from "./components/login.es.js";
-import { UpdatedCoachingSynthesisCard as or, UpdatedCompassScore as tr, UpdatedGuidance as er, UpdatedInteractionContext as ir, UpdatedInteractionDetails as nr, UpdatedInteractionScores as sr, UpdatedInteractionSignals as pr } from "./components/UpdatedInteractionDetails.es.js";
-import { U as dr } from "./UpdatedInteractionRecording.es.js";
+import { C as Z, M as _, O as $, b as aa, c as ra, S as ea, a as ta, d as oa } from "./SummarySection.es.js";
+import { T as na } from "./TourGuideTooltip.es.js";
+import { D as pa, b as ma, a as da, S as la } from "./SideDrawer.es.js";
+import { C as Ca, a as Sa, T as fa } from "./Timeline.es.js";
+import { InteractionSummaryCard as Ta } from "./components/media.es.js";
+import { ChatHistoryPanel as Da, ChatInterface as Ia, MessageThread as ba, ThinkingIndicator as ua } from "./components/chat.es.js";
+import { a as Ua, C as va } from "./ChatMessage.es.js";
+import { NavDropdown as Fa, NavDropdownItem as wa, NavPill as ya, NavigationBar as Na, Sidebar as Aa, StatusIndicator as Ba } from "./components/navigation.es.js";
+import { DemoProjectBanner as Ma, FirstCallScreen as Oa, LoginForm as ka, OnboardingChecklist as Ga, SplitPane as Ra } from "./components/layout.es.js";
+import { I as Ea } from "./IntegrationCard.es.js";
+import { NotificationItem as Va, NotificationPanel as qa } from "./components/notifications.es.js";
+import { PerformanceDetailsPage as Ja, PerformancePanel as Ka, SupervisorSelect as Qa } from "./components/performance.es.js";
+import { OverlayPanel as Xa } from "./components/models.es.js";
+import { U as Za, a as _a } from "./UploadInteraction.es.js";
+import { AddTeammates as ar, ConnectData as rr, GettingStarted as er } from "./components/onboarding.es.js";
+import { LoginPage as or, SignUpPage as ir } from "./components/login.es.js";
+import { UpdatedCoachingSynthesisCard as sr, UpdatedCompassScore as pr, UpdatedGuidance as mr, UpdatedInteractionContext as dr, UpdatedInteractionDetails as lr, UpdatedInteractionScores as cr, UpdatedInteractionSignals as Cr } from "./components/UpdatedInteractionDetails.es.js";
+import { U as fr } from "./UpdatedInteractionRecording.es.js";
 import "react-dom";
 import "./sortable.esm.es.js";
 import "./CustomFilterChips.es.js";
@@ -34,88 +35,92 @@ import "recharts";
 import "@descope/react-sdk";
 import "./colors.es.js";
 export {
-  Xa as AddTeammates,
-  H as AskCompass,
-  V as AutoSearch,
-  U as Badge,
+  ar as AddTeammates,
+  z as AskCompass,
+  J as AutoSearch,
+  P as Badge,
   c as Card,
-  ua as ChartRenderer,
-  xa as ChatHistoryPanel,
-  Ta as ChatInterface,
-  ba as ChatMessage,
-  v as Checkbox,
-  P as ColorPalette,
-  W as ConditionCard,
-  Ya as ConnectData,
-  da as ConversationTurn,
+  Ua as ChartRenderer,
+  Da as ChatHistoryPanel,
+  Ia as ChatInterface,
+  va as ChatMessage,
+  U as Checkbox,
+  v as ColorPalette,
+  Z as ConditionCard,
+  rr as ConnectData,
+  Ca as ConversationTurn,
   G as DataTable,
-  R as DataTableFilters,
-  Aa as DemoProjectBanner,
+  H as DataTable2,
+  V as DataTableFilters,
+  R as DataTableFilters2,
+  Ma as DemoProjectBanner,
   C as DetailCard,
   S as DeviationIndicator,
-  ia as DrawerButton,
-  na as DrawerInput,
-  sa as DrawerLabel,
-  q as FileUploadSuccessState,
-  z as FileUploadingState,
-  Ba as FirstCallScreen,
+  pa as DrawerButton,
+  ma as DrawerInput,
+  da as DrawerLabel,
+  K as FileUploadSuccessState,
+  Q as FileUploadingState,
+  Oa as FirstCallScreen,
   h as FormLabel,
-  Za as GettingStarted,
+  er as GettingStarted,
   F as InlineConfirm,
-  Ga as IntegrationCard,
-  Sa as InteractionSummaryCard,
-  La as LoginForm,
-  $a as LoginPage,
-  ga as MessageThread,
-  X as ModelScoreCard,
+  Ea as IntegrationCard,
+  Ta as InteractionSummaryCard,
+  ka as LoginForm,
+  or as LoginPage,
+  ba as MessageThread,
+  _ as ModelScoreCard,
   w as MultiSelect,
-  va as NavDropdown,
-  Pa as NavDropdownItem,
-  ha as NavPill,
-  Fa as NavigationBar,
-  ja as NotificationItem,
-  Ea as NotificationPanel,
-  Y as ObservationCard,
-  Ma as OnboardingChecklist,
-  za as OverlayPanel,
-  Va as PerformancePanel,
-  Z as ScoreDriverCard,
-  _ as ScoreDriverCardVariant,
+  Fa as NavDropdown,
+  wa as NavDropdownItem,
+  ya as NavPill,
+  Na as NavigationBar,
+  Va as NotificationItem,
+  qa as NotificationPanel,
+  $ as ObservationCard,
+  Ga as OnboardingChecklist,
+  Xa as OverlayPanel,
+  Ja as PerformanceDetailsPage,
+  Ka as PerformancePanel,
+  aa as ScoreDriverCard,
+  ra as ScoreDriverCardVariant,
   B as SectionLabel,
   y as Select,
-  pa as SideDrawer,
-  wa as Sidebar,
-  ar as SignUpPage,
-  $ as SignalCard,
+  la as SideDrawer,
+  Aa as Sidebar,
+  ir as SignUpPage,
+  ea as SignalCard,
   f as SmallButton,
-  aa as SmallObservationCard,
-  Oa as SplitPane,
-  ya as StatusIndicator,
-  ra as SummarySection,
+  ta as SmallObservationCard,
+  Ra as SplitPane,
+  Ba as StatusIndicator,
+  oa as SummarySection,
   j as SummaryStatsPanel,
+  Qa as SupervisorSelect,
   L as Tabs,
   x as Tag,
   N as TextArea,
   O as TextInput,
-  Ia as ThinkingIndicator,
-  la as Timeline,
-  J as Toast,
-  K as ToastContainer,
+  ua as ThinkingIndicator,
+  Sa as Timeline,
+  W as Toast,
+  X as ToastContainer,
   g as Tooltip,
-  I as TooltipContent,
-  D as TooltipProvider,
-  u as TooltipTrigger,
-  ta as TourGuideTooltip,
-  ca as TranscriptCard,
-  or as UpdatedCoachingSynthesisCard,
-  tr as UpdatedCompassScore,
-  er as UpdatedGuidance,
-  ir as UpdatedInteractionContext,
-  nr as UpdatedInteractionDetails,
-  dr as UpdatedInteractionRecording,
-  sr as UpdatedInteractionScores,
-  pr as UpdatedInteractionSignals,
-  Ka as UploadEvaluate,
-  Qa as UploadInteraction
+  D as TooltipContent,
+  I as TooltipProvider,
+  b as TooltipTrigger,
+  na as TourGuideTooltip,
+  fa as TranscriptCard,
+  sr as UpdatedCoachingSynthesisCard,
+  pr as UpdatedCompassScore,
+  mr as UpdatedGuidance,
+  dr as UpdatedInteractionContext,
+  lr as UpdatedInteractionDetails,
+  fr as UpdatedInteractionRecording,
+  cr as UpdatedInteractionScores,
+  Cr as UpdatedInteractionSignals,
+  Za as UploadEvaluate,
+  _a as UploadInteraction
 };
 //# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chordia-ui",
-  "version": "3.7.2",
+  "version": "3.7.4",
   "description": "Chordia Design System - UI components, tokens, and Tailwind preset",
   "type": "module",
   "main": "dist/index.cjs.js",

package/src/components/UpdatedInteractionDetails/UpdatedInteractionDetails.jsx

@@ -455,7 +455,7 @@ const UpdatedInteractionDetails = ({
                   fontFamily: 'var(--default-font-family)',
                   whiteSpace: 'nowrap',
                 }}>
-                  Previous Session
+                  Previous Interaction
                 </span>
               </button>
             </NameTooltip>
@@ -492,7 +492,7 @@ const UpdatedInteractionDetails = ({
                   fontFamily: 'var(--default-font-family)',
                   whiteSpace: 'nowrap',
                 }}>
-                  Next Session
+                  Next Interaction
                 </span>
                 <ArrowRight size={16} color="var(--Neutral-800, #323232)" strokeWidth={1.5} />
               </button>
@@ -569,7 +569,7 @@ const UpdatedInteractionDetails = ({
                     fontFamily: 'var(--default-font-family)',
                     whiteSpace: 'nowrap',
                   }}>
-                    Previous Session
+                    Previous Interaction
                   </span>
                 </button>
               </NameTooltip>
@@ -604,7 +604,7 @@ const UpdatedInteractionDetails = ({
                     fontFamily: 'var(--default-font-family)',
                     whiteSpace: 'nowrap',
                   }}>
-                    Next Session
+                    Next Interaction
                   </span>
                   <ArrowRight size={16} color="var(--Neutral-800, #323232)" strokeWidth={1.5} />
                 </button>
@@ -706,7 +706,7 @@ const UpdatedInteractionDetails = ({
                             <CircleUser size={16} color="var(--Grey-Strong, #2E3236)" strokeWidth={1.5} />
                             <span style={{ fontSize: 13, fontWeight: 400, color: 'var(--Grey-Strong, #2E3236)', lineHeight: 1.2, whiteSpace: 'nowrap' }}>
                               <span style={{ fontWeight: 600 }}>{customerName}</span>{' '}
-                              <span>({sessionCount} Sessions)</span>
+                              <span>({sessionCount} Interactions)</span>
                             </span>
                           </div>
                           <ChevronRight size={16} color="var(--Grey-Strong, #2E3236)" strokeWidth={1.7} />
@@ -943,7 +943,7 @@ const UpdatedInteractionDetails = ({
             color: 'var(--Grey-Muted, #808183)',
             lineHeight: 1.5,
           }}>
-            {sessionCount} Sessions in Past
+            {sessionCount} Interactions in Past
           </span>
         ) : null}
         width={470}
@@ -955,20 +955,20 @@ const UpdatedInteractionDetails = ({
               onClick={() => { if (onViewAllSessions) onViewAllSessions(); setShowSessionDrawer(false); }}
               style={{
                 display: 'flex',
-                height: 32,
-                padding: '0 16px 0 12px',
+                height: 40,
+                padding: '0 20px 0 18px',
                 justifyContent: 'center',
                 alignItems: 'center',
-                gap: 6,
+                gap: 7,
                 background: 'var(--Grey-White, #FFF)',
                 border: '1px solid var(--Grey-absent, #D9D9D9)',
                 borderRadius: 10,
                 cursor: 'pointer',
               }}
             >
-              <History size={16} color="var(--Grey-Muted, #808183)" strokeWidth={1.5} />
-              <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--Grey-Strong, #2E3236)' }}>
-                View All Sessions
+              <History size={18} color="var(--Grey-Muted, #808183)" strokeWidth={1.5} />
+              <span style={{ fontSize: 15, fontWeight: 600, color: 'var(--Grey-Strong, #2E3236)' }}>
+                View All Interactions
               </span>
             </button>
           </div>
@@ -1040,7 +1040,7 @@ const UpdatedInteractionDetails = ({
                 textAlign: 'center',
               }}
             >
-              No previous sessions available
+              No other interactions available
             </div>
           )}
         </div>

package/src/components/UpdatedInteractionDetails/UpdatedThreads.jsx

@@ -607,6 +607,7 @@ const CommentBubble = ({
                   : "var(--surface-warm-40, rgba(243, 241, 229, 0.40))",
                 borderRadius: 8,
                 wordBreak: "break-word",
+                whiteSpace: "pre-wrap",
               }}
             >
               {paragraph}

package/src/components/common/CustomFilterChips.jsx

@@ -54,9 +54,13 @@ export default function CustomFilterChips({
       });
     } else if (typeof value === "string" && value.trim() !== "") {
       const displayValue = getDisplayLabel(key, value);
+      const label =
+        key === "contact_id"
+          ? "Contact Id"
+          : `${formatLabel(key)}: ${displayValue}`;
       chips.push({
         key,
-        label: `${formatLabel(key)}: ${displayValue}`,
+        label,
         onRemove: () => onChange({ ...filters, [key]: "" }),
       });
     }

package/src/components/common/Pagination.jsx

@@ -1,9 +1,10 @@
- "use client";
+"use client";
 
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
 
 /**
- * Pagination Component
+ * Pagination Component (Figma DS — node 218:7058)
  * @param {number} page - current page number (1-based)
  * @param {number} pageSize - rows per page
  * @param {number} totalCount - total row count (for pagination)
@@ -35,6 +36,20 @@ export default function Pagination({
     totalCount
   );
 
+  const [pageSizeOpen, setPageSizeOpen] = useState(false);
+  const pageSizeRef = useRef(null);
+
+  useEffect(() => {
+    if (!pageSizeOpen) return;
+    const onMouseDown = (e) => {
+      if (pageSizeRef.current && !pageSizeRef.current.contains(e.target)) {
+        setPageSizeOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onMouseDown);
+    return () => document.removeEventListener("mousedown", onMouseDown);
+  }, [pageSizeOpen]);
+
   const pageNumbers = useMemo(() => {
     if (totalPages <= 1) return [];
 
@@ -84,75 +99,168 @@ export default function Pagination({
   const shouldShowPageSizeSelector =
     showPageSizeSelector && typeof onPageSizeChange === "function";
 
+  const labelStyle = {
+    fontFamily: "var(--font-sans)",
+    fontSize: 16,
+    lineHeight: "24px",
+    color: "#323232",
+  };
+
+  const pillBase = {
+    height: 24,
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "0 8px",
+    borderRadius: 10,
+    fontFamily: "var(--font-sans)",
+    fontSize: 12,
+    lineHeight: "16px",
+    border: "1px solid #E6E6E6",
+    background: "#FFFFFF",
+    color: "#0B0B0B",
+    cursor: "pointer",
+    gap: 4,
+    whiteSpace: "nowrap",
+  };
+
   return (
     <div
-      className={`flex items-center justify-between px-3 py-3 gap-4 bg-[white] rounded-b-lg ${className}`}
+      className={className}
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: "12px 0",
+        gap: 16,
+        background: "transparent",
+      }}
     >
-      <div className="flex items-center gap-4">
+      <div style={{ display: "inline-flex", alignItems: "center", gap: 16 }}>
         {shouldShowPageSizeSelector && (
-          <div className="flex items-center gap-2">
-            <span className="text-sm text-gray-700">Rows per page:</span>
-            <select
-              className="border border-gray-300 rounded px-2 py-1 text-sm bg-white text-gray-700"
-              value={pageSize}
-              onChange={(e) => onPageSizeChange(Number(e.target.value))}
+          <div ref={pageSizeRef} style={{ position: "relative", display: "inline-flex", alignItems: "center", gap: 8 }}>
+            <span style={labelStyle}>Result per page</span>
+            <button
+              type="button"
+              onClick={() => setPageSizeOpen((v) => !v)}
+              aria-haspopup="listbox"
+              aria-expanded={pageSizeOpen}
+              style={{ ...pillBase, minWidth: 47 }}
             >
-              {pageSizeOptions.map((size) => (
-                <option key={size} value={size}>
-                  {size}
-                </option>
-              ))}
-            </select>
+              {pageSize}
+              <ChevronDown size={12} strokeWidth={1.75} />
+            </button>
+            {pageSizeOpen && (
+              <div
+                role="listbox"
+                style={{
+                  position: "absolute",
+                  bottom: "calc(100% + 4px)",
+                  right: 0,
+                  zIndex: 30,
+                  background: "#FFFFFF",
+                  border: "1px solid #E6E6E6",
+                  borderRadius: 10,
+                  boxShadow: "0 8px 24px rgba(11, 11, 11, 0.10)",
+                  padding: 4,
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: 2,
+                  minWidth: 60,
+                }}
+              >
+                {pageSizeOptions.map((size) => {
+                  const selected = size === pageSize;
+                  return (
+                    <button
+                      key={size}
+                      type="button"
+                      role="option"
+                      aria-selected={selected}
+                      onClick={() => {
+                        onPageSizeChange(size);
+                        setPageSizeOpen(false);
+                      }}
+                      style={{
+                        background: selected ? "#F2F2F0" : "transparent",
+                        border: "none",
+                        padding: "6px 10px",
+                        borderRadius: 6,
+                        fontFamily: "var(--font-sans)",
+                        fontSize: 13,
+                        color: "#0B0B0B",
+                        textAlign: "left",
+                        cursor: "pointer",
+                      }}
+                    >
+                      {size}
+                    </button>
+                  );
+                })}
+              </div>
+            )}
           </div>
         )}
         {showRecordCounter && (
-          <span className="text-sm text-gray-700">
-            Showing{" "}
+          <span style={labelStyle}>
             {currentRecordEnd > 0
-              ? `${currentRecordStart}-${currentRecordEnd}`
-              : 0}{" "}
-            of {totalCount}
+              ? `${currentRecordStart}-${currentRecordEnd} of ${totalCount}`
+              : `0 of ${totalCount}`}
           </span>
         )}
       </div>
 
-      <div className="flex items-center gap-2">
+      <div style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
         <button
-          className="px-3 py-1.5 rounded-lg bg-white border border-gray-300 text-gray-700 flex items-center justify-center hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white text-sm font-medium"
+          type="button"
           onClick={() => onPageChange(page - 1)}
           disabled={page <= 1}
           aria-label="Previous page"
+          style={{
+            ...pillBase,
+            opacity: page <= 1 ? 0.5 : 1,
+            cursor: page <= 1 ? "default" : "pointer",
+          }}
         >
-          &lt; Previous
+          <ChevronLeft size={12} strokeWidth={1.75} />
+          Back
         </button>
 
         {pageNumbers.map((pageNum, index) => {
           if (pageNum === "ellipsis-start" || pageNum === "ellipsis-end") {
             return (
-              <button
+              <span
                 key={`ellipsis-${index}`}
-                className="w-8 h-8 rounded-full text-gray-500 flex items-center justify-center cursor-default"
-                disabled
                 aria-hidden="true"
+                style={{
+                  fontFamily: "var(--font-sans)",
+                  fontSize: 12,
+                  color: "#676767",
+                  padding: "0 4px",
+                  userSelect: "none",
+                }}
               >
-                <span className="text-xs">...</span>
-              </button>
+                …
+              </span>
             );
           }
 
           const isActive = pageNum === page;
-
           return (
             <button
               key={pageNum}
-              className={`w-8 h-8 rounded-full flex items-center justify-center transition-colors text-sm font-medium ${
-                isActive
-                  ? "bg-green-2 text-black font-semibold"
-                  : "bg-white border border-gray-300 text-gray-700 hover:bg-gray-50"
-              }`}
+              type="button"
               onClick={() => onPageChange(pageNum)}
               aria-label={`Go to page ${pageNum}`}
               aria-current={isActive ? "page" : undefined}
+              style={{
+                ...pillBase,
+                minWidth: 22,
+                padding: "0 6px",
+                background: isActive ? "#0B0B0B" : "#FFFFFF",
+                border: isActive ? "none" : "1px solid #E6E6E6",
+                color: isActive ? "#FFFFFF" : "#0B0B0B",
+              }}
             >
               {pageNum}
             </button>
@@ -160,15 +268,20 @@ export default function Pagination({
         })}
 
         <button
-          className="px-3 py-1.5 rounded-lg bg-white border border-gray-300 text-gray-700 flex items-center justify-center hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white text-sm font-medium"
+          type="button"
           onClick={() => onPageChange(page + 1)}
           disabled={page >= totalPages}
           aria-label="Next page"
+          style={{
+            ...pillBase,
+            opacity: page >= totalPages ? 0.5 : 1,
+            cursor: page >= totalPages ? "default" : "pointer",
+          }}
         >
-          Next &gt;
+          Next
+          <ChevronRight size={12} strokeWidth={1.75} />
         </button>
       </div>
     </div>
   );
 }
-