@scripso-homepad/ui 0.4.9 → 0.4.11

package/dist/web/index.cjs

@@ -8,6 +8,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var reactRouterDom = require('react-router-dom');
+var sonner = require('sonner');
+require('sonner/dist/styles.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -5381,7 +5383,7 @@ var require_react_dom_production_min = __commonJS({
       if (5 === d || 6 === d) a = a.stateNode, b ? c.insertBefore(a, b) : c.appendChild(a);
       else if (4 !== d && (a = a.child, null !== a)) for (Wj(a, b, c), a = a.sibling; null !== a; ) Wj(a, b, c), a = a.sibling;
     }
-    var X2 = null;
+    var X3 = null;
     var Xj = false;
     function Yj(a, b, c) {
       for (c = c.child; null !== c; ) Zj(a, b, c), c = c.sibling;
@@ -5395,23 +5397,23 @@ var require_react_dom_production_min = __commonJS({
         case 5:
           U || Lj(c, b);
         case 6:
-          var d = X2, e = Xj;
-          X2 = null;
+          var d = X3, e = Xj;
+          X3 = null;
           Yj(a, b, c);
-          X2 = d;
+          X3 = d;
           Xj = e;
-          null !== X2 && (Xj ? (a = X2, c = c.stateNode, 8 === a.nodeType ? a.parentNode.removeChild(c) : a.removeChild(c)) : X2.removeChild(c.stateNode));
+          null !== X3 && (Xj ? (a = X3, c = c.stateNode, 8 === a.nodeType ? a.parentNode.removeChild(c) : a.removeChild(c)) : X3.removeChild(c.stateNode));
           break;
         case 18:
-          null !== X2 && (Xj ? (a = X2, c = c.stateNode, 8 === a.nodeType ? Kf(a.parentNode, c) : 1 === a.nodeType && Kf(a, c), bd(a)) : Kf(X2, c.stateNode));
+          null !== X3 && (Xj ? (a = X3, c = c.stateNode, 8 === a.nodeType ? Kf(a.parentNode, c) : 1 === a.nodeType && Kf(a, c), bd(a)) : Kf(X3, c.stateNode));
           break;
         case 4:
-          d = X2;
+          d = X3;
           e = Xj;
-          X2 = c.stateNode.containerInfo;
+          X3 = c.stateNode.containerInfo;
           Xj = true;
           Yj(a, b, c);
-          X2 = d;
+          X3 = d;
           Xj = e;
           break;
         case 0:
@@ -5468,23 +5470,23 @@ var require_react_dom_production_min = __commonJS({
           a: for (; null !== h; ) {
             switch (h.tag) {
               case 5:
-                X2 = h.stateNode;
+                X3 = h.stateNode;
                 Xj = false;
                 break a;
               case 3:
-                X2 = h.stateNode.containerInfo;
+                X3 = h.stateNode.containerInfo;
                 Xj = true;
                 break a;
               case 4:
-                X2 = h.stateNode.containerInfo;
+                X3 = h.stateNode.containerInfo;
                 Xj = true;
                 break a;
             }
             h = h.return;
           }
-          if (null === X2) throw Error(p(160));
+          if (null === X3) throw Error(p(160));
           Zj(f, g, e);
-          X2 = null;
+          X3 = null;
           Xj = false;
           var k = e.alternate;
           null !== k && (k.return = null);
@@ -27565,7 +27567,7 @@ var require_react_dom_development = __commonJS({
           return root2;
         }
         var ReactVersion = "18.3.1";
-        function createPortal2(children, containerInfo, implementation) {
+        function createPortal3(children, containerInfo, implementation) {
           var key = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : null;
           {
             checkKeyStringCoercion(key);
@@ -28421,7 +28423,7 @@ var require_react_dom_development = __commonJS({
           if (!isValidContainer(container)) {
             throw new Error("Target container is not a DOM element.");
           }
-          return createPortal2(children, container, null, key);
+          return createPortal3(children, container, null, key);
         }
         function renderSubtreeIntoContainer(parentComponent, element, containerNode, callback) {
           return unstable_renderSubtreeIntoContainer(parentComponent, element, containerNode, callback);
@@ -29217,7 +29219,7 @@ function BuildingSelect({
         ),
         children: [
           buildingIcon ?? /* @__PURE__ */ jsxRuntime.jsx(BuildingIcon, { className: "shrink-0 text-navy" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-medium text-slate-blue", children: displayLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate typography-14 font-medium text-slate-blue", children: displayLabel }),
           chevronIcon ?? /* @__PURE__ */ jsxRuntime.jsx(
             lucideReact.ChevronsUpDown,
             {
@@ -29265,7 +29267,7 @@ function BuildingSelect({
               },
               onClick: () => selectOption(option),
               className: cn(
-                "flex w-full rounded-lg px-3 py-2.5 text-left text-sm font-medium text-slate-blue transition-colors",
+                "flex w-full rounded-lg px-3 py-2.5 text-left typography-14 font-medium text-slate-blue transition-colors",
                 !option.disabled && "cursor-pointer hover:bg-storm-gray-50",
                 (isSelected || isHighlighted) && !option.disabled && "bg-storm-gray-50",
                 option.disabled && "cursor-not-allowed opacity-50"
@@ -29318,7 +29320,7 @@ function AppHeader({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "truncate text-xl font-bold text-slate-blue", children: title }),
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "truncate typography-title text-slate-blue", children: title }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-3", children: [
           hasBuildingSelect ? /* @__PURE__ */ jsxRuntime.jsx(
             BuildingSelect,
@@ -29421,7 +29423,7 @@ function SidebarNavItem({ item, isOpen, onNavigate }) {
           "span",
           {
             className: cn(
-              "overflow-hidden text-sm font-semibold whitespace-nowrap transition-[max-width,opacity] duration-300 ease-in-out",
+              "overflow-hidden typography-14 font-semibold whitespace-nowrap transition-[max-width,opacity] duration-300 ease-in-out",
               isOpen ? "max-w-[180px] opacity-100" : "max-w-0 opacity-0"
             ),
             children: item.label
@@ -29458,15 +29460,15 @@ function SidebarUserCard({
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "flex size-11 shrink-0 items-center justify-center rounded-full bg-white/5 text-sm font-bold text-white",
+            className: "flex size-11 shrink-0 items-center justify-center rounded-full bg-white/5 typography-14 font-bold text-white",
             "aria-hidden": true,
             children: initials
           }
         ),
         isOpen ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col overflow-hidden", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-sm font-bold text-white", children: user.fullName }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs text-storm-gray-100", children: user.email })
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate typography-14 font-bold text-white", children: user.fullName }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate typography-12 text-storm-gray-100", children: user.email })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "button",
@@ -30047,7 +30049,7 @@ var defaultLabels = {
   page: (pageNumber) => `Page ${pageNumber}`,
   showing: ({ start, end, total }) => `Showing ${start}-${end} of ${total}`
 };
-var paginationControlClassName = "inline-flex size-7 items-center justify-center rounded-lg border border-storm-gray-50 p-1 text-xs font-medium leading-none text-storm-gray-500 transition-colors";
+var paginationControlClassName = "inline-flex size-7 items-center justify-center rounded-lg border border-storm-gray-50 p-1 typography-12 font-medium text-storm-gray-500 transition-colors";
 var paginationHoverClassName = "cursor-pointer hover:bg-storm-gray-0";
 function Pagination({
   page,
@@ -30081,7 +30083,7 @@ function Pagination({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium leading-none text-storm-gray-200", children: mergedLabels.showing({ start, end, total }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-12 font-medium text-storm-gray-200", children: mergedLabels.showing({ start, end, total }) }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "nav",
           {
@@ -30168,8 +30170,8 @@ var tableCellPaddingClassName = "px-3 py-3";
 var tableHeadPaddingClassName = "px-3 py-4";
 var tableShellClassName = "flex flex-col overflow-hidden border bg-storm-gray-0";
 var tableFooterShellClassName = "overflow-hidden rounded-b-xl border bg-storm-gray-0";
-var tableHeaderClassName = "bg-storm-gray-0 font-sans text-xs font-normal leading-none tracking-normal text-storm-gray-400";
-var tableBodyClassName = "bg-white font-sans text-sm font-medium leading-none tracking-normal text-storm-gray-900";
+var tableHeaderClassName = "bg-storm-gray-0 typography-12 font-normal tracking-normal text-storm-gray-400";
+var tableBodyClassName = "bg-white typography-14 font-medium tracking-normal text-storm-gray-900";
 var tableAlignClasses = {
   left: "",
   right: "text-right",
@@ -30347,10 +30349,10 @@ function TableActionsCell({ className, children, ...props }) {
 
 // src/web/components/TableActionsMenu.tsx
 var import_react_dom = __toESM(require_react_dom());
-var actionButtonClassName = "inline-flex cursor-pointer items-center gap-1 rounded-lg border border-storm-gray-50 bg-white px-3 py-2 font-sans text-xs font-medium leading-none text-storm-gray-900 transition-colors hover:bg-storm-gray-0";
+var inlineActionClassName = "inline-flex cursor-pointer items-center gap-1 rounded-lg border border-storm-gray-50 bg-white px-3 py-2 typography-12 font-medium text-storm-gray-900 transition-colors hover:bg-storm-gray-0";
 var variantClasses = {
-  approve: actionButtonClassName,
-  reject: actionButtonClassName,
+  approve: inlineActionClassName,
+  reject: inlineActionClassName,
   menu: "inline-flex size-7 cursor-pointer items-center justify-center rounded-lg text-storm-gray-500 transition-colors hover:bg-storm-gray-0 hover:text-storm-gray-900"
 };
 var inlineActionIconClassName = "inline-flex size-4 shrink-0 items-center justify-center [&_svg]:size-4";
@@ -30506,7 +30508,7 @@ function TableActionsMenu({
               item.onSelect();
             },
             className: cn(
-              "flex h-[51px] w-full cursor-pointer items-center gap-2.5 px-3 text-left font-sans text-sm font-medium leading-none text-storm-gray-900 transition-colors hover:bg-storm-gray-0",
+              "flex h-[51px] w-full cursor-pointer items-center gap-2.5 px-3 text-left typography-14 font-medium text-storm-gray-900 transition-colors hover:bg-storm-gray-0",
               index > 0 && "border-t border-storm-gray-50",
               item.disabled && "cursor-not-allowed opacity-50"
             ),
@@ -30737,7 +30739,7 @@ function Badge({ children, variant = "neutral", icon, className }) {
     "span",
     {
       className: cn(
-        "inline-flex items-center gap-2 rounded-[28px] px-3 py-1.5 font-sans text-xs font-semibold leading-none whitespace-nowrap",
+        "inline-flex items-center gap-2 rounded-[28px] px-3 py-1.5 typography-12 font-semibold whitespace-nowrap",
         badgeVariantClasses[variant],
         className
       ),
@@ -30756,7 +30758,7 @@ function TableIconText({ icon, children, className }) {
     "span",
     {
       className: cn(
-        "inline-flex items-center gap-2 font-sans text-sm font-medium leading-none tracking-normal text-storm-gray-900",
+        "inline-flex items-center gap-2 typography-14 font-medium tracking-normal text-storm-gray-900",
         className
       ),
       children: [
@@ -30767,6 +30769,9 @@ function TableIconText({ icon, children, className }) {
   );
 }
 
+// src/web/components/Modal.tsx
+var import_react_dom2 = __toESM(require_react_dom());
+
 // src/icons/arrowUpRightPath.ts
 var ARROW_UP_RIGHT_PATH = "M14.1667 14.1668V5.8335H5.83333M14.1667 5.8335L5.83333 14.1668";
 function ArrowUpRightIcon({
@@ -30977,6 +30982,7 @@ function Modal({
   cancelDisabled = false,
   confirmDisabled = false,
   closeOnBackdrop = true,
+  closeOnEscape = true,
   containerClassName,
   contentClassName,
   buttonClassName
@@ -30985,29 +30991,36 @@ function Modal({
     if (!open) {
       return;
     }
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
     const handleKeyDown = (event) => {
-      if (event.key === "Escape") {
+      if (event.key === "Escape" && closeOnEscape) {
         onCancel();
       }
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => {
+      document.body.style.overflow = previousOverflow;
       window.removeEventListener("keydown", handleKeyDown);
     };
-  }, [open, onCancel]);
+  }, [open, onCancel, closeOnEscape]);
   if (!open) {
     return null;
   }
   const sharedButtonClassName = cn(
     "btn h-13 justify-center!",
-    footerLayout === "split" && "min-w-0 flex-1",
-    buttonClassName
+    footerLayout === "split" && "min-w-0 flex-1 basis-0",
+    footerLayout !== "split" && buttonClassName
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const modal = /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: "fixed inset-0 z-50 flex items-center justify-center p-4 backdrop-blur-[12px] bg-storm-gray-850/40",
-      onClick: closeOnBackdrop ? onCancel : void 0,
+      className: "fixed inset-0 z-[100] flex items-center justify-center p-4 backdrop-blur-[12px] bg-storm-gray-850/40",
+      onClick: closeOnBackdrop ? (event) => {
+        if (event.target === event.currentTarget) {
+          onCancel();
+        }
+      } : void 0,
       role: "presentation",
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
@@ -31017,14 +31030,14 @@ function Modal({
           "aria-labelledby": "homepad-modal-title",
           ...subtitle ? { "aria-describedby": "homepad-modal-subtitle" } : {},
           className: cn(
-            "flex w-full max-w-2xl flex-col gap-6 rounded-2xl bg-white p-4 opacity-100 md:p-6",
+            "flex max-h-[min(90dvh,calc(100dvh-2rem))] w-full max-w-2xl flex-col gap-6 rounded-2xl bg-white p-4 opacity-100 md:p-6",
             containerClassName
           ),
           onClick: (event) => {
             event.stopPropagation();
           },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("header", { className: cn("flex", icon ? "items-center gap-2.5" : void 0), children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("header", { className: cn("flex shrink-0", icon ? "items-center gap-2.5" : void 0), children: [
               icon ? /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
@@ -31040,7 +31053,7 @@ function Modal({
                   "h2",
                   {
                     id: "homepad-modal-title",
-                    className: "font-sans text-lg font-bold leading-none tracking-normal text-black",
+                    className: "typography-title-sm tracking-normal text-black",
                     children: title
                   }
                 ),
@@ -31048,18 +31061,18 @@ function Modal({
                   "p",
                   {
                     id: "homepad-modal-subtitle",
-                    className: "font-sans text-xs font-normal leading-none tracking-normal text-storm-gray-400",
+                    className: "typography-caption tracking-normal text-storm-gray-400",
                     children: subtitle
                   }
                 ) : null
               ] })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("min-w-0", contentClassName), children }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("min-h-0 min-w-0 flex-1 overflow-y-auto", contentClassName), children }),
             /* @__PURE__ */ jsxRuntime.jsxs(
               "footer",
               {
                 className: cn(
-                  "flex gap-4",
+                  "flex shrink-0 gap-4",
                   footerLayout === "split" ? "w-full" : footerAlignClasses[footerAlign]
                 ),
                 children: [
@@ -31093,6 +31106,387 @@ function Modal({
       )
     }
   );
+  return typeof document !== "undefined" ? (0, import_react_dom2.createPortal)(modal, document.body) : modal;
+}
+var DRAWER_TRANSITION_MS = 300;
+function Drawer({
+  open,
+  title,
+  subtitle,
+  children,
+  footer,
+  onClose,
+  closeAriaLabel = "Close",
+  widthClassName = "w-full md:w-[464px]",
+  className,
+  headerClassName,
+  contentClassName,
+  footerClassName
+}) {
+  const [isPresent, setIsPresent] = react.useState(open);
+  const [isAnimatedIn, setIsAnimatedIn] = react.useState(false);
+  react.useEffect(() => {
+    if (open) {
+      setIsPresent(true);
+      const frame = window.requestAnimationFrame(() => {
+        window.requestAnimationFrame(() => {
+          setIsAnimatedIn(true);
+        });
+      });
+      return () => {
+        window.cancelAnimationFrame(frame);
+      };
+    }
+    setIsAnimatedIn(false);
+    const timeout = window.setTimeout(() => {
+      setIsPresent(false);
+    }, DRAWER_TRANSITION_MS);
+    return () => {
+      window.clearTimeout(timeout);
+    };
+  }, [open]);
+  react.useEffect(() => {
+    if (!isPresent) {
+      return;
+    }
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isPresent, onClose]);
+  if (!isPresent) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex justify-end p-2 max-md:p-0",
+      role: "presentation",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": closeAriaLabel,
+            className: cn(
+              "absolute inset-0 bg-storm-gray-850/40 backdrop-blur-[12px] transition-opacity duration-300 ease-in-out",
+              isAnimatedIn ? "opacity-100" : "opacity-0"
+            ),
+            onClick: onClose
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "aside",
+          {
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": "homepad-drawer-title",
+            ...subtitle ? { "aria-describedby": "homepad-drawer-subtitle" } : {},
+            className: cn(
+              "relative z-10 flex h-[calc(100dvh-16px)] min-h-0 flex-col overflow-hidden rounded-[16px] bg-white shadow-2xl transition-transform duration-300 ease-in-out will-change-transform max-md:h-dvh max-md:rounded-none",
+              isAnimatedIn ? "translate-x-0" : "translate-x-full",
+              widthClassName,
+              className
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "header",
+                {
+                  className: cn(
+                    "flex h-[87px] shrink-0 items-start justify-between border-b border-storm-gray-50 pt-6 pr-6 pb-4 pl-6",
+                    headerClassName
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex flex-col gap-1", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "h2",
+                        {
+                          id: "homepad-drawer-title",
+                          className: "typography-title-sm tracking-normal text-black",
+                          children: title
+                        }
+                      ),
+                      subtitle ? /* @__PURE__ */ jsxRuntime.jsx(
+                        "p",
+                        {
+                          id: "homepad-drawer-subtitle",
+                          className: "typography-body tracking-normal text-storm-gray-400",
+                          children: subtitle
+                        }
+                      ) : null
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": closeAriaLabel,
+                        className: "flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-lg text-storm-gray-400 transition-colors hover:bg-storm-gray-50 hover:text-storm-gray-600",
+                        onClick: onClose,
+                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-5", strokeWidth: 1.75 })
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "drawer-scroll-area min-h-0 flex-1 overflow-y-auto px-6 pt-6 pb-0",
+                    contentClassName
+                  ),
+                  children
+                }
+              ),
+              footer ? /* @__PURE__ */ jsxRuntime.jsx("footer", { className: cn("shrink-0 px-6 py-5", footerClassName), children: footer }) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function TimelineCheckIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      "aria-hidden": true,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M13.3346 4L6.0013 11.3333L2.66797 8",
+          stroke: "#279D54",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function HistoryTimeline({ events }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "m-0 flex list-none flex-col gap-1 p-0", children: events.map((event, index) => {
+    const isLast = index === events.length - 1;
+    return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-start gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-8 shrink-0 flex-col items-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-8 shrink-0 items-center justify-center rounded-[28px] border border-storm-gray-50 bg-white", children: /* @__PURE__ */ jsxRuntime.jsx(TimelineCheckIcon, { className: "size-4 shrink-0" }) }),
+        !isLast ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "mt-1 h-[31px] w-px shrink-0 border-l border-dashed border-storm-gray-100"
+          }
+        ) : null
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-2 pt-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-14 font-medium tracking-normal text-slate-blue", children: event.title }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-caption tracking-normal text-storm-gray-300", children: event.timestamp })
+      ] })
+    ] }, event.id);
+  }) });
+}
+function ToastCloseIcon(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": true,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M15 5L5 15M5 5L15 15",
+          stroke: "#B5BCC1",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function ToastSuccessIcon(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": true,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M20 6L9 17L4 12",
+          stroke: "#279D54",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function ToastErrorIcon(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": true,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M18 6L6 18M6 6L18 18",
+          stroke: "#AE0011",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function ToastWarningIcon(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": true,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M12.0001 9.00022V13.0002M12.0001 17.0002H12.0101M21.7301 18.0002L13.7301 4.00022C13.5556 3.69243 13.3027 3.43641 12.997 3.25829C12.6913 3.08017 12.3438 2.98633 11.9901 2.98633C11.6363 2.98633 11.2888 3.08017 10.9831 3.25829C10.6774 3.43641 10.4245 3.69243 10.2501 4.00022L2.25005 18.0002C2.07373 18.3056 1.98128 18.6521 1.98206 19.0047C1.98284 19.3573 2.07683 19.7035 2.2545 20.008C2.43217 20.3126 2.6872 20.5648 2.99375 20.7391C3.30029 20.9133 3.64746 21.0034 4.00005 21.0002H20.0001C20.351 20.9999 20.6956 20.9072 20.9993 20.7315C21.3031 20.5558 21.5553 20.3033 21.7306 19.9993C21.9059 19.6954 21.9981 19.3506 21.998 18.9997C21.9979 18.6488 21.9055 18.3041 21.7301 18.0002Z",
+          stroke: "#F2A800",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function ToastInfoIcon(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": true,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z",
+          stroke: "#0F52C7",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function ToastIconBadge({
+  tone,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `homepad-toast__icon-badge homepad-toast__icon-badge--${tone}`, children });
+}
+var homepadToastIcons = {
+  success: /* @__PURE__ */ jsxRuntime.jsx(ToastIconBadge, { tone: "success", children: /* @__PURE__ */ jsxRuntime.jsx(ToastSuccessIcon, {}) }),
+  error: /* @__PURE__ */ jsxRuntime.jsx(ToastIconBadge, { tone: "error", children: /* @__PURE__ */ jsxRuntime.jsx(ToastErrorIcon, {}) }),
+  warning: /* @__PURE__ */ jsxRuntime.jsx(ToastIconBadge, { tone: "warning", children: /* @__PURE__ */ jsxRuntime.jsx(ToastWarningIcon, {}) }),
+  info: /* @__PURE__ */ jsxRuntime.jsx(ToastIconBadge, { tone: "info", children: /* @__PURE__ */ jsxRuntime.jsx(ToastInfoIcon, {}) }),
+  close: /* @__PURE__ */ jsxRuntime.jsx(ToastCloseIcon, {})
+};
+function Toaster({
+  className,
+  position = "bottom-right",
+  theme = "light",
+  closeButton = true,
+  gap = 12,
+  offset = 20,
+  toastOptions,
+  icons,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    sonner.Toaster,
+    {
+      className: ["homepad-toaster", className].filter(Boolean).join(" "),
+      theme,
+      position,
+      closeButton,
+      gap,
+      offset,
+      mobileOffset: 8,
+      icons: { ...homepadToastIcons, ...icons },
+      toastOptions: {
+        duration: 4e3,
+        classNames: {
+          toast: "homepad-toast",
+          title: "homepad-toast__title",
+          description: "homepad-toast__description",
+          content: "homepad-toast__content",
+          icon: "homepad-toast__icon",
+          closeButton: "homepad-toast__close",
+          ...toastOptions?.classNames
+        },
+        ...toastOptions
+      },
+      ...props
+    }
+  );
+}
+function ToasterProvider() {
+  return /* @__PURE__ */ jsxRuntime.jsx(Toaster, {});
+}
+
+// src/web/mutation-toast.ts
+async function runMutationWithToast(action, messages, options) {
+  try {
+    await action();
+    sonner.toast.success(messages.success);
+    return { success: true };
+  } catch (error) {
+    const errorMessage = options?.getErrorMessage?.(error) ?? messages.error;
+    sonner.toast.error(errorMessage);
+    return { success: false, errorMessage };
+  }
 }
 function ConfirmModal({
   open,
@@ -31152,7 +31546,7 @@ function ConfirmModal({
                 "h2",
                 {
                   id: "homepad-confirm-modal-title",
-                  className: "font-sans text-xl font-bold leading-6.75 tracking-normal text-black",
+                  className: "typography-title tracking-normal text-black",
                   children: title
                 }
               ),
@@ -31160,7 +31554,7 @@ function ConfirmModal({
                 "div",
                 {
                   id: "homepad-confirm-modal-description",
-                  className: "text-center font-sans text-sm font-normal leading-4.75 tracking-normal text-storm-gray-400",
+                  className: "text-center typography-body tracking-normal text-storm-gray-400",
                   children: description
                 }
               )
@@ -31257,6 +31651,10 @@ react-dom/cjs/react-dom.development.js:
    *)
 */
 
+Object.defineProperty(exports, "toast", {
+  enumerable: true,
+  get: function () { return sonner.toast; }
+});
 exports.AppHeader = AppHeader;
 exports.Badge = Badge;
 exports.BellIcon = BellIcon;
@@ -31266,6 +31664,8 @@ exports.ConfirmModal = ConfirmModal;
 exports.DEFAULT_TABLE_BODY_MIN_HEIGHT = DEFAULT_TABLE_BODY_MIN_HEIGHT;
 exports.DashboardLayout = DashboardLayout;
 exports.DataTable = DataTable;
+exports.Drawer = Drawer;
+exports.HistoryTimeline = HistoryTimeline;
 exports.Modal = Modal;
 exports.Pagination = Pagination;
 exports.Sidebar = Sidebar;
@@ -31296,10 +31696,13 @@ exports.TableRowStatusActions = TableRowStatusActions;
 exports.TableScrollArea = TableScrollArea;
 exports.TableSortIcon = TableSortIcon;
 exports.TableStatusActionsCell = TableStatusActionsCell;
+exports.Toaster = Toaster;
+exports.ToasterProvider = ToasterProvider;
 exports.cn = cn;
 exports.getPaginationRange = getPaginationRange;
 exports.getTotalPages = getTotalPages;
 exports.getVisiblePageNumbers = getVisiblePageNumbers;
+exports.runMutationWithToast = runMutationWithToast;
 exports.tableRowDisabledCellClassName = tableRowDisabledCellClassName;
 exports.useMediaQuery = useMediaQuery;
 exports.useOnClickOutside = useOnClickOutside;