@persona/design-system 0.1.7 → 0.1.9

package/README.md

@@ -5,5 +5,24 @@ This project contains everything related to the Persona Design System.
 ## Installation
 
 ```
-yarn add @persona/design-system @persona/design-tokens @persona/icons
+yarn add @persona/design-system @persona/design-tokens @persona/icons 'styled-components@^5.3.5'
 ```
+
+`@persona/design-tokens`, `@persona/icons`, and `styled-components` are peer dependencies, so
+they must be installed alongside the design system — Yarn does not add them for you. PDS requires
+`styled-components` v5; v6 is a breaking major.
+
+## Skills for AI coding agents
+
+The package bundles an [Agent Skill](https://agentskills.io) under `skills/ui-authoring/`,
+versioned alongside the components it documents:
+
+| File            | Contents                                                                                |
+| --------------- | --------------------------------------------------------------------------------------- |
+| `SKILL.md`      | Design tokens, component-first guidance, and the rules that matter most when writing UI |
+| `COMPONENTS.md` | Deeper usage notes for the components that are easy to get wrong                        |
+| `EXAMPLES.md`   | End-to-end examples (forms, tables, loading and empty states)                           |
+| `REFERENCE.md`  | Full `Color` / `Spacing` / `Typography` catalog                                         |
+
+Point your agent at `node_modules/@persona/design-system/skills/ui-authoring/SKILL.md`, or copy the
+directory into wherever your agent reads skills from (for example `.claude/skills/`).

package/dist/{Action-DkNqzc2X.d.mts → Action-CVtzREhU.d.mts}

@@ -1,5 +1,5 @@
-import { n as Tooltip } from "./Tooltip-DRgufW3i.mjs";
-import { t as RequireOneOf } from "./utilities-SMbDe8oK.mjs";
+import { n as Tooltip } from "./Tooltip-CUC-JuRL.mjs";
+import { t as RequireOneOf } from "./utilities-BO_95qFA.mjs";
 import { ComponentProps, ComponentPropsWithoutRef, ReactElement } from "react";
 
 //#region types/Action.d.ts
@@ -32,4 +32,4 @@ type MenuAction = Action & {
 };
 //#endregion
 export { TextAction as i, IconAction as n, MenuAction as r, Action as t };
-//# sourceMappingURL=Action-DkNqzc2X.d.mts.map
+//# sourceMappingURL=Action-CVtzREhU.d.mts.map

package/dist/Action.d.mts

@@ -1,2 +1,2 @@
-import { i as TextAction, n as IconAction, r as MenuAction, t as Action } from "./Action-DkNqzc2X.mjs";
+import { i as TextAction, n as IconAction, r as MenuAction, t as Action } from "./Action-CVtzREhU.mjs";
 export { Action, IconAction, MenuAction, TextAction };

package/dist/AdvancedFilterRuleRow.d.mts

@@ -0,0 +1,37 @@
+import { a as FilterField, c as FilterOperator, d as FilterSize, l as FilterRule, u as FilterRuleValue } from "./types-D58IoRx6.mjs";
+import { t as FieldRegistry } from "./FieldRegistry-rqSkjchY.mjs";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
+
+//#region components/DataTable/TableControls/FiltersV2/AdvancedFilterRulesPopover/AdvancedFilterRuleRow.d.ts
+interface AdvancedFilterRuleRowProps {
+  registry: FieldRegistry;
+  groupIndex: number;
+  ruleIndex: number;
+  rule: FilterRule;
+  size: FilterSize;
+  isOpen: boolean;
+  onClose: () => void;
+  onDelete: () => void;
+  onFieldChange: (groupIndex: number, ruleIndex: number, nextFieldId: string) => void;
+  onOperatorChange: (groupIndex: number, ruleIndex: number, nextOperator: FilterOperator) => void;
+  onValueChange: (groupIndex: number, ruleIndex: number, nextValue: FilterRuleValue) => void;
+  renderValueControl: (field: FilterField, operator: FilterOperator, value: FilterRuleValue, onChange: (value: FilterRuleValue) => void) => ReactNode;
+}
+declare function AdvancedFilterRuleRow({
+  registry,
+  groupIndex,
+  ruleIndex,
+  rule,
+  size,
+  isOpen,
+  onClose,
+  onDelete,
+  onFieldChange,
+  onOperatorChange,
+  onValueChange,
+  renderValueControl
+}: AdvancedFilterRuleRowProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { AdvancedFilterRuleRow as default };
+//# sourceMappingURL=AdvancedFilterRuleRow.d.mts.map

package/dist/AdvancedFilterRulesPopover.d.mts

@@ -0,0 +1,62 @@
+import { a as FilterField, c as FilterOperator, d as FilterSize, n as CompoundExpression, u as FilterRuleValue } from "./types-D58IoRx6.mjs";
+import { t as FieldRegistry } from "./FieldRegistry-rqSkjchY.mjs";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactElement, ReactNode } from "react";
+
+//#region components/DataTable/TableControls/FiltersV2/AdvancedFilterRulesPopover/AdvancedFilterRulesPopover.d.ts
+interface AdvancedFilterRulesPopoverProps {
+  registry: FieldRegistry;
+  compound: CompoundExpression;
+  onChange: (next: CompoundExpression) => void;
+  /**
+   * Trigger element supplied by parent (typically a ref-forwarding
+   * `<RulesPill>`). Radix `Popover.Trigger asChild` injects trigger props
+   * and a ref into this element, so callers should pass a native element
+   * or a ref-forwarding component.
+   */
+  trigger: ReactElement;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * Size variant. Defaults to whatever the surrounding
+   * `FilterBarContext` provides (`'sm'` outside a `FilterBar`).
+   */
+  size?: FilterSize;
+  /**
+   * Slot renderer parents use to plug type-aware value controls into
+   * the row dropdown when a rule is being edited. Required — every
+   * production caller routes through `resolveValueControl` from
+   * `FilterBar/value-control-resolver.tsx`. Storybook stories that
+   * exercise this component in isolation should pass a story-local
+   * stub.
+   */
+  renderValueControl: (field: FilterField, operator: FilterOperator, value: FilterRuleValue, onChange: (value: FilterRuleValue) => void) => ReactNode;
+}
+/**
+ * DNF (OR-of-AND) editor popover for the compound expression owned by the
+ * Rules pill.
+ *
+ * The popover is fully controlled by `compound` + `onChange` — it never
+ * holds compound state internally so parents can persist edits incrementally
+ * (URL state, saved-view dual-write, etc.). `open` / `onOpenChange` are
+ * optional; when omitted the popover manages its own open state and is
+ * opened by clicking the parent-supplied trigger.
+ *
+ * Each AndGroup's rules are rendered as a `<ListBox>` of `<LogicRow>` items.
+ * The collapsed row reads `[If/And] [field-sticker] [operator] [value-sticker]`
+ * inline; clicking a row reveals the field/operator/value editor inside the
+ * row's dropdown popover.
+ */
+declare const AdvancedFilterRulesPopover: ({
+  registry,
+  compound,
+  onChange,
+  trigger,
+  open,
+  onOpenChange,
+  renderValueControl,
+  size
+}: AdvancedFilterRulesPopoverProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { AdvancedFilterRulesPopoverProps, AdvancedFilterRulesPopover as default };
+//# sourceMappingURL=AdvancedFilterRulesPopover.d.mts.map

package/dist/ArrayValueControl.d.mts

@@ -0,0 +1,38 @@
+import { t as ValueControlProps } from "./types-D7ppqnNj.mjs";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region components/DataTable/TableControls/FiltersV2/value-controls/ArrayValueControl/ArrayValueControl.d.ts
+type ArrayValueControlProps = ValueControlProps;
+/**
+ * Array-typed value control for the Filter UI v2 popover.
+ *
+ * Used for `array` fields with operators `contains` / `does_not_contain`.
+ * The popover renders nothing when the operator is valueless
+ * (`is_empty` / `is_not_empty`).
+ *
+ * The rendered control depends on the inner item type advertised by the
+ * field's `itemType`:
+ *
+ * - `'choices'`           → single-select Combobox sourced from `field.options`.
+ * - `'string'` or unset   → free-text input (a single value to test for
+ *                           membership against the array column).
+ *
+ * Output value is always a single string; an empty text input emits `''`, not
+ * `null`, because the pill lifecycle reads a `null` value on a value-requiring
+ * operator as a removal and drops the pill. `''` keeps the pill as a visible
+ * draft; the serialize boundary is what filters incomplete values out of the
+ * request. The predicate is "does this array contain (or not contain) this
+ * scalar?", so we never produce an array-of-values from this control.
+ */
+declare const ArrayValueControl: ({
+  field,
+  operator,
+  value,
+  onChange,
+  onCommit,
+  ariaLabel,
+  layout
+}: ArrayValueControlProps) => _$react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { ArrayValueControl, ArrayValueControl as default, ArrayValueControlProps };
+//# sourceMappingURL=ArrayValueControl.d.mts.map

package/dist/Attribute.d.mts

@@ -1,10 +1,10 @@
-import { n as IconButtonProps } from "./IconButton-Dnnlf9uO.mjs";
-import { i as ParagraphSize } from "./text-CtoDqqAO.mjs";
-import { c as ParagraphProps, u as SpanProps } from "./Text-D3FXEnG6.mjs";
+import { n as IconButtonProps } from "./IconButton-BHCmHIx5.mjs";
+import { i as ParagraphSize } from "./text-B21s9mRZ.mjs";
+import { c as ParagraphProps, u as SpanProps } from "./Text-DNPbAuUG.mjs";
 import * as _$styled_components0 from "styled-components";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as _$react from "react";
 import { ComponentPropsWithoutRef, ComponentType, FC, PropsWithChildren, ReactNode } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region components/Attribute/Attribute.d.ts
 type WordBreak = 'break-all' | 'break-word' | 'normal';

package/dist/AttributeGrid.d.mts

@@ -1,6 +1,6 @@
 import { AttributeSize, TableLayoutValue } from "./Attribute.mjs";
-import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
 
 //#region components/Attribute/AttributeGrid.d.ts
 type AttributeGridProps = {

package/dist/{Badge-DRn_r6is.mjs → Badge-DEVbRlJX.mjs}

@@ -1,4 +1,4 @@
-import { n as Sticker } from "./Sticker-B0TbkV4o.mjs";
+import { n as Sticker } from "./Sticker-CyGb9dEu.mjs";
 import styled, { css } from "styled-components";
 import { jsx } from "react/jsx-runtime";
 //#region components/Badge/Badge.tsx
@@ -28,4 +28,4 @@ const Badge = styled(({ variant, ...rest }) => {
 //#endregion
 export { Badge as t };
 
-//# sourceMappingURL=Badge-DRn_r6is.mjs.map
+//# sourceMappingURL=Badge-DEVbRlJX.mjs.map

package/dist/{Badge-DRn_r6is.mjs.map → Badge-DEVbRlJX.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Badge-DRn_r6is.mjs","names":[],"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,QAAQ,QAAQ,EAAE,SAAS,GAAG,WAAuB;CAChE,IAAI;AACJ,SAAQ,SAAR;EACE,KAAK;AACH,iBAAc;AACd;EACF,KAAK;AACH,iBAAc;AACd;EAEF,QACE,eAAc;;AAGlB,QAAO,oBAAC,SAAD;EAAS,GAAI;EAAM,SAAS;EAAe,CAAA;EAClD,OACM,GAAG;;;;;;;IAQV"}
+{"version":3,"file":"Badge-DEVbRlJX.mjs","names":[],"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,QAAQ,QAAQ,EAAE,SAAS,GAAG,WAAuB;CAChE,IAAI;AACJ,SAAQ,SAAR;EACE,KAAK;AACH,iBAAc;AACd;EACF,KAAK;AACH,iBAAc;AACd;EAEF,QACE,eAAc;;AAGlB,QAAO,oBAAC,SAAD;EAAS,GAAI;EAAM,SAAS;EAAe,CAAA;EAClD,OACM,GAAG;;;;;;;IAQV"}

package/dist/Banner.d.mts

@@ -1,5 +1,5 @@
-import { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
 
 //#region components/Banner/Banner.d.ts
 interface BannerProps extends ComponentPropsWithoutRef<'div'> {

package/dist/BooleanValueControl.d.mts

@@ -0,0 +1,20 @@
+import { t as ValueControlProps } from "./types-D7ppqnNj.mjs";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region components/DataTable/TableControls/FiltersV2/value-controls/BooleanValueControl/BooleanValueControl.d.ts
+type BooleanValueControlProps = ValueControlProps;
+/**
+ * Filter UI v2 — boolean value picker for `boolean`-typed fields with `is` /
+ * `is_not` operators. Renders two rows (True / False); the selected row uses
+ * the same purple treatment as other filter value selections. Renders nothing
+ * for valueless operators (`is_empty`, `is_not_empty`).
+ */
+declare function BooleanValueControl({
+  operator,
+  value,
+  onChange,
+  ariaLabel
+}: BooleanValueControlProps): _$react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { BooleanValueControlProps, BooleanValueControl as default };
+//# sourceMappingURL=BooleanValueControl.d.mts.map

package/dist/{Breadcrumb-On7pOpgt.d.mts → Breadcrumb-lziQ1FX9.d.mts}

@@ -2,14 +2,25 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#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;
@@ -18,14 +29,16 @@ declare const Breadcrumb: ({
   label,
   size,
   current,
+  headingAs,
   showCopyAction,
   copyValue,
   copyTooltipLabel,
   href,
+  onClick,
   onEdit,
   editMaxLength,
   onCopy
 }: BreadcrumbProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { BreadcrumbProps as n, BreadcrumbSize as r, Breadcrumb as t };
-//# sourceMappingURL=Breadcrumb-On7pOpgt.d.mts.map
+export { BreadcrumbSize as i, BreadcrumbHeadingAs as n, BreadcrumbProps as r, Breadcrumb as t };
+//# sourceMappingURL=Breadcrumb-lziQ1FX9.d.mts.map

package/dist/Breadcrumb.d.mts

@@ -1,2 +1,2 @@
-import { n as BreadcrumbProps, r as BreadcrumbSize, t as Breadcrumb } from "./Breadcrumb-On7pOpgt.mjs";
-export { BreadcrumbProps, BreadcrumbSize, Breadcrumb as default };
+import { i as BreadcrumbSize, n as BreadcrumbHeadingAs, r as BreadcrumbProps, t as Breadcrumb } from "./Breadcrumb-lziQ1FX9.mjs";
+export { BreadcrumbHeadingAs, BreadcrumbProps, BreadcrumbSize, Breadcrumb as default };

package/dist/Breadcrumbs-DJ5qqqRD.d.mts

@@ -0,0 +1,26 @@
+import { i as BreadcrumbSize, n as BreadcrumbHeadingAs, r as BreadcrumbProps } from "./Breadcrumb-lziQ1FX9.mjs";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#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-DJ5qqqRD.d.mts.map

package/dist/Breadcrumbs-W8hIhdHD.mjs

@@ -0,0 +1,288 @@
+import { focusOutline } from "./mixins/focus.mjs";
+import "./variables/transitions.mjs";
+import { paragraphMixins } from "./mixins/text.mjs";
+import { t as HStack } from "./Stack-Bl54WmhY.mjs";
+import { i as Paragraph } from "./Text-RcEfNFLx.mjs";
+import { a as Tooltip } from "./Tooltip-BvDbmXak.mjs";
+import { t as IconButton } from "./IconButton-P8w0JDI5.mjs";
+import { t as intersperse } from "./intersperse-vOYvFOfF.mjs";
+import Input_default from "./components/Input/index.mjs";
+import { Spacing } from "@persona/design-tokens";
+import styled, { css } from "styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Link } from "react-router-dom";
+import { useEffect, useRef, useState } from "react";
+import { CopyIcon, EditIcon } from "@persona/icons";
+//#region components/Breadcrumbs/Breadcrumb.tsx
+const COPY_TOOLTIP_LABEL = "Copy ID";
+const DEFAULT_EDIT_MAX_LENGTH = 100;
+const LABEL_ACTION_GAP = Spacing[2];
+const ACTION_BUTTON_GAP = Spacing[1];
+const CrumbRow = styled(HStack)`
+  align-items: center;
+  min-width: 0;
+`;
+const crumbLayoutStyles = (size) => css`
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  min-height: ${({ theme }) => theme.element.height.xs};
+  ${size === "lg" ? css`
+        font-size: ${({ theme }) => theme.text.paragraph.lg.fontSize};
+        line-height: ${({ theme }) => theme.text.paragraph.lg.lineHeight};
+      ` : css``};
+`;
+const editInputTextStyles = (size, current) => {
+	if (current) return size === "lg" ? paragraphMixins.lgBold : paragraphMixins.mdBold;
+	return size === "lg" ? paragraphMixins.lg : paragraphMixins.md;
+};
+const ancestorCrumbStyles = css`
+  ${paragraphMixins.md};
+  color: ${({ theme }) => theme.color.text.secondary};
+  text-decoration: none;
+  transition: color ${"100ms"} ease-out;
+  ${focusOutline}
+  ${({ $size }) => crumbLayoutStyles($size)}
+
+  &:hover {
+    color: ${({ theme }) => theme.color.text.primary};
+  }
+`;
+const AncestorNavLink = styled(Link)`
+  ${ancestorCrumbStyles}
+`;
+const AncestorNavButton = styled.button`
+  ${ancestorCrumbStyles}
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+`;
+const InlineEditInput = styled(Input_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 = styled(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] = useState(false);
+	const [copied, setCopied] = 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__ */ jsx(Tooltip, {
+		trigger: /* @__PURE__ */ jsx("span", {
+			onMouseEnter: handleMouseEnter,
+			onMouseLeave: handleMouseLeave,
+			children: /* @__PURE__ */ jsx(IconButton, {
+				type: "button",
+				size: "sm",
+				"aria-label": `Copy ${copyValue}`,
+				onClick: (event) => {
+					event.preventDefault();
+					event.stopPropagation();
+					handleCopy();
+				},
+				children: /* @__PURE__ */ jsx(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] = useState(false);
+	const [editValue, setEditValue] = useState(label);
+	const [editMinWidth, setEditMinWidth] = useState();
+	const editInputRef = useRef(null);
+	useEffect(() => {
+		if (!isEditing) setEditValue(label);
+	}, [isEditing, label]);
+	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__ */ jsxs(HStack, {
+		spacing: ACTION_BUTTON_GAP,
+		align: "center",
+		children: [onEdit && /* @__PURE__ */ jsx(IconButton, {
+			type: "button",
+			size: "sm",
+			"aria-label": `Edit ${label}`,
+			onClick: (event) => {
+				event.preventDefault();
+				event.stopPropagation();
+				setIsEditing(true);
+			},
+			children: /* @__PURE__ */ jsx(EditIcon, {})
+		}), showCopyAction && copyValue != null && /* @__PURE__ */ jsx(BreadcrumbCopyButton, {
+			copyValue,
+			copyTooltipLabel,
+			onCopy
+		})]
+	});
+	if (isEditing) return /* @__PURE__ */ jsx(CrumbRow, {
+		spacing: LABEL_ACTION_GAP,
+		children: /* @__PURE__ */ 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__ */ jsxs(CrumbRow, {
+		spacing: LABEL_ACTION_GAP,
+		children: [/* @__PURE__ */ 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__ */ jsxs(CrumbRow, {
+		spacing: LABEL_ACTION_GAP,
+		children: [/* @__PURE__ */ jsx(AncestorNavButton, {
+			type: "button",
+			onClick,
+			$size: size,
+			children: label
+		}), inlineActions]
+	});
+	return /* @__PURE__ */ jsxs(CrumbRow, {
+		spacing: LABEL_ACTION_GAP,
+		children: [/* @__PURE__ */ jsx(AncestorNavLink, {
+			to: href ?? "",
+			$size: size,
+			children: label
+		}), inlineActions]
+	});
+};
+//#endregion
+//#region components/Breadcrumbs/Breadcrumbs.tsx
+const BreadcrumbList = styled.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.li`
+  display: flex;
+  align-items: center;
+  min-width: 0;
+`;
+const Separator = styled.span`
+  padding: 0 ${Spacing[2]};
+  color: ${({ theme }) => theme.color.text.tertiary};
+  user-select: none;
+  ${({ $size }) => $size === "lg" ? paragraphMixins.lg : paragraphMixins.md};
+`;
+const Breadcrumbs = ({ items, size = "md", headingAs = "h1", "aria-label": ariaLabel = "Breadcrumbs", className }) => {
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": ariaLabel,
+		className,
+		children: /* @__PURE__ */ jsx(BreadcrumbList, { children: intersperse(items.map((item, index) => {
+			const isCurrent = index === items.length - 1;
+			return /* @__PURE__ */ jsx(BreadcrumbListItem, {
+				"aria-current": isCurrent ? "page" : void 0,
+				children: /* @__PURE__ */ jsx(Breadcrumb, {
+					...item,
+					size,
+					current: isCurrent,
+					headingAs
+				})
+			}, `${item.label}-${index}`);
+		}), (separatorIndex) => /* @__PURE__ */ jsx(BreadcrumbListItem, {
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(Separator, {
+				$size: size,
+				children: "/"
+			})
+		}, `separator-${separatorIndex}`)) })
+	});
+};
+//#endregion
+export { Breadcrumbs as t };
+
+//# sourceMappingURL=Breadcrumbs-W8hIhdHD.mjs.map