@12-apps/ui 6.34.0 → 6.36.0

package/dist/chunk-EFHIMCJN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/Sonner/SonnerToast.tsx"],"sourcesContent":["import SuccessIcon from '@mui/icons-material/CheckCircle';\nimport CloseIcon from '@mui/icons-material/Close';\nimport ErrorIcon from '@mui/icons-material/Error';\nimport InfoIcon from '@mui/icons-material/Info';\nimport WarningIcon from '@mui/icons-material/Warning';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport Collapse from '@mui/material/Collapse/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, useTheme } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { shadowInk } from '../../../tokens/ink';\nimport { sxRem } from '../../../tokens/relative';\n\nimport type { SonnerItem } from './Sonner.types';\nimport type { SonnerProps } from './Sonner.types';\n\nconst renderToastIcon = (icon: SonnerProps['icon'], type: SonnerProps['type']) => {\n  if (icon) return icon;\n\n  switch (type) {\n    case 'success':\n      return <SuccessIcon sx={{ fontSize: sxRem(20), color: 'success.main' }} />;\n    case 'error':\n      return <ErrorIcon sx={{ fontSize: sxRem(20), color: 'error.main' }} />;\n    case 'warning':\n      return <WarningIcon sx={{ fontSize: sxRem(20), color: 'warning.main' }} />;\n    case 'info':\n      return <InfoIcon sx={{ fontSize: sxRem(20), color: 'info.main' }} />;\n    case 'loading':\n      return <CircularProgress size={16} />;\n    default:\n      return null;\n  }\n};\n\n// Errors and toasts flagged important interrupt the screen reader; the rest wait\n// for the next pause. Computed once instead of duplicating the same condition\n// across the role and aria-live attributes.\nconst resolveToastAnnouncement = (important: boolean, type: SonnerProps['type']) => {\n  const interrupts = important || type === 'error';\n\n  return {\n    role: interrupts ? 'alert' : 'status',\n    live: (interrupts ? 'assertive' : 'polite') as 'assertive' | 'polite',\n  };\n};\n\nconst buildToastStyles = (\n  theme: Theme,\n  variant: SonnerProps['variant'],\n  visible: boolean,\n): CSSObject => {\n  const baseStyles: CSSObject = {\n    borderRadius: theme.spacing(1.5),\n    border: `1px solid ${theme.palette.divider}`,\n    backgroundColor: theme.palette.background.paper,\n    boxShadow: theme.shadows[4],\n    transition: theme.transitions.create(['all', 'transform', 'opacity'], {\n      duration: theme.transitions.duration.short,\n    }),\n    transform: visible ? 'scale(1)' : 'scale(0.95)',\n    opacity: visible ? 1 : 0,\n  };\n\n  switch (variant) {\n    case 'glass':\n      return {\n        ...baseStyles,\n        backgroundColor: alpha(theme.palette.background.paper, 0.1),\n        backdropFilter: 'blur(20px)',\n        border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,\n        boxShadow: `0 8px 32px ${shadowInk(theme, 0.1)}`,\n      };\n\n    case 'minimal':\n      return {\n        ...baseStyles,\n        backgroundColor: theme.palette.background.default,\n        border: 'none',\n        boxShadow: 'none',\n        borderLeft: `4px solid ${theme.palette.primary.main}`,\n        borderRadius: 0,\n      };\n\n    default:\n      return baseStyles;\n  }\n};\n\n// Title, description and the optional action row. Split out so the toast shell\n// keeps only its own concerns — announcement, styling and dismissal.\nconst ToastContent: React.FC<{\n  title?: SonnerProps['title'];\n  description?: SonnerProps['description'];\n  important: boolean;\n  action?: SonnerProps['action'];\n  cancel?: SonnerProps['cancel'];\n}> = ({ title, description, important, action, cancel }) => (\n  <Box sx={{ flex: 1, minWidth: 0 }}>\n    {title && (\n      <Typography\n        variant=\"body2\"\n        sx={{\n          fontWeight: important ? 600 : 500,\n          color: 'text.primary',\n          mb: description ? 0.5 : 0,\n        }}\n      >\n        {title}\n      </Typography>\n    )}\n\n    {description && (\n      <Typography variant=\"body2\" sx={{ color: 'text.secondary', fontSize: sxRem(14) }}>\n        {description}\n      </Typography>\n    )}\n\n    {(action || cancel) && (\n      <Box sx={{ display: 'flex', gap: 1, mt: 1.5 }}>\n        {action && (\n          <ToastActionButton action={action} buttonVariant=\"contained\" />\n        )}\n        {cancel && <ToastActionButton action={cancel} buttonVariant=\"outlined\" />}\n      </Box>\n    )}\n  </Box>\n);\n\nconst ToastActionButton: React.FC<{\n  action: NonNullable<SonnerProps['action']>;\n  buttonVariant: 'contained' | 'outlined';\n}> = ({ action, buttonVariant }) => (\n  <Button\n    size=\"small\"\n    onClick={action.onClick}\n    variant={buttonVariant}\n    sx={{ fontSize: sxRem(12), py: 0.5, px: 1.5 }}\n  >\n    {action.label}\n  </Button>\n);\n\nexport const SonnerToast: React.FC<SonnerItem & { onDismiss: (id: string) => void }> = ({\n  id,\n  title,\n  description,\n  type = 'default',\n  variant = 'default',\n  closable = true,\n  dismissLabel,\n  action,\n  cancel,\n  icon,\n  important = false,\n  visible,\n  onDismiss,\n}) => {\n  const theme = useTheme();\n  const announcement = resolveToastAnnouncement(important, type);\n\n  const handleDismiss = () => {\n    onDismiss(id);\n  };\n\n  return (\n    <Collapse in={visible} timeout={200}>\n      <Box\n        role={announcement.role}\n        aria-live={announcement.live}\n        aria-atomic=\"true\"\n        sx={{\n          ...buildToastStyles(theme, variant, visible),\n          p: 2,\n          mb: 1,\n          minWidth: 356,\n          maxWidth: 400,\n          display: 'flex',\n          alignItems: 'flex-start',\n          gap: 1.5,\n        }}\n      >\n        {renderToastIcon(icon, type)}\n\n        <ToastContent\n          title={title}\n          description={description}\n          important={important}\n          action={action}\n          cancel={cancel}\n        />\n\n        {closable && (\n          <IconButton\n            size=\"small\"\n            onClick={handleDismiss}\n            aria-label={dismissLabel}\n            sx={{\n              ml: 'auto',\n              color: 'text.secondary',\n              '&:hover': {\n                backgroundColor: 'action.hover',\n              },\n            }}\n          >\n            <CloseIcon fontSize=\"small\" />\n          </IconButton>\n        )}\n      </Box>\n    </Collapse>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-EFV5QJNM.js

@@ -0,0 +1,158 @@
+import {
+  SearchGlyph
+} from "./chunk-DMNZD3Q7.js";
+import {
+  chipSx,
+  chipWrapSx,
+  panelHeadSx,
+  pinnedLabelSx,
+  pinnedSx
+} from "./chunk-BXAL7OIS.js";
+import {
+  fieldBorder,
+  fieldHeight
+} from "./chunk-CGO452DC.js";
+import {
+  fieldRadiusPx
+} from "./chunk-GDN2LUTZ.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/CategorySelect/CategoryPanelHead.tsx
+import Box from "@mui/material/Box/index.js";
+import InputBase from "@mui/material/InputBase/index.js";
+import { alpha } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var searchFieldSx = {
+  position: "relative",
+  display: "flex",
+  alignItems: "center",
+  "& input": {
+    width: "100%",
+    height: fieldHeight,
+    padding: "0 30px 0 32px",
+    fontSize: sxRem(13),
+    border: fieldBorder,
+    borderRadius: fieldRadiusPx,
+    background: "background.paper",
+    color: "text.primary",
+    "&:focus": {
+      outline: "none",
+      borderColor: "primary.main",
+      // 0x26 of 0xFF: the ring's old hex-alpha suffix, kept exact.
+      boxShadow: (theme) => `0 0 0 3px ${alpha(theme.palette.primary.main, 38 / 255)}`
+    }
+  }
+};
+var clearButtonSx = {
+  position: "absolute",
+  right: 7,
+  width: 20,
+  height: 20,
+  border: 0,
+  background: "action.selected",
+  color: "text.secondary",
+  borderRadius: "50%",
+  display: "grid",
+  placeItems: "center",
+  cursor: "pointer",
+  fontSize: sxRem(12),
+  padding: 0,
+  lineHeight: 1
+};
+function CategoryPanelHead({
+  query,
+  placeholder,
+  sheet,
+  quickActions,
+  onQueryChange,
+  searchInputRef,
+  dataTestId,
+  copy
+}) {
+  return /* @__PURE__ */ jsxs(Box, { sx: (theme) => panelHeadSx(theme, sheet), children: [
+    /* @__PURE__ */ jsxs(Box, { sx: searchFieldSx, children: [
+      /* @__PURE__ */ jsx(
+        SearchGlyph,
+        {
+          style: {
+            position: "absolute",
+            left: 10,
+            width: 15,
+            height: 15,
+            opacity: 0.55,
+            pointerEvents: "none"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        InputBase,
+        {
+          inputRef: searchInputRef,
+          value: query,
+          placeholder,
+          autoComplete: "off",
+          inputProps: { "aria-label": placeholder, "data-testid": `${dataTestId}-search` },
+          onChange: (event) => onQueryChange(event.target.value),
+          sx: { width: "100%" }
+        }
+      ),
+      query.length > 0 && /* @__PURE__ */ jsx(
+        Box,
+        {
+          component: "button",
+          type: "button",
+          "aria-label": copy.search.clear,
+          "data-testid": `${dataTestId}-search-clear`,
+          sx: clearButtonSx,
+          onClick: () => onQueryChange(""),
+          children: "\xD7"
+        }
+      )
+    ] }),
+    quickActions && /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          gap: "10px",
+          marginTop: "8px",
+          fontSize: sxRem(12)
+        },
+        children: quickActions
+      }
+    )
+  ] });
+}
+function CategoryPinnedTray({
+  chips,
+  onRemove,
+  dataTestId,
+  copy
+}) {
+  if (chips.length === 0) return null;
+  return /* @__PURE__ */ jsxs(Box, { sx: pinnedSx, "data-testid": `${dataTestId}-pinned`, children: [
+    /* @__PURE__ */ jsx(Box, { sx: pinnedLabelSx, children: copy.search.pinnedLabel(chips.length) }),
+    /* @__PURE__ */ jsx(Box, { sx: chipWrapSx, children: chips.map((chip) => /* @__PURE__ */ jsxs(Box, { component: "span", sx: chipSx, children: [
+      chip.label,
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": copy.search.removeChip(chip.label),
+          "data-testid": `${dataTestId}-unpin-${chip.id}`,
+          onClick: () => onRemove(chip.id),
+          children: "\xD7"
+        }
+      )
+    ] }, chip.id)) })
+  ] });
+}
+
+export {
+  CategoryPanelHead,
+  CategoryPinnedTray
+};
+//# sourceMappingURL=chunk-EFV5QJNM.js.map

package/dist/chunk-EFV5QJNM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/CategorySelect/CategoryPanelHead.tsx"],"sourcesContent":["'use client';\n\nimport type { CategorySelectCopy } from '../../../copy';\nimport Box from '@mui/material/Box/index.js';\nimport InputBase from '@mui/material/InputBase/index.js';\nimport { alpha, type Theme } from '@mui/material/styles/index.js';\n\nimport { SearchGlyph } from './CategoryIcons';\nimport {\n  chipSx,\n  chipWrapSx,\n  panelHeadSx,\n  pinnedLabelSx,\n  pinnedSx,\n} from './CategorySelect.styles';\nimport type { CategorySelectionChip } from './CategorySelect.types';\nimport { fieldBorder, fieldHeight } from '../../../tokens/field-height';\nimport { fieldRadiusPx } from '../../../tokens/field-radius';\nimport { sxRem } from '../../../tokens/relative';\n\ninterface PanelHeadProps {\n  query: string;\n  placeholder: string;\n  sheet: boolean;\n  /** Quick actions belong to multi-select only; single-select has nothing to bulk-do. */\n  quickActions?: React.ReactNode;\n  onQueryChange: (next: string) => void;\n  searchInputRef: React.RefObject<HTMLInputElement | null>;\n  dataTestId: string;\n  copy: CategorySelectCopy;\n}\n\nconst searchFieldSx = {\n  position: 'relative',\n  display: 'flex',\n  alignItems: 'center',\n  '& input': {\n    width: '100%',\n    height: fieldHeight,\n    padding: '0 30px 0 32px',\n    fontSize: sxRem(13),\n    border: fieldBorder,\n    borderRadius: fieldRadiusPx,\n    background: 'background.paper',\n    color: 'text.primary',\n    '&:focus': {\n      outline: 'none',\n      borderColor: 'primary.main',\n      // 0x26 of 0xFF: the ring's old hex-alpha suffix, kept exact.\n      boxShadow: (theme: Theme) => `0 0 0 3px ${alpha(theme.palette.primary.main, 0x26 / 0xff)}`,\n    },\n  },\n} as const;\n\nconst clearButtonSx = {\n  position: 'absolute',\n  right: 7,\n  width: 20,\n  height: 20,\n  border: 0,\n  background: 'action.selected',\n  color: 'text.secondary',\n  borderRadius: '50%',\n  display: 'grid',\n  placeItems: 'center',\n  cursor: 'pointer',\n  fontSize: sxRem(12),\n  padding: 0,\n  lineHeight: 1,\n} as const;\n\n/** Search field, its clear affordance, and the optional quick-action row. */\nexport function CategoryPanelHead({\n  query,\n  placeholder,\n  sheet,\n  quickActions,\n  onQueryChange,\n  searchInputRef,\n  dataTestId,\n  copy,\n}: PanelHeadProps): React.JSX.Element {\n  return (\n    <Box sx={(theme) => panelHeadSx(theme, sheet)}>\n      <Box sx={searchFieldSx}>\n        <SearchGlyph\n          style={{\n            position: 'absolute',\n            left: 10,\n            width: 15,\n            height: 15,\n            opacity: 0.55,\n            pointerEvents: 'none',\n          }}\n        />\n        <InputBase\n          inputRef={searchInputRef}\n          value={query}\n          placeholder={placeholder}\n          autoComplete=\"off\"\n          inputProps={{ 'aria-label': placeholder, 'data-testid': `${dataTestId}-search` }}\n          onChange={(event) => onQueryChange(event.target.value)}\n          sx={{ width: '100%' }}\n        />\n        {query.length > 0 && (\n          <Box\n            component=\"button\"\n            type=\"button\"\n            aria-label={copy.search.clear}\n            data-testid={`${dataTestId}-search-clear`}\n            sx={clearButtonSx}\n            onClick={() => onQueryChange('')}\n          >\n            ×\n          </Box>\n        )}\n      </Box>\n      {quickActions && (\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            gap: '10px',\n            marginTop: '8px',\n            fontSize: sxRem(12),\n          }}\n        >\n          {quickActions}\n        </Box>\n      )}\n    </Box>\n  );\n}\n\ninterface PinnedTrayProps {\n  chips: CategorySelectionChip[];\n  onRemove: (chipId: string) => void;\n  dataTestId: string;\n  copy: CategorySelectCopy;\n}\n\n/**\n * The selected categories, pinned above the list.\n *\n * Pinned rather than left in place because a selection made at the bottom of a\n * ten-category tree scrolls out of sight the moment you look for the next one —\n * and a search hides it entirely. Here it survives both.\n */\nexport function CategoryPinnedTray({\n  chips,\n  onRemove,\n  dataTestId,\n  copy,\n}: PinnedTrayProps): React.JSX.Element | null {\n  if (chips.length === 0) return null;\n  return (\n    <Box sx={pinnedSx} data-testid={`${dataTestId}-pinned`}>\n      <Box sx={pinnedLabelSx}>{copy.search.pinnedLabel(chips.length)}</Box>\n      <Box sx={chipWrapSx}>\n        {chips.map((chip) => (\n          <Box component=\"span\" key={chip.id} sx={chipSx}>\n            {chip.label}\n            <button\n              type=\"button\"\n              aria-label={copy.search.removeChip(chip.label)}\n              data-testid={`${dataTestId}-unpin-${chip.id}`}\n              onClick={() => onRemove(chip.id)}\n            >\n              ×\n            </button>\n          </Box>\n        ))}\n      </Box>\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-EFVOT3G5.js

@@ -0,0 +1,96 @@
+import {
+  otpSlotSx
+} from "./chunk-GE2EKMDT.js";
+import {
+  useOtpDigits
+} from "./chunk-UETHX57J.js";
+import {
+  withDefaults
+} from "./chunk-HPK33ACY.js";
+
+// src/components/form/InputOTP/InputOTP.tsx
+import Box from "@mui/material/Box/index.js";
+import TextField from "@mui/material/TextField/index.js";
+import { styled } from "@mui/material/styles/index.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var StyledOTPInput = styled(TextField, {
+  shouldForwardProp: (prop) => !["customColor", "customSize", "glass", "gradient"].includes(prop)
+})(({ theme, ...flags }) => ({ ...otpSlotSx(theme, flags) }));
+var DEFAULTS = {
+  variant: "numeric",
+  color: "primary",
+  size: "md",
+  length: 6,
+  value: "",
+  glass: false,
+  gradient: false,
+  autoFocus: false,
+  error: false,
+  disabled: false
+};
+var InputOTP = forwardRef((props, ref) => {
+  const {
+    variant,
+    color,
+    size,
+    length,
+    value,
+    onChange,
+    onComplete,
+    glass,
+    gradient,
+    autoFocus,
+    error,
+    disabled,
+    dataTestId,
+    ...rest
+  } = withDefaults(props, DEFAULTS);
+  const { digits, inputRefs, handleInputChange, handleKeyDown, handlePaste } = useOtpDigits({
+    variant,
+    length,
+    value,
+    onChange,
+    onComplete
+  });
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref,
+      "data-testid": dataTestId,
+      sx: { display: "flex", gap: 1, justifyContent: "center", alignItems: "center" },
+      ...rest,
+      children: digits.map((digit, index) => /* @__PURE__ */ jsx(
+        StyledOTPInput,
+        {
+          ref: (el) => {
+            inputRefs.current[index] = el?.querySelector("input") || null;
+          },
+          customColor: color,
+          customSize: size,
+          glass,
+          gradient,
+          value: variant === "masked" ? digit ? "\u2022" : "" : digit,
+          onChange: (e) => handleInputChange(index, e.target.value),
+          onKeyDown: (e) => handleKeyDown(index, e),
+          onPaste: index === 0 ? handlePaste : void 0,
+          autoFocus: autoFocus && index === 0,
+          error,
+          disabled,
+          inputProps: {
+            maxLength: 1,
+            style: { textAlign: "center" },
+            "data-testid": dataTestId ? `${dataTestId}-slot-${index}` : void 0
+          }
+        },
+        index
+      ))
+    }
+  );
+});
+InputOTP.displayName = "InputOTP";
+
+export {
+  InputOTP
+};
+//# sourceMappingURL=chunk-EFVOT3G5.js.map

package/dist/chunk-EIYTS5VZ.js

@@ -0,0 +1,270 @@
+import {
+  onMedia,
+  uiInk
+} from "./chunk-FQ6UW7IY.js";
+import {
+  rem,
+  rems
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Timeline/TimelineRow.tsx
+import DotIcon from "@mui/icons-material/Circle";
+import ExpandIcon from "@mui/icons-material/ExpandMore";
+import Box from "@mui/material/Box/index.js";
+import Button from "@mui/material/Button/index.js";
+import Card from "@mui/material/Card/index.js";
+import CardContent from "@mui/material/CardContent/index.js";
+import Chip from "@mui/material/Chip/index.js";
+import Collapse from "@mui/material/Collapse/index.js";
+import Fade from "@mui/material/Fade/index.js";
+import IconButton from "@mui/material/IconButton/index.js";
+import Stack from "@mui/material/Stack/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, keyframes, styled } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var slideInAnimation = (theme) => keyframes`from { opacity: 0; transform: translateX(${rem(theme, -20)}); } to { opacity: 1; transform: translateX(0); }`;
+var pulseAnimation = keyframes`0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; }`;
+var TimelineItemContainer = styled(Box, {
+  shouldForwardProp: (prop) => !["animated", "alternating", "index"].includes(prop)
+})(({ theme, animated, alternating, index, orientation }) => ({
+  display: "flex",
+  gap: theme.spacing(2),
+  position: "relative",
+  ...animated && {
+    animation: `${slideInAnimation(theme)} 0.5s ease ${index * 0.1}s both`
+  },
+  ...orientation === "vertical" && alternating && {
+    flexDirection: index % 2 === 0 ? "row" : "row-reverse",
+    textAlign: index % 2 === 0 ? "left" : "right"
+  },
+  ...orientation === "horizontal" && {
+    flexDirection: "column",
+    alignItems: "center",
+    minWidth: rem(theme, 280)
+  }
+}));
+var TimelineConnector = styled(Box, {
+  shouldForwardProp: (prop) => !["isLast"].includes(prop)
+})(({ theme, orientation, isLast }) => ({
+  position: "absolute",
+  background: `linear-gradient(180deg, ${theme.palette.primary.main} 0%, ${alpha(theme.palette.primary.main, 0.3)} 100%)`,
+  ...orientation === "vertical" ? {
+    width: rem(theme, 2),
+    height: isLast ? 0 : `calc(100% + ${rem(theme, 16)})`,
+    left: rem(theme, 19),
+    top: rem(theme, 40)
+  } : {
+    height: rem(theme, 2),
+    width: isLast ? 0 : rem(theme, 240),
+    top: rem(theme, 19),
+    left: rem(theme, 40)
+  }
+}));
+var TimelineDot = styled(Box, {
+  shouldForwardProp: (prop) => !["dotColor", "hasIcon", "animated"].includes(prop)
+})(({ theme, dotColor, hasIcon, animated }) => ({
+  width: rem(theme, 40),
+  height: rem(theme, 40),
+  borderRadius: "50%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  background: dotColor ? `linear-gradient(135deg, ${dotColor} 0%, ${alpha(dotColor, 0.8)} 100%)` : `linear-gradient(135deg, ${theme.palette.primary.main} 0%, ${theme.palette.primary.light} 100%)`,
+  boxShadow: `${rems(theme, 0, 4, 12)} ${alpha(dotColor || theme.palette.primary.main, 0.3)}`,
+  border: `${rem(theme, 2)} solid ${theme.palette.background.paper}`,
+  zIndex: 1,
+  flexShrink: 0,
+  ...animated && {
+    animation: `${pulseAnimation} 2s ease infinite`
+  },
+  "& svg": {
+    fontSize: rem(theme, hasIcon ? 19.2 : 12.8),
+    color: theme.palette.background.paper
+  }
+}));
+var TimelineCard = styled(Card, {
+  shouldForwardProp: (prop) => !["timelineVariant", "isClickable"].includes(prop)
+})(
+  ({ theme, timelineVariant, isClickable }) => ({
+    flex: 1,
+    background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.9)} 0%, ${alpha(theme.palette.background.paper, 0.8)} 100%)`,
+    backdropFilter: `blur(${rem(theme, 10)})`,
+    WebkitBackdropFilter: `blur(${rem(theme, 10)})`,
+    border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
+    transition: theme.transitions.create(["transform", "box-shadow"]),
+    ...isClickable && {
+      cursor: "pointer",
+      "&:hover": {
+        transform: `translateY(${rem(theme, -2)})`,
+        boxShadow: theme.shadows[8]
+      }
+    },
+    ...timelineVariant === "compact" && {
+      padding: theme.spacing(1.5),
+      "& .MuiCardContent-root": {
+        padding: 0,
+        "&:last-child": {
+          paddingBottom: 0
+        }
+      }
+    }
+  })
+);
+var TimelineTimestamp = styled(Typography)(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  fontSize: rem(theme, 12),
+  fontWeight: 500,
+  letterSpacing: rem(theme, 0.5),
+  textTransform: "uppercase"
+}));
+var MetadataChip = styled(Chip)(({ theme }) => ({
+  height: rem(theme, 24),
+  fontSize: rem(theme, 12),
+  background: alpha(theme.palette.primary.main, 0.08),
+  border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`
+}));
+var TimelineDetails = ({ item, isExpanded, variant }) => {
+  const open = isExpanded || variant === "detailed";
+  return /* @__PURE__ */ jsx(Collapse, { in: open, children: /* @__PURE__ */ jsx(Fade, { in: open, children: /* @__PURE__ */ jsxs(Stack, { spacing: 1.5, sx: { mt: 1 }, children: [
+    item.description && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: item.description }),
+    item.metadata && /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 1 }, children: Object.entries(item.metadata).map(([key, value]) => /* @__PURE__ */ jsx(MetadataChip, { label: `${key}: ${value}`, size: "small" }, key)) }),
+    item.action && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "small",
+        variant: "contained",
+        onClick: (e) => {
+          e.stopPropagation();
+          item.action.onClick();
+        },
+        sx: (theme) => ({
+          background: `linear-gradient(135deg, ${uiInk(theme).celebration.violet[0]} 0%, ${uiInk(theme).celebration.violet[1]} 100%)`,
+          color: onMedia(theme)
+        }),
+        children: item.action.label
+      }
+    ) })
+  ] }) }) });
+};
+var TimelineCardHeader = ({ item, variant, isExpanded, onExpandClick }) => /* @__PURE__ */ jsxs(
+  Box,
+  {
+    sx: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" },
+    children: [
+      /* @__PURE__ */ jsxs(Box, { sx: { flex: 1 }, children: [
+        /* @__PURE__ */ jsx(TimelineTimestamp, { "data-testid": "timeline-timestamp", children: item.timestamp }),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: variant === "compact" ? "body2" : "h6",
+            fontWeight: variant === "compact" ? 500 : 600,
+            sx: { mt: 0.5 },
+            children: item.title
+          }
+        )
+      ] }),
+      item.description && variant !== "compact" && /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          size: "small",
+          onClick: (e) => onExpandClick(item.id, e),
+          "aria-label": isExpanded ? "Collapse item details" : "Expand item details",
+          sx: {
+            transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
+            transition: "transform 0.3s ease"
+          },
+          children: /* @__PURE__ */ jsx(ExpandIcon, {})
+        }
+      )
+    ]
+  }
+);
+var TimelineRowCard = ({ item, variant, isClickable, isExpanded, onItemClick, onExpandClick }) => /* @__PURE__ */ jsx(
+  TimelineCard,
+  {
+    timelineVariant: variant,
+    isClickable,
+    onClick: isClickable ? () => onItemClick?.(item) : void 0,
+    role: "article",
+    "aria-label": `Timeline item: ${item.title}`,
+    "data-testid": "timeline-card",
+    children: /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
+      /* @__PURE__ */ jsx(
+        TimelineCardHeader,
+        {
+          item,
+          variant,
+          isExpanded,
+          onExpandClick
+        }
+      ),
+      variant === "compact" && item.description && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: item.description }),
+      variant !== "compact" && /* @__PURE__ */ jsx(TimelineDetails, { item, isExpanded, variant })
+    ] }) })
+  }
+);
+var TimelineRow = ({
+  item,
+  index,
+  isLast,
+  variant,
+  orientation,
+  showConnector,
+  animated,
+  alternating,
+  isExpanded,
+  onItemClick,
+  onExpandClick
+}) => {
+  const hasExpandableContent = item.description && variant !== "compact";
+  const isClickable = !!onItemClick || !!hasExpandableContent;
+  return /* @__PURE__ */ jsxs(
+    TimelineItemContainer,
+    {
+      animated,
+      alternating: alternating && orientation === "vertical",
+      index,
+      orientation,
+      "data-testid": "timeline-item-container",
+      children: [
+        /* @__PURE__ */ jsxs(Box, { sx: { position: "relative" }, children: [
+          /* @__PURE__ */ jsx(
+            TimelineDot,
+            {
+              dotColor: item.color,
+              hasIcon: !!item.icon,
+              animated,
+              "data-testid": "timeline-dot",
+              children: item.icon ? /* @__PURE__ */ jsx(Box, { "data-testid": "item-icon", children: item.icon }) : /* @__PURE__ */ jsx(DotIcon, { "data-testid": "item-icon-default" })
+            }
+          ),
+          showConnector && !isLast && /* @__PURE__ */ jsx(
+            TimelineConnector,
+            {
+              orientation,
+              isLast,
+              "data-testid": "timeline-connector"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          TimelineRowCard,
+          {
+            item,
+            variant,
+            isClickable,
+            isExpanded,
+            onItemClick,
+            onExpandClick
+          }
+        )
+      ]
+    },
+    item.id
+  );
+};
+
+export {
+  TimelineRow
+};
+//# sourceMappingURL=chunk-EIYTS5VZ.js.map

package/dist/chunk-EIYTS5VZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Timeline/TimelineRow.tsx"],"sourcesContent":["import DotIcon from '@mui/icons-material/Circle';\nimport ExpandIcon from '@mui/icons-material/ExpandMore';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport Card from '@mui/material/Card/index.js';\nimport CardContent from '@mui/material/CardContent/index.js';\nimport Chip from '@mui/material/Chip/index.js';\nimport Collapse from '@mui/material/Collapse/index.js';\nimport Fade from '@mui/material/Fade/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Stack from '@mui/material/Stack/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, keyframes, styled, type Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type { TimelineItem, TimelineProps } from './Timeline.types';\nimport { onMedia, uiInk } from '../../../tokens/ink';\nimport { rem, rems } from '../../../tokens/relative';\n\nconst slideInAnimation = (theme: Theme) =>\n  keyframes`from { opacity: 0; transform: translateX(${rem(theme, -20)}); } to { opacity: 1; transform: translateX(0); }`;\nconst pulseAnimation = keyframes`0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; }`;\n\nconst TimelineItemContainer = styled(Box, {\n  shouldForwardProp: (prop) => !['animated', 'alternating', 'index'].includes(prop as string),\n})<{\n  animated: boolean;\n  alternating: boolean;\n  index: number;\n  orientation: 'vertical' | 'horizontal';\n}>(({ theme, animated, alternating, index, orientation }) => ({\n  display: 'flex',\n  gap: theme.spacing(2),\n  position: 'relative',\n  ...(animated && {\n    animation: `${slideInAnimation(theme)} 0.5s ease ${index * 0.1}s both`,\n  }),\n  ...(orientation === 'vertical' &&\n    alternating && {\n      flexDirection: index % 2 === 0 ? 'row' : 'row-reverse',\n      textAlign: index % 2 === 0 ? 'left' : 'right',\n    }),\n  ...(orientation === 'horizontal' && {\n    flexDirection: 'column',\n    alignItems: 'center',\n    minWidth: rem(theme, 280),\n  }),\n}));\n\nconst TimelineConnector = styled(Box, {\n  shouldForwardProp: (prop) => !['isLast'].includes(prop as string),\n})<{\n  orientation: 'vertical' | 'horizontal';\n  isLast: boolean;\n}>(({ theme, orientation, isLast }) => ({\n  position: 'absolute',\n  background: `linear-gradient(180deg, ${theme.palette.primary.main} 0%, ${alpha(theme.palette.primary.main, 0.3)} 100%)`,\n  ...(orientation === 'vertical'\n    ? {\n        width: rem(theme, 2),\n        height: isLast ? 0 : `calc(100% + ${rem(theme, 16)})`,\n        left: rem(theme, 19),\n        top: rem(theme, 40),\n      }\n    : {\n        height: rem(theme, 2),\n        width: isLast ? 0 : rem(theme, 240),\n        top: rem(theme, 19),\n        left: rem(theme, 40),\n      }),\n}));\n\nconst TimelineDot = styled(Box, {\n  shouldForwardProp: (prop) => !['dotColor', 'hasIcon', 'animated'].includes(prop as string),\n})<{ dotColor?: string; hasIcon: boolean; animated: boolean }>(({ theme, dotColor, hasIcon, animated }) => ({\n  width: rem(theme, 40),\n  height: rem(theme, 40),\n  borderRadius: '50%',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  background: dotColor\n    ? `linear-gradient(135deg, ${dotColor} 0%, ${alpha(dotColor, 0.8)} 100%)`\n    : `linear-gradient(135deg, ${theme.palette.primary.main} 0%, ${theme.palette.primary.light} 100%)`,\n  boxShadow: `${rems(theme, 0, 4, 12)} ${alpha(dotColor || theme.palette.primary.main, 0.3)}`,\n  border: `${rem(theme, 2)} solid ${theme.palette.background.paper}`,\n  zIndex: 1,\n  flexShrink: 0,\n  ...(animated && {\n    animation: `${pulseAnimation} 2s ease infinite`,\n  }),\n  '& svg': {\n    fontSize: rem(theme, hasIcon ? 19.2 : 12.8),\n    color: theme.palette.background.paper,\n  },\n}));\n\nconst TimelineCard = styled(Card, {\n  shouldForwardProp: (prop) => !['timelineVariant', 'isClickable'].includes(prop as string),\n})<{ timelineVariant: 'default' | 'compact' | 'detailed'; isClickable: boolean }>(\n  ({ theme, timelineVariant, isClickable }) => ({\n    flex: 1,\n    background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.9)} 0%, ${alpha(theme.palette.background.paper, 0.8)} 100%)`,\n    backdropFilter: `blur(${rem(theme, 10)})`,\n    WebkitBackdropFilter: `blur(${rem(theme, 10)})`,\n    border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,\n    transition: theme.transitions.create(['transform', 'box-shadow']),\n    ...(isClickable && {\n      cursor: 'pointer',\n      '&:hover': {\n        transform: `translateY(${rem(theme, -2)})`,\n        boxShadow: theme.shadows[8],\n      },\n    }),\n    ...(timelineVariant === 'compact' && {\n      padding: theme.spacing(1.5),\n      '& .MuiCardContent-root': {\n        padding: 0,\n        '&:last-child': {\n          paddingBottom: 0,\n        },\n      },\n    }),\n  }),\n);\n\nconst TimelineTimestamp = styled(Typography)(({ theme }) => ({\n  color: theme.palette.text.secondary,\n  fontSize: rem(theme, 12),\n  fontWeight: 500,\n  letterSpacing: rem(theme, 0.5),\n  textTransform: 'uppercase',\n}));\n\nconst MetadataChip = styled(Chip)(({ theme }) => ({\n  height: rem(theme, 24),\n  fontSize: rem(theme, 12),\n  background: alpha(theme.palette.primary.main, 0.08),\n  border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,\n}));\n\n// Description, metadata chips and the action button, revealed on expand — or\n// always, in the detailed variant.\nconst TimelineDetails: React.FC<{\n  item: TimelineItem;\n  isExpanded: boolean;\n  variant: NonNullable<TimelineProps['variant']>;\n}> = ({ item, isExpanded, variant }) => {\n  const open = isExpanded || variant === 'detailed';\n\n  return (\n    <Collapse in={open}>\n      <Fade in={open}>\n        <Stack spacing={1.5} sx={{ mt: 1 }}>\n          {item.description && (\n            <Typography variant=\"body2\" color=\"text.secondary\">\n              {item.description}\n            </Typography>\n          )}\n\n          {item.metadata && (\n            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>\n              {Object.entries(item.metadata).map(([key, value]) => (\n                <MetadataChip key={key} label={`${key}: ${value}`} size=\"small\" />\n              ))}\n            </Box>\n          )}\n\n          {item.action && (\n            <Box>\n              <Button\n                size=\"small\"\n                variant=\"contained\"\n                onClick={(e) => {\n                  e.stopPropagation();\n                  item.action!.onClick();\n                }}\n                sx={(theme) => ({\n                  background: `linear-gradient(135deg, ${uiInk(theme).celebration.violet[0]} 0%, ${uiInk(theme).celebration.violet[1]} 100%)`,\n                  color: onMedia(theme),\n                })}\n              >\n                {item.action.label}\n              </Button>\n            </Box>\n          )}\n        </Stack>\n      </Fade>\n    </Collapse>\n  );\n};\n\n// Timestamp, title and the expand toggle.\nconst TimelineCardHeader: React.FC<{\n  item: TimelineItem;\n  variant: NonNullable<TimelineProps['variant']>;\n  isExpanded: boolean;\n  onExpandClick: (itemId: string, event: React.MouseEvent) => void;\n}> = ({ item, variant, isExpanded, onExpandClick }) => (\n  <Box\n    sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}\n  >\n    <Box sx={{ flex: 1 }}>\n      <TimelineTimestamp data-testid=\"timeline-timestamp\">\n        {item.timestamp}\n      </TimelineTimestamp>\n      <Typography\n        variant={variant === 'compact' ? 'body2' : 'h6'}\n        fontWeight={variant === 'compact' ? 500 : 600}\n        sx={{ mt: 0.5 }}\n      >\n        {item.title}\n      </Typography>\n    </Box>\n    {item.description && variant !== 'compact' && (\n      <IconButton\n        size=\"small\"\n        onClick={(e) => onExpandClick(item.id, e)}\n        aria-label={isExpanded ? 'Collapse item details' : 'Expand item details'}\n        sx={{\n          transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',\n          transition: 'transform 0.3s ease',\n        }}\n      >\n        <ExpandIcon />\n      </IconButton>\n    )}\n  </Box>\n);\n\n// The card beside the rail: timestamp, title, expand toggle and the collapsible\n// detail body.\nconst TimelineRowCard: React.FC<{\n  item: TimelineItem;\n  variant: NonNullable<TimelineProps['variant']>;\n  isClickable: boolean;\n  isExpanded: boolean;\n  onItemClick?: (item: TimelineItem) => void;\n  onExpandClick: (itemId: string, event: React.MouseEvent) => void;\n}> = ({ item, variant, isClickable, isExpanded, onItemClick, onExpandClick }) => (\n  <TimelineCard\n    timelineVariant={variant}\n    isClickable={isClickable}\n    onClick={isClickable ? () => onItemClick?.(item) : undefined}\n    role=\"article\"\n    aria-label={`Timeline item: ${item.title}`}\n    data-testid=\"timeline-card\"\n  >\n    <CardContent>\n      <Stack spacing={1}>\n        <TimelineCardHeader\n          item={item}\n          variant={variant}\n          isExpanded={isExpanded}\n          onExpandClick={onExpandClick}\n        />\n\n        {variant === 'compact' && item.description && (\n          <Typography variant=\"caption\" color=\"text.secondary\">\n            {item.description}\n          </Typography>\n        )}\n\n        {variant !== 'compact' && (\n          <TimelineDetails item={item} isExpanded={isExpanded} variant={variant} />\n        )}\n      </Stack>\n    </CardContent>\n  </TimelineCard>\n);\n\n// One entry: the dot and connector on the rail, and the card beside it.\nexport const TimelineRow: React.FC<{\n  item: TimelineItem;\n  index: number;\n  isLast: boolean;\n  variant: NonNullable<TimelineProps['variant']>;\n  orientation: 'vertical' | 'horizontal';\n  showConnector: boolean;\n  animated: boolean;\n  alternating: boolean;\n  isExpanded: boolean;\n  onItemClick?: (item: TimelineItem) => void;\n  onExpandClick: (itemId: string, event: React.MouseEvent) => void;\n}> = ({\n  item,\n  index,\n  isLast,\n  variant,\n  orientation,\n  showConnector,\n  animated,\n  alternating,\n  isExpanded,\n  onItemClick,\n  onExpandClick,\n}) => {\n\n    \n  // Determine if item should be clickable:\n  // - Has onItemClick callback, OR\n  // - Has description and variant is not compact (so it can be expanded)\n  const hasExpandableContent = item.description && variant !== 'compact';\n  const isClickable = !!onItemClick || !!hasExpandableContent;\n\n  return (\n    <TimelineItemContainer\n      key={item.id}\n      animated={animated}\n      alternating={alternating && orientation === 'vertical'}\n      index={index}\n      orientation={orientation}\n      data-testid=\"timeline-item-container\"\n    >\n      <Box sx={{ position: 'relative' }}>\n        <TimelineDot\n          dotColor={item.color}\n          hasIcon={!!item.icon}\n          animated={animated}\n          data-testid=\"timeline-dot\"\n        >\n          {item.icon ? (\n            <Box data-testid=\"item-icon\">{item.icon}</Box>\n          ) : (\n            <DotIcon data-testid=\"item-icon-default\" />\n          )}\n        </TimelineDot>\n        {showConnector && !isLast && (\n          <TimelineConnector\n            orientation={orientation}\n            isLast={isLast}\n            data-testid=\"timeline-connector\"\n          />\n        )}\n      </Box>\n\n      <TimelineRowCard\n        item={item}\n        variant={variant}\n        isClickable={isClickable}\n        isExpanded={isExpanded}\n        onItemClick={onItemClick}\n        onExpandClick={onExpandClick}\n      />\n    </TimelineItemContainer>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA,OAAO,aAAa;AACpB,OAAO,gBAAgB;AACvB,OAAO,SAAS;AAChB,OAAO,YAAY;AACnB,OAAO,UAAU;AACjB,OAAO,iBAAiB;AACxB,OAAO,UAAU;AACjB,OAAO,cAAc;AACrB,OAAO,UAAU;AACjB,OAAO,gBAAgB;AACvB,OAAO,WAAW;AAClB,OAAO,gBAAgB;AACvB,SAAS,OAAO,WAAW,cAA0B;AA6I7C,SAEI,KAFJ;AAtIR,IAAM,mBAAmB,CAAC,UACxB,qDAAqD,IAAI,OAAO,GAAG,CAAC;AACtE,IAAM,iBAAiB;AAEvB,IAAM,wBAAwB,OAAO,KAAK;AAAA,EACxC,mBAAmB,CAAC,SAAS,CAAC,CAAC,YAAY,eAAe,OAAO,EAAE,SAAS,IAAc;AAC5F,CAAC,EAKE,CAAC,EAAE,OAAO,UAAU,aAAa,OAAO,YAAY,OAAO;AAAA,EAC5D,SAAS;AAAA,EACT,KAAK,MAAM,QAAQ,CAAC;AAAA,EACpB,UAAU;AAAA,EACV,GAAI,YAAY;AAAA,IACd,WAAW,GAAG,iBAAiB,KAAK,CAAC,cAAc,QAAQ,GAAG;AAAA,EAChE;AAAA,EACA,GAAI,gBAAgB,cAClB,eAAe;AAAA,IACb,eAAe,QAAQ,MAAM,IAAI,QAAQ;AAAA,IACzC,WAAW,QAAQ,MAAM,IAAI,SAAS;AAAA,EACxC;AAAA,EACF,GAAI,gBAAgB,gBAAgB;AAAA,IAClC,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,UAAU,IAAI,OAAO,GAAG;AAAA,EAC1B;AACF,EAAE;AAEF,IAAM,oBAAoB,OAAO,KAAK;AAAA,EACpC,mBAAmB,CAAC,SAAS,CAAC,CAAC,QAAQ,EAAE,SAAS,IAAc;AAClE,CAAC,EAGE,CAAC,EAAE,OAAO,aAAa,OAAO,OAAO;AAAA,EACtC,UAAU;AAAA,EACV,YAAY,2BAA2B,MAAM,QAAQ,QAAQ,IAAI,QAAQ,MAAM,MAAM,QAAQ,QAAQ,MAAM,GAAG,CAAC;AAAA,EAC/G,GAAI,gBAAgB,aAChB;AAAA,IACE,OAAO,IAAI,OAAO,CAAC;AAAA,IACnB,QAAQ,SAAS,IAAI,eAAe,IAAI,OAAO,EAAE,CAAC;AAAA,IAClD,MAAM,IAAI,OAAO,EAAE;AAAA,IACnB,KAAK,IAAI,OAAO,EAAE;AAAA,EACpB,IACA;AAAA,IACE,QAAQ,IAAI,OAAO,CAAC;AAAA,IACpB,OAAO,SAAS,IAAI,IAAI,OAAO,GAAG;AAAA,IAClC,KAAK,IAAI,OAAO,EAAE;AAAA,IAClB,MAAM,IAAI,OAAO,EAAE;AAAA,EACrB;AACN,EAAE;AAEF,IAAM,cAAc,OAAO,KAAK;AAAA,EAC9B,mBAAmB,CAAC,SAAS,CAAC,CAAC,YAAY,WAAW,UAAU,EAAE,SAAS,IAAc;AAC3F,CAAC,EAA8D,CAAC,EAAE,OAAO,UAAU,SAAS,SAAS,OAAO;AAAA,EAC1G,OAAO,IAAI,OAAO,EAAE;AAAA,EACpB,QAAQ,IAAI,OAAO,EAAE;AAAA,EACrB,cAAc;AAAA,EACd,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,YAAY,WACR,2BAA2B,QAAQ,QAAQ,MAAM,UAAU,GAAG,CAAC,WAC/D,2BAA2B,MAAM,QAAQ,QAAQ,IAAI,QAAQ,MAAM,QAAQ,QAAQ,KAAK;AAAA,EAC5F,WAAW,GAAG,KAAK,OAAO,GAAG,GAAG,EAAE,CAAC,IAAI,MAAM,YAAY,MAAM,QAAQ,QAAQ,MAAM,GAAG,CAAC;AAAA,EACzF,QAAQ,GAAG,IAAI,OAAO,CAAC,CAAC,UAAU,MAAM,QAAQ,WAAW,KAAK;AAAA,EAChE,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,GAAI,YAAY;AAAA,IACd,WAAW,GAAG,cAAc;AAAA,EAC9B;AAAA,EACA,SAAS;AAAA,IACP,UAAU,IAAI,OAAO,UAAU,OAAO,IAAI;AAAA,IAC1C,OAAO,MAAM,QAAQ,WAAW;AAAA,EAClC;AACF,EAAE;AAEF,IAAM,eAAe,OAAO,MAAM;AAAA,EAChC,mBAAmB,CAAC,SAAS,CAAC,CAAC,mBAAmB,aAAa,EAAE,SAAS,IAAc;AAC1F,CAAC;AAAA,EACC,CAAC,EAAE,OAAO,iBAAiB,YAAY,OAAO;AAAA,IAC5C,MAAM;AAAA,IACN,YAAY,2BAA2B,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG,CAAC,QAAQ,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG,CAAC;AAAA,IACnI,gBAAgB,QAAQ,IAAI,OAAO,EAAE,CAAC;AAAA,IACtC,sBAAsB,QAAQ,IAAI,OAAO,EAAE,CAAC;AAAA,IAC5C,QAAQ,aAAa,MAAM,MAAM,QAAQ,SAAS,IAAI,CAAC;AAAA,IACvD,YAAY,MAAM,YAAY,OAAO,CAAC,aAAa,YAAY,CAAC;AAAA,IAChE,GAAI,eAAe;AAAA,MACjB,QAAQ;AAAA,MACR,WAAW;AAAA,QACT,WAAW,cAAc,IAAI,OAAO,EAAE,CAAC;AAAA,QACvC,WAAW,MAAM,QAAQ,CAAC;AAAA,MAC5B;AAAA,IACF;AAAA,IACA,GAAI,oBAAoB,aAAa;AAAA,MACnC,SAAS,MAAM,QAAQ,GAAG;AAAA,MAC1B,0BAA0B;AAAA,QACxB,SAAS;AAAA,QACT,gBAAgB;AAAA,UACd,eAAe;AAAA,QACjB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAM,oBAAoB,OAAO,UAAU,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EAC3D,OAAO,MAAM,QAAQ,KAAK;AAAA,EAC1B,UAAU,IAAI,OAAO,EAAE;AAAA,EACvB,YAAY;AAAA,EACZ,eAAe,IAAI,OAAO,GAAG;AAAA,EAC7B,eAAe;AACjB,EAAE;AAEF,IAAM,eAAe,OAAO,IAAI,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EAChD,QAAQ,IAAI,OAAO,EAAE;AAAA,EACrB,UAAU,IAAI,OAAO,EAAE;AAAA,EACvB,YAAY,MAAM,MAAM,QAAQ,QAAQ,MAAM,IAAI;AAAA,EAClD,QAAQ,aAAa,MAAM,MAAM,QAAQ,QAAQ,MAAM,GAAG,CAAC;AAC7D,EAAE;AAIF,IAAM,kBAID,CAAC,EAAE,MAAM,YAAY,QAAQ,MAAM;AACtC,QAAM,OAAO,cAAc,YAAY;AAEvC,SACE,oBAAC,YAAS,IAAI,MACZ,8BAAC,QAAK,IAAI,MACR,+BAAC,SAAM,SAAS,KAAK,IAAI,EAAE,IAAI,EAAE,GAC9B;AAAA,SAAK,eACJ,oBAAC,cAAW,SAAQ,SAAQ,OAAM,kBAC/B,eAAK,aACR;AAAA,IAGD,KAAK,YACJ,oBAAC,OAAI,IAAI,EAAE,SAAS,QAAQ,UAAU,QAAQ,KAAK,EAAE,GAClD,iBAAO,QAAQ,KAAK,QAAQ,EAAE,IAAI,CAAC,CAAC,KAAK,KAAK,MAC7C,oBAAC,gBAAuB,OAAO,GAAG,GAAG,KAAK,KAAK,IAAI,MAAK,WAArC,GAA6C,CACjE,GACH;AAAA,IAGD,KAAK,UACJ,oBAAC,OACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,SAAS,CAAC,MAAM;AACd,YAAE,gBAAgB;AAClB,eAAK,OAAQ,QAAQ;AAAA,QACvB;AAAA,QACA,IAAI,CAAC,WAAW;AAAA,UACd,YAAY,2BAA2B,MAAM,KAAK,EAAE,YAAY,OAAO,CAAC,CAAC,QAAQ,MAAM,KAAK,EAAE,YAAY,OAAO,CAAC,CAAC;AAAA,UACnH,OAAO,QAAQ,KAAK;AAAA,QACtB;AAAA,QAEC,eAAK,OAAO;AAAA;AAAA,IACf,GACF;AAAA,KAEJ,GACF,GACF;AAEJ;AAGA,IAAM,qBAKD,CAAC,EAAE,MAAM,SAAS,YAAY,cAAc,MAC/C;AAAA,EAAC;AAAA;AAAA,IACC,IAAI,EAAE,SAAS,QAAQ,gBAAgB,iBAAiB,YAAY,aAAa;AAAA,IAEjF;AAAA,2BAAC,OAAI,IAAI,EAAE,MAAM,EAAE,GACjB;AAAA,4BAAC,qBAAkB,eAAY,sBAC5B,eAAK,WACR;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS,YAAY,YAAY,UAAU;AAAA,YAC3C,YAAY,YAAY,YAAY,MAAM;AAAA,YAC1C,IAAI,EAAE,IAAI,IAAI;AAAA,YAEb,eAAK;AAAA;AAAA,QACR;AAAA,SACF;AAAA,MACC,KAAK,eAAe,YAAY,aAC/B;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS,CAAC,MAAM,cAAc,KAAK,IAAI,CAAC;AAAA,UACxC,cAAY,aAAa,0BAA0B;AAAA,UACnD,IAAI;AAAA,YACF,WAAW,aAAa,mBAAmB;AAAA,YAC3C,YAAY;AAAA,UACd;AAAA,UAEA,8BAAC,cAAW;AAAA;AAAA,MACd;AAAA;AAAA;AAEJ;AAKF,IAAM,kBAOD,CAAC,EAAE,MAAM,SAAS,aAAa,YAAY,aAAa,cAAc,MACzE;AAAA,EAAC;AAAA;AAAA,IACC,iBAAiB;AAAA,IACjB;AAAA,IACA,SAAS,cAAc,MAAM,cAAc,IAAI,IAAI;AAAA,IACnD,MAAK;AAAA,IACL,cAAY,kBAAkB,KAAK,KAAK;AAAA,IACxC,eAAY;AAAA,IAEZ,8BAAC,eACC,+BAAC,SAAM,SAAS,GACd;AAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MAEC,YAAY,aAAa,KAAK,eAC7B,oBAAC,cAAW,SAAQ,WAAU,OAAM,kBACjC,eAAK,aACR;AAAA,MAGD,YAAY,aACX,oBAAC,mBAAgB,MAAY,YAAwB,SAAkB;AAAA,OAE3E,GACF;AAAA;AACF;AAIK,IAAM,cAYR,CAAC;AAAA,EACJ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AAMJ,QAAM,uBAAuB,KAAK,eAAe,YAAY;AAC7D,QAAM,cAAc,CAAC,CAAC,eAAe,CAAC,CAAC;AAEvC,SACE;AAAA,IAAC;AAAA;AAAA,MAEC;AAAA,MACA,aAAa,eAAe,gBAAgB;AAAA,MAC5C;AAAA,MACA;AAAA,MACA,eAAY;AAAA,MAEZ;AAAA,6BAAC,OAAI,IAAI,EAAE,UAAU,WAAW,GAC9B;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,UAAU,KAAK;AAAA,cACf,SAAS,CAAC,CAAC,KAAK;AAAA,cAChB;AAAA,cACA,eAAY;AAAA,cAEX,eAAK,OACJ,oBAAC,OAAI,eAAY,aAAa,eAAK,MAAK,IAExC,oBAAC,WAAQ,eAAY,qBAAoB;AAAA;AAAA,UAE7C;AAAA,UACC,iBAAiB,CAAC,UACjB;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA,eAAY;AAAA;AAAA,UACd;AAAA,WAEJ;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,IApCK,KAAK;AAAA,EAqCZ;AAEJ;","names":[]}