qt-ui-kit 1.0.111 → 1.0.113

package/dist/index.d.mts

@@ -178,6 +178,7 @@ type NavButtonConfig = {
     active?: boolean;
     onClick?: () => void;
     disabled?: boolean;
+    count?: string | number;
 };
 type Props$1 = {
     buttons?: Partial<Record<FilterButtonKey, NavButtonConfig>>;

package/dist/index.d.ts

@@ -178,6 +178,7 @@ type NavButtonConfig = {
     active?: boolean;
     onClick?: () => void;
     disabled?: boolean;
+    count?: string | number;
 };
 type Props$1 = {
     buttons?: Partial<Record<FilterButtonKey, NavButtonConfig>>;

package/dist/index.js

@@ -15513,27 +15513,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 +16432,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 +16443,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 +17265,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 +17310,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 +17324,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 +17339,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 +17355,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,
         {