@12-apps/ui 6.53.0 → 6.54.1

package/dist/{chunk-OG6LYQ7C.js → chunk-4PFKMNLP.js}

@@ -1,3 +1,6 @@
+import {
+  AlertDialogFooter
+} from "./chunk-IQQX3NDO.js";
 import {
   neutralTones
 } from "./chunk-FQ6UW7IY.js";
@@ -10,16 +13,13 @@ import {
 import Close from "@mui/icons-material/Close";
 import Error from "@mui/icons-material/Error";
 import Info from "@mui/icons-material/Info";
-import Button from "@mui/material/Button/index.js";
-import CircularProgress from "@mui/material/CircularProgress/index.js";
 import Dialog from "@mui/material/Dialog/index.js";
-import DialogActions from "@mui/material/DialogActions/index.js";
 import DialogContent from "@mui/material/DialogContent/index.js";
 import DialogContentText from "@mui/material/DialogContentText/index.js";
 import DialogTitle from "@mui/material/DialogTitle/index.js";
 import IconButton from "@mui/material/IconButton/index.js";
 import Typography from "@mui/material/Typography/index.js";
-import { alpha, keyframes, styled, useTheme } from "@mui/material/styles/index.js";
+import { alpha, keyframes, styled } from "@mui/material/styles/index.js";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var pulseAnimation = (theme) => keyframes`
@@ -127,10 +127,6 @@ var StyledDialogContent = styled(DialogContent)(({ theme }) => ({
   paddingTop: theme.spacing(1),
   paddingBottom: theme.spacing(2)
 }));
-var StyledDialogActions = styled(DialogActions)(({ theme }) => ({
-  padding: theme.spacing(2, 3, 3, 3),
-  gap: theme.spacing(1)
-}));
 var CloseButton = styled(IconButton)(({ theme }) => ({
   position: "absolute",
   right: theme.spacing(1),
@@ -153,8 +149,6 @@ function ariaSlotProps(dataTestId, title, description) {
     }
   };
 }
-var CONFIRM_BUTTON_VARIANT = "contained";
-var confirmButtonColor = (variant) => variant === "destructive" ? "error" : "primary";
 function AlertDialogHeader({
   title,
   icon,
@@ -167,54 +161,6 @@ function AlertDialogHeader({
     /* @__PURE__ */ jsx(Typography, { variant: "h6", component: "span", children: title })
   ] });
 }
-function AlertDialogFooter({
-  variant,
-  cancelText = "Cancel",
-  confirmText = "Confirm",
-  showCancel = true,
-  loading = false,
-  confirmDisabled = false,
-  initialFocus = "confirm",
-  onCancel,
-  onConfirm,
-  dataTestId
-}) {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsxs(StyledDialogActions, { "data-testid": `${dataTestId}-actions`, children: [
-    showCancel && /* @__PURE__ */ jsx(
-      Button,
-      {
-        onClick: onCancel,
-        variant: "outlined",
-        color: "inherit",
-        disabled: loading,
-        autoFocus: initialFocus === "cancel",
-        "data-testid": `${dataTestId}-cancel-button`,
-        children: cancelText
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        onClick: onConfirm,
-        variant: CONFIRM_BUTTON_VARIANT,
-        color: confirmButtonColor(variant),
-        disabled: confirmDisabled || loading,
-        startIcon: loading ? /* @__PURE__ */ jsx(
-          CircularProgress,
-          {
-            size: rem(theme, 16),
-            color: "inherit",
-            "data-testid": `${dataTestId}-loading-spinner`
-          }
-        ) : void 0,
-        autoFocus: initialFocus !== "cancel",
-        "data-testid": `${dataTestId}-confirm-button`,
-        children: confirmText
-      }
-    )
-  ] });
-}
 var AlertDialog = React.forwardRef(
   ({
     variant = "default",
@@ -231,6 +177,7 @@ var AlertDialog = React.forwardRef(
     loading,
     confirmDisabled,
     initialFocus,
+    emphasis,
     children,
     onClose,
     "data-testid": dataTestId = "alert-dialog",
@@ -262,15 +209,7 @@ var AlertDialog = React.forwardRef(
               children: /* @__PURE__ */ jsx(Close, {})
             }
           ),
-          /* @__PURE__ */ jsx(
-            AlertDialogHeader,
-            {
-              title,
-              icon,
-              variant,
-              dataTestId
-            }
-          ),
+          /* @__PURE__ */ jsx(AlertDialogHeader, { title, icon, variant, dataTestId }),
           /* @__PURE__ */ jsxs(StyledDialogContent, { "data-testid": `${dataTestId}-content`, children: [
             description && /* @__PURE__ */ jsx(
               DialogContentText,
@@ -292,6 +231,7 @@ var AlertDialog = React.forwardRef(
               loading,
               confirmDisabled,
               initialFocus,
+              emphasis,
               onCancel: handleCancel,
               onConfirm: () => onConfirm?.(),
               dataTestId
@@ -307,4 +247,4 @@ AlertDialog.displayName = "AlertDialog";
 export {
   AlertDialog
 };
-//# sourceMappingURL=chunk-OG6LYQ7C.js.map
+//# sourceMappingURL=chunk-4PFKMNLP.js.map

package/dist/chunk-4PFKMNLP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/AlertDialog/AlertDialog.tsx"],"sourcesContent":["import Close from '@mui/icons-material/Close';\nimport Error from '@mui/icons-material/Error';\nimport Info from '@mui/icons-material/Info';\nimport Dialog from '@mui/material/Dialog/index.js';\nimport DialogContent from '@mui/material/DialogContent/index.js';\nimport DialogContentText from '@mui/material/DialogContentText/index.js';\nimport DialogTitle from '@mui/material/DialogTitle/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, keyframes, styled } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { neutralTones } from '../../../tokens/ink';\n\nimport { AlertDialogFooter } from './AlertDialog.parts';\nimport type { AlertDialogProps } from './AlertDialog.types';\nimport { rem, rems } from '../../../tokens/relative';\n\n// Define pulse animation\nconst pulseAnimation = (theme: Theme) => keyframes`\n  0% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 1;\n  }\n  70% {\n    box-shadow: 0 0 0 ${rem(theme, 15)} currentColor;\n    opacity: 0;\n  }\n  100% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 0;\n  }\n`;\n\nconst StyledDialog = styled(Dialog, {\n  shouldForwardProp: (prop) => \n    !['customVariant', 'glow', 'pulse'].includes(prop as string),\n})<{ \n  customVariant?: string; \n  glow?: boolean; \n  pulse?: boolean; \n}>(({ theme, customVariant, glow, pulse }) => ({\n  '& .MuiDialog-paper': {\n    borderRadius: theme.spacing(2),\n    transition: 'all 0.3s ease',\n    position: 'relative',\n    overflow: 'hidden',\n\n    // Variant styles\n    ...(customVariant === 'default' && {\n      backgroundColor: theme.palette.background.paper,\n      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n    }),\n\n    // The error tint is LAYERED over the paper, not used as the background\n    // itself: `alpha(error, 0.05)` alone leaves the panel 95% transparent, so\n    // the page behind it showed straight through the question and its buttons.\n    // A confirm nobody can read is the one dialog that must never be hard to\n    // read. Same tint, opaque base.\n    ...(customVariant === 'destructive' && {\n      backgroundColor: theme.palette.background.paper,\n      backgroundImage: `linear-gradient(${alpha(theme.palette.error.main, 0.05)}, ${alpha(\n        theme.palette.error.main,\n        0.05,\n      )})`,\n      border: `1px solid ${alpha(theme.palette.error.main, 0.2)}`,\n    }),\n\n    ...(customVariant === 'glass' && {\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    }),\n\n    // Glow effect\n    ...(glow && !pulse && {\n      boxShadow: `0 0 ${rems(theme, 30, 10)} ${alpha(theme.palette.primary.main, 0.3)} !important`,\n      filter: 'brightness(1.05)',\n    }),\n\n    // Pulse animation\n    ...(pulse && !glow && {\n      position: 'relative',\n      '&::after': {\n        content: '\"\"',\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        borderRadius: 'inherit',\n        backgroundColor: theme.palette.primary.main,\n        opacity: 0.1,\n        animation: `${pulseAnimation(theme)} 2s infinite`,\n        pointerEvents: 'none',\n        zIndex: -1,\n      },\n    }),\n\n    // Both glow and pulse\n    ...(glow && pulse && {\n      position: 'relative',\n      boxShadow: `0 0 ${rems(theme, 30, 10)} ${alpha(theme.palette.primary.main, 0.3)} !important`,\n      filter: 'brightness(1.05)',\n      '&::after': {\n        content: '\"\"',\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        borderRadius: 'inherit',\n        backgroundColor: theme.palette.primary.main,\n        opacity: 0.1,\n        animation: `${pulseAnimation(theme)} 2s infinite`,\n        pointerEvents: 'none',\n        zIndex: -1,\n      },\n    }),\n  },\n}));\n\nconst StyledDialogTitle = styled(DialogTitle)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1.5),\n  paddingRight: theme.spacing(6), // Space for close button\n  '& .MuiTypography-root': {\n    fontWeight: 600,\n    fontSize: rem(theme, 20),\n  },\n}));\n\nconst StyledDialogContent = styled(DialogContent)(({ theme }) => ({\n  paddingTop: theme.spacing(1),\n  paddingBottom: theme.spacing(2),\n}));\n\nconst CloseButton = styled(IconButton)(({ theme }) => ({\n  position: 'absolute',\n  right: theme.spacing(1),\n  top: theme.spacing(1),\n  color: neutralTones(theme).muted,\n}));\n\n/**\n * Per-variant lookups, hoisted out of the render function. They depend on\n * nothing but their arguments, so keeping them at module scope means they are\n * not rebuilt on every render — and it keeps the component's own branch count\n * inside the repo's complexity budget.\n */\nconst variantIcon = (\n  variant: AlertDialogProps['variant'],\n  icon: AlertDialogProps['icon'],\n): React.ReactNode => {\n  if (icon) return icon;\n  return variant === 'destructive' ? <Error color=\"error\" /> : <Info color=\"primary\" />;\n};\n\n/**\n * Ids for the two elements that give the dialog its accessible name and\n * description. Derived from the test id so they are stable and unique per\n * dialog without a generated id that would change on every render.\n */\nconst titleId = (dataTestId: string): string => `${dataTestId}-title`;\nconst descriptionId = (dataTestId: string): string => `${dataTestId}-description`;\n\n/**\n * `alertdialog`, not `dialog`.\n *\n * This component interrupts what the operator was doing and will not go away\n * until they answer — which is exactly the distinction the two roles draw, and\n * it is what makes a screen reader announce the message itself on open rather\n * than just the dialog's name. MUI hardcodes `role=\"dialog\"` on the paper, so\n * it has to be overridden through the paper slot.\n */\nconst ALERT_ROLE = 'alertdialog';\n\n/**\n * The paper slot's a11y props: the role, plus the name and description wired to\n * the elements that actually carry them, so the announcement is the QUESTION\n * rather than the word \"dialog\".\n *\n * Both references are conditional — pointing `aria-labelledby` at an element\n * that was never rendered leaves a dangling id, which screen readers treat as\n * no name at all, i.e. worse than omitting it.\n */\nfunction ariaSlotProps(\n  dataTestId: string,\n  title: AlertDialogProps['title'],\n  description: AlertDialogProps['description'],\n): { paper: Record<string, string> } {\n  return {\n    paper: {\n      role: ALERT_ROLE,\n      ...(title ? { 'aria-labelledby': titleId(dataTestId) } : {}),\n      ...(description ? { 'aria-describedby': descriptionId(dataTestId) } : {}),\n    },\n  };\n}\n\n/** Title row: the variant icon (unless explicitly suppressed with `null`) + the title. */\nfunction AlertDialogHeader({\n  title,\n  icon,\n  variant,\n  dataTestId,\n}: {\n  title: AlertDialogProps['title'];\n  icon: AlertDialogProps['icon'];\n  variant: AlertDialogProps['variant'];\n  dataTestId: string;\n}): React.ReactElement | null {\n  if (!title) return null;\n  return (\n    <StyledDialogTitle id={titleId(dataTestId)} data-testid={`${dataTestId}-title`}>\n      {icon !== null && (\n        <span data-testid={`${dataTestId}-icon`}>{variantIcon(variant, icon)}</span>\n      )}\n      <Typography variant=\"h6\" component=\"span\">\n        {title}\n      </Typography>\n    </StyledDialogTitle>\n  );\n}\n\nexport const AlertDialog = React.forwardRef<HTMLDivElement, AlertDialogProps>(\n  ({\n    variant = 'default',\n    glow = false,\n    pulse = false,\n    title,\n    description,\n    icon,\n    cancelText,\n    confirmText,\n    onCancel,\n    onConfirm,\n    showCancel,\n    loading,\n    confirmDisabled,\n    initialFocus,\n    emphasis,\n    children,\n    onClose,\n    'data-testid': dataTestId = 'alert-dialog',\n    ...props\n  }, ref) => {\n    const handleCancel = () => {\n      onCancel?.();\n      onClose?.({}, 'backdropClick');\n    };\n\n    return (\n      <StyledDialog\n        ref={ref}\n        customVariant={variant}\n        glow={glow}\n        pulse={pulse}\n        onClose={onClose}\n        data-testid={dataTestId}\n        slotProps={ariaSlotProps(dataTestId, title, description)}\n        {...props}\n      >\n        <CloseButton\n          aria-label=\"close\"\n          onClick={handleCancel}\n          size=\"small\"\n          data-testid={`${dataTestId}-close-button`}\n        >\n          <Close />\n        </CloseButton>\n\n        <AlertDialogHeader title={title} icon={icon} variant={variant} dataTestId={dataTestId} />\n\n        <StyledDialogContent data-testid={`${dataTestId}-content`}>\n          {description && (\n            <DialogContentText\n              id={descriptionId(dataTestId)}\n              data-testid={`${dataTestId}-description`}\n            >\n              {description}\n            </DialogContentText>\n          )}\n          {children}\n        </StyledDialogContent>\n\n        <AlertDialogFooter\n          variant={variant}\n          cancelText={cancelText}\n          confirmText={confirmText}\n          showCancel={showCancel}\n          loading={loading}\n          confirmDisabled={confirmDisabled}\n          initialFocus={initialFocus}\n          emphasis={emphasis}\n          onCancel={handleCancel}\n          onConfirm={() => onConfirm?.()}\n          dataTestId={dataTestId}\n        />\n      </StyledDialog>\n    );\n  }\n);\n\nAlertDialog.displayName = 'AlertDialog';"],"mappings":"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","names":[]}

package/dist/{chunk-TQCQCW2P.js → chunk-524PRSSD.js}

@@ -36,7 +36,7 @@ var variantStyles = (theme, variant) => {
   switch (variant) {
     case "default":
       return {
-        backgroundColor: alpha(neutralTones(theme).inverseSurface, 0.92),
+        backgroundColor: neutralTones(theme).inverseSurface,
         color: absoluteInk(theme).white,
         boxShadow: `${rems(theme, 0, 4, 12)} ${shadowInk(theme, 0.3)}`
       };
@@ -89,7 +89,7 @@ var arrowColor = (theme, variant) => {
     case "dark":
       return absoluteInk(theme).black;
     default:
-      return alpha(neutralTones(theme).inverseSurface, 0.92);
+      return neutralTones(theme).inverseSurface;
   }
 };
 
@@ -100,4 +100,4 @@ export {
   tooltipCap,
   arrowColor
 };
-//# sourceMappingURL=chunk-TQCQCW2P.js.map
+//# sourceMappingURL=chunk-524PRSSD.js.map

package/dist/chunk-524PRSSD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/InteractiveTooltip/InteractiveTooltip.styles.ts"],"sourcesContent":["import { alpha, keyframes } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport { absoluteInk, neutralTones, shadowInk, sheen } from '../../../tokens/ink';\nimport { rem, rems, sxRem } from '../../../tokens/relative';\n\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\nexport const 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\nexport const 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        boxShadow: `${rems(theme, 0, 4, 12)} ${shadowInk(theme, 0.3)}`,\n      };\n    case 'dark':\n      return {\n        backgroundColor: absoluteInk(theme).black,\n        color: absoluteInk(theme).white,\n        boxShadow: `${rems(theme, 0, 6, 16)} ${shadowInk(theme, 0.5)}`,\n        border: `1px solid ${sheen(theme, 0.1)}`,\n      };\n    case 'light':\n      return {\n        backgroundColor: absoluteInk(theme).white,\n        color: neutralTones(theme).inverseSurface,\n        border: `1px solid ${alpha(neutralTones(theme).subtle, 0.4)}`,\n        boxShadow: `${rems(theme, 0, 4, 16)} ${shadowInk(theme, 0.15)}`,\n      };\n    case 'glass':\n      return {\n        backgroundColor: alpha(theme.palette.background.paper, 0.75),\n        backdropFilter: `blur(${rem(theme, 24)}) saturate(180%)`,\n        WebkitBackdropFilter: `blur(${rem(theme, 24)}) saturate(180%)`,\n        border: `1px solid ${alpha(theme.palette.divider, 0.3)}`,\n        color: theme.palette.text.primary,\n        boxShadow: `${rems(theme, 0, 8, 32)} ${shadowInk(theme, 0.12)}`,\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.\nexport const emphasisStyles = (theme: Theme, glow?: boolean, pulse?: boolean): 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\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 */\nexport const 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 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.75);\n    case 'dark':\n      return absoluteInk(theme).black;\n    default:\n      return neutralTones(theme).inverseSurface;\n  }\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-Y5QDXG5N.js → chunk-6WNMVWAV.js}

@@ -1,6 +1,6 @@
 import {
   useSummaryInfo
-} from "./chunk-N4R6T5K7.js";
+} from "./chunk-PKSU3RBT.js";
 import {
   PendingSpinner,
   SaveError,
@@ -87,4 +87,4 @@ export {
   useSettingSwitchIds,
   SettingSwitchBlock
 };
-//# sourceMappingURL=chunk-Y5QDXG5N.js.map
+//# sourceMappingURL=chunk-6WNMVWAV.js.map

package/dist/{chunk-OT3KFZRE.js → chunk-7WWPKA7Y.js}

@@ -10,7 +10,7 @@ import {
 import {
   ViewDialogs,
   ViewMutationErrorAlert
-} from "./chunk-HCEJT65A.js";
+} from "./chunk-HKD4TDZP.js";
 import {
   useSavedViewsController
 } from "./chunk-HR7YTBR7.js";
@@ -178,4 +178,4 @@ function renderViewDialogs(ctl, fields, columns, views, testIdPrefix, onSaved) {
 export {
   DataViewsTableBase
 };
-//# sourceMappingURL=chunk-OT3KFZRE.js.map
+//# sourceMappingURL=chunk-7WWPKA7Y.js.map

package/dist/chunk-AET54GT6.js

@@ -0,0 +1,99 @@
+import {
+  arrowColor,
+  emphasisStyles,
+  getSizeStyles,
+  tooltipCap,
+  variantStyles
+} from "./chunk-524PRSSD.js";
+import {
+  resolveTooltipProps,
+  useHoverOpen,
+  usePinnedTooltip
+} from "./chunk-QYJ25FWM.js";
+
+// src/components/data-display/InteractiveTooltip/InteractiveTooltip.tsx
+import MuiTooltip from "@mui/material/Tooltip/index.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var bubbleSx = (variant, size, glow, pulse, maxWidth) => (theme) => {
+  const sizeStyles = getSizeStyles(size);
+  return {
+    borderRadius: theme.spacing(1),
+    fontSize: sizeStyles.fontSize(theme),
+    padding: sizeStyles.padding(theme),
+    fontWeight: 500,
+    transition: "all 0.3s ease",
+    position: "relative",
+    maxWidth: tooltipCap(maxWidth)(theme),
+    ...variantStyles(theme, variant),
+    ...emphasisStyles(theme, glow, pulse)
+  };
+};
+var InteractiveTooltip = React.forwardRef((rawProps, ref) => {
+  const {
+    variant,
+    size,
+    glow,
+    pulse,
+    maxWidth,
+    dataTestId,
+    hoverContent,
+    pinnedContent,
+    clickable,
+    onPin,
+    onUnpin,
+    className,
+    children,
+    onOpen,
+    onClose,
+    ...props
+  } = resolveTooltipProps(rawProps);
+  const { isPinned, isControlledOpen, wrapperRef, handleClick } = usePinnedTooltip({
+    clickable,
+    onPin,
+    onUnpin
+  });
+  const hover = useHoverOpen(isPinned, onOpen, onClose);
+  const tooltipContent = isPinned ? pinnedContent : hoverContent;
+  const childElement = children;
+  const childWithProps = React.cloneElement(childElement, {
+    onClick: (e) => {
+      handleClick(e);
+      childElement.props.onClick?.(e);
+    },
+    "data-testid": dataTestId ? `${dataTestId}-trigger` : void 0
+  });
+  return /* @__PURE__ */ jsx("div", { ref: wrapperRef, className, children: /* @__PURE__ */ jsx(
+    MuiTooltip,
+    {
+      ref,
+      title: tooltipContent,
+      open: isPinned ? isControlledOpen : hover.open,
+      onOpen: hover.onOpen,
+      onClose: hover.onClose,
+      enterDelay: isPinned ? 0 : 100,
+      leaveDelay: 0,
+      disableHoverListener: isPinned,
+      disableFocusListener: isPinned,
+      disableTouchListener: isPinned,
+      slotProps: {
+        tooltip: {
+          sx: bubbleSx(variant, size, glow, pulse, maxWidth),
+          role: "tooltip",
+          ...dataTestId && { "data-testid": `${dataTestId}-content` }
+        },
+        arrow: {
+          sx: (theme) => ({ color: arrowColor(theme, variant) })
+        }
+      },
+      ...props,
+      children: childWithProps
+    }
+  ) });
+});
+InteractiveTooltip.displayName = "InteractiveTooltip";
+
+export {
+  InteractiveTooltip
+};
+//# sourceMappingURL=chunk-AET54GT6.js.map

package/dist/chunk-AET54GT6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/InteractiveTooltip/InteractiveTooltip.tsx"],"sourcesContent":["import MuiTooltip from \"@mui/material/Tooltip/index.js\";\nimport type { CSSObject, Theme } from \"@mui/material/styles/index.js\";\nimport React from \"react\";\n\nimport {\n  resolveTooltipProps,\n  useHoverOpen,\n  usePinnedTooltip,\n} from \"./InteractiveTooltip.hooks\";\nimport {\n  arrowColor,\n  emphasisStyles,\n  getSizeStyles,\n  tooltipCap,\n  variantStyles,\n} from \"./InteractiveTooltip.styles\";\nimport type { InteractiveTooltipProps } from \"./InteractiveTooltip.types\";\n\n/**\n * The bubble's own look, applied to the BUBBLE (FUT-3093) — see `Tooltip`'s\n * `bubbleSx`: a `& .MuiTooltip-tooltip` rule on the root never reached the\n * portalled bubble, so the variants had never been on screen.\n */\nconst bubbleSx =\n  (\n    variant: string | undefined,\n    size: string | undefined,\n    glow: boolean | undefined,\n    pulse: boolean | undefined,\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\nexport const InteractiveTooltip = React.forwardRef<\n  HTMLDivElement,\n  InteractiveTooltipProps\n>((rawProps, ref) => {\n  const {\n    variant,\n    size,\n    glow,\n    pulse,\n    maxWidth,\n    dataTestId,\n    hoverContent,\n    pinnedContent,\n    clickable,\n    onPin,\n    onUnpin,\n    className,\n    children,\n    onOpen,\n    onClose,\n    ...props\n  } = resolveTooltipProps(rawProps);\n\n  const { isPinned, isControlledOpen, wrapperRef, handleClick } =\n    usePinnedTooltip({\n      clickable,\n      onPin,\n      onUnpin,\n    });\n  const hover = useHoverOpen(isPinned, onOpen, onClose);\n\n  // Determine which content to show\n  const tooltipContent = isPinned ? pinnedContent : hoverContent;\n\n  // Child with click handler and ref\n  const childElement = children as React.ReactElement<{\n    onClick?: (e: React.MouseEvent) => void;\n    \"data-testid\"?: string;\n  }>;\n\n  const childWithProps = React.cloneElement(childElement, {\n    onClick: (e: React.MouseEvent) => {\n      handleClick(e);\n      // Call original onClick if it exists\n      childElement.props.onClick?.(e);\n    },\n    \"data-testid\": dataTestId ? `${dataTestId}-trigger` : undefined,\n  });\n\n  return (\n    <div ref={wrapperRef} className={className}>\n      <MuiTooltip\n        ref={ref}\n        title={tooltipContent}\n        open={isPinned ? isControlledOpen : hover.open}\n        onOpen={hover.onOpen}\n        onClose={hover.onClose}\n        enterDelay={isPinned ? 0 : 100}\n        leaveDelay={0}\n        disableHoverListener={isPinned}\n        disableFocusListener={isPinned}\n        disableTouchListener={isPinned}\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        {childWithProps}\n      </MuiTooltip>\n    </div>\n  );\n});\n\nInteractiveTooltip.displayName = \"InteractiveTooltip\";\n"],"mappings":";;;;;;;;;;;;;;AAAA,OAAO,gBAAgB;AAEvB,OAAO,WAAW;AA+FZ;AA1EN,IAAM,WACJ,CACE,SACA,MACA,MACA,OACA,aAEF,CAAC,UAA4B;AAC3B,QAAM,aAAa,cAAc,IAAI;AACrC,SAAO;AAAA,IACL,cAAc,MAAM,QAAQ,CAAC;AAAA,IAC7B,UAAU,WAAW,SAAS,KAAK;AAAA,IACnC,SAAS,WAAW,QAAQ,KAAK;AAAA,IACjC,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,UAAU,WAAW,QAAQ,EAAE,KAAK;AAAA,IACpC,GAAG,cAAc,OAAO,OAAO;AAAA,IAC/B,GAAG,eAAe,OAAO,MAAM,KAAK;AAAA,EACtC;AACF;AAEK,IAAM,qBAAqB,MAAM,WAGtC,CAAC,UAAU,QAAQ;AACnB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,oBAAoB,QAAQ;AAEhC,QAAM,EAAE,UAAU,kBAAkB,YAAY,YAAY,IAC1D,iBAAiB;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH,QAAM,QAAQ,aAAa,UAAU,QAAQ,OAAO;AAGpD,QAAM,iBAAiB,WAAW,gBAAgB;AAGlD,QAAM,eAAe;AAKrB,QAAM,iBAAiB,MAAM,aAAa,cAAc;AAAA,IACtD,SAAS,CAAC,MAAwB;AAChC,kBAAY,CAAC;AAEb,mBAAa,MAAM,UAAU,CAAC;AAAA,IAChC;AAAA,IACA,eAAe,aAAa,GAAG,UAAU,aAAa;AAAA,EACxD,CAAC;AAED,SACE,oBAAC,SAAI,KAAK,YAAY,WACpB;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,MACP,MAAM,WAAW,mBAAmB,MAAM;AAAA,MAC1C,QAAQ,MAAM;AAAA,MACd,SAAS,MAAM;AAAA,MACf,YAAY,WAAW,IAAI;AAAA,MAC3B,YAAY;AAAA,MACZ,sBAAsB;AAAA,MACtB,sBAAsB;AAAA,MACtB,sBAAsB;AAAA,MACtB,WAAW;AAAA,QACT,SAAS;AAAA,UACP,IAAI,SAAS,SAAS,MAAM,MAAM,OAAO,QAAQ;AAAA,UACjD,MAAM;AAAA,UACN,GAAI,cAAc,EAAE,eAAe,GAAG,UAAU,WAAW;AAAA,QAC7D;AAAA,QACA,OAAO;AAAA,UACL,IAAI,CAAC,WAAkB,EAAE,OAAO,WAAW,OAAO,OAAO,EAAE;AAAA,QAC7D;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AAED,mBAAmB,cAAc;","names":[]}

package/dist/{chunk-ZXEDKRRT.js → chunk-ECVNRLKD.js}

@@ -7,7 +7,7 @@ import {
 import {
   SettingSwitchBlock,
   useSettingSwitchIds
-} from "./chunk-Y5QDXG5N.js";
+} from "./chunk-6WNMVWAV.js";
 import {
   partTestId
 } from "./chunk-2JTZWQ25.js";
@@ -84,4 +84,4 @@ SettingGroup.displayName = "SettingGroup";
 export {
   SettingGroup
 };
-//# sourceMappingURL=chunk-ZXEDKRRT.js.map
+//# sourceMappingURL=chunk-ECVNRLKD.js.map

package/dist/{chunk-JUHNEYCH.js → chunk-GCH7CLM4.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-KHG57NAE.js";
 import {
   createConfirmButton
-} from "./chunk-3GVMUASU.js";
+} from "./chunk-HV7HIMMY.js";
 import {
   Dialog,
   DialogContent
@@ -128,4 +128,4 @@ function ManageViewsDialog({
 export {
   ManageViewsDialog
 };
-//# sourceMappingURL=chunk-JUHNEYCH.js.map
+//# sourceMappingURL=chunk-GCH7CLM4.js.map

package/dist/{chunk-HCEJT65A.js → chunk-HKD4TDZP.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-4E4MSUY5.js";
 import {
   ManageViewsDialog
-} from "./chunk-JUHNEYCH.js";
+} from "./chunk-GCH7CLM4.js";
 import {
   useDataViewsCopy
 } from "./chunk-KHG57NAE.js";
@@ -121,4 +121,4 @@ export {
   ViewsMenuSlot,
   ViewDialogs
 };
-//# sourceMappingURL=chunk-HCEJT65A.js.map
+//# sourceMappingURL=chunk-HKD4TDZP.js.map

package/dist/{chunk-3GVMUASU.js → chunk-HV7HIMMY.js}

@@ -1,6 +1,6 @@
 import {
   withConfirmation
-} from "./chunk-4WCDMCIS.js";
+} from "./chunk-PI3GPLE2.js";
 import {
   Button
 } from "./chunk-RIZRF5XR.js";
@@ -18,4 +18,4 @@ function createConfirmButton(copy, errorText) {
 export {
   createConfirmButton
 };
-//# sourceMappingURL=chunk-3GVMUASU.js.map
+//# sourceMappingURL=chunk-HV7HIMMY.js.map

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-OESAYTNG.js → chunk-JDVHNDY3.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-SALQ65SM.js";
 import {
   useSummaryInfo
-} from "./chunk-N4R6T5K7.js";
+} from "./chunk-PKSU3RBT.js";
 import {
   LearnMore,
   PendingSpinner,
@@ -170,4 +170,4 @@ SettingCard.displayName = "SettingCard";
 export {
   SettingCard
 };
-//# sourceMappingURL=chunk-OESAYTNG.js.map
+//# sourceMappingURL=chunk-JDVHNDY3.js.map

package/dist/{chunk-TYBZ4XZZ.js → chunk-KRIPQUFB.js}

@@ -10,7 +10,7 @@ import {
 
 // src/components/data-display/Tooltip/Tooltip.tsx
 import MuiTooltip from "@mui/material/Tooltip/index.js";
-import { alpha, keyframes, styled } from "@mui/material/styles/index.js";
+import { alpha, keyframes } from "@mui/material/styles/index.js";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
 var pulseAnimation = keyframes`
@@ -37,7 +37,7 @@ var variantStyles = (theme, variant) => {
   switch (variant) {
     case "default":
       return {
-        backgroundColor: alpha(neutralTones(theme).inverseSurface, 0.9),
+        backgroundColor: neutralTones(theme).inverseSurface,
         color: absoluteInk(theme).white
       };
     case "dark":
@@ -81,30 +81,23 @@ var arrowColor = (theme, variant) => {
     case "dark":
       return neutralTones(theme).inverseSurface;
     default:
-      return alpha(neutralTones(theme).inverseSurface, 0.9);
+      return neutralTones(theme).inverseSurface;
   }
 };
-var StyledTooltip = styled(MuiTooltip, {
-  shouldForwardProp: (prop) => !["customVariant", "customSize", "glow", "pulse"].includes(prop)
-})(({ theme, customVariant, customSize, glow, pulse }) => {
-  const sizeStyles = getSizeStyles(customSize);
+var bubbleSx = (variant, size, glow, pulse, maxWidth) => (theme) => {
+  const sizeStyles = getSizeStyles(size);
   return {
-    "& .MuiTooltip-tooltip": {
-      borderRadius: theme.spacing(1),
-      fontSize: sizeStyles.fontSize(theme),
-      padding: sizeStyles.padding(theme),
-      fontWeight: 500,
-      transition: "all 0.3s ease",
-      position: "relative",
-      overflow: "hidden",
-      ...variantStyles(theme, customVariant),
-      ...emphasisStyles(theme, glow, pulse)
-    },
-    "& .MuiTooltip-arrow": {
-      color: arrowColor(theme, customVariant)
-    }
+    borderRadius: theme.spacing(1),
+    fontSize: sizeStyles.fontSize(theme),
+    padding: sizeStyles.padding(theme),
+    fontWeight: 500,
+    transition: "all 0.3s ease",
+    position: "relative",
+    maxWidth: tooltipCap(maxWidth)(theme),
+    ...variantStyles(theme, variant),
+    ...emphasisStyles(theme, glow, pulse)
   };
-});
+};
 var tooltipCap = (maxWidth) => (theme) => {
   const cap = maxWidth ?? 300;
   return cap <= 1 && cap !== 0 ? `${cap * 100}%` : rem(theme, cap);
@@ -120,17 +113,16 @@ var Tooltip = React.forwardRef(
     children,
     ...props
   }, ref) => {
-    const childWithTestId = dataTestId ? React.cloneElement(children, {
-      "data-testid": `${dataTestId}-trigger`
-    }) : children;
+    const childWithTestId = dataTestId ? React.cloneElement(
+      children,
+      {
+        "data-testid": `${dataTestId}-trigger`
+      }
+    ) : children;
     return /* @__PURE__ */ jsx(
-      StyledTooltip,
+      MuiTooltip,
       {
         ref,
-        customVariant: variant,
-        customSize: size,
-        glow,
-        pulse,
         enterDelay: 0,
         leaveDelay: 0,
         disableHoverListener: false,
@@ -138,9 +130,12 @@ var Tooltip = React.forwardRef(
         disableTouchListener: false,
         slotProps: {
           tooltip: {
-            sx: { maxWidth: tooltipCap(maxWidth) },
+            sx: bubbleSx(variant, size, glow, pulse, maxWidth),
             role: "tooltip",
             ...dataTestId && { "data-testid": `${dataTestId}-content` }
+          },
+          arrow: {
+            sx: (theme) => ({ color: arrowColor(theme, variant) })
           }
         },
         ...props,
@@ -154,4 +149,4 @@ Tooltip.displayName = "Tooltip";
 export {
   Tooltip
 };
-//# sourceMappingURL=chunk-TYBZ4XZZ.js.map
+//# sourceMappingURL=chunk-KRIPQUFB.js.map