@persona/design-system 0.10.9 → 0.10.11

package/CHANGELOG.md

@@ -1,3 +1,46 @@
+## 0.10.11 (2026-11-04)
+
+### Features
+
+- **design-system:** move components onto the motion scale
+- **design-system:** add charting foundations
+- **design-system:** adopt the motion scale ([#530](https://github.com/persona-id/persona-design-system/pull/530))
+- **design-system:** support server-backed Combobox search ([#517](https://github.com/persona-id/persona-design-system/pull/517))
+- **design-system:** validation errors for Filters V2 value controls ([#529](https://github.com/persona-id/persona-design-system/pull/529))
+- **icons:** add 12px outline star and use it for starred default views ([#528](https://github.com/persona-id/persona-design-system/pull/528))
+- **design-system:** add warn-level motion rules to the pds lint plugin
+- **design-system:** show disabled combobox reasons as tooltips ([#464](https://github.com/persona-id/persona-design-system/pull/464))
+- **design-system:** floating bulk actions on regular DataTables ([#522](https://github.com/persona-id/persona-design-system/pull/522))
+
+### Bug Fixes
+
+- **design-system:** freeze indeterminate ProgressBar under reduced motion
+- **design-system:** correct SmartTextInput result and WIP validation
+- **design-system:** floating action bar uses SurfacePrimary and FgPrimary tokens ([#524](https://github.com/persona-id/persona-design-system/pull/524))
+- **design-system:** see through parentheses and ignore child animations in exit-motion
+- **design-system:** create SmartTextInput measurement canvas lazily
+
+### 🧱 Updated Dependencies
+
+- Updated design-tokens to 0.4.25
+- Updated icons to 0.1.14
+
+## 0.10.10 (2026-11-03)
+
+### Features
+
+- **design-system:** lighten dark Qualitative #9 charting colour ([#9](https://github.com/persona-id/persona-design-system/issues/9))
+
+### Bug Fixes
+
+- **design-system:** classify nullable date, datetime and file schemas by their non-null type
+- **card:** let fullHeight section content shrink to the card height
+
+### 🧱 Updated Dependencies
+
+- Updated design-tokens to 0.4.24
+- Updated icons to 0.1.13
+
 ## 0.10.9 (2026-10-30)
 
 ### Features

package/dist/{Action-CHWYwpYR.d.mts → Action-sLO73eKq.d.mts}

@@ -1,4 +1,4 @@
-import { n as Tooltip } from "./Tooltip-Ddy2Jq0K.mjs";
+import { n as Tooltip } from "./Tooltip-OxVvOfn8.mjs";
 import { t as RequireOneOf } from "./utilities-BDkho6-f.mjs";
 import { ComponentProps, ComponentPropsWithoutRef, ReactElement } from "react";
 
@@ -32,4 +32,4 @@ type MenuAction = Action & {
 };
 //#endregion
 export { TextAction as i, IconAction as n, MenuAction as r, Action as t };
-//# sourceMappingURL=Action-CHWYwpYR.d.mts.map
+//# sourceMappingURL=Action-sLO73eKq.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-CHWYwpYR.mjs";
+import { i as TextAction, n as IconAction, r as MenuAction, t as Action } from "./Action-sLO73eKq.mjs";
 export { Action, IconAction, MenuAction, TextAction };

package/dist/AdvancedFilterRuleRow.d.mts

@@ -1,5 +1,5 @@
-import { d as FilterRuleValue, f as FilterRuleValueChange, l as FilterOperator, o as FilterField, p as FilterSize, u as FilterRule } from "./types-DLnCkvTt.mjs";
-import { t as FieldRegistry } from "./FieldRegistry-C2NVPhMO.mjs";
+import { d as FilterRuleValue, f as FilterRuleValueChange, l as FilterOperator, o as FilterField, p as FilterSize, u as FilterRule } from "./types-BJqmRXFV.mjs";
+import { t as FieldRegistry } from "./FieldRegistry-CJwGpUVK.mjs";
 import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 

package/dist/AdvancedFilterRulesPopover.d.mts

@@ -1,5 +1,5 @@
-import { d as FilterRuleValue, f as FilterRuleValueChange, l as FilterOperator, n as CompoundExpression, o as FilterField, p as FilterSize, u as FilterRule } from "./types-DLnCkvTt.mjs";
-import { t as FieldRegistry } from "./FieldRegistry-C2NVPhMO.mjs";
+import { d as FilterRuleValue, f as FilterRuleValueChange, l as FilterOperator, n as CompoundExpression, o as FilterField, p as FilterSize, u as FilterRule } from "./types-BJqmRXFV.mjs";
+import { t as FieldRegistry } from "./FieldRegistry-CJwGpUVK.mjs";
 import { ReactElement, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 

package/dist/ArrayValueControl.d.mts

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

package/dist/Attribute.d.mts

@@ -1,9 +1,9 @@
 import { i as ParagraphSize } from "./text-CKLxMlG4.mjs";
-import { c as ParagraphProps, u as SpanProps } from "./Text-CvaqognH.mjs";
+import { c as ParagraphProps, u as SpanProps } from "./Text-CdHeSHCc.mjs";
 import { n as MaybeSemanticTheme } from "./semanticColor-BKbCliyl.mjs";
+import * as _$styled_components0 from "styled-components";
 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 src/components/Attribute/Attribute.d.ts

package/dist/{Badge-BCdsVKuj.mjs → Badge-DZq6ByIU.mjs}

@@ -1,5 +1,5 @@
 import { a as styled, r as css } from "./styledComponentsInterop-Cs5CCPRy.mjs";
-import { n as Sticker } from "./Sticker-C1_6I08u.mjs";
+import { n as Sticker } from "./Sticker-jfOM4Yi6.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/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-BCdsVKuj.mjs.map
+//# sourceMappingURL=Badge-DZq6ByIU.mjs.map

package/dist/{Badge-BCdsVKuj.mjs.map → Badge-DZq6ByIU.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Badge-BCdsVKuj.mjs","names":[],"sources":["../src/components/Badge/Badge.tsx"],"sourcesContent":["import styled, { css, type DefaultTheme, type StyledComponent } from 'styled-components';\n\nimport Sticker, { type StickerProps } from '#src/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-DZq6ByIU.mjs","names":[],"sources":["../src/components/Badge/Badge.tsx"],"sourcesContent":["import styled, { css, type DefaultTheme, type StyledComponent } from 'styled-components';\n\nimport Sticker, { type StickerProps } from '#src/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/BooleanValueControl.d.mts

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

package/dist/{Breadcrumbs-CMf3Uvow.mjs → Breadcrumbs-DpsNZWF9.mjs}

@@ -1,19 +1,19 @@
 import { a as styled, r as css } from "./styledComponentsInterop-Cs5CCPRy.mjs";
 import { semanticColor } from "./lib/semanticColor.mjs";
-import { n as RouterLink } from "./router-BxmA940v.mjs";
+import { focusOutline } from "./mixins/focus.mjs";
+import "./variables/transitions.mjs";
 import { paragraphMixins } from "./mixins/text.mjs";
+import { n as RouterLink } from "./router-BxmA940v.mjs";
 import { i as Paragraph } from "./Text-D0vEReED.mjs";
-import "./variables/transitions.mjs";
-import { a as Tooltip } from "./Tooltip-YViXzMdm.mjs";
+import { a as Tooltip } from "./Tooltip-C2VB8I6y.mjs";
 import { TruncatedTextWithTooltip } from "./lib/TruncatedTextWithTooltip.mjs";
-import { focusOutline } from "./mixins/focus.mjs";
 import { t as HStack } from "./Stack-Bzom2BTR.mjs";
-import { t as IconButton } from "./IconButton-DxHB2g80.mjs";
+import { t as IconButton } from "./IconButton-kSjnfhWt.mjs";
 import { t as intersperse } from "./intersperse-DvJsBw5D.mjs";
 import Input_default from "./components/Input/index.mjs";
-import { t as TechnicalSticker } from "./TechnicalSticker-Cq5jzYKQ.mjs";
-import { useEffect, useRef, useState } from "react";
+import { t as TechnicalSticker } from "./TechnicalSticker-DrN45Vut.mjs";
 import { Spacing } from "@persona/design-tokens";
+import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CopyIcon, EditIcon } from "@persona/icons";
 //#region src/components/Breadcrumbs/Breadcrumb.tsx
@@ -57,7 +57,7 @@ const ancestorCrumbStyles = css`
   ${paragraphMixins.md};
   color: ${({ theme }) => semanticColor(theme, "FgSecondary", theme.color.text.secondary)};
   text-decoration: none;
-  transition: color ${"100ms"} ease-out;
+  transition: color ${"100ms"} ${"cubic-bezier(0.4, 0, 0.2, 1)"};
   ${focusOutline}
   ${({ $size }) => crumbLayoutStyles($size)}
 
@@ -343,4 +343,4 @@ const Breadcrumbs = ({ items, size = "md", headingAs = "h1", "aria-label": ariaL
 //#endregion
 export { Breadcrumbs as t };
 
-//# sourceMappingURL=Breadcrumbs-CMf3Uvow.mjs.map
+//# sourceMappingURL=Breadcrumbs-DpsNZWF9.mjs.map

package/dist/Breadcrumbs-DpsNZWF9.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs-DpsNZWF9.mjs","names":["Input"],"sources":["../src/components/Breadcrumbs/Breadcrumb.tsx","../src/components/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import { type ChangeEvent, useEffect, useRef, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { CopyIcon, EditIcon } from '@persona/icons';\n\nimport { IconButton } from '#src/components/Button';\nimport Input from '#src/components/Input';\nimport { HStack } from '#src/components/Stack';\nimport TechnicalSticker from '#src/components/TechnicalSticker';\nimport { Paragraph } from '#src/components/Text';\nimport Tooltip from '#src/components/Tooltip';\nimport { RouterLink } from '#src/lib/router';\nimport { semanticColor } from '#src/lib/semanticColor';\nimport TruncatedTextWithTooltip from '#src/lib/TruncatedTextWithTooltip';\nimport { focusOutline } from '#src/mixins/focus';\nimport { paragraphMixins } from '#src/mixins/text';\nimport { TransitionDuration, TransitionEasing } from '#src/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 path (e.g. `/cases`), rendered as a router-aware link. */\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\nexport const getInlineActionCount = ({\n  onEdit,\n  showCopyAction,\n  copyValue,\n}: Pick<BreadcrumbProps, 'onEdit' | 'showCopyAction' | 'copyValue'>) =>\n  Number(onEdit != null) + (showCopyAction && copyValue != null ? 1 : 0);\n\nconst CrumbRow = styled(HStack)`\n  align-items: center;\n  min-width: 0;\n`;\n\nconst InlineActions = styled(HStack)`\n  flex-shrink: 0;\n`;\n\nconst BreadcrumbLabel = styled.span`\n  overflow-wrap: anywhere;\n`;\n\nconst TruncatedBreadcrumbLabel = ({ label }: { label: string }) => (\n  <TruncatedTextWithTooltip tooltipProps={{ maxWidth: '400px' }}>\n    <BreadcrumbLabel>{label}</BreadcrumbLabel>\n  </TruncatedTextWithTooltip>\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 }) => semanticColor(theme, 'FgSecondary', theme.color.text.secondary)};\n  text-decoration: none;\n  transition: color ${TransitionDuration.ExtraFast} ${TransitionEasing.Move};\n  ${focusOutline}\n  ${({ $size }) => crumbLayoutStyles($size)}\n\n  &:hover {\n    color: ${({ theme }) => semanticColor(theme, 'FgPrimary', theme.color.text.primary)};\n  }\n`;\n\nconst AncestorNavLink = styled(RouterLink)<{ $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 }) => semanticColor(theme, 'SurfacePrimary', theme.color.background.primary)};\n  color: ${({ theme }) => semanticColor(theme, 'FgPrimary', 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 inlineActionCount = getInlineActionCount({ onEdit, showCopyAction, copyValue });\n  const inlineActions = !isEditing && inlineActionCount > 0 && (\n    <InlineActions spacing={ACTION_BUTTON_GAP} align='center'>\n      {onEdit != null && (\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    </InlineActions>\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          <TruncatedBreadcrumbLabel label={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          <TruncatedBreadcrumbLabel label={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        <TruncatedBreadcrumbLabel label={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';\n\nimport { intersperse } from '#src/lib/intersperse';\nimport { semanticColor } from '#src/lib/semanticColor';\nimport { paragraphMixins } from '#src/mixins/text';\n\nimport Breadcrumb, {\n  type BreadcrumbHeadingAs,\n  type BreadcrumbProps,\n  type BreadcrumbSize,\n  getInlineActionCount,\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 ANCESTOR_MIN_CHARS = 8;\nconst CURRENT_MIN_CHARS = 12;\n\nconst BreadcrumbNav = styled.nav`\n  min-width: 0;\n`;\n\nconst BreadcrumbList = styled.ol`\n  max-width: 100%;\n  display: flex;\n  flex-wrap: nowrap;\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  $size: BreadcrumbSize;\n  $isCurrent: boolean;\n  $isShort: boolean;\n  $minWidth?: string;\n}>`\n  display: flex;\n  align-items: center;\n  ${({ $size }) => ($size === 'lg' ? paragraphMixins.lg : paragraphMixins.md)};\n  ${({ $isShort, $isCurrent }) =>\n    $isShort ? 'flex-shrink: 0;' : $isCurrent ? 'flex: 0 1 auto;' : 'flex: 0 100000 auto;'}\n  ${({ $minWidth }) => $minWidth != null && `min-width: ${$minWidth};`}\n\n  &:has(input) {\n    flex-shrink: 1;\n  }\n`;\n\nconst SeparatorListItem = styled.li`\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n`;\n\nconst Separator = styled.span<{ $size: BreadcrumbSize }>`\n  padding: 0 ${Spacing[2]};\n  color: ${({ theme }) => semanticColor(theme, 'FgSecondary', 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    const minChars = isCurrent ? CURRENT_MIN_CHARS : ANCESTOR_MIN_CHARS;\n    const actionCount = getInlineActionCount(item);\n    const actionsWidth =\n      actionCount === 0\n        ? 0\n        : Number.parseFloat(Spacing[2]) +\n          actionCount * 24 +\n          (actionCount - 1) * Number.parseFloat(Spacing[1]);\n\n    return (\n      <BreadcrumbListItem\n        key={`${item.label}-${index}`}\n        aria-current={isCurrent ? 'page' : undefined}\n        $size={size}\n        $isCurrent={isCurrent}\n        $isShort={item.label.length <= minChars}\n        $minWidth={\n          item.label.length > minChars ? `calc(${minChars}ch + ${actionsWidth}px)` : undefined\n        }\n      >\n        <Breadcrumb {...item} size={size} current={isCurrent} headingAs={headingAs} />\n      </BreadcrumbListItem>\n    );\n  });\n\n  const listItems = intersperse(crumbNodes, (separatorIndex: number) => (\n    <SeparatorListItem key={`separator-${separatorIndex}`} aria-hidden='true'>\n      <Separator $size={size}>/</Separator>\n    </SeparatorListItem>\n  ));\n\n  return (\n    <BreadcrumbNav aria-label={ariaLabel} className={className}>\n      <BreadcrumbList>{listItems}</BreadcrumbList>\n    </BreadcrumbNav>\n  );\n};\n\nexport default Breadcrumbs;\n"],"mappings":"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"}

package/dist/{Button-DjD8QxcY.d.mts → Button-C4a4BTjL.d.mts}

@@ -1,9 +1,9 @@
 import { i as To } from "./types-BRYGqFVm.mjs";
 import { t as PseudoClassProps } from "./PseudoClassProps-CIuO49a4.mjs";
 import { n as ButtonVariant } from "./palette-DzmqrF_5.mjs";
+import * as _$styled_components0 from "styled-components";
 import * as _$react from "react";
 import { ComponentPropsWithoutRef, HTMLAttributeAnchorTarget, MouseEvent, ReactNode, Ref } from "react";
-import * as _$styled_components0 from "styled-components";
 
 //#region src/components/Button/Button.d.ts
 interface ButtonPropsWithTransientProps extends Omit<ButtonProps, 'isPending'> {
@@ -108,4 +108,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-DjD8QxcY.d.mts.map
+//# sourceMappingURL=Button-C4a4BTjL.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-DjD8QxcY.mjs";
+import { a as SuffixIconContainer, i as StyledButton, n as ButtonChildren, r as ButtonProps, t as Button } from "./Button-C4a4BTjL.mjs";
 export { ButtonChildren, ButtonProps, StyledButton, SuffixIconContainer, Button as default };

package/dist/CalendarBase.d.mts

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

package/dist/{Card-DiUHtYg_.d.mts → Card-CPV4_mHk.d.mts}

@@ -1,8 +1,8 @@
-import { c as ParagraphProps, u as SpanProps } from "./Text-CvaqognH.mjs";
-import { i as HeaderProps } from "./Header-CV0Lcf0C.mjs";
-import { ComponentPropsWithoutRef, FC, PropsWithChildren, ReactElement, ReactNode } from "react";
+import { c as ParagraphProps, u as SpanProps } from "./Text-CdHeSHCc.mjs";
+import { i as HeaderProps } from "./Header-DaaUprCL.mjs";
 import * as _$styled_components0 from "styled-components";
 import { Spacing } from "@persona/design-tokens";
+import { ComponentPropsWithoutRef, FC, PropsWithChildren, ReactElement, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/Card/Card.d.ts
@@ -72,4 +72,4 @@ declare const _default: typeof Card & {
 };
 //#endregion
 export { SectionProps as n, _default as r, CardProps as t };
-//# sourceMappingURL=Card-DiUHtYg_.d.mts.map
+//# sourceMappingURL=Card-CPV4_mHk.d.mts.map

package/dist/Card.d.mts

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

package/dist/Card2.d.mts

@@ -1,6 +1,6 @@
 import { SectionHeading } from "./SectionHeading.mjs";
-import { ComponentProps, FC, ReactNode } from "react";
 import * as _$styled_components0 from "styled-components";
+import { ComponentProps, FC, ReactNode } from "react";
 
 //#region src/components/CardV2/Card.d.ts
 declare const CardContainer: _$styled_components0.StyledComponent<"div", any, {}, never>;

package/dist/CardGrouping.d.mts

@@ -1,4 +1,4 @@
-import { i as TextAction, n as IconAction } from "./Action-CHWYwpYR.mjs";
+import { i as TextAction, n as IconAction } from "./Action-sLO73eKq.mjs";
 import { n as SingleColumnLayoutProps } from "./SingleColumnLayout-D2bpX7X1.mjs";
 import { ReactElement, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";

package/dist/{CardV2-ACI5RIzF.mjs → CardV2-DCoDfEvr.mjs}

@@ -1,22 +1,23 @@
-import ConfigContext from "./lib/ConfigContext.mjs";
 import { a as styled, r as css } from "./styledComponentsInterop-Cs5CCPRy.mjs";
 import { semanticColor } from "./lib/semanticColor.mjs";
+import { focusStyle } from "./mixins/focus.mjs";
+import "./variables/transitions.mjs";
+import { revealHidden, revealShown } from "./mixins/motion.mjs";
+import { semanticScrollbar } from "./mixins/scrollbar.mjs";
+import ConfigContext from "./lib/ConfigContext.mjs";
 import { HeadlessAriaButton } from "./lib/HeadlessAriaButton.mjs";
 import { TruncatedText } from "./lib/TruncatedText.mjs";
 import { i as Paragraph, n as Heading$1 } from "./Text-D0vEReED.mjs";
-import "./variables/transitions.mjs";
-import { a as Tooltip } from "./Tooltip-YViXzMdm.mjs";
+import { a as Tooltip } from "./Tooltip-C2VB8I6y.mjs";
 import { Z_INDICES } from "./lib/zindex.mjs";
-import { focusStyle } from "./mixins/focus.mjs";
-import { semanticScrollbar } from "./mixins/scrollbar.mjs";
 import { t as HStack } from "./Stack-Bzom2BTR.mjs";
-import { n as Button$1, t as IconButton } from "./IconButton-DxHB2g80.mjs";
+import { n as Button$1, t as IconButton } from "./IconButton-kSjnfhWt.mjs";
 import { t as intersperse } from "./intersperse-DvJsBw5D.mjs";
-import { n as DropdownMenu_default } from "./DropdownMenu-c8XK2Lr4.mjs";
-import { t as DropdownButton } from "./DropdownButton-DpLG-cIj.mjs";
-import { t as LoadingShimmer } from "./LoadingShimmer-oPIv2ESr.mjs";
-import { createContext, useContext } from "react";
+import { n as DropdownMenu_default } from "./DropdownMenu-jJSHQaih.mjs";
+import { t as DropdownButton } from "./DropdownButton-Dp-MZ5tA.mjs";
+import { t as LoadingShimmer } from "./LoadingShimmer-CpfKTSUs.mjs";
 import { Color, Spacing, Typography } from "@persona/design-tokens";
+import { createContext, useContext } from "react";
 import { Disclosure, DisclosurePanel } from "react-aria-components";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDownIcon, MoreIcon } from "@persona/icons";
@@ -36,7 +37,7 @@ const StickerContainer = styled.div`
   max-width: 180px;
 `;
 const AccordionContainer = styled.div`
-  transition: opacity ${"150ms"};
+  ${revealHidden}
   position: absolute;
   opacity: 0;
 
@@ -53,7 +54,7 @@ const AccordionContainer = styled.div`
   border-radius: 1px;
 
   & svg {
-    transition: transform ${"150ms"} ease-out;
+    transition: transform ${"200ms"} ${"cubic-bezier(0.4, 0, 0.2, 1)"};
     transform: rotate(${({ $expanded }) => $expanded ? "0" : "-90deg"});
   }
 `;
@@ -63,10 +64,12 @@ const HeaderButton = styled(HeadlessAriaButton)`
 
   &:hover ~ ${AccordionContainer} {
     opacity: 1;
+    ${revealShown}
   }
 
   &:focus-visible ~ ${AccordionContainer} {
     opacity: 1;
+    ${revealShown}
     ${focusStyle}
   }
 `;
@@ -241,6 +244,10 @@ const StyledDisclosure = styled(Disclosure)`
 `;
 const StyledDisclosurePanel = styled(DisclosurePanel)`
   flex: 1;
+  ${({ $fullHeight }) => $fullHeight && css`
+      /* Let the panel shrink below min-content so the card doesn't scroll the section. */
+      min-height: 0;
+    `}
   ${({ $isTopSection }) => $isTopSection && css`
       // Safari does not support hidden='until-found' so react-aria uses display: none instead.
       // Since react-aria is using display to hide content we need to not set display ourselves.
@@ -253,6 +260,10 @@ const CardLoadingShimmer = styled(LoadingShimmer)`
   border-radius: ${({ theme }) => theme.card.borderRadius};
 `;
 const SectionContentContainer = styled.div`
+  ${({ $fullHeight }) => $fullHeight && css`
+      /* Let the stretch-clamped container shrink with the panel in fullHeight cards. */
+      min-height: 0;
+    `}
   ${({ $isTopSection }) => $isTopSection && css`
       padding: ${Spacing[5]};
       display: flex;
@@ -306,8 +317,10 @@ const Section = ({ children, isTopSection, heading, footer, footerContent, loadi
 			}),
 			hasContent && /* @__PURE__ */ jsx(StyledDisclosurePanel, {
 				$isTopSection: isTopSection,
+				$fullHeight: fullHeight,
 				children: /* @__PURE__ */ jsx(SectionContentContainer, {
 					$isTopSection: isTopSection,
+					$fullHeight: fullHeight,
 					$hasHeading: !!heading,
 					$hasFooter: hasFooter,
 					children: content
@@ -417,4 +430,4 @@ var Card_default = Object.assign(Card, {
 //#endregion
 export { CARD_HEADING_STICKY_OFFSET as n, Card_default as t };
 
-//# sourceMappingURL=CardV2-ACI5RIzF.mjs.map
+//# sourceMappingURL=CardV2-DCoDfEvr.mjs.map

package/dist/CardV2-DCoDfEvr.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardV2-DCoDfEvr.mjs","names":["CardLoadingShimmer","Heading","Button","DropdownMenu"],"sources":["../src/components/CardV2/SectionHeading.tsx","../src/components/CardV2/Section.tsx","../src/components/CardV2/Card.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, FC, ReactElement, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport { ChevronDownIcon, MoreIcon } from '@persona/icons';\n\nimport Button, { IconButton } from '#src/components/Button';\nimport DropdownButton from '#src/components/DropdownButton';\nimport DropdownMenu from '#src/components/DropdownMenu';\nimport { LoadingShimmer } from '#src/components/LoadingShimmer';\nimport { HStack } from '#src/components/Stack';\nimport { Heading } from '#src/components/Text';\nimport Tooltip from '#src/components/Tooltip';\nimport { HeadlessAriaButton } from '#src/lib/HeadlessAriaButton';\nimport { semanticColor } from '#src/lib/semanticColor';\nimport { TruncatedText } from '#src/lib/TruncatedText';\nimport { focusStyle } from '#src/mixins/focus';\nimport { revealHidden, revealShown } from '#src/mixins/motion';\nimport type { HeadingSize } from '#src/mixins/text';\nimport type { IconAction, MenuAction, TextAction } from '#src/types/Action';\nimport { TransitionDuration, TransitionEasing } from '#src/variables/transitions';\n\n/**\n * Distance from the top of a card to the underside of an expanded top-section heading: the\n * `Spacing[4]` padding above and below a 24px title line, plus the divider. Sticky content inside\n * the card pins here so the heading's divider stays the only line between them.\n */\nexport const CARD_HEADING_STICKY_OFFSET = `calc(${Spacing[9]} + 1px)`;\n\nconst CardLoadingShimmer = styled(LoadingShimmer)`\n  border-radius: ${({ theme }) => theme.card.borderRadius};\n`;\n\nconst StickerContainer = styled.div`\n  display: flex;\n  max-width: 180px;\n`;\n\ntype AccordionContainerProps = {\n  $isTopSection: boolean;\n  $expanded: boolean;\n};\nconst AccordionContainer = styled.div<AccordionContainerProps>`\n  ${revealHidden}\n  position: absolute;\n  opacity: 0;\n\n  height: 12px;\n  width: 12px;\n  display: flex;\n  align-items: center;\n  /* Because of padding in the top section heading we need to offset differently. */\n  /* We want a 12px icon to be off-center in 24px padding, 4px on the right and 8px on the left */\n  left: ${({ $isTopSection }) => ($isTopSection ? '8px' : '-16px')};\n  /* center the icon vertically */\n  top: calc(50% - 6px);\n\n  border-radius: 1px;\n\n  & svg {\n    transition: transform ${TransitionDuration.Fast} ${TransitionEasing.Move};\n    transform: rotate(${({ $expanded }) => ($expanded ? '0' : '-90deg')});\n  }\n`;\n\nconst HeaderButton = styled(HeadlessAriaButton)`\n  min-width: 0;\n  flex: 1;\n\n  &:hover ~ ${AccordionContainer} {\n    opacity: 1;\n    ${revealShown}\n  }\n\n  &:focus-visible ~ ${AccordionContainer} {\n    opacity: 1;\n    ${revealShown}\n    ${focusStyle}\n  }\n`;\n\ntype HeadingContainerProps = {\n  $isTopSection: boolean;\n  $divider: boolean;\n  $hasFooter: boolean;\n  $isExpanded: boolean;\n};\nconst HeadingContainer = styled(HStack)<HeadingContainerProps>`\n  position: relative;\n\n  ${({ $isTopSection }) =>\n    $isTopSection &&\n    css`\n      padding: ${Spacing[4]} ${Spacing[5]};\n    `}\n  ${({ $divider }) =>\n    $divider &&\n    css`\n      border-bottom: 1px solid ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n    `}\n  ${({ $isTopSection, $hasFooter, $isExpanded }) =>\n    $isTopSection &&\n    !$hasFooter &&\n    !$isExpanded &&\n    css`\n      // We apply 4px of whitespace to the bottom of the card container so that content has a buffer\n      // when being scrolled and still appears inside the card. Here we adjust, subtracting\n      // 4px from the 16px padding.\n      padding-bottom: ${Spacing[3]};\n    `}\n`;\n\ntype StyledHeadingProps = {\n  $isCollapsible: boolean;\n  $isTopSection: boolean;\n  size: HeadingSize;\n};\nconst StyledHeading = styled(Heading)<StyledHeadingProps>`\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[2]};\n  line-height: 24px; // We want an adjusted line-height to hit the target header size.\n  overflow: hidden;\n\n  ${({ $isCollapsible }) => $isCollapsible && 'cursor: pointer;'}\n  ${({ $isTopSection }) =>\n    !$isTopSection &&\n    css`\n      ${Typography.TextLargeBold};\n    `}\n`;\n\nconst isIconAction = (action: IconAction | TextAction): action is IconAction => 'icon' in action;\n\nconst ButtonRow: FC<{\n  actions: (IconAction | TextAction)[];\n  menuActions: MenuAction[];\n}> = ({ actions, menuActions }) => {\n  const buttons = actions\n    .filter((action) => !action.hidden)\n    .map((action, i) => {\n      const key = isIconAction(action)\n        ? (action.id ?? action.ariaLabel ?? `action-${i}`)\n        : (action.id ?? action.label ?? `action-${i}`);\n\n      const button = isIconAction(action) ? (\n        <IconButton\n          id={action.id}\n          key={key}\n          to={action.to}\n          onClick={(e) => {\n            e.stopPropagation();\n            return action.onClick?.(e);\n          }}\n          disabled={action.disabled}\n          aria-label={action.ariaLabel}\n          size='sm'\n        >\n          {action.icon}\n        </IconButton>\n      ) : (\n        <Button\n          id={action.id}\n          key={key}\n          aria-label={action.ariaLabel}\n          to={action.to}\n          onClick={(e) => {\n            e.stopPropagation();\n            return action.onClick?.(e);\n          }}\n          disabled={action.disabled}\n          variant={action.variant ?? 'basic'}\n          size='sm'\n          width='auto'\n          prefixIcon={action.prefixIcon}\n          suffixIcon={action.suffixIcon}\n        >\n          {action.label}\n        </Button>\n      );\n\n      return action.tooltip ? (\n        <Tooltip key={key} {...action.tooltipProps} trigger={button}>\n          {action.tooltip}\n        </Tooltip>\n      ) : (\n        button\n      );\n    });\n\n  return (\n    <HStack>\n      {buttons}\n      {menuActions.length > 0 && (\n        <DropdownButton\n          variant='text'\n          width='icon'\n          size='sm'\n          suffixIcon={undefined}\n          style={{ justifySelf: 'flex-end' }}\n          aria-label='More actions'\n          menuProps={{\n            portal: true,\n          }}\n          menuItems={menuActions\n            .filter((action) => !action.hidden)\n            .map((action) => (\n              <DropdownMenu.Item\n                id={action.id ?? action.label}\n                key={action.id ?? action.label}\n                onClick={action.onClick}\n                disabled={action.disabled}\n              >\n                {action.label}\n              </DropdownMenu.Item>\n            ))}\n        >\n          <MoreIcon />\n        </DropdownButton>\n      )}\n    </HStack>\n  );\n};\n\n/**\n * Private component for rendering the heading of a section, both the primary card heading and\n * section headings.\n */\nexport const SectionHeading: FC<{\n  /**\n   * Whether this is the top-level section of the card which has different visual treatment.\n   */\n  isTopSection: boolean;\n\n  /**\n   * Whether this heading's section has content.\n   */\n  sectionHasContent: boolean;\n\n  /**\n   * Whether this heading's section has a footer.\n   */\n  hasFooter: boolean;\n\n  loading: boolean;\n\n  /**\n   * Title text to render in the heading.\n   */\n  title: string;\n\n  /**\n   * Optional sticker to render after the title.\n   */\n  sticker?: ReactElement;\n\n  /**\n   * Optional icon to render before the title text.\n   *\n   * Usage of this icon slot should be avoided if possible to maintain left-text alignement. If\n   * using this icon slot for a section heading use it for all sections.\n   */\n  leftDecorativeIcon?: ReactElement;\n\n  /**\n   * Optional actions to render in the heading.\n   * Only accepts IconButton or Button components with specific prop restrictions.\n   */\n  actions?: (IconAction | TextAction | undefined)[];\n\n  /**\n   * Optional actions to render in the heading in a menu.\n   */\n  menuActions?: (MenuAction | undefined)[];\n\n  /**\n   * Optional custom content to render in the heading in the button row. Prefer setting `actions` or\n   * `menuActions` if possible.\n   */\n  headerActionsRowContent?: ReactNode;\n\n  /**\n   * Callback to toggle collapsed state of the section. Omit to disable collapsing.\n   */\n  toggle?: () => void;\n\n  /**\n   * Whether the section is currently expanded or collapsed.\n   */\n  isExpanded: boolean;\n\n  /**\n   * Optional props to pass to the heading element. Accepts an `as` key to override the\n   * rendered heading level. Defaults to `h2` for the top-level card heading and `h3` for\n   * section headings so that the document heading hierarchy reflects the visual hierarchy.\n   */\n  headingProps?: Omit<ComponentPropsWithoutRef<'span'>, 'color'> & {\n    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  };\n}> = ({\n  isTopSection,\n  sectionHasContent,\n  hasFooter,\n  loading,\n  title,\n  actions = [],\n  menuActions = [],\n  headerActionsRowContent,\n  sticker,\n  leftDecorativeIcon,\n  toggle,\n  isExpanded,\n  headingProps,\n}) => {\n  const renderButtonRow = actions.length > 0 || menuActions.length > 0;\n  const { as: headingAs, ...restHeadingProps } = headingProps ?? {};\n\n  return (\n    <HeadingContainer\n      $isTopSection={isTopSection}\n      $hasFooter={hasFooter}\n      $isExpanded={isExpanded}\n      $divider={isTopSection && isExpanded && sectionHasContent}\n      align='center'\n      justify='space-between'\n      spacing={Spacing[2]}\n    >\n      {loading ? (\n        <CardLoadingShimmer height='24px' width='200px' />\n      ) : (\n        <>\n          {/* https://github.com/adobe/react-spectrum/issues/7444 */}\n          <HeaderButton slot='trigger' isDisabled={!toggle}>\n            <StyledHeading\n              forwardedAs={headingAs ?? (isTopSection ? 'h2' : 'h3')}\n              size='xsm'\n              $isCollapsible={!!toggle}\n              $isTopSection={isTopSection}\n              aria-label={title}\n              {...restHeadingProps}\n            >\n              {leftDecorativeIcon}\n              <TruncatedText>{title}</TruncatedText>\n              {sticker && <StickerContainer>{sticker}</StickerContainer>}\n            </StyledHeading>\n          </HeaderButton>\n          {headerActionsRowContent}\n          {renderButtonRow && (\n            <ButtonRow\n              actions={actions.filter((action) => action != null)}\n              menuActions={menuActions.filter((action) => action != null)}\n            />\n          )}\n          {toggle && (\n            <AccordionContainer $isTopSection={isTopSection} $expanded={isExpanded}>\n              <ChevronDownIcon />\n            </AccordionContainer>\n          )}\n        </>\n      )}\n    </HeadingContainer>\n  );\n};\n","import type { ComponentProps, FC, ReactNode } from 'react';\nimport { Disclosure, DisclosurePanel } from 'react-aria-components';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\n\nimport { SectionHeading } from '#src/components/CardV2/SectionHeading';\nimport { LoadingShimmer } from '#src/components/LoadingShimmer';\nimport { HStack } from '#src/components/Stack';\nimport { Paragraph } from '#src/components/Text';\nimport { intersperse } from '#src/lib/intersperse';\nimport { semanticColor } from '#src/lib/semanticColor';\nimport { Z_INDICES } from '#src/lib/zindex';\n\nconst FooterParagraph = styled(Paragraph)`\n  line-height: 16px;\n`;\n\ntype FooterContainerProps = {\n  $divider: boolean;\n};\nconst FooterContainer = styled.div<FooterContainerProps>`\n  ${({ $divider }) =>\n    $divider &&\n    css`\n      border-top: 1px solid ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n    `}\n  padding: ${Spacing[3]} ${Spacing[5]} ${Spacing[2]};\n`;\n\ntype MaybeStickyContainerProps = {\n  $enabled: boolean;\n  $bottom?: boolean;\n};\nconst MaybeStickyContainer = styled.div<MaybeStickyContainerProps>`\n  ${({ $enabled }) =>\n    $enabled &&\n    css`\n      // We are using sticky positioning here to have consistent scrollbar behavior between\n      // different card configurations. Usage of sticky allows us to keep the scroll container at\n      // the top of the card DOM structure regardless of whether the heading or footer is sticky.\n      //\n      // This also afaict helps eliminate the need to carry height values through the card DOM\n      // structure to the content container (and possibly needing to adjust heights for heading and footer).\n      position: sticky;\n      top: 0;\n      background-color: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', theme.color.background.primary)};\n      z-index: ${Z_INDICES.sticky};\n    `}\n\n  ${({ $bottom = false }) =>\n    $bottom &&\n    css`\n      top: unset;\n      bottom: 0;\n    `}\n`;\n\ntype StyledDisclosureProps = {\n  $fullHeight: boolean;\n};\nconst StyledDisclosure = styled(Disclosure)<StyledDisclosureProps>`\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n  ${({ $fullHeight }) =>\n    $fullHeight &&\n    css`\n      height: 100%;\n    `}\n`;\n\ntype StyledDisclosurePanelProps = {\n  $isTopSection: boolean;\n  $fullHeight: boolean;\n};\nconst StyledDisclosurePanel = styled(DisclosurePanel)<StyledDisclosurePanelProps>`\n  flex: 1;\n  ${({ $fullHeight }) =>\n    $fullHeight &&\n    css`\n      /* Let the panel shrink below min-content so the card doesn't scroll the section. */\n      min-height: 0;\n    `}\n  ${({ $isTopSection }) =>\n    $isTopSection &&\n    css`\n      // Safari does not support hidden='until-found' so react-aria uses display: none instead.\n      // Since react-aria is using display to hide content we need to not set display ourselves.\n      &:not([aria-hidden='true']) {\n        display: flex;\n      }\n    `}\n`;\n\nconst CardLoadingShimmer = styled(LoadingShimmer)`\n  border-radius: ${({ theme }) => theme.card.borderRadius};\n`;\n\ntype SectionContentContainerProps = {\n  $isTopSection: boolean;\n  $fullHeight: boolean;\n  $hasHeading: boolean;\n  $hasFooter: boolean;\n};\nconst SectionContentContainer = styled.div<SectionContentContainerProps>`\n  ${({ $fullHeight }) =>\n    $fullHeight &&\n    css`\n      /* Let the stretch-clamped container shrink with the panel in fullHeight cards. */\n      min-height: 0;\n    `}\n  ${({ $isTopSection }) =>\n    $isTopSection &&\n    css`\n      padding: ${Spacing[5]};\n      display: flex;\n      flex-direction: column;\n      gap: ${Spacing[5]};\n      flex: 1;\n      /* Prevent grid blowout https://css-tricks.com/preventing-a-grid-blowout/ */\n      min-width: 0;\n    `}\n\n  ${({ $isTopSection, $hasHeading }) =>\n    !$isTopSection &&\n    $hasHeading &&\n    css`\n      padding-top: ${Spacing[3]};\n    `}\n\n    ${({ $isTopSection, $hasFooter }) =>\n      $isTopSection &&\n      !$hasFooter &&\n      css`\n      // We apply 4px of whitespace to the bottom of the card container so that content has a buffer\n      // when being scrolled and still appears inside the card. Here we adjust, subtracting\n      // 4px from the 24px padding.\n      padding-bottom: 20px;\n    `}\n`;\n\n/**\n * Private component for rendering sections of the card, both the primary card section and\n * individual sections.\n */\nexport const Section: FC<{\n  children?: ReactNode;\n\n  /**\n   * Whether this is the top-level section of the card which has different visual treatment.\n   */\n  isTopSection: boolean;\n\n  /**\n   * Available props for the section's heading.\n   */\n  heading?: Pick<\n    ComponentProps<typeof SectionHeading>,\n    | 'title'\n    | 'actions'\n    | 'menuActions'\n    | 'headerActionsRowContent'\n    | 'sticker'\n    | 'leftDecorativeIcon'\n    | 'headingProps'\n  >;\n\n  /**\n   * Optional footer to render at the bottom of the card. Footer content is rendered as a\n   * paragraph with the items separated by a dot.\n   */\n  footer?: ReactNode[];\n\n  /**\n   * Optional arbitrary footer content to render as-is.\n   */\n  footerContent?: ReactNode;\n\n  /**\n   * Whether the section is collapsible.\n   */\n  collapsible?: boolean;\n\n  /**\n   * Whether the section heading and footer are sticky.\n   */\n  sticky?: boolean;\n\n  /**\n   * Whether the section is initially collapsed.\n   */\n  defaultCollapsed?: boolean;\n\n  /**\n   * If true, the section will be rendered in a loading state.\n   */\n  loading?: boolean;\n\n  /**\n   * Set height of the loading state.\n   */\n  loadingProps?: {\n    height?: string;\n  };\n\n  /**\n   * Control display of the empty state.\n   */\n  empty?: boolean;\n\n  /**\n   * Props for the empty state.\n   */\n  emptyProps?: {\n    /**\n     * Empty state message.\n     */\n    message?: string;\n  };\n\n  fullHeight?: boolean;\n}> = ({\n  children,\n  isTopSection,\n  heading,\n  footer,\n  footerContent,\n  loading = false,\n  loadingProps,\n  empty = false,\n  emptyProps,\n  defaultCollapsed = false,\n  collapsible = false,\n  sticky = false,\n  fullHeight = false,\n}) => {\n  let content: ReactNode;\n  if (loading) {\n    content = <CardLoadingShimmer height={loadingProps?.height ?? '200px'} width='100%' />;\n  } else if (empty) {\n    content = <Paragraph>{emptyProps?.message ?? 'No data collected'}</Paragraph>;\n  } else {\n    content = children;\n  }\n\n  const hasFooter = !!(footer || footerContent);\n  const hasContent = !!content;\n\n  // Normally we would have `isDisabled` as well but there's a react-aria-components quirk\n  // that sets `hidden` on the disclosure panel if both `defaultExpanded` and `isDisabled` are true.\n  // https://github.com/adobe/react-spectrum/issues/7444\n  return (\n    <StyledDisclosure defaultExpanded={!defaultCollapsed} $fullHeight={fullHeight}>\n      {({ isExpanded, state }) => (\n        <>\n          {heading && (\n            <MaybeStickyContainer $enabled={sticky}>\n              <SectionHeading\n                isTopSection={isTopSection}\n                hasFooter={hasFooter}\n                sectionHasContent={hasContent}\n                loading={loading}\n                toggle={collapsible ? state.toggle : undefined}\n                isExpanded={isExpanded}\n                {...heading}\n              />\n            </MaybeStickyContainer>\n          )}\n          {hasContent && (\n            <StyledDisclosurePanel $isTopSection={isTopSection} $fullHeight={fullHeight}>\n              <SectionContentContainer\n                $isTopSection={isTopSection}\n                $fullHeight={fullHeight}\n                $hasHeading={!!heading}\n                $hasFooter={hasFooter}\n              >\n                {content}\n              </SectionContentContainer>\n            </StyledDisclosurePanel>\n          )}\n          {hasFooter && (\n            <MaybeStickyContainer $enabled={sticky} $bottom>\n              <FooterContainer $divider={hasContent}>\n                {loading ? (\n                  <HStack>\n                    <CardLoadingShimmer height='16px' width='120px' />\n                    <CardLoadingShimmer height='16px' width='120px' />\n                  </HStack>\n                ) : (\n                  <>\n                    {footer && (\n                      <FooterParagraph size='sm'>\n                        <HStack spacing={Spacing[1]}>\n                          {intersperse(\n                            footer\n                              .filter((item) => item != null)\n                              .map((item, i) => <span key={`footer-item-${i}`}>{item}</span>),\n                            (i) => (\n                              <span key={i}>•</span>\n                            ),\n                          )}\n                        </HStack>\n                      </FooterParagraph>\n                    )}\n                    {footerContent}\n                  </>\n                )}\n              </FooterContainer>\n            </MaybeStickyContainer>\n          )}\n        </>\n      )}\n    </StyledDisclosure>\n  );\n};\n","import { type ComponentProps, createContext, type FC, type ReactNode, useContext } from 'react';\nimport { ErrorBoundary } from 'react-error-boundary';\nimport styled from 'styled-components';\n\nimport { Color } from '@persona/design-tokens';\n\nimport { Section } from '#src/components/CardV2/Section';\nimport { Paragraph } from '#src/components/Text';\nimport ConfigContext from '#src/lib/ConfigContext';\nimport { intersperse } from '#src/lib/intersperse';\nimport { semanticColor } from '#src/lib/semanticColor';\nimport { semanticScrollbar } from '#src/mixins/scrollbar';\n\nconst CardContainer = styled.div`\n  border-radius: ${({ theme }) => theme.card.borderRadius};\n  background-color: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', theme.color.background.primary)};\n  // Height has been tricky here.\n  // inherit seems to work well for both grid and flexbox layouts. In a grid we want this\n  // container to receive the full cell height, In a flexbox we want this container to flex, maintaining\n  // the minimum height for it's content.\n  height: inherit;\n  overflow-y: auto;\n  ${semanticScrollbar}\n\n  box-sizing: border-box;\n  // Small buffer so that content is not scrolling right on the edge of the card.\n  border-bottom: 4px solid ${({ theme }) => semanticColor(theme, 'SurfacePrimary', theme.color.background.primary)};\n`;\n\nconst CardContext = createContext<{ isStacked?: boolean }>({});\n\nconst Divider = styled.hr`\n  margin: 0;\n  border: none;\n  border-top: 1px solid ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n`;\n\n/**\n * Renders a card section.\n */\nconst PublicSection: FC<\n  Pick<\n    ComponentProps<typeof Section>,\n    | 'children'\n    | 'collapsible'\n    | 'defaultCollapsed'\n    | 'heading'\n    | 'loading'\n    | 'loadingProps'\n    | 'empty'\n    | 'emptyProps'\n  >\n> = (props) => {\n  return <Section isTopSection={false} {...props} />;\n};\n\n/**\n * Render the card in a \"stacked\" mode. Used for rendering multiple cards on top of each other\n * that appear visually as a single card.\n */\nconst Stacked: FC<{\n  children: ReactNode[];\n}> = ({ children }) => {\n  return (\n    <CardContext.Provider value={{ isStacked: true }}>\n      <CardContainer>\n        {intersperse(children, (i) => (\n          <Divider key={i} />\n        ))}\n      </CardContainer>\n    </CardContext.Provider>\n  );\n};\n\nconst DEFAULT_ERROR_MESSAGE = 'Something went wrong loading this card.';\n\n/**\n * Renders a PDS Card.\n *\n * To render sections of the card use `<Card.Section>...</Card.Section>`\n */\nconst Card: FC<\n  {\n    /**\n     * Optional footer to render at the bottom of the card. Footer content is rendered as a\n     * paragraph with the items separated by a dot.\n     */\n    footer?: ReactNode[];\n\n    /**\n     * Optional arbitrary footer content to render as-is.\n     */\n    footerContent?: ReactNode;\n\n    /**\n     * Whether the card heading and footer are sticky.\n     */\n    sticky?: boolean;\n\n    /**\n     * Force the card to render in an errored state. Errors bubbling up from children will also\n     * render the errored state.\n     */\n    errored?: boolean;\n\n    /**\n     * Props for the errored state.\n     */\n    erroredProps?: {\n      /**\n       * Message to render in the errored state.\n       */\n      message?: string;\n      /**\n       * Callback to handle errors. Note this callback is only called when the error is bubbled up\n       * from children, not when `errored` is set to true.\n       */\n      onError?: (error: Error) => void;\n    };\n\n    containerProps?: ComponentProps<typeof CardContainer>;\n\n    /**\n     * Whether the card should render its content with 100% height. This is a bit of a hack for cards\n     * that want full control of their content and don't use sections.\n     */\n    fullHeight?: boolean;\n  } & ComponentProps<typeof PublicSection>\n> = ({ children, errored, erroredProps, containerProps, sticky = true, ...sectionProps }) => {\n  const { isStacked = false } = useContext(CardContext);\n  const { captureException } = useContext(ConfigContext);\n\n  const errorFallback = (\n    <Section isTopSection {...sectionProps}>\n      <Paragraph>{erroredProps?.message ?? DEFAULT_ERROR_MESSAGE}</Paragraph>\n    </Section>\n  );\n\n  const section = (\n    <Section isTopSection sticky={sticky} {...sectionProps}>\n      {children}\n    </Section>\n  );\n\n  return (\n    <ErrorBoundary\n      fallback={\n        isStacked ? (\n          errorFallback\n        ) : (\n          <CardContainer {...containerProps}>{errorFallback}</CardContainer>\n        )\n      }\n      onError={erroredProps?.onError ?? ((error) => captureException(error))}\n    >\n      {isStacked ? (\n        <>{errored ? <>{errorFallback}</> : <>{section}</>}</>\n      ) : (\n        <CardContainer {...containerProps}>\n          {errored ? <>{errorFallback}</> : <>{section}</>}\n        </CardContainer>\n      )}\n    </ErrorBoundary>\n  );\n};\n\nexport default Object.assign(Card, {\n  Section: PublicSection,\n  Stacked: Stacked,\n});\n"],"mappings":"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"}

package/dist/ChartFrame.d.mts

@@ -0,0 +1,61 @@
+import { ChartLegendPosition } from "./chartFrameLayout.mjs";
+import { ChartLegendProps } from "./ChartLegend.mjs";
+import { ReactElement } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/Chart/ChartFrame.d.ts
+type ChartFrameLabel = {
+  'aria-label': string;
+  'aria-labelledby'?: never;
+} | {
+  'aria-labelledby': string;
+  'aria-label'?: never;
+};
+/** @experimental */
+type ChartFrameProps = ChartFrameLabel & {
+  /**
+   * The chart's legend. Pass `null` to omit it, e.g. for a single-series chart whose surrounding
+   * heading already names the series.
+   */
+  legend: ReactElement<ChartLegendProps> | null;
+  /**
+   * `'stack'` (default) puts the legend left-aligned above the plot; `'right'` puts it inline to
+   * the right of the plot, as wide as its longest label up to 200px (longer labels end in an
+   * ellipsis). The legend and plot are `Spacing[4]` apart when stacked and `Spacing[3]` apart inline.
+   */
+  legendPosition?: ChartLegendPosition;
+  /**
+   * Plot area height in px. Defaults to 300 (`CHART_DEFAULT_HEIGHT`). The plot always fills 100%
+   * of the frame's width, and the frame fills its container.
+   */
+  height?: number;
+  /**
+   * The plot: a Recharts chart, sized by the frame (e.g. wrapped in `ResponsiveContainer`). Give it
+   * `margin={CHART_PLOT_MARGIN}` so the frame's spacing is the only gap around the plot.
+   */
+  children: ReactElement; /** Applied to the root `<figure>`, e.g. to position or size the frame. */
+  className?: string;
+};
+/**
+ * Lays out a chart: its legend and the plot area, `Spacing[4]` apart stacked (`Spacing[3]` inline), with the legend left-aligned
+ * above the plot (`legendPosition='stack'`, the default) or inline on its right (`'right'`). The
+ * frame has no header, border or surface of its own: titles, descriptions and controls belong to
+ * the surrounding container (for example a `CardV2`), which also names the chart via
+ * `aria-labelledby`.
+ *
+ * Size: the chart fills 100% of its container's width, and the plot is 300px tall
+ * (`CHART_DEFAULT_HEIGHT`) unless `height` overrides it.
+ *
+ * @experimental Part of the in-progress PDS charting components; the API may change.
+ */
+declare function ChartFrame({
+  legend,
+  legendPosition,
+  height,
+  children,
+  className,
+  ...label
+}: ChartFrameProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ChartFrame, ChartFrame as default, ChartFrameProps };
+//# sourceMappingURL=ChartFrame.d.mts.map

package/dist/ChartLegend.d.mts

@@ -0,0 +1,60 @@
+import { Color } from "@persona/design-tokens";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/Chart/ChartLegend.d.ts
+/** One series in a {@link ChartLegend}. @experimental */
+interface ChartLegendItem<K extends string = string> {
+  key: K;
+  label: string;
+  /** The series colour, from `useChartColors().resolve(...)` or `resolveSeriesColors(...)`. */
+  color: Color;
+}
+/** A titled set of legend items, e.g. the series sharing an axis. @experimental */
+interface ChartLegendGroup<K extends string = string> {
+  key: string;
+  /** Shown above the group's items in uppercase mono text. */
+  label: string;
+  items: readonly ChartLegendItem<K>[];
+}
+/** Either flat `items` or titled `groups`; groups are optional. @experimental */
+type ChartLegendContent<K extends string = string> = {
+  items: readonly ChartLegendItem<K>[];
+  groups?: never;
+} | {
+  groups: readonly ChartLegendGroup<K>[];
+  items?: never;
+};
+/** @experimental */
+type ChartLegendProps<K extends string = string> = ChartLegendContent<K> & {
+  /** Keys of the series currently hidden. Pair with {@link useChartSeriesVisibility}. */hidden?: readonly K[];
+  /**
+   * Called with a series key when its legend item is clicked. When set, every item is a toggle
+   * button (`aria-pressed` is true while the series is shown); when omitted, the legend is static.
+   * Every series may be hidden.
+   */
+  onToggle?: (key: K) => void; /** Names the legend for assistive tech. Defaults to "Chart legend". */
+  'aria-label'?: string; /** Applied to the legend's root element (the list, or the group wrapper with `groups`). */
+  className?: string;
+};
+/**
+ * The series key for a chart: a square colour swatch and a `TextMedium` label per series, laid out
+ * in a row that wraps (a column when it sits right of the plot in a `ChartFrame`). With `onToggle`,
+ * each item toggles its series; a hidden series keeps a filled swatch at 65% opacity and gets a
+ * muted label.
+ *
+ * Pass `groups` instead of `items` for a grouped legend: groups stack `Spacing[2]` apart, each with
+ * an uppercase mono title `Spacing[1]` above its row of items.
+ *
+ * @experimental Part of the in-progress PDS charting components; the API may change.
+ */
+declare function ChartLegend<K extends string>({
+  items,
+  groups,
+  hidden,
+  onToggle,
+  'aria-label': ariaLabel,
+  className
+}: ChartLegendProps<K>): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ChartLegend, ChartLegend as default, ChartLegendContent, ChartLegendGroup, ChartLegendItem, ChartLegendProps };
+//# sourceMappingURL=ChartLegend.d.mts.map