@persona/design-system 0.1.8 → 0.2.0

package/dist/AttributeGrid.d.cts

@@ -1,40 +0,0 @@
-import { AttributeSize, TableLayoutValue } from "./Attribute.cjs";
-import { ReactNode } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
-
-//#region components/Attribute/AttributeGrid.d.ts
-type AttributeGridProps = {
-  children?: ReactNode;
-  /**
-   * Sets the font size and spacing density for all child Attributes.
-   * Defaults to `'md'`.
-   */
-  size?: AttributeSize;
-} & ({
-  /**
-   * Set a fixed number of columns for the grid.
-   */
-  colCount?: number;
-  /**
-   * Display attributes in a stacked list with label first then value.
-   */
-  horizontal?: boolean;
-  table?: never;
-} | {
-  /**
-   * Display attributes in a fixed tabular layout.
-   * Set to `full-width` to expand to full width of container.
-   */
-  table?: TableLayoutValue;
-  colCount?: never;
-  horizontal?: never;
-});
-declare const AttributeGrid: ({
-  children,
-  horizontal,
-  table,
-  size,
-  ...props
-}: AttributeGridProps) => _$react_jsx_runtime0.JSX.Element;
-export = AttributeGrid;
-//# sourceMappingURL=AttributeGrid.d.cts.map

package/dist/Badge-ADPloFsd.cjs

@@ -1,38 +0,0 @@
-const require_chunk = require("./chunk-CKQMccvm.cjs");
-const require_Sticker = require("./Sticker-CIoseh9f.cjs");
-let styled_components = require("styled-components");
-styled_components = require_chunk.__toESM(styled_components);
-let react_jsx_runtime = require("react/jsx-runtime");
-//#region components/Badge/Badge.tsx
-const Badge = (0, styled_components.default)(({ variant, ...rest }) => {
-	let variantProp;
-	switch (variant) {
-		case "alert":
-			variantProp = "danger";
-			break;
-		case "active":
-			variantProp = "purple";
-			break;
-		default: variantProp = "grey";
-	}
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Sticker.Sticker, {
-		...rest,
-		variant: variantProp
-	});
-})(() => styled_components.css`
-    min-width: 16px;
-    text-align: center;
-    border-radius: 100px;
-    span {
-      font-size: 10px;
-    }
-  `);
-//#endregion
-Object.defineProperty(exports, "Badge", {
-	enumerable: true,
-	get: function() {
-		return Badge;
-	}
-});
-
-//# sourceMappingURL=Badge-ADPloFsd.cjs.map

package/dist/Badge-ADPloFsd.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Badge-ADPloFsd.cjs","names":["Sticker"],"sources":["../components/Badge/Badge.tsx"],"sourcesContent":["import styled, { css, type DefaultTheme, type StyledComponent } from 'styled-components';\n\nimport Sticker, { type StickerProps } from 'design-system/components/Sticker';\n\nexport interface BadgeProps {\n  /**\n   * When rendered on a secondary background (e.g. inside a panel or card with\n   * a grey fill), set this to true so the component adjusts its colours\n   * appropriately for certain variants.\n   */\n  onSecondaryBackground?: boolean;\n  /**\n   * Semantic colour variant for the badge.\n   *\n   * - `basic` – neutral grey, for informational counts or labels (default).\n   * - `active` – purple, to highlight an active or selected state.\n   * - `alert` – red/danger, to draw attention to errors or urgent counts.\n   *\n   * @defaultValue 'basic'\n   */\n  variant?: 'alert' | 'active' | 'basic';\n}\n\nexport const Badge = styled(({ variant, ...rest }: BadgeProps) => {\n  let variantProp: StickerProps['variant'];\n  switch (variant) {\n    case 'alert':\n      variantProp = 'danger';\n      break;\n    case 'active':\n      variantProp = 'purple';\n      break;\n    case 'basic':\n    default:\n      variantProp = 'grey';\n  }\n\n  return <Sticker {...rest} variant={variantProp} />;\n})<BadgeProps>(\n  () => css`\n    min-width: 16px;\n    text-align: center;\n    border-radius: 100px;\n    span {\n      font-size: 10px;\n    }\n  `,\n) as StyledComponent<'span', DefaultTheme, BadgeProps, never>;\n/**\n * The type workaround above makes the correct types available for Badge.\n * Having duplicate prop names between Badge and Sticker seems to cause some oddities.\n *\n * We insist on making this a styled component so the component itself can be targeted in styles.\n * See: https://styled-components.com/docs/advanced#referring-to-other-components\n */\n\nexport default Badge;\n"],"mappings":";;;;;;AAuBA,MAAa,SAAA,GAAA,kBAAA,UAAgB,EAAE,SAAS,GAAG,WAAuB;CAChE,IAAI;AACJ,SAAQ,SAAR;EACE,KAAK;AACH,iBAAc;AACd;EACF,KAAK;AACH,iBAAc;AACd;EAEF,QACE,eAAc;;AAGlB,QAAO,iBAAA,GAAA,kBAAA,KAACA,gBAAAA,SAAD;EAAS,GAAI;EAAM,SAAS;EAAe,CAAA;EAClD,OACM,kBAAA,GAAG;;;;;;;IAQV"}

package/dist/Badge.d.cts

@@ -1,25 +0,0 @@
-import { DefaultTheme, StyledComponent } from "styled-components";
-
-//#region components/Badge/Badge.d.ts
-interface BadgeProps {
-  /**
-   * When rendered on a secondary background (e.g. inside a panel or card with
-   * a grey fill), set this to true so the component adjusts its colours
-   * appropriately for certain variants.
-   */
-  onSecondaryBackground?: boolean;
-  /**
-   * Semantic colour variant for the badge.
-   *
-   * - `basic` – neutral grey, for informational counts or labels (default).
-   * - `active` – purple, to highlight an active or selected state.
-   * - `alert` – red/danger, to draw attention to errors or urgent counts.
-   *
-   * @defaultValue 'basic'
-   */
-  variant?: 'alert' | 'active' | 'basic';
-}
-declare const Badge: StyledComponent<"span", DefaultTheme, BadgeProps, never>;
-//#endregion
-export { Badge, Badge as default, BadgeProps };
-//# sourceMappingURL=Badge.d.cts.map

package/dist/Banner.d.cts

@@ -1,48 +0,0 @@
-import { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
-
-//#region components/Banner/Banner.d.ts
-interface BannerProps extends ComponentPropsWithoutRef<'div'> {
-  children: ReactNode;
-  /**
-   * Semantic colour theme for the banner background.
-   *
-   * - `informational` – purple, for general tips or announcements (default).
-   * - `success` – green, for confirmations or completed actions.
-   * - `warning` – yellow, for non-blocking cautions.
-   * - `alert` – red, for errors or destructive warnings.
-   *
-   * @defaultValue 'informational'
-   */
-  variant?: 'informational' | 'success' | 'warning' | 'alert';
-  /**
-   * Action affordance rendered to the right of the content.
-   *
-   * - Pass a `string` together with `onClose` to show a text button that calls `onClose`.
-   * - Pass a `ReactElement` to render a fully custom action (e.g. a link or icon button).
-   *   In this case `onClose` is ignored for the action slot; wire dismissal inside the element.
-   */
-  action?: string | ReactElement;
-  /**
-   * Called when the user clicks the close (×) button.
-   * When provided and `action` is absent, a close icon button is rendered automatically.
-   * When `action` is a string, clicking that string-labelled button calls this handler.
-   */
-  onClose?: VoidFunction;
-  /**
-   * When true, the content area stretches to fill the full banner width.
-   * Useful when `children` contains a layout that needs to span the entire space.
-   */
-  extendContentWidth?: boolean;
-}
-declare const Banner: ({
-  children,
-  variant,
-  action,
-  onClose,
-  extendContentWidth,
-  ...elemProps
-}: BannerProps) => _$react_jsx_runtime0.JSX.Element;
-//#endregion
-export { Banner, Banner as default, BannerProps };
-//# sourceMappingURL=Banner.d.cts.map

package/dist/Breadcrumb-VH-Mwo-M.d.cts

@@ -1,44 +0,0 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
-
-//#region components/Breadcrumbs/Breadcrumb.d.ts
-type BreadcrumbSize = 'md' | 'lg';
-type BreadcrumbHeadingAs = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-type BreadcrumbProps = {
-  label: string;
-  size?: BreadcrumbSize;
-  current?: boolean;
-  /**
-   * Overrides the heading element rendered for the current crumb. Defaults to `h1`; use `h2` or
-   * lower when the page already has an `h1`.
-   */
-  headingAs?: BreadcrumbHeadingAs;
-  showCopyAction?: boolean;
-  copyValue?: string;
-  copyTooltipLabel?: string; /** Internal dashboard path (e.g. `/cases`). Passed to the router `Link` as `to`. */
-  href?: string;
-  /**
-   * Activates a non-current crumb without a route change, for trails that navigate in-place (e.g.
-   * a control panel drilling into a sub-panel). Ignored when `href` is set.
-   */
-  onClick?: () => void;
-  onEdit?: (newLabel: string) => void;
-  editMaxLength?: number;
-  onCopy?: () => void;
-};
-declare const Breadcrumb: ({
-  label,
-  size,
-  current,
-  headingAs,
-  showCopyAction,
-  copyValue,
-  copyTooltipLabel,
-  href,
-  onClick,
-  onEdit,
-  editMaxLength,
-  onCopy
-}: BreadcrumbProps) => _$react_jsx_runtime0.JSX.Element;
-//#endregion
-export { BreadcrumbSize as i, BreadcrumbHeadingAs as n, BreadcrumbProps as r, Breadcrumb as t };
-//# sourceMappingURL=Breadcrumb-VH-Mwo-M.d.cts.map

package/dist/Breadcrumb.d.cts

@@ -1,2 +0,0 @@
-import { i as BreadcrumbSize, n as BreadcrumbHeadingAs, r as BreadcrumbProps, t as Breadcrumb } from "./Breadcrumb-VH-Mwo-M.cjs";
-export { BreadcrumbHeadingAs, BreadcrumbProps, BreadcrumbSize, Breadcrumb as default };

package/dist/Breadcrumbs-BBREROrw.d.cts

@@ -1,26 +0,0 @@
-import { i as BreadcrumbSize, n as BreadcrumbHeadingAs, r as BreadcrumbProps } from "./Breadcrumb-VH-Mwo-M.cjs";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
-
-//#region components/Breadcrumbs/Breadcrumbs.d.ts
-type BreadcrumbsItemProps = Omit<BreadcrumbProps, 'size' | 'current' | 'headingAs'>;
-type BreadcrumbsProps = {
-  items: BreadcrumbsItemProps[];
-  size?: BreadcrumbSize;
-  /**
-   * Overrides the heading element rendered for the current crumb. Defaults to `h1`; use `h2` or
-   * lower when the page already has an `h1`.
-   */
-  headingAs?: BreadcrumbHeadingAs;
-  'aria-label'?: string;
-  className?: string;
-};
-declare const Breadcrumbs: ({
-  items,
-  size,
-  headingAs,
-  "aria-label": ariaLabel,
-  className
-}: BreadcrumbsProps) => _$react_jsx_runtime0.JSX.Element | null;
-//#endregion
-export { BreadcrumbsItemProps as n, BreadcrumbsProps as r, Breadcrumbs as t };
-//# sourceMappingURL=Breadcrumbs-BBREROrw.d.cts.map

package/dist/Breadcrumbs-CDZ_Mrcg.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Breadcrumbs-CDZ_Mrcg.mjs","names":["Input"],"sources":["../components/Breadcrumbs/Breadcrumb.tsx","../components/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import { type ChangeEvent, useEffect, useRef, useState } from 'react';\nimport { Link } from 'react-router-dom';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { CopyIcon, EditIcon } from '@persona/icons';\nimport { IconButton } from 'design-system/components/Button';\nimport Input from 'design-system/components/Input';\nimport { HStack } from 'design-system/components/Stack';\nimport { Paragraph } from 'design-system/components/Text';\nimport Tooltip from 'design-system/components/Tooltip';\nimport { focusOutline } from 'design-system/mixins/focus';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nexport type BreadcrumbSize = 'md' | 'lg';\n\nexport type BreadcrumbHeadingAs = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\nconst COPY_TOOLTIP_LABEL = 'Copy ID';\nconst DEFAULT_EDIT_MAX_LENGTH = 100;\n\nexport type BreadcrumbProps = {\n  label: string;\n  size?: BreadcrumbSize;\n  current?: boolean;\n  /**\n   * Overrides the heading element rendered for the current crumb. Defaults to `h1`; use `h2` or\n   * lower when the page already has an `h1`.\n   */\n  headingAs?: BreadcrumbHeadingAs;\n  showCopyAction?: boolean;\n  copyValue?: string;\n  copyTooltipLabel?: string;\n  /** Internal dashboard path (e.g. `/cases`). Passed to the router `Link` as `to`. */\n  href?: string;\n  /**\n   * Activates a non-current crumb without a route change, for trails that navigate in-place (e.g.\n   * a control panel drilling into a sub-panel). Ignored when `href` is set.\n   */\n  onClick?: () => void;\n  onEdit?: (newLabel: string) => void;\n  editMaxLength?: number;\n  onCopy?: () => void;\n};\n\nconst LABEL_ACTION_GAP = Spacing[2];\nconst ACTION_BUTTON_GAP = Spacing[1];\n\nconst CrumbRow = styled(HStack)`\n  align-items: center;\n  min-width: 0;\n`;\n\nconst crumbLayoutStyles = (size: BreadcrumbSize) => css`\n  display: inline-flex;\n  align-items: center;\n  min-width: 0;\n  min-height: ${({ theme }) => theme.element.height.xs};\n  ${\n    size === 'lg'\n      ? css`\n        font-size: ${({ theme }) => theme.text.paragraph.lg.fontSize};\n        line-height: ${({ theme }) => theme.text.paragraph.lg.lineHeight};\n      `\n      : css``\n  };\n`;\n\nconst editInputTextStyles = (size: BreadcrumbSize, current: boolean) => {\n  if (current) {\n    return size === 'lg' ? paragraphMixins.lgBold : paragraphMixins.mdBold;\n  }\n  return size === 'lg' ? paragraphMixins.lg : paragraphMixins.md;\n};\n\nconst ancestorCrumbStyles = css<{ $size: BreadcrumbSize }>`\n  ${paragraphMixins.md};\n  color: ${({ theme }) => theme.color.text.secondary};\n  text-decoration: none;\n  transition: color ${TransitionDuration.ExtraFast} ease-out;\n  ${focusOutline}\n  ${({ $size }) => crumbLayoutStyles($size)}\n\n  &:hover {\n    color: ${({ theme }) => theme.color.text.primary};\n  }\n`;\n\nconst AncestorNavLink = styled(Link)<{ $size: BreadcrumbSize }>`\n  ${ancestorCrumbStyles}\n`;\n\nconst AncestorNavButton = styled.button<{ $size: BreadcrumbSize }>`\n  ${ancestorCrumbStyles}\n  padding: 0;\n  border: none;\n  background: none;\n  cursor: pointer;\n`;\n\nconst InlineEditInput = styled(Input)<{\n  $size: BreadcrumbSize;\n  $current: boolean;\n  $editMinWidth?: number;\n}>`\n  margin: 0;\n  padding: 2px 10px;\n  width: auto;\n  max-width: 100%;\n  min-width: ${({ $editMinWidth }) => ($editMinWidth != null ? `${$editMinWidth}px` : '0')};\n  field-sizing: content;\n  display: inline-block;\n  ${({ $size, $current }) => editInputTextStyles($size, $current)};\n  background-color: ${({ theme }) => theme.color.background.primary};\n  color: ${({ theme }) => theme.color.text.primary};\n\n  &:not(:focus) {\n    border-color: transparent;\n  }\n\n  &:hover:not(:disabled) {\n    border-style: solid;\n  }\n`;\n\nconst CurrentLabel = styled(Paragraph)<{ $size: BreadcrumbSize }>`\n  margin: 0;\n  ${({ $size }) => crumbLayoutStyles($size)}\n`;\n\nconst copyToClipboard = async (value: string): Promise<boolean> => {\n  try {\n    if (navigator.clipboard?.writeText == null) {\n      return false;\n    }\n\n    await navigator.clipboard.writeText(value);\n    return true;\n  } catch {\n    return false;\n  }\n};\n\nconst BreadcrumbCopyButton = ({\n  copyValue,\n  copyTooltipLabel = COPY_TOOLTIP_LABEL,\n  onCopy,\n}: {\n  copyValue: string;\n  copyTooltipLabel?: string;\n  onCopy?: () => void;\n}) => {\n  const [tooltipOpen, setTooltipOpen] = useState(false);\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = async () => {\n    const success = await copyToClipboard(copyValue);\n    if (!success) {\n      return;\n    }\n\n    setCopied(true);\n    setTooltipOpen(true);\n    onCopy?.();\n\n    window.setTimeout(() => {\n      setTooltipOpen(false);\n      window.setTimeout(() => setCopied(false), 200);\n    }, 1000);\n  };\n\n  const handleMouseEnter = () => {\n    if (!copied) {\n      setTooltipOpen(true);\n    }\n  };\n\n  const handleMouseLeave = () => {\n    if (!copied) {\n      setTooltipOpen(false);\n    }\n  };\n\n  const trigger = (\n    <span onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>\n      <IconButton\n        type='button'\n        size='sm'\n        aria-label={`Copy ${copyValue}`}\n        onClick={(event) => {\n          event.preventDefault();\n          event.stopPropagation();\n          void handleCopy();\n        }}\n      >\n        <CopyIcon />\n      </IconButton>\n    </span>\n  );\n\n  return (\n    <Tooltip\n      trigger={trigger}\n      open={tooltipOpen}\n      side='top'\n      sideOffset={4}\n      size='sm'\n      contentAlignment='center'\n      interactive={false}\n      hideArrow\n      portal={false}\n    >\n      {copied ? 'Copied!' : copyTooltipLabel}\n    </Tooltip>\n  );\n};\n\nconst Breadcrumb = ({\n  label,\n  size = 'md',\n  current = false,\n  headingAs = 'h1',\n  showCopyAction = false,\n  copyValue,\n  copyTooltipLabel,\n  href,\n  onClick,\n  onEdit,\n  editMaxLength = DEFAULT_EDIT_MAX_LENGTH,\n  onCopy,\n}: BreadcrumbProps) => {\n  const [isEditing, setIsEditing] = useState(false);\n  const [editValue, setEditValue] = useState(label);\n  const [editMinWidth, setEditMinWidth] = useState<number | undefined>();\n  const editInputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (!isEditing) {\n      setEditValue(label);\n    }\n  }, [isEditing, label]);\n\n  useEffect(() => {\n    if (!isEditing) {\n      setEditMinWidth(undefined);\n      return;\n    }\n\n    const input = editInputRef.current;\n    if (input == null) {\n      return;\n    }\n\n    setEditMinWidth(input.offsetWidth);\n    input.focus();\n    input.select();\n  }, [isEditing]);\n\n  const commitEdit = () => {\n    if (!isEditing) {\n      return;\n    }\n\n    setIsEditing(false);\n    if (editValue !== label) {\n      onEdit?.(editValue);\n    }\n  };\n\n  const inlineActions = !isEditing && (showCopyAction || onEdit) && (\n    <HStack spacing={ACTION_BUTTON_GAP} align='center'>\n      {onEdit && (\n        <IconButton\n          type='button'\n          size='sm'\n          aria-label={`Edit ${label}`}\n          onClick={(event) => {\n            event.preventDefault();\n            event.stopPropagation();\n            setIsEditing(true);\n          }}\n        >\n          <EditIcon />\n        </IconButton>\n      )}\n      {showCopyAction && copyValue != null && (\n        <BreadcrumbCopyButton\n          copyValue={copyValue}\n          copyTooltipLabel={copyTooltipLabel}\n          onCopy={onCopy}\n        />\n      )}\n    </HStack>\n  );\n\n  if (isEditing) {\n    return (\n      <CrumbRow spacing={LABEL_ACTION_GAP}>\n        <InlineEditInput\n          ref={editInputRef}\n          $size={size}\n          $current={current}\n          $editMinWidth={editMinWidth}\n          size='md'\n          aria-label={`Edit ${label}`}\n          maxLength={editMaxLength}\n          value={editValue}\n          onChange={(event: ChangeEvent<HTMLInputElement>) => setEditValue(event.target.value)}\n          onBlur={commitEdit}\n          onKeyDown={(event) => {\n            if (event.key === 'Enter') {\n              event.preventDefault();\n              commitEdit();\n            }\n            if (event.key === 'Escape') {\n              setEditValue(label);\n              setIsEditing(false);\n            }\n          }}\n        />\n      </CrumbRow>\n    );\n  }\n\n  if (current) {\n    return (\n      <CrumbRow spacing={LABEL_ACTION_GAP}>\n        <CurrentLabel\n          $size={size}\n          size={size === 'lg' ? 'lg' : 'md'}\n          weight='bold'\n          color='primary'\n          as={headingAs}\n        >\n          {label}\n        </CurrentLabel>\n        {inlineActions}\n      </CrumbRow>\n    );\n  }\n\n  if (href == null && onClick != null) {\n    return (\n      <CrumbRow spacing={LABEL_ACTION_GAP}>\n        <AncestorNavButton type='button' onClick={onClick} $size={size}>\n          {label}\n        </AncestorNavButton>\n        {inlineActions}\n      </CrumbRow>\n    );\n  }\n\n  return (\n    <CrumbRow spacing={LABEL_ACTION_GAP}>\n      <AncestorNavLink to={href ?? ''} $size={size}>\n        {label}\n      </AncestorNavLink>\n      {inlineActions}\n    </CrumbRow>\n  );\n};\n\nexport default Breadcrumb;\n","import styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { intersperse } from 'design-system/lib/intersperse';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nimport Breadcrumb, {\n  type BreadcrumbHeadingAs,\n  type BreadcrumbProps,\n  type BreadcrumbSize,\n} from './Breadcrumb';\n\nexport type BreadcrumbsItemProps = Omit<BreadcrumbProps, 'size' | 'current' | 'headingAs'>;\n\nexport type BreadcrumbsProps = {\n  items: BreadcrumbsItemProps[];\n  size?: BreadcrumbSize;\n  /**\n   * Overrides the heading element rendered for the current crumb. Defaults to `h1`; use `h2` or\n   * lower when the page already has an `h1`.\n   */\n  headingAs?: BreadcrumbHeadingAs;\n  'aria-label'?: string;\n  className?: string;\n};\n\nconst BreadcrumbList = styled.ol`\n  max-width: 100%;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  min-width: 0;\n`;\n\nconst BreadcrumbListItem = styled.li`\n  display: flex;\n  align-items: center;\n  min-width: 0;\n`;\n\nconst Separator = styled.span<{ $size: BreadcrumbSize }>`\n  padding: 0 ${Spacing[2]};\n  color: ${({ theme }) => theme.color.text.tertiary};\n  user-select: none;\n  ${({ $size }) => ($size === 'lg' ? paragraphMixins.lg : paragraphMixins.md)};\n`;\n\nexport const Breadcrumbs = ({\n  items,\n  size = 'md',\n  headingAs = 'h1',\n  'aria-label': ariaLabel = 'Breadcrumbs',\n  className,\n}: BreadcrumbsProps) => {\n  if (items.length === 0) {\n    return null;\n  }\n\n  const crumbNodes = items.map((item, index) => {\n    const isCurrent = index === items.length - 1;\n\n    return (\n      <BreadcrumbListItem\n        key={`${item.label}-${index}`}\n        aria-current={isCurrent ? 'page' : undefined}\n      >\n        <Breadcrumb {...item} size={size} current={isCurrent} headingAs={headingAs} />\n      </BreadcrumbListItem>\n    );\n  });\n\n  const listItems = intersperse(crumbNodes, (separatorIndex: number) => (\n    <BreadcrumbListItem key={`separator-${separatorIndex}`} aria-hidden='true'>\n      <Separator $size={size}>/</Separator>\n    </BreadcrumbListItem>\n  ));\n\n  return (\n    <nav aria-label={ariaLabel} className={className}>\n      <BreadcrumbList>{listItems}</BreadcrumbList>\n    </nav>\n  );\n};\n\nexport default Breadcrumbs;\n"],"mappings":"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"}

package/dist/Breadcrumbs-tR49JqAS.cjs

@@ -1,295 +0,0 @@
-const require_chunk = require("./chunk-CKQMccvm.cjs");
-const require_mixins_focus = require("./mixins/focus.cjs");
-require("./variables/transitions.cjs");
-const require_mixins_text = require("./mixins/text.cjs");
-const require_Stack = require("./Stack-UeifHn3c.cjs");
-const require_Text = require("./Text-G9QmYf0P.cjs");
-const require_Tooltip = require("./Tooltip-olP3rdUO.cjs");
-const require_IconButton = require("./IconButton-nlgjJQCS.cjs");
-const require_intersperse = require("./intersperse-_0nQM5Rb.cjs");
-const require_components_Input_index = require("./components/Input/index.cjs");
-let _persona_design_tokens = require("@persona/design-tokens");
-let styled_components = require("styled-components");
-styled_components = require_chunk.__toESM(styled_components);
-let react_jsx_runtime = require("react/jsx-runtime");
-let react_router_dom = require("react-router-dom");
-let react = require("react");
-let _persona_icons = require("@persona/icons");
-//#region components/Breadcrumbs/Breadcrumb.tsx
-const COPY_TOOLTIP_LABEL = "Copy ID";
-const DEFAULT_EDIT_MAX_LENGTH = 100;
-const LABEL_ACTION_GAP = _persona_design_tokens.Spacing[2];
-const ACTION_BUTTON_GAP = _persona_design_tokens.Spacing[1];
-const CrumbRow = (0, styled_components.default)(require_Stack.HStack)`
-  align-items: center;
-  min-width: 0;
-`;
-const crumbLayoutStyles = (size) => styled_components.css`
-  display: inline-flex;
-  align-items: center;
-  min-width: 0;
-  min-height: ${({ theme }) => theme.element.height.xs};
-  ${size === "lg" ? styled_components.css`
-        font-size: ${({ theme }) => theme.text.paragraph.lg.fontSize};
-        line-height: ${({ theme }) => theme.text.paragraph.lg.lineHeight};
-      ` : styled_components.css``};
-`;
-const editInputTextStyles = (size, current) => {
-	if (current) return size === "lg" ? require_mixins_text.paragraphMixins.lgBold : require_mixins_text.paragraphMixins.mdBold;
-	return size === "lg" ? require_mixins_text.paragraphMixins.lg : require_mixins_text.paragraphMixins.md;
-};
-const ancestorCrumbStyles = styled_components.css`
-  ${require_mixins_text.paragraphMixins.md};
-  color: ${({ theme }) => theme.color.text.secondary};
-  text-decoration: none;
-  transition: color ${"100ms"} ease-out;
-  ${require_mixins_focus.focusOutline}
-  ${({ $size }) => crumbLayoutStyles($size)}
-
-  &:hover {
-    color: ${({ theme }) => theme.color.text.primary};
-  }
-`;
-const AncestorNavLink = (0, styled_components.default)(react_router_dom.Link)`
-  ${ancestorCrumbStyles}
-`;
-const AncestorNavButton = styled_components.default.button`
-  ${ancestorCrumbStyles}
-  padding: 0;
-  border: none;
-  background: none;
-  cursor: pointer;
-`;
-const InlineEditInput = (0, styled_components.default)(require_components_Input_index.default)`
-  margin: 0;
-  padding: 2px 10px;
-  width: auto;
-  max-width: 100%;
-  min-width: ${({ $editMinWidth }) => $editMinWidth != null ? `${$editMinWidth}px` : "0"};
-  field-sizing: content;
-  display: inline-block;
-  ${({ $size, $current }) => editInputTextStyles($size, $current)};
-  background-color: ${({ theme }) => theme.color.background.primary};
-  color: ${({ theme }) => theme.color.text.primary};
-
-  &:not(:focus) {
-    border-color: transparent;
-  }
-
-  &:hover:not(:disabled) {
-    border-style: solid;
-  }
-`;
-const CurrentLabel = (0, styled_components.default)(require_Text.Paragraph)`
-  margin: 0;
-  ${({ $size }) => crumbLayoutStyles($size)}
-`;
-const copyToClipboard = async (value) => {
-	try {
-		if (navigator.clipboard?.writeText == null) return false;
-		await navigator.clipboard.writeText(value);
-		return true;
-	} catch {
-		return false;
-	}
-};
-const BreadcrumbCopyButton = ({ copyValue, copyTooltipLabel = COPY_TOOLTIP_LABEL, onCopy }) => {
-	const [tooltipOpen, setTooltipOpen] = (0, react.useState)(false);
-	const [copied, setCopied] = (0, react.useState)(false);
-	const handleCopy = async () => {
-		if (!await copyToClipboard(copyValue)) return;
-		setCopied(true);
-		setTooltipOpen(true);
-		onCopy?.();
-		window.setTimeout(() => {
-			setTooltipOpen(false);
-			window.setTimeout(() => setCopied(false), 200);
-		}, 1e3);
-	};
-	const handleMouseEnter = () => {
-		if (!copied) setTooltipOpen(true);
-	};
-	const handleMouseLeave = () => {
-		if (!copied) setTooltipOpen(false);
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {
-		trigger: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			onMouseEnter: handleMouseEnter,
-			onMouseLeave: handleMouseLeave,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
-				type: "button",
-				size: "sm",
-				"aria-label": `Copy ${copyValue}`,
-				onClick: (event) => {
-					event.preventDefault();
-					event.stopPropagation();
-					handleCopy();
-				},
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.CopyIcon, {})
-			})
-		}),
-		open: tooltipOpen,
-		side: "top",
-		sideOffset: 4,
-		size: "sm",
-		contentAlignment: "center",
-		interactive: false,
-		hideArrow: true,
-		portal: false,
-		children: copied ? "Copied!" : copyTooltipLabel
-	});
-};
-const Breadcrumb = ({ label, size = "md", current = false, headingAs = "h1", showCopyAction = false, copyValue, copyTooltipLabel, href, onClick, onEdit, editMaxLength = DEFAULT_EDIT_MAX_LENGTH, onCopy }) => {
-	const [isEditing, setIsEditing] = (0, react.useState)(false);
-	const [editValue, setEditValue] = (0, react.useState)(label);
-	const [editMinWidth, setEditMinWidth] = (0, react.useState)();
-	const editInputRef = (0, react.useRef)(null);
-	(0, react.useEffect)(() => {
-		if (!isEditing) setEditValue(label);
-	}, [isEditing, label]);
-	(0, react.useEffect)(() => {
-		if (!isEditing) {
-			setEditMinWidth(void 0);
-			return;
-		}
-		const input = editInputRef.current;
-		if (input == null) return;
-		setEditMinWidth(input.offsetWidth);
-		input.focus();
-		input.select();
-	}, [isEditing]);
-	const commitEdit = () => {
-		if (!isEditing) return;
-		setIsEditing(false);
-		if (editValue !== label) onEdit?.(editValue);
-	};
-	const inlineActions = !isEditing && (showCopyAction || onEdit) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.HStack, {
-		spacing: ACTION_BUTTON_GAP,
-		align: "center",
-		children: [onEdit && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
-			type: "button",
-			size: "sm",
-			"aria-label": `Edit ${label}`,
-			onClick: (event) => {
-				event.preventDefault();
-				event.stopPropagation();
-				setIsEditing(true);
-			},
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.EditIcon, {})
-		}), showCopyAction && copyValue != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BreadcrumbCopyButton, {
-			copyValue,
-			copyTooltipLabel,
-			onCopy
-		})]
-	});
-	if (isEditing) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CrumbRow, {
-		spacing: LABEL_ACTION_GAP,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineEditInput, {
-			ref: editInputRef,
-			$size: size,
-			$current: current,
-			$editMinWidth: editMinWidth,
-			size: "md",
-			"aria-label": `Edit ${label}`,
-			maxLength: editMaxLength,
-			value: editValue,
-			onChange: (event) => setEditValue(event.target.value),
-			onBlur: commitEdit,
-			onKeyDown: (event) => {
-				if (event.key === "Enter") {
-					event.preventDefault();
-					commitEdit();
-				}
-				if (event.key === "Escape") {
-					setEditValue(label);
-					setIsEditing(false);
-				}
-			}
-		})
-	});
-	if (current) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CrumbRow, {
-		spacing: LABEL_ACTION_GAP,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CurrentLabel, {
-			$size: size,
-			size: size === "lg" ? "lg" : "md",
-			weight: "bold",
-			color: "primary",
-			as: headingAs,
-			children: label
-		}), inlineActions]
-	});
-	if (href == null && onClick != null) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CrumbRow, {
-		spacing: LABEL_ACTION_GAP,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AncestorNavButton, {
-			type: "button",
-			onClick,
-			$size: size,
-			children: label
-		}), inlineActions]
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CrumbRow, {
-		spacing: LABEL_ACTION_GAP,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AncestorNavLink, {
-			to: href ?? "",
-			$size: size,
-			children: label
-		}), inlineActions]
-	});
-};
-//#endregion
-//#region components/Breadcrumbs/Breadcrumbs.tsx
-const BreadcrumbList = styled_components.default.ol`
-  max-width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  min-width: 0;
-`;
-const BreadcrumbListItem = styled_components.default.li`
-  display: flex;
-  align-items: center;
-  min-width: 0;
-`;
-const Separator = styled_components.default.span`
-  padding: 0 ${_persona_design_tokens.Spacing[2]};
-  color: ${({ theme }) => theme.color.text.tertiary};
-  user-select: none;
-  ${({ $size }) => $size === "lg" ? require_mixins_text.paragraphMixins.lg : require_mixins_text.paragraphMixins.md};
-`;
-const Breadcrumbs = ({ items, size = "md", headingAs = "h1", "aria-label": ariaLabel = "Breadcrumbs", className }) => {
-	if (items.length === 0) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
-		"aria-label": ariaLabel,
-		className,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BreadcrumbList, { children: require_intersperse.intersperse(items.map((item, index) => {
-			const isCurrent = index === items.length - 1;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BreadcrumbListItem, {
-				"aria-current": isCurrent ? "page" : void 0,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Breadcrumb, {
-					...item,
-					size,
-					current: isCurrent,
-					headingAs
-				})
-			}, `${item.label}-${index}`);
-		}), (separatorIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BreadcrumbListItem, {
-			"aria-hidden": "true",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Separator, {
-				$size: size,
-				children: "/"
-			})
-		}, `separator-${separatorIndex}`)) })
-	});
-};
-//#endregion
-Object.defineProperty(exports, "Breadcrumbs", {
-	enumerable: true,
-	get: function() {
-		return Breadcrumbs;
-	}
-});
-
-//# sourceMappingURL=Breadcrumbs-tR49JqAS.cjs.map

package/dist/Breadcrumbs-tR49JqAS.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Breadcrumbs-tR49JqAS.cjs","names":["Spacing","HStack","paragraphMixins","focusOutline","Link","Input","Paragraph","Tooltip","IconButton","CopyIcon","EditIcon","Spacing","paragraphMixins","intersperse"],"sources":["../components/Breadcrumbs/Breadcrumb.tsx","../components/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import { type ChangeEvent, useEffect, useRef, useState } from 'react';\nimport { Link } from 'react-router-dom';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { CopyIcon, EditIcon } from '@persona/icons';\nimport { IconButton } from 'design-system/components/Button';\nimport Input from 'design-system/components/Input';\nimport { HStack } from 'design-system/components/Stack';\nimport { Paragraph } from 'design-system/components/Text';\nimport Tooltip from 'design-system/components/Tooltip';\nimport { focusOutline } from 'design-system/mixins/focus';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nexport type BreadcrumbSize = 'md' | 'lg';\n\nexport type BreadcrumbHeadingAs = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\nconst COPY_TOOLTIP_LABEL = 'Copy ID';\nconst DEFAULT_EDIT_MAX_LENGTH = 100;\n\nexport type BreadcrumbProps = {\n  label: string;\n  size?: BreadcrumbSize;\n  current?: boolean;\n  /**\n   * Overrides the heading element rendered for the current crumb. Defaults to `h1`; use `h2` or\n   * lower when the page already has an `h1`.\n   */\n  headingAs?: BreadcrumbHeadingAs;\n  showCopyAction?: boolean;\n  copyValue?: string;\n  copyTooltipLabel?: string;\n  /** Internal dashboard path (e.g. `/cases`). Passed to the router `Link` as `to`. */\n  href?: string;\n  /**\n   * Activates a non-current crumb without a route change, for trails that navigate in-place (e.g.\n   * a control panel drilling into a sub-panel). Ignored when `href` is set.\n   */\n  onClick?: () => void;\n  onEdit?: (newLabel: string) => void;\n  editMaxLength?: number;\n  onCopy?: () => void;\n};\n\nconst LABEL_ACTION_GAP = Spacing[2];\nconst ACTION_BUTTON_GAP = Spacing[1];\n\nconst CrumbRow = styled(HStack)`\n  align-items: center;\n  min-width: 0;\n`;\n\nconst crumbLayoutStyles = (size: BreadcrumbSize) => css`\n  display: inline-flex;\n  align-items: center;\n  min-width: 0;\n  min-height: ${({ theme }) => theme.element.height.xs};\n  ${\n    size === 'lg'\n      ? css`\n        font-size: ${({ theme }) => theme.text.paragraph.lg.fontSize};\n        line-height: ${({ theme }) => theme.text.paragraph.lg.lineHeight};\n      `\n      : css``\n  };\n`;\n\nconst editInputTextStyles = (size: BreadcrumbSize, current: boolean) => {\n  if (current) {\n    return size === 'lg' ? paragraphMixins.lgBold : paragraphMixins.mdBold;\n  }\n  return size === 'lg' ? paragraphMixins.lg : paragraphMixins.md;\n};\n\nconst ancestorCrumbStyles = css<{ $size: BreadcrumbSize }>`\n  ${paragraphMixins.md};\n  color: ${({ theme }) => theme.color.text.secondary};\n  text-decoration: none;\n  transition: color ${TransitionDuration.ExtraFast} ease-out;\n  ${focusOutline}\n  ${({ $size }) => crumbLayoutStyles($size)}\n\n  &:hover {\n    color: ${({ theme }) => theme.color.text.primary};\n  }\n`;\n\nconst AncestorNavLink = styled(Link)<{ $size: BreadcrumbSize }>`\n  ${ancestorCrumbStyles}\n`;\n\nconst AncestorNavButton = styled.button<{ $size: BreadcrumbSize }>`\n  ${ancestorCrumbStyles}\n  padding: 0;\n  border: none;\n  background: none;\n  cursor: pointer;\n`;\n\nconst InlineEditInput = styled(Input)<{\n  $size: BreadcrumbSize;\n  $current: boolean;\n  $editMinWidth?: number;\n}>`\n  margin: 0;\n  padding: 2px 10px;\n  width: auto;\n  max-width: 100%;\n  min-width: ${({ $editMinWidth }) => ($editMinWidth != null ? `${$editMinWidth}px` : '0')};\n  field-sizing: content;\n  display: inline-block;\n  ${({ $size, $current }) => editInputTextStyles($size, $current)};\n  background-color: ${({ theme }) => theme.color.background.primary};\n  color: ${({ theme }) => theme.color.text.primary};\n\n  &:not(:focus) {\n    border-color: transparent;\n  }\n\n  &:hover:not(:disabled) {\n    border-style: solid;\n  }\n`;\n\nconst CurrentLabel = styled(Paragraph)<{ $size: BreadcrumbSize }>`\n  margin: 0;\n  ${({ $size }) => crumbLayoutStyles($size)}\n`;\n\nconst copyToClipboard = async (value: string): Promise<boolean> => {\n  try {\n    if (navigator.clipboard?.writeText == null) {\n      return false;\n    }\n\n    await navigator.clipboard.writeText(value);\n    return true;\n  } catch {\n    return false;\n  }\n};\n\nconst BreadcrumbCopyButton = ({\n  copyValue,\n  copyTooltipLabel = COPY_TOOLTIP_LABEL,\n  onCopy,\n}: {\n  copyValue: string;\n  copyTooltipLabel?: string;\n  onCopy?: () => void;\n}) => {\n  const [tooltipOpen, setTooltipOpen] = useState(false);\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = async () => {\n    const success = await copyToClipboard(copyValue);\n    if (!success) {\n      return;\n    }\n\n    setCopied(true);\n    setTooltipOpen(true);\n    onCopy?.();\n\n    window.setTimeout(() => {\n      setTooltipOpen(false);\n      window.setTimeout(() => setCopied(false), 200);\n    }, 1000);\n  };\n\n  const handleMouseEnter = () => {\n    if (!copied) {\n      setTooltipOpen(true);\n    }\n  };\n\n  const handleMouseLeave = () => {\n    if (!copied) {\n      setTooltipOpen(false);\n    }\n  };\n\n  const trigger = (\n    <span onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>\n      <IconButton\n        type='button'\n        size='sm'\n        aria-label={`Copy ${copyValue}`}\n        onClick={(event) => {\n          event.preventDefault();\n          event.stopPropagation();\n          void handleCopy();\n        }}\n      >\n        <CopyIcon />\n      </IconButton>\n    </span>\n  );\n\n  return (\n    <Tooltip\n      trigger={trigger}\n      open={tooltipOpen}\n      side='top'\n      sideOffset={4}\n      size='sm'\n      contentAlignment='center'\n      interactive={false}\n      hideArrow\n      portal={false}\n    >\n      {copied ? 'Copied!' : copyTooltipLabel}\n    </Tooltip>\n  );\n};\n\nconst Breadcrumb = ({\n  label,\n  size = 'md',\n  current = false,\n  headingAs = 'h1',\n  showCopyAction = false,\n  copyValue,\n  copyTooltipLabel,\n  href,\n  onClick,\n  onEdit,\n  editMaxLength = DEFAULT_EDIT_MAX_LENGTH,\n  onCopy,\n}: BreadcrumbProps) => {\n  const [isEditing, setIsEditing] = useState(false);\n  const [editValue, setEditValue] = useState(label);\n  const [editMinWidth, setEditMinWidth] = useState<number | undefined>();\n  const editInputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (!isEditing) {\n      setEditValue(label);\n    }\n  }, [isEditing, label]);\n\n  useEffect(() => {\n    if (!isEditing) {\n      setEditMinWidth(undefined);\n      return;\n    }\n\n    const input = editInputRef.current;\n    if (input == null) {\n      return;\n    }\n\n    setEditMinWidth(input.offsetWidth);\n    input.focus();\n    input.select();\n  }, [isEditing]);\n\n  const commitEdit = () => {\n    if (!isEditing) {\n      return;\n    }\n\n    setIsEditing(false);\n    if (editValue !== label) {\n      onEdit?.(editValue);\n    }\n  };\n\n  const inlineActions = !isEditing && (showCopyAction || onEdit) && (\n    <HStack spacing={ACTION_BUTTON_GAP} align='center'>\n      {onEdit && (\n        <IconButton\n          type='button'\n          size='sm'\n          aria-label={`Edit ${label}`}\n          onClick={(event) => {\n            event.preventDefault();\n            event.stopPropagation();\n            setIsEditing(true);\n          }}\n        >\n          <EditIcon />\n        </IconButton>\n      )}\n      {showCopyAction && copyValue != null && (\n        <BreadcrumbCopyButton\n          copyValue={copyValue}\n          copyTooltipLabel={copyTooltipLabel}\n          onCopy={onCopy}\n        />\n      )}\n    </HStack>\n  );\n\n  if (isEditing) {\n    return (\n      <CrumbRow spacing={LABEL_ACTION_GAP}>\n        <InlineEditInput\n          ref={editInputRef}\n          $size={size}\n          $current={current}\n          $editMinWidth={editMinWidth}\n          size='md'\n          aria-label={`Edit ${label}`}\n          maxLength={editMaxLength}\n          value={editValue}\n          onChange={(event: ChangeEvent<HTMLInputElement>) => setEditValue(event.target.value)}\n          onBlur={commitEdit}\n          onKeyDown={(event) => {\n            if (event.key === 'Enter') {\n              event.preventDefault();\n              commitEdit();\n            }\n            if (event.key === 'Escape') {\n              setEditValue(label);\n              setIsEditing(false);\n            }\n          }}\n        />\n      </CrumbRow>\n    );\n  }\n\n  if (current) {\n    return (\n      <CrumbRow spacing={LABEL_ACTION_GAP}>\n        <CurrentLabel\n          $size={size}\n          size={size === 'lg' ? 'lg' : 'md'}\n          weight='bold'\n          color='primary'\n          as={headingAs}\n        >\n          {label}\n        </CurrentLabel>\n        {inlineActions}\n      </CrumbRow>\n    );\n  }\n\n  if (href == null && onClick != null) {\n    return (\n      <CrumbRow spacing={LABEL_ACTION_GAP}>\n        <AncestorNavButton type='button' onClick={onClick} $size={size}>\n          {label}\n        </AncestorNavButton>\n        {inlineActions}\n      </CrumbRow>\n    );\n  }\n\n  return (\n    <CrumbRow spacing={LABEL_ACTION_GAP}>\n      <AncestorNavLink to={href ?? ''} $size={size}>\n        {label}\n      </AncestorNavLink>\n      {inlineActions}\n    </CrumbRow>\n  );\n};\n\nexport default Breadcrumb;\n","import styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { intersperse } from 'design-system/lib/intersperse';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nimport Breadcrumb, {\n  type BreadcrumbHeadingAs,\n  type BreadcrumbProps,\n  type BreadcrumbSize,\n} from './Breadcrumb';\n\nexport type BreadcrumbsItemProps = Omit<BreadcrumbProps, 'size' | 'current' | 'headingAs'>;\n\nexport type BreadcrumbsProps = {\n  items: BreadcrumbsItemProps[];\n  size?: BreadcrumbSize;\n  /**\n   * Overrides the heading element rendered for the current crumb. Defaults to `h1`; use `h2` or\n   * lower when the page already has an `h1`.\n   */\n  headingAs?: BreadcrumbHeadingAs;\n  'aria-label'?: string;\n  className?: string;\n};\n\nconst BreadcrumbList = styled.ol`\n  max-width: 100%;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  min-width: 0;\n`;\n\nconst BreadcrumbListItem = styled.li`\n  display: flex;\n  align-items: center;\n  min-width: 0;\n`;\n\nconst Separator = styled.span<{ $size: BreadcrumbSize }>`\n  padding: 0 ${Spacing[2]};\n  color: ${({ theme }) => theme.color.text.tertiary};\n  user-select: none;\n  ${({ $size }) => ($size === 'lg' ? paragraphMixins.lg : paragraphMixins.md)};\n`;\n\nexport const Breadcrumbs = ({\n  items,\n  size = 'md',\n  headingAs = 'h1',\n  'aria-label': ariaLabel = 'Breadcrumbs',\n  className,\n}: BreadcrumbsProps) => {\n  if (items.length === 0) {\n    return null;\n  }\n\n  const crumbNodes = items.map((item, index) => {\n    const isCurrent = index === items.length - 1;\n\n    return (\n      <BreadcrumbListItem\n        key={`${item.label}-${index}`}\n        aria-current={isCurrent ? 'page' : undefined}\n      >\n        <Breadcrumb {...item} size={size} current={isCurrent} headingAs={headingAs} />\n      </BreadcrumbListItem>\n    );\n  });\n\n  const listItems = intersperse(crumbNodes, (separatorIndex: number) => (\n    <BreadcrumbListItem key={`separator-${separatorIndex}`} aria-hidden='true'>\n      <Separator $size={size}>/</Separator>\n    </BreadcrumbListItem>\n  ));\n\n  return (\n    <nav aria-label={ariaLabel} className={className}>\n      <BreadcrumbList>{listItems}</BreadcrumbList>\n    </nav>\n  );\n};\n\nexport default Breadcrumbs;\n"],"mappings":"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"}

package/dist/Breadcrumbs.d.cts

@@ -1,2 +0,0 @@
-import { n as BreadcrumbsItemProps, r as BreadcrumbsProps, t as Breadcrumbs } from "./Breadcrumbs-BBREROrw.cjs";
-export { Breadcrumbs, Breadcrumbs as default, BreadcrumbsItemProps, BreadcrumbsProps };