@12-apps/ui 6.34.0 → 6.36.0

package/dist/chunk-WFAJTO2B.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/TimingDiagram/TimingDiagram.views.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Tooltip from '@mui/material/Tooltip/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, styled, useTheme } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport type { FC, ReactElement } from 'react';\nimport React from 'react';\n\nimport type { TimingData } from './TimingDiagram.types';\nimport { onMedia, sheen, uiInk } from '../../../tokens/ink';\nimport { rem, rems } from '../../../tokens/relative';\n\nexport type PhaseKey = 'dns' | 'connect' | 'ssl' | 'request' | 'response';\n\n// Each phase's colour, from the theme's named timing set (`uiInk`).\nexport const phaseColors = (theme: Theme): Record<PhaseKey, string> => {\n  const phases = uiInk(theme).timingPhases;\n  return {\n    dns: phases.dns,\n    connect: phases.connect,\n    ssl: phases.tls,\n    request: phases.request,\n    response: phases.response,\n  };\n};\n\nexport interface Phase {\n  key: string;\n  label: string;\n  value?: number;\n}\n\nexport interface TimingViewProps {\n  phases: Phase[];\n  percentages: Record<string, number>;\n  data: TimingData;\n  animated: boolean;\n  showLabels: boolean;\n  showTooltips: boolean;\n  /** The waterfall's plot height in design px — drawn through `rem`. */\n  plotHeightPx: number;\n}\n\nexport const formatTime = (ms: number): string => {\n  if (ms < 1000) return `${ms}ms`;\n  return `${(ms / 1000).toFixed(2)}s`;\n};\n\nconst colorOf = (theme: Theme, phase: Phase): string => phaseColors(theme)[phase.key as PhaseKey];\nconst widthOf = (percentages: Record<string, number>, phase: Phase): number =>\n  percentages[phase.key] ?? 0;\n\n// Waterfall and stacked both offer the same hover explanation of a segment; only\n// whether tooltips are on at all varies.\nconst withTooltip = (\n  phase: Phase,\n  enabled: boolean,\n  element: ReactElement,\n): ReactElement =>\n  enabled ? (\n    <Tooltip\n      key={phase.key}\n      title={`${phase.label}: ${formatTime(phase.value!)}`}\n      placement=\"top\"\n      role=\"tooltip\"\n      aria-describedby={`tooltip-${phase.key}`}\n    >\n      {element}\n    </Tooltip>\n  ) : (\n    element\n  );\n\nconst WaterfallContainer = styled(Box)(({ theme }) => ({\n  position: 'relative',\n  width: '100%',\n  marginTop: theme.spacing(2),\n}));\n\nconst WaterfallBar = styled(Box, {\n  shouldForwardProp: (prop) =>\n    !['phaseColor', 'offset', 'widthPct', 'animated'].includes(prop as string),\n})<{\n  phaseColor: string;\n  offset: number;\n  widthPct: number;\n  animated: boolean;\n}>(({ theme, phaseColor, offset, widthPct, animated }) => ({\n  position: 'absolute',\n  height: rem(theme, 32),\n  left: `${offset}%`,\n  width: `${widthPct}%`,\n  background: `linear-gradient(90deg, ${phaseColor} 0%, ${alpha(phaseColor, 0.8)} 100%)`,\n  borderRadius: theme.shape.borderRadius,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  color: theme.palette.getContrastText(phaseColor),\n  fontSize: rem(theme, 12),\n  fontWeight: 500,\n  boxShadow: `${rems(theme, 0, 2, 8)} ${alpha(phaseColor, 0.3)}`,\n  transition: animated ? 'all 0.5s ease' : 'none',\n  animation: animated ? 'slideIn 0.5s ease' : 'none',\n  '@keyframes slideIn': {\n    from: {\n      transform: `translateX(${rem(theme, -20)})`,\n      opacity: 0,\n    },\n    to: {\n      transform: 'translateX(0)',\n      opacity: 1,\n    },\n  },\n  '&:hover': {\n    transform: `translateY(${rem(theme, -2)})`,\n    boxShadow: `${rems(theme, 0, 4, 12)} ${alpha(phaseColor, 0.5)}`,\n    zIndex: 10,\n  },\n}));\n\nconst TimelineAxis = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  justifyContent: 'space-between',\n  marginTop: theme.spacing(1),\n  paddingTop: theme.spacing(1),\n  borderTop: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n}));\n\nconst TimeLabel = styled(Typography)(({ theme }) => ({\n  fontSize: rem(theme, 11.2),\n  color: theme.palette.text.secondary,\n  fontWeight: 500,\n}));\n\nexport const WaterfallView: FC<TimingViewProps> = ({\n  phases,\n  percentages,\n  data,\n  animated,\n  showLabels,\n  showTooltips,\n  plotHeightPx,\n}) => {\n  const theme = useTheme();\n  // Each bar starts where the previous one ended, so the row reads as a timeline.\n  let offset = 0;\n\n  return (\n    <WaterfallContainer style={{ height: rem(theme, plotHeightPx + 40) }} data-variant=\"waterfall\">\n      {phases.map((phase, index) => {\n        const width = widthOf(percentages, phase);\n        const currentOffset = offset;\n        offset += width;\n\n        return withTooltip(\n          phase,\n          showTooltips,\n          <WaterfallBar\n            key={phase.key}\n            data-testid={`timing-segment-${phase.key}`}\n            phaseColor={colorOf(theme, phase)}\n            offset={currentOffset}\n            widthPct={width}\n            animated={animated}\n            data-animated={animated.toString()}\n            style={{\n              top: rem(theme, index * 8),\n              width: `${width}%`,\n              left: `${currentOffset}%`,\n            }}\n          >\n            {showLabels && width > 10 && (\n              <span data-testid=\"timing-label\">{formatTime(phase.value!)}</span>\n            )}\n          </WaterfallBar>,\n        );\n      })}\n      <TimelineAxis style={{ marginTop: rem(theme, plotHeightPx) }}>\n        <TimeLabel>0ms</TimeLabel>\n        <TimeLabel>{formatTime(data.total / 2)}</TimeLabel>\n        <TimeLabel>{formatTime(data.total)}</TimeLabel>\n      </TimelineAxis>\n    </WaterfallContainer>\n  );\n};\n\nconst StackedBar = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'animated',\n})<{ animated: boolean }>(({ theme, animated }) => ({\n  display: 'flex',\n  width: '100%',\n  height: rem(theme, 40),\n  borderRadius: theme.shape.borderRadius,\n  overflow: 'hidden',\n  boxShadow: theme.shadows[2],\n  ...(animated && {\n    '& > div': {\n      animation: 'expandWidth 0.8s ease',\n    },\n    '@keyframes expandWidth': {\n      from: { width: 0 },\n      to: { width: '100%' },\n    },\n  }),\n}));\n\nconst StackedSegment = styled(Box, {\n  shouldForwardProp: (prop) => !['phaseColor', 'widthPct'].includes(prop as string),\n})<{ phaseColor: string; widthPct: number }>(({ theme, phaseColor, widthPct }) => ({\n  width: `${widthPct}%`,\n  background: `linear-gradient(135deg, ${phaseColor} 0%, ${alpha(phaseColor, 0.85)} 100%)`,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  color: onMedia(theme),\n  fontSize: rem(theme, 11.2),\n  fontWeight: 600,\n  position: 'relative',\n  transition: 'all 0.3s ease',\n  '&:hover': {\n    filter: 'brightness(1.1)',\n    zIndex: 1,\n  },\n}));\n\nexport const StackedView: FC<TimingViewProps> = ({\n  phases,\n  percentages,\n  data,\n  animated,\n  showLabels,\n  showTooltips,\n}) => {\n  const theme = useTheme();\n  return (\n    <Box data-variant=\"stacked\">\n      <StackedBar animated={animated} data-animated={animated.toString()}>\n        {phases.map((phase) => {\n          const width = widthOf(percentages, phase);\n\n          return withTooltip(\n            phase,\n            showTooltips,\n            <StackedSegment\n              key={phase.key}\n              data-testid={`timing-segment-${phase.key}`}\n              phaseColor={colorOf(theme, phase)}\n              widthPct={width}\n              style={{ width: `${width}%` }}\n            >\n              {showLabels && width > 10 && (\n                <span data-testid=\"timing-label\">{formatTime(phase.value!)}</span>\n              )}\n            </StackedSegment>,\n          );\n        })}\n      </StackedBar>\n      <Box sx={{ display: 'flex', justifyContent: 'space-between', mt: 1 }}>\n        <Typography variant=\"caption\" color=\"text.secondary\">\n          0ms\n        </Typography>\n        <Typography variant=\"caption\" color=\"text.secondary\" fontWeight=\"bold\">\n          Total: {formatTime(data.total)}\n        </Typography>\n      </Box>\n    </Box>\n  );\n};\n\nconst HorizontalBar = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(1),\n  marginTop: theme.spacing(2),\n}));\n\nconst HorizontalSegment = styled(Box, {\n  shouldForwardProp: (prop) => !['phaseColor', 'widthPct', 'animated'].includes(prop as string),\n})<{\n  phaseColor: string;\n  widthPct: number;\n  animated: boolean;\n}>(({ theme, phaseColor, animated }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(2),\n  '& .label': {\n    minWidth: rem(theme, 80),\n    fontSize: rem(theme, 13.6),\n    fontWeight: 500,\n    color: theme.palette.text.secondary,\n  },\n  '& .bar': {\n    flex: 1,\n    height: rem(theme, 24),\n    borderRadius: theme.shape.borderRadius,\n    background: `linear-gradient(90deg, ${phaseColor} 0%, ${alpha(phaseColor, 0.7)} 100%)`,\n    position: 'relative',\n    overflow: 'hidden',\n    boxShadow: `${rems(theme, 0, 2, 6)} ${alpha(phaseColor, 0.25)}`,\n    ...(animated && {\n      '&::after': {\n        content: '\"\"',\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        background: `linear-gradient(90deg, transparent 0%, ${sheen(theme, 0.3)} 50%, transparent 100%)`,\n        animation: 'shimmer 2s infinite',\n      },\n      '@keyframes shimmer': {\n        from: { transform: 'translateX(-100%)' },\n        to: { transform: 'translateX(100%)' },\n      },\n    }),\n  },\n  '& .value': {\n    minWidth: rem(theme, 60),\n    textAlign: 'right',\n    fontSize: rem(theme, 13.6),\n    fontWeight: 600,\n    color: phaseColor,\n  },\n}));\n\nexport const HorizontalView: FC<TimingViewProps> = ({\n  phases,\n  percentages,\n  data,\n  animated,\n}) => {\n  const theme = useTheme();\n\n  return (\n    <HorizontalBar data-variant=\"horizontal\">\n      {phases.map((phase) => (\n        <HorizontalSegment\n          key={phase.key}\n          data-testid={`timing-segment-${phase.key}`}\n          phaseColor={colorOf(theme, phase)}\n          widthPct={widthOf(percentages, phase)}\n          animated={animated}\n          data-animated={animated.toString()}\n        >\n          <Typography className=\"label\">{phase.label}</Typography>\n          <Box className=\"bar\" style={{ width: `${percentages[phase.key]}%` }} />\n          <Typography className=\"value\" data-testid=\"timing-label\">\n            {formatTime(phase.value!)}\n          </Typography>\n        </HorizontalSegment>\n      ))}\n      <Box sx={{ mt: 2, pt: 2, borderTop: `1px solid ${alpha(theme.palette.divider, 0.2)}` }}>\n        <Typography variant=\"body2\" fontWeight=\"bold\" color=\"primary\">\n          Total Time: {formatTime(data.total)}\n        </Typography>\n      </Box>\n    </HorizontalBar>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,aAAa;AACpB,OAAO,gBAAgB;AACvB,SAAS,OAAO,QAAQ,gBAAgB;AAyDpC,cAqHE,YArHF;AA7CG,IAAM,cAAc,CAAC,UAA2C;AACrE,QAAM,SAAS,MAAM,KAAK,EAAE;AAC5B,SAAO;AAAA,IACL,KAAK,OAAO;AAAA,IACZ,SAAS,OAAO;AAAA,IAChB,KAAK,OAAO;AAAA,IACZ,SAAS,OAAO;AAAA,IAChB,UAAU,OAAO;AAAA,EACnB;AACF;AAmBO,IAAM,aAAa,CAAC,OAAuB;AAChD,MAAI,KAAK,IAAM,QAAO,GAAG,EAAE;AAC3B,SAAO,IAAI,KAAK,KAAM,QAAQ,CAAC,CAAC;AAClC;AAEA,IAAM,UAAU,CAAC,OAAc,UAAyB,YAAY,KAAK,EAAE,MAAM,GAAe;AAChG,IAAM,UAAU,CAAC,aAAqC,UACpD,YAAY,MAAM,GAAG,KAAK;AAI5B,IAAM,cAAc,CAClB,OACA,SACA,YAEA,UACE;AAAA,EAAC;AAAA;AAAA,IAEC,OAAO,GAAG,MAAM,KAAK,KAAK,WAAW,MAAM,KAAM,CAAC;AAAA,IAClD,WAAU;AAAA,IACV,MAAK;AAAA,IACL,oBAAkB,WAAW,MAAM,GAAG;AAAA,IAErC;AAAA;AAAA,EANI,MAAM;AAOb,IAEA;AAGJ,IAAM,qBAAqB,OAAO,GAAG,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EACrD,UAAU;AAAA,EACV,OAAO;AAAA,EACP,WAAW,MAAM,QAAQ,CAAC;AAC5B,EAAE;AAEF,IAAM,eAAe,OAAO,KAAK;AAAA,EAC/B,mBAAmB,CAAC,SAClB,CAAC,CAAC,cAAc,UAAU,YAAY,UAAU,EAAE,SAAS,IAAc;AAC7E,CAAC,EAKE,CAAC,EAAE,OAAO,YAAY,QAAQ,UAAU,SAAS,OAAO;AAAA,EACzD,UAAU;AAAA,EACV,QAAQ,IAAI,OAAO,EAAE;AAAA,EACrB,MAAM,GAAG,MAAM;AAAA,EACf,OAAO,GAAG,QAAQ;AAAA,EAClB,YAAY,0BAA0B,UAAU,QAAQ,MAAM,YAAY,GAAG,CAAC;AAAA,EAC9E,cAAc,MAAM,MAAM;AAAA,EAC1B,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,OAAO,MAAM,QAAQ,gBAAgB,UAAU;AAAA,EAC/C,UAAU,IAAI,OAAO,EAAE;AAAA,EACvB,YAAY;AAAA,EACZ,WAAW,GAAG,KAAK,OAAO,GAAG,GAAG,CAAC,CAAC,IAAI,MAAM,YAAY,GAAG,CAAC;AAAA,EAC5D,YAAY,WAAW,kBAAkB;AAAA,EACzC,WAAW,WAAW,sBAAsB;AAAA,EAC5C,sBAAsB;AAAA,IACpB,MAAM;AAAA,MACJ,WAAW,cAAc,IAAI,OAAO,GAAG,CAAC;AAAA,MACxC,SAAS;AAAA,IACX;AAAA,IACA,IAAI;AAAA,MACF,WAAW;AAAA,MACX,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,WAAW;AAAA,IACT,WAAW,cAAc,IAAI,OAAO,EAAE,CAAC;AAAA,IACvC,WAAW,GAAG,KAAK,OAAO,GAAG,GAAG,EAAE,CAAC,IAAI,MAAM,YAAY,GAAG,CAAC;AAAA,IAC7D,QAAQ;AAAA,EACV;AACF,EAAE;AAEF,IAAM,eAAe,OAAO,GAAG,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EAC/C,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,WAAW,MAAM,QAAQ,CAAC;AAAA,EAC1B,YAAY,MAAM,QAAQ,CAAC;AAAA,EAC3B,WAAW,aAAa,MAAM,MAAM,QAAQ,SAAS,GAAG,CAAC;AAC3D,EAAE;AAEF,IAAM,YAAY,OAAO,UAAU,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EACnD,UAAU,IAAI,OAAO,IAAI;AAAA,EACzB,OAAO,MAAM,QAAQ,KAAK;AAAA,EAC1B,YAAY;AACd,EAAE;AAEK,IAAM,gBAAqC,CAAC;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QAAQ,SAAS;AAEvB,MAAI,SAAS;AAEb,SACE,qBAAC,sBAAmB,OAAO,EAAE,QAAQ,IAAI,OAAO,eAAe,EAAE,EAAE,GAAG,gBAAa,aAChF;AAAA,WAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,YAAM,QAAQ,QAAQ,aAAa,KAAK;AACxC,YAAM,gBAAgB;AACtB,gBAAU;AAEV,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YAEC,eAAa,kBAAkB,MAAM,GAAG;AAAA,YACxC,YAAY,QAAQ,OAAO,KAAK;AAAA,YAChC,QAAQ;AAAA,YACR,UAAU;AAAA,YACV;AAAA,YACA,iBAAe,SAAS,SAAS;AAAA,YACjC,OAAO;AAAA,cACL,KAAK,IAAI,OAAO,QAAQ,CAAC;AAAA,cACzB,OAAO,GAAG,KAAK;AAAA,cACf,MAAM,GAAG,aAAa;AAAA,YACxB;AAAA,YAEC,wBAAc,QAAQ,MACrB,oBAAC,UAAK,eAAY,gBAAgB,qBAAW,MAAM,KAAM,GAAE;AAAA;AAAA,UAdxD,MAAM;AAAA,QAgBb;AAAA,MACF;AAAA,IACF,CAAC;AAAA,IACD,qBAAC,gBAAa,OAAO,EAAE,WAAW,IAAI,OAAO,YAAY,EAAE,GACzD;AAAA,0BAAC,aAAU,iBAAG;AAAA,MACd,oBAAC,aAAW,qBAAW,KAAK,QAAQ,CAAC,GAAE;AAAA,MACvC,oBAAC,aAAW,qBAAW,KAAK,KAAK,GAAE;AAAA,OACrC;AAAA,KACF;AAEJ;AAEA,IAAM,aAAa,OAAO,KAAK;AAAA,EAC7B,mBAAmB,CAAC,SAAS,SAAS;AACxC,CAAC,EAAyB,CAAC,EAAE,OAAO,SAAS,OAAO;AAAA,EAClD,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ,IAAI,OAAO,EAAE;AAAA,EACrB,cAAc,MAAM,MAAM;AAAA,EAC1B,UAAU;AAAA,EACV,WAAW,MAAM,QAAQ,CAAC;AAAA,EAC1B,GAAI,YAAY;AAAA,IACd,WAAW;AAAA,MACT,WAAW;AAAA,IACb;AAAA,IACA,0BAA0B;AAAA,MACxB,MAAM,EAAE,OAAO,EAAE;AAAA,MACjB,IAAI,EAAE,OAAO,OAAO;AAAA,IACtB;AAAA,EACF;AACF,EAAE;AAEF,IAAM,iBAAiB,OAAO,KAAK;AAAA,EACjC,mBAAmB,CAAC,SAAS,CAAC,CAAC,cAAc,UAAU,EAAE,SAAS,IAAc;AAClF,CAAC,EAA4C,CAAC,EAAE,OAAO,YAAY,SAAS,OAAO;AAAA,EACjF,OAAO,GAAG,QAAQ;AAAA,EAClB,YAAY,2BAA2B,UAAU,QAAQ,MAAM,YAAY,IAAI,CAAC;AAAA,EAChF,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,OAAO,QAAQ,KAAK;AAAA,EACpB,UAAU,IAAI,OAAO,IAAI;AAAA,EACzB,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,EACV;AACF,EAAE;AAEK,IAAM,cAAmC,CAAC;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QAAQ,SAAS;AACvB,SACE,qBAAC,OAAI,gBAAa,WAChB;AAAA,wBAAC,cAAW,UAAoB,iBAAe,SAAS,SAAS,GAC9D,iBAAO,IAAI,CAAC,UAAU;AACrB,YAAM,QAAQ,QAAQ,aAAa,KAAK;AAExC,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YAEC,eAAa,kBAAkB,MAAM,GAAG;AAAA,YACxC,YAAY,QAAQ,OAAO,KAAK;AAAA,YAChC,UAAU;AAAA,YACV,OAAO,EAAE,OAAO,GAAG,KAAK,IAAI;AAAA,YAE3B,wBAAc,QAAQ,MACrB,oBAAC,UAAK,eAAY,gBAAgB,qBAAW,MAAM,KAAM,GAAE;AAAA;AAAA,UAPxD,MAAM;AAAA,QASb;AAAA,MACF;AAAA,IACF,CAAC,GACH;AAAA,IACA,qBAAC,OAAI,IAAI,EAAE,SAAS,QAAQ,gBAAgB,iBAAiB,IAAI,EAAE,GACjE;AAAA,0BAAC,cAAW,SAAQ,WAAU,OAAM,kBAAiB,iBAErD;AAAA,MACA,qBAAC,cAAW,SAAQ,WAAU,OAAM,kBAAiB,YAAW,QAAO;AAAA;AAAA,QAC7D,WAAW,KAAK,KAAK;AAAA,SAC/B;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,IAAM,gBAAgB,OAAO,GAAG,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EAChD,SAAS;AAAA,EACT,eAAe;AAAA,EACf,KAAK,MAAM,QAAQ,CAAC;AAAA,EACpB,WAAW,MAAM,QAAQ,CAAC;AAC5B,EAAE;AAEF,IAAM,oBAAoB,OAAO,KAAK;AAAA,EACpC,mBAAmB,CAAC,SAAS,CAAC,CAAC,cAAc,YAAY,UAAU,EAAE,SAAS,IAAc;AAC9F,CAAC,EAIE,CAAC,EAAE,OAAO,YAAY,SAAS,OAAO;AAAA,EACvC,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,KAAK,MAAM,QAAQ,CAAC;AAAA,EACpB,YAAY;AAAA,IACV,UAAU,IAAI,OAAO,EAAE;AAAA,IACvB,UAAU,IAAI,OAAO,IAAI;AAAA,IACzB,YAAY;AAAA,IACZ,OAAO,MAAM,QAAQ,KAAK;AAAA,EAC5B;AAAA,EACA,UAAU;AAAA,IACR,MAAM;AAAA,IACN,QAAQ,IAAI,OAAO,EAAE;AAAA,IACrB,cAAc,MAAM,MAAM;AAAA,IAC1B,YAAY,0BAA0B,UAAU,QAAQ,MAAM,YAAY,GAAG,CAAC;AAAA,IAC9E,UAAU;AAAA,IACV,UAAU;AAAA,IACV,WAAW,GAAG,KAAK,OAAO,GAAG,GAAG,CAAC,CAAC,IAAI,MAAM,YAAY,IAAI,CAAC;AAAA,IAC7D,GAAI,YAAY;AAAA,MACd,YAAY;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,QACV,KAAK;AAAA,QACL,MAAM;AAAA,QACN,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,YAAY,0CAA0C,MAAM,OAAO,GAAG,CAAC;AAAA,QACvE,WAAW;AAAA,MACb;AAAA,MACA,sBAAsB;AAAA,QACpB,MAAM,EAAE,WAAW,oBAAoB;AAAA,QACvC,IAAI,EAAE,WAAW,mBAAmB;AAAA,MACtC;AAAA,IACF;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,UAAU,IAAI,OAAO,EAAE;AAAA,IACvB,WAAW;AAAA,IACX,UAAU,IAAI,OAAO,IAAI;AAAA,IACzB,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AACF,EAAE;AAEK,IAAM,iBAAsC,CAAC;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QAAQ,SAAS;AAEvB,SACE,qBAAC,iBAAc,gBAAa,cACzB;AAAA,WAAO,IAAI,CAAC,UACX;AAAA,MAAC;AAAA;AAAA,QAEC,eAAa,kBAAkB,MAAM,GAAG;AAAA,QACxC,YAAY,QAAQ,OAAO,KAAK;AAAA,QAChC,UAAU,QAAQ,aAAa,KAAK;AAAA,QACpC;AAAA,QACA,iBAAe,SAAS,SAAS;AAAA,QAEjC;AAAA,8BAAC,cAAW,WAAU,SAAS,gBAAM,OAAM;AAAA,UAC3C,oBAAC,OAAI,WAAU,OAAM,OAAO,EAAE,OAAO,GAAG,YAAY,MAAM,GAAG,CAAC,IAAI,GAAG;AAAA,UACrE,oBAAC,cAAW,WAAU,SAAQ,eAAY,gBACvC,qBAAW,MAAM,KAAM,GAC1B;AAAA;AAAA;AAAA,MAXK,MAAM;AAAA,IAYb,CACD;AAAA,IACD,oBAAC,OAAI,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,WAAW,aAAa,MAAM,MAAM,QAAQ,SAAS,GAAG,CAAC,GAAG,GACnF,+BAAC,cAAW,SAAQ,SAAQ,YAAW,QAAO,OAAM,WAAU;AAAA;AAAA,MAC/C,WAAW,KAAK,KAAK;AAAA,OACpC,GACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/chunk-WNUZK7NS.js

@@ -0,0 +1,308 @@
+import {
+  commandPaperStyles,
+  commandSizeStyles
+} from "./chunk-7EQCZO56.js";
+import {
+  CommandEmpty,
+  CommandLoading
+} from "./chunk-CMK4DJDR.js";
+import {
+  resolveCommandProps,
+  useCommandPalette
+} from "./chunk-6DN4ZULV.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/Command/Command.tsx
+import CloseIcon from "@mui/icons-material/Close";
+import SearchIcon from "@mui/icons-material/Search";
+import Box from "@mui/material/Box/index.js";
+import Chip from "@mui/material/Chip/index.js";
+import Dialog from "@mui/material/Dialog/index.js";
+import DialogContent from "@mui/material/DialogContent/index.js";
+import Divider from "@mui/material/Divider/index.js";
+import Fade from "@mui/material/Fade/index.js";
+import Grow from "@mui/material/Grow/index.js";
+import IconButton from "@mui/material/IconButton/index.js";
+import InputAdornment from "@mui/material/InputAdornment/index.js";
+import List from "@mui/material/List/index.js";
+import ListItemButton from "@mui/material/ListItemButton/index.js";
+import ListItemIcon from "@mui/material/ListItemIcon/index.js";
+import ListItemText from "@mui/material/ListItemText/index.js";
+import TextField from "@mui/material/TextField/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, useTheme } from "@mui/material/styles/index.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var makeTestId = (dataTestId) => (suffix) => dataTestId ? `${dataTestId}-${suffix}` : void 0;
+var Command = (rawProps) => {
+  const props = resolveCommandProps(rawProps);
+  const { open, onOpenChange, variant, dataTestId } = props;
+  const theme = useTheme();
+  const testId = makeTestId(dataTestId);
+  const { internalValue, filteredItems, highlightedId, handleValueChange, handleSelect, handleKeyDown } = useCommandPalette(props);
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      onClose: () => onOpenChange?.(false),
+      maxWidth: false,
+      PaperProps: {
+        sx: {
+          ...commandPaperStyles(theme, props),
+          ...commandSizeStyles(theme, props.size),
+          overflow: "hidden",
+          ...props.style
+        },
+        className: props.className,
+        "data-testid": dataTestId
+      },
+      TransitionComponent: variant === "glass" ? Fade : Grow,
+      onClick: props.onClick,
+      children: /* @__PURE__ */ jsxs(Box, { sx: { p: 0 }, children: [
+        /* @__PURE__ */ jsx(
+          CommandInput,
+          {
+            placeholder: props.placeholder,
+            value: internalValue,
+            onChange: handleValueChange,
+            onFocus: props.onFocus,
+            onBlur: props.onBlur,
+            disabled: props.disabled,
+            autoFocus: props.autoFocus,
+            onKeyDown: handleKeyDown,
+            dataTestId: testId("input")
+          }
+        ),
+        /* @__PURE__ */ jsx(Divider, {}),
+        /* @__PURE__ */ jsxs(DialogContent, { sx: { p: 0, maxHeight: props.maxHeight, overflow: "auto" }, children: [
+          /* @__PURE__ */ jsx(
+            CommandBody,
+            {
+              loading: props.loading,
+              items: filteredItems,
+              value: internalValue,
+              emptyMessage: props.emptyMessage,
+              onSelect: handleSelect,
+              selectedId: highlightedId,
+              showCategories: props.showCategories,
+              showShortcuts: props.showShortcuts,
+              showDescriptions: props.showDescriptions,
+              testId
+            }
+          ),
+          props.children
+        ] })
+      ] })
+    }
+  );
+};
+var CommandBody = ({ loading, emptyMessage, testId, ...list }) => {
+  if (loading) {
+    return /* @__PURE__ */ jsx(CommandLoading, { dataTestId: testId("loading") });
+  }
+  if (!list.items?.length) {
+    return /* @__PURE__ */ jsx(CommandEmpty, { message: emptyMessage, dataTestId: testId("empty") });
+  }
+  return /* @__PURE__ */ jsx(CommandList, { ...list, dataTestId: testId("list") });
+};
+var CommandInput = ({
+  placeholder,
+  value,
+  onChange,
+  onFocus,
+  onBlur,
+  disabled,
+  autoFocus,
+  onKeyDown,
+  className,
+  style,
+  dataTestId
+}) => /* @__PURE__ */ jsx(
+  TextField,
+  {
+    fullWidth: true,
+    value,
+    onChange: (e) => onChange?.(e.target.value),
+    onFocus,
+    onBlur,
+    onKeyDown,
+    placeholder,
+    disabled,
+    autoFocus,
+    variant: "standard",
+    className,
+    inputProps: {
+      "data-testid": dataTestId
+    },
+    sx: {
+      p: 2,
+      "& .MuiInput-underline:before": { border: "none" },
+      "& .MuiInput-underline:after": { border: "none" },
+      ...style
+    },
+    InputProps: {
+      startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(SearchIcon, {}) }),
+      endAdornment: value && /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => onChange?.(""), children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" }) }) })
+    }
+  }
+);
+var CommandList = ({
+  items = [],
+  onSelect,
+  selectedId,
+  emptyMessage,
+  showCategories,
+  showShortcuts,
+  showDescriptions,
+  loading,
+  className,
+  style,
+  dataTestId
+}) => {
+  const groupedItems = useMemo(() => {
+    if (!showCategories) return { "": items };
+    const groups = {};
+    items.forEach((item) => {
+      const category = item.category || "";
+      if (!groups[category]) groups[category] = [];
+      groups[category].push(item);
+    });
+    return groups;
+  }, [items, showCategories]);
+  if (loading) return /* @__PURE__ */ jsx(CommandLoading, { dataTestId: dataTestId ? `${dataTestId}-loading` : void 0 });
+  if (items.length === 0) return /* @__PURE__ */ jsx(CommandEmpty, { message: emptyMessage, dataTestId: dataTestId ? `${dataTestId}-empty` : void 0 });
+  return /* @__PURE__ */ jsx(List, { className, sx: style, "data-testid": dataTestId, children: Object.entries(groupedItems).map(([category, categoryItems]) => /* @__PURE__ */ jsx(
+    CommandGroup,
+    {
+      heading: category,
+      items: categoryItems,
+      onSelect,
+      selectedId,
+      showShortcuts,
+      showDescriptions
+    },
+    category
+  )) });
+};
+var CommandGroup = ({
+  heading,
+  items = [],
+  onSelect,
+  selectedId,
+  showShortcuts,
+  showDescriptions,
+  className,
+  style,
+  dataTestId
+}) => {
+  const groupTestId = dataTestId || (heading ? `command-group-${heading}` : void 0);
+  return /* @__PURE__ */ jsxs(Box, { className, sx: style, "data-testid": groupTestId, children: [
+    heading && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "caption",
+        sx: {
+          px: 2,
+          py: 1,
+          display: "block",
+          color: "text.secondary",
+          fontWeight: 600,
+          textTransform: "uppercase"
+        },
+        children: heading
+      }
+    ),
+    items.map((item) => /* @__PURE__ */ jsx(
+      CommandItemComponent,
+      {
+        ...item,
+        selected: selectedId === item.id,
+        onSelect: () => onSelect?.(item),
+        showShortcut: showShortcuts,
+        showDescription: showDescriptions,
+        dataTestId: `command-item-${item.id}`
+      },
+      item.id
+    ))
+  ] });
+};
+var CommandItemComponent = ({
+  label,
+  description,
+  icon,
+  shortcut,
+  disabled,
+  selected,
+  onSelect,
+  showShortcut,
+  showDescription,
+  className,
+  style,
+  dataTestId
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    ListItemButton,
+    {
+      onClick: onSelect,
+      disabled,
+      selected,
+      className,
+      "data-testid": dataTestId,
+      sx: {
+        py: 1.5,
+        px: 2,
+        "&:hover": {
+          backgroundColor: alpha(theme.palette.primary.main, 0.08)
+        },
+        "&.Mui-selected": {
+          backgroundColor: alpha(theme.palette.primary.main, 0.12),
+          "&:hover": {
+            backgroundColor: alpha(theme.palette.primary.main, 0.16)
+          }
+        },
+        ...style
+      },
+      children: [
+        icon && /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 40 }, children: icon }),
+        /* @__PURE__ */ jsx(
+          ListItemText,
+          {
+            primary: label,
+            secondary: showDescription && description,
+            primaryTypographyProps: {
+              fontSize: rem(theme, 14),
+              fontWeight: selected ? 600 : 400
+            },
+            secondaryTypographyProps: {
+              fontSize: rem(theme, 12)
+            }
+          }
+        ),
+        showShortcut && shortcut && /* @__PURE__ */ jsx(
+          Chip,
+          {
+            label: shortcut,
+            size: "small",
+            variant: "outlined",
+            sx: {
+              height: 20,
+              fontSize: rem(theme, 11.2),
+              ml: 1
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+
+export {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandGroup
+};
+//# sourceMappingURL=chunk-WNUZK7NS.js.map

package/dist/chunk-WNUZK7NS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Command/Command.tsx"],"sourcesContent":["import CloseIcon from '@mui/icons-material/Close';\nimport SearchIcon from '@mui/icons-material/Search';\nimport Box from '@mui/material/Box/index.js';\nimport Chip from '@mui/material/Chip/index.js';\nimport Dialog from '@mui/material/Dialog/index.js';\nimport DialogContent from '@mui/material/DialogContent/index.js';\nimport Divider from '@mui/material/Divider/index.js';\nimport Fade from '@mui/material/Fade/index.js';\nimport Grow from '@mui/material/Grow/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport InputAdornment from '@mui/material/InputAdornment/index.js';\nimport List from '@mui/material/List/index.js';\nimport ListItemButton from '@mui/material/ListItemButton/index.js';\nimport ListItemIcon from '@mui/material/ListItemIcon/index.js';\nimport ListItemText from '@mui/material/ListItemText/index.js';\nimport TextField from '@mui/material/TextField/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, useTheme } from '@mui/material/styles/index.js';\nimport React, { useMemo } from 'react';\n\nimport { resolveCommandProps, useCommandPalette } from './Command.hooks';\nimport { CommandEmpty, CommandLoading } from './Command.parts';\nimport { commandPaperStyles, commandSizeStyles } from './Command.styles';\nimport type {\n  CommandGroupProps,\n  CommandInputProps,\n  CommandItem,\n  CommandItemProps,\n  CommandListProps,\n  CommandProps,\n} from './Command.types';\nimport { rem } from '../../../tokens/relative';\n\nexport { CommandEmpty, CommandLoading, CommandSeparator } from './Command.parts';\n\nconst makeTestId = (dataTestId?: string) => (suffix: string) =>\n  dataTestId ? `${dataTestId}-${suffix}` : undefined;\n\nexport const Command: React.FC<CommandProps> = (rawProps) => {\n  const props = resolveCommandProps(rawProps);\n  const { open, onOpenChange, variant, dataTestId } = props;\n  const theme = useTheme();\n  const testId = makeTestId(dataTestId);\n\n  const { internalValue, filteredItems, highlightedId, handleValueChange, handleSelect, handleKeyDown } =\n    useCommandPalette(props);\n\n  return (\n    <Dialog\n      open={open}\n      onClose={() => onOpenChange?.(false)}\n      maxWidth={false}\n      PaperProps={{\n        sx: {\n          ...commandPaperStyles(theme, props),\n          ...commandSizeStyles(theme, props.size),\n          overflow: 'hidden',\n          ...props.style,\n        },\n        className: props.className,\n        'data-testid': dataTestId,\n      }}\n      TransitionComponent={variant === 'glass' ? Fade : Grow}\n      onClick={props.onClick}\n    >\n      <Box sx={{ p: 0 }}>\n        <CommandInput\n          placeholder={props.placeholder}\n          value={internalValue}\n          onChange={handleValueChange}\n          onFocus={props.onFocus}\n          onBlur={props.onBlur}\n          disabled={props.disabled}\n          autoFocus={props.autoFocus}\n          onKeyDown={handleKeyDown}\n          dataTestId={testId('input')}\n        />\n\n        <Divider />\n\n        <DialogContent sx={{ p: 0, maxHeight: props.maxHeight, overflow: 'auto' }}>\n          <CommandBody\n            loading={props.loading}\n            items={filteredItems}\n            value={internalValue}\n            emptyMessage={props.emptyMessage}\n            onSelect={handleSelect}\n            selectedId={highlightedId}\n            showCategories={props.showCategories}\n            showShortcuts={props.showShortcuts}\n            showDescriptions={props.showDescriptions}\n            testId={testId}\n          />\n          {props.children}\n        </DialogContent>\n      </Box>\n    </Dialog>\n  );\n};\n\ntype CommandBodyProps = Pick<\n  CommandListProps,\n  'items' | 'value' | 'onSelect' | 'selectedId' | 'showCategories' | 'showShortcuts' | 'showDescriptions'\n> & {\n  loading: boolean;\n  emptyMessage: string;\n  testId: (suffix: string) => string | undefined;\n};\n\n/** Three mutually exclusive states share the scrolling area: busy, empty, or a list. */\nconst CommandBody: React.FC<CommandBodyProps> = ({ loading, emptyMessage, testId, ...list }) => {\n  if (loading) {\n    return <CommandLoading dataTestId={testId('loading')} />;\n  }\n\n  if (!list.items?.length) {\n    return <CommandEmpty message={emptyMessage} dataTestId={testId('empty')} />;\n  }\n\n  return <CommandList {...list} dataTestId={testId('list')} />;\n};\n\nexport const CommandInput: React.FC<CommandInputProps> = ({\n  placeholder,\n  value,\n  onChange,\n  onFocus,\n  onBlur,\n  disabled,\n  autoFocus,\n  onKeyDown,\n  className,\n  style,\n  dataTestId,\n}) => (\n    <TextField\n      fullWidth\n      value={value}\n      onChange={(e) => onChange?.(e.target.value)}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      onKeyDown={onKeyDown}\n      placeholder={placeholder}\n      disabled={disabled}\n      autoFocus={autoFocus}\n      variant=\"standard\"\n      className={className}\n      inputProps={{\n        'data-testid': dataTestId,\n      }}\n      sx={{\n        p: 2,\n        '& .MuiInput-underline:before': { border: 'none' },\n        '& .MuiInput-underline:after': { border: 'none' },\n        ...style,\n      }}\n      InputProps={{\n        startAdornment: (\n          <InputAdornment position=\"start\">\n            <SearchIcon />\n          </InputAdornment>\n        ),\n        endAdornment: value && (\n          <InputAdornment position=\"end\">\n            <IconButton size=\"small\" onClick={() => onChange?.('')}>\n              <CloseIcon fontSize=\"small\" />\n            </IconButton>\n          </InputAdornment>\n        ),\n      }}\n    />\n  );\n\nexport const CommandList: React.FC<CommandListProps> = ({\n  items = [],\n  onSelect,\n  selectedId,\n  emptyMessage,\n  showCategories,\n  showShortcuts,\n  showDescriptions,\n  loading,\n  className,\n  style,\n  dataTestId,\n}) => {\n  const groupedItems = useMemo(() => {\n    if (!showCategories) return { '': items };\n\n    const groups: Record<string, CommandItem[]> = {};\n    items.forEach(item => {\n      const category = item.category || '';\n      if (!groups[category]) groups[category] = [];\n      groups[category].push(item);\n    });\n    return groups;\n  }, [items, showCategories]);\n\n  if (loading) return <CommandLoading dataTestId={dataTestId ? `${dataTestId}-loading` : undefined} />;\n  if (items.length === 0) return <CommandEmpty message={emptyMessage} dataTestId={dataTestId ? `${dataTestId}-empty` : undefined} />;\n\n  return (\n    <List className={className} sx={style} data-testid={dataTestId}>\n      {Object.entries(groupedItems).map(([category, categoryItems]) => (\n        <CommandGroup\n          key={category}\n          heading={category}\n          items={categoryItems}\n          onSelect={onSelect}\n          selectedId={selectedId}\n          showShortcuts={showShortcuts}\n          showDescriptions={showDescriptions}\n        />\n      ))}\n    </List>\n  );\n};\n\nexport const CommandGroup: React.FC<CommandGroupProps> = ({\n  heading,\n  items = [],\n  onSelect,\n  selectedId,\n  showShortcuts,\n  showDescriptions,\n  className,\n  style,\n  dataTestId,\n}) => {\n  const groupTestId = dataTestId || (heading ? `command-group-${heading}` : undefined);\n\n  return (\n    <Box className={className} sx={style} data-testid={groupTestId}>\n      {heading && (\n        <Typography\n          variant=\"caption\"\n          sx={{\n            px: 2,\n            py: 1,\n            display: 'block',\n            color: 'text.secondary',\n            fontWeight: 600,\n            textTransform: 'uppercase',\n          }}\n        >\n          {heading}\n        </Typography>\n      )}\n      {items.map((item) => (\n        <CommandItemComponent\n          key={item.id}\n          {...item}\n          selected={selectedId === item.id}\n          onSelect={() => onSelect?.(item)}\n          showShortcut={showShortcuts}\n          showDescription={showDescriptions}\n          dataTestId={`command-item-${item.id}`}\n        />\n      ))}\n    </Box>\n  );\n};\n\nconst CommandItemComponent: React.FC<CommandItemProps> = ({\n  label,\n  description,\n  icon,\n  shortcut,\n  disabled,\n  selected,\n  onSelect,\n  showShortcut,\n  showDescription,\n  className,\n  style,\n  dataTestId,\n}) => {\n  const theme = useTheme();\n\n  return (\n    <ListItemButton\n      onClick={onSelect}\n      disabled={disabled}\n      selected={selected}\n      className={className}\n      data-testid={dataTestId}\n      sx={{\n        py: 1.5,\n        px: 2,\n        '&:hover': {\n          backgroundColor: alpha(theme.palette.primary.main, 0.08),\n        },\n        '&.Mui-selected': {\n          backgroundColor: alpha(theme.palette.primary.main, 0.12),\n          '&:hover': {\n            backgroundColor: alpha(theme.palette.primary.main, 0.16),\n          },\n        },\n        ...style,\n      }}\n    >\n      {icon && (\n        <ListItemIcon sx={{ minWidth: 40 }}>\n          {icon}\n        </ListItemIcon>\n      )}\n\n      <ListItemText\n        primary={label}\n        secondary={showDescription && description}\n        primaryTypographyProps={{\n          fontSize: rem(theme, 14),\n          fontWeight: selected ? 600 : 400,\n        }}\n        secondaryTypographyProps={{\n          fontSize: rem(theme, 12),\n        }}\n      />\n\n      {showShortcut && shortcut && (\n        <Chip\n          label={shortcut}\n          size=\"small\"\n          variant=\"outlined\"\n          sx={{\n            height: 20,\n            fontSize: rem(theme, 11.2),\n            ml: 1,\n          }}\n        />\n      )}\n    </ListItemButton>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-WOAXKWAB.js

@@ -0,0 +1,62 @@
+import {
+  CarouselArrows,
+  CarouselIndicators,
+  CarouselThumbnails
+} from "./chunk-JJJM75XF.js";
+
+// src/components/data-display/Carousel/Carousel.chrome.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var CarouselChrome = ({
+  copy,
+  items,
+  activeIndex,
+  loop,
+  disabled,
+  showArrows,
+  showIndicators,
+  showThumbnails,
+  arrowPosition,
+  indicatorPosition,
+  color,
+  size,
+  onPrev,
+  onNext,
+  onSelect
+}) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  showArrows && !disabled && /* @__PURE__ */ jsx(
+    CarouselArrows,
+    {
+      copy,
+      onPrev,
+      onNext,
+      position: arrowPosition,
+      color,
+      disablePrev: !loop && activeIndex === 0,
+      disableNext: !loop && activeIndex === items.length - 1
+    }
+  ),
+  showIndicators && /* @__PURE__ */ jsx(
+    CarouselIndicators,
+    {
+      count: items.length,
+      activeIndex,
+      onSelect,
+      position: indicatorPosition,
+      color
+    }
+  ),
+  showThumbnails && /* @__PURE__ */ jsx(
+    CarouselThumbnails,
+    {
+      items,
+      activeIndex,
+      onSelect,
+      size
+    }
+  )
+] });
+
+export {
+  CarouselChrome
+};
+//# sourceMappingURL=chunk-WOAXKWAB.js.map

package/dist/chunk-WPA26LXA.js

@@ -0,0 +1,175 @@
+import {
+  useColumnsWithActions,
+  useRenderedColumns
+} from "./chunk-TQBRWZA4.js";
+import {
+  filterRows
+} from "./chunk-YGQX7BNI.js";
+import {
+  useSelection
+} from "./chunk-LLZWB32X.js";
+import {
+  resolveScope,
+  useScopeConfigChecks
+} from "./chunk-PL2AB5HJ.js";
+import {
+  useStateWriters
+} from "./chunk-U5FOJBLG.js";
+import {
+  computeActiveFilterCount,
+  defaultSortFields
+} from "./chunk-KJK2Q35C.js";
+import {
+  serverDerived,
+  useServerQuery
+} from "./chunk-IMLIIW77.js";
+import {
+  emptyViewState
+} from "./chunk-LHHAYZ55.js";
+
+// src/components/data-display/DataViews/use-data-views-state.ts
+import { useEffect, useMemo, useRef, useState } from "react";
+function useMatchedRows(server, rows, columns, fields, rangeFields, state) {
+  return useMemo(
+    () => server ? rows : filterRows(
+      rows,
+      columns,
+      fields,
+      { search: state.search, pills: state.pills, ranges: state.ranges },
+      rangeFields
+    ),
+    [server, rows, columns, fields, rangeFields, state.search, state.pills, state.ranges]
+  );
+}
+function useStateSyncEffects(appliedState, syncState, state, onStateChange, setState) {
+  const firstApplied = useRef(true);
+  useEffect(() => {
+    if (firstApplied.current) {
+      firstApplied.current = false;
+      return;
+    }
+    if (appliedState) setState(appliedState);
+  }, [appliedState, setState]);
+  const firstSync = useRef(true);
+  useEffect(() => {
+    if (firstSync.current) {
+      firstSync.current = false;
+      return;
+    }
+    if (syncState) setState((prev) => ({ ...prev, ...syncState }));
+  }, [syncState, setState]);
+  useEffect(() => {
+    onStateChange?.(state);
+  }, [state, onStateChange]);
+}
+function seedState(appliedState, syncState, allColumnIds) {
+  const seed = appliedState ?? emptyViewState(allColumnIds);
+  return syncState ? { ...seed, ...syncState } : seed;
+}
+function makeSetScope(patch, clearSelection) {
+  return (id) => {
+    patch({ scope: id });
+    clearSelection();
+  };
+}
+function orderedColumnIds(allColumnIds, order) {
+  if (!order || order.length === 0) return allColumnIds;
+  const declared = new Set(allColumnIds);
+  const kept = order.filter((id) => declared.has(id));
+  const seen = new Set(kept);
+  return [...kept, ...allColumnIds.filter((id) => !seen.has(id))];
+}
+function liveQuery(state, scope, server, matchedCount) {
+  return {
+    search: state.search,
+    pills: state.pills,
+    ranges: state.ranges ?? {},
+    sortBy: state.sortBy,
+    // Absent, not undefined, when the table declares no scopes.
+    ...scope !== void 0 ? { scope } : {},
+    page: server?.page ?? 1,
+    // Client mode has one page, and it is everything that matched.
+    pageSize: server?.pageSize ?? matchedCount
+  };
+}
+function activeSortOf(state, resolvedSortFields) {
+  const active = state.sortBy?.[0];
+  return {
+    activeSortField: active?.id ?? resolvedSortFields[0]?.value ?? "",
+    activeSortOrder: active?.dir === "desc" ? "desc" : "asc"
+  };
+}
+function useDataViewsState({
+  rows,
+  columns,
+  fields,
+  rangeFields,
+  getRowId,
+  onRowClick,
+  appliedState,
+  syncState,
+  onStateChange,
+  testIdPrefix,
+  sortFields,
+  rowActions,
+  rowActionsLeading,
+  renderRowMenu,
+  server,
+  scopes = [],
+  scopeFieldId
+}) {
+  useScopeConfigChecks(scopes, fields.map((field) => field.id), scopeFieldId, server !== void 0);
+  const { columnsWithActions, allColumnIds } = useColumnsWithActions(columns, {
+    rowActions,
+    rowActionsLeading,
+    renderRowMenu,
+    testIdPrefix,
+    getRowId
+  });
+  const [state, setState] = useState(
+    () => seedState(appliedState, syncState, allColumnIds)
+  );
+  const [filterOpen, setFilterOpen] = useState(false);
+  useStateSyncEffects(appliedState, syncState, state, onStateChange, setState);
+  const { patch, toggleColumn } = useStateWriters(setState);
+  const matched = useMatchedRows(server, rows, columns, fields, rangeFields, state);
+  const scope = resolveScope(scopes, state.scope);
+  const { changePage } = useServerQuery(server, state, scope);
+  const { gridColumns, hideableColumns } = useRenderedColumns(
+    columnsWithActions,
+    state.visibleColumns,
+    onRowClick,
+    state.order
+  );
+  const selection = useSelection(matched, getRowId, { rememberOffPage: Boolean(server) });
+  const resolvedSortFields = sortFields ?? defaultSortFields(columns);
+  return {
+    state,
+    ranges: state.ranges ?? {},
+    patch,
+    matched,
+    gridColumns,
+    hideableColumns,
+    columnOrder: orderedColumnIds(allColumnIds, state.order),
+    toggleColumn,
+    ...selection,
+    filterOpen,
+    setFilterOpen,
+    resolvedSortFields,
+    ...activeSortOf(state, resolvedSortFields),
+    activeFilterCount: computeActiveFilterCount(state, fields, rangeFields),
+    ...serverDerived(server, matched.length),
+    changePage,
+    scope,
+    setScope: makeSetScope(patch, selection.clearSelection),
+    currentQuery: liveQuery(state, scope, server, matched.length),
+    // Verbatim, or absent. See DataViewServer.scopeCounts for why there is no
+    // client-side fallback.
+    scopeCounts: server?.scopeCounts
+  };
+}
+
+export {
+  useDataViewsState
+};
+//# sourceMappingURL=chunk-WPA26LXA.js.map

package/dist/chunk-WRCLYSTX.js

@@ -0,0 +1,66 @@
+import {
+  fieldControlStyles
+} from "./chunk-CGO452DC.js";
+import {
+  fieldRadius
+} from "./chunk-GDN2LUTZ.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/MapPreview/MapSearchBar.tsx
+import SearchIcon from "@mui/icons-material/Search";
+import Box from "@mui/material/Box/index.js";
+import InputAdornment from "@mui/material/InputAdornment/index.js";
+import TextField from "@mui/material/TextField/index.js";
+import { alpha, styled } from "@mui/material/styles/index.js";
+import { jsx } from "react/jsx-runtime";
+var SearchBar = styled(Box)(({ theme }) => ({
+  position: "absolute",
+  top: theme.spacing(2),
+  left: "50%",
+  transform: "translateX(-50%)",
+  zIndex: 2,
+  width: "90%",
+  maxWidth: rem(theme, 400)
+}));
+var SearchField = styled(TextField)(({ theme }) => ({
+  ...fieldControlStyles(theme),
+  "& .MuiOutlinedInput-root": {
+    background: alpha(theme.palette.background.paper, 0.95),
+    backdropFilter: `blur(${rem(theme, 10)})`,
+    WebkitBackdropFilter: `blur(${rem(theme, 10)})`,
+    borderRadius: fieldRadius(theme),
+    "& fieldset": {
+      borderColor: alpha(theme.palette.divider, 0.2)
+    }
+  }
+}));
+var MapSearchBar = ({
+  label,
+  value,
+  placeholder,
+  isSearching,
+  onChange,
+  onSubmit
+}) => /* @__PURE__ */ jsx(SearchBar, { children: /* @__PURE__ */ jsx(
+  SearchField,
+  {
+    fullWidth: true,
+    size: "small",
+    placeholder,
+    value,
+    onChange: (event) => onChange(event.target.value),
+    onKeyPress: onSubmit,
+    InputProps: {
+      startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(SearchIcon, { fontSize: "small", sx: { opacity: isSearching ? 0.5 : 1 } }) })
+    },
+    disabled: isSearching,
+    "aria-label": label
+  }
+) });
+
+export {
+  MapSearchBar
+};
+//# sourceMappingURL=chunk-WRCLYSTX.js.map