@smwb/ui-solid 0.1.0

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

@@ -0,0 +1,147 @@
+import { createComponent as a, spread as C, mergeProps as s, insert as o, effect as b, className as _, template as k, memo as c } from "solid-js/web";
+import { mergeProps as E, splitProps as F, createEffect as H, Show as i } from "solid-js";
+import d from "clsx";
+import { ChatIconButton as w } from "./chatIconButton.js";
+import { createControllableState as A } from "../../../primitives/createControllableState.js";
+import { Chat as h } from "./chat.js";
+import { Icon as $ } from "../../base/icon/icon.js";
+var L = /* @__PURE__ */ k("<div><div data-testid=chat-layout-content>"), x = /* @__PURE__ */ k("<aside class=smwb-chat-layout__panel data-testid=chat-layout-panel>");
+const V = (l) => typeof l == "number" ? `${l}px` : l, j = (l) => l === "left" ? "bottom-left" : "bottom-right";
+function M(l) {
+  const v = E({
+    side: "right",
+    chatWidth: 400,
+    defaultCollapsed: !1,
+    collapseAriaLabel: "Collapse chat panel",
+    expandAriaLabel: "Expand chat panel"
+  }, l), [t, u] = F(v, ["class", "contentClass", "chatClass", "side", "chatWidth", "collapsed", "defaultCollapsed", "onCollapsedChange", "collapseAriaLabel", "expandAriaLabel", "floatingAnchor", "chat", "children", "style"]), [p, g] = A({
+    value: () => t.collapsed,
+    defaultValue: t.defaultCollapsed,
+    onChange: t.onCollapsedChange
+  }), [I, f] = A({
+    defaultValue: !1
+  });
+  H(() => {
+    p() || f(!1);
+  });
+  const P = () => t.floatingAnchor ?? j(t.side), S = () => t.side === "left" ? "dock_to_left" : "dock_to_right", B = () => t.side === "left" ? "left_panel_close" : "right_panel_close", O = () => a(w, {
+    get "aria-label"() {
+      return t.collapseAriaLabel;
+    },
+    "data-testid": "chat-layout-collapse",
+    onClick: () => g(!0),
+    get children() {
+      return a($, {
+        get name() {
+          return B();
+        },
+        size: 18
+      });
+    }
+  }), W = () => a(w, {
+    get "aria-label"() {
+      return t.expandAriaLabel;
+    },
+    "data-testid": "chat-layout-expand",
+    onClick: () => g(!1),
+    get children() {
+      return a($, {
+        get name() {
+          return S();
+        },
+        size: 18
+      });
+    }
+  }), m = () => [c(() => t.chat.headerActions), c(O)], z = () => [c(() => t.chat.headerActions), c(W)], y = () => ({
+    "--smwb-chat-layout-w": V(t.chatWidth),
+    ...typeof t.style == "object" && t.style ? t.style : {}
+  });
+  return a(i, {
+    get when() {
+      return p();
+    },
+    get fallback() {
+      return (() => {
+        var e = L(), r = e.firstChild;
+        return C(e, s(u, {
+          get class() {
+            return d("smwb-chat-layout", `smwb-chat-layout_${t.side}`, t.class);
+          },
+          get style() {
+            return y();
+          },
+          "data-testid": "chat-layout",
+          "data-collapsed": "false"
+        }), !1, !0), o(e, a(i, {
+          get when() {
+            return t.side === "left";
+          },
+          get children() {
+            var n = x();
+            return o(n, a(h, s(() => t.chat, {
+              get class() {
+                return t.chatClass;
+              },
+              embedded: !0,
+              allowedLayouts: [],
+              get headerActions() {
+                return m();
+              }
+            }))), n;
+          }
+        }), r), o(r, () => t.children), o(e, a(i, {
+          get when() {
+            return t.side === "right";
+          },
+          get children() {
+            var n = x();
+            return o(n, a(h, s(() => t.chat, {
+              get class() {
+                return t.chatClass;
+              },
+              embedded: !0,
+              allowedLayouts: [],
+              get headerActions() {
+                return m();
+              }
+            }))), n;
+          }
+        }), null), b(() => _(r, d("smwb-chat-layout__content", t.contentClass))), e;
+      })();
+    },
+    get children() {
+      var e = L(), r = e.firstChild;
+      return C(e, s(u, {
+        get class() {
+          return d("smwb-chat-layout", "smwb-chat-layout_collapsed", t.class);
+        },
+        get style() {
+          return y();
+        },
+        "data-testid": "chat-layout",
+        "data-collapsed": "true"
+      }), !1, !0), o(r, () => t.children), o(e, a(h, s(() => t.chat, {
+        get class() {
+          return t.chatClass;
+        },
+        floatingTrigger: !0,
+        get anchor() {
+          return P();
+        },
+        allowedLayouts: ["floating"],
+        layout: "floating",
+        get open() {
+          return I();
+        },
+        onOpenChange: f,
+        get headerActions() {
+          return z();
+        }
+      })), null), b(() => _(r, d("smwb-chat-layout__content", t.contentClass))), e;
+    }
+  });
+}
+export {
+  M as ChatLayout
+};
+//# sourceMappingURL=chatLayout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chatLayout.js","sources":["../../../../../src/components/dataDisplay/chat/chatLayout.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, createEffect, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { ChatIconButton } from \"./chatIconButton\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { Chat, type ChatProps } from \"./chat\";\nimport type { ChatAnchor, ChatLayoutSide } from \"./types\";\n\nconst len = (value: number | string): string => (typeof value === \"number\" ? `${value}px` : value);\n\nconst floatingAnchorForSide = (side: ChatLayoutSide): ChatAnchor => (side === \"left\" ? \"bottom-left\" : \"bottom-right\");\n\nexport type ChatLayoutChatProps = Omit<\n  ChatProps,\n  | \"class\"\n  | \"embedded\"\n  | \"floatingTrigger\"\n  | \"anchor\"\n  | \"allowedLayouts\"\n  | \"layout\"\n  | \"defaultLayout\"\n  | \"open\"\n  | \"defaultOpen\"\n  | \"onOpenChange\"\n  | \"onLayoutChange\"\n>;\n\nexport interface ChatLayoutProps extends ParentProps, JSX.HTMLAttributes<HTMLDivElement> {\n  contentClass?: string | undefined;\n  chatClass?: string | undefined;\n  side?: ChatLayoutSide | undefined;\n  chatWidth?: number | string | undefined;\n  collapsed?: boolean | undefined;\n  defaultCollapsed?: boolean | undefined;\n  onCollapsedChange?: ((collapsed: boolean) => void) | undefined;\n  collapseAriaLabel?: string | undefined;\n  expandAriaLabel?: string | undefined;\n  floatingAnchor?: ChatAnchor | undefined;\n  chat: ChatLayoutChatProps;\n}\n\nexport function ChatLayout(props: ChatLayoutProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      side: \"right\" as const,\n      chatWidth: 400 as number | string,\n      defaultCollapsed: false,\n      collapseAriaLabel: \"Collapse chat panel\",\n      expandAriaLabel: \"Expand chat panel\",\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"contentClass\",\n    \"chatClass\",\n    \"side\",\n    \"chatWidth\",\n    \"collapsed\",\n    \"defaultCollapsed\",\n    \"onCollapsedChange\",\n    \"collapseAriaLabel\",\n    \"expandAriaLabel\",\n    \"floatingAnchor\",\n    \"chat\",\n    \"children\",\n    \"style\",\n  ]);\n\n  const [collapsed, setCollapsed] = createControllableState<boolean>({\n    value: () => local.collapsed,\n    defaultValue: local.defaultCollapsed,\n    onChange: local.onCollapsedChange,\n  });\n\n  const [floatingOpen, setFloatingOpen] = createControllableState<boolean>({ defaultValue: false });\n\n  createEffect(() => {\n    if (!collapsed()) {\n      setFloatingOpen(false);\n    }\n  });\n\n  const anchor = (): ChatAnchor => local.floatingAnchor ?? floatingAnchorForSide(local.side);\n  const dockIcon = (): string => (local.side === \"left\" ? \"dock_to_left\" : \"dock_to_right\");\n  const collapseIcon = (): string => (local.side === \"left\" ? \"left_panel_close\" : \"right_panel_close\");\n\n  const collapseButton = (): JSX.Element => (\n    <ChatIconButton aria-label={local.collapseAriaLabel} data-testid=\"chat-layout-collapse\" onClick={() => setCollapsed(true)}>\n      <Icon name={collapseIcon()} size={18} />\n    </ChatIconButton>\n  );\n\n  const expandButton = (): JSX.Element => (\n    <ChatIconButton aria-label={local.expandAriaLabel} data-testid=\"chat-layout-expand\" onClick={() => setCollapsed(false)}>\n      <Icon name={dockIcon()} size={18} />\n    </ChatIconButton>\n  );\n\n  const dockedHeaderActions = (): JSX.Element => (\n    <>\n      {local.chat.headerActions}\n      {collapseButton()}\n    </>\n  );\n\n  const floatingHeaderActions = (): JSX.Element => (\n    <>\n      {local.chat.headerActions}\n      {expandButton()}\n    </>\n  );\n\n  const rootStyle = (): JSX.CSSProperties => ({\n    \"--smwb-chat-layout-w\": len(local.chatWidth),\n    ...(typeof local.style === \"object\" && local.style ? local.style : {}),\n  });\n\n  return (\n    <Show\n      when={collapsed()}\n      fallback={\n        <div\n          {...rest}\n          class={cn(\"smwb-chat-layout\", `smwb-chat-layout_${local.side}`, local.class)}\n          style={rootStyle()}\n          data-testid=\"chat-layout\"\n          data-collapsed=\"false\"\n        >\n          <Show when={local.side === \"left\"}>\n            <aside class=\"smwb-chat-layout__panel\" data-testid=\"chat-layout-panel\">\n              <Chat {...local.chat} class={local.chatClass} embedded allowedLayouts={[]} headerActions={dockedHeaderActions()} />\n            </aside>\n          </Show>\n          <div class={cn(\"smwb-chat-layout__content\", local.contentClass)} data-testid=\"chat-layout-content\">\n            {local.children}\n          </div>\n          <Show when={local.side === \"right\"}>\n            <aside class=\"smwb-chat-layout__panel\" data-testid=\"chat-layout-panel\">\n              <Chat {...local.chat} class={local.chatClass} embedded allowedLayouts={[]} headerActions={dockedHeaderActions()} />\n            </aside>\n          </Show>\n        </div>\n      }\n    >\n      <div\n        {...rest}\n        class={cn(\"smwb-chat-layout\", \"smwb-chat-layout_collapsed\", local.class)}\n        style={rootStyle()}\n        data-testid=\"chat-layout\"\n        data-collapsed=\"true\"\n      >\n        <div class={cn(\"smwb-chat-layout__content\", local.contentClass)} data-testid=\"chat-layout-content\">\n          {local.children}\n        </div>\n        <Chat\n          {...local.chat}\n          class={local.chatClass}\n          floatingTrigger\n          anchor={anchor()}\n          allowedLayouts={[\"floating\"]}\n          layout=\"floating\"\n          open={floatingOpen()}\n          onOpenChange={setFloatingOpen}\n          headerActions={floatingHeaderActions()}\n        />\n      </div>\n    </Show>\n  );\n}\n\nexport default ChatLayout;\n"],"names":["len","value","floatingAnchorForSide","side","ChatLayout","props","merged","mergeProps","chatWidth","defaultCollapsed","collapseAriaLabel","expandAriaLabel","local","rest","splitProps","collapsed","setCollapsed","createControllableState","defaultValue","onChange","onCollapsedChange","floatingOpen","setFloatingOpen","createEffect","anchor","floatingAnchor","dockIcon","collapseIcon","collapseButton","_$createComponent","ChatIconButton","onClick","children","Icon","name","size","expandButton","dockedHeaderActions","_$memo","chat","headerActions","floatingHeaderActions","rootStyle","style","Show","when","fallback","_el$3","_tmpl$","_el$5","firstChild","_$spread","_$mergeProps","cn","class","_$insert","_el$4","_tmpl$2","Chat","chatClass","embedded","allowedLayouts","_el$6","_$effect","_$className","contentClass","_el$","_el$2","floatingTrigger","layout","open","onOpenChange"],"mappings":"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"}

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

@@ -0,0 +1,32 @@
+import { createComponent as e, insert as n, effect as m, className as c, template as l } from "solid-js/web";
+import { Show as o } from "solid-js";
+import s from "clsx";
+import { Avatar as i } from "../avatar/avatar.js";
+var u = /* @__PURE__ */ l("<div data-testid=chat-message-avatar>");
+function f(t) {
+  const r = () => t.enabled ?? !0;
+  return e(o, {
+    get when() {
+      return r();
+    },
+    get children() {
+      var a = u();
+      return n(a, e(i, {
+        get src() {
+          return t.author?.avatarSrc;
+        },
+        get alt() {
+          return t.author?.avatarAlt ?? t.author?.name;
+        },
+        size: "small",
+        get children() {
+          return t.author?.name?.slice(0, 1);
+        }
+      })), m(() => c(a, s("smwb-chat-message__avatar", t.class))), a;
+    }
+  });
+}
+export {
+  f as ChatMessageAvatar
+};
+//# sourceMappingURL=chatMessageAvatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chatMessageAvatar.js","sources":["../../../../../src/components/dataDisplay/chat/chatMessageAvatar.tsx"],"sourcesContent":["import { type JSX, Show } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Avatar } from \"../avatar\";\nimport type { ChatAuthor } from \"./types\";\n\nexport interface ChatMessageAvatarProps {\n  author?: ChatAuthor | undefined;\n  enabled?: boolean | undefined;\n  class?: string | undefined;\n}\n\nexport function ChatMessageAvatar(props: ChatMessageAvatarProps): JSX.Element {\n  const enabled = (): boolean => props.enabled ?? true;\n\n  return (\n    <Show when={enabled()}>\n      <div class={cn(\"smwb-chat-message__avatar\", props.class)} data-testid=\"chat-message-avatar\">\n        <Avatar src={props.author?.avatarSrc} alt={props.author?.avatarAlt ?? props.author?.name} size=\"small\">\n          {props.author?.name?.slice(0, 1)}\n        </Avatar>\n      </div>\n    </Show>\n  );\n}\n\nexport default ChatMessageAvatar;\n"],"names":["ChatMessageAvatar","props","enabled","_$createComponent","Show","when","children","_el$","_tmpl$","_$insert","Avatar","src","author","avatarSrc","alt","avatarAlt","name","size","slice","_$effect","_$className","cn","class"],"mappings":";;;;;AAWO,SAASA,EAAkBC,GAA4C;AAC5E,QAAMC,IAAUA,MAAeD,EAAMC,WAAW;AAEhD,SAAAC,EACGC,GAAI;AAAA,IAAA,IAACC,OAAI;AAAA,aAAEH,EAAAA;AAAAA,IAAS;AAAA,IAAA,IAAAI,WAAA;AAAA,UAAAC,IAAAC,EAAAA;AAAAC,aAAAA,EAAAF,GAAAJ,EAEhBO,GAAM;AAAA,QAAA,IAACC,MAAG;AAAA,iBAAEV,EAAMW,QAAQC;AAAAA,QAAS;AAAA,QAAA,IAAEC,MAAG;AAAA,iBAAEb,EAAMW,QAAQG,aAAad,EAAMW,QAAQI;AAAAA,QAAI;AAAA,QAAEC,MAAI;AAAA,QAAA,IAAAX,WAAA;AAAA,iBAC3FL,EAAMW,QAAQI,MAAME,MAAM,GAAG,CAAC;AAAA,QAAC;AAAA,MAAA,CAAA,CAAA,GAAAC,EAAA,MAAAC,EAAAb,GAFxBc,EAAG,6BAA6BpB,EAAMqB,KAAK,CAAC,CAAA,GAAAf;AAAAA,IAAA;AAAA,EAAA,CAAA;AAO9D;"}

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

@@ -0,0 +1,122 @@
+import { insert as r, createComponent as a, effect as f, className as o, setAttribute as C, template as i } from "solid-js/web";
+import { Show as n } from "solid-js";
+import v from "clsx";
+import { ChatAttachments as S } from "./chatAttachments.js";
+import { ChatMessageAvatar as w } from "./chatMessageAvatar.js";
+import { ChatMessageStatus as $ } from "./chatMessageStatus.js";
+import { formatChatTimestamp as A } from "./utils.js";
+import { Typography as b } from "../typography/typography.js";
+var x = /* @__PURE__ */ i("<div class=smwb-chat-message__text>"), y = /* @__PURE__ */ i("<div class=smwb-chat-message__meta data-testid=chat-message-meta>"), M = /* @__PURE__ */ i("<div><div class=smwb-chat-message__content><div>");
+function D(t) {
+  const h = () => A(t.timestamp), _ = () => t.status ?? t.message.status, g = () => t.showStatus && t.align === "end" ? _() : void 0;
+  return (() => {
+    var s = M(), m = s.firstChild, u = m.firstChild;
+    return r(s, a(n, {
+      get when() {
+        return t.align === "start";
+      },
+      get children() {
+        return a(w, {
+          get author() {
+            return t.author;
+          },
+          get enabled() {
+            return t.showAvatars;
+          }
+        });
+      }
+    }), m), r(m, a(n, {
+      get when() {
+        return t.author?.name;
+      },
+      get children() {
+        return a(b, {
+          variant: "caption",
+          class: "smwb-chat-message__author",
+          get children() {
+            return t.author?.name;
+          }
+        });
+      }
+    }), u), r(u, a(n, {
+      get when() {
+        return t.text;
+      },
+      get children() {
+        var e = x();
+        return r(e, () => t.text), e;
+      }
+    }), null), r(u, a(S, {
+      get attachments() {
+        return t.attachments;
+      },
+      get enabled() {
+        return t.showAttachments;
+      }
+    }), null), r(m, a(n, {
+      get when() {
+        return h() || g();
+      },
+      get children() {
+        var e = y();
+        return r(e, a(n, {
+          get when() {
+            return h();
+          },
+          get children() {
+            return a(b, {
+              variant: "caption",
+              class: "smwb-chat-message__time",
+              get children() {
+                return h();
+              }
+            });
+          }
+        }), null), r(e, a(n, {
+          get when() {
+            return g();
+          },
+          children: (l) => a($, {
+            get message() {
+              return t.message;
+            },
+            get status() {
+              return l();
+            },
+            get statusIcons() {
+              return t.statusIcons;
+            },
+            get renderStatus() {
+              return t.renderStatus;
+            }
+          })
+        }), null), e;
+      }
+    }), null), r(s, a(n, {
+      get when() {
+        return t.align === "end";
+      },
+      get children() {
+        return a(w, {
+          get author() {
+            return t.author;
+          },
+          get enabled() {
+            return t.showAvatars;
+          }
+        });
+      }
+    }), null), f((e) => {
+      var l = v("smwb-chat-message", `smwb-chat-message_${t.align}`, t.class), c = `chat-message-${t.align}`, d = v("smwb-chat-message__bubble", t.bubbleClass);
+      return l !== e.e && o(s, e.e = l), c !== e.t && C(s, "data-testid", e.t = c), d !== e.a && o(u, e.a = d), e;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0
+    }), s;
+  })();
+}
+export {
+  D as ChatMessageBubble
+};
+//# sourceMappingURL=chatMessageBubble.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chatMessageBubble.js","sources":["../../../../../src/components/dataDisplay/chat/chatMessageBubble.tsx"],"sourcesContent":["import { type JSX, Show } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Typography } from \"../typography\";\nimport { ChatAttachments } from \"./chatAttachments\";\nimport { ChatMessageAvatar } from \"./chatMessageAvatar\";\nimport { ChatMessageStatus } from \"./chatMessageStatus\";\nimport type {\n  ChatAttachment,\n  ChatAuthor,\n  ChatMessage,\n  ChatMessageStatusIcons,\n  ChatMessageStatusRenderContext,\n  ChatMessageStatus as ChatMessageStatusValue,\n} from \"./types\";\nimport { formatChatTimestamp } from \"./utils\";\n\nexport interface ChatMessageBubbleProps {\n  class?: string | undefined;\n  align: \"start\" | \"end\";\n  message: ChatMessage;\n  author?: ChatAuthor | undefined;\n  text?: JSX.Element;\n  attachments?: ChatAttachment[] | undefined;\n  timestamp?: string | Date | undefined;\n  status?: ChatMessageStatusValue | undefined;\n  showAvatars?: boolean | undefined;\n  showAttachments?: boolean | undefined;\n  showStatus?: boolean | undefined;\n  statusIcons?: (ChatMessageStatusIcons & Record<string, string | undefined>) | undefined;\n  renderStatus?: ((ctx: ChatMessageStatusRenderContext) => JSX.Element) | undefined;\n  bubbleClass?: string | undefined;\n}\n\nexport function ChatMessageBubble(props: ChatMessageBubbleProps): JSX.Element {\n  const time = (): string => formatChatTimestamp(props.timestamp);\n  const deliveryStatus = (): ChatMessageStatusValue | undefined => props.status ?? props.message.status;\n  const statusToShow = (): ChatMessageStatusValue | undefined =>\n    props.showStatus && props.align === \"end\" ? deliveryStatus() : undefined;\n\n  return (\n    <div class={cn(\"smwb-chat-message\", `smwb-chat-message_${props.align}`, props.class)} data-testid={`chat-message-${props.align}`}>\n      <Show when={props.align === \"start\"}>\n        <ChatMessageAvatar author={props.author} enabled={props.showAvatars} />\n      </Show>\n      <div class=\"smwb-chat-message__content\">\n        <Show when={props.author?.name}>\n          <Typography variant=\"caption\" class=\"smwb-chat-message__author\">\n            {props.author?.name}\n          </Typography>\n        </Show>\n        <div class={cn(\"smwb-chat-message__bubble\", props.bubbleClass)}>\n          <Show when={props.text}>\n            <div class=\"smwb-chat-message__text\">{props.text}</div>\n          </Show>\n          <ChatAttachments attachments={props.attachments} enabled={props.showAttachments} />\n        </div>\n        <Show when={time() || statusToShow()}>\n          <div class=\"smwb-chat-message__meta\" data-testid=\"chat-message-meta\">\n            <Show when={time()}>\n              <Typography variant=\"caption\" class=\"smwb-chat-message__time\">\n                {time()}\n              </Typography>\n            </Show>\n            <Show when={statusToShow()}>\n              {(status) => (\n                <ChatMessageStatus\n                  message={props.message}\n                  status={status()}\n                  statusIcons={props.statusIcons}\n                  renderStatus={props.renderStatus}\n                />\n              )}\n            </Show>\n          </div>\n        </Show>\n      </div>\n      <Show when={props.align === \"end\"}>\n        <ChatMessageAvatar author={props.author} enabled={props.showAvatars} />\n      </Show>\n    </div>\n  );\n}\n\nexport default ChatMessageBubble;\n"],"names":["ChatMessageBubble","props","time","formatChatTimestamp","timestamp","deliveryStatus","status","message","statusToShow","showStatus","align","undefined","_el$","_tmpl$3","_el$2","firstChild","_el$3","_$insert","_$createComponent","Show","when","children","ChatMessageAvatar","author","enabled","showAvatars","name","Typography","variant","text","_el$4","_tmpl$","ChatAttachments","attachments","showAttachments","_el$5","_tmpl$2","ChatMessageStatus","statusIcons","renderStatus","_$effect","_p$","_v$","cn","class","_v$2","_v$3","bubbleClass","e","_$className","t","_$setAttribute","a"],"mappings":"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"}

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

@@ -0,0 +1,36 @@
+import { createComponent as e } from "solid-js/web";
+import { ChatMessageBubble as a } from "./chatMessageBubble.js";
+function n(t) {
+  return e(a, {
+    get class() {
+      return t.class;
+    },
+    align: "start",
+    get message() {
+      return t.message;
+    },
+    get author() {
+      return t.message.author;
+    },
+    get text() {
+      return t.message.text;
+    },
+    get attachments() {
+      return t.message.attachments;
+    },
+    get timestamp() {
+      return t.message.timestamp;
+    },
+    get showAvatars() {
+      return t.showAvatars;
+    },
+    get showAttachments() {
+      return t.showAttachments;
+    },
+    bubbleClass: "smwb-chat-message__bubble_incoming"
+  });
+}
+export {
+  n as ChatMessageIncoming
+};
+//# sourceMappingURL=chatMessageIncoming.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chatMessageIncoming.js","sources":["../../../../../src/components/dataDisplay/chat/chatMessageIncoming.tsx"],"sourcesContent":["import { type JSX } from \"solid-js\";\nimport { ChatMessageBubble } from \"./chatMessageBubble\";\nimport type { ChatMessage, ChatMessageRenderContext } from \"./types\";\n\nexport interface ChatMessageIncomingProps extends ChatMessageRenderContext {\n  message: ChatMessage;\n  class?: string | undefined;\n}\n\nexport function ChatMessageIncoming(props: ChatMessageIncomingProps): JSX.Element {\n  return (\n    <ChatMessageBubble\n      class={props.class}\n      align=\"start\"\n      message={props.message}\n      author={props.message.author}\n      text={props.message.text}\n      attachments={props.message.attachments}\n      timestamp={props.message.timestamp}\n      showAvatars={props.showAvatars}\n      showAttachments={props.showAttachments}\n      bubbleClass=\"smwb-chat-message__bubble_incoming\"\n    />\n  );\n}\n\nexport default ChatMessageIncoming;\n"],"names":["ChatMessageIncoming","props","_$createComponent","ChatMessageBubble","class","align","message","author","text","attachments","timestamp","showAvatars","showAttachments","bubbleClass"],"mappings":";;AASO,SAASA,EAAoBC,GAA8C;AAChF,SAAAC,EACGC,GAAiB;AAAA,IAAA,IAAA,QAAA;AAAA,aACTF,EAAMG;AAAAA,IAAK;AAAA,IAClBC,OAAK;AAAA,IAAA,IACLC,UAAO;AAAA,aAAEL,EAAMK;AAAAA,IAAO;AAAA,IAAA,IACtBC,SAAM;AAAA,aAAEN,EAAMK,QAAQC;AAAAA,IAAM;AAAA,IAAA,IAC5BC,OAAI;AAAA,aAAEP,EAAMK,QAAQE;AAAAA,IAAI;AAAA,IAAA,IACxBC,cAAW;AAAA,aAAER,EAAMK,QAAQG;AAAAA,IAAW;AAAA,IAAA,IACtCC,YAAS;AAAA,aAAET,EAAMK,QAAQI;AAAAA,IAAS;AAAA,IAAA,IAClCC,cAAW;AAAA,aAAEV,EAAMU;AAAAA,IAAW;AAAA,IAAA,IAC9BC,kBAAe;AAAA,aAAEX,EAAMW;AAAAA,IAAe;AAAA,IACtCC,aAAW;AAAA,EAAA,CAAA;AAGjB;"}

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

@@ -0,0 +1,103 @@
+import { createComponent as e, insert as n, effect as m, className as g, template as u } from "solid-js/web";
+import { Show as i, Switch as w, Match as r } from "solid-js";
+import c from "clsx";
+import { ChatMessageIncoming as l } from "./chatMessageIncoming.js";
+import { ChatMessageOutgoing as o } from "./chatMessageOutgoing.js";
+import { ChatMessageSystem as d } from "./chatMessageSystem.js";
+var v = /* @__PURE__ */ u("<div data-testid=chat-message-custom>"), A = /* @__PURE__ */ u("<div>");
+function _(t) {
+  const h = () => ({
+    showAvatars: t.showAvatars,
+    showAttachments: t.showAttachments,
+    showStatus: t.showStatus,
+    statusIcons: t.statusIcons,
+    renderStatus: t.renderStatus
+  });
+  return e(i, {
+    get when() {
+      return t.renderMessage;
+    },
+    get fallback() {
+      return e(w, {
+        get fallback() {
+          return e(l, {
+            get message() {
+              return t.message;
+            },
+            get showAvatars() {
+              return t.showAvatars;
+            },
+            get showAttachments() {
+              return t.showAttachments;
+            },
+            get class() {
+              return t.class;
+            }
+          });
+        },
+        get children() {
+          return [e(r, {
+            get when() {
+              return t.message.variant === "outgoing";
+            },
+            get children() {
+              return e(o, {
+                get message() {
+                  return t.message;
+                },
+                get showAvatars() {
+                  return t.showAvatars;
+                },
+                get showAttachments() {
+                  return t.showAttachments;
+                },
+                get showStatus() {
+                  return t.showStatus;
+                },
+                get statusIcons() {
+                  return t.statusIcons;
+                },
+                get renderStatus() {
+                  return t.renderStatus;
+                },
+                get class() {
+                  return t.class;
+                }
+              });
+            }
+          }), e(r, {
+            get when() {
+              return t.message.variant === "system";
+            },
+            get children() {
+              return e(d, {
+                get message() {
+                  return t.message;
+                },
+                get class() {
+                  return t.class;
+                }
+              });
+            }
+          }), e(r, {
+            get when() {
+              return t.message.variant === "custom";
+            },
+            get children() {
+              var s = v();
+              return n(s, () => t.message.content ?? t.message.text), m(() => g(s, c("smwb-chat-message-item", "smwb-chat-message-item_custom", t.class))), s;
+            }
+          })];
+        }
+      });
+    },
+    children: (s) => (() => {
+      var a = A();
+      return n(a, () => s()(t.message, h())), m(() => g(a, c("smwb-chat-message-item", t.class))), a;
+    })()
+  });
+}
+export {
+  _ as ChatMessageItem
+};
+//# sourceMappingURL=chatMessageItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chatMessageItem.js","sources":["../../../../../src/components/dataDisplay/chat/chatMessageItem.tsx"],"sourcesContent":["import { type JSX, Match, Show, Switch } from \"solid-js\";\nimport cn from \"clsx\";\nimport { ChatMessageIncoming } from \"./chatMessageIncoming\";\nimport { ChatMessageOutgoing } from \"./chatMessageOutgoing\";\nimport { ChatMessageSystem } from \"./chatMessageSystem\";\nimport type { ChatMessage, ChatMessageRenderContext } from \"./types\";\n\nexport interface ChatMessageItemProps extends ChatMessageRenderContext {\n  message: ChatMessage;\n  class?: string | undefined;\n  renderMessage?: ((message: ChatMessage, ctx: ChatMessageRenderContext) => JSX.Element) | undefined;\n}\n\nexport function ChatMessageItem(props: ChatMessageItemProps): JSX.Element {\n  const ctx = (): ChatMessageRenderContext => ({\n    showAvatars: props.showAvatars,\n    showAttachments: props.showAttachments,\n    showStatus: props.showStatus,\n    statusIcons: props.statusIcons,\n    renderStatus: props.renderStatus,\n  });\n\n  return (\n    <Show\n      when={props.renderMessage}\n      fallback={\n        <Switch\n          fallback={\n            <ChatMessageIncoming\n              message={props.message}\n              showAvatars={props.showAvatars}\n              showAttachments={props.showAttachments}\n              class={props.class}\n            />\n          }\n        >\n          <Match when={props.message.variant === \"outgoing\"}>\n            <ChatMessageOutgoing\n              message={props.message}\n              showAvatars={props.showAvatars}\n              showAttachments={props.showAttachments}\n              showStatus={props.showStatus}\n              statusIcons={props.statusIcons}\n              renderStatus={props.renderStatus}\n              class={props.class}\n            />\n          </Match>\n          <Match when={props.message.variant === \"system\"}>\n            <ChatMessageSystem message={props.message} class={props.class} />\n          </Match>\n          <Match when={props.message.variant === \"custom\"}>\n            <div\n              class={cn(\"smwb-chat-message-item\", \"smwb-chat-message-item_custom\", props.class)}\n              data-testid=\"chat-message-custom\"\n            >\n              {props.message.content ?? props.message.text}\n            </div>\n          </Match>\n        </Switch>\n      }\n    >\n      {(render) => <div class={cn(\"smwb-chat-message-item\", props.class)}>{render()(props.message, ctx())}</div>}\n    </Show>\n  );\n}\n\nexport default ChatMessageItem;\n"],"names":["ChatMessageItem","props","ctx","showAvatars","showAttachments","showStatus","statusIcons","renderStatus","_$createComponent","Show","when","renderMessage","fallback","Switch","ChatMessageIncoming","message","class","children","Match","variant","ChatMessageOutgoing","ChatMessageSystem","_el$","_tmpl$","_$insert","content","text","_$effect","_$className","cn","render","_el$2","_tmpl$2"],"mappings":";;;;;;;AAaO,SAASA,EAAgBC,GAA0C;AACxE,QAAMC,IAAMA,OAAiC;AAAA,IAC3CC,aAAaF,EAAME;AAAAA,IACnBC,iBAAiBH,EAAMG;AAAAA,IACvBC,YAAYJ,EAAMI;AAAAA,IAClBC,aAAaL,EAAMK;AAAAA,IACnBC,cAAcN,EAAMM;AAAAA,EAAAA;AAGtB,SAAAC,EACGC,GAAI;AAAA,IAAA,IACHC,OAAI;AAAA,aAAET,EAAMU;AAAAA,IAAa;AAAA,IAAA,IACzBC,WAAQ;AAAA,aAAAJ,EACLK,GAAM;AAAA,QAAA,IACLD,WAAQ;AAAA,iBAAAJ,EACLM,GAAmB;AAAA,YAAA,IAClBC,UAAO;AAAA,qBAAEd,EAAMc;AAAAA,YAAO;AAAA,YAAA,IACtBZ,cAAW;AAAA,qBAAEF,EAAME;AAAAA,YAAW;AAAA,YAAA,IAC9BC,kBAAe;AAAA,qBAAEH,EAAMG;AAAAA,YAAe;AAAA,YAAA,IAAA,QAAA;AAAA,qBAC/BH,EAAMe;AAAAA,YAAK;AAAA,UAAA,CAAA;AAAA,QAAA;AAAA,QAAA,IAAAC,WAAA;AAAA,iBAAA,CAAAT,EAIrBU,GAAK;AAAA,YAAA,IAACR,OAAI;AAAA,qBAAET,EAAMc,QAAQI,YAAY;AAAA,YAAU;AAAA,YAAA,IAAAF,WAAA;AAAA,qBAAAT,EAC9CY,GAAmB;AAAA,gBAAA,IAClBL,UAAO;AAAA,yBAAEd,EAAMc;AAAAA,gBAAO;AAAA,gBAAA,IACtBZ,cAAW;AAAA,yBAAEF,EAAME;AAAAA,gBAAW;AAAA,gBAAA,IAC9BC,kBAAe;AAAA,yBAAEH,EAAMG;AAAAA,gBAAe;AAAA,gBAAA,IACtCC,aAAU;AAAA,yBAAEJ,EAAMI;AAAAA,gBAAU;AAAA,gBAAA,IAC5BC,cAAW;AAAA,yBAAEL,EAAMK;AAAAA,gBAAW;AAAA,gBAAA,IAC9BC,eAAY;AAAA,yBAAEN,EAAMM;AAAAA,gBAAY;AAAA,gBAAA,IAAA,QAAA;AAAA,yBACzBN,EAAMe;AAAAA,gBAAK;AAAA,cAAA,CAAA;AAAA,YAAA;AAAA,UAAA,CAAA,GAAAR,EAGrBU,GAAK;AAAA,YAAA,IAACR,OAAI;AAAA,qBAAET,EAAMc,QAAQI,YAAY;AAAA,YAAQ;AAAA,YAAA,IAAAF,WAAA;AAAA,qBAAAT,EAC5Ca,GAAiB;AAAA,gBAAA,IAACN,UAAO;AAAA,yBAAEd,EAAMc;AAAAA,gBAAO;AAAA,gBAAA,IAAA,QAAA;AAAA,yBAASd,EAAMe;AAAAA,gBAAK;AAAA,cAAA,CAAA;AAAA,YAAA;AAAA,UAAA,CAAA,GAAAR,EAE9DU,GAAK;AAAA,YAAA,IAACR,OAAI;AAAA,qBAAET,EAAMc,QAAQI,YAAY;AAAA,YAAQ;AAAA,YAAA,IAAAF,WAAA;AAAA,kBAAAK,IAAAC,EAAAA;AAAAC,qBAAAA,EAAAF,GAAA,MAK1CrB,EAAMc,QAAQU,WAAWxB,EAAMc,QAAQW,IAAI,GAAAC,EAAA,MAAAC,EAAAN,GAHrCO,EAAG,0BAA0B,iCAAiC5B,EAAMe,KAAK,CAAC,CAAA,GAAAM;AAAAA,YAAA;AAAA,UAAA,CAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA;AAAA,IAAA;AAAA,IAAAL,UASvFa,QAAM,MAAA;AAAA,UAAAC,IAAAC,EAAAA;AAAAR,aAAAA,EAAAO,GAAA,MAA6DD,EAAAA,EAAS7B,EAAMc,SAASb,EAAAA,CAAK,CAAC,GAAAyB,EAAA,MAAAC,EAAAG,GAA1EF,EAAG,0BAA0B5B,EAAMe,KAAK,CAAC,CAAA,GAAAe;AAAAA,IAAA,GAAA;AAAA,EAAA,CAAwC;AAGhH;"}

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

@@ -0,0 +1,48 @@
+import { createComponent as e } from "solid-js/web";
+import { ChatMessageBubble as s } from "./chatMessageBubble.js";
+function r(t) {
+  return e(s, {
+    get class() {
+      return t.class;
+    },
+    align: "end",
+    get message() {
+      return t.message;
+    },
+    get author() {
+      return t.message.author;
+    },
+    get text() {
+      return t.message.text;
+    },
+    get attachments() {
+      return t.message.attachments;
+    },
+    get timestamp() {
+      return t.message.timestamp;
+    },
+    get status() {
+      return t.message.status;
+    },
+    get showAvatars() {
+      return t.showAvatars;
+    },
+    get showAttachments() {
+      return t.showAttachments;
+    },
+    get showStatus() {
+      return t.showStatus;
+    },
+    get statusIcons() {
+      return t.statusIcons;
+    },
+    get renderStatus() {
+      return t.renderStatus;
+    },
+    bubbleClass: "smwb-chat-message__bubble_outgoing"
+  });
+}
+export {
+  r as ChatMessageOutgoing
+};
+//# sourceMappingURL=chatMessageOutgoing.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chatMessageOutgoing.js","sources":["../../../../../src/components/dataDisplay/chat/chatMessageOutgoing.tsx"],"sourcesContent":["import { type JSX } from \"solid-js\";\nimport { ChatMessageBubble } from \"./chatMessageBubble\";\nimport type { ChatMessage, ChatMessageRenderContext } from \"./types\";\n\nexport interface ChatMessageOutgoingProps extends ChatMessageRenderContext {\n  message: ChatMessage;\n  class?: string | undefined;\n}\n\nexport function ChatMessageOutgoing(props: ChatMessageOutgoingProps): JSX.Element {\n  return (\n    <ChatMessageBubble\n      class={props.class}\n      align=\"end\"\n      message={props.message}\n      author={props.message.author}\n      text={props.message.text}\n      attachments={props.message.attachments}\n      timestamp={props.message.timestamp}\n      status={props.message.status}\n      showAvatars={props.showAvatars}\n      showAttachments={props.showAttachments}\n      showStatus={props.showStatus}\n      statusIcons={props.statusIcons}\n      renderStatus={props.renderStatus}\n      bubbleClass=\"smwb-chat-message__bubble_outgoing\"\n    />\n  );\n}\n\nexport default ChatMessageOutgoing;\n"],"names":["ChatMessageOutgoing","props","_$createComponent","ChatMessageBubble","class","align","message","author","text","attachments","timestamp","status","showAvatars","showAttachments","showStatus","statusIcons","renderStatus","bubbleClass"],"mappings":";;AASO,SAASA,EAAoBC,GAA8C;AAChF,SAAAC,EACGC,GAAiB;AAAA,IAAA,IAAA,QAAA;AAAA,aACTF,EAAMG;AAAAA,IAAK;AAAA,IAClBC,OAAK;AAAA,IAAA,IACLC,UAAO;AAAA,aAAEL,EAAMK;AAAAA,IAAO;AAAA,IAAA,IACtBC,SAAM;AAAA,aAAEN,EAAMK,QAAQC;AAAAA,IAAM;AAAA,IAAA,IAC5BC,OAAI;AAAA,aAAEP,EAAMK,QAAQE;AAAAA,IAAI;AAAA,IAAA,IACxBC,cAAW;AAAA,aAAER,EAAMK,QAAQG;AAAAA,IAAW;AAAA,IAAA,IACtCC,YAAS;AAAA,aAAET,EAAMK,QAAQI;AAAAA,IAAS;AAAA,IAAA,IAClCC,SAAM;AAAA,aAAEV,EAAMK,QAAQK;AAAAA,IAAM;AAAA,IAAA,IAC5BC,cAAW;AAAA,aAAEX,EAAMW;AAAAA,IAAW;AAAA,IAAA,IAC9BC,kBAAe;AAAA,aAAEZ,EAAMY;AAAAA,IAAe;AAAA,IAAA,IACtCC,aAAU;AAAA,aAAEb,EAAMa;AAAAA,IAAU;AAAA,IAAA,IAC5BC,cAAW;AAAA,aAAEd,EAAMc;AAAAA,IAAW;AAAA,IAAA,IAC9BC,eAAY;AAAA,aAAEf,EAAMe;AAAAA,IAAY;AAAA,IAChCC,aAAW;AAAA,EAAA,CAAA;AAGjB;"}

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

@@ -0,0 +1,59 @@
+import { insert as a, createComponent as t, memo as h, effect as g, className as c, template as d } from "solid-js/web";
+import { mergeProps as u, Show as s } from "solid-js";
+import w from "clsx";
+import { Skeleton as n } from "../../feedBack/skeleton/skeleton.js";
+var v = /* @__PURE__ */ d("<div data-testid=chat-message-skeleton aria-hidden=true><div class=smwb-chat-message__content><div class=smwb-chat-message-skeleton__bubble>");
+function k(o) {
+  const e = u({
+    align: "start",
+    showAvatar: !1,
+    lines: 2
+  }, o), m = () => e.align === "start" ? "72%" : "64%";
+  return (() => {
+    var r = v(), i = r.firstChild, l = i.firstChild;
+    return a(r, t(s, {
+      get when() {
+        return h(() => e.align === "start")() && e.showAvatar;
+      },
+      get children() {
+        return t(n, {
+          variant: "circular",
+          width: 32,
+          height: 32
+        });
+      }
+    }), i), a(l, t(n, {
+      variant: "rounded",
+      get width() {
+        return m();
+      },
+      height: 14
+    }), null), a(l, t(s, {
+      get when() {
+        return e.lines > 1;
+      },
+      get children() {
+        return t(n, {
+          variant: "rounded",
+          width: "48%",
+          height: 14
+        });
+      }
+    }), null), a(r, t(s, {
+      get when() {
+        return h(() => e.align === "end")() && e.showAvatar;
+      },
+      get children() {
+        return t(n, {
+          variant: "circular",
+          width: 32,
+          height: 32
+        });
+      }
+    }), null), g(() => c(r, w("smwb-chat-message", `smwb-chat-message_${e.align}`, "smwb-chat-message-skeleton", e.class))), r;
+  })();
+}
+export {
+  k as ChatMessageSkeleton
+};
+//# sourceMappingURL=chatMessageSkeleton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chatMessageSkeleton.js","sources":["../../../../../src/components/dataDisplay/chat/chatMessageSkeleton.tsx"],"sourcesContent":["import { type JSX, Show, mergeProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Skeleton } from \"../../feedBack/skeleton\";\n\nexport interface ChatMessageSkeletonProps {\n  class?: string | undefined;\n  align?: \"start\" | \"end\" | undefined;\n  showAvatar?: boolean | undefined;\n  lines?: number | undefined;\n}\n\nexport function ChatMessageSkeleton(props: ChatMessageSkeletonProps): JSX.Element {\n  const merged = mergeProps({ align: \"start\" as const, showAvatar: false, lines: 2 }, props);\n  const bubbleWidth = (): string => (merged.align === \"start\" ? \"72%\" : \"64%\");\n\n  return (\n    <div\n      class={cn(\"smwb-chat-message\", `smwb-chat-message_${merged.align}`, \"smwb-chat-message-skeleton\", merged.class)}\n      data-testid=\"chat-message-skeleton\"\n      aria-hidden=\"true\"\n    >\n      <Show when={merged.align === \"start\" && merged.showAvatar}>\n        <Skeleton variant=\"circular\" width={32} height={32} />\n      </Show>\n      <div class=\"smwb-chat-message__content\">\n        <div class=\"smwb-chat-message-skeleton__bubble\">\n          <Skeleton variant=\"rounded\" width={bubbleWidth()} height={14} />\n          <Show when={merged.lines > 1}>\n            <Skeleton variant=\"rounded\" width=\"48%\" height={14} />\n          </Show>\n        </div>\n      </div>\n      <Show when={merged.align === \"end\" && merged.showAvatar}>\n        <Skeleton variant=\"circular\" width={32} height={32} />\n      </Show>\n    </div>\n  );\n}\n\nexport default ChatMessageSkeleton;\n"],"names":["ChatMessageSkeleton","props","merged","mergeProps","align","showAvatar","lines","bubbleWidth","_el$","_tmpl$","_el$2","firstChild","_el$3","_$insert","_$createComponent","Show","when","_$memo","children","Skeleton","variant","width","height","_$effect","_$className","cn","class"],"mappings":";;;;;AAWO,SAASA,EAAoBC,GAA8C;AAChF,QAAMC,IAASC,EAAW;AAAA,IAAEC,OAAO;AAAA,IAAkBC,YAAY;AAAA,IAAOC,OAAO;AAAA,EAAA,GAAKL,CAAK,GACnFM,IAAcA,MAAeL,EAAOE,UAAU,UAAU,QAAQ;AAEtE,UAAA,MAAA;AAAA,QAAAI,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG,YAAAC,IAAAF,EAAAC;AAAAE,WAAAA,EAAAL,GAAAM,EAMKC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEC,EAAA,MAAAf,EAAOE,UAAU,OAAO,EAAA,KAAIF,EAAOG;AAAAA,MAAU;AAAA,MAAA,IAAAa,WAAA;AAAA,eAAAJ,EACtDK,GAAQ;AAAA,UAACC,SAAO;AAAA,UAAYC,OAAO;AAAA,UAAIC,QAAQ;AAAA,QAAA,CAAE;AAAA,MAAA;AAAA,IAAA,CAAA,GAAAZ,CAAA,GAAAG,EAAAD,GAAAE,EAI/CK,GAAQ;AAAA,MAACC,SAAO;AAAA,MAAA,IAAWC,QAAK;AAAA,eAAEd,EAAAA;AAAAA,MAAa;AAAA,MAAEe,QAAQ;AAAA,IAAA,CAAE,GAAA,IAAA,GAAAT,EAAAD,GAAAE,EAC3DC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEd,EAAOI,QAAQ;AAAA,MAAC;AAAA,MAAA,IAAAY,WAAA;AAAA,eAAAJ,EACzBK,GAAQ;AAAA,UAACC,SAAO;AAAA,UAAWC,OAAK;AAAA,UAAOC,QAAQ;AAAA,QAAA,CAAE;AAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAT,EAAAL,GAAAM,EAIvDC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEC,EAAA,MAAAf,EAAOE,UAAU,KAAK,EAAA,KAAIF,EAAOG;AAAAA,MAAU;AAAA,MAAA,IAAAa,WAAA;AAAA,eAAAJ,EACpDK,GAAQ;AAAA,UAACC,SAAO;AAAA,UAAYC,OAAO;AAAA,UAAIC,QAAQ;AAAA,QAAA,CAAE;AAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAC,EAAA,MAAAC,EAAAhB,GAhB7CiB,EAAG,qBAAqB,qBAAqBvB,EAAOE,KAAK,IAAI,8BAA8BF,EAAOwB,KAAK,CAAC,CAAA,GAAAlB;AAAAA,EAAA,GAAA;AAoBrH;"}