@12-apps/ui 6.86.1 → 6.86.2

package/src/components/form/Calendar/CalendarDay.tsx

@@ -5,14 +5,20 @@ import React from 'react';
 
 import { rem, sxRem } from '../../../tokens/relative';
 
+import type { DayBand } from './Calendar.band';
+import { bandColor, endpointFill, endpointHoverFill } from './Calendar.band';
 import type { DayRenderArgs } from './Calendar.types';
 
 /**
- * A day cell's LARGEST edge, 40 design px through the theme's type scale. The
- * cell is a square that fills its grid column up to this size, so the month
- * shrinks with its container instead of holding a fixed 304px floor (FUT-3861).
+ * A column's width: the 304 design px a month asked for when its seven 40px
+ * cells sat 4px apart, shared by seven columns that now touch (FUT-4162). The
+ * cell fills its column up to this size, so the month shrinks with its
+ * container instead of holding a fixed 304px floor (FUT-3861).
  */
-const CELL_SIZE = sxRem(40);
+const COLUMN_SIZE = sxRem(304 / 7);
+
+/** 304/7 wide to 40 tall: the day's face is a 40 design px circle at full size. */
+const CELL_RATIO = '38 / 35';
 
 interface DayState extends DayRenderArgs {
   outside: boolean;
@@ -42,12 +48,24 @@ const dayClassNames = (state: DayState, custom?: string): string =>
 const isEndpoint = (day: DayRenderArgs): boolean =>
   day.selected || day.rangeStart || day.rangeEnd;
 
-const backgroundFor = (day: DayRenderArgs): string => {
-  if (isEndpoint(day)) return 'primary.main';
-  if (day.inRange || day.hovered) return 'primary.light';
-  return 'transparent';
+// The band's share of the cell (see `Calendar.band.ts`): all of it, or the
+// half that faces the rest of the range.
+const BAND_IMAGE: Record<Exclude<DayBand, 'none'>, (band: string) => string> = {
+  full: (band) => `linear-gradient(${band}, ${band})`,
+  after: (band) => `linear-gradient(to right, transparent 50%, ${band} 50%)`,
+  before: (band) => `linear-gradient(to left, transparent 50%, ${band} 50%)`,
+};
+
+// A gradient's `to right` is physical; a right-to-left grid starts a range on
+// its right, so the two halves trade places there.
+const inDirection = (band: Exclude<DayBand, 'none'>, theme: Theme): Exclude<DayBand, 'none'> => {
+  if (theme.direction !== 'rtl' || band === 'full') return band;
+  return band === 'after' ? 'before' : 'after';
 };
 
+const faceBackgroundFor = (day: DayRenderArgs): ((theme: Theme) => string) | string =>
+  isEndpoint(day) ? endpointFill : 'transparent';
+
 const colorFor = (day: DayRenderArgs, visible: boolean): string => {
   if (isEndpoint(day)) return 'primary.contrastText';
   if (day.disabled) return 'text.disabled';
@@ -57,35 +75,65 @@ const colorFor = (day: DayRenderArgs, visible: boolean): string => {
   return 'text.primary';
 };
 
-const hoverBackgroundFor = (day: DayRenderArgs): string | undefined => {
+const hoverBackgroundFor = (day: DayRenderArgs): ((theme: Theme) => string) | string | undefined => {
   if (day.disabled) return undefined;
-  return day.selected ? 'primary.dark' : 'action.hover';
+  return isEndpoint(day) ? endpointHoverFill : 'action.hover';
 };
 
-const dayCellSx = (day: DayRenderArgs, visible: boolean): SxProps<Theme> => ({
+// The band reaches the cell's edges so neighbouring days join; where a week
+// row ends, it rounds off instead of stopping square: half the cell each way
+// is a half-round cap on a cell as tall as it is wide.
+const BAND_RADIUS = '50%';
+
+/**
+ * One cell: the band, painted on the button across its whole column, and the
+ * day's round face, a `::before` circle behind the number. The face is a
+ * pseudo-element so the button's own content stays the bare day number a host's
+ * tests query (`getByText('27')` is the cell, as it always was).
+ */
+const dayCellSx = (day: DayRenderArgs, band: DayBand, visible: boolean): SxProps<Theme> => ({
+  position: 'relative',
+  isolation: 'isolate',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  // 40 is the size it ASKS for, so the month's intrinsic width stays 304 and a
-  // shrink-wrapping parent (the picker is inline-flex) still sizes to it; the
-  // column's `minmax(0, 1fr)` and this `maxWidth` let it give way below that.
-  width: CELL_SIZE,
+  // The column it ASKS for keeps the month's intrinsic width at 304 (FUT-3861),
+  // now that the seven columns carry no gap between them; `maxWidth` and the
+  // column's `minmax(0, 1fr)` let it give way below that, and the ratio keeps
+  // it 40 tall at full size and shrinking with it.
+  width: COLUMN_SIZE,
   maxWidth: '100%',
-  aspectRatio: '1 / 1',
-  justifySelf: 'center',
+  aspectRatio: CELL_RATIO,
+  justifySelf: 'stretch',
   boxSizing: 'border-box',
   padding: 0,
   border: 'none',
-  borderRadius: 1,
+  background: 'none',
+  backgroundImage: band === 'none' ? 'none' : (theme: Theme) => BAND_IMAGE[inDirection(band, theme)](bandColor(theme)),
   cursor: day.disabled ? 'not-allowed' : 'pointer',
-  backgroundColor: backgroundFor(day),
   color: colorFor(day, visible),
   opacity: !day.inCurrentMonth && visible ? 0.5 : 1,
-  fontWeight: day.today ? 'bold' : 'normal',
-  '&:hover': {
+  fontWeight: day.today || isEndpoint(day) ? 'bold' : 'normal',
+  '&:nth-of-type(7n + 1)': { borderStartStartRadius: BAND_RADIUS, borderEndStartRadius: BAND_RADIUS },
+  '&:nth-of-type(7n)': { borderStartEndRadius: BAND_RADIUS, borderEndEndRadius: BAND_RADIUS },
+  '&::before': {
+    content: '""',
+    position: 'absolute',
+    inset: 0,
+    margin: 'auto',
+    zIndex: -1,
+    // A circle as tall as the cell: 40 design px at full size (FUT-3861).
+    height: '100%',
+    aspectRatio: '1 / 1',
+    maxWidth: '100%',
+    borderRadius: '50%',
+    backgroundColor: faceBackgroundFor(day),
+  },
+  '&:hover::before': {
     backgroundColor: hoverBackgroundFor(day),
   },
-  '&:focus': {
+  '&:focus': { outline: 'none' },
+  '&:focus::before': {
     outline: (theme: Theme) => `${rem(theme, 2)} solid`,
     outlineColor: 'primary.main',
     outlineOffset: sxRem(1),
@@ -94,6 +142,7 @@ const dayCellSx = (day: DayRenderArgs, visible: boolean): SxProps<Theme> => ({
 
 export interface CalendarDayProps {
   day: DayRenderArgs;
+  band: DayBand;
   focused: boolean;
   showOutsideDays: boolean;
   dayClassName?: (args: DayRenderArgs) => string;
@@ -104,6 +153,7 @@ export interface CalendarDayProps {
 
 export const CalendarDay: FC<CalendarDayProps> = ({
   day,
+  band,
   focused,
   showOutsideDays,
   dayClassName,
@@ -127,7 +177,7 @@ export const CalendarDay: FC<CalendarDayProps> = ({
       onClick={() => onSelect(day.date)}
       onMouseEnter={() => onHover(day.date)}
       onMouseLeave={onHoverEnd}
-      sx={dayCellSx(day, visible)}
+      sx={dayCellSx(day, band, visible)}
     >
       {day.selected && (
         <Box component="span" data-testid="calendar-selected-date" sx={{ display: 'none' }} />

package/src/components/form/Calendar/CalendarDayCell.tsx

@@ -1,6 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
+import { bandFor } from './Calendar.band';
 import { isSameDay } from './Calendar.dates';
 import { buildDayArgs } from './Calendar.selection';
 import type { CalendarProps, DateRange, MonthMatrixDay, SelectionMode } from './Calendar.types';
@@ -41,6 +42,7 @@ export const CalendarDayCell: FC<DayCellContext & { day: MonthMatrixDay }> = ({
   return (
     <CalendarDay
       day={args}
+      band={bandFor({ args, ...context })}
       focused={isSameDay(args.date, focusedDate)}
       showOutsideDays={showOutsideDays}
       dayClassName={dayClassName}

package/src/components/form/Calendar/CalendarMonth.tsx

@@ -17,12 +17,22 @@ import { CalendarDayCell } from './CalendarDayCell';
 const SPACER_WIDTH = sxRem(32);
 
 // `minmax(0, 1fr)`, not `1fr`: a bare `1fr` keeps each column at least its
-// content's width, which is what held the grid at 304px (FUT-3861).
-const GRID_SX = { display: 'grid', gridTemplateColumns: 'repeat(7, minmax(0, 1fr))', gap: 0.5 } as const;
+// content's width, which is what held the grid at 304px (FUT-3861). No column
+// gap: a selected range is one band across the days, and a gap cut it into
+// tiles (FUT-4162). Rows keep theirs. Items centre in their column: the built-in
+// day stretches across it, a host's `renderDay` cell sits in its middle.
+const GRID_SX = {
+  display: 'grid',
+  justifyItems: 'center',
+  gridTemplateColumns: 'repeat(7, minmax(0, 1fr))',
+  columnGap: 0,
+  rowGap: 0.5,
+} as const;
 
 /**
- * A month takes the room it is given, from nothing up to seven full cells and
- * their gaps (7 × 40 + 6 × 4 design px). Months side by side keep a 280 basis,
+ * A month takes the room it is given, from nothing up to seven full columns
+ * (304 design px: what 7 × 40 cells and 6 × 4 gaps came to before the gaps
+ * went, FUT-4162). Months side by side keep a 280 basis,
  * so a multi-month calendar still wraps rather than squeezing every month.
  */
 export const MONTH_SX = { flex: `1 1 ${sxRem(280)}`, minWidth: 0, maxWidth: sxRem(304) } as const;

package/src/components/navigation/CommandPalette/CommandPalette.md

@@ -88,6 +88,7 @@ function App() {
 | `showRecent`       | `boolean`                    | `false`               | Whether to show recent commands section                       |
 | `recentCommands`   | `string[]`                   | -                     | Array of recent command IDs                                   |
 | `onCommandExecute` | `(command: Command) => void` | -                     | Callback fired when a command is executed                     |
+| `copy`             | `CommandPaletteCopy`         | -                     | **Required.** The palette's words (`PT_BR_COMMAND_PALETTE_COPY`, `EN_US_COMMAND_PALETTE_COPY`). `closeSearch` names the search row's ✕ for a screen reader; a pack without it falls back to "Close search" |
 
 ### Command Interface
 

package/src/components/navigation/CommandPalette/CommandPalette.tsx

@@ -80,9 +80,10 @@ const PaletteSearch: React.FC<{
   placeholder?: string;
   value: string;
   dataTestId?: string;
+  closeLabel: string;
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
   onClose: () => void;
-}> = ({ inputRef, placeholder, value, dataTestId, onChange, onClose }) => (
+}> = ({ inputRef, placeholder, value, dataTestId, closeLabel, onChange, onClose }) => (
   <SearchContainer>
     <SearchIcon sx={{ color: 'text.secondary', mr: 1 }} />
     <SearchInput
@@ -96,7 +97,7 @@ const PaletteSearch: React.FC<{
       spellCheck="false"
       inputProps={{ 'data-testid': `${dataTestId}-input` }}
     />
-    <IconButton size="small" onClick={onClose} sx={{ ml: 1 }}>
+    <IconButton size="small" onClick={onClose} aria-label={closeLabel} sx={{ ml: 1 }}>
       <CloseIcon fontSize="small" />
     </IconButton>
   </SearchContainer>
@@ -190,6 +191,7 @@ export const CommandPalette: FC<CommandPaletteProps> = ({
             placeholder={placeholder ?? text.placeholder}
             value={searchQuery}
             dataTestId={dataTestId}
+            closeLabel={text.closeSearch}
             onChange={handleSearchChange}
             onClose={onClose}
           />

package/src/copy/navigation.ts

@@ -28,6 +28,8 @@ export interface CommandPaletteCopy {
   noCommandsFound?: (query: string) => string;
   /** The group header of a command that names no `category`. */
   general?: string;
+  /** The search row's ✕, as a screen reader names it (FUT-4162). */
+  closeSearch?: string;
 }
 
 /**

package/src/en-US.navigation.ts

@@ -20,6 +20,7 @@ export const EN_US_COMMAND_PALETTE_COPY: Required<CommandPaletteCopy> = {
   commandCount: (count) => `${count} commands`,
   noCommandsFound: (query) => `No commands found for "${query}"`,
   general: "General",
+  closeSearch: "Close search",
 };
 
 export const EN_US_BREADCRUMB_COPY: BreadcrumbCopy = {

package/src/pt-BR.navigation.ts

@@ -18,6 +18,7 @@ export const PT_BR_COMMAND_PALETTE_COPY: Required<CommandPaletteCopy> = {
   commandCount: (count) => (count === 1 ? "1 comando" : `${count} comandos`),
   noCommandsFound: (query) => `Nenhum comando encontrado para "${query}"`,
   general: "Geral",
+  closeSearch: "Fechar busca",
 };
 
 export const PT_BR_BREADCRUMB_COPY: BreadcrumbCopy = {

package/dist/chunk-56GWNA5V.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/AddressAutocomplete/AddressAutocompleteField.tsx"],"sourcesContent":["import { EN_US_ADDRESS_AUTOCOMPLETE_COPY } from '../../../en-US.form';\nimport { resolveLabels } from '../../../utils/resolve-labels';\nimport Alert from '@mui/material/Alert/index.js';\nimport Autocomplete from '@mui/material/Autocomplete/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport {\n  addressOptionLabel,\n  isSameAddressOption,\n  MIN_QUERY_LENGTH,\n  type ResolvedAddressProps,\n} from './AddressAutocomplete.helpers';\nimport type { AddressAutocompleteState } from './AddressAutocomplete.hooks';\nimport { AddressInputField } from './AddressInputField';\nimport { AddressOption } from './AddressOption';\nimport { AddressSuggestionsPaper } from './AddressSuggestionsPaper';\n\nexport type AddressAutocompleteFieldProps = ResolvedAddressProps & AddressAutocompleteState;\n\n// The live field, rendered once Google Maps (or the mock stand-in) is ready.\nexport const AddressAutocompleteField: FC<AddressAutocompleteFieldProps> = ({\n  copy,\n  variant,\n  label,\n  placeholder,\n  icon,\n  floating,\n  error,\n  helperText,\n  disabled,\n  required,\n  fullWidth,\n  getCurrentLocation,\n  inputValue,\n  options,\n  loading,\n  apiError,\n  handleInputChange,\n  handleSelect,\n  handleGetCurrentLocation,\n}) => {\n  const text = resolveLabels(EN_US_ADDRESS_AUTOCOMPLETE_COPY, copy);\n  return (\n  <Box data-testid=\"address-autocomplete-container\">\n    <Autocomplete\n      freeSolo\n      options={options}\n      inputValue={inputValue}\n      onInputChange={handleInputChange}\n      onChange={handleSelect}\n      loading={loading}\n      loadingText={text.loadingSuggestions}\n      disabled={disabled}\n      fullWidth={fullWidth}\n      getOptionLabel={addressOptionLabel}\n      isOptionEqualToValue={isSameAddressOption}\n      PaperComponent={AddressSuggestionsPaper}\n      noOptionsText={\n        inputValue.length <= MIN_QUERY_LENGTH ? text.typeToSearch : text.noAddressesFound\n      }\n      renderOption={({ key, ...optionProps }, option, state) => (\n        <AddressOption\n          key={key}\n          optionProps={optionProps}\n          option={option}\n          index={state.index}\n        />\n      )}\n      renderInput={(params) => (\n        <AddressInputField\n          copy={copy}\n          params={params}\n          addressVariant={variant}\n          label={floating ? undefined : label}\n          placeholder={placeholder}\n          icon={icon}\n          error={error || !!apiError}\n          helperText={apiError || helperText}\n          required={required}\n          disabled={disabled}\n          loading={loading}\n          showCurrentLocation={getCurrentLocation && !loading}\n          onGetCurrentLocation={handleGetCurrentLocation}\n        />\n      )}\n    />\n    {apiError && (\n      <Alert severity=\"warning\" sx={{ mt: 1 }}>\n        {apiError}\n      </Alert>\n    )}\n  </Box>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAEA,OAAO,WAAW;AAClB,OAAO,kBAAkB;AACzB,OAAO,SAAS;AAyCd,SAkBM,KAlBN;AAvBK,IAAM,2BAA8D,CAAC;AAAA,EAC1E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,OAAO,cAAc,iCAAiC,IAAI;AAChE,SACA,qBAAC,OAAI,eAAY,kCACf;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,UAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf,UAAU;AAAA,QACV;AAAA,QACA,aAAa,KAAK;AAAA,QAClB;AAAA,QACA;AAAA,QACA,gBAAgB;AAAA,QAChB,sBAAsB;AAAA,QACtB,gBAAgB;AAAA,QAChB,eACE,WAAW,UAAU,mBAAmB,KAAK,eAAe,KAAK;AAAA,QAEnE,cAAc,CAAC,EAAE,KAAK,GAAG,YAAY,GAAG,QAAQ,UAC9C;AAAA,UAAC;AAAA;AAAA,YAEC;AAAA,YACA;AAAA,YACA,OAAO,MAAM;AAAA;AAAA,UAHR;AAAA,QAIP;AAAA,QAEF,aAAa,CAAC,WACZ;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,gBAAgB;AAAA,YAChB,OAAO,WAAW,SAAY;AAAA,YAC9B;AAAA,YACA;AAAA,YACA,OAAO,SAAS,CAAC,CAAC;AAAA,YAClB,YAAY,YAAY;AAAA,YACxB;AAAA,YACA;AAAA,YACA;AAAA,YACA,qBAAqB,sBAAsB,CAAC;AAAA,YAC5C,sBAAsB;AAAA;AAAA,QACxB;AAAA;AAAA,IAEJ;AAAA,IACC,YACC,oBAAC,SAAM,UAAS,WAAU,IAAI,EAAE,IAAI,EAAE,GACnC,oBACH;AAAA,KAEJ;AAEF;","names":[]}

package/dist/chunk-C5RQBTRZ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/AddressAutocomplete/AddressSuggestionsPaper.tsx"],"sourcesContent":["import type { PaperProps } from '@mui/material/Paper/index.js';\nimport Paper from '@mui/material/Paper/index.js';\nimport { alpha, useTheme } from '@mui/material/styles/index.js';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { rem } from '../../../tokens/relative';\n\n// The dropdown surface, frosted to match the glass field.\nexport const AddressSuggestionsPaper: FC<PaperProps> = (props) => {\n  const theme = useTheme();\n\n  return (\n    <Paper\n      {...props}\n      elevation={8}\n      data-testid=\"address-suggestions-dropdown\"\n      sx={{\n        mt: 1,\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      }}\n    />\n  );\n};\n"],"mappings":";;;;;AACA,OAAO,WAAW;AAClB,SAAS,OAAO,gBAAgB;AAW5B;AAJG,IAAM,0BAA0C,CAAC,UAAU;AAChE,QAAM,QAAQ,SAAS;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,MACX,eAAY;AAAA,MACZ,IAAI;AAAA,QACF,IAAI;AAAA,QACJ,YAAY,2BAA2B,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI,CAAC,QAAQ,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI,CAAC;AAAA,QACrI,gBAAgB,QAAQ,IAAI,OAAO,EAAE,CAAC;AAAA,QACtC,sBAAsB,QAAQ,IAAI,OAAO,EAAE,CAAC;AAAA,QAC5C,QAAQ,aAAa,MAAM,MAAM,QAAQ,SAAS,IAAI,CAAC;AAAA,MACzD;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/chunk-D72GD4XC.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/Calendar/CalendarDayCell.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport React from 'react';\n\nimport { isSameDay } from './Calendar.dates';\nimport { buildDayArgs } from './Calendar.selection';\nimport type { CalendarProps, DateRange, MonthMatrixDay, SelectionMode } from './Calendar.types';\nimport { CalendarDay } from './CalendarDay';\n\n// Everything a cell needs that is the same for every cell in the calendar.\nexport interface DayCellContext {\n  selectionMode: SelectionMode;\n  value: Date | null;\n  range: DateRange;\n  hoveredDate: Date | null;\n  focusedDate: Date;\n  today: Date;\n  showOutsideDays: boolean;\n  isDisabled: (date: Date) => boolean;\n  renderDay?: CalendarProps['renderDay'];\n  dayClassName?: CalendarProps['dayClassName'];\n  onSelect: (date: Date) => void;\n  onHover: (date: Date) => void;\n  onHoverEnd: () => void;\n}\n\nexport const CalendarDayCell: FC<DayCellContext & { day: MonthMatrixDay }> = ({\n  day,\n  focusedDate,\n  showOutsideDays,\n  renderDay,\n  dayClassName,\n  onSelect,\n  onHover,\n  onHoverEnd,\n  ...context\n}) => {\n  const args = buildDayArgs({ day, ...context });\n\n  if (renderDay) return <>{renderDay(args)}</>;\n\n  return (\n    <CalendarDay\n      day={args}\n      focused={isSameDay(args.date, focusedDate)}\n      showOutsideDays={showOutsideDays}\n      dayClassName={dayClassName}\n      onSelect={onSelect}\n      onHover={onHover}\n      onHoverEnd={onHoverEnd}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;AAsCwB;AAbjB,IAAM,kBAAgE,CAAC;AAAA,EAC5E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,OAAO,aAAa,EAAE,KAAK,GAAG,QAAQ,CAAC;AAE7C,MAAI,UAAW,QAAO,gCAAG,oBAAU,IAAI,GAAE;AAEzC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,SAAS,UAAU,KAAK,MAAM,WAAW;AAAA,MACzC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/chunk-G76PIGF7.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/pt-BR.navigation.ts"],"sourcesContent":["/**\n * The pt-BR pack for the navigation family. Split out of `pt-BR.ts`, which is a\n * barrel over this folder — see that file for why.\n */\nimport type {\n  BreadcrumbCopy,\n  CommandPaletteCopy,\n  SectionNavCopy,\n} from './copy';\n\nexport const PT_BR_COMMAND_PALETTE_COPY: Required<CommandPaletteCopy> = {\n  execute: \"Executar\",\n  navigate: \"↑↓ Navegar\",\n  close: \"ESC Fechar\",\n  recent: \"Recentes\",\n  tryAnotherTerm: \"Tente outro termo\",\n  placeholder: \"Digite um comando ou pesquise...\",\n  commandCount: (count) => (count === 1 ? \"1 comando\" : `${count} comandos`),\n  noCommandsFound: (query) => `Nenhum comando encontrado para \"${query}\"`,\n  general: \"Geral\",\n};\n\nexport const PT_BR_BREADCRUMB_COPY: BreadcrumbCopy = {\n  showMore: \"Mostrar mais\",\n  moreItems: \"Mais itens\",\n};\n\nexport const PT_BR_SECTION_NAV_COPY: SectionNavCopy = {\n  close: \"Fechar\",\n  badge: (count) => (count === 1 ? \"1 pendente\" : `${count} pendentes`),\n  attention: \"Precisa de atenção\",\n};\n"],"mappings":";AAUO,IAAM,6BAA2D;AAAA,EACtE,SAAS;AAAA,EACT,UAAU;AAAA,EACV,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,cAAc,CAAC,UAAW,UAAU,IAAI,cAAc,GAAG,KAAK;AAAA,EAC9D,iBAAiB,CAAC,UAAU,mCAAmC,KAAK;AAAA,EACpE,SAAS;AACX;AAEO,IAAM,wBAAwC;AAAA,EACnD,UAAU;AAAA,EACV,WAAW;AACb;AAEO,IAAM,yBAAyC;AAAA,EACpD,OAAO;AAAA,EACP,OAAO,CAAC,UAAW,UAAU,IAAI,eAAe,GAAG,KAAK;AAAA,EACxD,WAAW;AACb;","names":[]}

package/dist/chunk-HKGKQKQT.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/Calendar/CalendarDay.tsx"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material/styles/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { rem, sxRem } from '../../../tokens/relative';\n\nimport type { DayRenderArgs } from './Calendar.types';\n\n/**\n * A day cell's LARGEST edge, 40 design px through the theme's type scale. The\n * cell is a square that fills its grid column up to this size, so the month\n * shrinks with its container instead of holding a fixed 304px floor (FUT-3861).\n */\nconst CELL_SIZE = sxRem(40);\n\ninterface DayState extends DayRenderArgs {\n  outside: boolean;\n  focused: boolean;\n}\n\n// Order matters: these land on the element in the order listed.\nconst CLASS_FLAGS: Array<[keyof DayState, string]> = [\n  ['selected', 'selected'],\n  ['inRange', 'in-range'],\n  ['rangeStart', 'range-start'],\n  ['rangeEnd', 'range-end'],\n  ['disabled', 'disabled'],\n  ['today', 'today'],\n  ['outside', 'outside'],\n  ['hovered', 'hovered'],\n  ['focused', 'focused'],\n];\n\nconst dayClassNames = (state: DayState, custom?: string): string =>\n  [\n    'calendar-day',\n    ...CLASS_FLAGS.filter(([flag]) => state[flag]).map(([, name]) => name),\n    ...(custom ? [custom] : []),\n  ].join(' ');\n\nconst isEndpoint = (day: DayRenderArgs): boolean =>\n  day.selected || day.rangeStart || day.rangeEnd;\n\nconst backgroundFor = (day: DayRenderArgs): string => {\n  if (isEndpoint(day)) return 'primary.main';\n  if (day.inRange || day.hovered) return 'primary.light';\n  return 'transparent';\n};\n\nconst colorFor = (day: DayRenderArgs, visible: boolean): string => {\n  if (isEndpoint(day)) return 'primary.contrastText';\n  if (day.disabled) return 'text.disabled';\n  // Outside days that are switched off still occupy the grid, they just have\n  // nothing to show.\n  if (!visible) return 'transparent';\n  return 'text.primary';\n};\n\nconst hoverBackgroundFor = (day: DayRenderArgs): string | undefined => {\n  if (day.disabled) return undefined;\n  return day.selected ? 'primary.dark' : 'action.hover';\n};\n\nconst dayCellSx = (day: DayRenderArgs, visible: boolean): SxProps<Theme> => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  // 40 is the size it ASKS for, so the month's intrinsic width stays 304 and a\n  // shrink-wrapping parent (the picker is inline-flex) still sizes to it; the\n  // column's `minmax(0, 1fr)` and this `maxWidth` let it give way below that.\n  width: CELL_SIZE,\n  maxWidth: '100%',\n  aspectRatio: '1 / 1',\n  justifySelf: 'center',\n  boxSizing: 'border-box',\n  padding: 0,\n  border: 'none',\n  borderRadius: 1,\n  cursor: day.disabled ? 'not-allowed' : 'pointer',\n  backgroundColor: backgroundFor(day),\n  color: colorFor(day, visible),\n  opacity: !day.inCurrentMonth && visible ? 0.5 : 1,\n  fontWeight: day.today ? 'bold' : 'normal',\n  '&:hover': {\n    backgroundColor: hoverBackgroundFor(day),\n  },\n  '&:focus': {\n    outline: (theme: Theme) => `${rem(theme, 2)} solid`,\n    outlineColor: 'primary.main',\n    outlineOffset: sxRem(1),\n  },\n});\n\nexport interface CalendarDayProps {\n  day: DayRenderArgs;\n  focused: boolean;\n  showOutsideDays: boolean;\n  dayClassName?: (args: DayRenderArgs) => string;\n  onSelect: (date: Date) => void;\n  onHover: (date: Date) => void;\n  onHoverEnd: () => void;\n}\n\nexport const CalendarDay: FC<CalendarDayProps> = ({\n  day,\n  focused,\n  showOutsideDays,\n  dayClassName,\n  onSelect,\n  onHover,\n  onHoverEnd,\n}) => {\n  const visible = day.inCurrentMonth || showOutsideDays;\n  const state: DayState = { ...day, outside: !day.inCurrentMonth, focused };\n\n  return (\n    <Box\n      component=\"button\"\n      role=\"gridcell\"\n      tabIndex={focused ? 0 : -1}\n      aria-selected={day.selected}\n      aria-disabled={day.disabled}\n      aria-current={day.today ? 'date' : undefined}\n      className={dayClassNames(state, dayClassName?.(day))}\n      data-testid={`calendar-date-${day.date.getDate()}`}\n      onClick={() => onSelect(day.date)}\n      onMouseEnter={() => onHover(day.date)}\n      onMouseLeave={onHoverEnd}\n      sx={dayCellSx(day, visible)}\n    >\n      {day.selected && (\n        <Box component=\"span\" data-testid=\"calendar-selected-date\" sx={{ display: 'none' }} />\n      )}\n      {day.today && (\n        <Box component=\"span\" data-testid=\"calendar-today\" sx={{ display: 'none' }} />\n      )}\n      {visible ? day.date.getDate() : ''}\n    </Box>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-POUNFTG3.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/Calendar/CalendarMonth.tsx"],"sourcesContent":["import ChevronLeft from '@mui/icons-material/ChevronLeft';\nimport ChevronRight from '@mui/icons-material/ChevronRight';\nimport Box from '@mui/material/Box/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { sxRem } from '../../../tokens/relative';\n\nimport { getMonthName } from './Calendar.dates';\nimport type { CalendarProps, MonthMatrix } from './Calendar.types';\nimport type { DayCellContext } from './CalendarDayCell';\nimport { CalendarDayCell } from './CalendarDayCell';\n\n/** The nav spacer's width and the weekday row's height, 32 design px through the type scale. */\nconst SPACER_WIDTH = sxRem(32);\n\n// `minmax(0, 1fr)`, not `1fr`: a bare `1fr` keeps each column at least its\n// content's width, which is what held the grid at 304px (FUT-3861).\nconst GRID_SX = { display: 'grid', gridTemplateColumns: 'repeat(7, minmax(0, 1fr))', gap: 0.5 } as const;\n\n/**\n * A month takes the room it is given, from nothing up to seven full cells and\n * their gaps (7 × 40 + 6 × 4 design px). Months side by side keep a 280 basis,\n * so a multi-month calendar still wraps rather than squeezing every month.\n */\nexport const MONTH_SX = { flex: `1 1 ${sxRem(280)}`, minWidth: 0, maxWidth: sxRem(304) } as const;\n\n// Only the outermost months carry arrows; the ones between get a spacer so their\n// titles stay centred.\nconst MonthNavHeader: FC<{\n  title: React.ReactNode;\n  showPrevious: boolean;\n  showNext: boolean;\n  onPreviousMonth: () => void;\n  onNextMonth: () => void;\n}> = ({ title, showPrevious, showNext, onPreviousMonth, onNextMonth }) => (\n  <Box\n    sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}\n    data-testid=\"calendar-header\"\n  >\n    {showPrevious && (\n      <IconButton onClick={onPreviousMonth} size=\"small\" data-testid=\"calendar-prev-month\">\n        <ChevronLeft />\n      </IconButton>\n    )}\n\n    <Typography\n      variant=\"h6\"\n      component=\"h2\"\n      sx={{ fontWeight: 'bold', flex: 1, textAlign: 'center' }}\n    >\n      {title}\n    </Typography>\n\n    {showNext && (\n      <IconButton onClick={onNextMonth} size=\"small\" data-testid=\"calendar-next-month\">\n        <ChevronRight />\n      </IconButton>\n    )}\n\n    {!showPrevious && !showNext && <Box sx={{ width: SPACER_WIDTH }} />}\n  </Box>\n);\n\nconst WeekdayHeader: FC<{ weekdayNames: string[] }> = ({ weekdayNames }) => (\n  <Box sx={{ ...GRID_SX, mb: 1 }}>\n    {weekdayNames.map((weekday, index) => (\n      <Box\n        // Narrow weekday names repeat within a week ('S', 'T'), so position is\n        // the only stable key here.\n        key={`weekday-${index}`}\n        role=\"columnheader\"\n        data-testid={`calendar-weekday-${index}`}\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          height: SPACER_WIDTH,\n          fontSize: sxRem(14),\n          fontWeight: 'bold',\n          color: 'text.secondary',\n        }}\n      >\n        {weekday}\n      </Box>\n    ))}\n  </Box>\n);\n\n/** The weekday row and the day grid under a month's caption. */\nexport const MonthDays: FC<{\n  matrix: MonthMatrix;\n  monthIndex: number;\n  weekdayNames: string[];\n  dayContext: DayCellContext;\n}> = ({ matrix, monthIndex, weekdayNames, dayContext }) => (\n  <>\n    <WeekdayHeader weekdayNames={weekdayNames} />\n\n    <Box\n      role=\"grid\"\n      aria-labelledby={`month-${monthIndex}`}\n      data-testid=\"calendar-grid\"\n      sx={GRID_SX}\n    >\n      {matrix.weeks.flat().map((day) => (\n        <CalendarDayCell key={day.key} day={day} {...dayContext} />\n      ))}\n    </Box>\n  </>\n);\n\nexport interface CalendarMonthProps {\n  matrix: MonthMatrix;\n  monthIndex: number;\n  monthsToShow: number;\n  locale: string;\n  weekdayNames: string[];\n  renderHeader?: CalendarProps['renderHeader'];\n  onPreviousMonth: () => void;\n  onNextMonth: () => void;\n  dayContext: DayCellContext;\n}\n\nexport const CalendarMonth: FC<CalendarMonthProps> = ({\n  matrix,\n  monthIndex,\n  monthsToShow,\n  locale,\n  weekdayNames,\n  renderHeader,\n  onPreviousMonth,\n  onNextMonth,\n  dayContext,\n}) => {\n  const monthName = getMonthName(matrix.month, matrix.year, locale);\n  const title = renderHeader ? renderHeader({ month: matrix.month, year: matrix.year }) : monthName;\n\n  return (\n    /* The month is addressable by its position, because in a multi-month\n       calendar every day number appears once PER MONTH — `calendar-date-5` is\n       January's 5th and February's. Without a per-month hook a test can only\n       reach a day positionally, which is exactly what the flakiness gate\n       refuses. Additive: `calendar-grid` below is unchanged. */\n    <Box sx={MONTH_SX} data-testid={`calendar-month-${monthIndex}`}>\n      <MonthNavHeader\n        title={title}\n        showPrevious={monthIndex === 0}\n        showNext={monthIndex === monthsToShow - 1}\n        onPreviousMonth={onPreviousMonth}\n        onNextMonth={onNextMonth}\n      />\n\n      <MonthDays\n        matrix={matrix}\n        monthIndex={monthIndex}\n        weekdayNames={weekdayNames}\n        dayContext={dayContext}\n      />\n    </Box>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA,OAAO,iBAAiB;AACxB,OAAO,kBAAkB;AACzB,OAAO,SAAS;AAChB,OAAO,gBAAgB;AACvB,OAAO,gBAAgB;AAkCrB,SA4DA,UAtDM,KANN;AAtBF,IAAM,eAAe,MAAM,EAAE;AAI7B,IAAM,UAAU,EAAE,SAAS,QAAQ,qBAAqB,6BAA6B,KAAK,IAAI;AAOvF,IAAM,WAAW,EAAE,MAAM,OAAO,MAAM,GAAG,CAAC,IAAI,UAAU,GAAG,UAAU,MAAM,GAAG,EAAE;AAIvF,IAAM,iBAMD,CAAC,EAAE,OAAO,cAAc,UAAU,iBAAiB,YAAY,MAClE;AAAA,EAAC;AAAA;AAAA,IACC,IAAI,EAAE,SAAS,QAAQ,YAAY,UAAU,gBAAgB,iBAAiB,IAAI,EAAE;AAAA,IACpF,eAAY;AAAA,IAEX;AAAA,sBACC,oBAAC,cAAW,SAAS,iBAAiB,MAAK,SAAQ,eAAY,uBAC7D,8BAAC,eAAY,GACf;AAAA,MAGF;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,WAAU;AAAA,UACV,IAAI,EAAE,YAAY,QAAQ,MAAM,GAAG,WAAW,SAAS;AAAA,UAEtD;AAAA;AAAA,MACH;AAAA,MAEC,YACC,oBAAC,cAAW,SAAS,aAAa,MAAK,SAAQ,eAAY,uBACzD,8BAAC,gBAAa,GAChB;AAAA,MAGD,CAAC,gBAAgB,CAAC,YAAY,oBAAC,OAAI,IAAI,EAAE,OAAO,aAAa,GAAG;AAAA;AAAA;AACnE;AAGF,IAAM,gBAAgD,CAAC,EAAE,aAAa,MACpE,oBAAC,OAAI,IAAI,EAAE,GAAG,SAAS,IAAI,EAAE,GAC1B,uBAAa,IAAI,CAAC,SAAS,UAC1B;AAAA,EAAC;AAAA;AAAA,IAIC,MAAK;AAAA,IACL,eAAa,oBAAoB,KAAK;AAAA,IACtC,IAAI;AAAA,MACF,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,QAAQ;AAAA,MACR,UAAU,MAAM,EAAE;AAAA,MAClB,YAAY;AAAA,MACZ,OAAO;AAAA,IACT;AAAA,IAEC;AAAA;AAAA,EAbI,WAAW,KAAK;AAcvB,CACD,GACH;AAIK,IAAM,YAKR,CAAC,EAAE,QAAQ,YAAY,cAAc,WAAW,MACnD,iCACE;AAAA,sBAAC,iBAAc,cAA4B;AAAA,EAE3C;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,mBAAiB,SAAS,UAAU;AAAA,MACpC,eAAY;AAAA,MACZ,IAAI;AAAA,MAEH,iBAAO,MAAM,KAAK,EAAE,IAAI,CAAC,QACxB,oBAAC,mBAA8B,KAAW,GAAG,cAAvB,IAAI,GAA+B,CAC1D;AAAA;AAAA,EACH;AAAA,GACF;AAeK,IAAM,gBAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,YAAY,aAAa,OAAO,OAAO,OAAO,MAAM,MAAM;AAChE,QAAM,QAAQ,eAAe,aAAa,EAAE,OAAO,OAAO,OAAO,MAAM,OAAO,KAAK,CAAC,IAAI;AAExF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAME,qBAAC,OAAI,IAAI,UAAU,eAAa,kBAAkB,UAAU,IAC1D;AAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,cAAc,eAAe;AAAA,UAC7B,UAAU,eAAe,eAAe;AAAA,UACxC;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA,OACF;AAAA;AAEJ;","names":[]}

package/dist/chunk-Z445LLFN.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/navigation/CommandPalette/CommandPalette.tsx"],"sourcesContent":["import { EN_US_COMMAND_PALETTE_COPY } from '../../../en-US.navigation';\nimport { resolveLabels } from '../../../utils/resolve-labels';\nimport CloseIcon from '@mui/icons-material/Close';\nimport EnterIcon from '@mui/icons-material/KeyboardReturn';\nimport SearchIcon from '@mui/icons-material/Search';\nimport Box from '@mui/material/Box/index.js';\nimport Dialog from '@mui/material/Dialog/index.js';\nimport DialogContent from '@mui/material/DialogContent/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport InputBase from '@mui/material/InputBase/index.js';\nimport Paper from '@mui/material/Paper/index.js';\nimport Slide from '@mui/material/Slide/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, styled, useTheme } from '@mui/material/styles/index.js';\nimport type { TransitionProps } from '@mui/material/transitions/index.js';\nimport type { FC} from 'react';\nimport React, {  } from 'react';\n\nimport { useCommandPalette } from './CommandPalette.hooks';\nimport { PaletteResults } from './CommandPaletteResults';\nimport { ShortcutChip } from './ShortcutChip';\nimport type { CommandPaletteProps } from './CommandPalette.types';\nimport type { CommandPaletteCopy } from '../../../copy';\nimport { scrim } from '../../../tokens/ink';\nimport { rem, sxRem } from '../../../tokens/relative';\n\n// Styled components\nconst StyledDialog = styled(Dialog)(({ theme }) => ({\n  '& .MuiBackdrop-root': {\n    backgroundColor: scrim(theme, 0.6),\n    backdropFilter: `blur(${rem(theme, 4)})` },\n  '& .MuiDialog-paper': {\n    position: 'fixed',\n    top: '20%',\n    margin: 0,\n    maxHeight: 'none',\n    background: 'transparent',\n    boxShadow: 'none',\n    overflow: 'visible' } }));\n\nconst PaletteContainer = styled(Paper)(({ theme }) => ({\n  width: '100%',\n  // 640 is the desktop width (FUT-3347); below it the palette takes the dialog's\n  // own width, which already keeps MUI's 32px gutters, so a phone sees it whole.\n  maxWidth: `min(${rem(theme, 640)}, 100%)`,\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  borderRadius: theme.shape.borderRadius * 2,\n  overflow: 'hidden',\n  boxShadow: theme.shadows[24] }));\n\nconst SearchContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  padding: theme.spacing(2),\n  borderBottom: `1px solid ${alpha(theme.palette.divider, 0.12)}`,\n  background: alpha(theme.palette.background.default, 0.4) }));\n\nconst SearchInput = styled(InputBase)(({ theme }) => ({\n  flex: 1,\n  fontSize: rem(theme, 18),\n  fontWeight: 400,\n  '& input': {\n    padding: theme.spacing(0, 1),\n    '&::placeholder': {\n      color: theme.palette.text.secondary,\n      opacity: 0.8 } } }));\n\nconst Transition = React.forwardRef<unknown, TransitionProps & { children: React.ReactElement }>(\n  function Transition(props, ref) {\n    return <Slide direction=\"down\" ref={ref} {...props} />;\n  },\n);\n\n// Main component\nconst PaletteSearch: React.FC<{\n  inputRef: React.Ref<HTMLInputElement>;\n  placeholder?: string;\n  value: string;\n  dataTestId?: string;\n  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  onClose: () => void;\n}> = ({ inputRef, placeholder, value, dataTestId, onChange, onClose }) => (\n  <SearchContainer>\n    <SearchIcon sx={{ color: 'text.secondary', mr: 1 }} />\n    <SearchInput\n      ref={inputRef}\n      placeholder={placeholder}\n      value={value}\n      onChange={onChange}\n      autoComplete=\"off\"\n      autoCorrect=\"off\"\n      autoCapitalize=\"off\"\n      spellCheck=\"false\"\n      inputProps={{ 'data-testid': `${dataTestId}-input` }}\n    />\n    <IconButton size=\"small\" onClick={onClose} sx={{ ml: 1 }}>\n      <CloseIcon fontSize=\"small\" />\n    </IconButton>\n  </SearchContainer>\n);\n\nconst PaletteFooter: React.FC<{ commandCount: number; copy: CommandPaletteCopy }> = ({\n  commandCount,\n  copy,\n}) => {\n  const theme = useTheme();\n  const text = resolveLabels(EN_US_COMMAND_PALETTE_COPY, copy);\n\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        // Wraps the count under the hints on a phone; one row on desktop.\n        flexWrap: 'wrap',\n        gap: 1,\n        justifyContent: 'space-between',\n        alignItems: 'center',\n        padding: 1,\n        borderTop: `1px solid ${alpha(theme.palette.divider, 0.12)}`,\n        background: alpha(theme.palette.background.default, 0.4) }}\n    >\n      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>\n        <ShortcutChip\n          icon={<EnterIcon sx={{ fontSize: sxRem(12) }} />}\n          label={copy.execute}\n          size=\"small\"\n        />\n        <ShortcutChip label={copy.navigate} size=\"small\" />\n        <ShortcutChip label={copy.close} size=\"small\" />\n      </Box>\n      <Typography variant=\"caption\" color=\"text.secondary\">\n        {text.commandCount(commandCount)}\n      </Typography>\n    </Box>\n  );\n};\n\nexport const CommandPalette: FC<CommandPaletteProps> = ({\n  copy,\n  open,\n  onClose,\n  commands,\n  placeholder,\n  width,\n  maxHeight,\n  showRecent = true,\n  recentCommands = [],\n  onCommandExecute,\n  dataTestId = 'command-palette' }) => {\n  const text = resolveLabels(EN_US_COMMAND_PALETTE_COPY, copy);\n  const {\n    searchQuery,\n    setSearchQuery,\n    selectedIndex,\n    setSelectedIndex,\n    searchInputRef,\n    listRef,\n    filteredCommands,\n    groupedCommands,\n    executeCommand,\n    recentCommandIds } = useCommandPalette({\n    open,\n    commands,\n    showRecent,\n    recentCommands,\n    onCommandExecute,\n    onClose,\n    generalLabel: text.general });\n\n  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setSearchQuery(event.target.value);\n  };\n\n  return (\n    <StyledDialog\n      open={open}\n      onClose={onClose}\n      TransitionComponent={Transition}\n      maxWidth={false}\n      fullWidth\n      data-testid={dataTestId}\n    >\n      <DialogContent sx={{ overflow: 'visible', p: 0 }}>\n        <PaletteContainer elevation={24} sx={{ width: width ?? sxRem(640), maxHeight: maxHeight ?? sxRem(400) }}>\n          <PaletteSearch\n            inputRef={searchInputRef}\n            placeholder={placeholder ?? text.placeholder}\n            value={searchQuery}\n            dataTestId={dataTestId}\n            onChange={handleSearchChange}\n            onClose={onClose}\n          />\n\n          <PaletteResults\n          copy={copy}\n            listRef={listRef}\n            dataTestId={dataTestId}\n            searchQuery={searchQuery}\n            showRecent={showRecent}\n            commands={commands}\n            recentCommandIds={recentCommandIds}\n            filteredCommands={filteredCommands}\n            groupedCommands={groupedCommands}\n            selectedIndex={selectedIndex}\n            onSelect={setSelectedIndex}\n            onExecute={executeCommand}\n          />\n\n          <PaletteFooter copy={copy} commandCount={filteredCommands.length} />\n        </PaletteContainer>\n      </DialogContent>\n    </StyledDialog>\n  );\n};\n\n// Export default\nexport default CommandPalette;\n"],"mappings":"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","names":["Transition"]}