@televet/kibble-ui 4.0.0-beta.78 → 4.0.0-beta.8

package/dist/chunks/conversationCard.component-DKIHpfpL.js

@@ -0,0 +1,383 @@
+import { x as e } from "./vendor-BBfll6i3.js";
+import { useState as y } from "react";
+import { C as I } from "./card.component-HX-4Y0j7.js";
+import { T as H } from "./timestamp.component-D764INLm.js";
+import { N as S } from "./notificationCounter.component-CSuqzMTF.js";
+import { I as p } from "./icon.component-B-BWWGO3.js";
+import { W as B } from "./heading.component-B8niLTxz.js";
+import { W as x } from "./text.component-XYjOAc2s.js";
+import { A as W } from "./avatar.component-DzvE2D-d.js";
+import { T as N } from "./tooltip.component-C3v2m2T2.js";
+import { F as f, s as m, V as F, B as C, aI as O, aJ as R } from "./chakra-BqBkjpvZ.js";
+import { B as _ } from "./button.component-BiW8RE1U.js";
+import { M } from "./menu.component-CR9SH_jk.js";
+import { T as w } from "./tag.component-A__B03TA.js";
+const A = ({
+  avatars: t,
+  max: a = 1,
+  onAvatarGroupClick: n,
+  tooltipLabel: r
+}) => /* @__PURE__ */ e.jsx(N, { label: r || "", disabled: !r?.length, children: /* @__PURE__ */ e.jsx(
+  f,
+  {
+    className: "ConversationCard__AvatarGroup",
+    alignItems: "flex-start",
+    justifyContent: "flex-start",
+    children: a && t.length > a ? /* @__PURE__ */ e.jsx(
+      W,
+      {
+        onClick: (s) => {
+          s.stopPropagation(), n && n(s);
+        },
+        cursor: "pointer",
+        name: t.length.toString(),
+        showTooltip: !1
+      }
+    ) : /* @__PURE__ */ e.jsx(e.Fragment, { children: t.map((s) => s) })
+  }
+) }), E = ({
+  avatarGroupProps: t,
+  timestampProps: a,
+  isHoveringCard: n,
+  isCardPinned: r,
+  title: s,
+  showNotificationIndicator: c,
+  subtitle: o
+}) => /* @__PURE__ */ e.jsxs(
+  m,
+  {
+    className: "ConversationCard__Header",
+    "data-testid": "kibble-conversation-card-header",
+    justify: "space-between",
+    align: "flex-start",
+    children: [
+      /* @__PURE__ */ e.jsxs(
+        m,
+        {
+          className: "ConversationCard__Header--Left",
+          "data-testid": "kibble-conversation-card-header-left",
+          cursor: "pointer",
+          children: [
+            t && /* @__PURE__ */ e.jsx(
+              A,
+              {
+                ...t,
+                tooltipLabel: t?.tooltipLabel || s
+              }
+            ),
+            /* @__PURE__ */ e.jsxs(
+              F,
+              {
+                className: "ConversationCard__HeaderText",
+                "data-testid": "kibble-conversation-card-header-text",
+                justify: "center",
+                align: "left",
+                gap: "0",
+                children: [
+                  /* @__PURE__ */ e.jsx(
+                    B,
+                    {
+                      className: "ConversationCard__HeaderText--Title",
+                      "data-testid": "kibble-conversation-card-header-title",
+                      size: "sm",
+                      truncated: !0,
+                      children: s
+                    }
+                  ),
+                  o && /* @__PURE__ */ e.jsx(
+                    x,
+                    {
+                      className: "ConversationCard__HeaderText--Subtitle",
+                      "data-testid": "kibble-conversation-card-header-subtitle",
+                      as: "p",
+                      size: "sm",
+                      variant: "subtle",
+                      truncated: !0,
+                      children: o
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ e.jsxs(
+        m,
+        {
+          className: "ConversationCard__Header--Right",
+          "data-testid": "kibble-conversation-card-header-right",
+          visibility: n ? "hidden" : "visible",
+          align: "center",
+          gap: 1,
+          children: [
+            /* @__PURE__ */ e.jsx(H, { ...a }),
+            c && /* @__PURE__ */ e.jsx(
+              C,
+              {
+                as: "span",
+                className: "ConversationCard__HeaderNotificationCounter",
+                "data-testid": "conversation-card-unread-indicator",
+                children: /* @__PURE__ */ e.jsx(S, { size: "xs" })
+              }
+            ),
+            r && /* @__PURE__ */ e.jsx(f, { "data-testid": "conversation-card-pinned-icon", children: /* @__PURE__ */ e.jsx(p, { size: "md", variant: "info", name: "pin" }) })
+          ]
+        }
+      )
+    ]
+  }
+), L = ({
+  overlayProps: t,
+  pinProps: a,
+  headerMenuProps: n,
+  isHovering: r,
+  setIsHovering: s
+}) => {
+  const { isOpenInOverlay: c, onOpenInOverlay: o } = t || {}, { isPinned: i, onTogglePin: d } = a || {}, { listProps: l } = n || {}, u = i ? "pinCancel" : "pin";
+  return /* @__PURE__ */ e.jsxs(
+    m,
+    {
+      className: "ConversationCard__Menu",
+      "data-testid": "kibble-conversation-card-menu",
+      gap: 1,
+      children: [
+        t && /* @__PURE__ */ e.jsx(
+          _,
+          {
+            className: "ConversationCard__OverlayButton",
+            "data-testid": "conversation-card-overlay-icon-button",
+            variant: "secondarySubtle",
+            borderRadius: "sm",
+            ...c && { active: !0 },
+            onClick: () => {
+              o && o(), r && s(!1);
+            },
+            iconName: "popup",
+            size: "sm"
+          }
+        ),
+        a && /* @__PURE__ */ e.jsx(
+          _,
+          {
+            className: "ConversationCard__PinButton",
+            "data-testid": "conversation-card-pin-toggle-icon-button",
+            variant: i ? "secondarySubtleDestructive" : "secondarySubtle",
+            borderRadius: "sm",
+            onClick: () => {
+              d && d(!i), r && s(!1);
+            },
+            iconName: u,
+            size: "sm"
+          }
+        ),
+        n && /* @__PURE__ */ e.jsx(
+          M,
+          {
+            buttonProps: n.buttonProps || {
+              variant: "secondarySubtle",
+              size: "sm",
+              borderRadius: "sm",
+              iconName: "dotsVertical",
+              hideCaret: !0,
+              padding: 0
+            },
+            closeOnSelect: !1,
+            lazyMount: !0,
+            ...n,
+            listProps: {
+              ...l,
+              menuItems: [
+                ...a ? [
+                  {
+                    "data-testid": "conversation-card-pin-toggle-dropdown-button",
+                    label: `${i ? "Unpin" : "Pin"} Conversation`,
+                    value: "PinConversation",
+                    variant: i ? "danger" : "default",
+                    leftElement: /* @__PURE__ */ e.jsx(
+                      p,
+                      {
+                        size: "md",
+                        variant: i ? "danger" : "default",
+                        name: u
+                      }
+                    ),
+                    onSelect: () => {
+                      d && d(!i);
+                    }
+                  }
+                ] : [],
+                ...l?.menuItems || []
+              ]
+            }
+          }
+        )
+      ]
+    }
+  );
+}, V = ({
+  tags: t
+}) => /* @__PURE__ */ e.jsx(C, { className: "ConversationCard__Tags", mt: 3, children: /* @__PURE__ */ e.jsx(O, { gap: "6px", children: t.map((a) => {
+  const { tooltipContent: n, ...r } = a;
+  let s = /* @__PURE__ */ e.jsx(w, { ...r, size: "sm", textTransform: "capitalize" });
+  return n && (s = /* @__PURE__ */ e.jsx(N, { label: n, placement: "top", children: /* @__PURE__ */ e.jsx(C, { children: s }) })), /* @__PURE__ */ e.jsx(R, { children: s }, a.label);
+}) }) }), D = ({
+  iconProps: t,
+  content: a,
+  contentProps: n
+}) => {
+  const r = typeof a == "string" ? /* @__PURE__ */ e.jsx(
+    x,
+    {
+      className: "ConversationCard__FooterMessage",
+      "data-testid": "kibble-conversation-card-footer-message",
+      as: "p",
+      size: "sm",
+      variant: "subtle",
+      ...n,
+      ...t && { ml: 1 },
+      children: a
+    }
+  ) : a;
+  return /* @__PURE__ */ e.jsxs(
+    f,
+    {
+      className: "ConversationCard__Footer",
+      "data-testid": "kibble-conversation-card-footer",
+      mt: 3,
+      alignItems: "center",
+      children: [
+        t && /* @__PURE__ */ e.jsx(p, { size: "sm", variant: "subtle", ...t }),
+        r
+      ]
+    }
+  );
+}, J = ({
+  contentMenu: t,
+  content: a,
+  contentProps: n
+}) => {
+  const r = typeof a == "string" ? /* @__PURE__ */ e.jsx(
+    x,
+    {
+      className: "ConversationCard__Content",
+      "data-testid": "kibble-conversation-card-content",
+      truncated: !0,
+      size: "sm",
+      ...n,
+      children: a
+    }
+  ) : a;
+  return /* @__PURE__ */ e.jsxs(
+    m,
+    {
+      className: "ConversationCard__ContentContainer",
+      "data-testid": "kibble-conversation-card-content-container",
+      mt: 3,
+      justifyContent: "space-between",
+      alignItems: "center",
+      children: [
+        r,
+        t && /* @__PURE__ */ e.jsx(
+          C,
+          {
+            className: "ConversationCard__ContentMenu",
+            "data-testid": "kibble-conversation-card-content-menu",
+            ml: "auto",
+            children: t
+          }
+        )
+      ]
+    }
+  );
+}, se = ({
+  allowHoverActions: t = !0,
+  avatarGroupProps: a,
+  content: n,
+  contentProps: r,
+  contentMenu: s,
+  footerProps: c,
+  headerMenuProps: o,
+  headerProps: i,
+  active: d,
+  onClick: l,
+  overlayProps: u,
+  pinProps: j,
+  shouldPreservePosition: k = !1,
+  showNotificationIndicator: g,
+  tags: h
+}) => {
+  const { isPinned: z } = j || {}, [v, b] = y(!1);
+  return /* @__PURE__ */ e.jsxs(
+    I,
+    {
+      className: "ConversationCard",
+      id: "conversation-card-item",
+      "data-testid": "kibble-conversation-card",
+      interactive: !0,
+      active: d,
+      size: "sm",
+      fullWidth: !0,
+      onClick: () => {
+        l && l();
+      },
+      bg: g || d || v ? "background.default" : "background.alphaContrast.pressed",
+      onMouseEnter: () => {
+        t && b(!0);
+      },
+      onMouseLeave: () => b(!1),
+      pos: "relative",
+      css: { overflowAnchor: k ? "auto" : "none" },
+      children: [
+        v && /* @__PURE__ */ e.jsx(
+          C,
+          {
+            className: "ConversationCard__Menu--Container",
+            "data-testid": "kibble-conversation-card-menu-container",
+            pos: "absolute",
+            top: 2,
+            zIndex: "banner",
+            right: 2,
+            bg: "background",
+            borderRadius: "md",
+            onClick: (T) => T.stopPropagation(),
+            children: /* @__PURE__ */ e.jsx(
+              L,
+              {
+                overlayProps: u,
+                pinProps: j,
+                headerMenuProps: o,
+                isHovering: v,
+                setIsHovering: b
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ e.jsx(
+          E,
+          {
+            avatarGroupProps: a,
+            isHoveringCard: v,
+            isCardPinned: z,
+            showNotificationIndicator: g,
+            ...i
+          }
+        ),
+        /* @__PURE__ */ e.jsx(
+          J,
+          {
+            content: n,
+            contentProps: r,
+            contentMenu: s
+          }
+        ),
+        !!h?.length && /* @__PURE__ */ e.jsx(V, { tags: h }),
+        c && /* @__PURE__ */ e.jsx(D, { ...c })
+      ]
+    }
+  );
+};
+export {
+  se as C
+};
+//# sourceMappingURL=conversationCard.component-DKIHpfpL.js.map

package/dist/chunks/conversationCard.component-DKIHpfpL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversationCard.component-DKIHpfpL.js","sources":["../../src/patterns/ConversationCard/components/ConversationCardAvatarGroup/conversationCardAvatarGroup.component.tsx","../../src/patterns/ConversationCard/components/ConversationCardHeader/conversationCardHeader.component.tsx","../../src/patterns/ConversationCard/components/ConversationCardButtons/conversationCardButtons.component.tsx","../../src/patterns/ConversationCard/components/ConversationCardTags/conversationCardTags.component.tsx","../../src/patterns/ConversationCard/components/ConversationCardFooter/conversationCardFooter.component.tsx","../../src/patterns/ConversationCard/components/ConversationCardContent/conversationCardContent.component.tsx","../../src/patterns/ConversationCard/conversationCard.component.tsx"],"sourcesContent":["import React from \"react\";\nimport { Flex } from \"@chakra-ui/react/flex\";\nimport { Avatar } from \"components/Avatar/avatar.component\";\nimport { Tooltip } from \"components/Tooltip/tooltip.component\";\n\nexport interface ConversationCardAvatarGroupProps {\n  avatars: React.ReactNode[];\n  max?: number;\n  onAvatarGroupClick?: (\n    e: React.MouseEvent<HTMLSpanElement, MouseEvent>,\n  ) => void;\n  tooltipLabel?: string;\n}\n\nexport const ConversationCardAvatarGroup = ({\n  avatars,\n  max = 1,\n  onAvatarGroupClick,\n  tooltipLabel,\n}: ConversationCardAvatarGroupProps): React.JSX.Element => {\n  return (\n    <Tooltip label={tooltipLabel || \"\"} disabled={!tooltipLabel?.length}>\n      <Flex\n        className=\"ConversationCard__AvatarGroup\"\n        alignItems=\"flex-start\"\n        justifyContent=\"flex-start\"\n      >\n        {max && avatars.length > max ? (\n          <Avatar\n            onClick={(e): void => {\n              e.stopPropagation();\n              if (onAvatarGroupClick) {\n                onAvatarGroupClick(e);\n              }\n            }}\n            cursor=\"pointer\"\n            name={avatars.length.toString()}\n            showTooltip={false}\n          />\n        ) : (\n          <>{avatars.map((avatar) => avatar)}</>\n        )}\n      </Flex>\n    </Tooltip>\n  );\n};\n","import React from \"react\";\nimport { Box } from \"@chakra-ui/react/box\";\nimport { Flex } from \"@chakra-ui/react/flex\";\nimport { HStack, VStack } from \"@chakra-ui/react/stack\";\nimport {\n  Timestamp,\n  TimestampProps,\n} from \"patterns/Timestamp/timestamp.component\";\nimport { NotificationCounter } from \"components/NotificationCounter/notificationCounter.component\";\nimport { Icon } from \"components/Icon/icon.component\";\nimport { Heading } from \"components/Heading/heading.component\";\nimport { Text } from \"components/Text/text.component\";\nimport {\n  ConversationCardAvatarGroup,\n  ConversationCardAvatarGroupProps,\n} from \"../ConversationCardAvatarGroup/conversationCardAvatarGroup.component\";\n\nexport interface ConversationCardHeaderProps {\n  avatarGroupProps?: ConversationCardAvatarGroupProps;\n  showNotificationIndicator?: boolean;\n  isCardPinned?: boolean;\n  isHoveringCard?: boolean;\n  subtitle?: string;\n  timestampProps: TimestampProps;\n  title: string;\n}\n\nexport const ConversationCardHeader = ({\n  avatarGroupProps,\n  timestampProps,\n  isHoveringCard,\n  isCardPinned,\n  title,\n  showNotificationIndicator,\n  subtitle,\n}: ConversationCardHeaderProps): React.JSX.Element => {\n  return (\n    <HStack\n      className=\"ConversationCard__Header\"\n      data-testid=\"kibble-conversation-card-header\"\n      justify=\"space-between\"\n      align=\"flex-start\"\n    >\n      <HStack\n        className=\"ConversationCard__Header--Left\"\n        data-testid=\"kibble-conversation-card-header-left\"\n        cursor=\"pointer\"\n      >\n        {avatarGroupProps && (\n          <ConversationCardAvatarGroup\n            {...avatarGroupProps}\n            tooltipLabel={avatarGroupProps?.tooltipLabel || title}\n          />\n        )}\n        <VStack\n          className=\"ConversationCard__HeaderText\"\n          data-testid=\"kibble-conversation-card-header-text\"\n          justify=\"center\"\n          align=\"left\"\n          gap=\"0\"\n        >\n          <Heading\n            className=\"ConversationCard__HeaderText--Title\"\n            data-testid=\"kibble-conversation-card-header-title\"\n            size=\"sm\"\n            truncated\n          >\n            {title}\n          </Heading>\n          {subtitle && (\n            <Text\n              className=\"ConversationCard__HeaderText--Subtitle\"\n              data-testid=\"kibble-conversation-card-header-subtitle\"\n              as=\"p\"\n              size=\"sm\"\n              variant=\"subtle\"\n              truncated\n            >\n              {subtitle}\n            </Text>\n          )}\n        </VStack>\n      </HStack>\n      <HStack\n        className=\"ConversationCard__Header--Right\"\n        data-testid=\"kibble-conversation-card-header-right\"\n        visibility={isHoveringCard ? \"hidden\" : \"visible\"}\n        align=\"center\"\n        gap={1}\n      >\n        <Timestamp {...timestampProps} />\n        {showNotificationIndicator && (\n          <Box\n            as=\"span\"\n            className=\"ConversationCard__HeaderNotificationCounter\"\n            data-testid=\"conversation-card-unread-indicator\"\n          >\n            <NotificationCounter size=\"xs\" />\n          </Box>\n        )}\n        {isCardPinned && (\n          <Flex data-testid=\"conversation-card-pinned-icon\">\n            <Icon size=\"md\" variant=\"info\" name=\"pin\" />\n          </Flex>\n        )}\n      </HStack>\n    </HStack>\n  );\n};\n","import React from \"react\";\nimport { HStack } from \"@chakra-ui/react/stack\";\nimport { Button } from \"components/Button/button.component\";\nimport { Icon } from \"components/Icon/icon.component\";\nimport { Menu, MenuProps, MenuItemProps } from \"components/Menu\";\n\nexport interface ConversationCardOverlayProps {\n  isOpenInOverlay?: boolean;\n  onOpenInOverlay: () => void;\n}\n\nexport interface ConversationCardPinProps {\n  isPinned?: boolean;\n  onTogglePin: (isPinned: boolean) => void;\n}\n\nexport interface ConversationCardButtonsProps {\n  overlayProps?: ConversationCardOverlayProps;\n  pinProps?: ConversationCardPinProps;\n  headerMenuProps?: MenuProps;\n}\n\ninterface ConversationCardButtonsComponentProps\n  extends ConversationCardButtonsProps {\n  isHovering: boolean;\n  setIsHovering: (isHovering: boolean) => void;\n}\n\nexport const ConversationCardButtons = ({\n  overlayProps,\n  pinProps,\n  headerMenuProps,\n  isHovering,\n  setIsHovering,\n}: ConversationCardButtonsComponentProps): React.JSX.Element => {\n  const { isOpenInOverlay, onOpenInOverlay } = overlayProps || {};\n  const { isPinned, onTogglePin } = pinProps || {};\n  const { listProps } = headerMenuProps || {};\n  const pinIconName = isPinned ? \"pinCancel\" : \"pin\";\n\n  return (\n    <HStack\n      className=\"ConversationCard__Menu\"\n      data-testid=\"kibble-conversation-card-menu\"\n      gap={1}\n    >\n      {overlayProps && (\n        <Button\n          className=\"ConversationCard__OverlayButton\"\n          data-testid=\"conversation-card-overlay-icon-button\"\n          variant=\"secondarySubtle\"\n          borderRadius=\"sm\"\n          {...(isOpenInOverlay && { active: true })}\n          onClick={(): void => {\n            if (onOpenInOverlay) {\n              onOpenInOverlay();\n            }\n\n            if (isHovering) {\n              setIsHovering(false);\n            }\n          }}\n          iconName=\"popup\"\n          size=\"sm\"\n        />\n      )}\n      {pinProps && (\n        <Button\n          className=\"ConversationCard__PinButton\"\n          data-testid=\"conversation-card-pin-toggle-icon-button\"\n          variant={isPinned ? \"secondarySubtleDestructive\" : \"secondarySubtle\"}\n          borderRadius=\"sm\"\n          onClick={(): void => {\n            if (onTogglePin) {\n              onTogglePin(!isPinned);\n            }\n\n            if (isHovering) {\n              setIsHovering(false);\n            }\n          }}\n          iconName={pinIconName}\n          size=\"sm\"\n        />\n      )}\n      {headerMenuProps && (\n        <Menu\n          buttonProps={\n            headerMenuProps.buttonProps || {\n              variant: \"secondarySubtle\",\n              size: \"sm\",\n              borderRadius: \"sm\",\n              iconName: \"dotsVertical\",\n              hideCaret: true,\n              padding: 0,\n            }\n          }\n          closeOnSelect={false}\n          lazyMount\n          {...headerMenuProps}\n          listProps={{\n            ...listProps,\n            menuItems: [\n              ...(pinProps\n                ? [\n                    {\n                      \"data-testid\":\n                        \"conversation-card-pin-toggle-dropdown-button\",\n                      label: `${isPinned ? \"Unpin\" : \"Pin\"} Conversation`,\n                      value: \"PinConversation\",\n                      variant: isPinned ? \"danger\" : \"default\",\n                      leftElement: (\n                        <Icon\n                          size=\"md\"\n                          variant={isPinned ? \"danger\" : \"default\"}\n                          name={pinIconName}\n                        />\n                      ),\n                      onSelect: (): void => {\n                        if (onTogglePin) {\n                          onTogglePin(!isPinned);\n                        }\n                      },\n                    } as MenuItemProps,\n                  ]\n                : []),\n              ...(listProps?.menuItems || []),\n            ],\n          }}\n        />\n      )}\n    </HStack>\n  );\n};\n","import React from \"react\";\nimport { Box } from \"@chakra-ui/react/box\";\nimport { Wrap, WrapItem } from \"@chakra-ui/react/wrap\";\nimport { Tag, TagProps } from \"components/Tag/tag.component\";\nimport { Tooltip } from \"components/Tooltip/tooltip.component\";\n\nexport type ConversationCardTag = TagProps & {\n  tooltipContent?: string;\n};\n\nexport interface ConversationCardTagsProps {\n  tags: ConversationCardTag[];\n}\n\nexport const ConversationCardTags = ({\n  tags,\n}: ConversationCardTagsProps): React.JSX.Element => {\n  return (\n    <Box className=\"ConversationCard__Tags\" mt={3}>\n      <Wrap gap=\"6px\">\n        {tags.map((tag) => {\n          const { tooltipContent, ...rest } = tag;\n          let tagElement = (\n            <Tag {...rest} size=\"sm\" textTransform=\"capitalize\" />\n          );\n\n          if (tooltipContent) {\n            tagElement = (\n              <Tooltip label={tooltipContent} placement=\"top\">\n                <Box>{tagElement}</Box>\n              </Tooltip>\n            );\n          }\n\n          return <WrapItem key={tag.label}>{tagElement}</WrapItem>;\n        })}\n      </Wrap>\n    </Box>\n  );\n};\n","import React from \"react\";\nimport { Flex } from \"@chakra-ui/react/flex\";\nimport { Icon, IconProps } from \"components/Icon/icon.component\";\nimport { Text, TextProps } from \"components/Text/text.component\";\n\nexport interface ConversationCardFooterProps {\n  iconProps?: IconProps;\n  content: React.ReactNode;\n  contentProps?: Omit<TextProps, \"children\">;\n}\n\nexport const ConversationCardFooter = ({\n  iconProps,\n  content,\n  contentProps,\n}: ConversationCardFooterProps): React.JSX.Element => {\n  const _content =\n    typeof content === \"string\" ? (\n      <Text\n        className=\"ConversationCard__FooterMessage\"\n        data-testid=\"kibble-conversation-card-footer-message\"\n        as=\"p\"\n        size=\"sm\"\n        variant=\"subtle\"\n        {...contentProps}\n        {...(iconProps && { ml: 1 })}\n      >\n        {content}\n      </Text>\n    ) : (\n      content\n    );\n  return (\n    <Flex\n      className=\"ConversationCard__Footer\"\n      data-testid=\"kibble-conversation-card-footer\"\n      mt={3}\n      alignItems=\"center\"\n    >\n      {iconProps && <Icon size=\"sm\" variant=\"subtle\" {...iconProps} />}\n      {_content}\n    </Flex>\n  );\n};\n","import React from \"react\";\nimport { Box } from \"@chakra-ui/react/box\";\nimport { HStack } from \"@chakra-ui/react/stack\";\nimport { Text, TextProps } from \"components/Text/text.component\";\n\nexport interface ConversationCardContentProps {\n  content?: React.ReactNode;\n  contentProps?: Omit<TextProps, \"children\">;\n  contentMenu?: React.ReactNode;\n}\n\nexport const ConversationCardContent = ({\n  contentMenu,\n  content,\n  contentProps,\n}: ConversationCardContentProps): React.JSX.Element => {\n  const _content =\n    typeof content === \"string\" ? (\n      <Text\n        className=\"ConversationCard__Content\"\n        data-testid=\"kibble-conversation-card-content\"\n        truncated\n        size=\"sm\"\n        {...contentProps}\n      >\n        {content}\n      </Text>\n    ) : (\n      content\n    );\n\n  return (\n    <HStack\n      className=\"ConversationCard__ContentContainer\"\n      data-testid=\"kibble-conversation-card-content-container\"\n      mt={3}\n      justifyContent=\"space-between\"\n      alignItems=\"center\"\n    >\n      {_content}\n      {contentMenu && (\n        <Box\n          className=\"ConversationCard__ContentMenu\"\n          data-testid=\"kibble-conversation-card-content-menu\"\n          ml=\"auto\"\n        >\n          {contentMenu}\n        </Box>\n      )}\n    </HStack>\n  );\n};\n","import React, { useState } from \"react\";\nimport { Box } from \"@chakra-ui/react/box\";\nimport { Card } from \"components/Card/card.component\";\nimport { MenuProps } from \"components/Menu/menu.component\";\nimport {\n  ConversationCardHeader,\n  ConversationCardHeaderProps,\n} from \"./components/ConversationCardHeader/conversationCardHeader.component\";\nimport {\n  ConversationCardButtons,\n  ConversationCardOverlayProps,\n  ConversationCardPinProps,\n} from \"./components/ConversationCardButtons/conversationCardButtons.component\";\nimport {\n  ConversationCardTag,\n  ConversationCardTags,\n} from \"./components/ConversationCardTags/conversationCardTags.component\";\nimport {\n  ConversationCardFooter,\n  ConversationCardFooterProps,\n} from \"./components/ConversationCardFooter/conversationCardFooter.component\";\nimport {\n  ConversationCardContent,\n  ConversationCardContentProps,\n} from \"./components/ConversationCardContent/conversationCardContent.component\";\nimport { ConversationCardAvatarGroupProps } from \"./components/ConversationCardAvatarGroup/conversationCardAvatarGroup.component\";\n\nexport interface ConversationCardProps extends ConversationCardContentProps {\n  allowHoverActions?: boolean;\n  avatarGroupProps?: ConversationCardAvatarGroupProps;\n  footerProps?: ConversationCardFooterProps;\n  headerMenuProps?: MenuProps;\n  headerProps: ConversationCardHeaderProps;\n  active?: boolean;\n  onClick?: () => void;\n  overlayProps?: ConversationCardOverlayProps;\n  pinProps?: ConversationCardPinProps;\n  shouldPreservePosition?: boolean;\n  showNotificationIndicator?: boolean;\n  tags?: ConversationCardTag[];\n}\n\nexport const ConversationCard = ({\n  allowHoverActions = true,\n  avatarGroupProps,\n  content,\n  contentProps,\n  contentMenu,\n  footerProps,\n  headerMenuProps,\n  headerProps,\n  active,\n  onClick,\n  overlayProps,\n  pinProps,\n  shouldPreservePosition = false,\n  showNotificationIndicator,\n  tags,\n}: ConversationCardProps): React.JSX.Element => {\n  const { isPinned } = pinProps || {};\n  const [isHovering, setIsHovering] = useState(false);\n\n  return (\n    <Card\n      className=\"ConversationCard\"\n      id=\"conversation-card-item\"\n      data-testid=\"kibble-conversation-card\"\n      interactive\n      active={active}\n      size=\"sm\"\n      fullWidth\n      onClick={(): void => {\n        if (onClick) {\n          onClick();\n        }\n      }}\n      bg={\n        showNotificationIndicator || active || isHovering\n          ? \"background.default\"\n          : \"background.alphaContrast.pressed\"\n      }\n      onMouseEnter={(): void => {\n        if (allowHoverActions) {\n          setIsHovering(true);\n        }\n      }}\n      onMouseLeave={(): void => setIsHovering(false)}\n      pos=\"relative\"\n      css={{ overflowAnchor: shouldPreservePosition ? \"auto\" : \"none\" }}\n    >\n      {isHovering && (\n        <Box\n          className=\"ConversationCard__Menu--Container\"\n          data-testid=\"kibble-conversation-card-menu-container\"\n          pos=\"absolute\"\n          top={2}\n          zIndex=\"banner\"\n          right={2}\n          bg=\"background\"\n          borderRadius=\"md\"\n          onClick={(e): void => e.stopPropagation()}\n        >\n          <ConversationCardButtons\n            overlayProps={overlayProps}\n            pinProps={pinProps}\n            headerMenuProps={headerMenuProps}\n            isHovering={isHovering}\n            setIsHovering={setIsHovering}\n          />\n        </Box>\n      )}\n      <ConversationCardHeader\n        avatarGroupProps={avatarGroupProps}\n        isHoveringCard={isHovering}\n        isCardPinned={isPinned}\n        showNotificationIndicator={showNotificationIndicator}\n        {...headerProps}\n      />\n      <ConversationCardContent\n        content={content}\n        contentProps={contentProps}\n        contentMenu={contentMenu}\n      />\n      {!!tags?.length && <ConversationCardTags tags={tags} />}\n      {footerProps && <ConversationCardFooter {...footerProps} />}\n    </Card>\n  );\n};\n"],"names":["ConversationCardAvatarGroup","avatars","max","onAvatarGroupClick","tooltipLabel","jsx","Tooltip","Flex","Avatar","e","Fragment","avatar","ConversationCardHeader","avatarGroupProps","timestampProps","isHoveringCard","isCardPinned","title","showNotificationIndicator","subtitle","jsxs","HStack","VStack","Heading","Text","Timestamp","Box","NotificationCounter","Icon","ConversationCardButtons","overlayProps","pinProps","headerMenuProps","isHovering","setIsHovering","isOpenInOverlay","onOpenInOverlay","isPinned","onTogglePin","listProps","pinIconName","Button","Menu","ConversationCardTags","tags","Wrap","tag","tooltipContent","rest","tagElement","Tag","WrapItem","ConversationCardFooter","iconProps","content","contentProps","_content","ConversationCardContent","contentMenu","ConversationCard","allowHoverActions","footerProps","headerProps","active","onClick","shouldPreservePosition","useState","Card"],"mappings":";;;;;;;;;;;;;;AAcO,MAAMA,IAA8B,CAAC;AAAA,EAC1C,SAAAC;AAAA,EACA,KAAAC,IAAM;AAAA,EACN,oBAAAC;AAAA,EACA,cAAAC;AACF,MAEIC,gBAAAA,MAACC,KAAQ,OAAOF,KAAgB,IAAI,UAAU,CAACA,GAAc,QAC3D,UAAAC,gBAAAA,EAAA;AAAA,EAACE;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,YAAW;AAAA,IACX,gBAAe;AAAA,IAEd,UAAAL,KAAOD,EAAQ,SAASC,IACvBG,gBAAAA,EAAA;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,SAAS,CAACC,MAAY;AACpB,UAAAA,EAAE,gBAAgB,GACdN,KACFA,EAAmBM,CAAC;AAAA,QAExB;AAAA,QACA,QAAO;AAAA,QACP,MAAMR,EAAQ,OAAO,SAAS;AAAA,QAC9B,aAAa;AAAA,MAAA;AAAA,IAAA,IAGZI,gBAAAA,EAAA,IAAAK,EAAA,UAAA,EAAA,UAAAT,EAAQ,IAAI,CAACU,MAAWA,CAAM,EAAE,CAAA;AAAA,EAAA;AAAA,GAGzC,GChBSC,IAAyB,CAAC;AAAA,EACrC,kBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,2BAAAC;AAAA,EACA,UAAAC;AACF,MAEIC,gBAAAA,EAAA;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,SAAQ;AAAA,IACR,OAAM;AAAA,IAEN,UAAA;AAAA,MAAAD,gBAAAA,EAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,eAAY;AAAA,UACZ,QAAO;AAAA,UAEN,UAAA;AAAA,YACCR,KAAAR,gBAAAA,EAAA;AAAA,cAACL;AAAA,cAAA;AAAA,gBACE,GAAGa;AAAA,gBACJ,cAAcA,GAAkB,gBAAgBI;AAAA,cAAA;AAAA,YAClD;AAAA,YAEFG,gBAAAA,EAAA;AAAA,cAACE;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,eAAY;AAAA,gBACZ,SAAQ;AAAA,gBACR,OAAM;AAAA,gBACN,KAAI;AAAA,gBAEJ,UAAA;AAAA,kBAAAjB,gBAAAA,EAAA;AAAA,oBAACkB;AAAAA,oBAAA;AAAA,sBACC,WAAU;AAAA,sBACV,eAAY;AAAA,sBACZ,MAAK;AAAA,sBACL,WAAS;AAAA,sBAER,UAAAN;AAAA,oBAAA;AAAA,kBACH;AAAA,kBACCE,KACCd,gBAAAA,EAAA;AAAA,oBAACmB;AAAAA,oBAAA;AAAA,sBACC,WAAU;AAAA,sBACV,eAAY;AAAA,sBACZ,IAAG;AAAA,sBACH,MAAK;AAAA,sBACL,SAAQ;AAAA,sBACR,WAAS;AAAA,sBAER,UAAAL;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACH;AAAA,cAAA;AAAA,YAAA;AAAA,UAEJ;AAAA,QAAA;AAAA,MACF;AAAA,MACAC,gBAAAA,EAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,eAAY;AAAA,UACZ,YAAYN,IAAiB,WAAW;AAAA,UACxC,OAAM;AAAA,UACN,KAAK;AAAA,UAEL,UAAA;AAAA,YAACV,gBAAAA,EAAAA,IAAAoB,GAAA,EAAW,GAAGX,GAAgB;AAAA,YAC9BI,KACCb,gBAAAA,EAAA;AAAA,cAACqB;AAAA,cAAA;AAAA,gBACC,IAAG;AAAA,gBACH,WAAU;AAAA,gBACV,eAAY;AAAA,gBAEZ,UAAArB,gBAAAA,EAAAA,IAACsB,GAAoB,EAAA,MAAK,KAAK,CAAA;AAAA,cAAA;AAAA,YACjC;AAAA,YAEDX,KACCX,gBAAAA,EAAA,IAACE,GAAK,EAAA,eAAY,iCAChB,UAAAF,gBAAAA,EAAA,IAACuB,GAAK,EAAA,MAAK,MAAK,SAAQ,QAAO,MAAK,OAAM,EAC5C,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,EAAA;AACF,GC9ESC,IAA0B,CAAC;AAAA,EACtC,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AACF,MAAgE;AAC9D,QAAM,EAAE,iBAAAC,GAAiB,iBAAAC,EAAgB,IAAIN,KAAgB,CAAC,GACxD,EAAE,UAAAO,GAAU,aAAAC,EAAY,IAAIP,KAAY,CAAC,GACzC,EAAE,WAAAQ,MAAcP,KAAmB,CAAC,GACpCQ,IAAcH,IAAW,cAAc;AAG3C,SAAAjB,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,KAAK;AAAA,MAEJ,UAAA;AAAA,QACCS,KAAAzB,gBAAAA,EAAA;AAAA,UAACoC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,eAAY;AAAA,YACZ,SAAQ;AAAA,YACR,cAAa;AAAA,YACZ,GAAIN,KAAmB,EAAE,QAAQ,GAAK;AAAA,YACvC,SAAS,MAAY;AACnB,cAAIC,KACcA,EAAA,GAGdH,KACFC,EAAc,EAAK;AAAA,YAEvB;AAAA,YACA,UAAS;AAAA,YACT,MAAK;AAAA,UAAA;AAAA,QACP;AAAA,QAEDH,KACC1B,gBAAAA,EAAA;AAAA,UAACoC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,eAAY;AAAA,YACZ,SAASJ,IAAW,+BAA+B;AAAA,YACnD,cAAa;AAAA,YACb,SAAS,MAAY;AACnB,cAAIC,KACFA,EAAY,CAACD,CAAQ,GAGnBJ,KACFC,EAAc,EAAK;AAAA,YAEvB;AAAA,YACA,UAAUM;AAAA,YACV,MAAK;AAAA,UAAA;AAAA,QACP;AAAA,QAEDR,KACC3B,gBAAAA,EAAA;AAAA,UAACqC;AAAA,UAAA;AAAA,YACC,aACEV,EAAgB,eAAe;AAAA,cAC7B,SAAS;AAAA,cACT,MAAM;AAAA,cACN,cAAc;AAAA,cACd,UAAU;AAAA,cACV,WAAW;AAAA,cACX,SAAS;AAAA,YACX;AAAA,YAEF,eAAe;AAAA,YACf,WAAS;AAAA,YACR,GAAGA;AAAA,YACJ,WAAW;AAAA,cACT,GAAGO;AAAA,cACH,WAAW;AAAA,gBACT,GAAIR,IACA;AAAA,kBACE;AAAA,oBACE,eACE;AAAA,oBACF,OAAO,GAAGM,IAAW,UAAU,KAAK;AAAA,oBACpC,OAAO;AAAA,oBACP,SAASA,IAAW,WAAW;AAAA,oBAC/B,aACEhC,gBAAAA,EAAA;AAAA,sBAACuB;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,SAASS,IAAW,WAAW;AAAA,wBAC/B,MAAMG;AAAA,sBAAA;AAAA,oBACR;AAAA,oBAEF,UAAU,MAAY;AACpB,sBAAIF,KACFA,EAAY,CAACD,CAAQ;AAAA,oBACvB;AAAA,kBACF;AAAA,gBACF,IAEF,CAAC;AAAA,gBACL,GAAIE,GAAW,aAAa,CAAA;AAAA,cAAC;AAAA,YAC/B;AAAA,UACF;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAEJ;AAEJ,GCvHaI,IAAuB,CAAC;AAAA,EACnC,MAAAC;AACF,MAEKvC,gBAAAA,EAAAA,IAAAqB,GAAA,EAAI,WAAU,0BAAyB,IAAI,GAC1C,UAACrB,gBAAAA,EAAA,IAAAwC,GAAA,EAAK,KAAI,OACP,UAAKD,EAAA,IAAI,CAACE,MAAQ;AACjB,QAAM,EAAE,gBAAAC,GAAgB,GAAGC,EAAA,IAASF;AAChC,MAAAG,0BACDC,GAAK,EAAA,GAAGF,GAAM,MAAK,MAAK,eAAc,cAAa;AAGtD,SAAID,MAEAE,IAAA5C,gBAAAA,EAAA,IAACC,KAAQ,OAAOyC,GAAgB,WAAU,OACxC,UAAA1C,gBAAAA,EAAAA,IAACqB,GAAK,EAAA,UAAAuB,EAAA,CAAW,EACnB,CAAA,IAII5C,gBAAAA,EAAAA,IAAA8C,GAAA,EAA0B,UAAZF,EAAA,GAAAH,EAAI,KAAmB;AAAA,CAC9C,GACH,EACF,CAAA,GC1BSM,IAAyB,CAAC;AAAA,EACrC,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC;AACF,MAAsD;AAC9C,QAAAC,IACJ,OAAOF,KAAY,WACjBjD,gBAAAA,EAAA;AAAA,IAACmB;AAAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,IAAG;AAAA,MACH,MAAK;AAAA,MACL,SAAQ;AAAA,MACP,GAAG+B;AAAA,MACH,GAAIF,KAAa,EAAE,IAAI,EAAE;AAAA,MAEzB,UAAAC;AAAA,IAAA;AAAA,EAAA,IAGHA;AAGF,SAAAlC,gBAAAA,EAAA;AAAA,IAACb;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,IAAI;AAAA,MACJ,YAAW;AAAA,MAEV,UAAA;AAAA,QAAA8C,2BAAczB,GAAK,EAAA,MAAK,MAAK,SAAQ,UAAU,GAAGyB,GAAW;AAAA,QAC7DG;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AAEJ,GChCaC,IAA0B,CAAC;AAAA,EACtC,aAAAC;AAAA,EACA,SAAAJ;AAAA,EACA,cAAAC;AACF,MAAuD;AAC/C,QAAAC,IACJ,OAAOF,KAAY,WACjBjD,gBAAAA,EAAA;AAAA,IAACmB;AAAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,WAAS;AAAA,MACT,MAAK;AAAA,MACJ,GAAG+B;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA,IAGHA;AAIF,SAAAlC,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,IAAI;AAAA,MACJ,gBAAe;AAAA,MACf,YAAW;AAAA,MAEV,UAAA;AAAA,QAAAmC;AAAA,QACAE,KACCrD,gBAAAA,EAAA;AAAA,UAACqB;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,eAAY;AAAA,YACZ,IAAG;AAAA,YAEF,UAAAgC;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAEJ;AAEJ,GCTaC,KAAmB,CAAC;AAAA,EAC/B,mBAAAC,IAAoB;AAAA,EACpB,kBAAA/C;AAAA,EACA,SAAAyC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAG;AAAA,EACA,aAAAG;AAAA,EACA,iBAAA7B;AAAA,EACA,aAAA8B;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAlC;AAAA,EACA,UAAAC;AAAA,EACA,wBAAAkC,IAAyB;AAAA,EACzB,2BAAA/C;AAAA,EACA,MAAA0B;AACF,MAAgD;AAC9C,QAAM,EAAE,UAAAP,MAAaN,KAAY,CAAC,GAC5B,CAACE,GAAYC,CAAa,IAAIgC,EAAS,EAAK;AAGhD,SAAA9C,gBAAAA,EAAA;AAAA,IAAC+C;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,IAAG;AAAA,MACH,eAAY;AAAA,MACZ,aAAW;AAAA,MACX,QAAAJ;AAAA,MACA,MAAK;AAAA,MACL,WAAS;AAAA,MACT,SAAS,MAAY;AACnB,QAAIC,KACMA,EAAA;AAAA,MAEZ;AAAA,MACA,IACE9C,KAA6B6C,KAAU9B,IACnC,uBACA;AAAA,MAEN,cAAc,MAAY;AACxB,QAAI2B,KACF1B,EAAc,EAAI;AAAA,MAEtB;AAAA,MACA,cAAc,MAAYA,EAAc,EAAK;AAAA,MAC7C,KAAI;AAAA,MACJ,KAAK,EAAE,gBAAgB+B,IAAyB,SAAS,OAAO;AAAA,MAE/D,UAAA;AAAA,QACChC,KAAA5B,gBAAAA,EAAA;AAAA,UAACqB;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,eAAY;AAAA,YACZ,KAAI;AAAA,YACJ,KAAK;AAAA,YACL,QAAO;AAAA,YACP,OAAO;AAAA,YACP,IAAG;AAAA,YACH,cAAa;AAAA,YACb,SAAS,CAACjB,MAAYA,EAAE,gBAAgB;AAAA,YAExC,UAAAJ,gBAAAA,EAAA;AAAA,cAACwB;AAAA,cAAA;AAAA,gBACC,cAAAC;AAAA,gBACA,UAAAC;AAAA,gBACA,iBAAAC;AAAA,gBACA,YAAAC;AAAA,gBACA,eAAAC;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,QACF;AAAA,QAEF7B,gBAAAA,EAAA;AAAA,UAACO;AAAA,UAAA;AAAA,YACC,kBAAAC;AAAA,YACA,gBAAgBoB;AAAA,YAChB,cAAcI;AAAA,YACd,2BAAAnB;AAAA,YACC,GAAG4C;AAAA,UAAA;AAAA,QACN;AAAA,QACAzD,gBAAAA,EAAA;AAAA,UAACoD;AAAA,UAAA;AAAA,YACC,SAAAH;AAAA,YACA,cAAAC;AAAA,YACA,aAAAG;AAAA,UAAA;AAAA,QACF;AAAA,QACC,CAAC,CAACd,GAAM,UAAUvC,gBAAAA,EAAA,IAACsC,KAAqB,MAAAC,GAAY;AAAA,QACpDiB,KAAexD,gBAAAA,EAAA,IAAC+C,GAAwB,EAAA,GAAGS,EAAa,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAC3D;AAEJ;"}