@12-apps/ui 6.54.0 → 6.54.1

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/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.54.0",
+  "version": "6.54.1",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",

package/src/components/data-display/InteractiveTooltip/InteractiveTooltip.styles.ts

@@ -34,7 +34,7 @@ export const variantStyles = (theme: Theme, variant?: string): CSSObject => {
   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)}`,
       };
@@ -98,6 +98,6 @@ export const arrowColor = (theme: Theme, variant?: string): string => {
     case 'dark':
       return absoluteInk(theme).black;
     default:
-      return alpha(neutralTones(theme).inverseSurface, 0.92);
+      return neutralTones(theme).inverseSurface;
   }
 };

package/src/components/data-display/InteractiveTooltip/InteractiveTooltip.tsx

@@ -1,124 +1,127 @@
-import MuiTooltip from '@mui/material/Tooltip/index.js';
-import { styled } from '@mui/material/styles/index.js';
-import React from 'react';
+import MuiTooltip from "@mui/material/Tooltip/index.js";
+import type { CSSObject, Theme } from "@mui/material/styles/index.js";
+import React from "react";
 
-import { resolveTooltipProps, useHoverOpen, usePinnedTooltip } from './InteractiveTooltip.hooks';
+import {
+  resolveTooltipProps,
+  useHoverOpen,
+  usePinnedTooltip,
+} from "./InteractiveTooltip.hooks";
 import {
   arrowColor,
   emphasisStyles,
   getSizeStyles,
   tooltipCap,
   variantStyles,
-} from './InteractiveTooltip.styles';
-import type { InteractiveTooltipProps } from './InteractiveTooltip.types';
-
-const StyledTooltip = styled(MuiTooltip, {
-  shouldForwardProp: (prop) =>
-    !['customVariant', 'customSize', 'glow', 'pulse'].includes(prop as string),
-})<{
-  customVariant?: string;
-  customSize?: string;
-  glow?: boolean;
-  pulse?: boolean;
-}>(({ theme, customVariant, customSize, glow, pulse }) => {
-  const sizeStyles = getSizeStyles(customSize);
+} from "./InteractiveTooltip.styles";
+import type { InteractiveTooltipProps } from "./InteractiveTooltip.types";
 
-  return {
-    '& .MuiTooltip-tooltip': {
+/**
+ * The bubble's own look, applied to the BUBBLE (FUT-3093) — see `Tooltip`'s
+ * `bubbleSx`: a `& .MuiTooltip-tooltip` rule on the root never reached the
+ * portalled bubble, so the variants had never been on screen.
+ */
+const bubbleSx =
+  (
+    variant: string | undefined,
+    size: string | undefined,
+    glow: boolean | undefined,
+    pulse: boolean | undefined,
+    maxWidth: number | undefined,
+  ) =>
+  (theme: Theme): CSSObject => {
+    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',
-      overflow: 'hidden',
-      ...variantStyles(theme, customVariant),
+      transition: "all 0.3s ease",
+      position: "relative",
+      maxWidth: tooltipCap(maxWidth)(theme),
+      ...variantStyles(theme, variant),
       ...emphasisStyles(theme, glow, pulse),
-    },
-
-    '& .MuiTooltip-arrow': {
-      color: arrowColor(theme, customVariant),
-    },
+    };
   };
-});
 
-export const InteractiveTooltip = React.forwardRef<HTMLDivElement, InteractiveTooltipProps>(
-  (rawProps, ref) => {
-    const {
-      variant,
-      size,
-      glow,
-      pulse,
-      maxWidth,
-      dataTestId,
-      hoverContent,
-      pinnedContent,
-      clickable,
-      onPin,
-      onUnpin,
-      className,
-      children,
-      onOpen,
-      onClose,
-      ...props
-    } = resolveTooltipProps(rawProps);
+export const InteractiveTooltip = React.forwardRef<
+  HTMLDivElement,
+  InteractiveTooltipProps
+>((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({
+  const { isPinned, isControlledOpen, wrapperRef, handleClick } =
+    usePinnedTooltip({
       clickable,
       onPin,
       onUnpin,
     });
-    const hover = useHoverOpen(isPinned, onOpen, onClose);
+  const hover = useHoverOpen(isPinned, onOpen, onClose);
 
-    // Determine which content to show
-    const tooltipContent = isPinned ? pinnedContent : hoverContent;
+  // Determine which content to show
+  const tooltipContent = isPinned ? pinnedContent : hoverContent;
 
-    // Child with click handler and ref
-    const childElement = children as React.ReactElement<{
-      onClick?: (e: React.MouseEvent) => void;
-      'data-testid'?: string;
-    }>;
+  // Child with click handler and ref
+  const childElement = children as React.ReactElement<{
+    onClick?: (e: React.MouseEvent) => void;
+    "data-testid"?: string;
+  }>;
 
-    const childWithProps = React.cloneElement(childElement, {
-      onClick: (e: React.MouseEvent) => {
-        handleClick(e);
-        // Call original onClick if it exists
-        childElement.props.onClick?.(e);
-      },
-      'data-testid': dataTestId ? `${dataTestId}-trigger` : undefined,
-    });
+  const childWithProps = React.cloneElement(childElement, {
+    onClick: (e: React.MouseEvent) => {
+      handleClick(e);
+      // Call original onClick if it exists
+      childElement.props.onClick?.(e);
+    },
+    "data-testid": dataTestId ? `${dataTestId}-trigger` : undefined,
+  });
 
-    return (
-      <div ref={wrapperRef} className={className}>
-        <StyledTooltip
-          ref={ref}
-          customVariant={variant}
-          customSize={size}
-          glow={glow}
-          pulse={pulse}
-          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: { maxWidth: tooltipCap(maxWidth) },
-              role: 'tooltip',
-              ...(dataTestId && { 'data-testid': `${dataTestId}-content` }),
-            },
-          }}
-          {...props}
-        >
-          {childWithProps}
-        </StyledTooltip>
-      </div>
-    );
-  },
-);
+  return (
+    <div ref={wrapperRef} className={className}>
+      <MuiTooltip
+        ref={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: Theme) => ({ color: arrowColor(theme, variant) }),
+          },
+        }}
+        {...props}
+      >
+        {childWithProps}
+      </MuiTooltip>
+    </div>
+  );
+});
 
-InteractiveTooltip.displayName = 'InteractiveTooltip';
+InteractiveTooltip.displayName = "InteractiveTooltip";

package/src/components/data-display/Tooltip/Tooltip.tsx

@@ -1,11 +1,11 @@
-import MuiTooltip from '@mui/material/Tooltip/index.js';
-import { alpha, keyframes, styled } from '@mui/material/styles/index.js';
-import type { CSSObject, Theme } from '@mui/material/styles/index.js';
-import React from 'react';
+import MuiTooltip from "@mui/material/Tooltip/index.js";
+import { alpha, keyframes } from "@mui/material/styles/index.js";
+import type { CSSObject, Theme } from "@mui/material/styles/index.js";
+import React from "react";
 
-import type { TooltipProps } from './Tooltip.types';
-import { absoluteInk, neutralTones } from '../../../tokens/ink';
-import { rem, rems, sxRem } from '../../../tokens/relative';
+import type { TooltipProps } from "./Tooltip.types";
+import { absoluteInk, neutralTones } from "../../../tokens/ink";
+import { rem, rems, sxRem } from "../../../tokens/relative";
 
 // Define pulse animation
 const pulseAnimation = keyframes`
@@ -36,24 +36,24 @@ const getSizeStyles = (
 
 const variantStyles = (theme: Theme, variant?: string): CSSObject => {
   switch (variant) {
-    case 'default':
+    case "default":
       return {
-        backgroundColor: alpha(neutralTones(theme).inverseSurface, 0.9),
+        backgroundColor: neutralTones(theme).inverseSurface,
         color: absoluteInk(theme).white,
       };
-    case 'dark':
+    case "dark":
       return {
         backgroundColor: neutralTones(theme).inverseSurface,
         color: absoluteInk(theme).white,
       };
-    case 'light':
+    case "light":
       return {
         backgroundColor: absoluteInk(theme).white,
         color: theme.palette.text.primary,
         border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
         boxShadow: theme.shadows[4],
       };
-    case 'glass':
+    case "glass":
       return {
         backgroundColor: alpha(theme.palette.background.paper, 0.1),
         backdropFilter: `blur(${rem(theme, 20)})`,
@@ -67,10 +67,14 @@ const variantStyles = (theme: Theme, variant?: string): CSSObject => {
 
 // glow and pulse are independent flags. The three combinations used to be spelled
 // out one by one, but each is just the union of whichever flags are set.
-const emphasisStyles = (theme: Theme, glow?: boolean, pulse?: boolean): CSSObject => ({
+const emphasisStyles = (
+  theme: Theme,
+  glow?: boolean,
+  pulse?: boolean,
+): CSSObject => ({
   ...(glow && {
     boxShadow: `${rems(theme, 0, 0, 15, 3)} ${alpha(theme.palette.primary.main, 0.4)} !important`,
-    filter: 'brightness(1.05)',
+    filter: "brightness(1.05)",
   }),
   ...(pulse && {
     animation: `${pulseAnimation} 2s infinite`,
@@ -79,46 +83,48 @@ const emphasisStyles = (theme: Theme, glow?: boolean, pulse?: boolean): CSSObjec
 
 const arrowColor = (theme: Theme, variant?: string): string => {
   switch (variant) {
-    case 'light':
+    case "light":
       return absoluteInk(theme).white;
-    case 'glass':
+    case "glass":
       return alpha(theme.palette.background.paper, 0.1);
-    case 'dark':
+    case "dark":
       return neutralTones(theme).inverseSurface;
     default:
-      return alpha(neutralTones(theme).inverseSurface, 0.9);
+      return neutralTones(theme).inverseSurface;
   }
 };
 
-const StyledTooltip = styled(MuiTooltip, {
-  shouldForwardProp: (prop) =>
-    !['customVariant', 'customSize', 'glow', 'pulse'].includes(prop as string),
-})<{
-  customVariant?: string;
-  customSize?: string;
-  glow?: boolean;
-  pulse?: boolean;
-}>(({ theme, customVariant, customSize, glow, pulse }) => {
-  const sizeStyles = getSizeStyles(customSize);
-
-  return {
-    '& .MuiTooltip-tooltip': {
+/**
+ * The bubble's own look, applied to the BUBBLE (FUT-3093).
+ *
+ * It used to sit on a `styled(MuiTooltip)` root as `& .MuiTooltip-tooltip`, but
+ * MUI renders the bubble in a portal, outside that root — so none of it ever
+ * reached the screen, and every tooltip wore MUI's see-through grey instead of
+ * the variant it asked for. `slotProps.tooltip.sx` lands on the bubble itself.
+ * No `overflow: hidden`: now that it applies, it would clip an `arrow`.
+ */
+const bubbleSx =
+  (
+    variant: string,
+    size: string,
+    glow: boolean,
+    pulse: boolean,
+    maxWidth: number | undefined,
+  ) =>
+  (theme: Theme): CSSObject => {
+    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',
-      overflow: 'hidden',
-      ...variantStyles(theme, customVariant),
+      transition: "all 0.3s ease",
+      position: "relative",
+      maxWidth: tooltipCap(maxWidth)(theme),
+      ...variantStyles(theme, variant),
       ...emphasisStyles(theme, glow, pulse),
-    },
-
-    '& .MuiTooltip-arrow': {
-      color: arrowColor(theme, customVariant),
-    },
+    };
   };
-});
 
 /**
  * The tooltip's cap: 300 design px unless the caller says otherwise. `sx` has
@@ -134,8 +140,8 @@ const tooltipCap =
 export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
   (
     {
-      variant = 'default',
-      size = 'md',
+      variant = "default",
+      size = "md",
       glow = false,
       pulse = false,
       maxWidth,
@@ -146,18 +152,17 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
     ref,
   ) => {
     const childWithTestId = dataTestId
-      ? React.cloneElement(children as React.ReactElement<{ 'data-testid'?: string }>, {
-          'data-testid': `${dataTestId}-trigger`,
-        })
+      ? React.cloneElement(
+          children as React.ReactElement<{ "data-testid"?: string }>,
+          {
+            "data-testid": `${dataTestId}-trigger`,
+          },
+        )
       : children;
 
     return (
-      <StyledTooltip
+      <MuiTooltip
         ref={ref}
-        customVariant={variant}
-        customSize={size}
-        glow={glow}
-        pulse={pulse}
         enterDelay={0}
         leaveDelay={0}
         disableHoverListener={false}
@@ -165,17 +170,20 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
         disableTouchListener={false}
         slotProps={{
           tooltip: {
-            sx: { maxWidth: tooltipCap(maxWidth) },
-            role: 'tooltip',
-            ...(dataTestId && { 'data-testid': `${dataTestId}-content` }),
+            sx: bubbleSx(variant, size, glow, pulse, maxWidth),
+            role: "tooltip",
+            ...(dataTestId && { "data-testid": `${dataTestId}-content` }),
+          },
+          arrow: {
+            sx: (theme: Theme) => ({ color: arrowColor(theme, variant) }),
           },
         }}
         {...props}
       >
         {childWithTestId}
-      </StyledTooltip>
+      </MuiTooltip>
     );
   },
 );
 
-Tooltip.displayName = 'Tooltip';
+Tooltip.displayName = "Tooltip";

package/dist/chunk-TQCQCW2P.js.map

@@ -1 +0,0 @@
-{"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: alpha(neutralTones(theme).inverseSurface, 0.92),\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 alpha(neutralTones(theme).inverseSurface, 0.92);\n  }\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-TYBZ4XZZ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/Tooltip/Tooltip.tsx"],"sourcesContent":["import MuiTooltip from '@mui/material/Tooltip/index.js';\nimport { alpha, keyframes, styled } 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: alpha(neutralTones(theme).inverseSurface, 0.9),\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 = (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\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 alpha(neutralTones(theme).inverseSurface, 0.9);\n  }\n};\n\nconst StyledTooltip = styled(MuiTooltip, {\n  shouldForwardProp: (prop) =>\n    !['customVariant', 'customSize', 'glow', 'pulse'].includes(prop as string),\n})<{\n  customVariant?: string;\n  customSize?: string;\n  glow?: boolean;\n  pulse?: boolean;\n}>(({ theme, customVariant, customSize, glow, pulse }) => {\n  const sizeStyles = getSizeStyles(customSize);\n\n  return {\n    '& .MuiTooltip-tooltip': {\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      overflow: 'hidden',\n      ...variantStyles(theme, customVariant),\n      ...emphasisStyles(theme, glow, pulse),\n    },\n\n    '& .MuiTooltip-arrow': {\n      color: arrowColor(theme, customVariant),\n    },\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(children as React.ReactElement<{ 'data-testid'?: string }>, {\n          'data-testid': `${dataTestId}-trigger`,\n        })\n      : children;\n\n    return (\n      <StyledTooltip\n        ref={ref}\n        customVariant={variant}\n        customSize={size}\n        glow={glow}\n        pulse={pulse}\n        enterDelay={0}\n        leaveDelay={0}\n        disableHoverListener={false}\n        disableFocusListener={false}\n        disableTouchListener={false}\n        slotProps={{\n          tooltip: {\n            sx: { maxWidth: tooltipCap(maxWidth) },\n            role: 'tooltip',\n            ...(dataTestId && { 'data-testid': `${dataTestId}-content` }),\n          },\n        }}\n        {...props}\n      >\n        {childWithTestId}\n      </StyledTooltip>\n    );\n  },\n);\n\nTooltip.displayName = 'Tooltip';\n"],"mappings":"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","names":[]}