@12-apps/ui 6.33.1 → 6.35.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-NE6XUN5Z.js

@@ -0,0 +1,41 @@
+import {
+  useFormContext
+} from "./chunk-4XK6JQ4D.js";
+import {
+  CategorySelect
+} from "./chunk-ZW5K4XCQ.js";
+
+// src/components/form/total-form/Fields/CategoryField.tsx
+import { jsx } from "react/jsx-runtime";
+function CategoryField({
+  name,
+  options,
+  label,
+  placeholder,
+  allowParentSelection = true,
+  copy
+}) {
+  const { values, errors, setFieldValue } = useFormContext();
+  const error = errors[name];
+  return /* @__PURE__ */ jsx(
+    CategorySelect,
+    {
+      copy,
+      mode: "single",
+      fullWidth: true,
+      label,
+      placeholder,
+      options,
+      allowParentSelection,
+      value: values[name] ? values[name] : null,
+      error,
+      onChange: (next) => setFieldValue(name, next ?? ""),
+      dataTestId: `total-form-field-${name}`
+    }
+  );
+}
+
+export {
+  CategoryField
+};
+//# sourceMappingURL=chunk-NE6XUN5Z.js.map

package/dist/chunk-NEGCJNGJ.js

@@ -0,0 +1,153 @@
+import {
+  absoluteInk,
+  controlNeutral,
+  neutralTones
+} from "./chunk-FQ6UW7IY.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/typography/Blockquote/Blockquote.tsx
+import FormatQuote from "@mui/icons-material/FormatQuote";
+import Box from "@mui/material/Box/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, styled } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var getColorFromTheme = (theme, color) => {
+  if (color === "neutral") {
+    const { main, light, dark } = controlNeutral(theme);
+    return { main, light, dark };
+  }
+  const colorMap = {
+    primary: theme.palette.primary,
+    secondary: theme.palette.secondary,
+    success: theme.palette.success,
+    warning: theme.palette.warning,
+    info: theme.palette.info,
+    danger: theme.palette.error
+  };
+  return colorMap[color] || theme.palette.primary;
+};
+var StyledBlockquote = styled("blockquote", {
+  shouldForwardProp: (prop) => !["customVariant", "customColor"].includes(prop)
+})(({ theme, customVariant = "default", customColor = "neutral" }) => {
+  const colorPalette = getColorFromTheme(theme, customColor);
+  const baseStyles = {
+    margin: "1.5em 0",
+    padding: 0,
+    position: "relative",
+    fontFamily: theme.typography.body1.fontFamily,
+    fontSize: rem(theme, 18),
+    lineHeight: 1.6,
+    fontStyle: "italic",
+    color: theme.palette.text.primary
+  };
+  if (customVariant === "bordered") {
+    return {
+      ...baseStyles,
+      padding: theme.spacing(3),
+      border: `2px solid ${alpha(colorPalette.main, 0.2)}`,
+      borderRadius: theme.shape.borderRadius * 2,
+      backgroundColor: alpha(colorPalette.main, 0.03),
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        top: -1,
+        left: -1,
+        right: -1,
+        bottom: -1,
+        background: `linear-gradient(135deg, ${colorPalette.main}, ${colorPalette.light})`,
+        borderRadius: theme.shape.borderRadius * 2,
+        padding: "2px",
+        WebkitMask: `linear-gradient(${absoluteInk(theme).white} 0 0) content-box, linear-gradient(${absoluteInk(theme).white} 0 0)`,
+        WebkitMaskComposite: "exclude",
+        mask: `linear-gradient(${absoluteInk(theme).white} 0 0) content-box, linear-gradient(${absoluteInk(theme).white} 0 0)`,
+        maskComposite: "exclude"
+      }
+    };
+  }
+  if (customVariant === "citation") {
+    return {
+      ...baseStyles,
+      padding: theme.spacing(2, 3),
+      backgroundColor: theme.palette.mode === "dark" ? alpha(theme.palette.background.paper, 0.8) : alpha(neutralTones(theme).canvas, 0.95),
+      backdropFilter: theme.palette.mode === "dark" ? "blur(10px)" : "none",
+      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+      borderRadius: theme.shape.borderRadius * 2,
+      boxShadow: theme.palette.mode === "dark" ? theme.shadows[4] : "none",
+      textAlign: "center"
+    };
+  }
+  return {
+    ...baseStyles,
+    paddingLeft: theme.spacing(3),
+    borderLeft: `4px solid ${colorPalette.main}`,
+    backgroundColor: alpha(colorPalette.main, 0.05),
+    padding: theme.spacing(2, 3),
+    borderRadius: theme.shape.borderRadius
+  };
+});
+var QuoteIcon = styled(FormatQuote)(({ theme, customColor }) => {
+  const colorPalette = getColorFromTheme(theme, customColor);
+  return {
+    position: "absolute",
+    top: theme.spacing(1),
+    left: theme.spacing(1),
+    fontSize: rem(theme, 32),
+    opacity: 0.3,
+    transform: "rotate(180deg)",
+    color: colorPalette.main
+  };
+});
+var CitationContainer = styled(Box)(({ theme }) => ({
+  marginTop: theme.spacing(2),
+  textAlign: "right",
+  fontStyle: "normal",
+  opacity: 0.8
+}));
+var AuthorName = styled(Typography)(({ theme }) => ({
+  fontWeight: 600,
+  fontSize: rem(theme, 14),
+  marginBottom: theme.spacing(0.5)
+}));
+var SourceName = styled(Typography)(({ theme }) => ({
+  fontSize: rem(theme, 12),
+  opacity: 0.7
+}));
+var Blockquote = React.forwardRef(
+  ({ variant = "default", author, source, color = "neutral", children, ...props }, ref) => {
+    const showCitation = author || source;
+    const showIcon = variant === "bordered" || variant === "citation";
+    return /* @__PURE__ */ jsxs(StyledBlockquote, { ref, customVariant: variant, customColor: color, ...props, children: [
+      showIcon && /* @__PURE__ */ jsx(QuoteIcon, { customColor: color }),
+      /* @__PURE__ */ jsx(
+        Typography,
+        {
+          component: "div",
+          sx: {
+            fontSize: "inherit",
+            lineHeight: "inherit",
+            fontStyle: "inherit",
+            color: "inherit",
+            margin: 0
+          },
+          children
+        }
+      ),
+      showCitation && /* @__PURE__ */ jsxs(CitationContainer, { children: [
+        author && /* @__PURE__ */ jsxs(AuthorName, { children: [
+          "\u2014 ",
+          author
+        ] }),
+        source && /* @__PURE__ */ jsx(SourceName, { children: source })
+      ] })
+    ] });
+  }
+);
+Blockquote.displayName = "Blockquote";
+
+export {
+  Blockquote
+};
+//# sourceMappingURL=chunk-NEGCJNGJ.js.map