@12-apps/ui 6.72.0 → 6.73.0

package/src/components/navigation/SectionNav/SectionNav.rail.tsx

@@ -1,5 +1,6 @@
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import Typography from '@mui/material/Typography/index.js';
-import { useTheme } from '@mui/material/styles/index.js';
+import { useTheme, type SxProps, type Theme } from '@mui/material/styles/index.js';
 import type { ElementType, ReactNode } from 'react';
 
 import type { SectionNavCopy } from '../../../copy';
@@ -12,6 +13,7 @@ import {
   CountedIcon,
   NOT_LIVE,
   SlotIcon,
+  VISUALLY_HIDDEN,
   controlProps,
   destinationControl,
   focusRing,
@@ -26,6 +28,33 @@ import type {
 } from './SectionNav.types';
 import type { SectionNavBadge } from './SectionNav.types';
 
+/** The row's words, stacked: the label over its description. */
+const ROW_WORDS_SX = { display: 'flex', flexDirection: 'column', minWidth: 0 } as const;
+
+/** A rail row's look: icon and words, or the icon alone, centred, when compact. */
+function railRowSx(theme: Theme, active: boolean, compact: boolean): SxProps<Theme> {
+  return {
+    ...CONTROL_RESET,
+    ...focusRing(theme),
+    position: compact ? 'relative' : undefined,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: compact ? 'center' : 'flex-start',
+    gap: compact ? 0 : 1.5,
+    width: '100%',
+    minHeight: rem(theme, 40),
+    px: compact ? 0 : 1.25,
+    py: 0.75,
+    borderRadius: 1,
+    textAlign: 'start',
+    color: active ? 'primary.main' : 'text.primary',
+    bgcolor: active ? 'action.selected' : 'transparent',
+    '&:hover': { bgcolor: active ? 'action.selected' : 'action.hover' },
+    '& svg': { color: 'primary.main', fontSize: rem(theme, 20) },
+    [NOT_LIVE]: { color: 'text.disabled', '& svg': { color: 'text.disabled' } },
+  } as SxProps<Theme>;
+}
+
 /**
  * One rail row: icon, label, and the count at the far end.
  *
@@ -48,6 +77,7 @@ function RailRow({
   testId,
   control,
   loading = false,
+  compact = false,
 }: {
   label: string;
   description?: string;
@@ -59,6 +89,8 @@ function RailRow({
   testId: string;
   control: Record<string, unknown>;
   loading?: boolean;
+  /** Icon only, centred: the label stays the row's name, out of sight, and its tooltip. */
+  compact?: boolean;
 }): React.JSX.Element {
   const theme = useTheme();
   return (
@@ -66,25 +98,9 @@ function RailRow({
       {...control}
       aria-current={current ? 'page' : undefined}
       aria-busy={loading || undefined}
+      title={compact ? label : undefined}
       data-testid={testId}
-      sx={{
-        ...CONTROL_RESET,
-        ...focusRing(theme),
-        display: 'flex',
-        alignItems: 'center',
-        gap: 1.5,
-        width: '100%',
-        minHeight: rem(theme, 40),
-        px: 1.25,
-        py: 0.75,
-        borderRadius: 1,
-        textAlign: 'start',
-        color: active ? 'primary.main' : 'text.primary',
-        bgcolor: active ? 'action.selected' : 'transparent',
-        '&:hover': { bgcolor: active ? 'action.selected' : 'action.hover' },
-        '& svg': { color: 'primary.main', fontSize: rem(theme, 20) },
-        [NOT_LIVE]: { color: 'text.disabled', '& svg': { color: 'text.disabled' } },
-      }}
+      sx={railRowSx(theme, active, compact)}
     >
       <CountedIcon
         icon={<SlotIcon icon={icon} loading={loading} />}
@@ -93,7 +109,7 @@ function RailRow({
         attentionLabel={copy.attention}
         testId={`${testId}-badge`}
       />
-      <Box component="span" sx={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
+      <Box component="span" sx={compact ? VISUALLY_HIDDEN : ROW_WORDS_SX}>
         <Typography component="span" variant="body2" sx={{ fontWeight: active ? 700 : 500 }}>
           {label}
         </Typography>
@@ -108,9 +124,13 @@ function RailRow({
 }
 
 /** A heading between the rail's sections, in the sidebar's small-caps voice. */
-function RailHeading({ children }: { children: ReactNode }): React.JSX.Element {
+function RailHeading({ children, compact = false }: { children: ReactNode; compact?: boolean }): React.JSX.Element {
   return (
-    <Typography variant="overline" color="text.secondary" sx={{ px: 1.25, pt: 1.5, lineHeight: 1.6 }}>
+    <Typography
+      variant="overline"
+      color="text.secondary"
+      sx={compact ? VISUALLY_HIDDEN : { px: 1.25, pt: 1.5, lineHeight: 1.6 }}
+    >
       {children}
     </Typography>
   );
@@ -127,19 +147,21 @@ function RailMenu({
   linkComponent,
   copy,
   testId,
+  compact,
 }: {
   menu: SectionNavMenu;
   linkComponent: ElementType | undefined;
   copy: SectionNavCopy;
   testId: string;
+  compact: boolean;
 }): React.JSX.Element {
   return (
     <Box component="section" data-testid={testId} sx={{ display: 'flex', flexDirection: 'column', gap: 0.25 }}>
-      <RailHeading>{menu.title}</RailHeading>
+      <RailHeading compact={compact}>{menu.title}</RailHeading>
       {menu.groups.map((group) => (
         <Box key={group.id} sx={{ display: 'flex', flexDirection: 'column', gap: 0.25 }}>
           {group.title ? (
-            <Typography variant="caption" color="text.secondary" sx={{ px: 1.25, pt: 0.5 }}>
+            <Typography variant="caption" color="text.secondary" sx={compact ? VISUALLY_HIDDEN : { px: 1.25, pt: 0.5 }}>
               {group.title}
             </Typography>
           ) : null}
@@ -151,6 +173,7 @@ function RailMenu({
               icon={entry.icon}
               count={entry.badge}
               active={entry.active === true}
+              compact={compact}
               copy={copy}
               testId={entry.dataTestId ?? `${testId}-entry-${entry.id}`}
               control={controlProps({
@@ -172,23 +195,29 @@ function RailBack({
   back,
   linkComponent,
   testId,
+  compact,
 }: {
   back: SectionNavBack;
   linkComponent: ElementType | undefined;
   testId: string;
+  compact: boolean;
 }): React.JSX.Element {
   const theme = useTheme();
   return (
     <Box
       {...controlProps({ href: back.href, linkComponent })}
+      title={compact ? back.label : undefined}
       data-testid={testId}
       sx={{
         ...CONTROL_RESET,
         ...focusRing(theme),
+        position: compact ? 'relative' : undefined,
         display: 'flex',
         alignItems: 'center',
-        gap: 1,
-        px: 1.25,
+        justifyContent: compact ? 'center' : 'flex-start',
+        gap: compact ? 0 : 1,
+        minHeight: compact ? rem(theme, 40) : undefined,
+        px: compact ? 0 : 1.25,
         py: 0.75,
         mb: 0.5,
         borderRadius: 1,
@@ -197,8 +226,9 @@ function RailBack({
         '& svg': { fontSize: rem(theme, 20) },
       }}
     >
-      {back.icon}
-      <Typography component="span" variant="body2" sx={{ fontWeight: 600 }}>
+      {/* Compact, the icon is all that is drawn: a back with none gets the arrow. */}
+      {back.icon ?? (compact ? <ArrowBackIcon aria-hidden /> : null)}
+      <Typography component="span" variant="body2" sx={compact ? VISUALLY_HIDDEN : { fontWeight: 600 }}>
         {back.label}
       </Typography>
     </Box>
@@ -211,14 +241,17 @@ function RailAction({
   linkComponent,
   copy,
   testId,
+  compact,
 }: {
   action: SectionNavAction;
   linkComponent: ElementType | undefined;
   copy: SectionNavCopy;
   testId: string;
+  compact: boolean;
 }): React.JSX.Element {
   return (
     <RailRow
+      compact={compact}
       label={action.label}
       icon={action.icon}
       count={undefined}
@@ -243,15 +276,18 @@ function RailDestination({
   linkComponent,
   copy,
   testId,
+  compact,
 }: {
   destination: SectionNavDestination;
   linkComponent: ElementType | undefined;
   copy: SectionNavCopy;
   testId: string;
+  compact: boolean;
 }): React.JSX.Element {
   const { current, lit } = destinationState(destination);
   return (
     <RailRow
+      compact={compact}
       label={destination.label}
       icon={destination.icon}
       count={destination.badge}
@@ -271,7 +307,8 @@ function RailDestination({
  * `primary` action as a row, then `more` listed in full.
  *
  * It fills the column the host gives it and scrolls on its own, like the
- * sidebar it stands in for.
+ * sidebar it stands in for. `compact` draws every row as its icon for a
+ * column 64px wide; the words stay the rows' names.
  */
 export function SectionNavRail({
   label,
@@ -283,8 +320,9 @@ export function SectionNavRail({
   linkComponent,
   copy,
   dataTestId,
+  compact = false,
 }: Required<Pick<SectionNavProps, 'label' | 'destinations' | 'copy' | 'dataTestId'>> &
-  Pick<SectionNavProps, 'primary' | 'more' | 'back' | 'heading'> & {
+  Pick<SectionNavProps, 'primary' | 'more' | 'back' | 'heading' | 'compact'> & {
     linkComponent: ElementType | undefined;
   }): React.JSX.Element {
   return (
@@ -303,10 +341,18 @@ export function SectionNavRail({
         bgcolor: 'background.paper',
       }}
     >
-      {back ? <RailBack back={back} linkComponent={linkComponent} testId={`${dataTestId}-back`} /> : null}
-      {heading ? <RailHeading>{heading}</RailHeading> : null}
+      {back ? (
+        <RailBack back={back} linkComponent={linkComponent} testId={`${dataTestId}-back`} compact={compact} />
+      ) : null}
+      {heading ? <RailHeading compact={compact}>{heading}</RailHeading> : null}
       {isMenu(primary) ? (
-        <RailCreateMenu menu={primary} linkComponent={linkComponent} copy={copy} testId={`${dataTestId}-primary`} />
+        <RailCreateMenu
+          menu={primary}
+          linkComponent={linkComponent}
+          copy={copy}
+          testId={`${dataTestId}-primary`}
+          compact={compact}
+        />
       ) : null}
       {destinations.map((destination) => (
         <RailDestination
@@ -315,12 +361,21 @@ export function SectionNavRail({
           linkComponent={linkComponent}
           copy={copy}
           testId={destination.dataTestId ?? `${dataTestId}-dest-${destination.id}`}
+          compact={compact}
         />
       ))}
       {primary && !isMenu(primary) ? (
-        <RailAction action={primary} linkComponent={linkComponent} copy={copy} testId={`${dataTestId}-primary`} />
+        <RailAction
+          action={primary}
+          linkComponent={linkComponent}
+          copy={copy}
+          testId={`${dataTestId}-primary`}
+          compact={compact}
+        />
+      ) : null}
+      {more ? (
+        <RailMenu menu={more} linkComponent={linkComponent} copy={copy} testId={`${dataTestId}-more`} compact={compact} />
       ) : null}
-      {more ? <RailMenu menu={more} linkComponent={linkComponent} copy={copy} testId={`${dataTestId}-more`} /> : null}
     </Box>
   );
 }

package/src/components/navigation/SectionNav/SectionNav.railCreate.tsx

@@ -4,7 +4,7 @@ import ListItemText from '@mui/material/ListItemText/index.js';
 import ListSubheader from '@mui/material/ListSubheader/index.js';
 import Menu from '@mui/material/Menu/index.js';
 import MenuItem from '@mui/material/MenuItem/index.js';
-import { useTheme } from '@mui/material/styles/index.js';
+import { useTheme, type SxProps, type Theme } from '@mui/material/styles/index.js';
 import { useId, useState, type ElementType, type ReactNode } from 'react';
 
 import type { SectionNavCopy } from '../../../copy';
@@ -63,6 +63,20 @@ function entryItem(
   );
 }
 
+/** The button's icon and names: the icon in front of the label, or — compact — the icon alone, named by the label. */
+function createButtonForm(
+  menu: SectionNavMenu,
+  compact: boolean,
+): { startIcon: ReactNode; 'aria-label': string | undefined; title: string | undefined } {
+  if (!compact) return { startIcon: menu.icon, 'aria-label': undefined, title: undefined };
+  return { startIcon: undefined, 'aria-label': menu.label, title: menu.label };
+}
+
+/** Where the button's content sits: the label's start, or — compact — the icon centred. */
+function createButtonLayoutSx(compact: boolean): SxProps<Theme> {
+  return compact ? { justifyContent: 'center', minWidth: 0, px: 0 } : { justifyContent: 'flex-start', px: 1.75 };
+}
+
 /**
  * A rail's `primary` menu as ONE button at the top of the rail, opening an
  * anchored menu of its groups (FUT-3015).
@@ -82,11 +96,14 @@ export function RailCreateMenu({
   linkComponent,
   copy,
   testId,
+  compact = false,
 }: {
   menu: SectionNavMenu;
   linkComponent: ElementType | undefined;
   copy: SectionNavCopy;
   testId: string;
+  /** The button as its icon only — the label stays its name and its tooltip. */
+  compact?: boolean;
 }): React.JSX.Element {
   const theme = useTheme();
   const menuId = useId();
@@ -109,7 +126,7 @@ export function RailCreateMenu({
       <Button
         variant="contained"
         fullWidth
-        startIcon={menu.icon}
+        {...createButtonForm(menu, compact)}
         disabled={menu.disabled === true}
         aria-haspopup="menu"
         aria-expanded={open}
@@ -119,14 +136,15 @@ export function RailCreateMenu({
         sx={{
           my: 1,
           minHeight: rem(theme, 40),
-          justifyContent: 'flex-start',
-          px: 1.75,
+          ...(createButtonLayoutSx(compact) as object),
           fontWeight: 600,
           // A place in the rail reads in sentence case, like the rows under it.
           textTransform: 'none',
+          // The ring outside the filled button, where it can be seen.
+          '&.Mui-focusVisible': { outline: `${rem(theme, 2)} solid ${theme.palette.primary.main}`, outlineOffset: rem(theme, 2) },
         }}
       >
-        {menu.label}
+        {compact ? menu.icon : menu.label}
       </Button>
       <Menu
         id={menuId}

package/src/components/navigation/SectionNav/SectionNav.tsx

@@ -11,6 +11,9 @@ import type { SectionNavProps } from './SectionNav.types';
  * (`linkComponent`). The nav decides only how they are drawn: the order of the
  * bar's slots, the raised primary action, the sheets, the rail's sections.
  *
+ * `compact` draws either layout as icons only, a size down, for a host that
+ * folds its chrome; the labels stay the controls' names.
+ *
  * Which layout to use is the host's call too, because the host knows what
  * else is on screen: a bar next to a sidebar is two navigations competing for
  * one glance.
@@ -26,6 +29,7 @@ export function SectionNav({
   linkComponent,
   copy,
   dataTestId = 'section-nav',
+  compact = false,
 }: SectionNavProps): React.JSX.Element {
   if (layout === 'rail') {
     return (
@@ -39,6 +43,7 @@ export function SectionNav({
         linkComponent={linkComponent}
         copy={copy}
         dataTestId={dataTestId}
+        compact={compact}
       />
     );
   }
@@ -51,6 +56,7 @@ export function SectionNav({
       linkComponent={linkComponent}
       copy={copy}
       dataTestId={dataTestId}
+      compact={compact}
     />
   );
 }

package/src/components/navigation/SectionNav/SectionNav.types.ts

@@ -187,4 +187,16 @@ export interface SectionNavProps {
   copy: SectionNavCopy;
   /** Prefix for every `data-testid`. Defaults to `"section-nav"`. */
   dataTestId?: string;
+  /**
+   * Icons only, a size down — for a host that folds its chrome so the content
+   * gets the screen (a "focus mode"). Every label stays its control's
+   * accessible name and `title`; nothing is removed, only drawn smaller.
+   *
+   * `bar` — 48px instead of 60, the raised button 40px instead of 52, no
+   * captions; `sectionNavBarInset(theme, { compact: true })` is its inset.
+   * `rail` — every row, the way back and the create button as their icon only,
+   * headings out of sight, for a column 64px wide (the host sets the width).
+   * Defaults to `false`.
+   */
+  compact?: boolean;
 }

package/src/components/navigation/SectionNav/index.ts

@@ -1,5 +1,6 @@
 export { SectionNav } from './SectionNav';
 export { sectionNavBarInset } from './SectionNav.bar';
+export type { SectionNavBarOptions } from './SectionNav.bar';
 export { RaisedActionButton } from './SectionNav.primary';
 export type { RaisedActionButtonProps } from './SectionNav.primary';
 export type {

package/dist/chunk-LWQGIN2M.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/navigation/SectionNav/SectionNav.tsx"],"sourcesContent":["import { SectionNavBar } from './SectionNav.bar';\nimport { SectionNavRail } from './SectionNav.rail';\nimport type { SectionNavProps } from './SectionNav.types';\n\n/**\n * A section's own navigation — the handful of screens one kind of work moves\n * between — as a bottom bar on a phone or a rail on a wide screen.\n *\n * It knows no product. The host decides every destination, label, icon,\n * count and which one is current, and renders links through its own router\n * (`linkComponent`). The nav decides only how they are drawn: the order of the\n * bar's slots, the raised primary action, the sheets, the rail's sections.\n *\n * Which layout to use is the host's call too, because the host knows what\n * else is on screen: a bar next to a sidebar is two navigations competing for\n * one glance.\n */\nexport function SectionNav({\n  layout,\n  label,\n  destinations,\n  primary,\n  more,\n  back,\n  heading,\n  linkComponent,\n  copy,\n  dataTestId = 'section-nav',\n}: SectionNavProps): React.JSX.Element {\n  if (layout === 'rail') {\n    return (\n      <SectionNavRail\n        label={label}\n        destinations={destinations}\n        primary={primary}\n        more={more}\n        back={back}\n        heading={heading}\n        linkComponent={linkComponent}\n        copy={copy}\n        dataTestId={dataTestId}\n      />\n    );\n  }\n  return (\n    <SectionNavBar\n      label={label}\n      destinations={destinations}\n      primary={primary}\n      more={more}\n      linkComponent={linkComponent}\n      copy={copy}\n      dataTestId={dataTestId}\n    />\n  );\n}\n"],"mappings":";;;;;;;;AA+BM;AAdC,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACf,GAAuC;AACrC,MAAI,WAAW,QAAQ;AACrB,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,EAEJ;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/chunk-OBGUD2PG.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/navigation/SectionNav/SectionNav.rail.tsx"],"sourcesContent":["import Typography from '@mui/material/Typography/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport type { ElementType, ReactNode } from 'react';\n\nimport type { SectionNavCopy } from '../../../copy';\nimport { rem } from '../../../tokens/scales';\n\nimport { destinationState, isMenu } from './SectionNav.helpers';\nimport {\n  Box,\n  CONTROL_RESET,\n  CountedIcon,\n  NOT_LIVE,\n  SlotIcon,\n  controlProps,\n  destinationControl,\n  focusRing,\n} from './SectionNav.parts';\nimport { RailCreateMenu } from './SectionNav.railCreate';\nimport type {\n  SectionNavAction,\n  SectionNavBack,\n  SectionNavDestination,\n  SectionNavMenu,\n  SectionNavProps,\n} from './SectionNav.types';\nimport type { SectionNavBadge } from './SectionNav.types';\n\n/**\n * One rail row: icon, label, and the count at the far end.\n *\n * Destinations and menu entries draw the same row — in the rail there is room\n * for everything, so the difference between \"a place\" and \"an action\" is the\n * section it sits in, not its shape.\n *\n * `active` is the look; `current` is what `aria-current` reports, and is a\n * link's claim only — an action row that is ON says so with `aria-pressed`,\n * which arrives in `control`. Omitted, `current` follows `active`.\n */\nfunction RailRow({\n  label,\n  description,\n  icon,\n  count,\n  active,\n  current = active,\n  copy,\n  testId,\n  control,\n  loading = false,\n}: {\n  label: string;\n  description?: string;\n  icon: ReactNode;\n  count: SectionNavBadge | undefined;\n  active: boolean;\n  current?: boolean;\n  copy: SectionNavCopy;\n  testId: string;\n  control: Record<string, unknown>;\n  loading?: boolean;\n}): React.JSX.Element {\n  const theme = useTheme();\n  return (\n    <Box\n      {...control}\n      aria-current={current ? 'page' : undefined}\n      aria-busy={loading || undefined}\n      data-testid={testId}\n      sx={{\n        ...CONTROL_RESET,\n        ...focusRing(theme),\n        display: 'flex',\n        alignItems: 'center',\n        gap: 1.5,\n        width: '100%',\n        minHeight: rem(theme, 40),\n        px: 1.25,\n        py: 0.75,\n        borderRadius: 1,\n        textAlign: 'start',\n        color: active ? 'primary.main' : 'text.primary',\n        bgcolor: active ? 'action.selected' : 'transparent',\n        '&:hover': { bgcolor: active ? 'action.selected' : 'action.hover' },\n        '& svg': { color: 'primary.main', fontSize: rem(theme, 20) },\n        [NOT_LIVE]: { color: 'text.disabled', '& svg': { color: 'text.disabled' } },\n      }}\n    >\n      <CountedIcon\n        icon={<SlotIcon icon={icon} loading={loading} />}\n        count={count}\n        label={copy.badge}\n        attentionLabel={copy.attention}\n        testId={`${testId}-badge`}\n      />\n      <Box component=\"span\" sx={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>\n        <Typography component=\"span\" variant=\"body2\" sx={{ fontWeight: active ? 700 : 500 }}>\n          {label}\n        </Typography>\n        {description ? (\n          <Typography component=\"span\" variant=\"caption\" color=\"text.secondary\">\n            {description}\n          </Typography>\n        ) : null}\n      </Box>\n    </Box>\n  );\n}\n\n/** A heading between the rail's sections, in the sidebar's small-caps voice. */\nfunction RailHeading({ children }: { children: ReactNode }): React.JSX.Element {\n  return (\n    <Typography variant=\"overline\" color=\"text.secondary\" sx={{ px: 1.25, pt: 1.5, lineHeight: 1.6 }}>\n      {children}\n    </Typography>\n  );\n}\n\n/**\n * The `more` menu's groups, listed under its title — the rail has room for the\n * places it holds. A `disabled` menu has no trigger here to refuse, so every\n * row of it is inert instead. (`primary` folds behind one button instead —\n * `RailCreateMenu`.)\n */\nfunction RailMenu({\n  menu,\n  linkComponent,\n  copy,\n  testId,\n}: {\n  menu: SectionNavMenu;\n  linkComponent: ElementType | undefined;\n  copy: SectionNavCopy;\n  testId: string;\n}): React.JSX.Element {\n  return (\n    <Box component=\"section\" data-testid={testId} sx={{ display: 'flex', flexDirection: 'column', gap: 0.25 }}>\n      <RailHeading>{menu.title}</RailHeading>\n      {menu.groups.map((group) => (\n        <Box key={group.id} sx={{ display: 'flex', flexDirection: 'column', gap: 0.25 }}>\n          {group.title ? (\n            <Typography variant=\"caption\" color=\"text.secondary\" sx={{ px: 1.25, pt: 0.5 }}>\n              {group.title}\n            </Typography>\n          ) : null}\n          {group.entries.map((entry) => (\n            <RailRow\n              key={entry.id}\n              label={entry.label}\n              description={entry.description}\n              icon={entry.icon}\n              count={entry.badge}\n              active={entry.active === true}\n              copy={copy}\n              testId={entry.dataTestId ?? `${testId}-entry-${entry.id}`}\n              control={controlProps({\n                href: entry.href,\n                linkComponent,\n                inert: menu.disabled === true || entry.disabled === true,\n                onClick: () => entry.onSelect?.(),\n              })}\n            />\n          ))}\n        </Box>\n      ))}\n    </Box>\n  );\n}\n\n/** The way back out of the section, at the top of the rail. */\nfunction RailBack({\n  back,\n  linkComponent,\n  testId,\n}: {\n  back: SectionNavBack;\n  linkComponent: ElementType | undefined;\n  testId: string;\n}): React.JSX.Element {\n  const theme = useTheme();\n  return (\n    <Box\n      {...controlProps({ href: back.href, linkComponent })}\n      data-testid={testId}\n      sx={{\n        ...CONTROL_RESET,\n        ...focusRing(theme),\n        display: 'flex',\n        alignItems: 'center',\n        gap: 1,\n        px: 1.25,\n        py: 0.75,\n        mb: 0.5,\n        borderRadius: 1,\n        color: 'text.secondary',\n        '&:hover': { bgcolor: 'action.hover', color: 'text.primary' },\n        '& svg': { fontSize: rem(theme, 20) },\n      }}\n    >\n      {back.icon}\n      <Typography component=\"span\" variant=\"body2\" sx={{ fontWeight: 600 }}>\n        {back.label}\n      </Typography>\n    </Box>\n  );\n}\n\n/** A primary that ACTS, as one row: there is no sheet to list on a wide screen. */\nfunction RailAction({\n  action,\n  linkComponent,\n  copy,\n  testId,\n}: {\n  action: SectionNavAction;\n  linkComponent: ElementType | undefined;\n  copy: SectionNavCopy;\n  testId: string;\n}): React.JSX.Element {\n  return (\n    <RailRow\n      label={action.label}\n      icon={action.icon}\n      count={undefined}\n      active={false}\n      copy={copy}\n      testId={action.dataTestId ?? testId}\n      loading={action.loading === true}\n      control={controlProps({\n        href: undefined,\n        linkComponent,\n        inert: action.disabled === true,\n        busy: action.loading === true,\n        onClick: action.onSelect,\n      })}\n    />\n  );\n}\n\n/** A destination as a row: a link, or an action (a toggle when it carries `active`). */\nfunction RailDestination({\n  destination,\n  linkComponent,\n  copy,\n  testId,\n}: {\n  destination: SectionNavDestination;\n  linkComponent: ElementType | undefined;\n  copy: SectionNavCopy;\n  testId: string;\n}): React.JSX.Element {\n  const { current, lit } = destinationState(destination);\n  return (\n    <RailRow\n      label={destination.label}\n      icon={destination.icon}\n      count={destination.badge}\n      active={lit}\n      current={current}\n      copy={copy}\n      testId={testId}\n      loading={destination.loading === true}\n      control={destinationControl(destination, linkComponent, () => destination.onSelect?.())}\n    />\n  );\n}\n\n/**\n * The wide-screen layout: a vertical rail — the way back, the heading, a\n * `primary` menu as one button that opens it (FUT-3015), the destinations, a\n * `primary` action as a row, then `more` listed in full.\n *\n * It fills the column the host gives it and scrolls on its own, like the\n * sidebar it stands in for.\n */\nexport function SectionNavRail({\n  label,\n  destinations,\n  primary,\n  more,\n  back,\n  heading,\n  linkComponent,\n  copy,\n  dataTestId,\n}: Required<Pick<SectionNavProps, 'label' | 'destinations' | 'copy' | 'dataTestId'>> &\n  Pick<SectionNavProps, 'primary' | 'more' | 'back' | 'heading'> & {\n    linkComponent: ElementType | undefined;\n  }): React.JSX.Element {\n  return (\n    <Box\n      component=\"nav\"\n      aria-label={label}\n      data-testid={dataTestId}\n      sx={{\n        display: 'flex',\n        flexDirection: 'column',\n        gap: 0.25,\n        height: '100%',\n        overflowY: 'auto',\n        px: 1,\n        py: 1.5,\n        bgcolor: 'background.paper',\n      }}\n    >\n      {back ? <RailBack back={back} linkComponent={linkComponent} testId={`${dataTestId}-back`} /> : null}\n      {heading ? <RailHeading>{heading}</RailHeading> : null}\n      {isMenu(primary) ? (\n        <RailCreateMenu menu={primary} linkComponent={linkComponent} copy={copy} testId={`${dataTestId}-primary`} />\n      ) : null}\n      {destinations.map((destination) => (\n        <RailDestination\n          key={destination.id}\n          destination={destination}\n          linkComponent={linkComponent}\n          copy={copy}\n          testId={destination.dataTestId ?? `${dataTestId}-dest-${destination.id}`}\n        />\n      ))}\n      {primary && !isMenu(primary) ? (\n        <RailAction action={primary} linkComponent={linkComponent} copy={copy} testId={`${dataTestId}-primary`} />\n      ) : null}\n      {more ? <RailMenu menu={more} linkComponent={linkComponent} copy={copy} testId={`${dataTestId}-more`} /> : null}\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-VI2IXBOO.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/navigation/SectionNav/SectionNav.primary.tsx"],"sourcesContent":["import Typography from '@mui/material/Typography/index.js';\nimport { useTheme, type SxProps, type Theme } from '@mui/material/styles/index.js';\nimport type { ReactNode } from 'react';\n\nimport { rem } from '../../../tokens/scales';\n\nimport { Box, CONTROL_RESET, NOT_LIVE, SlotIcon, focusRing } from './SectionNav.parts';\n\nexport interface RaisedActionButtonProps {\n  /**\n   * The button's accessible name. Drawn under the button only when\n   * `captioned`; the caption is hidden from assistive tech, so the name is\n   * read once either way.\n   */\n  label: string;\n  icon: ReactNode;\n  onClick: () => void;\n  /**\n   * Whether what the button opens is open. Omit for a button that opens\n   * nothing (a plain action): it then carries no `aria-expanded` and its icon\n   * never turns.\n   */\n  open?: boolean;\n  /** The name it takes while `open` — the same control closes what it opened. REQUIRED with `open`. */\n  closeLabel?: string;\n  /**\n   * Draw `label` under the button. A bar of VERBS names the act it is for; a\n   * bar of places can leave its one action to the icon.\n   */\n  captioned?: boolean;\n  /** Dimmed and not operable: a native `disabled` button. */\n  disabled?: boolean;\n  /**\n   * A write it started is in flight: a spinner replaces the icon, it reports\n   * `aria-busy` and `aria-disabled`, and a tap is ignored. It stays focusable,\n   * so the keyboard does not lose its place while the write answers.\n   */\n  loading?: boolean;\n  dataTestId?: string;\n}\n\n/**\n * The raised round button in the middle of a bottom bar — the one control in\n * the row that is an ACTION rather than a place.\n *\n * Lifted half out of the bar so it reads as different in kind from the tabs\n * beside it. Uncaptioned it costs the row less width than a tab: that width is\n * what lets a bar keep four labelled tabs AND this button at 320px. A bar of\n * verbs captions it, naming the act under the button.\n *\n * `SectionNav` draws it for its `primary` menu. It is exported on its own for\n * a bar the host already draws — drop it between two tabs, in a flex row.\n */\nexport function RaisedActionButton({\n  label,\n  icon,\n  onClick,\n  open,\n  closeLabel,\n  captioned = false,\n  disabled = false,\n  loading = false,\n  dataTestId = 'raised-action',\n}: RaisedActionButtonProps): React.JSX.Element {\n  const theme = useTheme();\n  const expanded = open === true;\n  return (\n    <Box\n      sx={{\n        flex: 'none',\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'flex-start',\n        px: 0.5,\n      }}\n    >\n      <Box\n        component=\"button\"\n        type=\"button\"\n        {...raisedState({ onClick, disabled, loading })}\n        aria-label={expanded && closeLabel ? closeLabel : label}\n        aria-expanded={open}\n        data-testid={dataTestId}\n        sx={raisedSx(theme, expanded)}\n      >\n        <SlotIcon icon={icon} loading={loading} />\n      </Box>\n      {captioned ? <RaisedCaption label={label} inert={disabled || loading} /> : null}\n    </Box>\n  );\n}\n\n/**\n * The button's operability. Only `disabled` is native: an in-flight button\n * keeps its focus, reports `aria-busy` and `aria-disabled`, and drops the click.\n */\nfunction raisedState({\n  onClick,\n  disabled,\n  loading,\n}: {\n  onClick: () => void;\n  disabled: boolean;\n  loading: boolean;\n}): Record<string, unknown> {\n  const busy = loading && !disabled;\n  return {\n    onClick: busy ? undefined : onClick,\n    disabled,\n    'aria-disabled': busy ? 'true' : undefined,\n    'aria-busy': loading || undefined,\n  };\n}\n\n/**\n * The label under a captioned button. Hidden from assistive tech: the button\n * already carries the same words as its name, and reading them twice is noise.\n */\nfunction RaisedCaption({ label, inert }: { label: string; inert: boolean }): React.JSX.Element {\n  return (\n    <Typography\n      component=\"span\"\n      variant=\"caption\"\n      aria-hidden\n      sx={{ lineHeight: 1.3, mt: 0.25, whiteSpace: 'nowrap', color: inert ? 'text.disabled' : 'text.primary' }}\n    >\n      {label}\n    </Typography>\n  );\n}\n\n/** The round button: lifted half out of the bar, its icon turning while what it opened is open. */\nfunction raisedSx(theme: Theme, expanded: boolean): SxProps<Theme> {\n  const size = rem(theme, 52);\n  return {\n    ...CONTROL_RESET,\n    ...focusRing(theme),\n    width: size,\n    height: size,\n    // Lifted half out of the bar: the one control that is not a place.\n    marginTop: rem(theme, -18),\n    borderRadius: '50%',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    bgcolor: 'primary.main',\n    color: 'primary.contrastText',\n    boxShadow: theme.shadows[6],\n    [NOT_LIVE]: { cursor: 'default', bgcolor: 'action.disabledBackground', color: 'text.disabled', boxShadow: 'none' },\n    '& svg': {\n      fontSize: rem(theme, 26),\n      transition: theme.transitions.create('transform', { duration: theme.transitions.duration.shorter }),\n      transform: expanded ? 'rotate(45deg)' : 'none',\n    },\n    '@media (prefers-reduced-motion: reduce)': { '& svg': { transition: 'none' } },\n  } as SxProps<Theme>;\n}\n"],"mappings":";;;;;;;;;;;;AAAA,OAAO,gBAAgB;AACvB,SAAS,gBAA0C;AAkE/C,SAmBI,KAnBJ;AAdG,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,UAAU;AAAA,EACV,aAAa;AACf,GAA+C;AAC7C,QAAM,QAAQ,SAAS;AACvB,QAAM,WAAW,SAAS;AAC1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,QACF,MAAM;AAAA,QACN,SAAS;AAAA,QACT,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,IAAI;AAAA,MACN;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YACJ,GAAG,YAAY,EAAE,SAAS,UAAU,QAAQ,CAAC;AAAA,YAC9C,cAAY,YAAY,aAAa,aAAa;AAAA,YAClD,iBAAe;AAAA,YACf,eAAa;AAAA,YACb,IAAI,SAAS,OAAO,QAAQ;AAAA,YAE5B,8BAAC,YAAS,MAAY,SAAkB;AAAA;AAAA,QAC1C;AAAA,QACC,YAAY,oBAAC,iBAAc,OAAc,OAAO,YAAY,SAAS,IAAK;AAAA;AAAA;AAAA,EAC7E;AAEJ;AAMA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,GAI4B;AAC1B,QAAM,OAAO,WAAW,CAAC;AACzB,SAAO;AAAA,IACL,SAAS,OAAO,SAAY;AAAA,IAC5B;AAAA,IACA,iBAAiB,OAAO,SAAS;AAAA,IACjC,aAAa,WAAW;AAAA,EAC1B;AACF;AAMA,SAAS,cAAc,EAAE,OAAO,MAAM,GAAyD;AAC7F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,SAAQ;AAAA,MACR,eAAW;AAAA,MACX,IAAI,EAAE,YAAY,KAAK,IAAI,MAAM,YAAY,UAAU,OAAO,QAAQ,kBAAkB,eAAe;AAAA,MAEtG;AAAA;AAAA,EACH;AAEJ;AAGA,SAAS,SAAS,OAAc,UAAmC;AACjE,QAAM,OAAO,IAAI,OAAO,EAAE;AAC1B,SAAO;AAAA,IACL,GAAG;AAAA,IACH,GAAG,UAAU,KAAK;AAAA,IAClB,OAAO;AAAA,IACP,QAAQ;AAAA;AAAA,IAER,WAAW,IAAI,OAAO,GAAG;AAAA,IACzB,cAAc;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,SAAS;AAAA,IACT,OAAO;AAAA,IACP,WAAW,MAAM,QAAQ,CAAC;AAAA,IAC1B,CAAC,QAAQ,GAAG,EAAE,QAAQ,WAAW,SAAS,6BAA6B,OAAO,iBAAiB,WAAW,OAAO;AAAA,IACjH,SAAS;AAAA,MACP,UAAU,IAAI,OAAO,EAAE;AAAA,MACvB,YAAY,MAAM,YAAY,OAAO,aAAa,EAAE,UAAU,MAAM,YAAY,SAAS,QAAQ,CAAC;AAAA,MAClG,WAAW,WAAW,kBAAkB;AAAA,IAC1C;AAAA,IACA,2CAA2C,EAAE,SAAS,EAAE,YAAY,OAAO,EAAE;AAAA,EAC/E;AACF;","names":[]}

package/dist/chunk-WP7KPWCP.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/navigation/SectionNav/SectionNav.parts.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport type { SxProps, Theme } from '@mui/material/styles/index.js';\nimport type { ElementType, ReactNode } from 'react';\n\nimport { rem } from '../../../tokens/scales';\nimport { Badge } from '../../data-display/Badge';\n\nimport { shownCount } from './SectionNav.helpers';\nimport type { SectionNavBadge, SectionNavDestination } from './SectionNav.types';\n\n/**\n * An icon with its count on the shoulder.\n *\n * Quiet to assistive tech on change: the count moves on a poll, and a control\n * that announces itself every minute is noise. Its NAME carries the number,\n * so it is read when the control is.\n */\nexport function CountedIcon({\n  icon,\n  count,\n  label,\n  testId,\n  attentionLabel,\n}: {\n  icon: ReactNode;\n  count: SectionNavBadge | undefined;\n  label: (count: number) => string;\n  testId: string;\n  /** The \"!\" badge's accessible name (`SectionNavCopy.attention`). */\n  attentionLabel?: string;\n}): React.JSX.Element {\n  if (count === '!') {\n    return (\n      <Badge content=\"!\" variant=\"count\" color=\"warning\" aria-label={attentionLabel ?? label(1)} aria-live=\"off\" data-testid={testId}>\n        {icon}\n      </Badge>\n    );\n  }\n  const shown = shownCount(count);\n  if (shown === undefined) return <>{icon}</>;\n  return (\n    // The library's corner count, in the warning role the sidebar's pill is\n    // drawn from.\n    <Badge\n      content={shown}\n      variant=\"count\"\n      color=\"warning\"\n      max={99}\n      aria-label={label(shown)}\n      aria-live=\"off\"\n      data-testid={testId}\n    >\n      {icon}\n    </Badge>\n  );\n}\n\n/** The keyboard ring every control in the nav draws, in the theme's own colour. */\nexport function focusRing(theme: Theme): SxProps<Theme> {\n  return {\n    '&:focus-visible': {\n      outline: `${rem(theme, 2)} solid ${theme.palette.primary.main}`,\n      outlineOffset: rem(theme, -2),\n    },\n  };\n}\n\n/**\n * The element an entry or destination renders as: the host's link for an\n * `href`, a button for an `onSelect`.\n *\n * Returned as props for a `Box`, so the control stays ONE interactive\n * element — never a button wrapped around a link. Whatever it would lead to,\n * a control that is not live is a BUTTON: a link cannot be disabled, and one\n * that looks dimmed but still navigates is the lie this rules out.\n *\n * - `inert` — a native `disabled` button: no focus, no click.\n * - `busy` — a write is in flight: `aria-disabled`, still focusable, and the\n *   click is dropped, so the keyboard keeps its place until the write answers.\n * - `dimmed` — `aria-disabled`, still focusable, and the click STILL runs, so\n *   the host can explain why the act cannot be done now.\n */\nexport function controlProps({\n  href,\n  onClick,\n  linkComponent,\n  inert = false,\n  busy = false,\n  dimmed = false,\n}: {\n  href: string | undefined;\n  onClick?: () => void;\n  linkComponent: ElementType | undefined;\n  inert?: boolean;\n  busy?: boolean;\n  dimmed?: boolean;\n}): Record<string, unknown> {\n  if (inert) return { component: 'button', type: 'button', disabled: true };\n  if (busy) return { component: 'button', type: 'button', 'aria-disabled': 'true' };\n  if (dimmed) return { component: 'button', type: 'button', 'aria-disabled': 'true', onClick };\n  if (href !== undefined) return { component: linkComponent ?? 'a', href, onClick };\n  return { component: 'button', type: 'button', onClick };\n}\n\n/**\n * A destination's control: `controlProps` from its own state, plus\n * `aria-pressed` when it is an action slot that is a toggle. A link reports\n * where the viewer is through `aria-current` instead — the row draws that.\n */\nexport function destinationControl(\n  destination: SectionNavDestination,\n  linkComponent: ElementType | undefined,\n  onClick: () => void,\n): Record<string, unknown> {\n  return {\n    ...controlProps({\n      href: destination.href,\n      linkComponent,\n      inert: destination.disabled === true,\n      busy: destination.loading === true,\n      dimmed: destination.dimmed === true,\n      onClick,\n    }),\n    'aria-pressed': destination.href === undefined ? destination.active : undefined,\n  };\n}\n\n/**\n * The selector for a control drawn as not live: natively disabled, or\n * `aria-disabled` (in flight, or dimmed) and still focusable.\n */\nexport const NOT_LIVE = '&:disabled, &[aria-disabled=\"true\"]';\n\n/**\n * The icon, or the spinner that stands in for it while the slot's write is in\n * flight — the same box, so the label under it does not move.\n */\nexport function SlotIcon({ icon, loading }: { icon: ReactNode; loading: boolean }): React.JSX.Element {\n  if (!loading) return <>{icon}</>;\n  return <CircularProgress size=\"1em\" color=\"inherit\" thickness={5} data-testid=\"section-nav-spinner\" />;\n}\n\n/** The base reset every clickable in the nav shares: no underline, no button chrome. */\nexport const CONTROL_RESET = {\n  border: 0,\n  background: 'none',\n  font: 'inherit',\n  color: 'inherit',\n  textDecoration: 'none',\n  cursor: 'pointer',\n  margin: 0,\n  [NOT_LIVE]: { cursor: 'default' },\n} as const;\n\nexport { Box };\n"],"mappings":";;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,sBAAsB;AAiCvB,SAM4B,UAN5B;AAhBC,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOsB;AACpB,MAAI,UAAU,KAAK;AACjB,WACE,oBAAC,SAAM,SAAQ,KAAI,SAAQ,SAAQ,OAAM,WAAU,cAAY,kBAAkB,MAAM,CAAC,GAAG,aAAU,OAAM,eAAa,QACrH,gBACH;AAAA,EAEJ;AACA,QAAM,QAAQ,WAAW,KAAK;AAC9B,MAAI,UAAU,OAAW,QAAO,gCAAG,gBAAK;AACxC;AAAA;AAAA;AAAA,IAGE;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,SAAQ;AAAA,QACR,OAAM;AAAA,QACN,KAAK;AAAA,QACL,cAAY,MAAM,KAAK;AAAA,QACvB,aAAU;AAAA,QACV,eAAa;AAAA,QAEZ;AAAA;AAAA,IACH;AAAA;AAEJ;AAGO,SAAS,UAAU,OAA8B;AACtD,SAAO;AAAA,IACL,mBAAmB;AAAA,MACjB,SAAS,GAAG,IAAI,OAAO,CAAC,CAAC,UAAU,MAAM,QAAQ,QAAQ,IAAI;AAAA,MAC7D,eAAe,IAAI,OAAO,EAAE;AAAA,IAC9B;AAAA,EACF;AACF;AAiBO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,SAAS;AACX,GAO4B;AAC1B,MAAI,MAAO,QAAO,EAAE,WAAW,UAAU,MAAM,UAAU,UAAU,KAAK;AACxE,MAAI,KAAM,QAAO,EAAE,WAAW,UAAU,MAAM,UAAU,iBAAiB,OAAO;AAChF,MAAI,OAAQ,QAAO,EAAE,WAAW,UAAU,MAAM,UAAU,iBAAiB,QAAQ,QAAQ;AAC3F,MAAI,SAAS,OAAW,QAAO,EAAE,WAAW,iBAAiB,KAAK,MAAM,QAAQ;AAChF,SAAO,EAAE,WAAW,UAAU,MAAM,UAAU,QAAQ;AACxD;AAOO,SAAS,mBACd,aACA,eACA,SACyB;AACzB,SAAO;AAAA,IACL,GAAG,aAAa;AAAA,MACd,MAAM,YAAY;AAAA,MAClB;AAAA,MACA,OAAO,YAAY,aAAa;AAAA,MAChC,MAAM,YAAY,YAAY;AAAA,MAC9B,QAAQ,YAAY,WAAW;AAAA,MAC/B;AAAA,IACF,CAAC;AAAA,IACD,gBAAgB,YAAY,SAAS,SAAY,YAAY,SAAS;AAAA,EACxE;AACF;AAMO,IAAM,WAAW;AAMjB,SAAS,SAAS,EAAE,MAAM,QAAQ,GAA6D;AACpG,MAAI,CAAC,QAAS,QAAO,gCAAG,gBAAK;AAC7B,SAAO,oBAAC,oBAAiB,MAAK,OAAM,OAAM,WAAU,WAAW,GAAG,eAAY,uBAAsB;AACtG;AAGO,IAAM,gBAAgB;AAAA,EAC3B,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,CAAC,QAAQ,GAAG,EAAE,QAAQ,UAAU;AAClC;","names":[]}

package/dist/chunk-WY7FR7I4.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/navigation/SectionNav/SectionNav.railCreate.tsx"],"sourcesContent":["import Button from '@mui/material/Button/index.js';\nimport ListItemIcon from '@mui/material/ListItemIcon/index.js';\nimport ListItemText from '@mui/material/ListItemText/index.js';\nimport ListSubheader from '@mui/material/ListSubheader/index.js';\nimport Menu from '@mui/material/Menu/index.js';\nimport MenuItem from '@mui/material/MenuItem/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport { useId, useState, type ElementType, type ReactNode } from 'react';\n\nimport type { SectionNavCopy } from '../../../copy';\nimport { rem } from '../../../tokens/scales';\n\nimport { CountedIcon } from './SectionNav.parts';\nimport type { SectionNavEntry, SectionNavMenu } from './SectionNav.types';\n\n/** One entry of the open menu: a link through the host's router, or an act. */\nfunction entryItem(\n  groupId: string,\n  entry: SectionNavEntry,\n  linkComponent: ElementType | undefined,\n  copy: SectionNavCopy,\n  testId: string,\n  close: () => void,\n): ReactNode {\n  const link =\n    entry.href === undefined || entry.disabled === true\n      ? {}\n      : { component: linkComponent ?? 'a', href: entry.href };\n  const itemTestId = entry.dataTestId ?? `${testId}-entry-${entry.id}`;\n  return (\n    <MenuItem\n      key={`${groupId}:${entry.id}`}\n      {...link}\n      disabled={entry.disabled === true}\n      selected={entry.active === true}\n      aria-current={entry.active === true ? 'page' : undefined}\n      data-testid={itemTestId}\n      onClick={() => {\n        entry.onSelect?.();\n        close();\n      }}\n      sx={{ gap: 1.5, py: 1, whiteSpace: 'normal' }}\n    >\n      <ListItemIcon sx={{ minWidth: 0, color: 'primary.main' }}>\n        <CountedIcon\n          icon={entry.icon}\n          count={entry.badge}\n          label={copy.badge}\n          attentionLabel={copy.attention}\n          testId={`${itemTestId}-badge`}\n        />\n      </ListItemIcon>\n      <ListItemText\n        primary={entry.label}\n        secondary={entry.description}\n        slotProps={{\n          primary: { variant: 'body2', fontWeight: 500 },\n          secondary: { variant: 'caption' },\n        }}\n        sx={{ my: 0 }}\n      />\n    </MenuItem>\n  );\n}\n\n/**\n * A rail's `primary` menu as ONE button at the top of the rail, opening an\n * anchored menu of its groups (FUT-3015).\n *\n * The rail lists `more` in full, but a create menu listed that way costs a\n * heading and a two-line row per entry above the fold, for acts a person takes\n * once in a while. Folded behind '+ Criar' it costs one row. The button\n * carries the menu's `label`; the open menu is named by its `title`.\n *\n * `MenuList` skips the group subheaders when the keyboard moves, and the\n * popover hands focus back to the button when it closes on Escape or an\n * outside click. Choosing an entry closes it too, and the entry's link or act\n * takes over.\n */\nexport function RailCreateMenu({\n  menu,\n  linkComponent,\n  copy,\n  testId,\n}: {\n  menu: SectionNavMenu;\n  linkComponent: ElementType | undefined;\n  copy: SectionNavCopy;\n  testId: string;\n}): React.JSX.Element {\n  const theme = useTheme();\n  const menuId = useId();\n  const [anchor, setAnchor] = useState<HTMLElement | null>(null);\n  const open = anchor !== null;\n  const close = (): void => setAnchor(null);\n  const paperTestId: Record<string, string> = { 'data-testid': `${testId}-menu` };\n  // One flat list: MUI's MenuList walks its direct children, so a group's\n  // subheader and entries cannot sit inside a wrapper.\n  const items: ReactNode[] = menu.groups.flatMap((group) => [\n    group.title ? (\n      <ListSubheader key={`${group.id}-title`} disableSticky sx={{ lineHeight: 2.5, bgcolor: 'transparent' }}>\n        {group.title}\n      </ListSubheader>\n    ) : null,\n    ...group.entries.map((entry) => entryItem(group.id, entry, linkComponent, copy, testId, close)),\n  ]);\n  return (\n    <>\n      <Button\n        variant=\"contained\"\n        fullWidth\n        startIcon={menu.icon}\n        disabled={menu.disabled === true}\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n        aria-controls={open ? menuId : undefined}\n        data-testid={menu.dataTestId ?? testId}\n        onClick={(event) => setAnchor(event.currentTarget)}\n        sx={{\n          my: 1,\n          minHeight: rem(theme, 40),\n          justifyContent: 'flex-start',\n          px: 1.75,\n          fontWeight: 600,\n          // A place in the rail reads in sentence case, like the rows under it.\n          textTransform: 'none',\n        }}\n      >\n        {menu.label}\n      </Button>\n      <Menu\n        id={menuId}\n        anchorEl={anchor}\n        open={open}\n        onClose={close}\n        variant=\"menu\"\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}\n        transformOrigin={{ vertical: 'top', horizontal: 'left' }}\n        slotProps={{\n          list: { 'aria-label': menu.title },\n          // A data attribute is not a declared slot prop, so it rides a spread.\n          paper: { ...paperTestId, sx: { minWidth: rem(theme, 260), maxWidth: rem(theme, 340) } },\n        }}\n      >\n        {items}\n      </Menu>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-XS4NQ6LD.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/navigation/SectionNav/SectionNav.bar.tsx"],"sourcesContent":["import Typography from '@mui/material/Typography/index.js';\nimport { alpha, useTheme, type SxProps, type Theme } from '@mui/material/styles/index.js';\nimport { useState, type ElementType, type ReactNode } from 'react';\n\nimport type { SectionNavCopy } from '../../../copy';\nimport { stackedOverlayZIndex } from '../../../tokens/layers';\nimport { rem } from '../../../tokens/scales';\n\nimport { barSlots, destinationState, isMenu, menuActive, menuCount, type BarSlot } from './SectionNav.helpers';\nimport {\n  Box,\n  CONTROL_RESET,\n  CountedIcon,\n  NOT_LIVE,\n  SlotIcon,\n  controlProps,\n  destinationControl,\n  focusRing,\n} from './SectionNav.parts';\nimport { RaisedActionButton } from './SectionNav.primary';\nimport { SectionNavSheet } from './SectionNav.sheet';\nimport type { SectionNavAction, SectionNavBadge, SectionNavDestination, SectionNavMenu, SectionNavProps } from './SectionNav.types';\n\n/** Which of the bar's two menus is open, if any. */\ntype OpenMenu = 'primary' | 'more' | null;\n\n/** The bar's height above the safe area — tall enough for an icon over a label. */\nconst barHeight = (theme: Parameters<typeof rem>[0]): string => rem(theme, 60);\n\n/**\n * The bar's full height on screen, the safe area included — where its sheets\n * stop, and what a host reserves at the foot of its content so nothing it\n * floats (a toast, a receipt) lands under the bar.\n */\nexport function sectionNavBarInset(theme: Parameters<typeof rem>[0]): string {\n  return `calc(${barHeight(theme)} + env(safe-area-inset-bottom))`;\n}\n\n/**\n * One slot: icon over label, a count on the icon.\n *\n * `current` is the page the viewer is on and is what `aria-current` reports —\n * a link's claim only; an action slot that is ON says so with `aria-pressed`,\n * which arrives in `control`. `lit` is only how the slot looks, and goes out\n * while a sheet is open so the bar shows where the thumb is. Opening a sheet\n * is `aria-expanded`'s to say.\n *\n * A destination is a link or an action; the \"more\" slot is a button that\n * opens its sheet. Either way the whole slot is the target, so a thumb landing\n * on the label lands on the control. A `disabled` slot is a disabled button,\n * dimmed — the act is still where the hand expects it. A `loading` or\n * `dimmed` slot is drawn the same and stays focusable (`aria-disabled`).\n */\nfunction Slot({\n  label,\n  icon,\n  count,\n  current,\n  lit,\n  copy,\n  testId,\n  control,\n  expanded,\n  loading = false,\n}: {\n  label: string;\n  icon: ReactNode;\n  count: SectionNavBadge | undefined;\n  current: boolean;\n  lit: boolean;\n  copy: SectionNavCopy;\n  testId: string;\n  control: Record<string, unknown>;\n  expanded?: boolean;\n  loading?: boolean;\n}): React.JSX.Element {\n  const theme = useTheme();\n  return (\n    <Box\n      {...control}\n      aria-current={current ? 'page' : undefined}\n      aria-expanded={expanded}\n      aria-busy={loading || undefined}\n      data-lit={lit ? 'true' : undefined}\n      data-testid={testId}\n      sx={slotSx(theme, lit)}\n    >\n      <CountedIcon\n        icon={\n          <Box component=\"span\" data-slot-pill=\"\" sx={pillSx(theme)}>\n            <SlotIcon icon={icon} loading={loading} />\n          </Box>\n        }\n        count={count}\n        label={copy.badge}\n        attentionLabel={copy.attention}\n        testId={`${testId}-badge`}\n      />\n      <Typography\n        component=\"span\"\n        variant=\"caption\"\n        sx={{\n          maxWidth: '100%',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n          whiteSpace: 'nowrap',\n          lineHeight: 1.3,\n          fontWeight: lit ? 700 : 600,\n          color: lit ? 'text.primary' : 'inherit',\n        }}\n      >\n        {label}\n      </Typography>\n    </Box>\n  );\n}\n\n/** The pill behind a slot's icon — tinted while the slot is lit. */\nfunction pillSx(theme: Theme): SxProps<Theme> {\n  return {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    px: 1.75,\n    py: 0.25,\n    borderRadius: rem(theme, 999),\n    transition: theme.transitions.create('background-color', { duration: theme.transitions.duration.shorter }),\n  };\n}\n\n/** A slot's look: icon over label, a pill behind the lit icon, dimmed when disabled. */\nfunction slotSx(theme: Theme, lit: boolean): SxProps<Theme> {\n  return {\n    ...CONTROL_RESET,\n    ...focusRing(theme),\n    flex: 1,\n    minWidth: 0,\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: 0.25,\n    position: 'relative',\n    color: lit ? 'primary.main' : 'text.secondary',\n    // The current slot is marked by more than its colour: a tinted pill behind\n    // its icon and a bolder label, so the state survives a colour-blind reading.\n    '&[data-lit=\"true\"] [data-slot-pill]': { bgcolor: alpha(theme.palette.primary.main, 0.14) },\n    '& svg': { fontSize: rem(theme, 22) },\n    [NOT_LIVE]: { color: 'text.disabled' },\n  } as SxProps<Theme>;\n}\n\n/** What every slot kind is handed: the bar's open state and how to change it. */\ninterface SlotContext {\n  open: OpenMenu;\n  toggle: (menu: Exclude<OpenMenu, null>) => void;\n  close: () => void;\n  linkComponent: ElementType | undefined;\n  copy: SectionNavCopy;\n  dataTestId: string;\n}\n\n/** The raised button: an action runs on tap; a menu opens its sheet. */\nfunction PrimarySlot({\n  primary,\n  context,\n}: {\n  primary: SectionNavMenu | SectionNavAction;\n  context: SlotContext;\n}): React.JSX.Element {\n  const testId = primary.dataTestId ?? `${context.dataTestId}-primary`;\n  if (!isMenu(primary)) {\n    return (\n      <RaisedActionButton\n        label={primary.label}\n        icon={primary.icon}\n        captioned\n        disabled={primary.disabled}\n        loading={primary.loading}\n        dataTestId={testId}\n        onClick={() => {\n          context.close();\n          primary.onSelect();\n        }}\n      />\n    );\n  }\n  return (\n    <RaisedActionButton\n      label={primary.label}\n      icon={primary.icon}\n      open={context.open === 'primary'}\n      closeLabel={context.copy.close}\n      disabled={primary.disabled}\n      dataTestId={testId}\n      onClick={() => context.toggle('primary')}\n    />\n  );\n}\n\n/** The \"more\" slot: a button that opens its sheet, carrying its entries' counts. */\nfunction MoreSlot({ more, context }: { more: SectionNavMenu; context: SlotContext }): React.JSX.Element {\n  const { open } = context;\n  return (\n    <Slot\n      label={more.label}\n      icon={more.icon}\n      count={menuCount(more)}\n      current={false}\n      lit={open === 'more' || (open === null && menuActive(more))}\n      expanded={open === 'more'}\n      copy={context.copy}\n      testId={more.dataTestId ?? `${context.dataTestId}-more`}\n      control={controlProps({\n        href: undefined,\n        linkComponent: context.linkComponent,\n        inert: more.disabled === true,\n        onClick: () => context.toggle('more'),\n      })}\n    />\n  );\n}\n\n/** A destination: a link, or an action slot (a toggle when it carries `active`). */\nfunction DestinationSlot({\n  destination,\n  context,\n}: {\n  destination: SectionNavDestination;\n  context: SlotContext;\n}): React.JSX.Element {\n  const { current, lit } = destinationState(destination);\n  return (\n    <Slot\n      label={destination.label}\n      icon={destination.icon}\n      count={destination.badge}\n      current={current}\n      lit={context.open === null && lit}\n      copy={context.copy}\n      testId={destination.dataTestId ?? `${context.dataTestId}-dest-${destination.id}`}\n      loading={destination.loading === true}\n      control={destinationControl(destination, context.linkComponent, () => {\n        context.close();\n        destination.onSelect?.();\n      })}\n    />\n  );\n}\n\n/** One slot of the bar, whichever kind it is. */\nfunction BarSlotView({\n  slot,\n  primary,\n  more,\n  context,\n}: {\n  slot: BarSlot;\n  primary: SectionNavMenu | SectionNavAction | undefined;\n  more: SectionNavMenu | undefined;\n  context: SlotContext;\n}): React.JSX.Element | null {\n  if (slot.kind === 'primary') return primary ? <PrimarySlot primary={primary} context={context} /> : null;\n  if (slot.kind === 'more') return more ? <MoreSlot more={more} context={context} /> : null;\n  return <DestinationSlot destination={slot.destination} context={context} />;\n}\n\n/** The phone layout: a bottom bar, with its menus as bottom sheets. */\nexport function SectionNavBar({\n  label,\n  destinations,\n  primary,\n  more,\n  linkComponent,\n  copy,\n  dataTestId,\n}: Required<Pick<SectionNavProps, 'label' | 'destinations' | 'copy' | 'dataTestId'>> &\n  Pick<SectionNavProps, 'primary' | 'more'> & { linkComponent: ElementType | undefined }): React.JSX.Element {\n  const sheetMenu = isMenu(primary) ? primary : undefined;\n  const theme = useTheme();\n  const [open, setOpen] = useState<OpenMenu>(null);\n  const toggle = (menu: Exclude<OpenMenu, null>): void => setOpen((current) => (current === menu ? null : menu));\n  const close = (): void => setOpen(null);\n\n  return (\n    <>\n      <Box\n        component=\"nav\"\n        aria-label={label}\n        data-testid={dataTestId}\n        sx={{\n          flex: 'none',\n          display: 'flex',\n          alignItems: 'stretch',\n          boxSizing: 'border-box',\n          height: sectionNavBarInset(theme),\n          paddingBottom: 'env(safe-area-inset-bottom)',\n          borderTop: `1px solid ${theme.palette.divider}`,\n          bgcolor: 'background.paper',\n          // Above the backdrop ONLY while one of its own sheets is open, so the\n          // primary button can close what it opened. Raised all the time it\n          // would sit over every dialog the page opens, and on a small phone a\n          // dialog's own footer is exactly where the bar is. `stackedOverlayZIndex`,\n          // not `zIndex.modal + 1`: a host lifting a bottom Drawer clear of a\n          // stacked sheet catches this bar's OWN sheets too.\n          position: 'relative',\n          zIndex: open === null ? 'auto' : stackedOverlayZIndex(theme) + 1,\n        }}\n      >\n        {barSlots(destinations, more !== undefined, primary !== undefined).map((slot) => (\n          <BarSlotView\n            key={slot.kind === 'destination' ? `dest-${slot.destination.id}` : `menu-${slot.kind}`}\n            slot={slot}\n            primary={primary}\n            more={more}\n            context={{ open, toggle, close, linkComponent, copy, dataTestId }}\n          />\n        ))}\n      </Box>\n      {sheetMenu ? (\n        <SectionNavSheet\n          menu={sheetMenu}\n          open={open === 'primary'}\n          onClose={close}\n          linkComponent={linkComponent}\n          copy={copy}\n          testId={`${dataTestId}-primary-sheet`}\n          bottomOffset={sectionNavBarInset(theme)}\n        />\n      ) : null}\n      {more ? (\n        <SectionNavSheet\n          menu={more}\n          open={open === 'more'}\n          onClose={close}\n          linkComponent={linkComponent}\n          copy={copy}\n          testId={`${dataTestId}-more-sheet`}\n          bottomOffset={sectionNavBarInset(theme)}\n        />\n      ) : null}\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,gBAAgB;AACvB,SAAS,OAAO,gBAA0C;AAC1D,SAAS,gBAAkD;AA4EvD,SA+MA,UAnMQ,KAZR;AAnDJ,IAAM,YAAY,CAAC,UAA6C,IAAI,OAAO,EAAE;AAOtE,SAAS,mBAAmB,OAA0C;AAC3E,SAAO,QAAQ,UAAU,KAAK,CAAC;AACjC;AAiBA,SAAS,KAAK;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AACZ,GAWsB;AACpB,QAAM,QAAQ,SAAS;AACvB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,gBAAc,UAAU,SAAS;AAAA,MACjC,iBAAe;AAAA,MACf,aAAW,WAAW;AAAA,MACtB,YAAU,MAAM,SAAS;AAAA,MACzB,eAAa;AAAA,MACb,IAAI,OAAO,OAAO,GAAG;AAAA,MAErB;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MACE,oBAAC,OAAI,WAAU,QAAO,kBAAe,IAAG,IAAI,OAAO,KAAK,GACtD,8BAAC,YAAS,MAAY,SAAkB,GAC1C;AAAA,YAEF;AAAA,YACA,OAAO,KAAK;AAAA,YACZ,gBAAgB,KAAK;AAAA,YACrB,QAAQ,GAAG,MAAM;AAAA;AAAA,QACnB;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAQ;AAAA,YACR,IAAI;AAAA,cACF,UAAU;AAAA,cACV,UAAU;AAAA,cACV,cAAc;AAAA,cACd,YAAY;AAAA,cACZ,YAAY;AAAA,cACZ,YAAY,MAAM,MAAM;AAAA,cACxB,OAAO,MAAM,iBAAiB;AAAA,YAChC;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAGA,SAAS,OAAO,OAA8B;AAC5C,SAAO;AAAA,IACL,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,cAAc,IAAI,OAAO,GAAG;AAAA,IAC5B,YAAY,MAAM,YAAY,OAAO,oBAAoB,EAAE,UAAU,MAAM,YAAY,SAAS,QAAQ,CAAC;AAAA,EAC3G;AACF;AAGA,SAAS,OAAO,OAAc,KAA8B;AAC1D,SAAO;AAAA,IACL,GAAG;AAAA,IACH,GAAG,UAAU,KAAK;AAAA,IAClB,MAAM;AAAA,IACN,UAAU;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,KAAK;AAAA,IACL,UAAU;AAAA,IACV,OAAO,MAAM,iBAAiB;AAAA;AAAA;AAAA,IAG9B,uCAAuC,EAAE,SAAS,MAAM,MAAM,QAAQ,QAAQ,MAAM,IAAI,EAAE;AAAA,IAC1F,SAAS,EAAE,UAAU,IAAI,OAAO,EAAE,EAAE;AAAA,IACpC,CAAC,QAAQ,GAAG,EAAE,OAAO,gBAAgB;AAAA,EACvC;AACF;AAaA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AACF,GAGsB;AACpB,QAAM,SAAS,QAAQ,cAAc,GAAG,QAAQ,UAAU;AAC1D,MAAI,CAAC,OAAO,OAAO,GAAG;AACpB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,QAAQ;AAAA,QACf,MAAM,QAAQ;AAAA,QACd,WAAS;AAAA,QACT,UAAU,QAAQ;AAAA,QAClB,SAAS,QAAQ;AAAA,QACjB,YAAY;AAAA,QACZ,SAAS,MAAM;AACb,kBAAQ,MAAM;AACd,kBAAQ,SAAS;AAAA,QACnB;AAAA;AAAA,IACF;AAAA,EAEJ;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,QAAQ;AAAA,MACf,MAAM,QAAQ;AAAA,MACd,MAAM,QAAQ,SAAS;AAAA,MACvB,YAAY,QAAQ,KAAK;AAAA,MACzB,UAAU,QAAQ;AAAA,MAClB,YAAY;AAAA,MACZ,SAAS,MAAM,QAAQ,OAAO,SAAS;AAAA;AAAA,EACzC;AAEJ;AAGA,SAAS,SAAS,EAAE,MAAM,QAAQ,GAAsE;AACtG,QAAM,EAAE,KAAK,IAAI;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,KAAK;AAAA,MACZ,MAAM,KAAK;AAAA,MACX,OAAO,UAAU,IAAI;AAAA,MACrB,SAAS;AAAA,MACT,KAAK,SAAS,UAAW,SAAS,QAAQ,WAAW,IAAI;AAAA,MACzD,UAAU,SAAS;AAAA,MACnB,MAAM,QAAQ;AAAA,MACd,QAAQ,KAAK,cAAc,GAAG,QAAQ,UAAU;AAAA,MAChD,SAAS,aAAa;AAAA,QACpB,MAAM;AAAA,QACN,eAAe,QAAQ;AAAA,QACvB,OAAO,KAAK,aAAa;AAAA,QACzB,SAAS,MAAM,QAAQ,OAAO,MAAM;AAAA,MACtC,CAAC;AAAA;AAAA,EACH;AAEJ;AAGA,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA;AACF,GAGsB;AACpB,QAAM,EAAE,SAAS,IAAI,IAAI,iBAAiB,WAAW;AACrD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,YAAY;AAAA,MACnB,MAAM,YAAY;AAAA,MAClB,OAAO,YAAY;AAAA,MACnB;AAAA,MACA,KAAK,QAAQ,SAAS,QAAQ;AAAA,MAC9B,MAAM,QAAQ;AAAA,MACd,QAAQ,YAAY,cAAc,GAAG,QAAQ,UAAU,SAAS,YAAY,EAAE;AAAA,MAC9E,SAAS,YAAY,YAAY;AAAA,MACjC,SAAS,mBAAmB,aAAa,QAAQ,eAAe,MAAM;AACpE,gBAAQ,MAAM;AACd,oBAAY,WAAW;AAAA,MACzB,CAAC;AAAA;AAAA,EACH;AAEJ;AAGA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAK6B;AAC3B,MAAI,KAAK,SAAS,UAAW,QAAO,UAAU,oBAAC,eAAY,SAAkB,SAAkB,IAAK;AACpG,MAAI,KAAK,SAAS,OAAQ,QAAO,OAAO,oBAAC,YAAS,MAAY,SAAkB,IAAK;AACrF,SAAO,oBAAC,mBAAgB,aAAa,KAAK,aAAa,SAAkB;AAC3E;AAGO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAC6G;AAC3G,QAAM,YAAY,OAAO,OAAO,IAAI,UAAU;AAC9C,QAAM,QAAQ,SAAS;AACvB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAmB,IAAI;AAC/C,QAAM,SAAS,CAAC,SAAwC,QAAQ,CAAC,YAAa,YAAY,OAAO,OAAO,IAAK;AAC7G,QAAM,QAAQ,MAAY,QAAQ,IAAI;AAEtC,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,cAAY;AAAA,QACZ,eAAa;AAAA,QACb,IAAI;AAAA,UACF,MAAM;AAAA,UACN,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,WAAW;AAAA,UACX,QAAQ,mBAAmB,KAAK;AAAA,UAChC,eAAe;AAAA,UACf,WAAW,aAAa,MAAM,QAAQ,OAAO;AAAA,UAC7C,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAOT,UAAU;AAAA,UACV,QAAQ,SAAS,OAAO,SAAS,qBAAqB,KAAK,IAAI;AAAA,QACjE;AAAA,QAEC,mBAAS,cAAc,SAAS,QAAW,YAAY,MAAS,EAAE,IAAI,CAAC,SACtE;AAAA,UAAC;AAAA;AAAA,YAEC;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAS,EAAE,MAAM,QAAQ,OAAO,eAAe,MAAM,WAAW;AAAA;AAAA,UAJ3D,KAAK,SAAS,gBAAgB,QAAQ,KAAK,YAAY,EAAE,KAAK,QAAQ,KAAK,IAAI;AAAA,QAKtF,CACD;AAAA;AAAA,IACH;AAAA,IACC,YACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,MAAM,SAAS;AAAA,QACf,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA,QAAQ,GAAG,UAAU;AAAA,QACrB,cAAc,mBAAmB,KAAK;AAAA;AAAA,IACxC,IACE;AAAA,IACH,OACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,MAAM,SAAS;AAAA,QACf,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA,QAAQ,GAAG,UAAU;AAAA,QACrB,cAAc,mBAAmB,KAAK;AAAA;AAAA,IACxC,IACE;AAAA,KACN;AAEJ;","names":[]}