qt-ui-kit 1.0.112 → 1.0.114

package/dist/index.js

@@ -11177,16 +11177,22 @@ var require_lib7 = __commonJS({
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  AccountInfoField: () => AccountInfoField,
+  AccountInfoSection: () => AccountInfoSection,
+  AccountIntegrationCard: () => account_integration_card_default,
+  AccountIntegrationCardItem: () => account_integration_card_item_default,
   BaseIconName: () => BaseIconName,
   BrandIcon: () => BrandIcon,
   ChatBody: () => ChatBody,
   ColorVariants: () => ColorVariants,
+  ConfirmationModal: () => ConfirmationModal,
   EmailBody: () => EmailBody,
   EventCard: () => EventCard,
   EventState: () => EventState,
   EventType: () => EventType,
   FilterBar: () => FilterBar,
   IntegrationService: () => IntegrationService,
+  Modal: () => Modal,
   NavBar: () => NavBar,
   PreviewCard: () => PreviewCard,
   SearchBar: () => SearchBar,
@@ -15513,27 +15519,27 @@ function InsightsIcon2({
         return {
           viewBox: "0 0 16 16",
           path: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M7.57056 8.23242C8.09352 9.12376 8.86065 9.86065 9.78247 10.3662C8.86107 10.8715 8.09453 11.6084 7.57153 12.499C7.04828 11.608 6.28062 10.8715 5.35864 10.3662C6.28064 9.86068 7.04747 9.12371 7.57056 8.23242Z", fill: "#4F3ED0", stroke: "#4F3ED0", "stroke-width": "1.5" }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M10.1426 4.60156C10.3709 4.92296 10.6514 5.20403 10.9727 5.43262C10.6514 5.66102 10.371 5.94244 10.1426 6.26367C9.91394 5.94224 9.63309 5.66111 9.31152 5.43262C9.63308 5.20398 9.91402 4.92318 10.1426 4.60156Z", fill: "#4F3ED0", stroke: "#4F3ED0", "stroke-width": "1.3" }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M6.28516 3.18848C6.43792 3.38705 6.61599 3.56487 6.81445 3.71777C6.61598 3.87054 6.438 4.04864 6.28516 4.24707C6.13225 4.04861 5.95444 3.87053 5.75586 3.71777C5.95443 3.56487 6.1323 3.38705 6.28516 3.18848Z", fill: "#4F3ED0", stroke: "#4F3ED0", "stroke-width": "1.2" })
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M7.57056 8.23242C8.09352 9.12376 8.86065 9.86065 9.78247 10.3662C8.86107 10.8715 8.09453 11.6084 7.57153 12.499C7.04828 11.608 6.28062 10.8715 5.35864 10.3662C6.28064 9.86068 7.04747 9.12371 7.57056 8.23242Z", fill: "#4F3ED0", stroke: "#4F3ED0", strokeWidth: "1.5" }),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M10.1426 4.60156C10.3709 4.92296 10.6514 5.20403 10.9727 5.43262C10.6514 5.66102 10.371 5.94244 10.1426 6.26367C9.91394 5.94224 9.63309 5.66111 9.31152 5.43262C9.63308 5.20398 9.91402 4.92318 10.1426 4.60156Z", fill: "#4F3ED0", stroke: "#4F3ED0", strokeWidth: "1.3" }),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M6.28516 3.18848C6.43792 3.38705 6.61599 3.56487 6.81445 3.71777C6.61598 3.87054 6.438 4.04864 6.28516 4.24707C6.13225 4.04861 5.95444 3.87053 5.75586 3.71777C5.95443 3.56487 6.1323 3.38705 6.28516 3.18848Z", fill: "#4F3ED0", stroke: "#4F3ED0", strokeWidth: "1.2" })
           ] })
         };
       case 20:
         return {
           viewBox: "0 0 20 20",
           path: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M14.999 14.248C16.2754 17.6222 19.0787 20.2871 22.6006 21.5205C19.0788 22.7541 16.2762 25.4195 15 28.793C13.7231 25.4191 10.9201 22.7539 7.39746 21.5205C10.9195 20.2871 13.7226 17.6216 14.999 14.248Z", fill: "#4F3ED0", stroke: "#4F3ED0", "stroke-width": "1.5" }),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M14.999 14.248C16.2754 17.6222 19.0787 20.2871 22.6006 21.5205C19.0788 22.7541 16.2762 25.4195 15 28.793C13.7231 25.4191 10.9201 22.7539 7.39746 21.5205C10.9195 20.2871 13.7226 17.6216 14.999 14.248Z", fill: "#4F3ED0", stroke: "#4F3ED0", strokeWidth: "1.5" }),
             /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M21 6.3418C21.7345 7.96846 23.0424 9.27714 24.6689 10.0117C23.0433 10.7457 21.7336 12.0531 20.999 13.6787C20.2642 12.0536 18.9559 10.7456 17.3301 10.0117C18.9568 9.27716 20.2657 7.96871 21 6.3418Z", fill: "#4F3ED0", stroke: "#4F3ED0", "stroke-width": "1.3" }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M12 3.25977C12.5821 4.45668 13.5524 5.42629 14.749 6.00879C13.5529 6.59057 12.5825 7.5608 12 8.75684C11.4177 7.56091 10.4473 6.59157 9.25098 6.00977C10.4479 5.42726 11.4177 4.45653 12 3.25977Z", fill: "#4F3ED0", stroke: "#4F3ED0", "stroke-width": "1.2" })
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M12 3.25977C12.5821 4.45668 13.5524 5.42629 14.749 6.00879C13.5529 6.59057 12.5825 7.5608 12 8.75684C11.4177 7.56091 10.4473 6.59157 9.25098 6.00977C10.4479 5.42726 11.4177 4.45653 12 3.25977Z", fill: "#4F3ED0", stroke: "#4F3ED0", strokeWidth: "1.2" })
           ] })
         };
       case 24:
         return {
           viewBox: "0 0 24 24",
           path: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M14.999 14.248C16.2754 17.6222 19.0787 20.2871 22.6006 21.5205C19.0788 22.7541 16.2762 25.4195 15 28.793C13.7231 25.4191 10.9201 22.7539 7.39746 21.5205C10.9195 20.2871 13.7226 17.6216 14.999 14.248Z", fill: "#4F3ED0", stroke: "#4F3ED0", "stroke-width": "1.5" }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M21 6.3418C21.7345 7.96846 23.0424 9.27714 24.6689 10.0117C23.0433 10.7457 21.7336 12.0531 20.999 13.6787C20.2642 12.0536 18.9559 10.7456 17.3301 10.0117C18.9568 9.27716 20.2657 7.96871 21 6.3418Z", fill: "#4F3ED0", stroke: "#4F3ED0", "stroke-width": "1.3" }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M12 3.25977C12.5821 4.45668 13.5524 5.42629 14.749 6.00879C13.5529 6.59057 12.5825 7.5608 12 8.75684C11.4177 7.56091 10.4473 6.59157 9.25098 6.00977C10.4479 5.42726 11.4177 4.45653 12 3.25977Z", fill: "#4F3ED0", stroke: "#4F3ED0", "stroke-width": "1.2" })
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M14.999 14.248C16.2754 17.6222 19.0787 20.2871 22.6006 21.5205C19.0788 22.7541 16.2762 25.4195 15 28.793C13.7231 25.4191 10.9201 22.7539 7.39746 21.5205C10.9195 20.2871 13.7226 17.6216 14.999 14.248Z", fill: "#4F3ED0", stroke: "#4F3ED0", strokeWidth: "1.5" }),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M21 6.3418C21.7345 7.96846 23.0424 9.27714 24.6689 10.0117C23.0433 10.7457 21.7336 12.0531 20.999 13.6787C20.2642 12.0536 18.9559 10.7456 17.3301 10.0117C18.9568 9.27716 20.2657 7.96871 21 6.3418Z", fill: "#4F3ED0", stroke: "#4F3ED0", strokeWidth: "1.3" }),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M12 3.25977C12.5821 4.45668 13.5524 5.42629 14.749 6.00879C13.5529 6.59057 12.5825 7.5608 12 8.75684C11.4177 7.56091 10.4473 6.59157 9.25098 6.00977C10.4479 5.42726 11.4177 4.45653 12 3.25977Z", fill: "#4F3ED0", stroke: "#4F3ED0", strokeWidth: "1.2" })
           ] })
         };
       case 36:
@@ -16432,7 +16438,7 @@ function EmailBody({
   }
   const isHtmlContent = body && isHtml(body);
   const safeText = isHtmlContent ? import_dompurify.default.sanitize(body) : import_dompurify.default.sanitize(body?.replace(/\n/g, "<br>") || "");
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col gap-4 bg-white p-4 rounded-b-2xl overflow-auto", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col gap-4 bg-white p-4 rounded-b-2xl overflow-y-auto overflow-x-hidden", children: [
     /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col gap-0.5", children: [
       /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MetadataRow, { metadata: [`Subject: ${subjectLine}`] }),
       /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MetadataRow, { metadata: [`To: ${to}`] }),
@@ -16443,27 +16449,35 @@ function EmailBody({
       /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MetadataRow, { metadata: [`Attachments: ${attachments}`] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("hr", { className: "text-qtneutral-500" }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "body-small break-all whitespace-pre-line flex", children: body && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "body-small break-words whitespace-pre-line w-full overflow-x-hidden", children: body && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "iframe",
       {
         srcDoc: `<!DOCTYPE html>
     <html>
       <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">
         <style>
+          html, body { max-width: 100%; overflow-x: hidden; }
           body {
             font-family: 'Inter', sans-serif;
             padding: 0;
             margin: 0;
             font-size: 14px;
-            word-break: break-all;
+            line-height: 1.5;
+            word-break: break-word;
           }
+          img, svg, video, canvas { max-width: 100%; height: auto; }
+          table { width: 100% !important; table-layout: fixed; border-collapse: collapse; }
+          td, th { word-break: break-word; }
+          pre, code { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; max-width: 100%; overflow-x: auto; }
+          a { word-break: break-all; }
         </style>
       </head>
       <body>${safeText}</body>
     </html>`,
         sandbox: "allow-popups",
-        style: { border: 0, width: "100%", height: "500px" },
+        style: { border: 0, width: "100%", height: "500px", display: "block" },
         title: "Email Content"
       }
     ) })
@@ -17257,18 +17271,27 @@ function PlusLarge({
 // src/components/molecules/buttons/nav_button/filter_nav_button/filter_nav_button.tsx
 var import_clsx11 = __toESM(require("clsx"));
 var import_jsx_runtime44 = require("react/jsx-runtime");
-function FilterNavButton({ icon, label, active, onClick }) {
+function FilterNavButton({ icon, label, active, onClick, totalItems }) {
+  const formatTotalItems = (count) => {
+    if (typeof count === "number" && count > 99) {
+      return "99+";
+    }
+    return count;
+  };
+  const displayCount = formatTotalItems(totalItems);
+  const shouldShowBadge = !!(displayCount && (typeof displayCount === "number" ? displayCount !== 0 : displayCount !== "0"));
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
     "div",
     {
-      className: "w-min h-min flex flex-none flex-col place-items-center gap-2",
+      className: "w-min h-min flex flex-none flex-col place-items-center gap-0 relative pt-[15px]",
       onClick,
       children: [
+        shouldShowBadge && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "w-[24px] h-[24px] rounded-full flex items-center justify-center bg-[#545454] text-white text-[8px] leading-none absolute right-[-7px] top-[2px] z-999 border-2 border-white", children: displayCount }),
         /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           "div",
           {
             className: (0, import_clsx11.default)(
-              "w-[44px] h-[44px] flex flex-none flex-col place-items-center place-content-center rounded-xl hover:bg-qtneutral-200 hover:border-2 hover:border-qtneutral-500"
+              "w-[44px] h-[44px] flex flex-none flex-col place-items-center place-content-center rounded-xl hover:bg-qtneutral-200 hover:border-2 hover:border-qtneutral-500 p-[0]"
             ),
             children: icon
           }
@@ -17293,7 +17316,8 @@ function FilterBar({ buttons }) {
           }
         ),
         label: "Fires",
-        onClick: buttons?.fires?.onClick
+        onClick: buttons?.fires?.onClick,
+        totalItems: buttons?.fires?.count
       }
     ),
     !buttons?.insights?.disabled && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
@@ -17306,7 +17330,8 @@ function FilterBar({ buttons }) {
           }
         ),
         label: "Q Insights",
-        onClick: buttons?.insights?.onClick
+        onClick: buttons?.insights?.onClick,
+        totalItems: buttons?.insights?.count
       }
     ),
     !buttons?.unread?.disabled && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
@@ -17320,7 +17345,8 @@ function FilterBar({ buttons }) {
           }
         ),
         label: "Unread",
-        onClick: buttons?.unread?.onClick
+        onClick: buttons?.unread?.onClick,
+        totalItems: buttons?.unread?.count
       }
     ),
     !buttons?.done?.disabled && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
@@ -17335,11 +17361,12 @@ function FilterBar({ buttons }) {
           }
         ),
         label: "Done",
-        onClick: buttons?.done?.onClick
+        onClick: buttons?.done?.onClick,
+        totalItems: buttons?.done?.count
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("hr", { className: "w-full border-0.5 text-qtneutral-700" }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex-1 min-h-0 w-full overflow-y-auto flex flex-col gap-4 overscroll-contain [scrollbar-gutter:stable] pl-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex-1 min-h-0 w-full overflow-y-auto flex flex-col gap-4 overscroll-contain items-center min-w-[58px]", children: [
       !buttons?.slack?.disabled && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
         FilterNavButton,
         {
@@ -17434,6 +17461,238 @@ function FilterBar({ buttons }) {
   ] });
 }
 
+// src/components/molecules/modal/modal.tsx
+var import_react6 = require("react");
+var import_react_dom = require("react-dom");
+var import_clsx12 = __toESM(require("clsx"));
+var import_jsx_runtime46 = require("react/jsx-runtime");
+function Modal({
+  isOpen,
+  onClose,
+  children,
+  className,
+  disableBackdropClick = false,
+  disableEscapeKey = false
+}) {
+  const modalRef = (0, import_react6.useRef)(null);
+  const previousActiveElement = (0, import_react6.useRef)(null);
+  (0, import_react6.useEffect)(() => {
+    if (!isOpen || disableEscapeKey) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, onClose, disableEscapeKey]);
+  (0, import_react6.useEffect)(() => {
+    if (!isOpen) return;
+    const originalOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    previousActiveElement.current = document.activeElement;
+    setTimeout(() => {
+      const focusable = modalRef.current?.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      if (focusable && focusable.length > 0) {
+        focusable[0].focus();
+      }
+    }, 0);
+    return () => {
+      document.body.style.overflow = originalOverflow;
+      previousActiveElement.current?.focus();
+    };
+  }, [isOpen]);
+  if (!isOpen) return null;
+  const handleBackdropClick = () => {
+    if (!disableBackdropClick) onClose();
+  };
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      "div",
+      {
+        className: "fixed inset-0 z-50 flex items-center justify-center bg-qtneutral-900/50 animate-fade-in",
+        onClick: handleBackdropClick,
+        "aria-modal": "true",
+        role: "dialog",
+        children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          "div",
+          {
+            ref: modalRef,
+            className: (0, import_clsx12.default)(
+              "bg-white rounded-2xl p-6 max-w-[480px] w-full mx-4 modal-shadow animate-modal-scale",
+              className
+            ),
+            onClick: (e) => e.stopPropagation(),
+            role: "document",
+            children
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+
+// src/components/molecules/modal/confirmation_modal.tsx
+var import_clsx13 = __toESM(require("clsx"));
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var variantStyles = {
+  danger: {
+    confirm: "bg-qtred-500 text-white hover:bg-qtred-400",
+    cancel: "bg-white text-qtpurple-500 border-2 border-qtpurple-500 hover:bg-qtpurple-200"
+  },
+  primary: {
+    confirm: "bg-qtpurple-500 text-white hover:bg-qtpurple-600",
+    cancel: "bg-white text-qtpurple-500 border-2 border-qtpurple-500 hover:bg-qtpurple-200"
+  },
+  warning: {
+    confirm: "bg-qtorange-400 text-qtneutral-900 hover:bg-qtorange-300",
+    cancel: "bg-white text-qtpurple-500 border-2 border-qtpurple-500 hover:bg-qtpurple-200"
+  }
+};
+function ConfirmationModal({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  message: message2,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  variant = "primary",
+  children
+}) {
+  const buttonBase = "px-4 py-2.5 rounded-lg label-1-bold transition-colors";
+  const styles = variantStyles[variant];
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Modal, { isOpen, onClose, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("h2", { className: "label-1-bold text-qtneutral-900", children: title }),
+    message2 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "body-small text-qtneutral-800 whitespace-pre-line", children: typeof message2 === "string" ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { children: message2 }) : message2 }),
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex gap-4 justify-end", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        "button",
+        {
+          onClick: onConfirm,
+          className: (0, import_clsx13.default)(buttonBase, styles.confirm),
+          children: confirmLabel
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        "button",
+        {
+          onClick: onClose,
+          className: (0, import_clsx13.default)(buttonBase, styles.cancel, "px-8"),
+          children: cancelLabel
+        }
+      )
+    ] })
+  ] }) });
+}
+
+// src/components/organisms/account/info/account_info_field.tsx
+var import_jsx_runtime48 = require("react/jsx-runtime");
+function AccountInfoField({
+  label,
+  value,
+  className = ""
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: `flex-1 flex flex-col flex-wrap gap-2 ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("label", { className: "body-bold text-qtneutral-900", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "body text-qtneutral-900", children: value || "-" })
+  ] });
+}
+
+// src/components/organisms/account/info/account_info_section.tsx
+var import_jsx_runtime49 = require("react/jsx-runtime");
+function AccountInfoSection({
+  title,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex flex-col flex-wrap gap-4 pt-6 pb-6", children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "body-bold text-qtneutral-900", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "user-data-row", children })
+  ] });
+}
+
+// src/components/organisms/account/integrations/account_integration_card.tsx
+var import_react7 = __toESM(require("react"));
+var import_clsx14 = __toESM(require("clsx"));
+var import_jsx_runtime50 = require("react/jsx-runtime");
+var AccountIntegrationCard = import_react7.default.memo(function AccountIntegrationCard2({
+  integrationName,
+  children,
+  onConnect,
+  disabled,
+  ready,
+  icon,
+  limit
+}) {
+  const count = Array.isArray(children) ? children.length : children ? 1 : 0;
+  const isLimitReached = count >= limit;
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "card-your-apps flex flex-col items-center gap-4 rounded-lg border-2 border-qtneutral-400 bg-white p-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex w-full items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          "div",
+          {
+            className: (0, import_clsx14.default)(
+              "w-[44px] h-[44px] flex items-center justify-center transition-opacity border-none bg-transparent p-0",
+              !ready && "opacity-50 cursor-not-allowed",
+              disabled && "grayscale border-2 border-green-700 bg-green-100"
+            ),
+            "aria-label": `Integrate with ${integrationName}`,
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "text-sm font-bold", children: integrationName }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "body-small text-qtneutral-800", children: count > 0 ? `${count} of ${limit} connected` : "No accounts connected" })
+        ] })
+      ] }),
+      !isLimitReached && ready && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        "button",
+        {
+          onClick: onConnect,
+          disabled: disabled || !ready,
+          className: (0, import_clsx14.default)(
+            "label-1-bold text-qtpurple-600 bg-transparent border-none p-0 cursor-pointer hover:text-qtpurple-500",
+            (disabled || !ready) && "opacity-50 cursor-not-allowed pointer-events-none"
+          ),
+          children: count > 0 ? `+ Connect Another` : `+ Connect`
+        }
+      )
+    ] }),
+    count > 0 && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "flex w-full flex-col gap-2.5", children })
+  ] });
+});
+var account_integration_card_default = AccountIntegrationCard;
+
+// src/components/organisms/account/integrations/account_integration_card_item.tsx
+var import_react8 = __toESM(require("react"));
+var import_jsx_runtime51 = require("react/jsx-runtime");
+var AccountIntegrationCardItem = import_react8.default.memo(
+  function AccountIntegrationCardItem2({
+    name,
+    onDisconnect
+  }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex flex-row flex-nowrap justify-between items-center bg-qtneutral-100 p-4 border border-qtpurple-500 rounded-lg", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "label-1-bold text-qtneutral-900", children: name }),
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "label-2 text-qtred-500 underline bg-transparent border-none p-0 cursor-pointer hover:text-qtred-400",
+          onClick: (e) => {
+            e.stopPropagation();
+            onDisconnect();
+          },
+          children: "Disconnect"
+        }
+      )
+    ] });
+  }
+);
+var account_integration_card_item_default = AccountIntegrationCardItem;
+
 // src/types/events.ts
 var EventState = /* @__PURE__ */ ((EventState2) => {
   EventState2["NEW"] = "new";
@@ -17544,16 +17803,22 @@ This is a *markdown* **example**.
 ];
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AccountInfoField,
+  AccountInfoSection,
+  AccountIntegrationCard,
+  AccountIntegrationCardItem,
   BaseIconName,
   BrandIcon,
   ChatBody,
   ColorVariants,
+  ConfirmationModal,
   EmailBody,
   EventCard,
   EventState,
   EventType,
   FilterBar,
   IntegrationService,
+  Modal,
   NavBar,
   PreviewCard,
   SearchBar,