@knocklabs/react 0.7.16 → 0.7.17

package/dist/esm/modules/guide/components/Card/Card.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.mjs","sources":["../../../../../../src/modules/guide/components/Card/Card.tsx"],"sourcesContent":["import { ColorMode, useGuide } from \"@knocklabs/react-core\";\nimport clsx from \"clsx\";\nimport React from \"react\";\n\nimport { isValidHttpUrl, maybeNavigateToUrlWithDelay } from \"../helpers\";\nimport {\n  ButtonContent,\n  ImageContent,\n  TargetButton,\n  TargetButtonWithGuide,\n  TargetImage,\n  TargetImageWithGuide,\n} from \"../types\";\n\nimport \"./styles.css\";\n\nconst MESSAGE_TYPE = \"card\";\n\nconst Root: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-card\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nRoot.displayName = \"CardView.Root\";\n\nconst Content: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-card__message\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nContent.displayName = \"CardView.Content\";\n\nconst Header: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-card__header\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nHeader.displayName = \"CardView.Header\";\n\nconst Headline: React.FC<\n  { headline: string } & React.ComponentPropsWithRef<\"div\">\n> = ({ headline, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-card__headline\", className)} {...props}>\n      {headline}\n    </div>\n  );\n};\nHeadline.displayName = \"CardView.Headline\";\n\nconst Title: React.FC<\n  { title: string } & React.ComponentPropsWithRef<\"div\">\n> = ({ title, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-card__title\", className)} {...props}>\n      {title}\n    </div>\n  );\n};\nTitle.displayName = \"CardView.Title\";\n\nconst Body: React.FC<{ body: string } & React.ComponentPropsWithRef<\"div\">> = ({\n  body,\n  className,\n  ...props\n}) => {\n  return (\n    <div\n      className={clsx(\"knock-guide-card__body\", className)}\n      dangerouslySetInnerHTML={{ __html: body }}\n      {...props}\n    />\n  );\n};\nBody.displayName = \"CardView.Body\";\n\nconst Img: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"img\">>\n> = ({ children, className, alt, ...props }) => {\n  return (\n    <img\n      className={clsx(\"knock-guide-card__img\", className)}\n      alt={alt || \"\"}\n      {...props}\n    >\n      {children}\n    </img>\n  );\n};\nImg.displayName = \"CardView.Img\";\n\nconst Actions: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-card__actions\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nActions.displayName = \"CardView.Actions\";\n\nconst PrimaryButton: React.FC<\n  ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <button className={clsx(\"knock-guide-card__action\", className)} {...props}>\n      {text}\n    </button>\n  );\n};\nPrimaryButton.displayName = \"CardView.PrimaryButton\";\n\nconst SecondaryButton: React.FC<\n  ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <button\n      className={clsx(\n        \"knock-guide-card__action knock-guide-card__action--secondary\",\n        className,\n      )}\n      {...props}\n    >\n      {text}\n    </button>\n  );\n};\nSecondaryButton.displayName = \"CardView.SecondaryButton\";\n\nconst DismissButton: React.FC<React.ComponentPropsWithRef<\"button\">> = ({\n  className,\n  ...props\n}) => {\n  return (\n    <button className={clsx(\"knock-guide-card__close\", className)} {...props}>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"18\"\n        height=\"18\"\n        fill=\"none\"\n      >\n        <g fill=\"#60646C\" fillRule=\"evenodd\" clipRule=\"evenodd\">\n          <path d=\"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z\" />\n          <path d=\"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z\" />\n        </g>\n      </svg>\n    </button>\n  );\n};\nDismissButton.displayName = \"CardView.DismissButton\";\n\ntype CardContent = {\n  headline: string;\n  title: string;\n  body: string;\n  image?: ImageContent;\n  primary_button?: ButtonContent;\n  secondary_button?: ButtonContent;\n  dismissible?: boolean;\n};\n\nconst DefaultView: React.FC<{\n  content: CardContent;\n  colorMode?: ColorMode;\n  onDismiss?: () => void;\n  onButtonClick?: (e: React.MouseEvent, button: TargetButton) => void;\n  onImageClick?: (e: React.MouseEvent, image: TargetImage) => void;\n}> = ({\n  content,\n  colorMode = \"light\",\n  onDismiss,\n  onButtonClick,\n  onImageClick,\n}) => {\n  return (\n    <Root data-knock-color-mode={colorMode}>\n      <Content>\n        <Header>\n          <Headline headline={content.headline} />\n          {content.dismissible && <DismissButton onClick={onDismiss} />}\n        </Header>\n\n        <Title title={content.title} />\n        <Body body={content.body} />\n      </Content>\n      {content.image && (\n        <a\n          href={\n            isValidHttpUrl(content.image.action)\n              ? content.image.action\n              : undefined\n          }\n          target=\"_blank\"\n        >\n          <Img\n            src={content.image.url}\n            alt={content.image.alt}\n            onClick={(e) => {\n              if (onImageClick) {\n                onImageClick(e, content.image!);\n              }\n            }}\n          />\n        </a>\n      )}\n      {(content.primary_button || content.secondary_button) && (\n        <Actions>\n          {content.primary_button && (\n            <PrimaryButton\n              text={content.primary_button.text}\n              action={content.primary_button.action}\n              onClick={(e) => {\n                if (onButtonClick) {\n                  const { text, action } = content.primary_button!;\n                  onButtonClick(e, { name: \"primary_button\", text, action });\n                }\n              }}\n            />\n          )}\n          {content.secondary_button && (\n            <SecondaryButton\n              text={content.secondary_button.text}\n              action={content.secondary_button.action}\n              onClick={(e) => {\n                if (onButtonClick) {\n                  const { text, action } = content.secondary_button!;\n                  onButtonClick(e, { name: \"secondary_button\", text, action });\n                }\n              }}\n            />\n          )}\n        </Actions>\n      )}\n    </Root>\n  );\n};\nDefaultView.displayName = \"CardView.Default\";\n\ntype CardProps = {\n  guideKey?: string;\n  onButtonClick?: (e: React.MouseEvent, target: TargetButtonWithGuide) => void;\n  onImageClick?: (e: React.MouseEvent, target: TargetImageWithGuide) => void;\n};\n\nexport const Card: React.FC<CardProps> = ({\n  guideKey,\n  onButtonClick,\n  onImageClick,\n}) => {\n  const { guide, step, colorMode } = useGuide({\n    key: guideKey,\n    type: MESSAGE_TYPE,\n  });\n\n  React.useEffect(() => {\n    if (step) step.markAsSeen();\n  }, [step]);\n\n  if (!guide || !step) return null;\n\n  return (\n    <DefaultView\n      content={step.content as CardContent}\n      colorMode={colorMode}\n      onDismiss={() => step.markAsArchived()}\n      onButtonClick={(e, button) => {\n        const metadata = { ...button, type: \"button_click\" };\n        step.markAsInteracted({ metadata });\n\n        return onButtonClick\n          ? onButtonClick(e, { button, step, guide })\n          : maybeNavigateToUrlWithDelay(button.action);\n      }}\n      onImageClick={(e, image) => {\n        const metadata = { ...image, type: \"image_click\" };\n        step.markAsInteracted({ metadata });\n\n        if (onImageClick) {\n          return onImageClick(e, { image, step, guide });\n        }\n      }}\n    />\n  );\n};\nCard.displayName = \"Card\";\n\nexport const CardView = {} as {\n  Default: typeof DefaultView;\n  Root: typeof Root;\n  Content: typeof Content;\n  Headline: typeof Headline;\n  Title: typeof Title;\n  Body: typeof Body;\n  Img: typeof Img;\n  Actions: typeof Actions;\n  PrimaryButton: typeof PrimaryButton;\n  SecondaryButton: typeof SecondaryButton;\n  DismissButton: typeof DismissButton;\n};\n\nObject.assign(CardView, {\n  Default: DefaultView,\n  Root,\n  Content,\n  Title,\n  Body,\n  Img,\n  Actions,\n  PrimaryButton,\n  SecondaryButton,\n  DismissButton,\n});\n"],"names":["MESSAGE_TYPE","Root","children","className","props","React","clsx","displayName","Content","Header","Headline","headline","Title","title","Body","body","__html","Img","alt","Actions","PrimaryButton","text","action","SecondaryButton","DismissButton","DefaultView","content","colorMode","onDismiss","onButtonClick","onImageClick","dismissible","image","isValidHttpUrl","undefined","url","e","primary_button","secondary_button","name","Card","guideKey","guide","step","useGuide","key","type","useEffect","markAsSeen","markAsArchived","button","metadata","markAsInteracted","maybeNavigateToUrlWithDelay","CardView","Object","assign","Default"],"mappings":"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"}

package/dist/esm/modules/guide/components/Modal/Modal.mjs

@@ -0,0 +1,172 @@
+import { useGuide as V } from "@knocklabs/react-core";
+import * as d from "@radix-ui/react-dialog";
+import n from "clsx";
+import a from "react";
+import { isValidHttpUrl as v, maybeNavigateToUrlWithDelay as h } from "../helpers.mjs";
+/* empty css            */
+const x = "modal", u = ({
+  children: e,
+  onOpenChange: t,
+  ...l
+}) => /* @__PURE__ */ a.createElement(d.Root, { defaultOpen: !0, onOpenChange: t, ...l }, /* @__PURE__ */ a.createElement(d.Portal, null, e));
+u.displayName = "ModalView.Root";
+const y = a.forwardRef(({
+  className: e,
+  ...t
+}, l) => /* @__PURE__ */ a.createElement(d.Overlay, { className: n("knock-guide-modal__overlay", e), ref: l, ...t }));
+y.displayName = "ModalView.Overlay";
+const _ = a.forwardRef(({
+  children: e,
+  className: t,
+  ...l
+}, r) => /* @__PURE__ */ a.createElement(d.Content, { className: n("knock-guide-modal", t), ref: r, ...l }, e));
+_.displayName = "ModalView.Content";
+const M = ({
+  children: e,
+  className: t,
+  ...l
+}) => /* @__PURE__ */ a.createElement("div", { className: n("knock-guide-modal__header", t), ...l }, e);
+M.displayName = "ModalView.Header";
+const p = ({
+  title: e,
+  className: t,
+  ...l
+}) => /* @__PURE__ */ a.createElement(d.Title, { className: n("knock-guide-modal__title", t), ...l }, e);
+p.displayName = "ModalView.Title";
+const E = ({
+  body: e,
+  className: t,
+  ...l
+}) => /* @__PURE__ */ a.createElement(d.Description, { className: n("knock-guide-modal__body", t), dangerouslySetInnerHTML: {
+  __html: e
+}, ...l });
+E.displayName = "ModalView.Body";
+const g = ({
+  children: e,
+  className: t,
+  alt: l,
+  ...r
+}) => /* @__PURE__ */ a.createElement("img", { className: n("knock-guide-modal__img", t), alt: l || "", ...r }, e);
+g.displayName = "ModalView.Img";
+const k = ({
+  children: e,
+  className: t,
+  ...l
+}) => /* @__PURE__ */ a.createElement("div", { className: n("knock-guide-modal__actions", t), ...l }, e);
+k.displayName = "ModalView.Actions";
+const f = ({
+  text: e,
+  action: t,
+  className: l,
+  ...r
+}) => /* @__PURE__ */ a.createElement("button", { className: n("knock-guide-modal__action", l), ...r }, e);
+f.displayName = "ModalView.PrimaryButton";
+const N = ({
+  text: e,
+  action: t,
+  className: l,
+  ...r
+}) => /* @__PURE__ */ a.createElement("button", { className: n("knock-guide-modal__action knock-guide-modal__action--secondary", l), ...r }, e);
+N.displayName = "ModalView.SecondaryButton";
+const w = ({
+  className: e,
+  ...t
+}) => /* @__PURE__ */ a.createElement(d.Close, { className: n("knock-guide-modal__close", e), ...t }, /* @__PURE__ */ a.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", fill: "none" }, /* @__PURE__ */ a.createElement("g", { fill: "#60646C", fillRule: "evenodd", clipRule: "evenodd" }, /* @__PURE__ */ a.createElement("path", { d: "M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z" }), /* @__PURE__ */ a.createElement("path", { d: "M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z" }))));
+w.displayName = "ModalView.Close";
+const b = ({
+  content: e,
+  colorMode: t = "light",
+  onOpenChange: l,
+  onDismiss: r,
+  onButtonClick: o,
+  onImageClick: s
+}) => /* @__PURE__ */ a.createElement(u, { onOpenChange: l }, /* @__PURE__ */ a.createElement(y, null), /* @__PURE__ */ a.createElement(_, { "data-knock-color-mode": t, onPointerDownOutside: r }, /* @__PURE__ */ a.createElement(M, null, /* @__PURE__ */ a.createElement(p, { title: e.title }), e.dismissible && /* @__PURE__ */ a.createElement(w, { onClick: r })), /* @__PURE__ */ a.createElement(E, { body: e.body }), e.image && /* @__PURE__ */ a.createElement("a", { href: v(e.image.action) ? e.image.action : void 0, target: "_blank" }, /* @__PURE__ */ a.createElement(g, { src: e.image.url, alt: e.image.alt, onClick: (m) => {
+  s && s(m, e.image);
+} })), (e.primary_button || e.secondary_button) && /* @__PURE__ */ a.createElement(k, null, e.secondary_button && /* @__PURE__ */ a.createElement(N, { text: e.secondary_button.text, action: e.secondary_button.action, onClick: (m) => {
+  if (o) {
+    const {
+      text: i,
+      action: c
+    } = e.secondary_button;
+    o(m, {
+      name: "secondary_button",
+      text: i,
+      action: c
+    });
+  }
+} }), e.primary_button && /* @__PURE__ */ a.createElement(f, { text: e.primary_button.text, action: e.primary_button.action, onClick: (m) => {
+  if (o) {
+    const {
+      text: i,
+      action: c
+    } = e.primary_button;
+    o(m, {
+      name: "primary_button",
+      text: i,
+      action: c
+    });
+  }
+} }))));
+b.displayName = "ModalView.Default";
+const A = ({
+  guideKey: e,
+  onButtonClick: t,
+  onImageClick: l
+}) => {
+  const {
+    guide: r,
+    step: o,
+    colorMode: s
+  } = V({
+    key: e,
+    type: x
+  });
+  return a.useEffect(() => {
+    o && o.markAsSeen();
+  }, [o]), !r || !o ? null : /* @__PURE__ */ a.createElement(b, { content: o.content, colorMode: s, onDismiss: () => o.markAsArchived(), onButtonClick: (m, i) => {
+    const c = {
+      ...i,
+      type: "button_click"
+    };
+    return o.markAsInteracted({
+      metadata: c
+    }), t ? t(m, {
+      button: i,
+      step: o,
+      guide: r
+    }) : h(i.action);
+  }, onImageClick: (m, i) => {
+    const c = {
+      ...i,
+      type: "image_click"
+    };
+    if (o.markAsInteracted({
+      metadata: c
+    }), l)
+      return l(m, {
+        image: i,
+        step: o,
+        guide: r
+      });
+  } });
+};
+A.displayName = "Modal";
+const R = {};
+Object.assign(R, {
+  Default: b,
+  Root: u,
+  Overlay: y,
+  Content: _,
+  Title: p,
+  Body: E,
+  Img: g,
+  Actions: k,
+  PrimaryButton: f,
+  SecondaryButton: N,
+  Close: w
+});
+export {
+  A as Modal,
+  R as ModalView
+};
+//# sourceMappingURL=Modal.mjs.map

package/dist/esm/modules/guide/components/Modal/Modal.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.mjs","sources":["../../../../../../src/modules/guide/components/Modal/Modal.tsx"],"sourcesContent":["import { ColorMode, useGuide } from \"@knocklabs/react-core\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport clsx from \"clsx\";\nimport React from \"react\";\n\nimport { isValidHttpUrl, maybeNavigateToUrlWithDelay } from \"../helpers\";\nimport {\n  ButtonContent,\n  ImageContent,\n  TargetButton,\n  TargetButtonWithGuide,\n  TargetImage,\n  TargetImageWithGuide,\n} from \"../types\";\n\nimport \"./styles.css\";\n\nconst MESSAGE_TYPE = \"modal\";\n\ntype RootProps = Omit<\n  React.ComponentPropsWithoutRef<typeof Dialog.Root>,\n  \"modal\"\n> &\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>;\n\nconst Root = ({ children, onOpenChange, ...props }: RootProps) => {\n  return (\n    <Dialog.Root defaultOpen onOpenChange={onOpenChange} {...props}>\n      <Dialog.Portal>{children}</Dialog.Portal>\n    </Dialog.Root>\n  );\n};\nRoot.displayName = \"ModalView.Root\";\n\ntype OverlayProps = React.ComponentPropsWithoutRef<typeof Dialog.Overlay> &\n  React.ComponentPropsWithRef<\"div\">;\ntype OverlayRef = React.ElementRef<\"div\">;\n\nconst Overlay = React.forwardRef<OverlayRef, OverlayProps>(\n  ({ className, ...props }, forwardedRef) => {\n    return (\n      <Dialog.Overlay\n        className={clsx(\"knock-guide-modal__overlay\", className)}\n        ref={forwardedRef}\n        {...props}\n      />\n    );\n  },\n);\nOverlay.displayName = \"ModalView.Overlay\";\n\ntype ContentProps = React.ComponentPropsWithoutRef<typeof Dialog.Content> &\n  React.ComponentPropsWithRef<\"div\">;\ntype ContentRef = React.ElementRef<\"div\">;\n\nconst Content = React.forwardRef<ContentRef, ContentProps>(\n  ({ children, className, ...props }, forwardedRef) => {\n    return (\n      <Dialog.Content\n        className={clsx(\"knock-guide-modal\", className)}\n        ref={forwardedRef}\n        {...props}\n      >\n        {children}\n      </Dialog.Content>\n    );\n  },\n);\nContent.displayName = \"ModalView.Content\";\n\nconst Header: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-modal__header\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nHeader.displayName = \"ModalView.Header\";\n\ntype TitleProps = React.ComponentPropsWithoutRef<typeof Dialog.Title> &\n  React.ComponentPropsWithRef<\"div\"> & {\n    title: string;\n  };\n\nconst Title = ({ title, className, ...props }: TitleProps) => {\n  return (\n    <Dialog.Title\n      className={clsx(\"knock-guide-modal__title\", className)}\n      {...props}\n    >\n      {title}\n    </Dialog.Title>\n  );\n};\nTitle.displayName = \"ModalView.Title\";\n\nconst Body: React.FC<{ body: string } & React.ComponentPropsWithRef<\"div\">> = ({\n  body,\n  className,\n  ...props\n}) => {\n  return (\n    <Dialog.Description\n      className={clsx(\"knock-guide-modal__body\", className)}\n      dangerouslySetInnerHTML={{ __html: body }}\n      {...props}\n    />\n  );\n};\nBody.displayName = \"ModalView.Body\";\n\nconst Img: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"img\">>\n> = ({ children, className, alt, ...props }) => {\n  return (\n    <img\n      className={clsx(\"knock-guide-modal__img\", className)}\n      alt={alt || \"\"}\n      {...props}\n    >\n      {children}\n    </img>\n  );\n};\nImg.displayName = \"ModalView.Img\";\n\nconst Actions: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-modal__actions\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nActions.displayName = \"ModalView.Actions\";\n\nconst PrimaryButton: React.FC<\n  ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <button className={clsx(\"knock-guide-modal__action\", className)} {...props}>\n      {text}\n    </button>\n  );\n};\nPrimaryButton.displayName = \"ModalView.PrimaryButton\";\n\nconst SecondaryButton: React.FC<\n  ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <button\n      className={clsx(\n        \"knock-guide-modal__action knock-guide-modal__action--secondary\",\n        className,\n      )}\n      {...props}\n    >\n      {text}\n    </button>\n  );\n};\nSecondaryButton.displayName = \"ModalView.SecondaryButton\";\n\ntype CloseProps = React.ComponentPropsWithoutRef<typeof Dialog.Close> &\n  React.ComponentPropsWithRef<\"button\">;\n\nconst Close = ({ className, ...props }: CloseProps) => {\n  return (\n    <Dialog.Close\n      className={clsx(\"knock-guide-modal__close\", className)}\n      {...props}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"18\"\n        height=\"18\"\n        fill=\"none\"\n      >\n        <g fill=\"#60646C\" fillRule=\"evenodd\" clipRule=\"evenodd\">\n          <path d=\"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z\" />\n          <path d=\"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z\" />\n        </g>\n      </svg>\n    </Dialog.Close>\n  );\n};\nClose.displayName = \"ModalView.Close\";\n\ntype ModalContent = {\n  title: string;\n  body: string;\n  image?: ImageContent;\n  primary_button?: ButtonContent;\n  secondary_button?: ButtonContent;\n  dismissible?: boolean;\n};\n\nconst DefaultView: React.FC<{\n  content: ModalContent;\n  colorMode?: ColorMode;\n  onOpenChange?: (open: boolean) => void;\n  onDismiss?: () => void;\n  onButtonClick?: (e: React.MouseEvent, button: TargetButton) => void;\n  onImageClick?: (e: React.MouseEvent, image: TargetImage) => void;\n}> = ({\n  content,\n  colorMode = \"light\",\n  onOpenChange,\n  onDismiss,\n  onButtonClick,\n  onImageClick,\n}) => {\n  return (\n    <Root onOpenChange={onOpenChange}>\n      <Overlay />\n      {/* Must pass color mode to content for css variables to be set properly */}\n      <Content\n        data-knock-color-mode={colorMode}\n        onPointerDownOutside={onDismiss}\n      >\n        <Header>\n          <Title title={content.title} />\n          {content.dismissible && <Close onClick={onDismiss} />}\n        </Header>\n\n        <Body body={content.body} />\n\n        {content.image && (\n          <a\n            href={\n              isValidHttpUrl(content.image.action)\n                ? content.image.action\n                : undefined\n            }\n            target=\"_blank\"\n          >\n            <Img\n              src={content.image.url}\n              alt={content.image.alt}\n              onClick={(e) => {\n                if (onImageClick) {\n                  onImageClick(e, content.image!);\n                }\n              }}\n            />\n          </a>\n        )}\n\n        {(content.primary_button || content.secondary_button) && (\n          <Actions>\n            {content.secondary_button && (\n              <SecondaryButton\n                text={content.secondary_button.text}\n                action={content.secondary_button.action}\n                onClick={(e) => {\n                  if (onButtonClick) {\n                    const { text, action } = content.secondary_button!;\n                    onButtonClick(e, {\n                      name: \"secondary_button\",\n                      text,\n                      action,\n                    });\n                  }\n                }}\n              />\n            )}\n            {content.primary_button && (\n              <PrimaryButton\n                text={content.primary_button.text}\n                action={content.primary_button.action}\n                onClick={(e) => {\n                  if (onButtonClick) {\n                    const { text, action } = content.primary_button!;\n                    onButtonClick(e, { name: \"primary_button\", text, action });\n                  }\n                }}\n              />\n            )}\n          </Actions>\n        )}\n      </Content>\n    </Root>\n  );\n};\nDefaultView.displayName = \"ModalView.Default\";\n\ntype ModalProps = {\n  guideKey?: string;\n  onButtonClick?: (e: React.MouseEvent, target: TargetButtonWithGuide) => void;\n  onImageClick?: (e: React.MouseEvent, target: TargetImageWithGuide) => void;\n};\n\nexport const Modal: React.FC<ModalProps> = ({\n  guideKey,\n  onButtonClick,\n  onImageClick,\n}) => {\n  const { guide, step, colorMode } = useGuide({\n    key: guideKey,\n    type: MESSAGE_TYPE,\n  });\n\n  React.useEffect(() => {\n    if (step) step.markAsSeen();\n  }, [step]);\n\n  if (!guide || !step) return null;\n\n  return (\n    <DefaultView\n      content={step.content as ModalContent}\n      colorMode={colorMode}\n      onDismiss={() => step.markAsArchived()}\n      onButtonClick={(e, button) => {\n        const metadata = { ...button, type: \"button_click\" };\n        step.markAsInteracted({ metadata });\n\n        return onButtonClick\n          ? onButtonClick(e, { button, step, guide })\n          : maybeNavigateToUrlWithDelay(button.action);\n      }}\n      onImageClick={(e, image) => {\n        const metadata = { ...image, type: \"image_click\" };\n        step.markAsInteracted({ metadata });\n\n        if (onImageClick) {\n          return onImageClick(e, { image, step, guide });\n        }\n      }}\n    />\n  );\n};\nModal.displayName = \"Modal\";\n\nexport const ModalView = {} as {\n  Default: typeof DefaultView;\n  Root: typeof Root;\n  Overlay: typeof Overlay;\n  Content: typeof Content;\n  Title: typeof Title;\n  Body: typeof Body;\n  Img: typeof Img;\n  Actions: typeof Actions;\n  PrimaryButton: typeof PrimaryButton;\n  SecondaryButton: typeof SecondaryButton;\n  Close: typeof Close;\n};\n\nObject.assign(ModalView, {\n  Default: DefaultView,\n  Root,\n  Overlay,\n  Content,\n  Title,\n  Body,\n  Img,\n  Actions,\n  PrimaryButton,\n  SecondaryButton,\n  Close,\n});\n"],"names":["MESSAGE_TYPE","Root","children","onOpenChange","props","React","Dialog","displayName","Overlay","forwardRef","className","forwardedRef","clsx","Content","Header","Title","title","Body","body","__html","Img","alt","Actions","PrimaryButton","text","action","SecondaryButton","Close","DefaultView","content","colorMode","onDismiss","onButtonClick","onImageClick","dismissible","image","isValidHttpUrl","undefined","url","e","primary_button","secondary_button","name","Modal","guideKey","guide","step","useGuide","key","type","useEffect","markAsSeen","markAsArchived","button","metadata","markAsInteracted","maybeNavigateToUrlWithDelay","ModalView","Object","assign","Default"],"mappings":"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"}

package/dist/esm/modules/guide/components/helpers.mjs

@@ -0,0 +1,16 @@
+const r = (o) => {
+  let t;
+  try {
+    t = new URL(o);
+  } catch {
+    return !1;
+  }
+  return t.protocol === "http:" || t.protocol === "https:";
+}, i = (o, t = 200) => {
+  window != null && window.location && r(o) && setTimeout(() => window.location.assign(o), t);
+};
+export {
+  r as isValidHttpUrl,
+  i as maybeNavigateToUrlWithDelay
+};
+//# sourceMappingURL=helpers.mjs.map

package/dist/esm/modules/guide/components/helpers.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.mjs","sources":["../../../../../src/modules/guide/components/helpers.ts"],"sourcesContent":["export const isValidHttpUrl = (input: string) => {\n  let url;\n\n  try {\n    url = new URL(input);\n  } catch (_) {\n    return false;\n  }\n\n  return url.protocol === \"http:\" || url.protocol === \"https:\";\n};\n\nexport const maybeNavigateToUrlWithDelay = (\n  url: string,\n  delay: number = 200,\n) => {\n  if (!window?.location) return;\n  if (!isValidHttpUrl(url)) return;\n\n  setTimeout(() => window.location.assign(url), delay);\n};\n"],"names":["isValidHttpUrl","input","url","URL","protocol","maybeNavigateToUrlWithDelay","delay","window","location","setTimeout","assign"],"mappings":"AAAaA,MAAAA,IAAiBA,CAACC,MAAkB;AAC3CC,MAAAA;AAEA,MAAA;AACI,IAAAA,IAAA,IAAIC,IAAIF,CAAK;AAAA,UACT;AACH,WAAA;AAAA,EAAA;AAGT,SAAOC,EAAIE,aAAa,WAAWF,EAAIE,aAAa;AACtD,GAEaC,IAA8BA,CACzCH,GACAI,IAAgB,QACb;AACC,EAACC,yBAAQC,YACRR,EAAeE,CAAG,KAEvBO,WAAW,MAAMF,OAAOC,SAASE,OAAOR,CAAG,GAAGI,CAAK;AACrD;"}

package/dist/esm/modules/ms-teams/components/MsTeamsAuthButton/MsTeamsAuthButton.mjs

@@ -0,0 +1,43 @@
+import e, { useEffect as f } from "react";
+import { useTranslations as g, useKnockClient as T, useKnockMsTeamsClient as x, useMsTeamsAuth as M } from "@knocklabs/react-core";
+import { openPopupWindow as d } from "../../../core/utils.mjs";
+/* empty css               */
+import { MsTeamsIcon as a } from "../MsTeamsIcon/MsTeamsIcon.mjs";
+/* empty css            */
+const K = ({
+  msTeamsBotId: _,
+  redirectUrl: b,
+  onAuthenticationComplete: c
+}) => {
+  const {
+    t
+  } = g(), m = T(), {
+    setConnectionStatus: o,
+    connectionStatus: n,
+    setActionLabel: s,
+    actionLabel: i,
+    errorLabel: p
+  } = x(), {
+    buildMsTeamsAuthUrl: l,
+    disconnectFromMsTeams: E
+  } = M(_, b);
+  f(() => {
+    const u = (r) => {
+      if (r.origin === m.host)
+        try {
+          r.data === "authComplete" && o("connected"), r.data === "authFailed" && o("error"), c == null || c(r.data);
+        } catch {
+          o("error");
+        }
+    };
+    return window.addEventListener("message", u, !1), () => {
+      window.removeEventListener("message", u);
+    };
+  }, [m.host, c, o]);
+  const k = t("msTeamsDisconnect") || null, h = t("msTeamsReconnect") || null;
+  return n === "connecting" || n === "disconnecting" ? /* @__PURE__ */ e.createElement("div", { className: "rtk-connect__button rtk-connect__button--loading" }, /* @__PURE__ */ e.createElement(a, { height: "16px", width: "16px" }), /* @__PURE__ */ e.createElement("span", null, t(n === "connecting" ? "msTeamsConnecting" : "msTeamsDisconnecting"))) : n === "error" ? /* @__PURE__ */ e.createElement("button", { onClick: () => d(l()), className: "rtk-connect__button rtk-connect__button--error", onMouseEnter: () => s(h), onMouseLeave: () => s(null) }, /* @__PURE__ */ e.createElement(a, { height: "16px", width: "16px" }), /* @__PURE__ */ e.createElement("span", { className: "rtk-connect__button__text--error" }, i || p || t("msTeamsError"))) : n === "disconnected" ? /* @__PURE__ */ e.createElement("button", { onClick: () => d(l()), className: "rtk-connect__button rtk-connect__button--disconnected" }, /* @__PURE__ */ e.createElement(a, { height: "16px", width: "16px" }), /* @__PURE__ */ e.createElement("span", null, t("msTeamsConnect"))) : /* @__PURE__ */ e.createElement("button", { onClick: E, className: "rtk-connect__button rtk-connect__button--connected", onMouseEnter: () => s(k), onMouseLeave: () => s(null) }, /* @__PURE__ */ e.createElement(a, { height: "16px", width: "16px" }), /* @__PURE__ */ e.createElement("span", { className: "rtk-connect__button__text--connected" }, i || t("msTeamsConnected")));
+};
+export {
+  K as MsTeamsAuthButton
+};
+//# sourceMappingURL=MsTeamsAuthButton.mjs.map

package/dist/esm/modules/ms-teams/components/MsTeamsAuthButton/MsTeamsAuthButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MsTeamsAuthButton.mjs","sources":["../../../../../../src/modules/ms-teams/components/MsTeamsAuthButton/MsTeamsAuthButton.tsx"],"sourcesContent":["import {\n  useKnockClient,\n  useKnockMsTeamsClient,\n  useMsTeamsAuth,\n  useTranslations,\n} from \"@knocklabs/react-core\";\nimport { FunctionComponent, useEffect } from \"react\";\n\nimport { openPopupWindow } from \"../../../core/utils\";\nimport \"../../theme.css\";\nimport { MsTeamsIcon } from \"../MsTeamsIcon\";\n\nimport \"./styles.css\";\n\nexport interface MsTeamsAuthButtonProps {\n  msTeamsBotId: string;\n  redirectUrl?: string;\n  onAuthenticationComplete?: (authenticationResp: string) => void;\n}\n\nexport const MsTeamsAuthButton: FunctionComponent<MsTeamsAuthButtonProps> = ({\n  msTeamsBotId,\n  redirectUrl,\n  onAuthenticationComplete,\n}) => {\n  const { t } = useTranslations();\n  const knock = useKnockClient();\n\n  const {\n    setConnectionStatus,\n    connectionStatus,\n    setActionLabel,\n    actionLabel,\n    errorLabel,\n  } = useKnockMsTeamsClient();\n\n  const { buildMsTeamsAuthUrl, disconnectFromMsTeams } = useMsTeamsAuth(\n    msTeamsBotId,\n    redirectUrl,\n  );\n\n  useEffect(() => {\n    const receiveMessage = (event: MessageEvent) => {\n      if (event.origin !== knock.host) {\n        return;\n      }\n\n      try {\n        if (event.data === \"authComplete\") {\n          setConnectionStatus(\"connected\");\n        }\n\n        if (event.data === \"authFailed\") {\n          setConnectionStatus(\"error\");\n        }\n\n        onAuthenticationComplete?.(event.data);\n      } catch (_error) {\n        setConnectionStatus(\"error\");\n      }\n    };\n\n    window.addEventListener(\"message\", receiveMessage, false);\n\n    // Cleanup the event listener when the component unmounts\n    return () => {\n      window.removeEventListener(\"message\", receiveMessage);\n    };\n  }, [knock.host, onAuthenticationComplete, setConnectionStatus]);\n\n  const disconnectLabel = t(\"msTeamsDisconnect\") || null;\n  const reconnectLabel = t(\"msTeamsReconnect\") || null;\n\n  // Loading states\n  if (\n    connectionStatus === \"connecting\" ||\n    connectionStatus === \"disconnecting\"\n  ) {\n    return (\n      <div className=\"rtk-connect__button rtk-connect__button--loading\">\n        <MsTeamsIcon height=\"16px\" width=\"16px\" />\n        <span>\n          {connectionStatus === \"connecting\"\n            ? t(\"msTeamsConnecting\")\n            : t(\"msTeamsDisconnecting\")}\n        </span>\n      </div>\n    );\n  }\n\n  // Error state\n  if (connectionStatus === \"error\") {\n    return (\n      <button\n        onClick={() => openPopupWindow(buildMsTeamsAuthUrl())}\n        className=\"rtk-connect__button rtk-connect__button--error\"\n        onMouseEnter={() => setActionLabel(reconnectLabel)}\n        onMouseLeave={() => setActionLabel(null)}\n      >\n        <MsTeamsIcon height=\"16px\" width=\"16px\" />\n        <span className=\"rtk-connect__button__text--error\">\n          {actionLabel || errorLabel || t(\"msTeamsError\")}\n        </span>\n      </button>\n    );\n  }\n\n  // Disconnected state\n  if (connectionStatus === \"disconnected\") {\n    return (\n      <button\n        onClick={() => openPopupWindow(buildMsTeamsAuthUrl())}\n        className=\"rtk-connect__button rtk-connect__button--disconnected\"\n      >\n        <MsTeamsIcon height=\"16px\" width=\"16px\" />\n        <span>{t(\"msTeamsConnect\")}</span>\n      </button>\n    );\n  }\n\n  // Connected state\n  return (\n    <button\n      onClick={disconnectFromMsTeams}\n      className=\"rtk-connect__button rtk-connect__button--connected\"\n      onMouseEnter={() => setActionLabel(disconnectLabel)}\n      onMouseLeave={() => setActionLabel(null)}\n    >\n      <MsTeamsIcon height=\"16px\" width=\"16px\" />\n      <span className=\"rtk-connect__button__text--connected\">\n        {actionLabel || t(\"msTeamsConnected\")}\n      </span>\n    </button>\n  );\n};\n"],"names":["MsTeamsAuthButton","msTeamsBotId","redirectUrl","onAuthenticationComplete","t","useTranslations","knock","useKnockClient","setConnectionStatus","connectionStatus","setActionLabel","actionLabel","errorLabel","useKnockMsTeamsClient","buildMsTeamsAuthUrl","disconnectFromMsTeams","useMsTeamsAuth","useEffect","receiveMessage","event","origin","host","data","addEventListener","removeEventListener","disconnectLabel","reconnectLabel","React","MsTeamsIcon","openPopupWindow"],"mappings":";;;;;;AAoBO,MAAMA,IAA+DA,CAAC;AAAA,EAC3EC,cAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,0BAAAA;AACF,MAAM;AACE,QAAA;AAAA,IAAEC;AAAAA,MAAMC,EAAgB,GACxBC,IAAQC,EAAe,GAEvB;AAAA,IACJC,qBAAAA;AAAAA,IACAC,kBAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAC,aAAAA;AAAAA,IACAC,YAAAA;AAAAA,MACEC,EAAsB,GAEpB;AAAA,IAAEC,qBAAAA;AAAAA,IAAqBC,uBAAAA;AAAAA,EAAAA,IAA0BC,EACrDf,GACAC,CACF;AAEAe,EAAAA,EAAU,MAAM;AACRC,UAAAA,IAAiBA,CAACC,MAAwB;AAC1CA,UAAAA,EAAMC,WAAWd,EAAMe;AAIvB,YAAA;AACEF,UAAAA,EAAMG,SAAS,kBACjBd,EAAoB,WAAW,GAG7BW,EAAMG,SAAS,gBACjBd,EAAoB,OAAO,GAG7BL,KAAAA,QAAAA,EAA2BgB,EAAMG;AAAAA,gBAClB;AACfd,UAAAA,EAAoB,OAAO;AAAA,QAAA;AAAA,IAE/B;AAEOe,kBAAAA,iBAAiB,WAAWL,GAAgB,EAAK,GAGjD,MAAM;AACJM,aAAAA,oBAAoB,WAAWN,CAAc;AAAA,IACtD;AAAA,KACC,CAACZ,EAAMe,MAAMlB,GAA0BK,CAAmB,CAAC;AAExDiB,QAAAA,IAAkBrB,EAAE,mBAAmB,KAAK,MAC5CsB,IAAiBtB,EAAE,kBAAkB,KAAK;AAI9CK,SAAAA,MAAqB,gBACrBA,MAAqB,kBAGnBkB,gBAAAA,EAAA,cAAC,SAAI,WAAU,mDAAA,mCACZC,GAAY,EAAA,QAAO,QAAO,OAAM,OAAM,CAAA,GACtCD,gBAAAA,EAAA,cAAA,QAAA,MAEKvB,EADHK,MAAqB,eAChB,sBACA,sBADmB,CAE3B,CACF,IAKAA,MAAqB,0CAEpB,UACC,EAAA,SAAS,MAAMoB,EAAgBf,GAAqB,GACpD,WAAU,kDACV,cAAc,MAAMJ,EAAegB,CAAc,GACjD,cAAc,MAAMhB,EAAe,IAAI,EAAA,mCAEtCkB,GAAY,EAAA,QAAO,QAAO,OAAM,QAAM,GACvCD,gBAAAA,EAAA,cAAC,QAAK,EAAA,WAAU,sCACbhB,KAAeC,KAAcR,EAAE,cAAc,CAChD,CACF,IAKAK,MAAqB,iBAErBkB,gBAAAA,EAAA,cAAC,YACC,SAAS,MAAME,EAAgBf,EAAoB,CAAC,GACpD,WAAU,wDAEV,GAAAa,gBAAAA,EAAA,cAACC,KAAY,QAAO,QAAO,OAAM,OAAM,CAAA,mCACtC,QAAMxB,MAAAA,EAAE,gBAAgB,CAAE,CAC7B,IAMDuB,gBAAAA,EAAA,cAAA,UAAA,EACC,SAASZ,GACT,WAAU,sDACV,cAAc,MAAML,EAAee,CAAe,GAClD,cAAc,MAAMf,EAAe,IAAI,KAEvCiB,gBAAAA,EAAA,cAACC,GAAY,EAAA,QAAO,QAAO,OAAM,OAAM,CAAA,GACvCD,gBAAAA,EAAA,cAAC,QAAK,EAAA,WAAU,uCACbhB,GAAAA,KAAeP,EAAE,kBAAkB,CACtC,CACF;AAEJ;"}

package/dist/esm/modules/ms-teams/components/MsTeamsAuthContainer/MsTeamsAuthContainer.mjs

@@ -0,0 +1,17 @@
+import e from "react";
+import { useTranslations as r } from "@knocklabs/react-core";
+/* empty css               */
+import { MsTeamsIcon as m } from "../MsTeamsIcon/MsTeamsIcon.mjs";
+/* empty css            */
+const l = ({
+  actionButton: t
+}) => {
+  const {
+    t: a
+  } = r();
+  return /* @__PURE__ */ e.createElement("div", { className: "rtk-auth" }, /* @__PURE__ */ e.createElement("div", { className: "rtk-auth__header" }, /* @__PURE__ */ e.createElement(m, { height: "32px", width: "32px" }), /* @__PURE__ */ e.createElement("div", null, t)), /* @__PURE__ */ e.createElement("div", { className: "rtk-auth__title" }, "Microsoft Teams"), /* @__PURE__ */ e.createElement("div", { className: "rtk-auth__description" }, a("msTeamsConnectContainerDescription")));
+};
+export {
+  l as MsTeamsAuthContainer
+};
+//# sourceMappingURL=MsTeamsAuthContainer.mjs.map

package/dist/esm/modules/ms-teams/components/MsTeamsAuthContainer/MsTeamsAuthContainer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MsTeamsAuthContainer.mjs","sources":["../../../../../../src/modules/ms-teams/components/MsTeamsAuthContainer/MsTeamsAuthContainer.tsx"],"sourcesContent":["import { useTranslations } from \"@knocklabs/react-core\";\nimport { FunctionComponent } from \"react\";\n\nimport \"../../theme.css\";\nimport { MsTeamsIcon } from \"../MsTeamsIcon\";\n\nimport \"./styles.css\";\n\nexport interface MsTeamsAuthContainerProps {\n  actionButton: React.ReactElement;\n}\n\nexport const MsTeamsAuthContainer: FunctionComponent<\n  MsTeamsAuthContainerProps\n> = ({ actionButton }) => {\n  const { t } = useTranslations();\n\n  return (\n    <div className=\"rtk-auth\">\n      <div className=\"rtk-auth__header\">\n        <MsTeamsIcon height=\"32px\" width=\"32px\" />\n        <div>{actionButton}</div>\n      </div>\n      <div className=\"rtk-auth__title\">Microsoft Teams</div>\n      <div className=\"rtk-auth__description\">\n        {t(\"msTeamsConnectContainerDescription\")}\n      </div>\n    </div>\n  );\n};\n"],"names":["MsTeamsAuthContainer","actionButton","t","useTranslations","React","MsTeamsIcon"],"mappings":";;;;;AAYO,MAAMA,IAETA,CAAC;AAAA,EAAEC,cAAAA;AAAa,MAAM;AAClB,QAAA;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAgB;AAE9B,SACGC,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,8CACZ,OAAI,EAAA,WAAU,mBACb,GAAAA,gBAAAA,EAAA,cAACC,GAAY,EAAA,QAAO,QAAO,OAAM,QAAM,GACvCD,gBAAAA,EAAA,cAAC,OAAKH,MAAAA,CAAa,CACrB,GACCG,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,kBAAkB,GAAA,iBAAe,GAChDA,gBAAAA,EAAA,cAAC,SAAI,WAAU,2BACZF,EAAE,oCAAoC,CACzC,CACF;AAEJ;"}

package/dist/esm/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelCombobox.mjs

@@ -0,0 +1,28 @@
+import e, { useState as d, useCallback as g } from "react";
+import { useConnectedMsTeamsChannels as f } from "@knocklabs/react-core";
+import { Icon as u, Lucide as C } from "@telegraph/icon";
+import { Stack as r } from "@telegraph/layout";
+import { Text as n } from "@telegraph/typography";
+/* empty css               */
+import { MsTeamsChannelInTeamCombobox as h } from "./MsTeamsChannelInTeamCombobox.mjs";
+import _ from "./MsTeamsConnectionError.mjs";
+import { MsTeamsTeamCombobox as E } from "./MsTeamsTeamCombobox.mjs";
+/* empty css            */
+const v = ({
+  msTeamsChannelsRecipientObject: o,
+  teamQueryOptions: s,
+  channelQueryOptions: l
+}) => {
+  const [t, i] = d(null), {
+    data: a
+  } = f({
+    msTeamsChannelsRecipientObject: o
+  }), c = g((p) => (a == null ? void 0 : a.filter((m) => m.ms_teams_team_id === p && !!m.ms_teams_channel_id).length) ?? 0, [a]);
+  return /* @__PURE__ */ e.createElement(r, { className: "tgph rtk-combobox__grid", gap: "3" }, /* @__PURE__ */ e.createElement(n, { color: "gray", size: "2", as: "div" }, "Team"), /* @__PURE__ */ e.createElement(E, { team: t, onTeamChange: i, getChannelCount: c, queryOptions: s }), /* @__PURE__ */ e.createElement(r, { alignItems: "center", gap: "3", minHeight: "8", style: {
+    alignSelf: "start"
+  } }, /* @__PURE__ */ e.createElement(u, { color: "gray", size: "1", icon: C.CornerDownRight, "aria-hidden": !0 }), /* @__PURE__ */ e.createElement(n, { color: "gray", size: "2", as: "div" }, "Channels")), /* @__PURE__ */ e.createElement(h, { teamId: t == null ? void 0 : t.id, msTeamsChannelsRecipientObject: o, queryOptions: l }), /* @__PURE__ */ e.createElement(_, null));
+};
+export {
+  v as default
+};
+//# sourceMappingURL=MsTeamsChannelCombobox.mjs.map

package/dist/esm/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelCombobox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MsTeamsChannelCombobox.mjs","sources":["../../../../../../src/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelCombobox.tsx"],"sourcesContent":["import { MsTeamsTeam } from \"@knocklabs/client\";\nimport {\n  MsTeamsChannelQueryOptions,\n  MsTeamsTeamQueryOptions,\n  RecipientObject,\n  useConnectedMsTeamsChannels,\n} from \"@knocklabs/react-core\";\nimport { Icon, Lucide } from \"@telegraph/icon\";\nimport { Stack } from \"@telegraph/layout\";\nimport { Text } from \"@telegraph/typography\";\nimport { FunctionComponent, useCallback, useState } from \"react\";\n\nimport \"../../theme.css\";\n\nimport { MsTeamsChannelInTeamCombobox } from \"./MsTeamsChannelInTeamCombobox\";\nimport MsTeamsConnectionError from \"./MsTeamsConnectionError\";\nimport { MsTeamsTeamCombobox } from \"./MsTeamsTeamCombobox\";\nimport \"./styles.css\";\n\ninterface Props {\n  msTeamsChannelsRecipientObject: RecipientObject;\n  teamQueryOptions?: MsTeamsTeamQueryOptions;\n  channelQueryOptions?: MsTeamsChannelQueryOptions;\n}\n\nconst MsTeamsChannelCombobox: FunctionComponent<Props> = ({\n  msTeamsChannelsRecipientObject,\n  teamQueryOptions,\n  channelQueryOptions,\n}) => {\n  const [selectedTeam, setSelectedTeam] = useState<MsTeamsTeam | null>(null);\n\n  const { data: currentConnections } = useConnectedMsTeamsChannels({\n    msTeamsChannelsRecipientObject,\n  });\n\n  const getChannelCount = useCallback(\n    (teamId: string) =>\n      currentConnections?.filter(\n        (connection) =>\n          connection.ms_teams_team_id === teamId &&\n          !!connection.ms_teams_channel_id,\n      ).length ?? 0,\n    [currentConnections],\n  );\n\n  return (\n    <Stack className=\"tgph rtk-combobox__grid\" gap=\"3\">\n      <Text color=\"gray\" size=\"2\" as=\"div\">\n        Team\n      </Text>\n      <MsTeamsTeamCombobox\n        team={selectedTeam}\n        onTeamChange={setSelectedTeam}\n        getChannelCount={getChannelCount}\n        queryOptions={teamQueryOptions}\n      />\n      <Stack\n        alignItems=\"center\"\n        gap=\"3\"\n        minHeight=\"8\"\n        style={{ alignSelf: \"start\" }}\n      >\n        <Icon color=\"gray\" size=\"1\" icon={Lucide.CornerDownRight} aria-hidden />\n        <Text color=\"gray\" size=\"2\" as=\"div\">\n          Channels\n        </Text>\n      </Stack>\n      <MsTeamsChannelInTeamCombobox\n        teamId={selectedTeam?.id}\n        msTeamsChannelsRecipientObject={msTeamsChannelsRecipientObject}\n        queryOptions={channelQueryOptions}\n      />\n      <MsTeamsConnectionError />\n    </Stack>\n  );\n};\n\nexport default MsTeamsChannelCombobox;\n"],"names":["MsTeamsChannelCombobox","msTeamsChannelsRecipientObject","teamQueryOptions","channelQueryOptions","selectedTeam","setSelectedTeam","useState","data","currentConnections","useConnectedMsTeamsChannels","getChannelCount","useCallback","teamId","filter","connection","ms_teams_team_id","ms_teams_channel_id","length","React","Stack","Text","MsTeamsTeamCombobox","alignSelf","Icon","Lucide","CornerDownRight","MsTeamsChannelInTeamCombobox","id","MsTeamsConnectionError"],"mappings":";;;;;;;;;;AAyBA,MAAMA,IAAmDA,CAAC;AAAA,EACxDC,gCAAAA;AAAAA,EACAC,kBAAAA;AAAAA,EACAC,qBAAAA;AACF,MAAM;AACJ,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAA6B,IAAI,GAEnE;AAAA,IAAEC,MAAMC;AAAAA,MAAuBC,EAA4B;AAAA,IAC/DR,gCAAAA;AAAAA,EAAAA,CACD,GAEKS,IAAkBC,EACtB,CAACC,OACCJ,KAAAA,gBAAAA,EAAoBK,OACjBC,OACCA,EAAWC,qBAAqBH,KAChC,CAAC,CAACE,EAAWE,qBACfC,WAAU,GACd,CAACT,CAAkB,CACrB;AAEA,SACGU,gBAAAA,EAAA,cAAAC,GAAA,EAAM,WAAU,2BAA0B,KAAI,IAC7C,GAAAD,gBAAAA,EAAA,cAACE,GAAK,EAAA,OAAM,QAAO,MAAK,KAAI,IAAG,SAAK,MAEpC,GACAF,gBAAAA,EAAA,cAACG,GACC,EAAA,MAAMjB,GACN,cAAcC,GACd,iBAAAK,GACA,cAAcR,GAAiB,GAEhCgB,gBAAAA,EAAA,cAAAC,GAAA,EACC,YAAW,UACX,KAAI,KACJ,WAAU,KACV,OAAO;AAAA,IAAEG,WAAW;AAAA,EAAA,KAEpBJ,gBAAAA,EAAA,cAACK,GAAK,EAAA,OAAM,QAAO,MAAK,KAAI,MAAMC,EAAOC,iBAAiB,eAAW,GAAA,CAAA,GACrEP,gBAAAA,EAAA,cAACE,KAAK,OAAM,QAAO,MAAK,KAAI,IAAG,MAAK,GAAA,UAEpC,CACF,mCACCM,GACC,EAAA,QAAQtB,KAAAA,gBAAAA,EAAcuB,IACtB,gCAAA1B,GACA,cAAcE,EAAoB,CAAA,GAEpCe,gBAAAA,EAAA,cAACU,OAAsB,CACzB;AAEJ;"}

package/dist/esm/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelInTeamCombobox.mjs

@@ -0,0 +1,40 @@
+import n, { useMemo as c, useCallback as b } from "react";
+import { useKnockMsTeamsClient as g, useMsTeamsChannels as x, useConnectedMsTeamsChannels as M } from "@knocklabs/react-core";
+import { Combobox as t } from "@telegraph/combobox";
+import { Box as y } from "@telegraph/layout";
+import { sortByDisplayName as S } from "../../utils.mjs";
+import O from "./MsTeamsErrorMessage.mjs";
+const V = ({
+  teamId: r,
+  msTeamsChannelsRecipientObject: h,
+  queryOptions: _
+}) => {
+  const {
+    connectionStatus: s
+  } = g(), {
+    data: o = []
+  } = x({
+    teamId: r,
+    queryOptions: _
+  }), p = c(() => S(o), [o]), {
+    data: a,
+    updateConnectedChannels: u,
+    error: l
+  } = M({
+    msTeamsChannelsRecipientObject: h
+  }), C = c(() => s === "disconnected" || s === "error" || !!l, [s, l]), E = c(() => s === "connecting" || s === "disconnecting", [s]), i = b((e) => o.some((d) => d.id === e), [o]), T = c(() => a == null ? void 0 : a.filter((e) => e.ms_teams_channel_id && i(e.ms_teams_channel_id)).map((e) => e.ms_teams_channel_id), [a, i]);
+  return /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(y, { w: "full", minW: "0" }, /* @__PURE__ */ n.createElement(t.Root, { value: T, onValueChange: (e) => {
+    const d = e.map((m) => ({
+      ms_teams_team_id: r,
+      ms_teams_channel_id: m
+    })), f = [...(a == null ? void 0 : a.filter((m) => !m.ms_teams_channel_id || !i(m.ms_teams_channel_id))) ?? [], ...d];
+    u(f).catch(console.error);
+  }, placeholder: "Select channels", disabled: r === void 0 || C || E || o.length === 0, closeOnSelect: !1, layout: "wrap", modal: (
+    // Modal comboboxes cause page layout to shift when body has padding. See KNO-7854.
+    !1
+  ) }, /* @__PURE__ */ n.createElement(t.Trigger, null), /* @__PURE__ */ n.createElement(t.Content, null, /* @__PURE__ */ n.createElement(t.Search, { className: "rtk-combobox__search" }), /* @__PURE__ */ n.createElement(t.Options, { maxHeight: "36" }, p.map((e) => /* @__PURE__ */ n.createElement(t.Option, { key: e.id, value: e.id }, e.displayName))), /* @__PURE__ */ n.createElement(t.Empty, null)))), !!l && /* @__PURE__ */ n.createElement(O, { message: l }));
+};
+export {
+  V as MsTeamsChannelInTeamCombobox
+};
+//# sourceMappingURL=MsTeamsChannelInTeamCombobox.mjs.map

package/dist/esm/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelInTeamCombobox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MsTeamsChannelInTeamCombobox.mjs","sources":["../../../../../../src/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelInTeamCombobox.tsx"],"sourcesContent":["import { MsTeamsChannelConnection } from \"@knocklabs/client\";\nimport {\n  MsTeamsChannelQueryOptions,\n  RecipientObject,\n  useConnectedMsTeamsChannels,\n  useKnockMsTeamsClient,\n  useMsTeamsChannels,\n} from \"@knocklabs/react-core\";\nimport { Combobox } from \"@telegraph/combobox\";\nimport { Box } from \"@telegraph/layout\";\nimport { FunctionComponent, useCallback, useMemo } from \"react\";\n\nimport { sortByDisplayName } from \"../../utils\";\n\nimport MsTeamsErrorMessage from \"./MsTeamsErrorMessage\";\n\ninterface MsTeamsChannelInTeamComboboxProps {\n  teamId?: string;\n  msTeamsChannelsRecipientObject: RecipientObject;\n  queryOptions?: MsTeamsChannelQueryOptions;\n}\n\nexport const MsTeamsChannelInTeamCombobox: FunctionComponent<\n  MsTeamsChannelInTeamComboboxProps\n> = ({ teamId, msTeamsChannelsRecipientObject, queryOptions }) => {\n  const { connectionStatus } = useKnockMsTeamsClient();\n\n  const { data: availableChannels = [] } = useMsTeamsChannels({\n    teamId,\n    queryOptions,\n  });\n\n  const sortedChannels = useMemo(\n    () => sortByDisplayName(availableChannels),\n    [availableChannels],\n  );\n\n  const {\n    data: currentConnections,\n    updateConnectedChannels,\n    error: connectedChannelsError,\n  } = useConnectedMsTeamsChannels({ msTeamsChannelsRecipientObject });\n\n  const inErrorState = useMemo(\n    () =>\n      connectionStatus === \"disconnected\" ||\n      connectionStatus === \"error\" ||\n      !!connectedChannelsError,\n    [connectionStatus, connectedChannelsError],\n  );\n\n  const inLoadingState = useMemo(\n    () =>\n      connectionStatus === \"connecting\" || connectionStatus === \"disconnecting\",\n    [connectionStatus],\n  );\n\n  const isChannelInThisTeam = useCallback(\n    (channelId: string) =>\n      availableChannels.some((channel) => channel.id === channelId),\n    [availableChannels],\n  );\n\n  const comboboxValue = useMemo(\n    () =>\n      currentConnections\n        ?.filter(\n          (connection) =>\n            connection.ms_teams_channel_id &&\n            isChannelInThisTeam(connection.ms_teams_channel_id),\n        )\n        .map((connection) => connection.ms_teams_channel_id),\n    [currentConnections, isChannelInThisTeam],\n  );\n\n  return (\n    <>\n      <Box w=\"full\" minW=\"0\">\n        <Combobox.Root\n          value={comboboxValue}\n          onValueChange={(channelIds) => {\n            const connectedChannelsInThisTeam =\n              channelIds.map<MsTeamsChannelConnection>((channelId) => ({\n                ms_teams_team_id: teamId,\n                ms_teams_channel_id: channelId,\n              }));\n            const connectedChannelsInOtherTeams =\n              currentConnections?.filter(\n                (connection) =>\n                  !connection.ms_teams_channel_id ||\n                  !isChannelInThisTeam(connection.ms_teams_channel_id),\n              ) ?? [];\n\n            const updatedConnections = [\n              ...connectedChannelsInOtherTeams,\n              ...connectedChannelsInThisTeam,\n            ];\n\n            updateConnectedChannels(updatedConnections).catch(console.error);\n          }}\n          placeholder=\"Select channels\"\n          disabled={\n            teamId === undefined ||\n            inErrorState ||\n            inLoadingState ||\n            availableChannels.length === 0\n          }\n          closeOnSelect={false}\n          layout=\"wrap\"\n          modal={\n            // Modal comboboxes cause page layout to shift when body has padding. See KNO-7854.\n            false\n          }\n        >\n          <Combobox.Trigger />\n          <Combobox.Content>\n            <Combobox.Search className=\"rtk-combobox__search\" />\n            <Combobox.Options maxHeight=\"36\">\n              {sortedChannels.map((channel) => (\n                <Combobox.Option key={channel.id} value={channel.id}>\n                  {channel.displayName}\n                </Combobox.Option>\n              ))}\n            </Combobox.Options>\n            <Combobox.Empty />\n          </Combobox.Content>\n        </Combobox.Root>\n      </Box>\n      {!!connectedChannelsError && (\n        <MsTeamsErrorMessage message={connectedChannelsError} />\n      )}\n    </>\n  );\n};\n"],"names":["MsTeamsChannelInTeamCombobox","teamId","msTeamsChannelsRecipientObject","queryOptions","connectionStatus","useKnockMsTeamsClient","data","availableChannels","useMsTeamsChannels","sortedChannels","useMemo","sortByDisplayName","currentConnections","updateConnectedChannels","error","connectedChannelsError","useConnectedMsTeamsChannels","inErrorState","inLoadingState","isChannelInThisTeam","useCallback","channelId","some","channel","id","comboboxValue","filter","connection","ms_teams_channel_id","map","React","Box","Combobox","channelIds","connectedChannelsInThisTeam","ms_teams_team_id","updatedConnections","catch","console","undefined","length","displayName","MsTeamsErrorMessage"],"mappings":";;;;;;AAsBO,MAAMA,IAETA,CAAC;AAAA,EAAEC,QAAAA;AAAAA,EAAQC,gCAAAA;AAAAA,EAAgCC,cAAAA;AAAa,MAAM;AAC1D,QAAA;AAAA,IAAEC,kBAAAA;AAAAA,MAAqBC,EAAsB,GAE7C;AAAA,IAAEC,MAAMC,IAAoB,CAAA;AAAA,MAAOC,EAAmB;AAAA,IAC1DP,QAAAA;AAAAA,IACAE,cAAAA;AAAAA,EAAAA,CACD,GAEKM,IAAiBC,EACrB,MAAMC,EAAkBJ,CAAiB,GACzC,CAACA,CAAiB,CACpB,GAEM;AAAA,IACJD,MAAMM;AAAAA,IACNC,yBAAAA;AAAAA,IACAC,OAAOC;AAAAA,MACLC,EAA4B;AAAA,IAAEd,gCAAAA;AAAAA,EAAAA,CAAgC,GAE5De,IAAeP,EACnB,MACEN,MAAqB,kBACrBA,MAAqB,WACrB,CAAC,CAACW,GACJ,CAACX,GAAkBW,CAAsB,CAC3C,GAEMG,IAAiBR,EACrB,MACEN,MAAqB,gBAAgBA,MAAqB,iBAC5D,CAACA,CAAgB,CACnB,GAEMe,IAAsBC,EAC1B,CAACC,MACCd,EAAkBe,KAAMC,CAAYA,MAAAA,EAAQC,OAAOH,CAAS,GAC9D,CAACd,CAAiB,CACpB,GAEMkB,IAAgBf,EACpB,MACEE,KAAAA,gBAAAA,EACIc,OACCC,CACCA,MAAAA,EAAWC,uBACXT,EAAoBQ,EAAWC,mBAAmB,GAErDC,IAAKF,CAAeA,MAAAA,EAAWC,sBACpC,CAAChB,GAAoBO,CAAmB,CAC1C;AAEA,SAEIW,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MAAAA,gBAAAA,EAAA,cAACC,GAAI,EAAA,GAAE,QAAO,MAAK,OAChBD,gBAAAA,EAAA,cAAAE,EAAS,MAAT,EACC,OAAOP,GACP,eAAgBQ,CAAeA,MAAA;AACvBC,UAAAA,IACJD,EAAWJ,IAA+BR,CAAeA,OAAA;AAAA,MACvDc,kBAAkBlC;AAAAA,MAClB2B,qBAAqBP;AAAAA,IAAAA,EACrB,GAQEe,IAAqB,CACzB,IAPAxB,KAAAA,gBAAAA,EAAoBc,OACjBC,CAAAA,MACC,CAACA,EAAWC,uBACZ,CAACT,EAAoBQ,EAAWC,mBAAmB,OAClD,CAAE,GAIP,GAAGM,CAA2B;AAGhCrB,IAAAA,EAAwBuB,CAAkB,EAAEC,MAAMC,QAAQxB,KAAK;AAAA,EAAA,GAEjE,aAAY,mBACZ,UACEb,MAAWsC,UACXtB,KACAC,KACAX,EAAkBiC,WAAW,GAE/B,eAAe,IACf,QAAO,QACP;AAAA;AAAA,IAEE;AAAA,IAGF,GAAAV,gBAAAA,EAAA,cAACE,EAAS,SAAT,IAAgB,mCAChBA,EAAS,SAAT,MACCF,gBAAAA,EAAA,cAACE,EAAS,QAAT,EAAgB,WAAU,uBAAsB,CAAA,GACjDF,gBAAAA,EAAA,cAACE,EAAS,SAAT,EAAiB,WAAU,KACzBvB,GAAAA,EAAeoB,IAAKN,CAAAA,MAClBO,gBAAAA,EAAA,cAAAE,EAAS,QAAT,EAAgB,KAAKT,EAAQC,IAAI,OAAOD,EAAQC,GAC9CD,GAAAA,EAAQkB,WACX,CACD,CACH,GACCX,gBAAAA,EAAA,cAAAE,EAAS,OAAT,IAAc,CACjB,CACF,CACF,GACC,CAAC,CAACjB,KACAe,gBAAAA,EAAA,cAAAY,GAAA,EAAoB,SAAS3B,EAC/B,CAAA,CACH;AAEJ;"}

package/dist/esm/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsConnectionError.mjs

@@ -0,0 +1,15 @@
+import n from "react";
+import { useTranslations as o, useKnockMsTeamsClient as s } from "@knocklabs/react-core";
+import t from "./MsTeamsErrorMessage.mjs";
+const i = () => {
+  const {
+    t: r
+  } = o(), {
+    connectionStatus: e
+  } = s();
+  return e === "disconnected" || e === "error" ? /* @__PURE__ */ n.createElement(t, { message: r(e === "disconnected" ? "msTeamsConnectionErrorOccurred" : "msTeamsConnectionErrorExists") }) : null;
+};
+export {
+  i as default
+};
+//# sourceMappingURL=MsTeamsConnectionError.mjs.map

package/dist/esm/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsConnectionError.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MsTeamsConnectionError.mjs","sources":["../../../../../../src/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsConnectionError.tsx"],"sourcesContent":["import { useKnockMsTeamsClient, useTranslations } from \"@knocklabs/react-core\";\nimport { FunctionComponent } from \"react\";\n\nimport MsTeamsErrorMessage from \"./MsTeamsErrorMessage\";\n\nconst MsTeamsConnectionError: FunctionComponent = () => {\n  const { t } = useTranslations();\n  const { connectionStatus } = useKnockMsTeamsClient();\n\n  if (connectionStatus === \"disconnected\" || connectionStatus === \"error\") {\n    return (\n      <MsTeamsErrorMessage\n        message={\n          connectionStatus === \"disconnected\"\n            ? t(\"msTeamsConnectionErrorOccurred\")\n            : t(\"msTeamsConnectionErrorExists\")\n        }\n      />\n    );\n  }\n\n  return null;\n};\n\nexport default MsTeamsConnectionError;\n"],"names":["MsTeamsConnectionError","t","useTranslations","connectionStatus","useKnockMsTeamsClient","React","MsTeamsErrorMessage"],"mappings":";;;AAKA,MAAMA,IAA4CA,MAAM;AAChD,QAAA;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAgB,GACxB;AAAA,IAAEC,kBAAAA;AAAAA,MAAqBC,EAAsB;AAE/CD,SAAAA,MAAqB,kBAAkBA,MAAqB,UAE5DE,gBAAAA,EAAA,cAACC,GACC,EAAA,SAEML,EADJE,MAAqB,iBACf,mCACA,8BADgC,EAGxC,CAAA,IAIC;AACT;"}

package/dist/esm/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsErrorMessage.mjs

@@ -0,0 +1,10 @@
+import e from "react";
+import { Icon as o, Lucide as t } from "@telegraph/icon";
+import { Text as a } from "@telegraph/typography";
+const n = ({
+  message: r
+}) => /* @__PURE__ */ e.createElement("div", { className: "rtk-combobox__error" }, /* @__PURE__ */ e.createElement("span", null, /* @__PURE__ */ e.createElement(o, { icon: t.Info, color: "black", size: "1", "aria-hidden": !0 })), /* @__PURE__ */ e.createElement(a, { as: "div", color: "black", size: "1" }, r));
+export {
+  n as default
+};
+//# sourceMappingURL=MsTeamsErrorMessage.mjs.map

package/dist/esm/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsErrorMessage.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MsTeamsErrorMessage.mjs","sources":["../../../../../../src/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsErrorMessage.tsx"],"sourcesContent":["import { Icon, Lucide } from \"@telegraph/icon\";\nimport { Text } from \"@telegraph/typography\";\nimport { FunctionComponent } from \"react\";\n\ninterface Props {\n  message?: string;\n}\n\nconst MsTeamsErrorMessage: FunctionComponent<Props> = ({ message }) => {\n  return (\n    <div className=\"rtk-combobox__error\">\n      <span>\n        <Icon icon={Lucide.Info} color=\"black\" size=\"1\" aria-hidden />\n      </span>\n      <Text as=\"div\" color=\"black\" size=\"1\">\n        {message}\n      </Text>\n    </div>\n  );\n};\n\nexport default MsTeamsErrorMessage;\n"],"names":["MsTeamsErrorMessage","message","React","Icon","Lucide","Info","Text"],"mappings":";;;AAQA,MAAMA,IAAgDA,CAAC;AAAA,EAAEC,SAAAA;AAAQ,MAE5DC,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,sBAAA,GACZA,gBAAAA,EAAA,cAAA,QAAA,MACEA,gBAAAA,EAAA,cAAAC,GAAA,EAAK,MAAMC,EAAOC,MAAM,OAAM,SAAQ,MAAK,KAAI,eAAW,GAAA,CAAA,CAC7D,GACAH,gBAAAA,EAAA,cAACI,GAAK,EAAA,IAAG,OAAM,OAAM,SAAQ,MAAK,IAC/BL,GAAAA,CACH,CACF;"}

package/dist/esm/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsTeamCombobox.mjs

@@ -0,0 +1,34 @@
+import e, { useMemo as c } from "react";
+import { useKnockMsTeamsClient as E, useMsTeamsTeams as T } from "@knocklabs/react-core";
+import { Combobox as o } from "@telegraph/combobox";
+import { Box as b } from "@telegraph/layout";
+import { sortByDisplayName as h } from "../../utils.mjs";
+const N = ({
+  team: s,
+  onTeamChange: m,
+  getChannelCount: d,
+  queryOptions: u
+}) => {
+  const {
+    connectionStatus: n
+  } = E(), {
+    data: i,
+    isLoading: l
+  } = T({
+    queryOptions: u
+  }), r = c(() => h(i), [i]), p = c(() => n === "disconnected" || n === "error", [n]), f = c(() => n === "connecting" || n === "disconnecting" || l, [n, l]);
+  return /* @__PURE__ */ e.createElement(b, { w: "full", minW: "0" }, /* @__PURE__ */ e.createElement(o.Root, { value: s == null ? void 0 : s.id, onValueChange: (t) => {
+    const a = r.find((g) => g.id === t);
+    a && m(a);
+  }, placeholder: "Select team", disabled: p || f || r.length === 0, modal: (
+    // Modal comboboxes cause page layout to shift when body has padding. See KNO-7854.
+    !1
+  ) }, /* @__PURE__ */ e.createElement(o.Trigger, null), /* @__PURE__ */ e.createElement(o.Content, null, /* @__PURE__ */ e.createElement(o.Search, { className: "rtk-combobox__search" }), /* @__PURE__ */ e.createElement(o.Options, { maxHeight: "36" }, r.map((t) => {
+    const a = d(t.id);
+    return /* @__PURE__ */ e.createElement(o.Option, { key: t.id, value: t.id }, a > 0 ? `${t.displayName} (${a})` : t.displayName);
+  })), /* @__PURE__ */ e.createElement(o.Empty, null))));
+};
+export {
+  N as MsTeamsTeamCombobox
+};
+//# sourceMappingURL=MsTeamsTeamCombobox.mjs.map

package/dist/esm/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsTeamCombobox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MsTeamsTeamCombobox.mjs","sources":["../../../../../../src/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsTeamCombobox.tsx"],"sourcesContent":["import { MsTeamsTeam } from \"@knocklabs/client\";\nimport {\n  MsTeamsTeamQueryOptions,\n  useKnockMsTeamsClient,\n  useMsTeamsTeams,\n} from \"@knocklabs/react-core\";\nimport { Combobox } from \"@telegraph/combobox\";\nimport { Box } from \"@telegraph/layout\";\nimport { FunctionComponent, useMemo } from \"react\";\n\nimport { sortByDisplayName } from \"../../utils\";\n\ninterface MsTeamsTeamComboboxProps {\n  team: MsTeamsTeam | null;\n  onTeamChange: (team: MsTeamsTeam) => void;\n  getChannelCount: (teamId: string) => number;\n  queryOptions?: MsTeamsTeamQueryOptions;\n}\n\nexport const MsTeamsTeamCombobox: FunctionComponent<\n  MsTeamsTeamComboboxProps\n> = ({ team, onTeamChange, getChannelCount, queryOptions }) => {\n  const { connectionStatus } = useKnockMsTeamsClient();\n\n  const { data: teams, isLoading: isLoadingTeams } = useMsTeamsTeams({\n    queryOptions,\n  });\n\n  const sortedTeams = useMemo(() => sortByDisplayName(teams), [teams]);\n\n  const inErrorState = useMemo(\n    () => connectionStatus === \"disconnected\" || connectionStatus === \"error\",\n    [connectionStatus],\n  );\n\n  const inLoadingState = useMemo(\n    () =>\n      connectionStatus === \"connecting\" ||\n      connectionStatus === \"disconnecting\" ||\n      isLoadingTeams,\n    [connectionStatus, isLoadingTeams],\n  );\n\n  return (\n    <Box w=\"full\" minW=\"0\">\n      <Combobox.Root\n        value={team?.id}\n        onValueChange={(teamId) => {\n          const selectedTeam = sortedTeams.find((team) => team.id === teamId);\n          if (selectedTeam) {\n            onTeamChange(selectedTeam);\n          }\n        }}\n        placeholder=\"Select team\"\n        disabled={inErrorState || inLoadingState || sortedTeams.length === 0}\n        modal={\n          // Modal comboboxes cause page layout to shift when body has padding. See KNO-7854.\n          false\n        }\n      >\n        <Combobox.Trigger />\n        <Combobox.Content>\n          <Combobox.Search className=\"rtk-combobox__search\" />\n          <Combobox.Options maxHeight=\"36\">\n            {sortedTeams.map((team) => {\n              const channelCount = getChannelCount(team.id);\n              return (\n                <Combobox.Option key={team.id} value={team.id}>\n                  {channelCount > 0\n                    ? `${team.displayName} (${channelCount})`\n                    : team.displayName}\n                </Combobox.Option>\n              );\n            })}\n          </Combobox.Options>\n          <Combobox.Empty />\n        </Combobox.Content>\n      </Combobox.Root>\n    </Box>\n  );\n};\n"],"names":["MsTeamsTeamCombobox","team","onTeamChange","getChannelCount","queryOptions","connectionStatus","useKnockMsTeamsClient","data","teams","isLoading","isLoadingTeams","useMsTeamsTeams","sortedTeams","useMemo","sortByDisplayName","inErrorState","inLoadingState","React","Box","Combobox","id","teamId","selectedTeam","find","length","map","channelCount","displayName"],"mappings":";;;;;AAmBO,MAAMA,IAETA,CAAC;AAAA,EAAEC,MAAAA;AAAAA,EAAMC,cAAAA;AAAAA,EAAcC,iBAAAA;AAAAA,EAAiBC,cAAAA;AAAa,MAAM;AACvD,QAAA;AAAA,IAAEC,kBAAAA;AAAAA,MAAqBC,EAAsB,GAE7C;AAAA,IAAEC,MAAMC;AAAAA,IAAOC,WAAWC;AAAAA,MAAmBC,EAAgB;AAAA,IACjEP,cAAAA;AAAAA,EAAAA,CACD,GAEKQ,IAAcC,EAAQ,MAAMC,EAAkBN,CAAK,GAAG,CAACA,CAAK,CAAC,GAE7DO,IAAeF,EACnB,MAAMR,MAAqB,kBAAkBA,MAAqB,SAClE,CAACA,CAAgB,CACnB,GAEMW,IAAiBH,EACrB,MACER,MAAqB,gBACrBA,MAAqB,mBACrBK,GACF,CAACL,GAAkBK,CAAc,CACnC;AAEA,SACGO,gBAAAA,EAAA,cAAAC,GAAA,EAAI,GAAE,QAAO,MAAK,OACjBD,gBAAAA,EAAA,cAACE,EAAS,MAAT,EACC,OAAOlB,KAAAA,gBAAAA,EAAMmB,IACb,eAAgBC,CAAWA,MAAA;AACzB,UAAMC,IAAeV,EAAYW,KAAMtB,CAAAA,MAASA,EAAKmB,OAAOC,CAAM;AAClE,IAAIC,KACFpB,EAAaoB,CAAY;AAAA,EAC3B,GAEF,aAAY,eACZ,UAAUP,KAAgBC,KAAkBJ,EAAYY,WAAW,GACnE;AAAA;AAAA,IAEE;AAAA,IAGF,GAAAP,gBAAAA,EAAA,cAACE,EAAS,SAAT,IAAgB,mCAChBA,EAAS,SAAT,MACCF,gBAAAA,EAAA,cAACE,EAAS,QAAT,EAAgB,WAAU,uBAAA,CAAsB,GACjDF,gBAAAA,EAAA,cAACE,EAAS,SAAT,EAAiB,WAAU,KACzBP,GAAAA,EAAYa,IAAKxB,CAAAA,MAAS;AACnByB,UAAAA,IAAevB,EAAgBF,EAAKmB,EAAE;AAC5C,2CACGD,EAAS,QAAT,EAAgB,KAAKlB,EAAKmB,IAAI,OAAOnB,EAAKmB,MACxCM,IAAe,IACZ,GAAGzB,EAAK0B,WAAW,KAAKD,CAAY,MACpCzB,EAAK0B,WACX;AAAA,EAAA,CAEH,CACH,GACAV,gBAAAA,EAAA,cAACE,EAAS,OAAT,IAAc,CACjB,CACF,CACF;AAEJ;"}

package/dist/esm/modules/ms-teams/components/MsTeamsIcon/MsTeamsIcon.mjs

@@ -0,0 +1,15 @@
+import e from "react";
+const l = ({
+  height: t,
+  width: c
+}) => (
+  // Source: https://commons.wikimedia.org/wiki/File:Microsoft_Office_Teams_(2018%E2%80%93present).svg
+  /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
+    height: t,
+    width: c
+  }, viewBox: "0 0 2228.833 2073.333" }, /* @__PURE__ */ e.createElement("path", { fill: "#5059C9", d: "M1554.637,777.5h575.713c54.391,0,98.483,44.092,98.483,98.483c0,0,0,0,0,0v524.398 c0,199.901-162.051,361.952-361.952,361.952h0h-1.711c-199.901,0.028-361.975-162-362.004-361.901c0-0.017,0-0.034,0-0.052V828.971 C1503.167,800.544,1526.211,777.5,1554.637,777.5L1554.637,777.5z" }), /* @__PURE__ */ e.createElement("circle", { fill: "#5059C9", cx: "1943.75", cy: "440.583", r: "233.25" }), /* @__PURE__ */ e.createElement("circle", { fill: "#7B83EB", cx: "1218.083", cy: "336.917", r: "336.917" }), /* @__PURE__ */ e.createElement("path", { fill: "#7B83EB", d: "M1667.323,777.5H717.01c-53.743,1.33-96.257,45.931-95.01,99.676v598.105 c-7.505,322.519,247.657,590.16,570.167,598.053c322.51-7.893,577.671-275.534,570.167-598.053V877.176 C1763.579,823.431,1721.066,778.83,1667.323,777.5z" }), /* @__PURE__ */ e.createElement("path", { opacity: ".1", d: "M1244,777.5v838.145c-0.258,38.435-23.549,72.964-59.09,87.598 c-11.316,4.787-23.478,7.254-35.765,7.257H667.613c-6.738-17.105-12.958-34.21-18.142-51.833 c-18.144-59.477-27.402-121.307-27.472-183.49V877.02c-1.246-53.659,41.198-98.19,94.855-99.52H1244z" }), /* @__PURE__ */ e.createElement("path", { opacity: ".2", d: "M1192.167,777.5v889.978c-0.002,12.287-2.47,24.449-7.257,35.765 c-14.634,35.541-49.163,58.833-87.598,59.09H691.975c-8.812-17.105-17.105-34.21-24.362-51.833 c-7.257-17.623-12.958-34.21-18.142-51.833c-18.144-59.476-27.402-121.307-27.472-183.49V877.02 c-1.246-53.659,41.198-98.19,94.855-99.52H1192.167z" }), /* @__PURE__ */ e.createElement("path", { opacity: ".2", d: "M1192.167,777.5v786.312c-0.395,52.223-42.632,94.46-94.855,94.855h-447.84 c-18.144-59.476-27.402-121.307-27.472-183.49V877.02c-1.246-53.659,41.198-98.19,94.855-99.52H1192.167z" }), /* @__PURE__ */ e.createElement("path", { opacity: ".2", d: "M1140.333,777.5v786.312c-0.395,52.223-42.632,94.46-94.855,94.855H649.472 c-18.144-59.476-27.402-121.307-27.472-183.49V877.02c-1.246-53.659,41.198-98.19,94.855-99.52H1140.333z" }), /* @__PURE__ */ e.createElement("path", { opacity: ".1", d: "M1244,509.522v163.275c-8.812,0.518-17.105,1.037-25.917,1.037 c-8.812,0-17.105-0.518-25.917-1.037c-17.496-1.161-34.848-3.937-51.833-8.293c-104.963-24.857-191.679-98.469-233.25-198.003 c-7.153-16.715-12.706-34.071-16.587-51.833h258.648C1201.449,414.866,1243.801,457.217,1244,509.522z" }), /* @__PURE__ */ e.createElement("path", { opacity: ".2", d: "M1192.167,561.355v111.442c-17.496-1.161-34.848-3.937-51.833-8.293 c-104.963-24.857-191.679-98.469-233.25-198.003h190.228C1149.616,466.699,1191.968,509.051,1192.167,561.355z" }), /* @__PURE__ */ e.createElement("path", { opacity: ".2", d: "M1192.167,561.355v111.442c-17.496-1.161-34.848-3.937-51.833-8.293 c-104.963-24.857-191.679-98.469-233.25-198.003h190.228C1149.616,466.699,1191.968,509.051,1192.167,561.355z" }), /* @__PURE__ */ e.createElement("path", { opacity: ".2", d: "M1140.333,561.355v103.148c-104.963-24.857-191.679-98.469-233.25-198.003 h138.395C1097.783,466.699,1140.134,509.051,1140.333,561.355z" }), /* @__PURE__ */ e.createElement("linearGradient", { id: "a", gradientUnits: "userSpaceOnUse", x1: "198.099", y1: "1683.0726", x2: "942.2344", y2: "394.2607", gradientTransform: "matrix(1 0 0 -1 0 2075.3333)" }, /* @__PURE__ */ e.createElement("stop", { offset: "0", stopColor: "#5a62c3" }), /* @__PURE__ */ e.createElement("stop", { offset: ".5", stopColor: "#4d55bd" }), /* @__PURE__ */ e.createElement("stop", { offset: "1", stopColor: "#3940ab" })), /* @__PURE__ */ e.createElement("path", { fill: "url(#a)", d: "M95.01,466.5h950.312c52.473,0,95.01,42.538,95.01,95.01v950.312c0,52.473-42.538,95.01-95.01,95.01 H95.01c-52.473,0-95.01-42.538-95.01-95.01V561.51C0,509.038,42.538,466.5,95.01,466.5z" }), /* @__PURE__ */ e.createElement("path", { fill: "#FFF", d: "M820.211,828.193H630.241v517.297H509.211V828.193H320.123V727.844h500.088V828.193z" }))
+);
+export {
+  l as MsTeamsIcon
+};
+//# sourceMappingURL=MsTeamsIcon.mjs.map

package/dist/esm/modules/ms-teams/components/MsTeamsIcon/MsTeamsIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MsTeamsIcon.mjs","sources":["../../../../../../src/modules/ms-teams/components/MsTeamsIcon/MsTeamsIcon.tsx"],"sourcesContent":["import { FunctionComponent } from \"react\";\n\nexport interface MsTeamsIconProps {\n  height: string;\n  width: string;\n}\n\nexport const MsTeamsIcon: FunctionComponent<MsTeamsIconProps> = ({\n  height,\n  width,\n}) => {\n  return (\n    // Source: https://commons.wikimedia.org/wiki/File:Microsoft_Office_Teams_(2018%E2%80%93present).svg\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      style={{ height, width }}\n      viewBox=\"0 0 2228.833 2073.333\"\n    >\n      <path\n        fill=\"#5059C9\"\n        d=\"M1554.637,777.5h575.713c54.391,0,98.483,44.092,98.483,98.483c0,0,0,0,0,0v524.398 c0,199.901-162.051,361.952-361.952,361.952h0h-1.711c-199.901,0.028-361.975-162-362.004-361.901c0-0.017,0-0.034,0-0.052V828.971 C1503.167,800.544,1526.211,777.5,1554.637,777.5L1554.637,777.5z\"\n      />\n      <circle fill=\"#5059C9\" cx=\"1943.75\" cy=\"440.583\" r=\"233.25\" />\n      <circle fill=\"#7B83EB\" cx=\"1218.083\" cy=\"336.917\" r=\"336.917\" />\n      <path\n        fill=\"#7B83EB\"\n        d=\"M1667.323,777.5H717.01c-53.743,1.33-96.257,45.931-95.01,99.676v598.105 c-7.505,322.519,247.657,590.16,570.167,598.053c322.51-7.893,577.671-275.534,570.167-598.053V877.176 C1763.579,823.431,1721.066,778.83,1667.323,777.5z\"\n      />\n      <path\n        opacity=\".1\"\n        d=\"M1244,777.5v838.145c-0.258,38.435-23.549,72.964-59.09,87.598 c-11.316,4.787-23.478,7.254-35.765,7.257H667.613c-6.738-17.105-12.958-34.21-18.142-51.833 c-18.144-59.477-27.402-121.307-27.472-183.49V877.02c-1.246-53.659,41.198-98.19,94.855-99.52H1244z\"\n      />\n      <path\n        opacity=\".2\"\n        d=\"M1192.167,777.5v889.978c-0.002,12.287-2.47,24.449-7.257,35.765 c-14.634,35.541-49.163,58.833-87.598,59.09H691.975c-8.812-17.105-17.105-34.21-24.362-51.833 c-7.257-17.623-12.958-34.21-18.142-51.833c-18.144-59.476-27.402-121.307-27.472-183.49V877.02 c-1.246-53.659,41.198-98.19,94.855-99.52H1192.167z\"\n      />\n      <path\n        opacity=\".2\"\n        d=\"M1192.167,777.5v786.312c-0.395,52.223-42.632,94.46-94.855,94.855h-447.84 c-18.144-59.476-27.402-121.307-27.472-183.49V877.02c-1.246-53.659,41.198-98.19,94.855-99.52H1192.167z\"\n      />\n      <path\n        opacity=\".2\"\n        d=\"M1140.333,777.5v786.312c-0.395,52.223-42.632,94.46-94.855,94.855H649.472 c-18.144-59.476-27.402-121.307-27.472-183.49V877.02c-1.246-53.659,41.198-98.19,94.855-99.52H1140.333z\"\n      />\n      <path\n        opacity=\".1\"\n        d=\"M1244,509.522v163.275c-8.812,0.518-17.105,1.037-25.917,1.037 c-8.812,0-17.105-0.518-25.917-1.037c-17.496-1.161-34.848-3.937-51.833-8.293c-104.963-24.857-191.679-98.469-233.25-198.003 c-7.153-16.715-12.706-34.071-16.587-51.833h258.648C1201.449,414.866,1243.801,457.217,1244,509.522z\"\n      />\n      <path\n        opacity=\".2\"\n        d=\"M1192.167,561.355v111.442c-17.496-1.161-34.848-3.937-51.833-8.293 c-104.963-24.857-191.679-98.469-233.25-198.003h190.228C1149.616,466.699,1191.968,509.051,1192.167,561.355z\"\n      />\n      <path\n        opacity=\".2\"\n        d=\"M1192.167,561.355v111.442c-17.496-1.161-34.848-3.937-51.833-8.293 c-104.963-24.857-191.679-98.469-233.25-198.003h190.228C1149.616,466.699,1191.968,509.051,1192.167,561.355z\"\n      />\n      <path\n        opacity=\".2\"\n        d=\"M1140.333,561.355v103.148c-104.963-24.857-191.679-98.469-233.25-198.003 h138.395C1097.783,466.699,1140.134,509.051,1140.333,561.355z\"\n      />\n      <linearGradient\n        id=\"a\"\n        gradientUnits=\"userSpaceOnUse\"\n        x1=\"198.099\"\n        y1=\"1683.0726\"\n        x2=\"942.2344\"\n        y2=\"394.2607\"\n        gradientTransform=\"matrix(1 0 0 -1 0 2075.3333)\"\n      >\n        <stop offset=\"0\" stopColor=\"#5a62c3\" />\n        <stop offset=\".5\" stopColor=\"#4d55bd\" />\n        <stop offset=\"1\" stopColor=\"#3940ab\" />\n      </linearGradient>\n      <path\n        fill=\"url(#a)\"\n        d=\"M95.01,466.5h950.312c52.473,0,95.01,42.538,95.01,95.01v950.312c0,52.473-42.538,95.01-95.01,95.01 H95.01c-52.473,0-95.01-42.538-95.01-95.01V561.51C0,509.038,42.538,466.5,95.01,466.5z\"\n      />\n      <path\n        fill=\"#FFF\"\n        d=\"M820.211,828.193H630.241v517.297H509.211V828.193H320.123V727.844h500.088V828.193z\"\n      />\n    </svg>\n  );\n};\n"],"names":["MsTeamsIcon","height","width","React"],"mappings":";AAOO,MAAMA,IAAmDA,CAAC;AAAA,EAC/DC,QAAAA;AAAAA,EACAC,OAAAA;AACF;AAAA;AAAA,EAGKC,gBAAAA,EAAA,cAAA,OAAA,EACC,OAAM,8BACN,OAAO;AAAA,IAAEF,QAAAA;AAAAA,IAAQC,OAAAA;AAAAA,EAAAA,GACjB,SAAQ,wBAER,GAAAC,gBAAAA,EAAA,cAAC,UACC,MAAK,WACL,GAAE,kRAAA,CAAiR,GAErRA,gBAAAA,EAAA,cAAC,UAAO,EAAA,MAAK,WAAU,IAAG,WAAU,IAAG,WAAU,GAAE,SAAA,CAAQ,GAC3DA,gBAAAA,EAAA,cAAC,YAAO,MAAK,WAAU,IAAG,YAAW,IAAG,WAAU,GAAE,UAAS,CAAA,mCAC5D,QACC,EAAA,MAAK,WACL,GAAE,gOAA8N,GAEjOA,gBAAAA,EAAA,cAAA,QAAA,EACC,SAAQ,MACR,GAAE,4PAA0P,mCAE7P,QACC,EAAA,SAAQ,MACR,GAAE,6SAA4S,CAAA,GAEhTA,gBAAAA,EAAA,cAAC,QACC,EAAA,SAAQ,MACR,GAAE,iLAAgL,CAAA,mCAEnL,QACC,EAAA,SAAQ,MACR,GAAE,kLAAgL,GAEpLA,gBAAAA,EAAA,cAAC,QACC,EAAA,SAAQ,MACR,GAAE,4RAAA,CAA2R,GAE/RA,gBAAAA,EAAA,cAAC,QACC,EAAA,SAAQ,MACR,GAAE,+KAA8K,CAAA,GAElLA,gBAAAA,EAAA,cAAC,QACC,EAAA,SAAQ,MACR,GAAE,+KAA8K,CAAA,mCAEjL,QACC,EAAA,SAAQ,MACR,GAAE,uIAAsI,CAAA,GAEzIA,gBAAAA,EAAA,cAAA,kBAAA,EACC,IAAG,KACH,eAAc,kBACd,IAAG,WACH,IAAG,aACH,IAAG,YACH,IAAG,YACH,mBAAkB,+BAElB,GAAAA,gBAAAA,EAAA,cAAC,QAAK,EAAA,QAAO,KAAI,WAAU,WAAS,GACpCA,gBAAAA,EAAA,cAAC,QAAK,EAAA,QAAO,MAAK,WAAU,UAAS,CAAA,GACrCA,gBAAAA,EAAA,cAAC,UAAK,QAAO,KAAI,WAAU,UAAS,CAAA,CACtC,GACCA,gBAAAA,EAAA,cAAA,QAAA,EACC,MAAK,WACL,GAAE,yLAAuL,mCAE1L,QACC,EAAA,MAAK,QACL,GAAE,qFAAmF,CAEzF;AAAA;"}

package/dist/esm/modules/ms-teams/utils.mjs

@@ -0,0 +1,5 @@
+const s = (a) => a.sort((e, o) => e.displayName.toLowerCase().localeCompare(o.displayName.toLowerCase()));
+export {
+  s as sortByDisplayName
+};
+//# sourceMappingURL=utils.mjs.map

package/dist/esm/modules/ms-teams/utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.mjs","sources":["../../../../src/modules/ms-teams/utils.ts"],"sourcesContent":["export const sortByDisplayName = <T extends { displayName: string }>(\n  items: T[],\n) =>\n  items.sort((a, b) =>\n    a.displayName.toLowerCase().localeCompare(b.displayName.toLowerCase()),\n  );\n"],"names":["sortByDisplayName","items","sort","a","b","displayName","toLowerCase","localeCompare"],"mappings":"AAAO,MAAMA,IAAoB,CAC/BC,MAEAA,EAAMC,KAAK,CAACC,GAAGC,MACbD,EAAEE,YAAYC,cAAcC,cAAcH,EAAEC,YAAYC,aAAa,CACvE;"}