@12-apps/ui 6.33.1 → 6.35.0

package/dist/chunk-X7PVFAYJ.js

@@ -0,0 +1,54 @@
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  default as default3
+} from "./chunk-WEBEOBN5.js";
+import {
+  Text
+} from "./chunk-WTOYEWW6.js";
+
+// src/components/data-display/DataViews/save-view-preview.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function SummaryRow({
+  label,
+  items,
+  testId
+}) {
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsxs(default2, { sx: { display: "flex", gap: 1.5 }, "data-testid": testId, children: [
+    /* @__PURE__ */ jsx(Text, { variant: "caption", as: "span", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { width: 116, flexShrink: 0, color: "text.secondary" }, children: label }) }),
+    /* @__PURE__ */ jsx(Text, { variant: "caption", as: "span", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { minWidth: 0, flex: 1 }, children: items.join(", ") }) })
+  ] });
+}
+function PreviewBox({ preview, testIdPrefix }) {
+  const copy = useDataViewsCopy();
+  const empty = preview.filters.length === 0 && preview.columns.length === 0 && preview.sort.length === 0;
+  return /* @__PURE__ */ jsxs(default2, { sx: { p: 1.5, borderRadius: 1.5, bgcolor: "action.hover", border: (theme) => `1px solid ${theme.palette.divider}` }, children: [
+    /* @__PURE__ */ jsx(Text, { variant: "caption", as: "p", children: /* @__PURE__ */ jsx(
+      default2,
+      {
+        component: "span",
+        sx: { display: "block", mb: 1, textTransform: "uppercase", letterSpacing: 0.6, fontWeight: 600, color: "text.disabled" },
+        children: copy.saveView.previewHeading
+      }
+    ) }),
+    empty ? (
+      // Saving is still allowed — an operator may be naming the default on
+      // purpose — but it should not be a surprise afterwards.
+      /* @__PURE__ */ jsx(Text, { variant: "caption", as: "p", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { color: "warning.main", lineHeight: 1.6 }, "data-testid": `${testIdPrefix}-preview-empty`, children: copy.saveView.previewUnchanged }) })
+    ) : /* @__PURE__ */ jsxs(default3, { spacing: 0.75, children: [
+      /* @__PURE__ */ jsx(SummaryRow, { label: copy.saveView.previewFilters, items: preview.filters, testId: `${testIdPrefix}-preview-filters` }),
+      /* @__PURE__ */ jsx(SummaryRow, { label: copy.saveView.previewHiddenColumns, items: preview.columns, testId: `${testIdPrefix}-preview-columns` }),
+      /* @__PURE__ */ jsx(SummaryRow, { label: copy.saveView.sortRowLabel, items: preview.sort, testId: `${testIdPrefix}-preview-sort` })
+    ] })
+  ] });
+}
+
+export {
+  PreviewBox
+};
+//# sourceMappingURL=chunk-X7PVFAYJ.js.map

package/dist/chunk-XEYLYUDM.js

@@ -0,0 +1,147 @@
+import {
+  accentFor
+} from "./chunk-TCAQOUIB.js";
+import {
+  headingMetrics
+} from "./chunk-PT6TCWIW.js";
+import {
+  fieldOverrides
+} from "./chunk-CGO452DC.js";
+import {
+  fieldRadius
+} from "./chunk-GDN2LUTZ.js";
+import {
+  FONT_WEIGHTS,
+  TYPE_SIZES,
+  WEB_FONT_FAMILY,
+  WEB_MONOSPACE_FONT_FAMILY
+} from "./chunk-PE4ZW3IA.js";
+import {
+  cssLengthToPx,
+  cssTrackingToEm
+} from "./chunk-AG66JBNH.js";
+import {
+  HEADING_LEVELS
+} from "./chunk-FZXKH2ZT.js";
+import {
+  resolveFieldHeight
+} from "./chunk-PZBK3F52.js";
+
+// src/provider/mui-bridge.ts
+var slot = (color) => ({
+  main: color.main,
+  light: color.light,
+  dark: color.dark,
+  contrastText: color.contrastText
+});
+function headingSteps(theme) {
+  return Object.fromEntries(
+    HEADING_LEVELS.map((level) => {
+      const metrics = headingMetrics(theme, level);
+      return [
+        level,
+        {
+          fontSize: cssLengthToPx(metrics.fontSize, 16),
+          lineHeight: metrics.lineHeight,
+          letterSpacing: cssTrackingToEm(metrics.letterSpacing),
+          normalWeight: metrics.normalWeight
+        }
+      ];
+    })
+  );
+}
+function uiThemeFromMui(theme) {
+  const { palette } = theme;
+  const unit = cssLengthToPx(theme.spacing(1), 8);
+  const md = cssLengthToPx(theme.shape.borderRadius, 4);
+  return {
+    mode: palette.mode,
+    palette: {
+      mode: palette.mode,
+      primary: slot(palette.primary),
+      secondary: slot(palette.secondary),
+      success: slot(palette.success),
+      warning: slot(palette.warning),
+      info: slot(palette.info),
+      danger: slot(palette.error),
+      neutral: accentFor(theme, "neutral"),
+      text: {
+        primary: palette.text.primary,
+        secondary: palette.text.secondary,
+        disabled: palette.text.disabled
+      },
+      background: { default: palette.background.default, paper: palette.background.paper },
+      divider: palette.divider,
+      action: {
+        active: palette.action.active,
+        hover: palette.action.hover,
+        selected: palette.action.selected,
+        disabled: palette.action.disabled,
+        disabledBackground: palette.action.disabledBackground,
+        focus: palette.action.focus
+      },
+      grey: {
+        50: palette.grey[50],
+        100: palette.grey[100],
+        200: palette.grey[200],
+        300: palette.grey[300],
+        400: palette.grey[400],
+        500: palette.grey[500],
+        600: palette.grey[600],
+        700: palette.grey[700],
+        800: palette.grey[800],
+        900: palette.grey[900]
+      }
+    },
+    spacing: (units) => units * unit,
+    spacingUnit: unit,
+    radius: { sm: md / 2, md, lg: md * 2, xl: md * 4, full: 9999, field: fieldRadius(theme) },
+    fieldHeight: resolveFieldHeight(theme.fieldHeight),
+    typography: {
+      fontFamily: theme.typography.fontFamily ?? WEB_FONT_FAMILY,
+      monospaceFontFamily: WEB_MONOSPACE_FONT_FAMILY,
+      sizes: TYPE_SIZES,
+      weights: FONT_WEIGHTS,
+      heading: headingSteps(theme)
+    },
+    zIndex: {
+      appBar: theme.zIndex.appBar,
+      drawer: theme.zIndex.drawer,
+      modal: theme.zIndex.modal,
+      snackbar: theme.zIndex.snackbar,
+      tooltip: theme.zIndex.tooltip
+    }
+  };
+}
+function muiThemeOptionsFrom(ui) {
+  const { palette } = ui;
+  return {
+    palette: {
+      mode: palette.mode,
+      primary: { ...palette.primary },
+      secondary: { ...palette.secondary },
+      success: { ...palette.success },
+      warning: { ...palette.warning },
+      info: { ...palette.info },
+      error: { ...palette.danger },
+      text: { ...palette.text },
+      background: { ...palette.background },
+      divider: palette.divider,
+      action: { ...palette.action },
+      grey: { ...palette.grey }
+    },
+    shape: { borderRadius: ui.radius.md },
+    fieldRadius: ui.radius.field,
+    fieldHeight: ui.fieldHeight,
+    components: fieldOverrides(ui.radius.field, ui.fieldHeight),
+    spacing: ui.spacingUnit,
+    typography: { fontFamily: ui.typography.fontFamily ?? WEB_FONT_FAMILY },
+    zIndex: { ...ui.zIndex }
+  };
+}
+
+export {
+  uiThemeFromMui,
+  muiThemeOptionsFrom
+};
+//# sourceMappingURL=chunk-XEYLYUDM.js.map

package/dist/chunk-XLYFOBBT.js

@@ -0,0 +1,180 @@
+import {
+  CHECKBOX_GLOW,
+  CHECKBOX_HELPER,
+  CHECKBOX_HOVER_ALPHA,
+  CHECKBOX_LABEL,
+  CHECKBOX_PULSE,
+  CHECKBOX_SPINNER,
+  CHECKBOX_TRANSITION_MS,
+  CHECKBOX_VARIANT,
+  effectInk
+} from "./chunk-TIQXDPIX.js";
+import {
+  makeTestId,
+  resolveCheckboxProps
+} from "./chunk-TZ633UZA.js";
+import {
+  splitTestId
+} from "./chunk-TYJR4GOF.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/Checkbox/Checkbox.tsx
+import MuiCheckbox from "@mui/material/Checkbox/index.js";
+import CircularProgress from "@mui/material/CircularProgress/index.js";
+import FormControlLabel from "@mui/material/FormControlLabel/index.js";
+import FormHelperText from "@mui/material/FormHelperText/index.js";
+import { alpha, keyframes, styled } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var pulse = keyframes`
+  0% {
+    box-shadow: 0 0 0 0 ${effectInk(CHECKBOX_PULSE.alpha)};
+  }
+  70% {
+    box-shadow: 0 0 0 ${CHECKBOX_PULSE.spread}px ${effectInk(0)};
+  }
+  100% {
+    box-shadow: 0 0 0 0 ${effectInk(0)};
+  }
+`;
+var glow = keyframes`
+  0%, 100% {
+    box-shadow: 0 0 ${CHECKBOX_GLOW.blur.from}px ${effectInk(CHECKBOX_GLOW.alpha.from)};
+  }
+  50% {
+    box-shadow: 0 0 ${CHECKBOX_GLOW.blur.to}px ${effectInk(CHECKBOX_GLOW.alpha.to)};
+  }
+`;
+var StyledCheckbox = styled(MuiCheckbox, {
+  shouldForwardProp: (prop) => !["customVariant", "ripple", "glow", "pulse"].includes(prop)
+})(
+  ({ theme, customVariant, ripple, glow: glowProp, pulse: pulseProp }) => ({
+    ...customVariant === "rounded" && {
+      "& .MuiSvgIcon-root": {
+        borderRadius: CHECKBOX_VARIANT.rounded.radius
+      }
+    },
+    ...customVariant === "toggle" && {
+      "& .MuiSvgIcon-root": {
+        borderRadius: `${CHECKBOX_VARIANT.toggle.radius}px`,
+        transform: `scale(${CHECKBOX_VARIANT.toggle.scale})`
+      }
+    },
+    "&.MuiCheckbox-root": {
+      transition: `all ${CHECKBOX_TRANSITION_MS / 1e3}s ease`,
+      ...ripple === false && {
+        "& .MuiTouchRipple-root": {
+          display: "none"
+        }
+      },
+      ...glowProp && {
+        animation: `${glow} ${CHECKBOX_GLOW.ms / 1e3}s ease-in-out infinite`
+      },
+      ...pulseProp && {
+        animation: `${pulse} ${CHECKBOX_PULSE.ms / 1e3}s infinite`
+      },
+      "&:hover": {
+        backgroundColor: alpha(theme.palette.primary.main, CHECKBOX_HOVER_ALPHA)
+      }
+    },
+    "&.Mui-checked": {
+      color: theme.palette.primary.main
+    },
+    "&.MuiCheckbox-indeterminate": {
+      color: theme.palette.primary.main
+    }
+  })
+);
+var StyledFormControlLabel = styled(FormControlLabel, {
+  shouldForwardProp: (prop) => prop !== "error"
+})(
+  ({ theme, error }) => ({
+    marginLeft: CHECKBOX_LABEL.marginLeft,
+    "& .MuiFormControlLabel-label": {
+      color: error ? theme.palette.error.main : theme.palette.text.primary,
+      fontSize: rem(theme, CHECKBOX_LABEL.fontSize)
+    }
+  })
+);
+var StyledFormHelperText = styled(FormHelperText)(({ theme }) => ({
+  marginLeft: theme.spacing(CHECKBOX_HELPER.marginLeftUnits),
+  marginTop: theme.spacing(CHECKBOX_HELPER.marginTopUnits)
+}));
+var Checkbox = React.forwardRef(
+  (rawProps, ref) => {
+    const {
+      variant,
+      label,
+      error,
+      helperText,
+      loading,
+      ripple,
+      glow: glow2,
+      pulse: pulse2,
+      disabled,
+      ...others
+    } = resolveCheckboxProps(rawProps);
+    const isDisabled = disabled || loading;
+    const { testId: dataTestId, rest: props } = splitTestId(others);
+    const testId = makeTestId(dataTestId);
+    const checkbox = /* @__PURE__ */ jsxs("div", { style: { position: "relative", display: "inline-flex" }, children: [
+      /* @__PURE__ */ jsx(
+        StyledCheckbox,
+        {
+          ref,
+          customVariant: variant,
+          ripple,
+          glow: glow2,
+          pulse: pulse2,
+          disabled: isDisabled,
+          "data-testid": dataTestId || "checkbox",
+          ...props
+        }
+      ),
+      loading && /* @__PURE__ */ jsx(
+        CircularProgress,
+        {
+          size: CHECKBOX_SPINNER.size,
+          sx: {
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            marginTop: `${CHECKBOX_SPINNER.offset}px`,
+            marginLeft: `${CHECKBOX_SPINNER.offset}px`,
+            color: "primary.main"
+          }
+        }
+      )
+    ] });
+    if (label) {
+      return /* @__PURE__ */ jsxs("div", { "data-testid": testId("container"), children: [
+        /* @__PURE__ */ jsx(
+          StyledFormControlLabel,
+          {
+            control: checkbox,
+            label,
+            error,
+            disabled: isDisabled
+          }
+        ),
+        helperText && /* @__PURE__ */ jsx(
+          StyledFormHelperText,
+          {
+            error,
+            "data-testid": testId("helper"),
+            children: helperText
+          }
+        )
+      ] });
+    }
+    return checkbox;
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+export {
+  Checkbox
+};
+//# sourceMappingURL=chunk-XLYFOBBT.js.map

package/dist/chunk-XLYFOBBT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Checkbox/Checkbox.tsx"],"sourcesContent":["import MuiCheckbox from '@mui/material/Checkbox/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport FormControlLabel from '@mui/material/FormControlLabel/index.js';\nimport FormHelperText from '@mui/material/FormHelperText/index.js';\nimport { alpha, keyframes, styled } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { makeTestId, resolveCheckboxProps } from './Checkbox.helpers';\nimport {\n  CHECKBOX_GLOW,\n  CHECKBOX_HELPER,\n  CHECKBOX_HOVER_ALPHA,\n  CHECKBOX_LABEL,\n  CHECKBOX_PULSE,\n  CHECKBOX_SPINNER,\n  CHECKBOX_TRANSITION_MS,\n  CHECKBOX_VARIANT,\n  effectInk,\n} from './Checkbox.metrics';\nimport type { CheckboxProps } from './Checkbox.types';\nimport { splitTestId } from '../../../platform/test-id';\nimport { rem } from '../../../tokens/relative';\n\nconst pulse = keyframes`\n  0% {\n    box-shadow: 0 0 0 0 ${effectInk(CHECKBOX_PULSE.alpha)};\n  }\n  70% {\n    box-shadow: 0 0 0 ${CHECKBOX_PULSE.spread}px ${effectInk(0)};\n  }\n  100% {\n    box-shadow: 0 0 0 0 ${effectInk(0)};\n  }\n`;\n\nconst glow = keyframes`\n  0%, 100% {\n    box-shadow: 0 0 ${CHECKBOX_GLOW.blur.from}px ${effectInk(CHECKBOX_GLOW.alpha.from)};\n  }\n  50% {\n    box-shadow: 0 0 ${CHECKBOX_GLOW.blur.to}px ${effectInk(CHECKBOX_GLOW.alpha.to)};\n  }\n`;\n\nconst StyledCheckbox = styled(MuiCheckbox, {\n  shouldForwardProp: (prop) => !['customVariant', 'ripple', 'glow', 'pulse'].includes(prop as string),\n})<{ \n  customVariant?: CheckboxProps['variant'];\n  ripple?: boolean;\n  glow?: boolean;\n  pulse?: boolean;\n}>(\n  ({ theme, customVariant, ripple, glow: glowProp, pulse: pulseProp }) => ({\n    ...(customVariant === 'rounded' && {\n      '& .MuiSvgIcon-root': {\n        borderRadius: CHECKBOX_VARIANT.rounded.radius,\n      },\n    }),\n    \n    ...(customVariant === 'toggle' && {\n      '& .MuiSvgIcon-root': {\n        borderRadius: `${CHECKBOX_VARIANT.toggle.radius}px`,\n        transform: `scale(${CHECKBOX_VARIANT.toggle.scale})`,\n      },\n    }),\n    \n    '&.MuiCheckbox-root': {\n      transition: `all ${CHECKBOX_TRANSITION_MS / 1000}s ease`,\n      ...(ripple === false && {\n        '& .MuiTouchRipple-root': {\n          display: 'none',\n        },\n      }),\n      ...(glowProp && {\n        animation: `${glow} ${CHECKBOX_GLOW.ms / 1000}s ease-in-out infinite`,\n      }),\n      ...(pulseProp && {\n        animation: `${pulse} ${CHECKBOX_PULSE.ms / 1000}s infinite`,\n      }),\n      '&:hover': {\n        backgroundColor: alpha(theme.palette.primary.main, CHECKBOX_HOVER_ALPHA),\n      },\n    },\n    \n    '&.Mui-checked': {\n      color: theme.palette.primary.main,\n    },\n    \n    '&.MuiCheckbox-indeterminate': {\n      color: theme.palette.primary.main,\n    },\n  })\n);\n\nconst StyledFormControlLabel = styled(FormControlLabel, {\n  shouldForwardProp: (prop) => prop !== 'error',\n})<{ error?: boolean }>(\n  ({ theme, error }) => ({\n    marginLeft: CHECKBOX_LABEL.marginLeft,\n    '& .MuiFormControlLabel-label': {\n      color: error ? theme.palette.error.main : theme.palette.text.primary,\n      fontSize: rem(theme, CHECKBOX_LABEL.fontSize),\n    },\n  })\n);\n\nconst StyledFormHelperText = styled(FormHelperText)(({ theme }) => ({\n  marginLeft: theme.spacing(CHECKBOX_HELPER.marginLeftUnits),\n  marginTop: theme.spacing(CHECKBOX_HELPER.marginTopUnits),\n}));\n\nexport const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(\n  (rawProps, ref) => {\n    const {\n      variant,\n      label,\n      error,\n      helperText,\n      loading,\n      ripple,\n      glow,\n      pulse,\n      disabled,\n      ...others\n    } = resolveCheckboxProps(rawProps);\n    const isDisabled = disabled || loading;\n    const { testId: dataTestId, rest: props } = splitTestId(others);\n    const testId = makeTestId(dataTestId);\n\n    const checkbox = (\n      <div style={{ position: 'relative', display: 'inline-flex' }}>\n        <StyledCheckbox\n          ref={ref}\n          customVariant={variant}\n          ripple={ripple}\n          glow={glow}\n          pulse={pulse}\n          disabled={isDisabled}\n          data-testid={dataTestId || 'checkbox'}\n          {...props}\n        />\n        {loading && (\n          <CircularProgress\n            size={CHECKBOX_SPINNER.size}\n            sx={{\n              position: 'absolute',\n              top: '50%',\n              left: '50%',\n              marginTop: `${CHECKBOX_SPINNER.offset}px`,\n              marginLeft: `${CHECKBOX_SPINNER.offset}px`,\n              color: 'primary.main',\n            }}\n          />\n        )}\n      </div>\n    );\n    \n    if (label) {\n      return (\n        <div data-testid={testId('container')}>\n          <StyledFormControlLabel\n            control={checkbox}\n            label={label}\n            error={error}\n            disabled={isDisabled}\n          />\n          {helperText && (\n            <StyledFormHelperText \n              error={error}\n              data-testid={testId('helper')}\n            >\n              {helperText}\n            </StyledFormHelperText>\n          )}\n        </div>\n      );\n    }\n    \n    return checkbox;\n  }\n);\n\nCheckbox.displayName = 'Checkbox';"],"mappings":"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","names":["glow","pulse"]}

package/dist/chunk-XREYLKUX.js

@@ -0,0 +1,270 @@
+import {
+  CARD_RADIUS,
+  cardSurfaceStyles,
+  isActionable,
+  isSelectable,
+  slotTestIds
+} from "./chunk-NXX3ZQKO.js";
+import {
+  DragHandle,
+  useDragItem
+} from "./chunk-JCJGJX7V.js";
+import {
+  CARD_ASPECT_RATIOS
+} from "./chunk-LHHAYZ55.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  Checkbox
+} from "./chunk-XLYFOBBT.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  Card
+} from "./chunk-N6CSXHFJ.js";
+import {
+  Text
+} from "./chunk-WTOYEWW6.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/base-card.tsx
+import { useTheme } from "@mui/material/styles/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function cardSx(opts) {
+  const { aspectRatio, pad, scale, interactive, draggable } = opts;
+  return {
+    position: "relative",
+    zoom: scale,
+    aspectRatio: String(CARD_ASPECT_RATIOS[aspectRatio]),
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    p: pad,
+    cursor: draggable ? "grab" : interactive ? "pointer" : void 0,
+    ...draggable ? { touchAction: "none", "&:active": { cursor: "grabbing" } } : {}
+  };
+}
+var OVERLAY_BAND_PX = 42;
+function contentGaps(opts) {
+  const { hasMedia, hasBody, overlays, pad } = opts;
+  const gap = pad * 0.5;
+  const clear = !hasMedia && overlays ? Math.max(0, OVERLAY_BAND_PX / 8 - pad) : 0;
+  return { body: hasMedia ? gap : clear, caption: hasMedia || hasBody ? gap : clear };
+}
+function CardOverlays({
+  selected,
+  onToggleSelect,
+  checkboxTestId,
+  menu
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    onToggleSelect && /* @__PURE__ */ jsx(default2, { sx: { position: "absolute", top: 4, left: 4, zIndex: 2 }, children: /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        checked: selected,
+        onChange: () => onToggleSelect(),
+        onClick: (event) => event.stopPropagation(),
+        size: "small",
+        "data-testid": checkboxTestId,
+        "aria-label": copy.selection.selectRow
+      }
+    ) }),
+    menu && /* @__PURE__ */ jsx(
+      default2,
+      {
+        sx: { position: "absolute", top: 4, right: 4, zIndex: 2 },
+        onClick: (event) => event.stopPropagation(),
+        children: menu
+      }
+    )
+  ] });
+}
+function CardMedia({ image, imageFallback }) {
+  return /* @__PURE__ */ jsx(
+    default2,
+    {
+      sx: {
+        flex: 1,
+        minHeight: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        overflow: "hidden",
+        borderRadius: 1,
+        "& img": { width: "100%", height: "100%", objectFit: "cover" }
+      },
+      children: image ?? imageFallback
+    }
+  );
+}
+function CardBodyContent({
+  children,
+  fill,
+  topGap
+}) {
+  return /* @__PURE__ */ jsx(
+    default2,
+    {
+      sx: {
+        flex: fill ? 1 : "none",
+        minHeight: 0,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 0.75,
+        mt: topGap,
+        overflow: "hidden"
+      },
+      children
+    }
+  );
+}
+function CardCaption({
+  title,
+  subtitle,
+  topGap
+}) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(default2, { sx: { mt: topGap, minWidth: 0 }, children: [
+    title != null && /* @__PURE__ */ jsx(
+      Text,
+      {
+        variant: "heading",
+        size: "sm",
+        weight: "bold",
+        as: "p",
+        style: {
+          lineHeight: 1.15,
+          fontSize: rem(theme, 15.2),
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        },
+        children: title
+      }
+    ),
+    subtitle != null && /* @__PURE__ */ jsx(Text, { variant: "caption", size: "xs", color: "secondary", as: "p", children: subtitle })
+  ] });
+}
+function CardContents({
+  children,
+  image,
+  imageFallback,
+  title,
+  subtitle,
+  overlays,
+  pad
+}) {
+  const hasMedia = image != null || imageFallback != null;
+  const hasBody = children != null;
+  const hasCaption = title != null || subtitle != null;
+  const top = contentGaps({ hasMedia, hasBody, overlays, pad });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    hasMedia && /* @__PURE__ */ jsx(CardMedia, { image, imageFallback }),
+    hasBody && /* @__PURE__ */ jsx(CardBodyContent, { fill: !hasMedia, topGap: top.body, children }),
+    hasCaption && /* @__PURE__ */ jsx(CardCaption, { title, subtitle, topGap: top.caption })
+  ] });
+}
+function useCardShell(props) {
+  const actionable = isActionable(props.state);
+  return {
+    selectable: isSelectable(props),
+    actionable,
+    theme: useTheme(),
+    slot: slotTestIds(props.testId),
+    scale: props.scale ?? 1,
+    // The card's own veto over the container's decision — see `CardSurfaceProps`.
+    drag: useDragItem(props.draggable === false || !actionable ? void 0 : props.dragId)
+  };
+}
+function BaseCard(props) {
+  const { aspectRatio = "4:3", selected = false } = props;
+  const { menu, onToggleSelect, onClick } = props;
+  const { selectable, actionable, theme, slot, scale, drag } = useCardShell(props);
+  const dataTestId = props.testId;
+  const checkboxTestId = slot("checkbox");
+  const pad = 1.5;
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      variant: "outlined",
+      onClick,
+      dataTestId,
+      className: props.className,
+      "aria-label": props["aria-label"],
+      "aria-disabled": actionable ? void 0 : true,
+      ...drag.itemProps,
+      sx: {
+        // The same corner the row uses: a Grade and a Lista of the same records
+        // sit beside each other, and a tile that rounds harder than the row
+        // reads as a different component.
+        borderRadius: CARD_RADIUS,
+        // The shared half — variant, colour, selection, effects — identical to
+        // the one BaseListCard uses, so a Grade and a Lista of the same records
+        // are dressed by one set of rules.
+        ...cardSurfaceStyles(
+          {
+            ...props,
+            selectable,
+            shape: "tile",
+            // A card mid-drag is a ghost of itself; the drop target is what the
+            // eye should be on.
+            state: drag.dragging ? "disabled" : props.state
+          },
+          theme
+        ),
+        // …and the tile's own geometry on top.
+        ...cardSx({
+          aspectRatio,
+          pad,
+          scale,
+          interactive: onClick != null,
+          draggable: drag.draggable && drag.handleProps === void 0
+        })
+      },
+      children: [
+        drag.draggable && /* @__PURE__ */ jsx(default2, { sx: { position: "absolute", bottom: 4, left: 4, zIndex: 2 }, children: /* @__PURE__ */ jsx(
+          DragHandle,
+          {
+            handleProps: drag.handleProps,
+            gated: drag.handleProps !== void 0,
+            testId: slot("drag")
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          CardOverlays,
+          {
+            selected,
+            onToggleSelect: selectable ? onToggleSelect ?? (() => {
+            }) : void 0,
+            checkboxTestId,
+            menu
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CardContents,
+          {
+            image: props.image,
+            imageFallback: props.imageFallback,
+            title: props.title,
+            subtitle: props.subtitle,
+            overlays: selectable || menu != null,
+            pad,
+            children: props.children
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  BaseCard
+};
+//# sourceMappingURL=chunk-XREYLKUX.js.map