@12-apps/ui 6.53.0 → 6.54.1

package/dist/chunk-KRIPQUFB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Tooltip/Tooltip.tsx"],"sourcesContent":["import MuiTooltip from \"@mui/material/Tooltip/index.js\";\nimport { alpha, keyframes } from \"@mui/material/styles/index.js\";\nimport type { CSSObject, Theme } from \"@mui/material/styles/index.js\";\nimport React from \"react\";\n\nimport type { TooltipProps } from \"./Tooltip.types\";\nimport { absoluteInk, neutralTones } from \"../../../tokens/ink\";\nimport { rem, rems, sxRem } from \"../../../tokens/relative\";\n\n// Define pulse animation\nconst pulseAnimation = keyframes`\n  0% {\n    transform: scale(1);\n    opacity: 1;\n  }\n  70% {\n    transform: scale(1.05);\n    opacity: 0.8;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n`;\n\nconst SIZE_MAP = {\n  sm: { fontSize: sxRem(12), padding: (theme: Theme) => rems(theme, 4, 8) },\n  md: { fontSize: sxRem(14), padding: (theme: Theme) => rems(theme, 6, 12) },\n  lg: { fontSize: sxRem(16), padding: (theme: Theme) => rems(theme, 8, 16) },\n} as const;\n\nconst getSizeStyles = (\n  size?: string,\n): { fontSize: (theme: Theme) => string; padding: (theme: Theme) => string } =>\n  SIZE_MAP[size as keyof typeof SIZE_MAP] || SIZE_MAP.md;\n\nconst variantStyles = (theme: Theme, variant?: string): CSSObject => {\n  switch (variant) {\n    case \"default\":\n      return {\n        backgroundColor: neutralTones(theme).inverseSurface,\n        color: absoluteInk(theme).white,\n      };\n    case \"dark\":\n      return {\n        backgroundColor: neutralTones(theme).inverseSurface,\n        color: absoluteInk(theme).white,\n      };\n    case \"light\":\n      return {\n        backgroundColor: absoluteInk(theme).white,\n        color: theme.palette.text.primary,\n        border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n        boxShadow: theme.shadows[4],\n      };\n    case \"glass\":\n      return {\n        backgroundColor: alpha(theme.palette.background.paper, 0.1),\n        backdropFilter: `blur(${rem(theme, 20)})`,\n        border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n        color: theme.palette.text.primary,\n      };\n    default:\n      return {};\n  }\n};\n\n// glow and pulse are independent flags. The three combinations used to be spelled\n// out one by one, but each is just the union of whichever flags are set.\nconst emphasisStyles = (\n  theme: Theme,\n  glow?: boolean,\n  pulse?: boolean,\n): CSSObject => ({\n  ...(glow && {\n    boxShadow: `${rems(theme, 0, 0, 15, 3)} ${alpha(theme.palette.primary.main, 0.4)} !important`,\n    filter: \"brightness(1.05)\",\n  }),\n  ...(pulse && {\n    animation: `${pulseAnimation} 2s infinite`,\n  }),\n});\n\nconst arrowColor = (theme: Theme, variant?: string): string => {\n  switch (variant) {\n    case \"light\":\n      return absoluteInk(theme).white;\n    case \"glass\":\n      return alpha(theme.palette.background.paper, 0.1);\n    case \"dark\":\n      return neutralTones(theme).inverseSurface;\n    default:\n      return neutralTones(theme).inverseSurface;\n  }\n};\n\n/**\n * The bubble's own look, applied to the BUBBLE (FUT-3093).\n *\n * It used to sit on a `styled(MuiTooltip)` root as `& .MuiTooltip-tooltip`, but\n * MUI renders the bubble in a portal, outside that root — so none of it ever\n * reached the screen, and every tooltip wore MUI's see-through grey instead of\n * the variant it asked for. `slotProps.tooltip.sx` lands on the bubble itself.\n * No `overflow: hidden`: now that it applies, it would clip an `arrow`.\n */\nconst bubbleSx =\n  (\n    variant: string,\n    size: string,\n    glow: boolean,\n    pulse: boolean,\n    maxWidth: number | undefined,\n  ) =>\n  (theme: Theme): CSSObject => {\n    const sizeStyles = getSizeStyles(size);\n    return {\n      borderRadius: theme.spacing(1),\n      fontSize: sizeStyles.fontSize(theme),\n      padding: sizeStyles.padding(theme),\n      fontWeight: 500,\n      transition: \"all 0.3s ease\",\n      position: \"relative\",\n      maxWidth: tooltipCap(maxWidth)(theme),\n      ...variantStyles(theme, variant),\n      ...emphasisStyles(theme, glow, pulse),\n    };\n  };\n\n/**\n * The tooltip's cap: 300 design px unless the caller says otherwise. `sx` has\n * always read a number of 1 or less as a fraction of the parent, and that stays so.\n */\nconst tooltipCap =\n  (maxWidth: number | undefined) =>\n  (theme: Theme): string => {\n    const cap = maxWidth ?? 300;\n    return cap <= 1 && cap !== 0 ? `${cap * 100}%` : rem(theme, cap);\n  };\n\nexport const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(\n  (\n    {\n      variant = \"default\",\n      size = \"md\",\n      glow = false,\n      pulse = false,\n      maxWidth,\n      dataTestId,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const childWithTestId = dataTestId\n      ? React.cloneElement(\n          children as React.ReactElement<{ \"data-testid\"?: string }>,\n          {\n            \"data-testid\": `${dataTestId}-trigger`,\n          },\n        )\n      : children;\n\n    return (\n      <MuiTooltip\n        ref={ref}\n        enterDelay={0}\n        leaveDelay={0}\n        disableHoverListener={false}\n        disableFocusListener={false}\n        disableTouchListener={false}\n        slotProps={{\n          tooltip: {\n            sx: bubbleSx(variant, size, glow, pulse, maxWidth),\n            role: \"tooltip\",\n            ...(dataTestId && { \"data-testid\": `${dataTestId}-content` }),\n          },\n          arrow: {\n            sx: (theme: Theme) => ({ color: arrowColor(theme, variant) }),\n          },\n        }}\n        {...props}\n      >\n        {childWithTestId}\n      </MuiTooltip>\n    );\n  },\n);\n\nTooltip.displayName = \"Tooltip\";\n"],"mappings":"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","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-N4R6T5K7.js → chunk-PKSU3RBT.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-BFRVMCQM.js";
 import {
   InteractiveTooltip
-} from "./chunk-XM7QCNZQ.js";
+} from "./chunk-AET54GT6.js";
 import {
   Icon
 } from "./chunk-VEHMODO3.js";
@@ -92,4 +92,4 @@ export {
   SummaryInfo,
   useSummaryInfo
 };
-//# sourceMappingURL=chunk-N4R6T5K7.js.map
+//# sourceMappingURL=chunk-PKSU3RBT.js.map

package/dist/{chunk-IRNKHHQM.js → chunk-QKMXMBUK.js}

@@ -7,7 +7,7 @@ import {
 import {
   SettingSwitchBlock,
   useSettingSwitchIds
-} from "./chunk-Y5QDXG5N.js";
+} from "./chunk-6WNMVWAV.js";
 import {
   flatStyles,
   surfaceStyles,
@@ -44,4 +44,4 @@ SettingToggle.displayName = "SettingToggle";
 export {
   SettingToggle
 };
-//# sourceMappingURL=chunk-IRNKHHQM.js.map
+//# sourceMappingURL=chunk-QKMXMBUK.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/data-display/InteractiveTooltip.js

@@ -1,8 +1,8 @@
 import "../chunk-TAF3YYMK.js";
 import {
   InteractiveTooltip
-} from "../chunk-XM7QCNZQ.js";
-import "../chunk-TQCQCW2P.js";
+} from "../chunk-AET54GT6.js";
+import "../chunk-524PRSSD.js";
 import "../chunk-QYJ25FWM.js";
 import "../chunk-FQ6UW7IY.js";
 import "../chunk-6JAIFIPW.js";

package/dist/data-display/Tooltip.js

@@ -1,7 +1,7 @@
 import "../chunk-4N244WVL.js";
 import {
   Tooltip
-} from "../chunk-TYBZ4XZZ.js";
+} from "../chunk-KRIPQUFB.js";
 import "../chunk-FQ6UW7IY.js";
 import "../chunk-6JAIFIPW.js";
 import "../chunk-N3GAFIXG.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/layout/SettingCard.js

@@ -5,17 +5,17 @@ import {
 } from "../chunk-WAKGVAOB.js";
 import {
   SettingCard
-} from "../chunk-OESAYTNG.js";
+} from "../chunk-JDVHNDY3.js";
 import {
   SettingToggle
-} from "../chunk-IRNKHHQM.js";
+} from "../chunk-QKMXMBUK.js";
 import {
   SettingGroup
-} from "../chunk-ZXEDKRRT.js";
+} from "../chunk-ECVNRLKD.js";
 import "../chunk-XJQNSMGA.js";
 import "../chunk-SALQ65SM.js";
-import "../chunk-Y5QDXG5N.js";
-import "../chunk-N4R6T5K7.js";
+import "../chunk-6WNMVWAV.js";
+import "../chunk-PKSU3RBT.js";
 import "../chunk-2JTZWQ25.js";
 import "../chunk-WE2LNTR6.js";
 import "../chunk-BFRVMCQM.js";
@@ -23,8 +23,8 @@ import "../chunk-RN7UJI7S.js";
 import "../chunk-JYWF76Z5.js";
 import "../chunk-GGMB6LJH.js";
 import "../chunk-TAF3YYMK.js";
-import "../chunk-XM7QCNZQ.js";
-import "../chunk-TQCQCW2P.js";
+import "../chunk-AET54GT6.js";
+import "../chunk-524PRSSD.js";
 import "../chunk-QYJ25FWM.js";
 import "../chunk-2GTORM5E.js";
 import "../chunk-OZPLAOI4.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/dist/types/components/data-display/InteractiveTooltip/InteractiveTooltip.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import type { InteractiveTooltipProps } from './InteractiveTooltip.types';
+import React from "react";
+import type { InteractiveTooltipProps } from "./InteractiveTooltip.types";
 export declare const InteractiveTooltip: React.ForwardRefExoticComponent<Omit<InteractiveTooltipProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=InteractiveTooltip.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"InteractiveTooltip.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/InteractiveTooltip/InteractiveTooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAgC1E,eAAO,MAAM,kBAAkB,6GA6E9B,CAAC"}
+{"version":3,"file":"InteractiveTooltip.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/InteractiveTooltip/InteractiveTooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AA8B1E,eAAO,MAAM,kBAAkB,6GA8E7B,CAAC"}

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

@@ -1,4 +1,4 @@
-import React from 'react';
-import type { TooltipProps } from './Tooltip.types';
+import React from "react";
+import type { TooltipProps } from "./Tooltip.types";
 export declare const Tooltip: React.ForwardRefExoticComponent<Omit<TooltipProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=Tooltip.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAgIpD,eAAO,MAAM,OAAO,kGA6CnB,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAsIpD,eAAO,MAAM,OAAO,kGA+CnB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.53.0",
+  "version": "6.54.1",
   "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>
+  );
+}