@12-apps/ui 6.17.1 → 6.19.0

package/dist/{chunk-7M5BACFQ.js → chunk-UXQW6ZIN.js}

@@ -1,3 +1,27 @@
+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-RKCS6K36.js";
+import {
+  actionsOf,
+  makeTestId
+} from "./chunk-MWFSIB6K.js";
+import {
+  resolveTestId
+} from "./chunk-QLWBQQW7.js";
+
 // src/components/data-display/EmptyState/EmptyState.tsx
 import AddIcon from "@mui/icons-material/Add";
 import RefreshIcon from "@mui/icons-material/Refresh";
@@ -9,55 +33,19 @@ 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 makeTestId = (dataTestId) => (suffix) => dataTestId ? `${dataTestId}-${suffix}` : `empty-state-${suffix}`;
-var actionsOf = (props, refreshLabel, createLabel) => {
-  const { primaryAction, secondaryAction, onCreate, onRefresh } = props;
-  const specs = [];
-  if (primaryAction) {
-    specs.push({
-      key: "primary-action",
-      variant: "contained",
-      onClick: primaryAction.onClick,
-      label: primaryAction.label
-    });
-  }
-  if (onCreate) {
-    specs.push({
-      key: "create-button",
-      variant: "contained",
-      onClick: onCreate,
-      label: createLabel,
-      icon: /* @__PURE__ */ jsx(AddIcon, {})
-    });
-  }
-  if (secondaryAction) {
-    specs.push({
-      key: "secondary-action",
-      variant: "outlined",
-      onClick: secondaryAction.onClick,
-      label: secondaryAction.label
-    });
-  }
-  if (onRefresh) {
-    specs.push({
-      key: "refresh-button",
-      variant: "outlined",
-      onClick: onRefresh,
-      label: refreshLabel,
-      icon: /* @__PURE__ */ jsx(RefreshIcon, {})
-    });
-  }
-  return specs;
+var ACTION_ICONS = {
+  Add: /* @__PURE__ */ jsx(AddIcon, {}),
+  Refresh: /* @__PURE__ */ jsx(RefreshIcon, {})
 };
 var Illustration = ({ illustration, variant, testId }) => /* @__PURE__ */ jsx(
   Box,
   {
     "data-testid": testId,
     sx: {
-      maxWidth: variant === "illustrated" ? 240 : 120,
+      maxWidth: illustrationMaxWidth(variant),
       width: "100%",
       height: "auto",
-      opacity: variant === "minimal" ? 0.6 : 0.8,
+      opacity: illustrationOpacity(variant),
       display: variant === "minimal" ? "none" : "block"
     },
     children: illustration
@@ -69,17 +57,17 @@ var Actions = ({ specs, testId }) => {
     Stack,
     {
       direction: { xs: "column", sm: "row" },
-      spacing: 2,
+      spacing: ACTIONS_GAP_UNITS,
       alignItems: "center",
-      sx: { mt: theme.spacing(2) },
+      sx: { mt: theme.spacing(ACTIONS_MARGIN_TOP_UNITS) },
       children: specs.map((spec) => /* @__PURE__ */ jsx(
         Button,
         {
           variant: spec.variant,
           onClick: spec.onClick,
-          startIcon: spec.icon,
+          startIcon: spec.icon && ACTION_ICONS[spec.icon],
           "data-testid": testId(spec.key),
-          sx: { minWidth: 120 },
+          sx: { minWidth: ACTION_MIN_WIDTH },
           children: spec.label
         },
         spec.key
@@ -97,7 +85,7 @@ var HelpLink = ({ helpLink, testId }) => {
       rel: helpLink.external ? "noopener noreferrer" : void 0,
       "data-testid": testId,
       sx: {
-        mt: theme.spacing(1),
+        mt: theme.spacing(HELP_LINK_MARGIN_TOP_UNITS),
         color: theme.palette.primary.main,
         textDecoration: "none",
         "&:hover": {
@@ -106,14 +94,14 @@ var HelpLink = ({ helpLink, testId }) => {
       },
       children: [
         helpLink.label,
-        helpLink.external && " \u2197"
+        helpLink.external && EXTERNAL_LINK_MARK
       ]
     }
   );
 };
 var Content = ({ title, description, titleId, testId, actions, showActions, helpLink }) => {
   const theme = useTheme();
-  return /* @__PURE__ */ jsxs(Stack, { spacing: 2, alignItems: "center", children: [
+  return /* @__PURE__ */ jsxs(Stack, { spacing: CONTENT_GAP_UNITS, alignItems: "center", children: [
     /* @__PURE__ */ jsx(
       Typography,
       {
@@ -124,7 +112,7 @@ var Content = ({ title, description, titleId, testId, actions, showActions, help
         sx: {
           fontWeight: theme.typography.fontWeightMedium,
           color: theme.palette.text.primary,
-          maxWidth: 400
+          maxWidth: TITLE_MAX_WIDTH
         },
         children: title
       }
@@ -136,8 +124,8 @@ var Content = ({ title, description, titleId, testId, actions, showActions, help
         color: "text.secondary",
         "data-testid": testId("description"),
         sx: {
-          maxWidth: 480,
-          lineHeight: 1.6
+          maxWidth: DESCRIPTION_MAX_WIDTH,
+          lineHeight: DESCRIPTION_LINE_HEIGHT
         },
         children: description
       }
@@ -155,11 +143,11 @@ var EmptyState = React.memo((props) => {
     helpLink,
     refreshLabel = "Refresh",
     createLabel = "Create New",
-    className,
-    dataTestId
+    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;
@@ -176,9 +164,9 @@ var EmptyState = React.memo((props) => {
         alignItems: "center",
         justifyContent: "center",
         textAlign: "center",
-        padding: theme.spacing(6),
-        minHeight: 200,
-        gap: theme.spacing(3)
+        padding: theme.spacing(EMPTY_STATE_PADDING_UNITS),
+        minHeight: EMPTY_STATE_MIN_HEIGHT,
+        gap: theme.spacing(EMPTY_STATE_GAP_UNITS)
       },
       children: [
         illustration && /* @__PURE__ */ jsx(
@@ -212,4 +200,4 @@ export {
   EmptyState,
   EmptyState_default
 };
-//# sourceMappingURL=chunk-7M5BACFQ.js.map
+//# sourceMappingURL=chunk-UXQW6ZIN.js.map

package/dist/chunk-UXQW6ZIN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/EmptyState/EmptyState.tsx"],"sourcesContent":["import AddIcon from '@mui/icons-material/Add';\nimport RefreshIcon from '@mui/icons-material/Refresh';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport Link from '@mui/material/Link/index.js';\nimport Stack from '@mui/material/Stack/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { type ActionIconName, type ActionSpec, actionsOf, makeTestId } from './EmptyState.helpers';\nimport {\n  ACTION_MIN_WIDTH,\n  ACTIONS_GAP_UNITS,\n  ACTIONS_MARGIN_TOP_UNITS,\n  CONTENT_GAP_UNITS,\n  DESCRIPTION_LINE_HEIGHT,\n  DESCRIPTION_MAX_WIDTH,\n  EMPTY_STATE_GAP_UNITS,\n  EMPTY_STATE_MIN_HEIGHT,\n  EMPTY_STATE_PADDING_UNITS,\n  EXTERNAL_LINK_MARK,\n  HELP_LINK_MARGIN_TOP_UNITS,\n  illustrationMaxWidth,\n  illustrationOpacity,\n  TITLE_MAX_WIDTH,\n} from './EmptyState.metrics';\nimport type { EmptyStateProps, EmptyStateVariant } from './EmptyState.types';\nimport { resolveTestId } from '../../../platform/test-id';\n\n/** The shared action list names its glyph; the web draws it with MUI's icon. */\nconst ACTION_ICONS: Record<ActionIconName, React.ReactNode> = {\n  Add: <AddIcon />,\n  Refresh: <RefreshIcon />,\n};\n\nconst Illustration: React.FC<{\n  illustration: React.ReactNode;\n  variant: EmptyStateVariant;\n  testId: string;\n}> = ({ illustration, variant, testId }) => (\n  <Box\n    data-testid={testId}\n    sx={{\n      maxWidth: illustrationMaxWidth(variant),\n      width: '100%',\n      height: 'auto',\n      opacity: illustrationOpacity(variant),\n      display: variant === 'minimal' ? 'none' : 'block',\n    }}\n  >\n    {illustration}\n  </Box>\n);\n\nconst Actions: React.FC<{\n  specs: ActionSpec[];\n  testId: (suffix: string) => string;\n}> = ({ specs, testId }) => {\n  const theme = useTheme();\n\n  return (\n    <Stack\n      direction={{ xs: 'column', sm: 'row' }}\n      spacing={ACTIONS_GAP_UNITS}\n      alignItems=\"center\"\n      sx={{ mt: theme.spacing(ACTIONS_MARGIN_TOP_UNITS) }}\n    >\n      {specs.map((spec) => (\n        <Button\n          key={spec.key}\n          variant={spec.variant}\n          onClick={spec.onClick}\n          startIcon={spec.icon && ACTION_ICONS[spec.icon]}\n          data-testid={testId(spec.key)}\n          sx={{ minWidth: ACTION_MIN_WIDTH }}\n        >\n          {spec.label}\n        </Button>\n      ))}\n    </Stack>\n  );\n};\n\nconst HelpLink: React.FC<{\n  helpLink: NonNullable<EmptyStateProps['helpLink']>;\n  testId: string;\n}> = ({ helpLink, testId }) => {\n  const theme = useTheme();\n\n  return (\n    <Link\n      href={helpLink.href}\n      target={helpLink.external ? '_blank' : undefined}\n      rel={helpLink.external ? 'noopener noreferrer' : undefined}\n      data-testid={testId}\n      sx={{\n        mt: theme.spacing(HELP_LINK_MARGIN_TOP_UNITS),\n        color: theme.palette.primary.main,\n        textDecoration: 'none',\n        '&:hover': {\n          textDecoration: 'underline',\n        },\n      }}\n    >\n      {helpLink.label}\n      {helpLink.external && EXTERNAL_LINK_MARK}\n    </Link>\n  );\n};\n\nconst Content: React.FC<{\n  title: string;\n  description?: string;\n  titleId: string;\n  testId: (suffix: string) => string;\n  actions: ActionSpec[];\n  showActions: boolean;\n  helpLink?: EmptyStateProps['helpLink'];\n}> = ({ title, description, titleId, testId, actions, showActions, helpLink }) => {\n  const theme = useTheme();\n\n  return (\n    <Stack spacing={CONTENT_GAP_UNITS} alignItems=\"center\">\n      <Typography\n        id={titleId}\n        variant=\"h6\"\n        component=\"h3\"\n        data-testid={testId('title')}\n        sx={{\n          fontWeight: theme.typography.fontWeightMedium,\n          color: theme.palette.text.primary,\n          maxWidth: TITLE_MAX_WIDTH,\n        }}\n      >\n        {title}\n      </Typography>\n\n      {description && (\n        <Typography\n          variant=\"body2\"\n          color=\"text.secondary\"\n          data-testid={testId('description')}\n          sx={{\n            maxWidth: DESCRIPTION_MAX_WIDTH,\n            lineHeight: DESCRIPTION_LINE_HEIGHT,\n          }}\n        >\n          {description}\n        </Typography>\n      )}\n\n      {showActions && <Actions specs={actions} testId={testId} />}\n\n      {helpLink && <HelpLink helpLink={helpLink} testId={testId('help-link')} />}\n    </Stack>\n  );\n};\n\nexport const EmptyState: React.FC<EmptyStateProps> = React.memo((props) => {\n  const {\n    variant = 'default',\n    title,\n    description,\n    illustration,\n    helpLink,\n    refreshLabel = 'Refresh',\n    createLabel = 'Create New',\n    className,\n  } = props;\n  const theme = useTheme();\n  const titleId = React.useId();\n  // `dataTestId` is the documented spelling; `testID`, the shared contract's\n  // other one, resolves to the same id.\n  const dataTestId = resolveTestId(props);\n  const testId = makeTestId(dataTestId);\n\n  const actions = actionsOf(props, refreshLabel, createLabel);\n  // The `action` variant reserves the action row even when nothing fills it.\n  const showActions = variant === 'action' || actions.length > 0;\n\n  return (\n    <Box\n      role=\"region\"\n      aria-labelledby={titleId}\n      className={className}\n      data-testid={dataTestId || 'empty-state'}\n      sx={{\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'center',\n        textAlign: 'center',\n        padding: theme.spacing(EMPTY_STATE_PADDING_UNITS),\n        minHeight: EMPTY_STATE_MIN_HEIGHT,\n        gap: theme.spacing(EMPTY_STATE_GAP_UNITS),\n      }}\n    >\n      {/* Illustration */}\n      {illustration && (\n        <Illustration\n          illustration={illustration}\n          variant={variant}\n          testId={testId('icon')}\n        />\n      )}\n\n      {/* Content */}\n      <Content\n        title={title}\n        description={description}\n        titleId={titleId}\n        testId={testId}\n        actions={actions}\n        showActions={showActions}\n        helpLink={helpLink}\n      />\n    </Box>\n  );\n});\n\nEmptyState.displayName = 'EmptyState';\n\nexport default EmptyState;\n"],"mappings":"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","names":[]}

package/dist/chunk-V3PLFYKO.js

@@ -0,0 +1,34 @@
+import {
+  FONT_WEIGHTS,
+  TYPE_SIZES
+} from "./chunk-NQN5Z36J.js";
+
+// src/components/typography/Text/Text.metrics.ts
+var TEXT_SIZES = TYPE_SIZES;
+var TEXT_WEIGHTS = FONT_WEIGHTS;
+var HEADING_DEFAULT_WEIGHT = 600;
+var HEADING_LETTER_SPACING_EM = -0.01;
+var CAPTION_FONT_SIZE = 12;
+var CAPTION_OPACITY = 0.8;
+var CAPTION_LETTER_SPACING_EM = 0.02;
+var CODE_FONT_SIZE = 14;
+var CODE_BACKGROUND_ALPHA = 0.08;
+var CODE_BORDER_ALPHA = 0.12;
+var CODE_PADDING = { vertical: 2, horizontal: 6 };
+var CODE_RADIUS_FACTOR = 0.5;
+
+export {
+  TEXT_SIZES,
+  TEXT_WEIGHTS,
+  HEADING_DEFAULT_WEIGHT,
+  HEADING_LETTER_SPACING_EM,
+  CAPTION_FONT_SIZE,
+  CAPTION_OPACITY,
+  CAPTION_LETTER_SPACING_EM,
+  CODE_FONT_SIZE,
+  CODE_BACKGROUND_ALPHA,
+  CODE_BORDER_ALPHA,
+  CODE_PADDING,
+  CODE_RADIUS_FACTOR
+};
+//# sourceMappingURL=chunk-V3PLFYKO.js.map

package/dist/chunk-V3PLFYKO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/typography/Text/Text.metrics.ts"],"sourcesContent":["import { FONT_WEIGHTS, TYPE_SIZES } from '../../../tokens/theme';\n\n/**\n * THE NUMBERS BOTH `Text` RENDERERS DRAW WITH.\n *\n * `Text.tsx` used to hold these as rem strings and `Text.native.tsx` would have\n * held them again as numbers — two tables, one of which drifts. Now there is\n * one, in px, and the web derives its rem from it (see `px()` in the theme).\n * Ratios stay ratios; the native side multiplies them out because React\n * Native's `lineHeight` and `letterSpacing` are absolute.\n */\nexport const TEXT_SIZES = TYPE_SIZES;\nexport const TEXT_WEIGHTS = FONT_WEIGHTS;\n\n/** The `heading` variant: heavier by default, tighter tracking. */\nexport const HEADING_DEFAULT_WEIGHT = 600;\nexport const HEADING_LETTER_SPACING_EM = -0.01;\n\n/** The `caption` variant: a step down at the default size, faded and looser. */\nexport const CAPTION_FONT_SIZE = 12;\nexport const CAPTION_OPACITY = 0.8;\nexport const CAPTION_LETTER_SPACING_EM = 0.02;\n\n/** The `code` variant: a step down, on a faint primary wash inside a hairline. */\nexport const CODE_FONT_SIZE = 14;\nexport const CODE_BACKGROUND_ALPHA = 0.08;\nexport const CODE_BORDER_ALPHA = 0.12;\nexport const CODE_PADDING = { vertical: 2, horizontal: 6 } as const;\n/** Half the theme's `md` radius, as `Text.tsx` has always drawn it. */\nexport const CODE_RADIUS_FACTOR = 0.5;\n"],"mappings":";;;;;;AAWO,IAAM,aAAa;AACnB,IAAM,eAAe;AAGrB,IAAM,yBAAyB;AAC/B,IAAM,4BAA4B;AAGlC,IAAM,oBAAoB;AAC1B,IAAM,kBAAkB;AACxB,IAAM,4BAA4B;AAGlC,IAAM,iBAAiB;AACvB,IAAM,wBAAwB;AAC9B,IAAM,oBAAoB;AAC1B,IAAM,eAAe,EAAE,UAAU,GAAG,YAAY,EAAE;AAElD,IAAM,qBAAqB;","names":[]}

package/dist/{chunk-A2GGT4OC.js → chunk-V3SBJ3PB.js}

@@ -1,3 +1,22 @@
+import {
+  LEAD_FONT_SIZE,
+  LEAD_LETTER_SPACING_EM,
+  LEAD_LINE_HEIGHT,
+  MUTED_OPACITY,
+  PARAGRAPH_FONT_WEIGHT,
+  PARAGRAPH_MARGIN_BOTTOM_EM,
+  PARAGRAPH_SIZES,
+  SMALL_FONT_SIZE,
+  SMALL_LINE_HEIGHT
+} from "./chunk-QKLGH3RZ.js";
+import {
+  resolveTestId,
+  withoutTestIdProps
+} from "./chunk-QLWBQQW7.js";
+import {
+  px
+} from "./chunk-NQN5Z36J.js";
+
 // src/components/typography/Paragraph/Paragraph.tsx
 import Typography from "@mui/material/Typography/index.js";
 import { styled } from "@mui/material/styles/index.js";
@@ -17,20 +36,20 @@ var getColorFromTheme = (theme, color) => {
   };
   return colorMap[color] || theme.palette.text.primary;
 };
+var sizeMap = Object.fromEntries(
+  Object.entries(PARAGRAPH_SIZES).map(([size, step]) => [
+    size,
+    { fontSize: px(step.fontSize), lineHeight: step.lineHeight }
+  ])
+);
+var sizeOverride = (customSize, atDefault) => customSize === "md" ? px(atDefault) : sizeMap[customSize]?.fontSize;
 var StyledParagraph = styled(Typography, {
   shouldForwardProp: (prop) => !["customVariant", "customColor", "customSize"].includes(prop)
 })(({ theme, customVariant = "default", customColor = "neutral", customSize = "md" }) => {
   const textColor = getColorFromTheme(theme, customColor);
-  const sizeMap = {
-    xs: { fontSize: "0.75rem", lineHeight: 1.4 },
-    sm: { fontSize: "0.875rem", lineHeight: 1.5 },
-    md: { fontSize: "1rem", lineHeight: 1.6 },
-    lg: { fontSize: "1.125rem", lineHeight: 1.6 },
-    xl: { fontSize: "1.25rem", lineHeight: 1.7 }
-  };
   const baseStyles = {
     fontFamily: theme.typography.body1.fontFamily,
-    margin: "0 0 1em 0",
+    margin: `0 0 ${PARAGRAPH_MARGIN_BOTTOM_EM}em 0`,
     transition: "all 0.2s ease",
     ...sizeMap[customSize]
   };
@@ -38,48 +57,53 @@ var StyledParagraph = styled(Typography, {
     default: {
       ...baseStyles,
       color: textColor,
-      fontWeight: 400
+      fontWeight: PARAGRAPH_FONT_WEIGHT
     },
     lead: {
       ...baseStyles,
       color: textColor,
-      fontWeight: 400,
-      fontSize: customSize === "md" ? "1.125rem" : sizeMap[customSize]?.fontSize,
-      lineHeight: 1.7,
-      letterSpacing: "0.01em"
+      fontWeight: PARAGRAPH_FONT_WEIGHT,
+      fontSize: sizeOverride(customSize, LEAD_FONT_SIZE),
+      lineHeight: LEAD_LINE_HEIGHT,
+      letterSpacing: `${LEAD_LETTER_SPACING_EM}em`
     },
     muted: {
       ...baseStyles,
       color: theme.palette.text.secondary,
-      fontWeight: 400,
-      opacity: 0.8
+      fontWeight: PARAGRAPH_FONT_WEIGHT,
+      opacity: MUTED_OPACITY
     },
     small: {
       ...baseStyles,
       color: theme.palette.text.secondary,
-      fontSize: customSize === "md" ? "0.875rem" : sizeMap[customSize]?.fontSize,
-      fontWeight: 400,
-      lineHeight: 1.5
+      fontSize: sizeOverride(customSize, SMALL_FONT_SIZE),
+      fontWeight: PARAGRAPH_FONT_WEIGHT,
+      lineHeight: SMALL_LINE_HEIGHT
     }
   };
   return variantStyles[customVariant] || variantStyles.default;
 });
 var Paragraph = React.forwardRef(
-  ({ variant = "default", color = "neutral", size = "md", children, ...props }, ref) => /* @__PURE__ */ jsx(
-    StyledParagraph,
-    {
-      ref,
-      customVariant: variant,
-      customColor: color,
-      customSize: size,
-      ...props,
-      children
-    }
-  )
+  ({ variant = "default", color = "neutral", size = "md", children, ...others }, ref) => {
+    const testId = resolveTestId(others);
+    const props = withoutTestIdProps(others);
+    return /* @__PURE__ */ jsx(
+      StyledParagraph,
+      {
+        ref,
+        "data-testid": testId,
+        customVariant: variant,
+        customColor: color,
+        customSize: size,
+        ...props,
+        children
+      }
+    );
+  }
 );
 Paragraph.displayName = "Paragraph";
 
 export {
   Paragraph
 };
-//# sourceMappingURL=chunk-A2GGT4OC.js.map
+//# sourceMappingURL=chunk-V3SBJ3PB.js.map

package/dist/chunk-V3SBJ3PB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/typography/Paragraph/Paragraph.tsx"],"sourcesContent":["import type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { styled } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport {\n  LEAD_FONT_SIZE,\n  LEAD_LETTER_SPACING_EM,\n  LEAD_LINE_HEIGHT,\n  MUTED_OPACITY,\n  PARAGRAPH_FONT_WEIGHT,\n  PARAGRAPH_MARGIN_BOTTOM_EM,\n  PARAGRAPH_SIZES,\n  SMALL_FONT_SIZE,\n  SMALL_LINE_HEIGHT,\n} from './Paragraph.metrics';\nimport type { ParagraphProps } from './Paragraph.types';\nimport { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport { px } from '../../../tokens/theme';\n\nconst getColorFromTheme = (theme: Theme, color: string) => {\n  if (color === 'neutral') {\n    return theme.palette.text.primary;\n  }\n\n  const colorMap: Record<string, string> = {\n    primary: theme.palette.primary.main,\n    secondary: theme.palette.secondary.main,\n    success: theme.palette.success.main,\n    warning: theme.palette.warning.main,\n    info: theme.palette.info.main,\n    danger: theme.palette.error.main,\n  };\n\n  return colorMap[color] || theme.palette.text.primary;\n};\n\n// Derived from the shared metrics, not restated: the native `Paragraph` reads\n// the same table, so the two renderers cannot disagree on a size.\nconst sizeMap: Record<string, { fontSize: string; lineHeight: number }> = Object.fromEntries(\n  Object.entries(PARAGRAPH_SIZES).map(([size, step]) => [\n    size,\n    { fontSize: px(step.fontSize), lineHeight: step.lineHeight },\n  ]),\n);\n\n// `lead` and `small` shrink or grow relative to the scale, but only at the\n// default size — an explicit size wins.\nconst sizeOverride = (customSize: string, atDefault: number): string | undefined =>\n  customSize === 'md' ? px(atDefault) : sizeMap[customSize]?.fontSize;\n\nconst StyledParagraph = styled(Typography, {\n  shouldForwardProp: (prop) =>\n    !['customVariant', 'customColor', 'customSize'].includes(prop as string),\n})<{\n  customVariant?: string;\n  customColor?: string;\n  customSize?: string;\n}>(({ theme, customVariant = 'default', customColor = 'neutral', customSize = 'md' }) => {\n  const textColor = getColorFromTheme(theme, customColor);\n\n  const baseStyles: CSSObject = {\n    fontFamily: theme.typography.body1.fontFamily,\n    margin: `0 0 ${PARAGRAPH_MARGIN_BOTTOM_EM}em 0`,\n    transition: 'all 0.2s ease',\n    ...sizeMap[customSize],\n  };\n\n  // Variant-specific styles\n  const variantStyles: Record<string, CSSObject> = {\n    default: {\n      ...baseStyles,\n      color: textColor,\n      fontWeight: PARAGRAPH_FONT_WEIGHT,\n    },\n    lead: {\n      ...baseStyles,\n      color: textColor,\n      fontWeight: PARAGRAPH_FONT_WEIGHT,\n      fontSize: sizeOverride(customSize, LEAD_FONT_SIZE),\n      lineHeight: LEAD_LINE_HEIGHT,\n      letterSpacing: `${LEAD_LETTER_SPACING_EM}em`,\n    },\n    muted: {\n      ...baseStyles,\n      color: theme.palette.text.secondary,\n      fontWeight: PARAGRAPH_FONT_WEIGHT,\n      opacity: MUTED_OPACITY,\n    },\n    small: {\n      ...baseStyles,\n      color: theme.palette.text.secondary,\n      fontSize: sizeOverride(customSize, SMALL_FONT_SIZE),\n      fontWeight: PARAGRAPH_FONT_WEIGHT,\n      lineHeight: SMALL_LINE_HEIGHT,\n    },\n  };\n\n  return variantStyles[customVariant] || variantStyles.default;\n});\n\nexport const Paragraph = React.forwardRef<globalThis.HTMLParagraphElement, ParagraphProps>(\n  ({ variant = 'default', color = 'neutral', size = 'md', children, ...others }, ref) => {\n    // `testID` and `dataTestId` are the shared contract's spellings; the DOM\n    // wants `data-testid`, and must not see the other two as attributes.\n    const testId = resolveTestId(others);\n    const props = withoutTestIdProps(others);\n    return (\n      <StyledParagraph\n        ref={ref}\n        data-testid={testId}\n        customVariant={variant}\n        customColor={color}\n        customSize={size}\n        {...props}\n      >\n        {children}\n      </StyledParagraph>\n    );\n  },\n);\n\nParagraph.displayName = 'Paragraph';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AACA,OAAO,gBAAgB;AACvB,SAAS,cAAc;AACvB,OAAO,WAAW;AAyGZ;AAxFN,IAAM,oBAAoB,CAAC,OAAc,UAAkB;AACzD,MAAI,UAAU,WAAW;AACvB,WAAO,MAAM,QAAQ,KAAK;AAAA,EAC5B;AAEA,QAAM,WAAmC;AAAA,IACvC,SAAS,MAAM,QAAQ,QAAQ;AAAA,IAC/B,WAAW,MAAM,QAAQ,UAAU;AAAA,IACnC,SAAS,MAAM,QAAQ,QAAQ;AAAA,IAC/B,SAAS,MAAM,QAAQ,QAAQ;AAAA,IAC/B,MAAM,MAAM,QAAQ,KAAK;AAAA,IACzB,QAAQ,MAAM,QAAQ,MAAM;AAAA,EAC9B;AAEA,SAAO,SAAS,KAAK,KAAK,MAAM,QAAQ,KAAK;AAC/C;AAIA,IAAM,UAAoE,OAAO;AAAA,EAC/E,OAAO,QAAQ,eAAe,EAAE,IAAI,CAAC,CAAC,MAAM,IAAI,MAAM;AAAA,IACpD;AAAA,IACA,EAAE,UAAU,GAAG,KAAK,QAAQ,GAAG,YAAY,KAAK,WAAW;AAAA,EAC7D,CAAC;AACH;AAIA,IAAM,eAAe,CAAC,YAAoB,cACxC,eAAe,OAAO,GAAG,SAAS,IAAI,QAAQ,UAAU,GAAG;AAE7D,IAAM,kBAAkB,OAAO,YAAY;AAAA,EACzC,mBAAmB,CAAC,SAClB,CAAC,CAAC,iBAAiB,eAAe,YAAY,EAAE,SAAS,IAAc;AAC3E,CAAC,EAIE,CAAC,EAAE,OAAO,gBAAgB,WAAW,cAAc,WAAW,aAAa,KAAK,MAAM;AACvF,QAAM,YAAY,kBAAkB,OAAO,WAAW;AAEtD,QAAM,aAAwB;AAAA,IAC5B,YAAY,MAAM,WAAW,MAAM;AAAA,IACnC,QAAQ,OAAO,0BAA0B;AAAA,IACzC,YAAY;AAAA,IACZ,GAAG,QAAQ,UAAU;AAAA,EACvB;AAGA,QAAM,gBAA2C;AAAA,IAC/C,SAAS;AAAA,MACP,GAAG;AAAA,MACH,OAAO;AAAA,MACP,YAAY;AAAA,IACd;AAAA,IACA,MAAM;AAAA,MACJ,GAAG;AAAA,MACH,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,UAAU,aAAa,YAAY,cAAc;AAAA,MACjD,YAAY;AAAA,MACZ,eAAe,GAAG,sBAAsB;AAAA,IAC1C;AAAA,IACA,OAAO;AAAA,MACL,GAAG;AAAA,MACH,OAAO,MAAM,QAAQ,KAAK;AAAA,MAC1B,YAAY;AAAA,MACZ,SAAS;AAAA,IACX;AAAA,IACA,OAAO;AAAA,MACL,GAAG;AAAA,MACH,OAAO,MAAM,QAAQ,KAAK;AAAA,MAC1B,UAAU,aAAa,YAAY,eAAe;AAAA,MAClD,YAAY;AAAA,MACZ,YAAY;AAAA,IACd;AAAA,EACF;AAEA,SAAO,cAAc,aAAa,KAAK,cAAc;AACvD,CAAC;AAEM,IAAM,YAAY,MAAM;AAAA,EAC7B,CAAC,EAAE,UAAU,WAAW,QAAQ,WAAW,OAAO,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ;AAGrF,UAAM,SAAS,cAAc,MAAM;AACnC,UAAM,QAAQ,mBAAmB,MAAM;AACvC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,eAAe;AAAA,QACf,aAAa;AAAA,QACb,YAAY;AAAA,QACX,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,UAAU,cAAc;","names":[]}

package/dist/chunk-V5IOLAIS.js

@@ -0,0 +1,22 @@
+// src/tokens/scales.ts
+function accentFor(theme, color) {
+  if (color === "neutral") {
+    const grey = theme.palette.grey;
+    return {
+      // Explicit fallbacks: the ramp is indexed, and under
+      // `noUncheckedIndexedAccess` every stop is `string | undefined`.
+      main: grey[600] ?? "#757575",
+      light: grey[400] ?? "#bdbdbd",
+      dark: grey[800] ?? "#424242",
+      // Grey 600 carries white text in both themes.
+      contrastText: "#fff"
+    };
+  }
+  const key = color === "danger" ? "error" : color;
+  return theme.palette[key];
+}
+
+export {
+  accentFor
+};
+//# sourceMappingURL=chunk-V5IOLAIS.js.map

package/dist/chunk-V5IOLAIS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tokens/scales.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles/index.js';\n\nimport type { ColorValue, MuiColor } from './vocabulary';\n\n/**\n * `@12-apps/ui/tokens` keeps its whole surface here. The vocabulary itself —\n * the size and colour unions and their runtime lists — lives in\n * `./vocabulary`, which imports nothing, so the native renderer can read it\n * without this file's MUI `Theme` import following it into `dist/types-native`.\n */\nexport * from './vocabulary';\nexport { headingMetrics } from './typography';\n// The renderer-neutral theme and the colour arithmetic behind it, so a web\n// host can build a `UiTheme` from the same module path a native one does.\nexport * from './theme';\nexport * from './color';\n\nexport interface Accent {\n  main: string;\n  light: string;\n  dark: string;\n  contrastText: string;\n}\n\nexport function accentFor(theme: Theme, color: ColorValue): Accent {\n  if (color === 'neutral') {\n    const grey = theme.palette.grey;\n    return {\n      // Explicit fallbacks: the ramp is indexed, and under\n      // `noUncheckedIndexedAccess` every stop is `string | undefined`.\n      main: grey[600] ?? '#757575',\n      light: grey[400] ?? '#bdbdbd',\n      dark: grey[800] ?? '#424242',\n      // Grey 600 carries white text in both themes.\n      contrastText: '#fff',\n    };\n  }\n  // Past the `neutral` return, `paletteKey` can only produce a `MuiColor` — but\n  // its signature still admits `'grey'`, and TS cannot narrow a return type by\n  // the argument. Naming the key here keeps the accent branch honestly typed\n  // instead of casting the hole shut.\n  const key: MuiColor = color === 'danger' ? 'error' : color;\n  return theme.palette[key];\n}\n"],"mappings":";AAwBO,SAAS,UAAU,OAAc,OAA2B;AACjE,MAAI,UAAU,WAAW;AACvB,UAAM,OAAO,MAAM,QAAQ;AAC3B,WAAO;AAAA;AAAA;AAAA,MAGL,MAAM,KAAK,GAAG,KAAK;AAAA,MACnB,OAAO,KAAK,GAAG,KAAK;AAAA,MACpB,MAAM,KAAK,GAAG,KAAK;AAAA;AAAA,MAEnB,cAAc;AAAA,IAChB;AAAA,EACF;AAKA,QAAM,MAAgB,UAAU,WAAW,UAAU;AACrD,SAAO,MAAM,QAAQ,GAAG;AAC1B;","names":[]}

package/dist/chunk-VJK5FBNK.js

@@ -0,0 +1,46 @@
+import {
+  SPACER_FLEX_GROW,
+  SPACER_FLEX_SHRINK,
+  spacerDimensions
+} from "./chunk-N7MJ6CNC.js";
+import {
+  resolveTestId
+} from "./chunk-QLWBQQW7.js";
+
+// src/components/layout/Spacer/Spacer.tsx
+import Box from "@mui/material/Box/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { jsx } from "react/jsx-runtime";
+var Spacer = ({
+  size,
+  direction,
+  width,
+  height,
+  flex = false,
+  className,
+  ...testIdProps
+}) => {
+  const theme = useTheme();
+  const dimensions = spacerDimensions({ size, direction, width, height }, (units) => theme.spacing(units));
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className,
+      "data-testid": resolveTestId(testIdProps),
+      sx: {
+        width: dimensions.width,
+        height: dimensions.height,
+        flex: flex ? SPACER_FLEX_GROW : void 0,
+        flexShrink: SPACER_FLEX_SHRINK,
+        pointerEvents: "none",
+        userSelect: "none"
+      },
+      "aria-hidden": "true"
+    }
+  );
+};
+
+export {
+  Spacer
+};
+//# sourceMappingURL=chunk-VJK5FBNK.js.map

package/dist/chunk-VJK5FBNK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Spacer/Spacer.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { SPACER_FLEX_GROW, SPACER_FLEX_SHRINK, spacerDimensions } from './Spacer.metrics';\nimport type { SpacerProps } from './Spacer.types';\nimport { resolveTestId } from '../../../platform/test-id';\n\nexport const Spacer: React.FC<SpacerProps> = ({\n  size,\n  direction,\n  width,\n  height,\n  flex = false,\n  className,\n  ...testIdProps\n}) => {\n  const theme = useTheme();\n\n  // From the shared metrics, not a table of our own: the native `Spacer` reads\n  // the same units, so the two renderers cannot disagree on a step.\n  const dimensions = spacerDimensions({ size, direction, width, height }, (units) => theme.spacing(units));\n\n  return (\n    <Box\n      className={className}\n      data-testid={resolveTestId(testIdProps)}\n      sx={{\n        width: dimensions.width,\n        height: dimensions.height,\n        flex: flex ? SPACER_FLEX_GROW : undefined,\n        flexShrink: SPACER_FLEX_SHRINK,\n        pointerEvents: 'none',\n        userSelect: 'none',\n      }}\n      aria-hidden=\"true\"\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA,OAAO,SAAS;AAChB,SAAS,gBAAgB;AAuBrB;AAhBG,IAAM,SAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,QAAQ,SAAS;AAIvB,QAAM,aAAa,iBAAiB,EAAE,MAAM,WAAW,OAAO,OAAO,GAAG,CAAC,UAAU,MAAM,QAAQ,KAAK,CAAC;AAEvG,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa,cAAc,WAAW;AAAA,MACtC,IAAI;AAAA,QACF,OAAO,WAAW;AAAA,QAClB,QAAQ,WAAW;AAAA,QACnB,MAAM,OAAO,mBAAmB;AAAA,QAChC,YAAY;AAAA,QACZ,eAAe;AAAA,QACf,YAAY;AAAA,MACd;AAAA,MACA,eAAY;AAAA;AAAA,EACd;AAEJ;","names":[]}

package/dist/{chunk-N34YHFZW.js → chunk-W2YNUUVJ.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-H37GIAAM.js";
 import {
   accentFor
-} from "./chunk-I6PZVHIT.js";
+} from "./chunk-V5IOLAIS.js";
 
 // src/components/navigation/AppHeader/AppHeader.identity.tsx
 import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
@@ -200,4 +200,4 @@ export {
   AppHeaderStatus,
   AppHeaderIdentity
 };
-//# sourceMappingURL=chunk-N34YHFZW.js.map
+//# sourceMappingURL=chunk-W2YNUUVJ.js.map

package/dist/{chunk-XULTDO56.js → chunk-WZUNBSS7.js}

@@ -1,6 +1,6 @@
 import {
   buildChartContext
-} from "./chunk-XSKVBGCZ.js";
+} from "./chunk-HKV4MQ2W.js";
 import {
   ChartLegendContent,
   ChartTooltipContent
@@ -312,4 +312,4 @@ function renderChartByType(props, theme) {
 export {
   renderChartByType
 };
-//# sourceMappingURL=chunk-XULTDO56.js.map
+//# sourceMappingURL=chunk-WZUNBSS7.js.map

package/dist/{chunk-3JYYPJFD.js → chunk-X2J6MRJW.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-CJL5D2IT.js";
 import {
   EmptyState
-} from "./chunk-7M5BACFQ.js";
+} from "./chunk-UXQW6ZIN.js";
 
 // src/components/data-display/SectionOnboarding/SectionOnboarding.tsx
 import CheckCircle from "@mui/icons-material/CheckCircle";
@@ -193,4 +193,4 @@ export {
   SectionOnboarding,
   SectionOnboarding_default
 };
-//# sourceMappingURL=chunk-3JYYPJFD.js.map
+//# sourceMappingURL=chunk-X2J6MRJW.js.map

package/dist/chunk-X5D3PTWI.js

@@ -0,0 +1,58 @@
+import {
+  resolveBoxLayout,
+  splitBoxProps
+} from "./chunk-7V6ZRQYW.js";
+import {
+  useUiTheme
+} from "./chunk-KLREH4X6.js";
+import {
+  resolveTestId
+} from "./chunk-QLWBQQW7.js";
+
+// src/components/layout/Box/Box.tsx
+import MuiBox from "@mui/material/Box/index.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var PX_KEYS = /* @__PURE__ */ new Set([
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft",
+  "marginTop",
+  "marginRight",
+  "marginBottom",
+  "marginLeft",
+  "gap",
+  "borderRadius",
+  "borderWidth",
+  "width",
+  "height"
+]);
+function layoutToSx(layout) {
+  return Object.fromEntries(
+    Object.entries(layout).map(([key, value]) => [
+      key,
+      typeof value === "number" && PX_KEYS.has(key) ? `${value}px` : value
+    ])
+  );
+}
+var Box = React.forwardRef(
+  ({ children, sx, ...props }, ref) => {
+    const theme = useUiTheme();
+    const { layout, rest } = splitBoxProps(props);
+    const resolved = layoutToSx(resolveBoxLayout(layout, theme));
+    const testId = resolveTestId(layout);
+    const merged = [
+      resolved,
+      ...Array.isArray(sx) ? sx : sx === void 0 ? [] : [sx]
+    ];
+    return /* @__PURE__ */ jsx(MuiBox, { ref, sx: merged, "data-testid": testId, ...rest, children });
+  }
+);
+Box.displayName = "Box";
+
+export {
+  layoutToSx,
+  Box
+};
+//# sourceMappingURL=chunk-X5D3PTWI.js.map

package/dist/chunk-X5D3PTWI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Box/Box.tsx"],"sourcesContent":["import MuiBox from '@mui/material/Box/index.js';\nimport type { SxProps, Theme } from '@mui/material/styles/index.js';\nimport * as React from 'react';\n\nimport { resolveBoxLayout, splitBoxProps, type BoxLayout } from './box-layout';\nimport type { BoxProps } from './Box.types';\nimport { resolveTestId } from '../../../platform/test-id';\nimport { useUiTheme } from '../../../provider/use-ui-theme';\n\n/**\n * `sx` is not CSS: it reads a bare number on `padding`, `margin` or `gap` as\n * SPACING UNITS, on `borderRadius` as a multiple of `shape.borderRadius`, and a\n * `width` of `1` or less as a fraction. The resolver's numbers are already px,\n * so every one of them is written as a px string — otherwise a `p={2}` box\n * renders 128px of padding on the web and 16dp on native, which is the one\n * thing this component exists to rule out.\n */\nconst PX_KEYS = new Set<keyof BoxLayout>([\n  'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft',\n  'marginTop', 'marginRight', 'marginBottom', 'marginLeft',\n  'gap', 'borderRadius', 'borderWidth', 'width', 'height',\n]);\n\nexport function layoutToSx(layout: BoxLayout): Record<string, string | number> {\n  return Object.fromEntries(\n    Object.entries(layout).map(([key, value]) => [\n      key,\n      typeof value === 'number' && PX_KEYS.has(key as keyof BoxLayout) ? `${value}px` : value,\n    ]),\n  );\n}\n\n/**\n * The web `Box`: MUI's, with the neutral layout props resolved into `sx` ahead\n * of whatever `sx` the caller adds — so the caller's escape hatch still wins.\n */\nexport const Box = React.forwardRef<HTMLDivElement, BoxProps>(\n  ({ children, sx, ...props }, ref) => {\n    const theme = useUiTheme();\n    const { layout, rest } = splitBoxProps(props);\n    const resolved = layoutToSx(resolveBoxLayout(layout, theme)) as SxProps<Theme>;\n    const testId = resolveTestId(layout);\n    const merged: SxProps<Theme> = [\n      resolved,\n      ...(Array.isArray(sx) ? sx : sx === undefined ? [] : [sx]),\n    ] as SxProps<Theme>;\n\n    return (\n      <MuiBox ref={ref} sx={merged} data-testid={testId} {...rest}>\n        {children}\n      </MuiBox>\n    );\n  },\n);\n\nBox.displayName = 'Box';\n"],"mappings":";;;;;;;;;;;;AAAA,OAAO,YAAY;AAEnB,YAAY,WAAW;AA8CjB;AA/BN,IAAM,UAAU,oBAAI,IAAqB;AAAA,EACvC;AAAA,EAAc;AAAA,EAAgB;AAAA,EAAiB;AAAA,EAC/C;AAAA,EAAa;AAAA,EAAe;AAAA,EAAgB;AAAA,EAC5C;AAAA,EAAO;AAAA,EAAgB;AAAA,EAAe;AAAA,EAAS;AACjD,CAAC;AAEM,SAAS,WAAW,QAAoD;AAC7E,SAAO,OAAO;AAAA,IACZ,OAAO,QAAQ,MAAM,EAAE,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM;AAAA,MAC3C;AAAA,MACA,OAAO,UAAU,YAAY,QAAQ,IAAI,GAAsB,IAAI,GAAG,KAAK,OAAO;AAAA,IACpF,CAAC;AAAA,EACH;AACF;AAMO,IAAM,MAAY;AAAA,EACvB,CAAC,EAAE,UAAU,IAAI,GAAG,MAAM,GAAG,QAAQ;AACnC,UAAM,QAAQ,WAAW;AACzB,UAAM,EAAE,QAAQ,KAAK,IAAI,cAAc,KAAK;AAC5C,UAAM,WAAW,WAAW,iBAAiB,QAAQ,KAAK,CAAC;AAC3D,UAAM,SAAS,cAAc,MAAM;AACnC,UAAM,SAAyB;AAAA,MAC7B;AAAA,MACA,GAAI,MAAM,QAAQ,EAAE,IAAI,KAAK,OAAO,SAAY,CAAC,IAAI,CAAC,EAAE;AAAA,IAC1D;AAEA,WACE,oBAAC,UAAO,KAAU,IAAI,QAAQ,eAAa,QAAS,GAAG,MACpD,UACH;AAAA,EAEJ;AACF;AAEA,IAAI,cAAc;","names":[]}

package/dist/{chunk-HEG7JIBM.js → chunk-X5MPHXG5.js}

@@ -1,3 +1,6 @@
+import {
+  useDataGridModel
+} from "./chunk-DLJGBJZW.js";
 import {
   GridBody,
   GridHeader
@@ -7,9 +10,6 @@ import {
   DataGridError,
   DataGridLoading
 } from "./chunk-5E3XZAED.js";
-import {
-  useDataGridModel
-} from "./chunk-DLJGBJZW.js";
 
 // src/components/data-display/DataGrid/DataGrid.tsx
 import Paper from "@mui/material/Paper/index.js";
@@ -115,4 +115,4 @@ DataGrid.displayName = "DataGrid";
 export {
   DataGrid
 };
-//# sourceMappingURL=chunk-HEG7JIBM.js.map
+//# sourceMappingURL=chunk-X5MPHXG5.js.map

package/dist/{chunk-3QGRQNTP.js → chunk-XELVDPKL.js}

@@ -1,9 +1,9 @@
 import {
   MenubarToolbar
-} from "./chunk-FWL2N2KH.js";
+} from "./chunk-SX3V2DLV.js";
 import {
   barStyles
-} from "./chunk-DJORMYOV.js";
+} from "./chunk-ZU3SWR4I.js";
 import {
   useMenubarMenus
 } from "./chunk-42VH7N5L.js";
@@ -190,4 +190,4 @@ export {
   Menubar,
   MenubarGroup
 };
-//# sourceMappingURL=chunk-3QGRQNTP.js.map
+//# sourceMappingURL=chunk-XELVDPKL.js.map

package/dist/{chunk-EPNUVSNK.js → chunk-XFUNJYFT.js}

@@ -1,3 +1,9 @@
+import {
+  useHoverCard
+} from "./chunk-SXYIXCUB.js";
+import {
+  HoverCardContent
+} from "./chunk-O26MKGIC.js";
 import {
   arrowSx,
   cardSx,
@@ -5,12 +11,6 @@ import {
   getTransformOrigin,
   sideOf
 } from "./chunk-KSLNO5NG.js";
-import {
-  useHoverCard
-} from "./chunk-SXYIXCUB.js";
-import {
-  HoverCardContent
-} from "./chunk-O26MKGIC.js";
 import {
   withDefaults
 } from "./chunk-HPK33ACY.js";
@@ -158,4 +158,4 @@ HoverCard.displayName = "HoverCard";
 export {
   HoverCard
 };
-//# sourceMappingURL=chunk-EPNUVSNK.js.map
+//# sourceMappingURL=chunk-XFUNJYFT.js.map