@convokit/widget 0.0.5 → 0.0.7

package/README.md

@@ -1,43 +1,23 @@
 # @convokit/widget
 
-Chat UI widgets for your website. The public API is intentionally small — **four drop‑in components**:
+> **ConvoKit is currently in early access.** The waitlist is live — [join at convokit.dev](https://convokit.dev) to get early access.
 
-| Component | Layout | Integration | You provide |
-|-----------|--------|--------------|-------------|
-| **PopupWidget** | Bubble (corner) | ConvoKit | `apiKey` (public ConvoKit key) |
-| **FullScreenWidget** | Full page | ConvoKit | `apiKey`, optional `onBack` |
-| **PopupBackendWidget** | Bubble | Your backend | `apiUrl`, `apiKey`, optional `authToken` |
-| **FullScreenBackendWidget** | Full page | Your backend | `apiUrl`, `apiKey`, optional `authToken`, `onBack` |
+Add an AI-powered chat widget to any React or Next.js app in minutes. ConvoKit handles the AI, knowledge base, and conversations — you just drop in a component.
 
-All lower‑level/internal components (`PopupKey`, `FullScreenKey`, `PopupBackend`, `PopupControlled`, etc.) are **not exported** from the package anymore. The four widgets above are what you use in apps.
+**Website:** [convokit.dev](https://convokit.dev)
 
 ---
 
-## What to call and how
+## Four drop-in components
 
-Use **one import** and **one component** per screen. All of these are from `@convokit/widget`. No separate CSS import needed (styles are in the bundle).
+| Component | Layout | You provide |
+|-----------|--------|-------------|
+| **PopupWidget** | Bubble in corner | `apiKey` (your ConvoKit public key) |
+| **FullScreenWidget** | Full page | `apiKey`, optional `onBack` |
+| **PopupBackendWidget** | Bubble in corner | `apiUrl`, `apiKey` |
+| **FullScreenBackendWidget** | Full page | `apiUrl`, `apiKey`, optional `onBack` |
 
-| What to call | How (minimal) |
-|--------------|----------------|
-| **PopupWidget** | `<PopupWidget apiKey={key} />` — popup bubble, ConvoKit key. |
-| **FullScreenWidget** | `<FullScreenWidget apiKey={key} onBack={() => router.back()} />` — full-page chat, ConvoKit key. |
-| **PopupBackendWidget** | `<PopupBackendWidget apiUrl="/api/chat" apiKey={myKey} />` — popup, your backend. |
-| **FullScreenBackendWidget** | `<FullScreenBackendWidget apiUrl="/api/chat" apiKey={myKey} onBack={() => router.back()} />` — full-page, your backend. |
-
-**Optional props (all wrappers):** `title`, `welcomeMessage`, `widgetId`, `primaryColor`. Popup ones also accept `position`. Backend ones accept `authToken`. Full-screen ones accept `backLabel`. PopupWidget / FullScreenWidget also accept `persistMessages`.
-
-**If you need full control** (your own state/API), use the low-level components with a config object:
-
-| What to call | How |
-|--------------|-----|
-| **PopupKey** | `<PopupKey config={keyConfig} />` — config: `KeyConfig` (e.g. `{ key, title, position }`). |
-| **FullScreenKey** | `<FullScreenKey config={keyConfig} onBack={fn} backLabel="Back" />` |
-| **PopupBackend** | `<PopupBackend config={backendConfig} />` — config: `BackendConfig` (e.g. `{ apiUrl, apiKey }`). |
-| **FullScreenBackend** | `<FullScreenBackend config={backendConfig} onBack={fn} backLabel="Back" />` |
-| **PopupControlled** | `<PopupControlled config={controlledConfig} />` — you pass `messages`, `onMessagesUpdate`, `onSend`. |
-| **FullScreenControlled** | `<FullScreenControlled config={controlledConfig} onBack={fn} backLabel="Back" />` |
-
-**Types you can import:** `KeyConfig`, `BackendConfig`, `ControlledConfig`, `PopupWidgetProps`, `FullScreenWidgetProps`, `PopupBackendWidgetProps`, `FullScreenBackendWidgetProps`, `ChatMessage`, `ChatHistoryItem`, `ChatResponse`, `ThemeOptions`.
+No separate CSS import needed — styles are bundled.
 
 ---
 
@@ -53,66 +33,51 @@ pnpm add @convokit/widget
 
 ---
 
-## Quick start (React / Vite)
+## Quick start
 
-Add the chat bubble with one import. Styles are included in the bundle.
+### React / Vite
 
 ```tsx
-// Any React entry (e.g. App.tsx)
 import { PopupWidget } from '@convokit/widget';
 
 export function App() {
   return (
     <div>
-      {/* Your app UI */}
+      {/* your app */}
       <PopupWidget apiKey={import.meta.env.VITE_CONVOKIT_KEY ?? ''} />
     </div>
   );
 }
 ```
 
-- **React (CRA / Vite / plain SPA)**: just import and render the widget anywhere in your tree.
-- Optional props (all wrappers): `title`, `welcomeMessage`, `widgetId`, `primaryColor`.
-- Popup widgets also accept `position`, `persistMessages`. Backend widgets accept `authToken`. Full‑screen widgets accept `onBack` and `backLabel`.
-
-If the required props are missing (`apiKey` for key‑based widgets, or `apiUrl`/`apiKey` for backend widgets), the widget renders nothing.
+### Next.js App Router (recommended)
 
-### Next.js only: one import, no wrapper (recommended)
-
-If you use **Next.js App Router**, use the Next-specific entry so you don’t write `dynamic()` or a wrapper yourself:
+Use the built-in Next.js entry — no need to write `dynamic()` yourself:
 
 ```tsx
-// app/layout.tsx (or any page)
+// app/layout.tsx
 import { PopupWidgetNext } from '@convokit/widget/next';
 
 export default function Layout({ children }) {
   return (
     <html><body>
       {children}
-      <PopupWidgetNext />
+      <PopupWidgetNext apiKey={process.env.NEXT_PUBLIC_CONVOKIT_KEY ?? ''} />
     </body></html>
   );
 }
 ```
 
-- **`PopupWidgetNext`** uses `next/dynamic` with `ssr: false` and reads `process.env.NEXT_PUBLIC_CONVOKIT_KEY` if you don’t pass `apiKey`.
-- Optional: pass `apiKey`, `title`, `welcomeMessage`, `position`, etc. as props.
-- You still need **transpilePackages** (and optionally resolve alias for react) in `next.config.js` if you see duplicate-React errors; see “Next.js App Router (avoid duplicate React)” below.
-
-### Next.js App Router (avoid duplicate React)
-
-The widget is client-only (hooks, DOM). In Next.js you must use **one React instance** in the browser. If the widget resolves to a different copy of React than your app, you get errors like `Cannot read properties of undefined (reading 'ReactCurrentDispatcher')`.
+`PopupWidgetNext` uses `next/dynamic` with `ssr: false` automatically and reads `NEXT_PUBLIC_CONVOKIT_KEY` if you don't pass `apiKey`.
 
-**Fix 1 — Load the widget only on the client (recommended):** use `next/dynamic` with `ssr: false` so the widget never runs on the server and always uses the client React.
+### Next.js App Router (manual dynamic import)
 
 ```tsx
-// app/layout.tsx or a client component
 'use client';
-
 import dynamic from 'next/dynamic';
 
 const PopupWidget = dynamic(
-  () => import('@convokit/widget').then((mod) => mod.PopupWidget),
+  () => import('@convokit/widget').then((m) => m.PopupWidget),
   { ssr: false }
 );
 
@@ -126,150 +91,101 @@ export default function Layout({ children }) {
 }
 ```
 
-**Fix 2 — Use the app’s React for the widget:** in `next.config.js`, add `transpilePackages` and (if needed with pnpm) resolve `react` / `react-dom` to a single copy so the widget is bundled with your app’s React.
+---
 
-```js
-// next.config.js
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  transpilePackages: ['@convokit/widget'],
-  webpack: (config) => {
-    config.resolve.alias = {
-      ...config.resolve.alias,
-      react: require.resolve('react'),
-      'react-dom': require.resolve('react-dom'),
-    };
-    return config;
-  },
-};
-module.exports = nextConfig;
-```
+## All four components
 
-Use **Fix 1** for a quick fix; use **Fix 1 + Fix 2** if you still see duplicate-React issues (e.g. with pnpm).
+```tsx
+// Popup bubble – ConvoKit key
+<PopupWidget apiKey="pk_live_..." />
 
-### Other drop-in wrappers (all four)
+// Full-page chat – ConvoKit key
+<FullScreenWidget apiKey="pk_live_..." onBack={() => router.back()} />
 
-| Wrapper | Use case | Required props |
-|---------|----------|-----------------|
-| **PopupWidget** | Popup with ConvoKit key | `apiKey` |
-| **FullScreenWidget** | Full-page chat with ConvoKit key | `apiKey`, `onBack` (e.g. `() => router.back()`) |
-| **PopupBackendWidget** | Popup talking to your backend | `apiUrl`, `apiKey` |
-| **FullScreenBackendWidget** | Full-page chat talking to your backend | `apiUrl`, `apiKey`, `onBack` |
+// Popup bubble – your own backend
+<PopupBackendWidget apiUrl="/api/chat" apiKey="your-key" />
 
-#### React / Vite examples
+// Full-page chat – your own backend
+<FullScreenBackendWidget apiUrl="/api/chat" apiKey="your-key" onBack={() => router.back()} />
+```
 
-```tsx
-// Full-screen (Key mode)
-import { FullScreenWidget } from '@convokit/widget';
+---
 
-export function ChatPage() {
-  const apiKey = import.meta.env.VITE_CONVOKIT_KEY ?? '';
-  return (
-    <FullScreenWidget
-      apiKey={apiKey}
-      onBack={() => {
-        // e.g. navigate(-1) with react-router
-      }}
-    />
-  );
-}
+## Props
 
-// Popup (your backend)
-import { PopupBackendWidget } from '@convokit/widget';
+**All components accept:**
 
-export function App() {
-  return (
-    <>
-      {/* your UI */}
-      <PopupBackendWidget apiUrl="/api/chat" apiKey={import.meta.env.VITE_BACKEND_KEY ?? ''} />
-    </>
-  );
-}
+| Prop | Type | Description |
+|------|------|-------------|
+| `title` | `string` | Widget header title |
+| `welcomeMessage` | `string` | First message shown to the user |
+| `widgetId` | `string` | Identifier for the bot / channel |
+| `primaryColor` | `string` | Accent color (hex or CSS color) |
 
-// Full-screen (your backend)
-import { FullScreenBackendWidget } from '@convokit/widget';
+**Popup components also accept:**
 
-export function Support() {
-  return (
-    <FullScreenBackendWidget
-      apiUrl="/api/chat"
-      apiKey={import.meta.env.VITE_BACKEND_KEY ?? ''}
-      onBack={() => {
-        // go back / close
-      }}
-    />
-  );
-}
-```
+| Prop | Type | Description |
+|------|------|-------------|
+| `position` | `'bottom-right' \| 'bottom-left'` | Bubble position |
+| `persistMessages` | `boolean` | Keep messages across page loads |
 
-#### Next.js (App Router) examples
+**Backend components also accept:**
 
-```tsx
-'use client';
+| Prop | Type | Description |
+|------|------|-------------|
+| `authToken` | `string` | Bearer token forwarded to your backend |
 
-import dynamic from 'next/dynamic';
+**Full-screen components also accept:**
 
-// Popup with ConvoKit key
-const PopupWidget = dynamic(
-  () => import('@convokit/widget').then((m) => m.PopupWidget),
-  { ssr: false }
-);
+| Prop | Type | Description |
+|------|------|-------------|
+| `onBack` | `() => void` | Called when user taps the back button |
+| `backLabel` | `string` | Label for the back button |
 
-// Full-screen (Key mode)
-const FullScreenWidget = dynamic(
-  () => import('@convokit/widget').then((m) => m.FullScreenWidget),
-  { ssr: false }
-);
+---
 
-export default function Layout({ children }: { children: React.ReactNode }) {
-  const apiKey = process.env.NEXT_PUBLIC_CONVOKIT_KEY ?? '';
-  return (
-    <html>
-      <body>
-        {children}
-        <PopupWidget apiKey={apiKey} />
-      </body>
-    </html>
-  );
-}
+## Advanced: low-level components
 
-// Full-screen page (Key mode)
-export function FullScreenChatPage() {
-  const apiKey = process.env.NEXT_PUBLIC_CONVOKIT_KEY ?? '';
-  const router = useRouter();
-  return (
-    <FullScreenWidget apiKey={apiKey} onBack={() => router.back()} />
-  );
-}
-```
+If you need full control over state or API calls, use the low-level components directly:
 
----
+| Component | Config type |
+|-----------|-------------|
+| `PopupKey` / `FullScreenKey` | `KeyConfig` |
+| `PopupBackend` / `FullScreenBackend` | `BackendConfig` |
+| `PopupControlled` / `FullScreenControlled` | `ControlledConfig` (you pass `messages`, `onMessagesUpdate`, `onSend`) |
+
+**Types you can import:** `KeyConfig`, `BackendConfig`, `ControlledConfig`, `PopupWidgetProps`, `FullScreenWidgetProps`, `PopupBackendWidgetProps`, `FullScreenBackendWidgetProps`, `ChatMessage`, `ChatHistoryItem`, `ChatResponse`, `ThemeOptions`.
 
 ---
 
-## Advanced configuration
+## Fixing duplicate React errors in Next.js
 
-Internally, the widgets are built on config types (**KeyConfig**, **BackendConfig**, **ControlledConfig**, **ThemeOptions**). If you need to dive deeper into those (for example, to match server behavior or migrate from the old low‑level API), see `WIDGET_CONFIG_REFERENCE.md` in this repo.
+If you see `Cannot read properties of undefined (reading 'ReactCurrentDispatcher')`, add this to `next.config.js`:
 
----
+```js
+const nextConfig = {
+  transpilePackages: ['@convokit/widget'],
+  webpack: (config) => {
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      react: require.resolve('react'),
+      'react-dom': require.resolve('react-dom'),
+    };
+    return config;
+  },
+};
+module.exports = nextConfig;
+```
 
-## Development
+---
 
-Run the demo:
+## Early access
 
-```bash
-npm run dev
-# or
-pnpm dev
-```
+ConvoKit is in early access. Get your API key and set up your knowledge base at **[convokit.dev](https://convokit.dev)**.
 
-Build the package:
+The waitlist is live — join now to get early access.
 
-```bash
-npm run build
-# or
-pnpm build
-```
+---
 
 ## License
 

package/dist/{PopupWidget-CGZOe6ZA.js → PopupWidget-CAnOwL1f.js}

@@ -31,7 +31,7 @@ function vi(t) {
   let e;
   return () => (e === void 0 && (e = t()), e);
 }
-const ut = /* @__NO_SIDE_EFFECTS__ */ (t) => t, $a = (t, e) => (n) => e(t(n)), Ce = (...t) => t.reduce($a), xe = /* @__NO_SIDE_EFFECTS__ */ (t, e, n) => {
+const ut = /* @__NO_SIDE_EFFECTS__ */ (t) => t, $a = (t, e) => (n) => e(t(n)), Ce = (...t) => t.reduce($a), be = /* @__NO_SIDE_EFFECTS__ */ (t, e, n) => {
   const i = e - t;
   return i === 0 ? 1 : (n - t) / i;
 };
@@ -183,7 +183,7 @@ function ur(t, e) {
       o[Ue[E]].cancel(S);
   }, state: s, steps: o };
 }
-const { schedule: I, cancel: It, state: q, steps: bn } = /* @__PURE__ */ ur(typeof requestAnimationFrame < "u" ? requestAnimationFrame : ut, !0);
+const { schedule: I, cancel: It, state: q, steps: xn } = /* @__PURE__ */ ur(typeof requestAnimationFrame < "u" ? requestAnimationFrame : ut, !0);
 let Ge;
 function il() {
   Ge = void 0;
@@ -193,7 +193,7 @@ const nt = {
   set: (t) => {
     Ge = t, queueMicrotask(il);
   }
-}, fr = (t) => (e) => typeof e == "string" && e.startsWith(t), hr = /* @__PURE__ */ fr("--"), sl = /* @__PURE__ */ fr("var(--"), bi = (t) => sl(t) ? ol.test(t.split("/*")[0].trim()) : !1, ol = /var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu;
+}, fr = (t) => (e) => typeof e == "string" && e.startsWith(t), hr = /* @__PURE__ */ fr("--"), sl = /* @__PURE__ */ fr("var(--"), xi = (t) => sl(t) ? ol.test(t.split("/*")[0].trim()) : !1, ol = /var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu;
 function Ts(t) {
   return typeof t != "string" ? !1 : t.split("/*")[0].includes("var(--");
 }
@@ -207,27 +207,27 @@ const ae = {
 }, je = {
   ...ae,
   default: 1
-}, we = (t) => Math.round(t * 1e5) / 1e5, xi = /-?(?:\d+(?:\.\d+)?|\.\d+)/gu;
+}, we = (t) => Math.round(t * 1e5) / 1e5, bi = /-?(?:\d+(?:\.\d+)?|\.\d+)/gu;
 function rl(t) {
   return t == null;
 }
 const al = /^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))$/iu, Ei = (t, e) => (n) => !!(typeof n == "string" && al.test(n) && n.startsWith(t) || e && !rl(n) && Object.prototype.hasOwnProperty.call(n, e)), dr = (t, e, n) => (i) => {
   if (typeof i != "string")
     return i;
-  const [s, r, o, a] = i.match(xi);
+  const [s, r, o, a] = i.match(bi);
   return {
     [t]: parseFloat(s),
     [e]: parseFloat(r),
     [n]: parseFloat(o),
     alpha: a !== void 0 ? parseFloat(a) : 1
   };
-}, ll = (t) => wt(0, 255, t), xn = {
+}, ll = (t) => wt(0, 255, t), bn = {
   ...ae,
   transform: (t) => Math.round(ll(t))
 }, jt = {
   test: /* @__PURE__ */ Ei("rgb", "red"),
   parse: /* @__PURE__ */ dr("red", "green", "blue"),
-  transform: ({ red: t, green: e, blue: n, alpha: i = 1 }) => "rgba(" + xn.transform(t) + ", " + xn.transform(e) + ", " + xn.transform(n) + ", " + we(Ee.transform(i)) + ")"
+  transform: ({ red: t, green: e, blue: n, alpha: i = 1 }) => "rgba(" + bn.transform(t) + ", " + bn.transform(e) + ", " + bn.transform(n) + ", " + we(Ee.transform(i)) + ")"
 };
 function cl(t) {
   let e = "", n = "", i = "", s = "";
@@ -246,7 +246,7 @@ const Gn = {
   test: (e) => typeof e == "string" && e.endsWith(t) && e.split(" ").length === 1,
   parse: parseFloat,
   transform: (e) => `${e}${t}`
-}), Lt = /* @__PURE__ */ Le("deg"), St = /* @__PURE__ */ Le("%"), b = /* @__PURE__ */ Le("px"), ul = /* @__PURE__ */ Le("vh"), fl = /* @__PURE__ */ Le("vw"), vs = {
+}), Lt = /* @__PURE__ */ Le("deg"), St = /* @__PURE__ */ Le("%"), x = /* @__PURE__ */ Le("px"), ul = /* @__PURE__ */ Le("vh"), fl = /* @__PURE__ */ Le("vw"), vs = {
   ...St,
   parse: (t) => St.parse(t) / 100,
   transform: (t) => St.transform(t * 100)
@@ -265,7 +265,7 @@ const Gn = {
 }, hl = /(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu;
 function dl(t) {
   var e, n;
-  return isNaN(t) && typeof t == "string" && (((e = t.match(xi)) == null ? void 0 : e.length) || 0) + (((n = t.match(hl)) == null ? void 0 : n.length) || 0) > 0;
+  return isNaN(t) && typeof t == "string" && (((e = t.match(bi)) == null ? void 0 : e.length) || 0) + (((n = t.match(hl)) == null ? void 0 : n.length) || 0) > 0;
 }
 const mr = "number", pr = "color", ml = "var", pl = "var(", Ss = "${}", gl = /var\s*\(\s*--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)|#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\)|-?(?:\d+(?:\.\d+)?|\.\d+)/giu;
 function Pe(t) {
@@ -347,11 +347,11 @@ const As = (t, e) => {
 function Al(t, e) {
   return $n.has(t) ? (n) => n <= 0 ? t : e : (n) => n >= 1 ? e : t;
 }
-function bl(t, e) {
+function xl(t, e) {
   return (n) => N(t, e, n);
 }
 function Pi(t) {
-  return typeof t == "number" ? bl : typeof t == "string" ? bi(t) ? Ze : W.test(t) ? As : Pl : Array.isArray(t) ? Tr : typeof t == "object" ? W.test(t) ? As : xl : Ze;
+  return typeof t == "number" ? xl : typeof t == "string" ? xi(t) ? Ze : W.test(t) ? As : Pl : Array.isArray(t) ? Tr : typeof t == "object" ? W.test(t) ? As : bl : Ze;
 }
 function Tr(t, e) {
   const n = [...t], i = n.length, s = t.map((r, o) => Pi(r)(r, e[o]));
@@ -361,7 +361,7 @@ function Tr(t, e) {
     return n;
   };
 }
-function xl(t, e) {
+function bl(t, e) {
   const n = { ...t, ...e }, i = {};
   for (const s in n)
     t[s] !== void 0 && e[s] !== void 0 && (i[s] = Pi(t[s])(t[s], e[s]));
@@ -498,7 +498,7 @@ function Yn(t, e) {
   return t * Math.sqrt(1 - e * e);
 }
 const Il = ["duration", "bounce"], Vl = ["stiffness", "damping", "mass"];
-function bs(t, e) {
+function xs(t, e) {
   return e.some((n) => t[n] !== void 0);
 }
 function kl(t) {
@@ -510,7 +510,7 @@ function kl(t) {
     isResolvedFromDuration: !1,
     ...t
   };
-  if (!bs(t, Vl) && bs(t, Il))
+  if (!xs(t, Vl) && xs(t, Il))
     if (t.visualDuration) {
       const n = t.visualDuration, i = 2 * Math.PI / (n * 1.2), s = i * i, r = 2 * wt(0.05, 1, 1 - (t.bounce || 0)) * Math.sqrt(s);
       e = {
@@ -643,7 +643,7 @@ function Nl(t, e, { clamp: n = !0, ease: i, mixer: s } = {}) {
     if (l > 1)
       for (; f < t.length - 2 && !(c < t[f + 1]); f++)
         ;
-    const d = /* @__PURE__ */ xe(t[f], t[f + 1], c);
+    const d = /* @__PURE__ */ be(t[f], t[f + 1], c);
     return a[f](d);
   };
   return n ? (c) => u(wt(t[0], t[r - 1], c)) : u;
@@ -651,7 +651,7 @@ function Nl(t, e, { clamp: n = !0, ease: i, mixer: s } = {}) {
 function Fl(t, e) {
   const n = t[t.length - 1];
   for (let i = 1; i <= e; i++) {
-    const s = /* @__PURE__ */ xe(0, e, i);
+    const s = /* @__PURE__ */ be(0, e, i);
     t.push(N(n, 1, s));
   }
 }
@@ -858,7 +858,7 @@ const Wt = (t) => t * 180 / Math.PI, qn = (t) => {
   skewX: (t) => Wt(Math.atan(t[1])),
   skewY: (t) => Wt(Math.atan(t[2])),
   skew: (t) => (Math.abs(t[1]) + Math.abs(t[2])) / 2
-}, Zn = (t) => (t = t % 360, t < 0 && (t += 360), t), xs = qn, Es = (t) => Math.sqrt(t[0] * t[0] + t[1] * t[1]), Ps = (t) => Math.sqrt(t[4] * t[4] + t[5] * t[5]), $l = {
+}, Zn = (t) => (t = t % 360, t < 0 && (t += 360), t), bs = qn, Es = (t) => Math.sqrt(t[0] * t[0] + t[1] * t[1]), Ps = (t) => Math.sqrt(t[4] * t[4] + t[5] * t[5]), $l = {
   x: 12,
   y: 13,
   z: 14,
@@ -870,8 +870,8 @@ const Wt = (t) => t * 180 / Math.PI, qn = (t) => {
   scale: (t) => (Es(t) + Ps(t)) / 2,
   rotateX: (t) => Zn(Wt(Math.atan2(t[6], t[5]))),
   rotateY: (t) => Zn(Wt(Math.atan2(-t[2], t[0]))),
-  rotateZ: xs,
-  rotate: xs,
+  rotateZ: bs,
+  rotate: bs,
   skewX: (t) => Wt(Math.atan(t[4])),
   skewY: (t) => Wt(Math.atan(t[1])),
   skew: (t) => (Math.abs(t[1]) + Math.abs(t[4])) / 2
@@ -920,7 +920,7 @@ const le = [
   "skew",
   "skewX",
   "skewY"
-], ce = new Set(le), Ds = (t) => t === ae || t === b, ql = /* @__PURE__ */ new Set(["x", "y", "z"]), Zl = le.filter((t) => !ql.has(t));
+], ce = new Set(le), Ds = (t) => t === ae || t === x, ql = /* @__PURE__ */ new Set(["x", "y", "z"]), Zl = le.filter((t) => !ql.has(t));
 function Jl(t) {
   const e = [];
   return Zl.forEach((n) => {
@@ -944,7 +944,7 @@ _t.translateX = _t.x;
 _t.translateY = _t.y;
 const Kt = /* @__PURE__ */ new Set();
 let ti = !1, ei = !1, ni = !1;
-function br() {
+function xr() {
   if (ei) {
     const t = Array.from(Kt).filter((i) => i.needsMeasurement), e = new Set(t.map((i) => i.element)), n = /* @__PURE__ */ new Map();
     e.forEach((i) => {
@@ -963,20 +963,20 @@ function br() {
   }
   ei = !1, ti = !1, Kt.forEach((t) => t.complete(ni)), Kt.clear();
 }
-function xr() {
+function br() {
   Kt.forEach((t) => {
     t.readKeyframes(), t.needsMeasurement && (ei = !0);
   });
 }
 function Ql() {
-  ni = !0, xr(), br(), ni = !1;
+  ni = !0, br(), xr(), ni = !1;
 }
 class Li {
   constructor(e, n, i, s, r, o = !1) {
     this.state = "pending", this.isAsync = !1, this.needsMeasurement = !1, this.unresolvedKeyframes = [...e], this.onComplete = n, this.name = i, this.motionValue = s, this.element = r, this.isAsync = o;
   }
   scheduleResolve() {
-    this.state = "scheduled", this.isAsync ? (Kt.add(this), ti || (ti = !0, I.read(xr), I.resolveKeyframes(br))) : (this.readKeyframes(), this.complete());
+    this.state = "scheduled", this.isAsync ? (Kt.add(this), ti || (ti = !0, I.read(br), I.resolveKeyframes(xr))) : (this.readKeyframes(), this.complete());
   }
   readKeyframes() {
     const { unresolvedKeyframes: e, name: n, element: i, motionValue: s } = this;
@@ -1360,7 +1360,7 @@ function Rr(t, e, n = 1) {
     const o = r.trim();
     return Go(o) ? parseFloat(o) : o;
   }
-  return bi(s) ? Rr(s, e, n + 1) : s;
+  return xi(s) ? Rr(s, e, n + 1) : s;
 }
 const wc = {
   type: "spring",
@@ -1372,14 +1372,14 @@ const wc = {
   stiffness: 550,
   damping: t === 0 ? 2 * Math.sqrt(550) : 30,
   restSpeed: 10
-}), bc = {
+}), xc = {
   type: "keyframes",
   duration: 0.8
-}, xc = {
+}, bc = {
   type: "keyframes",
   ease: [0.25, 0.1, 0.35, 1],
   duration: 0.3
-}, Ec = (t, { keyframes: e }) => e.length > 2 ? bc : ce.has(t) ? t.startsWith("scale") ? Ac(e[1]) : wc : xc, Pc = (t) => t !== null;
+}, Ec = (t, { keyframes: e }) => e.length > 2 ? xc : ce.has(t) ? t.startsWith("scale") ? Ac(e[1]) : wc : bc, Pc = (t) => t !== null;
 function Dc(t, { repeat: e, repeatType: n = "loop" }, i) {
   const s = t.filter(Pc), r = e && n !== "loop" && e % 2 === 1 ? 0 : s.length - 1;
   return s[r];
@@ -1773,7 +1773,7 @@ function Fc(t, e, n = {}) {
 const Bc = {
   test: (t) => t === "auto",
   parse: (t) => t
-}, kr = (t) => (e) => e.test(t), Or = [ae, b, St, Lt, fl, ul, Bc], _s = (t) => Or.find(kr(t));
+}, kr = (t) => (e) => e.test(t), Or = [ae, x, St, Lt, fl, ul, Bc], _s = (t) => Or.find(kr(t));
 function Uc(t) {
   return typeof t == "number" ? t === 0 : t !== null ? t === "none" || t === "0" || Yo(t) : !0;
 }
@@ -1782,7 +1782,7 @@ function Wc(t) {
   const [e, n] = t.slice(0, -1).split("(");
   if (e === "drop-shadow")
     return t;
-  const [i] = n.match(xi) || [];
+  const [i] = n.match(bi) || [];
   if (!i)
     return t;
   const s = n.replace(i, "");
@@ -1810,74 +1810,74 @@ const Hc = /\b([a-z-]*)\(.*?\)/gu, ai = {
   skew: Lt,
   skewX: Lt,
   skewY: Lt,
-  distance: b,
-  translateX: b,
-  translateY: b,
-  translateZ: b,
-  x: b,
-  y: b,
-  z: b,
-  perspective: b,
-  transformPerspective: b,
+  distance: x,
+  translateX: x,
+  translateY: x,
+  translateZ: x,
+  x,
+  y: x,
+  z: x,
+  perspective: x,
+  transformPerspective: x,
   opacity: Ee,
   originX: vs,
   originY: vs,
-  originZ: b
+  originZ: x
 }, Oi = {
   // Border props
-  borderWidth: b,
-  borderTopWidth: b,
-  borderRightWidth: b,
-  borderBottomWidth: b,
-  borderLeftWidth: b,
-  borderRadius: b,
-  radius: b,
-  borderTopLeftRadius: b,
-  borderTopRightRadius: b,
-  borderBottomRightRadius: b,
-  borderBottomLeftRadius: b,
+  borderWidth: x,
+  borderTopWidth: x,
+  borderRightWidth: x,
+  borderBottomWidth: x,
+  borderLeftWidth: x,
+  borderRadius: x,
+  radius: x,
+  borderTopLeftRadius: x,
+  borderTopRightRadius: x,
+  borderBottomRightRadius: x,
+  borderBottomLeftRadius: x,
   // Positioning props
-  width: b,
-  maxWidth: b,
-  height: b,
-  maxHeight: b,
-  top: b,
-  right: b,
-  bottom: b,
-  left: b,
-  inset: b,
-  insetBlock: b,
-  insetBlockStart: b,
-  insetBlockEnd: b,
-  insetInline: b,
-  insetInlineStart: b,
-  insetInlineEnd: b,
+  width: x,
+  maxWidth: x,
+  height: x,
+  maxHeight: x,
+  top: x,
+  right: x,
+  bottom: x,
+  left: x,
+  inset: x,
+  insetBlock: x,
+  insetBlockStart: x,
+  insetBlockEnd: x,
+  insetInline: x,
+  insetInlineStart: x,
+  insetInlineEnd: x,
   // Spacing props
-  padding: b,
-  paddingTop: b,
-  paddingRight: b,
-  paddingBottom: b,
-  paddingLeft: b,
-  paddingBlock: b,
-  paddingBlockStart: b,
-  paddingBlockEnd: b,
-  paddingInline: b,
-  paddingInlineStart: b,
-  paddingInlineEnd: b,
-  margin: b,
-  marginTop: b,
-  marginRight: b,
-  marginBottom: b,
-  marginLeft: b,
-  marginBlock: b,
-  marginBlockStart: b,
-  marginBlockEnd: b,
-  marginInline: b,
-  marginInlineStart: b,
-  marginInlineEnd: b,
+  padding: x,
+  paddingTop: x,
+  paddingRight: x,
+  paddingBottom: x,
+  paddingLeft: x,
+  paddingBlock: x,
+  paddingBlockStart: x,
+  paddingBlockEnd: x,
+  paddingInline: x,
+  paddingInlineStart: x,
+  paddingInlineEnd: x,
+  margin: x,
+  marginTop: x,
+  marginRight: x,
+  marginBottom: x,
+  marginLeft: x,
+  marginBlock: x,
+  marginBlockStart: x,
+  marginBlockEnd: x,
+  marginInline: x,
+  marginInlineStart: x,
+  marginInlineEnd: x,
   // Misc
-  backgroundPositionX: b,
-  backgroundPositionY: b,
+  backgroundPositionX: x,
+  backgroundPositionY: x,
   ...Kc,
   zIndex: Is,
   // SVG
@@ -1927,7 +1927,7 @@ class Yc extends Li {
     super.readKeyframes();
     for (let c = 0; c < e.length; c++) {
       let f = e[c];
-      if (typeof f == "string" && (f = f.trim(), bi(f))) {
+      if (typeof f == "string" && (f = f.trim(), xi(f))) {
         const d = Rr(f, n.current);
         d !== void 0 && (e[c] = d), c === e.length - 1 && (this.finalKeyframe = f);
       }
@@ -2548,7 +2548,7 @@ const de = {
     if (!e.target)
       return t;
     if (typeof t == "string")
-      if (b.test(t))
+      if (x.test(t))
         t = parseFloat(t);
       else
         return t;
@@ -2626,14 +2626,14 @@ const wu = {
   offset: "strokeDashoffset",
   array: "strokeDasharray"
 };
-function bu(t, e, n = 1, i = 0, s = !0) {
+function xu(t, e, n = 1, i = 0, s = !0) {
   t.pathLength = 1;
   const r = s ? wu : Au;
-  t[r.offset] = b.transform(-i);
-  const o = b.transform(e), a = b.transform(n);
+  t[r.offset] = x.transform(-i);
+  const o = x.transform(e), a = x.transform(n);
   t[r.array] = `${o} ${a}`;
 }
-const xu = [
+const bu = [
   "offsetDistance",
   "offsetPath",
   "offsetRotate",
@@ -2656,9 +2656,9 @@ function ea(t, {
   t.attrs = t.style, t.style = {};
   const { attrs: f, style: d } = t;
   f.transform && (d.transform = f.transform, delete f.transform), (d.transform || f.transformOrigin) && (d.transformOrigin = f.transformOrigin ?? "50% 50%", delete f.transformOrigin), d.transform && (d.transformBox = (c == null ? void 0 : c.transformBox) ?? "fill-box", delete f.transformBox);
-  for (const p of xu)
+  for (const p of bu)
     f[p] !== void 0 && (d[p] = f[p], delete f[p]);
-  e !== void 0 && (f.x = e), n !== void 0 && (f.y = n), i !== void 0 && (f.scale = i), s !== void 0 && bu(f, s, r, o, !1);
+  e !== void 0 && (f.x = e), n !== void 0 && (f.y = n), i !== void 0 && (f.scale = i), s !== void 0 && xu(f, s, r, o, !1);
 }
 const na = /* @__PURE__ */ new Set([
   "baseFrequency",
@@ -2798,21 +2798,21 @@ function Lu(t) {
         G && (G.liveStyle = !1);
       };
       for (const F in ht) {
-        const G = L[F], bt = $[F];
+        const G = L[F], xt = $[F];
         if (p.hasOwnProperty(F))
           continue;
-        let xt = !1;
-        si(G) && si(bt) ? xt = !ra(G, bt) : xt = G !== bt, xt ? G != null ? At(F) : d.add(F) : G !== void 0 && d.has(F) ? At(F) : w.protectedKeys[F] = !0;
+        let bt = !1;
+        si(G) && si(xt) ? bt = !ra(G, xt) : bt = G !== xt, bt ? G != null ? At(F) : d.add(F) : G !== void 0 && d.has(F) ? At(F) : w.protectedKeys[F] = !0;
       }
       w.prevProp = S, w.prevResolvedValues = L, w.isActive && (p = { ...p, ...L }), i && t.blockInitialAnimation && (v = !1);
       const Q = R && k;
       v && (!Q || _) && f.push(...H.map((F) => {
         const G = { type: T };
         if (typeof F == "string" && i && !Q && t.manuallyAnimateOnMount && t.parent) {
-          const { parent: bt } = t, xt = ie(bt, F);
-          if (bt.enteringChildren && xt) {
-            const { delayChildren: U } = xt.transition || {};
-            G.delay = Cr(bt.enteringChildren, t, U);
+          const { parent: xt } = t, bt = ie(xt, F);
+          if (xt.enteringChildren && bt) {
+            const { delayChildren: U } = bt.transition || {};
+            G.delay = Cr(xt.enteringChildren, t, U);
           }
         }
         return {
@@ -2967,7 +2967,7 @@ function Hu(t, e, n) {
   const a = t.x.scale * e.x, l = t.y.scale * e.y;
   return (a !== 1 || l !== 1) && (i += `scale(${a}, ${l})`), i || "none";
 }
-const fa = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"], Ku = fa.length, ro = (t) => typeof t == "string" ? parseFloat(t) : t, ao = (t) => typeof t == "number" || b.test(t);
+const fa = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"], Ku = fa.length, ro = (t) => typeof t == "string" ? parseFloat(t) : t, ao = (t) => typeof t == "number" || x.test(t);
 function zu(t, e, n, i, s, r) {
   s ? (t.opacity = N(0, n.opacity ?? 1, Gu(i)), t.opacityExit = N(e.opacity ?? 1, 0, $u(i))) : r && (t.opacity = N(e.opacity ?? 1, n.opacity ?? 1, i));
   for (let o = 0; o < Ku; o++) {
@@ -2984,7 +2984,7 @@ function lo(t, e) {
 }
 const Gu = /* @__PURE__ */ ha(0, 0.5, ir), $u = /* @__PURE__ */ ha(0.5, 0.95, ut);
 function ha(t, e, n) {
-  return (i) => i < t ? 0 : i > e ? 1 : n(/* @__PURE__ */ xe(t, e, i));
+  return (i) => i < t ? 0 : i > e ? 1 : n(/* @__PURE__ */ be(t, e, i));
 }
 function Yu(t, e, n) {
   const i = J(t) ? t : se(t);
@@ -3217,7 +3217,7 @@ function ma({ attachResizeListener: t, defaultParent: e, measureScroll: n, check
       }
       this.animationCommitId = this.animationId, this.isUpdating ? (this.isUpdating = !1, this.nodes.forEach(af), this.nodes.forEach(ef), this.nodes.forEach(nf)) : this.nodes.forEach(uo), this.clearAllSnapshots();
       const a = nt.now();
-      q.delta = wt(0, 1e3 / 60, a - q.timestamp), q.timestamp = a, q.isProcessing = !0, bn.update.process(q), bn.preRender.process(q), bn.render.process(q), q.isProcessing = !1;
+      q.delta = wt(0, 1e3 / 60, a - q.timestamp), q.timestamp = a, q.isProcessing = !0, xn.update.process(q), xn.preRender.process(q), xn.render.process(q), q.isProcessing = !1;
     }
     didUpdate() {
       this.updateScheduled || (this.updateScheduled = !0, Ni.read(this.scheduleUpdate));
@@ -3740,7 +3740,7 @@ const Ta = () => ({
   ...Hi(),
   attrs: {}
 });
-function bf(t, e, n, i) {
+function xf(t, e, n, i) {
   const s = on(() => {
     const r = Ta();
     return ea(r, e, ia(i), t.transformTemplate, t.style), {
@@ -3754,7 +3754,7 @@ function bf(t, e, n, i) {
   }
   return s;
 }
-const xf = /* @__PURE__ */ new Set([
+const bf = /* @__PURE__ */ new Set([
   "animate",
   "exit",
   "variants",
@@ -3787,7 +3787,7 @@ const xf = /* @__PURE__ */ new Set([
   "viewport"
 ]);
 function sn(t) {
-  return t.startsWith("while") || t.startsWith("drag") && t !== "draggable" || t.startsWith("layout") || t.startsWith("onTap") || t.startsWith("onPan") || t.startsWith("onLayout") || xf.has(t);
+  return t.startsWith("while") || t.startsWith("drag") && t !== "draggable" || t.startsWith("layout") || t.startsWith("onTap") || t.startsWith("onPan") || t.startsWith("onLayout") || bf.has(t);
 }
 let va = (t) => !sn(t);
 function Ef(t) {
@@ -3852,7 +3852,7 @@ function Ki(t) {
   );
 }
 function Mf(t, e, n, { latestValues: i }, s, r = !1, o) {
-  const l = (o ?? Ki(t) ? bf : Af)(e, i, s, t), u = Pf(e, typeof t == "string", r), c = t !== Ho ? { ...u, ...l, ref: n } : {}, { children: f } = e, d = on(() => J(f) ? f.get() : f, [f]);
+  const l = (o ?? Ki(t) ? xf : Af)(e, i, s, t), u = Pf(e, typeof t == "string", r), c = t !== Ho ? { ...u, ...l, ref: n } : {}, { children: f } = e, d = on(() => J(f) ? f.get() : f, [f]);
   return Wa(t, {
     ...c,
     children: d
@@ -3971,7 +3971,7 @@ function Nf(t, e, n) {
     else o && (o.current = r);
   }, [e]);
 }
-const ba = oe({});
+const xa = oe({});
 function Se(t) {
   return t && typeof t == "object" && Object.prototype.hasOwnProperty.call(t, "current");
 }
@@ -3988,7 +3988,7 @@ function Bf(t, e, n, i, s, r) {
     reducedMotionConfig: u,
     isSVG: r
   }));
-  const f = c.current, d = at(ba);
+  const f = c.current, d = at(xa);
   f && !f.projection && s && (f.type === "html" || f.type === "svg") && Uf(c.current, n, s, d);
   const p = Ht(!1);
   Ko(() => {
@@ -4006,7 +4006,7 @@ function Bf(t, e, n, i, s, r) {
 }
 function Uf(t, e, n, i) {
   const { layoutId: s, layout: r, drag: o, dragConstraints: a, layoutScroll: l, layoutRoot: u, layoutCrossfade: c } = e;
-  t.projection = new n(t.latestValues, e["data-framer-portal-id"] ? void 0 : xa(t.parent)), t.projection.setOptions({
+  t.projection = new n(t.latestValues, e["data-framer-portal-id"] ? void 0 : ba(t.parent)), t.projection.setOptions({
     layoutId: s,
     layout: r,
     alwaysMeasureLayout: !!o || a && Se(a),
@@ -4025,9 +4025,9 @@ function Uf(t, e, n, i) {
     layoutRoot: u
   });
 }
-function xa(t) {
+function ba(t) {
   if (t)
-    return t.options.allowProjection !== !1 ? t.projection : xa(t.parent);
+    return t.options.allowProjection !== !1 ? t.projection : ba(t.parent);
 }
 function jf(t, { forwardMotionProps: e = !1, type: n } = {}, i, s) {
   i && kf(i);
@@ -4142,7 +4142,7 @@ function _e(t) {
   };
 }
 const qf = (t) => (e) => Fi(e) && t(e, _e(e));
-function be(t, e, n, i) {
+function xe(t, e, n, i) {
   return Me(t, e, qf(n), i);
 }
 const Ea = ({ current: t }) => t ? t.ownerDocument.defaultView : null, wo = (t, e) => Math.abs(t - e);
@@ -4182,7 +4182,7 @@ class Pa {
     const l = _e(e), u = Vn(l, this.transformPagePoint), { point: c } = u, { timestamp: f } = q;
     this.history = [{ ...c, timestamp: f }];
     const { onSessionStart: d } = n;
-    d && d(e, kn(u, this.history)), this.removeListeners = Ce(be(this.contextWindow, "pointermove", this.handlePointerMove), be(this.contextWindow, "pointerup", this.handlePointerUp), be(this.contextWindow, "pointercancel", this.handlePointerUp)), a && this.startScrollTracking(a);
+    d && d(e, kn(u, this.history)), this.removeListeners = Ce(xe(this.contextWindow, "pointermove", this.handlePointerMove), xe(this.contextWindow, "pointerup", this.handlePointerUp), xe(this.contextWindow, "pointercancel", this.handlePointerUp)), a && this.startScrollTracking(a);
   }
   /**
    * Start tracking scroll on ancestors and window.
@@ -4236,14 +4236,14 @@ class Pa {
 function Vn(t, e) {
   return e ? { point: e(t.point) } : t;
 }
-function bo(t, e) {
+function xo(t, e) {
   return { x: t.x - e.x, y: t.y - e.y };
 }
 function kn({ point: t }, e) {
   return {
     point: t,
-    delta: bo(t, Da(e)),
-    offset: bo(t, Jf(e)),
+    delta: xo(t, Da(e)),
+    offset: xo(t, Jf(e)),
     velocity: Qf(e, 0.1)
   };
 }
@@ -4274,7 +4274,7 @@ function Qf(t, e) {
 function th(t, { min: e, max: n }, i) {
   return e !== void 0 && t < e ? t = i ? N(e, t, i.min) : Math.max(t, e) : n !== void 0 && t > n && (t = i ? N(n, t, i.max) : Math.min(t, n)), t;
 }
-function xo(t, e, n) {
+function bo(t, e, n) {
   return {
     min: e !== void 0 ? t.min + e : void 0,
     max: n !== void 0 ? t.max + n - (t.max - t.min) : void 0
@@ -4282,8 +4282,8 @@ function xo(t, e, n) {
 }
 function eh(t, { top: e, left: n, bottom: i, right: s }) {
   return {
-    x: xo(t.x, n, s),
-    y: xo(t.y, e, i)
+    x: bo(t.x, n, s),
+    y: bo(t.y, e, i)
   };
 }
 function Eo(t, e) {
@@ -4299,7 +4299,7 @@ function nh(t, e) {
 function ih(t, e) {
   let n = 0.5;
   const i = it(t), s = it(e);
-  return s > i ? n = /* @__PURE__ */ xe(e.min, e.max - i, t.min) : i > s && (n = /* @__PURE__ */ xe(t.min, t.max - s, e.min)), wt(0, 1, n);
+  return s > i ? n = /* @__PURE__ */ be(e.min, e.max - i, t.min) : i > s && (n = /* @__PURE__ */ be(t.min, t.max - s, e.min)), wt(0, 1, n);
 }
 function sh(t, e) {
   const n = {};
@@ -4527,7 +4527,7 @@ class ah {
     if (!this.visualElement.current)
       return;
     rh.set(this.visualElement, this);
-    const e = this.visualElement.current, n = be(e, "pointerdown", (l) => {
+    const e = this.visualElement.current, n = xe(e, "pointerdown", (l) => {
       const { drag: u, dragListener: c = !0 } = this.getProps();
       u && c && !Hr(l.target) && this.start(l);
     }), i = () => {
@@ -4606,7 +4606,7 @@ class uh extends kt {
     };
   }
   mount() {
-    this.removePointerDownListener = be(this.node.current, "pointerdown", (e) => this.onPointerDown(e));
+    this.removePointerDownListener = xe(this.node.current, "pointerdown", (e) => this.onPointerDown(e));
   }
   update() {
     this.session && this.session.updateHandlers(this.createPanHandlers());
@@ -4670,7 +4670,7 @@ class hh extends Ga {
 }
 function Ma(t) {
   const [e, n] = fh(), i = at(ar);
-  return C(hh, { ...t, layoutGroup: i, switchLayoutGroup: at(ba), isPresent: e, safeToRemove: n });
+  return C(hh, { ...t, layoutGroup: i, switchLayoutGroup: at(xa), isPresent: e, safeToRemove: n });
 }
 const dh = {
   pan: {
@@ -4783,15 +4783,15 @@ class Ah extends kt {
     if (typeof IntersectionObserver > "u")
       return;
     const { props: e, prevProps: n } = this.node;
-    ["amount", "margin", "root"].some(bh(e, n)) && this.startObserver();
+    ["amount", "margin", "root"].some(xh(e, n)) && this.startObserver();
   }
   unmount() {
   }
 }
-function bh({ viewport: t = {} }, { viewport: e = {} } = {}) {
+function xh({ viewport: t = {} }, { viewport: e = {} } = {}) {
   return (n) => t[n] !== e[n];
 }
-const xh = {
+const bh = {
   inView: {
     Feature: Ah
   },
@@ -4811,14 +4811,14 @@ const xh = {
   }
 }, Ph = {
   ...Xf,
-  ...xh,
+  ...bh,
   ...dh,
   ...Eh
 };
 function Dh(t, e) {
   return jf(t, e, Ph, zf);
 }
-const Fn = /* @__PURE__ */ Dh("div"), Lo = "http://localhost:4000/api/widget/chat";
+const Fn = /* @__PURE__ */ Dh("div"), Lo = "https://proxy.convokit.dev/api/widget/chat";
 function cn(t) {
   let e;
   try {
@@ -5205,10 +5205,10 @@ function Ia() {
     ARIA_ATTR: un,
     IS_SCRIPT_OR_DATA: F,
     ATTR_WHITESPACE: G,
-    CUSTOM_ELEMENT: bt
+    CUSTOM_ELEMENT: xt
   } = Bo;
   let {
-    IS_ALLOWED_URI: xt
+    IS_ALLOWED_URI: bt
   } = Bo, U = null;
   const $i = M({}, [...ko, ...jn, ...Wn, ...Hn, ...Oo]);
   let Y = null;
@@ -5268,7 +5268,7 @@ function Ia() {
     let h = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     if (!(qt && qt === h)) {
       if ((!h || typeof h != "object") && (h = {}), h = Tt(h), he = // eslint-disable-next-line unicorn/prefer-includes
-      Na.indexOf(h.PARSER_MEDIA_TYPE) === -1 ? Fa : h.PARSER_MEDIA_TYPE, K = he === "application/xhtml+xml" ? Bn : qe, U = pt(h, "ALLOWED_TAGS") ? M({}, h.ALLOWED_TAGS, K) : $i, Y = pt(h, "ALLOWED_ATTR") ? M({}, h.ALLOWED_ATTR, K) : Yi, vn = pt(h, "ALLOWED_NAMESPACES") ? M({}, h.ALLOWED_NAMESPACES, Bn) : ka, yn = pt(h, "ADD_URI_SAFE_ATTR") ? M(Tt(ns), h.ADD_URI_SAFE_ATTR, K) : ns, ts = pt(h, "ADD_DATA_URI_TAGS") ? M(Tt(es), h.ADD_DATA_URI_TAGS, K) : es, gt = pt(h, "FORBID_CONTENTS") ? M({}, h.FORBID_CONTENTS, K) : gn, ue = pt(h, "FORBID_TAGS") ? M({}, h.FORBID_TAGS, K) : Tt({}), fn = pt(h, "FORBID_ATTR") ? M({}, h.FORBID_ATTR, K) : Tt({}), Yt = pt(h, "USE_PROFILES") ? h.USE_PROFILES : !1, Xi = h.ALLOW_ARIA_ATTR !== !1, hn = h.ALLOW_DATA_ATTR !== !1, qi = h.ALLOW_UNKNOWN_PROTOCOLS || !1, Zi = h.ALLOW_SELF_CLOSE_IN_ATTR !== !1, Gt = h.SAFE_FOR_TEMPLATES || !1, Ie = h.SAFE_FOR_XML !== !1, Ot = h.WHOLE_DOCUMENT || !1, $t = h.RETURN_DOM || !1, Ve = h.RETURN_DOM_FRAGMENT || !1, ke = h.RETURN_TRUSTED_TYPE || !1, mn = h.FORCE_BODY || !1, Ji = h.SANITIZE_DOM !== !1, Qi = h.SANITIZE_NAMED_PROPS || !1, pn = h.KEEP_CONTENT !== !1, fe = h.IN_PLACE || !1, xt = h.ALLOWED_URI_REGEXP || La, Xt = h.NAMESPACE || Et, Fe = h.MATHML_TEXT_INTEGRATION_POINTS || Fe, Be = h.HTML_INTEGRATION_POINTS || Be, B = h.CUSTOM_ELEMENT_HANDLING || {}, h.CUSTOM_ELEMENT_HANDLING && is(h.CUSTOM_ELEMENT_HANDLING.tagNameCheck) && (B.tagNameCheck = h.CUSTOM_ELEMENT_HANDLING.tagNameCheck), h.CUSTOM_ELEMENT_HANDLING && is(h.CUSTOM_ELEMENT_HANDLING.attributeNameCheck) && (B.attributeNameCheck = h.CUSTOM_ELEMENT_HANDLING.attributeNameCheck), h.CUSTOM_ELEMENT_HANDLING && typeof h.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements == "boolean" && (B.allowCustomizedBuiltInElements = h.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements), Gt && (hn = !1), Ve && ($t = !0), Yt && (U = M({}, Oo), Y = [], Yt.html === !0 && (M(U, ko), M(Y, No)), Yt.svg === !0 && (M(U, jn), M(Y, Kn), M(Y, Ke)), Yt.svgFilters === !0 && (M(U, Wn), M(Y, Kn), M(Y, Ke)), Yt.mathMl === !0 && (M(U, Hn), M(Y, Fo), M(Y, Ke))), h.ADD_TAGS && (typeof h.ADD_TAGS == "function" ? zt.tagCheck = h.ADD_TAGS : (U === $i && (U = Tt(U)), M(U, h.ADD_TAGS, K))), h.ADD_ATTR && (typeof h.ADD_ATTR == "function" ? zt.attributeCheck = h.ADD_ATTR : (Y === Yi && (Y = Tt(Y)), M(Y, h.ADD_ATTR, K))), h.ADD_URI_SAFE_ATTR && M(yn, h.ADD_URI_SAFE_ATTR, K), h.FORBID_CONTENTS && (gt === gn && (gt = Tt(gt)), M(gt, h.FORBID_CONTENTS, K)), h.ADD_FORBID_CONTENTS && (gt === gn && (gt = Tt(gt)), M(gt, h.ADD_FORBID_CONTENTS, K)), pn && (U["#text"] = !0), Ot && M(U, ["html", "head", "body"]), U.table && (M(U, ["tbody"]), delete ue.tbody), h.TRUSTED_TYPES_POLICY) {
+      Na.indexOf(h.PARSER_MEDIA_TYPE) === -1 ? Fa : h.PARSER_MEDIA_TYPE, K = he === "application/xhtml+xml" ? Bn : qe, U = pt(h, "ALLOWED_TAGS") ? M({}, h.ALLOWED_TAGS, K) : $i, Y = pt(h, "ALLOWED_ATTR") ? M({}, h.ALLOWED_ATTR, K) : Yi, vn = pt(h, "ALLOWED_NAMESPACES") ? M({}, h.ALLOWED_NAMESPACES, Bn) : ka, yn = pt(h, "ADD_URI_SAFE_ATTR") ? M(Tt(ns), h.ADD_URI_SAFE_ATTR, K) : ns, ts = pt(h, "ADD_DATA_URI_TAGS") ? M(Tt(es), h.ADD_DATA_URI_TAGS, K) : es, gt = pt(h, "FORBID_CONTENTS") ? M({}, h.FORBID_CONTENTS, K) : gn, ue = pt(h, "FORBID_TAGS") ? M({}, h.FORBID_TAGS, K) : Tt({}), fn = pt(h, "FORBID_ATTR") ? M({}, h.FORBID_ATTR, K) : Tt({}), Yt = pt(h, "USE_PROFILES") ? h.USE_PROFILES : !1, Xi = h.ALLOW_ARIA_ATTR !== !1, hn = h.ALLOW_DATA_ATTR !== !1, qi = h.ALLOW_UNKNOWN_PROTOCOLS || !1, Zi = h.ALLOW_SELF_CLOSE_IN_ATTR !== !1, Gt = h.SAFE_FOR_TEMPLATES || !1, Ie = h.SAFE_FOR_XML !== !1, Ot = h.WHOLE_DOCUMENT || !1, $t = h.RETURN_DOM || !1, Ve = h.RETURN_DOM_FRAGMENT || !1, ke = h.RETURN_TRUSTED_TYPE || !1, mn = h.FORCE_BODY || !1, Ji = h.SANITIZE_DOM !== !1, Qi = h.SANITIZE_NAMED_PROPS || !1, pn = h.KEEP_CONTENT !== !1, fe = h.IN_PLACE || !1, bt = h.ALLOWED_URI_REGEXP || La, Xt = h.NAMESPACE || Et, Fe = h.MATHML_TEXT_INTEGRATION_POINTS || Fe, Be = h.HTML_INTEGRATION_POINTS || Be, B = h.CUSTOM_ELEMENT_HANDLING || {}, h.CUSTOM_ELEMENT_HANDLING && is(h.CUSTOM_ELEMENT_HANDLING.tagNameCheck) && (B.tagNameCheck = h.CUSTOM_ELEMENT_HANDLING.tagNameCheck), h.CUSTOM_ELEMENT_HANDLING && is(h.CUSTOM_ELEMENT_HANDLING.attributeNameCheck) && (B.attributeNameCheck = h.CUSTOM_ELEMENT_HANDLING.attributeNameCheck), h.CUSTOM_ELEMENT_HANDLING && typeof h.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements == "boolean" && (B.allowCustomizedBuiltInElements = h.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements), Gt && (hn = !1), Ve && ($t = !0), Yt && (U = M({}, Oo), Y = [], Yt.html === !0 && (M(U, ko), M(Y, No)), Yt.svg === !0 && (M(U, jn), M(Y, Kn), M(Y, Ke)), Yt.svgFilters === !0 && (M(U, Wn), M(Y, Kn), M(Y, Ke)), Yt.mathMl === !0 && (M(U, Hn), M(Y, Fo), M(Y, Ke))), h.ADD_TAGS && (typeof h.ADD_TAGS == "function" ? zt.tagCheck = h.ADD_TAGS : (U === $i && (U = Tt(U)), M(U, h.ADD_TAGS, K))), h.ADD_ATTR && (typeof h.ADD_ATTR == "function" ? zt.attributeCheck = h.ADD_ATTR : (Y === Yi && (Y = Tt(Y)), M(Y, h.ADD_ATTR, K))), h.ADD_URI_SAFE_ATTR && M(yn, h.ADD_URI_SAFE_ATTR, K), h.FORBID_CONTENTS && (gt === gn && (gt = Tt(gt)), M(gt, h.FORBID_CONTENTS, K)), h.ADD_FORBID_CONTENTS && (gt === gn && (gt = Tt(gt)), M(gt, h.ADD_FORBID_CONTENTS, K)), pn && (U["#text"] = !0), Ot && M(U, ["html", "head", "body"]), U.table && (M(U, ["tbody"]), delete ue.tbody), h.TRUSTED_TYPES_POLICY) {
         if (typeof h.TRUSTED_TYPES_POLICY.createHTML != "function")
           throw ge('TRUSTED_TYPES_POLICY configuration option must provide a "createHTML" hook.');
         if (typeof h.TRUSTED_TYPES_POLICY.createScriptURL != "function")
@@ -5284,8 +5284,8 @@ function Ia() {
       namespaceURI: Xt,
       tagName: "template"
     });
-    const x = qe(h.tagName), V = qe(g.tagName);
-    return vn[h.namespaceURI] ? h.namespaceURI === Ne ? g.namespaceURI === Et ? x === "svg" : g.namespaceURI === Oe ? x === "svg" && (V === "annotation-xml" || Fe[V]) : !!ss[x] : h.namespaceURI === Oe ? g.namespaceURI === Et ? x === "math" : g.namespaceURI === Ne ? x === "math" && Be[V] : !!os[x] : h.namespaceURI === Et ? g.namespaceURI === Ne && !Be[V] || g.namespaceURI === Oe && !Fe[V] ? !1 : !os[x] && (Oa[x] || !ss[x]) : !!(he === "application/xhtml+xml" && vn[h.namespaceURI]) : !1;
+    const b = qe(h.tagName), V = qe(g.tagName);
+    return vn[h.namespaceURI] ? h.namespaceURI === Ne ? g.namespaceURI === Et ? b === "svg" : g.namespaceURI === Oe ? b === "svg" && (V === "annotation-xml" || Fe[V]) : !!ss[b] : h.namespaceURI === Oe ? g.namespaceURI === Et ? b === "math" : g.namespaceURI === Ne ? b === "math" && Be[V] : !!os[b] : h.namespaceURI === Et ? g.namespaceURI === Ne && !Be[V] || g.namespaceURI === Oe && !Fe[V] ? !1 : !os[b] && (Oa[b] || !ss[b]) : !!(he === "application/xhtml+xml" && vn[h.namespaceURI]) : !1;
   }, yt = function(h) {
     me(e.removed, {
       element: h
@@ -5319,12 +5319,12 @@ function Ia() {
         } catch {
         }
   }, rs = function(h) {
-    let g = null, x = null;
+    let g = null, b = null;
     if (mn)
       h = "<remove></remove>" + h;
     else {
       const j = Un(h, /^[\r\n\t ]+/);
-      x = j && j[0];
+      b = j && j[0];
     }
     he === "application/xhtml+xml" && Xt === Et && (h = '<html xmlns="http://www.w3.org/1999/xhtml"><head></head><body>' + h + "</body></html>");
     const V = E ? E.createHTML(h) : h;
@@ -5341,7 +5341,7 @@ function Ia() {
       }
     }
     const Z = g.body || g.documentElement;
-    return h && x && Z.insertBefore(n.createTextNode(x), Z.childNodes[0] || null), Xt === Et ? _.call(g, Ot ? "html" : "body")[0] : Ot ? g.documentElement : Z;
+    return h && b && Z.insertBefore(n.createTextNode(b), Z.childNodes[0] || null), Xt === Et ? _.call(g, Ot ? "html" : "body")[0] : Ot ? g.documentElement : Z;
   }, as = function(h) {
     return k.call(
       h.ownerDocument || h,
@@ -5356,24 +5356,24 @@ function Ia() {
     return typeof a == "function" && h instanceof a;
   };
   function Pt(P, h, g) {
-    He(P, (x) => {
-      x.call(e, h, g, qt);
+    He(P, (b) => {
+      b.call(e, h, g, qt);
     });
   }
   const cs = function(h) {
     let g = null;
     if (Pt(L.beforeSanitizeElements, h, null), wn(h))
       return yt(h), !0;
-    const x = K(h.nodeName);
+    const b = K(h.nodeName);
     if (Pt(L.uponSanitizeElement, h, {
-      tagName: x,
+      tagName: b,
       allowedTags: U
     }), Ie && h.hasChildNodes() && !ls(h.firstElementChild) && tt(/<[/\w!]/g, h.innerHTML) && tt(/<[/\w!]/g, h.textContent) || h.nodeType === Te.progressingInstruction || Ie && h.nodeType === Te.comment && tt(/<[/\w]/g, h.data))
       return yt(h), !0;
-    if (!(zt.tagCheck instanceof Function && zt.tagCheck(x)) && (!U[x] || ue[x])) {
-      if (!ue[x] && fs(x) && (B.tagNameCheck instanceof RegExp && tt(B.tagNameCheck, x) || B.tagNameCheck instanceof Function && B.tagNameCheck(x)))
+    if (!(zt.tagCheck instanceof Function && zt.tagCheck(b)) && (!U[b] || ue[b])) {
+      if (!ue[b] && fs(b) && (B.tagNameCheck instanceof RegExp && tt(B.tagNameCheck, b) || B.tagNameCheck instanceof Function && B.tagNameCheck(b)))
         return !1;
-      if (pn && !gt[x]) {
+      if (pn && !gt[b]) {
         const V = S(h) || h.parentNode, Z = w(h) || h.childNodes;
         if (Z && V) {
           const j = Z.length;
@@ -5385,13 +5385,13 @@ function Ia() {
       }
       return yt(h), !0;
     }
-    return h instanceof l && !Ua(h) || (x === "noscript" || x === "noembed" || x === "noframes") && tt(/<\/no(script|embed|frames)/i, h.innerHTML) ? (yt(h), !0) : (Gt && h.nodeType === Te.text && (g = h.textContent, He([$, ht, At], (V) => {
+    return h instanceof l && !Ua(h) || (b === "noscript" || b === "noembed" || b === "noframes") && tt(/<\/no(script|embed|frames)/i, h.innerHTML) ? (yt(h), !0) : (Gt && h.nodeType === Te.text && (g = h.textContent, He([$, ht, At], (V) => {
       g = pe(g, V, " ");
     }), h.textContent !== g && (me(e.removed, {
       element: h.cloneNode()
     }), h.textContent = g)), Pt(L.afterSanitizeElements, h, null), !1);
-  }, us = function(h, g, x) {
-    if (Ji && (g === "id" || g === "name") && (x in n || x in Ba))
+  }, us = function(h, g, b) {
+    if (Ji && (g === "id" || g === "name") && (b in n || b in Ba))
       return !1;
     if (!(hn && !fn[g] && tt(Q, g))) {
       if (!(Xi && tt(un, g))) {
@@ -5403,13 +5403,13 @@ function Ia() {
               // and c) if the attribute name passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.attributeNameCheck
               !(fs(h) && (B.tagNameCheck instanceof RegExp && tt(B.tagNameCheck, h) || B.tagNameCheck instanceof Function && B.tagNameCheck(h)) && (B.attributeNameCheck instanceof RegExp && tt(B.attributeNameCheck, g) || B.attributeNameCheck instanceof Function && B.attributeNameCheck(g, h)) || // Alternative, second condition checks if it's an `is`-attribute, AND
               // the value passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.tagNameCheck
-              g === "is" && B.allowCustomizedBuiltInElements && (B.tagNameCheck instanceof RegExp && tt(B.tagNameCheck, x) || B.tagNameCheck instanceof Function && B.tagNameCheck(x)))
+              g === "is" && B.allowCustomizedBuiltInElements && (B.tagNameCheck instanceof RegExp && tt(B.tagNameCheck, b) || B.tagNameCheck instanceof Function && B.tagNameCheck(b)))
             ) return !1;
           } else if (!yn[g]) {
-            if (!tt(xt, pe(x, G, ""))) {
-              if (!((g === "src" || g === "xlink:href" || g === "href") && h !== "script" && Fh(x, "data:") === 0 && ts[h])) {
-                if (!(qi && !tt(F, pe(x, G, "")))) {
-                  if (x)
+            if (!tt(bt, pe(b, G, ""))) {
+              if (!((g === "src" || g === "xlink:href" || g === "href") && h !== "script" && Fh(b, "data:") === 0 && ts[h])) {
+                if (!(qi && !tt(F, pe(b, G, "")))) {
+                  if (b)
                     return !1;
                 }
               }
@@ -5420,7 +5420,7 @@ function Ia() {
     }
     return !0;
   }, fs = function(h) {
-    return h !== "annotation-xml" && Un(h, bt);
+    return h !== "annotation-xml" && Un(h, xt);
   }, hs = function(h) {
     Pt(L.beforeSanitizeAttributes, h, null);
     const {
@@ -5428,7 +5428,7 @@ function Ia() {
     } = h;
     if (!g || wn(h))
       return;
-    const x = {
+    const b = {
       attrName: "",
       attrValue: "",
       keepAttr: !0,
@@ -5443,7 +5443,7 @@ function Ia() {
         value: Dt
       } = Z, Zt = K(j), An = Dt;
       let X = j === "value" ? An : Bh(An);
-      if (x.attrName = Zt, x.attrValue = X, x.keepAttr = !0, x.forceKeepAttr = void 0, Pt(L.uponSanitizeAttribute, h, x), X = x.attrValue, Qi && (Zt === "id" || Zt === "name") && (Nt(j, h), X = Va + X), Ie && tt(/((--!?|])>)|<\/(style|title|textarea)/i, X)) {
+      if (b.attrName = Zt, b.attrValue = X, b.keepAttr = !0, b.forceKeepAttr = void 0, Pt(L.uponSanitizeAttribute, h, b), X = b.attrValue, Qi && (Zt === "id" || Zt === "name") && (Nt(j, h), X = Va + X), Ie && tt(/((--!?|])>)|<\/(style|title|textarea)/i, X)) {
         Nt(j, h);
         continue;
       }
@@ -5451,9 +5451,9 @@ function Ia() {
         Nt(j, h);
         continue;
       }
-      if (x.forceKeepAttr)
+      if (b.forceKeepAttr)
         continue;
-      if (!x.keepAttr) {
+      if (!b.keepAttr) {
         Nt(j, h);
         continue;
       }
@@ -5490,13 +5490,13 @@ function Ia() {
     Pt(L.afterSanitizeAttributes, h, null);
   }, ja = function P(h) {
     let g = null;
-    const x = as(h);
-    for (Pt(L.beforeSanitizeShadowDOM, h, null); g = x.nextNode(); )
+    const b = as(h);
+    for (Pt(L.beforeSanitizeShadowDOM, h, null); g = b.nextNode(); )
       Pt(L.uponSanitizeShadowNode, g, null), cs(g), hs(g), g.content instanceof r && P(g.content);
     Pt(L.afterSanitizeShadowDOM, h, null);
   };
   return e.sanitize = function(P) {
-    let h = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, g = null, x = null, V = null, Z = null;
+    let h = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, g = null, b = null, V = null, Z = null;
     if (Tn = !P, Tn && (P = "<!-->"), typeof P != "string" && !ls(P))
       if (typeof P.toString == "function") {
         if (P = P.toString(), typeof P != "string")
@@ -5512,7 +5512,7 @@ function Ia() {
           throw ge("root node is forbidden and cannot be sanitized in-place");
       }
     } else if (P instanceof a)
-      g = rs("<!---->"), x = g.ownerDocument.importNode(P, !0), x.nodeType === Te.element && x.nodeName === "BODY" || x.nodeName === "HTML" ? g = x : g.appendChild(x);
+      g = rs("<!---->"), b = g.ownerDocument.importNode(P, !0), b.nodeType === Te.element && b.nodeName === "BODY" || b.nodeName === "HTML" ? g = b : g.appendChild(b);
     else {
       if (!$t && !Gt && !Ot && // eslint-disable-next-line unicorn/prefer-includes
       P.indexOf("<") === -1)
@@ -5546,8 +5546,8 @@ function Ia() {
     qt = null, dn = !1;
   }, e.isValidAttribute = function(P, h, g) {
     qt || Sn({});
-    const x = K(P), V = K(h);
-    return us(x, V, g);
+    const b = K(P), V = K(h);
+    return us(b, V, g);
   }, e.addHook = function(P, h) {
     typeof h == "function" && me(L[P], h);
   }, e.removeHook = function(P, h) {

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 (function(){"use strict";try{if(typeof document!="undefined"){var o=document.createElement("style");o.appendChild(document.createTextNode(":root{--convokit-primary: #000;--convokit-header-bg: #000;--convokit-font-family: Inter, system-ui, sans-serif;--convokit-font-size: 14px;--convokit-border-radius: 18px;--convokit-chat-bg: #ffffff;--convokit-user-msg-bg: #000;--convokit-assistant-msg-bg: #f3f4f6;--convokit-input-bg: #ffffff;--convokit-input-border: #d1d5db}.convokit-widget{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;font-family:var(--convokit-font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.convokit-button{width:56px;height:56px;border-radius:50%;border:2px solid var(--convokit-primary);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000001a;z-index:10000;transition:all .2s ease;background:var(--convokit-primary)}.convokit-button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.convokit-button:active{transform:translateY(0)}.convokit-button-hidden{opacity:0;transform:scale(0);pointer-events:none;transition:all .2s ease-in-out}.convokit-chat-window{width:380px;height:600px;background:#fff;border-radius:12px;box-shadow:0 4px 16px #0000001a;display:flex;flex-direction:column;overflow:hidden;position:absolute;bottom:0;right:0;z-index:9999;transform-origin:bottom right;border:2px solid #000;overscroll-behavior:contain}.convokit-chat-window-body{width:100%;height:100%;background:#fff;display:flex;flex-direction:column;overflow:hidden}.convokit-chat-wrapper{display:flex;flex-direction:column;flex:1;background:var(--convokit-chat-bg);overflow:hidden}.convokit-header{padding:16px 20px;color:#fff;display:flex;justify-content:space-between;align-items:center;min-height:60px;background:var(--convokit-header-bg);position:relative;border-bottom:2px solid var(--convokit-header-bg)}.convokit-header-subtitle{margin:0;font-size:12px;opacity:.85;line-height:1.3}.convokit-header-left{display:flex;align-items:center;gap:12px;flex:1}.convokit-avatar{display:none}.convokit-header-text{display:flex;flex-direction:column;gap:4px}.convokit-header-text h3{margin:0;font-size:16px;font-weight:600;line-height:1.3}.convokit-header-actions{display:flex;align-items:center;gap:4px}.convokit-header-icon{background:none;border:none;color:#fff;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:opacity .2s ease}.convokit-header-icon:hover{opacity:.7}.convokit-header-icon:active{opacity:.5}.convokit-chat-window-content{display:flex;flex-direction:column;flex:1;overflow:hidden;min-height:0}.convokit-chat-container{display:flex;flex-direction:column;flex:1;padding:16px;border:none;overflow:hidden;background:transparent;overscroll-behavior:contain}.convokit-messages{flex:1;overflow-y:auto;padding:8px 0;display:flex;flex-direction:column;gap:16px;background:transparent;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain}.convokit-messages::-webkit-scrollbar{display:none}.convokit-welcome{text-align:center;color:#666;padding:20px;font-size:14px}.convokit-message{display:flex;align-items:flex-end;gap:0;max-width:75%}.convokit-message-user{align-self:flex-end}.convokit-message-assistant{align-self:flex-start}.convokit-bot-icon{display:none}.convokit-message-content{padding:10px 14px;border-radius:var(--convokit-border-radius);word-wrap:break-word;font-size:var(--convokit-font-size);line-height:1.5;position:relative}.convokit-message-user .convokit-message-content{background:var(--convokit-user-msg-bg);color:#fff;border-bottom-right-radius:4px}.convokit-message-assistant .convokit-message-content{background:var(--convokit-assistant-msg-bg);color:#000;border-bottom-left-radius:4px}.convokit-message-content strong{font-weight:600}.convokit-message-content em{font-style:italic}.convokit-message-content a{text-decoration:underline}.convokit-typing{display:flex;gap:6px;padding:4px 0;align-items:center}.convokit-typing span{width:8px;height:8px;border-radius:50%;background:#6b7280;animation:typing-bounce 1.4s ease-in-out infinite}.convokit-typing span:nth-child(1){animation-delay:0s}.convokit-typing span:nth-child(2){animation-delay:.2s}.convokit-typing span:nth-child(3){animation-delay:.4s}@keyframes typing-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-8px)}}.convokit-input-form{display:flex;align-items:center;padding:12px 0 0;gap:8px;flex-shrink:0;background:transparent;border-bottom:none}.convokit-input{flex:1;padding:11px 14px;border:1px solid color-mix(in srgb,var(--convokit-primary) 35%,transparent);background:var(--convokit-input-bg);border-radius:20px;font-size:var(--convokit-font-size);outline:none;color:#000;font-family:var(--convokit-font-family);transition:border-color .2s ease,box-shadow .2s ease}.convokit-input:focus{border-color:var(--convokit-primary);box-shadow:none}.convokit-input::placeholder{color:#9ca3af}.convokit-input:disabled{background:#f9fafb;color:#9ca3af;border-color:#e5e7eb}.convokit-send-button{width:40px;height:40px;border-radius:50%;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--convokit-primary);transition:opacity .2s ease}.convokit-send-button:hover:not(:disabled){opacity:.8}.convokit-send-button:active:not(:disabled){opacity:.6}.convokit-send-button:disabled{opacity:.3;cursor:not-allowed;background:var(--convokit-primary)}.convokit-footer{padding:10px 16px;text-align:center;background:var(--convokit-chat-bg);font-size:11px;color:#6b7280}.convokit-footer a{color:var(--convokit-primary);text-decoration:none;font-weight:500;transition:opacity .2s ease}.convokit-footer a:hover{opacity:.7}.convokit-rating-prompt{padding:16px;border-top:1px solid #e5e7eb;background-color:#f9fafb;border-bottom-left-radius:12px;border-bottom-right-radius:12px}.convokit-rating-question{margin:0 0 12px;font-size:14px;font-weight:500;color:#374151;text-align:center}.convokit-rating-buttons{display:flex;gap:12px;justify-content:center;margin-bottom:12px}.convokit-rating-button{width:48px;height:48px;border-radius:50%;border:2px solid #d1d5db;background-color:#fff;color:#6b7280;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;padding:0}.convokit-rating-button:hover:not(:disabled){border-color:#9ca3af;transform:scale(1.05)}.convokit-rating-button:disabled{opacity:.5;cursor:not-allowed}.convokit-rating-button.convokit-rating-selected{color:#fff;border-width:2px}.convokit-rating-feedback{margin-top:12px;animation:slideDown .3s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.convokit-rating-textarea{width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;font-family:inherit;resize:vertical;min-height:60px;margin-bottom:8px;box-sizing:border-box}.convokit-rating-textarea:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.convokit-rating-textarea:disabled{background-color:#f3f4f6;cursor:not-allowed}.convokit-rating-submit{width:100%;padding:10px 16px;border:none;border-radius:8px;font-size:14px;font-weight:500;color:#fff;cursor:pointer;transition:opacity .2s ease}.convokit-rating-submit:hover:not(:disabled){opacity:.9}.convokit-rating-submit:disabled{opacity:.6;cursor:not-allowed}.convokit-rating-thankyou{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.convokit-rating-icon{width:48px;height:48px;border-radius:50%;background-color:#10b981;color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;margin-bottom:12px}.convokit-rating-message{margin:0;font-size:14px;font-weight:500;color:#374151}@media (max-width: 480px){.convokit-widget{bottom:10px;right:10px}.convokit-chat-window{width:calc(100vw - 20px);height:calc(100vh - 20px);max-width:calc(100vw - 20px);max-height:calc(100vh - 20px);bottom:0;right:0;border-radius:16px}.convokit-message{max-width:85%}.convokit-header{padding:16px 16px 12px;min-height:64px}.convokit-chat-container{padding:12px}}")),document.head.appendChild(o)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
-import { M as L, r as _, f as R, i as $, s as G, c as Y, a as q, g as A, b as U, d as V, e as J } from "./PopupWidget-CGZOe6ZA.js";
-import { P as he } from "./PopupWidget-CGZOe6ZA.js";
+import { M as L, r as _, f as R, i as $, s as G, c as Y, a as q, g as A, b as U, d as V, e as J } from "./PopupWidget-CAnOwL1f.js";
+import { P as he } from "./PopupWidget-CAnOwL1f.js";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 import { useState as u, useRef as F, useEffect as N } from "react";
 const Q = "convokit-widget", X = ({ config: e, onBack: c, backLabel: r = "Back to editor" }) => {

package/dist/next.esm.js

@@ -2,7 +2,7 @@
 import { jsx as o } from "react/jsx-runtime";
 import n from "next/dynamic";
 const i = n(
-  () => import("./PopupWidget-CGZOe6ZA.js").then((e) => e.h).then((e) => e.PopupWidget),
+  () => import("./PopupWidget-CAnOwL1f.js").then((e) => e.h).then((e) => e.PopupWidget),
   { ssr: !1 }
 ), s = () => {
   var e;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@convokit/widget",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "AI chat widget for your website",
   "type": "module",
   "main": "dist/index.esm.js",