@12-apps/ui 6.11.0 → 6.11.1

package/dist/chunk-MQCUXRZA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { Box, FormHelperText } from '@mui/material';\nimport React, { forwardRef } from 'react';\n\nimport { withDefaults } from '../../../utils/withDefaults';\n\nimport type { RadioOption, RadioGroupProps } from './RadioGroup.types';\nimport {\n  ButtonRadios,\n  CardRadios,\n  DefaultRadios,\n  GroupLabel,\n  SegmentRadios,\n  testId,\n} from './RadioGroup.variants';\nimport type { VariantProps } from './RadioGroup.variants';\n\nconst DEFAULTS = {\n  variant: 'default',\n  color: 'primary',\n  size: 'md',\n  error: false,\n  glassLabel: false,\n  glow: false,\n  glass: false,\n  gradient: false,\n  direction: 'column',\n  showDescriptions: true,\n} satisfies Partial<RadioGroupProps>;\n\ntype ResolvedProps = RadioGroupProps & Required<Pick<RadioGroupProps, keyof typeof DEFAULTS>>;\n\nconst VARIANTS: Record<string, React.FC<VariantProps>> = {\n  cards: CardRadios,\n  buttons: ButtonRadios,\n  segments: SegmentRadios,\n  default: DefaultRadios,\n};\n\nexport const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>((props, ref) => {\n  const {\n    variant, color, size, options, label, error, helperText, glassLabel,\n    glow, glass, gradient, direction, showDescriptions, value, onChange, dataTestId,\n    ...rest\n  } = withDefaults(props, DEFAULTS) as ResolvedProps;\n\n  // One place that turns a click into the ChangeEvent MUI's onChange expects.\n  // The cards, buttons and segments variants each had this written out.\n  const handleSelect = (option: RadioOption) => {\n    if (option.disabled || !onChange) return;\n    const event = { target: { value: option.value } } as React.ChangeEvent<HTMLInputElement>;\n    onChange(event, option.value);\n  };\n\n  const Variant = VARIANTS[variant] ?? DefaultRadios;\n\n  return (\n    <Box data-testid={dataTestId}>\n      {label && (\n        <GroupLabel glass={glassLabel} error={error} dataTestId={dataTestId}>\n          {label}\n        </GroupLabel>\n      )}\n\n      <Variant\n        options={options}\n        value={value}\n        color={color}\n        size={size}\n        direction={direction}\n        showDescriptions={showDescriptions}\n        glass={glass}\n        gradient={gradient}\n        glow={glow}\n        dataTestId={dataTestId}\n        onSelect={handleSelect}\n        groupRef={ref}\n        onChange={onChange}\n        rest={rest}\n      />\n\n      {helperText && (\n        <FormHelperText\n          error={error}\n          sx={{ mt: 1 }}\n          data-testid={testId(dataTestId, 'helper-text')}\n        >\n          {helperText}\n        </FormHelperText>\n      )}\n    </Box>\n  );\n});\n\nRadioGroup.displayName = 'RadioGroup';\n"],"mappings":";;;;;;;;;;;;;AAAA,SAAS,KAAK,sBAAsB;AACpC,SAAgB,kBAAkB;AAuD9B,SAEI,KAFJ;AAxCJ,IAAM,WAAW;AAAA,EACf,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AAAA,EACN,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,kBAAkB;AACpB;AAIA,IAAM,WAAmD;AAAA,EACvD,OAAO;AAAA,EACP,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AACX;AAEO,IAAM,aAAa,WAA4C,CAAC,OAAO,QAAQ;AACpF,QAAM;AAAA,IACJ;AAAA,IAAS;AAAA,IAAO;AAAA,IAAM;AAAA,IAAS;AAAA,IAAO;AAAA,IAAO;AAAA,IAAY;AAAA,IACzD;AAAA,IAAM;AAAA,IAAO;AAAA,IAAU;AAAA,IAAW;AAAA,IAAkB;AAAA,IAAO;AAAA,IAAU;AAAA,IACrE,GAAG;AAAA,EACL,IAAI,aAAa,OAAO,QAAQ;AAIhC,QAAM,eAAe,CAAC,WAAwB;AAC5C,QAAI,OAAO,YAAY,CAAC,SAAU;AAClC,UAAM,QAAQ,EAAE,QAAQ,EAAE,OAAO,OAAO,MAAM,EAAE;AAChD,aAAS,OAAO,OAAO,KAAK;AAAA,EAC9B;AAEA,QAAM,UAAU,SAAS,OAAO,KAAK;AAErC,SACE,qBAAC,OAAI,eAAa,YACf;AAAA,aACC,oBAAC,cAAW,OAAO,YAAY,OAAc,YAC1C,iBACH;AAAA,IAGF;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,UAAU;AAAA,QACV;AAAA,QACA;AAAA;AAAA,IACF;AAAA,IAEC,cACC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,IAAI,EAAE,IAAI,EAAE;AAAA,QACZ,eAAa,OAAO,YAAY,aAAa;AAAA,QAE5C;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ,CAAC;AAED,WAAW,cAAc;","names":[]}

package/dist/chunk-MQJDMQJZ.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-MQJDMQJZ.js.map

package/dist/chunk-MQJDMQJZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-MTFCPPZ5.js

@@ -0,0 +1,28 @@
+// src/components/data-display/Table/Table.helpers.ts
+var TABLE_DEFAULTS = {
+  variant: "default",
+  stripeColor: "neutral",
+  glow: false,
+  pulse: false,
+  hoverable: false,
+  loading: false,
+  density: "normal",
+  stickyHeader: false,
+  selectable: false,
+  selectedRows: [],
+  sortable: false,
+  virtualScrolling: false,
+  rowHeight: 52,
+  overscan: 5,
+  responsive: false,
+  showColumnToggle: true
+};
+var definedProps = (props) => Object.fromEntries(
+  Object.entries(props).filter(([, value]) => value !== void 0)
+);
+
+export {
+  TABLE_DEFAULTS,
+  definedProps
+};
+//# sourceMappingURL=chunk-MTFCPPZ5.js.map

package/dist/chunk-MTFCPPZ5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Table/Table.helpers.ts"],"sourcesContent":["import type { TableProps } from './Table.types';\n\nexport const TABLE_DEFAULTS: Partial<TableProps> = {\n  variant: 'default',\n  stripeColor: 'neutral',\n  glow: false,\n  pulse: false,\n  hoverable: false,\n  loading: false,\n  density: 'normal',\n  stickyHeader: false,\n  selectable: false,\n  selectedRows: [],\n  sortable: false,\n  virtualScrolling: false,\n  rowHeight: 52,\n  overscan: 5,\n  responsive: false,\n  showColumnToggle: true,\n};\n\n// Strips explicitly-undefined props before the merge, so `prop={undefined}` still\n// falls back to the default as a destructuring default would. Eighteen separate\n// destructuring defaults were most of this component's branch count.\nexport const definedProps = (props: TableProps): Partial<TableProps> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, value]) => value !== undefined),\n  ) as Partial<TableProps>;\n\n// The container + styled table + optional header, shared by the loading, empty\n// and populated renders.\n"],"mappings":";AAEO,IAAM,iBAAsC;AAAA,EACjD,SAAS;AAAA,EACT,aAAa;AAAA,EACb,MAAM;AAAA,EACN,OAAO;AAAA,EACP,WAAW;AAAA,EACX,SAAS;AAAA,EACT,SAAS;AAAA,EACT,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,cAAc,CAAC;AAAA,EACf,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,WAAW;AAAA,EACX,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,kBAAkB;AACpB;AAKO,IAAM,eAAe,CAAC,UAC3B,OAAO;AAAA,EACL,OAAO,QAAQ,KAAK,EAAE,OAAO,CAAC,CAAC,EAAE,KAAK,MAAM,UAAU,MAAS;AACjE;","names":[]}

package/dist/chunk-MTGEJRE4.js

@@ -0,0 +1,34 @@
+// src/components/form/AddressAutocomplete/AddressAutocomplete.helpers.ts
+var MIN_QUERY_LENGTH = 2;
+var ADDRESS_AUTOCOMPLETE_DEFAULTS = {
+  variant: "outlined",
+  label: "Address",
+  placeholder: "Enter an address",
+  floating: false,
+  error: false,
+  disabled: false,
+  required: false,
+  fullWidth: true,
+  defaultValue: "",
+  getCurrentLocation: false
+};
+var definedProps = (props) => Object.fromEntries(
+  Object.entries(props).filter(([, value]) => value !== void 0)
+);
+var resolveAddressProps = (props) => ({ ...ADDRESS_AUTOCOMPLETE_DEFAULTS, ...definedProps(props) });
+var addressOptionLabel = (option) => {
+  if (typeof option === "string") return option;
+  return option.description || "";
+};
+var isSameAddressOption = (option, value) => {
+  if (typeof option === "string" || typeof value === "string") return option === value;
+  return option.place_id === value.place_id;
+};
+
+export {
+  MIN_QUERY_LENGTH,
+  resolveAddressProps,
+  addressOptionLabel,
+  isSameAddressOption
+};
+//# sourceMappingURL=chunk-MTGEJRE4.js.map

package/dist/chunk-MTGEJRE4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/AddressAutocomplete/AddressAutocomplete.helpers.ts"],"sourcesContent":["import type { AddressAutocompleteProps, AddressOptionValue } from './AddressAutocomplete.types';\n\n// Below this the field clears its options rather than querying Places.\nexport const MIN_QUERY_LENGTH = 2;\n\ntype DefaultedKeys =\n  | 'variant'\n  | 'label'\n  | 'placeholder'\n  | 'floating'\n  | 'error'\n  | 'disabled'\n  | 'required'\n  | 'fullWidth'\n  | 'defaultValue'\n  | 'getCurrentLocation';\n\nexport type ResolvedAddressProps = AddressAutocompleteProps &\n  Required<Pick<AddressAutocompleteProps, DefaultedKeys>>;\n\nconst ADDRESS_AUTOCOMPLETE_DEFAULTS: Pick<AddressAutocompleteProps, DefaultedKeys> = {\n  variant: 'outlined',\n  label: 'Address',\n  placeholder: 'Enter an address',\n  floating: false,\n  error: false,\n  disabled: false,\n  required: false,\n  fullWidth: true,\n  defaultValue: '',\n  getCurrentLocation: false,\n};\n\n// Strips explicitly-undefined props before the merge, so `prop={undefined}` still\n// falls back to the default exactly as a destructuring default would.\nconst definedProps = (props: AddressAutocompleteProps): Partial<AddressAutocompleteProps> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, value]) => value !== undefined),\n  ) as Partial<AddressAutocompleteProps>;\n\n// Applied as a merge rather than destructuring defaults, which would otherwise\n// put ten branches into the component's own complexity budget.\nexport const resolveAddressProps = (props: AddressAutocompleteProps): ResolvedAddressProps =>\n  ({ ...ADDRESS_AUTOCOMPLETE_DEFAULTS, ...definedProps(props) }) as ResolvedAddressProps;\n\nexport const addressOptionLabel = (option: AddressOptionValue): string => {\n  if (typeof option === 'string') return option;\n  return option.description || '';\n};\n\n// A string only ever equals the same string, so a mixed pair is never a match.\nexport const isSameAddressOption = (\n  option: AddressOptionValue,\n  value: AddressOptionValue,\n): boolean => {\n  if (typeof option === 'string' || typeof value === 'string') return option === value;\n  return option.place_id === value.place_id;\n};\n"],"mappings":";AAGO,IAAM,mBAAmB;AAiBhC,IAAM,gCAA+E;AAAA,EACnF,SAAS;AAAA,EACT,OAAO;AAAA,EACP,aAAa;AAAA,EACb,UAAU;AAAA,EACV,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,cAAc;AAAA,EACd,oBAAoB;AACtB;AAIA,IAAM,eAAe,CAAC,UACpB,OAAO;AAAA,EACL,OAAO,QAAQ,KAAK,EAAE,OAAO,CAAC,CAAC,EAAE,KAAK,MAAM,UAAU,MAAS;AACjE;AAIK,IAAM,sBAAsB,CAAC,WACjC,EAAE,GAAG,+BAA+B,GAAG,aAAa,KAAK,EAAE;AAEvD,IAAM,qBAAqB,CAAC,WAAuC;AACxE,MAAI,OAAO,WAAW,SAAU,QAAO;AACvC,SAAO,OAAO,eAAe;AAC/B;AAGO,IAAM,sBAAsB,CACjC,QACA,UACY;AACZ,MAAI,OAAO,WAAW,YAAY,OAAO,UAAU,SAAU,QAAO,WAAW;AAC/E,SAAO,OAAO,aAAa,MAAM;AACnC;","names":[]}

package/dist/chunk-MYHQU7WR.js

@@ -0,0 +1,57 @@
+import {
+  Alert
+} from "./chunk-GQ75VOPI.js";
+
+// src/components/data-display/CardKit/card-actions-context.tsx
+import { createContext, useCallback, useContext, useState } from "react";
+import { Snackbar } from "@mui/material";
+import { jsx, 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__ */ jsx(
+      Snackbar,
+      {
+        open: error !== null,
+        autoHideDuration: autoHideMs,
+        onClose: () => setError(null),
+        anchorOrigin: { vertical: "bottom", horizontal: "center" },
+        children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+          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;
+}
+
+export {
+  CardActionsProvider,
+  useCardActions
+};
+//# sourceMappingURL=chunk-MYHQU7WR.js.map

package/dist/chunk-MYHQU7WR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/CardKit/card-actions-context.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, useCallback, useContext, useState, type JSX, type ReactNode } from 'react';\n\nimport { Snackbar } from '@mui/material';\n\nimport { Alert } from '../Alert';\n\n/**\n * The ambient wiring a self-contained row/card menu needs, and nothing else.\n *\n * A menu that owns its own popups still needs three things it cannot know: the\n * tenant it is acting inside, what to do after a write lands, and somewhere to\n * put a failure. Passing those down through the grid, the layout and the card\n * is four props of drilling per entity; holding them in context is one.\n *\n * Kept deliberately SMALL — it is not an edit-dialog host. A menu that read its\n * dialogs from here would stop being portable, because the set of dialogs is\n * per-entity. What it may read is the three facts below.\n *\n * The provider renders ONE shared error snackbar, which is the whole reason the\n * error channel is here rather than per-menu: before it, every page carried its\n * own error alert and every menu had to find its page's.\n */\ninterface CardActionsValue {\n  /** The tenant every action in this subtree acts inside. */\n  tenantSlug: string;\n  /** Re-read the list after a write. */\n  onRefresh: () => void;\n  /** Surface a failed action's message (the shared snackbar). */\n  notifyError: (message: string) => void;\n}\n\nconst CardActionsContext = createContext<CardActionsValue | null>(null);\n\nexport function CardActionsProvider({\n  tenantSlug,\n  onRefresh,\n  errorTitle,\n  errorDismissLabel,\n  autoHideMs = 6_000,\n  children,\n}: {\n  tenantSlug: string;\n  onRefresh: () => void;\n  /**\n   * The snackbar's heading — required, no default.\n   *\n   * It is the one sentence this provider renders on its own, and a default\n   * would be the origin's language shipped as a finished-looking silence. The\n   * MESSAGE beside it comes from whatever failed, which is already the host's.\n   */\n  errorTitle: string;\n  /** The dismiss on that alert, which carries a glyph only. REQUIRED. */\n  errorDismissLabel: string;\n  /** How long the snackbar stays up. */\n  autoHideMs?: number;\n  children: ReactNode;\n}): JSX.Element {\n  const [error, setError] = useState<string | null>(null);\n  const notifyError = useCallback((message: string) => setError(message), []);\n\n  return (\n    <CardActionsContext.Provider value={{ tenantSlug, onRefresh, notifyError }}>\n      {children}\n      <Snackbar\n        open={error !== null}\n        autoHideDuration={autoHideMs}\n        onClose={() => setError(null)}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}\n      >\n        <span>\n          <Alert\n            variant=\"danger\"\n            title={errorTitle}\n            description={error ?? ''}\n            closable\n            closeLabel={errorDismissLabel}\n            onClose={() => setError(null)}\n            data-testid=\"card-action-error\"\n          />\n        </span>\n      </Snackbar>\n    </CardActionsContext.Provider>\n  );\n}\n\n/**\n * Read the tenant + refresh + error wiring.\n *\n * THROWS outside a provider rather than answering a null object, deliberately:\n * a menu whose `onRefresh` silently did nothing would leave the operator\n * looking at a stale row after a delete that worked, which reads as the delete\n * having failed. Failing at mount says where the provider is missing.\n */\nexport function useCardActions(): CardActionsValue {\n  const value = useContext(CardActionsContext);\n  if (!value) {\n    throw new Error('useCardActions must be used within a CardActionsProvider');\n  }\n  return value;\n}\n"],"mappings":";;;;;AAEA,SAAS,eAAe,aAAa,YAAY,gBAA0C;AAE3F,SAAS,gBAAgB;AA2DrB,SASM,KATN;AA9BJ,IAAM,qBAAqB,cAAuC,IAAI;AAE/D,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AACF,GAgBgB;AACd,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AACtD,QAAM,cAAc,YAAY,CAAC,YAAoB,SAAS,OAAO,GAAG,CAAC,CAAC;AAE1E,SACE,qBAAC,mBAAmB,UAAnB,EAA4B,OAAO,EAAE,YAAY,WAAW,YAAY,GACtE;AAAA;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,UAAU;AAAA,QAChB,kBAAkB;AAAA,QAClB,SAAS,MAAM,SAAS,IAAI;AAAA,QAC5B,cAAc,EAAE,UAAU,UAAU,YAAY,SAAS;AAAA,QAEzD,8BAAC,UACC;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,OAAO;AAAA,YACP,aAAa,SAAS;AAAA,YACtB,UAAQ;AAAA,YACR,YAAY;AAAA,YACZ,SAAS,MAAM,SAAS,IAAI;AAAA,YAC5B,eAAY;AAAA;AAAA,QACd,GACF;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAUO,SAAS,iBAAmC;AACjD,QAAM,QAAQ,WAAW,kBAAkB;AAC3C,MAAI,CAAC,OAAO;AACV,UAAM,IAAI,MAAM,0DAA0D;AAAA,EAC5E;AACA,SAAO;AACT;","names":[]}

package/dist/chunk-MZ7XU5HB.js

@@ -0,0 +1,78 @@
+import {
+  brandGradient,
+  initialsOf
+} from "./chunk-UAVVI7IP.js";
+
+// src/components/navigation/AppHeader/AppHeader.brand.tsx
+import { Box, useTheme } from "@mui/material";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var MARK_PX = { xs: 24, sm: 32, md: 40, lg: 48, xl: 56 };
+var INITIALS_RATIO = 0.4;
+function markSx(theme, { edge, round, showLogo, seed }) {
+  return {
+    width: edge,
+    height: edge,
+    flex: "0 0 auto",
+    overflow: "hidden",
+    borderRadius: round ? "50%" : "30%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    // Only the initials need the gradient; a logo covers it entirely, and
+    // painting it underneath would show at the corners of a transparent PNG.
+    backgroundImage: showLogo ? "none" : brandGradient(seed),
+    backgroundColor: showLogo ? theme.palette.action.hover : "transparent",
+    color: theme.palette.getContrastText(seed),
+    fontSize: Math.round(edge * INITIALS_RATIO),
+    fontWeight: 700,
+    lineHeight: 1,
+    letterSpacing: "0.02em",
+    userSelect: "none"
+  };
+}
+var AppHeaderBrand = ({
+  name,
+  logoUrl,
+  seedColor,
+  size = "md",
+  shape = "rounded",
+  className,
+  dataTestId = "app-header-brand"
+}) => {
+  const theme = useTheme();
+  const [broken, setBroken] = React.useState(false);
+  React.useEffect(() => setBroken(false), [logoUrl]);
+  const edge = MARK_PX[size];
+  const seed = seedColor || theme.palette.primary.main;
+  const showLogo = Boolean(logoUrl) && !broken;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className,
+      "data-testid": dataTestId,
+      role: "img",
+      "aria-label": name,
+      sx: markSx(theme, { edge, round: shape === "circle", showLogo, seed }),
+      children: showLogo ? /* @__PURE__ */ jsx(
+        Box,
+        {
+          component: "img",
+          src: logoUrl ?? void 0,
+          alt: "",
+          onError: () => setBroken(true),
+          "data-testid": `${dataTestId}-logo`,
+          sx: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
+        }
+      ) : /* @__PURE__ */ jsx(Box, { component: "span", "aria-hidden": true, "data-testid": `${dataTestId}-initials`, children: initialsOf(name) })
+    }
+  );
+};
+AppHeaderBrand.displayName = "AppHeaderBrand";
+var AppHeader_brand_default = AppHeaderBrand;
+
+export {
+  AppHeaderBrand,
+  AppHeader_brand_default
+};
+//# sourceMappingURL=chunk-MZ7XU5HB.js.map

package/dist/chunk-MZ7XU5HB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/AppHeader/AppHeader.brand.tsx"],"sourcesContent":["'use client';\n\nimport { Box, useTheme } from '@mui/material';\nimport type { Theme } from '@mui/material';\nimport React from 'react';\n\nimport type { SizeValue } from '../../../tokens/scales';\n\nimport { brandGradient, initialsOf } from './AppHeader.colors';\nimport type { AppHeaderBrandProps } from './AppHeader.types';\n\n/** The mark's edge, per house size step. */\nconst MARK_PX: Record<SizeValue, number> = { xs: 24, sm: 32, md: 40, lg: 48, xl: 56 };\n\n/** Initials are set at 40% of the mark so a two-letter pair never touches the edge. */\nconst INITIALS_RATIO = 0.4;\n\n/** The mark's box, lifted out of the component to keep it inside the complexity bar. */\nfunction markSx(\n  theme: Theme,\n  { edge, round, showLogo, seed }: { edge: number; round: boolean; showLogo: boolean; seed: string },\n): Record<string, unknown> {\n  return {\n    width: edge,\n    height: edge,\n    flex: '0 0 auto',\n    overflow: 'hidden',\n    borderRadius: round ? '50%' : '30%',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    // Only the initials need the gradient; a logo covers it entirely, and\n    // painting it underneath would show at the corners of a transparent PNG.\n    backgroundImage: showLogo ? 'none' : brandGradient(seed),\n    backgroundColor: showLogo ? theme.palette.action.hover : 'transparent',\n    color: theme.palette.getContrastText(seed),\n    fontSize: Math.round(edge * INITIALS_RATIO),\n    fontWeight: 700,\n    lineHeight: 1,\n    letterSpacing: '0.02em',\n    userSelect: 'none',\n  };\n}\n\n/**\n * The mark that opens the header: the logo when there is one, the name's\n * initials on a gradient derived from the brand colour when there is not.\n *\n * Both branches occupy the SAME box, so a header does not resize when a logo\n * arrives — or when one fails to load and the initials take over, which is the\n * case a plain `<img>` renders as a torn-page glyph beside the store's name.\n */\nexport const AppHeaderBrand: React.FC<AppHeaderBrandProps> = ({\n  name,\n  logoUrl,\n  seedColor,\n  size = 'md',\n  shape = 'rounded',\n  className,\n  dataTestId = 'app-header-brand',\n}) => {\n  const theme = useTheme();\n  const [broken, setBroken] = React.useState(false);\n  // Keyed on the URL so a store that swaps its logo gets a fresh attempt rather\n  // than inheriting the previous one's failure.\n  React.useEffect(() => setBroken(false), [logoUrl]);\n\n  const edge = MARK_PX[size];\n  const seed = seedColor || theme.palette.primary.main;\n  const showLogo = Boolean(logoUrl) && !broken;\n\n  return (\n    <Box\n      className={className}\n      data-testid={dataTestId}\n      // `role=\"img\"` + the name: the initials are a picture of the brand, not\n      // two letters a screen reader should spell out.\n      role=\"img\"\n      aria-label={name}\n      sx={markSx(theme, { edge, round: shape === 'circle', showLogo, seed })}\n    >\n      {showLogo ? (\n        <Box\n          component=\"img\"\n          src={logoUrl ?? undefined}\n          alt=\"\"\n          onError={() => setBroken(true)}\n          data-testid={`${dataTestId}-logo`}\n          sx={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}\n        />\n      ) : (\n        <Box component=\"span\" aria-hidden data-testid={`${dataTestId}-initials`}>\n          {initialsOf(name)}\n        </Box>\n      )}\n    </Box>\n  );\n};\n\nAppHeaderBrand.displayName = 'AppHeaderBrand';\n\nexport default AppHeaderBrand;\n"],"mappings":";;;;;;AAEA,SAAS,KAAK,gBAAgB;AAE9B,OAAO,WAAW;AA8EV;AAtER,IAAM,UAAqC,EAAE,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,GAAG;AAGpF,IAAM,iBAAiB;AAGvB,SAAS,OACP,OACA,EAAE,MAAM,OAAO,UAAU,KAAK,GACL;AACzB,SAAO;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,UAAU;AAAA,IACV,cAAc,QAAQ,QAAQ;AAAA,IAC9B,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA;AAAA;AAAA,IAGhB,iBAAiB,WAAW,SAAS,cAAc,IAAI;AAAA,IACvD,iBAAiB,WAAW,MAAM,QAAQ,OAAO,QAAQ;AAAA,IACzD,OAAO,MAAM,QAAQ,gBAAgB,IAAI;AAAA,IACzC,UAAU,KAAK,MAAM,OAAO,cAAc;AAAA,IAC1C,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,YAAY;AAAA,EACd;AACF;AAUO,IAAM,iBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AAAA,EACA,aAAa;AACf,MAAM;AACJ,QAAM,QAAQ,SAAS;AACvB,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,KAAK;AAGhD,QAAM,UAAU,MAAM,UAAU,KAAK,GAAG,CAAC,OAAO,CAAC;AAEjD,QAAM,OAAO,QAAQ,IAAI;AACzB,QAAM,OAAO,aAAa,MAAM,QAAQ,QAAQ;AAChD,QAAM,WAAW,QAAQ,OAAO,KAAK,CAAC;AAEtC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MAGb,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,IAAI,OAAO,OAAO,EAAE,MAAM,OAAO,UAAU,UAAU,UAAU,KAAK,CAAC;AAAA,MAEpE,qBACC;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,KAAK,WAAW;AAAA,UAChB,KAAI;AAAA,UACJ,SAAS,MAAM,UAAU,IAAI;AAAA,UAC7B,eAAa,GAAG,UAAU;AAAA,UAC1B,IAAI,EAAE,OAAO,QAAQ,QAAQ,QAAQ,WAAW,SAAS,SAAS,QAAQ;AAAA;AAAA,MAC5E,IAEA,oBAAC,OAAI,WAAU,QAAO,eAAW,MAAC,eAAa,GAAG,UAAU,aACzD,qBAAW,IAAI,GAClB;AAAA;AAAA,EAEJ;AAEJ;AAEA,eAAe,cAAc;AAE7B,IAAO,0BAAQ;","names":[]}

package/dist/chunk-MZXZIOSF.js

@@ -0,0 +1,255 @@
+import {
+  breadcrumbLinkStyles
+} from "./chunk-V3QBKFKP.js";
+
+// src/components/navigation/Breadcrumbs/BreadcrumbEntry.tsx
+import Home from "@mui/icons-material/Home";
+import MoreHoriz from "@mui/icons-material/MoreHoriz";
+import { alpha, Box, Fade, Link, Tooltip, Typography } from "@mui/material";
+import { styled } from "@mui/material";
+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: size === "sm" ? "0.875rem" : size === "lg" ? "1.125rem" : "1rem",
+  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: size === "lg" ? "1rem" : size === "sm" ? "0.75rem" : "0.875rem",
+    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" ? "rgba(17, 24, 39, 0.95)" : "rgba(255, 255, 255, 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-MZXZIOSF.js.map

package/dist/chunk-MZXZIOSF.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 { alpha, Box, Fade, Link, Tooltip, Typography } from '@mui/material';\nimport { styled } from '@mui/material';\nimport React from 'react';\n\nimport { breadcrumbLinkStyles } from './Breadcrumbs.styles';\nimport type { BreadcrumbItem } from './Breadcrumbs.types';\nimport type { BreadcrumbCopy } from '../../../copy';\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: size === 'sm' ? '0.875rem' : size === 'lg' ? '1.125rem' : '1rem',\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: size === 'lg' ? '1rem' : size === 'sm' ? '0.75rem' : '0.875rem',\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            ? 'rgba(17, 24, 39, 0.95)'\n            : 'rgba(255, 255, 255, 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":"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","names":[]}