@persona/design-system 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -7,6 +7,33 @@ Summary of changes to the @persona/design-system package.
 > entry alongside a feature PR only creates conflicts and duplicates — ship the change and let the
 > release regenerate the entry.
 
+## [0.4.0] - 2026-09-15
+
+- **2026-09-11**: Moved the FiltersV2 URL-state codec into the package (`url-state.ts`), exporting the helpers and types for encoding table filter rules in the URL
+- **2026-09-10**: Added `lib/date-filter`, a shared relative-date value codec, wired as a new tsdown entry point
+- **2026-09-10**: Shared the date-rule intent helper between FiltersV2 value controls via `date-rule-intent`
+- **2026-09-10**: Added a column tooltip config to TableBox for cells that explain their value on hover
+- **2026-09-10**: Removed the emoji and "Oops" phrasing from CardV2 load-error copy
+- **2026-09-10**: Fixed Select not dismissing when another trigger is clicked
+- **2026-09-10**: Moved date-rule resolution into the package as `date-range-rule-value` in FiltersV2
+- **2026-09-09**: Preserved preset identity through `DateRangePicker` — `RangeCalendarPresets` reports the selected preset so choosing one keeps its label instead of collapsing to raw dates
+- **2026-09-09**: Added `readOnly` to TableBox `InlineEditConfig` so an overridden cell renders display-only
+- **2026-09-09**: Widened TableBox column `title` from `string` to `ReactNode`
+- **2026-09-09**: Added `isDefault` on table views and a "Set as default" menu item to DataTable `ControlBar` via `onSetDefaultView`
+- **2026-09-08**: FiltersV2 controls emit relative date values — `DateRangeValueControl` relative mode, `FilterBar`/`FilterPill` display, and operators
+- **2026-09-08**: FiltersV2 reads relative date values — `relative-date-label` helper, operators, and pill display
+- **2026-09-04**: Added `BottomPanel`, a resizable tabbed drawer (ships `ResizableVerticalPanel`, `ResizeHandle`, and `lib/useResizablePanel`), as a new `./components/BottomPanel` entry point
+- **2026-09-02**: Promoted `RightPanel` from the dashboard into the package as a new `./components/RightPanel` entry point — header title uses `text.large-bold`, divider uses `border.hairline`, and resize uses react-aria `useMove` for keyboard and pointer drags
+
+## [0.3.1] - 2026-09-09
+
+- **2026-09-09**: Added an optional `onCopySuccess` callback to `HoverCopyableField`. When passed, the Copied popover is skipped and the host receives the copied text plus click origin (pointer X + control top; keyboard `0,0` uses the button center)
+- **2026-09-08**: Fixed `LayoutLoadingSpinner` to announce via visually hidden text
+- **2026-09-05**: Normalized the styled-components default export under Node ESM so consumers no longer hit a missing-export interop failure
+- **2026-09-03**: Synchronized embedded modal overlays on open so the host shell can dim and inert the rest of the page when a PDS Modal opens in an iframe
+- **2026-09-02**: Added a reusable `LayoutLoadingSpinner` pattern
+- **2026-08-27**: Sorted DataTable column-picker attributes alphabetically (capitalized labels first, numeric-aware) and added a `sortByRelevance` option that ranks search matches with Fuse
+
 ## [0.3.0] - 2026-09-03
 
 - **2026-09-02**: Fixed DataTable rendering by passing the row `key` as a JSX attribute instead of inside a spread props object, so React keys rows correctly
@@ -49,6 +76,7 @@ Summary of changes to the @persona/design-system package.
 
 ## [0.1.9] - 2026-08-12
 
+- **2026-08-18**: ProgressIndicator: split the old `error` status into `warning` (`WarningFillIcon`, orange, non-blocking) and `error` (`CircleWarningFillIcon`, red, blocking). Warning no longer stops forward progression; error should be the terminal step
 - **2026-08-12**: Moved `@persona/design-tokens`, `@persona/icons`, and `styled-components` from dependencies to peerDependencies so consumers supply the single copy PDS renders against, instead of installing PDS's own duplicates
 - **2026-08-11**: Made PageHeader's `breadcrumbs` variant forbid `subtitle` as well as `title` — the subtitle is sunset there, so fold its value into the current crumb
 - **2026-08-07**: Exported `TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL` from TableBoxField and aligned TableBox empty-state padding with data rows so adding the first row no longer shifts the table

package/README.md

@@ -20,9 +20,9 @@ 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                                         |
+| `TOKENS.md`     | `Color` / `Spacing` / `Typography` selection and catalog                                |
+| `PATTERNS.md`   | Forms, layout, indicators, feedback, empty states, panels                                |
+| `COMPONENTS.md` | Which PDS component to use (and its import path); APIs live in each component's `.mdx` when one exists, otherwise in the published types |
 
 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-CnNf5T-l.d.mts → Action-CcAyQpYN.d.mts}

@@ -1,5 +1,5 @@
-import { n as Tooltip } from "./Tooltip-D_a-RwAN.mjs";
-import { t as RequireOneOf } from "./utilities-DnSIlR1i.mjs";
+import { n as Tooltip } from "./Tooltip-DabloV0o.mjs";
+import { t as RequireOneOf } from "./utilities-BHMNnJ8h.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-CnNf5T-l.d.mts.map
+//# sourceMappingURL=Action-CcAyQpYN.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-CnNf5T-l.mjs";
+import { i as TextAction, n as IconAction, r as MenuAction, t as Action } from "./Action-CcAyQpYN.mjs";
 export { Action, IconAction, MenuAction, TextAction };

package/dist/AdvancedFilterRuleRow.d.mts

@@ -1,7 +1,7 @@
-import { a as FilterField, c as FilterOperator, d as FilterSize, l as FilterRule, u as FilterRuleValue } from "./types-C-TkDdkG.mjs";
-import { t as FieldRegistry } from "./FieldRegistry-DdA63Vnh.mjs";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { a as FilterField, c as FilterOperator, d as FilterRuleValueChange, f as FilterSize, l as FilterRule, u as FilterRuleValue } from "./types-V8UJX-rk.mjs";
+import { t as FieldRegistry } from "./FieldRegistry-D6niLExM.mjs";
 import { ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region components/DataTable/TableControls/FiltersV2/AdvancedFilterRulesPopover/AdvancedFilterRuleRow.d.ts
 interface AdvancedFilterRuleRowProps {
@@ -15,8 +15,8 @@ interface AdvancedFilterRuleRowProps {
   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;
+  onValueChange: (groupIndex: number, ruleIndex: number, nextValue: FilterRuleValue, relativeDate?: FilterRule['relativeDate'] | null) => void;
+  renderValueControl: (field: FilterField, operator: FilterOperator, value: FilterRuleValue, onChange: FilterRuleValueChange, relativeDate?: FilterRule['relativeDate']) => ReactNode;
 }
 declare function AdvancedFilterRuleRow({
   registry,

package/dist/AdvancedFilterRulesPopover.d.mts

@@ -1,7 +1,7 @@
-import { a as FilterField, c as FilterOperator, d as FilterSize, n as CompoundExpression, u as FilterRuleValue } from "./types-C-TkDdkG.mjs";
-import { t as FieldRegistry } from "./FieldRegistry-DdA63Vnh.mjs";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { a as FilterField, c as FilterOperator, d as FilterRuleValueChange, f as FilterSize, l as FilterRule, n as CompoundExpression, u as FilterRuleValue } from "./types-V8UJX-rk.mjs";
+import { t as FieldRegistry } from "./FieldRegistry-D6niLExM.mjs";
 import { ReactElement, ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region components/DataTable/TableControls/FiltersV2/AdvancedFilterRulesPopover/AdvancedFilterRulesPopover.d.ts
 interface AdvancedFilterRulesPopoverProps {
@@ -30,7 +30,7 @@ interface AdvancedFilterRulesPopoverProps {
    * exercise this component in isolation should pass a story-local
    * stub.
    */
-  renderValueControl: (field: FilterField, operator: FilterOperator, value: FilterRuleValue, onChange: (value: FilterRuleValue) => void) => ReactNode;
+  renderValueControl: (field: FilterField, operator: FilterOperator, value: FilterRuleValue, onChange: FilterRuleValueChange, relativeDate?: FilterRule['relativeDate']) => ReactNode;
 }
 /**
  * DNF (OR-of-AND) editor popover for the compound expression owned by the

package/dist/ArrayValueControl.d.mts

@@ -1,4 +1,4 @@
-import { t as ValueControlProps } from "./types-NJtAxsU1.mjs";
+import { t as ValueControlProps } from "./types-B5VmRRMR.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region components/DataTable/TableControls/FiltersV2/value-controls/ArrayValueControl/ArrayValueControl.d.ts

package/dist/Attribute.d.mts

@@ -1,10 +1,10 @@
-import { n as IconButtonProps } from "./IconButton-CBcW7ZU8.mjs";
-import { i as ParagraphSize } from "./text-BaQdW8qa.mjs";
-import { c as ParagraphProps, u as SpanProps } from "./Text-CfIFUyHt.mjs";
-import * as _$styled_components0 from "styled-components";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { n as IconButtonProps } from "./IconButton-BpyOr8Ev.mjs";
+import { i as ParagraphSize } from "./text-DjTGRUM1.mjs";
+import { c as ParagraphProps, u as SpanProps } from "./Text-CAKHcXSd.mjs";
 import * as _$react from "react";
 import { ComponentPropsWithoutRef, ComponentType, FC, PropsWithChildren, ReactNode } from "react";
+import * as _$styled_components0 from "styled-components";
+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 * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region components/Attribute/AttributeGrid.d.ts
 type AttributeGridProps = {

package/dist/{Badge-BqS6Nk4J.mjs → Badge-BL0J5oMa.mjs}

@@ -1,5 +1,5 @@
-import { n as Sticker } from "./Sticker-xtDMuOoN.mjs";
-import styled, { css } from "styled-components";
+import { a as styled, r as css } from "./styledComponentsInterop-8zScIQyC.mjs";
+import { n as Sticker } from "./Sticker-CQ6sOKUj.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region components/Badge/Badge.tsx
 const Badge = styled(({ variant, ...rest }) => {
@@ -28,4 +28,4 @@ const Badge = styled(({ variant, ...rest }) => {
 //#endregion
 export { Badge as t };
 
-//# sourceMappingURL=Badge-BqS6Nk4J.mjs.map
+//# sourceMappingURL=Badge-BL0J5oMa.mjs.map

package/dist/{Badge-BqS6Nk4J.mjs.map → Badge-BL0J5oMa.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Badge-BqS6Nk4J.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-BL0J5oMa.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 * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region components/Banner/Banner.d.ts
 interface BannerProps extends ComponentPropsWithoutRef<'div'> {

package/dist/BooleanValueControl.d.mts

@@ -1,4 +1,4 @@
-import { t as ValueControlProps } from "./types-NJtAxsU1.mjs";
+import { t as ValueControlProps } from "./types-B5VmRRMR.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region components/DataTable/TableControls/FiltersV2/value-controls/BooleanValueControl/BooleanValueControl.d.ts

package/dist/BottomPanel.d.mts

@@ -0,0 +1,32 @@
+import * as _$react from "react";
+import { ReactNode } from "react";
+
+//#region components/BottomPanel/BottomPanel.d.ts
+interface BottomPanelItemProps {
+  /** Tab text; also the key `openPanel(label)` looks up. Unique per BottomPanel. */
+  label: string;
+  /**
+   * Tab body. Every panel stays mounted while another tab is selected, so local
+   * state (scroll, expanded rows) survives a switch.
+   */
+  content: ReactNode;
+  /** Count shown as a badge on the tab. `0`/`undefined` hides it. */
+  badge?: number;
+}
+interface BottomPanelHandle {
+  /** Select the tab and expand the drawer if collapsed. No-op for an unknown label. */
+  openPanel: (label: string) => void;
+}
+interface BottomPanelProps {
+  /** Tabs to show, in order. */
+  panels: BottomPanelItemProps[];
+}
+/**
+ * Resizable drawer anchored to the bottom of its container with one tab per
+ * panel. Owns the tab bar, expand/collapse/resize, and always-mounted content;
+ * the caller owns what each panel shows.
+ */
+declare const BottomPanel: _$react.ForwardRefExoticComponent<BottomPanelProps & _$react.RefAttributes<BottomPanelHandle>>;
+//#endregion
+export { BottomPanelHandle, BottomPanelItemProps, BottomPanelProps, BottomPanel as default };
+//# sourceMappingURL=BottomPanel.d.mts.map

package/dist/{Breadcrumb-DEwZFJHF.d.mts → Breadcrumb-Df06cTnA.d.mts}

@@ -49,4 +49,4 @@ declare const Breadcrumb: ({
 }: BreadcrumbProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { BreadcrumbSize as i, BreadcrumbHeadingAs as n, BreadcrumbProps as r, Breadcrumb as t };
-//# sourceMappingURL=Breadcrumb-DEwZFJHF.d.mts.map
+//# sourceMappingURL=Breadcrumb-Df06cTnA.d.mts.map

package/dist/Breadcrumb.d.mts

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

package/dist/{Breadcrumbs-0e_3v9FF.d.mts → Breadcrumbs-D_Gzd4_J.d.mts}

@@ -1,4 +1,4 @@
-import { i as BreadcrumbSize, n as BreadcrumbHeadingAs, r as BreadcrumbProps } from "./Breadcrumb-DEwZFJHF.mjs";
+import { i as BreadcrumbSize, n as BreadcrumbHeadingAs, r as BreadcrumbProps } from "./Breadcrumb-Df06cTnA.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region components/Breadcrumbs/Breadcrumbs.d.ts
@@ -23,4 +23,4 @@ declare const Breadcrumbs: ({
 }: BreadcrumbsProps) => _$react_jsx_runtime0.JSX.Element | null;
 //#endregion
 export { BreadcrumbsItemProps as n, BreadcrumbsProps as r, Breadcrumbs as t };
-//# sourceMappingURL=Breadcrumbs-0e_3v9FF.d.mts.map
+//# sourceMappingURL=Breadcrumbs-D_Gzd4_J.d.mts.map

package/dist/{Breadcrumbs-CqKtnZqu.mjs → Breadcrumbs-Zi5p0HDR.mjs}

@@ -1,19 +1,19 @@
-import { focusOutline } from "./mixins/focus.mjs";
-import "./variables/transitions.mjs";
+import { a as styled, r as css } from "./styledComponentsInterop-8zScIQyC.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-BfDlic2K.mjs";
-import { t as intersperse } from "./intersperse-yd3oMrQl.mjs";
+import { i as Paragraph } from "./Text-B0orb-cZ.mjs";
+import "./variables/transitions.mjs";
+import { a as Tooltip } from "./Tooltip-iJcfJqxn.mjs";
+import { focusOutline } from "./mixins/focus.mjs";
+import { t as HStack } from "./Stack-Bre2oiov.mjs";
+import { t as IconButton } from "./IconButton-BgL3QUVO.mjs";
+import { t as intersperse } from "./intersperse-DQAyfeEw.mjs";
 import Input_default from "./components/Input/index.mjs";
-import { t as TechnicalSticker } from "./TechnicalSticker-DTjg6d2F.mjs";
+import { t as TechnicalSticker } from "./TechnicalSticker-ClRR_6Ly.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 { jsx, jsxs } from "react/jsx-runtime";
 import { CopyIcon, EditIcon } from "@persona/icons";
+import { Link } from "react-router-dom";
 //#region components/Breadcrumbs/Breadcrumb.tsx
 const COPY_TOOLTIP_LABEL = "Copy ID";
 const COPIED_TOOLTIP_LABEL = "Copied!";
@@ -302,4 +302,4 @@ const Breadcrumbs = ({ items, size = "md", headingAs = "h1", "aria-label": ariaL
 //#endregion
 export { Breadcrumbs as t };
 
-//# sourceMappingURL=Breadcrumbs-CqKtnZqu.mjs.map
+//# sourceMappingURL=Breadcrumbs-Zi5p0HDR.mjs.map

package/dist/{Breadcrumbs-CqKtnZqu.mjs.map → Breadcrumbs-Zi5p0HDR.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs-CqKtnZqu.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 TechnicalSticker from 'design-system/components/TechnicalSticker';\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 COPIED_TOOLTIP_LABEL = 'Copied!';\nconst DEFAULT_EDIT_MAX_LENGTH = 100;\nconst COPY_TOOLTIP_STICKER_MAX_WIDTH = '96px';\nconst COPY_TOOLTIP_STICKER_TOOLTIP_MAX_WIDTH = '250px';\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  /** Copy tooltip text shown after a successful copy. Defaults to `Copied!`. */\n  copiedTooltipLabel?: string;\n  /**\n   * Appends `copyValue` to both copy tooltip texts as a `TechnicalSticker`, so the tooltip shows\n   * which token is being copied.\n   */\n  showCopyValueInTooltip?: boolean;\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  copiedTooltipLabel = COPIED_TOOLTIP_LABEL,\n  showCopyValueInTooltip = false,\n  onCopy,\n}: {\n  copyValue: string;\n  copyTooltipLabel?: string;\n  copiedTooltipLabel?: string;\n  showCopyValueInTooltip?: boolean;\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  const tooltipLabel = copied ? copiedTooltipLabel : copyTooltipLabel;\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      maxWidth={showCopyValueInTooltip ? COPY_TOOLTIP_STICKER_TOOLTIP_MAX_WIDTH : undefined}\n    >\n      {showCopyValueInTooltip ? (\n        <HStack spacing={ACTION_BUTTON_GAP} align='center'>\n          <span>{tooltipLabel}</span>\n          <TechnicalSticker copyable={false} maxWidth={COPY_TOOLTIP_STICKER_MAX_WIDTH}>\n            {copyValue}\n          </TechnicalSticker>\n        </HStack>\n      ) : (\n        tooltipLabel\n      )}\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  copiedTooltipLabel,\n  showCopyValueInTooltip,\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          copiedTooltipLabel={copiedTooltipLabel}\n          showCopyValueInTooltip={showCopyValueInTooltip}\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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"}
+{"version":3,"file":"Breadcrumbs-Zi5p0HDR.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 TechnicalSticker from 'design-system/components/TechnicalSticker';\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 COPIED_TOOLTIP_LABEL = 'Copied!';\nconst DEFAULT_EDIT_MAX_LENGTH = 100;\nconst COPY_TOOLTIP_STICKER_MAX_WIDTH = '96px';\nconst COPY_TOOLTIP_STICKER_TOOLTIP_MAX_WIDTH = '250px';\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  /** Copy tooltip text shown after a successful copy. Defaults to `Copied!`. */\n  copiedTooltipLabel?: string;\n  /**\n   * Appends `copyValue` to both copy tooltip texts as a `TechnicalSticker`, so the tooltip shows\n   * which token is being copied.\n   */\n  showCopyValueInTooltip?: boolean;\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  copiedTooltipLabel = COPIED_TOOLTIP_LABEL,\n  showCopyValueInTooltip = false,\n  onCopy,\n}: {\n  copyValue: string;\n  copyTooltipLabel?: string;\n  copiedTooltipLabel?: string;\n  showCopyValueInTooltip?: boolean;\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  const tooltipLabel = copied ? copiedTooltipLabel : copyTooltipLabel;\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      maxWidth={showCopyValueInTooltip ? COPY_TOOLTIP_STICKER_TOOLTIP_MAX_WIDTH : undefined}\n    >\n      {showCopyValueInTooltip ? (\n        <HStack spacing={ACTION_BUTTON_GAP} align='center'>\n          <span>{tooltipLabel}</span>\n          <TechnicalSticker copyable={false} maxWidth={COPY_TOOLTIP_STICKER_MAX_WIDTH}>\n            {copyValue}\n          </TechnicalSticker>\n        </HStack>\n      ) : (\n        tooltipLabel\n      )}\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  copiedTooltipLabel,\n  showCopyValueInTooltip,\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          copiedTooltipLabel={copiedTooltipLabel}\n          showCopyValueInTooltip={showCopyValueInTooltip}\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.mts

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

package/dist/{Button-C0F0F2IL.d.mts → Button-BrI1s2-r.d.mts}

@@ -1,8 +1,8 @@
-import { t as PseudoClassProps } from "./PseudoClassProps-CcSlKNev.mjs";
-import * as _$styled_components0 from "styled-components";
-import { LinkProps } from "react-router-dom";
+import { t as PseudoClassProps } from "./PseudoClassProps-BPdn-ofQ.mjs";
 import * as _$react from "react";
 import { ComponentPropsWithoutRef, MouseEvent, ReactNode, Ref } from "react";
+import * as _$styled_components0 from "styled-components";
+import { LinkProps } from "react-router-dom";
 
 //#region components/Button/Button.d.ts
 interface ButtonPropsWithTransientProps extends Omit<ButtonProps, 'isPending'> {
@@ -98,4 +98,4 @@ interface ButtonProps extends ComponentPropsWithoutRef<'button'>, Omit<PseudoCla
 declare const Button: _$react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
 //#endregion
 export { SuffixIconContainer as a, StyledButton as i, ButtonChildren as n, ButtonProps as r, Button as t };
-//# sourceMappingURL=Button-C0F0F2IL.d.mts.map
+//# sourceMappingURL=Button-BrI1s2-r.d.mts.map

package/dist/Button.d.mts

@@ -1,2 +1,2 @@
-import { a as SuffixIconContainer, i as StyledButton, n as ButtonChildren, r as ButtonProps, t as Button } from "./Button-C0F0F2IL.mjs";
+import { a as SuffixIconContainer, i as StyledButton, n as ButtonChildren, r as ButtonProps, t as Button } from "./Button-BrI1s2-r.mjs";
 export { ButtonChildren, ButtonProps, StyledButton, SuffixIconContainer, Button as default };

package/dist/ButtonGroup.d.mts

@@ -1,5 +1,5 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as _$react from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import { ToggleGroupMultipleProps, ToggleGroupSingleProps } from "@radix-ui/react-toggle-group";
 

package/dist/{Calendar-BvLNcHQM.d.mts → Calendar-DjnoZVcT.d.mts}

@@ -1,5 +1,5 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { Ref } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { AriaCalendarProps, DateValue } from "react-aria";
 
 //#region components/DatePicker/Calendar/Calendar.d.ts
@@ -9,4 +9,4 @@ interface CalendarProps extends AriaCalendarProps<DateValue> {
 declare const Calendar: (props: CalendarProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { Calendar as t };
-//# sourceMappingURL=Calendar-BvLNcHQM.d.mts.map
+//# sourceMappingURL=Calendar-DjnoZVcT.d.mts.map

package/dist/Calendar.d.mts

@@ -1,2 +1,2 @@
-import { t as Calendar } from "./Calendar-BvLNcHQM.mjs";
+import { t as Calendar } from "./Calendar-DjnoZVcT.mjs";
 export { Calendar as default };

package/dist/CalendarBase.d.mts

@@ -1,4 +1,4 @@
-import { n as IconButtonProps } from "./IconButton-CBcW7ZU8.mjs";
+import { n as IconButtonProps } from "./IconButton-BpyOr8Ev.mjs";
 import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 

package/dist/{Card-BMCB9eFC.mjs → Card-CKrJtn1f.mjs}

@@ -1,10 +1,10 @@
+import { a as styled, r as css } from "./styledComponentsInterop-8zScIQyC.mjs";
 import { headingMixins, paragraphMixins } from "./mixins/text.mjs";
 import "./variables/spacing.mjs";
-import { t as Spacer_default } from "./Spacer-CJp0lwkL.mjs";
-import { i as Paragraph } from "./Text-RcEfNFLx.mjs";
+import { t as Spacer_default } from "./Spacer-BsK8tTwA.mjs";
+import { i as Paragraph } from "./Text-B0orb-cZ.mjs";
 import { t as useToggle } from "./useToggle-Bo3yd14Y.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
-import styled, { css } from "styled-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDownIcon, ChevronUpIcon } from "@persona/icons";
 //#region components/Card/Header/Header.tsx
@@ -202,4 +202,4 @@ var Card_default = Object.assign(Card, {
 //#endregion
 export { Root as a, HeaderContainer as i, ActionsContainer as n, Title$1 as o, Header as r, TitleContainer as s, Card_default as t };
 
-//# sourceMappingURL=Card-BMCB9eFC.mjs.map
+//# sourceMappingURL=Card-CKrJtn1f.mjs.map

package/dist/{Card-BMCB9eFC.mjs.map → Card-CKrJtn1f.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Card-BMCB9eFC.mjs","names":["Title","Spacer"],"sources":["../components/Card/Header/Header.tsx","../components/Card/Card.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { headingMixins, paragraphMixins } from 'design-system/mixins/text';\n\nexport interface HeaderProps {\n  children: ReactNode;\n  subtitle?: ReactNode;\n  variant?: 'title' | 'section';\n  actions?: ReactNode;\n  $matchCardV2?: boolean;\n}\n\nexport const HeaderContainer = styled.div<Pick<HeaderProps, 'variant' | '$matchCardV2'>>`\n  ${paragraphMixins.md};\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  &:not(:only-child) {\n    margin: 0px 0px ${Spacing[4]} 0px;\n    ${({ $matchCardV2 }) =>\n      $matchCardV2 &&\n      css`\n        margin-bottom: ${Spacing[1]};\n      `}\n  }\n  ${({ variant }) =>\n    variant === 'section' &&\n    css`\n      border-bottom: 1px solid ${({ theme }) => theme.color.border.primary};\n    `}\n`;\n\nexport const TitleContainer = styled.div`\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[2]};\n`;\n\nexport const Title = styled.h3<Pick<HeaderProps, 'variant' | '$matchCardV2'>>`\n  display: flex;\n  align-items: center;\n  margin: 0px;\n  gap: ${Spacing[2]};\n  ${({ variant }) => {\n    switch (variant) {\n      case 'section':\n        return paragraphMixins.lgBold;\n      case 'title':\n      default:\n        return headingMixins.sm;\n    }\n  }}\n  ${({ $matchCardV2 }) =>\n    $matchCardV2 &&\n    css`\n      ${headingMixins.xsm};\n    `}\n`;\n\nexport const ActionsContainer = styled.div`\n  color: ${({ theme }) => theme.color.text.secondary};\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[2]};\n`;\n\nconst FullDivider = styled.hr`\n  border-top: 1px solid ${Color.BorderDivider};\n  margin: 0;\n\n  /* Use negative margin to bleed the divider out of the grid. */\n  margin-left: -${Spacing[5]};\n  margin-right: -${Spacing[5]};\n`;\n\nconst Header = ({\n  children,\n  variant,\n  actions,\n  subtitle,\n  $matchCardV2,\n  ...elemProps\n}: HeaderProps & ComponentPropsWithoutRef<'div'>) => {\n  return (\n    <>\n      <HeaderContainer variant={variant} {...elemProps} $matchCardV2={$matchCardV2}>\n        <TitleContainer>\n          <Title variant={variant} $matchCardV2={$matchCardV2}>\n            {children}\n          </Title>\n          {subtitle}\n        </TitleContainer>\n        <ActionsContainer>{actions}</ActionsContainer>\n      </HeaderContainer>\n      {$matchCardV2 && <FullDivider />}\n    </>\n  );\n};\n\nexport const Root = Header;\n\nexport default Header;\n","import type {\n  ComponentPropsWithoutRef,\n  FC,\n  PropsWithChildren,\n  ReactElement,\n  ReactNode,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { ChevronDownIcon, ChevronUpIcon } from '@persona/icons';\nimport Header, { type HeaderProps } from 'design-system/components/Card/Header';\nimport Spacer from 'design-system/components/Spacer';\nimport { Paragraph } from 'design-system/components/Text';\nimport useToggle from 'design-system/lib/useToggle';\nimport { BASE } from 'design-system/variables/spacing';\n\nexport interface CardProps {\n  elevated?: boolean;\n  $matchCardV2?: boolean;\n}\n\n/**\n * @deprecated Use CardV2 instead\n */\nconst Card = styled('div')<CardProps>`\n  border-radius: ${({ theme }) => {\n    return theme.card.borderRadius;\n  }};\n  display: flex;\n  flex-direction: column;\n  margin-bottom: ${Spacing[4]};\n  background-color: ${({ theme }) => theme.color.background.primary};\n  font-family: ${({ theme }) => theme.text.fontFamily.base};\n  ${({ elevated }) =>\n    elevated &&\n    css`\n      box-shadow: 0px 0px 14px 2px rgba(0, 0, 0, 0.12);\n    `}\n\n  ${({ $matchCardV2 }) =>\n    $matchCardV2 &&\n    css`\n      margin-bottom: 0;\n    `}\n`;\n\n/**\n * To be used within cards. Provides padding and basic layout. Should not be\n * used if card's contents are edge-to-edge with no padding.\n */\nconst Body = styled('section')<{ gap?: number; padding?: Spacing; $matchCardV2?: boolean }>`\n  margin: 0;\n  padding: ${({ padding }) => padding ?? Spacing[5]};\n  display: grid;\n  grid-auto-flow: row;\n  grid-gap: ${({ gap }) => (gap != null ? gap : BASE)}px;\n  /**\n    * Prevent grid blowout\n    * https://css-tricks.com/preventing-a-grid-blowout/\n    */\n  grid-template-columns: minmax(0, 1fr);\n\n  ${({ $matchCardV2 }) =>\n    $matchCardV2 &&\n    css`\n      padding: ${Spacing[4]} ${Spacing[5]};\n      grid-gap: ${Spacing[3]};\n    `}\n`;\n\nconst IconContainer = styled('div')`\n  margin-right: ${Spacing[3]};\n  display: flex;\n  align-items: center;\n\n  > svg {\n    height: 24px;\n    width: 24px;\n  }\n`;\n\nconst ImageWrapper = styled('div')<{ height: number }>`\n  width: 100%;\n  overflow: hidden;\n  border-radius: ${({ theme }) => theme.card.borderRadius} ${({ theme }) => theme.card.borderRadius}\n    0px 0px;\n\n  ${({ height }) => {\n    return css`\n      height: ${height}px;\n    `;\n  }};\n\n  > img,\n  svg {\n    width: 100%;\n    border-radius: ${({ theme }) => theme.card.borderRadius}\n      ${({ theme }) => theme.card.borderRadius} 0px 0px;\n  }\n`;\n\ninterface TitleBaseProps {\n  icon?: ReactElement;\n}\n\ninterface TitleProps\n  extends\n    TitleBaseProps,\n    Pick<HeaderProps, 'actions' | 'subtitle'>,\n    Omit<ComponentPropsWithoutRef<'h3'>, 'color' | 'size'> {\n  $matchCardV2?: boolean;\n}\n\n/**\n * Label to be used within cards. Note that some cards lead with a Title while\n * some others lead with a Subtitle (see below).\n */\nconst Title: FC<TitleProps> = ({ icon, children, ...elemProps }) => (\n  <Header variant='title' {...elemProps}>\n    {icon != null && <IconContainer>{icon}</IconContainer>}\n    {children}\n  </Header>\n);\n\n/**\n * Smaller label to be used within cards.\n */\nconst Subtitle = styled(Paragraph).attrs(() => ({ size: 'md' }))`\n  color: ${({ theme }) => theme.color.text.tertiary};\n`;\n\nexport interface SectionProps\n  extends\n    Pick<HeaderProps, 'subtitle' | 'actions'>,\n    Omit<ComponentPropsWithoutRef<'h3'>, 'color' | 'size'> {}\n\n/**\n * Header for section headers within a Card\n */\nconst SectionHeader = ({ children, ...elemProps }: SectionProps) => (\n  <Header variant='section' {...elemProps}>\n    {children}\n  </Header>\n);\n\n/**\n * Wrapper for a full-width image to be used at the top of a card.\n */\n\ninterface ImageProps {\n  height: number;\n  children: ReactNode;\n}\n\nconst Image: FC<ImageProps> = ({ height, children, ...elemProps }) => (\n  <ImageWrapper {...elemProps} height={height}>\n    {children}\n  </ImageWrapper>\n);\n\ninterface CollapsibleSectionProps {\n  id?: string;\n  defaultExpanded?: boolean;\n  title: ReactNode;\n}\n\nconst CollapsibleSection: FC<PropsWithChildren<CollapsibleSectionProps>> = ({\n  id,\n  defaultExpanded,\n  title,\n  children,\n}) => {\n  const [isOpen, { toggle }] = useToggle(defaultExpanded);\n\n  return (\n    <section>\n      <div id={id} onClick={toggle}>\n        <Header variant='section'>\n          <HeaderIcon>\n            {isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}\n            <Spacer width={0.5} height={0} />\n          </HeaderIcon>\n          {title}\n        </Header>\n      </div>\n      <div>\n        {isOpen && (\n          <>\n            <Spacer height={1} />\n            {children}\n          </>\n        )}\n      </div>\n      <Spacer height={1} />\n    </section>\n  );\n};\n\nconst HeaderIcon = styled.div`\n  display: flex;\n`;\n\nexport default Object.assign(Card, {\n  Title,\n  SectionHeader,\n  Subtitle,\n  Body,\n  Image,\n  CollapsibleSection,\n});\n"],"mappings":"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"}
+{"version":3,"file":"Card-CKrJtn1f.mjs","names":["Title","Spacer"],"sources":["../components/Card/Header/Header.tsx","../components/Card/Card.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { headingMixins, paragraphMixins } from 'design-system/mixins/text';\n\nexport interface HeaderProps {\n  children: ReactNode;\n  subtitle?: ReactNode;\n  variant?: 'title' | 'section';\n  actions?: ReactNode;\n  $matchCardV2?: boolean;\n}\n\nexport const HeaderContainer = styled.div<Pick<HeaderProps, 'variant' | '$matchCardV2'>>`\n  ${paragraphMixins.md};\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  &:not(:only-child) {\n    margin: 0px 0px ${Spacing[4]} 0px;\n    ${({ $matchCardV2 }) =>\n      $matchCardV2 &&\n      css`\n        margin-bottom: ${Spacing[1]};\n      `}\n  }\n  ${({ variant }) =>\n    variant === 'section' &&\n    css`\n      border-bottom: 1px solid ${({ theme }) => theme.color.border.primary};\n    `}\n`;\n\nexport const TitleContainer = styled.div`\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[2]};\n`;\n\nexport const Title = styled.h3<Pick<HeaderProps, 'variant' | '$matchCardV2'>>`\n  display: flex;\n  align-items: center;\n  margin: 0px;\n  gap: ${Spacing[2]};\n  ${({ variant }) => {\n    switch (variant) {\n      case 'section':\n        return paragraphMixins.lgBold;\n      case 'title':\n      default:\n        return headingMixins.sm;\n    }\n  }}\n  ${({ $matchCardV2 }) =>\n    $matchCardV2 &&\n    css`\n      ${headingMixins.xsm};\n    `}\n`;\n\nexport const ActionsContainer = styled.div`\n  color: ${({ theme }) => theme.color.text.secondary};\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[2]};\n`;\n\nconst FullDivider = styled.hr`\n  border-top: 1px solid ${Color.BorderDivider};\n  margin: 0;\n\n  /* Use negative margin to bleed the divider out of the grid. */\n  margin-left: -${Spacing[5]};\n  margin-right: -${Spacing[5]};\n`;\n\nconst Header = ({\n  children,\n  variant,\n  actions,\n  subtitle,\n  $matchCardV2,\n  ...elemProps\n}: HeaderProps & ComponentPropsWithoutRef<'div'>) => {\n  return (\n    <>\n      <HeaderContainer variant={variant} {...elemProps} $matchCardV2={$matchCardV2}>\n        <TitleContainer>\n          <Title variant={variant} $matchCardV2={$matchCardV2}>\n            {children}\n          </Title>\n          {subtitle}\n        </TitleContainer>\n        <ActionsContainer>{actions}</ActionsContainer>\n      </HeaderContainer>\n      {$matchCardV2 && <FullDivider />}\n    </>\n  );\n};\n\nexport const Root = Header;\n\nexport default Header;\n","import type {\n  ComponentPropsWithoutRef,\n  FC,\n  PropsWithChildren,\n  ReactElement,\n  ReactNode,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { ChevronDownIcon, ChevronUpIcon } from '@persona/icons';\nimport Header, { type HeaderProps } from 'design-system/components/Card/Header';\nimport Spacer from 'design-system/components/Spacer';\nimport { Paragraph } from 'design-system/components/Text';\nimport useToggle from 'design-system/lib/useToggle';\nimport { BASE } from 'design-system/variables/spacing';\n\nexport interface CardProps {\n  elevated?: boolean;\n  $matchCardV2?: boolean;\n}\n\n/**\n * @deprecated Use CardV2 instead\n */\nconst Card = styled('div')<CardProps>`\n  border-radius: ${({ theme }) => {\n    return theme.card.borderRadius;\n  }};\n  display: flex;\n  flex-direction: column;\n  margin-bottom: ${Spacing[4]};\n  background-color: ${({ theme }) => theme.color.background.primary};\n  font-family: ${({ theme }) => theme.text.fontFamily.base};\n  ${({ elevated }) =>\n    elevated &&\n    css`\n      box-shadow: 0px 0px 14px 2px rgba(0, 0, 0, 0.12);\n    `}\n\n  ${({ $matchCardV2 }) =>\n    $matchCardV2 &&\n    css`\n      margin-bottom: 0;\n    `}\n`;\n\n/**\n * To be used within cards. Provides padding and basic layout. Should not be\n * used if card's contents are edge-to-edge with no padding.\n */\nconst Body = styled('section')<{ gap?: number; padding?: Spacing; $matchCardV2?: boolean }>`\n  margin: 0;\n  padding: ${({ padding }) => padding ?? Spacing[5]};\n  display: grid;\n  grid-auto-flow: row;\n  grid-gap: ${({ gap }) => (gap != null ? gap : BASE)}px;\n  /**\n    * Prevent grid blowout\n    * https://css-tricks.com/preventing-a-grid-blowout/\n    */\n  grid-template-columns: minmax(0, 1fr);\n\n  ${({ $matchCardV2 }) =>\n    $matchCardV2 &&\n    css`\n      padding: ${Spacing[4]} ${Spacing[5]};\n      grid-gap: ${Spacing[3]};\n    `}\n`;\n\nconst IconContainer = styled('div')`\n  margin-right: ${Spacing[3]};\n  display: flex;\n  align-items: center;\n\n  > svg {\n    height: 24px;\n    width: 24px;\n  }\n`;\n\nconst ImageWrapper = styled('div')<{ height: number }>`\n  width: 100%;\n  overflow: hidden;\n  border-radius: ${({ theme }) => theme.card.borderRadius} ${({ theme }) => theme.card.borderRadius}\n    0px 0px;\n\n  ${({ height }) => {\n    return css`\n      height: ${height}px;\n    `;\n  }};\n\n  > img,\n  svg {\n    width: 100%;\n    border-radius: ${({ theme }) => theme.card.borderRadius}\n      ${({ theme }) => theme.card.borderRadius} 0px 0px;\n  }\n`;\n\ninterface TitleBaseProps {\n  icon?: ReactElement;\n}\n\ninterface TitleProps\n  extends\n    TitleBaseProps,\n    Pick<HeaderProps, 'actions' | 'subtitle'>,\n    Omit<ComponentPropsWithoutRef<'h3'>, 'color' | 'size'> {\n  $matchCardV2?: boolean;\n}\n\n/**\n * Label to be used within cards. Note that some cards lead with a Title while\n * some others lead with a Subtitle (see below).\n */\nconst Title: FC<TitleProps> = ({ icon, children, ...elemProps }) => (\n  <Header variant='title' {...elemProps}>\n    {icon != null && <IconContainer>{icon}</IconContainer>}\n    {children}\n  </Header>\n);\n\n/**\n * Smaller label to be used within cards.\n */\nconst Subtitle = styled(Paragraph).attrs(() => ({ size: 'md' }))`\n  color: ${({ theme }) => theme.color.text.tertiary};\n`;\n\nexport interface SectionProps\n  extends\n    Pick<HeaderProps, 'subtitle' | 'actions'>,\n    Omit<ComponentPropsWithoutRef<'h3'>, 'color' | 'size'> {}\n\n/**\n * Header for section headers within a Card\n */\nconst SectionHeader = ({ children, ...elemProps }: SectionProps) => (\n  <Header variant='section' {...elemProps}>\n    {children}\n  </Header>\n);\n\n/**\n * Wrapper for a full-width image to be used at the top of a card.\n */\n\ninterface ImageProps {\n  height: number;\n  children: ReactNode;\n}\n\nconst Image: FC<ImageProps> = ({ height, children, ...elemProps }) => (\n  <ImageWrapper {...elemProps} height={height}>\n    {children}\n  </ImageWrapper>\n);\n\ninterface CollapsibleSectionProps {\n  id?: string;\n  defaultExpanded?: boolean;\n  title: ReactNode;\n}\n\nconst CollapsibleSection: FC<PropsWithChildren<CollapsibleSectionProps>> = ({\n  id,\n  defaultExpanded,\n  title,\n  children,\n}) => {\n  const [isOpen, { toggle }] = useToggle(defaultExpanded);\n\n  return (\n    <section>\n      <div id={id} onClick={toggle}>\n        <Header variant='section'>\n          <HeaderIcon>\n            {isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}\n            <Spacer width={0.5} height={0} />\n          </HeaderIcon>\n          {title}\n        </Header>\n      </div>\n      <div>\n        {isOpen && (\n          <>\n            <Spacer height={1} />\n            {children}\n          </>\n        )}\n      </div>\n      <Spacer height={1} />\n    </section>\n  );\n};\n\nconst HeaderIcon = styled.div`\n  display: flex;\n`;\n\nexport default Object.assign(Card, {\n  Title,\n  SectionHeader,\n  Subtitle,\n  Body,\n  Image,\n  CollapsibleSection,\n});\n"],"mappings":"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"}

package/dist/{Card-BxNoIQWw.d.mts → Card-mZDNFaJy.d.mts}

@@ -1,9 +1,9 @@
-import { c as ParagraphProps, u as SpanProps } from "./Text-CfIFUyHt.mjs";
-import { i as HeaderProps } from "./Header-CBlB65NY.mjs";
+import { c as ParagraphProps, u as SpanProps } from "./Text-CAKHcXSd.mjs";
+import { i as HeaderProps } from "./Header-BjSoTEX_.mjs";
 import { Spacing } from "@persona/design-tokens";
+import { ComponentPropsWithoutRef, FC, PropsWithChildren, ReactElement, ReactNode } from "react";
 import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-import { ComponentPropsWithoutRef, FC, PropsWithChildren, ReactElement, ReactNode } from "react";
 import * as _$hoist_non_react_statics0 from "hoist-non-react-statics";
 
 //#region components/Card/Card.d.ts
@@ -49,4 +49,4 @@ declare const _default: string & _$styled_components0.StyledComponentBase<"div",
 };
 //#endregion
 export { SectionProps as n, _default as r, CardProps as t };
-//# sourceMappingURL=Card-BxNoIQWw.d.mts.map
+//# sourceMappingURL=Card-mZDNFaJy.d.mts.map

package/dist/Card.d.mts

@@ -1,2 +1,2 @@
-import { n as SectionProps, r as _default, t as CardProps } from "./Card-BxNoIQWw.mjs";
+import { n as SectionProps, r as _default, t as CardProps } from "./Card-mZDNFaJy.mjs";
 export { CardProps, SectionProps, _default as default };

package/dist/Card2.d.mts

@@ -1,6 +1,6 @@
 import { SectionHeading } from "./SectionHeading.mjs";
-import * as _$styled_components0 from "styled-components";
 import { ComponentProps, FC, ReactNode } from "react";
+import * as _$styled_components0 from "styled-components";
 
 //#region components/CardV2/Card.d.ts
 declare const CardContainer: _$styled_components0.StyledComponent<"div", any, {}, never>;
@@ -63,7 +63,7 @@ declare const _default: FC<{
   fullHeight?: boolean;
 } & {
   children?: ReactNode | undefined;
-}, "children" | "loading" | "heading" | "collapsible" | "defaultCollapsed" | "loadingProps" | "empty" | "emptyProps"> & {
+}, "children" | "heading" | "loading" | "collapsible" | "defaultCollapsed" | "loadingProps" | "empty" | "emptyProps"> & {
   children?: ReactNode | undefined;
 }> & {
   Section: FC<Pick<{
@@ -86,7 +86,7 @@ declare const _default: FC<{
     fullHeight?: boolean;
   } & {
     children?: ReactNode | undefined;
-  }, "children" | "loading" | "heading" | "collapsible" | "defaultCollapsed" | "loadingProps" | "empty" | "emptyProps">>;
+  }, "children" | "heading" | "loading" | "collapsible" | "defaultCollapsed" | "loadingProps" | "empty" | "emptyProps">>;
   Stacked: FC<{
     children: ReactNode[];
   }>;