@persona/design-system 0.7.1 → 0.8.0

package/dist/assertNever.d.mts

@@ -0,0 +1,5 @@
+//#region lib/assertNever.d.ts
+declare function assertNever(value: never): never;
+//#endregion
+export { assertNever };
+//# sourceMappingURL=assertNever.d.mts.map

package/dist/{codec-CoX6LfOY.d.mts → codec-BXVBsB8Y.d.mts}

@@ -1,4 +1,4 @@
-import { a as DateFilterPreset, c as RelativeDateFilterValue, n as AbsoluteDateRange, o as DateFilterValue } from "./types-D8rWSj3z.mjs";
+import { a as DateFilterPreset, c as RelativeDateFilterValue, n as AbsoluteDateRange, o as DateFilterValue } from "./types-Cl-w8tYc.mjs";
 import { DateTime } from "luxon";
 
 //#region lib/date-filter/codec.d.ts
@@ -26,4 +26,4 @@ declare function isRelative(value: DateFilterValue): value is RelativeDateFilter
 declare function formatDateFilterValue(value: DateFilterValue): string | null;
 //#endregion
 export { selectedPresetFor as a, resolveDateFilterValue as i, isRelative as n, parseDateFilterValue as r, formatDateFilterValue as t };
-//# sourceMappingURL=codec-CoX6LfOY.d.mts.map
+//# sourceMappingURL=codec-BXVBsB8Y.d.mts.map

package/dist/codec.d.mts

@@ -1,2 +1,2 @@
-import { a as selectedPresetFor, i as resolveDateFilterValue, n as isRelative, r as parseDateFilterValue, t as formatDateFilterValue } from "./codec-CoX6LfOY.mjs";
+import { a as selectedPresetFor, i as resolveDateFilterValue, n as isRelative, r as parseDateFilterValue, t as formatDateFilterValue } from "./codec-BXVBsB8Y.mjs";
 export { formatDateFilterValue, isRelative, parseDateFilterValue, resolveDateFilterValue, selectedPresetFor };

package/dist/{color-Bt0Lv1e3.d.mts → color-3UO63ocQ.d.mts}

@@ -1,4 +1,4 @@
-import { t as CssPercentage } from "./semantic-DUctmpu_.mjs";
+import { t as CssPercentage } from "./semantic-CFMBsuiJ.mjs";
 import { Color } from "@persona/design-tokens";
 
 //#region lib/color.d.ts
@@ -13,8 +13,13 @@ type PdsColor = Color | CssColor;
 declare const transparent: CssColor;
 /** Percentage token as a unitless `opacity`; percentage `opacity` is below the browserslist floor. */
 declare const opacityOf: (amount: CssPercentage) => string;
-/** `rgba()` rather than `color-mix()`: browserslist still includes IE 11 and iOS Safari < 16.2. */
+/** Full alpha collapses to `rgb()`; partial alpha stays `rgba()`. */
 declare const withAlpha: (color: Color, amount: CssPercentage) => CssColor;
+/**
+ * Source-over composite of `overlay` at `amount` onto `base`, as an opaque `rgb()`.
+ * Sticky cells that inherit a translucent wash paint it a second time.
+ */
+declare const opaqueOver: (overlay: Color, amount: CssPercentage, base: Color) => CssColor;
 //#endregion
-export { withAlpha as a, transparent as i, PdsColor as n, opacityOf as r, CssColor as t };
-//# sourceMappingURL=color-Bt0Lv1e3.d.mts.map
+export { transparent as a, opaqueOver as i, PdsColor as n, withAlpha as o, opacityOf as r, CssColor as t };
+//# sourceMappingURL=color-3UO63ocQ.d.mts.map

package/dist/components/Accordion/index.d.mts

@@ -0,0 +1,4 @@
+import { n as AccordionTitleTypography, t as AccordionSize } from "../../accordionTitleTypography-CNB1w3kn.mjs";
+import { AccordionTitleHeadingAs } from "../../AccordionItem.mjs";
+import { Accordion, AccordionItemProps, AccordionProps } from "../../Accordion.mjs";
+export { Accordion, Accordion as default, type AccordionItemProps, type AccordionProps, type AccordionSize, type AccordionTitleHeadingAs, type AccordionTitleTypography };

package/dist/components/Accordion/index.mjs

@@ -0,0 +1,330 @@
+import { a as styled, r as css } from "../../styledComponentsInterop-NxwFjeA4.mjs";
+import { HeadlessAriaButton } from "../../lib/HeadlessAriaButton.mjs";
+import { TruncatedText } from "../../lib/TruncatedText.mjs";
+import { semanticColor } from "../../lib/semanticColor.mjs";
+import { i as Paragraph, n as Heading$1 } from "../../Text-BdluS7Fy.mjs";
+import "../../variables/transitions.mjs";
+import { isFocusedVisible, isNotDisabled } from "../../lib/pseudoClass.mjs";
+import { focusOutlineControlled } from "../../mixins/focus.mjs";
+import { n as Stack, t as HStack } from "../../Stack-Bkn0TUDe.mjs";
+import { Color, Spacing } from "@persona/design-tokens";
+import { useLayoutEffect, useRef } from "react";
+import { Disclosure, DisclosurePanel } from "react-aria-components";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, ChevronRightIcon } from "@persona/icons/12px";
+//#region components/Accordion/scrollExpandedItemIntoView.ts
+const SCROLL_ALIGN_THRESHOLD_PX = 4;
+const prefersReducedMotion = () => typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+const getScrollBehavior = () => prefersReducedMotion() ? "auto" : "smooth";
+const isScrollableOverflow = (overflowY) => overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay";
+const findScrollContainer = (element) => {
+	let parent = element.parentElement;
+	while (parent) {
+		const { overflowY } = getComputedStyle(parent);
+		if (isScrollableOverflow(overflowY) && parent.scrollHeight > parent.clientHeight) return parent;
+		parent = parent.parentElement;
+	}
+	return null;
+};
+const getContainerRect = (container) => {
+	if (container) return container.getBoundingClientRect();
+	return {
+		top: 0,
+		bottom: window.innerHeight
+	};
+};
+const scrollBy = (container, deltaY) => {
+	if (Math.abs(deltaY) <= SCROLL_ALIGN_THRESHOLD_PX) return;
+	const behavior = getScrollBehavior();
+	if (container) {
+		container.scrollTo({
+			top: container.scrollTop + deltaY,
+			behavior
+		});
+		return;
+	}
+	window.scrollBy({
+		top: deltaY,
+		behavior
+	});
+};
+const scrollExpandedItemIntoView = (target) => {
+	if (!target) return;
+	const { itemElement, triggerElement } = target;
+	const container = findScrollContainer(itemElement);
+	const containerRect = getContainerRect(container);
+	const itemRect = itemElement.getBoundingClientRect();
+	const triggerRect = triggerElement.getBoundingClientRect();
+	const overflowBottom = itemRect.bottom - containerRect.bottom;
+	if (overflowBottom > SCROLL_ALIGN_THRESHOLD_PX) {
+		const maxScrollWithoutHidingTrigger = Math.max(0, triggerRect.top - containerRect.top);
+		scrollBy(container, Math.min(overflowBottom, maxScrollWithoutHidingTrigger));
+	}
+};
+const scrollExpandedItemIntoViewAfterExpand = (target) => {
+	scrollExpandedItemIntoView(target);
+	if (!target) return;
+	const cleanups = [];
+	const resyncScroll = () => scrollExpandedItemIntoView(target);
+	const timeoutId = window.setTimeout(resyncScroll, .2 * 1e3);
+	cleanups.push(() => window.clearTimeout(timeoutId));
+	const panel = target.itemElement.querySelector("[data-accordion-panel]");
+	if (panel) {
+		const onTransitionEnd = (event) => {
+			if (event.target !== panel || event.propertyName !== "height") return;
+			resyncScroll();
+		};
+		panel.addEventListener("transitionend", onTransitionEnd);
+		cleanups.push(() => panel.removeEventListener("transitionend", onTransitionEnd));
+	}
+	const rafId = window.requestAnimationFrame(() => {
+		const innerRafId = window.requestAnimationFrame(resyncScroll);
+		cleanups.push(() => window.cancelAnimationFrame(innerRafId));
+	});
+	cleanups.push(() => window.cancelAnimationFrame(rafId));
+	return () => {
+		cleanups.forEach((cleanup) => cleanup());
+	};
+};
+const resolveAccordionTriggerElement = (itemElement) => {
+	if (!itemElement) return null;
+	return itemElement.querySelector("[slot=\"trigger\"]") ?? itemElement.querySelector("button");
+};
+//#endregion
+//#region components/Accordion/AccordionItem.tsx
+const SIZE_HEIGHT = {
+	sm: Spacing[5],
+	md: Spacing[6],
+	lg: Spacing[7]
+};
+const ItemContainer = styled(Disclosure)`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  &:focus-within {
+    z-index: 1;
+  }
+
+  ${({ $showDivider }) => $showDivider && css`
+      border-top: 1px solid
+        ${({ theme }) => semanticColor(theme, "BorderSubtle", Color.BorderDivider)};
+    `}
+`;
+const ChevronContainer = styled.span`
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: ${Spacing[3]};
+  height: ${Spacing[3]};
+  color: ${({ theme }) => semanticColor(theme, "FgSecondary", Color.BorderIconSecondary)};
+  transition: color ${"200ms"} ease;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+`;
+const TriggerButton = styled(HeadlessAriaButton)`
+  width: 100%;
+  min-height: ${({ $size }) => SIZE_HEIGHT[$size]};
+  height: ${({ $size, $usesTitleTypographyOverride }) => $usesTitleTypographyOverride ? "auto" : SIZE_HEIGHT[$size]};
+  display: flex;
+  align-items: center;
+  text-align: left;
+  border-radius: 0;
+  background-color: transparent;
+  color: ${({ theme }) => semanticColor(theme, "FgPrimary", theme.color.text.primary)};
+  transition: background-color ${"200ms"} ease-in-out;
+  ${focusOutlineControlled}
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+
+  &${isFocusedVisible}${isNotDisabled} {
+    position: relative;
+    z-index: 1;
+  }
+
+  &:disabled {
+    cursor: default;
+    color: ${({ theme }) => semanticColor(theme, "FgDisabled", theme.color.text.disabled)};
+    background-color: transparent;
+
+    ${ChevronContainer} {
+      color: ${({ theme }) => semanticColor(theme, "FgDisabled", Color.BorderIconDisabled)};
+    }
+  }
+
+  &:hover:not(:disabled) {
+    background-color: ${({ theme }) => semanticColor(theme, "SurfaceHover", Color.BackgroundInteractiveHover)};
+  }
+
+  &:not(:disabled):hover ${ChevronContainer},
+  &${isFocusedVisible}${isNotDisabled} ${ChevronContainer} {
+    color: ${({ theme }) => semanticColor(theme, "FgPrimary", Color.BorderIconPrimary)};
+  }
+`;
+const CollapseTitle = styled(HStack)`
+  width: 100%;
+  min-width: 0;
+`;
+const TitleWrapper = styled.span`
+  display: flex;
+  align-items: center;
+  min-width: 0;
+`;
+const Panel = styled(DisclosurePanel)`
+  height: var(--disclosure-panel-height);
+  overflow: clip;
+  transition: height ${"200ms"} ease-out;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+`;
+const TitleHeading = styled(Heading$1)`
+  margin: 0;
+  width: 100%;
+  min-width: 0;
+  font: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+`;
+const PanelContent = styled.div`
+  padding: ${Spacing[3]} ${Spacing[4]};
+`;
+const TitleText = styled.span`
+  min-width: 0;
+  flex: 1;
+`;
+const renderTitleLabel = (title, titleTypography, disabled) => {
+	const content = /* @__PURE__ */ jsx(TruncatedText, { children: title });
+	const textColor = disabled ? "disabled" : "primary";
+	if (titleTypography.variant === "heading") return /* @__PURE__ */ jsx(TitleText, { children: /* @__PURE__ */ jsx(TitleWrapper, { children: /* @__PURE__ */ jsx(Heading$1, {
+		as: "span",
+		color: textColor,
+		size: titleTypography.size,
+		children: content
+	}) }) });
+	return /* @__PURE__ */ jsx(TitleText, { children: /* @__PURE__ */ jsx(TitleWrapper, { children: /* @__PURE__ */ jsx(Paragraph, {
+		as: "span",
+		color: textColor,
+		size: titleTypography.size,
+		weight: titleTypography.weight ?? "normal",
+		children: content
+	}) }) });
+};
+const renderChevron = (isExpanded) => isExpanded ? /* @__PURE__ */ jsx(ChevronDownIcon, {}) : /* @__PURE__ */ jsx(ChevronRightIcon, {});
+const ExpandScrollSync = ({ disabled, isExpanded, itemRef }) => {
+	const wasExpandedRef = useRef(isExpanded);
+	useLayoutEffect(() => {
+		if (disabled) {
+			wasExpandedRef.current = isExpanded;
+			return;
+		}
+		const didExpand = isExpanded && !wasExpandedRef.current;
+		wasExpandedRef.current = isExpanded;
+		const itemElement = itemRef.current;
+		const triggerElement = resolveAccordionTriggerElement(itemElement);
+		if (!didExpand || !itemElement || !triggerElement) return;
+		return scrollExpandedItemIntoViewAfterExpand({
+			itemElement,
+			triggerElement
+		});
+	}, [
+		disabled,
+		isExpanded,
+		itemRef
+	]);
+	return null;
+};
+const AccordionItem = ({ title, children, defaultExpanded = false, disabled = false, showDivider = false, size, titleTypography, usesTitleTypographyOverride, titleHeadingAs }) => {
+	const itemRef = useRef(null);
+	return /* @__PURE__ */ jsx(ItemContainer, {
+		ref: itemRef,
+		defaultExpanded: disabled ? false : defaultExpanded,
+		isDisabled: disabled,
+		$showDivider: showDivider,
+		children: ({ isExpanded }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(ExpandScrollSync, {
+				disabled,
+				isExpanded,
+				itemRef
+			}),
+			/* @__PURE__ */ jsx(TitleHeading, {
+				forwardedAs: titleHeadingAs,
+				size: "xsm",
+				children: /* @__PURE__ */ jsx(TriggerButton, {
+					slot: "trigger",
+					$size: size,
+					$usesTitleTypographyOverride: usesTitleTypographyOverride,
+					isDisabled: disabled,
+					children: /* @__PURE__ */ jsxs(CollapseTitle, {
+						align: "center",
+						spacing: Spacing[1],
+						children: [/* @__PURE__ */ jsx(ChevronContainer, {
+							"aria-hidden": "true",
+							children: renderChevron(isExpanded)
+						}), renderTitleLabel(title, titleTypography, disabled)]
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx(Panel, {
+				"data-accordion-panel": true,
+				children: /* @__PURE__ */ jsx(PanelContent, { children })
+			})
+		] })
+	});
+};
+//#endregion
+//#region components/Accordion/accordionTitleTypography.ts
+const getDefaultTitleTypography = (size) => {
+	if (size === "lg") return {
+		variant: "heading",
+		size: "xsm"
+	};
+	if (size === "sm") return {
+		variant: "paragraph",
+		size: "sm",
+		weight: "normal"
+	};
+	return {
+		variant: "paragraph",
+		size: "md",
+		weight: "bold"
+	};
+};
+const resolveTitleTypography = (size, titleTypography) => titleTypography ?? getDefaultTitleTypography(size);
+//#endregion
+//#region components/Accordion/Accordion.tsx
+const Accordion = ({ items, size = "md", dividers = false, titleTypography, titleHeadingAs = "h3", "aria-label": ariaLabel = "Accordion", className }) => {
+	if (items.length === 0) return null;
+	const resolvedTitleTypography = resolveTitleTypography(size, titleTypography);
+	const usesTitleTypographyOverride = titleTypography != null;
+	return /* @__PURE__ */ jsx(Stack, {
+		"aria-label": ariaLabel,
+		className,
+		fullWidth: true,
+		role: "group",
+		spacing: Spacing[0],
+		children: items.map((item, index) => /* @__PURE__ */ jsx(AccordionItem, {
+			defaultExpanded: item.defaultExpanded,
+			disabled: item.disabled,
+			showDivider: dividers,
+			size,
+			title: item.title,
+			titleHeadingAs,
+			titleTypography: resolvedTitleTypography,
+			usesTitleTypographyOverride,
+			children: item.children
+		}, item.id ?? `${item.title}-${index}`))
+	});
+};
+//#endregion
+export { Accordion, Accordion as default };
+
+//# sourceMappingURL=index.mjs.map

package/dist/components/Accordion/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["Heading"],"sources":["../../../components/Accordion/scrollExpandedItemIntoView.ts","../../../components/Accordion/AccordionItem.tsx","../../../components/Accordion/accordionTitleTypography.ts","../../../components/Accordion/Accordion.tsx"],"sourcesContent":["import { TransitionDurationInSeconds } from 'design-system/variables/transitions';\n\nexport type ScrollExpandedItemTarget = {\n  itemElement: HTMLElement;\n  triggerElement: HTMLElement;\n};\n\nconst SCROLL_ALIGN_THRESHOLD_PX = 4;\n\nconst prefersReducedMotion = () =>\n  typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\nconst getScrollBehavior = (): ScrollBehavior => (prefersReducedMotion() ? 'auto' : 'smooth');\n\nconst isScrollableOverflow = (overflowY: string) =>\n  overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay';\n\nexport const findScrollContainer = (element: HTMLElement): HTMLElement | null => {\n  let parent = element.parentElement;\n\n  while (parent) {\n    const { overflowY } = getComputedStyle(parent);\n    if (isScrollableOverflow(overflowY) && parent.scrollHeight > parent.clientHeight) {\n      return parent;\n    }\n    parent = parent.parentElement;\n  }\n\n  return null;\n};\n\nconst getContainerRect = (container: HTMLElement | null) => {\n  if (container) {\n    return container.getBoundingClientRect();\n  }\n\n  return {\n    top: 0,\n    bottom: window.innerHeight,\n  } as Pick<DOMRect, 'top' | 'bottom'>;\n};\n\nconst scrollBy = (container: HTMLElement | null, deltaY: number) => {\n  if (Math.abs(deltaY) <= SCROLL_ALIGN_THRESHOLD_PX) {\n    return;\n  }\n\n  const behavior = getScrollBehavior();\n\n  if (container) {\n    container.scrollTo({ top: container.scrollTop + deltaY, behavior });\n    return;\n  }\n\n  window.scrollBy({ top: deltaY, behavior });\n};\n\nexport const scrollExpandedItemIntoView = (target: ScrollExpandedItemTarget | null) => {\n  if (!target) {\n    return;\n  }\n\n  const { itemElement, triggerElement } = target;\n  const container = findScrollContainer(itemElement);\n  const containerRect = getContainerRect(container);\n  const itemRect = itemElement.getBoundingClientRect();\n  const triggerRect = triggerElement.getBoundingClientRect();\n  const overflowBottom = itemRect.bottom - containerRect.bottom;\n\n  if (overflowBottom > SCROLL_ALIGN_THRESHOLD_PX) {\n    const maxScrollWithoutHidingTrigger = Math.max(0, triggerRect.top - containerRect.top);\n    const deltaY = Math.min(overflowBottom, maxScrollWithoutHidingTrigger);\n    scrollBy(container, deltaY);\n  }\n};\n\nexport const scrollExpandedItemIntoViewAfterExpand = (target: ScrollExpandedItemTarget | null) => {\n  scrollExpandedItemIntoView(target);\n\n  if (!target) {\n    return undefined;\n  }\n\n  const cleanups: Array<() => void> = [];\n  const resyncScroll = () => scrollExpandedItemIntoView(target);\n\n  const timeoutId = window.setTimeout(resyncScroll, TransitionDurationInSeconds.Fast * 1000);\n  cleanups.push(() => window.clearTimeout(timeoutId));\n\n  const panel = target.itemElement.querySelector<HTMLElement>('[data-accordion-panel]');\n  if (panel) {\n    const onTransitionEnd = (event: TransitionEvent) => {\n      if (event.target !== panel || event.propertyName !== 'height') {\n        return;\n      }\n\n      resyncScroll();\n    };\n\n    panel.addEventListener('transitionend', onTransitionEnd);\n    cleanups.push(() => panel.removeEventListener('transitionend', onTransitionEnd));\n  }\n\n  const rafId = window.requestAnimationFrame(() => {\n    const innerRafId = window.requestAnimationFrame(resyncScroll);\n    cleanups.push(() => window.cancelAnimationFrame(innerRafId));\n  });\n  cleanups.push(() => window.cancelAnimationFrame(rafId));\n\n  return () => {\n    cleanups.forEach((cleanup) => cleanup());\n  };\n};\n\nexport const resolveAccordionTriggerElement = (itemElement: HTMLElement | null) => {\n  if (!itemElement) {\n    return null;\n  }\n\n  return (\n    itemElement.querySelector<HTMLElement>('[slot=\"trigger\"]') ??\n    itemElement.querySelector<HTMLElement>('button')\n  );\n};\n","import type { ReactNode, RefObject } from 'react';\nimport { useLayoutEffect, useRef } from 'react';\nimport { Disclosure, DisclosurePanel } from 'react-aria-components';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { ChevronDownIcon, ChevronRightIcon } from '@persona/icons/12px';\nimport { HStack } from 'design-system/components/Stack';\nimport { Heading, Paragraph } from 'design-system/components/Text';\nimport { HeadlessAriaButton } from 'design-system/lib/HeadlessAriaButton';\nimport { isFocusedVisible, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { TruncatedText } from 'design-system/lib/TruncatedText';\nimport { focusOutlineControlled } from 'design-system/mixins/focus';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nimport type { AccordionSize, AccordionTitleTypography } from './accordionTitleTypography';\nimport {\n  scrollExpandedItemIntoViewAfterExpand,\n  resolveAccordionTriggerElement,\n} from './scrollExpandedItemIntoView';\n\nexport type AccordionTitleHeadingAs = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\nexport type { AccordionSize, AccordionTitleTypography };\n\nconst SIZE_HEIGHT: Record<AccordionSize, string> = {\n  sm: Spacing[5],\n  md: Spacing[6],\n  lg: Spacing[7],\n};\n\nconst ItemContainer = styled(Disclosure)<{ $showDivider: boolean }>`\n  display: flex;\n  flex-direction: column;\n  position: relative;\n\n  &:focus-within {\n    z-index: 1;\n  }\n\n  ${({ $showDivider }) =>\n    $showDivider &&\n    css`\n      border-top: 1px solid\n        ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n    `}\n`;\n\nconst ChevronContainer = styled.span`\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  width: ${Spacing[3]};\n  height: ${Spacing[3]};\n  color: ${({ theme }) => semanticColor(theme, 'FgSecondary', Color.BorderIconSecondary)};\n  transition: color ${TransitionDuration.Fast} ease;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n`;\n\nconst TriggerButton = styled(HeadlessAriaButton)<{\n  $size: AccordionSize;\n  $usesTitleTypographyOverride: boolean;\n}>`\n  width: 100%;\n  min-height: ${({ $size }) => SIZE_HEIGHT[$size]};\n  height: ${({ $size, $usesTitleTypographyOverride }) =>\n    $usesTitleTypographyOverride ? 'auto' : SIZE_HEIGHT[$size]};\n  display: flex;\n  align-items: center;\n  text-align: left;\n  border-radius: 0;\n  background-color: transparent;\n  color: ${({ theme }) => semanticColor(theme, 'FgPrimary', theme.color.text.primary)};\n  transition: background-color ${TransitionDuration.Fast} ease-in-out;\n  ${focusOutlineControlled}\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n\n  &${isFocusedVisible}${isNotDisabled} {\n    position: relative;\n    z-index: 1;\n  }\n\n  &:disabled {\n    cursor: default;\n    color: ${({ theme }) => semanticColor(theme, 'FgDisabled', theme.color.text.disabled)};\n    background-color: transparent;\n\n    ${ChevronContainer} {\n      color: ${({ theme }) => semanticColor(theme, 'FgDisabled', Color.BorderIconDisabled)};\n    }\n  }\n\n  &:hover:not(:disabled) {\n    background-color: ${({ theme }) =>\n      semanticColor(theme, 'SurfaceHover', Color.BackgroundInteractiveHover)};\n  }\n\n  &:not(:disabled):hover ${ChevronContainer},\n  &${isFocusedVisible}${isNotDisabled} ${ChevronContainer} {\n    color: ${({ theme }) => semanticColor(theme, 'FgPrimary', Color.BorderIconPrimary)};\n  }\n`;\n\nconst CollapseTitle = styled(HStack)`\n  width: 100%;\n  min-width: 0;\n`;\n\nconst TitleWrapper = styled.span`\n  display: flex;\n  align-items: center;\n  min-width: 0;\n`;\n\nconst Panel = styled(DisclosurePanel)`\n  height: var(--disclosure-panel-height);\n  overflow: clip;\n  transition: height ${TransitionDuration.Fast} ease-out;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n`;\n\nconst TitleHeading = styled(Heading)`\n  margin: 0;\n  width: 100%;\n  min-width: 0;\n  font: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n`;\n\nconst PanelContent = styled.div`\n  padding: ${Spacing[3]} ${Spacing[4]};\n`;\n\nconst TitleText = styled.span`\n  min-width: 0;\n  flex: 1;\n`;\n\nexport type AccordionItemComponentProps = {\n  title: string;\n  children: ReactNode;\n  defaultExpanded?: boolean;\n  disabled?: boolean;\n  showDivider?: boolean;\n  size: AccordionSize;\n  titleTypography: AccordionTitleTypography;\n  usesTitleTypographyOverride: boolean;\n  titleHeadingAs: AccordionTitleHeadingAs;\n};\n\nconst renderTitleLabel = (\n  title: string,\n  titleTypography: AccordionTitleTypography,\n  disabled: boolean,\n) => {\n  const content = <TruncatedText>{title}</TruncatedText>;\n  const textColor = disabled ? 'disabled' : 'primary';\n\n  if (titleTypography.variant === 'heading') {\n    return (\n      <TitleText>\n        <TitleWrapper>\n          <Heading as='span' color={textColor} size={titleTypography.size}>\n            {content}\n          </Heading>\n        </TitleWrapper>\n      </TitleText>\n    );\n  }\n\n  return (\n    <TitleText>\n      <TitleWrapper>\n        <Paragraph\n          as='span'\n          color={textColor}\n          size={titleTypography.size}\n          weight={titleTypography.weight ?? 'normal'}\n        >\n          {content}\n        </Paragraph>\n      </TitleWrapper>\n    </TitleText>\n  );\n};\n\nconst renderChevron = (isExpanded: boolean) =>\n  isExpanded ? <ChevronDownIcon /> : <ChevronRightIcon />;\n\nconst ExpandScrollSync = ({\n  disabled,\n  isExpanded,\n  itemRef,\n}: {\n  disabled: boolean;\n  isExpanded: boolean;\n  itemRef: RefObject<HTMLElement | null>;\n}) => {\n  const wasExpandedRef = useRef(isExpanded);\n\n  useLayoutEffect(() => {\n    if (disabled) {\n      wasExpandedRef.current = isExpanded;\n      return undefined;\n    }\n\n    const didExpand = isExpanded && !wasExpandedRef.current;\n    wasExpandedRef.current = isExpanded;\n\n    const itemElement = itemRef.current;\n    const triggerElement = resolveAccordionTriggerElement(itemElement);\n\n    if (!didExpand || !itemElement || !triggerElement) {\n      return undefined;\n    }\n\n    return scrollExpandedItemIntoViewAfterExpand({\n      itemElement,\n      triggerElement,\n    });\n  }, [disabled, isExpanded, itemRef]);\n\n  return null;\n};\n\nconst AccordionItem = ({\n  title,\n  children,\n  defaultExpanded = false,\n  disabled = false,\n  showDivider = false,\n  size,\n  titleTypography,\n  usesTitleTypographyOverride,\n  titleHeadingAs,\n}: AccordionItemComponentProps) => {\n  const itemRef = useRef<HTMLDivElement>(null);\n\n  return (\n    <ItemContainer\n      ref={itemRef}\n      defaultExpanded={disabled ? false : defaultExpanded}\n      isDisabled={disabled}\n      $showDivider={showDivider}\n    >\n      {({ isExpanded }) => (\n        <>\n          <ExpandScrollSync disabled={disabled} isExpanded={isExpanded} itemRef={itemRef} />\n          <TitleHeading forwardedAs={titleHeadingAs} size='xsm'>\n            <TriggerButton\n              slot='trigger'\n              $size={size}\n              $usesTitleTypographyOverride={usesTitleTypographyOverride}\n              isDisabled={disabled}\n            >\n              <CollapseTitle align='center' spacing={Spacing[1]}>\n                <ChevronContainer aria-hidden='true'>{renderChevron(isExpanded)}</ChevronContainer>\n                {renderTitleLabel(title, titleTypography, disabled)}\n              </CollapseTitle>\n            </TriggerButton>\n          </TitleHeading>\n          <Panel data-accordion-panel>\n            <PanelContent>{children}</PanelContent>\n          </Panel>\n        </>\n      )}\n    </ItemContainer>\n  );\n};\n\nexport default AccordionItem;\n","import type { HeadingSize, ParagraphSize } from 'design-system/mixins/text';\n\nexport type AccordionSize = 'sm' | 'md' | 'lg';\n\nexport type AccordionTitleTypography =\n  | { variant: 'heading'; size: HeadingSize }\n  | {\n      variant: 'paragraph';\n      size: Extract<ParagraphSize, 'sm' | 'md' | 'lg'>;\n      weight?: 'normal' | 'bold';\n    };\n\nexport const getDefaultTitleTypography = (size: AccordionSize): AccordionTitleTypography => {\n  if (size === 'lg') {\n    return { variant: 'heading', size: 'xsm' };\n  }\n\n  if (size === 'sm') {\n    return { variant: 'paragraph', size: 'sm', weight: 'normal' };\n  }\n\n  return { variant: 'paragraph', size: 'md', weight: 'bold' };\n};\n\nexport const resolveTitleTypography = (\n  size: AccordionSize,\n  titleTypography?: AccordionTitleTypography,\n): AccordionTitleTypography => titleTypography ?? getDefaultTitleTypography(size);\n","import type { ReactNode } from 'react';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { Stack } from 'design-system/components/Stack';\n\nimport AccordionItem, {\n  type AccordionSize,\n  type AccordionTitleHeadingAs,\n  type AccordionTitleTypography,\n} from './AccordionItem';\nimport { resolveTitleTypography } from './accordionTitleTypography';\n\nexport type AccordionItemProps = {\n  id?: string;\n  title: string;\n  children: ReactNode;\n  defaultExpanded?: boolean;\n  disabled?: boolean;\n};\n\nexport type AccordionProps = {\n  items: AccordionItemProps[];\n  size?: AccordionSize;\n  dividers?: boolean;\n  titleTypography?: AccordionTitleTypography;\n  /**\n   * Heading element for each item title (inside the trigger), matching Card section headings.\n   * Defaults to `h3`; use a lower level when the page already uses higher headings.\n   */\n  titleHeadingAs?: AccordionTitleHeadingAs;\n  'aria-label'?: string;\n  className?: string;\n};\n\nexport const Accordion = ({\n  items,\n  size = 'md',\n  dividers = false,\n  titleTypography,\n  titleHeadingAs = 'h3',\n  'aria-label': ariaLabel = 'Accordion',\n  className,\n}: AccordionProps) => {\n  if (items.length === 0) {\n    return null;\n  }\n\n  const resolvedTitleTypography = resolveTitleTypography(size, titleTypography);\n  const usesTitleTypographyOverride = titleTypography != null;\n\n  return (\n    <Stack aria-label={ariaLabel} className={className} fullWidth role='group' spacing={Spacing[0]}>\n      {items.map((item, index) => (\n        <AccordionItem\n          key={item.id ?? `${item.title}-${index}`}\n          defaultExpanded={item.defaultExpanded}\n          disabled={item.disabled}\n          showDivider={dividers}\n          size={size}\n          title={item.title}\n          titleHeadingAs={titleHeadingAs}\n          titleTypography={resolvedTitleTypography}\n          usesTitleTypographyOverride={usesTitleTypographyOverride}\n        >\n          {item.children}\n        </AccordionItem>\n      ))}\n    </Stack>\n  );\n};\n\nexport default Accordion;\n"],"mappings":"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"}

package/dist/components/Attribute/index.mjs

@@ -3,8 +3,8 @@ import { semanticColor, semanticOnly } from "../../lib/semanticColor.mjs";
 import { i as Paragraph } from "../../Text-BdluS7Fy.mjs";
 import { r as HelperTooltip } from "../../Tooltip-C0FuZS1C.mjs";
 import { isHovered, isNotDisabled } from "../../lib/pseudoClass.mjs";
-import { t as IconButton } from "../../IconButton-CqTPMhjV.mjs";
-import { n as Sticker } from "../../Sticker-C3Eb13OQ.mjs";
+import { t as IconButton } from "../../IconButton-CCLMYWVN.mjs";
+import { n as Sticker } from "../../Sticker-BLbgJxcH.mjs";
 import { Color, Spacing, Typography } from "@persona/design-tokens";
 import { createContext, useContext, useEffect, useMemo, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/Badge/index.mjs

@@ -1,2 +1,2 @@
-import { t as Badge } from "../../Badge-BD0Ut46g.mjs";
+import { t as Badge } from "../../Badge-COqUjFQu.mjs";
 export { Badge, Badge as default };

package/dist/components/Banner/index.mjs

@@ -3,7 +3,7 @@ import { semanticOnly, semanticTokens } from "../../lib/semanticColor.mjs";
 import { paragraphMixins } from "../../mixins/text.mjs";
 import { withAlpha } from "../../lib/color.mjs";
 import { isActive, isFocused, isHovered, isNotDisabled } from "../../lib/pseudoClass.mjs";
-import { n as Button } from "../../IconButton-CqTPMhjV.mjs";
+import { n as Button } from "../../IconButton-CCLMYWVN.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { XIcon } from "@persona/icons";

package/dist/components/BottomPanel/index.mjs

@@ -1,9 +1,10 @@
 import { a as styled, r as css } from "../../styledComponentsInterop-NxwFjeA4.mjs";
 import { useResizablePanel } from "../../lib/useResizablePanel.mjs";
 import { Z_INDICES } from "../../lib/zindex.mjs";
-import { t as IconButton } from "../../IconButton-CqTPMhjV.mjs";
-import { t as Badge } from "../../Badge-BD0Ut46g.mjs";
-import { i as TabBar, r as Tab } from "../../TabBar-BepWbJHz.mjs";
+import { semanticScrollbar } from "../../mixins/scrollbar.mjs";
+import { t as IconButton } from "../../IconButton-CCLMYWVN.mjs";
+import { t as Badge } from "../../Badge-COqUjFQu.mjs";
+import { i as TabBar, r as Tab } from "../../TabBar-Bj84q1Mr.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -151,6 +152,7 @@ const ContentContainer = styled.div`
   /* offset by the top row container height */
   height: calc(100% - ${Spacing[6]});
   overflow: auto;
+  ${semanticScrollbar}
   display: flex;
   flex-direction: column;
   min-height: 0;

package/dist/components/BottomPanel/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/BottomPanel/ResizeHandle.tsx","../../../components/BottomPanel/ResizableVerticalPanel.tsx","../../../components/BottomPanel/BottomPanel.tsx"],"sourcesContent":["import { type FC, type RefObject, useEffect, useRef } from 'react';\nimport styled from 'styled-components';\n\nimport { Z_INDICES } from '@persona/design-system/lib/zindex';\nimport { Spacing } from '@persona/design-tokens';\n\nconst DRAGGING_CLASSNAME = 'dragging';\n\ninterface ResizeHandleProps {\n  ariaLabel: string;\n  /** Fires on double-click or Enter/Space so the host can toggle/reset the size. */\n  onDoubleClick?: () => void;\n  /** Called on each pointer move with the new top edge position (clientY) in px. */\n  onMoveTo: (position: number) => void;\n  /** Called once when the drag ends (pointerup, cancel, or lost capture). */\n  onRelease?: () => void;\n  /** The panel being resized; its edge seeds the grab offset so the handle doesn't jump. */\n  panelRef: RefObject<HTMLDivElement>;\n}\n\n// The visible line is 2px tall on the panel's top border; the hitbox is Spacing[2] tall and\n// straddles that border so it is easy to grab without covering the header row's controls.\nconst ResizeHandleContainer = styled.div`\n  cursor: row-resize;\n  position: absolute;\n  height: ${Spacing[2]};\n  top: -${Spacing[1]};\n  left: 0;\n  right: 0;\n  z-index: ${Z_INDICES.dropdown};\n  touch-action: none;\n\n  &::after {\n    content: '';\n    position: absolute;\n    top: ${Spacing[1]};\n    left: 0;\n    right: 0;\n    height: 2px;\n    background-color: transparent;\n    transition: background-color 0.15s ease-in;\n    transition-delay: 0.025s;\n  }\n\n  &:hover::after,\n  &.${DRAGGING_CLASSNAME}::after {\n    background-color: ${({ theme }) => theme.color.border.active};\n  }\n`;\n\n/** Vertical resize handle pinned to the top edge of a bottom-anchored panel. */\nexport const ResizeHandle: FC<ResizeHandleProps> = ({\n  ariaLabel,\n  onDoubleClick,\n  onMoveTo,\n  onRelease,\n  panelRef,\n}) => {\n  const resizeHandleRef = useRef<HTMLDivElement>(null);\n  const panelOffsetRef = useRef(0);\n  const activePointerIdRef = useRef<number | null>(null);\n  const documentListenersRef = useRef<{\n    handleEnd: (event: PointerEvent) => void;\n    handleMove: (event: PointerEvent) => void;\n  } | null>(null);\n  // Document listeners are registered once per drag; reading the callbacks through\n  // refs keeps them on the latest props without re-registering mid-drag.\n  const onMoveToRef = useRef(onMoveTo);\n  const onReleaseRef = useRef(onRelease);\n  onMoveToRef.current = onMoveTo;\n  onReleaseRef.current = onRelease;\n\n  const removeDocumentListeners = () => {\n    const listeners = documentListenersRef.current;\n    if (!listeners) {\n      return;\n    }\n\n    document.removeEventListener('pointermove', listeners.handleMove);\n    document.removeEventListener('pointerup', listeners.handleEnd);\n    document.removeEventListener('pointercancel', listeners.handleEnd);\n    documentListenersRef.current = null;\n  };\n\n  // Pointer capture routes events through the handle (including over iframes), but\n  // some surfaces still drop pointerup. Document-level listeners during an active\n  // drag are the release safety net. Only the pointer that started the drag may\n  // move or end it.\n  const endDrag = (pointerId: number) => {\n    if (activePointerIdRef.current !== pointerId) {\n      return;\n    }\n\n    activePointerIdRef.current = null;\n    removeDocumentListeners();\n    try {\n      resizeHandleRef.current?.releasePointerCapture(pointerId);\n    } catch {\n      // No active capture (or unsupported, e.g. jsdom) — nothing to release.\n    }\n\n    resizeHandleRef.current?.classList.remove(DRAGGING_CLASSNAME);\n    panelOffsetRef.current = 0;\n    onReleaseRef.current?.();\n  };\n\n  const handleDocumentPointerMove = (event: PointerEvent) => {\n    if (activePointerIdRef.current !== event.pointerId) {\n      return;\n    }\n\n    onMoveToRef.current(event.clientY + panelOffsetRef.current);\n  };\n\n  const addDocumentListeners = () => {\n    removeDocumentListeners();\n\n    const listeners = {\n      handleEnd: (event: PointerEvent) => endDrag(event.pointerId),\n      handleMove: handleDocumentPointerMove,\n    };\n    documentListenersRef.current = listeners;\n    document.addEventListener('pointermove', listeners.handleMove);\n    document.addEventListener('pointerup', listeners.handleEnd);\n    document.addEventListener('pointercancel', listeners.handleEnd);\n  };\n\n  const endDragRef = useRef(endDrag);\n  endDragRef.current = endDrag;\n  useEffect(() => {\n    return () => {\n      const activePointerId = activePointerIdRef.current;\n      if (activePointerId != null) {\n        endDragRef.current(activePointerId);\n      }\n    };\n  }, []);\n\n  return (\n    <ResizeHandleContainer\n      aria-label={ariaLabel}\n      onDoubleClick={onDoubleClick}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          onDoubleClick?.();\n          e.preventDefault();\n        }\n      }}\n      onLostPointerCapture={(e) => endDrag(e.pointerId)}\n      onPointerCancel={(e) => endDrag(e.pointerId)}\n      onPointerDown={(e) => {\n        // Primary button / touch / pen only; ignore secondary and middle clicks,\n        // and a second pointer while a drag is already active.\n        if (e.button !== 0 || activePointerIdRef.current != null) {\n          return;\n        }\n        const panelRect = panelRef.current?.getBoundingClientRect();\n        panelOffsetRef.current = panelRect ? panelRect.top - e.clientY : 0;\n        activePointerIdRef.current = e.pointerId;\n        resizeHandleRef.current?.classList.add(DRAGGING_CLASSNAME);\n        addDocumentListeners();\n        try {\n          resizeHandleRef.current?.setPointerCapture(e.pointerId);\n        } catch {\n          // Pointer capture unsupported (e.g. jsdom) — document listeners still\n          // route move/up events for the duration of the drag.\n        }\n        e.preventDefault();\n        e.stopPropagation();\n      }}\n      onPointerUp={(e) => endDrag(e.pointerId)}\n      ref={resizeHandleRef}\n      role='button'\n      tabIndex={0}\n    />\n  );\n};\n","import { type FC, type ReactNode, useRef } from 'react';\nimport styled from 'styled-components';\n\nimport { IconButton } from '@persona/design-system/components/Button';\nimport { PanelState, type ResizablePanelState } from '@persona/design-system/lib/useResizablePanel';\nimport { Z_INDICES } from '@persona/design-system/lib/zindex';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { ArrowCollapseIcon, ArrowExpandIcon, XIcon } from '@persona/icons';\n\nimport { ResizeHandle } from './ResizeHandle';\n\ninterface ResizableVerticalPanelProps {\n  /** Panel body, rendered in the scrollable content area below the header. */\n  children: ReactNode;\n  /** Content for the header row, left of the maximize/minimize/close buttons. */\n  headerContent?: ReactNode;\n  /** State and drag/resize handlers from `useResizablePanel`. */\n  hookState: ResizablePanelState;\n  /** Minimum panel height in px. */\n  minHeight: number;\n}\n\nconst TriStatePanel = styled.div.attrs<{\n  customHeight: number | null;\n  minHeight: number;\n  panelState: PanelState;\n}>(({ customHeight, minHeight, panelState }) => ({\n  style: {\n    height: panelState === PanelState.Maximized ? '100%' : `${customHeight ?? minHeight}px`,\n  },\n}))<{\n  customHeight: number | null;\n  minHeight: number;\n  panelState: PanelState;\n}>`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n  background-color: ${({ theme }) => theme.color.background.primary};\n  position: relative;\n  min-height: ${({ minHeight }) => minHeight}px;\n  width: 100%;\n  border-top: 1px solid ${Color.BorderDivider};\n  z-index: ${Z_INDICES.topNav};\n`;\n\nconst TopRowContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  box-shadow: inset 0px -1px 0px 0px ${Color.BorderDivider};\n`;\n\nconst TopRightIconsContainer = styled.div`\n  display: flex;\n  align-items: center;\n  padding: 0 ${Spacing[2]};\n  gap: ${Spacing[2]};\n  flex-direction: row;\n`;\n\nconst ContentContainer = styled.div`\n  /* offset by the top row container height */\n  height: calc(100% - ${Spacing[6]});\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n`;\n\n/**\n * Bottom-anchored panel with a drag-to-resize top edge, a header row, and\n * maximize/minimize/close controls.\n */\nexport const ResizableVerticalPanel: FC<ResizableVerticalPanelProps> = ({\n  children,\n  headerContent,\n  hookState,\n  minHeight,\n}) => {\n  const {\n    collapse,\n    handleDragMove: handlePanelDragMove,\n    handleDragRelease,\n    maximize,\n    panelState,\n    restore,\n    size,\n    toggleMaximized,\n  } = hookState;\n  const panelRef = useRef<HTMLDivElement>(null);\n  // Controls only make sense once the drawer is taller than its collapsed header.\n  const showControls = (size != null && size > minHeight) || panelState === PanelState.Maximized;\n  // Converts the dragged top edge (clientY) into a panel height bounded by the\n  // panel's container.\n  const handleDragMove = (clientY: number) => {\n    const panel = panelRef.current;\n    const container = panel?.parentElement;\n    if (!panel || !container) {\n      return;\n    }\n    const panelBottom = panel.getBoundingClientRect().bottom;\n    const containerTop = container.getBoundingClientRect().top;\n    handlePanelDragMove(panelBottom - clientY, panelBottom - containerTop);\n  };\n\n  return (\n    <TriStatePanel\n      aria-label='Bottom panel'\n      customHeight={size}\n      minHeight={minHeight}\n      panelState={panelState}\n      ref={panelRef}\n      role='region'\n    >\n      <ResizeHandle\n        ariaLabel='Drag to resize bottom panel'\n        onDoubleClick={toggleMaximized}\n        onMoveTo={handleDragMove}\n        onRelease={handleDragRelease}\n        panelRef={panelRef}\n      />\n\n      <TopRowContainer>\n        {headerContent}\n\n        {showControls && (\n          <TopRightIconsContainer>\n            {panelState === PanelState.Maximized ? (\n              <IconButton aria-label='Restore the bottom panel' onClick={restore} size='sm'>\n                <ArrowCollapseIcon />\n              </IconButton>\n            ) : (\n              <IconButton aria-label='Maximize the bottom panel' onClick={maximize} size='sm'>\n                <ArrowExpandIcon />\n              </IconButton>\n            )}\n            <IconButton aria-label='Close bottom panel' onClick={collapse} size='sm'>\n              <XIcon />\n            </IconButton>\n          </TopRightIconsContainer>\n        )}\n      </TopRowContainer>\n\n      <ContentContainer>{children}</ContentContainer>\n    </TriStatePanel>\n  );\n};\n","import {\n  forwardRef,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useState,\n} from 'react';\nimport { useId } from 'react-aria';\nimport styled, { css } from 'styled-components';\n\nimport Badge from '@persona/design-system/components/Badge';\nimport TabBar, { Tab } from '@persona/design-system/components/TabBar';\nimport { PanelState, useResizablePanel } from '@persona/design-system/lib/useResizablePanel';\nimport { Spacing } from '@persona/design-tokens';\n\nimport { ResizableVerticalPanel } from './ResizableVerticalPanel';\n\n// One-pixel panel top border plus the 32px header row sets the collapsed drawer height.\nconst PANEL_MIN_HEIGHT = 33;\n// Where the drawer opens to when a collapsed tab is selected; the user can drag from there.\nconst OPEN_HEIGHT = 200;\n\nexport interface BottomPanelItemProps {\n  /** Tab text; also the key `openPanel(label)` looks up. Unique per BottomPanel. */\n  label: string;\n  /**\n   * Tab body. Every panel stays mounted while another tab is selected, so local\n   * state (scroll, expanded rows) survives a switch.\n   */\n  content: ReactNode;\n  /** Count shown as a badge on the tab. `0`/`undefined` hides it. */\n  badge?: number;\n}\n\nexport interface BottomPanelHandle {\n  /** Select the tab and expand the drawer if collapsed. No-op for an unknown label. */\n  openPanel: (label: string) => void;\n}\n\nexport interface BottomPanelProps {\n  /** Tabs to show, in order. */\n  panels: BottomPanelItemProps[];\n}\n\nconst Header = styled.div`\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  width: 100%;\n  padding-left: ${Spacing[4]};\n`;\n\n// The header row draws the divider edge to edge; the tab bar must not add its own.\nconst HeaderTabBar = styled(TabBar)`\n  border-bottom: none;\n`;\n\nconst PanelContent = styled.div<{ $hidden: boolean }>`\n  ${({ $hidden }) =>\n    $hidden\n      ? css`\n          position: absolute;\n          inset: 0;\n          overflow: hidden;\n          visibility: hidden;\n          pointer-events: none;\n        `\n      : css`\n          display: flex;\n          flex-direction: column;\n          flex: 1 1 auto;\n          min-height: 0;\n        `}\n`;\n\n/**\n * Resizable drawer anchored to the bottom of its container with one tab per\n * panel. Owns the tab bar, expand/collapse/resize, and always-mounted content;\n * the caller owns what each panel shows.\n */\nconst BottomPanel = forwardRef<BottomPanelHandle, BottomPanelProps>(function BottomPanel(\n  { panels },\n  ref,\n) {\n  const baseId = useId();\n  const [selected, setSelected] = useState<string | undefined>(panels[0]?.label);\n  // Falls back to the first panel when the selected label has left `panels`, and\n  // commits the fallback so the old label does not regain selection if it returns.\n  const hasSelected = panels.some((panel) => panel.label === selected);\n  const selectedLabel = hasSelected ? selected : panels[0]?.label;\n  useEffect(() => {\n    if (!hasSelected) {\n      setSelected(selectedLabel);\n    }\n  }, [hasSelected, selectedLabel]);\n\n  const resizablePanelState = useResizablePanel({\n    initialSize: PANEL_MIN_HEIGHT,\n    minSize: PANEL_MIN_HEIGHT,\n  });\n  const { expandTo, panelState, size } = resizablePanelState;\n\n  // Selecting a tab opens a collapsed drawer but leaves a maximized one as is.\n  const openPanel = useCallback(\n    (label: string) => {\n      if (panelState === PanelState.Drawer && (size == null || size <= PANEL_MIN_HEIGHT)) {\n        expandTo(OPEN_HEIGHT);\n      }\n      setSelected(label);\n    },\n    [expandTo, panelState, size],\n  );\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      openPanel: (label: string) => {\n        if (panels.some((panel) => panel.label === label)) {\n          openPanel(label);\n        }\n      },\n    }),\n    [openPanel, panels],\n  );\n\n  return (\n    <ResizableVerticalPanel\n      headerContent={\n        <Header>\n          <HeaderTabBar>\n            {panels.map((panel, index) => (\n              <Tab\n                aria-controls={`${baseId}-panel-${index}`}\n                badge={panel.badge ? <Badge>{panel.badge}</Badge> : undefined}\n                id={`${baseId}-tab-${index}`}\n                key={panel.label}\n                onClick={() => openPanel(panel.label)}\n                selected={selectedLabel === panel.label}\n              >\n                {panel.label}\n              </Tab>\n            ))}\n          </HeaderTabBar>\n        </Header>\n      }\n      hookState={resizablePanelState}\n      minHeight={PANEL_MIN_HEIGHT}\n    >\n      {panels.map((panel, index) => {\n        const isSelected = selectedLabel === panel.label;\n        return (\n          <PanelContent\n            $hidden={!isSelected}\n            aria-hidden={!isSelected}\n            aria-labelledby={`${baseId}-tab-${index}`}\n            id={`${baseId}-panel-${index}`}\n            key={panel.label}\n            role='tabpanel'\n          >\n            {panel.content}\n          </PanelContent>\n        );\n      })}\n    </ResizableVerticalPanel>\n  );\n});\n\nexport default BottomPanel;\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/BottomPanel/ResizeHandle.tsx","../../../components/BottomPanel/ResizableVerticalPanel.tsx","../../../components/BottomPanel/BottomPanel.tsx"],"sourcesContent":["import { type FC, type RefObject, useEffect, useRef } from 'react';\nimport styled from 'styled-components';\n\nimport { Z_INDICES } from '@persona/design-system/lib/zindex';\nimport { Spacing } from '@persona/design-tokens';\n\nconst DRAGGING_CLASSNAME = 'dragging';\n\ninterface ResizeHandleProps {\n  ariaLabel: string;\n  /** Fires on double-click or Enter/Space so the host can toggle/reset the size. */\n  onDoubleClick?: () => void;\n  /** Called on each pointer move with the new top edge position (clientY) in px. */\n  onMoveTo: (position: number) => void;\n  /** Called once when the drag ends (pointerup, cancel, or lost capture). */\n  onRelease?: () => void;\n  /** The panel being resized; its edge seeds the grab offset so the handle doesn't jump. */\n  panelRef: RefObject<HTMLDivElement>;\n}\n\n// The visible line is 2px tall on the panel's top border; the hitbox is Spacing[2] tall and\n// straddles that border so it is easy to grab without covering the header row's controls.\nconst ResizeHandleContainer = styled.div`\n  cursor: row-resize;\n  position: absolute;\n  height: ${Spacing[2]};\n  top: -${Spacing[1]};\n  left: 0;\n  right: 0;\n  z-index: ${Z_INDICES.dropdown};\n  touch-action: none;\n\n  &::after {\n    content: '';\n    position: absolute;\n    top: ${Spacing[1]};\n    left: 0;\n    right: 0;\n    height: 2px;\n    background-color: transparent;\n    transition: background-color 0.15s ease-in;\n    transition-delay: 0.025s;\n  }\n\n  &:hover::after,\n  &.${DRAGGING_CLASSNAME}::after {\n    background-color: ${({ theme }) => theme.color.border.active};\n  }\n`;\n\n/** Vertical resize handle pinned to the top edge of a bottom-anchored panel. */\nexport const ResizeHandle: FC<ResizeHandleProps> = ({\n  ariaLabel,\n  onDoubleClick,\n  onMoveTo,\n  onRelease,\n  panelRef,\n}) => {\n  const resizeHandleRef = useRef<HTMLDivElement>(null);\n  const panelOffsetRef = useRef(0);\n  const activePointerIdRef = useRef<number | null>(null);\n  const documentListenersRef = useRef<{\n    handleEnd: (event: PointerEvent) => void;\n    handleMove: (event: PointerEvent) => void;\n  } | null>(null);\n  // Document listeners are registered once per drag; reading the callbacks through\n  // refs keeps them on the latest props without re-registering mid-drag.\n  const onMoveToRef = useRef(onMoveTo);\n  const onReleaseRef = useRef(onRelease);\n  onMoveToRef.current = onMoveTo;\n  onReleaseRef.current = onRelease;\n\n  const removeDocumentListeners = () => {\n    const listeners = documentListenersRef.current;\n    if (!listeners) {\n      return;\n    }\n\n    document.removeEventListener('pointermove', listeners.handleMove);\n    document.removeEventListener('pointerup', listeners.handleEnd);\n    document.removeEventListener('pointercancel', listeners.handleEnd);\n    documentListenersRef.current = null;\n  };\n\n  // Pointer capture routes events through the handle (including over iframes), but\n  // some surfaces still drop pointerup. Document-level listeners during an active\n  // drag are the release safety net. Only the pointer that started the drag may\n  // move or end it.\n  const endDrag = (pointerId: number) => {\n    if (activePointerIdRef.current !== pointerId) {\n      return;\n    }\n\n    activePointerIdRef.current = null;\n    removeDocumentListeners();\n    try {\n      resizeHandleRef.current?.releasePointerCapture(pointerId);\n    } catch {\n      // No active capture (or unsupported, e.g. jsdom) — nothing to release.\n    }\n\n    resizeHandleRef.current?.classList.remove(DRAGGING_CLASSNAME);\n    panelOffsetRef.current = 0;\n    onReleaseRef.current?.();\n  };\n\n  const handleDocumentPointerMove = (event: PointerEvent) => {\n    if (activePointerIdRef.current !== event.pointerId) {\n      return;\n    }\n\n    onMoveToRef.current(event.clientY + panelOffsetRef.current);\n  };\n\n  const addDocumentListeners = () => {\n    removeDocumentListeners();\n\n    const listeners = {\n      handleEnd: (event: PointerEvent) => endDrag(event.pointerId),\n      handleMove: handleDocumentPointerMove,\n    };\n    documentListenersRef.current = listeners;\n    document.addEventListener('pointermove', listeners.handleMove);\n    document.addEventListener('pointerup', listeners.handleEnd);\n    document.addEventListener('pointercancel', listeners.handleEnd);\n  };\n\n  const endDragRef = useRef(endDrag);\n  endDragRef.current = endDrag;\n  useEffect(() => {\n    return () => {\n      const activePointerId = activePointerIdRef.current;\n      if (activePointerId != null) {\n        endDragRef.current(activePointerId);\n      }\n    };\n  }, []);\n\n  return (\n    <ResizeHandleContainer\n      aria-label={ariaLabel}\n      onDoubleClick={onDoubleClick}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          onDoubleClick?.();\n          e.preventDefault();\n        }\n      }}\n      onLostPointerCapture={(e) => endDrag(e.pointerId)}\n      onPointerCancel={(e) => endDrag(e.pointerId)}\n      onPointerDown={(e) => {\n        // Primary button / touch / pen only; ignore secondary and middle clicks,\n        // and a second pointer while a drag is already active.\n        if (e.button !== 0 || activePointerIdRef.current != null) {\n          return;\n        }\n        const panelRect = panelRef.current?.getBoundingClientRect();\n        panelOffsetRef.current = panelRect ? panelRect.top - e.clientY : 0;\n        activePointerIdRef.current = e.pointerId;\n        resizeHandleRef.current?.classList.add(DRAGGING_CLASSNAME);\n        addDocumentListeners();\n        try {\n          resizeHandleRef.current?.setPointerCapture(e.pointerId);\n        } catch {\n          // Pointer capture unsupported (e.g. jsdom) — document listeners still\n          // route move/up events for the duration of the drag.\n        }\n        e.preventDefault();\n        e.stopPropagation();\n      }}\n      onPointerUp={(e) => endDrag(e.pointerId)}\n      ref={resizeHandleRef}\n      role='button'\n      tabIndex={0}\n    />\n  );\n};\n","import { type FC, type ReactNode, useRef } from 'react';\nimport styled from 'styled-components';\n\nimport { IconButton } from '@persona/design-system/components/Button';\nimport { PanelState, type ResizablePanelState } from '@persona/design-system/lib/useResizablePanel';\nimport { Z_INDICES } from '@persona/design-system/lib/zindex';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { ArrowCollapseIcon, ArrowExpandIcon, XIcon } from '@persona/icons';\nimport { semanticScrollbar } from 'design-system/mixins/scrollbar';\n\nimport { ResizeHandle } from './ResizeHandle';\n\ninterface ResizableVerticalPanelProps {\n  /** Panel body, rendered in the scrollable content area below the header. */\n  children: ReactNode;\n  /** Content for the header row, left of the maximize/minimize/close buttons. */\n  headerContent?: ReactNode;\n  /** State and drag/resize handlers from `useResizablePanel`. */\n  hookState: ResizablePanelState;\n  /** Minimum panel height in px. */\n  minHeight: number;\n}\n\nconst TriStatePanel = styled.div.attrs<{\n  customHeight: number | null;\n  minHeight: number;\n  panelState: PanelState;\n}>(({ customHeight, minHeight, panelState }) => ({\n  style: {\n    height: panelState === PanelState.Maximized ? '100%' : `${customHeight ?? minHeight}px`,\n  },\n}))<{\n  customHeight: number | null;\n  minHeight: number;\n  panelState: PanelState;\n}>`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n  background-color: ${({ theme }) => theme.color.background.primary};\n  position: relative;\n  min-height: ${({ minHeight }) => minHeight}px;\n  width: 100%;\n  border-top: 1px solid ${Color.BorderDivider};\n  z-index: ${Z_INDICES.topNav};\n`;\n\nconst TopRowContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  box-shadow: inset 0px -1px 0px 0px ${Color.BorderDivider};\n`;\n\nconst TopRightIconsContainer = styled.div`\n  display: flex;\n  align-items: center;\n  padding: 0 ${Spacing[2]};\n  gap: ${Spacing[2]};\n  flex-direction: row;\n`;\n\nconst ContentContainer = styled.div`\n  /* offset by the top row container height */\n  height: calc(100% - ${Spacing[6]});\n  overflow: auto;\n  ${semanticScrollbar}\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n`;\n\n/**\n * Bottom-anchored panel with a drag-to-resize top edge, a header row, and\n * maximize/minimize/close controls.\n */\nexport const ResizableVerticalPanel: FC<ResizableVerticalPanelProps> = ({\n  children,\n  headerContent,\n  hookState,\n  minHeight,\n}) => {\n  const {\n    collapse,\n    handleDragMove: handlePanelDragMove,\n    handleDragRelease,\n    maximize,\n    panelState,\n    restore,\n    size,\n    toggleMaximized,\n  } = hookState;\n  const panelRef = useRef<HTMLDivElement>(null);\n  // Controls only make sense once the drawer is taller than its collapsed header.\n  const showControls = (size != null && size > minHeight) || panelState === PanelState.Maximized;\n  // Converts the dragged top edge (clientY) into a panel height bounded by the\n  // panel's container.\n  const handleDragMove = (clientY: number) => {\n    const panel = panelRef.current;\n    const container = panel?.parentElement;\n    if (!panel || !container) {\n      return;\n    }\n    const panelBottom = panel.getBoundingClientRect().bottom;\n    const containerTop = container.getBoundingClientRect().top;\n    handlePanelDragMove(panelBottom - clientY, panelBottom - containerTop);\n  };\n\n  return (\n    <TriStatePanel\n      aria-label='Bottom panel'\n      customHeight={size}\n      minHeight={minHeight}\n      panelState={panelState}\n      ref={panelRef}\n      role='region'\n    >\n      <ResizeHandle\n        ariaLabel='Drag to resize bottom panel'\n        onDoubleClick={toggleMaximized}\n        onMoveTo={handleDragMove}\n        onRelease={handleDragRelease}\n        panelRef={panelRef}\n      />\n\n      <TopRowContainer>\n        {headerContent}\n\n        {showControls && (\n          <TopRightIconsContainer>\n            {panelState === PanelState.Maximized ? (\n              <IconButton aria-label='Restore the bottom panel' onClick={restore} size='sm'>\n                <ArrowCollapseIcon />\n              </IconButton>\n            ) : (\n              <IconButton aria-label='Maximize the bottom panel' onClick={maximize} size='sm'>\n                <ArrowExpandIcon />\n              </IconButton>\n            )}\n            <IconButton aria-label='Close bottom panel' onClick={collapse} size='sm'>\n              <XIcon />\n            </IconButton>\n          </TopRightIconsContainer>\n        )}\n      </TopRowContainer>\n\n      <ContentContainer>{children}</ContentContainer>\n    </TriStatePanel>\n  );\n};\n","import {\n  forwardRef,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useState,\n} from 'react';\nimport { useId } from 'react-aria';\nimport styled, { css } from 'styled-components';\n\nimport Badge from '@persona/design-system/components/Badge';\nimport TabBar, { Tab } from '@persona/design-system/components/TabBar';\nimport { PanelState, useResizablePanel } from '@persona/design-system/lib/useResizablePanel';\nimport { Spacing } from '@persona/design-tokens';\n\nimport { ResizableVerticalPanel } from './ResizableVerticalPanel';\n\n// One-pixel panel top border plus the 32px header row sets the collapsed drawer height.\nconst PANEL_MIN_HEIGHT = 33;\n// Where the drawer opens to when a collapsed tab is selected; the user can drag from there.\nconst OPEN_HEIGHT = 200;\n\nexport interface BottomPanelItemProps {\n  /** Tab text; also the key `openPanel(label)` looks up. Unique per BottomPanel. */\n  label: string;\n  /**\n   * Tab body. Every panel stays mounted while another tab is selected, so local\n   * state (scroll, expanded rows) survives a switch.\n   */\n  content: ReactNode;\n  /** Count shown as a badge on the tab. `0`/`undefined` hides it. */\n  badge?: number;\n}\n\nexport interface BottomPanelHandle {\n  /** Select the tab and expand the drawer if collapsed. No-op for an unknown label. */\n  openPanel: (label: string) => void;\n}\n\nexport interface BottomPanelProps {\n  /** Tabs to show, in order. */\n  panels: BottomPanelItemProps[];\n}\n\nconst Header = styled.div`\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  width: 100%;\n  padding-left: ${Spacing[4]};\n`;\n\n// The header row draws the divider edge to edge; the tab bar must not add its own.\nconst HeaderTabBar = styled(TabBar)`\n  border-bottom: none;\n`;\n\nconst PanelContent = styled.div<{ $hidden: boolean }>`\n  ${({ $hidden }) =>\n    $hidden\n      ? css`\n          position: absolute;\n          inset: 0;\n          overflow: hidden;\n          visibility: hidden;\n          pointer-events: none;\n        `\n      : css`\n          display: flex;\n          flex-direction: column;\n          flex: 1 1 auto;\n          min-height: 0;\n        `}\n`;\n\n/**\n * Resizable drawer anchored to the bottom of its container with one tab per\n * panel. Owns the tab bar, expand/collapse/resize, and always-mounted content;\n * the caller owns what each panel shows.\n */\nconst BottomPanel = forwardRef<BottomPanelHandle, BottomPanelProps>(function BottomPanel(\n  { panels },\n  ref,\n) {\n  const baseId = useId();\n  const [selected, setSelected] = useState<string | undefined>(panels[0]?.label);\n  // Falls back to the first panel when the selected label has left `panels`, and\n  // commits the fallback so the old label does not regain selection if it returns.\n  const hasSelected = panels.some((panel) => panel.label === selected);\n  const selectedLabel = hasSelected ? selected : panels[0]?.label;\n  useEffect(() => {\n    if (!hasSelected) {\n      setSelected(selectedLabel);\n    }\n  }, [hasSelected, selectedLabel]);\n\n  const resizablePanelState = useResizablePanel({\n    initialSize: PANEL_MIN_HEIGHT,\n    minSize: PANEL_MIN_HEIGHT,\n  });\n  const { expandTo, panelState, size } = resizablePanelState;\n\n  // Selecting a tab opens a collapsed drawer but leaves a maximized one as is.\n  const openPanel = useCallback(\n    (label: string) => {\n      if (panelState === PanelState.Drawer && (size == null || size <= PANEL_MIN_HEIGHT)) {\n        expandTo(OPEN_HEIGHT);\n      }\n      setSelected(label);\n    },\n    [expandTo, panelState, size],\n  );\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      openPanel: (label: string) => {\n        if (panels.some((panel) => panel.label === label)) {\n          openPanel(label);\n        }\n      },\n    }),\n    [openPanel, panels],\n  );\n\n  return (\n    <ResizableVerticalPanel\n      headerContent={\n        <Header>\n          <HeaderTabBar>\n            {panels.map((panel, index) => (\n              <Tab\n                aria-controls={`${baseId}-panel-${index}`}\n                badge={panel.badge ? <Badge>{panel.badge}</Badge> : undefined}\n                id={`${baseId}-tab-${index}`}\n                key={panel.label}\n                onClick={() => openPanel(panel.label)}\n                selected={selectedLabel === panel.label}\n              >\n                {panel.label}\n              </Tab>\n            ))}\n          </HeaderTabBar>\n        </Header>\n      }\n      hookState={resizablePanelState}\n      minHeight={PANEL_MIN_HEIGHT}\n    >\n      {panels.map((panel, index) => {\n        const isSelected = selectedLabel === panel.label;\n        return (\n          <PanelContent\n            $hidden={!isSelected}\n            aria-hidden={!isSelected}\n            aria-labelledby={`${baseId}-tab-${index}`}\n            id={`${baseId}-panel-${index}`}\n            key={panel.label}\n            role='tabpanel'\n          >\n            {panel.content}\n          </PanelContent>\n        );\n      })}\n    </ResizableVerticalPanel>\n  );\n});\n\nexport default BottomPanel;\n"],"mappings":"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"}

package/dist/components/Breadcrumbs/index.d.mts

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

package/dist/components/Breadcrumbs/index.mjs

@@ -1,2 +1,2 @@
-import { t as Breadcrumbs } from "../../Breadcrumbs-CrXfUK1V.mjs";
+import { t as Breadcrumbs } from "../../Breadcrumbs-DXS7rU7_.mjs";
 export { Breadcrumbs, Breadcrumbs as default };

package/dist/components/Button/index.d.mts

@@ -1,3 +1,3 @@
-import { a as SuffixIconContainer, i as StyledButton, n as ButtonChildren, r as ButtonProps, t as Button } from "../../Button-HodDf_bB.mjs";
-import { t as IconButton } from "../../IconButton-zu-VNp1h.mjs";
+import { a as SuffixIconContainer, i as StyledButton, n as ButtonChildren, r as ButtonProps, t as Button } from "../../Button-xZ6DC5XC.mjs";
+import { t as IconButton } from "../../IconButton-BUMMN-gH.mjs";
 export { Button, Button as default, ButtonChildren, ButtonProps, IconButton, StyledButton, SuffixIconContainer };

package/dist/components/Button/index.mjs

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

package/dist/components/ButtonGroup/index.mjs

@@ -1,8 +1,8 @@
 import { a as styled, r as css } from "../../styledComponentsInterop-NxwFjeA4.mjs";
 import { semanticOnly } from "../../lib/semanticColor.mjs";
 import { withAlpha } from "../../lib/color.mjs";
-import { o as buttonPalette, t as IconButton } from "../../IconButton-CqTPMhjV.mjs";
-import { n as useFormField } from "../../useFormField-DsvC5dOb.mjs";
+import { o as buttonPalette, t as IconButton } from "../../IconButton-CCLMYWVN.mjs";
+import { n as useFormField } from "../../useFormField-XezSxho_.mjs";
 import { BorderRadius } from "@persona/design-tokens";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/Card/index.d.mts

@@ -1,3 +1,3 @@
-import { a as Root, i as HeaderProps, n as Header, o as Title, r as HeaderContainer, s as TitleContainer, t as ActionsContainer } from "../../Header-ZnHGm8fs.mjs";
-import { n as SectionProps, r as _default, t as CardProps } from "../../Card-CpDwATnX.mjs";
+import { a as Root, i as HeaderProps, n as Header, o as Title, r as HeaderContainer, s as TitleContainer, t as ActionsContainer } from "../../Header-DxJ6TfPw.mjs";
+import { n as SectionProps, r as _default, t as CardProps } from "../../Card-CUeM8Lh8.mjs";
 export { ActionsContainer, CardProps, Header, HeaderContainer, HeaderProps, Root, SectionProps, Title, TitleContainer, _default as default };

package/dist/components/CardV2/index.d.mts

@@ -1,4 +1,4 @@
-import { i as TextAction, n as IconAction, r as MenuAction } from "../../Action-C7INft7X.mjs";
+import { i as TextAction, n as IconAction, r as MenuAction } from "../../Action-B-AiHknZ.mjs";
 import { CARD_HEADING_STICKY_OFFSET } from "../../SectionHeading.mjs";
 import _default from "../../Card2.mjs";
 export { CARD_HEADING_STICKY_OFFSET, _default as Card, _default as default, type IconAction, type MenuAction, type TextAction };