@12-apps/ui 6.34.0 → 6.36.0

package/dist/chunk-HXEBKOSM.js

@@ -0,0 +1,329 @@
+import {
+  TableFilterContext,
+  useTableFilterContext
+} from "./chunk-7AIL2F5E.js";
+import {
+  fieldTextFieldStyles
+} from "./chunk-CGO452DC.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/layout/TableFilter/TableFilter.tsx
+import CloseIcon from "@mui/icons-material/Close";
+import SearchIcon from "@mui/icons-material/Search";
+import Box from "@mui/material/Box/index.js";
+import Checkbox from "@mui/material/Checkbox/index.js";
+import Divider from "@mui/material/Divider/index.js";
+import FormControlLabel from "@mui/material/FormControlLabel/index.js";
+import IconButton from "@mui/material/IconButton/index.js";
+import InputAdornment from "@mui/material/InputAdornment/index.js";
+import Link from "@mui/material/Link/index.js";
+import TextField from "@mui/material/TextField/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PANEL_WIDTH = 280;
+function TableFilter({
+  children,
+  open,
+  onOpenChange,
+  hasActiveFilters = false,
+  copy
+}) {
+  return /* @__PURE__ */ jsx(TableFilterContext.Provider, { value: { open, onOpenChange, hasActiveFilters, copy }, children });
+}
+TableFilter.displayName = "TableFilter";
+var TableFilterLayout = ({ children, className }) => {
+  const { open } = useTableFilterContext();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className,
+      sx: {
+        display: "flex",
+        minHeight: 0,
+        minWidth: 0,
+        flex: 1,
+        alignItems: "stretch",
+        overflow: "hidden",
+        gap: open ? 2 : 0
+      },
+      children
+    }
+  );
+};
+TableFilterLayout.displayName = "TableFilter.Layout";
+var TableFilterMain = ({ children, className }) => /* @__PURE__ */ jsx(Box, { className, sx: { minWidth: 0, flex: 1, overflowY: "auto", overflowX: "hidden" }, children });
+TableFilterMain.displayName = "TableFilter.Main";
+var TableFilterPanel = ({
+  children,
+  onClearAll,
+  ariaLabel = "Filters",
+  clearTestId
+}) => {
+  const { open, copy } = useTableFilterContext();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: "aside",
+      "aria-label": ariaLabel,
+      "aria-hidden": !open,
+      sx: {
+        display: "flex",
+        minHeight: 0,
+        flexShrink: 0,
+        flexDirection: "column",
+        alignSelf: "stretch",
+        overflow: "hidden",
+        bgcolor: "background.paper",
+        width: open ? PANEL_WIDTH : 0,
+        borderLeft: open ? 1 : 0,
+        borderColor: "divider",
+        transition: "width 300ms ease-in-out",
+        "@media (prefers-reduced-motion: reduce)": { transition: "none" }
+      },
+      children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          sx: {
+            display: "flex",
+            minHeight: 0,
+            flex: 1,
+            flexDirection: "column",
+            overflowY: "auto",
+            overflowX: "hidden",
+            visibility: open ? "visible" : "hidden",
+            opacity: open ? 1 : 0,
+            pointerEvents: open ? "auto" : "none",
+            transition: "opacity 200ms ease-out"
+          },
+          children: /* @__PURE__ */ jsxs(Box, { sx: { boxSizing: "border-box", display: "flex", width: "100%", minWidth: 0, flexDirection: "column", gap: 2.5, p: 2 }, children: [
+            /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx(
+              Link,
+              {
+                component: "button",
+                type: "button",
+                underline: "hover",
+                "data-testid": clearTestId,
+                onClick: onClearAll,
+                sx: { fontSize: sxRem(12), color: "text.secondary" },
+                children: copy.clearAllFilters
+              }
+            ) }),
+            children
+          ] })
+        }
+      )
+    }
+  );
+};
+TableFilterPanel.displayName = "TableFilter.Panel";
+var TableFilterKeyword = ({
+  value,
+  onChange,
+  placeholder = "Press Enter to filter",
+  label = "Filter by keyword",
+  testId
+}) => {
+  const { copy } = useTableFilterContext();
+  const [draft, setDraft] = useState(value);
+  const prevValue = useRef(value);
+  if (prevValue.current !== value) {
+    prevValue.current = value;
+    if (draft !== value) setDraft(value);
+  }
+  const commit = () => {
+    if (draft !== value) onChange(draft);
+  };
+  const clearKeyword = () => {
+    setDraft("");
+    if (value !== "") onChange("");
+  };
+  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
+    /* @__PURE__ */ jsx(Typography, { component: "label", sx: { fontSize: sxRem(12), fontWeight: 500, color: "text.secondary" }, children: label }),
+    /* @__PURE__ */ jsx(
+      TextField,
+      {
+        size: "small",
+        sx: fieldTextFieldStyles,
+        name: "keyword",
+        placeholder,
+        value: draft,
+        onChange: (event) => setDraft(event.target.value),
+        onBlur: commit,
+        onKeyDown: (event) => {
+          if (event.key !== "Enter") return;
+          event.preventDefault();
+          commit();
+        },
+        inputProps: { "aria-label": label, "data-testid": testId },
+        InputProps: {
+          startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(SearchIcon, { sx: { fontSize: sxRem(16), color: "text.secondary" } }) }),
+          endAdornment: draft !== "" ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              size: "small",
+              "aria-label": copy.clearKeyword,
+              "data-testid": testId ? `${testId}-clear` : void 0,
+              onMouseDown: (event) => event.preventDefault(),
+              onClick: clearKeyword,
+              children: /* @__PURE__ */ jsx(CloseIcon, { sx: { fontSize: sxRem(16) } })
+            }
+          ) }) : null
+        }
+      }
+    )
+  ] });
+};
+TableFilterKeyword.displayName = "TableFilter.Keyword";
+var TableFilterSection = ({ title, children }) => /* @__PURE__ */ jsxs(Box, { children: [
+  /* @__PURE__ */ jsx(Divider, { sx: { mb: 2.5 } }),
+  /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 1.5 }, children: [
+    /* @__PURE__ */ jsx(Typography, { component: "h2", sx: { fontSize: sxRem(14), fontWeight: 600, color: "text.primary" }, children: title }),
+    /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children })
+  ] })
+] });
+TableFilterSection.displayName = "TableFilter.Section";
+function TableFilterCheckboxField({
+  label,
+  options,
+  selected,
+  onToggle,
+  testId
+}) {
+  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 1 }, "data-testid": testId, children: [
+    /* @__PURE__ */ jsx(Typography, { sx: { fontSize: sxRem(12), fontWeight: 500, color: "text.secondary" }, children: label }),
+    /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexDirection: "column" }, children: options.map((option) => {
+      const checked = selected.has(option.value);
+      return /* @__PURE__ */ jsx(
+        FormControlLabel,
+        {
+          control: /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              size: "small",
+              checked,
+              onChange: (event) => onToggle(option.value, event.target.checked),
+              "data-testid": testId ? `${testId}-${option.value}` : void 0,
+              sx: { py: 0.25 }
+            }
+          ),
+          label: /* @__PURE__ */ jsxs(Box, { component: "span", sx: { fontSize: sxRem(14) }, children: [
+            option.label,
+            option.count != null && /* @__PURE__ */ jsxs(Box, { component: "span", sx: { color: "text.secondary" }, children: [
+              " ",
+              "(",
+              option.count,
+              ")"
+            ] })
+          ] }),
+          sx: { ml: -0.5, mr: 0 }
+        },
+        option.value
+      );
+    }) })
+  ] });
+}
+TableFilterCheckboxField.displayName = "TableFilter.CheckboxField";
+function parseBound(text) {
+  if (text.trim() === "") return void 0;
+  const parsed = Number(text);
+  return Number.isNaN(parsed) ? void 0 : parsed;
+}
+function RangeBound({
+  bound,
+  error,
+  placeholder,
+  step,
+  ariaLabel,
+  testId,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      size: "small",
+      sx: fieldTextFieldStyles,
+      type: "number",
+      error,
+      placeholder,
+      value: bound != null ? String(bound) : "",
+      onChange: (event) => onChange(parseBound(event.target.value)),
+      inputProps: { step, "aria-label": ariaLabel, "data-testid": testId }
+    }
+  );
+}
+var isRangeInverted = (value) => value.min != null && value.max != null && value.max < value.min;
+var TableFilterRangeField = ({
+  label,
+  value,
+  onChange,
+  unit,
+  step,
+  minPlaceholder,
+  maxPlaceholder,
+  invalidLabel,
+  testId
+}) => {
+  const { copy } = useTableFilterContext();
+  const invalid = isRangeInverted(value);
+  const minText = minPlaceholder ?? copy.rangeMin;
+  const maxText = maxPlaceholder ?? copy.rangeMax;
+  const invalidText = invalidLabel ?? copy.invalidRange;
+  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 1 }, "data-testid": testId, children: [
+    /* @__PURE__ */ jsxs(Typography, { sx: { fontSize: sxRem(12), fontWeight: 500, color: "text.secondary" }, children: [
+      label,
+      unit ? ` (${unit})` : ""
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+      /* @__PURE__ */ jsx(
+        RangeBound,
+        {
+          bound: value.min,
+          error: invalid,
+          placeholder: minText,
+          step,
+          ariaLabel: `${label} ${minText}`,
+          testId: testId ? `${testId}-min` : void 0,
+          onChange: (min) => onChange({ ...value, min })
+        }
+      ),
+      /* @__PURE__ */ jsx(Typography, { component: "span", sx: { color: "text.secondary" }, children: "\u2013" }),
+      /* @__PURE__ */ jsx(
+        RangeBound,
+        {
+          bound: value.max,
+          error: invalid,
+          placeholder: maxText,
+          step,
+          ariaLabel: `${label} ${maxText}`,
+          testId: testId ? `${testId}-max` : void 0,
+          onChange: (max) => onChange({ ...value, max })
+        }
+      )
+    ] }),
+    invalid && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        role: "alert",
+        "data-testid": testId ? `${testId}-error` : void 0,
+        sx: { fontSize: sxRem(11.2), color: "error.main" },
+        children: invalidText
+      }
+    )
+  ] });
+};
+TableFilterRangeField.displayName = "TableFilter.RangeField";
+TableFilter.Layout = TableFilterLayout;
+TableFilter.Main = TableFilterMain;
+TableFilter.Panel = TableFilterPanel;
+TableFilter.Keyword = TableFilterKeyword;
+TableFilter.Section = TableFilterSection;
+TableFilter.CheckboxField = TableFilterCheckboxField;
+TableFilter.RangeField = TableFilterRangeField;
+
+export {
+  TableFilter
+};
+//# sourceMappingURL=chunk-HXEBKOSM.js.map

package/dist/chunk-HXEBKOSM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/TableFilter/TableFilter.tsx"],"sourcesContent":["'use client';\n\nimport CloseIcon from '@mui/icons-material/Close';\nimport SearchIcon from '@mui/icons-material/Search';\nimport Box from '@mui/material/Box/index.js';\nimport Checkbox from '@mui/material/Checkbox/index.js';\nimport Divider from '@mui/material/Divider/index.js';\nimport FormControlLabel from '@mui/material/FormControlLabel/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport InputAdornment from '@mui/material/InputAdornment/index.js';\nimport Link from '@mui/material/Link/index.js';\nimport TextField from '@mui/material/TextField/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport React, { useRef, useState } from 'react';\n\nimport { TableFilterContext, useTableFilterContext } from './TableFilterContext';\nimport type {\n  TableFilterCheckboxFieldProps,\n  TableFilterKeywordProps,\n  TableFilterLayoutProps,\n  TableFilterMainProps,\n  TableFilterPanelProps,\n  TableFilterProps,\n  TableFilterRangeFieldProps,\n  TableFilterSectionProps,\n} from './TableFilter.types';\nimport { fieldTextFieldStyles } from '../../../tokens/field-height';\nimport { sxRem } from '../../../tokens/relative';\n\nconst PANEL_WIDTH = 280;\n\n/**\n * Compound filter-panel system, MUI port of the reference `TableFilter`. Provides\n * open/close state; `Panel` slides in from the right beside `Main` (no overlap).\n *\n * @example\n * ```tsx\n * <TableFilter open={open} onOpenChange={setOpen} hasActiveFilters={n > 0}>\n *   <TableFilter.Layout>\n *     <TableFilter.Main>{table}</TableFilter.Main>\n *     <TableFilter.Panel onClearAll={clearAll}>\n *       <TableFilter.Keyword value={q} onChange={setQ} />\n *       <TableFilter.Section title=\"Attributes\">\n *         <TableFilter.CheckboxField label=\"Category\" options={cats} selected={sel} onToggle={toggle} />\n *         <TableFilter.RangeField label=\"Price\" unit=\"R$\" value={price} onChange={setPrice} />\n *       </TableFilter.Section>\n *     </TableFilter.Panel>\n *   </TableFilter.Layout>\n * </TableFilter>\n * ```\n */\nexport function TableFilter({\n  children,\n  open,\n  onOpenChange,\n  hasActiveFilters = false,\n  copy,\n}: TableFilterProps): React.JSX.Element {\n  return (\n    <TableFilterContext.Provider value={{ open, onOpenChange, hasActiveFilters, copy }}>\n      {children}\n    </TableFilterContext.Provider>\n  );\n}\nTableFilter.displayName = 'TableFilter';\n\nconst TableFilterLayout = ({ children, className }: TableFilterLayoutProps): React.JSX.Element => {\n  const { open } = useTableFilterContext();\n  return (\n    <Box\n      className={className}\n      sx={{\n        display: 'flex',\n        minHeight: 0,\n        minWidth: 0,\n        flex: 1,\n        alignItems: 'stretch',\n        overflow: 'hidden',\n        gap: open ? 2 : 0,\n      }}\n    >\n      {children}\n    </Box>\n  );\n};\nTableFilterLayout.displayName = 'TableFilter.Layout';\n\nconst TableFilterMain = ({ children, className }: TableFilterMainProps): React.JSX.Element => (\n  <Box className={className} sx={{ minWidth: 0, flex: 1, overflowY: 'auto', overflowX: 'hidden' }}>\n    {children}\n  </Box>\n);\nTableFilterMain.displayName = 'TableFilter.Main';\n\nconst TableFilterPanel = ({\n  children,\n  onClearAll,\n  ariaLabel = 'Filters',\n  clearTestId,\n}: TableFilterPanelProps): React.JSX.Element => {\n  const { open, copy } = useTableFilterContext();\n  return (\n    <Box\n      component=\"aside\"\n      aria-label={ariaLabel}\n      aria-hidden={!open}\n      sx={{\n        display: 'flex',\n        minHeight: 0,\n        flexShrink: 0,\n        flexDirection: 'column',\n        alignSelf: 'stretch',\n        overflow: 'hidden',\n        bgcolor: 'background.paper',\n        width: open ? PANEL_WIDTH : 0,\n        borderLeft: open ? 1 : 0,\n        borderColor: 'divider',\n        transition: 'width 300ms ease-in-out',\n        '@media (prefers-reduced-motion: reduce)': { transition: 'none' },\n      }}\n    >\n      <Box\n        sx={{\n          display: 'flex',\n          minHeight: 0,\n          flex: 1,\n          flexDirection: 'column',\n          overflowY: 'auto',\n          overflowX: 'hidden',\n          visibility: open ? 'visible' : 'hidden',\n          opacity: open ? 1 : 0,\n          pointerEvents: open ? 'auto' : 'none',\n          transition: 'opacity 200ms ease-out',\n        }}\n      >\n        <Box sx={{ boxSizing: 'border-box', display: 'flex', width: '100%', minWidth: 0, flexDirection: 'column', gap: 2.5, p: 2 }}>\n          <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>\n            <Link\n              component=\"button\"\n              type=\"button\"\n              underline=\"hover\"\n              data-testid={clearTestId}\n              onClick={onClearAll}\n              sx={{ fontSize: sxRem(12), color: 'text.secondary' }}\n            >\n              {copy.clearAllFilters}\n            </Link>\n          </Box>\n          {children}\n        </Box>\n      </Box>\n    </Box>\n  );\n};\nTableFilterPanel.displayName = 'TableFilter.Panel';\n\nconst TableFilterKeyword = ({\n  value,\n  onChange,\n  placeholder = 'Press Enter to filter',\n  label = 'Filter by keyword',\n  testId,\n}: TableFilterKeywordProps): React.JSX.Element => {\n  const { copy } = useTableFilterContext();\n  const [draft, setDraft] = useState(value);\n  const prevValue = useRef(value);\n  if (prevValue.current !== value) {\n    prevValue.current = value;\n    if (draft !== value) setDraft(value);\n  }\n\n  const commit = (): void => {\n    if (draft !== value) onChange(draft);\n  };\n  const clearKeyword = (): void => {\n    setDraft('');\n    if (value !== '') onChange('');\n  };\n\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>\n      <Typography component=\"label\" sx={{ fontSize: sxRem(12), fontWeight: 500, color: 'text.secondary' }}>\n        {label}\n      </Typography>\n      <TextField\n        size=\"small\"\n        sx={fieldTextFieldStyles}\n        name=\"keyword\"\n        placeholder={placeholder}\n        value={draft}\n        onChange={(event) => setDraft(event.target.value)}\n        onBlur={commit}\n        onKeyDown={(event) => {\n          if (event.key !== 'Enter') return;\n          event.preventDefault();\n          commit();\n        }}\n        inputProps={{ 'aria-label': label, 'data-testid': testId }}\n        InputProps={{\n          startAdornment: (\n            <InputAdornment position=\"start\">\n              <SearchIcon sx={{ fontSize: sxRem(16), color: 'text.secondary' }} />\n            </InputAdornment>\n          ),\n          endAdornment:\n            draft !== '' ? (\n              <InputAdornment position=\"end\">\n                <IconButton\n                  size=\"small\"\n                  aria-label={copy.clearKeyword}\n                  data-testid={testId ? `${testId}-clear` : undefined}\n                  onMouseDown={(event) => event.preventDefault()}\n                  onClick={clearKeyword}\n                >\n                  <CloseIcon sx={{ fontSize: sxRem(16) }} />\n                </IconButton>\n              </InputAdornment>\n            ) : null,\n        }}\n      />\n    </Box>\n  );\n};\nTableFilterKeyword.displayName = 'TableFilter.Keyword';\n\nconst TableFilterSection = ({ title, children }: TableFilterSectionProps): React.JSX.Element => (\n  <Box>\n    <Divider sx={{ mb: 2.5 }} />\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>\n      <Typography component=\"h2\" sx={{ fontSize: sxRem(14), fontWeight: 600, color: 'text.primary' }}>\n        {title}\n      </Typography>\n      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>{children}</Box>\n    </Box>\n  </Box>\n);\nTableFilterSection.displayName = 'TableFilter.Section';\n\nfunction TableFilterCheckboxField<TValue extends string = string>({\n  label,\n  options,\n  selected,\n  onToggle,\n  testId,\n}: TableFilterCheckboxFieldProps<TValue>): React.JSX.Element {\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }} data-testid={testId}>\n      <Typography sx={{ fontSize: sxRem(12), fontWeight: 500, color: 'text.secondary' }}>{label}</Typography>\n      <Box sx={{ display: 'flex', flexDirection: 'column' }}>\n        {options.map((option) => {\n          const checked = selected.has(option.value);\n          return (\n            <FormControlLabel\n              key={option.value}\n              control={\n                <Checkbox\n                  size=\"small\"\n                  checked={checked}\n                  onChange={(event) => onToggle(option.value, event.target.checked)}\n                  data-testid={testId ? `${testId}-${option.value}` : undefined}\n                  sx={{ py: 0.25 }}\n                />\n              }\n              label={\n                <Box component=\"span\" sx={{ fontSize: sxRem(14) }}>\n                  {option.label}\n                  {option.count != null && (\n                    <Box component=\"span\" sx={{ color: 'text.secondary' }}>\n                      {' '}\n                      ({option.count})\n                    </Box>\n                  )}\n                </Box>\n              }\n              sx={{ ml: -0.5, mr: 0 }}\n            />\n          );\n        })}\n      </Box>\n    </Box>\n  );\n}\nTableFilterCheckboxField.displayName = 'TableFilter.CheckboxField';\n\nfunction parseBound(text: string): number | undefined {\n  if (text.trim() === '') return undefined;\n  const parsed = Number(text);\n  return Number.isNaN(parsed) ? undefined : parsed;\n}\n\n/** One numeric bound input (min or max) for {@link TableFilterRangeField}. */\nfunction RangeBound({\n  bound,\n  error,\n  placeholder,\n  step,\n  ariaLabel,\n  testId,\n  onChange,\n}: {\n  bound: number | undefined;\n  error: boolean;\n  placeholder: string;\n  step?: number;\n  ariaLabel: string;\n  testId?: string;\n  onChange: (next: number | undefined) => void;\n}): React.JSX.Element {\n  return (\n    <TextField\n      size=\"small\"\n      sx={fieldTextFieldStyles}\n      type=\"number\"\n      error={error}\n      placeholder={placeholder}\n      value={bound != null ? String(bound) : ''}\n      onChange={(event) => onChange(parseBound(event.target.value))}\n      inputProps={{ step, 'aria-label': ariaLabel, 'data-testid': testId }}\n    />\n  );\n}\n\n/** Inverted range: both ends set and max < min (surfaced to the user as an error). */\nconst isRangeInverted = (value: { min?: number; max?: number }): boolean =>\n  value.min != null && value.max != null && value.max < value.min;\n\nconst TableFilterRangeField = ({\n  label,\n  value,\n  onChange,\n  unit,\n  step,\n  minPlaceholder,\n  maxPlaceholder,\n  invalidLabel,\n  testId,\n}: TableFilterRangeFieldProps): React.JSX.Element => {\n  const { copy } = useTableFilterContext();\n  const invalid = isRangeInverted(value);\n  // A field may override any of the three; unset, they come from the root's\n  // table. Neither path reaches an English literal in this package.\n  const minText = minPlaceholder ?? copy.rangeMin;\n  const maxText = maxPlaceholder ?? copy.rangeMax;\n  const invalidText = invalidLabel ?? copy.invalidRange;\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }} data-testid={testId}>\n      <Typography sx={{ fontSize: sxRem(12), fontWeight: 500, color: 'text.secondary' }}>\n        {label}\n        {unit ? ` (${unit})` : ''}\n      </Typography>\n      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n        <RangeBound\n          bound={value.min}\n          error={invalid}\n          placeholder={minText}\n          step={step}\n          ariaLabel={`${label} ${minText}`}\n          testId={testId ? `${testId}-min` : undefined}\n          onChange={(min) => onChange({ ...value, min })}\n        />\n        <Typography component=\"span\" sx={{ color: 'text.secondary' }}>\n          –\n        </Typography>\n        <RangeBound\n          bound={value.max}\n          error={invalid}\n          placeholder={maxText}\n          step={step}\n          ariaLabel={`${label} ${maxText}`}\n          testId={testId ? `${testId}-max` : undefined}\n          onChange={(max) => onChange({ ...value, max })}\n        />\n      </Box>\n      {invalid && (\n        <Typography\n          role=\"alert\"\n          data-testid={testId ? `${testId}-error` : undefined}\n          sx={{ fontSize: sxRem(11.2), color: 'error.main' }}\n        >\n          {invalidText}\n        </Typography>\n      )}\n    </Box>\n  );\n};\nTableFilterRangeField.displayName = 'TableFilter.RangeField';\n\nTableFilter.Layout = TableFilterLayout;\nTableFilter.Main = TableFilterMain;\nTableFilter.Panel = TableFilterPanel;\nTableFilter.Keyword = TableFilterKeyword;\nTableFilter.Section = TableFilterSection;\nTableFilter.CheckboxField = TableFilterCheckboxField;\nTableFilter.RangeField = TableFilterRangeField;\n"],"mappings":";;;;;;;;;;;;AAEA,OAAO,eAAe;AACtB,OAAO,gBAAgB;AACvB,OAAO,SAAS;AAChB,OAAO,cAAc;AACrB,OAAO,aAAa;AACpB,OAAO,sBAAsB;AAC7B,OAAO,gBAAgB;AACvB,OAAO,oBAAoB;AAC3B,OAAO,UAAU;AACjB,OAAO,eAAe;AACtB,OAAO,gBAAgB;AACvB,SAAgB,QAAQ,gBAAgB;AA8CpC,cA4EI,YA5EJ;AA9BJ,IAAM,cAAc;AAsBb,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AACF,GAAwC;AACtC,SACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,EAAE,MAAM,cAAc,kBAAkB,KAAK,GAC9E,UACH;AAEJ;AACA,YAAY,cAAc;AAE1B,IAAM,oBAAoB,CAAC,EAAE,UAAU,UAAU,MAAiD;AAChG,QAAM,EAAE,KAAK,IAAI,sBAAsB;AACvC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,IAAI;AAAA,QACF,SAAS;AAAA,QACT,WAAW;AAAA,QACX,UAAU;AAAA,QACV,MAAM;AAAA,QACN,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,KAAK,OAAO,IAAI;AAAA,MAClB;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AACA,kBAAkB,cAAc;AAEhC,IAAM,kBAAkB,CAAC,EAAE,UAAU,UAAU,MAC7C,oBAAC,OAAI,WAAsB,IAAI,EAAE,UAAU,GAAG,MAAM,GAAG,WAAW,QAAQ,WAAW,SAAS,GAC3F,UACH;AAEF,gBAAgB,cAAc;AAE9B,IAAM,mBAAmB,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AACF,MAAgD;AAC9C,QAAM,EAAE,MAAM,KAAK,IAAI,sBAAsB;AAC7C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,cAAY;AAAA,MACZ,eAAa,CAAC;AAAA,MACd,IAAI;AAAA,QACF,SAAS;AAAA,QACT,WAAW;AAAA,QACX,YAAY;AAAA,QACZ,eAAe;AAAA,QACf,WAAW;AAAA,QACX,UAAU;AAAA,QACV,SAAS;AAAA,QACT,OAAO,OAAO,cAAc;AAAA,QAC5B,YAAY,OAAO,IAAI;AAAA,QACvB,aAAa;AAAA,QACb,YAAY;AAAA,QACZ,2CAA2C,EAAE,YAAY,OAAO;AAAA,MAClE;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,YACF,SAAS;AAAA,YACT,WAAW;AAAA,YACX,MAAM;AAAA,YACN,eAAe;AAAA,YACf,WAAW;AAAA,YACX,WAAW;AAAA,YACX,YAAY,OAAO,YAAY;AAAA,YAC/B,SAAS,OAAO,IAAI;AAAA,YACpB,eAAe,OAAO,SAAS;AAAA,YAC/B,YAAY;AAAA,UACd;AAAA,UAEA,+BAAC,OAAI,IAAI,EAAE,WAAW,cAAc,SAAS,QAAQ,OAAO,QAAQ,UAAU,GAAG,eAAe,UAAU,KAAK,KAAK,GAAG,EAAE,GACvH;AAAA,gCAAC,OAAI,IAAI,EAAE,SAAS,QAAQ,gBAAgB,WAAW,GACrD;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,MAAK;AAAA,gBACL,WAAU;AAAA,gBACV,eAAa;AAAA,gBACb,SAAS;AAAA,gBACT,IAAI,EAAE,UAAU,MAAM,EAAE,GAAG,OAAO,iBAAiB;AAAA,gBAElD,eAAK;AAAA;AAAA,YACR,GACF;AAAA,YACC;AAAA,aACH;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AACA,iBAAiB,cAAc;AAE/B,IAAM,qBAAqB,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,QAAQ;AAAA,EACR;AACF,MAAkD;AAChD,QAAM,EAAE,KAAK,IAAI,sBAAsB;AACvC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK;AACxC,QAAM,YAAY,OAAO,KAAK;AAC9B,MAAI,UAAU,YAAY,OAAO;AAC/B,cAAU,UAAU;AACpB,QAAI,UAAU,MAAO,UAAS,KAAK;AAAA,EACrC;AAEA,QAAM,SAAS,MAAY;AACzB,QAAI,UAAU,MAAO,UAAS,KAAK;AAAA,EACrC;AACA,QAAM,eAAe,MAAY;AAC/B,aAAS,EAAE;AACX,QAAI,UAAU,GAAI,UAAS,EAAE;AAAA,EAC/B;AAEA,SACE,qBAAC,OAAI,IAAI,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,EAAE,GAC1D;AAAA,wBAAC,cAAW,WAAU,SAAQ,IAAI,EAAE,UAAU,MAAM,EAAE,GAAG,YAAY,KAAK,OAAO,iBAAiB,GAC/F,iBACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,IAAI;AAAA,QACJ,MAAK;AAAA,QACL;AAAA,QACA,OAAO;AAAA,QACP,UAAU,CAAC,UAAU,SAAS,MAAM,OAAO,KAAK;AAAA,QAChD,QAAQ;AAAA,QACR,WAAW,CAAC,UAAU;AACpB,cAAI,MAAM,QAAQ,QAAS;AAC3B,gBAAM,eAAe;AACrB,iBAAO;AAAA,QACT;AAAA,QACA,YAAY,EAAE,cAAc,OAAO,eAAe,OAAO;AAAA,QACzD,YAAY;AAAA,UACV,gBACE,oBAAC,kBAAe,UAAS,SACvB,8BAAC,cAAW,IAAI,EAAE,UAAU,MAAM,EAAE,GAAG,OAAO,iBAAiB,GAAG,GACpE;AAAA,UAEF,cACE,UAAU,KACR,oBAAC,kBAAe,UAAS,OACvB;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAY,KAAK;AAAA,cACjB,eAAa,SAAS,GAAG,MAAM,WAAW;AAAA,cAC1C,aAAa,CAAC,UAAU,MAAM,eAAe;AAAA,cAC7C,SAAS;AAAA,cAET,8BAAC,aAAU,IAAI,EAAE,UAAU,MAAM,EAAE,EAAE,GAAG;AAAA;AAAA,UAC1C,GACF,IACE;AAAA,QACR;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AACA,mBAAmB,cAAc;AAEjC,IAAM,qBAAqB,CAAC,EAAE,OAAO,SAAS,MAC5C,qBAAC,OACC;AAAA,sBAAC,WAAQ,IAAI,EAAE,IAAI,IAAI,GAAG;AAAA,EAC1B,qBAAC,OAAI,IAAI,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,IAAI,GAC5D;AAAA,wBAAC,cAAW,WAAU,MAAK,IAAI,EAAE,UAAU,MAAM,EAAE,GAAG,YAAY,KAAK,OAAO,eAAe,GAC1F,iBACH;AAAA,IACA,oBAAC,OAAI,IAAI,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,EAAE,GAAI,UAAS;AAAA,KAC3E;AAAA,GACF;AAEF,mBAAmB,cAAc;AAEjC,SAAS,yBAAyD;AAAA,EAChE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA6D;AAC3D,SACE,qBAAC,OAAI,IAAI,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,EAAE,GAAG,eAAa,QAC1E;AAAA,wBAAC,cAAW,IAAI,EAAE,UAAU,MAAM,EAAE,GAAG,YAAY,KAAK,OAAO,iBAAiB,GAAI,iBAAM;AAAA,IAC1F,oBAAC,OAAI,IAAI,EAAE,SAAS,QAAQ,eAAe,SAAS,GACjD,kBAAQ,IAAI,CAAC,WAAW;AACvB,YAAM,UAAU,SAAS,IAAI,OAAO,KAAK;AACzC,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,SACE;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL;AAAA,cACA,UAAU,CAAC,UAAU,SAAS,OAAO,OAAO,MAAM,OAAO,OAAO;AAAA,cAChE,eAAa,SAAS,GAAG,MAAM,IAAI,OAAO,KAAK,KAAK;AAAA,cACpD,IAAI,EAAE,IAAI,KAAK;AAAA;AAAA,UACjB;AAAA,UAEF,OACE,qBAAC,OAAI,WAAU,QAAO,IAAI,EAAE,UAAU,MAAM,EAAE,EAAE,GAC7C;AAAA,mBAAO;AAAA,YACP,OAAO,SAAS,QACf,qBAAC,OAAI,WAAU,QAAO,IAAI,EAAE,OAAO,iBAAiB,GACjD;AAAA;AAAA,cAAI;AAAA,cACH,OAAO;AAAA,cAAM;AAAA,eACjB;AAAA,aAEJ;AAAA,UAEF,IAAI,EAAE,IAAI,MAAM,IAAI,EAAE;AAAA;AAAA,QArBjB,OAAO;AAAA,MAsBd;AAAA,IAEJ,CAAC,GACH;AAAA,KACF;AAEJ;AACA,yBAAyB,cAAc;AAEvC,SAAS,WAAW,MAAkC;AACpD,MAAI,KAAK,KAAK,MAAM,GAAI,QAAO;AAC/B,QAAM,SAAS,OAAO,IAAI;AAC1B,SAAO,OAAO,MAAM,MAAM,IAAI,SAAY;AAC5C;AAGA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAQsB;AACpB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,IAAI;AAAA,MACJ,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,OAAO,SAAS,OAAO,OAAO,KAAK,IAAI;AAAA,MACvC,UAAU,CAAC,UAAU,SAAS,WAAW,MAAM,OAAO,KAAK,CAAC;AAAA,MAC5D,YAAY,EAAE,MAAM,cAAc,WAAW,eAAe,OAAO;AAAA;AAAA,EACrE;AAEJ;AAGA,IAAM,kBAAkB,CAAC,UACvB,MAAM,OAAO,QAAQ,MAAM,OAAO,QAAQ,MAAM,MAAM,MAAM;AAE9D,IAAM,wBAAwB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqD;AACnD,QAAM,EAAE,KAAK,IAAI,sBAAsB;AACvC,QAAM,UAAU,gBAAgB,KAAK;AAGrC,QAAM,UAAU,kBAAkB,KAAK;AACvC,QAAM,UAAU,kBAAkB,KAAK;AACvC,QAAM,cAAc,gBAAgB,KAAK;AACzC,SACE,qBAAC,OAAI,IAAI,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,EAAE,GAAG,eAAa,QAC1E;AAAA,yBAAC,cAAW,IAAI,EAAE,UAAU,MAAM,EAAE,GAAG,YAAY,KAAK,OAAO,iBAAiB,GAC7E;AAAA;AAAA,MACA,OAAO,KAAK,IAAI,MAAM;AAAA,OACzB;AAAA,IACA,qBAAC,OAAI,IAAI,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,EAAE,GACvD;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,MAAM;AAAA,UACb,OAAO;AAAA,UACP,aAAa;AAAA,UACb;AAAA,UACA,WAAW,GAAG,KAAK,IAAI,OAAO;AAAA,UAC9B,QAAQ,SAAS,GAAG,MAAM,SAAS;AAAA,UACnC,UAAU,CAAC,QAAQ,SAAS,EAAE,GAAG,OAAO,IAAI,CAAC;AAAA;AAAA,MAC/C;AAAA,MACA,oBAAC,cAAW,WAAU,QAAO,IAAI,EAAE,OAAO,iBAAiB,GAAG,oBAE9D;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,MAAM;AAAA,UACb,OAAO;AAAA,UACP,aAAa;AAAA,UACb;AAAA,UACA,WAAW,GAAG,KAAK,IAAI,OAAO;AAAA,UAC9B,QAAQ,SAAS,GAAG,MAAM,SAAS;AAAA,UACnC,UAAU,CAAC,QAAQ,SAAS,EAAE,GAAG,OAAO,IAAI,CAAC;AAAA;AAAA,MAC/C;AAAA,OACF;AAAA,IACC,WACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,eAAa,SAAS,GAAG,MAAM,WAAW;AAAA,QAC1C,IAAI,EAAE,UAAU,MAAM,IAAI,GAAG,OAAO,aAAa;AAAA,QAEhD;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ;AACA,sBAAsB,cAAc;AAEpC,YAAY,SAAS;AACrB,YAAY,OAAO;AACnB,YAAY,QAAQ;AACpB,YAAY,UAAU;AACtB,YAAY,UAAU;AACtB,YAAY,gBAAgB;AAC5B,YAAY,aAAa;","names":[]}

package/dist/chunk-I62ALI7F.js

@@ -0,0 +1,208 @@
+import {
+  EN_US_SOCIAL_LOGIN_COPY
+} from "./chunk-INGPH3YQ.js";
+import {
+  Heading
+} from "./chunk-IJFAF3A7.js";
+import {
+  Separator
+} from "./chunk-Q4CAZ2TP.js";
+import {
+  Card,
+  CardContent
+} from "./chunk-N6CSXHFJ.js";
+import {
+  Button
+} from "./chunk-KH25WUSX.js";
+import {
+  Text
+} from "./chunk-WTOYEWW6.js";
+import {
+  uiInk
+} from "./chunk-FQ6UW7IY.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 { useTheme } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var GoogleIcon = () => {
+  const logo = uiInk(useTheme()).socialBrand.googleLogo;
+  return /* @__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: logo.blue
+      }
+    ),
+    /* @__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: logo.green
+      }
+    ),
+    /* @__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: logo.yellow
+      }
+    ),
+    /* @__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: logo.red
+      }
+    )
+  ] });
+};
+var FacebookIcon = () => {
+  const { logo } = uiInk(useTheme()).socialBrand.facebook;
+  return /* @__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: logo
+    }
+  ) });
+};
+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 GOOGLE_LOGO_WHEN_DISABLED_SX = {
+  "&.Mui-disabled .MuiButton-startIcon": {
+    filter: "brightness(0)",
+    opacity: (theme) => theme.palette.action.disabledOpacity
+  }
+};
+var FACEBOOK_LOGO_IN_BUTTON_COLOUR_SX = {
+  "& .MuiButton-startIcon path": { fill: "currentColor" }
+};
+var brand = (pick) => (theme) => pick(uiInk(theme).socialBrand);
+var providerConfig = {
+  google: {
+    Icon: GoogleIcon,
+    variant: "outline",
+    color: "neutral",
+    sx: {
+      backgroundColor: brand((c) => c.google.background),
+      color: brand((c) => c.google.text),
+      borderColor: brand((c) => c.google.border),
+      "&:hover": {
+        backgroundColor: brand((c) => c.google.hover),
+        borderColor: brand((c) => c.google.hoverBorder)
+      },
+      ...GOOGLE_LOGO_WHEN_DISABLED_SX
+    }
+  },
+  facebook: {
+    Icon: FacebookIcon,
+    variant: "solid",
+    color: "primary",
+    sx: {
+      backgroundColor: brand((c) => c.facebook.background),
+      color: brand((c) => c.facebook.text),
+      "&:hover": {
+        backgroundColor: brand((c) => c.facebook.hover)
+      },
+      ...FACEBOOK_LOGO_IN_BUTTON_COLOUR_SX
+    }
+  },
+  apple: {
+    Icon: AppleIcon,
+    variant: "solid",
+    color: "neutral",
+    sx: {
+      backgroundColor: brand((c) => c.apple.background),
+      color: brand((c) => c.apple.text),
+      "&:hover": {
+        backgroundColor: brand((c) => c.apple.hover)
+      }
+    }
+  }
+};
+var ICON_ONLY_SX = {
+  justifyContent: "center",
+  gap: 0,
+  "& .MuiButton-startIcon": { margin: 0 }
+};
+var SocialLoginButton = React.forwardRef(
+  ({
+    provider,
+    onClick,
+    loading = false,
+    disabled = false,
+    fullWidth = true,
+    copy = EN_US_SOCIAL_LOGIN_COPY,
+    dataTestId,
+    iconOnly = false
+  }, ref) => {
+    const config = providerConfig[provider];
+    const label = copy[provider];
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref,
+        variant: config.variant,
+        color: config.color,
+        size: "lg",
+        loading,
+        disabled,
+        onClick,
+        icon: /* @__PURE__ */ jsx(config.Icon, {}),
+        dataTestId,
+        fullWidth,
+        ...iconOnly ? { "aria-label": label, title: label } : {},
+        sx: {
+          minHeight: 48,
+          justifyContent: "flex-start",
+          gap: 2,
+          ...iconOnly ? ICON_ONLY_SX : {},
+          ...config.sx
+        },
+        children: iconOnly ? void 0 : 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-I62ALI7F.js.map