@12-apps/ui 6.36.0 → 6.38.0

package/dist/_internal/components/utility/AnimatedIcon/AnimatedIcon.js

@@ -1,9 +1,9 @@
 import {
   AnimatedIcon,
   AnimatedIcon_default
-} from "../../../../chunk-VYSFKR32.js";
-import "../../../../chunk-6QLPSMTA.js";
-import "../../../../chunk-3T5Z5HXF.js";
+} from "../../../../chunk-75CGLX6Q.js";
+import "../../../../chunk-XEWMY4ZM.js";
+import "../../../../chunk-KM3Y5TCG.js";
 import "../../../../chunk-HPK33ACY.js";
 import "../../../../chunk-FQ6UW7IY.js";
 import "../../../../chunk-6JAIFIPW.js";

package/dist/_internal/components/utility/AnimatedIcon/AnimatedIcon.styles.js

@@ -1,8 +1,8 @@
 import {
   iconSx,
   sizeConfigs
-} from "../../../../chunk-6QLPSMTA.js";
-import "../../../../chunk-3T5Z5HXF.js";
+} from "../../../../chunk-XEWMY4ZM.js";
+import "../../../../chunk-KM3Y5TCG.js";
 import "../../../../chunk-FQ6UW7IY.js";
 import "../../../../chunk-6JAIFIPW.js";
 import "../../../../chunk-N3GAFIXG.js";

package/dist/_internal/components/utility/AspectRatio/AspectRatio.js

@@ -1,6 +1,7 @@
 import {
   AspectRatio
-} from "../../../../chunk-N52O2OKZ.js";
+} from "../../../../chunk-3NNO6YIH.js";
+import "../../../../chunk-YKCAJ2TN.js";
 import "../../../../chunk-PZ5AY32C.js";
 export {
   AspectRatio

package/dist/_internal/components/utility/WorkflowStep/WorkflowStep.js

@@ -1,9 +1,9 @@
 import {
   WorkflowStep,
   WorkflowStep_default
-} from "../../../../chunk-EOW2ECB3.js";
-import "../../../../chunk-R75DZ3AK.js";
-import "../../../../chunk-OATHOXIU.js";
+} from "../../../../chunk-SNURSSTN.js";
+import "../../../../chunk-BVLMKSHX.js";
+import "../../../../chunk-MC4KYGSX.js";
 import "../../../../chunk-V5KKBMAT.js";
 import "../../../../chunk-FQ6UW7IY.js";
 import "../../../../chunk-6JAIFIPW.js";

package/dist/_internal/components/utility/WorkflowStep/WorkflowStep.parts.js

@@ -3,7 +3,7 @@ import {
   StepContentComponent,
   StepIndicatorComponent,
   StepItemRow
-} from "../../../../chunk-OATHOXIU.js";
+} from "../../../../chunk-MC4KYGSX.js";
 import "../../../../chunk-V5KKBMAT.js";
 import "../../../../chunk-FQ6UW7IY.js";
 import "../../../../chunk-6JAIFIPW.js";

package/dist/_internal/components/utility/WorkflowStep/WorkflowStepRow.js

@@ -1,7 +1,7 @@
 import {
   StepRow
-} from "../../../../chunk-R75DZ3AK.js";
-import "../../../../chunk-OATHOXIU.js";
+} from "../../../../chunk-BVLMKSHX.js";
+import "../../../../chunk-MC4KYGSX.js";
 import "../../../../chunk-V5KKBMAT.js";
 import "../../../../chunk-FQ6UW7IY.js";
 import "../../../../chunk-6JAIFIPW.js";

package/dist/_internal/components/utility/index.js

@@ -2,20 +2,20 @@ import "../../../chunk-SS4MHTGU.js";
 import "../../../chunk-IO36MEBD.js";
 import {
   WorkflowStep
-} from "../../../chunk-EOW2ECB3.js";
-import "../../../chunk-R75DZ3AK.js";
-import "../../../chunk-OATHOXIU.js";
+} from "../../../chunk-SNURSSTN.js";
+import "../../../chunk-BVLMKSHX.js";
+import "../../../chunk-MC4KYGSX.js";
 import "../../../chunk-V5KKBMAT.js";
 import "../../../chunk-H2PTB6FD.js";
 import {
   AnimatedIcon
-} from "../../../chunk-VYSFKR32.js";
-import "../../../chunk-6QLPSMTA.js";
-import "../../../chunk-3T5Z5HXF.js";
+} from "../../../chunk-75CGLX6Q.js";
+import "../../../chunk-XEWMY4ZM.js";
+import "../../../chunk-KM3Y5TCG.js";
 import "../../../chunk-IYM4LTA5.js";
 import {
   AspectRatio
-} from "../../../chunk-N52O2OKZ.js";
+} from "../../../chunk-3NNO6YIH.js";
 import "../../../chunk-H7NA4TXY.js";
 import {
   InfiniteScroll

package/dist/_internal/social-login-button/social-login-button.js

@@ -5,28 +5,27 @@ import {
   GoogleIcon,
   SocialLoginButton,
   SocialLoginContainer
-} from "../../chunk-I62ALI7F.js";
+} from "../../chunk-3FNXOCBD.js";
 import "../../chunk-INGPH3YQ.js";
 import "../../chunk-6GP2DOOO.js";
 import "../../chunk-IJFAF3A7.js";
 import "../../chunk-5JSRM7WC.js";
 import "../../chunk-LKMMJKXU.js";
 import "../../chunk-CMMPGAMJ.js";
-import "../../chunk-Q4CAZ2TP.js";
-import "../../chunk-CAHWCSRE.js";
+import "../../chunk-IG23YZZR.js";
+import "../../chunk-D46SLMCX.js";
 import "../../chunk-VUHLNYAE.js";
 import "../../chunk-2GSIEDGN.js";
-import "../../chunk-N6CSXHFJ.js";
+import "../../chunk-WN5PNP6F.js";
 import "../../chunk-FKUYRQSP.js";
-import "../../chunk-LVEG6XQL.js";
+import "../../chunk-76X6JRVI.js";
 import "../../chunk-JH7EEJEQ.js";
 import "../../chunk-BA4RHQ3B.js";
-import "../../chunk-73BEVJCS.js";
-import "../../chunk-KH25WUSX.js";
-import "../../chunk-HBICO6AX.js";
+import "../../chunk-2EAAWOZ2.js";
+import "../../chunk-4WNFOBTH.js";
 import "../../chunk-LN46DSMF.js";
 import "../../chunk-TAMIZE4Q.js";
-import "../../chunk-WTOYEWW6.js";
+import "../../chunk-YBH4SPMM.js";
 import "../../chunk-U3PPLAFB.js";
 import "../../chunk-TYJR4GOF.js";
 import "../../chunk-PT6TCWIW.js";

package/dist/_internal/tokens/shadow.js

@@ -1,12 +1,23 @@
-import {
-  BLACK,
-  WHITE,
-  drop,
-  halo,
-  shadowCss,
-  shadowListCss
-} from "../../chunk-73BEVJCS.js";
 import "../../chunk-PZ5AY32C.js";
+
+// src/tokens/shadow.ts
+var len = (value) => value === 0 ? "0" : `${value}px`;
+var shadowCss = (shadow) => [
+  len(shadow.offsetX),
+  len(shadow.offsetY),
+  len(shadow.blurRadius),
+  ...shadow.spreadDistance === 0 ? [] : [len(shadow.spreadDistance)],
+  shadow.color
+].join(" ");
+var shadowListCss = (shadows) => shadows.map(shadowCss).join(", ");
+var BLACK = "#000";
+var WHITE = "#fff";
+var halo = (blurRadius, color) => [
+  { offsetX: 0, offsetY: 0, blurRadius, spreadDistance: 0, color }
+];
+var drop = (offsetY, blurRadius, color) => [
+  { offsetX: 0, offsetY, blurRadius, spreadDistance: 0, color }
+];
 export {
   BLACK,
   WHITE,

package/dist/_internal/tokens/shadow.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
+{"version":3,"sources":["../../../src/tokens/shadow.ts"],"sourcesContent":["/**\n * ONE SHADOW, IN THE SHAPE BOTH RENDERERS READ.\n *\n * A drop shadow is one of the few decorations the two sides express in the same\n * numbers and different syntax: CSS wants `0 8px 32px rgba(…)`, React Native\n * wants `{ offsetX, offsetY, blurRadius, spreadDistance, color }` (its\n * `BoxShadowValue`, which `boxShadow` takes an array of). So the numbers live in\n * a component's `*.metrics.ts` as this object, native passes it straight\n * through, and the web renders it with {@link shadowCss}.\n *\n * {@link shadowCss} reproduces the text the web components already wrote by\n * hand: a bare `0` for a zero length, and no spread at all when the spread is\n * zero. That is what makes moving a shadow into a metrics table a refactor\n * rather than a restyle.\n */\nexport interface UiShadow {\n  offsetX: number;\n  offsetY: number;\n  blurRadius: number;\n  spreadDistance: number;\n  color: string;\n}\n\n/** A length the way the web writes it: a bare `0`, otherwise px. */\nconst len = (value: number): string => (value === 0 ? '0' : `${value}px`);\n\n/** One shadow as CSS. A zero spread is omitted, as the web has always written it. */\nexport const shadowCss = (shadow: UiShadow): string =>\n  [\n    len(shadow.offsetX),\n    len(shadow.offsetY),\n    len(shadow.blurRadius),\n    ...(shadow.spreadDistance === 0 ? [] : [len(shadow.spreadDistance)]),\n    shadow.color,\n  ].join(' ');\n\n/** Several shadows as one CSS declaration. */\nexport const shadowListCss = (shadows: readonly UiShadow[]): string =>\n  shadows.map(shadowCss).join(', ');\n\n/**\n * MUI's `palette.common`, which `UiTheme` has no slot for.\n *\n * Here rather than beside each caller because the neumorphic, glass and scrim\n * arithmetic in more than one component mixes from exactly these two, and a\n * per-component copy is a per-component chance to write `#000000`.\n */\nexport const BLACK = '#000';\nexport const WHITE = '#fff';\n\n/** A shadow with no offset — a halo all round, which is how `glow` reads. */\nexport const halo = (blurRadius: number, color: string): UiShadow[] => [\n  { offsetX: 0, offsetY: 0, blurRadius, spreadDistance: 0, color },\n];\n\n/** A dropped shadow straight down, which is how a lifted surface sits. */\nexport const drop = (offsetY: number, blurRadius: number, color: string): UiShadow[] => [\n  { offsetX: 0, offsetY, blurRadius, spreadDistance: 0, color },\n];\n"],"mappings":";;;AAwBA,IAAM,MAAM,CAAC,UAA2B,UAAU,IAAI,MAAM,GAAG,KAAK;AAG7D,IAAM,YAAY,CAAC,WACxB;AAAA,EACE,IAAI,OAAO,OAAO;AAAA,EAClB,IAAI,OAAO,OAAO;AAAA,EAClB,IAAI,OAAO,UAAU;AAAA,EACrB,GAAI,OAAO,mBAAmB,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,cAAc,CAAC;AAAA,EAClE,OAAO;AACT,EAAE,KAAK,GAAG;AAGL,IAAM,gBAAgB,CAAC,YAC5B,QAAQ,IAAI,SAAS,EAAE,KAAK,IAAI;AAS3B,IAAM,QAAQ;AACd,IAAM,QAAQ;AAGd,IAAM,OAAO,CAAC,YAAoB,UAA8B;AAAA,EACrE,EAAE,SAAS,GAAG,SAAS,GAAG,YAAY,gBAAgB,GAAG,MAAM;AACjE;AAGO,IAAM,OAAO,CAAC,SAAiB,YAAoB,UAA8B;AAAA,EACtF,EAAE,SAAS,GAAG,SAAS,YAAY,gBAAgB,GAAG,MAAM;AAC9D;","names":[]}

package/dist/_internal/user-avatar/user-avatar.js

@@ -2,7 +2,7 @@
 import {
   UserAvatar,
   UserMenu
-} from "../../chunk-2UCLUDEB.js";
+} from "../../chunk-SKT2V2OX.js";
 import "../../chunk-UDQSIRAP.js";
 import "../../chunk-PGPPN63I.js";
 import "../../chunk-TNQDSTIA.js";
@@ -11,17 +11,16 @@ import "../../chunk-3ZVUNSFF.js";
 import "../../chunk-MTEQEPNY.js";
 import "../../chunk-VUHLNYAE.js";
 import "../../chunk-2GSIEDGN.js";
-import "../../chunk-N6CSXHFJ.js";
+import "../../chunk-WN5PNP6F.js";
 import "../../chunk-FKUYRQSP.js";
-import "../../chunk-LVEG6XQL.js";
+import "../../chunk-76X6JRVI.js";
 import "../../chunk-JH7EEJEQ.js";
 import "../../chunk-BA4RHQ3B.js";
-import "../../chunk-73BEVJCS.js";
-import "../../chunk-KH25WUSX.js";
-import "../../chunk-HBICO6AX.js";
+import "../../chunk-2EAAWOZ2.js";
+import "../../chunk-4WNFOBTH.js";
 import "../../chunk-LN46DSMF.js";
 import "../../chunk-TAMIZE4Q.js";
-import "../../chunk-WTOYEWW6.js";
+import "../../chunk-YBH4SPMM.js";
 import "../../chunk-U3PPLAFB.js";
 import "../../chunk-TYJR4GOF.js";
 import "../../chunk-CGO452DC.js";

package/dist/{chunk-BLJDCMFU.js → chunk-2ARVNCVU.js}

@@ -1,6 +1,6 @@
 import {
   ShortcutChip
-} from "./chunk-RNEYZTE4.js";
+} from "./chunk-Z6MCTGIK.js";
 import {
   rem,
   sxRem
@@ -18,18 +18,18 @@ import Typography from "@mui/material/Typography/index.js";
 import { alpha, styled } from "@mui/material/styles/index.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var ResultsList = styled(List)(({ theme }) => ({
-  maxHeight: 400,
+  maxHeight: rem(theme, 400),
   overflowY: "auto",
   padding: theme.spacing(1),
   "&::-webkit-scrollbar": {
-    width: 8
+    width: rem(theme, 8)
   },
   "&::-webkit-scrollbar-track": {
     background: alpha(theme.palette.action.disabled, 0.1)
   },
   "&::-webkit-scrollbar-thumb": {
     background: alpha(theme.palette.primary.main, 0.3),
-    borderRadius: 4,
+    borderRadius: rem(theme, 4),
     "&:hover": {
       background: alpha(theme.palette.primary.main, 0.5)
     }
@@ -42,7 +42,7 @@ var CommandItem = styled(ListItem)(({ theme, selected }) => ({
   cursor: "pointer",
   ...selected && {
     backgroundColor: alpha(theme.palette.primary.main, 0.12),
-    transform: "translateX(4px)",
+    transform: `translateX(${rem(theme, 4)})`,
     "& .MuiListItemIcon-root": {
       color: theme.palette.primary.main
     }
@@ -74,7 +74,7 @@ var CommandRow = ({ command, index, selected, dataTestId, onSelect, onExecute })
     onClick: () => onExecute(command),
     onMouseEnter: () => onSelect(index),
     children: [
-      command.icon && /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 40 }, children: command.icon }),
+      command.icon && /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: sxRem(40) }, children: command.icon }),
       /* @__PURE__ */ jsx(
         ListItemText,
         {
@@ -151,4 +151,4 @@ var PaletteResults = ({
 export {
   PaletteResults
 };
-//# sourceMappingURL=chunk-BLJDCMFU.js.map
+//# sourceMappingURL=chunk-2ARVNCVU.js.map

package/dist/chunk-2ARVNCVU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/CommandPalette/CommandPaletteResults.tsx"],"sourcesContent":["import RecentIcon from '@mui/icons-material/History';\nimport Box from '@mui/material/Box/index.js';\nimport Divider from '@mui/material/Divider/index.js';\nimport List from '@mui/material/List/index.js';\nimport ListItem from '@mui/material/ListItem/index.js';\nimport ListItemIcon from '@mui/material/ListItemIcon/index.js';\nimport ListItemText from '@mui/material/ListItemText/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, styled } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { ShortcutChip } from './ShortcutChip';\nimport type { PaletteCommand } from './CommandPalette.types';\nimport type { CommandPaletteCopy } from '../../../copy';\nimport { rem, sxRem } from '../../../tokens/relative';\n\nconst ResultsList = styled(List)(({ theme }) => ({\n  maxHeight: rem(theme, 400),\n  overflowY: 'auto',\n  padding: theme.spacing(1),\n  '&::-webkit-scrollbar': {\n    width: rem(theme, 8),\n  },\n  '&::-webkit-scrollbar-track': {\n    background: alpha(theme.palette.action.disabled, 0.1),\n  },\n  '&::-webkit-scrollbar-thumb': {\n    background: alpha(theme.palette.primary.main, 0.3),\n    borderRadius: rem(theme, 4),\n    '&:hover': {\n      background: alpha(theme.palette.primary.main, 0.5),\n    },\n  },\n}));\n\nconst CommandItem = styled(ListItem)<{ selected?: boolean }>(({ theme, selected }) => ({\n  borderRadius: theme.shape.borderRadius,\n  marginBottom: theme.spacing(0.5),\n  transition: theme.transitions.create(['background-color', 'transform']),\n  cursor: 'pointer',\n  ...(selected && {\n    backgroundColor: alpha(theme.palette.primary.main, 0.12),\n    transform: `translateX(${rem(theme, 4)})`,\n    '& .MuiListItemIcon-root': {\n      color: theme.palette.primary.main,\n    },\n  }),\n  '&:hover': {\n    backgroundColor: alpha(theme.palette.primary.main, 0.08),\n  },\n}));\n\nconst CategoryLabel = styled(Typography)(({ theme }) => ({\n  fontSize: rem(theme, 12),\n  fontWeight: 600,\n  color: theme.palette.text.secondary,\n  textTransform: 'uppercase',\n  letterSpacing: '0.1em',\n  padding: theme.spacing(1, 2, 0.5, 2),\n  marginTop: theme.spacing(1),\n}));\n\nconst NoResults = styled(Box)(({ theme }) => ({\n  padding: theme.spacing(4, 2),\n  textAlign: 'center',\n  color: theme.palette.text.secondary,\n}));\n\nconst CommandRow: React.FC<{\n  command: PaletteCommand;\n  index: number;\n  selected: boolean;\n  dataTestId?: string;\n  onSelect: (index: number) => void;\n  onExecute: (command: PaletteCommand) => void;\n}> = ({ command, index, selected, dataTestId, onSelect, onExecute }) => (\n  <CommandItem\n    data-index={index}\n    data-testid={`${dataTestId}-item-${command.id}`}\n    selected={selected}\n    onClick={() => onExecute(command)}\n    onMouseEnter={() => onSelect(index)}\n  >\n    {command.icon && <ListItemIcon sx={{ minWidth: sxRem(40) }}>{command.icon}</ListItemIcon>}\n    <ListItemText\n      primary={command.label}\n      secondary={command.description}\n      primaryTypographyProps={{ fontSize: sxRem(14.4), fontWeight: selected ? 500 : 400 }}\n      secondaryTypographyProps={{ fontSize: sxRem(12) }}\n    />\n    {command.shortcut && <ShortcutChip label={command.shortcut} size=\"small\" />}\n  </CommandItem>\n);\n\nconst slug = (value: string) => value.toLowerCase().replace(/\\s+/g, '-');\n\n// The list, its recent section and the empty state. The running commandIndex\n// has to stay consistent across both sections, so it is threaded through here\n// rather than mutated from inside the render as it was before.\nexport const PaletteResults: React.FC<{\n  copy: CommandPaletteCopy;\n  listRef: React.Ref<globalThis.HTMLUListElement>;\n  dataTestId?: string;\n  searchQuery: string;\n  showRecent?: boolean;\n  commands: PaletteCommand[];\n  recentCommandIds: string[];\n  filteredCommands: PaletteCommand[];\n  groupedCommands: Record<string, PaletteCommand[]>;\n  selectedIndex: number;\n  onSelect: (index: number) => void;\n  onExecute: (command: PaletteCommand) => void;\n}> = ({\n  copy,\n  listRef,\n  dataTestId,\n  searchQuery,\n  showRecent,\n  commands,\n  recentCommandIds,\n  filteredCommands,\n  groupedCommands,\n  selectedIndex,\n  onSelect,\n  onExecute,\n}) => {\n  if (filteredCommands.length === 0) {\n    return (\n      <NoResults data-testid={`${dataTestId}-no-results`}>\n        <Typography variant=\"body2\" color=\"text.secondary\">\n          No commands found for \"{searchQuery}\"\n        </Typography>\n        <Typography variant=\"caption\" color=\"text.disabled\" sx={{ mt: 1 }}>\n          {copy.tryAnotherTerm}\n        </Typography>\n      </NoResults>\n    );\n  }\n\n  const showRecentSection = !searchQuery && showRecent && recentCommandIds.length > 0;\n  const recent = showRecentSection\n    ? (recentCommandIds\n        .map((id) => commands.find((command) => command.id === id))\n        .filter(Boolean) as PaletteCommand[])\n    : [];\n\n  // One running index across both sections, so keyboard selection lines up with\n  // what is on screen.\n  let commandIndex = 0;\n  const row = (command: PaletteCommand) => {\n    const index = commandIndex++;\n    return (\n      <CommandRow\n        key={command.id}\n        command={command}\n        index={index}\n        selected={index === selectedIndex}\n        dataTestId={dataTestId}\n        onSelect={onSelect}\n        onExecute={onExecute}\n      />\n    );\n  };\n\n  const showCategoryLabels = Object.keys(groupedCommands).length > 1;\n\n  return (\n    <ResultsList ref={listRef} data-testid={`${dataTestId}-list`}>\n      {showRecentSection && (\n        <>\n          <CategoryLabel data-testid={`${dataTestId}-group-recent`}>\n            <RecentIcon sx={{ fontSize: sxRem(14), mr: 0.5, verticalAlign: 'middle' }} />\n            {copy.recent}\n          </CategoryLabel>\n          {recent.map(row)}\n          {filteredCommands.length > recentCommandIds.length && <Divider sx={{ my: 1 }} />}\n        </>\n      )}\n\n      {Object.entries(groupedCommands).map(([category, categoryCommands]) => (\n        <Box key={category} data-testid={`${dataTestId}-group-${slug(category)}`}>\n          {showCategoryLabels && (\n            <CategoryLabel data-testid={`${dataTestId}-group-label-${slug(category)}`}>\n              {category}\n            </CategoryLabel>\n          )}\n          {categoryCommands.map(row)}\n        </Box>\n      ))}\n    </ResultsList>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-KH25WUSX.js → chunk-2EAAWOZ2.js}

@@ -4,7 +4,7 @@ import {
   buttonVariantStyles,
   getColorFromTheme,
   iconAlignmentStyles
-} from "./chunk-HBICO6AX.js";
+} from "./chunk-4WNFOBTH.js";
 import {
   BUTTON_ICON_GLYPH_SIZE
 } from "./chunk-LN46DSMF.js";
@@ -44,7 +44,7 @@ var StyledButton = styled(MuiButton, {
     overflow: "hidden",
     ...iconAlignmentStyles(theme),
     ...buttonVariantStyles(theme, customVariant, colorPalette, customColor),
-    ...buttonEmphasisStyles(colorPalette, glow, pulse)
+    ...buttonEmphasisStyles(theme, colorPalette, glow, pulse)
   };
 });
 var muiVariantFor = (variant) => {
@@ -117,7 +117,7 @@ var ButtonRoot = React.forwardRef(
         "data-testid": ownTestId,
         ...props,
         className: mergedClassName,
-        children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 16, color: "inherit", "data-testid": testId("loading") }) : children
+        children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: rem(theme, 16), color: "inherit", "data-testid": testId("loading") }) : children
       }
     );
   }
@@ -128,4 +128,4 @@ var Button = ButtonRoot;
 export {
   Button
 };
-//# sourceMappingURL=chunk-KH25WUSX.js.map
+//# sourceMappingURL=chunk-2EAAWOZ2.js.map

package/dist/chunk-2EAAWOZ2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Button/Button.tsx"],"sourcesContent":["import MuiButton from '@mui/material/Button/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport { styled, useTheme } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport * as React from 'react';\n\nimport { resolveButtonProps } from './Button.helpers';\nimport { BUTTON_ICON_GLYPH_SIZE } from './Button.metrics';\nimport { childTestId, resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport { fieldRadius } from '../../../tokens/field-radius';\nimport { rem } from '../../../tokens/relative';\nimport {\n  buttonEmphasisStyles,\n  buttonVariantStyles,\n  getColorFromTheme,\n  iconAlignmentStyles,\n  buttonSize,\n} from './Button.styles';\nimport type { ButtonComponent, ButtonProps } from './Button.types';\n\nconst StyledButton = styled(MuiButton, {\n  shouldForwardProp: (prop) =>\n    ['glow', 'pulse', 'loading', 'customVariant', 'customColor', 'ripple'].indexOf(\n      prop as string,\n    ) === -1,\n})<{\n  customVariant?: string;\n  customColor?: string;\n  glow?: boolean;\n  pulse?: boolean;\n  ripple?: boolean;\n}>(({ theme, customVariant, customColor = 'primary', glow, pulse }) => {\n  const colorPalette = getColorFromTheme(theme, customColor);\n\n  return {\n    textTransform: 'none',\n    fontWeight: 500,\n    borderRadius: fieldRadius(theme),\n    transition: 'all 0.3s ease',\n    position: 'relative',\n    overflow: 'hidden',\n    ...iconAlignmentStyles(theme),\n    ...buttonVariantStyles(theme, customVariant, colorPalette, customColor),\n    ...buttonEmphasisStyles(theme, colorPalette, glow, pulse),\n  };\n});\n\n/** Our six variants collapse onto MUI's three; only outline and text differ. */\nconst muiVariantFor = (variant?: string): 'outlined' | 'text' | 'contained' => {\n  if (variant === 'outline') return 'outlined';\n  return variant === 'text' ? 'text' : 'contained';\n};\n\ntype MuiButtonColor = 'inherit' | 'primary' | 'secondary' | 'success' | 'warning' | 'info' | 'error';\n\n/**\n * Our five sizes collapse onto MUI's three, so the rendered class NAMES the\n * size the button actually is (12-74).\n *\n * It was never forwarded, so every button — `xs` through `xl` — carried\n * `MuiButton-sizeMedium`. The pixels were right (they come from `buttonSize`'s\n * `sx`, which still decides them) but the DOM said \"medium\" about a large\n * button: a test could never assert the size, and devtools lied to whoever\n * opened them.\n *\n * MUI's own size styles are padding, font-size and the icon glyph. The first\n * two are overridden by that same `sx`; the third is pinned by\n * `BUTTON_ICON_GLYPH_SIZE`, so forwarding this moves nothing on screen.\n */\nconst muiSizeFor = (size: NonNullable<ButtonProps['size']>): 'small' | 'medium' | 'large' => {\n  if (size === 'xs' || size === 'sm') return 'small';\n  return size === 'md' ? 'medium' : 'large';\n};\n\n/** `danger` and `neutral` are ours; the rest are MUI's own names already. */\nconst muiColorFor = (color: NonNullable<ButtonProps['color']>): MuiButtonColor => {\n  if (color === 'danger') return 'error';\n  return color === 'neutral' ? 'inherit' : color;\n};\n\n/**\n * The icon slot's font-size, pinned on the wrapper this component already owns\n * (12-74).\n *\n * MUI writes 18/20/22 there off its own `size`, and that prop is now forwarded,\n * so a glyph that takes its size by INHERITANCE would start moving with the\n * button — measured at 18px on `xs` and 22px on `lg` against the 20px every\n * size has always drawn. See {@link BUTTON_ICON_GLYPH_SIZE} for what that does\n * and does not reach.\n *\n * Written as an inline style rather than a selector in `sx` because MUI's own\n * rule sits on the start/end-icon span itself. Beating it from the root means\n * winning a specificity contest at a distance — true in a browser, but not\n * something a test can hold, since jsdom resolves `getComputedStyle` by\n * document order and never by specificity. Inline wins both, and it sits on the\n * one element we already render for this glyph.\n *\n * Through the theme's type scale (FUT-2594): `1.25rem` at MUI's defaults, which\n * is the 20px MUI was emitting before at a 16px root.\n */\nconst iconGlyphStyle = (theme: Theme) => ({ fontSize: rem(theme, BUTTON_ICON_GLYPH_SIZE) });\n\n/**\n * An icon and nothing else — the shape that should render square.\n *\n * A separate predicate rather than three clauses inline: the component function\n * is already at the complexity ceiling, and \"what counts as an icon button\" is\n * a rule worth naming anyway. `loading` disqualifies, because a spinner\n * replaces the children and would otherwise make every loading button square.\n */\nfunction isIconOnly({\n  loading,\n  icon,\n  children,\n}: Pick<ButtonProps, 'loading' | 'icon' | 'children'>): boolean {\n  return !loading && icon != null && children == null;\n}\n\n/**\n * The design system's button.\n *\n * Typed as an `OverridableComponent` (12-70) rather than a plain `forwardRef`,\n * which is how MUI models a component that can render as something else. The\n * practical difference is one line at a call site:\n *\n * ```tsx\n * <Button component={Link} to=\"/account/compras/42\">Acompanhar pedido</Button>\n * ```\n *\n * `to` is typed here because the generic carries the target component's own\n * props through. A plain `component?: React.ElementType` — what this was —\n * accepts the component and throws its props away, so `to` typechecked\n * nowhere even though it arrived intact at runtime. A host wanting a router\n * navigation painted as a button had to choose between a type assertion and\n * losing the `href`; both were shipped, and both are the reason this ticket\n * exists.\n */\nconst ButtonRoot = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (rawProps, ref) => {\n    const {\n      variant,\n      color,\n      size,\n      loading,\n      icon,\n      iconPosition,\n      glow,\n      pulse,\n      ripple,\n      active,\n      children,\n      disabled,\n      onClick,\n      onFocus,\n      onBlur,\n      ...others\n    } = resolveButtonProps(rawProps);\n    // Every spelling of the test id the shared contract allows, mapped to the\n    // one the DOM reads; the native Button does the same in reverse.\n    const ownTestId = resolveTestId(others, 'button');\n    const testId = (suffix: string) => childTestId(others, suffix, 'button');\n    const props = withoutTestIdProps(others);\n    const theme = useTheme();\n\n    // Wrap icon with testId if provided\n    const iconWithTestId =\n      !loading && icon ? (\n        <span data-testid={testId('icon')} style={iconGlyphStyle(theme)}>\n          {icon}\n        </span>\n      ) : undefined;\n\n    // Only an icon, so the button is a square rather than a 64px slab.\n    const iconOnly = isIconOnly({ loading, icon, children });\n\n    const mergedClassName =\n      [active ? 'active' : '', props.className].filter(Boolean).join(' ') || undefined;\n\n    return (\n      <StyledButton\n        ref={ref}\n        variant={muiVariantFor(variant)}\n        color={muiColorFor(color)}\n        size={muiSizeFor(size)}\n        customVariant={variant}\n        customColor={color}\n        glow={glow}\n        pulse={pulse}\n        ripple={ripple}\n        disabled={disabled || loading}\n        disableRipple={!ripple}\n        startIcon={iconPosition === 'left' ? iconWithTestId : undefined}\n        endIcon={iconPosition === 'right' ? iconWithTestId : undefined}\n        onClick={onClick}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        sx={buttonSize(size, iconOnly)}\n        data-testid={ownTestId}\n        {...props}\n        className={mergedClassName}\n      >\n        {loading ? (\n          <CircularProgress size={rem(theme, 16)} color=\"inherit\" data-testid={testId('loading')} />\n        ) : (\n          children\n        )}\n      </StyledButton>\n    );\n  },\n);\n\nButtonRoot.displayName = 'Button';\n\n/**\n * The cast is what publishes the generic — `forwardRef` cannot express\n * \"renders as C, and takes C's props\" on its own, so MUI's own components do\n * exactly this. `ButtonRoot` above is the implementation and is not exported.\n */\nexport const Button = ButtonRoot as ButtonComponent;\n"],"mappings":"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","names":[]}

package/dist/{chunk-PNLM35GU.js → chunk-2JNHWKQK.js}

@@ -3,22 +3,22 @@ import {
 } from "./chunk-PGGYZU7Q.js";
 import {
   CategoryPanelList
-} from "./chunk-TOXTJ7MU.js";
+} from "./chunk-6RLCBNDV.js";
 import {
   CategoryPanelHead,
   CategoryPinnedTray
-} from "./chunk-EFV5QJNM.js";
+} from "./chunk-ORRI6FMN.js";
 import {
   CategoryMultiFoot,
   CategorySingleFoot
-} from "./chunk-OWA7GPWR.js";
+} from "./chunk-KN5J3NEZ.js";
 import {
   removeChip
 } from "./chunk-PN4HVM43.js";
 import {
   panelSx,
   sheetSx
-} from "./chunk-BXAL7OIS.js";
+} from "./chunk-JC22FNFA.js";
 
 // src/components/form/CategorySelect/CategoryPanel.tsx
 import Box from "@mui/material/Box/index.js";
@@ -156,4 +156,4 @@ function PanelFooter({
 export {
   CategoryPanel
 };
-//# sourceMappingURL=chunk-PNLM35GU.js.map
+//# sourceMappingURL=chunk-2JNHWKQK.js.map

package/dist/{chunk-PWF32ILG.js → chunk-2OYFTSG4.js}

@@ -1,15 +1,15 @@
 import {
   SaveViewModal
-} from "./chunk-343OLRFT.js";
+} from "./chunk-MR2HKBHS.js";
 import {
   ManageViewsDialog
-} from "./chunk-YBTC4XNO.js";
+} from "./chunk-QA2ZGCRL.js";
 import {
   useDataViewsCopy
 } from "./chunk-KHG57NAE.js";
 import {
   SavedViewsMenu
-} from "./chunk-EL7CMURV.js";
+} from "./chunk-3LSIFHQK.js";
 import {
   Alert
 } from "./chunk-AUHYR7ID.js";
@@ -121,4 +121,4 @@ export {
   ViewsMenuSlot,
   ViewDialogs
 };
-//# sourceMappingURL=chunk-PWF32ILG.js.map
+//# sourceMappingURL=chunk-2OYFTSG4.js.map

package/dist/{chunk-CRZXSZ5O.js → chunk-2S752BIJ.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-KHG57NAE.js";
 import {
   Pagination
-} from "./chunk-YVUD3MY4.js";
+} from "./chunk-N23GCN5U.js";
 import {
   default as default2
 } from "./chunk-6DPAWXZ3.js";
@@ -31,4 +31,4 @@ function DataViewsPagination({
 export {
   DataViewsPagination
 };
-//# sourceMappingURL=chunk-CRZXSZ5O.js.map
+//# sourceMappingURL=chunk-2S752BIJ.js.map

package/dist/{chunk-IYTBTK2M.js → chunk-2WU52FLP.js}

@@ -10,9 +10,6 @@ import {
   DIALOG_RADIUS_UNITS,
   DIALOG_WIDTH_PERCENT
 } from "./chunk-GVGJMH77.js";
-import {
-  shadowCss
-} from "./chunk-73BEVJCS.js";
 import {
   dynamicViewportHeight
 } from "./chunk-AKZWDZCZ.js";
@@ -20,16 +17,20 @@ import {
   scrim,
   shadowInk
 } from "./chunk-FQ6UW7IY.js";
+import {
+  rem,
+  rems
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/feedback/Dialog/Dialog.styles.ts
 import { alpha, keyframes } from "@mui/material/styles/index.js";
-var pulseAnimation = keyframes`
+var pulseAnimation = (theme) => keyframes`
   0% {
     box-shadow: 0 0 0 0 currentColor;
     opacity: 1;
   }
   70% {
-    box-shadow: 0 0 0 ${DIALOG_PULSE.spread}px currentColor;
+    box-shadow: 0 0 0 ${rem(theme, DIALOG_PULSE.spread)} currentColor;
     opacity: 0;
   }
   100% {
@@ -39,15 +40,15 @@ var pulseAnimation = keyframes`
 `;
 function borderRadiusOf(theme, borderRadius) {
   const units = DIALOG_RADIUS_UNITS[borderRadius] ?? DIALOG_RADIUS_UNITS.lg;
-  return units === 0 ? 0 : theme.spacing(units);
+  return units === 0 ? "0" : theme.spacing(units);
 }
-function maxWidthOf(size) {
-  return DIALOG_MAX_WIDTH[size] ?? DIALOG_MAX_WIDTH.md;
+function maxWidthOf(theme, size) {
+  return rem(theme, DIALOG_MAX_WIDTH[size] ?? DIALOG_MAX_WIDTH.md);
 }
 function baseStylesOf(theme, opts) {
   return {
     borderRadius: borderRadiusOf(theme, opts.borderRadius),
-    maxWidth: maxWidthOf(opts.size),
+    maxWidth: maxWidthOf(theme, opts.size),
     width: `${DIALOG_WIDTH_PERCENT}vw`,
     margin: theme.spacing(DIALOG_MARGIN_UNITS),
     transition: theme.transitions.create(
@@ -58,13 +59,7 @@ function baseStylesOf(theme, opts) {
 }
 function glowStylesOf(theme, glow) {
   return glow ? {
-    boxShadow: shadowCss({
-      offsetX: 0,
-      offsetY: 0,
-      blurRadius: DIALOG_GLOW.blurRadius,
-      spreadDistance: 0,
-      color: alpha(theme.palette.primary.main, DIALOG_GLOW.alpha)
-    })
+    boxShadow: `${rems(theme, 0, 0, DIALOG_GLOW.blurRadius)} ${alpha(theme.palette.primary.main, DIALOG_GLOW.alpha)}`
   } : {};
 }
 function pulseStylesOf(theme, pulse) {
@@ -81,7 +76,7 @@ function pulseStylesOf(theme, pulse) {
       borderRadius: "inherit",
       backgroundColor: theme.palette.primary.main,
       opacity: DIALOG_PULSE.alpha,
-      animation: `${pulseAnimation} ${DIALOG_PULSE.durationMs / 1e3}s infinite`,
+      animation: `${pulseAnimation(theme)} ${DIALOG_PULSE.durationMs / 1e3}s infinite`,
       pointerEvents: "none",
       zIndex: DIALOG_PULSE.zIndex
     }
@@ -90,12 +85,12 @@ function pulseStylesOf(theme, pulse) {
 function defaultVariantStyles(theme, opts) {
   const gradientStyles = opts.gradient ? {
     background: `linear-gradient(${DIALOG_GRADIENT.angleDeg}deg, ${alpha(theme.palette.primary.main, DIALOG_GRADIENT.stopAlpha)}, ${alpha(theme.palette.secondary.main, DIALOG_GRADIENT.stopAlpha)})`,
-    backdropFilter: `blur(${DIALOG_GRADIENT.blurPx}px)`
+    backdropFilter: `blur(${rem(theme, DIALOG_GRADIENT.blurPx)})`
   } : {};
   return {
     ...gradientStyles,
     backgroundColor: opts.glass ? alpha(theme.palette.background.paper, DIALOG_GLASS.backgroundAlpha) : theme.palette.background.paper,
-    backdropFilter: opts.glass ? `blur(${DIALOG_GLASS.blurPx}px)` : "none",
+    backdropFilter: opts.glass ? `blur(${rem(theme, DIALOG_GLASS.blurPx)})` : "none",
     border: opts.glass ? `${DIALOG_BORDER_WIDTH}px solid ${alpha(theme.palette.primary.main, DIALOG_GLASS.borderAlpha)}` : "none"
   };
 }
@@ -110,15 +105,9 @@ function variantStylesOf(theme, opts) {
         ...baseStylesOf(theme, opts),
         ...decorations,
         backgroundColor: alpha(theme.palette.background.paper, DIALOG_GLASS.backgroundAlpha),
-        backdropFilter: `blur(${DIALOG_GLASS.blurPx}px)`,
+        backdropFilter: `blur(${rem(theme, DIALOG_GLASS.blurPx)})`,
         border: `${DIALOG_BORDER_WIDTH}px solid ${alpha(theme.palette.primary.main, DIALOG_GLASS.borderAlpha)}`,
-        boxShadow: shadowCss({
-          offsetX: 0,
-          offsetY: DIALOG_GLASS.shadow.offsetY,
-          blurRadius: DIALOG_GLASS.shadow.blurRadius,
-          spreadDistance: 0,
-          color: shadowInk(theme, DIALOG_GLASS.shadow.alpha)
-        })
+        boxShadow: `${rems(theme, 0, DIALOG_GLASS.shadow.offsetY, DIALOG_GLASS.shadow.blurRadius)} ${shadowInk(theme, DIALOG_GLASS.shadow.alpha)}`
       };
     case "fullscreen":
       return {
@@ -139,7 +128,7 @@ function variantStylesOf(theme, opts) {
         // panel's leading corners square.
         borderRadius: `${radius} 0 0 ${radius}`,
         margin: 0,
-        width: maxWidthOf(opts.size),
+        width: maxWidthOf(theme, opts.size),
         // Never wider than the screen: a 600px panel on a 375px phone put its
         // title and the start of every line off the left edge.
         maxWidth: "100%",
@@ -159,7 +148,7 @@ function variantStylesOf(theme, opts) {
 function backdropSxOf(theme, glass) {
   return {
     backgroundColor: scrim(theme, glass ? DIALOG_BACKDROP.alpha.glass : DIALOG_BACKDROP.alpha.plain),
-    backdropFilter: glass ? `blur(${DIALOG_BACKDROP.blurPx}px)` : "none"
+    backdropFilter: glass ? `blur(${rem(theme, DIALOG_BACKDROP.blurPx)})` : "none"
   };
 }
 
@@ -167,4 +156,4 @@ export {
   variantStylesOf,
   backdropSxOf
 };
-//# sourceMappingURL=chunk-IYTBTK2M.js.map
+//# sourceMappingURL=chunk-2WU52FLP.js.map

package/dist/chunk-2WU52FLP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/Dialog/Dialog.styles.ts"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material/styles/index.js';\nimport { alpha, keyframes } from '@mui/material/styles/index.js';\n\nimport type { DialogBorderRadius, DialogSize, DialogVariant } from './Dialog.base';\nimport {\n  DIALOG_BACKDROP,\n  DIALOG_BORDER_WIDTH,\n  DIALOG_GLASS,\n  DIALOG_GLOW,\n  DIALOG_GRADIENT,\n  DIALOG_MARGIN_UNITS,\n  DIALOG_MAX_WIDTH,\n  DIALOG_PULSE,\n  DIALOG_RADIUS_UNITS,\n  DIALOG_WIDTH_PERCENT,\n} from './Dialog.metrics';\nimport { scrim, shadowInk } from '../../../tokens/ink';\nimport { rem, rems } from '../../../tokens/relative';\nimport { dynamicViewportHeight } from '../../../utils/viewport';\n\n/**\n * Paper/backdrop styling for the Dialog component (FUT-181 gate cleanup):\n * pure helpers so `Dialog.tsx` stays within the size/complexity budget.\n *\n * Every number comes from `Dialog.metrics.ts`, which the native renderer reads\n * too — so a paper cannot be 800px wide on one side and 780 on the other.\n */\n\n// Define pulse animation — a function of the theme so the ring's spread follows the type scale.\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, DIALOG_PULSE.spread)} currentColor;\n    opacity: 0;\n  }\n  100% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 0;\n  }\n`;\n\n/** Style toggles that shape the dialog paper (extracted so each fn stays small). */\ninterface VariantStyleOptions {\n  variant: DialogVariant;\n  size: DialogSize;\n  borderRadius: DialogBorderRadius;\n  glass: boolean;\n  gradient: boolean;\n  glow: boolean;\n  pulse: boolean;\n}\n\nfunction borderRadiusOf(theme: Theme, borderRadius: VariantStyleOptions['borderRadius']) {\n  const units = DIALOG_RADIUS_UNITS[borderRadius] ?? DIALOG_RADIUS_UNITS.lg;\n  // `none` is a bare 0 rather than `spacing(0)`, as this has always written it.\n  return units === 0 ? '0' : theme.spacing(units);\n}\n\nfunction maxWidthOf(theme: Theme, size: VariantStyleOptions['size']): string {\n  return rem(theme, DIALOG_MAX_WIDTH[size] ?? DIALOG_MAX_WIDTH.md);\n}\n\nfunction baseStylesOf(theme: Theme, opts: VariantStyleOptions) {\n  return {\n    borderRadius: borderRadiusOf(theme, opts.borderRadius),\n    maxWidth: maxWidthOf(theme, opts.size),\n    width: `${DIALOG_WIDTH_PERCENT}vw`,\n    margin: theme.spacing(DIALOG_MARGIN_UNITS),\n    transition: theme.transitions.create(\n      ['box-shadow', 'background-color', 'backdrop-filter'],\n      { duration: theme.transitions.duration.standard },\n    ),\n  };\n}\n\nfunction glowStylesOf(theme: Theme, glow: boolean) {\n  return glow\n    ? {\n        boxShadow: `${rems(theme, 0, 0, DIALOG_GLOW.blurRadius)} ${alpha(theme.palette.primary.main, DIALOG_GLOW.alpha)}`,\n      }\n    : {};\n}\n\nfunction pulseStylesOf(theme: Theme, pulse: boolean) {\n  if (!pulse) return {};\n  return {\n    position: 'relative' as const,\n    '&::after': {\n      content: '\"\"',\n      position: 'absolute' as const,\n      top: 0,\n      left: 0,\n      right: 0,\n      bottom: 0,\n      borderRadius: 'inherit',\n      backgroundColor: theme.palette.primary.main,\n      opacity: DIALOG_PULSE.alpha,\n      animation: `${pulseAnimation(theme)} ${DIALOG_PULSE.durationMs / 1000}s infinite`,\n      pointerEvents: 'none' as const,\n      zIndex: DIALOG_PULSE.zIndex,\n    },\n  };\n}\n\n/** The default variant's paper: optional gradient/glass over the base styles. */\nfunction defaultVariantStyles(theme: Theme, opts: VariantStyleOptions) {\n  const gradientStyles = opts.gradient\n    ? {\n        background: `linear-gradient(${DIALOG_GRADIENT.angleDeg}deg, ${alpha(theme.palette.primary.main, DIALOG_GRADIENT.stopAlpha)}, ${alpha(theme.palette.secondary.main, DIALOG_GRADIENT.stopAlpha)})`,\n        backdropFilter: `blur(${rem(theme, DIALOG_GRADIENT.blurPx)})`,\n      }\n    : {};\n  return {\n    ...gradientStyles,\n    backgroundColor: opts.glass\n      ? alpha(theme.palette.background.paper, DIALOG_GLASS.backgroundAlpha)\n      : theme.palette.background.paper,\n    backdropFilter: opts.glass ? `blur(${rem(theme, DIALOG_GLASS.blurPx)})` : 'none',\n    border: opts.glass\n      ? `${DIALOG_BORDER_WIDTH}px solid ${alpha(theme.palette.primary.main, DIALOG_GLASS.borderAlpha)}`\n      : 'none',\n  };\n}\n\nexport function variantStylesOf(theme: Theme, opts: VariantStyleOptions): SxProps<Theme> {\n  const decorations = {\n    ...glowStylesOf(theme, opts.glow),\n    ...pulseStylesOf(theme, opts.pulse),\n  };\n  switch (opts.variant) {\n    case 'glass':\n      return {\n        ...baseStylesOf(theme, opts),\n        ...decorations,\n        backgroundColor: alpha(theme.palette.background.paper, DIALOG_GLASS.backgroundAlpha),\n        backdropFilter: `blur(${rem(theme, DIALOG_GLASS.blurPx)})`,\n        border: `${DIALOG_BORDER_WIDTH}px solid ${alpha(theme.palette.primary.main, DIALOG_GLASS.borderAlpha)}`,\n        boxShadow: `${rems(theme, 0, DIALOG_GLASS.shadow.offsetY, DIALOG_GLASS.shadow.blurRadius)} ${shadowInk(theme, DIALOG_GLASS.shadow.alpha)}`,\n      };\n    case 'fullscreen':\n      return {\n        borderRadius: 0,\n        margin: 0,\n        width: '100vw',\n        // `100dvh`, not `100vh` — see `dynamicViewportHeight`.\n        ...dynamicViewportHeight('height'),\n        maxWidth: 'none',\n        maxHeight: 'none',\n        ...decorations,\n      };\n    case 'drawer': {\n      const radius = borderRadiusOf(theme, opts.borderRadius);\n      return {\n        // `radius` is already a length (`theme.spacing(n)` → '16px', or 0): gluing\n        // another `px` on wrote '16pxpx', which the browser dropped, leaving the\n        // panel's leading corners square.\n        borderRadius: `${radius} 0 0 ${radius}`,\n        margin: 0,\n        width: maxWidthOf(theme, opts.size),\n        // Never wider than the screen: a 600px panel on a 375px phone put its\n        // title and the start of every line off the left edge.\n        maxWidth: '100%',\n        ...dynamicViewportHeight('height'),\n        maxHeight: 'none',\n        ...decorations,\n      };\n    }\n    default:\n      return {\n        ...baseStylesOf(theme, opts),\n        ...decorations,\n        ...defaultVariantStyles(theme, opts),\n      };\n  }\n}\n\nexport function backdropSxOf(theme: Theme, glass: boolean) {\n  return {\n    backgroundColor: scrim(theme, glass ? DIALOG_BACKDROP.alpha.glass : DIALOG_BACKDROP.alpha.plain),\n    backdropFilter: glass ? `blur(${rem(theme, DIALOG_BACKDROP.blurPx)})` : 'none',\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-IWOVENC3.js → chunk-2XX45PC5.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-4XK6JQ4D.js";
 import {
   CepField
-} from "./chunk-FXNYV5Z6.js";
+} from "./chunk-F6D6HXZU.js";
 
 // src/components/form/total-form/Fields/CepField.tsx
 import { useCallback, useMemo, useRef } from "react";
@@ -80,4 +80,4 @@ function CepField2({
 export {
   CepField2 as CepField
 };
-//# sourceMappingURL=chunk-IWOVENC3.js.map
+//# sourceMappingURL=chunk-2XX45PC5.js.map

package/dist/{chunk-RSQMPCCR.js → chunk-34643ATX.js}

@@ -1,9 +1,13 @@
 import {
   calculateTooltipPosition,
   getElementBounds
-} from "./chunk-NYZO3JNB.js";
+} from "./chunk-RXJQA3FQ.js";
+import {
+  remPx
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/feedback/TutorialOverlay/TutorialOverlay.hooks.ts
+import { useTheme } from "@mui/material/styles/index.js";
 import { useCallback, useEffect, useRef, useState } from "react";
 var useTargetBounds = ({
   active,
@@ -33,6 +37,7 @@ var useTooltipPlacement = ({
   isVisible,
   preferredPosition
 }) => {
+  const theme = useTheme();
   const tooltipRef = useRef(null);
   const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
   const [actualPlacement, setActualPlacement] = useState("bottom");
@@ -41,11 +46,12 @@ var useTooltipPlacement = ({
     const { position, placement } = calculateTooltipPosition(
       targetBounds,
       tooltipRef.current.getBoundingClientRect(),
-      preferredPosition || "auto"
+      preferredPosition || "auto",
+      remPx(theme, 16)
     );
     setTooltipPosition(position);
     setActualPlacement(placement);
-  }, [targetBounds, isVisible, preferredPosition]);
+  }, [targetBounds, isVisible, preferredPosition, theme]);
   return { tooltipRef, tooltipPosition, actualPlacement };
 };
 var useTutorialKeyboard = ({
@@ -138,4 +144,4 @@ var useTutorialOverlay = ({
 export {
   useTutorialOverlay
 };
-//# sourceMappingURL=chunk-RSQMPCCR.js.map
+//# sourceMappingURL=chunk-34643ATX.js.map