@12-apps/ui 6.53.0 → 6.54.0

package/dist/chunk-IQQX3NDO.js

@@ -0,0 +1,96 @@
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/AlertDialog/AlertDialog.parts.tsx
+import Button from "@mui/material/Button/index.js";
+import CircularProgress from "@mui/material/CircularProgress/index.js";
+import DialogActions from "@mui/material/DialogActions/index.js";
+import { styled, useTheme } from "@mui/material/styles/index.js";
+import { jsx } from "react/jsx-runtime";
+var StyledDialogActions = styled(DialogActions, {
+  shouldForwardProp: (prop) => prop !== "fill"
+})(({ theme, fill }) => ({
+  padding: theme.spacing(2, 3, 3, 3),
+  flexWrap: "wrap-reverse",
+  columnGap: theme.spacing(2),
+  rowGap: theme.spacing(1),
+  ...fill && { "& > .MuiButton-root": { flexGrow: 1 } }
+}));
+var confirmButtonColor = (variant) => variant === "destructive" ? "error" : "primary";
+var buttonLooks = (emphasis, variant) => emphasis === "cancel" ? {
+  cancel: { variant: "contained", color: "primary" },
+  confirm: { variant: "outlined", color: "inherit" }
+} : {
+  cancel: { variant: "outlined", color: "inherit" },
+  confirm: { variant: "contained", color: confirmButtonColor(variant) }
+};
+var effectiveEmphasis = (emphasis, showCancel) => emphasis === "cancel" && showCancel ? "cancel" : "confirm";
+var focusesCancel = (initialFocus, emphasis) => (initialFocus ?? emphasis) === "cancel";
+var inSlotOrder = (emphasis, cancel, confirm) => emphasis === "cancel" ? [confirm, cancel] : [cancel, confirm];
+function AlertDialogFooter({
+  variant,
+  cancelText = "Cancel",
+  confirmText = "Confirm",
+  showCancel = true,
+  loading = false,
+  confirmDisabled = false,
+  initialFocus,
+  emphasis: asked,
+  onCancel,
+  onConfirm,
+  dataTestId
+}) {
+  const theme = useTheme();
+  const emphasis = effectiveEmphasis(asked, showCancel);
+  const look = buttonLooks(emphasis, variant);
+  const cancelFocused = focusesCancel(initialFocus, emphasis);
+  const cancel = showCancel && /* @__PURE__ */ jsx(
+    Button,
+    {
+      onClick: onCancel,
+      variant: look.cancel.variant,
+      color: look.cancel.color,
+      disabled: loading,
+      autoFocus: cancelFocused,
+      "data-testid": `${dataTestId}-cancel-button`,
+      children: cancelText
+    },
+    "cancel"
+  );
+  const confirm = /* @__PURE__ */ jsx(
+    Button,
+    {
+      onClick: onConfirm,
+      variant: look.confirm.variant,
+      color: look.confirm.color,
+      disabled: confirmDisabled || loading,
+      startIcon: loading ? /* @__PURE__ */ jsx(
+        CircularProgress,
+        {
+          size: rem(theme, 16),
+          color: "inherit",
+          "data-testid": `${dataTestId}-loading-spinner`
+        }
+      ) : void 0,
+      autoFocus: !cancelFocused,
+      "data-testid": `${dataTestId}-confirm-button`,
+      children: confirmText
+    },
+    "confirm"
+  );
+  return /* @__PURE__ */ jsx(
+    StyledDialogActions,
+    {
+      disableSpacing: true,
+      fill: emphasis === "cancel",
+      "data-testid": `${dataTestId}-actions`,
+      children: inSlotOrder(emphasis, cancel, confirm)
+    }
+  );
+}
+
+export {
+  AlertDialogFooter
+};
+//# sourceMappingURL=chunk-IQQX3NDO.js.map

package/dist/chunk-IQQX3NDO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/AlertDialog/AlertDialog.parts.tsx"],"sourcesContent":["/**\n * The AlertDialog's action row, kept apart from the dialog shell so each stays\n * inside the complexity budget: which button is filled, where each one sits,\n * and how the row wraps.\n */\nimport type { ButtonProps } from '@mui/material/Button/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport DialogActions from '@mui/material/DialogActions/index.js';\nimport { styled, useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { rem } from '../../../tokens/relative';\n\nimport type { AlertDialogProps } from './AlertDialog.types';\n\n/**\n * The action row WRAPS WHOLE BUTTONS; it never breaks a label inside one. A pair\n * that did not fit side by side used to squeeze the longer label onto two\n * lines, so one button stood twice as tall as its neighbour. Now the row breaks\n * instead. `wrap-reverse` puts the LAST button — the primary, whichever\n * `emphasis` picks — on top when it stacks, the same slot it holds on the right\n * when the row fits. A pair that fits is laid out exactly as before: natural\n * widths, pushed to the right.\n *\n * `fill` — set only by `emphasis=\"cancel\"` — lets the buttons grow to share the\n * row, and so to take the full width of their line once it stacks. It is not\n * the default because growing also stretches a pair that fits, which would\n * redraw every existing dialog's footer.\n *\n * Rendered with `disableSpacing`: MUI's own spacing is a left margin on every\n * button after the first, which would indent a button that wrapped onto a line\n * of its own. The gaps below replace it, at the same 16px across.\n */\nconst StyledDialogActions = styled(DialogActions, {\n  shouldForwardProp: (prop) => prop !== 'fill',\n})<{ fill: boolean }>(({ theme, fill }) => ({\n  padding: theme.spacing(2, 3, 3, 3),\n  flexWrap: 'wrap-reverse',\n  columnGap: theme.spacing(2),\n  rowGap: theme.spacing(1),\n  ...(fill && { '& > .MuiButton-root': { flexGrow: 1 } }),\n}));\n\nconst confirmButtonColor = (variant: AlertDialogProps['variant']): 'error' | 'primary' =>\n  variant === 'destructive' ? 'error' : 'primary';\n\ninterface ButtonLook {\n  variant: ButtonProps['variant'];\n  color: ButtonProps['color'];\n}\n\n/**\n * How each button is drawn, by `emphasis`: the emphasised one is filled, the\n * other a NEUTRAL outline. Primary / neutral both ways round — a confirm that\n * steps down drops the variant's colour too, so the one filled button is the\n * only coloured thing in the row and the eye has a single place to land.\n */\nconst buttonLooks = (\n  emphasis: AlertDialogProps['emphasis'],\n  variant: AlertDialogProps['variant'],\n): { cancel: ButtonLook; confirm: ButtonLook } =>\n  emphasis === 'cancel'\n    ? {\n        cancel: { variant: 'contained', color: 'primary' },\n        confirm: { variant: 'outlined', color: 'inherit' },\n      }\n    : {\n        cancel: { variant: 'outlined', color: 'inherit' },\n        confirm: { variant: 'contained', color: confirmButtonColor(variant) },\n      };\n\n/**\n * The emphasis that applies: `cancel` only while the cancel is shown. A hidden\n * cancel with the confirm stepped down would leave a dialog with no primary.\n */\nconst effectiveEmphasis = (\n  emphasis: AlertDialogProps['emphasis'],\n  showCancel: boolean,\n): NonNullable<AlertDialogProps['emphasis']> =>\n  emphasis === 'cancel' && showCancel ? 'cancel' : 'confirm';\n\n/**\n * Whether the cancel owns focus on open: what `initialFocus` says, and when it\n * says nothing, the emphasised button — so Enter on a steered question keeps\n * the work instead of completing the loss.\n */\nconst focusesCancel = (\n  initialFocus: AlertDialogProps['initialFocus'],\n  emphasis: NonNullable<AlertDialogProps['emphasis']>,\n): boolean => (initialFocus ?? emphasis) === 'cancel';\n\n/** The two buttons in slot order: the emphasised one LAST, the primary slot. */\nconst inSlotOrder = (\n  emphasis: AlertDialogProps['emphasis'],\n  cancel: React.ReactNode,\n  confirm: React.ReactNode,\n): React.ReactNode[] => (emphasis === 'cancel' ? [confirm, cancel] : [cancel, confirm]);\n\n/**\n * Action row: the optional cancel button and the (variant-coloured) confirm,\n * with the emphasised one LAST — the primary slot, on the right or, once the\n * row stacks, on top. DOM order is the tab order, so it follows the same rule.\n */\nexport function AlertDialogFooter({\n  variant,\n  cancelText = 'Cancel',\n  confirmText = 'Confirm',\n  showCancel = true,\n  loading = false,\n  confirmDisabled = false,\n  initialFocus,\n  emphasis: asked,\n  onCancel,\n  onConfirm,\n  dataTestId,\n}: Pick<\n  AlertDialogProps,\n  | 'variant'\n  | 'cancelText'\n  | 'confirmText'\n  | 'showCancel'\n  | 'loading'\n  | 'confirmDisabled'\n  | 'initialFocus'\n  | 'emphasis'\n> & {\n  onCancel: () => void;\n  onConfirm: () => void;\n  dataTestId: string;\n}): React.ReactElement {\n  const theme = useTheme();\n  const emphasis = effectiveEmphasis(asked, showCancel);\n  const look = buttonLooks(emphasis, variant);\n  const cancelFocused = focusesCancel(initialFocus, emphasis);\n  const cancel = showCancel && (\n    <Button\n      key=\"cancel\"\n      onClick={onCancel}\n      variant={look.cancel.variant}\n      color={look.cancel.color}\n      disabled={loading}\n      autoFocus={cancelFocused}\n      data-testid={`${dataTestId}-cancel-button`}\n    >\n      {cancelText}\n    </Button>\n  );\n  const confirm = (\n    <Button\n      key=\"confirm\"\n      onClick={onConfirm}\n      variant={look.confirm.variant}\n      color={look.confirm.color}\n      disabled={confirmDisabled || loading}\n      startIcon={\n        loading ? (\n          <CircularProgress\n            size={rem(theme, 16)}\n            color=\"inherit\"\n            data-testid={`${dataTestId}-loading-spinner`}\n          />\n        ) : undefined\n      }\n      autoFocus={!cancelFocused}\n      data-testid={`${dataTestId}-confirm-button`}\n    >\n      {confirmText}\n    </Button>\n  );\n  return (\n    <StyledDialogActions\n      disableSpacing\n      fill={emphasis === 'cancel'}\n      data-testid={`${dataTestId}-actions`}\n    >\n      {inSlotOrder(emphasis, cancel, confirm)}\n    </StyledDialogActions>\n  );\n}\n"],"mappings":";;;;;AAMA,OAAO,YAAY;AACnB,OAAO,sBAAsB;AAC7B,OAAO,mBAAmB;AAC1B,SAAS,QAAQ,gBAAgB;AA+H7B;AAtGJ,IAAM,sBAAsB,OAAO,eAAe;AAAA,EAChD,mBAAmB,CAAC,SAAS,SAAS;AACxC,CAAC,EAAqB,CAAC,EAAE,OAAO,KAAK,OAAO;AAAA,EAC1C,SAAS,MAAM,QAAQ,GAAG,GAAG,GAAG,CAAC;AAAA,EACjC,UAAU;AAAA,EACV,WAAW,MAAM,QAAQ,CAAC;AAAA,EAC1B,QAAQ,MAAM,QAAQ,CAAC;AAAA,EACvB,GAAI,QAAQ,EAAE,uBAAuB,EAAE,UAAU,EAAE,EAAE;AACvD,EAAE;AAEF,IAAM,qBAAqB,CAAC,YAC1B,YAAY,gBAAgB,UAAU;AAaxC,IAAM,cAAc,CAClB,UACA,YAEA,aAAa,WACT;AAAA,EACE,QAAQ,EAAE,SAAS,aAAa,OAAO,UAAU;AAAA,EACjD,SAAS,EAAE,SAAS,YAAY,OAAO,UAAU;AACnD,IACA;AAAA,EACE,QAAQ,EAAE,SAAS,YAAY,OAAO,UAAU;AAAA,EAChD,SAAS,EAAE,SAAS,aAAa,OAAO,mBAAmB,OAAO,EAAE;AACtE;AAMN,IAAM,oBAAoB,CACxB,UACA,eAEA,aAAa,YAAY,aAAa,WAAW;AAOnD,IAAM,gBAAgB,CACpB,cACA,cACa,gBAAgB,cAAc;AAG7C,IAAM,cAAc,CAClB,UACA,QACA,YACuB,aAAa,WAAW,CAAC,SAAS,MAAM,IAAI,CAAC,QAAQ,OAAO;AAO9E,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA,aAAa;AAAA,EACb,cAAc;AAAA,EACd,aAAa;AAAA,EACb,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AACF,GAcuB;AACrB,QAAM,QAAQ,SAAS;AACvB,QAAM,WAAW,kBAAkB,OAAO,UAAU;AACpD,QAAM,OAAO,YAAY,UAAU,OAAO;AAC1C,QAAM,gBAAgB,cAAc,cAAc,QAAQ;AAC1D,QAAM,SAAS,cACb;AAAA,IAAC;AAAA;AAAA,MAEC,SAAS;AAAA,MACT,SAAS,KAAK,OAAO;AAAA,MACrB,OAAO,KAAK,OAAO;AAAA,MACnB,UAAU;AAAA,MACV,WAAW;AAAA,MACX,eAAa,GAAG,UAAU;AAAA,MAEzB;AAAA;AAAA,IARG;AAAA,EASN;AAEF,QAAM,UACJ;AAAA,IAAC;AAAA;AAAA,MAEC,SAAS;AAAA,MACT,SAAS,KAAK,QAAQ;AAAA,MACtB,OAAO,KAAK,QAAQ;AAAA,MACpB,UAAU,mBAAmB;AAAA,MAC7B,WACE,UACE;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,IAAI,OAAO,EAAE;AAAA,UACnB,OAAM;AAAA,UACN,eAAa,GAAG,UAAU;AAAA;AAAA,MAC5B,IACE;AAAA,MAEN,WAAW,CAAC;AAAA,MACZ,eAAa,GAAG,UAAU;AAAA,MAEzB;AAAA;AAAA,IAjBG;AAAA,EAkBN;AAEF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAc;AAAA,MACd,MAAM,aAAa;AAAA,MACnB,eAAa,GAAG,UAAU;AAAA,MAEzB,sBAAY,UAAU,QAAQ,OAAO;AAAA;AAAA,EACxC;AAEJ;","names":[]}

package/dist/{chunk-4WCDMCIS.js → chunk-PI3GPLE2.js}

@@ -1,6 +1,6 @@
 import {
   ConfirmActionDialog
-} from "./chunk-BJZOBG24.js";
+} from "./chunk-UJHXEOU3.js";
 import {
   useConfirmAction
 } from "./chunk-EMYESBIT.js";
@@ -40,4 +40,4 @@ function withConfirmation(Wrapped, defaults) {
 export {
   withConfirmation
 };
-//# sourceMappingURL=chunk-4WCDMCIS.js.map
+//# sourceMappingURL=chunk-PI3GPLE2.js.map

package/dist/{chunk-FWPFCK4D.js → chunk-S6G3CJFP.js}

@@ -1,6 +1,6 @@
 import {
   ConfirmActionDialog
-} from "./chunk-BJZOBG24.js";
+} from "./chunk-UJHXEOU3.js";
 import {
   useConfirmAction
 } from "./chunk-EMYESBIT.js";
@@ -23,4 +23,4 @@ ConfirmAction.displayName = "ConfirmAction";
 export {
   ConfirmAction
 };
-//# sourceMappingURL=chunk-FWPFCK4D.js.map
+//# sourceMappingURL=chunk-S6G3CJFP.js.map

package/dist/{chunk-BJZOBG24.js → chunk-UJHXEOU3.js}

@@ -1,6 +1,6 @@
 import {
   AlertDialog
-} from "./chunk-OG6LYQ7C.js";
+} from "./chunk-4PFKMNLP.js";
 
 // src/components/feedback/ConfirmAction/ConfirmAction.parts.tsx
 import Alert from "@mui/material/Alert/index.js";
@@ -104,4 +104,4 @@ function ConfirmActionDialog({
 export {
   ConfirmActionDialog
 };
-//# sourceMappingURL=chunk-BJZOBG24.js.map
+//# sourceMappingURL=chunk-UJHXEOU3.js.map

package/dist/{chunk-U4QUDFPJ.js → chunk-VKVOP4OK.js}

@@ -1,6 +1,6 @@
 import {
   ConfirmActionDialog
-} from "./chunk-BJZOBG24.js";
+} from "./chunk-UJHXEOU3.js";
 import {
   useConfirmAction
 } from "./chunk-EMYESBIT.js";
@@ -43,4 +43,4 @@ function useRowConfirm({
 export {
   useRowConfirm
 };
-//# sourceMappingURL=chunk-U4QUDFPJ.js.map
+//# sourceMappingURL=chunk-VKVOP4OK.js.map

package/dist/data-display/AlertDialog.js

@@ -1,7 +1,8 @@
 import "../chunk-2IBFEHIX.js";
 import {
   AlertDialog
-} from "../chunk-OG6LYQ7C.js";
+} from "../chunk-4PFKMNLP.js";
+import "../chunk-IQQX3NDO.js";
 import "../chunk-FQ6UW7IY.js";
 import "../chunk-6JAIFIPW.js";
 import "../chunk-N3GAFIXG.js";

package/dist/data-display/CardKit.js

@@ -1,6 +1,6 @@
 import {
   useRemoveConfirm
-} from "../chunk-QOLIBVGS.js";
+} from "../chunk-3CIIB74Y.js";
 import {
   rowActionsToMenuItems
 } from "../chunk-ZBXG6RVJ.js";
@@ -20,21 +20,22 @@ import {
 } from "../chunk-2NIQSL7M.js";
 import {
   useRowConfirm
-} from "../chunk-U4QUDFPJ.js";
+} from "../chunk-VKVOP4OK.js";
 import "../chunk-WVML3ENZ.js";
 import "../chunk-U3DBQXPI.js";
 import "../chunk-XCBQXSTR.js";
-import "../chunk-3GVMUASU.js";
-import "../chunk-FWPFCK4D.js";
-import "../chunk-4WCDMCIS.js";
-import "../chunk-BJZOBG24.js";
+import "../chunk-HV7HIMMY.js";
+import "../chunk-S6G3CJFP.js";
+import "../chunk-PI3GPLE2.js";
+import "../chunk-UJHXEOU3.js";
 import "../chunk-EMYESBIT.js";
 import "../chunk-NUGT7LMR.js";
 import "../chunk-AUHYR7ID.js";
 import "../chunk-MO47Y26B.js";
 import "../chunk-L7VH6IMR.js";
 import "../chunk-2IBFEHIX.js";
-import "../chunk-OG6LYQ7C.js";
+import "../chunk-4PFKMNLP.js";
+import "../chunk-IQQX3NDO.js";
 import "../chunk-P2UIXDEG.js";
 import "../chunk-6DPAWXZ3.js";
 import "../chunk-BA4RHQ3B.js";

package/dist/data-display/DataViews.js

@@ -3,7 +3,7 @@ import {
 } from "../chunk-UNEJ4MUR.js";
 import {
   DataViewsTableBase
-} from "../chunk-OT3KFZRE.js";
+} from "../chunk-7WWPKA7Y.js";
 import "../chunk-67LNVBFO.js";
 import {
   DataViewsGrid
@@ -48,9 +48,9 @@ import "../chunk-EIY5EYO3.js";
 import "../chunk-I32M7WNL.js";
 import "../chunk-QZY5NG5N.js";
 import "../chunk-O5UGAL2V.js";
-import "../chunk-HCEJT65A.js";
+import "../chunk-HKD4TDZP.js";
 import "../chunk-4E4MSUY5.js";
-import "../chunk-JUHNEYCH.js";
+import "../chunk-GCH7CLM4.js";
 import "../chunk-5M4TYFR3.js";
 import "../chunk-IM5SR7G2.js";
 import "../chunk-X3DVZNZH.js";
@@ -158,10 +158,10 @@ import "../chunk-JU3FRRO2.js";
 import "../chunk-C3UKR3NT.js";
 import "../chunk-D6KL74KI.js";
 import "../chunk-XCBQXSTR.js";
-import "../chunk-3GVMUASU.js";
-import "../chunk-FWPFCK4D.js";
-import "../chunk-4WCDMCIS.js";
-import "../chunk-BJZOBG24.js";
+import "../chunk-HV7HIMMY.js";
+import "../chunk-S6G3CJFP.js";
+import "../chunk-PI3GPLE2.js";
+import "../chunk-UJHXEOU3.js";
 import "../chunk-EMYESBIT.js";
 import "../chunk-KFJKOVDD.js";
 import "../chunk-MQ277OLB.js";
@@ -190,7 +190,8 @@ import "../chunk-AUHYR7ID.js";
 import "../chunk-MO47Y26B.js";
 import "../chunk-L7VH6IMR.js";
 import "../chunk-2IBFEHIX.js";
-import "../chunk-OG6LYQ7C.js";
+import "../chunk-4PFKMNLP.js";
+import "../chunk-IQQX3NDO.js";
 import "../chunk-3UIDKLML.js";
 import "../chunk-PYC4CWCQ.js";
 import "../chunk-P2UIXDEG.js";

package/dist/feedback/ConfirmAction.js

@@ -1,21 +1,22 @@
 import "../chunk-XCBQXSTR.js";
 import {
   createConfirmButton
-} from "../chunk-3GVMUASU.js";
+} from "../chunk-HV7HIMMY.js";
 import {
   ConfirmAction
-} from "../chunk-FWPFCK4D.js";
+} from "../chunk-S6G3CJFP.js";
 import {
   withConfirmation
-} from "../chunk-4WCDMCIS.js";
+} from "../chunk-PI3GPLE2.js";
 import {
   ConfirmActionDialog
-} from "../chunk-BJZOBG24.js";
+} from "../chunk-UJHXEOU3.js";
 import {
   useConfirmAction
 } from "../chunk-EMYESBIT.js";
 import "../chunk-2IBFEHIX.js";
-import "../chunk-OG6LYQ7C.js";
+import "../chunk-4PFKMNLP.js";
+import "../chunk-IQQX3NDO.js";
 import "../chunk-BA4RHQ3B.js";
 import "../chunk-RIZRF5XR.js";
 import "../chunk-LTE2QHBH.js";

package/dist/types/components/data-display/AlertDialog/AlertDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AA6R5D,eAAO,MAAM,WAAW,sGAgFvB,CAAC"}
+{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAmN5D,eAAO,MAAM,WAAW,sGA6EvB,CAAC"}

package/dist/types/components/data-display/AlertDialog/AlertDialog.parts.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { AlertDialogProps } from './AlertDialog.types';
+/**
+ * Action row: the optional cancel button and the (variant-coloured) confirm,
+ * with the emphasised one LAST — the primary slot, on the right or, once the
+ * row stacks, on top. DOM order is the tab order, so it follows the same rule.
+ */
+export declare function AlertDialogFooter({ variant, cancelText, confirmText, showCancel, loading, confirmDisabled, initialFocus, emphasis: asked, onCancel, onConfirm, dataTestId, }: Pick<AlertDialogProps, 'variant' | 'cancelText' | 'confirmText' | 'showCancel' | 'loading' | 'confirmDisabled' | 'initialFocus' | 'emphasis'> & {
+    onCancel: () => void;
+    onConfirm: () => void;
+    dataTestId: string;
+}): React.ReactElement;
+//# sourceMappingURL=AlertDialog.parts.d.ts.map

package/dist/types/components/data-display/AlertDialog/AlertDialog.parts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDialog.parts.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/AlertDialog/AlertDialog.parts.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAqF5D;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,UAAqB,EACrB,WAAuB,EACvB,UAAiB,EACjB,OAAe,EACf,eAAuB,EACvB,YAAY,EACZ,QAAQ,EAAE,KAAK,EACf,QAAQ,EACR,SAAS,EACT,UAAU,GACX,EAAE,IAAI,CACL,gBAAgB,EACd,SAAS,GACT,YAAY,GACZ,aAAa,GACb,YAAY,GACZ,SAAS,GACT,iBAAiB,GACjB,cAAc,GACd,UAAU,CACb,GAAG;IACF,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;CACpB,GAAG,KAAK,CAAC,YAAY,CAiDrB"}

package/dist/types/components/data-display/AlertDialog/AlertDialog.types.d.ts

@@ -54,11 +54,24 @@ export interface AlertDialogProps extends Omit<MuiDialogProps, 'variant'> {
      */
     confirmDisabled?: boolean;
     /**
-     * Which button owns focus when the dialog opens. Defaults to `confirm`, which
-     * is right for an acknowledgement; a destructive dialog should pass `cancel`
-     * so a stray Enter on the trigger cannot complete the action.
+     * Which button owns focus when the dialog opens. Defaults to the emphasised
+     * one — `confirm`, unless `emphasis="cancel"` — which is right for an
+     * acknowledgement; a destructive dialog should pass `cancel` so a stray Enter
+     * on the trigger cannot complete the action.
      */
     initialFocus?: 'confirm' | 'cancel';
+    /**
+     * Which button is the filled, primary one. Defaults to `confirm`. Pass
+     * `cancel` when backing out is the action to steer toward — a "discard what
+     * you wrote?" question, where the confirm is the loss: cancel is then filled
+     * and takes the primary slot (right, or on top once the row stacks), and the
+     * confirm steps down to the neutral outline cancel normally wears — primary
+     * and neutral, whatever the variant. The two buttons then grow to share the
+     * row, so once it stacks each takes its full width; focus opens on the cancel
+     * unless `initialFocus` says otherwise. With `showCancel={false}` it has no
+     * effect: the confirm keeps its default, filled look.
+     */
+    emphasis?: 'confirm' | 'cancel';
     /**
      * Optional data-testid attribute for testing
      */

package/dist/types/components/data-display/AlertDialog/AlertDialog.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialog.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/AlertDialog/AlertDialog.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,+BAA+B,CAAC;AACnF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC;IACvE;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,GAAG,OAAO,CAAC;IAE9C;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAEvB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAEpC;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB"}
+{"version":3,"file":"AlertDialog.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/AlertDialog/AlertDialog.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,+BAA+B,CAAC;AACnF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC;IACvE;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,GAAG,OAAO,CAAC;IAE9C;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAEvB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAEpC;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAEhC;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.53.0",
+  "version": "6.54.0",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",

package/src/components/data-display/AlertDialog/AlertDialog.md

@@ -34,6 +34,7 @@ The AlertDialog component provides a modal dialog for alerts, confirmations, and
 | `showCancel`      | `boolean`  | true      | Whether to show the cancel button                 |
 | `confirmDisabled` | `boolean`  | false     | Whether the confirm button is disabled            |
 | `loading`         | `boolean`  | false     | Shows loading state on confirm button             |
+| `emphasis`        | `'confirm' \| 'cancel'` | 'confirm' | Which button is filled and takes the primary slot (right, or top when the row stacks). Use `cancel` when the confirm is the loss, e.g. "discard what you wrote?": the confirm becomes the neutral outline, both buttons grow to share the row, and focus opens on the cancel. Ignored when `showCancel` is false |
 
 ### Visual Props
 
@@ -124,6 +125,35 @@ function DeleteConfirmation() {
 />
 ```
 
+### Steering Toward Cancel
+
+When confirming throws work away, make keeping it the primary action: the
+filled cancel takes the primary slot and the confirm becomes the neutral
+outline — primary and neutral, even on the destructive variant.
+
+```tsx
+<AlertDialog
+  open={open}
+  variant="destructive"
+  emphasis="cancel"
+  initialFocus="cancel"
+  title="Discard this order?"
+  description="You have already written 3 items."
+  confirmText="Discard"
+  cancelText="Keep writing"
+  onConfirm={handleDiscard}
+  onCancel={() => setOpen(false)}
+  onClose={() => setOpen(false)}
+/>
+```
+
+### Button Layout
+
+The action row wraps whole buttons and never breaks a label inside one. A pair
+that fits keeps its natural widths, pushed to the right; a pair that does not
+stacks, with the primary on top. With `emphasis="cancel"` the two buttons also
+grow to share the row, so stacked they take its full width.
+
 ### Without Cancel Button
 
 ```tsx

package/src/components/data-display/AlertDialog/AlertDialog.parts.tsx

@@ -0,0 +1,180 @@
+/**
+ * The AlertDialog's action row, kept apart from the dialog shell so each stays
+ * inside the complexity budget: which button is filled, where each one sits,
+ * and how the row wraps.
+ */
+import type { ButtonProps } from '@mui/material/Button/index.js';
+import Button from '@mui/material/Button/index.js';
+import CircularProgress from '@mui/material/CircularProgress/index.js';
+import DialogActions from '@mui/material/DialogActions/index.js';
+import { styled, useTheme } from '@mui/material/styles/index.js';
+import React from 'react';
+
+import { rem } from '../../../tokens/relative';
+
+import type { AlertDialogProps } from './AlertDialog.types';
+
+/**
+ * The action row WRAPS WHOLE BUTTONS; it never breaks a label inside one. A pair
+ * that did not fit side by side used to squeeze the longer label onto two
+ * lines, so one button stood twice as tall as its neighbour. Now the row breaks
+ * instead. `wrap-reverse` puts the LAST button — the primary, whichever
+ * `emphasis` picks — on top when it stacks, the same slot it holds on the right
+ * when the row fits. A pair that fits is laid out exactly as before: natural
+ * widths, pushed to the right.
+ *
+ * `fill` — set only by `emphasis="cancel"` — lets the buttons grow to share the
+ * row, and so to take the full width of their line once it stacks. It is not
+ * the default because growing also stretches a pair that fits, which would
+ * redraw every existing dialog's footer.
+ *
+ * Rendered with `disableSpacing`: MUI's own spacing is a left margin on every
+ * button after the first, which would indent a button that wrapped onto a line
+ * of its own. The gaps below replace it, at the same 16px across.
+ */
+const StyledDialogActions = styled(DialogActions, {
+  shouldForwardProp: (prop) => prop !== 'fill',
+})<{ fill: boolean }>(({ theme, fill }) => ({
+  padding: theme.spacing(2, 3, 3, 3),
+  flexWrap: 'wrap-reverse',
+  columnGap: theme.spacing(2),
+  rowGap: theme.spacing(1),
+  ...(fill && { '& > .MuiButton-root': { flexGrow: 1 } }),
+}));
+
+const confirmButtonColor = (variant: AlertDialogProps['variant']): 'error' | 'primary' =>
+  variant === 'destructive' ? 'error' : 'primary';
+
+interface ButtonLook {
+  variant: ButtonProps['variant'];
+  color: ButtonProps['color'];
+}
+
+/**
+ * How each button is drawn, by `emphasis`: the emphasised one is filled, the
+ * other a NEUTRAL outline. Primary / neutral both ways round — a confirm that
+ * steps down drops the variant's colour too, so the one filled button is the
+ * only coloured thing in the row and the eye has a single place to land.
+ */
+const buttonLooks = (
+  emphasis: AlertDialogProps['emphasis'],
+  variant: AlertDialogProps['variant'],
+): { cancel: ButtonLook; confirm: ButtonLook } =>
+  emphasis === 'cancel'
+    ? {
+        cancel: { variant: 'contained', color: 'primary' },
+        confirm: { variant: 'outlined', color: 'inherit' },
+      }
+    : {
+        cancel: { variant: 'outlined', color: 'inherit' },
+        confirm: { variant: 'contained', color: confirmButtonColor(variant) },
+      };
+
+/**
+ * The emphasis that applies: `cancel` only while the cancel is shown. A hidden
+ * cancel with the confirm stepped down would leave a dialog with no primary.
+ */
+const effectiveEmphasis = (
+  emphasis: AlertDialogProps['emphasis'],
+  showCancel: boolean,
+): NonNullable<AlertDialogProps['emphasis']> =>
+  emphasis === 'cancel' && showCancel ? 'cancel' : 'confirm';
+
+/**
+ * Whether the cancel owns focus on open: what `initialFocus` says, and when it
+ * says nothing, the emphasised button — so Enter on a steered question keeps
+ * the work instead of completing the loss.
+ */
+const focusesCancel = (
+  initialFocus: AlertDialogProps['initialFocus'],
+  emphasis: NonNullable<AlertDialogProps['emphasis']>,
+): boolean => (initialFocus ?? emphasis) === 'cancel';
+
+/** The two buttons in slot order: the emphasised one LAST, the primary slot. */
+const inSlotOrder = (
+  emphasis: AlertDialogProps['emphasis'],
+  cancel: React.ReactNode,
+  confirm: React.ReactNode,
+): React.ReactNode[] => (emphasis === 'cancel' ? [confirm, cancel] : [cancel, confirm]);
+
+/**
+ * Action row: the optional cancel button and the (variant-coloured) confirm,
+ * with the emphasised one LAST — the primary slot, on the right or, once the
+ * row stacks, on top. DOM order is the tab order, so it follows the same rule.
+ */
+export function AlertDialogFooter({
+  variant,
+  cancelText = 'Cancel',
+  confirmText = 'Confirm',
+  showCancel = true,
+  loading = false,
+  confirmDisabled = false,
+  initialFocus,
+  emphasis: asked,
+  onCancel,
+  onConfirm,
+  dataTestId,
+}: Pick<
+  AlertDialogProps,
+  | 'variant'
+  | 'cancelText'
+  | 'confirmText'
+  | 'showCancel'
+  | 'loading'
+  | 'confirmDisabled'
+  | 'initialFocus'
+  | 'emphasis'
+> & {
+  onCancel: () => void;
+  onConfirm: () => void;
+  dataTestId: string;
+}): React.ReactElement {
+  const theme = useTheme();
+  const emphasis = effectiveEmphasis(asked, showCancel);
+  const look = buttonLooks(emphasis, variant);
+  const cancelFocused = focusesCancel(initialFocus, emphasis);
+  const cancel = showCancel && (
+    <Button
+      key="cancel"
+      onClick={onCancel}
+      variant={look.cancel.variant}
+      color={look.cancel.color}
+      disabled={loading}
+      autoFocus={cancelFocused}
+      data-testid={`${dataTestId}-cancel-button`}
+    >
+      {cancelText}
+    </Button>
+  );
+  const confirm = (
+    <Button
+      key="confirm"
+      onClick={onConfirm}
+      variant={look.confirm.variant}
+      color={look.confirm.color}
+      disabled={confirmDisabled || loading}
+      startIcon={
+        loading ? (
+          <CircularProgress
+            size={rem(theme, 16)}
+            color="inherit"
+            data-testid={`${dataTestId}-loading-spinner`}
+          />
+        ) : undefined
+      }
+      autoFocus={!cancelFocused}
+      data-testid={`${dataTestId}-confirm-button`}
+    >
+      {confirmText}
+    </Button>
+  );
+  return (
+    <StyledDialogActions
+      disableSpacing
+      fill={emphasis === 'cancel'}
+      data-testid={`${dataTestId}-actions`}
+    >
+      {inSlotOrder(emphasis, cancel, confirm)}
+    </StyledDialogActions>
+  );
+}