@12-apps/ui 6.33.1 → 6.34.0

package/dist/chunk-MZMGQKT3.js

@@ -0,0 +1,203 @@
+import {
+  ACTIONS_GAP_UNITS,
+  ACTIONS_MARGIN_TOP_UNITS,
+  ACTION_MIN_WIDTH,
+  CONTENT_GAP_UNITS,
+  DESCRIPTION_LINE_HEIGHT,
+  DESCRIPTION_MAX_WIDTH,
+  EMPTY_STATE_GAP_UNITS,
+  EMPTY_STATE_MIN_HEIGHT,
+  EMPTY_STATE_PADDING_UNITS,
+  EXTERNAL_LINK_MARK,
+  HELP_LINK_MARGIN_TOP_UNITS,
+  TITLE_MAX_WIDTH,
+  illustrationMaxWidth,
+  illustrationOpacity
+} from "./chunk-KLPTOVIX.js";
+import {
+  actionsOf,
+  makeTestId
+} from "./chunk-MWFSIB6K.js";
+import {
+  resolveTestId
+} from "./chunk-TYJR4GOF.js";
+
+// src/components/data-display/EmptyState/EmptyState.tsx
+import AddIcon from "@mui/icons-material/Add";
+import RefreshIcon from "@mui/icons-material/Refresh";
+import Box from "@mui/material/Box/index.js";
+import Button from "@mui/material/Button/index.js";
+import Link from "@mui/material/Link/index.js";
+import Stack from "@mui/material/Stack/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ACTION_ICONS = {
+  Add: /* @__PURE__ */ jsx(AddIcon, {}),
+  Refresh: /* @__PURE__ */ jsx(RefreshIcon, {})
+};
+var Illustration = ({ illustration, variant, testId }) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    "data-testid": testId,
+    sx: {
+      maxWidth: illustrationMaxWidth(variant),
+      width: "100%",
+      height: "auto",
+      opacity: illustrationOpacity(variant),
+      display: variant === "minimal" ? "none" : "block"
+    },
+    children: illustration
+  }
+);
+var Actions = ({ specs, testId }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Stack,
+    {
+      direction: { xs: "column", sm: "row" },
+      spacing: ACTIONS_GAP_UNITS,
+      alignItems: "center",
+      sx: { mt: theme.spacing(ACTIONS_MARGIN_TOP_UNITS) },
+      children: specs.map((spec) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: spec.variant,
+          onClick: spec.onClick,
+          startIcon: spec.icon && ACTION_ICONS[spec.icon],
+          "data-testid": testId(spec.key),
+          sx: { minWidth: ACTION_MIN_WIDTH },
+          children: spec.label
+        },
+        spec.key
+      ))
+    }
+  );
+};
+var HelpLink = ({ helpLink, testId }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    Link,
+    {
+      href: helpLink.href,
+      target: helpLink.external ? "_blank" : void 0,
+      rel: helpLink.external ? "noopener noreferrer" : void 0,
+      "data-testid": testId,
+      sx: {
+        mt: theme.spacing(HELP_LINK_MARGIN_TOP_UNITS),
+        color: theme.palette.primary.main,
+        textDecoration: "none",
+        "&:hover": {
+          textDecoration: "underline"
+        }
+      },
+      children: [
+        helpLink.label,
+        helpLink.external && EXTERNAL_LINK_MARK
+      ]
+    }
+  );
+};
+var Content = ({ title, description, titleId, testId, actions, showActions, helpLink }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(Stack, { spacing: CONTENT_GAP_UNITS, alignItems: "center", children: [
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        id: titleId,
+        variant: "h6",
+        component: "h3",
+        "data-testid": testId("title"),
+        sx: {
+          fontWeight: theme.typography.fontWeightMedium,
+          color: theme.palette.text.primary,
+          maxWidth: TITLE_MAX_WIDTH
+        },
+        children: title
+      }
+    ),
+    description && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "body2",
+        color: "text.secondary",
+        "data-testid": testId("description"),
+        sx: {
+          maxWidth: DESCRIPTION_MAX_WIDTH,
+          lineHeight: DESCRIPTION_LINE_HEIGHT
+        },
+        children: description
+      }
+    ),
+    showActions && /* @__PURE__ */ jsx(Actions, { specs: actions, testId }),
+    helpLink && /* @__PURE__ */ jsx(HelpLink, { helpLink, testId: testId("help-link") })
+  ] });
+};
+var EmptyState = React.memo((props) => {
+  const {
+    variant = "default",
+    title,
+    description,
+    illustration,
+    helpLink,
+    refreshLabel = "Refresh",
+    createLabel = "Create New",
+    className
+  } = props;
+  const theme = useTheme();
+  const titleId = React.useId();
+  const dataTestId = resolveTestId(props);
+  const testId = makeTestId(dataTestId);
+  const actions = actionsOf(props, refreshLabel, createLabel);
+  const showActions = variant === "action" || actions.length > 0;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      role: "region",
+      "aria-labelledby": titleId,
+      className,
+      "data-testid": dataTestId || "empty-state",
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        textAlign: "center",
+        padding: theme.spacing(EMPTY_STATE_PADDING_UNITS),
+        minHeight: EMPTY_STATE_MIN_HEIGHT,
+        gap: theme.spacing(EMPTY_STATE_GAP_UNITS)
+      },
+      children: [
+        illustration && /* @__PURE__ */ jsx(
+          Illustration,
+          {
+            illustration,
+            variant,
+            testId: testId("icon")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Content,
+          {
+            title,
+            description,
+            titleId,
+            testId,
+            actions,
+            showActions,
+            helpLink
+          }
+        )
+      ]
+    }
+  );
+});
+EmptyState.displayName = "EmptyState";
+var EmptyState_default = EmptyState;
+
+export {
+  EmptyState,
+  EmptyState_default
+};
+//# sourceMappingURL=chunk-MZMGQKT3.js.map

package/dist/chunk-N3GAFIXG.js

@@ -0,0 +1,93 @@
+// src/tokens/ink.core.ts
+var DATA_VIZ_NEON = {
+  series: ["#00ffff", "#ff00ff", "#ffff00", "#00ff00", "#ff0080", "#8000ff"],
+  ground: "#000",
+  accent: "#00ffff"
+};
+var TIMING_PHASES = {
+  dns: "#9C27B0",
+  connect: "#2196F3",
+  tls: "#00BCD4",
+  request: "#4CAF50",
+  response: "#FF9800"
+};
+var MAP_SURFACE = {
+  terrainFrom: "#8BC34A",
+  terrainTo: "#4CAF50",
+  terrainTileFrom: "#7cb342",
+  terrainTileTo: "#558b2f",
+  satelliteTileFrom: "#1a1a1a",
+  satelliteTileTo: "#2a2a2a"
+};
+var CODE_EDITOR_CHROME = {
+  light: {
+    background: "#FFFFFF",
+    foreground: "#24292E",
+    lineHighlight: "#F6F8FA",
+    lineNumber: "#959DA5",
+    lineNumberActive: "#24292E",
+    gutterBorder: "#D1D5DA",
+    selection: "#C8E1FF"
+  },
+  dark: {
+    background: "#0D1117",
+    foreground: "#C9D1D9",
+    lineHighlight: "#161B22",
+    lineNumber: "#8B949E",
+    lineNumberActive: "#C9D1D9",
+    gutterBorder: "#21262D",
+    selection: "#3392FF44"
+  }
+};
+var SOCIAL_BRAND = {
+  googleLogo: { blue: "#4285F4", green: "#34A853", yellow: "#FBBC05", red: "#EA4335" },
+  google: { background: "#ffffff", text: "#1f1f1f", border: "#dadce0", hover: "#f5f5f5", hoverBorder: "#dadce0" },
+  facebook: { background: "#1877F2", text: "#ffffff", hover: "#166fe5", logo: "#1877F2" },
+  apple: { background: "#000000", text: "#ffffff", hover: "#1a1a1a" }
+};
+var CELEBRATION_GRADIENTS = {
+  mint: ["#84fab0", "#8fd3f4"],
+  violet: ["#667eea", "#764ba2"]
+};
+var ATTENTION_INK = { from: "#ff5252", to: "#ff1744", glow: "rgb(255, 23, 68)" };
+var HIGHLIGHT_MARK = "#fff2a8";
+var GLASS_SLATE = "rgb(17, 24, 39)";
+var PANEL_SHADOW_INK = "rgb(16, 20, 35)";
+var EFFECT_GLOW = { muiBlue: "rgb(25, 118, 210)", brandIndigo: "rgb(99, 102, 241)" };
+var ELEVATION_SHADOWS = {
+  1: "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
+  2: "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
+  3: "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
+  8: "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)"
+};
+var ABSOLUTE_INK = { black: "#000", white: "#fff" };
+var NEUTRAL_RAMP = {
+  50: "#fafafa",
+  100: "#f5f5f5",
+  200: "#eeeeee",
+  300: "#e0e0e0",
+  400: "#bdbdbd",
+  500: "#9e9e9e",
+  600: "#757575",
+  700: "#616161",
+  800: "#424242",
+  900: "#212121"
+};
+
+export {
+  DATA_VIZ_NEON,
+  TIMING_PHASES,
+  MAP_SURFACE,
+  CODE_EDITOR_CHROME,
+  SOCIAL_BRAND,
+  CELEBRATION_GRADIENTS,
+  ATTENTION_INK,
+  HIGHLIGHT_MARK,
+  GLASS_SLATE,
+  PANEL_SHADOW_INK,
+  EFFECT_GLOW,
+  ELEVATION_SHADOWS,
+  ABSOLUTE_INK,
+  NEUTRAL_RAMP
+};
+//# sourceMappingURL=chunk-N3GAFIXG.js.map

package/dist/chunk-N3GAFIXG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tokens/ink.core.ts"],"sourcesContent":["/**\n * THE COLOURS THAT HAVE NO PALETTE ROLE, NAMED — with no renderer behind them.\n *\n * Every colour a component draws comes from the theme (FUT-2593, under\n * FUT-2585). Most have a palette role — text, divider, a semantic main, a\n * neutral tone (`./ink.ts`). These do not: a chart's neon series, a map's\n * terrain, a code editor's syntax chrome, a vendor's brand. They were hex\n * literals inside components; they are NAMED sets here, which a host can\n * replace through `theme.uiInk` (`./ink.ts`), and each default is exactly the\n * value the component drew before, so moving it here changed nothing on screen.\n *\n * This file imports nothing: `*.metrics.ts` tables, which the native renderer\n * reads too, take their colours from it.\n */\n\n/** The `neon` Chart variant: its series, its ground, its accent (`Chart`). */\nexport const DATA_VIZ_NEON = {\n  series: ['#00ffff', '#ff00ff', '#ffff00', '#00ff00', '#ff0080', '#8000ff'],\n  ground: '#000',\n  accent: '#00ffff',\n} as const;\n\n/** The phases a `TimingDiagram` bar is split into, in order. */\nexport const TIMING_PHASES = {\n  dns: '#9C27B0',\n  connect: '#2196F3',\n  tls: '#00BCD4',\n  request: '#4CAF50',\n  response: '#FF9800',\n} as const;\n\n/** `MapPreview`'s ground for the terrain and satellite map types. */\nexport const MAP_SURFACE = {\n  terrainFrom: '#8BC34A',\n  terrainTo: '#4CAF50',\n  terrainTileFrom: '#7cb342',\n  terrainTileTo: '#558b2f',\n  satelliteTileFrom: '#1a1a1a',\n  satelliteTileTo: '#2a2a2a',\n} as const;\n\n/** `CodeEditor`'s Monaco chrome, per mode — GitHub's own light and dark. */\nexport const CODE_EDITOR_CHROME = {\n  light: {\n    background: '#FFFFFF',\n    foreground: '#24292E',\n    lineHighlight: '#F6F8FA',\n    lineNumber: '#959DA5',\n    lineNumberActive: '#24292E',\n    gutterBorder: '#D1D5DA',\n    selection: '#C8E1FF',\n  },\n  dark: {\n    background: '#0D1117',\n    foreground: '#C9D1D9',\n    lineHighlight: '#161B22',\n    lineNumber: '#8B949E',\n    lineNumberActive: '#C9D1D9',\n    gutterBorder: '#21262D',\n    selection: '#3392FF44',\n  },\n} as const;\n\n/**\n * The social-login providers' OWN colours. Brand rules fix these — a host may\n * not \"theme\" Google's button — so the override exists only for a provider that\n * changes its guideline.\n */\nexport const SOCIAL_BRAND = {\n  googleLogo: { blue: '#4285F4', green: '#34A853', yellow: '#FBBC05', red: '#EA4335' },\n  google: { background: '#ffffff', text: '#1f1f1f', border: '#dadce0', hover: '#f5f5f5', hoverBorder: '#dadce0' },\n  facebook: { background: '#1877F2', text: '#ffffff', hover: '#166fe5', logo: '#1877F2' },\n  apple: { background: '#000000', text: '#ffffff', hover: '#1a1a1a' },\n} as const;\n\n/** The two decorative gradients a completed step and a tutorial's call to action wear. */\nexport const CELEBRATION_GRADIENTS = {\n  mint: ['#84fab0', '#8fd3f4'],\n  violet: ['#667eea', '#764ba2'],\n} as const;\n\n/** A count that wants attention before it is read (`NavigationMenu`'s badge). */\nexport const ATTENTION_INK = { from: '#ff5252', to: '#ff1744', glow: 'rgb(255, 23, 68)' } as const;\n\n/** A search hit inside a row label (`CategorySelect`). */\nexport const HIGHLIGHT_MARK = '#fff2a8';\n\n/** The slate a frosted breadcrumb bar is tinted with in dark mode. */\nexport const GLASS_SLATE = 'rgb(17, 24, 39)';\n\n/** The ink of a raised floating panel's shadow (`CategorySelect`). */\nexport const PANEL_SHADOW_INK = 'rgb(16, 20, 35)';\n\n/**\n * Glows that were drawn in a FIXED hue rather than the host's primary: MUI's\n * default blue (`Checkbox`, `NavigationMenu`) and the platform's default indigo\n * (`Breadcrumbs`). Kept as they are — moving them onto `palette.primary` would\n * recolour them for every host — and named so that a host can.\n */\nexport const EFFECT_GLOW = { muiBlue: 'rgb(25, 118, 210)', brandIndigo: 'rgb(99, 102, 241)' } as const;\n\n/**\n * MUI's own elevation shadows 1, 2, 3 and 8 — what `theme.shadows[n]` holds at\n * MUI's defaults — for the `*.metrics.ts` tables the native renderer reads.\n */\nexport const ELEVATION_SHADOWS = {\n  1: '0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)',\n  2: '0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)',\n  3: '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)',\n  8: '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)',\n} as const;\n\n/** The two absolutes, for a renderer with no palette to read them from. */\nexport const ABSOLUTE_INK = { black: '#000', white: '#fff' } as const;\n\n/** The grey ramp's steps the neutral tones are drawn from (MUI's). */\nexport const NEUTRAL_RAMP = {\n  50: '#fafafa',\n  100: '#f5f5f5',\n  200: '#eeeeee',\n  300: '#e0e0e0',\n  400: '#bdbdbd',\n  500: '#9e9e9e',\n  600: '#757575',\n  700: '#616161',\n  800: '#424242',\n  900: '#212121',\n} as const;\n"],"mappings":";AAgBO,IAAM,gBAAgB;AAAA,EAC3B,QAAQ,CAAC,WAAW,WAAW,WAAW,WAAW,WAAW,SAAS;AAAA,EACzE,QAAQ;AAAA,EACR,QAAQ;AACV;AAGO,IAAM,gBAAgB;AAAA,EAC3B,KAAK;AAAA,EACL,SAAS;AAAA,EACT,KAAK;AAAA,EACL,SAAS;AAAA,EACT,UAAU;AACZ;AAGO,IAAM,cAAc;AAAA,EACzB,aAAa;AAAA,EACb,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,iBAAiB;AACnB;AAGO,IAAM,qBAAqB;AAAA,EAChC,OAAO;AAAA,IACL,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,kBAAkB;AAAA,IAClB,cAAc;AAAA,IACd,WAAW;AAAA,EACb;AAAA,EACA,MAAM;AAAA,IACJ,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,kBAAkB;AAAA,IAClB,cAAc;AAAA,IACd,WAAW;AAAA,EACb;AACF;AAOO,IAAM,eAAe;AAAA,EAC1B,YAAY,EAAE,MAAM,WAAW,OAAO,WAAW,QAAQ,WAAW,KAAK,UAAU;AAAA,EACnF,QAAQ,EAAE,YAAY,WAAW,MAAM,WAAW,QAAQ,WAAW,OAAO,WAAW,aAAa,UAAU;AAAA,EAC9G,UAAU,EAAE,YAAY,WAAW,MAAM,WAAW,OAAO,WAAW,MAAM,UAAU;AAAA,EACtF,OAAO,EAAE,YAAY,WAAW,MAAM,WAAW,OAAO,UAAU;AACpE;AAGO,IAAM,wBAAwB;AAAA,EACnC,MAAM,CAAC,WAAW,SAAS;AAAA,EAC3B,QAAQ,CAAC,WAAW,SAAS;AAC/B;AAGO,IAAM,gBAAgB,EAAE,MAAM,WAAW,IAAI,WAAW,MAAM,mBAAmB;AAGjF,IAAM,iBAAiB;AAGvB,IAAM,cAAc;AAGpB,IAAM,mBAAmB;AAQzB,IAAM,cAAc,EAAE,SAAS,qBAAqB,aAAa,oBAAoB;AAMrF,IAAM,oBAAoB;AAAA,EAC/B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGO,IAAM,eAAe,EAAE,OAAO,QAAQ,OAAO,OAAO;AAGpD,IAAM,eAAe;AAAA,EAC1B,IAAI;AAAA,EACJ,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AACP;","names":[]}

package/dist/chunk-N6CSXHFJ.js

@@ -0,0 +1,194 @@
+import {
+  resolveCardProps
+} from "./chunk-FKUYRQSP.js";
+import {
+  cardStyles
+} from "./chunk-LVEG6XQL.js";
+import {
+  CARD_CONTENT_PADDING_UNITS,
+  CARD_HEADER_CHILDREN_PADDING_UNITS,
+  CARD_LOADING,
+  CARD_MEDIA_HEIGHT
+} from "./chunk-JH7EEJEQ.js";
+import {
+  childTestId,
+  resolveTestId,
+  withoutTestIdProps
+} from "./chunk-TYJR4GOF.js";
+
+// src/components/layout/Card/Card.tsx
+import Box from "@mui/material/Box/index.js";
+import MuiCard from "@mui/material/Card/index.js";
+import MuiCardActions from "@mui/material/CardActions/index.js";
+import MuiCardContent from "@mui/material/CardContent/index.js";
+import MuiCardHeader from "@mui/material/CardHeader/index.js";
+import MuiCardMedia from "@mui/material/CardMedia/index.js";
+import CircularProgress from "@mui/material/CircularProgress/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Card = (rawProps) => {
+  const {
+    children,
+    variant,
+    interactive,
+    glow,
+    pulse,
+    borderRadius,
+    loading,
+    onClick,
+    onFocus,
+    onBlur,
+    sx,
+    // These props are reserved for future implementation but need to be extracted
+    // to prevent them from being passed to the underlying MuiCard
+    expandable: _expandable,
+    expanded: _expanded,
+    onExpandToggle: _onExpandToggle,
+    entranceAnimation: _entranceAnimation,
+    animationDelay: _animationDelay,
+    skeleton: _skeleton,
+    hoverScale: _hoverScale,
+    ...restProps
+  } = resolveCardProps(rawProps);
+  const theme = useTheme();
+  const ownTestId = resolveTestId(restProps, "card");
+  const props = withoutTestIdProps(restProps);
+  const idle = !loading;
+  return /* @__PURE__ */ jsxs(
+    MuiCard,
+    {
+      "data-testid": ownTestId,
+      onClick: idle ? onClick : void 0,
+      onFocus: idle ? onFocus : void 0,
+      onBlur: idle ? onBlur : void 0,
+      sx: {
+        ...cardStyles(theme, { variant, interactive, glow, pulse, borderRadius }),
+        position: "relative",
+        opacity: loading ? CARD_LOADING.opacity : 1,
+        pointerEvents: loading ? "none" : "auto",
+        ...sx
+      },
+      ...props,
+      children: [
+        loading && /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+              zIndex: CARD_LOADING.spinnerZIndex
+            },
+            children: /* @__PURE__ */ jsx(CircularProgress, {})
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+var CardHeader = ({
+  title,
+  subtitle,
+  action,
+  avatar,
+  children,
+  ...others
+}) => {
+  const ownTestId = resolveTestId(others, "card-header");
+  const props = withoutTestIdProps(others);
+  if (children) {
+    return /* @__PURE__ */ jsx(Box, { sx: { p: CARD_HEADER_CHILDREN_PADDING_UNITS }, "data-testid": ownTestId, children });
+  }
+  return /* @__PURE__ */ jsx(
+    MuiCardHeader,
+    {
+      "data-testid": ownTestId,
+      avatar,
+      action,
+      title,
+      subheader: subtitle,
+      titleTypographyProps: {
+        "data-testid": childTestId(others, "title", "card")
+      },
+      subheaderTypographyProps: {
+        "data-testid": childTestId(others, "subtitle", "card")
+      },
+      ...props
+    }
+  );
+};
+var CardContent = ({ children, dense = false, ...others }) => /* @__PURE__ */ jsx(
+  MuiCardContent,
+  {
+    "data-testid": resolveTestId(others, "card-content"),
+    sx: {
+      padding: dense ? CARD_CONTENT_PADDING_UNITS.dense : CARD_CONTENT_PADDING_UNITS.normal,
+      "&:last-child": {
+        paddingBottom: dense ? CARD_CONTENT_PADDING_UNITS.dense : CARD_CONTENT_PADDING_UNITS.normal
+      }
+    },
+    ...withoutTestIdProps(others),
+    children
+  }
+);
+var CardActions = ({
+  children,
+  disableSpacing = false,
+  alignment = "left",
+  ...others
+}) => {
+  const getJustifyContent = () => {
+    switch (alignment) {
+      case "center":
+        return "center";
+      case "right":
+        return "flex-end";
+      case "space-between":
+        return "space-between";
+      default:
+        return "flex-start";
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    MuiCardActions,
+    {
+      "data-testid": resolveTestId(others, "card-actions"),
+      disableSpacing,
+      sx: {
+        justifyContent: getJustifyContent()
+      },
+      ...withoutTestIdProps(others),
+      children
+    }
+  );
+};
+var CardMedia = ({
+  component = "div",
+  image,
+  title,
+  height = CARD_MEDIA_HEIGHT,
+  children,
+  ...others
+}) => /* @__PURE__ */ jsx(
+  MuiCardMedia,
+  {
+    "data-testid": resolveTestId(others, "card-media"),
+    component,
+    height,
+    image,
+    title,
+    ...withoutTestIdProps(others),
+    children
+  }
+);
+
+export {
+  Card,
+  CardHeader,
+  CardContent,
+  CardActions,
+  CardMedia
+};
+//# sourceMappingURL=chunk-N6CSXHFJ.js.map

package/dist/chunk-NFZRZB5N.js

@@ -0,0 +1,201 @@
+import {
+  RangeBounds
+} from "./chunk-ZHFS5L6Q.js";
+import {
+  isRangeSet
+} from "./chunk-GCZJH4XL.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  MultiSelectDropdown
+} from "./chunk-EKSSKQUW.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  Text
+} from "./chunk-H57ZS6W2.js";
+import {
+  fieldHeight
+} from "./chunk-CGO452DC.js";
+import {
+  fieldRadiusPx
+} from "./chunk-GDN2LUTZ.js";
+import {
+  fieldEdge
+} from "./chunk-7FDU3FIN.js";
+
+// src/components/data-display/DataViews/data-views-more-fields.tsx
+import Checkbox from "@mui/material/Checkbox/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var INLINE_OPTION_LIMIT = 2;
+function OverflowPill({
+  field,
+  values,
+  onToggle,
+  onClear,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  const options = field.pill?.options ?? [];
+  if (options.length > INLINE_OPTION_LIMIT) {
+    return /* @__PURE__ */ jsx(
+      MultiSelectDropdown,
+      {
+        extraOptionsHeading: copy.filters.optionsHeading,
+        clearText: copy.filters.clear,
+        clearLabel: copy.filters.clearRange(field.label),
+        label: field.pill?.label ?? field.label,
+        options,
+        selected: new Set(values),
+        onToggle,
+        onClear,
+        allLabel: copy.filters.allOption,
+        searchable: options.length > 6 ? true : void 0,
+        searchPlaceholder: copy.filters.optionSearchPlaceholder,
+        noResultsLabel: copy.filters.optionsEmpty,
+        layout: "pill",
+        "data-testid": `${testIdPrefix}-more-${field.id}`
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(default2, { sx: { display: "flex", flexWrap: "wrap", gap: 0.75 }, children: (field.pill?.options ?? []).map((option) => {
+    const checked = values.includes(option.value);
+    return /* @__PURE__ */ jsxs(
+      default2,
+      {
+        component: "label",
+        "data-testid": `${testIdPrefix}-more-${field.id}-${option.value}`,
+        sx: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 0.25,
+          pr: 1,
+          border: 1,
+          borderStyle: "solid",
+          minHeight: fieldHeight,
+          borderColor: (theme) => checked ? theme.palette.primary.main : fieldEdge(theme),
+          bgcolor: checked ? "action.selected" : "transparent",
+          borderRadius: fieldRadiusPx,
+          cursor: "pointer",
+          fontSize: "0.8125rem",
+          color: checked ? "primary.main" : "text.secondary"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              size: "small",
+              checked,
+              onChange: (event) => onToggle(option.value, event.target.checked),
+              inputProps: { "aria-label": `${field.label}: ${option.label}` }
+            }
+          ),
+          option.label
+        ]
+      },
+      option.value
+    );
+  }) });
+}
+function OverflowRange({
+  field,
+  value,
+  onChange,
+  testIdPrefix
+}) {
+  if (!field.range) return null;
+  return /* @__PURE__ */ jsx(
+    RangeBounds,
+    {
+      field: field.range,
+      value,
+      onChange,
+      testId: `${testIdPrefix}-more-${field.id}`
+    }
+  );
+}
+function fieldClearing({
+  field,
+  pills,
+  ranges,
+  onTogglePill,
+  onChangeRange
+}) {
+  if (field.group === "range") {
+    return {
+      applied: isRangeSet(ranges[field.id] ?? {}),
+      clear: () => onChangeRange(field.id, {})
+    };
+  }
+  const values = pills[field.id] ?? [];
+  return {
+    applied: values.length > 0,
+    clear: () => values.forEach((value) => onTogglePill(field.id, value, false))
+  };
+}
+function MoreGroup({
+  field,
+  pills,
+  ranges,
+  onTogglePill,
+  onChangeRange,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  const { applied, clear } = fieldClearing({ field, pills, ranges, onTogglePill, onChangeRange });
+  return /* @__PURE__ */ jsxs(default2, { sx: { mb: 1.5, "&:last-of-type": { mb: 0 } }, children: [
+    /* @__PURE__ */ jsxs(default2, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 0.5 }, children: [
+      /* @__PURE__ */ jsx(Text, { variant: "caption", as: "span", children: /* @__PURE__ */ jsxs(default2, { component: "span", sx: { color: "text.secondary" }, children: [
+        field.label,
+        field.group === "range" && isRangeSet(ranges[field.id] ?? {}) ? " \u2022" : ""
+      ] }) }),
+      applied && /* @__PURE__ */ jsx(
+        default2,
+        {
+          component: "button",
+          type: "button",
+          onClick: clear,
+          "data-testid": `${testIdPrefix}-more-${field.id}-clear`,
+          sx: {
+            ml: "auto",
+            border: 0,
+            p: 0,
+            bgcolor: "transparent",
+            cursor: "pointer",
+            font: "inherit",
+            fontSize: "0.75rem",
+            color: "primary.main",
+            "&:hover": { textDecoration: "underline" }
+          },
+          children: copy.filters.clear
+        }
+      )
+    ] }),
+    field.group === "pill" ? /* @__PURE__ */ jsx(
+      OverflowPill,
+      {
+        field,
+        values: pills[field.id] ?? [],
+        onToggle: (value, checked) => onTogglePill(field.id, value, checked),
+        onClear: () => (pills[field.id] ?? []).forEach((v) => onTogglePill(field.id, v, false)),
+        testIdPrefix
+      }
+    ) : /* @__PURE__ */ jsx(
+      OverflowRange,
+      {
+        field,
+        value: ranges[field.id] ?? {},
+        onChange: (range) => onChangeRange(field.id, range),
+        testIdPrefix
+      }
+    )
+  ] });
+}
+
+export {
+  fieldClearing,
+  MoreGroup
+};
+//# sourceMappingURL=chunk-NFZRZB5N.js.map