@12-apps/ui 6.11.1 → 6.12.0

package/dist/chunk-FLSSV4TH.js

@@ -0,0 +1,191 @@
+import {
+  useDashboardContext
+} from "./chunk-CUMSPE6B.js";
+import {
+  HeaderButton
+} from "./chunk-2CEV746H.js";
+
+// src/components/layout/Dashboard/DashboardParts.tsx
+import CloseIcon from "@mui/icons-material/Close";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import ExportIcon from "@mui/icons-material/FileDownloadOutlined";
+import FilterIcon from "@mui/icons-material/FilterListRounded";
+import InfoIcon from "@mui/icons-material/InfoOutlined";
+import SettingsIcon from "@mui/icons-material/SettingsOutlined";
+import Badge from "@mui/material/Badge/index.js";
+import Box from "@mui/material/Box/index.js";
+import Dialog from "@mui/material/Dialog/index.js";
+import DialogContent from "@mui/material/DialogContent/index.js";
+import DialogTitle from "@mui/material/DialogTitle/index.js";
+import IconButton from "@mui/material/IconButton/index.js";
+import Menu from "@mui/material/Menu/index.js";
+import MenuItem from "@mui/material/MenuItem/index.js";
+import Popover from "@mui/material/Popover/index.js";
+import Tooltip from "@mui/material/Tooltip/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DashboardSpacer = () => /* @__PURE__ */ jsx(Box, { sx: { flex: 1 }, "aria-hidden": true });
+DashboardSpacer.displayName = "Dashboard.Spacer";
+var DashboardInfo = ({
+  title = "About this page",
+  children,
+  ariaLabel = "Page information"
+}) => {
+  const { testIdPrefix } = useDashboardContext();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Tooltip, { title: ariaLabel, children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        size: "small",
+        "aria-label": ariaLabel,
+        "aria-haspopup": "dialog",
+        onClick: (e) => setAnchorEl(e.currentTarget),
+        "data-testid": `${testIdPrefix}-info-trigger`,
+        sx: { color: "text.secondary" },
+        children: /* @__PURE__ */ jsx(InfoIcon, { fontSize: "small" })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      Popover,
+      {
+        open,
+        anchorEl,
+        onClose: () => setAnchorEl(null),
+        anchorOrigin: { vertical: "bottom", horizontal: "left" },
+        slotProps: { paper: { sx: { width: 360, maxWidth: "90vw" } } },
+        "data-testid": `${testIdPrefix}-info-popover`,
+        children: [
+          /* @__PURE__ */ jsxs(Box, { sx: { px: 2, py: 1.5, borderBottom: 1, borderColor: "divider", display: "flex", gap: 1, alignItems: "center" }, children: [
+            /* @__PURE__ */ jsx(InfoIcon, { fontSize: "small", sx: { color: "text.secondary" } }),
+            /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 600 }, children: title })
+          ] }),
+          /* @__PURE__ */ jsx(Box, { sx: { px: 2, py: 1.5, fontSize: "0.875rem", color: "text.secondary" }, children })
+        ]
+      }
+    )
+  ] });
+};
+DashboardInfo.displayName = "Dashboard.Info";
+var DashboardFilterToggle = ({ ariaLabel }) => {
+  const { filtersVisible, toggleFilters, activeFilterCount, testIdPrefix } = useDashboardContext();
+  const label = ariaLabel ?? (filtersVisible ? "Hide filters" : "Show filters");
+  return /* @__PURE__ */ jsx(Tooltip, { title: label, children: /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      size: "small",
+      "aria-label": label,
+      "aria-pressed": filtersVisible,
+      onClick: toggleFilters,
+      "data-testid": `${testIdPrefix}-filter-toggle`,
+      sx: { color: filtersVisible ? "primary.main" : "text.secondary", bgcolor: filtersVisible ? "action.selected" : "transparent" },
+      children: /* @__PURE__ */ jsx(Badge, { badgeContent: activeFilterCount, color: "primary", overlap: "circular", children: /* @__PURE__ */ jsx(FilterIcon, { fontSize: "small" }) })
+    }
+  ) });
+};
+DashboardFilterToggle.displayName = "Dashboard.FilterToggle";
+var DashboardSettings = ({
+  title = "Settings",
+  closeLabel,
+  children,
+  ariaLabel = "Settings",
+  href,
+  linkComponent
+}) => {
+  const { testIdPrefix } = useDashboardContext();
+  const [open, setOpen] = useState(false);
+  if (href) {
+    const LinkComponent = linkComponent ?? "a";
+    return /* @__PURE__ */ jsx(Tooltip, { title: ariaLabel, children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        size: "small",
+        "aria-label": ariaLabel,
+        component: LinkComponent,
+        href,
+        "data-testid": `${testIdPrefix}-settings-trigger`,
+        sx: { color: "text.secondary" },
+        children: /* @__PURE__ */ jsx(SettingsIcon, { fontSize: "small" })
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Tooltip, { title: ariaLabel, children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        size: "small",
+        "aria-label": ariaLabel,
+        "aria-haspopup": "dialog",
+        onClick: () => setOpen(true),
+        "data-testid": `${testIdPrefix}-settings-trigger`,
+        sx: { color: "text.secondary" },
+        children: /* @__PURE__ */ jsx(SettingsIcon, { fontSize: "small" })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(Dialog, { open, onClose: () => setOpen(false), maxWidth: "sm", fullWidth: true, "data-testid": `${testIdPrefix}-settings-dialog`, children: [
+      /* @__PURE__ */ jsxs(DialogTitle, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+        title,
+        /* @__PURE__ */ jsx(IconButton, { "aria-label": closeLabel, size: "small", onClick: () => setOpen(false), children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" }) })
+      ] }),
+      /* @__PURE__ */ jsx(DialogContent, { dividers: true, children })
+    ] })
+  ] });
+};
+DashboardSettings.displayName = "Dashboard.Settings";
+var DEFAULT_EXPORT_FORMATS = [
+  { id: "csv", label: "CSV (.csv)" },
+  { id: "xlsx", label: "Excel (.xlsx)" },
+  { id: "json", label: "JSON (.json)" }
+];
+var DashboardExport = ({
+  formats = DEFAULT_EXPORT_FORMATS,
+  onExport,
+  label = "Export"
+}) => {
+  const { testIdPrefix } = useDashboardContext();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      HeaderButton,
+      {
+        variant: "outlined",
+        color: "inherit",
+        text: label,
+        icon: /* @__PURE__ */ jsx(ExportIcon, { fontSize: "small" }),
+        endIcon: /* @__PURE__ */ jsx(ExpandMoreIcon, { fontSize: "small" }),
+        onClick: (e) => setAnchorEl(e.currentTarget),
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        dataTestId: `${testIdPrefix}-export-trigger`
+      }
+    ),
+    /* @__PURE__ */ jsx(Menu, { anchorEl, open, onClose: () => setAnchorEl(null), "data-testid": `${testIdPrefix}-export-menu`, children: formats.map((format) => /* @__PURE__ */ jsx(
+      MenuItem,
+      {
+        onClick: () => {
+          onExport(format.id);
+          setAnchorEl(null);
+        },
+        "data-testid": `${testIdPrefix}-export-${format.id}`,
+        children: format.label
+      },
+      format.id
+    )) })
+  ] });
+};
+DashboardExport.displayName = "Dashboard.Export";
+var DashboardAction = ({ children }) => /* @__PURE__ */ jsx(Box, { sx: { display: "inline-flex" }, children });
+DashboardAction.displayName = "Dashboard.Action";
+
+export {
+  DashboardSpacer,
+  DashboardInfo,
+  DashboardFilterToggle,
+  DashboardSettings,
+  DashboardExport,
+  DashboardAction
+};
+//# sourceMappingURL=chunk-FLSSV4TH.js.map

package/dist/chunk-FLSSV4TH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Dashboard/DashboardParts.tsx"],"sourcesContent":["'use client';\n\nimport CloseIcon from '@mui/icons-material/Close';\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore';\nimport ExportIcon from '@mui/icons-material/FileDownloadOutlined';\nimport FilterIcon from '@mui/icons-material/FilterListRounded';\nimport InfoIcon from '@mui/icons-material/InfoOutlined';\nimport SettingsIcon from '@mui/icons-material/SettingsOutlined';\nimport Badge from '@mui/material/Badge/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport Dialog from '@mui/material/Dialog/index.js';\nimport DialogContent from '@mui/material/DialogContent/index.js';\nimport DialogTitle from '@mui/material/DialogTitle/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Menu from '@mui/material/Menu/index.js';\nimport MenuItem from '@mui/material/MenuItem/index.js';\nimport Popover from '@mui/material/Popover/index.js';\nimport Tooltip from '@mui/material/Tooltip/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport React, { useState } from 'react';\n\nimport { HeaderButton } from '../../form/HeaderButton';\nimport { useDashboardContext } from './DashboardContext';\nimport type {\n  DashboardActionProps,\n  DashboardExportFormat,\n  DashboardExportProps,\n  DashboardFilterToggleProps,\n  DashboardInfoProps,\n  DashboardSettingsProps,\n} from './Dashboard.types';\n\n/** Flexible spacer — everything composed after it is pushed to the right. */\nexport const DashboardSpacer = (): React.JSX.Element => <Box sx={{ flex: 1 }} aria-hidden />;\nDashboardSpacer.displayName = 'Dashboard.Spacer';\n\nexport const DashboardInfo = ({\n  title = 'About this page',\n  children,\n  ariaLabel = 'Page information',\n}: DashboardInfoProps): React.JSX.Element => {\n  const { testIdPrefix } = useDashboardContext();\n  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);\n  const open = Boolean(anchorEl);\n  return (\n    <>\n      <Tooltip title={ariaLabel}>\n        <IconButton\n          size=\"small\"\n          aria-label={ariaLabel}\n          aria-haspopup=\"dialog\"\n          onClick={(e) => setAnchorEl(e.currentTarget)}\n          data-testid={`${testIdPrefix}-info-trigger`}\n          sx={{ color: 'text.secondary' }}\n        >\n          <InfoIcon fontSize=\"small\" />\n        </IconButton>\n      </Tooltip>\n      <Popover\n        open={open}\n        anchorEl={anchorEl}\n        onClose={() => setAnchorEl(null)}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}\n        slotProps={{ paper: { sx: { width: 360, maxWidth: '90vw' } } }}\n        data-testid={`${testIdPrefix}-info-popover`}\n      >\n        <Box sx={{ px: 2, py: 1.5, borderBottom: 1, borderColor: 'divider', display: 'flex', gap: 1, alignItems: 'center' }}>\n          <InfoIcon fontSize=\"small\" sx={{ color: 'text.secondary' }} />\n          <Typography sx={{ fontWeight: 600 }}>{title}</Typography>\n        </Box>\n        <Box sx={{ px: 2, py: 1.5, fontSize: '0.875rem', color: 'text.secondary' }}>{children}</Box>\n      </Popover>\n    </>\n  );\n};\nDashboardInfo.displayName = 'Dashboard.Info';\n\nexport const DashboardFilterToggle = ({ ariaLabel }: DashboardFilterToggleProps): React.JSX.Element => {\n  const { filtersVisible, toggleFilters, activeFilterCount, testIdPrefix } = useDashboardContext();\n  const label = ariaLabel ?? (filtersVisible ? 'Hide filters' : 'Show filters');\n  return (\n    <Tooltip title={label}>\n      <IconButton\n        size=\"small\"\n        aria-label={label}\n        aria-pressed={filtersVisible}\n        onClick={toggleFilters}\n        data-testid={`${testIdPrefix}-filter-toggle`}\n        sx={{ color: filtersVisible ? 'primary.main' : 'text.secondary', bgcolor: filtersVisible ? 'action.selected' : 'transparent' }}\n      >\n        <Badge badgeContent={activeFilterCount} color=\"primary\" overlap=\"circular\">\n          <FilterIcon fontSize=\"small\" />\n        </Badge>\n      </IconButton>\n    </Tooltip>\n  );\n};\nDashboardFilterToggle.displayName = 'Dashboard.FilterToggle';\n\nexport const DashboardSettings = ({\n  title = 'Settings',\n  closeLabel,\n  children,\n  ariaLabel = 'Settings',\n  href,\n  linkComponent,\n}: DashboardSettingsProps): React.JSX.Element => {\n  const { testIdPrefix } = useDashboardContext();\n  const [open, setOpen] = useState(false);\n\n  // Link mode: the gear navigates to a settings route (e.g. the page's\n  // Configuração section) instead of opening an in-page dialog.\n  if (href) {\n    const LinkComponent = linkComponent ?? 'a';\n    return (\n      <Tooltip title={ariaLabel}>\n        <IconButton\n          size=\"small\"\n          aria-label={ariaLabel}\n          component={LinkComponent}\n          href={href}\n          data-testid={`${testIdPrefix}-settings-trigger`}\n          sx={{ color: 'text.secondary' }}\n        >\n          <SettingsIcon fontSize=\"small\" />\n        </IconButton>\n      </Tooltip>\n    );\n  }\n\n  return (\n    <>\n      <Tooltip title={ariaLabel}>\n        <IconButton\n          size=\"small\"\n          aria-label={ariaLabel}\n          aria-haspopup=\"dialog\"\n          onClick={() => setOpen(true)}\n          data-testid={`${testIdPrefix}-settings-trigger`}\n          sx={{ color: 'text.secondary' }}\n        >\n          <SettingsIcon fontSize=\"small\" />\n        </IconButton>\n      </Tooltip>\n      <Dialog open={open} onClose={() => setOpen(false)} maxWidth=\"sm\" fullWidth data-testid={`${testIdPrefix}-settings-dialog`}>\n        <DialogTitle sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>\n          {title}\n          <IconButton aria-label={closeLabel} size=\"small\" onClick={() => setOpen(false)}>\n            <CloseIcon fontSize=\"small\" />\n          </IconButton>\n        </DialogTitle>\n        <DialogContent dividers>{children}</DialogContent>\n      </Dialog>\n    </>\n  );\n};\nDashboardSettings.displayName = 'Dashboard.Settings';\n\nconst DEFAULT_EXPORT_FORMATS: DashboardExportFormat[] = [\n  { id: 'csv', label: 'CSV (.csv)' },\n  { id: 'xlsx', label: 'Excel (.xlsx)' },\n  { id: 'json', label: 'JSON (.json)' },\n];\n\nexport const DashboardExport = ({\n  formats = DEFAULT_EXPORT_FORMATS,\n  onExport,\n  label = 'Export',\n}: DashboardExportProps): React.JSX.Element => {\n  const { testIdPrefix } = useDashboardContext();\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n  const open = Boolean(anchorEl);\n  return (\n    <>\n      <HeaderButton\n        variant=\"outlined\"\n        color=\"inherit\"\n        text={label}\n        icon={<ExportIcon fontSize=\"small\" />}\n        endIcon={<ExpandMoreIcon fontSize=\"small\" />}\n        onClick={(e) => setAnchorEl(e.currentTarget)}\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n        dataTestId={`${testIdPrefix}-export-trigger`}\n      />\n      <Menu anchorEl={anchorEl} open={open} onClose={() => setAnchorEl(null)} data-testid={`${testIdPrefix}-export-menu`}>\n        {formats.map((format) => (\n          <MenuItem\n            key={format.id}\n            onClick={() => {\n              onExport(format.id);\n              setAnchorEl(null);\n            }}\n            data-testid={`${testIdPrefix}-export-${format.id}`}\n          >\n            {format.label}\n          </MenuItem>\n        ))}\n      </Menu>\n    </>\n  );\n};\nDashboardExport.displayName = 'Dashboard.Export';\n\nexport const DashboardAction = ({ children }: DashboardActionProps): React.JSX.Element => (\n  <Box sx={{ display: 'inline-flex' }}>{children}</Box>\n);\nDashboardAction.displayName = 'Dashboard.Action';\n"],"mappings":"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","names":[]}

package/dist/chunk-FRW4SYZD.js

@@ -0,0 +1,79 @@
+import {
+  MARKER_PIXELS_PER_DEGREE
+} from "./chunk-H2J2MTRE.js";
+import {
+  BOUNCE_KEYFRAMES
+} from "./chunk-DRADVLHZ.js";
+
+// src/components/data-display/MapPreview/MapMarkers.tsx
+import LocationIcon from "@mui/icons-material/LocationOn";
+import Box from "@mui/material/Box/index.js";
+import Tooltip from "@mui/material/Tooltip/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, styled, useTheme } from "@mui/material/styles/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var CoordinatesDisplay = styled(Box)(({ theme }) => ({
+  position: "absolute",
+  bottom: theme.spacing(2),
+  left: theme.spacing(2),
+  padding: theme.spacing(1, 1.5),
+  background: alpha(theme.palette.background.paper, 0.95),
+  backdropFilter: "blur(10px)",
+  WebkitBackdropFilter: "blur(10px)",
+  border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+  borderRadius: theme.shape.borderRadius,
+  zIndex: 1
+}));
+var MapMarkers = ({ markers, centre, animated }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(Fragment, { children: markers.map((markerItem, index) => /* @__PURE__ */ jsx(
+    Box,
+    {
+      "data-testid": `map-marker-${index}`,
+      sx: {
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: `translate(
+              ${(markerItem.position.lng - centre.lng) * MARKER_PIXELS_PER_DEGREE}px,
+              ${-(markerItem.position.lat - centre.lat) * MARKER_PIXELS_PER_DEGREE}px
+            )`,
+        zIndex: 3,
+        cursor: markerItem.onClick ? "pointer" : "default"
+      },
+      onClick: markerItem.onClick,
+      title: markerItem.title,
+      children: /* @__PURE__ */ jsx(Tooltip, { title: markerItem.description || markerItem.title || "", children: /* @__PURE__ */ jsx(
+        LocationIcon,
+        {
+          sx: {
+            fontSize: 32,
+            color: theme.palette.error.main,
+            filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.3))",
+            animation: animated ? "bounce 2s infinite" : "none",
+            "@keyframes bounce": BOUNCE_KEYFRAMES
+          }
+        }
+      ) })
+    },
+    `${markerItem.position.lat}-${markerItem.position.lng}-${index}`
+  )) });
+};
+var MapCoordinates = ({ position, zoom }) => /* @__PURE__ */ jsxs(CoordinatesDisplay, { "data-testid": "coordinates-display", children: [
+  /* @__PURE__ */ jsxs(Typography, { variant: "caption", sx: { fontFamily: "monospace" }, children: [
+    "Lat: ",
+    position.lat.toFixed(6),
+    ", Lng: ",
+    position.lng.toFixed(6)
+  ] }),
+  zoom > 0 && /* @__PURE__ */ jsxs(Typography, { variant: "caption", sx: { fontFamily: "monospace", display: "block" }, children: [
+    "Zoom: ",
+    zoom
+  ] })
+] });
+
+export {
+  MapMarkers,
+  MapCoordinates
+};
+//# sourceMappingURL=chunk-FRW4SYZD.js.map

package/dist/chunk-FRW4SYZD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/MapPreview/MapMarkers.tsx"],"sourcesContent":["import LocationIcon from '@mui/icons-material/LocationOn';\nimport 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 { FC } from 'react';\nimport React from 'react';\n\nimport { MARKER_PIXELS_PER_DEGREE } from './MapPreview.constants';\nimport type { LatLng, MapMarker } from './MapPreview.types';\nimport { BOUNCE_KEYFRAMES } from './mapSurface';\n\n// Kept module-local: styled() components cannot be exported across a module\n// boundary here without tripping TS2742.\nconst CoordinatesDisplay = styled(Box)(({ theme }) => ({\n  position: 'absolute',\n  bottom: theme.spacing(2),\n  left: theme.spacing(2),\n  padding: theme.spacing(1, 1.5),\n  background: alpha(theme.palette.background.paper, 0.95),\n  backdropFilter: 'blur(10px)',\n  WebkitBackdropFilter: 'blur(10px)',\n  border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n  borderRadius: theme.shape.borderRadius,\n  zIndex: 1,\n}));\n\nexport interface MapMarkersProps {\n  markers: MapMarker[];\n  centre: LatLng;\n  animated: boolean;\n}\n\n// Markers are placed relative to the current centre, so panning moves them with\n// the surface.\nexport const MapMarkers: FC<MapMarkersProps> = ({ markers, centre, animated }) => {\n  const theme = useTheme();\n\n  return (\n    <>\n      {markers.map((markerItem, index) => (\n        <Box\n          key={`${markerItem.position.lat}-${markerItem.position.lng}-${index}`}\n          data-testid={`map-marker-${index}`}\n          sx={{\n            position: 'absolute',\n            top: '50%',\n            left: '50%',\n            transform: `translate(\n              ${(markerItem.position.lng - centre.lng) * MARKER_PIXELS_PER_DEGREE}px,\n              ${-(markerItem.position.lat - centre.lat) * MARKER_PIXELS_PER_DEGREE}px\n            )`,\n            zIndex: 3,\n            cursor: markerItem.onClick ? 'pointer' : 'default',\n          }}\n          onClick={markerItem.onClick}\n          title={markerItem.title}\n        >\n          <Tooltip title={markerItem.description || markerItem.title || ''}>\n            <LocationIcon\n              sx={{\n                fontSize: 32,\n                color: theme.palette.error.main,\n                filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.3))',\n                animation: animated ? 'bounce 2s infinite' : 'none',\n                '@keyframes bounce': BOUNCE_KEYFRAMES,\n              }}\n            />\n          </Tooltip>\n        </Box>\n      ))}\n    </>\n  );\n};\n\nexport const MapCoordinates: FC<{ position: LatLng; zoom: number }> = ({ position, zoom }) => (\n  <CoordinatesDisplay data-testid=\"coordinates-display\">\n    <Typography variant=\"caption\" sx={{ fontFamily: 'monospace' }}>\n      Lat: {position.lat.toFixed(6)}, Lng: {position.lng.toFixed(6)}\n    </Typography>\n    {zoom > 0 && (\n      <Typography variant=\"caption\" sx={{ fontFamily: 'monospace', display: 'block' }}>\n        Zoom: {zoom}\n      </Typography>\n    )}\n  </CoordinatesDisplay>\n);\n"],"mappings":";;;;;;;;AAAA,OAAO,kBAAkB;AACzB,OAAO,SAAS;AAChB,OAAO,aAAa;AACpB,OAAO,gBAAgB;AACvB,SAAS,OAAO,QAAQ,gBAAgB;AAmCpC,mBAoBQ,KAkBR,YAtCA;AAzBJ,IAAM,qBAAqB,OAAO,GAAG,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EACrD,UAAU;AAAA,EACV,QAAQ,MAAM,QAAQ,CAAC;AAAA,EACvB,MAAM,MAAM,QAAQ,CAAC;AAAA,EACrB,SAAS,MAAM,QAAQ,GAAG,GAAG;AAAA,EAC7B,YAAY,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI;AAAA,EACtD,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,QAAQ,aAAa,MAAM,MAAM,QAAQ,SAAS,GAAG,CAAC;AAAA,EACtD,cAAc,MAAM,MAAM;AAAA,EAC1B,QAAQ;AACV,EAAE;AAUK,IAAM,aAAkC,CAAC,EAAE,SAAS,QAAQ,SAAS,MAAM;AAChF,QAAM,QAAQ,SAAS;AAEvB,SACE,gCACG,kBAAQ,IAAI,CAAC,YAAY,UACxB;AAAA,IAAC;AAAA;AAAA,MAEC,eAAa,cAAc,KAAK;AAAA,MAChC,IAAI;AAAA,QACF,UAAU;AAAA,QACV,KAAK;AAAA,QACL,MAAM;AAAA,QACN,WAAW;AAAA,iBACN,WAAW,SAAS,MAAM,OAAO,OAAO,wBAAwB;AAAA,gBACjE,EAAE,WAAW,SAAS,MAAM,OAAO,OAAO,wBAAwB;AAAA;AAAA,QAEtE,QAAQ;AAAA,QACR,QAAQ,WAAW,UAAU,YAAY;AAAA,MAC3C;AAAA,MACA,SAAS,WAAW;AAAA,MACpB,OAAO,WAAW;AAAA,MAElB,8BAAC,WAAQ,OAAO,WAAW,eAAe,WAAW,SAAS,IAC5D;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,YACF,UAAU;AAAA,YACV,OAAO,MAAM,QAAQ,MAAM;AAAA,YAC3B,QAAQ;AAAA,YACR,WAAW,WAAW,uBAAuB;AAAA,YAC7C,qBAAqB;AAAA,UACvB;AAAA;AAAA,MACF,GACF;AAAA;AAAA,IA1BK,GAAG,WAAW,SAAS,GAAG,IAAI,WAAW,SAAS,GAAG,IAAI,KAAK;AAAA,EA2BrE,CACD,GACH;AAEJ;AAEO,IAAM,iBAAyD,CAAC,EAAE,UAAU,KAAK,MACtF,qBAAC,sBAAmB,eAAY,uBAC9B;AAAA,uBAAC,cAAW,SAAQ,WAAU,IAAI,EAAE,YAAY,YAAY,GAAG;AAAA;AAAA,IACvD,SAAS,IAAI,QAAQ,CAAC;AAAA,IAAE;AAAA,IAAQ,SAAS,IAAI,QAAQ,CAAC;AAAA,KAC9D;AAAA,EACC,OAAO,KACN,qBAAC,cAAW,SAAQ,WAAU,IAAI,EAAE,YAAY,aAAa,SAAS,QAAQ,GAAG;AAAA;AAAA,IACxE;AAAA,KACT;AAAA,GAEJ;","names":[]}

package/dist/chunk-FS4X3VDA.js

@@ -0,0 +1,78 @@
+// src/components/data-display/Chip/Chip.helpers.tsx
+import Avatar from "@mui/material/Avatar/index.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var makeTestId = (dataTestId) => (suffix) => dataTestId ? `${dataTestId}-${suffix}` : `chip-${suffix}`;
+var DELETE_KEYS = /* @__PURE__ */ new Set(["Delete", "Backspace"]);
+var ACTIVATE_KEYS = /* @__PURE__ */ new Set(["Enter", " "]);
+var makeKeyDownHandler = ({ disabled, deletable, selectable, onClick, onDelete }) => (event) => {
+  if (disabled) return;
+  if (DELETE_KEYS.has(event.key) && deletable && onDelete) {
+    event.preventDefault();
+    onDelete();
+    return;
+  }
+  if (ACTIVATE_KEYS.has(event.key) && (onClick || selectable)) {
+    event.preventDefault();
+    onClick?.();
+  }
+};
+var avatarFor = (avatar, avatarSrc) => {
+  if (avatar && React.isValidElement(avatar)) {
+    return avatar;
+  }
+  if (avatarSrc) {
+    return /* @__PURE__ */ jsx(Avatar, { src: avatarSrc, sx: { width: 24, height: 24 } });
+  }
+  return void 0;
+};
+var chipStyles = ({
+  variant,
+  selected,
+  clickable,
+  disabled
+}) => {
+  const lifts = clickable && !disabled;
+  return {
+    // Enhanced styling for outlined variant
+    ...variant === "outlined" && {
+      borderWidth: "1px",
+      borderStyle: "solid",
+      backgroundColor: "transparent"
+    },
+    ...selected && variant === "outlined" && {
+      backgroundColor: (theme) => theme.palette.action.selected
+    },
+    "&:hover": {
+      ...lifts && {
+        transform: "translateY(-1px)",
+        boxShadow: (theme) => theme.palette.mode === "dark" ? "0 4px 12px rgba(0, 0, 0, 0.3)" : "0 4px 12px rgba(0, 0, 0, 0.15)"
+      }
+    },
+    "&:active": {
+      ...lifts && {
+        transform: "translateY(0px)"
+      }
+    },
+    transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)"
+  };
+};
+var chipRole = (selectable, onClick) => {
+  if (selectable) return "option";
+  return onClick ? "button" : void 0;
+};
+var isClickable = (disabled, onClick, selectable) => !disabled && (Boolean(onClick) || Boolean(selectable));
+var iconWithTestId = (icon, testId) => icon && React.isValidElement(icon) ? React.cloneElement(icon, {
+  "data-testid": testId
+}) : void 0;
+
+export {
+  makeTestId,
+  makeKeyDownHandler,
+  avatarFor,
+  chipStyles,
+  chipRole,
+  isClickable,
+  iconWithTestId
+};
+//# sourceMappingURL=chunk-FS4X3VDA.js.map

package/dist/chunk-FS4X3VDA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Chip/Chip.helpers.tsx"],"sourcesContent":["import Avatar from '@mui/material/Avatar/index.js';\nimport type { SxProps, Theme } from '@mui/material/styles/index.js';\nimport type { KeyboardEvent, ReactElement } from 'react';\nimport React from 'react';\n\nimport type { ChipProps } from './Chip.types';\n\nexport const makeTestId =\n  (dataTestId?: string) =>\n  (suffix: string): string =>\n    dataTestId ? `${dataTestId}-${suffix}` : `chip-${suffix}`;\n\ninterface KeyHandlerArgs {\n  disabled?: boolean;\n  deletable?: boolean;\n  selectable?: boolean;\n  onClick?: () => void;\n  onDelete?: () => void;\n}\n\nconst DELETE_KEYS = new Set(['Delete', 'Backspace']);\nconst ACTIVATE_KEYS = new Set(['Enter', ' ']);\n\n/**\n * A chip is not a native control, so the two keyboard conventions it stands in for\n * are wired by hand: Delete/Backspace removes it, Enter/Space activates it.\n */\nexport const makeKeyDownHandler =\n  ({ disabled, deletable, selectable, onClick, onDelete }: KeyHandlerArgs) =>\n  (event: KeyboardEvent): void => {\n    if (disabled) return;\n\n    if (DELETE_KEYS.has(event.key) && deletable && onDelete) {\n      event.preventDefault();\n      onDelete();\n      return;\n    }\n\n    if (ACTIVATE_KEYS.has(event.key) && (onClick || selectable)) {\n      event.preventDefault();\n      onClick?.();\n    }\n  };\n\nexport const avatarFor = (\n  avatar: ChipProps['avatar'],\n  avatarSrc?: string,\n): ReactElement | undefined => {\n  if (avatar && React.isValidElement(avatar)) {\n    return avatar;\n  }\n  if (avatarSrc) {\n    return <Avatar src={avatarSrc} sx={{ width: 24, height: 24 }} />;\n  }\n  return undefined;\n};\n\ninterface ChipStyleArgs {\n  variant: ChipProps['variant'];\n  selected?: boolean;\n  clickable?: boolean;\n  disabled?: boolean;\n}\n\n/**\n * Selection styling uses SEMANTIC palette tokens (not hardcoded rgba). A filled\n * selected chip keeps MUI's solid `color.main` + contrast text (clear active\n * state); an outlined selected chip gets a subtle theme-driven `action.selected`\n * tint so it reads as active without muddying the fill.\n */\nexport const chipStyles = ({\n  variant,\n  selected,\n  clickable,\n  disabled,\n}: ChipStyleArgs): SxProps<Theme> => {\n  const lifts = clickable && !disabled;\n\n  return {\n    // Enhanced styling for outlined variant\n    ...(variant === 'outlined' && {\n      borderWidth: '1px',\n      borderStyle: 'solid',\n      backgroundColor: 'transparent',\n    }),\n    ...(selected &&\n      variant === 'outlined' && {\n        backgroundColor: (theme: Theme) => theme.palette.action.selected,\n      }),\n    '&:hover': {\n      ...(lifts && {\n        transform: 'translateY(-1px)',\n        boxShadow: (theme: Theme) =>\n          theme.palette.mode === 'dark'\n            ? '0 4px 12px rgba(0, 0, 0, 0.3)'\n            : '0 4px 12px rgba(0, 0, 0, 0.15)',\n      }),\n    },\n    '&:active': {\n      ...(lifts && {\n        transform: 'translateY(0px)',\n      }),\n    },\n    transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',\n  };\n};\n\n/** `option` when the chip belongs to a selectable set, `button` when it merely acts. */\nexport const chipRole = (\n  selectable?: boolean,\n  onClick?: () => void,\n): 'option' | 'button' | undefined => {\n  if (selectable) return 'option';\n  return onClick ? 'button' : undefined;\n};\n\nexport const isClickable = (\n  disabled?: boolean,\n  onClick?: () => void,\n  selectable?: boolean,\n): boolean => !disabled && (Boolean(onClick) || Boolean(selectable));\n\nexport const iconWithTestId = (\n  icon: ChipProps['icon'],\n  testId: string,\n): ReactElement | undefined =>\n  icon && React.isValidElement(icon)\n    ? React.cloneElement(icon as ReactElement, {\n        'data-testid': testId,\n      } as Record<string, unknown>)\n    : undefined;\n"],"mappings":";AAAA,OAAO,YAAY;AAGnB,OAAO,WAAW;AAiDP;AA7CJ,IAAM,aACX,CAAC,eACD,CAAC,WACC,aAAa,GAAG,UAAU,IAAI,MAAM,KAAK,QAAQ,MAAM;AAU3D,IAAM,cAAc,oBAAI,IAAI,CAAC,UAAU,WAAW,CAAC;AACnD,IAAM,gBAAgB,oBAAI,IAAI,CAAC,SAAS,GAAG,CAAC;AAMrC,IAAM,qBACX,CAAC,EAAE,UAAU,WAAW,YAAY,SAAS,SAAS,MACtD,CAAC,UAA+B;AAC9B,MAAI,SAAU;AAEd,MAAI,YAAY,IAAI,MAAM,GAAG,KAAK,aAAa,UAAU;AACvD,UAAM,eAAe;AACrB,aAAS;AACT;AAAA,EACF;AAEA,MAAI,cAAc,IAAI,MAAM,GAAG,MAAM,WAAW,aAAa;AAC3D,UAAM,eAAe;AACrB,cAAU;AAAA,EACZ;AACF;AAEK,IAAM,YAAY,CACvB,QACA,cAC6B;AAC7B,MAAI,UAAU,MAAM,eAAe,MAAM,GAAG;AAC1C,WAAO;AAAA,EACT;AACA,MAAI,WAAW;AACb,WAAO,oBAAC,UAAO,KAAK,WAAW,IAAI,EAAE,OAAO,IAAI,QAAQ,GAAG,GAAG;AAAA,EAChE;AACA,SAAO;AACT;AAeO,IAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqC;AACnC,QAAM,QAAQ,aAAa,CAAC;AAE5B,SAAO;AAAA;AAAA,IAEL,GAAI,YAAY,cAAc;AAAA,MAC5B,aAAa;AAAA,MACb,aAAa;AAAA,MACb,iBAAiB;AAAA,IACnB;AAAA,IACA,GAAI,YACF,YAAY,cAAc;AAAA,MACxB,iBAAiB,CAAC,UAAiB,MAAM,QAAQ,OAAO;AAAA,IAC1D;AAAA,IACF,WAAW;AAAA,MACT,GAAI,SAAS;AAAA,QACX,WAAW;AAAA,QACX,WAAW,CAAC,UACV,MAAM,QAAQ,SAAS,SACnB,kCACA;AAAA,MACR;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACV,GAAI,SAAS;AAAA,QACX,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,YAAY;AAAA,EACd;AACF;AAGO,IAAM,WAAW,CACtB,YACA,YACoC;AACpC,MAAI,WAAY,QAAO;AACvB,SAAO,UAAU,WAAW;AAC9B;AAEO,IAAM,cAAc,CACzB,UACA,SACA,eACY,CAAC,aAAa,QAAQ,OAAO,KAAK,QAAQ,UAAU;AAE3D,IAAM,iBAAiB,CAC5B,MACA,WAEA,QAAQ,MAAM,eAAe,IAAI,IAC7B,MAAM,aAAa,MAAsB;AAAA,EACvC,eAAe;AACjB,CAA4B,IAC5B;","names":[]}

package/dist/chunk-FSMQF5P5.js

@@ -0,0 +1,168 @@
+import {
+  Heading
+} from "./chunk-HQJ75HHI.js";
+import {
+  Separator
+} from "./chunk-6I75JTFO.js";
+import {
+  Card,
+  CardContent
+} from "./chunk-D2IASECY.js";
+import {
+  Button
+} from "./chunk-6HLRXICF.js";
+import {
+  Text
+} from "./chunk-VRHBJXZ7.js";
+
+// src/social-login-button/social-login-button.tsx
+import * as React from "react";
+import Box from "@mui/material/Box/index.js";
+import Stack from "@mui/material/Stack/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var GoogleIcon = () => /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z",
+      fill: "#4285F4"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z",
+      fill: "#34A853"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z",
+      fill: "#FBBC05"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z",
+      fill: "#EA4335"
+    }
+  )
+] });
+var FacebookIcon = () => /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    d: "M24 12c0-6.627-5.373-12-12-12S0 5.373 0 12c0 5.99 4.388 10.954 10.125 11.854V15.47H7.078V12h3.047V9.356c0-3.007 1.792-4.668 4.533-4.668 1.312 0 2.686.234 2.686.234v2.953H15.83c-1.491 0-1.956.925-1.956 1.874V12h3.328l-.532 3.469h-2.796v8.385C19.612 22.954 24 17.99 24 12z",
+    fill: "#1877F2"
+  }
+) });
+var AppleIcon = () => /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" }) });
+var providerConfig = {
+  google: {
+    label: "Continue with Google",
+    Icon: GoogleIcon,
+    variant: "outline",
+    color: "neutral",
+    sx: {
+      backgroundColor: "#ffffff",
+      color: "#1f1f1f",
+      borderColor: "#dadce0",
+      "&:hover": {
+        backgroundColor: "#f5f5f5",
+        borderColor: "#dadce0"
+      }
+    }
+  },
+  facebook: {
+    label: "Continue with Facebook",
+    Icon: FacebookIcon,
+    variant: "solid",
+    color: "primary",
+    sx: {
+      backgroundColor: "#1877F2",
+      color: "#ffffff",
+      "&:hover": {
+        backgroundColor: "#166fe5"
+      }
+    }
+  },
+  apple: {
+    label: "Continue with Apple",
+    Icon: AppleIcon,
+    variant: "solid",
+    color: "neutral",
+    sx: {
+      backgroundColor: "#000000",
+      color: "#ffffff",
+      "&:hover": {
+        backgroundColor: "#1a1a1a"
+      }
+    }
+  }
+};
+var SocialLoginButton = React.forwardRef(
+  ({ provider, onClick, loading = false, disabled = false, fullWidth = true }, ref) => {
+    const config = providerConfig[provider];
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref,
+        variant: config.variant,
+        color: config.color,
+        size: "lg",
+        loading,
+        disabled,
+        onClick,
+        icon: /* @__PURE__ */ jsx(config.Icon, {}),
+        fullWidth,
+        sx: {
+          minHeight: 48,
+          justifyContent: "flex-start",
+          gap: 2,
+          ...config.sx
+        },
+        children: config.label
+      }
+    );
+  }
+);
+SocialLoginButton.displayName = "SocialLoginButton";
+function SocialLoginContainer({
+  children,
+  title = "Sign in to continue",
+  subtitle,
+  showDivider = false,
+  dividerText = "or",
+  maxWidth = 400
+}) {
+  return (
+    // `width: 100%` is what makes the cap below mean anything. Every caller
+    // centres this card in a flex column (`Container variant="centered"` does),
+    // and a flex item under `align-items: center` sizes to its CONTENT — so the
+    // card sat at whatever the longest label happened to need, ~267px, at every
+    // viewport from 390 to 1280. The 400 was never reached, which is why raising
+    // it would have changed nothing; the card had no width to cap.
+    /* @__PURE__ */ jsx(Card, { variant: "elevated", borderRadius: "lg", sx: { width: "100%", maxWidth }, children: /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Stack, { spacing: 3, sx: { width: "100%" }, children: [
+      title && /* @__PURE__ */ jsxs(Box, { sx: { textAlign: "center" }, children: [
+        /* @__PURE__ */ jsx(Heading, { level: "h2", children: title }),
+        subtitle && /* @__PURE__ */ jsx(Text, { color: "secondary", size: "sm", children: subtitle })
+      ] }),
+      /* @__PURE__ */ jsx(Stack, { spacing: 2, children }),
+      showDivider && /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [
+        /* @__PURE__ */ jsx(Separator, {}),
+        /* @__PURE__ */ jsx(Text, { color: "secondary", size: "sm", children: dividerText }),
+        /* @__PURE__ */ jsx(Separator, {})
+      ] })
+    ] }) }) })
+  );
+}
+
+export {
+  GoogleIcon,
+  FacebookIcon,
+  AppleIcon,
+  SocialLoginButton,
+  SocialLoginContainer
+};
+//# sourceMappingURL=chunk-FSMQF5P5.js.map

package/dist/chunk-FSMQF5P5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/social-login-button/social-login-button.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from 'react';\nimport Box from '@mui/material/Box/index.js';\nimport Stack from '@mui/material/Stack/index.js';\nimport { Button } from '../components/form/Button';\nimport { Card, CardContent } from '../components/layout/Card';\nimport { Heading } from '../components/typography/Heading';\nimport { Text } from '../components/typography/Text';\nimport { Separator } from '../components/layout/Separator';\n\nexport type SocialProvider = 'google' | 'facebook' | 'apple';\n\n/**\n * SVG Icons for social providers\n */\nconst GoogleIcon = (): React.ReactElement => (\n  <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z\"\n      fill=\"#4285F4\"\n    />\n    <path\n      d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"\n      fill=\"#34A853\"\n    />\n    <path\n      d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z\"\n      fill=\"#FBBC05\"\n    />\n    <path\n      d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\"\n      fill=\"#EA4335\"\n    />\n  </svg>\n);\n\nconst FacebookIcon = (): React.ReactElement => (\n  <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M24 12c0-6.627-5.373-12-12-12S0 5.373 0 12c0 5.99 4.388 10.954 10.125 11.854V15.47H7.078V12h3.047V9.356c0-3.007 1.792-4.668 4.533-4.668 1.312 0 2.686.234 2.686.234v2.953H15.83c-1.491 0-1.956.925-1.956 1.874V12h3.328l-.532 3.469h-2.796v8.385C19.612 22.954 24 17.99 24 12z\"\n      fill=\"#1877F2\"\n    />\n  </svg>\n);\n\nconst AppleIcon = (): React.ReactElement => (\n  <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z\" />\n  </svg>\n);\n\ninterface ProviderConfig {\n  label: string;\n  Icon: () => React.ReactElement;\n  variant: 'solid' | 'outline' | 'ghost';\n  color: 'primary' | 'secondary' | 'neutral';\n  sx?: object;\n}\n\nconst providerConfig: Record<SocialProvider, ProviderConfig> = {\n  google: {\n    label: \"Continue with Google\",\n    Icon: GoogleIcon,\n    variant: 'outline',\n    color: 'neutral',\n    sx: {\n      backgroundColor: '#ffffff',\n      color: '#1f1f1f',\n      borderColor: '#dadce0',\n      '&:hover': {\n        backgroundColor: '#f5f5f5',\n        borderColor: '#dadce0',\n      },\n    },\n  },\n  facebook: {\n    label: \"Continue with Facebook\",\n    Icon: FacebookIcon,\n    variant: 'solid',\n    color: 'primary',\n    sx: {\n      backgroundColor: '#1877F2',\n      color: '#ffffff',\n      '&:hover': {\n        backgroundColor: '#166fe5',\n      },\n    },\n  },\n  apple: {\n    label: \"Continue with Apple\",\n    Icon: AppleIcon,\n    variant: 'solid',\n    color: 'neutral',\n    sx: {\n      backgroundColor: '#000000',\n      color: '#ffffff',\n      '&:hover': {\n        backgroundColor: '#1a1a1a',\n      },\n    },\n  },\n};\n\nexport interface SocialLoginButtonProps {\n  provider: SocialProvider;\n  onClick?: () => void;\n  loading?: boolean;\n  disabled?: boolean;\n  fullWidth?: boolean;\n}\n\n/**\n * Social login button using UI package Button component\n */\nexport const SocialLoginButton = React.forwardRef<HTMLButtonElement, SocialLoginButtonProps>(\n  ({ provider, onClick, loading = false, disabled = false, fullWidth = true }, ref) => {\n    const config = providerConfig[provider];\n\n    return (\n      <Button\n        ref={ref}\n        variant={config.variant}\n        color={config.color}\n        size=\"lg\"\n        loading={loading}\n        disabled={disabled}\n        onClick={onClick}\n        icon={<config.Icon />}\n        fullWidth={fullWidth}\n        sx={{\n          minHeight: 48,\n          justifyContent: 'flex-start',\n          gap: 2,\n          ...config.sx,\n        }}\n      >\n        {config.label}\n      </Button>\n    );\n  }\n);\n\nSocialLoginButton.displayName = 'SocialLoginButton';\n\n/**\n * Container for social login buttons with optional divider\n */\nexport interface SocialLoginContainerProps {\n  children: React.ReactNode;\n  title?: string;\n  subtitle?: string;\n  showDivider?: boolean;\n  dividerText?: string;\n  /**\n   * How wide the card is allowed to get. Defaults to the 400 it has always\n   * intended, so nothing that does not ask for a width moves.\n   *\n   * Worth passing for a card holding a FORM rather than a row of provider\n   * buttons: 400 was chosen for the latter, and an e-mail + password pair reads\n   * cramped in it.\n   */\n  maxWidth?: number | string;\n}\n\nexport function SocialLoginContainer({\n  children,\n  title = \"Sign in to continue\",\n  subtitle,\n  showDivider = false,\n  dividerText = \"or\",\n  maxWidth = 400,\n}: SocialLoginContainerProps): React.ReactElement {\n  return (\n    // `width: 100%` is what makes the cap below mean anything. Every caller\n    // centres this card in a flex column (`Container variant=\"centered\"` does),\n    // and a flex item under `align-items: center` sizes to its CONTENT — so the\n    // card sat at whatever the longest label happened to need, ~267px, at every\n    // viewport from 390 to 1280. The 400 was never reached, which is why raising\n    // it would have changed nothing; the card had no width to cap.\n    <Card variant=\"elevated\" borderRadius=\"lg\" sx={{ width: '100%', maxWidth }}>\n      <CardContent>\n        <Stack spacing={3} sx={{ width: '100%' }}>\n          {title && (\n            <Box sx={{ textAlign: 'center' }}>\n              <Heading level=\"h2\">\n                {title}\n              </Heading>\n              {subtitle && (\n                <Text color=\"secondary\" size=\"sm\">\n                  {subtitle}\n                </Text>\n              )}\n            </Box>\n          )}\n\n          <Stack spacing={2}>\n            {children}\n          </Stack>\n\n          {showDivider && (\n            <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>\n              <Separator />\n              <Text color=\"secondary\" size=\"sm\">\n                {dividerText}\n              </Text>\n              <Separator />\n            </Box>\n          )}\n        </Stack>\n      </CardContent>\n    </Card>\n  );\n}\n\nexport { GoogleIcon, FacebookIcon, AppleIcon };\n"],"mappings":"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","names":[]}