@smwb/ui-solid 0.1.0

package/dist/headless/components/dataDisplay/chat/chatAttachmentImage.js

@@ -0,0 +1,63 @@
+import { createComponent as l, effect as d, className as g, setAttribute as r, Portal as _, template as f, delegateEvents as y } from "solid-js/web";
+import { createSignal as k, Show as u } from "solid-js";
+import b from "clsx";
+import { createCssTransition as C } from "../../../primitives/createCssTransition.js";
+var $ = /* @__PURE__ */ f("<button type=button data-testid=chat-attachment-image><img class=smwb-chat-attachment-image__img>"), A = /* @__PURE__ */ f("<div role=dialog aria-modal=true data-testid=chat-attachment-image-overlay><img class=smwb-chat-attachment-image__overlay-img>");
+function D(a) {
+  const [w, s] = k(!1), h = C({
+    in: w,
+    timeout: {
+      enter: 150,
+      exit: 150
+    },
+    classNames: {
+      enterActive: "smwb-chat-attachment-image__overlay_enter-active",
+      enterDone: "smwb-chat-attachment-image__overlay_enter-done"
+    }
+  });
+  return l(u, {
+    get when() {
+      return a.attachment.url;
+    },
+    children: (v) => [(() => {
+      var e = $(), n = e.firstChild;
+      return e.$$click = () => s(!0), d((t) => {
+        var m = b("smwb-chat-attachment-image", a.class), i = a.attachment.name, c = v(), o = a.attachment.name;
+        return m !== t.e && g(e, t.e = m), i !== t.t && r(e, "aria-label", t.t = i), c !== t.a && r(n, "src", t.a = c), o !== t.o && r(n, "alt", t.o = o), t;
+      }, {
+        e: void 0,
+        t: void 0,
+        a: void 0,
+        o: void 0
+      }), e;
+    })(), l(u, {
+      get when() {
+        return h.mounted();
+      },
+      get children() {
+        return l(_, {
+          get mount() {
+            return document.body;
+          },
+          get children() {
+            var e = A(), n = e.firstChild;
+            return e.$$click = () => s(!1), n.$$click = (t) => t.stopPropagation(), d((t) => {
+              var m = b("smwb-chat-attachment-image__overlay", "smwb-dark", h.classes()), i = a.attachment.name, c = v(), o = a.attachment.name;
+              return m !== t.e && g(e, t.e = m), i !== t.t && r(e, "aria-label", t.t = i), c !== t.a && r(n, "src", t.a = c), o !== t.o && r(n, "alt", t.o = o), t;
+            }, {
+              e: void 0,
+              t: void 0,
+              a: void 0,
+              o: void 0
+            }), e;
+          }
+        });
+      }
+    })]
+  });
+}
+y(["click"]);
+export {
+  D as ChatAttachmentImage
+};
+//# sourceMappingURL=chatAttachmentImage.js.map

package/dist/headless/components/dataDisplay/chat/chatAttachmentImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chatAttachmentImage.js","sources":["../../../../../src/components/dataDisplay/chat/chatAttachmentImage.tsx"],"sourcesContent":["import { type JSX, Show, createSignal } from \"solid-js\";\nimport { Portal } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { createCssTransition } from \"../../../primitives/createCssTransition\";\nimport type { ChatAttachment } from \"./types\";\n\nexport interface ChatAttachmentImageProps {\n  attachment: ChatAttachment;\n  class?: string | undefined;\n}\n\nexport function ChatAttachmentImage(props: ChatAttachmentImageProps): JSX.Element {\n  const [open, setOpen] = createSignal(false);\n\n  const transition = createCssTransition({\n    in: open,\n    timeout: { enter: 150, exit: 150 },\n    classNames: {\n      enterActive: \"smwb-chat-attachment-image__overlay_enter-active\",\n      enterDone: \"smwb-chat-attachment-image__overlay_enter-done\",\n    },\n  });\n\n  return (\n    <Show when={props.attachment.url}>\n      {(url) => (\n        <>\n          <button\n            type=\"button\"\n            class={cn(\"smwb-chat-attachment-image\", props.class)}\n            onClick={() => setOpen(true)}\n            data-testid=\"chat-attachment-image\"\n            aria-label={props.attachment.name}\n          >\n            <img src={url()} alt={props.attachment.name} class=\"smwb-chat-attachment-image__img\" />\n          </button>\n          <Show when={transition.mounted()}>\n            <Portal mount={document.body}>\n              <div\n                class={cn(\"smwb-chat-attachment-image__overlay\", \"smwb-dark\", transition.classes())}\n                role=\"dialog\"\n                aria-modal=\"true\"\n                aria-label={props.attachment.name}\n                data-testid=\"chat-attachment-image-overlay\"\n                onClick={() => setOpen(false)}\n              >\n                <img\n                  src={url()}\n                  alt={props.attachment.name}\n                  class=\"smwb-chat-attachment-image__overlay-img\"\n                  onClick={(event) => event.stopPropagation()}\n                />\n              </div>\n            </Portal>\n          </Show>\n        </>\n      )}\n    </Show>\n  );\n}\n\nexport default ChatAttachmentImage;\n"],"names":["ChatAttachmentImage","props","open","setOpen","createSignal","transition","createCssTransition","in","timeout","enter","exit","classNames","enterActive","enterDone","_$createComponent","Show","when","attachment","url","children","_el$","_tmpl$","_el$2","firstChild","$$click","_$effect","_p$","_v$","cn","class","_v$2","name","_v$3","_v$4","e","_$className","t","_$setAttribute","a","o","undefined","mounted","Portal","mount","document","body","_el$3","_tmpl$2","_el$4","event","stopPropagation","_v$5","classes","_v$6","_v$7","_v$8","_$delegateEvents"],"mappings":";;;;;AAWO,SAASA,EAAoBC,GAA8C;AAChF,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAa,EAAK,GAEpCC,IAAaC,EAAoB;AAAA,IACrCC,IAAIL;AAAAA,IACJM,SAAS;AAAA,MAAEC,OAAO;AAAA,MAAKC,MAAM;AAAA,IAAA;AAAA,IAC7BC,YAAY;AAAA,MACVC,aAAa;AAAA,MACbC,WAAW;AAAA,IAAA;AAAA,EACb,CACD;AAED,SAAAC,EACGC,GAAI;AAAA,IAAA,IAACC,OAAI;AAAA,aAAEf,EAAMgB,WAAWC;AAAAA,IAAG;AAAA,IAAAC,UAC5BD,CAAAA,MAAG,EAAA,MAAA;AAAA,UAAAE,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG;AAAAH,aAAAA,EAAAI,UAKU,MAAMrB,EAAQ,EAAI,GAACsB,EAAAC,CAAAA,MAAA;AAAA,YAAAC,IADrBC,EAAG,8BAA8B3B,EAAM4B,KAAK,GAACC,IAGxC7B,EAAMgB,WAAWc,MAAIC,IAEvBd,EAAAA,GAAKe,IAAOhC,EAAMgB,WAAWc;AAAIJ,eAAAA,MAAAD,EAAAQ,KAAAC,EAAAf,GAAAM,EAAAQ,IAAAP,CAAA,GAAAG,MAAAJ,EAAAU,KAAAC,EAAAjB,GAAA,cAAAM,EAAAU,IAAAN,CAAA,GAAAE,MAAAN,EAAAY,KAAAD,EAAAf,GAAA,OAAAI,EAAAY,IAAAN,CAAA,GAAAC,MAAAP,EAAAa,KAAAF,EAAAf,GAAA,OAAAI,EAAAa,IAAAN,CAAA,GAAAP;AAAAA,MAAA,GAAA;AAAA,QAAAQ,GAAAM;AAAAA,QAAAJ,GAAAI;AAAAA,QAAAF,GAAAE;AAAAA,QAAAD,GAAAC;AAAAA,MAAAA,CAAA,GAAApB;AAAAA,IAAA,GAAA,GAAAN,EAE5CC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEX,EAAWoC,QAAAA;AAAAA,MAAS;AAAA,MAAA,IAAAtB,WAAA;AAAA,eAAAL,EAC7B4B,GAAM;AAAA,UAAA,IAACC,QAAK;AAAA,mBAAEC,SAASC;AAAAA,UAAI;AAAA,UAAA,IAAA1B,WAAA;AAAA,gBAAA2B,IAAAC,EAAAA,GAAAC,IAAAF,EAAAvB;AAAAuB,mBAAAA,EAAAtB,UAOf,MAAMrB,EAAQ,EAAK,GAAC6C,EAAAxB,UAMjByB,CAAAA,MAAUA,EAAMC,gBAAAA,GAAiBzB,EAAAC,CAAAA,MAAA;AAAA,kBAAAyB,IAXtCvB,EAAG,uCAAuC,aAAavB,EAAW+C,SAAS,GAACC,IAGvEpD,EAAMgB,WAAWc,MAAIuB,IAK1BpC,KAAKqC,IACLtD,EAAMgB,WAAWc;AAAIoB,qBAAAA,MAAAzB,EAAAQ,KAAAC,EAAAW,GAAApB,EAAAQ,IAAAiB,CAAA,GAAAE,MAAA3B,EAAAU,KAAAC,EAAAS,GAAA,cAAApB,EAAAU,IAAAiB,CAAA,GAAAC,MAAA5B,EAAAY,KAAAD,EAAAW,GAAA,OAAAtB,EAAAY,IAAAgB,CAAA,GAAAC,MAAA7B,EAAAa,KAAAF,EAAAW,GAAA,OAAAtB,EAAAa,IAAAgB,CAAA,GAAA7B;AAAAA,YAAA,GAAA;AAAA,cAAAQ,GAAAM;AAAAA,cAAAJ,GAAAI;AAAAA,cAAAF,GAAAE;AAAAA,cAAAD,GAAAC;AAAAA,YAAAA,CAAA,GAAAM;AAAAA,UAAA;AAAA,QAAA,CAAA;AAAA,MAAA;AAAA,IAAA,CAAA,CAAA;AAAA,EAAA,CAQrC;AAGP;AAEmCU,EAAA,CAAA,OAAA,CAAA;"}

package/dist/headless/components/dataDisplay/chat/chatAttachments.js

@@ -0,0 +1,48 @@
+import { createComponent as n, insert as o, effect as i, setAttribute as h, className as g, template as d } from "solid-js/web";
+import { Show as s, For as v } from "solid-js";
+import b from "clsx";
+import { isImageAttachment as w } from "./utils.js";
+import { ChatAttachmentImage as _ } from "./chatAttachmentImage.js";
+var A = /* @__PURE__ */ d("<div data-testid=chat-attachments>"), C = /* @__PURE__ */ d("<a class=smwb-chat-attachments__file target=_blank rel=noreferrer data-testid=chat-attachment-file>");
+function F(r) {
+  const f = () => r.enabled ?? !0, u = () => f() && !!r.attachments?.length;
+  return n(s, {
+    get when() {
+      return u();
+    },
+    get children() {
+      var m = A();
+      return o(m, n(v, {
+        get each() {
+          return r.attachments;
+        },
+        children: (t) => n(s, {
+          get when() {
+            return w(t);
+          },
+          get fallback() {
+            return (() => {
+              var a = C();
+              return o(a, () => t.name), i((e) => {
+                var l = t.url, c = t.name;
+                return l !== e.e && h(a, "href", e.e = l), c !== e.t && h(a, "download", e.t = c), e;
+              }, {
+                e: void 0,
+                t: void 0
+              }), a;
+            })();
+          },
+          get children() {
+            return n(_, {
+              attachment: t
+            });
+          }
+        })
+      })), i(() => g(m, b("smwb-chat-attachments", r.class))), m;
+    }
+  });
+}
+export {
+  F as ChatAttachments
+};
+//# sourceMappingURL=chatAttachments.js.map

package/dist/headless/components/dataDisplay/chat/chatAttachments.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chatAttachments.js","sources":["../../../../../src/components/dataDisplay/chat/chatAttachments.tsx"],"sourcesContent":["import { type JSX, For, Show } from \"solid-js\";\nimport cn from \"clsx\";\nimport type { ChatAttachment } from \"./types\";\nimport { isImageAttachment } from \"./utils\";\nimport { ChatAttachmentImage } from \"./chatAttachmentImage\";\n\nexport interface ChatAttachmentsProps {\n  attachments?: ChatAttachment[] | undefined;\n  class?: string | undefined;\n  enabled?: boolean | undefined;\n}\n\nexport function ChatAttachments(props: ChatAttachmentsProps): JSX.Element {\n  const enabled = (): boolean => props.enabled ?? true;\n  const visible = (): boolean => enabled() && Boolean(props.attachments?.length);\n\n  return (\n    <Show when={visible()}>\n      <div class={cn(\"smwb-chat-attachments\", props.class)} data-testid=\"chat-attachments\">\n        <For each={props.attachments}>\n          {(attachment) => (\n            <Show\n              when={isImageAttachment(attachment)}\n              fallback={\n                <a\n                  class=\"smwb-chat-attachments__file\"\n                  href={attachment.url}\n                  download={attachment.name}\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                  data-testid=\"chat-attachment-file\"\n                >\n                  {attachment.name}\n                </a>\n              }\n            >\n              <ChatAttachmentImage attachment={attachment} />\n            </Show>\n          )}\n        </For>\n      </div>\n    </Show>\n  );\n}\n\nexport default ChatAttachments;\n"],"names":["ChatAttachments","props","enabled","visible","Boolean","attachments","length","_$createComponent","Show","when","children","_el$","_tmpl$","_$insert","For","each","attachment","isImageAttachment","fallback","_el$2","_tmpl$2","name","_$effect","_p$","_v$","url","_v$2","e","_$setAttribute","t","undefined","ChatAttachmentImage","_$className","cn","class"],"mappings":";;;;;;AAYO,SAASA,EAAgBC,GAA0C;AACxE,QAAMC,IAAUA,MAAeD,EAAMC,WAAW,IAC1CC,IAAUA,MAAeD,EAAAA,KAAaE,EAAQH,EAAMI,aAAaC;AAEvE,SAAAC,EACGC,GAAI;AAAA,IAAA,IAACC,OAAI;AAAA,aAAEN,EAAAA;AAAAA,IAAS;AAAA,IAAA,IAAAO,WAAA;AAAA,UAAAC,IAAAC,EAAAA;AAAAC,aAAAA,EAAAF,GAAAJ,EAEhBO,GAAG;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAEd,EAAMI;AAAAA,QAAW;AAAA,QAAAK,UACxBM,CAAAA,MAAUT,EACTC,GAAI;AAAA,UAAA,IACHC,OAAI;AAAA,mBAAEQ,EAAkBD,CAAU;AAAA,UAAC;AAAA,UAAA,IACnCE,WAAQ;AAAA,oBAAA,MAAA;AAAA,kBAAAC,IAAAC,EAAAA;AAAAP,qBAAAA,EAAAM,GAAA,MASHH,EAAWK,IAAI,GAAAC,EAAAC,CAAAA,MAAA;AAAA,oBAAAC,IANVR,EAAWS,KAAGC,IACVV,EAAWK;AAAIG,uBAAAA,MAAAD,EAAAI,KAAAC,EAAAT,GAAA,QAAAI,EAAAI,IAAAH,CAAA,GAAAE,MAAAH,EAAAM,KAAAD,EAAAT,GAAA,YAAAI,EAAAM,IAAAH,CAAA,GAAAH;AAAAA,cAAA,GAAA;AAAA,gBAAAI,GAAAG;AAAAA,gBAAAD,GAAAC;AAAAA,cAAAA,CAAA,GAAAX;AAAAA,YAAA,GAAA;AAAA,UAAA;AAAA,UAAA,IAAAT,WAAA;AAAA,mBAAAH,EAS5BwB,GAAmB;AAAA,cAACf,YAAAA;AAAAA,YAAAA,CAAsB;AAAA,UAAA;AAAA,QAAA,CAAA;AAAA,MAAA,CAE9C,CAAA,GAAAM,EAAA,MAAAU,EAAArB,GApBOsB,EAAG,yBAAyBhC,EAAMiC,KAAK,CAAC,CAAA,GAAAvB;AAAAA,IAAA;AAAA,EAAA,CAAA;AAyB1D;"}

package/dist/headless/components/dataDisplay/chat/chatComposer.js

@@ -0,0 +1,208 @@
+import { createComponent as a, use as B, setAttribute as c, effect as f, className as v, memo as z, insert as M, template as S, delegateEvents as P } from "solid-js/web";
+import { mergeProps as W, createSignal as T, Show as u } from "solid-js";
+import h from "clsx";
+import { TextFieldWrapper as H } from "../../inputs/textField/textFieldWrapper.js";
+import { ChatIconButton as D } from "./chatIconButton.js";
+import { createId as K } from "../../../primitives/createId.js";
+import { shouldComposerNewlineOnEnter as U } from "./utils.js";
+import { TextField as V } from "../../inputs/textField/textField.js";
+import { Icon as A } from "../../base/icon/icon.js";
+var q = /* @__PURE__ */ S("<label data-testid=chat-composer-attach>"), O = /* @__PURE__ */ S("<textarea rows=1>"), R = /* @__PURE__ */ S("<div data-testid=chat-composer>");
+function E(o) {
+  o.stopPropagation();
+}
+function j(o, e, s) {
+  const i = o.selectionStart ?? e.length, b = o.selectionEnd ?? e.length, m = `${e.slice(0, i)}
+${e.slice(b)}`;
+  s(m), requestAnimationFrame(() => {
+    o.selectionStart = i + 1, o.selectionEnd = i + 1;
+  });
+}
+function ne(o) {
+  const e = W({
+    placeholder: "message",
+    disabled: !1,
+    sendAriaLabel: "Send message",
+    shiftEnterNewline: !0,
+    ctrlEnterNewline: !0,
+    fileUpload: !1,
+    attachAriaLabel: "Attach file"
+  }, o), [s, i] = T(""), [b, m] = T(!1), _ = K();
+  let p;
+  const L = () => e.shiftEnterNewline || e.ctrlEnterNewline, y = () => !!e.onSendMessage && s().trim().length > 0 && !e.disabled, g = () => e.fileUpload && !!(e.attachInputId || e.onAttachClick), C = () => {
+    if (!e.onSendMessage) return;
+    const t = s().trim();
+    !t || e.disabled || (e.onSendMessage(t), i(""));
+  }, k = (t) => {
+    if (U(t, {
+      shiftEnterNewline: e.shiftEnterNewline,
+      ctrlEnterNewline: e.ctrlEnterNewline
+    })) {
+      t.currentTarget instanceof HTMLTextAreaElement && (t.preventDefault(), j(t.currentTarget, s(), i));
+      return;
+    }
+    t.key === "Enter" && (t.preventDefault(), C());
+  }, F = () => h("smwb-chat-icon-button", "smwb-chat-icon-button_edge-start", e.disabled && "smwb-chat-icon-button_disabled"), w = () => a(u, {
+    get when() {
+      return g();
+    },
+    get children() {
+      return a(u, {
+        get when() {
+          return e.attachInputId;
+        },
+        get fallback() {
+          return a(D, {
+            edge: "start",
+            get "aria-label"() {
+              return e.attachAriaLabel;
+            },
+            "data-testid": "chat-composer-attach",
+            get disabled() {
+              return e.disabled;
+            },
+            onClick: () => e.onAttachClick?.(),
+            onMouseDown: E,
+            get children() {
+              return a(A, {
+                name: "attach_file",
+                size: 24
+              });
+            }
+          });
+        },
+        children: (t) => (() => {
+          var r = q();
+          return r.$$mousedown = E, M(r, a(A, {
+            name: "attach_file",
+            size: 24
+          })), f((n) => {
+            var l = e.disabled ? void 0 : t(), d = F(), I = e.attachAriaLabel, N = e.disabled || void 0;
+            return l !== n.e && c(r, "for", n.e = l), d !== n.t && v(r, n.t = d), I !== n.a && c(r, "aria-label", n.a = I), N !== n.o && c(r, "aria-disabled", n.o = N), n;
+          }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0
+          }), r;
+        })()
+      });
+    }
+  }), x = () => a(u, {
+    get when() {
+      return e.onSendMessage;
+    },
+    get children() {
+      return a(D, {
+        edge: "end",
+        color: "primary",
+        get "aria-label"() {
+          return e.sendAriaLabel;
+        },
+        "data-testid": "chat-composer-send",
+        get disabled() {
+          return !y();
+        },
+        onClick: C,
+        onMouseDown: E,
+        get children() {
+          return a(A, {
+            name: "send",
+            size: 24
+          });
+        }
+      });
+    }
+  }), $ = (t) => {
+    p && t.currentTarget === t.target && (t.preventDefault(), p.focus());
+  };
+  return a(u, {
+    get when() {
+      return !(g() && !e.onSendMessage);
+    },
+    get fallback() {
+      return (() => {
+        var t = R();
+        return M(t, w), f(() => v(t, h("smwb-chat-composer", "smwb-chat-composer_attach-only", e.class))), t;
+      })();
+    },
+    get children() {
+      return a(u, {
+        get when() {
+          return L();
+        },
+        get fallback() {
+          return a(V, {
+            get class() {
+              return h("smwb-chat-composer", e.class);
+            },
+            "data-testid": "chat-composer",
+            fullWidth: !0,
+            get value() {
+              return s();
+            },
+            get disabled() {
+              return e.disabled;
+            },
+            get placeholder() {
+              return e.placeholder;
+            },
+            onChange: (t) => i(t.currentTarget.value),
+            get startAdornment() {
+              return w();
+            },
+            get endAdornment() {
+              return x();
+            },
+            onKeyDown: k
+          });
+        },
+        get children() {
+          return a(H, {
+            get class() {
+              return h("smwb-chat-composer", e.class);
+            },
+            "data-testid": "chat-composer",
+            fullWidth: !0,
+            get disabled() {
+              return e.disabled;
+            },
+            get isFilledState() {
+              return s().length > 0;
+            },
+            get isFocused() {
+              return b();
+            },
+            for: _,
+            get shrink() {
+              return z(() => !!(e.attachInputId || e.onAttachClick))() && g();
+            },
+            onHolderMouseDown: $,
+            get startAdornment() {
+              return w();
+            },
+            get endAdornment() {
+              return x();
+            },
+            get children() {
+              var t = O();
+              return t.$$keydown = k, t.addEventListener("blur", () => m(!1)), t.addEventListener("focus", () => m(!0)), t.$$input = (r) => i(r.currentTarget.value), B((r) => p = r, t), c(t, "id", _), f((r) => {
+                var n = h("smwb-text-field__input", "smwb-chat-composer__input", "smwb-text-field__input--show-placeholder", g() && "smwb-text-field__input--adornment-start", e.onSendMessage && "smwb-text-field__input--adornment-end"), l = e.disabled, d = e.placeholder;
+                return n !== r.e && v(t, r.e = n), l !== r.t && (t.disabled = r.t = l), d !== r.a && c(t, "placeholder", r.a = d), r;
+              }, {
+                e: void 0,
+                t: void 0,
+                a: void 0
+              }), f(() => t.value = s()), t;
+            }
+          });
+        }
+      });
+    }
+  });
+}
+P(["mousedown", "input", "keydown"]);
+export {
+  ne as ChatComposer
+};
+//# sourceMappingURL=chatComposer.js.map

package/dist/headless/components/dataDisplay/chat/chatComposer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chatComposer.js","sources":["../../../../../src/components/dataDisplay/chat/chatComposer.tsx"],"sourcesContent":["import { type JSX, Show, createSignal, mergeProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { TextField } from \"../../inputs/textField\";\nimport { TextFieldWrapper } from \"../../inputs/textField/textFieldWrapper\";\nimport { ChatIconButton } from \"./chatIconButton\";\nimport { createId } from \"../../../primitives/createId\";\nimport { shouldComposerNewlineOnEnter } from \"./utils\";\n\nexport interface ChatComposerProps {\n  class?: string | undefined;\n  onSendMessage?: ((text: string) => void | Promise<void>) | undefined;\n  placeholder?: string | undefined;\n  disabled?: boolean | undefined;\n  sendAriaLabel?: string | undefined;\n  shiftEnterNewline?: boolean | undefined;\n  ctrlEnterNewline?: boolean | undefined;\n  fileUpload?: boolean | undefined;\n  attachInputId?: string | undefined;\n  onAttachClick?: (() => void) | undefined;\n  attachAriaLabel?: string | undefined;\n}\n\nfunction stopPropagation(event: Event): void {\n  event.stopPropagation();\n}\n\nfunction insertNewlineAtCursor(element: HTMLTextAreaElement, value: string, setValue: (next: string) => void): void {\n  const start = element.selectionStart ?? value.length;\n  const end = element.selectionEnd ?? value.length;\n  const nextValue = `${value.slice(0, start)}\\n${value.slice(end)}`;\n\n  setValue(nextValue);\n\n  requestAnimationFrame(() => {\n    element.selectionStart = start + 1;\n    element.selectionEnd = start + 1;\n  });\n}\n\nexport function ChatComposer(props: ChatComposerProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      placeholder: \"message\",\n      disabled: false,\n      sendAriaLabel: \"Send message\",\n      shiftEnterNewline: true,\n      ctrlEnterNewline: true,\n      fileUpload: false,\n      attachAriaLabel: \"Attach file\",\n    },\n    props\n  );\n\n  const [value, setValue] = createSignal(\"\");\n  const [isFocused, setIsFocused] = createSignal(false);\n  const inputId = createId();\n  let textareaRef: HTMLTextAreaElement | undefined;\n\n  const multiline = (): boolean => merged.shiftEnterNewline || merged.ctrlEnterNewline;\n  const canSend = (): boolean => Boolean(merged.onSendMessage) && value().trim().length > 0 && !merged.disabled;\n  const showAttach = (): boolean => merged.fileUpload && Boolean(merged.attachInputId || merged.onAttachClick);\n\n  const handleSend = (): void => {\n    if (!merged.onSendMessage) return;\n    const text = value().trim();\n    if (!text || merged.disabled) return;\n    void merged.onSendMessage(text);\n    setValue(\"\");\n  };\n\n  const handleKeyDown = (event: KeyboardEvent & { currentTarget: HTMLElement }): void => {\n    if (shouldComposerNewlineOnEnter(event, { shiftEnterNewline: merged.shiftEnterNewline, ctrlEnterNewline: merged.ctrlEnterNewline })) {\n      if (event.currentTarget instanceof HTMLTextAreaElement) {\n        event.preventDefault();\n        insertNewlineAtCursor(event.currentTarget, value(), setValue);\n      }\n      return;\n    }\n\n    if (event.key !== \"Enter\") return;\n\n    event.preventDefault();\n    handleSend();\n  };\n\n  const attachClass = (): string =>\n    cn(\"smwb-chat-icon-button\", \"smwb-chat-icon-button_edge-start\", merged.disabled && \"smwb-chat-icon-button_disabled\");\n\n  const attachButton = (): JSX.Element => (\n    <Show when={showAttach()}>\n      <Show\n        when={merged.attachInputId}\n        fallback={\n          <ChatIconButton\n            edge=\"start\"\n            aria-label={merged.attachAriaLabel}\n            data-testid=\"chat-composer-attach\"\n            disabled={merged.disabled}\n            onClick={() => merged.onAttachClick?.()}\n            onMouseDown={stopPropagation}\n          >\n            <Icon name=\"attach_file\" size={24} />\n          </ChatIconButton>\n        }\n      >\n        {(id) => (\n          <label\n            for={merged.disabled ? undefined : id()}\n            class={attachClass()}\n            aria-label={merged.attachAriaLabel}\n            aria-disabled={merged.disabled || undefined}\n            data-testid=\"chat-composer-attach\"\n            onMouseDown={stopPropagation}\n          >\n            <Icon name=\"attach_file\" size={24} />\n          </label>\n        )}\n      </Show>\n    </Show>\n  );\n\n  const sendButton = (): JSX.Element => (\n    <Show when={merged.onSendMessage}>\n      <ChatIconButton\n        edge=\"end\"\n        color=\"primary\"\n        aria-label={merged.sendAriaLabel}\n        data-testid=\"chat-composer-send\"\n        disabled={!canSend()}\n        onClick={handleSend}\n        onMouseDown={stopPropagation}\n      >\n        <Icon name=\"send\" size={24} />\n      </ChatIconButton>\n    </Show>\n  );\n\n  const onHolderMouseDown: JSX.EventHandler<HTMLDivElement, MouseEvent> = (event) => {\n    if (textareaRef && event.currentTarget === event.target) {\n      event.preventDefault();\n      textareaRef.focus();\n    }\n  };\n\n  return (\n    <Show\n      when={!(showAttach() && !merged.onSendMessage)}\n      fallback={\n        <div class={cn(\"smwb-chat-composer\", \"smwb-chat-composer_attach-only\", merged.class)} data-testid=\"chat-composer\">\n          {attachButton()}\n        </div>\n      }\n    >\n      <Show\n        when={multiline()}\n        fallback={\n          <TextField\n            class={cn(\"smwb-chat-composer\", merged.class)}\n            data-testid=\"chat-composer\"\n            fullWidth\n            value={value()}\n            disabled={merged.disabled}\n            placeholder={merged.placeholder}\n            onChange={(event) => setValue(event.currentTarget.value)}\n            startAdornment={attachButton()}\n            endAdornment={sendButton()}\n            onKeyDown={handleKeyDown}\n          />\n        }\n      >\n        <TextFieldWrapper\n          class={cn(\"smwb-chat-composer\", merged.class)}\n          data-testid=\"chat-composer\"\n          fullWidth\n          disabled={merged.disabled}\n          isFilledState={value().length > 0}\n          isFocused={isFocused()}\n          for={inputId}\n          shrink={Boolean(merged.attachInputId || merged.onAttachClick) && showAttach()}\n          onHolderMouseDown={onHolderMouseDown}\n          startAdornment={attachButton()}\n          endAdornment={sendButton()}\n        >\n          <textarea\n            id={inputId}\n            ref={(el) => (textareaRef = el)}\n            class={cn(\n              \"smwb-text-field__input\",\n              \"smwb-chat-composer__input\",\n              \"smwb-text-field__input--show-placeholder\",\n              showAttach() && \"smwb-text-field__input--adornment-start\",\n              merged.onSendMessage && \"smwb-text-field__input--adornment-end\"\n            )}\n            value={value()}\n            disabled={merged.disabled}\n            placeholder={merged.placeholder}\n            rows={1}\n            onInput={(event) => setValue(event.currentTarget.value)}\n            onFocus={() => setIsFocused(true)}\n            onBlur={() => setIsFocused(false)}\n            onKeyDown={handleKeyDown}\n          />\n        </TextFieldWrapper>\n      </Show>\n    </Show>\n  );\n}\n\nexport default ChatComposer;\n"],"names":["stopPropagation","event","insertNewlineAtCursor","element","value","setValue","start","selectionStart","length","end","selectionEnd","nextValue","slice","requestAnimationFrame","ChatComposer","props","merged","mergeProps","placeholder","disabled","sendAriaLabel","shiftEnterNewline","ctrlEnterNewline","fileUpload","attachAriaLabel","createSignal","isFocused","setIsFocused","inputId","createId","textareaRef","multiline","canSend","Boolean","onSendMessage","trim","showAttach","attachInputId","onAttachClick","handleSend","text","handleKeyDown","shouldComposerNewlineOnEnter","currentTarget","HTMLTextAreaElement","preventDefault","key","attachClass","cn","attachButton","_$createComponent","Show","when","children","fallback","ChatIconButton","edge","onClick","onMouseDown","Icon","name","size","id","_el$","_tmpl$","$$mousedown","_$insert","_$effect","_p$","_v$","undefined","_v$2","_v$3","_v$4","e","_$setAttribute","t","_$className","a","o","sendButton","color","onHolderMouseDown","target","focus","_el$3","_tmpl$3","class","TextField","fullWidth","onChange","startAdornment","endAdornment","onKeyDown","TextFieldWrapper","isFilledState","shrink","_$memo","_el$2","_tmpl$2","$$keydown","addEventListener","$$input","_$use","el","_v$5","_v$6","_v$7","_$delegateEvents"],"mappings":"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"}

package/dist/headless/components/dataDisplay/chat/chatHeader.js

@@ -0,0 +1,89 @@
+import { insert as n, createComponent as l, effect as g, className as m, template as o } from "solid-js/web";
+import { Show as a, For as _ } from "solid-js";
+import f from "clsx";
+import { ChatIconButton as h } from "./chatIconButton.js";
+import { getChatLayoutActions as w } from "./utils.js";
+import { Icon as s } from "../../base/icon/icon.js";
+var b = /* @__PURE__ */ o("<div class=smwb-chat-header__title>"), C = /* @__PURE__ */ o("<div class=smwb-chat-header__subtitle>"), y = /* @__PURE__ */ o("<div data-testid=chat-header><div class=smwb-chat-header__main></div><div class=smwb-chat-header__actions>");
+const v = {
+  floating: "picture_in_picture",
+  fullHeight: "fit_screen",
+  fullscreen: "open_in_full"
+}, $ = {
+  floating: "Floating window",
+  fullHeight: "Full height",
+  fullscreen: "Fullscreen"
+};
+function x(t) {
+  const u = () => w(t.allowedLayouts ?? ["floating"], t.layout), d = () => !!t.onLayoutChange && u().length > 0;
+  return (() => {
+    var r = y(), i = r.firstChild, c = i.nextSibling;
+    return n(i, l(a, {
+      get when() {
+        return t.title;
+      },
+      get children() {
+        var e = b();
+        return n(e, () => t.title), e;
+      }
+    }), null), n(i, l(a, {
+      get when() {
+        return t.subtitle;
+      },
+      get children() {
+        var e = C();
+        return n(e, () => t.subtitle), e;
+      }
+    }), null), n(c, () => t.actions, null), n(c, l(a, {
+      get when() {
+        return d();
+      },
+      get children() {
+        return l(_, {
+          get each() {
+            return u();
+          },
+          children: (e) => l(h, {
+            get "aria-pressed"() {
+              return t.layout === e;
+            },
+            get "aria-label"() {
+              return $[e];
+            },
+            "data-testid": `chat-layout-${e}`,
+            onClick: () => t.onLayoutChange?.(e),
+            get children() {
+              return l(s, {
+                get name() {
+                  return v[e];
+                },
+                size: 18
+              });
+            }
+          })
+        });
+      }
+    }), null), n(c, l(a, {
+      get when() {
+        return t.onClose;
+      },
+      get children() {
+        return l(h, {
+          "aria-label": "Close chat",
+          "data-testid": "chat-close",
+          onClick: () => t.onClose?.(),
+          get children() {
+            return l(s, {
+              name: "close",
+              size: 18
+            });
+          }
+        });
+      }
+    }), null), g(() => m(r, f("smwb-chat-header", t.class))), r;
+  })();
+}
+export {
+  x as ChatHeader
+};
+//# sourceMappingURL=chatHeader.js.map

package/dist/headless/components/dataDisplay/chat/chatHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chatHeader.js","sources":["../../../../../src/components/dataDisplay/chat/chatHeader.tsx"],"sourcesContent":["import { type JSX, For, Show } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { ChatIconButton } from \"./chatIconButton\";\nimport type { ChatLayoutMode } from \"./types\";\nimport { getChatLayoutActions } from \"./utils\";\n\nexport interface ChatHeaderProps {\n  class?: string | undefined;\n  title?: JSX.Element;\n  subtitle?: JSX.Element;\n  actions?: JSX.Element;\n  layout?: ChatLayoutMode | undefined;\n  allowedLayouts?: ChatLayoutMode[] | undefined;\n  onLayoutChange?: ((layout: ChatLayoutMode) => void) | undefined;\n  onClose?: (() => void) | undefined;\n}\n\nconst layoutIcons: Record<Exclude<ChatLayoutMode, \"closed\">, string> = {\n  floating: \"picture_in_picture\",\n  fullHeight: \"fit_screen\",\n  fullscreen: \"open_in_full\",\n};\n\nconst layoutAriaLabels: Record<Exclude<ChatLayoutMode, \"closed\">, string> = {\n  floating: \"Floating window\",\n  fullHeight: \"Full height\",\n  fullscreen: \"Fullscreen\",\n};\n\nexport function ChatHeader(props: ChatHeaderProps): JSX.Element {\n  const layoutActions = (): Exclude<ChatLayoutMode, \"closed\">[] =>\n    getChatLayoutActions(props.allowedLayouts ?? [\"floating\"], props.layout);\n  const showLayoutActions = (): boolean => Boolean(props.onLayoutChange) && layoutActions().length > 0;\n\n  return (\n    <div class={cn(\"smwb-chat-header\", props.class)} data-testid=\"chat-header\">\n      <div class=\"smwb-chat-header__main\">\n        <Show when={props.title}>\n          <div class=\"smwb-chat-header__title\">{props.title}</div>\n        </Show>\n        <Show when={props.subtitle}>\n          <div class=\"smwb-chat-header__subtitle\">{props.subtitle}</div>\n        </Show>\n      </div>\n      <div class=\"smwb-chat-header__actions\">\n        {props.actions}\n        <Show when={showLayoutActions()}>\n          <For each={layoutActions()}>\n            {(mode) => (\n              <ChatIconButton\n                aria-pressed={props.layout === mode}\n                aria-label={layoutAriaLabels[mode]}\n                data-testid={`chat-layout-${mode}`}\n                onClick={() => props.onLayoutChange?.(mode)}\n              >\n                <Icon name={layoutIcons[mode]} size={18} />\n              </ChatIconButton>\n            )}\n          </For>\n        </Show>\n        <Show when={props.onClose}>\n          <ChatIconButton aria-label=\"Close chat\" data-testid=\"chat-close\" onClick={() => props.onClose?.()}>\n            <Icon name=\"close\" size={18} />\n          </ChatIconButton>\n        </Show>\n      </div>\n    </div>\n  );\n}\n\nexport default ChatHeader;\n"],"names":["layoutIcons","floating","fullHeight","fullscreen","layoutAriaLabels","ChatHeader","props","layoutActions","getChatLayoutActions","allowedLayouts","layout","showLayoutActions","Boolean","onLayoutChange","length","_el$","_tmpl$3","_el$2","firstChild","_el$5","nextSibling","_$insert","_$createComponent","Show","when","title","children","_el$3","_tmpl$","subtitle","_el$4","_tmpl$2","actions","For","each","mode","ChatIconButton","onClick","Icon","name","size","onClose","_$effect","_$className","cn","class"],"mappings":";;;;;;;AAkBA,MAAMA,IAAiE;AAAA,EACrEC,UAAU;AAAA,EACVC,YAAY;AAAA,EACZC,YAAY;AACd,GAEMC,IAAsE;AAAA,EAC1EH,UAAU;AAAA,EACVC,YAAY;AAAA,EACZC,YAAY;AACd;AAEO,SAASE,EAAWC,GAAqC;AAC9D,QAAMC,IAAgBA,MACpBC,EAAqBF,EAAMG,kBAAkB,CAAC,UAAU,GAAGH,EAAMI,MAAM,GACnEC,IAAoBA,MAAeC,EAAQN,EAAMO,kBAAmBN,EAAAA,EAAgBO,SAAS;AAEnG,UAAA,MAAA;AAAA,QAAAC,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG,YAAAC,IAAAF,EAAAG;AAAAC,WAAAA,EAAAJ,GAAAK,EAGOC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAElB,EAAMmB;AAAAA,MAAK;AAAA,MAAA,IAAAC,WAAA;AAAA,YAAAC,IAAAC,EAAAA;AAAAP,eAAAA,EAAAM,GAAA,MACiBrB,EAAMmB,KAAK,GAAAE;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAN,EAAAJ,GAAAK,EAElDC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAElB,EAAMuB;AAAAA,MAAQ;AAAA,MAAA,IAAAH,WAAA;AAAA,YAAAI,IAAAC,EAAAA;AAAAV,eAAAA,EAAAS,GAAA,MACiBxB,EAAMuB,QAAQ,GAAAC;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAT,EAAAF,GAAA,MAIxDb,EAAM0B,SAAO,IAAA,GAAAX,EAAAF,GAAAG,EACbC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEb,EAAAA;AAAAA,MAAmB;AAAA,MAAA,IAAAe,WAAA;AAAA,eAAAJ,EAC5BW,GAAG;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAE3B,EAAAA;AAAAA,UAAe;AAAA,UAAAmB,UACtBS,CAAAA,MAAIb,EACHc,GAAc;AAAA,YAAA,IAAA,iBAAA;AAAA,qBACC9B,EAAMI,WAAWyB;AAAAA,YAAI;AAAA,YAAA,IAAA,eAAA;AAAA,qBACvB/B,EAAiB+B,CAAI;AAAA,YAAC;AAAA,YAAA,eACrB,eAAeA,CAAI;AAAA,YAChCE,SAASA,MAAM/B,EAAMO,iBAAiBsB,CAAI;AAAA,YAAC,IAAAT,WAAA;AAAA,qBAAAJ,EAE1CgB,GAAI;AAAA,gBAAA,IAACC,OAAI;AAAA,yBAAEvC,EAAYmC,CAAI;AAAA,gBAAC;AAAA,gBAAEK,MAAM;AAAA,cAAA,CAAE;AAAA,YAAA;AAAA,UAAA,CAAA;AAAA,QAAA,CAE1C;AAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAnB,EAAAF,GAAAG,EAGJC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAElB,EAAMmC;AAAAA,MAAO;AAAA,MAAA,IAAAf,WAAA;AAAA,eAAAJ,EACtBc,GAAc;AAAA,UAAA,cAAA;AAAA,UAAA,eAAA;AAAA,UAAkDC,SAASA,MAAM/B,EAAMmC,UAAAA;AAAAA,UAAW,IAAAf,WAAA;AAAA,mBAAAJ,EAC9FgB,GAAI;AAAA,cAACC,MAAI;AAAA,cAASC,MAAM;AAAA,YAAA,CAAE;AAAA,UAAA;AAAA,QAAA,CAAA;AAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAE,EAAA,MAAAC,EAAA5B,GA3BvB6B,EAAG,oBAAoBtC,EAAMuC,KAAK,CAAC,CAAA,GAAA9B;AAAAA,EAAA,GAAA;AAiCnD;"}

package/dist/headless/components/dataDisplay/chat/chatIconButton.js

@@ -0,0 +1,42 @@
+import { use as m, spread as p, mergeProps as u, insert as n, createComponent as s, template as b } from "solid-js/web";
+import { mergeProps as f, splitProps as g, Show as h } from "solid-js";
+import w from "clsx";
+import { mergeRefs as _ } from "../../../primitives/mergeRefs.js";
+import { Ripple as P } from "../../base/ripple/ripple.js";
+var y = /* @__PURE__ */ b("<button>");
+function x(i) {
+  const l = f({
+    color: "default"
+  }, i), [e, a] = g(l, ["class", "children", "disabled", "edge", "color", "ref"]);
+  let r;
+  const c = (t) => {
+    e.disabled || r?.onRipple(t);
+  };
+  return (() => {
+    var t = y(), o = _(e.ref);
+    return typeof o == "function" && m(o, t), p(t, u(a, {
+      type: "button",
+      get class() {
+        return w("smwb-chat-icon-button", e.edge === "start" && "smwb-chat-icon-button_edge-start", e.edge === "end" && "smwb-chat-icon-button_edge-end", e.color === "primary" && "smwb-chat-icon-button_primary", e.disabled && "smwb-chat-icon-button_disabled", e.class);
+      },
+      get disabled() {
+        return e.disabled;
+      },
+      onPointerDown: c
+    }), !1, !0), n(t, () => e.children, null), n(t, s(h, {
+      get when() {
+        return !e.disabled;
+      },
+      get children() {
+        return s(P, {
+          actionRef: (d) => r = d,
+          center: !0
+        });
+      }
+    }), null), t;
+  })();
+}
+export {
+  x as ChatIconButton
+};
+//# sourceMappingURL=chatIconButton.js.map

package/dist/headless/components/dataDisplay/chat/chatIconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chatIconButton.js","sources":["../../../../../src/components/dataDisplay/chat/chatIconButton.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ChatIconButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {\n  edge?: \"start\" | \"end\" | undefined;\n  color?: \"default\" | \"primary\" | undefined;\n  ref?: Ref<HTMLButtonElement>;\n}\n\nexport function ChatIconButton(props: ParentProps<ChatIconButtonProps>): JSX.Element {\n  const merged = mergeProps({ color: \"default\" as const }, props);\n  const [local, rest] = splitProps(merged, [\"class\", \"children\", \"disabled\", \"edge\", \"color\", \"ref\"]);\n\n  let rippleActions: RippleActionsRef | undefined;\n\n  const onPointerDown = (event: PointerEvent): void => {\n    if (!local.disabled) rippleActions?.onRipple(event);\n  };\n\n  return (\n    <button\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      type=\"button\"\n      class={cn(\n        \"smwb-chat-icon-button\",\n        local.edge === \"start\" && \"smwb-chat-icon-button_edge-start\",\n        local.edge === \"end\" && \"smwb-chat-icon-button_edge-end\",\n        local.color === \"primary\" && \"smwb-chat-icon-button_primary\",\n        local.disabled && \"smwb-chat-icon-button_disabled\",\n        local.class\n      )}\n      disabled={local.disabled}\n      onPointerDown={onPointerDown}\n    >\n      {local.children}\n      <Show when={!local.disabled}>\n        <Ripple actionRef={(actions) => (rippleActions = actions)} center />\n      </Show>\n    </button>\n  );\n}\n\nexport default ChatIconButton;\n"],"names":["ChatIconButton","props","merged","mergeProps","color","local","rest","splitProps","rippleActions","onPointerDown","event","disabled","onRipple","_el$","_tmpl$","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","edge","class","_$insert","children","_$createComponent","Show","when","Ripple","actionRef","actions","center"],"mappings":";;;;;;AAWO,SAASA,EAAeC,GAAsD;AACnF,QAAMC,IAASC,EAAW;AAAA,IAAEC,OAAO;AAAA,EAAA,GAAsBH,CAAK,GACxD,CAACI,GAAOC,CAAI,IAAIC,EAAWL,GAAQ,CAAC,SAAS,YAAY,YAAY,QAAQ,SAAS,KAAK,CAAC;AAElG,MAAIM;AAEJ,QAAMC,IAAgBA,CAACC,MAA8B;AACnD,IAAKL,EAAMM,YAAUH,GAAeI,SAASF,CAAK;AAAA,EACpD;AAEA,UAAA,MAAA;AAAA,QAAAG,IAAAC,EAAAA,GAAAC,IAGSC,EAAUX,EAAMY,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAF,CAAA,GAAAM,EAAAN,GAAAO,EADrBd,GAAI;AAAA,MAAA,MAEH;AAAA,MAAQ,IAAA,QAAA;AAAA,eACNe,EACL,yBACAhB,EAAMiB,SAAS,WAAW,oCAC1BjB,EAAMiB,SAAS,SAAS,kCACxBjB,EAAMD,UAAU,aAAa,iCAC7BC,EAAMM,YAAY,kCAClBN,EAAMkB,KACR;AAAA,MAAC;AAAA,MAAA,IACDZ,WAAQ;AAAA,eAAEN,EAAMM;AAAAA,MAAQ;AAAA,MAAA,eACTF;AAAAA,IAAAA,CAAa,GAAA,IAAA,EAAA,GAAAe,EAAAX,GAAA,MAE3BR,EAAMoB,UAAQ,IAAA,GAAAD,EAAAX,GAAAa,EACdC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAE,CAACvB,EAAMM;AAAAA,MAAQ;AAAA,MAAA,IAAAc,WAAA;AAAA,eAAAC,EACxBG,GAAM;AAAA,UAACC,WAAYC,OAAavB,IAAgBuB;AAAAA,UAAUC,QAAM;AAAA,QAAA,CAAA;AAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAnB;AAAAA,EAAA,GAAA;AAIzE;"}