@skippr/live-agent-sdk 0.12.0 → 0.13.0

package/dist/esm/lib-exports.js

@@ -517,7 +517,7 @@ function ChatHeader({ onClose }) {
 // src/components/MeetingControls.tsx
 import { useLocalParticipant as useLocalParticipant3 } from "@livekit/components-react";
 import { ScreenSharePresets } from "livekit-client";
-import { useCallback as useCallback4, useEffect as useEffect2, useState as useState3 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect2, useRef, useState as useState3 } from "react";
 
 // src/lib/format.ts
 function formatTime(seconds) {
@@ -525,18 +525,45 @@ function formatTime(seconds) {
   const s = (seconds % 60).toString().padStart(2, "0");
   return `${m}:${s}`;
 }
+function parseNumber(s) {
+  const n = Number(s);
+  return n > 0 ? n : null;
+}
+
+// src/components/SessionWarningBanner.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var SESSION_WARNING_THRESHOLD_SECS = 60;
+function SessionWarningBanner({ remaining }) {
+  if (remaining === null || remaining <= 0 || remaining > SESSION_WARNING_THRESHOLD_SECS)
+    return null;
+  return /* @__PURE__ */ jsx3("div", {
+    "data-testid": "session-warning-banner",
+    className: "skippr:bg-red-50 skippr:px-4 skippr:py-1.5 skippr:text-center skippr:text-xs skippr:font-medium skippr:text-red-700",
+    children: "Session ending soon"
+  });
+}
 
 // src/components/MeetingControls.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function MeetingControls({ onHangUp }) {
+  const maxCallDuration = useAgentState("maxCallDuration", parseNumber, null);
   const { localParticipant } = useLocalParticipant3();
   const isMuted = !localParticipant.isMicrophoneEnabled;
   const isScreenSharing = localParticipant.isScreenShareEnabled;
-  const [elapsed, setElapsed] = useState3(0);
+  const endTimeRef = useRef(null);
+  const [remaining, setRemaining] = useState3(null);
   useEffect2(() => {
-    const id = setInterval(() => setElapsed((t) => t + 1), 1000);
+    if (maxCallDuration === null || endTimeRef.current !== null)
+      return;
+    endTimeRef.current = Date.now() + maxCallDuration * 1000;
+    const tick = () => {
+      const secs = Math.ceil((endTimeRef.current - Date.now()) / 1000);
+      setRemaining(Math.max(secs, 0));
+    };
+    tick();
+    const id = setInterval(tick, 1000);
     return () => clearInterval(id);
-  }, []);
+  }, [maxCallDuration]);
   const toggleMute = useCallback4(async () => {
     try {
       await localParticipant.setMicrophoneEnabled(isMuted);
@@ -559,58 +586,65 @@ function MeetingControls({ onHangUp }) {
     toggleMute().then(() => toggleScreenShare());
   }, []);
   return /* @__PURE__ */ jsxs2("div", {
-    className: "skippr:flex skippr:items-center skippr:justify-between skippr:border-b skippr:px-4 skippr:py-3",
     children: [
+      /* @__PURE__ */ jsx4(SessionWarningBanner, {
+        remaining
+      }),
       /* @__PURE__ */ jsxs2("div", {
-        className: "skippr:flex skippr:items-center skippr:gap-2",
+        className: "skippr:flex skippr:items-center skippr:justify-between skippr:border-b skippr:px-4 skippr:py-3",
         children: [
-          /* @__PURE__ */ jsx3(Button, {
-            size: "icon-sm",
-            variant: isMuted ? "destructive" : "outline",
-            onClick: toggleMute,
-            "aria-label": isMuted ? "Unmute" : "Mute",
-            children: isMuted ? /* @__PURE__ */ jsx3(MicOff, {
-              className: "skippr:size-4"
-            }) : /* @__PURE__ */ jsx3(Mic, {
-              className: "skippr:size-4"
-            })
+          /* @__PURE__ */ jsxs2("div", {
+            className: "skippr:flex skippr:items-center skippr:gap-2",
+            children: [
+              /* @__PURE__ */ jsx4(Button, {
+                size: "icon-sm",
+                variant: isMuted ? "destructive" : "outline",
+                onClick: toggleMute,
+                "aria-label": isMuted ? "Unmute" : "Mute",
+                children: isMuted ? /* @__PURE__ */ jsx4(MicOff, {
+                  className: "skippr:size-4"
+                }) : /* @__PURE__ */ jsx4(Mic, {
+                  className: "skippr:size-4"
+                })
+              }),
+              /* @__PURE__ */ jsx4(Button, {
+                size: "icon-sm",
+                variant: isScreenSharing ? "default" : "outline",
+                onClick: toggleScreenShare,
+                "aria-label": isScreenSharing ? "Stop sharing" : "Share screen",
+                children: isScreenSharing ? /* @__PURE__ */ jsx4(MonitorOff, {
+                  className: "skippr:size-4"
+                }) : /* @__PURE__ */ jsx4(Monitor, {
+                  className: "skippr:size-4"
+                })
+              })
+            ]
+          }),
+          remaining !== null && /* @__PURE__ */ jsx4("span", {
+            className: cn("skippr:text-sm skippr:font-medium skippr:tabular-nums", remaining <= SESSION_WARNING_THRESHOLD_SECS ? "skippr:text-red-600 skippr:animate-pulse" : "skippr:text-muted-foreground"),
+            children: formatTime(remaining)
           }),
-          /* @__PURE__ */ jsx3(Button, {
+          /* @__PURE__ */ jsx4(Button, {
             size: "icon-sm",
-            variant: isScreenSharing ? "default" : "outline",
-            onClick: toggleScreenShare,
-            "aria-label": isScreenSharing ? "Stop sharing" : "Share screen",
-            children: isScreenSharing ? /* @__PURE__ */ jsx3(MonitorOff, {
-              className: "skippr:size-4"
-            }) : /* @__PURE__ */ jsx3(Monitor, {
+            variant: "destructive",
+            onClick: onHangUp,
+            "aria-label": "Hang up",
+            children: /* @__PURE__ */ jsx4(PhoneOff, {
               className: "skippr:size-4"
             })
           })
         ]
-      }),
-      /* @__PURE__ */ jsx3("span", {
-        className: "skippr:text-sm skippr:font-medium skippr:tabular-nums skippr:text-muted-foreground",
-        children: formatTime(elapsed)
-      }),
-      /* @__PURE__ */ jsx3(Button, {
-        size: "icon-sm",
-        variant: "destructive",
-        onClick: onHangUp,
-        "aria-label": "Hang up",
-        children: /* @__PURE__ */ jsx3(PhoneOff, {
-          className: "skippr:size-4"
-        })
       })
     ]
   });
 }
 
 // src/components/MessageList.tsx
-import { useEffect as useEffect3, useRef } from "react";
+import { useEffect as useEffect3, useRef as useRef2 } from "react";
 
 // src/components/ChatInput.tsx
 import { useState as useState4 } from "react";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function ChatInput({ sendChatMessage, isSendingChat }) {
   const [inputText, setInputText] = useState4("");
   const canSend = inputText.trim().length > 0 && !isSendingChat;
@@ -626,7 +660,7 @@ function ChatInput({ sendChatMessage, isSendingChat }) {
     onSubmit: handleSubmit,
     className: "skippr:flex skippr:items-center skippr:gap-2 skippr:border-t skippr:border-border skippr:px-3 skippr:py-2",
     children: [
-      /* @__PURE__ */ jsx4("input", {
+      /* @__PURE__ */ jsx5("input", {
         type: "text",
         value: inputText,
         onChange: (e) => setInputText(e.target.value),
@@ -634,12 +668,12 @@ function ChatInput({ sendChatMessage, isSendingChat }) {
         className: cn("skippr:flex-1 skippr:rounded-lg skippr:border skippr:border-border skippr:bg-background", "skippr:px-3 skippr:py-2 skippr:text-sm skippr:text-foreground", "skippr:placeholder:text-muted-foreground skippr:outline-none", "skippr:focus:ring-1 skippr:focus:ring-ring"),
         disabled: isSendingChat
       }),
-      /* @__PURE__ */ jsx4("button", {
+      /* @__PURE__ */ jsx5("button", {
         type: "submit",
         disabled: !canSend,
         "aria-label": "Send message",
         className: cn("skippr:flex skippr:size-9 skippr:shrink-0 skippr:items-center skippr:justify-center", "skippr:rounded-lg skippr:bg-primary skippr:text-primary-foreground", "skippr:transition-opacity", !canSend && "skippr:opacity-50 skippr:cursor-not-allowed"),
-        children: /* @__PURE__ */ jsx4(SendHorizontal, {
+        children: /* @__PURE__ */ jsx5(SendHorizontal, {
           className: "skippr:size-4"
         })
       })
@@ -648,12 +682,12 @@ function ChatInput({ sendChatMessage, isSendingChat }) {
 }
 
 // src/components/ChatMessage.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function ChatMessage({ message }) {
   const isUser = message.role === "user";
-  return /* @__PURE__ */ jsx5("div", {
+  return /* @__PURE__ */ jsx6("div", {
     className: cn("skippr:flex skippr:w-full skippr:px-4 skippr:py-1", isUser ? "skippr:justify-end" : "skippr:justify-start"),
-    children: /* @__PURE__ */ jsx5("div", {
+    children: /* @__PURE__ */ jsx6("div", {
       className: cn("skippr:max-w-[85%] skippr:whitespace-pre-wrap skippr:rounded-2xl skippr:px-4 skippr:py-2.5 skippr:text-sm skippr:leading-relaxed", isUser ? "skippr:rounded-br-sm skippr:bg-primary skippr:text-primary-foreground" : "skippr:rounded-bl-sm skippr:bg-muted skippr:text-foreground"),
       children: message.content
     })
@@ -661,20 +695,20 @@ function ChatMessage({ message }) {
 }
 
 // src/components/TypingIndicator.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 function TypingIndicator() {
-  return /* @__PURE__ */ jsx6("div", {
+  return /* @__PURE__ */ jsx7("div", {
     className: "skippr:flex skippr:items-center skippr:gap-1 skippr:px-4 skippr:py-3",
     children: /* @__PURE__ */ jsxs4("div", {
       className: "skippr:flex skippr:items-center skippr:gap-1 skippr:rounded-2xl skippr:rounded-bl-sm skippr:bg-muted skippr:px-4 skippr:py-2.5",
       children: [
-        /* @__PURE__ */ jsx6("span", {
+        /* @__PURE__ */ jsx7("span", {
           className: "skippr:size-1.5 skippr:animate-bounce skippr:rounded-full skippr:bg-muted-foreground/60 skippr:[animation-delay:0ms]"
         }),
-        /* @__PURE__ */ jsx6("span", {
+        /* @__PURE__ */ jsx7("span", {
           className: "skippr:size-1.5 skippr:animate-bounce skippr:rounded-full skippr:bg-muted-foreground/60 skippr:[animation-delay:150ms]"
         }),
-        /* @__PURE__ */ jsx6("span", {
+        /* @__PURE__ */ jsx7("span", {
           className: "skippr:size-1.5 skippr:animate-bounce skippr:rounded-full skippr:bg-muted-foreground/60 skippr:[animation-delay:300ms]"
         })
       ]
@@ -683,14 +717,14 @@ function TypingIndicator() {
 }
 
 // src/components/MessageList.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 function MessageList({
   messages,
   isStreaming,
   sendChatMessage,
   isSendingChat
 }) {
-  const scrollRef = useRef(null);
+  const scrollRef = useRef2(null);
   const lastMessage = messages.length > 0 ? messages[messages.length - 1] : undefined;
   useEffect3(() => {
     scrollRef.current?.scrollIntoView({ behavior: "smooth" });
@@ -699,22 +733,22 @@ function MessageList({
   return /* @__PURE__ */ jsxs5("div", {
     className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col",
     children: [
-      /* @__PURE__ */ jsx7("div", {
+      /* @__PURE__ */ jsx8("div", {
         className: "skippr:min-h-0 skippr:flex-1 skippr:overflow-y-auto",
         children: /* @__PURE__ */ jsxs5("div", {
           className: "skippr:flex skippr:flex-col skippr:gap-1 skippr:py-3",
           children: [
-            messages.map((message) => /* @__PURE__ */ jsx7(ChatMessage, {
+            messages.map((message) => /* @__PURE__ */ jsx8(ChatMessage, {
               message
             }, message.id)),
-            showTyping && /* @__PURE__ */ jsx7(TypingIndicator, {}),
-            /* @__PURE__ */ jsx7("div", {
+            showTyping && /* @__PURE__ */ jsx8(TypingIndicator, {}),
+            /* @__PURE__ */ jsx8("div", {
               ref: scrollRef
             })
           ]
         })
       }),
-      /* @__PURE__ */ jsx7(ChatInput, {
+      /* @__PURE__ */ jsx8(ChatInput, {
         sendChatMessage,
         isSendingChat
       })
@@ -723,12 +757,12 @@ function MessageList({
 }
 
 // src/components/QuickActions.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 function QuickActions({ onStartSession, isStarting, error }) {
   return /* @__PURE__ */ jsxs6("div", {
     className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:items-center skippr:gap-6 skippr:overflow-y-auto skippr:px-4 skippr:py-4",
     children: [
-      /* @__PURE__ */ jsx8("p", {
+      /* @__PURE__ */ jsx9("p", {
         className: "skippr:mb-1 skippr:text-sm skippr:text-muted-foreground",
         children: "How can I help you today?"
       }),
@@ -738,15 +772,15 @@ function QuickActions({ onStartSession, isStarting, error }) {
         onClick: onStartSession,
         disabled: isStarting,
         children: [
-          isStarting ? /* @__PURE__ */ jsx8(LoaderCircle, {
+          isStarting ? /* @__PURE__ */ jsx9(LoaderCircle, {
             className: "skippr:size-4 skippr:animate-spin skippr:text-primary"
-          }) : /* @__PURE__ */ jsx8(MessageCircleQuestionMark, {
+          }) : /* @__PURE__ */ jsx9(MessageCircleQuestionMark, {
             className: "skippr:size-4 skippr:text-primary"
           }),
           isStarting ? "Starting..." : "Start Session"
         ]
       }),
-      error && /* @__PURE__ */ jsx8("p", {
+      error && /* @__PURE__ */ jsx9("p", {
         className: "skippr:text-xs skippr:text-destructive",
         children: error
       })
@@ -755,17 +789,17 @@ function QuickActions({ onStartSession, isStarting, error }) {
 }
 
 // src/components/SessionAgenda.tsx
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function SessionAgenda({ phases, questions = [] }) {
   if (phases.length === 0) {
     return /* @__PURE__ */ jsxs7("div", {
       className: "skippr:flex skippr:flex-col skippr:gap-3 skippr:p-4",
       children: [
-        /* @__PURE__ */ jsx9("h3", {
+        /* @__PURE__ */ jsx10("h3", {
           className: "skippr:text-sm skippr:font-semibold",
           children: "Agenda"
         }),
-        /* @__PURE__ */ jsx9("p", {
+        /* @__PURE__ */ jsx10("p", {
           className: "skippr:text-xs skippr:text-muted-foreground",
           children: "Waiting for session..."
         })
@@ -775,11 +809,11 @@ function SessionAgenda({ phases, questions = [] }) {
   return /* @__PURE__ */ jsxs7("div", {
     className: "skippr:flex skippr:flex-col skippr:gap-3 skippr:p-4",
     children: [
-      /* @__PURE__ */ jsx9("h3", {
+      /* @__PURE__ */ jsx10("h3", {
         className: "skippr:text-sm skippr:font-semibold",
         children: "Agenda"
       }),
-      /* @__PURE__ */ jsx9("ul", {
+      /* @__PURE__ */ jsx10("ul", {
         className: "skippr:flex skippr:flex-col skippr:gap-2",
         children: phases.map((phase) => {
           const phaseQuestions = questions.filter((q) => q.phaseName === phase.name);
@@ -791,10 +825,10 @@ function SessionAgenda({ phases, questions = [] }) {
               /* @__PURE__ */ jsxs7("div", {
                 className: "skippr:flex skippr:items-center skippr:gap-2 skippr:text-sm",
                 children: [
-                  /* @__PURE__ */ jsx9(PhaseIcon, {
+                  /* @__PURE__ */ jsx10(PhaseIcon, {
                     status: phase.status
                   }),
-                  /* @__PURE__ */ jsx9("span", {
+                  /* @__PURE__ */ jsx10("span", {
                     className: cn(phase.status === "completed" && "skippr:text-muted-foreground skippr:line-through", phase.status === "active" && "skippr:font-medium skippr:text-primary"),
                     children: phase.name
                   })
@@ -818,26 +852,26 @@ function SessionAgenda({ phases, questions = [] }) {
 }
 function PhaseIcon({ status }) {
   if (status === "completed") {
-    return /* @__PURE__ */ jsx9("div", {
+    return /* @__PURE__ */ jsx10("div", {
       className: "skippr:flex skippr:size-4 skippr:shrink-0 skippr:items-center skippr:justify-center skippr:rounded-full skippr:bg-primary",
-      children: /* @__PURE__ */ jsx9(Check, {
+      children: /* @__PURE__ */ jsx10(Check, {
         className: "skippr:size-2.5 skippr:text-primary-foreground",
         strokeWidth: 3
       })
     });
   }
   if (status === "active") {
-    return /* @__PURE__ */ jsx9(LoaderCircle, {
+    return /* @__PURE__ */ jsx10(LoaderCircle, {
       className: "skippr:size-4 skippr:shrink-0 skippr:text-primary skippr:animate-spin"
     });
   }
-  return /* @__PURE__ */ jsx9(Circle, {
+  return /* @__PURE__ */ jsx10(Circle, {
     className: "skippr:size-4 skippr:shrink-0 skippr:text-muted-foreground"
   });
 }
 
 // src/components/Sidebar.tsx
-import { jsx as jsx10, jsxs as jsxs8, Fragment } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs8, Fragment } from "react/jsx-runtime";
 function Sidebar() {
   const { isConnected, isStarting, error, startSession, disconnect, isPanelOpen, closePanel } = useLiveAgent();
   useEffect4(() => {
@@ -850,24 +884,24 @@ function Sidebar() {
       document.body.style.transition = "";
     };
   }, []);
-  return /* @__PURE__ */ jsx10("div", {
+  return /* @__PURE__ */ jsx11("div", {
     className: cn("skippr:fixed skippr:top-0 skippr:right-0 skippr:h-full skippr:z-[9999]", "skippr:bg-background skippr:border-l skippr:border-border", "skippr:flex skippr:flex-col", "skippr:transition-all skippr:duration-300 skippr:ease-in-out skippr:overflow-hidden", !isPanelOpen && "skippr:w-0 skippr:border-l-0"),
     style: { width: isPanelOpen ? SIDEBAR_WIDTH : undefined },
     children: isConnected ? /* @__PURE__ */ jsxs8(Fragment, {
       children: [
-        /* @__PURE__ */ jsx10(ChatHeader, {
+        /* @__PURE__ */ jsx11(ChatHeader, {
           onClose: closePanel
         }),
-        /* @__PURE__ */ jsx10(ConnectedContent, {
+        /* @__PURE__ */ jsx11(ConnectedContent, {
           onDisconnect: disconnect
         })
       ]
     }) : /* @__PURE__ */ jsxs8(Fragment, {
       children: [
-        /* @__PURE__ */ jsx10(ChatHeader, {
+        /* @__PURE__ */ jsx11(ChatHeader, {
           onClose: closePanel
         }),
-        /* @__PURE__ */ jsx10(QuickActions, {
+        /* @__PURE__ */ jsx11(QuickActions, {
           onStartSession: startSession,
           isStarting,
           error
@@ -883,9 +917,9 @@ function ConnectedContent({ onDisconnect }) {
   const { phases } = usePhaseUpdates();
   const { questions } = useQuestionUpdates();
   if (!isConnected) {
-    return /* @__PURE__ */ jsx10("div", {
+    return /* @__PURE__ */ jsx11("div", {
       className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
-      children: /* @__PURE__ */ jsx10("p", {
+      children: /* @__PURE__ */ jsx11("p", {
         className: "skippr:text-sm skippr:text-muted-foreground",
         children: "Connecting..."
       })
@@ -894,22 +928,22 @@ function ConnectedContent({ onDisconnect }) {
   const isAgentSpeaking = agentState === "speaking";
   return /* @__PURE__ */ jsxs8(Fragment, {
     children: [
-      /* @__PURE__ */ jsx10(MeetingControls, {
+      /* @__PURE__ */ jsx11(MeetingControls, {
         onHangUp: onDisconnect
       }),
       /* @__PURE__ */ jsxs8("div", {
         className: "skippr:flex skippr:min-h-0 skippr:flex-1",
         children: [
-          /* @__PURE__ */ jsx10("div", {
+          /* @__PURE__ */ jsx11("div", {
             className: "skippr:w-[260px] skippr:shrink-0 skippr:overflow-y-auto skippr:border-r",
-            children: /* @__PURE__ */ jsx10(SessionAgenda, {
+            children: /* @__PURE__ */ jsx11(SessionAgenda, {
               phases,
               questions
             })
           }),
-          /* @__PURE__ */ jsx10("div", {
+          /* @__PURE__ */ jsx11("div", {
             className: "skippr:flex skippr:min-w-0 skippr:flex-1 skippr:flex-col",
-            children: /* @__PURE__ */ jsx10(MessageList, {
+            children: /* @__PURE__ */ jsx11(MessageList, {
               messages: allMessages,
               isStreaming: isAgentSpeaking,
               sendChatMessage,
@@ -923,27 +957,27 @@ function ConnectedContent({ onDisconnect }) {
 }
 
 // src/components/SidebarTrigger.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var TRIGGER_GAP = 16;
 var TRIGGER_DEFAULT_RIGHT = 24;
 function SidebarTrigger() {
   const { isPanelOpen, togglePanel } = useLiveAgent();
-  return /* @__PURE__ */ jsx11(Button, {
+  return /* @__PURE__ */ jsx12(Button, {
     size: "icon-lg",
     onClick: togglePanel,
     className: "skippr:fixed skippr:bottom-6 skippr:z-[9998] skippr:size-14 skippr:rounded-full skippr:shadow-lg skippr:transition-all skippr:duration-300",
     style: { right: isPanelOpen ? SIDEBAR_WIDTH + TRIGGER_GAP : TRIGGER_DEFAULT_RIGHT },
     title: isPanelOpen ? "Close chat" : "Chat with us",
-    children: isPanelOpen ? /* @__PURE__ */ jsx11(X, {
+    children: isPanelOpen ? /* @__PURE__ */ jsx12(X, {
       className: "skippr:size-6"
-    }) : /* @__PURE__ */ jsx11(MessageCircle, {
+    }) : /* @__PURE__ */ jsx12(MessageCircle, {
       className: "skippr:size-6"
     })
   });
 }
 
 // src/components/LiveAgent.tsx
-import { jsx as jsx12, jsxs as jsxs9, Fragment as Fragment2 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs9, Fragment as Fragment2 } from "react/jsx-runtime";
 function LiveAgent({
   agentId,
   authToken,
@@ -988,15 +1022,15 @@ function LiveAgent({
   ]);
   const widgetContent = /* @__PURE__ */ jsxs9(Fragment2, {
     children: [
-      connection && /* @__PURE__ */ jsx12(RoomAudioRenderer, {}),
-      /* @__PURE__ */ jsx12(SidebarTrigger, {}),
-      /* @__PURE__ */ jsx12(Sidebar, {}),
+      connection && /* @__PURE__ */ jsx13(RoomAudioRenderer, {}),
+      /* @__PURE__ */ jsx13(SidebarTrigger, {}),
+      /* @__PURE__ */ jsx13(Sidebar, {}),
       children
     ]
   });
-  return /* @__PURE__ */ jsx12(LiveAgentContext.Provider, {
+  return /* @__PURE__ */ jsx13(LiveAgentContext.Provider, {
     value: ctx,
-    children: connection ? /* @__PURE__ */ jsx12(LiveKitRoom, {
+    children: connection ? /* @__PURE__ */ jsx13(LiveKitRoom, {
       serverUrl: connection.livekitUrl,
       token: connection.token,
       connect: shouldConnect,

package/dist/skippr-sdk.css

@@ -1,2 +1,2 @@
 /*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--skippr-font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--skippr-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--skippr-color-white:#fff;--skippr-spacing:.25rem;--skippr-text-xs:.75rem;--skippr-text-xs--line-height:calc(1/.75);--skippr-text-sm:.875rem;--skippr-text-sm--line-height:calc(1.25/.875);--skippr-font-weight-medium:500;--skippr-font-weight-semibold:600;--skippr-leading-relaxed:1.625;--skippr-radius-2xl:1rem;--skippr-ease-in-out:cubic-bezier(.4,0,.2,1);--skippr-animate-spin:spin 1s linear infinite;--skippr-animate-bounce:bounce 1s infinite;--skippr-default-transition-duration:.15s;--skippr-default-transition-timing-function:cubic-bezier(.4,0,.2,1);--skippr-default-font-family:var(--skippr-font-sans);--skippr-default-mono-font-family:var(--skippr-font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--skippr-default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--skippr-default-font-feature-settings,normal);font-variation-settings:var(--skippr-default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--skippr-default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--skippr-default-mono-font-feature-settings,normal);font-variation-settings:var(--skippr-default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.skippr\:fixed{position:fixed}.skippr\:top-0{top:calc(var(--skippr-spacing)*0)}.skippr\:right-0{right:calc(var(--skippr-spacing)*0)}.skippr\:bottom-6{bottom:calc(var(--skippr-spacing)*6)}.skippr\:z-\[9998\]{z-index:9998}.skippr\:z-\[9999\]{z-index:9999}.skippr\:mb-1{margin-bottom:calc(var(--skippr-spacing)*1)}.skippr\:ml-6{margin-left:calc(var(--skippr-spacing)*6)}.skippr\:flex{display:flex}.skippr\:inline-flex{display:inline-flex}.skippr\:size-1\.5{width:calc(var(--skippr-spacing)*1.5);height:calc(var(--skippr-spacing)*1.5)}.skippr\:size-2\.5{width:calc(var(--skippr-spacing)*2.5);height:calc(var(--skippr-spacing)*2.5)}.skippr\:size-3\.5{width:calc(var(--skippr-spacing)*3.5);height:calc(var(--skippr-spacing)*3.5)}.skippr\:size-4{width:calc(var(--skippr-spacing)*4);height:calc(var(--skippr-spacing)*4)}.skippr\:size-6{width:calc(var(--skippr-spacing)*6);height:calc(var(--skippr-spacing)*6)}.skippr\:size-8{width:calc(var(--skippr-spacing)*8);height:calc(var(--skippr-spacing)*8)}.skippr\:size-9{width:calc(var(--skippr-spacing)*9);height:calc(var(--skippr-spacing)*9)}.skippr\:size-10{width:calc(var(--skippr-spacing)*10);height:calc(var(--skippr-spacing)*10)}.skippr\:size-14{width:calc(var(--skippr-spacing)*14);height:calc(var(--skippr-spacing)*14)}.skippr\:h-6{height:calc(var(--skippr-spacing)*6)}.skippr\:h-8{height:calc(var(--skippr-spacing)*8)}.skippr\:h-9{height:calc(var(--skippr-spacing)*9)}.skippr\:h-10{height:calc(var(--skippr-spacing)*10)}.skippr\:h-auto{height:auto}.skippr\:h-full{height:100%}.skippr\:min-h-0{min-height:calc(var(--skippr-spacing)*0)}.skippr\:w-0{width:calc(var(--skippr-spacing)*0)}.skippr\:w-\[260px\]{width:260px}.skippr\:w-full{width:100%}.skippr\:max-w-\[85\%\]{max-width:85%}.skippr\:min-w-0{min-width:calc(var(--skippr-spacing)*0)}.skippr\:flex-1{flex:1}.skippr\:shrink-0{flex-shrink:0}.skippr\:animate-bounce{animation:var(--skippr-animate-bounce)}.skippr\:animate-spin{animation:var(--skippr-animate-spin)}.skippr\:cursor-not-allowed{cursor:not-allowed}.skippr\:flex-col{flex-direction:column}.skippr\:items-center{align-items:center}.skippr\:justify-between{justify-content:space-between}.skippr\:justify-center{justify-content:center}.skippr\:justify-end{justify-content:flex-end}.skippr\:justify-start{justify-content:flex-start}.skippr\:gap-0\.5{gap:calc(var(--skippr-spacing)*.5)}.skippr\:gap-1{gap:calc(var(--skippr-spacing)*1)}.skippr\:gap-1\.5{gap:calc(var(--skippr-spacing)*1.5)}.skippr\:gap-2{gap:calc(var(--skippr-spacing)*2)}.skippr\:gap-3{gap:calc(var(--skippr-spacing)*3)}.skippr\:gap-6{gap:calc(var(--skippr-spacing)*6)}.skippr\:overflow-hidden{overflow:hidden}.skippr\:overflow-y-auto{overflow-y:auto}.skippr\:rounded-2xl{border-radius:var(--skippr-radius-2xl)}.skippr\:rounded-full{border-radius:3.40282e38px}.skippr\:rounded-lg{border-radius:var(--radius)}.skippr\:rounded-md{border-radius:calc(var(--radius) - 2px)}.skippr\:rounded-br-sm{border-bottom-right-radius:calc(var(--radius) - 4px)}.skippr\:rounded-bl-sm{border-bottom-left-radius:calc(var(--radius) - 4px)}.skippr\:border{border-style:var(--tw-border-style);border-width:1px}.skippr\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.skippr\:border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.skippr\:border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.skippr\:border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.skippr\:border-l-0{border-left-style:var(--tw-border-style);border-left-width:0}.skippr\:border-border,.skippr\:border-input{border-color:oklch(88.22% 0 0)}.skippr\:bg-background{background-color:oklch(98.21% 0 0)}.skippr\:bg-destructive{background-color:oklch(62.71% .1936 33.339)}.skippr\:bg-muted{background-color:oklch(95.21% 0 0)}.skippr\:bg-muted-foreground\/60{background-color:oklab(50.32% 0 0/.6)}.skippr\:bg-primary{background-color:oklch(43.41% .0392 41.9938)}.skippr\:bg-primary-foreground\/20{background-color:oklab(100% 0 0/.2)}.skippr\:bg-secondary{background-color:oklch(92% .0651 74.3695)}.skippr\:p-4{padding:calc(var(--skippr-spacing)*4)}.skippr\:px-2{padding-inline:calc(var(--skippr-spacing)*2)}.skippr\:px-3{padding-inline:calc(var(--skippr-spacing)*3)}.skippr\:px-4{padding-inline:calc(var(--skippr-spacing)*4)}.skippr\:px-6{padding-inline:calc(var(--skippr-spacing)*6)}.skippr\:py-1{padding-block:calc(var(--skippr-spacing)*1)}.skippr\:py-2{padding-block:calc(var(--skippr-spacing)*2)}.skippr\:py-2\.5{padding-block:calc(var(--skippr-spacing)*2.5)}.skippr\:py-3{padding-block:calc(var(--skippr-spacing)*3)}.skippr\:py-4{padding-block:calc(var(--skippr-spacing)*4)}.skippr\:text-sm{font-size:var(--skippr-text-sm);line-height:var(--tw-leading,var(--skippr-text-sm--line-height))}.skippr\:text-xs{font-size:var(--skippr-text-xs);line-height:var(--tw-leading,var(--skippr-text-xs--line-height))}.skippr\:leading-none{--tw-leading:1;line-height:1}.skippr\:leading-relaxed{--tw-leading:var(--skippr-leading-relaxed);line-height:var(--skippr-leading-relaxed)}.skippr\:font-medium{--tw-font-weight:var(--skippr-font-weight-medium);font-weight:var(--skippr-font-weight-medium)}.skippr\:font-semibold{--tw-font-weight:var(--skippr-font-weight-semibold);font-weight:var(--skippr-font-weight-semibold)}.skippr\:whitespace-normal{white-space:normal}.skippr\:whitespace-nowrap{white-space:nowrap}.skippr\:whitespace-pre-wrap{white-space:pre-wrap}.skippr\:text-destructive{color:oklch(62.71% .1936 33.339)}.skippr\:text-foreground{color:oklch(24.35% 0 0)}.skippr\:text-muted-foreground{color:oklch(50.32% 0 0)}.skippr\:text-primary{color:oklch(43.41% .0392 41.9938)}.skippr\:text-primary-foreground{color:oklch(100% 0 0)}.skippr\:text-secondary-foreground{color:oklch(34.99% .0685 40.8288)}.skippr\:text-white{color:var(--skippr-color-white)}.skippr\:tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,)var(--tw-slashed-zero,)var(--tw-numeric-figure,)var(--tw-numeric-spacing,)var(--tw-numeric-fraction,)}.skippr\:line-through{text-decoration-line:line-through}.skippr\:opacity-50{opacity:.5}.skippr\:shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\:shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\:ring-offset-background{--tw-ring-offset-color:oklch(98.21% 0 0)}.skippr\:transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\:transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\:duration-300{--tw-duration:.3s;transition-duration:.3s}.skippr\:ease-in-out{--tw-ease:var(--skippr-ease-in-out);transition-timing-function:var(--skippr-ease-in-out)}.skippr\:outline-none{--tw-outline-style:none;outline-style:none}.skippr\:\[animation-delay\:0ms\]{animation-delay:0s}.skippr\:\[animation-delay\:150ms\]{animation-delay:.15s}.skippr\:\[animation-delay\:300ms\]{animation-delay:.3s}.skippr\:placeholder\:text-muted-foreground::placeholder{color:oklch(50.32% 0 0)}@media (hover:hover){.skippr\:hover\:bg-accent:hover{background-color:oklch(93.1% 0 0)}.skippr\:hover\:bg-destructive\/90:hover{background-color:oklab(62.71% .16174 .106401/.9)}.skippr\:hover\:bg-primary-foreground\/20:hover{background-color:oklab(100% 0 0/.2)}.skippr\:hover\:bg-primary\/90:hover{background-color:oklab(43.41% .0291341 .0262268/.9)}.skippr\:hover\:bg-secondary\/80:hover{background-color:oklab(92% .0175401 .0626926/.8)}.skippr\:hover\:text-accent-foreground:hover{color:oklch(24.35% 0 0)}.skippr\:hover\:text-primary-foreground:hover{color:oklch(100% 0 0)}}.skippr\:focus\:ring-1:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\:focus\:ring-ring:focus{--tw-ring-color:oklch(43.41% .0392 41.9938)}.skippr\:focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\:focus-visible\:ring-ring:focus-visible{--tw-ring-color:oklch(43.41% .0392 41.9938)}.skippr\:focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.skippr\:focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.skippr\:disabled\:pointer-events-none:disabled{pointer-events:none}.skippr\:disabled\:opacity-50:disabled{opacity:.5}.skippr\:\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.skippr\:\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.skippr\:\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-]){width:calc(var(--skippr-spacing)*4);height:calc(var(--skippr-spacing)*4)}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}@keyframes bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--skippr-font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--skippr-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--skippr-color-red-50:oklch(97.1% .013 17.38);--skippr-color-red-600:oklch(57.7% .245 27.325);--skippr-color-red-700:oklch(50.5% .213 27.518);--skippr-color-white:#fff;--skippr-spacing:.25rem;--skippr-text-xs:.75rem;--skippr-text-xs--line-height:calc(1/.75);--skippr-text-sm:.875rem;--skippr-text-sm--line-height:calc(1.25/.875);--skippr-font-weight-medium:500;--skippr-font-weight-semibold:600;--skippr-leading-relaxed:1.625;--skippr-radius-2xl:1rem;--skippr-ease-in-out:cubic-bezier(.4,0,.2,1);--skippr-animate-spin:spin 1s linear infinite;--skippr-animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--skippr-animate-bounce:bounce 1s infinite;--skippr-default-transition-duration:.15s;--skippr-default-transition-timing-function:cubic-bezier(.4,0,.2,1);--skippr-default-font-family:var(--skippr-font-sans);--skippr-default-mono-font-family:var(--skippr-font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--skippr-default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--skippr-default-font-feature-settings,normal);font-variation-settings:var(--skippr-default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--skippr-default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--skippr-default-mono-font-feature-settings,normal);font-variation-settings:var(--skippr-default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.skippr\:fixed{position:fixed}.skippr\:top-0{top:calc(var(--skippr-spacing)*0)}.skippr\:right-0{right:calc(var(--skippr-spacing)*0)}.skippr\:bottom-6{bottom:calc(var(--skippr-spacing)*6)}.skippr\:z-\[9998\]{z-index:9998}.skippr\:z-\[9999\]{z-index:9999}.skippr\:mb-1{margin-bottom:calc(var(--skippr-spacing)*1)}.skippr\:ml-6{margin-left:calc(var(--skippr-spacing)*6)}.skippr\:flex{display:flex}.skippr\:inline-flex{display:inline-flex}.skippr\:size-1\.5{width:calc(var(--skippr-spacing)*1.5);height:calc(var(--skippr-spacing)*1.5)}.skippr\:size-2\.5{width:calc(var(--skippr-spacing)*2.5);height:calc(var(--skippr-spacing)*2.5)}.skippr\:size-3\.5{width:calc(var(--skippr-spacing)*3.5);height:calc(var(--skippr-spacing)*3.5)}.skippr\:size-4{width:calc(var(--skippr-spacing)*4);height:calc(var(--skippr-spacing)*4)}.skippr\:size-6{width:calc(var(--skippr-spacing)*6);height:calc(var(--skippr-spacing)*6)}.skippr\:size-8{width:calc(var(--skippr-spacing)*8);height:calc(var(--skippr-spacing)*8)}.skippr\:size-9{width:calc(var(--skippr-spacing)*9);height:calc(var(--skippr-spacing)*9)}.skippr\:size-10{width:calc(var(--skippr-spacing)*10);height:calc(var(--skippr-spacing)*10)}.skippr\:size-14{width:calc(var(--skippr-spacing)*14);height:calc(var(--skippr-spacing)*14)}.skippr\:h-6{height:calc(var(--skippr-spacing)*6)}.skippr\:h-8{height:calc(var(--skippr-spacing)*8)}.skippr\:h-9{height:calc(var(--skippr-spacing)*9)}.skippr\:h-10{height:calc(var(--skippr-spacing)*10)}.skippr\:h-auto{height:auto}.skippr\:h-full{height:100%}.skippr\:min-h-0{min-height:calc(var(--skippr-spacing)*0)}.skippr\:w-0{width:calc(var(--skippr-spacing)*0)}.skippr\:w-\[260px\]{width:260px}.skippr\:w-full{width:100%}.skippr\:max-w-\[85\%\]{max-width:85%}.skippr\:min-w-0{min-width:calc(var(--skippr-spacing)*0)}.skippr\:flex-1{flex:1}.skippr\:shrink-0{flex-shrink:0}.skippr\:animate-bounce{animation:var(--skippr-animate-bounce)}.skippr\:animate-pulse{animation:var(--skippr-animate-pulse)}.skippr\:animate-spin{animation:var(--skippr-animate-spin)}.skippr\:cursor-not-allowed{cursor:not-allowed}.skippr\:flex-col{flex-direction:column}.skippr\:items-center{align-items:center}.skippr\:justify-between{justify-content:space-between}.skippr\:justify-center{justify-content:center}.skippr\:justify-end{justify-content:flex-end}.skippr\:justify-start{justify-content:flex-start}.skippr\:gap-0\.5{gap:calc(var(--skippr-spacing)*.5)}.skippr\:gap-1{gap:calc(var(--skippr-spacing)*1)}.skippr\:gap-1\.5{gap:calc(var(--skippr-spacing)*1.5)}.skippr\:gap-2{gap:calc(var(--skippr-spacing)*2)}.skippr\:gap-3{gap:calc(var(--skippr-spacing)*3)}.skippr\:gap-6{gap:calc(var(--skippr-spacing)*6)}.skippr\:overflow-hidden{overflow:hidden}.skippr\:overflow-y-auto{overflow-y:auto}.skippr\:rounded-2xl{border-radius:var(--skippr-radius-2xl)}.skippr\:rounded-full{border-radius:3.40282e38px}.skippr\:rounded-lg{border-radius:var(--radius)}.skippr\:rounded-md{border-radius:calc(var(--radius) - 2px)}.skippr\:rounded-br-sm{border-bottom-right-radius:calc(var(--radius) - 4px)}.skippr\:rounded-bl-sm{border-bottom-left-radius:calc(var(--radius) - 4px)}.skippr\:border{border-style:var(--tw-border-style);border-width:1px}.skippr\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.skippr\:border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.skippr\:border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.skippr\:border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.skippr\:border-l-0{border-left-style:var(--tw-border-style);border-left-width:0}.skippr\:border-border,.skippr\:border-input{border-color:oklch(88.22% 0 0)}.skippr\:bg-background{background-color:oklch(98.21% 0 0)}.skippr\:bg-destructive{background-color:oklch(62.71% .1936 33.339)}.skippr\:bg-muted{background-color:oklch(95.21% 0 0)}.skippr\:bg-muted-foreground\/60{background-color:oklab(50.32% 0 0/.6)}.skippr\:bg-primary{background-color:oklch(43.41% .0392 41.9938)}.skippr\:bg-primary-foreground\/20{background-color:oklab(100% 0 0/.2)}.skippr\:bg-red-50{background-color:var(--skippr-color-red-50)}.skippr\:bg-secondary{background-color:oklch(92% .0651 74.3695)}.skippr\:p-4{padding:calc(var(--skippr-spacing)*4)}.skippr\:px-2{padding-inline:calc(var(--skippr-spacing)*2)}.skippr\:px-3{padding-inline:calc(var(--skippr-spacing)*3)}.skippr\:px-4{padding-inline:calc(var(--skippr-spacing)*4)}.skippr\:px-6{padding-inline:calc(var(--skippr-spacing)*6)}.skippr\:py-1{padding-block:calc(var(--skippr-spacing)*1)}.skippr\:py-1\.5{padding-block:calc(var(--skippr-spacing)*1.5)}.skippr\:py-2{padding-block:calc(var(--skippr-spacing)*2)}.skippr\:py-2\.5{padding-block:calc(var(--skippr-spacing)*2.5)}.skippr\:py-3{padding-block:calc(var(--skippr-spacing)*3)}.skippr\:py-4{padding-block:calc(var(--skippr-spacing)*4)}.skippr\:text-center{text-align:center}.skippr\:text-sm{font-size:var(--skippr-text-sm);line-height:var(--tw-leading,var(--skippr-text-sm--line-height))}.skippr\:text-xs{font-size:var(--skippr-text-xs);line-height:var(--tw-leading,var(--skippr-text-xs--line-height))}.skippr\:leading-none{--tw-leading:1;line-height:1}.skippr\:leading-relaxed{--tw-leading:var(--skippr-leading-relaxed);line-height:var(--skippr-leading-relaxed)}.skippr\:font-medium{--tw-font-weight:var(--skippr-font-weight-medium);font-weight:var(--skippr-font-weight-medium)}.skippr\:font-semibold{--tw-font-weight:var(--skippr-font-weight-semibold);font-weight:var(--skippr-font-weight-semibold)}.skippr\:whitespace-normal{white-space:normal}.skippr\:whitespace-nowrap{white-space:nowrap}.skippr\:whitespace-pre-wrap{white-space:pre-wrap}.skippr\:text-destructive{color:oklch(62.71% .1936 33.339)}.skippr\:text-foreground{color:oklch(24.35% 0 0)}.skippr\:text-muted-foreground{color:oklch(50.32% 0 0)}.skippr\:text-primary{color:oklch(43.41% .0392 41.9938)}.skippr\:text-primary-foreground{color:oklch(100% 0 0)}.skippr\:text-red-600{color:var(--skippr-color-red-600)}.skippr\:text-red-700{color:var(--skippr-color-red-700)}.skippr\:text-secondary-foreground{color:oklch(34.99% .0685 40.8288)}.skippr\:text-white{color:var(--skippr-color-white)}.skippr\:tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,)var(--tw-slashed-zero,)var(--tw-numeric-figure,)var(--tw-numeric-spacing,)var(--tw-numeric-fraction,)}.skippr\:line-through{text-decoration-line:line-through}.skippr\:opacity-50{opacity:.5}.skippr\:shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\:shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\:ring-offset-background{--tw-ring-offset-color:oklch(98.21% 0 0)}.skippr\:transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\:transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\:duration-300{--tw-duration:.3s;transition-duration:.3s}.skippr\:ease-in-out{--tw-ease:var(--skippr-ease-in-out);transition-timing-function:var(--skippr-ease-in-out)}.skippr\:outline-none{--tw-outline-style:none;outline-style:none}.skippr\:\[animation-delay\:0ms\]{animation-delay:0s}.skippr\:\[animation-delay\:150ms\]{animation-delay:.15s}.skippr\:\[animation-delay\:300ms\]{animation-delay:.3s}.skippr\:placeholder\:text-muted-foreground::placeholder{color:oklch(50.32% 0 0)}@media (hover:hover){.skippr\:hover\:bg-accent:hover{background-color:oklch(93.1% 0 0)}.skippr\:hover\:bg-destructive\/90:hover{background-color:oklab(62.71% .16174 .106401/.9)}.skippr\:hover\:bg-primary-foreground\/20:hover{background-color:oklab(100% 0 0/.2)}.skippr\:hover\:bg-primary\/90:hover{background-color:oklab(43.41% .0291341 .0262268/.9)}.skippr\:hover\:bg-secondary\/80:hover{background-color:oklab(92% .0175401 .0626926/.8)}.skippr\:hover\:text-accent-foreground:hover{color:oklch(24.35% 0 0)}.skippr\:hover\:text-primary-foreground:hover{color:oklch(100% 0 0)}}.skippr\:focus\:ring-1:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\:focus\:ring-ring:focus{--tw-ring-color:oklch(43.41% .0392 41.9938)}.skippr\:focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\:focus-visible\:ring-ring:focus-visible{--tw-ring-color:oklch(43.41% .0392 41.9938)}.skippr\:focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.skippr\:focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.skippr\:disabled\:pointer-events-none:disabled{pointer-events:none}.skippr\:disabled\:opacity-50:disabled{opacity:.5}.skippr\:\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.skippr\:\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.skippr\:\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-]){width:calc(var(--skippr-spacing)*4);height:calc(var(--skippr-spacing)*4)}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}