@knocklabs/react 0.2.0 → 0.2.1

package/dist/esm/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.mjs

@@ -1,60 +1,62 @@
-import { jsx as c, jsxs as S } from "react/jsx-runtime";
-import { useTranslations as H, useKnockSlackClient as w, useSlackChannels as z, useConnectedSlackChannels as G } from "@knocklabs/react-core";
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import { useTranslations as w, useKnockSlackClient as z, useSlackChannels as G, useConnectedSlackChannels as W } from "@knocklabs/react-core";
 import * as u from "@radix-ui/react-popover";
-import * as W from "@radix-ui/react-visually-hidden";
-import { useState as x, useRef as X, useEffect as y, useMemo as p } from "react";
-import { useFilter as q } from "react-aria";
-import { Spinner as J } from "../../../core/components/Spinner/Spinner.mjs";
+import * as X from "@radix-ui/react-visually-hidden";
+import { useState as p, useRef as q, useEffect as O, useMemo as x } from "react";
+import { useFilter as J } from "react-aria";
+import { Spinner as Q } from "../../../core/components/Spinner/Spinner.mjs";
 
 import "lodash.debounce";
-import Q from "../../../core/hooks/useOutsideClick.mjs";
+import Y from "../../../core/hooks/useOutsideClick.mjs";
 
-import Y from "../SlackAddChannelInput/SlackAddChannelInput.mjs";
-import Z from "./SlackChannelListBox.mjs";
-import g from "./SlackConnectionError.mjs";
-import M from "./icons/SearchIcon.mjs";
+import Z from "../SlackAddChannelInput/SlackAddChannelInput.mjs";
+import g from "./SlackChannelListBox.mjs";
+import M from "./SlackConnectedChannelTagList.mjs";
+import nn from "./SlackConnectionError.mjs";
+import on from "./icons/SearchIcon.mjs";
 
-const nn = 1e3, _n = ({
-  slackChannelsRecipientObject: O,
-  queryOptions: I,
-  inputProps: R,
-  inputContainerProps: U,
-  listBoxProps: $,
-  channelOptionProps: D,
-  inputMessages: n
+const en = 1e3, un = ({
+  slackChannelsRecipientObject: I,
+  queryOptions: R,
+  inputProps: U,
+  inputContainerProps: $,
+  listBoxProps: D,
+  channelOptionProps: K,
+  inputMessages: n,
+  showConnectedChannelTags: P = !1
 }) => {
-  const { t: l } = H(), [m, E] = x(!1), [L, N] = x(""), T = X(null);
-  Q({
+  const { t: l } = w(), [C, L] = p(!1), [E, N] = p(""), T = q(null);
+  Y({
     ref: T,
     fn: () => {
-      N(""), E(!1);
+      N(""), L(!1);
     }
   });
-  const { connectionStatus: t, errorLabel: v } = w(), { data: a, isLoading: C } = z({ queryOptions: I }), {
+  const { connectionStatus: a, errorLabel: v } = z(), { data: t, isLoading: f } = G({ queryOptions: R }), {
     data: h,
     updateConnectedChannels: b,
-    loading: K,
+    loading: V,
     error: d,
     updating: F
-  } = G({ slackChannelsRecipientObject: O }), [r, f] = x(null);
-  y(() => {
-    m && setTimeout(() => {
+  } = W({ slackChannelsRecipientObject: I }), [c, _] = p(null);
+  O(() => {
+    C && setTimeout(() => {
       var o;
       (o = document.getElementById("slack-channel-search")) == null || o.focus();
     }, 0);
-  }, [m]), y(() => {
+  }, [C]), O(() => {
     const o = new Map(
-      a.map((e) => [e.id, e])
+      t.map((e) => [e.id, e])
     ), i = (h == null ? void 0 : h.filter((e) => o.has(e.channel_id || ""))) || [];
-    f(i);
-  }, [h, a]);
-  const s = p(
-    () => t === "disconnected" || t === "error" || d,
-    [d, t]
-  ), _ = p(
-    () => t === "connecting" || t === "disconnecting" || C,
-    [t, C]
-  ), P = p(() => {
+    _(i);
+  }, [h, t]);
+  const s = x(
+    () => a === "disconnected" || a === "error" || d,
+    [d, a]
+  ), k = x(
+    () => a === "connecting" || a === "disconnecting" || f,
+    [a, f]
+  ), j = x(() => {
     const o = {
       disconnected: l("slackSearchbarDisconnected"),
       multipleChannelsConnected: l("slackSearchbarMultipleChannels"),
@@ -62,122 +64,132 @@ const nn = 1e3, _n = ({
       noSlackChannelsFound: l("slackSearchbarNoChannelsFound"),
       channelsError: l("slackSearchbarChannelsError")
     };
-    if (t === "disconnected")
+    if (a === "disconnected")
       return (n == null ? void 0 : n.disconnected) || o.disconnected;
-    if (t === "error")
+    if (a === "error")
       return (n == null ? void 0 : n.error) || v;
-    if (!_ && a.length === 0)
+    if (!k && t.length === 0)
       return (n == null ? void 0 : n.noSlackChannelsFound) || o.noSlackChannelsFound;
     if (d)
       return d;
-    const i = (r == null ? void 0 : r.length) || 0;
-    if (r && i === 0)
+    const i = (c == null ? void 0 : c.length) || 0;
+    if (c && i === 0)
       return (n == null ? void 0 : n.noChannelsConnected) || o.noChannelsConnected;
-    if (r && i === 1) {
-      const e = a == null ? void 0 : a.find(
-        (k) => {
-          var A;
-          return k.id === ((A = r[0]) == null ? void 0 : A.channel_id);
+    if (c && i === 1) {
+      const e = t == null ? void 0 : t.find(
+        (S) => {
+          var y;
+          return S.id === ((y = c[0]) == null ? void 0 : y.channel_id);
         }
       );
       return (n == null ? void 0 : n.singleChannelConnected) || `# ${e == null ? void 0 : e.name}`;
     }
-    return r && i > 1 ? (n == null ? void 0 : n.multipleChannelsConnected) || `${i} channels connected` : "";
+    return c && i > 1 ? (n == null ? void 0 : n.multipleChannelsConnected) || `${i} channels connected` : "";
   }, [
-    t,
-    _,
     a,
+    k,
+    t,
     d,
-    r,
+    c,
     n,
     v,
     l
-  ]), V = async (o) => {
-    if (!r)
+  ]), A = async (o) => {
+    if (!c)
       return;
-    if (r.find(
+    if (c.find(
       (e) => e.channel_id === o
     )) {
-      const e = r.filter(
-        (k) => k.channel_id !== o
+      const e = c.filter(
+        (S) => S.channel_id !== o
       );
-      f(e), b(e);
+      _(e), b(e);
     } else {
       const e = [
-        ...r,
+        ...c,
         { channel_id: o }
       ];
-      f(e), b(e);
+      _(e), b(e);
     }
-  }, { contains: j } = q({ sensitivity: "base" }), B = a.filter(
-    (o) => j(o.name, L)
+  }, { contains: B } = J({ sensitivity: "base" }), H = t.filter(
+    (o) => B(o.name, E)
   );
-  return a.length > nn ? /* @__PURE__ */ c(
-    Y,
+  return t.length > en ? /* @__PURE__ */ r(
+    Z,
     {
       inErrorState: !!s,
-      connectedChannels: r || [],
+      connectedChannels: c || [],
       updateConnectedChannels: b,
       connectedChannelsError: d,
       connectedChannelsUpdating: F
     }
-  ) : /* @__PURE__ */ c("div", { ref: T, className: "rsk-combobox", children: /* @__PURE__ */ S(
-    u.Root,
-    {
-      open: t !== "disconnected" ? m : !1,
-      children: [
-        /* @__PURE__ */ c(W.Root, { children: /* @__PURE__ */ c("label", { htmlFor: "slack-channel-search", children: l("slackSearchChannels") }) }),
-        /* @__PURE__ */ c(u.Trigger, { asChild: !0, children: /* @__PURE__ */ S("div", { className: "rsk-combobox__searchbar", children: [
-          /* @__PURE__ */ S(
-            "div",
+  ) : /* @__PURE__ */ m("div", { ref: T, className: "rsk-combobox", children: [
+    /* @__PURE__ */ m(
+      u.Root,
+      {
+        open: a !== "disconnected" ? C : !1,
+        children: [
+          /* @__PURE__ */ r(X.Root, { children: /* @__PURE__ */ r("label", { htmlFor: "slack-channel-search", children: l("slackSearchChannels") }) }),
+          /* @__PURE__ */ r(u.Trigger, { asChild: !0, children: /* @__PURE__ */ m("div", { className: "rsk-combobox__searchbar", children: [
+            /* @__PURE__ */ m(
+              "div",
+              {
+                className: "rsk-combobox__searchbar__input-container",
+                ...$,
+                children: [
+                  /* @__PURE__ */ r(
+                    "div",
+                    {
+                      className: `rsk-combobox__searchbar__input-container__icon ${s && "rsk-combobox__searchbar__input-container__icon--error"}`,
+                      children: k ? /* @__PURE__ */ r(Q, { size: "15px", thickness: 3 }) : /* @__PURE__ */ r(on, {})
+                    }
+                  ),
+                  /* @__PURE__ */ r(
+                    "input",
+                    {
+                      className: `rsk-combobox__searchbar__input-container__input ${s ? "rsk-combobox__searchbar__input-container__input--error" : ""}`,
+                      tabIndex: -1,
+                      id: "slack-channel-search",
+                      type: "text",
+                      onFocus: () => t.length > 0 && L(!0),
+                      onChange: (o) => N(o.target.value),
+                      value: E,
+                      placeholder: j || "",
+                      disabled: !!s,
+                      ...U
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ r(nn, {})
+          ] }) }),
+          /* @__PURE__ */ r(u.Content, { children: /* @__PURE__ */ r(
+            g,
             {
-              className: "rsk-combobox__searchbar__input-container",
-              ...U,
-              children: [
-                /* @__PURE__ */ c(
-                  "div",
-                  {
-                    className: `rsk-combobox__searchbar__input-container__icon ${s && "rsk-combobox__searchbar__input-container__icon--error"}`,
-                    children: _ ? /* @__PURE__ */ c(J, { size: "15px", thickness: 3 }) : /* @__PURE__ */ c(M, {})
-                  }
-                ),
-                /* @__PURE__ */ c(
-                  "input",
-                  {
-                    className: `rsk-combobox__searchbar__input-container__input ${s ? "rsk-combobox__searchbar__input-container__input--error" : ""}`,
-                    tabIndex: -1,
-                    id: "slack-channel-search",
-                    type: "text",
-                    onFocus: () => a.length > 0 && E(!0),
-                    onChange: (o) => N(o.target.value),
-                    value: L,
-                    placeholder: P || "",
-                    disabled: !!s,
-                    ...R
-                  }
-                )
-              ]
+              isLoading: f || V,
+              isUpdating: F,
+              connectedChannels: c,
+              onClick: A,
+              slackChannels: H,
+              listBoxProps: D,
+              channelOptionProps: K
             }
-          ),
-          /* @__PURE__ */ c(g, {})
-        ] }) }),
-        /* @__PURE__ */ c(u.Content, { children: /* @__PURE__ */ c(
-          Z,
-          {
-            isLoading: C || K,
-            isUpdating: F,
-            connectedChannels: r,
-            onClick: V,
-            slackChannels: B,
-            listBoxProps: $,
-            channelOptionProps: D
-          }
-        ) })
-      ]
-    }
-  ) });
+          ) })
+        ]
+      }
+    ),
+    P && /* @__PURE__ */ r(
+      M,
+      {
+        connectedChannels: c,
+        slackChannels: t,
+        updateConnectedChannels: A
+      }
+    )
+  ] });
 };
 export {
-  _n as SlackChannelCombobox
+  un as SlackChannelCombobox
 };
 //# sourceMappingURL=SlackChannelCombobox.mjs.map

package/dist/esm/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SlackChannelCombobox.mjs","sources":["../../../../../../src/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.tsx"],"sourcesContent":["import { SlackChannelConnection } from \"@knocklabs/client\";\nimport {\n  ContainerObject,\n  SlackChannelQueryOptions,\n  useConnectedSlackChannels,\n  useKnockSlackClient,\n  useSlackChannels,\n  useTranslations,\n} from \"@knocklabs/react-core\";\nimport * as Popover from \"@radix-ui/react-popover\";\nimport * as VisuallyHidden from \"@radix-ui/react-visually-hidden\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { useFilter } from \"react-aria\";\n\nimport { Spinner, useOutsideClick } from \"../../../core\";\nimport \"../../theme.css\";\nimport SlackAddChannelInput from \"../SlackAddChannelInput/SlackAddChannelInput\";\n\nimport SlackChannelListBox from \"./SlackChannelListBox\";\nimport SlackConnectionError from \"./SlackConnectionError\";\nimport SearchIcon from \"./icons/SearchIcon\";\nimport \"./styles.css\";\n\nconst MAX_ALLOWED_CHANNELS = 1000;\n\ntype SlackChannelComboboxInputMessages = {\n  disconnected: string;\n  error: string;\n  singleChannelConnected: string;\n  multipleChannelsConnected: string;\n  noChannelsConnected: string;\n  noSlackChannelsFound: string;\n};\n\ntype Props = {\n  slackChannelsRecipientObject: ContainerObject;\n  queryOptions?: SlackChannelQueryOptions;\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  inputContainerProps?: React.HTMLAttributes<HTMLDivElement>;\n  listBoxProps?: React.HTMLAttributes<HTMLDivElement>;\n  channelOptionProps?: React.HtmlHTMLAttributes<HTMLButtonElement>;\n  inputMessages?: SlackChannelComboboxInputMessages;\n};\n\nexport const SlackChannelCombobox = ({\n  slackChannelsRecipientObject,\n  queryOptions,\n  inputProps,\n  inputContainerProps,\n  listBoxProps,\n  channelOptionProps,\n  inputMessages,\n}: Props) => {\n  const { t } = useTranslations();\n\n  const [comboboxListOpen, setComboboxListOpen] = useState<boolean>(false);\n  const [inputValue, setInputValue] = useState(\"\");\n\n  // Used to close the combobox when clicking outside of it\n  const comboboxRef = useRef(null);\n  useOutsideClick({\n    ref: comboboxRef,\n    fn: () => {\n      setInputValue(\"\");\n      setComboboxListOpen(false);\n    },\n  });\n\n  // Gather API data\n  const { connectionStatus, errorLabel: connectionErrorLabel } =\n    useKnockSlackClient();\n\n  const { data: slackChannels, isLoading: slackChannelsLoading } =\n    useSlackChannels({ queryOptions });\n\n  const {\n    data: connectedChannels,\n    updateConnectedChannels,\n    loading: connectedChannelsLoading,\n    error: connectedChannelsError,\n    updating: connectedChannelsUpdating,\n  } = useConnectedSlackChannels({ slackChannelsRecipientObject });\n\n  const [currentConnectedChannels, setCurrentConnectedChannels] = useState<\n    SlackChannelConnection[] | null\n  >(null);\n\n  useEffect(() => {\n    if (comboboxListOpen) {\n      // Timeout to allow for the state to update and the component to re-render\n      // when we change the `comboboxListOpen` state upon focus\n      setTimeout(() => {\n        document.getElementById(\"slack-channel-search\")?.focus();\n      }, 0);\n    }\n  }, [comboboxListOpen]);\n\n  useEffect(() => {\n    // Used to make sure we're only showing currently available channels to select from.\n    // There are cases where a channel is \"connected\" in Knock, but it wouldn't be\n    // posting to it if the channel is private and the Slackbot doesn't belong to it,\n    // so the channel won't show up here and it won't be posted to.\n    const slackChannelsMap = new Map(\n      slackChannels.map((channel) => [channel.id, channel]),\n    );\n\n    const channels =\n      connectedChannels?.filter((connectedChannel) => {\n        return slackChannelsMap.has(connectedChannel.channel_id || \"\");\n      }) || [];\n\n    setCurrentConnectedChannels(channels);\n  }, [connectedChannels, slackChannels]);\n\n  const inErrorState = useMemo(\n    () =>\n      connectionStatus === \"disconnected\" ||\n      connectionStatus === \"error\" ||\n      connectedChannelsError,\n    [connectedChannelsError, connectionStatus],\n  );\n\n  const inLoadingState = useMemo(\n    () =>\n      connectionStatus === \"connecting\" ||\n      connectionStatus === \"disconnecting\" ||\n      slackChannelsLoading,\n\n    [connectionStatus, slackChannelsLoading],\n  );\n\n  // Construct placeholder text\n  const searchPlaceholder = useMemo(() => {\n    const DEFAULT_INPUT_MESSAGES = {\n      disconnected: t(\"slackSearchbarDisconnected\"),\n      multipleChannelsConnected: t(\"slackSearchbarMultipleChannels\"),\n      noChannelsConnected: t(\"slackSearchbarNoChannelsConnected\"),\n      noSlackChannelsFound: t(\"slackSearchbarNoChannelsFound\"),\n      channelsError: t(\"slackSearchbarChannelsError\"),\n    };\n\n    // Connection status message\n    if (connectionStatus === \"disconnected\") {\n      return inputMessages?.disconnected || DEFAULT_INPUT_MESSAGES.disconnected;\n    }\n\n    if (connectionStatus === \"error\") {\n      return inputMessages?.error || connectionErrorLabel;\n    }\n\n    // Channels status messages\n    if (!inLoadingState && slackChannels.length === 0) {\n      return (\n        inputMessages?.noSlackChannelsFound ||\n        DEFAULT_INPUT_MESSAGES.noSlackChannelsFound\n      );\n    }\n\n    if (connectedChannelsError) {\n      return connectedChannelsError;\n    }\n\n    const numberConnectedChannels = currentConnectedChannels?.length || 0;\n\n    if (currentConnectedChannels && numberConnectedChannels === 0) {\n      return (\n        inputMessages?.noChannelsConnected ||\n        DEFAULT_INPUT_MESSAGES.noChannelsConnected\n      );\n    }\n\n    if (currentConnectedChannels && numberConnectedChannels === 1) {\n      const connectedChannel = slackChannels?.find(\n        (slackChannel) =>\n          slackChannel.id === currentConnectedChannels[0]?.channel_id,\n      );\n\n      return (\n        inputMessages?.singleChannelConnected || `# ${connectedChannel?.name}`\n      );\n    }\n\n    if (currentConnectedChannels && numberConnectedChannels > 1) {\n      return (\n        inputMessages?.multipleChannelsConnected ||\n        `${numberConnectedChannels} channels connected`\n      );\n    }\n\n    return \"\";\n  }, [\n    connectionStatus,\n    inLoadingState,\n    slackChannels,\n    connectedChannelsError,\n    currentConnectedChannels,\n    inputMessages,\n    connectionErrorLabel,\n    t,\n  ]);\n\n  // Handle channel click\n  const handleOptionClick = async (channelId: string) => {\n    if (!currentConnectedChannels) {\n      return;\n    }\n\n    const isChannelConnected = currentConnectedChannels.find(\n      (channel) => channel.channel_id === channelId,\n    );\n\n    if (isChannelConnected) {\n      const channelsToSendToKnock = currentConnectedChannels.filter(\n        (connectedChannel) => connectedChannel.channel_id !== channelId,\n      );\n\n      setCurrentConnectedChannels(channelsToSendToKnock);\n      updateConnectedChannels(channelsToSendToKnock);\n    } else {\n      const channelsToSendToKnock = [\n        ...currentConnectedChannels,\n        { channel_id: channelId } as SlackChannelConnection,\n      ];\n\n      setCurrentConnectedChannels(channelsToSendToKnock);\n      updateConnectedChannels(channelsToSendToKnock);\n    }\n  };\n\n  // Handle channel search\n  const { contains } = useFilter({ sensitivity: \"base\" });\n  const matchedChannels = slackChannels.filter((slackChannel) =>\n    contains(slackChannel.name, inputValue),\n  );\n\n  if (slackChannels.length > MAX_ALLOWED_CHANNELS) {\n    return (\n      <SlackAddChannelInput\n        inErrorState={!!inErrorState}\n        connectedChannels={currentConnectedChannels || []}\n        updateConnectedChannels={updateConnectedChannels}\n        connectedChannelsError={connectedChannelsError}\n        connectedChannelsUpdating={connectedChannelsUpdating}\n      />\n    );\n  }\n\n  return (\n    <div ref={comboboxRef} className=\"rsk-combobox\">\n      <Popover.Root\n        open={connectionStatus !== \"disconnected\" ? comboboxListOpen : false}\n      >\n        <VisuallyHidden.Root>\n          <label htmlFor=\"slack-channel-search\">\n            {t(\"slackSearchChannels\")}\n          </label>\n        </VisuallyHidden.Root>\n        <Popover.Trigger asChild>\n          <div className=\"rsk-combobox__searchbar\">\n            <div\n              className={\"rsk-combobox__searchbar__input-container\"}\n              {...inputContainerProps}\n            >\n              <div\n                className={`rsk-combobox__searchbar__input-container__icon ${inErrorState && \"rsk-combobox__searchbar__input-container__icon--error\"}`}\n              >\n                {inLoadingState ? (\n                  <Spinner size=\"15px\" thickness={3} />\n                ) : (\n                  <SearchIcon />\n                )}\n              </div>\n\n              <input\n                className={`rsk-combobox__searchbar__input-container__input ${inErrorState ? \"rsk-combobox__searchbar__input-container__input--error\" : \"\"}`}\n                tabIndex={-1}\n                id=\"slack-channel-search\"\n                type=\"text\"\n                onFocus={() =>\n                  slackChannels.length > 0 && setComboboxListOpen(true)\n                }\n                onChange={(e) => setInputValue(e.target.value)}\n                value={inputValue}\n                placeholder={searchPlaceholder || \"\"}\n                disabled={!!inErrorState}\n                {...inputProps}\n              />\n            </div>\n\n            <SlackConnectionError />\n          </div>\n        </Popover.Trigger>\n\n        <Popover.Content>\n          <SlackChannelListBox\n            isLoading={slackChannelsLoading || connectedChannelsLoading}\n            isUpdating={connectedChannelsUpdating}\n            connectedChannels={currentConnectedChannels}\n            onClick={handleOptionClick}\n            slackChannels={matchedChannels}\n            listBoxProps={listBoxProps}\n            channelOptionProps={channelOptionProps}\n          />\n        </Popover.Content>\n      </Popover.Root>\n    </div>\n  );\n};\n"],"names":["MAX_ALLOWED_CHANNELS","SlackChannelCombobox","slackChannelsRecipientObject","queryOptions","inputProps","inputContainerProps","listBoxProps","channelOptionProps","inputMessages","t","useTranslations","comboboxListOpen","setComboboxListOpen","useState","inputValue","setInputValue","comboboxRef","useRef","useOutsideClick","connectionStatus","connectionErrorLabel","useKnockSlackClient","slackChannels","slackChannelsLoading","useSlackChannels","connectedChannels","updateConnectedChannels","connectedChannelsLoading","connectedChannelsError","connectedChannelsUpdating","useConnectedSlackChannels","currentConnectedChannels","setCurrentConnectedChannels","useEffect","_a","slackChannelsMap","channel","channels","connectedChannel","inErrorState","useMemo","inLoadingState","searchPlaceholder","DEFAULT_INPUT_MESSAGES","numberConnectedChannels","slackChannel","handleOptionClick","channelId","channelsToSendToKnock","contains","useFilter","matchedChannels","jsx","SlackAddChannelInput","jsxs","Popover","VisuallyHidden","Spinner","SearchIcon","e","SlackConnectionError","SlackChannelListBox"],"mappings":"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"}
+{"version":3,"file":"SlackChannelCombobox.mjs","sources":["../../../../../../src/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.tsx"],"sourcesContent":["import { SlackChannelConnection } from \"@knocklabs/client\";\nimport {\n  ContainerObject,\n  SlackChannelQueryOptions,\n  useConnectedSlackChannels,\n  useKnockSlackClient,\n  useSlackChannels,\n  useTranslations,\n} from \"@knocklabs/react-core\";\nimport * as Popover from \"@radix-ui/react-popover\";\nimport * as VisuallyHidden from \"@radix-ui/react-visually-hidden\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { useFilter } from \"react-aria\";\n\nimport { Spinner, useOutsideClick } from \"../../../core\";\nimport \"../../theme.css\";\nimport SlackAddChannelInput from \"../SlackAddChannelInput/SlackAddChannelInput\";\n\nimport SlackChannelListBox from \"./SlackChannelListBox\";\nimport SlackConnectedChannelTagList from \"./SlackConnectedChannelTagList\";\nimport SlackConnectionError from \"./SlackConnectionError\";\nimport SearchIcon from \"./icons/SearchIcon\";\nimport \"./styles.css\";\n\nconst MAX_ALLOWED_CHANNELS = 1000;\n\ntype SlackChannelComboboxInputMessages = {\n  disconnected: string;\n  error: string;\n  singleChannelConnected: string;\n  multipleChannelsConnected: string;\n  noChannelsConnected: string;\n  noSlackChannelsFound: string;\n};\n\ntype Props = {\n  slackChannelsRecipientObject: ContainerObject;\n  queryOptions?: SlackChannelQueryOptions;\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  inputContainerProps?: React.HTMLAttributes<HTMLDivElement>;\n  listBoxProps?: React.HTMLAttributes<HTMLDivElement>;\n  channelOptionProps?: React.HtmlHTMLAttributes<HTMLButtonElement>;\n  inputMessages?: SlackChannelComboboxInputMessages;\n  showConnectedChannelTags?: boolean;\n};\n\nexport const SlackChannelCombobox = ({\n  slackChannelsRecipientObject,\n  queryOptions,\n  inputProps,\n  inputContainerProps,\n  listBoxProps,\n  channelOptionProps,\n  inputMessages,\n  showConnectedChannelTags = false,\n}: Props) => {\n  const { t } = useTranslations();\n\n  const [comboboxListOpen, setComboboxListOpen] = useState<boolean>(false);\n  const [inputValue, setInputValue] = useState(\"\");\n\n  // Used to close the combobox when clicking outside of it\n  const comboboxRef = useRef(null);\n  useOutsideClick({\n    ref: comboboxRef,\n    fn: () => {\n      setInputValue(\"\");\n      setComboboxListOpen(false);\n    },\n  });\n\n  // Gather API data\n  const { connectionStatus, errorLabel: connectionErrorLabel } =\n    useKnockSlackClient();\n\n  const { data: slackChannels, isLoading: slackChannelsLoading } =\n    useSlackChannels({ queryOptions });\n\n  const {\n    data: connectedChannels,\n    updateConnectedChannels,\n    loading: connectedChannelsLoading,\n    error: connectedChannelsError,\n    updating: connectedChannelsUpdating,\n  } = useConnectedSlackChannels({ slackChannelsRecipientObject });\n\n  const [currentConnectedChannels, setCurrentConnectedChannels] = useState<\n    SlackChannelConnection[] | null\n  >(null);\n\n  useEffect(() => {\n    if (comboboxListOpen) {\n      // Timeout to allow for the state to update and the component to re-render\n      // when we change the `comboboxListOpen` state upon focus\n      setTimeout(() => {\n        document.getElementById(\"slack-channel-search\")?.focus();\n      }, 0);\n    }\n  }, [comboboxListOpen]);\n\n  useEffect(() => {\n    // Used to make sure we're only showing currently available channels to select from.\n    // There are cases where a channel is \"connected\" in Knock, but it wouldn't be\n    // posting to it if the channel is private and the Slackbot doesn't belong to it,\n    // so the channel won't show up here and it won't be posted to.\n    const slackChannelsMap = new Map(\n      slackChannels.map((channel) => [channel.id, channel]),\n    );\n\n    const channels =\n      connectedChannels?.filter((connectedChannel) => {\n        return slackChannelsMap.has(connectedChannel.channel_id || \"\");\n      }) || [];\n\n    setCurrentConnectedChannels(channels);\n  }, [connectedChannels, slackChannels]);\n\n  const inErrorState = useMemo(\n    () =>\n      connectionStatus === \"disconnected\" ||\n      connectionStatus === \"error\" ||\n      connectedChannelsError,\n    [connectedChannelsError, connectionStatus],\n  );\n\n  const inLoadingState = useMemo(\n    () =>\n      connectionStatus === \"connecting\" ||\n      connectionStatus === \"disconnecting\" ||\n      slackChannelsLoading,\n\n    [connectionStatus, slackChannelsLoading],\n  );\n\n  // Construct placeholder text\n  const searchPlaceholder = useMemo(() => {\n    const DEFAULT_INPUT_MESSAGES = {\n      disconnected: t(\"slackSearchbarDisconnected\"),\n      multipleChannelsConnected: t(\"slackSearchbarMultipleChannels\"),\n      noChannelsConnected: t(\"slackSearchbarNoChannelsConnected\"),\n      noSlackChannelsFound: t(\"slackSearchbarNoChannelsFound\"),\n      channelsError: t(\"slackSearchbarChannelsError\"),\n    };\n\n    // Connection status message\n    if (connectionStatus === \"disconnected\") {\n      return inputMessages?.disconnected || DEFAULT_INPUT_MESSAGES.disconnected;\n    }\n\n    if (connectionStatus === \"error\") {\n      return inputMessages?.error || connectionErrorLabel;\n    }\n\n    // Channels status messages\n    if (!inLoadingState && slackChannels.length === 0) {\n      return (\n        inputMessages?.noSlackChannelsFound ||\n        DEFAULT_INPUT_MESSAGES.noSlackChannelsFound\n      );\n    }\n\n    if (connectedChannelsError) {\n      return connectedChannelsError;\n    }\n\n    const numberConnectedChannels = currentConnectedChannels?.length || 0;\n\n    if (currentConnectedChannels && numberConnectedChannels === 0) {\n      return (\n        inputMessages?.noChannelsConnected ||\n        DEFAULT_INPUT_MESSAGES.noChannelsConnected\n      );\n    }\n\n    if (currentConnectedChannels && numberConnectedChannels === 1) {\n      const connectedChannel = slackChannels?.find(\n        (slackChannel) =>\n          slackChannel.id === currentConnectedChannels[0]?.channel_id,\n      );\n\n      return (\n        inputMessages?.singleChannelConnected || `# ${connectedChannel?.name}`\n      );\n    }\n\n    if (currentConnectedChannels && numberConnectedChannels > 1) {\n      return (\n        inputMessages?.multipleChannelsConnected ||\n        `${numberConnectedChannels} channels connected`\n      );\n    }\n\n    return \"\";\n  }, [\n    connectionStatus,\n    inLoadingState,\n    slackChannels,\n    connectedChannelsError,\n    currentConnectedChannels,\n    inputMessages,\n    connectionErrorLabel,\n    t,\n  ]);\n\n  // Handle channel click\n  const handleOptionClick = async (channelId: string) => {\n    if (!currentConnectedChannels) {\n      return;\n    }\n\n    const isChannelConnected = currentConnectedChannels.find(\n      (channel) => channel.channel_id === channelId,\n    );\n\n    if (isChannelConnected) {\n      const channelsToSendToKnock = currentConnectedChannels.filter(\n        (connectedChannel) => connectedChannel.channel_id !== channelId,\n      );\n\n      setCurrentConnectedChannels(channelsToSendToKnock);\n      updateConnectedChannels(channelsToSendToKnock);\n    } else {\n      const channelsToSendToKnock = [\n        ...currentConnectedChannels,\n        { channel_id: channelId } as SlackChannelConnection,\n      ];\n\n      setCurrentConnectedChannels(channelsToSendToKnock);\n      updateConnectedChannels(channelsToSendToKnock);\n    }\n  };\n\n  // Handle channel search\n  const { contains } = useFilter({ sensitivity: \"base\" });\n  const matchedChannels = slackChannels.filter((slackChannel) =>\n    contains(slackChannel.name, inputValue),\n  );\n\n  if (slackChannels.length > MAX_ALLOWED_CHANNELS) {\n    return (\n      <SlackAddChannelInput\n        inErrorState={!!inErrorState}\n        connectedChannels={currentConnectedChannels || []}\n        updateConnectedChannels={updateConnectedChannels}\n        connectedChannelsError={connectedChannelsError}\n        connectedChannelsUpdating={connectedChannelsUpdating}\n      />\n    );\n  }\n\n  return (\n    <div ref={comboboxRef} className=\"rsk-combobox\">\n      <Popover.Root\n        open={connectionStatus !== \"disconnected\" ? comboboxListOpen : false}\n      >\n        <VisuallyHidden.Root>\n          <label htmlFor=\"slack-channel-search\">\n            {t(\"slackSearchChannels\")}\n          </label>\n        </VisuallyHidden.Root>\n        <Popover.Trigger asChild>\n          <div className=\"rsk-combobox__searchbar\">\n            <div\n              className={\"rsk-combobox__searchbar__input-container\"}\n              {...inputContainerProps}\n            >\n              <div\n                className={`rsk-combobox__searchbar__input-container__icon ${inErrorState && \"rsk-combobox__searchbar__input-container__icon--error\"}`}\n              >\n                {inLoadingState ? (\n                  <Spinner size=\"15px\" thickness={3} />\n                ) : (\n                  <SearchIcon />\n                )}\n              </div>\n\n              <input\n                className={`rsk-combobox__searchbar__input-container__input ${inErrorState ? \"rsk-combobox__searchbar__input-container__input--error\" : \"\"}`}\n                tabIndex={-1}\n                id=\"slack-channel-search\"\n                type=\"text\"\n                onFocus={() =>\n                  slackChannels.length > 0 && setComboboxListOpen(true)\n                }\n                onChange={(e) => setInputValue(e.target.value)}\n                value={inputValue}\n                placeholder={searchPlaceholder || \"\"}\n                disabled={!!inErrorState}\n                {...inputProps}\n              />\n            </div>\n\n            <SlackConnectionError />\n          </div>\n        </Popover.Trigger>\n\n        <Popover.Content>\n          <SlackChannelListBox\n            isLoading={slackChannelsLoading || connectedChannelsLoading}\n            isUpdating={connectedChannelsUpdating}\n            connectedChannels={currentConnectedChannels}\n            onClick={handleOptionClick}\n            slackChannels={matchedChannels}\n            listBoxProps={listBoxProps}\n            channelOptionProps={channelOptionProps}\n          />\n        </Popover.Content>\n      </Popover.Root>\n      {showConnectedChannelTags && (\n        <SlackConnectedChannelTagList\n          connectedChannels={currentConnectedChannels}\n          slackChannels={slackChannels}\n          updateConnectedChannels={handleOptionClick}\n        />\n      )}\n    </div>\n  );\n};\n"],"names":["MAX_ALLOWED_CHANNELS","SlackChannelCombobox","slackChannelsRecipientObject","queryOptions","inputProps","inputContainerProps","listBoxProps","channelOptionProps","inputMessages","showConnectedChannelTags","t","useTranslations","comboboxListOpen","setComboboxListOpen","useState","inputValue","setInputValue","comboboxRef","useRef","useOutsideClick","connectionStatus","connectionErrorLabel","useKnockSlackClient","slackChannels","slackChannelsLoading","useSlackChannels","connectedChannels","updateConnectedChannels","connectedChannelsLoading","connectedChannelsError","connectedChannelsUpdating","useConnectedSlackChannels","currentConnectedChannels","setCurrentConnectedChannels","useEffect","_a","slackChannelsMap","channel","channels","connectedChannel","inErrorState","useMemo","inLoadingState","searchPlaceholder","DEFAULT_INPUT_MESSAGES","numberConnectedChannels","slackChannel","handleOptionClick","channelId","channelsToSendToKnock","contains","useFilter","matchedChannels","jsx","SlackAddChannelInput","jsxs","Popover","VisuallyHidden","Spinner","SearchIcon","e","SlackConnectionError","SlackChannelListBox","SlackConnectedChannelTagList"],"mappings":"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"}

package/dist/esm/modules/slack/components/SlackChannelCombobox/SlackConnectedChannelTag.mjs

@@ -0,0 +1,24 @@
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import t from "./icons/CloseIcon.mjs";
+import _ from "./icons/HashtagIcon.mjs";
+import a from "./icons/LockIcon.mjs";
+
+const d = ({
+  channel: e,
+  updateConnectedChannels: c
+}) => /* @__PURE__ */ n("div", { className: "rsk-combobox__connected_channel_tag", children: [
+  /* @__PURE__ */ o("div", { className: "rsk-combobox__connected_channel_tag__channel_type_icon", children: e.is_private ? /* @__PURE__ */ o(a, {}) : /* @__PURE__ */ o(_, {}) }),
+  /* @__PURE__ */ o("div", { className: "rsk-combobox__connected_channel_tag__text", children: e.name }),
+  /* @__PURE__ */ o(
+    "button",
+    {
+      onClick: () => c(e.id),
+      className: "rsk-combobox__connected_channel_tag__delete_button",
+      children: /* @__PURE__ */ o(t, {})
+    }
+  )
+] });
+export {
+  d as default
+};
+//# sourceMappingURL=SlackConnectedChannelTag.mjs.map

package/dist/esm/modules/slack/components/SlackChannelCombobox/SlackConnectedChannelTag.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlackConnectedChannelTag.mjs","sources":["../../../../../../src/modules/slack/components/SlackChannelCombobox/SlackConnectedChannelTag.tsx"],"sourcesContent":["import { SlackChannel } from \"@knocklabs/client\";\n\nimport CloseIcon from \"./icons/CloseIcon\";\nimport HashtagIcon from \"./icons/HashtagIcon\";\nimport LockIcon from \"./icons/LockIcon\";\nimport \"./styles.css\";\n\ntype Props = {\n\tchannel: SlackChannel;\n\tupdateConnectedChannels: (channelId: string) => void;\n}\n\nconst SlackConnectedChannelTag = ({\n\tchannel,\n\tupdateConnectedChannels,\n}: Props) => {\n\treturn (\n\t\t<div className=\"rsk-combobox__connected_channel_tag\">\n\t\t\t<div className=\"rsk-combobox__connected_channel_tag__channel_type_icon\">\n\t\t\t\t{channel.is_private ? <LockIcon /> : <HashtagIcon />}\n\t\t\t</div>\n\t\t\t<div className=\"rsk-combobox__connected_channel_tag__text\">\n\t\t\t\t{channel.name}\n\t\t\t</div>\n\t\t\t<button\n\t\t\t\tonClick={() => updateConnectedChannels(channel.id)}\n\t\t\t\tclassName=\"rsk-combobox__connected_channel_tag__delete_button\"\n\t\t\t>\n\t\t\t\t<CloseIcon />\n\t\t\t</button>\n\t\t</div>\n\t);\n};\n\nexport default SlackConnectedChannelTag;\n"],"names":["SlackConnectedChannelTag","channel","updateConnectedChannels","jsxs","jsx","LockIcon","HashtagIcon","CloseIcon"],"mappings":";;;;;AAYA,MAAMA,IAA2B,CAAC;AAAA,EACjC,SAAAC;AAAA,EACA,yBAAAC;AACD,MAEE,gBAAAC,EAAC,OAAI,EAAA,WAAU,uCACd,UAAA;AAAA,EAAC,gBAAAC,EAAA,OAAA,EAAI,WAAU,0DACb,UAAQH,EAAA,+BAAcI,GAAS,CAAA,CAAA,IAAM,gBAAAD,EAAAE,GAAA,CAAY,CAAA,GACnD;AAAA,EACC,gBAAAF,EAAA,OAAA,EAAI,WAAU,6CACb,YAAQ,MACV;AAAA,EACA,gBAAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,SAAS,MAAMF,EAAwBD,EAAQ,EAAE;AAAA,MACjD,WAAU;AAAA,MAEV,4BAACM,GAAU,EAAA;AAAA,IAAA;AAAA,EACZ;AACD,EAAA,CAAA;"}

package/dist/esm/modules/slack/components/SlackChannelCombobox/SlackConnectedChannelTagList.mjs

@@ -0,0 +1,17 @@
+import { jsx as i } from "react/jsx-runtime";
+import d from "./SlackConnectedChannelTag.mjs";
+
+const c = ({
+  connectedChannels: r,
+  slackChannels: o,
+  updateConnectedChannels: m
+}) => {
+  const p = new Map(
+    r == null ? void 0 : r.map((t) => [t.channel_id, t])
+  ), a = (o == null ? void 0 : o.filter((t) => p.has(t.id || ""))) || [];
+  return /* @__PURE__ */ i("div", { className: "rsk-combobox__connected_channel_tag_list", children: a.map((t) => /* @__PURE__ */ i(d, { channel: t, updateConnectedChannels: m }, t.id)) });
+};
+export {
+  c as default
+};
+//# sourceMappingURL=SlackConnectedChannelTagList.mjs.map

package/dist/esm/modules/slack/components/SlackChannelCombobox/SlackConnectedChannelTagList.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlackConnectedChannelTagList.mjs","sources":["../../../../../../src/modules/slack/components/SlackChannelCombobox/SlackConnectedChannelTagList.tsx"],"sourcesContent":["import { SlackChannel, SlackChannelConnection } from \"@knocklabs/client\";\n\nimport SlackConnectedChannelTag from \"./SlackConnectedChannelTag\";\nimport \"./styles.css\";\n\ntype Props = {\n\tconnectedChannels: SlackChannelConnection[] | null;\n\tslackChannels: SlackChannel[];\n\tupdateConnectedChannels: (channelId: string) => void;\n}\n\nconst SlackConnectedChannelTagList = ({\n\tconnectedChannels,\n\tslackChannels,\n\tupdateConnectedChannels,\n}: Props) => {\n\tconst connectedChannelsMap = new Map(\n\t\tconnectedChannels?.map((channel) => [channel.channel_id, channel]),\n\t);\n\n\tconst channels =\n\t\tslackChannels?.filter((slackChannel) => {\n\t\t\treturn connectedChannelsMap.has(slackChannel.id || \"\");\n\t\t}) || [];\n\n\treturn (\n\t\t<div className=\"rsk-combobox__connected_channel_tag_list\">\n\t\t\t{channels.map((channel) => (\n\t\t\t\t<SlackConnectedChannelTag key={channel.id} channel={channel} updateConnectedChannels={updateConnectedChannels} />\n\t\t\t))}\n\t\t</div>\n\t);\n};\n\nexport default SlackConnectedChannelTagList;\n"],"names":["SlackConnectedChannelTagList","connectedChannels","slackChannels","updateConnectedChannels","connectedChannelsMap","channel","channels","slackChannel","jsx","SlackConnectedChannelTag"],"mappings":";;;AAWA,MAAMA,IAA+B,CAAC;AAAA,EACrC,mBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,yBAAAC;AACD,MAAa;AACZ,QAAMC,IAAuB,IAAI;AAAA,IAChCH,KAAA,gBAAAA,EAAmB,IAAI,CAACI,MAAY,CAACA,EAAQ,YAAYA,CAAO;AAAA,EAAC,GAG5DC,KACLJ,KAAA,gBAAAA,EAAe,OAAO,CAACK,MACfH,EAAqB,IAAIG,EAAa,MAAM,EAAE,OAChD,CAAA;AAEP,SACE,gBAAAC,EAAA,OAAA,EAAI,WAAU,4CACb,YAAS,IAAI,CAACH,MACd,gBAAAG,EAACC,KAA0C,SAAAJ,GAAkB,yBAAAF,EAAA,GAA9BE,EAAQ,EAAwE,CAC/G,EACF,CAAA;AAEF;"}

package/dist/esm/modules/slack/components/SlackChannelCombobox/icons/CloseIcon.mjs

@@ -0,0 +1,24 @@
+import { jsx as L } from "react/jsx-runtime";
+const o = () => /* @__PURE__ */ L(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ L(
+      "path",
+      {
+        d: "M8.53037 7.46917L7.99988 7.99967L8.53054 8.53L11.501 11.4986L11.5014 11.4995L11.501 11.5004L11.5001 11.5008L11.4992 11.5004L8.53041 8.53167L8.00008 8.00134L7.46975 8.53167L4.501 11.5004L4.50008 11.5008L4.49916 11.5004L4.49878 11.4995L4.49916 11.4986L7.46791 8.52983L7.99824 7.9995L7.46791 7.46917L4.49916 4.50042L4.49878 4.4995L4.49916 4.49858L4.50008 4.4982L4.501 4.49858L7.46975 7.46733L8.00008 7.99766L8.53041 7.46733L11.4987 4.49905L11.4991 4.49886L11.4996 4.49905L11.4998 4.4995L11.4996 4.49995L11.4991 4.50042L8.53037 7.46917Z",
+        fill: "#697386",
+        stroke: "#697386",
+        strokeWidth: "1.5"
+      }
+    )
+  }
+);
+export {
+  o as default
+};
+//# sourceMappingURL=CloseIcon.mjs.map

package/dist/esm/modules/slack/components/SlackChannelCombobox/icons/CloseIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CloseIcon.mjs","sources":["../../../../../../../src/modules/slack/components/SlackChannelCombobox/icons/CloseIcon.tsx"],"sourcesContent":["const CloseIcon = () => (\n\t<svg\n\t\twidth=\"16\"\n\t\theight=\"16\"\n\t\tviewBox=\"0 0 16 16\"\n\t\tfill=\"none\"\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t>\n\t\t<path\n\t\t\td=\"M8.53037 7.46917L7.99988 7.99967L8.53054 8.53L11.501 11.4986L11.5014 11.4995L11.501 11.5004L11.5001 11.5008L11.4992 11.5004L8.53041 8.53167L8.00008 8.00134L7.46975 8.53167L4.501 11.5004L4.50008 11.5008L4.49916 11.5004L4.49878 11.4995L4.49916 11.4986L7.46791 8.52983L7.99824 7.9995L7.46791 7.46917L4.49916 4.50042L4.49878 4.4995L4.49916 4.49858L4.50008 4.4982L4.501 4.49858L7.46975 7.46733L8.00008 7.99766L8.53041 7.46733L11.4987 4.49905L11.4991 4.49886L11.4996 4.49905L11.4998 4.4995L11.4996 4.49995L11.4991 4.50042L8.53037 7.46917Z\"\n\t\t\tfill=\"#697386\"\n\t\t\tstroke=\"#697386\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t/>\n\t</svg>\n);\n\nexport default CloseIcon;\n"],"names":["CloseIcon","jsx"],"mappings":";AAAA,MAAMA,IAAY,MACjB,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,OAAM;AAAA,IAEN,UAAA,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,GAAE;AAAA,QACF,MAAK;AAAA,QACL,QAAO;AAAA,QACP,aAAY;AAAA,MAAA;AAAA,IACb;AAAA,EAAA;AACD;"}

package/dist/index.css

@@ -1 +1 @@
-:root{--rnf-font-size-xs: .75rem;--rnf-font-size-sm: .875rem;--rnf-font-size-md: 1rem;--rnf-font-size-lg: 1.125rem;--rnf-font-size-xl: 1.266rem;--rnf-font-size-2xl: 1.5rem;--rnf-font-size-3xl: 1.75rem;--rnf-spacing-0: 0;--rnf-spacing-1: 4px;--rnf-spacing-2: 8px;--rnf-spacing-3: 12px;--rnf-spacing-4: 16px;--rnf-spacing-5: 20px;--rnf-spacing-6: 24px;--rnf-spacing-7: 32px;--rnf-spacing-8: 42px;--rnf-font-weight-normal: 400;--rnf-font-weight-medium: 500;--rnf-font-weight-semibold: 600;--rnf-font-weight-bold: 700;--rnf-font-family-sanserif: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;--rnf-border-radius-sm: 2px;--rnf-border-radius-md: 4px;--rnf-border-radius-lg: 8px;--rnf-shadow-sm: 0px 5px 10px rgba(0, 0, 0, .12);--rnf-shadow-md: 0px 8px 30px rgba(0, 0, 0, .24);--rnf-color-white: #fff;--rnf-color-white-a-75: rgba(255, 255, 255, .75);--rnf-color-black: #000;--rnf-color-gray-900: #1a1f36;--rnf-color-gray-800: #3c4257;--rnf-color-gray-700: #3c4257;--rnf-color-gray-600: #515669;--rnf-color-gray-500: #697386;--rnf-color-gray-400: #9ea0aa;--rnf-color-gray-300: #a5acb8;--rnf-color-gray-200: #dddee1;--rnf-color-gray-100: #e4e8ee;--rnf-color-brand-500: #e95744;--rnf-color-brand-700: #e4321b;--rnf-color-brand-900: #891e10;--rnf-unread-badge-bg-color: #dd514c;--rnf-avatar-bg-color: #ef8476;--rnf-message-cell-unread-dot-bg-color: #f4ada4;--rnf-message-cell-hover-bg-color: #f1f6fc}:root{--rnf-button-padding-x: 8px;--rnf-button-padding-y: 4px;--rnf-button-border-radius: 4px;--rnf-button-font-weight: var(--rnf-font-weight-medium);--rnf-button-font-size: var(--rnf-font-size-sm);--rnf-button-primary-bg-color: var(--rnf-color-brand-500);--rnf-button-primary-hover-bg-color: var(--rnf-color-brand-700);--rnf-button-primary-border-color: transparent;--rnf-button-primary-text-color: var(--rnf-color-white);--rnf-button-secondary-bg-color: var(--rnf-color-white);--rnf-button-secondary-hover-bg-color: #dddee1;--rnf-button-secondary-border-color: #dddee1;--rnf-button-secondary-text-color: var(--rnf-color-gray-700)}.rnf-button{display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;white-space:nowrap;vertical-align:middle;width:auto;padding:var(--rnf-button-padding-y) var(--rnf-button-padding-x);border-radius:var(--rnf-button-border-radius);font-size:var(--rnf-button-font-size);line-height:var(--rnf-font-size-lg);font-weight:var(--rnf-button-font-weight);border:1px solid;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;transition:all .1s ease-in-out}.rnf-button--full-width{width:100%}.rnf-button--primary{background-color:var(--rnf-button-primary-bg-color);color:var(--rnf-button-primary-text-color);border-color:var(--rnf-button-primary-border-color)}.rnf-button--primary:hover:not(:disabled),.rnf-button--primary:active:not(:disabled){background-color:var(--rnf-button-primary-hover-bg-color)}.rnf-button:disabled{opacity:.4;cursor:not-allowed}.rnf-button--secondary{background-color:var(--rnf-button-secondary-bg-color);color:var(--rnf-button-secondary-text-color);border-color:var(--rnf-button-secondary-border-color)}.rnf-button--secondary:hover:not(:disabled),.rnf-button--secondary:active:not(:disabled){background-color:var(--rnf-button-secondary-hover-bg-color)}.rnf-button--dark.rnf-button--secondary{border-color:#43464c;background-color:#43464c;color:var(--rnf-color-white-a-75)}.rnf-button__button-text-hidden{opacity:0}.rnf-button--dark.rnf-button--secondary:hover:not(:disabled),.rnf-button--dark.rnf-button--secondary:active:not(:disabled){background-color:var(--rnf-color-gray-600)}.rnf-button-spinner{display:flex;align-items:center;font-size:1rem;line-height:"normal"}.rnf-button-spinner--without-label{position:absolute}.rnf-button-spinner--with-label{margin-right:6px}.rnf-button--primary .rnf-button-spinner circle{stroke:#fff}.rnf-button--secondary .rnf-button-spinner circle{stroke:var(--rnf-button-secondary-text-color)}.rnf-button--dark.rnf-button--secondary .rnf-button-spinner circle{stroke:var(--rnf-color-white-a-75)}.rnf-button-group>.rnf-button+.rnf-button{margin-left:8px}:root{--rsk-font-size-xs: .75rem;--rsk-font-size-sm: .875rem;--rsk-font-size-md: 1rem;--rsk-font-size-lg: 1.125rem;--rsk-font-size-xl: 1.266rem;--rsk-font-size-2xl: 1.5rem;--rsk-font-size-3xl: 1.75rem;--rsk-spacing-0: 0rem;--rsk-spacing-1: .25rem;--rsk-spacing-2: .5rem;--rsk-spacing-3: .75rem;--rsk-spacing-4: 1rem;--rsk-spacing-5: 1.25rem;--rsk-spacing-6: 1.5rem;--rsk-spacing-7: 2rem;--rsk-font-weight-normal: 400;--rsk-font-weight-medium: 500;--rsk-font-weight-semibold: 600;--rsk-font-weight-bold: 700;--rsk-font-family-sanserif: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;--rsk-border-radius-sm: 2px;--rsk-border-radius-md: 4px;--rsk-border-radius-lg: 8px;--rsk-button-border-radius: 6px;--rsk-color-white: #fff;--rsk-color-white-a-75: rgba(255, 255, 255, .75);--rsk-color-black: #000;--rsk-color-gray-900: #1a1f36;--rsk-color-gray-800: #3c4257;--rsk-color-gray-700: #3c4257;--rsk-color-gray-600: #515669;--rsk-color-gray-500: #697386;--rsk-color-gray-400: #9ea0aa;--rsk-color-gray-300: #a5acb8;--rsk-color-gray-200: #dddee1;--rsk-color-gray-100: #e4e8ee;--rsk-color-brand-500: #e95744;--rsk-color-brand-700: #e4321b;--rsk-color-brand-900: #891e10;--rsk-button-hover-color: rgba(247, 247, 248, 1)}.rsk-auth{background:var(--rsk-color-white);border:1px solid var(--rsk-color-gray-100);border-radius:var(--rsk-border-radius-lg);font-family:var(--rsk-font-family-sanserif);font-size:var(--rsk-font-size-sm);font-weight:var(--rsk-font-weight-normal);padding:var(--rsk-spacing-5)}.rsk-auth__header{display:flex;flex-direction:row;justify-content:space-between}.rsk-auth__title{color:#1a1f36;font-size:var(--rsk-font-size-md);line-height:var(--rsk-spacing-5);margin-top:var(--rsk-spacing-4)}.rsk-auth__description{color:#515669;font-size:var(--rsk-font-size-sm);line-height:var(--rsk-spacing-5)}:root{--rsk-connected-color: rgba(51, 163, 102, 1);--rsk-disconnect-border-color: rgba(230, 71, 51, 1);--rsk-disconnect-background-color: rgba(255, 245, 245, 1);--rsk-error-red: rgba(205, 123, 46, 1)}.rsk-connect__button{background-color:var(--rsk-color-white);border:1px solid var(--rsk-color-gray-200);border-radius:var(--rsk-button-border-radius);box-sizing:border-box;color:var(--rsk-color-black);cursor:pointer;display:inline-flex;font-family:var(--rsk-font-family-sanserif);font-size:var(--rsk-font-size-sm);font-weight:var(--rsk-font-weight-normal);gap:var(--rsk-spacing-2);padding:var(--rsk-spacing-1) var(--rsk-spacing-2);text-decoration:none;text-overflow:ellipsis;text-wrap:nowrap;transition:background-color .3s ease,border-color .3s ease,color .3s ease}.rsk-connect__button--connected{border-color:var(--rsk-connected-color);color:var(--rsk-connected-color);width:120px}.rsk-connect__button--error{border-color:var(--rsk-error-red);color:var(--rsk-error-red)}.rsk-connect__button--loading{border-color:var(--rsk-color-gray-100);color:var(--rsk-color-gray-400);pointer-events:none}.rsk-connect__button--disconnected:hover{background-color:var(--rsk-button-hover-color)}.rsk-connect__button--connected:hover,.rsk-connect__button__text--connected:hover{background-color:var(--rsk-disconnect-background-color);border-color:var(--rsk-disconnect-border-color);color:var(--rsk-disconnect-border-color)}.rsk-connect__button--error:hover,.rsk-connect__button__text--error:hover{border-color:var(--rsk-color-black);color:var(--rsk-color-black)}.rsk-connect__button:active{transform:translate(1px,1px)}:root{--rnf-notification-icon-button-size: 32px;--rnf-notification-icon-button-bg-color: transparent}.rnf-notification-icon-button{background-color:var(--rnf-notification-icon-button-bg-color);border:none;position:relative;display:block;margin:0;padding:0;cursor:pointer;width:var(--rnf-notification-icon-button-size);height:var(--rnf-notification-icon-button-size);color:inherit}.rnf-notification-icon-button svg{display:block;margin:0 auto}.rnf-notification-icon-button--dark{color:#fff}.rnf-feed-provider{font-family:var(--rnf-font-family-sanserif)!important;margin:0!important;padding:0!important}.rnf-feed-provider [class^=rnf-]{font-family:var(--rnf-font-family-sanserif)!important;box-sizing:border-box}:root{--rnf-notification-feed-header-height: 45px}.rnf-notification-feed{background-color:var(--rnf-color-white);height:100%;display:flex;flex-direction:column}.rnf-dropdown{font-size:var(--rnf-font-size-md);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-400);position:relative}.rnf-dropdown select{padding-right:var(--rnf-spacing-3);color:currentColor;border:none;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:var(--rnf-font-size-sm);position:relative;text-align:right;z-index:2}.rnf-dropdown svg{position:absolute;top:50%;margin-top:-2px;right:0;z-index:1}.rnf-mark-all-as-read{border:none;background:transparent;margin-left:auto;display:flex;align-items:center;padding:0;font-size:var(--rnf-font-size-sm);color:var(--rnf-color-gray-400);cursor:pointer}.rnf-mark-all-as-read:disabled{color:var(--rnf-color-gray-200);cursor:not-allowed}.rnf-mark-all-as-read svg{margin-top:1px;margin-left:var(--rnf-spacing-1)}.rnf-notification-feed__header{padding:var(--rnf-spacing-3) var(--rnf-spacing-4);height:var(--rnf-notification-feed-header-height);display:flex;align-items:center}.rnf-notification-feed__selector{display:flex;align-items:center}.rnf-notification-feed__type{font-size:var(--rnf-font-size-sm);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-900);margin-right:var(--rnf-spacing-2)}.rnf-notification-feed__container{overflow-y:auto;flex:1}.rnf-notification-feed__spinner-container{padding:var(--rnf-spacing-3) var(--rnf-spacing-4)}.rnf-notification-feed__spinner-container svg{margin:0 auto;display:block}.rnf-notification-feed__knock-branding{text-align:center}.rnf-notification-feed__knock-branding a{display:block;font-size:var(--rnf-font-size-sm);color:var(--rnf-color-gray-500);padding:6px;border-top:1px solid var(--rnf-color-gray-100)}.rnf-notification-feed__knock-branding a:hover{background-color:#f1f6fc}.rnf-notification-feed--dark{background-color:#2e2f34}.rnf-notification-feed--dark .rnf-notification-feed__type{color:var(--rnf-color-white-a-75)}.rnf-dropdown--dark{color:var(--rnf-color-gray-400)}.rnf-mark-all-as-read--dark:disabled{color:var(--rnf-color-gray-500)}.rnf-notification-feed--dark .rnf-notification-feed__knock-branding a{color:var(--rnf-color-gray-400);border-top-color:#697386a6}.rnf-notification-feed--dark .rnf-notification-feed__knock-branding a:hover{background-color:#393b40}:root{--rnf-unseen-badge-bg-color: #eb5757;--rnf-unseen-badge-size: 16px;--rnf-unseed-badge-font-size: 9px}.rnf-unseen-badge{background-color:var(--rnf-unseen-badge-bg-color);width:var(--rnf-unseen-badge-size);height:var(--rnf-unseen-badge-size);border-radius:var(--rnf-unseen-badge-size);position:absolute;display:flex;align-items:center;justify-content:center;top:0;right:0}.rnf-unseen-badge__count{font-size:var(--rnf-unseed-badge-font-size);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-white);margin-top:-1px}.rnf-unseen-badge--dark{--rnf-unseen-badge-bg-color: #ef3434}:root{--rnf-empty-feed-max-w: 240px;--rnf-empty-feed-header-font-size: var(--rnf-font-size-md);--rnf-empty-feed-body-font-size: var(--rnf-font-size-sm)}.rnf-empty-feed{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.rnf-empty-feed__inner{max-width:var(--rnf-empty-feed-max-w);margin:-20px auto 0;text-align:center}.rnf-empty-feed__header{font-size:var(--rnf-empty-feed-header-font-size);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-900);margin:0 0 var(--rnf-spacing-1)}.rnf-empty-feed__body{font-size:var(--rnf-empty-feed-body-font-size);color:var(--rnf-color-gray-300);margin:0}.rnf-empty-feed--dark .rnf-empty-feed__header{color:var(--rnf-color-white-a-75)}.rnf-empty-feed--dark .rnf-empty-feed__body{color:var(--rnf-color-gray-400)}:root{--rnf-notification-feed-popover-max-w: 400px;--rnf-notification-feed-popover-min-w: 280px;--rnf-notification-feed-popover-height: 400px;--rnf-notification-feed-popover-shadow: drop-shadow( 0px 5px 15px rgba(0, 0, 0, .2) );--rnf-notification-feed-popover-shadow-color: rgba(0, 0, 0, .2);--rnf-notification-feed-popover-bg-color: #fff;--rnf-notification-feed-popover-z-index: 999;--rnf-notification-feed-popover-arrow-size: 10px;--rnf-notification-feed-popover-border-radius: 4px}.rnf-notification-feed-popover{width:100%;max-width:var(--rnf-notification-feed-popover-max-w);min-width:var(--rnf-notification-feed-popover-min-w);height:var(--rnf-notification-feed-popover-height);z-index:var(--rnf-notification-feed-popover-z-index)}.rnf-notification-feed-popover__inner{overflow:hidden;background-color:var(--rnf-notification-feed-popover-bg-color);border-radius:var(--rnf-notification-feed-popover-border-radius);filter:var(--rnf-notification-feed-popover-shadow);height:100%}.rnf-notification-feed-popover__arrow{position:absolute;width:var(--rnf-notification-feed-popover-arrow-size);height:var(--rnf-notification-feed-popover-arrow-size)}.rnf-notification-feed-popover__arrow:after{content:" ";display:block;background-color:var(--rnf-notification-feed-popover-bg-color);box-shadow:-1px -1px 1px var(--rnf-notification-feed-popover-shadow-color);position:absolute;top:-5px;left:0;transform:rotate(45deg);width:var(--rnf-notification-feed-popover-arrow-size);height:var(--rnf-notification-feed-popover-arrow-size)}.rnf-notification-feed-popover--dark{--rnf-notification-feed-popover-shadow-color: rgba(0, 0, 0, .2)}:root{--rsk-error-yellow: rgba(247, 212, 102, 1);--rsk-error-yellow-background: rgba(255, 255, 240, 1)}.rsk-combobox,.rsk-combobox__list-box,.rsk-combobox__searchbar,.rsk-combobox__searchbar__input-container{width:286px}.rsk-combobox{font-family:var(--rsk-font-family-sanserif);font-size:var(--rsk-font-size-sm);font-weight:var(--rsk-font-weight-normal)}.rsk-combobox__searchbar__input-container{align-items:center;display:flex;position:relative;color:var(--rsk-color-gray-200)}.rsk-combobox__searchbar__input-container__icon,.rsk-combobox__searchbar__input-container__icon--error{left:var(--rsk-spacing-3);top:.65rem;position:absolute;z-index:10}.rsk-combobox__searchbar__input-container__icon--error{color:var(--rsk-error-yellow)}.rsk-combobox__searchbar__input-container__input{border-color:var(--rsk-color-gray-200);border-radius:var(--rsk-border-radius-md);border-style:solid;border-width:1px;height:32px;padding-left:var(--rsk-spacing-7);padding-right:var(--rsk-spacing-1);position:relative;width:100%}.rsk-combobox__searchbar__input-container__input:disabled{background-color:var(--rsk-error-yellow-background);border:1px solid var(--rsk-error-yellow)}.rsk-combobox__searchbar__input-container__input--error{cursor:not-allowed}.rsk-combobox__searchbar__input-container__input--error::placeholder{color:#a95823}.rsk-combobox__list-box{border-radius:var(--rsk-border-radius-sm);box-shadow:0 1px 2px #0000000f,0 1px 3px #0000001a;display:flex;flex-direction:column;height:223px;margin-top:var(--rsk-spacing-1);overflow-x:hidden;overflow-y:auto;width:284px}.rsk-combobox__option__button{background-color:var(--rsk-color-white);border-width:var(--rsk-spacing-0);padding:var(--rsk-spacing-2)}.rsk-combobox__option__button:hover{cursor:pointer}.rsk-combobox__option__button:disabled{color:var(--rsk-color-gray-700);cursor:not-allowed}.rsk-combobox__option__text-container{display:flex}.rsk-combobox__option__text-container__empty-icon,.rsk-combobox__option__text-container__channel-icon,.rsk-combobox__option__text-container__connection-icon{height:15px;width:20px}.rsk-combobox__option__text-container__channel-icon{display:flex;align-items:center;justify-content:center}.rsk-combobox__option__text-container__text{height:15px}.rsk-combobox__error{align-items:flex-start;border-radius:var(--rsk-border-radius-md);display:flex;gap:var(--rsk-spacing-1);justify-content:center;margin-top:var(--rsk-spacing-1);padding:var(--rsk-spacing-2);background-color:var(--rsk-color-gray-100)}.rsk-combobox__error__text{color:var(--rsk-color-gray-700);font-size:var(--rsk-font-size-xs);line-height:normal}:root{--rnf-avatar-bg-color: #ef8476;--rnf-avatar-size: 32px;--rnf-avatar-initials-font-size: var(--rnf-font-size-md);--rnf-avatar-initials-line-height: var(--rnf-font-size-lg);--rnf-avatar-initials-color: #fff;--rnf-notification-cell-border-bottom-color: #e4e8ee;--rnf-notification-cell-padding: var(--rnf-spacing-3);--rnf-notification-cell-active-bg-color: #f1f6fc;--rnf-notification-cell-unread-dot-size: 6px;--rnf-notification-cell-unread-dot-bg-color: #80c7f5;--rnf-notification-cell-unread-dot-border-color: #3192e3;--rnf-notification-cell-content-color: var(--rnf-color-gray-900);--rnf-notification-cell-content-font-size: var(--rnf-font-size-sm);--rnf-notification-cell-content-line-height: var(--rnf-font-size-lg);--rnf-archive-notification-btn-bg-color: var(--rnf-color-gray-400);--rnf-archive-notification-btn-bg-color-active: var(--rnf-color-gray-500)}.rnf-avatar{background-color:var(--rnf-avatar-bg-color);border-radius:var(--rnf-avatar-size);width:var(--rnf-avatar-size);height:var(--rnf-avatar-size);flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.rnf-avatar__initials{font-size:var(--rnf-avatar-initials-font-size);line-height:var(--rnf-avatar-initials-line-height);color:var(--rnf-avatar-initials-color)}.rnf-avatar__image{object-fit:cover;width:var(--rnf-avatar-size);height:var(--rnf-avatar-size)}.rnf-notification-cell{background-color:transparent;position:relative;border-bottom:1px solid var(--rnf-notification-cell-border-bottom-color)}.rnf-notification-cell:last-child{border-bottom-color:transparent}.rnf-notification-cell:hover,.rnf-notification-cell:focus,.rnf-notification-cell:active{background-color:var(--rnf-notification-cell-active-bg-color);outline:none}.rnf-notification-cell__inner{border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;width:100%;text-decoration:none;display:flex;padding:var(--rnf-notification-cell-padding);cursor:pointer;text-align:left;justify-content:flex-start}.rnf-notification-cell__unread-dot{position:absolute;top:var(--rnf-notification-cell-unread-dot-size);left:var(--rnf-notification-cell-unread-dot-size);width:var(--rnf-notification-cell-unread-dot-size);height:var(--rnf-notification-cell-unread-dot-size);border-radius:var(--rnf-notification-cell-unread-dot-size);background-color:var(--rnf-notification-cell-unread-dot-bg-color);border:1px solid var(--rnf-notification-cell-unread-dot-border-color)}.rnf-notification-cell__content-outer{margin-left:var(--rnf-spacing-3)}.rnf-notification-cell__content{color:var(--rnf-notification-cell-content-color);display:block;font-weight:var(--rnf-font-weight-normal);font-size:var(--rnf-notification-cell-content-font-size);line-height:var(--rnf-notification-cell-content-line-height);margin-bottom:var(--rnf-spacing-1);word-break:normal;word-wrap:break-word}.rnf-notification-cell__content h1,.rnf-notification-cell__content h2,.rnf-notification-cell__content h3,.rnf-notification-cell__content h4{font-weight:var(--rnf-font-weight-semibold);margin-bottom:.5em}.rnf-notification-cell__content h1{font-size:var(--rnf-font-size-2xl)}.rnf-notification-cell__content h2{font-size:var(--rnf-font-size-xl)}.rnf-notification-cell__content h3{font-size:var(--rnf-font-size-lg)}.rnf-notification-cell__content h4{font-size:var(--rnf-font-size-md)}.rnf-notification-cell__content p{margin:0 0 .75em}.rnf-notification-cell__content p:last-child{margin-bottom:0}.rnf-notification-cell__content blockquote{border-left:3px solid var(--rnf-color-gray-300);padding-left:var(--rnf-spacing-3);line-height:var(--rnf-font-size-xl);margin:0}.rnf-notification-cell__content strong{font-weight:var(--rnf-font-weight-semibold)}.rnf-notification-cell__timestamp{display:block;color:var(--rnf-color-gray-300);font-size:var(--rnf-font-size-sm);font-weight:var(--rnf-font-weight-normal);line-height:var(--rnf-font-size-lg)}.rnf-notification-cell__child-content{margin:.75em 0 .5em}.rnf-archive-notification-btn{background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;user-select:none;border:none;opacity:0;width:24px;height:24px;cursor:pointer;margin-left:auto;color:var(--rnf-archive-notification-btn-bg-color);padding:var(--rnf-spacing-1) var(--rnf-spacing-2);transition:color .1s ease-in-out,opacity .2s ease-in-out}.rnf-notification-cell:focus .rnf-archive-notification-btn,.rnf-notification-cell:hover .rnf-archive-notification-btn,.rnf-notification-cell:active .rnf-archive-notification-btn{opacity:1}.rnf-archive-notification-btn:focus,.rnf-archive-notification-btn:hover,.rnf-archive-notification-btn:active{outline:none;opacity:1;color:var(--rnf-archive-notification-btn-bg-color-active)}.rnf-tooltip{background-color:var(--rnf-color-gray-700);border-radius:4px;box-shadow:0 2px 4px #0000002e;color:#fff;display:flex;flex-direction:column;padding:var(--rnf-spacing-1) var(--rnf-spacing-2);font-size:var(--rnf-font-size-xs);line-height:var(--rnf-font-size-s);font-weight:var(--rnf-font-weight-medium);transition:opacity .3s;z-index:9999}.rnf-notification-cell--dark{--rnf-notification-cell-border-bottom-color: rgba(105, 115, 134, .65);--rnf-notification-cell-active-bg-color: #393b40;--rnf-notification-cell-content-color: var(--rnf-color-white-a-75)}.rnf-notification-cell--dark:last-child{border-bottom-color:transparent}.rnf-notification-cell--dark .rnf-notification-cell__timestamp{color:var(--rnf-color-gray-500)}.rnf-archive-notification-btn--dark{--rnf-archive-notification-btn-bg-color: var(--rnf-color-gray-500);--rnf-archive-notification-btn-bg-color-active: var(--rnf-color-gray-400)}.rnf-tooltip--dark{background-color:#565a61}@media screen and (hover: none){.rnf-archive-notification-btn{opacity:1}}.rsk-connect-channel{align-items:center;display:flex;gap:var(--rsk-spacing-1)}.rsk-connect-channel__input{border:1px solid var(--rsk-color-gray-200);border-radius:var(--rsk-border-radius-md);height:32px;padding-left:var(--rsk-spacing-2);width:270px}.rsk-connect-channel__button{background-color:var(--rsk-color-white);border-color:var(--rsk-color-gray-200);border-radius:var(--rsk-button-border-radius);color:var(--rsk-color-black);display:inline-flex;font-family:var(--rsk-font-family-sanserif);font-size:var(--rsk-font-size-sm);font-weight:var(--rsk-font-weight-normal);gap:var(--rsk-spacing-2);height:24px;padding:var(--rsk-spacing-2);text-decoration:none}.rsk-connect-channel__button:hover{background-color:var(--rsk-button-hover-color)}
+:root{--rnf-font-size-xs: .75rem;--rnf-font-size-sm: .875rem;--rnf-font-size-md: 1rem;--rnf-font-size-lg: 1.125rem;--rnf-font-size-xl: 1.266rem;--rnf-font-size-2xl: 1.5rem;--rnf-font-size-3xl: 1.75rem;--rnf-spacing-0: 0;--rnf-spacing-1: 4px;--rnf-spacing-2: 8px;--rnf-spacing-3: 12px;--rnf-spacing-4: 16px;--rnf-spacing-5: 20px;--rnf-spacing-6: 24px;--rnf-spacing-7: 32px;--rnf-spacing-8: 42px;--rnf-font-weight-normal: 400;--rnf-font-weight-medium: 500;--rnf-font-weight-semibold: 600;--rnf-font-weight-bold: 700;--rnf-font-family-sanserif: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;--rnf-border-radius-sm: 2px;--rnf-border-radius-md: 4px;--rnf-border-radius-lg: 8px;--rnf-shadow-sm: 0px 5px 10px rgba(0, 0, 0, .12);--rnf-shadow-md: 0px 8px 30px rgba(0, 0, 0, .24);--rnf-color-white: #fff;--rnf-color-white-a-75: rgba(255, 255, 255, .75);--rnf-color-black: #000;--rnf-color-gray-900: #1a1f36;--rnf-color-gray-800: #3c4257;--rnf-color-gray-700: #3c4257;--rnf-color-gray-600: #515669;--rnf-color-gray-500: #697386;--rnf-color-gray-400: #9ea0aa;--rnf-color-gray-300: #a5acb8;--rnf-color-gray-200: #dddee1;--rnf-color-gray-100: #e4e8ee;--rnf-color-brand-500: #e95744;--rnf-color-brand-700: #e4321b;--rnf-color-brand-900: #891e10;--rnf-unread-badge-bg-color: #dd514c;--rnf-avatar-bg-color: #ef8476;--rnf-message-cell-unread-dot-bg-color: #f4ada4;--rnf-message-cell-hover-bg-color: #f1f6fc}:root{--rnf-button-padding-x: 8px;--rnf-button-padding-y: 4px;--rnf-button-border-radius: 4px;--rnf-button-font-weight: var(--rnf-font-weight-medium);--rnf-button-font-size: var(--rnf-font-size-sm);--rnf-button-primary-bg-color: var(--rnf-color-brand-500);--rnf-button-primary-hover-bg-color: var(--rnf-color-brand-700);--rnf-button-primary-border-color: transparent;--rnf-button-primary-text-color: var(--rnf-color-white);--rnf-button-secondary-bg-color: var(--rnf-color-white);--rnf-button-secondary-hover-bg-color: #dddee1;--rnf-button-secondary-border-color: #dddee1;--rnf-button-secondary-text-color: var(--rnf-color-gray-700)}.rnf-button{display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;white-space:nowrap;vertical-align:middle;width:auto;padding:var(--rnf-button-padding-y) var(--rnf-button-padding-x);border-radius:var(--rnf-button-border-radius);font-size:var(--rnf-button-font-size);line-height:var(--rnf-font-size-lg);font-weight:var(--rnf-button-font-weight);border:1px solid;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;transition:all .1s ease-in-out}.rnf-button--full-width{width:100%}.rnf-button--primary{background-color:var(--rnf-button-primary-bg-color);color:var(--rnf-button-primary-text-color);border-color:var(--rnf-button-primary-border-color)}.rnf-button--primary:hover:not(:disabled),.rnf-button--primary:active:not(:disabled){background-color:var(--rnf-button-primary-hover-bg-color)}.rnf-button:disabled{opacity:.4;cursor:not-allowed}.rnf-button--secondary{background-color:var(--rnf-button-secondary-bg-color);color:var(--rnf-button-secondary-text-color);border-color:var(--rnf-button-secondary-border-color)}.rnf-button--secondary:hover:not(:disabled),.rnf-button--secondary:active:not(:disabled){background-color:var(--rnf-button-secondary-hover-bg-color)}.rnf-button--dark.rnf-button--secondary{border-color:#43464c;background-color:#43464c;color:var(--rnf-color-white-a-75)}.rnf-button__button-text-hidden{opacity:0}.rnf-button--dark.rnf-button--secondary:hover:not(:disabled),.rnf-button--dark.rnf-button--secondary:active:not(:disabled){background-color:var(--rnf-color-gray-600)}.rnf-button-spinner{display:flex;align-items:center;font-size:1rem;line-height:"normal"}.rnf-button-spinner--without-label{position:absolute}.rnf-button-spinner--with-label{margin-right:6px}.rnf-button--primary .rnf-button-spinner circle{stroke:#fff}.rnf-button--secondary .rnf-button-spinner circle{stroke:var(--rnf-button-secondary-text-color)}.rnf-button--dark.rnf-button--secondary .rnf-button-spinner circle{stroke:var(--rnf-color-white-a-75)}.rnf-button-group>.rnf-button+.rnf-button{margin-left:8px}:root{--rnf-notification-feed-popover-max-w: 400px;--rnf-notification-feed-popover-min-w: 280px;--rnf-notification-feed-popover-height: 400px;--rnf-notification-feed-popover-shadow: drop-shadow( 0px 5px 15px rgba(0, 0, 0, .2) );--rnf-notification-feed-popover-shadow-color: rgba(0, 0, 0, .2);--rnf-notification-feed-popover-bg-color: #fff;--rnf-notification-feed-popover-z-index: 999;--rnf-notification-feed-popover-arrow-size: 10px;--rnf-notification-feed-popover-border-radius: 4px}.rnf-notification-feed-popover{width:100%;max-width:var(--rnf-notification-feed-popover-max-w);min-width:var(--rnf-notification-feed-popover-min-w);height:var(--rnf-notification-feed-popover-height);z-index:var(--rnf-notification-feed-popover-z-index)}.rnf-notification-feed-popover__inner{overflow:hidden;background-color:var(--rnf-notification-feed-popover-bg-color);border-radius:var(--rnf-notification-feed-popover-border-radius);filter:var(--rnf-notification-feed-popover-shadow);height:100%}.rnf-notification-feed-popover__arrow{position:absolute;width:var(--rnf-notification-feed-popover-arrow-size);height:var(--rnf-notification-feed-popover-arrow-size)}.rnf-notification-feed-popover__arrow:after{content:" ";display:block;background-color:var(--rnf-notification-feed-popover-bg-color);box-shadow:-1px -1px 1px var(--rnf-notification-feed-popover-shadow-color);position:absolute;top:-5px;left:0;transform:rotate(45deg);width:var(--rnf-notification-feed-popover-arrow-size);height:var(--rnf-notification-feed-popover-arrow-size)}.rnf-notification-feed-popover--dark{--rnf-notification-feed-popover-shadow-color: rgba(0, 0, 0, .2)}:root{--rnf-notification-feed-header-height: 45px}.rnf-notification-feed{background-color:var(--rnf-color-white);height:100%;display:flex;flex-direction:column}.rnf-dropdown{font-size:var(--rnf-font-size-md);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-400);position:relative}.rnf-dropdown select{padding-right:var(--rnf-spacing-3);color:currentColor;border:none;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:var(--rnf-font-size-sm);position:relative;text-align:right;z-index:2}.rnf-dropdown svg{position:absolute;top:50%;margin-top:-2px;right:0;z-index:1}.rnf-mark-all-as-read{border:none;background:transparent;margin-left:auto;display:flex;align-items:center;padding:0;font-size:var(--rnf-font-size-sm);color:var(--rnf-color-gray-400);cursor:pointer}.rnf-mark-all-as-read:disabled{color:var(--rnf-color-gray-200);cursor:not-allowed}.rnf-mark-all-as-read svg{margin-top:1px;margin-left:var(--rnf-spacing-1)}.rnf-notification-feed__header{padding:var(--rnf-spacing-3) var(--rnf-spacing-4);height:var(--rnf-notification-feed-header-height);display:flex;align-items:center}.rnf-notification-feed__selector{display:flex;align-items:center}.rnf-notification-feed__type{font-size:var(--rnf-font-size-sm);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-900);margin-right:var(--rnf-spacing-2)}.rnf-notification-feed__container{overflow-y:auto;flex:1}.rnf-notification-feed__spinner-container{padding:var(--rnf-spacing-3) var(--rnf-spacing-4)}.rnf-notification-feed__spinner-container svg{margin:0 auto;display:block}.rnf-notification-feed__knock-branding{text-align:center}.rnf-notification-feed__knock-branding a{display:block;font-size:var(--rnf-font-size-sm);color:var(--rnf-color-gray-500);padding:6px;border-top:1px solid var(--rnf-color-gray-100)}.rnf-notification-feed__knock-branding a:hover{background-color:#f1f6fc}.rnf-notification-feed--dark{background-color:#2e2f34}.rnf-notification-feed--dark .rnf-notification-feed__type{color:var(--rnf-color-white-a-75)}.rnf-dropdown--dark{color:var(--rnf-color-gray-400)}.rnf-mark-all-as-read--dark:disabled{color:var(--rnf-color-gray-500)}.rnf-notification-feed--dark .rnf-notification-feed__knock-branding a{color:var(--rnf-color-gray-400);border-top-color:#697386a6}.rnf-notification-feed--dark .rnf-notification-feed__knock-branding a:hover{background-color:#393b40}:root{--rnf-avatar-bg-color: #ef8476;--rnf-avatar-size: 32px;--rnf-avatar-initials-font-size: var(--rnf-font-size-md);--rnf-avatar-initials-line-height: var(--rnf-font-size-lg);--rnf-avatar-initials-color: #fff;--rnf-notification-cell-border-bottom-color: #e4e8ee;--rnf-notification-cell-padding: var(--rnf-spacing-3);--rnf-notification-cell-active-bg-color: #f1f6fc;--rnf-notification-cell-unread-dot-size: 6px;--rnf-notification-cell-unread-dot-bg-color: #80c7f5;--rnf-notification-cell-unread-dot-border-color: #3192e3;--rnf-notification-cell-content-color: var(--rnf-color-gray-900);--rnf-notification-cell-content-font-size: var(--rnf-font-size-sm);--rnf-notification-cell-content-line-height: var(--rnf-font-size-lg);--rnf-archive-notification-btn-bg-color: var(--rnf-color-gray-400);--rnf-archive-notification-btn-bg-color-active: var(--rnf-color-gray-500)}.rnf-avatar{background-color:var(--rnf-avatar-bg-color);border-radius:var(--rnf-avatar-size);width:var(--rnf-avatar-size);height:var(--rnf-avatar-size);flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.rnf-avatar__initials{font-size:var(--rnf-avatar-initials-font-size);line-height:var(--rnf-avatar-initials-line-height);color:var(--rnf-avatar-initials-color)}.rnf-avatar__image{object-fit:cover;width:var(--rnf-avatar-size);height:var(--rnf-avatar-size)}.rnf-notification-cell{background-color:transparent;position:relative;border-bottom:1px solid var(--rnf-notification-cell-border-bottom-color)}.rnf-notification-cell:last-child{border-bottom-color:transparent}.rnf-notification-cell:hover,.rnf-notification-cell:focus,.rnf-notification-cell:active{background-color:var(--rnf-notification-cell-active-bg-color);outline:none}.rnf-notification-cell__inner{border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;width:100%;text-decoration:none;display:flex;padding:var(--rnf-notification-cell-padding);cursor:pointer;text-align:left;justify-content:flex-start}.rnf-notification-cell__unread-dot{position:absolute;top:var(--rnf-notification-cell-unread-dot-size);left:var(--rnf-notification-cell-unread-dot-size);width:var(--rnf-notification-cell-unread-dot-size);height:var(--rnf-notification-cell-unread-dot-size);border-radius:var(--rnf-notification-cell-unread-dot-size);background-color:var(--rnf-notification-cell-unread-dot-bg-color);border:1px solid var(--rnf-notification-cell-unread-dot-border-color)}.rnf-notification-cell__content-outer{margin-left:var(--rnf-spacing-3)}.rnf-notification-cell__content{color:var(--rnf-notification-cell-content-color);display:block;font-weight:var(--rnf-font-weight-normal);font-size:var(--rnf-notification-cell-content-font-size);line-height:var(--rnf-notification-cell-content-line-height);margin-bottom:var(--rnf-spacing-1);word-break:normal;word-wrap:break-word}.rnf-notification-cell__content h1,.rnf-notification-cell__content h2,.rnf-notification-cell__content h3,.rnf-notification-cell__content h4{font-weight:var(--rnf-font-weight-semibold);margin-bottom:.5em}.rnf-notification-cell__content h1{font-size:var(--rnf-font-size-2xl)}.rnf-notification-cell__content h2{font-size:var(--rnf-font-size-xl)}.rnf-notification-cell__content h3{font-size:var(--rnf-font-size-lg)}.rnf-notification-cell__content h4{font-size:var(--rnf-font-size-md)}.rnf-notification-cell__content p{margin:0 0 .75em}.rnf-notification-cell__content p:last-child{margin-bottom:0}.rnf-notification-cell__content blockquote{border-left:3px solid var(--rnf-color-gray-300);padding-left:var(--rnf-spacing-3);line-height:var(--rnf-font-size-xl);margin:0}.rnf-notification-cell__content strong{font-weight:var(--rnf-font-weight-semibold)}.rnf-notification-cell__timestamp{display:block;color:var(--rnf-color-gray-300);font-size:var(--rnf-font-size-sm);font-weight:var(--rnf-font-weight-normal);line-height:var(--rnf-font-size-lg)}.rnf-notification-cell__child-content{margin:.75em 0 .5em}.rnf-archive-notification-btn{background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;user-select:none;border:none;opacity:0;width:24px;height:24px;cursor:pointer;margin-left:auto;color:var(--rnf-archive-notification-btn-bg-color);padding:var(--rnf-spacing-1) var(--rnf-spacing-2);transition:color .1s ease-in-out,opacity .2s ease-in-out}.rnf-notification-cell:focus .rnf-archive-notification-btn,.rnf-notification-cell:hover .rnf-archive-notification-btn,.rnf-notification-cell:active .rnf-archive-notification-btn{opacity:1}.rnf-archive-notification-btn:focus,.rnf-archive-notification-btn:hover,.rnf-archive-notification-btn:active{outline:none;opacity:1;color:var(--rnf-archive-notification-btn-bg-color-active)}.rnf-tooltip{background-color:var(--rnf-color-gray-700);border-radius:4px;box-shadow:0 2px 4px #0000002e;color:#fff;display:flex;flex-direction:column;padding:var(--rnf-spacing-1) var(--rnf-spacing-2);font-size:var(--rnf-font-size-xs);line-height:var(--rnf-font-size-s);font-weight:var(--rnf-font-weight-medium);transition:opacity .3s;z-index:9999}.rnf-notification-cell--dark{--rnf-notification-cell-border-bottom-color: rgba(105, 115, 134, .65);--rnf-notification-cell-active-bg-color: #393b40;--rnf-notification-cell-content-color: var(--rnf-color-white-a-75)}.rnf-notification-cell--dark:last-child{border-bottom-color:transparent}.rnf-notification-cell--dark .rnf-notification-cell__timestamp{color:var(--rnf-color-gray-500)}.rnf-archive-notification-btn--dark{--rnf-archive-notification-btn-bg-color: var(--rnf-color-gray-500);--rnf-archive-notification-btn-bg-color-active: var(--rnf-color-gray-400)}.rnf-tooltip--dark{background-color:#565a61}@media screen and (hover: none){.rnf-archive-notification-btn{opacity:1}}.rnf-feed-provider{font-family:var(--rnf-font-family-sanserif)!important;margin:0!important;padding:0!important}.rnf-feed-provider [class^=rnf-]{font-family:var(--rnf-font-family-sanserif)!important;box-sizing:border-box}:root{--rnf-empty-feed-max-w: 240px;--rnf-empty-feed-header-font-size: var(--rnf-font-size-md);--rnf-empty-feed-body-font-size: var(--rnf-font-size-sm)}.rnf-empty-feed{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.rnf-empty-feed__inner{max-width:var(--rnf-empty-feed-max-w);margin:-20px auto 0;text-align:center}.rnf-empty-feed__header{font-size:var(--rnf-empty-feed-header-font-size);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-900);margin:0 0 var(--rnf-spacing-1)}.rnf-empty-feed__body{font-size:var(--rnf-empty-feed-body-font-size);color:var(--rnf-color-gray-300);margin:0}.rnf-empty-feed--dark .rnf-empty-feed__header{color:var(--rnf-color-white-a-75)}.rnf-empty-feed--dark .rnf-empty-feed__body{color:var(--rnf-color-gray-400)}:root{--rsk-font-size-xs: .75rem;--rsk-font-size-sm: .875rem;--rsk-font-size-md: 1rem;--rsk-font-size-lg: 1.125rem;--rsk-font-size-xl: 1.266rem;--rsk-font-size-2xl: 1.5rem;--rsk-font-size-3xl: 1.75rem;--rsk-spacing-0: 0rem;--rsk-spacing-1: .25rem;--rsk-spacing-2: .5rem;--rsk-spacing-3: .75rem;--rsk-spacing-4: 1rem;--rsk-spacing-5: 1.25rem;--rsk-spacing-6: 1.5rem;--rsk-spacing-7: 2rem;--rsk-font-weight-normal: 400;--rsk-font-weight-medium: 500;--rsk-font-weight-semibold: 600;--rsk-font-weight-bold: 700;--rsk-font-family-sanserif: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;--rsk-border-radius-sm: 2px;--rsk-border-radius-md: 4px;--rsk-border-radius-lg: 8px;--rsk-button-border-radius: 6px;--rsk-color-white: #fff;--rsk-color-white-a-75: rgba(255, 255, 255, .75);--rsk-color-black: #000;--rsk-color-gray-900: #1a1f36;--rsk-color-gray-800: #3c4257;--rsk-color-gray-700: #3c4257;--rsk-color-gray-600: #515669;--rsk-color-gray-500: #697386;--rsk-color-gray-400: #9ea0aa;--rsk-color-gray-300: #a5acb8;--rsk-color-gray-200: #dddee1;--rsk-color-gray-100: #e4e8ee;--rsk-color-brand-500: #e95744;--rsk-color-brand-700: #e4321b;--rsk-color-brand-900: #891e10;--rsk-button-hover-color: rgba(247, 247, 248, 1)}:root{--rsk-connected-color: rgba(51, 163, 102, 1);--rsk-disconnect-border-color: rgba(230, 71, 51, 1);--rsk-disconnect-background-color: rgba(255, 245, 245, 1);--rsk-error-red: rgba(205, 123, 46, 1)}.rsk-connect__button{background-color:var(--rsk-color-white);border:1px solid var(--rsk-color-gray-200);border-radius:var(--rsk-button-border-radius);box-sizing:border-box;color:var(--rsk-color-black);cursor:pointer;display:inline-flex;font-family:var(--rsk-font-family-sanserif);font-size:var(--rsk-font-size-sm);font-weight:var(--rsk-font-weight-normal);gap:var(--rsk-spacing-2);padding:var(--rsk-spacing-1) var(--rsk-spacing-2);text-decoration:none;text-overflow:ellipsis;text-wrap:nowrap;transition:background-color .3s ease,border-color .3s ease,color .3s ease}.rsk-connect__button--connected{border-color:var(--rsk-connected-color);color:var(--rsk-connected-color);width:120px}.rsk-connect__button--error{border-color:var(--rsk-error-red);color:var(--rsk-error-red)}.rsk-connect__button--loading{border-color:var(--rsk-color-gray-100);color:var(--rsk-color-gray-400);pointer-events:none}.rsk-connect__button--disconnected:hover{background-color:var(--rsk-button-hover-color)}.rsk-connect__button--connected:hover,.rsk-connect__button__text--connected:hover{background-color:var(--rsk-disconnect-background-color);border-color:var(--rsk-disconnect-border-color);color:var(--rsk-disconnect-border-color)}.rsk-connect__button--error:hover,.rsk-connect__button__text--error:hover{border-color:var(--rsk-color-black);color:var(--rsk-color-black)}.rsk-connect__button:active{transform:translate(1px,1px)}:root{--rnf-unseen-badge-bg-color: #eb5757;--rnf-unseen-badge-size: 16px;--rnf-unseed-badge-font-size: 9px}.rnf-unseen-badge{background-color:var(--rnf-unseen-badge-bg-color);width:var(--rnf-unseen-badge-size);height:var(--rnf-unseen-badge-size);border-radius:var(--rnf-unseen-badge-size);position:absolute;display:flex;align-items:center;justify-content:center;top:0;right:0}.rnf-unseen-badge__count{font-size:var(--rnf-unseed-badge-font-size);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-white);margin-top:-1px}.rnf-unseen-badge--dark{--rnf-unseen-badge-bg-color: #ef3434}:root{--rnf-notification-icon-button-size: 32px;--rnf-notification-icon-button-bg-color: transparent}.rnf-notification-icon-button{background-color:var(--rnf-notification-icon-button-bg-color);border:none;position:relative;display:block;margin:0;padding:0;cursor:pointer;width:var(--rnf-notification-icon-button-size);height:var(--rnf-notification-icon-button-size);color:inherit}.rnf-notification-icon-button svg{display:block;margin:0 auto}.rnf-notification-icon-button--dark{color:#fff}.rsk-auth{background:var(--rsk-color-white);border:1px solid var(--rsk-color-gray-100);border-radius:var(--rsk-border-radius-lg);font-family:var(--rsk-font-family-sanserif);font-size:var(--rsk-font-size-sm);font-weight:var(--rsk-font-weight-normal);padding:var(--rsk-spacing-5)}.rsk-auth__header{display:flex;flex-direction:row;justify-content:space-between}.rsk-auth__title{color:#1a1f36;font-size:var(--rsk-font-size-md);line-height:var(--rsk-spacing-5);margin-top:var(--rsk-spacing-4)}.rsk-auth__description{color:#515669;font-size:var(--rsk-font-size-sm);line-height:var(--rsk-spacing-5)}:root{--rsk-error-yellow: rgba(247, 212, 102, 1);--rsk-error-yellow-background: rgba(255, 255, 240, 1)}.rsk-combobox,.rsk-combobox__list-box,.rsk-combobox__searchbar,.rsk-combobox__searchbar__input-container{width:286px}.rsk-combobox{font-family:var(--rsk-font-family-sanserif);font-size:var(--rsk-font-size-sm);font-weight:var(--rsk-font-weight-normal)}.rsk-combobox__searchbar__input-container{align-items:center;color:var(--rsk-color-gray-200);display:flex;position:relative}.rsk-combobox__searchbar__input-container__icon,.rsk-combobox__searchbar__input-container__icon--error{left:var(--rsk-spacing-3);position:absolute;top:.65rem;z-index:10}.rsk-combobox__searchbar__input-container__icon--error{color:var(--rsk-error-yellow)}.rsk-combobox__searchbar__input-container__input{border-color:var(--rsk-color-gray-200);border-radius:var(--rsk-border-radius-md);border-style:solid;border-width:1px;height:32px;padding-left:var(--rsk-spacing-7);padding-right:var(--rsk-spacing-1);position:relative;width:100%}.rsk-combobox__searchbar__input-container__input:disabled{background-color:var(--rsk-error-yellow-background);border:1px solid var(--rsk-error-yellow)}.rsk-combobox__searchbar__input-container__input--error{cursor:not-allowed}.rsk-combobox__searchbar__input-container__input--error::placeholder{color:#a95823}.rsk-combobox__list-box{background-color:var(--rsk-color-white);border-radius:var(--rsk-border-radius-sm);box-shadow:0 1px 2px #0000000f,0 1px 3px #0000001a;display:flex;flex-direction:column;height:223px;margin-top:var(--rsk-spacing-1);overflow-x:hidden;overflow-y:auto;width:284px}.rsk-combobox__option__button{background-color:var(--rsk-color-white);border-width:var(--rsk-spacing-0);padding:var(--rsk-spacing-2)}.rsk-combobox__option__button:hover{cursor:pointer}.rsk-combobox__option__button:disabled{color:var(--rsk-color-gray-700);cursor:not-allowed}.rsk-combobox__option__text-container{display:flex}.rsk-combobox__option__text-container__empty-icon,.rsk-combobox__option__text-container__channel-icon,.rsk-combobox__option__text-container__connection-icon{height:15px;width:20px}.rsk-combobox__option__text-container__channel-icon{align-items:center;display:flex;justify-content:center}.rsk-combobox__option__text-container__text{height:15px}.rsk-combobox__error{align-items:flex-start;background-color:var(--rsk-color-gray-100);border-radius:var(--rsk-border-radius-md);display:flex;gap:var(--rsk-spacing-1);justify-content:center;margin-top:var(--rsk-spacing-1);padding:var(--rsk-spacing-2)}.rsk-combobox__error__text{color:var(--rsk-color-gray-700);font-size:var(--rsk-font-size-xs);line-height:normal}.rsk-combobox__connected_channel_tag_list{align-items:center;display:flex;flex-wrap:wrap;gap:var(--rsk-spacing-2);margin-top:var(--rsk-spacing-2);width:286px;font-size:var(--rsk-font-size-sm);font-family:var(--rsk-font-family-sanserif);color:var(--rsk-color-gray-800)}.rsk-combobox__connected_channel_tag{align-items:center;background-color:var(--rsk-color-gray-100);border-radius:var(--rsk-border-radius-md);display:flex;gap:var(--rsk-spacing-1);max-width:286px;padding:var(--rsk-spacing-1) var(--rsk-spacing-2) var(--rsk-spacing-1) var(--rsk-spacing-2)}.rsk-combobox__connected_channel_tag__delete_button,.rsk-combobox__connected_channel_tag__channel_type_icon,.rsk-combobox__connected_channel_tag__text{display:flex}.rsk-combobox__connected_channel_tag__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rsk-combobox__connected_channel_tag__delete_button{background-color:unset;border-style:none;cursor:pointer;padding:.05rem 0rem 0rem}.rsk-combobox__connected_channel_tag__delete_button:hover{background-color:var(--rsk-color-gray-200);border-radius:var(--rsk-border-radius-md)}.rsk-connect-channel{align-items:center;display:flex;gap:var(--rsk-spacing-1)}.rsk-connect-channel__input{border:1px solid var(--rsk-color-gray-200);border-radius:var(--rsk-border-radius-md);height:32px;padding-left:var(--rsk-spacing-2);width:270px}.rsk-connect-channel__button{background-color:var(--rsk-color-white);border-color:var(--rsk-color-gray-200);border-radius:var(--rsk-button-border-radius);color:var(--rsk-color-black);display:inline-flex;font-family:var(--rsk-font-family-sanserif);font-size:var(--rsk-font-size-sm);font-weight:var(--rsk-font-weight-normal);gap:var(--rsk-spacing-2);height:24px;padding:var(--rsk-spacing-2);text-decoration:none}.rsk-connect-channel__button:hover{background-color:var(--rsk-button-hover-color)}

package/dist/types/modules/core/components/Button/Button.d.ts

@@ -1,4 +1,5 @@
 import React, { PropsWithChildren } from "react";
+import "./styles.css";
 export type ButtonProps = {
     variant: "primary" | "secondary";
     loadingText?: string;

package/dist/types/modules/core/components/Button/ButtonGroup.d.ts

@@ -1,3 +1,4 @@
 import React, { PropsWithChildren } from "react";
+import "./styles.css";
 export declare const ButtonGroup: React.FC<PropsWithChildren>;
 //# sourceMappingURL=ButtonGroup.d.ts.map

package/dist/types/modules/core/components/Button/ButtonSpinner.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import "./styles.css";
 type ButtonSpinnerProps = {
     hasLabel: boolean;
 };

package/dist/types/modules/feed/components/EmptyFeed/EmptyFeed.d.ts

@@ -1,3 +1,4 @@
 import React from "react";
+import "./styles.css";
 export declare const EmptyFeed: React.FC;
 //# sourceMappingURL=EmptyFeed.d.ts.map