@12-apps/ui 6.19.1 → 6.21.0

package/dist/chunk-I3MDKPGG.js

@@ -0,0 +1,203 @@
+import {
+  Skeleton
+} from "./chunk-QS7ZGRNS.js";
+
+// src/components/data-display/StatCard/StatCard.tsx
+import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
+import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
+import RemoveIcon from "@mui/icons-material/Remove";
+import Box from "@mui/material/Box/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 DIRECTION_ICON = {
+  up: ArrowUpwardIcon,
+  down: ArrowDownwardIcon,
+  neutral: RemoveIcon
+};
+var DIRECTION_WORD = {
+  up: "Increase of",
+  down: "Decrease of",
+  neutral: "Change of"
+};
+var IMPLIED_TONE = {
+  up: "positive",
+  down: "negative",
+  neutral: "neutral"
+};
+function toneColor(tone, theme) {
+  if (tone === "positive") return theme.palette.success.main;
+  if (tone === "negative") return theme.palette.error.main;
+  return theme.palette.text.secondary;
+}
+function deltaAriaLabel(delta) {
+  if (delta.ariaLabel) return delta.ariaLabel;
+  const suffix = delta.label ? ` ${delta.label}` : "";
+  return `${DIRECTION_WORD[delta.direction]} ${delta.value}${suffix}`;
+}
+function DeltaRow({ delta, testId }) {
+  const theme = useTheme();
+  const tone = delta.tone ?? IMPLIED_TONE[delta.direction];
+  const Icon = DIRECTION_ICON[delta.direction];
+  const color = toneColor(tone, theme);
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      direction: "row",
+      spacing: 0.5,
+      sx: { alignItems: "center", flexWrap: "wrap" },
+      "data-testid": testId,
+      "data-direction": delta.direction,
+      "data-tone": tone,
+      children: [
+        /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", sx: { fontSize: "1rem", color } }),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "body2",
+            component: "span",
+            "aria-label": deltaAriaLabel(delta),
+            sx: { color, fontWeight: theme.typography.fontWeightMedium },
+            children: delta.value
+          }
+        ),
+        delta.label && /* @__PURE__ */ jsx(Typography, { variant: "caption", component: "span", sx: { color: theme.palette.text.secondary }, children: delta.label })
+      ]
+    }
+  );
+}
+function LabelRow({
+  label,
+  icon,
+  labelId,
+  testId
+}) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, children: [
+    icon && /* @__PURE__ */ jsx(
+      Box,
+      {
+        "aria-hidden": "true",
+        "data-testid": `${testId}-icon`,
+        sx: { display: "flex", color: theme.palette.text.secondary },
+        children: icon
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        id: labelId,
+        variant: "caption",
+        component: "p",
+        "data-testid": `${testId}-label`,
+        sx: { color: theme.palette.text.secondary },
+        children: label
+      }
+    )
+  ] });
+}
+function ValueRow({
+  value,
+  loading,
+  testId
+}) {
+  const theme = useTheme();
+  if (loading) {
+    return /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        variant: "rectangular",
+        height: 28,
+        width: "60%",
+        borderRadius: 4,
+        "data-testid": `${testId}-value-skeleton`
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Typography,
+    {
+      variant: "h6",
+      component: "p",
+      "data-testid": `${testId}-value`,
+      sx: {
+        fontWeight: theme.typography.fontWeightMedium,
+        color: theme.palette.text.primary,
+        overflowWrap: "anywhere"
+      },
+      children: value
+    }
+  );
+}
+function DeltaSlot({
+  delta,
+  loading,
+  testId
+}) {
+  if (!delta) return null;
+  if (loading) {
+    return /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        variant: "rectangular",
+        height: 16,
+        width: "40%",
+        borderRadius: 4,
+        "data-testid": `${testId}-delta-skeleton`
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(DeltaRow, { delta, testId: `${testId}-delta` });
+}
+var StatCard = React.memo(
+  ({ label, value, delta, icon, hint, loading = false, className, dataTestId }) => {
+    const theme = useTheme();
+    const labelId = React.useId();
+    const testId = dataTestId || "stat-card";
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        role: "group",
+        "aria-labelledby": labelId,
+        "aria-busy": loading || void 0,
+        className,
+        "data-testid": testId,
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          gap: theme.spacing(0.5),
+          padding: theme.spacing(2),
+          borderRadius: theme.shape.borderRadius / 4,
+          border: `1px solid ${theme.palette.divider}`,
+          backgroundColor: theme.palette.background.paper,
+          minWidth: 0
+        },
+        children: [
+          /* @__PURE__ */ jsx(LabelRow, { label, icon, labelId, testId }),
+          /* @__PURE__ */ jsx(ValueRow, { value, loading, testId }),
+          /* @__PURE__ */ jsx(DeltaSlot, { delta, loading, testId }),
+          hint && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "caption",
+              component: "p",
+              "data-testid": `${testId}-hint`,
+              sx: { color: theme.palette.text.secondary },
+              children: hint
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+StatCard.displayName = "StatCard";
+var StatCard_default = StatCard;
+
+export {
+  StatCard,
+  StatCard_default
+};
+//# sourceMappingURL=chunk-I3MDKPGG.js.map

package/dist/chunk-I7HYGIEJ.js

@@ -0,0 +1,175 @@
+import {
+  AvatarView
+} from "./chunk-4SQFO4GW.js";
+import {
+  BORDER_WIDTH,
+  GROUP_HOVER,
+  GROUP_MAX,
+  GROUP_OVERLAP
+} from "./chunk-FAITHWIO.js";
+import {
+  AVATAR_DEFAULTS,
+  contentTypeOf,
+  pickAvatarContent
+} from "./chunk-3ZVUNSFF.js";
+
+// src/components/data-display/Avatar/Avatar.tsx
+import BrokenImage from "@mui/icons-material/BrokenImage";
+import Person from "@mui/icons-material/Person";
+import { styled } from "@mui/material/styles/index.js";
+import React, { useCallback, useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function resolveContent(args) {
+  const { children, fallback, icon, imageError, showFallbackOnError } = args;
+  const pick = pickAvatarContent({
+    hasChildren: Boolean(children),
+    hasFallback: Boolean(fallback),
+    hasIcon: Boolean(icon),
+    imageError,
+    showFallbackOnError
+  });
+  const NODES = {
+    children,
+    fallback,
+    icon,
+    broken: /* @__PURE__ */ jsx(BrokenImage, {}),
+    default: /* @__PURE__ */ jsx(Person, {})
+  };
+  return { content: NODES[pick], contentType: contentTypeOf(pick) };
+}
+function useMountedFade(animationDelay) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    const timer = window.setTimeout(() => setMounted(true), animationDelay);
+    return () => window.clearTimeout(timer);
+  }, [animationDelay]);
+  return mounted;
+}
+function useImageState(src, onError) {
+  const [imageError, setImageError] = useState(false);
+  const [imageLoading, setImageLoading] = useState(!!src);
+  useEffect(() => {
+    setImageError(false);
+    setImageLoading(!!src);
+  }, [src]);
+  const handleImageError = useCallback(
+    (event) => {
+      setImageError(true);
+      setImageLoading(false);
+      onError?.(event);
+    },
+    [onError]
+  );
+  const handleImageLoad = useCallback(() => setImageLoading(false), []);
+  return { imageError, imageLoading, handleImageError, handleImageLoad };
+}
+function useAvatarModel(raw, ref) {
+  const {
+    variant,
+    size,
+    glow,
+    pulse,
+    status,
+    fallback,
+    icon,
+    bordered,
+    color,
+    src,
+    alt,
+    children,
+    loading,
+    onError,
+    onClick,
+    interactive,
+    showFallbackOnError,
+    animationDelay,
+    className,
+    dataTestId,
+    // React Native's spelling of the same id; it names the component on both
+    // sides and must not reach the DOM as an attribute.
+    testID,
+    ...rest
+  } = { ...AVATAR_DEFAULTS, ...raw };
+  const mounted = useMountedFade(animationDelay);
+  const { imageError, imageLoading, handleImageError, handleImageLoad } = useImageState(src, onError);
+  const handleClick = useCallback(
+    (event) => onClick?.(event),
+    [onClick]
+  );
+  const { content, contentType } = resolveContent({
+    children,
+    fallback,
+    icon,
+    imageError,
+    showFallbackOnError
+  });
+  return {
+    mounted,
+    variant,
+    size,
+    color,
+    glow,
+    pulse,
+    bordered,
+    showSpinner: loading || imageLoading,
+    imageError,
+    clickable: interactive || !!onClick,
+    imgSrc: imageError ? void 0 : src,
+    alt,
+    ariaLabel: rest["aria-label"] || alt || "Avatar",
+    content,
+    contentType,
+    className,
+    dataTestId: testID ?? dataTestId,
+    status,
+    forwardedRef: ref,
+    onClick: handleClick,
+    handleImageError,
+    handleImageLoad,
+    rest
+  };
+}
+var Avatar = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(AvatarView, { ...useAvatarModel(props, ref) }));
+Avatar.displayName = "Avatar";
+var AvatarGroupContainer = styled("div")(({ theme, overlap = GROUP_OVERLAP }) => ({
+  display: "flex",
+  alignItems: "center",
+  "& > *": {
+    marginLeft: -overlap,
+    transition: "all 0.3s ease",
+    position: "relative",
+    border: `${BORDER_WIDTH}px solid ${theme.palette.background.paper}`,
+    "&:hover": {
+      zIndex: 100,
+      transform: `scale(${GROUP_HOVER.scale}) translateY(-${GROUP_HOVER.lift}px)`
+    },
+    "&:first-of-type": {
+      marginLeft: 0
+    }
+  }
+}));
+var AvatarGroup = ({ children, max = GROUP_MAX, overlap = GROUP_OVERLAP, className, dataTestId }) => {
+  const childrenArray = React.Children.toArray(children);
+  const visibleChildren = max ? childrenArray.slice(0, max) : childrenArray;
+  const remainingCount = childrenArray.length - visibleChildren.length;
+  return /* @__PURE__ */ jsxs(AvatarGroupContainer, { overlap, className, "data-testid": dataTestId, children: [
+    visibleChildren,
+    remainingCount > 0 && /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        size: visibleChildren[0]?.props?.size || "md",
+        color: "neutral",
+        fallback: `+${remainingCount}`,
+        bordered: true,
+        dataTestId: dataTestId ? `${dataTestId}-overflow` : void 0
+      }
+    )
+  ] });
+};
+AvatarGroup.displayName = "AvatarGroup";
+
+export {
+  Avatar,
+  AvatarGroup
+};
+//# sourceMappingURL=chunk-I7HYGIEJ.js.map

package/dist/chunk-I7HYGIEJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Avatar/Avatar.tsx"],"sourcesContent":["import BrokenImage from '@mui/icons-material/BrokenImage';\nimport Person from '@mui/icons-material/Person';\nimport { styled } from '@mui/material/styles/index.js';\nimport React, { useCallback, useEffect, useState } from 'react';\n\nimport {\n  AVATAR_DEFAULTS,\n  contentTypeOf,\n  pickAvatarContent,\n  type AvatarContentPick,\n} from './Avatar.helpers';\nimport { GROUP_MAX, GROUP_OVERLAP, GROUP_HOVER, BORDER_WIDTH } from './Avatar.metrics';\nimport type { AvatarProps, ContentType } from './Avatar.types';\nimport { AvatarView, type AvatarViewProps } from './Avatar.view';\n\n/** The node behind the winning content slot; the pick itself is shared. */\nfunction resolveContent(args: {\n  children?: React.ReactNode;\n  fallback?: React.ReactNode;\n  icon?: React.ReactNode;\n  imageError: boolean;\n  showFallbackOnError: boolean;\n}): { content: React.ReactNode; contentType: ContentType } {\n  const { children, fallback, icon, imageError, showFallbackOnError } = args;\n  const pick = pickAvatarContent({\n    hasChildren: Boolean(children),\n    hasFallback: Boolean(fallback),\n    hasIcon: Boolean(icon),\n    imageError,\n    showFallbackOnError,\n  });\n  const NODES: Record<AvatarContentPick, React.ReactNode> = {\n    children,\n    fallback,\n    icon,\n    broken: <BrokenImage />,\n    default: <Person />,\n  };\n  return { content: NODES[pick], contentType: contentTypeOf(pick) };\n}\n\n/** Fades the avatar in after `animationDelay`ms. */\nfunction useMountedFade(animationDelay: number): boolean {\n  const [mounted, setMounted] = useState(false);\n  useEffect(() => {\n    const timer = window.setTimeout(() => setMounted(true), animationDelay);\n    return () => window.clearTimeout(timer);\n  }, [animationDelay]);\n  return mounted;\n}\n\ninterface ImageState {\n  imageError: boolean;\n  imageLoading: boolean;\n  handleImageError: React.ReactEventHandler;\n  handleImageLoad: () => void;\n}\n\n/**\n * Tracks the `<img>` load lifecycle. `imageLoading` starts true whenever there is\n * a `src` and clears on load/error — the handlers must be wired to the actual img\n * (via `slotProps.img` in the view), since load/error don't bubble to the root.\n */\nfunction useImageState(src: string | undefined, onError?: React.ReactEventHandler): ImageState {\n  const [imageError, setImageError] = useState(false);\n  const [imageLoading, setImageLoading] = useState(!!src);\n\n  useEffect(() => {\n    setImageError(false);\n    setImageLoading(!!src);\n  }, [src]);\n\n  const handleImageError = useCallback<React.ReactEventHandler>(\n    (event) => {\n      setImageError(true);\n      setImageLoading(false);\n      onError?.(event);\n    },\n    [onError],\n  );\n\n  const handleImageLoad = useCallback(() => setImageLoading(false), []);\n\n  return { imageError, imageLoading, handleImageError, handleImageLoad };\n}\n\n/** Normalizes props (defaults + rest passthrough) and derives everything the view needs. */\nfunction useAvatarModel(raw: AvatarProps, ref: React.Ref<HTMLDivElement>): AvatarViewProps {\n  const {\n    variant,\n    size,\n    glow,\n    pulse,\n    status,\n    fallback,\n    icon,\n    bordered,\n    color,\n    src,\n    alt,\n    children,\n    loading,\n    onError,\n    onClick,\n    interactive,\n    showFallbackOnError,\n    animationDelay,\n    className,\n    dataTestId,\n    // React Native's spelling of the same id; it names the component on both\n    // sides and must not reach the DOM as an attribute.\n    testID,\n    ...rest\n  } = { ...AVATAR_DEFAULTS, ...raw };\n\n  const mounted = useMountedFade(animationDelay);\n  const { imageError, imageLoading, handleImageError, handleImageLoad } = useImageState(src, onError);\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => onClick?.(event),\n    [onClick],\n  );\n  const { content, contentType } = resolveContent({\n    children,\n    fallback,\n    icon,\n    imageError,\n    showFallbackOnError,\n  });\n\n  return {\n    mounted,\n    variant,\n    size,\n    color,\n    glow,\n    pulse,\n    bordered,\n    showSpinner: loading || imageLoading,\n    imageError,\n    clickable: interactive || !!onClick,\n    imgSrc: imageError ? undefined : src,\n    alt,\n    ariaLabel: (rest['aria-label'] as string) || alt || 'Avatar',\n    content,\n    contentType,\n    className,\n    dataTestId: testID ?? dataTestId,\n    status,\n    forwardedRef: ref,\n    onClick: handleClick,\n    handleImageError,\n    handleImageLoad,\n    rest,\n  };\n}\n\nexport const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>((props, ref) => (\n  <AvatarView {...useAvatarModel(props, ref)} />\n));\n\nAvatar.displayName = 'Avatar';\n\nconst AvatarGroupContainer = styled('div')<{ overlap?: number }>(({ theme, overlap = GROUP_OVERLAP }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  '& > *': {\n    marginLeft: -overlap,\n    transition: 'all 0.3s ease',\n    position: 'relative',\n    border: `${BORDER_WIDTH}px solid ${theme.palette.background.paper}`,\n    '&:hover': {\n      zIndex: 100,\n      transform: `scale(${GROUP_HOVER.scale}) translateY(-${GROUP_HOVER.lift}px)`,\n    },\n    '&:first-of-type': {\n      marginLeft: 0,\n    },\n  },\n}));\n\n// Export AvatarGroup for grouped avatars\nexport const AvatarGroup: React.FC<{\n  children: React.ReactNode;\n  max?: number;\n  overlap?: number;\n  className?: string;\n  dataTestId?: string;\n}> = ({ children, max = GROUP_MAX, overlap = GROUP_OVERLAP, className, dataTestId }) => {\n  const childrenArray = React.Children.toArray(children);\n  const visibleChildren = max ? childrenArray.slice(0, max) : childrenArray;\n  const remainingCount = childrenArray.length - visibleChildren.length;\n\n  return (\n    <AvatarGroupContainer overlap={overlap} className={className} data-testid={dataTestId}>\n      {visibleChildren}\n      {remainingCount > 0 && (\n        <Avatar\n          size={(visibleChildren[0] as React.ReactElement<AvatarProps>)?.props?.size || 'md'}\n          color=\"neutral\"\n          fallback={`+${remainingCount}`}\n          bordered\n          dataTestId={dataTestId ? `${dataTestId}-overflow` : undefined}\n        />\n      )}\n    </AvatarGroupContainer>\n  );\n};\n\nAvatarGroup.displayName = 'AvatarGroup';\n"],"mappings":"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","names":[]}

package/dist/chunk-IE7ISTLQ.js

@@ -0,0 +1,167 @@
+import {
+  SettingsSectionHeader
+} from "./chunk-4M6CEQVK.js";
+import {
+  SettingsSectionChips
+} from "./chunk-SVSOUC5S.js";
+import {
+  TOUCH_TARGET,
+  atLeastRail,
+  displayAcrossRail
+} from "./chunk-LIG7TKIB.js";
+
+// src/components/layout/SettingsLayout/SettingsPanel.tsx
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import Box from "@mui/material/Box/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function BackLink({
+  href,
+  label,
+  breakpoint,
+  linkComponent,
+  testIdPrefix
+}) {
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      component: linkComponent,
+      href,
+      "aria-label": label,
+      "data-testid": `${testIdPrefix}-back`,
+      sx: (theme) => ({
+        ...displayAcrossRail(theme, breakpoint, "inline-flex", "none"),
+        alignItems: "center",
+        gap: 0.5,
+        minHeight: TOUCH_TARGET,
+        pr: 1,
+        textDecoration: "none",
+        color: "text.secondary",
+        font: "inherit",
+        fontSize: "0.875rem"
+      }),
+      children: [
+        /* @__PURE__ */ jsx(ChevronLeftIcon, { fontSize: "small" }),
+        label
+      ]
+    }
+  );
+}
+function PanelBack({
+  href,
+  backLabel,
+  sectionTitle,
+  sectionDescription,
+  breakpoint,
+  linkComponent,
+  testIdPrefix
+}) {
+  if (sectionTitle === void 0) {
+    return /* @__PURE__ */ jsx(
+      BackLink,
+      {
+        href,
+        label: backLabel,
+        breakpoint,
+        linkComponent,
+        testIdPrefix
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    SettingsSectionHeader,
+    {
+      href,
+      backLabel,
+      title: sectionTitle,
+      description: sectionDescription,
+      breakpoint,
+      linkComponent,
+      testIdPrefix
+    }
+  );
+}
+function panelSx(breakpoint, hideOnNarrow, fillHeight) {
+  return (theme) => ({
+    display: hideOnNarrow ? "none" : "block",
+    flex: "1 1 auto",
+    minWidth: 0,
+    width: "100%",
+    [atLeastRail(theme, breakpoint)]: {
+      ...hideOnNarrow ? { display: "block" } : {},
+      ...fillHeight ? {
+        height: "100%",
+        minHeight: 0,
+        overflowY: "auto",
+        overscrollBehavior: "contain"
+      } : {}
+    }
+  });
+}
+function SettingsPanel({
+  inSection,
+  hideOnNarrow,
+  breakpoint,
+  indexHref,
+  backLabel,
+  sectionTitle,
+  sectionDescription,
+  ariaLabel,
+  sectionChips,
+  activeItemId,
+  linkComponent,
+  onSelectItem,
+  testIdPrefix,
+  fillHeight = false,
+  children
+}) {
+  const showBack = inSection && indexHref !== void 0 && linkComponent !== void 0;
+  const showChips = inSection && sectionChips !== void 0 && sectionChips.length > 0;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      "data-testid": `${testIdPrefix}-panel`,
+      sx: panelSx(breakpoint, hideOnNarrow, fillHeight),
+      children: [
+        showBack ? /* @__PURE__ */ jsx(
+          PanelBack,
+          {
+            href: indexHref,
+            backLabel,
+            sectionTitle,
+            sectionDescription,
+            breakpoint,
+            linkComponent,
+            testIdPrefix
+          }
+        ) : null,
+        showChips ? /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: (theme) => ({
+              ...displayAcrossRail(theme, breakpoint, "block", "none"),
+              mb: 1,
+              minWidth: 0
+            }),
+            children: /* @__PURE__ */ jsx(
+              SettingsSectionChips,
+              {
+                items: sectionChips,
+                activeItemId,
+                ariaLabel,
+                linkComponent,
+                onSelectItem,
+                testIdPrefix
+              }
+            )
+          }
+        ) : null,
+        children
+      ]
+    }
+  );
+}
+
+export {
+  SettingsPanel
+};
+//# sourceMappingURL=chunk-IE7ISTLQ.js.map

package/dist/chunk-IFNK5TPI.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-26Z7QWID.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-IFNK5TPI.js.map

package/dist/chunk-IH4RSRQA.js

@@ -0,0 +1,68 @@
+import {
+  LoadingState
+} from "./chunk-QFHH2NU5.js";
+import {
+  ErrorState
+} from "./chunk-4HYXEMBP.js";
+import {
+  EmptyState
+} from "./chunk-NUE774AN.js";
+
+// src/components/data-display/AsyncStateContainer/AsyncStateContainer.tsx
+import Box from "@mui/material/Box/index.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var StateBox = ({ state, className, dataTestId, children }) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    className,
+    "data-testid": dataTestId || "async-state-container",
+    "data-state": state,
+    children
+  }
+);
+var errorMessageOf = (error) => {
+  if (!error) return "";
+  if (typeof error === "string") return error;
+  if (error instanceof Error) return error.message;
+  return "An unexpected error occurred";
+};
+var pickNode = (node, render, fallback) => node || render?.() || fallback;
+var AsyncStateContainer = React.memo(
+  ({
+    isLoading = false,
+    error,
+    isEmpty = false,
+    children,
+    loadingComponent,
+    renderLoading,
+    errorComponent,
+    renderError,
+    emptyComponent,
+    emptyTitle,
+    renderEmpty,
+    className,
+    dataTestId
+  }) => {
+    const box = { className, dataTestId };
+    if (isLoading) {
+      return /* @__PURE__ */ jsx(StateBox, { state: "loading", ...box, children: pickNode(loadingComponent, renderLoading, /* @__PURE__ */ jsx(LoadingState, {})) });
+    }
+    if (error) {
+      const message = errorMessageOf(error);
+      return /* @__PURE__ */ jsx(StateBox, { state: "error", ...box, children: errorComponent || renderError?.(message) || /* @__PURE__ */ jsx(ErrorState, { message }) });
+    }
+    if (isEmpty) {
+      return /* @__PURE__ */ jsx(StateBox, { state: "empty", ...box, children: pickNode(emptyComponent, renderEmpty, /* @__PURE__ */ jsx(EmptyState, { title: emptyTitle })) });
+    }
+    return /* @__PURE__ */ jsx(StateBox, { state: "success", ...box, children });
+  }
+);
+AsyncStateContainer.displayName = "AsyncStateContainer";
+var AsyncStateContainer_default = AsyncStateContainer;
+
+export {
+  AsyncStateContainer,
+  AsyncStateContainer_default
+};
+//# sourceMappingURL=chunk-IH4RSRQA.js.map