@12-apps/ui 6.78.4 → 6.80.0

package/dist/{chunk-PU3HEWSG.js → chunk-PF2A2IM7.js}

@@ -1,6 +1,12 @@
 import {
   TimelineRow
-} from "./chunk-LOLYI6PS.js";
+} from "./chunk-YCZGYYUX.js";
+import {
+  resolveLabels
+} from "./chunk-LL2BWQPM.js";
+import {
+  EN_US_UI_LABELS
+} from "./chunk-O2RXSXSF.js";
 import {
   rem
 } from "./chunk-YKCAJ2TN.js";
@@ -44,8 +50,10 @@ var Timeline = ({
   showConnector = true,
   animated = true,
   alternating = false,
-  onItemClick
+  onItemClick,
+  labels: labelOverrides
 }) => {
+  const labels = resolveLabels(EN_US_UI_LABELS.timeline, labelOverrides);
   const [expandedItems, setExpandedItems] = React.useState(/* @__PURE__ */ new Set());
   const handleExpandClick = (itemId, event) => {
     event.stopPropagation();
@@ -77,7 +85,8 @@ var Timeline = ({
           alternating,
           isExpanded: expandedItems.has(item.id),
           onItemClick,
-          onExpandClick: handleExpandClick
+          onExpandClick: handleExpandClick,
+          labels
         },
         item.id
       ))
@@ -90,4 +99,4 @@ export {
   Timeline,
   Timeline_default
 };
-//# sourceMappingURL=chunk-PU3HEWSG.js.map
+//# sourceMappingURL=chunk-PF2A2IM7.js.map

package/dist/chunk-PF2A2IM7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Timeline/Timeline.tsx"],"sourcesContent":["import { EN_US_UI_LABELS } from '../../../en-US.labels';\nimport { resolveLabels } from '../../../utils/resolve-labels';\nimport Box from '@mui/material/Box/index.js';\nimport { alpha, styled } from '@mui/material/styles/index.js';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { TimelineRow } from './TimelineRow';\nimport type { TimelineProps } from './Timeline.types';\nimport { rem } from '../../../tokens/relative';\n\n// ---\n\n// --- Styled Components ---\nconst TimelineContainer = styled(Box)<{ orientation: 'vertical' | 'horizontal' }>(\n  ({ theme, orientation }) => ({\n    display: 'flex',\n    flexDirection: orientation === 'vertical' ? 'column' : 'row',\n    gap: theme.spacing(2),\n    position: 'relative',\n    width: '100%',\n    ...(orientation === 'horizontal' && {\n      overflowX: 'auto',\n      paddingBottom: theme.spacing(2),\n      '&::-webkit-scrollbar': {\n        height: rem(theme, 8) },\n      '&::-webkit-scrollbar-track': {\n        background: alpha(theme.palette.action.disabled, 0.1),\n        borderRadius: rem(theme, 4) },\n      '&::-webkit-scrollbar-thumb': {\n        background: alpha(theme.palette.primary.main, 0.3),\n        borderRadius: rem(theme, 4),\n        '&:hover': {\n          background: alpha(theme.palette.primary.main, 0.5) } } }) }),\n);\n\n\n// ---\n\n// Main component\nexport const Timeline: FC<TimelineProps> = ({\n  items,\n  variant = 'default',\n  orientation = 'vertical',\n  showConnector = true,\n  animated = true,\n  alternating = false,\n  onItemClick,\n  labels: labelOverrides }) => {\n  const labels = resolveLabels(EN_US_UI_LABELS.timeline, labelOverrides);\n  const [expandedItems, setExpandedItems] = React.useState<Set<string>>(new Set());\n\n  const handleExpandClick = (itemId: string, event: React.MouseEvent) => {\n    event.stopPropagation();\n    setExpandedItems((prev) => {\n      const newSet = new Set(prev);\n      if (newSet.has(itemId)) {\n        newSet.delete(itemId);\n      } else {\n        newSet.add(itemId);\n      }\n      return newSet;\n    });\n  };\n\n  return (\n    <TimelineContainer\n      orientation={orientation}\n      data-testid=\"timeline-container\"\n    >\n      {items.map((item, index) => (\n        <TimelineRow\n          key={item.id}\n          item={item}\n          index={index}\n          isLast={index === items.length - 1}\n          variant={variant}\n          orientation={orientation}\n          showConnector={showConnector}\n          animated={animated}\n          alternating={alternating}\n          isExpanded={expandedItems.has(item.id)}\n          onItemClick={onItemClick}\n          onExpandClick={handleExpandClick}\n          labels={labels}\n        />\n      ))}\n    </TimelineContainer>\n  );\n};\n\nexport default Timeline;\n"],"mappings":";;;;;;;;;;;;;;AAEA,OAAO,SAAS;AAChB,SAAS,OAAO,cAAc;AAE9B,OAAO,WAAW;AAiEV;AAzDR,IAAM,oBAAoB,OAAO,GAAG;AAAA,EAClC,CAAC,EAAE,OAAO,YAAY,OAAO;AAAA,IAC3B,SAAS;AAAA,IACT,eAAe,gBAAgB,aAAa,WAAW;AAAA,IACvD,KAAK,MAAM,QAAQ,CAAC;AAAA,IACpB,UAAU;AAAA,IACV,OAAO;AAAA,IACP,GAAI,gBAAgB,gBAAgB;AAAA,MAClC,WAAW;AAAA,MACX,eAAe,MAAM,QAAQ,CAAC;AAAA,MAC9B,wBAAwB;AAAA,QACtB,QAAQ,IAAI,OAAO,CAAC;AAAA,MAAE;AAAA,MACxB,8BAA8B;AAAA,QAC5B,YAAY,MAAM,MAAM,QAAQ,OAAO,UAAU,GAAG;AAAA,QACpD,cAAc,IAAI,OAAO,CAAC;AAAA,MAAE;AAAA,MAC9B,8BAA8B;AAAA,QAC5B,YAAY,MAAM,MAAM,QAAQ,QAAQ,MAAM,GAAG;AAAA,QACjD,cAAc,IAAI,OAAO,CAAC;AAAA,QAC1B,WAAW;AAAA,UACT,YAAY,MAAM,MAAM,QAAQ,QAAQ,MAAM,GAAG;AAAA,QAAE;AAAA,MAAE;AAAA,IAAE;AAAA,EAAG;AACpE;AAMO,IAAM,WAA8B,CAAC;AAAA,EAC1C;AAAA,EACA,UAAU;AAAA,EACV,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,WAAW;AAAA,EACX,cAAc;AAAA,EACd;AAAA,EACA,QAAQ;AAAe,MAAM;AAC7B,QAAM,SAAS,cAAc,gBAAgB,UAAU,cAAc;AACrE,QAAM,CAAC,eAAe,gBAAgB,IAAI,MAAM,SAAsB,oBAAI,IAAI,CAAC;AAE/E,QAAM,oBAAoB,CAAC,QAAgB,UAA4B;AACrE,UAAM,gBAAgB;AACtB,qBAAiB,CAAC,SAAS;AACzB,YAAM,SAAS,IAAI,IAAI,IAAI;AAC3B,UAAI,OAAO,IAAI,MAAM,GAAG;AACtB,eAAO,OAAO,MAAM;AAAA,MACtB,OAAO;AACL,eAAO,IAAI,MAAM;AAAA,MACnB;AACA,aAAO;AAAA,IACT,CAAC;AAAA,EACH;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAY;AAAA,MAEX,gBAAM,IAAI,CAAC,MAAM,UAChB;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA;AAAA,UACA,QAAQ,UAAU,MAAM,SAAS;AAAA,UACjC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,YAAY,cAAc,IAAI,KAAK,EAAE;AAAA,UACrC;AAAA,UACA,eAAe;AAAA,UACf;AAAA;AAAA,QAZK,KAAK;AAAA,MAaZ,CACD;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,mBAAQ;","names":[]}

package/dist/{chunk-5M2NWXN4.js → chunk-PGBIUO2A.js}

@@ -1,6 +1,6 @@
 import {
   withConfirmation
-} from "./chunk-LBZEPWYK.js";
+} from "./chunk-ABJOW7EK.js";
 import {
   Button
 } from "./chunk-5USHYSCO.js";
@@ -18,4 +18,4 @@ function createConfirmButton(copy, errorText) {
 export {
   createConfirmButton
 };
-//# sourceMappingURL=chunk-5M2NWXN4.js.map
+//# sourceMappingURL=chunk-PGBIUO2A.js.map

package/dist/{chunk-RCTHCXS6.js → chunk-PJNIJIE6.js}

@@ -1,6 +1,6 @@
 import {
   Alert
-} from "./chunk-NQCTANF3.js";
+} from "./chunk-QVDEGBME.js";
 
 // src/components/data-display/CardKit/card-actions-context.tsx
 import { createContext, useCallback, useContext, useState } from "react";
@@ -58,4 +58,4 @@ export {
   CardActionsProvider,
   useCardActions
 };
-//# sourceMappingURL=chunk-RCTHCXS6.js.map
+//# sourceMappingURL=chunk-PJNIJIE6.js.map

package/dist/{chunk-6ATXOJVQ.js → chunk-QADTI63U.js}

@@ -1,10 +1,10 @@
-import {
-  buildChartContext
-} from "./chunk-TZC6KIK2.js";
 import {
   ChartLegendContent,
   ChartTooltipContent
 } from "./chunk-RIRTW5EU.js";
+import {
+  buildChartContext
+} from "./chunk-TZC6KIK2.js";
 import {
   uiInk
 } from "./chunk-XJAD6E3V.js";
@@ -318,4 +318,4 @@ function renderChartByType(props, theme) {
 export {
   renderChartByType
 };
-//# sourceMappingURL=chunk-6ATXOJVQ.js.map
+//# sourceMappingURL=chunk-QADTI63U.js.map

package/dist/{chunk-SUZXPDUQ.js → chunk-QJLOWBFW.js}

@@ -2,7 +2,7 @@ import {
   createPaletteKeyHandler,
   filterCommands,
   groupByCategory
-} from "./chunk-4VRDFZ4G.js";
+} from "./chunk-KYTFGW4R.js";
 
 // src/components/navigation/CommandPalette/CommandPalette.hooks.ts
 import Fuse from "fuse.js";
@@ -13,7 +13,8 @@ var useCommandSearch = ({
   commands,
   searchQuery,
   showRecent,
-  recentCommandIds
+  recentCommandIds,
+  generalLabel
 }) => {
   const fuse = useMemo(
     () => new Fuse(commands, {
@@ -27,7 +28,10 @@ var useCommandSearch = ({
     () => filterCommands({ commands, searchQuery, fuse, showRecent, recentCommandIds }),
     [searchQuery, commands, fuse, showRecent, recentCommandIds]
   );
-  const groupedCommands = useMemo(() => groupByCategory(filteredCommands), [filteredCommands]);
+  const groupedCommands = useMemo(
+    () => groupByCategory(filteredCommands, generalLabel),
+    [filteredCommands, generalLabel]
+  );
   return { filteredCommands, groupedCommands };
 };
 var useExecuteCommand = ({
@@ -100,7 +104,8 @@ var useCommandPalette = ({
   showRecent,
   recentCommands,
   onCommandExecute,
-  onClose
+  onClose,
+  generalLabel
 }) => {
   const [searchQuery, setSearchQuery] = useState("");
   const [selectedIndex, setSelectedIndex] = useState(0);
@@ -111,7 +116,8 @@ var useCommandPalette = ({
     commands,
     searchQuery,
     showRecent,
-    recentCommandIds
+    recentCommandIds,
+    generalLabel
   });
   const executeCommand = useExecuteCommand({ setRecentCommandIds, onCommandExecute, onClose });
   useSelectionReset({ open, searchQuery, searchInputRef, setSearchQuery, setSelectedIndex });
@@ -141,4 +147,4 @@ var useCommandPalette = ({
 export {
   useCommandPalette
 };
-//# sourceMappingURL=chunk-SUZXPDUQ.js.map
+//# sourceMappingURL=chunk-QJLOWBFW.js.map

package/dist/chunk-QJLOWBFW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/CommandPalette/CommandPalette.hooks.ts"],"sourcesContent":["import Fuse from 'fuse.js';\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport {\n  createPaletteKeyHandler,\n  filterCommands,\n  groupByCategory,\n} from './CommandPalette.helpers';\nimport type { PaletteCommand } from './CommandPalette.types';\n\nconst RECENT_LIMIT = 5;\nconst FOCUS_DELAY_MS = 100;\n\n// The fuzzy index and the two derived lists it feeds.\nconst useCommandSearch = ({\n  commands,\n  searchQuery,\n  showRecent,\n  recentCommandIds,\n  generalLabel,\n}: {\n  commands: PaletteCommand[];\n  searchQuery: string;\n  showRecent?: boolean;\n  recentCommandIds: string[];\n  generalLabel?: string;\n}) => {\n  const fuse = useMemo(\n    () =>\n      new Fuse(commands, {\n        keys: ['label', 'description', 'keywords', 'category'],\n        threshold: 0.3,\n        includeScore: true,\n      }),\n    [commands],\n  );\n\n  const filteredCommands = useMemo(\n    () => filterCommands({ commands, searchQuery, fuse, showRecent, recentCommandIds }),\n    [searchQuery, commands, fuse, showRecent, recentCommandIds],\n  );\n\n  const groupedCommands = useMemo(\n    () => groupByCategory(filteredCommands, generalLabel),\n    [filteredCommands, generalLabel],\n  );\n\n  return { filteredCommands, groupedCommands };\n};\n\n// Running a command records it as recent, fires the caller's callback and closes\n// the palette.\nconst useExecuteCommand = ({\n  setRecentCommandIds,\n  onCommandExecute,\n  onClose,\n}: {\n  setRecentCommandIds: React.Dispatch<React.SetStateAction<string[]>>;\n  onCommandExecute?: (command: PaletteCommand) => void;\n  onClose: () => void;\n}) =>\n  useCallback(\n    (command: PaletteCommand) => {\n      setRecentCommandIds((prev) =>\n        [command.id, ...prev.filter((id) => id !== command.id)].slice(0, RECENT_LIMIT),\n      );\n\n      command.action();\n      onCommandExecute?.(command);\n      onClose();\n    },\n    [setRecentCommandIds, onCommandExecute, onClose],\n  );\n\n// The highlight resets on every new query; opening the palette focuses the input\n// and closing it clears the query.\nconst useSelectionReset = ({\n  open,\n  searchQuery,\n  searchInputRef,\n  setSearchQuery,\n  setSelectedIndex,\n}: {\n  open: boolean;\n  searchQuery: string;\n  searchInputRef: React.RefObject<HTMLInputElement | null>;\n  setSearchQuery: React.Dispatch<React.SetStateAction<string>>;\n  setSelectedIndex: React.Dispatch<React.SetStateAction<number>>;\n}) => {\n  useEffect(() => {\n    setSelectedIndex(0);\n  }, [searchQuery, setSelectedIndex]);\n\n  useEffect(() => {\n    if (open) {\n      window.setTimeout(() => {\n        searchInputRef.current?.focus();\n      }, FOCUS_DELAY_MS);\n      return;\n    }\n\n    setSearchQuery('');\n    setSelectedIndex(0);\n  }, [open, searchInputRef, setSearchQuery, setSelectedIndex]);\n};\n\n// Global key handling while the palette is open, plus keeping the highlighted\n// row scrolled into view.\nconst usePaletteKeyboard = ({\n  open,\n  selectedIndex,\n  filteredCommands,\n  listRef,\n  setSelectedIndex,\n  executeCommand,\n  onClose,\n}: {\n  open: boolean;\n  selectedIndex: number;\n  filteredCommands: PaletteCommand[];\n  listRef: React.RefObject<globalThis.HTMLUListElement | null>;\n  setSelectedIndex: React.Dispatch<React.SetStateAction<number>>;\n  executeCommand: (command: PaletteCommand) => void;\n  onClose: () => void;\n}) => {\n  useEffect(() => {\n    if (!open) return;\n\n    const handleKeyDown = createPaletteKeyHandler({\n      commandCount: filteredCommands.length,\n      selectedCommand: filteredCommands[selectedIndex],\n      setSelectedIndex,\n      executeCommand,\n      onClose,\n    });\n\n    window.addEventListener('keydown', handleKeyDown);\n    return () => window.removeEventListener('keydown', handleKeyDown);\n  }, [open, selectedIndex, filteredCommands, setSelectedIndex, executeCommand, onClose]);\n\n  useEffect(() => {\n    const selectedElement = listRef.current?.querySelector(\n      `[data-index=\"${selectedIndex}\"]`,\n    ) as HTMLElement | null;\n\n    selectedElement?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n  }, [selectedIndex, listRef]);\n};\n\n// All of the palette's state: the query, the highlighted row, the derived lists\n// and the effects that keep them in sync. Grouped here so the exported component\n// is prop defaults plus markup.\nexport const useCommandPalette = ({\n  open,\n  commands,\n  showRecent,\n  recentCommands,\n  onCommandExecute,\n  onClose,\n  generalLabel,\n}: {\n  open: boolean;\n  generalLabel?: string;\n  commands: PaletteCommand[];\n  showRecent?: boolean;\n  recentCommands: string[];\n  onCommandExecute?: (command: PaletteCommand) => void;\n  onClose: () => void;\n}) => {\n  const [searchQuery, setSearchQuery] = useState('');\n  const [selectedIndex, setSelectedIndex] = useState(0);\n  const [recentCommandIds, setRecentCommandIds] = useState<string[]>(recentCommands);\n  const searchInputRef = useRef<HTMLInputElement>(null);\n  const listRef = useRef<globalThis.HTMLUListElement>(null);\n\n  const { filteredCommands, groupedCommands } = useCommandSearch({\n    commands,\n    searchQuery,\n    showRecent,\n    recentCommandIds,\n    generalLabel,\n  });\n\n  const executeCommand = useExecuteCommand({ setRecentCommandIds, onCommandExecute, onClose });\n\n  useSelectionReset({ open, searchQuery, searchInputRef, setSearchQuery, setSelectedIndex });\n\n  usePaletteKeyboard({\n    open,\n    selectedIndex,\n    filteredCommands,\n    listRef,\n    setSelectedIndex,\n    executeCommand,\n    onClose,\n  });\n\n  return {\n    searchQuery,\n    setSearchQuery,\n    selectedIndex,\n    setSelectedIndex,\n    searchInputRef,\n    listRef,\n    filteredCommands,\n    groupedCommands,\n    executeCommand,\n    recentCommandIds,\n  };\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-FRGNTTPA.js → chunk-QK3XXPBA.js}

@@ -1,3 +1,6 @@
+import {
+  EN_US_CAROUSEL_COPY
+} from "./chunk-GLAAX5JJ.js";
 import {
   withDefaults
 } from "./chunk-HPK33ACY.js";
@@ -45,19 +48,19 @@ var INDICATOR_POSITIONS = (theme) => ({
     flexDirection: "column"
   }
 });
-var indicatorAttrs = (index, isActive) => ({
-  "aria-label": `Go to slide ${index + 1}`,
+var indicatorAttrs = (index, isActive, label) => ({
+  "aria-label": label,
   "data-testid": `carousel-indicator-${index}`,
   "data-active": isActive
 });
-var LineIndicator = ({ index, isActive, color, onSelect }) => {
+var LineIndicator = ({ index, label, isActive, color, onSelect }) => {
   const theme = useTheme();
   return /* @__PURE__ */ jsx(
     Box,
     {
       role: "button",
       tabIndex: 0,
-      ...indicatorAttrs(index, isActive),
+      ...indicatorAttrs(index, isActive, label),
       sx: {
         width: rem(theme, isActive ? 30 : 20),
         height: rem(theme, 3),
@@ -71,14 +74,14 @@ var LineIndicator = ({ index, isActive, color, onSelect }) => {
     }
   );
 };
-var NumberIndicator = ({ index, isActive, color, onSelect }) => {
+var NumberIndicator = ({ index, label, isActive, color, onSelect }) => {
   const theme = useTheme();
   return /* @__PURE__ */ jsx(
     Box,
     {
       role: "button",
       tabIndex: 0,
-      ...indicatorAttrs(index, isActive),
+      ...indicatorAttrs(index, isActive, label),
       sx: {
         width: rem(theme, 24),
         height: rem(theme, 24),
@@ -100,13 +103,13 @@ var NumberIndicator = ({ index, isActive, color, onSelect }) => {
     }
   );
 };
-var DotIndicator = ({ index, isActive, color, onSelect }) => {
+var DotIndicator = ({ index, label, isActive, color, onSelect }) => {
   const theme = useTheme();
   return /* @__PURE__ */ jsx(
     IconButton,
     {
       size: "small",
-      ...indicatorAttrs(index, isActive),
+      ...indicatorAttrs(index, isActive, label),
       onClick: onSelect,
       sx: {
         p: 0.5,
@@ -129,12 +132,13 @@ var INDICATORS_DEFAULTS = {
   variant: "dots"
 };
 var CarouselIndicators = (props) => {
-  const { count, activeIndex, onSelect, position, color, variant, className, style } = withDefaults(
+  const { count, activeIndex, onSelect, position, color, variant, className, style, copy } = withDefaults(
     props,
     INDICATORS_DEFAULTS
   );
   const theme = useTheme();
   const Indicator = INDICATORS[variant] ?? DotIndicator;
+  const goToSlide = copy?.goToSlide ?? EN_US_CAROUSEL_COPY.goToSlide;
   return /* @__PURE__ */ jsx(
     Box,
     {
@@ -152,6 +156,7 @@ var CarouselIndicators = (props) => {
         Indicator,
         {
           index,
+          label: goToSlide(index + 1),
           isActive: index === activeIndex,
           color,
           onSelect: () => onSelect(index)
@@ -325,4 +330,4 @@ export {
   CarouselArrows,
   CarouselThumbnails
 };
-//# sourceMappingURL=chunk-FRGNTTPA.js.map
+//# sourceMappingURL=chunk-QK3XXPBA.js.map

package/dist/chunk-QK3XXPBA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Carousel/Carousel.parts.tsx"],"sourcesContent":["import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';\nimport ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';\nimport FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';\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 { alpha, useTheme } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { withDefaults } from '../../../utils/withDefaults';\n\nimport { EN_US_CAROUSEL_COPY } from '../../../en-US.data-display';\nimport { neutralTones } from '../../../tokens/ink';\nimport { accentFor, muiSize, rem } from '../../../tokens/scales';\n\nimport type {\n  CarouselArrowsProps,\n  CarouselIndicatorsProps,\n  CarouselItem,\n  CarouselThumbnailsProps,\n} from './Carousel.types';\n\ntype IndicatorPosition = NonNullable<CarouselIndicatorsProps['position']>;\ntype IndicatorVariant = NonNullable<CarouselIndicatorsProps['variant']>;\ntype Color = NonNullable<CarouselIndicatorsProps['color']>;\n\n/** Fires `onSelect` for the keys a native button would treat as activation. */\nconst activateOnKey = (onSelect: () => void) => (e: React.KeyboardEvent) => {\n  if (e.key === 'Enter' || e.key === ' ') {\n    e.preventDefault();\n    onSelect();\n  }\n};\n\nconst INDICATOR_POSITIONS = (theme: Theme): Record<IndicatorPosition, CSSObject> => ({\n  top: { top: theme.spacing(2), left: '50%', transform: 'translateX(-50%)' },\n  bottom: { bottom: theme.spacing(2), left: '50%', transform: 'translateX(-50%)' },\n  left: {\n    left: theme.spacing(2),\n    top: '50%',\n    transform: 'translateY(-50%)',\n    flexDirection: 'column',\n  },\n  right: {\n    right: theme.spacing(2),\n    top: '50%',\n    transform: 'translateY(-50%)',\n    flexDirection: 'column',\n  },\n});\n\ninterface IndicatorProps {\n  index: number;\n  label: string;\n  isActive: boolean;\n  color: Color;\n  onSelect: () => void;\n}\n\n/** Attributes every indicator variant carries, whatever it draws. */\nconst indicatorAttrs = (index: number, isActive: boolean, label: string) => ({\n  'aria-label': label,\n  'data-testid': `carousel-indicator-${index}`,\n  'data-active': isActive,\n});\n\nconst LineIndicator: React.FC<IndicatorProps> = ({ index, label, isActive, color, onSelect }) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      role=\"button\"\n      tabIndex={0}\n      {...indicatorAttrs(index, isActive, label)}\n      sx={{\n        width: rem(theme, isActive ? 30 : 20),\n        height: rem(theme, 3),\n        backgroundColor: isActive\n          ? accentFor(theme, color).main\n          : alpha(accentFor(theme, color).main, 0.3),\n        borderRadius: 1.5,\n        transition: theme.transitions.create(['width', 'background-color']),\n        cursor: 'pointer',\n      }}\n      onClick={onSelect}\n      onKeyDown={activateOnKey(onSelect)}\n    />\n  );\n};\n\nconst NumberIndicator: React.FC<IndicatorProps> = ({ index, label, isActive, color, onSelect }) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      role=\"button\"\n      tabIndex={0}\n      {...indicatorAttrs(index, isActive, label)}\n      sx={{\n        width: rem(theme, 24),\n        height: rem(theme, 24),\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        borderRadius: '50%',\n        backgroundColor: isActive ? accentFor(theme, color).main : 'transparent',\n        color: isActive ? accentFor(theme, color).contrastText : accentFor(theme, color).main,\n        border: `1px solid ${accentFor(theme, color).main}`,\n        fontSize: rem(theme, 12),\n        fontWeight: isActive ? 'bold' : 'normal',\n        cursor: 'pointer',\n        transition: theme.transitions.create(['all']),\n      }}\n      onClick={onSelect}\n      onKeyDown={activateOnKey(onSelect)}\n    >\n      {index + 1}\n    </Box>\n  );\n};\n\nconst DotIndicator: React.FC<IndicatorProps> = ({ index, label, isActive, color, onSelect }) => {\n  const theme = useTheme();\n\n  return (\n    <IconButton\n      size=\"small\"\n      {...indicatorAttrs(index, isActive, label)}\n      onClick={onSelect}\n      sx={{\n        p: 0.5,\n        color: isActive ? accentFor(theme, color).main : alpha(accentFor(theme, color).main, 0.3),\n        transform: isActive ? 'scale(1.2)' : 'scale(1)',\n        transition: theme.transitions.create(['transform', 'color']),\n      }}\n    >\n      <FiberManualRecordIcon fontSize=\"small\" />\n    </IconButton>\n  );\n};\n\nconst INDICATORS: Record<IndicatorVariant, React.FC<IndicatorProps>> = {\n  lines: LineIndicator,\n  numbers: NumberIndicator,\n  dots: DotIndicator,\n};\n\nconst INDICATORS_DEFAULTS = {\n  position: 'bottom',\n  color: 'primary',\n  variant: 'dots',\n} satisfies Partial<CarouselIndicatorsProps>;\n\nexport const CarouselIndicators: React.FC<CarouselIndicatorsProps> = (props) => {\n  const { count, activeIndex, onSelect, position, color, variant, className, style, copy } = withDefaults(\n    props,\n    INDICATORS_DEFAULTS,\n  ) as CarouselIndicatorsProps & Required<Pick<CarouselIndicatorsProps, keyof typeof INDICATORS_DEFAULTS>>;\n\n  const theme = useTheme();\n  const Indicator = INDICATORS[variant] ?? DotIndicator;\n  const goToSlide = copy?.goToSlide ?? EN_US_CAROUSEL_COPY.goToSlide;\n\n  return (\n    <Box\n      className={className}\n      data-testid=\"carousel-indicators\"\n      sx={{\n        position: 'absolute',\n        display: 'flex',\n        gap: 1,\n        zIndex: 2,\n        ...(INDICATOR_POSITIONS(theme)[position] ?? INDICATOR_POSITIONS(theme).bottom),\n        ...style,\n      }}\n    >\n      {Array.from({ length: count }).map((_, index) => (\n        <Indicator\n          key={index}\n          index={index}\n          label={goToSlide(index + 1)}\n          isActive={index === activeIndex}\n          color={color}\n          onSelect={() => onSelect(index)}\n        />\n      ))}\n    </Box>\n  );\n};\n\nconst ARROWS_DEFAULTS = {\n  position: 'overlay',\n  disabled: false,\n  disablePrev: false,\n  disableNext: false,\n  color: 'primary',\n  size: 'md',\n} satisfies Partial<CarouselArrowsProps>;\n\n/**\n * All three positions place the arrow the same way; only `overlay` fades it back\n * until hovered, and only `outside` sits it clear of the frame.\n */\nconst arrowSx = (theme: Theme, color: Color, isOverlay: boolean): CSSObject => ({\n  position: 'absolute',\n  top: '50%',\n  transform: 'translateY(-50%)',\n  zIndex: 3,\n  backgroundColor: alpha(theme.palette.background.paper, 0.8),\n  color: accentFor(theme, color).main,\n  '&:disabled': { opacity: 0.3 },\n  ...(isOverlay\n    ? {\n        opacity: 0.7,\n        '&:hover': { backgroundColor: theme.palette.background.paper, opacity: 1 },\n      }\n    : { '&:hover': { backgroundColor: theme.palette.background.paper } }),\n});\n\nexport const CarouselArrows: React.FC<CarouselArrowsProps> = (props) => {\n  const {\n    copy, onPrev, onNext, position, disabled, disablePrev, disableNext, color, size, className,\n    style,\n  } = withDefaults(props, ARROWS_DEFAULTS) as CarouselArrowsProps &\n    Required<Pick<CarouselArrowsProps, keyof typeof ARROWS_DEFAULTS>>;\n\n  const theme = useTheme();\n  const sx = arrowSx(theme, color, position === 'overlay');\n  const offset = rem(theme, position === 'outside' ? -40 : 8);\n\n  return (\n    <Box data-testid=\"carousel-navigation\">\n      <IconButton\n        onClick={onPrev}\n        disabled={disabled || disablePrev}\n        size={muiSize(size)}\n        className={className}\n        aria-label={copy.previous}\n        data-testid=\"carousel-prev-button\"\n        sx={{ ...sx, left: offset, ...style }}\n      >\n        <ArrowBackIosIcon />\n      </IconButton>\n\n      <IconButton\n        onClick={onNext}\n        disabled={disabled || disableNext}\n        aria-label={copy.next}\n        size={muiSize(size)}\n        className={className}\n        data-testid=\"carousel-next-button\"\n        sx={{ ...sx, right: offset, ...style }}\n      >\n        <ArrowForwardIosIcon />\n      </IconButton>\n    </Box>\n  );\n};\n\nconst THUMBNAIL_SIZES = { xs: 40, sm: 60, md: 80, lg: 100, xl: 120 } as const;\n/** A thumbnail's side in design px — 60 for a size the table does not know. */\nconst thumbnailSidePx = (size: string): number =>\n  THUMBNAIL_SIZES[size as keyof typeof THUMBNAIL_SIZES] ?? 60;\n\nconst Thumbnail: React.FC<{\n  item: CarouselItem;\n  index: number;\n  isActive: boolean;\n  side: number;\n  onSelect: () => void;\n}> = ({ item, index, isActive, side, onSelect }) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      onClick={onSelect}\n      data-testid={`carousel-thumbnail-${index}`}\n      data-active={isActive}\n      sx={{\n        width: rem(theme, side),\n        height: rem(theme, side),\n        border: `${rem(theme, 2)} solid ${isActive ? theme.palette.primary.main : 'transparent'}`,\n        borderRadius: 1,\n        overflow: 'hidden',\n        cursor: 'pointer',\n        opacity: isActive ? 1 : 0.6,\n        transition: theme.transitions.create(['opacity', 'border-color']),\n        '&:hover': { opacity: 1 },\n      }}\n    >\n      {item.image ? (\n        <Box\n          component=\"img\"\n          src={item.image}\n          alt={item.alt || item.title}\n          sx={{ width: '100%', height: '100%', objectFit: 'cover' }}\n        />\n      ) : (\n        // No image to show, so the slide's number stands in for it.\n        <Box\n          sx={{\n            width: '100%',\n            height: '100%',\n            backgroundColor: neutralTones(theme).track,\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n          }}\n        >\n          <Typography variant=\"caption\">{index + 1}</Typography>\n        </Box>\n      )}\n    </Box>\n  );\n};\n\nexport const CarouselThumbnails: React.FC<CarouselThumbnailsProps> = ({\n  items,\n  activeIndex,\n  onSelect,\n  size = 'sm',\n  className,\n  style,\n}) => {\n  const theme = useTheme();\n  const side = thumbnailSidePx(size);\n\n  return (\n    <Box\n      className={className}\n      data-testid=\"carousel-thumbnails\"\n      sx={{\n        position: 'absolute',\n        // Hung below the frame, clear of its own height plus a gap.\n        bottom: rem(theme, -side - 16),\n        left: '50%',\n        transform: 'translateX(-50%)',\n        display: 'flex',\n        gap: 1,\n        p: 1,\n        backgroundColor: alpha(theme.palette.background.paper, 0.9),\n        borderRadius: 1,\n        ...style,\n      }}\n    >\n      {items.map((item, index) => (\n        <Thumbnail\n          key={item.id}\n          item={item}\n          index={index}\n          isActive={index === activeIndex}\n          side={side}\n          onSelect={() => onSelect(index)}\n        />\n      ))}\n    </Box>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-QNAB53N3.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-QNAB53N3.js.map

package/dist/chunk-QNAB53N3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/{chunk-7ZROYGUG.js → chunk-QOTMQLMW.js}

@@ -1,7 +1,7 @@
 import {
   CategorySectionHeading,
   CategoryTreeRow
-} from "./chunk-Q6PRGXR2.js";
+} from "./chunk-4HBCWKIX.js";
 import {
   emptySx,
   listSx,
@@ -144,4 +144,4 @@ function CategoryPanelList(props) {
 export {
   CategoryPanelList
 };
-//# sourceMappingURL=chunk-7ZROYGUG.js.map
+//# sourceMappingURL=chunk-QOTMQLMW.js.map

package/dist/{chunk-NQCTANF3.js → chunk-QVDEGBME.js}

@@ -1,3 +1,6 @@
+import {
+  AlertContent
+} from "./chunk-7HZ36QDH.js";
 import {
   alertEmphasisStyles,
   alertLayoutStyles,
@@ -6,17 +9,14 @@ import {
   getColorFromTheme,
   getVariantIcon
 } from "./chunk-L5RS6QAT.js";
-import {
-  resolveIconPlacement
-} from "./chunk-QXUXO22M.js";
-import {
-  AlertContent
-} from "./chunk-7HZ36QDH.js";
 import {
   resolveAlertProps,
   resolveAnnouncement,
   testIdFor
 } from "./chunk-L7VH6IMR.js";
+import {
+  resolveIconPlacement
+} from "./chunk-QXUXO22M.js";
 import {
   ACTIVE,
   ALERT_EASING,
@@ -277,4 +277,4 @@ export {
   Alert,
   ALERT_ONLY_PROPS
 };
-//# sourceMappingURL=chunk-NQCTANF3.js.map
+//# sourceMappingURL=chunk-QVDEGBME.js.map

package/dist/{chunk-LI6XSM5D.js → chunk-QVEJGFRP.js}

@@ -1,9 +1,9 @@
 import {
   GridShell
-} from "./chunk-RHKQ2RSY.js";
+} from "./chunk-BLVFHVDM.js";
 import {
   useDataViewsState
-} from "./chunk-ZPACE34U.js";
+} from "./chunk-OTION43A.js";
 
 // src/components/data-display/DataViews/DataViewsGrid.tsx
 import { useEffect, useRef } from "react";
@@ -27,4 +27,4 @@ function DataViewsGrid(props) {
 export {
   DataViewsGrid
 };
-//# sourceMappingURL=chunk-LI6XSM5D.js.map
+//# sourceMappingURL=chunk-QVEJGFRP.js.map

package/dist/{chunk-HEBZ7Q7O.js → chunk-QVYBRD6U.js}

@@ -1,6 +1,6 @@
 import {
   MIN_QUERY_LENGTH
-} from "./chunk-MTGEJRE4.js";
+} from "./chunk-NNKIM73H.js";
 import {
   searchMockAddresses
 } from "./chunk-O7QPPJAK.js";
@@ -31,7 +31,7 @@ var fetchLivePredictions = (service, input, restrictions, sink) => {
     }
     sink.setOptions([]);
     sink.setApiError(
-      status === google.maps.places.PlacesServiceStatus.ZERO_RESULTS ? null : "Failed to fetch address suggestions"
+      status === google.maps.places.PlacesServiceStatus.ZERO_RESULTS ? null : sink.fetchFailed
     );
   });
 };
@@ -42,13 +42,14 @@ var useAddressPredictions = ({
   useMockData,
   setInputValue,
   setLoading,
-  setApiError
+  setApiError,
+  fetchFailed
 }) => {
   const [options, setOptions] = useState([]);
   const debounceTimeoutRef = useRef(void 0);
   const sink = useMemo(
-    () => ({ setOptions, setLoading, setApiError }),
-    [setLoading, setApiError]
+    () => ({ setOptions, setLoading, setApiError, fetchFailed }),
+    [setLoading, setApiError, fetchFailed]
   );
   const debouncedAutocomplete = useCallback(
     (input) => {
@@ -94,4 +95,4 @@ var useAddressPredictions = ({
 export {
   useAddressPredictions
 };
-//# sourceMappingURL=chunk-HEBZ7Q7O.js.map
+//# sourceMappingURL=chunk-QVYBRD6U.js.map

package/dist/chunk-QVYBRD6U.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/AddressAutocomplete/useAddressPredictions.ts"],"sourcesContent":["import type React from 'react';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { MIN_QUERY_LENGTH } from './AddressAutocomplete.helpers';\nimport type { AddressAutocompleteProps, AddressOptionValue } from './AddressAutocomplete.types';\nimport { searchMockAddresses } from './mockPlaces';\nimport type { GoogleMapsService } from './useGoogleMapsAPI';\n\nconst DEBOUNCE_MS = 300;\n// Long enough to exercise the loading state, short enough not to slow tests down.\nconst MOCK_PREDICTION_DELAY_MS = 100;\n\ntype Restrictions = AddressAutocompleteProps['restrictions'];\n\ninterface PredictionSink {\n  setOptions: (options: AddressOptionValue[]) => void;\n  setLoading: (loading: boolean) => void;\n  setApiError: (message: string | null) => void;\n  fetchFailed: string;\n}\n\nconst predictionRequest = (\n  input: string,\n  restrictions: Restrictions,\n): google.maps.places.AutocompletionRequest => ({\n  input: input.trim(),\n  componentRestrictions: restrictions?.country ? { country: restrictions.country } : undefined,\n  types: restrictions?.types || [],\n});\n\nconst fetchMockPredictions = (input: string, sink: PredictionSink) => {\n  window.setTimeout(() => {\n    sink.setLoading(false);\n    sink.setOptions(searchMockAddresses(input));\n    sink.setApiError(null);\n  }, MOCK_PREDICTION_DELAY_MS);\n};\n\nconst fetchLivePredictions = (\n  service: google.maps.places.AutocompleteService,\n  input: string,\n  restrictions: Restrictions,\n  sink: PredictionSink,\n) => {\n  service.getPlacePredictions(predictionRequest(input, restrictions), (predictions, status) => {\n    sink.setLoading(false);\n\n    if (status === google.maps.places.PlacesServiceStatus.OK && predictions) {\n      sink.setOptions(predictions);\n      sink.setApiError(null);\n      return;\n    }\n\n    // No matches is a normal outcome, not something to complain about.\n    sink.setOptions([]);\n    sink.setApiError(\n      status === google.maps.places.PlacesServiceStatus.ZERO_RESULTS\n        ? null\n        : sink.fetchFailed,\n    );\n  });\n};\n\nexport const useAddressPredictions = ({\n  isLoaded,\n  services,\n  restrictions,\n  useMockData,\n  setInputValue,\n  setLoading,\n  setApiError,\n  fetchFailed,\n}: {\n  fetchFailed: string;\n  isLoaded: boolean;\n  services: GoogleMapsService;\n  restrictions: Restrictions;\n  useMockData: boolean;\n  setInputValue: (value: string) => void;\n  setLoading: (loading: boolean) => void;\n  setApiError: (message: string | null) => void;\n}) => {\n  const [options, setOptions] = useState<AddressOptionValue[]>([]);\n  const debounceTimeoutRef = useRef<number | undefined>(undefined);\n\n  const sink = useMemo<PredictionSink>(\n    () => ({ setOptions, setLoading, setApiError, fetchFailed }),\n    [setLoading, setApiError, fetchFailed],\n  );\n\n  const debouncedAutocomplete = useCallback(\n    (input: string) => {\n      window.clearTimeout(debounceTimeoutRef.current);\n\n      debounceTimeoutRef.current = window.setTimeout(() => {\n        if (!input.trim() || !isLoaded) {\n          setOptions([]);\n          setLoading(false);\n          return;\n        }\n\n        if (useMockData) {\n          fetchMockPredictions(input, sink);\n          return;\n        }\n\n        if (!services.autocompleteService) {\n          setOptions([]);\n          setLoading(false);\n          return;\n        }\n\n        fetchLivePredictions(services.autocompleteService, input, restrictions, sink);\n      }, DEBOUNCE_MS);\n    },\n    [isLoaded, services, restrictions, useMockData, sink, setLoading],\n  );\n\n  useEffect(() => () => window.clearTimeout(debounceTimeoutRef.current), []);\n\n  const handleInputChange = useCallback(\n    (_event: React.SyntheticEvent, value: string) => {\n      setInputValue(value);\n      setApiError(null);\n\n      if (value.length > MIN_QUERY_LENGTH) {\n        setLoading(true);\n        debouncedAutocomplete(value);\n        return;\n      }\n\n      setOptions([]);\n      setLoading(false);\n    },\n    [debouncedAutocomplete, setInputValue, setApiError, setLoading],\n  );\n\n  return { options, handleInputChange };\n};\n"],"mappings":";;;;;;;;AACA,SAAS,aAAa,WAAW,SAAS,QAAQ,gBAAgB;AAOlE,IAAM,cAAc;AAEpB,IAAM,2BAA2B;AAWjC,IAAM,oBAAoB,CACxB,OACA,kBAC8C;AAAA,EAC9C,OAAO,MAAM,KAAK;AAAA,EAClB,uBAAuB,cAAc,UAAU,EAAE,SAAS,aAAa,QAAQ,IAAI;AAAA,EACnF,OAAO,cAAc,SAAS,CAAC;AACjC;AAEA,IAAM,uBAAuB,CAAC,OAAe,SAAyB;AACpE,SAAO,WAAW,MAAM;AACtB,SAAK,WAAW,KAAK;AACrB,SAAK,WAAW,oBAAoB,KAAK,CAAC;AAC1C,SAAK,YAAY,IAAI;AAAA,EACvB,GAAG,wBAAwB;AAC7B;AAEA,IAAM,uBAAuB,CAC3B,SACA,OACA,cACA,SACG;AACH,UAAQ,oBAAoB,kBAAkB,OAAO,YAAY,GAAG,CAAC,aAAa,WAAW;AAC3F,SAAK,WAAW,KAAK;AAErB,QAAI,WAAW,OAAO,KAAK,OAAO,oBAAoB,MAAM,aAAa;AACvE,WAAK,WAAW,WAAW;AAC3B,WAAK,YAAY,IAAI;AACrB;AAAA,IACF;AAGA,SAAK,WAAW,CAAC,CAAC;AAClB,SAAK;AAAA,MACH,WAAW,OAAO,KAAK,OAAO,oBAAoB,eAC9C,OACA,KAAK;AAAA,IACX;AAAA,EACF,CAAC;AACH;AAEO,IAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MASM;AACJ,QAAM,CAAC,SAAS,UAAU,IAAI,SAA+B,CAAC,CAAC;AAC/D,QAAM,qBAAqB,OAA2B,MAAS;AAE/D,QAAM,OAAO;AAAA,IACX,OAAO,EAAE,YAAY,YAAY,aAAa,YAAY;AAAA,IAC1D,CAAC,YAAY,aAAa,WAAW;AAAA,EACvC;AAEA,QAAM,wBAAwB;AAAA,IAC5B,CAAC,UAAkB;AACjB,aAAO,aAAa,mBAAmB,OAAO;AAE9C,yBAAmB,UAAU,OAAO,WAAW,MAAM;AACnD,YAAI,CAAC,MAAM,KAAK,KAAK,CAAC,UAAU;AAC9B,qBAAW,CAAC,CAAC;AACb,qBAAW,KAAK;AAChB;AAAA,QACF;AAEA,YAAI,aAAa;AACf,+BAAqB,OAAO,IAAI;AAChC;AAAA,QACF;AAEA,YAAI,CAAC,SAAS,qBAAqB;AACjC,qBAAW,CAAC,CAAC;AACb,qBAAW,KAAK;AAChB;AAAA,QACF;AAEA,6BAAqB,SAAS,qBAAqB,OAAO,cAAc,IAAI;AAAA,MAC9E,GAAG,WAAW;AAAA,IAChB;AAAA,IACA,CAAC,UAAU,UAAU,cAAc,aAAa,MAAM,UAAU;AAAA,EAClE;AAEA,YAAU,MAAM,MAAM,OAAO,aAAa,mBAAmB,OAAO,GAAG,CAAC,CAAC;AAEzE,QAAM,oBAAoB;AAAA,IACxB,CAAC,QAA8B,UAAkB;AAC/C,oBAAc,KAAK;AACnB,kBAAY,IAAI;AAEhB,UAAI,MAAM,SAAS,kBAAkB;AACnC,mBAAW,IAAI;AACf,8BAAsB,KAAK;AAC3B;AAAA,MACF;AAEA,iBAAW,CAAC,CAAC;AACb,iBAAW,KAAK;AAAA,IAClB;AAAA,IACA,CAAC,uBAAuB,eAAe,aAAa,UAAU;AAAA,EAChE;AAEA,SAAO,EAAE,SAAS,kBAAkB;AACtC;","names":[]}

package/dist/{chunk-JJVIZR6C.js → chunk-RIPG3QIN.js}

@@ -1,12 +1,18 @@
 import {
   PaletteResults
-} from "./chunk-2ARVNCVU.js";
+} from "./chunk-FZUAB2KS.js";
+import {
+  useCommandPalette
+} from "./chunk-QJLOWBFW.js";
 import {
   ShortcutChip
 } from "./chunk-Z6MCTGIK.js";
 import {
-  useCommandPalette
-} from "./chunk-SUZXPDUQ.js";
+  EN_US_COMMAND_PALETTE_COPY
+} from "./chunk-SSCEX5NY.js";
+import {
+  resolveLabels
+} from "./chunk-LL2BWQPM.js";
 import {
   scrim
 } from "./chunk-XJAD6E3V.js";
@@ -47,7 +53,9 @@ var StyledDialog = styled(Dialog)(({ theme }) => ({
 }));
 var PaletteContainer = styled(Paper)(({ theme }) => ({
   width: "100%",
-  maxWidth: rem(theme, 640),
+  // 640 is the desktop width (FUT-3347); below it the palette takes the dialog's
+  // own width, which already keeps MUI's 32px gutters, so a phone sees it whole.
+  maxWidth: `min(${rem(theme, 640)}, 100%)`,
   background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,
   backdropFilter: `blur(${rem(theme, 20)})`,
   WebkitBackdropFilter: `blur(${rem(theme, 20)})`,
@@ -103,11 +111,15 @@ var PaletteFooter = ({
   copy
 }) => {
   const theme = useTheme();
+  const text = resolveLabels(EN_US_COMMAND_PALETTE_COPY, copy);
   return /* @__PURE__ */ jsxs(
     Box,
     {
       sx: {
         display: "flex",
+        // Wraps the count under the hints on a phone; one row on desktop.
+        flexWrap: "wrap",
+        gap: 1,
         justifyContent: "space-between",
         alignItems: "center",
         padding: 1,
@@ -115,7 +127,7 @@ var PaletteFooter = ({
         background: alpha(theme.palette.background.default, 0.4)
       },
       children: [
-        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 1 }, children: [
+        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 1 }, children: [
           /* @__PURE__ */ jsx(
             ShortcutChip,
             {
@@ -127,10 +139,7 @@ var PaletteFooter = ({
           /* @__PURE__ */ jsx(ShortcutChip, { label: copy.navigate, size: "small" }),
           /* @__PURE__ */ jsx(ShortcutChip, { label: copy.close, size: "small" })
         ] }),
-        /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "text.secondary", children: [
-          commandCount,
-          " commands"
-        ] })
+        /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: text.commandCount(commandCount) })
       ]
     }
   );
@@ -140,7 +149,7 @@ var CommandPalette = ({
   open,
   onClose,
   commands,
-  placeholder = "Type a command or search...",
+  placeholder,
   width,
   maxHeight,
   showRecent = true,
@@ -148,6 +157,7 @@ var CommandPalette = ({
   onCommandExecute,
   dataTestId = "command-palette"
 }) => {
+  const text = resolveLabels(EN_US_COMMAND_PALETTE_COPY, copy);
   const {
     searchQuery,
     setSearchQuery,
@@ -165,7 +175,8 @@ var CommandPalette = ({
     showRecent,
     recentCommands,
     onCommandExecute,
-    onClose
+    onClose,
+    generalLabel: text.general
   });
   const handleSearchChange = (event) => {
     setSearchQuery(event.target.value);
@@ -184,7 +195,7 @@ var CommandPalette = ({
           PaletteSearch,
           {
             inputRef: searchInputRef,
-            placeholder,
+            placeholder: placeholder ?? text.placeholder,
             value: searchQuery,
             dataTestId,
             onChange: handleSearchChange,
@@ -219,4 +230,4 @@ export {
   CommandPalette,
   CommandPalette_default
 };
-//# sourceMappingURL=chunk-JJVIZR6C.js.map
+//# sourceMappingURL=chunk-RIPG3QIN.js.map

package/dist/chunk-RIPG3QIN.js.map

@@ -0,0 +1 @@
+{"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"]}

package/dist/{chunk-VD72JGHA.js → chunk-RMZQHJEP.js}

@@ -3,10 +3,10 @@ import {
 } from "./chunk-KHG57NAE.js";
 import {
   MultiSelectDropdown
-} from "./chunk-RKVS5AA6.js";
+} from "./chunk-H3NXDKFH.js";
 import {
   CategorySelect
-} from "./chunk-N34AOGK3.js";
+} from "./chunk-I3OKAQ5L.js";
 
 // src/components/data-display/DataViews/data-views-category-pill.tsx
 import { jsx } from "react/jsx-runtime";
@@ -79,4 +79,4 @@ export {
   emitPillDiff,
   PillControl
 };
-//# sourceMappingURL=chunk-VD72JGHA.js.map
+//# sourceMappingURL=chunk-RMZQHJEP.js.map

package/dist/{chunk-VBGC7G4F.js → chunk-RQ3IS5NQ.js}

@@ -10,7 +10,7 @@ import {
   ViewFooter,
   ViewHeader,
   ViewsList
-} from "./chunk-VMN6KG2U.js";
+} from "./chunk-OCLEKMBP.js";
 import {
   useDataViewsCopy
 } from "./chunk-KHG57NAE.js";
@@ -265,4 +265,4 @@ function DataViewsDisplayPanel({
 export {
   DataViewsDisplayPanel
 };
-//# sourceMappingURL=chunk-VBGC7G4F.js.map
+//# sourceMappingURL=chunk-RQ3IS5NQ.js.map

package/dist/{chunk-3JDP5OUR.js → chunk-RQY5ONSF.js}

@@ -48,8 +48,12 @@ var countries = [
   { code: "AE", name: "United Arab Emirates", dial: "+971", flag: "\u{1F1E6}\u{1F1EA}" },
   { code: "SA", name: "Saudi Arabia", dial: "+966", flag: "\u{1F1F8}\u{1F1E6}" }
 ].sort((a, b) => a.name.localeCompare(b.name));
+var countryDisplayName = (country, countryName) => countryName ? countryName(country.code, country.name) : country.name;
+var countriesByDisplayName = (countryName) => countryName ? countries.map((country) => ({ ...country, displayName: countryDisplayName(country, countryName) })).sort((a, b) => a.displayName.localeCompare(b.displayName)) : countries.map((country) => ({ ...country, displayName: country.name }));
 
 export {
-  countries
+  countries,
+  countryDisplayName,
+  countriesByDisplayName
 };
-//# sourceMappingURL=chunk-3JDP5OUR.js.map
+//# sourceMappingURL=chunk-RQY5ONSF.js.map