@cerberus-design/react 0.13.1-next-e3e9e48 → 0.13.1-next-d1e87c5

package/build/legacy/index.cjs

@@ -1360,7 +1360,6 @@ function ModalHeader(props) {
         (0, import_patterns9.vstack)({
           alignItems: "flex-start",
           gap: "md",
-          mb: "md",
           position: "relative"
         })
       )
@@ -2376,6 +2375,7 @@ function useModal() {
 }
 
 // src/context/confirm-modal.tsx
+var import_jsx = require("@cerberus/styled-system/jsx");
 var import_jsx_runtime50 = require("react/jsx-runtime");
 var ConfirmModalContext = (0, import_react17.createContext)(null);
 function ConfirmModal(props) {
@@ -2384,9 +2384,10 @@ function ConfirmModal(props) {
   const [content, setContent] = (0, import_react17.useState)(null);
   const focusTrap = trapFocus(modalRef);
   const ConfirmIcon = $cerberusIcons.confirmModal;
+  const kind = (content == null ? void 0 : content.kind) ?? "non-destructive";
   const palette = (0, import_react17.useMemo)(
-    () => (content == null ? void 0 : content.kind) === "destructive" ? "danger" : "action",
-    [content]
+    () => kind === "destructive" ? "danger" : "action",
+    [kind]
   );
   const handleChoice = (0, import_react17.useCallback)(
     (e) => {
@@ -2403,7 +2404,7 @@ function ConfirmModal(props) {
   const handleShow = (0, import_react17.useCallback)(
     (options) => {
       return new Promise((resolve) => {
-        setContent({ ...options, kind: options.kind || "non-destructive" });
+        setContent({ ...options });
         show();
         resolveRef.current = resolve;
       });
@@ -2418,7 +2419,7 @@ function ConfirmModal(props) {
   );
   return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(ConfirmModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx.VStack, { gap: "xl", w: "full", children: [
       /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(ModalHeader, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           "div",
@@ -2456,44 +2457,36 @@ function ConfirmModal(props) {
         /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
         /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
-        "div",
-        {
-          className: (0, import_patterns16.hstack)({
-            gap: "4"
-          }),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-              Button,
-              {
-                autoFocus: true,
-                className: (0, import_css42.css)({
-                  w: "1/2"
-                }),
-                name: "confirm",
-                onClick: handleChoice,
-                palette,
-                value: "true",
-                children: content == null ? void 0 : content.actionText
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-              Button,
-              {
-                className: (0, import_css42.css)({
-                  w: "1/2"
-                }),
-                name: "cancel",
-                onClick: handleChoice,
-                usage: "outlined",
-                value: "false",
-                children: content == null ? void 0 : content.cancelText
-              }
-            )
-          ]
-        }
-      )
-    ] }) })
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx.HStack, { gap: "4", w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          Button,
+          {
+            autoFocus: true,
+            className: (0, import_css42.css)({
+              w: "1/2"
+            }),
+            name: "confirm",
+            onClick: handleChoice,
+            palette,
+            value: "true",
+            children: content == null ? void 0 : content.actionText
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          Button,
+          {
+            className: (0, import_css42.css)({
+              w: "1/2"
+            }),
+            name: "cancel",
+            onClick: handleChoice,
+            usage: "outlined",
+            value: "false",
+            children: content == null ? void 0 : content.cancelText
+          }
+        )
+      ] })
+    ] }) }) })
   ] });
 }
 function useConfirmModal() {
@@ -2508,9 +2501,9 @@ function useConfirmModal() {
 
 // src/context/cta-modal.tsx
 var import_react18 = require("react");
-var import_jsx = require("@cerberus/styled-system/jsx");
-var import_css43 = require("@cerberus/styled-system/css");
 var import_jsx2 = require("@cerberus/styled-system/jsx");
+var import_css43 = require("@cerberus/styled-system/css");
+var import_jsx3 = require("@cerberus/styled-system/jsx");
 var import_jsx_runtime51 = require("react/jsx-runtime");
 var CTAModalContext = (0, import_react18.createContext)(null);
 function CTAModal(props) {
@@ -2567,42 +2560,42 @@ function CTAModal(props) {
           children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(IconButton, { ariaLabel: "Close modal", onClick: close, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(CloseIcon, {}) })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(ModalHeader, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx.HStack, { justify: "center", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-          Avatar,
-          {
-            ariaLabel: "",
-            gradient: "charon-light",
-            icon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-              Show,
-              {
-                when: Boolean(confirmIcon),
-                fallback: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(FallbackIcon, { size: 24 }),
-                children: confirmIcon
-              }
-            ),
-            src: ""
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx2.VStack, { gap: "lg", w: "full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx3.VStack, { gap: "xl", w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ModalHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx3.VStack, { gap: "lg", w: "full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+            Avatar,
+            {
+              ariaLabel: "",
+              gradient: "charon-light",
+              icon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                Show,
+                {
+                  when: Boolean(confirmIcon),
+                  fallback: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(FallbackIcon, { size: 24 }),
+                  children: confirmIcon
+                }
+              ),
+              src: ""
+            }
+          ),
           /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
           /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx.HStack, { gap: "md", pt: "sm", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Show, { when: Boolean((_a = content == null ? void 0 : content.actions) == null ? void 0 : _a.length), children: (_b = content == null ? void 0 : content.actions) == null ? void 0 : _b.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-        Button,
-        {
-          "data-index": index,
-          className: (0, import_css43.css)({
-            w: "1/2"
-          }),
-          onClick: handleActionClick,
-          shape: "rounded",
-          usage: "outlined",
-          children: action.text
-        },
-        index
-      )) }) })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx2.HStack, { gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Show, { when: Boolean((_a = content == null ? void 0 : content.actions) == null ? void 0 : _a.length), children: (_b = content == null ? void 0 : content.actions) == null ? void 0 : _b.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          Button,
+          {
+            "data-index": index,
+            className: (0, import_css43.css)({
+              w: "1/2"
+            }),
+            onClick: handleActionClick,
+            shape: "rounded",
+            usage: "outlined",
+            children: action.text
+          },
+          index
+        )) }) })
+      ] })
     ] }) })
   ] });
 }