@12-apps/ui 6.36.0 → 6.37.0

package/dist/{chunk-ZMC3N23A.js → chunk-JSD5TFDK.js}

@@ -1,18 +1,18 @@
 import {
   TextField
-} from "./chunk-TU3EGIKB.js";
+} from "./chunk-SSS64KYB.js";
 import {
   SelectField
-} from "./chunk-EXZSHZRS.js";
+} from "./chunk-PWZHCBG3.js";
 import {
   CepField
-} from "./chunk-IWOVENC3.js";
+} from "./chunk-2XX45PC5.js";
 import {
   CategoryField
-} from "./chunk-NE6XUN5Z.js";
+} from "./chunk-JU4MSYYH.js";
 import {
   ToggleField
-} from "./chunk-GXCOXJS3.js";
+} from "./chunk-FNG33MKA.js";
 import {
   __export
 } from "./chunk-PZ5AY32C.js";
@@ -30,4 +30,4 @@ __export(Fields_exports, {
 export {
   Fields_exports
 };
-//# sourceMappingURL=chunk-ZMC3N23A.js.map
+//# sourceMappingURL=chunk-JSD5TFDK.js.map

package/dist/{chunk-NE6XUN5Z.js → chunk-JU4MSYYH.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-4XK6JQ4D.js";
 import {
   CategorySelect
-} from "./chunk-ZW5K4XCQ.js";
+} from "./chunk-34BZXJGT.js";
 
 // src/components/form/total-form/Fields/CategoryField.tsx
 import { jsx } from "react/jsx-runtime";
@@ -38,4 +38,4 @@ function CategoryField({
 export {
   CategoryField
 };
-//# sourceMappingURL=chunk-NE6XUN5Z.js.map
+//# sourceMappingURL=chunk-JU4MSYYH.js.map

package/dist/{chunk-OWA7GPWR.js → chunk-KN5J3NEZ.js}

@@ -1,11 +1,12 @@
 import {
   METRICS,
   footerSx
-} from "./chunk-BXAL7OIS.js";
+} from "./chunk-JC22FNFA.js";
 import {
   fieldRadiusPx
 } from "./chunk-GDN2LUTZ.js";
 import {
+  rems,
   sxRem
 } from "./chunk-YKCAJ2TN.js";
 
@@ -14,8 +15,8 @@ import Box from "@mui/material/Box/index.js";
 import Button from "@mui/material/Button/index.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 var buttonSx = (sheet) => ({
-  height: sheet ? METRICS.sheetFooterButton : METRICS.footerButton,
-  padding: "0 13px",
+  height: sxRem(sheet ? METRICS.sheetFooterButtonPx : METRICS.footerButtonPx),
+  padding: (theme) => rems(theme, 0, 13),
   borderRadius: fieldRadiusPx,
   fontSize: sxRem(12.5),
   fontWeight: 600,
@@ -33,7 +34,7 @@ function CategoryMultiFoot({
 }) {
   return /* @__PURE__ */ jsxs(Box, { sx: footerSx, "data-testid": `${dataTestId}-footer`, children: [
     /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontSize: sxRem(12), color: "text.secondary" }, children: copy.footer.selectedCount(count) }),
-    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: "6px" }, children: [
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: sxRem(6) }, children: [
       /* @__PURE__ */ jsx(
         Button,
         {
@@ -83,4 +84,4 @@ export {
   CategoryMultiFoot,
   CategorySingleFoot
 };
-//# sourceMappingURL=chunk-OWA7GPWR.js.map
+//# sourceMappingURL=chunk-KN5J3NEZ.js.map

package/dist/chunk-KN5J3NEZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/CategorySelect/CategoryPanelFoot.tsx"],"sourcesContent":["'use client';\n\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\n\nimport type { CategorySelectCopy } from '../../../copy';\nimport { footerSx, METRICS } from './CategorySelect.styles';\nimport { fieldRadiusPx } from '../../../tokens/field-radius';\nimport { rems, sxRem } from '../../../tokens/relative';\n\nconst buttonSx = (sheet: boolean) =>\n  ({\n    height: sxRem(sheet ? METRICS.sheetFooterButtonPx : METRICS.footerButtonPx),\n    padding: (theme: Theme) => rems(theme, 0, 13),\n    borderRadius: fieldRadiusPx,\n    fontSize: sxRem(12.5),\n    fontWeight: 600,\n    textTransform: 'none',\n    minWidth: 0,\n  }) as const;\n\ninterface MultiFootProps {\n  count: number;\n  /** False once the draft matches what is already applied — Apply becomes Close. */\n  changed: boolean;\n  sheet: boolean;\n  onClear: () => void;\n  onApply: () => void;\n  dataTestId: string;\n  copy: CategorySelectCopy;\n}\n\n/**\n * Multi-select footer: the running count, Clear, and the Apply that publishes\n * the draft. The primary button reads \"Fechar\" when nothing changed, so it never\n * promises an update it would not make.\n */\nexport function CategoryMultiFoot({\n  count,\n  changed,\n  sheet,\n  onClear,\n  onApply,\n  dataTestId,\n  copy,\n}: MultiFootProps): React.JSX.Element {\n  return (\n    <Box sx={footerSx} data-testid={`${dataTestId}-footer`}>\n      <Box component=\"span\" sx={{ fontSize: sxRem(12), color: 'text.secondary' }}>\n        {copy.footer.selectedCount(count)}\n      </Box>\n      <Box sx={{ display: 'flex', gap: sxRem(6) }}>\n        <Button\n          variant=\"outlined\"\n          disabled={count === 0}\n          sx={buttonSx(sheet)}\n          onClick={onClear}\n          data-testid={`${dataTestId}-clear`}\n        >\n          {copy.footer.clear}\n        </Button>\n        <Button\n          variant=\"contained\"\n          sx={buttonSx(sheet)}\n          onClick={onApply}\n          data-testid={`${dataTestId}-apply`}\n        >\n          {changed ? copy.footer.apply : copy.footer.close}\n        </Button>\n      </Box>\n    </Box>\n  );\n}\n\n/** Single-select footer: a hint and a way out. Picking a row commits directly. */\nexport function CategorySingleFoot({\n  sheet,\n  onCancel,\n  dataTestId,\n  copy,\n}: {\n  sheet: boolean;\n  onCancel: () => void;\n  dataTestId: string;\n  copy: CategorySelectCopy;\n}): React.JSX.Element {\n  return (\n    <Box sx={footerSx} data-testid={`${dataTestId}-footer`}>\n      <Box component=\"span\" sx={{ fontSize: sxRem(12), color: 'text.secondary' }}>\n        {copy.footer.singleHint}\n      </Box>\n      <Button\n        variant=\"outlined\"\n        sx={buttonSx(sheet)}\n        onClick={onCancel}\n        data-testid={`${dataTestId}-cancel`}\n      >\n        {copy.footer.cancel}\n      </Button>\n    </Box>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAEA,OAAO,SAAS;AAChB,OAAO,YAAY;AA8Cb,cAGA,YAHA;AAtCN,IAAM,WAAW,CAAC,WACf;AAAA,EACC,QAAQ,MAAM,QAAQ,QAAQ,sBAAsB,QAAQ,cAAc;AAAA,EAC1E,SAAS,CAAC,UAAiB,KAAK,OAAO,GAAG,EAAE;AAAA,EAC5C,cAAc;AAAA,EACd,UAAU,MAAM,IAAI;AAAA,EACpB,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,UAAU;AACZ;AAkBK,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsC;AACpC,SACE,qBAAC,OAAI,IAAI,UAAU,eAAa,GAAG,UAAU,WAC3C;AAAA,wBAAC,OAAI,WAAU,QAAO,IAAI,EAAE,UAAU,MAAM,EAAE,GAAG,OAAO,iBAAiB,GACtE,eAAK,OAAO,cAAc,KAAK,GAClC;AAAA,IACA,qBAAC,OAAI,IAAI,EAAE,SAAS,QAAQ,KAAK,MAAM,CAAC,EAAE,GACxC;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,UAAU,UAAU;AAAA,UACpB,IAAI,SAAS,KAAK;AAAA,UAClB,SAAS;AAAA,UACT,eAAa,GAAG,UAAU;AAAA,UAEzB,eAAK,OAAO;AAAA;AAAA,MACf;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,IAAI,SAAS,KAAK;AAAA,UAClB,SAAS;AAAA,UACT,eAAa,GAAG,UAAU;AAAA,UAEzB,oBAAU,KAAK,OAAO,QAAQ,KAAK,OAAO;AAAA;AAAA,MAC7C;AAAA,OACF;AAAA,KACF;AAEJ;AAGO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKsB;AACpB,SACE,qBAAC,OAAI,IAAI,UAAU,eAAa,GAAG,UAAU,WAC3C;AAAA,wBAAC,OAAI,WAAU,QAAO,IAAI,EAAE,UAAU,MAAM,EAAE,GAAG,OAAO,iBAAiB,GACtE,eAAK,OAAO,YACf;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,IAAI,SAAS,KAAK;AAAA,QAClB,SAAS;AAAA,QACT,eAAa,GAAG,UAAU;AAAA,QAEzB,eAAK,OAAO;AAAA;AAAA,IACf;AAAA,KACF;AAEJ;","names":[]}

package/dist/{chunk-4GYEIWQP.js → chunk-LNHYBA4B.js}

@@ -15,7 +15,8 @@ import {
   fieldEdge
 } from "./chunk-7FDU3FIN.js";
 import {
-  rem
+  rem,
+  sxRem
 } from "./chunk-YKCAJ2TN.js";
 
 // src/components/form/PhoneInput/PhoneInput.tsx
@@ -37,8 +38,8 @@ var GlassTextField = styled(TextField)(({ theme }) => ({
   "& .MuiOutlinedInput-root": {
     borderRadius: fieldRadius(theme),
     background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.8)} 0%, ${alpha(theme.palette.background.paper, 0.6)} 100%)`,
-    backdropFilter: "blur(10px)",
-    WebkitBackdropFilter: "blur(10px)",
+    backdropFilter: `blur(${rem(theme, 10)})`,
+    WebkitBackdropFilter: `blur(${rem(theme, 10)})`,
     border: `1px solid ${fieldEdge(theme)}`,
     transition: theme.transitions.create(["border-color", "box-shadow", "background"]),
     "&:hover": {
@@ -47,7 +48,7 @@ var GlassTextField = styled(TextField)(({ theme }) => ({
     },
     "&.Mui-focused": {
       background: theme.palette.background.paper,
-      boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.25)}`
+      boxShadow: `0 0 0 ${rem(theme, 2)} ${alpha(theme.palette.primary.main, 0.25)}`
     },
     "& fieldset": {
       border: "none"
@@ -73,10 +74,10 @@ var CountrySelector = styled(Box)(({ theme }) => ({
 var CountryMenu = styled(Menu)(({ theme }) => ({
   "& .MuiPaper-root": {
     background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,
-    backdropFilter: "blur(20px)",
-    WebkitBackdropFilter: "blur(20px)",
+    backdropFilter: `blur(${rem(theme, 20)})`,
+    WebkitBackdropFilter: `blur(${rem(theme, 20)})`,
     border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
-    maxHeight: 400
+    maxHeight: rem(theme, 400)
   }
 }));
 var PhoneField = ({
@@ -131,7 +132,7 @@ var PhoneField = ({
     },
     sx: {
       "& input": {
-        letterSpacing: "0.5px"
+        letterSpacing: sxRem(0.5)
       }
     }
   }
@@ -229,7 +230,7 @@ var CountryPicker = ({ anchorEl, selectedCode, onClose, onSelect }) => {
             }
           },
           children: [
-            /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 36 }, children: /* @__PURE__ */ jsx(Typography, { variant: "h5", component: "span", children: country.flag }) }),
+            /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: sxRem(36) }, children: /* @__PURE__ */ jsx(Typography, { variant: "h5", component: "span", children: country.flag }) }),
             /* @__PURE__ */ jsx(
               ListItemText,
               {
@@ -347,4 +348,4 @@ export {
   PhoneInput,
   PhoneInput_default
 };
-//# sourceMappingURL=chunk-4GYEIWQP.js.map
+//# sourceMappingURL=chunk-LNHYBA4B.js.map

package/dist/chunk-LNHYBA4B.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/PhoneInput/PhoneInput.tsx"],"sourcesContent":["import ArrowDropDown from '@mui/icons-material/ArrowDropDown';\nimport PhoneIcon from '@mui/icons-material/Phone';\nimport Box from '@mui/material/Box/index.js';\nimport InputAdornment from '@mui/material/InputAdornment/index.js';\nimport ListItemIcon from '@mui/material/ListItemIcon/index.js';\nimport ListItemText from '@mui/material/ListItemText/index.js';\nimport Menu from '@mui/material/Menu/index.js';\nimport MenuItem from '@mui/material/MenuItem/index.js';\nimport TextField from '@mui/material/TextField/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, styled, useTheme } from '@mui/material/styles/index.js';\nimport type { FC} from 'react';\nimport React, {  } from 'react';\n\nimport { countries } from './countries';\nimport { usePhoneInput } from './PhoneInput.hooks';\nimport type { CountryData,PhoneInputProps } from './PhoneInput.types';\nimport type { PhoneInputCopy } from '../../../copy';\n\nimport { fieldEdge } from '../../../tokens/field-edge';\nimport { fieldRadius } from '../../../tokens/field-radius';\nimport { fieldControlStyles, fieldTextFieldStyles } from '../../../tokens/field-height';\nimport { rem, sxRem } from '../../../tokens/relative';\n\n// Country data with expanded support\n\n// Styled components\n/** The plain variant: MUI's own field, on the theme's field radius. */\nconst FieldTextField = styled(TextField)(({ theme }) => fieldTextFieldStyles(theme));\n\nconst GlassTextField = styled(TextField)(({ theme }) => ({\n  ...fieldControlStyles(theme),\n  '& .MuiOutlinedInput-root': {\n    borderRadius: fieldRadius(theme),\n    background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.8)} 0%, ${alpha(theme.palette.background.paper, 0.6)} 100%)`,\n    backdropFilter: `blur(${rem(theme, 10)})`,\n    WebkitBackdropFilter: `blur(${rem(theme, 10)})`,\n    border: `1px solid ${fieldEdge(theme)}`,\n    transition: theme.transitions.create(['border-color', 'box-shadow', 'background']),\n    '&:hover': {\n      background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.9)} 0%, ${alpha(theme.palette.background.paper, 0.7)} 100%)`,\n      borderColor: theme.palette.primary.main },\n    '&.Mui-focused': {\n      background: theme.palette.background.paper,\n      boxShadow: `0 0 0 ${rem(theme, 2)} ${alpha(theme.palette.primary.main, 0.25)}` },\n    '& fieldset': {\n      border: 'none' } },\n  '& .MuiInputLabel-root': {\n    '&.Mui-focused': {\n      color: theme.palette.primary.main } } }));\n\nconst CountrySelector = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  padding: theme.spacing(0.5, 1),\n  borderRadius: theme.shape.borderRadius,\n  cursor: 'pointer',\n  transition: theme.transitions.create(['background-color']),\n  '&:hover': {\n    backgroundColor: alpha(theme.palette.primary.main, 0.08) } }));\n\nconst CountryMenu = styled(Menu)(({ theme }) => ({\n  '& .MuiPaper-root': {\n    background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,\n    backdropFilter: `blur(${rem(theme, 20)})`,\n    WebkitBackdropFilter: `blur(${rem(theme, 20)})`,\n    border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,\n    maxHeight: rem(theme, 400) } }));\n\n// Helper functions with enhanced validation\n// The text field itself with its two adornments. Split out so PhoneInput is\n// prop defaults, the hook call and composition.\nconst PhoneField: React.FC<{\n  TextFieldComponent: React.ElementType;\n  variant: PhoneInputProps['variant'];\n  label?: React.ReactNode;\n  placeholder?: string;\n  value: string;\n  validation: { hasError: boolean; helperText?: React.ReactNode };\n  disabled: boolean;\n  required: boolean;\n  fullWidth: boolean;\n  icon?: React.ReactNode;\n  isValid: boolean;\n  selectedCountry?: CountryData;\n  anchorEl: HTMLElement | null;\n  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  onFocus: () => void;\n  onBlur: () => void;\n  onCountryOpen: (event: React.MouseEvent<HTMLElement>) => void;\n  onCountryOpenViaKeyboard: (element: HTMLElement) => void;\n  copy: PhoneInputCopy;\n}> = ({\n  TextFieldComponent,\n  copy,\n  variant,\n  label,\n  placeholder,\n  value,\n  validation,\n  disabled,\n  required,\n  fullWidth,\n  icon,\n  isValid,\n  selectedCountry,\n  anchorEl,\n  onChange,\n  onFocus,\n  onBlur,\n  onCountryOpen,\n  onCountryOpenViaKeyboard }) => (\n      <TextFieldComponent\n        variant={variant === 'glass' ? 'outlined' : variant}\n        label={label}\n        placeholder={placeholder}\n        value={value}\n        onChange={onChange}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        error={validation.hasError}\n        helperText={validation.helperText}\n        disabled={disabled}\n        required={required}\n        fullWidth={fullWidth}\n        type=\"tel\"\n        data-testid=\"phone-input-field\"\n        InputProps={{\n          startAdornment: (\n            <CountryAdornment\n              selectCountryLabel={copy.selectCountry}\n              country={selectedCountry}\n              menuOpen={Boolean(anchorEl)}\n              onOpen={onCountryOpen}\n              onOpenViaKeyboard={onCountryOpenViaKeyboard}\n            />\n          ),\n          endAdornment: <ValidityAdornment icon={icon} isValid={isValid} /> }}\n        sx={{\n          '& input': {\n            letterSpacing: sxRem(0.5) } }}\n      />\n);\n\nconst PHONE_INPUT_DEFAULTS = {\n  variant: 'outlined',\n  label: 'Phone Number',\n  placeholder: 'Enter phone number',\n  icon: <PhoneIcon />,\n  defaultValue: '',\n  countryCode: 'US',\n  floating: false,\n  error: false,\n  disabled: false,\n  required: false,\n  fullWidth: true } satisfies Partial<PhoneInputProps>;\n\n// Drops explicitly-undefined props before the merge, so `prop={undefined}` falls\n// back to the default exactly as a destructuring default would. Eleven separate\n// destructuring defaults were most of this component's branch count.\nconst definedProps = (props: PhoneInputProps): Partial<PhoneInputProps> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, value]) => value !== undefined),\n  ) as Partial<PhoneInputProps>;\n\nconst CountryAdornment: React.FC<{\n  country?: CountryData;\n  menuOpen: boolean;\n  onOpen: (event: React.MouseEvent<HTMLElement>) => void;\n  onOpenViaKeyboard: (element: HTMLElement) => void;\n  selectCountryLabel: string;\n}> = ({ country, menuOpen, onOpen, onOpenViaKeyboard, selectCountryLabel }) => (\n  <InputAdornment position=\"start\" data-testid=\"phone-input-start-adornment\">\n    <CountrySelector\n      onClick={onOpen}\n      role=\"button\"\n      aria-label={selectCountryLabel}\n      aria-expanded={menuOpen}\n      tabIndex={0}\n      data-testid=\"country-selector\"\n      onKeyDown={(e) => {\n        if (e.key !== 'Enter' && e.key !== ' ') return;\n        e.preventDefault();\n        onOpenViaKeyboard(e.currentTarget as HTMLElement);\n      }}\n    >\n      <Typography variant=\"h6\" component=\"span\" sx={{ mr: 0.5 }} data-testid=\"country-flag\">\n        {country?.flag}\n      </Typography>\n      <Typography\n        variant=\"body2\"\n        color=\"text.secondary\"\n        sx={{ mr: 0.5 }}\n        data-testid=\"country-dial-code\"\n      >\n        {country?.dial}\n      </Typography>\n      <ArrowDropDown fontSize=\"small\" data-testid=\"country-dropdown-icon\" />\n    </CountrySelector>\n  </InputAdornment>\n);\n\n// The trailing icon turns green once the number validates.\nconst ValidityAdornment: React.FC<{ icon?: React.ReactNode; isValid: boolean }> = ({\n  icon,\n  isValid }) => {\n  const theme = useTheme();\n\n  if (!icon) return null;\n\n  return (\n    <InputAdornment position=\"end\" data-testid=\"phone-input-end-adornment\">\n      <Box\n        sx={{\n          color: isValid ? theme.palette.success.main : theme.palette.text.secondary,\n          transition: 'color 0.3s ease' }}\n        data-testid=\"phone-input-icon\"\n      >\n        {icon}\n      </Box>\n    </InputAdornment>\n  );\n};\n\nconst CountryPicker: React.FC<{\n  anchorEl: HTMLElement | null;\n  selectedCode?: CountryData['code'];\n  onClose: () => void;\n  onSelect: (country: CountryData) => void;\n}> = ({ anchorEl, selectedCode, onClose, onSelect }) => {\n  const theme = useTheme();\n\n  return (\n        <CountryMenu\n          anchorEl={anchorEl}\n          open={Boolean(anchorEl)}\n          onClose={onClose}\n          anchorOrigin={{\n            vertical: 'bottom',\n            horizontal: 'left' }}\n          transformOrigin={{\n            vertical: 'top',\n            horizontal: 'left' }}\n          data-testid=\"country-menu\"\n        >\n          {countries.map((country) => (\n            <MenuItem\n              key={country.code}\n              onClick={() => onSelect(country)}\n              selected={country.code === selectedCode}\n              data-testid={`country-option-${country.code}`}\n              sx={{\n                '&:hover': {\n                  background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)} 0%, ${alpha(theme.palette.primary.main, 0.05)} 100%)` } }}\n            >\n              <ListItemIcon sx={{ minWidth: sxRem(36) }}>\n                <Typography variant=\"h5\" component=\"span\">\n                  {country.flag}\n                </Typography>\n              </ListItemIcon>\n              <ListItemText\n                primary={country.name}\n                secondary={country.dial}\n                primaryTypographyProps={{ fontSize: rem(theme, 14.4) }}\n                secondaryTypographyProps={{ fontSize: rem(theme, 12.8) }}\n              />\n            </MenuItem>\n          ))}\n        </CountryMenu>\n  );\n};\n\n// The field shows an error either because the caller says so, or because what\n// has been typed does not validate and the user has moved on.\nconst resolveValidation = ({\n  error,\n  errorMessage,\n  isValid,\n  value,\n  isFocused,\n  helper,\n  countryName,\n  copy }: {\n  error: boolean;\n  errorMessage?: string;\n  isValid: boolean;\n  value: string;\n  isFocused: boolean;\n  helper?: React.ReactNode;\n  countryName?: string;\n  copy: PhoneInputCopy;\n}) => {\n  const looksInvalid = !isValid && value !== '' && !isFocused;\n\n  return {\n    hasError: error || looksInvalid,\n    helperText:\n      errorMessage ||\n      (looksInvalid ? copy.invalidNumber(countryName || copy.unknownCountry) : helper) };\n};\n\nexport const PhoneInput: FC<PhoneInputProps> = (props) => {\n  const { copy } = props;\n  const {\n    variant,\n    label,\n    placeholder,\n    icon,\n    defaultValue,\n    countryCode: initialCountryCode,\n    floating,\n    onChange,\n    helper,\n    error,\n    errorMessage,\n    disabled,\n    required,\n    fullWidth } = { ...PHONE_INPUT_DEFAULTS, ...definedProps(props) };\n  const {\n    value,\n    selectedCountry,\n    anchorEl,\n    isValid,\n    isFocused,\n    setIsFocused,\n    setAnchorEl,\n    handleCountryClick,\n    handleCountryClose,\n    handleCountrySelect,\n    handleChange,\n    handleBlur } = usePhoneInput({ defaultValue, initialCountryCode, onChange });\n\n  const validation = resolveValidation({\n    error,\n    errorMessage,\n    isValid,\n    value,\n    isFocused,\n    helper,\n    countryName: selectedCountry?.name,\n    copy });\n\n  const TextFieldComponent = variant === 'glass' ? GlassTextField : FieldTextField;\n\n  return (\n    <Box data-testid=\"phone-input-container\">\n      <PhoneField\n        copy={copy}\n        TextFieldComponent={TextFieldComponent}\n        variant={variant}\n        label={floating ? undefined : label}\n        placeholder={placeholder}\n        value={value}\n        validation={validation}\n        disabled={disabled}\n        required={required}\n        fullWidth={fullWidth}\n        icon={icon}\n        isValid={isValid}\n        selectedCountry={selectedCountry}\n        anchorEl={anchorEl}\n        onChange={handleChange}\n        onFocus={() => setIsFocused(true)}\n        onBlur={handleBlur}\n        onCountryOpen={handleCountryClick}\n        onCountryOpenViaKeyboard={setAnchorEl}\n      />\n\n      <CountryPicker\n        anchorEl={anchorEl}\n        selectedCode={selectedCountry?.code}\n        onClose={handleCountryClose}\n        onSelect={handleCountrySelect}\n      />\n    </Box>\n  );\n};\n\n// Export default\nexport default PhoneInput;\n"],"mappings":"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","names":[]}

package/dist/{chunk-QY4XNTNG.js → chunk-LP3JCXER.js}

@@ -1,6 +1,6 @@
 import {
   sizeStyles
-} from "./chunk-7DN4UXJ3.js";
+} from "./chunk-FERUQ7OB.js";
 import {
   sxRem
 } from "./chunk-YKCAJ2TN.js";
@@ -29,7 +29,7 @@ var DropdownItem = ({
       label: child.shortcut,
       size: "small",
       variant: "outlined",
-      sx: { ml: 2, height: 20, fontSize: sxRem(11.2) }
+      sx: { ml: 2, height: sxRem(20), fontSize: sxRem(11.2) }
     }
   )
 ] });
@@ -85,7 +85,7 @@ var MenubarItemView = ({
         open: isOpen,
         onClose,
         autoFocus: true,
-        PaperProps: { sx: { minWidth: 200, mt: 1 } },
+        PaperProps: { sx: { minWidth: sxRem(200), mt: 1 } },
         children: item.children?.map((child) => /* @__PURE__ */ jsx(DropdownItem, { child, onActivate }, child.id))
       }
     )
@@ -95,4 +95,4 @@ var MenubarItemView = ({
 export {
   MenubarItemView
 };
-//# sourceMappingURL=chunk-QY4XNTNG.js.map
+//# sourceMappingURL=chunk-LP3JCXER.js.map

package/dist/chunk-LP3JCXER.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Menubar/Menubar.item.tsx"],"sourcesContent":["import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport Chip from '@mui/material/Chip/index.js';\nimport Divider from '@mui/material/Divider/index.js';\nimport ListItemIcon from '@mui/material/ListItemIcon/index.js';\nimport ListItemText from '@mui/material/ListItemText/index.js';\nimport Menu from '@mui/material/Menu/index.js';\nimport MenuItem from '@mui/material/MenuItem/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { sizeStyles } from './Menubar.styles';\nimport type { MenubarItem, MenubarProps } from './Menubar.types';\nimport { sxRem } from '../../../tokens/relative';\n\nexport interface MenubarItemViewProps {\n  item: MenubarItem;\n  size: NonNullable<MenubarProps['size']>;\n  disabled: boolean;\n  isOpen: boolean;\n  anchorEl: HTMLElement | null;\n  onOpen: (itemId: string, anchorEl: HTMLElement) => void;\n  onActivate: (item: MenubarItem) => void;\n  onClose: () => void;\n  onFocus?: React.FocusEventHandler;\n  onBlur?: React.FocusEventHandler;\n}\n\n/** One row of an open menu: its icon, its label, and its shortcut hint. */\nconst DropdownItem: React.FC<{ child: MenubarItem; onActivate: (item: MenubarItem) => void }> = ({\n  child,\n  onActivate,\n}) =>\n  child.divider ? (\n    <Divider />\n  ) : (\n    <MenuItem onClick={() => onActivate(child)} disabled={child.disabled}>\n      {child.icon && <ListItemIcon>{child.icon}</ListItemIcon>}\n      <ListItemText>{child.label}</ListItemText>\n      {child.shortcut && (\n        <Chip\n          label={child.shortcut}\n          size=\"small\"\n          variant=\"outlined\"\n          sx={{ ml: 2, height: sxRem(20), fontSize: sxRem(11.2) }}\n        />\n      )}\n    </MenuItem>\n  );\n\n/**\n * A top-level menubar entry. An entry with children opens its dropdown; one\n * without acts immediately — a decision the click and keyboard paths both need,\n * so it is made once here rather than in each handler.\n */\nexport const MenubarItemView: React.FC<MenubarItemViewProps> = ({\n  item,\n  size,\n  disabled,\n  isOpen,\n  anchorEl,\n  onOpen,\n  onActivate,\n  onClose,\n  onFocus,\n  onBlur,\n}) => {\n  const theme = useTheme();\n  const hasChildren = Boolean(item.children && item.children.length > 0);\n\n  const activate = (target: HTMLElement) => {\n    if (hasChildren) {\n      onOpen(item.id, target);\n    } else {\n      onActivate(item);\n    }\n  };\n\n  return (\n    <Box>\n      <Button\n        data-testid={`menubar-button-${item.id}`}\n        onClick={(e) => activate(e.currentTarget)}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            activate(e.currentTarget);\n          }\n        }}\n        // Keeping focus on mousedown is what lets handleMenuClose return it here.\n        onMouseDown={(e) => e.preventDefault()}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        disabled={item.disabled || disabled}\n        startIcon={item.icon}\n        endIcon={hasChildren ? <KeyboardArrowDownIcon /> : null}\n        aria-haspopup={hasChildren ? 'menu' : undefined}\n        aria-expanded={hasChildren ? isOpen : undefined}\n        sx={{ color: 'inherit', textTransform: 'none', ...sizeStyles(theme, size) }}\n      >\n        {item.label}\n      </Button>\n\n      {hasChildren && (\n        <Menu\n          anchorEl={anchorEl}\n          open={isOpen}\n          onClose={onClose}\n          autoFocus\n          PaperProps={{ sx: { minWidth: sxRem(200), mt: 1 } }}\n        >\n          {item.children?.map((child) => (\n            <DropdownItem key={child.id} child={child} onActivate={onActivate} />\n          ))}\n        </Menu>\n      )}\n    </Box>\n  );\n};\n"],"mappings":";;;;;;;;AAAA,OAAO,2BAA2B;AAClC,OAAO,SAAS;AAChB,OAAO,YAAY;AACnB,OAAO,UAAU;AACjB,OAAO,aAAa;AACpB,OAAO,kBAAkB;AACzB,OAAO,kBAAkB;AACzB,OAAO,UAAU;AACjB,OAAO,cAAc;AACrB,SAAS,gBAAgB;AA0BrB,cAEA,YAFA;AALJ,IAAM,eAA0F,CAAC;AAAA,EAC/F;AAAA,EACA;AACF,MACE,MAAM,UACJ,oBAAC,WAAQ,IAET,qBAAC,YAAS,SAAS,MAAM,WAAW,KAAK,GAAG,UAAU,MAAM,UACzD;AAAA,QAAM,QAAQ,oBAAC,gBAAc,gBAAM,MAAK;AAAA,EACzC,oBAAC,gBAAc,gBAAM,OAAM;AAAA,EAC1B,MAAM,YACL;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,MAAM;AAAA,MACb,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,IAAI,EAAE,IAAI,GAAG,QAAQ,MAAM,EAAE,GAAG,UAAU,MAAM,IAAI,EAAE;AAAA;AAAA,EACxD;AAAA,GAEJ;AAQG,IAAM,kBAAkD,CAAC;AAAA,EAC9D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QAAQ,SAAS;AACvB,QAAM,cAAc,QAAQ,KAAK,YAAY,KAAK,SAAS,SAAS,CAAC;AAErE,QAAM,WAAW,CAAC,WAAwB;AACxC,QAAI,aAAa;AACf,aAAO,KAAK,IAAI,MAAM;AAAA,IACxB,OAAO;AACL,iBAAW,IAAI;AAAA,IACjB;AAAA,EACF;AAEA,SACE,qBAAC,OACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAa,kBAAkB,KAAK,EAAE;AAAA,QACtC,SAAS,CAAC,MAAM,SAAS,EAAE,aAAa;AAAA,QACxC,WAAW,CAAC,MAAM;AAChB,cAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,cAAE,eAAe;AACjB,qBAAS,EAAE,aAAa;AAAA,UAC1B;AAAA,QACF;AAAA,QAEA,aAAa,CAAC,MAAM,EAAE,eAAe;AAAA,QACrC;AAAA,QACA;AAAA,QACA,UAAU,KAAK,YAAY;AAAA,QAC3B,WAAW,KAAK;AAAA,QAChB,SAAS,cAAc,oBAAC,yBAAsB,IAAK;AAAA,QACnD,iBAAe,cAAc,SAAS;AAAA,QACtC,iBAAe,cAAc,SAAS;AAAA,QACtC,IAAI,EAAE,OAAO,WAAW,eAAe,QAAQ,GAAG,WAAW,OAAO,IAAI,EAAE;AAAA,QAEzE,eAAK;AAAA;AAAA,IACR;AAAA,IAEC,eACC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAM;AAAA,QACN;AAAA,QACA,WAAS;AAAA,QACT,YAAY,EAAE,IAAI,EAAE,UAAU,MAAM,GAAG,GAAG,IAAI,EAAE,EAAE;AAAA,QAEjD,eAAK,UAAU,IAAI,CAAC,UACnB,oBAAC,gBAA4B,OAAc,cAAxB,MAAM,EAA0C,CACpE;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/{chunk-YBTC4XNO.js → chunk-LT4NEKXB.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-KHG57NAE.js";
 import {
   createConfirmButton
-} from "./chunk-KCAW6HRO.js";
+} from "./chunk-3AOQBR7N.js";
 import {
   Dialog,
   DialogContent
@@ -16,7 +16,7 @@ import {
 } from "./chunk-WEBEOBN5.js";
 import {
   Button
-} from "./chunk-KH25WUSX.js";
+} from "./chunk-2EAAWOZ2.js";
 import {
   Text
 } from "./chunk-WTOYEWW6.js";
@@ -128,4 +128,4 @@ function ManageViewsDialog({
 export {
   ManageViewsDialog
 };
-//# sourceMappingURL=chunk-YBTC4XNO.js.map
+//# sourceMappingURL=chunk-LT4NEKXB.js.map

package/dist/{chunk-WVC3BG6J.js → chunk-LXT3X33C.js}

@@ -6,10 +6,14 @@ import {
   triggerClearSx,
   triggerCountSx,
   triggerSx
-} from "./chunk-BXAL7OIS.js";
+} from "./chunk-JC22FNFA.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/form/CategorySelect/CategoryTrigger.tsx
 import Box from "@mui/material/Box/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 function CategoryTrigger({
   placeholder,
@@ -24,6 +28,7 @@ function CategoryTrigger({
   dataTestId,
   copy
 }) {
+  const theme = useTheme();
   const hasSelection = Boolean(selectionLabel) || (count ?? 0) > 0;
   return /* @__PURE__ */ jsxs(
     Box,
@@ -36,8 +41,8 @@ function CategoryTrigger({
       "aria-expanded": open,
       "data-testid": `${dataTestId}-trigger`,
       onClick: onOpen,
-      sx: (theme) => ({
-        ...triggerSx(theme, hasSelection, open),
+      sx: (theme2) => ({
+        ...triggerSx(theme2, hasSelection, open),
         width: fullWidth ? "100%" : "auto"
       }),
       children: [
@@ -49,7 +54,7 @@ function CategoryTrigger({
               whiteSpace: "nowrap",
               overflow: "hidden",
               textOverflow: "ellipsis",
-              maxWidth: 190,
+              maxWidth: sxRem(190),
               flex: fullWidth ? 1 : "0 1 auto",
               textAlign: "left"
             },
@@ -79,7 +84,7 @@ function CategoryTrigger({
             children: "\xD7"
           }
         ),
-        /* @__PURE__ */ jsx(CaretGlyph, { style: triggerChevronSx(open) })
+        /* @__PURE__ */ jsx(CaretGlyph, { style: triggerChevronSx(theme, open) })
       ]
     }
   );
@@ -88,4 +93,4 @@ function CategoryTrigger({
 export {
   CategoryTrigger
 };
-//# sourceMappingURL=chunk-WVC3BG6J.js.map
+//# sourceMappingURL=chunk-LXT3X33C.js.map

package/dist/chunk-LXT3X33C.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/CategorySelect/CategoryTrigger.tsx"],"sourcesContent":["'use client';\n\nimport type { CategorySelectCopy } from \"../../../copy\";\nimport Box from '@mui/material/Box/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\n\nimport { CaretGlyph } from './CategoryIcons';\nimport {\n  triggerChevronSx,\n  triggerClearSx,\n  triggerCountSx,\n  triggerSx,\n} from './CategorySelect.styles';\nimport { sxRem } from '../../../tokens/relative';\n\ninterface CategoryTriggerProps {\n  /** The words this renders. REQUIRED — this package ships no default copy. */\n  copy: CategorySelectCopy;\n  /** Text shown when nothing is selected. */\n  placeholder: string;\n  /** Resolved label when there IS a selection (single mode shows \"Pai › Filha\"). */\n  selectionLabel?: string;\n  /** Selection size — rendered as the count pill in multi-select. */\n  count?: number;\n  open: boolean;\n  disabled?: boolean;\n  fullWidth: boolean;\n  onOpen: () => void;\n  /** Absent when there is nothing to clear. */\n  onClear?: () => void;\n  triggerRef: React.RefObject<HTMLButtonElement | null>;\n  dataTestId: string;\n}\n\n/**\n * The closed control.\n *\n * The clear (×) is a real button nested in the trigger button, so \"remove the\n * filter\" is one click from the closed state — without it, clearing means open,\n * find Clear, apply. Its click is stopped from reaching the trigger, which would\n * otherwise open the panel on the way out.\n */\nexport function CategoryTrigger({\n  placeholder,\n  selectionLabel,\n  count,\n  open,\n  disabled,\n  fullWidth,\n  onOpen,\n  onClear,\n  triggerRef,\n  dataTestId,\n  copy,\n}: CategoryTriggerProps): React.JSX.Element {\n  const theme = useTheme();\n  const hasSelection = Boolean(selectionLabel) || (count ?? 0) > 0;\n  return (\n    <Box\n      component=\"button\"\n      type=\"button\"\n      ref={triggerRef}\n      disabled={disabled}\n      aria-haspopup=\"dialog\"\n      aria-expanded={open}\n      data-testid={`${dataTestId}-trigger`}\n      onClick={onOpen}\n      sx={(theme) => ({\n        ...triggerSx(theme, hasSelection, open),\n        width: fullWidth ? '100%' : 'auto',\n      })}\n    >\n      <Box\n        component=\"span\"\n        sx={{\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n          maxWidth: sxRem(190),\n          flex: fullWidth ? 1 : '0 1 auto',\n          textAlign: 'left',\n        }}\n      >\n        {selectionLabel ?? placeholder}\n      </Box>\n      {count !== undefined && count > 0 && (\n        <Box component=\"span\" sx={triggerCountSx} data-testid={`${dataTestId}-count`}>\n          {count}\n        </Box>\n      )}\n      {hasSelection && onClear && (\n        <Box\n          component=\"span\"\n          role=\"button\"\n          tabIndex={0}\n          aria-label={copy.clearSelection}\n          data-testid={`${dataTestId}-clear-trigger`}\n          sx={triggerClearSx}\n          onClick={(event: React.MouseEvent) => {\n            event.stopPropagation();\n            onClear();\n          }}\n          onKeyDown={(event: React.KeyboardEvent) => {\n            if (event.key !== 'Enter' && event.key !== ' ') return;\n            event.preventDefault();\n            event.stopPropagation();\n            onClear();\n          }}\n        >\n          ×\n        </Box>\n      )}\n      <CaretGlyph style={triggerChevronSx(theme, open) as React.CSSProperties} />\n    </Box>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAGA,OAAO,SAAS;AAChB,SAAS,gBAAgB;AAsDrB,SAcE,KAdF;AAhBG,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4C;AAC1C,QAAM,QAAQ,SAAS;AACvB,QAAM,eAAe,QAAQ,cAAc,MAAM,SAAS,KAAK;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,MAAK;AAAA,MACL,KAAK;AAAA,MACL;AAAA,MACA,iBAAc;AAAA,MACd,iBAAe;AAAA,MACf,eAAa,GAAG,UAAU;AAAA,MAC1B,SAAS;AAAA,MACT,IAAI,CAACA,YAAW;AAAA,QACd,GAAG,UAAUA,QAAO,cAAc,IAAI;AAAA,QACtC,OAAO,YAAY,SAAS;AAAA,MAC9B;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAI;AAAA,cACF,YAAY;AAAA,cACZ,UAAU;AAAA,cACV,cAAc;AAAA,cACd,UAAU,MAAM,GAAG;AAAA,cACnB,MAAM,YAAY,IAAI;AAAA,cACtB,WAAW;AAAA,YACb;AAAA,YAEC,4BAAkB;AAAA;AAAA,QACrB;AAAA,QACC,UAAU,UAAa,QAAQ,KAC9B,oBAAC,OAAI,WAAU,QAAO,IAAI,gBAAgB,eAAa,GAAG,UAAU,UACjE,iBACH;AAAA,QAED,gBAAgB,WACf;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YACL,UAAU;AAAA,YACV,cAAY,KAAK;AAAA,YACjB,eAAa,GAAG,UAAU;AAAA,YAC1B,IAAI;AAAA,YACJ,SAAS,CAAC,UAA4B;AACpC,oBAAM,gBAAgB;AACtB,sBAAQ;AAAA,YACV;AAAA,YACA,WAAW,CAAC,UAA+B;AACzC,kBAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,IAAK;AAChD,oBAAM,eAAe;AACrB,oBAAM,gBAAgB;AACtB,sBAAQ;AAAA,YACV;AAAA,YACD;AAAA;AAAA,QAED;AAAA,QAEF,oBAAC,cAAW,OAAO,iBAAiB,OAAO,IAAI,GAA0B;AAAA;AAAA;AAAA,EAC3E;AAEJ;","names":["theme"]}

package/dist/{chunk-6KL2CJBO.js → chunk-MNHIK2OR.js}

@@ -1,6 +1,6 @@
 import {
   sliderSx
-} from "./chunk-PYIASGI7.js";
+} from "./chunk-4RWPGWJW.js";
 import {
   withDefaults
 } from "./chunk-HPK33ACY.js";
@@ -115,4 +115,4 @@ Slider.displayName = "Slider";
 export {
   Slider
 };
-//# sourceMappingURL=chunk-6KL2CJBO.js.map
+//# sourceMappingURL=chunk-MNHIK2OR.js.map

package/dist/{chunk-CWDV64TD.js → chunk-N5GVW6RO.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-2LIRGFEK.js";
 import {
   DateRangeQuickList
-} from "./chunk-NSJVQ5YJ.js";
+} from "./chunk-6KKQHJE7.js";
 import {
   DateRangeFields
 } from "./chunk-NR5TW4AH.js";
@@ -21,9 +21,9 @@ import {
 import Box from "@mui/material/Box/index.js";
 import Paper from "@mui/material/Paper/index.js";
 import useMediaQuery from "@mui/material/useMediaQuery/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 var CALENDAR_CLASS = "date-range-picker__calendar";
-var NARROW_QUERY = "(max-width:899.95px)";
 var ROOT_SX = {
   display: "inline-flex",
   flexDirection: "column",
@@ -72,7 +72,8 @@ var FIELDS_DIVIDER_SX = {
   pt: 2
 };
 function useMonthCount(requested) {
-  const narrow = useMediaQuery(NARROW_QUERY);
+  const theme = useTheme();
+  const narrow = useMediaQuery(theme.breakpoints.down("md"));
   return narrow ? 1 : requested;
 }
 function RangeCalendar({
@@ -180,4 +181,4 @@ export {
   DateRangePicker,
   DateRangePicker_default
 };
-//# sourceMappingURL=chunk-CWDV64TD.js.map
+//# sourceMappingURL=chunk-N5GVW6RO.js.map

package/dist/chunk-N5GVW6RO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/DateRangePicker/DateRangePicker.tsx"],"sourcesContent":["'use client';\n\n/**\n * Three views of ONE range: a calendar, a quick-pick column, and two typed\n * dates. Change any and the other two follow.\n *\n * WHY IT EXISTS: a range calendar alone makes \"this quarter\" cost two clicks,\n * a month of paging, and a mental note of which day a quarter starts on; a list\n * of presets alone cannot express \"the 3rd to the 19th\"; and typed fields alone\n * make you spell out a window you can see. Each of the three is the fastest\n * route to a different range, so the control offers all three over one value\n * rather than picking a favourite.\n *\n * WHAT IT DOES NOT KNOW: anything about the data behind the range. No preset\n * list of a product's own, no ceiling of its own, no notion of whose clock\n * \"today\" runs on — `quickRanges`, `maxRangeDays` and `timeZone` are props, and\n * a consumer that needs its own periods passes them rather than teaching this\n * file about its domain. The calendar is `Calendar` in `selectionMode=\"range\"`,\n * not a second implementation of one.\n *\n * The value is a DRAFT (`{ from, to }`, either end possibly null) rather than a\n * finished window, so a half-picked or impossible range has somewhere to live\n * while it is being fixed. Every `onChange` carries the verdict with it.\n */\nimport Box from '@mui/material/Box/index.js';\nimport Paper from '@mui/material/Paper/index.js';\nimport useMediaQuery from '@mui/material/useMediaQuery/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport type { SxProps, Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { Calendar } from '../Calendar';\n\nimport { toLocalDay } from './DateRangePicker.dates';\nimport { useDateRangePicker } from './DateRangePicker.hooks';\nimport { DEFAULT_QUICK_RANGES } from './DateRangePicker.quick';\nimport type { DateRangeDraft, DateRangePickerProps, WeekStart } from './DateRangePicker.types';\nimport { DateRangeFields } from './DateRangePickerFields';\nimport { DateRangeQuickList } from './DateRangePickerQuickList';\n\nconst CALENDAR_CLASS = 'date-range-picker__calendar';\n\nconst ROOT_SX: SxProps<Theme> = {\n  display: 'inline-flex',\n  flexDirection: 'column',\n  gap: 2,\n  p: 2,\n  maxWidth: '100%',\n  // `Calendar` renders its own `Paper` with 24px of padding. Nested in this one\n  // that reads as a box inside a box, so the inner frame is flattened here\n  // through the className hook the component exposes for exactly this.\n  [`& .${CALENDAR_CLASS}`]: {\n    p: 0,\n    boxShadow: 'none',\n    backgroundColor: 'transparent',\n    backgroundImage: 'none',\n  },\n};\n\nconst BODY_SX: SxProps<Theme> = {\n  display: 'flex',\n  // The quick column sits BESIDE the calendar on a wide screen. Narrow, it\n  // moves ABOVE it — `column-reverse`, so the DOM order stays calendar-then-\n  // list (the calendar is the primary control and should be reached first by a\n  // screen reader and by Tab) while the eye meets the quick ranges first, which\n  // is the order the phone mock asks for and the order a thumb wants: nine\n  // one-tap answers before a grid of thirty.\n  //\n  // A side column at 390px would squeeze the day grid to roughly half its width\n  // and make the numbers unreadable. Checked at 390px.\n  flexDirection: { xs: 'column-reverse', md: 'row' },\n  alignItems: { xs: 'stretch', md: 'flex-start' },\n  gap: 2,\n  maxWidth: '100%',\n};\n\n/**\n * The rule between the calendar and the quick ranges.\n *\n * Two lists of dates side by side with only whitespace between them read as one\n * ragged thing; the rule says which numbers belong to which control. It turns\n * with the layout — a vertical rule when the list is a column beside the\n * calendar, a horizontal one when it has moved above it — because a divider\n * that keeps its axis while the flex direction flips ends up separating nothing.\n */\nconst QUICK_DIVIDER_SX: SxProps<Theme> = {\n  borderColor: 'divider',\n  borderStyle: 'solid',\n  borderWidth: 0,\n  borderLeftWidth: { xs: 0, md: '1px' },\n  borderBottomWidth: { xs: '1px', md: 0 },\n  pl: { xs: 0, md: 2 },\n  pb: { xs: 2, md: 0 },\n  alignSelf: 'stretch',\n};\n\n/** And the rule above the typed pair, which is a third way in, not a caption. */\nconst FIELDS_DIVIDER_SX: SxProps<Theme> = {\n  borderTop: '1px solid',\n  borderColor: 'divider',\n  pt: 2,\n};\n\ntype Picker = ReturnType<typeof useDateRangePicker>;\n\n/**\n * How many months to draw.\n *\n * A month grid has a floor: seven columns that must stay legible, which is\n * about 280px. Two of them need 580, so on a phone the consumer's\n * `numberOfMonths` is not a preference that can be honoured — it is a request\n * for a layout that does not fit. Capped here rather than left to the consumer,\n * because the consumer chooses for its own reason (the reports dialog wants two\n * because a period often crosses a month boundary) and has no way to know the\n * picker is currently 390px wide.\n *\n * A media query rather than an `sx` breakpoint: this decides what to RENDER,\n * and CSS cannot un-render a second month.\n *\n * Below the theme's `md` the picker is a phone layout — the same breakpoint the\n * `sx` blocks here switch on. The query is a STRING built from `useTheme()`,\n * not `useMediaQuery`'s callback form: the callback reads the theme from\n * context and throws on a null one, so a consumer that mounts this outside a\n * `ThemeProvider` would crash — which the unit tests here do, and which is a\n * fair thing for a consumer to do. `useTheme()` falls back to MUI's default\n * theme there, whose `md` is the `(max-width:899.95px)` this used to spell out.\n */\nfunction useMonthCount(requested: number | undefined): number | undefined {\n  const theme = useTheme();\n  const narrow = useMediaQuery(theme.breakpoints.down('md'));\n  return narrow ? 1 : requested;\n}\n\n/** The grid, in range mode — `Calendar`, never a second implementation of one. */\nfunction RangeCalendar({\n  calendarLabel,\n  picker,\n  value,\n  locale,\n  weekStartsOn,\n  months,\n  maxRangeDays,\n}: {\n  picker: Picker;\n  value: DateRangeDraft;\n  locale: string;\n  weekStartsOn: WeekStart;\n  months: number | undefined;\n  maxRangeDays: number | undefined;\n  calendarLabel: string;\n}): React.JSX.Element {\n  return (\n    <Calendar\n      key={picker.viewNonce}\n      ariaLabel={calendarLabel}\n      className={CALENDAR_CLASS}\n      selectionMode=\"range\"\n      locale={locale}\n      // One prop drives the grid's first column AND the day \"this week\" starts\n      // on, so a highlighted week can never begin mid-row.\n      firstDayOfWeek={weekStartsOn}\n      numberOfMonths={months}\n      range={{ start: toLocalDay(value.from), end: toLocalDay(value.to) }}\n      // BOTH callbacks, and the intermediate one does the work: the other fires\n      // only on the click that CLOSES a range, so a picker wired to it alone\n      // would not repaint after the first click.\n      onIntermediateRangeChange={picker.pickOnCalendar}\n      onRangeChange={picker.pickOnCalendar}\n      // The same ceiling the quick list is judged against, so the calendar\n      // cannot hand back a window the control has just called too long.\n      maxRangeLength={maxRangeDays}\n    />\n  );\n}\n\n/** The quick ranges, inside the rule that separates them from the grid. */\nfunction QuickColumn({\n  picker,\n  maxRangeDays,\n  dataTestId,\n}: {\n  picker: Picker;\n  maxRangeDays: number | undefined;\n  dataTestId: string;\n}): React.JSX.Element | null {\n  if (picker.options.length === 0) return null;\n  return (\n    <Box sx={QUICK_DIVIDER_SX}>\n      <DateRangeQuickList\n        options={picker.options}\n        activeId={picker.activeId}\n        onPick={picker.pickQuick}\n        reasonFor={(option) =>\n          picker.copy.overMax({ maxRangeDays: maxRangeDays ?? option.days, days: option.days })\n        }\n        label={picker.copy.quickRanges}\n        dataTestId={dataTestId}\n      />\n    </Box>\n  );\n}\n\nexport function DateRangePicker({\n  value,\n  onChange,\n  timeZone,\n  now,\n  maxRangeDays,\n  weekStartsOn = 0,\n  quickRanges = DEFAULT_QUICK_RANGES,\n  locale = 'en-US',\n  numberOfMonths,\n  messages,\n  dataTestId = 'date-range-picker',\n  className,\n}: DateRangePickerProps): React.JSX.Element {\n  const picker = useDateRangePicker({\n    value,\n    onChange,\n    timeZone,\n    now,\n    maxRangeDays,\n    weekStartsOn,\n    quickRanges,\n    messages,\n  });\n  const months = useMonthCount(numberOfMonths);\n\n  return (\n    <Paper className={className} data-testid={dataTestId} sx={ROOT_SX}>\n      <Box sx={BODY_SX}>\n        <RangeCalendar\n          calendarLabel={picker.copy.calendarLabel}\n          picker={picker}\n          value={value}\n          locale={locale}\n          weekStartsOn={weekStartsOn}\n          months={months}\n          maxRangeDays={maxRangeDays}\n        />\n        <QuickColumn picker={picker} maxRangeDays={maxRangeDays} dataTestId={dataTestId} />\n      </Box>\n      <Box sx={FIELDS_DIVIDER_SX}>\n        <DateRangeFields\n          value={value}\n          status={picker.status}\n          messages={picker.copy}\n          maxRangeDays={maxRangeDays}\n          onEdit={picker.editBound}\n          statusId={picker.statusId}\n          dataTestId={dataTestId}\n        />\n      </Box>\n    </Paper>\n  );\n}\n\nexport default DateRangePicker;\n"],"mappings":"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","names":[]}

package/dist/{chunk-JFEEV3XI.js → chunk-NB3FGWU4.js}

@@ -1,6 +1,6 @@
 import {
   DENSITY_ROW_PADDING
-} from "./chunk-4LQZH4PU.js";
+} from "./chunk-PMOEG36E.js";
 import {
   CellConfigProvider,
   cellTracks
@@ -129,4 +129,4 @@ export {
   cellRailCount,
   ListCardGroup
 };
-//# sourceMappingURL=chunk-JFEEV3XI.js.map
+//# sourceMappingURL=chunk-NB3FGWU4.js.map

package/dist/{chunk-2UCLUDEB.js → chunk-NCPWLHZT.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-N6CSXHFJ.js";
 import {
   Button
-} from "./chunk-KH25WUSX.js";
+} from "./chunk-2EAAWOZ2.js";
 import {
   Text
 } from "./chunk-WTOYEWW6.js";
@@ -74,4 +74,4 @@ export {
   UserAvatar,
   UserMenu
 };
-//# sourceMappingURL=chunk-2UCLUDEB.js.map
+//# sourceMappingURL=chunk-NCPWLHZT.js.map

package/dist/{chunk-DZNMS2SH.js → chunk-NDNYD4FG.js}

@@ -2,19 +2,19 @@ import {
   DiscloseSlot,
   DragSlot,
   SelectSlot
-} from "./chunk-B2VXP2B2.js";
+} from "./chunk-GZT7MLLO.js";
 import {
   actionProps,
   metaShape,
   rowStyles,
   useRowShell
-} from "./chunk-UL7L6MFT.js";
+} from "./chunk-C55AWF3U.js";
 import {
   ListCardActions,
   ListCardCaption,
   ListCardMeta,
   ListCardTail
-} from "./chunk-RZ2C5CAW.js";
+} from "./chunk-2ZIHZLF5.js";
 import {
   useDisclosure
 } from "./chunk-2JCRNWHE.js";
@@ -23,7 +23,7 @@ import {
 } from "./chunk-K4EKTMTC.js";
 import {
   cellRailsTemplate
-} from "./chunk-JFEEV3XI.js";
+} from "./chunk-NB3FGWU4.js";
 import {
   ListCardCells,
   cellTracks,
@@ -179,4 +179,4 @@ function BaseListCard(props) {
 export {
   BaseListCard
 };
-//# sourceMappingURL=chunk-DZNMS2SH.js.map
+//# sourceMappingURL=chunk-NDNYD4FG.js.map

package/dist/{chunk-5IXHJXJX.js → chunk-NIF4IXQU.js}

@@ -1,6 +1,9 @@
 import {
   HeaderButton
 } from "./chunk-BBXJQI4S.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/form/HeaderActions/HeaderActions.tsx
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
@@ -75,7 +78,7 @@ function HeaderActions({
               },
               "data-testid": action.dataTestId ?? action.id,
               children: [
-                /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 32 }, children: action.icon }),
+                /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: sxRem(32) }, children: action.icon }),
                 /* @__PURE__ */ jsx(ListItemText, { children: action.text })
               ]
             },
@@ -90,4 +93,4 @@ function HeaderActions({
 export {
   HeaderActions
 };
-//# sourceMappingURL=chunk-5IXHJXJX.js.map
+//# sourceMappingURL=chunk-NIF4IXQU.js.map

package/dist/chunk-NIF4IXQU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/HeaderActions/HeaderActions.tsx"],"sourcesContent":["'use client';\n\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore';\nimport MoreHorizIcon from '@mui/icons-material/MoreHoriz';\nimport Box from '@mui/material/Box/index.js';\nimport ListItemIcon from '@mui/material/ListItemIcon/index.js';\nimport ListItemText from '@mui/material/ListItemText/index.js';\nimport Menu from '@mui/material/Menu/index.js';\nimport MenuItem from '@mui/material/MenuItem/index.js';\nimport React, { useState } from 'react';\n\nimport { HeaderButton } from '../HeaderButton';\nimport type { HeaderActionItem, HeaderActionsProps } from './HeaderActions.types';\nimport { sxRem } from '../../../tokens/relative';\n\n/** Drop the gated-away entries, so everything below can count what is left. */\nfunction present(\n  actions: HeaderActionsProps['actions'],\n): HeaderActionItem[] {\n  return actions.filter(\n    (action): action is HeaderActionItem => Boolean(action) && (action as HeaderActionItem).visible !== false,\n  );\n}\n\n/**\n * The page header's actions, as ONE control that scales with how many there\n * are: nothing, a button, or a button plus an overflow menu.\n *\n * | actions | renders |\n * |---|---|\n * | 0 | nothing at all — not an empty box, and not a menu with no items |\n * | 1 | that action, as an ordinary `HeaderButton` |\n * | n | the FIRST as a button; the other n−1 inside one dropdown |\n *\n * ## Why the first one stays a button\n *\n * A header whose every action lives behind a menu costs two clicks for the\n * thing the page is FOR — \"Novo produto\" on a catalog, \"Nova categoria\" on the\n * categories list. Folding it in with the exports and the reorder screens\n * would treat a merchant's daily action as equal to the one they use monthly.\n * So the array is in PRIORITY order and index 0 keeps its button; everything\n * after it is secondary by the caller's own declaration.\n *\n * ## Why this takes a list and not children\n *\n * The 0/1/n decision is only decidable over data. A component handed JSX can\n * count `React.Children`, but it cannot tell a gated-away action from an\n * absent one, cannot read a label to put in a menu row, and cannot re-render\n * a `<Button>` as a `<MenuItem>` without reaching into its props. Every\n * caller in the estate had therefore hand-written the row, which is how four\n * equally-weighted buttons ended up wrapping the line on a catalog page.\n *\n * ## One element, so the spacing is the component's and not the mount's\n *\n * It renders an `inline-flex` box rather than a fragment. A fragment inherits\n * whatever gap its parent happens to set, and the two mounts here set\n * different ones — a `Dashboard.Header` spaces its children, a\n * `Dashboard.Action` slot does not, which is why the pair of buttons in that\n * slot sat flush against each other. The gap belongs to the control.\n *\n * ## The ids survive the move\n *\n * An action that overflows keeps its `dataTestId` on its `MenuItem`. It is a\n * different element in a different place, and it must still answer to the same\n * selector: otherwise adding a fifth action to a header silently breaks the\n * suite of the action that got pushed out, which is the last place anyone\n * would look.\n */\nexport function HeaderActions({\n  actions,\n  moreLabel,\n  collapseBelow = 'md',\n  testIdPrefix = 'header-actions',\n}: HeaderActionsProps): React.JSX.Element | null {\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n  const items = present(actions);\n  const open = Boolean(anchorEl);\n\n  // Before the early return would be a conditional hook; after it is the only\n  // legal place. Nothing below runs for an empty list anyway.\n  const [primary, ...overflow] = items;\n  if (!primary) return null;\n\n  return (\n    <Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 1 }}>\n      <HeaderButton\n        text={primary.text}\n        icon={primary.icon}\n        onClick={primary.onClick}\n        disabled={primary.disabled}\n        variant={primary.variant}\n        color={primary.color}\n        collapseBelow={collapseBelow}\n        dataTestId={primary.dataTestId ?? primary.id}\n      />\n      {overflow.length > 0 && (\n        <>\n          <HeaderButton\n            text={moreLabel}\n            icon={<MoreHorizIcon fontSize=\"small\" />}\n            endIcon={<ExpandMoreIcon fontSize=\"small\" />}\n            onClick={(event) => setAnchorEl(event.currentTarget)}\n            collapseBelow={collapseBelow}\n            aria-haspopup=\"menu\"\n            aria-expanded={open}\n            dataTestId={`${testIdPrefix}-more-trigger`}\n          />\n          <Menu\n            anchorEl={anchorEl}\n            open={open}\n            onClose={() => setAnchorEl(null)}\n            anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n            transformOrigin={{ vertical: 'top', horizontal: 'right' }}\n            data-testid={`${testIdPrefix}-more-menu`}\n          >\n            {overflow.map((action) => (\n              <MenuItem\n                key={action.id}\n                disabled={action.disabled}\n                onClick={() => {\n                  setAnchorEl(null);\n                  action.onClick?.();\n                }}\n                data-testid={action.dataTestId ?? action.id}\n              >\n                <ListItemIcon sx={{ minWidth: sxRem(32) }}>{action.icon}</ListItemIcon>\n                <ListItemText>{action.text}</ListItemText>\n              </MenuItem>\n            ))}\n          </Menu>\n        </>\n      )}\n    </Box>\n  );\n}\n"],"mappings":";;;;;;;;AAEA,OAAO,oBAAoB;AAC3B,OAAO,mBAAmB;AAC1B,OAAO,SAAS;AAChB,OAAO,kBAAkB;AACzB,OAAO,kBAAkB;AACzB,OAAO,UAAU;AACjB,OAAO,cAAc;AACrB,SAAgB,gBAAgB;AA4E1B,SAWE,UAXF,KA+BQ,YA/BR;AArEN,SAAS,QACP,SACoB;AACpB,SAAO,QAAQ;AAAA,IACb,CAAC,WAAuC,QAAQ,MAAM,KAAM,OAA4B,YAAY;AAAA,EACtG;AACF;AA8CO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,eAAe;AACjB,GAAiD;AAC/C,QAAM,CAAC,UAAU,WAAW,IAAI,SAA6B,IAAI;AACjE,QAAM,QAAQ,QAAQ,OAAO;AAC7B,QAAM,OAAO,QAAQ,QAAQ;AAI7B,QAAM,CAAC,SAAS,GAAG,QAAQ,IAAI;AAC/B,MAAI,CAAC,QAAS,QAAO;AAErB,SACE,qBAAC,OAAI,IAAI,EAAE,SAAS,eAAe,YAAY,UAAU,KAAK,EAAE,GAC9D;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,QAAQ;AAAA,QACd,MAAM,QAAQ;AAAA,QACd,SAAS,QAAQ;AAAA,QACjB,UAAU,QAAQ;AAAA,QAClB,SAAS,QAAQ;AAAA,QACjB,OAAO,QAAQ;AAAA,QACf;AAAA,QACA,YAAY,QAAQ,cAAc,QAAQ;AAAA;AAAA,IAC5C;AAAA,IACC,SAAS,SAAS,KACjB,iCACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,MAAM,oBAAC,iBAAc,UAAS,SAAQ;AAAA,UACtC,SAAS,oBAAC,kBAAe,UAAS,SAAQ;AAAA,UAC1C,SAAS,CAAC,UAAU,YAAY,MAAM,aAAa;AAAA,UACnD;AAAA,UACA,iBAAc;AAAA,UACd,iBAAe;AAAA,UACf,YAAY,GAAG,YAAY;AAAA;AAAA,MAC7B;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,SAAS,MAAM,YAAY,IAAI;AAAA,UAC/B,cAAc,EAAE,UAAU,UAAU,YAAY,QAAQ;AAAA,UACxD,iBAAiB,EAAE,UAAU,OAAO,YAAY,QAAQ;AAAA,UACxD,eAAa,GAAG,YAAY;AAAA,UAE3B,mBAAS,IAAI,CAAC,WACb;AAAA,YAAC;AAAA;AAAA,cAEC,UAAU,OAAO;AAAA,cACjB,SAAS,MAAM;AACb,4BAAY,IAAI;AAChB,uBAAO,UAAU;AAAA,cACnB;AAAA,cACA,eAAa,OAAO,cAAc,OAAO;AAAA,cAEzC;AAAA,oCAAC,gBAAa,IAAI,EAAE,UAAU,MAAM,EAAE,EAAE,GAAI,iBAAO,MAAK;AAAA,gBACxD,oBAAC,gBAAc,iBAAO,MAAK;AAAA;AAAA;AAAA,YATtB,OAAO;AAAA,UAUd,CACD;AAAA;AAAA,MACH;AAAA,OACF;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/{chunk-EFV5QJNM.js → chunk-ORRI6FMN.js}

@@ -7,7 +7,7 @@ import {
   panelHeadSx,
   pinnedLabelSx,
   pinnedSx
-} from "./chunk-BXAL7OIS.js";
+} from "./chunk-JC22FNFA.js";
 import {
   fieldBorder,
   fieldHeight
@@ -16,13 +16,15 @@ import {
   fieldRadiusPx
 } from "./chunk-GDN2LUTZ.js";
 import {
+  rem,
+  rems,
   sxRem
 } from "./chunk-YKCAJ2TN.js";
 
 // src/components/form/CategorySelect/CategoryPanelHead.tsx
 import Box from "@mui/material/Box/index.js";
 import InputBase from "@mui/material/InputBase/index.js";
-import { alpha } from "@mui/material/styles/index.js";
+import { alpha, useTheme } from "@mui/material/styles/index.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 var searchFieldSx = {
   position: "relative",
@@ -31,7 +33,7 @@ var searchFieldSx = {
   "& input": {
     width: "100%",
     height: fieldHeight,
-    padding: "0 30px 0 32px",
+    padding: (theme) => rems(theme, 0, 30, 0, 32),
     fontSize: sxRem(13),
     border: fieldBorder,
     borderRadius: fieldRadiusPx,
@@ -41,15 +43,15 @@ var searchFieldSx = {
       outline: "none",
       borderColor: "primary.main",
       // 0x26 of 0xFF: the ring's old hex-alpha suffix, kept exact.
-      boxShadow: (theme) => `0 0 0 3px ${alpha(theme.palette.primary.main, 38 / 255)}`
+      boxShadow: (theme) => `0 0 0 ${rem(theme, 3)} ${alpha(theme.palette.primary.main, 38 / 255)}`
     }
   }
 };
 var clearButtonSx = {
   position: "absolute",
-  right: 7,
-  width: 20,
-  height: 20,
+  right: sxRem(7),
+  width: sxRem(20),
+  height: sxRem(20),
   border: 0,
   background: "action.selected",
   color: "text.secondary",
@@ -71,16 +73,17 @@ function CategoryPanelHead({
   dataTestId,
   copy
 }) {
-  return /* @__PURE__ */ jsxs(Box, { sx: (theme) => panelHeadSx(theme, sheet), children: [
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(Box, { sx: (theme2) => panelHeadSx(theme2, sheet), children: [
     /* @__PURE__ */ jsxs(Box, { sx: searchFieldSx, children: [
       /* @__PURE__ */ jsx(
         SearchGlyph,
         {
           style: {
             position: "absolute",
-            left: 10,
-            width: 15,
-            height: 15,
+            left: rem(theme, 10),
+            width: rem(theme, 15),
+            height: rem(theme, 15),
             opacity: 0.55,
             pointerEvents: "none"
           }
@@ -117,8 +120,8 @@ function CategoryPanelHead({
         sx: {
           display: "flex",
           alignItems: "center",
-          gap: "10px",
-          marginTop: "8px",
+          gap: sxRem(10),
+          marginTop: sxRem(8),
           fontSize: sxRem(12)
         },
         children: quickActions
@@ -155,4 +158,4 @@ export {
   CategoryPanelHead,
   CategoryPinnedTray
 };
-//# sourceMappingURL=chunk-EFV5QJNM.js.map
+//# sourceMappingURL=chunk-ORRI6FMN.js.map