@12-apps/ui 6.11.0 → 6.11.1

package/dist/data-display/Banner.js

@@ -1,348 +1,8 @@
+import {
+  Banner
+} from "../chunk-56J55PEI.js";
+import "../chunk-M2M4OT5S.js";
 import "../chunk-PZ5AY32C.js";
-
-// src/components/data-display/Banner/Banner.tsx
-import CheckCircle from "@mui/icons-material/CheckCircle";
-import Close from "@mui/icons-material/Close";
-import Error from "@mui/icons-material/Error";
-import Info from "@mui/icons-material/Info";
-import Warning from "@mui/icons-material/Warning";
-import { alpha as alpha2, Box, Button, IconButton, Typography } from "@mui/material";
-import { styled } from "@mui/material";
-import React from "react";
-
-// src/components/data-display/Banner/Banner.styles.ts
-import { alpha, keyframes } from "@mui/material";
-var fadeInSlide = keyframes`
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-`;
-var pulseAnimation = keyframes`
-  0% {
-    box-shadow: 0 0 0 0 currentColor;
-    opacity: 0.7;
-  }
-  70% {
-    box-shadow: 0 0 0 8px currentColor;
-    opacity: 0;
-  }
-  100% {
-    box-shadow: 0 0 0 0 currentColor;
-    opacity: 0;
-  }
-`;
-var getVariantColor = (theme, variant) => {
-  const colorMap = {
-    info: theme.palette.info,
-    success: theme.palette.success,
-    warning: theme.palette.warning,
-    critical: theme.palette.error
-  };
-  return colorMap[variant];
-};
-var bannerPartStyles = (theme, colorPalette) => ({
-  // Icon container
-  ".banner-icon": {
-    flexShrink: 0,
-    marginTop: theme.spacing(0.25),
-    color: colorPalette.main,
-    fontSize: "1.25rem",
-    display: "flex",
-    alignItems: "center",
-    position: "relative",
-    "&::before": {
-      content: '""',
-      position: "absolute",
-      inset: -4,
-      borderRadius: "50%",
-      background: alpha(colorPalette.main, 0.1),
-      animation: `${pulseAnimation} 3s infinite`
-    }
-  },
-  // Content area
-  ".banner-content": {
-    flex: 1,
-    minWidth: 0
-    // Prevents flex item overflow
-  },
-  // Title styles
-  ".banner-title": {
-    fontWeight: 600,
-    fontSize: "1rem",
-    lineHeight: 1.4,
-    marginBottom: theme.spacing(0.5),
-    color: colorPalette.dark || colorPalette.main
-  },
-  // Description styles  
-  ".banner-description": {
-    fontSize: "0.875rem",
-    lineHeight: 1.5,
-    opacity: 0.9,
-    color: "inherit"
-  },
-  // Actions area
-  ".banner-actions": {
-    display: "flex",
-    flexShrink: 0,
-    gap: theme.spacing(1),
-    alignItems: "center",
-    marginTop: theme.spacing(1),
-    [theme.breakpoints.up("sm")]: {
-      marginTop: 0,
-      marginLeft: theme.spacing(2)
-    }
-  },
-  // Dismiss button
-  ".banner-dismiss": {
-    color: "inherit",
-    opacity: 0.7,
-    marginLeft: theme.spacing(1),
-    flexShrink: 0,
-    "&:hover": {
-      opacity: 1,
-      backgroundColor: alpha(colorPalette.main, 0.1),
-      transform: "rotate(90deg)"
-    },
-    "&:focus": {
-      opacity: 1,
-      outline: `2px solid ${colorPalette.main}`,
-      outlineOffset: "2px"
-    }
-  }
-});
-
-// src/components/data-display/Banner/Banner.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var StyledBanner = styled(Box, {
-  shouldForwardProp: (prop) => !["variant", "sticky", "fullWidth"].includes(prop)
-})(({ theme, variant, sticky, fullWidth }) => {
-  const colorPalette = getVariantColor(theme, variant);
-  return {
-    display: "flex",
-    alignItems: "flex-start",
-    gap: theme.spacing(1.5),
-    padding: theme.spacing(1.5, 2),
-    borderRadius: theme.spacing(1),
-    backgroundColor: alpha2(colorPalette.main, 0.1),
-    border: `1px solid ${alpha2(colorPalette.main, 0.2)}`,
-    color: colorPalette.main,
-    position: sticky ? "sticky" : "relative",
-    top: sticky ? 0 : "auto",
-    zIndex: sticky ? theme.zIndex.appBar : "auto",
-    width: fullWidth ? "100vw" : "100%",
-    marginLeft: fullWidth ? "50%" : 0,
-    transform: fullWidth ? "translateX(-50%)" : "none",
-    animation: `${fadeInSlide} 0.3s ease-out`,
-    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-    // Enhanced accessibility and focus styles
-    "&:focus-within": {
-      outline: `3px solid ${alpha2(colorPalette.main, 0.5)}`,
-      outlineOffset: "2px"
-    },
-    ...bannerPartStyles(theme, colorPalette),
-    // Responsive layout
-    [theme.breakpoints.down("sm")]: {
-      flexDirection: "column",
-      alignItems: "stretch",
-      gap: theme.spacing(1),
-      ".banner-content": {
-        order: 1
-      },
-      ".banner-actions": {
-        order: 2,
-        justifyContent: "flex-start",
-        marginTop: theme.spacing(1),
-        marginLeft: 0
-      }
-    },
-    // Glass effect variant (optional enhancement)
-    "&.banner-glass": {
-      backgroundColor: alpha2(theme.palette.background.paper, 0.1),
-      backdropFilter: "blur(20px)",
-      border: `1px solid ${alpha2(theme.palette.divider, 0.2)}`,
-      color: theme.palette.text.primary,
-      ".banner-icon": {
-        color: colorPalette.main
-      }
-    }
-  };
-});
-var getVariantIcon = (variant) => {
-  const iconMap = {
-    info: /* @__PURE__ */ jsx(Info, {}),
-    success: /* @__PURE__ */ jsx(CheckCircle, {}),
-    warning: /* @__PURE__ */ jsx(Warning, {}),
-    critical: /* @__PURE__ */ jsx(Error, {})
-  };
-  return iconMap[variant];
-};
-var resolveAriaAnnouncement = (variant) => ({
-  role: variant === "warning" || variant === "critical" ? "alert" : "status",
-  live: variant === "critical" ? "assertive" : "polite"
-});
-var testIdFor = (base, suffix) => base ? `${base}-${suffix}` : `banner-${suffix}`;
-var buildActionSx = (theme, variant, actionVariant) => {
-  const palette = getVariantColor(theme, variant);
-  return {
-    minWidth: "auto",
-    px: 1.5,
-    py: 0.5,
-    fontSize: "0.8125rem",
-    fontWeight: 500,
-    borderRadius: 1,
-    ...actionVariant === "primary" && {
-      backgroundColor: palette.main,
-      color: theme.palette.getContrastText(palette.main),
-      "&:hover": {
-        backgroundColor: palette.dark || palette.main,
-        transform: "translateY(-1px)"
-      }
-    },
-    ...actionVariant === "secondary" && {
-      borderColor: palette.main,
-      color: palette.main,
-      "&:hover": {
-        backgroundColor: alpha2(palette.main, 0.1),
-        borderColor: palette.main,
-        transform: "translateY(-1px)"
-      }
-    }
-  };
-};
-var BannerActionButton = ({ action, variant, dataTestId }) => /* @__PURE__ */ jsx(
-  Button,
-  {
-    size: "small",
-    variant: action.variant === "primary" ? "contained" : "outlined",
-    onClick: action.onClick,
-    "data-testid": testIdFor(dataTestId, "action"),
-    sx: (theme) => buildActionSx(theme, variant, action.variant),
-    children: action.label
-  }
-);
-var BannerBody = ({ displayIcon, title, description, dataTestId, children }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-  displayIcon && /* @__PURE__ */ jsx(Box, { className: "banner-icon", "aria-hidden": "true", "data-testid": testIdFor(dataTestId, "icon"), children: displayIcon }),
-  /* @__PURE__ */ jsxs(Box, { className: "banner-content", children: [
-    title && /* @__PURE__ */ jsx(
-      Typography,
-      {
-        className: "banner-title",
-        variant: "subtitle2",
-        component: "div",
-        "data-testid": testIdFor(dataTestId, "title"),
-        children: title
-      }
-    ),
-    description && /* @__PURE__ */ jsx(
-      Typography,
-      {
-        className: "banner-description",
-        variant: "body2",
-        component: "div",
-        "data-testid": testIdFor(dataTestId, "message"),
-        children: description
-      }
-    ),
-    children
-  ] })
-] });
-var BannerTrailing = ({ actions, variant, dismissible, onDismissClick, dismissLabel, dataTestId }) => /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [
-  actions && actions.length > 0 && /* @__PURE__ */ jsx(Box, { className: "banner-actions", children: actions.map((action, index) => /* @__PURE__ */ jsx(
-    BannerActionButton,
-    {
-      action,
-      variant,
-      dataTestId
-    },
-    index
-  )) }),
-  dismissible && /* @__PURE__ */ jsx(
-    IconButton,
-    {
-      className: "banner-dismiss",
-      size: "small",
-      onClick: onDismissClick,
-      "aria-label": dismissLabel,
-      "data-testid": testIdFor(dataTestId, "close"),
-      sx: { transition: "all 0.2s ease" },
-      children: /* @__PURE__ */ jsx(Close, { fontSize: "small" })
-    }
-  )
-] });
-var Banner = React.forwardRef(
-  ({
-    variant = "info",
-    title,
-    description,
-    icon,
-    dismissible = false,
-    dismissLabel,
-    onDismiss,
-    actions,
-    sticky = false,
-    fullWidth = false,
-    className,
-    children,
-    "data-testid": dataTestId = "banner",
-    ...props
-  }, ref) => {
-    const [visible, setVisible] = React.useState(true);
-    const handleDismiss = React.useCallback(() => {
-      setVisible(false);
-      onDismiss?.();
-    }, [onDismiss]);
-    const displayIcon = icon || getVariantIcon(variant);
-    const { role: ariaRole, live: ariaLive } = resolveAriaAnnouncement(variant);
-    if (!visible) {
-      return null;
-    }
-    return /* @__PURE__ */ jsxs(
-      StyledBanner,
-      {
-        ref,
-        variant,
-        sticky,
-        fullWidth,
-        className,
-        role: ariaRole,
-        "aria-live": ariaLive,
-        "aria-atomic": "true",
-        tabIndex: 0,
-        "data-testid": dataTestId,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(
-            BannerBody,
-            {
-              displayIcon,
-              title,
-              description,
-              dataTestId,
-              children
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            BannerTrailing,
-            {
-              actions,
-              variant,
-              dismissible,
-              onDismissClick: handleDismiss,
-              dismissLabel,
-              dataTestId
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-Banner.displayName = "Banner";
 export {
   Banner
 };

package/dist/data-display/Banner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/data-display/Banner/Banner.tsx","../../src/components/data-display/Banner/Banner.styles.ts"],"sourcesContent":["import CheckCircle from '@mui/icons-material/CheckCircle';\nimport Close from '@mui/icons-material/Close';\nimport Error from '@mui/icons-material/Error';\nimport Info from '@mui/icons-material/Info';\nimport Warning from '@mui/icons-material/Warning';\nimport { alpha, Box, Button, IconButton, Typography } from '@mui/material';\nimport type { Theme } from '@mui/material';\nimport { styled } from '@mui/material';\nimport React from 'react';\n\nimport { bannerPartStyles, fadeInSlide, getVariantColor } from './Banner.styles';\nimport type { BannerProps, BannerVariant } from './Banner.types';\n\nconst StyledBanner = styled(Box, {\n  shouldForwardProp: (prop) => !['variant', 'sticky', 'fullWidth'].includes(prop as string),\n})<{\n  variant: BannerVariant;\n  sticky: boolean;\n  fullWidth: boolean;\n}>(({ theme, variant, sticky, fullWidth }) => {\n\n  const colorPalette = getVariantColor(theme, variant);\n\n  return {\n    display: 'flex',\n    alignItems: 'flex-start',\n    gap: theme.spacing(1.5),\n    padding: theme.spacing(1.5, 2),\n    borderRadius: theme.spacing(1),\n    backgroundColor: alpha(colorPalette.main, 0.1),\n    border: `1px solid ${alpha(colorPalette.main, 0.2)}`,\n    color: colorPalette.main,\n    position: sticky ? 'sticky' : 'relative',\n    top: sticky ? 0 : 'auto',\n    zIndex: sticky ? theme.zIndex.appBar : 'auto',\n    width: fullWidth ? '100vw' : '100%',\n    marginLeft: fullWidth ? '50%' : 0,\n    transform: fullWidth ? 'translateX(-50%)' : 'none',\n    animation: `${fadeInSlide} 0.3s ease-out`,\n    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n\n    // Enhanced accessibility and focus styles\n    '&:focus-within': {\n      outline: `3px solid ${alpha(colorPalette.main, 0.5)}`,\n      outlineOffset: '2px',\n    },\n\n    ...bannerPartStyles(theme, colorPalette),\n\n    // Responsive layout\n    [theme.breakpoints.down('sm')]: {\n      flexDirection: 'column',\n      alignItems: 'stretch',\n      gap: theme.spacing(1),\n      \n      '.banner-content': {\n        order: 1,\n      },\n\n      '.banner-actions': {\n        order: 2,\n        justifyContent: 'flex-start',\n        marginTop: theme.spacing(1),\n        marginLeft: 0,\n      },\n    },\n\n    // Glass effect variant (optional enhancement)\n    '&.banner-glass': {\n      backgroundColor: alpha(theme.palette.background.paper, 0.1),\n      backdropFilter: 'blur(20px)',\n      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n      color: theme.palette.text.primary,\n      \n      '.banner-icon': {\n        color: colorPalette.main,\n      },\n    },\n  };\n});\n\nconst getVariantIcon = (variant: BannerVariant) => {\n  const iconMap: Record<BannerVariant, React.ReactNode> = {\n    info: <Info />,\n    success: <CheckCircle />,\n    warning: <Warning />,\n    critical: <Error />,\n  };\n  return iconMap[variant];\n};\n\ntype BannerAction = NonNullable<BannerProps['actions']>[number];\n\n// Warnings and criticals interrupt the screen reader; the rest are announced\n// politely when it next pauses.\nconst resolveAriaAnnouncement = (variant: BannerVariant) => ({\n  role: variant === 'warning' || variant === 'critical' ? 'alert' : 'status',\n  live: (variant === 'critical' ? 'assertive' : 'polite') as 'assertive' | 'polite',\n});\n\nconst testIdFor = (base: string | undefined, suffix: string) =>\n  base ? `${base}-${suffix}` : `banner-${suffix}`;\n\n// Resolves the banner's palette once, rather than per property as the inline\n// version did — getVariantColor was being called nine times to build one button.\nconst buildActionSx = (\n  theme: Theme,\n  variant: BannerVariant,\n  actionVariant: BannerAction['variant'],\n) => {\n  const palette = getVariantColor(theme, variant);\n\n  return {\n    minWidth: 'auto',\n    px: 1.5,\n    py: 0.5,\n    fontSize: '0.8125rem',\n    fontWeight: 500,\n    borderRadius: 1,\n\n    ...(actionVariant === 'primary' && {\n      backgroundColor: palette.main,\n      color: theme.palette.getContrastText(palette.main),\n\n      '&:hover': {\n        backgroundColor: palette.dark || palette.main,\n        transform: 'translateY(-1px)',\n      },\n    }),\n\n    ...(actionVariant === 'secondary' && {\n      borderColor: palette.main,\n      color: palette.main,\n\n      '&:hover': {\n        backgroundColor: alpha(palette.main, 0.1),\n        borderColor: palette.main,\n        transform: 'translateY(-1px)',\n      },\n    }),\n  };\n};\n\nconst BannerActionButton: React.FC<{\n  action: BannerAction;\n  variant: BannerVariant;\n  dataTestId?: string;\n}> = ({ action, variant, dataTestId }) => (\n  <Button\n    size=\"small\"\n    variant={action.variant === 'primary' ? 'contained' : 'outlined'}\n    onClick={action.onClick}\n    data-testid={testIdFor(dataTestId, 'action')}\n    sx={(theme) => buildActionSx(theme, variant, action.variant)}\n  >\n    {action.label}\n  </Button>\n);\n\nconst BannerBody: React.FC<{\n  displayIcon: React.ReactNode;\n  title?: BannerProps['title'];\n  description?: BannerProps['description'];\n  dataTestId?: string;\n  children?: React.ReactNode;\n}> = ({ displayIcon, title, description, dataTestId, children }) => (\n  <>\n    {displayIcon && (\n      <Box className=\"banner-icon\" aria-hidden=\"true\" data-testid={testIdFor(dataTestId, 'icon')}>\n        {displayIcon}\n      </Box>\n    )}\n\n    <Box className=\"banner-content\">\n      {title && (\n        <Typography\n          className=\"banner-title\"\n          variant=\"subtitle2\"\n          component=\"div\"\n          data-testid={testIdFor(dataTestId, 'title')}\n        >\n          {title}\n        </Typography>\n      )}\n      {description && (\n        <Typography\n          className=\"banner-description\"\n          variant=\"body2\"\n          component=\"div\"\n          data-testid={testIdFor(dataTestId, 'message')}\n        >\n          {description}\n        </Typography>\n      )}\n      {children}\n    </Box>\n  </>\n);\n\nconst BannerTrailing: React.FC<{\n  actions?: BannerProps['actions'];\n  variant: BannerVariant;\n  dismissible: boolean;\n  onDismissClick: () => void;\n  dismissLabel: string;\n  dataTestId?: string;\n}> = ({ actions, variant, dismissible, onDismissClick, dismissLabel, dataTestId }) => (\n  <Box display=\"flex\" alignItems=\"center\" gap={1}>\n    {actions && actions.length > 0 && (\n      <Box className=\"banner-actions\">\n        {actions.map((action, index) => (\n          <BannerActionButton\n            key={index}\n            action={action}\n            variant={variant}\n            dataTestId={dataTestId}\n          />\n        ))}\n      </Box>\n    )}\n\n    {dismissible && (\n      <IconButton\n        className=\"banner-dismiss\"\n        size=\"small\"\n        onClick={onDismissClick}\n        aria-label={dismissLabel}\n        data-testid={testIdFor(dataTestId, 'close')}\n        sx={{ transition: 'all 0.2s ease' }}\n      >\n        <Close fontSize=\"small\" />\n      </IconButton>\n    )}\n  </Box>\n);\n\nexport const Banner = React.forwardRef<HTMLDivElement, BannerProps>(\n  (\n    {\n      variant = 'info',\n      title,\n      description,\n      icon,\n      dismissible = false,\n      dismissLabel,\n      onDismiss,\n      actions,\n      sticky = false,\n      fullWidth = false,\n      className,\n      children,\n      'data-testid': dataTestId = 'banner',\n      ...props\n    },\n    ref,\n  ) => {\n    const [visible, setVisible] = React.useState(true);\n\n    const handleDismiss = React.useCallback(() => {\n      setVisible(false);\n      onDismiss?.();\n    }, [onDismiss]);\n\n    const displayIcon = icon || getVariantIcon(variant);\n\n    const { role: ariaRole, live: ariaLive } = resolveAriaAnnouncement(variant);\n\n    if (!visible) {\n      return null;\n    }\n\n    return (\n      <StyledBanner\n        ref={ref}\n        variant={variant}\n        sticky={sticky}\n        fullWidth={fullWidth}\n        className={className}\n        role={ariaRole}\n        aria-live={ariaLive}\n        aria-atomic=\"true\"\n        tabIndex={0}\n        data-testid={dataTestId}\n        {...props}\n      >\n        <BannerBody\n          displayIcon={displayIcon}\n          title={title}\n          description={description}\n          dataTestId={dataTestId}\n        >\n          {children}\n        </BannerBody>\n\n        <BannerTrailing\n          actions={actions}\n          variant={variant}\n          dismissible={dismissible}\n          onDismissClick={handleDismiss}\n          dismissLabel={dismissLabel}\n          dataTestId={dataTestId}\n        />\n      </StyledBanner>\n    );\n  },\n);\n\nBanner.displayName = 'Banner';","import { alpha, keyframes } from '@mui/material';\nimport type { CSSObject, PaletteColor, Theme } from '@mui/material';\n\nimport type { BannerVariant } from './Banner.types';\n\n// Animations\nexport const fadeInSlide = keyframes`\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nconst pulseAnimation = keyframes`\n  0% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 0.7;\n  }\n  70% {\n    box-shadow: 0 0 0 8px currentColor;\n    opacity: 0;\n  }\n  100% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 0;\n  }\n`;\n\nexport const getVariantColor = (theme: Theme, variant: BannerVariant) => {\n  const colorMap = {\n    info: theme.palette.info,\n    success: theme.palette.success,\n    warning: theme.palette.warning,\n    critical: theme.palette.error,\n  };\n  return colorMap[variant];\n};\n\nexport const bannerPartStyles = (theme: Theme, colorPalette: PaletteColor): CSSObject => ({\n  // Icon container\n  '.banner-icon': {\n    flexShrink: 0,\n    marginTop: theme.spacing(0.25),\n    color: colorPalette.main,\n    fontSize: '1.25rem',\n    display: 'flex',\n    alignItems: 'center',\n    position: 'relative',\n\n    '&::before': {\n      content: '\"\"',\n      position: 'absolute',\n      inset: -4,\n      borderRadius: '50%',\n      background: alpha(colorPalette.main, 0.1),\n      animation: `${pulseAnimation} 3s infinite`,\n    },\n  },\n\n  // Content area\n  '.banner-content': {\n    flex: 1,\n    minWidth: 0, // Prevents flex item overflow\n  },\n\n  // Title styles\n  '.banner-title': {\n    fontWeight: 600,\n    fontSize: '1rem',\n    lineHeight: 1.4,\n    marginBottom: theme.spacing(0.5),\n    color: colorPalette.dark || colorPalette.main,\n  },\n\n  // Description styles  \n  '.banner-description': {\n    fontSize: '0.875rem',\n    lineHeight: 1.5,\n    opacity: 0.9,\n    color: 'inherit',\n  },\n\n  // Actions area\n  '.banner-actions': {\n    display: 'flex',\n    flexShrink: 0,\n    gap: theme.spacing(1),\n    alignItems: 'center',\n    marginTop: theme.spacing(1),\n\n    [theme.breakpoints.up('sm')]: {\n      marginTop: 0,\n      marginLeft: theme.spacing(2),\n    },\n  },\n\n  // Dismiss button\n  '.banner-dismiss': {\n    color: 'inherit',\n    opacity: 0.7,\n    marginLeft: theme.spacing(1),\n    flexShrink: 0,\n\n    '&:hover': {\n      opacity: 1,\n      backgroundColor: alpha(colorPalette.main, 0.1),\n      transform: 'rotate(90deg)',\n    },\n\n    '&:focus': {\n      opacity: 1,\n      outline: `2px solid ${colorPalette.main}`,\n      outlineOffset: '2px',\n    },\n  },\n});\n"],"mappings":"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","names":["alpha","alpha"]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/data-display/CardKit.js

@@ -1,268 +1,45 @@
 import {
-  DropdownMenu
-} from "../chunk-DSO6BL77.js";
+  useRowConfirm
+} from "../chunk-SSF4XHCK.js";
 import {
-  ConfirmActionDialog,
-  useConfirmAction
-} from "../chunk-5TCPZ6GR.js";
+  useRemoveConfirm
+} from "../chunk-JC5DL4JO.js";
 import {
-  Alert
-} from "../chunk-RXE5CUUE.js";
-import "../chunk-ARNQIGA4.js";
+  rowActionsToMenuItems
+} from "../chunk-5MXVT7DO.js";
 import {
-  Box
-} from "../chunk-34DQAXL2.js";
-import "../chunk-BA4RHQ3B.js";
+  BodyHeading,
+  DetailColumns,
+  Fact,
+  Ledger,
+  TagList
+} from "../chunk-IHPLDHQD.js";
+import {
+  CardActionsProvider,
+  useCardActions
+} from "../chunk-MYHQU7WR.js";
 import {
-  Button
-} from "../chunk-ANNZ3PLI.js";
+  CardKebab
+} from "../chunk-OY4RUX4H.js";
+import "../chunk-WVML3ENZ.js";
+import "../chunk-NPK5TRIC.js";
+import "../chunk-XCBQXSTR.js";
+import "../chunk-T4DCMN5W.js";
+import "../chunk-FOC64RMR.js";
+import "../chunk-TZ4ONDDE.js";
+import "../chunk-62FKAPLI.js";
+import "../chunk-EMYESBIT.js";
+import "../chunk-NUGT7LMR.js";
+import "../chunk-GQ75VOPI.js";
+import "../chunk-Y5ULB2OY.js";
+import "../chunk-2IBFEHIX.js";
+import "../chunk-VBOYWWG5.js";
+import "../chunk-34DQAXL2.js";
+import "../chunk-BA4RHQ3B.js";
+import "../chunk-GD7HXHOT.js";
+import "../chunk-RB4ZAXNU.js";
+import "../chunk-AUYC5K5K.js";
 import "../chunk-PZ5AY32C.js";
-
-// src/components/data-display/CardKit/CardKebab.tsx
-import { jsx } from "react/jsx-runtime";
-function CardKebab({
-  items,
-  menuLabel,
-  dataTestId
-}) {
-  return /* @__PURE__ */ jsx(
-    DropdownMenu,
-    {
-      size: "sm",
-      items,
-      trigger: /* @__PURE__ */ jsx(Button, { variant: "text", size: "sm", "aria-label": menuLabel, dataTestId, children: "\u22EE" })
-    }
-  );
-}
-
-// src/components/data-display/CardKit/card-actions-context.tsx
-import { createContext, useCallback, useContext, useState } from "react";
-import { Snackbar } from "@mui/material";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var CardActionsContext = createContext(null);
-function CardActionsProvider({
-  tenantSlug,
-  onRefresh,
-  errorTitle,
-  errorDismissLabel,
-  autoHideMs = 6e3,
-  children
-}) {
-  const [error, setError] = useState(null);
-  const notifyError = useCallback((message) => setError(message), []);
-  return /* @__PURE__ */ jsxs(CardActionsContext.Provider, { value: { tenantSlug, onRefresh, notifyError }, children: [
-    children,
-    /* @__PURE__ */ jsx2(
-      Snackbar,
-      {
-        open: error !== null,
-        autoHideDuration: autoHideMs,
-        onClose: () => setError(null),
-        anchorOrigin: { vertical: "bottom", horizontal: "center" },
-        children: /* @__PURE__ */ jsx2("span", { children: /* @__PURE__ */ jsx2(
-          Alert,
-          {
-            variant: "danger",
-            title: errorTitle,
-            description: error ?? "",
-            closable: true,
-            closeLabel: errorDismissLabel,
-            onClose: () => setError(null),
-            "data-testid": "card-action-error"
-          }
-        ) })
-      }
-    )
-  ] });
-}
-function useCardActions() {
-  const value = useContext(CardActionsContext);
-  if (!value) {
-    throw new Error("useCardActions must be used within a CardActionsProvider");
-  }
-  return value;
-}
-
-// src/components/data-display/CardKit/row-actions-to-menu.ts
-function rowActionsToMenuItems(actions, row) {
-  return actions.filter((action) => action.isVisible?.(row) ?? true).map((action) => ({
-    id: action.id,
-    label: action.rowLabel?.(row) ?? action.label,
-    color: action.color,
-    onClick: () => void action.onSelect([row])
-  }));
-}
-
-// src/components/data-display/CardKit/list-card-parts.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-function DetailColumns({ left, right }) {
-  return /* @__PURE__ */ jsxs2(Box, { sx: { display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" }, gap: 3 }, children: [
-    /* @__PURE__ */ jsx3(Box, { sx: { minWidth: 0 }, children: left }),
-    /* @__PURE__ */ jsx3(Box, { sx: { minWidth: 0 }, children: right })
-  ] });
-}
-function Fact({ label, value }) {
-  return /* @__PURE__ */ jsxs2(Box, { sx: { display: "flex", justifyContent: "space-between", gap: 2, fontSize: 13, py: 0.25 }, children: [
-    /* @__PURE__ */ jsx3(Box, { component: "span", sx: { color: "text.secondary", flexShrink: 0 }, children: label }),
-    /* @__PURE__ */ jsx3(Box, { component: "span", sx: { minWidth: 0, textAlign: "right", overflowWrap: "anywhere" }, children: value })
-  ] });
-}
-function Ledger({
-  lines,
-  total
-}) {
-  return /* @__PURE__ */ jsxs2(Box, { sx: { display: "flex", flexDirection: "column", gap: 0.25 }, children: [
-    lines.map((line) => /* @__PURE__ */ jsxs2(
-      Box,
-      {
-        sx: {
-          display: "flex",
-          justifyContent: "space-between",
-          fontSize: 13,
-          color: line.tone === "info" ? "info.main" : "text.secondary"
-        },
-        children: [
-          /* @__PURE__ */ jsx3(Box, { component: "span", children: line.label }),
-          /* @__PURE__ */ jsx3(Box, { component: "span", sx: { fontVariantNumeric: "tabular-nums" }, children: line.value })
-        ]
-      },
-      line.label
-    )),
-    /* @__PURE__ */ jsxs2(
-      Box,
-      {
-        sx: {
-          display: "flex",
-          justifyContent: "space-between",
-          fontWeight: 700,
-          borderTop: 1,
-          borderColor: "divider",
-          pt: 0.5,
-          mt: 0.5
-        },
-        children: [
-          /* @__PURE__ */ jsx3(Box, { component: "span", children: total.label }),
-          /* @__PURE__ */ jsx3(Box, { component: "span", sx: { fontVariantNumeric: "tabular-nums" }, children: total.value })
-        ]
-      }
-    )
-  ] });
-}
-function BodyHeading({ children }) {
-  return /* @__PURE__ */ jsx3(
-    Box,
-    {
-      sx: {
-        fontSize: 11,
-        fontWeight: 700,
-        letterSpacing: 0.4,
-        textTransform: "uppercase",
-        color: "text.disabled",
-        mb: 0.5
-      },
-      children
-    }
-  );
-}
-function TagList({
-  items,
-  empty
-}) {
-  if (items.length === 0) {
-    return /* @__PURE__ */ jsx3(Box, { sx: { fontSize: 13, color: "text.disabled" }, children: empty });
-  }
-  return /* @__PURE__ */ jsx3(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5 }, children: items.map((item) => /* @__PURE__ */ jsx3(
-    Box,
-    {
-      component: "span",
-      sx: {
-        fontSize: 12,
-        px: 0.75,
-        py: 0.25,
-        borderRadius: 1,
-        bgcolor: "action.hover",
-        color: "text.secondary",
-        fontFamily: "monospace"
-      },
-      children: item
-    },
-    item
-  )) });
-}
-
-// src/components/data-display/CardKit/use-row-confirm.tsx
-import { useState as useState2 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-function useRowConfirm({
-  write,
-  describe,
-  dataTestId,
-  errorText,
-  copy
-}) {
-  const [target, setTarget] = useState2(null);
-  const state = useConfirmAction(async () => {
-    if (!target) return;
-    await write(target);
-    setTarget(null);
-  }, errorText);
-  const request = (rows) => {
-    if (rows.length === 0) return;
-    setTarget(rows);
-    state.request();
-  };
-  return {
-    request,
-    dialog: target ? /* @__PURE__ */ jsx4(
-      ConfirmActionDialog,
-      {
-        state,
-        copy,
-        ...describe(target),
-        dataTestId
-      }
-    ) : null
-  };
-}
-
-// src/components/data-display/CardKit/use-remove-confirm.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-function useRemoveConfirm({
-  write,
-  title,
-  entityName,
-  description,
-  confirmText,
-  fallbackError,
-  dataTestId,
-  copy
-}) {
-  const { onRefresh, notifyError } = useCardActions();
-  const state = useConfirmAction(async () => {
-    const result = await write();
-    if (!result.ok) {
-      const message = result.error ?? fallbackError;
-      notifyError(message);
-      throw new Error(message);
-    }
-    onRefresh();
-  }, fallbackError);
-  return {
-    request: state.request,
-    dialog: /* @__PURE__ */ jsx5(
-      ConfirmActionDialog,
-      {
-        state,
-        copy,
-        title,
-        entityName,
-        description,
-        confirmText,
-        dataTestId
-      }
-    )
-  };
-}
 export {
   BodyHeading,
   CardActionsProvider,