qt-ui-kit 1.0.113 → 1.0.114

package/dist/index.d.mts

@@ -1,5 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+import * as React from 'react';
+import React__default, { ReactNode, ReactElement } from 'react';
 
 declare enum IntegrationService {
     SLACK = "slack",
@@ -74,7 +75,7 @@ interface PreviewBadgeData {
     type: BadgeType;
     label?: string;
 }
-type Props$8 = {
+type Props$a = {
     eventID: string;
     onSelected?: (eventID: string) => void;
     selected?: boolean;
@@ -93,28 +94,28 @@ type Props$8 = {
     eventBadges?: PreviewBadgeData[];
     onOverride?: (eventID: string, selectedItem: string) => void;
 };
-declare function PreviewCard({ eventID, onSelected, selected, onChecked, checked, service, subjectLine, body, sender, source, date, onClickGoToSource, eventCategory, read, overrideItems, eventBadges, onOverride, }: Props$8): react_jsx_runtime.JSX.Element;
+declare function PreviewCard({ eventID, onSelected, selected, onChecked, checked, service, subjectLine, body, sender, source, date, onClickGoToSource, eventCategory, read, overrideItems, eventBadges, onOverride, }: Props$a): react_jsx_runtime.JSX.Element;
 
 type NavButtonKey = "queue" | "account" | "logout";
 type NavButtonConfig$1 = {
     active?: boolean;
     onClick?: () => void;
 };
-type Props$7 = {
+type Props$9 = {
     buttons?: Partial<Record<NavButtonKey, NavButtonConfig$1>>;
 };
-declare function NavBar({ buttons }: Props$7): react_jsx_runtime.JSX.Element;
+declare function NavBar({ buttons }: Props$9): react_jsx_runtime.JSX.Element;
 
-type Props$6 = {
+type Props$8 = {
     eventType?: EventType;
     eventData?: EventGroup[];
     groupUrgency?: UrgencyLevel;
     groupUrgencyText?: string;
     groupSummary?: string;
 };
-declare function EventCard({ eventType, eventData, groupUrgency, groupUrgencyText, groupSummary, }: Props$6): react_jsx_runtime.JSX.Element;
+declare function EventCard({ eventType, eventData, groupUrgency, groupUrgencyText, groupSummary, }: Props$8): react_jsx_runtime.JSX.Element;
 
-type Props$5 = {
+type Props$7 = {
     subjectLine?: string;
     to?: string;
     date?: string;
@@ -124,9 +125,9 @@ type Props$5 = {
     attachments?: string;
     body?: string;
 };
-declare function EmailBody({ subjectLine, to, date, from, CC, BCC, attachments, body, }: Props$5): react_jsx_runtime.JSX.Element;
+declare function EmailBody({ subjectLine, to, date, from, CC, BCC, attachments, body, }: Props$7): react_jsx_runtime.JSX.Element;
 
-type Props$4 = {
+type Props$6 = {
     messages?: ChatData[];
 };
 type ChatData = {
@@ -140,9 +141,9 @@ type ChatData = {
     images?: string[];
     emojis?: string[];
 };
-declare function ChatBody({ messages }: Props$4): react_jsx_runtime.JSX.Element;
+declare function ChatBody({ messages }: Props$6): react_jsx_runtime.JSX.Element;
 
-type Props$3 = {
+type Props$5 = {
     issueNumber?: string;
     notification?: string;
     project?: string;
@@ -157,13 +158,13 @@ type Props$3 = {
     description?: string;
     comments?: TicketComment[];
 };
-declare function TicketBody({ issueNumber, notification, project, task, dueDate, startDate, assignees, reporter, team, location, related, description, comments, }: Props$3): react_jsx_runtime.JSX.Element;
+declare function TicketBody({ issueNumber, notification, project, task, dueDate, startDate, assignees, reporter, team, location, related, description, comments, }: Props$5): react_jsx_runtime.JSX.Element;
 
 type SearchResult = {
     label: string;
     count: number;
 };
-type Props$2 = {
+type Props$4 = {
     loading?: boolean;
     results?: SearchResult[];
     initialText?: string;
@@ -171,7 +172,7 @@ type Props$2 = {
     /** Optional debounce for onUpdate calls (ms). Defaults to 250ms. */
     debounceMs?: number;
 };
-declare function SearchBar({ loading, results, initialText, onUpdate, debounceMs, }: Props$2): react_jsx_runtime.JSX.Element;
+declare function SearchBar({ loading, results, initialText, onUpdate, debounceMs, }: Props$4): react_jsx_runtime.JSX.Element;
 
 type FilterButtonKey = "fires" | "insights" | "unread" | "done" | "more" | IntegrationService;
 type NavButtonConfig = {
@@ -180,19 +181,73 @@ type NavButtonConfig = {
     disabled?: boolean;
     count?: string | number;
 };
-type Props$1 = {
+type Props$3 = {
     buttons?: Partial<Record<FilterButtonKey, NavButtonConfig>>;
 };
-declare function FilterBar({ buttons }: Props$1): react_jsx_runtime.JSX.Element;
+declare function FilterBar({ buttons }: Props$3): react_jsx_runtime.JSX.Element;
 
 type IconSize = 16 | 20 | 24 | 36;
 
-type Props = {
+type Props$2 = {
     size?: IconSize;
     className?: string;
     service?: IntegrationService;
 };
-declare function BrandIcon({ size, className, service }: Props): react_jsx_runtime.JSX.Element;
+declare function BrandIcon({ size, className, service }: Props$2): react_jsx_runtime.JSX.Element;
+
+type Props$1 = {
+    isOpen: boolean;
+    onClose: () => void;
+    children: ReactNode;
+    className?: string;
+    disableBackdropClick?: boolean;
+    disableEscapeKey?: boolean;
+};
+declare function Modal({ isOpen, onClose, children, className, disableBackdropClick, disableEscapeKey, }: Props$1): React.ReactPortal | null;
+
+type ConfirmationVariant = "danger" | "primary" | "warning";
+type Props = {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    title: string;
+    message?: string | ReactNode;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    variant?: ConfirmationVariant;
+    children?: ReactNode;
+};
+declare function ConfirmationModal({ isOpen, onClose, onConfirm, title, message, confirmLabel, cancelLabel, variant, children, }: Props): react_jsx_runtime.JSX.Element;
+
+interface AccountInfoFieldProps {
+    label: string;
+    value?: string | null;
+    className?: string;
+}
+declare function AccountInfoField({ label, value, className, }: AccountInfoFieldProps): react_jsx_runtime.JSX.Element;
+
+interface AccountInfoSectionProps {
+    title?: string;
+    children: ReactNode;
+}
+declare function AccountInfoSection({ title, children, }: AccountInfoSectionProps): react_jsx_runtime.JSX.Element;
+
+interface AccountIntegrationCardItemProps {
+    name: string;
+    onDisconnect: () => void;
+}
+declare const AccountIntegrationCardItem: React__default.NamedExoticComponent<AccountIntegrationCardItemProps>;
+
+interface AccountIntegrationCardProps {
+    integrationName: string;
+    onConnect: () => void;
+    disabled: boolean;
+    ready: boolean;
+    limit: number;
+    icon: ReactNode;
+    children?: ReactElement<typeof AccountIntegrationCardItem> | ReactElement<typeof AccountIntegrationCardItem>[];
+}
+declare const AccountIntegrationCard: React__default.NamedExoticComponent<Readonly<AccountIntegrationCardProps>>;
 
 declare enum EventState {
     NEW = "new",
@@ -284,4 +339,4 @@ type Event = {
 
 declare const fakeMessages: ChatData[];
 
-export { type Attachment, BaseIconName, BrandIcon, type CalendarData, ChatBody, type ChatData, ColorVariants, EmailBody, type EmailData, type Event, EventCard, type EventData, type EventGroup, EventState, type EventSummaryParts, EventType, type ExternalPerson, FilterBar, type FilterButtonKey, type IconSize, IntegrationService, type MessageData, NavBar, PreviewCard, SearchBar, type SearchResult, TicketBody, type TicketComment, type TicketData, UrgencyLevel, fakeMessages };
+export { AccountInfoField, AccountInfoSection, AccountIntegrationCard, AccountIntegrationCardItem, type Attachment, BaseIconName, BrandIcon, type CalendarData, ChatBody, type ChatData, ColorVariants, ConfirmationModal, type ConfirmationVariant, EmailBody, type EmailData, type Event, EventCard, type EventData, type EventGroup, EventState, type EventSummaryParts, EventType, type ExternalPerson, FilterBar, type FilterButtonKey, type IconSize, IntegrationService, type MessageData, Modal, NavBar, PreviewCard, SearchBar, type SearchResult, TicketBody, type TicketComment, type TicketData, UrgencyLevel, fakeMessages };

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+import * as React from 'react';
+import React__default, { ReactNode, ReactElement } from 'react';
 
 declare enum IntegrationService {
     SLACK = "slack",
@@ -74,7 +75,7 @@ interface PreviewBadgeData {
     type: BadgeType;
     label?: string;
 }
-type Props$8 = {
+type Props$a = {
     eventID: string;
     onSelected?: (eventID: string) => void;
     selected?: boolean;
@@ -93,28 +94,28 @@ type Props$8 = {
     eventBadges?: PreviewBadgeData[];
     onOverride?: (eventID: string, selectedItem: string) => void;
 };
-declare function PreviewCard({ eventID, onSelected, selected, onChecked, checked, service, subjectLine, body, sender, source, date, onClickGoToSource, eventCategory, read, overrideItems, eventBadges, onOverride, }: Props$8): react_jsx_runtime.JSX.Element;
+declare function PreviewCard({ eventID, onSelected, selected, onChecked, checked, service, subjectLine, body, sender, source, date, onClickGoToSource, eventCategory, read, overrideItems, eventBadges, onOverride, }: Props$a): react_jsx_runtime.JSX.Element;
 
 type NavButtonKey = "queue" | "account" | "logout";
 type NavButtonConfig$1 = {
     active?: boolean;
     onClick?: () => void;
 };
-type Props$7 = {
+type Props$9 = {
     buttons?: Partial<Record<NavButtonKey, NavButtonConfig$1>>;
 };
-declare function NavBar({ buttons }: Props$7): react_jsx_runtime.JSX.Element;
+declare function NavBar({ buttons }: Props$9): react_jsx_runtime.JSX.Element;
 
-type Props$6 = {
+type Props$8 = {
     eventType?: EventType;
     eventData?: EventGroup[];
     groupUrgency?: UrgencyLevel;
     groupUrgencyText?: string;
     groupSummary?: string;
 };
-declare function EventCard({ eventType, eventData, groupUrgency, groupUrgencyText, groupSummary, }: Props$6): react_jsx_runtime.JSX.Element;
+declare function EventCard({ eventType, eventData, groupUrgency, groupUrgencyText, groupSummary, }: Props$8): react_jsx_runtime.JSX.Element;
 
-type Props$5 = {
+type Props$7 = {
     subjectLine?: string;
     to?: string;
     date?: string;
@@ -124,9 +125,9 @@ type Props$5 = {
     attachments?: string;
     body?: string;
 };
-declare function EmailBody({ subjectLine, to, date, from, CC, BCC, attachments, body, }: Props$5): react_jsx_runtime.JSX.Element;
+declare function EmailBody({ subjectLine, to, date, from, CC, BCC, attachments, body, }: Props$7): react_jsx_runtime.JSX.Element;
 
-type Props$4 = {
+type Props$6 = {
     messages?: ChatData[];
 };
 type ChatData = {
@@ -140,9 +141,9 @@ type ChatData = {
     images?: string[];
     emojis?: string[];
 };
-declare function ChatBody({ messages }: Props$4): react_jsx_runtime.JSX.Element;
+declare function ChatBody({ messages }: Props$6): react_jsx_runtime.JSX.Element;
 
-type Props$3 = {
+type Props$5 = {
     issueNumber?: string;
     notification?: string;
     project?: string;
@@ -157,13 +158,13 @@ type Props$3 = {
     description?: string;
     comments?: TicketComment[];
 };
-declare function TicketBody({ issueNumber, notification, project, task, dueDate, startDate, assignees, reporter, team, location, related, description, comments, }: Props$3): react_jsx_runtime.JSX.Element;
+declare function TicketBody({ issueNumber, notification, project, task, dueDate, startDate, assignees, reporter, team, location, related, description, comments, }: Props$5): react_jsx_runtime.JSX.Element;
 
 type SearchResult = {
     label: string;
     count: number;
 };
-type Props$2 = {
+type Props$4 = {
     loading?: boolean;
     results?: SearchResult[];
     initialText?: string;
@@ -171,7 +172,7 @@ type Props$2 = {
     /** Optional debounce for onUpdate calls (ms). Defaults to 250ms. */
     debounceMs?: number;
 };
-declare function SearchBar({ loading, results, initialText, onUpdate, debounceMs, }: Props$2): react_jsx_runtime.JSX.Element;
+declare function SearchBar({ loading, results, initialText, onUpdate, debounceMs, }: Props$4): react_jsx_runtime.JSX.Element;
 
 type FilterButtonKey = "fires" | "insights" | "unread" | "done" | "more" | IntegrationService;
 type NavButtonConfig = {
@@ -180,19 +181,73 @@ type NavButtonConfig = {
     disabled?: boolean;
     count?: string | number;
 };
-type Props$1 = {
+type Props$3 = {
     buttons?: Partial<Record<FilterButtonKey, NavButtonConfig>>;
 };
-declare function FilterBar({ buttons }: Props$1): react_jsx_runtime.JSX.Element;
+declare function FilterBar({ buttons }: Props$3): react_jsx_runtime.JSX.Element;
 
 type IconSize = 16 | 20 | 24 | 36;
 
-type Props = {
+type Props$2 = {
     size?: IconSize;
     className?: string;
     service?: IntegrationService;
 };
-declare function BrandIcon({ size, className, service }: Props): react_jsx_runtime.JSX.Element;
+declare function BrandIcon({ size, className, service }: Props$2): react_jsx_runtime.JSX.Element;
+
+type Props$1 = {
+    isOpen: boolean;
+    onClose: () => void;
+    children: ReactNode;
+    className?: string;
+    disableBackdropClick?: boolean;
+    disableEscapeKey?: boolean;
+};
+declare function Modal({ isOpen, onClose, children, className, disableBackdropClick, disableEscapeKey, }: Props$1): React.ReactPortal | null;
+
+type ConfirmationVariant = "danger" | "primary" | "warning";
+type Props = {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    title: string;
+    message?: string | ReactNode;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    variant?: ConfirmationVariant;
+    children?: ReactNode;
+};
+declare function ConfirmationModal({ isOpen, onClose, onConfirm, title, message, confirmLabel, cancelLabel, variant, children, }: Props): react_jsx_runtime.JSX.Element;
+
+interface AccountInfoFieldProps {
+    label: string;
+    value?: string | null;
+    className?: string;
+}
+declare function AccountInfoField({ label, value, className, }: AccountInfoFieldProps): react_jsx_runtime.JSX.Element;
+
+interface AccountInfoSectionProps {
+    title?: string;
+    children: ReactNode;
+}
+declare function AccountInfoSection({ title, children, }: AccountInfoSectionProps): react_jsx_runtime.JSX.Element;
+
+interface AccountIntegrationCardItemProps {
+    name: string;
+    onDisconnect: () => void;
+}
+declare const AccountIntegrationCardItem: React__default.NamedExoticComponent<AccountIntegrationCardItemProps>;
+
+interface AccountIntegrationCardProps {
+    integrationName: string;
+    onConnect: () => void;
+    disabled: boolean;
+    ready: boolean;
+    limit: number;
+    icon: ReactNode;
+    children?: ReactElement<typeof AccountIntegrationCardItem> | ReactElement<typeof AccountIntegrationCardItem>[];
+}
+declare const AccountIntegrationCard: React__default.NamedExoticComponent<Readonly<AccountIntegrationCardProps>>;
 
 declare enum EventState {
     NEW = "new",
@@ -284,4 +339,4 @@ type Event = {
 
 declare const fakeMessages: ChatData[];
 
-export { type Attachment, BaseIconName, BrandIcon, type CalendarData, ChatBody, type ChatData, ColorVariants, EmailBody, type EmailData, type Event, EventCard, type EventData, type EventGroup, EventState, type EventSummaryParts, EventType, type ExternalPerson, FilterBar, type FilterButtonKey, type IconSize, IntegrationService, type MessageData, NavBar, PreviewCard, SearchBar, type SearchResult, TicketBody, type TicketComment, type TicketData, UrgencyLevel, fakeMessages };
+export { AccountInfoField, AccountInfoSection, AccountIntegrationCard, AccountIntegrationCardItem, type Attachment, BaseIconName, BrandIcon, type CalendarData, ChatBody, type ChatData, ColorVariants, ConfirmationModal, type ConfirmationVariant, EmailBody, type EmailData, type Event, EventCard, type EventData, type EventGroup, EventState, type EventSummaryParts, EventType, type ExternalPerson, FilterBar, type FilterButtonKey, type IconSize, IntegrationService, type MessageData, Modal, NavBar, PreviewCard, SearchBar, type SearchResult, TicketBody, type TicketComment, type TicketData, UrgencyLevel, fakeMessages };

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,
@@ -17455,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";
@@ -17565,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,