@12-apps/ui 6.34.0 → 6.36.0

package/dist/chunk-HBYWUSPI.js

@@ -1,266 +0,0 @@
-import {
-  onMedia,
-  uiInk
-} from "./chunk-FQ6UW7IY.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 = keyframes`from { opacity: 0; transform: translateX(-20px); } 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} 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: 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: 2,
-    height: isLast ? 0 : "calc(100% + 16px)",
-    left: 19,
-    top: 40
-  } : {
-    height: 2,
-    width: isLast ? 0 : "240px",
-    top: 19,
-    left: 40
-  }
-}));
-var TimelineDot = styled(Box, {
-  shouldForwardProp: (prop) => !["dotColor", "hasIcon", "animated"].includes(prop)
-})(({ theme, dotColor, hasIcon, animated }) => ({
-  width: 40,
-  height: 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: `0 4px 12px ${alpha(dotColor || theme.palette.primary.main, 0.3)}`,
-  border: `2px solid ${theme.palette.background.paper}`,
-  zIndex: 1,
-  flexShrink: 0,
-  ...animated && {
-    animation: `${pulseAnimation} 2s ease infinite`
-  },
-  "& svg": {
-    fontSize: hasIcon ? "1.2rem" : "0.8rem",
-    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(10px)",
-    WebkitBackdropFilter: "blur(10px)",
-    border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
-    transition: theme.transitions.create(["transform", "box-shadow"]),
-    ...isClickable && {
-      cursor: "pointer",
-      "&:hover": {
-        transform: "translateY(-2px)",
-        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: "0.75rem",
-  fontWeight: 500,
-  letterSpacing: "0.5px",
-  textTransform: "uppercase"
-}));
-var MetadataChip = styled(Chip)(({ theme }) => ({
-  height: 24,
-  fontSize: "0.75rem",
-  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-HBYWUSPI.js.map

package/dist/chunk-HBYWUSPI.js.map

@@ -1 +0,0 @@
-{"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 } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type { TimelineItem, TimelineProps } from './Timeline.types';\nimport { onMedia, uiInk } from '../../../tokens/ink';\n\nconst slideInAnimation = keyframes`from { opacity: 0; transform: translateX(-20px); } 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} 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: 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: 2,\n        height: isLast ? 0 : 'calc(100% + 16px)',\n        left: 19,\n        top: 40,\n      }\n    : {\n        height: 2,\n        width: isLast ? 0 : '240px',\n        top: 19,\n        left: 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: 40,\n  height: 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: `0 4px 12px ${alpha(dotColor || theme.palette.primary.main, 0.3)}`,\n  border: `2px solid ${theme.palette.background.paper}`,\n  zIndex: 1,\n  flexShrink: 0,\n  ...(animated && {\n    animation: `${pulseAnimation} 2s ease infinite`,\n  }),\n  '& svg': {\n    fontSize: hasIcon ? '1.2rem' : '0.8rem',\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(10px)',\n    WebkitBackdropFilter: 'blur(10px)',\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(-2px)',\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: '0.75rem',\n  fontWeight: 500,\n  letterSpacing: '0.5px',\n  textTransform: 'uppercase',\n}));\n\nconst MetadataChip = styled(Chip)(({ theme }) => ({\n  height: 24,\n  fontSize: '0.75rem',\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":"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","names":[]}

package/dist/chunk-HEVST4CS.js

@@ -1,347 +0,0 @@
-import {
-  usePhoneInput
-} from "./chunk-BGYLL467.js";
-import {
-  countries
-} from "./chunk-3JDP5OUR.js";
-import {
-  fieldControlStyles,
-  fieldTextFieldStyles
-} from "./chunk-CGO452DC.js";
-import {
-  fieldRadius
-} from "./chunk-GDN2LUTZ.js";
-import {
-  fieldEdge
-} from "./chunk-7FDU3FIN.js";
-
-// src/components/form/PhoneInput/PhoneInput.tsx
-import ArrowDropDown from "@mui/icons-material/ArrowDropDown";
-import PhoneIcon from "@mui/icons-material/Phone";
-import Box from "@mui/material/Box/index.js";
-import InputAdornment from "@mui/material/InputAdornment/index.js";
-import ListItemIcon from "@mui/material/ListItemIcon/index.js";
-import ListItemText from "@mui/material/ListItemText/index.js";
-import Menu from "@mui/material/Menu/index.js";
-import MenuItem from "@mui/material/MenuItem/index.js";
-import TextField from "@mui/material/TextField/index.js";
-import Typography from "@mui/material/Typography/index.js";
-import { alpha, styled, useTheme } from "@mui/material/styles/index.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-var FieldTextField = styled(TextField)(({ theme }) => fieldTextFieldStyles(theme));
-var GlassTextField = styled(TextField)(({ theme }) => ({
-  ...fieldControlStyles(theme),
-  "& .MuiOutlinedInput-root": {
-    borderRadius: fieldRadius(theme),
-    background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.8)} 0%, ${alpha(theme.palette.background.paper, 0.6)} 100%)`,
-    backdropFilter: "blur(10px)",
-    WebkitBackdropFilter: "blur(10px)",
-    border: `1px solid ${fieldEdge(theme)}`,
-    transition: theme.transitions.create(["border-color", "box-shadow", "background"]),
-    "&:hover": {
-      background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.9)} 0%, ${alpha(theme.palette.background.paper, 0.7)} 100%)`,
-      borderColor: theme.palette.primary.main
-    },
-    "&.Mui-focused": {
-      background: theme.palette.background.paper,
-      boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.25)}`
-    },
-    "& fieldset": {
-      border: "none"
-    }
-  },
-  "& .MuiInputLabel-root": {
-    "&.Mui-focused": {
-      color: theme.palette.primary.main
-    }
-  }
-}));
-var CountrySelector = styled(Box)(({ theme }) => ({
-  display: "flex",
-  alignItems: "center",
-  padding: theme.spacing(0.5, 1),
-  borderRadius: theme.shape.borderRadius,
-  cursor: "pointer",
-  transition: theme.transitions.create(["background-color"]),
-  "&:hover": {
-    backgroundColor: alpha(theme.palette.primary.main, 0.08)
-  }
-}));
-var CountryMenu = styled(Menu)(({ theme }) => ({
-  "& .MuiPaper-root": {
-    background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,
-    backdropFilter: "blur(20px)",
-    WebkitBackdropFilter: "blur(20px)",
-    border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
-    maxHeight: 400
-  }
-}));
-var PhoneField = ({
-  TextFieldComponent,
-  copy,
-  variant,
-  label,
-  placeholder,
-  value,
-  validation,
-  disabled,
-  required,
-  fullWidth,
-  icon,
-  isValid,
-  selectedCountry,
-  anchorEl,
-  onChange,
-  onFocus,
-  onBlur,
-  onCountryOpen,
-  onCountryOpenViaKeyboard
-}) => /* @__PURE__ */ jsx(
-  TextFieldComponent,
-  {
-    variant: variant === "glass" ? "outlined" : variant,
-    label,
-    placeholder,
-    value,
-    onChange,
-    onFocus,
-    onBlur,
-    error: validation.hasError,
-    helperText: validation.helperText,
-    disabled,
-    required,
-    fullWidth,
-    type: "tel",
-    "data-testid": "phone-input-field",
-    InputProps: {
-      startAdornment: /* @__PURE__ */ jsx(
-        CountryAdornment,
-        {
-          selectCountryLabel: copy.selectCountry,
-          country: selectedCountry,
-          menuOpen: Boolean(anchorEl),
-          onOpen: onCountryOpen,
-          onOpenViaKeyboard: onCountryOpenViaKeyboard
-        }
-      ),
-      endAdornment: /* @__PURE__ */ jsx(ValidityAdornment, { icon, isValid })
-    },
-    sx: {
-      "& input": {
-        letterSpacing: "0.5px"
-      }
-    }
-  }
-);
-var PHONE_INPUT_DEFAULTS = {
-  variant: "outlined",
-  label: "Phone Number",
-  placeholder: "Enter phone number",
-  icon: /* @__PURE__ */ jsx(PhoneIcon, {}),
-  defaultValue: "",
-  countryCode: "US",
-  floating: false,
-  error: false,
-  disabled: false,
-  required: false,
-  fullWidth: true
-};
-var definedProps = (props) => Object.fromEntries(
-  Object.entries(props).filter(([, value]) => value !== void 0)
-);
-var CountryAdornment = ({ country, menuOpen, onOpen, onOpenViaKeyboard, selectCountryLabel }) => /* @__PURE__ */ jsx(InputAdornment, { position: "start", "data-testid": "phone-input-start-adornment", children: /* @__PURE__ */ jsxs(
-  CountrySelector,
-  {
-    onClick: onOpen,
-    role: "button",
-    "aria-label": selectCountryLabel,
-    "aria-expanded": menuOpen,
-    tabIndex: 0,
-    "data-testid": "country-selector",
-    onKeyDown: (e) => {
-      if (e.key !== "Enter" && e.key !== " ") return;
-      e.preventDefault();
-      onOpenViaKeyboard(e.currentTarget);
-    },
-    children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "h6", component: "span", sx: { mr: 0.5 }, "data-testid": "country-flag", children: country?.flag }),
-      /* @__PURE__ */ jsx(
-        Typography,
-        {
-          variant: "body2",
-          color: "text.secondary",
-          sx: { mr: 0.5 },
-          "data-testid": "country-dial-code",
-          children: country?.dial
-        }
-      ),
-      /* @__PURE__ */ jsx(ArrowDropDown, { fontSize: "small", "data-testid": "country-dropdown-icon" })
-    ]
-  }
-) });
-var ValidityAdornment = ({
-  icon,
-  isValid
-}) => {
-  const theme = useTheme();
-  if (!icon) return null;
-  return /* @__PURE__ */ jsx(InputAdornment, { position: "end", "data-testid": "phone-input-end-adornment", children: /* @__PURE__ */ jsx(
-    Box,
-    {
-      sx: {
-        color: isValid ? theme.palette.success.main : theme.palette.text.secondary,
-        transition: "color 0.3s ease"
-      },
-      "data-testid": "phone-input-icon",
-      children: icon
-    }
-  ) });
-};
-var CountryPicker = ({ anchorEl, selectedCode, onClose, onSelect }) => {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsx(
-    CountryMenu,
-    {
-      anchorEl,
-      open: Boolean(anchorEl),
-      onClose,
-      anchorOrigin: {
-        vertical: "bottom",
-        horizontal: "left"
-      },
-      transformOrigin: {
-        vertical: "top",
-        horizontal: "left"
-      },
-      "data-testid": "country-menu",
-      children: countries.map((country) => /* @__PURE__ */ jsxs(
-        MenuItem,
-        {
-          onClick: () => onSelect(country),
-          selected: country.code === selectedCode,
-          "data-testid": `country-option-${country.code}`,
-          sx: {
-            "&:hover": {
-              background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)} 0%, ${alpha(theme.palette.primary.main, 0.05)} 100%)`
-            }
-          },
-          children: [
-            /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 36 }, children: /* @__PURE__ */ jsx(Typography, { variant: "h5", component: "span", children: country.flag }) }),
-            /* @__PURE__ */ jsx(
-              ListItemText,
-              {
-                primary: country.name,
-                secondary: country.dial,
-                primaryTypographyProps: { fontSize: "0.9rem" },
-                secondaryTypographyProps: { fontSize: "0.8rem" }
-              }
-            )
-          ]
-        },
-        country.code
-      ))
-    }
-  );
-};
-var resolveValidation = ({
-  error,
-  errorMessage,
-  isValid,
-  value,
-  isFocused,
-  helper,
-  countryName,
-  copy
-}) => {
-  const looksInvalid = !isValid && value !== "" && !isFocused;
-  return {
-    hasError: error || looksInvalid,
-    helperText: errorMessage || (looksInvalid ? copy.invalidNumber(countryName || copy.unknownCountry) : helper)
-  };
-};
-var PhoneInput = (props) => {
-  const { copy } = props;
-  const {
-    variant,
-    label,
-    placeholder,
-    icon,
-    defaultValue,
-    countryCode: initialCountryCode,
-    floating,
-    onChange,
-    helper,
-    error,
-    errorMessage,
-    disabled,
-    required,
-    fullWidth
-  } = { ...PHONE_INPUT_DEFAULTS, ...definedProps(props) };
-  const {
-    value,
-    selectedCountry,
-    anchorEl,
-    isValid,
-    isFocused,
-    setIsFocused,
-    setAnchorEl,
-    handleCountryClick,
-    handleCountryClose,
-    handleCountrySelect,
-    handleChange,
-    handleBlur
-  } = usePhoneInput({ defaultValue, initialCountryCode, onChange });
-  const validation = resolveValidation({
-    error,
-    errorMessage,
-    isValid,
-    value,
-    isFocused,
-    helper,
-    countryName: selectedCountry?.name,
-    copy
-  });
-  const TextFieldComponent = variant === "glass" ? GlassTextField : FieldTextField;
-  return /* @__PURE__ */ jsxs(Box, { "data-testid": "phone-input-container", children: [
-    /* @__PURE__ */ jsx(
-      PhoneField,
-      {
-        copy,
-        TextFieldComponent,
-        variant,
-        label: floating ? void 0 : label,
-        placeholder,
-        value,
-        validation,
-        disabled,
-        required,
-        fullWidth,
-        icon,
-        isValid,
-        selectedCountry,
-        anchorEl,
-        onChange: handleChange,
-        onFocus: () => setIsFocused(true),
-        onBlur: handleBlur,
-        onCountryOpen: handleCountryClick,
-        onCountryOpenViaKeyboard: setAnchorEl
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      CountryPicker,
-      {
-        anchorEl,
-        selectedCode: selectedCountry?.code,
-        onClose: handleCountryClose,
-        onSelect: handleCountrySelect
-      }
-    )
-  ] });
-};
-var PhoneInput_default = PhoneInput;
-
-export {
-  PhoneInput,
-  PhoneInput_default
-};
-//# sourceMappingURL=chunk-HEVST4CS.js.map