@12-apps/ui 6.34.0 → 6.36.0

package/dist/chunk-5W4BLTDI.js

@@ -0,0 +1,266 @@
+import {
+  breadcrumbLinkStyles
+} from "./chunk-6CTPDNNX.js";
+import {
+  sheen,
+  uiInk
+} from "./chunk-FQ6UW7IY.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/navigation/Breadcrumbs/BreadcrumbEntry.tsx
+import Home from "@mui/icons-material/Home";
+import MoreHoriz from "@mui/icons-material/MoreHoriz";
+import Box from "@mui/material/Box/index.js";
+import Fade from "@mui/material/Fade/index.js";
+import Link from "@mui/material/Link/index.js";
+import Tooltip from "@mui/material/Tooltip/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, styled } from "@mui/material/styles/index.js";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var BreadcrumbLink = styled(Link, {
+  shouldForwardProp: (prop) => prop !== "size" && prop !== "active" && prop !== "visualStyle"
+})(
+  ({ theme, size, active, visualStyle }) => ({
+    ...breadcrumbLinkStyles({ theme, size, active, visualStyle })
+  })
+);
+var BreadcrumbText = styled(Typography, {
+  shouldForwardProp: (prop) => prop !== "size" && prop !== "visualStyle"
+})(({ theme, size, visualStyle }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(0.5),
+  fontSize: rem(theme, size === "sm" ? 14 : size === "lg" ? 18 : 16),
+  fontWeight: 600,
+  color: theme.palette.primary.main,
+  padding: theme.spacing(0.5, 0.75),
+  borderRadius: theme.spacing(0.75),
+  position: "relative",
+  ...visualStyle === "glass" && {
+    background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)} 0%, ${alpha(theme.palette.primary.main, 0.05)} 100%)`,
+    backdropFilter: "blur(4px)",
+    border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`
+  },
+  "& .breadcrumb-icon": {
+    color: theme.palette.primary.main
+  },
+  // Mobile responsiveness
+  [theme.breakpoints.down("sm")]: {
+    fontSize: rem(theme, size === "lg" ? 16 : size === "sm" ? 12 : 14),
+    padding: theme.spacing(0.375, 0.5)
+  }
+}));
+var CollapsedItemsPopover = ({ open, items, dataTestId, onSelect }) => /* @__PURE__ */ jsx(Fade, { in: open, children: /* @__PURE__ */ jsx(
+  Box,
+  {
+    sx: {
+      background: (theme) => theme.palette.mode === "dark" ? alpha(uiInk(theme).glassSlate, 0.95) : sheen(theme, 0.95),
+      backdropFilter: "blur(10px)",
+      borderRadius: 1,
+      boxShadow: 3,
+      p: 1,
+      minWidth: 150
+    },
+    children: items.map((item, index) => /* @__PURE__ */ jsx(
+      Box,
+      {
+        component: "a",
+        href: item.href || "#",
+        onClick: (e) => {
+          onSelect();
+          item.onClick?.(e);
+        },
+        sx: {
+          display: "block",
+          px: 2,
+          py: 1,
+          color: "text.secondary",
+          textDecoration: "none",
+          borderRadius: 0.5,
+          transition: "all 0.2s",
+          "&:hover": {
+            backgroundColor: "action.hover",
+            color: "primary.main"
+          }
+        },
+        "data-testid": dataTestId ? `${dataTestId}-collapsed-item-${index}` : `breadcrumbs-collapsed-item-${index}`,
+        children: item.label
+      },
+      index
+    ))
+  }
+) });
+var CollapsedMenu = ({
+  items,
+  size,
+  visualStyle,
+  copy,
+  dataTestId
+}) => {
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Tooltip, { title: copy.showMore, arrow: true, children: /* @__PURE__ */ jsx(
+      BreadcrumbLink,
+      {
+        onClick: handleClick,
+        size,
+        visualStyle,
+        sx: { cursor: "pointer" },
+        "data-testid": dataTestId ? `${dataTestId}-collapsed-menu` : "breadcrumbs-collapsed-menu",
+        children: /* @__PURE__ */ jsx(MoreHoriz, { className: "breadcrumb-icon" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          position: "absolute",
+          top: "100%",
+          left: 0,
+          mt: 1,
+          display: open ? "block" : "none",
+          zIndex: 1e3
+        },
+        "data-testid": dataTestId ? `${dataTestId}-collapsed-menu-items` : "breadcrumbs-collapsed-menu-items",
+        children: /* @__PURE__ */ jsx(
+          CollapsedItemsPopover,
+          {
+            open,
+            items,
+            size,
+            visualStyle,
+            dataTestId,
+            onSelect: handleClose
+          }
+        )
+      }
+    )
+  ] });
+};
+var crumbIcon = ({
+  item,
+  isFirst,
+  showHomeIcon,
+  iconSize
+}) => {
+  if (isFirst && showHomeIcon && !item.icon) {
+    return /* @__PURE__ */ jsx(Home, { className: "breadcrumb-icon", fontSize: iconSize });
+  }
+  if (!item.icon) return null;
+  return /* @__PURE__ */ jsx(Box, { component: "span", className: "breadcrumb-icon", sx: { display: "flex", alignItems: "center" }, children: item.icon });
+};
+var EllipsisCrumb = ({
+  label,
+  copy,
+  dataTestId
+}) => /* @__PURE__ */ jsx(Tooltip, { title: copy.moreItems, arrow: true, children: /* @__PURE__ */ jsx(
+  Box,
+  {
+    sx: {
+      px: 1,
+      color: "text.disabled",
+      cursor: "default",
+      userSelect: "none"
+    },
+    "data-testid": dataTestId ? `${dataTestId}-ellipsis` : "breadcrumbs-ellipsis",
+    children: label
+  }
+) });
+var makeTestId = (dataTestId) => (suffix, own) => own ?? (dataTestId ? `${dataTestId}-${suffix}` : `breadcrumbs-${suffix}`);
+var ClickableCrumb = ({ item, index, icon, size, variant, isActive, testId }) => /* @__PURE__ */ jsx(Tooltip, { title: item.tooltip || item.label, arrow: true, disableHoverListener: !item.tooltip, children: /* @__PURE__ */ jsxs(
+  BreadcrumbLink,
+  {
+    href: item.href || "#",
+    onClick: item.onClick,
+    size,
+    visualStyle: variant,
+    active: isActive,
+    underline: "none",
+    "aria-label": item.ariaLabel || item.label,
+    "data-testid": testId(`link-${index}`, item.dataTestId),
+    children: [
+      icon,
+      /* @__PURE__ */ jsx("span", { children: item.label })
+    ]
+  }
+) });
+var BreadcrumbEntry = ({
+  item,
+  index,
+  itemCount,
+  collapsedItems,
+  collapseBehavior,
+  separator,
+  showHomeIcon,
+  iconSize,
+  size,
+  variant,
+  copy,
+  dataTestId
+}) => {
+  const testId = makeTestId(dataTestId);
+  const isLast = index === itemCount - 1;
+  const isActive = item.active || isLast && !item.isEllipsis;
+  const isCollapsePoint = index === 1 && collapsedItems.length > 0 && collapseBehavior === "menu";
+  if (isCollapsePoint) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        CollapsedMenu,
+        {
+          copy,
+          items: collapsedItems,
+          size,
+          visualStyle: variant,
+          dataTestId
+        }
+      ),
+      separator
+    ] });
+  }
+  if (item.isEllipsis) {
+    return /* @__PURE__ */ jsx(EllipsisCrumb, { copy, label: item.label, dataTestId });
+  }
+  const icon = crumbIcon({ item, isFirst: index === 0, showHomeIcon, iconSize });
+  if (isActive) {
+    return /* @__PURE__ */ jsxs(
+      BreadcrumbText,
+      {
+        size,
+        visualStyle: variant,
+        "aria-current": "page",
+        "data-testid": testId(`item-${index}`, item.dataTestId),
+        children: [
+          icon,
+          /* @__PURE__ */ jsx("span", { children: item.label })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    ClickableCrumb,
+    {
+      item,
+      index,
+      icon,
+      size,
+      variant,
+      isActive,
+      testId
+    }
+  );
+};
+
+export {
+  BreadcrumbEntry
+};
+//# sourceMappingURL=chunk-5W4BLTDI.js.map

package/dist/chunk-5W4BLTDI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/Breadcrumbs/BreadcrumbEntry.tsx"],"sourcesContent":["import Home from '@mui/icons-material/Home';\nimport MoreHoriz from '@mui/icons-material/MoreHoriz';\nimport Box from '@mui/material/Box/index.js';\nimport Fade from '@mui/material/Fade/index.js';\nimport Link from '@mui/material/Link/index.js';\nimport Tooltip from '@mui/material/Tooltip/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, styled } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { breadcrumbLinkStyles } from './Breadcrumbs.styles';\nimport type { BreadcrumbItem } from './Breadcrumbs.types';\nimport type { BreadcrumbCopy } from '../../../copy';\nimport { sheen, uiInk } from '../../../tokens/ink';\nimport { rem } from '../../../tokens/relative';\n\nconst BreadcrumbLink = styled(Link, {\n  shouldForwardProp: (prop) => prop !== 'size' && prop !== 'active' && prop !== 'visualStyle' })<{ size?: string; active?: boolean; visualStyle?: string }>(\n  ({ theme, size, active, visualStyle }) => ({\n    ...breadcrumbLinkStyles({ theme, size, active, visualStyle }) }),\n);\n\nconst BreadcrumbText = styled(Typography, {\n  shouldForwardProp: (prop) => prop !== 'size' && prop !== 'visualStyle' })<{ size?: string; visualStyle?: string }>(({ theme, size, visualStyle }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(0.5),\n  fontSize: rem(theme, size === 'sm' ? 14 : size === 'lg' ? 18 : 16),\n  fontWeight: 600,\n  color: theme.palette.primary.main,\n  padding: theme.spacing(0.5, 0.75),\n  borderRadius: theme.spacing(0.75),\n  position: 'relative',\n\n  ...(visualStyle === 'glass' && {\n    background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)} 0%, ${alpha(theme.palette.primary.main, 0.05)} 100%)`,\n    backdropFilter: 'blur(4px)',\n    border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}` }),\n\n  '& .breadcrumb-icon': {\n    color: theme.palette.primary.main },\n\n  // Mobile responsiveness\n  [theme.breakpoints.down('sm')]: {\n    fontSize: rem(theme, size === 'lg' ? 16 : size === 'sm' ? 12 : 14),\n    padding: theme.spacing(0.375, 0.5) } }));\n\n// Animated separator wrapper\n\n// Mobile collapsed menu component\n// The list that drops down from the \"...\" trigger.\nconst CollapsedItemsPopover: React.FC<{\n  open: boolean;\n  items: BreadcrumbItem[];\n  size: string;\n  visualStyle?: string;\n  dataTestId?: string;\n  onSelect: () => void;\n}> = ({ open, items, dataTestId, onSelect }) => (\n<Fade in={open}>\n    <Box\n      sx={{\n        background: (theme) =>\n          theme.palette.mode === 'dark'\n            ? alpha(uiInk(theme).glassSlate, 0.95)\n            : sheen(theme, 0.95),\n        backdropFilter: 'blur(10px)',\n        borderRadius: 1,\n        boxShadow: 3,\n        p: 1,\n        minWidth: 150 }}\n    >\n      {items.map((item, index) => (\n        <Box\n          key={index}\n          component=\"a\"\n          href={item.href || '#'}\n          onClick={(e) => {\n            onSelect();\n            item.onClick?.(e);\n          }}\n          sx={{\n            display: 'block',\n            px: 2,\n            py: 1,\n            color: 'text.secondary',\n            textDecoration: 'none',\n            borderRadius: 0.5,\n            transition: 'all 0.2s',\n            '&:hover': {\n              backgroundColor: 'action.hover',\n              color: 'primary.main' } }}\n          data-testid={dataTestId ? `${dataTestId}-collapsed-item-${index}` : `breadcrumbs-collapsed-item-${index}`}\n        >\n          {item.label}\n        </Box>\n      ))}\n    </Box>\n  </Fade>\n);\n\nconst CollapsedMenu = ({\n  items,\n  size,\n  visualStyle,\n  copy,\n  dataTestId }: {\n  items: BreadcrumbItem[];\n  size: string;\n  visualStyle?: string;\n  copy: BreadcrumbCopy;\n  dataTestId?: string;\n}) => {\n  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);\n  const open = Boolean(anchorEl);\n\n  const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n    setAnchorEl(event.currentTarget);\n  };\n\n  const handleClose = () => {\n    setAnchorEl(null);\n  };\n\n  return (\n    <>\n      <Tooltip title={copy.showMore} arrow>\n        <BreadcrumbLink\n          onClick={handleClick}\n          size={size}\n          visualStyle={visualStyle}\n          sx={{ cursor: 'pointer' }}\n          data-testid={dataTestId ? `${dataTestId}-collapsed-menu` : 'breadcrumbs-collapsed-menu'}\n        >\n          <MoreHoriz className=\"breadcrumb-icon\" />\n        </BreadcrumbLink>\n      </Tooltip>\n      <Box\n        sx={{\n          position: 'absolute',\n          top: '100%',\n          left: 0,\n          mt: 1,\n          display: open ? 'block' : 'none',\n          zIndex: 1000 }}\n        data-testid={dataTestId ? `${dataTestId}-collapsed-menu-items` : 'breadcrumbs-collapsed-menu-items'}\n      >\n        <CollapsedItemsPopover\n          open={open}\n          items={items}\n          size={size}\n          visualStyle={visualStyle}\n          dataTestId={dataTestId}\n          onSelect={handleClose}\n        />\n      </Box>\n    </>\n  );\n};\n\n// The leading crumb gets a house unless it brings its own icon; everything else\n// shows only what it supplies.\nconst crumbIcon = ({\n  item,\n  isFirst,\n  showHomeIcon,\n  iconSize }: {\n  item: BreadcrumbItem;\n  isFirst: boolean;\n  showHomeIcon: boolean;\n  iconSize: 'small' | 'medium';\n}) => {\n  if (isFirst && showHomeIcon && !item.icon) {\n    return <Home className=\"breadcrumb-icon\" fontSize={iconSize} />;\n  }\n\n  if (!item.icon) return null;\n\n  return (\n    <Box component=\"span\" className=\"breadcrumb-icon\" sx={{ display: 'flex', alignItems: 'center' }}>\n      {item.icon}\n    </Box>\n  );\n};\n\nconst EllipsisCrumb: React.FC<{ label: string; copy: BreadcrumbCopy; dataTestId?: string }> = ({\n  label,\n  copy,\n  dataTestId }) => (\n  <Tooltip title={copy.moreItems} arrow>\n            <Box\n              sx={{\n                px: 1,\n                color: 'text.disabled',\n                cursor: 'default',\n                userSelect: 'none' }}\n              data-testid={dataTestId ? `${dataTestId}-ellipsis` : 'breadcrumbs-ellipsis'}\n            >\n              {label}\n            </Box>\n          </Tooltip>\n);\n\n// The same conditional test id was written at each crumb variant. An item that\n// names its OWN id wins: see `BreadcrumbItem.dataTestId`.\nconst makeTestId =\n  (dataTestId?: string) =>\n  (suffix: string, own?: string): string =>\n    own ?? (dataTestId ? `${dataTestId}-${suffix}` : `breadcrumbs-${suffix}`);\n\nconst ClickableCrumb: React.FC<{\n  item: BreadcrumbItem;\n  index: number;\n  icon: React.ReactNode;\n  size: string;\n  variant: string;\n  isActive: boolean;\n  testId: (suffix: string, own?: string) => string;\n}> = ({ item, index, icon, size, variant, isActive, testId }) => (\n  <Tooltip title={item.tooltip || item.label} arrow disableHoverListener={!item.tooltip}>\n    <BreadcrumbLink\n      href={item.href || '#'}\n      onClick={item.onClick}\n      size={size}\n      visualStyle={variant}\n      active={isActive}\n      underline=\"none\"\n      aria-label={item.ariaLabel || item.label}\n      data-testid={testId(`link-${index}`, item.dataTestId)}\n    >\n      {icon}\n      <span>{item.label}</span>\n    </BreadcrumbLink>\n  </Tooltip>\n);\n\n// One crumb: the collapsed-menu stand-in, the ellipsis, the active tail item or\n// a plain link.\nexport const BreadcrumbEntry: React.FC<{\n  item: BreadcrumbItem & { isEllipsis?: boolean };\n  index: number;\n  itemCount: number;\n  collapsedItems: BreadcrumbItem[];\n  collapseBehavior: string;\n  separator: React.ReactNode;\n  showHomeIcon: boolean;\n  iconSize: 'small' | 'medium';\n  size: string;\n  variant: string;\n  copy: BreadcrumbCopy;\n  dataTestId?: string;\n}> = ({\n  item,\n  index,\n  itemCount,\n  collapsedItems,\n  collapseBehavior,\n  separator,\n  showHomeIcon,\n  iconSize,\n  size,\n  variant,\n  copy,\n  dataTestId }) => {\n  const testId = makeTestId(dataTestId);\n  const isLast = index === itemCount - 1;\n  // The tail crumb is the current page unless it is the ellipsis placeholder.\n  const isActive = item.active || (isLast && !item.isEllipsis);\n\n  const isCollapsePoint =\n    index === 1 && collapsedItems.length > 0 && collapseBehavior === 'menu';\n\n  if (isCollapsePoint) {\n    return (\n      <>\n        <CollapsedMenu\n          copy={copy}\n          items={collapsedItems}\n          size={size}\n          visualStyle={variant}\n          dataTestId={dataTestId}\n        />\n        {separator}\n      </>\n    );\n  }\n\n  if (item.isEllipsis) {\n    return <EllipsisCrumb copy={copy} label={item.label} dataTestId={dataTestId} />;\n  }\n\n  const icon = crumbIcon({ item, isFirst: index === 0, showHomeIcon, iconSize });\n\n  if (isActive) {\n    return (\n      <BreadcrumbText\n        size={size}\n        visualStyle={variant}\n        aria-current=\"page\"\n        data-testid={testId(`item-${index}`, item.dataTestId)}\n      >\n        {icon}\n        <span>{item.label}</span>\n      </BreadcrumbText>\n    );\n  }\n\n  return (\n    <ClickableCrumb\n      item={item}\n      index={index}\n      icon={icon}\n      size={size}\n      variant={variant}\n      isActive={isActive}\n      testId={testId}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAAA,OAAO,UAAU;AACjB,OAAO,eAAe;AACtB,OAAO,SAAS;AAChB,OAAO,UAAU;AACjB,OAAO,UAAU;AACjB,OAAO,aAAa;AACpB,OAAO,gBAAgB;AACvB,SAAS,OAAO,cAAc;AAC9B,OAAO,WAAW;AAiEV,SAoDJ,UApDI,KAoDJ,YApDI;AAzDR,IAAM,iBAAiB,OAAO,MAAM;AAAA,EAClC,mBAAmB,CAAC,SAAS,SAAS,UAAU,SAAS,YAAY,SAAS;AAAc,CAAC;AAAA,EAC7F,CAAC,EAAE,OAAO,MAAM,QAAQ,YAAY,OAAO;AAAA,IACzC,GAAG,qBAAqB,EAAE,OAAO,MAAM,QAAQ,YAAY,CAAC;AAAA,EAAE;AAClE;AAEA,IAAM,iBAAiB,OAAO,YAAY;AAAA,EACxC,mBAAmB,CAAC,SAAS,SAAS,UAAU,SAAS;AAAc,CAAC,EAA2C,CAAC,EAAE,OAAO,MAAM,YAAY,OAAO;AAAA,EACtJ,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,KAAK,MAAM,QAAQ,GAAG;AAAA,EACtB,UAAU,IAAI,OAAO,SAAS,OAAO,KAAK,SAAS,OAAO,KAAK,EAAE;AAAA,EACjE,YAAY;AAAA,EACZ,OAAO,MAAM,QAAQ,QAAQ;AAAA,EAC7B,SAAS,MAAM,QAAQ,KAAK,IAAI;AAAA,EAChC,cAAc,MAAM,QAAQ,IAAI;AAAA,EAChC,UAAU;AAAA,EAEV,GAAI,gBAAgB,WAAW;AAAA,IAC7B,YAAY,2BAA2B,MAAM,MAAM,QAAQ,QAAQ,MAAM,GAAG,CAAC,QAAQ,MAAM,MAAM,QAAQ,QAAQ,MAAM,IAAI,CAAC;AAAA,IAC5H,gBAAgB;AAAA,IAChB,QAAQ,aAAa,MAAM,MAAM,QAAQ,QAAQ,MAAM,GAAG,CAAC;AAAA,EAAG;AAAA,EAEhE,sBAAsB;AAAA,IACpB,OAAO,MAAM,QAAQ,QAAQ;AAAA,EAAK;AAAA;AAAA,EAGpC,CAAC,MAAM,YAAY,KAAK,IAAI,CAAC,GAAG;AAAA,IAC9B,UAAU,IAAI,OAAO,SAAS,OAAO,KAAK,SAAS,OAAO,KAAK,EAAE;AAAA,IACjE,SAAS,MAAM,QAAQ,OAAO,GAAG;AAAA,EAAE;AAAE,EAAE;AAM3C,IAAM,wBAOD,CAAC,EAAE,MAAM,OAAO,YAAY,SAAS,MAC1C,oBAAC,QAAK,IAAI,MACN;AAAA,EAAC;AAAA;AAAA,IACC,IAAI;AAAA,MACF,YAAY,CAAC,UACX,MAAM,QAAQ,SAAS,SACnB,MAAM,MAAM,KAAK,EAAE,YAAY,IAAI,IACnC,MAAM,OAAO,IAAI;AAAA,MACvB,gBAAgB;AAAA,MAChB,cAAc;AAAA,MACd,WAAW;AAAA,MACX,GAAG;AAAA,MACH,UAAU;AAAA,IAAI;AAAA,IAEf,gBAAM,IAAI,CAAC,MAAM,UAChB;AAAA,MAAC;AAAA;AAAA,QAEC,WAAU;AAAA,QACV,MAAM,KAAK,QAAQ;AAAA,QACnB,SAAS,CAAC,MAAM;AACd,mBAAS;AACT,eAAK,UAAU,CAAC;AAAA,QAClB;AAAA,QACA,IAAI;AAAA,UACF,SAAS;AAAA,UACT,IAAI;AAAA,UACJ,IAAI;AAAA,UACJ,OAAO;AAAA,UACP,gBAAgB;AAAA,UAChB,cAAc;AAAA,UACd,YAAY;AAAA,UACZ,WAAW;AAAA,YACT,iBAAiB;AAAA,YACjB,OAAO;AAAA,UAAe;AAAA,QAAE;AAAA,QAC5B,eAAa,aAAa,GAAG,UAAU,mBAAmB,KAAK,KAAK,8BAA8B,KAAK;AAAA,QAEtG,eAAK;AAAA;AAAA,MApBD;AAAA,IAqBP,CACD;AAAA;AACH,GACF;AAGF,IAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAW,MAMP;AACJ,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAA6B,IAAI;AACvE,QAAM,OAAO,QAAQ,QAAQ;AAE7B,QAAM,cAAc,CAAC,UAAyC;AAC5D,gBAAY,MAAM,aAAa;AAAA,EACjC;AAEA,QAAM,cAAc,MAAM;AACxB,gBAAY,IAAI;AAAA,EAClB;AAEA,SACE,iCACE;AAAA,wBAAC,WAAQ,OAAO,KAAK,UAAU,OAAK,MAClC;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA,IAAI,EAAE,QAAQ,UAAU;AAAA,QACxB,eAAa,aAAa,GAAG,UAAU,oBAAoB;AAAA,QAE3D,8BAAC,aAAU,WAAU,mBAAkB;AAAA;AAAA,IACzC,GACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,UACF,UAAU;AAAA,UACV,KAAK;AAAA,UACL,MAAM;AAAA,UACN,IAAI;AAAA,UACJ,SAAS,OAAO,UAAU;AAAA,UAC1B,QAAQ;AAAA,QAAK;AAAA,QACf,eAAa,aAAa,GAAG,UAAU,0BAA0B;AAAA,QAEjE;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,UAAU;AAAA;AAAA,QACZ;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAIA,IAAM,YAAY,CAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAS,MAKL;AACJ,MAAI,WAAW,gBAAgB,CAAC,KAAK,MAAM;AACzC,WAAO,oBAAC,QAAK,WAAU,mBAAkB,UAAU,UAAU;AAAA,EAC/D;AAEA,MAAI,CAAC,KAAK,KAAM,QAAO;AAEvB,SACE,oBAAC,OAAI,WAAU,QAAO,WAAU,mBAAkB,IAAI,EAAE,SAAS,QAAQ,YAAY,SAAS,GAC3F,eAAK,MACR;AAEJ;AAEA,IAAM,gBAAwF,CAAC;AAAA,EAC7F;AAAA,EACA;AAAA,EACA;AAAW,MACX,oBAAC,WAAQ,OAAO,KAAK,WAAW,OAAK,MAC3B;AAAA,EAAC;AAAA;AAAA,IACC,IAAI;AAAA,MACF,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,YAAY;AAAA,IAAO;AAAA,IACrB,eAAa,aAAa,GAAG,UAAU,cAAc;AAAA,IAEpD;AAAA;AACH,GACF;AAKV,IAAM,aACJ,CAAC,eACD,CAAC,QAAgB,QACf,QAAQ,aAAa,GAAG,UAAU,IAAI,MAAM,KAAK,eAAe,MAAM;AAE1E,IAAM,iBAQD,CAAC,EAAE,MAAM,OAAO,MAAM,MAAM,SAAS,UAAU,OAAO,MACzD,oBAAC,WAAQ,OAAO,KAAK,WAAW,KAAK,OAAO,OAAK,MAAC,sBAAsB,CAAC,KAAK,SAC5E;AAAA,EAAC;AAAA;AAAA,IACC,MAAM,KAAK,QAAQ;AAAA,IACnB,SAAS,KAAK;AAAA,IACd;AAAA,IACA,aAAa;AAAA,IACb,QAAQ;AAAA,IACR,WAAU;AAAA,IACV,cAAY,KAAK,aAAa,KAAK;AAAA,IACnC,eAAa,OAAO,QAAQ,KAAK,IAAI,KAAK,UAAU;AAAA,IAEnD;AAAA;AAAA,MACD,oBAAC,UAAM,eAAK,OAAM;AAAA;AAAA;AACpB,GACF;AAKK,IAAM,kBAaR,CAAC;AAAA,EACJ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAW,MAAM;AACjB,QAAM,SAAS,WAAW,UAAU;AACpC,QAAM,SAAS,UAAU,YAAY;AAErC,QAAM,WAAW,KAAK,UAAW,UAAU,CAAC,KAAK;AAEjD,QAAM,kBACJ,UAAU,KAAK,eAAe,SAAS,KAAK,qBAAqB;AAEnE,MAAI,iBAAiB;AACnB,WACE,iCACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,OAAO;AAAA,UACP;AAAA,UACA,aAAa;AAAA,UACb;AAAA;AAAA,MACF;AAAA,MACC;AAAA,OACH;AAAA,EAEJ;AAEA,MAAI,KAAK,YAAY;AACnB,WAAO,oBAAC,iBAAc,MAAY,OAAO,KAAK,OAAO,YAAwB;AAAA,EAC/E;AAEA,QAAM,OAAO,UAAU,EAAE,MAAM,SAAS,UAAU,GAAG,cAAc,SAAS,CAAC;AAE7E,MAAI,UAAU;AACZ,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,aAAa;AAAA,QACb,gBAAa;AAAA,QACb,eAAa,OAAO,QAAQ,KAAK,IAAI,KAAK,UAAU;AAAA,QAEnD;AAAA;AAAA,UACD,oBAAC,UAAM,eAAK,OAAM;AAAA;AAAA;AAAA,IACpB;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/chunk-62UAI62O.js

@@ -0,0 +1,157 @@
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  fieldHeight,
+  fieldTextFieldStyles
+} from "./chunk-CGO452DC.js";
+import {
+  fieldRadiusPx
+} from "./chunk-GDN2LUTZ.js";
+import {
+  fieldEdge
+} from "./chunk-7FDU3FIN.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/data-views-search.tsx
+import CloseIcon from "@mui/icons-material/Close";
+import SearchIcon from "@mui/icons-material/Search";
+import IconButton from "@mui/material/IconButton/index.js";
+import InputAdornment from "@mui/material/InputAdornment/index.js";
+import TextField from "@mui/material/TextField/index.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SEARCH_DEBOUNCE_MS = 350;
+function boxWidth(theme, fill) {
+  return { flex: 1, minWidth: fill ? 0 : rem(theme, 200), maxWidth: fill ? "none" : rem(theme, 384) };
+}
+function useKeywordDraft(value, onChange) {
+  const [draft, setDraft] = useState(value);
+  const prev = useRef(value);
+  if (prev.current !== value) {
+    prev.current = value;
+    if (draft !== value) setDraft(value);
+  }
+  const commit = useRef(onChange);
+  useEffect(() => {
+    commit.current = onChange;
+  });
+  useEffect(() => {
+    if (draft === value) return void 0;
+    const timer = setTimeout(() => commit.current(draft), SEARCH_DEBOUNCE_MS);
+    return () => clearTimeout(timer);
+  }, [draft, value]);
+  const commitNow = useCallback(
+    (typed) => {
+      setDraft(typed);
+      if (typed !== value) commit.current(typed);
+    },
+    [value]
+  );
+  return { draft, setDraft, commitNow };
+}
+function InlineKeyword({
+  value,
+  onChange,
+  testId,
+  autoFocus,
+  onEscape,
+  fill = false
+}) {
+  const copy = useDataViewsCopy();
+  const { draft, setDraft, commitNow } = useKeywordDraft(value, onChange);
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      size: "small",
+      value: draft,
+      autoFocus,
+      onChange: (event) => setDraft(event.target.value),
+      onKeyDown: (event) => {
+        if (event.key === "Escape") {
+          event.preventDefault();
+          if (draft === "") onEscape?.();
+          setDraft("");
+          return;
+        }
+        if (event.key !== "Enter") return;
+        event.preventDefault();
+        commitNow(event.target instanceof HTMLInputElement ? event.target.value : draft);
+      },
+      placeholder: copy.search.placeholder,
+      inputProps: { "aria-label": copy.search.allColumnsLabel, "data-testid": testId },
+      InputProps: {
+        startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(SearchIcon, { sx: { fontSize: sxRem(16), color: "text.secondary" } }) }),
+        endAdornment: draft ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "small",
+            "aria-label": copy.search.clear,
+            "data-testid": testId ? `${testId}-clear` : void 0,
+            onClick: () => setDraft(""),
+            sx: { p: 0.25 },
+            children: /* @__PURE__ */ jsx(CloseIcon, { sx: { fontSize: sxRem(14) } })
+          }
+        ) }) : void 0
+      },
+      sx: (theme) => ({ ...boxWidth(theme, fill), ...fieldTextFieldStyles(theme) })
+    }
+  );
+}
+function CollapsedSearch({
+  active,
+  onOpen,
+  testId
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsxs(
+    IconButton,
+    {
+      size: "small",
+      onClick: onOpen,
+      "aria-label": copy.search.open,
+      "aria-expanded": false,
+      "data-testid": testId ? `${testId}-collapsed` : void 0,
+      sx: {
+        position: "relative",
+        width: fieldHeight,
+        height: fieldHeight,
+        border: 1,
+        borderRadius: fieldRadiusPx,
+        borderColor: (theme) => active ? theme.palette.primary.main : fieldEdge(theme),
+        color: active ? "primary.main" : "text.secondary",
+        bgcolor: active ? "action.selected" : "background.paper"
+      },
+      children: [
+        /* @__PURE__ */ jsx(SearchIcon, { sx: { fontSize: sxRem(18) } }),
+        active && /* @__PURE__ */ jsx(
+          default2,
+          {
+            component: "span",
+            sx: {
+              position: "absolute",
+              top: sxRem(2),
+              right: sxRem(2),
+              width: sxRem(6),
+              height: sxRem(6),
+              borderRadius: "50%",
+              bgcolor: "primary.main"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  InlineKeyword,
+  CollapsedSearch
+};
+//# sourceMappingURL=chunk-62UAI62O.js.map

package/dist/chunk-62UAI62O.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-search.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * THE INLINE BAR'S SEARCH — the one control on the toolbar that cannot be\n * guessed from an icon's position, which is why it is the LAST thing the\n * degradation ladder takes away. See `data-views-overflow.ts`.\n */\nimport CloseIcon from \"@mui/icons-material/Close\";\nimport SearchIcon from \"@mui/icons-material/Search\";\nimport IconButton from \"@mui/material/IconButton/index.js\";\nimport InputAdornment from \"@mui/material/InputAdornment/index.js\";\nimport TextField from \"@mui/material/TextField/index.js\";\nimport type { Theme } from \"@mui/material/styles/index.js\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { Box } from \"../../../mui/Box\";\nimport { fieldRadiusPx } from \"../../../tokens/field-radius\";\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { fieldHeight, fieldTextFieldStyles } from \"../../../tokens/field-height\";\nimport { fieldEdge } from \"../../../tokens/field-edge\";\nimport { rem, sxRem } from \"../../../tokens/relative\";\n\n/** How long the box waits after the last keystroke before it queries. */\nconst SEARCH_DEBOUNCE_MS = 350;\n\n/**\n * How wide the keyword box is allowed to be.\n *\n * The 200px floor is right while the box shares the row: a search you cannot\n * read six characters in is not a search. It is WRONG once the box has been\n * expanded out of its collapsed state on a narrow screen, where the cluster was\n * sized for a magnifier — the floor cannot be met there, so the row scrolled\n * sideways instead (154px of overhang at 320px). In that mode the box shrinks,\n * and if what is left would still be unreadable the bar hands it the whole\n * cluster instead (`searchTakeover`).\n */\nfunction boxWidth(theme: Theme, fill: boolean): { flex: number; minWidth: number | string; maxWidth: string } {\n  return { flex: 1, minWidth: fill ? 0 : rem(theme, 200), maxWidth: fill ? \"none\" : rem(theme, 384) };\n}\n\n/**\n * The box's own draft, and the two ways it reaches `onChange`.\n *\n * Extracted from {@link InlineKeyword} so the commit policy reads in one place\n * rather than split across a render body — and because it is where both halves\n * of a defect that lost searches outright had to be fixed.\n *\n * ## The debounce must not be keyed on the handler's identity\n *\n * Every caller builds `onChange` inline — the grid's own bar passes\n * `(value) => c.patch({ search: value })`, rebuilt on each render. Keying the\n * effect on it re-armed the timer on every render, and a busy admin page\n * re-renders more often than every 350ms as its queries land, so the timer\n * never survived to fire and the term was NEVER committed: measured in one\n * adopter as a dead `?q=` on a server-mode grid, where a 15-second loop pressed\n * Enter over and over and the URL never moved. So the handler is read through a\n * ref and the effect depends on `[draft, value]` alone.\n *\n * ## An immediate commit must read the BOX, not the draft\n *\n * A keystroke can land before React has processed the edit before it — a fast\n * typist, and every Playwright `fill()` followed by `press('Enter')`. `draft` is\n * then still the value from before the edit, and comparing THAT to `value` said\n * \"nothing changed\" and dropped the keystroke, leaving the term on screen with\n * an unfiltered list behind it. `commitNow` takes what the caller read off the\n * element and syncs the draft to it, which also keeps the box from being reset\n * to a stale draft by the next render when a host ignores the commit.\n */\nfunction useKeywordDraft(\n  value: string,\n  onChange: (next: string) => void,\n): { draft: string; setDraft: (next: string) => void; commitNow: (typed: string) => void } {\n  const [draft, setDraft] = useState(value);\n  const prev = useRef(value);\n  // An external change (a saved view, the URL, \"Limpar\") wins over the draft.\n  if (prev.current !== value) {\n    prev.current = value;\n    if (draft !== value) setDraft(value);\n  }\n  const commit = useRef(onChange);\n  useEffect(() => {\n    commit.current = onChange;\n  });\n  useEffect(() => {\n    if (draft === value) return undefined;\n    const timer = setTimeout(() => commit.current(draft), SEARCH_DEBOUNCE_MS);\n    return () => clearTimeout(timer);\n  }, [draft, value]);\n  const commitNow = useCallback(\n    (typed: string) => {\n      setDraft(typed);\n      if (typed !== value) commit.current(typed);\n    },\n    [value],\n  );\n  return { draft, setDraft, commitNow };\n}\n\n/**\n * The bar's keyword box.\n *\n * DEBOUNCED rather than committed on Enter/blur. In server mode every commit is\n * a round trip, and a box that only fires on blur makes the operator press a\n * key they were not told about to see any result at all — they type, nothing\n * happens, and the list looks broken. 350ms is long enough that a word costs\n * one query, short enough to feel like live search.\n *\n * `Escape` clears; the X clears without leaving the box. Both exist because\n * clearing by selecting-and-deleting is three gestures for the most common\n * thing anyone does to a search box.\n */\nexport function InlineKeyword({\n  value,\n  onChange,\n  testId,\n  autoFocus,\n  onEscape,\n  fill = false,\n}: {\n  value: string;\n  onChange: (value: string) => void;\n  testId?: string;\n  autoFocus?: boolean;\n  /** Called on Escape with the box already empty — the collapsed bar closes it. */\n  onEscape?: () => void;\n  /** Take whatever width there is, with no minimum — see {@link boxWidth}. */\n  fill?: boolean;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  const { draft, setDraft, commitNow } = useKeywordDraft(value, onChange);\n\n  return (\n    <TextField\n      size=\"small\"\n      value={draft}\n      autoFocus={autoFocus}\n      onChange={(event) => setDraft(event.target.value)}\n      onKeyDown={(event) => {\n        if (event.key === \"Escape\") {\n          event.preventDefault();\n          if (draft === \"\") onEscape?.();\n          setDraft(\"\");\n          return;\n        }\n        // Enter still commits IMMEDIATELY, ahead of the debounce — someone who\n        // presses it has decided, and waiting out the timer reads as a stall.\n        if (event.key !== \"Enter\") return;\n        event.preventDefault();\n        // The BOX, not `draft` — see {@link useKeywordDraft}.\n        commitNow(event.target instanceof HTMLInputElement ? event.target.value : draft);\n      }}\n      placeholder={copy.search.placeholder}\n      inputProps={{ \"aria-label\": copy.search.allColumnsLabel, \"data-testid\": testId }}\n      InputProps={{\n        startAdornment: (\n          <InputAdornment position=\"start\">\n            <SearchIcon sx={{ fontSize: sxRem(16), color: \"text.secondary\" }} />\n          </InputAdornment>\n        ),\n        endAdornment: draft ? (\n          <InputAdornment position=\"end\">\n            <IconButton\n              size=\"small\"\n              aria-label={copy.search.clear}\n              data-testid={testId ? `${testId}-clear` : undefined}\n              onClick={() => setDraft(\"\")}\n              sx={{ p: 0.25 }}\n            >\n              <CloseIcon sx={{ fontSize: sxRem(14) }} />\n            </IconButton>\n          </InputAdornment>\n        ) : undefined,\n      }}\n      // Takes the free space and gives it up first — step 3 of the ladder,\n      // which needs no flag because flex does it (see `computeSplit`). The\n      // corner is the theme's field radius, so the box matches the pills beside it.\n      sx={(theme) => ({ ...boxWidth(theme, fill), ...fieldTextFieldStyles(theme) })}\n    />\n  );\n}\n\n/**\n * Step 4 of the ladder: the search as a magnifier.\n *\n * Carries a dot when a search is APPLIED. Collapsing a control that is\n * currently filtering the list, with nothing saying so, is how an operator ends\n * up staring at 3 rows of 214 and reading it as missing data.\n */\nexport function CollapsedSearch({\n  active,\n  onOpen,\n  testId,\n}: {\n  active: boolean;\n  onOpen: () => void;\n  testId?: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <IconButton\n      size=\"small\"\n      onClick={onOpen}\n      aria-label={copy.search.open}\n      aria-expanded={false}\n      data-testid={testId ? `${testId}-collapsed` : undefined}\n      sx={{\n        position: \"relative\",\n        width: fieldHeight,\n        height: fieldHeight,\n        border: 1,\n        borderRadius: fieldRadiusPx,\n        borderColor: (theme) => (active ? theme.palette.primary.main : fieldEdge(theme)),\n        color: active ? \"primary.main\" : \"text.secondary\",\n        bgcolor: active ? \"action.selected\" : \"background.paper\",\n      }}\n    >\n      <SearchIcon sx={{ fontSize: sxRem(18) }} />\n      {active && (\n        <Box\n          component=\"span\"\n          sx={{\n            position: \"absolute\",\n            top: sxRem(2),\n            right: sxRem(2),\n            width: sxRem(6),\n            height: sxRem(6),\n            borderRadius: \"50%\",\n            bgcolor: \"primary.main\",\n          }}\n        />\n      )}\n    </IconButton>\n  );\n}\n\n"],"mappings":"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","names":["default"]}

package/dist/chunk-6BDYC4RA.js

@@ -0,0 +1,175 @@
+import {
+  BreadcrumbEntry
+} from "./chunk-5W4BLTDI.js";
+import {
+  breadcrumbsBarStyles,
+  sizeIconMap
+} from "./chunk-6CTPDNNX.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/navigation/Breadcrumbs/Breadcrumbs.tsx
+import ArrowForwardIos from "@mui/icons-material/ArrowForwardIos";
+import ChevronRight from "@mui/icons-material/ChevronRight";
+import NavigateNext from "@mui/icons-material/NavigateNext";
+import Box from "@mui/material/Box/index.js";
+import MuiBreadcrumbs from "@mui/material/Breadcrumbs/index.js";
+import { useTheme, styled } from "@mui/material/styles/index.js";
+import useMediaQuery from "@mui/material/useMediaQuery/index.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var StyledBreadcrumbs = styled(MuiBreadcrumbs, {
+  shouldForwardProp: (prop) => prop !== "size" && prop !== "color" && prop !== "visualStyle" && prop !== "elevation"
+})(
+  ({ theme, size, color, visualStyle, elevation = 0 }) => ({
+    ...breadcrumbsBarStyles({ theme, size, color, visualStyle, elevation })
+  })
+);
+var AnimatedSeparator = styled(Box)(() => ({
+  display: "flex",
+  alignItems: "center",
+  opacity: 0.6,
+  transition: "all 0.2s ease",
+  "&:hover": {
+    opacity: 1,
+    transform: "scale(1.1)"
+  }
+}));
+var getSeparator = (separatorType) => {
+  const separatorContent = (() => {
+    switch (separatorType) {
+      case "slash":
+        return "/";
+      case "arrow":
+        return /* @__PURE__ */ jsx(NavigateNext, { fontSize: "small" });
+      case "chevron":
+        return /* @__PURE__ */ jsx(ChevronRight, { fontSize: "small" });
+      case "dot":
+        return "\u2022";
+      case "pipe":
+        return "|";
+      default:
+        return /* @__PURE__ */ jsx(ArrowForwardIos, { sx: { fontSize: sxRem(12) } });
+    }
+  })();
+  return /* @__PURE__ */ jsx(AnimatedSeparator, { children: separatorContent });
+};
+var collapseItems = ({
+  items,
+  effectiveMaxItems,
+  collapseBehavior
+}) => {
+  if (items.length <= effectiveMaxItems) {
+    return { displayItems: items, collapsedItems: [] };
+  }
+  if (collapseBehavior === "menu") {
+    const firstItem = items[0];
+    const tail = items.slice(-(effectiveMaxItems - 2));
+    return {
+      displayItems: firstItem ? [firstItem, ...tail] : tail,
+      collapsedItems: items.slice(1, -(effectiveMaxItems - 2))
+    };
+  }
+  if (collapseBehavior === "ellipsis") {
+    const half = Math.floor(effectiveMaxItems / 2);
+    return {
+      displayItems: [
+        ...items.slice(0, half),
+        { label: "...", href: "#", isEllipsis: true },
+        ...items.slice(-half)
+      ],
+      collapsedItems: []
+    };
+  }
+  return { displayItems: items, collapsedItems: [] };
+};
+var BREADCRUMBS_DEFAULTS = {
+  variant: "default",
+  separatorType: "default",
+  maxItems: 8,
+  showHomeIcon: true,
+  size: "md",
+  color: "neutral",
+  elevation: 1,
+  collapseBehavior: "menu",
+  mobileMaxItems: 3
+};
+var resolveProps = (props) => ({
+  ...BREADCRUMBS_DEFAULTS,
+  ...Object.fromEntries(
+    Object.entries(props).filter(([, value]) => value !== void 0)
+  )
+});
+var Breadcrumbs = React.forwardRef(
+  (componentProps, ref) => {
+    const {
+      variant,
+      separatorType,
+      items,
+      separator,
+      maxItems,
+      showHomeIcon,
+      size,
+      color,
+      elevation,
+      collapseBehavior,
+      mobileMaxItems,
+      ariaLabel,
+      copy,
+      dataTestId,
+      ...props
+    } = resolveProps(componentProps);
+    const theme = useTheme();
+    const finalSeparator = separator || getSeparator(separatorType);
+    const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+    const iconSize = sizeIconMap[size];
+    const effectiveMaxItems = isMobile ? mobileMaxItems : maxItems;
+    const shouldCollapse = items.length > effectiveMaxItems;
+    const { displayItems, collapsedItems } = collapseItems({
+      items,
+      effectiveMaxItems,
+      collapseBehavior
+    });
+    return /* @__PURE__ */ jsx(
+      StyledBreadcrumbs,
+      {
+        ref,
+        separator: finalSeparator,
+        maxItems: shouldCollapse ? void 0 : effectiveMaxItems,
+        size,
+        color,
+        visualStyle: variant,
+        elevation,
+        "aria-label": ariaLabel || "breadcrumb navigation",
+        role: "navigation",
+        "data-testid": dataTestId || "breadcrumbs",
+        ...props,
+        children: displayItems.map((item, index) => /* @__PURE__ */ jsx(
+          BreadcrumbEntry,
+          {
+            copy,
+            item,
+            index,
+            itemCount: displayItems.length,
+            collapsedItems,
+            collapseBehavior,
+            separator: finalSeparator,
+            showHomeIcon,
+            iconSize,
+            size,
+            variant,
+            dataTestId
+          },
+          index
+        ))
+      }
+    );
+  }
+);
+Breadcrumbs.displayName = "Breadcrumbs";
+
+export {
+  Breadcrumbs
+};
+//# sourceMappingURL=chunk-6BDYC4RA.js.map