@opencx/widget-react 4.0.0

package/dist/index.js

@@ -0,0 +1,2778 @@
+import { jsx as o, jsxs as c, Fragment as nt } from "react/jsx-runtime";
+import * as ie from "@radix-ui/react-popover";
+import * as E from "react";
+import se, { memo as Et, forwardRef as st, useState as j, cloneElement as Ft, useEffect as le, useMemo as at, useRef as ce, createElement as Qe } from "react";
+import { useConfig as S, useWidget as $, useWidgetRouter as A, usePreludeData as de, useDocumentDir as ve, useWidgetTrigger as V, useSessions as Y, useMessages as q, useModes as it, useUploadFiles as Pt, useIsAwaitingBotReply as lt, useContact as Wt, WidgetProvider as Ht, WidgetTriggerProvider as At } from "@opencx/widget-react-headless";
+import ct from "rehype-raw";
+import dt from "remark-gfm";
+import * as O from "@radix-ui/react-dialog";
+import { X as Bt, CircleDashedIcon as Lt, XIcon as be, SquareXIcon as $t, SquareCheckBigIcon as Yt, SquareCheckIcon as qt, ShrinkIcon as Xt, Minimize2Icon as Ut, MinimizeIcon as Vt, Maximize2Icon as Kt, MaximizeIcon as Gt, ExpandIcon as Zt, CircleXIcon as Jt, CircleCheckBigIcon as Qt, CircleCheckIcon as pt, CheckCheckIcon as eo, CheckIcon as to, ChevronLeftIcon as oo, LoaderIcon as ro, PaperclipIcon as no, ImageIcon as so, CircleDashed as ao, ArrowUpIcon as io, AlertCircle as lo, Loader2 as co, FileAudio2Icon as po, FileVideo2Icon as ho, FileIcon as mo, UserRoundIcon as wo, ChevronRightIcon as go, SendHorizontal as uo, ChevronDownIcon as fo } from "lucide-react";
+import { clsx as vo } from "clsx";
+import { twMerge as bo } from "tailwind-merge";
+import { createPortal as xo } from "react-dom";
+import ht, { useFrame as yo } from "@uiw/react-iframe";
+import { Slot as ko } from "@radix-ui/react-slot";
+import { cva as Co } from "class-variance-authority";
+import zo from "react-markdown";
+import { isExhaustive as D } from "@opencx/widget-core";
+import { motion as Z, AnimatePresence as T } from "framer-motion";
+import * as K from "@radix-ui/react-avatar";
+import * as ee from "@radix-ui/react-tooltip";
+import et from "tinycolor2";
+import { useDropzone as No } from "react-dropzone";
+import So from "react-use/lib/useAsyncFn";
+import { z as me } from "zod";
+function w(e) {
+  return { "data-component": e };
+}
+function d(...e) {
+  return bo(vo(e));
+}
+const mt = "opencx-widget-portal";
+function pe() {
+  return null;
+}
+function _o({ children: e }) {
+  var r, n;
+  const t = (n = (r = yo()) == null ? void 0 : r.document) == null ? void 0 : n.getElementById(mt);
+  return t ? xo(e, t) : (console.error("Portal container not found!"), null);
+}
+function Io() {
+  return /* @__PURE__ */ o("div", { id: mt, className: "absolute size-full top-0 left-0" });
+}
+pe.Portal = _o;
+pe.Container = Io;
+const U = {
+  x: 2,
+  y: 2
+}, H = Et(
+  st(
+    ({ children: e, className: t, scale: r = 1.02, off: n = !1 }, s) => {
+      const [a, l] = j(!1), [i, p] = j({ x: 0, y: 0 });
+      if (n || /translate/.test(
+        e.props.className || ""
+      )) return e;
+      const b = (m) => {
+        var v, k;
+        const { clientX: g, clientY: _ } = m, x = m.currentTarget.getBoundingClientRect(), I = g - (x.left + x.width / 2), M = _ - (x.top + x.height / 2), F = Math.max(
+          -1,
+          Math.min(1, I / (x.width / 2))
+        ), P = Math.max(
+          -1,
+          Math.min(1, M / (x.height / 2))
+        ), W = F * U.x, R = P * U.y;
+        p({ x: W, y: R }), (k = (v = e.props).onMouseMove) == null || k.call(v, m);
+      }, C = () => {
+        var m, g;
+        l(!0), (g = (m = e.props).onMouseEnter) == null || g.call(m);
+      }, f = () => {
+        var m, g;
+        l(!1), p({ x: 0, y: 0 }), (g = (m = e.props).onMouseLeave) == null || g.call(m);
+      }, h = {
+        "--wobble-x": a ? `${i.x}px` : "0px",
+        "--wobble-y": a ? `${i.y}px` : "0px",
+        "--scale": 1 - (r - 1)
+      };
+      return Ft(e, {
+        ref: s,
+        onMouseMove: b,
+        onMouseEnter: C,
+        onMouseLeave: f,
+        style: {
+          ...h,
+          ...e.props.style
+        },
+        className: d(
+          "translate-x-[var(--wobble-x)]",
+          "translate-y-[var(--wobble-y)]",
+          "hover:scale-[var(--scale)] active:hover:scale-[calc(var(--scale)-0.02)]",
+          t,
+          e.props.className,
+          "transition-all ease-out"
+        )
+      });
+    }
+  )
+);
+H.displayName = "Wobble";
+const To = Co(
+  d(
+    "inline-flex shrink-0 items-center justify-center gap-2",
+    "text-sm font-medium whitespace-nowrap",
+    "ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "active:scale-95 hover:active:scale-95",
+    "rounded-xl",
+    "transition"
+  ),
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground",
+        destructive: "bg-destructive text-destructive-foreground",
+        outline: "bg-background",
+        secondary: "bg-secondary text-secondary-foreground",
+        ghost: "hover:bg-secondary",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "py-2 px-3.5 text-xs",
+        /**
+         * This size is useful for top level buttons that needs to sit nicely inside the iframe's border radius.
+         * Having the minimum height higher than usual (the `default` variant) will make the border radius look just right.
+         */
+        lg: "min-h-12 px-4 rounded-[20px]",
+        icon: "h-10 w-10",
+        fit: "size-fit p-2",
+        free: "p-2",
+        selfless: "p-0"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+), z = E.forwardRef(
+  ({ className: e, variant: t = "default", size: r, asChild: n = !1, ...s }, a) => /* @__PURE__ */ o(H, { ref: a, children: /* @__PURE__ */ o(
+    n ? ko : "button",
+    {
+      ...w("ui_lib/btn"),
+      "data-variant": t,
+      className: d(To({ variant: t, size: r, className: e })),
+      ...s
+    }
+  ) })
+);
+z.displayName = "Button";
+const wt = O.Root, gt = O.Trigger, ut = E.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ o(
+  O.Overlay,
+  {
+    ref: r,
+    className: d(
+      "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      e
+    ),
+    ...t
+  }
+));
+ut.displayName = O.Overlay.displayName;
+const xe = E.forwardRef(({ className: e, children: t, withClose: r = !1, ...n }, s) => /* @__PURE__ */ c(pe.Portal, { children: [
+  /* @__PURE__ */ o(ut, {}),
+  /* @__PURE__ */ c(
+    O.Content,
+    {
+      ref: s,
+      className: d(
+        "fixed left-[50%] top-[50%] z-50 flex flex-col space-y-4 w-full max-w-[61.8%] translate-x-[-50%] translate-y-[-50%] border bg-background p-4 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-3xl",
+        e
+      ),
+      ...n,
+      children: [
+        t,
+        r && /* @__PURE__ */ o(
+          O.Close,
+          {
+            asChild: !0,
+            className: "absolute right-4 top-4 opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
+            children: /* @__PURE__ */ c(z, { size: "fit", className: "rounded-full", variant: "secondary", children: [
+              /* @__PURE__ */ o(Bt, { className: "h-4 w-4" }),
+              /* @__PURE__ */ o("span", { className: "sr-only", children: "Close" })
+            ] })
+          }
+        )
+      ]
+    }
+  )
+] }));
+xe.displayName = O.Content.displayName;
+const ft = ({
+  className: e,
+  ...t
+}) => /* @__PURE__ */ o(
+  "div",
+  {
+    className: d("flex flex-col gap-2 text-center pt-2", e),
+    ...t
+  }
+);
+ft.displayName = "DialogHeader";
+const vt = ({
+  className: e,
+  ...t
+}) => /* @__PURE__ */ o(
+  "div",
+  {
+    className: d("flex flex-col gap-2 text-center", e),
+    ...t
+  }
+);
+vt.displayName = "DialogBody";
+const bt = ({
+  className: e,
+  ...t
+}) => /* @__PURE__ */ o("div", { className: d("flex flex-col gap-2", e), ...t });
+bt.displayName = "DialogFooter";
+const ye = E.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ o(
+  O.Title,
+  {
+    ref: r,
+    className: d(
+      "text-lg font-semibold leading-none tracking-tight",
+      e
+    ),
+    ...t
+  }
+));
+ye.displayName = O.Title.displayName;
+const xt = E.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ o(
+  O.Description,
+  {
+    ref: r,
+    className: d("text-sm text-muted-foreground", e),
+    ...t
+  }
+));
+xt.displayName = O.Description.displayName;
+function yt({ attachment: e }) {
+  const { name: t, size: r, type: n, url: s } = e, a = n.startsWith("image/"), l = n.startsWith("video/"), i = n.startsWith("audio/");
+  return i ? /* @__PURE__ */ o(H, { children: /* @__PURE__ */ o("div", { className: "w-full shrink-0 overflow-hidden", children: /* @__PURE__ */ c("audio", { controls: !0, className: "w-full", children: [
+    /* @__PURE__ */ o("source", { src: s, type: n }),
+    "Your browser does not support the audio tag."
+  ] }) }) }) : l ? /* @__PURE__ */ o(H, { children: /* @__PURE__ */ o("div", { className: "w-full border shrink-0 rounded-2xl overflow-hidden", children: /* @__PURE__ */ c("video", { controls: !0, children: [
+    /* @__PURE__ */ o("source", { src: s, type: n }),
+    "Your browser does not support the video tag."
+  ] }) }) }) : !a && !l && !i ? /* @__PURE__ */ o(H, { children: /* @__PURE__ */ o("div", { className: "size-fit border shrink-0 rounded-2xl overflow-hidden", children: /* @__PURE__ */ c("div", { className: "flex items-end gap-2 p-2", children: [
+    /* @__PURE__ */ o(
+      "a",
+      {
+        href: s,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: d(
+          "text-xs text-blue-500 line-clamp-2 underline hover:text-blue-600",
+          "break-words [word-break:break-word]"
+          // `[word-break:break-word]` is deprecated but works in the browser, while `break-words` which is `[overflow-wrap: break-word]` does not work
+        ),
+        children: t
+      }
+    ),
+    /* @__PURE__ */ c("span", { className: "text-xs text-muted-foreground whitespace-nowrap", children: [
+      (r / 1024).toFixed(2),
+      " KB"
+    ] })
+  ] }) }) }) : /* @__PURE__ */ c(wt, { children: [
+    /* @__PURE__ */ o(H, { children: /* @__PURE__ */ o(gt, { children: /* @__PURE__ */ o("div", { className: "size-fit border shrink-0 rounded-2xl overflow-hidden", children: a && /* @__PURE__ */ o("img", { src: s, className: "object-cover size-16", alt: t }) }) }) }),
+    /* @__PURE__ */ c(
+      xe,
+      {
+        "aria-describedby": void 0,
+        className: "size-full max-w-full rounded-3xl flex items-center justify-center bg-transparent border-none gap-0",
+        withClose: !0,
+        children: [
+          /* @__PURE__ */ o(ye, { className: "sr-only", children: "Image preview" }),
+          a && /* @__PURE__ */ o("div", { className: "size-fit shrink-0 rounded-2xl overflow-hidden max-h-full", children: /* @__PURE__ */ o("img", { src: s, className: "object-cover size-auto", alt: t }) })
+        ]
+      }
+    )
+  ] });
+}
+const kt = se.memo(
+  zo,
+  (e, t) => e.children === t.children && e.className === t.className
+);
+function ae({
+  data: e,
+  id: t,
+  type: r,
+  attachments: n,
+  isFirstInGroup: s,
+  isLastInGroup: a,
+  isAloneInGroup: l,
+  dataComponentNames: i,
+  classNames: p
+}) {
+  const { anchorTarget: y } = S(), { message: b, variant: C = "default" } = e;
+  return C === "error" ? /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o("div", { className: "flex flex-row flex-wrap items-center justify-start", children: /* @__PURE__ */ o("div", { className: "leading-snug text-sm text-destructive", children: b }) }) }) : /* @__PURE__ */ c(
+    "div",
+    {
+      ...w((i == null ? void 0 : i.messageContainer) ?? "chat/agent_msg/root"),
+      className: d(
+        "w-5/6 flex flex-col items-start gap-1",
+        p == null ? void 0 : p.messageContainer
+      ),
+      children: [
+        n && n.length > 0 && /* @__PURE__ */ o("div", { className: "w-full gap-1 flex flex-row flex-wrap items-center justify-start", children: n == null ? void 0 : n.map((f) => /* @__PURE__ */ o(yt, { attachment: f }, f.id)) }),
+        b.length > 0 && /* @__PURE__ */ o(
+          "div",
+          {
+            ...w((i == null ? void 0 : i.message) ?? "chat/agent_msg/msg"),
+            "data-first": s,
+            "data-last": a,
+            "data-alone": l,
+            className: d(
+              "transition-all",
+              "w-fit py-3 px-4 rounded-3xl bg-secondary text-secondary-foreground",
+              "leading-snug text-sm prose prose-sm prose-a:decoration-primary prose-a:underline",
+              "break-words [word-break:break-word]",
+              // `[word-break:break-word]` is deprecated but works in the browser, while `break-words` which is `[overflow-wrap: break-word]` does not work
+              // No need to add "whitespace-pre-wrap" in the agent or bot message because it is markup and content appear on separate lines as expected
+              // Adding "whitespace-pre-wrap" will result in unnecessarily huge line breaks
+              // We're using the booleans directly here, not the data attributes, to make any external styling more specific than this
+              s && !l && "rounded-bl-md",
+              a && !l && "rounded-tl-md",
+              !s && !a && !l && "rounded-l-md",
+              p == null ? void 0 : p.message
+            ),
+            children: /* @__PURE__ */ o(
+              kt,
+              {
+                "data-type": r,
+                "data-id": t,
+                remarkPlugins: [dt],
+                rehypePlugins: [ct],
+                components: {
+                  a: ({ children: f, ...h }) => /* @__PURE__ */ o("a", { target: y ?? "_top", ...h, children: f })
+                },
+                children: b
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function Mo(e) {
+  return /* @__PURE__ */ o("div", { className: "w-full max-w-full overflow-auto shrink-0", children: /* @__PURE__ */ o(
+    "pre",
+    {
+      dir: "auto",
+      className: "text-xs leading-tight whitespace-pre-wrap break-word",
+      children: JSON.stringify(e, null, 1)
+    }
+  ) });
+}
+const ke = E.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ o(
+  K.Root,
+  {
+    ref: r,
+    className: d(
+      "relative flex size-6 aspect-square shrink-0 overflow-hidden rounded-full bg-secondary",
+      // 'border',
+      e
+    ),
+    ...t
+  }
+));
+ke.displayName = K.Root.displayName;
+const Ce = E.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ o(
+  K.Image,
+  {
+    ref: r,
+    className: d("aspect-square h-full w-full", e),
+    ...t
+  }
+));
+Ce.displayName = K.Image.displayName;
+const ze = E.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ o(
+  K.Fallback,
+  {
+    ref: r,
+    className: d(
+      "flex size-full text-xs items-center justify-center rounded-lg",
+      e
+    ),
+    ...t
+  }
+));
+ze.displayName = K.Fallback.displayName;
+function ge({
+  agent: e,
+  ...t
+}) {
+  var r, n;
+  return /* @__PURE__ */ c(ke, { ...t, children: [
+    /* @__PURE__ */ o(Ce, { src: (e == null ? void 0 : e.avatar) ?? "", alt: "Agent Icon" }),
+    (e == null ? void 0 : e.name) && /* @__PURE__ */ o(ze, { children: (n = (r = e == null ? void 0 : e.name) == null ? void 0 : r.slice(0, 1)) == null ? void 0 : n.toUpperCase() })
+  ] });
+}
+const Do = 10, Oo = (e, t, r) => ({
+  initial: { opacity: 0, x: -e, ...t.initial },
+  animate: { opacity: 1, x: 0, ...t.animate, transition: { delay: r } },
+  exit: { opacity: 0, x: e, ...t.exit }
+}), Ro = (e, t, r) => ({
+  initial: { opacity: 0, x: e, ...t.initial },
+  animate: { opacity: 1, x: 0, ...t.animate, transition: { delay: r } },
+  exit: { opacity: 0, x: -e, ...t.exit }
+}), jo = (e, t, r) => ({
+  initial: { opacity: 0, y: e, ...t.initial },
+  animate: { opacity: 1, y: 0, ...t.animate, transition: { delay: r } },
+  exit: { opacity: 0, y: -e, ...t.exit }
+}), Eo = (e, t, r) => ({
+  initial: { opacity: 0, y: -e, ...t.initial },
+  animate: { opacity: 1, y: 0, ...t.animate, transition: { delay: r } },
+  exit: { opacity: 0, y: e, ...t.exit }
+}), Fo = {
+  right: Oo,
+  left: Ro,
+  up: jo,
+  down: Eo
+}, u = st(
+  ({
+    fadeIn: e = "down",
+    distance: t = Do,
+    children: r,
+    snapExit: n = !1,
+    overrides: s = {},
+    delay: a = 0,
+    ...l
+  }, i) => {
+    const p = e ? Fo[e](t, s, a) : {};
+    return n && p.exit && typeof p.exit == "object" && !Array.isArray(p.exit) && (p.exit.transition = { duration: 0 }), /* @__PURE__ */ o(Z.div, { ref: i, ...l, ...p, children: r });
+  }
+);
+u.displayName = "MotionDiv";
+function Po({ agent: e }) {
+  return /* @__PURE__ */ o(T, { children: /* @__PURE__ */ c(
+    u,
+    {
+      ...w("chat/bot_loading/root"),
+      className: "flex flex-row items-end w-full gap-2 animate-pulse",
+      children: [
+        /* @__PURE__ */ o(ge, { agent: e }),
+        /* @__PURE__ */ c(
+          "div",
+          {
+            ...w("chat/bot_loading/bouncing_dots_container"),
+            className: d(
+              "flex items-center [&_span]:bg-secondary-foreground [&_span]:size-1 gap-1 p-2 rounded-xl bg-secondary"
+              // 'border',
+            ),
+            children: [
+              /* @__PURE__ */ o(Z.span, { className: "rounded-full animate-bounce [animation-delay:-0.3s]" }),
+              /* @__PURE__ */ o(Z.span, { className: "rounded-full animate-bounce [animation-delay:-0.15s]" }),
+              /* @__PURE__ */ o(Z.span, { className: "rounded-full animate-bounce" })
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+}
+const Ct = '@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..700;1,14..32,100..700&display=swap";@import"https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap";*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}*{-ms-overflow-style:none;scrollbar-width:none}*::-webkit-scrollbar{display:none}*{border-color:hsl(var(--opencx-border))}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.prose{color:var(--tw-prose-body);max-width:65ch}.prose :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-lead);font-size:1.25em;line-height:1.6;margin-top:1.2em;margin-bottom:1.2em}.prose :where(a):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-links);text-decoration:underline;font-weight:500}.prose :where(strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-bold);font-weight:600}.prose :where(a strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(blockquote strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(thead th strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal;margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em}.prose :where(ol[type=A]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=A s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=I]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type=I s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type="1"]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal}.prose :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:disc;margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{font-weight:400;color:var(--tw-prose-counters)}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{color:var(--tw-prose-bullets)}.prose :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.25em}.prose :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)){border-color:var(--tw-prose-hr);border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-style:italic;color:var(--tw-prose-quotes);border-inline-start-width:.25rem;border-inline-start-color:var(--tw-prose-quote-borders);quotes:"“""”""‘""’";margin-top:1.6em;margin-bottom:1.6em;padding-inline-start:1em}.prose :where(blockquote p:first-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:open-quote}.prose :where(blockquote p:last-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:close-quote}.prose :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:800;font-size:2.25em;margin-top:0;margin-bottom:.8888889em;line-height:1.1111111}.prose :where(h1 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:900;color:inherit}.prose :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:700;font-size:1.5em;margin-top:2em;margin-bottom:1em;line-height:1.3333333}.prose :where(h2 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:800;color:inherit}.prose :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;font-size:1.25em;margin-top:1.6em;margin-bottom:.6em;line-height:1.6}.prose :where(h3 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.5em;margin-bottom:.5em;line-height:1.5}.prose :where(h4 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)){display:block;margin-top:2em;margin-bottom:2em}.prose :where(video):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-family:inherit;color:var(--tw-prose-kbd);box-shadow:0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%),0 3px rgb(var(--tw-prose-kbd-shadows) / 10%);font-size:.875em;border-radius:.3125rem;padding-top:.1875em;padding-inline-end:.375em;padding-bottom:.1875em;padding-inline-start:.375em}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-code);font-weight:600;font-size:.875em}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:"`"}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:"`"}.prose :where(a code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(h1 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(h2 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.875em}.prose :where(h3 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.9em}.prose :where(h4 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(blockquote code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(thead th code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-pre-code);background-color:var(--tw-prose-pre-bg);overflow-x:auto;font-weight:400;font-size:.875em;line-height:1.7142857;margin-top:1.7142857em;margin-bottom:1.7142857em;border-radius:.375rem;padding-top:.8571429em;padding-inline-end:1.1428571em;padding-bottom:.8571429em;padding-inline-start:1.1428571em}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)){background-color:transparent;border-width:0;border-radius:0;padding:0;font-weight:inherit;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:none}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:none}.prose :where(table):not(:where([class~=not-prose],[class~=not-prose] *)){width:100%;table-layout:auto;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.7142857}.prose :where(thead):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-th-borders)}.prose :where(thead th):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;vertical-align:bottom;padding-inline-end:.5714286em;padding-bottom:.5714286em;padding-inline-start:.5714286em}.prose :where(tbody tr):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-td-borders)}.prose :where(tbody tr:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:0}.prose :where(tbody td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:baseline}.prose :where(tfoot):not(:where([class~=not-prose],[class~=not-prose] *)){border-top-width:1px;border-top-color:var(--tw-prose-th-borders)}.prose :where(tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:top}.prose :where(th,td):not(:where([class~=not-prose],[class~=not-prose] *)){text-align:start}.prose :where(figure>*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(figcaption):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-captions);font-size:.875em;line-height:1.4285714;margin-top:.8571429em}.prose{--tw-prose-body: #374151;--tw-prose-headings: #111827;--tw-prose-lead: #4b5563;--tw-prose-links: #111827;--tw-prose-bold: #111827;--tw-prose-counters: #6b7280;--tw-prose-bullets: #d1d5db;--tw-prose-hr: #e5e7eb;--tw-prose-quotes: #111827;--tw-prose-quote-borders: #e5e7eb;--tw-prose-captions: #6b7280;--tw-prose-kbd: #111827;--tw-prose-kbd-shadows: 17 24 39;--tw-prose-code: #111827;--tw-prose-pre-code: #e5e7eb;--tw-prose-pre-bg: #1f2937;--tw-prose-th-borders: #d1d5db;--tw-prose-td-borders: #e5e7eb;--tw-prose-invert-body: #d1d5db;--tw-prose-invert-headings: #fff;--tw-prose-invert-lead: #9ca3af;--tw-prose-invert-links: #fff;--tw-prose-invert-bold: #fff;--tw-prose-invert-counters: #9ca3af;--tw-prose-invert-bullets: #4b5563;--tw-prose-invert-hr: #374151;--tw-prose-invert-quotes: #f3f4f6;--tw-prose-invert-quote-borders: #374151;--tw-prose-invert-captions: #9ca3af;--tw-prose-invert-kbd: #fff;--tw-prose-invert-kbd-shadows: 255 255 255;--tw-prose-invert-code: #fff;--tw-prose-invert-pre-code: #d1d5db;--tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);--tw-prose-invert-th-borders: #4b5563;--tw-prose-invert-td-borders: #374151;font-size:1rem;line-height:1.75}.prose :where(picture>img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(li):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;margin-bottom:.5em}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.375em}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.375em}.prose :where(.prose>ul>li p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(.prose>ul>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ul>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(.prose>ol>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ol>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(dl):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where(dd):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;padding-inline-start:1.625em}.prose :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h2+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(thead th:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose :where(thead th:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose :where(tbody td,tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){padding-top:.5714286em;padding-inline-end:.5714286em;padding-bottom:.5714286em;padding-inline-start:.5714286em}.prose :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(.prose>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(.prose>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:0}.prose-sm{font-size:.875rem;line-height:1.7142857}.prose-sm :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.1428571em;margin-bottom:1.1428571em}.prose-sm :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:1.2857143em;line-height:1.5555556;margin-top:.8888889em;margin-bottom:.8888889em}.prose-sm :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.3333333em;margin-bottom:1.3333333em;padding-inline-start:1.1111111em}.prose-sm :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:2.1428571em;margin-top:0;margin-bottom:.8em;line-height:1.2}.prose-sm :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:1.4285714em;margin-top:1.6em;margin-bottom:.8em;line-height:1.4}.prose-sm :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:1.2857143em;margin-top:1.5555556em;margin-bottom:.4444444em;line-height:1.5555556}.prose-sm :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.4285714em;margin-bottom:.5714286em;line-height:1.4285714}.prose-sm :where(img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.7142857em;margin-bottom:1.7142857em}.prose-sm :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.7142857em;margin-bottom:1.7142857em}.prose-sm :where(picture>img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose-sm :where(video):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.7142857em;margin-bottom:1.7142857em}.prose-sm :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8571429em;border-radius:.3125rem;padding-top:.1428571em;padding-inline-end:.3571429em;padding-bottom:.1428571em;padding-inline-start:.3571429em}.prose-sm :where(code):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8571429em}.prose-sm :where(h2 code):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.9em}.prose-sm :where(h3 code):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8888889em}.prose-sm :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8571429em;line-height:1.6666667;margin-top:1.6666667em;margin-bottom:1.6666667em;border-radius:.25rem;padding-top:.6666667em;padding-inline-end:1em;padding-bottom:.6666667em;padding-inline-start:1em}.prose-sm :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.1428571em;margin-bottom:1.1428571em;padding-inline-start:1.5714286em}.prose-sm :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.1428571em;margin-bottom:1.1428571em;padding-inline-start:1.5714286em}.prose-sm :where(li):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.2857143em;margin-bottom:.2857143em}.prose-sm :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.4285714em}.prose-sm :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.4285714em}.prose-sm :where(.prose-sm>ul>li p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5714286em;margin-bottom:.5714286em}.prose-sm :where(.prose-sm>ul>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.1428571em}.prose-sm :where(.prose-sm>ul>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.1428571em}.prose-sm :where(.prose-sm>ol>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.1428571em}.prose-sm :where(.prose-sm>ol>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.1428571em}.prose-sm :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5714286em;margin-bottom:.5714286em}.prose-sm :where(dl):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.1428571em;margin-bottom:1.1428571em}.prose-sm :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.1428571em}.prose-sm :where(dd):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.2857143em;padding-inline-start:1.5714286em}.prose-sm :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2.8571429em;margin-bottom:2.8571429em}.prose-sm :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose-sm :where(h2+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose-sm :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose-sm :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose-sm :where(table):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8571429em;line-height:1.5}.prose-sm :where(thead th):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:1em;padding-bottom:.6666667em;padding-inline-start:1em}.prose-sm :where(thead th:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose-sm :where(thead th:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose-sm :where(tbody td,tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){padding-top:.6666667em;padding-inline-end:1em;padding-bottom:.6666667em;padding-inline-start:1em}.prose-sm :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose-sm :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose-sm :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.7142857em;margin-bottom:1.7142857em}.prose-sm :where(figure>*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose-sm :where(figcaption):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8571429em;line-height:1.3333333;margin-top:.6666667em}.prose-sm :where(.prose-sm>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose-sm :where(.prose-sm>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.invisible{visibility:hidden}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{top:0;right:0;bottom:0;left:0}.bottom-0{bottom:0}.left-0{left:0}.left-2{left:.5rem}.left-\\[50\\%\\]{left:50%}.right-4{right:1rem}.right-6{right:1.5rem}.top-0{top:0}.top-4{top:1rem}.top-6{top:1.5rem}.top-\\[50\\%\\]{top:50%}.isolate{isolation:isolate}.z-10{z-index:10}.z-50{z-index:50}.m-2{margin:.5rem}.-mx-1{margin-left:-.25rem;margin-right:-.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.ml-auto{margin-left:auto}.mt-0\\.5{margin-top:.125rem}.mt-auto{margin-top:auto}.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.contents{display:contents}.hidden{display:none}.aspect-square{aspect-ratio:1 / 1}.size-10{width:2.5rem;height:2.5rem}.size-12{width:3rem;height:3rem}.size-16{width:4rem;height:4rem}.size-3{width:.75rem;height:.75rem}.size-4{width:1rem;height:1rem}.size-6{width:1.5rem;height:1.5rem}.size-8{width:2rem;height:2rem}.size-auto{width:auto;height:auto}.size-fit{width:fit-content;height:fit-content}.size-full{width:100%;height:100%}.h-10{height:2.5rem}.h-2{height:.5rem}.h-3\\.5{height:.875rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-8{height:2rem}.h-full{height:100%}.h-px{height:1px}.max-h-16{max-height:4rem}.max-h-full{max-height:100%}.min-h-12{min-height:3rem}.w-0{width:0px}.w-1\\/2{width:50%}.w-10{width:2.5rem}.w-2{width:.5rem}.w-2\\/5{width:40%}.w-3\\.5{width:.875rem}.w-3\\/5{width:60%}.w-4{width:1rem}.w-5\\/6{width:83.333333%}.w-60{width:15rem}.w-9{width:2.25rem}.w-auto{width:auto}.w-fit{width:fit-content}.w-full{width:100%}.min-w-\\[8rem\\]{min-width:8rem}.max-w-\\[61\\.8\\%\\]{max-width:61.8%}.max-w-full{max-width:100%}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.translate-x-\\[-50\\%\\]{--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-\\[var\\(--wobble-x\\)\\]{--tw-translate-x: var(--wobble-x);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-\\[-50\\%\\]{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-\\[var\\(--wobble-y\\)\\]{--tw-translate-y: var(--wobble-y);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}.animate-bounce{animation:bounce 1s infinite}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;user-select:none}.resize-none{resize:none}.resize{resize:both}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0{gap:0px}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-\\[1px\\]{gap:1px}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.scroll-smooth{scroll-behavior:smooth}.text-ellipsis{text-overflow:ellipsis}.whitespace-normal{white-space:normal}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.break-words{overflow-wrap:break-word}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-\\[20px\\]{border-radius:20px}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-sm{border-radius:.125rem}.rounded-xl{border-radius:.75rem}.rounded-l-md{border-top-left-radius:.375rem;border-bottom-left-radius:.375rem}.rounded-r-md{border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}.rounded-bl-md{border-bottom-left-radius:.375rem}.rounded-br-md{border-bottom-right-radius:.375rem}.rounded-tl-md{border-top-left-radius:.375rem}.rounded-tr-md{border-top-right-radius:.375rem}.border{border-width:1px}.border-2{border-width:2px}.border-none{border-style:none}.border-transparent{border-color:transparent}.bg-\\[white\\]{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-background{background-color:hsl(var(--opencx-background))}.bg-black\\/50{background-color:#00000080}.bg-black\\/60{background-color:#0009}.bg-destructive{background-color:hsl(var(--opencx-destructive))}.bg-muted{background-color:hsl(var(--opencx-muted))}.bg-primary{background-color:hsl(var(--opencx-primary))}.bg-secondary{background-color:hsl(var(--opencx-secondary))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-\\[radial-gradient\\(ellipse_at_top_left\\,hsl\\(var\\(--opencx-primary\\)\\)\\,transparent\\)\\,radial-gradient\\(ellipse_at_top_right\\,hsl\\(var\\(--opencx-primary\\)\\)\\,transparent\\)\\]{background-image:radial-gradient(ellipse at top left,hsl(var(--opencx-primary)),transparent),radial-gradient(ellipse at top right,hsl(var(--opencx-primary)),transparent)}.fill-current{fill:currentColor}.object-contain{object-fit:contain}.object-cover{object-fit:cover}.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-4{padding:1rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3\\.5{padding-left:.875rem;padding-right:.875rem}.px-4{padding-left:1rem;padding-right:1rem}.py-1\\.5{padding-top:.375rem;padding-bottom:.375rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.pb-0{padding-bottom:0}.pl-2{padding-left:.5rem}.pl-4{padding-left:1rem}.pl-8{padding-left:2rem}.pr-2{padding-right:.5rem}.pr-4{padding-right:1rem}.pt-0{padding-top:0}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.text-center{text-align:center}.text-start{text-align:start}.align-middle{vertical-align:middle}.text-\\[1\\.75rem\\]{font-size:1.75rem}.text-\\[10px\\]{font-size:10px}.text-\\[16px\\]{font-size:16px}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-none{line-height:1}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-tight{letter-spacing:-.025em}.tracking-widest{letter-spacing:.1em}.text-blue-500{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity, 1))}.text-destructive{color:hsl(var(--opencx-destructive))}.text-destructive-foreground{color:hsl(var(--opencx-destructive-foreground))}.text-emerald-600{--tw-text-opacity: 1;color:rgb(5 150 105 / var(--tw-text-opacity, 1))}.text-foreground{color:hsl(var(--opencx-foreground))}.text-muted-foreground{color:hsl(var(--opencx-muted-foreground))}.text-muted-foreground\\/70{color:hsl(var(--opencx-muted-foreground) / .7)}.text-muted-foreground\\/75{color:hsl(var(--opencx-muted-foreground) / .75)}.text-primary{color:hsl(var(--opencx-primary))}.text-primary-foreground{color:hsl(var(--opencx-primary-foreground))}.text-secondary-foreground{color:hsl(var(--opencx-secondary-foreground))}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-95{opacity:.95}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-2xl{--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-none{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.outline-8{outline-width:8px}.outline-background{outline-color:hsl(var(--opencx-background))}.ring-0{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.ring-offset-background{--tw-ring-offset-color: hsl(var(--opencx-background))}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-sm{--tw-backdrop-blur: blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}@keyframes enter{0%{opacity:var(--tw-enter-opacity, 1);transform:translate3d(var(--tw-enter-translate-x, 0),var(--tw-enter-translate-y, 0),0) scale3d(var(--tw-enter-scale, 1),var(--tw-enter-scale, 1),var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity, 1);transform:translate3d(var(--tw-exit-translate-x, 0),var(--tw-exit-translate-y, 0),0) scale3d(var(--tw-exit-scale, 1),var(--tw-exit-scale, 1),var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0))}}.animate-in{animation-name:enter;animation-duration:.15s;--tw-enter-opacity: initial;--tw-enter-scale: initial;--tw-enter-rotate: initial;--tw-enter-translate-x: initial;--tw-enter-translate-y: initial}.fade-in-0{--tw-enter-opacity: 0}.zoom-in-95{--tw-enter-scale: .95}.duration-200{animation-duration:.2s}.ease-out{animation-timing-function:cubic-bezier(0,0,.2,1)}.\\[animation-delay\\:-0\\.15s\\]{animation-delay:-.15s}.\\[animation-delay\\:-0\\.3s\\]{animation-delay:-.3s}.\\[field-sizing\\:content\\;\\],.\\[field-sizing\\:content\\]{field-sizing:content}.\\[word-break\\:break-word\\]{word-break:break-word}.required:after{content:" *";color:red}.file\\:border-0::file-selector-button{border-width:0px}.file\\:bg-transparent::file-selector-button{background-color:transparent}.file\\:text-sm::file-selector-button{font-size:.875rem;line-height:1.25rem}.file\\:font-medium::file-selector-button{font-weight:500}.file\\:text-primary-foreground::file-selector-button{color:hsl(var(--opencx-primary-foreground))}.placeholder\\:text-muted-foreground::placeholder{color:hsl(var(--opencx-muted-foreground))}.placeholder\\:text-muted-foreground\\/75::placeholder{color:hsl(var(--opencx-muted-foreground) / .75)}.focus-within\\:border-primary:focus-within{border-color:hsl(var(--opencx-primary))}.hover\\:scale-\\[var\\(--scale\\)\\]:hover{--tw-scale-x: var(--scale);--tw-scale-y: var(--scale);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:border-primary:hover{border-color:hsl(var(--opencx-primary))}.hover\\:bg-secondary:hover{background-color:hsl(var(--opencx-secondary))}.hover\\:text-blue-600:hover{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.hover\\:text-primary:hover{color:hsl(var(--opencx-primary))}.hover\\:underline:hover{text-decoration-line:underline}.hover\\:opacity-100:hover{opacity:1}.focus\\:bg-accent:focus{background-color:hsl(var(--opencx-accent))}.focus\\:text-accent-foreground:focus{color:hsl(var(--opencx-accent-foreground))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\\:ring-ring:focus{--tw-ring-color: hsl(var(--opencx-ring))}.focus\\:ring-offset-2:focus{--tw-ring-offset-width: 2px}.focus-visible\\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\\:ring-2:focus-visible{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus-visible\\:ring-ring:focus-visible{--tw-ring-color: hsl(var(--opencx-ring))}.focus-visible\\:ring-offset-2:focus-visible{--tw-ring-offset-width: 2px}.focus-visible\\:ring-offset-background:focus-visible{--tw-ring-offset-color: hsl(var(--opencx-background))}.active\\:scale-95:active{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.active\\:hover\\:scale-\\[calc\\(var\\(--scale\\)-0\\.02\\)\\]:hover:active{--tw-scale-x: calc(var(--scale) - .02);--tw-scale-y: calc(var(--scale) - .02);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:active\\:scale-95:active:hover{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.disabled\\:pointer-events-none:disabled{pointer-events:none}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-50:disabled{opacity:.5}.group:hover .group-hover\\:opacity-100{opacity:1}.group:hover .group-hover\\:active\\:scale-90:active,.group:active .group-active\\:scale-90{--tw-scale-x: .9;--tw-scale-y: .9;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\\[disabled\\]\\:pointer-events-none[data-disabled]{pointer-events:none}.data-\\[state\\=checked\\]\\:translate-x-4[data-state=checked]{--tw-translate-x: 1rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\\[state\\=unchecked\\]\\:translate-x-0[data-state=unchecked]{--tw-translate-x: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\\[state\\=checked\\]\\:bg-primary[data-state=checked]{background-color:hsl(var(--opencx-primary))}.data-\\[state\\=open\\]\\:bg-accent[data-state=open]{background-color:hsl(var(--opencx-accent))}.data-\\[state\\=unchecked\\]\\:bg-input[data-state=unchecked]{background-color:hsl(var(--opencx-input))}.data-\\[state\\=open\\]\\:text-muted-foreground[data-state=open]{color:hsl(var(--opencx-muted-foreground))}.data-\\[disabled\\]\\:opacity-50[data-disabled]{opacity:.5}.data-\\[state\\=open\\]\\:animate-in[data-state=open]{animation-name:enter;animation-duration:.15s;--tw-enter-opacity: initial;--tw-enter-scale: initial;--tw-enter-rotate: initial;--tw-enter-translate-x: initial;--tw-enter-translate-y: initial}.data-\\[state\\=closed\\]\\:animate-out[data-state=closed]{animation-name:exit;animation-duration:.15s;--tw-exit-opacity: initial;--tw-exit-scale: initial;--tw-exit-rotate: initial;--tw-exit-translate-x: initial;--tw-exit-translate-y: initial}.data-\\[state\\=closed\\]\\:fade-out-0[data-state=closed]{--tw-exit-opacity: 0}.data-\\[state\\=open\\]\\:fade-in-0[data-state=open]{--tw-enter-opacity: 0}.data-\\[state\\=closed\\]\\:zoom-out-95[data-state=closed]{--tw-exit-scale: .95}.data-\\[state\\=open\\]\\:zoom-in-95[data-state=open]{--tw-enter-scale: .95}.data-\\[side\\=bottom\\]\\:slide-in-from-top-2[data-side=bottom]{--tw-enter-translate-y: -.5rem}.data-\\[side\\=left\\]\\:slide-in-from-right-2[data-side=left]{--tw-enter-translate-x: .5rem}.data-\\[side\\=right\\]\\:slide-in-from-left-2[data-side=right]{--tw-enter-translate-x: -.5rem}.data-\\[side\\=top\\]\\:slide-in-from-bottom-2[data-side=top]{--tw-enter-translate-y: .5rem}.data-\\[state\\=closed\\]\\:slide-out-to-left-1\\/2[data-state=closed]{--tw-exit-translate-x: -50%}.data-\\[state\\=closed\\]\\:slide-out-to-top-\\[48\\%\\][data-state=closed]{--tw-exit-translate-y: -48%}.data-\\[state\\=open\\]\\:slide-in-from-left-1\\/2[data-state=open]{--tw-enter-translate-x: -50%}.data-\\[state\\=open\\]\\:slide-in-from-top-\\[48\\%\\][data-state=open]{--tw-enter-translate-y: -48%}.prose-a\\:underline :is(:where(a):not(:where([class~=not-prose],[class~=not-prose] *))){text-decoration-line:underline}.prose-a\\:decoration-primary :is(:where(a):not(:where([class~=not-prose],[class~=not-prose] *))){text-decoration-color:hsl(var(--opencx-primary))}.rtl\\:-scale-100:where([dir=rtl],[dir=rtl] *){--tw-scale-x: -1;--tw-scale-y: -1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rtl\\:text-right:where([dir=rtl],[dir=rtl] *){text-align:right}.rtl\\:placeholder\\:text-right:where([dir=rtl],[dir=rtl] *)::placeholder{text-align:right}.\\[\\&_span\\]\\:size-1 span{width:.25rem;height:.25rem}.\\[\\&_span\\]\\:bg-secondary-foreground span{background-color:hsl(var(--opencx-secondary-foreground))}.\\[\\&_svg\\]\\:pointer-events-none svg{pointer-events:none}.\\[\\&_svg\\]\\:size-4 svg{width:1rem;height:1rem}.\\[\\&_svg\\]\\:shrink-0 svg{flex-shrink:0}.\\[\\&_svg\\]\\:text-muted-foreground\\/70 svg{color:hsl(var(--opencx-muted-foreground) / .7)}.\\[\\&_svg\\]\\:hover\\:text-primary:hover svg{color:hsl(var(--opencx-primary))}', Wo = ee.Provider, Ho = ee.Root, Ao = ee.Trigger, zt = E.forwardRef(({ className: e, sideOffset: t = 4, ...r }, n) => /* @__PURE__ */ o(
+  ee.Content,
+  {
+    ref: n,
+    sideOffset: t,
+    className: d(
+      "z-50 overflow-hidden max-w-xs rounded-xl bg-primary border text-primary-foreground p-2 text-center align-middle text-xs animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      e
+    ),
+    ...r
+  }
+));
+zt.displayName = ee.Content.displayName;
+function J({
+  children: e,
+  content: t,
+  side: r,
+  align: n
+}) {
+  const { disableTooltips: s } = S();
+  return !t || s ? e : /* @__PURE__ */ c(Ho, { children: [
+    /* @__PURE__ */ o(Ao, { asChild: !0, children: e }),
+    /* @__PURE__ */ o(
+      zt,
+      {
+        side: r,
+        align: n,
+        collisionPadding: 8,
+        avoidCollisions: !0,
+        children: t
+      }
+    )
+  ] });
+}
+const tt = 450;
+function B() {
+  const [e, t] = se.useState(() => (window.top || window).innerWidth < tt);
+  return se.useEffect(() => {
+    const r = window.top || window, n = () => {
+      t(r.innerWidth < tt);
+    };
+    return n(), r.addEventListener("resize", n), () => {
+      r.removeEventListener("resize", n);
+    };
+  }, []), { isSmallScreen: e };
+}
+const re = {
+  transitionTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
+  transitionDuration: "1000ms"
+};
+function X() {
+  var y, b, C, f, h, m, g, _, x, I, M, F, P, W, R, v, k, N, L, oe, Ie, Te, Me, De, Oe, Re, je, Ee, Fe, Pe, We, He, Ae, Be, Le, $e, Ye, qe, Xe, Ue, Ve, Ke, Ge, Ze, Je;
+  const { isSmallScreen: e } = B(), { theme: t, inline: r } = S(), n = (G) => r ? "100%" : G, s = (G, he) => e ? `100dv${G}` : he, a = (G, he) => n(s(G, he)), l = {
+    zIndex: ((y = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : y.zIndex) ?? 1e7,
+    offset: {
+      bottom: ((C = (b = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : b.offset) == null ? void 0 : C.bottom) ?? 20,
+      right: ((h = (f = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : f.offset) == null ? void 0 : h.right) ?? 20
+    },
+    size: {
+      button: ((g = (m = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : m.size) == null ? void 0 : g.button) ?? 48,
+      icon: ((x = (_ = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : _.size) == null ? void 0 : x.icon) ?? 24
+    }
+  }, i = {
+    palette: (t == null ? void 0 : t.palette) ?? "neutral",
+    primaryColor: (t == null ? void 0 : t.primaryColor) ?? "hsl(0 0% 9%)",
+    widgetTrigger: l,
+    widgetContentContainer: {
+      borderRadius: e ? "0px" : ((I = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : I.borderRadius) ?? "32px",
+      zIndex: ((M = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : M.zIndex) ?? l.zIndex + 1,
+      outline: ((F = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : F.outline) ?? "none",
+      // was: '1px solid'
+      outlineColor: ((P = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : P.outlineColor) ?? "hsl(0 0% 50% / .5)",
+      boxShadow: ((W = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : W.boxShadow) ?? "0 0px 100px 0px rgb(0 0 0 / 0.25)",
+      transitionProperty: ((R = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : R.transitionProperty) ?? "all",
+      transitionTimingFunction: ((v = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : v.transitionTimingFunction) ?? re.transitionTimingFunction,
+      transitionDuration: ((k = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : k.transitionDuration) ?? re.transitionDuration,
+      offset: {
+        side: e ? 0 : l.offset.bottom + l.size.button + U.y * 2 + (((L = (N = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : N.offset) == null ? void 0 : L.side) ?? 10),
+        align: e ? 0 : l.offset.right + (((Ie = (oe = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : oe.offset) == null ? void 0 : Ie.align) ?? 0)
+      }
+    },
+    screens: {
+      welcome: {
+        width: a("w", ((Me = (Te = t == null ? void 0 : t.screens) == null ? void 0 : Te.welcome) == null ? void 0 : Me.width) ?? "400px"),
+        // By setting minHeight to 1px, a nice animation will play from 1px to the dynamic height of the content of the screen
+        minHeight: a(
+          "h",
+          ((Oe = (De = t == null ? void 0 : t.screens) == null ? void 0 : De.welcome) == null ? void 0 : Oe.minHeight) ?? "1px"
+        )
+      },
+      sessions: {
+        width: a("w", ((je = (Re = t == null ? void 0 : t.screens) == null ? void 0 : Re.sessions) == null ? void 0 : je.width) ?? "450px"),
+        height: a("h", ((Fe = (Ee = t == null ? void 0 : t.screens) == null ? void 0 : Ee.sessions) == null ? void 0 : Fe.height) ?? "600px")
+      },
+      chat: {
+        width: a("w", ((We = (Pe = t == null ? void 0 : t.screens) == null ? void 0 : Pe.chat) == null ? void 0 : We.width) ?? "525px"),
+        height: a("h", ((Ae = (He = t == null ? void 0 : t.screens) == null ? void 0 : He.chat) == null ? void 0 : Ae.height) ?? "700px"),
+        withCanvas: {
+          width: a(
+            "w",
+            (($e = (Le = (Be = t == null ? void 0 : t.screens) == null ? void 0 : Be.chat) == null ? void 0 : Le.withCanvas) == null ? void 0 : $e.width) ?? "min(1050px, 100vw)"
+          ),
+          height: a(
+            "h",
+            ((Xe = (qe = (Ye = t == null ? void 0 : t.screens) == null ? void 0 : Ye.chat) == null ? void 0 : qe.withCanvas) == null ? void 0 : Xe.height) ?? "min(800px, 100vh)"
+          ),
+          transitionTimingFunction: ((Ke = (Ve = (Ue = t == null ? void 0 : t.screens) == null ? void 0 : Ue.chat) == null ? void 0 : Ve.withCanvas) == null ? void 0 : Ke.transitionTimingFunction) ?? re.transitionTimingFunction,
+          transitionDuration: ((Je = (Ze = (Ge = t == null ? void 0 : t.screens) == null ? void 0 : Ge.chat) == null ? void 0 : Ze.withCanvas) == null ? void 0 : Je.transitionDuration) ?? re.transitionDuration
+        }
+      }
+    }
+  }, p = {
+    // Subtract the offset.bottom twice so that it adds a bit of padding to the top
+    // Subtract the distance between the trigger and the widget content container
+    // Subtract the invisible padding of the trigger (for the wobble effect)
+    maxHeight: a(
+      "h",
+      `calc(
+        100vh 
+        - ${i.widgetTrigger.offset.bottom}px
+        - ${i.widgetContentContainer.offset.side}px
+        - ${U.y * 2}px
+      )`
+    ),
+    // Subtract the offset.right twice so that it adds a bit of padding to the left
+    maxWidth: a(
+      "w",
+      `calc(
+        100vw 
+        - ${i.widgetTrigger.offset.right * 2}px
+      )`
+    ),
+    minHeight: a(
+      "h",
+      `min(
+        ${i.screens.welcome.minHeight}, 
+        ${i.screens.sessions.height}, 
+        ${i.screens.chat.height}
+      )`
+    ),
+    minWidth: a(
+      "w",
+      `min(
+        ${i.screens.welcome.width}, 
+        ${i.screens.sessions.width}, 
+        ${i.screens.chat.width}
+      )`
+    )
+  };
+  return {
+    theme: i,
+    computed: p,
+    cssVars: Bo({
+      palette: i.palette,
+      primary: i.primaryColor
+    })
+  };
+}
+function Bo({
+  palette: e,
+  primary: t
+}) {
+  const r = Nt(e), n = et(t).toHsl(), s = et(t).isLight() ? r[950] : r[50];
+  return {
+    "--opencx-primary": `${n.h} ${n.s * 100}% ${n.l * 100}%`,
+    "--opencx-primary-foreground": s,
+    "--opencx-background": r[100],
+    "--opencx-foreground": r[950],
+    "--opencx-destructive": "0 72.2% 50.6%",
+    "--opencx-destructive-foreground": r[50],
+    "--opencx-accent": r[200],
+    "--opencx-accent-foreground": "var(--opencx-foreground)",
+    "--opencx-secondary": r[200],
+    "--opencx-secondary-foreground": "var(--opencx-foreground)",
+    "--opencx-muted": r[200],
+    "--opencx-muted-foreground": r[500],
+    "--opencx-input": r[300],
+    "--opencx-border": r[300],
+    "--opencx-ring": "var(--opencx-foreground)"
+  };
+}
+function Nt(e) {
+  const t = {
+    50: "0 0% 98%",
+    100: "0 0% 96.1%",
+    200: "0 0% 89.8%",
+    300: "0 0% 83.1%",
+    400: "0 0% 63.9%",
+    500: "0 0% 45.1%",
+    600: "0 0% 32.2%",
+    700: "0 0% 25.1%",
+    800: "0 0% 14.9%",
+    900: "0 0% 9%",
+    950: "0 0% 3.9%"
+  }, r = {
+    50: "60 9.1% 97.8%",
+    100: "60 4.8% 95.9%",
+    200: "20 5.9% 90%",
+    300: "24 5.7% 82.9%",
+    400: "24 5.4% 63.9%",
+    500: "25 5.3% 44.7%",
+    600: "33.3 5.5% 32.4%",
+    700: "30 6.3% 25.1%",
+    800: "12 6.5% 15.1%",
+    900: "24 9.8% 10%",
+    950: "20 14.3% 4.1%"
+  }, n = {
+    50: "0 0% 98%",
+    100: "240 4.8% 95.9%",
+    200: "240 5.9% 90%",
+    300: "240 4.9% 83.9%",
+    400: "240 5% 64.9%",
+    500: "240 3.8% 46.1%",
+    600: "240 5.2% 33.9%",
+    700: "240 5.3% 26.1%",
+    800: "240 3.7% 15.9%",
+    900: "240 5.9% 10%",
+    950: "240 10% 3.9%"
+  }, s = {
+    50: "210 40% 98%",
+    100: "210 40% 96.1%",
+    200: "214.3 31.8% 91.4%",
+    300: "212.7 26.8% 83.9%",
+    400: "215 20.2% 65.1%",
+    500: "215.4 16.3% 46.9%",
+    600: "215.3 19.3% 34.5%",
+    700: "215.3 25% 26.7%",
+    800: "217.2 32.6% 17.5%",
+    900: "222.2 47.4% 11.2%",
+    950: "222.2 84% 4.9%"
+  };
+  switch (e) {
+    case "neutral":
+      return t;
+    case "stone":
+      return r;
+    case "zinc":
+      return n;
+    case "slate":
+      return s;
+    default:
+      return D(e, Nt.name), t;
+  }
+}
+function St() {
+  const { contentIframeRef: e } = $(), { inline: t } = S();
+  return {
+    setWidth: (r) => {
+      var n;
+      (n = e == null ? void 0 : e.current) == null || n.style.setProperty(
+        "--opencx-widget-width",
+        t ? "100%" : r
+      );
+    },
+    setHeight: (r) => {
+      var n;
+      (n = e == null ? void 0 : e.current) == null || n.style.setProperty(
+        "--opencx-widget-height",
+        t ? "100%" : r
+      );
+    }
+  };
+}
+function Ne({
+  width: e,
+  height: t
+}) {
+  const { isSmallScreen: r } = B(), { setWidth: n, setHeight: s } = St();
+  le(() => {
+    e && n(e), t && s(t);
+  }, [r, t, e, n, s]);
+}
+const ot = Lt;
+function Q({
+  name: e,
+  className: t
+}) {
+  const r = (() => {
+    switch (e) {
+      case "Check":
+        return to;
+      case "CheckCheck":
+        return eo;
+      case "CircleCheck":
+        return pt;
+      case "CircleCheckBig":
+        return Qt;
+      case "CircleX":
+        return Jt;
+      case "Expand":
+        return Zt;
+      case "Maximize":
+        return Gt;
+      case "Maximize2":
+        return Kt;
+      case "Minimize":
+        return Vt;
+      case "Minimize2":
+        return Ut;
+      case "Shrink":
+        return Xt;
+      case "SquareCheck":
+        return qt;
+      case "SquareCheckBig":
+        return Yt;
+      case "SquareX":
+        return $t;
+      case "X":
+        return be;
+      case void 0:
+        return ot;
+      default:
+        return D(e, Q.name), ot;
+    }
+  })();
+  return /* @__PURE__ */ o(r, { className: d("size-4", t) });
+}
+function _t({
+  className: e,
+  ...t
+}) {
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: d("animate-pulse rounded-md bg-secondary", e),
+      ...t
+    }
+  );
+}
+function Se() {
+  var s;
+  const { data: e } = de(), {
+    routerState: { screen: t }
+  } = A(), { textContent: r } = S();
+  return (() => {
+    var a, l;
+    switch (t) {
+      case "chat":
+        return (a = r == null ? void 0 : r.chatScreen) == null ? void 0 : a.headerTitle;
+      case "sessions":
+        return (l = r == null ? void 0 : r.sessionsScreen) == null ? void 0 : l.headerTitle;
+      case "welcome":
+        return;
+      default:
+        D(t, Se.name);
+        return;
+    }
+  })() ?? ((s = e == null ? void 0 : e.data) == null ? void 0 : s.organizationName) ?? "Chat";
+}
+function Lo(e) {
+  switch (e) {
+    case "chat":
+      return w("chat/header");
+    case "sessions":
+      return w("sessions/header");
+    case "welcome":
+      return;
+    default:
+      D(e, Se.name);
+      return;
+  }
+}
+function $o() {
+  const { router: e } = S(), {
+    routerState: { screen: t },
+    toSessionsScreen: r
+  } = A();
+  return t !== "chat" || e != null && e.chatScreenOnly ? null : /* @__PURE__ */ o(
+    z,
+    {
+      variant: "ghost",
+      size: "fit",
+      className: "rounded-full",
+      onClick: r,
+      children: /* @__PURE__ */ o(oo, { className: "size-4" })
+    }
+  );
+}
+function Yo({
+  button: e
+}) {
+  const { setIsOpen: t } = V(), { isSmallScreen: r } = B();
+  return r && e.hideOnSmallScreen || !r && e.hideOnLargeScreen ? null : /* @__PURE__ */ o(
+    z,
+    {
+      variant: "ghost",
+      size: "fit",
+      className: "rounded-full",
+      onClick: () => t(!1),
+      children: /* @__PURE__ */ o(Q, { name: e.icon })
+    }
+  );
+}
+function ue({
+  button: e
+}) {
+  const [t, r] = j(!1), {
+    routerState: { screen: n }
+  } = A(), { isSmallScreen: s } = B(), { theme: a } = X(), { setWidth: l, setHeight: i } = St();
+  if (n !== "chat" && n !== "sessions") return null;
+  const p = (() => {
+    switch (n) {
+      case "chat":
+        return a.screens.chat.height;
+      case "sessions":
+        return a.screens.sessions.height;
+      default:
+        return D(n, ue.name), a.screens.chat.height;
+    }
+  })(), y = (() => {
+    switch (n) {
+      case "chat":
+        return a.screens.chat.width;
+      case "sessions":
+        return a.screens.sessions.width;
+      default:
+        return D(n, ue.name), a.screens.chat.width;
+    }
+  })(), b = () => {
+    r((C) => {
+      const f = !C;
+      return i(f ? "100vh" : p), l(f ? `max(40vw, ${y})` : y), f;
+    });
+  };
+  return s && e.hideOnSmallScreen || !s && e.hideOnLargeScreen ? null : /* @__PURE__ */ o(
+    z,
+    {
+      variant: "ghost",
+      size: "fit",
+      className: "rounded-full",
+      onClick: b,
+      children: /* @__PURE__ */ o(
+        Q,
+        {
+          name: e.icon || (t ? e.shrinkIcon : e.expandIcon)
+        }
+      )
+    }
+  );
+}
+function It({
+  button: e
+}) {
+  var _, x;
+  const [t, r] = j(!1), { widgetCtx: n } = $(), { setIsOpen: s } = V(), { resolveSession: a, sessionState: l } = Y(), { isSmallScreen: i } = B(), p = !l.session, y = ((_ = l.session) == null ? void 0 : _.isOpened) === !1, b = e.onResolved || "stay-in-chat", C = e.behaviorBeforeSessionCreation || "disabled", f = e.behaviorIfSessionIsResolved || "disabled", h = !!(l.isResolvingSession || p && C === "disabled" || y && f === "disabled"), m = async () => {
+    const { success: I, error: M } = await a();
+    if (r(!1), !I) return console.error(M);
+    switch (b) {
+      case "stay-in-chat":
+        return;
+      case "close-widget":
+        s(!1);
+        break;
+      case "reset-chat":
+        n.resetChat();
+        break;
+      case "reset-chat-and-close-widget":
+        s(!1), n.resetChat();
+        break;
+      default:
+        D(b, It.name);
+        break;
+    }
+  }, g = () => {
+    if (p)
+      switch (C) {
+        case "disabled":
+          return;
+        case "close-widget":
+          s(!1);
+          break;
+        default:
+          D(
+            C,
+            g.name
+          );
+      }
+    if (y)
+      switch (f) {
+        case "disabled":
+          return;
+        case "close-widget":
+          s(!1);
+          break;
+        case "reset-chat":
+          n.resetChat();
+          break;
+        case "reset-chat-and-close-widget":
+          s(!1), n.resetChat();
+          break;
+        default:
+          D(
+            f,
+            g.name
+          );
+      }
+  };
+  return i && e.hideOnSmallScreen || !i && e.hideOnLargeScreen ? null : ((x = e.confirmation) == null ? void 0 : x.type) === "modal" && !y && !p ? /* @__PURE__ */ c(wt, { open: t, onOpenChange: r, children: [
+    /* @__PURE__ */ o(gt, { asChild: !0, children: /* @__PURE__ */ o(
+      z,
+      {
+        variant: "ghost",
+        size: "fit",
+        className: "rounded-full",
+        disabled: h,
+        children: /* @__PURE__ */ o(Q, { name: e.icon })
+      }
+    ) }),
+    /* @__PURE__ */ c(xe, { children: [
+      /* @__PURE__ */ o(ft, { children: /* @__PURE__ */ o(ye, { children: e.confirmation.title || "Close conversation" }) }),
+      /* @__PURE__ */ o(vt, { children: /* @__PURE__ */ o(xt, { children: e.confirmation.description || "Are you sure you want to close this conversation?" }) }),
+      /* @__PURE__ */ c(bt, { children: [
+        /* @__PURE__ */ o(
+          z,
+          {
+            variant: "secondary",
+            onClick: () => r(!1),
+            disabled: l.isResolvingSession,
+            children: e.confirmation.cancelButtonText || "No"
+          }
+        ),
+        /* @__PURE__ */ o(
+          z,
+          {
+            variant: "destructive",
+            onClick: m,
+            disabled: l.isResolvingSession,
+            children: e.confirmation.confirmButtonText || "Yes"
+          }
+        )
+      ] })
+    ] })
+  ] }) : /* @__PURE__ */ o(
+    z,
+    {
+      variant: "ghost",
+      size: "fit",
+      className: "rounded-full",
+      onClick: y || p ? g : m,
+      disabled: h,
+      children: /* @__PURE__ */ o(Q, { name: e.icon })
+    }
+  );
+}
+function fe({ button: e }) {
+  switch (e.functionality) {
+    case "close-widget":
+      return /* @__PURE__ */ o(Yo, { button: e });
+    case "expand-shrink":
+      return /* @__PURE__ */ o(ue, { button: e });
+    case "resolve-session":
+      return /* @__PURE__ */ o(It, { button: e });
+    default:
+      return D(e, fe.name), null;
+  }
+}
+const qo = {
+  functionality: "close-widget",
+  hideOnLargeScreen: !0,
+  icon: "X"
+};
+function Xo() {
+  const {
+    routerState: { screen: e }
+  } = A(), { headerButtons: t } = S(), r = e === "chat" ? t == null ? void 0 : t.chatScreen : e === "sessions" ? t == null ? void 0 : t.sessionsScreen : [];
+  return !r || r.length === 0 ? /* @__PURE__ */ o(fe, { button: qo }) : /* @__PURE__ */ o(nt, { children: r.map((n) => /* @__PURE__ */ o(
+    fe,
+    {
+      button: n
+    },
+    `${n.functionality}-${n.icon}`
+  )) });
+}
+function Tt() {
+  const {
+    routerState: { screen: e }
+  } = A(), { isLoading: t } = de(), r = ve(), n = Lo(e), s = Se();
+  return /* @__PURE__ */ o("header", { ...n, className: "py-2 px-4 shrink-0", children: /* @__PURE__ */ c("div", { dir: r, className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ o($o, {}),
+    /* @__PURE__ */ o(
+      "div",
+      {
+        className: d(
+          "flex-1 h-8 flex items-center",
+          e === "sessions" && "pl-2"
+        ),
+        children: /* @__PURE__ */ o(T, { mode: "wait", children: t ? /* @__PURE__ */ o(u, { snapExit: !0, children: /* @__PURE__ */ o(_t, { className: "h-5 w-1/2" }) }, "skeleton") : /* @__PURE__ */ o(u, { children: /* @__PURE__ */ o("h2", { className: "font-semibold", children: s }) }, "organization-name") })
+      }
+    ),
+    /* @__PURE__ */ o(Xo, {})
+  ] }) });
+}
+function Mt({ className: e }) {
+  return /* @__PURE__ */ o(ro, { className: d("size-4 animate-spin", e) });
+}
+function Uo() {
+  const {
+    messagesState: { isInitialFetchLoading: e }
+  } = q(), { isSmallScreen: t } = B(), { activeMode: r, Component: n } = it();
+  return {
+    isCanvasOpen: !e && !t && !!r && !!n
+  };
+}
+function Vo() {
+  const { activeMode: e, Component: t } = it(), { sendMessage: r } = q(), { createStateCheckpoint: n } = Y(), [s, a] = j(!1), l = async (i) => {
+    try {
+      a(!0), await r(i);
+    } catch (p) {
+      console.error(p);
+    } finally {
+      a(!1);
+    }
+  };
+  return !e || !t ? null : /* @__PURE__ */ o(
+    t,
+    {
+      react: se,
+      mode: e,
+      createStateCheckpoint: n,
+      sendMessage: l,
+      isSendingMessage: s
+    }
+  );
+}
+const Ko = {
+  "write-a-message": "اكتب رسالة...",
+  "session-closed-lead": "تم حل مشكلتك!",
+  "new-conversation": "محادثة جديدة",
+  "welcome-title": "مرحبًا بك في دردشة الدعم الخاصة بنا",
+  "welcome-description": "نحن هنا للمساعدة! ابدأ محادثة وسنرد عليك في أقرب وقت ممكن.",
+  "your-name": "اسمك",
+  "your-email": "عنوان بريدك الإلكتروني",
+  "start-chat": "تحدث إلى الدعم",
+  "starting-chat": "جاري الاتصال...",
+  "i-need-more-help": "أحتاج المزيد من المساعدة",
+  "this-was-helpful": "كان هذا مفيدًا",
+  optional: "اختياري",
+  "no-conversations-yet": "لا يوجد محادثات",
+  "back-to-conversations": "العودة إلى المحادثات",
+  "closed-conversations": "المحادثات المغلقة"
+}, Go = {
+  "write-a-message": "Nachricht schreiben...",
+  "session-closed-lead": "Ihr Problem wurde gelöst!",
+  "new-conversation": "Neue Konversation",
+  "welcome-title": "Willkommen in unserem Support-Chat",
+  "welcome-description": "Wir sind hier, um zu helfen! Beginnen Sie ein Gesprách und wir werden so schnell wie mogelijk antworten.",
+  "your-name": "Ihr Name",
+  "your-email": "Ihre E-Mail-Adresse",
+  "start-chat": "Mit dem Support sprechen",
+  "starting-chat": "Verbindung wird hergestellt...",
+  "i-need-more-help": "Ich brauche weitere Hilfe",
+  "this-was-helpful": "Dies war hilfreich",
+  optional: "Optional",
+  "no-conversations-yet": "noch keine Gespräche",
+  "back-to-conversations": "Zurück zur Konversationen",
+  "closed-conversations": "Geschlossene Konversationen"
+}, Zo = {
+  "write-a-message": "Write a message...",
+  "session-closed-lead": "Your issue has been resolved!",
+  "new-conversation": "New conversation",
+  "welcome-title": "Welcome to our support chat",
+  "welcome-description": "We're here to help! Start a conversation and we'll get back to you as soon as possible.",
+  "your-name": "Your name",
+  "your-email": "Your email address",
+  "start-chat": "Talk to support",
+  "starting-chat": "Connecting...",
+  "i-need-more-help": "I need more help",
+  "this-was-helpful": "This was helpful",
+  optional: "Optional",
+  "no-conversations-yet": "No conversations yet",
+  "back-to-conversations": "Back to conversations",
+  "closed-conversations": "Closed conversations"
+}, Jo = {
+  "write-a-message": "Écrivez un message...",
+  "session-closed-lead": "Votre problème a été résolu !",
+  "new-conversation": "Nouvelle conversation",
+  "welcome-title": "Bienvenue dans notre chat de support",
+  "welcome-description": "Nous sommes là pour vous aider ! Commencez une conversation et nous vous répondrons dès que possible.",
+  "your-name": "Votre nom",
+  "your-email": "Votre adresse e-mail",
+  "start-chat": "Parler au support",
+  "starting-chat": "Connexion...",
+  "i-need-more-help": "Je besoin d'aide plus",
+  "this-was-helpful": "C'était utile",
+  optional: "Optionnel",
+  "no-conversations-yet": "Aucune conversation pour le moment",
+  "back-to-conversations": "Retour aux conversations",
+  "closed-conversations": "Conversations fermées"
+}, Qo = {
+  "write-a-message": "Schrijf een bericht...",
+  "session-closed-lead": "Uw probleem is opgelost!",
+  "new-conversation": "Nieuw gesprek",
+  "welcome-title": "Welkom bij onze supportchat",
+  "welcome-description": "We zijn hier om te helpen! Begin een gesprek en we nemen zo snel mogelijk contact met u op.",
+  "your-name": "Uw naam",
+  "your-email": "Uw e-mailadres",
+  "start-chat": "Praat met ondersteuning",
+  "starting-chat": "Verbinding maken...",
+  "i-need-more-help": "Ik heb nog meer hulp nodig",
+  "this-was-helpful": "Mijn vraag is opgelost",
+  optional: "Optioneel",
+  "no-conversations-yet": "Nog geen gesprekken",
+  "back-to-conversations": "Terug naar gesprekken",
+  "closed-conversations": "Afgesloten gesprekken"
+}, er = {
+  "write-a-message": "Escreva uma mensagem...",
+  "session-closed-lead": "Seu problema foi resolvido!",
+  "new-conversation": "Nova conversa",
+  "welcome-title": "Bem-vindo ao nosso chat de suporte",
+  "welcome-description": "Estamos aqui para ajudar! Inicie uma conversa e responderemos o mais rápido possível.",
+  "your-name": "Seu nome",
+  "your-email": "Seu endereço de email",
+  "start-chat": "Falar com o suporte",
+  "starting-chat": "Conectando...",
+  "i-need-more-help": "preciso de mais ajuda",
+  "this-was-helpful": "Isso foi útil",
+  optional: "Opcional",
+  "no-conversations-yet": "Nenhuma conversa ainda",
+  "back-to-conversations": "Voltar para conversas",
+  "closed-conversations": "Conversas fechadas"
+}, tr = {
+  "write-a-message": "Escribe un mensaje...",
+  "session-closed-lead": "¡Tu problema fue resuelto!",
+  "new-conversation": "Nueva conversación",
+  "welcome-title": "Bienvenido a nuestro chat de soporte",
+  "welcome-description": "¡Estamos aquí para ayudarte! Inicia una conversación y responderemos lo antes posible.",
+  "your-name": "Tu nombre",
+  "your-email": "Tu correo electrónico",
+  "start-chat": "Hablar con soporte",
+  "starting-chat": "Conectando...",
+  "i-need-more-help": "Necesito más ayuda",
+  "this-was-helpful": "Esto fue útil",
+  optional: "Opcional",
+  "no-conversations-yet": "Sin conversaciones aún",
+  "back-to-conversations": "Volver a conversaciones",
+  "closed-conversations": "Conversaciones cerradas"
+}, or = {
+  "write-a-message": "Bir mesaj yazın...",
+  "session-closed-lead": "Sorununuz çözüldü!",
+  "new-conversation": "Yeni konuşma",
+  "welcome-title": "Destek sohbetimize hoş geldiniz",
+  "welcome-description": "Yardım etmek için buradayız! Bir konuşma başlatın, en kısa sürede size geri döneceğiz.",
+  "your-name": "Adınız",
+  "your-email": "E-posta adresiniz",
+  "start-chat": "Destekle konuş",
+  "starting-chat": "Bağlanıyor...",
+  "i-need-more-help": "Daha fazla yardıma ihtiyacım var",
+  "this-was-helpful": "Bu yardımcı oldu",
+  optional: "İsteğe bağlı",
+  "no-conversations-yet": "Henüz konuşma yok",
+  "back-to-conversations": "Konuşmalara geri dön",
+  "closed-conversations": "Kapatılan konuşmalar"
+}, Dt = {
+  en: Zo,
+  ar: Ko,
+  nl: Qo,
+  fr: Jo,
+  de: Go,
+  pt: er,
+  es: tr,
+  tr: or
+}, rr = Object.keys(Dt), nr = (e) => rr.includes(e);
+function sr(e, t) {
+  const r = Dt[t];
+  return r && r[e] || "";
+}
+function te() {
+  const {
+    widgetCtx: { config: e }
+  } = $();
+  return at(() => {
+    const r = nr(e.language) ? e.language : "en";
+    return {
+      get: (n) => sr(n, r),
+      lang: r
+    };
+  }, [e.language]);
+}
+function _e({
+  suggestion: e,
+  className: t,
+  ...r
+}) {
+  const { sendMessage: n } = q(), s = () => {
+    const a = e.trim();
+    a && n({ content: a });
+  };
+  return /* @__PURE__ */ o(
+    z,
+    {
+      ...w("chat/suggested_reply_btn"),
+      size: "sm",
+      className: d("rounded-xl w-fit", t),
+      ...r,
+      onClick: s,
+      children: e
+    }
+  );
+}
+function ar() {
+  const e = te(), t = [
+    e.get("i-need-more-help"),
+    e.get("this-was-helpful")
+  ];
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      ...w("chat/might_solve_user_issue_suggested_replies_container"),
+      className: "flex items-center gap-2 p-2 pb-0 flex-wrap",
+      children: t.map((r) => /* @__PURE__ */ o(
+        _e,
+        {
+          suggestion: r,
+          className: "flex-1"
+        },
+        r
+      ))
+    }
+  );
+}
+function ir({
+  file: { status: e, file: t, error: r },
+  onCancel: n
+}) {
+  const [s, a] = j(
+    null
+  );
+  le(() => {
+    if (!t.type.startsWith("image/")) return;
+    const p = new FileReader();
+    return p.onload = () => a(p.result), p.onerror = () => console.error("Error reading file"), p.readAsDataURL(t), () => p.abort();
+  }, [t]);
+  const l = () => {
+    switch (e) {
+      case "uploading":
+        return /* @__PURE__ */ o(co, { className: "size-4 animate-spin" });
+      case "error":
+        return /* @__PURE__ */ o(lo, { className: "size-4 text-destructive" });
+      default:
+        return null;
+    }
+  }, i = () => {
+    const p = t.type.split("/")[0];
+    return p === "image" && s ? /* @__PURE__ */ o(
+      "img",
+      {
+        src: typeof s == "string" ? s : "",
+        className: "object-cover bg-secondary size-full",
+        alt: t.name
+      }
+    ) : p === "audio" ? /* @__PURE__ */ o(po, {}) : p === "video" ? /* @__PURE__ */ o(ho, {}) : /* @__PURE__ */ o(mo, {});
+  };
+  return /* @__PURE__ */ o(
+    J,
+    {
+      side: "bottom",
+      content: e === "error" ? /* @__PURE__ */ c("span", { className: "text-destructive", children: [
+        "Failed to upload: ",
+        r
+      ] }) : t.name,
+      children: /* @__PURE__ */ c(
+        "div",
+        {
+          className: d(
+            e === "uploading" && "opacity-50",
+            "group",
+            "size-12 border rounded-2xl overflow-hidden relative",
+            "flex items-center justify-center shrink-0"
+          ),
+          children: [
+            /* @__PURE__ */ o("div", { className: "absolute inset-0 flex items-center justify-center", children: l() }),
+            /* @__PURE__ */ o(
+              "button",
+              {
+                type: "button",
+                className: d(
+                  "absolute bg-black/50 inset-0 size-full z-10 opacity-0",
+                  "flex items-center justify-center",
+                  "opacity-0 group-hover:opacity-100 transition"
+                ),
+                onClick: n,
+                children: /* @__PURE__ */ o(be, { className: "size-4 text-primary-foreground" })
+              }
+            ),
+            /* @__PURE__ */ o(i, {})
+          ]
+        }
+      )
+    }
+  );
+}
+function lr() {
+  var R;
+  const { isSmallScreen: e } = B(), t = ce(null), { sendMessage: r } = q(), { sessionState: n } = Y(), s = te(), a = ve(), [l, i] = j(""), {
+    allFiles: p,
+    emptyTheFiles: y,
+    handleCancelUpload: b,
+    appendFiles: C,
+    isUploading: f,
+    successFiles: h
+  } = Pt(), m = !!((R = n.session) != null && R.isHandedOff), { isAwaitingBotReply: g } = lt(), _ = (v) => {
+    C(v);
+  }, x = !l.trim() && h.length === 0, I = async () => {
+    if (g || x) return;
+    f && console.info("please wait for the file(s) to upload");
+    const v = l.trim();
+    r({
+      content: v,
+      attachments: h.flatMap(
+        (k) => k.fileUrl ? [
+          {
+            url: k.fileUrl,
+            type: k.file.type,
+            name: k.file.name,
+            id: k.id,
+            size: k.file.size
+          }
+        ] : []
+      )
+    }), i(""), y();
+  }, {
+    getRootProps: M,
+    getInputProps: F,
+    open: P
+  } = No({
+    onDrop: _,
+    noClick: !0,
+    onDropRejected() {
+      console.error("unsupported file type, or the file is too large");
+    },
+    maxSize: 5 * 1024 * 1024,
+    accept: m ? {
+      "text/*": [".txt"],
+      "image/*": [".png", ".jpg", ".jpeg", ".gif"],
+      "application/pdf": [".pdf"]
+    } : {
+      "image/png": [".png"],
+      "image/jpeg": [".jpg", ".jpeg"],
+      "image/gif": [".gif"],
+      "image/webp": [".webp"]
+    }
+  }), W = (v) => {
+    const k = v.clipboardData;
+    k && k.files.length > 0 && _(Array.from(k.files));
+  };
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      ...w("chat/input_box/root"),
+      className: "p-2 relative space-y-1",
+      ...M(),
+      children: [
+        /* @__PURE__ */ o("input", { ...F() }),
+        /* @__PURE__ */ c(
+          "div",
+          {
+            ...w("chat/input_box/inner_root"),
+            className: d(
+              "transition-all",
+              "bg-white",
+              // 'border',
+              "relative rounded-3xl flex flex-col gap-2 p-2",
+              "hover:border-primary focus-within:border-primary"
+            ),
+            children: [
+              /* @__PURE__ */ c(
+                "div",
+                {
+                  ...w("chat/input_box/textarea_and_attachments_container"),
+                  className: "flex flex-col gap-2",
+                  children: [
+                    p.length > 0 && /* @__PURE__ */ o(
+                      "div",
+                      {
+                        ...w("chat/input_box/attachments_container"),
+                        className: "flex items-center gap-1",
+                        children: /* @__PURE__ */ o(T, { mode: "popLayout", children: p.map((v) => /* @__PURE__ */ o(u, { snapExit: !0, children: /* @__PURE__ */ o(
+                          ir,
+                          {
+                            onCancel: () => b(v.id),
+                            file: v
+                          }
+                        ) }, v.id)) })
+                      }
+                    ),
+                    /* @__PURE__ */ o(
+                      "textarea",
+                      {
+                        ...w("chat/input_box/textarea"),
+                        onPaste: W,
+                        ref: t,
+                        id: "chat-input",
+                        dir: a,
+                        value: l,
+                        rows: 3,
+                        className: d(
+                          /** Match the border radius of the container */
+                          // INPUT_CONTAINER_B_RADIUS,
+                          "max-h-16 [field-sizing:content]",
+                          "w-full resize-none px-2",
+                          p.length === 0 && "pt-1",
+                          "bg-transparent outline-none",
+                          "placeholder:text-muted-foreground",
+                          "rtl:placeholder:text-right",
+                          // 16px on mobiles prevents auto-zoom on the input when focused
+                          e ? "text-[16px]" : "text-sm"
+                        ),
+                        onChange: (v) => i(v.target.value),
+                        onKeyDown: async (v) => {
+                          v.key === "Enter" && !v.shiftKey && (v.preventDefault(), I());
+                        },
+                        placeholder: s.get("write-a-message")
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ c("div", { dir: a, className: "gap-2 flex justify-between rtl:text-right", children: [
+                /* @__PURE__ */ o(
+                  J,
+                  {
+                    side: "top",
+                    align: "start",
+                    content: "attach files, (maximum size 5mb)",
+                    children: /* @__PURE__ */ o(
+                      z,
+                      {
+                        onClick: P,
+                        size: "fit",
+                        variant: "ghost",
+                        className: d(
+                          "rounded-full size-8 flex items-center justify-center p-0 overflow-hidden"
+                        ),
+                        children: /* @__PURE__ */ o(T, { mode: "wait", children: m ? /* @__PURE__ */ o(u, { children: /* @__PURE__ */ o(no, { className: "size-4" }) }, "paper-clip") : /* @__PURE__ */ o(u, { children: /* @__PURE__ */ o(so, { className: "size-4" }) }, "image-icon") })
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ o(J, { content: "send message", side: "top", align: "end", children: /* @__PURE__ */ o(
+                  z,
+                  {
+                    size: "fit",
+                    onClick: I,
+                    disabled: g || f || x,
+                    className: "rounded-full size-8 flex items-center justify-center p-0",
+                    children: /* @__PURE__ */ o(T, { mode: "wait", children: g || f ? /* @__PURE__ */ o(u, { snapExit: !0, children: /* @__PURE__ */ o(ao, { className: "size-4 animate-spin animate-iteration-infinite" }) }, "loading") : /* @__PURE__ */ o(u, { snapExit: !0, children: /* @__PURE__ */ o(io, { className: "size-4" }) }, "send") })
+                  }
+                ) })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function cr() {
+  const { widgetCtx: e } = $(), { router: t } = S(), { canCreateNewSession: r } = Y(), { toSessionsScreen: n } = A(), s = te();
+  return /* @__PURE__ */ o("div", { className: "p-2", children: /* @__PURE__ */ c("div", { className: "p-2 bg-muted rounded-3xl space-y-2", children: [
+    /* @__PURE__ */ c("div", { className: "pl-2 flex items-center gap-1", children: [
+      /* @__PURE__ */ o(pt, { className: "size-4 text-emerald-600" }),
+      /* @__PURE__ */ o("h2", { className: "text-sm font-medium", dir: "auto", children: s.get("session-closed-lead") })
+    ] }),
+    /* @__PURE__ */ o("div", { children: r || t != null && t.chatScreenOnly ? /* @__PURE__ */ o(
+      z,
+      {
+        onClick: e.resetChat,
+        className: "rounded-2xl w-full",
+        children: s.get("new-conversation")
+      }
+    ) : /* @__PURE__ */ o(z, { onClick: n, className: "rounded-2xl w-full", children: s.get("back-to-conversations") }) })
+  ] }) });
+}
+function dr() {
+  var l;
+  const { initialQuestions: e, initialQuestionsPosition: t, thisWasHelpfulOrNot: r } = S(), { sessionState: n } = Y(), { messagesState: s } = q(), a = s.messages.length === 0;
+  return /* @__PURE__ */ o("footer", { children: /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(T, { mode: "wait", children: n.session && !((l = n.session) != null && l.isOpened) ? /* @__PURE__ */ o(
+    u,
+    {
+      className: "overflow-hidden",
+      overrides: {
+        initial: { height: 0 },
+        animate: { height: "auto" },
+        exit: { height: 0 }
+      },
+      children: /* @__PURE__ */ o(cr, {})
+    },
+    "session-closed"
+  ) : /* @__PURE__ */ c(
+    u,
+    {
+      className: "overflow-hidden",
+      overrides: {
+        initial: { height: 0 },
+        animate: { height: "auto" },
+        exit: { height: 0 }
+      },
+      children: [
+        s.lastAIResMightSolveUserIssue && (r == null ? void 0 : r.enabled) !== !1 && /* @__PURE__ */ o(ar, {}),
+        a && e && t !== "below-initial-messages" && /* @__PURE__ */ o("div", { className: "flex items-center flex-row justify-end gap-2 flex-wrap px-2", children: e == null ? void 0 : e.map((i, p) => /* @__PURE__ */ o(
+          _e,
+          {
+            suggestion: i
+          },
+          `${i}-${p}`
+        )) }),
+        /* @__PURE__ */ o(lr, {})
+      ]
+    },
+    "chat-input"
+  ) }) }) });
+}
+function pr({
+  isFirstInGroup: e,
+  isLastInGroup: t,
+  isAloneInGroup: r,
+  ...n
+}) {
+  const { componentStore: s } = $();
+  if (n.data.action) {
+    const l = s.getComponent(n.data.action.name);
+    if (l)
+      return /* @__PURE__ */ o(
+        l,
+        {
+          ...n,
+          id: n.id,
+          isFirstInGroup: e,
+          isLastInGroup: t,
+          isAloneInGroup: r
+        }
+      );
+  }
+  const a = s.getComponent(n.component);
+  return a ? /* @__PURE__ */ o(
+    a,
+    {
+      ...n,
+      id: n.id,
+      isFirstInGroup: e,
+      isLastInGroup: t,
+      isAloneInGroup: r
+    }
+  ) : /* @__PURE__ */ o(
+    ae,
+    {
+      ...n,
+      isFirstInGroup: e,
+      isLastInGroup: t,
+      isAloneInGroup: r
+    }
+  );
+}
+function we({
+  messages: e,
+  agent: t,
+  suggestedReplies: r
+}) {
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      ...w("chat/agent_msg_group/root"),
+      className: d("flex items-end gap-2"),
+      children: [
+        /* @__PURE__ */ o(J, { content: t == null ? void 0 : t.name, side: "right", align: "end", children: /* @__PURE__ */ o(
+          ge,
+          {
+            ...w("chat/agent_msg_group/root/avatar"),
+            agent: t,
+            className: "hidden"
+          }
+        ) }),
+        /* @__PURE__ */ c("div", { className: d("flex-1 flex flex-col gap-2"), children: [
+          /* @__PURE__ */ c(
+            "div",
+            {
+              ...w("chat/agent_msg_group/avatar_and_msgs/root"),
+              className: d("flex items-end gap-2"),
+              children: [
+                /* @__PURE__ */ o(J, { content: t == null ? void 0 : t.name, side: "right", align: "end", children: /* @__PURE__ */ o(
+                  ge,
+                  {
+                    ...w("chat/agent_msg_group/avatar_and_msgs/avatar"),
+                    agent: t
+                  }
+                ) }),
+                /* @__PURE__ */ o(
+                  "div",
+                  {
+                    ...w("chat/agent_msg_group/avatar_and_msgs/msgs"),
+                    className: d("flex-1 flex flex-col gap-1"),
+                    children: e.map((n, s, a) => /* @__PURE__ */ o(
+                      pr,
+                      {
+                        isFirstInGroup: s === 0,
+                        isLastInGroup: s === a.length - 1,
+                        isAloneInGroup: a.length === 1,
+                        ...n
+                      },
+                      n.id
+                    ))
+                  }
+                )
+              ]
+            }
+          ),
+          r && r.length > 0 && /* @__PURE__ */ o(
+            "div",
+            {
+              ...w("chat/agent_msg_group/suggestions"),
+              className: d("flex flex-col gap-1 pl-8"),
+              children: r == null ? void 0 : r.map((n, s) => /* @__PURE__ */ o(
+                _e,
+                {
+                  suggestion: n
+                },
+                `${n}-${s}`
+              ))
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function hr({
+  message: e,
+  isFirstInGroup: t,
+  isLastInGroup: r,
+  isAloneInGroup: n
+}) {
+  var s;
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      ...w("chat/user_msg/root"),
+      className: "w-5/6 flex flex-col items-end gap-1",
+      children: [
+        e.attachments && e.attachments.length > 0 && /* @__PURE__ */ o("div", { className: "w-full flex gap-1 flex-wrap justify-end", children: (s = e.attachments) == null ? void 0 : s.map((a) => /* @__PURE__ */ o(yt, { attachment: a }, a.id)) }),
+        e.content.length > 0 && /* @__PURE__ */ o(
+          "div",
+          {
+            ...w("chat/user_msg/msg"),
+            "data-first": t,
+            "data-last": r,
+            "data-alone": n,
+            className: d(
+              "transition-all",
+              "w-fit py-3 px-4 rounded-3xl text-sm",
+              "bg-primary text-primary-foreground",
+              "break-words [word-break:break-word]",
+              // `[word-break:break-word]` is deprecated but works in the browser, while `break-words` which is `[overflow-wrap: break-word]` does not work
+              "whitespace-pre-wrap",
+              // We're using the booleans directly here, not the data attributes, to make any external styling more specific than this
+              t && !n && "rounded-br-md",
+              r && !n && "rounded-tr-md",
+              !t && !r && !n && "rounded-r-md"
+            ),
+            children: e.content
+          }
+        )
+      ]
+    }
+  );
+}
+function mr({
+  messages: e
+}) {
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      ...w("chat/user_msg_group/root"),
+      className: d("group", "flex flex-col gap-1 justify-end items-end"),
+      children: e.map((t, r, n) => /* @__PURE__ */ o(
+        hr,
+        {
+          message: t,
+          isFirstInGroup: r === 0,
+          isLastInGroup: r === n.length - 1,
+          isAloneInGroup: n.length === 1
+        },
+        t.id
+      ))
+    }
+  );
+}
+function wr(e) {
+  const t = [];
+  let r = null;
+  return e.forEach((n) => {
+    var s, a, l, i;
+    (!r || ((s = r[0]) == null ? void 0 : s.type) !== n.type) && (r = [], t.push(r)), ((a = r[0]) == null ? void 0 : a.type) === "FROM_AGENT" && n.type === "FROM_AGENT" && ((l = n.agent) == null ? void 0 : l.id) !== ((i = r[0].agent) == null ? void 0 : i.id) && (r = [], t.push(r)), r.push(n);
+  }), t;
+}
+function gr(e) {
+  var t;
+  return ((t = e == null ? void 0 : e[0]) == null ? void 0 : t.type) === "FROM_USER";
+}
+function ur(e) {
+  var t;
+  return ((t = e == null ? void 0 : e[0]) == null ? void 0 : t.type) === "FROM_BOT";
+}
+function fr(e) {
+  var t;
+  return ((t = e == null ? void 0 : e[0]) == null ? void 0 : t.type) === "FROM_AGENT";
+}
+function vr() {
+  const {
+    messagesState: { messages: e }
+  } = q(), { isAwaitingBotReply: t } = lt(), { componentStore: r } = $(), n = S(), { initialQuestions: s, initialQuestionsPosition: a } = n, l = at(
+    () => wr(e),
+    [e]
+  ), i = n.persistentInitialMessages || [], p = (() => {
+    var h;
+    return e.length ? ((h = n.advancedInitialMessages) == null ? void 0 : h.filter((m) => !!m.persistent)) || [] : n.advancedInitialMessages || [];
+  })(), y = (() => {
+    var h;
+    return p.length ? [] : e.length ? [] : (h = n.initialMessages) != null && h.length ? n.initialMessages : ["Hello, how can I help you?"];
+  })(), b = r.getComponent(
+    "loading"
+  ), C = ce(null);
+  function f() {
+    setTimeout(() => {
+      const h = C.current;
+      h && (h.scrollTop = h.scrollHeight);
+    }, 0);
+  }
+  return le(() => {
+    f();
+  }, [e]), /* @__PURE__ */ c(
+    "div",
+    {
+      ...w("chat/msgs/root"),
+      ref: C,
+      className: "max-h-full scroll-smooth relative flex-1 py-2 px-4 flex flex-col gap-2 overflow-auto",
+      children: [
+        /* @__PURE__ */ o("div", { ...w("chat/persistent_initial_msgs/root"), children: i.map((h, m, g) => /* @__PURE__ */ o(
+          ae,
+          {
+            component: "bot_message",
+            data: { message: h },
+            id: h,
+            type: "FROM_BOT",
+            timestamp: Date.now().toString(),
+            dataComponentNames: {
+              messageContainer: "chat/persistent_initial_msg/root",
+              message: "chat/persistent_initial_msg/msg"
+            },
+            classNames: {
+              messageContainer: d(
+                "w-full flex flex-col items-center text-center"
+              ),
+              message: "w-full bg-transparent border-none shadow-none text-xs"
+            },
+            isFirstInGroup: m === 0,
+            isLastInGroup: m === g.length - 1,
+            isAloneInGroup: g.length === 1
+          },
+          `${h}-${m}`
+        )) }),
+        p.length > 0 && /* @__PURE__ */ o(
+          we,
+          {
+            messages: p.map(
+              ({ message: h }, m) => ({
+                component: "bot_message",
+                data: { message: h },
+                id: `${m}-${h}`,
+                type: "FROM_BOT",
+                timestamp: Date.now().toString()
+              })
+            ),
+            suggestedReplies: e.length === 0 && a === "below-initial-messages" ? s : void 0,
+            agent: n.bot ? { ...n.bot, isAi: !0, id: null } : void 0
+          }
+        ),
+        e.length === 0 && y.length > 0 && /* @__PURE__ */ o(
+          we,
+          {
+            messages: y.map(
+              (h, m) => ({
+                component: "bot_message",
+                data: { message: h },
+                id: `${m}-${h}`,
+                type: "FROM_BOT",
+                timestamp: Date.now().toString()
+              })
+            ),
+            suggestedReplies: a === "below-initial-messages" ? s : void 0,
+            agent: n.bot ? { ...n.bot, isAi: !0, id: null } : void 0
+          }
+        ),
+        l.map((h) => {
+          var _, x, I;
+          const m = (_ = h == null ? void 0 : h[0]) == null ? void 0 : _.type, g = (x = h[0]) == null ? void 0 : x.id;
+          if (!m || !g) return null;
+          if (gr(h))
+            return /* @__PURE__ */ o(mr, { messages: h }, g);
+          if (ur(h) || fr(h)) {
+            const M = (I = h[0]) == null ? void 0 : I.agent;
+            return /* @__PURE__ */ o(
+              we,
+              {
+                messages: h,
+                agent: M
+              },
+              g
+            );
+          }
+          return null;
+        }),
+        t && b && /* @__PURE__ */ o(b, { agent: n.bot })
+      ]
+    }
+  );
+}
+function br() {
+  const {
+    messagesState: { isInitialFetchLoading: e }
+  } = q(), {
+    sessionState: { session: t }
+  } = Y(), { isCanvasOpen: r } = Uo(), { theme: n } = X();
+  Ne({
+    width: r ? n.screens.chat.withCanvas.width : n.screens.chat.width,
+    height: r ? n.screens.chat.withCanvas.height : n.screens.chat.height
+  });
+  const s = ce((t == null ? void 0 : t.id) || "chat").current;
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      ...w("chat/root"),
+      className: d("flex flex-col overflow-hidden"),
+      style: {
+        width: "100vw",
+        // Relative to the iframe
+        maxWidth: "100vw",
+        // Relative to the iframe
+        height: "100vh",
+        // Relative to the iframe
+        maxHeight: "100vh"
+        // Relative to the iframe
+      },
+      children: /* @__PURE__ */ c("div", { className: "size-full justify-between flex flex-col", children: [
+        /* @__PURE__ */ o(Tt, {}),
+        /* @__PURE__ */ o(T, { mode: "wait", children: e ? /* @__PURE__ */ o(
+          u,
+          {
+            className: "flex flex-col items-center justify-center w-full flex-1",
+            children: /* @__PURE__ */ o(Mt, {})
+          },
+          "loading"
+        ) : /* @__PURE__ */ c(
+          u,
+          {
+            className: "flex items-start h-full flex-1 overflow-auto",
+            snapExit: !0,
+            children: [
+              /* @__PURE__ */ c(
+                "div",
+                {
+                  ...w("chat/main/root"),
+                  className: d(
+                    "flex flex-col h-full overflow-auto transition-all",
+                    r ? "w-2/5" : "w-full"
+                  ),
+                  style: {
+                    transitionTimingFunction: n.screens.chat.withCanvas.transitionTimingFunction,
+                    transitionDuration: n.screens.chat.withCanvas.transitionDuration
+                  },
+                  children: [
+                    /* @__PURE__ */ o(vr, {}),
+                    /* @__PURE__ */ o(dr, {})
+                  ]
+                }
+              ),
+              /* @__PURE__ */ o(
+                "div",
+                {
+                  ...w("chat/canvas/root"),
+                  className: d(
+                    "h-full overflow-auto transition-all",
+                    r ? "w-3/5" : "w-0"
+                  ),
+                  style: {
+                    transitionTimingFunction: n.screens.chat.withCanvas.transitionTimingFunction,
+                    transitionDuration: n.screens.chat.withCanvas.transitionDuration
+                  },
+                  children: /* @__PURE__ */ o(Vo, {})
+                }
+              )
+            ]
+          },
+          s
+        ) })
+      ] })
+    }
+  );
+}
+function xr({ className: e }) {
+  return /* @__PURE__ */ o(
+    "svg",
+    {
+      width: "26",
+      height: "32",
+      viewBox: "0 0 26 32",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: d("text-primary-foreground", e),
+      children: /* @__PURE__ */ o(
+        "path",
+        {
+          d: "M1.34103 25.6132H5.44245C5.74203 25.6228 6.02673 25.7462 6.23867 25.9582C6.45062 26.1703 6.5739 26.4551 6.58348 26.7548V30.8584C6.59305 31.1581 6.71634 31.443 6.92828 31.655C7.14023 31.8671 7.42492 31.9904 7.7245 32H18.2894C18.589 31.9904 18.8737 31.8671 19.0856 31.655C19.2976 31.443 19.4209 31.1581 19.4304 30.8584V26.7548C19.4401 26.4545 19.5638 26.1692 19.7765 25.957C19.9892 25.7449 20.2748 25.6219 20.5749 25.6132H24.659C24.9586 25.6036 25.2433 25.4803 25.4552 25.2682C25.6671 25.0562 25.7904 24.7713 25.8 24.4716V7.52839C25.7904 7.22865 25.6671 6.94381 25.4552 6.73176C25.2433 6.5197 24.9586 6.39635 24.659 6.38677H20.561C20.2603 6.37802 19.9742 6.25457 19.7614 6.04169C19.5487 5.82881 19.4253 5.54261 19.4165 5.24168V1.14161C19.4072 0.84419 19.2858 0.561291 19.0768 0.349589C18.8678 0.137887 18.5865 0.0130193 18.2894 0L7.7245 0C7.42492 0.00957792 7.14023 0.132929 6.92828 0.344983C6.71634 0.557036 6.59305 0.841878 6.58348 1.14161V5.24168C6.57477 5.54203 6.45187 5.82773 6.23983 6.04052C6.0278 6.25331 5.74262 6.37715 5.44245 6.38677H1.34103C1.04144 6.39635 0.756749 6.5197 0.544805 6.73176C0.332861 6.94381 0.209574 7.22865 0.200001 7.52839V24.4716C0.209574 24.7713 0.332861 25.0562 0.544805 25.2682C0.756749 25.4803 1.04144 25.6036 1.34103 25.6132ZM6.58348 24.4716V7.52839C6.59305 7.22865 6.71634 6.94381 6.92828 6.73176C7.14023 6.5197 7.42492 6.39635 7.7245 6.38677H18.2894C18.589 6.39635 18.8737 6.5197 19.0856 6.73176C19.2976 6.94381 19.4209 7.22865 19.4304 7.52839V24.4716C19.4209 24.7713 19.2976 25.0562 19.0856 25.2682C18.8737 25.4803 18.589 25.6036 18.2894 25.6132H7.7245C7.42492 25.6036 7.14023 25.4803 6.92828 25.2682C6.71634 25.0562 6.59305 24.7713 6.58348 24.4716Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+}
+function Ot({ className: e }) {
+  const { token: t } = S();
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: d(
+        "flex items-center justify-center gap-2 p-2 pt-0",
+        e
+      ),
+      children: /* @__PURE__ */ o(H, { children: /* @__PURE__ */ c(
+        "a",
+        {
+          href: `https://open.cx/?ref=${t}`,
+          target: "_blank",
+          rel: "noreferrer",
+          className: d(
+            "text-[10px] flex items-center",
+            "text-muted-foreground/70 [&_svg]:text-muted-foreground/70",
+            "hover:text-primary [&_svg]:hover:text-primary"
+          ),
+          children: [
+            /* @__PURE__ */ o("span", { children: "Powered by" }),
+            /* @__PURE__ */ o("span", { children: " " }),
+            /* @__PURE__ */ c("span", { className: "flex items-center gap-[1px]", children: [
+              /* @__PURE__ */ o("span", { children: /* @__PURE__ */ o(xr, { className: "size-3 inline-block" }) }),
+              /* @__PURE__ */ o("span", { className: "font-semibold", children: "open" })
+            ] })
+          ]
+        }
+      ) })
+    }
+  );
+}
+function yr({ children: e }) {
+  return /* @__PURE__ */ o("p", { className: "pl-4 text-xs text-muted-foreground/75 uppercase font-semibold tracking-tight", children: e });
+}
+function rt({
+  session: e,
+  className: t
+}) {
+  const { bot: r } = S(), { toChatScreen: n } = A(), s = e.assignee.kind === "human" ? e.assignee.name || "Support Agent" : (r == null ? void 0 : r.name) || "AI Support Agent", a = e.assignee.kind === "human" ? e.assignee.avatarUrl || "" : (r == null ? void 0 : r.avatar) || "";
+  return /* @__PURE__ */ c(
+    z,
+    {
+      variant: "ghost",
+      size: "lg",
+      className: d(
+        "rounded-full p-2 pr-4 flex text-start justify-between w-full whitespace-normal",
+        t
+      ),
+      onClick: () => n(e.id),
+      children: [
+        /* @__PURE__ */ c("div", { className: "flex-1 flex gap-2 items-center", children: [
+          /* @__PURE__ */ o(T, { mode: "wait", children: /* @__PURE__ */ o(u, { snapExit: !0, children: /* @__PURE__ */ c(ke, { className: "size-10", children: [
+            /* @__PURE__ */ o(Ce, { src: a, alt: "Agent Icon" }),
+            /* @__PURE__ */ o(ze, { children: /* @__PURE__ */ o(wo, { className: "size-4" }) })
+          ] }) }) }),
+          /* @__PURE__ */ c("div", { className: "flex-1", children: [
+            /* @__PURE__ */ o(T, { mode: "wait", children: /* @__PURE__ */ o(u, { snapExit: !0, children: s }, s) }),
+            /* @__PURE__ */ o(T, { mode: "wait", children: e.lastMessage ? /* @__PURE__ */ o(u, { snapExit: !0, children: /* @__PURE__ */ o(
+              kt,
+              {
+                remarkPlugins: [dt],
+                rehypePlugins: [ct],
+                className: "line-clamp-1 overflow-hidden text-ellipsis text-xs text-muted-foreground",
+                children: e.lastMessage
+              }
+            ) }, e.lastMessage || "content") : /* @__PURE__ */ o(u, { className: "w-1/2", snapExit: !0, children: /* @__PURE__ */ o(_t, { className: "h-4 w-full" }) }, "skeleton") })
+          ] })
+        ] }),
+        /* @__PURE__ */ o(go, { className: "size-4 text-muted-foreground shrink-0" })
+      ]
+    }
+  );
+}
+function kr() {
+  const e = te(), { toChatScreen: t } = A(), {
+    sessionsState: { data: r, isInitialFetchLoading: n },
+    openSessions: s,
+    closedSessions: a,
+    canCreateNewSession: l
+  } = Y();
+  return /* @__PURE__ */ o("div", { className: "flex-1 flex flex-col overflow-scroll py-2 px-2", children: /* @__PURE__ */ o(T, { mode: "wait", children: n ? /* @__PURE__ */ o(
+    u,
+    {
+      className: "flex-1 flex items-center justify-center",
+      children: /* @__PURE__ */ o(Mt, {})
+    },
+    "loading"
+  ) : /* @__PURE__ */ o(
+    u,
+    {
+      className: "flex-1 flex flex-col gap-2 relative",
+      children: r.length ? /* @__PURE__ */ c(nt, { children: [
+        /* @__PURE__ */ c(T, { children: [
+          s.length > 0 && /* @__PURE__ */ o(
+            u,
+            {
+              fadeIn: "up",
+              delay: 0.2,
+              className: "space-y-2",
+              snapExit: !0,
+              children: s.map((i) => /* @__PURE__ */ o(rt, { session: i }, i.id))
+            },
+            "open-sessions"
+          ),
+          a.length > 0 && /* @__PURE__ */ c(
+            u,
+            {
+              className: "space-y-2",
+              delay: 0.2,
+              snapExit: !0,
+              children: [
+                /* @__PURE__ */ o(yr, { children: e.get("closed-conversations") }),
+                a.map((i) => /* @__PURE__ */ o(
+                  rt,
+                  {
+                    session: i,
+                    className: "opacity-50 hover:opacity-100"
+                  },
+                  i.id
+                ))
+              ]
+            },
+            "closed-sessions"
+          )
+        ] }),
+        l && /* @__PURE__ */ o("div", { className: "mt-auto w-full rounded-3xl sticky bottom-0 outline outline-8 outline-background bg-background", children: /* @__PURE__ */ Qe(
+          z,
+          {
+            ...w("sessions/new_conversation_btn"),
+            size: "lg",
+            key: "new-session",
+            className: "w-full",
+            onClick: () => t()
+          },
+          e.get("new-conversation")
+        ) })
+      ] }) : /* @__PURE__ */ c("div", { className: "flex-1 flex flex-col gap-2 items-center", children: [
+        /* @__PURE__ */ o("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ o("p", { className: "text-muted-foreground", children: e.get("no-conversations-yet") }) }),
+        /* @__PURE__ */ Qe(
+          z,
+          {
+            ...w("sessions/new_conversation_btn"),
+            size: "lg",
+            key: "new-session",
+            className: "w-full",
+            onClick: () => t()
+          },
+          e.get("new-conversation")
+        )
+      ] })
+    },
+    "sessions"
+  ) }) });
+}
+function Cr() {
+  const { theme: e } = X();
+  return Ne({
+    width: e.screens.sessions.width,
+    height: e.screens.sessions.height
+  }), /* @__PURE__ */ o(
+    "div",
+    {
+      ...w("sessions/root"),
+      className: d("flex flex-col overflow-hidden bg-background"),
+      style: {
+        width: "100vw",
+        // Relative to the iframe
+        maxWidth: "100vw",
+        // Relative to the iframe
+        height: "100vh",
+        // Relative to the iframe
+        maxHeight: "100vh"
+        // Relative to the iframe
+      },
+      children: /* @__PURE__ */ c("div", { className: "size-full flex flex-col", children: [
+        /* @__PURE__ */ o(Tt, {}),
+        /* @__PURE__ */ o(kr, {}),
+        /* @__PURE__ */ o(Ot, {})
+      ] })
+    }
+  );
+}
+const ne = E.forwardRef(
+  ({ className: e, type: t, ...r }, n) => {
+    const { isSmallScreen: s } = B(), a = ve();
+    return /* @__PURE__ */ o(H, { ref: n, children: /* @__PURE__ */ o(
+      "input",
+      {
+        dir: a,
+        type: t,
+        className: d(
+          // 16px on mobiles prevents auto-zoom on the input when focused
+          s ? "text-[16px]" : "text-sm",
+          "flex w-full rounded-xl p-2 ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-primary-foreground placeholder:text-muted-foreground/75 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition",
+          "rtl:placeholder:text-right",
+          "rounded-2xl px-4",
+          "border shadow-sm",
+          e
+        ),
+        ...r
+      }
+    ) });
+  }
+);
+ne.displayName = "Input";
+function zr() {
+  const { contentIframeRef: e } = $(), { inline: t } = S(), r = ce(null);
+  return le(() => {
+    const n = e == null ? void 0 : e.current;
+    if (n && r.current) {
+      const s = r.current;
+      let a;
+      const l = new ResizeObserver(() => {
+        a = requestAnimationFrame(() => {
+          const i = s.offsetHeight;
+          n.style.setProperty(
+            "--opencx-widget-height",
+            t ? "100%" : `${i.toFixed(1)}px`
+          );
+        });
+      });
+      return l.observe(s), () => {
+        cancelAnimationFrame(a), l.unobserve(s);
+      };
+    }
+  }, [e, t]), { observedElementRef: r };
+}
+const Nr = me.object({
+  name: me.string().min(2),
+  email: me.string().email()
+});
+function Sr() {
+  var x, I, M, F, P, W, R, v, k;
+  const { setIsOpen: e } = V(), { createUnverifiedContact: t } = Wt(), { isSmallScreen: r } = B(), n = S(), { theme: s } = X(), a = te(), { data: l } = de(), { observedElementRef: i } = zr();
+  Ne({
+    height: void 0,
+    width: s.screens.welcome.width
+  });
+  const [p, y] = j(((x = n.prefillUserData) == null ? void 0 : x.name) || ""), [b, C] = j(((I = n.prefillUserData) == null ? void 0 : I.email) || ""), f = (n.extraDataCollectionFields || []).filter(
+    (N) => N !== "name" && N !== "email" && !!N
+  ), [h, m] = j({}), [g, _] = So(
+    async (N) => {
+      N.preventDefault();
+      const L = Nr.safeParse({ name: p, email: b });
+      L.success && await t(
+        {
+          email: L.data.email,
+          non_verified_name: L.data.name
+        },
+        // Only pass extra data if there is any
+        Object.values(h).filter(Boolean).length ? h : void 0
+      );
+    },
+    [p, b, h]
+  );
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      style: {
+        width: "100vw",
+        // Relative to the iframe
+        maxWidth: "100vw",
+        // Relative to the iframe
+        minHeight: s.screens.welcome.minHeight,
+        height: "100vh",
+        // Relative to the iframe
+        maxHeight: "100vh",
+        // Relative to the iframe
+        overflowY: "auto"
+      },
+      children: /* @__PURE__ */ c(
+        "div",
+        {
+          ref: i,
+          className: d(
+            "flex flex-col",
+            r && "h-full",
+            "bg-[radial-gradient(ellipse_at_top_left,hsl(var(--opencx-primary)),transparent),radial-gradient(ellipse_at_top_right,hsl(var(--opencx-primary)),transparent)]"
+          ),
+          children: [
+            /* @__PURE__ */ c(
+              "div",
+              {
+                dir: "auto",
+                className: d(
+                  "flex-1 flex flex-col px-4 py-12 text-start space-y-4 relative z-10",
+                  "text-primary-foreground"
+                ),
+                children: [
+                  r && /* @__PURE__ */ o(u, { className: "absolute top-6 right-6", children: /* @__PURE__ */ o(z, { size: "selfless", onClick: () => e(!1), children: /* @__PURE__ */ o(be, { className: "size-4" }) }) }),
+                  /* @__PURE__ */ o("div", { className: "flex items-center justify-between w-full mb-2", children: (M = n.assets) != null && M.organizationLogo ? /* @__PURE__ */ o(
+                    "img",
+                    {
+                      src: (F = n.assets) == null ? void 0 : F.organizationLogo,
+                      alt: "Company Logo",
+                      className: "h-8 w-auto object-contain"
+                    }
+                  ) : /* @__PURE__ */ o("h2", { className: "font-bold text-sm", dir: "auto", children: (P = l == null ? void 0 : l.data) == null ? void 0 : P.organizationName }) }),
+                  /* @__PURE__ */ c("div", { className: "space-y-2", children: [
+                    /* @__PURE__ */ o(
+                      "h1",
+                      {
+                        className: "text-[1.75rem] font-semibold tracking-tight leading-none",
+                        dir: "auto",
+                        children: ((R = (W = n.textContent) == null ? void 0 : W.welcomeScreen) == null ? void 0 : R.title) || a.get("welcome-title")
+                      }
+                    ),
+                    /* @__PURE__ */ o("p", { className: "text-sm", dir: "auto", children: ((k = (v = n.textContent) == null ? void 0 : v.welcomeScreen) == null ? void 0 : k.description) || a.get("welcome-description") })
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ c(
+              "div",
+              {
+                className: d(
+                  "z-10 m-2 px-2 pt-2 bp-0 space-y-2",
+                  "bg-[white]",
+                  "border shadow",
+                  "rounded-3xl"
+                ),
+                dir: "auto",
+                children: [
+                  /* @__PURE__ */ c("form", { onSubmit: _, className: "space-y-2", children: [
+                    /* @__PURE__ */ o(
+                      ne,
+                      {
+                        value: p,
+                        onChange: (N) => y(N.target.value),
+                        required: !0,
+                        placeholder: a.get("your-name"),
+                        name: "name"
+                      }
+                    ),
+                    /* @__PURE__ */ o(
+                      ne,
+                      {
+                        required: !0,
+                        value: b,
+                        onChange: (N) => C(N.target.value),
+                        type: "email",
+                        placeholder: a.get("your-email"),
+                        name: "email"
+                      }
+                    ),
+                    f.map((N) => /* @__PURE__ */ o(
+                      ne,
+                      {
+                        value: h[N],
+                        onChange: (L) => m((oe) => ({
+                          ...oe,
+                          [N]: L.target.value
+                        })),
+                        placeholder: `${N} (${a.get("optional")})`
+                      },
+                      N
+                    )),
+                    /* @__PURE__ */ c(
+                      z,
+                      {
+                        disabled: g.loading,
+                        className: "w-full",
+                        size: "lg",
+                        children: [
+                          g.loading ? a.get("starting-chat") : a.get("start-chat"),
+                          /* @__PURE__ */ o(uo, { className: "size-4 rtl:-scale-100" })
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ o(Ot, {})
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+function Rt() {
+  de();
+  const {
+    routerState: { screen: e }
+  } = A();
+  return /* @__PURE__ */ c("div", { className: "relative bg-background size-full", children: [
+    /* @__PURE__ */ o(pe.Container, {}),
+    /* @__PURE__ */ o(T, { mode: "wait", children: (() => {
+      switch (e) {
+        case "welcome":
+          return /* @__PURE__ */ o(
+            u,
+            {
+              fadeIn: "right",
+              className: "size-full",
+              snapExit: !0,
+              children: /* @__PURE__ */ o(Sr, {})
+            },
+            e
+          );
+        case "sessions":
+          return /* @__PURE__ */ o(
+            u,
+            {
+              fadeIn: "right",
+              className: "size-full",
+              snapExit: !0,
+              children: /* @__PURE__ */ o(Cr, {})
+            },
+            e
+          );
+        case "chat":
+          return /* @__PURE__ */ o(
+            u,
+            {
+              fadeIn: "right",
+              className: "size-full",
+              snapExit: !0,
+              children: /* @__PURE__ */ o(br, {})
+            },
+            e
+          );
+        default:
+          return D(e, Rt.name), null;
+      }
+    })() })
+  ] });
+}
+const _r = `<!DOCTYPE html>
+<html>
+<head>
+<style>
+${Ct}
+html, body {
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    font-size: 16px;
+}
+</style>
+<meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=resizes-content">
+</head>
+<body>
+</body>
+</html>`;
+function jt() {
+  const { isOpen: e } = V(), { version: t, contentIframeRef: r } = $(), { cssOverrides: n, inline: s } = S(), { theme: a, cssVars: l, computed: i } = X();
+  return /* @__PURE__ */ o(
+    Z.div,
+    {
+      animate: e ? "visible" : "hidden",
+      initial: "hidden",
+      variants: {
+        hidden: {
+          opacity: 0,
+          y: 8,
+          transitionEnd: { display: "none" },
+          transition: { duration: 0.15 }
+        },
+        visible: {
+          opacity: 1,
+          y: 0,
+          display: "block",
+          height: s ? "100%" : void 0
+        }
+      },
+      children: /* @__PURE__ */ c(
+        ht,
+        {
+          ref: r,
+          initialContent: _r,
+          allowFullScreen: !0,
+          title: "OpenCX Live Chat",
+          style: {
+            // @ts-expect-error this is a valid css variable
+            "--opencx-widget-width": i.minWidth,
+            "--opencx-widget-height": i.minHeight,
+            minWidth: i.minWidth,
+            width: "var(--opencx-widget-width)",
+            maxWidth: i.maxWidth,
+            // Relative to the viewport
+            minHeight: i.minHeight,
+            height: "var(--opencx-widget-height)",
+            maxHeight: i.maxHeight,
+            // Relative to the viewport
+            overflow: "hidden",
+            /** outline is better than border because of box sizing; the outline wouldn't affect the content inside... the border will mess up how the children's border radius sits with the parent */
+            outline: a.widgetContentContainer.outline,
+            outlineColor: a.widgetContentContainer.outlineColor,
+            borderRadius: a.widgetContentContainer.borderRadius,
+            boxShadow: a.widgetContentContainer.boxShadow,
+            transitionProperty: a.widgetContentContainer.transitionProperty,
+            transitionTimingFunction: a.widgetContentContainer.transitionTimingFunction,
+            transitionDuration: a.widgetContentContainer.transitionDuration,
+            // reset iframe defaults
+            boxSizing: "border-box",
+            borderWidth: "0px"
+          },
+          children: [
+            n && /* @__PURE__ */ o("style", { children: n }),
+            /* @__PURE__ */ o(
+              Wo,
+              {
+                delayDuration: 200,
+                disableHoverableContent: !0,
+                children: /* @__PURE__ */ o(
+                  "div",
+                  {
+                    style: {
+                      display: "contents"
+                    },
+                    children: /* @__PURE__ */ o(
+                      "div",
+                      {
+                        style: {
+                          ...l
+                        },
+                        "data-version": t,
+                        className: d(
+                          "antialiased font-sans size-full overflow-hidden isolate relative text-secondary-foreground"
+                        ),
+                        children: /* @__PURE__ */ o(Rt, {})
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+function Ir() {
+  const { theme: e } = X();
+  return /* @__PURE__ */ o(
+    ie.Content,
+    {
+      onInteractOutside: (t) => t.preventDefault(),
+      forceMount: !0,
+      style: {
+        zIndex: e.widgetContentContainer.zIndex,
+        fontSize: "16px"
+      },
+      side: "top",
+      align: "end",
+      sideOffset: e.widgetContentContainer.offset.side,
+      alignOffset: e.widgetContentContainer.offset.align,
+      avoidCollisions: !1,
+      asChild: !0,
+      children: /* @__PURE__ */ o(jt, {})
+    }
+  );
+}
+function Tr({
+  className: e,
+  style: t
+}) {
+  return /* @__PURE__ */ c(
+    "svg",
+    {
+      width: "32",
+      height: "30",
+      viewBox: "0 0 32 30",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: d("text-primary-foreground", e),
+      style: t,
+      children: [
+        /* @__PURE__ */ o(
+          "path",
+          {
+            d: "M0 6.94263C0 3.62892 2.68629 0.942627 6 0.942627H26C29.3137 0.942627 32 3.62892 32 6.94263V17.9426C32 21.2563 29.3137 23.9426 26 23.9426H6C2.68629 23.9426 0 21.2563 0 17.9426V6.94263Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ o(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M19.9945 23.8935L26.237 23.8934C26.1982 24.3557 26.1712 25.2778 26.1704 26.2318C26.1688 28.2839 26.1376 28.7041 25.974 28.868C25.583 29.2598 25.2686 29.0967 24.0616 27.8754C23.4162 27.2222 22.1141 25.9522 21.1682 25.0531L19.9945 23.8935Z",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+}
+const Mr = `<!DOCTYPE html>
+<html>
+<head>
+<style>
+${Ct}
+html, body {
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    font-size: 16px;
+}
+</style>
+</head>
+<body>
+</body>
+</html>`;
+function Dr() {
+  var a, l;
+  const { isOpen: e } = V(), { cssOverrides: t, assets: r } = S(), { theme: n, cssVars: s } = X();
+  return /* @__PURE__ */ c(
+    ht,
+    {
+      initialContent: Mr,
+      style: {
+        height: `calc(${n.widgetTrigger.size.button}px + ${U.x * 2}px)`,
+        width: `calc(${n.widgetTrigger.size.button}px + ${U.y * 2}px)`,
+        fontSize: "16px",
+        position: "fixed",
+        zIndex: n.widgetTrigger.zIndex,
+        right: n.widgetTrigger.offset.right,
+        bottom: n.widgetTrigger.offset.bottom,
+        // reset iframe defaults
+        boxSizing: "border-box",
+        borderWidth: "0px"
+      },
+      children: [
+        t && /* @__PURE__ */ o("style", { children: t }),
+        /* @__PURE__ */ o(
+          "div",
+          {
+            style: {
+              ...s,
+              width: "100%",
+              height: "100%",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: /* @__PURE__ */ o(
+              ie.PopoverTrigger,
+              {
+                className: d(
+                  "font-sans flex items-center justify-center rounded-full"
+                ),
+                style: {
+                  height: n.widgetTrigger.size.button,
+                  width: n.widgetTrigger.size.button
+                },
+                children: /* @__PURE__ */ o(H, { children: /* @__PURE__ */ o(
+                  "div",
+                  {
+                    ...w("trigger/btn"),
+                    className: d(
+                      "relative size-full rounded-full",
+                      "flex items-center justify-center",
+                      "overflow-hidden",
+                      "transition-all",
+                      "bg-primary",
+                      "text-primary-foreground"
+                    ),
+                    children: /* @__PURE__ */ o(T, { mode: "wait", children: e ? /* @__PURE__ */ o(
+                      u,
+                      {
+                        snapExit: !0,
+                        fadeIn: "up",
+                        overrides: {
+                          initial: { rotate: 45 },
+                          animate: { rotate: 0 }
+                        },
+                        children: (a = r == null ? void 0 : r.widgetTrigger) != null && a.closeIcon ? /* @__PURE__ */ o(
+                          "img",
+                          {
+                            src: r.widgetTrigger.closeIcon,
+                            alt: "Widget trigger close icon",
+                            style: {
+                              width: n.widgetTrigger.size.icon,
+                              height: n.widgetTrigger.size.icon
+                            }
+                          }
+                        ) : /* @__PURE__ */ o(
+                          fo,
+                          {
+                            style: {
+                              width: n.widgetTrigger.size.icon,
+                              height: n.widgetTrigger.size.icon
+                            }
+                          }
+                        )
+                      },
+                      "x-icon"
+                    ) : /* @__PURE__ */ o(
+                      u,
+                      {
+                        snapExit: !0,
+                        overrides: {
+                          initial: { rotate: 45 },
+                          animate: { rotate: 0 }
+                        },
+                        children: (l = r == null ? void 0 : r.widgetTrigger) != null && l.openIcon ? /* @__PURE__ */ o(
+                          "img",
+                          {
+                            src: r.widgetTrigger.openIcon,
+                            alt: "Widget trigger open icon",
+                            style: {
+                              width: n.widgetTrigger.size.icon,
+                              height: n.widgetTrigger.size.icon
+                            }
+                          }
+                        ) : /* @__PURE__ */ o(
+                          Tr,
+                          {
+                            style: {
+                              width: n.widgetTrigger.size.icon,
+                              height: n.widgetTrigger.size.icon
+                            },
+                            className: "mt-0.5 opacity-95"
+                          }
+                        )
+                      },
+                      "message-icon"
+                    ) })
+                  }
+                ) })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function Or() {
+  return /* @__PURE__ */ o(
+    ie.Anchor,
+    {
+      style: { position: "fixed", right: 0, bottom: 0 }
+    }
+  );
+}
+function Rr() {
+  const { isOpen: e, setIsOpen: t } = V();
+  return /* @__PURE__ */ c(ie.Root, { open: e, onOpenChange: t, children: [
+    /* @__PURE__ */ o(Or, {}),
+    /* @__PURE__ */ o(Dr, {}),
+    /* @__PURE__ */ o(Ir, {})
+  ] });
+}
+const jr = [
+  {
+    key: "loading",
+    component: Po
+  },
+  {
+    key: "fallback",
+    component: Mo
+  },
+  {
+    key: "bot_message",
+    component: ae
+  },
+  {
+    key: "agent_message",
+    component: ae
+  }
+], Er = {
+  get: async (e) => localStorage.getItem(e),
+  set: async (e, t) => {
+    localStorage.setItem(e, t);
+  },
+  remove: async (e) => {
+    localStorage.removeItem(e);
+  }
+};
+function tn({
+  options: e,
+  components: t = [],
+  loadingComponent: r
+}) {
+  return /* @__PURE__ */ o(
+    Ht,
+    {
+      components: [...jr, ...t],
+      options: e,
+      storage: Er,
+      loadingComponent: r,
+      children: /* @__PURE__ */ o(At, { children: e.inline ? /* @__PURE__ */ o(jt, {}) : /* @__PURE__ */ o(Rr, {}) })
+    }
+  );
+}
+export {
+  tn as Widget
+};
+//# sourceMappingURL=index.js.map