@12-apps/ui 6.36.0 → 6.38.0

package/dist/{chunk-E6RYO4QZ.js → chunk-THMT3G3L.js}

@@ -16,19 +16,25 @@ import {
 import {
   fieldEdge
 } from "./chunk-7FDU3FIN.js";
+import {
+  FIELD_BORDER_WIDTH
+} from "./chunk-PZBK3F52.js";
 import {
   absoluteInk
 } from "./chunk-FQ6UW7IY.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/form/Input/Input.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 ${INPUT_PULSE.spread}px currentColor;
+    box-shadow: 0 0 0 ${rem(theme, INPUT_PULSE.spread)} currentColor;
     opacity: 0;
   }
   100% {
@@ -38,9 +44,9 @@ var pulseAnimation = keyframes`
 `;
 var glowStyles = (theme) => ({
   "& .MuiInputBase-root": {
-    boxShadow: `0 0 ${INPUT_GLOW.rest.blur}px ${alpha(theme.palette.primary.main, INPUT_GLOW.rest.alpha)}`,
+    boxShadow: `0 0 ${rem(theme, INPUT_GLOW.rest.blur)} ${alpha(theme.palette.primary.main, INPUT_GLOW.rest.alpha)}`,
     "&.Mui-focused": {
-      boxShadow: `0 0 ${INPUT_GLOW.focused.blur}px ${alpha(theme.palette.primary.main, INPUT_GLOW.focused.alpha)}`
+      boxShadow: `0 0 ${rem(theme, INPUT_GLOW.focused.blur)} ${alpha(theme.palette.primary.main, INPUT_GLOW.focused.alpha)}`
     }
   }
 });
@@ -56,18 +62,18 @@ var pulseStyles = (theme, size = "md") => ({
     borderRadius: fieldRadius(theme),
     backgroundColor: theme.palette.primary.main,
     opacity: INPUT_PULSE.opacity,
-    animation: `${pulseAnimation} ${INPUT_PULSE.ms / 1e3}s infinite`,
+    animation: `${pulseAnimation(theme)} ${INPUT_PULSE.ms / 1e3}s infinite`,
     pointerEvents: "none",
     zIndex: -1
   }
 });
 var floatingLabelStyles = (theme) => ({
   "& .MuiInputLabel-root": {
-    transform: `translate(${FLOATING_LABEL.rest.x}px, ${FLOATING_LABEL.rest.y}px) scale(1)`,
+    transform: `translate(${rem(theme, FLOATING_LABEL.rest.x)}, ${rem(theme, FLOATING_LABEL.rest.y)}) scale(1)`,
     "&.MuiInputLabel-shrink": {
-      transform: `translate(${FLOATING_LABEL.shrink.x}px, ${FLOATING_LABEL.shrink.y}px) scale(${FLOATING_LABEL.scale})`,
+      transform: `translate(${rem(theme, FLOATING_LABEL.shrink.x)}, ${rem(theme, FLOATING_LABEL.shrink.y)}) scale(${FLOATING_LABEL.scale})`,
       backgroundColor: theme.palette.background.paper,
-      padding: `0 ${FLOATING_LABEL.paddingX}px`
+      padding: `0 ${rem(theme, FLOATING_LABEL.paddingX)}`
     }
   }
 });
@@ -82,8 +88,8 @@ var inputBaseStyles = (theme, variant) => {
     case "glass":
       return {
         backgroundColor: alpha(theme.palette.background.paper, INPUT_GLASS.background.rest),
-        backdropFilter: `blur(${INPUT_GLASS.blur}px)`,
-        border: `${INPUT_BORDER.rest}px solid ${fieldEdge(theme)}`,
+        backdropFilter: `blur(${rem(theme, INPUT_GLASS.blur)})`,
+        border: `${FIELD_BORDER_WIDTH}px solid ${fieldEdge(theme)}`,
         "&:hover": {
           backgroundColor: alpha(theme.palette.background.paper, INPUT_GLASS.background.hover),
           borderColor: alpha(theme.palette.primary.main, INPUT_GLASS.hoverBorderAlpha)
@@ -91,7 +97,7 @@ var inputBaseStyles = (theme, variant) => {
         "&.Mui-focused": {
           backgroundColor: alpha(theme.palette.background.paper, INPUT_GLASS.background.focused),
           borderColor: theme.palette.primary.main,
-          boxShadow: `0 0 0 ${INPUT_GLASS.focusRing.width}px ${alpha(theme.palette.primary.main, INPUT_GLASS.focusRing.alpha)}`
+          boxShadow: `0 0 0 ${rem(theme, INPUT_GLASS.focusRing.width)} ${alpha(theme.palette.primary.main, INPUT_GLASS.focusRing.alpha)}`
         }
       };
     case "underline":
@@ -115,7 +121,7 @@ var inputBaseStyles = (theme, variant) => {
 var gradientFill = (theme, strength) => `linear-gradient(${INPUT_GRADIENT.angleDeg}deg, ${alpha(theme.palette.primary.main, strength)}, ${alpha(theme.palette.secondary.main, strength)})`;
 var gradientStyles = (theme) => ({
   background: gradientFill(theme, INPUT_GRADIENT.fill.rest),
-  border: `${INPUT_GRADIENT.borderWidth}px solid transparent`,
+  border: `${rem(theme, INPUT_GRADIENT.borderWidth)} solid transparent`,
   backgroundOrigin: "border-box",
   backgroundClip: "padding-box, border-box",
   position: "relative",
@@ -130,7 +136,7 @@ var gradientStyles = (theme) => ({
     background: `linear-gradient(${INPUT_GRADIENT.angleDeg}deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
     mask: `linear-gradient(${absoluteInk(theme).white} 0 0) content-box, linear-gradient(${absoluteInk(theme).white} 0 0)`,
     maskComposite: "exclude",
-    padding: `${INPUT_GRADIENT.borderWidth}px`,
+    padding: rem(theme, INPUT_GRADIENT.borderWidth),
     zIndex: -1
   },
   "&:hover": {
@@ -152,7 +158,7 @@ var outlinedStyles = (theme) => ({
   },
   "&.Mui-focused fieldset": {
     borderColor: theme.palette.primary.main,
-    borderWidth: INPUT_BORDER.focused
+    borderWidth: rem(theme, INPUT_BORDER.focused)
   },
   "&.Mui-error fieldset": {
     borderColor: theme.palette.error.main
@@ -177,4 +183,4 @@ export {
   outlinedStyles,
   filledStyles
 };
-//# sourceMappingURL=chunk-E6RYO4QZ.js.map
+//# sourceMappingURL=chunk-THMT3G3L.js.map

package/dist/chunk-THMT3G3L.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Input/Input.styles.ts"],"sourcesContent":["import { alpha, keyframes } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport {\n  FILLED_WASH,\n  FLOATING_LABEL,\n  INPUT_BORDER,\n  INPUT_GLASS,\n  INPUT_GLOW,\n  INPUT_GRADIENT,\n  INPUT_PULSE,\n} from './Input.metrics';\nimport type { InputProps } from './Input.types';\n\nimport { fieldEdge } from '../../../tokens/field-edge';\nimport { FIELD_BORDER_WIDTH, fieldHeight } from '../../../tokens/field-height';\nimport { fieldRadius } from '../../../tokens/field-radius';\nimport { absoluteInk } from '../../../tokens/ink';\nimport { rem } from '../../../tokens/relative';\nimport type { SizeValue } from '../../../tokens/vocabulary';\n\ntype InputVariant = NonNullable<InputProps['variant']>;\n\n// The numbers below all come from `./Input.metrics`, which the native renderer\n// reads too — see its header for why MUI's own values are in there as well.\nexport { muiVariantFor, SIZE_MAP } from './Input.metrics';\n\n// The pulse ring, its spread through the theme's 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, INPUT_PULSE.spread)} currentColor;\n    opacity: 0;\n  }\n  100% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 0;\n  }\n`;\n\nexport const glowStyles = (theme: Theme): CSSObject => ({\n  '& .MuiInputBase-root': {\n    boxShadow: `0 0 ${rem(theme, INPUT_GLOW.rest.blur)} ${alpha(theme.palette.primary.main, INPUT_GLOW.rest.alpha)}`,\n    '&.Mui-focused': {\n      boxShadow: `0 0 ${rem(theme, INPUT_GLOW.focused.blur)} ${alpha(theme.palette.primary.main, INPUT_GLOW.focused.alpha)}`,\n    },\n  },\n});\n\n// A bar behind the field rather than a border on it, so it can pulse outward\n// without the input resizing.\nexport const pulseStyles = (theme: Theme, size: SizeValue = 'md'): CSSObject => ({\n  '&::after': {\n    content: '\"\"',\n    position: 'absolute',\n    top: '50%',\n    left: '0',\n    right: '0',\n    height: fieldHeight(theme, size),\n    transform: 'translateY(-50%)',\n    borderRadius: fieldRadius(theme),\n    backgroundColor: theme.palette.primary.main,\n    opacity: INPUT_PULSE.opacity,\n    animation: `${pulseAnimation(theme)} ${INPUT_PULSE.ms / 1000}s infinite`,\n    pointerEvents: 'none',\n    zIndex: -1,\n  },\n});\n\nexport const floatingLabelStyles = (theme: Theme): CSSObject => ({\n  '& .MuiInputLabel-root': {\n    transform: `translate(${rem(theme, FLOATING_LABEL.rest.x)}, ${rem(theme, FLOATING_LABEL.rest.y)}) scale(1)`,\n    '&.MuiInputLabel-shrink': {\n      transform: `translate(${rem(theme, FLOATING_LABEL.shrink.x)}, ${rem(theme, FLOATING_LABEL.shrink.y)}) scale(${FLOATING_LABEL.scale})`,\n      backgroundColor: theme.palette.background.paper,\n      padding: `0 ${rem(theme, FLOATING_LABEL.paddingX)}`,\n    },\n  },\n});\n\n/**\n * The field's corner: the theme's one field radius (see `tokens/field-radius`).\n * `filled` rounds its top two only — its bottom edge is the underline — and\n * `underline` none, which is how MUI draws those two variants.\n */\nexport const inputRadiusStyles = (theme: Theme, variant?: InputVariant): CSSObject => {\n  if (variant === 'underline') return {};\n  const radius = fieldRadius(theme);\n  if (variant === 'filled') return { borderTopLeftRadius: radius, borderTopRightRadius: radius };\n  return { borderRadius: radius };\n};\n\nexport const inputBaseStyles = (theme: Theme, variant?: InputVariant): CSSObject => {\n  switch (variant) {\n    case 'glass':\n      return {\n        backgroundColor: alpha(theme.palette.background.paper, INPUT_GLASS.background.rest),\n        backdropFilter: `blur(${rem(theme, INPUT_GLASS.blur)})`,\n        border: `${FIELD_BORDER_WIDTH}px solid ${fieldEdge(theme)}`,\n        '&:hover': {\n          backgroundColor: alpha(theme.palette.background.paper, INPUT_GLASS.background.hover),\n          borderColor: alpha(theme.palette.primary.main, INPUT_GLASS.hoverBorderAlpha),\n        },\n        '&.Mui-focused': {\n          backgroundColor: alpha(theme.palette.background.paper, INPUT_GLASS.background.focused),\n          borderColor: theme.palette.primary.main,\n          boxShadow: `0 0 0 ${rem(theme, INPUT_GLASS.focusRing.width)} ${alpha(theme.palette.primary.main, INPUT_GLASS.focusRing.alpha)}`,\n        },\n      };\n    case 'underline':\n      return {\n        '&:before': {\n          borderBottomColor: fieldEdge(theme),\n        },\n        '&:hover:not(.Mui-disabled):before': {\n          borderBottomColor: theme.palette.primary.main,\n        },\n        '&:after': {\n          borderBottomColor: theme.palette.primary.main,\n        },\n      };\n    case 'gradient':\n      return gradientStyles(theme);\n    default:\n      return {};\n  }\n};\n\n/** The 135° fill between the two brand hues, at one of its three strengths. */\nconst gradientFill = (theme: Theme, strength: number): string =>\n  `linear-gradient(${INPUT_GRADIENT.angleDeg}deg, ${alpha(theme.palette.primary.main, strength)}, ${alpha(theme.palette.secondary.main, strength)})`;\n\n// The border is a gradient painted behind the field and masked to a 2px ring,\n// since CSS cannot put a gradient on `border-color` directly.\nconst gradientStyles = (theme: Theme): CSSObject => ({\n  background: gradientFill(theme, INPUT_GRADIENT.fill.rest),\n  border: `${rem(theme, INPUT_GRADIENT.borderWidth)} solid transparent`,\n  backgroundOrigin: 'border-box',\n  backgroundClip: 'padding-box, border-box',\n  position: 'relative',\n  '&::before': {\n    content: '\"\"',\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n    borderRadius: 'inherit',\n    background: `linear-gradient(${INPUT_GRADIENT.angleDeg}deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,\n    mask: `linear-gradient(${absoluteInk(theme).white} 0 0) content-box, linear-gradient(${absoluteInk(theme).white} 0 0)`,\n    maskComposite: 'exclude',\n    padding: rem(theme, INPUT_GRADIENT.borderWidth),\n    zIndex: -1,\n  },\n  '&:hover': {\n    background: gradientFill(theme, INPUT_GRADIENT.fill.hover),\n  },\n  '&.Mui-focused': {\n    background: gradientFill(theme, INPUT_GRADIENT.fill.focused),\n    '&::before': {\n      background: `linear-gradient(${INPUT_GRADIENT.angleDeg}deg, ${theme.palette.primary.dark}, ${theme.palette.secondary.dark})`,\n    },\n  },\n});\n\nexport const outlinedStyles = (theme: Theme): CSSObject => ({\n  '& fieldset': {\n    borderColor: fieldEdge(theme),\n  },\n  '&:hover fieldset': {\n    borderColor: theme.palette.primary.main,\n  },\n  '&.Mui-focused fieldset': {\n    borderColor: theme.palette.primary.main,\n    borderWidth: rem(theme, INPUT_BORDER.focused),\n  },\n  '&.Mui-error fieldset': {\n    borderColor: theme.palette.error.main,\n  },\n});\n\nexport const filledStyles = (theme: Theme): CSSObject => ({\n  backgroundColor: alpha(theme.palette.action.hover, FILLED_WASH.rest),\n  '&:hover': {\n    backgroundColor: alpha(theme.palette.action.hover, FILLED_WASH.hover),\n  },\n  '&.Mui-focused': {\n    backgroundColor: alpha(theme.palette.action.hover, FILLED_WASH.focused),\n  },\n});\n"],"mappings":"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","names":[]}

package/dist/{chunk-DB2ZFZVW.js → chunk-TKC6WHGB.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-DVAAUWTC.js";
 import {
   FleetRoster
-} from "./chunk-E7T3A4IR.js";
+} from "./chunk-5JCGBCFJ.js";
 import {
   rem
 } from "./chunk-YKCAJ2TN.js";
@@ -79,4 +79,4 @@ function FleetBody({
 export {
   FleetBody
 };
-//# sourceMappingURL=chunk-DB2ZFZVW.js.map
+//# sourceMappingURL=chunk-TKC6WHGB.js.map

package/dist/{chunk-3CVTQZQJ.js → chunk-TNYKM4UU.js}

@@ -1,12 +1,16 @@
 import {
   SettingsRailGroup
-} from "./chunk-2CTTASUD.js";
+} from "./chunk-V5EWCJBT.js";
 import {
-  RAIL_WIDTH,
   TOUCH_TARGET,
   atLeastRail,
-  displayAcrossRail
-} from "./chunk-LIG7TKIB.js";
+  displayAcrossRail,
+  railWidth
+} from "./chunk-NYFNF7I5.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/layout/SettingsLayout/SettingsLayout.rail.tsx
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
@@ -40,7 +44,7 @@ function SettingsRailToggle({
         justifyContent: "space-between",
         gap: 1,
         width: "100%",
-        minHeight: TOUCH_TARGET,
+        minHeight: rem(theme, TOUCH_TARGET),
         px: 1.5,
         py: 1,
         mb: 1,
@@ -91,7 +95,7 @@ function SettingsSearchEmpty({
           action.onClear?.();
         },
         "data-testid": `${testIdPrefix}-empty-action`,
-        sx: { mt: 1.5, minHeight: TOUCH_TARGET },
+        sx: { mt: 1.5, minHeight: sxRem(TOUCH_TARGET) },
         children: action.label
       }
     ) : null
@@ -183,8 +187,8 @@ function SettingsRail({
         width: "100%",
         [atLeastRail(theme, breakpoint)]: {
           display: "block",
-          flex: `0 0 ${RAIL_WIDTH}px`,
-          width: RAIL_WIDTH,
+          flex: `0 0 ${railWidth(theme)}`,
+          width: railWidth(theme),
           borderRight: `1px solid ${theme.palette.divider}`,
           pr: 2,
           // Its own scrollbar, so a settings area with twenty categories does
@@ -229,4 +233,4 @@ function SettingsRail({
 export {
   SettingsRail
 };
-//# sourceMappingURL=chunk-3CVTQZQJ.js.map
+//# sourceMappingURL=chunk-TNYKM4UU.js.map

package/dist/chunk-TNYKM4UU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/SettingsLayout/SettingsLayout.rail.tsx"],"sourcesContent":["'use client';\n\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore';\nimport SearchIcon from '@mui/icons-material/Search';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport InputAdornment from '@mui/material/InputAdornment/index.js';\nimport TextField from '@mui/material/TextField/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport React from 'react';\n\nimport { SettingsRailGroup, type RailShape } from './SettingsLayout.items';\nimport { atLeastRail, displayAcrossRail, railWidth, TOUCH_TARGET } from './SettingsLayout.styles';\nimport { rem, sxRem } from '../../../tokens/relative';\nimport type {\n  SettingsEmptySearchAction,\n  SettingsLayoutProps,\n  SettingsNavGroup,\n  SettingsRailBreakpoint,\n} from './SettingsLayout.types';\n\ninterface RailToggleProps {\n  title?: React.ReactNode;\n  activeLabel?: string;\n  open: boolean;\n  onToggle: () => void;\n  breakpoint: SettingsRailBreakpoint;\n  testIdPrefix: string;\n}\n\n/**\n * `switcher`-only collapse control: shows the current section (a compact\n * switcher) so the panel content stays at the top of the screen. Hidden once the\n * rail has its own column.\n */\nfunction SettingsRailToggle({\n  title,\n  activeLabel,\n  open,\n  onToggle,\n  breakpoint,\n  testIdPrefix,\n}: RailToggleProps): React.JSX.Element {\n  return (\n    <Box\n      component=\"button\"\n      type=\"button\"\n      onClick={onToggle}\n      aria-expanded={open}\n      aria-label={typeof title === 'string' ? title : 'Settings'}\n      data-testid={`${testIdPrefix}-toggle`}\n      sx={(theme) => ({\n        ...displayAcrossRail(theme, breakpoint, 'flex', 'none'),\n        alignItems: 'center',\n        justifyContent: 'space-between',\n        gap: 1,\n        width: '100%',\n        minHeight: rem(theme, TOUCH_TARGET),\n        px: 1.5,\n        py: 1,\n        mb: 1,\n        textAlign: 'left',\n        cursor: 'pointer',\n        color: 'text.primary',\n        background: 'transparent',\n        border: `1px solid ${theme.palette.divider}`,\n        borderRadius: 1.5,\n      })}\n    >\n      <Box sx={{ minWidth: 0 }}>\n        {title ? (\n          <Typography variant=\"caption\" sx={{ display: 'block', color: 'text.secondary' }}>\n            {title}\n          </Typography>\n        ) : null}\n        <Typography variant=\"body2\" noWrap sx={{ fontWeight: 600 }}>\n          {activeLabel ?? ''}\n        </Typography>\n      </Box>\n      <ExpandMoreIcon\n        fontSize=\"small\"\n        sx={{\n          flex: '0 0 auto',\n          color: 'text.secondary',\n          transition: 'transform 150ms ease',\n          transform: open ? 'rotate(180deg)' : 'none',\n          '@media (prefers-reduced-motion: reduce)': { transition: 'none' },\n        }}\n      />\n    </Box>\n  );\n}\n\n/** The empty-search state, with the way out of it rendered inside. */\nfunction SettingsSearchEmpty({\n  label,\n  action,\n  onClear,\n  testIdPrefix,\n}: {\n  label: React.ReactNode;\n  action?: SettingsEmptySearchAction;\n  onClear: () => void;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  return (\n    <Box data-testid={`${testIdPrefix}-empty`} sx={{ px: 1, py: 2 }}>\n      <Typography variant=\"body2\" color=\"text.secondary\">\n        {label}\n      </Typography>\n      {action ? (\n        <Button\n          size=\"small\"\n          variant=\"outlined\"\n          onClick={() => {\n            onClear();\n            action.onClear?.();\n          }}\n          data-testid={`${testIdPrefix}-empty-action`}\n          sx={{ mt: 1.5, minHeight: sxRem(TOUCH_TARGET) }}\n        >\n          {action.label}\n        </Button>\n      ) : null}\n    </Box>\n  );\n}\n\nexport interface RailBodyProps extends RailShape {\n  navOpen: boolean;\n  query: string;\n  onQueryChange: (value: string) => void;\n  searchPlaceholder: string;\n  emptySearchLabel: React.ReactNode;\n  emptySearchAction?: SettingsEmptySearchAction;\n  filteredGroups: SettingsNavGroup[];\n  activeItemId?: string;\n  linkComponent?: SettingsLayoutProps['linkComponent'];\n  onSelectItem?: (id: string) => void;\n  onNavigate?: () => void;\n  testIdPrefix: string;\n}\n\n/** The searchable rail body (search + groups). */\nfunction SettingsRailBody({\n  navOpen,\n  query,\n  onQueryChange,\n  searchPlaceholder,\n  emptySearchLabel,\n  emptySearchAction,\n  filteredGroups,\n  activeItemId,\n  linkComponent,\n  onSelectItem,\n  onNavigate,\n  testIdPrefix,\n  ...shape\n}: RailBodyProps): React.JSX.Element {\n  // `drilldown` has no disclosure to be closed behind: below the breakpoint the\n  // body is the page, above it the rail. Only `switcher` hides it.\n  const hidden = navOpen ? 'block' : 'none';\n  return (\n    <Box\n      data-testid={`${testIdPrefix}-rail-body`}\n      sx={(theme) =>\n        shape.variant === 'drilldown'\n          ? { display: 'block' }\n          : displayAcrossRail(theme, shape.breakpoint, hidden, 'block')\n      }\n    >\n      <TextField\n        value={query}\n        onChange={(event) => onQueryChange(event.target.value)}\n        placeholder={searchPlaceholder}\n        size=\"small\"\n        fullWidth\n        aria-label={searchPlaceholder}\n        data-testid={`${testIdPrefix}-search`}\n        InputProps={{\n          startAdornment: (\n            <InputAdornment position=\"start\">\n              <SearchIcon fontSize=\"small\" sx={{ color: 'text.secondary' }} />\n            </InputAdornment>\n          ),\n        }}\n        sx={{ mb: 2 }}\n      />\n      {filteredGroups.length === 0 ? (\n        <SettingsSearchEmpty\n          label={emptySearchLabel}\n          action={emptySearchAction}\n          onClear={() => onQueryChange('')}\n          testIdPrefix={testIdPrefix}\n        />\n      ) : (\n        filteredGroups.map((group) => (\n          <SettingsRailGroup\n            key={group.id}\n            group={group}\n            activeItemId={activeItemId}\n            linkComponent={linkComponent}\n            onSelectItem={onSelectItem}\n            onNavigate={onNavigate}\n            testIdPrefix={testIdPrefix}\n            {...shape}\n          />\n        ))\n      )}\n    </Box>\n  );\n}\n\n/** Props for {@link SettingsRail}: the rail body's inputs plus the mobile chrome. */\nexport type SettingsRailProps = RailBodyProps & {\n  title?: React.ReactNode;\n  activeLabel?: string;\n  onToggleNav: () => void;\n  /** Scroll inside the rail rather than with the page. See `fillHeight`. */\n  fillHeight?: boolean;\n};\n\n/** The navigation column: title, the `switcher`'s disclosure, and the body. */\nexport function SettingsRail({\n  title,\n  activeLabel,\n  navOpen,\n  onToggleNav,\n  testIdPrefix,\n  fillHeight = false,\n  ...bodyProps\n}: SettingsRailProps): React.JSX.Element {\n  const { variant, breakpoint, atIndex } = bodyProps;\n  // In `drilldown` the rail is the index's list below the breakpoint and the\n  // left column above it — so inside a section it steps aside for the chip\n  // strip. It is `display: none`, never unmounted: the two navigation forms\n  // both stay in the DOM at every width, which is what makes \"the narrow width\n  // offers what the wide one offers\" true by construction instead of by review.\n  const hiddenWhileInSection = variant === 'drilldown' && !atIndex;\n\n  return (\n    <Box\n      component=\"nav\"\n      aria-label={typeof title === 'string' ? title : 'Settings'}\n      data-testid={`${testIdPrefix}-rail`}\n      sx={(theme) => ({\n        display: hiddenWhileInSection ? 'none' : 'block',\n        flex: '0 0 auto',\n        width: '100%',\n        [atLeastRail(theme, breakpoint)]: {\n          display: 'block',\n          flex: `0 0 ${railWidth(theme)}`,\n          width: railWidth(theme),\n          borderRight: `1px solid ${theme.palette.divider}`,\n          pr: 2,\n          // Its own scrollbar, so a settings area with twenty categories does\n          // not make the thing you NAVIGATE with scroll away while you read the\n          // panel. `minHeight: 0` is the load-bearing half: without it a flex\n          // child refuses to shrink below its content and `overflow` never\n          // engages.\n          ...(fillHeight\n            ? { height: '100%', minHeight: 0, overflowY: 'auto' as const, overscrollBehavior: 'contain' as const }\n            : {}),\n        },\n      })}\n    >\n      {title ? (\n        <Typography\n          variant=\"h6\"\n          data-testid={`${testIdPrefix}-title`}\n          sx={(theme) => ({\n            ...(variant === 'drilldown'\n              ? { display: 'block' }\n              : displayAcrossRail(theme, breakpoint, 'none', 'block')),\n            fontWeight: 700,\n            mb: 1.5,\n          })}\n        >\n          {title}\n        </Typography>\n      ) : null}\n      {variant === 'switcher' ? (\n        <SettingsRailToggle\n          title={title}\n          activeLabel={activeLabel}\n          open={navOpen}\n          onToggle={onToggleNav}\n          breakpoint={breakpoint}\n          testIdPrefix={testIdPrefix}\n        />\n      ) : null}\n      <SettingsRailBody navOpen={navOpen} testIdPrefix={testIdPrefix} {...bodyProps} />\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-JCBIPBGZ.js → chunk-TU5A2CV7.js}

@@ -22,9 +22,15 @@ import {
 import {
   fieldEdge
 } from "./chunk-7FDU3FIN.js";
+import {
+  FIELD_BORDER_WIDTH
+} from "./chunk-PZBK3F52.js";
 import {
   absoluteInk
 } from "./chunk-FQ6UW7IY.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/form/Select/Select.tsx
 import FormControl from "@mui/material/FormControl/index.js";
@@ -35,13 +41,13 @@ import MuiSelect from "@mui/material/Select/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 = keyframes`
+var pulseAnimation = (theme) => keyframes`
   0% {
     box-shadow: 0 0 0 0 currentColor;
     opacity: 1;
   }
   70% {
-    box-shadow: 0 0 0 ${INPUT_PULSE.spread}px currentColor;
+    box-shadow: 0 0 0 ${rem(theme, INPUT_PULSE.spread)} currentColor;
     opacity: 0;
   }
   100% {
@@ -51,9 +57,9 @@ var pulseAnimation = keyframes`
 `;
 var glowStyles = (theme) => ({
   "& .MuiOutlinedInput-root": {
-    boxShadow: `0 0 ${INPUT_GLOW.rest.blur}px ${alpha(theme.palette.primary.main, INPUT_GLOW.rest.alpha)}`,
+    boxShadow: `0 0 ${rem(theme, INPUT_GLOW.rest.blur)} ${alpha(theme.palette.primary.main, INPUT_GLOW.rest.alpha)}`,
     "&.Mui-focused": {
-      boxShadow: `0 0 ${INPUT_GLOW.focused.blur}px ${alpha(theme.palette.primary.main, INPUT_GLOW.focused.alpha)}`
+      boxShadow: `0 0 ${rem(theme, INPUT_GLOW.focused.blur)} ${alpha(theme.palette.primary.main, INPUT_GLOW.focused.alpha)}`
     }
   }
 });
@@ -69,15 +75,16 @@ var pulseStyles = (theme, size) => ({
     borderRadius: fieldRadius(theme),
     backgroundColor: theme.palette.primary.main,
     opacity: INPUT_PULSE.opacity,
-    animation: `${pulseAnimation} ${INPUT_PULSE.ms / 1e3}s infinite`,
+    animation: `${pulseAnimation(theme)} ${INPUT_PULSE.ms / 1e3}s infinite`,
     pointerEvents: "none",
     zIndex: -1
   }
 });
 var glassVariant = (theme) => ({
   backgroundColor: alpha(theme.palette.background.paper, INPUT_GLASS.background.rest),
-  backdropFilter: `blur(${INPUT_GLASS.blur}px)`,
-  border: `${INPUT_BORDER.rest}px solid ${fieldEdge(theme)}`,
+  backdropFilter: `blur(${rem(theme, INPUT_GLASS.blur)})`,
+  // `SELECT_BORDER.rest` is the field hairline.
+  border: `${FIELD_BORDER_WIDTH}px solid ${fieldEdge(theme)}`,
   "& fieldset": { border: "none" },
   "&:hover": {
     backgroundColor: alpha(theme.palette.background.paper, INPUT_GLASS.background.hover),
@@ -86,13 +93,13 @@ var glassVariant = (theme) => ({
   "&.Mui-focused": {
     backgroundColor: alpha(theme.palette.background.paper, INPUT_GLASS.background.focused),
     borderColor: theme.palette.primary.main,
-    boxShadow: `0 0 0 ${INPUT_GLASS.focusRing.width}px ${alpha(theme.palette.primary.main, INPUT_GLASS.focusRing.alpha)}`
+    boxShadow: `0 0 0 ${rem(theme, INPUT_GLASS.focusRing.width)} ${alpha(theme.palette.primary.main, INPUT_GLASS.focusRing.alpha)}`
   }
 });
 var gradientFill = (theme, strength) => `linear-gradient(${INPUT_GRADIENT.angleDeg}deg, ${alpha(theme.palette.primary.main, strength)}, ${alpha(theme.palette.secondary.main, strength)})`;
 var gradientVariant = (theme) => ({
   background: gradientFill(theme, INPUT_GRADIENT.fill.rest),
-  border: `${INPUT_GRADIENT.borderWidth}px solid transparent`,
+  border: `${rem(theme, INPUT_GRADIENT.borderWidth)} solid transparent`,
   backgroundOrigin: "border-box",
   backgroundClip: "padding-box, border-box",
   position: "relative",
@@ -108,7 +115,7 @@ var gradientVariant = (theme) => ({
     background: `linear-gradient(${INPUT_GRADIENT.angleDeg}deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
     mask: `linear-gradient(${absoluteInk(theme).white} 0 0) content-box, linear-gradient(${absoluteInk(theme).white} 0 0)`,
     maskComposite: "exclude",
-    padding: `${INPUT_GRADIENT.borderWidth}px`,
+    padding: rem(theme, INPUT_GRADIENT.borderWidth),
     zIndex: -1
   },
   "&:hover": {
@@ -124,7 +131,7 @@ var gradientVariant = (theme) => ({
 var defaultVariant = (theme) => ({
   "& fieldset": { borderColor: fieldEdge(theme) },
   "&:hover fieldset": { borderColor: theme.palette.primary.main },
-  "&.Mui-focused fieldset": { borderColor: theme.palette.primary.main, borderWidth: INPUT_BORDER.focused },
+  "&.Mui-focused fieldset": { borderColor: theme.palette.primary.main, borderWidth: rem(theme, INPUT_BORDER.focused) },
   "&.Mui-error fieldset": { borderColor: theme.palette.error.main }
 });
 var variantStyles = (theme, variant) => {
@@ -232,4 +239,4 @@ Select.displayName = "Select";
 export {
   Select
 };
-//# sourceMappingURL=chunk-JCBIPBGZ.js.map
+//# sourceMappingURL=chunk-TU5A2CV7.js.map

package/dist/chunk-TU5A2CV7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Select/Select.tsx"],"sourcesContent":["import FormControl from '@mui/material/FormControl/index.js';\nimport FormHelperText from '@mui/material/FormHelperText/index.js';\nimport InputLabel from '@mui/material/InputLabel/index.js';\nimport MenuItem from '@mui/material/MenuItem/index.js';\nimport MuiSelect from '@mui/material/Select/index.js';\nimport { alpha, type CSSObject, keyframes, styled, type Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport {\n  SELECT_BORDER,\n  SELECT_GLASS,\n  SELECT_GLOW,\n  SELECT_GRADIENT,\n  SELECT_PULSE,\n  selectInputSize,\n} from './Select.metrics';\nimport type { SelectProps } from './Select.types';\n\nimport { splitTestId } from '../../../platform/test-id';\nimport { fieldEdge } from '../../../tokens/field-edge';\nimport { asFieldSize, FIELD_BORDER_WIDTH, fieldControlStyles, fieldHeight } from '../../../tokens/field-height';\nimport type { SizeValue } from '../../../tokens/vocabulary';\nimport { fieldRadius } from '../../../tokens/field-radius';\nimport { absoluteInk } from '../../../tokens/ink';\nimport { rem } 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, SELECT_PULSE.spread)} currentColor;\n    opacity: 0;\n  }\n  100% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 0;\n  }\n`;\n\n/** Glow ring on the outlined input, keyed off the `glow` prop. */\nconst glowStyles = (theme: Theme): CSSObject => ({\n  '& .MuiOutlinedInput-root': {\n    boxShadow: `0 0 ${rem(theme, SELECT_GLOW.rest.blur)} ${alpha(theme.palette.primary.main, SELECT_GLOW.rest.alpha)}`,\n    '&.Mui-focused': {\n      boxShadow: `0 0 ${rem(theme, SELECT_GLOW.focused.blur)} ${alpha(theme.palette.primary.main, SELECT_GLOW.focused.alpha)}`,\n    },\n  },\n});\n\n/** Pulsing halo behind the control, keyed off the `pulse` prop. */\nconst pulseStyles = (theme: Theme, size: SizeValue): CSSObject => ({\n  '&::after': {\n    content: '\"\"',\n    position: 'absolute',\n    top: '50%',\n    left: '0',\n    right: '0',\n    height: fieldHeight(theme, size),\n    transform: 'translateY(-50%)',\n    borderRadius: fieldRadius(theme),\n    backgroundColor: theme.palette.primary.main,\n    opacity: SELECT_PULSE.opacity,\n    animation: `${pulseAnimation(theme)} ${SELECT_PULSE.ms / 1000}s infinite`,\n    pointerEvents: 'none',\n    zIndex: -1,\n  },\n});\n\n/** `glass` variant: translucent, blurred background. */\nconst glassVariant = (theme: Theme): CSSObject => ({\n  backgroundColor: alpha(theme.palette.background.paper, SELECT_GLASS.background.rest),\n  backdropFilter: `blur(${rem(theme, SELECT_GLASS.blur)})`,\n  // `SELECT_BORDER.rest` is the field hairline.\n  border: `${FIELD_BORDER_WIDTH}px solid ${fieldEdge(theme)}`,\n  '& fieldset': { border: 'none' },\n  '&:hover': {\n    backgroundColor: alpha(theme.palette.background.paper, SELECT_GLASS.background.hover),\n    borderColor: alpha(theme.palette.primary.main, SELECT_GLASS.hoverBorderAlpha),\n  },\n  '&.Mui-focused': {\n    backgroundColor: alpha(theme.palette.background.paper, SELECT_GLASS.background.focused),\n    borderColor: theme.palette.primary.main,\n    boxShadow: `0 0 0 ${rem(theme, SELECT_GLASS.focusRing.width)} ${alpha(theme.palette.primary.main, SELECT_GLASS.focusRing.alpha)}`,\n  },\n});\n\n/** `gradient` variant: gradient fill with a masked gradient border. */\nconst gradientFill = (theme: Theme, strength: number): string =>\n  `linear-gradient(${SELECT_GRADIENT.angleDeg}deg, ${alpha(theme.palette.primary.main, strength)}, ${alpha(theme.palette.secondary.main, strength)})`;\n\nconst gradientVariant = (theme: Theme): CSSObject => ({\n  background: gradientFill(theme, SELECT_GRADIENT.fill.rest),\n  border: `${rem(theme, SELECT_GRADIENT.borderWidth)} solid transparent`,\n  backgroundOrigin: 'border-box',\n  backgroundClip: 'padding-box, border-box',\n  position: 'relative',\n  '& fieldset': { border: 'none' },\n  '&::before': {\n    content: '\"\"',\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n    borderRadius: 'inherit',\n    background: `linear-gradient(${SELECT_GRADIENT.angleDeg}deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,\n    mask: `linear-gradient(${absoluteInk(theme).white} 0 0) content-box, linear-gradient(${absoluteInk(theme).white} 0 0)`,\n    maskComposite: 'exclude',\n    padding: rem(theme, SELECT_GRADIENT.borderWidth),\n    zIndex: -1,\n  },\n  '&:hover': {\n    background: gradientFill(theme, SELECT_GRADIENT.fill.hover),\n  },\n  '&.Mui-focused': {\n    background: gradientFill(theme, SELECT_GRADIENT.fill.focused),\n    '&::before': {\n      background: `linear-gradient(${SELECT_GRADIENT.angleDeg}deg, ${theme.palette.primary.dark}, ${theme.palette.secondary.dark})`,\n    },\n  },\n});\n\n/** `default` variant: standard outlined borders with hover/focus/error states. */\nconst defaultVariant = (theme: Theme): CSSObject => ({\n  '& fieldset': { borderColor: fieldEdge(theme) },\n  '&:hover fieldset': { borderColor: theme.palette.primary.main },\n  '&.Mui-focused fieldset': { borderColor: theme.palette.primary.main, borderWidth: rem(theme, SELECT_BORDER.focused) },\n  '&.Mui-error fieldset': { borderColor: theme.palette.error.main },\n});\n\n/** Pick the variant style block for the outlined input. */\nconst variantStyles = (theme: Theme, variant: SelectProps['variant']): CSSObject => {\n  if (variant === 'glass') return glassVariant(theme);\n  if (variant === 'gradient') return gradientVariant(theme);\n  return defaultVariant(theme);\n};\n\nconst StyledFormControl = styled(FormControl, {\n  shouldForwardProp: (prop) =>\n    prop !== 'customVariant' && prop !== 'fieldSize' && prop !== 'glow' && prop !== 'pulse',\n})<{\n  customVariant?: SelectProps['variant'];\n  fieldSize: SizeValue;\n  glow?: boolean;\n  pulse?: boolean;\n}>(({ theme, customVariant, fieldSize, glow, pulse }) => ({\n  position: 'relative',\n  // The theme's field height for this size — the height `Input` draws for it.\n  ...fieldControlStyles(theme, fieldSize),\n  ...(glow ? glowStyles(theme) : {}),\n  ...(pulse ? pulseStyles(theme, fieldSize) : {}),\n  '& .MuiOutlinedInput-root': {\n    transition: 'all 0.3s ease',\n    borderRadius: fieldRadius(theme),\n    ...variantStyles(theme, customVariant),\n  },\n}));\n\n/**\n * Build the placeholder item plus one MenuItem per option. Returns a flat ARRAY\n * (not a Fragment): MUI `Select` enumerates its children with `React.Children`,\n * which does not descend into Fragments — a Fragment would hide every option.\n */\nfunction renderMenuItems(\n  options: SelectProps['options'],\n  placeholder: string | undefined,\n  dataTestId: string | undefined,\n): React.ReactNode[] {\n  const optionTestId = (value: string | number): string =>\n    dataTestId ? `${dataTestId}-option-${value}` : `option-${value}`;\n  const items = options.map((option) => (\n    <MenuItem\n      key={option.value}\n      value={option.value}\n      disabled={option.disabled}\n      data-testid={optionTestId(option.value)}\n    >\n      {option.label}\n    </MenuItem>\n  ));\n  if (placeholder) {\n    items.unshift(\n      <MenuItem key=\"__placeholder__\" value=\"\" disabled>\n        {placeholder}\n      </MenuItem>,\n    );\n  }\n  return items;\n}\n\n/**\n * The house scale as a FormControl size.\n *\n * Not `muiSize`: that collapses five onto MUI's three, and a FormControl takes\n * only two. This component's scale is already narrowed to `sm | md`, so the map\n * is exact rather than lossy.\n */\nconst formControlSize = (size: SelectProps['size']): 'small' | 'medium' | undefined => {\n  if (size === undefined) return undefined;\n  return selectInputSize(size) === 'sm' ? 'small' : 'medium';\n};\n\nexport const Select = React.forwardRef<HTMLDivElement, SelectProps>(\n  (\n    {\n      // `variant`/`size`/`glow`/`pulse` intentionally have no defaults: undefined\n      // resolves to the default variant, MUI's medium size, and no glow/pulse —\n      // keeping this render function under the complexity budget.\n      variant,\n      options,\n      label,\n      helperText,\n      fullWidth = true,\n      size,\n      error,\n      placeholder,\n      glow,\n      pulse,\n      value,\n      'aria-label': ariaLabel,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { testId: dataTestId, rest: props } = splitTestId(rest);\n    const labelId = React.useId();\n    const helperTextId = React.useId();\n    const selectId = React.useId();\n\n    return (\n      <StyledFormControl\n        fullWidth={fullWidth}\n        size={formControlSize(size)}\n        error={error}\n        customVariant={variant}\n        fieldSize={asFieldSize(size)}\n        glow={glow} pulse={pulse}\n        ref={ref}\n        data-testid={dataTestId}\n      >\n        {label && (\n          <InputLabel id={labelId} htmlFor={selectId}>\n            {label}\n          </InputLabel>\n        )}\n        <MuiSelect\n          id={selectId}\n          labelId={label ? labelId : undefined}\n          label={label}\n          displayEmpty={Boolean(placeholder)}\n          aria-describedby={helperText ? helperTextId : undefined}\n          data-testid={dataTestId ? `${dataTestId}-select` : 'select'}\n          value={value ?? ''}\n          {...props}\n          /*\n           * `role=\"combobox\"` sits on MUI's display DIV, not on the hidden\n           * native input that `{...props}` reaches — so an `aria-label` passed\n           * to this component never landed on the element carrying the role,\n           * and MUI's `aria-labelledby` then fell back to that div's OWN id.\n           * The control announced as its current value: a filter's field\n           * select read \"Status\" instead of \"Filtro 1 — campo\".\n           *\n           * Forwarding it here names the right element. The explicit\n           * `undefined` clears that self-referential `aria-labelledby`, which\n           * would otherwise win — a labelledby always beats a label in the\n           * accessible-name computation.\n           */\n          SelectDisplayProps={\n            ariaLabel === undefined\n              ? undefined\n              : { 'aria-label': ariaLabel, 'aria-labelledby': undefined }\n          }\n        >\n          {renderMenuItems(options, placeholder, dataTestId)}\n        </MuiSelect>\n        {helperText && (\n          <FormHelperText id={helperTextId} error={error}>\n            {helperText}\n          </FormHelperText>\n        )}\n      </StyledFormControl>\n    );\n  },\n);\n\nSelect.displayName = 'Select';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,iBAAiB;AACxB,OAAO,oBAAoB;AAC3B,OAAO,gBAAgB;AACvB,OAAO,cAAc;AACrB,OAAO,eAAe;AACtB,SAAS,OAAuB,WAAW,cAA0B;AACrE,OAAO,WAAW;AAwKd,cA2DE,YA3DF;AAnJJ,IAAM,iBAAiB,CAAC,UAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMjB,IAAI,OAAO,YAAa,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUvD,IAAM,aAAa,CAAC,WAA6B;AAAA,EAC/C,4BAA4B;AAAA,IAC1B,WAAW,OAAO,IAAI,OAAO,WAAY,KAAK,IAAI,CAAC,IAAI,MAAM,MAAM,QAAQ,QAAQ,MAAM,WAAY,KAAK,KAAK,CAAC;AAAA,IAChH,iBAAiB;AAAA,MACf,WAAW,OAAO,IAAI,OAAO,WAAY,QAAQ,IAAI,CAAC,IAAI,MAAM,MAAM,QAAQ,QAAQ,MAAM,WAAY,QAAQ,KAAK,CAAC;AAAA,IACxH;AAAA,EACF;AACF;AAGA,IAAM,cAAc,CAAC,OAAc,UAAgC;AAAA,EACjE,YAAY;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ,YAAY,OAAO,IAAI;AAAA,IAC/B,WAAW;AAAA,IACX,cAAc,YAAY,KAAK;AAAA,IAC/B,iBAAiB,MAAM,QAAQ,QAAQ;AAAA,IACvC,SAAS,YAAa;AAAA,IACtB,WAAW,GAAG,eAAe,KAAK,CAAC,IAAI,YAAa,KAAK,GAAI;AAAA,IAC7D,eAAe;AAAA,IACf,QAAQ;AAAA,EACV;AACF;AAGA,IAAM,eAAe,CAAC,WAA6B;AAAA,EACjD,iBAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,YAAa,WAAW,IAAI;AAAA,EACnF,gBAAgB,QAAQ,IAAI,OAAO,YAAa,IAAI,CAAC;AAAA;AAAA,EAErD,QAAQ,GAAG,kBAAkB,YAAY,UAAU,KAAK,CAAC;AAAA,EACzD,cAAc,EAAE,QAAQ,OAAO;AAAA,EAC/B,WAAW;AAAA,IACT,iBAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,YAAa,WAAW,KAAK;AAAA,IACpF,aAAa,MAAM,MAAM,QAAQ,QAAQ,MAAM,YAAa,gBAAgB;AAAA,EAC9E;AAAA,EACA,iBAAiB;AAAA,IACf,iBAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,YAAa,WAAW,OAAO;AAAA,IACtF,aAAa,MAAM,QAAQ,QAAQ;AAAA,IACnC,WAAW,SAAS,IAAI,OAAO,YAAa,UAAU,KAAK,CAAC,IAAI,MAAM,MAAM,QAAQ,QAAQ,MAAM,YAAa,UAAU,KAAK,CAAC;AAAA,EACjI;AACF;AAGA,IAAM,eAAe,CAAC,OAAc,aAClC,mBAAmB,eAAgB,QAAQ,QAAQ,MAAM,MAAM,QAAQ,QAAQ,MAAM,QAAQ,CAAC,KAAK,MAAM,MAAM,QAAQ,UAAU,MAAM,QAAQ,CAAC;AAElJ,IAAM,kBAAkB,CAAC,WAA6B;AAAA,EACpD,YAAY,aAAa,OAAO,eAAgB,KAAK,IAAI;AAAA,EACzD,QAAQ,GAAG,IAAI,OAAO,eAAgB,WAAW,CAAC;AAAA,EAClD,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,cAAc,EAAE,QAAQ,OAAO;AAAA,EAC/B,aAAa;AAAA,IACX,SAAS;AAAA,IACT,UAAU;AAAA,IACV,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,YAAY,mBAAmB,eAAgB,QAAQ,QAAQ,MAAM,QAAQ,QAAQ,IAAI,KAAK,MAAM,QAAQ,UAAU,IAAI;AAAA,IAC1H,MAAM,mBAAmB,YAAY,KAAK,EAAE,KAAK,sCAAsC,YAAY,KAAK,EAAE,KAAK;AAAA,IAC/G,eAAe;AAAA,IACf,SAAS,IAAI,OAAO,eAAgB,WAAW;AAAA,IAC/C,QAAQ;AAAA,EACV;AAAA,EACA,WAAW;AAAA,IACT,YAAY,aAAa,OAAO,eAAgB,KAAK,KAAK;AAAA,EAC5D;AAAA,EACA,iBAAiB;AAAA,IACf,YAAY,aAAa,OAAO,eAAgB,KAAK,OAAO;AAAA,IAC5D,aAAa;AAAA,MACX,YAAY,mBAAmB,eAAgB,QAAQ,QAAQ,MAAM,QAAQ,QAAQ,IAAI,KAAK,MAAM,QAAQ,UAAU,IAAI;AAAA,IAC5H;AAAA,EACF;AACF;AAGA,IAAM,iBAAiB,CAAC,WAA6B;AAAA,EACnD,cAAc,EAAE,aAAa,UAAU,KAAK,EAAE;AAAA,EAC9C,oBAAoB,EAAE,aAAa,MAAM,QAAQ,QAAQ,KAAK;AAAA,EAC9D,0BAA0B,EAAE,aAAa,MAAM,QAAQ,QAAQ,MAAM,aAAa,IAAI,OAAO,aAAc,OAAO,EAAE;AAAA,EACpH,wBAAwB,EAAE,aAAa,MAAM,QAAQ,MAAM,KAAK;AAClE;AAGA,IAAM,gBAAgB,CAAC,OAAc,YAA+C;AAClF,MAAI,YAAY,QAAS,QAAO,aAAa,KAAK;AAClD,MAAI,YAAY,WAAY,QAAO,gBAAgB,KAAK;AACxD,SAAO,eAAe,KAAK;AAC7B;AAEA,IAAM,oBAAoB,OAAO,aAAa;AAAA,EAC5C,mBAAmB,CAAC,SAClB,SAAS,mBAAmB,SAAS,eAAe,SAAS,UAAU,SAAS;AACpF,CAAC,EAKE,CAAC,EAAE,OAAO,eAAe,WAAW,MAAM,MAAM,OAAO;AAAA,EACxD,UAAU;AAAA;AAAA,EAEV,GAAG,mBAAmB,OAAO,SAAS;AAAA,EACtC,GAAI,OAAO,WAAW,KAAK,IAAI,CAAC;AAAA,EAChC,GAAI,QAAQ,YAAY,OAAO,SAAS,IAAI,CAAC;AAAA,EAC7C,4BAA4B;AAAA,IAC1B,YAAY;AAAA,IACZ,cAAc,YAAY,KAAK;AAAA,IAC/B,GAAG,cAAc,OAAO,aAAa;AAAA,EACvC;AACF,EAAE;AAOF,SAAS,gBACP,SACA,aACA,YACmB;AACnB,QAAM,eAAe,CAAC,UACpB,aAAa,GAAG,UAAU,WAAW,KAAK,KAAK,UAAU,KAAK;AAChE,QAAM,QAAQ,QAAQ,IAAI,CAAC,WACzB;AAAA,IAAC;AAAA;AAAA,MAEC,OAAO,OAAO;AAAA,MACd,UAAU,OAAO;AAAA,MACjB,eAAa,aAAa,OAAO,KAAK;AAAA,MAErC,iBAAO;AAAA;AAAA,IALH,OAAO;AAAA,EAMd,CACD;AACD,MAAI,aAAa;AACf,UAAM;AAAA,MACJ,oBAAC,YAA+B,OAAM,IAAG,UAAQ,MAC9C,yBADW,iBAEd;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;AASA,IAAM,kBAAkB,CAAC,SAA8D;AACrF,MAAI,SAAS,OAAW,QAAO;AAC/B,SAAO,gBAAgB,IAAI,MAAM,OAAO,UAAU;AACpD;AAEO,IAAM,SAAS,MAAM;AAAA,EAC1B,CACE;AAAA;AAAA;AAAA;AAAA,IAIE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,EAAE,QAAQ,YAAY,MAAM,MAAM,IAAI,YAAY,IAAI;AAC5D,UAAM,UAAU,MAAM,MAAM;AAC5B,UAAM,eAAe,MAAM,MAAM;AACjC,UAAM,WAAW,MAAM,MAAM;AAE7B,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAM,gBAAgB,IAAI;AAAA,QAC1B;AAAA,QACA,eAAe;AAAA,QACf,WAAW,YAAY,IAAI;AAAA,QAC3B;AAAA,QAAY;AAAA,QACZ;AAAA,QACA,eAAa;AAAA,QAEZ;AAAA,mBACC,oBAAC,cAAW,IAAI,SAAS,SAAS,UAC/B,iBACH;AAAA,UAEF;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,SAAS,QAAQ,UAAU;AAAA,cAC3B;AAAA,cACA,cAAc,QAAQ,WAAW;AAAA,cACjC,oBAAkB,aAAa,eAAe;AAAA,cAC9C,eAAa,aAAa,GAAG,UAAU,YAAY;AAAA,cACnD,OAAO,SAAS;AAAA,cACf,GAAG;AAAA,cAcJ,oBACE,cAAc,SACV,SACA,EAAE,cAAc,WAAW,mBAAmB,OAAU;AAAA,cAG7D,0BAAgB,SAAS,aAAa,UAAU;AAAA;AAAA,UACnD;AAAA,UACC,cACC,oBAAC,kBAAe,IAAI,cAAc,OAC/B,sBACH;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;","names":[]}

package/dist/{chunk-YESTO24O.js → chunk-TXEN3QJ4.js}

@@ -1,12 +1,16 @@
 import {
   AddressTextField
-} from "./chunk-VECWMANF.js";
+} from "./chunk-RDCHT2WN.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/form/AddressAutocomplete/AddressFallbackField.tsx
 import Alert from "@mui/material/Alert/index.js";
 import Box from "@mui/material/Box/index.js";
 import CircularProgress from "@mui/material/CircularProgress/index.js";
 import InputAdornment from "@mui/material/InputAdornment/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 var AddressFallbackField = ({
   copy,
@@ -18,6 +22,7 @@ var AddressFallbackField = ({
   fullWidth,
   mapsError
 }) => {
+  const theme = useTheme();
   const startAdornment = icon ? /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: icon }) : void 0;
   if (!mapsError) {
     return /* @__PURE__ */ jsx(
@@ -30,7 +35,7 @@ var AddressFallbackField = ({
         fullWidth,
         InputProps: {
           startAdornment,
-          endAdornment: /* @__PURE__ */ jsx(CircularProgress, { color: "inherit", size: 20 })
+          endAdornment: /* @__PURE__ */ jsx(CircularProgress, { color: "inherit", size: rem(theme, 20) })
         }
       }
     );
@@ -56,4 +61,4 @@ var AddressFallbackField = ({
 export {
   AddressFallbackField
 };
-//# sourceMappingURL=chunk-YESTO24O.js.map
+//# sourceMappingURL=chunk-TXEN3QJ4.js.map

package/dist/chunk-TXEN3QJ4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/AddressAutocomplete/AddressFallbackField.tsx"],"sourcesContent":["import Alert from '@mui/material/Alert/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport InputAdornment from '@mui/material/InputAdornment/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport type { FC, ReactNode } from 'react';\nimport React from 'react';\n\nimport type { AddressAutocompleteProps } from './AddressAutocomplete.types';\nimport { AddressTextField } from './AddressTextField';\n\nimport { rem } from '../../../tokens/relative';\n\nexport interface AddressFallbackFieldProps {\n  copy: AddressAutocompleteProps['copy'];\n  variant: AddressAutocompleteProps['variant'];\n  label?: string;\n  placeholder?: string;\n  icon?: ReactNode;\n  floating: boolean;\n  fullWidth: boolean;\n  mapsError: string | null;\n}\n\n// Stands in for the Autocomplete before Google Maps is usable: a disabled field\n// that either spins or explains why it never loaded.\nexport const AddressFallbackField: FC<AddressFallbackFieldProps> = ({\n  copy,\n  variant,\n  label,\n  placeholder,\n  icon,\n  floating,\n  fullWidth,\n  mapsError,\n}) => {\n  const theme = useTheme();\n  const startAdornment = icon ? <InputAdornment position=\"start\">{icon}</InputAdornment> : undefined;\n\n  if (!mapsError) {\n    return (\n      <AddressTextField\n        addressVariant={variant}\n        label={floating ? undefined : label}\n        placeholder={copy.loadingMaps}\n        disabled\n        fullWidth={fullWidth}\n        InputProps={{\n          startAdornment,\n          endAdornment: <CircularProgress color=\"inherit\" size={rem(theme, 20)} />,\n        }}\n      />\n    );\n  }\n\n  return (\n    <Box>\n      <AddressTextField\n        addressVariant={variant}\n        label={floating ? undefined : label}\n        placeholder={placeholder}\n        error\n        disabled\n        fullWidth={fullWidth}\n        helperText={mapsError}\n        InputProps={{ startAdornment }}\n      />\n      <Alert severity=\"error\" sx={{ mt: 1 }}>\n        {copy.mapsLoadFailed}\n      </Alert>\n    </Box>\n  );\n};\n"],"mappings":";;;;;;;;AAAA,OAAO,WAAW;AAClB,OAAO,SAAS;AAChB,OAAO,sBAAsB;AAC7B,OAAO,oBAAoB;AAC3B,SAAS,gBAAgB;AAiCO,cAmB5B,YAnB4B;AAXzB,IAAM,uBAAsD,CAAC;AAAA,EAClE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QAAQ,SAAS;AACvB,QAAM,iBAAiB,OAAO,oBAAC,kBAAe,UAAS,SAAS,gBAAK,IAAoB;AAEzF,MAAI,CAAC,WAAW;AACd,WACE;AAAA,MAAC;AAAA;AAAA,QACC,gBAAgB;AAAA,QAChB,OAAO,WAAW,SAAY;AAAA,QAC9B,aAAa,KAAK;AAAA,QAClB,UAAQ;AAAA,QACR;AAAA,QACA,YAAY;AAAA,UACV;AAAA,UACA,cAAc,oBAAC,oBAAiB,OAAM,WAAU,MAAM,IAAI,OAAO,EAAE,GAAG;AAAA,QACxE;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,SACE,qBAAC,OACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,gBAAgB;AAAA,QAChB,OAAO,WAAW,SAAY;AAAA,QAC9B;AAAA,QACA,OAAK;AAAA,QACL,UAAQ;AAAA,QACR;AAAA,QACA,YAAY;AAAA,QACZ,YAAY,EAAE,eAAe;AAAA;AAAA,IAC/B;AAAA,IACA,oBAAC,SAAM,UAAS,SAAQ,IAAI,EAAE,IAAI,EAAE,GACjC,eAAK,gBACR;AAAA,KACF;AAEJ;","names":[]}

package/dist/{chunk-3VMGE7CU.js → chunk-TZFBJ47T.js}

@@ -123,7 +123,7 @@ function SelectionState({
         children: clearAllText
       }
     ),
-    /* @__PURE__ */ jsx(Divider, { orientation: "vertical", flexItem: true, sx: { height: 16, alignSelf: "center" } }),
+    /* @__PURE__ */ jsx(Divider, { orientation: "vertical", flexItem: true, sx: { height: sxRem(16), alignSelf: "center" } }),
     /* @__PURE__ */ jsxs(
       Typography,
       {
@@ -190,7 +190,7 @@ function BrowsingClusters({
           flexWrap: leadingControls === void 0 ? "wrap" : "nowrap",
           // Tight (5px) when browsing so the controls fit one line beside the
           // checkbox; roomier (14px) in selection mode where they get their own row.
-          gap: hasSelection ? "14px" : "5px",
+          gap: hasSelection ? sxRem(14) : sxRem(5),
           ml: "auto",
           mr: edgeAlign ? -1.5 : 0,
           "& > *": { flexShrink: 0 }
@@ -273,4 +273,4 @@ function ContentToolbar({
 export {
   ContentToolbar
 };
-//# sourceMappingURL=chunk-3VMGE7CU.js.map
+//# sourceMappingURL=chunk-TZFBJ47T.js.map

package/dist/chunk-TZFBJ47T.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/ContentToolbar/ContentToolbar.tsx"],"sourcesContent":["'use client';\n\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport Checkbox from '@mui/material/Checkbox/index.js';\nimport Divider from '@mui/material/Divider/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport React from 'react';\n\nimport type { ContentToolbarProps } from './ContentToolbar.types';\nimport { fieldRadiusPx } from '../../../tokens/field-radius';\nimport { sxRem } from '../../../tokens/relative';\n\nconst selectionButtonSx = {\n  minWidth: 0,\n  height: 'auto',\n  borderRadius: fieldRadiusPx,\n  fontWeight: 600,\n  py: 0.5,\n  px: 1.5,\n  fontSize: sxRem(12),\n  textTransform: 'none',\n  color: 'text.primary',\n} as const;\n\ntype SelectionClusterProps = Pick<\n  ContentToolbarProps,\n  | 'hasSelection'\n  | 'selectedCount'\n  | 'selectAll'\n  | 'clearSelection'\n  | 'actions'\n  | 'selectionExtra'\n  | 'selectAllTestId'\n  | 'clearAllTestId'\n  | 'edgeAlign'\n  | 'selectAllLabel'\n  | 'selectAllText'\n  | 'clearAllText'\n>;\n\n/** The left cluster: Select All + (when selecting) Clear All / count / actions. */\nfunction SelectionCluster({\n  hasSelection,\n  selectedCount,\n  selectAll,\n  clearSelection,\n  actions,\n  selectionExtra,\n  selectAllTestId,\n  clearAllTestId,\n  edgeAlign = false,\n  selectAllLabel,\n  selectAllText,\n  clearAllText,\n}: SelectionClusterProps): React.JSX.Element {\n  const actionsSlot = actions !== undefined && (\n    <Box sx={{ ml: 0.5, display: 'flex', flexShrink: 0, alignItems: 'center' }}>{actions}</Box>\n  );\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        minWidth: 0,\n        // Browsing (mobile): don't grow, so the controls sit on the SAME line as\n        // the checkbox (no orphaned selection row). Desktop: grow to push\n        // controls right.\n        //\n        // SELECTING (mobile) it must be able to shrink instead. Its children are\n        // all `flex-shrink: 0`, so a cluster pinned at content width cannot wrap\n        // and the row painted past the toolbar's own edge — on Produtos at 390px\n        // that took \"Ações\" off-screen behind a sideways scroll, which is the\n        // one control the selection exists to reach.\n        flex: { xs: hasSelection ? '1 1 auto' : '0 0 auto', md: 1 },\n        alignItems: 'center',\n        // Wrapping is the phone's answer, and only the phone's: below `md` the\n        // cluster carries the count, the scope control and \"Ações\" at once, and\n        // no combination of those fits 320px on one line. From `md` up it stays\n        // a single line, where it always fitted.\n        flexWrap: { xs: 'wrap', md: 'nowrap' },\n        columnGap: 1.5,\n        rowGap: 1,\n        ml: edgeAlign ? -1.5 : 0,\n      }}\n    >\n      {/* Desktop: a \"Select All\" text button (md+). Mobile: a compact checkbox\n          that toggles select-all/clear — the text would eat the tight row. */}\n      <Button\n        variant=\"text\"\n        size=\"small\"\n        color=\"inherit\"\n        onClick={selectAll}\n        data-testid={selectAllTestId}\n        sx={{ ...selectionButtonSx, display: { xs: 'none', md: 'inline-flex' } }}\n      >\n        {selectAllText}\n      </Button>\n      <Checkbox\n        size=\"small\"\n        checked={hasSelection}\n        onChange={(event) => (event.target.checked ? selectAll() : clearSelection())}\n        data-testid={`${selectAllTestId}-checkbox`}\n        inputProps={{ 'aria-label': selectAllLabel }}\n        sx={{ p: 0.5, display: { xs: 'inline-flex', md: 'none' } }}\n      />\n      {hasSelection ? (\n        <SelectionState\n          selectedCount={selectedCount}\n          clearSelection={clearSelection}\n          clearAllTestId={clearAllTestId}\n          clearAllText={clearAllText}\n          selectionExtra={selectionExtra}\n        />\n      ) : null}\n      {actionsSlot}\n    </Box>\n  );\n}\n\n/**\n * What the cluster shows once something IS ticked: Clear All, the count, and\n * the host's own `selectionExtra`.\n *\n * Its own component only because the cluster around it is at the complexity\n * gate's line ceiling — but the split falls where the meaning does. Everything\n * here exists only while a selection does, and the `actions` slot deliberately\n * stays OUTSIDE it: a toolbar may carry actions while browsing too.\n */\nfunction SelectionState({\n  selectedCount,\n  clearSelection,\n  clearAllTestId,\n  clearAllText,\n  selectionExtra,\n}: Pick<\n  ContentToolbarProps,\n  'selectedCount' | 'clearSelection' | 'clearAllTestId' | 'clearAllText' | 'selectionExtra'\n>): React.JSX.Element {\n  return (\n    <>\n      <Button\n        variant=\"text\"\n        size=\"small\"\n        color=\"inherit\"\n        onClick={clearSelection}\n        data-testid={clearAllTestId}\n        sx={selectionButtonSx}\n      >\n        {clearAllText}\n      </Button>\n      <Divider orientation=\"vertical\" flexItem sx={{ height: sxRem(16), alignSelf: 'center' }} />\n      <Typography\n        component=\"span\"\n        data-testid=\"selected-count-indicator\"\n        sx={{ fontSize: sxRem(14), color: 'text.secondary', whiteSpace: 'nowrap', flexShrink: 0 }}\n      >\n        {selectedCount} {selectedCount === 1 ? 'item' : 'items'} selected\n      </Typography>\n      {selectionExtra !== undefined && (\n        <>\n          {/* A DELIBERATE break, not a wrap that happened to land here. What\n              follows — \"Seleção: 48 produtos — todas as páginas\", its \"Limpar\n              seleção\", and \"Ações\" — is a sentence about the selection plus the\n              control that acts on it, and letting the phone break it wherever it\n              ran out of room split that sentence mid-phrase. Zero height so it\n              costs nothing but the row gap, and `display:none` from `md` up,\n              where the line still fits. */}\n          <Box\n            aria-hidden\n            sx={{ flexBasis: '100%', height: 0, display: { xs: 'block', md: 'none' } }}\n          />\n          {selectionExtra}\n        </>\n      )}\n    </>\n  );\n}\n\n/**\n * The BROWSING half of the toolbar: search + filters on the left, the page's\n * own controls on the right. Split out of {@link ContentToolbar} so that\n * function stays inside the complexity gate — it is layout only, and the\n * decision of whether to show it at all is made by the caller.\n */\nfunction BrowsingClusters({\n  leadingControls,\n  rightControls,\n  hasSelection,\n  edgeAlign,\n}: {\n  leadingControls?: React.ReactNode;\n  rightControls: React.ReactNode;\n  hasSelection: boolean;\n  edgeAlign: boolean;\n}): React.JSX.Element {\n  return (\n    <>\n      {/* minWidth:0 lets this cluster be the one that gives up width as the row\n       * tightens, which is what the filter overflow measures against. */}\n      {leadingControls !== undefined && (\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            flexGrow: 1,\n            minWidth: 0,\n            // The collapse ladder has a FLOOR — below roughly 400px even the\n            // fully-collapsed row does not fit, and its controls cannot shrink\n            // (they are flexShrink:0 so an over-packed row sheds instead of\n            // squeezing). Past that point this scrolls rather than letting them\n            // paint outside the toolbar, which is what a narrow phone did.\n            overflowX: 'auto',\n            // No scrollbar gutter stealing height on the common case.\n            scrollbarWidth: 'thin',\n          }}\n        >\n          {leadingControls}\n        </Box>\n      )}\n      {/* ml:auto keeps the controls right-aligned even when the cluster wraps to\n       * its own row (where justify-content:space-between would otherwise snap a\n       * lone item to the left); it's a no-op on a shared row. */}\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          // Same single-line rule as the row itself: this cluster wrapping\n          // INTERNALLY buys a second line just as surely as the row wrapping\n          // does. It bit at exactly 900px, the `md` breakpoint where the \"N de\n          // N\" counter appears and pushes Exibir/Exportar over the edge.\n          flexWrap: leadingControls === undefined ? 'wrap' : 'nowrap',\n          // Tight (5px) when browsing so the controls fit one line beside the\n          // checkbox; roomier (14px) in selection mode where they get their own row.\n          gap: hasSelection ? sxRem(14) : sxRem(5),\n          ml: 'auto',\n          mr: edgeAlign ? -1.5 : 0,\n          '& > *': { flexShrink: 0 },\n        }}\n      >\n        {rightControls}\n      </Box>\n    </>\n  );\n}\n\n/**\n * Shared toolbar for content pages (Favorites, Personal Space, Recents, …). The\n * left cluster owns selection chrome — **Select All**, and once items are\n * selected, **Clear All** + an \"N items selected\" count + an optional `actions`\n * slot. The right cluster is a free `rightControls` slot for page-specific\n * controls (ViewSelector, SortByDropdown, MultiSelectDropdown, FilterTrigger).\n *\n * Faithful, generic MUI port of the reference `ContentPageToolbar` — the\n * domain-specific default actions are intentionally left to the consumer via\n * the `actions` slot so this stays agnostic and reusable across projects.\n *\n * @example\n * ```tsx\n * <ContentToolbar\n *   hasSelection={selected.size > 0}\n *   selectedCount={selected.size}\n *   selectAll={selectAll}\n *   clearSelection={clear}\n *   rightControls={\n *     <>\n *       <ViewSelector viewMode={view} onViewModeChange={setView} zoom={zoom} onZoomChange={setZoom} />\n *       <SortByDropdown fields={FIELDS} activeField={field} onFieldChange={setField} />\n *       <MultiSelectDropdown label=\"Content Type\" options={types} selected={typeSet} onToggle={toggle} onClear={clear} />\n *       <FilterTrigger open={panelOpen} onOpenChange={setPanelOpen} hasActiveFilters={hasFilters} />\n *     </>\n *   }\n * />\n * ```\n */\nexport function ContentToolbar({\n  hasSelection,\n  selectedCount,\n  selectAll,\n  clearSelection,\n  rightControls,\n  leadingControls,\n  actions,\n  selectionExtra,\n  selectAllTestId,\n  clearAllTestId,\n  edgeAlign = false,\n  exclusiveSelection = false,\n  selectAllLabel,\n  selectAllText,\n  clearAllText,\n}: ContentToolbarProps): React.JSX.Element {\n  // Under `exclusiveSelection` the two states are alternatives, not neighbours:\n  // browsing shows the controls and no checkbox, selecting shows the checkbox\n  // and no controls. Anything else double-books the row.\n  const showSelection = !exclusiveSelection || hasSelection;\n  const showControls = !exclusiveSelection || !hasSelection;\n  return (\n    // Two clusters on one line. They may wrap onto separate rows ONLY for a\n    // toolbar without `leadingControls` — one carrying search + filters is\n    // driven by a measured collapse ladder (see `useFilterOverflow`), and a\n    // wrap there is the ladder having failed: it would silently buy a second\n    // row instead of shedding a control into \"Mais\", which is the one outcome\n    // the ladder exists to prevent.\n    <Box\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'space-between',\n        gap: 2,\n        flexWrap: leadingControls === undefined ? 'wrap' : 'nowrap',\n        rowGap: 1,\n      }}\n    >\n      {showSelection && (\n        <SelectionCluster\n          selectAllText={selectAllText}\n          clearAllText={clearAllText}\n          hasSelection={hasSelection}\n          selectedCount={selectedCount}\n          selectAll={selectAll}\n          clearSelection={clearSelection}\n          actions={actions}\n          selectionExtra={selectionExtra}\n          selectAllTestId={selectAllTestId}\n          clearAllTestId={clearAllTestId}\n          selectAllLabel={selectAllLabel}\n          edgeAlign={edgeAlign}\n        />\n      )}\n\n      {showControls && (\n        <BrowsingClusters\n          leadingControls={leadingControls}\n          rightControls={rightControls}\n          hasSelection={hasSelection}\n          edgeAlign={edgeAlign}\n        />\n      )}\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-VFHGILXI.js → chunk-U3DBQXPI.js}

@@ -4,7 +4,9 @@ import {
   sheen
 } from "./chunk-FQ6UW7IY.js";
 import {
-  rem
+  rem,
+  rems,
+  sxRem
 } from "./chunk-YKCAJ2TN.js";
 
 // src/components/navigation/DropdownMenu/DropdownMenu.tsx
@@ -20,6 +22,7 @@ import Typography from "@mui/material/Typography/index.js";
 import { alpha, styled } from "@mui/material/styles/index.js";
 import React, { cloneElement, isValidElement, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var sxBoxLength = (value) => typeof value === "string" ? value : (theme) => value <= 1 && value !== 0 ? `${value * 100}%` : rem(theme, value);
 var glassTokens = (theme) => {
   const isDark = theme.palette.mode === "dark";
   return {
@@ -33,14 +36,14 @@ var glassMenuStyles = (theme) => {
   const { edge, dropShadowAlpha, insetHighlightAlpha, sheenAlpha } = glassTokens(theme);
   return {
     backgroundColor: alpha(theme.palette.background.paper, 0.75),
-    backdropFilter: "blur(24px) saturate(1.8)",
-    WebkitBackdropFilter: "blur(24px) saturate(1.8)",
+    backdropFilter: `blur(${rem(theme, 24)}) saturate(1.8)`,
+    WebkitBackdropFilter: `blur(${rem(theme, 24)}) saturate(1.8)`,
     // Safari support
     border: `1px solid ${alpha(edge, 0.12)}`,
     boxShadow: [
-      `0 8px 32px ${shadowInk(theme, dropShadowAlpha)}`,
-      `0 0 0 1px ${alpha(edge, 0.05)}`,
-      `inset 0 1px 0 ${sheen(theme, insetHighlightAlpha)}`
+      `0 ${rems(theme, 8, 32)} ${shadowInk(theme, dropShadowAlpha)}`,
+      `0 0 0 ${rem(theme, 1)} ${alpha(edge, 0.05)}`,
+      `inset 0 ${rem(theme, 1)} 0 ${sheen(theme, insetHighlightAlpha)}`
     ].join(", "),
     // Enhanced glass morphism with subtle gradient overlay
     "&::before": {
@@ -66,24 +69,24 @@ var StyledMenu = styled(Menu, {
   shouldForwardProp: (prop) => prop !== "customVariant" && prop !== "size"
 })(({ theme, customVariant, size }) => ({
   "& .MuiPaper-root": {
-    minWidth: 180,
+    minWidth: rem(theme, 180),
     borderRadius: theme.spacing(1),
     ...customVariant === "glass" && glassMenuStyles(theme),
     ...customVariant === "minimal" && {
-      boxShadow: `0 2px 8px ${shadowInk(theme, 0.08)}`,
+      boxShadow: `0 ${rems(theme, 2, 8)} ${shadowInk(theme, 0.08)}`,
       border: `1px solid ${theme.palette.divider}`
     },
     ...size === "sm" && {
       "& .MuiMenuItem-root": {
         fontSize: rem(theme, 14),
-        minHeight: 32,
+        minHeight: rem(theme, 32),
         padding: theme.spacing(0.75, 2)
       }
     },
     ...size === "lg" && {
       "& .MuiMenuItem-root": {
         fontSize: rem(theme, 18),
-        minHeight: 48,
+        minHeight: rem(theme, 48),
         padding: theme.spacing(1.5, 3)
       }
     }
@@ -120,7 +123,7 @@ var MenuHeader = styled(Typography)(({ theme }) => ({
   fontWeight: 600,
   textTransform: "uppercase",
   color: theme.palette.text.secondary,
-  letterSpacing: 0.5
+  letterSpacing: rem(theme, 0.5)
 }));
 var ShortcutText = styled(Typography)(({ theme }) => ({
   fontSize: rem(theme, 12),
@@ -152,7 +155,7 @@ var renderLeafMenuItem = (item, handleItemClick, showIconSpace, size) => {
       showIconSpace: showIconSpace && !hasIcon,
       "data-testid": item.dataTestId,
       children: [
-        hasIcon && /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: size === "sm" ? 32 : 40 }, children: item.icon }),
+        hasIcon && /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: sxRem(size === "sm" ? 32 : 40) }, children: item.icon }),
         /* @__PURE__ */ jsx(ListItemText, { primary: item.label }),
         item.shortcut && /* @__PURE__ */ jsx(ShortcutText, { variant: "caption", children: item.shortcut }),
         hasChildren && item.showChevron !== false && /* @__PURE__ */ jsx(ChevronRight, { fontSize: "small", sx: { ml: 1, opacity: 0.5 } })
@@ -234,8 +237,8 @@ var DropdownMenu = React.forwardRef(
     onOpen,
     onClose,
     size = "md",
-    maxHeight = 400,
-    minWidth = 180,
+    maxHeight,
+    minWidth,
     closeOnItemClick = true,
     showIconSpace = false,
     anchorEl: providedAnchorEl,
@@ -272,8 +275,8 @@ var DropdownMenu = React.forwardRef(
           size,
           PaperProps: {
             sx: {
-              maxHeight,
-              minWidth,
+              maxHeight: sxBoxLength(maxHeight ?? 400),
+              minWidth: sxBoxLength(minWidth ?? 180),
               overflow: "auto"
             }
           },
@@ -291,4 +294,4 @@ DropdownMenu.displayName = "DropdownMenu";
 export {
   DropdownMenu
 };
-//# sourceMappingURL=chunk-VFHGILXI.js.map
+//# sourceMappingURL=chunk-U3DBQXPI.js.map